/* =====================================================================
   Soverita site stylesheet

   Contents
    1. Tokens & base       custom properties, reset, typography, text styles
    2. Layout & utilities  wrap, sections, grids, cards, buttons, spacing, scrollers
    3. Header & nav        header bar, logo, links, CTAs, mobile menu
    4. Hero                page heroes, home hero grid, stats strip
    5. Home sections       image bands, lists, comparison table, steps, expanders
    6. Diagrams            swipe scrollers, quadrant, layer stack, shield
    7. About               about hero, founders, team stats
    8. Delivery status     status table, badges
    9. Demo                video slot
   10. Legal & privacy
   11. Contact form
   12. Footer

   Each component's responsive @media overrides follow its base rules.
   Print, forced-colours and reduced-motion blocks go at the very end.
   HTML font sizes are in rem (1rem = 16px at the browser default);
   SVG text sizes stay in px because they scale with the viewBox.
   ===================================================================== */

/* ---------- 1. Tokens & base ---------- */
/* Fonts: self-hosted, no third-party requests. IBM Plex Sans (variable, 300-700),
   IBM Plex Mono 400/600, Quantico 400/700; SIL OFL 1.1, see fonts/OFL-*.txt.
   unicode-range splits each face into subsets; a browser only downloads the ones a page uses. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/ibm-plex-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/ibm-plex-sans-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/ibm-plex-sans-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-600-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-600-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Quantico';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/quantico-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Quantico';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/quantico-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --void:#080B12;--abyss:#0D1220;--obsidian:#141927;--slate:#1E2738;--steel:#2C3A52;
  --mist:#8896A8;--silver:#C4CDD8;--frost:#EEF1F5;--grey:#728197;--white:#fff;
  --burgundy:#9F1239;--deep:#881337;--crimson:#BE123C;
  --void-rgb:8,11,18;   /* --void as r,g,b for translucent backgrounds */
  --deep-rgb:136,19,55; /* --deep as r,g,b for highlight tints */
  --shadow:rgba(0,0,0,.5);
  --ok:#4ADE80;--ok-line:#166534;--ok-bg:rgba(22,101,52,.18);
  --warn:#FBBF24;--warn-line:#92400E;--warn-bg:rgba(146,64,14,.18);
  color-scheme:dark /* native controls, autofill and scrollbars render dark */
}
*{margin:0;padding:0;box-sizing:border-box}
/* scroll-padding keeps anchor targets and focused elements clear of the sticky header;
   in rem so it grows with the header when text is enlarged (84px / 72px at 16px) */
