/* ===============================================================
 * DORADUS LABS  SITE STYLESHEET (2026 redesign)
 * ---------------------------------------------------------------
 * One shared stylesheet for every public page. Brand tokens match
 * data/theme.json so the admin theme editor stays authoritative.
 * Pure ASCII throughout. No icon fonts, no decorative Unicode.
 * =============================================================== */

/* ---------- Self-hosted fonts ----------
   Latin woff2 subsets vendored from the Fontsource builds; no
   third-party font CDN is contacted. Keep family names in sync
   with the token variables below. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/fraunces-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/fraunces-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/manrope-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/manrope-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/manrope-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2')}

:root{
  color-scheme:dark;
  --ink:#06101e;
  --ink-2:#0a172a;
  --midnight:#0e1d35;
  --steel:#15243d;
  --hairline:rgba(59,191,230,.18);
  --hairline-cool:rgba(140,170,210,.10);
  --accent:#3bbfe6;
  --accent-bright:#6dd9f5;
  --accent-deep:#1f8fb8;
  --white:#fafaf6;
  --muted:#8392ab;
  --muted-dim:#5b6a83;
  --green:#3ed598;
  --amber:#f5b942;
  --alert:#ff7a59;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --container:1240px;
  --radius:2px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-padding-top:88px}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--white);
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent-deep);color:var(--white)}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--accent-bright)}

.container{max-width:var(--container);margin:0 auto;padding:0 1.5rem}
.section{padding:6rem 0}
.section-alt{background:var(--ink-2)}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5.5vw,4.2rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem)}
h4{font-size:1.1rem}
em{color:var(--accent);font-style:italic}
.kicker{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:1.1rem;
}
.lede{font-size:1.15rem;color:var(--muted);max-width:46rem;margin-top:1.2rem}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--sans);font-weight:600;font-size:.92rem;
  padding:.85rem 1.6rem;border:1px solid transparent;border-radius:var(--radius);
  cursor:pointer;transition:all .22s ease;text-decoration:none;line-height:1;
}
.btn-primary{background:var(--accent);color:var(--ink)}
.btn-primary:hover{background:var(--accent-bright);color:var(--ink);transform:translateY(-1px)}
.btn-ghost{border-color:var(--hairline);color:var(--white);background:transparent}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-bright)}
.btn-block{width:100%;justify-content:center}
.btn .chev{
  width:.5rem;height:.5rem;border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg);transition:transform .22s ease;flex:none;
}
.btn:hover .chev{transform:rotate(45deg) translate(2px,-2px)}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(6,16,30,.85);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline-cool);
  transition:background .3s ease;
}
.nav-inner{
  max-width:var(--container);margin:0 auto;padding:0 1.5rem;
  height:72px;display:flex;align-items:center;gap:2.2rem;
}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--white);font-weight:600;font-size:1.05rem}
.brand img{height:34px;width:auto}
.brand em{font-style:italic;color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:1.7rem;margin-left:auto}
.nav-links a{color:var(--muted);font-size:.9rem;font-weight:500}
.nav-links a:hover,.nav-links a.active{color:var(--white)}
.nav-cta{margin-left:.4rem}
.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;margin-left:auto;
  flex-direction:column;gap:5px;padding:6px;
}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--white);transition:all .25s ease}

/* Products dropdown */
.nav-drop{position:relative}
.nav-drop > a::after{
  content:"";display:inline-block;margin-left:.4rem;width:.38rem;height:.38rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
}
.nav-drop-menu{
  position:absolute;top:calc(100% + 14px);left:-1rem;min-width:270px;
  background:var(--ink-2);border:1px solid var(--hairline-cool);border-radius:var(--radius);
  padding:.5rem;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:all .22s ease;box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{
  opacity:1;visibility:visible;transform:translateY(0);
}
.nav-drop-menu a{
  display:block;padding:.65rem .8rem;border-radius:var(--radius);color:var(--white);
}
.nav-drop-menu a:hover{background:var(--midnight)}
.nav-drop-menu a small{display:block;color:var(--muted);font-size:.76rem;font-weight:400;margin-top:.1rem}

@media(max-width:960px){
  .nav-links{
    position:fixed;top:72px;left:0;right:0;bottom:0;
    background:var(--ink);flex-direction:column;align-items:flex-start;
    padding:2rem 1.5rem;gap:1.3rem;transform:translateX(100%);
    transition:transform .3s ease;overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0)}
  .nav-links a{font-size:1.1rem}
  .nav-toggle{display:flex}
  .nav-cta{margin-left:0}
  .nav-drop-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;padding:.4rem 0 0 .8rem;min-width:0;
  }
  .nav-drop > a::after{display:none}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;padding:11.5rem 0 6.5rem;overflow:hidden;
  background:
    radial-gradient(1100px 520px at 78% -10%,rgba(31,143,184,.16),transparent 60%),
    radial-gradient(800px 420px at 8% 110%,rgba(59,191,230,.07),transparent 60%),
    var(--ink);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--hairline-cool) 1px,transparent 1px),
    linear-gradient(90deg,var(--hairline-cool) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(900px 500px at 60% 0%,rgba(0,0,0,.55),transparent 75%);
}
.hero-inner{position:relative;max-width:var(--container);margin:0 auto;padding:0 1.5rem}
.hero h1{max-width:16em}
.hero .lede{font-size:1.2rem;max-width:40rem}
.hero-ctas{display:flex;gap:1rem;margin-top:2.4rem;flex-wrap:wrap}
.hero-badges{
  display:flex;gap:2.5rem;flex-wrap:wrap;margin-top:4rem;
  padding-top:2rem;border-top:1px solid var(--hairline-cool);
}
.hero-badge .num{font-family:var(--serif);font-size:1.7rem;color:var(--white)}
.hero-badge .lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dim);margin-top:.25rem}

