/* ============================================================================
   Sapient Perception — shared page bones
   Version 1.0 · 2026-10-12

   The static pages carry these rules inline, in each page's <style> block.
   This file is the same set, copied from applications.html on main
   (d9facc97) with literal colors swapped for their tokens, so pages that are
   rendered by Cloudflare Functions (the data set pages) can load the site's
   look from one place instead of re-typing it.

   Load order: tokens.css → site.css → page stylesheet → sp-mobile.css.
   When the inline block on the static pages changes, change this file in the
   same branch. Longer term the static pages can load this file too and drop
   their inline copy; that is a separate branch.
   ========================================================================= */

:root{--font-logo:var(--font-brand)}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg-1);color:var(--text);
  font-family:var(--font-body);font-weight:300;
  font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:var(--bg-0)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--bg-0);padding:.6rem 1rem;z-index:100;font-weight:500}
.skip:focus{left:1rem;top:1rem}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 24px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}
[hidden]{display:none!important}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--font-body);font-weight:400;font-size:.95rem;
  padding:.75rem 1.6rem;border-radius:var(--radius-field);letter-spacing:.03em;
  border:1px solid var(--cta);background:var(--cta);color:var(--text-strong);cursor:pointer;
  transition:background .15s,border-color .15s;
}
.btn:hover{background:var(--cta-press);border-color:var(--cta-press);text-decoration:none}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn-ghost:hover{background:transparent;border-color:var(--accent);color:var(--accent)}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(7,31,33,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:2rem;height:68px}
.brand{display:flex;align-items:center;gap:.65rem;color:var(--text-strong)}
.brand:hover{text-decoration:none}
.brand img{height:30px;width:auto;display:block}
nav ul{display:flex;gap:1.6rem;list-style:none;margin-left:auto;align-items:center}
nav a{color:var(--text);font-size:.92rem;font-weight:400}
nav a:hover{color:var(--accent);text-decoration:none}
nav a[aria-current]{color:var(--accent)}
.nav .btn{padding:.5rem 1.15rem;font-size:.85rem}
.menu-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:6px;color:var(--text);padding:.45rem .7rem;font-family:var(--font-display);font-size:.85rem;cursor:pointer}
@media (max-width:900px){
  nav ul{
    display:none;position:absolute;top:68px;left:0;right:0;
    background:var(--bg-0);border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:.5rem 0;
  }
  nav ul.open{display:flex}
  nav ul li{width:100%}
  nav ul a{display:block;padding:.85rem 24px}
  .menu-toggle{display:block}
}

/* ---------- nav dropdown ---------- */
.has-sub{position:relative}
.has-sub>a::after{content:"";display:inline-block;margin-left:.45rem;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.sub{list-style:none;position:absolute;top:100%;left:-1rem;min-width:280px;background:var(--bg-0);border:1px solid var(--line);border-radius:8px;padding:.5rem 0;display:none;z-index:60;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:block}
.sub li{width:100%}
.sub a{display:block;padding:.65rem 1.2rem;color:var(--text);font-size:.9rem}
.sub a:hover{background:var(--bg-1);color:var(--accent);text-decoration:none}
.sub a small{display:block;font-family:var(--font-display);font-weight:400;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);margin-bottom:.15rem}
.sub .sub-overview{border-bottom:1px solid var(--line);margin-bottom:.35rem;padding-bottom:.35rem}
@media (max-width:900px){
  .has-sub>a::after{display:none}
  .sub{position:static;display:block;border:none;border-radius:0;box-shadow:none;padding:0 0 .3rem;background:transparent;min-width:0}
  .sub a{padding:.55rem 24px .55rem 44px}
  .sub .sub-overview{border-bottom:none;margin:0;padding-bottom:0}
}

/* ---------- shared section bones ---------- */
section{padding:6rem 0}
section.alt{background:var(--bg-0);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eyebrow{
  font-family:var(--font-display);font-weight:400;font-size:.78rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent-2);
  display:flex;align-items:center;gap:.75rem;margin-bottom:1.3rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent-2);flex:none}
h1{
  font-family:var(--font-display);font-weight:400;color:var(--text-strong);
  font-size:clamp(2.3rem,5.4vw,3.7rem);line-height:1.1;
}
h2{
  font-family:var(--font-display);font-weight:400;color:var(--text-strong);
  font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.2;margin-bottom:1rem;max-width:26ch;
}
.section-head{margin-bottom:3.2rem}
.section-head p{max-width:64ch;color:var(--muted)}