html{scroll-behavior:smooth;scroll-padding-top:5.25rem}
@media(max-width:900px){html{scroll-padding-top:4.5rem}}
body{background:var(--void);color:var(--silver);font-family:'IBM Plex Sans',sans-serif;font-weight:300;line-height:1.65;font-size:1.0625rem;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
a.accent{color:var(--crimson)}
/* links inside running text are underlined, not marked by colour alone */
p a:not(.btn){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* keyboard focus ring; :where keeps specificity low so component rules can override */
:where(a,button,summary):focus-visible{outline:2px solid var(--frost);outline-offset:3px}
h1,h2,h3{font-family:'Quantico',sans-serif;color:var(--frost);line-height:1.15}
h2{font-size:clamp(1.625rem,3.4vw,2.375rem);margin-bottom:18px}
h3,h2.h3{font-size:1.1875rem;margin-bottom:8px}
h2.h2-sm{font-size:1.625rem}
/* h3 size variant; also on h2s styled as h3. Keep below any h2.h3 rule (same specificity) */
:is(h2,h3).h3-lg{font-size:1.4375rem}
p{margin-bottom:14px}
strong{color:var(--frost);font-weight:600}
/* <b> computes to 400 over the 300 body; these emphasis cells are meant to read bold */
.cmp td.hi b,.quad-html b{font-weight:600}
.label{font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--crimson);margin-bottom:14px}
.lead{font-size:1.1875rem;max-width:820px}
.mono{font-family:'IBM Plex Mono',monospace;font-size:.875rem;color:var(--mist)}
.foot-note{font-size:.84375rem;color:var(--grey)}
/* clip (not hidden) on html only: hidden on body would make body the scroll container and break the sticky header */
@media(max-width:700px){html{overflow-x:clip}}
@media(max-width:600px){body{font-size:1rem}.lead{font-size:1.0625rem}}
@media(min-width:1500px){body{font-size:1.125rem}.lead{font-size:1.25rem}h2{font-size:2.5rem}}

/* ---------- 2. Layout & utilities ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
section{padding:88px 0;border-top:1px solid var(--slate)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:var(--abyss);border:1px solid var(--slate);padding:26px;border-radius:6px}
/* drawn as a border so it survives forced-colours mode (backgrounds are dropped there) */
.divider{height:0;border-top:1px solid var(--slate);margin:44px 0}
/* grid items may shrink below their longest word, which then wraps (large text, zoom) */
.grid2>*,.grid3>*,.hero-grid>*,.ind-grid>*,.tstats>*,.about-hero .wrap>*,.quad-html>*{min-width:0}
/* while a card is open, its closed neighbours keep their own height instead of stretching */
.grid2:has(details.x[open]),.grid3:has(details.x[open]){align-items:start}
@media(max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}
@media(max-width:600px){.wrap{padding:0 18px}section{padding:56px 0}.card{padding:20px}.divider{margin:32px 0}}
@media(min-width:1500px){.wrap{max-width:1320px}}
@media(min-width:1900px){.wrap{max-width:1440px}}

/* buttons */
.btn{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.875rem;padding:13px 26px;border-radius:4px;letter-spacing:.04em}
.btn-p{background:var(--crimson);color:var(--white)}
.btn-p:hover{background:var(--burgundy)}
.btn-g{border:1px solid var(--steel);color:var(--frost)}
.btn-g:hover{border-color:var(--crimson)}
.btn-gap{margin-left:10px}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
/* the about #contact pair is inline, not a stretched flex row: a transparent border matches
   the .btn-g height. :where keeps it at .btn-p specificity, so print and forced colours win */
:where(#contact) .btn-p{border:1px solid transparent}
@media(max-width:600px){
  .btn{padding:12px 18px;font-size:.8125rem;text-align:center}
  #contact .btn{display:block;margin:10px 0 0}
}

/* spacing */
.mt-22{margin-top:22px}
.mt-26{margin-top:26px}
.mt-30{margin-top:30px}
.mt-44{margin-top:44px}

/* horizontal scroller for wide tables, with a swipe hint on phones */
.tscroll{overflow-x:auto;margin:30px 0}
.tscroll::before{content:"swipe to compare →";content:"swipe to compare →" / "";display:none;font-family:'IBM Plex Mono',monospace;font-size:.71875rem;color:var(--grey);margin-bottom:6px}
@media(max-width:700px){.tscroll::before{display:block}}
/* the status table stacks into cards instead of scrolling, so it never needs the hint */
.tscroll.status::before{display:none}
.tscroll:focus-visible{outline:2px solid var(--frost);outline-offset:3px}

/* elements waiting for a URL: drop the class 'pending' once the href is set */
.pending{display:none!important}

/* ---------- 3. Header & nav ---------- */
header{position:sticky;top:0;background:rgba(var(--void-rgb),.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--slate);z-index:50}
/* skip link: off-screen until focused, then above the sticky header */
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--frost);color:var(--void);padding:8px 12px;border-radius:4px;font-weight:500}
.skip:focus{left:16px}
main:focus{outline:none}
nav .wrap{display:flex;align-items:center;gap:30px;padding-top:15px;padding-bottom:15px}
/* logo: wordmark image (the type styles only show in the alt text if the image fails) */
.logo{display:inline-flex;align-items:center;font-family:'Quantico',sans-serif;font-weight:700;font-size:1.3125rem;color:var(--frost);letter-spacing:.03em}
.logo img{height:40px;width:auto;display:block}
.nav-links{display:flex;gap:22px;font-size:.90625rem;flex:1;white-space:nowrap}
.nav-links a:hover{color:var(--frost)}
/* the current page: brighter and underlined, so it is not marked by colour alone */
.nav-links a[aria-current="page"]{color:var(--frost);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.nav-cta{display:flex;gap:12px}
.nav-cta .btn{padding:9px 16px;font-size:.8125rem;white-space:nowrap}
.nav-cta .short{display:none}
.menu-btn{display:none;background:none;border:1px solid var(--steel);color:var(--frost);font-family:'IBM Plex Mono',monospace;font-size:.8125rem;padding:8px 12px;border-radius:4px;cursor:pointer}
/* header CTA: short label up to 1500px, full label above */
@media(max-width:1500px){.nav-cta .full{display:none}.nav-cta .short{display:inline}}
/* drop the secondary CTA on narrow laptops and tablets */
@media(max-width:1000px){.nav-cta .btn-g{display:none}}
@media(max-width:1200px){.nav-links{gap:16px;font-size:.84375rem}}
/* with enlarged text, links wrap to a second row instead of pushing the CTA off-screen.
   Must follow the gap shorthand above, which would reset row-gap */
@media(min-width:901px){nav .wrap{flex-wrap:wrap;row-gap:6px}.nav-links{flex-wrap:wrap;min-width:0;row-gap:4px}}
@media(max-width:900px){
  nav{position:relative}
  nav .wrap{flex-wrap:nowrap;gap:10px;padding-top:11px;padding-bottom:11px}
  .logo{font-size:1.1875rem}
  .nav-cta{order:1;margin-left:auto}
  .nav-cta .btn{padding:7px 10px;font-size:.71875rem}
  /* min-width fits "Close" (5ch + padding + border) so the label swap doesn't shift the CTA */
  .menu-btn{display:inline-block;order:2;padding:7px 10px;font-size:.71875rem;flex-shrink:0;min-width:calc(5ch + 22px)}
  .nav-links{display:none}
  /* open panel: inset matches .wrap; scrolls inside itself when taller than the viewport */
  .nav-links.open{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--abyss);border-bottom:1px solid var(--slate);padding:6px 28px 12px;box-shadow:0 12px 30px var(--shadow);max-height:calc(100vh - 4rem);max-height:calc(100dvh - 4rem);overflow-y:auto;overscroll-behavior:contain}
  .nav-links.open a{padding:12px 0;border-bottom:1px solid var(--slate);font-size:1rem}
  .nav-links.open a:last-child{border-bottom:none}
}
@media(max-width:600px){
  .logo img{height:30px}
  /* with enlarged text, Menu drops to a second row instead of being clipped */
  nav .wrap{flex-wrap:wrap;row-gap:8px}
  .nav-links.open{padding:6px 18px 12px}
}

