@font-face { font-family: "Geist"; font-weight: 400; font-display: swap; src: url("fonts/geist-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-weight: 500; font-display: swap; src: url("fonts/geist-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-weight: 600; font-display: swap; src: url("fonts/geist-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-weight: 700; font-display: swap; src: url("fonts/geist-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-weight: 400; font-display: swap; src: url("fonts/geist-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Geist"; font-weight: 600; font-display: swap; src: url("fonts/geist-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/inter-greek-400-normal.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("fonts/inter-greek-600-normal.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Roboto Mono"; font-weight: 400; font-display: swap; src: url("fonts/roboto-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  --bg:#f6f7fb; --panel:#fff; --panel-2:#f3f4f9; --panel-3:#eceef5;
  --line:#e2e5ee; --line-2:#c8ccda; --ink:#141726; --ink-2:#444a5e; --muted:#62677b;
  --accent:#4a4bd6; --accent-hover:#3d3ec4; --accent-weak:#eeeefd; --accent-ink:#fff;
  --crit:#BD271E; --high:#E8730C; --med:#F5C518; --low:#6092C0; --info:#646A77;
  --good:#017d73; --good-ink:#01665e; --info-ink:#fff;
  --night:#0b0c14; --night-2:#141627; --night-ink:#e4e6f2; --night-muted:#9a9eb8; --night-line:#23263b;
  --shadow:0 1px 2px rgba(20,23,38,.04), 0 4px 12px -2px rgba(20,23,38,.06);
  --shadow-lg:0 30px 60px -20px rgba(20,23,38,.28), 0 12px 24px -12px rgba(20,23,38,.12);
  --grad:linear-gradient(135deg,#818cf8 0%,#6366f1 55%,#a855f7 100%);
  /* H15 design tokens. Six type sizes, each a step a phone reaches by one clamp()
     and not by a rule per section; three radii; one section spacing, one card
     padding and one gap; one button height. Nothing else sets a size. */
  --fs-1:clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --fs-2:clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-3:clamp(1.375rem, 1.1rem + .8vw, 1.75rem);
  --fs-4:clamp(1.125rem, 1rem + .3vw, 1.25rem);
  --fs-5:1.0625rem;
  --fs-6:.875rem;
  --r-sm:6px; --r-md:12px; --r-full:999px;
  --space-section:clamp(40px, 32px + 2.2vw, 64px);
  --pad-card:24px;
  --gap:20px;
  --btn-h:44px;
  --font:"Geist","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1200px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0f1017; --panel:#171822; --panel-2:#1d1e2a; --panel-3:#262736;
    --line:#2b2d3b; --line-2:#3c3f50; --ink:#e9ecf5; --ink-2:#c3c8d6; --muted:#9aa2b4;
    --accent:#8b8ef8; --accent-hover:#a3a5ff; --accent-weak:#23244a; --accent-ink:#0d0e1f;
    --crit:#FF6666; --high:#FF9F43; --med:#FFD54A; --low:#79AAD9; --info:#98A2B3; --good:#7de2d1; --good-ink:#7de2d1; --info-ink:#141726;
    --night:#08090f; --night-2:#11121f;
    --shadow:0 1px 2px rgba(0,0,0,.3);
    --shadow-lg:0 30px 60px -20px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:#0f1017; --panel:#171822; --panel-2:#1d1e2a; --panel-3:#262736;
  --line:#2b2d3b; --line-2:#3c3f50; --ink:#e9ecf5; --ink-2:#c3c8d6; --muted:#9aa2b4;
  --accent:#8b8ef8; --accent-hover:#a3a5ff; --accent-weak:#23244a; --accent-ink:#0d0e1f;
  --crit:#FF6666; --high:#FF9F43; --med:#FFD54A; --low:#79AAD9; --info:#98A2B3; --good:#7de2d1; --good-ink:#7de2d1; --info-ink:#141726;
  --night:#08090f; --night-2:#11121f;
  --shadow:0 1px 2px rgba(0,0,0,.3);
  --shadow-lg:0 30px 60px -20px rgba(0,0,0,.7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs-5)/1.6 var(--font); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
code, pre { font-family: var(--mono); }
/* A long word in a heading ("Κυβερνοανθεκτικότητα") or a long command in a sentence
   breaks inside a 320px phone instead of pushing the page sideways. */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
:not(pre) > code { overflow-wrap: anywhere; }
h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -.02em; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
@media (max-width: 560px) { .wrap { padding: 0 16px; } }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--panel); padding: 8px 12px; border-radius: var(--r-md); z-index: 30; }
.skip:focus { left: 8px; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }


/* Header */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: var(--fs-4); letter-spacing: -.01em; }
.top nav { display: flex; gap: 26px; }
.top nav a { color: var(--ink-2); text-decoration: none; font-size: var(--fs-6); font-weight: 500; white-space: nowrap; }
.top nav a:hover { color: var(--ink); }
.top .actions { margin-left: auto; display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); width: 40px; height: 36px; align-items: center; justify-content: center; cursor: pointer; }
.top .lang { color: var(--ink-2); text-decoration: none; font-size: var(--fs-6); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 32px; }
/* The utility bar above the main row: the incident line and sign-in, small and to the right. */
.top .utility { border-bottom: 1px solid var(--line); }
.top .utility .wrap { height: 32px; justify-content: flex-end; gap: 20px; }
.top .utility a { color: var(--ink-2); text-decoration: none; font-size: var(--fs-6); font-weight: 500; }
.top .utility a:hover { color: var(--accent); }
@media (max-width: 1279px) { .top .utility { display: none; } }
/* The Solutions menu: a disclosure, its groups in columns under the bar on a wide screen. */
.top .solutions { position: relative; }
.top .solutions summary { list-style: none; cursor: pointer; color: var(--ink-2); font-size: var(--fs-6); font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.top .solutions summary::-webkit-details-marker { display: none; }
.top .solutions summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.top .solutions[open] summary::after { transform: translateY(1px) rotate(225deg); }
.top .solutions summary:hover, .top .solutions summary.here { color: var(--ink); }
.top .solutions summary.here { font-weight: 600; }
.top .mega { position: absolute; top: calc(100% + 18px); left: -24px; display: grid; grid-template-columns: repeat(4, minmax(150px, auto)); gap: var(--gap); padding: var(--pad-card); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
.top .mega div { display: flex; flex-direction: column; gap: 8px; }
.top .mega .mh { margin: 0 0 2px; font-size: var(--fs-6); font-weight: 600; color: var(--muted); }
@media (max-width: 1279px) {
  .top nav { display: none; } .top .actions .btn-secondary { display: none; }
  .menu-btn { display: inline-flex; order: 3; }
  .top.open nav { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 8px 16px 16px; max-height: calc(100vh - 64px); overflow-y: auto; }
  .top.open nav a { padding: 12px 4px; font-size: var(--fs-5); border-bottom: 1px solid var(--line); }
  .top.open nav a:last-child { border-bottom: 0; }
  .top.open nav .solutions summary { padding: 12px 4px; font-size: var(--fs-5); border-bottom: 1px solid var(--line); width: 100%; }
  .top .mega { position: static; display: flex; flex-direction: column; gap: 0; padding: 0 0 0 12px; background: none; border: 0; box-shadow: none; }
  .top .mega div { gap: 0; }
  .top .mega .mh { margin: 12px 0 0; }
}

/* Buttons: one component in two variants, one size. An arrow belongs to a text link, never to a button. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--btn-h); padding: 0 20px; border-radius: var(--r-md); font: 600 var(--fs-6)/1 var(--font); text-decoration: none; border: 1px solid transparent; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.link { display: inline; font-weight: 600; color: var(--accent); text-decoration: none; }
.link:hover { text-decoration: underline; }
.arrow { display: inline-block; transition: transform .15s; }
.link:hover .arrow { transform: translateX(3px); }

/* Hero */
.hero { position: relative; overflow: hidden; padding: var(--space-section) 0 0; text-align: center; }
.hero::before { content: ""; position: absolute; left: 50%; top: -260px; width: 1200px; height: 800px; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, #6366f1 20%, transparent), transparent); pointer-events: none; }
.hero .wrap { position: relative; }
.pill { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-6); font-weight: 600; color: var(--accent); background: var(--accent-weak); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: var(--r-full); padding: 6px 14px; margin-bottom: 24px; }
.hero h1 { font-size: var(--fs-1); font-weight: 700; letter-spacing: -.035em; max-width: 15em; margin: 0 auto; }
.hero h1 .grad-text { display: block; }
.hero .sub { margin: 24px auto 0; font-size: var(--fs-4); color: var(--ink-2); max-width: 40em; }
.snapshot { display: flex; gap: 8px; max-width: 560px; margin: 36px auto 0; padding: 6px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow); }
.snapshot input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: var(--fs-5) var(--font); padding: 0 14px; height: 48px; }
.snapshot input::placeholder { color: var(--muted); }
.snapshot input:focus { outline: none; }
.snapshot:focus-within { border-color: var(--accent); }
@media (max-width: 560px) {
  .snapshot { flex-direction: column; padding: 8px; }
  .snapshot input { height: 46px; text-align: center; }
  .hero { padding-top: 56px; }
}
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 32px auto 0; padding: 0; list-style: none; font-size: var(--fs-6); color: var(--ink-2); font-weight: 500; }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust svg { color: var(--good); flex: none; }

.frame { position: relative; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow-lg); overflow: hidden; }
.hero .frame { margin: 56px auto 0; max-width: 1120px; border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: 0; }
.frame .chrome { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.frame .chrome i { width: 11px; height: 11px; border-radius: var(--r-full); background: var(--line-2); }
.frame .chrome span { margin: 0 auto; font-size: var(--fs-6); color: var(--muted); font-family: var(--mono); padding-right: 50px; }
.hero .frame { margin-bottom: -1px; }
.hero-fade { position: relative; }
.hero-fade::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }

