/* The homepage's How it works section only; the mode switcher and sticky header stay in
   intelligence.css, which every page loads. */
/* How it works (founder, 9 Oct 2026): a two-tone intro, then three chapters beside a sticky rail
   (the Attio pattern). Each chapter is a loop of real app components on a quiet stage. */
.intelligence{max-width:1440px;margin:clamp(80px,11vh,128px) auto 0;padding:0 var(--gutter,54px) 70px;scroll-margin-top:calc(102px - var(--header-clearance,0px))}
.how-intro{max-width:1100px;margin:0 0 clamp(52px,7vh,84px)}
.how-intro h2{font-size:clamp(26px,2.5vw,36px);line-height:1.15;letter-spacing:-.03em;font-weight:500;color:#86868b;text-wrap:pretty}
.how-intro h2 strong{font-weight:500;color:#1d1d1f}
.how-layout{display:grid;grid-template-columns:230px minmax(0,1fr);column-gap:clamp(40px,5vw,84px)}
.how-rail ol{position:sticky;top:calc(var(--header-clearance,96px) + 28px);display:grid;gap:2px;margin:0;padding:0;list-style:none}
.how-rail a{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 0;font-size:14px;font-weight:500;line-height:1.3;color:#8b928d;transition:color .2s}
.how-rail a:hover{color:#1d1d1f}
.how-rail__n{display:grid;flex:none;place-items:center;width:26px;height:26px;border:1px solid #dfe3df;border-radius:50%;font-size:12px;font-variant-numeric:tabular-nums;color:#6e6e73;transition:background .2s,color .2s,border-color .2s}
.how-rail a.is-active{color:#1d1d1f}.how-rail a.is-active .how-rail__n{background:#1d1d1f;border-color:#1d1d1f;color:#fff}
.intelligence-claims{display:flex;flex-direction:column;gap:clamp(96px,13vh,150px)}
.intelligence-claim{display:block;scroll-margin-top:calc(120px - var(--header-clearance,0px))}
.claim-copy{max-width:660px;margin-bottom:30px}
.claim-label{font-size:13px;font-weight:550;color:#418363;margin-bottom:12px}
.claim-copy h3{font-size:clamp(28px,2.6vw,38px);line-height:1.1;letter-spacing:-.032em;font-weight:500;color:#1d1d1f}
.claim-description{font-size:17px;line-height:1.6;letter-spacing:-.1px;color:#4f5753;margin-top:14px;max-width:620px}
.how-stage{position:relative;aspect-ratio:16/11.4;overflow:hidden;isolation:isolate;border-radius:22px;background:radial-gradient(130% 100% at 0% 0%,#f8f9f8 0%,#f0f3f0 55%,#e8ece8 100%);box-shadow:inset 0 0 0 1px #1d1d1f0a}
.how-mode{position:absolute;inset:0}
.how-mode[data-film-mode=construction],body[data-site-mode=construction] .how-mode[data-film-mode=operation]{display:none}
body[data-site-mode=construction] .how-mode[data-film-mode=construction]{display:block}
.intelligence-bottom{display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:1px solid #e0e0e0;margin-top:clamp(80px,11vh,120px);padding-top:25px;min-height:73px}
.intelligence-bottom>p{font-size:16px;line-height:1.45;color:#757575;letter-spacing:-.2px}
.intelligence-bottom>a{display:flex;align-items:center;gap:25px;font-size:14px;line-height:1.4;font-weight:500;min-height:44px;padding:4px 0;color:#1f1f1f}
.intelligence-bottom>a>span{font-size:22px;transition:transform .22s}
.intelligence-bottom>a:hover>span{transform:translate(3px,-3px)}
/* App components, copied from the app's own (ui/src/components: project-drive, status-chip,
   planning-condition-row, provenance-mark, contract-review-journey, chase-control): Figtree and
   JetBrains Mono, the Drive's light neutrals (ink #1b1b1b, muted #636363, border #e0e0e0) and its
   status colours. */
.how-stage{--ink:#1b1b1b;--mut:#636363;--line:#e0e0e0;--soft:#f1f1f1;--done:#2f7d50;--soon:#885f30;--soon-fill:#c8924a;--over:#bc4d45;--exp:#90291e}

.ui-chev{width:12px;height:12px;color:var(--mut)}
.ui-doc{position:relative;display:block;width:16px;height:16px;color:var(--mut)}.ui-doc svg{width:16px;height:16px}.ui-doc--empty{color:#6363634d}
.ui-fmt{position:absolute;left:-3px;bottom:-1px;padding:0 2px;border-radius:2px;font:700 6.5px/1.35 Figtree,sans-serif;color:#fff;background:#5f5f5f}.ui-fmt--pdf{background:#ba3b32}
.ui-pack{display:grid;place-items:center;width:20px;height:20px;color:var(--mut)}.ui-pack svg{width:16px;height:16px}
.ui-src{display:inline-flex;flex:none;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--line);border-radius:8px;background:#fff;font:400 12px 'JetBrains Mono',monospace;font-style:normal;color:var(--mut)}.ui-src sup{font:500 9px Figtree,sans-serif;margin-left:1px}
.ui-who{display:flex;align-items:center;gap:6px;min-width:0;font-size:12px;line-height:1.35;color:var(--mut)}.ui-who>span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-who small{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis}
.ui-hat{flex:none;min-width:26px;padding:3px 5px;border:1px solid var(--line);border-radius:3px;font:700 8px/1 'JetBrains Mono',monospace;letter-spacing:.1em;font-style:normal;text-align:center;color:var(--ink)}
.ui-mark{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;line-height:16px;white-space:nowrap}.ui-mark svg{width:11px;height:11px;flex:none}.ui-mark span{font-weight:500;opacity:.82;color:var(--ink)}
.ui-mark--done svg{color:var(--done)}
.ui-ring{display:inline-flex;align-items:center;gap:7px}.ui-ring svg{width:20px;height:20px;transform:rotate(-90deg)}
.ui-ring circle{fill:none;stroke-width:3}.ui-ring .ui-ring-track{stroke:#d9d9d9}
.ui-ring b{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}.ui-ring small{margin-left:-6px;font-size:12px;color:var(--mut)}
.ui-due{font-size:11px;line-height:16px;color:var(--mut)}.ui-due b{display:block;font-weight:500}

@media(max-width:1100px){.intelligence{padding-bottom:56px}.how-layout{grid-template-columns:1fr}.how-rail{display:none}}
@media(max-width:700px){
 .intelligence{padding-bottom:40px;scroll-margin-top:calc(135px - var(--header-clearance,0px))}
 .how-intro h2{font-size:24px}
 .intelligence-claims{gap:72px}
 .claim-copy h3{font-size:28px}.claim-description{font-size:16px}
 .how-stage{border-radius:16px}
 .intelligence-bottom{display:block}.intelligence-bottom>a{margin-top:10px;width:max-content;max-width:100%}
}
.ui-src.is-open{background:var(--soft);color:var(--ink)}
/* The § hover card (provenance-mark.tsx): 400px, sticky header, sources with "Open source". */
.ui-pv{width:min(400px,44%);overflow:hidden;color:var(--ink);font-size:12px;line-height:1.45;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 3px rgb(33 33 33/.1),0 5px 12px -4px rgb(33 33 33/.18),0 44px 80px -40px #192b2073}
.ui-pv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.ui-pv-head b{display:block;font-size:13px;font-weight:600;line-height:20px}.ui-pv-head small{display:block;margin-top:2px;font-size:12px;color:var(--mut)}
.ui-pv-x{font-size:16px;line-height:1;color:var(--mut)}
.ui-pv-h{padding:12px 16px 0;font-size:12px;font-weight:600}
.ui-pv-src{padding:10px 16px 6px}
.ui-pv-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ui-pv-top span{font-size:11px;font-weight:500;color:var(--mut)}
.ui-pv-top em{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:0 8px;border-radius:9.6px;font-size:12px;font-style:normal;font-weight:500;color:var(--ink);background:var(--soft)}
.ui-out{width:13px;height:13px}
.ui-pv-src p{margin-top:2px;font-size:12px;font-weight:500;line-height:20px}.ui-pv-src p span{font-weight:400;color:var(--mut)}
.ui-pv-src blockquote{margin:6px 0 0;padding-left:12px;border-left:2px solid var(--line);font-size:12px;line-height:20px;color:var(--mut)}
/* Chapter 1 on a loop (founder, 11 Oct 2026: "simple, clear and elite"): a source lifts, its
   requirement curves into the Drive and settles as a row, three in turn; the pointer opens the
   first row's § and each source lights with its line. 10 s on a fixed canvas (960 × 620, phones
   360 × 560) that intelligence.js scales (--fit); reduced motion shows the finished picture. */
.how-stage--feed,.how-stage--sort,.how-stage--dates{aspect-ratio:auto}
.how-stage--feed .how-mode,.how-stage--sort .how-mode,.how-stage--dates .how-mode{position:relative;inset:auto}
.ui2{--cw:960;--ch:620;--fit:1.085;--ts:15px;position:relative}
@media(max-width:1439px){.ui2{--fit:1}}
@media(max-width:1339px){.ui2{--fit:.92}}
@media(max-width:1199px){.ui2{--fit:.82}}
@media(max-width:1100px){.ui2{--fit:.95}}
@media(max-width:900px){.ui2{--fit:.8}}
.ui2-canvas{position:relative;width:calc(var(--cw) * 1px);height:calc(var(--ch) * 1px);zoom:var(--fit);color:var(--ink);font-size:13px;line-height:1.4;text-align:left}
.ui2-sep{width:12px;height:12px;color:#6363634d}
/* The project Drive (project-drive, drive-table, drive-filter-bar, status-chip), shared by chapters 1 and 2. */
.dv{position:absolute;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 3px rgb(33 33 33/.08),0 30px 60px -36px #192b2066;font-size:13px}
.dv-tools{display:flex;align-items:center;gap:8px;height:56px;padding:0 16px;border-bottom:1px solid var(--line)}
.dv-search{display:flex;align-items:center;gap:8px;overflow:hidden;white-space:nowrap;width:220px;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:8px;font-size:12px;color:var(--mut)}
.dv-search svg,.dv-btn svg{flex:none;width:14px;height:14px}.dv-btn--line svg{width:12px;height:12px}
.dv-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;font-size:12px;font-weight:500;color:var(--mut);white-space:nowrap}.dv-btn--line{border:1px solid var(--line)}.dv-gap{flex:1}.dv-btn--add{color:var(--ink)}.dv-btn--new{padding:0 16px;background:var(--ink);color:#fff}
.dv-crumb{display:flex;align-items:center;gap:4px;height:33px;margin:0;padding:0 16px;border-bottom:1px solid var(--line);font-size:11px;color:var(--mut)}.dv-crumb .is-here{font-weight:600;color:var(--ink)}
.dv-head,.dv-f,.dv-r{display:grid;grid-template-columns:44fr 13fr 16fr 12fr 15fr 44px;align-items:center}
.dv-head{height:33px;border-bottom:1px solid #e0e0e04d;font-size:11px;font-weight:500;color:var(--mut)}
.dv-head>*,.dv-f>*,.dv-r>*{min-width:0;padding:0 12px}
.dv-view{position:relative;height:462px;overflow:hidden}
.dv-f,.dv-r{border-bottom:1px solid #e0e0e033}.dv-f{height:52px}.dv-r{height:50px;transition:opacity .35s,transform .35s}
.dv-fname,.dv-name{display:flex;align-items:center;gap:6px}.dv-d1 .dv-fname,.dv-d1 .dv-name{padding-left:32px}.dv-d2 .dv-name{padding-left:52px}
.dv-chev{flex:none;width:12px;height:12px;color:var(--mut)}.dv-chev.is-open{transform:rotate(90deg)}.dv-folder{flex:none;width:16px;height:16px;color:#73737373}
.dv-fname b,.dv-name b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dv-fname b{font-weight:500}.dv-name b{font-weight:400}
.dv-count{margin-left:2px;font-size:10px;font-style:normal;color:#73737380;font-variant-numeric:tabular-nums}
.dv-sp{flex:none;width:12px}.dv-ico{flex:none;width:16px;height:16px;color:#7373734d}.dv-pk{display:grid;flex:none;place-items:center;width:28px;height:28px;margin:0 -6px;color:var(--mut)}.dv-pk svg{width:16px;height:16px}
.dv-applies{display:flex;align-items:center;gap:5px;font-size:12px;line-height:16px;color:var(--mut)}.dv-applies>span{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dv-st{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;font-size:11.5px;font-weight:500;line-height:16px;white-space:nowrap}.dv-st svg{width:10px;height:10px;color:#737373}.dv-st span{color:var(--ink);opacity:.82}
.dv-r .ui-who>span{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:16px}.dv-due{overflow:hidden;font-size:12px;color:var(--mut);white-space:nowrap;text-overflow:ellipsis}.dv-need{font-weight:500;color:var(--soon)}.dv-due .dv-need{display:block;line-height:16px;white-space:normal}
/* Chapter 1, fourth take (12 Oct 2026): the law becomes your list. A 1200 × 675 stage (phones
   360 × 560) under a camera (.c1-cam): the source pages on the left, the Drive on the right, the
   flying words over both. intelligence.js poses the camera, pages, words and pointer ([data-k]),
   lays out the Drive's lines ([data-rows]) and flips states ([data-at]) on the loop's clock
   (c1-clock); without motion the finished picture stays: the Drive filled, the card open, and the
   stack of pages the loop opens on (--t/--o, --tm/--om on phones). */
.ui2--feed{--cw:1200;--ch:675}
.c1-cam,.c1-desk,.c1-fly{position:absolute;inset:0}.c1-desk{z-index:1}
.c1-cam{transform:var(--t);transform-origin:0 0}
.c1-fly{z-index:6;pointer-events:none}
.c1-win{z-index:3;top:22px;left:400px;width:778px;height:720px}
/* A source page: A4 paper, typeset as such documents are, with the app's highlight
   (annotation-overlay: #fbbf24 at 30% inside a #f59e0b edge). */
.c1-page{position:absolute;top:0;left:0;width:420px;height:594px;overflow:hidden;transform:var(--t);opacity:var(--o);transform-origin:0 0;background:#fff;border-radius:2px;box-shadow:0 0 0 1px #1b1b1b12,0 2px 4px #1b1b1b0a,0 22px 44px -22px #1f2a2270;color:#1e1e1e}
.c1-page--law,.c1-g--law{font:12px/17.5px 'Times New Roman',Tinos,'Liberation Serif',Times,serif}
.c1-page--contract,.c1-g--contract{font:12px/18px 'Times New Roman',Tinos,'Liberation Serif',Times,serif}
.c1-page--notice,.c1-g--notice{font:11.5px/17px Arial,Helvetica,'Liberation Sans',sans-serif}
.c1-page--sched,.c1-g--sched{font:13px/18px Figtree,sans-serif}
.c1-page--sched{border-radius:12px;color:var(--ink)}
.c1-rh{position:absolute;top:26px;left:44px;right:40px;display:flex;justify-content:space-between;gap:16px;margin:0;font:400 8.5px/1 Arial,Helvetica,sans-serif;color:#8b8b8b}.c1-rh span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.c1-page--sched .c1-rh{left:28px;right:28px;font:500 11px/1 Figtree,sans-serif;color:var(--mut)}
.c1-ln{position:absolute;margin:0;white-space:nowrap}.c1-ln i{position:absolute;top:0;font-style:normal}
.c1-ln--h{font-weight:700}.c1-ln--r{font-style:italic;color:#5a5a5a}
.c1-ln--set{color:transparent}.c1-ln--set i{color:#1e1e1e}.c1-ln--set::after{content:"";position:absolute;left:0;top:50%;width:var(--w);height:6px;margin-top:-1.5px;border-radius:3px;background:#1e1e1e1f}.c1-ln--r.c1-ln--set::after{background:#1e1e1e12}
.c1-lh{position:absolute;top:48px;left:44px;right:40px;display:grid;gap:2px;padding-bottom:10px;border-bottom:1px solid #e4e4e4;font:10.5px/1.35 Arial,Helvetica,sans-serif;color:#5a5a5a}.c1-lh b{font-size:15px;line-height:1.3;color:#1e1e1e}
.c1-st{position:absolute;top:58px;left:28px;margin:0;font-size:15px;font-weight:600}
.c1-sr{position:absolute;left:0;right:0;height:44px;margin:0;border-bottom:1px solid #e0e0e066}.c1-sr>span{position:absolute;top:13px;white-space:nowrap}.c1-sr--h{font-size:11px;font-weight:500;color:var(--mut)}
.c1-hl{position:relative;z-index:0}
.c1-hl::before{content:"";position:absolute;z-index:-1;inset:0 -2px;background:#fbbf244d;box-shadow:inset 0 0 0 1.5px #f59e0bcc;transform-origin:0 50%}
.is-live .c1-hl:not(.is-on)::before{opacity:0;transform:scaleX(0);transition:opacity .3s,transform 0s .3s}
.is-live .c1-hl.is-on::before{transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .06s,background .3s,box-shadow .3s}
/* A highlighted line's words in flight; the lead line of a row turns into its name. */
.c1-g{position:absolute;top:var(--y);left:var(--x);transform-origin:0 0;white-space:nowrap;color:#1e1e1e}.c1-gi{opacity:0;transform-origin:0 0}
.c1-g--spark .c1-ga{color:transparent;box-shadow:inset 0 0 0 1.5px #f59e0b,0 0 14px 2px #fbbf2459}
.c1-ga{display:inline-block;margin:0 -3px;padding:0 3px;border-radius:2px;background:#fbbf2466;box-shadow:inset 0 0 0 1.5px #f59e0bcc,0 8px 20px -8px #b4530980;transition:opacity .22s}
.c1-gb{position:absolute;top:0;left:0;font-family:Figtree,sans-serif;font-weight:400;color:var(--ink);opacity:0;transition:opacity .22s}
.c1-g.is-on .c1-ga{opacity:0}.c1-g.is-on .c1-gb{opacity:1}
/* The Drive while it plays: lines stacked by intelligence.js; a row arrives warm and its cells
   settle in; a row cited again glows; folders open as their first line lands. */
.c1-win .dv-view{height:600px}
.c1-win .dv-body{position:relative;transform:translateY(var(--sy))}
.is-live .c1-win [data-rows]>*{position:absolute;top:0;left:0;right:0}
.is-live .c1-win .dv-r>*{opacity:0;transform:translateX(-5px);transition:opacity .2s,transform .4s cubic-bezier(.22,1,.36,1)}
.is-live .c1-win .dv-r.is-on>*{opacity:1;transform:none}.is-live .c1-win .dv-r.is-on>:nth-child(2){transition-delay:.07s}.is-live .c1-win .dv-r.is-on>:nth-child(3){transition-delay:.14s}.is-live .c1-win .dv-r.is-on>:nth-child(4){transition-delay:.21s}.is-live .c1-win .dv-r.is-on>:nth-child(5){transition-delay:.28s}
.is-live .c1-win .dv-r.is-on{animation:c1-warm 1s ease-out}.is-live .c1-win .dv-r[data-first].is-on{animation-duration:1.8s}
.c1-win .dv-r{transition:background .8s}.is-live .c1-win .dv-r.is-lit{background:#fbbf2426;transition:background .12s}
.c1-win .ui-src{transition:transform .25s,background .25s}.is-live .c1-win .dv-r.is-lit .ui-src{transform:scale(1.12);background:#fff7e0}
.c1-win .dv-chev{transition:transform .25s}.is-live .c1-win .dv-chev[data-at]:not(.is-on){transform:none}
.is-live .c1-win .dv-count[data-at]:not(.is-on),.is-live .c1-win .ui-src sup[data-at]:not(.is-on){display:none}
.c1-win .ui-src.c1-mark{background:var(--soft);color:var(--ink)}.is-live .c1-win .ui-src.c1-mark:not(.is-on){background:#fff;color:var(--mut)}
/* The § card (provenance-mark.tsx): each source lights with its page in the fan. */
.c1-card{position:absolute;z-index:5;top:var(--cy);left:var(--cx);width:400px;transform-origin:20px 0;transition:opacity .28s,transform .32s cubic-bezier(.22,1,.36,1)}
.is-live .c1-card:not(.is-on){opacity:0;transform:translateY(-6px) scale(.97)}
.c1-cite{transition:background .3s}.is-live .c1-cite.is-on{background:#fbbf241f}
.c1-card .ui-pv-top em{transition:background .15s,transform .15s}.c1-card .ui-pv-top em.is-on{background:#e4e4e4;transform:scale(.96)}
.ui-pv-src blockquote.is-clamped{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ui-pv-more{display:inline-block;margin-top:4px;font-size:12px;font-weight:500;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.ui-pv-why{margin-top:4px;font-size:12px;line-height:1.6;color:var(--mut)}.ui-pv-note{margin-top:2px;font-size:12px;font-style:italic;color:var(--mut)}
.ui-pv-foot{margin:4px 0 0;padding:12px 16px;border-top:1px solid var(--line);font-size:12px;font-weight:500;color:var(--mut)}
.c1-pointer{position:absolute;z-index:8;top:0;left:0;width:20px;height:20px;opacity:0;transform-origin:0 0;filter:drop-shadow(0 2px 3px #0004)}.c1-pointer svg{display:block;width:100%;height:100%}
@media(prefers-reduced-motion:no-preference){
 .claim-visual:not([data-chapter-reveal=pending]) .ui2--feed{animation:c1-clock 14s infinite}
}
@keyframes c1-clock{to{opacity:1}}
@keyframes c1-warm{0%{background:#fbbf2438}100%{background:#fbbf2400}}
.sx-scope{flex:none;width:12px;height:12px}
.sx-swap{display:inline-grid;min-width:0}.sx-swap>*{grid-area:1/1;min-width:0;transition:opacity .3s}.sx-swap>.sx-a{opacity:0}
.is-live .sx-swap:not(.is-on)>.sx-a{opacity:1}.is-live .sx-swap:not(.is-on)>.sx-b{opacity:0}
/* Chapter 2, third take (12 Oct 2026): every file finds its place. Add documents, the dropped
   files' wall, one certificate read close up, Notifications' Document sorting row and the AI
   placement card, over chapter 1's Drive, on a 16 s loop (c2-clock); without motion, the review. */
.ui2--sort{--cw:1200;--ch:675}
.c2-win{top:22px;left:400px;width:778px;height:720px}.c2-win .dv-view{height:600px}.c2-win .dv-body{transform:translateY(var(--sy))}
.c2-win .dv-head,.c2-win .dv-f,.c2-win .dv-r{grid-template-columns:43fr 12fr 15fr 12fr 18fr 44px}.dv-i{height:44px}.dv-i .dv-name{padding-left:74px}.dv-i .sx-swap{align-items:center}
.c2-home{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--mut);white-space:nowrap}.c2-home svg{width:11px;height:11px}.c2-home small{margin-left:4px;font:500 9px 'JetBrains Mono',monospace;color:#7373739e}
.c2-clip{display:inline-flex;align-items:center;gap:3px;height:24px;padding:0 6px;font-size:12px;color:var(--mut);transition:opacity .3s}.c2-clip svg{width:13px;height:13px}.is-live .dv-i:not(.is-on) .c2-clip{opacity:0}
.c2-exp{color:var(--mut)}
.c2-win .dv-r{transition:background .8s}.is-live .c2-win .dv-r.is-lit{background:#fbbf2426;transition:background .12s}
.c2-wall{position:absolute;display:grid;gap:var(--gy)}.c2-wall p{display:flex;gap:var(--gx);margin:0}.c2-wall--m{display:none}
.c2-wall i{position:relative;width:var(--tw);height:var(--th);border-radius:2px;background:repeating-linear-gradient(#fff 0 3px,#dedede 3px 4px) 3px 3px/calc(100% - 6px) 52% no-repeat #fff;box-shadow:0 0 0 1px #1b1b1b17,0 1px 2px #1b1b1b0d;opacity:0;transition:opacity .3s,transform .35s cubic-bezier(.4,0,.2,1)}
.c2-wall i::after{content:"";position:absolute;left:2px;bottom:2px;width:55%;height:4px;border-radius:1px;background:#ba3b32bf}.c2-wall i:nth-child(6n+2)::after{background:#1f7a46bf}.c2-wall i:nth-child(7n+3)::after{background:#6b6b6bbf}.c2-wall i:nth-child(11n+5)::after{background:#3d3d3dbf}
.c2-wall i:nth-child(3n+2){transition-delay:.05s}.c2-wall i:nth-child(3n){transition-delay:.1s}
.c2-wall .c2-flag{opacity:1;box-shadow:0 0 0 1.5px #f59e0b,0 0 0 4px #fbbf2440}
.is-live .c2-wall i{opacity:0;transform:scale(.4)}.is-live .c2-wall p.is-on i{opacity:1;transform:none}.is-live .c2-wall p.is-on i[data-at]:not(.is-on){opacity:0}
.is-live .c2-wall .c2-flag.is-on{opacity:1;transform:none}.is-live .c2-wall p.is-on .c2-flag{box-shadow:0 0 0 1px #1b1b1b17}
.c2-note,.c2-rev,.c2-toast{position:absolute;background:#fff;border:1px solid var(--line);box-shadow:0 1px 3px #2121211a,0 22px 48px -20px #192b2066;transition:opacity .3s,transform .35s cubic-bezier(.22,1,.36,1)}
.c2-note{top:30px;left:808px;width:356px;padding:10px;border-radius:14px}
.is-live .c2-note:not(.is-on),.is-live .c2-toast:not(.is-on){opacity:0;transform:translateY(-6px)}
.c2-nr{display:flex;align-items:flex-start;gap:10px;padding:8px}.c2-nb{flex:1;min-width:0}
.c2-nt{display:grid;flex:none;place-items:center;width:32px;height:32px;margin-top:2px;border-radius:8px;background:#2f7d501a;color:#2f7d50;transition:background .3s,color .3s}.c2-nt svg{width:16px;height:16px}.is-live .c2-nt:not(.is-on){background:var(--soft);color:var(--ink)}
.c2-nh{display:flex;align-items:center;gap:4px}.c2-nh b{flex:1;font-size:13px;font-weight:600;line-height:1.2}.c2-nh svg{width:13px;height:13px}.c2-nx{display:grid;place-items:center;width:28px;height:28px;color:var(--mut)}
.c2-spin{color:var(--mut);animation:c2-spin 1s linear infinite}.c2-tick{color:#2f7d50}
.c2-nd{display:grid;margin-top:2px;font-size:12px;line-height:1.35;color:var(--mut)}.c2-nd b{font-weight:400}
.c2-bar{display:none;height:4px;margin-top:8px;overflow:hidden;border-radius:9px;background:#1b1b1b0f}.c2-bar i{display:block;height:100%;border-radius:9px;background:var(--ink)}.is-live .c2-bar.is-on{display:block}
.c2-act{display:inline-flex;align-items:center;min-height:36px;margin-top:6px;padding:4px 8px;border-radius:6px;background:var(--soft);font-size:12px;font-style:normal;font-weight:600;transition:background .15s,transform .15s}.is-live .c2-act:not(.is-on){display:none}.c2-act.is-lit,.c2-rp em.is-lit{background:#e2e2e2;transform:scale(.96)}
.c2-veil{position:absolute;inset:-60px;background:#0000001a;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .45s}.is-live .c2-veil.is-on{opacity:1}
.c2-dlg{position:absolute;top:0;left:0;width:448px;overflow:hidden;transform:var(--t);opacity:var(--o);transform-origin:0 0;background:#fff;border-radius:12px;box-shadow:0 0 0 1px #1b1b1b1a,0 30px 70px -24px #0000004d}
.c2-dw{display:grid;width:100%}.is-live .c2-dw.is-on>.sx-a{display:none}
.c2-dt{position:relative;display:flex;align-items:center;gap:12px;margin:0;padding:20px 48px 12px 20px}.c2-dt b{display:block;font-size:14px;font-weight:600}.c2-dt small{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--mut)}.c2-dt i{position:absolute;top:12px;right:14px;font-size:16px;font-style:normal;color:var(--mut)}
.c2-ico{display:grid;flex:none;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--soft)}.c2-ico svg{width:20px;height:20px}.c2-dt--busy{padding:26px 48px 26px 20px}.c2-dt--busy svg{animation:c2-pulse 1.2s ease-in-out infinite}
.c2-dz{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 20px 8px;padding:32px 16px;border:1px dashed #e0e0e0;border-radius:10px;background:#f7f7f7;transition:border-color .2s,background .2s}.c2-dz.is-lit{border-color:#1b1b1b66;background:#eee}
.c2-up{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--soft)}.c2-up svg{width:24px;height:24px;color:#1b1b1b99}.c2-dz b{font-size:12px;font-weight:500}.c2-dz small,.c2-df small{font-size:11px;color:var(--mut)}
.c2-df{display:flex;align-items:center;justify-content:space-between;margin:0;padding:16px 20px;border-top:1px solid #e0e0e033}.c2-df span{padding:6px 12px;font-size:12px;font-weight:500;color:var(--mut)}
.c2-drag{position:absolute;top:0;left:0;width:60px;height:60px;opacity:0;transform-origin:0 0}.c2-drag i{position:absolute;top:8px;left:10px;display:grid;place-items:center;width:40px;height:48px;border-radius:4px;background:#fff;box-shadow:0 0 0 1px #1b1b1b1f,0 6px 14px -6px #0006}
.c2-drag i:nth-child(2){transform:translate(5px,-4px) rotate(5deg)}.c2-drag i:nth-child(3){transform:translate(-4px,-6px) rotate(-6deg)}.c2-drag .ui-doc,.c2-drag .ui-doc svg{width:22px;height:22px}
.c2-drag>b{position:absolute;top:-6px;left:42px;padding:2px 7px;border-radius:99px;background:#e5484d;color:#fff;font-size:11px;font-weight:700}.c2-dp{position:absolute;top:36px;left:32px;width:20px;height:20px;filter:drop-shadow(0 2px 3px #0004)}.c2-dp svg{display:block;width:100%;height:100%}
.c2-rev{top:104px;left:586px;width:452px;padding:20px;border-radius:14px;font-size:12px}.is-live .c2-rev:not(.is-on){opacity:0;transform:translateY(10px) scale(.98)}
.c2-rh{display:flex;align-items:flex-start;gap:12px;margin:0}.c2-rh span{flex:1;min-width:0}.c2-rh b{display:block;font-size:14px;font-weight:600;line-height:24px}.c2-rh small{display:block;margin-top:2px;color:var(--mut)}
.c2-rh em,.c2-rs em,.c2-rk em{flex:none;padding:6px 10px;border:1px solid var(--line);border-radius:8px;font-style:normal;font-weight:500}.c2-cb{flex:none;width:16px;height:16px;margin:4px 0 0 4px;border:1px solid #c9c9c9;border-radius:4px}
.c2-ra{margin:16px 0 0 40px;font-size:14px;font-weight:500}.c2-rm{margin:12px 0 0 40px;padding:12px;border-radius:8px;background:#f1f1f180}.c2-rm>small{display:block;color:var(--mut)}.c2-rm>b{display:block;margin-top:4px;font-size:14px;font-weight:500}
.c2-rp{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}.c2-rp em{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid #e0e0e0;border-radius:99px;background:#fff;font-style:normal;font-weight:500;transition:background .15s,transform .15s}
.c2-rs{display:flex;align-items:flex-end;gap:8px;margin:12px 0 0}.c2-rs span{flex:1;color:var(--mut)}.c2-rs i{display:block;margin-top:6px;padding:9px 8px;border:1px solid #e0e0e0;border-radius:6px;background:#fff;font-style:normal}.c2-rs em{background:var(--ink);color:#fff}
.c2-rn,.c2-rk,.c2-rd{margin:12px 0 0 40px;color:var(--mut)}.c2-rn b{font-weight:400;color:var(--ink)}.c2-rk{display:flex;gap:8px}.c2-rk em{padding:4px 8px}.c2-rd{display:flex;align-items:center;gap:6px;padding-top:8px;border-top:1px solid var(--line);font-weight:500}
.c2-toast{right:18px;bottom:18px;width:310px;padding:12px 14px;border-radius:10px;font-size:12px}.c2-toast b{display:block;font-size:13px;font-weight:600}.c2-toast small{display:block;margin-top:2px;color:var(--mut)}
.c2-doc{font:11px/1.45 Arial,Helvetica,'Liberation Sans',sans-serif;color:#1e1e1e}.c2-doc p{position:absolute;margin:0;white-space:nowrap}
.c2-dk,.c2-g--title .c1-ga{font:700 15px/1.45 Arial,Helvetica,'Liberation Sans',sans-serif;letter-spacing:.01em}.c2-g .c1-ga{font:12px/16px Arial,Helvetica,'Liberation Sans',sans-serif}.c2-g .c1-gb{line-height:inherit}
.c2-dn{top:38px;right:36px;font-size:9px;color:#777}.c2-dl{top:58px;left:36px;font-size:9px;color:#666}.c2-dh{left:36px;font-weight:700}.c2-dp{left:36px;color:#333}
.c2-bx{position:absolute;padding:8px;border:1px solid #cfcfcf;border-radius:2px;font-size:12px;line-height:16px;white-space:nowrap}.c2-bx small{display:block;margin-bottom:6px;font-size:9px;line-height:12px;color:#666}
.c2-tb{position:absolute;left:36px;right:36px;border-top:1px solid #cfcfcf}.c2-tb p{position:static;display:grid;grid-template-columns:1.7fr 1fr 1fr .7fr;padding:5px 0;border-bottom:1px solid #e6e6e6}
.c2-er{display:grid;place-items:center;width:36px;height:30px;margin-top:2px;background:#19b459;color:#fff;font-size:20px}
.c2-eb{left:36px;display:flex;align-items:center;height:20px}.c2-eb i{display:flex;align-items:center;justify-content:space-between;height:20px;padding:0 6px;color:#fff;font-size:10px;font-style:normal}.c2-eb b{font-size:13px}
.c2-ep{position:absolute;top:0;height:20px;padding:0 8px 0 12px;background:#19b459;color:#fff;font:700 11px/20px Arial,sans-serif;font-style:normal;clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 50%)}
@media(prefers-reduced-motion:no-preference){
 .claim-visual:not([data-chapter-reveal=pending]) .ui2--sort{animation:c2-clock 16s infinite}
}
@keyframes c2-clock{to{opacity:1}}@keyframes c2-spin{to{transform:rotate(1turn)}}@keyframes c2-pulse{50%{opacity:.4}}
/* Chapter 3, third take (12 Oct 2026): dates and who they belong to. The desks are the dashboard
   preview's own (project-preview.css) in chapter 1's window under its camera; the chase email, the
   welcome cards and the certificate are pages. 16 s (c3-clock); without motion, its still picture.
   On a phone the window runs past the stage's foot, as it does on a desktop: since 20 October 2026
   the desks are taller (every document before what to act on; the scheme-wide packs before
   handover), and the camera follows the lines down. Since 28 October 2026 the Asset desk is the
   redesigned page's: its rail's red lines open and close (.c3-grow), and on a phone the place
   picker stands in for the rail. */
.ui2--due{--cw:1200;--ch:675}
.c3-desk{position:absolute;inset:0}.c3-win .c3-desk{container-type:normal}.c3-pad{padding:20px 24px}
.c3-rows{position:relative}.c3-rows .hp-dqr{min-height:48px;padding:6px 0;border-top:1px solid var(--hp-edge)}.c3-rows>.c3-h{padding-top:14px}.c3-rows .hp-dhead-row,.c3-rows .hp-csum{margin-bottom:8px}.c3-rows>*{background:#fff;transition:background .3s}.is-live .c3-rows>*{position:absolute;top:0;left:0;right:0}.is-live .c3-rows>.is-lit{background:#fdf3dc}
[data-o]{transition:opacity .3s}.is-live [data-o]:not(.is-on){opacity:0}.ui2:not(.is-live) [data-o=x],.ui2:not(.is-live) [data-x]{display:none}
.c3-w{display:inline-grid}.c3-w>*{grid-area:1/1;transition:opacity .25s}.c3-w>:not(.c3-f),.is-live .c3-w>:not(.is-on){opacity:0}.is-live .c3-w>.is-on{opacity:1}.c3-grow>span{min-height:0;overflow:hidden}
.c3-pc{padding:5px 12px;border-radius:99px;background:var(--hp-ink);color:#fff;font-size:11px;font-weight:500;white-space:nowrap}
.c3-arm{display:flex;justify-content:flex-end;padding:2px 0 12px}.c3-arm>div{width:min(420px,100%)}.c3-arm p{margin:0 0 6px;font-size:10px;color:#70707099}
.c3-arm .c3-ta{position:relative;min-height:46px;padding:5px 7px;border:1px solid #e0e0e0;border-radius:6px;font-size:12px;line-height:1.45;color:var(--hp-ink)}.c3-ta i{position:absolute;font-style:normal;color:#70707099}
.c3-bt{display:flex;gap:6px}.c3-bt span{flex:1;padding:6px 0;border:1px solid #e0e0e0;border-radius:6px;text-align:center;font-weight:500;color:var(--hp-secondary);transition:transform .15s,filter .15s}.c3-bt .c3-send{border-color:#f59e0b;background:#f59e0b;color:#fff;font-weight:600}
.c3-win .hp-outline-pill,.c3-pc,.c3-win .hp-hat-chip{transition:transform .15s,background .25s,filter .15s,box-shadow .25s}.c3-win .is-lit:is(.hp-outline-pill,.c3-pc){transform:scale(.94);filter:brightness(.9)}.c3-win .hp-outline-pill.is-lit{background:#ececec}
.c3-win .hp-hat-chip.is-lit{background:#fbbf2459;box-shadow:0 0 0 1.5px #f59e0b}.c3-win .hp-apane{grid-area:1/2}.is-live .c3-win .is-selected:not(.is-on){background:none}.is-live .c3-win .is-selected:not(.is-on):before{opacity:0}.is-live .c3-sel.is-on{background:#ededed}
.c3-mail{width:592px;height:auto;padding:22px 16px 24px;background:#f7f7f7;font:15px/1.55 Figtree,Arial,sans-serif;color:#0a0a0a}
.c3-mh{margin:0 4px 18px}.c3-mh b{display:block;font-size:17px;font-weight:600;line-height:1.3}.c3-mh span{display:block;margin-top:4px;font-size:12px;color:#666}
.c3-mc{padding:32px;background:#fff;border:1px solid #e2e2e2;border-radius:10px}.c3-mc p{margin:0 0 16px}.c3-mc .c3-wm{margin-bottom:24px;font-size:18px;font-weight:700;letter-spacing:-.025em}.c3-mc .c3-hd{font-size:22px;font-weight:600;line-height:1.25}.c3-mc .c3-mm{margin:24px 0 0;font-size:13px;color:#666}
.c3-mf{margin:24px 0 0;font-size:12px;text-align:center;color:#666}.c3-plain{background:#fff}.c3-mp{margin:0 4px;font:14px/1.5 Arial,sans-serif}.c3-mp p{margin:0 0 14px}
.c3-card{height:592px;border-radius:3px}.c3-ins{display:block;width:100%;height:100%;font:10px Figtree,Arial,sans-serif;text-rendering:geometricPrecision}.c3-ins text{fill:#636363}.c3-ins .c3-ib{font-weight:700;fill:#0a0a0a}
.c3-fd .c1-ga{display:grid;place-items:center;width:30px;height:36px;margin:0;padding:0;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1.5px #f59e0b,0 0 14px 2px #fbbf2459,0 8px 16px -8px #0007}.ui2--due .c2-veil{z-index:7}
.c3-defs{position:absolute;width:0;height:0}.c3-defs path{fill:#0a0a0a}
@media(prefers-reduced-motion:no-preference){
 .claim-visual:not([data-chapter-reveal=pending]) .ui2--due{animation:c3-clock 16s infinite}
}
@keyframes c3-clock{to{opacity:1}}
/* Phones: each loop's own phone canvas and positions. */
@media(max-width:700px){
 .how-stage,.how-stage--feed{aspect-ratio:auto;padding:12px}
 .how-mode{position:relative}
 .ui2{--cw:360;--ch:560;--fit:.92;--ts:14px}
 .ui2--feed{--cw:360;--ch:560}.c1-cam,.c1-page{transform:var(--tm)}.c1-page{opacity:var(--om)}.c1-g{top:var(--my);left:var(--mx)}.c1-win{top:296px;left:8px;width:344px;height:520px}.c1-win .dv-tools{display:none}.c1-win .dv-body{transform:translateY(var(--sym))}.c1-card{top:var(--mcy);left:var(--mcx);width:340px}
 .ui2--sort{--cw:360;--ch:560}.c2-win .dv-head,.c2-win .dv-f,.c2-win .dv-r{grid-template-columns:minmax(0,1fr) 104px}.c2-win{top:268px;left:8px;width:344px;height:520px}.c2-win .dv-tools{display:none}.c2-win .dv-body{transform:translateY(var(--sym))}.c2-wall--d{display:none}.c2-wall--m{display:grid}.dv-i .dv-name{padding-left:30px}
 .c2-note{top:180px;left:8px;width:344px}.c2-dlg{width:340px;transform:var(--tm);opacity:var(--om)}.c2-dt{padding:16px 40px 10px 16px}.c2-dz{margin:0 16px 8px;padding:22px 12px}.c2-df{padding:12px 16px}.c2-rev{top:142px;left:10px;width:340px;padding:16px}.c2-g--date .c1-gb{display:none}.c2-ra,.c2-rm,.c2-rn,.c2-rk,.c2-rd{margin-left:0}.c2-toast{right:10px;bottom:10px;width:290px}
 .dv-tools{gap:6px;padding:0 10px}.dv-search{flex:1;width:auto}.dv-btn--add{padding:0 8px;font-size:0}.dv-btn--line,.dv-tools>.dv-btn:nth-child(3){display:none}.dv-crumb{padding:0 12px}
 .dv-head,.dv-f,.dv-r{grid-template-columns:minmax(0,1fr) 104px}.dv-f>:nth-child(4),.dv-r>:nth-child(4){padding:0 6px}.dv-head>:not(:nth-child(1)):not(:nth-child(4)),.dv-f>:not(:nth-child(1)):not(:nth-child(4)),.dv-r>:not(:nth-child(1)):not(:nth-child(4)){display:none}
 .dv-d1 .dv-fname,.dv-d1 .dv-name{padding-left:14px}.dv-d2 .dv-name{padding-left:22px}
 .ui2--due{--cw:360;--ch:560}.c3-win .c3-desk{container-type:inline-size}.c3-win .hp-apane{grid-area:1/1}.c3-win{top:10px;height:1000px}.c3-pad{padding:14px 12px}
 .c3-win .hp-ahead .hp-dtools{display:contents}.c3-win .hp-ahead .hp-text-link{order:1}.c3-win .hp-ahead .c3-pc{order:2}
 
}