/* ---------- 4. Hero ---------- */
/* section.hero, not .hero: the home hero diagram also carries the class (div.diag.hero) */
section.hero{border-top:none;padding:96px 0 72px;background:linear-gradient(160deg,var(--void) 55%,var(--abyss))}
/* sub-page heroes: tighter than the home hero */
.hero.hero-status{padding:72px 0 48px}
.hero.hero-demo{padding:72px 0 30px}
.hero.hero-legal{padding:64px 0 24px}
.hero h1{font-size:clamp(2.125rem,5vw,3.625rem);margin:14px 0 22px}
.hero h1 .yr{color:var(--silver)}
.hero .sub{font-size:1.1875rem;max-width:760px}
/* home hero: two columns, copy + layered overlay diagram */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
/* min-width:0 lets the phone swipe diagram scroll instead of widening the grid column */
.hero-right{position:relative;padding-top:34px;min-width:0}
.hero-visual{width:100%}
.hero-visual svg{width:100%;height:auto;display:block}
.hero-eu-label{font-family:'IBM Plex Mono',monospace;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);text-align:center;margin-top:6px}
/* stats strip */
/* the 1px gap over the slate background draws the dividers, between tiles and between wrapped rows */
.stats{display:flex;flex-wrap:wrap;gap:1px;margin-top:38px;border:1px solid var(--slate);border-radius:6px;overflow:hidden;background:var(--slate)}
.stat{flex:1 1 180px;padding:18px 20px;background:var(--abyss);outline:1px solid var(--slate)}
.stat b{display:block;font-family:'Quantico',sans-serif;font-size:1.625rem;color:var(--crimson)}
.stat small{font-size:.78125rem;color:var(--mist);line-height:1.4;display:block}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:28px}.hero-right{padding-top:0}}
@media(max-width:600px){
  section.hero{padding:52px 0 44px}
  .hero.hero-status,.hero.hero-demo,.hero.hero-legal{padding-top:52px}
  .hero h1{margin:10px 0 16px}
  .hero .sub{font-size:1.0625rem}
  /* two tiles per row; a last odd tile grows to fill its row */
  .stats{margin-top:28px}
  .stat{flex-basis:40%;padding:14px 14px}
  .stat b{font-size:1.375rem}
  .stat small{font-size:.75rem}
}

