/* ═══════════════════════════════════════════════════════════════
BARIE · PLATFORM PAGE
Standalone stylesheet: no framework, no build step.
Fonts (assets/media/) are shared with the homepage and the tokens
mirror its design system, so both pages read as one site.
Atmosphere (grid, auras, grain) is built entirely in CSS, it adds
depth without adding a single kilobyte of image weight.
═══════════════════════════════════════════════════════════════ */
/* ───────── Fonts (same files the homepage already ships) ───────── */
@font-face {
font-family: Quicksand;
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(media/a74fb1607b845cb0-s.p.woff2) format("woff2");
unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da,
u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191,
u+2193, u+2212, u+2215, u+feff, u+fffd;
}
@font-face {
font-family: Quicksand;
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(media/9b4fbfc777bb173a-s.woff2) format("woff2");
}
@font-face {
font-family: "Libre Baskerville";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(media/cccb76cee38030ea-s.p.woff2) format("woff2");
unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da,
u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191,
u+2193, u+2212, u+2215, u+feff, u+fffd;
}
@font-face {
font-family: "Libre Baskerville";
font-style: italic;
font-weight: 400 700;
font-display: swap;
src: url(media/782fd72d8ca20ddd-s.p.woff2) format("woff2");
unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da,
u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191,
u+2193, u+2212, u+2215, u+feff, u+fffd;
}
/* ───────── Tokens ───────── */
:root {
--accent: #0582ff;
--accent-hover: #0469db;
--accent-press: #0354b3;
--accent-soft: #eaf3ff;
--accent-lift: #69b4ff;
--ink: #0b1220;
--ink-2: #3d4a5c;
--ink-3: #64748b;
--ink-4: #94a3b8;
--surface: #ffffff;
--tint: #f6f9fd;
--deep: #0a1b33;
--deep-ink: #b7c9e0;
--line: #e4eaf2;
--line-soft: #eef2f7;
--pos: #067a52;
--font-display: "Plus Jakarta Sans", sans-serif;
/*--font-display: "Libre Baskerville", Georgia, serif;*/
--font-sans: Quicksand, ui-sans-serif, system-ui, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
/* adjacent chapters stack their padding, so this is half the gap
you actually see between two sections, keep it measured */
--chapter: clamp(64px, 5.6vw, 92px);
--shell: 1280px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
/* layered shadows: soft, wide, low-opacity reads as premium */
--lift-1: 0 1px 2px rgba(11, 18, 32, 0.04),
0 8px 20px -12px rgba(11, 18, 32, 0.14);
--lift-2: 0 1px 2px rgba(11, 18, 32, 0.04),
0 18px 40px -22px rgba(11, 18, 32, 0.2),
0 40px 80px -50px rgba(11, 18, 32, 0.24);
--lift-blue: 0 1px 2px rgba(11, 18, 32, 0.04),
0 28px 64px -32px rgba(5, 130, 255, 0.36);
color-scheme: light;
}
/* ───────── Base ───────── */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
scroll-padding-top: 132px;
}
body {
margin: 0;
background: var(--surface);
color: var(--ink);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.6;
overflow-x: clip;
}
/* fine film grain over the whole page: the single detail that stops
large flat areas reading as "flat colour" */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 200;
pointer-events: none;
opacity: 0.032;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,
svg {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
::selection {
background: rgba(5, 130, 255, 0.18);
}
:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
.on-deep :focus-visible {
outline-color: #9fc8ff;
}
.skip-link {
position: absolute;
left: 16px;
top: -100px;
z-index: 300;
background: var(--ink);
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font-weight: 700;
font-size: 14px;
transition: top 150ms ease;
}
.skip-link:focus {
top: 16px;
}
/* ───────── Typography ───────── */
.display {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: -0.022em;
line-height: 1.13;
text-wrap: balance;
}
.accent-italic {
font-family: var(--font-display);
font-style: italic;
color: var(--accent-hover);
}
.on-deep .accent-italic {
color: var(--accent-lift);
}
.kicker {
display: inline-flex;
align-items: center;
gap: 11px;
font-family: var(--font-sans);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent-hover);
}
.kicker__rule {
width: 26px;
height: 1px;
background: currentColor;
opacity: 0.4;
}
.kicker--deep {
color: #9fc8ff;
}
.lede {
font-size: 16.5px;
line-height: 1.74;
color: var(--ink-2);
}
.measure {
max-width: 60ch;
}
.mono {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
/* ───────── Layout ───────── */
.shell {
position: relative;
z-index: 1;
width: 100%;
max-width: var(--shell);
margin-inline: auto;
padding-inline: 20px;
}
@media (min-width: 640px) {
.shell {
padding-inline: 32px;
}
}
.section,
.chapter {
position: relative;
padding-block: var(--chapter);
isolation: isolate;
}
/* ───────── Background plates ─────────
Every plate is decorative, absolutely positioned and inert. */
.plate {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
/* engineering grid: masked to a soft ellipse so it never hard-edges */
.plate--grid {
background-image: linear-gradient(
to right,
rgba(11, 18, 32, 0.042) 1px,
transparent 1px
),
linear-gradient(to bottom, rgba(11, 18, 32, 0.042) 1px, transparent 1px);
background-size: 76px 76px;
-webkit-mask-image: radial-gradient(
ellipse 92% 68% at 50% 42%,
#000 12%,
transparent 76%
);
mask-image: radial-gradient(
ellipse 92% 68% at 50% 42%,
#000 12%,
transparent 76%
);
}
/* soft brand auras for the tinted chapters */
.plate--aura {
background: radial-gradient(
700px 440px at 10% 16%,
rgba(5, 130, 255, 0.09),
transparent 62%
),
radial-gradient(
600px 420px at 90% 84%,
rgba(105, 180, 255, 0.1),
transparent 60%
);
}
/* hero: a sovereign territory at dawn, its perimeter glowing.
Scrims keep the left clear for the headline and melt the bottom
into the page, so the photograph never competes with the type. */
.plate--hero {
background-image: linear-gradient(
180deg,
rgba(255, 255, 255, 0.28) 0%,
rgba(255, 255, 255, 0) 34%,
rgba(255, 255, 255, 0.8) 82%,
#fff 100%
),
linear-gradient(
90deg,
#fff 0%,
rgba(255, 255, 255, 0.95) 24%,
rgba(255, 255, 255, 0.72) 42%,
rgba(255, 255, 255, 0.34) 64%,
rgba(255, 255, 255, 0.18) 100%
),
radial-gradient(
900px 520px at 86% 0%,
rgba(255, 209, 158, 0.32),
transparent 60%
),
url(../bg/platform-hero.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.plate--hero::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(
to right,
rgba(11, 18, 32, 0.04) 1px,
transparent 1px
),
linear-gradient(to bottom, rgba(11, 18, 32, 0.04) 1px, transparent 1px);
background-size: 76px 76px;
-webkit-mask-image: radial-gradient(
ellipse 80% 62% at 42% 46%,
#000 8%,
transparent 72%
);
mask-image: radial-gradient(
ellipse 80% 62% at 42% 46%,
#000 8%,
transparent 72%
);
}
/* the tinted chapters fade in and out of white, no hard seams */
.chapter--tint::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(
180deg,
#fff 0%,
var(--tint) 14%,
var(--tint) 86%,
#fff 100%
);
}
/* deep section plates */
.plate--deep {
background-image: url(../bg/boundary.png);
background-size: cover;
background-position: center;
opacity: 0.4;
}
.plate--deepveil {
background: linear-gradient(
90deg,
var(--deep) 6%,
rgba(10, 27, 51, 0.86) 48%,
rgba(10, 27, 51, 0.6) 100%
),
radial-gradient(
760px 460px at 84% 12%,
rgba(105, 180, 255, 0.16),
transparent 62%
);
}
.plate--cta {
background-image: url(../bg/cta-aurora.png);
background-size: cover;
background-position: center;
opacity: 0.55;
}
/* ───────── Motion · content is visible by default ─────────
The `js` class is set before paint, which arms the reveal;
an observer plays it once. No JS or reduced motion ⇒ visible. */
.reveal {
opacity: 1;
transform: none;
}
.js .reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 600ms var(--ease), transform 600ms var(--ease);
transition-delay: var(--d, 0ms);
}
.js .reveal[data-in="true"] {
opacity: 1;
transform: none;
}
/* ───────── Controls ───────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 9px;
font-family: inherit;
font-weight: 700;
font-size: 15px;
line-height: 1;
padding: 15px 26px;
min-height: 50px;
cursor: pointer;
transition: background 180ms ease, border-color 180ms ease,
color 180ms ease, transform 180ms var(--ease), box-shadow 180ms ease;
}
.btn-primary {
background: var(--accent);
color: #fff;
border: 1px solid var(--accent);
box-shadow: 0 10px 26px -12px rgba(5, 130, 255, 0.7);
}
.btn-primary:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
transform: translateY(-1px);
box-shadow: 0 14px 32px -12px rgba(5, 130, 255, 0.8);
}
.btn-primary:active {
background: var(--accent-press);
transform: none;
}
.btn-secondary {
background: rgba(255, 255, 255, 0.86);
color: var(--ink);
border: 1px solid #cdd8e6;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.btn-secondary:hover {
border-color: var(--accent);
color: var(--accent-hover);
transform: translateY(-1px);
}
.btn-on-deep {
background: rgba(255, 255, 255, 0.04);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.4);
}
.btn-on-deep:hover {
border-color: #fff;
background: rgba(255, 255, 255, 0.1);
transform: translateY(-1px);
}
/* ═══════════════ Header ═══════════════ */
.header {
position: fixed;
inset-inline: 0;
top: 0;
z-index: 50;
transition: background 240ms ease, border-color 240ms ease;
border-bottom: 1px solid transparent;
}
.header[data-stuck="true"] {
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(16px) saturate(150%);
-webkit-backdrop-filter: blur(16px) saturate(150%);
border-bottom-color: var(--line);
}
.header__bar {
/* the homepage keeps its header on a narrower rail than the
content below it, matched here so the two pages line up */
max-width: 1160px;
display: flex;
align-items: center;
justify-content: space-between;
height: 76px;
}
.header__logo {
flex-shrink: 0;
color: var(--ink);
}
.header__logo svg {
height: 32px;
width: auto;
}
.nav__list {
display: none;
align-items: center;
gap: 30px;
}
.nav__link {
position: relative;
font-size: 14.5px;
font-weight: 600;
color: var(--ink-2);
transition: color 180ms ease;
}
.nav__link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -7px;
height: 1.5px;
border-radius: 2px;
background: var(--accent);
transform: scaleX(0);
transition: transform 260ms var(--ease);
}
.nav__link:hover {
color: var(--accent-hover);
}
.nav__link:hover::after {
transform: scaleX(1);
}
.nav__link[aria-current="page"] {
color: var(--accent-hover);
font-weight: 700;
}
.nav__link[aria-current="page"]::after {
transform: scaleX(1);
}
.header__actions {
display: flex;
align-items: center;
gap: 10px;
}
.pill {
display: none;
align-items: center;
border-radius: 999px;
padding: 10px 20px;
font-size: 14px;
font-weight: 700;
color: #fff;
transition: background 180ms ease, transform 180ms var(--ease);
}
.pill:hover {
transform: translateY(-1px);
}
.pill--dark {
background: var(--ink);
}
.pill--dark:hover {
background: #1c2942;
}
.pill--blue {
background: var(--accent);
box-shadow: 0 10px 24px -12px rgba(5, 130, 255, 0.8);
}
.pill--blue:hover {
background: var(--accent-hover);
}
.burger {
display: grid;
place-items: center;
height: 44px;
width: 44px;
border-radius: 10px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.9);
color: var(--ink);
cursor: pointer;
}
.burger svg {
height: 20px;
width: 20px;
}
.mobile-nav {
display: none;
border-bottom: 1px solid var(--line);
background: #fff;
}
.mobile-nav[data-open="true"] {
display: block;
}
.mobile-nav a {
display: block;
padding: 16px 0;
font-size: 16px;
font-weight: 600;
color: var(--ink-2);
border-bottom: 1px solid var(--line-soft);
}
.mobile-nav li:last-child a {
border-bottom: 0;
}
.mobile-nav__cta {
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px 0;
}
.mobile-nav__cta a {
border: 0;
text-align: center;
border-radius: 999px;
padding: 14px;
color: #fff;
font-weight: 700;
}
.mob-dark {
background: var(--ink);
}
.mob-blue {
background: var(--accent);
}
@media (min-width: 640px) {
.pill {
display: inline-flex;
}
}
@media (min-width: 1024px) {
.nav__list {
display: flex;
}
.burger,
.mobile-nav {
display: none !important;
}
}
/* ───────── Primary nav dropdown ─────────
Pure CSS: opens on hover and on keyboard focus (:focus-within), so
it works with JavaScript disabled and is reachable by tabbing. */
.nav__item--menu {
position: relative;
}
.nav__caret {
width: 13px;
height: 13px;
margin-left: 5px;
color: var(--ink-4);
transition: transform 260ms var(--ease), color 200ms ease;
}
.nav__item--menu:hover .nav__caret,
.nav__item--menu:focus-within .nav__caret {
transform: rotate(180deg);
color: var(--accent-hover);
}
.menu {
position: absolute;
top: 100%;
left: -18px;
z-index: 60;
padding-top: 14px; /* invisible bridge so the pointer can travel */
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 220ms var(--ease), transform 220ms var(--ease),
visibility 220ms;
}
.nav__item--menu:hover .menu,
.nav__item--menu:focus-within .menu {
opacity: 1;
visibility: visible;
transform: none;
}
.menu__panel {
min-width: 262px;
padding: 8px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
border: 1px solid var(--line);
box-shadow: var(--lift-2);
}
.menu__list a {
display: block;
padding: 10px 12px;
border-radius: 9px;
font-size: 14px;
font-weight: 600;
color: var(--ink-2);
transition: background 180ms ease, color 180ms ease;
}
.menu__list a:hover {
background: var(--accent-soft);
color: var(--accent-hover);
}
.menu__list a[aria-current="page"] {
color: var(--accent-hover);
font-weight: 700;
}
.menu__all {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 6px;
padding: 11px 12px;
border-top: 1px solid var(--line-soft);
font-size: 12.5px;
font-weight: 700;
color: var(--accent-hover);
}
.menu__all svg {
width: 14px;
height: 14px;
transition: transform 260ms var(--ease);
}
.menu__all:hover svg {
transform: translateX(3px);
}
/* wide menu: used where the dropdown holds eight real pages */
.menu--wide {
left: -20px;
}
.menu--wide .menu__panel {
min-width: 430px;
}
.menu__list--2col {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 8px;
}
@media (min-width: 1080px) {
.seg-grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* mobile: the segments simply sit under Solutions, always reachable */
.mobile-nav__sub a {
padding-left: 18px;
font-size: 15px;
font-weight: 600;
color: var(--ink-3);
}
.mobile-nav__sub a::before {
content: "";
display: inline-block;
width: 4px;
height: 4px;
margin-right: 10px;
vertical-align: middle;
border-radius: 999px;
background: var(--accent);
}
.mobile-nav__sub a[aria-current="page"] {
color: var(--accent-hover);
font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
.menu,
.nav__caret,
.menu__all svg {
transition: none !important;
transform: none !important;
}
}
/* ═══════════════ Sticky sub-nav ═══════════════ */
.subnav {
position: sticky;
top: 76px;
z-index: 40;
background: rgba(255, 255, 255, 0.93);
backdrop-filter: blur(16px) saturate(150%);
-webkit-backdrop-filter: blur(16px) saturate(150%);
border-block: 1px solid var(--line-soft);
}
.subnav__inner {
display: flex;
align-items: center;
gap: 4px;
height: 58px;
overflow-x: auto;
scrollbar-width: none;
}
.subnav__inner::-webkit-scrollbar {
display: none;
}
.subnav__label {
flex-shrink: 0;
margin-right: 14px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ink-4);
}
.subnav__link {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 15px;
border-radius: 999px;
font-size: 13.5px;
font-weight: 600;
color: var(--ink-2);
white-space: nowrap;
transition: background 220ms ease, color 220ms ease;
}
.subnav__link:hover {
background: var(--accent-soft);
color: var(--accent-hover);
}
.subnav__link[data-active="true"] {
background: var(--ink);
color: #fff;
}
.subnav__link[data-active="true"] .subnav__num {
color: var(--accent-lift);
}
.subnav__num {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-4);
}
/* ═══════════════ Hero ═══════════════ */
.hero {
position: relative;
overflow: hidden;
isolation: isolate;
padding-top: clamp(112px, 11vw, 152px);
padding-bottom: clamp(64px, 6.5vw, 100px);
}
.hero__grid {
display: grid;
gap: 52px;
align-items: start;
}
.hero h1 {
margin-top: 20px;
font-size: clamp(2.3rem, 4.5vw, 3.6rem);
}
.hero .lede {
margin-top: 22px;
font-size: 17px;
}
.hero__cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 34px;
}
.hero__stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin-top: 48px;
border-top: 1px solid var(--line);
}
/* explicit rows: the value always occupies row 1, so values stay
aligned across the strip however far their labels wrap */
.stat {
display: grid;
grid-template-rows: auto auto;
align-content: start;
padding: 22px 18px 0 0;
position: relative;
}
.stat + .stat {
padding-left: 22px;
}
.stat + .stat::before {
content: "";
position: absolute;
left: 0;
top: 22px;
bottom: 4px;
width: 1px;
background: var(--line);
}
.stat dd {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.5vw, 2.05rem);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1;
color: var(--ink);
font-variant-numeric: tabular-nums;
grid-row: 1;
}
.stat__sfx {
color: var(--accent);
}
/* column-reverse renders the value above its label while keeping
the semantic → order in the markup */
.stat dt {
grid-row: 2;
margin-top: 9px;
font-size: 12px;
font-weight: 600;
color: var(--ink-3);
}
@media (min-width: 1024px) {
.hero__grid {
grid-template-columns: 1.02fr 1fr;
gap: 68px;
}
/* drop the figure to the headline's top edge, clearing the kicker */
.hero__figure {
margin-top: 24px;
}
}
/* ───────── The boundary · signature figure ───────── */
.boundary {
position: relative;
padding: 9px;
border-radius: 20px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.72),
rgba(240, 247, 255, 0.5)
);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px dashed rgba(5, 130, 255, 0.4);
box-shadow: var(--lift-blue);
}
.boundary__corner {
position: absolute;
width: 15px;
height: 15px;
border: 1.5px solid var(--accent);
opacity: 0.55;
}
.boundary__corner--tl {
top: -1px;
left: -1px;
border-right: 0;
border-bottom: 0;
border-radius: 5px 0 0 0;
}
.boundary__corner--tr {
top: -1px;
right: -1px;
border-left: 0;
border-bottom: 0;
border-radius: 0 5px 0 0;
}
.boundary__corner--bl {
bottom: -1px;
left: -1px;
border-right: 0;
border-top: 0;
border-radius: 0 0 0 5px;
}
.boundary__corner--br {
bottom: -1px;
right: -1px;
border-left: 0;
border-top: 0;
border-radius: 0 0 5px 0;
}
.boundary__tag,
.boundary__seal {
position: absolute;
top: -11px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 11px;
border-radius: 999px;
background: #fff;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
box-shadow: var(--lift-1);
}
.boundary__tag {
left: 16px;
border: 1px solid rgba(5, 130, 255, 0.3);
color: var(--accent-hover);
}
.boundary__seal {
right: 16px;
border: 1px solid rgba(6, 122, 82, 0.3);
color: var(--pos);
}
.dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
flex-shrink: 0;
}
.dot--live {
animation: livePulse 1.9s ease-in-out infinite;
}
@keyframes livePulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.28;
}
}
.stack {
border-radius: 12px;
background: #fff;
border: 1px solid var(--line);
overflow: hidden;
box-shadow: var(--lift-1);
}
/* one layer of the platform: icon, index + name, meta, description.
Deliberately dense: this is a spec panel, not a list of links. */
.layer {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 11px;
padding: 11px 13px;
border-bottom: 1px solid var(--line-soft);
transition: background 240ms ease;
}
.layer:last-child {
border-bottom: 0;
}
.layer:hover,
.layer:focus-visible {
background: linear-gradient(90deg, var(--accent-soft), transparent 78%);
}
.layer__ico {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 8px;
background: linear-gradient(160deg, #eaf3ff, #dceafd);
border: 1px solid rgba(5, 130, 255, 0.16);
color: var(--accent-hover);
}
.layer__ico svg {
width: 16px;
height: 16px;
}
.layer__top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.layer__name {
display: inline-flex;
align-items: baseline;
gap: 7px;
font-size: 13.5px;
font-weight: 700;
color: var(--ink);
}
.layer__name i {
font-family: var(--font-mono);
font-style: normal;
font-size: 10px;
font-weight: 700;
color: var(--accent);
}
.layer__meta {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
color: var(--ink-4);
white-space: nowrap;
}
.layer__desc {
display: block;
margin-top: 2px;
font-size: 12px;
line-height: 1.45;
color: var(--ink-3);
}
.boundary__floor {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 8px 3px;
font-size: 11px;
font-weight: 600;
color: var(--accent-hover);
}
.boundary__floor svg {
height: 14px;
width: 14px;
}
/* ═══════════════ Section + chapter heads ═══════════════ */
.section__head {
max-width: 720px;
}
.section__head h2 {
margin-top: 16px;
font-size: clamp(1.8rem, 3.2vw, 2.6rem);
}
.section__head .lede {
margin-top: 20px;
}
.chapter__grid {
display: grid;
gap: 44px;
align-items: center;
}
.chapter__grid > * {
min-width: 0;
}
@media (min-width: 1024px) {
.chapter__grid {
grid-template-columns: 1fr 1.06fr;
gap: 68px;
}
.chapter__grid--flip .chapter__copy {
order: 2;
}
}
.chapter__copy h2 {
margin-top: 16px;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.45rem, 2.3vw, 1.95rem);
letter-spacing: -0.02em;
line-height: 1.2;
text-wrap: balance;
}
.chapter__copy .lede {
margin-top: 18px;
}
.facts {
margin-top: 28px;
display: grid;
gap: 15px;
}
.facts li {
display: grid;
grid-template-columns: 19px 1fr;
gap: 13px;
font-size: 14.5px;
line-height: 1.62;
color: var(--ink-2);
}
.facts svg {
width: 19px;
height: 19px;
margin-top: 2px;
color: var(--accent);
}
.facts b {
color: var(--ink);
font-weight: 700;
}
/* ═══════════════ Product panels ═══════════════ */
.panel {
border-radius: 16px;
background: #fff;
border: 1px solid var(--line);
box-shadow: var(--lift-2);
overflow: hidden;
}
.panel__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid var(--line-soft);
background: linear-gradient(180deg, #fdfefe, #f8fafd);
}
.panel__title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
}
.panel__state {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10.5px;
font-weight: 700;
color: var(--pos);
white-space: nowrap;
}
.panel__state--mute {
color: var(--ink-4);
}
.panel__foot {
padding: 13px 18px;
border-top: 1px solid var(--line-soft);
background: linear-gradient(180deg, #fbfcfe, #f7f9fc);
font-size: 12px;
font-weight: 600;
color: var(--ink-3);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.row {
display: grid;
align-items: center;
gap: 12px;
padding: 13px 18px;
border-bottom: 1px solid var(--line-soft);
transition: background 220ms ease;
}
.row:last-of-type {
border-bottom: 0;
}
.row:hover {
background: #fafcff;
}
.row__logo {
display: grid;
place-items: center;
width: 26px;
height: 26px;
}
.row__logo svg {
width: 100%;
height: auto;
}
.row__name {
display: block;
font-size: 13.5px;
font-weight: 700;
color: var(--ink);
}
.row__sub {
display: block;
margin-top: 3px;
font-size: 11.5px;
color: var(--ink-3);
font-family: var(--font-mono);
}
.tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.05em;
white-space: nowrap;
}
.tag--ok {
border-color: rgba(6, 122, 82, 0.26);
background: rgba(6, 122, 82, 0.07);
color: var(--pos);
}
.tag--blue {
border-color: rgba(5, 130, 255, 0.26);
background: rgba(5, 130, 255, 0.07);
color: var(--accent-hover);
}
.tag--mute {
border-color: var(--line);
background: #f7f9fc;
color: var(--ink-3);
}
.connect-row {
grid-template-columns: 26px 1fr auto;
}
/* ───────── 02 · Unify figure ───────── */
.brain {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 14px;
padding: 30px 20px;
}
.brain__col {
display: grid;
gap: 10px;
}
.silo {
display: flex;
align-items: center;
gap: 9px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--line);
background: #fff;
box-shadow: 0 1px 2px rgba(11, 18, 32, 0.03);
font-size: 11.5px;
font-weight: 600;
color: var(--ink-2);
}
.silo svg {
width: 15px;
height: auto;
flex-shrink: 0;
}
.brain__mid {
display: grid;
justify-items: center;
width: 96px;
}
.brain__core {
position: relative;
display: grid;
place-items: center;
height: 92px;
width: 92px;
}
.brain__glow {
position: absolute;
inset: 0;
border-radius: 999px;
background: radial-gradient(circle, rgba(5, 130, 255, 0.34), transparent 68%);
animation: brainGlow 2.8s ease-in-out infinite;
}
@keyframes brainGlow {
0%,
100% {
opacity: 0.35;
transform: scale(0.88);
}
50% {
opacity: 0.72;
transform: scale(1.12);
}
}
.brain__ring {
position: absolute;
width: 76px;
height: 76px;
border-radius: 999px;
border: 1px solid rgba(5, 130, 255, 0.28);
}
.brain__disc {
position: relative;
display: grid;
place-items: center;
width: 58px;
height: 58px;
border-radius: 999px;
background: linear-gradient(160deg, #2f9bff, #0354b3);
color: #fff;
box-shadow: 0 14px 30px -10px rgba(5, 130, 255, 0.75);
}
.brain__disc svg {
width: 26px;
height: 26px;
}
/* feed lines: both source columns run into the core */
.brain__core::before,
.brain__core::after {
content: "";
position: absolute;
top: 50%;
width: 16px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(5, 130, 255, 0.6));
}
.brain__core::before {
right: 100%;
}
.brain__core::after {
left: 100%;
background: linear-gradient(90deg, rgba(5, 130, 255, 0.6), transparent);
}
.brain__label {
margin-top: 12px;
text-align: center;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--accent-hover);
line-height: 1.5;
}
/* ───────── 03 · Task routing ───────── */
.route {
grid-template-columns: 1fr 22px auto;
gap: 12px;
}
.route__task {
font-size: 13.5px;
font-weight: 600;
color: var(--ink-2);
}
.route__arrow {
width: 20px;
height: 20px;
color: var(--ink-4);
}
.route__model {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 7px 12px;
border-radius: 999px;
border: 1px solid rgba(5, 130, 255, 0.22);
background: linear-gradient(180deg, #f5faff, #eef6ff);
font-size: 12.5px;
font-weight: 700;
color: var(--accent-press);
white-space: nowrap;
}
.route__model svg {
width: 16px;
height: 16px;
color: var(--accent);
flex-shrink: 0;
}
/* ───────── 04 · Agent run ───────── */
.step {
grid-template-columns: 20px 1fr auto;
gap: 13px;
}
.step__icon {
width: 20px;
height: 20px;
color: var(--pos);
}
.step[data-state="run"] .step__icon {
color: var(--accent);
animation: spin 900ms linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.step__name {
display: block;
font-size: 13.5px;
font-weight: 700;
color: var(--ink);
}
/* ═══════════════════════════════════════════════════════════════
SOLUTIONS PAGE
Shares every token, control and layout primitive above; only the
segment index and the document artefact are new.
═══════════════════════════════════════════════════════════════ */
.hero--sol {
padding-top: clamp(108px, 10vw, 144px);
padding-bottom: clamp(40px, 4vw, 64px);
}
.plate--solhero {
background: radial-gradient(
900px 500px at 82% 0%,
rgba(255, 209, 158, 0.3),
transparent 60%
),
radial-gradient(
760px 520px at 6% 18%,
rgba(5, 130, 255, 0.12),
transparent 62%
),
linear-gradient(180deg, #f6fbff 0%, #ffffff 70%);
}
.plate--solhero::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(
to right,
rgba(11, 18, 32, 0.04) 1px,
transparent 1px
),
linear-gradient(to bottom, rgba(11, 18, 32, 0.04) 1px, transparent 1px);
background-size: 76px 76px;
-webkit-mask-image: radial-gradient(
ellipse 78% 60% at 44% 40%,
#000 8%,
transparent 72%
);
mask-image: radial-gradient(
ellipse 78% 60% at 44% 40%,
#000 8%,
transparent 72%
);
}
.sol-hero {
max-width: 780px;
}
.sol-hero h1 {
margin-top: 20px;
font-size: clamp(2.2rem, 4.2vw, 3.4rem);
}
.sol-hero .lede {
margin-top: 22px;
font-size: 17px;
}
/* segment index: the four doors, stated before the detail */
.seg-grid {
display: grid;
gap: 16px;
margin-top: clamp(48px, 5vw, 68px);
}
@media (min-width: 700px) {
.seg-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1080px) {
.seg-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.seg {
display: block;
height: 100%;
padding: 22px;
border-radius: 14px;
border: 1px solid var(--line);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), #fcfdff);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: var(--lift-1);
transition: transform 420ms var(--ease), box-shadow 420ms var(--ease),
border-color 260ms ease;
}
.seg:hover {
transform: translateY(-5px);
border-color: rgba(5, 130, 255, 0.32);
box-shadow: var(--lift-blue);
}
.seg__ico {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 11px;
background: linear-gradient(160deg, #eaf3ff, #dceafd);
border: 1px solid rgba(5, 130, 255, 0.16);
color: var(--accent-hover);
}
.seg__ico svg {
width: 20px;
height: 20px;
}
.seg__name {
display: block;
margin-top: 16px;
font-size: 14.5px;
font-weight: 700;
color: var(--ink);
}
.seg__sub {
display: block;
margin-top: 6px;
font-size: 12.5px;
line-height: 1.5;
color: var(--ink-3);
}
/* what a segment contains + the way into it */
.seg__in {
display: block;
margin-top: 14px;
padding-top: 13px;
border-top: 1px solid var(--line-soft);
}
.seg__in span {
display: block;
font-size: 12px;
line-height: 1.7;
color: var(--ink-3);
}
.seg__in span::before {
content: "";
display: inline-block;
width: 3px;
height: 3px;
margin-right: 8px;
vertical-align: middle;
border-radius: 999px;
background: var(--accent);
}
.seg__more {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 16px;
font-size: 12.5px;
font-weight: 700;
color: var(--accent-hover);
}
.seg__more svg {
width: 13px;
height: 13px;
transition: transform 300ms var(--ease);
}
.seg:hover .seg__more svg {
transform: translateX(3px);
}
/* breadcrumb on a segment page */
.crumb {
display: flex;
align-items: center;
gap: 9px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ink-4);
}
.crumb a {
color: var(--accent-hover);
}
.crumb a:hover {
text-decoration: underline;
}
.crumb > span {
opacity: 0.5;
}
/* ───────── Document artefact ─────────
A real piece of work Barie produced, rather than an abstract
diagram, the evidence each sector actually cares about. */
.doc {
border-radius: 16px;
background: #fff;
border: 1px solid var(--line);
box-shadow: var(--lift-2);
overflow: hidden;
}
.doc__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 18px;
border-bottom: 1px solid var(--line-soft);
background: linear-gradient(180deg, #fdfefe, #f8fafd);
}
.doc__crumb {
font-size: 11px;
font-weight: 600;
color: var(--ink-4);
}
.doc__body {
padding: 22px 22px 18px;
}
.doc__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.12rem;
line-height: 1.3;
letter-spacing: -0.015em;
color: var(--ink);
}
.doc__meta {
display: flex;
flex-wrap: wrap;
gap: 8px 26px;
margin-top: 14px;
padding-bottom: 16px;
border-bottom: 1px solid var(--line-soft);
}
.doc__meta div {
display: flex;
align-items: center;
gap: 7px;
}
.doc__meta dt {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-4);
}
.doc__meta dd {
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 700;
color: var(--ink-2);
}
.doc__h {
margin-top: 16px;
font-size: 12.5px;
font-weight: 700;
color: var(--ink);
}
.doc__p {
margin-top: 6px;
font-size: 13px;
line-height: 1.62;
color: var(--ink-3);
}
.doc__list {
margin-top: 8px;
display: grid;
gap: 7px;
}
.doc__list li {
position: relative;
padding-left: 16px;
font-size: 13px;
line-height: 1.6;
color: var(--ink-3);
}
.doc__list li::before {
content: "";
position: absolute;
left: 3px;
top: 8px;
width: 4px;
height: 4px;
border-radius: 999px;
background: var(--accent);
}
.doc__foot {
padding: 12px 18px;
border-top: 1px solid var(--line-soft);
background: linear-gradient(180deg, #fbfcfe, #f7f9fc);
font-size: 11.5px;
font-weight: 600;
color: var(--ink-3);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.deep__note {
margin-top: 34px;
font-size: 14.5px;
color: var(--deep-ink);
}
.deep__note a {
color: #fff;
font-weight: 700;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.deep__note a:hover {
border-bottom-color: #fff;
}
@media (max-width: 640px) {
.doc__meta {
gap: 8px 18px;
}
}
/* ═══════════════════════════════════════════════════════════════
CONTACT PAGE
═══════════════════════════════════════════════════════════════ */
.contact {
display: grid;
gap: 48px;
align-items: start;
}
@media (min-width: 1000px) {
.contact {
grid-template-columns: 1fr 1.02fr;
gap: 68px;
}
}
.contact__copy h1 {
margin-top: 20px;
font-size: clamp(2.1rem, 3.8vw, 3rem);
}
.contact__copy .lede {
margin-top: 22px;
max-width: 52ch;
}
.contact__aside {
margin-top: 40px;
padding-top: 26px;
border-top: 1px solid var(--line);
}
.contact__asideh {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-4);
}
.contact__links {
margin-top: 18px;
display: grid;
gap: 15px;
}
.contact__links a {
display: block;
font-size: 14.5px;
font-weight: 700;
color: var(--accent-hover);
}
.contact__links a:hover {
text-decoration: underline;
}
.contact__links span {
display: block;
margin-top: 3px;
font-size: 13px;
line-height: 1.55;
color: var(--ink-3);
}
/* ───────── Form ───────── */
.form {
padding: 30px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--line);
box-shadow: var(--lift-2);
}
.form__title {
font-family: var(--font-display);
font-size: 1.2rem;
letter-spacing: -0.015em;
color: var(--ink);
}
.form__row {
display: grid;
gap: 16px;
}
@media (min-width: 560px) {
.form__row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.field {
display: block;
margin-top: 18px;
}
.form__row .field {
margin-top: 18px;
}
.field__label {
display: block;
margin-bottom: 7px;
font-size: 12.5px;
font-weight: 700;
color: var(--ink-2);
}
.field__input {
width: 100%;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid #cdd8e6;
background: #fff;
font-family: inherit;
font-size: 14.5px;
color: var(--ink);
transition: border-color 180ms ease, box-shadow 180ms ease;
}
.field__input::placeholder {
color: var(--ink-4);
}
.field__input:hover {
border-color: #b6c6da;
}
.field__input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(5, 130, 255, 0.16);
}
select.field__input {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5 12 15l6-5.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
padding-right: 38px;
}
textarea.field__input {
resize: vertical;
min-height: 96px;
line-height: 1.6;
}
.form__submit {
width: 100%;
margin-top: 24px;
}
.form__note {
margin-top: 14px;
text-align: center;
font-size: 12.5px;
color: var(--ink-3);
}
/* ═══════════════════════════════════════════════════════════════
PRICING PAGE
═══════════════════════════════════════════════════════════════ */
.cost {
display: grid;
gap: 20px;
margin-top: 48px;
}
@media (min-width: 860px) {
.cost {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.cost__card {
padding: 28px;
border-radius: 16px;
border: 1px solid var(--line);
background: linear-gradient(180deg, #fff, #fcfdff);
box-shadow: var(--lift-1);
}
.cost__card--own,
.cost__card--stat {
border-color: rgba(5, 130, 255, 0.28);
background: linear-gradient(180deg, #f7fbff, #eef6ff);
}
.cost__label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ink-3);
}
.cost__fig {
margin-top: 16px;
font-family: var(--font-display);
font-size: clamp(2rem, 3.4vw, 2.9rem);
line-height: 1;
letter-spacing: -0.02em;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.cost__fig span {
font-size: 0.5em;
margin-left: 4px;
color: var(--ink-3);
}
.cost__fig--rent {
color: var(--ink-4);
}
.cost__note {
margin-top: 12px;
font-size: 13.5px;
line-height: 1.6;
color: var(--ink-2);
}
.facts--wide {
margin-top: 40px;
}
/* Set as a spec sheet rather than a checklist: a hairline opens each
entry and the label takes its own line, so the eye gets a heading to
scan and the rows line up instead of running ragged. */
.facts--wide li {
grid-template-columns: auto 1fr;
gap: 0 11px;
align-items: start;
padding: 18px 2px 20px;
border-top: 1px solid var(--line);
}
.facts--wide svg {
width: 16px;
height: 16px;
margin-top: 3px;
}
.facts--wide b {
display: block;
margin-bottom: 4px;
font-size: 15px;
line-height: 1.38;
letter-spacing: -0.005em;
}
@media (min-width: 620px) {
.facts--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
}
@media (min-width: 900px) {
.facts--wide {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 30px;
}
}
/* comparison table: scrolls inside its own frame on narrow screens
rather than forcing the page wider */
.cmp {
margin-top: 44px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
box-shadow: var(--lift-1);
overflow-x: auto;
}
.cmp__table {
width: 100%;
min-width: 720px;
border-collapse: collapse;
}
.cmp__table th,
.cmp__table td {
padding: 15px 18px;
text-align: left;
font-size: 13.5px;
border-bottom: 1px solid var(--line-soft);
}
.cmp__table tbody tr:last-child th,
.cmp__table tbody tr:last-child td {
border-bottom: 0;
}
.cmp__table thead th,
.cmp__table thead td {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--ink-3);
background: linear-gradient(180deg, #fdfefe, #f8fafd);
}
.cmp__table tbody th {
font-weight: 700;
color: var(--ink);
}
.cmp__table tbody td {
color: var(--ink-3);
}
.cmp__table .cmp__barie {
color: var(--accent-press);
font-weight: 700;
background: rgba(5, 130, 255, 0.05);
border-left: 1px solid rgba(5, 130, 255, 0.16);
border-right: 1px solid rgba(5, 130, 255, 0.16);
}
.cmp__table thead .cmp__barie {
color: var(--accent-hover);
border-top: 1px solid rgba(5, 130, 255, 0.16);
}
.cmp__table tbody tr:last-child .cmp__barie {
border-bottom: 1px solid rgba(5, 130, 255, 0.16);
}
.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;
}
/* ═══════════════ Benchmarks ═══════════════ */
.bench {
display: grid;
gap: 20px;
margin-top: 48px;
}
@media (min-width: 900px) {
.bench {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.bench__card {
display: flex;
flex-direction: column;
padding: 30px;
border-radius: 16px;
border: 1px solid var(--line);
background: linear-gradient(180deg, #fff, #fcfdff);
box-shadow: var(--lift-1);
}
.bench__badge {
align-self: flex-start;
padding: 6px 13px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent-hover);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.bench__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 28px;
margin-top: 26px;
}
.bench__body {
flex: 1;
min-width: 210px;
font-size: 14.5px;
line-height: 1.7;
color: var(--ink-2);
}
.bench__body b {
color: var(--ink);
font-weight: 700;
}
/* the 92% dial. Its resting state is the final value, so with no JS
or reduced motion it simply renders complete. */
.dial-wrap {
position: relative;
display: grid;
place-items: center;
}
.dial {
width: 132px;
height: 132px;
}
.dial__track {
fill: none;
stroke: var(--line);
stroke-width: 11;
}
.dial__val {
fill: none;
stroke: var(--accent);
stroke-width: 11;
stroke-linecap: round;
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: 389.6;
stroke-dashoffset: 31.2; /* 8% remaining of the circumference */
transition: stroke-dashoffset 1400ms var(--ease) 120ms;
}
.js .reveal:not([data-in="true"]) .dial__val {
stroke-dashoffset: 389.6;
}
.dial__num {
position: absolute;
font-family: var(--font-display);
font-size: 30px;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.dial__num span {
font-size: 20px;
}
.bench__quote {
justify-content: space-between;
}
.bench__quote blockquote {
font-size: clamp(1.05rem, 1.6vw, 1.28rem);
line-height: 1.62;
color: var(--ink);
}
.bench__quote blockquote b {
color: var(--accent-hover);
font-weight: 700;
}
.bench__quote figcaption {
display: flex;
align-items: center;
gap: 14px;
margin-top: 30px;
padding-top: 24px;
border-top: 1px solid var(--line-soft);
}
.bench__avatar {
display: grid;
place-items: center;
width: 46px;
height: 46px;
flex-shrink: 0;
border-radius: 999px;
background: linear-gradient(160deg, #2f9bff, #0354b3);
color: #fff;
font-size: 14.5px;
font-weight: 700;
box-shadow: 0 10px 22px -10px rgba(5, 130, 255, 0.7);
}
.bench__who b {
display: block;
font-size: 15px;
font-weight: 700;
color: var(--ink);
}
.bench__who span {
display: block;
margin-top: 2px;
font-size: 13px;
color: var(--ink-3);
}
@media (prefers-reduced-motion: reduce) {
.dial__val {
transition: none !important;
stroke-dashoffset: 31.2 !important;
}
}
/* ═══════════════ Deployment ═══════════════ */
.deploy {
display: grid;
gap: 1px;
margin-top: 54px;
background: var(--line);
border: 1px solid var(--line);
border-radius: 18px;
overflow: hidden;
box-shadow: var(--lift-1);
}
/* auto-fit rather than a fixed three: most of these grids hold four cards, and
a hard 3-column track left the fourth stranded on a row of its own. This
gives 4-up, 3-up and 2-up their own sensible row without a modifier class. */
@media (min-width: 900px) {
.deploy {
grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
}
}
/* One ruled block rather than four floating cards. The 1px grid gap lets
the container colour show through as hairlines, so the columns read as
a set instead of a row of separate boxes, and there is no ragged gutter
when the grid wraps. */
.deploy__card {
position: relative;
display: flex;
flex-direction: column;
padding: 32px 28px 34px;
background: var(--surface);
transition: background 320ms var(--ease);
}
/* accent rule that draws across the top of the column on hover */
.deploy__card::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 2px;
width: 0;
background: linear-gradient(90deg, var(--accent), var(--accent-lift));
transition: width 560ms var(--ease);
}
.deploy__card:hover {
background: #fbfcff;
}
.deploy__card:hover::before {
width: 100%;
}
.deploy__glyph {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--line);
color: var(--accent-hover);
margin-bottom: 22px;
transition: background 320ms var(--ease), border-color 320ms var(--ease),
transform 560ms var(--ease);
}
.deploy__glyph svg {
width: 22px;
height: 22px;
}
.deploy__card:hover .deploy__glyph {
background: var(--accent-soft);
border-color: rgba(5, 130, 255, 0.3);
transform: translateY(-2px);
}
.deploy__card h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.24rem;
line-height: 1.28;
letter-spacing: -0.015em;
color: var(--ink);
}
.deploy__card p {
margin-top: 12px;
font-size: 14.5px;
line-height: 1.66;
color: var(--ink-2);
}
@supports (grid-template-rows: subgrid) and (selector(:has(*))) {
@media (min-width: 900px) {
.deploy__card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
row-gap: 0;
align-content: start;
}
.deploy__card:has(.deploy__spec) {
grid-row: span 4;
}
}
}
.deploy__spec {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--line-soft);
display: grid;
gap: 10px;
}
.deploy__spec li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 12.5px;
color: var(--ink-3);
}
.deploy__spec b {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--ink);
font-weight: 700;
}
/* ═══════════════ Security · deep ═══════════════ */
.deep {
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--deep);
color: #fff;
padding-block: var(--chapter);
}
.deep__inner {
position: relative;
z-index: 1;
}
.deep .lede {
color: var(--deep-ink);
}
.deep__quote {
margin-top: 30px;
padding-left: 20px;
border-left: 2px solid var(--accent-lift);
max-width: 52ch;
}
.deep__quote p {
font-family: var(--font-display);
font-style: italic;
font-size: 17px;
line-height: 1.6;
color: #d6e6fb;
}
.controls {
display: grid;
gap: 18px;
margin-top: 52px;
}
@media (min-width: 640px) {
.controls {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.controls {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.control {
padding: 24px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.08),
rgba(255, 255, 255, 0.03)
);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: border-color 320ms ease, background 320ms ease,
transform 460ms var(--ease);
}
.control:hover {
border-color: rgba(105, 180, 255, 0.5);
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.12),
rgba(255, 255, 255, 0.05)
);
transform: translateY(-4px);
}
.control__glyph {
width: 23px;
height: 23px;
color: var(--accent-lift);
}
.control h3 {
margin-top: 16px;
font-size: 15px;
font-weight: 700;
color: #fff;
}
.control p {
margin-top: 9px;
font-size: 13.5px;
line-height: 1.64;
color: var(--deep-ink);
}
/* ═══════════════ Spec sheet ═══════════════ */
.specs {
margin-top: 52px;
border: 1px solid var(--line);
border-radius: 16px;
overflow: hidden;
background: #fff;
box-shadow: var(--lift-1);
}
.specs__row {
display: grid;
gap: 7px 26px;
padding: 22px 26px;
border-bottom: 1px solid var(--line-soft);
transition: background 220ms ease;
}
.specs__row:last-child {
border-bottom: 0;
}
.specs__row:hover {
background: #fafcff;
}
.specs__row dt {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--accent-hover);
}
.specs__row dd {
font-size: 14.5px;
line-height: 1.62;
color: var(--ink);
}
@media (min-width: 760px) {
.specs__row {
grid-template-columns: 230px 1fr;
align-items: baseline;
}
}
/* ═══════════════ CTA ═══════════════ */
.cta {
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--deep);
color: #fff;
padding-block: clamp(72px, 7vw, 108px);
text-align: center;
}
.cta__inner {
position: relative;
z-index: 1;
}
.cta h2 {
font-size: clamp(1.9rem, 3.4vw, 2.8rem);
max-width: 20ch;
margin-inline: auto;
}
.cta p {
margin-top: 20px;
margin-inline: auto;
max-width: 54ch;
font-size: 16.5px;
line-height: 1.7;
color: var(--deep-ink);
}
.cta__row {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-top: 34px;
}
/* ═══════════════ Footer ═══════════════ */
.footer {
background: #fff;
/* py-14 on the homepage: the two footers have to measure the same */
padding-block: 56px;
border-top: 1px solid var(--line-soft);
}
.footer__grid {
display: grid;
gap: 46px;
}
@media (min-width: 1024px) {
.footer__grid {
grid-template-columns: minmax(0, 1fr) 2.6fr;
}
}
.footer__brand svg {
height: 32px;
width: auto;
color: var(--ink);
}
.footer__brand p {
margin-top: 18px;
max-width: 34ch;
font-size: 13.5px;
line-height: 1.7;
color: var(--ink-3);
}
.footer__cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 34px 24px;
}
@media (min-width: 640px) {
.footer__cols {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.footer__cols h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: 15px;
color: var(--ink);
}
.footer__cols ul {
margin-top: 16px;
display: grid;
gap: 10px;
}
.footer__cols a {
font-size: 13.5px;
color: var(--ink-3);
transition: color 180ms ease;
}
.footer__cols a:hover {
color: var(--accent-hover);
}
.footer__base {
margin-top: 56px;
padding-top: 28px;
border-top: 1px solid var(--line);
text-align: center;
font-size: 13px;
color: var(--ink-4);
}
/* ═══════════════ Small screens ═══════════════
The two figures that carry fixed multi-column layouts are
re-flowed rather than squeezed, so nothing forces the page
wider than the viewport. */
@media (max-width: 640px) {
.brain {
grid-template-columns: 1fr;
gap: 16px;
padding: 24px 16px;
}
.brain__col {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.brain__mid {
width: auto;
}
.brain__core::before,
.brain__core::after {
display: none;
}
.silo {
min-width: 0;
}
.route {
grid-template-columns: 1fr auto;
row-gap: 10px;
}
.route__arrow {
display: none;
}
.route__model {
grid-column: 1 / -1;
justify-self: start;
white-space: normal;
}
.hero__stats {
grid-template-columns: 1fr;
}
.stat {
padding: 18px 0;
border-bottom: 1px solid var(--line-soft);
}
.stat + .stat {
padding-left: 0;
}
.stat + .stat::before {
display: none;
}
}
/* ═══════════════ Reduced motion ═══════════════ */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.js .reveal,
.js .reveal[data-in="true"] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
.deploy__card:hover,
.control:hover,
.btn:hover,
.pill:hover {
transform: none !important;
}
.deploy__card:hover .deploy__glyph {
transform: none !important;
}
.deploy__card::before,
.deploy__card:hover::before {
transition: none;
width: 0;
}
}
/* ═══════════════════════════════════════════════════════════════
Feature hero figures: animated, light-mode, on-brand.
Two-column hero (copy + figure), CSS-driven motion + .reveal entrance.
Namespaced .ffig* so nothing else is affected.
═══════════════════════════════════════════════════════════════ */
.feat-hero{display:grid;gap:clamp(28px,4vw,56px);align-items:center;grid-template-columns:1.03fr .97fr}
@media(max-width:920px){.feat-hero{grid-template-columns:1fr}}
.feat-hero .sol-hero{text-align:left;margin:0;max-width:none}
.feat-figwrap{min-width:0}
.ffig{position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;
background:radial-gradient(120% 95% at 85% -12%,var(--accent-soft),transparent 55%),#fff;
box-shadow:var(--lift-2);padding:22px;aspect-ratio:1.12/1}
.ffig::before{content:"";position:absolute;inset:0;opacity:.55;pointer-events:none;
background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
background-size:30px 30px;-webkit-mask-image:radial-gradient(circle at 50% 42%,#000,transparent 80%);mask-image:radial-gradient(circle at 50% 42%,#000,transparent 80%)}
.ffig__tag{position:relative;z-index:3;display:inline-flex;align-items:center;gap:7px;font:700 10.5px/1 var(--font-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.ffig__tag i{width:7px;height:7px;border-radius:50%;background:var(--pos);box-shadow:0 0 0 4px rgba(6,122,82,.14);animation:ff-pulse 2.4s ease-in-out infinite}
.ffig__stage{position:relative;z-index:2;height:calc(100% - 26px);margin-top:14px}
.ff-node{position:absolute;display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:10px;background:#fff;border:1px solid var(--line);box-shadow:var(--lift-1);font:600 12px/1.1 var(--font-sans);color:var(--ink-2);white-space:nowrap}
.ff-node .d{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.ff-card{position:absolute;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:var(--lift-2);padding:12px}
.ff-ok{color:var(--pos)}
@keyframes ff-pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes ff-travel{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes ff-dash{to{stroke-dashoffset:0}}
@keyframes ff-scan{0%{transform:translateY(-8%);opacity:0}20%{opacity:.9}80%{opacity:.9}100%{transform:translateY(108%);opacity:0}}
@keyframes ff-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ff-rot{to{transform:rotate(360deg)}}
@keyframes ff-blink{50%{opacity:0}}
@keyframes ff-bounce{0%{left:14%;opacity:0}30%{opacity:1}52%{left:52%;transform:scale(1.25)}72%{left:14%}100%{left:14%;opacity:0}}
.reveal[data-in="true"] .ff-anim{animation-play-state:running}
.ff-anim{animation-play-state:paused}
/* connectors constellation */
.ffig-connect .hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:18px;display:grid;place-items:center;color:#fff;font:800 12px/1 var(--font-sans);background:linear-gradient(160deg,var(--accent),var(--accent-hover));box-shadow:0 10px 30px -8px rgba(5,130,255,.5);z-index:3}
.ffig-connect .ring{position:absolute;left:50%;top:50%;border:1px dashed var(--line);border-radius:50%;transform:translate(-50%,-50%)}
.ffig-connect .ring--a{width:64%;height:64%;animation:ff-rot 34s linear infinite}
.ffig-connect .ring--b{width:96%;height:96%;animation:ff-rot 52s linear infinite reverse}
.ffig-connect .chip{transform:translate(-50%,-50%);z-index:2}
.ffig-connect .chip svg{width:15px;height:auto;max-height:15px;flex:0 0 auto}
.ffig-connect .hub{z-index:3}
/* real spokes, so the nodes read as connected rather than floating */
.ffig-connect .spokes{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.ffig-connect .spokes line{stroke:var(--line);stroke-width:1.2;stroke-dasharray:900;stroke-dashoffset:900;animation:ff-dash 1s var(--ease) forwards var(--d)}
/* the spark travels hub -> node in percentages, which is the same straight
line the spoke draws, so the two stay together at any figure size */
/* z-index 1 keeps the spark above the spoke but under the chip, so it reads as
arriving *into* the node instead of landing on top of its label */
.ffig-connect .spark{position:absolute;z-index:1;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;opacity:0;
background:var(--accent-lift);box-shadow:0 0 0 3px rgba(5,130,255,.15);animation:ff-spark 2.9s var(--ease) infinite;animation-delay:var(--d)}
@keyframes ff-spark{0%{left:50%;top:50%;opacity:0}14%{opacity:1}80%{opacity:1}100%{left:var(--tx);top:var(--ty);opacity:0}}
@media(max-width:560px){.ffig-connect .chip{font-size:10px;padding:6px 8px;gap:5px}.ffig-connect .chip svg{width:13px;max-height:13px}}
/* deep research threads→briefing */
/* deep research: sources thread into one cited briefing.
The columns tile the stage exactly: sources 0-34%, threads 34-52%, brief
52-100%. Every thread starts at 34 and ends at 52 in the same viewBox units,
so the curves meet the chip edge and the card edge at any figure width.
ff-rise-y (not ff-rise) keeps the translateY(-50%) that centres each chip. */
.ffig-research .src{left:0;width:34%;box-sizing:border-box;transform:translateY(-50%);z-index:2;overflow:hidden;animation:ff-rise-y .5s var(--ease) both}
.ffig-research .src svg{width:15px;height:auto;max-height:15px;flex:0 0 auto}
.ffig-research .src svg.g{color:var(--accent)}
.ffig-research .thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
/* preserveAspectRatio="none" scales the stroke with the box, so a plain
stroke-width renders several px thick and uneven, pin it to screen px.
The dash must then out-measure the longest curve, in those same px. */
.ffig-research .thread path{fill:none;stroke:var(--accent-lift);stroke-width:1.4;stroke-dasharray:900;stroke-dashoffset:900;animation:ff-dash 1.4s var(--ease) forwards .5s}
.ffig-research .brief{right:0;top:50%;transform:translateY(-50%);width:48%;z-index:3}
.ffig-research .brief .ln{height:7px;border-radius:4px;background:var(--line);margin:7px 0}
.ffig-research .brief .ln.s{width:70%}
.ffig-research .cite{display:inline-block;font:700 9px/1 var(--font-mono);color:var(--accent);background:var(--accent-soft);border-radius:5px;padding:3px 5px;margin-right:4px}
.ffig-research .src .m{margin-left:auto;padding-left:8px;font:700 8.5px/1 var(--font-mono);letter-spacing:.04em;color:var(--ink-3)}
/* the sweep reads as "scanning the sources", so stop it at the brief's edge, run full-width it is half-hidden behind the card and looks like an artefact */
.ffig-research .scan{position:absolute;left:0;right:48%;height:34%;z-index:0;background:linear-gradient(180deg,transparent,rgba(5,130,255,.09),transparent);animation:ff-scan 3.2s ease-in-out infinite}
@media(max-width:560px){
.ffig-research .src{font-size:10px;padding:6px 8px;gap:5px}
.ffig-research .src svg{width:13px;max-height:13px}
.ffig-research .src .m{display:none}
}
/* skills compose */
/* skills: the slash-command palette the copy actually describes.
The typed query is mono so the `ch` unit matches the rendered width exactly,
and the base width is the full string, so motion-reduced shows it typed out. */
.ffig-skills .pal{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--lift-2);overflow:hidden}
.ffig-skills .pal__in{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.ffig-skills .pal__slash{display:grid;place-items:center;width:21px;height:21px;border-radius:6px;background:var(--accent-soft);color:var(--accent);font:800 12px/1 var(--font-mono);flex:0 0 auto}
.ffig-skills .pal__q{font:700 12px/1 var(--font-mono);color:var(--ink);overflow:hidden;white-space:nowrap;width:8ch;animation:ff-type 1s steps(8) both}
@keyframes ff-type{from{width:0}}
.ffig-skills .pal__caret{width:1.5px;height:13px;background:var(--accent);animation:ff-blink 1s steps(1) infinite}
.ffig-skills .pal__list{list-style:none;margin:0;padding:6px}
.ffig-skills .pal__list li{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:9px;font:600 11.5px/1 var(--font-mono);color:var(--ink-2);animation:ff-rise .4s var(--ease) both;animation-delay:var(--d)}
.ffig-skills .pal__list li .k{color:var(--ink-4);flex:0 0 auto}
.ffig-skills .pal__list li.on{background:var(--accent-soft);color:var(--accent-hover)}
.ffig-skills .pal__list li.on .k{color:var(--accent)}
.ffig-skills .pal__list li b{margin-left:auto;flex:0 0 auto;font:700 9px/1 var(--font-mono);color:var(--accent);background:#fff;border:1px solid var(--line);border-radius:5px;padding:3px 5px}
.ffig-skills .pal__foot{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-top:1px solid var(--line-soft);background:var(--tint);font:700 9.5px/1 var(--font-mono);letter-spacing:.04em;color:var(--ink-3)}
@media(max-width:560px){
.ffig-skills .pal__q{font-size:11px}
.ffig-skills .pal__list li{font-size:10.5px;padding:7px 8px}
.ffig-skills .pal__foot{font-size:8.5px;padding:8px 10px}
}
/* web search fuse */
/* web search: one query, answered from two worlds at once. The left rule on
each result says which world it came from, so the fusion is legible. */
.ffig-search .srch{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%)}
.ffig-search .srch__bar{display:flex;align-items:center;gap:8px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:var(--lift-1)}
.ffig-search .srch__bar>svg{width:15px;height:15px;color:var(--accent);flex:0 0 auto}
.ffig-search .srch__bar .q{font:600 11px/1 var(--font-mono);color:var(--ink);overflow:hidden;white-space:nowrap;width:21ch;animation:ff-type 1.1s steps(21) both}
.ffig-search .srch__bar .caret{width:1.5px;height:13px;background:var(--accent);animation:ff-blink 1s steps(1) infinite}
.ffig-search .fuse{display:flex;align-items:center;justify-content:center;gap:8px;margin:13px 0 3px}
.ffig-search .fuse span{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:#fff;box-shadow:var(--lift-1);font:600 10.5px/1 var(--font-sans);color:var(--ink-2);white-space:nowrap}
.ffig-search .fuse span svg{width:12px;height:12px;flex:0 0 auto}
.ffig-search .fuse .int svg{color:var(--pos)}
.ffig-search .fuse .web svg{color:var(--accent)}
.ffig-search .fuse i{font:800 12px/1 var(--font-mono);font-style:normal;color:var(--ink-4)}
.ffig-search .srch__list{list-style:none;margin:0;padding:0}
.ffig-search .srch__list li{position:relative;display:flex;align-items:center;gap:8px;margin-top:7px;padding:8px 10px 8px 13px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:var(--lift-1);font:600 11px/1.1 var(--font-sans);color:var(--ink-2);overflow:hidden;animation:ff-rise .45s var(--ease) both;animation-delay:var(--d)}
.ffig-search .srch__list li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.ffig-search .srch__list li.int::before{background:var(--pos)}
.ffig-search .srch__list .b{flex:0 0 auto;font:700 8px/1 var(--font-mono);letter-spacing:.1em;color:var(--accent);background:var(--accent-soft);border-radius:5px;padding:4px 5px}
.ffig-search .srch__list li.int .b{color:var(--pos);background:rgba(6,122,82,.1)}
.ffig-search .srch__list .n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ffig-search .srch__list .t{margin-left:auto;flex:0 0 auto;padding-left:8px;font:700 8.5px/1 var(--font-mono);color:var(--ink-3)}
.ffig-search .srch__foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font:700 9.5px/1 var(--font-mono);letter-spacing:.05em;color:var(--ink-3)}
.ffig-search .srch__foot b{color:var(--pos)}
@media(max-width:560px){
/* bar + rails + four results + footer need more height than a 1.12 box gives */
.ffig-search{aspect-ratio:.95/1}
.ffig-search .srch__bar .q{font-size:10px}
.ffig-search .fuse span{font-size:9.5px;padding:5px 8px}
.ffig-search .srch__list li{font-size:10px}
.ffig-search .srch__list .t{display:none}
.ffig-search .srch__foot{font-size:8.5px}
}
/* coding agent editor */
.ffig-code .editor{position:absolute;inset:6% 4%;border-radius:12px;background:#0e1b30;border:1px solid #1e2c46;overflow:hidden;box-shadow:var(--lift-2)}
.ffig-code .bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid #1e2c46}
.ffig-code .bar .b{width:9px;height:9px;border-radius:50%;background:#33415c}
.ffig-code .tabname{margin-left:8px;font:700 10.5px/1 var(--font-mono);color:#8ea3c4}
.ffig-code .code{padding:12px 14px;font:600 11px/1.7 var(--font-mono);color:#cbd5e1}
.ffig-code .code .kw{color:#69b4ff}.ffig-code .code .st{color:#4ade80}.ffig-code .code .cm{color:#5f6f8c}
.ffig-code .cur{display:inline-block;width:7px;height:13px;vertical-align:-2px;background:var(--accent-lift);animation:ff-blink 1s steps(1) infinite}
.ffig-code .added{color:#4ade80}
/* company brain: silos funnel into one resolved core.
NB: these elements are centred with translate(-50%), so their entrance and
spin keyframes must carry that translate through. A bare `transform:none`
or `rotate()` keyframe silently drops the centring and knocks the chip (and
the curve it anchors) half its own size out of place. */
@keyframes ff-rise-y{from{opacity:0;transform:translateY(calc(-50% + 10px))}to{opacity:1;transform:translateY(-50%)}}
@keyframes ff-rot-c{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.ffig-brain .sil{position:absolute;box-sizing:border-box;width:27%;transform:translateY(-50%);z-index:2;
display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:9px;background:#fff;border:1px solid var(--line);box-shadow:var(--lift-1);
font:600 11px/1.1 var(--font-sans);color:var(--ink-2);white-space:nowrap;overflow:hidden;animation:ff-rise-y .5s var(--ease) both}
.ffig-brain .sil--l{left:0}
.ffig-brain .sil--r{right:0}
.ffig-brain .sil svg{width:15px;height:auto;max-height:15px;flex:0 0 auto}
/* narrow stages need extra height, or the bottom chips collide with the badge */
@media(max-width:560px){
.ffig-brain{aspect-ratio:.85/1}
.ffig-brain .sil{width:33%;font-size:10px;padding:6px 7px}
.ffig-brain .badge{font-size:9px;padding:4px 6px}
}
.ffig-brain .funnel{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
/* non-scaling-stroke puts the dash in screen px, so the dash must simply be
longer than the longest curve at any figure width, one dash, no gaps. */
.ffig-brain .funnel path{fill:none;stroke:var(--accent-lift);stroke-width:1.3;stroke-dasharray:900;stroke-dashoffset:900;animation:ff-dash 1.5s var(--ease) forwards .4s}
.ffig-brain .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:22px;display:grid;place-items:center;color:#fff;z-index:3;background:linear-gradient(160deg,var(--accent),var(--accent-hover));box-shadow:0 12px 34px -8px rgba(5,130,255,.5)}
.ffig-brain .core svg{width:30px;height:30px}
.ffig-brain .halo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:118px;height:118px;border-radius:50%;border:1px dashed var(--line);z-index:1;animation:ff-rot-c 40s linear infinite}
.ffig-brain .badge{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:3;white-space:nowrap;font:700 9.5px/1 var(--font-mono);letter-spacing:.06em;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:5px 8px}
/* agents: a live run timeline. A bar's --x/--w ARE its position on the time
axis, and its delay/duration are derived from them, so the sweeping playhead
stays locked to the bars at any width. Overlapping bars = parallel steps.
Every animation resolves to the element's own base style, so with motion
reduced the figure renders as a completed run rather than an empty one. */
.ffig-run .rt{position:relative;height:calc(100% - 26px);display:flex;flex-direction:column;justify-content:space-evenly}
.ffig-run .rt__row{display:flex;align-items:center;gap:10px}
.ffig-run .rt__name{flex:0 0 33%;width:33%;font:600 11px/1.15 var(--font-sans);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ffig-run .rt__track{position:relative;flex:1 1 auto;height:16px;border-radius:8px;background:var(--tint);
background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 20%)}
/* no padding on the bar itself: padding cannot shrink below itself, so a
not-yet-started bar would sit there as a visible stub instead of nothing */
.ffig-run .rt__bar{position:absolute;top:0;bottom:0;left:var(--x);width:var(--w);border-radius:8px;overflow:hidden;
background:linear-gradient(90deg,var(--accent-lift),var(--accent));box-shadow:0 2px 8px -3px rgba(5,130,255,.55);
animation:ff-grow var(--dur) var(--ease) var(--del) both}
.ffig-run .rt__bar--done{background:linear-gradient(90deg,var(--accent),var(--pos));box-shadow:0 2px 8px -3px rgba(6,122,82,.55)}
.ffig-run .rt__bar b{position:absolute;left:7px;top:50%;transform:translateY(-50%);font:700 8.5px/1 var(--font-mono);letter-spacing:.04em;color:#fff;white-space:nowrap}
.ffig-run .rt__axis{display:flex;align-items:center;gap:10px}
.ffig-run .rt__ticks{flex:1 1 auto;display:flex;justify-content:space-between;font:700 8.5px/1 var(--font-mono);color:var(--ink-4)}
@keyframes ff-grow{from{width:0}}
.ffig-run .rt__st{position:relative;flex:0 0 14px;width:14px;height:14px}
.ffig-run .rt__st .sp{position:absolute;inset:0;border-radius:50%;border:1.6px solid var(--accent);border-top-color:transparent;opacity:0;
animation:ff-spinwin var(--done) linear both,ff-rot .9s linear infinite}
@keyframes ff-spinwin{0%,88%{opacity:1}100%{opacity:0}}
.ffig-run .rt__st .ok{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:var(--pos);color:#fff;
animation:ff-pop .32s var(--ease) var(--done) both}
@keyframes ff-pop{from{opacity:0;transform:scale(.5)}}
.ffig-run .rt__st .ok svg{width:9px;height:9px}
/* the playhead lane spans exactly the track column, so 0-100% here is 0-100% of the axis */
.ffig-run .rt__lane{position:absolute;left:calc(33% + 10px);right:24px;top:0;bottom:0;pointer-events:none;z-index:3}
.ffig-run .rt__play{position:absolute;top:0;bottom:0;left:100%;width:2px;border-radius:2px;opacity:0;
background:linear-gradient(180deg,transparent,var(--accent) 12%,var(--accent) 88%,transparent);
animation:ff-sweep 3.4s linear both}
.ffig-run .rt__play::after{content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px;border-radius:50%;transform:translateX(-50%);background:var(--accent);box-shadow:0 0 0 4px rgba(5,130,255,.16)}
@keyframes ff-sweep{0%{left:0;opacity:0}5%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
.ffig-run .rt__foot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;
font:700 9.5px/1 var(--font-mono);letter-spacing:.05em;color:var(--ink-3)}
.ffig-run .rt__foot b{color:var(--pos)}
@media(max-width:560px){
.ffig-run .rt__name{flex-basis:38%;width:38%;font-size:10px}
.ffig-run .rt__lane{left:calc(38% + 10px)}
.ffig-run .rt__ticks{font-size:8px}
/* the track is too narrow here for an in-bar label to survive uncut */
.ffig-run .rt__bar b{display:none}
}
/* zero customer data egress: the boundary that has no way out */
.ffig-secure .bound{position:absolute;left:0;top:6%;width:63%;height:82%;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.72);box-shadow:var(--lift-1);z-index:1}
.ffig-secure .bound__lbl{position:absolute;left:10px;top:9px;font:700 9px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ffig-secure .pod{position:absolute;z-index:2;transform:translateY(-50%);display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:9px;background:#fff;border:1px solid var(--line);box-shadow:var(--lift-1);font:600 10.5px/1.1 var(--font-sans);color:var(--ink-2);white-space:nowrap}
.ffig-secure .pod svg{width:13px;height:13px;color:var(--accent);flex:0 0 auto}
.ffig-secure .wall{position:absolute;left:66%;top:4%;bottom:4%;width:4px;border-radius:4px;z-index:3;background:linear-gradient(180deg,var(--accent-lift),var(--accent));box-shadow:0 0 18px rgba(5,130,255,.5)}
.ffig-secure .wall__tag{position:absolute;left:9px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;white-space:nowrap;font:700 8.5px/1 var(--font-mono);letter-spacing:.2em;color:var(--accent)}
.ffig-secure .out{position:absolute;right:2%;transform:translateY(-50%);z-index:2;font:600 10.5px/1.1 var(--font-sans);color:var(--ink-3);text-decoration:line-through;text-decoration-color:rgba(238,0,0,.55)}
.ffig-secure .track{position:absolute;left:34%;right:34%;top:50%;z-index:1;border-top:1px dashed var(--line)}
.ffig-secure .stop{position:absolute;top:50%;margin-top:-5px;width:11px;height:11px;border-radius:50%;background:#ee0000;z-index:4;box-shadow:0 0 0 4px rgba(238,0,0,.12);animation:ff-repel 3.2s var(--ease) infinite}
@keyframes ff-repel{0%{left:34%;opacity:0}18%{opacity:1}46%{left:62%}56%{left:62%}86%{left:34%;opacity:1}100%{left:34%;opacity:0}}
.ffig-secure .zero{position:absolute;left:0;bottom:0;font:800 10px/1 var(--font-mono);letter-spacing:.06em;color:var(--pos);background:rgba(6,122,82,.1);border-radius:6px;padding:5px 8px;z-index:3}
/* left lives in CSS (not inline) for the wide pod so the narrow-stage
override below can move it without !important */
.ffig-secure .pod--wide{left:30%}
/* the widest pod would otherwise breach the boundary box on a narrow stage */
@media(max-width:560px){
.ffig-secure .pod{font-size:9.5px;padding:5px 7px;gap:5px}
.ffig-secure .pod svg{width:11px;height:11px}
.ffig-secure .pod--wide{left:13%}
.ffig-secure .out{font-size:9.5px}
}
@media (prefers-reduced-motion: reduce){
.ffig *{animation:none!important}
.ffig-research .thread path{stroke-dashoffset:0}
.ffig-brain .funnel path{stroke-dashoffset:0}
.ff-anim{animation-play-state:running}
}
/* Capabilities mega menu: balanced multi-column so the 7 items pack tightly
(no shared-row height gaps, no lopsided grid cell). */
.menu__list--2col{display:block;columns:2;column-gap:26px}
.menu__list--2col li{break-inside:avoid;-webkit-column-break-inside:avoid}
.menu__list--2col li a{display:block}
.menu--wide .menu__panel{min-width:648px}
@media(max-width:640px){.menu__list--2col{columns:1}}
/* Nav caret fix:
1) global `svg{display:block}` was pushing the dropdown caret onto its own
line below the label, keep the link inline-flex so the caret stays beside the text.
2) the caret must point down when closed and rotate up only when the menu is open. */
.nav__link{display:inline-flex;align-items:center}
.nav__caret{transform:none}
.nav__item--menu:hover .nav__caret{transform:rotate(180deg)}
/* ═══════════════════════════════════════════════════════════════
Platform hero: live "console" visual.
One instruction types in, the agent works step-by-step across
real tools (spinner → green tick), then surfaces a finished
result with "0 bytes egress". Loops. Static/readable without JS.
═══════════════════════════════════════════════════════════════ */
.pcon{position:relative;width:100%;max-width:540px;margin-left:auto;
background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;
font-family:var(--font-sans);
box-shadow:0 30px 70px -34px rgba(10,27,51,.30),0 2px 0 rgba(255,255,255,.6) inset}
/* title bar */
.pcon__bar{display:flex;align-items:center;gap:12px;padding:13px 16px;
border-bottom:1px solid var(--line-soft);
background:linear-gradient(180deg,#f8fbff,#f2f7fd)}
.pcon__lights{display:inline-flex;gap:6px}
.pcon__lights i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.pcon__lights i:nth-child(1){background:#f2b8b8}
.pcon__lights i:nth-child(2){background:#f4ddb0}
.pcon__lights i:nth-child(3){background:#bfe6c8}
.pcon__title{flex:1;font-weight:600;font-size:12.5px;color:var(--ink-3);letter-spacing:.01em}
.pcon__seal{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:10.5px;
letter-spacing:.08em;text-transform:uppercase}
.pcon__seal .dot{width:6px;height:6px}
/* body */
.pcon__body{padding:18px 18px 20px}
/* prompt line */
.pcon__prompt{position:relative;border:1px solid var(--line);border-radius:12px;
padding:11px 14px;background:linear-gradient(180deg,#fbfdff,#f6f9fe)}
.pcon__label{display:block;font-weight:700;font-size:9.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-4);margin-bottom:5px}
.pcon__typed{margin:0;font-weight:600;font-size:15px;line-height:1.4;color:var(--ink);min-height:1.4em}
.pcon__typed::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;
vertical-align:-2px;background:var(--accent);animation:pcon-blink 1s steps(1) infinite}
.pcon.st-run .pcon__typed::after,.pcon.st-done .pcon__typed::after{opacity:0;animation:none}
.pcon__full{display:none}
/* steps */
.pcon__steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.pstep{display:flex;align-items:center;gap:11px;padding:10px 12px;
border:1px solid var(--line);border-radius:11px;background:#fff;
opacity:0;transform:translateY(8px);
transition:opacity .45s var(--ease),transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease)}
.pstep.is-in{opacity:1;transform:none}
.pstep.is-done{border-color:#d7ead9;box-shadow:0 8px 22px -16px rgba(6,122,82,.5)}
.pstep__ico{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
border:1px solid var(--line);color:var(--ink-3);background:#fbfdff}
.pstep__ico svg{width:15px;height:15px}
.pstep.is-done .pstep__ico{color:var(--accent);border-color:var(--accent-lift);background:var(--accent-soft)}
.pstep__text{flex:1;font-weight:600;font-size:13px;color:var(--ink);line-height:1.25}
.pstep__text em{display:block;font-style:normal;font-weight:700;font-size:9.5px;
letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-top:2px}
.pstep__spin{flex:none;width:17px;height:17px;border-radius:50%;
border:2px solid var(--line);border-top-color:var(--accent);animation:pcon-spin .7s linear infinite}
.pstep.is-done .pstep__spin{display:none}
.pstep__tick{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
background:#e7f5ec;color:var(--pos);opacity:0;transform:scale(.5);
transition:opacity .35s var(--ease),transform .35s var(--ease)}
.pstep__tick svg{width:14px;height:14px}
.pstep:not(.is-done) .pstep__tick{display:none}
.pstep.is-done .pstep__tick{opacity:1;transform:none}
/* result card */
.pcon__result{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px;
border-radius:13px;border:1px solid var(--accent-lift);
background:linear-gradient(120deg,var(--accent-soft),#f4f9ff);
opacity:0;transform:translateY(10px);
transition:opacity .5s var(--ease),transform .5s var(--ease)}
.pcon.st-done .pcon__result{opacity:1;transform:none}
.pcon__resIco{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
background:var(--accent);color:#fff;box-shadow:0 8px 20px -8px rgba(5,130,255,.7)}
.pcon__resIco svg{width:19px;height:19px}
.pcon__resBody{display:flex;flex-direction:column;gap:2px}
.pcon__resBody strong{font-weight:700;font-size:14px;color:var(--ink)}
.pcon__resBody span{font-weight:500;font-size:12px;color:var(--ink-2)}
@keyframes pcon-blink{50%{opacity:0}}
@keyframes pcon-spin{to{transform:rotate(360deg)}}
/* reduced motion / no-JS → fully assembled, no spinners or caret */
.pcon.is-static .pcon__typed::after{display:none}
.pcon.is-static .pstep{opacity:1;transform:none}
.pcon.is-static .pstep__spin{display:none}
.pcon.is-static .pstep__tick{display:grid;opacity:1;transform:none}
.pcon.is-static .pcon__result{opacity:1;transform:none}
@media (max-width:600px){.pcon{max-width:100%}.pstep__text{font-size:12.5px}}
/* four-up variant of the stats strip */
.hero__stats--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){.hero__stats--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ═══════════════════════════════════════════════════════════════
Solutions hero: the perimeter.
One sealed wall with the four sectors inside it. Rings expand from
the core and die exactly at the wall: they share the wall's inset
and radius, so scale(1) lands on it precisely at any figure size.
Pure CSS, gated by the shared .ff-anim rule.
═══════════════════════════════════════════════════════════════ */
.ffig-walls{aspect-ratio:1.1/1}
.wl-wall{position:absolute;inset:3%;border-radius:20px;pointer-events:none;
border:1.5px solid rgba(5,130,255,.34);
animation:wl-breathe 6s ease-in-out infinite;animation-play-state:paused}
.wl-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
display:grid;place-items:center;width:66px;height:66px;border-radius:19px;color:#fff;
background:linear-gradient(160deg,var(--accent),var(--accent-hover));
box-shadow:0 14px 34px -10px rgba(5,130,255,.55)}
.wl-core svg{width:30px;height:auto}
.wl-node{position:absolute;transform:translate(-50%,-50%);z-index:2;
display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:10px;
background:#fff;border:1px solid var(--line);box-shadow:var(--lift-1);
font:600 11.5px/1 var(--font-sans);color:var(--ink-2);white-space:nowrap}
.wl-node svg{width:14px;height:14px;color:var(--accent-hover);flex:0 0 auto}
.wl-spokes{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.wl-spokes line{stroke:var(--line);stroke-width:1.1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
/* same box as the wall, grown from the middle, so it can never overshoot it */
.wl-pulse{position:absolute;inset:3%;border-radius:20px;z-index:1;pointer-events:none;opacity:0;
border:1.5px solid var(--accent-lift);
animation:wl-ring 5s var(--ease) infinite;animation-delay:var(--d,0s);animation-play-state:paused}
@keyframes wl-breathe{
0%,100%{border-color:rgba(5,130,255,.28);box-shadow:0 0 0 5px rgba(5,130,255,.03)}
50%{border-color:rgba(5,130,255,.46);box-shadow:0 0 0 11px rgba(5,130,255,.05)}
}
@keyframes wl-ring{
0%,6%{transform:scale(.07);opacity:0}
20%{opacity:.6}
74%{opacity:.13}
88%,100%{transform:scale(1);opacity:0}
}
@media (max-width:560px){
.wl-node{font-size:10px;padding:6px 8px;gap:5px}
.wl-node svg{width:12px;height:12px}
.wl-core{width:56px;height:56px;border-radius:16px}
}
/* ═══════════════════════════════════════════════════════════════
Feature hero figures: capabilities added in the 3.0 content pass
(Presentations, Visualizations, Scheduled Tasks, Browser Use).
Same .ffig shell and .ff-* primitives as the originals above; only
the stage internals are new, so nothing existing is affected.
═══════════════════════════════════════════════════════════════ */
/* presentations: one instruction becomes a built deck.
The rail is the finished deck; the board is the slide being written.
Every element animates in reading order (title → chart → notes) so the
figure reads as *assembly*, not a static mockup of a slide. */
.ffig-deck .deck{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%)}
.ffig-deck .deck__ask{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:var(--lift-1)}
.ffig-deck .deck__ask>svg{width:15px;height:15px;color:var(--accent);flex:0 0 auto}
.ffig-deck .deck__ask .q{font:600 11px/1 var(--font-mono);color:var(--ink);overflow:hidden;white-space:nowrap;width:24ch;animation:ff-type 1.2s steps(24) both}
.ffig-deck .deck__ask .caret{width:1.5px;height:13px;background:var(--accent);animation:ff-blink 1s steps(1) infinite}
/* The body is height-bounded rather than sized by the slide rail. Left to
themselves the 4:3 thumbnails set a very tall row, which the board then
has to fill, either with dead white space or with absurdly heavy bars.
Fixing the row height lets the rail and the board both divide it. */
.ffig-deck .deck__body{display:flex;gap:9px;margin-top:11px;height:clamp(148px,13.5vw,196px)}
.ffig-deck .deck__rail{display:flex;flex-direction:column;gap:7px;width:21%;flex:0 0 auto}
.ffig-deck .deck__rail span{position:relative;flex:1 1 0;min-height:0;border:1px solid var(--line);border-radius:7px;background:#fff;box-shadow:var(--lift-1);
animation:ff-rise .42s var(--ease) both;animation-delay:var(--d)}
.ffig-deck .deck__rail span::after{content:"";position:absolute;left:5px;right:5px;top:6px;height:2.5px;border-radius:2px;background:var(--line)}
.ffig-deck .deck__rail span.on{border-color:var(--accent-lift);box-shadow:0 0 0 3px rgba(5,130,255,.1)}
.ffig-deck .deck__rail span.on::after{background:var(--accent)}
/* the board is a column so the bar area can absorb whatever height the slide
rail sets, otherwise the card stretches to match the rail and the chart
floats in a pool of empty white */
.ffig-deck .deck__board{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--lift-2);padding:12px;overflow:hidden}
.ffig-deck .deck__ttl{height:8px;width:62%;border-radius:4px;background:var(--ink);opacity:.82;animation:ff-rise .4s var(--ease) both .55s}
.ffig-deck .deck__sub{height:5px;width:40%;border-radius:3px;background:var(--line);margin-top:7px;animation:ff-rise .4s var(--ease) both .7s}
/* the bars are the "real numbers pulled from the Company Brain" beat, they grow rather than fade so the chart reads as computed, not drawn */
.ffig-deck .deck__bars{display:flex;align-items:flex-end;gap:6px;flex:1 1 auto;min-height:52px;margin:12px 0 9px}
.ffig-deck .deck__bars i{flex:1 1 0;border-radius:4px 4px 2px 2px;background:var(--accent-soft);border-top:2.5px solid var(--accent-lift);
transform-origin:bottom;height:var(--h);animation:ff-grow .55s var(--ease) both;animation-delay:var(--d)}
.ffig-deck .deck__bars i.hi{background:rgba(5,130,255,.2);border-top-color:var(--accent)}
@keyframes ff-grow{from{transform:scaleY(.04);opacity:0}to{transform:scaleY(1);opacity:1}}
.ffig-deck .deck__note{display:flex;align-items:center;gap:6px;font:700 8.5px/1 var(--font-mono);letter-spacing:.04em;color:var(--ink-3);animation:ff-rise .4s var(--ease) both 1.3s}
.ffig-deck .deck__note svg{width:11px;height:11px;color:var(--pos);flex:0 0 auto}
.ffig-deck .deck__foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--tint);font:700 9.5px/1 var(--font-mono);letter-spacing:.04em;color:var(--ink-3)}
.ffig-deck .deck__foot b{color:var(--pos)}
@media(max-width:560px){
.ffig-deck .deck__ask .q{font-size:10px}
.ffig-deck .deck__bars{height:42px}
.ffig-deck .deck__foot{font-size:8.5px;padding:7px 9px}
}
/* visualizations: a question resolves into a chart *and* its method.
The polyline draws with ff-dash so the series is plotted in front of you;
the method row underneath is the "explainable, not a black box" claim. */
.ffig-viz .viz{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%)}
.ffig-viz .viz__ask{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:var(--lift-1)}
.ffig-viz .viz__ask>svg{width:15px;height:15px;color:var(--accent);flex:0 0 auto}
.ffig-viz .viz__ask .q{font:600 11px/1 var(--font-mono);color:var(--ink);overflow:hidden;white-space:nowrap;width:22ch;animation:ff-type 1.1s steps(22) both}
.ffig-viz .viz__ask .caret{width:1.5px;height:13px;background:var(--accent);animation:ff-blink 1s steps(1) infinite}
.ffig-viz .viz__plot{position:relative;margin-top:11px;padding:12px 12px 9px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--lift-2)}
.ffig-viz .viz__cap{display:flex;align-items:center;justify-content:space-between;font:700 9px/1 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.ffig-viz .viz__cap em{font-style:normal;color:var(--accent);background:var(--accent-soft);border-radius:5px;padding:3px 5px}
.ffig-viz .viz__svg{display:block;width:100%;height:86px}
.ffig-viz .viz__svg .gridln{stroke:var(--line-soft);stroke-width:1}
.ffig-viz .viz__svg .axis{stroke:var(--line);stroke-width:1.2}
/* the band is the confidence interval: it fades in behind the line so the
"forecast, with the statistics shown" claim has something to point at */
.ffig-viz .viz__svg .band{fill:rgba(5,130,255,.09);opacity:0;animation:ff-fade .6s var(--ease) forwards 1.5s}
@keyframes ff-fade{to{opacity:1}}
.ffig-viz .viz__svg .series{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:520;stroke-dashoffset:520;animation:ff-dash 1.5s var(--ease) forwards .55s}
.ffig-viz .viz__svg .fcast{fill:none;stroke:var(--accent-lift);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:5 5;opacity:0;animation:ff-fade .5s var(--ease) forwards 1.9s}
.ffig-viz .viz__svg .dot{fill:#fff;stroke:var(--accent);stroke-width:2.2;opacity:0;animation:ff-fade .3s var(--ease) forwards;animation-delay:var(--d)}
.ffig-viz .viz__meth{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
/* inline-flex + nowrap: the chip is a single token, so the source glyph must
not get to start a line of its own when the figure narrows */
.ffig-viz .viz__meth li{display:inline-flex;align-items:center;white-space:nowrap;font:700 8.5px/1 var(--font-mono);letter-spacing:.03em;color:var(--ink-3);border:1px solid var(--line);border-radius:5px;padding:4px 6px;background:var(--tint);
animation:ff-rise .38s var(--ease) both;animation-delay:var(--d)}
.ffig-viz .viz__meth li svg{width:9px;height:9px;margin-right:4px;flex:0 0 auto;color:var(--accent)}
.ffig-viz .viz__foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--tint);font:700 9.5px/1 var(--font-mono);letter-spacing:.04em;color:var(--ink-3)}
.ffig-viz .viz__foot b{color:var(--pos)}
@media(max-width:560px){
.ffig-viz .viz__ask .q{font-size:10px}
.ffig-viz .viz__svg{height:70px}
.ffig-viz .viz__meth li{font-size:8px}
.ffig-viz .viz__foot{font-size:8.5px;padding:7px 9px}
}
/* scheduled tasks: the same job, running on its own, on time.
Rows carry a state (done / running / queued) rather than all reading alike,
because the point is that it already ran while nobody was watching. */
.ffig-sched .sch{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%)}
.ffig-sched .sch__hd{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:var(--lift-1)}
.ffig-sched .sch__hd>svg{width:15px;height:15px;color:var(--accent);flex:0 0 auto}
.ffig-sched .sch__hd .t{font:700 11px/1 var(--font-mono);color:var(--ink)}
.ffig-sched .sch__hd .rep{margin-left:auto;font:700 8.5px/1 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:5px;padding:4px 6px}
.ffig-sched .sch__list{list-style:none;margin:0;padding:0}
.ffig-sched .sch__list li{position:relative;display:flex;align-items:center;gap:9px;margin-top:7px;padding:9px 11px 9px 13px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:var(--lift-1);
font:600 11px/1.1 var(--font-sans);color:var(--ink-2);overflow:hidden;animation:ff-rise .45s var(--ease) both;animation-delay:var(--d)}
.ffig-sched .sch__list li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line)}
.ffig-sched .sch__list li.done::before{background:var(--pos)}
.ffig-sched .sch__list li.run::before{background:var(--accent)}
.ffig-sched .sch__list li .when{font:700 8.5px/1 var(--font-mono);letter-spacing:.04em;color:var(--ink-4);flex:0 0 auto;width:6.5ch}
.ffig-sched .sch__list li .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ffig-sched .sch__list li .st{margin-left:auto;display:flex;align-items:center;gap:5px;flex:0 0 auto;font:700 8.5px/1 var(--font-mono);letter-spacing:.04em;color:var(--ink-3)}
.ffig-sched .sch__list li .st svg{width:12px;height:12px}
.ffig-sched .sch__list li.done .st{color:var(--pos)}
.ffig-sched .sch__list li.run .st{color:var(--accent)}
/* the running row spins its glyph: one moving part is enough to say
"this is happening now", and it keeps the rest of the list calm */
.ffig-sched .sch__list li.run .st svg{animation:ff-rot 1.1s linear infinite;transform-origin:50% 50%}
.ffig-sched .sch__list li.hold .st{color:var(--ink-4)}
.ffig-sched .sch__foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--tint);font:700 9.5px/1 var(--font-mono);letter-spacing:.04em;color:var(--ink-3)}
.ffig-sched .sch__foot b{color:var(--pos)}
@media(max-width:560px){
.ffig-sched .sch__list li{font-size:10px;padding:8px 9px 8px 11px;gap:7px}
.ffig-sched .sch__list li .st span{display:none}
.ffig-sched .sch__foot{font-size:8.5px;padding:7px 9px}
}
/* browser use: the agent driving a UI that has no API.
A chrome bar, a legacy form, and a cursor that lands on the button: the
claim is literally "it does what a person does", so show the pointer. */
.ffig-browser .brw{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:var(--lift-2);overflow:hidden}
.ffig-browser .brw__chrome{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid var(--line-soft);background:var(--tint)}
.ffig-browser .brw__dots{display:flex;gap:4px;flex:0 0 auto}
.ffig-browser .brw__dots i{width:7px;height:7px;border-radius:50%;background:var(--line);display:block}
.ffig-browser .brw__url{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:#fff;font:600 9.5px/1 var(--font-mono);color:var(--ink-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ffig-browser .brw__url svg{width:10px;height:10px;color:var(--pos);flex:0 0 auto}
.ffig-browser .brw__noapi{flex:0 0 auto;font:700 8px/1 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4);border:1px dashed var(--line);border-radius:5px;padding:4px 5px}
.ffig-browser .brw__body{position:relative;padding:12px}
.ffig-browser .brw__ttl{height:7px;width:44%;border-radius:4px;background:var(--ink);opacity:.78}
.ffig-browser .brw__fields{list-style:none;margin:11px 0 0;padding:0}
.ffig-browser .brw__fields li{display:flex;align-items:center;gap:8px;margin-top:7px;padding:8px 9px;border:1px solid var(--line);border-radius:8px;font:600 10px/1 var(--font-mono);color:var(--ink-4);
animation:ff-rise .4s var(--ease) both;animation-delay:var(--d)}
.ffig-browser .brw__fields li .lb{flex:0 0 auto;width:8ch;color:var(--ink-3)}
/* each value types itself at its own delay, so the form fills top-to-bottom
the way a person would tab through it */
.ffig-browser .brw__fields li .vl{color:var(--ink);overflow:hidden;white-space:nowrap;animation:ff-type .5s steps(12) both;animation-delay:var(--d2)}
.ffig-browser .brw__fields li.ok{border-color:var(--accent-lift);background:rgba(5,130,255,.04)}
.ffig-browser .brw__submit{margin-top:11px;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:8px;background:var(--accent);color:#fff;font:700 10px/1 var(--font-sans);box-shadow:0 8px 20px -10px rgba(5,130,255,.6);
animation:ff-rise .4s var(--ease) both 1.55s}
/* The travel is animated on left/top, not transform: a percentage translate
resolves against the *cursor's* own 15px box, which would move it a couple
of pixels instead of across the form. left/top resolve against the padded
body, so the pointer lands on the button at any figure width, and transform
stays free for the click press. */
.ffig-browser .brw__cursor{position:absolute;left:74%;top:16%;z-index:4;width:15px;height:15px;pointer-events:none;color:var(--ink);
filter:drop-shadow(0 2px 4px rgba(11,18,32,.3));animation:ff-point 3.6s var(--ease) infinite 1.7s}
.ffig-browser .brw__cursor svg{width:100%;height:100%;display:block}
@keyframes ff-point{
0%{left:74%;top:16%;transform:none;opacity:0}
12%{opacity:1}
46%{left:14%;top:84%;transform:none;opacity:1}
56%{left:14%;top:84%;transform:scale(.82)}
68%{left:14%;top:84%;transform:scale(1)}
90%{left:14%;top:84%;opacity:1}
100%{left:14%;top:84%;opacity:0}
}
.ffig-browser .brw__foot{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-top:1px solid var(--line-soft);background:var(--tint);font:700 9.5px/1 var(--font-mono);letter-spacing:.04em;color:var(--ink-3)}
.ffig-browser .brw__foot b{color:var(--pos)}
@media(max-width:560px){
.ffig-browser .brw__noapi{display:none}
.ffig-browser .brw__fields li{font-size:9px}
.ffig-browser .brw__foot{font-size:8.5px;padding:8px 10px}
}
@media (prefers-reduced-motion:reduce){
.ffig-browser .brw__cursor{animation:none;left:14%;top:84%}
.ffig-viz .viz__svg .band,.ffig-viz .viz__svg .fcast,.ffig-viz .viz__svg .dot{opacity:1;animation:none}
.ffig-sched .sch__list li.run .st svg{animation:none}
}
/* ═══════════════════════════════════════════════════════════════
Challenge → Solution case studies
The prem.io-style pair: a dark title bar naming the (anonymised)
customer, then the problem and what changed, labelled so a skim
reader gets the shape without reading either paragraph.
═══════════════════════════════════════════════════════════════ */
.cs{--cs-neg:#b3261e;
border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--lift-2)}
.cs__bar{margin:0;padding:15px 22px;background:var(--deep);color:#fff;font:700 clamp(15px,1.15vw,17px)/1.35 var(--font-sans);letter-spacing:.005em}
.cs__row{padding:18px 22px 20px;border-top:1px solid var(--line)}
.cs__row:first-of-type{border-top:0}
.cs__row--s{background:var(--tint)}
.cs__label{margin:0 0 9px;font:700 10px/1 var(--font-sans);letter-spacing:.15em;text-transform:uppercase}
.cs__row--c .cs__label{color:var(--cs-neg)}
.cs__row--s .cs__label{color:var(--pos)}
.cs__row p{margin:0;font:400 clamp(14.5px,1.02vw,15.5px)/1.66 var(--font-sans);color:var(--ink-2)}
/* the sector eyebrow sits above the customer line, so it must break, scoped to
.cs__bar rather than to one layout, or it runs into the title wherever else
the card is used */
.cs__sector{display:block;margin:0 0 4px;font:700 9.5px/1 var(--font-sans);letter-spacing:.15em;text-transform:uppercase;color:var(--accent-lift)}
/* A metric the doc left bracketed for a citable customer figure. Marked so it
reads as deliberately pending rather than as a broken template token. */
.cs__tbd{border-bottom:1px dotted var(--ink-4);color:var(--ink-3);cursor:help}
/* multi-card layout, used on the Solutions overview */
.cs-grid{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-grid>li{min-width:0;display:flex}
.cs-grid .cs{width:100%;display:flex;flex-direction:column}
/* the solution row grows so cards in a row end level, however uneven the copy */
.cs-grid .cs__row--s{flex:1 1 auto}
@media(max-width:900px){.cs-grid{grid-template-columns:minmax(0,1fr);gap:18px}}
@media(max-width:560px){
.cs__bar{padding:13px 16px}
.cs__row{padding:15px 16px 17px}
}
/* ── homepage rotating strip (prem.io-style carousel) ────────────────────
Not yet placed on the homepage: the recommendations doc gates that on
sign-off. Styles live here so the approved markup can drop straight in. */
.cs-rot{position:relative}
.cs-rot__stage{position:relative}
.cs-rot__item{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(8px);
transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s}
.cs-rot__item[data-on="true"]{position:relative;opacity:1;visibility:visible;transform:none}
.cs-rot__dots{display:flex;justify-content:center;gap:9px;margin-top:22px;padding:0;list-style:none}
.cs-rot__dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer;
transition:background .25s var(--ease),transform .25s var(--ease)}
.cs-rot__dots button[aria-selected="true"]{background:var(--accent);transform:scale(1.35)}
.cs-rot__dots button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
.cs-rot__item{transition:none}
}
/* benchmark methodology panel: sits opposite the GAIA dial on the Platform
page and states how the number was produced, in place of a testimonial */
.bench__method{margin:22px 0 0;display:grid;gap:0}
.bench__method>div{padding:14px 0;border-bottom:1px solid var(--line-soft)}
.bench__method>div:last-child{border-bottom:0;padding-bottom:0}
.bench__method dt{font:700 10.5px/1 var(--font-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--accent-hover)}
.bench__method dd{margin:7px 0 0;font:400 14.5px/1.62 var(--font-sans);color:var(--ink-2)}
/* ═══════════════════════════════════════════════════════════════
ROI / savings calculator
Two panels: the setup on the left, the result on the right, with
an all-vendors table underneath. Every assumption is on screen,
because a number nobody can check is a number nobody will quote.
═══════════════════════════════════════════════════════════════ */
.roi{display:grid;gap:22px;margin-top:44px;grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr)}
@media(max-width:960px){.roi{grid-template-columns:minmax(0,1fr)}}
.roi__panel{border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--lift-2);padding:26px 26px 28px}
.roi__panel h3{margin:0 0 4px;font:700 12px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-hover)}
.roi__panel>p.roi__hint{margin:0 0 22px;font:400 13.5px/1.6 var(--font-sans);color:var(--ink-3)}
.roi__field{margin-top:22px}
.roi__field:first-of-type{margin-top:0}
.roi__label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.roi__label span{font:700 11px/1 var(--font-sans);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.roi__label b{font:700 17px/1 var(--font-display);color:var(--ink)}
.roi input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;background:var(--line);outline:none}
.roi input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 2px 8px rgba(5,130,255,.45);cursor:pointer}
.roi input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 2px 8px rgba(5,130,255,.45);cursor:pointer;border-color:#fff}
.roi input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.roi__presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.roi__presets button{padding:6px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;
font:700 11.5px/1 var(--font-mono);color:var(--ink-3);transition:border-color .18s ease,color .18s ease,background .18s ease}
.roi__presets button:hover{border-color:var(--accent-lift);color:var(--accent-hover)}
.roi__presets button[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent-lift);color:var(--accent-hover)}
.roi__presets button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.roi select,.roi input[type=number]{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;
font:600 14px/1.2 var(--font-sans);color:var(--ink)}
.roi select:focus,.roi input[type=number]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent-lift)}
.roi__inline{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media(max-width:560px){.roi__inline{grid-template-columns:1fr}}
.roi__src{margin:8px 0 0;font:400 11.5px/1.5 var(--font-sans);color:var(--ink-4)}
/* result side */
.roi__panel--out{background:linear-gradient(170deg,var(--tint),#fff 46%)}
.roi__headline{margin:0;font:700 clamp(46px,6.4vw,68px)/1 var(--font-display);color:var(--pos);letter-spacing:-.02em}
.roi__headline small{display:block;margin-top:10px;font:700 12px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.roi__money{margin:18px 0 0;font:700 clamp(24px,2.9vw,32px)/1.15 var(--font-display);color:var(--ink)}
.roi__money span{display:block;margin-top:7px;font:400 13.5px/1.5 var(--font-sans);color:var(--ink-3)}
.roi__split{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:22px}
@media(max-width:480px){.roi__split{grid-template-columns:1fr}}
.roi__cell{border:1px solid var(--line);border-radius:11px;background:#fff;padding:14px 15px}
.roi__cell dt{font:700 10px/1 var(--font-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.roi__cell dd{margin:8px 0 0;font:700 19px/1.15 var(--font-display);color:var(--ink)}
.roi__cell dd em{display:block;margin-top:5px;font:400 11.5px/1.45 var(--font-sans);font-style:normal;color:var(--ink-4)}
.roi__scale{margin:20px 0 0;padding:14px 15px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 11px 11px 0;background:#fff}
.roi__scale p{margin:0;font:400 13px/1.6 var(--font-sans);color:var(--ink-2)}
.roi__scale b{color:var(--ink)}
.roi__close{margin:20px 0 0;font:400 14.5px/1.6 var(--font-sans);color:var(--ink-2)}
.roi__close b{color:var(--ink)}
/* shown instead of a savings figure when the flat cost has not yet been
overtaken; quoting a negative saving as a win is how calculators lose trust */
.roi__note{margin:18px 0 0;padding:14px 15px;border:1px dashed var(--line);border-radius:11px;background:#fff;font:400 13px/1.6 var(--font-sans);color:var(--ink-2)}
/* all-vendors table */
.roi-table{margin-top:26px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--lift-1);overflow-x:auto}
.roi-table table{width:100%;border-collapse:collapse;min-width:640px}
.roi-table caption{text-align:left;padding:18px 20px 0;font:700 12px/1 var(--font-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--accent-hover)}
.roi-table th,.roi-table td{padding:13px 20px;text-align:right;font:600 13.5px/1.3 var(--font-sans);color:var(--ink-2);border-bottom:1px solid var(--line-soft);white-space:nowrap}
.roi-table th:first-child,.roi-table td:first-child{text-align:left;white-space:normal}
.roi-table thead th{font:700 10px/1 var(--font-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.roi-table tbody tr:last-child td{border-bottom:0}
.roi-table tr.is-barie td{background:var(--accent-soft);color:var(--ink);font-weight:700}
.roi-table tr.is-barie td:first-child{border-left:3px solid var(--accent)}
.roi-table .src{display:block;margin-top:3px;font:400 11px/1.4 var(--font-sans);color:var(--ink-4)}
.roi-table .cut{color:var(--pos);font-weight:700}
/* assumptions and method */
.roi-method{margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
.roi-method h3{margin:0 0 12px;font:700 12px/1 var(--font-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.roi-method ul{margin:0;padding:0 0 0 18px}
.roi-method li{margin:0 0 9px;font:400 13.5px/1.65 var(--font-sans);color:var(--ink-2)}
.roi-method li b{color:var(--ink)}
/* ═══════════════════════════════════════════════════════════════
Connector directory and skills catalogue
Both are filter-then-browse lists. Shared control styling, so a
visitor learns the interaction once.
═══════════════════════════════════════════════════════════════ */
.cat__bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:36px}
.cat__search{position:relative;flex:1 1 260px;min-width:0}
.cat__search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-4);pointer-events:none}
.cat__search input{width:100%;box-sizing:border-box;padding:12px 14px 12px 38px;border:1px solid var(--line);border-radius:10px;background:#fff;
font:600 14px/1.2 var(--font-sans);color:var(--ink);box-shadow:var(--lift-1)}
.cat__search input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent-lift)}
.cat__search input::placeholder{color:var(--ink-4);font-weight:500}
.cat__chips{display:flex;flex-wrap:wrap;gap:6px}
.cat__chips button{padding:8px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;
font:700 12px/1 var(--font-sans);color:var(--ink-3);transition:border-color .18s ease,color .18s ease,background .18s ease}
.cat__chips button:hover{border-color:var(--accent-lift);color:var(--accent-hover)}
.cat__chips button[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent-lift);color:var(--accent-hover)}
.cat__chips button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cat__count{margin:16px 0 0;font:600 12.5px/1 var(--font-mono);color:var(--ink-3)}
.cat__ondemand{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:18px 0 0;padding:11px 15px;
border:1px solid var(--accent-lift);border-radius:10px;background:var(--accent-soft)}
.cat__ondemand b{font:700 11px/1.2 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-hover)}
.cat__ondemand span{font:500 13px/1.5 var(--font-sans);color:var(--ink-2)}
/* Catalogue rows, laid out the way the connector catalogue reads in-product:
monogram, name over a one-line description, category, enable affordance. */
.cat__grid{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
.cat__grid li{min-width:0}
.cat__item{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;
background:#fff;box-shadow:var(--lift-1);height:100%;box-sizing:border-box;transition:border-color .18s ease,box-shadow .18s ease}
.cat__item:hover{border-color:var(--accent-lift);box-shadow:var(--lift-2,var(--lift-1))}
.cat__logo{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
background:var(--accent-soft);color:var(--accent-hover);font:700 12px/1 var(--font-sans);letter-spacing:.02em}
.cat__logo[data-c=data]{background:#eef7f1;color:#0a6b46}
.cat__logo[data-c=risk]{background:#fdf2f2;color:#a3261d}
.cat__logo[data-c=dev]{background:#f2f1fb;color:#4b41a8}
.cat__logo[data-c=ops]{background:#fdf5eb;color:#94620f}
.cat__meta{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:2px}
.cat__meta b{font:600 13.5px/1.3 var(--font-sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat__meta em{font-style:normal;font:500 12px/1.45 var(--font-sans);color:var(--ink-3);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat__tag{flex:0 0 auto;font:700 9px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.cat__enable{flex:0 0 auto;padding:6px 12px;border:1px solid var(--accent-lift);border-radius:999px;
background:#fff;font:700 11.5px/1 var(--font-sans);color:var(--accent-hover)}
@media (max-width:520px){
.cat__grid{grid-template-columns:1fr}
.cat__tag{display:none}
}
.cat__empty{margin:22px 0 0;padding:22px;border:1px dashed var(--line);border-radius:12px;background:#fff;text-align:center}
.cat__empty p{margin:0 0 14px;font:400 14.5px/1.6 var(--font-sans);color:var(--ink-2)}
/* before / after, one prompt across three systems */
.ba{display:grid;gap:18px;margin-top:40px;grid-template-columns:1fr 1fr;align-items:stretch}
@media(max-width:820px){.ba{grid-template-columns:1fr}}
.ba__card{border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--lift-1);padding:22px 24px 24px}
.ba__card--after{border-color:var(--accent-lift);box-shadow:var(--lift-blue)}
.ba__tag{margin:0 0 14px;font:700 10.5px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.ba__card--after .ba__tag{color:var(--accent-hover)}
.ba__steps{list-style:none;margin:0;padding:0}
.ba__steps li{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft);font:400 13.5px/1.5 var(--font-sans);color:var(--ink-2)}
.ba__steps li:last-child{border-bottom:0}
.ba__steps i{flex:0 0 auto;width:18px;font:700 11px/1.6 var(--font-mono);font-style:normal;color:var(--ink-4)}
.ba__prompt{margin:0;padding:13px 15px;border-radius:10px;background:var(--deep);color:#fff;font:600 13px/1.5 var(--font-mono)}
.ba__out{list-style:none;margin:14px 0 0;padding:0}
.ba__out li{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line-soft);font:400 13.5px/1.45 var(--font-sans);color:var(--ink-2)}
.ba__out li:last-child{border-bottom:0}
.ba__out svg{flex:0 0 auto;width:15px;height:15px;color:var(--pos)}
.ba__foot{margin:16px 0 0;font:700 11px/1 var(--font-mono);letter-spacing:.05em;color:var(--ink-3)}
.ba__foot b{color:var(--pos)}
/* skills: flagship cards carrying a result line */
.skl{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(298px,1fr))}
.skl li{min-width:0}
.skl__card{display:flex;flex-direction:column;height:100%;box-sizing:border-box;padding:20px 21px 21px;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:var(--lift-1)}
.skl__name{display:inline-flex;align-items:center;gap:7px;margin:0;font:700 13px/1 var(--font-mono);color:var(--accent-hover)}
.skl__name em{font-style:normal;color:var(--ink-4)}
.skl__role{margin-left:auto;font:700 9px/1 var(--font-sans);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4)}
.skl__desc{margin:11px 0 0;font:400 13.5px/1.6 var(--font-sans);color:var(--ink-2)}
.skl__res{display:flex;align-items:flex-start;gap:8px;margin:15px 0 0;padding:11px 12px;border-radius:9px;background:var(--tint);
font:600 12.5px/1.5 var(--font-sans);color:var(--ink)}
.skl__res svg{flex:0 0 auto;width:14px;height:14px;margin-top:2px;color:var(--pos)}
/* build-your-own, given its own weight rather than a bullet */
.byo{display:grid;gap:0;margin-top:44px;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--lift-2);grid-template-columns:1.05fr .95fr}
@media(max-width:860px){.byo{grid-template-columns:1fr}}
.byo__copy{padding:32px 34px;background:var(--deep);color:#fff}
.byo__copy h3{margin:0 0 12px;font:400 clamp(22px,2.3vw,28px)/1.25 var(--font-display);color:#fff}
.byo__copy p{margin:0 0 18px;font:400 14.5px/1.68 var(--font-sans);color:var(--deep-ink)}
.byo__copy .btn{margin-top:2px}
.byo__steps{list-style:none;margin:0;padding:32px 34px;background:#fff}
.byo__steps li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.byo__steps li:last-child{border-bottom:0}
.byo__steps b{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--accent-soft);
font:700 11px/1 var(--font-mono);color:var(--accent-hover)}
.byo__steps span{font:400 13.5px/1.6 var(--font-sans);color:var(--ink-2)}
.byo__steps span i{display:block;font-style:normal;font-weight:700;color:var(--ink);margin-bottom:2px}
/* ═══════════════════════════════════════════════════════════════
Platform hero: the boundary diagram.
Four layers stacked inside one perimeter, sources feeding in from
inside it, and the outbound path drawn as severed. The Platform
page argues architecture, so the figure is architecture rather
than another agent run.
═══════════════════════════════════════════════════════════════ */
.parch{position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--lift-2);
background:radial-gradient(120% 90% at 82% -10%,var(--accent-soft),transparent 58%),#fff}
.parch::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
background-size:30px 30px;-webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 82%);mask-image:radial-gradient(circle at 50% 40%,#000,transparent 82%)}
.parch__bar{position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line);background:var(--tint)}
.parch__bar b{font:700 10.5px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.parch__bar span{margin-left:auto;font:700 9.5px/1 var(--font-mono);letter-spacing:.04em;color:var(--ink-3);
border:1px solid var(--line);border-radius:999px;padding:5px 9px;background:#fff;white-space:nowrap}
.parch__body{position:relative;z-index:2;padding:18px}
/* sources sit inside the perimeter, which is the whole point */
.parch__srcs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.parch__srcs i{font:600 10.5px/1 var(--font-mono);font-style:normal;color:var(--ink-3);border:1px solid var(--line);border-radius:7px;
padding:6px 8px;background:#fff;animation:pa-rise .4s var(--ease) both;animation-delay:var(--d)}
.parch__stack{position:relative;display:grid;gap:8px;padding-left:24px}
/* the spine reads as one system rather than four boxes */
.parch__stack::before{content:"";position:absolute;left:10px;top:14px;bottom:14px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--accent-lift),var(--accent));opacity:.28}
.parch__layer{position:relative;display:grid;grid-template-columns:38px 1fr;align-items:center;gap:10px;
padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--lift-1);
animation:pa-rise .45s var(--ease) both;animation-delay:var(--d)}
.parch__n{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--accent-soft);
font:700 11px/1 var(--font-mono);color:var(--accent-hover)}
.parch__layer h4{margin:0;font:700 12.5px/1.2 var(--font-sans);color:var(--ink)}
.parch__layer p{margin:3px 0 0;font:400 11.5px/1.45 var(--font-sans);color:var(--ink-3)}
@keyframes pa-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
/* the severed outbound path */
.parch__out{display:flex;align-items:center;gap:10px;margin-top:14px;padding:11px 13px;border:1px dashed var(--line);border-radius:12px;background:var(--tint);
animation:pa-rise .45s var(--ease) both 1s}
.parch__cut{position:relative;flex:1 1 auto;height:2px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--ink-4) 0 6px,transparent 6px 12px);opacity:.55}
.parch__cut::after{content:"";position:absolute;left:50%;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;
background:#fff;border:2px solid #b3261e}
.parch__cut::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:2px;margin:-1px 0 0 -4.5px;background:#b3261e;transform:rotate(45deg);z-index:1}
.parch__out b{font:700 10px/1 var(--font-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.parch__out em{font-style:normal;font:700 10px/1 var(--font-mono);letter-spacing:.05em;color:#b3261e;white-space:nowrap}
.parch__foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:11px 18px;border-top:1px solid var(--line);background:var(--tint);
font:700 9.5px/1 var(--font-mono);letter-spacing:.05em;color:var(--ink-3)}
.parch__foot b{color:var(--pos)}
@media(max-width:560px){
.parch__bar span{display:none}
.parch__layer p{font-size:11px}
.parch__out b{display:none}
}
@media (prefers-reduced-motion:reduce){
.parch__srcs i,.parch__layer,.parch__out{animation:none;opacity:1;transform:none}
}
/* ───────── Company Brain hero · five names, one customer ─────────
The lede says the same customer exists in six systems under five
different names. So the figure shows exactly that: five source
screens holding the same account under five spellings, drifting
on their own clocks, matched one by one, then pulled into a
single resolved entity that keeps every source.
Sized in container units so one set of numbers holds from a
phone to the widest column. */
.cb-stage{container-type:inline-size;position:relative;width:100%;aspect-ratio:56/50}
/* the gravity well the screens are eventually pulled into */
.cb-well{position:absolute;left:50%;top:50%;width:34cqw;height:34cqw;margin:-17cqw 0 0 -17cqw;
border-radius:999px;border:1px dashed rgba(5,130,255,.32);opacity:0;transform:scale(.6)}
.ffig-brain.is-match .cb-well{opacity:1;transform:scale(1);
transition:opacity 500ms ease,transform 700ms cubic-bezier(.22,1,.36,1);
animation:cbWell 2.2s ease-in-out 700ms infinite}
@keyframes cbWell{0%,100%{box-shadow:0 0 0 0 rgba(5,130,255,.16)}50%{box-shadow:0 0 0 2.4cqw rgba(5,130,255,0)}}
.ffig-brain.is-merge .cb-well{opacity:0;transform:scale(.5);transition:opacity 500ms ease,transform 600ms ease}
.cb-cnt{position:absolute;left:50%;top:50%;z-index:5;transform:translate(-50%,-50%);text-align:center;
opacity:0;transition:opacity 400ms ease;pointer-events:none;
/* the screens drift over the middle, so the tally needs its own
plane and a scrim or it reads as a broken overlap */
padding:2.4cqw 3.4cqw;border-radius:2cqw;background:rgba(255,255,255,.86);
backdrop-filter:blur(3px);box-shadow:0 1cqw 3cqw -1.4cqw rgba(11,18,32,.28)}
.ffig-brain.is-match .cb-cnt{opacity:1}
.ffig-brain.is-merge .cb-cnt,.ffig-brain.is-res .cb-cnt{opacity:0}
.cb-cnt b{display:block;font:400 7cqw/1 var(--font-display);color:var(--accent);letter-spacing:-.02em}
.cb-cnt span{display:block;margin-top:.6cqw;font:700 1.7cqw/1 var(--font-sans);
letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
/* ── the source screens ── */
.cb-scr{position:absolute;left:var(--x);top:var(--y);width:36cqw;z-index:2;
opacity:0;transform:translateY(4cqw) scale(.94);
transition:opacity 520ms ease var(--d),transform 620ms cubic-bezier(.22,1,.36,1) var(--d),
left 900ms cubic-bezier(.5,0,.2,1),top 900ms cubic-bezier(.5,0,.2,1)}
.ffig-brain.is-in .cb-scr{opacity:1;transform:none}
.cb-scr__in{border-radius:1.9cqw;background:#fff;border:1px solid var(--line);
box-shadow:var(--lift-1);overflow:hidden;transform:rotate(var(--r));
transition:box-shadow 420ms ease,border-color 420ms ease}
.ffig-brain.is-in .cb-scr__in{animation:cbFloat var(--f) ease-in-out infinite}
@keyframes cbFloat{0%,100%{transform:rotate(var(--r)) translateY(0)}
50%{transform:rotate(var(--r)) translateY(-1.5cqw)}}
.cb-scr__bar{display:flex;align-items:center;gap:1.2cqw;padding:1.5cqw 1.9cqw;
border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,#fdfefe,#f7fafd)}
.cb-scr__lg{display:grid;place-items:center;width:2.6cqw;height:2.6cqw;flex:none}
.cb-scr__lg svg{width:100%;height:auto}
.cb-scr__bar b{font:700 1.85cqw/1 var(--font-sans);color:var(--ink-3);letter-spacing:.04em}
.cb-scr__bd{padding:1.9cqw}
.cb-name{display:block;font:700 2.35cqw/1.2 var(--font-mono);color:var(--ink);
padding:.5cqw .8cqw;margin:-.5cqw -.8cqw;border-radius:.7cqw;
transition:background 380ms ease,color 380ms ease,box-shadow 380ms ease}
.cb-meta{display:block;margin-top:1cqw;font:400 1.7cqw/1 var(--font-mono);color:var(--ink-4)}
/* matched: the name is the thing that had to be reconciled, so it
is the thing that lights */
.ffig-brain.is-match .cb-name{background:rgba(5,130,255,.12);color:var(--accent-hover);
box-shadow:inset 0 0 0 1px rgba(5,130,255,.32);transition-delay:var(--m)}
.ffig-brain.is-match .cb-scr__in{border-color:rgba(5,130,255,.5);
box-shadow:0 0 0 1px rgba(5,130,255,.28),0 1.4cqw 3cqw -1.4cqw rgba(5,130,255,.5);
transition-delay:var(--m)}
/* merged: everything is pulled to the middle and handed over */
.ffig-brain.is-merge .cb-scr{left:32%;top:42%;opacity:0;
transform:scale(.26);transition:opacity 460ms ease 260ms,transform 760ms cubic-bezier(.5,0,.2,1),
left 760ms cubic-bezier(.5,0,.2,1),top 760ms cubic-bezier(.5,0,.2,1)}
.ffig-brain.is-merge .cb-scr__in{animation:none}
/* ── the resolved entity ── */
.cb-res{position:absolute;left:50%;top:50%;width:72cqw;z-index:6;
transform:translate(-50%,-50%) scale(.9);opacity:0;
border-radius:2.2cqw;background:#fff;border:1px solid var(--line);box-shadow:var(--lift-2);
overflow:hidden;transition:opacity 480ms ease,transform 640ms cubic-bezier(.34,1.3,.5,1)}
.ffig-brain.is-res .cb-res{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cb-res__hd{display:flex;align-items:center;gap:2cqw;padding:2.6cqw 2.8cqw;
border-bottom:1px solid var(--line-soft)}
.cb-res__ico{display:grid;place-items:center;width:6.4cqw;height:6.4cqw;flex:none;border-radius:1.6cqw;
background:var(--accent);color:#fff;box-shadow:0 1cqw 2.4cqw -1cqw rgba(5,130,255,.8)}
.cb-res__ico svg{width:3.6cqw;height:3.6cqw}
.cb-res__id b{display:block;font:400 3.4cqw/1.15 var(--font-display);color:var(--ink);letter-spacing:-.02em}
.cb-res__id em{display:block;margin-top:.5cqw;font:700 1.7cqw/1 var(--font-sans);font-style:normal;
letter-spacing:.12em;text-transform:uppercase;color:var(--pos)}
.cb-res__names{display:flex;flex-wrap:wrap;align-items:center;gap:.8cqw;
padding:2cqw 2.8cqw;border-bottom:1px solid var(--line-soft)}
.cb-res__names span{font:400 1.75cqw/1 var(--font-mono);color:var(--ink-4);
padding:.7cqw 1cqw;border-radius:.7cqw;background:var(--tint);
opacity:0;transform:translateY(.8cqw)}
.ffig-brain.is-res .cb-res__names span{animation:cbChip 420ms cubic-bezier(.22,1,.36,1) var(--d) forwards}
.cb-res__into{margin-left:auto;font:700 1.6cqw/1 var(--font-sans);font-style:normal;
letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.cb-res__src{display:flex;flex-wrap:wrap;gap:1.1cqw;padding:2.2cqw 2.8cqw;list-style:none}
.cb-res__src li{display:inline-flex;align-items:center;gap:.8cqw;padding:.9cqw 1.4cqw;
border-radius:999px;border:1px solid var(--line);background:var(--tint);
font:700 1.7cqw/1 var(--font-sans);color:var(--ink-3);
opacity:0;transform:translateY(1cqw)}
.ffig-brain.is-res .cb-res__src li{animation:cbChip 460ms cubic-bezier(.22,1,.36,1) var(--d) forwards}
@keyframes cbChip{to{opacity:1;transform:none}}
.cb-res__src svg{width:2.1cqw;height:2.1cqw}
.cb-res__note{padding:0 2.8cqw 2.6cqw;font:400 1.85cqw/1.45 var(--font-sans);color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){
.cb-stage *{animation:none!important;transition:none!important}
.cb-scr{opacity:1;transform:none}
.cb-res{opacity:1;transform:translate(-50%,-50%)}
.cb-res__src li{opacity:1;transform:none}
.cb-well,.cb-cnt{opacity:0}
}
/* Container units keep the composition intact at any width, but they
also shrink the type with it. Below ~420px of stage the labels stop
being readable, so the ratios are re-cut rather than the layout. */
@container (max-width: 420px){
.cb-scr__bar b{font-size:2.6cqw}
.cb-name{font-size:3.2cqw}
.cb-meta{font-size:2.4cqw}
.cb-cnt b{font-size:9cqw}
.cb-cnt span{font-size:2.3cqw}
.cb-res__id b{font-size:4.6cqw}
.cb-res__id em{font-size:2.3cqw}
.cb-res__names span{font-size:2.4cqw}
.cb-res__into{font-size:2.2cqw}
.cb-res__src li{font-size:2.3cqw}
.cb-res__note{font-size:2.5cqw}
}
/* ───────── Agents hero · a run that replans itself ─────────
The copy says an agent holds a goal, not a script, and adjusts on
what came back. So the plan visibly changes mid-run: step 3 comes
back with a variance, and a step nobody scheduled slides into the
timeline to chase it. That inserted row is the whole argument. */
/* .ffig::before paints a grid over the whole card; .ffig__stage used
to lift content above it, so this has to claim the same plane or
the grid shows straight through the dark log strip. */
.ar{container-type:inline-size;position:relative;z-index:2;padding:1cqw 0}
.ar__axis,.ar__row{display:grid;grid-template-columns:22cqw 1fr 5cqw;align-items:center;gap:2cqw}
.ar__ticks{display:flex;justify-content:space-between;font:700 1.7cqw/1 var(--font-mono);color:var(--ink-4)}
.ar__rows{margin-top:1.6cqw}
.ar__row{height:0;opacity:0;overflow:hidden;
transition:height 420ms cubic-bezier(.22,1,.36,1),opacity 340ms ease}
.ar__row.is-shown{height:8.4cqw;opacity:1}
.ar__name{position:relative;font:700 2.1cqw/1.2 var(--font-sans);color:var(--ink-2);
transition:color 300ms ease}
.ar__row.is-run .ar__name{color:var(--ink)}
.ar__added{display:block;margin-top:.5cqw;font:700 1.4cqw/1 var(--font-sans);font-style:normal;
letter-spacing:.1em;text-transform:uppercase;color:var(--accent);opacity:0;
transition:opacity 400ms ease 200ms}
.ar__row.is-shown .ar__added{opacity:1}
.ar__track{position:relative;height:3.2cqw;border-radius:999px;background:#eef2f7}
.ar__bar{position:absolute;top:0;bottom:0;left:var(--x);width:var(--w);border-radius:999px;
display:grid;place-items:center;transform:scaleX(0);transform-origin:left center;
background:linear-gradient(90deg,var(--accent),#7cbcff);
transition:transform 900ms cubic-bezier(.32,0,.28,1),background 340ms ease}
.ar__row.is-run .ar__bar,.ar__row.is-done .ar__bar{transform:scaleX(1)}
.ar__bar b{font:700 1.6cqw/1 var(--font-mono);color:#fff;letter-spacing:.03em;
opacity:0;transition:opacity 300ms ease 260ms}
.ar__row.is-run .ar__bar b,.ar__row.is-done .ar__bar b{opacity:1}
.ar__row--warn.is-done .ar__bar{background:linear-gradient(90deg,#e8a33d,#f2c078)}
/* a live bar needs a head or a half-drawn bar reads as a broken one */
.ar__bar::after{content:"";position:absolute;right:0;top:-.5cqw;bottom:-.5cqw;width:.5cqw;
border-radius:.5cqw;background:#fff;box-shadow:0 0 1.4cqw .35cqw rgba(5,130,255,.85);opacity:0}
.ar__row.is-run .ar__bar::after{opacity:1}
.ar__st{position:relative;display:grid;place-items:center;width:4cqw;height:4cqw}
.ar__st i{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity 300ms ease}
.ar__sp{border:.45cqw solid var(--line);border-top-color:var(--accent);border-radius:999px;
animation:arSpin 700ms linear infinite}
@keyframes arSpin{to{transform:rotate(360deg)}}
.ar__ok{color:var(--pos)}.ar__ok svg{width:2.6cqw;height:2.6cqw}
.ar__warn{border-radius:999px;background:#e8a33d;color:#fff;font:700 2.2cqw/1 var(--font-sans)}
.ar__row.is-run .ar__sp{opacity:1}
.ar__row.is-done .ar__ok{opacity:1}
.ar__row--warn.is-done .ar__ok{opacity:0}
.ar__row--warn.is-done .ar__warn{opacity:1}
/* every call, with its arguments and its result */
.ar__log{display:flex;align-items:baseline;gap:1.6cqw;margin-top:2.4cqw;padding:1.8cqw 2.2cqw;
border-radius:1.4cqw;background:#0b1220;min-height:6cqw;overflow:hidden}
.ar__log code{flex:1;font:400 1.75cqw/1.4 var(--font-mono);color:#9fd0ff;
word-break:break-all;transition:opacity 220ms ease}
.ar__log em{font:700 1.65cqw/1.4 var(--font-mono);font-style:normal;color:#5fd0a3;white-space:nowrap;
transition:opacity 220ms ease}
.ar.is-warn .ar__log em{color:#f2c078}
.ar__foot{display:flex;align-items:center;justify-content:space-between;gap:2cqw;
margin-top:2cqw;font:700 1.8cqw/1 var(--font-mono);color:var(--ink-3)}
.ar__foot b{color:var(--ink)}
.ar__foot i{font-style:normal;transition:color 300ms ease}
.ar.is-replanned .ar__foot i{color:var(--accent)}
.ar__eg{color:var(--pos)!important}
@media (prefers-reduced-motion:reduce){
.ar *{animation:none!important;transition:none!important}
.ar__row{height:8.4cqw;opacity:1}
.ar__bar{transform:scaleX(1)}
.ar__bar b,.ar__added{opacity:1}
.ar__sp{display:none}
.ar__ok{opacity:1}
}
/* ───────── Connectors hero · one instruction, six jobs ─────────
The lede promises Barie does the job *inside* the tools: reading
records, updating fields, running analysis, starting workflows. A
wheel of logos only shows connection, so each node here reports
what it actually did, in the tool's own terms. */
.cn{container-type:inline-size;position:relative;z-index:2;height:100%;
display:flex;flex-direction:column;gap:2cqw}
.cn__ask{display:flex;align-items:center;gap:.4cqw;padding:1.8cqw 2.2cqw;border-radius:1.4cqw;
border:1px solid var(--line);background:#fff;box-shadow:var(--lift-1);
font:600 2cqw/1.3 var(--font-sans);color:var(--ink);min-height:6.4cqw}
.cn__caret{width:.35cqw;height:2.2cqw;background:var(--accent);opacity:0}
.cn.is-ask .cn__caret{animation:cnCaret 900ms steps(1) infinite}
@keyframes cnCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
.cn__wheel{position:relative;flex:1;min-height:0}
.cn__ring{position:absolute;left:50%;top:50%;width:62%;height:62%;transform:translate(-50%,-50%);
border-radius:999px;border:1px dashed rgba(5,130,255,.28);opacity:0;transition:opacity 500ms ease}
.cn.is-send .cn__ring{opacity:1;animation:cnRing 2.6s ease-in-out infinite}
@keyframes cnRing{0%,100%{box-shadow:0 0 0 0 rgba(5,130,255,.14)}50%{box-shadow:0 0 0 2.6cqw rgba(5,130,255,0)}}
.cn__spokes{position:absolute;inset:0;width:100%;height:100%}
.cn__spokes line{stroke:var(--line);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;
transition:stroke-dashoffset 520ms cubic-bezier(.3,0,.2,1) var(--d),stroke 400ms ease var(--d)}
.cn__spokes line{pathLength:1}
.cn.is-send .cn__spokes line{stroke-dashoffset:0;stroke:rgba(5,130,255,.42)}
/* the instruction travelling out */
.cn__pulse{position:absolute;left:50%;top:50%;width:1.7cqw;height:1.7cqw;margin:-.85cqw 0 0 -.85cqw;
border-radius:999px;background:var(--accent);opacity:0;
box-shadow:0 0 1.6cqw .3cqw rgba(5,130,255,.9)}
.cn.is-send .cn__pulse{animation:cnFly 620ms cubic-bezier(.35,0,.2,1) var(--d) both}
@keyframes cnFly{0%{opacity:0;transform:translate(0,0) scale(.5)}
18%{opacity:1;transform:scale(1)}
100%{opacity:0;transform:translate(calc(var(--tx) - 50%),calc(var(--ty) - 50%)) scale(.7)}}
/* the nodes report their own work */
.cn__node{position:absolute;transform:translate(-50%,-50%);display:grid;gap:.6cqw;
padding:1.3cqw 1.7cqw;border-radius:1.3cqw;background:#fff;border:1px solid var(--line);
box-shadow:var(--lift-1);white-space:nowrap;
transition:border-color 340ms ease,box-shadow 340ms ease,transform 420ms cubic-bezier(.34,1.35,.5,1)}
.cn__node.is-work{border-color:rgba(5,130,255,.5);
box-shadow:0 0 0 1px rgba(5,130,255,.3),0 1.6cqw 3.4cqw -1.6cqw rgba(5,130,255,.6)}
.cn__node.is-done{border-color:rgba(6,122,82,.4);transform:translate(-50%,-50%) scale(1.03)}
.cn__head{display:flex;align-items:center;gap:.9cqw;font:600 1.95cqw/1 var(--font-sans);color:var(--ink)}
.cn__head svg{width:2.2cqw;height:2.2cqw;flex:none}
.cn__head i{position:relative;width:1.9cqw;height:1.9cqw;flex:none;opacity:0;transition:opacity 260ms ease}
.cn__sp{border:.32cqw solid var(--line);border-top-color:var(--accent);border-radius:999px;
animation:cnSpin 700ms linear infinite}
@keyframes cnSpin{to{transform:rotate(360deg)}}
.cn__ok{color:var(--pos)}.cn__ok svg{width:1.9cqw;height:1.9cqw}
.cn__node.is-work .cn__sp{opacity:1}
.cn__node.is-done .cn__ok{opacity:1}
/* the action line is the payload: it stays collapsed until the tool
has actually done something, so the wheel is not pre-answering */
.cn__act{display:block;max-height:0;overflow:hidden;opacity:0;
font:400 1.6cqw/1.2 var(--font-mono);color:var(--pos);
transition:max-height 380ms cubic-bezier(.22,1,.36,1),opacity 320ms ease}
.cn__node.is-done .cn__act{max-height:3cqw;opacity:1}
.cn__hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
display:grid;place-items:center;padding:1.8cqw 2.6cqw;border-radius:1.6cqw;
background:var(--accent);color:#fff;font:700 2.2cqw/1 var(--font-sans);
box-shadow:0 1.6cqw 3.4cqw -1.4cqw rgba(5,130,255,.9);transition:transform 420ms cubic-bezier(.34,1.4,.5,1)}
.cn.is-send .cn__hub{animation:cnHub 700ms cubic-bezier(.34,1.4,.5,1)}
@keyframes cnHub{0%{transform:translate(-50%,-50%) scale(1)}
40%{transform:translate(-50%,-50%) scale(1.09)}100%{transform:translate(-50%,-50%) scale(1)}}
.cn__foot{display:flex;align-items:center;justify-content:space-between;gap:2cqw;
font:700 1.75cqw/1 var(--font-mono);color:var(--ink-3)}
.cn__foot b{color:var(--ink)}
.cn__no{color:var(--pos)!important}
@media (prefers-reduced-motion:reduce){
.cn *{animation:none!important;transition:none!important}
.cn__pulse,.cn__sp{display:none}
.cn__spokes line{stroke-dashoffset:0}
.cn__act{max-height:3cqw;opacity:1}
.cn__ok{opacity:1}
}
/* ───────── Skills hero · type it, run it, same every time ─────────
The lede promises "type / and it runs: the same way every time,
whoever launches it". So the palette actually filters as it types,
actually runs, and closes on the determinism claim: a different
launcher each loop, identical output. */
.sk{container-type:inline-size;position:relative;z-index:2;height:100%;display:grid;place-items:center}
.sk__box{display:grid;width:100%;border-radius:2cqw;background:#fff;border:1px solid var(--line);
box-shadow:var(--lift-2);overflow:hidden;min-height:46cqw}
.sk__view{grid-area:1/1;display:flex;flex-direction:column;
transition:opacity 380ms ease,transform 460ms cubic-bezier(.22,1,.36,1)}
.sk__view--run{opacity:0;transform:translateY(2cqw);pointer-events:none}
.sk.is-run .sk__view--pal{opacity:0;transform:translateY(-2cqw);pointer-events:none}
.sk.is-run .sk__view--run{opacity:1;transform:none}
.sk__in,.sk__hd{display:flex;align-items:center;gap:1.4cqw;padding:2.6cqw 2.8cqw;
border-bottom:1px solid var(--line-soft)}
.sk__slash{display:grid;place-items:center;width:4.2cqw;height:4.2cqw;flex:none;border-radius:1cqw;
background:var(--accent-soft);color:var(--accent-hover);font:700 2.4cqw/1 var(--font-mono)}
.sk__q,.sk__hd b{font:700 2.6cqw/1 var(--font-mono);color:var(--ink);letter-spacing:.02em}
.sk__caret{width:.35cqw;height:3cqw;background:var(--accent)}
.sk.is-type .sk__caret{animation:skCaret 900ms steps(1) infinite}
@keyframes skCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
.sk__badge{margin-left:auto;padding:.8cqw 1.6cqw;border-radius:999px;background:var(--accent-soft);
color:var(--accent-hover);font:700 1.6cqw/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase}
.sk.is-done .sk__badge{background:rgba(6,122,82,.1);color:var(--pos)}
/* the list actually narrows as the query is typed */
.sk__list{flex:1;list-style:none;padding:1.2cqw 0}
.sk__list li{display:flex;align-items:center;gap:1.2cqw;padding:1.5cqw 2.8cqw;
font:400 2.3cqw/1 var(--font-mono);color:var(--ink-2);
animation:skIn 300ms cubic-bezier(.22,1,.36,1) both}
@keyframes skIn{0%{opacity:0;transform:translateY(1.2cqw)}100%{opacity:1;transform:none}}
.sk__list li .k{color:var(--ink-4)}
.sk__list li mark{background:rgba(5,130,255,.16);color:var(--accent-hover);border-radius:.4cqw;padding:0 .2cqw}
.sk__list li.on{background:var(--accent-soft);color:var(--accent-hover);font-weight:700}
.sk__list li.on .k{color:var(--accent-hover)}
.sk__list li .ret{margin-left:auto;font-size:1.9cqw;opacity:0}
.sk__list li.on .ret{opacity:1;animation:skRet 900ms ease-in-out infinite}
@keyframes skRet{0%,100%{transform:translateX(0)}50%{transform:translateX(.5cqw)}}
/* the run */
.sk__steps{flex:1;list-style:none;padding:1.2cqw 0}
.sk__steps li{display:flex;align-items:center;gap:1.4cqw;padding:1.5cqw 2.8cqw;
font:400 2.2cqw/1 var(--font-sans);color:var(--ink-4);
transition:color 300ms ease}
.sk__steps li.is-run,.sk__steps li.is-done{color:var(--ink)}
.sk__steps li em{margin-left:auto;font:400 1.7cqw/1 var(--font-mono);font-style:normal;color:var(--ink-4)}
.sk__steps li i{position:relative;width:2.4cqw;height:2.4cqw;flex:none;opacity:0;transition:opacity 240ms ease}
.sk__sp{border:.36cqw solid var(--line);border-top-color:var(--accent);border-radius:999px;
animation:skSpin 700ms linear infinite}
@keyframes skSpin{to{transform:rotate(360deg)}}
.sk__ok{position:absolute;color:var(--pos)}.sk__ok svg{width:2.4cqw;height:2.4cqw}
.sk__steps li.is-run .sk__sp{opacity:1}
.sk__steps li.is-done .sk__ok{opacity:1}
.sk__foot{display:flex;align-items:center;justify-content:space-between;gap:2cqw;
padding:2cqw 2.8cqw;border-top:1px solid var(--line-soft);background:var(--tint);
font:400 1.8cqw/1 var(--font-mono);color:var(--ink-3)}
.sk__foot b{color:var(--ink)}
.sk__hint{color:var(--ink-4)}
.sk__who{display:flex;align-items:center;gap:1.2cqw}
.sk__who i{display:grid;place-items:center;width:4cqw;height:4cqw;border-radius:999px;
background:var(--accent);color:#fff;font:700 1.6cqw/1 var(--font-sans);font-style:normal}
.sk__same{color:var(--pos);opacity:0;transition:opacity 400ms ease}
.sk.is-done .sk__same{opacity:1}
@media (prefers-reduced-motion:reduce){
.sk *{animation:none!important;transition:none!important}
.sk__view--run{opacity:0}
.sk__caret{opacity:1}
}
/* ───────── Deep Research hero · question in, cited briefing out ─────
The lede promises four things: a hard question broken into subtasks,
worked in parallel, reconciled into one briefing, with every claim
carried back to its source. The last one is the differentiator, so
each citation lands paired with a flash on the source it came from. */
.dr{container-type:inline-size;position:relative;z-index:2;height:100%;
display:flex;flex-direction:column;gap:2.2cqw}
.dr__ask{display:flex;align-items:center;gap:.4cqw;padding:1.8cqw 2.2cqw;border-radius:1.3cqw;
border:1px solid var(--line);background:#fff;box-shadow:var(--lift-1);
font:600 2cqw/1.3 var(--font-sans);color:var(--ink);min-height:6cqw}
.dr__caret{width:.35cqw;height:2.2cqw;background:var(--accent);opacity:0}
.dr.is-ask .dr__caret{animation:drCaret 900ms steps(1) infinite}
@keyframes drCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
/* the question broken up */
.dr__subs{display:flex;flex-wrap:wrap;gap:1cqw;list-style:none;min-height:4.6cqw}
.dr__subs li{padding:.9cqw 1.5cqw;border-radius:999px;background:var(--accent-soft);
color:var(--accent-hover);font:700 1.6cqw/1 var(--font-sans);
opacity:0;transform:translateY(1cqw) scale(.94)}
.dr.is-split .dr__subs li{animation:drChip 460ms cubic-bezier(.34,1.35,.5,1) var(--d) forwards}
@keyframes drChip{to{opacity:1;transform:none}}
/* both columns hug their content and centre against each other; letting
the brief card stretch leaves a void under the last claim */
.dr__main{flex:1;display:grid;grid-template-columns:40% 1fr;gap:2.4cqw;
align-items:center;min-height:0}
.dr__srcs{display:flex;flex-direction:column;justify-content:center;gap:2cqw}
.dr__src{padding:1.5cqw 1.7cqw;border-radius:1.2cqw;background:#fff;border:1px solid var(--line);
box-shadow:var(--lift-1);transition:border-color 300ms ease,box-shadow 300ms ease}
.dr__src.is-cited{border-color:rgba(5,130,255,.55);
box-shadow:0 0 0 1px rgba(5,130,255,.35),0 1.4cqw 3cqw -1.4cqw rgba(5,130,255,.7)}
.dr__srch{display:flex;align-items:center;gap:.9cqw;font:700 1.85cqw/1 var(--font-sans);color:var(--ink)}
.dr__srch svg{width:2.1cqw;height:2.1cqw;flex:none}
.dr__src--g .dr__srch svg{color:var(--accent)}
.dr__srch em{margin-left:auto;font:400 1.5cqw/1 var(--font-mono);font-style:normal;color:var(--ink-4)}
.dr__prog{display:block;margin-top:1.1cqw;height:.7cqw;border-radius:999px;background:#eef2f7;overflow:hidden}
.dr__prog i{display:block;height:100%;border-radius:999px;transform:scaleX(0);transform-origin:left center;
background:linear-gradient(90deg,var(--accent),#7cbcff)}
/* the three subtasks genuinely overlap: that is what parallel means */
.dr.is-work .dr__prog i{animation:drFill var(--dur) cubic-bezier(.32,0,.28,1) forwards}
@keyframes drFill{to{transform:scaleX(1)}}
.dr__brief{display:flex;flex-direction:column;padding:1.8cqw 2cqw;border-radius:1.4cqw;
background:#fff;border:1px solid var(--line);box-shadow:var(--lift-2)}
.dr__bh{font:700 1.95cqw/1 var(--font-sans);color:var(--ink);
padding-bottom:1.4cqw;border-bottom:1px solid var(--line-soft);
opacity:0;transition:opacity 400ms ease}
.dr.is-write .dr__bh{opacity:1}
.dr__claims{list-style:none;display:flex;flex-direction:column;gap:1.9cqw;padding-top:1.6cqw}
.dr__claims li{display:flex;align-items:baseline;gap:1cqw;
font:400 1.75cqw/1.35 var(--font-sans);color:var(--ink-2);
clip-path:inset(0 100% 0 0);transition:clip-path 620ms cubic-bezier(.3,0,.2,1)}
.dr__claims li.is-in{clip-path:inset(0 0 0 0)}
/* the citation is the payload, so it arrives after its claim, not with it */
.dr__cite{margin-left:auto;padding:.3cqw .9cqw;border-radius:.6cqw;background:var(--accent-soft);
color:var(--accent-hover);font:700 1.5cqw/1.35 var(--font-mono);
opacity:0;transform:scale(.7);transition:opacity 300ms ease,transform 420ms cubic-bezier(.34,1.5,.5,1)}
.dr__claims li.is-cited .dr__cite{opacity:1;transform:none}
.dr__foot{display:flex;align-items:center;justify-content:space-between;gap:2cqw;
font:700 1.7cqw/1 var(--font-mono);color:var(--ink-3)}
.dr__foot b{color:var(--ink)}
.dr__ok{color:var(--pos)!important}
@media (prefers-reduced-motion:reduce){
.dr *{animation:none!important;transition:none!important}
.dr__subs li{opacity:1;transform:none}
.dr__prog i{transform:scaleX(1)}
.dr__bh{opacity:1}
.dr__claims li{clip-path:none}
.dr__cite{opacity:1;transform:none}
}
/* Same reason as the Company Brain hero: container units keep the
composition but shrink the type with it. Re-cut the ratios, not
the layout, once the stage drops below ~420px. */
@container (max-width: 420px){
.dr__ask{font-size:2.7cqw}
.dr__subs li{font-size:2.2cqw}
.dr__srch{font-size:2.5cqw}
.dr__srch em{font-size:2cqw}
.dr__bh{font-size:2.6cqw}
.dr__claims li{font-size:2.35cqw}
.dr__cite{font-size:2cqw}
.dr__foot{font-size:2.3cqw}
}
/* ───────── Data Visualizations hero: the question picks the chart ───
The lede names three kinds of answer: trends, correlations,
forecasts. So the question changes on every pass and the chart type
changes with it, and the method line underneath changes too. One
chart shape repeated forever would be arguing that the answer is
always the same shape, which is the opposite of the claim. */
.vz{container-type:inline-size;position:relative;z-index:2;height:100%;
display:flex;flex-direction:column;justify-content:center;gap:2.4cqw}
.vz__ask{display:flex;align-items:center;gap:1.4cqw;padding:1.9cqw 2.2cqw;border-radius:1.3cqw;
border:1px solid var(--line);background:#fff;box-shadow:var(--lift-1);
font:700 2.1cqw/1 var(--font-mono);color:var(--ink);min-height:6.2cqw}
.vz__ask>svg{width:2.6cqw;height:2.6cqw;flex:none;color:var(--accent)}
.vz__caret{width:.35cqw;height:2.4cqw;background:var(--accent);opacity:0}
.vz.is-ask .vz__caret{animation:vzCaret 900ms steps(1) infinite}
@keyframes vzCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
.vz__srcs{margin-left:auto;display:flex;gap:.7cqw}
.vz__srcs i{width:1.5cqw;height:1.5cqw;border-radius:999px;background:var(--line);
transition:background 260ms ease,box-shadow 260ms ease}
.vz.is-read .vz__srcs i{background:var(--accent);
box-shadow:0 0 .9cqw .2cqw rgba(5,130,255,.6);transition-delay:var(--d)}
.vz__plot{display:flex;flex-direction:column;padding:2cqw 2.2cqw;border-radius:1.4cqw;
border:1px solid var(--line);background:#fff;box-shadow:var(--lift-2)}
.vz__cap{display:flex;align-items:center;justify-content:space-between;gap:1.6cqw;
font:700 1.6cqw/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.vz__cap em{font-style:normal;padding:.5cqw 1.1cqw;border-radius:.6cqw;flex:none;
background:var(--accent-soft);color:var(--accent-hover)}
/* preserveAspectRatio is none so the plot can fill the column; the
canvas has to hold the viewBox ratio or every circle is an ellipse */
.vz__canvas{position:relative;aspect-ratio:260/86;margin-top:1.6cqw}
.vz__svg{display:block;width:100%;height:100%}
.vz__grid,.vz__axis{stroke:#eef2f7;stroke-width:1;opacity:0;transition:opacity 400ms ease}
.vz__axis{stroke:var(--line)}
.vz.is-grid .vz__grid{opacity:1;transition-delay:calc(var(--i) * 110ms)}
.vz.is-grid .vz__axis{opacity:1}
/* only the view the question asked for is mounted */
.vz__v{opacity:0;pointer-events:none;transition:opacity 300ms ease}
.vz__v[data-on]{opacity:1}
/* trend */
/* the fill follows the line rather than racing ahead of it: an area
that reaches the right edge while the line is still at 60% reads
as a half-drawn chart */
.vz__area{fill:rgba(5,130,255,.12);opacity:0;transition:opacity 520ms ease 950ms}
.vz__v[data-on] .vz__area{opacity:1}
.vz__line{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:1;stroke-dashoffset:1}
.vz__v[data-on] .vz__line{stroke-dashoffset:0;transition:stroke-dashoffset 1100ms cubic-bezier(.32,0,.28,1)}
.vz__dot{fill:#fff;stroke:var(--accent);stroke-width:2.2;
opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.vz__v[data-on] .vz__dot{opacity:1;transform:scale(1);
transition:opacity 260ms ease,transform 420ms cubic-bezier(.34,1.5,.5,1);
transition-delay:calc(360ms + var(--d))}
/* correlation */
.vz__fit{stroke:var(--accent);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;opacity:.55}
.vz__v[data-on] .vz__fit{stroke-dashoffset:0;transition:stroke-dashoffset 900ms cubic-bezier(.32,0,.28,1) 620ms}
.vz__pt{fill:var(--accent);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3)}
.vz__v[data-on] .vz__pt{opacity:.8;transform:scale(1);
transition:opacity 240ms ease,transform 400ms cubic-bezier(.34,1.5,.5,1);
transition-delay:var(--d)}
/* forecast */
.vz__bar{fill:var(--accent);transform-box:fill-box;transform-origin:bottom center;transform:scaleY(0)}
.vz__v[data-on] .vz__bar{transform:scaleY(1);
transition:transform 520ms cubic-bezier(.34,1.25,.5,1);transition-delay:var(--d)}
.vz__bar--f{fill:#a9d2ff}
.vz__band2{fill:rgba(5,130,255,.1);opacity:0;transform-box:fill-box;transform-origin:left center;
transform:scaleX(.2)}
.vz__v[data-on] .vz__band2{opacity:1;transform:scaleX(1);
transition:opacity 400ms ease 460ms,transform 700ms cubic-bezier(.22,1,.36,1) 460ms}
.vz__meth{display:flex;flex-wrap:wrap;gap:1cqw;list-style:none;margin-top:1.8cqw}
.vz__meth li{display:inline-flex;align-items:center;gap:.7cqw;padding:.9cqw 1.3cqw;
border-radius:.8cqw;border:1px solid var(--line);background:var(--tint);
font:400 1.6cqw/1 var(--font-mono);color:var(--ink-3);white-space:nowrap;
opacity:0;transform:translateY(1cqw)}
.vz__meth svg{width:1.8cqw;height:1.8cqw}
.vz.is-method .vz__meth li{animation:vzChip 440ms cubic-bezier(.34,1.35,.5,1) var(--d) forwards}
@keyframes vzChip{to{opacity:1;transform:none}}
.vz__foot{display:flex;align-items:center;justify-content:space-between;gap:2cqw;
font:700 1.7cqw/1 var(--font-mono);color:var(--ink-3)}
.vz__foot b{color:var(--pos)}
.vz__tr{transition:color 340ms ease}
.vz.is-method .vz__tr{color:var(--pos)}
@container (max-width: 420px){
.vz__ask{font-size:2.7cqw}.vz__cap{font-size:2.1cqw}
.vz__meth li{font-size:2.05cqw}.vz__foot{font-size:2.2cqw}
}
@media (prefers-reduced-motion:reduce){
.vz *{animation:none!important;transition:none!important}
.vz__grid,.vz__axis,.vz__area{opacity:1}
.vz__line,.vz__fit{stroke-dashoffset:0}
.vz__dot,.vz__pt{opacity:1;transform:scale(1)}
.vz__bar{transform:scaleY(1)}
.vz__band2{opacity:1;transform:scaleX(1)}
.vz__meth li{opacity:1;transform:none}
}
/* ───────── AI Presentations hero: a deck, not a starting point ─────
The lede promises a finished deck with the argument written and the
numbers pulled. One slide cannot make that case, so four are built
in turn: title, chart, argument, table. Choreography is Premium
(80ms stagger, one easing family), with each slide's own content
staggering in after the board has settled on it. */
.dk{container-type:inline-size;position:relative;z-index:2;height:100%;
display:flex;flex-direction:column;justify-content:center;gap:2.2cqw}
.dk__ask{display:flex;align-items:center;gap:1.4cqw;padding:1.9cqw 2.2cqw;border-radius:1.3cqw;
border:1px solid var(--line);background:#fff;box-shadow:var(--lift-1);
font:700 2.1cqw/1 var(--font-mono);color:var(--ink);min-height:6.2cqw}
.dk__ask>svg{width:2.6cqw;height:2.6cqw;flex:none;color:var(--accent)}
.dk__caret{width:.35cqw;height:2.4cqw;background:var(--accent);opacity:0}
.dk.is-ask .dk__caret{animation:dkCaret 900ms steps(1) infinite}
@keyframes dkCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
.dk__body{display:grid;grid-template-columns:16cqw 1fr;gap:2cqw;align-items:start}
/* the rail is the deck taking shape: one thumbnail per slide produced */
.dk__rail{display:flex;flex-direction:column;gap:1.4cqw}
.dk__th{position:relative;display:block;aspect-ratio:16/10;border-radius:.9cqw;
border:1px solid var(--line);background:#fff;box-shadow:var(--lift-1);overflow:hidden;
opacity:0;transform:translateY(1.4cqw) scale(.94);
transition:opacity 340ms ease,transform 420ms cubic-bezier(.4,0,.2,1),
border-color 300ms ease,box-shadow 300ms ease}
.dk.is-outline .dk__th{opacity:1;transform:none;transition-delay:var(--d)}
.dk__th i{position:absolute;left:12%;height:6%;border-radius:1cqw;background:#e4eaf2}
.dk__th i:nth-child(1){top:24%;width:62%}
.dk__th i:nth-child(2){top:44%;width:44%}
.dk__th--c i:nth-child(2),.dk__th--g i:nth-child(2){top:50%;height:26%;width:64%;border-radius:.3cqw}
.dk__th--a i:nth-child(2){top:46%;width:70%}
/* the selected slide lifts toward the board it is showing */
.dk__th[data-on]{border-color:var(--accent);
box-shadow:0 0 0 1px var(--accent),0 1.4cqw 3cqw -1.4cqw rgba(5,130,255,.75);
transform:translateX(.6cqw)}
.dk__th[data-on] i{background:#bcd9ff}
.dk__board{position:relative;aspect-ratio:16/9.4;padding:2.4cqw 2.6cqw;border-radius:1.3cqw;
border:1px solid var(--line);background:#fff;box-shadow:var(--lift-2);overflow:hidden}
.dk__s{position:absolute;inset:0;padding:2.4cqw 2.6cqw;display:flex;flex-direction:column;
opacity:0;transform:translateY(1.2cqw);pointer-events:none;
transition:opacity 320ms ease,transform 420ms cubic-bezier(.4,0,.2,1)}
.dk__s[data-on]{opacity:1;transform:none}
.dk__kick{font:700 1.5cqw/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.dk__h1{margin-top:1.4cqw;font:400 4.6cqw/1.1 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.dk__h2{margin-top:1.2cqw;font:400 1.9cqw/1.3 var(--font-sans);color:var(--ink-3)}
.dk__h3{font:700 2.1cqw/1 var(--font-sans);color:var(--ink)}
.dk__bars{flex:1;display:flex;align-items:flex-end;gap:1.6cqw;margin-top:2cqw;padding-bottom:.6cqw}
.dk__bar{flex:1;height:var(--h);border-radius:.5cqw .5cqw 0 0;background:#dbeafe;
border-top:.4cqw solid #7cbcff;transform-box:fill-box;transform:scaleY(0);transform-origin:bottom}
.dk__bar--hi{background:#bfdbfe;border-top-color:var(--accent)}
.dk__s[data-on] .dk__bar{transform:scaleY(1);
transition:transform 520ms cubic-bezier(.34,1.2,.5,1);transition-delay:calc(240ms + var(--d))}
.dk__note{display:flex;align-items:center;gap:.8cqw;margin-top:1.2cqw;
font:400 1.55cqw/1 var(--font-mono);color:var(--pos);opacity:0;transition:opacity 360ms ease 900ms}
.dk__note svg{width:1.8cqw;height:1.8cqw;color:var(--pos)}
.dk__s[data-on] .dk__note{opacity:1}
/* the argument, written rather than faded in */
.dk__pts{list-style:none;margin-top:1.8cqw;display:flex;flex-direction:column;gap:1.5cqw}
.dk__pts li{position:relative;padding-left:2.4cqw;font:400 1.85cqw/1.35 var(--font-sans);color:var(--ink-2);
clip-path:inset(0 100% 0 0)}
.dk__pts li::before{content:"";position:absolute;left:0;top:.55cqw;width:.9cqw;height:.9cqw;
border-radius:999px;background:var(--accent)}
.dk__s[data-on] .dk__pts li{clip-path:inset(0 0 0 0);
transition:clip-path 620ms cubic-bezier(.3,0,.2,1);transition-delay:calc(240ms + var(--d))}
.dk__tbl{width:100%;margin-top:1.8cqw;border-collapse:collapse;
font:400 1.8cqw/1 var(--font-mono);color:var(--ink-2)}
.dk__tbl tr{opacity:0;transform:translateY(.9cqw)}
.dk__s[data-on] .dk__tbl tr{opacity:1;transform:none;
transition:opacity 320ms ease,transform 420ms cubic-bezier(.4,0,.2,1);
transition-delay:calc(240ms + var(--d))}
.dk__tbl td{padding:1.1cqw 0;border-bottom:1px solid var(--line-soft)}
.dk__tbl td:nth-child(2){text-align:right;color:var(--ink);font-weight:700}
.dk__tbl td:nth-child(3){text-align:right;width:22%;color:var(--pos)}
.dk__tbl tr:last-child td:nth-child(3){color:#b42318}
.dk__foot{display:flex;align-items:center;justify-content:space-between;gap:2cqw;
font:700 1.7cqw/1 var(--font-mono);color:var(--ink-4)}
.dk__art{display:inline-flex;align-items:center;gap:.8cqw}
.dk__art b{font-weight:700;color:var(--ink-4);transition:color 340ms ease}
.dk__art b[data-done]{color:var(--pos)}
.dk__eg{color:var(--pos)}
@container (max-width: 430px){
.dk__ask{font-size:2.7cqw}.dk__h1{font-size:5.4cqw}.dk__h2{font-size:2.4cqw}
.dk__h3{font-size:2.7cqw}.dk__pts li{font-size:2.35cqw}.dk__tbl{font-size:2.3cqw}
.dk__note{font-size:2cqw}.dk__foot{font-size:2.1cqw}
}
@media (prefers-reduced-motion:reduce){
.dk *{animation:none!important;transition:none!important}
.dk__th{opacity:1;transform:none}
.dk__bar{transform:scaleY(1)}
.dk__pts li{clip-path:none}
.dk__tbl tr,.dk__note{opacity:1;transform:none}
}
/* ───────── Coding Agent hero: the diff writes itself in the editor ──
"Ship code without leaving the editor" needs an editor doing work,
not a code block sitting still. A task is typed, the file opens,
the diff is written line by line, the tests go green and a PR is
opened, and the footer says the whole thing stayed put. */
.cg{container-type:inline-size;position:relative;z-index:2;height:100%;
display:flex;flex-direction:column;gap:2cqw}
.cg__ask{display:flex;align-items:center;gap:1.3cqw;padding:1.8cqw 2.1cqw;border-radius:1.2cqw;
border:1px solid var(--line);background:#fff;box-shadow:var(--lift-1);
font:700 2cqw/1 var(--font-mono);color:var(--ink);min-height:6cqw}
.cg__ask>svg{width:2.5cqw;height:2.5cqw;flex:none;color:var(--accent)}
.cg__caret{width:.35cqw;height:2.3cqw;background:var(--accent);opacity:0}
.cg.is-ask .cg__caret{animation:cgCaret 900ms steps(1) infinite}
@keyframes cgCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
.cg__win{flex:1;display:grid;grid-template-columns:30% 1fr;border-radius:1.2cqw;overflow:hidden;
background:#0d1526;box-shadow:var(--lift-2);min-height:0}
.cg__tree{padding:1.8cqw 1.4cqw;background:#0a1120;border-right:1px solid rgba(255,255,255,.07);
display:flex;flex-direction:column;gap:1.5cqw}
.cg__f{font:400 1.6cqw/1.2 var(--font-mono);color:#5b6b85;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;opacity:0;transform:translateX(-.8cqw);
transition:opacity 300ms ease,transform 380ms cubic-bezier(.4,0,.2,1),color 300ms ease}
.cg.is-open .cg__f{opacity:1;transform:none;transition-delay:var(--d)}
.cg.is-open .cg__f--on{color:#8ac6ff}
.cg__code{display:flex;flex-direction:column;min-width:0}
.cg__tab{padding:1.4cqw 2cqw;border-bottom:1px solid rgba(255,255,255,.07);
font:700 1.6cqw/1 var(--font-mono);color:#9fb2cc;
opacity:0;transition:opacity 320ms ease}
.cg.is-open .cg__tab{opacity:1}
.cg__pre{flex:1;padding:1.8cqw 1.6cqw;display:flex;flex-direction:column;gap:.9cqw;
font:400 1.65cqw/1.5 var(--font-mono);overflow:hidden}
/* each line is written, not faded: the clip reveal reads as typing */
.cg__ln{display:flex;gap:1cqw;color:#8fa3bf;white-space:pre;
clip-path:inset(0 100% 0 0)}
.cg__ln i{width:1.2cqw;flex:none;font-style:normal;color:#5b6b85}
.cg.is-write .cg__ln{clip-path:inset(0 0 0 0);
transition:clip-path 460ms cubic-bezier(.3,0,.2,1);transition-delay:var(--d)}
.cg__ln--add{color:#6ee7a8}.cg__ln--add i{color:#6ee7a8}
.cg__ln--del{color:#f0857d;text-decoration:line-through;text-decoration-color:rgba(240,133,125,.5)}
.cg__ln--del i{color:#f0857d}
.cg__foot{display:flex;align-items:center;gap:1.6cqw;
font:700 1.65cqw/1 var(--font-mono);color:var(--ink-4)}
.cg__step{display:inline-flex;align-items:center;gap:.8cqw;
opacity:0;transform:translateY(.7cqw);
transition:opacity 340ms ease,transform 420ms cubic-bezier(.34,1.35,.5,1)}
.cg__step i{width:1.5cqw;height:1.5cqw;border-radius:999px;background:var(--line);flex:none;
transition:background 300ms ease}
.cg.is-test .cg__step[data-s="0"],.cg.is-pr .cg__step[data-s="1"]{opacity:1;transform:none}
.cg.is-test .cg__step[data-s="0"] i,.cg.is-pr .cg__step[data-s="1"] i{background:var(--pos)}
.cg.is-test .cg__step[data-s="0"],.cg.is-pr .cg__step[data-s="1"]{color:var(--pos)}
.cg__eg{margin-left:auto;color:var(--ink-4);transition:color 340ms ease}
.cg.is-pr .cg__eg{color:var(--accent-hover)}
@container (max-width: 430px){
.cg__ask{font-size:2.6cqw}.cg__f,.cg__tab{font-size:2.2cqw}
.cg__pre{font-size:2.15cqw}.cg__foot{font-size:2.05cqw}
}
@media (prefers-reduced-motion:reduce){
.cg *{animation:none!important;transition:none!important}
.cg__f,.cg__tab,.cg__step{opacity:1;transform:none}
.cg__ln{clip-path:none}
}
/* ───────── Browser Use hero: it drives the UI, like a person ────────
"When there's no API, Barie uses the browser, like your team does."
So there is a real browser: a cursor moves, fields fill, the form
submits and a reference comes back. The cursor is the whole point;
without it this is just a screenshot of a form. */
.bu{container-type:inline-size;position:relative;z-index:2;height:100%;
display:flex;flex-direction:column;gap:2cqw}
.bu__ask{display:flex;align-items:center;gap:1.3cqw;padding:1.8cqw 2.1cqw;border-radius:1.2cqw;
border:1px solid var(--line);background:#fff;box-shadow:var(--lift-1);
font:700 2cqw/1 var(--font-mono);color:var(--ink);min-height:6cqw}
.bu__ask>svg{width:2.5cqw;height:2.5cqw;flex:none;color:var(--accent)}
.bu__caret{width:.35cqw;height:2.3cqw;background:var(--accent);opacity:0}
.bu.is-ask .bu__caret{animation:buCaret 900ms steps(1) infinite}
@keyframes buCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
.bu__win{position:relative;flex:1;border-radius:1.2cqw;overflow:hidden;background:#fff;
border:1px solid var(--line);box-shadow:var(--lift-2);display:flex;flex-direction:column;min-height:0}
.bu__bar{display:flex;align-items:center;gap:1.4cqw;padding:1.4cqw 1.6cqw;
border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,#fdfefe,#f6f9fc)}
.bu__dots{display:flex;gap:.7cqw}
.bu__dots i{width:1.3cqw;height:1.3cqw;border-radius:999px;background:#dfe6ef}
.bu__url{display:flex;align-items:center;gap:.8cqw;flex:1;padding:.9cqw 1.3cqw;border-radius:.8cqw;
background:#fff;border:1px solid var(--line);
font:400 1.5cqw/1 var(--font-mono);color:var(--ink-3)}
.bu__url svg{width:1.6cqw;height:1.6cqw;color:var(--pos)}
.bu__page{flex:1;padding:2.2cqw 2.4cqw;display:flex;flex-direction:column;gap:1.6cqw;min-height:0}
.bu__h{font:700 2.1cqw/1 var(--font-sans);color:var(--ink)}
.bu__form{display:flex;flex-direction:column;gap:1.3cqw}
.bu__form label{display:flex;align-items:center;gap:1.4cqw;
font:400 1.65cqw/1 var(--font-sans);color:var(--ink-3)}
.bu__form label span{width:38%;flex:none}
.bu__in{flex:1;min-height:3.6cqw;padding:.9cqw 1.1cqw;border-radius:.7cqw;
border:1px solid var(--line);background:var(--tint);
font:700 1.6cqw/1.2 var(--font-mono);color:var(--ink);
transition:border-color 240ms ease,background 240ms ease}
.bu__in::after{content:attr(data-typed)}
.bu__in[data-active]{border-color:var(--accent);background:#fff;
box-shadow:0 0 0 .35cqw rgba(5,130,255,.16)}
.bu__btn{align-self:flex-start;margin-top:.4cqw;padding:1.1cqw 2cqw;border-radius:.8cqw;border:0;
background:var(--accent);color:#fff;font:700 1.7cqw/1 var(--font-sans);
transition:transform 180ms ease,filter 200ms ease}
.bu.is-submit .bu__btn{transform:scale(.96);filter:brightness(.9)}
.bu__done{display:flex;align-items:center;gap:.9cqw;font:400 1.65cqw/1 var(--font-mono);color:var(--pos);
opacity:0;transform:translateY(.8cqw);
transition:opacity 340ms ease,transform 420ms cubic-bezier(.34,1.35,.5,1)}
.bu__done svg{width:1.9cqw;height:1.9cqw;color:var(--pos)}
.bu.is-done .bu__done{opacity:1;transform:none}
/* the cursor: the thing that makes this "operating a browser" */
.bu__cursor{position:absolute;left:0;top:0;width:2.4cqw;height:2.4cqw;pointer-events:none;opacity:0;
background:#0b1220;clip-path:polygon(0 0,0 72%,26% 56%,44% 96%,62% 88%,44% 48%,72% 46%);
filter:drop-shadow(0 .4cqw .8cqw rgba(11,18,32,.35));
transition:transform 620ms cubic-bezier(.4,0,.2,1),opacity 260ms ease}
.bu.is-fill .bu__cursor{opacity:1}
.bu__foot{display:flex;align-items:center;justify-content:space-between;gap:2cqw;
font:700 1.65cqw/1 var(--font-mono);color:var(--ink-4)}
.bu__foot b{color:var(--pos)}
@container (max-width: 430px){
.bu__ask{font-size:2.6cqw}.bu__url{font-size:2cqw}.bu__h{font-size:2.7cqw}
.bu__form label,.bu__in{font-size:2.2cqw}.bu__btn{font-size:2.2cqw}
.bu__done,.bu__foot{font-size:2.1cqw}
}
@media (prefers-reduced-motion:reduce){
.bu *{animation:none!important;transition:none!important}
.bu__cursor{display:none}
.bu__done{opacity:1;transform:none}
}
/* ═══════════════ Section cards, reworked ═══════════════
.deploy is the most reused section component on the site: 70
instances across 20 pages. Two problems were fixed rather than
the container replaced, so every instance benefits and none of
the markup had to change.
1. The only motion in the component was on :hover, so on touch,
and for anyone not pointing at it, it was completely inert.
2. Roughly a third of the groups are ordered processes rendered
as four identical boxes, with nothing carrying the sequence.
The base restyle below applies everywhere. Numbering, the rail
and the advancing step are opt-in via .deploy--flow, because
"Law firms | In-house legal" must never be numbered 01 and 02. */
.deploy__card{padding:30px 26px 32px}
/* the icon carried the most visual weight and the least meaning;
the label leads now and the glyph sits with it */
.deploy__glyph{width:34px;height:34px;border-radius:9px;margin-bottom:16px;
background:var(--accent-soft);border-color:rgba(5,130,255,.22)}
.deploy__glyph svg{width:18px;height:18px}
/* Libre Baskerville is the display face for headlines; at label size
it reads decorative rather than structural */
.deploy__card h3{font-family:var(--font-sans);font-weight:700;font-size:16.5px;
line-height:1.3;letter-spacing:-.005em}
.deploy__card p{margin-top:9px;font-size:15px;line-height:1.62;color:var(--ink-2)}
/* a persistent edge, so the card reads as a card without a pointer */
.deploy__card::after{content:"";position:absolute;left:0;top:22px;bottom:22px;width:2px;
border-radius:2px;background:var(--line);transition:background 320ms var(--ease)}
.deploy__card:hover::after{background:var(--accent)}
/* ── sequences ───────────────────────────────────────── */
.deploy--flow{counter-reset:step;position:relative}
.deploy--flow .deploy__card{counter-increment:step;padding-top:26px}
/* the glyph sits on the rail, so it needs to mask it rather than be
crossed by it */
.deploy--flow .deploy__glyph{position:absolute;right:22px;top:24px;margin:0;width:auto;height:34px;
padding:0 7px;border-radius:8px;background:var(--surface);border-color:transparent;color:var(--ink-4)}
.deploy--flow .deploy__card::before{content:counter(step,decimal-leading-zero);
position:static;display:grid;place-items:center;width:30px;height:30px;margin-bottom:15px;
border-radius:999px;border:1.5px solid var(--line);background:#fff;
font:700 12px/1 var(--font-mono);color:var(--ink-4);
transition:background 340ms var(--ease),border-color 340ms var(--ease),color 340ms var(--ease)}
/* The rail has to be drawn per card, not once across the container:
the cards are opaque and sit on top of .deploy, so a rail belonging
to the container is hidden behind them at any z-index. Each card
carries the segment from its own badge to the next card instead,
which also survives the 1px grid gap and wrapping. */
.deploy--flow .deploy__card::after{left:66px;right:-2px;top:40px;bottom:auto;
width:auto;height:1.5px;border-radius:0;background:var(--line)}
.deploy--flow .deploy__card:last-child::after{display:none}
.deploy--flow .deploy__card[data-done]::after{background:var(--accent)}
.deploy--flow .deploy__card[data-now]::after{
background:linear-gradient(90deg,var(--accent),var(--line))}
/* steps already passed stay marked; the current one is filled */
.deploy--flow .deploy__card[data-done]::before{border-color:var(--accent);color:var(--accent-hover)}
.deploy--flow .deploy__card[data-now]::before{background:var(--accent);border-color:var(--accent);
color:#fff;box-shadow:0 0 0 4px rgba(5,130,255,.14)}
.deploy--flow .deploy__card[data-now] .deploy__glyph{color:var(--accent)}
/* Below 900px .deploy collapses to one column, so a horizontal rail
would point sideways into nothing. Hide it and let the glyph sit
normally again. Scoped to --flow so the plain card's left edge,
which shares the ::after, is untouched. */
@media (max-width:899px){
.deploy--flow .deploy__card::after{display:none}
.deploy--flow .deploy__glyph{position:static;width:34px;height:34px;padding:0;
margin-bottom:14px;border-radius:9px;background:var(--accent-soft);color:var(--accent-hover)}
.deploy--flow .deploy__card::before{position:absolute;top:26px;right:24px;margin:0}
}
@media (prefers-reduced-motion:reduce){
.deploy--flow .deploy__card::before{border-color:var(--accent);color:var(--accent-hover)}
.deploy--flow .deploy__card::after{background:var(--accent)}
}
/* ═══════════════ Section cards: depth and colour ═══════════════
The row was white cards on a white page separated by hairlines,
so it read flat. This adds tonal depth and a colour progression
without leaving the brand's blue family.
Deliberately NOT frosted glass: backdrop blur is for signalling
that what is behind can be dismissed. These are inline cards with
an opaque page behind them, so blur would be decoration and would
only cost paint. Gradient surfaces and layered elevation do the
same job here and stay crisp. */
.deploy{background:linear-gradient(180deg,var(--line),#dbe4f0);
box-shadow:0 1px 2px rgba(11,18,32,.04),0 24px 56px -30px rgba(11,18,32,.22)}
.deploy__card{background:linear-gradient(180deg,#fff 0%,#fbfcff 100%)}
/* the step's colour deepens as the sequence advances, so the row
carries a progression rather than four identical tiles */
.deploy--flow .deploy__card[data-done]{
background:linear-gradient(180deg,#fdfeff 0%,#f2f7fe 100%)}
.deploy--flow .deploy__card[data-now]{
background:linear-gradient(165deg,#f7fbff 0%,#e9f3ff 60%,#e2eeff 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
/* a soft accent bloom behind the live step, clipped by the card */
.deploy--flow .deploy__card[data-now]::before{
background:linear-gradient(150deg,var(--accent-lift),var(--accent));
border-color:transparent;color:#fff;
box-shadow:0 6px 14px -4px rgba(5,130,255,.75),0 0 0 5px rgba(5,130,255,.13)}
/* badges: a passed step keeps colour, it does not go grey again */
.deploy--flow .deploy__card::before{
background:linear-gradient(180deg,#fff,#f4f7fb)}
.deploy--flow .deploy__card[data-done]::before{
background:linear-gradient(150deg,#dcecff,#c7e0ff);
border-color:rgba(5,130,255,.4);color:var(--accent-press)}
/* glyph chips pick up the same tonal steps */
.deploy__glyph{background:linear-gradient(160deg,#f2f8ff,#e4efff);
border-color:rgba(5,130,255,.18)}
.deploy--flow .deploy__glyph{background:linear-gradient(160deg,#fff,#f7fafe)}
.deploy--flow .deploy__card[data-now] .deploy__glyph{
background:linear-gradient(160deg,#e9f3ff,#d8e9ff);color:var(--accent)}
/* the plain card's left edge gets the same gradient as the rail */
.deploy:not(.deploy--flow) .deploy__card::after{
background:linear-gradient(180deg,var(--accent-lift),var(--accent));
opacity:.28;transition:opacity 320ms var(--ease)}
.deploy:not(.deploy--flow) .deploy__card:hover::after{opacity:1}
@media (prefers-reduced-motion:reduce){
.deploy--flow .deploy__card[data-now],
.deploy--flow .deploy__card[data-done]{background:linear-gradient(180deg,#fff,#fbfcff)}
}
/* Stronger still: the live step gets a gradient crown and an outer
bloom so the row carries real colour, and the whole block sits on
a tinted rim so it reads as one raised object rather than four
white tiles on a white page. */
.deploy{border-color:#cfdcec;
background:linear-gradient(180deg,#d7e3f2,#c4d5ea)}
.deploy__card{background:linear-gradient(180deg,#fff 0%,#f7faff 100%)}
.deploy--flow .deploy__card[data-now]{
background:
radial-gradient(120% 90% at 0% 0%,rgba(5,130,255,.16),transparent 62%),
linear-gradient(168deg,#f4faff 0%,#e2eeff 55%,#d7e8ff 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
inset 0 0 0 1px rgba(5,130,255,.16)}
/* the crown: a gradient bar that only the live step wears */
.deploy--flow .deploy__card{--crown:0}
.deploy--flow .deploy__card[data-now]{--crown:1}
/* The crown must be out of flow on EVERY card, not only flow ones.
.deploy__card is a 3-row subgrid and a static crown becomes a
fourth grid item: it steals a row and the heading lands on top
of the body text. Position first, decorate second. */
.deploy__card > .deploy__crown{position:absolute;left:0;right:0;top:0;height:3px;
transform:scaleX(0);transform-origin:left center;pointer-events:none}
.deploy--flow .deploy__card > .deploy__crown{transform:scaleX(var(--crown));
background:linear-gradient(90deg,var(--accent),var(--accent-lift),#a5d0ff);
transition:transform 560ms var(--ease)}
.deploy--flow .deploy__card[data-done]{
background:linear-gradient(180deg,#fdfeff 0%,#eef5fe 100%)}
/* glyph chip on the live step picks up the accent properly */
.deploy--flow .deploy__card[data-now] .deploy__glyph{
background:linear-gradient(160deg,#ffffff,#dcecff);
box-shadow:0 2px 8px -3px rgba(5,130,255,.55);color:var(--accent-press)}
@media (prefers-reduced-motion:reduce){
.deploy--flow .deploy__card > .deploy__crown{transform:scaleX(0)}
}
/* ───────── Solutions hero: Barie arrives, the data never does ──────
All six sector ledes make the same promise: Barie is installed
into the environment the data already lives in. So the figure
shows an arrival, not a data flow. The module descends into the
enclosure, wires itself to the systems already there, each one
acknowledges, and the boundary seals. Nothing is ever animated
outward, because that is the one thing these pages promise. */
.ev{container-type:inline-size;position:relative;z-index:2;height:100%;
display:flex;flex-direction:column;justify-content:center;gap:2.2cqw}
.ev__top{display:flex;align-items:center;gap:1.4cqw;flex:none}
.ev__ttl{font:700 1.6cqw/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.ev__badge{margin-left:auto;padding:.7cqw 1.3cqw;border-radius:999px;
border:1px solid rgba(6,122,82,.3);background:linear-gradient(180deg,#f2fbf7,#e6f6ef);
font:700 1.4cqw/1 var(--font-sans);letter-spacing:.1em;color:var(--pos)}
/* the enclosure: the boundary the copy keeps referring to */
/* The enclosure sizes to its contents. Letting it take the card's
slack drew a large empty dashed box with one chip floating in it. */
/* The enclosure IS the figure: it holds the header, the module, the
systems and the closing line and spreads them over the card's full
height. Sizing it to its content left a void beneath it; stretching
it with the content pinned to the top left a bigger one. */
.ev__box{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:2.2cqw;padding:2.6cqw 2.4cqw;border-radius:1.8cqw;overflow:hidden;border:1.5px dashed #b9d2ee;background:radial-gradient(120% 80% at 50% 0%,rgba(5,130,255,.07),transparent 60%),linear-gradient(180deg,#fbfdff,#f2f7fd)}
.ev__seal{position:absolute;inset:-1.5px;border-radius:1.8cqw;pointer-events:none;
border:1.5px solid transparent;
background:linear-gradient(120deg,var(--accent),#7cbcff,var(--pos)) border-box;
-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
opacity:0;transition:opacity 620ms var(--ease)}
.ev.is-sealed .ev__seal{opacity:1}
/* the module coming down into it */
.ev__drop{position:relative;display:flex;justify-content:center;padding-top:2cqw}
.ev__wire{position:absolute;left:50%;top:0;width:1.5px;height:2cqw;
background:linear-gradient(180deg,transparent,var(--accent));
transform:scaleY(0);transform-origin:top center;transition:transform 420ms var(--ease)}
.ev.is-wired .ev__wire{transform:scaleY(1)}
.ev__mod{display:inline-flex;align-items:center;gap:1.2cqw;padding:1.5cqw 2.2cqw;border-radius:1.2cqw;
background:linear-gradient(160deg,#1d64ff,#0582ff 55%,#3aa0ff);color:#fff;
box-shadow:0 1.6cqw 3.4cqw -1.4cqw rgba(5,130,255,.85),inset 0 1px 0 rgba(255,255,255,.34);
opacity:0;transform:translateY(-3.4cqw) scale(.94);
transition:opacity 420ms ease,transform 640ms cubic-bezier(.34,1.28,.5,1)}
.ev.is-drop .ev__mod{opacity:1;transform:none}
.ev__logo{width:2.4cqw;height:2.4cqw;border-radius:.6cqw;flex:none;
background:linear-gradient(150deg,#fff,#cfe6ff)}
.ev__mod b{font:700 2.1cqw/1 var(--font-sans)}
.ev__state{font:400 1.5cqw/1 var(--font-mono);font-style:normal;color:rgba(255,255,255,.82)}
/* the systems already in there, acknowledging in turn */
.ev__grid{display:flex;flex-direction:column;gap:1.2cqw;flex:none}
/* These systems are already in the environment before Barie shows
up, so they are present from the first frame. Hiding them left the
enclosure empty for over a second on every loop. Only the
acknowledgement is animated. */
.ev__sys{display:flex;align-items:center;gap:1.3cqw;padding:1.4cqw 1.6cqw;border-radius:1cqw;
background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid var(--line);
box-shadow:var(--lift-1);
transition:border-color 320ms ease,box-shadow 320ms ease}
.ev__mark{width:1.9cqw;height:1.9cqw;flex:none;border-radius:.5cqw;
background:linear-gradient(150deg,#cfe4ff,#9ec8ff);
transition:background 320ms ease}
.ev__sys b{flex:1;font:700 1.8cqw/1.2 var(--font-sans);color:var(--ink)}
/* the tick is drawn, not an icon: the six pages carry different sprites */
.ev__tick{width:1.9cqw;height:1.9cqw;flex:none;border-radius:999px;position:relative;
background:var(--line);transition:background 320ms ease}
.ev__tick::after{content:"";position:absolute;left:34%;top:20%;width:26%;height:50%;
border:.34cqw solid #fff;border-top:0;border-left:0;transform:rotate(42deg) scale(0);
transition:transform 380ms cubic-bezier(.34,1.5,.5,1)}
.ev.is-ack .ev__sys{border-color:rgba(6,122,82,.28);
box-shadow:0 0 0 1px rgba(6,122,82,.12),var(--lift-1);transition-delay:var(--d)}
.ev.is-ack .ev__mark{background:linear-gradient(150deg,#bfe6d3,#7fd0ab)}
.ev.is-ack .ev__tick{background:var(--pos);transition-delay:var(--d)}
.ev.is-ack .ev__tick::after{transform:rotate(42deg) scale(1);transition-delay:var(--d)}
.ev.is-sealed .ev__state{color:#c9f2e0}
.ev__foot{display:flex;align-items:center;justify-content:space-between;gap:2cqw;
font:700 1.65cqw/1 var(--font-mono);color:var(--ink-4)}
.ev__foot b{color:var(--pos)}
@container (max-width: 430px){
.ev__ttl{font-size:2.2cqw}.ev__badge{font-size:2cqw}
.ev__mod b{font-size:2.8cqw}.ev__state{font-size:2.1cqw}
.ev__sys b{font-size:2.4cqw}.ev__foot{font-size:2.1cqw}
}
@media (prefers-reduced-motion:reduce){
.ev *{animation:none!important;transition:none!important}
.ev__mod{opacity:1;transform:none}
.ev__wire{transform:scaleY(1)}
.ev__seal{opacity:1}
.ev__tick{background:var(--pos)}
.ev__tick::after{transform:rotate(42deg) scale(1)}
}
/* the closing line, inside the boundary it describes */
.ev__note{display:flex;align-items:center;gap:1cqw;flex:none;
font:400 1.6cqw/1.3 var(--font-mono);color:var(--ink-4);
transition:color 340ms ease}
.ev__note i{width:1.5cqw;height:1.5cqw;flex:none;border-radius:.4cqw;
background:linear-gradient(150deg,#d8e4f2,#bcd0e6);transition:background 340ms ease}
.ev.is-sealed .ev__note{color:var(--pos)}
.ev.is-sealed .ev__note i{background:linear-gradient(150deg,#8fd9b8,#3fae82)}
/* ───────── Solutions heroes: one figure per sector ─────────
Each sector page answers a different objection, so each gets its
own mechanic rather than one shared template with the labels
swapped. Shared chrome only: header, badge, footer. Everything
between them is specific to the argument that page makes.
All six are driven by the generic phase runner in barie.js. */
.sf{container-type:inline-size;position:relative;z-index:2;height:100%;
display:flex;flex-direction:column;justify-content:center;gap:2cqw}
.sf__hd{display:flex;align-items:center;gap:1.4cqw}
.sf__ttl{font:700 1.6cqw/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.sf__badge{margin-left:auto;padding:.7cqw 1.3cqw;border-radius:999px;
border:1px solid rgba(6,122,82,.3);background:linear-gradient(180deg,#f2fbf7,#e6f6ef);
font:700 1.4cqw/1 var(--font-sans);letter-spacing:.1em;color:var(--pos)}
.sf__foot{display:flex;align-items:center;justify-content:space-between;gap:2cqw;
font:700 1.6cqw/1 var(--font-mono);color:var(--ink-4)}
.sf__foot b{color:var(--pos)}
/* ── Government: the handling marking survives every stage ── */
.gov__doc{padding:2cqw 2.2cqw;border-radius:1.2cqw;border:1px solid var(--line);
background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:var(--lift-1)}
.gov__mark{display:inline-block;padding:.6cqw 1.2cqw;border-radius:.5cqw;
background:linear-gradient(150deg,#8b1f1f,#b42318);color:#fff;
font:700 1.35cqw/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.gov__doc b{display:block;margin-top:1.2cqw;font:700 2.2cqw/1.2 var(--font-sans);color:var(--ink)}
.gov__doc em{display:block;margin-top:.6cqw;font:400 1.6cqw/1 var(--font-mono);font-style:normal;color:var(--ink-4)}
.gov__chain{display:flex;flex-direction:column;gap:1.2cqw}
.gov__stage{display:flex;align-items:center;gap:1.2cqw;padding:1.4cqw 1.6cqw;border-radius:1cqw;
border:1px solid var(--line);background:linear-gradient(180deg,#fff,#fafcff);
opacity:.42;transition:opacity 340ms ease,border-color 340ms ease}
.gov__seal{width:1.7cqw;height:1.7cqw;flex:none;border-radius:999px;background:var(--line);
transition:background 340ms ease}
.gov__stage b{flex:1;font:700 1.8cqw/1 var(--font-sans);color:var(--ink)}
.gov__tag{padding:.45cqw 1cqw;border-radius:.45cqw;background:#fdeceb;color:#8b1f1f;
font:700 1.25cqw/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
opacity:0;transform:scale(.86);transition:opacity 300ms ease,transform 380ms cubic-bezier(.34,1.5,.5,1)}
.sf--gov.is-b .gov__stage[data-i="0"],.sf--gov.is-c .gov__stage[data-i="1"],
.sf--gov.is-d .gov__stage[data-i="2"]{opacity:1;border-color:rgba(5,130,255,.4)}
.sf--gov.is-b .gov__stage[data-i="0"] .gov__seal,.sf--gov.is-c .gov__stage[data-i="1"] .gov__seal,
.sf--gov.is-d .gov__stage[data-i="2"] .gov__seal{background:var(--accent)}
.sf--gov.is-b .gov__stage[data-i="0"] .gov__tag,.sf--gov.is-c .gov__stage[data-i="1"] .gov__tag,
.sf--gov.is-d .gov__stage[data-i="2"] .gov__tag{opacity:1;transform:none}
.sf--gov.is-c .gov__stage[data-i="0"],.sf--gov.is-d .gov__stage[data-i="0"],
.sf--gov.is-d .gov__stage[data-i="1"]{opacity:1}
.sf--gov.is-c .gov__stage[data-i="0"] .gov__tag,.sf--gov.is-d .gov__stage[data-i="0"] .gov__tag,
.sf--gov.is-d .gov__stage[data-i="1"] .gov__tag{opacity:1;transform:none}
.sf--gov.is-c .gov__stage[data-i="0"] .gov__seal,.sf--gov.is-d .gov__stage[data-i="0"] .gov__seal,
.sf--gov.is-d .gov__stage[data-i="1"] .gov__seal{background:var(--pos)}
/* ── Healthcare: a jumbled pile becomes answerable ── */
.hc__pile{position:relative;height:16cqw;display:grid;place-items:center}
.hc__pile i{position:absolute;width:26cqw;height:11cqw;border-radius:1cqw;
border:1px solid var(--line);background:linear-gradient(180deg,#fff,#f7fafe);
box-shadow:var(--lift-1);
transform:rotate(var(--r)) translateX(var(--x));
transition:transform 620ms cubic-bezier(.3,0,.2,1)}
.sf--hc.is-b .hc__pile i{transform:rotate(0deg) translateX(0) translateY(calc(var(--d) * .012))}
.hc__count{position:relative;z-index:2;padding:.9cqw 1.6cqw;border-radius:999px;
background:var(--ink);color:#fff;font:400 1.6cqw/1 var(--font-mono);
opacity:0;transition:opacity 340ms ease}
.sf--hc.is-b .hc__count{opacity:1}
.hc__q{padding:1.5cqw 1.8cqw;border-radius:1cqw;border:1px solid var(--line);background:#fff;
font:600 1.9cqw/1.3 var(--font-sans);color:var(--ink);
opacity:0;transform:translateY(1cqw);transition:opacity 340ms ease,transform 420ms var(--ease)}
.sf--hc.is-c .hc__q,.sf--hc.is-d .hc__q{opacity:1;transform:none}
.hc__ans{display:flex;align-items:center;gap:1.2cqw;padding:1.5cqw 1.8cqw;border-radius:1cqw;
background:linear-gradient(180deg,#f4faf7,#eaf6f0);border:1px solid rgba(6,122,82,.24);
opacity:0;transform:translateY(1cqw);transition:opacity 340ms ease,transform 460ms cubic-bezier(.34,1.3,.5,1)}
.sf--hc.is-d .hc__ans{opacity:1;transform:none}
.hc__tick{width:2cqw;height:2cqw;flex:none;border-radius:999px;background:var(--pos);position:relative}
.hc__tick::after{content:"";position:absolute;left:34%;top:20%;width:26%;height:50%;
border:.34cqw solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}
.hc__ans b{font:700 2cqw/1 var(--font-sans);color:#0a6b48}
.hc__ans em{font:400 1.55cqw/1 var(--font-mono);font-style:normal;color:var(--ink-3)}
/* ── Legal: the ethical wall closes on the matter you are conflicted out of ── */
.lg__who{font:400 1.7cqw/1 var(--font-mono);color:var(--ink-3)}
.lg__who b{color:var(--ink)}
.lg__list{display:flex;flex-direction:column;gap:1.2cqw}
.lg__m{position:relative;display:flex;align-items:baseline;gap:1.2cqw;overflow:hidden;
padding:1.5cqw 1.7cqw;border-radius:1cqw;border:1px solid var(--line);
background:linear-gradient(180deg,#fff,#fafcff);box-shadow:var(--lift-1);
opacity:0;transform:translateY(1cqw);
transition:opacity 320ms ease,transform 420ms var(--ease),filter 460ms ease,border-color 340ms ease}
.sf--legal.is-a .lg__m,.sf--legal.is-b .lg__m,.sf--legal.is-c .lg__m,.sf--legal.is-d .lg__m{
opacity:1;transform:none;transition-delay:var(--d)}
.lg__m b{font:700 1.85cqw/1 var(--font-mono);color:var(--ink)}
.lg__m span{flex:1;font:400 1.8cqw/1 var(--font-sans);color:var(--ink-2)}
.lg__state{padding:.5cqw 1.1cqw;border-radius:.5cqw;font:700 1.3cqw/1 var(--font-mono);
letter-spacing:.08em;text-transform:uppercase;background:#eaf7f1;color:var(--pos);
transition:background 340ms ease,color 340ms ease}
/* the wall: the matter is not dimmed, it becomes unreadable */
.sf--legal.is-c .lg__m.is-walled,.sf--legal.is-d .lg__m.is-walled{
border-color:rgba(180,35,24,.3);background:linear-gradient(180deg,#fffafa,#fdf2f1)}
.sf--legal.is-c .lg__m.is-walled b,.sf--legal.is-c .lg__m.is-walled span,
.sf--legal.is-d .lg__m.is-walled b,.sf--legal.is-d .lg__m.is-walled span{
filter:blur(4px);opacity:.55;user-select:none}
.sf--legal.is-c .lg__m.is-walled .lg__state,.sf--legal.is-d .lg__m.is-walled .lg__state{
background:#fdeceb;color:#8b1f1f}
.lg__ans{display:flex;align-items:center;gap:1.1cqw;font:400 1.7cqw/1.3 var(--font-sans);color:var(--ink-2);
opacity:0;transition:opacity 360ms ease}
.lg__ans i{width:1.7cqw;height:1.7cqw;flex:none;border-radius:999px;background:var(--pos)}
.lg__ans b{color:var(--ink)}
.sf--legal.is-d .lg__ans{opacity:1}
/* ── Finance: the outbound call that is never made ── */
.fn__thesis{padding:1.5cqw 1.8cqw;border-radius:1cqw;border:1px solid var(--line);
background:linear-gradient(180deg,#fff,#f8fbff);
font:600 1.9cqw/1.3 var(--font-sans);color:var(--ink)}
.fn__list{display:flex;flex-direction:column;gap:1.1cqw}
.fn__step{display:flex;align-items:center;gap:1.2cqw;padding:1.4cqw 1.6cqw;border-radius:1cqw;
border:1px solid var(--line);background:linear-gradient(180deg,#fff,#fafcff);
opacity:.4;transition:opacity 320ms ease,border-color 320ms ease,background 320ms ease}
.fn__step i{width:1.8cqw;height:1.8cqw;flex:none;border-radius:999px;background:var(--line);
position:relative;transition:background 320ms ease}
.fn__step i::after{content:"";position:absolute;left:34%;top:20%;width:26%;height:50%;
border:.32cqw solid #fff;border-top:0;border-left:0;transform:rotate(42deg) scale(0);
transition:transform 360ms cubic-bezier(.34,1.5,.5,1)}
.fn__step b{flex:1;font:700 1.8cqw/1 var(--font-sans);color:var(--ink)}
.fn__step em{font:400 1.5cqw/1 var(--font-mono);font-style:normal;color:var(--pos)}
.sf--fin.is-b .fn__step[data-i="0"],.sf--fin.is-c .fn__step[data-i="0"],.sf--fin.is-c .fn__step[data-i="1"],
.sf--fin.is-d .fn__step[data-i="0"],.sf--fin.is-d .fn__step[data-i="1"],.sf--fin.is-d .fn__step[data-i="2"],
.sf--fin.is-e .fn__step{opacity:1}
.sf--fin.is-b .fn__step[data-i="0"] i,.sf--fin.is-c .fn__step[data-i="0"] i,.sf--fin.is-c .fn__step[data-i="1"] i,
.sf--fin.is-d .fn__step[data-i="0"] i,.sf--fin.is-d .fn__step[data-i="1"] i,.sf--fin.is-d .fn__step[data-i="2"] i,
.sf--fin.is-e .fn__step:not(.fn__step--cut) i{background:var(--pos)}
.sf--fin.is-b .fn__step[data-i="0"] i::after,.sf--fin.is-c .fn__step[data-i="0"] i::after,
.sf--fin.is-c .fn__step[data-i="1"] i::after,.sf--fin.is-d .fn__step[data-i="0"] i::after,
.sf--fin.is-d .fn__step[data-i="1"] i::after,.sf--fin.is-d .fn__step[data-i="2"] i::after,
.sf--fin.is-e .fn__step:not(.fn__step--cut) i::after{transform:rotate(42deg) scale(1)}
/* the beat the page exists for: the outbound step is struck through */
.sf--fin.is-e .fn__step--cut{border-color:rgba(180,35,24,.32);
background:linear-gradient(180deg,#fffafa,#fdf2f1)}
.sf--fin.is-e .fn__step--cut b{text-decoration:line-through;
text-decoration-color:rgba(180,35,24,.6);color:var(--ink-3)}
.sf--fin.is-e .fn__step--cut em{color:#8b1f1f}
.sf--fin.is-e .fn__step--cut i{background:#b42318}
.sf--fin.is-e .fn__step--cut i::after{border:0;background:#fff;height:.3cqw;width:52%;
left:24%;top:46%;transform:none;border-radius:1cqw}
/* ── Deep Tech: the export gate that never has to open ── */
.dt__wrap{display:grid;grid-template-columns:1fr 12cqw;gap:2cqw;align-items:stretch}
.dt__inside{display:flex;flex-direction:column;gap:1.2cqw;padding:2cqw 1.8cqw;border-radius:1.2cqw;
border:1.5px dashed #b9d2ee;
background:radial-gradient(120% 80% at 50% 0%,rgba(5,130,255,.07),transparent 60%),
linear-gradient(180deg,#fbfdff,#f2f7fd)}
.dt__lbl{font:700 1.4cqw/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.dt__chk{display:flex;align-items:center;gap:1.1cqw;padding:1.2cqw 1.4cqw;border-radius:.9cqw;
background:#fff;border:1px solid var(--line);
opacity:.4;transition:opacity 320ms ease,border-color 320ms ease}
.dt__chk i{width:1.7cqw;height:1.7cqw;flex:none;border-radius:999px;background:var(--line);
transition:background 320ms ease}
.dt__chk b{font:700 1.7cqw/1.2 var(--font-sans);color:var(--ink)}
.sf--dt.is-b .dt__chk[data-i="0"],.sf--dt.is-c .dt__chk[data-i="0"],.sf--dt.is-c .dt__chk[data-i="1"],
.sf--dt.is-d .dt__chk{opacity:1;border-color:rgba(5,130,255,.3)}
.sf--dt.is-b .dt__chk[data-i="0"] i,.sf--dt.is-c .dt__chk[data-i="0"] i,.sf--dt.is-c .dt__chk[data-i="1"] i,
.sf--dt.is-d .dt__chk i{background:var(--pos)}
/* the gate stays shut for the whole run; that is the point */
.dt__gate{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:1cqw;padding:1.6cqw .8cqw;border-radius:1.2cqw;
background:linear-gradient(180deg,#fdf3f2,#fbe9e7);border:1px solid rgba(180,35,24,.24)}
.dt__bar{width:.7cqw;height:100%;min-height:8cqw;border-radius:1cqw;
background:repeating-linear-gradient(180deg,#b42318 0 1.4cqw,#e8b4ae 1.4cqw 2.8cqw)}
.dt__gt{font:700 1.3cqw/1.2 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;
color:#8b1f1f;text-align:center}
.dt__ev{font:400 1.35cqw/1.3 var(--font-mono);font-style:normal;color:#8b1f1f;text-align:center;
opacity:0;transition:opacity 380ms ease}
.sf--dt.is-d .dt__ev{opacity:1}
/* ── Consumer: scale, and residency that never moves ── */
.cn2__tot{display:flex;align-items:baseline;gap:1.2cqw}
.cn2__tot b{font:400 5.6cqw/1 var(--font-display);letter-spacing:-.02em;color:var(--ink);
font-variant-numeric:tabular-nums}
.cn2__tot span{font:700 1.5cqw/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.cn2__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2cqw}
.cn2__r{position:relative;padding:1.6cqw 1.4cqw;border-radius:1cqw;text-align:center;
border:1px solid var(--line);background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:var(--lift-1);
opacity:.45;transition:opacity 340ms ease,border-color 340ms ease,box-shadow 340ms ease}
.cn2__r b{display:block;font:700 1.6cqw/1 var(--font-mono);color:var(--accent-hover)}
.cn2__r em{display:block;margin-top:.8cqw;font:700 1.9cqw/1 var(--font-sans);font-style:normal;color:var(--ink);
font-variant-numeric:tabular-nums}
.cn2__r i{display:block;margin:1cqw auto 0;width:1.6cqw;height:1.6cqw;border-radius:999px;
background:var(--line);transition:background 340ms ease}
.sf--con.is-b .cn2__r[data-i="0"],.sf--con.is-c .cn2__r[data-i="0"],.sf--con.is-c .cn2__r[data-i="1"],
.sf--con.is-d .cn2__r{opacity:1;border-color:rgba(6,122,82,.3);
box-shadow:0 0 0 1px rgba(6,122,82,.12),var(--lift-1)}
.sf--con.is-b .cn2__r[data-i="0"] i,.sf--con.is-c .cn2__r[data-i="0"] i,.sf--con.is-c .cn2__r[data-i="1"] i,
.sf--con.is-d .cn2__r i{background:var(--pos)}
.cn2__note{font:400 1.65cqw/1.45 var(--font-sans);color:var(--ink-2);
opacity:0;transition:opacity 380ms ease}
.sf--con.is-d .cn2__note{opacity:1}
@container (max-width: 430px){
.sf__ttl{font-size:2.2cqw}.sf__badge{font-size:2cqw}.sf__foot{font-size:2.1cqw}
.gov__doc b,.hc__ans b,.fn__step b,.dt__chk b,.lg__m span{font-size:2.5cqw}
.hc__q,.fn__thesis{font-size:2.6cqw}
.cn2__tot b{font-size:7cqw}.cn2__r em{font-size:2.5cqw}.cn2__note{font-size:2.3cqw}
}
@media (prefers-reduced-motion:reduce){
.sf *{animation:none!important;transition:none!important}
.gov__stage,.fn__step,.dt__chk,.cn2__r,.lg__m{opacity:1}
.hc__q,.hc__ans,.lg__ans,.cn2__note,.dt__ev,.hc__count,.gov__tag{opacity:1;transform:none}
.hc__pile i{transform:none}
}
/* ───────── Platform hero: the platform actually doing a job ────────
Earlier versions animated a diagram of the architecture: connector
logos and layer names with dots moving between them. That shows
what the system is made of, never what it does.
This runs one real request end to end and names the three things
the headline promises as they happen: read in place, reason on
your hardware, write back with a receipt. The receipt at the
bottom is the artefact an architect actually asks to see. */
.pw{container-type:inline-size;position:relative;z-index:2;
border-radius:16px;border:1px solid var(--line);background:#fff;
box-shadow:var(--lift-2);overflow:hidden}
.pw__bar{display:flex;align-items:center;gap:10px;padding:13px 16px;
border-bottom:1px solid var(--line-soft);
background:linear-gradient(180deg,#fdfefe,#f7fafd)}
.pw__bar b{font:700 11px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.pw__live{display:inline-flex;align-items:center;gap:5px;
font:700 9.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--pos)}
.pw__live i{width:6px;height:6px;border-radius:999px;background:var(--pos);
animation:pwLive 1.9s ease-in-out infinite}
@keyframes pwLive{0%,100%{opacity:1}50%{opacity:.25}}
.pw__where{margin-left:auto;padding:5px 10px;border-radius:999px;border:1px solid var(--line);
background:#fff;font:600 10px/1 var(--font-mono);color:var(--ink-3)}
.pw__body{padding:18px 18px 16px;display:flex;flex-direction:column;gap:14px}
/* the request, in the words someone would actually use */
.pw__ask{display:flex;align-items:center;gap:2px;min-height:42px;padding:12px 14px;
border-radius:11px;border:1px solid var(--line);background:linear-gradient(180deg,#fff,#f8fbff);
font:600 14px/1.35 var(--font-sans);color:var(--ink)}
.pw__caret{width:2px;height:15px;background:var(--accent);opacity:0}
.pw.is-a .pw__caret{animation:pwCaret 900ms steps(1) infinite}
@keyframes pwCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
/* the three things the headline promises, happening */
.pw__steps{display:flex;flex-direction:column;gap:9px}
.pw__step{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:12px;
padding:12px 14px;border-radius:11px;border:1px solid var(--line);
background:linear-gradient(180deg,#fff,#fafcff);
opacity:.42;transition:opacity 320ms var(--ease),border-color 320ms var(--ease),
background 320ms var(--ease),box-shadow 320ms var(--ease)}
.pw__dot{display:grid;place-items:center;width:22px;height:22px;border-radius:999px;
background:var(--line);transition:background 320ms var(--ease)}
.pw__dot i{width:9px;height:9px;border-radius:999px;background:#fff;
transform:scale(.5);transition:transform 360ms cubic-bezier(.34,1.5,.5,1)}
.pw__txt b{display:block;font:700 13.5px/1.25 var(--font-sans);color:var(--ink)}
.pw__txt em{display:block;margin-top:2px;font:400 11.5px/1.2 var(--font-mono);
font-style:normal;color:var(--ink-4)}
.pw__res{font:700 12px/1.3 var(--font-mono);color:var(--pos);text-align:right;
opacity:0;transform:translateX(6px);
transition:opacity 320ms var(--ease),transform 400ms var(--ease)}
/* each step lights when it runs and stays lit behind the next */
.pw.is-b .pw__step[data-i="0"],
.pw.is-c .pw__step[data-i="0"],.pw.is-c .pw__step[data-i="1"],
.pw.is-d .pw__step,.pw.is-e .pw__step{opacity:1}
.pw.is-b .pw__step[data-i="0"],.pw.is-c .pw__step[data-i="1"],.pw.is-d .pw__step[data-i="2"]{
border-color:rgba(5,130,255,.5);background:linear-gradient(165deg,#f7fbff,#eaf3ff);
box-shadow:0 0 0 1px rgba(5,130,255,.2),0 10px 24px -14px rgba(5,130,255,.6)}
.pw.is-b .pw__step[data-i="0"] .pw__dot,.pw.is-c .pw__step[data-i="0"] .pw__dot,
.pw.is-c .pw__step[data-i="1"] .pw__dot,.pw.is-d .pw__step .pw__dot,
.pw.is-e .pw__step .pw__dot{background:var(--pos)}
.pw.is-b .pw__step[data-i="0"] .pw__dot i,.pw.is-c .pw__step[data-i="0"] .pw__dot i,
.pw.is-c .pw__step[data-i="1"] .pw__dot i,.pw.is-d .pw__step .pw__dot i,
.pw.is-e .pw__step .pw__dot i{transform:scale(1)}
.pw.is-b .pw__step[data-i="0"] .pw__res,.pw.is-c .pw__step[data-i="0"] .pw__res,
.pw.is-c .pw__step[data-i="1"] .pw__res,.pw.is-d .pw__step .pw__res,
.pw.is-e .pw__step .pw__res{opacity:1;transform:none}
/* the artefact the page is really about */
.pw__receipt{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:11px;
border:1px dashed rgba(6,122,82,.35);
background:linear-gradient(180deg,#f5fbf8,#ecf7f2);
opacity:0;transform:translateY(6px);
transition:opacity 360ms var(--ease),transform 460ms cubic-bezier(.34,1.3,.5,1)}
.pw.is-e .pw__receipt{opacity:1;transform:none}
.pw__rlbl{padding:4px 8px;border-radius:5px;background:var(--pos);color:#fff;flex:none;
font:700 9.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.pw__rrow{font:400 11.5px/1.45 var(--font-mono);color:#0a6b48}
.pw__rrow b{color:#075138}
.pw__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:12px 16px;border-top:1px solid var(--line-soft);background:var(--tint);
font:700 11px/1 var(--font-mono);color:var(--ink-4)}
.pw__foot b{color:var(--pos)}
@media (max-width:560px){
.pw__step{grid-template-columns:22px 1fr;row-gap:6px}
.pw__res{grid-column:2;text-align:left}
.pw__ask{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
.pw *{animation:none!important;transition:none!important}
.pw__step,.pw__res,.pw__receipt{opacity:1;transform:none}
.pw__dot i{transform:scale(1)}
}
/* ───────── 01 · Connect: one record, two callers ─────────
The section argues two things at once: the record you query is the
record in the system of origin, and each call executes as the
person who made it. A list of systems with timings showed neither.
So there is exactly one record on screen and it never moves, never
duplicates and never leaves its card. The only thing that changes
is which of its fields the current caller is allowed to see. The
redaction is the enforcement point, made visible. */
.rec{container-type:inline-size;position:relative;z-index:2;
border-radius:16px;border:1px solid var(--line);background:#fff;
box-shadow:var(--lift-2);overflow:hidden}
.rec__bar{display:flex;align-items:center;gap:10px;padding:13px 16px;
border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,#fdfefe,#f7fafd)}
.rec__bar b{font:700 11px/1 var(--font-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.rec__src{margin-left:auto;padding:5px 10px;border-radius:999px;border:1px solid var(--line);
background:#fff;font:600 10px/1 var(--font-mono);color:var(--ink-3)}
.rec__body{padding:20px 18px 16px;display:flex;flex-direction:column;gap:16px}
/* the single record. It is deliberately the only object here. */
.rec__card{position:relative;padding:16px 16px 6px;border-radius:13px;
border:1px solid var(--line);background:linear-gradient(180deg,#fff,#f8fbff);
box-shadow:var(--lift-1)}
.rec__ring{position:absolute;inset:-1px;border-radius:13px;pointer-events:none;
border:1.5px solid transparent;
background:linear-gradient(140deg,var(--accent),#7cbcff) border-box;
-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
opacity:0;transition:opacity 420ms var(--ease)}
.rec.is-sal .rec__ring{opacity:1}
.rec__id{font:700 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.rec__fields{margin-top:10px}
.rec__f{position:relative;display:grid;grid-template-columns:38% 1fr;align-items:center;gap:12px;
padding:9px 0;border-bottom:1px solid var(--line-soft)}
.rec__f:last-child{border-bottom:0}
.rec__f dt{font:400 12.5px/1.2 var(--font-sans);color:var(--ink-3)}
.rec__f dd{font:700 13px/1.2 var(--font-mono);color:var(--ink);
transition:filter 380ms var(--ease),opacity 380ms var(--ease)}
/* a field the caller may not see is redacted in place, not removed:
the record is unchanged, the permission is what differs */
.rec__lock{position:absolute;right:0;top:50%;transform:translateY(-50%) scale(.7);
width:16px;height:16px;border-radius:4px;background:#fdeceb;opacity:0;
transition:opacity 340ms var(--ease),transform 380ms var(--ease)}
.rec__lock::after{content:"";position:absolute;left:5px;top:4px;width:6px;height:8px;
border-radius:1.5px;border:1.5px solid #b42318;border-top-width:3px}
.rec.is-sal:not(.is-fin) .rec__f[data-vis="fin"] dd,
.rec.is-fin .rec__f[data-vis="sal"] dd{filter:blur(5px);opacity:.45}
.rec.is-sal:not(.is-fin) .rec__f[data-vis="fin"] .rec__lock,
.rec.is-fin .rec__f[data-vis="sal"] .rec__lock{opacity:1;transform:translateY(-50%) scale(1)}
/* the two callers. Only one is ever holding the record. */
.rec__callers{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rec__c{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:10px;
padding:11px 12px;border-radius:11px;border:1px solid var(--line);
background:linear-gradient(180deg,#fff,#fafcff);
opacity:.42;transition:opacity 340ms var(--ease),border-color 340ms var(--ease),
box-shadow 340ms var(--ease),background 340ms var(--ease)}
.rec__av{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;
background:var(--line);color:var(--ink-3);font:700 11px/1 var(--font-sans);
transition:background 340ms var(--ease),color 340ms var(--ease)}
.rec__who b{display:block;font:700 12.5px/1.2 var(--font-sans);color:var(--ink)}
.rec__who em{display:block;margin-top:2px;font:400 10.5px/1 var(--font-mono);font-style:normal;color:var(--ink-4)}
.rec__cnt{grid-column:2;font:700 10.5px/1 var(--font-mono);color:var(--accent-hover);
opacity:0;transition:opacity 340ms var(--ease)}
.rec.is-sal:not(.is-fin) .rec__c[data-c="sal"],.rec.is-fin .rec__c[data-c="fin"]{
opacity:1;border-color:rgba(5,130,255,.5);background:linear-gradient(165deg,#f7fbff,#eaf3ff);
box-shadow:0 0 0 1px rgba(5,130,255,.2),0 10px 24px -14px rgba(5,130,255,.6)}
.rec.is-sal:not(.is-fin) .rec__c[data-c="sal"] .rec__av,.rec.is-fin .rec__c[data-c="fin"] .rec__av{
background:linear-gradient(150deg,#3aa0ff,var(--accent));color:#fff}
.rec.is-sal:not(.is-fin) .rec__c[data-c="sal"] .rec__cnt,.rec.is-fin .rec__c[data-c="fin"] .rec__cnt{opacity:1}
.rec__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:12px 16px;border-top:1px solid var(--line-soft);background:var(--tint);
font:700 11px/1 var(--font-mono);color:var(--ink-4)}
.rec__foot b{color:var(--pos)}
@media (max-width:560px){
.rec__callers{grid-template-columns:1fr}
.rec__f{grid-template-columns:44% 1fr}
}
@media (prefers-reduced-motion:reduce){
.rec *{animation:none!important;transition:none!important}
.rec__c{opacity:1}
.rec__f dd{filter:none;opacity:1}
}
/* ═══════════ Section cards, second pass ═══════════
The connector rail was cut into four segments by the card
boundaries and ran straight into the glyphs, so it read as four
unrelated underlines rather than one process. A rail only works
when the steps are visually separate; inside a joined slab it
fights the container. The numbers already carry the sequence, so
the rail is gone and the badge and glyph are paired instead. */
/* number and glyph sit together as one unit, top left */
.deploy--flow .deploy__glyph{position:absolute;left:64px;top:24px;
width:30px;height:30px;padding:0;border-radius:9px;
background:linear-gradient(160deg,#f4f9ff,#e7f1ff);
border:1px solid rgba(5,130,255,.16);color:var(--accent-hover)}
.deploy--flow .deploy__glyph svg{width:16px;height:16px}
.deploy--flow .deploy__card::before{width:30px;height:30px;margin-bottom:18px}
/* the rail is retired; ::after goes back to being the left accent */
.deploy--flow .deploy__card::after{left:0;right:auto;top:22px;bottom:22px;
width:2px;height:auto;border-radius:2px;
background:var(--line);transition:background 340ms var(--ease)}
.deploy--flow .deploy__card:last-child::after{display:block}
.deploy--flow .deploy__card[data-done]::after{
background:linear-gradient(180deg,#bcd9ff,#8ec4ff)}
.deploy--flow .deploy__card[data-now]::after{
background:linear-gradient(180deg,var(--accent-lift),var(--accent))}
/* the live step was a heavy wash that read as clicked rather than
current; a top bar plus a light tint says the same thing quietly */
.deploy--flow .deploy__card[data-now]{
background:linear-gradient(180deg,#f7fbff 0%,#eef6ff 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.deploy--flow .deploy__card[data-done]{
background:linear-gradient(180deg,#fff 0%,#f9fcff 100%)}
.deploy--flow .deploy__card[data-now] .deploy__glyph{
background:linear-gradient(160deg,#e4f0ff,#cfe4ff);
border-color:rgba(5,130,255,.3);
box-shadow:0 2px 8px -3px rgba(5,130,255,.5);color:var(--accent-press)}
/* tighter vertical rhythm: the badge row sat a long way from the title */
.deploy--flow .deploy__card{padding:24px 24px 28px}
.deploy--flow .deploy__card h3{margin-top:0}
.deploy__card p{margin-top:8px}
@media (max-width:899px){
.deploy--flow .deploy__glyph{position:absolute;left:64px;top:24px;margin:0}
.deploy--flow .deploy__card::before{position:static}
}
/* ═══════════ Section cards, third pass ═══════════
A numbered step does not also need an icon. The badge and the
glyph were two chips of the same size sitting side by side, both
competing to be the card's anchor, and the glyph carried no
information the number and the title did not already give.
So each variant now has exactly one anchor:
flow -> the step number
set -> the glyph, because there is no number to carry it */
.deploy--flow .deploy__glyph{display:none}
/* the number is alone now, so it can carry a little more weight */
.deploy--flow .deploy__card::before{width:38px;height:38px;margin-bottom:20px;
font:700 13px/1 var(--font-mono);letter-spacing:.03em;
border-width:1.5px}
.deploy--flow .deploy__card[data-now]::before{
box-shadow:0 6px 16px -5px rgba(5,130,255,.8),0 0 0 5px rgba(5,130,255,.12)}
/* The capabilities hero holds the segment grid inside the same shell
as the copy and the figure. Once that shell became a two-column
hero the grid became a third column child, so it spans instead. */
.feat-hero > .seg-grid{grid-column:1 / -1;margin-top:clamp(28px,3.4vw,48px)}
/* ───────── Capabilities hero: one instruction, four kinds of work ──
The page claims eleven capabilities share one set of connections
and one record. A list of eleven names would only restate the nav.
This shows a single instruction turning into four different kinds
of finished work, which is the part that is hard to believe. */
.ws{container-type:inline-size;position:relative;z-index:2;height:100%;
display:flex;flex-direction:column;justify-content:space-between;gap:2.2cqw}
.ws__hd{display:flex;align-items:center;gap:1.4cqw}
.ws__ttl{font:700 1.6cqw/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.ws__badge{margin-left:auto;padding:.7cqw 1.3cqw;border-radius:999px;border:1px solid var(--line);
background:linear-gradient(180deg,#fff,#f5f9ff);
font:700 1.4cqw/1 var(--font-mono);color:var(--accent-hover)}
.ws__ask{display:flex;align-items:center;gap:.4cqw;padding:1.8cqw 2.1cqw;border-radius:1.2cqw;
border:1px solid var(--line);background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:var(--lift-1);
font:600 2cqw/1.3 var(--font-sans);color:var(--ink);min-height:6cqw}
.ws__caret{width:.35cqw;height:2.3cqw;background:var(--accent);opacity:0}
.ws.is-ask .ws__caret{animation:wsCaret 900ms steps(1) infinite}
@keyframes wsCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
/* the one instruction fanning into four */
.ws__fan{position:relative;height:3.4cqw;display:grid;grid-template-columns:repeat(4,1fr)}
.ws__fan span{justify-self:center;width:1.5px;height:100%;background:var(--line);
transform:scaleY(0);transform-origin:top center;transition:transform 420ms var(--ease),background 320ms ease}
.ws.is-a .ws__fan span:nth-child(1),.ws.is-b .ws__fan span:nth-child(-n+2),
.ws.is-c .ws__fan span:nth-child(-n+3),.ws.is-d .ws__fan span{
transform:scaleY(1);background:linear-gradient(180deg,var(--accent),#bcd9ff)}
.ws__grid{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:1.3cqw;align-content:center}
/* Pending results are present and dimmed, not hidden. Reserving
four slots and revealing them from opacity:0 left three empty
holes in the card for the first two seconds of every loop. */
.ws__out{display:grid;grid-template-columns:2.2cqw 1fr;align-items:start;gap:1.2cqw;
padding:1.6cqw 1.6cqw;border-radius:1.1cqw;border:1px solid var(--line);
background:linear-gradient(180deg,#fff,#fafcff);opacity:.42;
transition:opacity 340ms ease,border-color 320ms ease,box-shadow 320ms ease}
.ws.is-a .ws__out[data-o="a"],.ws.is-b .ws__out[data-o="b"],
.ws.is-c .ws__out[data-o="c"],.ws.is-d .ws__out[data-o="d"]{
opacity:1;border-color:rgba(6,122,82,.26);
box-shadow:0 0 0 1px rgba(6,122,82,.1),var(--lift-1)}
/* once produced, a result stays produced */
.ws.is-b .ws__out[data-o="a"],.ws.is-c .ws__out[data-o="a"],.ws.is-c .ws__out[data-o="b"],
.ws.is-d .ws__out[data-o="a"],.ws.is-d .ws__out[data-o="b"],.ws.is-d .ws__out[data-o="c"]{
opacity:1;border-color:rgba(6,122,82,.26)}
.ws__tick{width:2.2cqw;height:2.2cqw;border-radius:999px;background:var(--line);position:relative;
margin-top:.2cqw;transition:background 320ms ease}
/* the tick greens on the same phases that light the card */
.ws.is-a .ws__out[data-o="a"] .ws__tick,
.ws.is-b .ws__out[data-o="a"] .ws__tick,.ws.is-b .ws__out[data-o="b"] .ws__tick,
.ws.is-c .ws__out[data-o="a"] .ws__tick,.ws.is-c .ws__out[data-o="b"] .ws__tick,
.ws.is-c .ws__out[data-o="c"] .ws__tick,
.ws.is-d .ws__out .ws__tick{background:var(--pos)}
.ws__tick::after{content:"";position:absolute;left:34%;top:20%;width:26%;height:50%;
border:.32cqw solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}
.ws__txt b{display:block;font:700 1.85cqw/1.2 var(--font-sans);color:var(--ink)}
.ws__txt em{display:block;margin-top:.5cqw;font:400 1.5cqw/1.25 var(--font-mono);
font-style:normal;color:var(--ink-4)}
.ws__foot{display:flex;align-items:center;justify-content:space-between;gap:2cqw;
font:700 1.6cqw/1 var(--font-mono);color:var(--ink-4)}
.ws__foot b{color:var(--pos)}
@container (max-width: 430px){
.ws__ask{font-size:2.7cqw}.ws__txt b{font-size:2.5cqw}.ws__txt em{font-size:2.1cqw}
.ws__ttl,.ws__badge,.ws__foot{font-size:2.1cqw}
.ws__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
.ws *{animation:none!important;transition:none!important}
.ws__out{opacity:1;transform:none}
.ws__fan span{transform:scaleY(1)}
}
/* ───────── Pricing hero: a hundred times the people, one invoice ───
The headline is a negative claim: the bill does not move. Showing
a cost line that stays flat is the homepage's job and is already
there. This shows the consequence instead. Headcount runs to a
hundred thousand, the invoice does not change a character, and the
cost per person collapses because it is the only thing that can. */
.pr{container-type:inline-size;position:relative;z-index:2;height:100%;
display:flex;flex-direction:column;justify-content:space-between;gap:2cqw}
.pr__hd{display:flex;align-items:center;gap:1.4cqw}
.pr__ttl{font:700 1.6cqw/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.pr__badge{margin-left:auto;padding:.7cqw 1.3cqw;border-radius:999px;
border:1px solid rgba(6,122,82,.3);background:linear-gradient(180deg,#f2fbf7,#e6f6ef);
font:700 1.4cqw/1 var(--font-sans);letter-spacing:.1em;color:var(--pos)}
.pr__head{display:flex;align-items:baseline;justify-content:space-between;gap:1.6cqw}
.pr__lbl{font:700 1.5cqw/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.pr__n{font:400 5.4cqw/1 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.pr__bar{display:block;height:.9cqw;border-radius:999px;background:#eef2f7;overflow:hidden}
.pr__bar i{display:block;height:100%;width:100%;border-radius:999px;
background:linear-gradient(90deg,var(--accent),#8ac6ff);
transform:scaleX(.01);transform-origin:left center;transition:transform 2600ms cubic-bezier(.32,0,.28,1)}
.pr.is-a .pr__bar i,.pr.is-b .pr__bar i,.pr.is-c .pr__bar i{transform:scaleX(1)}
/* the invoice: deliberately never animates */
.pr__inv{display:flex;flex-direction:column;padding:1.8cqw 2cqw;border-radius:1.2cqw;
border:1px solid var(--line);background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:var(--lift-1)}
.pr__ilbl{font:700 1.4cqw/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.pr__row,.pr__total{display:flex;align-items:baseline;justify-content:space-between;gap:1.4cqw;
padding:1.1cqw 0;border-bottom:1px solid var(--line-soft)}
.pr__row em,.pr__total em{font:400 1.7cqw/1 var(--font-sans);font-style:normal;color:var(--ink-3)}
.pr__row b{font:700 1.65cqw/1 var(--font-mono);color:var(--ink)}
.pr__total{border-bottom:0;padding-bottom:0;margin-top:.4cqw}
.pr__total em{font-weight:700;color:var(--ink)}
.pr__total b{font:700 1.65cqw/1 var(--font-mono);color:var(--pos)}
.pr__row:first-of-type{margin-top:1cqw}
/* the only thing that moves */
.pr__per{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.4cqw}
.pr__plbl{font:700 1.5cqw/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.pr__ptrack{height:.9cqw;border-radius:999px;background:#eef2f7;overflow:hidden}
.pr__ptrack i{display:block;height:100%;border-radius:999px;
background:linear-gradient(90deg,#b42318,#e8a33d);
transform:scaleX(1);transform-origin:left center;transition:transform 2600ms cubic-bezier(.32,0,.28,1)}
.pr.is-a .pr__ptrack i,.pr.is-b .pr__ptrack i,.pr.is-c .pr__ptrack i{transform:scaleX(.02)}
.pr__pv{font:700 1.5cqw/1 var(--font-mono);color:var(--pos)}
.pr__foot{display:flex;align-items:center;justify-content:space-between;gap:2cqw;
font:700 1.6cqw/1 var(--font-mono);color:var(--ink-4)}
.pr__foot b{color:var(--pos)}
@container (max-width: 430px){
.pr__n{font-size:7cqw}.pr__ttl,.pr__lbl,.pr__plbl{font-size:2.1cqw}
.pr__row em,.pr__row b,.pr__total em,.pr__total b{font-size:2.3cqw}
.pr__foot,.pr__pv,.pr__badge{font-size:2.1cqw}
}
@media (prefers-reduced-motion:reduce){
.pr *{animation:none!important;transition:none!important}
.pr__bar i{transform:scaleX(1)}
.pr__ptrack i{transform:scaleX(.02)}
}
/* ───────── Solutions hub: every sector the page routes to ─────────
The figure previously showed four nodes while the copy said six
and the grid below listed six. Each node now carries the sector
and the objection that sector's page answers, which is the pairing
the hero makes. Nothing here asserts a count: the nodes are the
pages that exist, so adding a sector page means adding a node. */
.wl-node{display:flex;align-items:center;gap:7px;padding:7px 10px;white-space:nowrap}
.wl-nm{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.wl-nm b{font:700 11.5px/1.15 var(--font-sans);color:var(--ink)}
.wl-nm em{margin-top:3px;font:400 9.5px/1.1 var(--font-mono);font-style:normal;color:var(--ink-4)}
/* each sector takes its turn, so the ring reads as six live claims */
.wl-node{animation:wlNode 6.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes wlNode{
0%,82%,100%{border-color:var(--line);box-shadow:var(--lift-1)}
6%,16%{border-color:rgba(5,130,255,.5);
box-shadow:0 0 0 1px rgba(5,130,255,.25),0 10px 22px -12px rgba(5,130,255,.55)}
}
@media (max-width:560px){ .wl-nm em{display:none} }
@media (prefers-reduced-motion:reduce){ .wl-node{animation:none} }
/* The wordmark was sitting small inside the core tile. Scale the mark
up and give the tile a little more room so it reads at a glance. */
.wl-core{width:80px;height:80px;border-radius:22px}
.wl-core svg{width:52px;height:auto}
@media (max-width:560px){
.wl-core{width:64px;height:64px;border-radius:18px}
.wl-core svg{width:42px}
}
/* ═══════════════════════════════════════════════════════════════
RESOURCES AND ABOUT BARIE
Everything below was added with the nine Resources / About Barie
pages. It uses the same tokens as the rest of the sheet and adds
no new colours. Six components:
.bgrid article cards, four up blog
.tline dated timeline our-journey
.dlrow download rows desktop
.appwin static application window desktop hero
.pcard prompt card with a copy control prompt-library
.prose long-form prose policies and articles
None of it animates on its own; the shared .reveal hook still does
the entrance, so `prefers-reduced-motion` is honoured for free.
═══════════════════════════════════════════════════════════════ */
/* ───────── Footer: one footer, everywhere ─────────
The homepage carries its own footer markup and the other 36 pages
share this one. They had drifted into different column sets, so
this now reproduces the homepage's: five columns, a brand block
with the Discord button and the social row, and no tagline.
If a column is added or removed here it has to be added or removed
in index.html too, or the drift starts again. */
.footer__grid { gap: 48px; }
.footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
@media (min-width: 640px) { .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer__cols { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Discord, matching the homepage button exactly */
.footer__discord {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
margin-top: 32px;
padding: 12px 20px;
border-radius: 8px;
background: #5865f2;
color: #fff;
font-size: 14px;
font-weight: 700;
transition: opacity 180ms ease;
}
.footer__discord:hover { opacity: .9; }
.footer__discord svg { width: 18px; height: 18px; }
.footer__social {
display: flex;
gap: 12px;
margin-top: 24px;
}
.footer__social a {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--line);
color: var(--ink-3);
transition: border-color 180ms ease, color 180ms ease;
}
.footer__social a:hover { border-color: var(--accent); color: var(--accent-hover); }
.footer__social svg { width: 15px; height: 15px; }
/* ───────── Release cards ─────────
The blog index was rebuilt on .bgrid/.bcard to match the live layout, so
the .plist/.pcd card that used to serve both it and the release log has
been removed rather than left behind. */
/* release entry: version rail on the left, changes on the right */
.rel{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:18px}
.rel__item{display:grid;gap:20px;padding:24px 26px 26px;border:1px solid var(--line);
border-radius:14px;background:#fff;box-shadow:var(--lift-1)}
@media (min-width:820px){ .rel__item{grid-template-columns:190px minmax(0,1fr);gap:28px} }
.rel__v{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.rel__n{font:700 15px/1 var(--font-mono);color:var(--ink)}
.rel__d{font:600 11.5px/1 var(--font-mono);color:var(--ink-4)}
.rel__ship{font:700 9.5px/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;
color:var(--pos);background:#eef7f1;border-radius:999px;padding:6px 10px}
.rel__ship--soon{color:var(--accent-hover);background:var(--accent-soft)}
.rel__h{margin:0 0 4px;font:400 clamp(19px,1.8vw,23px)/1.3 var(--font-display);color:var(--ink)}
.rel__lede{margin:0 0 16px;font:400 13.5px/1.65 var(--font-sans);color:var(--ink-2);max-width:64ch}
.rel__list{list-style:none;margin:0;padding:0}
.rel__list li{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--line-soft);
font:400 13.5px/1.6 var(--font-sans);color:var(--ink-2)}
.rel__list li:last-child{border-bottom:0}
.rel__k{flex:0 0 auto;width:72px;font:700 9.5px/1.7 var(--font-sans);letter-spacing:.1em;
text-transform:uppercase;color:var(--ink-4)}
.rel__k[data-k=new]{color:var(--accent-hover)}
.rel__k[data-k=better]{color:var(--pos)}
/* ───────── Timeline ─────────
A rail with dated stops. The rail is a border on the list so it
cannot drift out of step with the markers. */
.tline{list-style:none;margin:38px 0 0;padding:0 0 0 30px;border-left:2px solid var(--line);display:grid;gap:34px}
.tline li{position:relative}
.tline li::before{content:"";position:absolute;left:-38px;top:5px;width:14px;height:14px;border-radius:50%;
background:#fff;border:2px solid var(--accent-lift);box-shadow:0 0 0 4px var(--accent-soft)}
.tline__when{margin:0;font:700 11px/1 var(--font-mono);letter-spacing:.06em;color:var(--accent-hover)}
.tline__h{margin:10px 0 0;font:400 clamp(19px,1.9vw,24px)/1.3 var(--font-display);color:var(--ink)}
.tline__p{margin:9px 0 0;max-width:62ch;font:400 14px/1.7 var(--font-sans);color:var(--ink-2)}
@media (max-width:560px){ .tline{padding-left:24px} .tline li::before{left:-32px} }
/* ───────── Download rows ───────── */
.dlrow{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.dlrow__a{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);
border-radius:13px;background:#fff;box-shadow:var(--lift-1);
transition:border-color 200ms ease,box-shadow 260ms var(--ease)}
.dlrow__a:hover{border-color:var(--accent-lift);box-shadow:var(--lift-blue)}
.dlrow__ico{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
background:var(--accent-soft);color:var(--accent-hover)}
.dlrow__ico svg{width:19px;height:19px}
.dlrow__t{min-width:0;display:flex;flex-direction:column;gap:3px}
.dlrow__t b{font:600 14.5px/1.3 var(--font-sans);color:var(--ink)}
.dlrow__t em{font-style:normal;font:500 12px/1.45 var(--font-mono);color:var(--ink-3)}
.dlrow__go{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
padding:9px 15px;border-radius:999px;background:var(--accent);color:#fff;
font:700 12.5px/1 var(--font-sans);white-space:nowrap}
.dlrow__go svg{width:13px;height:13px}
.dlrow__a:hover .dlrow__go{background:var(--accent-hover)}
@media (max-width:520px){ .dlrow__t em{display:none} }
/* ───────── Application window ─────────
Static on purpose. The capability pages already carry eleven
animated figures; the point here is what the app looks like, so a
drawn window says it without competing for attention. */
.appwin{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;
box-shadow:var(--lift-2);background:#fff}
.appwin__bar{display:flex;align-items:center;gap:8px;padding:11px 15px;
border-bottom:1px solid var(--line);background:var(--tint)}
.appwin__dots{display:flex;gap:6px}
.appwin__dots i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.appwin__ttl{font:700 10.5px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.appwin__off{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
border:1px solid var(--line);border-radius:999px;background:#fff;
font:700 9.5px/1 var(--font-mono);color:var(--pos);white-space:nowrap}
.appwin__off i{width:6px;height:6px;border-radius:50%;background:var(--pos);display:block}
.appwin__body{display:grid;grid-template-columns:158px minmax(0,1fr)}
@media (max-width:560px){ .appwin__body{grid-template-columns:1fr} .appwin__side{display:none} }
.appwin__side{padding:14px 12px;border-right:1px solid var(--line-soft);background:#fcfdff;display:grid;gap:4px;align-content:start}
.appwin__side b{margin:2px 0 6px;font:700 9px/1 var(--font-sans);letter-spacing:.12em;
text-transform:uppercase;color:var(--ink-4)}
.appwin__side span{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;
font:600 12px/1.2 var(--font-sans);color:var(--ink-2)}
.appwin__side span svg{width:14px;height:14px;color:var(--ink-4)}
.appwin__side span[data-on]{background:var(--accent-soft);color:var(--accent-hover)}
.appwin__side span[data-on] svg{color:var(--accent-hover)}
.appwin__main{padding:18px 20px 20px;display:grid;gap:13px;align-content:start}
.appwin__ask{margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:11px;
background:var(--tint);font:600 13px/1.5 var(--font-sans);color:var(--ink)}
.appwin__steps{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.appwin__steps li{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--line-soft);
border-radius:10px;background:#fff;font:500 12.5px/1.4 var(--font-sans);color:var(--ink-2)}
.appwin__steps svg{flex:0 0 auto;width:14px;height:14px;color:var(--pos)}
.appwin__steps em{margin-left:auto;font-style:normal;font:600 10.5px/1 var(--font-mono);color:var(--ink-4)}
.appwin__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 0;
font:700 10.5px/1.5 var(--font-mono);color:var(--ink-3)}
.appwin__foot b{margin-left:auto;color:var(--pos)}
/* ───────── Prompt card ─────────
The prompt itself is the content, so it gets the mono block and the
copy control sits with it rather than in the card footer. */
.pgrid{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px;
grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.pgrid li{min-width:0}
.pcard{display:flex;flex-direction:column;height:100%;box-sizing:border-box;padding:20px 21px 21px;
border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:var(--lift-1)}
.pcard__top{display:flex;align-items:center;gap:9px;margin:0 0 11px}
.pcard__use{font:700 9px/1 var(--font-sans);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4)}
.pcard__h{margin:0;font:600 14px/1.35 var(--font-sans);color:var(--ink)}
.pcard__pre{margin:12px 0 0;padding:14px 15px;border-radius:10px;background:var(--deep);color:#dbe7f7;
font:500 12.5px/1.62 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere}
.pcard__pre var{font-style:normal;color:var(--accent-lift)}
.pcard__note{margin:13px 0 0;font:400 12.5px/1.6 var(--font-sans);color:var(--ink-3)}
.pcard__act{display:flex;align-items:center;gap:9px;margin:auto 0 0;padding-top:17px;
border-top:1px solid var(--line-soft)}
.pcard__copy{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
border:1px solid var(--accent-lift);background:var(--accent-soft);color:var(--accent-hover);
font:700 11.5px/1 var(--font-sans);cursor:pointer;transition:background 180ms ease,color 180ms ease}
.pcard__copy:hover{background:var(--accent);color:#fff}
.pcard__copy:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pcard__copy[data-done=true]{background:#eef7f1;border-color:#9fd3ba;color:var(--pos)}
.pcard__copy svg{width:13px;height:13px}
.pcard__ct{margin-left:auto;font:600 10.5px/1 var(--font-mono);color:var(--ink-4)}
/* ───────── Long-form prose ─────────
One measure, one type scale, numbered clauses. Shared by the three
policy pages and by an article. The policies are read rather than
scanned, so the column stays narrow and the rules between clauses
do the work extra headings would otherwise have to. */
.prose{max-width:74ch;margin-top:8px}
.prose__meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 34px;padding:14px 17px;
border:1px solid var(--line);border-radius:12px;background:var(--tint);
font:600 12.5px/1.5 var(--font-sans);color:var(--ink-3)}
.prose__meta b{color:var(--ink)}
.prose section{padding-top:34px;margin-top:34px;border-top:1px solid var(--line-soft)}
.prose section:first-of-type{padding-top:0;margin-top:0;border-top:0}
.prose h2{margin:0 0 14px;font:400 clamp(21px,2.1vw,27px)/1.3 var(--font-display);color:var(--ink)}
.prose h2 .prose__n{margin-right:12px;font:700 13px/1 var(--font-mono);color:var(--accent-hover);
vertical-align:middle}
.prose h3{margin:26px 0 10px;font:700 14.5px/1.4 var(--font-sans);color:var(--ink)}
.prose p{margin:0 0 15px;font:400 14.5px/1.78 var(--font-sans);color:var(--ink-2)}
.prose p:last-child{margin-bottom:0}
.prose a{color:var(--accent-hover);text-decoration:underline;text-underline-offset:2px}
.prose ul,.prose ol{margin:0 0 15px;padding-left:22px}
.prose li{margin-bottom:9px;font:400 14.5px/1.75 var(--font-sans);color:var(--ink-2)}
.prose li:last-child{margin-bottom:0}
.prose strong{font-weight:700;color:var(--ink)}
.prose__call{margin:0 0 15px;padding:16px 18px;border-left:3px solid var(--accent-lift);
border-radius:0 11px 11px 0;background:var(--accent-soft)}
.prose__call p{margin:0;color:var(--ink)}
/* prose table: cookie categories, subject rights, retention */
.prose__tw{overflow-x:auto;margin:0 0 15px;border:1px solid var(--line);border-radius:12px;background:#fff}
.prose__t{width:100%;border-collapse:collapse;min-width:520px}
.prose__t th,.prose__t td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line-soft);
font:400 13px/1.6 var(--font-sans);color:var(--ink-2);vertical-align:top}
.prose__t th{font:700 10px/1.4 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-3);background:var(--tint);white-space:nowrap}
.prose__t tr:last-child td{border-bottom:0}
.prose__t td b{color:var(--ink)}
/* ───────── Blog index ─────────
Matches the live /blog layout rather than the section shape the rest of
the site uses: a centred title, one featured piece set image-beside-copy,
a centred search, then a four-up card grid. No kicker, no lede, no chips.
Thumbnails are painted, not photographed. The cards carry a `data-art`
value that selects one of four gradients so the index has the right
rhythm with no binary assets; in the port `.bthumb` becomes the post's
featured image and `data-art` is the fallback for posts without one. */
.bhead {
text-align: center;
/* .hero already pays the fixed header; this is the only top space */
padding-top: clamp(40px, 3.4vw, 58px);
}
.bhead h1 {
margin: 0;
font: 400 clamp(2.1rem, 4.2vw, 3.3rem)/1.15 var(--font-display);
color: var(--ink);
}
/* painted thumbnail, shared by the featured piece and the cards */
.bthumb {
display: block;
position: relative;
overflow: hidden;
border-radius: 14px;
aspect-ratio: 16 / 10;
background: linear-gradient(150deg, #1d4ed8, #0582ff 55%, #69b4ff);
box-shadow: var(--lift-1);
}
.bthumb[data-art="2"] { background: linear-gradient(150deg, #0b1220, #12305c 52%, #1d4ed8); }
.bthumb[data-art="3"] { background: linear-gradient(150deg, #0a1b33, #0f4c81 58%, #2f8fd8); }
.bthumb[data-art="4"] { background: linear-gradient(150deg, #3730a3, #4f46e5 55%, #7c6cf5); }
/* a faint plot grid, so the tile reads as a figure rather than a swatch */
.bthumb::before {
content: "";
position: absolute;
inset: 0;
opacity: .22;
background-image:
linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
background-size: 34px 34px;
-webkit-mask-image: radial-gradient(circle at 70% 20%, #000, transparent 78%);
mask-image: radial-gradient(circle at 70% 20%, #000, transparent 78%);
}
.bthumb__mark {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 9px;
border-radius: 8px;
background: rgba(11, 18, 32, .38);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.bthumb__mark svg { height: 13px; width: auto; color: #fff; }
/* the featured tile carries its headline on a band, as on the live page */
.bthumb__cap {
position: absolute;
z-index: 2;
left: 0;
bottom: 16%;
max-width: 76%;
margin: 0;
padding: 13px 20px;
border-radius: 0 10px 10px 0;
background: #4f46e5;
color: #fff;
font: 700 15px/1.35 var(--font-sans);
}
/* featured piece: image beside copy */
.bfeat {
display: grid;
gap: clamp(26px, 4vw, 54px);
margin-top: clamp(38px, 5vw, 62px);
align-items: center;
}
@media (min-width: 880px) {
.bfeat { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
}
.bfeat > a { display: block; min-width: 0; }
.bcard__row { display: flex; }
.bfeat__ttl {
margin: 14px 0 0;
font: 400 clamp(24px, 2.9vw, 35px)/1.24 var(--font-display);
color: var(--ink);
}
a:hover > .bfeat__ttl { color: var(--accent-hover); }
.bfeat__dek {
margin: 16px 0 0;
max-width: 52ch;
font: 400 15px/1.72 var(--font-sans);
color: var(--ink-2);
}
.bfeat__when {
margin: 20px 0 0;
font: 400 15px/1 var(--font-display);
color: var(--ink-2);
}
/* centred search: magnifier on the trailing edge, unlike .cat__search */
.bsearch {
position: relative;
max-width: 600px;
/* the section above owns the gap; this only centres the field */
margin: 0 auto;
}
.bsearch input {
width: 100%;
box-sizing: border-box;
padding: 15px 52px 15px 22px;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
box-shadow: var(--lift-1);
font: 500 14px/1 var(--font-sans);
color: var(--ink);
}
.bsearch input::placeholder { color: var(--ink-4); font-weight: 500; }
.bsearch input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent-lift); }
.bsearch svg {
position: absolute;
right: 21px;
top: 50%;
transform: translateY(-50%);
width: 17px;
height: 17px;
color: var(--ink-3);
pointer-events: none;
}
.bcount {
margin: 16px 0 0;
text-align: center;
font: 600 12.5px/1 var(--font-mono);
color: var(--ink-3);
min-height: 13px;
}
/* four-up card grid */
.bgrid {
list-style: none;
margin: clamp(30px, 4vw, 46px) 0 0;
padding: 0;
display: grid;
gap: 22px;
grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
}
.bgrid li { min-width: 0; }
.bcard {
display: flex;
flex-direction: column;
height: 100%;
transition: transform 260ms var(--ease);
}
.bcard:hover { transform: translateY(-3px); }
.bcard .bthumb { transition: box-shadow 260ms var(--ease); }
.bcard:hover .bthumb { box-shadow: var(--lift-blue); }
.bcard__row {
display: flex;
align-items: center;
gap: 10px;
margin: 15px 0 0;
}
.bcard__cat {
font: 400 11.5px/1 var(--font-display);
color: var(--ink-2);
background: var(--accent-soft);
border-radius: 999px;
padding: 7px 12px;
white-space: nowrap;
}
.bcard__when {
margin-left: auto;
font: 400 11.5px/1 var(--font-display);
color: var(--ink-3);
white-space: nowrap;
}
.bcard__ttl {
margin: 13px 0 0;
font: 400 16.5px/1.4 var(--font-display);
color: var(--ink);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bcard:hover .bcard__ttl { color: var(--accent-hover); }
@media (max-width: 560px) {
.bcard__cat, .bcard__when { font-size: 11px; }
}