:root{
  --cream:#F4EEE3; --ink:#2A0A3D; --brand:#4A0A66; --signal:#E8590C; --signal-ink:#B8400A;
  --body:#4A4252; --muted:#6E6577; --line:#D9D1C4; --surface:#FFFFFF; --raised:#3A1550; --dark-line:#4E2E63; --footer:#1E0730; --on-dark:#CFC3D8;
  --sans:'Instrument Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --gutter:64px; --r:2px;
}
@media (max-width:900px){:root{--gutter:32px}}
@media (max-width:600px){:root{--gutter:16px}}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.mono{font-family:var(--mono)}
.wrap{padding-left:var(--gutter);padding-right:var(--gutter)}
.eyebrow{font-family:var(--mono);font-size:13px;display:flex;gap:8px;align-items:center}
.star{width:11px;height:11px;flex:none}
.ph{background:var(--line);display:flex;align-items:flex-end;padding:10px;font-family:var(--mono);font-size:11px;color:var(--body);overflow:hidden}
.ph.alt{background:#CFC6B8}.ph.alt2{background:#C4BAAB}
.chip{font-family:var(--mono);font-size:11px;padding:4px 8px;border:1px solid var(--ink);border-radius:var(--r);display:inline-block}
.chip.solid{background:var(--ink);color:var(--cream)}
.chip.dashed{border-style:dashed}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.hero>*,.split>*,.beta-proof>*,.strategy>*,.formsec>*,.faq>*,.ways-grid>*,.bridge>*,.postA>*,.postB>*,.connection>*,.rhythm>*{min-width:0}
/* dev banner */
.devbar{background:var(--ink);color:var(--cream);font-family:var(--mono);font-size:11px;padding:8px var(--gutter);display:flex;gap:16px;flex-wrap:wrap}
.devbar b{color:var(--signal);font-weight:500}

/* buttons */
.btn{min-height:60px;line-height:1.2;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 22px;border-radius:var(--r);font-size:17px;font-weight:600;text-decoration:none;border:1px solid var(--ink);cursor:pointer;font-family:var(--sans);background:transparent;color:var(--ink);width:100%}
.btn .price{font-family:var(--mono);font-size:13px;font-weight:500}
.btn.primary{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.btn[aria-disabled="true"]{cursor:not-allowed}
.btn-pair{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:12px}
.btn-notes{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:12px;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:12px}
@media (max-width:600px){.btn-pair,.btn-notes{grid-template-columns:1fr}.btn{min-height:56px;font-size:16px;padding:12px 18px}}

/* header */
header.site{position:sticky;top:0;z-index:20;background:var(--cream);border-bottom:1px solid var(--line);transition:height .2s,background .2s}
header.site .in{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;transition:height .2s}
header.site.compact{background:var(--ink);color:var(--cream);border-bottom-color:var(--ink)}
header.site.compact .in{height:56px}
.logo{font-weight:600;font-size:22px;letter-spacing:-.03em;text-decoration:none}
nav.main{display:flex;gap:32px;font-size:15px}
nav.main a{text-decoration:none;display:flex;gap:6px;align-items:center;color:inherit;opacity:.72}
nav.main a .star{width:9px;height:9px;visibility:hidden}
nav.main a.active{opacity:1}
nav.main a.active .star{visibility:visible}
.hcta{display:flex;gap:8px}
.hcta a{font-size:14px;font-weight:600;padding:10px 14px;border-radius:var(--r);text-decoration:none;border:1px solid currentColor;white-space:nowrap}
.hcta a.primary{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.menu-btn{display:none;width:40px;height:34px;border:1px solid currentColor;border-radius:var(--r);background:transparent;color:inherit;flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer}
.menu-btn span{width:16px;height:1px;background:currentColor}
.mobile-menu{display:none}
@media (max-width:900px){
  nav.main,.hcta a.fpp{display:none}
  .menu-btn{display:flex}
  header.site .in{height:56px}
  .mobile-menu.open{display:flex;flex-direction:column;gap:4px;padding:8px var(--gutter) 20px;background:inherit}
  .mobile-menu a{padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:17px}
}

/* hero */
.hero{display:grid;grid-template-columns:1fr;padding-top:48px;padding-bottom:64px}
.hero h1{margin:24px 0;max-width:13ch;font-size:clamp(58px,8.6vw,128px);line-height:.9;letter-spacing:-.055em;font-weight:500;text-wrap:balance}
.hero p.sub{margin:0 0 40px;max-width:640px;font-size:clamp(17px,1.5vw,21px);line-height:1.45;color:var(--body)}
@media (max-width:900px){.hero{padding-top:32px;padding-bottom:40px}}

/* rhythm */
.rhythm{padding-top:112px;padding-bottom:140px;display:grid;grid-template-columns:200px 1fr;gap:48px}
.rhythm .big{font-size:clamp(44px,7.2vw,104px);line-height:.95;letter-spacing:-.05em;font-weight:500;display:block}
@media (max-width:900px){.rhythm{grid-template-columns:1fr;gap:16px;padding-top:72px;padding-bottom:72px}}

/* product */
.dark{background:var(--ink);color:var(--cream)}
.product{padding-top:96px;padding-bottom:80px;display:flex;flex-direction:column;gap:56px}
.split{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:end}
.h2{margin:0;font-size:clamp(42px,5.8vw,84px);line-height:.95;letter-spacing:-.045em;font-weight:500}
.lead{margin:0;font-size:clamp(16px,1.3vw,19px);line-height:1.5}
.dark .lead{color:var(--on-dark)}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 24px minmax(0,1fr);padding-top:22px}
.flow .st{border:1px solid var(--dark-line);padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;position:relative}
.flow .st+.st{border-left:0}
.flow .st.you{grid-column:6;border:1px dashed var(--signal)}
.flow .st.hl{background:rgba(244,238,227,.06);border-color:var(--cream)}
.flow .st.hl::after{content:'→';position:absolute;right:-21px;top:18px;color:var(--signal);font-size:18px}
.flow .st.ar::after{content:'→';position:absolute;right:-9px;top:18px;width:18px;height:18px;display:grid;place-items:center;background:var(--ink);color:#A496AE;font-size:13px;z-index:1}
.flow .who{position:absolute;left:-1px;top:-22px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#A496AE}
.flow .you .who,.flow .you .n{color:var(--signal)}
.flow .n{font-family:var(--mono);font-size:11px;color:#A496AE}
.flow .t{font-size:21px;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.flow .d{font-size:14px;line-height:1.45;color:var(--on-dark)}
.show-h{display:flex;flex-direction:column;gap:12px;max-width:760px}
.show-h h3{margin:0;font-size:clamp(32px,3.6vw,52px);line-height:1;letter-spacing:-.035em;font-weight:500}
.show-h p{margin:0;color:var(--on-dark);font-size:17px;line-height:1.5}
.ew{background:var(--cream);color:var(--ink);border-radius:var(--r);overflow:hidden}
.ew-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 32px;border-bottom:1px solid var(--line)}
.ew-top b{font-size:20px;font-weight:600;letter-spacing:-.01em}
.ew-days{display:flex;gap:6px}
.ew-days button{appearance:none;font:500 14px var(--mono);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:var(--r);min-width:64px;min-height:44px;padding:0 14px;cursor:pointer}
.ew-days button:hover{border-color:var(--ink)}
.ew-days button[aria-selected="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.wk-p[hidden]{display:none}
.ew-body{display:grid;grid-template-columns:400px minmax(0,1fr);gap:56px;align-items:start;padding:32px}
.ew-media{margin:0;width:100%}
.ew-media .wk-res{position:relative}
.ew-media .wk-res > :not(.cs-count){border:1px solid var(--ink)}
.ew-media .cs-count{z-index:2}
.ew-media figcaption{margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.ew-head{display:flex;flex-direction:column;gap:16px;padding-top:24px}
.ew-kick{font-family:var(--mono);font-size:14px;color:var(--signal-ink);display:flex;gap:8px;align-items:center}
.ew-kick i{font-style:normal;background:var(--ink);color:var(--cream);padding:3px 8px;border-radius:var(--r)}
.ew-head h4{margin:0;max-width:640px;font-size:clamp(36px,3.8vw,56px);line-height:1.05;letter-spacing:-.03em;font-weight:500}
.ew-head .note{margin:0;max-width:640px;font-size:18px;line-height:1.5;color:var(--body)}
.ew-more{appearance:none;align-self:flex-start;display:inline-flex;gap:10px;align-items:center;font:600 17px var(--sans);color:var(--ink);background:transparent;border:1px solid var(--ink);border-radius:var(--r);min-height:54px;padding:0 22px;cursor:pointer;margin-top:4px}
.ew-more:hover{background:var(--ink);color:var(--cream)}
.ew-more .pm{font-family:var(--mono);font-size:16px;line-height:1}
.ew-full{border-top:1px solid var(--line);padding-top:24px;margin-top:8px}
.ew-full[hidden]{display:none}
.ew-full dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px}
.ew-full div{display:flex;flex-direction:column;gap:4px}
.ew-full .w2{grid-column:1 / -1}
.ew-full dt{font-family:var(--mono);font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.ew-full dd{margin:0;font-size:16px;line-height:1.45}
.ew-full .hook dd{border-left:2px solid var(--signal);padding-left:12px;font-size:20px}
.beta-proof{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;border-top:1px solid var(--dark-line);padding-top:48px}
.beta-proof h3{margin:0 0 12px;font-size:clamp(28px,2.6vw,36px);line-height:1.05;letter-spacing:-.03em;font-weight:500}
.beta-proof p{margin:0;color:var(--on-dark);font-size:16px;line-height:1.5}
.proof-shot{width:100%}
.proof-shot img{aspect-ratio:933 / 585;object-fit:cover;object-position:top}
.s3cta{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border:1px solid var(--cream);padding:24px 28px;border-radius:var(--r)}
.s3cta p{margin:0;font-size:24px;letter-spacing:-.02em;line-height:1.2}
.s3cta .btn{width:auto;min-width:260px}
.card-cream{background:var(--cream);color:var(--ink);border-radius:var(--r);padding:24px}
.card-white{background:var(--surface);color:var(--ink);border-radius:var(--r)}
.week{display:grid;grid-template-columns:1.15fr 1.4fr .8fr;gap:14px;align-items:start;margin-top:18px}
.item{display:flex;flex-direction:column;gap:8px}
.item .fmt{font-family:var(--mono);font-size:11px}
.item .ttl{font-weight:600;line-height:1.25}
.item .meta{font-size:12px;color:var(--body)}
.item.video{border:1px solid var(--ink);background:var(--surface);padding:10px}
.frames{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.frames .ph{aspect-ratio:9/16;padding:4px;font-size:8px}
.post-sec{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.post-sec .k{font-family:var(--mono);font-size:11px;color:var(--muted)}
.hook{border-left:2px solid var(--signal);padding-left:12px;font-size:16px;line-height:1.4}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:24px}
  .beta-proof{grid-template-columns:1fr;gap:24px}
  .ew-top{flex-direction:column;align-items:stretch;padding:16px 20px}.ew-top b{font-size:18px}
  .ew-days button{flex:1;min-width:0}
  .ew-body{grid-template-columns:1fr;gap:20px;padding:20px}
  .ew-media{justify-self:center;width:min(320px,100%)}
  .ew-head{padding-top:0}.ew-head .note{font-size:15px}.ew-kick{font-size:12px}
  .ew-head h4{font-size:28px}
  .ew-more{align-self:stretch;justify-content:center}
  .ew-full{padding-top:20px}
  .ew-full dl{grid-template-columns:1fr}
}
@media (max-width:1100px){
  .flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:0}
  .flow .st,.flow .st.hl{border:1px solid var(--dark-line)}
  .flow .st.you{grid-column:1 / -1;border:1px dashed var(--signal)}
  .flow .st.ar::after,.flow .st.hl::after,.flow .who{display:none}
}
@media (max-width:600px){.week{grid-template-columns:1fr}.product{padding-top:56px}
  .flow .t{font-size:18px}
  .s3cta{padding:20px}.s3cta .btn{width:100%;min-width:0}}

/* bridge */
.bridge{display:grid;grid-template-columns:1fr 1fr;min-height:720px}
.bridge .txt{padding:120px var(--gutter) 80px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.bridge p.big{margin:0;font-size:clamp(32px,3.6vw,52px);line-height:1.04;letter-spacing:-.035em;font-weight:500}
@media (max-width:900px){.bridge{grid-template-columns:1fr}.bridge .txt{padding:64px var(--gutter) 28px}.bridge .ph{min-height:440px;margin-left:var(--gutter)}}

/* work */
.work{padding-top:120px;display:flex;flex-direction:column;gap:56px;border-top:1px solid var(--ink)}
.case-title{margin:0;font-size:clamp(76px,11.6vw,168px);line-height:.85;letter-spacing:-.06em;font-weight:500}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;border-top:1px solid var(--ink)}
.facts div{padding-top:16px}
.facts .k{font-family:var(--mono);font-size:11px;color:var(--muted);display:block;margin-bottom:8px}
.pair{display:grid;grid-template-columns:8fr 4fr;gap:16px;align-items:end}
.postA{display:grid;grid-template-columns:5fr 7fr;gap:64px;padding:48px 0;border-top:1px solid var(--line)}
.dot{position:absolute;right:-14px;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--cream);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px}
.anno{display:grid;grid-template-columns:36px 1fr;row-gap:20px;border-top:1px solid var(--ink);padding-top:20px}
.pending{font-family:var(--mono);font-size:11px;color:var(--signal-ink)}
.postB{position:relative;background:#C4BAAB;display:grid;grid-template-columns:1fr 1fr;gap:64px;padding-top:96px;padding-bottom:96px;min-height:900px}
.postB .why{align-self:end;background:var(--cream);padding:32px;display:flex;flex-direction:column;gap:18px}
.postB .reel{justify-self:center;align-self:center;width:min(380px,100%);aspect-ratio:9/16;background:var(--surface);border:1px solid var(--ink)}
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding-top:64px;padding-bottom:64px;border-bottom:1px solid var(--ink)}
.proof > div{border-top:1px solid var(--ink);padding-top:16px;display:flex;flex-direction:column;gap:10px}
[data-requires].is-hidden{display:none !important}
@media (max-width:900px){
  .work{padding-top:64px;gap:32px}
  .facts,.proof{grid-template-columns:1fr;gap:16px}
  .pair{display:flex;overflow-x:auto;margin-right:calc(var(--gutter)*-1);padding-right:var(--gutter)}
  .pair .ph{flex:none;width:300px;aspect-ratio:4/5 !important}
  .postA{grid-template-columns:1fr;gap:24px}
  .dot{right:12px}
  .postB{grid-template-columns:1fr;gap:24px;min-height:0;padding-top:40px;padding-bottom:40px}
  .postB .reel{width:240px;order:-1}
  .postB .why{padding:20px}
}

/* learned */
.learned{padding-top:120px;padding-bottom:120px;display:flex;flex-direction:column;gap:40px}
.lrow{display:grid;grid-template-columns:200px 1fr 1fr;gap:48px;padding:28px 0;border-bottom:1px solid var(--line);align-items:start}
.lrow .duke{display:flex;gap:12px;background:var(--surface);border:1px solid var(--line);padding:16px 18px;font-size:18px;line-height:1.4}
@media (max-width:900px){.lrow{grid-template-columns:1fr;gap:10px}.learned{padding-top:56px;padding-bottom:64px}}

/* connection */
.connection{background:var(--brand);color:var(--cream);padding-top:120px;padding-bottom:120px;display:grid;grid-template-columns:200px 1fr;gap:48px}
.cline{display:grid;grid-template-columns:96px 1fr;gap:32px;padding:24px 0;border-bottom:1px solid #7A4A93;align-items:center}
.cline span{font-size:clamp(32px,5.2vw,76px);line-height:1;letter-spacing:-.045em;font-weight:500}
@media (max-width:900px){.connection{grid-template-columns:1fr;gap:20px;padding-top:64px;padding-bottom:64px}.cline{grid-template-columns:44px 1fr;gap:14px;padding:16px 0}}

/* strategy */
.strategy{padding-top:120px;padding-bottom:120px;display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.steps{border-top:1px solid var(--ink)}
.steps div{display:grid;grid-template-columns:36px 1fr;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.4}
.ui{background:var(--ink);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:16px}
.ui .panel{border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:12px}
.nums{display:flex;gap:4px}.nums span{border:1px solid var(--line);padding:6px 10px}.nums span.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
@media (max-width:600px){.ui .kv{grid-template-columns:1fr !important}.nums span{padding:6px 9px}}
@media (max-width:900px){.strategy{grid-template-columns:1fr;gap:28px;padding-top:64px;padding-bottom:64px}.ui{padding:14px}}

/* ways in */
.ways{padding-top:120px;padding-bottom:120px;border-top:1px solid var(--ink);display:flex;flex-direction:column;gap:48px}
.ways-head{grid-template-columns:200px 1fr !important}
.ways-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.way{border:1px solid var(--ink);border-radius:var(--r);padding:40px;display:flex;flex-direction:column;gap:22px}
.way .t{font-size:clamp(26px,2.8vw,40px);line-height:1.05;letter-spacing:-.03em;font-weight:500}
.way .p{display:flex;align-items:baseline;gap:8px}.way .p b{font-size:clamp(44px,4.4vw,64px);letter-spacing:-.045em;font-weight:500}
.way ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.way li{padding:11px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.4}
.way .btn{margin-top:auto}
.textlink{font-family:var(--mono);font-size:12px;text-decoration:underline;background:none;border:0;padding:0;color:inherit;cursor:pointer;text-align:left}
@media (max-width:900px){.ways-head{grid-template-columns:1fr !important;gap:16px}.ways-grid{grid-template-columns:1fr}.way{padding:22px 18px}.ways{padding-top:64px;padding-bottom:64px}}

/* faq */
.faq{padding-top:120px;padding-bottom:120px;border-top:1px solid var(--ink);display:grid;grid-template-columns:4fr 8fr;gap:64px}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{cursor:pointer;font-size:21px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:'+';font-family:var(--mono)}
.faq details[open] summary::after{content:'−'}
.faq details p{margin:10px 0 0;font-size:16px;line-height:1.55;color:var(--body)}
@media (max-width:900px){.faq{grid-template-columns:1fr;gap:16px;padding-top:64px;padding-bottom:64px}.faq summary{font-size:17px}}

/* form */
.formsec{background:var(--surface);border-top:1px solid var(--ink);padding-top:120px;padding-bottom:120px;display:grid;grid-template-columns:5fr 7fr;gap:64px}
.tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink);border-radius:var(--r)}
.tabs button{padding:14px 16px;font:600 15px var(--sans);border:0;background:transparent;color:var(--muted);cursor:pointer;text-align:left}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--cream)}
form .f{display:flex;flex-direction:column;gap:8px;margin-top:20px}
form label{font-size:15px;font-weight:600;display:flex;justify-content:space-between;gap:8px}
form label small{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--muted)}
form input,form select,form textarea{font:16px var(--sans);color:var(--ink);border:1px solid var(--ink);border-radius:var(--r);padding:14px;background:var(--surface);width:100%}
form textarea{min-height:104px;resize:vertical}
form .err{font-size:13px;color:var(--signal-ink);display:none}
form .f.invalid input,form .f.invalid textarea{border-color:var(--signal-ink)}
form .f.invalid .err{display:block}
form .btn{margin-top:24px;background:var(--ink);color:var(--cream)}
form .btn[disabled]{opacity:.6;cursor:progress}
.status{margin-top:16px;padding:14px 16px;font-size:15px;display:none;gap:10px;align-items:center}
.status.show{display:flex}
.status.ok{border:1px solid var(--ink)}
.status.bad{border:1px solid var(--signal-ink);color:var(--signal-ink)}
@media (max-width:900px){.formsec{grid-template-columns:1fr;gap:24px;padding-top:64px;padding-bottom:64px}.tabs button{font-size:13px;padding:12px}}

/* footer */
footer.site{background:var(--footer);color:var(--cream);padding-top:72px;padding-bottom:40px}
footer .cols{display:grid;grid-template-columns:6fr 3fr 3fr;gap:48px}
footer .cols a,footer .cols button{display:block;margin:10px 0;text-decoration:none;font-size:15px;color:inherit}
footer .bot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--dark-line);padding-top:20px;margin-top:56px;font-family:var(--mono);font-size:11px;color:#A496AE}
@media (max-width:900px){footer .cols{grid-template-columns:1fr;gap:24px}footer.site{padding-top:48px}}

/* ===== v3 additions ===== */
.skip{position:absolute;left:8px;top:-60px;background:var(--ink);color:var(--cream);padding:10px 14px;z-index:50;font-size:14px}
.skip:focus{top:8px}
nav.main a.demo{opacity:1;border-bottom:1px solid currentColor;padding-bottom:1px}
.hcta a.primary{min-width:0}

/* rotating phrase: every phrase sits in the same grid cell, so width and height never change */
.rot-line{margin:0 0 32px;font-size:clamp(18px,1.6vw,22px);line-height:1.35;font-weight:500;display:flex;flex-wrap:wrap;gap:.3em;align-items:baseline}
.rotator{display:inline-grid;color:var(--signal-ink)}
.rotator > span{grid-area:1/1;opacity:0;transform:translateY(.4em);transition:opacity .6s ease,transform .6s ease;white-space:nowrap}
.rotator > span.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rotator > span{transition:none;transform:none}
  .tile img{transition:none !important}
}