/* Partner / stack ticker */
.ticker{border-top:1px solid var(--hairline-cool);border-bottom:1px solid var(--hairline-cool);overflow:hidden;background:var(--ink-2)}
.ticker-track{display:flex;gap:3.5rem;padding:1rem 0;white-space:nowrap;animation:tick 44s linear infinite;width:max-content}
.ticker span{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dim)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---------- Section headers ---------- */
.sec-head{max-width:48rem;margin-bottom:3.5rem}

/* ---------- Product cards (homepage) ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
@media(max-width:860px){.prod-grid{grid-template-columns:1fr}}
.prod-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--ink-2);border:1px solid var(--hairline-cool);border-radius:var(--radius);
  padding:2.2rem 2.2rem 1.9rem;transition:border-color .25s ease,transform .25s ease;
}
.prod-card:hover{border-color:var(--hairline);transform:translateY(-3px)}
.prod-card .tag{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--hairline);border-radius:999px;
  padding:.3rem .75rem;display:inline-block;margin-bottom:1.3rem;align-self:flex-start;
}
.prod-card h3{color:var(--white)}
.prod-card h3 a{color:inherit}
.prod-card h3 a:hover{color:var(--accent-bright)}
.prod-card .strap{color:var(--accent-bright);font-size:.95rem;margin:.45rem 0 .9rem;font-weight:500}
.prod-card p{color:var(--muted);font-size:.94rem;flex:1}
.prod-card .points{list-style:none;margin:1.2rem 0 1.6rem;display:grid;gap:.5rem}
.prod-card .points li{
  color:var(--muted);font-size:.88rem;padding-left:1.1rem;position:relative;
}
.prod-card .points li::before{
  content:"";position:absolute;left:0;top:.52em;width:.45rem;height:.45rem;
  border-top:2px solid var(--accent);border-right:2px solid var(--accent);transform:rotate(45deg);
}
.prod-card .actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:auto}
/* The data-protection product sits apart from the four gaming
   lines, so it takes the full row rather than leaving a hole in a
   two-up grid. Prose stays at a readable measure; the proof points
   spread across the extra width. */
