/* FuseGrid marketing site (fusegrid.io). Shares the in-app CFO Core look: petrol ink (#1b4965), warm paper, Fraunces (voice) + Inter (UI). This site is the MARKETING surface only — every primary action hands off to the app (app.fusegrid.io) to start a trial. Kept fully separate from the app code. Fonts (Fraunces + Inter) are loaded via a in each page's (with preconnect) rather than an @import here — an @import is discovered only after this stylesheet parses, which serializes the request chain and hurts LCP. See the `` block in the page heads. */ :root{ --paper:#f6f4ef; --paper-2:#efece4; --ink:#1c1f26; --ink-2:#4c5360; --faint:#868c9a; --line:#e7e2d6; --emerald:#1b4965; /* petrol primary */ --emerald-d:#143a52; --emerald-soft:#e8eef3; --night:#0e2230; --night-line:rgba(255,255,255,.09); --amber:#D98A2B; --amber-soft:#FBEFDB; --coral:#D8674E; --coral-soft:#FBE6E0; --blue:#3E6DD6; --blue-soft:#E6ECFA; --mint:#8fd4e6; --pos:#0e7c86; --radius:18px; --radius-sm:12px; --shadow:0 1px 2px rgba(28,31,38,.05), 0 18px 48px rgba(28,31,38,.10); --shadow-sm:0 1px 2px rgba(28,31,38,.05), 0 8px 22px rgba(28,31,38,.07); --serif:"Fraunces", Georgia, "Times New Roman", serif; --sans:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:var(--sans);background:var(--paper);color:var(--ink); font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img{max-width:100%} .mono{font-variant-numeric:tabular-nums} .wrap{max-width:1180px;margin:0 auto;padding:0 28px} h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.06;margin:0} .eyebrow{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.10em; text-transform:uppercase;color:var(--emerald-d)} .lead{font-size:1.12rem;color:var(--ink-2)} .center{text-align:center} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:600; font-size:15px;padding:14px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer; transition:.18s;white-space:nowrap} .btn-primary{background:var(--emerald);color:#fff;box-shadow:0 8px 20px rgba(27,73,101,.28)} .btn-primary:hover{background:var(--emerald-d);transform:translateY(-1px)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{border-color:var(--ink)} .btn-light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.22)} .btn-light:hover{background:rgba(255,255,255,.20)} .btn-lg{font-size:16px;padding:16px 26px} /* ---------- brand mark (matches the in-app CFO Core lockup) ---------- */ .brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--ink)} .brand-mark{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center; background:linear-gradient(135deg,#3a7ca5 0%,#1b4965 60%,#143a52 100%); box-shadow:0 4px 12px rgba(27,73,101,.4)} .brand-mark svg{display:block} .brand small{display:block;font-family:var(--serif);font-style:italic;font-weight:400; font-size:11px;color:var(--faint);letter-spacing:0} /* ---------- nav ---------- */ nav.site{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(10px); background:rgba(246,244,239,.82);border-bottom:1px solid var(--line)} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px} .nav-links{display:flex;gap:30px;font-size:15px;color:var(--ink-2);font-weight:500} .nav-links a:hover{color:var(--ink)} .nav-cta{display:flex;align-items:center;gap:14px} .nav-toggle{display:none;background:none;border:0;cursor:pointer;color:var(--ink);padding:6px} @media(max-width:880px){ .nav-links{display:none} .nav-cta .btn-ghost{display:none} } /* ---------- hero ---------- */ .hero{padding:74px 0 40px;text-align:center} .hero .pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600; color:var(--emerald-d);background:var(--emerald-soft);border:1px solid #cfe0ea; padding:7px 14px;border-radius:999px;margin-bottom:24px} .hero .pill .live{width:7px;height:7px;border-radius:999px;background:var(--emerald); box-shadow:0 0 0 4px rgba(27,73,101,.16)} .hero h1{font-size:clamp(2.6rem,6.2vw,4.6rem);max-width:15ch;margin:0 auto 22px} .hero h1 em{font-style:italic;color:var(--emerald-d)} .hero .sub{font-size:clamp(1.05rem,2vw,1.28rem);color:var(--ink-2);max-width:60ch;margin:0 auto 32px} .hero .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:14px} .hero .trust{font-size:13.5px;color:var(--faint);display:flex;gap:18px;justify-content:center;flex-wrap:wrap} .hero .trust b{color:var(--ink-2);font-weight:600} /* ---------- product mock (dark) ---------- */ .stage{margin:46px auto 0;max-width:1080px;border-radius:24px;padding:14px; background:linear-gradient(180deg,#0E2419,#0e2230); box-shadow:0 40px 120px rgba(10,26,20,.45);border:1px solid rgba(255,255,255,.06)} .app{border-radius:16px;overflow:hidden;background:var(--night); background-image:radial-gradient(900px 380px at 18% -10%, rgba(143,212,230,.10), transparent 60%); border:1px solid var(--night-line);color:#E8F0EC} .app-top{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--night-line)} .app-top .dots{display:flex;gap:6px}.app-top .dots span{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.18)} .app-top .crumbs{font-size:13px;color:#9FB3AA} .app-top .ask{margin-left:auto;display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.06); border:1px solid var(--night-line);border-radius:999px;padding:8px 14px;font-size:13px;color:#B7C9C1;min-width:280px} .app-top .ask .k{margin-left:auto;font-size:11px;color:#7E938A;border:1px solid var(--night-line);border-radius:6px;padding:1px 6px} .app-body{display:grid;grid-template-columns:1fr 290px;min-height:430px} .brief{padding:22px 24px;border-right:1px solid var(--night-line)} .brief .hello{font-family:var(--serif);font-size:22px;margin-bottom:2px} .brief .hello small{font-family:var(--sans);font-size:13px;color:#8FA59B;font-weight:500} .brief .head{font-size:13.5px;color:#9FB3AA;margin:4px 0 18px} .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px} .kpi{background:rgba(255,255,255,.04);border:1px solid var(--night-line);border-radius:12px;padding:12px 13px} .kpi .label{font-size:11.5px;color:#8FA59B;text-transform:uppercase;letter-spacing:.05em} .kpi .val{font-size:20px;font-weight:700;margin:5px 0 3px;letter-spacing:-.01em} .kpi .chg{font-size:12px;display:inline-flex;align-items:center;gap:4px} .up{color:var(--mint)} .down{color:#F0A38F} .sec-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8FA59B;margin-bottom:11px} .insight{display:flex;gap:13px;padding:14px;border-radius:12px;background:rgba(255,255,255,.035); border:1px solid var(--night-line);margin-bottom:10px} .insight .ic{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;font-size:15px} .ic.warn{background:rgba(216,138,43,.18);color:#F4C07E} .ic.good{background:rgba(143,212,230,.16);color:var(--mint)} .ic.info{background:rgba(62,109,214,.20);color:#A6C0FF} .insight .body{flex:1} .insight .t{font-size:14px;font-weight:600;color:#EAF2EE} .insight .d{font-size:12.5px;color:#9FB3AA;margin-top:2px} .insight .acts{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap} .chip{font-size:11.5px;color:#C6D6CE;background:rgba(255,255,255,.05);border:1px solid var(--night-line);border-radius:999px;padding:4px 10px} .chip.pri{color:#06222e;background:var(--mint);border-color:transparent;font-weight:600} .copilot{padding:18px 16px;background:rgba(255,255,255,.02)} .copilot .ct{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8FA59B;margin-bottom:12px} .msg{font-size:13px;border-radius:12px;padding:11px 13px;margin-bottom:10px;line-height:1.5} .msg.user{background:rgba(143,212,230,.12);border:1px solid rgba(143,212,230,.28);color:#DFF1F6} .msg.ai{background:rgba(255,255,255,.04);border:1px solid var(--night-line);color:#C6D6CE} .msg.ai b{color:#EAF2EE} .tool{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#8FA59B;margin:3px 0} .tool .tk{width:6px;height:6px;border-radius:999px;background:var(--mint)} .suggest{display:flex;flex-direction:column;gap:7px;margin-top:14px} .suggest .sg{font-size:12.5px;color:#C6D6CE;background:rgba(255,255,255,.04);border:1px solid var(--night-line);border-radius:10px;padding:9px 11px} @media(max-width:820px){.app-body{grid-template-columns:1fr}.copilot{border-top:1px solid var(--night-line)} .kpis{grid-template-columns:repeat(2,1fr)}.app-top .ask{display:none}} /* ---------- generic sections ---------- */ section{padding:84px 0} .section-head{max-width:62ch;margin:0 auto 48px} .center .section-head{margin-left:auto;margin-right:auto} h2{font-size:clamp(2rem,4vw,3rem);margin:14px 0 16px} .band{background:var(--paper-2)} .dark{background:var(--night);color:#E8F0EC} .dark h2{color:#fff}.dark .lead{color:#A7BBB1}.dark .eyebrow{color:var(--mint)} /* pillars */ .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .pillar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm)} .pillar .badge{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:22px;margin-bottom:16px} .b-em{background:var(--emerald-soft)} .b-am{background:var(--amber-soft)} .b-bl{background:var(--blue-soft)} .pillar h3{font-size:1.32rem;margin-bottom:8px} .pillar p{color:var(--ink-2);font-size:15px;margin:0} /* capabilities */ .caps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .cap{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px} .cap .n{font-family:var(--serif);font-size:14px;color:var(--emerald-d);margin-bottom:8px} .cap h4{font-family:var(--sans);font-size:15.5px;font-weight:700;margin:0 0 6px} .cap p{font-size:13.5px;color:var(--ink-2);margin:0;line-height:1.5} /* journeys */ .journeys{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .journey{position:relative;border-radius:var(--radius);padding:26px;color:#fff;overflow:hidden;min-height:190px; display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--shadow)} .journey::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.35))} .j1{background:linear-gradient(150deg,#1b4965,#0A5E3C)} .j2{background:linear-gradient(150deg,#3E6DD6,#21356E)} .j3{background:linear-gradient(150deg,#D98A2B,#9A5712)} .j4{background:linear-gradient(150deg,#5B53C6,#2E2867)} .j5{background:linear-gradient(150deg,#159C8E,#0B5650)} .j6{background:linear-gradient(150deg,#C2553F,#7A2C1D)} .journey .jbody{position:relative;z-index:1} .journey .jstep{font-size:12px;font-weight:600;opacity:.85;letter-spacing:.04em;text-transform:uppercase} .journey h3{font-size:1.45rem;margin:6px 0 4px} .journey p{font-size:13.5px;margin:0;opacity:.92} /* segments */ .segs{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .seg-card{display:flex;gap:18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px} .seg-card .av{width:46px;height:46px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;font-size:20px;background:var(--emerald-soft)} .seg-card h4{font-family:var(--sans);font-size:16px;font-weight:700;margin:0 0 5px} .seg-card p{margin:0;color:var(--ink-2);font-size:14.5px} /* how it works (dark layers) + agent rail */ .layers{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--night-line);border-radius:var(--radius);overflow:hidden} .layer{padding:30px 26px;border-right:1px solid var(--night-line);position:relative} .layer:last-child{border-right:0} .layer .lnum{font-family:var(--serif);font-size:13px;color:var(--mint)} .layer h3{color:#fff;font-size:1.3rem;margin:8px 0 10px} .layer p{color:#A7BBB1;font-size:14px;margin:0} .agent-rail{margin-top:18px;display:flex;align-items:center;gap:12px;background:rgba(143,212,230,.08); border:1px solid rgba(143,212,230,.22);border-radius:14px;padding:16px 20px;color:#DFF1F6;font-size:14.5px} .agent-rail .gl{width:34px;height:34px;border-radius:10px;display:grid;place-items:center; background:conic-gradient(from 120deg,var(--emerald),var(--mint),var(--blue),var(--emerald));font-size:16px} /* compare table (reports vs FuseGrid) */ .vs{display:grid;grid-template-columns:1.2fr 1fr 1fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff} .vs.vs4{grid-template-columns:1.3fr 1fr 1fr 1fr 1.1fr} .vs .vrow{display:contents} .vs .cell{padding:16px 20px;border-bottom:1px solid var(--line);font-size:14.5px} .vs .cell.h{font-weight:700;font-size:14px} .vs .cell.fg{background:var(--emerald-soft);font-weight:600;color:var(--ink)} .vs .cell.muted{color:var(--faint)} .vs .vrow:last-child .cell{border-bottom:0} /* ---------- PRICING ---------- */ /* audience toggle (pricing pages) — firm pricing is per client, owner/in-house pricing is per company; this is the switch between the two pages. Same segmented look as .price-toggle. */ .aud-toggle{display:flex;width:max-content;max-width:100%;align-items:stretch;gap:4px;margin:0 auto 26px; background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:4px} .aud-toggle a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; color:var(--ink-2);font-weight:600;font-size:13.5px;line-height:1.2;padding:9px 22px;border-radius:999px;transition:.15s} .aud-toggle a span{font-size:11px;font-weight:600;color:var(--faint)} .aud-toggle a:hover{color:var(--emerald-d)} .aud-toggle a.active{background:#fff;color:var(--emerald);box-shadow:0 1px 3px rgba(28,31,38,.12)} .aud-toggle a.active span{color:var(--emerald-d)} @media(max-width:520px){ .aud-toggle{display:flex;width:100%;border-radius:22px} .aud-toggle a{flex:1;padding:9px 10px;border-radius:18px} } .price-toggle{display:inline-flex;align-items:center;gap:4px;margin:8px auto 0; background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:4px} .price-toggle button{border:none;background:transparent;color:var(--ink-2);font-family:var(--sans); font-weight:600;font-size:14px;padding:8px 18px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:7px} .price-toggle button.active{background:#fff;color:var(--emerald);box-shadow:0 1px 3px rgba(28,31,38,.12)} .price-toggle .save{color:var(--pos);font-weight:700;font-size:11.5px} .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;align-items:stretch} /* 4-up plan grid (firm pricing) — desktop only, so the max-width:900px .plans{1fr} rule still stacks it on mobile */ @media(min-width:901px){.plans-4{grid-template-columns:repeat(4,1fr)}} .plan{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line); border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm)} .plan.featured{border:2px solid var(--emerald);box-shadow:0 2px 6px rgba(28,31,38,.06),0 22px 48px -18px rgba(27,73,101,.45)} .plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--emerald); color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap} .plan-name{font-family:var(--serif);font-weight:500;font-size:1.5rem;color:var(--ink);margin:0} .plan-for{color:var(--faint);font-size:13.5px;line-height:1.45;margin:7px 0 18px;min-height:56px} .price-row{display:flex;align-items:baseline;gap:5px} .price{font-family:var(--serif);font-weight:500;font-size:2.7rem;line-height:1;color:var(--ink)} .price-suffix{color:var(--ink-2);font-size:14px;font-weight:600} .price-note{color:var(--faint);font-size:12.5px;margin:8px 0 0;min-height:17px} .plan .btn{width:100%;justify-content:center;margin:18px 0 2px} .plan-lead{font-weight:700;color:var(--ink);font-size:13.5px;margin:18px 0 0} .plan-list{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:11px} .plan-list li{color:var(--ink-2);font-size:13.5px;line-height:1.45;display:flex;gap:9px;align-items:flex-start} .plan-list li::before{content:"✓";color:var(--pos);font-weight:700;flex:0 0 auto} .firm{margin-top:26px;background:var(--emerald-soft);border:1px solid #d6e2ea;border-radius:var(--radius); padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .firm-copy{max-width:600px} .firm h3{font-family:var(--serif);font-weight:500;font-size:1.3rem;margin:0 0 5px;color:var(--emerald)} .firm p{margin:0;color:var(--ink-2);font-size:14px} .firm-price{display:flex;flex-direction:column;align-items:flex-end;gap:10px} .firm-price .amt{font-family:var(--serif);font-weight:500;font-size:1.6rem;color:var(--ink)} .firm-price .amt span{font-size:13px;color:var(--ink-2);font-weight:600;font-family:var(--sans)} .cmp-wrap{overflow-x:auto;margin-top:26px;border:1px solid var(--line);border-radius:var(--radius)} .cmp{width:100%;border-collapse:collapse;background:#fff;min-width:620px} .cmp th,.cmp td{padding:14px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px} .cmp thead th{background:var(--paper-2);font-weight:700;color:var(--ink)} .cmp thead th.col,.cmp td.col{text-align:center;width:140px} .cmp thead th.col.hot{color:var(--emerald)} .cmp tbody tr:last-child td{border-bottom:0} .cmp td.grp{font-weight:700;color:var(--emerald);background:var(--emerald-soft)} .cmp td.feat{color:var(--ink-2)} .cmp .yes{color:var(--pos);font-weight:700} .cmp .no{color:var(--faint)} .cmp .val{color:var(--ink);font-weight:600} /* compact pricing teaser on the homepage */ .price-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;align-items:stretch} .pm{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px} .pm.featured{border:2px solid var(--emerald)} .pm .pmname{font-weight:700;font-size:15px} .pm .pmprice{font-family:var(--serif);font-size:1.9rem;margin:8px 0 2px} .pm .pmprice span{font-family:var(--sans);font-size:13px;color:var(--ink-2);font-weight:600} .pm .pmline{color:var(--ink-2);font-size:13px;margin:2px 0 16px;min-height:36px} .pm .btn{width:100%;justify-content:center;margin-top:auto} .faq{display:grid;gap:12px;margin-top:26px;max-width:780px;margin-left:auto;margin-right:auto} .faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 20px} .faq summary{cursor:pointer;font-weight:600;font-size:15px;color:var(--ink);padding:16px 0; list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--emerald);font-size:22px;font-weight:400;line-height:1} .faq details[open] summary::after{content:"\2013"} .faq p{margin:0 0 16px;color:var(--ink-2);font-size:14px;line-height:1.6} /* ---------- CTA ---------- */ .cta{background:linear-gradient(160deg,#1b4965,#0A5E3C);color:#fff;border-radius:28px;padding:64px 40px;text-align:center; box-shadow:0 40px 100px rgba(11,122,82,.35)} .cta h2{color:#fff;max-width:20ch;margin:0 auto 14px} .cta p{color:rgba(255,255,255,.92);font-size:1.1rem;max-width:54ch;margin:0 auto 26px} .cta .note{font-size:13px;color:rgba(255,255,255,.8);margin-top:14px} /* ---------- legal / article pages ---------- */ .article{max-width:820px;margin:0 auto;padding:56px 0} .article .eyebrow{margin-bottom:10px;display:block} .article h1{font-size:clamp(2rem,4vw,2.8rem);margin:0 0 8px} .article .updated{color:var(--faint);font-size:14px;margin:0 0 28px} .article h2{font-family:var(--serif);font-weight:500;font-size:1.4rem;margin:34px 0 10px} .article h3{font-family:var(--sans);font-weight:700;font-size:1.05rem;margin:22px 0 8px} .article p,.article li{color:var(--ink-2);font-size:15.5px;line-height:1.75} .article ul{padding-left:22px;max-width:70ch} .article a{color:var(--emerald);font-weight:500} /* ---------- simple message page (connect / disconnect / launch) ---------- */ .page-card{max-width:680px;margin:56px auto;background:#fff;border:1px solid var(--line); border-radius:var(--radius);padding:34px 32px;box-shadow:var(--shadow-sm)} .page-card .eyebrow{margin-bottom:12px;display:block} .page-card h1{font-size:clamp(1.9rem,4vw,2.6rem);margin:0 0 12px} .page-card p,.page-card li{color:var(--ink-2);font-size:15.5px;line-height:1.7} .page-card ul{padding-left:22px} .page-card .actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap} .page-card a.inline{color:var(--emerald);font-weight:500} /* ---------- footer ---------- */ footer.site{padding:48px 0;border-top:1px solid var(--line);color:var(--faint);font-size:14px} .foot-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px} .foot-inner nav a{margin-left:22px;color:var(--ink-2)} .foot-inner nav a:first-child{margin-left:0} .foot-inner nav a:hover{color:var(--ink)} /* ============================================================ 2026 rebuild — problem-led narrative components ============================================================ */ /* ---------- jump nav (under hero): "payroll · getting paid · the bank · your worth" ---------- */ .jumpnav{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:34px auto 0;font-size:13.5px} .jumpnav .jl{color:var(--faint);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:11.5px} .jumpnav a{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2);font-weight:600; background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;transition:.15s} .jumpnav a:hover{border-color:var(--emerald);color:var(--emerald-d)} /* ---------- the going rate (price-anchor strip) ---------- */ .anchor-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px} .acard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px} .acard .awho{font-weight:700;font-size:15px} .acard .aprice{font-family:var(--serif);font-size:2rem;margin:10px 0 4px;color:var(--ink)} .acard .aprice span{font-family:var(--sans);font-size:13px;color:var(--ink-2);font-weight:600} .acard p{margin:4px 0 0;color:var(--ink-2);font-size:13.5px;line-height:1.55} .acard.nothing{background:var(--paper-2);border-style:dashed} .anchor-close{margin:28px auto 0;text-align:center;max-width:56ch} .anchor-close .big{font-family:var(--serif);font-size:1.5rem;line-height:1.3} .anchor-close .big b{color:var(--emerald-d);font-weight:600} /* ---------- the 9pm tab (pain montage — HARD one screen) ---------- */ .montage{max-width:760px;margin:0 auto;text-align:left} .montage .beat{font-family:var(--serif);font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.42; color:var(--ink-2);margin:0 0 20px;padding-left:22px;border-left:3px solid var(--line)} .montage .beat b{color:var(--ink);font-weight:500} .montage .pivot{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2rem);color:var(--ink); margin-top:36px;padding-left:22px;border-left:3px solid var(--emerald)} .montage .pivot em{font-style:italic;color:var(--emerald-d)} /* ---------- proof chapters (copy + exhibit, alternating) ---------- */ .chapter{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,64px);align-items:center} .chapter.flip{grid-template-columns:minmax(0,6fr) minmax(0,5fr)} .chapter.flip .ch-copy{order:2} .chapter.flip .ch-mock{order:1} .ch-copy h2{font-size:clamp(1.7rem,3.2vw,2.4rem)} .ch-copy .lead{margin:14px 0 0} .ch-kicker{font-family:var(--serif);font-style:italic;font-size:1.06rem;color:var(--emerald-d);margin-top:16px} .sec-cta{display:inline-flex;align-items:center;gap:8px;margin-top:22px;color:var(--emerald);font-weight:600;font-size:15px} .sec-cta:hover{color:var(--emerald-d)} .sec-cta::after{content:"→";transition:.15s} .sec-cta:hover::after{transform:translateX(3px)} /* ---------- exhibits (light product-mock cards) ---------- */ .exhibit{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} .ex-top{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--paper-2)} .ex-top .ex-dots{display:flex;gap:5px} .ex-top .ex-dots span{width:8px;height:8px;border-radius:999px;background:var(--line)} .ex-top .ex-title{font-size:12.5px;font-weight:600;color:var(--ink-2)} .ex-body{padding:18px} .ex-note{padding:9px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--faint);background:var(--paper)} /* AI headline banner */ .x-banner{display:flex;gap:10px;align-items:flex-start;background:var(--emerald-soft);border:1px solid #cfe0ea; border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:14px} .x-banner .xb-ic{flex:0 0 auto;font-size:14px} .x-banner .xb-t{font-size:13px;font-weight:600;color:var(--emerald-d)} .x-banner .xb-d{font-size:12.5px;color:var(--ink-2);margin-top:2px;line-height:1.5} /* statement rows */ .x-rows{display:flex;flex-direction:column} .x-row{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid var(--paper-2);font-size:13px} .x-row:last-child{border-bottom:0} .x-row .xr-name{flex:1;color:var(--ink-2)} .x-row .xr-name b{color:var(--ink);font-weight:600} .x-row .xr-val{font-variant-numeric:tabular-nums;font-weight:600} .x-row .xr-sub{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums} .x-row.hl{background:var(--amber-soft);border-radius:8px;border-bottom-color:transparent} .x-flag{flex:0 0 auto;font-size:12px;color:var(--amber)} .x-cm{font-size:10.5px;font-weight:700;color:var(--emerald-d);background:var(--emerald-soft);border-radius:999px;padding:2px 8px;white-space:nowrap} .x-cm.low{color:#8a3b2a;background:var(--coral-soft)} /* bar chart (13-week cash) */ .x-bars{display:flex;align-items:flex-end;gap:5px;height:150px;padding:8px 2px 0} .x-bar{flex:1;position:relative;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#6da3c4,var(--emerald));min-width:10px} .x-bar.neg{background:linear-gradient(180deg,var(--coral),#a03e2c);border-radius:0 0 5px 5px;align-self:flex-start} .x-bar.dip{background:linear-gradient(180deg,var(--coral),#a03e2c)} .x-bar .xb-tag{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:700; color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums} .x-bar.neg .xb-tag{top:auto;bottom:-22px;color:var(--coral)} .x-axis{display:flex;gap:5px;padding:26px 2px 0;font-size:10px;color:var(--faint)} .x-axis span{flex:1;text-align:center;min-width:10px} .x-action{display:flex;gap:11px;align-items:flex-start;margin-top:14px;background:var(--paper);border:1px solid var(--line); border-radius:var(--radius-sm);padding:12px 14px} .x-action .xa-ic{flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:var(--emerald-soft);display:grid;place-items:center;font-size:13px} .x-action .xa-t{font-size:12.5px;font-weight:600} .x-action .xa-d{font-size:12px;color:var(--ink-2);margin-top:1px} /* pacing pills */ .x-pace{display:flex;flex-direction:column;gap:10px} .x-pace-head{font-size:12px;color:var(--faint);margin-bottom:2px} .x-prow{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;font-size:13px} .x-prow .xp-name{color:var(--ink-2)} .x-prow .xp-val{font-variant-numeric:tabular-nums;font-weight:600;text-align:right} .pill-pace{font-size:11px;font-weight:700;border-radius:999px;padding:4px 11px;white-space:nowrap} .pill-pace.ahead{background:#e2f2ee;color:var(--pos)} .pill-pace.ontrack{background:var(--emerald-soft);color:var(--emerald-d)} .pill-pace.behind{background:var(--coral-soft);color:#a03e2c} /* aging / driver list */ .x-stack{display:flex;height:16px;border-radius:999px;overflow:hidden;margin:8px 0 14px} .x-stack i{display:block;height:100%} .x-legend{display:flex;gap:16px;font-size:11.5px;color:var(--ink-2);margin-bottom:14px} .x-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px} .x-drivers{display:flex;flex-direction:column;gap:8px} .x-driver{display:flex;justify-content:space-between;gap:10px;font-size:13px;background:var(--paper); border:1px solid var(--line);border-radius:10px;padding:10px 13px} .x-driver .xd-note{color:var(--faint);font-size:12px} /* excel sheet strip */ .x-tabs{display:flex;gap:2px;flex-wrap:wrap;background:var(--paper-2);border:1px solid var(--line);border-radius:10px 10px 0 0;padding:6px 6px 0} .x-tab{font-size:11px;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-bottom:0; border-radius:7px 7px 0 0;padding:5px 10px;white-space:nowrap} .x-tab.on{color:var(--emerald-d);background:var(--emerald-soft)} .x-grid{border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;overflow:hidden;font-size:11.5px} .x-grid .g-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;border-bottom:1px solid var(--paper-2)} .x-grid .g-row:last-child{border-bottom:0} .x-grid .g-row.head{background:var(--paper-2);font-weight:700} .x-grid .g-row span{padding:7px 10px;border-right:1px solid var(--paper-2);font-variant-numeric:tabular-nums} .x-grid .g-row span:last-child{border-right:0} .x-case{display:inline-flex;gap:4px;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:3px;margin-bottom:10px} .x-case span{font-size:11px;font-weight:600;color:var(--ink-2);border-radius:999px;padding:4px 12px} .x-case span.on{background:#fff;color:var(--emerald);box-shadow:0 1px 3px rgba(28,31,38,.12)} /* board pack + share modal */ .x-slides{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px} .x-slide{aspect-ratio:16/10;border:1px solid var(--line);border-radius:8px;background:#fff;padding:8px;display:flex;flex-direction:column;gap:5px} .x-slide .s-t{height:7px;width:70%;border-radius:3px;background:var(--emerald)} .x-slide .s-l{height:4px;border-radius:2px;background:var(--paper-2)} .x-slide .s-chart{flex:1;border-radius:4px;background:linear-gradient(180deg,var(--emerald-soft),#fff);display:flex;align-items:flex-end;gap:3px;padding:4px} .x-slide .s-chart i{flex:1;background:var(--emerald);border-radius:2px 2px 0 0;display:block} .x-share{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 15px} .x-share .xs-t{font-size:12px;font-weight:700;margin-bottom:8px} .x-share .xs-row{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-2);margin-top:6px} .x-share .xs-link{flex:1;background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 11px; font-size:11.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .x-share .xs-btn{font-size:11px;font-weight:700;color:#fff;background:var(--emerald);border-radius:8px;padding:7px 12px;white-space:nowrap} .x-share .xs-meta{font-size:11px;color:var(--faint)} /* benchmark lollipops */ .x-lollis{display:flex;flex-direction:column;gap:16px} .x-lolli .xl-head{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:7px} .x-lolli .xl-name{font-weight:600} .x-lolli .xl-read{color:var(--faint);font-size:11.5px} .x-lolli .xl-track{position:relative;height:8px;border-radius:999px;background:var(--paper-2)} .x-lolli .xl-bench{position:absolute;top:-4px;width:2px;height:16px;background:var(--ink-2)} .x-lolli .xl-dot{position:absolute;top:-3px;width:14px;height:14px;border-radius:999px;border:3px solid #fff;box-shadow:0 1px 4px rgba(28,31,38,.3)} .x-lolli .xl-dot.good{background:var(--pos)} .x-lolli .xl-dot.warn{background:var(--coral)} /* valuation football field */ .x-field{display:flex;flex-direction:column;gap:12px} .x-band{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;font-size:12.5px} .x-band .fb-track{position:relative;height:14px;border-radius:999px;background:var(--paper-2)} .x-band .fb-bar{position:absolute;top:2px;bottom:2px;border-radius:999px;background:linear-gradient(90deg,#6da3c4,var(--emerald))} .x-band .fb-mid{position:absolute;top:-3px;width:2px;height:20px;background:var(--ink)} /* drill-down strip (Believe nothing. Click everything.) */ .drill3{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:stretch;margin-top:42px} .drill3 .d-arrow{display:grid;place-items:center;color:var(--mint);font-size:22px} .d-frame{background:rgba(255,255,255,.04);border:1px solid var(--night-line);border-radius:var(--radius-sm);padding:16px;color:#C6D6CE} .d-frame .df-k{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8FA59B;margin-bottom:9px} .d-frame .df-line{display:flex;justify-content:space-between;gap:8px;font-size:12px;padding:5px 0;border-bottom:1px solid var(--night-line)} .d-frame .df-line:last-child{border-bottom:0} .d-frame .df-line.trace{color:#fff;font-weight:600} .d-frame .df-line.trace .num{color:var(--mint);background:rgba(143,212,230,.12);border-radius:6px;padding:0 6px} .d-frame .num{font-variant-numeric:tabular-nums} /* how it works — 4 steps with honest durations */ .steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:step} .step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px} .step::before{counter-increment:step;content:counter(step);font-family:var(--serif);font-size:15px;color:#fff; width:30px;height:30px;border-radius:999px;background:var(--emerald);display:grid;place-items:center;margin-bottom:14px} .step h4{font-family:var(--sans);font-size:15.5px;font-weight:700;margin:0 0 5px} .step p{font-size:13.5px;color:var(--ink-2);margin:0;line-height:1.5} .step .dur{display:inline-block;margin-top:12px;font-size:11.5px;font-weight:700;color:var(--emerald-d); background:var(--emerald-soft);border-radius:999px;padding:4px 11px} /* router cards (who it's for) */ .routers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px} .router{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;transition:.15s} .router:hover{border-color:var(--emerald);transform:translateY(-2px)} .router h4{font-family:var(--sans);font-size:15px;font-weight:700;margin:0 0 6px} .router p{font-size:13.5px;color:var(--ink-2);margin:0 0 12px;line-height:1.5} .router .r-go{color:var(--emerald);font-weight:600;font-size:13.5px} /* founder note */ .note-founder{max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--line);border-left:3px solid var(--emerald); border-radius:var(--radius-sm);padding:26px 30px} .note-founder p{font-family:var(--serif);font-size:1.08rem;line-height:1.6;color:var(--ink-2);margin:0 0 10px} .note-founder .sig{font-family:var(--serif);font-style:italic;color:var(--ink);font-size:15px} /* email capture */ .capture{display:flex;gap:10px;max-width:460px;margin:18px auto 0;flex-wrap:wrap;justify-content:center} .capture input[type=email]{flex:1;min-width:220px;font-family:var(--sans);font-size:14.5px;padding:13px 18px; border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);outline:none} .capture input[type=email]:focus{border-color:var(--emerald)} .capture .msg-ok{width:100%;text-align:center;font-size:13.5px;color:var(--pos);font-weight:600;display:none} .capture .msg-err{width:100%;text-align:center;font-size:13.5px;color:var(--coral);font-weight:600;display:none} .capture[data-state=ok] .msg-ok{display:block} .capture[data-state=err] .msg-err{display:block} /* OAuth consent replica (FAQ) */ .oauth-mock{max-width:360px;margin:14px 0 4px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px;box-shadow:var(--shadow-sm)} .oauth-mock .om-app{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;margin-bottom:10px} .oauth-mock .om-scope{display:flex;gap:9px;font-size:12.5px;color:var(--ink-2);padding:7px 0;border-top:1px solid var(--paper-2)} .oauth-mock .om-scope b{color:var(--pos)} .oauth-mock .om-note{font-size:11.5px;color:var(--faint);margin-top:10px} /* sample page deck */ .deck-page{max-width:880px;margin:0 auto} .deck-slide{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm); padding:40px 44px;margin-bottom:26px} .deck-slide .ds-eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--emerald-d);margin-bottom:8px} .deck-slide h3{font-size:1.5rem;margin-bottom:14px} .deck-slide .ds-note{font-family:var(--serif);font-style:italic;color:var(--ink-2);font-size:15px;line-height:1.65; border-left:3px solid var(--emerald-soft);padding-left:16px;margin:16px 0 0} .deck-tbl{width:100%;border-collapse:collapse;font-size:13.5px} .deck-tbl th,.deck-tbl td{padding:9px 12px;border-bottom:1px solid var(--paper-2);text-align:right;font-variant-numeric:tabular-nums} .deck-tbl th:first-child,.deck-tbl td:first-child{text-align:left} .deck-tbl thead th{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line)} .deck-tbl .tot td{font-weight:700;border-top:1px solid var(--line)} /* responsive for new components */ @media(max-width:1080px){.caps{grid-template-columns:repeat(2,1fr)}} @media(max-width:900px){ .pillars,.caps,.journeys,.segs,.layers,.vs,.plans,.price-mini,.anchor-cards,.steps4,.routers,.x-slides{grid-template-columns:1fr} .chapter,.chapter.flip{grid-template-columns:minmax(0,1fr)} .chapter.flip .ch-copy{order:1} .chapter.flip .ch-mock{order:2} .ch-copy,.ch-mock{min-width:0} .drill3{grid-template-columns:1fr} .drill3 .d-arrow{transform:rotate(90deg);padding:2px 0} .layer{border-right:0;border-bottom:1px solid var(--night-line)} section{padding:60px 0} .deck-slide{padding:26px 22px} } @media(max-width:600px){ .btn{white-space:normal;text-align:center} .hero .cta-row{flex-direction:column;align-items:stretch} .hero .cta-row .btn{justify-content:center} .cta .btn-lg{max-width:100%} .nav-cta .btn{padding:11px 16px;font-size:14px} .jumpnav{gap:7px} .jumpnav a{padding:7px 12px;font-size:12.5px} } /* ============================================================ Accountant variant (for-accountants/) — firm components Shared, namespaced; both sites can use them. No CSS fork. ============================================================ */ /* ---- audience eyebrow / dual-path ribbon ---- */ .aud-ribbon{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:20px} .aud-ribbon a{font-size:12.5px;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid var(--line); border-radius:999px;padding:7px 15px;transition:.15s} .aud-ribbon a:hover{border-color:var(--emerald);color:var(--emerald-d)} .aud-ribbon a.on{background:var(--emerald);color:#fff;border-color:var(--emerald)} .hero .spine{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,2vw,1.32rem); color:var(--emerald-d);margin:18px auto 28px;max-width:44ch} /* ---- light app-shell mock (mirrors the real CFO Core: sidebar + top bar) ---- */ :root{ --surface:#fffdf8; --brand-grad:linear-gradient(135deg,#3a7ca5 0%,#1b4965 60%,#143a52 100%); } .appshell{display:grid;grid-template-columns:212px 1fr;border:1px solid var(--line);border-radius:16px; overflow:hidden;box-shadow:var(--shadow);background:var(--paper);text-align:left} .as-side{background:var(--surface);border-right:1px solid var(--line);padding:16px 12px;min-width:0} .as-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 12px} .as-brand .as-mark{width:26px;height:26px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;background:var(--brand-grad)} .as-brand .as-bt{font-weight:700;font-size:14px;color:var(--ink);line-height:1.15} .as-brand .as-bs{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:11px;color:var(--faint)} .as-sec{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:13px 8px 5px} .as-item{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);padding:7px 9px;border-radius:8px;position:relative} .as-item .as-ic{width:14px;height:14px;flex:0 0 auto;border-radius:4px;border:1.5px solid currentColor;opacity:.45} .as-item.on{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:var(--shadow-sm)} .as-item.on .as-ic{opacity:.85;border-color:var(--emerald)} .as-item.on::before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:3px;border-radius:999px;background:var(--emerald)} .as-main{background:var(--paper);min-width:0;display:flex;flex-direction:column} .as-top{display:flex;align-items:center;gap:9px;padding:10px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.45);flex-wrap:wrap} .as-crumb{font-size:12.5px;color:var(--faint);font-weight:500} .as-crumb b{color:var(--ink);font-weight:600} .as-chip{font-size:12px;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 11px;white-space:nowrap} .as-cache{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--pos);background:#e1f0f0;border-radius:999px;padding:5px 10px} .as-cache i{width:6px;height:6px;border-radius:999px;background:var(--pos)} .as-ask{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--faint);background:#fff; border:1px solid var(--line);border-radius:999px;padding:7px 13px;min-width:190px} .as-ask kbd{margin-left:auto;font-size:10px;font-weight:600;color:var(--faint);background:var(--paper-2);border-radius:5px;padding:1px 6px} .as-wb{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink);background:#fff; border:1px solid var(--line);border-radius:999px;padding:6px 12px;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis} .as-body{padding:20px 22px;min-width:0} .as-hello{font-family:var(--serif);font-size:20px;color:var(--ink)} .as-hello small{font-family:var(--sans);font-size:12.5px;color:var(--faint);font-weight:500} .as-sub{font-size:13px;color:var(--ink-2);margin:4px 0 16px} .as-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px} .as-kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 14px} .as-kpi .k-l{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em} .as-kpi .k-v{font-family:var(--serif);font-size:22px;color:var(--ink);margin:5px 0 2px} .as-kpi .k-s{font-size:11.5px} .as-kpi .k-s.up{color:var(--pos)} .as-kpi .k-s.down{color:var(--coral)} .as-kpi .k-s.flat{color:var(--faint)} .as-seclabel{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:10px} .as-insight{display:flex;gap:12px;padding:13px;border-radius:12px;background:var(--surface);border:1px solid var(--line);margin-bottom:9px} .as-insight .i-ic{width:28px;height:28px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;font-size:14px} .i-ic.warn{background:var(--amber-soft);color:#a05a12} .i-ic.info{background:var(--emerald-soft);color:var(--emerald-d)} .i-ic.good{background:#e1f0f0;color:var(--pos)} .as-insight .i-t{font-size:13.5px;font-weight:600;color:var(--ink)} .as-insight .i-d{font-size:12.5px;color:var(--ink-2);margin-top:2px;line-height:1.5} .as-insight .i-acts{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap} .as-chip-sm{font-size:11px;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 9px} .as-chip-sm.pri{background:var(--emerald);color:#fff;border-color:transparent;font-weight:600} /* ---- firm cockpit roster (light — mirrors the app's card/table styling) ---- */ .cockpit{background:var(--surface);border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink)} .cockpit-top{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);background:#fff} .cockpit-top .ck-mark{width:26px;height:26px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;background:var(--brand-grad)} .cockpit-top .ck-brand{font-weight:700;font-size:14px;color:var(--ink)} .cockpit-top .ck-sub{font-size:12px;color:var(--faint)} .cockpit-top .ck-cache{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--pos);background:#e1f0f0;border-radius:999px;padding:5px 10px} .cockpit-top .ck-cache i{width:6px;height:6px;border-radius:999px;background:var(--pos)} .cockpit-top .ck-ask{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--faint);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px} .cockpit-top .ck-ask kbd{font-size:10px;font-weight:600;color:var(--faint);background:var(--paper-2);border-radius:5px;padding:1px 6px} .cockpit-top .ck-tag{font-size:11.5px;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:5px 12px} .cockpit-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)} .cockpit-strip .cs{background:var(--surface);padding:14px 18px} .cockpit-strip .cs .num{font-family:var(--serif);font-size:22px;font-weight:500;color:var(--ink)} .cockpit-strip .cs .lbl{font-size:11.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;margin-top:2px} .cockpit-strip .cs.warn .num{color:#a05a12} .cockpit-strip .cs.good .num{color:var(--pos)} .roster{width:100%;border-collapse:collapse;font-size:13px} .roster thead th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--faint);padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--paper-2)} .roster tbody td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle} .roster tbody tr:last-child td{border-bottom:0} .roster tbody tr:hover td{background:var(--paper)} .roster .r-name{font-weight:600;color:var(--ink)} .roster .r-ind{font-size:11.5px;color:var(--faint);margin-top:1px} .roster .r-sync{font-size:12px;color:var(--ink-2);white-space:nowrap} .roster .r-sync.stale{color:var(--coral)} .r-score{display:inline-flex;align-items:center;gap:8px} .r-score .rs-num{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);min-width:22px} .r-score .rs-bar{width:46px;height:5px;border-radius:999px;background:var(--paper-2);overflow:hidden} .r-score .rs-bar i{display:block;height:100%;border-radius:999px;background:var(--pos)} .r-score .rs-bar.warn i{background:var(--amber)} .r-score .rs-bar.bad i{background:var(--coral)} .r-flag{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2)} .r-flag .fd{width:8px;height:8px;border-radius:999px;flex:0 0 auto} .r-flag .fd.bad{background:var(--coral)} .r-flag .fd.check{background:var(--amber)} .r-flag .fd.good{background:var(--pos)} .r-flag .fd.muted{background:var(--faint)} .r-pill{font-size:11px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap} .r-pill.ok{background:#e1f0f0;color:var(--pos)} .r-pill.watch{background:var(--amber-soft);color:#a05a12} .r-pill.risk{background:var(--coral-soft);color:#a03e2c} .r-pill.muted{background:var(--paper-2);color:var(--faint)} .r-dso{font-variant-numeric:tabular-nums;color:var(--ink-2)} .r-dso .up{color:var(--coral)}.r-dso .flat{color:var(--faint)} .roster .r-open{color:var(--emerald);font-weight:600;font-size:12px;white-space:nowrap} .cockpit-note{padding:10px 18px;font-size:11.5px;color:var(--faint);border-top:1px solid var(--line);background:var(--paper)} @media(max-width:820px){ .roster .col-opt{display:none} .cockpit-strip{grid-template-columns:1fr 1fr} .cockpit-strip .cs:last-child{grid-column:span 2;border-top:1px solid var(--line)} .cockpit-top{flex-wrap:wrap} .cockpit-top .ck-ask{display:none} .appshell{grid-template-columns:1fr} .as-side{display:none} .as-kpis{grid-template-columns:repeat(2,1fr)} .as-ask{display:none} } /* ---- CAS opportunity stat band ---- */ .cas-band{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px} .cas-stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px} .cas-stat .cs-n{font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--emerald-d);font-weight:500} .cas-stat .cs-d{font-size:13.5px;color:var(--ink-2);margin-top:8px;line-height:1.5} .cas-src{text-align:center;font-size:12px;color:var(--faint);margin-top:22px} .cas-lead{max-width:60ch;margin:0 auto} @media(max-width:900px){.cas-band{grid-template-columns:1fr 1fr}} @media(max-width:520px){.cas-band{grid-template-columns:1fr}} /* ---- realization / ROI device ---- */ .roi{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff} .roi .roi-col{padding:28px 30px} .roi .roi-col.before{background:var(--paper-2);border-right:1px solid var(--line)} .roi .roi-h{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:16px} .roi .roi-col.after .roi-h{color:var(--emerald-d)} .roi-line{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:9px 0;border-bottom:1px solid var(--line)} .roi-line:last-child{border-bottom:0} .roi-line .rl-v{font-variant-numeric:tabular-nums;font-weight:600} .roi-line.tot{font-weight:700;color:var(--ink)} .roi-line.tot .rl-v{color:var(--emerald-d);font-size:1.15rem;font-family:var(--serif)} .roi-line.neg .rl-v{color:var(--coral)} .roi-tag{text-align:center;font-size:12px;color:var(--faint);margin-top:16px} @media(max-width:720px){.roi{grid-template-columns:1fr}.roi .roi-col.before{border-right:0;border-bottom:1px solid var(--line)}} /* ---- "Shipped this week" changelog device ---- */ .shipped{background:var(--night);border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.07);color:#E8F0EC} .shipped-top{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--night-line);font-size:12.5px;color:#9FB3AA} .shipped-top .st-live{width:8px;height:8px;border-radius:999px;background:var(--mint);box-shadow:0 0 0 4px rgba(143,212,230,.18)} .shipped-top b{color:#fff;font-weight:600} .shipped ul{list-style:none;margin:0;padding:8px 0} .shipped li{display:flex;gap:14px;align-items:baseline;padding:11px 20px;border-bottom:1px solid var(--night-line);font-size:13.5px} .shipped li:last-child{border-bottom:0} .shipped li .day{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mint);flex:0 0 42px} .shipped li .what{color:#C6D6CE} .shipped li .what b{color:#EAF2EE;font-weight:600} .shipped-note{padding:11px 20px;font-size:11.5px;color:#7E938A;border-top:1px solid var(--night-line);background:rgba(0,0,0,.15)} /* ---- partner apply form ---- */ .apply{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 32px;box-shadow:var(--shadow-sm);max-width:560px;margin:0 auto} .apply h3{font-size:1.4rem;margin-bottom:6px} .apply .ap-sub{color:var(--ink-2);font-size:14.5px;margin-bottom:20px} .apply .ap-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px} .apply label{font-size:12.5px;font-weight:600;color:var(--ink-2)} .apply input,.apply select,.apply textarea{font-family:var(--sans);font-size:14.5px;padding:12px 14px; border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);outline:none;width:100%} .apply input:focus,.apply select:focus,.apply textarea:focus{border-color:var(--emerald)} .apply .btn{width:100%;justify-content:center;margin-top:6px} .apply .msg-ok,.apply .msg-err{display:none;font-size:13.5px;font-weight:600;margin-top:12px;text-align:center} .apply .msg-ok{color:var(--pos)}.apply .msg-err{color:var(--coral)} .apply[data-state=ok] .msg-ok{display:block} .apply[data-state=err] .msg-err{display:block} .apply[data-state=ok] .ap-fields,.apply[data-state=ok] .btn{display:none} .apply .msg-fallback,.apply .need-msg{display:none;font-size:13.5px;margin-top:12px;text-align:center;line-height:1.5} .apply .msg-fallback{color:var(--ink-2)} .apply .need-msg{color:var(--coral);font-weight:600} .apply .msg-fallback a,.apply .msg-err a{color:var(--emerald);font-weight:600} .apply[data-state=fallback] .msg-fallback{display:block} .apply[data-state=fallback] .ap-fields,.apply[data-state=fallback] .btn{display:none} .apply[data-state=need] .need-msg{display:block} .apply .ap-row .opt{color:var(--faint);font-weight:500} /* "Talk to us" contact modal */ .talk-dialog{border:none;border-radius:var(--radius);padding:0;background:transparent;max-width:520px;width:calc(100% - 32px)} .talk-dialog::backdrop{background:rgba(20,28,38,.5)} .talk-dialog .apply{position:relative;margin:0;box-shadow:0 24px 60px -20px rgba(20,28,38,.5)} .talk-x{position:absolute;top:14px;right:16px;border:none;background:transparent;color:var(--faint); font-size:26px;line-height:1;cursor:pointer;padding:2px 6px} .talk-x:hover{color:var(--ink)} /* Honeypot: kept in the DOM for bots, off-screen for humans (never display:none — some bots skip hidden fields but fill positioned ones). */ .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} /* In-house pricing mini-cards: keep the plan price large even though it now carries the toggle data attributes (the generic .price is 2.7rem). */ .pm .pmprice .price{font-family:var(--serif);font-size:1.9rem;font-weight:500;color:var(--ink);line-height:1} .pm .price-note{margin:4px 0 0;min-height:16px} /* the named-human card */ .human{display:flex;gap:16px;align-items:center;background:var(--emerald-soft);border:1px solid #d6e2ea; border-radius:var(--radius);padding:20px 24px;max-width:560px;margin:18px auto 0} .human .h-av{width:52px;height:52px;border-radius:999px;flex:0 0 auto;display:grid;place-items:center; background:linear-gradient(135deg,#3a7ca5,#143a52);color:#fff;font-family:var(--serif);font-size:20px} .human .h-n{font-weight:700;font-size:15px} .human .h-r{font-size:13px;color:var(--ink-2)} /* ============================================================ Firm Cockpit mock (.ckm*) — app-faithful, from the app-build handoff. Self-contained + scoped; bare .dot/.pill/.chip/.b* namespaced under .ckm. ============================================================ */ .ckm{ --ck-good-bg:#e1f0f0; --ck-good-ink:#0e6b74; --ck-good-acc:#1c8d97; --ck-watch-bg:#f6ecd8; --ck-watch-ink:#8a5d0c; --ck-watch-acc:#b7791f; --ck-neg:#c0492f; --ck-neg-ink:#a83e29; --ck-neg-soft:#f8e8e2; --ck-pos:#0e7c86; --ck-surface:#fffdf8; --ck-canvas2:#efece4; font-family:var(--sans);color:var(--ink);background:var(--ck-surface); border:1px solid var(--line);border-radius:18px;overflow:hidden;text-align:left; box-shadow:0 1px 2px rgba(28,31,38,.05),0 22px 60px -24px rgba(28,31,38,.28)} .ckm *{box-sizing:border-box} .ckm .mono{font-variant-numeric:tabular-nums} .ckm-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--line);background:#fff} .ckm-brand{display:flex;align-items:center;gap:11px} .ckm-mark{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;background:linear-gradient(135deg,#3a7ca5 0%,#1b4965 60%,#143a52 100%)} .ckm-firm{font-weight:700;font-size:15px;line-height:1.1} .ckm-sub{font-size:12px;color:var(--faint);margin-top:1px} .ckm-cache{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ck-pos);background:var(--ck-good-bg);border-radius:999px;padding:5px 11px} .ckm-cache i{width:6px;height:6px;border-radius:999px;background:var(--ck-pos);display:inline-block} .ckm-ask{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--faint);background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 13px} .ckm-ask kbd{font-size:10px;font-weight:600;color:var(--faint);background:var(--ck-canvas2);border-radius:5px;padding:1px 6px} .ckm-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)} .ckm-strip .cs{background:var(--ck-surface);padding:14px 20px} .ckm-strip .cs-n{font-family:var(--serif);font-size:26px;line-height:1;color:var(--ink)} .ckm-strip .cs-l{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;margin-top:5px} .ckm-strip .cs.warn .cs-n{color:var(--ck-watch-acc)} .ckm-strip .cs.good .cs-n{color:var(--ck-good-acc)} .ckm-body{padding:18px 20px 20px} .ckm-seclabel{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:18px 0 10px} .ckm-seclabel:first-child{margin-top:2px} .ckm-attn{display:flex;flex-direction:column;gap:6px} .ckm-attn-row{display:flex;align-items:center;gap:12px;background:var(--ck-surface);border:1px solid var(--line);border-radius:11px;padding:11px 14px;font-size:14px} .ckm-attn-row .who{font-weight:600;min-width:150px} .ckm-attn-row .what{color:var(--ink-2);flex:1} .ckm-attn-row .open{color:var(--emerald);font-weight:600;font-size:12.5px} .ckm .dot{width:8px;height:8px;border-radius:999px;flex:0 0 auto;display:inline-block} .ckm .dot.bad{background:var(--ck-neg)} .ckm .dot.check{background:var(--ck-watch-acc)} .ckm .dot.watch{background:var(--ck-watch-acc)} .ckm .dot.good{background:var(--ck-good-acc)} .ckm .dot.muted{background:var(--faint)} .ckm-lens{display:inline-flex;background:var(--ck-canvas2);border:1px solid var(--line);border-radius:999px;padding:3px;margin-bottom:6px} .ckm-lens span{font-size:12.5px;font-weight:600;color:var(--ink-2);padding:6px 16px;border-radius:999px} .ckm-lens span.on{background:var(--ck-surface);color:var(--emerald);box-shadow:0 1px 3px rgba(28,31,38,.12)} .ckm-roster{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ck-surface)} .ckm-rhead,.ckm-row{display:grid;grid-template-columns:1.7fr 90px 96px 2.4fr 78px 130px 74px;gap:12px;align-items:center;padding:11px 14px} .ckm-rhead{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);background:var(--ck-canvas2);border-bottom:1px solid var(--line)} .ckm-row{border-bottom:1px solid var(--line);font-size:13.5px} .ckm-row:last-child{border-bottom:0} .ckm-name{font-weight:600} .ckm-ind{font-size:11px;color:var(--faint);margin-top:1px} .ckm-bt{display:inline-flex;align-items:center;gap:7px} .ckm-bt .n{font-weight:700;font-variant-numeric:tabular-nums;min-width:20px} .ckm-bt .bar{width:40px;height:5px;border-radius:999px;background:var(--ck-canvas2);overflow:hidden} .ckm-bt .bar i{display:block;height:100%;border-radius:999px;background:var(--ck-good-acc)} .ckm-bt .bar.warn i{background:var(--ck-watch-acc)} .ckm-bt .bar.bad i{background:var(--ck-neg)} .ckm .pill{font-size:10.5px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap} .ckm .pill.healthy{background:var(--ck-good-bg);color:var(--ck-good-ink)} .ckm .pill.watch{background:var(--ck-watch-bg);color:var(--ck-watch-ink)} .ckm .pill.at_risk{background:var(--ck-neg-soft);color:var(--ck-neg-ink)} .ckm .pill.blocked{background:var(--ck-canvas2);color:var(--ink-2)} .ckm .chip{font-size:10.5px;color:var(--ink-2);background:var(--ck-canvas2);border:1px solid var(--line);border-radius:999px;padding:3px 9px;white-space:nowrap} .ckm .chip.pack_ready{background:var(--ck-good-bg);color:var(--ck-good-ink);border-color:transparent} .ckm .chip.stale{background:var(--ck-neg-soft);color:var(--ck-neg-ink);border-color:transparent} .ckm-flag{display:flex;align-items:center;gap:8px;color:var(--ink-2);min-width:0} .ckm-flag .muted{color:var(--faint)} .ckm-dso{font-variant-numeric:tabular-nums;color:var(--ink)} .ckm-dso .up{color:var(--ck-neg)} .ckm-dso .flat{color:var(--faint)} .ckm-owner{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2)} .ckm-av{width:22px;height:22px;border-radius:999px;flex:0 0 auto;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;background:var(--emerald)} .ckm-av.muted{background:var(--faint)} .ckm-open{border:1px solid var(--line);background:var(--ck-surface);color:var(--emerald);font-weight:600;font-size:12px;border-radius:9px;padding:5px 10px;white-space:nowrap;cursor:pointer} .ckm-board{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:10px;overflow-x:auto} .ckm .bcol{background:var(--ck-canvas2);border:1px solid var(--line);border-radius:14px;min-width:150px} .ckm .bcol-h{font-size:12px;font-weight:600;color:var(--ink-2);padding:11px 11px 8px;display:flex;align-items:center;gap:6px} .ckm .bcol-h .ct{font-size:10.5px;color:var(--faint);background:var(--ck-surface);border-radius:999px;padding:1px 7px;margin-left:auto} .ckm .bcol-b{display:flex;flex-direction:column;gap:6px;padding:0 8px 11px} .ckm .bcard{text-align:left;background:var(--ck-surface);border:1px solid var(--line);border-radius:10px;padding:10px} .ckm .bcard .t{display:flex;align-items:center;gap:7px} .ckm .bcard .bn{font-weight:600;font-size:12.5px} .ckm .bcard .bf{font-size:10.5px;color:var(--ink-2);margin-top:4px;line-height:1.4} .ckm .bcard .bm{font-size:10.5px;color:var(--faint);margin-top:5px} .ckm .bghost{font-size:11px;color:var(--faint);text-align:center;padding:9px;border:1px dashed var(--line);border-radius:10px} .ckm-note{padding:11px 20px;font-size:11px;color:var(--faint);border-top:1px solid var(--line);background:var(--paper)} @media(max-width:900px){ .ckm-rhead{display:none} .ckm-row{grid-template-columns:1fr auto;grid-auto-rows:min-content} .ckm-row>*:nth-child(n+3){grid-column:1/-1} .ckm-strip{grid-template-columns:1fr 1fr} .ckm-board{grid-template-columns:repeat(6,160px)} .ckm-ask{display:none} } /* ============================================================ Brief "THE GLANCE" — headline + driver pills + net-income bridge + sparkline KPIs ============================================================ */ .gl-eyebrow{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:8px} .gl-headline{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.2;color:var(--ink);margin-bottom:12px} .gl-headline .neg{color:var(--coral)} .gl-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px} .gl-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-2); background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 11px} .gl-pill i{width:6px;height:6px;border-radius:999px;background:var(--coral);flex:0 0 auto} .gl-bridge{border:1px solid var(--line);border-radius:14px;padding:16px 18px 12px;background:#fff;margin-bottom:14px} .gl-bridge .glb-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px} .gl-bridge .glb-t{font-family:var(--serif);font-size:1rem;color:var(--ink)} .gl-bridge .glb-meta{font-size:11px;color:var(--faint)} .gl-narr{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-top:10px;font-size:12.5px;color:var(--ink-2);line-height:1.55} /* KPI sparkline */ .as-kpi .k-spark{display:block;width:100%;height:26px;margin:6px 0 4px} .as-kpi .k-spark path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .as-kpi .k-spark.down path{stroke:var(--coral)} .as-kpi .k-spark.up path{stroke:var(--pos)} .as-kpi .k-spark.down .area{fill:rgba(216,103,78,.10);stroke:none} .as-kpi .k-spark.up .area{fill:rgba(14,124,134,.10);stroke:none} .as-kpi .k-pill{display:inline-block;font-size:11px;font-weight:600;border-radius:999px;padding:2px 9px} .as-kpi .k-pill.down{background:var(--coral-soft);color:#a03e2c} .as-kpi .k-pill.up{background:#e1f0f0;color:var(--pos)} /* ranked-by-impact insight card (real Brief styling) */ .ri-eyebrow{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:20px 0 10px} .ri-card{position:relative;border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:var(--surface);margin-bottom:9px} .ri-sev{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 9px;margin-right:8px} .ri-sev.watch{background:var(--amber-soft);color:#a05a12} .ri-sev.bad{background:var(--coral-soft);color:#a03e2c} .ri-sev.check{background:var(--emerald-soft);color:var(--emerald-d)} .ri-sev.good{background:#e1f0f0;color:var(--pos)} .ri-card .ri-t{font-size:13.5px;font-weight:600;color:var(--ink)} .ri-card .ri-d{font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.5} .ri-card .ri-acts{display:flex;align-items:center;gap:6px;margin-top:11px;flex-wrap:wrap} .ri-starthere{position:absolute;top:12px;right:12px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:#fff;background:var(--emerald-d);border-radius:999px;padding:4px 10px} /* ============================================================ App-accurate exhibits (match real CFO Core screenshots) ============================================================ */ /* app surface frame — a light card that reads as an app screen */ .appx{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);text-align:left} .appx-bar{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);background:#fff} .appx-bar .ax-crumb{font-size:12.5px;color:var(--faint);font-weight:500} .appx-bar .ax-crumb b{color:var(--ink);font-weight:600} .appx-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto} .appx-tabs span{font-size:11.5px;font-weight:600;color:var(--ink-2);padding:5px 11px;border-radius:999px;white-space:nowrap} .appx-tabs span.on{background:var(--emerald-soft);color:var(--emerald-d)} .appx-tabs span em{font-style:normal;color:var(--faint);margin-left:5px} .appx-body{padding:18px} /* board-pack exec review (Presentations) — dark masthead + KPI cards + summary + waterfall */ .bp-mast{background:linear-gradient(150deg,#123247,#0e2230);border-radius:14px;padding:20px 22px;color:#fff;display:flex;justify-content:space-between;align-items:flex-start;gap:16px} .bp-mast .bm-eyebrow{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#c0a14a} .bp-mast h4{font-family:var(--serif);font-weight:500;font-size:1.7rem;color:#fff;margin:6px 0 6px} .bp-mast .bm-sub{font-size:12.5px;color:rgba(255,255,255,.8)} .bp-mast .bm-seal{flex:0 0 auto;text-align:center;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75)} .bp-mast .bm-seal .bm-ic{font-size:20px;display:block;margin-bottom:4px} .bp-sectionhead{display:flex;align-items:center;justify-content:space-between;margin:16px 2px 12px} .bp-sectionhead .bh-t{font-family:var(--serif);font-size:1.1rem} .bp-sectionhead .bh-ai{font-size:11px;font-weight:600;color:var(--emerald-d);background:var(--emerald-soft);border-radius:999px;padding:5px 11px} .bp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .bp-kpi{border:1px solid var(--line);border-radius:12px;padding:13px 14px;background:#fff} .bp-kpi .k-l{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em} .bp-kpi .k-v{font-family:var(--serif);font-size:1.7rem;color:var(--ink);margin:4px 0 2px} .bp-kpi .k-s{font-size:11px;color:var(--ink-2)} .bp-summary{border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:12px;padding:14px 16px;margin-top:14px;background:#fff} .bp-summary .bs-h{font-family:var(--serif);font-size:1.05rem;margin-bottom:6px} .bp-summary p{font-size:13px;color:var(--ink-2);line-height:1.6;margin:0} /* waterfall — Net Income MoM Bridge (exact app colors + legend) */ .wf{--wf-start:#1f5d7a;--wf-up:#2f855a;--wf-down:#b45309;--wf-end:#c0a14a} .wf-title{font-family:var(--serif);font-size:1.05rem;margin:16px 2px 2px} .wf-title span{float:right;font-family:var(--sans);font-size:11px;color:var(--faint);font-weight:500} .wf-chart{position:relative;height:150px;display:flex;align-items:flex-end;gap:16px;padding-top:24px;margin-top:8px} .wf-col{flex:1;position:relative;height:100%} .wf-bar{position:absolute;left:12%;right:12%;border-radius:3px} .wf-conn{position:absolute;height:0;left:calc(-12% - 16px);right:88%;border-top:1.5px dashed #b9beca} .wf-tag{position:absolute;left:-20%;right:-20%;text-align:center;font-size:10.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} .wf-axis{display:flex;gap:16px;margin-top:8px} .wf-axis span{flex:1;text-align:center;font-size:10px;color:var(--faint);line-height:1.3} .wf-axis b{display:block;font-weight:600;color:var(--ink-2);font-size:11px} .wf-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:11px;color:var(--ink-2)} .wf-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle} /* valuation — inputs & assumptions + methods (market-weighted reconciliation) */ .valhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap} .valhead .vh-est{font-family:var(--serif);font-size:1.9rem;color:var(--emerald-d)} .valhead .vh-range{font-size:12.5px;color:var(--faint)} .val-inputs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px} .val-tile{border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:#fff} .val-tile .vt-l{font-size:9.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em} .val-tile .vt-v{font-family:var(--serif);font-size:1.15rem;color:var(--ink);margin-top:3px} .val-methods{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff} .val-mrow{display:grid;grid-template-columns:1.4fr 52px 1fr;gap:12px;align-items:center;padding:11px 15px;border-bottom:1px solid var(--paper-2);font-size:13px} .val-mrow:last-child{border-bottom:0} .val-mrow.head{background:var(--paper-2);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)} .val-mrow.blend{background:var(--emerald-soft);font-weight:700} .val-mrow .vm-name{color:var(--ink)} .val-mrow .vm-wt{font-variant-numeric:tabular-nums;color:var(--ink-2);text-align:right} .val-mrow .vm-bar{position:relative;height:12px;border-radius:999px;background:var(--paper-2)} .val-mrow .vm-bar i{position:absolute;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#6da3c4,var(--emerald))} .val-mrow .vm-bar b{position:absolute;top:-3px;width:2px;height:18px;background:var(--ink)} @media(max-width:820px){.bp-kpis{grid-template-columns:repeat(2,1fr)}.val-inputs{grid-template-columns:repeat(2,1fr)}.appx-tabs{display:none}} /* two-pillar promise cards */ .promise{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px} .promise .pc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm)} .promise .pc .pc-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:var(--emerald-soft);margin-bottom:14px} .promise .pc h3{font-size:1.28rem;margin-bottom:8px} .promise .pc p{color:var(--ink-2);font-size:14.5px;margin:0} @media(max-width:820px){.promise{grid-template-columns:1fr}} /* live-product screenshots (shots/) — replace the hand-built app mocks. Captured from the live demo at 1440x900@2x; keep the stage framing. */ .shot-frame{max-width:1060px;margin:0 auto;border-radius:14px;overflow:hidden; border:1px solid var(--line);box-shadow:0 24px 60px rgba(27,42,51,.16);background:#fff} .shot-frame img{display:block;width:100%;height:auto} .shot-caption{text-align:center;color:var(--ink-2);font-size:13px;margin:12px auto 0;max-width:1060px} .shot-caption a{color:inherit}