/* ═══════════════════════════════════════════════════════════════════════════ Zyphv marketing — FORTRESS design system (single source of truth). Every marketing page imports this. Mirrors the app's fortress brand (AGENTS.md): Spectral display + IBM Plex Sans body; platinum/navy/heritage. (Display face history: Instrument Serif → Newsreader → Spectral (2026-07-02). Instrument read as vertically "stretched" at hero sizes; Spectral is the chosen elegant, well-proportioned editorial serif.) Load fonts in each page : ═══════════════════════════════════════════════════════════════════════════ */ :root{ --ink:#1E3A52; /* blue-tinted navy — primary text */ --surface:#F8F7F4; /* page surface */ --sand:#E2DFD6; /* warm ledger sand (section alt) */ --border:#CBC6BC; --platinum:#7A828C; /* accent + CTA */ --platinum-hover:#686F78; --signet:#365E86; --signet-hover:#2B4A6B; --signet-bg:#E4ECF4; --heritage:#5C4033; /* burgundy — sparse ≤3% */ --verified:#3D5C4A; /* forest */ --caution:#C45A1A; /* burnt amber */ --muted:#6B7280; --serif:'Spectral',Georgia,serif; --sans:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--sans); font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto} .wrap{max-width:1120px;margin:0 auto;padding:0 32px} .serif{font-family:var(--serif);font-weight:400;letter-spacing:.01em;line-height:1.05} .eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)} .mono{font-family:var(--mono)} .muted{color:var(--muted)} h1.hero{font-family:var(--serif);font-weight:400;font-size:clamp(2.9rem,6vw,4.6rem);line-height:1.08;letter-spacing:-.005em;margin:0} h2.disp{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,4vw,3.1rem);line-height:1.12;margin:0} .lede{font-size:clamp(1.15rem,1.6vw,1.4rem);color:#3f5165;max-width:44ch} /* Buttons — platinum, white label (institutional, not gold) */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.95rem 1.6rem;border-radius:12px;font-weight:500;font-size:1rem; transition:transform .15s ease,background .15s ease,border-color .15s ease;cursor:pointer} .btn-primary{background:var(--platinum);color:#fff} .btn-primary:hover{background:var(--platinum-hover);transform:translateY(-1px)} .btn-ghost{border:1px solid var(--border);background:transparent;color:var(--ink)} .btn-ghost:hover{background:#fff;transform:translateY(-1px)} .btn-sm{padding:.5rem 1.1rem;font-size:.9rem;border-radius:10px} /* Cards */ .card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:28px; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} .card:hover{transform:translateY(-2px);border-color:var(--platinum);box-shadow:0 8px 30px rgba(30,58,82,.06)} .card h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin:.2rem 0 .5rem} /* Nav */ nav.top{position:sticky;top:0;z-index:50;background:rgba(248,247,244,.82); backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--border)} .nav-in{height:72px;display:flex;align-items:center;justify-content:space-between} .brand{display:flex;align-items:center;gap:10px} .brand-mark{width:26px;height:26px;border-radius:7px;background:var(--platinum)} .brand-name{font-family:var(--serif);font-size:1.7rem;letter-spacing:-.01em} .nav-links{display:flex;align-items:center;gap:6px;font-size:.94rem} .nav-links a.link{padding:.5rem .8rem;color:#3f5165} .nav-links a.link:hover{color:var(--ink)} @media(max-width:820px){.nav-links a.link{display:none}} /* Pill / eyebrow chip */ .pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--border); border-radius:999px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);background:#fff} /* Trust strip */ .strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#fff} .strip-in{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;justify-content:center;padding:22px 0} .proof{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;color:#3f5165} .proof svg{width:16px;height:16px;color:var(--platinum)} /* Sections */ section{padding:80px 0} .sec-head{text-align:center;max-width:62ch;margin:0 auto 44px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} @media(max-width:820px){.grid-3,.grid-2{grid-template-columns:1fr}} .step-no{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;color:var(--platinum);margin-bottom:14px} /* Dark beat */ .dark{background:var(--ink);color:#EAE7E0} .dark .disp{color:#fff} .dark .muted{color:#a9b4c0} .dark .card{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.12)} .dark .card h3,.dark .card{color:#EAE7E0} /* Use-case rows */ .uc{display:grid;grid-template-columns:180px 1fr auto;gap:24px;align-items:center; padding:26px 0;border-top:1px solid var(--border)} .uc .who{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--platinum)} .uc h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin:0 0 4px} .uc .meta{font-size:.85rem;color:var(--muted);white-space:nowrap} @media(max-width:820px){.uc{grid-template-columns:1fr;gap:6px}.uc .meta{white-space:normal}} /* Prose (legal / long-form pages) */ .prose{max-width:72ch;margin:0 auto} .prose h2{font-family:var(--serif);font-weight:400;font-size:1.9rem;margin:2.2rem 0 .6rem} .prose h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;margin:1.6rem 0 .4rem} .prose p,.prose li{color:#3f5165} .prose ul{padding-left:1.1rem} .prose li{margin:.35rem 0} /* Scroll reveal */ .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} } /* Footer */ footer{border-top:1px solid var(--border);padding:34px 0;color:var(--muted);font-size:.9rem} .foot-in{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between} .foot-links{display:flex;flex-wrap:wrap;gap:22px} .foot-links a:hover{color:var(--ink)} @import url("./offering-accents.css");