/* ---------- 5. Home sections ---------- */
/* image bands as section splits: wide and short */
.band{margin:30px 0}
.band img{width:100%;height:auto;display:block;border-radius:6px;border:1px solid var(--slate);aspect-ratio:5/1;object-fit:cover}
.band.split{margin:0 0 40px}
.band.split img{aspect-ratio:21/9}
.band.cross img{aspect-ratio:4/1}
@media(max-width:700px){.band img,.band.split img,.band.cross img{aspect-ratio:2.4/1}}

/* bullet lists inside cards and copy */
ul.pts{margin:0 0 14px 20px;padding:0}
ul.pts li{margin-bottom:8px}

/* comparison table */
table.cmp{width:100%;border-collapse:collapse;font-size:.9375rem}
.cmp th,.cmp td{border:1px solid var(--slate);padding:11px 13px;text-align:left;vertical-align:top}
/* column headers and the empty corner cell */
.cmp thead th,.cmp thead td{background:var(--obsidian);color:var(--frost);font-family:'IBM Plex Mono',monospace;font-size:.78125rem;letter-spacing:.06em;text-transform:uppercase}
/* row headers look like body cells */
.cmp tbody th{font-weight:inherit}
.cmp td.hi{background:var(--abyss);color:var(--frost)}
.tscroll table.cmp{margin:0;min-width:640px}

/* install steps: the number spans all three rows (title, detail, outcome) */
.stepline{list-style:none}
.stepline li{display:grid;grid-template-columns:44px 1fr;column-gap:10px;padding:10px 0;border-bottom:1px solid var(--slate);font-size:.9375rem;color:var(--mist)}
.stepline li:last-child{border-bottom:none}
.stepline .n{font-family:'Quantico',sans-serif;color:var(--crimson);font-size:1.25rem;grid-row:1 / span 3;align-self:start}
.stepline b{display:block;color:var(--frost);font-weight:600;font-size:1rem}
.stepline .outcome{display:block;color:var(--silver);font-size:.875rem;margin-top:4px}
@media(max-width:600px){.stepline li{grid-template-columns:34px 1fr;font-size:.90625rem}.stepline .n{font-size:1.0625rem}.stepline b{font-size:.9375rem}}

/* progressive disclosure: the title line is the toggle, chevron on the right */
details.x summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px}
details.x summary::-webkit-details-marker{display:none}
details.x summary h3{margin:0}
details.x summary::after{content:"";flex:0 0 10px;width:10px;height:10px;border-right:2px solid var(--silver);border-bottom:2px solid var(--silver);transform:rotate(-45deg);transition:transform .2s;margin-right:4px}
details.x[open] summary::after{transform:rotate(45deg)}
details.x > p{margin-top:12px}

/* "…" expander for prose */
details.dots{margin:-6px 0 14px}
details.dots summary{list-style:none;cursor:pointer;display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.875rem;letter-spacing:.2em;color:var(--crimson);border:1px solid var(--steel);border-radius:20px;padding:2px 12px;line-height:1.3}
details.dots summary::-webkit-details-marker{display:none}
details.dots summary::after{content:"···"}
details.dots[open] summary::after{content:"less";letter-spacing:.08em;font-size:.75rem}
details.dots > p{margin-top:12px}

/* independence: shield beside the text */
.ind-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start;margin-top:26px}
@media(max-width:900px){.ind-grid{grid-template-columns:1fr;gap:20px}}

/* ---------- 6. Diagrams ---------- */
/* keep diagrams legible on phones by swiping instead of shrinking.
   .diag is the figure; .diag-scroll inside it is the keyboard-focusable scroller,
   so the "swipe" hint and any caption stay in view while the drawing scrolls */
.diag{min-width:0}
.diag-scroll{overflow-x:auto}
.diag-scroll:focus-visible{outline:2px solid var(--frost);outline-offset:3px}
.diag svg,.shield svg{width:100%;height:auto}
.diag svg{display:block}
/* stop Chrome rounding font sizes in scaled SVG text (it widens lines unpredictably) */
.diag svg text{text-rendering:geometricPrecision}
.diag::before{content:"swipe →";content:"swipe →" / "";display:none;font-family:'IBM Plex Mono',monospace;font-size:.71875rem;color:var(--grey);margin-bottom:6px}
/* each min-width keeps the smallest labels readable; the hint shows only where the drawing
   is wider than its column (the extra 15px allows for a classic desktop scrollbar) */
