/* ═══════════════════════════════════════════════════
   TOP MOUNTAINEER · HOMEPAGE (index.html)
   Brand canon v1 locked: Basalt / Snow / Summit Orange, 90/10.
   Dark mode is the brand — html/body hard-locked below.
═══════════════════════════════════════════════════ */

/* ── Tokens (copy-paste block from brand guide §07) ── */
:root {
  /* Brand — locked */
  --tm-basalt: #1A1C20;   /* rgb(26,28,32)      */
  --tm-snow: #F5F5F3;     /* rgb(245,245,243)   */
  --tm-orange: #FF6B2C;   /* rgb(255,107,44) — accent only, ~10% */

  /* UI — derived */
  --tm-surface: #212429;
  --tm-surface-2: #262A31;
  --tm-hairline: rgba(245,245,243,.10);
  --tm-snow-muted: rgba(245,245,243,.64);

  /* Type */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
}

/* Lock dark mode — no browser/OS auto-invert */
html, body { background: var(--tm-basalt); color: var(--tm-snow); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

::selection { background: var(--tm-orange); color: var(--tm-basalt); }
:focus-visible { outline: 2px solid var(--tm-orange); outline-offset: 3px; border-radius: 2px; }

/* ── Shared bits ─────────────────────────────── */
.kicker {
  font-family: var(--font-display);
  font-size: .8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .22em; color: var(--tm-orange); margin-bottom: .9rem;
}
.meta-dim { color: var(--tm-snow-muted); }

/* Buttons — clipped-corner brand style */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  background: var(--tm-orange); color: var(--tm-basalt);
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; font-size: .95rem; padding: 1rem 2.1rem; border: none; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease;
}
.btn::after { /* arrow */
  content: "→"; font-family: var(--font-body); font-weight: 600;
  transition: transform .25s cubic-bezier(.2,.8,.3,1);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(255,107,44,.35); }
.btn:hover::after { transform: translateX(5px); }

.btn-sm { font-size: .8rem; padding: .65rem 1.3rem; letter-spacing: .12em; }

/* Hero CTA — animated (pulse ring + breathing glow) */
.btn-hero { animation: cta-breathe 2.8s ease-in-out infinite; }
@keyframes cta-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,44,.45), 0 10px 34px rgba(255,107,44,.28); }
  50%      { box-shadow: 0 0 0 14px rgba(255,107,44,0), 0 16px 48px rgba(255,107,44,.42); }
}

/* ── Header ──────────────────────────────────── */
#site-header { background: transparent; border-bottom: 1px solid transparent; transform: translateY(-100%); }
#site-header.is-visible {
  transform: translateY(0);
  background: rgba(26,28,32,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--tm-hairline);
}
.logo-link svg { width: 100%; height: auto; display: block; }

/* ── Hero ────────────────────────────────────── */
#hero-video { will-change: transform; }
.hero-vignette { background: radial-gradient(ellipse at center, transparent 42%, rgba(26,28,32,.55) 100%); }

/* Scroll cue — animated line */
.scroll-cue { width: 1px; height: 56px; overflow: hidden; background: rgba(245,245,243,.14); position: relative; }
.scroll-cue::after {
  content: ""; position: absolute; inset: 0; background: var(--tm-snow);
  transform-origin: top; animation: cue-drop 2.2s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes cue-drop {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── Section 2 · Carousel ────────────────────── */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

[data-drag-scroll] { cursor: grab; }
[data-drag-scroll].is-dragging, [data-drag-scroll].is-dragging * {
  cursor: grabbing !important;
  user-select: none; -webkit-user-select: none;
}
.slide img { -webkit-user-drag: none; }

.drag-hint { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tm-snow-muted); user-select: none; }

.nav-arrow {
  width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--tm-hairline); background: transparent; color: var(--tm-snow);
  transition: all .2s ease;
}
.nav-arrow svg { width: 20px; height: 20px; }
.nav-arrow:hover { border-color: var(--tm-orange); color: var(--tm-orange); transform: translateY(-1px); }

