:root{
  --bg:#efece4;
  --bg2:#e6e1d5;
  --panel:#faf8f2;
  --line:#e3ddcf;
  --line2:#eee8db;
  --fg:#1c1a16;
  --muted:#6d685d;
  --muted2:#9c958a;
  --accent:#b14d2b;
  --accent-press:#963f21;
  --accent-soft:#f3e6dc;
  --ok:#3f7d56;
  --ok-soft:#e6efe6;
  --warn:#bd8521;
  --danger:#bc3f2e;
  --danger-soft:#f7e6e1;
  --r:20px;
  --max:1180px;
  --shadow-sm:0 1px 2px rgba(28,26,22,.04);
  --shadow:0 2px 6px rgba(28,26,22,.04),0 24px 50px -26px rgba(28,26,22,.16);
  --shadow-pop:0 14px 44px -12px rgba(28,26,22,.22);
  font-synthesis:none;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:'Space Grotesk','Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5;letter-spacing:-.006em;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--accent);color:#fff}
.hidden{display:none!important}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(18px,5vw,46px);backdrop-filter:blur(14px);background:rgba(239,236,228,.72);border-bottom:1px solid transparent;transition:border-color .3s,background .3s,box-shadow .3s}
.nav.scrolled{border-color:var(--line);background:rgba(239,236,228,.9);box-shadow:var(--shadow-sm)}
.brand{font-weight:700;font-size:21px;letter-spacing:-.03em;display:flex;align-items:center;gap:10px;cursor:pointer}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);display:inline-block;animation:dotpulse 2.4s ease-in-out infinite}
@keyframes dotpulse{0%,100%{box-shadow:0 0 0 3px var(--accent-soft)}50%{box-shadow:0 0 0 7px var(--accent-soft)}}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:14px;color:var(--muted);cursor:pointer;transition:.2s;position:relative}
.nav-links a:not(.btn)::after{content:'';position:absolute;left:0;bottom:-5px;width:0;height:2px;border-radius:2px;background:var(--accent);transition:width .25s ease}
.nav-links a:not(.btn):hover{color:var(--fg)}
.nav-links a:not(.btn):hover::after{width:100%}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;font-weight:600;font-size:14px;padding:11px 22px;border-radius:999px;border:1px solid var(--accent);cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s,color .2s;box-shadow:var(--shadow-sm)}
.btn:hover{transform:translateY(-2px);background:var(--accent-press);border-color:var(--accent-press);box-shadow:0 12px 24px -12px rgba(177,77,43,.6)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:var(--panel);color:var(--fg);border-color:var(--line);box-shadow:var(--shadow-sm)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--panel)}
.btn.lg{padding:16px 34px;font-size:16px}
.btn.sm{padding:8px 15px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
@media(max-width:780px){.nav-links a:not(.btn):not(.tab){display:none}}
.view{display:none;min-height:100vh}
.view.active{display:block}
section{padding:clamp(70px,11vh,140px) clamp(18px,5vw,46px)}
.wrap{max-width:var(--max);margin:0 auto}
.eyebrow{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-weight:600}

/* ---------- HERO ---------- */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-top:120px;position:relative}
.hero-glow{position:absolute;top:4%;left:50%;transform:translateX(-50%);width:680px;height:680px;max-width:120vw;border-radius:50%;background:var(--accent-soft);opacity:.6;filter:blur(90px);pointer-events:none;animation:floaty 9s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(24px)}}
.hero h1{font-size:clamp(52px,11vw,124px);font-weight:700;letter-spacing:-.05em;line-height:.94;margin-top:22px;position:relative}
.hero .sub{margin-top:30px;font-size:clamp(18px,2.4vw,24px);color:var(--muted);max-width:620px;line-height:1.55;font-weight:400}
.hero .sub b{color:var(--fg);font-weight:600}
.hero .tagline{margin-top:14px;font-size:15px;color:var(--muted2)}
.hero .cta-row{margin-top:42px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.hero .note{margin-top:18px;font-size:13px;color:var(--muted2)}

/* ---------- TEAM CASCADE ---------- */
.team{text-align:center;border-top:1px solid var(--line)}
.team h2{font-size:clamp(34px,6vw,64px);font-weight:700;letter-spacing:-.04em;margin-bottom:46px}
.cascade{display:flex;flex-direction:column;gap:8px;max-width:760px;margin:0 auto}
.cascade .line{font-size:clamp(26px,5vw,50px);font-weight:600;letter-spacing:-.03em;color:#d3ccbe;opacity:.6;transition:.5s}
.cascade .line.on{color:var(--fg);opacity:1}
.team .one{margin-top:46px;font-size:clamp(20px,3vw,30px);font-weight:600;letter-spacing:-.02em}
.team .one span{color:var(--muted)}
.team .cta-row{margin-top:40px;display:flex;justify-content:center}

/* ---------- SECTION HEADINGS ---------- */
.sec-head{max-width:680px;margin-bottom:54px}
.sec-head.center{margin:0 auto 54px;text-align:center}
.sec-head h2{font-size:clamp(32px,5vw,54px);font-weight:700;letter-spacing:-.04em;margin-top:14px;line-height:1.04}
.sec-head p{margin-top:18px;color:var(--muted);font-size:17px;line-height:1.6}

/* ---------- STEPS ---------- */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.step{background:var(--panel);padding:30px clamp(20px,3vw,38px);display:grid;grid-template-columns:60px 1fr;gap:22px;transition:.25s}
.step:hover{background:var(--bg2)}
.step .n{font-size:28px;font-weight:700;color:var(--accent);opacity:.85}
.step h3{font-size:19px;font-weight:600}
.step p{margin-top:7px;color:var(--muted);font-size:15px;line-height:1.6}

/* ---------- FEATURE GRID ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px;transition:transform .22s,box-shadow .22s,border-color .22s;box-shadow:var(--shadow-sm)}
.card:hover{transform:translateY(-5px);border-color:transparent;box-shadow:var(--shadow)}
.card .ic{width:44px;height:44px;border-radius:13px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;margin-bottom:18px;transition:transform .22s}
.card:hover .ic{transform:scale(1.08) rotate(-4deg)}
.card h3{font-size:18px;font-weight:600}
.card p{margin-top:8px;color:var(--muted);font-size:14px;line-height:1.55}
.card ul{margin-top:13px;list-style:none;display:flex;flex-direction:column;gap:7px}
.card ul li{font-size:13.5px;color:var(--muted);padding-left:18px;position:relative}
.card ul li::before{content:'→';position:absolute;left:0;color:var(--accent)}

/* ---------- STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-align:center;box-shadow:var(--shadow)}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--panel);padding:34px 14px;transition:background .2s}
.stat:hover{background:var(--bg2)}
.stat .num{font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:-.03em;color:var(--accent)}
.stat .lab{margin-top:7px;font-size:13px;color:var(--muted)}

/* ---------- PRICING ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.pricing-grid{grid-template-columns:1fr}}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:32px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plan.feature{border-color:var(--accent);background:var(--panel);position:relative;box-shadow:0 20px 44px -20px rgba(177,77,43,.42)}
.plan.feature .tag{position:absolute;top:-12px;left:30px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:999px}
.plan h3{font-size:18px;font-weight:600}
.plan .amt{margin-top:14px;font-size:44px;font-weight:700;letter-spacing:-.04em;line-height:1}
.plan .amt span{font-size:16px;color:var(--muted);font-weight:500}
.plan .desc{margin-top:9px;color:var(--muted);font-size:14px;min-height:38px}
.plan ul{margin-top:22px;list-style:none;display:flex;flex-direction:column;gap:11px;flex:1}
.plan ul li{font-size:14px;color:var(--fg);padding-left:24px;position:relative;line-height:1.4}
.plan ul li::before{content:'✓';position:absolute;left:0;color:var(--ok);font-weight:700}
.plan ul li.no{color:var(--muted2)}
.plan ul li.no::before{content:'—';color:var(--muted2)}
.plan .btn{margin-top:26px;width:100%}
.rev-note{margin-top:18px;text-align:center;color:var(--muted2);font-size:13px}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin:0 auto}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:22px 0;font-size:18px;font-weight:600;display:flex;justify-content:space-between;gap:20px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';font-size:24px;color:var(--accent);transition:.2s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa p{padding:0 0 22px;color:var(--muted);font-size:15px;line-height:1.65}

/* ---------- FINAL CTA ---------- */
.final{text-align:center;border-top:1px solid var(--line)}
.final h2{font-size:clamp(40px,8vw,90px);font-weight:700;letter-spacing:-.05em;line-height:.96}
.final .cta-row{margin-top:38px;display:flex;justify-content:center}
.final .note{margin-top:18px;font-size:14px;color:var(--muted2)}
footer{border-top:1px solid var(--line);padding:46px clamp(18px,5vw,46px)}
.foot-wrap{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a{font-size:14px;color:var(--muted);cursor:pointer;transition:.2s}
.foot-links a:hover{color:var(--accent)}
.foot-meta{font-size:13px;color:var(--muted2)}

/* ---------- MODALS ---------- */
.modal-bg{position:fixed;inset:0;z-index:100;background:rgba(28,26,22,.34);backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadein .2s ease}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:38px;width:100%;max-width:440px;position:relative;max-height:90vh;overflow:auto;box-shadow:var(--shadow-pop);animation:popIn .22s ease both}
.modal.wide{max-width:680px}
.modal h3{font-size:26px;font-weight:700;letter-spacing:-.03em}
.modal p{margin-top:8px;color:var(--muted);font-size:14px;line-height:1.55}
.modal .x{position:absolute;top:18px;right:20px;color:var(--muted);font-size:22px;cursor:pointer;background:none;border:none;transition:.2s}
.modal .x:hover{color:var(--fg);transform:rotate(90deg)}
.field{margin-top:18px}
.field label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.field input,.field textarea,.field select{width:100%;margin-top:8px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:13px 14px;color:var(--fg);font-size:15px;font-family:inherit;outline:none;transition:.2s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--panel)}
.modal .btn{width:100%;margin-top:22px}
.modal .alt{margin-top:14px;text-align:center;font-size:13px;color:var(--muted2)}
.modal .alt a{color:var(--accent);text-decoration:underline;cursor:pointer}

/* ---------- APP SHELL ---------- */
.app{height:100vh;display:none;flex-direction:column;overflow:hidden;position:relative;isolation:isolate}
.app.active{display:flex}
.appbar{display:flex;align-items:center;justify-content:space-between;padding:15px clamp(18px,3vw,34px);border-bottom:1px solid var(--line);background:rgba(250,248,242,.82);backdrop-filter:blur(12px);position:sticky;top:0;z-index:40;gap:16px;flex-wrap:wrap;animation:fadeDown .5s ease both}
.appbar .left{display:flex;align-items:center;gap:16px}
.company-pill{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--fg);background:var(--bg);border:1px solid var(--line);padding:8px 14px;border-radius:999px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.appbar .right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---------- TABS (segmented nav) ---------- */
.tabs{display:flex;gap:3px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px}
.tab{background:transparent;border:none;color:var(--muted);font-weight:600;font-size:13px;padding:8px 17px;border-radius:999px;cursor:pointer;transition:.2s;font-family:inherit}
.tab:hover{color:var(--fg)}
.tab.active{background:var(--panel);color:var(--accent);box-shadow:var(--shadow-sm)}

/* ---------- DROPDOWN MENU ---------- */
.menu{position:relative}
.menu-pop{position:absolute;right:0;top:calc(100% + 8px);min-width:212px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-pop);padding:8px;display:flex;flex-direction:column;gap:2px;z-index:80;animation:popIn .16s ease both}
.menu-pop button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;color:var(--fg);font-size:13.5px;font-weight:500;font-family:inherit;padding:10px 12px;border-radius:10px;cursor:pointer;transition:.15s}
.menu-pop button:hover{background:var(--accent-soft);color:var(--accent)}
.menu-pop button .mi{width:18px;text-align:center;opacity:.8}
.menu-div{height:1px;background:var(--line);margin:5px 4px}
.menu-label{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);font-weight:700;padding:8px 12px 4px}