@media(max-width:830px){.diag.wide svg{min-width:760px}.diag.wide::before{display:block}}
@media(max-width:700px){.diag.hero svg{min-width:500px}.diag.shield svg{min-width:600px}}
@media(max-width:670px){.diag.shield::before{display:block}}
@media(max-width:550px){.diag.hero::before{display:block}}

/* quadrant: sovereignty controls vs hyperscaler parity */
/* Arial before the generic: metric-compatible fallbacks (Liberation Sans on Linux) keep the titles inside their boxes */
.diag.quad svg{font-family:'IBM Plex Sans',Arial,sans-serif}
.diag.quad svg .q{fill:var(--abyss);stroke:var(--slate)}
.diag.quad svg .qh{fill:rgba(var(--deep-rgb),.18);stroke:var(--crimson);stroke-width:2}
.diag.quad svg .qt{fill:var(--frost);font-size:14px;font-weight:600}
.diag.quad svg .qs{fill:var(--mist);font-size:12.5px}
.diag.quad svg .ax{fill:var(--crimson);font-size:11px;letter-spacing:.16em;font-family:'IBM Plex Mono',monospace}
/* quadrant as a 2x2 grid on phones */
.quad-html{display:none}
@media(max-width:700px){
  .diag.quad{display:none}
  .quad-html{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:26px 0 8px}
  .quad-html div{background:var(--abyss);border:1px solid var(--slate);border-radius:6px;padding:12px;font-size:.78125rem;color:var(--mist);line-height:1.4}
  .quad-html div b{display:block;color:var(--frost);font-size:.84375rem;margin-bottom:4px}
  .quad-html div.hl{border-color:var(--crimson);background:rgba(var(--deep-rgb),.18)}
  .quad-html .ax{grid-column:1/-1;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:.65625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--crimson)}
  .quad-html .ax-y{text-align:left}
}

/* layer stack: tenants, Soverita overlay, substrate */
.diag.wide svg .bx{fill:var(--abyss);stroke:var(--slate)}
.diag.wide svg .hl{fill:rgba(var(--deep-rgb),.16);stroke:var(--burgundy)}
.diag.wide svg .t{fill:var(--frost);font-size:16px;font-weight:600}
.diag.wide svg .s{fill:var(--mist);font-size:12.5px;font-family:'IBM Plex Mono',monospace}
.diag.wide svg .lab{fill:var(--crimson);font-size:11px;letter-spacing:.18em;font-family:'IBM Plex Mono',monospace}

/* shield: your perimeter */
.shield svg .pf{fill:var(--abyss);stroke:var(--crimson);stroke-width:2}
.shield svg .pt{fill:var(--frost);font-size:15px;font-weight:600}
.shield svg .ps{fill:var(--mist);font-size:12.5px}
.shield svg .po{fill:var(--grey);font-size:13px;font-family:'IBM Plex Mono',monospace;letter-spacing:.06em}
.shield svg .pl{fill:var(--crimson);font-size:11px;letter-spacing:.2em;font-family:'IBM Plex Mono',monospace}
.shield svg .x{stroke:var(--crimson);stroke-width:2}

/* ---------- 7. About ---------- */
/* about hero: angled split via clip-path */
.about-hero{position:relative;overflow:hidden;padding:110px 0 80px;border-top:none;background:var(--void)}
.about-hero::before{content:'';position:absolute;top:0;right:0;width:55%;height:100%;background:var(--frost);clip-path:polygon(20% 0,100% 0,100% 100%,0 100%);z-index:0}
.about-hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center}
.about-hero .ah-left{padding:0 40px 0 0}
.about-hero .ah-right{display:flex;align-items:center;justify-content:center;padding-left:60px}
.about-hero .ah-right img{width:min(340px,80%);max-width:100%;height:auto;display:block;margin:0 auto}
.about-hero h1{font-size:clamp(2rem,4.6vw,3.25rem);margin:12px 0 20px}
/* two columns up to 1499px: smaller so "governance platform." stays on one line */
@media(min-width:901px) and (max-width:1499px){.about-hero h1{font-size:clamp(2rem,calc(4.4vw - 6px),2.8125rem)}}
@media(max-width:900px){
  .about-hero{padding:56px 0 40px}
  /* the frost wedge sits a fixed distance above the hero bottom: always below the lead text
     (at least 245px up) and behind the bird (its top at most 178px up). Recompute if the
     paddings below or the bird size change */
  .about-hero::before{width:100%;clip-path:polygon(0 calc(100% - 175px),100% calc(100% - 235px),100% 100%,0 100%)}
  .about-hero .wrap{grid-template-columns:1fr}
  .about-hero .ah-left{padding:0 0 60px}
  .about-hero .ah-right{padding:30px 0 0}
  .about-hero .ah-right img{width:min(220px,60%)}
}

