/* Patchblox corporate site. One stylesheet for every page.

   Theme: <html data-theme="light|dark"> is set before first paint by js/theme-init.js
   (the visitor's saved choice, else the operating system's setting). Every color below
   comes from the tokens in the two theme blocks; pages use the tokens, never raw colors.
   The legacy names further down (--bg-dark, --text-primary and the rest) map the older
   pages' variables onto the same tokens so they follow the theme too. */

/* ---------- fonts (self-hosted Source Sans 3, SIL Open Font License) ---------- */
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url('/fonts/SourceSans3-Upright.woff2') format('woff2');
}
@font-face {
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 200 900;
    font-display: swap;
    src: url('/fonts/SourceSans3-Italic.woff2') format('woff2');
}

/* ---------- theme tokens ---------- */
:root,
[data-theme="light"] {
    color-scheme: light;
    --paper: #FFFFFF;
    --mist: #EEF6FD;
    --ink: #0F2742;
    --muted: #4D6178;
    --note: #5E7183;
    --line: #CCDDEC;
    --line-strong: #A3BFDA;
    --sky: #5AB4F0;
    --skylight: #D6ECFC;
    --blue: #1A73C8;
    --blue-hover: #155FA6;
    --link: #1769B8;
    --accent: #0B6FA6;
    --btn2: #3594DA;
    --focus: #1A73C8;
    --surface: #FFFFFF;
    --surface2: #F5F9FD;
    --navbg: rgba(255,255,255,.92);
    --hero: #DCEDFB;
    --cta: #E3F0FC;
    --foot: #0F2742;
    --foottext: #A9B9C8;
    --inkband: #0F2742;
    --shotline: #C9DDF0;
    --shotshadow: 0 30px 70px rgba(16,37,58,.18);
    --shadow: 0 12px 32px rgba(16,37,58,.12);
    --t1: #9F1C1C; --t1bg: #FBE9E7;
    --t2: #7A4B00; --t2bg: #FBF0D9;
    --t3: #1F4E8C; --t3bg: #E3EEFB;
    --t4: #4D6178; --t4bg: #EEF2F6;
    --yes: #17804D;
    --danger: #B3261E;
    --danger-bg: #FBE9E7;
    --warn: #8A5A00;
    --input-bg: #FFFFFF;
    --input-line: #B9D0E6;
    --chip-bg: #E3EEFB;
    --chip-text: #1F4E8C;
    --code-bg: #F2F6FB;
    /* Accents: text color and tint for each of the five platform areas (and blog categories),
       plus the green used for checks. All pass AA on white, on their tint and on the hero. */
    --c1: #1769B8; --c1-bg: #E3F0FC;
    --c2: #B3261E; --c2-bg: #FBE9E7;
    --c3: #6A3FC4; --c3-bg: #EFEAFB;
    --c4: #0A6E63; --c4-bg: #DFF2EE;
    --c5: #8F5200; --c5-bg: #FBF0D9;
    --ok: #146F40; --ok-bg: #E3F4EA;
    --thead: #E3F0FC;
    --headband: #0F2742;
    --dot: #D5E3F1;
    --gridline: rgba(26,115,200,.06);
    --panelshadow: 0 18px 48px rgba(16,37,58,.14);
    /* The closing call-to-action band: solid blue in the light theme. */
    --band: #155FA6; --band-ink: #FFFFFF; --band-text: #E3F0FC;
    --bandbtn: #FFFFFF; --bandbtn-ink: #155FA6; --bandbtn-hover: #E3F0FC; --bandbtn2-ink: #FFFFFF; --bandbtn2-line: rgba(255,255,255,.75);
}
[data-theme="dark"] {
    color-scheme: dark;
    --paper: #0B1626;
    --mist: #0F1E33;
    --ink: #E7EEF7;
    --muted: #A8B8CB;
    --note: #93A6BB;
    --line: #22395A;
    --line-strong: #2E4A70;
    --sky: #5AB4F0;
    --skylight: #16365A;
    --blue: #1A73C8;
    --blue-hover: #2A84D8;
    --link: #7CC4F5;
    --accent: #5AB4F0;
    --btn2: #4E9FDD;
    --focus: #7CC4F5;
    --surface: #10213A;
    --surface2: #13284A;
    --navbg: rgba(11,22,38,.92);
    --hero: linear-gradient(180deg,#0B1626 0,#0F1E33 100%);
    --cta: linear-gradient(120deg,#13304F,#0F2440);
    --foot: #07101C;
    --foottext: #93A6BB;
    --inkband: transparent;
    --shotline: #22395A;
    --shotshadow: 0 30px 70px rgba(0,0,0,.45);
    --shadow: 0 12px 32px rgba(0,0,0,.4);
    --t1: #FFB3AA; --t1bg: #4A1A1A;
    --t2: #F7D27C; --t2bg: #3D2E0E;
    --t3: #A9D3FA; --t3bg: #16365A;
    --t4: #C3CFDC; --t4bg: #1C2C42;
    --yes: #5FD39A;
    --danger: #FF8A80;
    --danger-bg: #4A1A1A;
    --warn: #F7D27C;
    --input-bg: #0F1E33;
    --input-line: #2E4A70;
    --chip-bg: #16365A;
    --chip-text: #A9D3FA;
    --code-bg: #0F1E33;
    --c1: #7CC4F5; --c1-bg: #15304D;
    --c2: #FF8A80; --c2-bg: #3A2232;
    --c3: #B9A6F7; --c3-bg: #2A2350;
    --c4: #5ED3C2; --c4-bg: #11332F;
    --c5: #F4C15F; --c5-bg: #36301E;
    --ok: #5FD39A; --ok-bg: #123832;
    --thead: #13284A;
    --headband: #1B3354;
    --dot: #22395A;
    --gridline: rgba(124,196,245,.06);
    --panelshadow: 0 18px 48px rgba(0,0,0,.45);
    --band: linear-gradient(120deg,#13304F,#0F2440); --band-ink: #E7EEF7; --band-text: #A8B8CB;
    --bandbtn: #1A73C8; --bandbtn-ink: #FFFFFF; --bandbtn-hover: #2A84D8; --bandbtn2-ink: #7CC4F5; --bandbtn2-line: #4E9FDD;
}
/* Without script the page has no data-theme; follow the operating system instead. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --paper: #0B1626; --mist: #0F1E33; --ink: #E7EEF7; --muted: #A8B8CB; --note: #93A6BB;
        --line: #22395A; --line-strong: #2E4A70; --sky: #5AB4F0; --skylight: #16365A;
        --blue: #1A73C8; --blue-hover: #2A84D8; --link: #7CC4F5; --accent: #5AB4F0; --btn2: #4E9FDD;
        --focus: #7CC4F5; --surface: #10213A; --surface2: #13284A; --navbg: rgba(11,22,38,.92);
        --hero: linear-gradient(180deg,#0B1626 0,#0F1E33 100%); --cta: linear-gradient(120deg,#13304F,#0F2440);
        --foot: #07101C; --foottext: #93A6BB; --inkband: transparent; --shotline: #22395A;
        --shotshadow: 0 30px 70px rgba(0,0,0,.45); --shadow: 0 12px 32px rgba(0,0,0,.4);
        --t1: #FFB3AA; --t1bg: #4A1A1A; --t2: #F7D27C; --t2bg: #3D2E0E; --t3: #A9D3FA; --t3bg: #16365A;
        --t4: #C3CFDC; --t4bg: #1C2C42; --yes: #5FD39A; --danger: #FF8A80; --danger-bg: #4A1A1A;
        --warn: #F7D27C; --input-bg: #0F1E33; --input-line: #2E4A70; --chip-bg: #16365A;
        --chip-text: #A9D3FA; --code-bg: #0F1E33;
        --c1: #7CC4F5; --c1-bg: #15304D; --c2: #FF8A80; --c2-bg: #3A2232; --c3: #B9A6F7; --c3-bg: #2A2350;
        --c4: #5ED3C2; --c4-bg: #11332F; --c5: #F4C15F; --c5-bg: #36301E; --ok: #5FD39A; --ok-bg: #123832;
        --thead: #13284A; --headband: #1B3354; --dot: #22395A; --gridline: rgba(124,196,245,.06); --panelshadow: 0 18px 48px rgba(0,0,0,.45);
        --band: linear-gradient(120deg,#13304F,#0F2440); --band-ink: #E7EEF7; --band-text: #A8B8CB;
        --bandbtn: #1A73C8; --bandbtn-ink: #FFFFFF; --bandbtn-hover: #2A84D8; --bandbtn2-ink: #7CC4F5; --bandbtn2-line: #4E9FDD;
    }
    :root:not([data-theme]) .only-light { display: none !important; }
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .only-dark { display: none !important; }
}

/* Legacy names, kept so the blog, Patch Radar and legal pages follow the theme. */
:root {
    --bg-dark: var(--paper);
    --bg-darker: var(--mist);
    --bg-card: var(--surface);
    --bg-card-hover: var(--surface2);
    --text-primary: var(--ink);
    --text-secondary: var(--muted);
    --text-muted: var(--note);
    --primary-blue: var(--blue);
    --primary-blue-dark: var(--blue-hover);
    --primary-blue-light: var(--link);
    --accent-blue: var(--link);
    --electric-blue: var(--accent);
    --success-green: var(--yes);
    --warning-yellow: var(--warn);
    --error-red: var(--danger);
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    /* Hard lines, like the product: nothing on the site has rounded corners. */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --shadow-sm: 0 2px 6px rgba(16,37,58,.08);
    --shadow-md: 0 6px 16px rgba(16,37,58,.10);
    --shadow-lg: var(--shadow);
    --shadow-xl: var(--shotshadow);
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    /* Solid accent fills behind white text (tiles, tags, squares); the same in both themes. */
    --s1: #1769B8; --s2: #B3261E; --s3: #6A3FC4; --s4: #0A6E63; --s5: #8F5200; --s-ok: #146F40; --s-wait: #8A5A00;
    --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='square'/%3E%3C/svg%3E");
    /* The current accent. Sections set one of .acc-1 to .acc-5; everything else is blue. */
    --acc: var(--c1); --acc-bg: var(--c1-bg); --acc-solid: var(--s1);
}
/* Platform areas and blog categories: 1 patching, 2 posture, 3 governance, 4 operations, 5 reporting. */
.acc-1 { --acc: var(--c1); --acc-bg: var(--c1-bg); --acc-solid: var(--s1); }
.acc-2 { --acc: var(--c2); --acc-bg: var(--c2-bg); --acc-solid: var(--s2); }
.acc-3 { --acc: var(--c3); --acc-bg: var(--c3-bg); --acc-solid: var(--s3); }
.acc-4 { --acc: var(--c4); --acc-bg: var(--c4-bg); --acc-solid: var(--s4); }
.acc-5 { --acc: var(--c5); --acc-bg: var(--c5-bg); --acc-solid: var(--s5); }
.acc-ok { --acc: var(--ok); --acc-bg: var(--ok-bg); --acc-solid: var(--s-ok); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
/* List bullets are small squares in the section's accent, like everything else here. */
ul { list-style-type: square; }
li::marker { color: var(--acc-solid); }
a { color: var(--link); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}
code, pre, .mono { font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace; }
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

[data-theme="light"] .only-dark { display: none !important; }
[data-theme="dark"] .only-light { display: none !important; }

.page { display: flex; flex-direction: column; min-height: 100vh; }
.main-content { flex: 1; }
/* Short pages (404, error, thank you) are a single hero: let it fill down to the footer. */
.main-content:has(> .hero:only-child) { display: flex; flex-direction: column; }
.main-content > .hero:only-child { flex: 1; }
.main-content:focus { outline: none; }
.wrap, .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; }
.skip-link:focus { left: 12px; background: var(--blue); color: #fff; padding: .5rem .8rem; border-radius: 0; text-decoration: none; font-weight: 600; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header ---------- */
.nav { position: sticky; top: 0; z-index: 40; background: var(--navbg); border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.4) blur(8px); }
.navin { display: flex; align-items: center; gap: 1.5rem; height: 68px; }
.brand { display: block; flex: 0 0 auto; }
.brand img.only-light { height: 44px; width: auto; }
.brand img.only-dark { height: 30px; width: auto; }
.links { display: flex; gap: 1.3rem; margin-left: auto; font-size: .95rem; align-items: center; }
.links a { color: var(--muted); text-decoration: none; }
.links a:hover, .links a[aria-current="page"] { color: var(--link); }
.dd { position: relative; }
.dd > a::after { content: ""; display: inline-block; width: .38em; height: .38em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: 0 0 .22em .45em; }
.dd-menu { display: none; position: absolute; top: 100%; left: -1rem; min-width: 260px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--s1); border-radius: 0; box-shadow: var(--shadow); padding: .5rem 0; }
.dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.dd:hover .dd-menu, .dd:focus-within .dd-menu { display: block; }
.dd-menu a { display: block; padding: .45rem 1rem; color: var(--ink); }
.dd-menu a:hover { background: var(--surface2); color: var(--link); }
.navtools { display: flex; gap: .6rem; align-items: center; }
.icon-btn { background: transparent; border: 1px solid var(--line-strong); border-radius: 0; width: 38px; height: 38px; display: inline-grid; place-items: center; color: var(--ink); cursor: pointer; }
.icon-btn:hover { border-color: var(--btn2); }
.icon-btn svg { width: 18px; height: 18px; }
[data-theme="light"] .ic-sun { display: none; }
[data-theme="dark"] .ic-moon { display: none; }
.menu-btn { display: none; }
.links .mob { display: none; }

/* ---------- buttons ---------- */
.btn, .btn-primary, .btn-secondary {
    display: inline-block;
    text-decoration: none;
    font-family: inherit;
    font-weight: 600;
    padding: .8rem 1.4rem;
    font-size: .98rem;
    line-height: 1.2;
    white-space: nowrap;
    border-radius: 0;
    cursor: pointer;
    text-align: center;
}
.btn.small { padding: .55rem 1rem; font-size: .9rem; }
.btn-large { padding: 1rem 1.8rem; font-size: 1.05rem; }
.btn-full { display: block; width: 100%; }
.btn-primary { background: var(--blue); color: #fff; border: 1.5px solid var(--blue); }
.btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }
.btn-secondary { background: var(--surface); color: var(--link); border: 1.5px solid var(--btn2); }
.btn-secondary:hover { border-color: var(--link); color: var(--link); }
.textlink { display: inline-block; margin-top: 1rem; font-weight: 600; }

/* ---------- hero ---------- */
.hero { padding: 4.5rem 0 4rem; background: var(--hero); overflow: hidden; }
/* In the light theme every page hero (this one, the blog's, articles' and Patch Radar's) sits on
   a flat sky blue. Small gray and blue text there steps one shade darker so it keeps AA contrast
   (4.5:1); headings and buttons are unchanged. */
[data-theme="light"] :is(.hero, .blog-hero, .article-hero, .pt-hero) { --muted: #3D5268; --note: #44596F; --link: #135A9E; --accent: #0B5F8E; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) :is(.hero, .blog-hero, .article-hero, .pt-hero) { --muted: #3D5268; --note: #44596F; --link: #135A9E; --accent: #0B5F8E; }
}
.heroin { display: grid; grid-template-columns: 5fr 7fr; gap: 3.5rem; align-items: center; }
.hero.simple .heroin { grid-template-columns: 1fr; }
.eyebrow { display: flex; align-items: baseline; gap: .55rem; color: var(--link); font-weight: 600; font-size: 1rem; margin-bottom: 1rem; text-wrap: balance; }
.eyebrow::before, .kicker::before { content: ""; flex: 0 0 auto; width: .62rem; height: .62rem; background: var(--acc-solid); }
h1 { font-size: clamp(2.3rem, 4vw, 3.4rem); line-height: 1.06; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.hero.simple h1 { max-width: 22ch; }
.lede { color: var(--muted); margin-top: 1.25rem; font-size: 1.08rem; max-width: 62ch; }
.ctas { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }
.availability { margin-top: 1rem; font-size: .95rem; color: var(--muted); }
.shot-figure.heroshot { margin-right: -14vw; }
.platforms { margin-top: 3.5rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; color: var(--muted); font-size: .95rem; }
.platforms ul { display: flex; gap: 1.4rem; list-style: none; flex-wrap: wrap; }
.platforms li { color: var(--ink); font-weight: 600; }
.platforms a { font-weight: 600; }
.crumb { font-size: .9rem; color: var(--note); margin-bottom: 1rem; }
.crumb a { color: var(--link); text-decoration: none; }
.crumb span { margin: 0 .45rem; }

/* ---------- hero panels ----------
   Heroes that used to be text only (Platform, Solutions, Trust, Supported platforms, About) put
   the headline beside the pitch and a panel under both, in the release train's style: a grid
   backdrop, hard edges and the accent colors. The panel content is the page's own, in brief. */
.hsplit { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: end; }
.hsplit h1 { max-width: 20ch; }
.hsplit .lede { margin-top: 0; }
.hpanel { margin-top: 2.6rem; border: 1px solid var(--line); background-color: var(--surface); box-shadow: var(--panelshadow);
          background-image: radial-gradient(70% 55% at 50% 0%, color-mix(in srgb, var(--sky) 14%, transparent), transparent 70%),
                            linear-gradient(var(--gridline) 1px, transparent 1px), linear-gradient(90deg, var(--gridline) 1px, transparent 1px);
          background-size: auto, 32px 32px, 32px 32px; }
.hpanel-top { display: flex; align-items: center; gap: .9rem 1rem; flex-wrap: wrap; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.hpanel-top .ic { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; background: var(--c1-bg); color: var(--c1); }
.hpanel-top .ic svg { width: 22px; height: 22px; }
.hpanel-top small { display: block; color: var(--muted); font-size: .82rem; }
.hpanel-top b { display: block; font-size: 1.05rem; line-height: 1.2; color: var(--ink); }
.hpanel-tag { margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; padding: .22rem .6rem; background: var(--ok-bg); color: var(--ok);
              font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hpanel-tag i { width: 8px; height: 8px; background: var(--ok); }
.hpanel-key { margin-left: auto; display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .8rem; color: var(--muted); }
.hpanel-key span { display: inline-flex; align-items: center; gap: .4rem; }
.hpanel-key i { width: 10px; height: 10px; }
.hpanel-body { padding: 22px 24px 24px; }
.hpanel-foot { display: flex; justify-content: space-between; gap: .4rem 1rem; flex-wrap: wrap; padding: 12px 24px 14px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--note); }
@keyframes pb-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes pb-tick { from { background-color: transparent; background-size: 0; box-shadow: inset 0 0 0 2px var(--line-strong); } }
.hpanel-body > * > * { animation: pb-rise .5s ease-out backwards; }
.hpanel-body > * > :nth-child(2) { animation-delay: .07s; }
.hpanel-body > * > :nth-child(3) { animation-delay: .14s; }
.hpanel-body > * > :nth-child(4) { animation-delay: .21s; }
.hpanel-body > * > :nth-child(5) { animation-delay: .28s; }

/* Platform: one tile per area, each linking to its section. */
.mods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; gap: 14px; }
/* Each tile spans four rows of the grid (subgrid), so titles, lists and footers line up across tiles. */
.mod { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
       transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.mod:hover { transform: translateY(-3px); border-color: var(--acc-solid); box-shadow: var(--shadow); color: var(--ink); }
.mod-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .8rem; background: var(--acc-solid); color: #fff;
            font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.mod-title { font-size: 1.02rem; line-height: 1.3; letter-spacing: 0; padding: .85rem .9rem 0; text-wrap: balance; }
.mod ul { list-style: none; display: grid; gap: .45rem; align-content: start; padding: .7rem .9rem 1rem; }
.mod li { position: relative; padding-left: 1rem; font-size: .86rem; line-height: 1.35; color: var(--muted); }
.mod li::before { content: ""; position: absolute; left: 0; top: .42em; width: .45rem; height: .45rem; background: var(--acc-solid); }
.mod-go { margin-top: auto; padding: .6rem .9rem; border-top: 1px solid var(--line); font-size: .85rem; font-weight: 700; color: var(--acc); }

/* Solutions: the Microsoft tool a team runs, and what Patchblox adds to it. */
.stack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto 1fr; gap: 14px; }
.stk { grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 0; background: var(--surface); border: 1px solid var(--line); }
.stk-head { display: block; padding: .85rem .95rem .95rem; background: var(--headband); color: #fff; text-decoration: none; }
.stk-head:hover { color: #fff; }
.stk-head small { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #A9C4DE; }
.stk-head b { display: block; font-size: 1.1rem; line-height: 1.25; margin-top: .2rem; }
.stk-head span { display: block; font-size: .85rem; line-height: 1.35; margin-top: .3rem; color: #C9D7E6; }
.stk.pb .stk-head { background: var(--s1); }
.stk.pb .stk-head small { color: #FFFFFF; }
.stk.pb .stk-head span { color: #E3F0FC; }
.stk-adds { padding: .85rem .95rem 1.05rem; }
.stk-adds p { font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ok); margin-bottom: .55rem; }
.stk-adds ul { list-style: none; display: grid; gap: .5rem; }
.stk-adds li { display: grid; grid-template-columns: 18px 1fr; gap: .55rem; font-size: .88rem; line-height: 1.35; color: var(--ink); }
.stk-adds li::before { content: ""; width: 18px; height: 18px; background: var(--s-ok) var(--check) center / 12px no-repeat; }

/* Trust: the controls, ticked off like a gate's checks. */
.checks { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
.chk { display: grid; grid-template-columns: 26px 1fr; gap: .85rem; padding: .85rem 0; border-top: 1px solid var(--line); }
.chk:nth-child(-n+2) { border-top: 0; padding-top: .2rem; }
.chk .box { width: 26px; height: 26px; background: var(--s-ok) var(--check) center / 15px no-repeat; animation: pb-tick .35s ease-out backwards; }
.chk b { display: block; font-size: .98rem; line-height: 1.3; color: var(--ink); }
.chk span:not(.box) { display: block; margin-top: .15rem; color: var(--muted); font-size: .9rem; line-height: 1.4; }
.checks > .chk { animation: none; }
.chk:nth-child(1) .box { animation-delay: .35s; } .chk:nth-child(2) .box { animation-delay: .47s; }
.chk:nth-child(3) .box { animation-delay: .59s; } .chk:nth-child(4) .box { animation-delay: .71s; }
.chk:nth-child(5) .box { animation-delay: .83s; } .chk:nth-child(6) .box { animation-delay: .95s; }
.chk:nth-child(7) .box { animation-delay: 1.07s; } .chk:nth-child(8) .box { animation-delay: 1.19s; }

/* Supported platforms: versions and what works, per operating system. */
.cov { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.covc { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); }
.covc-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; padding: .7rem .95rem; background: var(--acc-solid); color: #fff; }
.covc-head b { font-size: 1.15rem; }
.covc-head small { font-size: .8rem; font-weight: 700; }
.vers { display: flex; flex-wrap: wrap; gap: .35rem; padding: .85rem .95rem; border-bottom: 1px solid var(--line); }
.vers span { font-size: .8rem; font-weight: 700; line-height: 1.3; padding: .16rem .45rem; background: var(--acc-bg); color: var(--acc); }
.caps { list-style: none; display: grid; gap: .5rem; padding: .85rem .95rem 1.05rem; }
.caps li { display: grid; grid-template-columns: 14px 1fr; gap: .6rem; font-size: .88rem; line-height: 1.35; color: var(--ink); }
.caps li::before { content: ""; width: 14px; height: 14px; margin-top: .15em; background: var(--s-ok); }
.caps li.part::before { background: var(--s-wait); }
.caps li small { display: block; color: var(--note); font-size: .8rem; }

/* About: the founders' companies, in order. */
.tl { display: grid; grid-template-columns: minmax(0, .8fr) repeat(3, minmax(0, 1fr)); gap: 14px; }
.tl-stat { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.2rem; background: var(--headband); color: #fff; }
.tl-stat b { font-size: 3rem; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.tl-stat span { color: #C9D7E6; font-size: .95rem; line-height: 1.4; }
.tl-node { position: relative; display: flex; flex-direction: column; padding: 1rem 1.1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--headband); }
.tl-node.now { border-top-color: var(--s1); }
.tl-node + .tl-node::before { content: ""; position: absolute; top: 1.35rem; left: -15px; width: 14px; height: 2px; background: var(--line-strong); }
.tl-when { font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--note); }
.tl-name { font-size: 1.3rem; line-height: 1.2; margin-top: .3rem; letter-spacing: 0; }
.tl-node p { color: var(--muted); font-size: .92rem; line-height: 1.4; margin-top: .35rem; }
.tl-tag { align-self: flex-start; margin-top: auto; padding: .22rem .5rem; font-size: .8rem; font-weight: 700; background: var(--ok-bg); color: var(--ok); }
.tl-node p + .tl-tag { margin-top: .8rem; }
.tl-node.now .tl-tag { background: var(--c1-bg); color: var(--c1); }

@media (max-width: 1080px) {
    .mods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tl-stat { grid-column: 1 / -1; flex-direction: row; align-items: center; }
    .tl-stat + .tl-node::before { display: none; }
}
@media (max-width: 900px) {
    .hsplit { grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
    .cov, .checks { grid-template-columns: 1fr; }
    .chk:nth-child(2) { border-top: 1px solid var(--line); padding-top: .85rem; }
}
@media (max-width: 640px) {
    .hpanel-top, .hpanel-body, .hpanel-foot { padding-left: 16px; padding-right: 16px; }
    .hpanel-tag, .hpanel-key { margin-left: 0; }
    .mods, .stack, .tl { grid-template-columns: 1fr; }
    .tl-stat { flex-direction: column; align-items: flex-start; }
    .tl-node + .tl-node::before { top: -15px; left: 1.35rem; width: 2px; height: 14px; }
}

/* ---------- sections ---------- */
.band { padding: 5rem 0; }
.band.tight { padding: 3.5rem 0; }
.band.mist { background: var(--mist); }
h2 { font-size: clamp(1.8rem, 3vw, 2.2rem); line-height: 1.12; font-weight: 800; letter-spacing: -.015em; text-wrap: balance; }
h2.narrow { max-width: 24ch; }
h3, .h3 { font-size: 1.15rem; line-height: 1.3; font-weight: 700; letter-spacing: 0; }
.section-lede { color: var(--muted); max-width: 64ch; margin-top: .75rem; }
.capgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 2.5rem; }
.cap { border-top: 4px solid var(--acc-solid); padding-top: 1rem; }
.cap h3 { margin-bottom: .5rem; }
.cap p { color: var(--muted); font-size: .97rem; }
.cap a { display: inline-block; margin-top: .6rem; font-weight: 700; text-decoration: none; font-size: .95rem; color: var(--acc); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.25rem; }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.cards.four { grid-template-columns: repeat(4, 1fr); }
.cards.five { grid-template-columns: repeat(5, 1fr); }
.card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--acc-solid); padding: 1.3rem 1.4rem; }
/* Cards that state a built-in control carry a green check in front of their title. */
.checkcards .card { border-top-color: var(--s-ok); }
.checkcards .card h3, .checkcards .card .h3 { display: flex; align-items: flex-start; gap: .55rem; }
.checkcards .card h3::before, .checkcards .card .h3::before { content: ""; flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .1em; background: var(--s-ok) var(--check) center / .8rem no-repeat; }
.card h3, .card .h3 { margin-bottom: .45rem; }
.card p, .card li { color: var(--muted); font-size: .97rem; }
.card p + p { margin-top: .6rem; }
.card ul { margin: .4rem 0 0 1.1rem; }
.card li { margin: .25rem 0; }
.card .textlink { margin-top: .8rem; }
.founders-line { margin-top: 2rem; color: var(--muted); }
.founders-line a { font-weight: 600; }
.quote { border-left: 4px solid var(--acc-solid); background: var(--acc-bg); padding: .85rem 1.1rem; margin: 1.1rem 0; color: var(--ink); font-size: 1.05rem; font-style: italic; }
.prose p { color: var(--muted); margin-top: 1rem; max-width: 72ch; }
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose ul { margin: .75rem 0 0 1.2rem; color: var(--muted); }
.prose li { margin: .35rem 0; }

/* ---------- feature rows ---------- */
.subnav { position: sticky; top: 68px; z-index: 30; background: var(--navbg); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.subnav .wrap { display: flex; gap: 1.5rem; overflow-x: auto; height: 48px; align-items: center; font-size: .95rem; }
.subnav a { text-decoration: none; color: var(--muted); white-space: nowrap; font-weight: 600; }
.subnav a:hover { color: var(--link); }
.subnav a[class*="acc-"]::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .45rem; background: var(--acc-solid); vertical-align: .06em; }
.feature { display: grid; grid-template-columns: 5fr 7fr; gap: 3rem; align-items: start; }
.feature.flip { grid-template-columns: 7fr 5fr; }
.feature.flip .ftext { order: 2; }
.feature.solo { grid-template-columns: 1fr; }
.feature.solo .ftext { max-width: 80ch; }
.feature ul.ticks, ul.ticks { list-style: none; margin-top: 1.1rem; }
ul.ticks li { position: relative; padding-left: 1.6rem; margin: .55rem 0; color: var(--muted); font-size: .98rem; }
ul.ticks li::before { content: ""; position: absolute; left: 0; top: .58em; width: .55rem; height: .55rem; background: var(--acc-solid); }
ul.ticks li strong { color: var(--ink); }
.kicker { display: flex; align-items: center; gap: .55rem; color: var(--acc); font-weight: 700; font-size: .95rem; margin-bottom: .4rem; }
.caption { font-size: .85rem; color: var(--note); margin-top: .6rem; }
.sources { font-size: .92rem; color: var(--note); margin-top: 1rem; }

/* ---------- product screenshots (Components/Site/Shot.razor) ---------- */
.shot-figure { margin: 0; }
.shot-figure a { display: block; }
.shot { border: 1px solid var(--shotline); box-shadow: var(--shotshadow); }
.shot-figure.dark-only { background: var(--inkband); padding: 1.1rem; }
[data-theme="dark"] .shot-figure.dark-only { padding: 0; }
.shot-figure figcaption { font-size: .85rem; color: var(--note); margin-top: .6rem; }
[data-theme="light"] .shot-figure.dark-only figcaption { color: #A9B9C8; }
.shot-pair { display: grid; gap: 1.5rem; }

/* ---------- screenshot sequences (Components/Site/ShotSequence.razor and ShotStep.razor) ---------- */
/* Every step sits in the same grid cell, so the frame keeps its size whatever is showing. The
   incoming step fades in over the outgoing one, which stays opaque underneath until the fade is
   done, so the frame never dims halfway. site.js adds the buttons and the playing; without it the
   first step shows alone. */
.seq-stage { display: grid; }
.seq-frame { grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden; }
.seq-frame.on { opacity: 1; visibility: visible; z-index: 2; transition: opacity .6s ease; }
.seq-frame.was { opacity: 1; visibility: visible; z-index: 1; }
.seq-cut .seq-frame { transition: none !important; }
.seq:not(.seq-ready) .seq-frame:first-child { opacity: 1; visibility: visible; }
/* The step buttons: a track that fills while the step shows, then the step's number and name. */
.seq-bar { display: flex; align-items: flex-end; gap: .75rem; margin-top: 1rem; }
.seq-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .5rem; padding: .25rem 0; border: 0; background: none;
            color: var(--muted); font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.25; text-align: left; cursor: pointer; }
.seq-step:hover, .seq-step[aria-pressed="true"] { color: var(--ink); }
.seq-track { display: block; height: 4px; background: var(--line); }
.seq-fill { display: block; height: 100%; width: 0; background: var(--acc-solid); }
.seq-label { display: flex; align-items: center; gap: .5rem; }
.seq-label b { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; font-size: .75rem;
               background: var(--acc-bg); color: var(--acc); }
.seq-step[aria-pressed="true"] .seq-label b { background: var(--acc-solid); color: #FFFFFF; }
/* Pause, play and replay. data-state names what the button does next. */
.seq-play { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; display: inline-grid; place-items: center; padding: 0;
            border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; }
.seq-play:hover { border-color: var(--acc-solid); color: var(--acc); }
.seq-play[data-state="pause"] .i-play, .seq-play[data-state="play"] .i-pause { display: none; }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--acc-solid); margin-top: 1.75rem; }
.tablewrap table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 640px; }
.tablewrap th, .tablewrap td { text-align: left; padding: .85rem 1rem; vertical-align: top; }
.tablewrap th { font-weight: 700; font-size: .85rem; color: var(--ink); background: var(--thead); }
.tablewrap td { border-top: 1px solid var(--line); }
.tablewrap td.k { font-weight: 600; white-space: nowrap; }
.tablewrap td .dim { color: var(--note); font-size: .88rem; }
.compare th:nth-child(3), .compare td:nth-child(3) { background: color-mix(in srgb, var(--skylight) 35%, transparent); }
.yes { color: var(--yes); font-weight: 700; }
.fix { font-weight: 600; white-space: nowrap; }
.tier { display: inline-block; font-weight: 600; font-size: .82rem; padding: .2rem .6rem; white-space: nowrap; }
.tier.t1 { color: var(--t1); background: var(--t1bg); }
.tier.t2 { color: var(--t2); background: var(--t2bg); }
.tier.t3 { color: var(--t3); background: var(--t3bg); }
.tier.t4 { color: var(--t4); background: var(--t4bg); }
.note { font-size: .85rem; color: var(--note); margin-top: .75rem; }
.updated { font-size: .9rem; color: var(--note); margin-top: 1rem; }

/* ---------- Patch Radar teaser (Home) ---------- */
.radarhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.radarhead p { max-width: 58ch; margin-top: .5rem; color: var(--muted); }
.radarstats { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-top: 1.75rem; }
.radarstats div { min-width: 9rem; }
.radarstats b { display: block; font-size: 1.9rem; line-height: 1.1; font-weight: 800; color: var(--ink); }
.radarstats span { color: var(--muted); font-size: .92rem; }

/* ---------- pipeline (Components/Site/Pipeline.razor) ----------
   The patching section's Automation Workflow, top to bottom: one moment of a sample release, drawn
   like the release train. In a two-column feature marked .fill it stretches to the text column's
   height and spreads its steps along the track. */
.feature.fill { align-items: stretch; }
.feature.fill > :not(.ftext) { display: flex; flex-direction: column; }
.pipe { flex: 1; display: flex; flex-direction: column; margin: 0; border: 1px solid var(--line); background-color: var(--surface); box-shadow: var(--panelshadow);
        background-image: linear-gradient(var(--gridline) 1px, transparent 1px), linear-gradient(90deg, var(--gridline) 1px, transparent 1px); background-size: 32px 32px; }
.pipe-top { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.pipe-top .ic { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; background: var(--c1-bg); color: var(--c1); }
.pipe-top .ic svg { width: 20px; height: 20px; }
.pipe-top small { display: block; color: var(--muted); font-size: .8rem; }
.pipe-top b { display: block; font-size: 1.02rem; line-height: 1.2; }
.pipe-run { margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; padding: .2rem .6rem; background: var(--ok-bg); color: var(--ok);
            font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pipe-run i { width: 8px; height: 8px; background: var(--ok); animation: pipe-ping 1.8s ease-out infinite; }
.pipe-steps { flex: 1; position: relative; list-style: none; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 12px 20px 12px 64px; }
.pipe-steps::before { content: ""; position: absolute; left: 31px; top: 30px; bottom: 30px; width: 4px;
                      background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--sky) 75%, transparent) 0 10px, transparent 10px 18px); animation: pipe-flow 1.1s linear infinite; }
/* A step is a card on the track; its square on the track shows its state. */
.pstep { position: relative; padding: .5rem .85rem .6rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line-strong); }
.pstep::before { content: ""; position: absolute; left: -42px; top: .75rem; width: 14px; height: 14px; background: var(--line-strong); box-shadow: 0 0 0 4px var(--surface); }
.pstep.src { border-left-color: var(--s1); }
.pstep.src::before { background: var(--s1); }
.pstep.done { border-left-color: var(--s-ok); }
.pstep.done::before { background: var(--s-ok); }
.pstep.live { border-left-color: var(--s1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky) 22%, transparent); }
.pstep.live::before { background: var(--s1); animation: pipe-node 1.6s ease-out infinite; }
.phead { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .55rem; }
.phead b { font-size: .98rem; }
.phead small { color: var(--muted); font-size: .84rem; }
.ptag { margin-left: auto; padding: .12rem .45rem; font-size: .78rem; font-weight: 700; line-height: 1.3; background: var(--surface2); color: var(--muted); }
.ptag.ok { background: var(--ok-bg); color: var(--ok); }
.ptag.run { background: var(--c1-bg); color: var(--c1); }
.ptag.wait { background: var(--c5-bg); color: var(--c5); }
.prods { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .45rem; }
.prods span, .prel { display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; font-weight: 700; }
.pipe .tile { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; font-style: normal; font-size: .66rem; font-weight: 800; color: #fff;
              background: linear-gradient(135deg, var(--tint), color-mix(in srgb, var(--tint) 70%, #000)); }
/* Device squares, one per device in the sample; the installing ones blink in a wave. */
.pdots { display: grid; grid-template-columns: repeat(auto-fill, 8px); gap: 3px; margin-top: .45rem; }
.pdots i { width: 8px; height: 8px; background: var(--dot); }
.pstep.done .pdots i, .pstep.live .pdots i:nth-child(-n+25) { background: var(--ok); }
.pstep.live .pdots i:nth-child(n+26):nth-child(-n+32) { background: var(--sky); animation: pipe-blink 1.4s ease-in-out infinite; }
.pstep.live .pdots i:nth-child(27) { animation-delay: .2s; }
.pstep.live .pdots i:nth-child(28) { animation-delay: .4s; }
.pstep.live .pdots i:nth-child(29) { animation-delay: .6s; }
.pstep.live .pdots i:nth-child(30) { animation-delay: .8s; }
.pstep.live .pdots i:nth-child(31) { animation-delay: 1s; }
.pstep.live .pdots i:nth-child(32) { animation-delay: 1.2s; }
.prel { display: flex; width: 100%; margin-top: .5rem; }
.pbar { flex: 1; position: relative; height: 5px; margin-left: .35rem; background: var(--dot); overflow: hidden; }
.pbar > span { position: absolute; left: 0; top: 0; bottom: 0; width: 62%; overflow: hidden; background: linear-gradient(90deg, var(--sky), var(--blue)); }
.pbar > span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); transform: translateX(-100%); animation: pipe-shine 1.9s ease-in-out infinite; }
/* A gate sits on the track between two steps: its square badge, its checks and its state. */
.pgate { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .9rem; min-height: 28px; padding-left: .1rem; }
.pbadge { position: absolute; left: -44px; top: 50%; width: 26px; height: 26px; margin-top: -13px; display: grid; place-items: center;
          background: var(--surface); border: 2px solid var(--line-strong); color: var(--muted); }
.pbadge svg { width: 14px; height: 14px; }
.pgate.ok .pbadge { background: var(--s-ok); border-color: var(--s-ok); color: #fff; }
.pgate.approve .pbadge { background: var(--s-wait); border-color: var(--s-wait); color: #fff; }
.pgate > b { font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--note); }
.pchecks { display: flex; flex-wrap: wrap; gap: .3rem .6rem; }
.pchecks span { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pchecks i { width: 14px; height: 14px; border: 2px solid var(--line-strong); }
.pgate.ok .pchecks i { background: var(--s-ok) var(--check) center / 9px no-repeat; border-color: var(--s-ok); }
.pchecks .own i { background: var(--s-wait); border-color: var(--s-wait); }
.pgate .ptag { margin-left: auto; }
.pipe-foot { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: .4rem 1.2rem; padding: 11px 20px 13px; border-top: 1px solid var(--line);
             font-size: .8rem; line-height: 1.45; color: var(--note); }
.pipe-foot span:first-child { max-width: 62ch; }
@keyframes pipe-flow { to { background-position: 0 18px; } }
@keyframes pipe-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes pipe-node { 0% { box-shadow: 0 0 0 4px var(--surface), 0 0 0 4px color-mix(in srgb, var(--sky) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 4px var(--surface), 0 0 0 11px transparent; } }
@keyframes pipe-blink { 50% { opacity: .3; } }
@keyframes pipe-shine { to { transform: translateX(100%); } }
@media (max-width: 520px) {
    .pipe-top, .pipe-foot { padding-left: 14px; padding-right: 14px; }
    .pipe-steps { padding: 14px 14px 14px 52px; }
    .pipe-steps::before { left: 21px; }
    .pstep::before { left: -40px; }
    .pbadge { left: -42px; }
    .ptag, .pgate .ptag { margin-left: 0; }
    .prel { flex-wrap: wrap; }
    .pbar { flex: 1 1 100%; margin: .45rem 0 0; }
}

/* ---------- architecture diagram ---------- */
.archwrap { margin-top: 2rem; overflow-x: auto; }
.arch { display: block; width: 100%; height: auto; }
.arch rect.box { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.arch rect.hl { stroke: var(--sky); stroke-width: 2; }
.arch text { fill: var(--ink); font-family: inherit; font-size: 16px; font-weight: 700; }
.arch text.sub { fill: var(--muted); font-weight: 400; font-size: 13.5px; }
.arch text.lab { fill: var(--link); font-weight: 600; font-size: 12.5px; }
.arch path.ln { stroke: var(--sky); stroke-width: 2; fill: none; }
.arch path.ah { fill: var(--sky); stroke: none; }

/* ---------- pricing ---------- */
.pricegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.25rem; align-items: stretch; }
.price { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--line-strong); padding: 1.6rem; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.price.hl { border: 2px solid var(--s1); border-top-width: 4px; }
.badge { display: inline-block; font-size: .8rem; font-weight: 700; padding: .2rem .6rem; background: var(--skylight); color: var(--link); margin-bottom: .8rem; align-self: flex-start; }
.price.hl .badge { background: var(--s1); color: #fff; }
.amount { font-size: 2.4rem; font-weight: 800; line-height: 1.1; margin-top: .6rem; }
.amount small { font-size: 1rem; font-weight: 600; color: var(--muted); }
.price p { color: var(--muted); font-size: .97rem; margin-top: .5rem; }
.price .ctas { margin-top: auto; padding-top: 1.4rem; }
.included { columns: 2; column-gap: 2.5rem; margin-top: 1.5rem; list-style: none; }
.included li { break-inside: avoid; padding-left: 1.6rem; position: relative; margin: .5rem 0; color: var(--muted); }
.included li::before { content: ""; position: absolute; left: 0; top: .4em; width: .9rem; height: .5rem; border-left: 2.5px solid var(--yes); border-bottom: 2.5px solid var(--yes); transform: rotate(-45deg); }
.faq { margin-top: 1.5rem; }
.faq details { border-top: 1px solid var(--line); padding: 1rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--link); font-weight: 800; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { color: var(--muted); margin-top: .6rem; max-width: 72ch; }

/* ---------- about ---------- */
.story { max-width: 760px; }
.story p { color: var(--muted); margin-top: 1.1rem; font-size: 1.05rem; }
.story .sig { color: var(--ink); font-weight: 700; margin-top: 1.4rem; }
.story .sig span { font-weight: 400; color: var(--muted); }
.founders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; }
.person { display: grid; grid-template-columns: 96px 1fr; gap: 1.2rem; align-items: start; }
.avatar { width: 96px; height: 96px; object-fit: cover; background: var(--skylight); border-bottom: 3px solid var(--s1); }
.person h3 { margin-top: .2rem; }
.person .role { color: var(--link); font-weight: 600; font-size: .95rem; }
.person p { color: var(--muted); font-size: .97rem; margin-top: .5rem; }
.facts { list-style: none; padding: 0; margin-top: 1rem; }
.facts li { color: var(--muted); margin: .35rem 0; }

/* ---------- blog teaser and closing call to action ---------- */
.article { max-width: 820px; }
.article h2 a { text-decoration: none; color: var(--ink); }
.article p { color: var(--muted); max-width: 62ch; margin-top: 1rem; }
.cta { padding: 4.5rem 0; background: var(--band); }
.cta h2 { color: var(--band-ink); }
.ctain { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.ctain p { max-width: 56ch; margin-top: .5rem; color: var(--band-text); }
.cta a:not(.btn):not(.btn-primary):not(.btn-secondary) { color: var(--band-ink); }
.cta .btn-primary { background: var(--bandbtn); border-color: var(--bandbtn); color: var(--bandbtn-ink); }
.cta .btn-primary:hover { background: var(--bandbtn-hover); border-color: var(--bandbtn-hover); color: var(--bandbtn-ink); }
.cta .btn-secondary { background: transparent; border-color: var(--bandbtn2-line); color: var(--bandbtn2-ink); }
.cta .btn-secondary:hover { border-color: var(--bandbtn2-ink); color: var(--bandbtn2-ink); }

/* ---------- forms (demo, contact) ---------- */
.formpage .heroin { grid-template-columns: 5fr 7fr; align-items: start; }
.formcard { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--s1); padding: 1.75rem; box-shadow: var(--shadow); }
.formcard h2 { font-size: 1.45rem; }
.formcard > p { color: var(--muted); margin-top: .4rem; }
.formcard form { margin-top: 1.25rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: end; }
.form-group { margin-bottom: 1rem; }
.form-group label, .form-label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35rem; color: var(--ink); }
.form-input, .form-select, .form-textarea {
    display: block;
    width: 100%;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--input-bg);
    border: 1px solid var(--input-line);
    border-radius: 0;
    padding: .65rem .8rem;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--link); }
.form-textarea { min-height: 7rem; resize: vertical; }
.form-note { font-size: .85rem; color: var(--note); margin-top: .3rem; }
.required { color: var(--danger); }
.checkbox-label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400 !important; }
.checkbox-label input { margin-top: .35rem; flex: 0 0 auto; }
.checkbox-label small { display: block; color: var(--muted); font-size: .85rem; margin-top: .2rem; }
.checkbox-group { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1rem; }
.checkbox-item { display: flex; gap: .5rem; align-items: center; }
.checkbox-item label { font-weight: 400; margin: 0; }
.consent-error { display: none; color: var(--danger); font-size: .9rem; margin-top: .35rem; }
.form-alert { scroll-margin-top: 8rem; margin: 1rem 0 0; padding: .75rem 1rem; border-left: 4px solid var(--danger); border-radius: 4px; background: var(--danger-bg); color: var(--ink); font-size: .95rem; }
.form-alert a { color: inherit; font-weight: 600; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin: .5rem 0 1rem; }
.agenda { margin-top: 1.5rem; }
.agenda h3, .agenda .h3 { margin-bottom: .4rem; }
.contactlist { list-style: none; margin-top: 1rem; }
.contactlist li { margin: .9rem 0; color: var(--muted); }
.contactlist b { display: block; color: var(--ink); }

/* ---------- not found and error ---------- */
.notfound .ctas { margin-top: 1.5rem; }
.notfound ul { list-style: none; margin-top: 1.5rem; display: flex; gap: 1.5rem; flex-wrap: wrap; }
.notfound ul a { font-weight: 600; }

/* ---------- footer ---------- */
.foot { background: var(--foot); color: var(--foottext); padding: 3rem 0 2rem; font-size: .92rem; }
.footgrid { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 2rem; }
.foot .footlogo { height: 28px; width: auto; }
.foot h2 { color: #fff; font-size: .92rem; margin-bottom: .6rem; letter-spacing: 0; }
.foot ul { list-style: none; }
.foot li { margin: .35rem 0; }
.foot a { color: var(--foottext); text-decoration: none; }
.foot a:hover { color: #fff; }
.foot p { margin-top: 1rem; max-width: 30ch; }
.footbottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2rem; padding-top: 1.25rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
    .links { display: none; position: absolute; top: 68px; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start; padding: 1rem 24px; gap: .8rem; }
    body.menu-open .links { display: flex; }
    .dd-menu { position: static; display: block; border: 0; box-shadow: none; padding: .2rem 0 0 .8rem; background: transparent; min-width: 0; }
    .dd-menu::before { display: none; }
    .dd > a::after { display: none; }
    .menu-btn { display: inline-grid; margin-left: auto; }
    .capgrid, .cards.four { grid-template-columns: 1fr 1fr; }
    .cards.five { grid-template-columns: 1fr 1fr; }
    .footgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .heroin, .feature, .feature.flip, .formpage .heroin { grid-template-columns: 1fr; }
    .feature.flip .ftext { order: 0; }
    .shot-figure.heroshot { margin-right: 0; }
    .cards, .cards.two, .pricegrid, .founders { grid-template-columns: 1fr; }
    .included { columns: 1; }
}
@media (max-width: 640px) {
    body { font-size: 16px; }
    .capgrid, .cards.four, .cards.five, .footgrid { grid-template-columns: 1fr; }
    .navtools .btn { display: none; }
    .links .mob { display: inline; font-weight: 700; color: var(--link); }
    .person { grid-template-columns: 64px 1fr; }
    .avatar { width: 64px; height: 64px; }
    .form-row, .checkbox-group { grid-template-columns: 1fr; }
    .formcard { padding: 1.25rem; }
    /* The architecture diagram keeps a readable size and scrolls sideways instead. */
    .arch { min-width: 820px; }
    /* The section strip scrolls; the fade shows there is more to the right. */
    .subnav .wrap { padding-right: 2.5rem; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }
}