/* MojoPad homepage story (Oct 2026, "knowledge synthesis"): problem -> claim -> signature graphic ->
   how it connects -> proof -> who it's for -> depth -> payoff. Scoped to .s-* so site.css stays in charge
   of the nav, footer and the rest of the page. Night bands are dark in both appearances. */
:root{ --s-night:#131010; --s-n-ink:#F3ECE3; --s-n-ink-2:#C9BDB0; --s-n-ink-3:#8F8276; --s-n-accent:#EE9A72;
  --wiki:#86B4FF; --journal:#F4B670; --tasks:#8FD49A; --learn:#B9A2FF; --insight:#FFE2B0; }
.s-night{background:var(--s-night);color:var(--s-n-ink)}
.s-night .eyebrow{color:var(--s-n-accent)}
.s-night .lede{color:var(--s-n-ink-2)}
.s-night .btn-primary{background:#D9774B;color:#1B1715;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 10px 30px -8px rgba(217,119,75,.7)}
.s-night .btn-primary:hover{background:#E5865B;color:#1B1715}
.s-night .btn-ghost{color:var(--s-n-ink);border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04)}
.s-night .btn-ghost:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.s-night .fine{color:var(--s-n-ink-3)}
.s-night :focus-visible{outline-color:#EE9A72}
.s-center{text-align:center}
.s-h2{font:500 clamp(38px,4.8vw,64px)/1.04 var(--serif);letter-spacing:-.022em;margin:0;text-wrap:balance}
.s-h2 em{font-style:italic}

/* shared canvas stage */
.sig-host{position:relative;width:100%;overflow:hidden}
.sig-stage{position:absolute;left:0;top:0;transform-origin:0 0}
.sig-canvas{position:absolute;left:0;top:0}
.sig-stage .lbl{position:absolute}

/* 1 · problem: scatter -> gather */
.s-open{position:relative;height:230vh}
.s-open .s-pin{position:sticky;top:0;height:100vh;min-height:680px;overflow:hidden}
.s-field{position:absolute;left:50%;top:52%;width:1440px;transform:translate(-50%,-50%)}
.s-open .s-copy{position:absolute;left:0;right:0;top:calc(64px + 8vh);text-align:center;z-index:3;pointer-events:none;padding:0 24px}
.s-open .s-copy>div{position:absolute;left:24px;right:24px}
.s-open h1,.s-open .s-h1{font:500 clamp(40px,5.6vw,76px)/1.02 var(--serif);letter-spacing:-.025em;margin:0 auto;max-width:980px;text-wrap:balance}
.s-open h1 em{font-style:italic;color:var(--insight)}
.s-open .s-sub{font-size:clamp(17px,1.6vw,19px);color:var(--s-n-ink-2);max-width:660px;margin:20px auto 0}
.s-open .s-cta{position:absolute;left:0;right:0;bottom:64px;text-align:center;z-index:4;padding:0 20px}
.s-open .s-hint{position:absolute;left:0;right:0;bottom:28px;text-align:center;font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#7D7167;z-index:3}
.s-cta .cta-row{justify-content:center;margin-top:0}
.frag{position:absolute;left:0;top:0;max-width:250px;padding:9px 12px 10px;border-radius:10px;background:rgba(40,35,32,.72);border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px -10px rgba(0,0,0,.6);color:#BDB2A7;font:400 13px/1.35 var(--sans);will-change:transform,opacity}
.frag .src{display:block;font:600 9.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#7D7167;margin-bottom:5px}
.frag-tab{border-radius:9px 9px 3px 3px;background:rgba(48,44,52,.75)}
.frag-pdf{background:rgba(236,228,214,.12);font-family:var(--serif);font-style:italic;font-size:14px}
.frag-journal{font-family:var(--serif);font-size:14.5px}
.frag-task .txt{font-weight:500}
.clab{position:absolute;transform:translateX(-50%);font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-shadow:0 0 12px currentColor;opacity:0}
/* calm: no pinning, resolved state, both lines readable */
.s-calm .s-open{height:auto}
.s-calm .s-open .s-pin{position:relative;height:auto;min-height:0;padding:120px 0 80px}
.s-calm .s-open .s-copy,.s-calm .s-open .s-copy>div,.s-calm .s-open .s-cta{position:relative;top:auto;bottom:auto;left:auto;right:auto}
.s-calm .s-open .s-copy .a .s-h1{font-size:clamp(22px,2.4vw,30px);color:var(--s-n-ink-2);margin-bottom:24px}
.s-calm .s-open .s-field{position:relative;left:auto;top:auto;transform:none;margin:0 auto;max-width:1100px;width:100%}
.s-calm .s-open .frag,.s-calm .s-open .s-hint{display:none}
.s-calm .s-open .s-cta{margin-top:24px}

/* 2 · claim */
.s-claim{background:var(--bg);color:var(--ink);padding:clamp(96px,11vw,150px) 0 clamp(88px,10vw,130px)}
.s-claim .s-big{font:500 clamp(48px,7vw,104px)/.98 var(--serif);letter-spacing:-.03em;margin:0;text-wrap:balance}
.s-claim .s-big em{font-style:italic;color:var(--accent-ink)}
.s-claim .lede{max-width:720px;font-size:20px}
.s-labels{display:flex;justify-content:center;gap:10px;margin-top:28px;flex-wrap:wrap;padding:0;list-style:none}
.s-labels li{font:500 14px/1 var(--sans);padding:9px 14px;border-radius:999px;border:1px solid var(--line-strong);color:var(--ink-3);background:var(--surface)}
.s-labels li.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.s-verbs{margin:84px auto 0;max-width:980px;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0;list-style:none}
.s-verbs li{padding:22px 10px;text-align:center;font:500 26px/1 var(--serif);color:var(--ink)}
.s-verbs li small{display:block;font:500 13px/1.4 var(--sans);color:var(--ink-3);margin-top:8px}
.s-verbs-line{font:italic 400 clamp(20px,2vw,24px)/1.35 var(--serif);color:var(--ink-2);margin:26px auto 0;max-width:760px;text-wrap:balance}
.s-everyday{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:72px;text-align:left}
.s-ev{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px 32px;box-shadow:0 1px 2px rgba(60,40,25,.06),0 18px 40px -20px rgba(60,40,25,.25)}
.s-ev .eyebrow{margin-bottom:10px}
.s-ev h3{font:500 30px/1.1 var(--serif);margin:0 0 10px}
.s-ev p{margin:0;color:var(--ink-2)}
.s-mini{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;font-size:15px;color:var(--ink-2)}
.s-mini .r{display:flex;gap:10px;align-items:center;padding:5px 0}
.s-mini .bx{width:15px;height:15px;border-radius:4px;border:1.5px solid #6BA874;flex:none}.s-mini .bx.d{background:#6BA874}
.s-mini .lk{color:var(--accent-ink);border-bottom:1px dotted currentColor}
.s-mini .ts{font:600 12px/1 var(--sans);color:var(--accent-ink);background:rgba(217,119,75,.12);border-radius:6px;padding:4px 6px;flex:none;font-variant-numeric:tabular-nums}
.s-mini .day{font:400 17px/1.5 var(--serif);color:var(--ink);margin:0}

/* 3 · signature graphic (Confluence) */
.s-sig{padding:clamp(80px,9vw,120px) 0 clamp(56px,6vw,80px);background:radial-gradient(50% 60% at 56% 56%,rgba(255,226,176,.08),transparent 70%),radial-gradient(40% 50% at 12% 60%,rgba(185,162,255,.07),transparent 70%),var(--s-night)}
.s-sig .s-head{width:min(1240px,100% - 48px);margin:0 auto 36px}
.s-sig .s-head .lede{margin:18px 0 0;max-width:720px}
.sig1{width:min(1600px,100%);margin:0 auto;position:relative}
.sig1 .tag,.sig1 .stage-t{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#8F8276}
.sig1 .lane{font:500 13px/1.3 var(--sans);color:#C9BDB0;width:300px}
.sig1 .lane b{display:block;font:600 14px/1.2 var(--sans);margin-bottom:2px}
.sig1 .card{left:1010px;top:372px;width:240px;padding:12px 14px;border-radius:12px;background:rgba(32,26,22,.85);border:1px solid rgba(255,226,176,.35);box-shadow:0 0 40px -6px rgba(255,226,176,.35),0 20px 40px -20px #000;font-size:12.5px;line-height:1.45;color:#E8DCCD}
.sig1 .card .k{font:600 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#FFE2B0;margin-bottom:7px}
.sig1 .card b{color:#fff;font-weight:600}
.sig1 .pay{left:1240px;top:640px;width:300px;text-align:right;font:italic 400 24px/1.2 var(--serif);color:#FFF1DE}
.sig1-stage{cursor:pointer}
.sig1 .rail{width:min(1440px,100% - 48px);margin:28px auto 0;display:grid;grid-template-columns:1.05fr 1.25fr 1.25fr 1.05fr 1.1fr;gap:28px;border-top:1px solid rgba(255,255,255,.09);padding:22px 0 0;list-style:none}
.sig1 .rail li{font-size:14.5px;line-height:1.5;color:#BFB3A6;cursor:default;transition:opacity .3s}
.sig1 .rail .n{display:flex;align-items:center;gap:8px;font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px}
.sig1 .rail .n i{width:8px;height:8px;border-radius:50%;box-shadow:0 0 10px currentColor;background:currentColor}
.sig1 .rail .n span{color:#F3ECE3}

/* 4 · how it all connects */
.s-cx{position:relative;height:420vh;background:radial-gradient(50% 40% at 70% 50%,rgba(217,119,75,.10),transparent 70%),var(--s-night)}
.s-cx .s-sticky{position:sticky;top:0;height:100vh;min-height:700px;display:grid;grid-template-columns:minmax(0,480px) minmax(0,760px);gap:60px;justify-content:center;align-items:center;padding:64px 24px 0}
.s-cx h2{font:500 clamp(36px,3.8vw,52px)/1.04 var(--serif);letter-spacing:-.02em;margin:0 0 30px}
.s-steps{list-style:none;margin:0;padding:0;counter-reset:s}
.s-steps li{position:relative;padding:14px 0 14px 46px;border-top:1px solid rgba(255,255,255,.08);color:#8F8276}
.s-steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:15px;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;font:600 12px/1 var(--sans);transition:all .4s}
.s-steps li b{display:block;font:500 21px/1.2 var(--serif);color:#C9BDB0;margin-bottom:4px}
.s-steps li span{display:block;font-size:15px;line-height:1.5;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s,opacity .5s}
.s-steps li.on b{color:#F3ECE3}.s-steps li.on span{max-height:90px;opacity:1;color:#C9BDB0}
.s-steps li.on::before{background:var(--c);border-color:var(--c);color:#1B1715;box-shadow:0 0 18px var(--c)}
.s-cx .s-foot{margin-top:24px;font:italic 400 21px/1.3 var(--serif);color:#FFF1DE}
.s-cx-stage{width:100%;max-width:760px}
.cx-card{position:absolute;left:0;top:0;width:340px;transform-origin:0 0;padding:16px 18px;border-radius:14px;background:#1E1916;border:1px solid rgba(255,255,255,.09);box-shadow:0 30px 60px -24px rgba(0,0,0,.8);color:#C9BDB0;font-size:14.5px;line-height:1.5}
.cx-card h4{margin:0 0 6px;font:500 23px/1.1 var(--serif);color:#F3ECE3}
.cx-card p{margin:0 0 8px}
.cx-k{display:flex;align-items:center;gap:7px;font:600 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.cx-k i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.cx-jour{width:380px}.cx-jour .cx-type{font:400 19px/1.45 var(--serif);color:#EADFD2;min-height:84px}
.cx-link{color:#F3ECE3;border-bottom:1.5px dotted transparent;transition:color .3s,border-color .3s,text-shadow .3s}
.cx-link.on{color:#86B4FF;border-bottom-color:#86B4FF;text-shadow:0 0 14px rgba(134,180,255,.6)}
.cx-caret{display:inline-block;width:1.5px;height:19px;background:#EE9A72;vertical-align:-3px;margin-left:1px}
.cx-ment{font-size:12.5px;color:#8F8276}.cx-ment b{color:#C9BDB0;font-weight:600}
.cx-todo{display:flex;gap:9px;align-items:center;padding:6px 8px;margin:0 -8px!important;border-radius:8px;color:#EADFD2}
.cx-box{flex:none;width:15px;height:15px;border-radius:4px;border:1.5px solid #8FD49A}
.cx-task{width:360px}.cx-row{display:flex;gap:9px;align-items:flex-start;padding:7px 8px;margin:0 -8px;border-radius:8px;flex-wrap:wrap}
.cx-row .cx-box{margin-top:3px}.cx-row em{font-style:normal;color:#8F8276;margin-left:4px}
.cx-row small{flex-basis:100%;padding-left:24px;font-size:11.5px;color:#8FD49A;margin-top:-3px}
.cx-row.done .cx-box{background:#8FD49A}.cx-row.done span:last-child{color:#7D7167;text-decoration:line-through}
.cx-row b{color:#86B4FF;font-weight:500}
.cx-ins{position:absolute;left:0;top:0;width:300px;padding:13px 15px;border-radius:12px;background:rgba(32,26,22,.9);border:1px solid rgba(255,226,176,.4);box-shadow:0 0 50px -8px rgba(255,226,176,.4);font-size:13.5px;line-height:1.5;color:#E8DCCD;opacity:0}
.cx-ins b{color:#fff;font-weight:600}
.s-calm .s-cx{height:auto}
.s-calm .s-cx .s-sticky{position:relative;height:auto;min-height:0;padding:110px 24px 90px}
.s-calm .s-steps li span{max-height:none;opacity:1;color:#C9BDB0}
.s-calm .s-steps li b{color:#F3ECE3}

/* 5 · proof */
.s-proof{padding:clamp(96px,11vw,130px) 0 clamp(88px,10vw,120px);background:radial-gradient(60% 50% at 50% 40%,rgba(217,119,75,.14),transparent 70%),#141110}
.s-shots{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;width:min(1280px,100% - 48px);margin:56px auto 0;align-items:start}
.s-shots figure{margin:0}
.s-shots .window{background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 100px -30px rgba(0,0,0,.8),0 0 120px -20px rgba(217,119,75,.22);outline:0;cursor:zoom-in}
.s-shots .s-ask img{height:100%;max-height:432px;width:100%;object-fit:cover;object-position:top}
.s-shots figcaption{font-size:14.5px;color:#8F8276;margin-top:12px}
.s-shots figcaption b{color:#C9BDB0;font-weight:600}
.s-trust{margin:88px auto 0;max-width:1000px;text-align:center}
.s-trust .s-line{font:500 clamp(26px,3vw,34px)/1.25 var(--serif);letter-spacing:-.01em;margin:0;text-wrap:balance}
.s-trust .s-line em{font-style:italic;color:var(--insight)}
.s-trust .nb{white-space:nowrap}
.s-quote{max-width:720px;margin:40px auto 0;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:26px 28px;background:rgba(255,255,255,.03);text-align:left}
.s-quote p{font:400 21px/1.45 var(--serif);margin:0 0 14px;color:#EADFD2}
.s-quote cite{font:500 14px/1.4 var(--sans);font-style:normal;color:#8F8276}
.s-quote cite a{color:#EE9A72}

/* 6 · who */
.s-who{background:var(--bg);color:var(--ink);padding:clamp(96px,11vw,130px) 0}
.s-pers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px}
.s-per{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px 24px 28px;position:relative;overflow:hidden}
.s-per::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--c)}
.s-per .eyebrow{color:var(--ink-3)}
.s-per h3{font:500 25px/1.15 var(--serif);margin:0 0 10px;text-wrap:balance}
.s-per p{margin:0;font-size:15.5px;color:var(--ink-2)}
.s-per ul{margin:16px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--ink-3)}
.s-per li{padding:5px 0;border-top:1px solid var(--line)}

/* 7 · depth */
.s-depth{padding:clamp(100px,11vw,140px) 0 clamp(90px,10vw,130px);overflow:hidden}
.s-fam{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:1040px;margin:52px auto 0;padding:0;list-style:none}
.s-fam li{font:500 15px/1 var(--sans);padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);color:#C9BDB0}
.s-fam li b{color:#FFE2B0;font-weight:600;margin-left:8px}
.js .s-depth:not(.in) .s-fam li{opacity:0;transform:translateY(14px) scale(.96)}
.s-fam li{transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
.s-total{margin:34px 0 0;font:italic 400 22px/1.3 var(--serif);color:#FFF1DE;transition:opacity .8s 1.2s}
.js .s-depth:not(.in) .s-total{opacity:0}
.s-day1{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px;margin:56px auto 0;text-align:left}
.s-day1 div{border-top:1px solid rgba(255,255,255,.12);padding-top:18px}
.s-day1 b{display:block;font:500 24px/1.2 var(--serif);color:#F3ECE3;margin-bottom:6px}
.s-day1 span{color:#BFB3A6;font-size:15.5px}
.s-calm .s-fam li,.s-calm .s-total{opacity:1!important;transform:none!important;transition:none}

/* 8 · payoff (replaces the old final CTA) */
.final.s-final{background:radial-gradient(50% 60% at 50% 100%,rgba(217,119,75,.28),transparent 70%),var(--s-night);color:var(--s-n-ink)}
.s-final .s-h2{font-size:clamp(44px,6vw,84px)}
.s-final .lede{color:var(--s-n-ink-2)}

/* responsive */
@media (max-width:1100px){
  .s-pers{grid-template-columns:1fr 1fr}
  .s-cx .s-sticky{grid-template-columns:minmax(0,380px) minmax(0,540px);gap:36px}
  .s-cx .s-foot{font-size:18px}
  .sig1 .rail{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .s-cx .s-sticky{grid-template-columns:1fr;gap:18px;align-content:center;padding-top:76px}
  .s-cx .s-copy{max-width:640px;margin:0 auto;width:100%}
  .s-cx h2{margin-bottom:14px}
  .s-cx .s-foot{display:none}
  .s-cx-stage{margin:0 auto;max-width:560px}
  .s-field{width:1000px}
  .s-open .s-copy{top:calc(64px + 5vh)}
  .s-verbs{grid-template-columns:repeat(3,1fr)}
  .s-verbs li{font-size:22px}
  .s-everyday,.s-shots,.s-day1{grid-template-columns:1fr}
  .sig1 .lane,.sig1 .card,.sig1 .pay{display:none}
  .sig1 .stage-t{font-size:20px}
  .sig1 .rail{grid-template-columns:1fr 1fr;gap:20px}
  .s-cx .s-steps li{padding:10px 0 10px 42px}
  .s-cx .s-steps li b{font-size:18px}
  .s-cx .s-steps li span{font-size:14px}
  .s-cx-stage{max-width:420px}
}
@media (max-width:560px){
  .s-pers{grid-template-columns:1fr}
  .s-verbs{grid-template-columns:1fr 1fr}
  .s-ev{padding:24px}
  .sig1 .rail{grid-template-columns:1fr}
  .s-open .s-cta{bottom:56px}
  .s-cx h2 br{display:none}
}