@media(min-width:861px){
  .prod-card.wide{grid-column:1 / -1}
  .prod-card.wide > p{max-width:64ch}
  .prod-card.wide .points{grid-template-columns:repeat(3,1fr);gap:.5rem 1.8rem}
}
.prod-card .status{
  position:absolute;top:2.1rem;right:2.1rem;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);
}
.prod-card .status::before{
  content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--green);margin-right:.45rem;vertical-align:1px;
}

/* ---------- Service cards ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
@media(max-width:1080px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.svc-grid{grid-template-columns:1fr}}
.svc-card{
  background:var(--ink);border:1px solid var(--hairline-cool);border-radius:var(--radius);
  padding:1.9rem 1.7rem;transition:border-color .25s ease;
}
.section-alt .svc-card{background:var(--ink)}
.svc-card:hover{border-color:var(--hairline)}
.svc-card .idx{font-family:var(--mono);font-size:.7rem;color:var(--muted-dim);letter-spacing:.16em}
.svc-card h3{font-size:1.2rem;margin:.9rem 0 .7rem}
.svc-card p{color:var(--muted);font-size:.9rem}
.svc-card .chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.2rem}
.svc-card .chips span{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--muted);
  border:1px solid var(--hairline-cool);border-radius:999px;padding:.28rem .6rem;
}

/* ---------- Approach ---------- */
.appr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:900px){.appr-grid{grid-template-columns:1fr}}
.appr{border-left:1px solid var(--hairline);padding:0 0 0 1.5rem}
.appr .idx{font-family:var(--mono);font-size:.7rem;color:var(--accent);letter-spacing:.16em}
.appr h3{font-size:1.25rem;margin:.8rem 0 .6rem}
.appr p{color:var(--muted);font-size:.93rem}

/* ---------- Expertise (Oasis) ---------- */
.expert-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:start}
@media(max-width:960px){.expert-wrap{grid-template-columns:1fr}}
.expert-points{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:2rem}
@media(max-width:560px){.expert-points{grid-template-columns:1fr}}
.expert-points div{border:1px solid var(--hairline-cool);border-radius:var(--radius);padding:1.15rem 1.2rem;background:var(--ink-2)}
.expert-points h4{font-family:var(--sans);font-weight:600;font-size:.92rem;margin-bottom:.35rem}
.expert-points p{color:var(--muted);font-size:.84rem}
.cred-panel{
  background:var(--ink-2);border:1px solid var(--hairline-cool);border-radius:var(--radius);
  padding:2rem;position:sticky;top:96px;
}
.cred-panel .row{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.8rem 0;border-bottom:1px solid var(--hairline-cool);
}
.cred-panel .row:last-child{border-bottom:0}
.cred-panel .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dim)}
.cred-panel .v{color:var(--white);font-size:.92rem;text-align:right}

/* ---------- Testimonials ---------- */
.voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:960px){.voice-grid{grid-template-columns:1fr}}
.voice{
  background:var(--ink-2);border:1px solid var(--hairline-cool);border-radius:var(--radius);
  padding:1.8rem;display:flex;flex-direction:column;
}
.voice blockquote{color:var(--muted);font-size:.92rem;flex:1}
.voice blockquote.clamp{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.voice .more{margin-top:.6rem;font-size:.8rem;background:none;border:0;color:var(--accent);cursor:pointer;padding:0;align-self:flex-start;font-family:var(--sans)}
.voice .who{display:flex;align-items:center;gap:.9rem;margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--hairline-cool)}
.voice .avatar{
  width:42px;height:42px;border-radius:50%;flex:none;
  background:var(--midnight);border:1px solid var(--hairline);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.78rem;color:var(--accent);
}
.voice .who b{display:block;font-size:.9rem;font-weight:600}
.voice .who span{color:var(--muted-dim);font-size:.78rem}

/* ---------- Field notes ---------- */
.notes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:900px){.notes-grid{grid-template-columns:1fr}}
.note{
  background:var(--ink-2);border:1px solid var(--hairline-cool);border-radius:var(--radius);
  padding:1.7rem;display:flex;flex-direction:column;gap:.7rem;transition:border-color .25s ease;
}
.note:hover{border-color:var(--hairline)}
.note .meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dim)}
.note h3{font-size:1.15rem}
.note h3 a{color:var(--white)}
.note h3 a:hover{color:var(--accent-bright)}
.note p{color:var(--muted);font-size:.88rem;flex:1}
.note .read{font-size:.85rem;font-weight:600}