/* ---------- APP MAIN ---------- */
.app-main{flex:1;min-height:0;display:grid;grid-template-columns:1fr 388px;gap:0;position:relative;z-index:1}
@media(max-width:1000px){.app-main{grid-template-columns:1fr}}
.app-left{padding:36px clamp(20px,4vw,52px);overflow:auto}
.app-left>*{animation:fadeUp .5s ease both}
.app-left>*:nth-child(2){animation-delay:.05s}
.app-left>*:nth-child(3){animation-delay:.1s}
.app-left>*:nth-child(4){animation-delay:.15s}
.app-left>*:nth-child(5){animation-delay:.2s}
.app-right{border-left:1px solid var(--line);background:var(--panel);padding:32px clamp(18px,2.2vw,28px);display:flex;flex-direction:column;min-height:0;overflow:hidden}
@media(max-width:1000px){.app{height:auto;min-height:100vh;overflow:visible}.app-main{min-height:0}.app-right{border-left:none;border-top:1px solid var(--line);overflow:visible}.chat-log{min-height:200px}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fadein{to{opacity:1}}

/* section card wrapper used across dashboard */
.board{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px clamp(20px,2.6vw,30px);box-shadow:var(--shadow-sm)}
.board+.board{margin-top:28px}
.board h3{font-size:16px;font-weight:600;letter-spacing:-.02em}
.bhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:10px}

