/* PRR.AI shared site stylesheet. Extracted from the single-file SEO demo
   and shared across every static page so styles never drift between
   pages. Router-only rules (.view, .toast) have been removed: they had
   no purpose once each page became its own real URL. */
:root{
  --navy:#0E3E6B; --navy-deep:#0A3157; --accent:#186CB4; --accent-bright:#48C0F0;
  --grey:#F4F8FB; --tint:#EAF6FD; --white:#fff; --ink:#0E3E6B; --muted:#5B7C99;
  --line:rgba(14,62,107,.14); --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{display:block;font-family:'IBM Plex Mono',monospace;font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
a{color:inherit;text-decoration:none}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--navy);padding:12px 18px;z-index:200;border-radius:0 0 8px 0;font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--accent-bright);outline-offset:3px}
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.95rem;padding:.85em 1.5em;border-radius:8px;transition:transform .18s ease,background .18s ease,box-shadow .18s ease;cursor:pointer;border:1px solid transparent}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 20px -6px rgba(39,111,177,.6)}
.btn-primary:hover{background:var(--accent-bright);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(255,255,255,.28);color:#fff}
.btn-ghost:hover{border-color:#fff;transform:translateY(-2px)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-deep);transform:translateY(-2px)}

/* NAV */
header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:18px}
/* Defensive: any other <nav> on the page is a plain block. Without this,
   a bare `nav` rule silently reflows the footer columns. */
footer nav,.crumb{display:block;height:auto}
.logo{display:flex;align-items:center}
.logo img{height:38px;width:auto;display:block}
.footlogo{background:#fff;padding:8px 12px;border-radius:10px;display:inline-flex}
.footlogo img{height:34px}
.navlinks{display:flex;gap:20px;align-items:center;font-size:.92rem;font-weight:500}
.navlinks a{color:var(--muted);transition:color .15s;white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent}
.navlinks a:hover,.navlinks a:focus-visible{color:var(--navy)}
.navlinks a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--accent)}
.menu-btn{display:none;background:none;border:none;cursor:pointer;padding:6px}
.mobilemenu{display:none}
.mobilemenu[data-open="true"]{display:block;border-top:1px solid var(--line);background:#fff;max-height:70vh;overflow-y:auto}
.mobilemenu a{display:block;padding:13px 28px;color:var(--navy);font-weight:500;border-bottom:1px solid var(--line)}
.mobilemenu a[aria-current="page"]{color:var(--accent);font-weight:600}
.mm-h{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);padding:15px 28px 7px;margin:0;font-weight:500;background:var(--tint);border-bottom:1px solid var(--line)}

/* SOLUTIONS DROPDOWN */
.hasdrop{position:relative}
.dropbtn{display:inline-flex;align-items:center;gap:.45em;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font:inherit;color:var(--muted);padding:4px 0;transition:color .15s;white-space:nowrap}
.dropbtn:hover,.dropbtn:focus-visible,.dropbtn[aria-expanded="true"]{color:var(--navy)}
.dropbtn.active{color:var(--navy);border-bottom-color:var(--accent)}
.dropbtn .chev{transition:transform .18s;flex:none}
.dropbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.dropmenu{position:absolute;top:calc(100% + 15px);left:-20px;z-index:120;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 28px 56px -22px rgba(8,39,72,.3);padding:14px;min-width:296px}
/* Bridges the 15px gap above the menu. Without it that gap is hoverable dead
   space belonging to neither the button nor the menu, so moving the cursor down
   from "Solutions" fires mouseleave on .hasdrop and the menu shuts before it can
   be reached. The strip is a child of .dropmenu, so hovering it still counts as
   hovering .hasdrop. It only exists while the menu is open, since [hidden]
   removes the whole element. Keep this height in sync with the 15px above. */