/* ---------- Contact ---------- */
.contact-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:start}
@media(max-width:960px){.contact-wrap{grid-template-columns:1fr}}
.contact-panel{
  background:var(--ink-2);border:1px solid var(--hairline-cool);border-radius:var(--radius);padding:2.2rem;
}
.contact-panel h3{margin-bottom:.6rem}
.contact-panel .sub{color:var(--muted);font-size:.92rem;margin-bottom:1.6rem}

/* ---------- Forms ---------- */
.field{margin-bottom:1.1rem}
/* Direct child only: .check-card and .pill are nested labels and must
   not inherit the mono uppercase treatment. */
.field > label{
  display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-dim);margin-bottom:.45rem;
}
.field input,.field select,.field textarea{
  width:100%;background:var(--ink);border:1px solid var(--hairline-cool);
  border-radius:var(--radius);color:var(--white);font-family:var(--sans);
  font-size:1rem;padding:.8rem .9rem;transition:border-color .2s ease;
}
/* 1rem (16px) computed size keeps iOS Safari from zooming the viewport
   on focus; do not shrink these below 16px. */
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}

/* ---------- Keyboard focus ----------
   Once default outlines are replaced, WCAG 2.4.7 contrast is on us.
   Cyan on the navy ground clears 3:1 comfortably; rings appear only
   for keyboard focus via :focus-visible. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-primary:focus-visible{outline-color:var(--white)}
.pill input:focus-visible + span,
.check-card input:focus-visible + .box{
  outline:2px solid var(--accent);outline-offset:2px;
}
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.field textarea{resize:vertical;min-height:110px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}
.field .err{display:none;color:var(--alert);font-size:.78rem;margin-top:.35rem}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid select{border-color:var(--alert)}
.form-note{color:var(--muted-dim);font-size:.78rem;margin-top:1rem}
.form-ok{display:none;color:var(--green);font-size:.92rem;margin-top:1rem}

/* Checkbox cards (interests) */
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(max-width:620px){.check-grid{grid-template-columns:1fr}}
.check-card{position:relative;display:block;cursor:pointer}
.check-card input{position:absolute;opacity:0;pointer-events:none}
.check-card .box{
  display:block;
  border:1px solid var(--hairline-cool);border-radius:var(--radius);
  padding:.85rem 1rem .85rem 2.4rem;transition:all .2s ease;position:relative;
  background:var(--ink);
}
.check-card .box::before{
  content:"";position:absolute;left:.95rem;top:1.05rem;width:.95rem;height:.95rem;
  border:1px solid var(--muted-dim);border-radius:2px;transition:all .2s ease;
}
.check-card .box::after{
  content:"";position:absolute;left:1.18rem;top:1.22rem;width:.42rem;height:.24rem;
  border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:rotate(-45deg) scale(0);transition:transform .2s ease;
}
.check-card input:checked + .box{border-color:var(--accent);background:var(--midnight)}
.check-card input:checked + .box::before{background:var(--accent);border-color:var(--accent)}
.check-card input:checked + .box::after{transform:rotate(-45deg) scale(1)}
.check-card b{display:block;font-size:.88rem;font-weight:600}
.check-card small{color:var(--muted-dim);font-size:.74rem}

/* ---------- Radio pills ---------- */
.pill-row{display:flex;flex-wrap:wrap;gap:.6rem}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;opacity:0;pointer-events:none}
.pill span{
  display:inline-block;border:1px solid var(--hairline-cool);border-radius:999px;
  padding:.55rem 1.05rem;font-size:.85rem;color:var(--muted);transition:all .2s ease;
}
.pill input:checked + span{border-color:var(--accent);color:var(--white);background:var(--midnight)}