.slide {
  position: relative; flex: 0 0 auto; width: min(82vw, 560px);
  scroll-snap-align: center; outline-offset: 4px;
}
/* Caption — revealed on hover / focus */
.slide figcaption {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 3;
  padding: 2.6rem 1.4rem 1.2rem; text-align: left;
  font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; letter-spacing: .04em;
  color: var(--tm-snow); background: linear-gradient(to top, rgba(26,28,32,.94), transparent);
  opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.3,1);
  pointer-events: none;
}
.slide:hover figcaption, .slide:focus-visible figcaption { opacity: 1; transform: translateY(0); }
@media (hover: none) { /* touch: always visible */
  .slide figcaption { opacity: 1; transform: none; }
}

/* Browser frame */
.browser {
  border: 1px solid var(--tm-hairline); background: var(--tm-surface);
  overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.3,1), border-color .3s ease;
}
.slide:hover .browser { transform: translateY(-6px); border-color: rgba(255,107,44,.4); }

.browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--tm-hairline); background: var(--tm-surface-2); }
.browser-bar span:nth-child(-n+3) { width: 9px; height: 9px; border-radius: 50%; background: rgba(245,245,243,.18); display: inline-block; }
.browser-url { margin-left: 10px; font-size: .62rem; letter-spacing: .06em; color: var(--tm-snow-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Mock screens */
.mock { height: 340px; display: flex; background: var(--tm-basalt); font-size: 12px; }

/* — Dashboard mock — */
.mock-dash { gap: 0; }
.mock-side { width: 58px; border-right: 1px solid var(--tm-hairline); padding: 14px 10px; display: flex; flex-direction: column; gap: 12px; align-items: center; background: var(--tm-surface); }
.side-mark { width: 30px; height: auto; color: var(--tm-snow); opacity: .9; margin-bottom: 6px; }
.side-item { display: block; height: 8px; border-radius: 4px; background: rgba(245,245,243,.14); width: 70%; }
.side-item.active { background: var(--tm-orange); width: 56%; }

.mock-main { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat-card { border: 1px solid var(--tm-hairline); background: var(--tm-surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.stat-num { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--tm-snow); }
.stat-cap { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tm-snow-muted); }

.board { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; min-height: 0; }
.col { border: 1px solid var(--tm-hairline); background: rgba(33,36,41,.5); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.col-head { height: 7px; border-radius: 4px; background: rgba(245,245,243,.22); width: 60%; }
.chip { height: 26px; border-radius: 6px; background: var(--tm-surface-2); border: 1px solid var(--tm-hairline); width: 100%; position: relative; overflow: hidden; }
.chip::after { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); height: 4px; border-radius: 2px; background: rgba(245,245,243,.16); width: 55%; }

/* — Call review mock — */
.mock-calls { flex-direction: column; padding: 16px; gap: 12px; }
.calls-head { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); letter-spacing: .08em; }
.calls-id { font-weight: 600; font-size: .8rem; color: var(--tm-snow); }
.calls-time { font-size: .7rem; color: var(--tm-snow-muted); }
.stage-badge { margin-left: auto; font-size: .58rem; letter-spacing: .14em; color: var(--tm-orange); border: 1px solid rgba(255,107,44,.4); padding: 3px 8px; white-space: nowrap; }

.transcript { flex: 1; display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.t-line { display: flex; align-items: center; gap: 10px; }
.t-time { font-size: .6rem; color: var(--tm-snow-muted); width: 34px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.t-bar { height: 9px; border-radius: 5px; background: rgba(245,245,243,.16); display: block; }
.t-line.rep .t-bar { background: rgba(245,245,243,.08); margin-left: 26px; }
.t-line.hot { border-left: 2px solid var(--tm-orange); padding-left: 10px; position: relative; }
.t-line.hot .t-bar { background: rgba(255,107,44,.35); }
.hot-tag { font-style: normal; margin-left: auto; font-size: .56rem; letter-spacing: .12em; color: var(--tm-orange); white-space: nowrap; }

/* — Playbook mock — */
.mock-playbook { flex-direction: column; padding: 18px; gap: 0; }
.stage-list { list-style: none; display: flex; flex-direction: column; height: 100%; justify-content: space-between; }
.stage-list li { display: grid; grid-template-columns: 34px 1fr 92px; align-items: center; gap: 12px; padding: 8px 10px; border-bottom: 1px solid var(--tm-hairline); transition: background .2s ease; }
.stage-list li:last-child { border-bottom: none; }
.stage-list li:hover, .stage-list li.final { background: rgba(38,42,49,.7); }
.s-num { font-family: var(--font-display); font-weight: 600; color: var(--tm-orange); font-size: .85rem; letter-spacing: .06em; }
.s-name { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--tm-snow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-bar { height: 4px; border-radius: 2px; background: rgba(245,245,243,.1); overflow: hidden; display: block; }
.s-bar i { display: block; height: 100%; background: var(--tm-snow-muted); border-radius: 2px; }
.s-bar.hot i { background: var(--tm-orange); }

/* — Certification mock — */
.mock-cert { padding: 18px; gap: 16px; }
.cert-badge { width: 40%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--tm-hairline); background: var(--tm-surface); text-align: center; padding: 16px; }
.cert-badge svg { width: 52px; height: auto; color: var(--tm-orange); }
.cert-word { font-family: var(--font-display); font-weight: 700; letter-spacing: .3em; font-size: .8rem; color: var(--tm-snow); }
.cert-sub { font-size: .56rem; letter-spacing: .14em; color: var(--tm-snow-muted); text-transform: uppercase; }

.score-panel { flex: 1; display: flex; flex-direction: column; gap: 12px; justify-content: center; min-width: 0; }
.score-panel .t-line { gap: 12px; }
.score-panel .s-name { font-size: .68rem; width: 92px; flex-shrink: 0; }
.score-total { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; border-top: 1px solid var(--tm-hairline); padding-top: 12px; }

/* ── Section 3 · Social proof ────────────────── */
.proof-silhouette {
  background:
    radial-gradient(ellipse 60% 45% at 78% 62%, rgba(38,42,49,.9), transparent 70%),
    linear-gradient(to top right, transparent 49.6%, #212429 50%) ,
    conic-gradient(from -18deg at 70% 100%, #212429 0 34deg, transparent 34deg);
  clip-path: polygon(0 100%, 12% 62%, 22% 78%, 38% 34%, 50% 58%, 64% 12%, 76% 44%, 88% 30%, 100% 100%);
}

/* Marquee */
.marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent); mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent); }
.marquee-track { display: flex; align-items: center; gap: 4.5rem; width: max-content; animation: marquee 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.brand-chip { display: flex; align-items: center; gap: .7rem; color: rgba(245,245,243,.38); transition: color .25s ease; cursor: default; white-space: nowrap; }
.brand-chip:hover { color: var(--tm-snow); }
.brand-chip svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }
.brand-chip span { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .18em; font-size: .95rem; }

/* Glass card */
.glass-card {
  background: rgba(245,245,243,.045);
  backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-color: var(--tm-hairline);
  box-shadow: 0 24px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(245,245,243,.08);
}
.quote-mark { font-size: 4.5rem; line-height: .6; display: block; margin-bottom: 1.4rem; }

/* ── Section 4 · Ascent art ──────────────────── */
#ascent-art { overflow: visible; }
.cloud-a { animation: drift 26s ease-in-out infinite alternate; }
.cloud-b { animation: drift 34s ease-in-out infinite alternate-reverse; }
.cloud-c { animation: drift 22s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(-18px); } to { transform: translateX(26px); } }

.flag-cloth { transform-origin: 410px 34px; animation: flag-wave 2.6s ease-in-out infinite; }
@keyframes flag-wave {
  0%, 100% { transform: skewY(0deg) scaleX(1); }
  35%      { transform: skewY(-7deg) scaleX(.94); }
  70%      { transform: skewY(4deg) scaleX(1.02); }
}

/* Bullets */
.ascent-bullet { display: flex; align-items: center; gap: 1.1rem; }
.bullet-mark { width: 34px; height: 3px; background: rgba(245,245,243,.28); position: relative; flex-shrink: 0; }
.bullet-mark::after { content: ""; position: absolute; left: 0; top: -2.5px; width: 9px; height: 9px; background: var(--tm-snow-muted); transform: rotate(45deg); transition: all .3s ease; }
.bullet-mark.hot::after { background: var(--tm-orange); }
.ascent-bullet:hover .bullet-mark { background: rgba(255,107,44,.35); }

/* ── Section 5 · Video player ────────────────── */
.player img { transition: transform 8s linear; }
.player.is-cycling img { animation: kenburns 8s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }

.play-btn { width: 92px; height: 92px; display: grid; place-items: center; background: transparent; border: none; cursor: pointer; z-index: 4; transition: transform .3s cubic-bezier(.2,.8,.3,1); }
.play-btn:hover { transform: translate(-50%,-50%) scale(1.07); }
.play-core { width: 92px; height: 92px; border-radius: 50%; background: var(--tm-orange); display: grid; place-items: center; color: var(--tm-basalt); box-shadow: 0 14px 44px rgba(255,107,44,.4); transition: transform .3s ease; }
.play-core svg { width: 34px; height: 34px; margin-left: 4px; }
.play-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255,107,44,.65); animation: ring-pulse 2.4s cubic-bezier(.2,.6,.35,1) infinite; }
.play-ring::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(255,107,44,.3); animation: ring-pulse 2.4s cubic-bezier(.2,.6,.35,1) .5s infinite; }
@keyframes ring-pulse { 0% { transform: scale(.82); opacity: 1; } 100% { transform: scale(1.45); opacity: 0; } }