/* ---------- METRICS ---------- */
.mrow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
@media(max-width:620px){.mrow{grid-template-columns:repeat(2,1fr)}}
.metric{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 20px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.metric:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.metric .v{font-size:28px;font-weight:700;letter-spacing:-.03em;color:var(--accent)}
.metric .l{font-size:12px;color:var(--muted);margin-top:5px}

/* ---------- AGENTS ---------- */
.agents{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:32px}
@media(max-width:620px){.agents{grid-template-columns:1fr}}
.agent{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;min-height:162px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.agent:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.agent .ah{display:flex;align-items:center;justify-content:space-between}
.agent .ah .name{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.agent .badge{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ok);border:1px solid var(--ok);background:var(--ok-soft);padding:3px 8px;border-radius:999px;font-weight:700}
.agent .badge.idle{color:var(--muted);border-color:var(--line);background:var(--bg)}
.alog{margin-top:14px;font-size:12.5px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.65;flex:1;overflow:hidden;display:flex;flex-direction:column;gap:3px}
.alog div{opacity:0;animation:fadein .4s forwards}
.alog .t{color:var(--muted2)}

/* ---------- TASKS ---------- */
.task{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:var(--panel);transition:.18s}
.task:hover{border-color:var(--accent);background:var(--accent-soft)}
.task .st{width:18px;height:18px;border-radius:50%;border:2px solid var(--muted2);flex-shrink:0;position:relative}
.task.done .st{background:var(--ok);border-color:var(--ok)}
.task.done .st::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;font-weight:700}
.task.active .st{border-color:var(--accent);animation:spin 1s linear infinite;border-top-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}
.task .tt{flex:1;font-size:14px}
.task.done .tt{color:var(--muted)}
.task .ag{font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em}
.empty{color:var(--muted2);font-size:13.5px;padding:16px;border:1px dashed var(--line);border-radius:14px;text-align:center;line-height:1.5}

/* ---------- DELIVERABLES / OUTBOX ITEMS ---------- */
.art{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:var(--panel);cursor:pointer;transition:.16s}
.art:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.kbadge{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:7px;padding:3px 7px;font-weight:700;flex-shrink:0}
.atitle{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ameta{font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0}
.art-pre{margin-top:16px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.6;color:var(--fg);white-space:pre-wrap;word-break:break-word;max-height:52vh;overflow:auto}
.art-actions{display:flex;gap:10px;margin-top:16px}
.art-actions .btn{margin-top:0;width:auto}

/* ---------- CHAT ---------- */
.chat-h{font-size:14px;font-weight:600;margin-bottom:6px}
.chat-sub{font-size:12px;color:var(--muted);margin-bottom:16px}
.chat-log{flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px;padding-right:4px;min-height:120px}
.msg{max-width:90%;padding:12px 15px;border-radius:16px;font-size:14px;line-height:1.5;animation:popIn .25s ease both}
.msg.ai{background:var(--bg);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.msg.me{background:var(--accent);color:#fff;align-self:flex-end;border-bottom-right-radius:4px;font-weight:500}
.msg.ai b{color:var(--accent)}
.typing{display:flex;gap:4px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);border-radius:14px;align-self:flex-start;width:fit-content}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted2);animation:bounce 1.2s infinite}
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.chat-input{margin-top:14px;display:flex;gap:8px}
.chat-input input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:13px 15px;color:var(--fg);font-size:14px;outline:none;transition:.2s}
.chat-input input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.chat-input button{background:var(--accent);color:#fff;border:none;border-radius:12px;padding:0 18px;font-weight:600;cursor:pointer;transition:.2s}
.chat-input button:hover{background:var(--accent-press)}

/* ---------- GOD MODE ---------- */
.god{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:28px;box-shadow:var(--shadow-sm)}
.god .gh{display:flex;align-items:center;justify-content:space-between}
.god .gh .name{font-size:15px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.god .timer{font-family:ui-monospace,monospace;font-size:30px;font-weight:700;letter-spacing:.02em;margin:14px 0;text-align:center;color:var(--accent)}
.god .ctrls{display:flex;gap:8px;align-items:center}
.god select{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;color:var(--fg);font-size:13px}
.god .gnote{font-size:12px;color:var(--muted2);margin-top:10px;text-align:center}
.god.on{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}

/* ---------- ONBOARD ---------- */
.ob{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:90px 20px 40px;text-align:center;position:relative;isolation:isolate}
.ob::before{content:'';position:fixed;width:520px;height:520px;border-radius:50%;filter:blur(110px);background:var(--accent-soft);opacity:.4;top:-150px;left:50%;transform:translateX(-50%);animation:floaty 12s ease-in-out infinite;z-index:-1;pointer-events:none}
.ob h2{font-size:clamp(30px,5vw,52px);font-weight:700;letter-spacing:-.04em}
.ob p{margin-top:14px;color:var(--muted);font-size:17px;max-width:520px}
.ob-box{margin-top:32px;width:100%;max-width:560px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:8px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.ob-chat{display:flex;flex-direction:column;gap:12px;padding:16px;max-height:340px;overflow:auto;text-align:left}
.ob-input{display:flex;gap:8px;padding:8px}
.ob-input input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px;color:var(--fg);font-size:15px;outline:none;transition:.2s}
.ob-input input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ob-input button{background:var(--accent);color:#fff;border:none;border-radius:12px;padding:0 20px;font-weight:600;cursor:pointer;transition:.2s}
.ob-input button:hover{background:var(--accent-press)}
.ob-suggest{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{font-size:13px;color:var(--muted);border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:9px 15px;cursor:pointer;transition:.2s}
.chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.ai-banner{margin-top:18px;font-size:13px;color:var(--muted);max-width:520px}
.ai-banner a{color:var(--accent);text-decoration:underline;cursor:pointer}

/* ---------- BLOG ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}}
.post{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;cursor:pointer;transition:.2s;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm)}
.post:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.post .ptag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700}
.post h3{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.post p{font-size:13.5px;color:var(--muted);line-height:1.55}
.post .read{font-size:13px;color:var(--accent);margin-top:auto;font-weight:600}
.article{max-width:720px;margin:0 auto}
.article .ptag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
.article h1{font-size:clamp(30px,5vw,48px);font-weight:700;letter-spacing:-.04em;margin-top:12px;line-height:1.06}
.article .body{margin-top:26px}
.article .body p{color:var(--fg);font-size:16px;line-height:1.78;margin-bottom:18px}
.article .body h3{font-size:22px;font-weight:700;margin:30px 0 12px;letter-spacing:-.02em}
.article .cta{margin-top:36px;padding:26px;border:1px solid var(--line);border-radius:18px;background:var(--panel);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;box-shadow:var(--shadow-sm)}
.article .cta b{font-size:18px}
.back{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:14px;cursor:pointer;margin-bottom:24px}
.back:hover{color:var(--accent)}

/* ---------- MISC ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:.7s}
.reveal.in{opacity:1;transform:none}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--fg);color:var(--bg);font-weight:600;font-size:14px;padding:13px 24px;border-radius:999px;z-index:200;opacity:0;transition:.3s;pointer-events:none;max-width:90vw;text-align:center;box-shadow:var(--shadow-pop)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- COMPETITOR RADAR ---------- */
.cr-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
.cr-bar input{flex:1;min-width:180px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--fg);font-size:13px}
.cr-chips{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 12px}
.cr-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:12px;background:var(--accent-soft);color:var(--accent)}
.cr-chip b{font-weight:700}
.cr-chip span{color:var(--accent);cursor:pointer;opacity:.7}
.cr-chip span:hover{opacity:1}
.lv-feed{display:grid;gap:12px}
.lv-tweet{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--panel);animation:lvIn .5s ease;box-shadow:var(--shadow-sm);transition:.18s}
.lv-tweet:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
@keyframes lvIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.lv-tweet .lt{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.lv-tweet .tag{font-weight:700;font-size:12px;border:1px solid var(--line);border-radius:999px;padding:2px 9px;background:var(--accent-soft);color:var(--accent)}
.lv-tweet .src{color:var(--muted);font-size:12px}
.lv-tweet .ago{margin-left:auto;color:var(--muted2);font-size:12px;white-space:nowrap}
.lv-tweet a.hl{font-size:14px;line-height:1.5;color:var(--fg);text-decoration:none;font-weight:600;display:block}
.lv-tweet a.hl:hover{color:var(--accent);text-decoration:underline}

.report-body{max-height:440px;overflow:auto;font-size:14px;line-height:1.6;color:var(--fg)}
.report-body h3{font-size:16px;margin:14px 0 6px;font-weight:600}
.report-body h4{font-size:13px;margin:12px 0 4px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.report-body p{margin:6px 0}
.report-body ul,.report-body ol{margin:6px 0 8px 18px}
.report-body li{margin:3px 0}
.report-body code{background:var(--bg2);padding:1px 5px;border-radius:6px;font-size:12px}
.report-body .empty{color:var(--muted2)}

/* ---------- AMBIENT MOTION (subtle, everywhere) ---------- */
.app::before,.app::after{content:'';position:fixed;border-radius:50%;filter:blur(110px);pointer-events:none;z-index:-1;opacity:.5}
.app::before{width:560px;height:560px;background:var(--accent-soft);top:-190px;right:-150px;animation:drift1 26s ease-in-out infinite}
.app::after{width:500px;height:500px;background:var(--ok-soft);bottom:-210px;left:-150px;animation:drift2 32s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-48px,44px) scale(1.07)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(46px,-36px) scale(1.05)}}
@media(prefers-reduced-motion:reduce){.app::before,.app::after,.ob::before,.hero-glow{animation:none}}

/* paired task + deliverable grid (Work page) */
.pairhead{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px}
.pairhead>div{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted2);font-weight:600;padding-left:2px}
.pairgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
.pairgrid .task,.pairgrid .art{margin-bottom:0;height:100%}
.art-empty{display:flex;align-items:center;justify-content:center;text-align:center;border:1px dashed var(--line);border-radius:14px;color:var(--muted2);font-size:12.5px;background:transparent;padding:14px}
@media(max-width:720px){.pairhead,.pairgrid{grid-template-columns:1fr}.pairhead>div:nth-child(2){display:none}}

