/* TimeNova marketing site. One stylesheet, every page. */
:root{
  --ink:#1D1D1F;--gray:#54545A;--mut:#8A8A91;--line:#D2D2D7;--soft:#ECECEF;--f5:#F1F3F8;--f2:#FBFBFD;--white:#fff;
  --blue:#0071E3;--blue2:#0077ED;--green:#34C759;--amber:#F5A623;--red:#FF3B30;
  --grad:linear-gradient(120deg,#0071E3,#7C5CFF);
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;line-height:1.5}
.wrap{max-width:1024px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-weight:600;letter-spacing:-.015em;line-height:1.1}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
a{text-decoration:none;color:inherit}
.link{color:var(--blue)}.link:hover{text-decoration:underline}
.btn{background:var(--grad);color:#fff;border-radius:980px;padding:12px 24px;font-size:.98rem;font-weight:500;display:inline-block;transition:.18s;text-align:center;box-shadow:0 6px 18px rgba(0,113,227,.25)}.btn:hover{filter:brightness(1.07);box-shadow:0 8px 24px rgba(124,92,255,.3)}
.btn.o{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}.btn.o:hover{background:var(--f5);filter:none}
.btn.big{padding:14px 30px;font-size:1.05rem}

/* the black band: the product's own top nav, brought to the site (brand decision 2026-08-13) */
nav.top{position:sticky;top:0;z-index:50;height:54px;background:#15171C;border-bottom:2px solid transparent;
  background:linear-gradient(#15171C,#15171C) padding-box,var(--grad) border-box}
nav.top .row{max-width:1024px;margin:0 auto;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1.24rem;color:#fff}
nav.top .links{display:flex;gap:26px;font-size:.84rem;color:rgba(255,255,255,.72)}
nav.top .links a:hover{color:#fff}
nav.top .cta{display:flex;align-items:center;gap:16px;font-size:.84rem}
nav.top .cta .login{color:rgba(255,255,255,.72)}
nav.top .cta .login:hover{color:#fff}
nav.top .cta .go{color:#fff;font-weight:600;background:var(--grad);border-radius:980px;padding:8px 18px}
@media(max-width:820px){nav.top .links{display:none}}

.hero{text-align:center;padding:86px 0 46px;position:relative;overflow:hidden;
  background:
    radial-gradient(720px 420px at 12% -10%, rgba(0,113,227,.14), transparent 62%),
    radial-gradient(820px 460px at 88% -6%, rgba(124,92,255,.13), transparent 62%),
    radial-gradient(520px 320px at 50% 118%, rgba(52,199,89,.07), transparent 60%)}
.eyebrow{display:inline-block;color:var(--blue);font-size:.92rem;font-weight:600;margin-bottom:14px;padding:6px 16px;border-radius:980px;background:rgba(0,113,227,.08);border:1px solid rgba(0,113,227,.15)}
.hero h1{font-size:clamp(2.5rem,5.8vw,4.2rem);margin-bottom:16px;letter-spacing:-.03em;max-width:20ch;margin-left:auto;margin-right:auto}
.hero .tag{font-size:clamp(1.15rem,2.3vw,1.45rem);font-weight:400;max-width:52ch;margin:0 auto 26px;color:var(--gray)}
.hero .actions{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}
.hero .note{margin-top:14px;font-size:.85rem;color:var(--mut)}

/* the hero showcase: real report screenshots cycling through tabs, with an
   optional live recording. Light styling, the site's own language. */
.showtabs{display:flex;justify-content:center;gap:8px;margin:44px 0 16px;flex-wrap:wrap}
.showtabs .st{border:1px solid var(--line);background:#fff;color:var(--gray);border-radius:980px;padding:9px 18px;font-size:.88rem;font-weight:500;font-family:var(--sans);cursor:pointer;transition:.18s}
.showtabs .st.on{background:var(--grad);color:#fff;border-color:transparent;font-weight:600;box-shadow:0 6px 20px rgba(0,113,227,.3)}
.showtabs .st.play{color:#1E7F3C;border-color:rgba(52,199,89,.4)}
.showtabs .st.play.on{background:#E8F7EC;color:#1E7F3C;box-shadow:none}
.showtabs .st.play i{display:inline-block;width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-right:7px;vertical-align:-1px}
.showbody{position:relative}
.showbody img{display:block;width:100%;height:auto;opacity:0;transition:opacity .5s;position:absolute;inset:0}
.showbody img.on{opacity:1;position:relative}
.showbody video{display:none;width:100%;height:auto}
.showbody.playing video{display:block}
.showbody.playing img{display:none}
.showexplain{max-width:720px;margin:16px auto 0;text-align:center;font-size:.95rem;color:var(--gray);min-height:44px}
.showexplain b{color:var(--ink)}
.showprog{height:3px;max-width:200px;margin:12px auto 0;background:#E8E9EE;border-radius:2px;overflow:hidden}
.showprog i{display:block;height:100%;width:0;background:var(--grad)}
@keyframes showfill{from{width:0}to{width:100%}}

/* real product screenshots, always inside a browser frame so they read as a
   picture of the product, never as part of the page */
.pframe{max-width:1000px;margin:56px auto 0;border-radius:16px;background:#fff;border:1px solid #E2E2E7;box-shadow:0 34px 90px rgba(29,29,31,.20);overflow:hidden;text-align:left}
.pframe .pbar{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid #ECECEF;background:#F7F7F9}
.pframe .pbar i{width:10px;height:10px;border-radius:50%;background:#E0E0E4}
.pframe .pbar span{margin:0 auto;font-size:.75rem;color:#8A8A91;background:#fff;border:1px solid #ECECEF;border-radius:7px;padding:3px 28px}
.pframe img{display:block;width:100%;height:auto}
.pframe.inpage{max-width:880px;margin-top:44px;box-shadow:0 18px 48px rgba(29,29,31,.12)}

/* hero product mockup */
.shot{max-width:940px;margin:56px auto 0;border-radius:20px;border:1px solid #ECECEF;background:#fff;box-shadow:0 30px 80px rgba(29,29,31,.14);overflow:hidden;text-align:left}
.shot .bar{display:flex;align-items:center;gap:7px;padding:13px 18px;border-bottom:1px solid #EEE}
.shot .bar i{width:10px;height:10px;border-radius:50%;background:#E0E0E4}
.shot .bar span{margin-left:10px;font-size:.8rem;color:var(--mut)}
.shot .body{display:grid;grid-template-columns:185px 1fr}
.snav{border-right:1px solid #EEE;padding:18px;background:var(--f2)}
.snav div{font-size:.85rem;color:var(--gray);padding:8px 10px;border-radius:8px;margin-bottom:2px}
.snav div.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.smain{padding:24px}
.k3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.kc{border:1px solid #ECECEF;border-radius:14px;padding:15px}
.kc .l{font-size:.7rem;color:var(--gray);text-transform:uppercase;letter-spacing:.05em}
.kc .v{font-size:1.8rem;font-weight:600;margin-top:5px;letter-spacing:-.02em}
.kc .live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:6px}
.chart{border:1px solid #ECECEF;border-radius:14px;padding:16px}
.chart .cl{font-size:.8rem;color:var(--gray)}
.hbars{display:flex;align-items:flex-end;gap:7px;height:96px;margin-top:10px}
.hbars b{flex:1;border-radius:5px 5px 0 0;background:#E8E8EC}.hbars b.on{background:var(--grad)}
@media(max-width:720px){.shot .body{grid-template-columns:1fr}.snav{display:none}}

section.pad{padding:90px 0}
section.pad.alt{background:linear-gradient(135deg,#F2F6FF 0%,#F7F4FF 55%,#F3F9F4 100%)}
.center{text-align:center}
h2.sec{font-size:clamp(1.9rem,4vw,2.8rem);max-width:24ch;margin:0 auto 16px;text-align:center}
p.sub{font-size:1.15rem;color:var(--gray);max-width:62ch;margin:0 auto;text-align:center}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}
@media(max-width:780px){.grid3,.grid2{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--soft);border-radius:18px;padding:28px;position:relative;transition:.18s}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:18px 18px 0 0;background:var(--grad);opacity:0;transition:.18s}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(29,29,31,.08)}
.card:hover::before{opacity:1}
.alt .card{border-color:#E4E6EC}
.card h3{font-size:1.12rem;margin-bottom:8px}
.card p{font-size:.95rem;color:var(--gray)}
.card .ic{width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:14px;box-shadow:0 4px 12px rgba(0,113,227,.25)}

/* comparison table */
.cmp{width:100%;border-collapse:collapse;margin-top:40px;font-size:.94rem;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.cmp th,.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--soft)}
.cmp th{background:var(--f2);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gray)}
.cmp td:first-child{color:var(--gray)}
.cmp .yes{color:var(--green);font-weight:600}
.cmp .no{color:var(--mut)}
.cmp .us{background:rgba(0,113,227,.04)}
@media(max-width:680px){.cmp{font-size:.84rem}.cmp th,.cmp td{padding:10px 10px}}

/* long-form articles */
.prose{max-width:720px;margin:0 auto;padding:60px 24px 80px;font-size:1.06rem;line-height:1.7}
.prose h1{font-size:clamp(2rem,4.6vw,3rem);letter-spacing:-.025em;margin-bottom:10px;line-height:1.12}
.prose .meta{color:var(--mut);font-size:.88rem;margin-bottom:36px}
.prose h2{font-size:1.55rem;margin:44px 0 14px}
.prose h3{font-size:1.18rem;margin:32px 0 10px}
.prose p{margin-bottom:18px;color:#333336}
.prose ul,.prose ol{margin:0 0 18px 24px;color:#333336}
.prose li{margin-bottom:8px}
.prose table{width:100%;border-collapse:collapse;margin:10px 0 24px;font-size:.92rem}
.prose th,.prose td{padding:10px 12px;border-bottom:1px solid var(--soft);text-align:left}
.prose th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gray)}
.prose blockquote{border-left:3px solid var(--blue);padding:4px 0 4px 18px;color:var(--gray);margin:0 0 18px}
.prose .box{background:linear-gradient(135deg,#F2F6FF,#F7F4FF);border:1px solid rgba(0,113,227,.12);border-radius:14px;padding:20px 22px;margin:0 0 20px;font-size:.98rem}
.prose a{color:var(--blue)}.prose a:hover{text-decoration:underline}
.prose img{max-width:100%;border-radius:12px}

/* article shell: content left, sticky rail right (the product's right-rail pattern) */
.artwrap{max-width:1120px;margin:0 auto;padding:48px 24px 80px;display:grid;grid-template-columns:minmax(0,720px) 300px;gap:56px;justify-content:center}
.artwrap .prose{padding:0;margin:0}
@media(max-width:1080px){.artwrap{grid-template-columns:minmax(0,720px)}.atoc{display:none}}
.atoc{position:sticky;top:76px;align-self:start;font-size:.88rem}
.atoc .tt{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin-bottom:10px}
.atoc nav a{display:block;color:var(--gray);padding:6px 0 6px 12px;border-left:2px solid var(--soft);line-height:1.35}
.atoc nav a:hover{color:var(--ink)}
.atoc nav a.on{color:var(--blue);border-left-color:var(--blue);font-weight:500}
.atoc .cta-card{margin-top:24px;background:linear-gradient(135deg,#F2F6FF,#F7F4FF);border:1px solid rgba(0,113,227,.12);border-radius:14px;padding:20px}
.atoc .cta-card b{display:block;margin-bottom:6px}
.atoc .cta-card p{color:var(--gray);font-size:.85rem;margin-bottom:14px}
.prose .cat{display:inline-block;font-size:.74rem;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;background:rgba(0,113,227,.08);border:1px solid rgba(0,113,227,.15);padding:5px 12px;border-radius:980px}

/* illustrative report mockups (marketing visuals, clearly sample data) */
.mini{border:1px solid #ECECEF;border-radius:16px;box-shadow:0 16px 44px rgba(29,29,31,.09);padding:20px;background:#fff;max-width:780px;margin:44px auto 0;text-align:left}
.mini .mt{font-size:.8rem;color:var(--gray);margin-bottom:14px}
.mockrow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:640px){.mockrow{grid-template-columns:1fr}}
.capthumb{border:1px solid #ECECEF;border-radius:12px;overflow:hidden;background:#fff;position:relative}
.capthumb .img{height:88px;background:linear-gradient(135deg,#DCE9FB,#E9E2FF)}
.capthumb .img.b2{background:linear-gradient(135deg,#E2F3E6,#DCE9FB)}
.capthumb .img.b3{background:linear-gradient(135deg,#EFE7FB,#FDEEDC)}
.capthumb .cap{padding:8px 11px;font-size:.75rem;color:var(--gray);display:flex;justify-content:space-between;align-items:center}
.capthumb .scr{background:rgba(0,113,227,.1);color:var(--blue);border-radius:980px;padding:2px 8px;font-size:.68rem;font-weight:600}
.hrow{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--soft)}
.hrow:last-child{border-bottom:0}
.hrow .pav{width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:600;flex:none}
.hrow .pname{width:110px;font-size:.88rem;font-weight:500}
.hrow .ptrack{flex:1;height:10px;border-radius:5px;background:#EEF0F4;overflow:hidden}
.hrow .ptrack i{display:block;height:100%;border-radius:5px;background:var(--grad)}
.hrow .phrs{width:64px;text-align:right;font-size:.86rem;font-variant-numeric:tabular-nums}

/* blog cards */
.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px}
@media(max-width:720px){.posts{grid-template-columns:1fr}}
.post{border:1px solid var(--soft);border-radius:18px;padding:26px;display:block;transition:.15s}
.post:hover{box-shadow:0 10px 30px rgba(0,0,0,.07);transform:translateY(-2px)}
.post .cat{font-size:.74rem;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.08em}
.post h3{font-size:1.15rem;margin:10px 0 8px;line-height:1.3}
.post p{font-size:.92rem;color:var(--gray)}
.post .d{font-size:.8rem;color:var(--mut);margin-top:14px}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:34px 0 10px}
@media(max-width:820px){.tiers{grid-template-columns:1fr;max-width:420px;margin:0 auto}}
.tier{border:1px solid var(--soft);border-radius:20px;padding:30px 26px;display:flex;flex-direction:column;background:#fff}
.tier.pop{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;box-shadow:0 24px 60px rgba(0,113,227,.14);position:relative}
.tier .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-size:.72rem;font-weight:600;padding:5px 14px;border-radius:980px}
.tier .name{font-size:1.2rem;font-weight:600}
.tier .who{color:var(--gray);font-size:.9rem;margin-top:4px;min-height:40px}
.price{margin:16px 0 6px;display:flex;align-items:baseline;gap:4px}
.price .n{font-size:2.6rem;font-weight:600;letter-spacing:-.02em}
.price .u{color:var(--gray);font-size:.9rem}
.tier .bill{color:var(--mut);font-size:.8rem;min-height:18px}
.tier .btn{margin:20px 0 22px}
.feat{list-style:none;display:flex;flex-direction:column;gap:11px}
.feat li{display:flex;gap:10px;font-size:.92rem}
.feat li .c{color:var(--green);flex:none;font-weight:700}
.feat li.dim{color:var(--mut)}

.faq{padding:80px 0 30px}
.faq h2{text-align:center;font-size:clamp(1.8rem,3.6vw,2.4rem);margin-bottom:32px}
.q{max-width:720px;margin:0 auto;border-top:1px solid var(--soft);padding:22px 0}
.q .t{font-weight:600;font-size:1.05rem;margin-bottom:6px}
.q p{color:var(--gray);font-size:.96rem}

.cta-band{padding:100px 0;text-align:center;position:relative;
  background:
    radial-gradient(640px 360px at 18% 120%, rgba(0,113,227,.12), transparent 60%),
    radial-gradient(720px 400px at 84% 130%, rgba(124,92,255,.12), transparent 60%)}
.cta-band h2{font-size:clamp(2rem,4.2vw,3rem);max-width:18ch;margin:0 auto 20px}

/* the one dark moment on the site: the closing band, where the nova glows */
.cta-band.dark{background:#0E1015;color:#fff;overflow:hidden}
.cta-band.dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(700px 420px at 68% -30%, rgba(124,92,255,.30), transparent 60%),
    radial-gradient(620px 380px at 22% 130%, rgba(0,113,227,.26), transparent 60%)}
.cta-band.dark .wrap{position:relative}
.cta-band.dark h2{color:#fff}
.cta-band.dark .sub2{color:rgba(255,255,255,.6);font-size:1.05rem;margin:0 auto 26px;max-width:46ch}
.cta-band.dark .link{color:#9BB8FF}
.cta-band.dark .btn{box-shadow:0 10px 34px rgba(0,113,227,.45)}
.cta-band.dark .nova{width:44px;height:44px;margin:0 auto 20px;display:block}

/* ===== the collage hero: copy left, the product floating right (homepage) ===== */
.chero{padding:64px 0 58px;overflow:hidden;
  background:
    radial-gradient(720px 420px at 8% -10%, rgba(0,113,227,.10), transparent 62%),
    radial-gradient(820px 480px at 96% 30%, rgba(124,92,255,.13), transparent 60%)}
.chero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;max-width:1150px}
.chero h1{font-size:clamp(2.3rem,4.6vw,3.5rem);letter-spacing:-.028em;line-height:1.06;margin-bottom:16px;font-weight:700}
.chero .tag{font-size:1.14rem;color:var(--gray);margin-bottom:20px;max-width:46ch}
.cbul{list-style:none;display:grid;gap:11px;margin:0 0 26px;padding:0}
.cbul li{display:flex;gap:11px;font-size:1rem;color:#3a3a3e;align-items:flex-start}
.cbul li::before{content:"\2713";flex:none;width:20px;height:20px;border-radius:50%;background:rgba(0,113,227,.12);color:var(--blue);font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}
.ccap{display:flex;gap:10px;max-width:470px}
.ccap input{flex:1;border:1px solid #D9DCE3;border-radius:980px;padding:13px 20px;font-size:.96rem;background:#fff;outline:none;font-family:var(--sans)}
.ccap input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,113,227,.12)}
.ccap .btn{white-space:nowrap;padding:13px 26px;border:0;cursor:pointer;font-family:var(--sans)}
.cticks{display:flex;gap:18px;margin-top:14px;font-size:.85rem;color:var(--mut);flex-wrap:wrap}
.cticks span::before{content:"\2713\00a0"}
/* the collage itself */
.collage{position:relative;min-height:500px}
.cblob{position:absolute;border-radius:50%}
.cb1{width:380px;height:380px;right:-60px;top:-20px;background:linear-gradient(135deg,rgba(0,113,227,.16),rgba(124,92,255,.26))}
.cb2{width:230px;height:230px;left:-10px;bottom:-20px;background:linear-gradient(135deg,rgba(52,199,89,.16),rgba(0,113,227,.12))}
.cshot{position:absolute;left:22px;top:58px;width:85%;border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px rgba(29,29,31,.24), 0 4px 16px rgba(29,29,31,.10);border:1px solid rgba(255,255,255,.9)}
.cshot img{display:block;width:100%}
.ccard{position:absolute;background:#fff;border-radius:16px;box-shadow:0 18px 50px rgba(29,29,31,.18);padding:16px 20px;border:1px solid rgba(0,0,0,.04)}
.ctimer{right:-10px;top:8px;min-width:250px}
.ctimer .l{font-size:.72rem;color:var(--mut);letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:8px}
.ctimer .t{display:flex;align-items:center;gap:12px}
.ctimer .clock{font-size:1.85rem;font-weight:700;letter-spacing:.01em;font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ctimer .stopb{width:40px;height:40px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 6px 16px rgba(0,113,227,.35)}
.ctimer .stopb i{width:12px;height:12px;background:#fff;border-radius:3px;display:block}
.cwho{left:-16px;top:190px;display:flex;gap:12px;align-items:center}
.cwho .av{width:36px;height:36px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex:none}
.cwho b{font-size:.95rem;display:block;letter-spacing:-.01em}
.cwho small{display:flex;align-items:center;gap:6px;color:#2E9E4F;font-size:.78rem;font-weight:600;margin-top:2px}
.cwho small i{width:7px;height:7px;border-radius:50%;background:var(--green);display:block}
.chours{right:12px;bottom:-6px;min-width:210px}
.chours .l{font-size:.72rem;color:var(--mut);letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:8px}
.chours .row{display:flex;gap:10px;align-items:center;font-size:.86rem;color:var(--gray)}
.chours .bar{height:7px;border-radius:980px;background:#EEF0F4;width:96px;overflow:hidden;flex:none}
.chours .bar i{display:block;height:100%;width:86%;background:var(--grad);border-radius:980px}
.chours b{color:var(--ink)}
@media(max-width:980px){.chero .wrap{grid-template-columns:1fr}.collage{display:none}}

/* ===== the living dashboard: the hero visual drawn in code, crisp at any size ===== */
.mdash{position:absolute;left:0;top:44px;width:88%;background:#fff;border-radius:18px;border:1px solid #E9E9EE;
  box-shadow:0 30px 80px rgba(29,29,31,.20), 0 4px 16px rgba(29,29,31,.08);overflow:hidden}
.mdash .mtop{display:flex;align-items:center;gap:10px;background:#15171C;color:#fff;padding:12px 18px;font-size:.82rem;font-weight:600}
.mdash .mtop svg{flex:none}
.mdash .mtop span{color:rgba(255,255,255,.55);font-weight:400}
.mdash .mtop .mlive{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:.72rem;color:#7CE0A0;font-weight:600}
.mdash .mtop .mlive i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:mpulse 2.2s ease-out infinite}
@keyframes mpulse{0%{box-shadow:0 0 0 0 rgba(52,199,89,.5)}70%{box-shadow:0 0 0 7px rgba(52,199,89,0)}100%{box-shadow:0 0 0 0 rgba(52,199,89,0)}}
.mdash .mkpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px 18px 6px}
.mkpi{border:1px solid #EFEFF3;border-radius:12px;padding:11px 13px}
.mkpi .kl{font-size:.64rem;color:var(--mut);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.mkpi .kv{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums}
.mkpi .kv em{font-style:normal;font-size:.72rem;color:var(--green);font-weight:600;margin-left:5px}
.mdash .mpeople{padding:8px 18px 18px}
.mdash .mph{font-size:.66rem;color:var(--mut);text-transform:uppercase;letter-spacing:.07em;font-weight:600;margin:8px 0 4px}
.mrow{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid #F2F2F5}
.mrow:last-child{border-bottom:0}
.mrow .mav{width:29px;height:29px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:700;flex:none}
.mrow .mav.g2{background:linear-gradient(135deg,#34C759,#0071E3)}
.mrow .mav.g3{background:linear-gradient(135deg,#F5A623,#FF3B30)}
.mrow .mwho{width:118px;flex:none}
.mrow .mwho b{display:block;font-size:.82rem;letter-spacing:-.01em}
.mrow .mwho small{display:flex;align-items:center;gap:5px;font-size:.68rem;color:var(--mut)}
.mrow .mwho small i{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none;animation:mpulse 2.2s ease-out infinite}
.mrow .mwho small.aw i{background:var(--amber);animation:none}
.mrow .mtrack{flex:1;height:9px;border-radius:5px;background:#F0F1F5;overflow:hidden}
.mrow .mtrack i{display:block;height:100%;border-radius:5px;background:var(--grad);width:0;animation:mgrow 1.1s cubic-bezier(.2,.7,.3,1) forwards}
.mrow:nth-child(3) .mtrack i{animation-delay:.15s}
.mrow:nth-child(4) .mtrack i{animation-delay:.3s}
@keyframes mgrow{to{width:var(--w,70%)}}
.mrow .mhrs{width:52px;text-align:right;font-size:.8rem;font-variant-numeric:tabular-nums;color:var(--gray)}
@media(prefers-reduced-motion:reduce){.mdash .mtop .mlive i,.mrow .mwho small i{animation:none}.mrow .mtrack i{animation:none;width:var(--w,70%)}}

/* ===== three questions, three drawn answers ===== */
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
@media(max-width:900px){.qgrid{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}}
.qcard{background:#fff;border:1px solid var(--soft);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:.18s}
.qcard:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(29,29,31,.09)}
.qcard .qviz{background:linear-gradient(135deg,#F4F7FE,#F7F5FE);padding:22px 20px;min-height:180px;display:flex;flex-direction:column;justify-content:center;gap:9px}
.qcard .qtxt{padding:20px 22px 24px}
.qcard h3{font-size:1.1rem;margin-bottom:7px;letter-spacing:-.01em}
.qcard p{font-size:.92rem;color:var(--gray)}
/* viz 1: who is on */
.vzrow{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #ECECF2;border-radius:12px;padding:9px 13px;box-shadow:0 2px 8px rgba(29,29,31,.04)}
.vzrow .va{width:26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:700;flex:none}
.vzrow .va.g2{background:linear-gradient(135deg,#34C759,#0071E3)}
.vzrow .va.g3{background:linear-gradient(135deg,#F5A623,#FF3B30)}
.vzrow b{font-size:.8rem;flex:1;letter-spacing:-.01em}
.vzrow small{font-size:.7rem;color:var(--mut)}
.vzrow .von{display:flex;align-items:center;gap:5px;font-size:.68rem;color:#2E9E4F;font-weight:600}
.vzrow .von i{width:6px;height:6px;border-radius:50%;background:var(--green);animation:mpulse 2.2s ease-out infinite}
/* viz 2: where the day went */
.vzbar{background:#fff;border:1px solid #ECECF2;border-radius:12px;padding:10px 13px;box-shadow:0 2px 8px rgba(29,29,31,.04)}
.vzbar .vt{display:flex;justify-content:space-between;font-size:.74rem;margin-bottom:6px}
.vzbar .vt b{letter-spacing:-.01em}
.vzbar .vt span{color:var(--mut);font-variant-numeric:tabular-nums}
.vzbar .vb{height:7px;border-radius:4px;background:#F0F1F5;overflow:hidden}
.vzbar .vb i{display:block;height:100%;border-radius:4px;background:var(--grad)}
.vzbar .vb i.neu{background:#C9CCD6}
/* viz 3: who started late */
.vzchip{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #ECECF2;border-radius:12px;padding:10px 13px;font-size:.8rem;box-shadow:0 2px 8px rgba(29,29,31,.04)}
.vzchip b{letter-spacing:-.01em}
.vzchip .ok{color:#2E9E4F;font-size:.7rem;font-weight:600}
.vzchip .late{color:#B26A00;background:#FFF4E0;border-radius:980px;padding:3px 10px;font-size:.68rem;font-weight:600}

/* ===== the report explorer: a vertical card menu, the report drawn beside it ===== */
.xp{display:grid;grid-template-columns:295px 1fr;gap:0;margin-top:48px;background:#fff;border:1px solid #E4E4EA;border-radius:20px;overflow:hidden;box-shadow:0 30px 80px rgba(29,29,31,.14)}
.xnav{background:#F7F7FA;border-right:1px solid #ECECF1;padding:14px;display:flex;flex-direction:column;gap:8px}
.xitem{display:flex;gap:12px;align-items:flex-start;text-align:left;background:transparent;border:1px solid transparent;border-radius:14px;padding:13px 14px;cursor:pointer;font-family:var(--sans);transition:.15s;width:100%}
.xitem:hover{background:#fff;border-color:#E9E9EF}
.xitem.on{background:#fff;border-color:#E4E4EA;box-shadow:0 8px 24px rgba(29,29,31,.08)}
.xitem .xi{width:34px;height:34px;border-radius:10px;background:#EDF2FC;color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none;font-size:.95rem}
.xitem.on .xi{background:var(--grad);color:#fff}
.xitem b{display:block;font-size:.9rem;letter-spacing:-.01em;color:var(--ink)}
.xitem small{display:block;font-size:.76rem;color:var(--mut);line-height:1.35;margin-top:2px}
.xpanel{padding:26px 28px 22px;display:flex;flex-direction:column;min-height:430px}
.xscene{display:none;flex-direction:column;gap:10px;flex:1;justify-content:center}
.xscene.on{display:flex}
.xben{margin-top:18px;border-top:1px solid #F0F0F4;padding-top:16px;display:flex;gap:12px;align-items:flex-start}
.xben .xbi{flex:none;width:26px;height:26px;border-radius:50%;background:rgba(0,113,227,.1);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem}
.xben p{font-size:.92rem;color:var(--gray);margin:0}
.xben p b{color:var(--ink)}
@media(max-width:900px){
  .xp{grid-template-columns:1fr}
  .xnav{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid #ECECF1;padding:10px}
  .xitem{flex:none;width:210px}
  .xpanel{min-height:0}
}
/* timeline scene */
.tlrow{display:flex;align-items:center;gap:11px}
.tlrow .tn{width:96px;flex:none;font-size:.78rem;font-weight:600;letter-spacing:-.01em}
.tlrow .tb{flex:1;height:16px;border-radius:5px;background:#F3F4F7;overflow:hidden;display:flex}
.tlrow .tb i{display:block;height:100%}
.tlrow .th{width:52px;text-align:right;font-size:.76rem;color:var(--gray);font-variant-numeric:tabular-nums}
.tlleg{display:flex;gap:16px;font-size:.72rem;color:var(--mut);margin-top:6px;flex-wrap:wrap}
.tlleg span{display:flex;align-items:center;gap:6px}
.tlleg i{width:9px;height:9px;border-radius:3px;display:inline-block}
/* captures scene */
.xcaps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.xcap{border:1px solid #ECECF2;border-radius:12px;overflow:hidden;background:#fff}
.xcap .im{height:74px;background:linear-gradient(135deg,#DCE9FB,#E9E2FF);position:relative}
.xcap .im.b2{background:linear-gradient(135deg,#E2F3E6,#DCE9FB)}
.xcap .im.b3{background:linear-gradient(135deg,#EFE7FB,#FDEEDC)}
.xcap .im .blr{position:absolute;top:6px;right:6px;background:rgba(21,23,28,.75);color:#fff;font-size:.58rem;font-weight:700;letter-spacing:.05em;border-radius:980px;padding:2px 8px}
.xcap .im .ply{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.xcap .im .ply i{width:0;height:0;border-left:14px solid rgba(21,23,28,.7);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px}
.xcap .cp{padding:7px 10px;font-size:.68rem;color:var(--gray);display:flex;justify-content:space-between;align-items:center}
.xcap .cp b{color:var(--ink)}
/* projects scene */
.xproj{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #ECECF2;border-radius:12px;padding:11px 14px;box-shadow:0 2px 8px rgba(29,29,31,.04)}
.xproj .pd{width:10px;height:10px;border-radius:3px;background:var(--grad);flex:none}
.xproj .pd.c2{background:#34C759}.xproj .pd.c3{background:#F5A623}
.xproj b{flex:1;font-size:.82rem;letter-spacing:-.01em}
.xproj .ph{font-size:.78rem;color:var(--gray);font-variant-numeric:tabular-nums}
.xproj .pc{font-size:.78rem;font-weight:600;font-variant-numeric:tabular-nums}
/* scene header line */
.xsh{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:2px}
.xsh i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:mpulse 2.2s ease-out infinite}
@media(prefers-reduced-motion:reduce){.xsh i{animation:none}}
/* a real screenshot inside the explorer panel */
.xshot{border:1px solid #E4E4EA;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 12px 36px rgba(29,29,31,.12)}
.xshot img{display:block;width:100%;height:auto}

/* ===== crafted report views: the real product's look, drawn small and sharp ===== */
.rmk{border:1px solid #E2E2E8;border-radius:14px;overflow:hidden;box-shadow:0 14px 40px rgba(29,29,31,.13);background:#F6F7FA}
.rmk .rtop{display:flex;align-items:center;gap:13px;background:#15171C;padding:9px 14px;font-size:.66rem;color:rgba(255,255,255,.55);border-bottom:2px solid transparent;background-image:linear-gradient(#15171C,#15171C),var(--grad);background-origin:padding-box,border-box;background-clip:padding-box,border-box}
.rmk .rtop svg{flex:none}
.rmk .rtop b{color:#fff;background:rgba(255,255,255,.14);border-radius:980px;padding:3px 11px;font-weight:600}
.rmk .rbody{padding:14px 15px 16px}
.rmk .rtt{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.rmk .rtt b{font-size:.82rem;letter-spacing:-.01em}
.rmk .rtt span{font-size:.66rem;color:var(--mut);background:#fff;border:1px solid #E7E8EE;border-radius:980px;padding:3px 11px}
.rmk .mkpis{grid-template-columns:repeat(4,1fr);gap:9px;padding:0;margin:0 0 10px}
.rmk .mkpi{background:#fff;border-color:#E9EAF0;padding:9px 11px}
.rmk .mkpi .kl{font-size:.56rem}
.rmk .mkpi .kv{font-size:1.05rem}
.rmk .rgrid{display:grid;grid-template-columns:1fr 214px;gap:10px;align-items:start}
.rmk .rcard{background:#fff;border:1px solid #E9EAF0;border-radius:12px;padding:10px 13px}
.rmk .rch{font-size:.6rem;color:var(--mut);text-transform:uppercase;letter-spacing:.07em;font-weight:600;margin-bottom:5px}
.rmk .mrow{padding:7px 0}
.rmk .mrow .mwho{width:104px}
.rmk .mrow .mwho b{font-size:.76rem}
.rmk .mrow .mav{width:25px;height:25px;font-size:.6rem}
.rmk .mrow .mhrs{font-size:.72rem;width:46px}
.rsum{font-size:.7rem;color:var(--gray);line-height:1.55}
.rsum b{color:var(--ink)}
.rsum .rsi{display:inline-flex;align-items:center;gap:5px;color:var(--blue);font-weight:700;font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}
/* timeline axis */
.raxis{display:flex;justify-content:space-between;font-size:.6rem;color:var(--mut);padding:0 0 5px 107px}
.rmk .tlrow .tn{width:96px;font-size:.74rem}
.rmk .tlrow .th{font-size:.7rem}
.rmk .tlrow{padding:4px 0}
.rmk .tlleg{font-size:.64rem;margin-top:8px}
/* app rating chips */
.rate{font-size:.6rem;font-weight:700;border-radius:980px;padding:2px 8px;flex:none}
.rate.p{background:rgba(0,113,227,.1);color:var(--blue)}
.rate.n{background:#EFF0F4;color:#7A7A82}
.rate.u{background:#FFF4E0;color:#B26A00}
.rmk .vzbar{border-color:#E9EAF0;box-shadow:none;padding:8px 12px}
.rmk .vzbar .vt{font-size:.72rem;align-items:center;gap:8px}
.rmk .vzbar .vt b{display:flex;align-items:center;gap:8px}
.rmk .vzchip{border-color:#E9EAF0;box-shadow:none;padding:8px 12px;font-size:.76rem}
.rmk .vzchip small{color:var(--mut);font-size:.66rem;margin-left:8px;font-weight:400}
/* captures rail */
.rcapgrid{display:grid;grid-template-columns:128px 1fr;gap:10px;align-items:start}
.rrail{display:flex;flex-direction:column;gap:6px}
.rrp{background:#fff;border:1px solid #E9EAF0;border-radius:10px;padding:7px 10px;font-size:.7rem}
.rrp b{display:block;letter-spacing:-.01em}
.rrp small{color:var(--mut);font-size:.62rem}
.rrp.on{border-color:rgba(0,113,227,.45);box-shadow:0 0 0 2px rgba(0,113,227,.08)}
.rmk .xcaps{gap:8px}
.rmk .xcap{border-color:#E9EAF0}
.rmk .xcap .im{height:58px}
.rmk .xcap .cp{font-size:.62rem;padding:5px 8px}
.xcap .im .scr2{position:absolute;left:6px;bottom:6px;background:rgba(21,23,28,.75);color:#fff;font-size:.54rem;font-weight:700;border-radius:980px;padding:2px 7px}

/* ===== the proof: one uncut session, played in place ===== */
.vproof{max-width:880px;margin:52px auto 0;position:relative;border-radius:18px;overflow:hidden;border:1px solid #E2E2E7;box-shadow:0 30px 80px rgba(29,29,31,.18);background:#000}
.vproof video,.vproof img{display:block;width:100%;height:auto}
.vproof .vplay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(13,15,20,.35);cursor:pointer;border:0;width:100%;transition:.2s}
.vproof .vplay:hover{background:rgba(13,15,20,.45)}
.vproof .vplay .pbtn{width:74px;height:74px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 36px rgba(0,0,0,.35)}
.vproof .vplay .pbtn i{width:0;height:0;border-left:22px solid var(--blue);border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:5px}
.vproof .vplay span{color:#fff;font-size:.9rem;font-weight:600;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.vproof.playing .vplay{display:none}

footer.site{background:var(--f5);border-top:1px solid var(--line);padding:44px 0 30px;font-size:.82rem;color:var(--gray)}
.fcols{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;padding-bottom:24px;border-bottom:1px solid var(--line)}
@media(max-width:980px){.fcols{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.fcols{grid-template-columns:1fr 1fr}}
.fcols .h{color:var(--ink);font-weight:600;margin-bottom:12px;font-size:.82rem}
.fcols a{display:block;color:var(--gray);margin-bottom:8px}.fcols a:hover{color:var(--ink)}
.legal{padding-top:20px;color:var(--mut)}

/* the brand rails: blue light bleeding in from the left edge, violet from
   the right, down the whole page. Fixed so they ride with the scroll; behind
   all content; sections with their own solid bands simply cover them. */
body{position:relative}
/* option 2, Rutvik's pick: soft glow orbs anchored at the page edges */
body::before{content:"";position:fixed;width:680px;height:680px;border-radius:50%;left:-260px;top:14%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(0,113,227,.28),transparent 65%)}
body::after{content:"";position:fixed;width:740px;height:740px;border-radius:50%;right:-300px;top:46%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(124,92,255,.30),transparent 65%)}
html::before{content:"";position:fixed;width:440px;height:440px;border-radius:50%;right:-140px;top:-160px;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(52,199,89,.14),transparent 65%)}

/* ================================================================
   V2 DESIGN LAYER (2026-08-13, the claude-home port).
   Overrides the shared primitives so EVERY page inherits the new
   look, then adds the homepage's own components. Nothing above is
   deleted so no inner page can break.
   ================================================================ */

/* ---- deeper type, warmer sections, less flat white ---- */
.hero{padding:38px 0 20px;position:relative;overflow:hidden;background:
  radial-gradient(820px 460px at 14% -22%,rgba(0,113,227,.13),transparent 62%),
  radial-gradient(880px 500px at 88% -18%,rgba(124,92,255,.12),transparent 62%),
  radial-gradient(600px 380px at 50% 118%,rgba(52,199,89,.05),transparent 60%)}
/* a quiet dot grid that fades out toward the content */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(20,20,22,.06) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(900px 480px at 50% 0%,rgba(0,0,0,.5),transparent 75%);
  mask-image:radial-gradient(900px 480px at 50% 0%,rgba(0,0,0,.5),transparent 75%)}
.hero .wrap{position:relative}
.hero h1{font-size:clamp(2.4rem,5vw,3.7rem);letter-spacing:-.04em;line-height:1.02;font-weight:700}
.hero .tag{font-size:clamp(1.08rem,2vw,1.28rem)}
.hero .eyebrow{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--blue);background:rgba(0,113,227,.07);border:1px solid rgba(0,113,227,.16);border-radius:980px;padding:7px 18px;margin-bottom:16px}
.sec{font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:-.035em;font-weight:700}
.btn{padding:15px 32px;font-size:1rem}
.btn.big{padding:17px 38px;font-size:1.05rem}
.card{border-radius:20px;transition:.18s}
.card:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(20,20,22,.10)}
.pad{padding:96px 0}
.pad.alt{background:#F6F7FA;border-top:1px solid #ECECF1;border-bottom:1px solid #ECECF1}
/* the footer joins the black band language */
footer.site{background:#101114;border-top:0}
footer.site .h{color:rgba(255,255,255,.45)}
footer.site a{color:rgba(255,255,255,.72)}
footer.site a:hover{color:#fff}
footer.site .legal{color:rgba(255,255,255,.45);border-top:1px solid rgba(255,255,255,.1)}
footer.site .legal a{color:rgba(255,255,255,.6)}
/* two-plan grid, shared (was inline on the pricing page) */
.tiers.two{grid-template-columns:repeat(2,1fr);max-width:820px;margin:0 auto}
@media(max-width:820px){.tiers.two{grid-template-columns:1fr;max-width:420px}}
.tier{border-radius:22px}
.tier.pop{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;box-shadow:0 28px 70px rgba(0,113,227,.13)}

/* ---- section heading shared by the new homepage ---- */
.sech{font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:-.035em;font-weight:700;text-align:center;max-width:24ch;margin:0 auto 44px}

/* ---- the signature: one workday, visible ---- */
.day{padding:0 0 84px}
.day .wrap.wide{max-width:1640px}
/* the whole product in one shot: apps on the left, capture on the right,
   dotted leads running from the day strip into each flank card */
.dayflank{position:relative;display:grid;grid-template-columns:minmax(225px,265px) minmax(0,1fr) minmax(225px,265px);gap:44px;align-items:start}
/* each flank is a column of two full-size blocks (2026-08-14, Rutvik:
   "I want the projects tab to be seen like these big blocks") */
.flank{position:relative;display:flex;flex-direction:column;gap:20px}
.fcard{position:relative;background:#fff;border:1px solid #E6E6EB;border-radius:18px;padding:20px 22px;box-shadow:0 24px 70px rgba(20,20,22,.10)}
.fcard .fh{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);margin-bottom:14px}
.fcard .fcap{font-size:.78rem;color:var(--gray);line-height:1.5;margin-top:14px;padding-top:12px;border-top:1px solid #EFEFF3}
/* dotted lead from the column into the strip, anchored to the STRIP's own
   height so stacking cards above can never move it, crossing the gap and
   the daycard's padding and landing INSIDE the first / last working block */
.flank .lead{position:absolute;top:219px;border-top:3px dotted currentColor;opacity:.55;pointer-events:none;z-index:3}
.flank .lead::before,.flank .lead::after{content:"";position:absolute;top:-6.5px;width:10px;height:10px;border-radius:50%;background:currentColor}
.flank.l .lead{color:var(--blue);left:100%;width:130px}
.flank.r .lead{color:#28B04E;right:100%;width:118px}
.flank .lead::before{left:-4px}
.flank .lead::after{right:-4px}
/* the top flank cards: projects + budget on the left, cost on the right */
.krow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.82rem;font-weight:600;letter-spacing:-.01em;margin-bottom:10px}
.krow em{font-style:normal;color:var(--mut);font-weight:600;font-variant-numeric:tabular-nums;flex:none}
.pbud{margin-top:12px;padding-top:12px;border-top:1px solid #EFEFF3;font-size:.72rem;color:var(--gray)}
.pbud i{display:block;height:7px;border-radius:4px;background:#F0F1F5;overflow:hidden;margin-bottom:7px}
.pbud i b{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#3E96FF,#0068D8)}
.pbud.ok{color:#2E9E4F;font-weight:700}
.pbud.ok span::before{content:"\2713\00a0\00a0"}
/* left card: the apps report in miniature */
.frow{margin-bottom:11px}
.frow .fn{display:flex;justify-content:space-between;font-size:.82rem;font-weight:600;letter-spacing:-.01em}
.frow .fn em{font-style:normal;color:var(--mut);font-weight:600;font-variant-numeric:tabular-nums}
.frow .fb{display:block;height:7px;border-radius:4px;background:#F0F1F5;margin-top:5px;overflow:hidden}
.frow .fb b{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#3E96FF,#0068D8)}
.frow .fb b.mt{background:linear-gradient(90deg,#4ADE74,#28B04E)}
/* right card: a drawn capture, never a screenshot scaled down. CLEAR and
   MOVING (2026-08-14, Rutvik: "don't show blur, show something moving here
   in clear on a macOS"): a little mac window where work visibly happens,
   lines typing themselves and the pointer wandering, on a loop. */
.smock{border:1px solid #E6E6EB;border-radius:12px;overflow:hidden;background:#FAFBFD}
.smock .sbar{display:flex;align-items:center;gap:5px;padding:8px 10px;background:#F1F2F6;border-bottom:1px solid #E6E6EB}
.smock .sbar i{width:8px;height:8px;border-radius:50%;background:#D7D9E0}
.smock .sbar i:nth-child(1){background:#FF5F57}.smock .sbar i:nth-child(2){background:#FEBC2E}.smock .sbar i:nth-child(3){background:#28C840}
.smock .sbar span{font-size:.64rem;color:var(--mut);margin-left:5px}
.smock .sbody.mac{position:relative;height:118px;background:linear-gradient(160deg,#EAF0FA,#F2EDFA);overflow:hidden;padding:10px}
.smock .mwin{position:absolute;left:12px;top:12px;right:26px;bottom:14px;background:#fff;border:1px solid #E2E4EC;border-radius:9px;padding:9px 11px;box-shadow:0 6px 18px rgba(20,20,40,.08)}
.smock .mtt{font-size:.6rem;font-weight:700;color:var(--ink);margin-bottom:7px}
.smock .mln{height:6px;border-radius:3px;background:#D7E4F8;margin-bottom:6px;animation:mtype 5.2s ease-in-out infinite}
.smock .mln.a{width:78%}
.smock .mln.b{width:56%;animation-delay:.9s;background:#DCD5F6}
.smock .mln.c{width:66%;animation-delay:1.8s}
@keyframes mtype{0%{transform:scaleX(0);transform-origin:left}30%,85%{transform:scaleX(1);transform-origin:left}100%{transform:scaleX(0);transform-origin:left}}
.smock .mshape{position:absolute;right:10px;bottom:9px;width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#0071E3,#7C5CFF);opacity:.9;animation:mnudge 5.2s ease-in-out infinite}
@keyframes mnudge{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-7px,-5px) rotate(6deg)}}
.smock .mptr{position:absolute;left:30%;top:38%;animation:mroam 5.2s ease-in-out infinite;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
@keyframes mroam{0%,100%{transform:translate(0,0)}28%{transform:translate(54px,18px)}55%{transform:translate(30px,44px)}80%{transform:translate(66px,8px)}}
.smock .schip{display:flex;align-items:center;gap:6px;padding:7px 10px;font-size:.68rem;font-weight:700;color:#2E9E4F;border-top:1px solid #E6E6EB;background:#fff}
.smock .schip i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:dpulse 2.2s ease-out infinite}
@media(prefers-reduced-motion:reduce){.smock .mln,.smock .mptr,.smock .mshape,.smock .schip i{animation:none}}

@media(max-width:1259px){
  .dayflank{grid-template-columns:1fr 1fr;gap:18px}
  .daycard{grid-row:1;grid-column:1/-1}
  .flank.l{grid-row:2;grid-column:1}.flank.r{grid-row:2;grid-column:2}
  .flank .lead{display:none}
}
@media(max-width:640px){
  .dayflank{grid-template-columns:1fr}
  .flank.l{grid-row:2;grid-column:1}.flank.r{grid-row:3;grid-column:1}
}
.day .lede{text-align:center;font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:16px}
.day .lede b{color:var(--ink)}
.daycard{background:#fff;border:1px solid #E6E6EB;border-radius:24px;padding:42px 44px 34px;box-shadow:0 40px 110px rgba(20,20,22,.12)}
.dayhead{display:flex;align-items:center;gap:14px;margin-bottom:32px}
.dayhead .av2{width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem}
.dayhead b{font-size:1.12rem;letter-spacing:-.01em;display:block}
.dayhead small{color:var(--mut);font-size:.84rem;display:flex;align-items:center;gap:5px;line-height:1.25;flex-wrap:wrap}
.dayhead .live{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:.76rem;font-weight:700;color:#2E9E4F}
/* the Today view's "Working in ..." line, flipping through the day's apps
   (2026-08-14, Rutvik's call). A vertical word roll, one word tall, green
   like the product's own live-app line; still on reduced motion. */
/* an overflow:hidden inline-block baselines on its BOTTOM edge, so the
   rolling word can never share a baseline with flowing text. The whole
   phrase is one inline-flex instead: both halves 1.25em tall, centered on
   each other, and the phrase itself baselines on "working in". */
.dayhead .win{color:#2E9E4F;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.wroll{display:inline-block;height:1.25em;overflow:hidden}
.wroll u{display:block;height:1.25em;line-height:1.25;text-decoration:none;font-weight:700;animation:wroll 9s cubic-bezier(.6,0,.2,1) infinite}
@keyframes wroll{0%,20%{transform:translateY(0)}25%,45%{transform:translateY(-1.25em)}50%,70%{transform:translateY(-2.5em)}75%,95%{transform:translateY(-3.75em)}100%{transform:translateY(-5em)}}
/* the Focus & activity flank widget: the report's own numbers in miniature */
.abig{display:flex;align-items:baseline;gap:9px}
.abig b{font-size:1.7rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.abig b i{font-style:normal;font-size:.9rem;opacity:.45;font-weight:700}
.abig small{font-size:.76rem;color:var(--mut)}
.abar{height:8px;border-radius:5px;background:#F0F1F5;overflow:hidden;margin:9px 0 13px}
.abar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#3E96FF,#0068D8);transform-origin:left;animation:abfill 1.1s .25s cubic-bezier(.2,.7,.3,1) both}
@keyframes abfill{from{transform:scaleX(0)}}
.dayhead .live i{width:9px;height:9px;border-radius:50%;background:var(--green);animation:dpulse 2.2s ease-out infinite}
@keyframes dpulse{0%{box-shadow:0 0 0 0 rgba(52,199,89,.5)}70%{box-shadow:0 0 0 9px rgba(52,199,89,0)}100%{box-shadow:0 0 0 0 rgba(52,199,89,0)}}
.dnotes{position:relative;height:72px}
.dnote{position:absolute;transform:translateX(-50%);text-align:center;width:150px}
.dnote .t{font-size:.8rem;font-weight:650;letter-spacing:-.01em}
.dnote .d{font-size:.7rem;color:var(--mut);margin-top:1px}
.dnote::after{content:"";display:block;width:1.5px;height:15px;background:#D6D6DC;margin:6px auto 0}
.strip{position:relative;height:62px;border-radius:14px;background:#F2F3F6;overflow:hidden;display:flex;box-shadow:inset 0 1px 3px rgba(20,20,22,.06)}
.strip .seg{height:100%;cursor:default;transition:filter .15s}
.strip .seg:hover{filter:brightness(1.12)}
/* THE STRIP WEARS THE PRODUCT'S OWN COLOURS (2026-08-14, Rutvik: "match
   these colours with actual product"). The Daily timeline's settled rule is
   ONE GREEN for every online minute (work, meetings, media, idle) and the
   hatch for not tracked; the site shows the same truth. The hover captions
   and day notes still tell the meeting/idle story in words. */
/* the product's green with marketing depth: same hue, lit from the top,
   centred on the product's own #34C759 so the two never read as different
   colours. */
.seg.work,.seg.meet,.seg.idle{background:linear-gradient(180deg,#4BD866 0%,#34C759 46%,#2AAF4D 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.seg.off{background:repeating-linear-gradient(45deg,#fff 0 6px,#EFF1F6 6px 12px)}
.strip .seg+.seg{border-left:2px solid #fff}
.playhead{position:absolute;top:0;bottom:0;width:2.5px;background:#141416;box-shadow:0 0 0 1px rgba(255,255,255,.6);left:0;opacity:0}
.strip.animate .playhead{animation:dsweep 3.4s cubic-bezier(.3,0,.2,1) forwards}
@keyframes dsweep{0%{left:0;opacity:1}88%{opacity:1}100%{left:calc(100% - 3px);opacity:0}}
.dhours{display:flex;justify-content:space-between;font-size:.72rem;color:var(--mut);margin-top:10px;padding:0 2px}
.daycap{margin-top:20px;text-align:center;font-size:1rem;color:var(--gray);min-height:26px}
.daycap b{color:var(--ink)}
.dayleg{display:flex;gap:22px;justify-content:center;margin-top:12px;font-size:.78rem;color:var(--mut);flex-wrap:wrap}
.dayleg span{display:flex;align-items:center;gap:7px}
.dayleg i{width:11px;height:11px;border-radius:3.5px;display:inline-block}
.rollup{display:grid;grid-template-columns:repeat(4,1fr);margin-top:34px;border-top:1px solid var(--line);padding-top:28px}
.rollup>div{text-align:center;padding:0 10px}
.rollup .n{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:800;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.rollup .n .u{font-size:.5em;color:var(--ink);opacity:.4;font-weight:700;margin:0 1px}
.rollup .l{font-size:.78rem;color:var(--mut);margin-top:4px}
@media(max-width:800px){.dnotes{display:none}.rollup{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(prefers-reduced-motion:reduce){.strip.animate .playhead{animation:none;opacity:0}.dayhead .live i{animation:none}.smock .schip i{animation:none}.wroll u{animation:none}.abar i{animation:none}}

/* ---- pains vs answers ---- */
.pains{padding:90px 0;border-top:1px solid #ECECF1;border-bottom:1px solid #ECECF1;background:
  linear-gradient(180deg,#F7F8FC,#F3F4FB),
  radial-gradient(800px 400px at 90% 0%,rgba(124,92,255,.05),transparent 60%)}
/* with/without, redrawn (2026-08-14, Rutvik: "make it much better to look
   at"): the without side sits recessed and grey, the with side lifts on the
   gradient border, every line gets a badge instead of a bare mark, and a VS
   disc joins the two. */
.pgrid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:980px;margin:0 auto}
.pgrid::after{content:"VS";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 12px 34px rgba(20,20,40,.14);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.76rem;letter-spacing:.06em;color:var(--mut);z-index:2}
.pcol{border-radius:22px;padding:30px 34px}
.pcol.bad{background:#F7F7FA;border:1px solid #E8E8EC}
.pcol.good{background:#fff;border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;box-shadow:0 30px 76px rgba(0,113,227,.13)}
.pk{display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;padding:7px 15px;border-radius:999px}
.pcol.bad .pk{background:#EDEDF1;color:var(--gray)}
.pcol.good .pk{background:rgba(0,113,227,.09);color:var(--blue)}
.pcol.good .pk::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.pi{display:flex;align-items:flex-start;gap:13px;font-size:.95rem;color:var(--gray);padding:15px 0;border-top:1px solid rgba(20,20,40,.05);line-height:1.55}
.pi:first-of-type{border-top:0}
.pcol.good .pi{color:#3C3C43}
.pi::before{flex:none;width:23px;height:23px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.7rem;margin-top:2px}
.pcol.good .pi::before{content:"\2713";background:rgba(52,199,89,.15);color:#2E9E4F}
.pcol.bad .pi::before{content:"\2715";background:#ECECF0;color:#9B9BA3}
@media(max-width:820px){.pgrid{grid-template-columns:1fr}.pgrid::after{display:none}}

/* ---- alternating product rows + crafted panels ---- */
.proofs{padding:40px 0 30px;background:
  radial-gradient(760px 420px at 6% 18%,rgba(0,113,227,.05),transparent 60%),
  radial-gradient(760px 420px at 94% 52%,rgba(124,92,255,.05),transparent 60%),
  radial-gradient(700px 400px at 8% 86%,rgba(52,199,89,.04),transparent 60%)}
.prow{display:grid;grid-template-columns:5fr 7fr;gap:60px;align-items:center;padding:56px 0}
.prow.flip .ptxt{order:2}
.prow.flip .pv{order:1}
.ptxt .k{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:13px}
.ptxt h2{font-size:clamp(1.7rem,3.4vw,2.4rem);letter-spacing:-.03em;line-height:1.1;margin-bottom:15px;font-weight:700}
.ptxt p{font-size:1.05rem;color:var(--gray);max-width:42ch}
.ptxt .pt2{margin-top:12px}
.lnk{color:var(--blue);font-weight:600;font-size:.95rem}
.lnk:hover{text-decoration:underline}
@media(max-width:880px){.prow,.prow.flip{grid-template-columns:1fr;gap:26px}.prow.flip .ptxt{order:1}.prow.flip .pv{order:2}}
.pv{background:#F5F6F9;border:1px solid #E3E3E8;border-radius:18px;overflow:hidden;box-shadow:0 36px 90px rgba(20,20,22,.14)}
.pv .pvbar{display:flex;align-items:center;gap:14px;background:#101114;padding:11px 18px;font-size:.7rem;color:rgba(255,255,255,.5)}
.pv .pvbar b{color:#fff;background:rgba(255,255,255,.14);border-radius:980px;padding:3px 12px;font-weight:600}
.pv .pvbd{padding:18px 20px 20px}
.pv .pvt{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.pv .pvt b{font-size:.95rem;letter-spacing:-.01em}
.pv .pvt span{font-size:.7rem;color:var(--mut);background:#fff;border:1px solid #E7E8EE;border-radius:980px;padding:4px 12px}
.pvk{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.pvk>div{background:#fff;border:1px solid #E9EAF0;border-radius:12px;padding:12px 13px}
.pvk .l{font-size:.6rem;color:var(--mut);text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.pvk .v{font-size:clamp(.95rem,1.15vw,1.24rem);font-weight:800;letter-spacing:-.035em;margin-top:3px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pvgrid{display:grid;grid-template-columns:1fr 205px;gap:10px;align-items:stretch}
.pvcard{background:#fff;border:1px solid #E9EAF0;border-radius:12px;padding:12px 15px}
.pvch{font-size:.62rem;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:8px}
.pvrow{display:flex;align-items:center;gap:11px;padding:8px 0;border-bottom:1px solid #F2F2F5}
.pvrow:last-child{border-bottom:0}
.pvrow .a{width:28px;height:28px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:700;flex:none}
.pvrow .a.g2{background:linear-gradient(135deg,#34C759,#0071E3)}
.pvrow .a.g3{background:linear-gradient(135deg,#F5A623,#FF3B30)}
.pvrow .w{width:112px;flex:none}
.pvrow .w b{display:block;font-size:.8rem;letter-spacing:-.01em}
.pvrow .w small{display:flex;align-items:center;gap:5px;font-size:.66rem;color:var(--mut)}
.pvrow .w small i{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none;animation:dpulse 2.2s ease-out infinite}
.pvrow .tr{flex:1;height:8px;border-radius:4px;background:#F0F1F5;overflow:hidden}
.pvrow .tr i{display:block;height:100%;border-radius:4px;background:var(--grad)}
.pvrow .h{width:50px;text-align:right;font-size:.76rem;color:var(--gray);font-variant-numeric:tabular-nums}
.pvsum{font-size:.74rem;color:var(--gray);line-height:1.6}
.pvsum b{color:var(--ink)}
.pvsum .si{display:block;color:var(--blue);font-weight:700;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.pvbarrow{background:#fff;border:1px solid #E9EAF0;border-radius:12px;padding:10px 14px;margin-bottom:8px}
.pvbarrow:last-child{margin-bottom:0}
.pvbarrow .t{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;margin-bottom:7px}
.pvbarrow .t b{display:flex;align-items:center;gap:9px;letter-spacing:-.01em}
.pvbarrow .t span{color:var(--mut);font-variant-numeric:tabular-nums;font-size:.76rem}
.pvbarrow .g{height:8px;border-radius:4px;background:#F0F1F5;overflow:hidden}
.pvbarrow .g i{display:block;height:100%;border-radius:4px;background:var(--grad)}
.pvbarrow .g i.neu{background:#C9CCD6}
.pvbarrow .g i.bad{background:var(--amber)}
.chip2{font-size:.6rem;font-weight:700;border-radius:980px;padding:2.5px 9px}
.chip2.p{background:rgba(0,113,227,.1);color:var(--blue)}
.chip2.n{background:#EFF0F4;color:#7A7A82}
.chip2.u{background:#FFF4E0;color:#B26A00}
.pvcapg{display:grid;grid-template-columns:130px 1fr;gap:10px}
.pvrail{display:flex;flex-direction:column;gap:7px}
.pvrl{background:#fff;border:1px solid #E9EAF0;border-radius:11px;padding:8px 11px;font-size:.74rem}
.pvrl b{display:block;letter-spacing:-.01em}
.pvrl small{color:var(--mut);font-size:.64rem}
.pvrl.on{border-color:rgba(0,113,227,.5);box-shadow:0 0 0 2.5px rgba(0,113,227,.09)}
.pvthumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.pvth{border:1px solid #E9EAF0;border-radius:12px;overflow:hidden;background:#fff}
.pvth .im{height:72px;background:linear-gradient(135deg,#DCE9FB,#E9E2FF);position:relative}
.pvth .im.b2{background:linear-gradient(135deg,#E2F3E6,#DCE9FB)}
.pvth .im.b3{background:linear-gradient(135deg,#EFE7FB,#FDEEDC)}
.pvth .bdg{position:absolute;top:6px;right:6px;background:rgba(16,17,20,.78);color:#fff;font-size:.55rem;font-weight:700;letter-spacing:.05em;border-radius:980px;padding:2px 8px}
.pvth .ply{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.pvth .ply i{width:0;height:0;border-left:15px solid rgba(16,17,20,.72);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:3px}
.pvth .cp{padding:7px 9px;font-size:.62rem;color:var(--gray);display:flex;justify-content:space-between;gap:6px}
.pvth .cp b{white-space:nowrap}
.pvth .cp span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvth .cp b{color:var(--ink)}

/* ---- use cases ---- */
.ucx{padding:80px 0 90px;border-top:1px solid #ECECF1;border-bottom:1px solid #ECECF1;background:
  linear-gradient(180deg,#F6F8FD,#F2F3FA),
  radial-gradient(700px 380px at 10% 100%,rgba(0,113,227,.06),transparent 60%)}
.ucg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.uccard{display:block;background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 28px;transition:.18s}
.uccard:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(20,20,22,.10)}
.uk{font-size:1.08rem;font-weight:700;letter-spacing:-.015em;margin-bottom:10px}
.uccard p{font-size:.94rem;color:var(--gray);margin-bottom:14px;line-height:1.55}
@media(max-width:820px){.ucg{grid-template-columns:1fr}}

/* ---- the black promises ---- */
.vows{background:#101114;color:#fff;padding:100px 0;position:relative;overflow:hidden}
.vows::before{content:"";position:absolute;inset:0;background:radial-gradient(720px 440px at 82% -20%,rgba(124,92,255,.22),transparent 60%),radial-gradient(600px 400px at 10% 120%,rgba(0,113,227,.16),transparent 60%)}
.vows .wrap{position:relative}
.vows .k{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:26px}
.vow{font-size:clamp(1.8rem,4.4vw,3.2rem);font-weight:700;letter-spacing:-.035em;line-height:1.12;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.vow:last-of-type{border-bottom:0}
.vow small{display:block;font-size:1rem;font-weight:400;letter-spacing:0;color:rgba(255,255,255,.55);margin-top:8px;max-width:56ch;line-height:1.5}
.vow em{font-style:normal;background:linear-gradient(120deg,#5AA9FF,#A78BFF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---- the comparison board: our column stands proud ---- */
.cb{display:grid;grid-template-columns:1.3fr 1.25fr 1fr 1fr;max-width:980px;margin:0 auto;align-items:stretch}
.cb .cbh{font-size:.9rem;font-weight:700;letter-spacing:-.01em;padding:18px 20px;display:flex;align-items:center;gap:9px;min-height:62px}
.cb .cbr{padding:15px 20px;font-size:.93rem;border-top:1px solid #ECECF1;display:flex;align-items:center;gap:9px;min-height:56px}
.cbl .cbr{color:var(--gray);font-weight:500}
.cbc{background:#fff;border:1px solid #E9E9EF;border-left:0}
.cbc:last-child{border-radius:0 16px 16px 0}
.cbc .cbh{color:var(--mut);font-weight:600}
.cbc .cbr{color:var(--gray)}
.cbl{background:transparent}
.cbc.us{position:relative;z-index:2;background:#fff;border:2px solid transparent;border-radius:18px;margin:-14px 0;padding:14px 0;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;box-shadow:0 24px 60px rgba(0,113,227,.16)}
.cbc.us .cbh{color:var(--ink);font-weight:700}
.cbc.us .cbr{color:var(--ink);font-weight:600}
.cbc.us+.cbc{border-left:0}
.cbr .ok{flex:none;width:20px;height:20px;border-radius:50%;background:rgba(52,199,89,.14);color:#2E9E4F;font-style:normal;font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.cbr .mm{flex:none;color:#B9B9C0;font-style:normal;font-weight:700}
@media(max-width:900px){.cb{grid-template-columns:1fr}.cbl{display:none}.cbc,.cbc:last-child{border:1px solid #E9E9EF;border-radius:16px;margin-bottom:14px}.cbc.us{margin:0 0 14px;padding:0}}

/* ================================================================
   ARTICLE READABILITY LAYER (2026-08-14, Rutvik: "bland, readability
   very bad"). Wider measure, bigger lede, breathing room around h2,
   real tables, framed product images, and verdict cards.
   ================================================================ */
.prose{max-width:780px;font-size:1.08rem;line-height:1.78}
.prose h1{margin-bottom:14px}
.prose .meta{display:block;border-left:3px solid #E4E6EC;padding:2px 0 2px 14px;margin-bottom:34px}
.prose>p:first-of-type{font-size:1.17rem;line-height:1.7;color:#3C3C43}
.prose h2{font-size:1.5rem;margin:54px 0 16px;letter-spacing:-.015em}
.prose h2::after{content:"";display:block;width:44px;height:3px;border-radius:2px;background:linear-gradient(90deg,#0071E3,#7C5CFF);margin-top:9px}
.prose h3{margin:34px 0 10px}
.prose li{margin-bottom:9px}
.prose table{width:100%;border-collapse:separate;border-spacing:0;margin:10px 0 28px;border:1px solid #E8E8EE;border-radius:14px;overflow:hidden;font-size:.92rem;line-height:1.5}
.prose thead th{background:#F6F7FA;text-align:left;font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);padding:11px 16px}
.prose tbody td{padding:12px 16px;vertical-align:top}
.prose tbody tr+tr td{border-top:1px solid #F1F1F5}
.prose tbody td:first-child{color:var(--mut);font-size:.88rem}
.prose tbody td b{color:var(--ink)}
/* a framed product image inside an article */
.artframe{margin:30px 0 34px;border-radius:14px;border:1px solid #E2E2E7;box-shadow:0 26px 64px rgba(29,29,31,.16);overflow:hidden;background:#fff}
.artframe .abar{display:flex;align-items:center;gap:6px;padding:9px 14px;border-bottom:1px solid #ECECEF;background:#F7F7F9}
.artframe .abar i{width:9px;height:9px;border-radius:50%;background:#E0E0E4}
.artframe .abar span{font-size:.7rem;color:var(--mut);margin-left:6px}
.artframe img{display:block;width:100%;height:auto}
/* the verdict, up top where a skimmer lands */
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:4px 0 30px}
.vcard{border-radius:14px;padding:18px 20px;font-size:.95rem;line-height:1.6}
.vcard b{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.vcard.us{background:#F2F7FF;border:1px solid rgba(0,113,227,.22)}
.vcard.us b{color:var(--blue)}
.vcard.them{background:#F7F7FA;border:1px solid #E8E8EC}
.vcard.them b{color:var(--mut)}
@media(max-width:640px){.vgrid{grid-template-columns:1fr}}

/* ================================================================
   DRAWN ARTICLE VISUALS (2026-08-14, Rutvik: "put html instead of
   screenshots"). Hand-built product moments in the brand language,
   watermarked, real text so search engines can read them, and they
   can never go stale the way a screenshot does.
   ================================================================ */
.avz{margin:30px 0 36px}
.avz .avbody{position:relative;background:#fff;border:1px solid #E4E6EC;border-radius:16px;padding:22px 24px;box-shadow:0 22px 56px rgba(29,29,31,.12)}
.avz figcaption{font-size:.82rem;color:var(--mut);margin-top:10px;line-height:1.5}
.avmark{position:absolute;right:14px;bottom:11px;display:flex;align-items:center;gap:5px;font-size:.66rem;font-weight:700;color:#C4C7D2;letter-spacing:.04em;pointer-events:none}
.avmark svg{opacity:.8}
/* shared bits */
.avhead{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.avhead .ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#0071E3,#7C5CFF);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.72rem;flex:none}
.avhead b{font-size:.94rem;display:block;line-height:1.25}
.avhead small{color:var(--mut);font-size:.76rem;display:block}
.avlive{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700;color:#2E9E4F}
.avlive i{width:8px;height:8px;border-radius:50%;background:var(--green);animation:mpulse 2.2s ease-out infinite}
/* the day strip */
.avstrip{height:40px;border-radius:10px;background:#F2F3F6;overflow:hidden;display:flex;box-shadow:inset 0 1px 3px rgba(20,20,22,.06)}
.avstrip i{height:100%;background:linear-gradient(180deg,#4BD866 0%,#34C759 46%,#2AAF4D 100%)}
.avstrip i+i{border-left:2px solid #fff}
.avstrip .gap{background:repeating-linear-gradient(45deg,#fff 0 6px,#EFF1F6 6px 12px);border-left:0}
.avhours{display:flex;justify-content:space-between;font-size:.68rem;color:var(--mut);margin-top:7px;padding:0 2px}
/* attendance rows */
.avatt{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #F1F1F5}
.avatt:first-of-type{border-top:0}
.avatt .aw{flex:1;min-width:0}
.avatt .aw b{font-size:.9rem;display:block}
.avatt .aw small{color:var(--mut);font-size:.75rem}
.avchip{flex:none;font-size:.72rem;font-weight:700;border-radius:999px;padding:5px 12px}
.avchip.ok{background:rgba(52,199,89,.13);color:#2E9E4F}
.avchip.warn{background:rgba(245,166,35,.15);color:#B76E00}
/* app usage rows */
.avapp{margin-bottom:12px}
.avapp:last-of-type{margin-bottom:2px}
.avapp .an{display:flex;justify-content:space-between;font-size:.85rem;font-weight:600}
.avapp .an em{font-style:normal;color:var(--mut);font-variant-numeric:tabular-nums}
.avapp .ab{height:7px;border-radius:4px;background:#F0F1F5;margin-top:5px;overflow:hidden}
.avapp .ab i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#3E96FF,#0068D8)}
/* capture tiles */
.avcaps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.avcap{border:1px solid #E6E6EB;border-radius:10px;overflow:hidden;background:#FAFBFD}
.avcap .cb{position:relative;height:74px;background:linear-gradient(160deg,#EAF0FA,#F2EDFA);padding:8px}
.avcap .cb u{display:block;height:5px;border-radius:3px;background:#D7E4F8;margin-bottom:5px;text-decoration:none}
.avcap .cb .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.avcap .cb .play i{width:0;height:0;border-left:12px solid var(--blue);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px;filter:drop-shadow(0 2px 5px rgba(0,113,227,.35))}
.avcap .ct{font-size:.66rem;color:var(--mut);padding:6px 9px;background:#fff;border-top:1px solid #EFEFF3;font-variant-numeric:tabular-nums}
/* team overview */
.avkpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.avkpi{border:1px solid #EFEFF3;border-radius:11px;padding:10px 13px}
.avkpi small{font-size:.62rem;color:var(--mut);text-transform:uppercase;letter-spacing:.07em;font-weight:700;display:block}
.avkpi b{font-size:1.15rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
@media(max-width:560px){.avcaps{grid-template-columns:repeat(2,1fr)}.avcap:nth-child(3){display:none}.avkpis{grid-template-columns:repeat(3,1fr)}}