/* Sections */
section.block { padding: var(--space-section) 0; }
section.tight { padding: var(--space-section) 0; }
.center { text-align: center; }
.head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.head.left { margin-left: 0; text-align: left; }
.eyebrow { font-size: var(--fs-6); font-weight: 700; color: var(--accent); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.head h2, .feature h2 { font-size: var(--fs-2); font-weight: 700; letter-spacing: -.03em; }
.head p { margin-top: 18px; font-size: var(--fs-5); color: var(--ink-2); }
@media (max-width: 560px) { .head { margin-bottom: 40px; } }

/* Problem cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--pad-card); box-shadow: var(--shadow); }
.card .ico { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: 20px; background: var(--accent-weak); color: var(--accent); }
.card h3 { font-size: var(--fs-4); font-weight: 600; margin-bottom: 10px; }
.card p { color: var(--ink-2); font-size: var(--fs-5); }
.card .fix { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 500; font-size: var(--fs-5); display: flex; gap: 10px; }
.card .fix svg { color: var(--good); flex: none; margin-top: 3px; }

/* Alternating features */
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; padding: 56px 0; }
.feature.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature.flip .copy { order: 2; }
.feature h2 { font-size: var(--fs-2); }
.feature .copy > p { margin-top: 16px; font-size: var(--fs-5); color: var(--ink-2); }
.feature ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.feature li { display: flex; gap: 12px; font-size: var(--fs-5); color: var(--ink-2); }
.feature li svg { color: var(--accent); flex: none; margin-top: 3px; }
.feature .link { display: inline-flex; align-items: center; gap: 6px; margin-top: 28px; font-weight: 600; text-decoration: none; }
@media (max-width: 960px) {
  .feature, .feature.flip { grid-template-columns: 1fr; gap: 32px; padding: 36px 0; }
  .feature.flip .copy { order: 0; }
}

/* Capability grid */
.caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.caps div { background: var(--panel); padding: var(--pad-card); }
.caps h3 { font-size: var(--fs-5); font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.caps h3 svg { color: var(--accent); flex: none; }
.caps p { font-size: var(--fs-6); color: var(--ink-2); }
@media (max-width: 960px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .caps { grid-template-columns: 1fr; } }

/* Frameworks */
.frameworks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.frameworks div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 14px; text-align: center; box-shadow: var(--shadow); }
.frameworks strong { display: block; font-size: var(--fs-5); font-weight: 700; letter-spacing: -.01em; }
.frameworks span { display: block; font-size: var(--fs-6); color: var(--muted); margin-top: 4px; }
@media (max-width: 960px) { .frameworks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .frameworks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Differentiators */
.dark { background: var(--night); color: var(--night-ink); position: relative; overflow: hidden; }
.dark::before { content: ""; position: absolute; right: -200px; top: -200px; width: 700px; height: 700px; background: radial-gradient(closest-side, rgba(99,102,241,.28), transparent); pointer-events: none; }
.dark .wrap { position: relative; }
.dark .eyebrow { color: #a9abff; }
.dark .head h2 { color: #fff; }
.dark .head p { color: var(--night-muted); }
.why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.why div { background: var(--night-2); border: 1px solid var(--night-line); border-radius: var(--r-md); padding: var(--pad-card); }
.why .ico { width: 42px; height: 42px; border-radius: var(--r-md); background: var(--grad); color: #fff; display: grid; place-items: center; margin-bottom: 18px; }
.why h3 { font-size: var(--fs-5); font-weight: 600; color: #fff; margin-bottom: 8px; }
.why p { font-size: var(--fs-6); color: var(--night-muted); }
@media (max-width: 1000px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .why { grid-template-columns: 1fr; } }

/* Partners */
.partner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.partner .copy > p { margin-top: 16px; font-size: var(--fs-5); color: var(--ink-2); }
.partner .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.plist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.plist div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--pad-card); box-shadow: var(--shadow); }
.plist h3 { font-size: var(--fs-5); font-weight: 600; margin-bottom: 6px; }
.plist p { font-size: var(--fs-6); color: var(--ink-2); }
@media (max-width: 960px) { .partner { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 560px) { .plist { grid-template-columns: 1fr; } }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); counter-reset: step; }
.steps div { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--pad-card); box-shadow: var(--shadow); }
.steps div::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-full); background: var(--grad); color: #fff; font-weight: 700; margin-bottom: 18px; }
.steps h3 { font-size: var(--fs-4); font-weight: 600; margin-bottom: 8px; }
.steps p { color: var(--ink-2); font-size: var(--fs-5); }
.steps code { display: block; margin-top: 16px; background: var(--night); color: #e4e6f2; border-radius: var(--r-sm); padding: 12px 14px; font-size: var(--fs-6); overflow-x: auto; white-space: nowrap; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--gap); padding: 22px 0; font-size: var(--fs-5); font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--fs-3); font-weight: 400; color: var(--accent); transition: transform .2s; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--ink-2); font-size: var(--fs-5); max-width: 46em; }

/* Closing: one line and the two buttons, the same component on every page. */
.closing { padding: var(--space-section) 0; text-align: center; }
.closing h2 { font-size: var(--fs-2); font-weight: 700; letter-spacing: -.03em; max-width: 18em; margin: 0 auto; }
.closing p { margin: 16px auto 0; color: var(--ink-2); max-width: 34em; }
.closing .ctas { margin-top: 28px; }

/* Footer */
footer { border-top: 1px solid var(--line); background: var(--panel); padding: 64px 0 32px; font-size: var(--fs-6); }
.fcols { display: grid; grid-template-columns: minmax(0, 2fr) repeat(5, minmax(0, 1fr)); gap: 28px; }
.fcols h2 { font-size: var(--fs-6); line-height: inherit; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.fcols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fcols a { color: var(--ink-2); text-decoration: none; }
.fcols a:hover { color: var(--accent); text-decoration: underline; }
.fbrand p { margin-top: 14px; color: var(--muted); max-width: 22em; }
.social { display: flex; gap: 10px; margin-top: 20px; }
.social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-md); border: 1px solid var(--line-2); color: var(--ink-2); }
.social a:hover { color: var(--accent); border-color: var(--accent); }
.fbottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-6); }
@media (max-width: 900px) { .fcols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fbrand { grid-column: 1 / -1; } }