/* founders: light ring, LinkedIn "in" square */
.founders{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:30px}
.founder{background:var(--abyss);border:1px solid var(--slate);border-radius:6px;padding:22px;text-align:center}
.founder img{width:140px;height:140px;border-radius:50%;object-fit:cover;border:2px solid var(--steel);margin-bottom:14px}
.founder h3{margin-bottom:2px;font-size:1.0625rem}
.founder .role{font-family:'IBM Plex Mono',monospace;font-size:.71875rem;letter-spacing:.16em;color:var(--crimson);text-transform:uppercase}
.founder a.li{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:5px;background:var(--obsidian);border:1px solid var(--steel);color:var(--frost);font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:.875rem;padding:0;margin-top:10px}
.founder a.li:hover{background:var(--crimson);border-color:var(--crimson);color:var(--white)}

/* team stats */
.tstats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:40px 0}
.tstat{border:1px solid var(--slate);background:var(--abyss);padding:24px;border-radius:6px}
.tstat b{display:block;font-family:'Quantico',sans-serif;font-size:2.125rem;line-height:1.15;color:var(--crimson)}
/* the word-list stat: smaller, so it takes 3-4 short lines and its longest word fits a phone */
.tstat-list b{font-size:1.5rem}
@media(max-width:900px){.founders{grid-template-columns:1fr 1fr}.tstats{grid-template-columns:1fr}}
@media(max-width:600px){.founders{grid-template-columns:1fr}}

/* ---------- 8. Delivery status ---------- */
.st{width:100%;border-collapse:collapse;font-size:.9375rem}
.st th,.st td{border:1px solid var(--slate);padding:13px 14px;text-align:left;vertical-align:top}
.st thead th{background:var(--obsidian);color:var(--frost);font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
/* row headers: the domain name */
.st tbody th{color:var(--frost);font-weight:500;min-width:220px}
.badge{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:3px;border:1px solid;white-space:nowrap}
.b-av{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.b-dev{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.b-des{color:var(--silver);border-color:var(--steel);background:var(--obsidian)}
.chipline{font-family:'IBM Plex Mono',monospace;font-size:.78125rem;color:var(--mist);margin:8px 0 0}
/* phones: the status table stacks into cards */
@media(max-width:600px){
  .st{font-size:.875rem}
  .st,.st tbody,.st tr,.st td,.st tbody th{display:block;width:100%}
  /* column headers: hidden on screen, kept for screen readers */
  .st thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .st tr{border:1px solid var(--slate);border-radius:6px;margin-bottom:14px;overflow:hidden}
  .st td,.st tbody th{border:none;padding:10px 14px}
  .st tbody th{background:var(--obsidian);min-width:0;font-size:.9375rem}
  .st td:nth-child(2){padding-top:12px;padding-bottom:0}
  .tscroll.status{overflow:visible}
}

/* ---------- 9. Demo ---------- */
/* video slot: the fallback shows until a <video> or <iframe> is added */
/* overflow:clip is not a scroll container, so the box grows past 16:9 when the fallback
   needs more height (phones); hidden stays first for older browsers */
.video{position:relative;display:grid;width:100%;aspect-ratio:16/9;background:var(--abyss);border:1px solid var(--slate);border-radius:6px;overflow:hidden;overflow:clip}
.video video,.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:10px}
/* the media element goes before the fallback */
.video video~.video-fallback,.video iframe~.video-fallback{display:none}

/* ---------- 10. Legal & privacy ---------- */
.legal{max-width:860px}
.legal h1.lt{font-size:clamp(1.75rem,4vw,2.625rem);margin:10px 0 14px}
.legal .updated{font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.08em;color:var(--grey);margin-bottom:34px}
.legal h2{font-size:1.1875rem;margin:34px 0 10px;padding-top:22px;border-top:1px solid var(--slate)}
/* the first heading straight after the date has no rule above it (on privacy an intro
   paragraph comes first, so its first heading keeps the rule like the others) */
.legal .updated+h2{border-top:none;padding-top:0;margin-top:0}
.legal p{font-size:.96875rem}
.legal ul{list-style:none;margin:10px 0 18px}
/* block items with a hanging arrow: a <strong> term and its description flow as one text */
.legal ul li{position:relative;padding:6px 0 6px calc(1em + 10px);border-bottom:1px solid var(--slate);font-size:.9375rem}
.legal ul li::before{content:'→';content:'→' / '';position:absolute;left:0;color:var(--crimson)}
.legal a.email{color:var(--crimson)}

/* ---------- 11. Contact form ---------- */
.cform{max-width:720px;margin-top:22px;background:var(--abyss);border:1px solid var(--slate);border-radius:6px;padding:24px}
.cform label{display:block;font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mist);margin-bottom:14px}
.cform input,.cform select,.cform textarea{display:block;width:100%;margin-top:6px;padding:11px 12px;background:var(--void);border:1px solid var(--grey);border-radius:4px;color:var(--frost);font-family:'IBM Plex Sans',sans-serif;font-size:.9375rem}
/* the transparent outline is invisible normally; forced-colours mode draws it in the system colour */
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:2px solid transparent;outline-offset:2px;border-color:var(--crimson)}
/* keyboard focus also gets the site's frost ring (the crimson border alone is under 3:1) */
.cform input:focus-visible,.cform select:focus-visible,.cform textarea:focus-visible{outline:2px solid var(--frost);outline-offset:2px}
.cform ::placeholder{color:var(--mist);opacity:1}
.cform textarea{resize:vertical}
.cform .fcheck{display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:0;font-family:'IBM Plex Sans',sans-serif;font-size:.9375rem;color:var(--silver)}
.cform .fcheck input{width:auto;margin:0}
/* a native checkbox ignores border-color, so keyboard focus gets a ring */
.cform .fcheck input:focus-visible{outline:2px solid var(--frost);outline-offset:2px}
/* required-field marker */
.cform .req{color:var(--crimson)}
.cform label .req{margin-left:.3em}
/* border and line-height match the a.btn beside it, so both are the same height */
.cform button{border:1px solid transparent;line-height:1.65;cursor:pointer}
.cform .btn-row{gap:12px;align-items:center;margin-top:16px}
/* status line and "Or email" note under the buttons */
.cform .btn-row ~ .foot-note{margin-top:12px}
/* the status stays rendered so screen readers announce it; while empty it takes no space */
#cf-status:empty{margin:0}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.frow{grid-template-columns:1fr}.cform{padding:18px}.cform .btn{width:100%}}
/* iOS Safari zooms into a focused control whose text is under 16px */
@media(pointer:coarse){.cform input,.cform select,.cform textarea{font-size:1rem}}

