/* =====================================================================
   apple.css — THE SITE DESIGN SYSTEM (Apple product-page style)

   Loaded on every page. Two halves:
     1. Shared shell: tokens, global nav, local nav, footer, buttons.
     2. Page skins: the homepage sections, and a re-skin of the legacy
        setup / framework page markup (.sheet, .stage, .panel, .filter…)
        so every existing page adopts the new look without its content
        or charts being rewritten.

   On setup and framework pages this file is linked AFTER the page's own
   inline <style>, so these rules win at equal specificity.
   ===================================================================== */

:root {
  --black:#000000; --charcoal:#1d1d1f; --raised:#2c2c2e; --smoke:#333336; --graphite:#424245;
  --ash:#86868b; --mute:#a1a1a6; --platinum:#cccccc; --silk:#f5f5f7; --white:#ffffff;
  --buy:#0071e3; --link:#2997ff; --link-light:#0066cc; --orange:#ff9f0a;
  --spectrum:linear-gradient(108deg,#0090f7,#ba62fc 33%,#f2416b 66%,#f55600);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,"Helvetica Neue",Arial,sans-serif;
  --mono-font:"SF Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* legacy page variables, remapped (setup + framework pages read these) */
  --bg:#000000; --panel:#1d1d1f; --panel2:#2c2c2e; --line:#2c2c2e;
  --ink:#f5f5f7; --dim:#a1a1a6; --faint:#86868b;
  --up:#30d158; --down:#ff453a; --gold:#ff9f0a; --blue:#2997ff;
  --sans:var(--font); --mono:var(--mono-font);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--black); color:var(--silk); font-family:var(--font);
  font-size:17px; line-height:1.47; letter-spacing:-0.022em; -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--link); outline-offset:3px; border-radius:10px; }
.tnum { font-variant-numeric:tabular-nums; }
.more { color:var(--link); }
.more:hover { text-decoration:underline; }
.light .more, .white .more { color:var(--link-light); }
.wrap { max-width:1260px; margin:0 auto; padding:0 40px; }

.pill { display:inline-flex; align-items:center; border-radius:9999px; padding:11px 22px; font-size:17px;
        transition:background-color .2s ease; white-space:nowrap; }
