/* Circl "native app" layer: grouped backgrounds, large titles, inset lists, gradient avatars,
   stories row, role tags, and the new landing page. Loaded last so it wins. */
:root{--canvas:#F2F2F7;--card-sh:0 1px 2px rgba(15,16,20,.04),0 6px 18px -8px rgba(15,16,20,.10);--sep:rgba(60,60,67,.14)}
html[data-dark]{--canvas:#000;--bg:#16171B;--panel:#222329;--hover:#2A2C33;--line:#2C2E35;--card-sh:0 0 0 .5px rgba(255,255,255,.06);--sep:rgba(255,255,255,.08)}
body{background:var(--canvas)}
body[data-tab="welcome"],body[data-tab="auth"],body[data-tab="onb"],body[data-tab="loading"],body[data-tab="waiting"],body[data-tab="activating"]{background:var(--bg)}
html[data-dark] body[data-tab="welcome"]{background:#000}

/* ---------- top bar ---------- */
header.top{background:color-mix(in srgb,var(--canvas) 80%,transparent);border-bottom:.5px solid transparent;padding-block:8px}
html.scrolled header.top{border-bottom-color:var(--sep);box-shadow:none}
.brand{display:inline-flex;align-items:center;gap:8px;font:800 19px/1 "Figtree",var(--body);letter-spacing:-.02em}
.brand img{border-radius:8px;box-shadow:0 0 0 .5px var(--sep)}
.status-btn{border:0;background:var(--bg);box-shadow:var(--card-sh);padding:7px 11px}
.hdr-search{border:0;background:var(--bg);box-shadow:var(--card-sh)}
.me-btn{border:0;background:none;padding:0}

/* ---------- tab bar ---------- */
nav.tabs{background:color-mix(in srgb,var(--bg) 84%,transparent);border-top:.5px solid var(--sep)}
nav.tabs button[aria-current="page"] svg{fill:currentColor;fill-opacity:.14}
nav.tabs button{font-weight:700;letter-spacing:-.01em}

/* ---------- large titles, less text ---------- */
body:not([data-tab="welcome"]) .page-head{text-align:center;padding:12px 4px 2px}
.page-head h1{font:800 32px/1.08 "Figtree",var(--body);letter-spacing:-.035em;margin:0 0 4px}
body[data-tab="circles"] .page-head p:not(.live-line),body[data-tab="feed"] .page-head p,body[data-tab="inbox"] .page-head p,body[data-tab="tools"] .page-head p,
body[data-tab="people"] .page-head p,body[data-tab="events"] .page-head p,body[data-tab="goals"] .page-head p,body[data-tab="board"] .page-head p,
body[data-tab="apps"] .page-head p,body[data-tab="learn"] .page-head p,body[data-tab="focus"] .page-head p,body[data-tab="money"] .page-head p,body[data-tab="owner"] .page-head p,body[data-tab="search"] .page-head p,body[data-tab="invite"] .page-head p,body[data-tab="coach"] .page-head p{display:none}
body[data-tab="circles"] .page-head .live-line{justify-content:center!important;margin:0}
.sec-title{text-align:left;margin:0 4px 10px}
.sec-title h2{font:800 20px/1.2 "Figtree",var(--body);letter-spacing:-.02em}
body:not([data-tab="you"]):not([data-tab="owner"]) .sec-title p{display:none}
.sec{margin-top:26px}

/* ---------- cards & grouped lists ---------- */
.card,.ptcard,.chal,.tcalcs,.tapps,.dlist,.srs,.thead,.tdd-btn,.faq,.tpins,.install-line,.autobanner,.checkin-done,.panel,.kpi,.setup-card,.pcard,.fpost,.e2ecard,.goal,.tcalc:only-child{border-color:transparent}
.card,.ptcard,.chal,.tcalcs,.tapps,.dlist,.srs,.tdd-btn,.tpins,.install-line,.fpost,.goal,.pcard,.tile{background:var(--bg);box-shadow:var(--card-sh);border:0;border-radius:20px}
.panel{background:var(--bg);box-shadow:var(--card-sh)}
.clist,.menu,.checklist{background:var(--bg);border-radius:20px;box-shadow:var(--card-sh);overflow:hidden;border:0}
.clist .crow2,.menu button{position:relative;border:0!important;border-radius:0!important;background:transparent!important;margin:0!important;box-shadow:none!important}
.clist .crow2+.crow2::before,.menu button+button::before{content:"";position:absolute;top:0;left:72px;right:0;height:.5px;background:var(--sep)}
.clist .crow2{padding:12px 16px}
.crow2 .cic{width:46px;height:46px;border-radius:14px;font-size:24px}
.crow2.unread b{font-weight:800}
.cgroup h3{font:700 13px var(--body);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:18px 4px 8px}
@media (hover:hover){.clist .crow2:hover,.menu button:hover{background:var(--hover)!important}}
.clist .crow2:active,.menu button:active{background:var(--hover)!important;transform:none}
.statgrid button,.stats div{background:var(--bg);border:0;box-shadow:var(--card-sh);border-radius:18px}
.search input.in,input.in,select.in,textarea.in{border-color:transparent;background:var(--bg);box-shadow:var(--card-sh)}
body[data-tab="welcome"] :is(input,select,textarea).in,.sheet :is(input,select,textarea).in{box-shadow:none;border-color:var(--line);background:var(--panel)}
.seg{background:color-mix(in srgb,var(--line) 70%,transparent)}
.chip{border-color:transparent;background:var(--bg);box-shadow:var(--card-sh)}
.chip[aria-pressed="true"],.ftabs button[aria-pressed="true"]{background:var(--ink)!important;color:var(--on-ink)!important;border-color:var(--ink)!important}
.chip[aria-pressed="true"]::before{content:""}
.thread-row,.person{background:var(--bg);border:0!important;border-radius:18px;box-shadow:var(--card-sh);margin-bottom:8px;padding:12px 14px}
.empty{background:var(--bg);border-radius:20px;box-shadow:var(--card-sh);padding:22px 18px}
.sheet{background:var(--bg)}
html[data-dark] .sheet{background:#1C1D22}
.btn{border-radius:14px;letter-spacing:-.01em}
.btn.ghost{background:color-mix(in srgb,var(--line) 70%,transparent)}

/* ---------- avatars ---------- */
.av{background:linear-gradient(145deg,hsl(var(--h,220) 70% 62%),hsl(calc(var(--h,220) + 38) 72% 46%));color:#fff;border:0;font-weight:800;text-shadow:0 1px 1px rgba(0,0,0,.15)}
.st{border-color:var(--bg)}

/* ---------- Home ---------- */
.hhero{padding:10px 4px 0;text-align:center}
.hhero small{display:block;font:700 12.5px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hhero h1{margin:4px 0 2px;font:800 32px/1.08 "Figtree",var(--body);letter-spacing:-.035em}
.hhero p{margin:0;color:var(--muted);font-size:15px}
.stories{display:flex;gap:12px;overflow-x:auto;margin:16px -16px 2px;padding:2px 16px 6px;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.story{flex:none;width:68px;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;color:var(--ink)}
.story .ring{width:66px;height:66px;border-radius:50%;padding:2.5px;background:var(--line);display:grid;place-items:center;transition:transform .3s var(--ease-spring,ease)}
.story.new .ring{background:conic-gradient(from 200deg,#1DA851,#5BD58A,#3363D6,#8F5BFF,#1DA851)}
.story .cic{width:100%;height:100%;border-radius:50%;background:var(--bg);border:3px solid var(--canvas);font-size:27px;display:grid;place-items:center}
.story.add .cic{font-size:24px;color:var(--muted)}
.story small{font-size:11.5px;font-weight:600;max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story:active .ring{transform:scale(.92)}
#homeStats{margin-top:16px!important}

/* ---------- staff role tags ---------- */
.stag{display:inline-flex;align-items:center;gap:4px;font:800 10.5px/1 var(--body);letter-spacing:.02em;padding:4px 8px 4px 6px;border-radius:7px;white-space:nowrap;vertical-align:middle}
.stag i{font-style:normal;font-size:10px}
.st-ceo{background:linear-gradient(135deg,#121212,#3b2f10);color:#F6D47C;box-shadow:inset 0 0 0 1px rgba(246,212,124,.5)}
.st-cofounder{background:#EEE8FF;color:#5B3FD6}.st-team{background:#E3EEFF;color:#1E5BD6}.st-mod{background:#E2F5EA;color:#137A3A}
.st-lead{background:#FFF0DE;color:#B05A00}.st-support{background:#EEF0F4;color:#4A4E5A}
html[data-dark] .st-cofounder{background:#251c47;color:#B7A4FF}html[data-dark] .st-team{background:#16264a;color:#8FB0FF}
html[data-dark] .st-mod{background:#12301F;color:#5FD893}html[data-dark] .st-lead{background:#3a2610;color:#FFB766}html[data-dark] .st-support{background:#262830;color:#C5C8D1}
.teamrole{margin-top:16px;padding:12px 14px;border-radius:16px;background:var(--panel);text-align:left;display:flex;flex-direction:column;gap:8px}
.teamrole b{display:block;font-size:14px}.teamrole small{display:block;font-size:12.5px;color:var(--muted)}

/* ---------- landing page ---------- */
.lp-nav{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;max-width:520px;margin:0 auto;padding:16px 4px 0}
.lp-logo{display:inline-flex;align-items:center;gap:9px;font:800 21px/1 "Figtree",var(--body);letter-spacing:-.03em}
.lp-logo img{border-radius:8px;box-shadow:0 0 0 .5px var(--sep)}
.lp-signin{border:0;background:var(--panel);border-radius:99px;padding:9px 16px;font-weight:700;font-size:14px;color:var(--ink)}
.front.lp-hero{min-height:0;padding-block:34px 20px;gap:22px;justify-content:flex-start}
.lp-hero .front-name,.lp-hero .devpill{display:none}
.lp-hero .front-body h1{font:800 clamp(38px,11vw,54px)/1.02 "Figtree",var(--body);letter-spacing:-.045em;margin:0 0 14px}
.lp-hero .front-body p{font-size:17px;max-width:30ch}
.lp-hero .front-buy{gap:10px}
.lp-cta{padding:17px 18px;font-size:16.5px;border-radius:16px;box-shadow:0 14px 30px -14px rgba(15,16,20,.55)}
html[data-dark] .lp-cta{box-shadow:0 14px 34px -14px rgba(255,255,255,.35)}
.lp-phone{width:min(300px,78vw);margin:10px auto 0;padding:10px;border-radius:46px;background:#0b0c10;box-shadow:0 0 0 1.5px #2b2e36,0 40px 80px -30px rgba(15,16,20,.55);transform:perspective(900px) rotateX(8deg);transform-origin:50% 100%}
.lp-screen{position:relative;border-radius:37px;overflow:hidden;background:#fff;padding:52px 12px 14px;text-align:left;color:#0F1014}
html[data-dark] .lp-screen{background:#111216;color:#F1F2F5}
.lp-isl{position:absolute;top:10px;left:50%;width:92px;height:26px;margin-left:-46px;border-radius:16px;background:#000}
.lp-chathead{display:flex;align-items:center;gap:10px;padding:0 4px 12px;border-bottom:.5px solid rgba(60,60,67,.18);margin-bottom:12px}
.lp-chathead .cic{width:34px;height:34px;font-size:18px}
.lp-chathead b{display:block;font-size:15px}.lp-chathead small{display:flex;align-items:center;gap:5px;font-size:11.5px;color:#6A6D78}
.lp-chathead small i{width:6px;height:6px;border-radius:50%;background:#1DA851}
.lp-msg{display:flex;gap:7px;align-items:flex-end;margin-bottom:9px}
.lp-msg.r{flex-direction:row-reverse}
.lp-msg .av{flex:none;width:26px;height:26px;font-size:11px}
.lp-msg div{max-width:80%}
.lp-msg small{display:block;font-size:10.5px;color:#8a8d97;margin:0 4px 3px}
.lp-msg.r small{text-align:right}
.lp-msg p{margin:0;background:#EFF0F3;border-radius:18px;padding:8px 12px;font-size:13.5px;line-height:1.35}
html[data-dark] .lp-msg p{background:#24262c}
.lp-msg.r p{background:#0F1014;color:#fff}
html[data-dark] .lp-msg.r p{background:#F1F2F5;color:#0F1014}
.lp-compose{display:flex;align-items:center;gap:8px;margin-top:12px;border-radius:99px;background:#EFF0F3;padding:9px 9px 9px 14px;font-size:12.5px;color:#8a8d97}
html[data-dark] .lp-compose{background:#24262c}
.lp-compose span{flex:1}.lp-compose i{width:26px;height:26px;border-radius:50%;background:#0F1014}
html[data-dark] .lp-compose i{background:#F1F2F5}
.lp-note{margin:0;font-size:12px}
.insights.lp-more{border-top:0;gap:56px;padding-top:24px}
.lp-feats{display:flex;flex-direction:column;gap:12px}
.lp-feat{display:flex;gap:14px;align-items:flex-start;text-align:left;background:var(--panel);border-radius:20px;padding:16px}
.lp-fic{width:46px;height:46px;border-radius:14px;background:var(--bg);display:grid;place-items:center;font-size:23px;flex:none;box-shadow:var(--card-sh)}
.lp-feat b{display:block;font-size:16px;margin-bottom:2px}.lp-feat small{display:block;font-size:14px;color:var(--muted);line-height:1.45}
.lp-marquee{overflow:hidden;margin:0 -16px;padding:4px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.lp-track{display:flex;gap:8px;width:max-content;animation:lpScroll 60s linear infinite}
.lp-marquee.rev .lp-track{animation-direction:reverse;animation-duration:70s}
.lp-chip{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;background:var(--panel);border-radius:99px;padding:6px 14px 6px 6px;font-weight:600;font-size:14px}
.lp-chip .cic{width:28px;height:28px;font-size:15px}
@keyframes lpScroll{to{transform:translateX(-50%)}}
.lp-final{display:flex;flex-direction:column;align-items:center;gap:10px}
.lp-final h2{font:800 30px/1.1 "Figtree",var(--body)!important;letter-spacing:-.03em}
.lp-foot{line-height:1.8;padding-bottom:20px}
@media (prefers-reduced-motion:reduce){.lp-track{animation:none}}

/* ---------- screen transitions ---------- */
.m-push{animation:mPush .42s var(--ease-out,ease) both}
.m-pop{animation:mPop .38s var(--ease-out,ease) both}
@keyframes mPush{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
@keyframes mPop{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
main.swiping{transition:none!important}
.edge-shadow{position:fixed;inset:0;z-index:6;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.08),transparent 30%);opacity:0}
.insights>section,.lp-more>section{min-width:0;max-width:100%}
body[data-tab="welcome"]{overflow-x:clip}
.front.lp-hero{overflow-x:clip;overflow-y:visible}