/* Episode thumbnails */
.ep-thumb { position: relative; display: block; width: 100%; border: 1px solid var(--tm-hairline); background: var(--tm-surface); padding: 0; cursor: pointer; overflow: hidden; transition: border-color .25s ease, transform .25s ease; }
.ep-thumb:hover { transform: translateY(-3px); }
.ep-thumb.is-active { border-color: rgba(255,107,44,.65); }
.ep-thumb img { display: block; filter: saturate(.85) brightness(.92); transition: filter .3s ease; }
.ep-thumb.is-active img { filter: none; }

.ep-label { position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: baseline; gap: .6rem; padding: 1.4rem .9rem .7rem; background: linear-gradient(to top, rgba(26,28,32,.95), transparent); text-align: left; }
.ep-label b { font-family: var(--font-display); font-weight: 600; font-size: .72rem; letter-spacing: .14em; color: var(--tm-orange); flex-shrink: 0; }
.ep-label i { font-style: normal; font-size: .78rem; color: var(--tm-snow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ep-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--tm-orange); transform-origin: left; transform: scaleX(0); opacity: 0; }
.ep-thumb.is-active .ep-progress { animation: ep-fill 8s linear forwards; }
@keyframes ep-fill { from { transform: scaleX(0); opacity: 1; } to { transform: scaleX(1); opacity: 1; } }