.pill-buy { background:var(--buy); color:var(--white); }
.pill-buy:hover { background:#0077ed; }

/* ---------- global nav ---------- */
.gnav { position:sticky; top:0; z-index:40; height:44px; background:rgba(0,0,0,0.8);
        backdrop-filter:saturate(1.8) blur(20px); -webkit-backdrop-filter:saturate(1.8) blur(20px); }
.gnav-inner { height:44px; max-width:1024px; margin:0 auto; padding:0 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.gnav a { font-size:12px; letter-spacing:-0.01em; color:rgba(204,204,204,0.8); padding:10px 4px; transition:color .2s ease; }
.gnav a:hover, .gnav a[aria-current] { color:var(--white); }
.gnav .glyph { display:flex; align-items:center; padding:10px 0; }
.gnav a.gnav-cta { background:var(--buy); color:var(--white); border-radius:9999px; padding:4px 12px; font-weight:500; white-space:nowrap; transition:background-color .2s ease; }
.gnav a.gnav-cta:hover, .gnav a.gnav-cta:focus-visible { background:#0077ed; color:var(--white); }
.gnav .gnav-ctas { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.gnav .glyph { flex-shrink:0; }
.gnav a.gnav-cta-alt { background:transparent; color:var(--white); box-shadow:inset 0 0 0 1px rgba(245,245,247,0.45); }
.gnav a.gnav-cta-alt:hover, .gnav a.gnav-cta-alt:focus-visible { background:rgba(245,245,247,0.14); color:var(--white); }
.gfoot .base a { color:inherit; }
.gfoot .base a:hover { color:var(--white); }
@media (max-width:420px) {
  .gnav-inner { padding:0 14px; gap:10px; }
  .gnav .hide-xxs { display:none; }
  .gnav a.gnav-cta { padding:4px 10px; }
  .gnav .gnav-ctas { gap:6px; }
}
@media (max-width:370px) {
  .gnav-inner { padding:0 10px; gap:6px; }
  .gnav a { padding:10px 2px; }
  .gnav .hide-xxxs { display:none; }
  .gnav a.gnav-cta { padding:4px 8px; }
}
.promo { background:var(--charcoal); text-align:center; font-size:14px; padding:16px 20px; color:var(--silk); letter-spacing:-0.016em; }
.promo a { color:var(--link); }
.promo a:hover { text-decoration:underline; }

/* ---------- local nav ---------- */
.lnav { position:sticky; top:44px; z-index:35; background:rgba(0,0,0,0.72); border-bottom:1px solid rgba(255,255,255,0.12);
        backdrop-filter:saturate(1.8) blur(20px); -webkit-backdrop-filter:saturate(1.8) blur(20px); }
.lnav .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; height:52px; }
.lnav .title { font-size:21px; font-weight:600; letter-spacing:0.011em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lnav .right { display:flex; align-items:center; gap:22px; font-size:12px; color:var(--platinum); flex-shrink:0; }
.lnav .right a:not(.pill):hover { color:var(--white); }
.lnav .pill { font-size:12px; padding:4px 11px; }

/* ---------- footer ---------- */
.gfoot { background:var(--charcoal); color:var(--ash); font-size:12px; line-height:1.33; letter-spacing:-0.01em; padding:28px 0 40px; margin-top:0; }
.gfoot .notes { border-bottom:1px solid var(--graphite); padding-bottom:18px; margin-bottom:22px; }
.gfoot .notes p { margin:0 0 10px; max-width:100ch; }
.gfoot .cols { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:28px; }
.gfoot h4 { margin:0 0 10px; color:var(--silk); font-size:12px; font-weight:600; letter-spacing:-0.01em; }
.gfoot .cols a { display:block; padding:3px 0; }
.gfoot .cols a:hover { color:var(--silk); text-decoration:underline; }
.gfoot .base { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--graphite); padding-top:16px; }

/* =====================================================================
   HOMEPAGE
   ===================================================================== */
.hero { padding:72px 0 0; overflow:hidden; }
.hero .eyebrow { font-size:21px; font-weight:600; color:var(--silk); margin:0 0 6px; letter-spacing:0.011em; }
.hero h1 { margin:0; font-size:clamp(48px,7.2vw,80px); font-weight:600; line-height:1.05; letter-spacing:-0.015em; color:var(--silk); max-width:13ch; }
.hero-row { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; }
.hero-row .side { max-width:38ch; font-size:21px; line-height:1.19; color:var(--ash); letter-spacing:0.011em; padding-bottom:10px; margin:0; }
.hero-row .side b { color:var(--silk); font-weight:600; }
.hero-row .side a { display:inline-block; margin-top:14px; font-size:17px; letter-spacing:-0.022em; }
.product { position:relative; margin:56px auto 0; max-width:1180px; }
.product svg { display:block; width:100%; height:auto; }

.glassbar { position:fixed; right:24px; bottom:24px; z-index:30; display:flex; align-items:center; gap:18px;
            background:rgba(66,66,69,0.72); backdrop-filter:blur(20px) saturate(1); -webkit-backdrop-filter:blur(20px) saturate(1);
            border-radius:980px; padding:8px 8px 8px 24px; color:rgba(255,255,255,0.85); font-size:14px; }
.glassbar b { color:var(--white); font-weight:600; }
.glassbar .pill { padding:9px 18px; font-size:14px; }

section.band { padding:104px 0; }
.light { background:var(--silk); color:#1d1d1f; }
.white { background:var(--white); color:#1d1d1f; }
.sec-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:44px; }
.sec-head h2 { margin:0; font-size:clamp(34px,4.4vw,56px); font-weight:600; line-height:1.07; letter-spacing:-0.005em; max-width:20ch; }
.lead { font-size:21px; line-height:1.38; color:var(--ash); max-width:44ch; margin:18px 0 0; letter-spacing:0.011em; }
.light .lead, .white .lead { color:#6e6e73; }
.lead b { color:var(--silk); font-weight:600; }
.light .lead b, .white .lead b { color:#1d1d1f; }

.anatomy { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.acard { background:var(--charcoal); border-radius:28px; padding:28px 28px 32px; min-height:300px; display:flex; flex-direction:column; }
.acard .k { font-size:14px; color:var(--ash); }
.acard .big { margin-top:auto; font-size:clamp(56px,6vw,80px); font-weight:600; letter-spacing:-0.015em; line-height:1; }
.acard .big.spec { background:var(--spectrum); -webkit-background-clip:text; background-clip:text; color:transparent; }
.acard h3 { margin:10px 0 8px; font-size:28px; font-weight:600; line-height:1.14; letter-spacing:0.007em; }
.acard p { margin:0; color:var(--ash); }
.acard p b { color:var(--silk); font-weight:600; }
.chip-badge { width:104px; aspect-ratio:1; border-radius:20%; background:var(--spectrum); display:grid; place-items:center; text-align:center;
              color:var(--white); font-weight:600; font-size:13px; line-height:1.1; letter-spacing:-0.01em; margin-bottom:auto; }
.chip-badge b { display:block; font-size:30px; letter-spacing:-0.02em; }

.session-grid { display:grid; grid-template-columns:0.95fr 1.05fr; gap:48px; align-items:start; }
.swatch-stage { background:var(--silk); border-radius:28px; padding:40px; min-height:440px; display:flex; flex-direction:column; }
.swatch-stage .name { font-size:40px; font-weight:600; line-height:1.1; margin:0 0 10px; }
.swatch-stage .desc { margin:0; color:#6e6e73; font-size:19px; line-height:1.3; }
.swatches { display:flex; gap:16px; margin-top:auto; padding-top:28px; }
.sw-btn { display:flex; flex-direction:column; align-items:center; gap:10px; background:none; border:0; cursor:pointer; font:inherit; font-size:12px; color:#6e6e73; padding:0; }
.sw-btn i { width:36px; height:36px; border-radius:50%; display:block; outline:2px solid transparent; outline-offset:3px; transition:outline-color .2s ease; }
.sw-btn[aria-pressed="true"] i { outline-color:var(--link-light); }
.sw-btn[aria-pressed="true"] { color:#1d1d1f; }
.sw-list { list-style:none; margin:0; padding:0; }
.sw-list li a { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:baseline; padding:18px 0; border-bottom:1px solid #d2d2d7; }
.sw-list li:first-child a { border-top:1px solid #d2d2d7; }
.sw-list .t { font-size:21px; font-weight:600; letter-spacing:0.011em; color:#1d1d1f; }
.sw-list .s { font-size:14px; color:#6e6e73; }
.sw-list li a:hover .t { color:var(--link-light); }

.daycard { background:var(--charcoal); border-radius:28px; padding:40px 40px 32px; }
.daycard .axis, .daycard .row { display:grid; grid-template-columns:200px 1fr; gap:24px; align-items:center; }
.daycard .track { position:relative; }
.daycard .axis .track { height:22px; }
.daycard .tick { position:absolute; top:0; transform:translateX(-50%); font-size:12px; color:var(--ash); white-space:nowrap; font-variant-numeric:tabular-nums; }
.daycard .tick:first-child { transform:none; }
.daycard .tick:last-child { transform:translateX(-100%); }
.daycard .rows { position:relative; }
.daycard .row { padding:9px 0; border-top:1px solid rgba(255,255,255,0.08); }
.daycard .row .name { font-size:14px; color:var(--silk); }
.daycard .row .name:hover { color:var(--link); }
.daycard .row .track { height:8px; background:var(--smoke); border-radius:9999px; }
.daycard .bar { position:absolute; top:0; height:100%; border-radius:9999px; }
.daycard .bar.long { background:var(--silk); }
.daycard .bar.short { background:#ff6961; }
.daycard .bar.both { background:var(--link); }
.daycard .glines { position:absolute; top:0; bottom:0; pointer-events:none; }
.daycard .glines i { position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,0.05); }
.daycard .now { position:absolute; top:0; bottom:0; width:2px; background:#f2416b; display:none; border-radius:2px; }
.day-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-top:22px; font-size:14px; color:var(--ash); }
.legend { display:flex; gap:20px; }
.legend span { display:inline-flex; align-items:center; gap:8px; }
.lg { width:22px; height:8px; border-radius:9999px; display:inline-block; }

.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.gcard { background:var(--charcoal); border-radius:28px; padding:28px; display:flex; flex-direction:column; min-height:320px; transition:background-color .25s ease; }
.gcard:hover { background:#232326; }
.gcard .top { display:flex; justify-content:space-between; gap:12px; font-size:12px; color:var(--ash); }
.gcard .new { color:var(--orange); font-weight:600; }
.gcard h3 { margin:22px 0 10px; font-size:28px; font-weight:600; line-height:1.14; letter-spacing:0.007em; color:var(--silk); }
.gcard p { margin:0; color:var(--ash); }
.gcard .foot { margin-top:auto; padding-top:24px; display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:14px; color:var(--ash); }
.gcard .foot .more { font-size:17px; }
@media (min-width:1001px) {
  .gcard.w3 { grid-column:span 2; }
  .gcard.w3 h3 { font-size:40px; line-height:1.1; letter-spacing:0; }
  .gcard.w3 p { font-size:19px; max-width:52ch; }
}

.fund { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.fcard { background:var(--white); border-radius:28px; padding:28px; min-height:300px; display:flex; flex-direction:column; color:#1d1d1f; }
.fcard .k { font-size:14px; color:#6e6e73; }
.fcard h3 { margin:12px 0 10px; font-size:24px; font-weight:600; line-height:1.17; letter-spacing:0.009em; }
.fcard p { margin:0; color:#6e6e73; }
.fcard .more { margin-top:auto; padding-top:20px; }

.tape { background:var(--charcoal); border-radius:28px; padding:40px; }
.tape-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:24px; }
.tape h2 { margin:0 0 10px; font-size:40px; font-weight:600; line-height:1.1; }
.tape p { margin:0; color:var(--ash); max-width:52ch; }
.tape .tradingview-widget-container { border-radius:18px; overflow:hidden; }
.tape .tradingview-widget-copyright { font-size:12px; color:var(--ash); padding:10px 4px 0; }
.tape .tradingview-widget-copyright a { color:var(--link); }

/* 404 */
.nf { min-height:60vh; display:flex; flex-direction:column; justify-content:center; padding:96px 0; }
.nf h1 { margin:0 0 16px; font-size:clamp(44px,6vw,72px); font-weight:600; line-height:1.05; letter-spacing:-0.015em; }
.nf p { margin:0 0 28px; font-size:21px; color:var(--ash); max-width:44ch; letter-spacing:0.011em; }

/* =====================================================================
   SETUP + FRAMEWORK PAGES — re-skin of the legacy markup
   ===================================================================== */
.sheet { max-width:1260px; padding:48px 40px 96px; }
.has-lnav .sheet > .back { display:none; }
.back { color:var(--link); font-size:14px; border:0; }
.back:hover { color:var(--link); text-decoration:underline; }

.sheet .top { border-bottom:1px solid var(--raised); padding-bottom:36px; gap:40px; }
h1 { font-weight:600; letter-spacing:-0.015em; line-height:1.05; }
.kicker { color:var(--ash); font-size:17px; letter-spacing:-0.022em; margin-bottom:12px; }
.thesis { font-size:21px; line-height:1.38; color:var(--mute); letter-spacing:0.011em; }
.counts { gap:32px; margin-top:24px; }
.counts div { border-left:1px solid var(--graphite); padding-left:14px; }
.counts b { font-weight:600; font-size:32px; letter-spacing:-0.015em; }
.counts small { color:var(--ash); font-size:14px; }

.ribbon { background:var(--raised); border:0; border-radius:20px; gap:1px; margin:36px 0 44px; }
.ribbon div { background:var(--charcoal); padding:16px 18px; }
.ribbon div div { padding:0; background:transparent; }
.ribbon .t { color:var(--ash); font-family:var(--mono-font); font-size:12px; letter-spacing:0; }
.ribbon .n { font-weight:600; font-size:15px; letter-spacing:-0.01em; }

.stage { border-top:1px solid var(--raised); }
.stage .num { background:var(--silk); color:var(--black); border-radius:9999px; font-family:var(--font); font-weight:600; }
.stage h3 { font-weight:600; font-size:21px; letter-spacing:0.011em; }
.stage li { color:var(--silk); }
.why { color:var(--ash); border-left:2px solid var(--graphite); }

.panel { background:var(--charcoal); border:0; border-radius:28px; padding:24px; }
.panel h4 { font-size:21px; font-weight:600; letter-spacing:0.011em; }
.panel p.lead { color:var(--ash); font-size:15px; margin:4px 0 16px; max-width:none; letter-spacing:-0.01em; }
.timing div { background:var(--raised); border:0; border-radius:18px; }
.timing div.primary { background:rgba(48,209,88,0.12); }
.timing div.primary b { color:var(--up); }
.placement div { background:var(--raised); border:0; border-radius:18px; }
.placement .yes { background:rgba(48,209,88,0.12); }
.placement .no  { background:rgba(255,69,58,0.12); }

.section-head { border-top:1px solid var(--raised); margin-top:72px; padding-top:40px; margin-bottom:24px; }
.section-head h2 { font-weight:600; font-size:clamp(30px,3.4vw,40px); letter-spacing:0; line-height:1.1; }
.section-head p { color:var(--ash); font-size:19px; line-height:1.4; letter-spacing:0.012em; margin-top:8px; }

.filter { background:var(--charcoal); border:0; border-radius:28px; padding:24px; }
.filter h3 { font-weight:600; font-size:19px; letter-spacing:0.012em; }
.filter p { color:var(--mute); }
.filter .kill { color:#ff6961; font-weight:600; }

.calc .row { border-bottom:1px solid var(--raised); }
.calc .row.tot { border-top:2px solid var(--up); }
.warn { background:var(--charcoal); border:1px solid rgba(255,69,58,0.4); border-radius:28px; padding:24px; }
.warn h4 { color:#ff6961; font-weight:600; }
.warn .big { color:#ff6961; }

table { font-size:15px; }
th, td { border-bottom:1px solid var(--raised); }
thead th { color:var(--ash); border-bottom:1px solid var(--graphite); font-weight:400; }
tbody th { color:var(--mute); font-weight:600; }
th .tick, td .tick { font-weight:600; }
th .tick small, td .tick small { color:var(--ash); }
.pos { color:var(--up); } .neg { color:#ff6961; }

.rule { background:var(--charcoal); border:0; border-radius:28px; padding:36px 40px; margin-top:72px; }
.rule h2 { font-weight:600; font-size:clamp(28px,3vw,40px); letter-spacing:0; line-height:1.1; }
.rule p, .rule ul { color:var(--mute); }
.src { color:var(--ash); font-size:12px; line-height:1.5; margin-top:28px; }
.src a { color:var(--link) !important; }

/* indicator cards on setup pages */
.ind-card { background:var(--charcoal); border:0; border-radius:28px; padding:24px; }
.ind-name { font-weight:600; }
.ind-alerts { color:var(--orange); border-color:rgba(255,159,10,0.4); background:rgba(255,159,10,0.1); border-radius:9999px; }
.ind-link, .ind-link--quiet { color:var(--link); }
.ind-link:hover, .ind-link--quiet:hover { border-bottom-color:var(--link); }

/* hand-built SVG charts: remap the old navy palette to Apple neutrals.
   (CSS beats SVG presentation attributes, so the chart files stay untouched.) */
svg [fill="#0c1626" i] { fill:#1d1d1f; }
svg [fill="#101d2f" i], svg [fill="#0d1a2b" i] { fill:#2c2c2e; }
svg [stroke="#1b2a3e" i] { stroke:#3a3a3c; }
svg [fill="#54697f" i] { fill:#636366; }   svg [stroke="#54697f" i] { stroke:#636366; }
svg [fill="#3a526e" i] { fill:#48484a; }   svg [stroke="#3a5068" i], svg [stroke="#5b7793" i] { stroke:#48484a; }
svg [fill="#7d93ad" i], svg [fill="#7a93b0" i], svg [fill="#6d84a0" i] { fill:#8e8e93; }
svg [stroke="#7d93ad" i], svg [stroke="#7a93b0" i] { stroke:#8e8e93; }
svg [fill="#9fb3c8" i] { fill:#aeaeb2; }
svg [fill="#8fa6bd" i] { fill:#98989d; }   svg [stroke="#8fa6bd" i] { stroke:#98989d; }
svg [fill="#c8d8e8" i] { fill:#d1d1d6; }   svg [stroke="#c8d8e8" i] { stroke:#d1d1d6; }
svg [fill="#f4f7fb" i] { fill:#f5f5f7; }   svg [stroke="#f4f7fb" i] { stroke:#f5f5f7; }
svg [fill="#2ecf7a" i] { fill:#30d158; }   svg [stroke="#2ecf7a" i] { stroke:#30d158; }
svg [fill="#1d6f47" i] { fill:#1f7a3d; }   svg [stroke="#1d6f47" i] { stroke:#1f7a3d; }
svg [stroke="#22855a" i] { stroke:#30d158; }
svg [fill="#e0505a" i] { fill:#ff453a; }   svg [stroke="#e0505a" i] { stroke:#ff453a; }
svg [fill="#7d343c" i] { fill:#8a2f2a; }   svg [stroke="#7d343c" i] { stroke:#8a2f2a; }
svg [fill="#5aa9ff" i] { fill:#2997ff; }   svg [stroke="#5aa9ff" i] { stroke:#2997ff; }
svg [fill="#f4b942" i] { fill:#ff9f0a; }   svg [stroke="#f4b942" i] { stroke:#ff9f0a; }

/* =====================================================================
   HUB PAGES — /setups/ and /fundamentals/, plus the homepage links to them
   ===================================================================== */
.sec-foot { display:flex; justify-content:center; margin-top:44px; }
.hub-hero { padding:88px 0 40px; }
.hub-hero .eyebrow { font-size:21px; font-weight:600; color:var(--ash); margin:0 0 8px; letter-spacing:0.011em; }
.hub-hero h1 { margin:0; font-size:clamp(44px,7vw,80px); font-weight:600; line-height:1.05; letter-spacing:-0.015em; max-width:14ch; }
.hub-hero .lead { max-width:52ch; }
.hub-stats { display:flex; flex-wrap:wrap; gap:14px 40px; margin-top:34px; }
.hub-stats div { border-left:2px solid var(--graphite); padding-left:14px; }
.hub-stats b { display:block; font-size:34px; font-weight:600; letter-spacing:-0.01em; line-height:1.1; }
.hub-stats small { color:var(--ash); font-size:14px; }
.hub-bar { display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; padding:18px 0 20px; border-top:1px solid var(--graphite); border-bottom:1px solid var(--graphite); margin-bottom:22px; }
.light .hub-bar { border-color:#d2d2d7; }
.hub-search { flex:1 1 260px; max-width:360px; }
.hub-search input { width:100%; font:inherit; font-size:16px; color:inherit; background:var(--charcoal); border:1px solid var(--graphite); border-radius:12px; padding:10px 14px; }
.hub-search input::placeholder { color:var(--ash); }
.hub-search input:focus { outline:2px solid var(--link); outline-offset:1px; border-color:transparent; }
.light .hub-search input { background:var(--white); border-color:#d2d2d7; }
.light .hub-search input::placeholder { color:#86868b; }
.hub-chips { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.hub-k { font-size:12px; color:var(--ash); margin-right:4px; }
.light .hub-k { color:#6e6e73; }
.chip { font:inherit; font-size:14px; letter-spacing:-0.01em; color:var(--silk); background:var(--charcoal); border:1px solid var(--graphite); border-radius:9999px; padding:6px 14px; cursor:pointer; transition:background-color .2s ease, border-color .2s ease; }
.chip:hover { border-color:var(--ash); }
.chip[aria-pressed="true"] { background:var(--silk); color:#1d1d1f; border-color:var(--silk); }
.light .chip { background:var(--white); color:#1d1d1f; border-color:#d2d2d7; }
.light .chip[aria-pressed="true"] { background:#1d1d1f; color:var(--white); border-color:#1d1d1f; }
.gcard .foot .more { white-space:nowrap; }
.hub-count { font-size:14px; color:var(--ash); margin:0 0 18px; }
.light .hub-count { color:#6e6e73; }
.hub-empty { text-align:center; color:var(--ash); padding:56px 0; }
.hub-empty button { font:inherit; color:var(--link); background:none; border:0; cursor:pointer; padding:0; }
.light .hub-empty button { color:var(--link-light); }
.hub-other { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; background:var(--charcoal); border-radius:28px; padding:32px; }
.hub-other h2 { margin:0 0 6px; font-size:28px; font-weight:600; }
.hub-other p { margin:0; color:var(--ash); }
.lnav .right a[aria-current] { color:var(--white); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:680px) {
  .hub-hero { padding:56px 0 28px; }
  .hub-stats b { font-size:28px; }
  .hub-bar { gap:12px; }
  .hub-search { max-width:none; flex-basis:100%; }
  .hub-chips { width:100%; }
  .hub-k { width:100%; margin:0; }
  .hub-stats { display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; }
  .gcard .grp { display:none; }
  .hub-other { padding:26px 22px; border-radius:22px; }
  .sec-foot { margin-top:32px; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1000px) {
  .anatomy, .gallery { grid-template-columns:1fr 1fr; }
  .gcard.w2 { grid-column:span 2; }
  .fund { grid-template-columns:1fr 1fr; }
  .session-grid { grid-template-columns:1fr; }
  .gnav .hide-sm { display:none; }
  .gfoot .cols { grid-template-columns:1fr 1fr; }
}
@media (max-width:1100px) {
  .sheet { padding:32px 24px 72px; }
}
@media (max-width:680px) {
  .wrap { padding:0 16px; }
  .sheet { padding:24px 16px 64px; }
  .anatomy, .gallery, .fund { grid-template-columns:1fr; }
  .gcard.w2 { grid-column:auto; }
  .daycard, .tape, .swatch-stage { padding:26px 18px; }
  .daycard .axis, .daycard .row { grid-template-columns:96px 1fr; gap:12px; }
  .daycard .row .name { font-size:12px; }
  .daycard .tick:nth-child(even) { display:none; }
  .lnav .right a:not(.pill), .lnav .right span { display:none; }
  .lnav .title { font-size:17px; }
  .gnav .hide-xs { display:none; }
  .glassbar { left:16px; right:16px; bottom:16px; justify-content:space-between; }
  section.band { padding:72px 0; }
  .ribbon { border-radius:16px; }
  .panel, .filter, .rule, .warn, .ind-card { border-radius:22px; }
  .rule { padding:26px 22px; }
  .sheet table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; scroll-behavior:auto !important; }
}
@media print {
  .gnav, .lnav, .gfoot, .glassbar, .promo { display:none !important; }
}

/* =====================================================================
   LIVE CHART (setup pages)
   ===================================================================== */
.live { background:var(--charcoal); border-radius:28px; padding:20px; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; }
.live-main { position:relative; min-width:0; }
.live-chart { position:relative; height:480px; border-radius:18px; overflow:hidden; }
.live-profile { position:absolute; left:0; top:0; pointer-events:none; z-index:3; }
.live-gate { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px;
             text-align:center; padding:32px; background:#1d1d1f; border-radius:18px; color:var(--ash); font-size:15px; }
.live-gate[hidden] { display:none; }
.live.gated { grid-template-columns:1fr; }
.live.gated .live-side { display:none; }
.live-gate b { display:block; color:var(--silk); font-size:21px; font-weight:600; margin-bottom:4px; }
.live-gate code { font-family:var(--mono-font); font-size:13px; color:var(--silk); }
.live-gate span { max-width:46ch; line-height:1.5; }
.live-gate span code { background:var(--raised); border-radius:6px; padding:1px 6px; }
.live-status { margin:12px 4px 0; font-size:12px; color:var(--ash); }
.live-side { background:var(--raised); border-radius:18px; padding:20px; font-size:14px; align-self:start; }
.live-side .k { margin:18px 0 6px; font-size:12px; color:var(--ash); }
.live-side .k:first-child { margin-top:0; }
.live-side .v { margin:0; font-size:19px; font-weight:600; color:var(--silk); letter-spacing:0.012em; }
.live-side .play { margin:4px 0 0; color:var(--link); }
.live-side .lv { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0 0; }
.live-side .lv div { background:var(--charcoal); border-radius:12px; padding:10px 12px; }
.live-side .lv dt { font-size:11px; color:var(--ash); }
.live-side .lv dd { margin:2px 0 0; font-weight:600; color:var(--silk); font-variant-numeric:tabular-nums; }
.live-side .lv dd.pc { color:#ff6961; }
.live-side ul { list-style:none; margin:0; padding:0; }
.live-side .armed li { padding:6px 0; color:var(--silk); border-top:1px solid rgba(255,255,255,0.08); }
.live-side .trades li { display:flex; justify-content:space-between; gap:8px; padding:6px 0; border-top:1px solid rgba(255,255,255,0.08); color:var(--silk); }
.live-side .trades .pos { color:var(--up); font-weight:600; } .live-side .trades .neg { color:#ff6961; font-weight:600; }
.live-side .trades .open { color:var(--orange); }
.live-side .quiet { margin:0; color:var(--ash); }
.live-trade { margin-top:16px; border-radius:12px; padding:12px 14px; background:rgba(48,209,88,0.12); }
.live-trade.short { background:rgba(255,69,58,0.12); }
.live-trade b { display:block; color:var(--silk); font-weight:600; }
.live-trade span { font-size:13px; color:var(--mute); font-variant-numeric:tabular-nums; }
@media (max-width:1000px) { .live { grid-template-columns:1fr; } }
@media (max-width:680px) { .live { padding:12px; border-radius:22px; } .live-chart { height:360px; } }
.live-side .crt-list li { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; padding:8px 0; border-top:1px solid rgba(255,255,255,0.08); }
.crt-tag { font-size:11px; font-weight:600; padding:2px 8px; border-radius:9999px; white-space:nowrap; }
.crt-tag.l { background:rgba(48,209,88,0.15); color:var(--up); }
.crt-tag.s { background:rgba(255,69,58,0.15); color:#ff6961; }
.crt-txt { color:var(--mute); font-size:13px; line-height:1.4; }
.crt-txt b { color:var(--silk); font-weight:600; font-variant-numeric:tabular-nums; margin-right:4px; }

/* indicator cards (shared by setup pages) */
.ind-heading { margin:0 0 5px; }
.ind-note { color:var(--ash); }
.ind-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.ind-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.ind-name { margin:0; font-size:19px; }
.ind-alerts { font-family:var(--mono-font); font-size:11px; border:1px solid; padding:2px 8px; text-transform:uppercase; letter-spacing:0.04em; }
.ind-blurb { margin:0 0 12px; font-size:15px; color:var(--mute); }
.ind-links { display:flex; flex-wrap:wrap; gap:12px; }
.ind-link { font-size:15px; font-weight:400; text-decoration:none; }

/* live chart: symbol box + PMH checklist */
.live-symbol { display:flex; gap:8px; align-items:center; margin:0 0 12px; }
.live-symbol label { font-size:12px; color:var(--ash); }
.live-symbol input { width:110px; background:var(--black); color:var(--silk); border:1px solid var(--ash); border-radius:9999px; padding:7px 14px;
                     font:inherit; font-size:14px; text-transform:uppercase; }
.live-symbol input:focus { outline:2px solid var(--link); outline-offset:1px; }
.live-symbol button { border:0; cursor:pointer; font:inherit; font-size:14px; }
.live-side .lv dd.up { color:var(--up); } .live-side .lv dd.dn { color:#ff6961; }
.live-side .lv dd.pdh { color:var(--orange); } .live-side .lv dd.pdl { color:#64d2ff; }
.pmh-check li { display:flex; gap:8px; align-items:center; padding:6px 0; border-top:1px solid rgba(255,255,255,0.08); color:var(--mute); }
.pmh-check li::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--graphite); flex-shrink:0; }
.pmh-check li.ok { color:var(--silk); }
.pmh-check li.ok::before { background:var(--up); }

/* =====================================================================
   ANIMATED WALKTHROUGH (setup pages)
   ===================================================================== */
.anim { background:var(--charcoal); border-radius:28px; padding:24px 24px 20px; margin:0 0 48px; }
.anim-head { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; margin-bottom:12px; }
.anim-head > div:first-child { flex:1 1 420px; min-height:118px; }
.anim-n { margin:0 0 4px; font-size:12px; color:var(--ash); font-variant-numeric:tabular-nums; }
.anim-title { margin:0 0 6px; font-size:28px; font-weight:600; letter-spacing:0.007em; line-height:1.14; }
.anim-text { margin:0; color:var(--mute); font-size:17px; max-width:72ch; }
.anim-ctrl { display:flex; gap:10px; }
.anim-ctrl .pill { font-size:14px; padding:8px 18px; border:0; cursor:pointer; font-family:inherit; }
.anim-replay { background:var(--raised); color:var(--silk); }
.anim-replay:hover { background:var(--graphite); }
.anim-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:18px; }
.anim svg { display:block; width:100%; min-width:760px; height:auto; border-radius:18px; }
.anim-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.anim-chips button { font:inherit; font-size:13px; cursor:pointer; color:var(--mute); background:transparent; border:1px solid var(--graphite);
                     border-radius:9999px; padding:6px 14px; transition:background-color .2s ease, color .2s ease; }
.anim-chips button:hover { color:var(--silk); }
.anim-chips button[aria-current="step"] { background:var(--silk); color:var(--black); border-color:var(--silk); }
@media (max-width:680px) {
  .anim { padding:20px 14px 18px; border-radius:22px; margin:28px 0 48px; }
  .anim-head { gap:16px; margin-bottom:16px; }
  .anim-title { font-size:22px; }
  .anim-text { font-size:15px; }
  .anim-head > div:first-child { min-height:0; flex-basis:100%; }
  .anim-ctrl .pill { padding:8px 16px; }
  .anim-scroll { border-radius:14px; }
  .anim svg { border-radius:14px; }
  .anim-chips { margin-top:16px; gap:8px; }
  .anim-chips button { font-size:12px; padding:6px 12px; }
  .ribbon + .anim { margin-top:8px; }
}

/* ---------- segmented buttons (live-chart timeframe and view pickers) ---------- */
.bt-seg { display:inline-flex; background:var(--black); border-radius:9999px; padding:3px; }
.bt-seg button { font:inherit; font-size:13px; color:var(--mute); background:transparent; border:0; border-radius:9999px; padding:6px 14px; cursor:pointer; }
.bt-seg button[aria-pressed="true"] { background:var(--raised); color:var(--silk); }
.bt-seg button:focus-visible { outline:2px solid var(--link); outline-offset:2px; }

/* ---------- live-chart controls (js/live-kit.js) ---------- */
.live-symbol { flex-wrap:wrap; }
.live-symbol .live-pick { appearance:none; -webkit-appearance:none; background:var(--black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a1a1a6' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;
  color:var(--silk); border:1px solid var(--ash); border-radius:9999px; padding:7px 30px 7px 14px; font:inherit; font-size:14px; cursor:pointer; }
.live-symbol .live-pick:focus-visible { outline:2px solid var(--link); outline-offset:1px; }
.live-symbol input { width:120px; }
.live-symbol .live-tf { margin-left:auto; }
.live-tf button { padding:6px 12px; font-variant-numeric:tabular-nums; }
.live-tf button:focus-visible { outline:2px solid var(--link); outline-offset:2px; }
.live-brand { position:absolute; left:12px; top:10px; z-index:4; display:flex; align-items:center; gap:8px; pointer-events:none;
  background:rgba(29,29,31,0.78); border-radius:9999px; padding:4px 12px 4px 4px; max-width:calc(100% - 90px); }
.live-brand .logo, .live-brand .mono { width:26px; height:26px; border-radius:50%; flex:none; object-fit:contain; background:#fff; }
.live-brand .mono { display:flex; align-items:center; justify-content:center; background:var(--raised); color:var(--silk); font-size:11px; font-weight:600; }
.live-brand b { color:var(--silk); font-size:14px; font-weight:600; }
.live-brand small { color:var(--ash); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:680px) {
  .live-symbol { gap:8px 6px; }
  .live-symbol label { display:none; }
  .live-symbol input { width:96px; }
  .live-symbol .live-tf { margin-left:0; }
  .live-tf button { padding:6px 10px; }
}
.live-symbol input::placeholder { text-transform:none; color:var(--ash); }

/* ---------- cup and handle live chart: the page's checks ---------- */
.live-side .cup-checks { list-style:none; margin:14px 0 0; padding:0; font-size:13px; }
.live-side .cup-checks li { display:grid; grid-template-columns:20px 1fr; gap:6px; padding:6px 0; border-top:1px solid rgba(255,255,255,0.08); color:var(--silk); }
.live-side .cup-checks li span { font-weight:700; }
.live-side .cup-checks li.ok span { color:var(--up); }
.live-side .cup-checks li.no { color:var(--mute); }
.live-side .cup-checks li.no span { color:#ff6961; }

/* ---------- GEX levels live chart ---------- */
.gex-paste { margin-top:14px; background:var(--black); border-radius:18px; padding:14px 16px; }
.gex-paste-head { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:13px; color:var(--ash); }
.gex-paste-head label { display:flex; align-items:center; gap:8px; }
.gex-paste select, .gex-paste input[type=text] { appearance:none; -webkit-appearance:none; background:var(--raised); color:var(--silk); border:0; border-radius:9999px; padding:6px 14px; font:inherit; font-size:13px; }
.gex-paste select { padding-right:28px; background:var(--raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a1a1a6' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center; cursor:pointer; }
.gex-paste input[type=text] { width:90px; font-variant-numeric:tabular-nums; }
.gex-text { display:block; width:100%; min-height:86px; resize:vertical; background:var(--charcoal); color:var(--silk); border:1px solid var(--graphite); border-radius:12px; padding:10px 12px;
  font-family:var(--mono-font, ui-monospace, SFMono-Regular, Menlo, monospace); font-size:12.5px; line-height:1.5; }
.gex-text:focus, .gex-paste select:focus-visible, .gex-paste input:focus-visible { outline:2px solid var(--link); outline-offset:1px; }
.gex-actions { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-top:10px; font-size:13px; color:var(--ash); }
.gex-actions .pill { border:0; cursor:pointer; font:inherit; font-size:13px; padding:7px 16px; }
.gex-actions .gex-apply { background:var(--raised); color:var(--silk); }
.gex-actions label { display:flex; align-items:center; gap:8px; }
.gex-saved { color:var(--ash); }
.live-side .gex-rows { list-style:none; margin:12px 0 0; padding:0; }
.live-side .gex-rows li { display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-top:1px solid rgba(255,255,255,0.08); font-size:13px; color:var(--silk); }
.live-side .gex-rows li > span:first-child { font-weight:600; white-space:nowrap; }
.live-side .gex-rows li > span:last-child { text-align:right; font-variant-numeric:tabular-nums; }
.live-side .gex-rows small { display:block; color:var(--ash); font-size:11.5px; }

/* ---------- disclaimer popup (site.js) ---------- */
.disclaim { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px;
            background:rgba(0,0,0,0.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.disclaim-box { width:100%; max-width:520px; max-height:calc(100vh - 40px); overflow:auto; background:var(--charcoal);
                border:1px solid var(--graphite); border-radius:24px; padding:30px 30px 22px; color:var(--silk);
                box-shadow:0 30px 80px rgba(0,0,0,0.6); }
.disclaim-kicker { margin:0 0 6px; font-size:13px; color:var(--orange); font-weight:600; letter-spacing:0.01em; }
.disclaim-box h2 { margin:0 0 14px; font-size:28px; line-height:1.1; letter-spacing:-0.02em; font-weight:700; }
.disclaim-box #disclaim-body p { margin:0 0 12px; font-size:15px; line-height:1.5; color:var(--mute); }
.disclaim-ok { margin-top:8px; border:0; cursor:pointer; font:inherit; font-size:16px; padding:11px 26px; }
.disclaim-ok:focus-visible { outline:2px solid var(--link); outline-offset:3px; }
.disclaim-note { margin:12px 0 0; font-size:12px; color:var(--ash); }
html.disclaim-open, html.disclaim-open body { overflow:hidden; }
@media (max-width:480px) { .disclaim-box { padding:24px 20px 18px; border-radius:20px; } .disclaim-box h2 { font-size:24px; } }
@media print { .disclaim { display:none !important; } }

/* =====================================================================
   Bold style — setup and fundamentals pages (.sheet): poster headline,
   big green step numbers on alternating bands, heavier filter cards
   ===================================================================== */
.sheet .top { grid-template-columns:1fr; gap:22px; }
.sheet .top h1 { font-size:clamp(56px,8.6vw,120px); line-height:0.9; letter-spacing:-0.05em; font-weight:900; }
.sheet .top .thesis { max-width:62ch; }
.sheet .top h1 span { display:block; }
.sheet .thesis { font-size:20px; }
.sheet .counts b { font-size:46px; font-weight:900; letter-spacing:-0.04em; }
.sheet .counts div { border-left-width:4px; }
.sheet .stage { grid-template-columns:1fr; gap:6px; padding:26px 24px; border-top:0; border-radius:22px; }
.sheet .stage:first-child { padding-top:26px; }
.sheet .stage:nth-child(odd) { background:var(--charcoal); }
.sheet .stage .num { background:none; color:var(--up); width:auto; height:auto; justify-content:flex-start; border-radius:0;
                     font-size:52px; font-weight:900; line-height:1; letter-spacing:-0.04em; }
.sheet .stage h3 { font-size:28px; font-weight:800; letter-spacing:-0.02em; line-height:1.1; margin:4px 0 10px; }
.sheet .stage li { font-size:16.5px; }
.sheet .why { border-left:0; padding-left:0; font-size:15px; color:var(--silk); font-weight:500; }
.sheet .section-head h2 { font-size:clamp(32px,3.6vw,44px); font-weight:800; letter-spacing:-0.03em; }
.sheet .filter { border-top:8px solid var(--down); padding:22px 22px 24px; border-radius:22px; }
.sheet .filter h3 { font-size:24px; font-weight:800; letter-spacing:-0.02em; line-height:1.15; }
.sheet .filter p { font-size:16px; }
@media (max-width:680px) {
  .sheet .top { grid-template-columns:minmax(0,1fr); }
  .sheet .top h1 { font-size:clamp(40px,12vw,96px); overflow-wrap:break-word; }
  .sheet .counts { flex-wrap:wrap; gap:18px 24px; }
  .sheet .counts b { font-size:38px; }
  .sheet .stage { border-radius:0; margin:0 -16px; padding:26px 16px; }
  .sheet .filters { grid-template-columns:1fr; }
}

/* ---------------- homepage: why this site exists ---------------- */
.lessons { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.lesson { background:var(--charcoal); border-radius:28px; padding:32px; display:flex; flex-direction:column; }
.lesson .k { margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ash); }
.lesson h3 { margin:0 0 12px; font-size:clamp(28px,3vw,36px); font-weight:700; letter-spacing:-0.02em; line-height:1.08; color:var(--silk); }
.lesson.si h3 { background:var(--spectrum); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lesson > p { margin:0; font-size:17px; line-height:1.5; color:var(--ash); max-width:52ch; }
.lesson > p b { color:var(--silk); font-weight:600; }
.lesson ul { list-style:none; margin:22px 0 0; padding:18px 0 0; border-top:1px solid var(--raised); display:grid; gap:10px; }
.lesson li { position:relative; padding-left:20px; font-size:15px; line-height:1.4; color:var(--platinum); }
.lesson li::before { content:""; position:absolute; left:0; top:.5em; width:8px; height:8px; border-radius:50%; background:var(--up); }
.lesson.si li::before { background:var(--link); }

.path-title { margin:56px 0 18px; font-size:clamp(24px,2.4vw,30px); font-weight:700; letter-spacing:-0.02em; color:var(--silk); }
.path { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; counter-reset:path; }
.path li { counter-increment:path; position:relative; background:var(--charcoal); border-radius:22px; padding:22px 20px 24px; }
.path .step { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--link); }
.path .step::before { content:counter(path); display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%;
                      background:rgba(41,151,255,.16); color:var(--link); font-size:12px; letter-spacing:0; }
.path li:last-child .step { color:var(--up); }
.path li:last-child .step::before { background:rgba(48,209,88,.16); color:var(--up); }
.path h4 { margin:14px 0 6px; font-size:19px; font-weight:700; letter-spacing:-0.01em; color:var(--silk); }
.path p { margin:0; font-size:14.5px; line-height:1.45; color:var(--ash); }
@media (max-width:1000px) {
  .path { grid-template-columns:1fr; gap:10px; }
  .path li { display:grid; grid-template-columns:120px 1fr; column-gap:16px; align-items:baseline; padding:18px 20px; }
  .path .step { grid-row:span 2; }
  .path h4 { margin:0 0 4px; }
}
@media (max-width:760px) {
  .lessons { grid-template-columns:1fr; }
  .lesson { padding:24px 20px; border-radius:22px; }
  .path li { grid-template-columns:1fr; }
  .path .step { grid-row:auto; margin-bottom:10px; }
}