/* ==================================================================
   Free Bounce tour: shell styles (written for the ZayTooLit site).
   The shell (step rail, copy, controls) matches the ZayTooLit Chrome
   Cosmic Industrial look. The preview panes (.fbv) keep Free Bounce's
   own look, using the vendored CSS in ./vendor plus the few page-level
   rules from freebounce.studio/index.html reproduced (scoped) below.
   ================================================================== */
:root {
  /* Constellation tokens used by the vendored CSS */
  --cs-void: #050607;
  --cs-titanium: #858e99;
  --cs-cosmic: #8edcff;
  --cs-ice: #ddf6ff;
  --cs-chrome: linear-gradient(180deg, #ffffff 0%, #dfe4e9 18%, #8d959f 44%, #f6f8fa 62%, #737c86 82%, #d9dee4 100%);
  --cs-chrome-hi: linear-gradient(180deg, #ffffff 0%, #eaeef2 18%, #a2aab4 44%, #ffffff 62%, #869099 82%, #e8ecf1 100%);
  --cs-chrome-edge: linear-gradient(155deg, #f8fafc 0%, #aeb6c0 13%, #5d656f 27%, #ffffff 44%, #8d959f 57%, #4e565f 72%, #dfe4e9 88%, #99a1ab 100%);
  --cs-font-display: 'Saira', 'Inter', system-ui, sans-serif;
  /* Free Bounce neumorphic tokens (vault.css fallbacks) */
  --neu-base: #141414;
  --neu-surface: #1a1a1a;
  --neu-border: #2a2a2a;
  --neu-shadow-d: #0a0a0a;
  --neu-shadow-l: #262626;
  --neu-text-dim: #8a8a93;
  --neu-text-muted: #6b6b6b;
  --neu-accent: #3b82f6;
  --neu-radius: .75rem;
  --neu-radius-lg: 1rem;

  --t-text: #f1f3f5;
  --t-text-2: #a7afb8;
  --t-mono: 'Cascadia Mono', Consolas, 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --t-ui: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --t-focus: 0 0 0 2px #050607, 0 0 0 4px #8edcff;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: transparent; }
body { color: var(--t-text); font: 15px/1.6 var(--t-ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--cs-ice); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { box-shadow: var(--t-focus); border-radius: 6px; }
code { font-family: var(--t-mono); font-size: .88em; color: var(--cs-ice); }
[hidden] { display: none !important; }

.tour { padding: 8px 28px 24px; }
@media (max-width: 559px) { .tour { padding: 4px 16px 16px; } }

/* ---------- Step rail ---------- */
.rail__list {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  padding: 3px 3px 0; margin: -3px -3px 0;
  border-bottom: 1px solid rgba(80, 88, 98, .5);
}
.rail__list::-webkit-scrollbar { display: none; }
.rail__list [role="tab"] {
  position: relative; flex: none;
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 10px 12px 12px; border: 0; background: none; cursor: pointer;
  font-family: var(--t-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--t-text-2);
  transition: color 160ms;
}
.rail__list [role="tab"] span { color: #69727c; font-size: 10px; }
.rail__list [role="tab"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
  background: var(--cs-cosmic); box-shadow: 0 0 10px var(--cs-cosmic);
  transform: scaleX(0); transform-origin: left; transition: transform 240ms cubic-bezier(.2,.7,.2,1);
}
.rail__list [role="tab"]:hover { color: #fff; }
.rail__list [role="tab"][aria-selected="true"] { color: var(--cs-ice); }
.rail__list [role="tab"][aria-selected="true"] span { color: var(--cs-cosmic); }
.rail__list [role="tab"][aria-selected="true"]::after { transform: scaleX(1); }

/* ---------- Step layout ---------- */
.step { display: grid; gap: 18px; padding-top: 20px; animation: step-in 360ms cubic-bezier(.2,.7,.2,1); }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 820px) {
  .step { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; align-items: start; }
}
.step__copy { display: flex; flex-direction: column; gap: 12px; }
/* Step headings and copy: plain, smaller type on every step (owner briefs v10/v11).
   Solid colour, no chrome clip, no shadow. Scoped to the tour's step copy. */
.step__copy h2 {
  margin: 0; font-family: var(--t-ui); font-style: normal; font-weight: 500;
  font-size: 22px; line-height: 1.25; letter-spacing: 0;
  color: var(--t-text); text-shadow: none; filter: none;
}
.step__copy p { margin: 0; color: #e3e7ec; font-size: 14px; line-height: 1.55; }
@media (max-width: 559px) {
  .step__copy h2 { font-size: 20px; }
  .step__copy p { font-size: 13.5px; }
}
.step__about { display: flex; flex-direction: column; gap: 12px; }
/* Stacked layout (< 820px): the About copy scrolls in place so the preview mock
   still shows below it; the fade and thin scrollbar signal there is more text. */
@media (max-width: 819px) {
  .step__about {
    max-height: 220px; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 6px 28px 0; scrollbar-width: thin; scrollbar-color: rgba(142, 220, 255, .45) transparent;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(180deg, #000 calc(100% - 32px), transparent);
  }
  .step__about:focus-visible { outline: 2px solid var(--cs-cosmic); outline-offset: 4px; }
}
.kicker { font-family: var(--t-mono); font-size: 10.5px !important; letter-spacing: .16em; color: var(--cs-cosmic) !important; }

/* ---------- Browser frame around each live preview ---------- */
.browser {
  position: relative; min-width: 0; border-radius: 12px; overflow: hidden; background: #050505;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.55);
}
.browser::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 5;
  background-image: var(--cs-chrome-edge); opacity: .6;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.browser__bar {
  display: flex; align-items: center; gap: 6px; padding: 9px 12px;
  background: linear-gradient(180deg, #16191d, #0e1115); border-bottom: 1px solid #1c2229;
  font-family: var(--t-mono); font-size: 10px; letter-spacing: .08em; color: var(--t-text-2);
}
.browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: #292f36; flex: none; }
.browser__url {
  flex: 1; min-width: 0; margin-left: 6px; padding: 3px 10px; border-radius: 5px; background: #07090b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #bbc2cb;
}
.browser__live { flex: none; color: var(--cs-cosmic); letter-spacing: .12em; }
.browser__live::before { content: "● "; }
.browser__live[data-state="offline"] { color: #e6d89a; }

/* ---------- Free Bounce preview surface (their look) ---------- */
.fbv {
  position: relative; padding: 26px 18px; min-height: 360px;
  font-family: 'Inter', system-ui, sans-serif; color: #e5e5e5;
  background:
    radial-gradient(circle at 18% 12%, rgba(59, 130, 246, .12), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(142, 220, 255, .08), transparent 50%),
    #050505;
}
.fbv-muted { color: var(--neu-text-dim); font-size: 13px; margin: 0; }

/* Rim utility (stands in for freebounce.studio css/chrome-edge.css) */
.cs-edge { position: relative; }
.cs-edge::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--cs-edge-w, 1px); pointer-events: none;
  background-image: var(--cs-chrome-edge); opacity: var(--cs-edge-o, .5); transition: opacity 250ms;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.cs-edge:hover::after, .cs-edge:focus-visible::after { opacity: var(--cs-edge-o-hover, .95); }

/* Home: sizing rules from freebounce.studio/index.html */
.fbv-home { max-width: 22rem; margin: 0 auto; }
.home-logo-frame { width: 8.5rem; height: 8.5rem; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; }
.home-logo-frame img { width: 6.4rem; height: 6.4rem; object-fit: contain; }
.accent-line { width: 60%; height: 1px; margin: 0 auto 18px; background: linear-gradient(90deg, transparent, rgba(142, 220, 255, .55), transparent); }
.fbv-nav { display: flex; flex-direction: column; gap: 12px; }
.nav-row {
  --cs-edge-o: .55; --cs-edge-o-hover: .95;
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 14px 18px; border: 0; border-radius: var(--neu-radius);
  background: var(--neu-base); color: inherit; text-decoration: none; cursor: pointer;
  box-shadow: 6px 6px 12px var(--neu-shadow-d), -6px -6px 12px var(--neu-shadow-l);
  transition: transform 250ms cubic-bezier(.16,1,.3,1), box-shadow 250ms;
}
.nav-row:hover { transform: translateY(-2px); box-shadow: 8px 8px 16px var(--neu-shadow-d), -8px -8px 16px var(--neu-shadow-l), 0 0 20px rgba(59,130,246,.12); }
.nav-row:active { transform: none; box-shadow: inset 3px 3px 6px var(--neu-shadow-d), inset -3px -3px 6px var(--neu-shadow-l); }
.nav-label { font-size: 1.3rem; }
.nav-arrow { color: #71717a; font-size: 14px; }
.nav-sub { display: flex; justify-content: center; margin-top: 16px; }
.nav-sub-item {
  --cs-edge-o: .42; --cs-edge-o-hover: .95;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 10px;
  background: var(--neu-base); color: var(--cs-cosmic); cursor: pointer;
  box-shadow: 4px 4px 8px var(--neu-shadow-d), -4px -4px 8px var(--neu-shadow-l);
}
.nav-sub-item svg { width: 16px; height: 16px; }
.nav-sub-item .cs-chrome-type { font-size: .8rem; }
.social-row { display: flex; justify-content: center; gap: 14px; margin-top: 22px; }
.social-icon {
  --cs-edge-w: 1.5px; --cs-edge-o: .8; --cs-edge-o-hover: 1;
  flex: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--neu-base); box-shadow: 3px 3px 6px var(--neu-shadow-d), -3px -3px 6px var(--neu-shadow-l);
  transition: transform 250ms cubic-bezier(.16,1,.3,1);
}
.social-icon img { width: 30px; height: 30px; object-fit: contain; filter: brightness(.95) saturate(.95); }
.social-icon img[src*="soundcloud"] { width: 34px; height: auto; }
.social-icon:hover { transform: translateY(-2px); }
.social-icon:hover img { filter: brightness(1.12) drop-shadow(0 0 6px rgba(142, 220, 255, .35)); }

/* Vault: shown inline instead of in an overlay */
.fbv--vault { display: grid; place-items: center; }
.fbv .vault-window { transform: none; max-width: 400px; }
.vault-titlebar { gap: 10px; }
.vault-titlebar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vault-heading { margin-top: 0; }
.vault-pull-btn:disabled { cursor: progress; }
.vault-success-heading { margin-top: 0; }
.vault-file { font-family: var(--t-mono); color: #e5e5e5 !important; font-size: .78rem !important; overflow-wrap: anywhere; margin: 0 0 10px !important; }
.vault-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 14px; }
.vault-tags span {
  font-family: var(--t-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; color: var(--cs-cosmic); border: 1px solid rgba(142, 220, 255, .25); background: rgba(142, 220, 255, .06);
}
.vault-audio { display: block; width: 100%; height: 40px; margin: 0 0 6px; color-scheme: dark; }
.vault-note { margin: 0 0 14px; font-size: .7rem; color: var(--neu-text-dim); }
.vault-note:last-child { margin: 12px 0 0; }
.vault-funnel-btn { font-family: var(--cs-font-display); line-height: 1.35; }
button.vault-funnel-btn { border: 1px solid var(--neu-border); }

/* Radio */
.fbv--radio { padding: 18px 14px; }
.radio-group + .radio-group { margin-top: 14px; }
.radio-group h3 {
  margin: 0 0 8px; font-family: var(--cs-font-display); font-style: italic; font-weight: 800;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #a3a3a3;
}
.radio-rows { display: grid; gap: 6px; }
@media (min-width: 560px) { .radio-rows--two { grid-template-columns: 1fr 1fr; } }
.radio-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left;
  padding: 9px 12px; border: 1px solid #262626; border-left-width: 3px; background: #0b0b0b; cursor: pointer;
  transition: background 160ms, border-color 160ms;
}
.radio-row:hover { background: #151515; }
.radio-row[aria-pressed="true"] { border-left-color: #38bdf8; background: #141414; }
.radio-row strong { font-family: var(--cs-font-display); font-style: italic; font-weight: 800; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.radio-row small { font-size: 11.5px; color: #8a8a8a; }
.radio-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.radio-chip {
  padding: 6px 10px; border: 1px solid #262626; background: #0b0b0b; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #a3a3a3;
}
.radio-chip:hover { color: #fff; }
.radio-chip[aria-pressed="true"] { color: #fff; border-color: #38bdf8; }
.radio-now { margin: 16px 0 8px; font-family: var(--t-mono); font-size: 10px; letter-spacing: .14em; color: var(--cs-cosmic); }
.radio-player { min-height: 152px; }
.radio-player iframe { display: block; width: 100%; }

/* Community */
.fbv--comm { display: grid; align-content: center; }
.comm-list { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 10px; width: 100%; max-width: 26rem; }
.comm-link {
  --cs-edge-o: .35; --cs-edge-o-hover: .9;
  display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 999px;
  background: var(--neu-base); box-shadow: 4px 4px 10px var(--neu-shadow-d), -4px -4px 10px var(--neu-shadow-l);
  color: inherit; text-decoration: none; transition: transform 250ms cubic-bezier(.16,1,.3,1);
}
.comm-link:hover { transform: translateX(3px); }
.comm-link > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.comm-link strong { font-size: 1.05rem; align-self: flex-start; }
.comm-link small { font-size: 12px; color: var(--neu-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comm-link i { margin-left: auto; font-style: normal; color: var(--cs-cosmic); }
.comm-link .social-icon { cursor: inherit; }

/* ---------- Controls ---------- */
.controls {
  display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 14px;
  border-top: 1px solid rgba(80, 88, 98, .5);
}
.ctl {
  position: relative; min-height: 42px; padding: 0 16px; border: 0; border-radius: 8px; cursor: pointer;
  font-family: var(--t-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  background-image: linear-gradient(180deg, #252b32, #12161a); color: var(--t-text);
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.ctl::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background-image: var(--cs-chrome-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.ctl:hover:not(:disabled) { background-image: linear-gradient(180deg, #2b323a, #171c21); color: #fff; }
.ctl:disabled { opacity: .4; cursor: default; }
.ctl--next { margin-left: auto; background-image: var(--cs-chrome-hi); color: #07090b; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.ctl--next:hover:not(:disabled) { background-image: var(--cs-chrome-hi); color: #000; box-shadow: 0 6px 20px rgba(0,0,0,.4), 0 0 18px rgba(221,246,255,.25); }
.ctl:focus-visible { box-shadow: var(--t-focus); }
.dots { display: flex; gap: 4px; }
.dots button { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.dots button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid #858e99; transition: background 160ms, box-shadow 160ms; }
.dots button:hover::before { border-color: #fff; }
.dots button[aria-current="step"]::before { background: var(--cs-cosmic); border-color: var(--cs-cosmic); box-shadow: 0 0 8px var(--cs-cosmic); }
.counter { font-family: var(--t-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--t-text-2); }
@media (max-width: 480px) {
  .controls { gap: 6px; flex-wrap: wrap; }
  .ctl { padding: 0 12px; }
  .counter { display: none; }
  .dots button { width: 22px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
  .logo-spin__mark.is-spinning { animation: none !important; }
}