/* ── Section 6 · CTA gradient ────────────────── */
.cta-gradient {
  background:
    radial-gradient(ellipse 75% 55% at 50% -8%, rgba(255,107,44,.34), transparent 62%),
    linear-gradient(180deg, var(--tm-basalt) 0%, #221a15 48%, #33200f 100%);
}

/* ── Floating CTA ────────────────────────────── */
#floating-cta { opacity: 0; transform: translateY(24px); pointer-events: none; }
#floating-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ── Scroll reveals (JS adds .in-view) ───────── */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.3,1); }
.js [data-reveal].in-view { opacity: 1; transform: none; }

/* ── Reduced motion ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track, .cloud-a, .cloud-b, .cloud-c, .flag-cloth, .btn-hero, .play-ring, .play-ring::after, .scroll-cue::after, .player.is-cycling img, .ep-thumb.is-active .ep-progress { animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════
   V3 EXPANSION — full content build (V2 merge)
═══════════════════════════════════════════════ */

/* Anchor offset under the fixed header (incl. notch safe area) */
[id] { scroll-margin-top: calc(88px + env(safe-area-inset-top)); }

/* ── Header nav + mobile panel ───────────────── */
.nav-link {
  font-family: var(--font-display); font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; font-size: .78rem;
  color: rgba(245,245,243,.72); transition: color .2s ease; white-space: nowrap;
}
.nav-link:hover { color: var(--tm-orange); }

#nav-panel {
  max-height: 0; opacity: 0; overflow: hidden;
  background: rgba(26,28,32,.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--tm-hairline);
  transition: max-height .45s cubic-bezier(.2,.8,.3,1), opacity .3s ease;
}
#nav-panel.open { max-height: 520px; opacity: 1; }
#nav-panel a {
  display: block; padding: .95rem 1.5rem;
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  letter-spacing: .14em; font-size: .92rem; color: var(--tm-snow);
  border-bottom: 1px solid rgba(245,245,243,.06); transition: color .2s ease, padding-left .2s ease;
}
#nav-panel a:hover { color: var(--tm-orange); padding-left: 1.8rem; }