/* Legal pages */
.legal { padding: 72px 0 96px; }
.legal .wrap { max-width: 820px; }
.legal h1 { font-size: var(--fs-2); font-weight: 700; letter-spacing: -.03em; }
.legal .updated { margin-top: 10px; color: var(--muted); font-size: var(--fs-6); }
.legal h2 { font-size: var(--fs-4); font-weight: 600; margin: 44px 0 12px; letter-spacing: -.01em; }
.legal p, .legal li { color: var(--ink-2); font-size: var(--fs-5); }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 22px; margin: 12px 0 0; }
.legal li + li { margin-top: 6px; }
.legal table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: var(--fs-6); }
.legal th, .legal td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.legal th { color: var(--ink); font-weight: 600; background: var(--panel-2); }
.legal .tablewrap { overflow-x: auto; }
/* The coverage table: one row per measure, each state a tag with the facts under it (coverage.py). */
table.coverage { width: 100%; border-collapse: collapse; font-size: var(--fs-6); }
table.coverage th, table.coverage td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
table.coverage th { color: var(--ink); font-weight: 600; background: var(--panel-2); }
table.coverage td:first-child { width: 36%; }
table.coverage td b { display: block; color: var(--ink); }
table.coverage .name, table.coverage .fact { display: block; }
table.coverage .fact { margin: 4px 0 10px; }
table.coverage .state { display: inline-block; font-weight: 600; padding: 2px 10px; border-radius: var(--r-full); }
table.coverage .state.measured { color: var(--good-ink); background: color-mix(in srgb, var(--good) 14%, transparent); }
table.coverage .state.documented { color: var(--accent); background: var(--accent-weak); }
table.coverage .state.provider { color: var(--ink); background: var(--panel-3); }
/* What happens after a form is sent, under the form. */
.nextsteps { margin-top: 28px; }
.nextsteps h2 { font-size: var(--fs-4); font-weight: 600; margin: 0 0 8px; }
.nextsteps ol { padding-left: 22px; margin: 0; color: var(--ink-2); font-size: var(--fs-5); }
.nextsteps li + li { margin-top: 6px; }
/* The integrations directory: a filter by type, then each type with its integrations. */
.intfilter { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 8px; }
.intfilter a { font-size: var(--fs-6); font-weight: 600; color: var(--ink-2); text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-full); padding: 6px 14px; }
.intfilter a:hover, .intfilter a[aria-current="true"] { color: var(--accent); border-color: var(--accent); }
.legal .intlist { list-style: none; padding: 0; }
.legal .intlist li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.legal .intlist strong { color: var(--ink); }
.legal .intlist a { display: block; width: fit-content; margin-bottom: 2px; }
.covlegend { list-style: none; padding: 0 !important; }
.covlegend a { text-decoration: none; }
@media (max-width: 520px) { table.coverage td:first-child { width: auto; } table.coverage th, table.coverage td { padding: 8px 10px; } table.coverage td { overflow-wrap: anywhere; } }
.ph { background: color-mix(in srgb, var(--med) 28%, transparent); color: var(--ink); border-radius: var(--r-sm); padding: 0 4px; }

/* Conversion pieces */
.friction { margin-top: 12px; font-size: var(--fs-6); color: var(--muted); display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; }
.friction span { display: inline-flex; align-items: center; gap: 6px; }
.friction svg { color: var(--good); }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); max-width: 900px; margin: 0 auto 48px; }
.facts div { text-align: center; padding: 28px 20px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.facts strong { display: block; font-size: var(--fs-1); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.facts p { margin-top: 10px; color: var(--ink-2); font-size: var(--fs-5); }
.facts .src { display: block; text-align: center; grid-column: 1 / -1; padding: 0; border: 0; background: none; box-shadow: none; font-size: var(--fs-6); color: var(--muted); }
@media (max-width: 640px) { .facts { grid-template-columns: 1fr; } }

.band { margin: 40px 0 16px; border-radius: var(--r-md); padding: 28px 32px; background: var(--accent-weak); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); display: flex; align-items: center; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; }
.band h3 { font-size: var(--fs-4); font-weight: 700; letter-spacing: -.02em; }
.band p { color: var(--ink-2); margin-top: 4px; }

.numbers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin-top: 40px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); overflow: hidden; }
.numbers div { padding: 24px 18px; border-left: 1px solid var(--line); }
.numbers div:first-child { border-left: 0; }
.numbers strong { display: block; font-size: var(--fs-2); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.numbers span { font-size: var(--fs-6); color: var(--muted); }
@media (max-width: 960px) { .numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); } .numbers div:nth-child(4) { border-left: 0; } .numbers div:nth-child(n+4) { border-top: 1px solid var(--line); } }
@media (max-width: 560px) { .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .numbers div { border-left: 0; border-top: 1px solid var(--line); } .numbers div:nth-child(even) { border-left: 1px solid var(--line); } .numbers div:nth-child(-n+2) { border-top: 0; } }

/* The pricing page: the three company plans in one row, each card a subgrid of
   the row's six tracks (head, who it is for, price, billing, bullets, button),
   so every price and every button sits at the same height whatever the text
   above it. A card's span must equal its number of children (build.py plans()),
   or the button overlaps the last bullet. One column on a phone, in order. */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); gap: 0 var(--gap); }