/* portfolio */
.work2{padding-top:120px;padding-bottom:120px;border-top:1px solid var(--ink);display:grid;grid-template-columns:4fr 8fr;gap:64px;align-items:start}
.work2 > *{min-width:0}
.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.tile{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit}
.tile .img{aspect-ratio:4/5;overflow:hidden;border:1px solid var(--ink);background:var(--line)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tile:hover img,.tile:focus-visible img{transform:scale(1.02)}
.tile .row1{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px solid var(--ink);padding-top:12px}
.tile .name{font-size:clamp(24px,2.4vw,32px);font-weight:500;letter-spacing:-.025em}
.tile .go{font-family:var(--mono);font-size:12px;white-space:nowrap}
.tile .meta{font-family:var(--mono);font-size:12px;color:var(--muted)}
.tile .hl{font-size:17px;font-weight:600;letter-spacing:-.01em;border-left:2px solid var(--signal);padding-left:10px}
.work-grid.single{max-width:620px}
.work-grid.single .tile .img{aspect-ratio:4/5}
@media (max-width:900px){.work2{grid-template-columns:1fr;gap:28px;padding-top:64px;padding-bottom:64px}.work-grid.single .tile .img{aspect-ratio:4/5}}

/* ways in v3: Duke first, partner second */
.ways-grid.v3{grid-template-columns:7fr 5fr;align-items:start}
.way.secondary{padding:32px}
.way .free{font-family:var(--mono);font-size:12px;color:var(--body)}
@media (max-width:900px){.ways-grid.v3{grid-template-columns:1fr}.way.secondary{padding:22px 18px}}

/* form v3 */
.fgrid{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.fgrid .full{grid-column:1/-1}
@media (max-width:600px){.fgrid{grid-template-columns:1fr}}
.status .sub{display:block;font-size:13px;color:var(--body);margin-top:4px}
.status.warn{border:1px solid var(--signal-ink)}

/* priority access */
.priority{margin-top:16px;border:1px solid var(--ink);background:var(--cream);padding:22px;display:flex;flex-direction:column;gap:12px}
.priority h3{margin:0;font-size:22px;letter-spacing:-.015em;font-weight:600}
.priority p{margin:0;font-size:15px;line-height:1.5;color:var(--body)}
.priority ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.priority li{padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.priority .btn{background:var(--signal);border-color:var(--signal);color:var(--ink);margin-top:6px}
.priority .btn.ghost{background:transparent;border-color:var(--ink)}
.pstate{font-size:15px;line-height:1.5;padding:12px 14px;border:1px solid var(--ink);display:flex;gap:10px;align-items:flex-start}
.pstate.bad{border-color:var(--signal-ink);color:var(--signal-ink)}

/* case page */
.crumb{font-family:var(--mono);font-size:12px;padding-top:28px;display:flex;gap:8px;flex-wrap:wrap}
.crumb a{text-decoration:none;border-bottom:1px solid currentColor}
.case-head{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:end;padding-top:48px;padding-bottom:48px}
.case-head > *{min-width:0}
.case-hero{aspect-ratio:16/9;overflow:hidden;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.case-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.case-sec{display:grid;grid-template-columns:3fr 9fr;gap:64px;padding-top:72px;padding-bottom:72px;border-bottom:1px solid var(--line)}
.case-sec > *{min-width:0}
.case-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.case-gallery figure{margin:0}
.case-gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--ink)}
.case-gallery figcaption{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:8px}
.todo{font-family:var(--mono);font-size:12px;color:var(--signal-ink);border:1px dashed var(--signal-ink);padding:10px 12px;display:inline-block}
@media (max-width:900px){.case-head,.case-sec{grid-template-columns:1fr;gap:20px}.case-sec{padding-top:48px;padding-bottom:48px}.case-gallery{grid-template-columns:1fr 1fr}.case-hero{aspect-ratio:4/5}}

/* real product screenshots */
.shot{margin:0;background:var(--ink);border:1px solid var(--dark-line);padding:14px;display:flex;flex-direction:column;gap:12px;align-self:start}
.shot-bar{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center}
.shot img{width:100%;height:auto;background:var(--surface);border:1px solid var(--dark-line)}
.shot figcaption{font-size:13px;line-height:1.5;color:var(--on-dark)}
.logo img{display:block;height:22px;width:auto}
header.site.compact .logo img{filter:brightness(0) invert(94%) sepia(6%) saturate(300%)}
footer.site img{height:26px;width:auto}

/* ===== case study (editorial) ===== */
.cs-head{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:end;padding-top:40px;padding-bottom:40px}
.cs-head > *{min-width:0}
.cs-lede{margin:0;font-size:clamp(20px,2vw,26px);line-height:1.35;font-weight:500;max-width:520px}
.cs-hero{height:min(78vh,820px);min-height:420px;overflow:hidden;background:var(--line)}
.cs-hero img{width:100%;height:100%;object-fit:cover}
.cs-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:0;padding-top:28px;padding-bottom:28px;border-bottom:1px solid var(--ink)}
.cs-meta dt{font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:6px}
.cs-meta dd{margin:0;font-size:15px;line-height:1.4}
.cs-text{display:grid;grid-template-columns:3fr 9fr;gap:64px;padding-top:120px;padding-bottom:72px}
.cs-text > *{min-width:0}
.cs-label{font-family:var(--mono);font-size:12px;padding-top:12px}
.cs-text h2{margin:0 0 20px;font-size:clamp(32px,4vw,60px);line-height:1;letter-spacing:-.04em;font-weight:500;max-width:860px}
.cs-text p{margin:0;font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--body);max-width:640px}
.cs-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:40px 0 28px}
.cs-stats div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:10px;border-top:1px solid var(--ink);padding-top:18px}
.cs-stats dd{margin:0;font-size:clamp(44px,4.6vw,68px);line-height:1;letter-spacing:-.045em;font-weight:500}
.cs-stats dt{font-size:14px;line-height:1.45;color:var(--body)}
.cs-results .cs-aud{font-size:17px}
.cs-results .cs-src{margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.cs-quotes > div{display:grid;gap:40px}
.cs-quote{margin:0;border-left:2px solid var(--signal);padding-left:clamp(16px,2vw,28px)}
.cs-quote blockquote{margin:0}
.cs-quote p{margin:0;font-size:clamp(24px,2.6vw,36px);line-height:1.2;letter-spacing:-.025em;color:var(--ink);max-width:860px}
.cs-quote figcaption{margin-top:14px}
@media (max-width:900px){.cs-stats{grid-template-columns:1fr 1fr;gap:20px 16px}}
.cs-frame{overflow:hidden;background:var(--line)}
.cs-frame img{width:100%;height:100%;object-fit:cover;display:block}
.cs-fig{margin:0}
figcaption{font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--muted);margin-top:10px}
.cs-full{margin:72px 0 0}
.cs-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:72px;align-items:start}
.cs-pair.offset > :last-child{margin-top:160px}
.cs-pair > *{min-width:0}
.cs-mark{margin:120px 0 0;display:grid;grid-template-columns:3fr 9fr;gap:64px;align-items:end}
.cs-mark-box{grid-column:2;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:clamp(32px,6vw,96px)}
.cs-mark-box img{width:min(420px,100%);height:auto}
.cs-mark figcaption{grid-column:2;grid-row:2}
.cs-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cs-hero.contain{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cs-hero.contain img{object-fit:contain}
.cs-closing{margin-top:120px}
.cs-end{padding-top:56px;padding-bottom:96px;display:flex;flex-direction:column;gap:28px}
.cs-end p{margin:0;font-size:clamp(28px,3.2vw,48px);line-height:1.05;letter-spacing:-.035em;font-weight:500;max-width:820px}
.cs-nav{display:flex;flex-wrap:wrap;gap:12px}
.cs-nav .btn{width:auto;min-height:52px;font-size:15px;gap:10px}
@media (max-width:900px){
  .cs-head{grid-template-columns:1fr;gap:16px;padding-top:28px}
  .cs-hero{height:auto;min-height:0;aspect-ratio:4/5}
  .cs-hero.contain{aspect-ratio:16/10}
  .cs-posts{grid-template-columns:1fr 1fr}
  .cs-meta{grid-template-columns:1fr 1fr;gap:16px}
  .cs-text,.cs-mark{grid-template-columns:1fr;gap:12px;padding-top:64px;padding-bottom:40px}
  .cs-mark{padding:0;margin-top:64px}
  .cs-mark-box,.cs-mark figcaption{grid-column:1;grid-row:auto}
  .cs-pair{grid-template-columns:1fr;gap:32px;padding-top:40px}
  .cs-pair.offset > :last-child{margin-top:0;width:82%;margin-left:auto}
  .cs-full{margin-top:40px}
  .cs-full .cs-frame{aspect-ratio:4/5 !important}
  .cs-closing{margin-top:64px}
  .cs-nav .btn{width:100%}
}

/* ===== refinement pass: typography, motion, carousel, anatomy, ways, modal ===== */
/* Expressive accent: Instrument Serif italic, used only on selected words in headings */
.ser{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.025em;font-size:1.04em;line-height:.9}
.eyebrow{letter-spacing:.01em}
.eyebrow::after{content:"";display:inline-block;width:28px;height:1px;background:currentColor;opacity:.45;margin-left:4px}
.btn .arr{display:inline-block;transition:transform .25s ease}
.btn:hover .arr,.btn:focus-visible .arr{transform:translateX(4px)}
.btn.primary:hover{background:#EF6A22;border-color:#EF6A22}
.btn:not(.primary):hover{background:rgba(42,10,61,.06)}
.btn-pair{grid-template-columns:repeat(2,minmax(0,330px))}
@media (max-width:600px){.btn-pair{grid-template-columns:1fr}.hcta a.primary{display:none}}

/* Hero entrance: headline first, then copy, then actions. JS-only, so content shows without JS. */
@keyframes seqIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hIn{from{clip-path:inset(0 0 100% 0);transform:translateY(28px)}to{clip-path:inset(-10% -5% -20% -5%);transform:none}}
/* Whole sequence lasts 2.2 s (was 1.6 s): the last element (s5) starts at 1.4 s and runs 0.8 s.
   The CTAs (s4) are fully visible by 1.9 s. */
.js .intro .seq{opacity:0;animation:seqIn .8s cubic-bezier(.2,.7,.2,1) forwards}
.js .intro .seq-h{animation:hIn 1s cubic-bezier(.2,.7,.2,1) .15s both}
.js .intro .s1{animation-delay:.02s}.js .intro .s2{animation-delay:.7s}.js .intro .s3{animation-delay:.9s}.js .intro .s4{animation-delay:1.1s}.js .intro .s5{animation-delay:1.4s}

/* Scroll reveals */
.js .rv:not(.stagger){opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.stagger > *{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
.js .rv.in:not(.stagger),.js .rv.stagger.in > *{opacity:1;transform:none}
/* Color sections open with a short wipe */
.js .wipe{clip-path:inset(3% 2% 0 2%);transition:clip-path .9s cubic-bezier(.2,.7,.2,1)}
.js .wipe.in{clip-path:inset(0)}
@media (prefers-reduced-motion:reduce){
  .js .intro .seq,.js .intro .seq-h{animation:none;opacity:1;transform:none;clip-path:none}
  .js .rv:not(.stagger),.js .rv.stagger > *{opacity:1;transform:none;transition:none}
  .js .wipe{clip-path:none;transition:none}
  .btn .arr,.fa-dialog{transition:none;animation:none !important}
}

/* Section 06: outlined star */
.star-outline{flex:none}



/* Section 08 · Ways In on deep purple */
.ways.ways-dark{display:block;background:var(--ink);color:var(--cream);border-top:0}
.ways-in{display:flex;flex-direction:column;gap:48px}
.ways-dark .h2{color:#fff}
.ways-dark .ways-head .mono{color:#D8CCE2}
.way.fpp-dark{background:transparent;border-color:rgba(244,238,227,.55);color:#fff}
.fpp-dark ul{border-top-color:var(--dark-line)}
.fpp-dark li{border-bottom-color:var(--dark-line);color:var(--cream)}
.btn.on-dark{border-color:var(--cream);color:var(--cream)}
.btn.on-dark:hover{background:var(--cream);color:var(--ink)}

/* Duke First Access modal */
body.modal-open{overflow:hidden}
.fa-backdrop{position:fixed;inset:0;background:rgba(30,7,48,.62);display:flex;align-items:center;justify-content:center;padding:16px;z-index:60}
.fa-dialog{background:var(--cream);color:var(--ink);border:1px solid var(--ink);border-radius:var(--r);width:100%;max-width:520px;max-height:calc(100vh - 32px);overflow:auto;padding:clamp(22px,4vw,36px);position:relative;animation:seqIn .35s ease both}
.fa-close{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;background:transparent;color:var(--ink);font-size:28px;line-height:1;cursor:pointer}
.fa-dialog h2{margin:12px 0 6px;font-size:clamp(30px,4vw,40px);line-height:1;letter-spacing:-.035em;font-weight:500}
.fa-dialog > div > p{margin:0;font-size:16px;color:var(--body)}
.fa-box{margin-top:22px;border-top:1px solid var(--ink);padding-top:20px;display:flex;flex-direction:column;gap:12px}
.fa-box h3{margin:0;font-size:22px;letter-spacing:-.015em;font-weight:600}
.fa-box p{margin:0;font-size:15px;line-height:1.5;color:var(--body)}
.fa-box .btn{min-height:54px;font-size:16px}
.fa-note{font-size:13px !important}
.fa-state{margin-top:8px;padding:14px 16px;border:1px solid var(--ink);font-size:15px;line-height:1.5}
.fa-state.bad{border-color:var(--signal-ink);color:var(--signal-ink)}
.fa-state-actions{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.ways-dark .way:not(.fpp-dark){color:var(--ink)}
.ways-dark .way:not(.fpp-dark) .textlink{color:var(--ink)}
@media (max-width:600px){.eyebrow::after{display:none}}

/* ===== section numbers: one system, a different composition per section ===== */
.sn{display:inline-flex;align-items:baseline;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.sn .star{width:10px;height:10px;align-self:center}
/* 02 outlined serif numeral */
.sn-outline{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:clamp(64px,7vw,120px);line-height:.8;color:transparent;-webkit-text-stroke:1px var(--muted);letter-spacing:-.04em}
/* 03 big serif numeral + mono label */
.sn-serif .n{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:clamp(48px,5vw,72px);line-height:.8;color:var(--signal);letter-spacing:-.03em}
.sn-serif .l{padding-bottom:6px;border-bottom:1px solid currentColor}
/* 04 "No. 4" */
.sn-no{font-family:'Instrument Serif',Georgia,serif;font-size:28px;letter-spacing:0}
.sn-no i{font-size:18px;color:var(--muted)}
/* 05 label, long rule, number at the far end */
.sn-rule{display:flex;width:100%;gap:12px;align-items:center}
.sn-rule .l{display:inline-flex;gap:8px;align-items:center}
.sn-rule .rule{flex:1;height:1px;background:currentColor;opacity:.35}
.sn-rule .n{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:26px}
/* 06 vertical label */
.sn-vert{flex-direction:column;align-items:flex-start;gap:16px}
.sn-vert .n{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:44px;line-height:.8;color:var(--signal)}
.sn-vert .l{writing-mode:vertical-rl;transform:rotate(180deg);color:#D8CCE2;letter-spacing:.06em}
/* 07 small tag + superscript number on the heading */
.sn-tag{border:1px solid currentColor;padding:4px 8px;border-radius:var(--r);align-self:flex-start}
.sn-sup{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--signal-ink);vertical-align:top;position:relative;top:.6em;margin-right:.6em}
/* 08 number above a serif label */
.sn-stack{flex-direction:column;gap:4px;align-items:flex-start}
.sn-stack .l{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:30px;line-height:1;letter-spacing:-.01em;color:#fff}
.sn-stack .n{color:var(--signal)}
/* 09 fraction */
.sn-frac .n{font-family:'Instrument Serif',Georgia,serif;font-size:34px;line-height:.8}
.sn-frac .slash{font-size:28px;color:var(--muted);transform:skewX(-12deg)}
/* 10 star, label, number */
.sn-end .n{color:var(--muted)}
.sn-end .l{font-weight:500}
@media (max-width:900px){
  .sn-vert{flex-direction:row;align-items:baseline}
  .sn-vert .l{writing-mode:horizontal-tb;transform:none}
  .sn-outline{font-size:64px}
}

/* brand accent on single words (hero "post", demo "Duke"); large text, contrast over 3:1 on cream */
.acc{color:var(--signal)}
.faq-list{border-top:1px solid var(--ink)}
.faq-list{counter-reset:fg;border-top:0}
.faq-g{counter-increment:fg;display:flex;align-items:baseline;gap:14px;margin:72px 0 4px;padding-top:18px;border-top:2px solid var(--ink);font-size:clamp(26px,2.6vw,36px);line-height:1.05;letter-spacing:-.03em;font-weight:500;color:var(--ink)}
.faq-g::before{content:counter(fg,decimal-leading-zero);font-family:var(--mono);font-size:13px;letter-spacing:0;font-weight:500;color:var(--signal-ink);transform:translateY(-4px)}
.faq-g:first-child{margin-top:0}
@media (max-width:900px){.faq-g{margin-top:48px;font-size:24px}}
/* real client media in the weekly plan */
.wk-res > .media,.wk-res > .vid,.wk-res > .stories{aspect-ratio:4/5;width:100%}
.wk-res .media{display:block;width:100%;height:100%;object-fit:cover;background:var(--line)}
.wk-res > img.media{height:auto}
.vid{position:relative;background:var(--line)}
.vid-btn{position:absolute;left:10px;bottom:10px;border:1px solid var(--ink);background:var(--cream);color:var(--ink);font:500 12px var(--mono);padding:7px 10px;border-radius:var(--r);cursor:pointer;min-height:36px}
.stories{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--surface);border:1px solid var(--ink);padding:6px;align-items:center}
.stories img{width:100%;height:auto;max-height:100%;object-fit:contain;display:block}
/* full-screen viewer */
.lb-host{position:relative}
.lb-host img{cursor:zoom-in}
.lb-btn{position:absolute;right:10px;top:10px;z-index:2;border:1px solid var(--ink);background:var(--cream);color:var(--ink);font:500 12px var(--mono);padding:7px 10px;border-radius:var(--r);cursor:pointer;min-height:36px}
.lb-btn:hover{background:var(--surface)}
html.lb-open,html.lb-open body{overflow:hidden;overscroll-behavior:none}
.lb{position:fixed;inset:0;z-index:200;background:rgba(20,6,30,.94);display:grid;grid-template-rows:auto 1fr auto;color:var(--cream)}
.lb[hidden]{display:none}
.lb-top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px}
.lb-count{font-size:12px}
.lb-close{border:1px solid var(--cream);background:transparent;color:var(--cream);font:600 14px var(--sans);padding:10px 14px;border-radius:var(--r);cursor:pointer;min-height:44px}
.lb-stage{display:flex;align-items:center;justify-content:center;min-height:0;padding:0 64px}
.lb-stage img,.lb-stage video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;background:#000}
.lb-cap{margin:0;padding:10px 16px 16px;font-size:14px;line-height:1.4;text-align:center;color:#D9CFE0;max-width:820px;justify-self:center}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);border:1px solid var(--cream);background:rgba(42,10,61,.6);color:var(--cream);width:48px;height:48px;border-radius:50%;font-size:18px;cursor:pointer}
.lb-prev{left:10px}.lb-next{right:10px}
.lb-nav[hidden]{display:none}
.lb :focus-visible{outline:2px solid var(--signal);outline-offset:2px}
@media (max-width:600px){.lb-stage{padding:0 8px}.lb-nav{top:auto;bottom:64px;transform:none;width:44px;height:44px}}
.cs-frame.contain{background:#fff;border:1px solid var(--line)}
.cs-frame.contain img{object-fit:contain}
.cs-count{position:absolute;left:10px;top:10px;font-size:11px;background:var(--cream);color:var(--ink);padding:4px 7px;border:1px solid var(--ink)}
.cs-posts{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.cs-posts{grid-template-columns:repeat(2,1fr)}}
.cs-end{padding-top:120px}
.wk-res > .media-wrap{aspect-ratio:4/5;width:100%;overflow:hidden}
.wk-res > .media-wrap img.media{height:100%}
.shot-media{position:relative}
.shot-media img{display:block;width:100%;height:auto}
/* "Before Duke" desk: real screenshots of the tools we used by hand, framed as app windows */
.desk{margin:0;position:relative;overflow:hidden;min-height:560px;background:var(--line)}
.dk-win{position:absolute;background:var(--surface);border:1px solid rgba(42,10,61,.85);border-radius:4px;overflow:hidden;box-shadow:0 2px 4px rgba(42,10,61,.08),0 24px 48px -20px rgba(42,10,61,.45)}
.dk-win img{display:block;width:100%;height:auto}
.dk-bar{display:flex;align-items:center;gap:10px;height:30px;padding:0 12px;border-bottom:1px solid rgba(42,10,61,.18);background:#FBF8F3;font-family:var(--mono);font-size:11px;color:var(--body)}
.dk-bar b{font-weight:500;color:var(--ink)}
.dk-dots{display:flex;gap:5px}.dk-dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.dk-lbl{margin-left:auto;color:var(--muted);white-space:nowrap}
.dk-dark{background:#191919}.dk-dark .dk-bar{background:#232323;border-bottom-color:#000;color:#9B9B9B}.dk-dark .dk-bar b{color:#F1F1F1}.dk-dark .dk-dots i{background:#4A4A4A}
.dk-cal{left:5%;top:6%;width:64%;transform:rotate(-1deg);z-index:1}
.dk-notion{right:4%;top:23%;width:55%;transform:rotate(.8deg);z-index:2}
.dk-drive{left:5%;top:53%;width:40%;transform:rotate(.6deg);z-index:3}
.dk-canva{right:4%;bottom:8%;width:56%;transform:rotate(-.7deg);z-index:4}
.dk-note{position:absolute;left:7%;top:41%;z-index:5;background:var(--signal);color:#fff;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:24px;line-height:1.05;padding:12px 16px 14px;transform:rotate(-4deg);box-shadow:0 12px 24px -10px rgba(0,0,0,.45)}
.dk-cap{position:absolute;right:12px;bottom:10px;font-size:11px;color:var(--body)}
@media (max-width:900px){
  .desk{min-height:620px}
  .dk-cal{width:80%;top:3%;left:4%}.dk-notion{width:76%;top:23%}.dk-drive{width:62%;top:50%;left:4%}.dk-canva{width:72%;bottom:5%}
  .dk-note{font-size:17px;left:auto;right:3%;top:15%;padding:9px 12px 11px}
  .dk-bar{height:24px;font-size:9.5px;padding:0 8px}.dk-lbl{display:none}.dk-dots i{width:6px;height:6px}
}
.cs-posts .lb-btn .t{display:none}
.cs-posts .lb-btn{min-width:36px}