holding the language
name plus its preview tag; without the > it would inherit the row's own
space-between and shove the tag to the far edge of the menu. */
.langswitch__menu > a, .langswitch__menu > span {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .5rem .7rem; border-radius: var(--r-sm); font-size: .875rem; color: var(--ink-3);
}
.langswitch__menu > a:hover { background: var(--accent-soft); color: var(--ink); }
.langswitch__menu > a[aria-current="true"] { color: var(--accent-text); font-weight: 600; }
.langswitch__menu > span { color: var(--muted-2); font-size: .8125rem; cursor: default; }
.langswitch__menu a > span { display: inline-flex; align-items: baseline; gap: .45rem; padding: 0; font-size: inherit; color: inherit; }
.langswitch__menu i { font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; font-style: normal; opacity: .75; color: var(--muted-2); }
.langswitch__sep { height: 1px; background: var(--line); margin: .375rem .25rem; }
.burger { display: none; }
.burger svg { width: 18px; height: 18px; }
.burger .i-x { display: none; }
.burger[aria-expanded="true"] .i-x { display: block; }
.burger[aria-expanded="true"] .i-bars { display: none; }
@media (max-width: 1040px) {
.hdr__nav, .hdr__inner > .btn--ghost { display: none; }
.burger { display: grid; }
.hdr__tools { margin-inline-start: auto; }
}
/* Locale-driven header overflow.
The five nav labels AND both CTAs are translated, so the header's intrinsic
width differs per language. Measured against the 1224px content box that
.wrap allows (max-width 1320 less two 48px gutters, so this does not improve
on a wider monitor): English needs 1184 and fits with 40px to spare, but
Turkish needs 1303, Japanese 1410, French 1419, Spanish 1441. The surplus
pushes .hdr__tools — theme toggle, language switcher, burger — past the right
edge, where body{overflow-x:hidden} clips it away silently.
A media query cannot measure text, so app.js measures and sets these classes.
Degrade in priority order, keeping the primary nav for as long as possible:
1. is-tight — drop the secondary CTA (what the ≤1040px rule already does)
2. is-snug — tighten the nav's own padding and gaps
3. is-folded — last resort, fold the nav into the burger
Step 2 exists because Japanese overran by only 9px once the secondary CTA was
gone. Folding a whole desktop nav to recover 9px is the wrong trade: the nav
is the primary navigation and matters more than the spacing around it. */
.hdr.is-tight > .hdr__inner > .btn--ghost { display: none; }
.hdr.is-snug > .hdr__inner > .hdr__nav { gap: .1rem; }
.hdr.is-snug > .hdr__inner > .hdr__nav a { padding-inline: .55rem; }
.hdr.is-snug > .hdr__inner { gap: 1rem; }
.hdr.is-folded > .hdr__inner > .btn--ghost,
.hdr.is-folded > .hdr__inner > .hdr__nav { display: none; }
.hdr.is-folded .burger { display: grid; }
.hdr.is-folded .hdr__tools { margin-inline-start: auto; }
@media (max-width: 600px) { .hdr__inner > .btn--primary { display: none; } }
.mobnav {
position: fixed; inset: 72px 0 0; z-index: 89; background: var(--bg);
padding: 1.5rem var(--gutter) 3rem; overflow-y: auto;
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.mobnav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobnav a { display: block; padding: .95rem 0; border-bottom: 1px solid var(--line); font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; color: var(--ink); }
.mobnav .btn { margin-top: 1.75rem; }
/* ══════════════════════════════════════════════════════════
HERO
══════════════════════════════════════════════════════════ */
.hero { position: relative; overflow: hidden; padding-block: clamp(2.75rem, 6vw, 5rem) clamp(3rem, 5vw, 4.5rem); }
.hero__bg {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(circle at 74% 18%, var(--glow) 0%, transparent 52%),
linear-gradient(to bottom, var(--bg-alt) 0%, var(--bg) 100%);
}
.hero__grid-lines {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: 64px 64px;
-webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
}
.hero__video {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
z-index: 0; opacity: 0; transition: opacity 1.2s var(--ease); pointer-events: none;
}
/* Match the still art exactly so the handoff to motion is invisible. */
.hero__video.is-ready { opacity: var(--hero-art-opacity); }
.hero .wrap { position: relative; z-index: 1; }
.hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 1080px) { .hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; } }
.hero h1 { font-size: clamp(2rem, 4.1vw, 3.5rem); font-weight: 800; margin-block: 1.25rem 1.5rem; line-height: 1.05; }
.hero h1 span { display: block; }
.hero h1 span + span { color: var(--ink-3); }
[data-theme="dark"] .hero h1 span + span { color: var(--accent-2); }
.hero__sub { font-size: clamp(1rem, 1.35vw, 1.1875rem); color: var(--ink-3); max-width: 34rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero__tour {
display: inline-flex; align-items: center; gap: .65rem; margin-top: 1.6rem;
font-size: .875rem; font-weight: 500; color: var(--ink-3);
transition: color .2s var(--ease);
}
.hero__tour:hover { color: var(--accent-text); }
.hero__tour i {
width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
border: 1px solid var(--line-2); transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.hero__tour:hover i { border-color: var(--accent-text); background: var(--accent-soft); }
.hero__tour svg { width: 10px; height: 10px; fill: currentColor; margin-inline-start: 2px; }
/* ── Interactive canvas stage ─────────────────────────────── */
.matrix {
position: relative; border-radius: var(--r-xl);
border: 1px solid var(--line); background: var(--surface);
box-shadow: var(--shadow-md); overflow: hidden;
}
[data-theme="dark"] .matrix { background: linear-gradient(160deg, #101319 0%, #0A0B0E 100%); }
.matrix__head {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .875rem 1.125rem; border-bottom: 1px solid var(--line);
}
.matrix__title { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.matrix__dots { display: flex; gap: .3rem; }
.matrix__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.matrix__dots i:first-child { background: var(--accent); box-shadow: 0 0 8px var(--glow-strong); }
.matrix__canvas { position: relative; width: 100%; aspect-ratio: 16 / 11; }
.matrix__canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (min-width: 1080px) { .matrix__canvas { aspect-ratio: 16 / 12; } }
.matrix__tip {
position: absolute; z-index: 4; pointer-events: none; left: 0; top: 0;
background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm);
padding: .5rem .7rem; font-size: .75rem; line-height: 1.4; color: var(--ink);
box-shadow: var(--shadow-md); max-width: 220px;
opacity: 0; transform: translateY(4px); transition: opacity .16s, transform .16s;
}
.matrix__tip.is-on { opacity: 1; transform: none; }
.matrix__tip b { display: block; font-family: var(--font-heading); font-size: .8125rem; }
.matrix__tip span { color: var(--muted); font-family: var(--font-mono); font-size: .6875rem; }
.matrix__stages {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
background: var(--line); border-top: 1px solid var(--line);
}
.matrix__stages div { background: var(--surface); padding: .7rem .75rem; }
[data-theme="dark"] .matrix__stages div { background: #0D0F13; }
.matrix__stages b { display: block; font-family: var(--font-heading); font-size: .6875rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.matrix__stages span { display: block; font-size: .625rem; color: var(--muted-2); line-height: 1.35; margin-top: .15rem; }
@media (max-width: 640px) { .matrix__stages { grid-template-columns: repeat(2, 1fr); } }
.matrix__filters {
display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
padding: .75rem 1.125rem; border-top: 1px solid var(--line);
}
.matrix__filters > span { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin-inline-end: .25rem; }
.chip {
font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em;
padding: .4rem .8rem; border-radius: var(--r-pill);
border: 1px solid var(--control-line); color: var(--muted); background: transparent;
transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.chip:hover { border-color: var(--accent-text); color: var(--accent-text); }
.chip[aria-pressed="true"] {
background: var(--accent); border-color: var(--accent-text); color: var(--accent-ink);
box-shadow: 0 0 16px var(--glow);
}
/* ══════════════════════════════════════════════════════════
TRUST BAR
══════════════════════════════════════════════════════════ */
.trustbar { border-block: 1px solid var(--line); background: var(--bg-alt); }
.trustbar ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.trustbar li { padding: clamp(1.5rem,2.6vw,2.25rem) 1.25rem; text-align: center; position: relative; }
.trustbar li + li::before { content: ''; position: absolute; inset-inline-start: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line); }
.trustbar b {
display: block; font-family: var(--font-heading); font-weight: 800;
font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -.04em; color: var(--ink); line-height: 1;
}
.trustbar b em { font-style: normal; font-size: .55em; color: var(--accent-text); margin-inline-start: .04em; }
.trustbar b.is-small { font-size: clamp(.875rem, 1.5vw, 1.0625rem); letter-spacing: -.01em; font-family: var(--font-mono); font-weight: 500; }
.trustbar span { display: block; font-size: .8125rem; color: var(--muted); margin-top: .6rem; line-height: 1.45; }
@media (max-width: 880px) {
.trustbar ul { grid-template-columns: repeat(2, 1fr); }
.trustbar li:nth-child(odd)::before { display: none; }
.trustbar li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
/* ══════════════════════════════════════════════════════════
SHARED CARD
══════════════════════════════════════════════════════════ */
.card {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-lg); padding: clamp(1.35rem, 2.2vw, 1.85rem);
transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.card:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); }
.card__n { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; color: var(--accent-text); }
.card h3 { font-size: 1.0625rem; margin-block: .7rem .5rem; }
.card p { font-size: .9375rem; color: var(--muted); }
/* ══════════════════════════════════════════════════════════
SECTION 2 — PLATFORM ENGINE
══════════════════════════════════════════════════════════ */
.engine__layout { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 1024px) { .engine__layout { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: start; } }
.modlist { display: grid; gap: .625rem; }
.modlist button {
display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; align-items: center;
width: 100%; text-align: start; padding: 1rem 1.15rem;
border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
transition: border-color .22s var(--ease), background-color .22s var(--ease), box-shadow .22s var(--ease);
}
.modlist button:hover { border-color: var(--line-2); }
.modlist button[aria-selected="true"] {
border-color: var(--accent-text); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-line);
}
.modlist__n {
grid-row: span 2; width: 38px; height: 38px; border-radius: 50%;
display: grid; place-items: center; font-family: var(--font-mono); font-size: .75rem;
border: 1px solid var(--line-2); color: var(--muted);
transition: all .22s var(--ease);
}
.modlist button[aria-selected="true"] .modlist__n {
background: var(--accent); border-color: var(--accent-text); color: var(--accent-ink); box-shadow: 0 0 14px var(--glow);
}
.modlist__name { font-family: var(--font-heading); font-weight: 600; font-size: .9375rem; color: var(--ink); letter-spacing: -.01em; }
.modlist__stage { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.modpanel {
border: 1px solid var(--line); border-radius: var(--r-lg);
background: var(--surface); overflow: hidden; min-height: 420px;
}
.modpanel__viz { position: relative; aspect-ratio: 16 / 8; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
[data-theme="dark"] .modpanel__viz { background: #0B0D11; }
.modpanel__viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.modpanel__body { padding: clamp(1.35rem, 2.4vw, 2rem); }
.modpanel__body h3 { font-size: clamp(1.15rem, 1.9vw, 1.5rem); margin-bottom: .75rem; }
.modpanel__role { color: var(--muted); font-size: .9375rem; }
.modpanel__meta { margin-top: 1.5rem; display: grid; gap: 1.15rem; }
.modpanel__label { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: .4rem; }
.modpanel__preview { font-size: .875rem; color: var(--ink-3); }
.endpoints { display: grid; gap: .3rem; }
.endpoints code {
font-family: var(--font-mono); font-size: .75rem; color: var(--ink-3);
background: var(--code-bg); border: 1px solid var(--line);
border-radius: var(--r-sm); padding: .45rem .65rem; display: block;
}
.endpoints code b { color: var(--accent-text); font-weight: 500; }
/* ══════════════════════════════════════════════════════════
SECTION 3 — USE CASES
══════════════════════════════════════════════════════════ */
.uc__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-bottom: 2rem; }
.segmented {
display: inline-flex; padding: 4px; gap: 2px;
border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
}
.segmented button {
padding: .5rem 1rem; border-radius: var(--r-pill); font-size: .8125rem; font-weight: 500; color: var(--muted);
transition: background-color .2s var(--ease), color .2s var(--ease);
}
.segmented button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.chiprow { display: flex; flex-wrap: wrap; gap: .4rem; }
.uccard {
position: relative; display: flex; flex-direction: column; overflow: hidden;
border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
padding: clamp(1.4rem, 2.4vw, 2rem);
transition: border-color .28s var(--ease), box-shadow .28s var(--ease), opacity .28s var(--ease), transform .28s var(--ease);
}
.uccard::after {
content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px;
border-radius: 50%; background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
opacity: 0; transition: opacity .35s var(--ease); pointer-events: none;
}
.uccard:hover { border-color: var(--accent-line); box-shadow: var(--shadow-md); }
.uccard:hover::after { opacity: 1; }
.uccard.is-dimmed { opacity: .32; filter: saturate(.5); }
.uccard.is-hidden { display: none; }
.uccard__ico { width: 40px; height: 40px; color: var(--accent-text); margin-bottom: 1.1rem; }
.uccard h3 { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); }
.uccard__sum { color: var(--muted); font-size: .9375rem; margin-top: .55rem; }
.uccard__action {
margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px dashed var(--line-2);
font-size: .875rem; color: var(--ink-3);
}
.uccard__action b { display: block; font-family: var(--font-mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: .35rem; font-weight: 500; }
.uccard__more { margin-top: 1.25rem; font-size: .875rem; font-weight: 600; color: var(--accent-text); display: inline-flex; align-items: center; gap: .4rem; }
.uccard__more svg { width: 13px; height: 13px; transition: transform .2s var(--ease); }
.uccard:hover .uccard__more svg { transform: translateX(3px); }
.personacard {
margin-top: clamp(1.25rem, 2vw, 1.75rem);
border: 1px solid var(--accent-line); border-radius: var(--r-lg);
background: var(--accent-soft); padding: clamp(1.35rem, 2.4vw, 2rem);
display: grid; gap: 1.25rem; align-items: center;
}
@media (min-width: 780px) { .personacard { grid-template-columns: auto 1fr auto; gap: 2rem; } }
.personacard[hidden] { display: none; }
.personacard__metric { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -.045em; color: var(--accent-text); line-height: 1; }
.personacard__unit { display: block; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-top: .5rem; font-weight: 500; }
.personacard__name { font-family: var(--font-heading); font-weight: 700; font-size: 1.0625rem; color: var(--ink); }
.personacard__value { color: var(--ink-3); font-size: .9375rem; margin-top: .35rem; }
/* ══════════════════════════════════════════════════════════
SECTION 4 — GOVERNANCE & TRUST
══════════════════════════════════════════════════════════ */
.trustsec { background: var(--bg-deep); }
[data-theme="dark"] .trustsec { background: #0F1117; }
.trustsec__grid-lines {
position: absolute; inset: 0; pointer-events: none; opacity: .8;
background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: 48px 48px;
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
.trustsec .wrap { position: relative; z-index: 1; }
.boundary {
border: 1px solid var(--line); border-radius: var(--r-xl);
background: var(--surface); overflow: hidden; box-shadow: var(--shadow-md);
}
[data-theme="dark"] .boundary { background: #0A0B0E; }
.boundary__canvas { position: relative; width: 100%; aspect-ratio: 16 / 7.5; }
.boundary__canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 720px) { .boundary__canvas { aspect-ratio: 4 / 5; } }
.boundary__legend {
display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
border-top: 1px solid var(--line);
}
.boundary__legend > div { background: var(--surface); padding: 1rem 1.15rem; }
[data-theme="dark"] .boundary__legend > div { background: #0D0F13; }
.boundary__legend h3 { font-size: .875rem; display: flex; align-items: center; gap: .5rem; }
.boundary__legend h3 i { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.boundary__legend .in i { background: var(--accent); box-shadow: 0 0 10px var(--glow-strong); }
.boundary__legend .out i { background: var(--muted-2); }
.boundary__legend p { font-size: .75rem; color: var(--muted-2); margin-top: .3rem; font-family: var(--font-mono); letter-spacing: .04em; }
.boundary__legend ol { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; }
.boundary__legend li { font-family: var(--font-mono); font-size: .6875rem; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: .25rem .55rem; }
@media (max-width: 620px) { .boundary__legend { grid-template-columns: 1fr; } }
.pillars { display: grid; gap: clamp(.875rem, 1.5vw, 1.25rem); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 800px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { position: relative; padding-top: 1.5rem; }
.pillar__n {
font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em; color: var(--accent-text);
display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .75rem;
}
.pillar__n::after { content: ''; width: 28px; height: 1px; background: var(--accent-line); }
.pillar h3 { font-size: 1.0625rem; margin-bottom: .5rem; }
.pillar p { font-size: .9375rem; color: var(--muted); }
.badges { display: grid; gap: .75rem; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 700px) { .badges { grid-template-columns: repeat(4, 1fr); } }
.badge {
border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
padding: 1.1rem 1.15rem; text-align: start;
transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.badge:hover { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.badge svg { width: 22px; height: 22px; color: var(--accent-text); margin-bottom: .8rem; }
.badge b { display: block; font-family: var(--font-heading); font-size: .8125rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.badge span { display: block; font-family: var(--font-mono); font-size: .625rem; letter-spacing: .07em; color: var(--muted-2); margin-top: .35rem; line-height: 1.55; }
.cisoblock {
margin-top: clamp(1.5rem, 3vw, 2.5rem);
border: 1px solid var(--accent-line); border-radius: var(--r-lg);
background: var(--accent-soft); padding: clamp(1.5rem, 3vw, 2.25rem);
display: grid; gap: 1.5rem;
}
@media (min-width: 900px) { .cisoblock { grid-template-columns: 1fr auto; align-items: center; } }
.cisoblock h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
.cisoblock p { color: var(--ink-3); font-size: .9375rem; margin-top: .6rem; max-width: 40rem; }
.cisoblock__cta { display: flex; flex-wrap: wrap; gap: .625rem; }
/* .btn is nowrap, which a long CTA label cannot survive on a phone: at 375px the
card offers 287px inside its padding while the whitepaper button wants 397px,
and the page scrolled sideways. Let these two wrap and cap them at the card
width — sized by the container rather than by any one locale's string, since
German and Turkish run longer than English here. */
.cisoblock__cta .btn { white-space: normal; max-width: 100%; }
/* ══════════════════════════════════════════════════════════
SECTION 5A — ROI CALCULATOR
══════════════════════════════════════════════════════════ */
.roi { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 940px) { .roi { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: start; } }
.roi__panel { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: clamp(1.4rem, 2.6vw, 2rem); }
.field + .field { margin-top: 1.75rem; }
.field__label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.field__label label { font-size: .875rem; font-weight: 600; color: var(--ink); }
.field__val { font-family: var(--font-mono); font-size: 1rem; font-weight: 500; color: var(--accent-text); }
input[type="range"] {
-webkit-appearance: none; appearance: none; width: 100%; height: 4px;
background: var(--control-line); border-radius: var(--r-pill); cursor: pointer;
}
/* This rule used to carry an unconditional `outline: none`. At specificity
(0,1,1) it beat the global :focus-visible ring at (0,1,0) on both specificity
and order, and — unlike every other outline:none in this file — shipped no
replacement, so #roiSpend, the sole input of the ROI calculator, had no focus
indicator at all. A 4px-tall track needs a little more offset to read. */
input[type="range"]:focus-visible { outline-offset: 6px; }
/* Additive: the first layer keeps the thumb's resting accent ring, the last two
add the focus halo. Replacing the shadow outright would drop the glow the
thumb has at rest and make focus read as *less* prominent. */
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--accent), 0 0 0 3px var(--surface), 0 0 0 5px var(--focus-ring); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--accent), 0 0 0 3px var(--surface), 0 0 0 5px var(--focus-ring); }
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
background: var(--accent); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--accent), 0 2px 10px var(--glow-strong);
cursor: grab;
}
input[type="range"]::-moz-range-thumb {
width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--accent); cursor: grab;
}
.field__ticks { display: flex; justify-content: space-between; margin-top: .55rem; font-family: var(--font-mono); font-size: .625rem; color: var(--muted-2); }
.optrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.optrow--4 { grid-template-columns: repeat(4, 1fr); }
.optrow button {
padding: .625rem .5rem; border: 1px solid var(--control-line); border-radius: var(--r-sm);
font-size: .8125rem; color: var(--muted); text-align: center;
transition: all .2s var(--ease);
}
.optrow button:hover { border-color: var(--accent-text); color: var(--accent-text); }
.optrow button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent-text); color: var(--accent-ink); font-weight: 600; }
.roi__out {
border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
background: var(--surface); box-shadow: var(--shadow-md);
}
[data-theme="dark"] .roi__out { background: linear-gradient(165deg, #14171D 0%, #0A0B0E 100%); }
.roi__hero { padding: clamp(1.5rem, 3vw, 2rem); border-bottom: 1px solid var(--line); text-align: center; position: relative; overflow: hidden; }
.roi__hero::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 50% 0%, var(--glow) 0%, transparent 65%); pointer-events: none;
}
.roi__hero > * { position: relative; }
.roi__hero .k { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.roi__hero .v { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2.5rem, 6vw, 3.5rem); letter-spacing: -.05em; color: var(--accent-text); line-height: 1.05; margin-top: .4rem; }
.roi__hero .s { font-size: .875rem; color: var(--muted); margin-top: .35rem; }
.roi__rows { display: grid; }
.roi__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.25rem; border-bottom: 1px solid var(--line); }
.roi__row .k { font-size: .8125rem; color: var(--muted); }
.roi__row .v { font-family: var(--font-mono); font-size: .875rem; font-weight: 500; color: var(--ink); text-align: end; }
.roi__row .v.ok { color: var(--accent-text); }
.roi__foot { padding: 1.1rem 1.25rem; }
.roi__foot p { font-size: .6875rem; color: var(--muted-2); line-height: 1.6; margin-top: .8rem; }
/* ══════════════════════════════════════════════════════════
SECTION 5B — BRIEFING FORM
══════════════════════════════════════════════════════════ */
.briefing { position: relative; overflow: hidden; }
.briefing__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 960px) { .briefing__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: start; } }
.briefing h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-block: 1rem 1rem; }
.form { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow-md); }
.form__row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.form__group { margin-bottom: 1.15rem; }
.form label.lbl { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink); margin-bottom: .45rem; }
.form label.lbl em { font-style: normal; color: var(--accent-text); }
.form input[type="text"], .form input[type="email"], .form select, .form textarea {
width: 100%; padding: .8rem .95rem; border: 1px solid var(--control-line); border-radius: var(--r-sm);
background: var(--bg); color: var(--ink); font-size: .9375rem;
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form textarea { resize: vertical; min-height: 96px; }
.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
.form :is(input,select,textarea):focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft); }
.form .hint { font-size: .75rem; color: var(--muted-2); margin-top: .4rem; }
.form .err { font-size: .75rem; color: var(--danger); margin-top: .4rem; display: none; }
.form .form__group.has-error .err { display: block; }
/* Colour is not the only error signal: the border also thickens, so the state
survives a monochrome display and WCAG 1.4.1. */
.form .form__group.has-error :is(input,select,textarea) { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.checkline { display: flex; gap: .65rem; align-items: flex-start; font-size: .8125rem; color: var(--muted); }
.checkline input { margin-top: .18rem; width: 16px; height: 16px; accent-color: var(--accent-text); flex-shrink: 0; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.formmsg { border-radius: var(--r-md); padding: 1rem 1.15rem; font-size: .875rem; margin-bottom: 1.15rem; display: none; }
.formmsg.is-on { display: block; }
.formmsg--ok { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--ink); }
.formmsg--err { background: var(--danger-soft); border: 1px solid var(--danger-line); color: var(--danger); }
.formmsg--err b { color: var(--danger); }
.formmsg b { display: block; font-family: var(--font-heading); margin-bottom: .2rem; color: var(--ink); }
/* ══════════════════════════════════════════════════════════
SECTION 5C — REGIONAL HUBS
══════════════════════════════════════════════════════════ */
.hubs { display: grid; gap: .75rem; }
@media (min-width: 700px) { .hubs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .hubs { grid-template-columns: repeat(4, 1fr); } }
.hub {
border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
padding: 1.25rem 1.3rem; transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.hub:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); }
.hub__status { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.hub__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); flex-shrink: 0; }
.hub[data-state="live"] .hub__dot { background: #2FD98B; box-shadow: 0 0 0 0 rgba(47,217,139,.55); animation: pulse 2.4s infinite; }
.hub[data-state="setup"] .hub__dot { background: var(--accent); box-shadow: 0 0 0 0 var(--glow-strong); animation: pulse 2.4s infinite .4s; }
.hub[data-state="review"] .hub__dot { background: #FFB74D; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .hub__dot { animation: none !important; } }
/* Regional hub world map. Dot-matrix landmass on the same grid language as the
rest of the page; pins reuse the hub cards' own state colours so the map and
the cards above it can never disagree. Rendered only where a page opts in
via $hubsMap -- the home page does not. */
.hubmap {
margin-top: clamp(1rem, 2vw, 1.5rem);
border: 1px solid var(--line); border-radius: var(--r-lg);
background: var(--surface); overflow: hidden; padding: clamp(1rem, 2vw, 1.75rem);
position: relative;
transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
[data-theme="dark"] .hubmap { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.08); }
.hubmap::after {
content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px;
border-radius: 50%; background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
opacity: 0; transition: opacity .35s var(--ease); pointer-events: none;
}
.hubmap:hover::after { opacity: 1; }
.hubmap:hover { border-color: var(--accent-line); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.hubmap svg { display: block; width: 100%; height: auto; }
.hubmap__land { fill: var(--accent); opacity: .34; transition: opacity .3s var(--ease); }
[data-theme="dark"] .hubmap__land { opacity: .3; }
.hubmap:hover .hubmap__land { opacity: .5; }
/* Pin colours are the hub dot colours, kept in one place per state. */
.hubmap__pin { --pin: var(--muted-2); }
.hubmap__pin[data-state="live"] { --pin: #2FD98B; }
.hubmap__pin[data-state="setup"] { --pin: var(--accent); }
.hubmap__pin[data-state="review"] { --pin: #FFB74D; }
.hubmap__dot { fill: var(--pin); }
.hubmap__ring { fill: none; stroke: var(--pin); stroke-width: 1; opacity: .55; }
.hubmap__halo { fill: var(--pin); opacity: .12; }
.hubmap__lbl {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em;
fill: var(--ink); opacity: .8;
}
/* Only the two live-ish states pulse, matching the cards: review is static. */
.hubmap__pin[data-state="live"] .hubmap__halo,
.hubmap__pin[data-state="setup"] .hubmap__halo {
transform-box: fill-box; transform-origin: center;
animation: co-wave 3.2s var(--ease) infinite;
}
.hubmap__pin[data-state="setup"] .hubmap__halo { animation-delay: .8s; }
@media (max-width: 560px) { .hubmap__lbl { display: none; } }
@media (prefers-reduced-motion: reduce) { .hubmap__halo { animation: none !important; } }
.hub h3 { font-size: 1rem; margin-top: .9rem; }
.hub .country { font-family: var(--font-mono); font-size: .6875rem; color: var(--accent-text); letter-spacing: .08em; text-transform: uppercase; margin-top: .3rem; }
.hub p { font-size: .8125rem; color: var(--muted); margin-top: .55rem; }
/* ══════════════════════════════════════════════════════════
PULL QUOTE
══════════════════════════════════════════════════════════ */
.pullquote { max-width: 52rem; margin-inline: auto; text-align: center; }
.pullquote svg { width: 34px; height: 34px; color: var(--accent-text); margin-inline: auto; margin-bottom: 1.5rem; opacity: .8; }
.pullquote blockquote { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.25rem, 3vw, 2rem); letter-spacing: -.03em; line-height: 1.3; color: var(--ink); }
.pullquote cite { display: block; font-style: normal; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 1.5rem; }
/* ══════════════════════════════════════════════════════════
FOOTER
══════════════════════════════════════════════════════════ */
.ftr { background: var(--bg-deep); border-top: 1px solid var(--line); position: relative; overflow: hidden; }
[data-theme="dark"] .ftr { background: #07080A; }
.ftr__map {
position: absolute; inset: auto 0 0 0; height: 70%; pointer-events: none;
opacity: .28; color: var(--accent-text);
-webkit-mask-image: linear-gradient(to top, #000, transparent);
mask-image: linear-gradient(to top, #000, transparent);
}
.ftr .wrap { position: relative; z-index: 1; }
.ftr__top { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 1000px) { .ftr__top { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); } }
.ftr__brand p { font-size: .8125rem; color: var(--muted); margin-top: 1rem; max-width: 22rem; }
.ftr__brand .desc { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .13em; text-transform: uppercase; color: var(--accent-text); margin-top: .85rem; }
.ftr__cols { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .ftr__cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .ftr__cols { grid-template-columns: repeat(5, 1fr); } }
.ftr__cols h4 { font-family: var(--font-mono); font-size: .625rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: 1rem; }
.ftr__cols li + li { margin-top: .55rem; }
/* Sub-section heading inside a column, for the Industry / Persona split. Quieter
than the column title above it, with room over it to separate the groups. */
.ftr__sub {
font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .16em;
text-transform: uppercase; color: var(--accent-text); opacity: .9;
}
.ftr__cols li + .ftr__sub { margin-top: 1.15rem; }
.ftr__cols a, .ftr__cols span { font-size: .8125rem; color: var(--muted); transition: color .2s var(--ease); }
.ftr__cols a:hover { color: var(--accent-text); }
.ftr__cols span { display: inline-flex; align-items: center; gap: .4rem; opacity: .6; cursor: default; }
.ftr__cols span i { font-style: normal; font-family: var(--font-mono); font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--line-2); border-radius: 3px; padding: .1rem .25rem; }
.ftr__certs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-block: 1.5rem; border-top: 1px solid var(--line); }
.ftr__certs > b { font-family: var(--font-mono); font-size: .625rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-inline-end: .5rem; }
.certchip {
display: inline-flex; align-items: center; gap: .4rem;
font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .05em; color: var(--muted);
border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: .35rem .6rem;
filter: grayscale(1); transition: filter .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.certchip:hover { filter: none; color: var(--ink); border-color: var(--accent-line); }
.certchip svg { width: 12px; height: 12px; color: var(--accent-text); }
.ftr__bottom { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; padding-block: 1.5rem; border-top: 1px solid var(--line); }
.ftr__bottom p, .ftr__bottom a { font-size: .75rem; color: var(--muted); }
.ftr__bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.ftr__bottom a:hover { color: var(--accent-text); }
/* ══════════════════════════════════════════════════════════
MODAL
══════════════════════════════════════════════════════════ */
.modal {
position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
padding: var(--gutter); background: rgba(10,11,14,.72);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__box {
width: min(920px, 100%); max-height: 88vh; overflow-y: auto;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
box-shadow: 0 30px 80px rgba(0,0,0,.4); transform: translateY(10px) scale(.98);
transition: transform .3s var(--ease);
}
.modal.is-open .modal__box { transform: none; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.5rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.modal__head h3 { font-size: 1.0625rem; }
.modal__body { padding: clamp(1.25rem, 3vw, 2rem); }
.tourlist li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.tourlist li:last-child { border-bottom: 0; }
.tourlist time { font-family: var(--font-mono); font-size: .75rem; color: var(--accent-text); }
.tourlist b { display: block; font-family: var(--font-heading); font-size: .875rem; color: var(--ink); margin-bottom: .3rem; }
.tourlist p { font-size: .875rem; color: var(--muted); }
.modal video { width: 100%; border-radius: var(--r-md); background: #000; }
/* ══════════════════════════════════════════════════════════
COOKIE BANNER
══════════════════════════════════════════════════════════ */
.cookie {
position: fixed; inset-inline-start: var(--gutter); bottom: var(--gutter); z-index: 110;
width: min(420px, calc(100vw - var(--gutter) * 2));
background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
box-shadow: var(--shadow-md); padding: 1.35rem 1.5rem;
transform: translateY(20px); opacity: 0; visibility: hidden;
transition: transform .35s var(--ease), opacity .35s var(--ease), visibility .35s;
}
.cookie.is-on { transform: none; opacity: 1; visibility: visible; }
.cookie h4 { font-size: .9375rem; margin-bottom: .5rem; }
.cookie p { font-size: .8125rem; color: var(--muted); }
.cookie p a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.cookie__cta { display: flex; gap: .5rem; margin-top: 1.15rem; }
/* ══════════════════════════════════════════════════════════
SOLUTION (USE-CASE DEEP DIVE) PAGES
══════════════════════════════════════════════════════════ */
.pagehero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
.pagehero__bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 100% at 80% 0%, var(--glow) 0%, transparent 62%); }
.pagehero .wrap { position: relative; z-index: 1; }
.crumbs { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--muted-2); margin-bottom: 1.5rem; }
.crumbs a:hover { color: var(--accent-text); }
.crumbs svg { width: 11px; height: 11px; opacity: .5; }
.pagehero h1 { font-size: clamp(1.9rem, 4.4vw, 3.15rem); font-weight: 800; margin-block: 1rem 1.15rem; max-width: 20ch; }
/* Use-case titles are long — 16 of the 42 spill past two lines at 20ch. 24ch puts 38 of
them on exactly two and leaves no four-line case. Scoped, so the other page heroes
keep their own measure; below ~800px the container binds first and this does nothing. */
.pagehero--uc h1 { max-width: 24ch; }
.pagehero .lede { max-width: 46rem; color: var(--muted); }
.pagehero__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.metachip { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: .4rem .8rem; background: var(--surface); }
.solgrid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 1000px) { .solgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); align-items: start; } }
.solblock + .solblock { margin-top: clamp(2.5rem, 5vw, 4rem); }
.solblock > .eyebrow { margin-bottom: 1rem; }
.solblock h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); margin-bottom: 1.25rem; }
.solblock .painlist li { position: relative; padding-inline-start: 1.65rem; color: var(--ink-3); font-size: 1rem; }
.solblock .painlist li + li { margin-top: .85rem; }
.solblock .painlist li::before {
content: ''; position: absolute; inset-inline-start: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%;
border: 2px solid var(--accent);
}
.steps { display: grid; gap: 1rem; counter-reset: s; }
.step {
position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.25rem;
border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 1.35rem 1.5rem;
}
.step__n {
width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-text);
font-family: var(--font-mono); font-size: .8125rem; font-weight: 500;
}
.step h3 { font-size: 1rem; }
.step .mods { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin-top: .3rem; }
.step p { font-size: .9375rem; color: var(--muted); margin-top: .7rem; }
.roilist { display: grid; gap: .75rem; }
@media (min-width: 700px) { .roilist { grid-template-columns: repeat(3, 1fr); } }
.roilist li {
border: 1px solid var(--line); border-inline-start: 1px solid var(--line); border-radius: var(--r-md);
background: var(--surface); padding: 1.25rem 1.3rem; font-size: .9375rem; color: var(--ink-3);
}
.roilist svg { width: 18px; height: 18px; color: var(--accent-text); margin-bottom: .8rem; }
.ahaquote {
border: 1px solid var(--accent-line); border-radius: var(--r-lg);
background: var(--accent-soft); padding: clamp(1.5rem, 3vw, 2.25rem);
}
.ahaquote blockquote { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.0625rem, 1.9vw, 1.3rem); line-height: 1.5; letter-spacing: -.02em; color: var(--ink); }
.ahaquote footer { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.ahaquote .av { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; color: var(--accent-ink); font-family: var(--font-mono); font-size: .75rem; flex-shrink: 0; }
.ahaquote cite { font-style: normal; display: block; font-size: .875rem; font-weight: 600; color: var(--ink); }
.ahaquote .org { font-size: .75rem; color: var(--muted); }
.solaside { position: sticky; top: 96px; display: grid; gap: 1rem; }
.solaside__box { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 1.4rem 1.5rem; }
.solaside__box h3 { font-size: .9375rem; margin-bottom: 1rem; }
.solaside__box li + li { margin-top: .7rem; }
.solaside__box li { font-size: .8125rem; color: var(--muted); display: flex; gap: .6rem; align-items: flex-start; }
.solaside__box li b { color: var(--ink); font-weight: 600; }
.solaside__box .num { font-family: var(--font-mono); font-size: .625rem; color: var(--accent-text); border: 1px solid var(--accent-line); border-radius: 4px; padding: .1rem .3rem; flex-shrink: 0; margin-top: .1rem; }
/* Modules engaged by *this* workflow, cross-referenced against the step
sub-headings. --ink is the maximum-contrast foreground: literally white in
dark theme, near-black in light. Hard-coding #fff would erase the engaged
modules on the light canvas, which is what every first-time visitor sees.
The dimming is reinforced by a visually-hidden label, so the distinction is
not carried by colour alone (WCAG 1.4.1). */
/* Dimmed by colour only — no opacity. An opacity of .55 on --muted-2 measured
2.13:1 against the box, under the 4.5:1 this text needs; these rows still
carry readable information (which modules the workflow does *not* touch).
--muted-2 alone is 4.76:1 against --ink's 19.68:1, which reads as dimmed. */
.solaside__box li.is-idle { color: var(--muted-2); }
.solaside__box li.is-idle b { color: var(--muted-2); font-weight: 500; }
.solaside__box li.is-idle .num { color: var(--muted-2); border-color: var(--line-2); }
.solaside__box li.is-engaged b { color: var(--ink); }
@media (max-width: 999px) { .solaside { position: static; } }
.nextcase { border-top: 1px solid var(--line); }
.nextcase a { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: clamp(2rem, 4vw, 3rem); }
.nextcase .k { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.nextcase h3 { font-size: clamp(1.15rem, 2.4vw, 1.75rem); margin-top: .6rem; transition: color .2s var(--ease); }
.nextcase a:hover h3 { color: var(--accent-text); }
.nextcase svg { width: 26px; height: 26px; color: var(--accent-text); flex-shrink: 0; transition: transform .25s var(--ease); }
.nextcase a:hover svg { transform: translateX(6px); }
/* Paired prev/next. Single column on small screens — a half-width headline at
1.15rem wraps to four lines otherwise. */
.nextcase__pair { display: grid; }
.nextcase__pair a { gap: 1.15rem; }
.nextcase__pair a + a { border-top: 1px solid var(--line); }
.nextcase__prev { justify-content: flex-start; }
.nextcase__prev svg { transform: rotate(180deg); }
.nextcase__prev:hover svg { transform: rotate(180deg) translateX(6px); }
@media (min-width: 760px) {
.nextcase__pair { grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 4vw, 3.5rem); }
.nextcase__pair a + a { border-top: 0; border-inline-start: 1px solid var(--line); padding-inline-start: clamp(1.5rem, 4vw, 3.5rem); }
.nextcase__next { text-align: end; }
}
/* ══════════════════════════════════════════════════════════
LEGAL / PROSE
══════════════════════════════════════════════════════════ */
.prose { max-width: 46rem; }
.prose h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin-block: 2.5rem 1rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 1rem; color: var(--ink-3); }
.prose p:last-child { margin-bottom: 0; }
.draftnote {
border: 1px dashed var(--line-2); border-radius: var(--r-md); padding: .9rem 1.15rem;
font-size: .8125rem; color: var(--muted); margin-bottom: 2.5rem;
display: flex; gap: .7rem; align-items: flex-start;
}
.draftnote svg { width: 16px; height: 16px; color: var(--accent-text); flex-shrink: 0; margin-top: .12rem; }
/* ══════════════════════════════════════════════════════════
404
══════════════════════════════════════════════════════════ */
.nf { min-height: 62vh; display: grid; place-items: center; text-align: center; }
.nf h1 { font-size: clamp(2.25rem, 6vw, 4rem); font-weight: 800; }
.nf p { color: var(--muted); margin-block: 1rem 2rem; }
/* ══════════════════════════════════════════════════════════
MOTION & UTILITIES
══════════════════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .07s; }
.reveal:nth-child(3) { transition-delay: .14s; }
.reveal:nth-child(4) { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
.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;
}
[hidden] { display: none !important; }
.stagebar { display: none; }
/* Staging ribbon */
.stagebadge {
position: fixed; left: 0; bottom: 0; z-index: 130;
font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .16em; text-transform: uppercase;
background: var(--accent); color: var(--accent-ink); padding: .3rem .6rem; border-radius: 0 6px 0 0;
opacity: .82; pointer-events: none;
}
/* ── Corporate logo ────────────────────────────────────── */
.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo__pic { display: none; line-height: 0; }
/* Box heights hold the truffle mark at the size it rendered before the 2026-09-02
artwork change: the mark is 57.7% of the new file's height where it was 74.9%
of the old one's, so the same mark size needs a taller box. .hdr__inner is a
fixed 72px, so this does not change the header height. */
.logo__pic img { height: 60px; width: auto; display: block; }
.logo__pic--light { display: block; }
[data-theme="dark"] .logo__pic--light { display: none; }
[data-theme="dark"] .logo__pic--dark { display: block; }
@media (max-width: 560px) { .logo__pic img { height: 49px; } }
.ftr__brand .logo { margin-bottom: .5rem; }
.ftr__brand .logo__pic img { height: 70px; }
.soonhdr .logo__pic img { height: 57px; }
/* ── Brand art layers ──────────────────────────────────── */
:root { --hero-art: url('../img/hero-light.webp'); --hero-art-opacity: .17; }
[data-theme="dark"] { --hero-art: url('../img/hero-dark.webp'); --hero-art-opacity: .42; }
.hero__art {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
/* the generated light plate carries blue nodes that read lavender at low
opacity and fight the cyan accent; pull the saturation back */
filter: saturate(.45);
background-image: var(--hero-art);
background-size: cover;
background-position: 50% 44%;
opacity: var(--hero-art-opacity);
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 99%);
mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 99%);
}
/* Legibility scrim: sits above the artwork and below the content, so the
headline column always has a clean ground no matter what the art does. */
.hero::after {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: linear-gradient(90deg,
rgba(var(--scrim-rgb), var(--veil)) 0%,
rgba(var(--scrim-rgb), var(--veil)) 46%,
rgba(var(--scrim-rgb), calc(var(--veil) * .55)) 60%,
rgba(var(--scrim-rgb), 0) 78%);
}
@media (max-width: 1079px) {
.hero__art { opacity: calc(var(--hero-art-opacity) * .7); }
.hero::after {
background: linear-gradient(to bottom,
rgba(var(--scrim-rgb), var(--veil)) 0%,
rgba(var(--scrim-rgb), calc(var(--veil) * .8)) 55%,
rgba(var(--scrim-rgb), calc(var(--veil) * .35)) 100%);
}
}
/* Bento card media band */
.uccard { padding: 0; }
.uccard__media {
position: relative; aspect-ratio: 16 / 6.2; overflow: hidden;
border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.uccard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.uccard:hover .uccard__media img { transform: scale(1.04); }
.uccard__media::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to bottom, transparent 40%, var(--surface) 100%);
opacity: .55;
}
.uccard__body { padding: clamp(1.35rem, 2.2vw, 1.85rem); display: flex; flex-direction: column; flex: 1; }
.uccard__ico {
position: relative; z-index: 2;
margin-top: -3.25rem; margin-bottom: 1.1rem;
width: 44px; height: 44px; padding: 10px; border-radius: 12px;
background: var(--surface); border: 1px solid var(--line); color: var(--accent-text);
box-shadow: var(--shadow-sm);
}
.uccard h3 { margin-top: 0; }
.uccard__more { margin-top: auto; padding-top: 1.25rem; }
/* Solution page hero art */
.pagehero { padding-bottom: 0; }
.pagehero__art {
margin-top: clamp(2.5rem, 5vw, 3.5rem);
border-radius: var(--r-xl) var(--r-xl) 0 0;
border: 1px solid var(--line); border-bottom: 0;
overflow: hidden; aspect-ratio: 1344 / 752; position: relative;
}
.pagehero__art img { width: 100%; height: 100%; object-fit: cover; }
.pagehero__art::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to bottom, transparent 88%, var(--bg) 100%);
}
@media (max-width: 700px) { .pagehero__art { aspect-ratio: 1344 / 752; } }
/* A use case with its own key visual shows a finished composition, not a banner to
bleed: the fade above resolves to var(--bg), which on the default light canvas
washes out the bottom of dark artwork. Close the panel instead. */
.pagehero__art--own { border-radius: var(--r-xl); border-bottom: 1px solid var(--line); }
.pagehero__art--own::after { content: none; }
/* ── Touch target sizing ───────────────────────────────── */
/* Footer link rows are 16px tall by default, under the WCAG 2.2 AA
minimum of 24px for pointer targets. Pad them on touch devices. */
@media (pointer: coarse) {
.ftr__cols li + li { margin-top: .15rem; }
.ftr__cols a, .ftr__cols span { display: inline-flex; align-items: center; min-height: 28px; }
.ftr__bottom nav { gap: .5rem 1.25rem; }
.ftr__bottom a { display: inline-flex; align-items: center; min-height: 28px; }
.crumbs a { min-height: 28px; display: inline-flex; align-items: center; }
/* Header controls sit at 38px for the desktop rhythm, which is under the
44px thumb target. Grow them on touch without moving the header height. */
.iconbtn, .langswitch__btn { min-width: 44px; min-height: 44px; }
.chip { min-height: 40px; padding-top: .55rem; padding-bottom: .55rem; }
}
/* ══════════════════════════════════════════════════════════
PRE-LAUNCH PAGE
══════════════════════════════════════════════════════════ */
.soonhdr{position:sticky;top:0;z-index:90;
background:color-mix(in srgb, var(--bg) 84%, transparent);
backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);}
.soonhdr__inner{display:flex;align-items:center;gap:1rem;height:72px}
.soonhdr .hdr__tools{margin-inline-start:auto}
@media (max-width:520px){.soonhdr__cta{display:none}}
.livebadge{display:inline-flex;align-items:center;gap:.55rem;
font-family:var(--font-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink);background:var(--surface);border:1px solid var(--line-2);
border-radius:var(--r-pill);padding:.4rem .85rem}
.livebadge i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto;
box-shadow:0 0 0 0 var(--glow-strong);animation:pulse 2.4s infinite}
.soonhero{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2.5rem,5vw,4rem)}
.hero__note{font-size:.8125rem;color:var(--muted);margin-top:1.15rem;max-width:34rem}
.hero__note a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.canvashint{display:flex;align-items:center;gap:.5rem;justify-content:flex-end;
font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;
color:var(--muted-2);margin-top:1rem}
.canvashint svg{color:var(--accent-text);flex:0 0 auto}
@media (max-width:1079px){.canvashint{justify-content:flex-start}}
/* Architecture pillars */
.soonpillars{display:grid;gap:clamp(.875rem,1.6vw,1.25rem)}
@media (min-width:820px){.soonpillars{grid-template-columns:repeat(3,1fr)}}
.soonpillar{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
padding:clamp(1.5rem,2.6vw,2rem);transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.soonpillar:hover{border-color:var(--accent-line);box-shadow:var(--shadow-md)}
.soonpillar__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-text);margin-bottom:1.35rem}
.soonpillar__n{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;
color:var(--muted-2);margin-bottom:.5rem}
.soonpillar h3{font-size:1.0625rem;margin-bottom:.65rem}
.soonpillar p{font-size:.9375rem;color:var(--muted)}
.honestnote{display:flex;gap:.7rem;align-items:flex-start;margin-top:clamp(1.5rem,3vw,2.25rem);
font-size:.8125rem;color:var(--muted);max-width:62ch;
border:1px dashed var(--line-2);border-radius:var(--r-md);padding:.9rem 1.15rem}
.honestnote svg{color:var(--accent-text);flex:0 0 auto;margin-top:.15rem}
/* Brand band */
.brandband{position:relative;overflow:hidden;background:#0A0B0E;color:#E9EEF3;
padding-block:clamp(4rem,9vw,7rem)}
.brandband__art{position:absolute;inset:0;pointer-events:none;
background:url('../img/brand-band.webp') center/cover no-repeat;opacity:.6;
-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 42%,#000 100%);
mask-image:linear-gradient(90deg,transparent 0%,#000 42%,#000 100%)}
.brandband::after{content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,#0A0B0E 0%,#0A0B0E 40%,rgba(10,11,14,.72) 55%,rgba(10,11,14,0) 82%)}
.brandband__inner{position:relative;z-index:1;display:grid;gap:clamp(1.5rem,3vw,2.5rem);max-width:1320px}
@media (min-width:900px){.brandband__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.brandband h2{color:#fff;font-size:clamp(1.75rem,3.4vw,2.6rem)}
.brandband .eyebrow{color:#00D2FF}
.brandband .eyebrow::before{background:#00D2FF;box-shadow:0 0 0 3px rgba(0,210,255,.12)}
.brandband__copy p{color:#B9C4D0;font-size:clamp(.9375rem,1.3vw,1.0625rem);max-width:46ch}
.brandband__copy p+p{margin-top:1.15rem}
.brandband__copy em{color:#fff;font-style:italic}
@media (max-width:899px){
.brandband__art{opacity:.32;-webkit-mask-image:none;mask-image:none}
.brandband::after{background:linear-gradient(180deg,rgba(10,11,14,.88) 0%,rgba(10,11,14,.72) 100%)}
}
.soonftr{background:var(--bg-alt)}
.soonftr .ftr__bottom{align-items:flex-start}
.soonftr .ftr__bottom p{font-size:.75rem;color:var(--muted)}
/* Tour player */
.modal video { aspect-ratio: 16 / 9; background: #0A0B0E; }
.modal video::cue { font-family: var(--font-body); font-size: .9em; background: rgba(10,11,14,.78); }
.tourlist { margin-top: 1.75rem; }
/* ══════════════════════════════════════════════════════════
ANALYST PERSPECTIVES
══════════════════════════════════════════════════════════ */
.analysts { display: grid; gap: clamp(.875rem, 1.6vw, 1.25rem); }
@media (min-width: 780px) { .analysts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .analysts { grid-template-columns: repeat(3, 1fr); } }
.analyst {
position: relative; display: flex; flex-direction: column;
border: 1px solid var(--line); border-radius: var(--r-lg);
background: var(--surface); padding: clamp(1.4rem, 2.4vw, 1.9rem);
transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.analyst:hover { border-color: var(--accent-line); box-shadow: var(--shadow-md); }
.analyst__mark { color: var(--accent-text); opacity: .55; margin-bottom: 1rem; flex: 0 0 auto; }
.analyst blockquote {
margin: 0; font-family: var(--font-heading); font-weight: 500;
font-size: .9375rem; line-height: 1.55; letter-spacing: -.012em; color: var(--ink);
}
.analyst cite {
margin-top: auto; padding-top: 1.15rem; font-style: normal;
font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted);
}
/* the first perspective carries the section, so it gets the wide slot */
@media (min-width: 1120px) {
.analyst--lead { grid-column: span 3; }
.analyst--lead blockquote { font-size: clamp(1.0625rem, 1.7vw, 1.35rem); max-width: 54ch; }
.analyst--lead .analyst__mark { opacity: .75; }
}
@media (min-width: 780px) and (max-width: 1119px) { .analyst--lead { grid-column: span 2; } }
/* ══════════════════════════════════════════════════════════
USE-CASE RAIL (four visible, arrows through the full set)
══════════════════════════════════════════════════════════ */
.uc__count {
display: inline-block; margin-inline-start: .6rem; padding: .18rem .55rem;
font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em;
color: var(--accent-text); border: 1px solid var(--accent-line);
border-radius: var(--r-pill); vertical-align: middle;
}
.uc__controls { display: grid; gap: .75rem; margin-bottom: 1.75rem; }
.chip--ghost { border-style: dashed; }
.ucrail { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: stretch; }
.ucrail__track {
display: grid; gap: clamp(.75rem, 1.4vw, 1.15rem);
grid-template-columns: 1fr; outline: none;
}
@media (min-width: 760px) { .ucrail__track { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ucrail__track { grid-template-columns: repeat(4, 1fr); } }
.ucrail__track:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 6px; border-radius: var(--r-lg); }
.ucrail__arrow {
align-self: center; width: 40px; height: 40px; flex: 0 0 auto;
display: grid; place-items: center; border-radius: 50%;
border: 1px solid var(--control-line); background: var(--surface); color: var(--ink);
transition: border-color .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
.ucrail__arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-text); }
.ucrail__arrow:disabled { opacity: .28; cursor: default; }
.ucrail__arrow--prev svg { transform: rotate(90deg); }
.ucrail__arrow--next svg { transform: rotate(-90deg); }
/* Below 700px the rail pages one card at a time, so the arrows are the only
route to the other 33 workflows — keep them, restacked under the card as
full-width 44px targets rather than squeezed into the side gutters. */
@media (max-width: 700px) {
.ucrail { grid-template-columns: 1fr 1fr; gap: .75rem; }
.ucrail__track { grid-row: 1; grid-column: 1 / -1; }
.ucrail__arrow {
grid-row: 2; align-self: stretch;
width: auto; height: 44px; border-radius: var(--r-pill);
}
.ucrail__arrow--prev { grid-column: 1; }
.ucrail__arrow--next { grid-column: 2; }
}
.ucrail__empty { grid-column: 1 / -1; padding: 2.5rem 0; text-align: center; color: var(--muted); }
.ucrail__status {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
margin-top: 1.15rem; font-family: var(--font-mono); font-size: .6875rem;
letter-spacing: .08em; color: var(--muted);
}
/* The rail shows one dot per page, so on mobile (one card per page) the row
grows with the corpus. At 34 workflows it just fitted a 375px viewport; the
next batch overran it. The dots are aria-hidden decoration -- the adjacent
"Showing 1-4 of 42" status is what actually conveys position -- so wrapping
is preferable to scrolling or hiding them. */
.ucrail__dots { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
.ucrail__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.ucrail__dots i.is-on { background: var(--accent); width: 18px; border-radius: 3px; }
.uccard {
display: flex; flex-direction: column; overflow: hidden; padding: clamp(1.25rem, 2vw, 1.6rem);
border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.uccard:hover { border-color: var(--accent-line); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.uccard__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.uccard__sector {
display: inline-flex; align-items: center; gap: .4rem;
font-family: var(--font-mono); font-size: .625rem; letter-spacing: .09em;
text-transform: uppercase; color: var(--accent-text);
}
.uccard__n { font-family: var(--font-mono); font-size: .625rem; color: var(--muted-2); }
.uccard h3 { font-size: .9375rem; line-height: 1.32; }
.uccard__sum { font-size: .8125rem; color: var(--muted); margin-top: .55rem; }
.uccard__roi {
margin-top: 1rem; padding-top: .85rem; border-top: 1px dashed var(--line-2);
font-size: .8125rem; color: var(--ink-3);
}
.uccard__roi b {
display: block; font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--accent-text); margin-bottom: .3rem; font-weight: 500;
}
/* The quantifiable figure itself carries the brand cyan. --accent-text, not
--accent: the raw brand cyan measures 2.7:1 on this card in light theme, and
this is body-size text that has to clear 4.5:1. --accent-text is the same hue
at 5.24:1 and is already the site's cyan-for-text. */
.uccard__roi span b { display: inline; font-family: var(--font-body); font-size: 1em;
letter-spacing: 0; text-transform: none; color: var(--accent-text); font-weight: 700; margin: 0; }
.uccard__more {
margin-top: auto; padding-top: 1.15rem; font-size: .8125rem; font-weight: 600;
color: var(--accent-text); display: inline-flex; align-items: center; gap: .4rem;
}
.uccard__more svg { transition: transform .2s var(--ease); }
.uccard:hover .uccard__more svg { transform: translateX(3px); }
.uccard.is-hidden { display: none !important; }
/* bold every measurable figure in the impact list */
.roilist--impact b { color: var(--accent-text); font-weight: 700; }
.roilist li span { display: block; }
[data-theme="dark"] .hero__art { filter: none; }
/* ══════════════════════════════════════════════════════════
RTL — Arabic (dir="rtl" comes from locale_dir() on )
Everything mirrorable is already a logical property, so this block only
handles what logical properties cannot express: which way an icon points,
and one background-position. Scoped entirely under [dir="rtl"], so LTR
rendering is untouched.
══════════════════════════════════════════════════════════ */
/* A "forward" arrow points left in RTL. Mirror the glyph rather than swapping
icons, so one sprite serves both directions. */
[dir="rtl"] .btn__arrow,
[dir="rtl"] .uccard__more svg,
[dir="rtl"] .nextcase svg,
[dir="rtl"] .crumbs svg,
[dir="rtl"] .ftr__cols svg { transform: scaleX(-1); }
/* ...which means the hover nudge has to travel the other way too, and has to
restate the mirror or it would cancel it. */
[dir="rtl"] .btn:hover .btn__arrow,
[dir="rtl"] .uccard:hover .uccard__more svg { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .nextcase a:hover svg { transform: scaleX(-1) translateX(6px); }
[dir="rtl"] .nextcase__prev svg { transform: scaleX(-1) rotate(180deg); }
[dir="rtl"] .nextcase__prev:hover svg { transform: scaleX(-1) rotate(180deg) translateX(6px); }
/* The rail chevrons are rotated, not mirrored — prev/next swap sides. */
[dir="rtl"] .ucrail__arrow--prev svg { transform: rotate(-90deg); }
[dir="rtl"] .ucrail__arrow--next svg { transform: rotate(90deg); }
/* The select caret is drawn with two gradients pinned to the physical right
edge; background-position has no logical form, so restate it. */
[dir="rtl"] .form select {
background-position: 20px 55%, 15px 55%;
padding-right: .95rem; padding-left: 2.5rem;
}
/* Numerals and code stay LTR inside RTL prose — an endpoint or a metric read
right-to-left is simply wrong. */
[dir="rtl"] .roi__row .v,
[dir="rtl"] .field__val,
[dir="rtl"] .modpanel__api code,
[dir="rtl"] .uccard__n { direction: ltr; unicode-bidi: isolate; }
/* ── Script coverage ──────────────────────────────────────────
Inter, Plus Jakarta Sans and IBM Plex Mono carry no Arabic or CJK glyphs, so
those locales would render in whatever the OS happened to substitute. The
brand faces stay FIRST in each stack — fallback is per glyph, so Latin text,
the wordmark and every numeral keep the brand type, and only the characters
the Latin faces lack fall through to the script font. Zero bytes added; swap
in self-hosted Noto later without touching anything but these four lines. */
html[lang="ar"] {
--font-heading: 'Plus Jakarta Sans', 'Noto Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
--font-body: 'Inter', 'Noto Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
}
html[lang="zh"] {
--font-heading: 'Plus Jakarta Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
--font-body: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
}
html[lang="ja"] {
--font-heading: 'Plus Jakarta Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, system-ui, sans-serif;
--font-body: 'Inter', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, system-ui, sans-serif;
}
html[lang="ko"] {
--font-heading: 'Plus Jakarta Sans', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif;
--font-body: 'Inter', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif;
}
/* ═══ Company page ═════════════════════════════════════════════════════════
Everything here is namespaced `.co-` and appended, so no existing selector
changes weight or meaning. Colours are tokens only: the dark block at the
top of this file already redefines every one of them, which is why the page
satisfies the brief's Void Black / Electric Azure palette in dark mode and
still passes contrast in light mode without a second set of rules. */
.co-card {
--co-surface: var(--surface);
--co-border: var(--line);
background: var(--co-surface);
border: 1px solid var(--co-border);
border-radius: 16px;
transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
[data-theme="dark"] .co-card {
/* The glass treatment only reads as glass over a dark ground; in light theme
the plain surface token is the legible choice. */
--co-surface: rgba(255,255,255,.03);
--co-border: rgba(255,255,255,.08);
backdrop-filter: blur(16px);
}
.co-card:hover, .co-card:focus-visible { border-color: var(--accent-line); }
.co-lede { font-size: clamp(1rem, 1.3vw, 1.125rem); color: var(--muted); max-width: 44rem; }
/* ── Hero ─────────────────────────────────────────────────────────────── */
/* .hero__bg and .hero__grid-lines, reused from the home hero, draw the glow and
the 64px grid; .co-hasart supplies the scrim and stacking. */
.co-hero__in { max-width: 54rem; }
.co-hero__in h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.08; margin-block: 1rem 1.1rem; }
.co-hero__lede { font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--muted); max-width: 46rem; }
.co-metrics {
display: grid; gap: 1px; margin-top: clamp(2.5rem, 5vw, 4rem);
grid-template-columns: 1fr; background: var(--line);
border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
@media (min-width: 560px) { .co-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .co-metrics { grid-template-columns: repeat(4, 1fr); } }
.co-metrics li { background: var(--bg); padding: 1.4rem 1.5rem; }
[data-theme="dark"] .co-metrics li { background: var(--surface); }
.co-metrics b {
display: block; font-family: var(--font-heading); font-weight: 700;
font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1; color: var(--accent-text);
font-variant-numeric: tabular-nums;
}
.co-metrics b.is-small { font-size: clamp(1.1rem, 1.8vw, 1.35rem); letter-spacing: -.01em; }
.co-metrics b em { font-style: normal; font-size: .5em; margin-inline-start: .12em; }
.co-metrics span {
display: block; margin-top: .55rem; font-size: .8125rem; color: var(--muted);
}
/* ── Name & origin ────────────────────────────────────────────────────── */
/* Shared brand-plate layer. Any Company section marked .co-hasart can drop in
and get the home hero's artwork -- the plate that already
shows both metaphors -- theme-swapped via --hero-art, with a scrim above it
and the content above that. Same three-layer construction as .hero, which is
the arrangement that passed the site's contrast work. No new asset. */
.co-hasart { position: relative; overflow: hidden; }
.co-art {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: var(--hero-art);
background-size: cover;
filter: saturate(.45);
opacity: var(--hero-art-opacity);
}
/* Even across the width, unlike .hero::after, because Company copy is not
confined to a left column. Measured against the artwork's darkest pixel in
light and brightest in dark: 5.22:1 and 5.25:1 for --muted body text. */
.co-hasart::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: rgba(var(--scrim-rgb), calc(var(--veil) * .8));
}
.co-hasart > .wrap { position: relative; z-index: 1; }
/* Per-section framing: each crops the plate to the part that suits the copy. */
.co-hero .co-art {
background-position: 50% 26%;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%);
mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%);
}
.co-ety .co-art {
background-position: 50% 42%;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 70%, transparent 98%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 70%, transparent 98%);
}
.co-ctasec .co-art {
background-position: 50% 58%;
-webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 30%, transparent 82%);
mask-image: radial-gradient(120% 100% at 50% 50%, #000 30%, transparent 82%);
}
.co-ety__mono {
font-family: var(--font-mono); font-size: .875rem; letter-spacing: .08em;
color: var(--accent-text); margin-bottom: .9rem;
}
.co-ety__body { font-size: 1rem; color: var(--muted); max-width: 44rem; }
/* --ink is pure white in dark and void black in light, which is exactly the
pair the brief asks for, so the emphasis is a token rather than a new hex. */
.co-ety__body .co-ety__term { font-weight: 700; color: var(--ink); }
.co-ety__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .co-ety__grid { grid-template-columns: repeat(2, 1fr); } }
.co-ety__card { padding: 0 0 1.6rem; overflow: hidden; outline-offset: 3px; }
.co-ety__viz { height: 160px; border-bottom: 1px solid var(--co-border); background: var(--surface-2); }
[data-theme="dark"] .co-ety__viz { background: rgba(255,255,255,.02); }
.co-ety__viz svg { width: 100%; height: 100%; display: block; }
/* The live etymology art (2026-09-12, adopted from design-lab/): one Canvas 2D
scene per card, drawn by assets/js/ety-art.js, which follows the theme. Dark:
lit additively on a near-black ground. Light: white under the hero matrix's
grid, with ordinary blending. This background only shows until the first
frame, so it matches each ground; the two-class selectors outrank the older
.co-ety__viz grounds above in both themes. The panel keeps the design's
600 x 280 proportion at every card width: each scene is framed by the
panel's height, so a fixed height would strand it small in the middle of a
wide card. The vector artwork's rules below are unused while this is on, and
kept so that restoring etymology.php alone brings it back. */
.co-ety__viz.co-ety__viz--art { position: relative; height: auto; aspect-ratio: 15 / 7; background: #FFFFFF; }
[data-theme="dark"] .co-ety__viz.co-ety__viz--art { background: #08090D; }
.co-ety__viz--art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@supports not (aspect-ratio: 1) { .co-ety__viz.co-ety__viz--art { height: 240px; } }
.co-ety__card > :not(.co-ety__viz) { padding-inline: 1.6rem; }
.co-ety__card h3 { font-size: 1.2rem; margin-top: .15rem; }
.co-card__eyebrow {
font-family: var(--font-mono); font-size: .625rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--muted-2); padding-top: 1.4rem;
}
.co-card__tag { font-size: .875rem; color: var(--accent-text); margin-top: .3rem; }
.co-card__body { font-size: .9375rem; color: var(--muted); margin-top: .7rem; line-height: 1.65; }
/* Routing fabric and mycelial network — the two Name & Origin card artworks.
Both are pure vector on their own ground, and both run continuously rather
than only on hover: the brief asks for 30+ packets in flight and energy
rising through the roots as the resting state, with hover as a surge on top.
Per-packet speed and phase are carried as classes (v1..v8, d0..d5) rather
than inline custom properties, because this site's CSP has no
'unsafe-inline' and blocks the style attribute outright. */
/* ── Grounds ──────────────────────────────────────────────────────────────*/
.co-ety__viz .veil { fill: var(--surface-2); opacity: 1; }
[data-theme="dark"] .co-ety__viz .veil { fill: #16181D; opacity: 1; }
.co-ety__viz .mycbg { fill: var(--surface-2); opacity: 1; }
[data-theme="dark"] .co-ety__viz .mycbg { fill: #0A0B0E; opacity: 1; }
.co-ety__viz .mycglow { opacity: .55; }
.co-ety__viz .g0 { stop-color: var(--accent); stop-opacity: .18; }
.co-ety__viz .g1 { stop-color: var(--accent); stop-opacity: 0; }
[data-theme="dark"] .co-ety__viz .g0 { stop-opacity: .26; }
.co-ety__viz .lat { stroke: var(--accent); stroke-width: .5; opacity: .8; }
.co-ety__viz .lattice { opacity: .13; transition: opacity .4s var(--ease); }
.co-ety__viz .rail path { stroke: var(--accent); stroke-width: .6; stroke-dasharray: 2 4; opacity: .28; }
/* Multi-path interconnects: dashed slate, per spec. */
.co-ety__viz .edge path {
stroke: var(--muted-2); stroke-width: .7; stroke-dasharray: 3 3; opacity: .35;
transition: opacity .4s var(--ease);
}
/* ── Node geometry: concentric hubs, square enclaves, diamond endpoints ───*/
.co-ety__viz .node g, .co-ety__viz .node rect, .co-ety__viz .node path {
transform-box: fill-box; transform-origin: center;
transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.co-ety__viz .hub circle { fill: var(--accent); opacity: .75; }
.co-ety__viz .hub .ring { fill: none; stroke: var(--accent); stroke-width: .8; opacity: .3; }
.co-ety__viz .enc { fill: none; stroke: var(--accent); stroke-width: 1.1; opacity: .5; }
.co-ety__viz .api { fill: var(--accent); fill-opacity: .18; stroke: var(--accent); stroke-width: .9; opacity: .55; }
/* Pulse waves off the routing hubs. */
.co-ety__viz .wave circle {
fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0;
transform-box: fill-box; transform-origin: center;
animation: co-wave 3.4s var(--ease) infinite;
}
.co-ety__viz .wave circle:nth-child(2) { animation-delay: .7s; }
.co-ety__viz .wave circle:nth-child(3) { animation-delay: 1.4s; }
.co-ety__viz .wave circle:nth-child(4) { animation-delay: 2.1s; }
.co-ety__viz .wave circle:nth-child(5) { animation-delay: 2.8s; }
/* ── Packets in flight ────────────────────────────────────────────────────*/
.co-ety__viz .pkt {
stroke-width: 2.4; stroke-linecap: round; fill: none;
stroke-dasharray: 4 76; stroke-dashoffset: 80;
animation-name: co-packet; animation-timing-function: linear; animation-iteration-count: infinite;
}
.co-ety__viz .pkt.az { stroke: var(--accent); }
.co-ety__viz .pkt.em { stroke: #10B981; }
.co-ety__viz .flow {
stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; fill: none;
stroke-dasharray: 3 52; stroke-dashoffset: 55;
animation-name: co-packet; animation-timing-function: linear; animation-iteration-count: infinite;
}
/* Eight speeds and six phases, so the traffic never reads as a metronome. */
.co-ety__viz .v1 { animation-duration: .85s; } .co-ety__viz .v2 { animation-duration: 1.05s; }
.co-ety__viz .v3 { animation-duration: 1.25s; } .co-ety__viz .v4 { animation-duration: 1.45s; }
.co-ety__viz .v5 { animation-duration: 1.7s; } .co-ety__viz .v6 { animation-duration: 1.95s; }
.co-ety__viz .v7 { animation-duration: 2.15s; } .co-ety__viz .v8 { animation-duration: 2.35s; }
.co-ety__viz .d0 { animation-delay: 0s; } .co-ety__viz .d1 { animation-delay: .3s; }
.co-ety__viz .d2 { animation-delay: .6s; } .co-ety__viz .d3 { animation-delay: .9s; }
.co-ety__viz .d4 { animation-delay: 1.2s; } .co-ety__viz .d5 { animation-delay: 1.5s; }
/* Hover: a 2.5x surge. Written out per speed class because the CSP rules out
carrying the base duration in a per-element custom property. */
.co-ety__card:hover .v1, .co-ety__card:focus-within .v1 { animation-duration: .34s; }
.co-ety__card:hover .v2, .co-ety__card:focus-within .v2 { animation-duration: .42s; }
.co-ety__card:hover .v3, .co-ety__card:focus-within .v3 { animation-duration: .5s; }
.co-ety__card:hover .v4, .co-ety__card:focus-within .v4 { animation-duration: .58s; }
.co-ety__card:hover .v5, .co-ety__card:focus-within .v5 { animation-duration: .68s; }
.co-ety__card:hover .v6, .co-ety__card:focus-within .v6 { animation-duration: .78s; }
.co-ety__card:hover .v7, .co-ety__card:focus-within .v7 { animation-duration: .86s; }
.co-ety__card:hover .v8, .co-ety__card:focus-within .v8 { animation-duration: .94s; }
[data-kind="network"]:hover .edge path, [data-kind="network"]:focus-within .edge path { opacity: .6; }
[data-kind="network"]:hover .lattice, [data-kind="network"]:focus-within .lattice { opacity: .2; }
[data-kind="network"]:hover .node g, [data-kind="network"]:focus-within .node g,
[data-kind="network"]:hover .node rect, [data-kind="network"]:focus-within .node rect,
[data-kind="network"]:hover .node path, [data-kind="network"]:focus-within .node path { transform: scale(1.35); }
/* ── Mycelium ─────────────────────────────────────────────────────────────*/
.co-ety__viz .truffle { opacity: .9; transition: opacity .3s var(--ease); }
.co-ety__viz .tbody { fill: var(--accent); fill-opacity: .14; stroke: var(--accent); stroke-width: 1.1; opacity: .6; }
/* Micro-fibres thin at every tier: 1.5px at the root, 0.6px at the tips. */
.co-ety__viz .fil path { stroke: var(--accent); stroke-linecap: round; fill: none; transition: opacity .4s var(--ease); }
.co-ety__viz .f1 path { stroke-width: 1.5; opacity: .34; }
.co-ety__viz .f2 path { stroke-width: 1; opacity: .27; }
.co-ety__viz .f3 path { stroke-width: .6; opacity: .2; }
.co-ety__viz .spore circle { fill: var(--accent); opacity: .38; }
/* Intelligence nodes: concentric halos, pulsing continuously. */
.co-ety__viz .inode circle { fill: var(--accent); }
.co-ety__viz .inode .halo1 { opacity: .16; }
.co-ety__viz .inode .halo2 { opacity: .08; }
.co-ety__viz .inode {
transform-box: fill-box; transform-origin: center;
animation: co-bloom 3s var(--ease) infinite;
}
.co-ety__viz .inode.b2 { animation-delay: .3s; }
.co-ety__viz .inode.b3 { animation-delay: .6s; }
.co-ety__viz .inode.b4 { animation-delay: .9s; }
/* Secondary clusters stay hidden until the card is engaged. */
.co-ety__viz .hid { fill: var(--accent); opacity: 0; transition: opacity .5s var(--ease); }
[data-kind="mycelium"]:hover .truffle, [data-kind="mycelium"]:focus-within .truffle { opacity: 1; }
[data-kind="mycelium"]:hover .hid, [data-kind="mycelium"]:focus-within .hid { opacity: .7; }
[data-kind="mycelium"]:hover .f1 path, [data-kind="mycelium"]:focus-within .f1 path { opacity: .7; }
[data-kind="mycelium"]:hover .f2 path, [data-kind="mycelium"]:focus-within .f2 path { opacity: .58; }
[data-kind="mycelium"]:hover .f3 path, [data-kind="mycelium"]:focus-within .f3 path { opacity: .46; }
/* Illumination climbs out of the ground rather than washing over at once. */
[data-kind="mycelium"]:hover .spore circle, [data-kind="mycelium"]:focus-within .spore circle {
animation: co-bloom 2.4s var(--ease) infinite;
}
[data-kind="mycelium"]:hover .spore circle.b2, [data-kind="mycelium"]:focus-within .spore circle.b2 { animation-delay: .22s; }
[data-kind="mycelium"]:hover .spore circle.b3, [data-kind="mycelium"]:focus-within .spore circle.b3 { animation-delay: .44s; }
[data-kind="mycelium"]:hover .spore circle.b4, [data-kind="mycelium"]:focus-within .spore circle.b4 { animation-delay: .66s; }
/* ── Floating telemetry ───────────────────────────────────────────────────*/
.co-ety__viz .lbl {
font-family: var(--font-mono); font-size: 6.4px; letter-spacing: .08em;
fill: var(--muted-2); opacity: .62; transition: opacity .3s var(--ease), fill .3s var(--ease);
}
.co-ety__card:hover .lbl, .co-ety__card:focus-within .lbl { opacity: 1; fill: var(--accent-text); }
/* The SVG scales with the card, so a fixed user-unit size renders between 5px
and 9px across the range. Step it up where the cards narrow, and drop the
labels entirely on a phone rather than ship 5px type. */
@media (max-width: 1100px) { .co-ety__viz .lbl { font-size: 8.2px; } }
@media (max-width: 560px) { .co-ety__viz .lbl { display: none; } }
@keyframes co-packet { to { stroke-dashoffset: 0; } }
@keyframes co-wave { 0% { transform: scale(.7); opacity: .5; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
@keyframes co-bloom { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
/* ── Problem vs solution ──────────────────────────────────────────────── */
.co-vs { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .co-vs { grid-template-columns: repeat(2, 1fr); } }
.co-vs__col { padding: 1.6rem; }
.co-vs__col.is-problem { border-color: var(--danger-line); }
.co-vs__col.is-solution { border-color: var(--accent-line); }
.co-vs__col .co-card__eyebrow { padding-top: 0; }
.co-vs__col.is-problem .co-card__eyebrow { color: var(--danger); }
.co-vs__col.is-solution .co-card__eyebrow { color: var(--accent-text); }
.co-vs__list { margin-top: 1.1rem; display: grid; gap: .85rem; }
.co-vs__list li { display: flex; gap: .7rem; align-items: flex-start; font-size: .9375rem; line-height: 1.6; color: var(--ink-3); }
.co-vs__list svg { flex: none; margin-top: .15rem; }
.is-problem .co-vs__list svg { color: var(--danger); }
.is-solution .co-vs__list svg { color: var(--accent-text); }
/* ── Sovereign perimeter ──────────────────────────────────────────────── */
.co-perim {
position: relative; border: 1px solid var(--accent-line); border-radius: 18px;
padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--surface);
}
[data-theme="dark"] .co-perim { background: rgba(255,255,255,.02); box-shadow: 0 0 40px -18px var(--glow); }
.co-perim__tag {
display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
font-family: var(--font-mono); font-size: .625rem; letter-spacing: .14em;
text-transform: uppercase; margin-bottom: 1.5rem;
}
.co-perim__name { color: var(--ink); }
.co-perim__state { color: var(--muted-2); }
.co-perim__dot {
position: relative; width: 8px; height: 8px; border-radius: 50%;
background: #10B981; flex: none;
}
.co-perim__dot::after {
content: ""; position: absolute; inset: 0; border-radius: 50%;
background: #10B981; animation: co-ping 1.9s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes co-ping { 0% { transform: scale(1); opacity: .7; } 80%,100% { transform: scale(2.6); opacity: 0; } }
.co-pillars { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .co-pillars { grid-template-columns: repeat(3, 1fr); } }
.co-pillar { border-top: 1px solid var(--line); padding-top: 1rem; }
.co-pillar__n { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em; color: var(--accent-text); }
.co-pillar h3 { font-size: 1rem; margin-block: .5rem .45rem; }
.co-pillar p { font-size: .875rem; color: var(--muted); line-height: 1.65; }
.co-badges__label {
font-family: var(--font-mono); font-size: .625rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--muted-2); margin-block: 2.2rem .9rem;
}
.co-badges { display: flex; flex-wrap: wrap; gap: .6rem; }
.co-badge {
border: 1px solid var(--accent-line); background: var(--accent-soft);
border-radius: 10px; padding: .55rem .8rem; max-width: 100%;
}
.co-badge b {
display: block; font-family: var(--font-mono); font-size: .6875rem;
letter-spacing: .06em; color: var(--accent-text); font-weight: 600;
}
.co-badge span { display: block; margin-top: .2rem; font-size: .75rem; color: var(--muted); }
/* ── Engineering principles ───────────────────────────────────────────── */
.co-princ__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .co-princ__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .co-princ__grid { grid-template-columns: repeat(4, 1fr); } }
/* The principle cards borrow the use-case card hover from the home page rail
verbatim: the same 200px radial bloom in --glow off the top-right corner,
the same 2px lift and shadow. --glow is cyan in both themes, so no new
colour is introduced. .co-card already supplies the border and the
transitions this animates over. */
.co-princ__card { padding: 1.5rem; position: relative; overflow: hidden; }
.co-princ__card::after {
content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px;
border-radius: 50%; background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
opacity: 0; transition: opacity .35s var(--ease); pointer-events: none;
}
.co-princ__card:hover::after { opacity: 1; }
.co-princ__card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.co-princ__n {
font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600;
color: var(--accent-text); letter-spacing: .04em;
}
.co-princ__n span { opacity: .5; }
.co-princ__card h3 { font-size: .9375rem; letter-spacing: .02em; text-transform: uppercase; margin-block: .7rem .5rem; }
/* ══════════════════════════════════════════════════════════════════════════
SECTION 7 — EXECUTIVE LEADERSHIP, DOMAIN ENCLAVES & TECHNOLOGY ECOSYSTEM
Replaces the six-card leadership grid.
The section now carries four groups rather than one, so it needs an internal
hierarchy the old grid did not: one
for the section and an per
group, each with a monospace index in the same idiom as the engineering
principles block above it.
Three of the four groups describe roles and criteria rather than people and
signed partners. They are drawn so that reads as deliberate architecture —
dashed rules, an "open" marker, a criteria label — rather than as a claim
that the seats are filled. A visitor doing diligence should be able to tell
what exists from what is designed, at a glance.
Every colour, radius and face here is an existing token. Nothing new is
introduced, so the block inherits light and dark with the rest of the site.
══════════════════════════════════════════════════════════════════════════ */
/* ── the selection glow ────────────────────────────────────────────────────
The engineering-principles cards' hover, on every card in this section: a
200px radial bloom of --glow fading in off the top-right corner, a 2px lift
and --shadow-md, over the --accent-line border. The principles block took it
verbatim from the home page's use-case rail (.uccard), so all three now light
the same way — change one, change the others. --glow is cyan in both themes
(0,163,255 light, 0,210,255 dark), so no new colour comes in with it.
:focus-within sits alongside :hover deliberately. A card reached by keyboard
is "selected" in every sense that matters, and the LinkedIn links inside the
leadership cards are focusable — without it, tabbing through the section
would light nothing. */
.co-team__card, .co-enc__card, .co-tsc__seat, .co-eco__row { position: relative; overflow: hidden; }
.co-team__card::after, .co-enc__card::after, .co-tsc__seat::after, .co-eco__row::after {
content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px;
border-radius: 50%; background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
opacity: 0; transition: opacity .35s var(--ease); pointer-events: none;
}
.co-team__card:hover::after, .co-team__card:focus-within::after,
.co-enc__card:hover::after, .co-enc__card:focus-within::after,
.co-tsc__seat:hover::after, .co-tsc__seat:focus-within::after,
.co-eco__row:hover::after, .co-eco__row:focus-within::after { opacity: 1; }
/* ── group scaffolding ─────────────────────────────────────────────────── */
.co-team__part { margin-top: clamp(3rem, 6vw, 5rem); }
.co-team__part:first-of-type { margin-top: 0; }
.co-team__parthead {
display: grid; gap: .5rem;
max-width: 44rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.co-team__partn {
font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--accent-text);
}
.co-team__parthead h3 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.3; }
.co-team__partnote { font-size: .9375rem; color: var(--muted); line-height: 1.65; }
/* a small right-aligned count, so each group states its own size */
.co-team__partrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.co-team__count {
font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em;
color: var(--muted-2); white-space: nowrap; padding-bottom: .35rem;
}
@media (max-width: 700px) { .co-team__count { display: none; } }
/* ── 01 · executive leadership ─────────────────────────────────────────── */
.co-team__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .co-team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .co-team__grid { grid-template-columns: repeat(3, 1fr); } }
.co-team__card {
padding: 1.5rem; display: flex; flex-direction: column;
transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.co-team__card:hover,
.co-team__card:focus-within {
transform: translateY(-2px);
border-color: var(--accent-line);
box-shadow: var(--shadow-md);
}
.co-team__head { display: flex; align-items: center; gap: .9rem; }
.co-team__ava {
position: relative; width: 72px; height: 72px; border-radius: 50%; flex: none;
overflow: hidden; border: 1px solid var(--co-border); background: var(--surface-2);
}
.co-team__ini {
position: absolute; inset: 0; display: grid; place-items: center;
font-family: var(--font-heading); font-weight: 700;
letter-spacing: .04em; color: var(--accent-ink); font-size: 1rem;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.co-team__ava img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.co-team__id { min-width: 0; }
.co-team__id h4 { font-size: 1rem; line-height: 1.25; }
.co-team__role { font-size: .8125rem; color: var(--accent-text); margin-top: .15rem; }
.co-team__li {
margin-inline-start: auto; align-self: flex-start; display: grid; place-items: center;
width: 30px; height: 30px; border-radius: 8px; flex: none;
border: 1px solid var(--line-2); color: var(--muted-2);
transition: color .2s var(--ease), border-color .2s var(--ease);
}
.co-team__li:hover { color: var(--accent-text); border-color: var(--accent-line); }
.co-team__bio { font-size: .875rem; color: var(--muted); line-height: 1.65; margin-top: 1.1rem; }
.co-team__badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: 1.1rem; }
.co-team__badges li {
font-family: var(--font-mono); font-size: .625rem; letter-spacing: .06em;
color: var(--muted-2); border: 1px solid var(--line-2); border-radius: 6px;
padding: .25rem .45rem;
}
/* An unfilled seat. Dashed everything, no portrait, and it says so in words —
the card must never be mistaken for a person who already works here. */
.co-team__card--open { border-style: dashed; background: transparent; }
/* It lights on hover like every other card here; the dashes and the words carry
the difference, so the hover does not have to. */
.co-team__ava--open {
border-style: dashed; border-color: var(--control-line); background: transparent;
display: grid; place-items: center;
}
.co-team__ava--open span {
font-family: var(--font-mono); font-size: .625rem; letter-spacing: .1em;
color: var(--muted-2); text-align: center; line-height: 1.3;
}
.co-team__open {
display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start;
font-family: var(--font-mono); font-size: .625rem; letter-spacing: .1em;
text-transform: uppercase; color: var(--accent-text);
border: 1px solid var(--accent-line); border-radius: 999px;
padding: .2rem .55rem; margin-top: 1.1rem;
}
.co-team__open i {
width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none;
}
/* ── 02 · domain enclaves ──────────────────────────────────────────────── */
.co-enc { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .co-enc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .co-enc { grid-template-columns: repeat(3, 1fr); } }
.co-enc__card { padding: 1.35rem; display: flex; flex-direction: column; }
.co-enc__card:hover,
.co-enc__card:focus-within {
transform: translateY(-2px);
border-color: var(--accent-line);
box-shadow: var(--shadow-md);
}
.co-enc__n {
font-family: var(--font-mono); font-size: .625rem; letter-spacing: .12em;
color: var(--muted-2); display: flex; align-items: center; gap: .5rem;
}
.co-enc__n::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.co-enc__card h4 { font-size: .9375rem; line-height: 1.35; margin-top: .7rem; }
.co-enc__card p { font-size: .8125rem; color: var(--muted); line-height: 1.6; margin-top: .5rem; }
.co-enc__badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; padding-top: .9rem; }
.co-enc__badges li {
font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .06em;
color: var(--muted-2); border: 1px solid var(--line-2); border-radius: 5px;
padding: .2rem .4rem;
}
/* ── 03 · technical steering committee ─────────────────────────────────── */
.co-tsc { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .co-tsc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1140px) { .co-tsc { grid-template-columns: repeat(4, 1fr); } }
/* Seats, not staff: dashed like the open leadership seat, for the same reason. */
.co-tsc__seat {
border: 1px dashed var(--line-2); border-radius: 16px;
padding: 1.35rem; display: flex; flex-direction: column;
/* Spelled out: a seat is not a .co-card, so it does not inherit that
transition, and without it the lift and shadow would snap instead of easing. */
transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.co-tsc__seat:hover,
.co-tsc__seat:focus-within {
transform: translateY(-2px);
border-color: var(--accent-line);
box-shadow: var(--shadow-md);
}
.co-tsc__n {
font-family: var(--font-mono); font-size: .625rem; letter-spacing: .12em;
color: var(--muted-2);
}
.co-tsc__seat h4 { font-size: .9375rem; line-height: 1.35; margin-top: .65rem; }
/* No repeated "selection criteria" label: it cost a line on every seat and on
every ecosystem row below, and the part note says it once for all of them. */
.co-tsc__crit { font-size: .8125rem; color: var(--muted); line-height: 1.55; margin-top: .6rem; }
.co-tsc__badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; padding-top: .9rem; }
.co-tsc__badges li {
font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .06em;
color: var(--muted-2); border: 1px solid var(--line-2); border-radius: 5px;
padding: .2rem .4rem;
}
.co-tsc__gov {
margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
font-family: var(--font-mono); font-size: .625rem; letter-spacing: .06em;
color: var(--muted-2);
}
.co-tsc__gov span { display: inline-flex; align-items: center; gap: .45rem; }
.co-tsc__gov span::before {
content: ""; width: 4px; height: 4px; border-radius: 50%;
background: var(--accent); flex: none;
}
/* ── 04 · delivery ecosystem ───────────────────────────────────────────────
Rows rather than a fifth grid of cards: the section has carried three
card rhythms by this point, and these are selection criteria, which read
better as a specification than as more tiles. */
.co-eco { border-top: 1px solid var(--line); }
.co-eco__row {
border-bottom: 1px solid var(--line);
padding: .8rem .75rem;
margin-inline: -.75rem;
border-radius: 10px;
display: grid; gap: .3rem;
transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
/* The glow sits outside the media query on purpose: the four-column layout is a
desktop arrangement, but a row is hoverable at any width, and a narrow desktop
window would otherwise be the one place in the section where nothing lights. */
.co-eco__row:hover,
.co-eco__row:focus-within {
background: var(--surface-2);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
@media (min-width: 900px) {
.co-eco__row {
/* index | name | scope + criteria | badges. The index column is sized to hold
"ECO-05" on one line, not to a round number. */
grid-template-columns: 3.4rem minmax(9.5rem, .8fr) minmax(0, 1.6fr) auto;
align-items: start; gap: 1.25rem; padding: .9rem .75rem;
}
.co-eco__badges { justify-content: flex-end; max-width: 15rem; }
}
.co-eco__n {
font-family: var(--font-mono); font-size: .625rem; letter-spacing: .1em;
color: var(--muted-2); padding-top: .15rem;
}
.co-eco__text { min-width: 0; }
.co-eco__name { font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--ink-2); }
.co-eco__scope { font-size: .8125rem; color: var(--muted); line-height: 1.55; }
.co-eco__crit { font-size: .75rem; color: var(--muted-2); line-height: 1.55; margin-top: .15rem; }
.co-eco__badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .15rem; }
.co-eco__badges li {
font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .06em;
color: var(--muted-2); border: 1px solid var(--line-2); border-radius: 5px;
padding: .2rem .4rem;
}
/* No lift for anyone who asks for reduced motion. The shared
prefers-reduced-motion block further down still carries the original
.co-team__card:hover opt-out; this one covers every card the section lifts,
and keeps the rule inside the block a Section 7 rollback removes. The bloom
is a fade, not movement, so it stays. */
@media (prefers-reduced-motion: reduce) {
.co-team__card:hover, .co-team__card:focus-within,
.co-enc__card:hover, .co-enc__card:focus-within,
.co-tsc__seat:hover, .co-tsc__seat:focus-within,
.co-eco__row:hover, .co-eco__row:focus-within { transform: none; }
}
/* ── Closing enclave ──────────────────────────────────────────────────── */
.co-cta {
border: 1px solid var(--line); border-radius: 24px;
padding: clamp(1.75rem, 4vw, 3rem); background: var(--surface);
display: grid; gap: 1.75rem; position: relative; overflow: hidden;
}
[data-theme="dark"] .co-cta {
background: rgba(22,24,29,.8); backdrop-filter: blur(16px);
border-color: rgba(255,255,255,.1);
}
.co-cta::before {
content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
@media (min-width: 940px) {
.co-cta { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); align-items: start; }
.co-cta__trust { grid-column: 1 / -1; }
}
.co-cta__eyebrow { display: flex; align-items: center; gap: .5rem; }
.co-cta__dot {
width: 7px; height: 7px; border-radius: 50%; background: #10B981; flex: none;
animation: co-pulse 2.2s var(--ease) infinite;
}
@keyframes co-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.co-cta h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-block: .9rem .8rem; }
.co-cta__lede { font-size: .9375rem; color: var(--muted); line-height: 1.7; max-width: 40rem; }
.co-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-content: start; }
@media (min-width: 940px) { .co-cta__actions { flex-direction: column; align-items: stretch; } }
.co-cta__actions .btn { justify-content: center; white-space: normal; }
.co-cta__primary:hover { box-shadow: 0 0 25px var(--glow-strong); }
.co-cta__trust {
display: flex; flex-wrap: wrap; gap: .6rem 1.4rem;
border-top: 1px solid var(--line); padding-top: 1.4rem;
}
.co-cta__trust li { display: flex; align-items: center; gap: .45rem; font-size: .8125rem; color: var(--muted); }
.co-cta__trust svg { color: var(--accent-text); flex: none; }
@media (prefers-reduced-motion: reduce) {
/* The site-wide rule above already clamps animation-duration everywhere, so
the routing pulse and the filament growth stop on their own. These two need
more than clamping: the ping ring would be left mid-scale, and the card lift
is a transition rather than an animation. */
.co-perim__dot::after, .co-cta__dot { animation: none; }
.co-perim__dot::after { opacity: 0; }
.co-team__card:hover { transform: none; }
}
/* ═══ Footer command bar, link descriptions and node strip ════════════════
The brief specifies an elevated #0F1117 container under a glowing Electric
Azure top border. Both are tokens the dark theme already defines, so the
footer keeps working in light mode instead of becoming a dark slab. */
.ftr { border-top: 1px solid var(--accent-line); }
[data-theme="dark"] .ftr { background: #0F1117; }
.ftr__cmd {
display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.4rem;
padding-block: 1.15rem; border-bottom: 1px solid var(--line);
}
.ftr__cmdbrand {
display: inline-flex; align-items: center; gap: .4rem;
font-family: var(--font-heading); font-weight: 700; letter-spacing: -.01em;
color: var(--ink); font-size: .9375rem;
}
.ftr__cmdbrand i {
width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Emerald when every node is live; amber while any is still coming up. The
colour follows the copy, which is derived from the hub data. */
.ftr__cmdstatus {
display: inline-flex; align-items: center; gap: .5rem;
font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em;
text-transform: uppercase;
color: #076A48; background: rgba(16,185,129,.1);
border: 1px solid rgba(16,185,129,.3); border-radius: var(--r-pill);
padding: .35rem .75rem;
}
[data-theme="dark"] .ftr__cmdstatus { color: #34D399; }
.ftr__cmdstatus i {
width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none;
animation: pulse 2.4s infinite;
}
.ftr__cmdstatus[data-partial] {
color: #6B3F05; background: rgba(255,183,77,.12); border-color: rgba(255,183,77,.35);
}
[data-theme="dark"] .ftr__cmdstatus[data-partial] { color: #FFB74D; }
.ftr__cmdstats {
display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-inline-start: auto;
font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em;
text-transform: uppercase; color: var(--muted);
}
.ftr__cmdstats b { color: var(--accent-text); font-weight: 600; }
/* One column on a phone, three on a tablet, five on the desktop grid.
All four steps are restated deliberately. The earlier ladder is declared
further up the file, and these rules carry equal specificity -- so once a
520px rule appears down here it wins at every width above it, and dropping
the 700 and 1000 steps as duplicates collapses the desktop footer to two
columns. Source order is doing the work; keep the set complete. */
.ftr__cols { grid-template-columns: 1fr; }
@media (min-width: 520px) { .ftr__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .ftr__cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .ftr__cols { grid-template-columns: repeat(5, 1fr); } }
/* Descriptions sit under their link, quieter and tighter than the label. */
.ftr__desc {
display: block; font-style: normal; font-size: .6875rem; line-height: 1.45;
color: var(--muted); margin-top: .1rem; max-width: 24ch;
}
.ftr__cols li + li { margin-top: .7rem; }
.ftr__nodes {
flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .4rem .6rem;
font-family: var(--font-mono); font-size: .625rem; letter-spacing: .08em;
color: var(--muted); margin-top: .75rem;
}
.ftr__nodes span {
text-transform: uppercase; color: var(--accent-text); letter-spacing: .12em;
}
@media (min-width: 900px) {
.ftr__nodes { flex-basis: auto; margin-top: 0; margin-inline-start: auto; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .ftr__cmdstatus i { animation: none !important; } }
/* .hubmap is declared around line 785 but .reveal at 1060, and both carry a
transition at equal specificity -- so .reveal wins and the map card lift and
shadow snap instead of easing. Restated here, past that rule. (.co-princ__card
escapes this only because .co-card happens to sit after .reveal.) */
.hubmap { transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
/* ═══ Architecture pages: /docs and /docs/api ═════════════════════════════
These reuse .co-card for the card surface rather than cloning twenty lines
of glassmorphism under a second prefix — the hover, theming and border
tokens then stay in one place. Only the page-specific pieces are .ar-. */
/* Status notice. Amber where the page is a preview of something not yet live,
so it reads as a caveat rather than decoration. */
.ar-notice {
display: grid; gap: .3rem; margin-top: clamp(1.75rem, 3vw, 2.5rem);
border: 1px solid var(--line); border-inline-start: 2px solid var(--accent);
border-radius: var(--r-md); padding: .9rem 1.1rem; max-width: 46rem;
background: var(--surface);
}
[data-theme="dark"] .ar-notice { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.08); border-inline-start-color: var(--accent); }
.ar-notice b {
font-family: var(--font-mono); font-size: .625rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--accent-text); font-weight: 600;
}
.ar-notice span { font-size: .875rem; color: var(--muted); line-height: 1.6; }
.ar-notice.is-preview { border-inline-start-color: #B4700A; }
[data-theme="dark"] .ar-notice.is-preview { border-inline-start-color: #FFB74D; }
.ar-notice.is-preview b { color: #8A5406; }
[data-theme="dark"] .ar-notice.is-preview b { color: #FFB74D; }
/* ── Enclave pipeline ─────────────────────────────────────────────────────*/
.ar-pipe { display: grid; gap: 1.25rem; grid-template-columns: 1fr; counter-reset: none; }
@media (min-width: 900px) { .ar-pipe { grid-template-columns: repeat(3, 1fr); gap: 2.25rem; } }
.ar-pipe__stage { position: relative; padding: 1.6rem; outline-offset: 3px; }
.ar-pipe__n {
font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em;
color: var(--accent-text);
}
.ar-pipe__stage h3 { font-size: 1rem; margin-block: .6rem .5rem; }
.ar-pipe__stage p { font-size: .875rem; color: var(--muted); line-height: 1.65; }
/* The configuration variable is the reward for engaging with a stage, so it
stays folded until hover or keyboard focus. */
.ar-pipe__env {
display: block; margin-top: .9rem; font-family: var(--font-mono);
font-size: .6875rem; letter-spacing: .02em; color: var(--accent-text);
background: var(--accent-soft); border: 1px solid var(--accent-line);
border-radius: 6px; padding: .4rem .55rem;
opacity: 0; transform: translateY(-3px);
transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.ar-pipe__stage:hover .ar-pipe__env,
.ar-pipe__stage:focus-within .ar-pipe__env { opacity: 1; transform: none; }
/* Flow arrow between stages: vertical when stacked, horizontal on the grid. */
.ar-pipe__flow {
position: absolute; display: block; background: var(--accent-line);
left: 50%; bottom: -1.05rem; width: 1px; height: .8rem; transform: translateX(-50%);
}
.ar-pipe__flow::after {
content: ''; position: absolute; left: 50%; bottom: -1px;
width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
transform: translateX(-50%);
}
@media (min-width: 900px) {
.ar-pipe__flow {
left: auto; bottom: auto; top: 50%; inset-inline-end: -1.55rem;
width: 1.1rem; height: 1px; transform: translateY(-50%);
}
.ar-pipe__flow::after { left: auto; bottom: auto; inset-inline-end: -1px; top: 50%; transform: translateY(-50%); }
}
/* ── Guide / spec lists ───────────────────────────────────────────────────*/
.ar-list { display: grid; gap: .85rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .ar-list { grid-template-columns: repeat(2, 1fr); } }
.ar-list__item { padding: 1.1rem 1.3rem; display: grid; gap: .3rem; }
.ar-list__item b { font-size: .9375rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ar-list__item b i {
font-style: normal; font-family: var(--font-mono); font-size: .5rem;
letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2);
border: 1px solid var(--line-2); border-radius: 3px; padding: .1rem .3rem;
}
.ar-list__item span { font-size: .8125rem; color: var(--muted); line-height: 1.6; }
.ar-list__label {
font-family: var(--font-mono); font-size: .625rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--muted-2); margin-block: 2.5rem .9rem;
}
/* ── API console ──────────────────────────────────────────────────────────*/
.ar-console__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 940px) { .ar-console__grid { grid-template-columns: repeat(2, 1fr); } }
.ar-pane {
border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
background: var(--surface-2);
}
[data-theme="dark"] .ar-pane { background: #060709; border-color: rgba(255,255,255,.1); }
.ar-pane__head {
display: flex; align-items: center; justify-content: space-between; gap: .75rem;
flex-wrap: wrap; padding: .7rem 1rem; border-bottom: 1px solid var(--line);
}
[data-theme="dark"] .ar-pane__head { border-bottom-color: rgba(255,255,255,.08); }
.ar-pane__label {
font-family: var(--font-mono); font-size: .625rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--muted);
}
.ar-pane__route { font-family: var(--font-mono); font-size: .6875rem; color: var(--muted); }
.ar-pane__route b {
color: var(--accent-text); font-weight: 600; margin-inline-end: .4rem;
}
.ar-pane__headers {
padding: .8rem 1rem 0; display: grid; gap: .2rem;
font-family: var(--font-mono); font-size: .6875rem; color: var(--accent-text);
}
.ar-pane__body {
margin: 0; padding: .8rem 1rem 1.1rem; overflow-x: auto;
font-family: var(--font-mono); font-size: .6875rem; line-height: 1.7;
color: var(--ink-3); white-space: pre;
}
[data-theme="dark"] .ar-pane__body { color: #AFBCCB; }
/* ── Endpoint rows ────────────────────────────────────────────────────────*/
.ar-eps__list { display: grid; gap: .75rem; }
.ar-eps__row {
display: grid; gap: .35rem .9rem; padding: 1rem 1.2rem;
grid-template-columns: 1fr;
}
@media (min-width: 780px) {
.ar-eps__row { grid-template-columns: 4.5rem minmax(0, 14rem) 1fr; align-items: baseline; }
}
.ar-eps__method {
font-family: var(--font-mono); font-size: .625rem; letter-spacing: .1em;
text-transform: uppercase; color: var(--accent-text);
border: 1px solid var(--accent-line); border-radius: 5px;
padding: .2rem .4rem; text-align: center; justify-self: start;
}
.ar-eps__method[data-m="auth"] { color: var(--muted); border-color: var(--line-2); }
.ar-eps__path { font-family: var(--font-mono); font-size: .8125rem; color: var(--ink); }
.ar-eps__desc { font-size: .8125rem; color: var(--muted); line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
.ar-pipe__env { transition: none; }
}
/* ── Footer social marks ──────────────────────────────────────────────
Beside the Company column title, wrapping to their own line when the
column is too narrow for the title plus three marks — which it is in
German, Japanese and Korean at the 159px desktop track.
The colours are tokens, not the hexes from the brief: --muted-2 and
--accent are #7C8899 and #00D2FF in dark, which is what the brief asked
for, and #64748B / #00A3FF in light, which the brief did not consider.
Hard-coding the dark values would break the light theme. */
.ftr__colhead {
display: flex; align-items: center; flex-wrap: wrap;
gap: .35rem .75rem; margin-bottom: 1rem;
}
.ftr__colhead h4 { margin-bottom: 0; }
.ftr__social { display: flex; align-items: center; gap: .75rem; }
.ftr__social li + li { margin-top: 0; } /* .ftr__cols li + li adds .55rem */
.ftr__social a {
display: inline-flex; align-items: center; justify-content: center;
color: var(--muted-2); border-radius: 6px;
transition: color .2s var(--ease), filter .2s var(--ease);
}
.ftr__social a:hover, .ftr__social a:focus-visible {
color: var(--accent); filter: drop-shadow(0 0 6px var(--glow-strong));
}
.ftr__social svg { width: 20px; height: 20px; display: block; }
/* [dir="rtl"] .ftr__cols svg mirrors every icon in a footer column — it is
there for directional arrows. A mirrored brand mark is simply wrong, and
these are the first svgs ever placed inside .ftr__cols. Equal specificity
to that rule, so this only wins by sitting later in the file. */
[dir="rtl"] .ftr__social svg { transform: none; }
/* Touch target on phones, matching the 28px minimum the footer links use. */
@media (max-width: 640px) {
.ftr__social a { min-width: 28px; min-height: 28px; }
.ftr__social { gap: 1rem; }
}
/* ══════════════════════════════════════════════════════════
SECTION 12 — LEGAL TRUST CENTER
Two views off lang/legal-v2.json: /legal/{slug} summarises,
/legal/{slug}/full carries the binding text and is what the
print rules below turn into the PDF.
══════════════════════════════════════════════════════════ */
.section--flush { padding-top: 0; }
/* Document switcher — three URLs, not tabs, so each document stays
independently linkable and the old /legal/privacy links keep working. */
.lgnav { border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.lgnav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }
.lgnav a {
display: inline-block; padding: .95rem 0;
font-family: var(--font-mono); font-size: .75rem; letter-spacing: .05em;
color: var(--muted-2); border-bottom: 2px solid transparent; margin-bottom: -1px;
transition: color .2s var(--ease), border-color .2s var(--ease);
}
.lgnav a:hover { color: var(--ink-3); }
.lgnav a[aria-current="page"] { color: var(--accent-text); border-bottom-color: var(--accent); }
.lgheads { font-size: clamp(1.15rem, 2vw, 1.5rem); }
/* Highlight cards. .badge supplies the frame; these add the figure, the body
copy .badge never needed, and the clause reference in place of its caption. */
@media (min-width: 700px) and (max-width: 1023px) { .lghis { grid-template-columns: repeat(2, 1fr); } }
.lghi { display: flex; flex-direction: column; }
.lghi__v {
display: block; font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700;
line-height: 1.1; color: var(--accent-text); letter-spacing: -.02em; margin-bottom: .5rem;
}
.lghi p { font-size: .8125rem; color: var(--muted); margin-top: .5rem; line-height: 1.65; flex: 1; }
.lghi span { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--line); }
/* Clause numbers, in the reading column and in the contents list. */
.lgnum {
display: inline-block; min-width: 2.4rem;
font-family: var(--font-mono); font-weight: 500; color: var(--accent-text);
}
.lgnum--sub { min-width: 3rem; font-size: .875em; }
.lgref {
font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .05em;
color: var(--muted-2); margin-top: -.5rem;
}
.prose .lgref { margin-bottom: 1.75rem; }
.lgdl { margin-block: 3rem; }
.lgdl .btn svg { flex-shrink: 0; }
.lgcontacts { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 2rem; }
.lgcontacts .btn { white-space: normal; }
/* ── Full text view ── */
.pagehero--slim h1 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); max-width: 26ch; }
.lgfull__act { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.75rem; }
.lgfull__note {
display: flex; gap: .6rem; align-items: flex-start;
margin-top: 1.25rem; max-width: 46rem;
font-size: .8125rem; color: var(--muted-2);
}
.lgfull__note svg { flex-shrink: 0; margin-top: .15rem; color: var(--accent-text); }
.lgfull { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
@media (min-width: 1024px) { .lgfull { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); align-items: start; } }
.lgtoc { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 1.25rem 1.35rem; }
@media (min-width: 1024px) {
/* Clears the sticky header; the list scrolls inside rather than pushing the
column taller than the viewport on the nine-section documents. */
.lgtoc { position: sticky; top: 88px; max-height: calc(100vh - 108px); overflow-y: auto; }
}
.lgtoc h2 {
font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted-2); margin-bottom: .9rem;
}
.lgtoc ol { display: grid; gap: .1rem; }
.lgtoc a {
display: grid; grid-template-columns: 1.6rem 1fr; gap: .3rem;
padding: .4rem 0; font-size: .8125rem; color: var(--muted); line-height: 1.45;
}
.lgtoc a span { font-family: var(--font-mono); color: var(--accent-text); }
.lgtoc a:hover { color: var(--ink); }
.lgdoc { max-width: 46rem; }
.lgdoc h3 { font-size: 1rem; margin-block: 1.75rem .6rem; color: var(--ink); }
.lgdoc ul { margin-bottom: 1rem; display: grid; gap: .5rem; }
.lgdoc li { position: relative; padding-inline-start: 1.1rem; color: var(--ink-3); font-size: .9375rem; line-height: 1.7; }
.lgdoc li::before {
content: ''; position: absolute; inset-inline-start: 0; top: .65em;
width: 5px; height: 5px; border-radius: 50%; background: var(--accent-line);
}
/* Statutory all-caps. The source drafts these in capitals for conspicuousness,
so the text is capitalised in the JSON, not by text-transform — a CSS
transform would not survive being copied out of the page. */
.lgcaps {
border-inline-start: 3px solid var(--accent-line);
background: var(--surface); border-radius: 0 var(--r-md) var(--r-md) 0;
padding: 1.1rem 1.25rem; margin-block: 1.5rem;
font-size: .8125rem; letter-spacing: .01em; line-height: 1.75; color: var(--ink-3);
}
[dir="rtl"] .lgcaps { border-radius: var(--r-md) 0 0 var(--r-md); }
.lgnote {
display: flex; gap: .75rem; align-items: flex-start;
border: 1px solid var(--accent-line); border-radius: var(--r-md);
background: var(--accent-soft); padding: 1rem 1.15rem; margin-block: 1.5rem;
font-size: .875rem; color: var(--ink-3); line-height: 1.7;
}
.lgnote svg { flex-shrink: 0; margin-top: .2rem; color: var(--accent-text); }
.lgbacktop { margin-top: 3rem; font-size: .8125rem; }
.lgbacktop a { color: var(--accent-text); }
/* ── Print / Save as PDF ──
The full view is the PDF. Everything that is navigation, a control, or a
route to a form is dropped; what remains is the document. */
@media print {
.hdr, .ftr, .lgnav, .lgtoc, .lgfull__act, .lgcontacts, .lgbacktop,
.cookie, .modal, .skip-link, .pagehero__bg, .stagebadge { display: none !important; }
html, body { background: #fff !important; color: #000 !important; }
.section, .pagehero { padding-block: 0 !important; border: 0 !important; }
.wrap { max-width: none !important; padding-inline: 0 !important; }
.lgfull { display: block !important; }
.lgdoc, .prose { max-width: none !important; }
.pagehero h1 { font-size: 20pt !important; margin-bottom: .5rem; }
.lgdoc h2 { font-size: 13pt !important; margin-block: 18pt 6pt; break-after: avoid; }
.lgdoc h3 { font-size: 11pt !important; margin-block: 12pt 4pt; break-after: avoid; }
.lgdoc p, .lgdoc li { font-size: 10pt !important; color: #000 !important; }
.crumbs { display: none !important; }
.metachip { border-color: #999 !important; color: #333 !important; background: none !important; }
.lgnote, .lgcaps { background: none !important; border-color: #999 !important; color: #000 !important; break-inside: avoid; }
.lgnote svg { display: none !important; }
.lgfull__note { color: #333 !important; margin-bottom: 12pt; }
.lgfull__note svg { display: none !important; }
}