/* ---------- Briefing modal ---------- */
.modal-back{
  position:fixed;inset:0;z-index:400;background:rgba(4,10,20,.78);backdrop-filter:blur(6px);
  display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:4rem 1rem;
}
.modal-back.open{display:flex}
.modal{
  width:100%;max-width:640px;background:var(--ink-2);
  border:1px solid var(--hairline-cool);border-radius:var(--radius);
  padding:2.4rem;position:relative;animation:modalIn .28s ease;
}
@keyframes modalIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modal-close{
  position:absolute;top:1.1rem;right:1.1rem;background:none;border:0;cursor:pointer;
  color:var(--muted);font-size:1.5rem;line-height:1;padding:.4rem;font-family:var(--sans);
}
.modal-close:hover{color:var(--white)}
.modal-progress{height:2px;background:var(--hairline-cool);border-radius:2px;margin:1.4rem 0 2rem;overflow:hidden}
.modal-progress i{display:block;height:100%;background:var(--accent);width:33%;transition:width .3s ease}
.modal-step-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dim)}
.modal h3{margin:.5rem 0 .4rem}
.modal .sub{color:var(--muted);font-size:.9rem;margin-bottom:1.6rem}
.modal-step{display:none}
.modal-step.active{display:block}
.modal-foot{display:flex;justify-content:space-between;align-items:center;margin-top:1.8rem;gap:1rem}
.modal-foot .back{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.9rem;font-family:var(--sans);padding:.5rem 0}
.modal-foot .back:hover{color:var(--white)}
.modal-success{text-align:left}
.modal-success .steps{list-style:none;margin-top:1.4rem;display:grid;gap:1rem}
.modal-success .steps li{display:flex;gap:1rem;align-items:flex-start}
.modal-success .steps .t{font-family:var(--mono);font-size:.68rem;color:var(--accent);letter-spacing:.1em;flex:none;width:5.2rem;padding-top:.2rem}
.modal-success .steps b{display:block;font-size:.92rem}
.modal-success .steps p{color:var(--muted);font-size:.84rem}
.btn.loading{opacity:.6;pointer-events:none}

/* Full-screen takeover under 640px: the card becomes a 100dvh sheet
   with an internally scrolling step area and the Back/Continue
   footer always visible above the keyboard. */
@media(max-width:640px){
  .modal-back{padding:0}
  .modal{
    min-height:100dvh;max-width:none;border-radius:0;border:0;
    display:flex;flex-direction:column;padding:1.6rem 1.2rem 0;
  }
  .modal-step.active{flex:1 1 auto;overflow-y:auto;padding-bottom:1rem}
  #briefingForm{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .modal-foot{
    position:sticky;bottom:0;margin:0 -1.2rem;padding:.9rem 1.2rem;
    padding-bottom:calc(.9rem + env(safe-area-inset-bottom));
    background:var(--ink-2);border-top:1px solid var(--hairline-cool);
  }
}

/* Product-scoped briefing: when a CTA names a product, step 2 shows a
   single scope card instead of the full interest grid. site.js toggles
   the scoped class on .modal. */
.field-scope{display:none}
.modal.scoped .field-scope{display:block}
.modal.scoped .field-interests{display:none}
.scope-card{
  border:1px solid var(--hairline);border-left:2px solid var(--accent);
  border-radius:var(--radius);background:var(--ink);padding:1.1rem 1.3rem;
}
.scope-card .k{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.4rem;
}
.scope-card b{display:block;font-size:.98rem;font-weight:600}
.scope-card small{color:var(--muted-dim);font-size:.8rem}
.scope-more{
  background:none;border:0;padding:.7rem 0 0;cursor:pointer;
  color:var(--accent);font-size:.82rem;font-family:var(--sans);display:block;
}
.scope-more:hover{color:var(--accent-bright)}

/* ---------- Product page template ---------- */
.p-hero{
  padding:10.5rem 0 4.5rem;
  background:
    radial-gradient(900px 420px at 82% -10%,rgba(31,143,184,.15),transparent 60%),
    var(--ink);
  border-bottom:1px solid var(--hairline-cool);
}
.p-hero .crumb{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dim);margin-bottom:1.4rem}
.p-hero .crumb a{color:var(--muted)}
.p-hero .crumb a:hover{color:var(--accent)}
.p-hero h1{margin:.4rem 0 .9rem}
.p-brandrow{display:flex;align-items:center;gap:1.2rem}
.p-brandrow h1{margin:.4rem 0 .9rem}
.p-mark{flex:none;width:3.4rem;height:3.4rem;margin-top:-.2rem;object-fit:contain}
/* Landscape marks need more width to carry the same visual weight
   as the square ones beside a display heading. */
