/* ============================================================
Ciphero — AI Security Platform · shared web design system
Near-black, warm greys and a single gold accent, with a light theme
on the same tokens: both palettes are Cassandra's (cassandra.css), so
every public page reads as one site in either mode. The theme is the
data-theme attribute on , set by shared/_theme_head before this
file loads; no attribute means dark. Outfit display, Inter body,
IBM Plex Mono.
============================================================ */
:root {
--bg: #0a0a0a;
--bg-2: #111111;
--panel: rgba(255,255,255,0.055);
--panel-2: rgba(255,255,255,0.03);
--text: #ededed;
--muted: #a1a1a1;
--dim: #6e6e6e;
--line: rgba(255,255,255,0.08);
--line-2: rgba(255,255,255,0.14);
--accent: #d6b77f;
--accent-2: #e3cb9a;
--accent-3: #efe0bf;
--accent-deep:#b3924f;
--accent-bg: rgba(214,183,127,0.10);
--accent-line:rgba(214,183,127,0.32);
--halo: rgba(214,183,127,0.08);
--btn-bg: #ededed;
--btn-text: #0a0a0a;
--btn-hover: #ffffff;
--green: #3ecf8e;
--red: #ff6369;
--red-text: #f3dcdf;
--amber: #f2c94c;
--orange: #ff9b4a;
/* colour channels, for the many translucent fills: rgba(var(--ink), .03) is a
faint light surface on the dark page and a faint dark one on the light page */
--ink: 255,255,255;
--paper: 10,10,10;
--paper-2: 17,17,17;
--accent-rgb:214,183,127;
--red-rgb: 255,99,105;
--green-rgb: 62,207,142;
--amber-rgb: 242,201,76;
--panel-grad: linear-gradient(180deg, #151515, #0f0f0f);
--mark-bg: radial-gradient(circle at 50% 30%, #312c25, #151412 78%);
--shadow-btn: 0 12px 34px -18px rgba(0,0,0,0.9);
--shadow-lg: 0 40px 90px -50px rgba(0,0,0,0.9);
--shadow-xl: 0 50px 110px -40px rgba(0,0,0,0.95);
--statue-shadow: drop-shadow(0 30px 60px rgba(0,0,0,0.55));
--statue-shadow-sm: drop-shadow(0 14px 26px rgba(0,0,0,0.6));
--shadow-k: 1;
--display: 'Outfit', 'Inter', system-ui, sans-serif;
--sans: 'Inter', system-ui, -apple-system, sans-serif;
--mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--maxw: 1180px;
--nav-h: 70px;
color-scheme: dark;
}
/* Light theme: Cassandra's light palette (cassandra.css), so the two surfaces
stay one site in both modes. Picked by shared/_theme_head: the visitor's
saved choice (the nav toggle), else light for a first visit. */
html[data-theme="light"] {
--bg: #fafaf9;
--bg-2: #ffffff;
--panel: rgba(0,0,0,0.035);
--panel-2: rgba(0,0,0,0.02);
--text: #111111;
--muted: #5d5d5d;
--dim: #7a7a7a;
--line: rgba(0,0,0,0.08);
--line-2: rgba(0,0,0,0.14);
--accent: #8b6a32;
--accent-2: #7d5f2c;
--accent-3: #6a5026;
--accent-deep:#a07c3c;
--accent-bg: rgba(139,106,50,0.10);
--accent-line:rgba(139,106,50,0.32);
--halo: rgba(139,106,50,0.07);
--btn-bg: #111111;
--btn-text: #ffffff;
--btn-hover: #000000;
--green: #059669;
--red: #dc2626;
--red-text: #991b1b;
--amber: #b45309;
--orange: #ea580c;
--ink: 0,0,0;
--paper: 250,250,249;
--paper-2: 255,255,255;
--accent-rgb:139,106,50;
--red-rgb: 220,38,38;
--green-rgb: 5,150,105;
--amber-rgb: 180,83,9;
--panel-grad: linear-gradient(180deg, #ffffff, #f5f5f4);
--mark-bg: radial-gradient(circle at 50% 30%, #f1ece3, #d9d0c1 80%);
--shadow-btn: 0 10px 24px -14px rgba(0,0,0,0.35);
--shadow-lg: 0 24px 60px -30px rgba(0,0,0,0.18);
--shadow-xl: 0 30px 80px -30px rgba(0,0,0,0.25);
--statue-shadow: drop-shadow(0 30px 36px rgba(0,0,0,0.14));
--statue-shadow-sm: drop-shadow(0 12px 20px rgba(0,0,0,0.16));
--shadow-k: 0.22;
color-scheme: light;
}
/* Dark islands: product screens, the photo plates and the event banner carry
dark screenshots and dark artwork, so in the light theme they keep the dark
palette, as a dark screen on a light page. Same values as :root. */
html[data-theme="light"] :is(.win, .vf, .ev, .ad-card, .ad-panel, .ad-policy, .plate, .event-banner, .island) {
--bg: #0a0a0a; --bg-2: #111111; --panel: rgba(255,255,255,0.055); --panel-2: rgba(255,255,255,0.03);
--text: #ededed; --muted: #a1a1a1; --dim: #6e6e6e; --line: rgba(255,255,255,0.08); --line-2: rgba(255,255,255,0.14);
--accent: #d6b77f; --accent-2: #e3cb9a; --accent-3: #efe0bf; --accent-deep: #b3924f;
--accent-bg: rgba(214,183,127,0.10); --accent-line: rgba(214,183,127,0.32); --halo: rgba(214,183,127,0.08);
--btn-bg: #ededed; --btn-text: #0a0a0a; --btn-hover: #ffffff;
--green: #3ecf8e; --red: #ff6369; --red-text: #f3dcdf; --amber: #f2c94c; --orange: #ff9b4a;
--ink: 255,255,255; --paper: 10,10,10; --paper-2: 17,17,17;
--accent-rgb: 214,183,127; --red-rgb: 255,99,105; --green-rgb: 62,207,142; --amber-rgb: 242,201,76;
--panel-grad: linear-gradient(180deg, #151515, #0f0f0f); --mark-bg: radial-gradient(circle at 50% 30%, #312c25, #151412 78%);
--shadow-lg: 0 24px 60px -30px rgba(0,0,0,0.35); --shadow-k: 0.5;
color: var(--text); color-scheme: dark;
}
/* The three cards that hang off the bottom of the enterprise plate sit half
on the plate and half on the page, so in the light theme they take the
page's palette: light cards over a dark plate instead of dark on dark. */
html[data-theme="light"] .ent-card {
--bg: #ffffff; --panel: rgba(0,0,0,0.035); --text: #111111; --muted: #5d5d5d; --dim: #7a7a7a;
--line: rgba(0,0,0,0.08); --line-2: rgba(0,0,0,0.14); --accent: #8b6a32; --accent-2: #7d5f2c; --accent-line: rgba(139,106,50,0.32);
--shadow-lg: 0 24px 60px -30px rgba(0,0,0,0.25); color: var(--text);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--sans);
color: var(--text);
background: var(--bg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
position: relative;
}
/* a faint warm glow at the top of the page, nothing else (absolute so
full-page renders correctly) */
body::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(1100px 600px at 50% -200px, rgba(var(--accent-rgb),0.10), transparent 70%),
var(--bg);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(var(--accent-rgb),0.35); color: var(--text); }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.03em; line-height: 1.06; font-weight: 700; }
h1 { font-size: clamp(38px, 6vw, 68px); }
h2 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.028em; }
h3 { font-size: 20px; letter-spacing: -0.02em; }
p { color: var(--muted); }
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); display: inline-block; }
.hl { color: var(--accent-2); }
.lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--muted); font-weight: 300; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
/* ---------- nav ---------- */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; justify-content: center;
padding: 16px 20px;
transition: padding .3s ease;
}
.nav-inner {
width: 100%; max-width: var(--maxw);
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
height: 56px; padding: 0 10px 0 16px;
border: 1px solid var(--line);
background: rgba(var(--paper),0.72);
backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
border-radius: 15px;
box-shadow: 0 16px 50px -28px rgba(0,0,0,calc(0.9 * var(--shadow-k)));
transition: background .3s, border-color .3s;
}
.nav.scrolled .nav-inner { background: rgba(var(--paper),0.9); border-color: var(--line-2); }
/* gap is the wordmark-to-emblem spacing; .bt adds its own padding-left so the
separator bar keeps the same distance it had at gap:10px. */
.brand { display: flex; align-items: center; gap: 5px; min-width: 0; }
/* emblem_white.png is 1024x1024 but its glyph only occupies x288..707, so ~59%
of the file width is transparent padding — about 7px per side at 24px. The
negative margins cancel that, so the visual gap matches the CSS gap above. */
.brand img { width: 24px; height: 24px; margin: 0 -7px; }
.brand .bn { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.brand .bt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2); border-left: 1px solid var(--line-2); padding-left: 10px; margin-left: 10px; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 26px; justify-self: center; }
.nav-links a { font-size: 14px; color: var(--muted); transition: color .15s; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-right { display: flex; align-items: center; gap: 12px; justify-self: end; }
/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 9px; font-family: inherit; font-weight: 600; font-size: 14.5px; padding: 11px 18px; border: 0; border-radius: 10px; appearance: none; -webkit-appearance: none; transition: transform .15s, box-shadow .15s, border-color .15s, background .15s; cursor: pointer; white-space: nowrap; }
.btn svg { width: 16px; height: 16px; }
/* Primary is a solid light button, like Cassandra's: the gold stays an accent
and never becomes a fill. */
.btn-primary { color: var(--btn-text); background: var(--btn-bg); box-shadow: var(--shadow-btn); }
.btn-primary:hover { transform: translateY(-2px); background: var(--btn-hover); }
.btn-ghost { color: var(--text); border: 1px solid var(--line-2); background: rgba(var(--ink),0.02); }
.btn-ghost:hover { border-color: var(--accent-line); background: var(--panel-2); transform: translateY(-2px); }
.btn-sm { padding: 9px 15px; font-size: 13.5px; border-radius: 9px; }
/* ---------- sections ---------- */
section { position: relative; }
.section { padding: 92px 0; }
.section-sm { padding: 64px 0; }
.sec-head { max-width: 720px; }
.sec-head .kicker { margin-bottom: 16px; }
.sec-head h2 { margin-bottom: 16px; }
.divider { height: 1px; background: var(--line); border: none; }
/* ---------- hero ---------- */
.hero { padding: calc(var(--nav-h) + 74px) 0 84px; position: relative; overflow: hidden; }
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { margin: 20px 0 22px; max-width: 15ch; }
.hero .lead { max-width: 54ch; }
.hero-art { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; max-width: 900px; z-index: 1; pointer-events: none; }
/* The backdrop plate is a crimson scene; the hue-rotate walks its reds to
ember and bronze so it sits with the gold accent instead of fighting it. */
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 78% center; opacity: 0.85;
filter: hue-rotate(28deg) saturate(0.72) brightness(0.92);
-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 28%, #000 62%);
mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 28%, #000 62%); }
/* isolated statue figure anchored right (transparent PNG) with a warm aura */
.hero-figure { position: absolute; top: 0; right: max(0px, calc((100% - var(--maxw)) / 2)); bottom: 0; width: 46%; max-width: 620px; z-index: 1; pointer-events: none; }
.hero-figure::before { content: ""; position: absolute; right: 4%; top: 140px; width: 460px; height: 460px;
background: radial-gradient(circle, rgba(var(--accent-rgb),0.22), rgba(var(--accent-rgb),0.05) 48%, transparent 72%); filter: blur(4px); }
/* top-anchored so the marble head (10.13% down the PNG) lands on the headline top (~190px) */
.hero-figure img { position: absolute; right: 0; top: 116px; height: 720px; width: auto; object-fit: contain; object-position: top right; opacity: 0.97;
filter: var(--statue-shadow);
-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.55) 18%, #000 44%);
mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.55) 18%, #000 44%); }
/* Product heroes (Orpheus, Perseus) carry a fixed-size statue, so the hero has
to be tall enough to contain it or .hero's overflow:hidden crops the figure's
feet. Their copy blocks are different lengths, so left to size themselves the
two heroes differ by ~70px and the statue appears to jump when you move
between the pages. Pinning a shared floor keeps both the figure and the hero
itself identical across the two.
The floor tracks the figure rather than being a constant, because the figure
is width-constrained until the viewport is wide enough to hit its fixed 720px
box — a flat 800px would pad the hero with dead space on narrower laptops.
Below ~1252px the figure scales with 46vw, so its foot lands at
116px + (1299/1402 × 1.2495 × 46vw); past that it caps out at ≈783px and 800
covers it. */
@media (min-width: 901px) {
.hero--product { min-height: min(calc(140px + 53.3vw), 800px); }
}
/* Cicero (the protocol page): the orator's open right hand reaches left out
of the frame toward the headline, so the shared left-edge fade would erase
the one part of the figure that matters. Fade only the outermost sliver,
and lift the figure so the hand lands on the "Prove it." line. */
.hero--cicero { padding-top: calc(var(--nav-h) + 104px); }
.hero-figure--cicero img { top: 40px; right: -16px;
-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.85) 8%, #000 22%);
mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.85) 8%, #000 22%); }
.hero-figure--cicero::before { top: 80px; right: 8%; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-meta { margin-top: 26px; font-family: var(--mono); font-size: 12.5px; color: var(--dim); letter-spacing: 0.02em; }
/* ---------- proof strip (under the hero) ---------- */
.proof { padding: 0; margin-top: -16px; }
/* Cells stretch so the two numbers start on the same line whatever their
captions wrap to (the "and growing" pill makes one caption a line longer);
only the claim is centred against them. */
.proof-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof-claim { align-self: center; margin: 0; padding: 28px 36px 28px 0; font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); max-width: 22ch; }
.proof-stat { padding: 26px 32px; border-left: 1px solid var(--line); }
.proof-stat b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(44px, 4.6vw, 60px); line-height: 1; letter-spacing: -0.035em; color: var(--text); font-variant-numeric: tabular-nums; }
.proof-stat b i { font-style: normal; color: var(--accent); }
.proof-stat span { display: block; margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 28ch; }
.proof-grow { display: inline-flex; align-items: center; gap: 3px; vertical-align: 1px; margin-left: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-bg); font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); white-space: nowrap; }
.proof-grow svg { width: 11px; height: 11px; }
@media (max-width: 900px) {
.proof { margin-top: -8px; }
.proof-row { grid-template-columns: 1fr 1fr; }
.proof-claim { grid-column: 1 / -1; padding: 20px 0; font-size: 20px; max-width: none; border-bottom: 1px solid var(--line); }
.proof-stat { padding: 20px 0 20px 20px; }
.proof-stat:first-of-type { padding-left: 0; border-left: 0; }
.proof-stat b { font-size: 40px; }
}
/* ---------- generic grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* ---------- cards ---------- */
.card { border: 1px solid var(--line); border-radius: 16px; background: var(--panel-2); padding: 26px; transition: border-color .2s, transform .2s; }
.card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.card .ic { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-bg); border: 1px solid var(--accent-line); display: grid; place-items: center; margin-bottom: 16px; }
.card .ic svg { width: 21px; height: 21px; stroke: var(--accent-2); }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 14.5px; line-height: 1.55; }
/* ---------- product cards (statues) ---------- */
.prod { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, rgba(var(--ink),0.05), rgba(var(--ink),0.02)); padding: 26px 26px 24px; overflow: hidden; transition: border-color .2s, transform .2s; }
.prod:hover { border-color: var(--accent-line); transform: translateY(-4px); }
.prod.available { border-color: var(--accent-line); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.10) inset; }
.prod .statue { height: 132px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 18px; }
.prod .statue img { height: 100%; width: auto; filter: var(--statue-shadow-sm); }
.prod .prow { display: flex; align-items: center; gap: 10px; }
.prod h3 { font-size: 23px; }
.prod .pill { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--dim); }
.prod .pill.now { color: var(--accent-2); border-color: var(--accent-line); background: var(--accent-bg); }
.prod .role { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin: 12px 0 8px; }
.prod p { font-size: 14px; line-height: 1.56; flex: 1; }
.prod .go { margin-top: 18px; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--accent-2); }
.prod .go svg { width: 15px; height: 15px; transition: transform .15s; }
.prod:hover .go svg { transform: translateX(3px); }
/* ---------- screenshot window ---------- */
.win { border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; background: var(--bg-2); box-shadow: var(--shadow-lg); }
.win .bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(var(--ink),0.03); border-bottom: 1px solid var(--line); }
.win .bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(var(--ink),0.18); }
.win .bar .u { margin-left: 10px; font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: 0.03em; }
.win img { display: block; width: 100%; }
.shot { border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); }
.shot img { display: block; width: 100%; }
.cap { font-size: 12.5px; color: var(--dim); margin-top: 12px; line-height: 1.5; }
.cap b { color: var(--text); font-weight: 600; }
/* ---------- animated verifier factory (orpheus §03) ---------- */
.vf { border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden;
background: var(--panel-grad); box-shadow: var(--shadow-lg); }
.vf-bar { display: flex; align-items: center; gap: 6px; padding: 11px 15px; background: rgba(var(--ink),0.03); border-bottom: 1px solid var(--line); }
.vf-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(var(--ink),0.18); }
.vf-u { margin-left: 10px; font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: 0.03em; }
.vf-body { padding: 22px 22px 24px; min-height: 306px; }
.vf-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.vf-field { min-height: 80px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(0,0,0,0.35);
padding: 15px 16px; font-size: 16px; line-height: 1.55; color: var(--text); }
.vf-caret { display: none; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.16em; background: var(--accent-2); animation: vf-blink 1s step-end infinite; }
@keyframes vf-blink { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }
.vf[data-state="typing"] .vf-caret { display: inline-block; }
.vf-btn { margin-top: 16px; display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-weight: 600; font-size: 14px;
color: var(--btn-text); border: 1px solid transparent; border-radius: 10px; padding: 11px 18px; cursor: default;
background: var(--btn-bg); box-shadow: 0 12px 28px -18px rgba(0,0,0,calc(0.9 * var(--shadow-k)));
transition: box-shadow .2s, filter .2s; }
.vf-btn svg { width: 16px; height: 16px; }
.vf-btn-a { display: inline-flex; align-items: center; gap: 8px; }
.vf-btn-b { display: none; align-items: center; gap: 9px; }
.vf-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--btn-text) 25%, transparent); border-top-color: var(--btn-text); animation: vf-spin .7s linear infinite; }
@keyframes vf-spin { to { transform: rotate(360deg) } }
.vf[data-state="generating"] .vf-btn { box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.28), 0 12px 28px -18px rgba(0,0,0,calc(0.9 * var(--shadow-k))); }
.vf[data-state="generating"] .vf-btn-a { display: none; }
.vf[data-state="generating"] .vf-btn-b { display: inline-flex; }
.vf-out { margin-top: 20px; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.vf[data-state="done"] .vf-out { opacity: 1; transform: translateY(0); }
.vf-out-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vf-ok { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--green-rgb),0.14); border: 1px solid rgba(var(--green-rgb),0.42); }
.vf-ok svg { width: 15px; height: 15px; stroke: var(--green); }
.vf-name { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--text); }
.vf-mode { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--amber);
border: 1px solid rgba(var(--amber-rgb),0.35); background: rgba(var(--amber-rgb),0.10); border-radius: 999px; padding: 4px 11px; }
.vf-mode i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px rgba(var(--amber-rgb),0.16); }
.vf-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.vf-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.07em; color: var(--accent-3);
border: 1px solid var(--accent-line); background: var(--accent-bg); border-radius: 7px; padding: 5px 9px; }
.vf-tag-x { color: var(--accent-2); border-color: rgba(var(--accent-rgb),0.5); }
/* ---------- live event stream (orpheus §04) ---------- */
.ev { border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: var(--panel-grad); box-shadow: var(--shadow-lg); }
.ev-bar { display: flex; align-items: center; gap: 6px; padding: 11px 15px; background: rgba(var(--ink),0.03); border-bottom: 1px solid var(--line); }
.ev-bar > i { width: 9px; height: 9px; border-radius: 50%; background: rgba(var(--ink),0.18); }
.ev-u { margin-left: 10px; font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: 0.03em; }
.ev-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--green); }
.ev-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: ev-pulse 1.6s ease-out infinite; }
@keyframes ev-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--green-rgb),0.5) } 100% { box-shadow: 0 0 0 8px rgba(var(--green-rgb),0) } }
.ev-list { height: 300px; overflow: hidden; padding: 4px 0;
-webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }
.ev-row { display: flex; align-items: center; gap: 13px; padding: 11px 17px; border-bottom: 1px solid rgba(var(--ink),0.04); font-family: var(--mono); font-size: 13px; }
.ev-row.ev-in { animation: ev-enter .5s ease both; }
@keyframes ev-enter { 0% { opacity: 0; transform: translateY(-10px); background: rgba(var(--accent-rgb),0.14); } 100% { opacity: 1; transform: translateY(0); background: transparent; } }
.ev-src { color: var(--dim); font-size: 11px; min-width: 52px; flex: 0 0 auto; }
.ev-act { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.ev-v { flex: 0 0 auto; font-size: 10px; letter-spacing: 0.07em; padding: 3px 9px; border-radius: 6px; border: 1px solid; }
.ev-v.allowed { color: var(--green); border-color: rgba(var(--green-rgb),0.4); background: rgba(var(--green-rgb),0.10); }
.ev-v.blocked { color: var(--red); border-color: rgba(var(--red-rgb),0.4); background: rgba(var(--red-rgb),0.10); }
.ev-v.flagged { color: var(--amber); border-color: rgba(var(--amber-rgb),0.4); background: rgba(var(--amber-rgb),0.10); }
/* ---------- AI Discovery inventory (orpheus §05) ---------- */
.disc-row { display: grid; grid-template-columns: minmax(0, 1fr) 88px 116px; align-items: center; gap: 14px; padding: 13px 17px; border-bottom: 1px solid rgba(var(--ink),0.04); font-family: var(--mono); font-size: 13px; }
.disc-row:last-child { border-bottom: 0; }
.disc-tool { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disc-kind { color: var(--dim); }
.disc-n { color: var(--dim); font-size: 11px; text-align: right; }
.disc-row .ev-v { justify-self: end; }
@media (max-width: 560px) {
.disc-row { grid-template-columns: minmax(0, 1fr) 76px 104px; gap: 10px; padding: 12px 14px; }
.disc-kind { display: none; }
}
/* live-framed product windows (orpheus §04 dashboards) */
.win .bar .win-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--green); }
.win .bar .win-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: ev-pulse 1.6s ease-out infinite; }
.win-media { position: relative; overflow: hidden; }
.win-media img { display: block; width: 100%; }
.win.live .win-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(115deg, transparent 42%, rgba(var(--accent-rgb),0.10) 50%, transparent 58%);
transform: translateX(-120%); animation: win-sheen 7.5s ease-in-out infinite; }
@keyframes win-sheen { 0%, 60% { transform: translateX(-120%); } 80%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
.win.live .win-media::after { animation: none; opacity: 0; }
.win .bar .win-live i, .ev-live i { animation: none; }
}
/* ---------- split rows (text + visual) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.split.rev .split-visual { order: -1; }
.split-text h2 { margin-bottom: 16px; }
.vlist { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.vlist > div { position: relative; padding-left: 22px; font-size: 15px; color: var(--muted); line-height: 1.5; }
.vlist > div::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--accent); }
.vlist b { color: var(--text); font-weight: 600; }
/* ---------- numbered flow (demo steps) ---------- */
.step { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.step .num { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--accent); border: 1px solid var(--accent-line); background: var(--accent-bg); border-radius: 9px; padding: 8px 11px; }
.step .stitle { font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.02em; }
.step .sline { flex: 1; height: 1px; background: var(--line); }
.step .stag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
/* ---------- band / callout ---------- */
.band { border: 1px solid var(--accent-line); background: var(--accent-bg); border-radius: 16px; padding: 22px 26px; display: flex; align-items: center; gap: 16px; }
.band svg { flex: 0 0 auto; width: 26px; height: 26px; stroke: var(--accent-2); }
.band .bt { font-size: 16px; line-height: 1.5; color: var(--text); font-weight: 500; }
.band .bt b { color: var(--accent-2); font-weight: 700; }
/* ---------- Perseus & Medusa (perseus page) ----------
A brand beat rather than a feature block, so it gets its own ambience: a
cool aura behind the marble echoing the shield. The threat list uses the
standard .vlist — the statue carries the myth, the copy stays literal. */
.medusa { position: relative; overflow: hidden; }
.medusa .split { align-items: center; gap: 40px; }
.medusa-figure { position: relative; display: flex; align-items: center; justify-content: center; }
/* Aura sized to the shield and centred on it, so the glow reads as light
coming off the marble rather than a rectangle behind it. */
.medusa-figure::before {
content: ""; position: absolute; z-index: 0;
left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 400px; height: 400px; max-width: 105%; aspect-ratio: 1;
background: radial-gradient(circle, rgba(var(--accent-rgb),0.24), rgba(var(--accent-rgb),0.06) 46%, transparent 70%);
filter: blur(8px);
}
.medusa-figure img {
position: relative; z-index: 1;
width: 330px; max-width: 100%; height: auto;
filter: drop-shadow(0 22px 42px rgba(0,0,0,calc(0.55 * var(--shadow-k))));
}
@media (max-width: 900px) {
.medusa .split { gap: 24px; }
.medusa-figure { order: -1; }
.medusa-figure img { width: 260px; }
.medusa-figure::before { width: 300px; height: 300px; }
}
/* ---------- The Cicero protocol (/cicero) ----------
A principles page, not a product page: no screenshots. The hero statue
(see .hero-figure--cicero), the incident cards and the numbered tenets
carry it. */
.incidents { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; }
.incident { position: relative; border: 1px solid rgba(var(--red-rgb),0.26); background: linear-gradient(180deg, rgba(var(--red-rgb),0.06), rgba(var(--ink),0.03)); border-radius: 16px; padding: 26px 26px 24px; }
.incident .when { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); }
.incident .when i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(var(--red-rgb),0.18); }
.incident h3 { margin: 14px 0 10px; font-size: 21px; }
.incident p { font-size: 14.5px; line-height: 1.6; }
.incident p b { color: var(--text); font-weight: 600; }
.incident .fail { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(var(--red-rgb),0.18); font-size: 14px; color: var(--text); line-height: 1.55; }
.incident .fail b { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); font-weight: 600; margin-bottom: 6px; }
.incident .src { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12.5px; color: var(--dim); }
.incident .src:hover { color: var(--accent-2); }
.incident .src svg { width: 12px; height: 12px; }
.tenet.wide { grid-column: 1 / -1; border-color: var(--accent-line); background: linear-gradient(180deg, rgba(var(--accent-rgb),0.12), rgba(var(--ink),0.03)); display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; align-items: start; }
.tenet.wide h3 { font-size: 30px; }
.tenet.wide .ask { margin-top: 0; padding: 18px 20px; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--panel); font-size: 14.5px; color: var(--muted); }
.tenet.wide .ask b { font-size: 11px; margin-bottom: 8px; }
.tenet.wide > div:last-child { display: flex; align-items: flex-end; height: 100%; }
.prod.stealth { justify-content: center; border-style: dashed; border-color: var(--line-2); background: rgba(var(--ink),0.015); }
.prod.stealth:hover { transform: none; border-color: var(--line-2); }
.prod.stealth .role { margin-top: 0; }
.prod.stealth h3 { color: var(--dim); font-size: 21px; letter-spacing: -0.015em; }
.quote-intro { margin-top: 40px; max-width: 62ch; font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.quote-intro b { color: var(--text); font-weight: 600; }
.quote { border-left: 2px solid var(--accent); padding: 6px 0 6px 26px; margin: 34px 0 0; }
.quote-intro + .quote { margin-top: 18px; }
.quote p { font-family: var(--display); font-size: clamp(21px, 2.4vw, 27px); line-height: 1.3; letter-spacing: -0.02em; color: var(--text); font-weight: 500; max-width: 34ch; }
.quote cite { display: block; margin-top: 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); font-style: normal; }
.tenets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.tenet { position: relative; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-2); padding: 26px 26px 24px; transition: border-color .2s, transform .2s; }
.tenet:hover { border-color: var(--line-2); transform: translateY(-3px); }
.tenet .tn { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; color: var(--accent); font-weight: 600; }
.tenet h3 { margin: 14px 0 10px; font-size: 23px; line-height: 1.12; letter-spacing: -0.025em; }
.tenet p { font-size: 14.5px; line-height: 1.58; }
.tenet .ask { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); line-height: 1.5; }
.tenet .ask b { color: var(--accent-3); font-weight: 600; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-bottom: 5px; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 44px; border: 1px solid var(--line-2); border-radius: 18px; overflow: hidden; background: var(--panel-grad); }
.pillar { padding: 28px 28px 26px; border-right: 1px solid var(--line); }
.pillar:last-child { border-right: none; }
.pillar .pk { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.pillar h3 { font-size: 26px; margin: 10px 0 10px; }
.pillar p { font-size: 14.5px; line-height: 1.58; }
.pillar .ic { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-bg); border: 1px solid var(--accent-line); display: grid; place-items: center; margin-bottom: 18px; }
.pillar .ic svg { width: 21px; height: 21px; stroke: var(--accent-2); }
@media (max-width: 900px) {
.tenets, .pillars, .incidents, .tenet.wide { grid-template-columns: 1fr; }
.tenet.wide > div:last-child { height: auto; }
.pillar { border-right: none; border-bottom: 1px solid var(--line); }
.pillar:last-child { border-bottom: none; }
}
/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.chip { font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; color: var(--accent-2); border: 1px solid var(--accent-line); background: var(--accent-bg); border-radius: 999px; padding: 8px 13px; }
/* ---------- flow diagram (endpoint) ---------- */
.flow { border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel-2); padding: 20px; }
.fnode { border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px; background: rgba(var(--ink),0.02); }
.fnode.acc { border-color: var(--accent-line); background: var(--accent-bg); }
.fnode .fio { font-family: var(--display); font-weight: 700; font-size: 15px; }
.fnode .fm { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.fconn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.fconn svg { width: 13px; height: 13px; stroke: var(--accent); }
.fsplit { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 11px; }
.fpill { border-radius: 10px; padding: 11px; font-size: 13px; font-weight: 600; text-align: center; border: 1px solid; display: flex; align-items: center; justify-content: center; gap: 7px; }
.fpill svg { width: 14px; height: 14px; }
.fpill.ok { color: var(--green); border-color: rgba(var(--green-rgb),0.30); background: rgba(var(--green-rgb),0.07); }
.fpill.block { color: var(--red); border-color: rgba(var(--red-rgb),0.30); background: rgba(var(--red-rgb),0.07); }
/* ---------- big CTA ---------- */
/* A raised dark panel with a gold wash in one corner, not a coloured block:
the light primary button is the loudest thing in it. */
.cta-band { border-radius: 22px; padding: 46px 44px; border: 1px solid var(--accent-line);
background: radial-gradient(640px 320px at 0% 0%, rgba(var(--accent-rgb),0.18), transparent 65%), var(--panel-grad);
box-shadow: 0 30px 80px -40px rgba(0,0,0,calc(0.9 * var(--shadow-k))); display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-band h2 { color: var(--text); }
.cta-band p { color: var(--muted); margin-top: 8px; font-size: 15px; }
.cta-band .btn-primary { background: var(--btn-bg); color: var(--btn-text); box-shadow: 0 12px 30px -16px rgba(0,0,0,calc(0.8 * var(--shadow-k))); }
.cta-band .btn-ghost { color: var(--text); border-color: var(--line-2); background: rgba(var(--ink),0.03); }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 46px 0 40px; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.7fr) auto auto auto auto; gap: 44px; align-items: start; }
.footer-brand { max-width: 340px; }
.footer .brand .bn { font-size: 17px; }
.footer-col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; font-weight: 600; }
.footer-col a { display: block; font-size: 14px; color: var(--muted); margin-bottom: 9px; transition: color .15s; }
.footer-col a:hover { color: var(--text); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--dim); flex-wrap: wrap; }
.footer-bottom .mono { letter-spacing: 0.06em; }
.footer-legal { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-legal a { color: var(--dim); transition: color .15s; }
.footer-legal a:hover { color: var(--text); }
.footer-made { white-space: nowrap; }
.footer-made [role="img"] { font-size: 14px; vertical-align: -1px; margin-left: 2px; }
/* trust row: SOC 2 cert + social icons (transparent) */
.footer-trust { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; flex-wrap: wrap; }
.footer-cert { display: inline-flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; }
a.footer-cert:hover .footer-cert-txt b { color: var(--text); }
.footer-cert img { height: 62px; width: auto; display: block; }
.footer-cert-txt { display: flex; flex-direction: column; line-height: 1.35; }
.footer-cert-txt b { font-size: 13px; color: var(--muted); font-weight: 600; }
.footer-cert-txt span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.footer-social { display: inline-flex; align-items: center; gap: 10px; }
.footer-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line-2); color: var(--muted); background: transparent; transition: color .15s, border-color .15s, transform .15s, background .15s; }
.footer-social a:hover { color: var(--text); border-color: var(--accent-line); background: var(--accent-bg); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }
/* ---------- misc ---------- */
.center { text-align: center; margin-left: auto; margin-right: auto; }
.center.sec-head { max-width: 760px; }
.stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 10px; }
.stat .v { font-family: var(--display); font-weight: 700; font-size: clamp(30px,4vw,42px); color: var(--accent-2); letter-spacing: -0.02em; }
.stat .k { font-size: 13px; color: var(--muted); margin-top: 6px; }
.threats { border: 1px solid rgba(var(--red-rgb),0.28); background: rgba(var(--red-rgb),0.05); border-radius: 16px; padding: 22px 26px; }
.threats .th { display: flex; align-items: center; gap: 9px; color: var(--red); font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.threats ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; }
.threats li { position: relative; padding-left: 18px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.threats li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.threats li b { color: var(--red-text); font-weight: 600; }
/* ---------- nav dropdowns ---------- */
.nav-item { position: relative; }
.nav-item > .nav-top { display: inline-flex; align-items: center; gap: 5px; }
.nav-top .caret { opacity: 0.65; transition: transform .15s; }
.nav-item:hover .nav-top .caret { transform: rotate(180deg); }
.dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); padding-top: 12px; opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease; }
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dd-panel { min-width: 272px; background: rgba(var(--paper-2),0.97); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--line-2); border-radius: 14px; padding: 8px; box-shadow: 0 24px 60px -24px rgba(0,0,0,calc(0.85 * var(--shadow-k))); }
.dd-panel a { display: block; padding: 11px 12px; border-radius: 9px; transition: background .12s; }
.dd-panel a:hover { background: var(--accent-bg); }
.dd-panel .d-title { display: block; font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--text); }
.dd-panel .d-sub { display: block; font-size: 12px; color: var(--dim); margin-top: 2px; }
.nav-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px solid var(--accent-line); border-radius: 999px; background: var(--accent-bg); font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2); vertical-align: 2px; }
/* ---------- mobile nav ---------- */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(var(--ink),0.03); color: var(--text); cursor: pointer; flex: 0 0 auto; }
.nav-toggle .ic-close { display: none; }
.nav.open .nav-toggle .ic-open { display: none; }
.nav.open .nav-toggle .ic-close { display: block; }
/* Light/dark switch (shared/_theme_toggle). Shows the mode you would switch
to, as Cassandra's does. .nav-phone holds the phone copy next to the menu
button and is hidden on desktop, where the copy in .nav-right shows. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(var(--ink),0.03); color: var(--muted); cursor: pointer; flex: 0 0 auto; transition: color .15s, border-color .15s, background .15s; }
.theme-toggle:hover { color: var(--text); border-color: var(--accent-line); background: var(--accent-bg); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .ic-moon { display: none; }
html[data-theme="light"] .theme-toggle .ic-sun { display: none; }
html[data-theme="light"] .theme-toggle .ic-moon { display: block; }
.nav-phone { display: none; align-items: center; gap: 8px; justify-self: end; }
.nav-phone .theme-toggle { width: 42px; height: 42px; }
/* The emblem is a white glyph on alpha (site/emblem_white.png); inverting it
is the black one, so the light theme needs no second file. The SOC 2 badge
is the same kind of artwork (light grey on alpha, drawn for the dark
footer): un-inverted it washes out on the light page, inverted it is the
dark badge Cassandra's footer already shows (cassandra.css). */
html[data-theme="light"] :is(.brand img, .footer-brand img, .footer-cert img) { filter: invert(1); }
.mobile-menu { display: none; }
/* ---------- contact form ---------- */
.form-wrap { max-width: 640px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.field .req { color: var(--accent-2); }
.field input, .field select, .field textarea { width: 100%; font-family: var(--sans); font-size: 15px; color: var(--text); background: rgba(var(--ink),0.03); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; transition: border-color .15s, background .15s; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: rgba(var(--accent-rgb),0.05); }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
html[data-theme="light"] .field select { background-image: url("data:image/svg+xml;utf8,"); }
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-turnstile { margin: 0 0 18px; min-height: 65px; }
.form-errors { border: 1px solid rgba(var(--red-rgb),0.30); background: rgba(var(--red-rgb),0.06); color: var(--red-text); border-radius: 12px; padding: 13px 16px; font-size: 13.5px; margin-bottom: 22px; }
.form-errors ul { margin: 6px 0 0 18px; }
/* Focused programmatically by form_errors_controller.js, so the ring would be
noise — the red panel is already the loudest thing on screen. A real keyboard
focus still gets one. */
.form-errors:focus { outline: none; }
.form-errors:focus-visible { outline: 2px solid rgba(var(--red-rgb),0.55); outline-offset: 3px; }
.thanks { text-align: center; max-width: 560px; margin: 0 auto; }
.thanks h1, .thanks .lead { margin-left: auto; margin-right: auto; }
.thanks .tick { width: 66px; height: 66px; border-radius: 50%; background: var(--accent-bg); border: 1px solid var(--accent-line); display: grid; place-items: center; margin: 0 auto 24px; }
.thanks .tick svg { width: 32px; height: 32px; stroke: var(--accent-2); }
/* ---------- blog / news index ---------- */
.post-list { display: flex; flex-direction: column; gap: 18px; max-width: 900px; }
.post-card { display: block; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-2); padding: 28px 30px; transition: border-color .2s, transform .2s, background .2s; }
.post-card:hover { border-color: var(--accent-line); transform: translateY(-3px); background: var(--panel); }
.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--dim); }
.post-meta .chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.post-meta .chip svg { width: 11px; height: 11px; }
.post-cat { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.post-dot { color: var(--dim); }
.post-meta time { color: var(--dim); }
.post-source { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); }
.post-card .post-title { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); margin: 14px 0 10px; transition: color .15s; }
.post-card:hover .post-title { color: var(--accent-3); }
.post-excerpt { color: var(--muted); font-size: 15px; line-height: 1.6; margin-bottom: 16px; max-width: 70ch; }
.post-more { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--accent-2); }
.post-more svg { width: 15px; height: 15px; transition: transform .15s; }
.post-card:hover .post-more svg { transform: translateX(3px); }
/* ---------- blog / article ---------- */
.post-hero { border-bottom: 1px solid var(--line); padding-bottom: 44px; overflow: visible; }
.post-head { max-width: 768px; margin: 0 auto; }
.post-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--muted); transition: color .15s; }
.post-back:hover { color: var(--text); }
.post-back svg { width: 15px; height: 15px; }
.post-h1 { font-size: clamp(30px, 4.6vw, 48px); line-height: 1.08; max-width: 20ch; }
.post-lead { max-width: 62ch; margin-top: 20px; }
.article { max-width: 768px; margin-left: auto; margin-right: auto; }
.article > p { color: var(--muted); font-size: 17px; line-height: 1.78; margin-bottom: 22px; }
.article strong { color: var(--text); font-weight: 600; }
.article h2 { font-size: clamp(24px, 3vw, 30px); margin: 48px 0 18px; scroll-margin-top: calc(var(--nav-h) + 28px); }
.article h3 { font-size: 19px; margin: 30px 0 12px; }
.article p a, .article li a, .article blockquote a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color .15s; }
.article p a:hover, .article li a:hover, .article blockquote a:hover { color: var(--accent-3); }
.article a.btn { text-decoration: none; }
.article a.btn-primary, .article a.btn-primary:hover { color: var(--btn-text); }
.article a.btn-ghost, .article a.btn-ghost:hover { color: var(--text); }
.article ul { list-style: none; margin: 0 0 24px; display: flex; flex-direction: column; gap: 12px; }
.article li { position: relative; padding-left: 22px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.article li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--accent); }
.article blockquote { margin: 32px 0; padding: 6px 0 6px 24px; border-left: 3px solid var(--accent); }
.article blockquote p { font-family: var(--display); font-weight: 500; font-size: clamp(18px, 2.2vw, 21px); line-height: 1.5; color: var(--text); margin-bottom: 14px; }
.article blockquote cite { font-style: normal; font-size: 14px; color: var(--accent-2); font-family: var(--mono); letter-spacing: 0.02em; }
.callout { border: 1px solid var(--accent-line); background: var(--accent-bg); border-radius: 16px; padding: 24px 28px; margin-bottom: 40px; }
.callout h3 { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-size: 16px; color: var(--accent-2); margin: 0 0 16px; }
.callout h3 svg { stroke: var(--accent-2); }
.callout ul { margin: 0; }
.callout li { color: var(--text); }
.callout li strong { color: var(--text); }
/* Legal pages: the notice at the top of the Terms / Privacy Policy and the
retention, CCPA and legal-basis tables. The notice is a .callout rather
than a numbered section so the h2 numbering stays contiguous. */
.callout.legal-notice p { color: var(--text); font-size: 15px; line-height: 1.65; margin: 0 0 12px; }
.callout.legal-notice p:last-child { margin-bottom: 0; }
.callout.legal-notice a, .article td a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.article .table-scroll { overflow-x: auto; margin: 0 0 28px; -webkit-overflow-scrolling: touch; }
.article table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.article table.table-wide { min-width: 560px; } /* three text columns: scroll on phones rather than squeeze */
.article th, .article td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--muted); }
.article th { color: var(--text); font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; border-bottom-color: var(--line-2); }
.article td:first-child { color: var(--text); }
.article code { font-family: var(--mono); font-size: 0.92em; color: var(--accent-2); }
.statgrid { margin: 34px 0; }
.numstat { text-align: center; padding: 22px 16px; }
.numstat .v { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3.4vw, 36px); color: var(--accent-2); letter-spacing: -0.02em; }
.numstat .k { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.4; }
.team-card { margin: 40px 0 0; }
.team-card h3 { margin: 0 0 20px; font-size: 17px; }
.team-card .grid-3 { gap: 22px; }
.member .m-name { font-family: var(--display); font-weight: 600; color: var(--text); font-size: 15.5px; }
.member .m-role { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--accent); margin-top: 4px; }
.member .m-note { font-size: 13px; color: var(--dim); margin-top: 6px; line-height: 1.45; }
.contact-card { margin: 24px 0 0; }
.contact-card h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.contact-card p { color: var(--muted); }
.post-share { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--line); }
.post-share-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.share-links { display: flex; align-items: center; gap: 16px; }
.share-links .sl { color: var(--muted); transition: color .15s, transform .15s; }
.share-links .sl:hover { color: var(--accent-2); transform: translateY(-1px); }
.view-all { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; color: var(--accent-2); }
.view-all svg { width: 15px; height: 15px; transition: transform .15s; }
.view-all:hover svg { transform: translateX(3px); }
/* ---------- tier comparison (Community · Pro · Enterprise) ---------- */
.tiers-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; -webkit-overflow-scrolling: touch; background: var(--panel-2); }
.tiers { width: 100%; border-collapse: collapse; min-width: 760px; }
.tiers th, .tiers td { padding: 15px 20px; text-align: left; vertical-align: middle; font-size: 14px; border-bottom: 1px solid var(--line); }
.tiers thead th { vertical-align: bottom; border-bottom: 1px solid var(--line-2); }
.tiers tfoot td { border-bottom: none; padding-top: 18px; padding-bottom: 20px; }
.tiers .feat { color: var(--muted); font-weight: 500; max-width: 380px; font-size: 15.5px; }
.tiers .tier-name { display: block; font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--text); }
.tiers .tier-tag { display: block; font-size: 14px; color: var(--dim); font-weight: 400; margin-top: 3px; }
.tiers .tier-badge,
.tiers-card-head .tier-badge { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-2); background: var(--accent-bg); border: 1px solid var(--accent-line); border-radius: 999px; padding: 3px 9px; margin-bottom: 8px; }
.tiers .yes { color: var(--green); font-weight: 700; }
.tiers .no { color: var(--dim); }
.tiers .val { color: var(--text); font-size: 15.5px; }
.tiers .c-pro { background: var(--accent-bg); }
.tiers thead .c-pro { background: rgba(var(--accent-rgb),0.15); }
.tiers tfoot .btn { width: 100%; justify-content: center; }
/* Mobile tabbed plan view — hidden on desktop, swapped in below 900px so the
comparison never falls back to a cramped horizontal scroll. */
.tiers-mobile { display: none; }
.tiers-tablist { display: none; gap: 6px; padding: 5px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; }
.tiers-mobile.is-enhanced .tiers-tablist { display: flex; }
.tiers-tab { flex: 1 1 0; min-width: 0; padding: 11px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-family: var(--display); font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.tiers-tab:hover { color: var(--text); }
.tiers-tab.is-active { background: var(--accent-bg); color: var(--accent-2); box-shadow: inset 0 0 0 1px var(--accent-line); }
.tiers-tab:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.tiers-panel { margin-top: 18px; }
.tiers-panel:focus { outline: none; }
.tiers-panel:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 4px; border-radius: 16px; }
.tiers-card { border: 1px solid var(--line); border-radius: 16px; background: var(--panel-2); padding: 22px 20px; }
.tiers-card.is-featured { border-color: var(--accent-line); background: var(--accent-bg); }
.tiers-card-head { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.tiers-card-head .tier-name { display: block; font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--text); }
.tiers-card-head .tier-tag { display: block; font-size: 14px; color: var(--dim); margin-top: 3px; }
.tiers-feats { list-style: none; margin: 0; padding: 0; }
.tiers-feat-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tiers-feat-row:last-child { border-bottom: 0; }
.tiers-feat-label { color: var(--muted); font-size: 15px; font-weight: 500; }
.tiers-feat-val { flex: 0 0 auto; text-align: right; }
.tiers-feat-val .yes { color: var(--green); font-weight: 700; }
.tiers-feat-val .no { color: var(--dim); }
.tiers-feat-val .val { color: var(--text); font-weight: 600; }
.tiers-card-cta { margin-top: 20px; }
.tiers-card-cta .btn { width: 100%; justify-content: center; }
/* In the mobile cards every plan gets one primary-looking CTA, so the ghost
button (Enterprise) matches the Pro primary button. */
.tiers-card-cta .btn.btn-ghost { color: var(--btn-text); border: 0; background: var(--btn-bg); box-shadow: var(--shadow-btn); }
.tiers-card-cta .btn.btn-ghost:hover { border-color: transparent; background: var(--btn-hover); }
/* ---------- responsive ---------- */
@media (max-width: 900px) {
.nav-inner { grid-template-columns: 1fr auto; }
.nav-links, .nav-right { display: none; }
.nav-phone { display: flex; }
.nav-toggle { display: inline-flex; }
.mobile-menu { display: flex; flex-direction: column; gap: 4px; position: fixed; left: 16px; right: 16px; top: 82px; z-index: 90; background: rgba(var(--paper-2),0.98); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--line-2); border-radius: 16px; padding: 12px; box-shadow: 0 30px 70px -20px rgba(0,0,0,calc(0.9 * var(--shadow-k))); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .2s, transform .2s; }
.nav.open .mobile-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu a { padding: 13px 14px; border-radius: 10px; font-size: 16px; color: var(--muted); }
.mobile-menu a:hover, .mobile-menu a:active { background: var(--accent-bg); color: var(--text); }
/* `.mobile-menu a` above outranks `.btn-primary`, so the label colour is
restated here or the light button ends up with grey text. */
.mobile-menu .btn { width: 100%; justify-content: center; margin-top: 8px; color: var(--btn-text); }
.mobile-menu .btn:hover, .mobile-menu .btn:active { color: var(--btn-text); background: var(--btn-hover); }
.grid-3, .grid-2, .grid-4, .split, .stat-row, .threats ul, .field-row { grid-template-columns: 1fr; }
.statgrid { grid-template-columns: 1fr 1fr; }
.hero-art { left: 0; width: 100%; max-width: none; opacity: 0.4; }
.hero-art img { object-position: 72% 20%;
-webkit-mask-image: linear-gradient(to bottom, #000 12%, rgba(0,0,0,0.4) 55%, transparent 88%);
mask-image: linear-gradient(to bottom, #000 12%, rgba(0,0,0,0.4) 55%, transparent 88%); }
.hero-figure { width: 66%; max-width: none; opacity: 0.26; }
.hero-figure::before { display: none; }
.hero-figure img { right: -10%; top: auto; bottom: 0; height: 90%;
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 58%);
mask-image: linear-gradient(to right, transparent 0%, #000 58%); }
/* Cicero falls back to the shared faded-backdrop treatment: no room for the
hand to meet the headline once the copy spans the full width. */
.hero--cicero { padding-top: calc(var(--nav-h) + 74px); }
.hero-figure--cicero img { right: -10%; top: auto;
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 58%);
mask-image: linear-gradient(to right, transparent 0%, #000 58%); }
.split { gap: 32px; }
.split.rev .split-visual { order: 0; }
.platform-visual { display: none; }
.tiers-wrap { display: none; }
.tiers-mobile { display: block; }
.section { padding: 64px 0; }
.footer-top { grid-template-columns: 1fr 1fr; gap: 30px 40px; }
.footer-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 560px) {
.brand .bt { display: none; }
.cta-band { padding: 32px 26px; }
.hero { padding-top: calc(var(--nav-h) + 40px); }
.hero-figure { opacity: 0.16; }
.step { flex-wrap: wrap; }
.step .sline, .step .stag { display: none; }
.cta-actions { width: 100%; }
.cta-actions .btn { flex: 1; justify-content: center; }
.footer-top { grid-template-columns: 1fr; gap: 26px; }
}
/* ============================================================
Event pages (EventsController · /events/:slug)
Appended after the global responsive block on purpose: the
event layouts need their own breakpoints to win over the
generic .split / .grid-3 stacking rules above.
============================================================ */
/* The fixed nav would otherwise sit on top of an anchored section when a
"Request your spot" link jumps to #rsvp. */
.event-hero [id], section[id] { scroll-margin-top: calc(var(--nav-h) + 28px); }
/* ---------- event hero ---------- */
.event-hero { padding-bottom: 56px; }
/* The homepage caps h1 at 15ch for its two-word headline; event titles are
sentences and need the room. */
.event-hero h1 { max-width: 18ch; margin: 14px 0 20px; }
.event-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; }
.event-hero-copy { min-width: 0; }
/* The kicker is a long single line ("Invite only · Manhattan, New York City")
at 0.22em tracking, which becomes the grid column's min-content width and
pushes the layout wider than the viewport without this. */
.event-hero-copy .kicker { max-width: 100%; }
.event-hero-media { position: relative; min-width: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 40px 90px -40px rgba(0,0,0,calc(0.9 * var(--shadow-k))); }
/* ---------- hero banner (the invitation card) ---------- */
/* Composed in markup over a generated backdrop plate rather than shipped as one
flat image: the type stays crisp at any pixel density, it reflows on mobile,
and the date and venue are edited in EventsController::EVENTS alongside every
other fact on the page. The plate carries no text of its own. */
.event-banner { position: relative; display: flex; min-height: 520px; overflow: hidden; background: #0c0b09; }
/* The plate sits on its own layer so it can be filtered: it was painted with a
violet sky for the old brand, and the hue-rotate walks that to amber.
Anchoring it to the bottom keeps the skyline in frame at every crop, leaving
the empty sky for the date block. */
.event-banner::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: var(--banner-plate) center bottom / cover no-repeat;
filter: hue-rotate(140deg) saturate(0.55) brightness(0.95);
}
/* Over the plate: a warm glow where the date sits, and the vignette that keeps
the type legible against the skyline. */
.event-banner::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
linear-gradient(180deg, rgba(var(--paper),0.52) 0%, rgba(var(--paper),0.14) 32%, rgba(var(--paper),0.88) 100%),
radial-gradient(120% 78% at 50% 2%, rgba(var(--accent-rgb),0.22), transparent 62%);
}
.event-banner-inner { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 42px 36px 36px; }
.event-banner-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-2); }
.event-banner-date { display: flex; flex-direction: column; align-items: center; margin-top: 24px; }
.ebd-month { font-family: var(--mono); font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); }
.ebd-day { font-family: var(--display); font-weight: 800; font-size: clamp(64px, 8vw, 88px); line-height: 0.88; letter-spacing: -0.05em; color: var(--text); margin: 8px 0 10px; }
.ebd-year { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
/* `margin-top: auto` splits the card: date up in the open sky, the event
details down over the skyline. */
.event-banner-title { font-family: var(--display); font-weight: 700; font-size: clamp(23px, 2.4vw, 30px); letter-spacing: -0.03em; line-height: 1.14; color: var(--text); max-width: 16ch; margin-top: auto; padding-top: 40px; }
.event-banner-rule { width: 52px; height: 2px; margin: 18px 0 16px; background: linear-gradient(90deg, transparent, var(--accent-2), transparent); }
.event-banner-venue { display: flex; flex-direction: column; gap: 3px; }
.event-banner-venue b { font-size: 14px; font-weight: 600; color: var(--text); }
.event-banner-venue span { font-size: 12.5px; color: var(--dim); }
.event-banner-hosts { width: 100%; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(var(--ink),0.10); font-size: 12px; color: var(--muted); }
.event-banner-hosts b { font-weight: 600; color: var(--text); }
/* ---------- co-host lockup ---------- */
.cohost-lockup { display: inline-flex; align-items: center; gap: 12px; padding: 9px 16px; border: 1px solid var(--line-2); background: rgba(var(--ink),0.02); border-radius: 999px; }
.cohost-lockup .cohost-name { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--text); }
.cohost-lockup .cohost-x { font-size: 13px; color: var(--dim); }
.cohost-bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 34px; align-items: start; border: 1px solid var(--line); background: var(--panel-2); border-radius: 18px; padding: 28px 32px; }
.cohost-rule { width: 1px; align-self: stretch; background: var(--line); }
.cohost-blurb-name { display: block; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--accent-2); margin-bottom: 8px; }
.cohost-blurb p { font-size: 14.5px; line-height: 1.55; }
/* ---------- hero meta list ---------- */
.event-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 30px; }
.event-meta li { display: flex; align-items: flex-start; gap: 11px; }
.event-meta svg { flex: 0 0 auto; width: 19px; height: 19px; stroke: var(--accent-2); margin-top: 2px; }
.event-meta span { display: flex; flex-direction: column; line-height: 1.4; }
.event-meta b { font-size: 14.5px; font-weight: 600; color: var(--text); }
.event-meta em { font-style: normal; font-size: 12.5px; color: var(--dim); margin-top: 2px; }
/* ---------- who's in the room ---------- */
.room-card { border: 1px solid var(--accent-line); background: var(--accent-bg); border-radius: 20px; padding: 30px 30px 26px; position: sticky; top: calc(var(--nav-h) + 24px); }
/* Standing alone in its own section rather than beside a column of content, at
the same full wrap width as the RSVP panel below it. The stats turn into a
row and the intro copy is capped, since 1000px of prose is unreadable. */
.room-card.is-solo { position: static; padding: 36px 40px 32px; }
/* The intro paragraph only — `> p` would also catch the .cap below the button
and stop it centring. */
.room-card.is-solo > h2 + p { max-width: 62ch; }
.room-card.is-solo .room-stats { flex-direction: row; gap: 28px; margin: 28px 0; }
.room-card.is-solo .room-stats li { flex: 1 1 0; }
.room-card.is-solo > .btn { display: flex; width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; }
.room-card.is-solo > .cap { text-align: center; }
.room-card h2, .room-card h3 { font-size: 22px; margin: 14px 0 10px; }
.room-card > p { font-size: 14.5px; line-height: 1.55; }
.room-stats { list-style: none; margin: 22px 0; display: flex; flex-direction: column; gap: 14px; }
.room-stats li { display: flex; flex-direction: column; padding-left: 15px; border-left: 2px solid var(--accent-line); }
.room-stats b { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--text); }
.room-stats span { font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
/* ---------- venue ---------- */
.venue-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--panel-2); }
.venue-body { padding: 40px 42px; display: flex; flex-direction: column; justify-content: center; }
.venue-body h3 { font-size: 26px; margin: 14px 0 12px; }
.venue-body p { font-size: 15px; line-height: 1.6; }
.venue-note { margin-top: 14px; font-size: 13.5px; color: var(--dim); }
.venue-address { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-2); text-decoration: none; border-bottom: 1px solid var(--accent-line); }
.venue-address:hover { border-bottom-color: var(--accent-2); }
.venue-address svg { flex: 0 0 auto; width: 13px; height: 13px; }
/* ---------- venue carousel ---------- */
/* Base state is the no-JS fallback: a plain vertical stack of photos with the
controls hidden, which reads fine on its own. venue_carousel_controller.js
adds .is-enhanced to collapse it into a single-slide carousel, so a bundle
that fails to load degrades to the stack rather than to dead arrows. */
.venue-media { position: relative; min-width: 0; }
.carousel-slide { margin: 0; }
.carousel-slide img { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.carousel-arrow, .carousel-dots { display: none; }
.venue-media:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -3px; }
/* Slides are stacked and parked off to one side; the controller drives them in
and out with translateX, so the viewport has to clip. */
.venue-media.is-enhanced .carousel-viewport { position: relative; height: 100%; min-height: 440px; overflow: hidden; }
.venue-media.is-enhanced .carousel-slide {
position: absolute; inset: 0;
transform: translateX(100%);
transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
}
.venue-media.is-enhanced .carousel-slide img { height: 100%; min-height: 0; }
.venue-media.is-enhanced .carousel-arrow {
display: flex; align-items: center; justify-content: center;
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
border: 1px solid rgba(var(--ink),0.18); background: rgba(var(--paper),0.62);
backdrop-filter: blur(6px); color: #fff;
transition: background .16s, border-color .16s, color .16s;
}
.venue-media.is-enhanced .carousel-arrow:hover { background: var(--btn-bg); border-color: transparent; color: var(--btn-text); }
.carousel-arrow svg { width: 17px; height: 17px; }
.carousel-arrow.prev { left: 14px; }
.carousel-arrow.next { right: 14px; }
.venue-media.is-enhanced .carousel-dots {
display: flex; gap: 8px; z-index: 2;
position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
padding: 7px 11px; border-radius: 999px; background: rgba(var(--paper),0.58); backdrop-filter: blur(6px);
}
.carousel-dot { border: 0; background: none; padding: 4px; line-height: 0; cursor: pointer; border-radius: 50%; }
.carousel-dot span { display: block; width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--ink),0.32); transition: background .16s, transform .16s; }
.carousel-dot.is-active span { background: var(--accent-2); transform: scale(1.35); }
@media (prefers-reduced-motion: reduce) {
.venue-media.is-enhanced .carousel-slide { transition: none; }
.carousel-dot span { transition: none; }
}
/* ---------- RSVP panel ---------- */
/* Full wrap width, matching the venue card directly above it. */
.rsvp-panel { border: 1px solid var(--line-2); background: var(--panel); border-radius: 22px; padding: 44px 48px; box-shadow: 0 40px 100px -50px rgba(0,0,0,calc(0.9 * var(--shadow-k))); }
.rsvp-head { margin-bottom: 30px; }
.rsvp-head h2 { font-size: clamp(26px, 3.4vw, 36px); margin: 14px 0 12px; }
.rsvp-head .lead { max-width: 58ch; }
.rsvp-panel .field-hint { font-size: 12px; color: var(--dim); margin-top: 6px; line-height: 1.45; }
/* A submit bar the full width of the panel reads as a banner rather than a
button at this size, so cap and centre it. */
.rsvp-panel input[type="submit"] { display: block; width: 100%; max-width: 420px; margin: 6px auto 0; justify-content: center; text-align: center; }
.rsvp-panel .cap { text-align: center; }
/* Sets expectations before anyone fills the form in: this reserves a place, it
does not confirm one. */
.rsvp-review { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 28px; padding: 15px 18px; border: 1px solid var(--accent-line); background: var(--accent-bg); border-radius: 12px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.rsvp-review svg { flex: 0 0 auto; width: 18px; height: 18px; stroke: var(--accent-2); margin-top: 1px; }
.rsvp-review b { color: var(--text); font-weight: 600; }
/* Eight tools across a full-width panel: four to a row, dropping to two then
one as the panel narrows. */
.rsvp-panel .checkbox-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rsvp-panel .cap a, .cap a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
/* ---------- checkbox group ---------- */
.checkbox-field { border: 0; padding: 0; margin-bottom: 22px; }
.checkbox-field legend { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 7px; padding: 0; }
.checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.check { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-2); background: rgba(var(--ink),0.02); border-radius: 10px; padding: 11px 14px; transition: border-color .15s, background .15s; }
.check:hover { border-color: var(--accent-line); }
/* :has keeps the checked state on the whole tile; browsers without it still get
the native checkbox tick, so this is progressive enhancement only. */
.check:has(input:checked) { border-color: var(--accent-line); background: var(--accent-bg); }
.check:has(input:focus-visible) { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.check input[type="checkbox"] { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--accent-deep); cursor: pointer; margin: 0; }
.check label { font-size: 14px; font-weight: 500; color: var(--text); margin: 0; cursor: pointer; flex: 1; }
/* ---------- collapsible checkbox group ---------- */
/* Wide viewports show the grid as-is and never need the toggle; the dropdown
behaviour is switched on at the mobile breakpoint further down. */
.multiselect { position: relative; }
.multiselect-toggle { display: none; }
.multiselect-toggle svg { flex: 0 0 auto; width: 16px; height: 16px; stroke: var(--accent-2); transition: transform .18s; }
.multiselect.is-open .multiselect-toggle svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
.multiselect-toggle svg { transition: none; }
}
/* ---------- post-RSVP modal ---------- */
/* Opened from rsvp_modal_controller.js. The dialog element itself is only a
transparent frame; .rsvp-modal-inner is the visible card, which keeps the
entry animation off the element the browser is centring. */
/* `margin: auto` is what centres a modal dialog in the viewport, and the
universal reset at the top of this file zeroes it — so restore it here. */
.rsvp-modal { border: 0; padding: 0; margin: auto; background: transparent; color: var(--text); width: min(560px, calc(100vw - 32px)); max-width: none; }
.rsvp-modal::backdrop { background: rgba(var(--paper),0.78); backdrop-filter: blur(5px); }
/* Opaque: --panel is a translucent wash meant for page surfaces, and the
dialog floats over the blurred page. */
.rsvp-modal-inner { position: relative; border: 1px solid var(--line-2); background: var(--bg-2); border-radius: 22px; padding: 42px 40px 34px; box-shadow: var(--shadow-xl); }
.rsvp-modal-inner .thanks .lead { font-size: 15px; }
.rsvp-modal-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(var(--ink),0.02); color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s; }
.rsvp-modal-close:hover { color: var(--text); border-color: var(--accent-line); }
.rsvp-modal-close svg { width: 15px; height: 15px; }
.rsvp-modal-done { display: block; width: 100%; max-width: 220px; margin: 26px auto 0; justify-content: center; text-align: center; }
@keyframes rsvp-modal-in {
from { opacity: 0; transform: translateY(12px) scale(0.98); }
to { opacity: 1; transform: none; }
}
.rsvp-modal[open] .rsvp-modal-inner { animation: rsvp-modal-in .3s cubic-bezier(0.22, 0.61, 0.36, 1); }
@media (prefers-reduced-motion: reduce) {
.rsvp-modal[open] .rsvp-modal-inner { animation: none; }
}
/* ---------- event responsive ---------- */
@media (max-width: 1000px) {
.event-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 38px; }
.event-hero h1 { max-width: none; }
.event-banner { min-height: 460px; }
.event-banner-title { padding-top: 30px; }
.room-card { position: static; }
.room-card.is-solo { padding: 30px 28px 26px; }
.room-card.is-solo .room-stats { flex-direction: column; gap: 14px; }
.venue-card { grid-template-columns: 1fr; }
.carousel-slide img { min-height: 280px; }
.venue-media.is-enhanced .carousel-viewport { min-height: 340px; }
.venue-body { padding: 32px 30px; }
.rsvp-panel .checkbox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
/* ---------- mobile hero banner ----------
On a phone the tall portrait invite pushes the headline below the fold, so
the banner leads the hero instead and reflows into a compact horizontal
card: the date block sits in its own column beside the event details, at
roughly half the height. `order` only moves it visually; the hero copy
still comes first in the DOM and in the reading order. */
.event-hero-media { order: -1; }
.event-banner { min-height: 210px; }
.event-banner-inner {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
align-content: center;
column-gap: 16px;
text-align: left;
padding: 20px 18px;
}
/* Everything that only exists as decoration comes out, so the two columns
have room: the eyebrow, the divider rule, the weekday and the street
address (all still present in the hero meta list below). */
.event-banner-eyebrow,
.event-banner-rule,
.ebd-weekday,
.event-banner-venue span { display: none; }
.event-banner-date { grid-column: 1; grid-row: 1 / span 3; margin-top: 0; padding-right: 16px; border-right: 1px solid rgba(var(--ink),0.12); }
.ebd-day { font-size: 50px; margin: 4px 0 5px; }
.ebd-month { font-size: 10.5px; letter-spacing: 0.18em; }
.ebd-year { font-size: 10.5px; letter-spacing: 0.14em; }
.event-banner-title { grid-column: 2; grid-row: 1; align-self: end; max-width: none; margin-top: 0; padding-top: 0; font-size: 17px; }
.event-banner-venue { grid-column: 2; grid-row: 2; margin-top: 9px; }
.event-banner-venue b { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.event-banner-hosts { grid-column: 2; grid-row: 3; align-self: start; width: auto; margin-top: 11px; padding-top: 11px; font-size: 11px; }
.venue-media.is-enhanced .carousel-viewport { min-height: 260px; }
.carousel-arrow.prev { left: 10px; }
.carousel-arrow.next { right: 10px; }
.cohost-bar { grid-template-columns: 1fr; gap: 22px; padding: 24px; }
.cohost-rule { width: auto; height: 1px; align-self: auto; }
.checkbox-grid, .rsvp-panel .checkbox-grid { grid-template-columns: 1fr; }
/* ---------- mobile: checkbox group as a dropdown ----------
Only once multi_select_controller.js has connected — without it the panel
stays a plain visible list, which submits perfectly well. */
.multiselect.is-enhanced .multiselect-toggle {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
width: 100%; padding: 12px 14px; cursor: pointer; text-align: left;
border: 1px solid var(--line-2); border-radius: 10px; background: rgba(var(--ink),0.02);
font-family: inherit; font-size: 14px; color: var(--text);
}
.multiselect.is-enhanced.is-open .multiselect-toggle { border-color: var(--accent-line); }
.multiselect.is-enhanced .multiselect-toggle .is-placeholder { color: var(--dim); }
.multiselect.is-enhanced .multiselect-panel {
display: none; position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
max-height: 280px; overflow-y: auto; padding: 10px;
border: 1px solid var(--accent-line); border-radius: 12px;
/* Opaque on purpose: --panel is a translucent wash, which is right for a
page surface but lets the form show through a floating dropdown. */
background: var(--bg-2);
box-shadow: var(--shadow-xl);
}
.multiselect.is-enhanced.is-open .multiselect-panel { display: block; }
.rsvp-panel { padding: 30px 24px; border-radius: 18px; }
.event-meta { gap: 14px 24px; }
}
/* ---------- advisories (/advisories) ---------- */
.adv-hero { padding-bottom: 30px; }
.adv-hero h1 { font-size: clamp(34px, 4.6vw, 52px); margin: 16px 0 14px; max-width: none; }
.adv-hero .lead { max-width: 60ch; }
.adv-check { margin-top: 14px; font-size: 14.5px; color: var(--dim); }
.adv-check a { color: var(--accent-2); font-weight: 500; }
.adv-check a:hover { color: var(--accent-3); }
.adv-sub { margin-top: 28px; max-width: 500px; scroll-margin-top: calc(var(--nav-h) + 40px); }
.adv-sub-row { display: flex; gap: 6px; padding: 5px; border: 1px solid var(--line-2); border-radius: 13px; background: rgba(var(--ink),0.03); transition: border-color .15s, box-shadow .15s; }
.adv-sub-row:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-bg); }
.adv-sub input[type=email] { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; padding: 0 12px; }
.adv-sub input[type=email]::placeholder { color: var(--dim); }
.adv-turnstile { margin-top: 12px; }
.adv-accept { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.adv-accept input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.adv-accept a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.adv-accept a:hover { text-decoration-color: var(--accent); }
.adv-sub-note { margin-top: 11px; font-size: 13px; color: var(--dim); }
.adv-sub-note.is-ok { color: var(--green); }
.adv-sub-note.is-bad { color: var(--red); }
.adv-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.adv-sec { padding: 8px 0 96px; }
.adv-list { max-width: 960px; border-top: 1px solid var(--line); }
.adv { border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 24px); }
.adv summary { list-style: none; display: grid; grid-template-columns: 78px minmax(0, 1fr) auto 16px; align-items: center; gap: 18px; padding: 18px 2px; cursor: pointer; }
.adv summary::-webkit-details-marker { display: none; }
.adv summary:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; border-radius: 8px; }
.adv-sev { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.adv-sev::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.adv-sev.is-critical { color: var(--red); }
.adv-sev.is-high { color: var(--orange); }
.adv-title { display: block; font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; color: var(--text); transition: color .15s; }
.adv summary:hover .adv-title { color: var(--accent-3); }
.adv-meta { display: block; margin-top: 4px; font-size: 13px; color: var(--dim); }
.adv-ref { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.adv-date { font-family: var(--mono); font-size: 12px; color: var(--dim); white-space: nowrap; }
.adv-chev { width: 16px; height: 16px; color: var(--dim); transition: transform .2s; }
.adv[open] .adv-chev { transform: rotate(180deg); }
.adv-body { padding: 0 2px 26px 98px; max-width: 860px; }
.adv-summary { font-size: 15px; line-height: 1.65; color: var(--muted); }
.adv-updated { color: var(--text); }
.adv-rev { margin: 12px 0 0; padding: 10px 14px; border-left: 2px solid var(--accent-line); background: var(--accent-bg); border-radius: 0 8px 8px 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.adv-rev time { color: var(--text); font-weight: 600; }
.adv-facts { display: grid; gap: 9px; margin: 18px 0 0; }
.adv-facts > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.adv-facts dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.adv-facts dd { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--muted); }
.adv-facts code { font-family: var(--mono); font-size: 12px; color: var(--text); background: rgba(var(--ink),0.04); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; overflow-wrap: anywhere; }
.adv-facts .adv-chip { display: grid; gap: 3px; width: 100%; padding: 7px 10px 8px; }
.adv-chip-t { font-size: 11px; color: var(--dim); }
.adv-chip b { display: inline-block; min-width: 64px; font-weight: 500; color: var(--dim); }
.adv-h { margin: 22px 0 8px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: 0; color: var(--text); }
.adv-steps { display: grid; gap: 6px; padding-left: 18px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.adv-steps li::marker { color: var(--dim); font-family: var(--mono); font-size: 12px; }
.adv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 22px; }
.adv-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; color: var(--muted); transition: color .15s; }
.adv-link:hover { color: var(--text); }
.adv-link svg { width: 13px; height: 13px; }
.adv-foot { max-width: 960px; margin-top: 22px; font-size: 13.5px; color: var(--dim); }
.adv-foot a { color: var(--accent-2); }
.adv-foot a:hover { color: var(--accent-3); }
.adv-status { min-height: 62vh; }
.adv-status-cta { margin-top: 30px; }
@media (max-width: 720px) {
.adv-hero h1 { font-size: 34px; }
.adv summary { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "sev date" "head head"; gap: 8px 12px; padding: 16px 0; }
.adv-sev { grid-area: sev; }
.adv-date { grid-area: date; }
.adv-head { grid-area: head; }
.adv-chev { display: none; }
.adv-body { padding: 0 0 24px; }
.adv-facts > div { grid-template-columns: minmax(0, 1fr); gap: 5px; }
.adv-chip b { display: block; min-width: 0; }
.adv-actions .btn { width: 100%; justify-content: center; }
}
/* ---------- Cassandra on the home page ---------- */
.hero-note { display: flex; width: fit-content; align-items: center; gap: 10px; max-width: 100%; margin-bottom: 30px; padding: 4px 14px 4px 4px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(var(--ink),0.03); font-size: 13.5px; line-height: 1.35; color: var(--muted); transition: border-color .15s, background .15s, color .15s; }
.hero-note:hover { border-color: var(--accent-line); background: var(--accent-bg); color: var(--text); }
.hero-note b { color: var(--text); font-weight: 600; }
.hero-note-mark { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); background: var(--mark-bg); object-fit: cover; }
.hero-note-txt { padding-left: 10px; border-left: 1px solid var(--line-2); }
.hero-note-name { white-space: nowrap; }
.hero-note svg { width: 14px; height: 14px; flex: none; transition: transform .15s; }
.hero-note:hover svg { transform: translateX(2px); }
/* Launch-week home hero: the check itself. Copy and the email form on the
left, the terminal playing the command on the right, the numbers strip
under both. The terminal keeps its full height from the first paint (lines
are hidden, not removed), so nothing shifts while it plays. */
.hero--cassandra { padding: calc(var(--nav-h) + 44px) 0 0; }
.hero--cassandra .hero-note { margin-bottom: 26px; }
.hero--cassandra .hero-note b { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.hero--cassandra h1 { margin: 0 0 18px; max-width: 12ch; font-size: clamp(40px, 5.4vw, 66px); }
.hero--cassandra .lead { max-width: 50ch; font-size: clamp(16px, 1.45vw, 18px); }
.hero--cassandra .lead strong { color: var(--text); font-weight: 600; }
.cass-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 56px; align-items: center; }
.cass-hero-copy { position: relative; z-index: 2; }
.cass-form { margin-top: 30px; max-width: 520px; }
.cass-field { display: flex; gap: 10px; }
.cass-input { flex: 1; min-width: 0; height: 50px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font: 400 16px/1 var(--sans); outline: none; transition: border-color .15s, box-shadow .15s; }
.cass-input::placeholder { color: var(--dim); }
.cass-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }
.cass-submit { height: 50px; padding: 0 20px; border-radius: 12px; font-size: 15px; }
.cass-submit svg { transition: transform .15s; }
.cass-submit:hover svg { transform: translateX(2px); }
.cass-submit.is-busy { opacity: .55; cursor: default; transform: none; }
.cass-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* Consent by submitting (no box), and the phone framing: on a device with
no hover and a coarse pointer the command cannot run, so the button reads
"Send it to my laptop" and a line says what will happen. The form's script
sets the handoff field from the same media query. */
.cass-consent { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 520px; }
.cass-consent a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.cass-consent a:hover { text-decoration-color: currentColor; }
.cass-submit-phone, .cass-phone-note { display: none; }
@media (hover: none) and (pointer: coarse) {
.cass-submit-desk { display: none; }
.cass-submit-phone { display: inline; }
.cass-phone-note { display: block; margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 520px; }
}
/* Turnstile in interaction-only mode is 0px tall until Cloudflare needs a
click, so this margin is all the room it takes when it stays invisible. */
.cass-turnstile { margin-top: 12px; }
.cass-fine { margin-top: 18px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.01em; color: var(--dim); max-width: 520px; line-height: 1.7; }
.cass-fine a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.cass-fine a:hover { color: var(--text); text-decoration-color: currentColor; }
/* The example result card itself is cassandra/landing/_result, styled by
cassandra_result.css (shared with the Cassandra landing). Here: where it
sits, its glow, and its caption. */
.cass-hero-demo { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; }
.cass-hero-demo::before { content: ""; position: absolute; left: 50%; top: 50%; width: 120%; height: 120%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(var(--accent-rgb),0.15), transparent 70%); filter: blur(10px); pointer-events: none; }
.cass-hero-card { position: relative; width: 100%; max-width: 460px; }
/* Cassandra's statue behind the card's right edge, as on the Cassandra
landing (.cx-statue): sized from the card, faded at the base, clipped by
the hero where it runs past the page edge. */
.cass-hero-statue { position: absolute; z-index: 0; left: calc(100% - 128px); top: -36px; width: 62%; height: auto; opacity: .3; filter: grayscale(.3); pointer-events: none; user-select: none;
-webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 85%);
mask-image: linear-gradient(to bottom, #000 45%, transparent 85%); }
.cass-report-cap { position: relative; margin: 16px 0 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.cass-strip { display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; margin: 56px 0 0; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; color: var(--dim); }
.cass-strip b { color: var(--text); font-weight: 600; }
.cass-strip-team { margin-left: auto; font-family: var(--sans); font-size: 13px; letter-spacing: 0; color: var(--dim); white-space: nowrap; }
.cass-strip-team a { color: var(--accent-2); }
.cass-strip-team a:hover { color: var(--accent-3); }
@media (max-width: 1080px) {
.cass-hero { gap: 40px; }
}
@media (max-width: 900px) {
.hero--cassandra { padding-top: calc(var(--nav-h) + 40px); }
.cass-hero { grid-template-columns: 1fr; gap: 40px; }
.hero--cassandra h1 { max-width: 14ch; }
.cass-hero-demo::before { display: none; }
.cass-hero-statue { display: none; }
.cass-hero-card, .cass-report { max-width: 520px; }
.cass-strip { margin-top: 40px; }
.cass-strip-team { margin-left: 0; flex-basis: 100%; white-space: normal; }
}
@media (max-width: 560px) {
.cass-field { flex-direction: column; }
.cass-submit { justify-content: center; }
}
/* The platform message, one scroll under the Cassandra hero: hero-sized type
in a section, so it still reads as the company's headline. */
.platform-intro { padding: 72px 0 56px; }
.platform-intro .sec-head { max-width: 760px; }
.platform-intro h2 { font-size: clamp(34px, 4.8vw, 56px); letter-spacing: -0.03em; max-width: 15ch; }
.platform-intro .lead { max-width: 54ch; }
.cass-figure { position: relative; display: flex; justify-content: center; }
.cass-figure::before { content: ""; position: absolute; left: 50%; top: 50%; width: 440px; height: 440px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(var(--accent-rgb),0.22), rgba(var(--accent-rgb),0.05) 48%, transparent 72%); filter: blur(4px); pointer-events: none; }
.cass-figure img { position: relative; height: 440px; width: auto; filter: var(--statue-shadow); }
.cass-cta { margin-top: 28px; }
.cass-note { margin-top: 22px; font-size: 13.5px; color: var(--dim); }
.cass-note a { color: var(--accent-2); }
.cass-note a:hover { color: var(--accent-3); }
/* ---------- landing: backdrop plates ----------
Two big rounded panels on the home page share one treatment: the hero's
ember scene as a dimmed backdrop (same hue-rotate as .hero-art, so it is
one world), a border, and near-black cards floating over it. The
backdrop lives in its own clipped layer so content may hang past the
panel's edge (.ent-cards). */
.plate { position: relative; border-radius: 24px; border: 1px solid var(--line-2); isolation: isolate; }
.plate-bg { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; background: var(--bg); pointer-events: none; }
.plate-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9;
filter: hue-rotate(28deg) saturate(0.72) brightness(0.9); }
.plate-bg::after { content: ""; position: absolute; inset: 0; }
.plate > :not(.plate-bg) { position: relative; z-index: 1; }
/* the loop: the planet's rim glows in the upper left, under the ring */
.plate-bg--how img { object-position: 42% 38%; }
.plate-bg--how::after { background:
linear-gradient(90deg, rgba(var(--paper),0.55) 0%, rgba(var(--paper),0.30) 45%, rgba(var(--paper),0.55) 100%),
linear-gradient(180deg, rgba(var(--paper),0.25) 0%, rgba(var(--paper),0.55) 100%); }
/* the enterprise band: the planet rises behind the headline and the figure watches from the right,
under the pill and behind the hanging cards. Oversized + offset rather than object-position so the
figure (at ~75% of the image) lands near the plate's right edge. */
.plate-bg--ent img { position: absolute; max-width: none; width: 125%; height: auto; left: -7%; top: -59%; object-fit: fill; }
.plate-bg--ent::after { background:
linear-gradient(90deg, rgba(var(--paper),0.78) 0%, rgba(var(--paper),0.42) 50%, rgba(var(--paper),0.25) 100%),
linear-gradient(180deg, rgba(var(--paper),0.05) 0%, rgba(var(--paper),0.55) 100%); }
/* ---------- landing: how the layer works ---------- */
.how { display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); gap: 0 14px; align-items: stretch; padding: 30px 30px 30px 22px; }
/* The ring stretches to the height of the panel grid so the dashed connectors land on the three rows. */
.how-ring { position: relative; min-height: 0; }
.how-ring svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.rg-ring { stroke: rgba(var(--ink),0.22); stroke-width: 1.5; }
.rg-link { stroke: rgba(var(--accent-rgb),0.55); stroke-width: 1.5; stroke-dasharray: 3 6; stroke-linecap: round; animation: rg-dash 1.8s linear infinite; }
.rg-dot { fill: var(--text); }
.rg-dot.acc { fill: var(--accent); }
.rg-node rect { fill: var(--bg-2); stroke: var(--line-2); stroke-width: 1.2; }
.rg-node g { stroke: var(--text); stroke-width: 1.8; }
.rg-node.acc rect { fill: rgba(var(--accent-rgb),0.16); stroke: var(--accent-line); }
.rg-label { fill: var(--text); font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.rg-label.acc { fill: var(--accent-2); }
.rg-tag rect { fill: var(--accent-bg); stroke: var(--accent-line); }
.rg-tag text { fill: var(--accent-2); font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; }
@keyframes rg-dash { to { stroke-dashoffset: -18; } }
.how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hp { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 14px; padding: 15px 16px 14px; background: rgba(var(--paper),0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hp-t { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--text); }
.hp-s { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--dim); }
.hp-list { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; flex: 1 0 auto; } /* flex:1 pins a following .hp-cta to the panel bottom */
.hp-i { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.hp-i svg { width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--accent-2); }
.hp-i b { display: block; font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35; }
.hp-i span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.hp-i span .mono { display: inline; margin: 0; font-size: 11.5px; color: var(--accent-2); }
.hp-opts { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.hp-opt { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; border: 1px solid transparent; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.hp-opt i { flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--dim); }
.hp-opt.on { color: var(--text); border-color: var(--line-2); background: rgba(var(--ink),0.04); }
.hp-opt.on i { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.hp-rules { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.hp-rule { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.45; color: var(--text); }
.hp-rule i { flex: none; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--accent); padding-top: 1px; }
.hp-cta { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--accent-line); background: var(--accent-bg); color: var(--accent-2); font-size: 13px; font-weight: 600; transition: background .15s, border-color .15s; }
.hp-cta:hover { background: rgba(var(--accent-rgb),0.18); border-color: var(--accent); }
.hp-cta span { transition: transform .15s; }
.hp-cta:hover span { transform: translateX(2px); }
/* ---------- landing: enterprise band ----------
The cards hang past the panel's bottom edge by var(--ent-hang); the
section pays for that in its bottom padding. */
.ent-sec { --ent-hang: 72px; padding-bottom: calc(64px + var(--ent-hang)); }
.ent { padding: 52px 52px 0; }
.ent-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; }
.ent-head h2 { max-width: 16ch; }
.ent-head .lead { margin-top: 14px; max-width: 58ch; }
.ent-link { flex: none; display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(var(--paper),0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; transition: border-color .15s, background .15s; }
.ent-link svg { width: 14px; height: 14px; transition: transform .15s; }
.ent-link:hover { border-color: var(--accent-line); background: rgba(var(--paper),0.75); }
.ent-link:hover svg { transform: translateX(2px); }
.ent-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 46px; margin-bottom: calc(-1 * var(--ent-hang)); }
.ent-card { border: 1px solid var(--line-2); border-radius: 16px; padding: 26px 26px 28px; background: var(--bg); box-shadow: var(--shadow-lg); transition: border-color .2s, transform .2s; }
.ent-card:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.ent-card h3 { font-size: 20px; margin-bottom: 10px; }
.ent-card p { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
@media (max-width: 1000px) {
.how { grid-template-columns: 1fr; padding: 26px 22px; gap: 26px; }
/* stacked: crop the tall viewBox to the ring itself and drop the connectors */
.how-ring { max-width: 440px; margin: 0 auto; width: 100%; aspect-ratio: 600 / 560; overflow: hidden; }
.how-ring svg { height: auto; top: 50%; bottom: auto; transform: translateY(-50%); }
.rg-link { display: none; }
}
@media (max-width: 900px) {
.ent-sec { --ent-hang: 56px; }
.ent { padding: 38px 26px 0; }
.plate-bg--ent img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.ent-head { flex-direction: column; gap: 18px; }
.ent-link { margin-top: 0; }
.ent-cards { grid-template-columns: 1fr; gap: 12px; margin-top: 34px; }
.ent-card { padding: 22px 22px 24px; }
}
@media (max-width: 560px) {
.how-grid { grid-template-columns: 1fr; }
.how { padding: 20px 16px; }
.ent { padding: 30px 20px 0; }
}
@media (prefers-reduced-motion: reduce) {
.rg-link { animation: none; }
}
@media (min-width: 901px) {
.cass-promo .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
@media (max-width: 900px) {
.cass-figure { display: none; }
}
@media (max-width: 560px) {
.hero-note { border-radius: 16px; }
.hero-note b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.hero-note-txt { padding-left: 0; border-left: 0; }
/* The incident name is as wide as the pill here; let it wrap rather than clip a version. */
.hero-note-name { white-space: normal; }
}
/* ============================================================
AI Discovery (/platform/ai-discovery)
The shared product hero (.hero--product + .hero-figure, same as
Orpheus), the example directory under it, one visual per
section, then how it works. Appended after the responsive
blocks so its own breakpoints win.
============================================================ */
/* the example directory: the one picture of the product on the page, right
under the hero. It is the dashboard's Tools table (summary strip, then
logo · name · vendor, access, risk, endpoints, status) drawn in the site
palette. The logos and stat icons come from the dashboard's own helpers,
so the two product class names they emit (.ai-icon, .ai-stat__icon) are
styled here, scoped. */
.ad-shot { margin: 0 auto; max-width: 880px; }
.ad-card { border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; background: var(--bg-2); box-shadow: var(--shadow-lg); }
.ad-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.ad-stats > div { min-width: 0; padding: 12px 14px; border-left: 1px solid var(--line); }
.ad-stats > div:first-child { border-left: 0; }
.ad-stats span { display: block; font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The icon sits beside the number, not in a corner: a one-to-three digit
figure leaves room for it in a tile of any width, so it never has to hide. */
.ad-stats b { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 20px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.ad-card .ai-stat__icon { --tone: var(--dim); display: grid; flex-shrink: 0; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 22%, transparent); }
.ad-card .ai-stat__icon svg { width: 12px; height: 12px; }
.ad-card .ai-stat__icon--accent { --tone: var(--accent); }
.ad-card .ai-stat__icon--warn { --tone: var(--amber); }
.ad-card .ai-stat__icon--bad { --tone: var(--red); }
/* Orpheus in the title bar: the statue's head, cropped like an app mark */
.ad-mark { position: relative; flex-shrink: 0; width: 24px; height: 24px; margin-left: 8px; border-radius: 50%; overflow: hidden; background: var(--mark-bg); box-shadow: inset 0 0 0 1px var(--accent-line); }
.ad-mark img { position: absolute; width: 160px; max-width: none; height: auto; left: -66px; top: -20px; filter: saturate(.85); }
.ad-mark + .ev-u { margin-left: 2px; }
/* exfiltration paths from agents the catalog does not know */
.ad-risks { border-bottom: 1px solid var(--line); background: rgba(var(--red-rgb),0.035); }
.ad-risks-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; font-size: 11px; color: var(--dim); border-bottom: 1px solid rgba(var(--red-rgb),0.14); }
.ad-risks-h .ad-status { font-size: 11px; color: var(--muted); }
.ad-risk { display: grid; grid-template-columns: 24px minmax(0, 150px) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 14px; border-top: 1px solid rgba(var(--red-rgb),0.10); font-size: 12px; }
.ad-risk:first-of-type { border-top: 0; }
.ad-risk-who { min-width: 0; line-height: 1.25; }
.ad-risk-who b { display: block; font-weight: 500; color: var(--text); white-space: nowrap; }
.ad-risk-who small { display: block; font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-risk-path { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.ad-risk-path em { font-style: normal; color: var(--dim); }
.ad-risk-level { text-align: right; line-height: 1.25; }
.ad-risk-level small { display: block; font-size: 11px; color: var(--dim); }
.ad-table { width: 100%; border-collapse: collapse; font-size: 12.5px; color: var(--muted); }
.ad-table th { padding: 8px 10px; text-align: left; font-weight: 500; font-size: 11px; letter-spacing: 0.01em; color: var(--dim); background: rgba(var(--ink),0.025); border-bottom: 1px solid var(--line); white-space: nowrap; }
.ad-table td { padding: 8px 10px; border-top: 1px solid rgba(var(--ink),0.05); vertical-align: middle; }
.ad-table tbody tr:first-child td { border-top: 0; }
.ad-table th:first-child, .ad-table td:first-child { padding-left: 14px; }
.ad-table th:last-child, .ad-table td:last-child { padding-right: 14px; }
.ad-table .ad-col-n { text-align: right; font-variant-numeric: tabular-nums; }
.ad-table td.ad-col-n { color: var(--text); }
.ad-row.is-blocked { box-shadow: inset 2px 0 0 var(--red); }
.ad-tool { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ad-tool > span { display: block; min-width: 0; line-height: 1.25; }
.ad-tool b { display: block; font-weight: 500; color: var(--text); white-space: nowrap; }
.ad-tool small { display: block; max-width: 150px; font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-card .ai-icon, .ad-panel .ai-icon, .ad-policy .ai-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 22%; color: var(--ai-fg); background: var(--ai-bg); box-shadow: inset 0 0 0 1px var(--ai-bd); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.ad-card .ai-icon svg, .ad-panel .ai-icon svg, .ad-policy .ai-icon svg { display: block; }
.ad-caps { display: inline-flex; flex-wrap: nowrap; gap: 4px; }
.ad-cap { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--line-2); font-size: 11px; font-style: normal; color: var(--muted); white-space: nowrap; }
.ad-cap.is-bad { color: var(--red); border-color: rgba(var(--red-rgb),0.45); }
.ad-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); white-space: nowrap; }
.ad-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.ad-dot.is-allowed { background: var(--green); }
.ad-dot.is-review, .ad-dot.is-medium { background: var(--amber); }
.ad-dot.is-high { background: var(--orange); }
.ad-dot.is-blocked, .ad-dot.is-critical { background: var(--red); }
/* plays in once (inline script); opacity and a nudge only, never layout */
.ad-card.is-playing .ad-stats > div, .ad-card.is-playing .ad-row { transition: opacity .45s ease, transform .45s ease; }
.ad-card.is-playing .ad-stats > div:not(.is-in), .ad-card.is-playing .ad-row:not(.is-in) { opacity: 0; transform: translateY(6px); }
.ad-shot .cap { margin-top: 14px; }
/* one tool across the fleet (§02) */
.ad-panel { border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; background: var(--bg-2); box-shadow: var(--shadow-lg); font-size: 12.5px; }
.ad-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.ad-panel-head .ad-tool b { font-size: 15px; font-weight: 600; }
.ad-panel-head .ad-tool small { max-width: none; font-size: 11.5px; }
.ad-facts { margin: 0; padding: 6px 18px 8px; display: grid; }
.ad-facts > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(var(--ink),0.04); font-size: 13.5px; line-height: 1.5; }
.ad-facts > div:last-child { border-bottom: 0; }
.ad-facts dt { color: var(--dim); font-family: var(--mono); font-size: 11.5px; padding-top: 2px; }
.ad-facts dd { margin: 0; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.ad-panel-foot { padding: 12px 18px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--dim); }
/* the exfiltration path (§03) */
.ad-path { border: 1px solid var(--line-2); border-radius: 14px; padding: 18px; background: var(--panel-2); display: flex; flex-direction: column; gap: 10px; }
.ad-leg { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: rgba(var(--ink),0.02); }
.ad-leg-k { font-family: var(--display); font-weight: 700; font-size: 14.5px; }
.ad-leg-v { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.ad-path .fconn { padding: 2px 0; }
.ad-gate { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid rgba(var(--red-rgb),0.35); border-radius: 11px; background: rgba(var(--red-rgb),0.06); }
.ad-gate-k { font-family: var(--display); font-weight: 700; font-size: 14.5px; color: var(--red); }
.ad-gate-v { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
/* policy lists and the heartbeat (§04) */
.ad-policy { border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg-2); box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.ad-policy-col { padding: 14px 18px 8px; }
.ad-policy-col + .ad-policy-col { border-left: 1px solid var(--line); }
.ad-policy-h { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); margin-bottom: 6px; }
.ad-policy-h .ad-status { font-size: 12.5px; color: var(--text); }
.ad-policy-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(var(--ink),0.05); }
.ad-policy-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ad-policy-row b { font-size: 13.5px; color: var(--text); font-weight: 500; line-height: 1.3; }
.ad-policy-row span { font-size: 11.5px; color: var(--dim); }
.ad-policy-row em { font-style: normal; font-size: 12px; color: var(--muted); margin-top: 2px; }
.ad-beat { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 18px; border-top: 1px solid var(--line); background: rgba(var(--ink),0.02); font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.ad-beat span { display: inline-flex; align-items: center; gap: 7px; }
.ad-beat i { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.ad-beat i.ok { background: var(--green); }
.ad-beat i.late { background: var(--amber); }
.ad-beat i.silent { background: var(--orange); }
.ad-beat i.bad { background: var(--red); box-shadow: 0 0 0 3px rgba(var(--red-rgb),0.18); }
/* how it works (§05): three steps across, then the reads / never-does columns */
.ad-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.ad-steps li { padding-top: 18px; border-top: 1px solid var(--line-2); }
.ad-step-n { display: block; font-family: var(--mono); font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 14px; }
.ad-steps h3 { font-size: 18px; margin-bottom: 8px; }
.ad-steps p { font-size: 15px; line-height: 1.6; }
.ad-two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 64px; padding-top: 44px; border-top: 1px solid var(--line); }
.ad-h3 { font-size: 16px; margin-bottom: 14px; }
.ad-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.ad-list li { position: relative; padding-left: 18px; }
.ad-list li::before { content: "–"; position: absolute; left: 0; color: var(--dim); }
/* Cassandra next to AI Discovery (§06) */
.ad-cmp { border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); overflow: hidden; }
.ad-cmp-head, .ad-cmp-row, .ad-cmp-foot { display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1.25fr); }
.ad-cmp-head > span, .ad-cmp-row > span, .ad-cmp-foot > span { padding: 14px 20px; }
.ad-cmp-head { border-bottom: 1px solid var(--line-2); }
.ad-cmp-head > span { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--text); }
.ad-cmp-head img { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--mark-bg); }
.ad-cmp-head small { font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); padding-left: 9px; border-left: 1px solid var(--line-2); }
.ad-cmp-row { border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.ad-cmp-row:last-of-type { border-bottom: 0; }
.ad-cmp-k { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); padding-top: 17px !important; }
.ad-cmp .is-ad { background: var(--accent-bg); color: var(--text); }
.ad-cmp-head .is-ad small { color: var(--accent-2); border-color: var(--accent-line); }
.ad-cmp-foot { border-top: 1px solid var(--line-2); }
.ad-cmp-foot .btn { width: 100%; justify-content: center; }
/* The card is as wide as the wrap until 880px; the exfiltration rows fold
their path under the name once the card gets narrow. */
@media (max-width: 760px) {
.ad-table .ad-col-risk { display: none; }
.ad-risk { grid-template-columns: 24px minmax(0, 1fr) auto; row-gap: 6px; }
.ad-risk > .ai-icon { grid-column: 1; grid-row: 1; }
.ad-risk-who { grid-column: 2; grid-row: 1; }
.ad-risk-level { grid-column: 3; grid-row: 1; }
.ad-risk-path { grid-column: 2 / -1; grid-row: 2; }
}
@media (max-width: 900px) {
.ad-steps { grid-template-columns: 1fr; gap: 28px; }
.ad-two { grid-template-columns: 1fr; gap: 36px; margin-top: 48px; padding-top: 36px; }
.ad-cmp-head, .ad-cmp-row, .ad-cmp-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ad-cmp-head > span:first-child, .ad-cmp-foot > span:first-child { display: none; }
.ad-cmp-k { grid-column: 1 / -1; padding: 14px 20px 0 !important; }
.ad-cmp-row > span[role="cell"] { padding-top: 8px; }
}
@media (max-width: 560px) {
.ad-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ad-stats > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
.ad-stats > div:nth-child(3) { border-left: 0; }
.ad-table .ad-col-n, .ad-table th:nth-child(2), .ad-table td:nth-child(2) { display: none; }
.ad-table th:last-child, .ad-table td:last-child { text-align: right; }
.ad-leg, .ad-gate { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.ad-gate .ad-status { justify-self: start; }
.ad-facts > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
.ad-policy { grid-template-columns: 1fr; }
.ad-policy-col + .ad-policy-col { border-left: 0; border-top: 1px solid var(--line); }
.ad-cmp-head, .ad-cmp-row, .ad-cmp-foot { grid-template-columns: minmax(0, 1fr); }
.ad-cmp-head > span, .ad-cmp-row > span, .ad-cmp-foot > span { padding: 12px 16px; }
.ad-cmp-row > span[role="cell"]:not(.is-ad)::before { content: "Cassandra"; display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin-bottom: 3px; }
.ad-cmp-row > span.is-ad::before { content: "AI Discovery"; display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 3px; }
.ad-cmp-head { display: none; }
.ad-cmp-foot > span.is-ad { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ad-card .ad-stats > div, .ad-card .ad-row { opacity: 1 !important; transform: none !important; transition: none !important; }
}