/* theme picker */
.theme-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.theme-card{border:2px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;transition:all .18s;background:var(--bg)}
.theme-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.theme-card.selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tc-preview{height:44px;display:flex;flex-direction:column;justify-content:center;padding:8px}
.tc-name{font-size:11px;font-weight:700;padding:5px 7px 2px;letter-spacing:.02em}
.tc-desc{font-size:10px;color:var(--muted);padding:0 7px 6px;line-height:1.3}
@media(max-width:520px){.theme-grid{grid-template-columns:repeat(3,1fr)}}
/* auto-built website card + modal */
.pill-ok{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--ok-soft);color:var(--ok)}
.site-link{display:block;word-break:break-all;font-size:12.5px;color:var(--accent);background:var(--accent-soft);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 12px;text-decoration:none}
.site-link:hover{text-decoration:underline}
.site-actions{display:flex;gap:8px;flex-wrap:wrap}
.site-building{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;padding:6px 0}
.spin-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--accent);border-top-color:transparent;animation:spin 1s linear infinite;display:inline-block}
.modal textarea,.modal select{width:100%;font-family:inherit;font-size:14px;line-height:1.5;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg)}
.modal textarea{resize:vertical}

/* ===========================================================
   MOTION PACK — extra animations layered onto the dashboard
   (purely additive; safe to drop in)
   =========================================================== */