.p-mark.wide{width:5rem;height:3.4rem}
@media(max-width:560px){.p-mark{width:2.6rem;height:2.6rem}.p-mark.wide{width:3.9rem;height:2.6rem}}

/* ---------- Framed product screenshots ----------
   Real UI is the evidence the product exists, so it gets a proper
   frame: a hairline gradient edge, one soft accent glow behind it,
   and a caption that says where the screen came from. */
.shots{display:grid;gap:2.4rem;margin-top:2.2rem}
.shot{position:relative}
.shot-frame{
  position:relative;padding:1px;border-radius:6px;
  background:linear-gradient(180deg,rgba(59,191,230,.38),rgba(59,191,230,.06));
}
.shot-frame::before{
  content:"";position:absolute;inset:-30px -20px;z-index:-1;
  background:radial-gradient(closest-side,rgba(59,191,230,.16),transparent);
  filter:blur(28px);
}
/* The glow must not push the page wider than the viewport on phones. */
@media(max-width:720px){.shot-frame::before{inset:-16px 0}}
.shot-frame img{
  display:block;width:100%;height:auto;border-radius:5px;
  background:var(--ink-2);
}
/* Supplied captures that already carry their own browser frame and
   background plate: no second frame around the first. */
.shot.plated .shot-frame{padding:0;background:none}
.shot.plated .shot-frame::before{display:none}
.shot.plated .shot-frame img{border-radius:6px}

/* Every capture opens at full size in a new tab. On a phone the shot
   itself is far too small to read, so the link is the only way these
   screens are worth anything below about 600px wide. The badge is the
   affordance: quiet by default, solid on hover and keyboard focus. */
.shot-zoom{display:block;position:relative;border-radius:6px;cursor:zoom-in}
.shot-zoom::after{
  content:"Full size";position:absolute;right:.7rem;bottom:.7rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--white);
  background:rgba(6,16,30,.86);border:1px solid rgba(59,191,230,.45);
  border-radius:999px;padding:.32rem .7rem;
  opacity:.62;transition:opacity .18s ease;pointer-events:none;
}
.shot-zoom:hover::after,.shot-zoom:focus-visible::after{opacity:1}
/* Plated captures carry their own "Demonstration data" label along the
   bottom edge. That label is a disclosure, so the badge moves up to the
   empty plate margin rather than sitting on top of it. */
.shot.plated .shot-zoom::after{top:.7rem;right:.9rem;bottom:auto}
/* On a phone the badge is a large fraction of the shot, and there is no
   hover to reveal it. Shrink it, hold it in the bottom corner clear of
   the synthetic-data banner these captures carry across the top, and
   leave it visible since tapping is the whole point at this width. */
@media(max-width:720px){
  .shot-zoom::after{
    font-size:.55rem;padding:.26rem .55rem;
    right:.45rem;bottom:.45rem;opacity:.92;
  }
  .shot.plated .shot-zoom::after{top:auto;right:.45rem;bottom:.45rem}
}
@media(hover:none){.shot-zoom::after{opacity:.92}}
.shot-zoom:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media print{.shot-zoom::after{display:none}}

/* Two printed artifacts side by side: the summary a revenue audit asks
   for, and the receipt a transaction leaves behind. Both are white
   paper, so the glow behind a gallery shot would never be seen and is
   turned off rather than painted for nothing. */
.shots-paper{
  display:grid;grid-template-columns:1.5fr 1fr;gap:2.4rem;
  align-items:start;margin-top:2.2rem;
}
.shots-paper .shot-frame::before{display:none}
@media(max-width:860px){
  .shots-paper{grid-template-columns:1fr;gap:2.6rem}
  .shots-paper .shot{max-width:34rem}
}