/* ── Hero proof strip ────────────────────────── */
.hero-stats {
  background: rgba(26,28,32,.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hero-stat { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; padding: 0 .75rem; }
.hero-stat .stat-num { font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1; }

/* ── Ghost button variant ────────────────────── */
.btn-ghost {
  background: transparent; color: var(--tm-snow);
  box-shadow: inset 0 0 0 1px rgba(245,245,243,.3);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--tm-orange), 0 14px 40px rgba(0,0,0,.3); color: var(--tm-snow); }

/* ── Feature cards (The Ascent System) ───────── */
.feature-card {
  border: 1px solid var(--tm-hairline); background: var(--tm-surface);
  padding: 1.75rem; transition: transform .3s cubic-bezier(.2,.8,.3,1), border-color .3s ease, background .3s ease;
}
.feature-card:hover { transform: translateY(-6px); border-color: rgba(255,107,44,.4); background: var(--tm-surface-2); }
.feature-icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(255,107,44,.35); background: rgba(255,107,44,.06);
  color: var(--tm-orange); margin-bottom: 1.1rem;
}
.feature-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature-tag {
  display: block; font-family: var(--font-display); font-size: .62rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--tm-orange); margin-bottom: .55rem;
}

/* ── Six-stage spine strip ───────────────────── */
.stage-card {
  flex: 0 0 auto; width: min(78vw, 300px); scroll-snap-align: start;
  border: 1px solid var(--tm-hairline); background: var(--tm-surface);
  padding: 1.5rem; transition: transform .25s ease, border-color .25s ease;
}
.stage-card:hover { transform: translateY(-4px); border-color: rgba(255,107,44,.45); }
.stage-num {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 2.6rem; line-height: 1; color: rgba(245,245,243,.18); margin-bottom: .9rem;
  transition: color .25s ease;
}
.stage-card:hover .stage-num { color: var(--tm-orange); }
.stage-card.final {
  border-color: rgba(255,107,44,.4);
  background: linear-gradient(160deg, rgba(255,107,44,.08), var(--tm-surface) 55%);
}
.stage-card.final .stage-num { color: var(--tm-orange); }

/* ── Onboarding phase cards ──────────────────── */
.phase-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--tm-hairline); background: var(--tm-surface);
  padding: 2rem 1.75rem; transition: transform .3s cubic-bezier(.2,.8,.3,1), border-color .3s ease;
}
.phase-card:hover { transform: translateY(-5px); border-color: rgba(255,107,44,.4); }
.phase-num {
  position: absolute; top: -.9rem; right: .8rem;
  font-family: var(--font-display); font-weight: 700; font-size: 6rem; line-height: 1;
  color: rgba(245,245,243,.06); pointer-events: none;
}
.phase-week {
  display: block; font-family: var(--font-display); font-size: .68rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--tm-orange); margin-bottom: .9rem;
}

/* ── Nothing Blurred · annotated call panel ──── */
.call-panel {
  border: 1px solid var(--tm-hairline);
  background: rgba(33,36,41,.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
.call-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding-bottom: 1.5rem; margin-bottom: .5rem; border-bottom: 1px solid var(--tm-hairline);
}
.call-label { font-family: var(--font-display); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .95rem; color: var(--tm-snow); }
.call-sub { margin-top: .35rem; font-size: .72rem; color: rgba(245,245,243,.4); }

.call-line {
  display: grid; grid-template-columns: 64px 1fr; gap: 1.1rem;
  padding: 1.05rem 0; border-bottom: 1px solid rgba(245,245,243,.06);
}
.call-who {
  font-family: var(--font-display); font-weight: 600; font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(245,245,243,.45); padding-top: .3rem;
}
.call-who.rep { color: var(--tm-orange); }
.call-text { font-size: .95rem; line-height: 1.65; color: rgba(245,245,243,.82); max-width: 62ch; }
.call-text.rep-text { color: var(--tm-snow); }
.call-annotation {
  margin-top: .7rem; padding-left: .9rem;
  border-left: 2px solid rgba(255,107,44,.55);
  font-size: .78rem; line-height: 1.55; color: rgba(245,245,243,.5); max-width: 62ch;
}
.call-reveal {
  margin-top: 1.9rem; text-align: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem); letter-spacing: .04em; color: var(--tm-snow);
}
.call-reveal em { font-style: normal; color: var(--tm-orange); }
.call-reveal span {
  display: block; margin-top: .55rem;
  font-family: var(--font-body); font-weight: 500; font-size: .82rem;
  letter-spacing: 0; text-transform: none; color: rgba(245,245,243,.5);
}