/* Gloss sweep across buttons on hover */
.btn{position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;top:0;left:-135%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-20deg);pointer-events:none}
.btn:hover::after{animation:btnGloss .8s ease}
@keyframes btnGloss{to{left:135%}}

/* Metric cards rise & stagger; value grows on hover */
.mrow .metric{animation:fadeUp .5s ease both}
.mrow .metric:nth-child(2){animation-delay:.06s}
.mrow .metric:nth-child(3){animation-delay:.12s}
.mrow .metric:nth-child(4){animation-delay:.18s}
.metric .v{transition:transform .25s ease}
.metric:hover .v{transform:scale(1.07)}

/* Agent cards rise & stagger; an active (non-idle) agent badge glows */
.agents .agent{animation:fadeUp .5s ease both}
.agents .agent:nth-child(2){animation-delay:.05s}
.agents .agent:nth-child(3){animation-delay:.1s}
.agents .agent:nth-child(4){animation-delay:.15s}
.agent .badge:not(.idle){animation:badgeGlow 1.8s ease-in-out infinite}
@keyframes badgeGlow{0%,100%{box-shadow:0 0 0 0 rgba(63,125,86,.28)}50%{box-shadow:0 0 0 5px rgba(63,125,86,0)}}

/* Tasks & deliverables nudge on hover */
.task:hover{transform:translateX(4px)}
.art .kbadge{transition:transform .2s ease}
.art:hover .kbadge{transform:scale(1.08)}