.dropmenu::before{content:"";position:absolute;left:0;right:0;top:-15px;height:15px}
.droplist{display:flex;flex-direction:column;gap:1px}
.droplist a{display:block;padding:9px 12px;border-radius:9px;border-bottom:none;white-space:nowrap;transition:background .15s}
.droplist a:hover,.droplist a:focus-visible,.droplist a[aria-current="page"]{background:var(--tint)}
.droplist .dt{display:block;color:var(--navy);font-weight:600;font-size:.93rem}
.droplist .dd{display:block;color:var(--muted);font-size:.8rem;font-weight:400;margin-top:1px}
.navlinks .drop-foot{display:block;margin:12px -14px -14px;padding:13px 14px;border-top:1px solid var(--line);border-bottom:none;background:var(--tint);border-radius:0 0 13px 13px;color:var(--navy);font-weight:600;font-size:.87rem;white-space:nowrap}
.navlinks .drop-foot:hover,.navlinks .drop-foot:focus-visible{color:var(--accent)}
.drop-foot span{display:inline-block;transition:transform .18s}
.drop-foot:hover span{transform:translateX(4px)}

/* PLACEHOLDER NOTICE (pages awaiting real copy) */
.placeholder{background:#fff8e6;border:1px solid #f0d894;border-left:4px solid #e0a91c;border-radius:12px;padding:22px 24px;margin-bottom:10px}
.placeholder .ph-tag{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:#8a6a10;font-weight:600;margin-bottom:8px}
.placeholder p{color:#6b5411;font-size:.94rem;margin:0;line-height:1.6}
.placeholder p b{color:#5a4506}

/* HERO (home) */
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-top:74px;padding-bottom:84px;position:relative;z-index:2}
.hero .tagline{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;color:var(--accent-bright);margin:.75em 0 .5em}
.hero h1{font-size:clamp(1.85rem,3.4vw,2.75rem);font-weight:700;line-height:1.14;letter-spacing:-.025em;margin:0 0 .75em;max-width:24ch}
.hero p.lead{font-size:1.06rem;color:#c3d3e4;max-width:54ch;margin-bottom:1.9em}
.hero p.lead b{color:#fff;font-weight:600}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.parent-tag{margin-top:2.2em;font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.14em;color:#7b95b2;text-transform:uppercase;line-height:2}
.parent-tag b{color:#c3d3e4;font-weight:500}
/* Hero screenshot. Replaces the vector reticle that stood here while there was
   no product imagery. Sits above .hero-glow, which backlights it. */
.heroshot{margin:0 0 0 auto;width:100%;max-width:540px;position:relative;z-index:2}
.heroshot img{display:block;width:100%;height:auto;border-radius:13px;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 26px 60px rgba(0,0,0,.45)}
.heroshot figcaption{margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:.71rem;
  letter-spacing:.11em;text-transform:uppercase;color:#7b95b2;line-height:1.7}
.heroshot figcaption b{color:var(--accent-bright);font-weight:500}

.reticle{position:relative;width:100%;aspect-ratio:1/1;max-width:440px;margin-left:auto}
.reticle svg{width:100%;height:100%;overflow:visible}
.grid-line{stroke:rgba(255,255,255,.09);stroke-width:1}
.scan-ring{fill:none;stroke:var(--accent-bright);stroke-width:1.4;opacity:.5}
.node{fill:var(--accent-bright)}
.node-halo{fill:none;stroke:var(--accent-bright);stroke-width:1.2}
.crosshair{stroke:rgba(255,255,255,.4);stroke-width:1}
.tissue{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.5}
.hero-glow{position:absolute;right:-8%;top:20%;width:520px;height:520px;background:radial-gradient(circle,rgba(39,111,177,.4),transparent 62%);filter:blur(20px);z-index:1}

/* PAGE HERO (inner pages) */
.phero{background:var(--navy);color:#fff;padding:52px 0 68px;position:relative;overflow:hidden}
.phero::after{content:"";position:absolute;right:-10%;top:-30%;width:620px;height:620px;background:radial-gradient(circle,rgba(39,111,177,.42),transparent 62%);filter:blur(22px)}
.phero .wrap{position:relative;z-index:2}
.crumb{font-size:.85rem;color:#8ba3bd;margin-bottom:26px}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5em;align-items:center}
.crumb a{color:#a9bdd4}
.crumb a:hover{color:#fff}
.crumb li[aria-current]{color:#c3d3e4}
.phero h1{font-size:clamp(1.8rem,3.6vw,2.9rem);font-weight:700;letter-spacing:-.03em;line-height:1.12;margin:.35em 0 .5em;max-width:30ch}
.phero .kicker{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:800;color:var(--accent-bright);letter-spacing:-.02em;line-height:1.2;max-width:34ch}
.phero .ptarget{margin-top:1.6em;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#7b95b2}
.phero .ptarget b{color:var(--accent-bright);font-weight:500}
.phero .hero-cta{margin-top:2em}

/* TRUST STRIP */
.trust{background:var(--navy-deep);padding:26px 0;border-top:1px solid rgba(255,255,255,.06)}
.trust .wrap{display:flex;align-items:center;gap:34px;flex-wrap:wrap;justify-content:center}
.trust p.lbl{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#7b95b2;margin:0}
.trust ul{list-style:none;display:flex;gap:34px;flex-wrap:wrap;justify-content:center;margin:0}
.trust li{color:#a9bdd4;font-weight:600;font-size:.95rem;opacity:.9}

/* SECTIONS */
section{padding:88px 0}
section.tight{padding:64px 0}
.sec-head{max-width:700px;margin-bottom:44px}
.sec-head h2{font-size:clamp(1.75rem,3.2vw,2.5rem);font-weight:700;letter-spacing:-.03em;line-height:1.12;margin:.4em 0}
.sec-head p{color:var(--muted);font-size:1.08rem}
.grey{background:var(--grey)}

/* ANSWER-FIRST BLOCK */
.answer{background:var(--tint);border:1px solid rgba(24,108,180,.18);border-radius:16px;padding:30px 34px;margin-bottom:42px;max-width:880px}
.answer p{font-size:1.05rem;color:var(--navy)}
.answer p + p{margin-top:.9em}
.answer.solo{margin:0 auto}

/* CARDS (2-up) */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:34px;transition:transform .22s ease,box-shadow .22s ease,border-color .22s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -24px rgba(8,39,72,.28);border-color:transparent}
.card .ico{width:46px;height:46px;border-radius:11px;background:var(--tint);display:grid;place-items:center;margin-bottom:20px;color:var(--accent);flex:none}
.card h3{font-size:1.28rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.3em}
.card .kw{font-family:'IBM Plex Mono',monospace;font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:1.1em}
.card .flow{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--accent);margin-bottom:1em;line-height:1.7}
.card .flow .step{white-space:nowrap}
.card p{color:var(--muted);font-size:.97rem}
.card p + p{margin-top:.7em}
.card p b{color:var(--navy);font-weight:600}
.facts{list-style:none;margin:18px 0 0;font-size:.91rem}
.facts li{position:relative;padding-left:20px;margin-bottom:8px;color:var(--navy)}
.facts li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--accent-bright)}
.facts li b{font-weight:600}
.reg{margin-top:16px;font-size:.83rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:12px}
.reg b{color:var(--navy);font-weight:600}
.more{display:inline-flex;align-items:center;gap:.4em;margin-top:20px;color:var(--navy);font-weight:600;font-size:.92rem}
.more span{transition:transform .18s}
.card:hover .more span,.prod:hover .more span{transform:translateX(4px)}
.subnav{list-style:none;margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.subnav a{display:inline-block;font-size:.81rem;font-weight:500;color:var(--accent);background:var(--tint);padding:.42em .8em;border-radius:99px;transition:background .15s,color .15s}
.subnav a:hover,.subnav a:focus-visible{background:var(--accent);color:#fff}

/* CAPABILITY GRID (inner pages) */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.caps.two{grid-template-columns:repeat(2,1fr)}
.cap{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px}
.grey .cap{background:#fff}
.cap .num{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;color:var(--accent);margin-bottom:12px}
.cap h3{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.4em}
.cap p{color:var(--muted);font-size:.92rem;line-height:1.55}

/* MODULE BLOCK (labelled group of capabilities) */
.mod{margin-bottom:52px}
.mod:last-child{margin-bottom:0}
.mod > h2{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.25em}
.mod > p.modlead{color:var(--muted);font-size:1rem;max-width:70ch;margin-bottom:24px}

/* FEATURED PRODUCTS */
.featured{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.prod{border-radius:16px;padding:32px;color:#fff;position:relative;overflow:hidden;min-height:228px;display:flex;flex-direction:column;background:var(--navy);transition:transform .22s ease}
.prod:hover{transform:translateY(-4px)}
.prod::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 0%,rgba(39,111,177,.55),transparent 60%);opacity:.9}
.prod > *{position:relative}
.prod .tag{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-bright);margin-bottom:auto}
.prod h3{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin:1em 0 .35em}
.prod p{color:#c3d3e4;font-size:.94rem}
.prod .more{color:var(--accent-bright);font-size:.9rem}
.prod .cite{margin-top:14px;font-size:.79rem;color:#8ba3bd;line-height:1.5}
.prod .cite a{text-decoration:underline;text-underline-offset:3px}

/* LINK LANES */
.lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.lane{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px}
.lane h3{font-size:1.12rem;font-weight:700;margin-bottom:.3em}
.lane > p{color:var(--muted);font-size:.92rem;margin-bottom:16px}
.lane ul{list-style:none}
.lane li{border-top:1px solid var(--line)}
.lane li a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;font-size:.93rem;font-weight:500;color:var(--navy);transition:color .15s}
.lane li a:hover,.lane li a:focus-visible{color:var(--accent)}
.lane li a em{font-style:normal;color:var(--accent);opacity:0;transition:opacity .15s,transform .15s}
.lane li a:hover em,.lane li a:focus-visible em{opacity:1;transform:translateX(3px)}

/* WHY GRID */
.why{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.why .item .ico{width:44px;height:44px;border-radius:11px;background:var(--navy);color:#fff;display:grid;place-items:center;margin-bottom:16px}
.why .item h3{font-size:1.01rem;font-weight:700;margin-bottom:.4em}
.why .item p{color:var(--muted);font-size:.89rem;line-height:1.55}

/* METRICS */
.metrics{background:var(--navy);color:#fff}
.metrics .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.metric .num{font-family:'IBM Plex Mono',monospace;font-size:clamp(1.5rem,2.7vw,2.2rem);font-weight:600;color:var(--accent-bright);line-height:1.1}
.metric .lbl{color:#a9bdd4;font-size:.91rem;margin-top:.7em}

/* PROOF / RESEARCH CITATION */
.proof{background:var(--navy-deep);color:#c3d3e4;border-radius:18px;padding:42px}
.proof h2{color:#fff;font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:700;letter-spacing:-.02em;margin:.4em 0 .6em;max-width:30ch}
.proof p{font-size:.99rem;max-width:78ch}
.proof p + p{margin-top:.8em}
.proof ul{list-style:none;margin-top:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 28px}
.proof li{position:relative;padding-left:22px;font-size:.94rem}
.proof li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:2px;background:var(--accent-bright)}
.proof .src{margin-top:22px;font-size:.83rem;color:#8ba3bd}
.proof .src a{color:var(--accent-bright);text-decoration:underline;text-underline-offset:3px}

/* FAQ */
.faq{max-width:860px}
.faq .qa{border-top:1px solid var(--line);padding:26px 0}
.faq .qa:last-child{border-bottom:1px solid var(--line)}
.faq h3{font-size:1.11rem;font-weight:700;margin-bottom:.5em}
.faq p{color:var(--muted);font-size:.98rem}
.faq p + p{margin-top:.6em}
.faq p b{color:var(--navy);font-weight:600}
.faq a.inline{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* EDITORIAL */
.editorial{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;background:var(--navy-deep);color:#c3d3e4;border-radius:18px;padding:46px}
.editorial h2{color:#fff;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:.4em 0 .6em}
.editorial ul{list-style:none;margin-top:4px}
.editorial li{position:relative;padding-left:22px;margin-bottom:13px;font-size:.95rem}
.editorial li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:2px;background:var(--accent-bright)}
.editorial .byline{margin-top:24px;font-family:'IBM Plex Mono',monospace;font-size:.73rem;letter-spacing:.12em;text-transform:uppercase;color:#7b95b2;line-height:2}
.editorial .byline b{color:#c3d3e4;font-weight:500}
.team{list-style:none;margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.team li{background:rgba(255,255,255,.08);border-radius:99px;padding:.4em .85em;font-size:.85rem;color:#c3d3e4;padding-left:.85em}
.team li::before{display:none}

/* CTA */
.ctaband{background:var(--grey);text-align:center}
.ctaband h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:800;letter-spacing:-.03em;line-height:1.08;max-width:22ch;margin:0 auto .3em}
.ctaband p{color:var(--muted);font-size:1.12rem;margin:0 auto 2em;max-width:58ch}

/* CONTACT PAGE FORM */
.contact-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:start}
.contact-form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:34px}
.field{margin-bottom:20px}
.field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.4em;color:var(--navy)}
.field input,.field textarea{width:100%;font:inherit;padding:.75em .9em;border:1px solid var(--line);border-radius:8px;background:var(--grey);color:var(--ink)}
.field input:focus,.field textarea:focus{outline:3px solid var(--accent-bright);outline-offset:1px;background:#fff}
.field [aria-invalid="true"]{border-color:#B02A2A;background:#FFF4F4}
.field textarea{resize:vertical;min-height:140px}
.contact-aside{background:var(--tint);border:1px solid rgba(24,108,180,.18);border-radius:16px;padding:30px 34px}
.contact-aside h3{font-size:1.05rem;font-weight:700;margin-bottom:.6em;color:var(--navy)}
.contact-aside p{color:var(--muted);font-size:.95rem}
.contact-aside p+p{margin-top:.8em}
.contact-aside a.inline{color:var(--accent);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.formnote{font-size:.82rem;color:var(--muted);margin-top:10px}
.field-note{font-size:.82rem;color:var(--muted);margin-top:.55em;line-height:1.55}
.field-note b{color:var(--navy);font-weight:600}
/* Honeypot: off-canvas rather than display:none, since some bots skip fields
   that are not rendered at all. aria-hidden + tabindex="-1" in the markup keep
   it away from assistive tech and the tab order. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formstatus{margin-top:14px;padding:12px 14px;border-radius:9px;font-size:.88rem;line-height:1.55;border:1px solid transparent}
.formstatus.is-ok{background:var(--tint);border-color:rgba(24,108,180,.3);color:var(--navy);font-weight:600}
.formstatus.is-error{background:#FFF4F4;border-color:rgba(176,42,42,.28);color:#8E2020;font-weight:600}
.formstatus.is-busy{background:var(--grey);border-color:var(--line);color:var(--muted)}

/* FOOTER */
footer{background:var(--navy-deep);color:#a9bdd4;padding:62px 0 34px}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:28px;padding-bottom:42px;border-bottom:1px solid rgba(255,255,255,.08)}
footer .logo{color:#fff}
.foot-top p{font-size:.94rem;margin-top:16px;max-width:32ch;color:#8ba3bd}
.foot-col .foot-h{font-family:'IBM Plex Mono',monospace;color:#7b95b2;font-size:.71rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px;font-weight:500}
.foot-col ul{list-style:none}
.foot-col a{display:block;color:#a9bdd4;font-size:.92rem;margin-bottom:11px;transition:color .15s;overflow-wrap:break-word}
.foot-col a:hover,.foot-col a:focus-visible{color:#fff}
.foot-bottom{padding-top:26px;font-size:.84rem;color:#6f88a4}
.fb-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 20px}
.fb-tag{font-family:'IBM Plex Mono',monospace;letter-spacing:.1em;white-space:nowrap}
.foot-bottom .disamb{margin-top:14px;max-width:84ch;color:#5f7794;line-height:1.55}

/* PARTNER LOGOS
   Sits under the trust strip. Logos are supplied at ~190px square on a white
   field, so they get a white plate rather than sitting on the navy — a
   transparent PNG would be invisible against it and these are not SVGs. */
.logos{background:var(--navy-deep);padding:0 0 34px}
.logos .wrap{text-align:center}
.logos p.lbl{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:#7b95b2;margin:0 0 20px}
.logos ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:0}
.logos li{background:#fff;border-radius:12px;width:112px;height:72px;display:flex;
  align-items:center;justify-content:center;padding:11px}
.logos img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  /* These are raster logos shown well below their native size; without this they
     alias badly on non-retina displays. */
  image-rendering:auto}

/* SCREENSHOTS
   Product UI captures. The frame reads as a window chrome so a flat PNG does
   not look like it is floating loose in the page. */
.shot{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.shot .bar{display:flex;gap:6px;padding:11px 14px;background:var(--grey);border-bottom:1px solid var(--line)}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:rgba(14,62,107,.18)}
.shot img,.shot video{display:block;width:100%;height:auto}
.shot figcaption{padding:16px 20px;font-size:.92rem;color:var(--muted);border-top:1px solid var(--line)}
.shot figcaption b{color:var(--navy);font-weight:600}
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
/* Full width, matching .cards and .caps. An earlier max-width + auto margin
   centred this inside .wrap while every heading and paragraph stayed hard left,
   so the screenshot sat visibly indented from the text above it. */
.shots.one{grid-template-columns:1fr}
.shot.plain{border:0;border-radius:14px}
.shot.plain img{border-radius:14px}

/* The hero clip is a 21MB source file. preload="none" means it costs nothing
   until the visitor presses play; it must not autoplay at this weight. */
.shot video{background:#000}

/* ARTICLE (insights posts and case studies)
   Left-aligned, not centred. The measure is capped for readability the same way
   .sec-head caps at 700px, but it has to start on the same left edge as the
   page hero above it — centring it put the body text 180px inboard of its own
   headline. */
.article{max-width:760px}
.article h2{font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:700;letter-spacing:-.025em;
  line-height:1.16;margin:1.9em 0 .55em;color:var(--navy)}
.article h3{font-size:1.14rem;font-weight:700;margin:1.7em 0 .5em;color:var(--navy)}
.article p{color:#33536f;font-size:1.03rem;line-height:1.72}
.article p + p{margin-top:1.05em}
.article ul,.article ol{margin:1.05em 0 1.05em 1.1em;color:#33536f;font-size:1.03rem;line-height:1.72}
.article li{margin-bottom:.5em}
.article li::marker{color:var(--accent)}
.article a.inline{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.article figure{margin:2.2em 0}
.article figure img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px}
.article figcaption{margin-top:.8em;font-size:.88rem;color:var(--muted);line-height:1.6}
.article .meta{font-family:'IBM Plex Mono',monospace;font-size:.73rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:2em}
.article .lead-in{font-size:1.14rem;line-height:1.65;color:var(--navy);font-weight:500}

/* Numbered result callout inside an article. */
.resultgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:2em 0}
.resultgrid div{background:var(--tint);border:1px solid rgba(24,108,180,.18);border-radius:14px;padding:24px}
.resultgrid b{display:block;font-size:1.9rem;font-weight:800;letter-spacing:-.03em;color:var(--navy);line-height:1}
.resultgrid span{display:block;margin-top:.5em;font-size:.9rem;color:var(--muted)}

/* References block. Small, dense, and visually subordinate to the body. */
.refs{margin-top:2.6em;padding-top:1.6em;border-top:1px solid var(--line)}
.refs h2{font-size:1rem;margin:0 0 .9em;text-transform:uppercase;letter-spacing:.1em}
.refs ol{margin-left:1.1em}
.refs li{font-size:.88rem;color:var(--muted);line-height:1.6;margin-bottom:.6em}

/* Index of articles / case studies. */
.postlist{display:grid;gap:18px;max-width:860px}
.postlist a{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 30px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s}
.postlist a:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(14,62,107,.09);border-color:rgba(24,108,180,.4)}
.postlist h3{font-size:1.2rem;font-weight:700;color:var(--navy);margin-bottom:.4em;letter-spacing:-.02em}
.postlist p{color:var(--muted);font-size:.96rem}
.postlist .meta{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.8em}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* RESPONSIVE */
@media(max-width:1180px){ .navlinks{gap:14px;font-size:.86rem} }
@media(max-width:1040px){
  .lanes{grid-template-columns:1fr}
  .caps{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .contact-layout{grid-template-columns:1fr}
}
@media(max-width:920px){
  .hero .wrap{grid-template-columns:1fr;gap:30px}
  .reticle{max-width:340px;margin:0 auto}
  .heroshot{max-width:100%;margin:0 auto}
  .cards,.featured,.caps,.caps.two,.shots,.resultgrid{grid-template-columns:1fr}
  .why{grid-template-columns:repeat(2,1fr)}
  .metrics .wrap{grid-template-columns:repeat(2,1fr)}
  .editorial,.proof{grid-template-columns:1fr;padding:32px}
  .proof ul{grid-template-columns:1fr}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .navlinks{display:none}
  .menu-btn{display:block}
}
@media(max-width:520px){
  section{padding:56px 0}
  .why,.foot-top{grid-template-columns:1fr}
  .trust .wrap,.trust ul{gap:18px}
  .logos li{width:92px;height:60px}
  .article figure{margin:1.6em 0}
  .answer{padding:24px}
  nav > .btn-primary{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}