.plan { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--pad-card); box-shadow: var(--shadow); }
.plan.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.plan .planhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.plan h3 { font-size: var(--fs-4); font-weight: 600; }
.plan .planlabel { font-size: var(--fs-6); font-weight: 600; color: var(--accent); }
.plan .for { color: var(--muted); font-size: var(--fs-6); }
.plan .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; align-self: end; }
.plan .price .fig { font-size: var(--fs-3); font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.plan .price .from, .plan .price .per { color: var(--muted); font-size: var(--fs-6); }
.plan .billing { color: var(--muted); font-size: var(--fs-6); line-height: 1.5; }
.plan .planli { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; align-content: start; color: var(--ink-2); font-size: var(--fs-6); }
.plan .planli li { padding-left: 18px; position: relative; }
.plan .planli li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.plan > .btn { align-self: end; justify-self: stretch; text-align: center; }
.planlines { margin-top: 18px; text-align: center; color: var(--muted); font-size: var(--fs-6); }
.planlines + .planlines { margin-top: 4px; }
.partnerband { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); }
.partnerband p { color: var(--ink-2); font-size: var(--fs-6); max-width: 62ch; }
.partnerband .link { font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (max-width: 900px) {
  .plans { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--gap); }
  .plan { grid-template-rows: none; grid-row: auto; }
}
table.ticks { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); }
table.ticks th, table.ticks td { padding: 10px 14px; border-top: 1px solid var(--line); font-size: var(--fs-6); }
table.ticks thead th { border-top: 0; text-align: center; font-weight: 600; }
table.ticks tbody th { text-align: left; font-weight: 500; color: var(--ink); }
table.ticks td { text-align: center; color: var(--muted); }
table.ticks td svg { color: var(--good); vertical-align: middle; }
table.ticks .colprice { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-6); white-space: nowrap; }
table.ticks .nodot { color: var(--muted); opacity: .7; font-weight: 700; }
/* On a phone the table scrolls in its own box and the feature names stay in view. */
table.ticks tbody th, table.ticks thead th:first-child { position: sticky; left: 0; background: var(--panel); z-index: 1; }
#compare .tablewrap { overflow-x: auto; position: relative; }
@media (max-width: 560px) { table.ticks th, table.ticks td { padding: 8px 4px; } table.ticks tbody th { min-width: 96px; } table.ticks thead th { white-space: nowrap; } }
.hero .fromprice { margin-top: 12px; font-size: var(--fs-6); }
.hero .fromprice a { font-weight: 600; text-decoration: none; }
.hero .fromprice a:hover { text-decoration: underline; }
/* The home page's integrations: two panels of named chips with Vardion between them,
   joined by a dashed line drawn on the centre box, across on a wide screen and down
   on a phone. Names are text in the site's own type, never logos. */
/* The flow strip's stage names lead to the page that covers each stage. */
.flow .mark h3 a { color: inherit; text-decoration: none; }
.flow .mark h3 a:hover { color: var(--accent); text-decoration: underline; }
.hub { --join: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: var(--join); max-width: 1080px; margin: 0 auto; }
.hubpanel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--pad-card); box-shadow: var(--shadow); }
.hubpanel h3 { font-size: var(--fs-4); font-weight: 600; }
.hubsub { margin-top: 4px; color: var(--muted); font-size: var(--fs-6); }
.hubpanel ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hubpanel li a { display: inline-block; font-size: var(--fs-6); font-weight: 600; padding: 7px 12px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.hubpanel li a:hover { border-color: var(--accent); color: var(--accent); }
.hubpanel li a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hubpanel .note { font-weight: 400; color: var(--muted); }
.hubline { margin-top: 14px; color: var(--muted); font-size: var(--fs-6); }
.hubcore { position: relative; align-self: center; }
.hubcore span { display: block; padding: 14px 22px; border-radius: var(--r-md); background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: var(--fs-4); letter-spacing: -.01em; box-shadow: var(--shadow); }
.hubcore::before, .hubcore::after { content: ""; position: absolute; top: 50%; width: var(--join); border-top: 2px dashed var(--line-2); }
.hubcore::before { right: 100%; }
.hubcore::after { left: 100%; }
@media (max-width: 860px) {
  .hub { --join: 32px; grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .hubcore { justify-self: center; }
  .hubcore::before, .hubcore::after { top: auto; left: 50%; right: auto; width: 0; height: var(--join); border-top: 0; border-left: 2px dashed var(--line-2); }
  .hubcore::before { bottom: 100%; }
  .hubcore::after { top: 100%; }
}
.integrations { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 980px; margin: 0 auto; }
.integrations span { font-size: var(--fs-6); font-weight: 600; padding: 10px 16px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); }

.resources { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); }
.resources a { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--pad-card); box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
.resources a:hover { border-color: var(--accent); transform: translateY(-2px); }
.resources .kind { font-size: var(--fs-6); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.resources h3 { font-size: var(--fs-4); font-weight: 600; margin: 10px 0 8px; }
.resources p { color: var(--ink-2); font-size: var(--fs-6); flex: 1; }
.resources .go { margin-top: 18px; font-weight: 600; color: var(--accent); }
@media (max-width: 900px) { .resources { grid-template-columns: 1fr; } }

.paths { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); margin-top: 40px; text-align: left; }
.paths div { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md); padding: 26px; display: flex; flex-direction: column; }
.paths .kind { font-size: var(--fs-6); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #a9abff; }
.paths h3 { color: #fff; font-size: var(--fs-4); font-weight: 600; margin: 10px 0 8px; }
.paths p { margin: 0 0 22px; color: var(--night-muted); font-size: var(--fs-6); flex: 1; max-width: none; }
.paths .btn { align-self: flex-start; }
@media (max-width: 900px) { .paths { grid-template-columns: minmax(0, 1fr); } }

/* Guides */
.guide .lede { margin-top: 18px; font-size: var(--fs-4); color: var(--ink-2); }
.guide ol.items { padding-left: 0; list-style: none; counter-reset: it; margin: 20px 0 0; }
.guide ol.items li { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line); }
.guide ol.items li::before { content: attr(data-n); grid-row: 1 / span 3; justify-self: start; height: 28px; padding: 0 8px; border-radius: var(--r-sm); background: var(--accent-weak); color: var(--accent); font: 600 var(--fs-6)/28px var(--mono); white-space: nowrap; }
.guide ol.items li strong { grid-column: 2; display: block; color: var(--ink); font-weight: 600; }
.guide ol.items li span { grid-column: 2; display: block; margin-top: 4px; font-size: var(--fs-6); color: var(--muted); }
@media (max-width: 560px) { .guide ol.items li { grid-template-columns: 1fr; } .guide ol.items li::before { grid-row: auto; margin-bottom: 8px; } .guide ol.items li strong, .guide ol.items li span { grid-column: 1; } }
.ctabox { margin: 48px 0 0; padding: var(--pad-card); border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--line); }
.legal .ctabox h2 { margin: 0 0 8px; }
.ctabox .ctas { justify-content: flex-start; margin-top: 20px; }
.crumbs { font-size: var(--fs-6); color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }

