:root { --forest:#10251f; --paper:#f4f1e9; --ink:#18241f; --muted:#5d6d63; --gold:#f3c35a; --mint:#dce9dd; --line:rgba(16,37,31,.14); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } body { min-width:320px; margin:0; } a { color:inherit; } .topbar, main, footer { width:min(100% - 40px,1180px); margin-inline:auto; }.topbar { display:flex; justify-content:space-between; align-items:center; gap:22px; padding-block:22px; }.brand { display:inline-flex; align-items:center; gap:10px; color:var(--forest); font-size:.98rem; font-weight:850; letter-spacing:.02em; text-decoration:none; }.brand img { width:38px; height:38px; }.back-link { color:#345b4a; font-size:.91rem; font-weight:750; text-underline-offset:4px; }.dashboard-hero { display:flex; justify-content:space-between; align-items:end; gap:50px; padding:clamp(42px,7vw,92px) 0 38px; }.eyebrow { margin:0 0 12px; color:#527363; font-size:.72rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }.dashboard-hero h1, h2, p { margin-top:0; }.dashboard-hero h1, h2 { font-family:Georgia,"Times New Roman",serif; font-weight:500; letter-spacing:-.055em; }.dashboard-hero h1 { max-width:10ch; margin-bottom:20px; font-size:clamp(3.2rem,7vw,6.2rem); line-height:.9; }.dashboard-hero > div > p:last-child { max-width:59ch; margin:0; color:var(--muted); font-size:1.04rem; line-height:1.58; }.demo-note { flex:0 0 auto; display:flex; align-items:center; gap:9px; margin-bottom:8px; padding:11px 13px; border-radius:999px; color:#41604f; background:var(--mint); font-size:.78rem; font-weight:720; }.demo-note span { width:8px; height:8px; border-radius:50%; background:#4d8a68; }.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.metrics article { min-height:162px; padding:22px; border:1px solid var(--line); border-radius:16px; background:#fffdf8; }.metrics p { margin-bottom:23px; color:var(--muted); font-size:.78rem; font-weight:750; }.metrics strong { display:block; margin-bottom:12px; color:var(--forest); font-family:Georgia,"Times New Roman",serif; font-size:clamp(2rem,3.6vw,3rem); font-weight:500; letter-spacing:-.06em; line-height:.9; }.metrics span { color:#68796e; font-size:.76rem; }.metrics .up { color:#3f7754; }.metrics em { color:#68796e; font-style:normal; }.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(330px,.9fr); gap:16px; margin-top:16px; padding-bottom:74px; }.card, .insight-card, .privacy-card { border-radius:20px; }.card { padding:clamp(23px,4vw,36px); border:1px solid var(--line); background:#fffdf8; }.card-heading { display:flex; align-items:start; justify-content:space-between; gap:18px; }.card-heading h2, .privacy-card h2, .insight-card h2 { margin-bottom:0; font-size:clamp(1.7rem,3.1vw,2.55rem); line-height:.98; }.select { flex:0 0 auto; padding:8px 10px; border:1px solid var(--line); border-radius:8px; color:#52655a; font-size:.73rem; font-weight:700; }.chart { display:flex; align-items:end; gap:clamp(6px,1.25vw,13px); height:205px; margin-top:45px; padding:0 4px; border-bottom:1px solid var(--line); }.bar { display:flex; flex:1; flex-direction:column; justify-content:end; min-width:8px; height:100%; }.bar::before { display:block; height:var(--value); border-radius:5px 5px 0 0; content:""; background:#9cb9a3; }.bar.active::before { background:var(--gold); }.bar span { margin-top:9px; color:#738077; font-size:.67rem; text-align:center; }.chart-note, .card-note { margin:22px 0 0; color:var(--muted); font-size:.82rem; line-height:1.55; }.chart-note b { color:var(--forest); }.funnel-card { background:var(--forest); color:#fff; }.funnel-card .eyebrow { color:#f8d888; }.funnel-card h2 { color:#fff; }.funnel { display:grid; gap:18px; margin:42px 0 0; padding:0; list-style:none; }.funnel li { position:relative; display:grid; grid-template-columns:1fr auto; gap:7px 13px; color:rgba(255,255,255,.85); font-size:.86rem; }.funnel b { color:#fff; }.funnel i { grid-column:1 / -1; width:100%; height:9px; overflow:hidden; border-radius:10px; background:rgba(255,255,255,.14); }.funnel i::after { display:block; width:var(--width); height:100%; border-radius:inherit; content:""; background:#f8d888; }.funnel-card .card-note { color:rgba(255,255,255,.56); }.objects-card { grid-column:1 / 2; }.objects-card .card-heading a { color:#426d58; font-size:.79rem; font-weight:750; text-underline-offset:4px; }.object-table { margin-top:33px; }.table-row { display:grid; grid-template-columns:minmax(0,1fr) 74px 70px 74px; gap:12px; align-items:center; padding:15px 0; border-top:1px solid var(--line); font-size:.84rem; }.table-head { padding-top:0; border:0; color:#768277; font-size:.68rem; font-weight:800; text-transform:uppercase; }.table-row > span:not(:first-child) { text-align:right; }.table-row b { display:inline-grid; place-items:center; width:24px; height:24px; margin-right:8px; border-radius:7px; color:#6c7d71; background:#e7eee7; font-size:.68rem; }.insight-card { display:flex; flex-direction:column; justify-content:space-between; min-height:290px; padding:clamp(26px,4vw,37px); color:#fff; background:#476f5a; }.insight-card .eyebrow { color:#d8efdc; }.insight-card h2 { max-width:17ch; font-size:clamp(1.8rem,3vw,2.55rem); }.insight-card > p:not(.eyebrow) { max-width:48ch; margin:20px 0 25px; color:rgba(255,255,255,.75); font-size:.9rem; line-height:1.55; }.insight-card div { display:flex; justify-content:space-between; align-items:center; gap:18px; padding-top:15px; border-top:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.75); font-size:.77rem; }.insight-card i { color:#f8d888; font-size:1.2rem; font-style:normal; }.privacy-card { margin-bottom:72px; padding:clamp(27px,5vw,58px); color:var(--forest); background:var(--mint); }.privacy-card h2 { max-width:16ch; margin-bottom:17px; }.privacy-card > p:last-child { max-width:65ch; margin:0; color:#4e6d5b; line-height:1.6; } footer { display:flex; justify-content:space-between; gap:20px; padding:28px 0 38px; border-top:1px solid var(--line); color:#66776c; font-size:.78rem; } footer a { color:#365d49; font-weight:800; text-underline-offset:4px; } a:focus-visible { outline:3px solid #8fbaf5; outline-offset:4px; border-radius:4px; }
@media (max-width:800px) { .metrics { grid-template-columns:repeat(2,1fr); }.dashboard-grid { grid-template-columns:1fr; }.objects-card { grid-column:auto; }.dashboard-hero { align-items:start; flex-direction:column; gap:22px; }.dashboard-hero h1 { max-width:12ch; }.demo-note { margin:0; }.insight-card { min-height:250px; } }
@media (max-width:520px) { .topbar, main, footer { width:min(100% - 32px,1180px); }.topbar { padding-block:16px; }.back-link { font-size:.78rem; }.brand img { width:34px; height:34px; }.dashboard-hero { padding:43px 0 31px; }.metrics { grid-template-columns:1fr; }.metrics article { min-height:132px; }.chart { height:170px; margin-top:32px; gap:6px; }.bar span { font-size:.6rem; }.bar:nth-child(even) span { visibility:hidden; }.table-row { grid-template-columns:minmax(0,1fr) 47px 52px 56px; gap:5px; font-size:.75rem; }.table-row b { display:none; }.card-heading { flex-direction:column; }.select { order:-1; }.privacy-card { margin-bottom:48px; } footer { flex-direction:column; gap:9px; } }