/* White paper, black ink, one electric-yellow highlighter (#FFFE59).
   Type: Plus Jakarta Sans (bold, upright, no italics) for everything; Geist Mono for numbers. */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F4F4F2; --surface-3:#E9E9E5; --line:#ECECE8; --line-2:#D9D9D3;
  --ink:#0B0B0C; --ink-2:#4A4A4F; --ink-3:#8B8B90;
  --accent:#0B0B0C; --accent-2:#2A2A2E; --accent-ink:#FFFFFF; --accent-soft:#F1F1EE;
  --pop:#FFFE59; --pop-ink:#0B0B0C; --pop-soft:#FFFFD6;
  --good:#12A150; --good-soft:#E6F6EC; --warn:#B87900; --warn-soft:#FDF3DC; --bad:#E5484D; --bad-soft:#FDECEC; --info:#3E63DD; --info-soft:#EBEFFC;
  --shadow:0 1px 1px rgba(11,11,12,.03),0 6px 24px -8px rgba(11,11,12,.10);
  --shadow-lg:0 30px 80px -20px rgba(11,11,12,.28);
  --f-display:"Plus Jakarta Sans","Geist",ui-sans-serif,system-ui,sans-serif;
  --f-serif:var(--f-display);
  --f-ui:"Plus Jakarta Sans","Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wide:112%;
  --r:24px; --r-md:16px; --r-sm:12px;
  --t-xs:11px; --t-sm:13px; --t-md:14.5px; --t-lg:18px;
  --ease:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A0A0A; --surface:#111111; --surface-2:#191918; --surface-3:#232321; --line:#242422; --line-2:#33332F;
  --ink:#F6F6F2; --ink-2:#B5B5AE; --ink-3:#7A7A74;
  --accent:#F6F6F2; --accent-2:#D8D8D2; --accent-ink:#0A0A0A; --accent-soft:#1F1F1D;
  --pop-soft:#2C2B0C;
  --good:#3DD68C; --good-soft:#12291D; --warn:#F5B83D; --warn-soft:#30260F; --bad:#FF6369; --bad-soft:#3A1719; --info:#849DFF; --info-soft:#182040;
  --shadow:0 1px 1px rgba(0,0,0,.3),0 8px 28px -10px rgba(0,0,0,.6); --shadow-lg:0 30px 80px -20px rgba(0,0,0,.8); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0A0A0A; --surface:#111111; --surface-2:#191918; --surface-3:#232321; --line:#242422; --line-2:#33332F;
  --ink:#F6F6F2; --ink-2:#B5B5AE; --ink-3:#7A7A74;
  --accent:#F6F6F2; --accent-2:#D8D8D2; --accent-ink:#0A0A0A; --accent-soft:#1F1F1D;
  --pop-soft:#2C2B0C;
  --good:#3DD68C; --good-soft:#12291D; --warn:#F5B83D; --warn-soft:#30260F; --bad:#FF6369; --bad-soft:#3A1719; --info:#849DFF; --info-soft:#182040;
  --shadow:0 1px 1px rgba(0,0,0,.3),0 8px 28px -10px rgba(0,0,0,.6); --shadow-lg:0 30px 80px -20px rgba(0,0,0,.8); color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body,#app{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t-md)/1.55 var(--f-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--ink);text-underline-offset:3px}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
.mono,.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)} .ink2{color:var(--ink-2)}
.eyebrow{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-3);font-weight:500}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px;box-shadow:0 0 0 6px var(--pop)}
::selection{background:var(--pop);color:#0B0B0C}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pop);box-shadow:0 0 0 1.5px var(--ink)}
mark.hl{font:inherit;color:#0B0B0C;background:linear-gradient(180deg,transparent 8%,var(--pop) 8%,var(--pop) 94%,transparent 94%);padding:0 .12em;margin:0 -.04em;border-radius:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.h1{font:800 clamp(30px,3.6vw,52px)/1.05 var(--f-display);letter-spacing:-.035em;text-wrap:balance}
.h2{font:800 clamp(20px,1.7vw,26px)/1.15 var(--f-display);letter-spacing:-.025em}

/* ---------- shapes ---------- */
.shape{display:block;width:100%;height:100%;fill:currentColor}
.badge-shape{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;flex:none;color:var(--surface-2);transition:color .35s var(--ease),transform .6s var(--spring)}
.badge-shape>svg.shape{position:absolute;inset:0}
.badge-shape .bs-ic{position:relative;color:var(--ink);display:grid;transition:color .35s var(--ease)}
.badge-shape .bs-ic svg{width:18px;height:18px}
.badge-shape.lg{width:60px;height:60px}.badge-shape.lg .bs-ic svg{width:23px;height:23px}
.badge-shape.xl{width:120px;height:120px}.badge-shape.xl .bs-ic svg{width:40px;height:40px}
.badge-shape.ink{color:var(--ink)} .badge-shape.ink .bs-ic{color:var(--bg)}
.badge-shape.pop{color:var(--pop)} .badge-shape.pop .bs-ic{color:#0B0B0C}
.empty .badge-shape.xl{color:var(--pop)} .empty .badge-shape.xl .bs-ic{color:#0B0B0C}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 17px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);cursor:pointer;font-size:var(--t-sm);font-weight:500;white-space:nowrap;text-decoration:none;transition:background .2s,border-color .2s,color .2s,transform .25s var(--spring),translate .3s var(--ease),box-shadow .25s}
.btn:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{box-shadow:0 0 0 4px var(--pop),0 12px 24px -10px rgba(11,11,12,.5)}
.btn.pop{background:var(--pop);border-color:#0B0B0C;color:#0B0B0C}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--surface-2);border-color:transparent}
.btn.danger{color:var(--bad)} .btn.danger:hover{background:var(--bad-soft);border-color:var(--bad)}
.btn.sm{height:32px;padding:0 13px;font-size:12px}
.btn.lg{height:52px;padding:0 24px;font-size:15px}
.btn.xl{height:64px;padding:0 32px;font-size:17px;font-weight:600}
.btn.icon{width:40px;padding:0}
.btn.sm.icon{width:32px}
.btn svg{width:15px;height:15px;flex:none;transition:transform .4s var(--spring)}
.btn:hover svg{transform:rotate(-8deg) scale(1.08)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn.on{background:var(--pop);border-color:#0B0B0C;color:#0B0B0C}
.input,select.input,textarea.input{width:100%;height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);transition:border-color .2s,box-shadow .2s;min-width:0}
textarea.input{height:auto;min-height:90px;padding:11px 14px;resize:vertical;line-height:1.55}
.input:hover{border-color:var(--ink-3)}
.input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px var(--pop)}
.input:disabled{background:var(--surface-2);color:var(--ink-2)}
.input.sm{height:34px;font-size:var(--t-sm);border-radius:10px;padding:0 10px}
label.f,div.f{display:flex;flex-direction:column;gap:6px;font-size:var(--t-sm);color:var(--ink-2);font-weight:500;min-width:0}
label.f .hint{font-weight:400;color:var(--ink-3);font-size:var(--t-xs)}
.check{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-sm);cursor:pointer}
.check input{accent-color:var(--ink);width:17px;height:17px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.span2{grid-column:span 2} .spanall{grid-column:1/-1}
@media (max-width:720px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)} .span2{grid-column:auto}}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .row.between{justify-content:space-between} .grow{flex:1;min-width:0}
.stack{display:flex;flex-direction:column;gap:16px}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;background:var(--surface);gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;height:32px;padding:0 14px;border-radius:999px;cursor:pointer;font-size:var(--t-sm);color:var(--ink-2);transition:background .25s var(--ease),color .2s;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--ink);color:var(--bg);font-weight:500}
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:var(--t-xs);font-weight:500;background:var(--surface-2);color:var(--ink-2);white-space:nowrap;border:1px solid transparent}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.plain::before{display:none}
.pill.good{background:var(--good-soft);color:var(--good)} .pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.bad{background:var(--bad-soft);color:var(--bad)} .pill.info{background:var(--info-soft);color:var(--info)} .pill.accent{background:var(--ink);color:var(--bg)} .pill.pop{background:var(--pop);color:#0B0B0C;border-color:#0B0B0C}
.pill.click{cursor:pointer;transition:transform .2s var(--spring),border-color .2s}
.pill.click:hover{transform:scale(1.06);border-color:currentColor}
.tag{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--surface-2);font-size:var(--t-xs);color:var(--ink-2);margin:1px 3px 1px 0}
.stars{letter-spacing:1px;color:var(--ink)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.pad{padding:18px} .pad-lg{padding:28px}
.divider{height:1px;background:var(--line);margin:6px 0}
kbd{font-family:var(--f-mono);font-size:10.5px;padding:2px 6px;border:1px solid var(--line-2);border-radius:6px;color:var(--ink-3);background:var(--surface)}
.linkbtn{background:none;border:0;color:var(--ink);cursor:pointer;padding:0 2px;font-weight:600;background-image:linear-gradient(transparent 62%,var(--pop) 62%);transition:background-size .3s}
.linkbtn:hover{background-image:linear-gradient(transparent 20%,var(--pop) 20%)}
.linkbtn.subtle{color:var(--ink-3);background-image:none;font-weight:500;margin-top:10px}
.warnbox{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--pop-soft);border:1px solid var(--line-2);font-size:13px}
.warnbox svg{width:16px;height:16px;flex:none;margin-top:2px}

