/* SeaDirect Protect — public site theme, "Chartroom" language.
── THE FONT POLICY ──────────────────────────────────────────────────────
The same three roles as the customer portal, so a prospect who buys
recognises the product when they sign in:
--f-display Archivo Names and headings — headlines, product
names, plan names, the brand.
--f-text Instrument Sans Language — body copy, taglines, buttons.
--f-data JetBrains Mono Measurements — countable facts only.
Loaded from Google Fonts in base.html. The portal vendors the same three
locally because its CSP forbids a third-party origin; this site already
loads Bootstrap and the icon font from a CDN, so vendoring buys nothing.
── TOKENS ───────────────────────────────────────────────────────────────
This block is a hand-maintained TWIN of the `:root` block in
next_v2_front_end_client/assets/css/portal.css. Change one, change both —
the whole point is that the public site and the portal are one palette. */
:root {
--f-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
--f-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--f-data: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--primary: #3d9dff;
--primary-2: #7cbcff;
--success: #2ecf9a;
--danger: #ff6478;
--warning: #edb339;
--bg-0: #06090f;
--bg-1: #0b1018;
--ink: #e9eef8;
--ink-muted: #909db5;
--ink-faint: #64718a;
/* Panel surfaces. `--glass*` keep their names because the templates do. */
--glass: #0b1018;
--glass-strong: #141a26;
--glass-border: rgba(255, 255, 255, .088);
--glass-border-hover: rgba(255, 255, 255, .2);
--line-soft: rgba(255, 255, 255, .05);
--grid: rgba(255, 255, 255, .024);
--chip-brand-bg: rgba(61, 157, 255, .13);
--chip-brand-fg: #3d9dff;
--chip-ok-bg: rgba(46, 207, 154, .12);
--chip-ok-fg: #2ecf9a;
--chip-warn-bg: rgba(237, 179, 57, .13);
--chip-warn-fg: #edb339;
--chip-crit-bg: rgba(255, 100, 120, .13);
--chip-crit-fg: #ff6478;
--chip-neutral-bg: rgba(255, 255, 255, .06);
--chip-neutral-fg: #909db5;
--sheen: rgba(255, 255, 255, .048);
--shadow: 0 12px 32px -20px rgba(0, 0, 0, .9);
--shadow-lg: 0 30px 70px -36px rgba(0, 0, 0, 1);
--radius: 12px;
--radius-sm: 8px;
--r: 12px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.landing-theme {
margin: 0;
background: var(--bg-0);
color: var(--ink);
font-family: var(--f-text);
font-weight: 400;
font-size: 15px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* Anything measured. Applied to a figure, never to a sentence. */
.num, .mono { font-family: var(--f-data); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
/* The engraved field label — the one deliberate hybrid in the policy. */
.lbl { font-family: var(--f-display); font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--ink-faint); }
a { color: inherit; text-decoration: none; }
/* The home hero's portal replica and the showcase's screens deliberately run
past the right edge on a wide screen. `body`'s overflow-x does not stop a
mobile browser from widening the layout to fit them, so a tablet in landscape
(1200px and up) zoomed the whole page out to take the bleed in. `clip` cuts
it at the edge instead, and unlike `hidden` it makes no scroll container, so
the sticky panels inside keep sticking. */
main { overflow-x: clip; }
h1, h2, h3, h4, h5, h6 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
/* ---------- ground ---------- */
/* A drawn grid under a single brand light, faded out below the fold — the
chart table the panels sit on. The three blurred glow blobs that used to
live here are folded into this one declaration; the spans base.html still
renders are hidden below rather than removed, so no template has to change. */
.bg-aurora {
position: fixed;
inset: 0;
z-index: -1;
background:
radial-gradient(92vw 52vh at 24% -14%, var(--chip-brand-bg), transparent 62%),
linear-gradient(180deg, transparent, var(--bg-0) 68%),
repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 72px),
repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 72px),
var(--bg-0);
overflow: hidden;
}
.bg-aurora .glow {
position: absolute;
border-radius: 50%;
filter: blur(120px);
opacity: .34;
}
.glow-a { width: 540px; height: 540px; top: -120px; left: -120px; background: rgba(0, 109, 204, .42); }
.glow-b { width: 460px; height: 460px; top: 30%; right: -160px; background: rgba(14, 156, 108, .26); }
.glow-c { width: 420px; height: 420px; bottom: -160px; left: 30%; background: rgba(47, 151, 255, .22); }
.bg-aurora .glow { display: none; }
/* ---------- header / mega-menu ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
background: color-mix(in srgb, var(--bg-0) 84%, transparent);
border-bottom: 1px solid var(--glass-border);
}
.navbar-shell {
display: flex;
align-items: center;
gap: 1.5rem;
height: 70px;
}
.brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--f-display); font-weight: 700; font-size: 1rem; letter-spacing: -.03em; }
/* The official lockup (tile + wordmark, text outlined) as one image. An ![]()
,
never inline SVG: inline copies share a gradient id, and the tile goes blank
wherever the first copy on the page is hidden. Sized by height only. */
.sd-logo { display: block; height: 40px; width: auto; max-width: none; }
.mobile-nav .offcanvas-header .sd-logo { height: 34px; }
.footer-brand .sd-logo { height: 42px; }
.mega-nav {
display: flex;
align-items: center;
gap: .35rem;
list-style: none;
margin: 0 auto 0 1rem;
padding: 0;
}
.mega-item { position: relative; }
.mega-trigger {
display: inline-flex;
align-items: center;
gap: .35rem;
background: transparent;
border: 0;
color: var(--ink-muted);
font: inherit;
font-size: .96rem;
padding: .55rem .85rem;
border-radius: 10px;
cursor: pointer;
transition: color .15s, background .15s;
}
.mega-trigger i { font-size: .85rem; transition: transform .2s; }
.mega-item:hover .mega-trigger,
.mega-item.is-active .mega-trigger { color: var(--ink); background: var(--glass); }
.mega-item:hover .mega-trigger i { transform: rotate(180deg); }
.mega-panel {
position: absolute;
top: calc(100% + 12px);
left: 0;
background: rgba(12, 17, 30, .92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 16px;
box-shadow: var(--shadow);
padding: .6rem;
display: grid;
gap: .25rem;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .18s, transform .18s, visibility .18s;
}
.mega-panel::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.mega-panel-sm { width: 320px; }
.mega-panel-md { width: 380px; }
.mega-panel-lg { width: 720px; grid-template-columns: 1fr 1fr; }
/* The Plans panel: the three plans, the two ways into the builder, and the work
we deliver beside them. Three columns rather than two, capped against the
viewport so it never runs off a laptop screen. */
.mega-panel-plans { width: min(1020px, 94vw); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991px) {
.mega-panel-plans { grid-template-columns: 1fr; }
}
/* Single wide "Explore" panel — anchored to the navbar container so it spans
~70% of the screen, with a near-solid high-contrast surface (less glass) and
roomy room for descriptions. The lone nav item is `position: static` so the
panel positions against `.navbar-shell` rather than the trigger. */
.navbar-shell { position: relative; }
.mega-item { position: static; }
.mega-panel-xl {
left: 0;
width: 70vw;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .5rem 1.75rem;
padding: 1.6rem;
background: #0d1526;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-color: rgba(255, 255, 255, .18);
box-shadow: 0 28px 70px -18px rgba(0, 0, 0, .92);
}
.mega-col { display: flex; flex-direction: column; gap: .2rem; }
.mega-col-head {
display: flex; align-items: center; gap: .5rem;
font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--ink-muted); font-weight: 700;
padding: .35rem .85rem .65rem;
margin-bottom: .35rem;
border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.mega-col-head i { color: var(--primary-2); font-size: 1.05rem; }
.mega-panel-xl .mega-link { padding: .9rem; border-radius: 13px; }
.mega-panel-xl .mega-link:hover { background: rgba(255, 255, 255, .08); }
.mega-panel-xl .mega-ico { width: 44px; height: 44px; font-size: 1.35rem; }
.mega-panel-xl .mega-title { color: #fff; font-size: 1.02rem; }
.mega-panel-xl .mega-sub { color: var(--ink-muted); font-size: .9rem; line-height: 1.5; }
.mega-item:hover .mega-panel,
.mega-item:focus-within .mega-panel {
opacity: 1; visibility: visible; transform: translateY(0);
}
.mega-link {
display: flex;
gap: .8rem;
align-items: flex-start;
padding: .7rem .75rem;
border-radius: var(--radius-sm);
transition: background .15s;
}
.mega-link:hover { background: var(--glass-strong); }
.mega-ico {
flex: 0 0 auto;
display: grid; place-items: center;
width: 38px; height: 38px;
border-radius: 11px;
color: var(--ico, var(--primary));
background: color-mix(in srgb, var(--ico, var(--primary)) 16%, transparent);
font-size: 1.2rem;
}
.mega-copy { display: flex; flex-direction: column; gap: .15rem; }
.mega-title { font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: .4rem; }
.mega-sub { font-size: .84rem; color: var(--ink-faint); line-height: 1.4; }
.nav-cta { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.nav-burger {
display: none;
background: var(--glass);
border: 1px solid var(--glass-border);
color: var(--ink);
width: 42px; height: 42px;
border-radius: 11px;
font-size: 1.3rem;
cursor: pointer;
}
/* ---------- buttons ---------- */
.btn-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .72rem 1.15rem;
font-family: var(--f-display);
font-size: .9rem;
letter-spacing: -.012em;
border: 0;
border-radius: 12px;
font-weight: 500;
color: #fff;
background: linear-gradient(135deg, var(--primary), var(--primary-2));
box-shadow: 0 12px 28px -12px rgba(0, 109, 204, .9);
cursor: pointer;
transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn-cta:hover { transform: translateY(-2px); filter: brightness(1.06); color: #fff; }
.btn-ghost {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .7rem 1.2rem;
border-radius: 12px;
font-weight: 500;
color: var(--ink);
background: var(--glass);
border: 1px solid var(--glass-border);
cursor: pointer;
transition: border-color .15s, background .15s, transform .15s;
}
.btn-ghost:hover { border-color: var(--glass-border-hover); background: var(--glass-strong); transform: translateY(-2px); color: var(--ink); }
/* ---------- glass cards ---------- */
/* Panels, not glass. Kept the name because the templates use it; the backdrop
blur is gone — it made every card its own stacking context, which is how a
dropdown ends up painted underneath the card that follows it. */
.glass-card {
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
box-shadow: inset 0 1px 0 var(--sheen), var(--shadow);
padding: 1.4rem;
position: relative;
overflow: hidden;
}
/* ---------- layout helpers ---------- */
/* Vertical padding only: these classes sit on Bootstrap `.container`s, and a
`padding` shorthand here zeroed the container's side padding, which put text
against the screen edge on a phone and let every `.row`'s negative gutters
push the page 12px wider than the screen. */
.section { padding-block: 3.5rem; }
.section-head { max-width: 720px; margin: 0 0 2rem; }
.section-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.12; }
.section-head p { color: var(--ink-muted); margin-top: .5rem; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .3rem .7rem .3rem .5rem;
border: 1px solid var(--glass-border);
border-radius: 999px;
background: var(--glass);
box-shadow: var(--shadow);
font-family: var(--f-text);
font-size: .78rem;
font-weight: 500;
color: var(--ink-muted);
}
.eyebrow i { color: var(--primary); font-size: .95rem; }
.eyebrow .eyebrow-mark { display: block; width: 18px; height: 18px; }
.grad-text {
background: linear-gradient(120deg, var(--primary-2), var(--primary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ---------- hero ---------- */
.hero { padding-top: clamp(3rem, 8vw, 6.5rem); padding-bottom: 2rem; }
.hero-inner { max-width: 820px; }
.hero-title { font-size: clamp(2.35rem, 6.2vw, 4.15rem); font-weight: 700; line-height: 1.02; letter-spacing: -.04em; margin: 1.3rem 0 0; max-width: 17ch; }
.hero-lead { font-size: clamp(1rem, 1.6vw, 1.12rem); color: var(--ink-muted); max-width: 60ch; margin-top: 1.35rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
/* The tracker. One hairline slab rather than a row of separate boxes, matching
the portal's instrument cluster — and its figures take the data face, because
they are the only countable things on the page. */
.hero-trust {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(198px, 1fr));
margin-top: 3rem;
align-items: stretch;
border: 1px solid var(--glass-border);
border-radius: var(--radius);
overflow: hidden;
background: var(--glass);
box-shadow: inset 0 1px 0 var(--sheen), var(--shadow-lg);
font-size: .9rem;
}
/* `>` matters: the tile is a flex row of exactly TWO children — the icon and
the label wrapper. Without the child combinator (and without the wrapper)
every text run and every inside becomes its own flex item, which is
exactly how this strip fell apart into a column of fragments. */
.hero-trust > span {
display: flex;
align-items: center;
gap: .75rem;
padding: 1.05rem 1.15rem;
border-right: 1px solid var(--line-soft);
color: var(--ink-muted);
}
.hero-trust > span:last-child { border-right: 0; }
.hero-trust .track-t { min-width: 0; line-height: 1.45; }
/* The home hero's strip sits OUTSIDE `.hero-inner` (see home.html) so it fills
the container rather than the 820px reading column, where its labels broke
into three ragged lines. It stops at the container edge on purpose: it lines
up with the hero copy on the left and the header's own container on the
right, and a band wider than both reads as a mistake rather than a choice. */
.hero > .hero-trust { margin-top: 3.2rem; }
.hero-trust i {
display: grid;
place-items: center;
width: 34px;
height: 34px;
flex: none;
border-radius: 9px;
font-size: 1.05rem;
background: var(--chip-brand-bg);
color: var(--chip-brand-fg);
}
/* A countable fact inside the strip. */
.hero-trust b {
font-family: var(--f-data);
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
/* ---------- page head ---------- */
.page-head { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: 1rem; max-width: 820px; }
.page-title { font-size: clamp(2rem, 5vw, 3rem); margin: .8rem 0; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.page-lead { font-size: clamp(1.02rem, 2vw, 1.2rem); color: var(--ink-muted); }
.page-head .hero-actions { margin-top: 1.4rem; }
/* ---------- product / feature / step cards ---------- */
.card-ico {
display: grid; place-items: center;
width: 40px; height: 40px;
border-radius: 9px;
color: var(--ico, var(--primary));
background: color-mix(in srgb, var(--ico, var(--primary)) 16%, transparent);
font-size: 1.2rem;
margin-bottom: .9rem;
}
.product-card, .feature-card { display: flex; flex-direction: column; transition: transform .18s, border-color .18s; }
.product-card:hover, .feature-card:hover { transform: translateY(-3px); border-color: var(--ico, var(--primary)); box-shadow: inset 0 1px 0 var(--sheen), var(--shadow); }
.product-card h3, .feature-card h3, .step-card h3 { font-family: var(--f-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -.028em; margin-bottom: .4rem; }
.product-card p, .feature-card p, .step-card p { color: var(--ink-muted); font-size: .88rem; line-height: 1.55; margin: 0; }
.product-card .chip-tba { position: absolute; top: 1.2rem; right: 1.2rem; }
.card-link { margin-top: auto; padding-top: 1rem; color: var(--primary-2); font-weight: 500; display: inline-flex; align-items: center; gap: .4rem; }
.product-card:hover .card-link i { transform: translateX(4px); }
.card-link i { transition: transform .18s; }
.step-card .step-num {
display: grid; place-items: center;
width: 40px; height: 40px;
border-radius: 11px;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, var(--primary), var(--primary-2));
margin-bottom: 1rem;
}
/* ---------- chips & pills ---------- */
.chip {
font-size: .68rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
padding: .2rem .5rem;
border-radius: 999px;
}
.chip-tba { color: var(--warning); background: color-mix(in srgb, var(--warning) 18%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent); }
.chip-lg { font-size: .8rem; padding: .3rem .7rem; }
.pill {
display: inline-flex; align-items: center; gap: .35rem;
font-size: .85rem;
padding: .4rem .75rem;
border-radius: 999px;
color: var(--ink-muted);
background: var(--glass);
border: 1px solid var(--glass-border);
}
.pill-accent { color: var(--primary-2); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
/* ---------- CTA band & notice band ---------- */
.cta-band {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
background: linear-gradient(120deg, rgba(0, 109, 204, .16), rgba(14, 156, 108, .1));
}
.cta-band h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); }
.cta-band p { color: var(--ink-muted); margin: .4rem 0 0; }
.cta-band-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.notice-band { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.notice-band .card-ico { margin-bottom: 0; }
.notice-band > div { flex: 1 1 320px; }
.notice-band h3 { margin-bottom: .3rem; }
.notice-band p { color: var(--ink-muted); margin: 0; }
/* ---------- pentest specifics ---------- */
.stage-card { border-left: 3px solid var(--primary); }
.stage-tag { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-2); margin-bottom: .6rem; }
.stage-tag-2 { color: var(--success); }
.stage-card h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.stage-card p { color: var(--ink-muted); margin: 0; }
.aside-note { color: var(--ink-muted); max-width: 880px; margin: 1.6rem 0 0; font-size: .98rem; }
.aside-note strong { color: var(--ink); }
.verdict-card { text-align: left; }
.verdict-card h3 { font-size: 1.08rem; margin: .8rem 0 .4rem; }
.verdict-card p { color: var(--ink-muted); margin: 0; font-size: .93rem; }
.verdict-badge {
display: inline-block;
font-weight: 700;
letter-spacing: .1em;
font-size: .82rem;
padding: .3rem .7rem;
border-radius: 9px;
}
.verdict-pass .verdict-badge { color: var(--success); background: color-mix(in srgb, var(--success) 18%, transparent); }
.verdict-warn .verdict-badge { color: var(--warning); background: color-mix(in srgb, var(--warning) 18%, transparent); }
.verdict-fail .verdict-badge { color: var(--danger); background: color-mix(in srgb, var(--danger) 18%, transparent); }
.verdict-pass { border-top: 3px solid var(--success); }
.verdict-warn { border-top: 3px solid var(--warning); }
.verdict-fail { border-top: 3px solid var(--danger); }
/* ---------- price card ---------- */
.price-card { display: flex; flex-direction: column; background: var(--glass); }
.price-eyebrow { font-family: var(--f-text); font-size: .75rem; font-weight: 500; color: var(--primary); }
.price-amount { font-family: var(--f-data); font-variant-numeric: tabular-nums; font-size: 2.6rem; font-weight: 500; line-height: 1; letter-spacing: -.04em; margin-top: .4rem; }
.price-cur { font-size: 1.3rem; color: var(--ink-muted); font-weight: 500; }
.price-note { color: var(--ink-faint); margin-bottom: 1rem; }
.price-list { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .55rem; }
.price-list li { display: flex; align-items: flex-start; gap: .55rem; color: var(--ink-muted); font-size: .87rem; line-height: 1.5; }
.price-list i { color: var(--success); }
.price-card .btn-cta, .price-card .btn-ghost { margin-top: auto; }
.price-card-featured { border-color: var(--primary); box-shadow: inset 0 1px 0 var(--sheen), var(--shadow-lg); }
.price-badge {
display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start;
font-family: var(--f-display); font-size: .68rem; font-weight: 600; letter-spacing: .05em;
color: var(--success); background: color-mix(in srgb, var(--success) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
padding: .25rem .65rem; border-radius: 999px; margin-bottom: .7rem;
}
.price-badge i { font-size: .8rem; }
/* ---------- source strip ---------- */
.source-strip { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1.5rem; }
.source-label { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-right: .3rem; }
/* ---------- install / agent ---------- */
.install-card { display: flex; flex-direction: column; gap: 1.1rem; }
.install-os { display: flex; align-items: center; gap: .5rem; color: var(--ink-muted); font-size: .9rem; font-weight: 500; margin-bottom: .5rem; }
.install-os i { color: var(--primary-2); font-size: 1.15rem; }
.code-block { position: relative; background: #05070f; border: 1px solid var(--glass-border); border-radius: 12px; padding: .9rem 3.2rem .9rem 1rem; overflow-x: auto; }
.code-block code { font-family: ui-monospace, "Cascadia Code", monospace; font-size: .85rem; line-height: 1.6; color: #cfe0ff; white-space: pre; }
.code-copy {
position: absolute; top: .55rem; right: .55rem;
width: 34px; height: 34px;
display: grid; place-items: center;
background: var(--glass); border: 1px solid var(--glass-border);
color: var(--ink-muted); border-radius: 9px; cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
}
.code-copy:hover { border-color: var(--glass-border-hover); color: var(--ink); background: var(--glass-strong); }
.code-copy.copied { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.install-steps { list-style: none; padding: 0; margin: .2rem 0 0; display: grid; gap: .85rem; }
.install-steps li { display: flex; gap: .8rem; align-items: flex-start; color: var(--ink-muted); font-size: .95rem; }
.install-steps .num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: .82rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-2)); }
.install-steps strong { color: var(--ink); font-weight: 500; }
.install-card .tool-hint { display: flex; align-items: center; gap: .4rem; }
.install-card .tool-hint i { color: var(--primary-2); }
.install-card .tool-hint a { color: var(--primary-2); }
/* ---------- free tools ---------- */
.quota-note {
margin-top: 1.2rem;
/* A block of running text, not a flex row: as flex items every text run
and every became its own item, which is how a sentence came out
as "per IP . Need volume". */
display: inline-block;
color: var(--ink-muted);
font-size: .92rem;
background: var(--glass);
border: 1px solid var(--glass-border);
padding: .6rem .9rem;
border-radius: 12px;
}
.quota-note i { color: var(--primary-2); margin-right: .35rem; vertical-align: -.1em; }
.quota-note a { color: var(--primary-2); }
.tool-form { padding: 1.6rem; }
.tool-label { display: block; font-size: .9rem; color: var(--ink-muted); margin-bottom: .45rem; font-weight: 500; }
.tool-label .opt { color: var(--ink-faint); font-weight: 400; }
.tool-row { display: flex; gap: .7rem; flex-wrap: wrap; }
.tool-input {
flex: 1 1 240px;
background: rgba(5, 7, 15, .55);
border: 1px solid var(--glass-border);
color: var(--ink);
border-radius: 12px;
padding: .75rem .95rem;
font: inherit;
outline: none;
transition: border-color .15s, box-shadow .15s;
}
.tool-input::placeholder { color: var(--ink-faint); }
.tool-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 109, 204, .25); }
.tool-hint { color: var(--ink-faint); font-size: .85rem; margin: .8rem 0 0; }
/* ---------- HTMX scan loading ---------- */
/* Hidden until HTMX marks the indicator with .htmx-request; while shown we hide
any previous dossier so a single result is visible at a time. */
.scan-loading { display: none; margin-top: 1rem; }
.scan-loading.htmx-request { display: block; }
.scan-loading.htmx-request ~ #ipResult { display: none; }
.scan-skeleton { display: flex; align-items: center; gap: 1rem; }
.scan-spinner {
flex: 0 0 auto;
width: 44px; height: 44px;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, .12);
border-top-color: var(--primary-2);
animation: scan-spin .8s linear infinite;
}
.scan-lines { flex: 1 1 auto; display: grid; gap: .55rem; min-width: 0; }
.scan-line {
height: 12px; border-radius: 6px;
background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
background-size: 200% 100%;
animation: scan-shimmer 1.3s ease-in-out infinite;
}
.scan-line.w-50 { width: 50%; }
.scan-line.w-65 { width: 65%; }
.scan-line.w-80 { width: 80%; }
.scan-status { color: var(--ink-muted); font-size: .92rem; margin: 1rem 0 0; display: inline-flex; align-items: center; gap: .5rem; }
.scan-status i { color: var(--primary-2); }
@keyframes scan-spin { to { transform: rotate(360deg); } }
@keyframes scan-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
.scan-spinner, .scan-line { animation: none; }
}
.result-card { animation: fadeUp .35s ease both; }
.result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.result-eyebrow { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.result-ip { font-size: 1.8rem; font-family: ui-monospace, "Cascadia Code", monospace; margin-top: .2rem; }
/* Malware lookup: a SHA-512 digest is 128 chars — shrink it and let it wrap. */
.result-ip.hash-value { font-size: 1.05rem; word-break: break-all; line-height: 1.4; }
.verdict-pill { align-self: center; }
.verdict-notice { color: var(--primary-2); background: color-mix(in srgb, var(--primary) 18%, transparent); }
.demo-flag {
display: inline-flex; align-items: center; gap: .4rem;
font-size: .82rem; color: var(--warning);
background: color-mix(in srgb, var(--warning) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
padding: .35rem .65rem; border-radius: 999px;
margin-top: .8rem;
}
.kv { display: flex; flex-direction: column; gap: .15rem; background: rgba(5, 7, 15, .4); border: 1px solid var(--glass-border); border-radius: 11px; padding: .65rem .8rem; }
.kv span { font-size: .76rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.kv strong { font-size: .98rem; font-weight: 500; }
.result-section { margin-top: 1.6rem; }
.result-section h3 { font-size: 1.05rem; margin-bottom: .6rem; }
.muted { color: var(--ink-muted); }
.pivot-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.queued-card { text-align: center; }
.queued-card .card-ico { margin: 0 auto 1rem; }
.queued-card h2 { font-size: 1.5rem; }
.queued-card p { color: var(--ink-muted); max-width: 540px; margin: .6rem auto 0; }
.queued-card .demo-flag { margin-top: 1.2rem; }
.quota-rem { color: var(--primary-2); font-weight: 500; }
/* ---------- IP dossier ---------- */
.result-meta { color: var(--ink-faint); font-size: .9rem; margin-top: .35rem; }
.text-warn { color: var(--warning); }
.score-block { text-align: center; align-self: center; }
.score-big { font-size: 2.8rem; font-weight: 800; line-height: 1; }
.score-cap { font-size: .72rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.mono { font-family: ui-monospace, "Cascadia Code", monospace; }
.verdict-line { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.verdict-text { color: var(--ink-muted); font-size: .92rem; }
.conf-bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; max-width: 320px; margin-top: .6rem; }
.conf-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-2)); }
/* severity badges + score colour */
.sev-badge { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 8px; }
.sev-block, .sev-text-block { color: var(--danger); }
.sev-block { background: color-mix(in srgb, var(--danger) 18%, transparent); }
.sev-alert, .sev-text-alert { color: var(--warning); }
.sev-alert { background: color-mix(in srgb, var(--warning) 18%, transparent); }
.sev-warning, .sev-text-warning { color: var(--primary-2); }
.sev-warning { background: color-mix(in srgb, var(--primary) 18%, transparent); }
.sev-notice, .sev-text-notice { color: var(--ink-muted); }
.sev-notice { background: rgba(255,255,255,.08); }
.sev-info, .sev-scored, .sev-text-info, .sev-text-scored { color: var(--ink-muted); }
.sev-info, .sev-scored { background: rgba(255,255,255,.06); }
.inline-alert { display: flex; align-items: center; gap: .5rem; color: var(--ink-muted); font-size: .92rem; margin-top: 1rem; padding: .7rem .9rem; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--glass-border); }
.inline-alert i { color: var(--primary-2); }
.alert-ok i { color: var(--success); }
.alert-warn { color: var(--warning); }
.alert-warn i { color: var(--warning); }
.dl-kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .9rem; font-size: .92rem; margin: .4rem 0 0; }
.dl-kv dt { color: var(--ink-faint); }
.dl-kv dd { margin: 0; word-break: break-word; color: var(--ink); }
.dl-kv dd .pill { margin-bottom: .2rem; }
.rel-list { display: flex; flex-direction: column; gap: .4rem; }
.rel-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .55rem .75rem; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); transition: border-color .15s; }
.rel-row:hover { border-color: var(--glass-border-hover); }
.rel-row .mono { color: var(--primary-2); }
.ext-head { font-size: 1.05rem; display: flex; align-items: center; gap: .45rem; }
.ext-head i { color: var(--primary-2); }
.ext-sub { color: var(--ink-faint); font-size: .82rem; font-weight: 400; }
.ext-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem; margin-top: .9rem; }
.ext-link { display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-border); transition: border-color .15s, transform .15s; }
.ext-link:hover { border-color: var(--primary); transform: translateY(-2px); color: var(--primary-2); }
.ext-link i { font-size: 1.3rem; }
.ext-link small { display: block; color: var(--ink-faint); font-size: .76rem; }
.dossier-src { color: var(--ink-faint); font-size: .82rem; margin-top: 1.6rem; }
.dossier-src code { color: var(--ink-muted); background: rgba(255,255,255,.06); padding: .1rem .35rem; border-radius: 5px; }
.dossier-src .quota-rem i { color: var(--primary-2); }
/* ---------- Compass / NIS2 ---------- */
.prose-grid { max-width: 880px; }
.prose-grid p { color: var(--ink-muted); font-size: 1.04rem; margin: 0 0 1.15rem; }
.prose-grid p:last-child { margin-bottom: 0; }
.prose-grid strong { color: var(--ink); }
.prose-grid em { color: var(--ink); font-style: italic; }
.prose-grid a { color: var(--primary-2); }
.crumb { color: var(--primary-2); }
.crumb:hover { color: var(--ink); }
.page-ico { margin-bottom: 0 !important; }
.module-kind { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--primary-2); font-weight: 600; margin-bottom: .35rem; display: block; }
.module-card.is-current { border-color: var(--primary); background: linear-gradient(160deg, rgba(0, 109, 204, .16), var(--glass)); }
.module-card.is-current .card-link { color: var(--success); }
.map-card { padding: .25rem 1.6rem; }
.map-list { margin: 0; }
.map-row { display: grid; grid-template-columns: minmax(180px, 300px) 1fr; gap: 1.2rem; padding: 1.05rem 0; border-bottom: 1px solid var(--glass-border); }
.map-row:last-child { border-bottom: 0; }
.map-row dt { color: var(--ink); font-weight: 500; }
.map-row dd { color: var(--ink-muted); margin: 0; }
.map-row dd a { color: var(--primary-2); }
.nis2-callout { display: flex; align-items: flex-start; gap: 1.3rem; flex-wrap: wrap; background: linear-gradient(120deg, rgba(0, 109, 204, .14), rgba(14, 156, 108, .08)); }
.nis2-callout .card-ico { margin-bottom: 0; }
.nis2-callout > div { flex: 1 1 320px; }
.nis2-callout .result-eyebrow { color: var(--primary-2); }
.nis2-callout h3 { margin: .35rem 0 .6rem; font-size: 1.2rem; }
.nis2-callout p { color: var(--ink-muted); margin: 0; }
@media (max-width: 575px) { .map-row { grid-template-columns: 1fr; gap: .25rem; } }
/* ---------- mobile offcanvas ---------- */
.mobile-nav { background: var(--bg-1); backdrop-filter: blur(20px); color: var(--ink); border-left: 1px solid var(--glass-border); width: 320px; }
.mobile-nav .offcanvas-header { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem; border-bottom: 1px solid var(--glass-border); }
.btn-close-x { background: transparent; border: 0; color: var(--ink); font-size: 1.4rem; cursor: pointer; }
.mobile-acc .acc-group { border-bottom: 1px solid var(--glass-border); }
.acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; background: transparent; border: 0; color: var(--ink); font: inherit; font-weight: 500; padding: 1rem .25rem; cursor: pointer; }
.mobile-acc .collapse a, .mobile-acc .collapsing a { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; color: var(--ink-muted); border-radius: 10px; }
.mobile-acc .collapse a:hover { background: var(--glass); color: var(--ink); }
.mobile-explore { display: flex; flex-direction: column; gap: .1rem; }
.mobile-explore .mobile-sub-head {
font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
color: var(--ink-faint); font-weight: 600;
padding: 1rem .25rem .35rem;
}
.mobile-explore .mobile-sub-head:first-child { padding-top: .25rem; }
.mobile-explore a { display: flex; align-items: center; gap: .55rem; padding: .6rem .75rem; color: var(--ink-muted); border-radius: 10px; }
.mobile-explore a i { color: var(--primary-2); font-size: 1.1rem; }
.mobile-explore a:hover { background: var(--glass); color: var(--ink); }
/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--glass-border); background: rgba(5, 7, 15, .55); padding: 3rem 0 2rem; margin-top: 2rem; }
/* Five columns: brand, the (wide) platform column, then three link columns.
The platform column is wider because its links are themselves grouped under
headings — listed flat, thirteen of them made this column three times taller
than its neighbours and pushed the last one onto a second row. */
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 2.2fr 1fr 1fr 1fr;
gap: 2rem;
align-items: start;
}
.footer-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.footer-group { display: flex; flex-direction: column; }
.footer-group-head {
font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
color: var(--ink-faint); font-weight: 600; margin-bottom: .3rem;
}
/* A second heading inside one column needs air above it; the first must not
gain any, or it would sit lower than the headings beside it. */
.footer-h6-next { margin-top: 1.6rem; }
.footer-all {
display: inline-flex !important; align-items: center; gap: .35rem;
margin-top: 1.1rem; color: var(--primary-2) !important; font-size: .88rem;
}
.footer-tag { color: var(--ink-faint); font-size: .92rem; margin-top: .8rem; max-width: 280px; }
.footer-col h6 { color: var(--ink); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; margin-bottom: .9rem; }
.footer-col a { display: flex; align-items: center; gap: .4rem; color: var(--ink-muted); padding: .25rem 0; font-size: .92rem; }
.footer-col a:hover { color: var(--ink); }
.footer-base { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--glass-border); color: var(--ink-faint); font-size: .86rem; }
.footer-mono { font-family: ui-monospace, monospace; }
/* ---------- motion ----------
* Everything here animates transform and opacity only, so it stays off the main
* thread. The reveal styles are gated behind `html.js-motion`, which
* `assets/js/motion.js` adds: without the script — blocked, failed, or an old
* browser — nothing is ever hidden, so the page cannot end up blank.
*/
.anim { opacity: 0; }
.a-up { animation: fadeUp .6s cubic-bezier(.22, .68, .3, 1) forwards; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .15s; }
.d3 { animation-delay: .25s; } .d4 { animation-delay: .35s; }
.d5 { animation-delay: .45s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
/* Scroll reveal. `--reveal-step` is set per element by the script so a row of
cards ripples across rather than arriving as a block. */
html.js-motion .section-head,
html.js-motion .glass-card,
html.js-motion .module-section-head,
html.js-motion .prose-grid,
html.js-motion .hero-trust,
html.js-motion .section-jump,
html.js-motion .aside-note,
html.js-motion .outcome-card,
html.js-motion .builder-step {
opacity: 0;
transform: translateY(22px);
transition:
opacity .62s cubic-bezier(.22, .68, .3, 1),
transform .62s cubic-bezier(.22, .68, .3, 1);
transition-delay: calc(var(--reveal-step, 0) * 70ms);
}
html.js-motion .is-in { opacity: 1; transform: none; }
/* The hero runs its own load animation; the reveal rules must not re-hide it. */
html.js-motion .hero .anim { transform: none; transition: none; }
/* The aurora drifts, very slowly. Enough that the page is not a still image,
slow enough that nobody watching it consciously notices. */
.bg-aurora .glow { will-change: transform; }
.glow-a { animation: drift-a 26s ease-in-out infinite alternate; }
.glow-b { animation: drift-b 32s ease-in-out infinite alternate; }
.glow-c { animation: drift-c 38s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate3d(60px, 40px, 0) scale(1.08); } }
@keyframes drift-b { to { transform: translate3d(-70px, -30px, 0) scale(1.12); } }
@keyframes drift-c { to { transform: translate3d(40px, -50px, 0) scale(.94); } }
/* A slow sheen across the gradient headline. */
.grad-text {
background-size: 220% auto;
animation: grad-drift 9s ease-in-out infinite alternate;
}
@keyframes grad-drift { to { background-position: 100% center; } }
/* Cards lift, brighten at the border, and carry a highlight that follows the
pointer. The coordinates come from the script; the look is defined here. */
.glass-card {
position: relative;
transition: transform .25s cubic-bezier(.22, .68, .3, 1), border-color .25s, box-shadow .25s;
}
.glass-card::after {
content: "";
position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
rgba(255, 255, 255, .07), transparent 62%);
opacity: 0; transition: opacity .3s;
}
.glass-card[data-tracked]:hover::after { opacity: 1; }
.product-card:hover, .feature-card:hover {
transform: translateY(-6px);
box-shadow: 0 26px 60px -28px rgba(0, 0, 0, .9);
}
/* A light sweeps across the primary button once on hover. */
.btn-cta { position: relative; overflow: hidden; }
.btn-cta::after {
content: "";
position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
transform: skewX(-18deg); pointer-events: none;
}
.btn-cta:hover::after { animation: sheen .75s ease; }
@keyframes sheen { to { left: 130%; } }
/* The header is transparent over the hero and solidifies once the page moves,
so it stays legible over content without a permanent bar. */
.site-header { transition: background .3s, border-color .3s, backdrop-filter .3s; }
.site-header.is-scrolled {
background: color-mix(in srgb, var(--bg-0) 90%, transparent);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom-color: rgba(255, 255, 255, .12);
}
/* Menu panels ease open rather than appearing. */
.mega-panel { transition: opacity .2s ease, visibility .2s ease, transform .24s cubic-bezier(.22, .68, .3, 1); }
.mega-mini, .mega-link { transition: background .18s, transform .18s; }
.mega-mini:hover, .mega-panel-xl .mega-link:hover { transform: translateX(3px); }
/* One switch for all of it. This is an accessibility setting, not a taste. */
@media (prefers-reduced-motion: reduce) {
.anim { opacity: 1; animation: none; }
html { scroll-behavior: auto; }
html.js-motion .section-head,
html.js-motion .glass-card,
html.js-motion .module-section-head,
html.js-motion .prose-grid,
html.js-motion .hero-trust,
html.js-motion .section-jump,
html.js-motion .aside-note,
html.js-motion .outcome-card,
html.js-motion .builder-step {
opacity: 1; transform: none; transition: none;
}
.bg-aurora .glow, .grad-text { animation: none; }
.btn-cta:hover::after { animation: none; }
.glass-card, .product-card:hover, .feature-card:hover,
.mega-mini:hover, .mega-panel-xl .mega-link:hover { transform: none; transition: none; }
}
/* ---------- responsive ---------- */
@media (max-width: 991px) {
.mega-nav, .nav-cta .btn-ghost { display: none; }
.nav-burger { display: inline-grid; place-items: center; }
/* The platform column keeps its own two-column list, so it spans both. */
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-col-platform { grid-column: 1 / -1; }
}
/* The phone header. Brand, contact button and menu button need about 392px on
one line at their desktop sizes; below that the brand broke onto two lines and
"Contact us" turned into a two-line slab taller than the bar itself. All three
tighten and none may wrap. Under 360px the button keeps only its icon: the
label stays for screen readers, and the menu carries the full-width button. */
@media (max-width: 575px) {
.navbar-shell { height: 62px; gap: .75rem; }
.navbar-shell .brand { white-space: nowrap; font-size: .95rem; }
.navbar-shell .sd-logo { height: 34px; }
.nav-cta { gap: .5rem; flex: none; }
.nav-cta .btn-cta { white-space: nowrap; padding: .55rem .8rem; font-size: .85rem; border-radius: 11px; }
.nav-burger { flex: none; width: 40px; height: 40px; }
}
@media (max-width: 359px) {
.nav-cta .btn-cta { width: 40px; height: 40px; padding: 0; }
.nav-cta-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* The footer on a phone. One column made it about 1,800px of single links; the
names are short enough to sit two abreast even at 360px, and every link gets a
finger-sized row. */
@media (max-width: 575px) {
.footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem 1.25rem; }
.footer-brand, .footer-col-platform { grid-column: 1 / -1; }
.footer-groups { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.footer-col a { padding: .4rem 0; }
.footer-mail { padding-block: .4rem; }
.cta-band { flex-direction: column; align-items: flex-start; }
/* Buttons under a heading share the row and grow to fill it, so a wrapped
one is a full-width target rather than a stub hanging on the left. */
.cta-band-actions { width: 100%; }
.hero-actions > a, .cta-band-actions > a { flex: 1 1 auto; justify-content: center; }
}
/* iOS Safari zooms the whole page into any field whose text is under 16px, and
leaves it zoomed after the keyboard closes. Every form here used 15px. */
@media (max-width: 991px), (pointer: coarse) {
.tool-input, .estate-stepper input { font-size: 16px; }
}
/* ---------- free vulnerability lookup ---------- */
.tool-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.tool-actions .tool-hint { margin: 0; flex: 1 1 220px; }
/* CVE severity badges — reuse the .sev-badge shape, override colours. Kept
distinct from the threat-intel .sev-* classes (different scale). */
.vsev-critical { color: var(--danger); background: color-mix(in srgb, var(--danger) 20%, transparent); }
.vsev-high { color: #f3863f; background: color-mix(in srgb, #ef6c2e 20%, transparent); }
.vsev-medium { color: var(--warning); background: color-mix(in srgb, var(--warning) 20%, transparent); }
.vsev-low { color: var(--primary-2); background: color-mix(in srgb, var(--primary) 18%, transparent); }
.vsev-unknown { color: var(--ink-muted); background: rgba(255, 255, 255, .07); }
.vuln-tally { flex-wrap: wrap; gap: .5rem; align-items: center; }
.kev-flag { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, transparent); padding: .25rem .6rem; border-radius: 8px; }
.vuln-list { margin-top: 1.25rem; display: flex; flex-direction: column; }
.vuln-item { padding: 1rem 0; border-top: 1px solid var(--glass-border); }
.vuln-item:first-child { border-top: none; padding-top: .25rem; }
.vuln-item-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.vuln-id { font-weight: 600; color: var(--ink); text-decoration: none; }
.vuln-id:hover { color: var(--primary-2); }
.vuln-cvss { margin-left: auto; font-size: .82rem; color: var(--ink-muted); white-space: nowrap; }
.vuln-summary { margin: .5rem 0 .6rem; color: var(--ink-muted); font-size: .92rem; line-height: 1.5; }
.vuln-meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.vuln-meta .pill { font-size: .72rem; }
.src-pill { opacity: .7; }
@media (max-width: 575px) {
.vuln-cvss { margin-left: 0; }
}
/* User-Agent lookup — category badges reuse the .sev-badge shape, banded by risk. */
.uacat-high { color: var(--danger); background: color-mix(in srgb, var(--danger) 20%, transparent); }
.uacat-medium { color: var(--warning); background: color-mix(in srgb, var(--warning) 20%, transparent); }
.uacat-low { color: var(--primary-2); background: color-mix(in srgb, var(--primary) 18%, transparent); }
.ua-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem 1.25rem; margin-top: 1.25rem; }
.ua-field { display: flex; flex-direction: column; gap: .15rem; padding: .6rem 0; border-top: 1px solid var(--glass-border); }
.ua-key { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.ua-val { color: var(--ink); font-size: .95rem; }
.ua-val a { color: var(--primary-2); text-decoration: none; }
.ua-raw { margin-top: 1.25rem; }
.ua-raw summary { cursor: pointer; color: var(--ink-muted); font-size: .85rem; }
.ua-raw-string { white-space: pre-wrap; word-break: break-all; margin-top: .6rem; padding: .6rem .8rem; background: rgba(255,255,255,.04); border-radius: 8px; font-size: .82rem; color: var(--ink-muted); }
.ua-signals { margin: .6rem 0 0; padding-left: 1.1rem; color: var(--ink-faint); font-size: .82rem; }
.ua-signals li { margin: .15rem 0; }
/* ---------- Suspicious-event reporting (/report) ---------- */
.report-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
@media (max-width: 860px) { .report-grid { grid-template-columns: 1fr; } }
.report-form .tool-input,
.report-form select.tool-input,
.report-form textarea.tool-input { width: 100%; display: block; margin-bottom: 1.1rem; }
.report-form textarea.tool-input { resize: vertical; min-height: 7.5rem; }
.report-form .req { color: var(--danger); }
.report-form .opt { color: var(--ink-faint); font-weight: 400; font-size: .85em; }
.report-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .report-row { grid-template-columns: 1fr; } }
.report-contact { border: 1px solid var(--glass-border); border-radius: 14px; padding: 1rem 1.1rem .3rem; margin: .2rem 0 1.1rem; }
.report-contact legend { font-size: .82rem; color: var(--ink-muted); padding: 0 .5rem; width: auto; }
.report-alert { display: flex; gap: .55rem; align-items: flex-start; background: rgba(226, 49, 73, .12); border: 1px solid rgba(226, 49, 73, .35); color: #ffd7dd; border-radius: 12px; padding: .7rem .9rem; margin-bottom: 1.1rem; font-size: .92rem; }
.report-alert-warn { background: rgba(185, 121, 10, .12); border-color: rgba(185, 121, 10, .4); color: #ffe6b8; }
.report-submit { margin-top: .3rem; }
/* Honeypot — hidden from people, present for bots. */
.hp-field { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.report-aside { padding: 1.5rem; }
.report-aside-head, .report-share-head { font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; }
.report-share-head { font-size: .98rem; }
.report-aside-head i, .report-share-head i { color: var(--primary-2); }
.report-steps { margin: 0; padding-left: 1.2rem; color: var(--ink-muted); }
.report-steps li { margin: .5rem 0; }
.report-steps strong { color: var(--ink); }
.report-aside-note { color: var(--ink-faint); font-size: .88rem; margin: .9rem 0 0; }
.report-divider { border: none; border-top: 1px solid var(--glass-border); margin: 1.3rem 0; }
.report-share-row { display: flex; gap: .5rem; margin: .3rem 0 1rem; }
.report-share-row .tool-input { flex: 1 1 auto; min-width: 0; }
.report-qr { display: flex; justify-content: center; padding: .6rem; background: #ffffff; border-radius: 12px; width: max-content; margin: 0 auto; }
.report-qr img, .report-qr canvas { display: block; }
.report-qr-hint { text-align: center; }
.report-confirm { text-align: center; padding: 2.4rem 1.6rem; max-width: 640px; margin: 0 auto; }
.report-confirm-icon { font-size: 3rem; color: var(--success); line-height: 1; margin-bottom: .6rem; }
.report-confirm h2 { margin: 0 0 .6rem; }
.report-reference { font-size: 1.05rem; margin: 1rem 0 .3rem; }
.report-reference strong { color: var(--primary-2); letter-spacing: .03em; }
.report-confirm .cta-band-actions { justify-content: center; margin-top: 1.4rem; }
/* ---------- "Save as PDF" toolbar + print layout ---------- */
.result-actions { display: flex; justify-content: flex-end; margin: 1rem 0 -.4rem; }
.btn-print {
display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
padding: .45rem .85rem; border-radius: 10px;
border: 1px solid var(--glass-border); background: var(--glass-strong);
color: var(--ink); font: inherit; font-weight: 600; font-size: .85rem;
transition: border-color .15s ease, background .15s ease;
}
.btn-print:hover { border-color: var(--glass-border-hover); }
/* --- Announcement strip ------------------------------------------------- */
.announce-bar {
position: relative; z-index: 60;
background: linear-gradient(90deg, rgba(0, 109, 204, .35), rgba(47, 151, 255, .18));
border-bottom: 1px solid var(--glass-border);
font-size: .9rem; color: var(--ink);
}
.announce-bar .container { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding-top: .6rem; padding-bottom: .6rem; }
.announce-bar i { color: var(--primary-2); }
.announce-bar a { color: #fff; font-weight: 500; display: inline-flex; align-items: center; gap: .3rem; }
/* --- Navigation additions ----------------------------------------------- */
/* The capability panel is a grid of small entries rather than a list: thirteen
full-width rows would run past the fold on a laptop. */
/* The Platform panel: one column per capability heading plus a final column for
the things that are not capabilities, and a full-width footer link. Thirteen
names in one column ran off the bottom of a laptop screen. */
.mega-panel-platform {
left: 0;
width: min(1180px, 94vw);
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: .4rem 1.1rem;
padding: 1.5rem 1.6rem 1.1rem;
background: #0d1526;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-color: rgba(255, 255, 255, .18);
box-shadow: 0 28px 70px -18px rgba(0, 0, 0, .92);
}
/* The panel hangs from the nav container's left edge, which sits (100vw - 100%)/2
in from the screen's. Between 1092 and 1199px, 94vw measured from there ran 39px
past the right edge: invisible while closed, but a closed panel still counts
towards the page's width, so a 1180px tablet in landscape zoomed the whole
site out. Capping it at half the container plus half the screen, less a
gutter, keeps its right edge inside at every width; wider screens never reach
the cap. */
.mega-panel-platform { width: min(1180px, 94vw, calc(50% + 50vw - 1.5rem)); }
.mega-panel-platform .mega-col-head { padding: .35rem .5rem .55rem; }
.mega-foot {
grid-column: 1 / -1;
display: flex; align-items: center; gap: .45rem;
margin-top: .5rem; padding: .7rem .6rem 0;
border-top: 1px solid rgba(255, 255, 255, .12);
color: var(--primary-2); font-weight: 500; font-size: .92rem;
}
.mega-foot i:last-child { margin-left: auto; transition: transform .18s; }
.mega-foot:hover { color: #fff; }
.mega-foot:hover i:last-child { transform: translateX(4px); }
/* Narrower screens cannot carry five columns; fall back before the text wraps
to one word per line. */
@media (max-width: 1199px) {
.mega-panel-platform { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mega-mini { display: flex; align-items: center; gap: .6rem; padding: .5rem; border-radius: 11px; }
.mega-mini:hover { background: rgba(255, 255, 255, .08); }
.mega-mini > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.mega-mini strong { color: #fff; font-weight: 500; font-size: .95rem; }
.mega-mini em { color: var(--ink-faint); font-style: normal; font-size: .78rem; }
.mega-mini-ico {
flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
font-size: .95rem; color: var(--ico, var(--primary-2));
background: color-mix(in srgb, var(--ico, var(--primary)) 20%, transparent);
}
@media (max-width: 991px) { .nav-hide-sm { display: none; } }
/* --- Grouped capability sections ---------------------------------------- */
.module-section { margin-bottom: 3rem; }
.module-section:last-child { margin-bottom: 0; }
/* Anchored from the jump links, so the heading must clear the sticky header. */
.module-section { scroll-margin-top: 6rem; }
.module-section-head { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.2rem; }
.module-section-head h3 { font-size: 1.35rem; margin: 0 0 .2rem; }
.module-section-head p { color: var(--ink-muted); margin: 0; font-size: .97rem; }
.module-section-ico {
flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
font-size: 1.15rem; color: var(--primary-2);
background: color-mix(in srgb, var(--primary) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
}
.section-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.2rem; }
.section-jump .btn-chip { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; }
.section-jump .btn-chip i { color: var(--primary-2); }
.jump-count {
font-size: .74rem; font-variant-numeric: tabular-nums;
background: rgba(255, 255, 255, .1); border-radius: 999px; padding: .05rem .4rem;
}
.mobile-sub-head-nested { font-size: .68rem !important; opacity: .75; padding-left: 1.4rem !important; }
/* --- Cards -------------------------------------------------------------- */
.card-kind { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.plan-name { font-size: 1.5rem; margin: .1rem 0 .3rem; }
.plan-effort { display: flex; align-items: center; gap: .45rem; color: var(--ink-faint); font-size: .86rem; margin: 0 0 1.1rem; }
.plan-effort i { color: var(--primary-2); }
.price-list li span a { color: var(--primary-2); }
.delivers-card { display: flex; flex-direction: column; }
.delivers-card p { color: var(--ink-muted); }
/* --- Comparison tables --------------------------------------------------- */
/* Wide tables scroll inside their own card; the page body never scrolls. */
.table-card { padding: .3rem; }
.table-scroll { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare-table th, .compare-table td { padding: .85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--glass-border); }
.compare-table thead th { color: var(--ink); font-weight: 600; font-size: .95rem; border-bottom: 1px solid var(--glass-border-hover); }
.compare-table tbody th { color: var(--ink); font-weight: 500; width: 26%; }
.compare-table td { color: var(--ink-muted); font-size: .95rem; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
/* Comparison tables on a phone. At 640px they scrolled sideways inside their
card and showed two and a bit of four columns, with the plan names off the
screen. `.compare-stack` turns each row into a block instead: the row's own
heading, then every value under the name of the column it came from. The
names ride on the table as custom properties (`--col-2`, `--col-3`, `--col-4`,
and `--col-span` for a cell that spans the value columns), written once in
the template, so no cell carries its own label and nothing waits on a
script. A table that sets no names simply stacks. */
@media (max-width: 575px) {
.compare-stack, .compare-stack tbody, .compare-stack tr, .compare-stack th, .compare-stack td { display: block; }
.compare-table.compare-stack { min-width: 0; }
.compare-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.compare-stack tbody tr { padding: .95rem 1rem; border-bottom: 1px solid var(--glass-border); }
.compare-stack tbody tr:last-child { border-bottom: 0; }
.compare-stack tbody th, .compare-stack td { padding: 0; border: 0; }
.compare-stack tbody th { width: auto; margin-bottom: .45rem; font-size: 1rem; font-weight: 600; }
.compare-stack td + td { margin-top: .6rem; }
.compare-stack td::before {
display: block; margin-bottom: .1rem;
font-family: var(--f-display); font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
color: var(--primary-2);
}
.compare-stack td:nth-child(2)::before { content: var(--col-2, none); }
.compare-stack td:nth-child(3)::before { content: var(--col-3, none); }
.compare-stack td:nth-child(4)::before { content: var(--col-4, none); }
.compare-stack td[colspan]::before { content: var(--col-span, none); }
}
/* --- Product catalogue --------------------------------------------------- */
.catalogue-card { padding: 1.4rem 1.6rem; }
.catalogue-head { display: flex; align-items: flex-start; gap: 1rem; }
.catalogue-head .card-ico { margin-bottom: 0; }
.catalogue-head h3 { font-size: 1.2rem; margin: 0 0 .2rem; }
.catalogue-head p { color: var(--ink-muted); margin: 0; font-size: .95rem; }
.catalogue-list { margin-top: 1.1rem; }
.catalogue-row { padding: .8rem 0; border-top: 1px solid var(--glass-border); }
.catalogue-row-main { display: flex; flex-direction: column; gap: .2rem; }
.catalogue-row-main strong { color: var(--ink); font-weight: 500; }
.catalogue-row-main span { color: var(--ink-muted); font-size: .93rem; }
/* The price sits on the row's right on a wide screen and wraps underneath on a
narrow one, so the list reads as a list of products rather than a table that
has to be scrolled sideways on a phone. */
.catalogue-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.5rem; }
.catalogue-row-main { flex: 1 1 20rem; }
.catalogue-code { color: var(--ink-faint) !important; font-size: .8rem !important; }
.catalogue-price { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; margin-left: auto; }
.catalogue-price b { color: var(--ink); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.catalogue-price em { font-style: normal; color: var(--ink-faint); font-size: .82rem; }
.catalogue-price s { color: var(--ink-faint); font-size: .85rem; }
.catalogue-promo { color: var(--success) !important; }
.chip-price { color: var(--ink-faint) !important; font-size: .82rem !important; }
.chip-price b { color: var(--primary-2); font-variant-numeric: tabular-nums; }
.catalogue-req { flex: 1 1 100%; margin-top: .35rem; font-size: .82rem; color: var(--ink-faint); }
.catalogue-req i { color: var(--primary-2); }
.catalogue-req em { font-style: normal; color: var(--ink-muted); }
.product-chips { display: grid; gap: .55rem; }
.product-chip { background: rgba(5, 7, 15, .4); border: 1px solid var(--glass-border); border-radius: 11px; padding: .6rem .8rem; }
.product-chip strong { display: block; color: var(--ink); font-weight: 500; font-size: .95rem; }
.product-chip span { color: var(--ink-muted); font-size: .87rem; }
.package-card h3 { font-size: 1.1rem; }
.package-card p { color: var(--ink-muted); font-size: .93rem; }
.package-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .8rem 0 1rem; }
/* --- Plan builder -------------------------------------------------------- */
.builder-presets { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: 1.1rem 1.3rem; }
.builder-presets-label { color: var(--ink-faint); font-size: .86rem; display: inline-flex; align-items: center; gap: .35rem; margin-right: .2rem; }
.builder-presets-label i { color: var(--primary-2); }
.btn-chip {
border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink-muted);
border-radius: 999px; padding: .35rem .8rem; font-size: .85rem; font: inherit; font-size: .85rem;
cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.btn-chip:hover { border-color: var(--glass-border-hover); background: var(--glass-strong); color: var(--ink); }
.btn-chip-clear { color: var(--ink-faint); }
.builder-group { padding: 1.3rem 1.5rem; margin-bottom: 1rem; }
.builder-group-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: .5rem; }
.builder-group-head .card-ico { margin-bottom: 0; }
.builder-group-head h3 { font-size: 1.12rem; margin: 0 0 .15rem; }
.builder-group-head p { color: var(--ink-muted); margin: 0; font-size: .9rem; }
.builder-row { display: flex; align-items: flex-start; gap: .8rem; padding: .75rem .2rem; border-top: 1px solid var(--glass-border); cursor: pointer; }
.builder-row:hover { background: rgba(255, 255, 255, .03); }
.builder-check { flex: 0 0 auto; width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--primary); cursor: pointer; }
.builder-row-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.builder-row-body strong { color: var(--ink); font-weight: 500; }
.builder-row-body > span { color: var(--ink-muted); font-size: .9rem; }
.builder-req { font-style: normal; font-size: .8rem; color: var(--ink-faint); }
/* The two reasons a product is not simply a tick box: it replaces another, or it
needs a gateway the estate does not have yet. A blocked row stays readable —
it is telling the visitor what to change, not hiding itself. */
.builder-alt { color: var(--primary-2); }
.builder-bundle { color: var(--success); }
.builder-needs-site { color: var(--warn, #d9a441); }
.builder-row-blocked { opacity: .55; cursor: not-allowed; }
.builder-row-blocked .builder-check { cursor: not-allowed; }
/* Sticks alongside the list on a wide screen so the running total stays in view
while the catalogue scrolls past it. */
.builder-summary { position: sticky; top: 6rem; }
.builder-count { margin: .6rem 0 .8rem; }
.builder-count strong { font-size: 2.4rem; font-weight: 700; line-height: 1; }
.builder-count span { color: var(--ink-faint); }
.builder-chosen { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .4rem; max-height: 320px; overflow-y: auto; }
.builder-chosen li { display: flex; align-items: flex-start; gap: .45rem; color: var(--ink-muted); font-size: .92rem; }
.builder-chosen i { color: var(--success); }
.builder-empty { color: var(--ink-faint) !important; font-size: .9rem; }
.builder-actions { display: grid; gap: .6rem; }
.builder-actions .btn-cta, .builder-actions .btn-ghost { justify-content: center; }
#bCopy.copied { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); }
@media (max-width: 991px) { .builder-summary { position: static; } }
/* --- Builder: steps and outcome cards ------------------------------------ */
.builder-step { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.4rem; }
.builder-step h3 { font-size: 1.3rem; margin: 0 0 .2rem; }
.builder-step p { color: var(--ink-muted); margin: 0; font-size: .97rem; }
.builder-step-num {
flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px;
display: grid; place-items: center; font-weight: 700; color: #fff;
background: linear-gradient(135deg, var(--primary), var(--primary-2));
box-shadow: 0 10px 24px -12px rgba(0, 109, 204, .9);
}
.outcome-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .9rem; }
/* The whole card is the control: a 16px checkbox is a needlessly small target
for the primary question on the page. The real input stays in the DOM for
keyboard and assistive technology, and is drawn as the tick on the right. */
.outcome-card { position: relative; cursor: pointer; margin: 0; }
.outcome-check { position: absolute; opacity: 0; width: 0; height: 0; }
.outcome-body {
display: flex; align-items: flex-start; gap: .85rem;
padding: 1rem 1.1rem; height: 100%;
background: var(--glass); border: 1px solid var(--glass-border); border-radius: 15px;
transition: border-color .2s, background .2s, transform .2s cubic-bezier(.22, .68, .3, 1);
}
.outcome-card:hover .outcome-body { border-color: var(--glass-border-hover); background: var(--glass-strong); transform: translateY(-2px); }
.outcome-check:focus-visible + .outcome-body { outline: 2px solid var(--primary-2); outline-offset: 2px; }
.outcome-ico {
flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
display: grid; place-items: center; font-size: 1.15rem;
color: var(--ico, var(--primary-2));
background: color-mix(in srgb, var(--ico, var(--primary)) 18%, transparent);
transition: transform .25s cubic-bezier(.22, .68, .3, 1);
}
.outcome-copy { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1 1 auto; }
.outcome-copy strong { color: var(--ink); font-weight: 500; font-size: 1rem; line-height: 1.35; }
.outcome-copy span { color: var(--ink-muted); font-size: .88rem; line-height: 1.45; }
.outcome-tick {
flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px;
display: grid; place-items: center; font-size: .85rem;
border: 1px solid var(--glass-border-hover); color: transparent;
transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.outcome-check:checked + .outcome-body {
border-color: var(--primary);
background: linear-gradient(150deg, rgba(0, 109, 204, .2), var(--glass));
}
.outcome-check:checked + .outcome-body .outcome-tick {
background: linear-gradient(135deg, var(--primary), var(--primary-2));
border-color: transparent; color: #fff;
}
.outcome-check:checked + .outcome-body .outcome-ico { transform: scale(1.08); }
/* A product the builder ticked for you should be visibly different from one you
ticked yourself — otherwise the list looks like it changed on its own. */
.builder-row { transition: background .18s; }
.builder-check:checked ~ .builder-row-body strong { color: #fff; }
/* --- Builder: published prices and the indicative estimate ---------------- */
/* The price sits on its own line under the product name rather than beside it:
a figure that has to compete with a name for the same row is the first thing
to wrap badly on a phone, and the price is the line people scan for. */
.builder-price { font-size: .88rem; color: var(--ink-muted); display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; }
.builder-price b { color: var(--ink); font-weight: 600; }
.builder-price s { color: var(--ink-faint); }
.builder-price em { font-style: normal; color: var(--success); font-size: .82rem; }
.builder-check:checked ~ .builder-row-body .builder-price b { color: #fff; }
.builder-estimate { border-top: 1px solid var(--glass-border); padding-top: 1rem; margin-bottom: 1.2rem; }
.builder-estate { display: grid; gap: .35rem; margin: .7rem 0 1.1rem; }
.builder-estate-row {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .35rem .1rem;
}
.builder-estate-row + .builder-estate-row { border-top: 1px solid rgba(255, 255, 255, .05); }
.builder-estate-label {
display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 auto;
font-size: .92rem; color: var(--ink); cursor: pointer;
}
.builder-estate-label em { font-style: normal; font-size: .76rem; color: var(--ink-faint); }
/* One control, three parts: a step down, the number, a step up. The browser's
own spinner is hidden — it is a tiny target drawn in the operating system's
colours, which on a dark page looks like something has gone wrong rather than
like a control. */
.estate-stepper {
flex: 0 0 auto; display: inline-flex; align-items: stretch; overflow: hidden;
border: 1px solid var(--glass-border); border-radius: 999px;
background: rgba(255, 255, 255, .04);
transition: border-color .15s ease;
}
.estate-stepper:focus-within { border-color: var(--primary); }
.estate-step {
width: 2.1rem; border: 0; background: transparent; cursor: pointer;
color: var(--ink-muted); font-size: 1.05rem; line-height: 1; padding: 0;
display: grid; place-items: center; transition: background .15s ease, color .15s ease;
}
.estate-step:hover { background: rgba(255, 255, 255, .09); color: var(--ink); }
.estate-step:active { background: rgba(255, 255, 255, .14); }
.estate-stepper input {
width: 3rem; padding: .4rem 0; text-align: center;
border: 0; background: transparent; color: var(--ink);
font: inherit; font-size: .95rem; font-variant-numeric: tabular-nums;
appearance: textfield; -moz-appearance: textfield;
}
.estate-stepper input::-webkit-outer-spin-button,
.estate-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.estate-stepper input:focus { outline: none; }
.builder-total { display: flex; align-items: baseline; gap: .5rem; margin: 0; flex-wrap: wrap; }
.builder-total strong {
font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--ink);
font-variant-numeric: tabular-nums;
}
.builder-total span { color: var(--ink-faint); font-size: .9rem; }
.builder-total-note { color: var(--success); font-size: .84rem; margin: .3rem 0 .6rem; min-height: 1em; }
/* The one-time cost sits under the monthly figure and reads as a companion to
it, not a competitor: same shape, smaller, and set apart by a rule. */
.builder-total-once { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--glass-border); }
.builder-total-once strong { font-size: 1.4rem; color: var(--primary-2); }
.builder-total-once[hidden] { display: none; }
.builder-code { font-style: normal; font-size: .74rem; color: var(--ink-faint); margin-left: .35rem; }
/* --- Builder: how it is deployed, and endpoint groups ----------------------- */
/* Four answers to the first question, side by side where there is room. The
cards are the outcome cards with a radio inside, so they read as the same
kind of control and carry the same focus and ticked states. */
.deploy-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.deploy-counted { font-style: normal; font-size: .78rem; color: var(--primary-2); margin-top: .15rem; }
.builder-deployment { margin: .35rem 0 0; color: var(--primary-2); font-size: .9rem; min-height: 1.2em; }
.builder-chosen li.builder-chosen-head {
color: var(--ink); font-weight: 500; font-size: .86rem; margin-top: .35rem;
}
.builder-chosen li.builder-chosen-head:first-child { margin-top: 0; }
.builder-estate-figure { font-variant-numeric: tabular-nums; color: var(--ink); padding: 0 .9rem; }
.endpoint-group { margin-bottom: 1rem; }
.endpoint-group-head {
display: flex; flex-wrap: wrap; align-items: flex-end; gap: .9rem 1.2rem; margin-bottom: .6rem;
}
.endpoint-group-name { flex: 1 1 220px; display: flex; flex-direction: column; gap: .3rem; margin: 0; }
.endpoint-group-name span, .endpoint-group-count > span:first-child { color: var(--ink-faint); font-size: .8rem; }
.endpoint-group-count { display: flex; flex-direction: column; gap: .3rem; }
.endpoint-group-presets { padding: .4rem 0 .6rem; }
.endpoint-group .group-remove { margin-left: auto; }
/* `.tool-input` grows along its flex axis; in this column it would grow tall. */
.endpoint-group-name .tool-input { flex: none; width: 100%; }
/* A group lists the same products as every other group, so it shows each as a
name and a price in two columns rather than repeating every description. */
.endpoint-group-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); column-gap: 1.2rem; }
.endpoint-group-products .builder-row { padding: .55rem .2rem; }
.endpoint-group-products .builder-row-body > span:not(.builder-price),
.endpoint-group-products .builder-req { display: none; }
/* --- Printable summary link ---------------------------------------------- */
.sheet-actions .btn-cta, .sheet-actions .btn-ghost { white-space: nowrap; }
/* --- Review cadence ------------------------------------------------------ */
.cadence-card { position: relative; }
.cadence-card.is-suggested { border-color: var(--primary); background: linear-gradient(160deg, rgba(0, 109, 204, .2), var(--glass)); }
.cadence-flag {
position: absolute; top: -.7rem; right: 1.1rem; font-size: .74rem; font-weight: 600;
color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-2));
border-radius: 999px; padding: .2rem .6rem; display: inline-flex; align-items: center; gap: .3rem;
}
.cadence-tag { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-2); }
.cadence-card h3 { font-size: 1.25rem; margin: .3rem 0 .5rem; }
.cadence-card p { color: var(--ink-muted); margin: 0; font-size: .93rem; }
/* --- Appliances ---------------------------------------------------------- */
.appliance-card { display: flex; flex-direction: column; }
.appliance-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.appliance-head .card-ico { margin-bottom: 0; }
.appliance-head h3 { font-size: 1.5rem; margin: 0; }
/* A literal picture of the front panel: the port count is the thing a buyer is
choosing between, so it gets shown rather than only written. */
.port-strip { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.port {
width: 38px; height: 30px; border-radius: 6px; display: grid; place-items: center;
background: rgba(5, 7, 15, .55); border: 1px solid var(--glass-border-hover);
color: var(--primary-2); font-size: .9rem;
}
.appliance-ports { color: var(--ink); margin: 0 0 .8rem; }
.appliance-ports strong { font-size: 1.2rem; }
.appliance-card > p { color: var(--ink-muted); }
/* --- Deployment roles ----------------------------------------------------- */
.role-card { display: flex; flex-direction: column; }
.role-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.role-head .card-ico { margin-bottom: 0; }
.role-head h3 { font-size: 1.5rem; margin: 0; }
.role-num { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-2); }
.role-card > p { color: var(--ink-muted); }
.role-detail { font-size: .95rem; }
/* The honest caveat on each role — when NOT to pick it. Set apart so it reads as
guidance rather than as more selling. */
.role-when {
color: var(--ink-muted); font-size: .92rem;
border-left: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
padding: .1rem 0 .1rem .8rem; margin: .2rem 0 1rem;
}
.role-when strong { color: var(--ink); }
.role-card .card-link { margin-top: auto; }
.role-card-combined { background: linear-gradient(140deg, rgba(0, 109, 204, .16), var(--glass)); }
/* --- Clock card ---------------------------------------------------------- */
.clock-card { display: flex; flex-direction: column; }
.clock-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .8rem; }
.clock-list li { display: flex; align-items: baseline; gap: .9rem; padding-bottom: .8rem; border-bottom: 1px solid var(--glass-border); }
.clock-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.clock-list strong { font-size: 1.4rem; color: var(--primary-2); min-width: 4.5rem; }
.clock-list span { color: var(--ink-muted); font-size: .95rem; }
/* --- Footer additions ----------------------------------------------------- */
.footer-mail { display: inline-flex; align-items: center; gap: .45rem; color: var(--primary-2); margin-top: .8rem; font-size: .92rem; }
/* Print masthead is screen-hidden; revealed only when printing. */
.print-masthead { display: none; }
@media print {
/* Override the design tokens so every component prints light. */
:root {
--ink: #111827; --ink-muted: #374151; --ink-faint: #4b5563;
--bg-0: #ffffff; --bg-1: #ffffff;
--glass: #ffffff; --glass-strong: #ffffff;
--glass-border: #cbd5e1; --glass-border-hover: #cbd5e1; --shadow: none;
}
@page { margin: 14mm; }
body.landing-theme { background: #fff !important; color: #111827 !important; }
.site-header, .site-footer, .bg-aurora, .tool-form, .scan-loading, .cta-band,
.result-actions, .btn-print, .quota-note { display: none !important; }
.container { max-width: none !important; width: auto !important; }
.section { padding: 0 !important; }
.glass-card, .result-card, .feature-card {
background: #fff !important; border: 1px solid #cbd5e1 !important;
box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
color: #111827 !important;
}
.result-card, .feature-card, .vuln-item { break-inside: avoid; }
a { color: #111827 !important; }
/* Keep severity/threat tints so the printed report stays colour-coded. */
.pill, .sev-badge, .kev-flag, .conf-bar, .conf-bar span, .src-pill {
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.print-masthead {
display: flex !important; align-items: baseline; justify-content: space-between;
gap: 1rem; flex-wrap: wrap; margin: 0 0 1.3rem; padding: 0 0 .7rem;
border-bottom: 2px solid #111827; color: #111827;
}
.print-masthead .pm-brand { font-weight: 700; font-size: 1.05rem; }
.print-masthead .pm-brand .sd-logo { height: 30px; }
.print-masthead .pm-meta { text-align: right; font-size: .82rem; color: #374151; }
}
/* ---- icon centring ------------------------------------------------------ */
/* Same correction as the portal — see the long note in
next_v2_front_end_client/assets/css/portal.css. In short: an icon-font glyph
is drawn from the baseline, which for Tabler sits 0.943em from the top of a
1em box, leaving a centred icon 0.048em low. Applied only where an icon is
centred alone in a chip; an icon beside text keeps its baseline. */
.card-ico > .ti,
.mega-panel .card-ico > .ti {
display: block;
line-height: 1;
transform: translateY(-.048em);
}
/* In the tracker the IS the chip — it carries the wash and the rounded
corner — so the correction goes on the glyph it draws, not on the element.
Translating the element itself would move the chip; setting `display: block`
on it would destroy the grid that centres the glyph in the first place. */
.hero-trust > span > .ti::before {
display: block;
line-height: 1;
transform: translateY(-.048em);
}
/* ---- a heading that carries a measured value (an address, a version) ---- */
.page-title-mono { font-family: var(--f-data); font-weight: 500; letter-spacing: -.03em; color: var(--primary-2); word-break: break-all; }
/* ---- the footer's legal line ---- */
.footer-operator { max-width: 72ch; line-height: 1.5; }
.footer-legal { display: inline-flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.footer-legal a, .footer-linkbtn { color: var(--ink-muted); font-size: .86rem; }
.footer-legal a:hover, .footer-linkbtn:hover { color: var(--ink); }
.footer-linkbtn, .legal-linkbtn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.legal-linkbtn { color: var(--primary-2); text-decoration: underline; text-underline-offset: 2px; }
/* ---- the cookie notice ----
A strip along the bottom rather than a wall across the page: nothing here is
optional, so there is nothing to force a decision about before reading. */
.consent {
position: fixed; left: 50%; bottom: 1rem; z-index: 80;
width: min(880px, calc(100% - 2rem));
transform: translate(-50%, 1.2rem); opacity: 0;
transition: transform .3s cubic-bezier(.22, .68, .3, 1), opacity .25s ease;
}
/* `is-shown`, not `is-in`: the scroll-reveal rules own `.is-in` and would
reset this element's transform, dropping it half off the screen. */
.consent.is-shown { transform: translate(-50%, 0); opacity: 1; }
.consent-inner {
display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
padding: 1rem 1.1rem;
background: rgba(13, 21, 38, .97);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 16px;
box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .95);
}
.consent-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 1.25rem; color: var(--primary-2); background: var(--chip-brand-bg); }
.consent-copy { flex: 1 1 360px; min-width: 0; }
.consent-copy strong { display: block; color: var(--ink); font-family: var(--f-display); font-weight: 600; }
.consent-copy p { margin: .2rem 0 0; color: var(--ink-muted); font-size: .9rem; line-height: 1.5; }
.consent-copy a { color: var(--primary-2); text-decoration: underline; text-underline-offset: 2px; }
.consent-actions { display: flex; gap: .6rem; margin-left: auto; }
/* Accept and Decline look the same on purpose: an answer nudged by button
styling is not a free answer. */
.consent-btn {
min-width: 7rem; padding: .62rem 1.1rem; border-radius: 11px;
border: 1px solid var(--glass-border-hover); background: var(--glass-strong);
color: var(--ink); font: inherit; font-weight: 500; cursor: pointer;
transition: border-color .15s, background .15s;
}
.consent-btn:hover { border-color: var(--primary); background: rgba(61, 157, 255, .14); }
.consent-btn:focus-visible { outline: 2px solid var(--primary-2); outline-offset: 2px; }
@media (max-width: 575px) { .consent-actions { width: 100%; } .consent-btn { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }
/* ---- the contact form ---- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
@media (max-width: 991px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-form { display: grid; gap: 1.1rem; min-width: 0; }
.contact-step { margin: 0; padding: 1.5rem; min-width: 0; }
.contact-step-head { display: flex; align-items: center; gap: .75rem; float: left; width: 100%; margin: 0 0 1.1rem; padding: 0; font-family: var(--f-display); font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
@media (max-width: 575px) { .contact-fields { grid-template-columns: 1fr; } }
.contact-field { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.contact-field .tool-input { width: 100%; flex: none; }
.contact-field-wide { margin-top: 1rem; }
.contact-field-wide textarea { resize: vertical; min-height: 7rem; }
.contact-form select.tool-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%); background-position: calc(100% - 1.1rem) 55%, calc(100% - .8rem) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }
.contact-form select.tool-input option { background: #0d1526; color: var(--ink); }
.contact-form .req { color: var(--danger); }
.contact-needs + .contact-needs { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--glass-border); }
.contact-needs-head { font-size: 1.02rem; margin: 0 0 .25rem; }
.contact-needs-blurb { color: var(--ink-muted); font-size: .9rem; margin: 0 0 .9rem; }
.contact-plan { padding: .9rem 1rem; margin-bottom: 1.2rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); background: rgba(61, 157, 255, .08); }
.contact-plan p { margin: .35rem 0 0; }
.contact-methods { display: flex; flex-wrap: wrap; gap: .5rem; }
.contact-method { position: relative; cursor: pointer; }
.contact-method input { position: absolute; opacity: 0; width: 0; height: 0; }
.contact-method span { display: inline-block; padding: .55rem .9rem; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink-muted); font-size: .9rem; transition: border-color .15s, background .15s, color .15s; }
.contact-method input:checked + span { border-color: var(--primary); background: rgba(61, 157, 255, .16); color: var(--ink); }
.contact-method input:focus-visible + span { outline: 2px solid var(--primary-2); outline-offset: 2px; }
.contact-consent { display: flex; align-items: flex-start; gap: .7rem; margin: 1.2rem 0 1rem; color: var(--ink-muted); font-size: .92rem; cursor: pointer; }
.contact-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--primary); }
.contact-consent a { color: var(--primary-2); }
.contact-submit { min-width: 14rem; }
.contact-aside { display: grid; gap: 1rem; position: sticky; top: 6rem; }
@media (max-width: 991px) { .contact-aside { position: static; } }
.contact-aside .glass-card { padding: 1.4rem; }
.contact-mail { color: var(--primary-2); word-break: break-all; }
.contact-privacy { color: var(--ink-faint); font-size: .86rem; margin: 0; }
.contact-privacy i { color: var(--success); }
.contact-privacy a { color: var(--primary-2); }
.contact-confirm { text-align: center; padding: 2.4rem 1.6rem; max-width: 720px; margin: 0 auto; }
.contact-confirm-ico { font-size: 3rem; color: var(--success); line-height: 1; display: block; margin-bottom: .6rem; }
.contact-next { text-align: left; max-width: 520px; margin: 1.4rem auto; padding-left: 1.2rem; color: var(--ink-muted); }
.contact-next li { margin: .45rem 0; }
.contact-next strong { color: var(--ink); }
.contact-confirm .cta-band-actions { justify-content: center; margin-top: 1.2rem; }
/* ---- the privacy notice ---- */
.legal-meta { color: var(--ink-faint); font-size: .86rem; margin-top: .6rem; }
.legal-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 991px) { .legal-layout { grid-template-columns: 1fr; } .legal-toc { position: static !important; } }
.legal-toc { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: .15rem; padding: 1.1rem 1.2rem; }
.legal-toc .result-eyebrow { margin-bottom: .5rem; }
.legal-toc a { color: var(--ink-muted); font-size: .9rem; padding: .25rem 0; }
.legal-toc a:hover { color: var(--ink); }
.legal-doc { min-width: 0; max-width: 860px; }
.legal-section { scroll-margin-top: 6rem; margin-bottom: 2.6rem; }
.legal-section h2 { font-size: 1.5rem; margin-bottom: .8rem; }
.legal-section h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.legal-section p, .legal-section li, .legal-section dd { color: var(--ink-muted); line-height: 1.65; }
.legal-section strong { color: var(--ink); }
.legal-section a { color: var(--primary-2); }
.legal-summary { padding: 1.6rem; background: linear-gradient(135deg, rgba(0, 109, 204, .14), var(--glass)); }
.legal-points { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.legal-points li { display: flex; gap: .8rem; align-items: flex-start; }
.legal-points i { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 1.05rem; color: var(--primary-2); background: var(--chip-brand-bg); }
.legal-card { display: flex; gap: 1rem; align-items: flex-start; margin: 1.1rem 0; }
.legal-card .card-ico { margin-bottom: 0; flex: 0 0 auto; }
.legal-card p { margin: 0 0 .3rem; }
.legal-table { min-width: 560px; }
.legal-table th { width: 30%; font-size: .92rem; }
.legal-table td { font-size: .92rem; line-height: 1.55; }
.legal-list { padding-left: 1.2rem; }
.legal-list li { margin: .45rem 0; }
.legal-dl dt { display: flex; align-items: center; gap: .5rem; color: var(--ink); font-weight: 600; margin-top: 1.1rem; }
.legal-dl dt i { color: var(--primary-2); }
.legal-dl dd { margin: .3rem 0 0 1.6rem; }
/* The terms of service: thirty-odd sections, so the contents scroll on their
own rather than running off the bottom of a laptop screen, and each clause
carries its number in a gutter so "clause 19.4" is findable by eye. */
.legal-toc-long { max-height: calc(100vh - 8rem); overflow-y: auto; }
.legal-toc-long a { font-size: .86rem; }
.legal-toc-num { display: inline-block; min-width: 1.7rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.legal-section-summary { font-style: italic; padding: .7rem 1rem; border-left: 3px solid var(--primary-2); background: var(--line-soft); border-radius: 0 10px 10px 0; margin-bottom: 1.2rem; }
.legal-clause { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 0 .4rem; margin-bottom: 1.1rem; }
.legal-clause-num { color: var(--ink-faint); font-variant-numeric: tabular-nums; font-size: .9rem; padding-top: .1rem; }
.legal-clause h3 { margin-bottom: .3rem; }
.legal-clause p { margin-bottom: .5rem; }
.legal-clause .legal-list { margin-bottom: .5rem; }
.legal-draft { margin-top: 1rem; }
/* ---- the address profile ---- */
.ip-class { display: inline-flex; align-items: center; gap: .4rem; align-self: center; padding: .35rem .75rem; border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.ip-class.is-public { color: var(--primary-2); background: rgba(61, 157, 255, .14); }
.ip-class.is-special { color: var(--warning); background: rgba(237, 179, 57, .14); }
/* An address our intelligence has a verdict on. The card is the reason the page
is published at all, so it reads before the arithmetic below it. */
.ip-class.is-bad { color: var(--danger); background: rgba(255, 100, 120, .14); }
.ip-verdict { border-color: color-mix(in srgb, var(--danger) 32%, var(--glass-border)); }
.ip-verdict .result-ip { color: var(--danger); }
.ip-verdict .result-eyebrow { color: var(--danger); }
.threat-table { min-width: 560px; }
.threat-table td:first-child a { color: var(--primary-2); }
/* On a phone the feed count is the column worth losing: the address, the verdict,
the score and the date all fit without the card scrolling sideways. */
@media (max-width: 575px) {
.threat-table { min-width: 0; }
.threat-table th:nth-child(4), .threat-table td:nth-child(4) { display: none; }
.threat-table th, .threat-table td { padding: .6rem .5rem; font-size: .86rem; }
}
.ip-note { color: var(--ink-muted); margin: 1rem 0 0; max-width: 78ch; }
.ip-origin { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem; margin-top: 1.1rem; }
.ip-facts { margin-top: 1.2rem; }
.ip-wrap { word-break: break-all; }
.ip-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .7rem; }
.ip-block { display: flex; flex-direction: column; gap: .25rem; padding: .8rem .9rem; border-radius: 11px; background: rgba(5, 7, 15, .4); border: 1px solid var(--glass-border); min-width: 0; }
.ip-block-label { font-size: .76rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.ip-block-range { color: var(--ink-muted); font-size: .84rem; }
.ip-block .pill { align-self: flex-start; font-size: .76rem; }
.ip-neighbours { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--glass-border); }
.ip-neighbours-label { font-size: .76rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; margin-right: .3rem; }
.ip-neighbours .btn-chip { font-size: .8rem; }
.ip-here { padding: .35rem .8rem; border-radius: 999px; background: rgba(61, 157, 255, .16); color: var(--ink); font-size: .8rem; }
.ip-live .scan-status { margin-top: .9rem; }
/* ---- vulnerability pages ---- */
.vuln-ref { color: var(--ink-faint); font-size: .9rem; }
.vuln-ref:hover { color: var(--primary-2); }
.advisory-head { font-size: 1.2rem; margin-bottom: .4rem; }
.ip-neighbours .btn-chip { font-family: var(--f-data); letter-spacing: -.02em; }
/* ---- the software directory ---- */
.sw-filter { display: flex; align-items: center; gap: .6rem; margin-top: 1.3rem; width: 100%; max-width: 520px; }
.sw-filter i { color: var(--primary-2); font-size: 1.2rem; }
.sw-filter .tool-input { flex: 1 1 auto; }
.sw-group { margin-bottom: 2.6rem; scroll-margin-top: 6rem; }
.sw-group-title { font-size: 1.35rem; margin: 0 0 .2rem; }
.sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .55rem; }
.sw-item {
display: flex; flex-direction: column; gap: .1rem; min-width: 0;
padding: .7rem .85rem; border-radius: 11px;
background: var(--glass); border: 1px solid var(--glass-border);
transition: border-color .15s, transform .15s;
}
.sw-item:hover { border-color: var(--primary); transform: translateY(-2px); }
.sw-item strong { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.sw-item span { color: var(--ink-faint); font-size: .82rem; overflow-wrap: anywhere; }
.sw-facts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.sw-hub-link { margin: 1rem 0 0; }
.sw-hub-link a { color: var(--primary-2); display: inline-flex; align-items: center; gap: .4rem; }
.sw-when { margin-left: auto; color: var(--ink-faint); font-size: .8rem; }
@media (prefers-reduced-motion: reduce) { .sw-item:hover { transform: none; } }
/* ---------- Version picker (software::versions) ---------- */
/* The product's releases under a lookup form: a