/* ── Testimonial carousel (all six) ──────────── */
.tc { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.tc-dots { width: 100%; justify-content: center; }
.tc-viewport { flex: 1; overflow: hidden; min-width: 0; }
.tc-track { display: flex; transition: transform .6s cubic-bezier(.2,.8,.3,1); }
.tc-slide { flex: 0 0 100%; min-width: 100%; padding: .25rem; }
.tcard {
  border: 1px solid var(--tm-hairline);
  background: rgba(245,245,243,.03);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 2rem 1.75rem; text-align: center;
}
.tcard blockquote { font-size: .98rem; line-height: 1.7; color: rgba(245,245,243,.82); }
.tcard figcaption { margin-top: 1.25rem; display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.tcard b {
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; color: var(--tm-snow);
}
.tcard span { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,245,243,.4); }
.tc-dots .tc-dot {
  /* Small visual dot, large touch target (mobile pass) */
  position: relative; width: 26px; height: 26px;
  background: transparent; border: none; padding: 0; cursor: pointer;
}
.tc-dots .tc-dot::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 8px; height: 8px; border-radius: 9999px; background: rgba(245,245,243,.22);
  transition: all .25s ease;
}
.tc-dots .tc-dot.active::before { width: 22px; background: var(--tm-orange); }

/* ── Resource library cards ──────────────────── */
.resource-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--tm-hairline); background: var(--tm-surface);
  padding: 1.6rem 1.5rem; transition: transform .3s cubic-bezier(.2,.8,.3,1), border-color .3s ease;
}
.resource-card:hover { transform: translateY(-5px); border-color: rgba(255,107,44,.4); }
.resource-type {
  font-family: var(--font-display); font-size: .62rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--tm-orange); margin-bottom: .7rem;
}
.resource-card p { flex: 1; }
.resource-cta {
  margin-top: 1.3rem; font-family: var(--font-display); font-size: .8rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tm-snow);
  transition: color .2s ease, transform .25s cubic-bezier(.2,.8,.3,1); display: inline-block;
}
.resource-cta:hover { color: var(--tm-orange); transform: translateX(4px); }

/* Leader Shelf banner (→ Newsletter.html) */
.shelf-banner { transition: border-color .25s ease; text-decoration: none; }
.shelf-banner:hover { border-color: rgba(255,107,44,.5); }
.shelf-cta { white-space: nowrap; transition: transform .25s cubic-bezier(.2,.8,.3,1); }
.shelf-banner:hover .shelf-cta { transform: translateX(6px); }

/* ── Forms (newsletter + contact) ────────────── */
.email-form { display: flex; flex-direction: column; gap: .75rem; max-width: 480px; margin-inline: auto; }
@media (min-width: 640px) {
  .email-form { flex-direction: row; align-items: stretch; }
  .email-form input { flex: 1; }
}
.field-label {
  display: block; font-family: var(--font-display); font-size: .68rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(245,245,243,.55); margin-bottom: .5rem;
}
.field-input, .email-form input {
  width: 100%; background: rgba(26,28,32,.7);
  border: 1px solid rgba(245,245,243,.16); color: var(--tm-snow);
  font-family: var(--font-body); font-size: .9rem; padding: .85rem 1rem;
  transition: border-color .2s ease, background .2s ease;
}
.field-input:focus, .email-form input:focus { outline: none; border-color: var(--tm-orange); background: rgba(26,28,32,.92); }
.field-input::placeholder, .email-form input::placeholder { color: rgba(245,245,243,.32); }
select.field-input {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F5F5F3' stroke-opacity='.5' fill='none' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.6rem;
}
.form-success {
  padding: 2.5rem 1.25rem; text-align: center;
  font-family: var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tm-snow); border: 1px solid rgba(255,107,44,.4);
  background: rgba(255,107,44,.08);
}

