/* ProofLine Design System v2 — DARK PREMIUM (drop-in: same class contracts as v1) Set per-business accent: */ :root{ --bg:#070A10; --bg-2:#0A0F17; --surface:#0D1320; --surface-2:#111A2B; --surface-alt:#131C2E; --border:rgba(148,163,184,.14); --border-strong:rgba(148,163,184,.24); --ink:#E7ECF3; --ink-2:#9AA7B8; --ink-3:#5B6B80; --success:#34D399; --warning:#FBBF24; --danger:#F87171; --info:#60A5FA; --accent:#2563EB; --accent-soft:color-mix(in srgb,var(--accent) 14%,transparent); --glow:color-mix(in srgb,var(--accent) 45%,transparent); --font:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif; --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace; --r-sm:10px; --r-md:14px; --r-lg:20px; --shadow-card:0 1px 0 rgba(255,255,255,.03) inset,0 8px 30px rgba(0,0,0,.35); --shadow-pop:0 16px 48px rgba(0,0,0,.55); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,h4{line-height:1.12;margin:0 0 .5em;letter-spacing:-.025em;font-weight:700} h1{font-size:clamp(32px,5vw,54px)} h2{font-size:clamp(24px,3.4vw,34px)} h3{font-size:17px} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:none} p{margin:0 0 1em;color:var(--ink-2)} .muted{color:var(--ink-2)}.faint{color:var(--ink-3)} .mono{font-family:var(--mono);font-size:.88em} .wrap{max-width:1140px;margin:0 auto;padding:0 24px;position:relative} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font-family:inherit;font-size:15px;font-weight:600;padding:11px 22px;border-radius:var(--r-md);transition:transform .12s,box-shadow .2s,filter .15s,background .15s;text-decoration:none;letter-spacing:.01em} .btn:hover{text-decoration:none;filter:brightness(1.1)} .btn:active{transform:translateY(1px) scale(.99)} .btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 40%,transparent)} .btn[disabled]{opacity:.45;cursor:not-allowed} .btn-primary{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,#fff 8%),var(--accent));color:#fff;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent),0 6px 24px -6px var(--glow)} .btn-primary:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 80%,transparent),0 10px 32px -6px var(--glow)} .btn-ghost{background:rgba(255,255,255,.04);border:1px solid var(--border-strong);color:var(--ink)} .btn-ghost:hover{background:rgba(255,255,255,.08)} .btn-danger{background:linear-gradient(180deg,#F87171,#DC2626);color:#fff} .btn-sm{padding:7px 13px;font-size:13px;border-radius:var(--r-sm)} .btn-lg{padding:14px 30px;font-size:16px;border-radius:16px} .btn .spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* ---------- Cards / layout ---------- */ .card{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 40%),var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:26px;transition:transform .18s,border-color .18s,box-shadow .18s} .card:hover{border-color:var(--border-strong)} .card-hover:hover{transform:translateY(-3px);box-shadow:0 18px 44px -12px rgba(0,0,0,.6),0 0 0 1px var(--accent-soft)} .grid{display:grid;gap:18px} .grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)} .row{display:flex;align-items:center;gap:12px} .between{justify-content:space-between} .stack{display:flex;flex-direction:column;gap:12px} .section{padding:88px 0;position:relative} .section-alt{background:var(--bg-2)} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px} .eyebrow::before{content:"";width:22px;height:1px;background:var(--accent)} .section-title{max-width:22ch} .lead{font-size:17px;max-width:56ch} /* ---------- Forms ---------- */ label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:0 0 6px} input,select,textarea{width:100%;padding:11px 14px;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--bg-2);color:var(--ink);font-family:inherit;font-size:15px;transition:border-color .15s,box-shadow .15s} input::placeholder,textarea::placeholder{color:var(--ink-3)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)} .field{margin-bottom:16px} .hint{font-size:12px;color:var(--ink-3);margin-top:4px} /* ---------- Badges / status ---------- */ .badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;border:1px solid transparent} .badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor} .badge-success{background:color-mix(in srgb,var(--success) 12%,transparent);color:var(--success);border-color:color-mix(in srgb,var(--success) 25%,transparent)} .badge-warning{background:color-mix(in srgb,var(--warning) 12%,transparent);color:var(--warning);border-color:color-mix(in srgb,var(--warning) 25%,transparent)} .badge-danger{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 25%,transparent)} .badge-info{background:var(--accent-soft);color:color-mix(in srgb,var(--accent) 80%,#fff);border-color:color-mix(in srgb,var(--accent) 30%,transparent)} .badge-neutral{background:rgba(255,255,255,.05);color:var(--ink-2);border-color:var(--border)} /* ---------- Table ---------- */ table{width:100%;border-collapse:collapse;font-size:14px} th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);padding:10px 12px;border-bottom:1px solid var(--border-strong);font-weight:700} td{padding:12px;border-bottom:1px solid var(--border)} tr:last-child td{border-bottom:none} tr:hover td{background:rgba(255,255,255,.025)} /* ---------- States ---------- */ .empty{text-align:center;padding:56px 24px;color:var(--ink-2)} .empty .icon{font-size:36px;margin-bottom:10px;opacity:.8} .error-box{background:color-mix(in srgb,var(--danger) 10%,transparent);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 25%,transparent);border-radius:var(--r-md);padding:14px 16px;font-size:14px} .success-box{background:color-mix(in srgb,var(--success) 10%,transparent);color:var(--success);border:1px solid color-mix(in srgb,var(--success) 25%,transparent);border-radius:var(--r-md);padding:14px 16px;font-size:14px} .skeleton{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-sm)} @keyframes shimmer{to{background-position:-200% 0}} /* ---------- Nav / shell ---------- */ .nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--border)} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px} .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;color:var(--ink);letter-spacing:-.01em} .logo-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#000));color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800;box-shadow:0 4px 14px -2px var(--glow)} .app-shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh} .sidebar{background:var(--bg-2);border-right:1px solid var(--border);padding:22px 12px} .sidebar a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);color:var(--ink-2);font-size:14px;font-weight:500;transition:background .12s,color .12s} .sidebar a:hover{background:rgba(255,255,255,.05);text-decoration:none;color:var(--ink)} .sidebar a.active{background:var(--accent-soft);color:color-mix(in srgb,var(--accent) 85%,#fff);font-weight:600} .main{padding:32px;max-width:1000px} /* ---------- Toast ---------- */ .toast{position:fixed;bottom:24px;right:24px;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--ink);padding:13px 20px;border-radius:var(--r-md);box-shadow:var(--shadow-pop);font-size:14px;opacity:0;transform:translateY(10px);transition:all .28s cubic-bezier(.2,.9,.3,1.2);z-index:100} .toast.show{opacity:1;transform:none} /* ---------- Hero / marketing ---------- */ .hero{padding:110px 0 80px;text-align:center;position:relative;overflow:hidden} .hero::before{content:"";position:absolute;inset:-40% -20% auto;height:620px;background: radial-gradient(42% 55% at 25% 30%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%), radial-gradient(38% 48% at 75% 20%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%); pointer-events:none;filter:blur(10px)} .hero>*{position:relative} .hero h1{font-size:clamp(36px,6vw,64px);max-width:18ch;margin:0 auto .4em;font-weight:800} .hero h1 .grad{background:linear-gradient(100deg,var(--accent) 10%,color-mix(in srgb,var(--accent) 55%,#fff) 90%);-webkit-background-clip:text;background-clip:text;color:transparent} .hero p{font-size:18px;max-width:54ch;margin:0 auto 1.8em;color:var(--ink-2)} .pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--border-strong);border-radius:999px;padding:7px 16px;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:26px} .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 10px var(--success)} .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .stat-num{font-size:clamp(28px,3.6vw,40px);font-weight:800;letter-spacing:-.03em;background:linear-gradient(180deg,#fff,var(--ink-2));-webkit-background-clip:text;background-clip:text;color:transparent} .price-card{display:flex;flex-direction:column;gap:10px} .price-card .amount{font-size:38px;font-weight:800;letter-spacing:-.03em} .price-card .per{font-size:13px;color:var(--ink-3)} .feature-li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2);margin-bottom:11px} .feature-li::before{content:"✓";color:var(--accent);font-weight:800;flex:none} .divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-strong),transparent);border:none;margin:0} .foot{padding:44px 0;color:var(--ink-3);font-size:13px} /* ---------- Responsive ---------- */ @media (max-width:960px){ .grid-4{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr} .app-shell{grid-template-columns:1fr} .sidebar{display:flex;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);padding:10px} .sidebar a{white-space:nowrap} .hero{padding:72px 0 56px} .section{padding:60px 0} } @media (max-width:560px){ .grid-4{grid-template-columns:1fr} .cta-row{flex-direction:column;align-items:stretch} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ================= v3 additions (2026) — appended, nothing above is removed ================= */ /* Typography-first display headings: 600 weight, tight tracking, 44-64px */ .display{font-weight:600;letter-spacing:-.03em;line-height:1.04;font-size:clamp(44px,6vw,64px)} /* Numbered chapter spine: mono "01" labels */ .chapter-number{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--accent)} .chapter-head{display:flex;align-items:baseline;gap:16px;margin-bottom:16px} .chapter-head h2{margin:0;font-weight:600;letter-spacing:-.03em} /* Bento feature grid — dense flow, .span-2 for emphasis cells */ .bento{display:grid;gap:18px;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense} .bento .cell{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;transition:border-color .18s,transform .18s} .bento .cell:hover{border-color:var(--border-strong);transform:translateY(-2px)} .bento .cell.span-2{grid-column:span 2} .bento .cell h3{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px} .bento .cell p{font-size:13.5px;margin:0;color:var(--ink-2)} /* Product frame — browser chrome mock wrapping a real UI mock */ .product-frame{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;text-align:left;box-shadow:var(--shadow-card)} .product-frame .chrome{display:flex;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid var(--border);background:var(--surface)} .product-frame .dots{display:flex;gap:7px;flex:none} .product-frame .dots i{width:11px;height:11px;border-radius:50%;background:var(--ink-3);opacity:.5} .product-frame .url{flex:1;font-family:var(--mono);font-size:12px;color:var(--ink-3);background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;padding:5px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .product-frame .frame-body{padding:20px} /* Receipt — mono metric block: small label + big number */ .receipt{font-family:var(--mono);background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);padding:16px 18px} .receipt .r-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);margin-bottom:6px} .receipt .r-num{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink)} .receipt .r-sub{display:block;font-size:12px;color:var(--ink-3);margin-top:4px} /* Signature motion: section fade-in on scroll */ .reveal{opacity:0;transform:translateY(14px);transition:opacity .3s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1)} .reveal.in{opacity:1;transform:none} /* v3 overrides: calm cards (border lift + 2px translate only), single hero blob, 600-weight hero */ .card-hover:hover{transform:translateY(-2px);box-shadow:none;border-color:var(--border-strong)} .hero::before{background:radial-gradient(46% 62% at 50% 0%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 72%);filter:none} .hero h1{font-weight:600;letter-spacing:-.03em;font-size:clamp(44px,6vw,64px)} /* Visible focus for keyboard users */ :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} @media (max-width:960px){ .bento{grid-template-columns:1fr 1fr} .display{font-size:clamp(38px,8vw,52px)} } @media (max-width:560px){ .bento{grid-template-columns:1fr} .bento .cell.span-2{grid-column:auto} } /* v3 utilities — round 2 */ .display-2{font-weight:600;letter-spacing:-.03em;line-height:1.08;font-size:clamp(28px,3.6vw,44px)} .tnum{font-variant-numeric:tabular-nums} .mini{font-family:var(--mono);font-size:12px;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;white-space:pre-wrap;word-break:break-word} /* App page-head: title + one-line context + primary action right */ .page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:0 0 24px;flex-wrap:wrap} .page-head h1{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0} .page-head .page-ctx{margin:4px 0 0;font-size:13px;color:var(--ink-3);max-width:64ch} /* Guided activation: sample-data preview inside empty states */ .sample-card{border:1px dashed var(--border-strong);border-radius:var(--r-md);padding:14px 16px;margin-top:14px;text-align:left;background:rgba(255,255,255,.02)} .sample-card .s-tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px} /* Grayscale chrome: logo mark earns color nowhere */ .logo-mark{background:var(--surface-2);color:var(--ink);border:1px solid var(--border-strong);box-shadow:none} pre.email{font-family:var(--mono)} @media (max-width:960px){ .display-2{font-size:clamp(26px,6vw,36px)} } @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} } /* ================= v3 utilities — parcel round 2 (appended; nothing above removed) ================= */ /* Compact tables — sample-data previews and dense app panels */ table.compact{font-size:13px} table.compact th{padding:7px 10px} table.compact td{padding:9px 10px} /* Mono metric for inline numbers */ .metric{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink)} /* Vertical evidence timeline (landing mock + app panels) */ .tl{list-style:none;margin:0;padding:0} .tl li{position:relative;padding:0 0 12px 20px;font-size:12.5px;color:var(--ink-2)} .tl li:last-child{padding-bottom:0} .tl li::before{content:"";position:absolute;left:4px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--ink-3)} .tl li:not(:last-child)::after{content:"";position:absolute;left:7px;top:15px;bottom:-2px;width:1px;background:var(--border-strong)} .tl li.acc::before{background:var(--accent)} .tl .t{font-family:var(--mono);font-size:11px;color:var(--ink-3);display:block} /* ================= v3 utilities — round 3 (appended; nothing above removed) ================= */ /* Mini metric bar — bento cell visual for scores/occupancy */ .mini-bar{height:6px;border-radius:999px;background:var(--bg-2);overflow:hidden} .mini-bar i{display:block;height:100%;background:var(--accent);border-radius:999px} /* Hash-chain strip — vault receipts, evidence blocks */ .hash-chain{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)} .hash-chain .blk{background:var(--bg-2);border:1px solid var(--border);border-radius:8px;padding:5px 10px;white-space:nowrap} .hash-chain .blk.acc{border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--ink-2)} /* Ledger line — mono double-entry row */ .ledger-row{display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:12.5px;color:var(--ink-2)} .ledger-row .faint{flex:none} /* Inline countdown / lock chip (mono) */ .lock-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;color:var(--ink-2); background:var(--bg-2);border:1px solid var(--border);border-radius:8px;padding:4px 10px} .lock-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)} /* ================= v3 utilities — round 4 (appended; nothing above removed) ================= */ /* Stacked verdict bar — landing product mock + verdict wall aggregates */ .stackbar{display:flex;height:8px;border-radius:999px;overflow:hidden;background:var(--bg-2)} .stackbar i{display:block;height:100%} .stackbar .sv{background:var(--success)} .stackbar .sp{background:var(--warning)} .stackbar .su{background:var(--danger)} /* Guided activation — recommended action row inside empty states */ .empty-act{display:flex;justify-content:center;margin-top:14px} /* Mono status pill for app run rows */ .run-id{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)} /* ================= v3 utilities — round 5 (appended; nothing above removed) ================= */ /* Chapter spine — numbered narrative sections get a hairline top rule */ .chapter{border-top:1px solid var(--border)} /* Bento cell metric — one concrete number per cell */ .bento .cell .cell-metric{display:block;font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-top:14px} .bento .cell .cell-metric em{font-style:normal;font-size:12px;font-weight:500;color:var(--ink-3);letter-spacing:0} /* ICP subtitle under a pricing tier name */ .tier-icp{font-size:13px;color:var(--ink-3);margin:-2px 0 4px} /* Command box — mono command display (landing mock + app) */ .cmd-box{background:var(--bg-2);border:1px solid var(--border);color:var(--ink);border-radius:var(--r-sm);padding:11px 13px;font-family:var(--mono);font-size:13px;white-space:pre-wrap;word-break:break-word} /* Guardrail check line */ .guard-li{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ink-2);margin-top:7px} .guard-li .ok{color:var(--success);font-weight:700;flex:none} .guard-li .bad{color:var(--danger);font-weight:700;flex:none} /* Risk score bar */ .risk-bar{height:8px;border-radius:999px;background:var(--surface-alt);overflow:hidden;margin-top:6px} .risk-bar>div{height:100%;border-radius:999px} /* Danger left-border accent for plan / evidence cards */ .danger-safe{border-left:4px solid var(--success)} .danger-destructive{border-left:4px solid var(--warning)} .danger-critical{border-left:4px solid var(--danger)} /* Mini stat chip inside .product-frame mocks */ .m-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 13px} .m-stat .ms-label{display:block;font-size:11px;color:var(--ink-3);margin-bottom:2px} .m-stat .ms-num{display:block;font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}