/* How it works */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.pillar { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--pad-card); box-shadow: var(--shadow); position: relative; overflow: hidden; transition: border-color .15s, transform .15s; }
.pillar::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--grad); }
.pillar:hover { border-color: var(--accent); transform: translateY(-2px); }
.pillar .step { font: 600 var(--fs-6) var(--mono); color: var(--accent); letter-spacing: .02em; }
.pillar h3 { font-size: var(--fs-4); font-weight: 600; margin: 14px 0 10px; letter-spacing: -.015em; }
.pillar p { color: var(--ink-2); font-size: var(--fs-5); flex: 1; }
.pillar .go { margin-top: 20px; font-weight: 600; color: var(--accent); font-size: var(--fs-6); }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }
.context { margin-top: 28px; display: flex; align-items: center; gap: 32px; padding: 22px 28px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel-2); }
.context .figs { display: flex; gap: 32px; flex: none; }
.context strong { display: block; font-size: var(--fs-3); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.context .figs span { display: block; font-size: var(--fs-6); color: var(--muted); margin-top: 4px; max-width: 13em; }
.context p { font-size: var(--fs-6); color: var(--ink-2); border-left: 1px solid var(--line-2); padding-left: 28px; }
@media (max-width: 800px) { .context { flex-direction: column; align-items: flex-start; gap: 18px; } .context p { border-left: 0; padding-left: 0; } }

/* Engine */
.engine { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.engine h2 { font-size: var(--fs-2); font-weight: 700; letter-spacing: -.03em; }
.engine .copy > p { margin-top: 16px; font-size: var(--fs-5); color: var(--ink-2); }
.engine ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.engine li { display: flex; gap: 12px; font-size: var(--fs-5); color: var(--ink-2); }
.engine li svg { color: var(--accent); flex: none; margin-top: 3px; }
.tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tools div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--shadow); }
.tools strong { display: block; font: 600 var(--fs-6) var(--mono); color: var(--ink); }
.tools span { display: block; font-size: var(--fs-6); color: var(--muted); margin-top: 2px; }
@media (max-width: 960px) { .engine { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 560px) { .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Documentation: commands scroll inside their own box rather than widening the page. */
.legal pre { max-width: 100%; overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; margin: 12px 0 18px; font-size: var(--fs-6); line-height: 1.5; }
.legal pre code { white-space: pre; background: none; padding: 0; }

/* A narrow header keeps the language, the demo button and the menu on one row. */
@media (max-width: 480px) {
  .top .wrap { gap: 12px; }
  .top .actions { gap: 8px; }
  .top .actions .btn { padding: 8px 12px; font-size: var(--fs-6); }
}

/* Product pages (2026-10-20): a shorter hero, a row of key figures, light audience cards and a domain check band. */
.top nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.hero.page { padding-top: 64px; }
.hero.page h1 { font-size: var(--fs-1); max-width: 17em; }
.hero.page:not(:has(.frame)) { padding-bottom: 64px; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.steps + .ctas { margin-top: 36px; }
section.block.alt { background: var(--panel-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.stats div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--pad-card); box-shadow: var(--shadow); }
.stats strong { display: block; font-size: var(--fs-2); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats p { margin-top: 10px; color: var(--ink-2); font-size: var(--fs-6); }
.stat-src { margin-top: 18px; text-align: center; font-size: var(--fs-6); color: var(--muted); }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .stats { grid-template-columns: 1fr; } }
.cards .card h3 { font-size: var(--fs-4); line-height: 1.35; }
.cards .card .fix { margin-top: 18px; }
.audience { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.audience div { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--pad-card); box-shadow: var(--shadow); }
.audience .kind { font-size: var(--fs-6); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.audience h3 { font-size: var(--fs-4); font-weight: 600; margin: 10px 0 8px; }
.audience p { color: var(--ink-2); font-size: var(--fs-5); flex: 1; margin-bottom: 22px; }
.audience .btn { align-self: flex-start; }
@media (max-width: 900px) { .audience { grid-template-columns: 1fr; } }
.more { margin-top: 28px; text-align: center; }
.more .link, .feature .link { font-weight: 600; text-decoration: none; }
.frameworks.wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.frameworks.wide div { text-align: left; padding: 18px; }
.frameworks.wide span { font-size: var(--fs-6); color: var(--ink-2); margin-top: 6px; }
@media (max-width: 960px) { .frameworks.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .frameworks.wide { grid-template-columns: 1fr; } }
.band-check { align-items: center; }
.band-check > div:first-child { flex: 1 1 320px; }
.band-check .band-form { flex: 1 1 420px; }
.band-check .snapshot { margin: 0; max-width: none; }
.band-check .friction { justify-content: flex-start; margin-top: 10px; }
.top nav { gap: 24px; }
/* Long labels (Greek above all) wrap inside a button rather than widen a phone screen. */
.faq summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .snapshot .btn { white-space: normal; height: auto; min-height: var(--btn-h); padding: 0 16px; line-height: 1.3; text-align: center; }
  .band { padding: 22px 18px; }
  .ctas .btn, .audience .btn { white-space: normal; height: auto; min-height: var(--btn-h); padding: 0 18px; line-height: 1.3; text-align: center; }
}
@media (max-width: 400px) {
  .brand { font-size: var(--fs-5); }
  .top .actions .btn { padding: 6px 10px; font-size: var(--fs-6); }
  .top .actions { gap: 6px; }
}
/* The Greek header is wider than a 320px phone with the name beside the mark. */
@media (max-width: 358px) { .brand .grad-text { display: none; } }
.top nav .only-menu { display: none; }
@media (max-width: 1279px) { .top.open nav .only-menu { display: block; color: var(--accent); font-weight: 600; } }
.audience { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .audience { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .audience { grid-template-columns: 1fr; } }
.scope { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); }
.scope div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--pad-card); box-shadow: var(--shadow); }
.scope h3 { font-size: var(--fs-5); font-weight: 600; margin-bottom: 12px; }
.scope ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--ink-2); font-size: var(--fs-6); }
@media (max-width: 900px) { .scope { grid-template-columns: 1fr; } }
.faq details p code { font-size: var(--fs-6); }
.scope-note { max-width: 860px; margin: 24px auto 0; padding: 16px 20px; border-radius: var(--r-md); background: var(--accent-weak); color: var(--ink); font-size: var(--fs-5); }

/* Two audience cards: the buying choice, side by side. */
.audience.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; margin: 0 auto; }
@media (max-width: 640px) { .audience.two { grid-template-columns: 1fr; } }
/* Comparison and reference pages (src/pages.py). */
.guide .priceline { margin-top: 16px; font-size: var(--fs-6); color: var(--ink-2); }
.placeholder { padding: 2px 6px; border-radius: var(--r-sm); background: #fef3c7; color: #92400e; font-weight: 600; }
.guide sup a { text-decoration: none; font-size: var(--fs-6); margin-left: 1px; }
.guide ol.sources { font-size: var(--fs-6); padding-left: 22px; }
.guide ol.sources li { margin-top: 6px; overflow-wrap: anywhere; }
.guide .tm { margin-top: 18px; font-size: var(--fs-6); color: var(--muted); }
.legal table.scores td:nth-child(2), .legal table.scores td:nth-child(3) { font: 600 var(--fs-6) var(--mono); text-align: center; }
.legal table.facts th { width: 28%; color: var(--ink); font-weight: 600; }
.legal table.crosswalk { font-size: var(--fs-6); }

/* Byline on the explainers, and the hosted or self-hosted comparison */
.legal .byline { margin-top: 2px; color: var(--muted); font-size: var(--fs-6); }
.compare-table { max-width: 920px; margin: 32px auto 0; overflow-x: auto; }
.compare-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-5); }
.compare-table th, .compare-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.compare-table th { color: var(--ink); font-weight: 600; background: var(--panel-2); }
.compare-table td:first-child { color: var(--ink); font-weight: 500; }