/* ── Pricing tiers + billing toggle ──────────── */
.billing-toggle { background: var(--tm-surface); }
.billing-opt {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; font-size: .8rem; color: rgba(245,245,243,.55);
  padding: .6rem 1.4rem; cursor: pointer; background: transparent; border: none;
  transition: all .2s ease;
}
.billing-opt.active { background: var(--tm-orange); color: var(--tm-basalt); }
.billing-save { font-size: .62rem; letter-spacing: .08em; opacity: .75; }

.tier {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--tm-hairline); background: var(--tm-surface);
  padding: 2.4rem 2rem 2.25rem; transition: transform .3s cubic-bezier(.2,.8,.3,1), border-color .3s ease;
}
.tier:hover { transform: translateY(-4px); border-color: rgba(245,245,243,.24); }
.tier.featured {
  border-color: rgba(255,107,44,.55);
  background: linear-gradient(180deg, rgba(255,107,44,.09), var(--tm-surface) 42%);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.badge-popular {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: .62rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  background: var(--tm-orange); color: var(--tm-basalt); padding: .35rem .95rem; white-space: nowrap;
}
.price-row { display: flex; align-items: baseline; gap: .45rem; }
.price-value {
  font-family: var(--font-display); font-weight: 700; font-size: 3rem; line-height: 1;
  color: var(--tm-snow); letter-spacing: -.01em;
}
.tier.featured .price-value { color: var(--tm-orange); }
.price-unit { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(245,245,243,.45); }
.price-note { margin-top: .65rem; font-size: .75rem; color: rgba(245,245,243,.45); min-height: 1.1em; }
.check-list li { position: relative; padding-left: 1.35rem; }
.check-list li::before {
  content: "▲"; position: absolute; left: 0; top: .2rem;
  font-size: .55rem; color: var(--tm-orange);
}

/* ── Podcast bar (show info + listen links) ──── */
.podcast-badge {
  display: inline-block; font-family: var(--font-display); font-size: .62rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  background: var(--tm-orange); color: var(--tm-basalt); padding: .3rem .85rem;
}
.listen-link {
  font-family: var(--font-display); font-size: .8rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(245,245,243,.75);
  transition: color .2s ease;
}
.listen-link:hover { color: var(--tm-orange); }

/* ── Founder cards ───────────────────────────── */
.founder-card {
  border: 1px solid var(--tm-hairline); background: var(--tm-surface);
  overflow: hidden; transition: transform .3s cubic-bezier(.2,.8,.3,1), border-color .3s ease;
}
.founder-card:hover { transform: translateY(-5px); border-color: rgba(255,107,44,.4); }
.founder-img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  filter: saturate(.92) contrast(1.03);
  transition: transform .8s cubic-bezier(.2,.8,.3,1), filter .4s ease;
}
.founder-card:hover .founder-img { transform: scale(1.035); filter: saturate(1) contrast(1.03); }
.founder-link {
  display: inline-block; margin-top: 1.3rem;
  font-family: var(--font-display); font-size: .8rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tm-orange);
}

/* ── FAQ accordion ───────────────────────────── */
.faq-item { border: 1px solid var(--tm-hairline); background: var(--tm-surface); transition: border-color .25s ease; }
.faq-item.open { border-color: rgba(255,107,44,.45); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.15rem 1.4rem; background: none; border: none; cursor: pointer;
  text-align: left; font-family: var(--font-display); font-weight: 600;
  letter-spacing: .04em; font-size: 1.02rem; color: var(--tm-snow);
}
.faq-icon {
  flex-shrink: 0; width: 27px; height: 27px; display: grid; place-items: center;
  border: 1px solid rgba(245,245,243,.2); font-size: 1rem; line-height: 1;
  color: rgba(245,245,243,.6);
  transition: transform .3s ease, border-color .3s ease, color .3s ease;
}
.faq-item.open .faq-icon { transform: rotate(45deg); border-color: var(--tm-orange); color: var(--tm-orange); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.8,.3,1); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p {
  padding: 0 1.4rem 1.35rem;
  font-size: .92rem; line-height: 1.7; color: rgba(245,245,243,.6); max-width: 72ch;
}

