:root {
  --sb-amber: #d9a441;
  --sb-amber-soft: rgba(217, 164, 65, .10);
  --sb-steel: #9aa8b8;
  --sb-cyan: #65d9ff;
  --sb-violet: #9b7cff;
  --sb-mint: #5ce0aa;
}

body {
  background:
    radial-gradient(circle at 12% -8%, rgba(55, 117, 210, .22), transparent 30rem),
    radial-gradient(circle at 88% 4%, rgba(155, 124, 255, .11), transparent 26rem),
    radial-gradient(circle at 50% 44%, rgba(65, 215, 202, .04), transparent 34rem),
    linear-gradient(180deg, #05080d 0%, #090d13 50%, #05080d 100%);
}
body.welcome-open { overflow:hidden; }

.topbar { background: rgba(5, 8, 13, .88); }
.beta-pill { color: #d9e4f2; border-color: rgba(154, 168, 184, .24); background: rgba(154, 168, 184, .07); }
.eyebrow { color: #a8c8ea; }
.eyebrow::before { background: var(--sb-amber); box-shadow: 0 0 12px rgba(217, 164, 65, .45); }
.gradient-text { background: linear-gradient(108deg, #fff 4%, #b9ddff 39%, #a997ff 72%, #7ae8ba 118%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.card, .hero-console, .journal-status-card, .status-card { box-shadow: inset 0 1px rgba(255,255,255,.025), 0 18px 55px rgba(0,0,0,.12); }

.mode-switch {
  flex:0 0 auto;
  border:1px solid rgba(101,217,255,.22);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(74,156,255,.10),rgba(155,124,255,.08));
  color:#cbe5ff;
  padding:8px 11px;
  font:inherit;
  font-size:10px;
  font-weight:850;
  cursor:pointer;
}
.mode-switch:hover { border-color:rgba(101,217,255,.5); color:white; }

/* First-visit experience selection. */
.welcome-gate { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:18px; }
.welcome-gate[hidden] { display:none; }
.welcome-backdrop { position:absolute; inset:0; background:rgba(2,5,10,.84); backdrop-filter:blur(18px); }
.welcome-card {
  position:relative;
  width:min(760px,100%);
  border:1px solid rgba(126,185,255,.25);
  border-radius:28px;
  padding:30px;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 0%,rgba(74,156,255,.16),transparent 19rem),
    radial-gradient(circle at 93% 7%,rgba(155,124,255,.13),transparent 17rem),
    linear-gradient(155deg,rgba(13,22,35,.98),rgba(6,10,18,.99));
  box-shadow:0 40px 120px rgba(0,0,0,.62),0 0 0 1px rgba(101,217,255,.03);
}
.welcome-mark { width:50px;height:50px;border-radius:16px;display:grid;place-items:center;border:1px solid rgba(101,217,255,.22);background:rgba(74,156,255,.09);margin-bottom:18px; }
.welcome-mark img { width:34px;height:34px; }
.welcome-card h2 { margin:8px 0 8px;font-size:clamp(30px,5vw,48px);letter-spacing:-.045em; }
.welcome-card>p { max-width:590px;color:#90a5bb;line-height:1.6;margin:0 0 22px; }
.welcome-paths { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.welcome-path {
  text-align:left;
  min-height:205px;
  border:1px solid rgba(121,153,190,.19);
  border-radius:19px;
  padding:18px;
  color:inherit;
  cursor:pointer;
  background:linear-gradient(155deg,rgba(17,28,43,.92),rgba(8,14,23,.96));
  transition:.18s ease;
}
.welcome-path.beginner { background:linear-gradient(150deg,rgba(22,45,52,.74),rgba(8,14,23,.96));border-color:rgba(92,224,170,.21); }
.welcome-path.experienced { background:linear-gradient(150deg,rgba(23,31,58,.76),rgba(8,14,23,.96));border-color:rgba(155,124,255,.22); }
.welcome-path:hover,.welcome-path:focus-visible { transform:translateY(-3px);border-color:rgba(101,217,255,.5);outline:none;box-shadow:0 18px 44px rgba(0,0,0,.28); }
.path-icon { display:grid;place-items:center;width:33px;height:33px;border-radius:10px;background:rgba(255,255,255,.04);color:#9fd6ff;font-size:9px;font-weight:900;margin-bottom:24px; }
.welcome-path strong { display:block;font-size:17px; }
.welcome-path small { display:block;margin-top:8px;color:#8196ad;line-height:1.55;font-size:11px; }
.welcome-path b { display:block;margin-top:20px;color:#b9dbff;font-size:10px;text-transform:uppercase;letter-spacing:.08em; }
.welcome-skip { display:block;margin:18px auto 0;border:0;background:transparent;color:#657b93;font:inherit;font-size:10px;cursor:pointer;text-decoration:underline;text-underline-offset:3px; }

.home-hero { position:relative; }
.home-hero::before { content:"";position:absolute;inset:12% 35% auto -10%;height:250px;background:radial-gradient(circle,rgba(72,163,255,.09),transparent 68%);pointer-events:none; }

.beginner-section { scroll-margin-top:90px; }
.beginner-stage {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:16px;
  padding:24px;
  border:1px solid rgba(92,224,170,.16);
  border-radius:22px;
  background:
    radial-gradient(circle at 0 0,rgba(92,224,170,.08),transparent 20rem),
    linear-gradient(145deg,rgba(13,27,31,.68),rgba(8,13,22,.92));
}
.beginner-intro h2 { margin:7px 0 9px;font-size:clamp(26px,3vw,38px);letter-spacing:-.04em; }
.beginner-intro p { color:#91a6ba;line-height:1.65;font-size:12px; }
.learning-path { display:grid;gap:8px; }
.learning-step { display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:start;padding:13px;border:1px solid rgba(255,255,255,.055);border-radius:13px;background:rgba(255,255,255,.018); }
.learning-step>span { display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,rgba(74,156,255,.13),rgba(92,224,170,.08));border:1px solid rgba(101,217,255,.15);color:#9dd8ff;font-size:9px;font-weight:900; }
.learning-step strong { display:block;font-size:12px;margin-top:2px; }
.learning-step small { display:block;margin-top:5px;color:#788da3;font-size:10px;line-height:1.5; }
.quick-glossary { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px; }
.quick-glossary div { padding:12px;border:1px solid rgba(121,153,190,.13);border-radius:12px;background:rgba(255,255,255,.015); }
.quick-glossary b { display:block;color:#badcff;font-size:10px;text-transform:uppercase;letter-spacing:.08em; }
.quick-glossary span { display:block;margin-top:5px;color:#74899f;font-size:9px;line-height:1.5; }
body[data-experience="experienced"] .beginner-hero-action { display:none; }
body[data-experience="beginner"] .experienced-hero-action { display:none; }
body[data-experience="experienced"] .beginner-section { opacity:.78; }

/* Clickable surfaces deliberately read differently from informational panels. */
a.interactive-surface,
a.card,
a.premium-card,
a.source-card {
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
a.interactive-surface::before,
a.card::before,
a.premium-card::before,
a.source-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(116, 184, 255, .02);
  transition: box-shadow .18s ease;
}
a.interactive-surface:hover,
a.interactive-surface:focus-visible,
a.card:hover,
a.card:focus-visible,
a.premium-card:hover,
a.premium-card:focus-visible,
a.source-card:hover,
a.source-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(96, 174, 255, .48) !important;
  background-color: rgba(18, 31, 48, .82);
  box-shadow: 0 20px 58px rgba(0,0,0,.24), 0 0 0 1px rgba(74,156,255,.07);
  outline: none;
}
a.interactive-surface:hover::before,
a.interactive-surface:focus-visible::before,
a.card:hover::before,
a.card:focus-visible::before,
a.premium-card:hover::before,
a.premium-card:focus-visible::before,
a.source-card:hover::before,
a.source-card:focus-visible::before {
  box-shadow: inset 0 0 0 1px rgba(116, 184, 255, .12);
}

.creator-strip {
  border: 1px solid rgba(217,164,65,.18);
  background: linear-gradient(135deg, rgba(217,164,65,.055), rgba(74,156,255,.035));
  border-radius: 18px;
  padding: 20px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 24px;
  align-items: center;
}
.creator-strip h3 { margin: 5px 0 8px; font-size: 22px; letter-spacing: -.025em; }
.creator-strip p { margin:0; color:var(--muted); line-height:1.65; font-size:13px; }
.creator-meta { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.creator-meta div { border:1px solid var(--line); border-radius:12px; padding:12px; background:rgba(255,255,255,.02); }
.creator-meta span { display:block; color:#7f91a5; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.creator-meta strong { display:block; margin-top:6px; font-size:12px; color:#d9e4f1; }

.premium-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.premium-card {
  position:relative;
  display:block;
  color:inherit;
  padding:20px;
  border:1px solid rgba(121,153,190,.18);
  border-radius:18px;
  background:linear-gradient(160deg,rgba(15,24,37,.9),rgba(8,13,22,.98));
  overflow:hidden;
  min-height:290px;
  box-shadow:0 18px 55px rgba(0,0,0,.12);
}
.premium-card::after { content:""; position:absolute; width:140px; height:140px; right:-62px; top:-72px; border-radius:50%; background:rgba(74,156,255,.08); filter:blur(3px); pointer-events:none; }
.premium-card:nth-child(2)::after { background:rgba(101,217,255,.11); }
.premium-card:nth-child(3)::after { background:rgba(155,124,255,.12); }
.premium-card:nth-child(4)::after { background:rgba(217,164,65,.09); }
.premium-card.featured { border-color:rgba(80,214,160,.24); background:linear-gradient(155deg,rgba(16,34,34,.56),rgba(8,13,22,.98)); }
.premium-card.featured::after { background:rgba(80,214,160,.10); }
.premium-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.premium-top > span:last-child { color:#6f91b2; font-size:10px; font-weight:900; letter-spacing:.08em; }
.premium-card h3 { margin:18px 0 8px; font-size:19px; }
.premium-card > p { color:#92a5b9; line-height:1.65; font-size:12px; margin:0; }
.premium-detail { position:absolute; left:20px; right:20px; bottom:18px; padding-top:13px; border-top:1px solid rgba(121,153,190,.14); }
.premium-detail b { display:block; color:#c9d8e8; font-size:10px; text-transform:uppercase; letter-spacing:.07em; }
.premium-detail span { display:block; margin-top:6px; color:#748aa1; font-size:10px; line-height:1.5; }
.premium-banner { margin-top:13px; display:flex; gap:10px; align-items:flex-start; border:1px solid rgba(101,217,255,.15); border-radius:14px; padding:15px 17px; background:linear-gradient(90deg,rgba(74,156,255,.055),rgba(155,124,255,.035),rgba(92,224,170,.025)); }
.premium-banner strong { color:#b9dbff; white-space:nowrap; font-size:12px; }
.premium-banner span { color:#8ea1b5; font-size:12px; line-height:1.55; }

.session-story-preview { position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:6px 0 18px;padding:22px 10px 8px; }
.session-story-preview::before { content:"";position:absolute;left:6%;right:6%;top:34px;height:1px;background:linear-gradient(90deg,rgba(74,156,255,.12),rgba(101,217,255,.5),rgba(155,124,255,.5),rgba(92,224,170,.32)); }
.story-stop { position:relative;padding:36px 10px 12px;text-align:center;border:1px solid rgba(121,153,190,.11);border-radius:14px;background:linear-gradient(180deg,rgba(14,22,34,.55),rgba(8,13,21,.62)); }
.story-stop i { position:absolute;top:6px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#101b29;border:3px solid #67c8ff;box-shadow:0 0 0 5px rgba(74,156,255,.08);z-index:1; }
.story-stop:nth-child(3) i,.story-stop:nth-child(4) i { border-color:#ab8cff; }
.story-stop:nth-child(5) i,.story-stop:nth-child(6) i { border-color:#62dca9; }
.story-stop span { display:block;color:#7f96ad;font-size:8px;text-transform:uppercase;letter-spacing:.08em; }
.story-stop strong { display:block;margin-top:6px;color:#c5d5e6;font-size:9px;line-height:1.45; }

.connect-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.connect-card { border:1px solid var(--line); border-radius:16px; padding:17px; background:rgba(255,255,255,.018); }
.connect-card b { display:block; font-size:13px; }
.connect-card p { margin:7px 0 0; color:var(--muted); font-size:11px; line-height:1.6; }
.connect-card a { display:inline-flex; margin-top:12px; color:#a9c9ee; text-decoration:none; font-size:11px; font-weight:800; padding-bottom:2px; border-bottom:1px solid rgba(169,201,238,.24); }
.connect-card a:hover { color:white; border-color:rgba(255,255,255,.65); }

.workspace-shell { padding: 24px 0 0; }
.workspace-frame-card { border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#080b10; box-shadow:var(--shadow); }
.workspace-frame-head { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:13px 15px; border-bottom:1px solid var(--line); background:rgba(15,21,31,.92); }
.workspace-frame-head div { min-width:0; }
.workspace-frame-head strong { display:block; font-size:12px; }
.workspace-frame-head small { display:block; color:var(--muted); margin-top:3px; font-size:9px; }
.workspace-frame-actions { display:flex; flex-wrap:wrap; gap:8px; }
.workspace-frame-actions a { text-decoration:none; color:#b7c8db; border:1px solid var(--line); background:rgba(255,255,255,.025); border-radius:9px; padding:7px 9px; font-size:10px; font-weight:800; }
.workspace-frame { display:block; width:100%; height:calc(100vh - 210px); min-height:680px; border:0; background:#080a0d; }

.library-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; }
.library-card { border:1px solid var(--line); border-radius:17px; padding:19px; background:linear-gradient(180deg,rgba(16,24,37,.78),rgba(9,14,22,.78)); }
.library-card h3 { margin:10px 0 8px; font-size:18px; }
.library-card p { color:var(--muted); font-size:12px; line-height:1.65; margin:0; }
.library-meta { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:15px; }
.library-meta div { border-top:1px solid var(--line); padding-top:9px; }
.library-meta span { display:block; color:#73859a; font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.library-meta strong { display:block; color:#c9d5e3; font-size:10px; margin-top:4px; }

.report-list { display:grid; gap:10px; }
.report-row { display:grid; grid-template-columns:180px minmax(0,1fr) auto; gap:18px; align-items:center; border:1px solid var(--line); border-radius:15px; padding:15px 16px; background:rgba(255,255,255,.018); }
.report-row > strong { font-size:12px; }
.report-row p { margin:0; color:var(--muted); font-size:11px; line-height:1.55; }
.report-row a { text-decoration:none; color:#a9c9ee; font-size:10px; font-weight:850; white-space:nowrap; }

.legal-disclaimer { border-top:1px solid rgba(121,153,190,.11); background:#05080d; color:#586b80; font-size:9px; line-height:1.55; letter-spacing:.01em; }
.legal-disclaimer .shell { padding-top:12px; padding-bottom:16px; text-align:center; }

@media (hover: none) {
  a.interactive-surface,
  a.card,
  a.premium-card,
  a.source-card { -webkit-tap-highlight-color: rgba(74,156,255,.15); }
}

@media (max-width: 1180px) {
  .premium-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .session-story-preview { grid-template-columns:repeat(3,1fr); }
  .session-story-preview::before { display:none; }
}

@media (max-width: 1100px) {
  .topbar-inner { gap:10px; }
  .nav { overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:none; padding-bottom:2px; }
  .nav::-webkit-scrollbar { display:none; }
  .nav a { white-space:nowrap; padding:8px 10px; }
  .beta-pill { display:none; }
  .quick-glossary { grid-template-columns:1fr 1fr; }
}

@media (max-width: 820px) {
  .shell { width:min(100% - 24px, 1240px); }
  .topbar-inner { min-height:64px; flex-wrap:wrap; align-content:center; padding:8px 0; }
  .brand { flex:1; width:auto; }
  .brand-copy span { font-size:9px; }
  .mode-switch { margin-left:auto; }
  .nav { margin-left:0; width:100%; order:3; padding:2px 0 4px; }
  .nav a { font-size:11px; }
  .hero, .page-hero { padding-top:38px; }
  h1 { font-size:clamp(38px,12vw,62px); }
  .creator-strip, .library-grid, .connect-grid, .premium-grid, .beginner-stage { grid-template-columns:1fr; }
  .creator-meta { grid-template-columns:1fr 1fr; }
  .premium-card { min-height:0; }
  .premium-detail { position:static; margin-top:18px; }
  .premium-banner { flex-direction:column; gap:5px; }
  .premium-banner strong { white-space:normal; }
  .report-row { grid-template-columns:1fr; gap:7px; }
  .workspace-shell { padding-top:14px; }
  .workspace-frame-head { align-items:flex-start; flex-direction:column; }
  .workspace-frame { height:calc(100vh - 250px); min-height:620px; }
  .welcome-card { padding:22px; }
  .welcome-paths { grid-template-columns:1fr; }
  .welcome-path { min-height:0; }
  .path-icon { margin-bottom:14px; }
  .session-story-preview { grid-template-columns:1fr 1fr; padding:0; }
  .story-stop { padding-top:15px;text-align:left; }
  .story-stop i { display:none; }
}

@media (max-width: 520px) {
  .creator-meta, .library-meta, .quick-glossary, .session-story-preview { grid-template-columns:1fr; }
  .hero-actions .btn { width:100%; }
  .footer-row { flex-direction:column; }
  .workspace-frame { min-height:560px; }
  .welcome-gate { padding:10px;align-items:end; }
  .welcome-card { border-radius:24px 24px 18px 18px;padding:20px 17px 16px;max-height:92vh;overflow:auto; }
  .welcome-card h2 { font-size:34px; }
  .welcome-mark { width:42px;height:42px;margin-bottom:12px; }
  .mode-switch { padding:7px 9px;font-size:9px; }
}

.runtime-status-card .chip { display:inline-flex; margin-bottom:8px; }
.runtime-status-card[data-state="live"] { border-color:rgba(93,225,170,.28); }
.runtime-status-card[data-state="pending"] { border-color:rgba(229,185,95,.28); }
.runtime-status-card[data-state="offline"] { border-color:rgba(251,113,133,.3); }
.runtime-status-card p { min-height:42px; }
.access-link-note { max-width:820px; margin:18px 0 0; padding:13px 15px; border:1px solid rgba(229,185,95,.2); border-radius:12px; background:rgba(229,185,95,.05); color:#8da2b8; font-size:11px; line-height:1.65; }
.access-link-note strong { color:#e7c878; }
.selected-tool { border-color:rgba(93,225,170,.42)!important; box-shadow:0 0 0 1px rgba(93,225,170,.1),var(--shadow); }

/* Community-first launch funnel */
.sb-membership { scroll-margin-top:90px; }
.sb-membership-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.sb-tier-card { position:relative;overflow:hidden;border:1px solid rgba(121,153,190,.18);border-radius:22px;padding:25px;background:linear-gradient(155deg,rgba(16,25,39,.9),rgba(8,13,22,.98));box-shadow:0 20px 58px rgba(0,0,0,.16); }
.sb-tier-card::after { content:"";position:absolute;right:-75px;top:-95px;width:210px;height:210px;border-radius:50%;background:rgba(74,156,255,.08);filter:blur(2px);pointer-events:none; }
.sb-tier-card.premium { border-color:rgba(92,224,170,.27);background:linear-gradient(150deg,rgba(13,37,35,.7),rgba(8,13,22,.98) 62%); }
.sb-tier-card.premium::after { background:rgba(92,224,170,.1); }
.sb-tier-head { position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px; }
.sb-tier-head>strong { color:#c9d8e8;font-size:11px;text-transform:uppercase;letter-spacing:.07em;text-align:right; }
.sb-tier-card h3 { position:relative;z-index:1;margin:24px 0 14px;font-size:24px;letter-spacing:-.03em; }
.sb-tier-card ul { position:relative;z-index:1;list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px; }
.sb-tier-card li { position:relative;padding-left:21px;color:#93a7bc;font-size:12px;line-height:1.55; }
.sb-tier-card li::before { content:"✓";position:absolute;left:0;color:#6ddfa9;font-weight:900; }
.sb-tier-card>.btn { position:relative;z-index:1; }
.sb-funnel { display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:12px;align-items:center;margin-top:14px;padding:18px;border:1px solid rgba(121,153,190,.14);border-radius:18px;background:rgba(255,255,255,.018); }
.sb-funnel>div { min-width:0; }
.sb-funnel span { display:block;color:#6fbaff;font-size:9px;font-weight:900;letter-spacing:.08em; }
.sb-funnel strong { display:block;margin-top:5px;font-size:12px; }
.sb-funnel small { display:block;margin-top:4px;color:#6f8298;font-size:9px;line-height:1.4; }
.sb-funnel>i { color:#47637e;font-style:normal;font-size:12px; }

.access-hero { position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:46px;align-items:center;padding:72px 0 34px; }
.access-hero::before { content:"";position:absolute;left:-14%;top:-80px;width:560px;height:420px;background:radial-gradient(circle,rgba(74,156,255,.12),transparent 67%);pointer-events:none; }
.access-hero-copy { position:relative;z-index:1; }
.access-hero .eyebrow { margin-top:26px; }
.access-hero h1 { font-size:clamp(44px,6.4vw,76px);max-width:760px; }
.access-hero p { color:#a3b4c8;font-size:16px;line-height:1.7;max-width:760px; }
.access-existing-link { display:inline-flex;margin-top:13px;color:#8fbfe9;font-size:11px;font-weight:800;text-decoration:none;border-bottom:1px solid rgba(143,191,233,.25);padding-bottom:2px; }
.access-existing-link:hover { color:#fff;border-color:#fff; }
.access-membership-card { position:relative;overflow:hidden;border:1px solid rgba(74,156,255,.28);border-radius:22px;background:linear-gradient(180deg,rgba(10,18,29,.96),rgba(6,11,18,.98));box-shadow:0 28px 90px rgba(0,0,0,.32); }
.access-membership-card::after { content:"";position:absolute;right:-90px;bottom:-120px;width:280px;height:280px;border-radius:50%;background:rgba(92,224,170,.08);filter:blur(25px);pointer-events:none; }
.access-route { position:relative;z-index:1;padding:14px;display:grid;gap:8px; }
.access-route>div { display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:14px;border:1px solid rgba(121,153,190,.13);border-radius:14px;background:rgba(255,255,255,.018); }
.access-route>div.active { border-color:rgba(74,156,255,.3);background:linear-gradient(90deg,rgba(74,156,255,.1),rgba(92,224,170,.035)); }
.access-route>div>span { display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(74,156,255,.1);color:#8ec4ff;font-size:9px;font-weight:900; }
.access-route strong { display:block;font-size:12px; }
.access-route small { display:block;margin-top:4px;color:#758ba1;font-size:9px; }
.access-route>div>b { color:#79dca9;font-size:8px;letter-spacing:.08em; }

@media (max-width: 960px) {
  .access-hero { grid-template-columns:1fr;padding-top:48px;gap:26px; }
}

@media (max-width: 820px) {
  .sb-membership-grid { grid-template-columns:1fr; }
  .sb-funnel { grid-template-columns:1fr 1fr; }
  .sb-funnel>i { display:none; }
}

@media (max-width: 520px) {
  .nav { display:grid;width:100%;grid-template-columns:repeat(3,max-content);gap:4px;overflow:visible; }
  .nav a { display:none; }
  .nav a[href="index.html"], .nav a[href="signals.html"], .nav a[href="access.html"] { display:block;padding:7px 9px; }
  .sb-funnel { grid-template-columns:1fr; }
  .sb-tier-card { padding:20px; }
  .sb-tier-head { align-items:flex-start;flex-direction:column; }
  .sb-tier-head>strong { text-align:left; }
  .access-hero { padding-top:32px; }
  .access-route>div { grid-template-columns:31px 1fr; }
  .access-route>div>b { grid-column:2; }
}