/* Text for a screen reader only, such as the Yes or No behind an icon. */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The CVE pages, generated by rboundi/meridian's scripts/cve-pages.ts. */
.cve { max-width: 760px; margin: 0 auto; padding: 40px 16px 64px; }
.cve h1 { font-size: var(--fs-3); line-height: 1.2; margin: 0 0 12px; }
.cve h2 { font-size: var(--fs-4); margin: 28px 0 8px; }
.cve p, .cve li { color: var(--ink-2); }
.cve .lead { font-size: var(--fs-5); color: var(--muted); }
.cve .crumb { font-size: var(--fs-6); color: var(--muted); margin: 0 0 8px; }
.cve .generated { font-size: var(--fs-6); color: var(--muted); border-left: 3px solid var(--line); padding: 2px 0 2px 12px; margin: 0 0 16px; }
.cve .alert { border-left: 4px solid var(--crit); padding: 8px 14px; background: var(--panel); font-weight: 600; color: var(--ink); }
.cve table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.cve th, .cve td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cvefacts th { width: 38%; color: var(--muted); font-weight: 500; }
.cvelist { font-size: var(--fs-6); }
.cvelist td:first-child, .cvelist td:nth-child(3) { white-space: nowrap; }
.cve .tag { font-size: var(--fs-6); font-weight: 700; color: var(--panel); background: var(--crit); padding: 2px 8px; border-radius: var(--r-full); white-space: nowrap; }
.cvecta { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; margin-top: 32px; }
.cvecta h2 { margin-top: 0; }
.cvecta .buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* The newest additions as cards, and the technologies as a list of links with their counts. */
.cvenew { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cvenew a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); text-decoration: none; }
.cvenew a:hover { border-color: var(--accent); }
.cvenew span { color: var(--ink-2); font-size: var(--fs-6); overflow-wrap: anywhere; }
.cvenew time { color: var(--muted); font-size: var(--fs-6); }
.cvetech { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cvetech li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-full); padding: 4px 12px; font-size: var(--fs-6); }
.cvetech span { color: var(--muted); }
@media (max-width: 520px) { .cvelist td:nth-child(3), .cvelist th:nth-child(3) { display: none; } .cve th, .cve td { padding: 8px 10px; } .cve td { overflow-wrap: anywhere; } .cvelist td:first-child { white-space: normal; } }

/* Polish (H10 design review). Headings and short leads break into even lines,
   and running text never leaves one word alone on its last line. */