/* ---------- stickers (draggable shapes) ---------- */
.stickers{position:absolute;inset:0;pointer-events:none;z-index:1}
.sticker{position:absolute;pointer-events:auto;cursor:grab;touch-action:none;user-select:none;rotate:calc(var(--r) + var(--tilt,0deg));transition:rotate .4s var(--spring),translate .9s var(--ease),scale .3s var(--spring);animation:bob 6s ease-in-out var(--d) infinite}
.sticker:hover{scale:1.06}
.sticker.grab{cursor:grabbing;scale:1.12;animation-play-state:paused;z-index:3;transition:rotate .2s,scale .3s var(--spring)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.stk-shape{width:var(--s,110px);height:var(--s,110px);color:var(--ink);display:grid;place-items:center;position:relative;filter:drop-shadow(0 18px 24px rgba(11,11,12,.16))}
.stk-shape>svg.shape{position:absolute;inset:0}
.stk-shape .lbl{position:relative;color:var(--bg);font:600 13px/1.1 var(--f-ui);text-align:center;padding:10px;display:grid;justify-items:center;gap:4px}
.stk-shape .lbl svg{width:26px;height:26px}
.stk-shape.pop{color:var(--pop)} .stk-shape.pop .lbl{color:#0B0B0C}
.stk-shape.pop>svg.shape{stroke:#0B0B0C;stroke-width:1.2}
.stk-shape.soft{color:var(--surface-2)} .stk-shape.soft .lbl{color:var(--ink)}
.stk-shape.line{color:transparent} .stk-shape.line>svg.shape{fill:var(--bg);stroke:var(--ink);stroke-width:1.5}
.stk-shape.line .lbl{color:var(--ink)}
.stk-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 16px;box-shadow:var(--shadow-lg);min-width:190px;display:grid;gap:6px;font-size:12.5px}
.stk-card b{font:800 26px/1 var(--f-display);letter-spacing:-.03em}
@media (max-width:720px){.sticker.hide-sm{display:none}}

/* ---------- landing ---------- */
.landing{min-height:100%;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));overflow-x:hidden}
.landing .wrap{max-width:1320px;margin:0 auto}
.lnav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px;position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.lnav-links{display:flex;gap:26px;font-size:var(--t-sm)}
.lnav-links a{text-decoration:none;color:var(--ink-2);background-image:linear-gradient(transparent 62%,var(--pop) 62%);background-size:0 100%;background-repeat:no-repeat;transition:background-size .3s var(--ease),color .2s}
.lnav-links a:hover{color:var(--ink);background-size:100% 100%}
@media (max-width:980px){.lnav-links{display:none}}
.logo{display:flex;align-items:center;gap:10px;font:800 20px/1 var(--f-display);letter-spacing:-.04em}
.logo b{display:inline-block;width:.34em;height:.34em;border-radius:50%;background:var(--pop);box-shadow:0 0 0 1.5px var(--ink);color:transparent;overflow:hidden;margin-left:2px;vertical-align:baseline;line-height:0}
.logo .mark{width:30px;height:30px;display:grid;place-items:center;color:var(--ink);position:relative}
.logo .mark svg.shape{position:absolute;inset:0;transition:rotate .8s var(--spring)}
.logo:hover .mark svg.shape{rotate:90deg}
.logo .mark i{position:relative;width:9px;height:9px;border-radius:50%;background:var(--pop)}
.hero2{padding-block:clamp(40px,8vh,90px) 40px;position:relative}
.mega{font:800 clamp(42px,5.8vw,86px)/1.02 var(--f-display);letter-spacing:-.045em;margin-top:24px;max-width:14ch}
.mega .ln{display:block}
.mega mark.hl{font-size:1.06em;line-height:.8}
.hero2-foot{display:grid;grid-template-columns:minmax(0,1.1fr) auto;gap:30px;align-items:end;margin-top:40px}
@media (max-width:900px){.hero2-foot{grid-template-columns:minmax(0,1fr)}}
.hero2 .sub{font-size:clamp(17px,1.5vw,21px);color:var(--ink-2);max-width:54ch;line-height:1.5}
.chip{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 15px;border:1px solid var(--line-2);border-radius:999px;font-size:var(--t-sm);color:var(--ink-2);background:var(--surface);position:relative;z-index:2;width:max-content;max-width:100%}
.mess{padding-block:70px 30px}
.mess-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.mess-head .h1{max-width:13ch;margin-top:12px}
.mess-stage{position:relative;height:clamp(460px,52vw,560px);border-radius:36px;background:var(--surface-2);overflow:hidden;background-image:radial-gradient(var(--line-2) 1.2px,transparent 1.4px);background-size:28px 28px;padding:24px;transition:height .6s var(--ease)}
.mess-stage.tidy{height:auto;min-height:340px;background-image:none}
.pain{position:absolute;width:min(270px,44%);min-height:96px;background:var(--surface);border:1px solid var(--line-2);border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);cursor:grab;touch-action:none;user-select:none;transition:left .7s var(--ease),top .7s var(--ease),rotate .7s var(--spring),background .4s,box-shadow .3s;display:grid;align-content:center}
.pain:nth-child(3n){background:var(--pop);border-color:#0B0B0C;color:#0B0B0C}
.pain:nth-child(5n){background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pain.grab{cursor:grabbing;box-shadow:var(--shadow-lg);z-index:5;transition:rotate .2s,box-shadow .2s}
.pain .q{font:700 clamp(17px,1.6vw,21px)/1.1 var(--f-display);letter-spacing:-.02em}
.pain .a{display:none;align-items:center;gap:10px}
.pain .a b{font-weight:600}
.mess-stage.tidy{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:720px){.mess-stage.tidy{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mess-stage.tidy .pain{position:relative;left:auto!important;top:auto!important;width:auto;rotate:0deg!important;background:var(--surface);color:var(--ink);border-color:var(--line);cursor:default;animation:pop .5s var(--spring) both;animation-delay:inherit}
.mess-stage.tidy .pain .q{font:400 12.5px/1.3 var(--f-ui);color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--ink-3);margin-bottom:10px}
.mess-stage.tidy .pain .a{display:flex}
.mess-stage.tidy .pain .badge-shape{width:38px;height:38px;color:var(--pop)} .mess-stage.tidy .pain .badge-shape .bs-ic{color:#0B0B0C}
.mess-note{margin-top:14px;font-size:13px}
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:24px;margin-block:60px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;gap:44px;width:max-content;animation:marq 70s linear infinite;font:800 clamp(22px,2.6vw,36px)/1 var(--f-display);letter-spacing:-.03em;white-space:nowrap}
.marquee:hover .track{animation-play-state:paused}
.marquee .track span{display:inline-flex;align-items:center;gap:44px}
.marquee .track i{width:28px;height:28px;display:inline-block;color:var(--pop)}
.marquee .track i svg{stroke:var(--ink);stroke-width:4}
@keyframes marq{to{transform:translateX(-50%)}}
.lsec{padding-block:110px 10px}
.lsec>.h1,.lsec .h1{margin-top:14px;max-width:20ch}
.lsec .lede{font-size:18px;color:var(--ink-2);max-width:58ch;margin-top:22px}
.persona-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:36px}
.persona-tabs button{height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);cursor:pointer;font-size:14px;transition:all .25s var(--ease)}
.persona-tabs button:hover{border-color:var(--ink)}
.persona-tabs button.on{background:var(--pop);border-color:#0B0B0C;color:#0B0B0C;font-weight:600}
.persona{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;margin-top:20px}
@media (max-width:900px){.persona{grid-template-columns:minmax(0,1fr)}}
.persona-l{background:var(--ink);color:var(--bg);border-radius:32px;padding:34px;display:flex;flex-direction:column;gap:24px}
.persona-l .h2{font-size:clamp(26px,2.8vw,40px);line-height:1.02}
.persona-l .btn.primary{background:var(--pop);border-color:var(--pop);color:#0B0B0C;align-self:flex-start;margin-top:auto}
.day{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.day li{display:grid;gap:4px;padding-left:16px;border-left:2px solid color-mix(in srgb,var(--bg) 20%,transparent);animation:rise .6s var(--ease) both;animation-delay:calc(var(--i) * 90ms);color:color-mix(in srgb,var(--bg) 80%,transparent)}
.day .stepn{font:500 11px var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--pop)}
.persona-r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:560px){.persona-r{grid-template-columns:minmax(0,1fr)}}
.ptool{display:flex;gap:14px;align-items:flex-start;background:var(--surface-2);border-radius:24px;padding:18px;animation:rise .6s var(--ease) both;animation-delay:calc(var(--i) * 60ms)}
.ptool b{display:block;font:700 18px/1.1 var(--f-display);letter-spacing:-.02em;margin-bottom:4px}
.ptool span{font-size:13px;color:var(--ink-2)}
.flows{display:grid;gap:14px;margin-top:44px}
.flow{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;align-items:center;padding:18px 22px;border:1px solid var(--line);border-radius:28px}
@media (max-width:760px){.flow{grid-template-columns:minmax(0,1fr)}}
.flow-t{font:800 22px/1 var(--f-display);letter-spacing:-.03em}
.flow-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.node{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:999px;background:var(--surface-2);font-weight:600;font-size:14px;transition:background .3s,transform .3s var(--spring)}
.node .badge-shape{width:36px;height:36px;color:var(--surface)} .node .badge-shape .bs-ic svg{width:15px;height:15px}
.flow:hover .node{animation:nodeglow 2.4s var(--ease) infinite;animation-delay:var(--d)}
@keyframes nodeglow{0%,100%{background:var(--surface-2)}20%{background:var(--pop);color:#0B0B0C}50%{background:var(--surface-2)}}
.arrow{color:var(--ink-3);display:grid} .arrow svg{width:18px;height:18px}
.calc{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;margin-top:40px}
@media (max-width:900px){.calc{grid-template-columns:minmax(0,1fr)}}
.calc-in{display:grid;gap:12px}
.cin{background:var(--surface-2);border-radius:24px;padding:18px 20px;display:grid;gap:10px;font-size:15px}
.cin b{font:800 26px/1 var(--f-display)}
.cin input[type=range]{width:100%;accent-color:var(--ink)}
.mins{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-3)}
.mins label{display:flex;align-items:center;gap:6px}
.mins .input{width:72px;height:30px}
.calc-out{background:var(--pop);color:#0B0B0C;border-radius:32px;padding:34px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;border:1px solid #0B0B0C}
.calc-out .eyebrow{color:#0B0B0C}
.calc-big b{display:block;font:900 clamp(96px,14vw,190px)/.8 var(--f-display);letter-spacing:-.07em}
.calc-big span{font:700 22px var(--f-display)}
.calc-out .muted{color:#3a3a20}
.explorer{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:8px}
.xcard{display:flex;flex-direction:column;gap:12px;padding:22px;border:1px solid var(--line);border-radius:26px;background:var(--surface);transition:border-color .3s,box-shadow .3s;animation:rise .5s var(--ease) both;animation-delay:calc(var(--i) * 25ms);position:relative}
.xcard:hover{border-color:var(--ink);box-shadow:var(--shadow)}
.xcard:hover .badge-shape{color:var(--pop);transform:rotate(-10deg)} .xcard:hover .badge-shape .bs-ic{color:#0B0B0C}
.xcard b{font:700 19px/1.1 var(--f-display);letter-spacing:-.02em}
.xcard span{font-size:13px;color:var(--ink-2);line-height:1.5}
.xcat{margin-top:auto;font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em}
.split2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
@media (max-width:900px){.split2{grid-template-columns:minmax(0,1fr)}}
.ticks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px}
.ticks li{display:flex;gap:12px;align-items:center;font-size:15px}
.ticks li::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--pop) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;border:1px solid #0B0B0C;flex:none}
.feedcard{background:var(--surface);border:1px solid var(--line);border-radius:32px;padding:20px;box-shadow:var(--shadow-lg)}
.fmtrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.fmtchip{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 22px;border-radius:999px;border:1px solid var(--line-2);font:700 17px var(--f-display);letter-spacing:-.02em;transition:transform .35s var(--spring)}
.fmtchip:hover{transform:translateY(-4px) rotate(-2deg)}
.fmtchip svg{width:20px;height:20px}
.fmtchip.ink{background:var(--ink);color:var(--bg);border-color:var(--ink)} .fmtchip.pop{background:var(--pop);color:#0B0B0C;border-color:#0B0B0C}
.faq{display:grid;gap:10px;margin-top:36px;max-width:900px}
.qa{border:1px solid var(--line);border-radius:22px;padding:0 22px;transition:background .2s}
.qa[open]{background:var(--surface-2)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 0;font:700 19px/1.2 var(--f-display);letter-spacing:-.02em}
.qa summary::-webkit-details-marker{display:none}
.qa summary span{width:32px;height:32px;border-radius:50%;background:var(--pop);display:grid;place-items:center;flex:none;transition:rotate .3s var(--ease);color:#0B0B0C}
.qa summary span svg{width:15px;height:15px}
.qa[open] summary span{rotate:45deg}
.qa p{padding:0 0 22px;color:var(--ink-2);max-width:70ch}
.finalcta{padding-block:140px 60px;display:grid;justify-items:start;gap:34px}
.mega2{font:800 clamp(40px,5.4vw,80px)/1.02 var(--f-display);letter-spacing:-.045em}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
@media (max-width:900px){.plans{grid-template-columns:minmax(0,1fr)}}
.plan{padding:30px;display:flex;flex-direction:column;gap:16px;border-radius:30px;border:1px solid var(--line);background:var(--surface);position:relative;overflow:hidden}
.plan.hl{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.plan.hl .muted,.plan.hl ul{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.plan.hl .btn{background:var(--pop);color:#0B0B0C;border-color:var(--pop)}
.plan.hl .btn.ghost{background:transparent;color:var(--bg);border-color:transparent}
.plan .pname{font:800 24px/1 var(--f-display);letter-spacing:-.03em}
.plan .price{font:800 clamp(38px,3.6vw,54px)/1 var(--f-display);letter-spacing:-.04em}
.plan .price small{font:400 var(--t-sm)/1 var(--f-ui);letter-spacing:0;opacity:.6}
.plan ul{margin:0;padding:0;list-style:none;color:var(--ink-2);display:grid;gap:8px;font-size:var(--t-sm)}
.plan ul li{display:flex;gap:9px;align-items:flex-start}
.plan ul li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pop);box-shadow:0 0 0 1.5px var(--ink);margin-top:6px;flex:none}
.plan.hl ul li::before{box-shadow:none}
.lfoot{padding-block:70px 40px;border-top:1px solid var(--line);overflow:hidden}
.lfoot a{text-decoration:none}
.lfoot .wordmark{font:800 clamp(64px,14vw,230px)/.85 var(--f-display);letter-spacing:-.06em;color:var(--surface-2);user-select:none;margin-top:40px;white-space:nowrap}
.rise{animation:rise .9s var(--ease) both}
@keyframes rise{from{opacity:.001;transform:translateY(16px)}to{opacity:1;transform:none}}
.rv{transition:transform 1s var(--ease),opacity 1s var(--ease)}
.rv.rv-wait{transform:translateY(40px);opacity:.25}
.rv.rv-wait.in{transform:none;opacity:1}

/* ---------- auth ---------- */
.auth{min-height:100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.auth .art{position:relative;background:var(--surface-2);overflow:hidden;padding:40px;display:flex;flex-direction:column;justify-content:space-between;min-height:100%;background-image:radial-gradient(var(--line-2) 1.2px,transparent 1.4px);background-size:28px 28px}
.auth .art h2{font:800 clamp(36px,4.2vw,64px)/1.04 var(--f-display);letter-spacing:-.04em;max-width:12ch;position:relative;z-index:2;pointer-events:none}
.auth .formside{display:grid;place-items:center;padding-block:40px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.auth .box{width:100%;max-width:430px;display:grid;gap:22px}
.auth h1{font:800 clamp(32px,3vw,42px)/1.05 var(--f-display);letter-spacing:-.035em}
.auth form{display:grid;gap:14px}
.auth .alt{font-size:var(--t-sm);color:var(--ink-3);text-align:center}
.auth .err{color:var(--bad);font-size:var(--t-sm);min-height:1em}
@media (max-width:860px){.auth{grid-template-columns:minmax(0,1fr)}.auth .art{min-height:300px;padding:24px}}
.pwwrap{position:relative}.pwwrap .btn{position:absolute;right:5px;top:5px;height:34px}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:272px minmax(0,1fr);height:100%}
.side{border-right:1px solid var(--line);background:var(--bg);display:flex;flex-direction:column;min-height:0;padding-left:env(safe-area-inset-left,0px)}
.side .top{padding:20px 16px 12px;display:grid;gap:16px}
.searchbtn{display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--ink-3);cursor:pointer;font-size:var(--t-sm);width:100%;transition:border-color .2s}
.searchbtn:hover{border-color:var(--ink)}
.searchbtn svg{width:14px;height:14px} .searchbtn kbd{margin-left:auto}
.nav{overflow:auto;padding:4px 10px 14px;flex:1;min-height:0;scrollbar-width:thin}
.nav .grp{margin-top:16px}
.nav .grp>button.gh{display:flex;width:100%;align-items:center;justify-content:space-between;border:0;background:none;padding:4px 12px;cursor:pointer;color:var(--ink-3);font-size:10.5px;text-transform:uppercase;letter-spacing:.16em;font-weight:500}
.nav .grp>button.gh svg{width:12px;height:12px;transition:transform .3s var(--ease)}
.nav .grp.closed>button.gh svg{transform:rotate(-90deg)}
.nav .grp.closed .items{display:none}
a.it{display:flex;align-items:center;gap:10px;height:36px;padding:0 12px;border-radius:999px;color:var(--ink-2);text-decoration:none;font-size:var(--t-sm);cursor:pointer;position:relative;transition:background .2s,color .2s,padding .3s var(--ease)}
a.it .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.it svg{width:15px;height:15px;flex:none;color:var(--ink-3);transition:color .2s,transform .4s var(--spring)}
a.it:hover{background:var(--surface-2);color:var(--ink);padding-left:16px}
a.it:hover svg{transform:scale(1.12);color:var(--ink)}
a.it.on{background:var(--ink);color:var(--bg);font-weight:500}
a.it.on svg{color:var(--pop)}
a.it.on::after{content:"";position:absolute;right:13px;width:7px;height:7px;border-radius:50%;background:var(--pop)}
a.it .lk{margin-left:auto;width:12px;height:12px;opacity:.5}
a.it .cnt{margin-left:auto;font:500 10px var(--f-mono);background:var(--surface-3);color:var(--ink-2);border-radius:999px;padding:2px 7px}
a.it .cnt.hot{background:var(--pop);color:#0B0B0C;border:1px solid #0B0B0C}
a.it.on .cnt{display:none}
.side .bottom{border-top:1px solid var(--line);padding:10px;display:grid;gap:2px;padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
.me{display:flex;align-items:center;gap:10px;padding:8px;border-radius:18px;margin-top:6px;background:var(--surface-2)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font:700 12px var(--f-display);flex:none}
.avatar.sm{width:30px;height:30px;font-size:11px} .avatar.xs{width:22px;height:22px;font-size:9px}
.avatar.staff{background:var(--pop);color:#0B0B0C;box-shadow:inset 0 0 0 1.5px #0B0B0C}
.me .who{min-width:0;flex:1} .me .who b{display:block;font-size:var(--t-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .me .who span{font-size:var(--t-xs);color:var(--ink-3);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.main{min-width:0;overflow:auto;height:100%;position:relative}
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px);display:flex;align-items:center;gap:6px;height:64px;padding:0 max(32px,env(safe-area-inset-right,0px)) 0 32px;border-bottom:1px solid transparent;transition:border-color .3s}
.main.scrolled .topbar{border-bottom-color:var(--line)}
.topbar .crumb{font-size:var(--t-sm);color:var(--ink-3);display:flex;gap:8px;align-items:center;min-width:0}
.topbar .crumb b{color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .mobile-menu{display:none}
.topbar .btn.on{background:var(--pop);border-color:#0B0B0C;color:#0B0B0C}
.bell{position:relative}.bell .n{position:absolute;top:3px;right:2px;min-width:17px;height:17px;border-radius:9px;background:var(--pop);color:#0B0B0C;font:600 10px/15px var(--f-mono);text-align:center;padding:0 4px;border:1px solid #0B0B0C}
.announce{background:var(--ink);color:var(--bg);font-size:var(--t-sm);padding:10px 32px;display:flex;gap:10px;align-items:center}
.announce.bill{background:var(--pop);color:#0B0B0C}
.announce.bill .linkbtn{background-image:linear-gradient(transparent 62%,#0B0B0C33 62%);color:#0B0B0C}
.announce button:not(.linkbtn){margin-left:auto;background:none;border:0;color:inherit;cursor:pointer;opacity:.7}
.view{padding:36px max(48px,env(safe-area-inset-right,0px)) 120px 48px;max-width:1440px;animation:viewin .6s var(--ease) both}
@keyframes viewin{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
.vhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:36px;position:relative}
.vhead>div:first-child{min-width:0;max-width:900px}
.vhead h1{font:800 clamp(30px,3.3vw,46px)/1.08 var(--f-display);letter-spacing:-.035em}
.vhead p{color:var(--ink-3);font-size:var(--t-md);margin-top:18px;max-width:64ch;line-height:1.55}
.vhead .ey{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.vhead .ey .badge-shape{width:34px;height:34px;color:var(--pop)}.vhead .ey .badge-shape .bs-ic{color:#0B0B0C}.vhead .ey .badge-shape .bs-ic svg{width:14px;height:14px}
.vhead .ey .badge-shape>svg.shape{stroke:#0B0B0C;stroke-width:3}
.vhead>.row:first-child{flex-direction:column;align-items:flex-start;gap:4px}
.vhead>.row:first-child h1{margin-left:0!important;font-size:clamp(28px,3vw,42px)}
.vhead>.row:first-child .btn.ghost{margin-left:-12px}
.vhead .deco{position:absolute;right:-70px;top:-120px;width:300px;height:300px;color:var(--surface-2);opacity:.7;z-index:-1;animation:spin 70s linear infinite;pointer-events:none}
@keyframes spin{to{rotate:360deg}}
.fab{position:fixed;right:max(24px,env(safe-area-inset-right,0px));bottom:max(24px,env(safe-area-inset-bottom,0px));z-index:30;width:62px;height:62px;border-radius:50%;background:var(--pop);color:#0B0B0C;border:1.5px solid #0B0B0C;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow-lg);transition:transform .4s var(--spring)}
.fab:hover{transform:scale(1.08) rotate(90deg)}
.fab svg{width:26px;height:26px}
.fabmenu{position:fixed;right:max(24px,env(safe-area-inset-right,0px));bottom:calc(max(24px,env(safe-area-inset-bottom,0px)) + 74px);z-index:61;display:grid;gap:6px;justify-items:end}
.fabmenu button{display:flex;align-items:center;gap:10px;height:42px;padding:0 18px 0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);cursor:pointer;font-size:var(--t-sm);font-weight:500;animation:fabin .4s var(--spring) both;animation-delay:calc(var(--i) * 30ms)}
.fabmenu button:hover{background:var(--ink);color:var(--bg)}
.fabmenu button svg{width:16px;height:16px}
@keyframes fabin{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;inset:0 auto 0 0;width:292px;z-index:40;transform:translateX(-102%);transition:transform .4s var(--ease),visibility .4s;visibility:hidden}
  .side.open{transform:none;box-shadow:var(--shadow-lg);visibility:visible}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:39;animation:fade .2s}
  .topbar{padding:0 max(14px,env(safe-area-inset-right,0px)) 0 max(14px,env(safe-area-inset-left,0px));gap:2px}
  .topbar .mobile-menu{display:inline-flex}
  [data-keys],[data-pal2] kbd,.hide-xs{display:none!important}
  .view{padding:18px max(18px,env(safe-area-inset-right,0px)) 120px max(18px,env(safe-area-inset-left,0px))}
  .vhead .deco{width:180px;height:180px;right:-50px;top:-60px}
  .announce{padding:10px 18px}
}

/* ---------- stats ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:26px}
.kpi{background:var(--surface-2);padding:22px 22px 20px;display:grid;gap:8px;min-width:0;border-radius:var(--r);position:relative;overflow:hidden;transition:transform .4s var(--ease),background .3s}
.kpi:hover{transform:translateY(-3px);background:var(--surface-3)}
.kpi .l{font-size:var(--t-xs);color:var(--ink-3);text-transform:uppercase;letter-spacing:.13em;display:flex;align-items:center;gap:7px}
.kpi .l::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
.kpi .v{font:800 clamp(22px,1.9vw,30px)/1.05 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .s{font-size:var(--t-xs);color:var(--ink-3)}
.kpi.good .l::before{background:var(--good)} .kpi.bad .l::before{background:var(--bad)} .kpi.warn .l::before{background:var(--warn)} .kpi.accent .l::before{background:var(--pop);box-shadow:0 0 0 1.5px var(--ink)}
.kpi.bad .v{color:var(--bad)}
.kpi:first-child{background:var(--ink);color:var(--bg)} .kpi:first-child .l,.kpi:first-child .s{color:color-mix(in srgb,var(--bg) 60%,transparent)} .kpi:first-child:hover{background:var(--accent-2)}
.kpi:first-child .l::before{background:var(--pop);box-shadow:none}
@media (max-width:560px){.kpis{grid-template-columns:1fr 1fr}.kpis .kpi:last-child:nth-child(odd){grid-column:span 2}.kpi{padding:16px}.kpi .v{font-size:22px}}

/* ---------- table ---------- */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar .search{position:relative;flex:1;min-width:200px;max-width:380px}
.toolbar .search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-3)}
.toolbar .search input{padding-left:38px;border-radius:999px}
.toolbar select.input{width:auto;max-width:220px;border-radius:999px;height:40px}
.toolbar select.input.sm{height:32px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.t{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
table.t th{text-align:left;font-weight:500;color:var(--ink-3);font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;padding:15px 16px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface);position:sticky;top:0;cursor:pointer;user-select:none;z-index:1}
table.t th:hover{color:var(--ink)}
table.t th.nosort{cursor:default} table.t th.nosort:hover{color:var(--ink-3)}
table.t th .ar{margin-left:5px;background:var(--pop);color:#0B0B0C;border-radius:4px;padding:0 3px}
table.t td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr{transition:background .15s}
table.t tbody tr.click{cursor:pointer}
table.t tbody tr:hover{background:var(--surface-2)}
table.t tbody tr.sel{background:var(--pop-soft)}
table.t td.r,table.t th.r{text-align:right}
table.t td.num{font-family:var(--f-mono)}
table.t tfoot td{font-weight:600;background:var(--surface-2);border-top:1px solid var(--line)}
table.t tr.subtot td{background:var(--surface-2);font-size:12px;color:var(--ink-2)}
table.t tr.grouprow td{background:var(--bg);cursor:pointer;padding:10px 12px;font-size:14px}
table.t tr.grouprow td b{font:700 15px var(--f-display);margin-right:6px}
table.t tr.grouprow:hover td{background:var(--surface-2)}
table.t tr.alert-bad td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
table.t tr.alert-warn td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
table.t input[type=checkbox]{accent-color:var(--ink);width:15px;height:15px;vertical-align:middle}
td.chk{white-space:nowrap}
.starbtn{border:0;background:none;padding:2px;margin-left:6px;cursor:pointer;color:var(--line-2);vertical-align:middle;transition:color .2s,transform .3s var(--spring)}
.starbtn svg{width:15px;height:15px}
.starbtn:hover{color:var(--ink);transform:scale(1.2)}
.starbtn.on{color:#0B0B0C} .starbtn.on svg{fill:var(--pop);stroke:#0B0B0C}
.starmini svg{width:14px;height:14px;fill:var(--pop);stroke:#0B0B0C}
table.t .rowact{opacity:0;transition:opacity .2s}
table.t tr:hover .rowact{opacity:1}
@media (hover:none){table.t .rowact{opacity:1}}
.pager{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;font-size:var(--t-sm);color:var(--ink-3);flex-wrap:wrap}
.bulkbar{position:sticky;bottom:20px;z-index:6;margin:14px auto 0;width:max-content;max-width:100%;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--ink);color:var(--bg);padding:8px 8px 8px 18px;border-radius:999px;box-shadow:var(--shadow-lg);animation:fabin .35s var(--spring) both}
.bulkbar .btn{background:transparent;border-color:color-mix(in srgb,var(--bg) 25%,transparent);color:var(--bg)}
.bulkbar .btn:hover{background:var(--pop);color:#0B0B0C;border-color:var(--pop)}
.bulkbar select{background:transparent;color:var(--bg);border-color:color-mix(in srgb,var(--bg) 25%,transparent)}
.bulkbar select option,.bulkbar select optgroup{color:var(--ink);background:var(--surface)}
.empty{padding:70px 24px;text-align:center;display:grid;gap:14px;justify-items:center;color:var(--ink-3)}
.empty .badge-shape{margin-bottom:8px}
.empty b{color:var(--ink);font:800 clamp(20px,1.9vw,26px)/1.15 var(--f-display);letter-spacing:-.025em}
.empty span{max-width:50ch}
.datechips{display:inline-flex;gap:4px;flex-wrap:wrap}
.datechips button{height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font-size:12px;cursor:pointer;color:var(--ink-2);transition:all .2s}
.datechips button:hover{border-color:var(--ink);color:var(--ink)}
.datechips button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* ---------- board ---------- */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(272px,1fr);gap:14px;overflow-x:auto;padding-bottom:10px}
.col{background:var(--surface-2);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:8px;min-height:240px;transition:background .2s,outline-color .2s;outline:2px dashed transparent;outline-offset:-2px}
.col.over{outline-color:var(--ink);background:var(--pop-soft)}
.col .ch{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 8px;font:700 15px/1 var(--f-display);letter-spacing:-.01em}
.col .ch .n{font:500 11px var(--f-mono);color:var(--ink-3);background:var(--surface);padding:4px 8px;border-radius:999px;letter-spacing:0}
.col .addc{border:1px dashed var(--line-2);background:transparent;border-radius:14px;height:40px;color:var(--ink-3);cursor:pointer;font-size:12.5px;transition:all .2s}
.col .addc:hover{border-color:var(--ink);color:var(--ink);background:var(--surface)}
.bcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;cursor:grab;display:grid;gap:8px;font-size:var(--t-sm);transition:box-shadow .25s,transform .35s var(--spring),border-color .2s}
.bcard:hover{box-shadow:var(--shadow);transform:translateY(-2px) rotate(-.4deg);border-color:var(--line-2)}
.bcard.drag{opacity:.35;transform:rotate(3deg) scale(.98)}
.bcard b{font-weight:600}
.bcard .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;color:var(--ink-3);font-size:var(--t-xs)}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;z-index:60;background:color-mix(in srgb,var(--bg) 40%,rgba(10,10,12,.35));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:16px;animation:fade .25s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow-lg);width:100%;max-width:560px;max-height:min(90vh,940px);display:flex;flex-direction:column;animation:pop .45s var(--spring) both}
.modal.wide{max-width:900px}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.modal .mh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:24px 26px 8px}
.modal .mh h3{font:800 22px/1.15 var(--f-display);letter-spacing:-.025em;overflow-wrap:anywhere}
.modal .mb{padding:14px 26px 22px;overflow:auto;display:grid;gap:14px}
.modal .mf{padding:14px 26px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.overlay.drawer{justify-content:flex-end;padding:10px}
.overlay.drawer .modal{height:100%;max-height:none;max-width:600px;animation:slidein .5s var(--ease) both}
.modal .meta-line{font-size:var(--t-xs);color:var(--ink-3)}
@keyframes slidein{from{transform:translateX(60px);opacity:0}to{transform:none;opacity:1}}
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:max(24px,env(safe-area-inset-bottom,0px));z-index:90;display:grid;gap:8px;justify-items:center;pointer-events:none}
.toast{pointer-events:auto;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:999px;font-size:var(--t-sm);box-shadow:var(--shadow-lg);animation:toastin .5s var(--spring) both;max-width:min(480px,90vw);display:flex;gap:10px;align-items:center;transition:opacity .3s,transform .3s}
.toast svg{color:var(--pop)}
.toast.out{opacity:0;transform:translateY(10px)}
.toast.bad{background:var(--bad);color:#fff} .toast.bad svg{color:#fff}
.toast-act{margin-left:6px;background:var(--pop);color:#0B0B0C;border:0;border-radius:999px;height:26px;padding:0 12px;cursor:pointer;font-weight:600;font-size:12px}
@keyframes toastin{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:none}}
.palette{max-width:660px;align-self:flex-start;margin-top:10vh}
.palette input{border:0;height:66px;font:600 20px var(--f-display);letter-spacing:-.02em;padding:0 26px;background:transparent;width:100%;outline:none;border-bottom:1px solid var(--line)}
.palette .res{max-height:54vh;overflow:auto;padding:8px}
.palette .ri{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;cursor:pointer;font-size:var(--t-md)}
.palette .ri svg{width:16px;height:16px;color:var(--ink-3)}
.palette .ri.on{background:var(--pop);color:#0B0B0C} .palette .ri.on svg,.palette .ri.on small{color:#0B0B0C}
.palette .ri small{margin-left:auto;color:var(--ink-3)}
.fmtgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:640px){.fmtgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fmt{border:1px solid var(--line);background:var(--surface);border-radius:22px;padding:18px 16px;text-align:left;cursor:pointer;display:grid;gap:4px;position:relative;transition:transform .35s var(--spring),border-color .2s,background .2s}
.fmt:hover{transform:translateY(-3px);border-color:var(--ink)}
.fmt b{font:800 19px/1 var(--f-display);letter-spacing:-.02em;margin-top:22px}
.fmt small{color:var(--ink-3);font-size:12px}
.fmt .fmt-ic{width:38px;height:38px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;transition:background .2s,color .2s}
.fmt .fmt-ic svg{width:17px;height:17px}
.fmt:hover .fmt-ic{background:var(--pop);color:#0B0B0C}
.fmt .fmt-ext{position:absolute;top:16px;right:14px;font:500 10.5px var(--f-mono);color:var(--ink-3)}
.fmt.busy{border-color:var(--ink)} .fmt.busy .fmt-ic{background:var(--pop);color:#0B0B0C;animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(.88)}}
.kbdlist{display:grid;gap:9px}.kbdlist div{display:flex;justify-content:space-between;gap:12px;font-size:var(--t-sm)}
.libgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.libgrid.one{grid-template-columns:minmax(0,1fr)}
@media (max-width:640px){.libgrid{grid-template-columns:minmax(0,1fr)}}
.libitem{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:16px;cursor:pointer;transition:border-color .2s,background .2s}
.libitem:hover{border-color:var(--ink)} .libitem:has(input:checked){background:var(--pop-soft);border-color:var(--ink)}
.libitem input{accent-color:var(--ink);width:17px;height:17px;margin-top:2px}
.libitem b{display:block;font-weight:600} .libitem small{color:var(--ink-3)}

/* ---------- tour ---------- */
.tour{position:fixed;inset:0;z-index:100}
.tour::before{content:"";position:absolute;inset:0;background:transparent}
.tour.center::before{background:rgba(10,10,12,.5);backdrop-filter:blur(3px)}
.tour-spot{position:fixed;border-radius:18px;box-shadow:0 0 0 3px var(--pop),0 0 0 9999px rgba(10,10,12,.55);transition:left .45s var(--ease),top .45s var(--ease),width .45s var(--ease),height .45s var(--ease);pointer-events:none}
.tour-card{position:fixed;width:min(380px,calc(100vw - 20px));background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:20px 20px 16px;box-shadow:var(--shadow-lg);display:grid;gap:10px;transition:left .45s var(--ease),top .45s var(--ease)}
.tour-card.in{animation:pop .45s var(--spring) both}
.tour-top{display:flex;justify-content:space-between;align-items:center}
.tour-n{font:500 11px var(--f-mono);background:var(--pop);color:#0B0B0C;padding:3px 9px;border-radius:999px;border:1px solid #0B0B0C}
.tour-card h4{font:800 20px/1.15 var(--f-display);letter-spacing:-.02em}
.tour-card p{color:var(--ink-2);font-size:14px;line-height:1.55}
.tour-ol{margin:6px 0 0;padding-left:20px;display:grid;gap:4px}
.tour-dots{display:flex;gap:4px;flex-wrap:wrap;margin:2px 0 4px}
.tour-dots i{width:16px;height:4px;border-radius:4px;background:var(--surface-3);transition:background .3s,width .3s}
.tour-dots i.done{background:var(--ink-3)} .tour-dots i.on{background:var(--ink);width:28px}

/* ---------- learn ---------- */
.learncards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.lcard{display:flex;flex-direction:column;gap:12px;padding:22px;border:1px solid var(--line);border-radius:26px;background:var(--surface);transition:border-color .3s,box-shadow .3s}
.lcard:hover{border-color:var(--ink);box-shadow:var(--shadow)}
.lcard.done{background:var(--surface-2)}
.lcard h3{font:700 19px/1.15 var(--f-display);letter-spacing:-.02em}
.lcard p{font-size:13.5px;color:var(--ink-2)}
.lcard ol{margin:0;padding-left:20px;font-size:13px;color:var(--ink-2);display:grid;gap:4px}
.tipline{background:var(--pop-soft);border-radius:12px;padding:10px 12px}
.tipline b{background:var(--pop);color:#0B0B0C;padding:1px 6px;border-radius:5px;font-size:11px;margin-right:4px}

/* ---------- team / activity ---------- */
.feed{display:grid}
.feed-day{font:800 13px var(--f-display);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);padding:22px 0 8px}
.feed-item{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;transition:background .15s;font-size:var(--t-sm)}
.feed-item.click{cursor:pointer} .feed-item:hover{background:var(--surface-2)}
.feed-item .when{font-size:11px;white-space:nowrap}
.verb{font-weight:600;padding:1px 7px;border-radius:6px;background:var(--surface-2)}
.verb.v-added{background:var(--good-soft);color:var(--good)} .verb.v-deleted{background:var(--bad-soft);color:var(--bad)} .verb.v-updated{background:var(--info-soft);color:var(--info)} .verb.v-restored,.verb.v-approved{background:var(--pop);color:#0B0B0C}
.chg{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:3px;font-size:12px;color:var(--ink-2)}
.chg s{color:var(--ink-3)}
.roles{display:grid;gap:8px}
.rolecard{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:16px;cursor:pointer;transition:all .2s}
.rolecard:has(input:checked){border-color:var(--ink);background:var(--pop-soft)}
.rolecard input{accent-color:var(--ink);margin-top:3px}
.rolecard b{display:block} .rolecard small{color:var(--ink-3)}
.toolpick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-height:340px;overflow:auto;padding:12px;border:1px solid var(--line);border-radius:16px;margin-top:8px}
.toolpick>div{display:grid;gap:6px;align-content:start}
@media (max-width:560px){.toolpick{grid-template-columns:minmax(0,1fr)}}
.cred{display:grid;gap:10px;padding:16px;border-radius:18px;background:var(--surface-2)}
.cred div{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cred b{user-select:all}
.comments{display:grid;gap:10px}
.cmt{display:flex;gap:10px;font-size:13px}.cmt p{margin-top:2px;white-space:pre-wrap}
.rec-tabs{border-top:1px solid var(--line);padding-top:14px}
.tabs.sm{margin-bottom:12px}.tabs.sm button{height:32px;font-size:12px}
.timeline{display:grid;gap:12px}
.tl{display:flex;gap:10px;font-size:13px}.tl .dot{margin-top:6px;flex:none}
.tl ul{margin:4px 0 0;padding-left:16px;color:var(--ink-2);font-size:12px}

/* ---------- admin / billing ---------- */
.planed .pb{padding-top:4px}
.billnow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px;border-radius:26px;background:var(--surface-2);margin-bottom:16px}
.billnow .h2{margin:6px 0 4px}
.steps2{display:grid;gap:14px}
.steps2>div{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:20px}
.steps2 p{font-size:13px;margin:4px 0 10px}
.stepn{width:30px;height:30px;border-radius:50%;background:var(--pop);color:#0B0B0C;display:grid;place-items:center;font:700 13px var(--f-mono);flex:none;border:1px solid #0B0B0C}

/* ---------- dashboard ---------- */
.dhero{position:relative;padding-block:16px 44px;margin-bottom:8px}
.dhero h1{font:800 clamp(32px,3.8vw,54px)/1.08 var(--f-display);letter-spacing:-.035em;margin-top:18px}
.dhero .date{font-size:var(--t-md);color:var(--ink-3);margin-top:22px;position:relative;z-index:2;max-width:60ch}
.dhero .acts{margin-top:30px;position:relative;z-index:2}
.setup{border:1px solid var(--line);border-radius:30px;padding:26px;margin-bottom:26px;display:grid;gap:18px}
.setup .h2{margin-top:6px}
.progress.big{height:10px}
.progress.big i{background:var(--ink)}
.setupgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:900px){.setupgrid{grid-template-columns:minmax(0,1fr)}}
.setupitem{display:flex;gap:12px;align-items:center;text-align:left;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--surface);cursor:pointer;transition:all .25s var(--ease)}
.setupitem:hover{border-color:var(--ink);transform:translateY(-2px)}
.setupitem b{display:block;font-weight:600;font-size:14px} .setupitem small{color:var(--ink-3);font-size:12px}
.sn{width:34px;height:34px;border-radius:50%;border:1.5px dashed var(--line-2);display:grid;place-items:center;font:600 13px var(--f-mono);flex:none}
.setupitem.done{background:var(--surface-2);opacity:.8} .setupitem.done b{text-decoration:line-through}
.setupitem.done .sn{background:var(--pop);border:1px solid #0B0B0C;color:#0B0B0C} .sn svg{width:15px;height:15px}
.chartempty{display:grid;justify-items:center;gap:12px;padding:40px 10px;color:var(--ink-3);text-align:center;font-size:13px}
.chartempty>svg{width:30px;height:30px}
.dgrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px}
@media (max-width:1060px){.dgrid{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);min-width:0;position:relative;transition:border-color .3s}
.panel:hover{border-color:var(--line-2)}
.panel .ph{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;gap:10px;flex-wrap:wrap}
.panel .ph h3{font:700 16px/1.25 var(--f-display);letter-spacing:-.015em}
.panel .pb{padding:4px 22px 22px;min-width:0}
.panel .snapbtn{opacity:0;transition:opacity .2s}
.panel:hover .snapbtn{opacity:1}
@media (hover:none){.panel .snapbtn{opacity:1}}
.list{display:grid}
.list .li{display:flex;align-items:center;gap:12px;padding:12px 22px;border-top:1px solid var(--line);font-size:var(--t-sm);min-width:0;transition:background .15s,padding .3s var(--ease)}
.list .li[data-go]:hover{background:var(--surface-2);padding-left:28px}
.list .li .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.tile{display:flex;flex-direction:column;gap:30px;align-items:flex-start;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;text-align:left;transition:border-color .3s,box-shadow .3s,transform .3s var(--ease);min-width:0;position:relative;overflow:hidden;will-change:transform}
.tile::after{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--pop) 35%,transparent),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.tile:hover{border-color:var(--ink);box-shadow:var(--shadow)}
.tile:hover::after{opacity:1}
.tile:hover .badge-shape{color:var(--ink);transform:rotate(-12deg) scale(1.06)}
.tile:hover .badge-shape .bs-ic{color:var(--pop)}
.tile b{display:block;font:700 17px/1.2 var(--f-display);letter-spacing:-.02em}
.tile span.d{font-size:12.5px;color:var(--ink-3);display:block;line-height:1.45;margin-top:6px}
.tile .lockb{position:absolute;top:18px;right:18px;color:var(--ink-3)} .tile .lockb svg{width:14px;height:14px}
.tile .go{position:absolute;top:18px;right:18px;opacity:0;transform:translate(-6px,6px);transition:all .3s var(--ease)} .tile .go svg{width:18px;height:18px}
.tile:hover .go{opacity:1;transform:none}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{fill:var(--ink-3);font:10.5px var(--f-mono)}
.chart .grid line{stroke:var(--line);stroke-dasharray:2 4}
.chart .bar{fill:var(--ink);transform-box:fill-box;transform-origin:bottom;animation:grow .9s var(--ease) both;animation-delay:calc(var(--i,0) * 60ms);transition:fill .2s}
.chart .bar:hover{fill:var(--pop);stroke:#0B0B0C;stroke-width:1.5}
.chart .bar2{fill:var(--surface-3);transform-box:fill-box;transform-origin:bottom;animation:grow .9s var(--ease) both;animation-delay:calc(var(--i,0) * 60ms + 80ms)}
.chart .bar.neg{fill:var(--bad)}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.chart .ln{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.4s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.chart .ln2{fill:none;stroke:var(--ink-3);stroke-width:2;stroke-dasharray:4 4}
.chart .area{fill:var(--pop-soft);animation:fade 1s both}
.chart .dot{fill:var(--pop);stroke:var(--ink);stroke-width:2}
.legend{display:flex;gap:14px;font-size:var(--t-xs);color:var(--ink-3);flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.hbar{display:grid;gap:12px}
.hbar .hr{display:grid;grid-template-columns:minmax(80px,150px) minmax(0,1fr) auto;gap:12px;align-items:center;font-size:var(--t-sm)}
.hbar .tr{height:10px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.hbar .fl{height:100%;background:var(--ink);border-radius:999px;animation:widen 1.1s var(--ease) both;transform-origin:left}
.hbar .hr:hover .fl{background:var(--pop);box-shadow:inset 0 0 0 1px #0B0B0C}
.hbar .fl.bad{background:var(--bad)} .hbar .fl.warn{background:var(--warn)}
@keyframes widen{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.progress{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden;min-width:60px}
.progress i{display:block;height:100%;background:var(--ink);border-radius:999px;animation:widen 1s var(--ease) both;transform-origin:left}

/* ---------- documents ---------- */
.docsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px;align-items:start}
@media (max-width:1140px){.docsplit{grid-template-columns:minmax(0,1fr)}}
.items-ed{display:grid;gap:8px}
.items-ed .ir{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,.7fr) minmax(0,.8fr) 30px;gap:6px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}
.items-ed .ir>[data-f="desc"]{grid-column:1/6;grid-row:1;background:var(--surface)}
.items-ed .ir>[data-rm]{grid-column:6;grid-row:1}
.items-ed .ir.hd{display:none}
.items-ed .mini{display:grid;gap:3px;font-size:9.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;min-width:0}
.items-ed.nop .ir{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 30px}.items-ed.nop .ir>[data-f="desc"]{grid-column:1/3}.items-ed.nop .ir>[data-rm]{grid-column:3}
.paper{background:#fff;color:#111;border:1px solid var(--line);border-radius:22px;padding:46px 42px;font-size:12.5px;line-height:1.5;box-shadow:var(--shadow-lg);position:sticky;top:84px;min-width:0;overflow-x:auto;overflow-y:hidden}
.paper h2{font:800 26px/1.05 var(--f-display);letter-spacing:-.03em;color:#0b0b0c}
.paper .ptop{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:26px;flex-wrap:wrap;position:relative}
.paper .plogo{max-height:48px;max-width:150px;margin-bottom:10px}
.paper .lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;color:#8b8b90;margin-bottom:4px}
.paper .parties{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px;padding:16px;background:#f5f5f2;border-radius:14px}
.paper table{width:100%;border-collapse:collapse;font-size:12px}
.paper th{text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:#fff;background:#0b0b0c;padding:8px 8px;font-weight:600}
.paper th:first-child{border-radius:8px 0 0 8px}.paper th:last-child{border-radius:0 8px 8px 0}
.paper td{border-bottom:1px solid #ececea;padding:9px 8px;vertical-align:top}
.paper .r{text-align:right} .paper .n{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.paper .totals{margin-left:auto;width:min(310px,100%);margin-top:14px;display:grid;gap:5px}
.paper .totals div{display:flex;justify-content:space-between}
.paper .totals .gt{border-top:2px solid #0b0b0c;padding-top:8px;margin-top:4px;font:800 18px var(--f-display);letter-spacing:-.02em}
.paper .words{margin-top:14px;color:#4b4b52}
.paper .foot{margin-top:30px;display:flex;justify-content:space-between;gap:20px;color:#4b4b52;font-size:11px;flex-wrap:wrap}
.paper .stamp{display:inline-block;border:2px solid #12a150;color:#12a150;padding:3px 12px;border-radius:999px;font-weight:700;letter-spacing:.14em;transform:rotate(-6deg);font-size:12px}
.paper .pcorner{position:absolute;top:0;right:0;width:84px;height:84px;color:#0b0b0c}
.paper.s-yellow .pcorner{color:#FFFE59}
.paper.s-yellow th{background:#FFFE59;color:#0b0b0c}
.paper.s-yellow .parties{background:#FFFFDE}
.paper.s-yellow .totals .gt{background:#FFFE59;border-top:0;padding:8px 10px;border-radius:10px}
.paper.s-minimal .pcorner{display:none}
.paper.s-minimal th{background:none;color:#6b6b73;border-bottom:1.5px solid #0b0b0c;border-radius:0}
.paper.s-minimal .parties{background:none;padding:0;border-top:1px solid #ececea;border-bottom:1px solid #ececea;padding-block:14px;border-radius:0}
.paper.reccard{position:relative;top:0;box-shadow:none}
.paper.reccard td{white-space:normal}
.docrow{display:grid;grid-template-columns:150px 110px 110px minmax(0,1fr);gap:10px;align-items:start}
.docrow>b{padding-top:30px;font-weight:600}
@media (max-width:760px){.docrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.docrow>b{grid-column:1/-1;padding:0}.docrow label:last-child{grid-column:1/-1}}
.thumbimg{max-height:52px;max-width:160px;border:1px solid var(--line);border-radius:10px;padding:4px;background:#fff}

/* ---------- misc tools ---------- */
.split{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}}
.side-list{display:grid;gap:4px;max-height:70vh;overflow:auto}
.side-list .si{padding:12px 14px;border-radius:16px;cursor:pointer;display:grid;gap:3px;font-size:var(--t-sm);border:1px solid transparent;transition:background .2s,border-color .2s}
.side-list .si:hover{background:var(--surface-2)}
.side-list .si.on{background:var(--ink);color:var(--bg)} .side-list .si.on small{color:color-mix(in srgb,var(--bg) 60%,transparent)}
.side-list .si small{color:var(--ink-3);font-size:var(--t-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md{line-height:1.7;font-size:15px;max-width:72ch}
.md h1{font:800 32px/1.05 var(--f-display);letter-spacing:-.03em;margin:.6em 0 .3em} .md h2{font:800 24px/1.1 var(--f-display);margin:.9em 0 .3em} .md h3{font-size:var(--t-lg);margin:.8em 0 .2em}
.md p{margin:.45em 0} .md ul,.md ol{padding-left:22px;margin:.4em 0}
.md code{font-family:var(--f-mono);font-size:.88em;background:var(--surface-2);padding:2px 6px;border-radius:6px}
.md pre{background:var(--surface-2);padding:14px;border-radius:14px;overflow:auto}
.md blockquote{border-left:4px solid var(--pop);margin:.6em 0;padding-left:14px;color:var(--ink-2)}
.md hr{border:0;border-top:1px solid var(--line);margin:1em 0}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .dh{padding:6px 10px;font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em}
.cal .dc{background:var(--surface-2);border-radius:16px;min-height:112px;padding:8px;display:flex;flex-direction:column;gap:4px;cursor:pointer;min-width:0;transition:background .2s,transform .3s var(--ease)}
.cal .dc:hover{background:var(--surface-3);transform:translateY(-2px)}
.cal .dc.out{background:transparent;color:var(--ink-3);border:1px dashed var(--line)}
.cal .dc .dn{font:700 15px var(--f-display)}
.cal .dc.today{background:var(--ink);color:var(--bg)} .cal .dc.today .dn{background:var(--pop);color:#0B0B0C;border-radius:6px;padding:0 6px;align-self:flex-start}
.cal .ev{font-size:10.5px;padding:2px 7px;border-radius:999px;background:var(--surface);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .dc.today .ev{background:color-mix(in srgb,var(--bg) 18%,transparent);color:var(--bg)}
.cal .ev.c-info{background:var(--info-soft);color:var(--info)} .cal .ev.c-warn{background:var(--warn-soft);color:var(--warn)} .cal .ev.c-bad{background:var(--bad-soft);color:var(--bad)} .cal .ev.c-good{background:var(--good-soft);color:var(--good)} .cal .ev.c-accent{background:var(--pop);color:#0B0B0C}
@media (max-width:640px){.cal{gap:3px}.cal .dc{min-height:58px;border-radius:10px;padding:5px} .cal .ev{font-size:0;height:5px;padding:0}}
.hgrid{display:grid;gap:4px}
.hcell{width:22px;height:22px;border-radius:7px;background:var(--surface-2);border:0;cursor:pointer;padding:0;transition:transform .25s var(--spring),background .2s}
.hcell:hover{transform:scale(1.2)}
.hcell.on{background:var(--ink)}
.hcell.today{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--pop)}
.att td.ac{padding:0;text-align:center;width:30px;min-width:30px}
.att button.am{width:100%;height:34px;border:0;background:none;cursor:pointer;font:600 11px var(--f-mono);transition:transform .2s var(--spring)}
.att button.am:hover{transform:scale(1.25)}
.att .P{color:var(--good)} .att .A{color:var(--bad);background:var(--bad-soft)!important} .att .H{color:var(--warn)} .att .L{color:var(--info)} .att .W{color:var(--ink-3)}
.timer{font:800 clamp(48px,7vw,88px)/1 var(--f-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ring{width:240px;height:240px}
.ring circle{fill:none;stroke-width:9}
.ring .bgc{stroke:var(--surface-2)} .ring .fgc{stroke:var(--ink);stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.result{background:var(--surface-2);border-radius:var(--r);padding:24px;display:grid;gap:8px;position:relative;overflow:hidden}
.result .big{font:800 clamp(32px,3.4vw,50px)/1.05 var(--f-display);letter-spacing:-.035em;margin:4px 0 10px}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:var(--t-sm);padding:8px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv b{font-family:var(--f-mono);font-weight:500}
.qrbox{display:grid;place-items:center;background:#fff;border-radius:var(--r);padding:28px;min-height:300px;border:1px solid var(--line)}
.qrbox img,.qrbox canvas{max-width:100%;height:auto}
.zonerow{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr) 30px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.hours{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px}
.hours span{height:30px;border-radius:8px;font:10px var(--f-mono);display:grid;place-items:center;background:var(--surface-2);color:var(--ink-3)}
.hours span.work{background:var(--ink);color:var(--bg)}
.hours span.now{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--pop)}
.lockview{max-width:620px;margin:50px auto;text-align:center;display:grid;gap:18px;justify-items:center}
.lockview h1{font:800 clamp(30px,3.4vw,46px)/1.05 var(--f-display);letter-spacing:-.035em}
.lockview .badge-shape{color:var(--pop)} .lockview .badge-shape .bs-ic{color:#0B0B0C}
.tabs{display:flex;gap:6px;margin-bottom:26px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.tabs button{border:1px solid var(--line-2);background:var(--surface);padding:0 17px;height:40px;border-radius:999px;cursor:pointer;color:var(--ink-2);font-size:var(--t-sm);white-space:nowrap;transition:all .2s;flex:none}
.tabs button:hover{border-color:var(--ink);color:var(--ink)}
.tabs button.on{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:500}
.steps{display:grid;gap:6px}
.steps .st{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;transition:background .2s,transform .3s var(--spring)}
.steps .st:hover{transform:translateX(4px)}
.steps .st.done{background:var(--surface-2);color:var(--ink-3);text-decoration:line-through}
.varchip{font-family:var(--f-mono);font-size:var(--t-xs);background:var(--pop);color:#0B0B0C;padding:1px 7px;border-radius:999px}
.colsmenu{display:grid;gap:7px;max-height:50vh;overflow:auto}

/* ---------- permissions & privacy ---------- */
body.perm-readonly .perm-edit,body.perm-readonly [data-add],body.perm-readonly [data-new],body.perm-readonly [data-new2],body.perm-readonly [data-imp],body.perm-readonly [data-e-add],body.perm-readonly [data-e-imp],body.perm-readonly [data-dup],body.perm-readonly [data-arch],body.perm-readonly [data-bset],body.perm-readonly [data-bdup],body.perm-readonly [data-barch],body.perm-readonly .addc,body.perm-readonly [data-save],body.perm-readonly [data-batch],body.perm-readonly [data-lib],body.perm-readonly .fab{display:none!important}
body.perm-nodelete .perm-del,body.perm-nodelete [data-rm]:not(.ir [data-rm]),body.perm-nodelete [data-bdel],body.perm-nodelete [data-del],body.perm-nodelete [data-delc]{display:none!important}
body.perm-noexport [data-exp],body.perm-noexport [data-print],body.perm-noexport [data-snap],body.perm-noexport [data-snapall],body.perm-noexport [data-bexp],body.perm-noexport [data-pexp],body.perm-noexport [data-dl],body.perm-noexport [data-dlj],body.perm-noexport [data-dlp]{display:none!important}
body.hidemoney .amt{filter:blur(8px);transition:filter .3s}
body.hidemoney .amt:hover{filter:blur(8px)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.sticker{animation:none}}
@media print{
  body *{visibility:hidden}
  .paper,.paper *{visibility:visible}
  .paper{position:absolute;left:0;top:0;width:100%;border:0;box-shadow:none;padding:0}
}
.logo{white-space:nowrap}
.lnav>.row{flex-wrap:nowrap;gap:4px}
@media (max-width:560px){.lnav .btn{height:36px;padding:0 13px}.lnav .btn svg{display:none}.logo{font-size:18px}}

/* ===================== v4 ===================== */
body{font-feature-settings:"ss01","cv11"}
h1,h2,h3,.h1,.h2{font-family:var(--f-display)}
.eyebrow{letter-spacing:.12em}
/* sidebar workspace chip */
.ws{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:16px;background:var(--surface);cursor:pointer;text-align:left;transition:border-color .2s}
.ws:hover{border-color:var(--ink)}
.ws img{width:34px;height:34px;object-fit:contain;border-radius:9px;background:#fff;border:1px solid var(--line);flex:none}
.ws-i{width:34px;height:34px;border-radius:10px;background:var(--pop);color:#0B0B0C;display:grid;place-items:center;font:800 12px var(--f-display);flex:none;box-shadow:inset 0 0 0 1.5px #0B0B0C}
.ws b{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws small{display:block;font-size:11px;color:var(--ink-3)}
a.it.bored{background:var(--pop-soft)}
a.it.bored svg{color:var(--ink)}
a.it.bored:hover{background:var(--pop);color:#0B0B0C}
/* dashboard */
.dhero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.9fr);gap:28px;align-items:stretch;padding:6px 0 40px}
.dhero-l{display:flex;flex-direction:column;justify-content:center;min-width:0}
.dhero .date{font-size:15px;color:var(--ink-2);margin-top:14px;max-width:56ch}
.dhero .acts{margin-top:26px}
@media (max-width:1100px){.dhero{grid-template-columns:minmax(0,1fr)}}
.dsec{margin-top:56px}
.dsec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.dgrid.even{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.dgrid.even{grid-template-columns:minmax(0,1fr)}}
.setup{margin-bottom:28px}
.delta{display:inline-flex;align-items:center;gap:2px;font:600 11px var(--f-mono);padding:2px 7px;border-radius:999px;background:var(--surface-3);color:var(--ink-2);font-style:normal}
.delta.up{background:var(--good-soft);color:var(--good)} .delta.down{background:var(--bad-soft);color:var(--bad)}
.kpi:first-child .delta{background:color-mix(in srgb,var(--bg) 16%,transparent);color:var(--bg)}
.boredcard{width:100%;display:flex;align-items:center;gap:16px;padding:22px 26px;border-radius:24px;border:1.5px dashed var(--line-2);background:transparent;cursor:pointer;text-align:left;transition:all .25s var(--ease)}
.boredcard:hover{background:var(--pop);border:1.5px solid #0B0B0C;color:#0B0B0C}
.boredcard svg{width:26px;height:26px;flex:none}
.boredcard b{display:block;font:800 19px var(--f-display);letter-spacing:-.02em}
.boredcard small{color:var(--ink-3);font-size:13px}.boredcard:hover small{color:#3a3a20}
/* music player */
.player{height:100%;background:var(--ink);color:var(--bg);border-radius:28px;padding:22px;display:flex;flex-direction:column;gap:16px;min-height:250px}
.player .eyebrow{color:color-mix(in srgb,var(--bg) 55%,transparent)}
.pl-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.pl-now{font:800 22px/1.15 var(--f-display);letter-spacing:-.02em;margin-top:6px}
.pl-sub{font-size:12.5px;margin-top:4px;color:color-mix(in srgb,var(--bg) 60%,transparent)!important}
.player .btn.icon.lg{width:52px;height:52px;border-radius:50%;background:var(--pop);border-color:var(--pop);color:#0B0B0C}
.player .btn.icon.lg svg{width:20px;height:20px}
.pl-eq{display:flex;align-items:flex-end;gap:4px;height:34px}
.pl-eq i{flex:1;height:12%;border-radius:3px;background:color-mix(in srgb,var(--bg) 25%,transparent);transition:height .3s}
.pl-eq.on i{background:var(--pop);animation:eq 1.1s ease-in-out infinite;animation-delay:calc(var(--n,0) * -0.13s)}
.pl-eq i:nth-child(3n){--n:2}.pl-eq i:nth-child(3n+1){--n:5}.pl-eq i:nth-child(4n){--n:7}.pl-eq i:nth-child(5n){--n:3}
@keyframes eq{0%,100%{height:15%}30%{height:90%}60%{height:40%}80%{height:70%}}
.pl-tracks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
@media (max-width:560px){.pl-tracks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pl-track{border:1px solid color-mix(in srgb,var(--bg) 18%,transparent);background:transparent;color:inherit;border-radius:14px;padding:9px 10px;text-align:left;cursor:pointer;display:grid;gap:2px;min-width:0;transition:all .2s}
.pl-track b{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-track small{font-size:10.5px;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-track:hover{border-color:var(--pop)}
.pl-track.on{background:var(--pop);color:#0B0B0C;border-color:var(--pop)}
.pl-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:auto;font-size:12.5px}
.pl-vol svg{width:16px;height:16px;opacity:.7}
.pl-vol input{accent-color:var(--pop);width:130px}
.player .check input{accent-color:var(--pop)}
/* insights */
.insw{margin-top:28px;display:grid;gap:16px}
.inshide{justify-self:start;margin:0!important}
.ibar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px;border:1px solid var(--line);border-radius:22px;background:var(--surface)}
.ibar-i{display:grid;gap:3px;padding:6px 16px;border-right:1px solid var(--line);min-width:0}
.ibar-i:last-of-type{border-right:0}
.ibar-i b{font:800 20px/1.1 var(--f-display);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.ibar-i small{font-size:12px;color:var(--ink-3);display:flex;gap:6px;align-items:center}
.ibar>.btn{margin-left:auto}
.spark{display:block;overflow:visible}
.spark polyline{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.spark circle{fill:var(--pop);stroke:var(--ink);stroke-width:1.5}
.ipanels{gap:16px}
.donut{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;position:relative}
.donut>svg{display:block}
.donut-c{position:absolute;left:0;top:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.donut-c b{font:800 16px var(--f-display)} .donut-c span{font-size:10.5px;color:var(--ink-3)}
.dseg{transition:stroke-width .2s;animation:fade .8s var(--ease) both;animation-delay:calc(var(--i) * 80ms)}
.dseg:hover{stroke-width:19}
.dleg{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13px;min-width:0}
.dleg li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:10px;align-items:center}
.dleg i{width:11px;height:11px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(11,11,12,.15)}
.dleg span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.dleg b{font:600 12px var(--f-mono)}
@media (max-width:520px){.donut{grid-template-columns:minmax(0,1fr);justify-items:center}.donut-c{position:static;margin-top:-120px;height:100px}}
.brief{position:fixed;left:max(20px,env(safe-area-inset-left,0px));bottom:max(20px,env(safe-area-inset-bottom,0px));z-index:85;width:min(360px,calc(100vw - 40px));background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:16px 18px;box-shadow:var(--shadow-lg);display:grid;gap:10px;animation:pop .45s var(--spring) both;transition:opacity .3s,transform .3s}
.brief.out{opacity:0;transform:translateY(12px)}
.brief .eyebrow{display:flex;align-items:center;gap:6px}.brief .eyebrow svg{width:13px;height:13px}
.brief-t{font:800 17px/1.2 var(--f-display);letter-spacing:-.015em}
.brief-g{display:flex;gap:16px;align-items:center;padding:10px 12px;background:var(--surface-2);border-radius:16px}
.brief-g>div{display:grid;gap:2px}.brief-g small{font-size:11px;color:var(--ink-3)}.brief-g b{font:800 16px var(--f-display)}
@media (max-width:860px){.brief{bottom:96px}}
/* reports */
.rgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rgrid .span2{grid-column:1/-1}
@media (max-width:980px){.rgrid{grid-template-columns:minmax(0,1fr)}}
.builder{display:grid;grid-template-columns:330px minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:1000px){.builder{grid-template-columns:minmax(0,1fr)}}
.bside{position:sticky;top:84px}
.repcard .ph{align-items:flex-start}
/* integrations */
.isec{margin-bottom:40px}
.h3x{font:700 13px var(--f-ui);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);margin-bottom:12px}
.appgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.appcard{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid var(--line);border-radius:22px;background:var(--surface);cursor:pointer;text-align:left;transition:border-color .2s,transform .3s var(--ease),box-shadow .3s}
.appcard:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow)}
.appcard.on{background:var(--pop-soft)}
.appcard b{display:block;font:700 16px var(--f-display);margin-bottom:4px}
.appcard .grow>span{font-size:12.5px;color:var(--ink-2);line-height:1.5;display:block}
.appcard .pill{flex:none;white-space:normal;height:auto;padding:3px 9px;max-width:120px;text-align:center;line-height:1.3}
.applogo{width:42px;height:42px;border-radius:12px;background:var(--c);color:#fff;display:grid;place-items:center;font:800 14px var(--f-display);letter-spacing:-.02em;flex:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)}
.hookrow{display:flex;gap:10px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:14px}
.canvagrid{display:flex;flex-wrap:wrap;gap:6px}
.designs{display:grid;gap:14px}
.design{display:grid;gap:8px;border:1px solid var(--line);border-radius:18px;padding:12px}
.design iframe{width:100%;height:380px;border:0;border-radius:12px;background:var(--surface-2)}
/* settings logo */
.brandbox{display:flex;gap:22px;align-items:center;padding:24px;border:1.5px dashed var(--line-2);border-radius:26px;margin-bottom:16px;transition:all .2s}
.brandbox.over{border-color:var(--ink);background:var(--pop-soft)}
.brandlogo{width:112px;height:112px;border-radius:24px;background:var(--surface-2);display:grid;place-items:center;flex:none;overflow:hidden;border:1px solid var(--line)}
.brandlogo img{max-width:88%;max-height:88%;object-fit:contain}
.brandlogo svg{width:34px;height:34px;color:var(--ink-3)}
@media (max-width:560px){.brandbox{flex-direction:column;align-items:flex-start}}
/* game */
.gamebox{background:var(--surface);border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow-lg);width:min(960px,100%);padding:22px;display:grid;gap:14px;animation:pop .45s var(--spring) both}
.game-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.game-top .h2{margin-top:4px}
.game-score{font-size:22px;font-weight:600;padding:2px 10px;border-radius:10px;transition:background .1s}
.game-score.flash{background:var(--pop);color:#0B0B0C}
.gamebox canvas{width:100%;height:auto;border-radius:18px;border:1px solid var(--line);touch-action:manipulation;cursor:pointer;display:block}
.game-help{font-size:12.5px}
/* landing v4 */
.hero3{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;padding-block:clamp(36px,7vh,80px) 30px}
@media (max-width:1000px){.hero3{grid-template-columns:minmax(0,1fr)}}
.hero3 .sub{font-size:clamp(16px,1.3vw,19px);color:var(--ink-2);max-width:52ch;line-height:1.6;margin-top:22px}
.hero3 .ctas{margin-top:30px}
.trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:13px;color:var(--ink-3)}
.trust span{display:inline-flex;gap:6px;align-items:center}.trust svg{width:14px;height:14px;color:var(--ink)}
.mock{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-lg);overflow:visible}
.mock-top{display:flex;gap:6px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.mdot{width:10px;height:10px;border-radius:50%;background:var(--surface-3)}
.mock-url{margin-left:10px;font-size:12px;color:var(--ink-3);background:var(--surface-2);padding:3px 12px;border-radius:999px}
.mock-body{padding:18px;display:grid;gap:14px}
.mock-k{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mock-k>div{background:var(--surface-2);border-radius:16px;padding:12px;display:grid;gap:2px}
.mock-k>div.y{background:var(--pop);color:#0B0B0C}
.mock-k small{font-size:11px;opacity:.7}.mock-k b{font:800 22px var(--f-display);letter-spacing:-.02em}.mock-k i{font-style:normal;font-size:11px;justify-self:start}
.mock-chart{display:flex;align-items:flex-end;gap:8px;height:130px;padding:10px;background:var(--surface-2);border-radius:16px}
.mock-chart i{flex:1;height:var(--h);background:var(--ink);border-radius:6px 6px 3px 3px;transform-origin:bottom;animation:grow 1s var(--ease) both;animation-delay:calc(.4s + var(--i) * 70ms)}
.mock-chart i:last-child{background:var(--pop);box-shadow:inset 0 0 0 1.5px #0B0B0C}
.mock-feed{display:grid;gap:8px;font-size:12.5px}
.mock-feed>div{display:flex;gap:8px;align-items:center}
.mock-toast{position:absolute;left:-28px;bottom:70px;display:flex;gap:10px;align-items:center;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:18px;box-shadow:var(--shadow-lg);animation:floaty 6s ease-in-out infinite,pop .6s var(--spring) 1.2s both}
.mock-toast span svg{width:18px;height:18px;color:var(--pop)}
.mock-toast b{display:block;font-size:13px}.mock-toast small{font-size:11px;opacity:.7}
.mock-pill{position:absolute;right:-14px;top:-16px;display:flex;gap:6px;align-items:center;background:var(--pop);color:#0B0B0C;border:1.5px solid #0B0B0C;padding:7px 13px;border-radius:999px;font-size:12px;font-weight:600;animation:floaty 7s ease-in-out 1s infinite}
.mock-pill svg{width:14px;height:14px}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (max-width:640px){.mock-toast{left:8px;bottom:-26px}.mock-pill{right:8px}}
.applogos{padding-block:40px 10px;display:grid;gap:16px;justify-items:center;text-align:center}
.applogo-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}
.al{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);font-weight:600}
.al .applogo{width:28px;height:28px;border-radius:8px;font-size:10.5px}
.saved{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
@media (max-width:960px){.saved{grid-template-columns:minmax(0,1fr)}}
.saved-big{display:flex;align-items:center;gap:18px;margin:30px 0 26px;padding:24px 26px;background:var(--pop);color:#0B0B0C;border-radius:28px;border:1.5px solid #0B0B0C}
.saved-big b{font:800 clamp(56px,6vw,88px)/1 var(--f-display);letter-spacing:-.05em}
.saved-big span{font:700 18px/1.25 var(--f-display)}.saved-big small{font:500 13px var(--f-ui);opacity:.7}
.saved-r{display:grid;gap:12px;padding:22px;border:1px solid var(--line);border-radius:28px}
.srow{display:grid;gap:6px;font-size:14px}
.srow b{font:700 14px var(--f-mono)}
.srow small{font-size:12px}
.sbar{height:10px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.sbar i{display:block;height:100%;width:var(--w);background:var(--ink);border-radius:999px;transform-origin:left;animation:widen 1.2s var(--ease) both;animation-delay:calc(var(--i) * 90ms)}
.srow:first-child .sbar i{background:var(--pop);box-shadow:inset 0 0 0 1.5px #0B0B0C}
.demo-ana{border:1px solid var(--line);border-radius:28px;padding:22px;display:grid;gap:16px;box-shadow:var(--shadow-lg);background:var(--surface)}
.da-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.da-body{display:grid;grid-template-columns:170px minmax(0,1fr);gap:24px;align-items:center}
@media (max-width:520px){.da-body{grid-template-columns:minmax(0,1fr)}}
.da-donut svg{width:170px;height:170px}
.da-brief{display:flex;gap:12px;align-items:center;background:var(--ink);color:var(--bg);border-radius:18px;padding:14px 16px}
.da-brief svg{width:18px;height:18px;color:var(--pop)}
.da-brief b{display:block;font-size:13.5px}.da-brief small{font-size:12px;opacity:.7}
.metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:40px}
@media (max-width:1000px){.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
.metric{padding:22px 20px;border-radius:24px;background:var(--surface-2);display:grid;gap:6px;transition:transform .3s var(--ease)}
.metric:hover{transform:translateY(-4px)}
.metric.y{background:var(--pop);color:#0B0B0C;box-shadow:inset 0 0 0 1.5px #0B0B0C}
.metric small{font:600 11px var(--f-mono);text-transform:uppercase;letter-spacing:.1em;opacity:.7}
.metric b{font:800 clamp(28px,2.6vw,38px)/1 var(--f-display);letter-spacing:-.03em}
.metric span{font-size:12.5px;opacity:.75}
.appwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:36px}
.aw{display:flex;gap:10px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:18px;font-size:13.5px;transition:all .25s var(--ease)}
.aw:hover{border-color:var(--ink);transform:translateY(-2px)}
.aw .applogo{width:32px;height:32px;border-radius:10px;font-size:11px}
.cmp{margin-top:36px;border:1px solid var(--line);border-radius:28px;overflow:hidden}
.cmp-h,.cmp-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:14px;padding:16px 22px;align-items:center}
.cmp-h{background:var(--surface-2);font-size:14px}
.cmp-r{border-top:1px solid var(--line);font-size:14px}
.cmp .us{background:var(--pop);color:#0B0B0C;border-radius:10px;padding:4px 10px;justify-self:start}
.cmp-r>span:first-child{font-weight:600}
@media (max-width:640px){.cmp-h,.cmp-r{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}.cmp-h span:first-child{display:none}.cmp-r>span:first-child{grid-column:1/-1}}
.vibe-card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:30px;align-items:center;background:var(--ink);color:var(--bg);border-radius:36px;padding:clamp(26px,4vw,52px)}
.vibe-card .lede{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.vibe-card .eyebrow{color:var(--pop)}
.vibe-card .btn.primary{background:var(--pop);border-color:var(--pop);color:#0B0B0C}
.vibe-card .btn:not(.primary){background:transparent;color:var(--bg);border-color:color-mix(in srgb,var(--bg) 30%,transparent)}
@media (max-width:900px){.vibe-card{grid-template-columns:minmax(0,1fr)}}
.tracks{display:grid;gap:8px}
.trk{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;border:1px solid color-mix(in srgb,var(--bg) 18%,transparent);font-size:14px;font-weight:600;animation:rise .6s var(--ease) both;animation-delay:calc(var(--i) * 80ms)}
.eqmini{display:flex;gap:2px;align-items:flex-end;height:16px}.eqmini i{width:3px;background:var(--pop);border-radius:2px;animation:eq 1s ease-in-out infinite}.eqmini i:nth-child(2){animation-delay:-.3s}.eqmini i:nth-child(3){animation-delay:-.6s}
.finalcta{justify-items:start;gap:22px;padding-block:120px 60px}
.finalcta .lede{font-size:18px;color:var(--ink-2)}
.auth .art{justify-content:space-between}
/* calmer surfaces & spacing */
.panel .ph{padding:18px 22px 10px}
.kpis{gap:14px;margin-bottom:8px}
.kpi{padding:20px 22px}
.tiles{gap:14px}
.tile{gap:22px}
.view .tabs{margin-bottom:30px}
.mess-head .h1{max-width:18ch}
.persona-l .h2{font-size:clamp(22px,2.2vw,30px);line-height:1.15}
.pl-tracks{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.pl-track b{white-space:normal;line-height:1.2}
.brief{left:auto;right:calc(max(24px,env(safe-area-inset-right,0px)) + 78px)}
@media (max-width:860px){.brief{right:max(14px,env(safe-area-inset-right,0px));left:auto}}
.bside .seg{border-radius:18px}
.applogo{position:relative;overflow:hidden}
.applogo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:18%;background:#fff}
.applogo.img{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.empty>svg{width:30px;height:30px;padding:16px;box-sizing:content-box;background:var(--pop);color:#0B0B0C;border-radius:50%;flex:none}
.vhead .deco{display:none}
.vmwrap{position:relative}
.viewmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:12;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);padding:16px;display:grid;gap:10px;min-width:300px;animation:pop .3s var(--spring) both}
.viewmenu .row{gap:8px}
.viewmenu select.input{max-width:100%}
.smartbar{display:flex;align-items:center;gap:8px;margin-top:22px;padding:6px 6px 6px 16px;border:1.5px solid var(--ink);border-radius:999px;background:var(--surface);max-width:640px;transition:box-shadow .2s}
.smartbar:focus-within{box-shadow:0 0 0 5px var(--pop)}
.smartbar .sb-ic svg{width:17px;height:17px;display:block}
.smartbar input{flex:1;min-width:0;border:0;background:transparent;height:38px;outline:none;font-size:14px}
.sb-prev{font-size:12.5px;margin-top:8px;padding-left:18px;display:flex;gap:6px;align-items:center}
.sb-prev svg{width:14px;height:14px}
.sb-prev.ok{color:var(--ink);font-weight:600}
.dhero:not(:has(.dhero-r)){grid-template-columns:minmax(0,1fr)}
.kpi.goal{border:0;text-align:left;cursor:pointer;font:inherit;color:inherit}
.kpi.goal:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.kpi.goal .progress{height:6px;margin:2px 0}
.kpi.goal .progress i{background:var(--ink)}
.dfoot{display:flex;justify-content:center;margin-top:40px}
.livesync{border:1.5px solid var(--ink);border-radius:22px;padding:18px;display:grid;gap:12px;background:var(--surface)}
.ls-h{display:flex;align-items:center;gap:12px}.ls-h b{display:block;font:700 16px var(--f-display)}.ls-h small{color:var(--ink-3);font-size:12px}
.ls-p{font-size:13px;line-height:1.55}
.ls-row{gap:12px}
.ls-list{display:grid;gap:8px;margin-top:8px;max-height:220px;overflow:auto}
.lsbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:20px;margin-bottom:14px;background:var(--surface)}
.lsb-i{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:14px;background:var(--surface-2);flex:1;min-width:240px}
.lsb-i .applogo{width:32px;height:32px;border-radius:10px;font-size:11px}
.lsb-i b{display:block;font-size:13px}.lsb-i small{display:block;font-size:11.5px;color:var(--ink-3)}
ol.guide{margin:0;padding-left:22px;display:grid;gap:12px;font-size:14px;line-height:1.55}
.codebox{margin-top:6px;padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:12px;word-break:break-all;cursor:copy;border:1px dashed var(--line-2)}