.shot-cap{
  display:flex;gap:.9rem;align-items:baseline;flex-wrap:wrap;
  margin-top:.9rem;font-size:.88rem;color:var(--muted);
}
.shot-cap b{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);font-weight:400;flex:none;
}
.p-hero .strap{font-size:1.25rem;color:var(--accent-bright);max-width:44rem}
.p-hero .lede{margin-top:1.1rem}
.p-hero .p-status{
  display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green);border:1px solid rgba(62,213,152,.35);
  border-radius:999px;padding:.35rem .8rem;margin-bottom:1.4rem;
}
.p-hero .hero-ctas{margin-top:2.2rem}
/* Continuum leads with the console itself: one wide capture under the
   hero CTAs, wearing the same frame as the gallery shots below it. */
.p-hero-shot{margin-top:3.4rem}
@media(max-width:720px){.p-hero-shot{margin-top:2.4rem}}

.p-body{padding:4.5rem 0}
.p-section{margin-bottom:4.5rem}
.p-section:last-child{margin-bottom:0}
.p-section > h2{margin-bottom:1.4rem;max-width:40rem}
.p-section > p{color:var(--muted);max-width:52rem;margin-bottom:1rem}
.p-section > p strong{color:var(--white)}

.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:2rem}
@media(max-width:820px){.feat-grid{grid-template-columns:1fr}}
.feat{
  background:var(--ink-2);border:1px solid var(--hairline-cool);
  border-radius:var(--radius);padding:1.5rem 1.6rem;
}
.feat h4{font-family:var(--sans);font-weight:600;font-size:.98rem;margin-bottom:.45rem;color:var(--white)}
.feat p{color:var(--muted);font-size:.89rem}

.list-plain{list-style:none;display:grid;gap:.85rem;margin-top:1.4rem;max-width:52rem}
.list-plain li{
  color:var(--muted);font-size:.95rem;padding-left:1.3rem;position:relative;
}
.list-plain li::before{
  content:"";position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;
  border-top:2px solid var(--accent);border-right:2px solid var(--accent);transform:rotate(45deg);
}
.list-plain li strong{color:var(--white)}

.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2rem}
@media(max-width:760px){.stat-strip{grid-template-columns:1fr}}
.stat{
  background:var(--ink-2);border:1px solid var(--hairline-cool);border-radius:var(--radius);
  padding:1.6rem;text-align:left;
}
.stat .n{font-family:var(--serif);font-size:2rem;color:var(--accent-bright)}
.stat .l{color:var(--muted);font-size:.85rem;margin-top:.4rem}

.spec-table{width:100%;border-collapse:collapse;margin-top:1.6rem;max-width:52rem}
.spec-table th,.spec-table td{
  text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--hairline-cool);
  font-size:.9rem;vertical-align:top;
}
.spec-table th{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-dim);font-weight:500;white-space:nowrap;width:34%;
}
.spec-table td{color:var(--muted)}
.spec-table td b{color:var(--white)}

.p-quote{
  border-left:2px solid var(--accent);padding:.4rem 0 .4rem 1.6rem;margin:2rem 0;
  color:var(--muted);font-size:1.02rem;max-width:48rem;font-style:italic;
}

.p-cta{
  background:var(--ink-2);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:2.6rem;display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;
}
.p-cta h2{font-size:1.7rem;max-width:26rem}
.p-cta p{color:var(--muted);margin-top:.5rem;max-width:30rem}
.p-cta .actions{display:flex;gap:.9rem;flex-wrap:wrap}
.cta-contract{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-dim);margin-top:.9rem;
}

.p-disclaim{color:var(--muted-dim);font-size:.78rem;margin-top:2.5rem;max-width:52rem;border-top:1px solid var(--hairline-cool);padding-top:1.4rem}

.xlinks{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2rem}
@media(max-width:820px){.xlinks{grid-template-columns:1fr}}
.xlink{
  background:var(--ink-2);border:1px solid var(--hairline-cool);border-radius:var(--radius);
  padding:1.4rem 1.5rem;transition:border-color .25s ease;display:block;
}
.xlink:hover{border-color:var(--hairline)}
.xlink b{display:block;color:var(--white);font-size:.95rem}
.xlink span{color:var(--muted-dim);font-size:.8rem}