/* ---------- product-page hero ---------- */
.pp-hero{background:var(--bg-0);border-bottom:1px solid var(--line);padding-top:0;padding-bottom:0}
.pp-hero .wrap{padding:clamp(2.75rem,7.7vw,6.9rem) 24px 3.5rem;max-width:840px}
.pp-hero .wrap.ph-grid{max-width:var(--measure);display:grid;grid-template-columns:1.06fr .94fr;gap:3.4rem;align-items:center;padding-bottom:2.6rem}
@media (max-width:980px){.pp-hero .wrap.ph-grid{grid-template-columns:1fr;gap:2rem}}
@media (max-width:760px){.pp-hero .wrap{padding-left:18px;padding-right:18px}}
.ph-copy,.ph-fig{min-width:0}
.pp-hero h1{font-size:clamp(2rem,4.6vw,3rem)}
.pp-hero p.lede{margin:1.4rem 0 2rem;font-size:1.08rem;color:var(--text);max-width:60ch}
.pp-hero .hero-ctas{display:flex;gap:1rem;flex-wrap:wrap}
.pp-hero .hero-ctas .btn-ghost{border-color:var(--accent);color:var(--accent)}

/* three-up hairline strip */
.usps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;margin-top:3rem}
@media (max-width:820px){.usps{grid-template-columns:1fr}}
.usps li{background:var(--bg-0);padding:1.4rem 1.5rem}
.usps b{display:block;font-family:var(--font-display);font-weight:400;font-size:.98rem;color:var(--accent);letter-spacing:.02em}
.usps span{display:block;color:var(--muted);font-size:.86rem;line-height:1.55;margin-top:.35rem}

/* closing call to action */
.cta-box{border:1px solid var(--line);border-radius:var(--radius-card);background:linear-gradient(160deg,var(--panel-2) 0%,var(--bg-0) 90%);padding:3.2rem;display:flex;justify-content:space-between;align-items:center;gap:2.5rem;flex-wrap:wrap}
.cta-box p{color:var(--text);max-width:46ch}
.cta-box .actions{display:flex;gap:1rem;flex-wrap:wrap}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--bg-0);padding:3rem 0 2.4rem}
.foot{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-start}
.foot .brand img{height:26px}
.foot-links{display:flex;gap:1.6rem;list-style:none;flex-wrap:wrap}
.foot-links a{color:var(--text);font-size:.9rem}
.foot-meta{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot-place{color:var(--muted);font-size:.85rem;margin-top:.8rem}

/* ---------- cookie notice ---------- */
#sp-consent{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:9999;background:var(--bg-1);border:1px solid var(--steel);border-radius:8px;padding:1rem 1.2rem;box-shadow:0 6px 20px rgba(0,0,0,.4);max-width:640px;margin:0 auto;font-family:var(--font-body);color:var(--text);font-size:.9rem;line-height:1.6}
#sp-consent p{margin:0 0 .8rem;color:var(--muted)}
#sp-consent p:first-child{margin-bottom:.6rem;font-family:var(--font-display);font-weight:500;letter-spacing:.02em;color:var(--text)}
#sp-consent button{appearance:none;border:1px solid var(--accent);background:var(--accent);color:var(--bg-0);padding:.55rem 1rem;border-radius:6px;font-family:var(--font-display);letter-spacing:.02em;cursor:pointer}

/* ---------- form fields (as on the briefing page) ---------- */
.lp-form-card{border:1px solid var(--line);border-radius:var(--radius-card);background:var(--panel);padding:2.2rem 2.2rem 2.4rem;position:sticky;top:92px}
@media (max-width:960px){.lp-form-card{position:static}}
@media (max-width:520px){.lp-form-card{padding:1.6rem 1.25rem 1.8rem}}
.lp-form-card h2{font-size:1.35rem;letter-spacing:.02em;margin-bottom:.5rem}
.form-intro{color:var(--muted);font-size:.92rem;margin-bottom:1.6rem}
.field{margin-bottom:1.15rem}
.field label{display:block;font-family:var(--font-display);font-weight:400;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.field label .req{color:var(--accent-2)}
.field input,.field select{width:100%;background:var(--bg-0);border:1px solid var(--line);border-radius:var(--radius-field);color:var(--text);font-family:var(--font-body);font-weight:300;font-size:.98rem;padding:.7rem .85rem;line-height:1.5;min-height:44px}
.field input:hover,.field select:hover{border-color:var(--muted)}
.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.field select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 1.25em,calc(100% - 13px) 1.25em;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.4rem}
.field .hint{font-size:.8rem;color:var(--muted);margin-top:.4rem}
.field .err{font-size:.82rem;color:var(--legacy-ff8a5c);margin-top:.4rem;display:none}
.field.invalid input,.field.invalid select{border-color:var(--legacy-c8501f)}
.field.invalid .err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-actions{margin-top:1.4rem;display:flex;flex-direction:column;gap:.7rem}
.lp-form-card .btn{width:100%;text-align:center;padding:.85rem 1.6rem}
.form-foot{margin-top:1.2rem;font-size:.8rem;color:var(--muted)}
.form-status{margin-top:1.2rem;font-size:.92rem;display:none;border-radius:var(--radius-field);padding:.9rem 1rem;line-height:1.55}
.form-status.show{display:block}
.form-status.ok{background:rgba(19,252,194,.06);border:1px solid var(--accent);color:var(--text-strong)}
.form-status.fail{background:rgba(200,50,0,.07);border:1px solid var(--cta-press);color:var(--text)}