h1, h2, h3, .sub, .head p, .lead { text-wrap: balance; }
p, li { text-wrap: pretty; }
/* A fix under a pain is a sentence. */
.card .fix { display: block; }
/* Steps that are not an order carry no number. */
.steps.plain div::before { content: none; }
/* A grid as wide as its items, so no empty cell is left over. */
.caps.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.caps.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .caps.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .caps.two, .caps.three { grid-template-columns: 1fr; } }
/* A no in a comparison is a quiet dash beside the tick. */
.compare-table .dash { color: var(--muted); opacity: .7; }
/* Footer: the address under the logo, and the two small links set apart. */
.fbrand .fmail { color: var(--ink-2); text-decoration: none; }
.fbrand .fmail:hover { color: var(--accent); text-decoration: underline; }
.fbottom .flinks { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.fbottom a { color: var(--muted); text-decoration: none; }
.fbottom a:hover { color: var(--accent); text-decoration: underline; }
/* Prose: a paragraph after a list keeps its distance. */
.legal ul + p, .legal ol + p { margin-top: 16px; }
/* CVE pages: the alert and the table are two blocks, and the buttons sit under their heading. */
.cve .alert { margin: 16px 0; border-radius: var(--r-sm); }
.cvecta .buttons { margin-top: 14px; }
/* A guide's date and byline are one line. */
.legal .updated:has(+ .byline), .legal .updated + .byline { display: inline-block; }
.legal .updated + .byline { margin-top: 0; }
.legal .updated + .byline::before { content: "\00b7"; margin: 0 8px; }

/* H11: the flow on the home page. One finding followed through five stages,
   each card a simplified fragment of the console (docs/h11/flow-draft.html). */
.flowsec .head { margin-bottom: 52px; }
.flow { counter-reset: flowstep; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); position: relative; }
.flow::before { content: ""; position: absolute; left: 10%; right: 10%; top: 20px; height: 1.5px; background: var(--line-2); }
.flow .step { display: flex; flex-direction: column; min-width: 0; }
.flow .mark { display: flex; flex-direction: column; align-items: center; margin: 0 0 24px; }
.flow .mark i { width: 40px; height: 40px; border-radius: var(--r-full); background: var(--panel); border: 1.5px solid var(--accent); position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: var(--fs-5); font-weight: 600; color: var(--accent); }
/* The ring numbers are drawn by CSS: decoration, not text to read. */
.flow .mark i::before { counter-increment: flowstep; content: counter(flowstep); }
.flow .mark h3 { margin: 12px 0 0; font-size: var(--fs-4); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.fcard { flex: 1; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 1px 2px rgba(20,23,38,.04), 0 22px 44px -30px rgba(20,23,38,.4); font-size: var(--fs-6); overflow: hidden; }
.fhead { display: flex; align-items: center; gap: 8px; margin: 0; height: 40px; line-height: 20px; white-space: nowrap; font-size: var(--fs-6); font-weight: 600; color: var(--ink-2); background: var(--panel-2); border-bottom: 1px solid var(--line); padding: 10px 19px; }
.fhead::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: var(--r-sm); background: var(--line-2); }
.fhead.dom { font-family: var(--mono); font-weight: 500; }
.frows { list-style: none; margin: 0; padding: 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.frows .row { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 8px; border-radius: var(--r-sm); color: var(--ink-2); line-height: 1.25; }
.frows .row.on { background: var(--accent-weak); color: var(--ink); font-weight: 600; }
.frows .t { flex: 1; min-width: 0; }
.frows .t.mono { font-family: var(--mono); font-size: var(--fs-6); white-space: nowrap; }
.frows .lbl { flex: 1; color: var(--muted); }
.frows .sec { flex: none; font-family: var(--mono); font-size: var(--fs-6); color: var(--muted); min-width: 16px; }
.frows .sev, .frows .chip { flex: none; white-space: nowrap; }
.frows .sev { font-size: var(--fs-6); font-weight: 700; min-width: 18px; text-align: center; padding: 2px 5px; border-radius: var(--r-sm); color: #fff; }
/* Dark ink on the bright severities: white on orange or light blue fell to 2:1 in dark mode. */
.frows .sev.high { background: var(--high); color: #141726; } .frows .sev.med { background: var(--med); color: #141726; } .frows .sev.low { background: var(--low); color: #141726; } .frows .sev.info { background: var(--info); color: var(--info-ink); }
.frows .chip { font-size: var(--fs-6); font-weight: 600; padding: 2px 7px; border-radius: var(--r-full); background: var(--panel-2); color: var(--ink-2); }
.frows .chip.ok { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good-ink); }
.frows .chip.bad { background: color-mix(in srgb, var(--crit) 12%, transparent); color: var(--crit); }
.flow .cap { margin: 16px 0 0; min-height: 52px; line-height: 26px; text-align: center; font-size: var(--fs-5); color: var(--ink-2); }
.flowsec .ctas { margin-top: 44px; }
@media (prefers-reduced-motion: no-preference) {
  .frows .row.on { animation: flowpulse 10s infinite both; }
  .flow .s2 .row.on { animation-delay: 2s; } .flow .s3 .row.on { animation-delay: 4s; } .flow .s4 .row.on { animation-delay: 6s; } .flow .s5 .row.on { animation-delay: 8s; }
  @keyframes flowpulse { 0%, 22% { background: var(--accent-weak); } 6%, 16% { background: color-mix(in srgb, var(--accent) 22%, var(--accent-weak)); } }
}
@media (max-width: 1239px) {
  .flowsec .head { margin-bottom: 32px; }
  .flow { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; gap: 26px; }
  .flow::before { left: 19px; right: auto; top: 20px; bottom: 20px; width: 1.5px; height: auto; }
  .flow .step { padding-left: 56px; }
  .flow .mark { flex-direction: row; margin: 0 0 10px; position: relative; min-height: 40px; }
  .flow .mark i { position: absolute; left: -56px; }
  .flow .mark h3 { margin: 0; }
  .fhead { display: none; }
  .frows { padding: 8px; }
  .frows .row:not(.on) { display: none; }
  .flow .cap { text-align: left; margin-top: 8px; font-size: var(--fs-6); min-height: 0; }
}

/* H11: the quick path under the hero and the works-with line. */
.urgent { padding: 0 0 8px; }
.urgent a { display: block; max-width: 760px; margin: 0 auto; text-align: center; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); color: var(--ink); font-weight: 600; text-decoration: none; }
.urgent a:hover { border-color: var(--accent); color: var(--accent); }
.works { padding: 16px 0 8px; }
.works p { max-width: 900px; margin: 0 auto; text-align: center; color: var(--muted); font-size: var(--fs-6); }
.works a { color: var(--ink-2); font-weight: 600; }
/* Log in beside the primary button; on narrow screens it moves into the menu. */
.top .login { color: var(--ink-2); text-decoration: none; font-size: var(--fs-6); font-weight: 600; }
.top .login:hover { color: var(--accent); }
@media (max-width: 1279px) { .top .actions .login { display: none; } }
/* The Greek menu labels are longer: tighter gaps keep Log in on the bar. */
@media (min-width: 481px) { html[lang="el"] .top .wrap { gap: var(--gap); } }
html[lang="el"] .top nav { gap: 18px; }

/* H15: the one design system. Text links under a row of buttons, the home
   page's product section, the hosted section's works-with line, the flow's
   cards at the token sizes and the document template's header band. */
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 20px; }
.ctas + .links { margin-top: 16px; }
.ctabox .links, .legal .links { justify-content: flex-start; }
.feature .link { margin-top: 24px; }
.pcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-bottom: 48px; }
.pcols h2 { font-size: var(--fs-2); font-weight: 700; letter-spacing: -.03em; }
.pcols p { margin-top: 14px; color: var(--ink-2); }
.pcols .link { margin-top: 20px; }
@media (max-width: 900px) { .pcols { grid-template-columns: 1fr; gap: 36px; } }
p.works { max-width: 920px; margin: 20px auto 0; text-align: center; color: var(--muted); font-size: var(--fs-6); }
.frows .row { height: auto; min-height: 48px; flex-wrap: wrap; padding: 6px 8px; row-gap: 2px; }
@media (min-width: 1440px) { .flowsec .wrap { max-width: 1340px; } .flow { gap: 12px; } }
.legal { padding: 0 0 var(--space-section); }
.dochead { padding: var(--space-section) 0 32px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.legal h1 { font-size: var(--fs-2); }
.legal h2 { font-size: var(--fs-3); }
.legal .lede, .guide .lede { font-size: var(--fs-4); color: var(--ink-2); margin-top: 16px; }
.cve h1 { font-size: var(--fs-2); }
.cve h2 { font-size: var(--fs-3); }
/* The home page shows the top of each screenshot on a wide screen: the score,
   the tiles and the first panel are what the picture is for. */
@media (min-width: 900px) {
  .crop img { aspect-ratio: 2000 / 820; object-fit: cover; object-position: top; }
  .crop img { aspect-ratio: 2000 / 560; }
  .pcols + .frame { max-width: 760px; margin: 0 auto; }
}
.flowsec .head { margin-bottom: 40px; }
.compare-table th, .compare-table td { padding: 10px 14px; }

/* The footer's columns get the width the brand column did not use, and on a
   phone each column's links run on as a line rather than one per row. */
.fcols { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .fcols { grid-template-columns: 1fr; gap: 24px; } .fcols ul { display: flex; flex-wrap: wrap; gap: 8px 18px; } .fcols h2 { margin-bottom: 8px; } }
@media (max-width: 1239px) { .flow { gap: 16px; } }
@media (max-width: 560px) { .compare-table th, .compare-table td { padding: 8px 6px; } }
@media (max-width: 899px) { .crop img { aspect-ratio: 2000 / 1000; object-fit: cover; object-position: top; } }
.pcols { margin-bottom: 36px; }
/* On a phone the hosted table is a list: each capability on its line, the two answers under it with their column's name. */
@media (max-width: 560px) {
  .compare-table thead { display: none; }
  .compare-table tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; border-bottom: 1px solid var(--line); padding: 10px 0; }
  .compare-table td { border: 0; padding: 2px 0; }
  .compare-table td:first-child { grid-column: 1 / -1; }
  .compare-table td[data-col]::before { content: attr(data-col); display: block; color: var(--muted); font-size: var(--fs-6); }
}
@media (max-width: 560px) {
  .frame .chrome { display: none; }
  .frows { padding: 4px; }
  .frows .row { min-height: 40px; }
  .flow .mark { margin-bottom: 6px; }
}
@media (max-width: 560px) {
  .urgent a { padding: 10px 14px; }
  .flow .cap { margin-top: 4px; }
  .closing .ctas .btn { padding: 0 14px; }
}
.legal h3 { font-size: var(--fs-4); }
.pcols .link, .feature .link, .more .link { display: inline-block; }
.hero-fade:has(.crop)::after { height: 64px; }
@media (max-width: 560px) { .pcols { gap: 24px; margin-bottom: 24px; } .pcols .link { margin-top: 12px; } }
/* H16: the capability index, the engine's one line about its scanners, and the one card style. */
.capindex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.capindex h2 { font-size: var(--fs-2); font-weight: 700; letter-spacing: -.03em; margin-bottom: 16px; }
.capindex ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); }
@media (max-width: 760px) { .capindex { grid-template-columns: 1fr; } }
.engine:not(:has(.tools)) { grid-template-columns: 1fr; max-width: 820px; }
.built { margin-top: 24px; color: var(--ink-2); }
.engine .links { justify-content: flex-start; margin-top: 8px; }
.resources h3 { margin-top: 0; }
#integrations ul { columns: 2; column-gap: 32px; display: block; } #integrations li { margin-bottom: 6px; }