/* Boards lift subtly on hover */
.board{transition:box-shadow .25s ease,border-color .25s ease}
.board:hover{box-shadow:var(--shadow)}

/* Segmented tab pops when activated */
.tab.active{animation:tabPop .26s cubic-bezier(.2,.8,.2,1)}
@keyframes tabPop{from{transform:scale(.92)}to{transform:scale(1)}}

/* God Mode breathes while running */
.god.on{animation:godPulse 2.4s ease-in-out infinite}
@keyframes godPulse{0%,100%{box-shadow:0 0 0 3px var(--accent-soft)}50%{box-shadow:0 0 0 8px var(--accent-soft)}}
.god.on .timer{animation:timerPulse 1.05s ease-in-out infinite}
@keyframes timerPulse{0%,100%{opacity:1}50%{opacity:.7}}

/* Company pill & chat-send micro-interactions */
.company-pill{transition:border-color .2s ease}
.company-pill:hover{border-color:var(--accent)}
.chat-input button{transition:background .2s ease,transform .15s ease}
.chat-input button:hover{transform:translateY(-2px)}

@media(prefers-reduced-motion:reduce){
  .btn:hover::after,.agent .badge:not(.idle),.god.on,.god.on .timer,.tab.active{animation:none}
  .mrow .metric,.agents .agent{animation:none}
  .task:hover,.metric:hover .v,.art:hover .kbadge,.chat-input button:hover{transform:none}
}

/* ===========================================================
   DASHBOARD OVERHAUL v2 — bolder formatting + clearly visible motion
   Additive layer; overrides earlier rules where they conflict.
   =========================================================== */

/* --- View switch: every app view animates in when it becomes active --- */
.app.active{animation:viewIn .55s cubic-bezier(.22,.61,.36,1) both}
@keyframes viewIn{from{opacity:0;transform:translateY(10px) scale(.992)}to{opacity:1;transform:none}}

/* Stronger, longer entrance stagger inside the dashboard column */
.app.active .app-left>*{animation:fadeUp .6s cubic-bezier(.22,.61,.36,1) both}
.app.active .app-left>*:nth-child(1){animation-delay:.04s}
.app.active .app-left>*:nth-child(2){animation-delay:.10s}
.app.active .app-left>*:nth-child(3){animation-delay:.16s}
.app.active .app-left>*:nth-child(4){animation-delay:.22s}
.app.active .app-left>*:nth-child(5){animation-delay:.28s}
.app.active .app-left>*:nth-child(6){animation-delay:.34s}
.app.active .app-right{animation:slideInRight .6s cubic-bezier(.22,.61,.36,1) both;animation-delay:.12s}
@keyframes slideInRight{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}

/* --- Appbar: layered glass + subtle gradient --- */
.appbar{background:linear-gradient(180deg,rgba(250,248,242,.94),rgba(246,242,234,.74))}
.appbar .brand{transition:transform .2s}
.appbar .brand:hover{transform:translateY(-1px)}

