/* The Studio Owner OS — Reboot Bright, surface-led */
:root{
--ink:#14142B;--body:#5C5D77;--muted:#8E8FA8;--faint:#B4B3C8;
--bg:#FCFBFF;--paper:#FFFFFF;--line:#EBE9F7;--line2:#F3F2FB;--fill:#F6F5FD;
--indigo:#4A4DEC;--indigo-ink:#3336C9;--indigo-soft:#EDEDFE;
--rose:#E86A94;--rose-soft:#FFF0F5;--mint:#22A981;--mint-soft:#E9F8F2;--butter:#E8A317;--butter-soft:#FFF5E1;
--plum:#9042CE;--plum-soft:#F6EDFD;--flame:#E0552C;--flame-soft:#FFF0EA;
--shadow:0 40px 90px -40px rgba(38,36,120,.40);--shadow-sm:0 18px 44px -24px rgba(38,36,120,.30);
--r:26px;--top:0px;--accent:var(--indigo);--accent-soft:var(--indigo-soft);
}
*{box-sizing:border-box;-webkit-font-smoothing:antialiased}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--body);font:400 18px/1.68 'DM Sans',-apple-system,sans-serif;padding-top:calc(var(--top) + 61px);transition:padding-top .26s ease;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;color:var(--ink);letter-spacing:-.035em;margin:0;font-weight:600;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--indigo);text-decoration:none}
a:hover{color:var(--indigo-ink)}
img{max-width:100%;display:block}
::selection{background:#DDDCFC}
.wrap{width:min(1180px,calc(100% - 48px));margin:0 auto}
.narrow{max-width:62ch}

/* top chrome */
.tbar{position:fixed;left:0;right:0;top:var(--top);z-index:50;background:rgba(252,251,255,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);transition:top .26s ease}
.tbar-in{display:flex;align-items:center;gap:26px;height:60px;width:min(1320px,calc(100% - 40px));margin:0 auto}
.tbar img{height:23px;width:auto}
.tnav{display:flex;gap:2px}
.tnav a{display:flex;align-items:center;padding:9px 13px;border-radius:10px;font:500 14.5px/1 'DM Sans',sans-serif;color:var(--body);white-space:nowrap}
.tnav a:hover{color:var(--ink);background:var(--fill)}
.tnav a.on{color:#fff;background:var(--ink)}
.tnav .lk{width:11px;height:11px;margin-left:7px;stroke:currentColor;stroke-width:1.8;fill:none;opacity:.55}
.tbar .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.prog{position:fixed;left:0;right:0;top:calc(var(--top) + 60px);height:2px;background:#E7E5F8;z-index:52;transition:top .26s ease}
.prog i{display:block;height:100%;width:0;background:var(--accent)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;border-radius:999px;padding:15px 26px;font:500 16px/1 'DM Sans',sans-serif;cursor:pointer;white-space:nowrap;transition:transform .16s ease,background .18s ease,border-color .18s ease,color .18s ease}
.btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.btn-primary{background:var(--indigo);color:#fff;box-shadow:0 16px 34px -14px rgba(74,77,236,.6)}
.btn-primary:hover{background:var(--indigo-ink);color:#fff;transform:translateY(-1px)}
.btn-primary:disabled{opacity:.75;cursor:default;transform:none}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{color:var(--indigo-ink);transform:translateY(-1px)}
.btn-quiet{background:var(--paper);color:var(--ink);border-color:var(--line)}
.btn-quiet:hover{color:var(--indigo-ink);border-color:#D5D3F3}
.btn-sm{padding:10px 17px;font-size:14.5px}

/* hero panel */
.hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:96px 0 104px}
.hero.tint{background:var(--accent-deep,var(--accent))}
.hero::after{content:"";position:absolute;right:-160px;top:-200px;width:760px;height:760px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.16),transparent 70%);pointer-events:none}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:60px;align-items:end}
.hero .fig{font:600 15px/1 'Space Mono',monospace;color:rgba(255,255,255,.55);letter-spacing:.16em}
.hero h1{color:#fff;margin-top:22px;font-size:clamp(44px,6vw,88px);line-height:.96;letter-spacing:-.05em}
.hero .lede{margin-top:26px;max-width:26em;font:500 22px/1.45 'DM Sans',sans-serif;color:rgba(255,255,255,.92)}
.hero .lede strong{font-weight:600;color:#fff}
.hero .sub{margin-top:16px;max-width:34em;font-size:17.5px;color:rgba(255,255,255,.72)}
.hero .side{display:grid;gap:12px}
.hero .side div{display:flex;align-items:baseline;gap:12px;padding:14px 0;border-top:1px solid rgba(255,255,255,.22);font-size:15.5px;color:rgba(255,255,255,.82)}
.hero .side b{font:600 15px/1 'Space Mono',monospace;color:rgba(255,255,255,.85)}

/* per-module accent */
body[data-page="sales"]{--accent:var(--rose);--accent-soft:var(--rose-soft);--accent-deep:#C2426C}
body[data-page="retention"]{--accent:var(--mint);--accent-soft:var(--mint-soft);--accent-deep:#147A5C}
body[data-page="expansion"]{--accent:var(--butter);--accent-soft:var(--butter-soft);--accent-deep:#A6720B}
body[data-page="scaling"]{--accent:var(--plum);--accent-soft:var(--plum-soft);--accent-deep:#6F2AA7}
body[data-page="rhythms"]{--accent:var(--flame);--accent-soft:var(--flame-soft);--accent-deep:#B23D18}

/* gate visibility */
.openonly{display:none}
body.unlocked .openonly{display:block}
body.unlocked .lockedonly{display:none}

/* lead band */
.lead{background:var(--fill);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:0;padding:72px 0 78px}
.lead-in{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:64px;align-items:center}
.lead h2{font-size:clamp(30px,3.2vw,44px);line-height:1.06}
.lead .lede{margin-top:20px;font:400 19px/1.6 'DM Sans',sans-serif;max-width:30em}
.lead .bul{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:12px;max-width:34em}
.lead .bul li{display:grid;grid-template-columns:18px 1fr;gap:12px;font-size:16.5px;color:var(--ink)}
.lead .bul svg{width:18px;height:18px;stroke:var(--indigo);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:4px}
.lead .gate{width:100%}

/* collapsible mini sections */
.mini{border-top:1px solid var(--line);margin-top:0}
.item>.mini:first-of-type{margin-top:0;border-top:0}
.item>.mini:first-of-type>summary{padding-top:0}
.mini>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) 26px;align-items:baseline;gap:16px;padding:22px 0}
.mini>summary::-webkit-details-marker{display:none}
.mini>summary .n{font:600 13px/1.6 'Space Mono',monospace;color:var(--faint);letter-spacing:.14em}
.mini>summary h3{font-size:clamp(20px,2vw,25px);line-height:1.2}
.mini>summary .sm{display:block;margin-top:6px;font:400 16px/1.5 'DM Sans',sans-serif;color:var(--body)}
.mini>summary .cv{width:26px;height:26px;border-radius:50%;background:var(--fill);align-self:center;display:grid;place-items:center;transition:transform .2s ease,background .2s ease}
.mini>summary .cv svg{width:13px;height:13px;stroke:var(--ink);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.mini>summary:hover .cv{background:var(--accent-soft)}
.mini[open]>summary .cv{transform:rotate(180deg)}
.mini .bdy{padding:2px 0 34px}
.mini .bdy>*+*{margin-top:16px}
.blk{padding-top:6px}
.blk h4{font:600 12px/1 'Space Mono',monospace;color:var(--accent-deep,var(--indigo-ink));letter-spacing:.16em;text-transform:uppercase}
.blk h5{margin-top:18px;font:600 18px/1.35 'Space Grotesk',sans-serif;color:var(--ink);letter-spacing:-.02em}
.blk>*+*{margin-top:12px}
.bl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bl li{display:grid;grid-template-columns:6px 1fr;gap:14px;font-size:16.5px;color:var(--ink)}
.bl li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:11px}
.bl .bl{margin-top:8px;padding-left:2px;grid-column:2}
.bl .bl li{font-size:15.5px;color:var(--body)}
.bl .bl li::before{background:var(--faint);width:5px;height:5px}
.mini .frame{margin-top:16px}
.lbl{font:500 15px/1.5 'DM Sans',sans-serif;color:var(--body)}
.why{margin-top:14px;padding:14px 18px;border-radius:12px;background:var(--accent-soft);font-size:16px;color:var(--ink)}
.nxt{display:inline-flex;align-items:center;gap:9px;margin-top:6px;font:500 16.5px/1 'DM Sans',sans-serif;color:var(--accent-deep,var(--indigo-ink))}
.nxt svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* rhythm layout */
.mbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);border-radius:16px;overflow:hidden;margin-top:6px}
.mbar>div{background:var(--fill);padding:17px 19px}
.mbar .k{display:block;font:600 10.5px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mbar .v{display:block;margin-top:8px;font:400 15.5px/1.45 'DM Sans',sans-serif;color:var(--ink)}
.lead2{margin-top:26px;font:500 20px/1.5 'DM Sans',sans-serif;color:var(--ink);max-width:34em}
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:18px}
.trio>div{background:var(--accent-soft);border-radius:14px;padding:17px 19px;font:500 16px/1.4 'DM Sans',sans-serif;color:var(--ink)}
.sect{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font:600 11.5px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.steps2{margin-top:24px;display:grid;gap:30px}
.stp{display:grid;grid-template-columns:36px minmax(0,1fr);gap:20px;align-items:start}
.stp .num{width:36px;height:36px;border-radius:50%;background:var(--accent-deep,var(--accent));color:#fff;display:grid;place-items:center;font:600 14px/1 'Space Mono',monospace}
.stp h5{margin:6px 0 0;font:600 19px/1.3 'Space Grotesk',sans-serif;color:var(--ink);letter-spacing:-.02em}
.stp .in{margin-top:14px}
.stp .in>*+*{margin-top:14px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
.pair>div{border-radius:18px;padding:22px 24px}
.pair .gd{background:var(--mint-soft)}
.pair .bd2{background:var(--rose-soft)}
.pair h4{font:600 11.5px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);opacity:.6;margin-bottom:14px}
.mk{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.mk li{display:grid;grid-template-columns:17px 1fr;gap:12px;font-size:16px;color:var(--ink)}
.mk svg{width:17px;height:17px;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:4px}
.mk.tick svg{stroke:#157A5F}
.mk.cross svg{stroke:#C2426C}
.kv{display:grid;gap:1px;background:var(--line);border-radius:16px;overflow:hidden;margin-top:18px}
.kv>div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;background:var(--paper);padding:15px 19px;font-size:16px;color:var(--body)}
.kv b{color:var(--ink);font-weight:600}
.cad{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font:600 11.5px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--accent-deep,var(--indigo));border-radius:999px;padding:9px 15px}
.cadq{margin-top:14px;font:600 21px/1.3 'Space Grotesk',sans-serif;color:var(--ink);letter-spacing:-.025em}
.cadblk+.cadblk{margin-top:38px;padding-top:34px;border-top:1px solid var(--line)}

/* rhythm tables */
.rtab{width:100%;border-collapse:collapse;margin-top:14px;font-size:15.5px;display:table}
.rtab th{text-align:left;padding:11px 14px;background:var(--fill);font:600 11.5px/1.4 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.rtab th:first-child{border-radius:10px 0 0 10px}
.rtab th:last-child{border-radius:0 10px 10px 0}
.rtab td{padding:14px;border-bottom:1px solid var(--line2);vertical-align:top;color:var(--ink)}
.rtab td:first-child{font-weight:500;white-space:nowrap}
.rtab tr:last-child td{border-bottom:0}
.twrap{overflow-x:auto;margin-top:14px}
.twrap .rtab{margin-top:0;min-width:640px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:14px}
.duo h4{margin-bottom:10px}
.eq{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding:32px 30px;background:var(--fill);border-radius:18px}
.eq .frac{position:relative;display:grid;gap:8px;padding:14px 22px;text-align:center}
.eq .frac::before,.eq .frac::after{content:"";position:absolute;top:0;bottom:0;width:9px;border:2px solid var(--faint)}
.eq .frac::before{left:0;border-right:0;border-radius:5px 0 0 5px}
.eq .frac::after{right:0;border-left:0;border-radius:0 5px 5px 0}
.eq .frac b{display:block;font:500 15.5px/1.3 'DM Sans',sans-serif;color:var(--ink);padding:0 12px}
.eq .frac b+b{border-top:1.5px solid var(--ink);padding-top:10px}
.eq .op{font:400 22px/1 'Space Mono',monospace;color:var(--muted)}
.eq .box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;font:500 15.5px/1.3 'DM Sans',sans-serif;color:var(--ink);box-shadow:var(--shadow-sm)}
.eq .box.out{background:var(--accent-soft);border-color:transparent;font-weight:600}

/* module cards on the OS page */
.mods{padding:76px 0 0}
.mods h2{font-size:clamp(28px,3vw,40px)}
.mgrid{margin-top:38px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.mgrid>:nth-child(-n+2){grid-column:span 3}
.mgrid>:nth-child(n+3){grid-column:span 2}
.mgrid>:nth-child(n+3) h3{font-size:clamp(21px,2vw,25px)}
.mgrid>:nth-child(n+3) p{font-size:16px}
.mgrid>:nth-child(n+3) li{font-size:15px}
.mod{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden;color:inherit;transition:transform .2s ease,box-shadow .2s ease}
.mod:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:inherit}
.mod .top{padding:26px 28px 0;display:flex;align-items:center;gap:12px}
.mod .n{font:600 13px/1 'Space Mono',monospace;color:var(--muted);letter-spacing:.14em}
.mod .st{margin-left:auto;display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:7px 13px;font:500 12.5px/1 'DM Sans',sans-serif;background:var(--fill);color:var(--muted)}
.mod .st svg{width:11px;height:11px;stroke:currentColor;stroke-width:1.9;fill:none}
.mod h3{padding:16px 28px 0;font-size:clamp(24px,2.4vw,30px);line-height:1.1}
.mod p{padding:12px 28px 0;font-size:16.5px}
.mod ul{list-style:none;margin:20px 0 0;padding:0 28px}
.mod li{display:grid;grid-template-columns:16px 1fr;gap:11px;padding:9px 0;border-top:1px solid var(--line2);font-size:15.5px;color:var(--ink)}
.mod li svg{width:16px;height:16px;stroke:var(--accent);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:4px}
.mod .grow{flex:1 1 auto}
.mod .openrow{margin-top:24px;padding:18px 28px;background:var(--accent-soft);display:flex;align-items:center;gap:10px;font:500 15px/1 'DM Sans',sans-serif;color:var(--indigo-ink)}
.mod .openrow svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-left:auto}
.mod.rose{--accent:var(--rose);--accent-soft:var(--rose-soft)}
.mod.rose .openrow{color:#B84A72}
.mod.mint{--accent:var(--mint);--accent-soft:var(--mint-soft)}
.mod.mint .openrow{color:#157A5F}
.mod.butter{--accent:var(--butter);--accent-soft:var(--butter-soft)}
.mod.butter .openrow{color:#A6750A}
.mod.plum{--accent:var(--plum);--accent-soft:var(--plum-soft)}
.mod.plum .openrow{color:#6F2AA7}
.mod.flame{--accent:var(--flame);--accent-soft:var(--flame-soft)}
.mod.flame .openrow{color:#B23D18}

/* content items */
.items{padding:70px 0 0;display:grid;gap:28px}
.item{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:38px 40px 40px}
.item .hd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:baseline}
.item .n{font:600 13px/1 'Space Mono',monospace;color:var(--faint);letter-spacing:.14em}
.item h2{font-size:clamp(25px,2.5vw,32px);line-height:1.14}
.item .txt{margin-top:18px}
.item p+p{margin-top:14px}
.item .steps{margin-top:22px;display:grid;gap:12px}
.item .steps div{display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:start;background:var(--fill);border-radius:14px;padding:16px 18px}
.item .steps b{font:600 13px/1.4 'Space Mono',monospace;color:var(--accent)}
.item .steps span{font-size:17px;color:var(--ink)}

/* media */
.frame{position:relative;margin-top:26px;border-radius:18px;overflow:hidden;background:var(--fill);aspect-ratio:16/9;border:1px solid var(--line)}
.frame image-slot{position:absolute;inset:0;width:100%;height:100%}
.frame .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 20px 40px -14px rgba(20,20,43,.5);z-index:2;pointer-events:none}
.frame .play::after{content:"";width:0;height:0;border-left:19px solid var(--indigo);border-top:11.5px solid transparent;border-bottom:11.5px solid transparent;margin-left:6px}
.frame.doc{aspect-ratio:4/3}

/* video facade: poster stands in for the embed until it's asked for, so no
   third-party player loads on page view. Swapped for the real iframe on click. */
.vfac{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;display:block;overflow:hidden;font:inherit;color:inherit}
.vfac img{width:100%;height:100%;object-fit:cover;display:block}
.vfac .play{transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease}
.vfac:hover .play{transform:translate(-50%,-50%) scale(1.07);box-shadow:0 24px 46px -14px rgba(20,20,43,.58)}
.vfac:focus-visible{outline:3px solid var(--indigo);outline-offset:-3px}
/* providers with no poster available (spreadsheets, podcast player) */
/* Click to first frame: poster stays put under a spinner, iframe fades in
   once it has actually loaded. */
.vfac.loading{cursor:progress}
.vfac.loading .play{opacity:0;transform:translate(-50%,-50%) scale(.9)}
.vfac.loading::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;animation:sp .7s linear infinite;z-index:3}
.frame iframe.vload{opacity:0;transition:opacity .25s ease;z-index:4}
.frame iframe.vload.vready{opacity:1}
.vfac.vph{display:grid;place-content:center;justify-items:center;gap:14px;background:var(--fill);padding:24px}
.vph .vpht{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px;color:var(--ink);text-align:center;line-height:1.3}
.vph .vphb{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;color:#fff;background:var(--ink);padding:9px 18px;border-radius:999px;transition:background .18s ease}
.vfac.vph:hover .vphb{background:var(--indigo)}

/* resource */
.res{display:flex;align-items:center;gap:20px;margin-top:24px;padding:22px 24px;border-radius:16px;background:var(--fill);color:inherit;transition:background .18s ease}
.res:hover{background:#EFEDFC;color:inherit}
.res .ic{width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:#fff;display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.res .ic svg{width:19px;height:19px;stroke:var(--indigo);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.res b{display:block;font:600 17px/1.35 'DM Sans',sans-serif;color:var(--ink)}
.res span{display:block;margin-top:4px;font-size:15px;color:var(--muted)}
.res .go{width:18px;height:18px;margin-left:auto;flex:0 0 18px;stroke:var(--indigo);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* product note */
.note{display:flex;align-items:center;gap:16px;margin-top:26px;padding:20px 24px;border-radius:16px;background:var(--indigo-soft);min-height:100px}
.note svg{width:20px;height:20px;flex:0 0 20px;stroke:var(--indigo-ink);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.note p{font-size:16.5px;color:#3B3B63}
.note a{margin-left:8px;white-space:nowrap;color:var(--indigo-ink);text-decoration:underline;text-underline-offset:3px}

/* gate */
.gated{position:relative}
.gated.locked>.gwrap{min-height:700px;padding-bottom:40px}
/* Locked pages no longer hold the paid content at all — it is fetched after
   unlock — so there is nothing left to obscure. The blur that used to hide it
   would now only hide the headings a visitor is meant to read, so this fades
   and truncates the preview instead of blurring it. */
.gated.locked>.gwrap>.inner{opacity:.62;pointer-events:none;user-select:none;max-height:520px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.3) 150px,transparent 210px);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.3) 150px,transparent 210px)}
/* Units whose whole body is gated leave an empty shell until hydration. */
.item:not(:has(*)){display:none}
.gwrap{position:relative}
.gate{width:min(520px,calc(100% - 32px));background:var(--paper);border-radius:24px;padding:36px;box-shadow:var(--shadow)}
.gated.locked .gate{position:absolute;top:70px;left:50%;transform:translateX(-50%);z-index:6}
.gated:not(.locked) .gate{display:none}
.gate h2{font-size:28px;line-height:1.12}
.gate .sup{margin-top:12px;font-size:17px}
.fld{margin-top:18px}
.fld label{display:block;font:500 14px/1 'DM Sans',sans-serif;color:var(--ink);margin-bottom:7px}
.fld input{appearance:none;width:100%;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font:400 16px/1 'DM Sans',sans-serif;color:var(--ink)}
.fld input::placeholder{color:var(--faint)}
.fld input:focus{outline:0;border-color:#B9B7F5;box-shadow:0 0 0 4px rgba(74,77,236,.12)}
.gate.err .fld input{border-color:#E4899F}
.gate .btn{width:100%;margin-top:24px}
.gate .msg{display:none;margin-top:13px;font-size:14.5px;color:#C24C77}
.gate.err .msg{display:block}
.gate .legal{margin-top:15px;font-size:13px;color:var(--muted)}
.gate .compat{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* foot */
.pfoot{margin-top:88px;background:var(--fill);border-top:1px solid var(--line)}
.pfoot .in{display:flex;flex-wrap:wrap;gap:20px;align-items:center;padding:34px 0 40px}
.pfoot img{height:22px;opacity:.9}
.pfoot .next{margin-left:auto;font:500 16px/1 'DM Sans',sans-serif;white-space:nowrap}

/* sessions */
.sgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:44px;align-items:stretch}
.scard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:36px;box-shadow:var(--shadow-sm)}
.scard .top{display:flex;align-items:flex-start;gap:16px}
.scard .ic{width:42px;height:42px;flex:0 0 42px;border-radius:13px;background:var(--indigo-soft);display:grid;place-items:center}
.scard .ic svg{width:20px;height:20px;stroke:var(--indigo);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.price{margin-left:auto;display:flex;align-items:baseline;gap:6px;white-space:nowrap;flex-wrap:nowrap}
.price b{font:600 clamp(36px,3.4vw,48px)/1 'Space Grotesk',sans-serif;color:var(--ink);letter-spacing:-.045em}
.price small{font:400 14.5px/1 'DM Sans',sans-serif;color:var(--muted)}
.scard h2{margin-top:24px;font-size:25px}
.scard .desc{margin-top:8px;font-size:16.5px;color:var(--indigo)}
.hr{border:0;border-top:1px solid var(--line);margin:26px 0}
.checks{display:grid;gap:14px;margin-top:22px}
.checks div{display:grid;grid-template-columns:18px 1fr;gap:12px;font-size:16.5px;color:var(--ink)}
.checks svg{width:18px;height:18px;stroke:var(--indigo);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:4px}
.grow{flex:1 1 auto}
.picklb{font:500 15px/1 'DM Sans',sans-serif;color:var(--ink)}
.picks{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.pick{appearance:none;cursor:pointer;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:11px 17px;font:500 14.5px/1 'DM Sans',sans-serif;color:var(--body);display:inline-flex;align-items:center;gap:8px;transition:all .16s ease}
.pick:hover{border-color:#D5D3F3;color:var(--ink)}
.pick svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.pick[aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff}
.pick[aria-pressed="true"] svg{opacity:1}
.scard .btn{width:100%;margin-top:28px}
.embed{margin-top:26px;border-radius:18px;background:var(--fill);height:400px;display:grid;place-items:center;text-align:center;padding:24px}
.embed span{font:400 12.5px/1.7 'Space Mono',monospace;color:var(--muted);letter-spacing:.05em}

/* floating CTA */
.fab{position:fixed;right:22px;bottom:22px;z-index:46;display:flex;align-items:center;background:var(--ink);border-radius:999px;padding:5px 5px 5px 20px;overflow:hidden;box-shadow:0 26px 50px -20px rgba(20,20,43,.6);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s ease,transform .3s ease,bottom .3s ease,width .58s cubic-bezier(.32,.72,0,1),height .58s cubic-bezier(.32,.72,0,1),border-radius .58s cubic-bezier(.32,.72,0,1),padding .4s cubic-bezier(.32,.72,0,1),background .4s ease,box-shadow .5s ease}
.fab.noanim{transition:none}
.fab.on{opacity:1;transform:translateY(0);pointer-events:auto}
.fab a{display:flex;align-items:center;gap:10px;font:500 15px/1 'DM Sans',sans-serif;color:#fff;padding:12px 10px 12px 0;white-space:nowrap}
.fab a svg{width:16px;height:16px;flex:0 0 16px;stroke:#A9ABFF;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fab .x{color:rgba(255,255,255,.6);flex:0 0 30px}
.fab .x:hover{color:#fff;background:rgba(255,255,255,.14)}
.fab .fpill{display:flex;align-items:center;transition:opacity .2s ease}
.fab .fcard{position:absolute;left:0;top:0;width:520px;max-height:calc(100vh - 44px);overflow:auto;opacity:0;pointer-events:none;transition:opacity .3s ease}
.fab.card{display:block;padding:0;border-radius:30px;background:rgba(22,22,42,.96);backdrop-filter:blur(20px);box-shadow:0 40px 80px -24px rgba(20,20,43,.7)}
.fab.card .fpill{opacity:0}
.fab.card .fcard{opacity:1;pointer-events:auto;transition:opacity .34s ease .12s}
.fab.card>.x{position:absolute;top:14px;right:14px;z-index:3;background:rgba(255,255,255,.16);color:#fff;width:32px;height:32px}
.fcard .fmedia{aspect-ratio:16/10;background:#000;overflow:hidden}
.fcard .fmedia img{width:100%;height:100%;object-fit:cover}
.fcard .fbody{padding:28px 30px 30px}
.fcard .fmeta{display:flex;align-items:center;gap:10px;font:500 11.5px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.fcard .fmeta i{width:20px;height:20px;border-radius:6px;background:var(--indigo);display:block}
.fcard b{display:block;margin-top:16px;font:600 27px/1.18 'Space Grotesk',sans-serif;color:#fff;letter-spacing:-.03em}
.fcard p{margin-top:11px;font-size:17px;line-height:1.5;color:rgba(255,255,255,.76)}
.fcard .btn{width:100%;margin-top:24px;padding:16px 24px;font-size:16px}
.fab .fpill .sy{display:none}
.fab.synced .fpill .cl{display:none}
.fab.synced .fpill .sy{display:flex}
.x{appearance:none;background:transparent;border:0;cursor:pointer;width:30px;height:30px;border-radius:999px;display:grid;place-items:center;color:var(--muted)}
.x:hover{color:var(--ink);background:var(--fill)}
.x svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}

/* overlays */
.strip{position:fixed;left:0;right:0;top:0;height:44px;z-index:60;background:var(--ink);color:#fff;display:none;align-items:center;justify-content:center;padding:0 50px;font:500 14px/1 'DM Sans',sans-serif}
.strip.on{display:flex}
.strip a{color:#fff;text-decoration:underline;text-underline-offset:3px;margin-left:8px}
.strip .x{position:absolute;right:10px;color:#fff}
.strip .x:hover{background:rgba(255,255,255,.14);color:#fff}
.modal{position:fixed;inset:0;z-index:70;display:none;place-items:center;padding:24px}
.modal.on{display:grid}
.modal .bd{position:absolute;inset:0;background:rgba(20,20,43,.5)}
.modal .pn{position:relative;width:min(480px,100%);background:var(--paper);border-radius:24px;padding:38px;box-shadow:var(--shadow)}
.modal h2{font-size:27px}
.modal p{margin-top:12px;font-size:16.5px}
.code{margin-top:22px;background:var(--indigo-soft);border-radius:12px;padding:16px;text-align:center;font:700 19px/1 'Space Mono',monospace;color:var(--indigo-ink);letter-spacing:.14em}
.modal .btn{width:100%;margin-top:20px}
.modal .quit{display:block;width:100%;margin-top:12px;background:transparent;border:0;cursor:pointer;font:400 14.5px/1 'DM Sans',sans-serif;color:var(--muted)}
.modal .quit:hover{color:var(--ink)}
.modal .pn>.x{position:absolute;top:14px;right:14px}
.barp{position:fixed;left:0;right:0;bottom:0;z-index:44;height:72px;background:var(--ink);display:none;align-items:center;gap:20px;padding:0 14px 0 28px}
.barp.on{display:flex}
.barp p{font:500 16px/1.35 'DM Sans',sans-serif;color:#fff}
.barp .btn{margin-left:auto}
.barp .x{color:rgba(255,255,255,.7)}
.barp .x:hover{color:#fff;background:rgba(255,255,255,.14)}
.slide{position:fixed;right:22px;bottom:22px;z-index:45;width:360px;background:var(--paper);border-radius:20px;padding:26px;display:none;transform:translateY(150%);transition:transform .4s cubic-bezier(.2,.8,.2,1);box-shadow:var(--shadow)}
.slide.mounted{display:block}
.slide.on{transform:translateY(0)}
.slide h3{font-size:20px}
.slide p{margin-top:8px;font-size:15.5px}
.slide .btn{width:100%;margin-top:18px}
.slide>.x{position:absolute;top:12px;right:12px}

/* admin */
.adm{position:fixed;left:18px;bottom:18px;z-index:80;font-family:'DM Sans',sans-serif}
.adm .knob{width:42px;height:42px;border-radius:50%;background:var(--ink);border:0;color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 14px 30px -14px rgba(20,20,43,.6)}
.adm .knob svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.adm .pn{display:none;width:320px;background:#14142B;color:#C9C8DD;border-radius:14px;padding:14px;box-shadow:0 30px 70px -24px rgba(20,20,43,.7)}
.adm.open .pn{display:block}
.adm.open .knob{display:none}
.adm .hd{display:flex;align-items:center;font:700 10.5px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#8886AD;margin-bottom:12px}
.adm .hd .x{margin-left:auto;color:#8886AD}
.adm .hd .x:hover{background:#23233C;color:#fff}
.adm .lb{display:block;font:400 10.5px/1 'Space Mono',monospace;color:#8886AD;letter-spacing:.08em;margin:12px 0 7px}
.adm select{width:100%;appearance:none;background:#1D1D34;border:1px solid #2E2E4C;color:#E7E6F5;border-radius:8px;padding:9px 10px;font:400 13px/1 'DM Sans',sans-serif}
.adm .fires{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.adm .fires button,.adm .rs{appearance:none;background:#1D1D34;border:1px solid #2E2E4C;color:#D7D6EC;border-radius:8px;padding:9px;font:400 12.5px/1.2 'DM Sans',sans-serif;cursor:pointer;text-align:left}
.adm .fires button:hover,.adm .rs:hover{background:#26264a;color:#fff}
.adm .tg{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px;color:#D7D6EC;cursor:pointer}
.adm .tg input{appearance:none;width:32px;height:18px;flex:0 0 32px;border-radius:999px;background:#2E2E4C;position:relative;cursor:pointer}
.adm .tg input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#8886AD;transition:transform .18s,background .18s}
.adm .tg input:checked{background:var(--indigo)}
.adm .tg input:checked::after{transform:translateX(14px);background:#fff}
.adm .read{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;padding:12px;background:#1A1A30;border-radius:9px}
.adm .read div{font:400 10px/1 'Space Mono',monospace;color:#8886AD;letter-spacing:.08em}
.adm .read b{display:block;margin-top:6px;font:700 17px/1 'Space Mono',monospace;color:#fff}
.adm .rs{width:100%;text-align:center;margin-top:10px}
.adm .sub{margin-top:9px;font:400 10px/1.5 'Space Mono',monospace;color:#61608A}

/* mobile chapter bar */
.chap{display:none;position:fixed;left:0;right:0;top:calc(var(--top) + 60px);z-index:48;height:44px;align-items:center;gap:8px;padding:0 20px;background:rgba(252,251,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);font:500 14px/1 'DM Sans',sans-serif;color:var(--ink);transition:top .26s ease}
.chap span{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chap svg{width:15px;height:15px;stroke:var(--muted);stroke-width:2;fill:none;stroke-linecap:round;flex:0 0 15px}
.sheet{position:fixed;inset:0;z-index:75;display:none}
.sheet.on{display:block}
.sheet .bd{position:absolute;inset:0;background:rgba(20,20,43,.42)}
.sheet .pn{position:absolute;left:0;right:0;bottom:0;background:var(--paper);border-radius:22px 22px 0 0;padding:10px 10px 26px;max-height:76vh;overflow:auto}
.sheet .pn a{display:flex;align-items:center;gap:12px;padding:15px 14px;border-radius:12px;font:500 16px/1.3 'DM Sans',sans-serif;color:var(--ink)}
.sheet .pn a.on{background:var(--fill)}
.sheet .pn a .lk{width:14px;height:14px;stroke:var(--faint);stroke-width:1.7;fill:none;margin-left:auto}

@media(max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:36px;align-items:start}
  .mgrid,.sgrid{grid-template-columns:1fr}
  .mgrid>*{grid-column:span 1 !important}
  .lead-in{grid-template-columns:1fr;gap:34px}
  .duo{grid-template-columns:1fr;gap:18px}
  .pair{grid-template-columns:1fr}
  .kv>div{grid-template-columns:1fr;gap:5px}
  .item{padding:30px 26px 32px}
}
@media(max-width:960px){
  .tnav{display:none}
  .chap{display:flex}
  body{padding-top:calc(var(--top) + 104px)}
  .prog{top:calc(var(--top) + 104px)}
  .hero{padding:56px 0 64px}
  .mods,.items{padding-top:52px}
  .fab{right:auto;left:50%;transform:translateX(-50%) translateY(12px)}
  .fab.on{transform:translateX(-50%) translateY(0)}
  .fab.card{width:auto}
  .slide{left:12px;right:12px;width:auto}
  .barp{height:auto;flex-wrap:wrap;padding:16px 46px 16px 20px}
  .barp .btn{margin-left:0}
  .barp .x{position:absolute;top:10px;right:8px}
  body.pushed{padding-bottom:var(--push,0px)}
}

/* ---------- video embeds ---------- */
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ---------- dark surfaces (Pipeline) ---------- */
/* in-page module CTA, tinted to the target module */
.ncta{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:36px;margin-top:36px;border-radius:22px;padding:38px;color:#fff;background:var(--nc,#C2426C);box-shadow:0 26px 60px -30px var(--nc-glow,rgba(194,66,108,.85));transition:transform .2s ease,box-shadow .2s ease}
.ncta:hover{transform:translateY(-3px);color:#fff;box-shadow:0 34px 72px -28px var(--nc-glow,rgba(194,66,108,.95))}
.ncta::after{content:"";position:absolute;right:-130px;top:-190px;width:540px;height:540px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent 70%);pointer-events:none}
.ncta>*{position:relative;z-index:1}
.ncta .nc-eyebrow{display:inline-flex;align-items:center;gap:9px;font:600 12.5px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.ncta .nc-eyebrow i{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.22)}
.ncta h3{margin-top:18px;color:#fff;font-size:clamp(24px,2.6vw,32px);line-height:1.12;letter-spacing:-.035em}
.ncta p{margin-top:14px;font-size:16.5px;line-height:1.62;color:rgba(255,255,255,.88)}
.ncta .nc-go{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:14px 24px;border-radius:999px;background:#fff;color:var(--nc-ink,#B03A61);font:500 16px/1 'DM Sans',sans-serif}
.ncta .nc-go svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.ncta:hover .nc-go svg{transform:translateX(4px)}
.ncta ul{list-style:none;margin:0;padding:8px 22px;border-radius:16px;background:rgba(255,255,255,.13);align-self:start}
.ncta li{display:grid;grid-template-columns:16px 1fr;gap:12px;padding:13px 0;font-size:15.5px;color:#fff}
.ncta li+li{border-top:1px solid rgba(255,255,255,.18)}
.ncta li svg{width:16px;height:16px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.ncta.rose{--nc:#C2426C;--nc-ink:#B03A61;--nc-glow:rgba(194,66,108,.85)}
.ncta.mint{--nc:#178A68;--nc-ink:#127355;--nc-glow:rgba(23,138,104,.85)}
.ncta.butter{--nc:#B87D0B;--nc-ink:#9A6809;--nc-glow:rgba(184,125,11,.85)}
.ncta.plum{--nc:#7431A8;--nc-ink:#65288F;--nc-glow:rgba(116,49,168,.85)}
.ncta.flame{--nc:#B23D18;--nc-ink:#983314;--nc-glow:rgba(178,61,24,.85)}
.ncta.indigo{--nc:#4A4DEC;--nc-ink:#3336C9;--nc-glow:rgba(74,77,236,.85)}

/* ---------- end-of-page card ---------- */
.outro{margin-top:96px}
.ocard{position:relative;overflow:hidden;border-radius:var(--r);background:#0C0E16;color:#fff;padding:44px}
.ocard::after{content:"";position:absolute;left:50%;top:-260px;transform:translateX(-50%);width:900px;height:620px;border-radius:50%;background:radial-gradient(closest-side,rgba(74,77,236,.30),transparent 72%);pointer-events:none}
.ocard>*{position:relative;z-index:1}
.ohead{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.10)}
.ohead h2{color:#fff;font-size:clamp(24px,2.5vw,30px)}
.ohead p{font-size:16px;color:#8E90A8}
.ogrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ogrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.ocell{display:flex;flex-direction:column;padding:34px 30px 4px;border-left:1px solid rgba(255,255,255,.10)}
.ocell:first-child{padding-left:0;border-left:0}
.ocell:last-child{padding-right:0}
.ocell .kicker{font:600 12.5px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#A8AAF7}
.ocell h3{margin-top:16px;color:#fff;font-size:21px;line-height:1.22}
.ocell p{margin-top:11px;font-size:15.5px;line-height:1.6;color:#9A9CB3}
.ocell .grow{flex:1}
.orow{display:grid;gap:10px;margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.10)}
.orow div{display:flex;align-items:baseline;gap:10px;font-size:15.5px;color:#C9CAD9}
.orow b{font:600 16.5px/1 'Space Grotesk',sans-serif;color:#fff;letter-spacing:-.02em;min-width:74px}
.orow span{color:#8E90A8;font-size:14.5px}
.ocell .btn{width:100%;margin-top:22px}
.ocell .btn-light{background:#fff;color:#0C0E16}
.ocell .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.24)}
.ocell .btn-line:hover{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.4)}
.ocell .fine{margin-top:12px;font-size:13px;color:#7B7D95}
.sfield{display:flex;gap:9px;margin-top:20px}
.sfield input{appearance:none;flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:13px 15px;font:400 15.5px/1 'DM Sans',sans-serif;color:#fff}
.sfield input::placeholder{color:#71738C}
.sfield input:focus{outline:0;border-color:#6F72F0;box-shadow:0 0 0 4px rgba(74,77,236,.20)}
.sfield .btn{width:auto;margin-top:0;flex:0 0 auto;padding:13px 20px}
.oform.err input{border-color:#E4899F}
.oform .msg{display:none;margin-top:11px;font-size:13.5px;color:#EFA0B6}
.oform.err .msg{display:block}
.oform.sent .sfield,.oform.sent .msg{display:none}
.odone{display:none;align-items:center;gap:10px;margin-top:20px;font-size:15.5px;color:#7BE0BB}
.oform.sent .odone{display:flex}
.odone svg{width:18px;height:18px;flex:0 0 18px;stroke:#7BE0BB;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* share modal */
.modal .pn .shr{margin-top:22px}
.modal .sent-note{display:none;align-items:center;gap:10px;margin-top:22px;padding:16px;border-radius:12px;background:var(--mint-soft);font-size:15.5px;color:#177A5C}
.modal .sent-note svg{width:18px;height:18px;flex:0 0 18px;stroke:#22A981;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.gate.sent .sent-note,.oform.sent .sent-note{display:flex}
#sharef.sent .fld,#sharef.sent .btn,#sharef.sent .legal{display:none}
.btn-icon svg{width:15px;height:15px}

@media(max-width:1000px){
  .ogrid{grid-template-columns:1fr}
  .ocell{padding:28px 0 4px;border-left:0;border-top:1px solid rgba(255,255,255,.10)}
  .ocell:first-child{padding-top:8px;border-top:0}
  .ocard{padding:32px 26px 34px}
  .ncta{grid-template-columns:1fr;gap:24px;padding:30px 26px 32px}
  .outro{margin-top:64px}
}

/* screenshots inside steps and tiles */
.shot{margin-top:16px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--fill)}
.shot img{width:100%;height:auto;display:block}
.fmap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}
.fmap>div{background:var(--fill);border-radius:14px;padding:18px 20px}
.fmap b{display:block;font:600 13px/1 'Space Mono',monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.fmap span{display:block;margin-top:9px;font-size:16px;color:var(--ink)}
.fmap .wide{grid-column:1 / -1}
@media(max-width:1000px){.fmap{grid-template-columns:1fr}}

/* google sheet embeds: short frame, the sheet scrolls inside it */
.frame.sheet{aspect-ratio:auto;height:clamp(340px,46vh,470px)}

/* outreach toolkit grouping */
.tkit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.tkit>div{background:var(--fill);border-radius:16px;padding:22px 24px}
.tkit h4{font:600 12px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep,var(--indigo-ink))}
.tkit ul{list-style:none;margin:15px 0 0;padding:0;display:grid;gap:10px}
.tkit li{position:relative;padding-left:17px;font-size:15.5px;line-height:1.45;color:var(--ink)}
.tkit li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
@media(max-width:1000px){.tkit{grid-template-columns:1fr}}

/* platform screenshot with an upsell footer */
.shot{margin:0}
.shot .up{display:flex;align-items:center;gap:13px;padding:14px 17px;border-top:1px solid var(--line);background:var(--paper);font-size:14.5px;line-height:1.45;color:var(--body)}
.shot .up .pin{width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:var(--accent-soft);display:grid;place-items:center}
.shot .up .pin svg{width:14px;height:14px;stroke:var(--accent-deep,var(--indigo-ink));stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.shot .up b{color:var(--ink);font-weight:600}
.shot .up a{margin-left:auto;flex:0 0 auto;white-space:nowrap;font-weight:500}
@media(max-width:700px){.shot .up{flex-wrap:wrap}.shot .up a{margin-left:39px}}

/* email capture on light surfaces (slide-in card) */
.slide .sfield{margin-top:16px}
.slide .sfield .btn{width:auto;margin-top:0}
.slide .sfield input{background:var(--bg);border-color:var(--line);color:var(--ink)}
.slide .sfield input::placeholder{color:var(--faint)}
.slide .sfield input:focus{border-color:#B9B7F5;box-shadow:0 0 0 4px rgba(74,77,236,.12)}
.slide .oform .msg{color:#C24C77}
.slide .odone{margin-top:16px;color:#177A5C}
.slide .odone svg{stroke:#22A981}

/* podcast player embed */
.frame.pod{aspect-ratio:auto;height:200px;background:var(--paper)}

/* inline product upsell strip */
.up-strip{display:flex;align-items:center;gap:14px;margin-top:22px;padding:16px 18px;border-radius:14px;background:var(--accent-soft);font-size:15.5px;line-height:1.5;color:var(--ink)}
.up-strip .pin{width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:#fff;display:grid;place-items:center}
.up-strip .pin svg{width:15px;height:15px;stroke:var(--accent-deep,var(--indigo-ink));stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.up-strip b{font-weight:600}
.up-strip a{margin-left:auto;flex:0 0 auto;white-space:nowrap;font-weight:500}
@media(max-width:700px){.up-strip{flex-wrap:wrap}.up-strip a{margin-left:44px}}