/* ---------- Blog ---------- */
.blog-head{padding:10.5rem 0 3.5rem}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;padding-bottom:5rem}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr}}
.cat-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.8rem}
.cat-row a{
  border:1px solid var(--hairline-cool);border-radius:999px;padding:.5rem 1rem;
  font-size:.82rem;color:var(--muted);
}
.cat-row a.on,.cat-row a:hover{border-color:var(--accent);color:var(--white)}
.post-wrap{max-width:760px;margin:0 auto;padding:10.5rem 1.5rem 5rem}
.post-wrap .meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dim);margin-bottom:1rem}
.post-wrap h1{font-size:clamp(2rem,4.5vw,3.1rem);margin-bottom:1.4rem}
.post-body{color:#c7d0de;font-size:1.03rem}
.post-body h2{margin:2.4rem 0 1rem;font-size:1.7rem}
.post-body h3{margin:2rem 0 .8rem;font-size:1.3rem}
.post-body p{margin-bottom:1.15rem}
.post-body a{text-decoration:underline;text-underline-offset:3px}
.post-body ul,.post-body ol{margin:0 0 1.15rem 1.4rem}
.post-body li{margin-bottom:.4rem}
.post-body blockquote{border-left:2px solid var(--accent);padding-left:1.3rem;color:var(--muted);font-style:italic;margin:1.6rem 0}
.post-body code{font-family:var(--mono);font-size:.88em;background:var(--midnight);padding:.15em .4em;border-radius:3px}
.post-body pre{background:var(--midnight);border:1px solid var(--hairline-cool);padding:1.1rem;overflow-x:auto;border-radius:var(--radius);margin-bottom:1.15rem}
.post-body pre code{background:none;padding:0}
.post-body img{border-radius:var(--radius);margin:1.4rem 0}
.post-back{display:inline-block;margin-bottom:2rem;font-size:.88rem}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--hairline-cool);background:var(--ink-2);padding:4.5rem 0 2.5rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;gap:2.2rem}
@media(max-width:960px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer .about img{height:38px;margin-bottom:1.1rem}
.footer .about p{color:var(--muted);font-size:.88rem;max-width:22rem}
.footer h5{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-dim);margin-bottom:1rem;font-weight:500;
}
.footer ul{list-style:none;display:grid;gap:.55rem}
.footer ul a{color:var(--muted);font-size:.88rem}
.footer ul a:hover{color:var(--white)}
.footer-ledger{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-dim);margin-top:3.5rem;padding-top:1.4rem;
  border-top:1px solid var(--hairline-cool);line-height:2;
}
.footer-base{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:1rem;padding-top:0;
  color:var(--muted-dim);font-size:.8rem;
}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);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}}

/* ---------- Announcement bar ---------- */
.announce{
  background:var(--midnight);border-bottom:1px solid var(--hairline-cool);
  text-align:center;padding:.6rem 1rem;font-size:.85rem;color:var(--muted);
  position:relative;z-index:210;
}
.announce a{font-weight:600}

/* ---------- Print ----------
   Makes the dossier and product pages committee-ready from the
   browser's print dialog: light ground, chrome hidden. */
@media print{
  .nav,.footer,.modal-back,.hero-ctas,.actions,.ticker,.announce,.chev{display:none !important}
  body{background:#fff;color:#111}
  .p-hero{background:#fff;border-bottom:1px solid #bbb;padding:1.5rem 0}
  h1,h2,h3,h4,.stat .n,em,strong{color:#111}
  .kicker,.crumb,.p-status,.cta-contract{color:#555}
  p,.lede,.strap,.list-plain li,.stat .l,.p-disclaim{color:#222}
  .stat,.feat,.p-cta{border-color:#ccc;background:#fff}
  a{color:#111;text-decoration:underline}
  .p-mark{filter:invert(1) hue-rotate(180deg)}
}