/* The site's one stylesheet.
   Part 1 is the approved design's CSS, copied verbatim from
   site/design/hands-off-first/hands-off-first.dc.html (the design chat's "Hands-off first",
   its Oct 15 version, "the reset", P36). One change only: the canvas carries one line whose
   rules are joined by a literal "\n" (the tour's t1-t4 keyframes and the chip row's first
   rule); here they're on their own lines. Part 2, after it, holds every change made to it, each
   one listed for the design chat. Fonts are self-hosted (OFL; licences beside the files in /assets/fonts/): the
   same three families as the design's fonts/ folder, as one variable file each. */

@font-face{font-family:"Funnel Display";font-style:normal;font-weight:500 800;font-display:swap;src:url(/assets/fonts/funnel-display-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/geist-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/geist-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- Part 1: the design, verbatim ---- */
:root{--ink:#16141C;--ink2:#423F4C;--mute:#6E6A7A;--line:#E6E3EE;--line2:#F0EEF5;--paper:#FFFFFF;--wash:#F7F6FB;--tint:#FBFAFD;--hot:#C93A22;--go:#0E7C4E;--rule:#2F5BFF;--lemon:#FFF0A3;--peach:#FFD8C6;--rose:#FFD5E4;--lilac:#E2D8FF;--sky:#CFE2FF;--mint:#CBEFDB;--gloss:linear-gradient(180deg,rgba(255,255,255,.66) 0%,rgba(255,255,255,0) 58%);--lift:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(22,20,28,.05),0 1px 2px rgba(22,20,28,.06),0 22px 44px -26px rgba(70,50,140,.38);--glass:inset 0 1px 0 #FFFFFF,0 12px 26px -16px rgba(70,50,140,.38)}
*{box-sizing:border-box}
body{margin:0;background:var(--wash);color:var(--ink);font-family:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.page{position:relative}
.aura{position:absolute;left:0;right:0;top:0;height:1150px;z-index:0;pointer-events:none;background:radial-gradient(38% 42% at 90% 10%,rgba(226,216,255,.95),transparent 70%),radial-gradient(34% 38% at 64% 40%,rgba(207,226,255,.75),transparent 70%),radial-gradient(36% 38% at 6% 4%,rgba(255,216,198,.75),transparent 70%),radial-gradient(30% 30% at 30% 70%,rgba(203,239,219,.55),transparent 70%)}
.wrap{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:0 20px}
@media (min-width:760px){.wrap{padding:0 32px}}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;height:72px}
.logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:"Funnel Display",system-ui,sans-serif;font-size:19px;font-weight:600;letter-spacing:-0.01em;text-decoration:none;white-space:nowrap}
.mark{position:relative;width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,#C9B8FF,#FFC6B0);box-shadow:var(--lift)}
.mark::after{content:"";position:absolute;right:5px;bottom:5px;width:7px;height:7px;border-radius:2px;background:#FFFFFF;box-shadow:0 1px 2px rgba(22,20,28,.2)}
.navl{display:flex;align-items:center;gap:2px}
.navl a{display:inline-flex;align-items:center;min-height:42px;padding:0 14px;border-radius:999px;font-size:15px;font-weight:500;color:var(--ink2);text-decoration:none;white-space:nowrap}
.navl a:hover{background:rgba(255,255,255,.7);color:var(--ink)}
.navl a.cta{margin-left:8px}
.short{display:none}
@media (max-width:640px){.navl a.hide-s{display:none}.long{display:none}.short{display:inline}}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:1px solid transparent;border-radius:999px;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.dark,.navl a.cta{background:linear-gradient(180deg,#36323F,#16141C);color:#FFFFFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 22px -10px rgba(22,20,28,.55)}
.dark:hover,.navl a.cta:hover{background:linear-gradient(180deg,#45404F,#24212B);color:#FFFFFF}
.light{background:var(--gloss),rgba(255,255,255,.92);border-color:rgba(22,20,28,.1);box-shadow:var(--lift)}
.light:hover{border-color:rgba(22,20,28,.32)}
.ok{background:linear-gradient(180deg,#12865A,#0E7C4E);color:#FFFFFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 18px -8px rgba(14,124,78,.6)}
.ok:hover{background:linear-gradient(180deg,#0F7A51,#0B6A43)}
.hero{display:grid;gap:32px 56px;align-items:center;padding-top:clamp(24px,5vw,64px);padding-bottom:clamp(40px,5vw,72px)}
@media (min-width:900px){.hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.h1{margin:0;font-family:"Funnel Display",system-ui,sans-serif;font-size:clamp(44px,5vw + 12px,92px);line-height:.98;font-weight:700;letter-spacing:-0.035em;text-wrap:balance}
.h1 em,.h2 em{font-style:normal;background:linear-gradient(90deg,var(--lilac),var(--peach)) 0 90%/100% 40% no-repeat;padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.sub{margin:24px 0 0;max-width:30em;font-size:clamp(17px,.5vw + 14px,20px);line-height:1.55;color:var(--ink2)}
.btns{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px}
.tourwrap{position:relative}
.tour{position:relative;display:block;width:100%;aspect-ratio:4/5;padding:0;border:1px solid rgba(255,255,255,.85);border-radius:24px;background:var(--gloss),linear-gradient(155deg,#E2D8FF 0%,#CFE2FF 48%,#CBEFDB 100%);overflow:hidden;box-shadow:var(--lift);cursor:pointer;text-align:left}
.fr{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:28px;opacity:0;animation-duration:15s;animation-iteration-count:infinite;animation-timing-function:ease}
.fr1{animation-name:f1}.fr2{animation-name:f2}.fr3{animation-name:f3}.fr4{animation-name:f4}
.paused .fr,.paused .chipx,.paused .ln,.paused .abtn{animation-play-state:paused}
@keyframes f1{0%,21%{opacity:1}25%,100%{opacity:0}}
@keyframes f2{0%,21%{opacity:0}25%,46%{opacity:1}50%,100%{opacity:0}}
@keyframes f3{0%,46%{opacity:0}50%,71%{opacity:1}75%,100%{opacity:0}}
@keyframes f4{0%,71%{opacity:0}75%,96%{opacity:1}100%{opacity:0}}
.cap{font-family:"Funnel Display",system-ui,sans-serif;font-size:clamp(26px,1.6vw + 14px,34px);line-height:1.02;font-weight:700;letter-spacing:-0.025em}
.stage{position:relative;flex:1;margin:18px 0}
.chipx,.bar,.dcard{background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.95);box-shadow:var(--glass)}
.chipx{position:absolute;padding:10px 14px;border-radius:12px;font-weight:600;font-size:14px;animation:float 4s ease-in-out infinite}
.chipx::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:2px;vertical-align:1px;background:#A994FF}
.chipx:nth-child(2)::before{background:#FF9C78}.chipx:nth-child(3)::before{background:#5FC892}.chipx:nth-child(4)::before{background:#7DAEFF}
@keyframes float{50%{transform:translateY(-6px)}}
.stack{display:flex;flex-direction:column;gap:8px;justify-content:center;height:100%}
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:12px;font-weight:600;font-size:14px}
.bar i{font-style:normal;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:600}
.draft{display:flex;flex-direction:column;justify-content:center;height:100%}
.dcard{padding:18px;border-radius:14px}
.dcard b{display:block;margin-bottom:10px;font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;font-weight:500;color:var(--mute)}
.ln{height:9px;margin:9px 0;border-radius:5px;background:#E7E3F3;width:0;animation:type 3.75s ease-out infinite}
.ln.l2{animation-delay:.3s}.ln.l3{animation-delay:.6s}
@keyframes type{0%{width:0}60%,100%{width:var(--w)}}
.approve{display:flex;align-items:center;justify-content:center;height:100%}
.abtn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:999px;background:linear-gradient(180deg,#36323F,#16141C);color:#FFFFFF;font-size:20px;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 14px 30px -12px rgba(22,20,28,.5);animation:press 3.75s ease-in-out infinite}
.abtn svg{color:#FFE36E}
@keyframes press{0%,40%{transform:scale(1)}50%{transform:scale(.95)}60%,100%{transform:scale(1)}}
.tlabel{display:flex;justify-content:space-between;align-items:center;font-family:"Geist Mono",ui-monospace,monospace;font-size:12px}
.tlabel span{padding:4px 9px;border-radius:6px;background:rgba(255,255,255,.62)}
.pause{position:absolute;right:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid rgba(255,255,255,.9);border-radius:999px;background:rgba(255,255,255,.8);font-size:13px;font-weight:600;cursor:pointer;box-shadow:var(--glass)}
.ticker{position:relative;z-index:1;overflow:hidden;background:var(--ink);color:#D6D6D1}
.track{display:flex;gap:28px;width:max-content;padding:13px 0;font-family:"Geist Mono",ui-monospace,monospace;font-size:14px;white-space:nowrap;animation:roll 40s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.track b{color:#C9B8FF;font-weight:500}
@keyframes roll{to{transform:translateX(-50%)}}
.sec{margin-top:clamp(56px,7vw,96px)}
.h2{margin:0;font-family:"Funnel Display",system-ui,sans-serif;font-size:clamp(30px,2.2vw + 18px,52px);line-height:1.02;font-weight:700;letter-spacing:-0.03em}
.lead2{margin:12px 0 0;max-width:34em;font-size:18px;color:var(--ink2)}
.shelf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:24px}
@media (max-width:879px){.shelf{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(210px,68%);overflow-x:auto;scroll-snap-type:x mandatory;margin:20px -20px 0;padding:4px 20px 14px;scrollbar-width:none}.shelf::-webkit-scrollbar{display:none}.card{scroll-snap-align:start}}
.card{position:relative;display:flex;flex-direction:column;padding:0;border:1px solid rgba(22,20,28,.1);border-radius:18px;background:var(--paper);overflow:hidden;text-align:left;cursor:pointer;box-shadow:var(--lift);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-2px)}
.card.on{box-shadow:0 0 0 2px var(--ink),var(--lift)}
.ctile{position:relative;display:grid;place-items:center;height:88px}
.ctile svg{width:38px;height:38px}
.cnow{position:absolute;left:10px;top:10px;padding:3px 8px;border-radius:6px;background:var(--ink);color:#FFFFFF;font-family:"Geist Mono",ui-monospace,monospace;font-size:12px}
.cbody{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px}
.cname{font-family:"Funnel Display",system-ui,sans-serif;font-size:17px;line-height:1.15;font-weight:600;letter-spacing:-0.01em}
.cline{font-size:13px;line-height:1.4;color:var(--ink2)}
.win{margin-top:16px;border:1px solid rgba(22,20,28,.1);border-radius:20px;background:var(--paper);overflow:hidden;box-shadow:var(--lift)}
.wbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--gloss),linear-gradient(90deg,#F4F0FF,#FFF4EE)}
.biz{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-weight:600}
.wdot{width:14px;height:14px;border-radius:5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(22,20,28,.08)}
.wsub{font-weight:400;color:var(--mute)}
.badge{padding:3px 8px;border:1px solid var(--line);border-radius:6px;background:var(--paper);font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;color:var(--ink2)}
.whot{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 14px 0 10px;border:1px solid var(--line);border-radius:999px;background:var(--gloss),#FFFFFF;font-size:14px;font-weight:600;cursor:pointer;box-shadow:var(--glass)}
.sw{position:relative;width:30px;height:18px;border-radius:999px;background:#D7D3E0;transition:background .15s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.whot.on .sw{background:var(--ink)}
.whot.on .sw::after{transform:translateX(12px)}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:13px;font-weight:500}
.key{display:inline-flex;align-items:center;gap:8px}
.key i{width:14px;height:14px;border-radius:4px;display:inline-block}
.k-ai{background:#FFE98A}.k-rule{border:1.5px dashed var(--rule)}.k-you{background:var(--go)}
.legend .rest{color:var(--mute)}
.stats{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line)}
.stat{display:inline-flex;align-items:baseline;gap:6px;height:28px;padding:0 10px;border-radius:7px;background:var(--tint);border:1px solid var(--line2);font-size:13px;line-height:26px;color:var(--ink2)}
.stat b{font-family:"Geist Mono",ui-monospace,monospace;color:var(--ink);font-weight:500}
.wbody{display:grid;min-height:560px}
@media (min-width:880px){.wbody{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.list{border-bottom:1px solid var(--line)}
@media (min-width:880px){.list{max-height:600px;overflow:auto;border-bottom:0;border-right:1px solid var(--line)}}
.row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:12px 16px;border:0;border-bottom:1px solid var(--line2);background:var(--paper);text-align:left;cursor:pointer}
.row:hover{background:var(--tint)}
.row.sel{background:#F5F1FF;box-shadow:inset 3px 0 0 #9C86F5}
.av{width:34px;height:34px;border-radius:50%;background:var(--tint);border:1px solid var(--line);display:grid;place-items:center;font-family:"Geist Mono",ui-monospace,monospace;font-size:12px}
.row.sel .av{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.rn{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600}
.rt{display:block;font-size:13px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.chip{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap}
.c-urgent{background:var(--hot);color:#FFFFFF}
.c-new,.c-loc{background:var(--sky);color:#1D3D99}
.c-follow,.c-hire,.c-firmer{background:var(--lemon);color:#5E4700}
.c-turn,.c-ok,.c-ready,.c-friendly{background:var(--mint);color:#0B6640}
.c-booked,.c-conf{background:var(--lilac);color:#4A2EA3}
.c-wait,.c-done{background:#EFEDF3;color:#55525E}
.c-ribbon,.c-final{background:var(--rose);color:#8E1E44}
.c-flag,.c-miss{background:#FFE2D6;color:#8A3412}
.wt{font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;color:var(--mute)}
.tick{width:16px;height:16px;flex:none;color:var(--go)}
.who .ai{background:#FFEC99;box-shadow:0 0 0 2px #FFEC99;border-radius:3px}
.who .rule{outline:1.5px dashed var(--rule);outline-offset:2px;border-radius:6px}
.who .you{box-shadow:0 0 0 3px #FFFFFF,0 0 0 5px var(--go)}
.detail{padding:clamp(18px,2.4vw,28px)}
.dh{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.dn{margin:0 6px 0 0;font-family:"Funnel Display",system-ui,sans-serif;font-size:26px;line-height:1.1;font-weight:600;letter-spacing:-0.02em}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0;padding:14px 16px;border:1px solid var(--line);border-radius:12px}
.fk{display:block;font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;color:var(--mute)}
.fv{display:inline-block;font-size:14px;font-weight:600}
.ask{margin:0 0 16px;font-size:15px}
.ask b{font-weight:700}
.dbox{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dl{display:flex;justify-content:space-between;gap:8px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--tint);font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;color:var(--mute)}
.dt{margin:0;padding:16px;font-size:15px;line-height:1.6}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 16px 16px}
.acts .pill{min-height:42px;padding:0 18px;font-size:14px}
.approved{display:flex;align-items:center;gap:8px;min-height:42px;font-size:14px;font-weight:600;color:var(--go)}
.none{margin:0;padding:16px;border:1px dashed var(--line);border-radius:14px;font-size:15px;color:var(--ink2)}
.checks{margin:0 0 14px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.chk{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-top:1px solid var(--line2);font-size:14px}
.chk:first-of-type{border-top:0}
.chk small{display:block;font-size:13px;color:var(--ink2)}
.bang{display:grid;place-items:center;width:16px;height:16px;flex:none;border-radius:50%;background:var(--hot);color:#FFFFFF;font-size:11px;font-weight:700;line-height:1}
.sched{display:grid;grid-template-columns:repeat(5,minmax(104px,1fr));gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--tint);overflow-x:auto}
.day{min-height:76px;padding:8px;border:1px solid var(--line2);border-radius:10px;background:var(--paper)}
.day b{display:block;font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;font-weight:500;color:var(--mute)}
.job{display:block;margin-top:6px;padding:5px 7px;border-radius:7px;background:var(--lilac);font-size:12px;font-weight:600;line-height:1.3}
.job.new{background:var(--mint)}
.empty{display:block;margin-top:6px;font-size:12px;color:var(--mute)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}
.fld{padding:9px 12px;border:1px solid var(--line);border-radius:10px}
.fld.miss{border:1px dashed #D9822B;background:#FFF7EC}
.fld.miss .fv{color:#8A3412}
.dchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.dc{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;font-size:12px;font-weight:600}
.dc.got{background:var(--mint);color:#0B6640}
.dc.owe{background:#FFE2D6;color:#8A3412}
.meter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:14px 0}
.step{padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:13px;font-weight:600;color:var(--mute);text-align:center}
.step.on{border-color:rgba(22,20,28,.18);color:var(--ink)}
.step.on.s-friendly{background:var(--mint)}.step.on.s-firmer{background:var(--lemon)}.step.on.s-final{background:var(--rose)}
.doclist{margin:14px 0;padding:0;list-style:none;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.doclist li{display:flex;justify-content:space-between;gap:10px;padding:9px 14px;border-top:1px solid var(--line2);font-size:14px}
.doclist li:first-child{border-top:0}
.filters{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line)}
.f{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:13px;font-weight:600;cursor:pointer}
.f:hover{border-color:var(--ink)}
.f.on{background:linear-gradient(180deg,#36323F,#16141C);border-color:#16141C;color:#FFFFFF}
.f i{font-style:normal;font-family:"Geist Mono",ui-monospace,monospace;font-weight:400;opacity:.6}
.groups{max-height:520px;overflow:auto}
.gh{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 8px;font-size:13px;font-weight:700}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding:11px 16px;border-bottom:1px solid var(--line2)}
.ms{font-size:14px;font-weight:600}
.ms span{font-weight:400;color:var(--ink2)}
.mx{grid-column:1/2;justify-self:start;font-size:13px;color:var(--mute)}
.abar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 16px;border-top:1px solid var(--line);background:var(--gloss),linear-gradient(90deg,#F4F0FF,#FFF4EE);font-size:14px}
.fine{border-top:1px solid var(--line);background:var(--tint);font-size:13px}
.fine>summary{list-style:none;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 16px;min-height:48px;padding:0 16px;cursor:pointer;font-weight:500;color:var(--ink2)}
.fine>summary::-webkit-details-marker{display:none}
.fine .q{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.realist{margin:0;padding:4px 16px 16px;list-style:none;display:grid;gap:0 32px}
@media (min-width:880px){.realist{grid-template-columns:repeat(2,minmax(0,1fr))}}
.realist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:9px 0;border-bottom:1px solid var(--line2)}
.realist b{font-weight:600}
.realist span{color:var(--ink2);text-align:right}
.order{margin-top:clamp(64px,8vw,112px);padding:clamp(28px,5vw,64px);border-radius:28px;background:var(--gloss),linear-gradient(135deg,#E2D8FF 0%,#FFD5E4 55%,#FFD8C6 100%);border:1px solid rgba(255,255,255,.85);box-shadow:var(--lift);display:grid;gap:28px 56px;align-items:start}
@media (min-width:900px){.order{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.order .h2 em{background:none;color:#5B45C9;padding:0}
.order .lead2{color:var(--ink2)}
.form{display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:18px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #FFFFFF,0 22px 44px -26px rgba(70,50,140,.45)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.form,.chipx,.bar,.dcard{background:rgba(255,255,255,.94)}}
.form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.form input,.form textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#FFFFFF;font-size:16px;font-weight:400}
.form input:focus,.form textarea:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px var(--lilac)}
.form textarea{min-height:120px;resize:vertical}
.two{display:grid;gap:14px}
@media (min-width:560px){.two{grid-template-columns:1fr 1fr}}
.small{margin:0;font-size:13px;color:var(--mute)}
.small a{font-weight:600;color:var(--ink)}
.me{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(56px,7vw,88px);padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.me p{margin:0;max-width:40em;font-family:"Funnel Display",system-ui,sans-serif;font-size:clamp(20px,1vw + 14px,25px);line-height:1.3;font-weight:500;letter-spacing:-0.015em}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:24px 20px 40px;font-size:13px;color:var(--mute)}
.foot a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink)}

.wctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.modes{display:inline-flex;padding:3px;border-radius:10px;background:rgba(22,20,28,.06)}
.modes button{min-height:34px;padding:0 12px;border:0;border-radius:8px;background:transparent;font-size:13px;font-weight:600;color:var(--ink2);cursor:pointer;white-space:nowrap}
.modes button.on{background:var(--gloss),#FFFFFF;color:var(--ink);box-shadow:inset 0 1px 0 #FFFFFF,0 1px 3px rgba(22,20,28,.16)}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--paper)}
.tools .lbl{font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;color:var(--mute);margin-right:4px}
.report{display:grid;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--gloss),linear-gradient(90deg,#EEF9F3,#F4F0FF)}
@media (min-width:880px){.report{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.rh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.rh b{font-family:"Funnel Display",system-ui,sans-serif;font-size:18px;font-weight:600}
.rh span{font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;color:var(--mute)}
.rlines{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rl{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:2px 10px;border-radius:7px;background:rgba(255,255,255,.85);border:1px solid var(--line2);font-size:13px}
.rl b{font-family:"Geist Mono",ui-monospace,monospace;font-weight:500}
.rl.hold{background:#FFF1EA;border-color:#F6C9B4;color:#8A3412}
.rstop{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rstop .pill{min-height:40px;padding:0 16px;font-size:14px}
.stopped{font-size:14px;font-weight:600;color:#8A3412}
.held{flex-basis:100%;margin:0 0 2px;font-size:14px;font-weight:600;color:#8A3412}
.c-sent{background:var(--mint);color:#0B6640}
.c-held{background:#FFE2D6;color:#8A3412}
.c-undone{background:#EFEDF3;color:#55525E}
.c-doc{background:var(--sky);color:#1D3D99}
.c-sig{background:var(--lilac);color:#4A2EA3}
.c-pay{background:var(--lemon);color:#5E4700}
.slots{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.slot{display:inline-flex;align-items:center;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:8px;font-family:"Geist Mono",ui-monospace,monospace;font-size:12px}
.slot.pick{background:var(--mint);border-color:transparent;color:#0B6640}
.avail{margin:0 0 14px;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:13px}
.arow{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));border-top:1px solid var(--line2)}
.arow>span{padding:8px 10px}
.ahead{border-top:0;background:var(--tint);font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;color:var(--mute)}
.aname{font-weight:600}
.free{color:#0B6640}
.busy{color:var(--mute);background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(22,20,28,.035) 6px 12px)}
.best{background:var(--mint);color:#0B6640;font-weight:700}
.intake{display:grid;gap:28px 48px;align-items:start;margin-top:clamp(64px,8vw,112px)}
@media (min-width:900px){.intake{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.offer{margin-top:24px;padding:22px;border-radius:20px;background:var(--gloss),linear-gradient(135deg,#E2D8FF 0%,#FFD5E4 55%,#FFD8C6 100%);border:1px solid rgba(255,255,255,.85);box-shadow:var(--lift)}
.offer h3{margin:0 0 6px;font-family:"Funnel Display",system-ui,sans-serif;font-size:22px;line-height:1.15;font-weight:600;letter-spacing:-0.015em}
.offer p{margin:0;font-size:15px;color:var(--ink2)}
.terms{margin:14px 0 0;padding:14px 0 0;border-top:1px solid rgba(22,20,28,.1);list-style:none;display:grid;gap:8px;font-size:14px;color:var(--ink2)}
.terms li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px}
.terms li::before{content:"";width:7px;height:7px;margin-top:8px;border-radius:2px;background:var(--ink)}
.terms a{font-weight:600;color:var(--ink)}
.chat{display:flex;flex-direction:column;border:1px solid rgba(22,20,28,.1);border-radius:20px;background:var(--paper);box-shadow:var(--lift);overflow:hidden}
.chead{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--gloss),linear-gradient(90deg,#F4F0FF,#FFF4EE)}
.avatar{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;background:linear-gradient(135deg,#C9B8FF,#FFC6B0);font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;box-shadow:var(--lift)}
.chead b{display:block;font-size:14px;font-weight:600}
.chead b+span{display:block;font-size:12px;color:var(--mute)}
.msgs{display:flex;flex-direction:column;gap:10px;min-height:340px;padding:18px 16px}
.msg{max-width:84%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.45}
.msg.bot{align-self:flex-start;background:var(--tint);border:1px solid var(--line2);border-bottom-left-radius:6px}
.msg.mine{align-self:flex-end;background:linear-gradient(135deg,#E2D8FF,#FFD8C6);border-bottom-right-radius:6px}
.choices{display:flex;flex-wrap:wrap;gap:6px}
.choice{min-height:38px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:14px;font-weight:600;cursor:pointer;box-shadow:var(--glass)}
.choice:hover{border-color:var(--ink)}
.who-card{align-self:stretch;display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--tint)}
.who-card label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.who-card input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#FFFFFF;font-size:16px}
.who-card input:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px var(--lilac)}
.cfoot{display:flex;align-items:center;gap:8px;padding:12px;border-top:1px solid var(--line)}
.cfoot input{flex:1;min-width:0;padding:11px 16px;border:1px solid var(--line);border-radius:999px;font-size:16px}
.cfoot input:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px var(--lilac)}
.send{display:grid;place-items:center;width:44px;height:44px;flex:none;border:0;border-radius:50%;background:linear-gradient(180deg,#36323F,#16141C);color:#FFFFFF;cursor:pointer}
.cnote{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 12px;padding:0 16px 12px;font-size:13px;color:var(--mute)}
.linkbtn{min-height:32px;padding:0;border:0;background:none;font-size:13px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sendbig{align-self:flex-start}
@media (max-width:640px){.tour{aspect-ratio:auto;height:min(50vh,340px)}.fr{padding:18px}.cap{font-size:24px}.chipx{padding:8px 12px;font-size:13px}.hero{gap:24px;padding-top:12px}.h1{font-size:40px}.sub{margin-top:16px}.btns{margin-top:20px}.modes button{padding:0 10px}}

.cfor{font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;color:var(--mute)}
.tip{display:flex;align-items:center;gap:10px;margin:18px 0 0;font-size:15px;color:var(--ink2)}
.tip::before{content:"";width:10px;height:10px;flex:none;border-radius:3px;background:linear-gradient(135deg,#C9B8FF,#FFC6B0)}
.bname{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.prof{display:block;margin-top:2px;font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;font-weight:400;color:var(--mute)}
.modewrap{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.mdesc{font-size:12px;color:var(--mute)}
@media (max-width:640px){.modewrap{align-items:flex-start}}
.tabs{display:inline-flex;gap:6px}
.tabs button{min-height:36px;padding:0 4px;border:0;border-bottom:2px solid transparent;background:none;font-size:14px;font-weight:600;color:var(--ink2);cursor:pointer}
.tabs button.on{border-bottom-color:var(--ink);color:var(--ink)}
.quiet{padding:10px 16px;border-bottom:1px solid var(--line);font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;color:var(--mute)}
.report{display:block}
.needs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.needbtn{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border:1px solid #F0B9A0;border-radius:999px;background:#FFF1EA;color:#8A3412;font-size:14px;font-weight:600;cursor:pointer;text-align:left}
.needbtn::before{content:"";width:8px;height:8px;flex:none;border-radius:50%;background:var(--hot)}
.needbtn:hover{border-color:#8A3412}
.allclear{margin:10px 0 0;font-size:14px;font-weight:600;color:var(--go)}
.foldtools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:4px 16px 12px}
.foldtools .legend{padding:0;border:0}

.tourwrap{display:block;position:relative}
.pause{position:absolute;top:20px;right:20px;bottom:auto;min-height:34px}
@media (min-width:900px){.tour{aspect-ratio:1/1}}
.hero{padding-bottom:clamp(24px,3vw,40px)}
.sec{margin-top:clamp(40px,5vw,72px)}
.info{position:relative;display:inline-flex;align-items:center}
.ibtn{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;color:var(--mute);cursor:pointer}
.ibtn i{display:grid;place-items:center;width:18px;height:18px;border:1.5px solid currentColor;border-radius:50%;font:700 11px/1 "Geist",system-ui,sans-serif;font-style:normal}
.ibtn:hover,.ibtn[aria-expanded="true"]{color:var(--ink)}
.pop{position:absolute;z-index:6;top:calc(100% + 6px);left:-8px;width:min(330px,82vw);padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#FFFFFF;box-shadow:0 20px 44px -18px rgba(70,50,140,.45);font-size:13px;font-weight:400;line-height:1.5;color:var(--ink2);text-align:left}
.pop.right{left:auto;right:-8px}
.pop b{color:var(--ink);font-weight:600}
.pop p{margin:0 0 8px}
.pop .phead{margin:10px 0 4px;font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;color:var(--mute)}
.pop ul{margin:0;padding:0;list-style:none}
.pop li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:6px 0;border-top:1px solid var(--line2)}
.pop li span:last-child{color:var(--ink);text-align:right}
.pop .pclose{display:block;margin:10px 0 0 auto;min-height:32px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:#FFFFFF;font-size:12px;font-weight:600;cursor:pointer}
.barctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 8px}
.barctl .whot{min-height:36px;font-size:13px}
.wbar .legend{flex-basis:100%;padding:8px 0 0;border:0}
.auto{margin:0;padding:0 16px 10px;font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;color:var(--mute)}
.showall{display:none}
.rh .first{padding:2px 9px;border:1px solid var(--line);border-radius:999px;background:#FFFFFF;font-family:"Geist",system-ui,sans-serif;font-size:12px;font-weight:600;color:var(--ink2)}
.moves{margin:-4px 0 12px;font-size:13px;color:var(--mute)}
.biz{flex-wrap:nowrap;align-items:flex-start}
.wdot{flex:none;margin-top:6px}
.tagset{display:inline-flex;align-items:center;gap:4px}
.bname{min-width:0}
@media (max-width:879px){
 .wbody{display:flex;flex-direction:column}
 .wbody>.detail{order:0}
 .wbody>.list{order:1;border-top:1px solid var(--line);border-bottom:0}
 .list.folded .row{display:none}
 .showall{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;border:0;border-bottom:1px solid var(--line2);background:var(--tint);font-size:14px;font-weight:600;cursor:pointer}
 .barctl{justify-content:flex-start}
}
@media (max-width:879px){.pop,.pop.right{position:fixed;left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:70vh;overflow:auto;box-shadow:0 -10px 40px -10px rgba(22,20,28,.35)}}

@keyframes t1{0%{opacity:0}2%,21%{opacity:1}23%,100%{opacity:0}}
@keyframes t2{0%,23%{opacity:0}25%,46%{opacity:1}48%,100%{opacity:0}}
@keyframes t3{0%,48%{opacity:0}50%,71%{opacity:1}73%,100%{opacity:0}}
@keyframes t4{0%,73%{opacity:0}75%,96%{opacity:1}98%,100%{opacity:0}}
.tour .fr1{animation-name:t1}.tour .fr2{animation-name:t2}.tour .fr3{animation-name:t3}.tour .fr4{animation-name:t4}
.views{display:flex;gap:6px;margin-top:4px;padding-bottom:8px;overflow-x:auto;scrollbar-width:none}
.views::-webkit-scrollbar{display:none}
.vchip{display:inline-flex;align-items:center;flex:none;min-height:38px;padding:0 15px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.72);box-shadow:var(--glass);font-size:14px;font-weight:600;color:var(--ink2);text-decoration:none;white-space:nowrap}
.vchip:hover{color:var(--ink);border-color:#CFCBDB}
.vchip.on{background:linear-gradient(180deg,#36323F,#16141C);border-color:#16141C;color:#FFFFFF}
.kicker{margin:0 0 10px;font-family:"Funnel Display",system-ui,sans-serif;font-size:clamp(20px,1vw + 14px,26px);font-weight:600;letter-spacing:-0.015em;color:var(--ink2)}
.lookhero{padding-top:clamp(20px,3vw,40px)}
.lookhero .h1{font-size:clamp(40px,3vw + 20px,64px)}
.sec.first{margin-top:clamp(20px,2.5vw,32px)}
.bgrid{display:grid;gap:14px;margin-top:24px}
@media (min-width:760px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.bgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.bcard{padding:20px;border-radius:18px;background:var(--gloss),#FFFFFF;border:1px solid var(--line);box-shadow:var(--lift)}
.bcard h3{margin:0 0 8px;font-family:"Funnel Display",system-ui,sans-serif;font-size:20px;line-height:1.15;font-weight:600;letter-spacing:-0.015em}
.bcard p{margin:0;font-size:15px;line-height:1.5;color:var(--ink2)}
.bkeys{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:13px;font-weight:500}
.contact{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 32px;padding:28px;border-radius:24px;background:var(--gloss),linear-gradient(135deg,#E2D8FF 0%,#FFD5E4 55%,#FFD8C6 100%);border:1px solid rgba(255,255,255,.85);box-shadow:var(--lift)}
.cbtns{display:flex;flex-wrap:wrap;gap:10px}
.aside{margin:14px 0 0;font-size:14px;color:var(--mute)}
.aside a{font-weight:600;color:var(--ink)}
.lookout{display:grid;gap:10px}
@media (min-width:760px){.lookout{grid-template-columns:1fr 1fr}}
.lookout a{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;min-height:56px;padding:14px 18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.72);color:var(--ink2);text-decoration:none;font-size:15px}
.lookout a b{color:var(--ink)}
.lookout a b::after{content:" \2192"}
.lookout a:hover{border-color:#CFCBDB}

.dh+.ask{margin-top:12px}
.ctag{display:block;margin-top:8px;font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;color:var(--mute)}
.h1.pain{font-size:clamp(40px,3.6vw + 14px,76px);line-height:1.02}
.rh{gap:2px 10px}
.rh b{font-family:"Geist",system-ui,sans-serif;font-size:13px;font-weight:600;color:var(--ink2)}
.rh span{font-size:12px}
.result{margin:4px 0 0;font-family:"Funnel Display",system-ui,sans-serif;font-size:clamp(22px,1vw + 16px,28px);line-height:1.1;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.rlines .rl{font-size:13px}
.legend .lhide{margin-left:auto}
.pop .whot{display:flex;margin:4px 0 6px;min-height:34px;font-size:13px}
.pop .phead{display:block}
.ibtn{width:34px;height:34px}
.abar.top{border-top:0;border-bottom:1px solid var(--line)}
.skipped{margin:0;padding:12px 16px;font-size:13px;color:var(--ink2);border-bottom:1px solid var(--line2)}
.subj{margin:0;padding:12px 16px 0;font-size:14px}
.subj .fk{display:inline;margin-right:6px}
.efoot{margin:0 16px 10px;padding:8px 0 0;border-top:1px dashed var(--line);font-size:12px;line-height:1.5;color:var(--mute)}
.efoot p{margin:0}
.efoot .fk{display:block;margin-bottom:2px}
.dl .since{margin-left:auto;font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;color:#8A3412}
.job .jn{display:block;font-weight:600}
.job .js{display:block;margin-top:2px;font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;font-weight:400;color:var(--ink2)}
.fnote{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--ink2)}
.c-unclear{background:#FFF0A3;color:#5E4700;margin-left:6px;vertical-align:1px}
.plan{margin:14px 0 8px;font-size:14px;font-weight:600;color:var(--ink)}
.confnote{margin:0;padding:0 16px 12px;font-size:13px;color:var(--ink2)}
.cfacts{margin:12px 0 8px;font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;color:var(--ink2)}
.terms.small{margin-top:10px;padding-top:10px;gap:4px;font-size:13px}
.who-card textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font:inherit;font-size:15px;resize:vertical}
.who-card .opt{font-weight:400;color:var(--mute)}
.sendbig[aria-busy="true"]{opacity:.7;cursor:progress}
.sentmsg{font-weight:600}
.fixlink{align-self:flex-start;margin:-2px 0 0 4px}
.fixmail{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}
.fixmail label{flex:1 1 220px;font-size:13px;font-weight:600}
.fixmail input{display:block;width:100%;margin-top:6px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:12px;font:inherit;font-size:15px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.fr4{opacity:1}}

/* ---- Part 2: changes to the design (P23, 2026-10-13), for the design chat ---- */

/* 1. Inline styles moved into classes: the content-security rule allows no style attributes.
      The tour's chip positions and draft lines, its row chips' colours (the status classes),
      the two-column facts, and each demo's pastel pair (2). */
.chipx.p1{left:6%;top:8%}
.chipx.p2{right:4%;top:28%;animation-delay:.5s}
.chipx.p3{left:12%;top:52%;animation-delay:1s}
.chipx.p4{right:10%;top:74%;animation-delay:1.5s}
.ln.l1{--w:92%}.ln.l2{--w:80%}.ln.l3{--w:56%}
.rmid{min-width:0}
.facts.f2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gh{margin:0}

/* 2. Each demo's own pair of the six pastels: the card's tile and the dot in the window bar.
      A demo's registry entry names its first colour; the pairs run round the wheel. */
.pair-lemon{--pa:var(--lemon);--pb:var(--peach)}
.pair-peach{--pa:var(--peach);--pb:var(--rose)}
.pair-rose{--pa:var(--rose);--pb:var(--lilac)}
.pair-lilac{--pa:var(--lilac);--pb:var(--sky)}
.pair-sky{--pa:var(--sky);--pb:var(--mint)}
.pair-mint{--pa:var(--mint);--pb:var(--lemon)}
.ctile,.wdot{background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 60%),linear-gradient(150deg,var(--pa),var(--pb))}

/* 3. A card is a link (role="tab") to its demo's address, so it works without scripts and can
      be shared; the frame marks the one in the window with aria-selected, which draws the ink
      ring and "Showing". */
.card{color:inherit;text-decoration:none}
.card[aria-selected="true"]{box-shadow:0 0 0 2px var(--ink),var(--lift)}
.card:not([aria-selected="true"]) .cnow{display:none}

/* 4. Contrast found by measuring: grey text under the "AI wrote it" highlight (4.42:1) gets
      the darker grey; so does the privacy page's date on the pastel aura (section 10). */
.who .rt .ai,.who .mx.ai{color:var(--ink2)}

/* 5. A plain fallback where frosted glass isn't supported, for the pieces the build adds. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .tlabel span,.pause{background:#FFFFFF}
}

/* 6. The tour is a picture with a label, not a link, and its Pause hides under reduced
      motion, where nothing moves. */
.tour{cursor:default}
@media (prefers-reduced-motion:reduce){.pause{display:none}}

/* 7. The frame's rows (/assets/frame.js) take no room while empty or hidden: the demo's
      controls row and strip, the report, the legend and a closed popover. */
.tools:empty,.strip:empty{display:none}
.report[hidden],.legend[hidden],.pop[hidden]{display:none}
.dn:focus,.approved:focus,.pop:focus{outline:none}

/* 8. Retired in P28: the design now styles the automatic-send line itself (.auto, part 1).
   9. Retired in P28: "Back to list". Phones open on the selected item with the list folded
      under it (13), so there's no list above to go back to. What stays: */
.wmsg{margin:0;padding:28px 20px;font-size:15px;color:var(--ink2)}
section[id],.win{scroll-margin-top:12px}
.wrap.foot{padding-left:20px;padding-right:20px}
@media (min-width:760px){.wrap.foot{padding-left:32px;padding-right:32px}}

/* 10. The intake chat (/assets/intake.js; P24). Part 1 styles the chat as the design drew it;
       these are the pieces the build adds: the details' error lines, the line by Send saying
       what it does, the state after Send (its heading; the .handoff rules below styled the
       address and message to copy for the email-app fallback, which P38 removed, and stay
       unused until the design chat trims them), and "That's enough, finish up" raised to a
       40px target (HANDOVER §8). Then the privacy and 404 pages, and two
       helpers: the skip link and text only screen readers hear. */
.cfoot[hidden],.cnote[hidden],.linkbtn[hidden],.intake-details[hidden]{display:none}
.linkbtn{min-height:40px}
.intake-details,.intake-after{display:flex;flex-direction:column;gap:10px}
.who-card .err{display:block;font-weight:600}
.who-card .err[hidden]{display:none}
.err{margin:0;font-size:13px;font-weight:600;color:#B42318}
.who-card [aria-invalid="true"]{border-color:#B42318}
.intake-note{max-width:34em}
.intake-after .msg b{display:block;font-weight:600}
.msub{display:block;margin-top:4px;color:var(--ink2)}
.intake-after .msg:focus{outline:none}
.handoff .addr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0}
.handoff .addr b{font-family:"Geist Mono",ui-monospace,monospace;font-size:15px;font-weight:500;-webkit-user-select:all;user-select:all}
.handoff .mailmsg{margin:0;max-height:180px;overflow:auto;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#FFFFFF;font-family:inherit;font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.handoff .acts{display:flex;flex-wrap:wrap;gap:8px;padding:0}
.intake-after .linkbtn{align-self:flex-start}
.doc{max-width:46rem;padding-top:clamp(16px,4vw,40px);padding-bottom:clamp(48px,7vw,96px)}
.doc .h2{margin-bottom:16px}
.doc h2.sh{margin:32px 0 8px;font-family:"Funnel Display",system-ui,sans-serif;font-size:22px;line-height:1.2;font-weight:600;letter-spacing:-0.015em}
.doc p{margin:0 0 12px;max-width:40em;font-size:17px;color:var(--ink2)}
.doc p.when{font-family:"Geist Mono",ui-monospace,monospace;font-size:13px;color:var(--ink2)}
.doc a{font-weight:600}
.doc .btns{margin-top:32px}
.top,main,.foot{position:relative;z-index:1}
.skip{position:absolute;left:12px;top:-80px;z-index:10;padding:10px 16px;border-radius:999px;background:var(--ink);color:#FFFFFF;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The chat after a send that went (P36): part 1 styles the line, "Wrong address? Fix it" and
   the field. The build adds (for design chat): the field's error line under it, and the line
   when a correction didn't go through, whose address is a link to write to Lior. */
.fixmail .err{flex-basis:100%}
.fixmail .err[hidden]{display:none}
.fixmail .pill{min-height:44px}
[data-fixfailed] a{font-weight:600;color:var(--ink)}
.msg:focus{outline:none}
/* The chat's spam trap (P35): off screen for everyone, out of the Tab order (tabindex) and hidden from screen readers (aria-hidden). For design chat. */
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 11. P26 (2026-10-13). The header fits from 320px up (Lior's look at 350px: the page scrolled
       sideways and "Contact" was cut off): on small phones the nav links tighten, and if longer
       nav words ever don't fit, the nav wraps under the name instead of running off the
       screen. At the design's widths nothing changes. site/tests/layout.test.mjs checks it in
       Chrome, with longer nav words too. */
.top{flex-wrap:wrap;height:auto;min-height:72px;row-gap:0}
.navl{flex-wrap:wrap;justify-content:flex-end;min-width:0;margin-left:auto}
@media (max-width:420px){.top{gap:8px}.logo{gap:8px;font-size:17px}.navl a{padding:0 10px}.navl a.cta{margin-left:4px}}

/* 12. P26: pieces demo 2 adds to the design's styles. A time inside a week-strip entry; the
       free/busy grid's cells tightened on small phones, so its four columns fit at 320px without
       scrolling; and the sort bar's actions without the draft box's padding. (The report's
       "First morning on the job" tag went in P36, with the design.) */
.job .jt{font-family:"Geist Mono",ui-monospace,monospace;font-weight:500}
@media (max-width:560px){.arow>span{padding:8px 6px}}
.abar .acts{padding:0}

/* 13. P28: the design's Oct 14 refresh, the pieces the build adds.
       - The popovers' closing lines ("Nothing real is sent.", the modes' closer) take a class
         for the canvas's inline margins.
       - Close grows from 32px to 34px, HANDOVER §8's smallest touch target (the ⓘ itself is
         34px in part 1 since the Oct 15 design).
       - The phone fold hides everything in a folded list but its "Show all N" button, so a list
         that isn't rows folds too: the assistant's Inbox, whose sort bar comes first on phones
         and its emails folded under it (the bar is the Inbox's decision, as the detail is a
         list's). Since P36 the bar comes first at every width (HANDOVER §4b), under the
         Tasks row and over the filters.
       - The canvas's tour corner label ("The tour") is gone, so the frame number sits alone. */
.pop .pend{margin:8px 0 0}
.pop .pclose{min-height:34px}
@media (max-width:879px){.list.folded>:not(.showall){display:none}}
.wbody.one{display:flex;flex-direction:column}
.wbody.one>.list{flex:1 1 auto;max-height:none;overflow:visible;border-right:0;border-bottom:0}
.wbody.one>.abar{order:0;border-top:0;border-bottom:1px solid var(--line)}
.wbody.one>.list{border-top:0}

/* 14. P30: the page's order follows what phones show first (WCAG 1.3.2, 2.4.3; the P28
       review's fix 3). Every list and detail is written detail first (kit.split), so a phone
       reads and Tabs through the selected item before "Show all N"; on wide screens the grid
       places the list back in the left column, so they look exactly as before. The Inbox is
       written bar first (its decision), and since P36 shows it first at every width too
       (HANDOVER §4b), so its page order is what every width shows. */
@media (min-width:880px){
 .wbody>.list{grid-column:1;grid-row:1}
 .wbody>.detail{grid-column:2;grid-row:1}
}

/* 15. Retired in P36: the subject line, the footer the tool adds and the skipped line are in
       part 1 since the Oct 15 design, as built. */

/* 16. P33: demos 4 and 5, creative intake and the chaser. Since the Oct 15 design, part 1 draws
       the lead line's gap, a field's note, the Unclear chip, the strip's two-line entries, the
       planned line, the confirmation's note and the chaser's facts and "Waiting on you since".
       What the build still adds (for design chat): the line under the strip for work that lands
       after this week ("Later: …"). */
.slater{margin:0;padding:0 16px 12px;background:var(--tint);border-bottom:1px solid var(--line);font-size:12px;color:var(--ink2)}