/* Hosted or on your own server: two options side by side, the docs link and the integrations under them. */
.hostopts { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; margin: 32px auto 0; }
.hostopts .card p { color: var(--ink-2); }
#hosting .works, #hosting .links { text-align: center; justify-content: center; margin-top: 24px; }
@media (max-width: 700px) { .hostopts { grid-template-columns: 1fr; } }

/* The demo form (C0): one column of labelled fields, posted to the check service. */
.wrap.narrow { max-width: 640px; }
.demoform { display: grid; gap: 18px; padding: 28px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); }
.demoform .field { display: grid; gap: 6px; }
.demoform label { font: 600 var(--fs-6)/1.3 var(--font); color: var(--ink); }
.demoform input, .demoform select, .demoform textarea { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: var(--fs-5) var(--font); }
.demoform textarea { min-height: 110px; resize: vertical; }
.demoform input:focus, .demoform select:focus, .demoform textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.demoform .btn { justify-self: start; }
.demoform .small { margin: 0; font-size: var(--fs-6); color: var(--muted); }
.demoform .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* The product tour (C0): the console's screens in order, one line under each. */
.tourlist { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; gap: 56px; counter-reset: tour; }
.tourlist li { counter-increment: tour; }
.tourlist figure { margin: 0; }
.tourlist figcaption { margin-top: 16px; font-size: var(--fs-5); color: var(--ink-2); text-align: center; }
.tourlist figcaption::before { content: counter(tour) ". "; font-weight: 700; color: var(--ink); }
.tourlist img { display: block; width: 100%; height: auto; }
/* With the site's script (C0b): one step at a time, and a hotspot on each screen. */
.tour .shot { position: relative; }
.tour .hotspot { display: none; }
.tour.js .hotspot { display: block; position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border-radius: var(--r-full); border: 3px solid #fff; background: var(--accent); box-shadow: 0 0 0 6px rgba(99, 102, 241, .35); cursor: pointer; }
.tour.js .hotspot:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.tour .hs-tip { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); width: max-content; max-width: 60vw; padding: 6px 10px; border-radius: var(--r-sm); background: var(--ink); color: var(--bg); font: 600 var(--fs-6)/1.35 var(--font); opacity: 0; pointer-events: none; }
.tour .hotspot:hover .hs-tip, .tour .hotspot:focus-visible .hs-tip, .tour .hotspot.open .hs-tip { opacity: 1; }
.tourbar { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 auto 28px; }
.stepbtn { min-height: 40px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: transparent; color: var(--ink); font: 600 var(--fs-6)/1 var(--font); cursor: pointer; }
.stepbtn:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }
.stepbtn[disabled] { opacity: .45; cursor: default; }
.stepbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tourbar [aria-live] { min-width: 9em; text-align: center; color: var(--ink-2); font-weight: 600; }
/* On a phone the step count takes its own line, so Previous and Next both stay on the screen. */
@media (max-width: 480px) { .tourbar { flex-wrap: wrap; gap: 10px 12px; } .tourbar [aria-live] { order: -1; flex-basis: 100%; } }
.tour.js .tourlist { gap: 0; }
/* Campaign pages (C0b): no navigation, the legal links alone below. */
.top.slim .wrap { justify-content: space-between; }
footer.slim { padding: 28px 0; }
footer.slim .flinks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; }
.campaign { padding-top: 48px; }
.campaign .readiness { margin: 28px 0 40px; }
.campaign .proof { padding-left: 20px; }
/* Anchor navigation at the top of long pages (C0b). */
.toc { margin: 8px 0 32px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); }
.toc h2 { margin: 0 0 8px; font-size: var(--fs-5); }
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.toc li { margin: 4px 0; break-inside: avoid; }
@media (max-width: 640px) { .toc ol { columns: 1; } }

/* The worked prioritisation example on the attack surface page (B5). */
.worked { display: grid; gap: var(--gap); margin-top: 32px; }
.worked .pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.worked h3 { font-size: var(--fs-5); font-weight: 600; }
.worked .raw pre { margin: 8px 0 0; padding: 16px; border-radius: 12px; background: #141726; color: #e5e7eb; font-size: var(--fs-6); overflow-x: auto; white-space: pre; }
.worked .planned { padding: 16px 20px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); }
.worked .planned .action { margin-top: 8px; font-size: var(--fs-5); font-weight: 600; }
.worked .planned .meta { margin-top: 8px; color: var(--ink-2); font-size: var(--fs-6); }
.worked .planned .reason { margin-top: 8px; color: var(--ink-2); }
.worked .raw, .worked .planned { min-width: 0; }
@media (max-width: 960px) { .worked .pair { grid-template-columns: minmax(0, 1fr); } }

/* The email study's bars (pages.py bars): the label, the share as a bar, the figure. */
.studybars { display: grid; gap: 10px; margin: 16px 0 24px; }
.studybar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: 12px; align-items: center; font-size: var(--fs-6); }
.studytrack { width: 100%; height: 10px; display: block; }
.studytrack .track { fill: var(--panel-3); }
.studytrack .fill { fill: var(--accent); }
.studyvalue { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 600px) { .studybar { grid-template-columns: 1fr auto; } .studytrack { grid-column: 1 / -1; grid-row: 2; } }

/* Printed, a page is the document: the name in plain ink, since a gradient
   clipped to text prints as nothing, and no menu, buttons or footer links. */
@media print {
  .top { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .top nav, .top .actions, .top .utility, .menu-btn, .skip, .fcols > div:not(.fbrand), .fbottom .flinks { display: none; }
  .grad-text { background: none; color: var(--ink); -webkit-text-fill-color: var(--ink); }
  footer { background: none; padding: 16px 0 0; }
  .fcols { display: block; }
}

/* Under attack? (W3): the first hour, the deadline and both contacts on one phone screen. Scoped under .legal, whose guide rules it overrides. */
.legal .attacked h1 { font-size: var(--fs-2); margin: 0; }
.legal .attacked .lede { margin: 2px 0 8px; font-size: var(--fs-5); }
.legal .attacked ol, .legal .attacked ul { margin: 0 0 8px; padding-left: 1.3em; }
.legal .attacked li { margin: 0 0 4px; line-height: 1.4; }
.legal .attacked h2 { font-size: var(--fs-4); margin: 12px 0 4px; }
.legal .attacked p { margin: 0 0 8px; line-height: 1.4; }
.legal .attacked .customers { font-weight: 600; }
@media (max-width: 560px) { .legal .attacked li, .legal .attacked p { font-size: var(--fs-6); } }