/* ── Two-route CTA cards ─────────────────────── */
.route-card {
  display: flex; flex-direction: column; align-items: flex-start;
  border: 1px solid var(--tm-hairline); background: var(--tm-surface);
  padding: 2.4rem 2.25rem; transition: transform .3s cubic-bezier(.2,.8,.3,1), border-color .3s ease;
}
.route-card:hover { transform: translateY(-4px); border-color: rgba(245,245,243,.24); }
.route-card.featured {
  border-color: rgba(255,107,44,.5);
  background: linear-gradient(180deg, rgba(255,107,44,.08), var(--tm-surface) 45%);
}
.capacity-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--tm-orange); flex-shrink: 0; }
.capacity-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid rgba(255,107,44,.6);
  animation: cap-pulse 2s ease-out infinite;
}
@keyframes cap-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }

/* ── Footer links ────────────────────────────── */
.footer-link, .footer-social-link {
  color: rgba(245,245,243,.55); text-decoration: none;
  transition: color .2s ease, transform .25s cubic-bezier(.2,.8,.3,1);
}
.footer-link:hover, .footer-social-link:hover { color: var(--tm-orange); }

/* ── Reduced motion (new components) ─────────── */
@media (prefers-reduced-motion: reduce) {
  .capacity-dot::after { animation: none !important; }
  .tc-track, .faq-a, .founder-img, #nav-panel { transition: none !important; }
}

/* ═══════════════════════════════════════════════
   MOBILE OPTIMIZATION PASS · j316digital.com reference
   Persistent header CTA, safe areas, touch targets,
   iOS zoom fix, swipe affordances. Desktop untouched.
═══════════════════════════════════════════════ */

html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Persistent “Book a Demo” in the header on phones (j316 pattern) */
.btn-header { display: none; }
@media (min-width: 360px) { .btn-header { display: inline-flex; } }
@media (max-width: 479px) {
  .btn-header { font-size: .72rem; padding: .58rem 1.05rem; letter-spacing: .1em; white-space: nowrap; }
}
@media (max-width: 379px) {
  .btn-header { font-size: .68rem; padding: .55rem .9rem; }
}

/* Mobile nav panel CTA — normalize the inherited #nav-panel a styles */
#nav-panel a.btn { border-bottom: none; padding: .8rem 1rem; font-size: .78rem; }

/* Desktop-only carousel arrows off on phones; drag hint stays visible */
@media (max-width: 767px) { #sys-prev, #sys-next { display: none; } }

/* Touch momentum for legacy iOS */
[data-drag-scroll] { -webkit-overflow-scrolling: touch; }

/* iOS Safari zooms inputs <16px — keep form fields at 1rem on phones */
@media (max-width: 639px) {
  .field-input, .email-form input { font-size: 1rem; }
}

/* Annotated call panel — tighter speaker column on narrow screens */
@media (max-width: 479px) {
  .call-line { grid-template-columns: 52px 1fr; gap: .8rem; }
  .call-who { font-size: .62rem; letter-spacing: .14em; padding-top: .35rem; }
}

/* Smaller play button on phones */
@media (max-width: 479px) {
  .play-btn, .play-core { width: 72px; height: 72px; }
  .play-core svg { width: 26px; height: 26px; margin-left: 3px; }
}

/* Hero — keep the proof strip compact on small phones */
@media (max-width: 479px) {
  .hero-stats > div { gap-y: .8rem; padding-top: .9rem; padding-bottom: .9rem; }
  .hero-stat .stat-num { font-size: 1.25rem; }
}

/* Short landscape phones — fill the screen instead of forcing 560px */
@media (max-height: 430px) and (orientation: landscape) {
  #hero { min-height: 100svh; }
}

/* Floating CTA — clear the home indicator, never wider than the viewport */
#floating-cta {
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  right: calc(1.5rem + env(safe-area-inset-right));
  max-width: calc(100vw - 2rem);
}

/* Tap feedback on touch devices */
@media (pointer: coarse) {
  .btn:active { transform: translateY(0) scale(.98); box-shadow: none; }
  .nav-arrow:active, .ep-thumb:active, .billing-opt:active, .faq-q:active {
    border-color: rgba(255,107,44,.55); color: var(--tm-orange);
  }
}