/* --- Section headers get an accent tick (clear formatting change) --- */
.board>.bhead h3,.board>h3,.god .gh .name,.chat-h,.modal h3{position:relative;padding-left:15px}
.board>.bhead h3::before,.board>h3::before,.god .gh .name::before,.chat-h::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:5px;height:15px;border-radius:3px;background:linear-gradient(var(--accent),var(--accent-press))}
.modal h3::before{content:'';position:absolute;left:0;top:5px;bottom:5px;width:5px;border-radius:3px;background:linear-gradient(var(--accent),var(--accent-press))}

/* --- Metric cards: gradient surface, accent rail, gradient number, live bar --- */
.metric{position:relative;overflow:hidden;padding:24px 22px 24px 25px;border-radius:18px;background:linear-gradient(158deg,var(--panel) 58%,var(--bg2));transition:transform .22s,box-shadow .22s,border-color .22s}
.metric::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--accent),var(--accent-press))}
.metric::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:220% 100%;animation:liveBar 3.4s linear infinite;opacity:.55}
@keyframes liveBar{to{background-position:220% 0}}
.metric:hover{transform:translateY(-4px);border-color:var(--accent-soft);box-shadow:var(--shadow)}
.metric .v{font-size:32px;background:linear-gradient(120deg,var(--accent),#d9885a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent)}
.metric .l{letter-spacing:.02em}

/* --- Agent cards: animated working rail + glow when active --- */
.agent{position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(160deg,var(--panel) 62%,var(--bg2));transition:transform .22s,box-shadow .22s,border-color .22s}
.agent::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),#e0a06f,var(--accent));background-size:220% 100%;transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.agent:has(.badge:not(.idle)){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft),var(--shadow)}
.agent:has(.badge:not(.idle))::after{transform:scaleX(1);animation:liveBar 2.2s linear infinite}
.agent .ah .name{transition:transform .2s}
.agent:hover .ah .name{transform:translateX(2px)}
.agent .badge:not(.idle){animation:badgeGlow 1.8s ease-in-out infinite}

/* --- God Mode: gradient hero card + animated halo when running --- */
.god{position:relative;overflow:hidden;background:linear-gradient(165deg,var(--panel) 55%,var(--accent-soft))}
.god .timer{font-size:34px}
.god.on{background:linear-gradient(165deg,var(--accent-soft),var(--panel))}
.god.on::before{content:'';position:absolute;inset:-45%;background:conic-gradient(from 0deg,transparent,rgba(177,77,43,.12),transparent 32%);animation:spin 9s linear infinite;pointer-events:none}
.god .gh,.god .timer,.god .ctrls,.god .gnote{position:relative;z-index:1}

/* --- Tabs: lift on hover + clearer active --- */
.tab{transition:color .2s,background .2s,transform .15s}
.tab:hover{transform:translateY(-1px)}
.tab.active{box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--accent-soft)}

/* --- Tasks: clearer states + hover slide --- */
.task{border-radius:14px;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}
.task:hover{transform:translateX(5px);box-shadow:var(--shadow-sm)}
.task.active{border-color:var(--accent);background:linear-gradient(90deg,var(--accent-soft),var(--panel))}
.task.done{opacity:.92}

/* --- Deliverables / outbox rows --- */
.art{border-radius:14px}
.art:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

/* --- Chat: bubble entrance + send-button gloss base --- */
.chat-log .msg{animation:msgIn .32s cubic-bezier(.22,.61,.36,1) both}
@keyframes msgIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.chat-input button{position:relative;overflow:hidden}

/* --- Boards: lift on hover --- */
.board{transition:transform .25s,box-shadow .25s,border-color .25s}
.board:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

/* --- Onboarding: gradient headline, glowing box, floating chips --- */
.ob h2{background:linear-gradient(120deg,var(--fg),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ob-box{box-shadow:var(--shadow),0 0 0 1px var(--line);animation:fadeUp .6s ease both}
.ob-suggest .chip{animation:chipFloat 5s ease-in-out infinite}
.ob-suggest .chip:nth-child(2){animation-delay:.6s}
.ob-suggest .chip:nth-child(3){animation-delay:1.2s}
.ob-suggest .chip:nth-child(4){animation-delay:1.8s}
.ob-suggest .chip:nth-child(5){animation-delay:2.4s}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.ob-chat .msg{animation:msgIn .32s ease both}

/* --- Competitor radar chips --- */
.cr-chip{transition:transform .15s,box-shadow .15s}
.cr-chip:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}

/* --- Modals: smoother, bolder pop --- */
.modal{animation:modalPop .3s cubic-bezier(.22,.61,.36,1) both}
@keyframes modalPop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

/* --- Theme picker cards --- */
.theme-card{transition:transform .18s,border-color .18s,box-shadow .18s}
.theme-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.theme-card.selected{box-shadow:0 0 0 3px var(--accent-soft),var(--shadow-sm)}

/* --- Company pill --- */
.company-pill{transition:transform .2s,border-color .2s,box-shadow .2s}
.company-pill:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:var(--shadow-sm)}