/* ---------- 12. Footer ---------- */
footer{border-top:1px solid var(--slate);padding:54px 0 40px;font-size:.875rem;color:var(--mist)}
.fcols{display:grid;grid-template-columns:2fr 1fr 1.3fr 1fr;gap:26px;margin-bottom:34px}
/* column labels are h2 for the outline but look like small mono labels (line-height as body) */
.fcols h2{font-family:'IBM Plex Mono',monospace;font-size:.75rem;line-height:inherit;letter-spacing:.18em;text-transform:uppercase;color:var(--frost);margin-bottom:12px}
.fcols a{display:block;padding:3.5px 0}
.fcols a:hover,.fcols a[aria-current="page"]{color:var(--frost)}
.fcols a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
footer .logo img{height:34px}
footer .tagline{margin-top:12px}
@media(max-width:900px){.fcols{grid-template-columns:1fr}}
@media(max-width:600px){footer{padding:40px 0 30px}.fcols{gap:20px}}

/* ---------- Print ---------- */
@media print{
  /* status table: keep each row on one page (the thead repeats on each page) */
  .st tr{break-inside:avoid}
  /* diagrams: fit the page instead of scrolling, and drop the swipe hints */
  .diag.wide svg,.diag.hero svg,.diag.shield svg{min-width:0}
  .diag.wide::before,.diag.hero::before,.diag.shield::before{display:none}
  .tscroll::before{display:none}
  .tscroll table.cmp{min-width:0}
  /* light palette: dark ink on white paper. Dark text colours also escape the browser's
     "economy" lightening of near-white text when background graphics are off */
  :root{--void:#fff;--void-rgb:255,255,255;--abyss:#fff;--obsidian:#f1f3f5;--slate:#cfd4db;--steel:#8b95a3;--mist:#3f4854;--silver:#1d232b;--frost:#000;--grey:#4b5563;--ok:#166534;--warn:#92400E;color-scheme:light}
  header{position:static;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .logo img{filter:brightness(0)}
  .hero-visual text[fill="#EEF1F5" i]{fill:#000}
  .hero-visual text[fill="#8896A8" i]{fill:#3f4854}
  .hero-visual text[fill="#728197" i]{fill:#4b5563}
  .btn-p{background:none;color:var(--crimson);border:1px solid var(--crimson)}
  /* screen-only UI, decorative photos and the empty contact form ("Or email" stays) */
  .skip,nav .wrap>:not(.logo),.about-hero::before,.band,#contactForm>:not(:last-child){display:none}
  /* !important beats the img's inline display:block */
  #products img{display:none!important}
  details.dots>summary,details.x>summary::after{display:none}
  #contactForm{border:0;padding:0;margin-top:0;background:none}
  /* collapsed <details> print expanded (no-JS fallback; js/site.js opens them on beforeprint) */
  details::details-content{content-visibility:visible}
  /* tighter vertical rhythm; the footer keeps only logo, tagline and copyright */
  section{padding:18px 0}
  section.hero[class],.about-hero{padding:0 0 12px}
  .divider{margin:18px 0}
  footer{padding:12px 0 0}
  .fcols{display:block;margin-bottom:6px}
  .fcols>div:not(:first-child){display:none}
  /* page breaks */
  .card,.founder,.tstat,.stepline>*,.stats,figure,.quad-html>div,.legal ul li{break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3,.label,.legal .updated{break-after:avoid;page-break-after:avoid}
  p{orphans:3;widows:3}
  /* external link destinations */
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;font-weight:400;overflow-wrap:anywhere}
  .founder a.li{display:block;width:auto;height:auto;border:0;background:none;margin-top:4px;font-size:0}
  .founder a.li::after{content:attr(href);font-size:8pt}
}

/* ---------- Forced colours ---------- */
@media (forced-colors:active){
  /* inline SVG keeps its authored colours (UA preserve-parent-color) while the page behind
     turns Canvas, so the diagrams switch to system colours; Highlight marks the Soverita parts */
  .diag.quad svg .q,.diag.wide svg .bx,.shield svg .pf{fill:Canvas;stroke:CanvasText}
  .diag.quad svg .qh,.diag.wide svg .hl{fill:Canvas;stroke:Highlight;stroke-width:3}
  .diag.quad svg .qt,.diag.quad svg .qs,.diag.quad svg .ax,.diag.wide svg .t,.diag.wide svg .s,.diag.wide svg .lab,.shield svg .pt,.shield svg .ps,.shield svg .po,.shield svg .pl{fill:CanvasText}
  .shield svg .x{stroke:CanvasText}
  .hero-visual rect{fill:Canvas;stroke:CanvasText;stroke-width:1}
  .hero-visual rect[stroke="#9F1239"],.hero-visual rect[stroke="#881337"]{stroke:Highlight}
  .hero-visual text{fill:CanvasText}
  .hero-visual line{stroke:CanvasText}
  .hero-visual circle,.hero-visual ellipse{display:none}
  /* phone 2x2 quadrant: the Soverita cell keeps a thicker Highlight border (padding offsets the extra 1px) */
  .quad-html div.hl{border:2px solid Highlight;padding:11px}
  /* backgrounds are replaced, so primary buttons need a border to keep their box */
  .btn-p{border:1px solid}
  /* hover cues that were colour or background only */
  .btn:hover,.nav-links a:hover,.fcols a:hover,.founder a.li:hover{text-decoration:underline}
  .btn-p:hover,.btn-g:hover,.founder a.li:hover{border-color:Highlight}
  /* raster artwork drawn for a dark (logo) or light (bird) ground keeps that ground as a plate */
  .logo img{forced-color-adjust:none;background:var(--void);border-radius:4px;box-sizing:content-box;padding:3px 6px}
  .about-hero .ah-right img{forced-color-adjust:none;background:var(--frost);border-radius:6px;padding:12px}
  /* comparison table: the highlighted column loses its fill, so widen its side borders */
  .cmp td.hi{border-left-width:3px;border-right-width:3px}
  /* status cards on phones: the title band loses its fill, so rule it off */
  .st tr>:first-child{border-bottom:1px solid}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  details.x summary::after{transition:none}
  /* the hero dots animate with SMIL, which CSS cannot pause: hide them */
  .hero-visual circle{display:none}
}