/* --- Stronger ambient blobs on app views --- */
.app::before{opacity:.6;width:600px;height:600px}
.app::after{opacity:.55;width:540px;height:540px}

/* --- Reduced-motion guard for everything added above --- */
@media(prefers-reduced-motion:reduce){
  .app.active,.app.active .app-left>*,.app.active .app-right,
  .metric::after,.agent:has(.badge:not(.idle))::after,.god.on::before,
  .chat-log .msg,.ob-suggest .chip,.ob-box,.modal{animation:none}
  .metric:hover,.agent:hover .ah .name,.task:hover,.art:hover,.board:hover,
  .theme-card:hover,.company-pill:hover,.tab:hover,.appbar .brand:hover{transform:none}
}

/* ===== req#24: high-quality icons + dot removal ===== */
.brand .dot,.live-dot{display:none!important}
.pi{display:inline-block;width:1.05em;height:1.05em;vertical-align:-0.18em;flex:none}
.card .ic .pi{width:24px;height:24px}
.agent .ah .name .pi,.god .gh .name .pi{width:17px;height:17px;vertical-align:middle}
.mi{display:inline-flex;align-items:center;justify-content:center;margin-right:8px}
.mi .pi{width:16px;height:16px}
.chat-input button .pi{width:18px;height:18px;vertical-align:middle}
button .pi{vertical-align:-0.2em}


/* ===== req#25: creative wordmark + company name + collapsible outbox ===== */
.brand{position:relative;letter-spacing:-.04em}
.brand::before{content:"P";display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:9px;background:linear-gradient(135deg,var(--accent),#e0915f);color:#fff;font-weight:800;font-size:.6em;line-height:1;box-shadow:0 4px 12px -4px rgba(177,77,43,.55);transform:rotate(-4deg)}
#compName{background:linear-gradient(90deg,var(--accent),var(--fg));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-weight:700;letter-spacing:.01em}
.ob-sum{cursor:pointer;list-style:none}
.ob-sum::-webkit-details-marker{display:none}
.ob-sum::marker{content:""}
.ob-sum-tools{display:flex;align-items:center;gap:10px}
.ob-caret{width:18px;height:18px;color:var(--muted);transition:transform .25s ease;flex:none}
.ob-coll[open] .ob-caret{transform:rotate(180deg)}


/* ===== req#27: phone-friendly layout (mobile-only; desktop unchanged) ===== */
@media(max-width:768px){
  .appbar{padding:10px 14px;gap:10px 12px;flex-wrap:wrap;align-items:center}
  .appbar .left{gap:8px;min-width:0;flex:1 1 auto;flex-wrap:wrap;align-items:center}
  #reportOpenBtn{margin-left:0!important}
  .company-pill{max-width:62vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .appbar .right{gap:8px;width:100%;flex-wrap:wrap;justify-content:flex-start}
  /* tabs become a full-width wrapping bar — every tab stays visible & tappable, no hidden scroll */
  .tabs{order:-1;width:100%;display:flex;flex-wrap:wrap;gap:6px;background:var(--bg2);border-radius:14px;padding:6px}
  .tab{flex:1 1 28%;justify-content:center;text-align:center;white-space:nowrap;padding:9px 6px;font-size:13px;border-radius:10px}
  /* action buttons + settings share the row below the tabs */
  .appbar .right>.btn{flex:1 1 auto}
  .appbar .right .menu{flex:1 1 auto;position:relative}
  .appbar .right .menu>.btn{width:100%;justify-content:center}
  .menu-pop{right:auto;left:0}
}
@media(max-width:600px){
  section{padding:64px 16px}
  .app-left{padding:22px 16px}
  .app-right{padding:22px 16px}
  .board{padding:20px 16px;border-radius:16px}
  .board+.board{margin-top:20px}
  .modal{padding:24px 20px;border-radius:18px;max-height:92vh}
  .modal.wide{max-width:100%}
  .modal h3{font-size:22px}
  .mrow{gap:12px;margin-bottom:24px}
  .metric{padding:18px 16px 18px 19px}
  .metric .v{font-size:26px}
  .god .timer{font-size:30px}
  .task:hover,.art:hover{transform:none}
  .art-actions{flex-wrap:wrap}
  .art-actions .btn{flex:1 1 auto;min-width:140px}
  .msg{max-width:94%}
  .ob{padding:84px 16px 32px}
  .ob-chat{max-height:46vh}
  .toast{font-size:13px;padding:11px 18px}
  /* fundraise form: stack the two-up fields on phones */
  #app-fundraise div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
}
@media(max-width:420px){
  .appbar .brand{font-size:17px}
  .tab{flex:1 1 44%;padding:9px 6px;font-size:12.5px}
  .btn.sm{padding:7px 11px;font-size:12px}
  .metric .v{font-size:23px}
}