@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/ibm-plex-mono-400.648f688d.woff2) format("woff2");
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/ibm-plex-mono-500.a18b3865.woff2) format("woff2");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/ibm-plex-sans.620cf466.woff2) format("woff2");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/ibm-plex-sans.620cf466.woff2) format("woff2");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/ibm-plex-sans.620cf466.woff2) format("woff2");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/ibm-plex-sans.620cf466.woff2) format("woff2");
}
@font-face {
font-family: "IBM Plex Serif";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/ibm-plex-serif-400-italic.10f65cbe.woff2) format("woff2");
}
@font-face {
font-family: "IBM Plex Serif";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/ibm-plex-serif-600.0b985ba4.woff2) format("woff2");
}
@font-face {
font-family: "IBM Plex Sans Fallback";
font-style: normal;
font-weight: 400;
src: local("Arial"), local("ArialMT"), local("Liberation Sans");
size-adjust: 100.79%;
ascent-override: 101.69%;
descent-override: 27.29%;
line-gap-override: 0%;
}
@font-face {
font-family: "IBM Plex Sans Fallback";
font-style: normal;
font-weight: 500;
src: local("Arial"), local("ArialMT"), local("Liberation Sans");
size-adjust: 102.4%;
ascent-override: 100.1%;
descent-override: 26.86%;
line-gap-override: 0%;
}
@font-face {
font-family: "IBM Plex Sans Fallback";
font-style: normal;
font-weight: 600;
src:
local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
size-adjust: 96.74%;
ascent-override: 105.96%;
descent-override: 28.42%;
line-gap-override: 0%;
}
@font-face {
font-family: "IBM Plex Sans Fallback";
font-style: normal;
font-weight: 700;
src:
local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
size-adjust: 99.16%;
ascent-override: 103.37%;
descent-override: 27.74%;
line-gap-override: 0%;
}
@font-face {
font-family: "IBM Plex Serif Fallback";
font-style: normal;
font-weight: 600;
src:
local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"),
local("LiberationSerif-Bold");
size-adjust: 113.15%;
ascent-override: 90.59%;
descent-override: 24.31%;
line-gap-override: 0%;
}
@font-face {
font-family: "IBM Plex Serif Fallback";
font-style: italic;
font-weight: 400;
src:
local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"),
local("LiberationSerif-Italic");
size-adjust: 104.49%;
ascent-override: 98.1%;
descent-override: 26.32%;
line-gap-override: 0%;
}
@font-face {
font-family: "IBM Plex Mono Fallback";
font-style: normal;
font-weight: 400;
src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"), local("LiberationMono");
size-adjust: 99.98%;
ascent-override: 102.52%;
descent-override: 27.5%;
line-gap-override: 0%;
}
@font-face {
font-family: "IBM Plex Mono Fallback";
font-style: normal;
font-weight: 500;
src:
local("Courier New Bold"), local("CourierNewPS-BoldMT"), local("Liberation Mono Bold"),
local("LiberationMono-Bold");
size-adjust: 99.98%;
ascent-override: 102.52%;
descent-override: 27.5%;
line-gap-override: 0%;
}
:root {
--oc-paper: #f3f1eb;
--oc-paper-deep: #ece9e1;
--oc-surface: #ffffff;
--oc-ink: #191c1f;
--oc-ink-soft: #43474d;
--oc-muted: #6a6e75;
--oc-hairline: #ddd9cf;
--oc-hairline-strong: #b9b5aa;
--oc-canary: #f2c230;
--oc-canary-halo: rgba(242, 194, 48, 0.25);
--oc-critical: #b4231f;
--oc-warning: #8a5a00;
--oc-success: #0b6b3a;
--oc-info: #3d6a80;
--oc-critical-tint: #fcebea;
--oc-warning-tint: #fbf1dc;
--oc-success-tint: #e4f3ea;
--oc-info-tint: #e6eff4;
--oc-chart-1: #3d6a80;
--oc-chart-2: #6b8f5e;
--oc-chart-3: #a67c3d;
--oc-chart-4: #4e7c7a;
--oc-chart-5: #8b5e52;
--oc-chart-6: #5b6068;
--oc-shadow-card: 0 1px 2px rgba(25, 28, 31, 0.05), 0 2px 6px rgba(25, 28, 31, 0.04);
--oc-shadow-overlay: 0 8px 28px rgba(15, 20, 30, 0.14);
--oc-font-serif: "IBM Plex Serif", "IBM Plex Serif Fallback", Georgia, "Times New Roman", serif;
--oc-grid: rgba(25, 28, 31, 0.04);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--oc-paper);
color: var(--oc-ink);
font-family: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, sans-serif;
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
}
button {
font: inherit;
}
:focus-visible {
outline: 2px solid var(--oc-canary);
outline-offset: 2px;
border-radius: 2px;
}
.mono {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
}
[id] {
scroll-margin-top: 76px;
}
svg.ic {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 1.75;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}
.skip {
position: absolute;
left: -9999px;
z-index: 90;
background: var(--oc-ink);
color: #fff;
padding: 10px 18px;
border-radius: 0 0 7px 0;
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
}
.skip:focus {
left: 0;
top: 0;
}
.gridpaper {
background-image:
linear-gradient(var(--oc-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--oc-grid) 1px, transparent 1px);
background-size: 36px 36px;
}
.top {
position: sticky;
top: 0;
z-index: 50;
background: var(--oc-surface);
}
.cline {
height: 3px;
background: var(--oc-ink);
position: relative;
overflow: hidden;
}
.bird {
position: absolute;
left: 0;
top: 0;
width: 64px;
height: 3px;
background: var(--oc-canary);
will-change: transform;
}
nav {
border-bottom: 1px solid transparent;
transition: border-color 0.25s ease-out;
}
.top.scrolled nav {
border-bottom-color: var(--oc-hairline);
}
.nav-in {
display: flex;
align-items: center;
gap: 28px;
padding: 12px 0;
}
.wordmark {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.wordmark img {
display: block;
height: 28px;
}
.wordmark .logo-full {
width: 179px;
}
.wordmark .logo-mark {
display: none;
width: 44px;
}
.nlink {
font-size: 13.5px;
color: var(--oc-ink-soft);
text-decoration: none;
position: relative;
padding-bottom: 2px;
}
.nlink::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 1.5px;
background: var(--oc-ink);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.22s ease-out;
}
.nlink:hover::after {
transform: scaleX(1);
}
.nav-spacer {
flex: 1;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
font-weight: 600;
padding: 10px 20px;
border-radius: 7px;
text-decoration: none;
cursor: pointer;
border: 1.5px solid transparent;
transition:
background 0.18s ease-out,
transform 0.18s ease-out,
border-color 0.18s ease-out;
}
.btn .arr {
transition: transform 0.18s ease-out;
}
.btn:hover .arr {
transform: translateX(3px);
}
.btn:hover {
transform: translateY(-1px);
}
.btn:active {
transform: translateY(0) scale(0.98);
}
.btn.ink {
background: var(--oc-ink);
color: #ffffff;
}
.btn.ink:hover {
background: #2a2e33;
}
.btn.ghost {
background: var(--oc-surface);
color: var(--oc-ink);
border-color: var(--oc-ink);
}
.btn.ghost:hover {
background: var(--oc-paper);
}
.chip {
display: inline-block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.05em;
padding: 2px 8px;
border-radius: 5px;
color: #fff;
}
.chip.warn {
background: var(--oc-warning);
}
.chip.crit {
background: var(--oc-critical);
}
.chip.info {
background: var(--oc-info);
}
.slide.active .icard .chip,
.slide.active .rail .chip {
animation: stamp 0.4s ease-out 0.45s backwards;
}
@keyframes stamp {
0% {
transform: scale(1.5);
opacity: 0;
}
70% {
transform: scale(0.96);
opacity: 1;
}
100% {
transform: scale(1);
}
}
.hero {
overflow: hidden;
position: relative;
}
.slides {
display: grid;
min-height: 545px;
}
.slide {
grid-area: 1 / 1;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 48px;
align-items: center;
padding: 52px 0 44px;
opacity: 0;
visibility: hidden;
transition:
opacity 0.55s ease-out,
visibility 0s linear 0.55s;
pointer-events: none;
}
.slide.active {
opacity: 1;
visibility: visible;
transition: opacity 0.55s ease-out;
pointer-events: auto;
}
.js .slide .st {
opacity: 0;
transform: translateY(14px);
transition:
opacity 0.5s ease-out,
transform 0.5s ease-out;
}
.slide.active .st {
opacity: 1;
transform: none;
}
.slide.active .st.d1 {
transition-delay: 0.1s;
}
.slide.active .st.d2 {
transition-delay: 0.22s;
}
.slide.active .st.d3 {
transition-delay: 0.34s;
}
.slide.active .st.d4 {
transition-delay: 0.46s;
}
.slide h1,
.slide .sh1 {
font-size: clamp(28px, 4vw, 40px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.015em;
text-wrap: balance;
margin-bottom: 16px;
}
.slide h1 .soft,
.slide .sh1 .soft {
color: var(--oc-muted);
}
.slide .sub {
font-size: 16.5px;
line-height: 1.6;
color: var(--oc-ink-soft);
max-width: 28.8em;
margin-bottom: 24px;
}
.slide .ctas {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.trustline {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", monospace;
font-size: 12px;
color: var(--oc-muted);
}
.eyebrow {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--oc-muted);
margin-bottom: 12px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.eyebrow svg.ic {
width: 14px;
height: 14px;
}
.slide h1.serif,
.slide .sh1.serif {
font-family: "IBM Plex Serif", "IBM Plex Serif Fallback", Georgia, serif;
font-weight: 600;
font-size: clamp(27px, 3.9vw, 38px);
}
.uline {
position: relative;
white-space: nowrap;
}
.uline::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 2px;
background: var(--oc-ink);
transform: scaleX(0);
transform-origin: left;
}
.slide.active .uline::after {
transition: transform 0.7s ease-out 0.9s;
transform: scaleX(1);
}
.ghostnum {
position: absolute;
top: -34px;
left: -10px;
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", monospace;
font-size: 150px;
font-weight: 500;
color: var(--oc-ink);
opacity: 0.045;
pointer-events: none;
user-select: none;
line-height: 1;
}
.s2copy {
position: relative;
}
.heropanel {
position: relative;
}
.orgwrap {
overflow: hidden;
position: absolute;
inset: -30px -40px -20px -20px;
opacity: 0.75;
pointer-events: none;
will-change: transform;
}
.orgwrap svg {
width: 100%;
height: 100%;
}
.orgmap-stroke {
stroke: var(--oc-ink);
opacity: 0.1;
fill: none;
stroke-width: 1.2;
}
.orgmap-dot-ok {
fill: var(--oc-success);
}
.orgmap-dot-bad {
fill: var(--oc-critical);
}
.orgmap-dot-idle {
fill: var(--oc-hairline-strong);
}
.orgmap-person {
fill: var(--oc-ink);
opacity: 0.12;
}
.beam {
position: absolute;
top: -6%;
bottom: -6%;
left: 0;
width: 2px;
background: var(--oc-canary);
box-shadow: 0 0 12px rgba(242, 194, 48, 0.55);
opacity: 0;
pointer-events: none;
}
.slide.active .beam {
animation: sweep 5.2s ease-in-out 1s infinite;
}
@keyframes sweep {
0% {
opacity: 0;
transform: translateX(0);
}
6% {
opacity: 1;
}
58% {
opacity: 1;
transform: translateX(46vw);
}
64% {
opacity: 0;
transform: translateX(46vw);
}
100% {
opacity: 0;
transform: translateX(46vw);
}
}
.cardstack {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
}
.stamp-line {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", monospace;
font-size: 11.5px;
color: var(--oc-muted);
text-align: right;
margin-bottom: 10px;
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 7px;
}
.livedot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--oc-success);
animation: ocpulse 2.4s ease-in-out infinite;
}
@keyframes ocpulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.25;
}
}
.icard {
background: var(--oc-surface);
border: 1px solid var(--oc-hairline);
border-radius: 8px;
padding: 15px 18px 13px;
position: relative;
transition:
transform 0.2s ease-out,
border-color 0.2s ease-out;
}
.icard:hover {
transform: translateY(-2px) rotate(-0.2deg);
border-color: var(--oc-hairline-strong);
}
.icard .row1 {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 7px;
}
.icard .row1 svg.ic {
width: 16px;
height: 16px;
color: var(--oc-muted);
margin-left: auto;
}
.icard h3,
.icard .ct {
font-size: 15px;
font-weight: 600;
line-height: 1.35;
}
.icard p {
font-size: 13.5px;
color: var(--oc-ink-soft);
margin-bottom: 9px;
}
.icard .meta {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", monospace;
font-size: 11px;
color: var(--oc-muted);
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.icard.dashed {
border: 1px dashed var(--oc-hairline-strong);
background: transparent;
}
.icard.dashed h3 {
color: var(--oc-muted);
font-weight: 500;
}
.icard.dashed .why {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", monospace;
font-size: 11px;
color: var(--oc-muted);
}
.rail {
background: var(--oc-surface);
border: 1px solid var(--oc-hairline);
border-top: 2px solid var(--oc-ink);
border-radius: 0 0 8px 8px;
padding: 16px 20px 14px;
}
.rail .rhead {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", monospace;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--oc-muted);
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 8px;
}
.rail .item {
padding: 11px 0 12px;
border-bottom: 1px solid var(--oc-hairline);
}
.rail .item:last-of-type {
border-bottom: none;
}
.rail .item h3 {
font-family: "IBM Plex Serif", "IBM Plex Serif Fallback", Georgia, serif;
font-weight: 600;
font-size: 16px;
line-height: 1.32;
margin-bottom: 6px;
}
.rail .rfoot {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", monospace;
font-size: 11.5px;
color: var(--oc-muted);
padding-top: 10px;
border-top: 1px solid var(--oc-hairline);
}
.board {
background: var(--oc-surface);
border: 1px solid var(--oc-hairline);
border-radius: 8px;
padding: 18px 20px 14px;
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", monospace;
font-size: 12.5px;
}
.board .bhead {
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--oc-muted);
padding-bottom: 10px;
border-bottom: 1px solid var(--oc-hairline);
margin-bottom: 6px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.bhead-left {
display: inline-flex;
align-items: center;
gap: 8px;
}
.clock {
width: 16px;
height: 16px;
}
.clock circle {
stroke: var(--oc-muted);
stroke-width: 1.5;
fill: none;
}
.clock .hand {
stroke: var(--oc-ink);
stroke-width: 1.5;
stroke-linecap: round;
transform-origin: 8px 8px;
}
.slide.active .clock .hand {
animation: nightturn 5.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s infinite;
}
@keyframes nightturn {
0% {
transform: rotate(60deg);
}
80% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
.js .board .brow {
opacity: 0;
transform: translateX(-8px);
transition:
opacity 0.4s ease-out,
transform 0.4s ease-out;
}
.board .brow {
display: grid;
grid-template-columns: 46px 1fr auto;
gap: 14px;
padding: 7px 0;
color: var(--oc-ink-soft);
}
.board .brow.on {
opacity: 1;
transform: none;
}
.board .t {
color: var(--oc-muted);
}
.board .ok {
color: var(--oc-success);
}
.board .attn {
color: var(--oc-warning);
}
.board .brow.now {
color: var(--oc-ink);
font-weight: 500;
}
.pulse {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--oc-success);
margin-right: 7px;
animation: ocpulse 2.4s ease-in-out infinite;
}
.controls {
display: flex;
align-items: center;
gap: 18px;
padding: 0 0 26px;
}
.dots {
display: flex;
gap: 0;
align-items: center;
}
.sdot {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
cursor: pointer;
padding: 0;
}
.sdot::before {
content: "";
width: 8px;
height: 8px;
border-radius: 99px;
border: 1px solid var(--oc-hairline-strong);
transition:
width 0.25s ease-out,
background 0.25s ease-out,
border-color 0.25s ease-out;
}
.sdot:hover::before {
border-color: var(--oc-ink);
}
.sdot.active::before {
width: 22px;
background: var(--oc-ink);
border-color: var(--oc-ink);
}
.counter {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", monospace;
font-size: 11.5px;
color: var(--oc-muted);
}
.arrows {
display: flex;
gap: 8px;
margin-left: auto;
}
.sarrow {
flex-shrink: 0;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--oc-hairline);
border-radius: 7px;
background: var(--oc-surface);
color: var(--oc-ink);
cursor: pointer;
transition:
border-color 0.18s ease-out,
transform 0.18s ease-out;
}
.sarrow:hover {
border-color: var(--oc-ink);
transform: translateY(-1px);
}
.playpause .ic-play {
display: none;
}
.playpause.paused .ic-play {
display: block;
}
.playpause.paused .ic-pause {
display: none;
}
.no-autoplay .playpause {
display: none;
}
.tickerband {
border-top: 1px solid var(--oc-hairline);
border-bottom: 1px solid var(--oc-hairline);
background: var(--oc-surface);
overflow: hidden;
position: relative;
}
.ticker {
display: flex;
align-items: center;
width: max-content;
animation: tickmove 52s linear infinite;
}
.tickerband:hover .ticker {
animation-play-state: paused;
}
@keyframes tickmove {
to {
transform: translateX(-50%);
}
}
.tick-item {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 26px 12px 0;
font-size: 13.5px;
color: var(--oc-ink-soft);
white-space: nowrap;
}
.tick-item::after {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--oc-hairline-strong);
margin-left: 26px;
}
.proof {
background: var(--oc-paper);
}
.proof-in {
display: flex;
flex-wrap: wrap;
gap: 14px 52px;
padding: 20px 0;
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", monospace;
font-size: 12.5px;
color: var(--oc-ink-soft);
list-style: none;
margin-block: 0;
}
.proof-in li {
display: inline-flex;
align-items: center;
gap: 9px;
}
.proof-in svg.ic {
width: 16px;
height: 16px;
color: var(--oc-muted);
}
.proof-in b {
font-weight: 500;
color: var(--oc-ink);
font-size: 15px;
}
section.band {
padding: 72px 0 76px;
}
section.band.alt {
background: var(--oc-surface);
border-top: 1px solid var(--oc-hairline);
border-bottom: 1px solid var(--oc-hairline);
}
.band h2 {
font-size: 26px;
font-weight: 600;
letter-spacing: -0.01em;
text-wrap: balance;
margin-bottom: 10px;
}
.band .lede {
font-size: 16px;
color: var(--oc-ink-soft);
max-width: 37.2em;
margin-bottom: 8px;
}
.rulewrap {
position: relative;
height: 3px;
margin: 26px 0 34px;
overflow: hidden;
}
.rule {
position: absolute;
left: 0;
right: 0;
top: 1px;
height: 1px;
background: var(--oc-hairline-strong);
}
.js .rule {
transform: scaleX(0);
transform-origin: left;
}
.in .rule,
.rule.in {
transform: scaleX(1);
transition: transform 0.8s ease-out 0.1s;
}
.rulewrap::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 28px;
height: 3px;
background: var(--oc-canary);
opacity: 0;
}
.in .rulewrap::after,
.rulewrap.in::after {
animation: rulerun 1.4s ease-in-out 0.7s 1 both;
}
@keyframes rulerun {
0% {
opacity: 1;
transform: translateX(-28px);
}
85% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateX(min(92vw, 1020px));
}
}
.js .rv {
opacity: 0;
transform: translateY(18px);
}
.rv.in {
opacity: 1;
transform: none;
transition:
opacity 0.6s ease-out,
transform 0.6s ease-out;
}
.flow {
margin: 6px 0 30px;
}
.flow svg {
width: 100%;
height: auto;
display: block;
}
.flow .node-stroke {
stroke: var(--oc-ink);
stroke-width: 1.75;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.flow .node-label {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", monospace;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
fill: var(--oc-muted);
}
.flow .pipe {
stroke: var(--oc-hairline-strong);
stroke-width: 1.5;
stroke-dasharray: 6 8;
fill: none;
}
.in .pipe {
animation: dashflow 1.4s linear infinite;
}
@keyframes dashflow {
to {
stroke-dashoffset: -28;
}
}
.steps {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}
.step {
background: var(--oc-surface);
border: 1px solid var(--oc-hairline);
border-radius: 8px;
padding: 22px 24px 20px;
transition:
transform 0.2s ease-out,
border-color 0.2s ease-out;
}
.step:hover {
transform: translateY(-3px);
border-color: var(--oc-hairline-strong);
}
.step .shead {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.step .snum {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", monospace;
font-size: 12px;
color: var(--oc-muted);
}
.step svg.big {
width: 26px;
height: 26px;
stroke: var(--oc-ink);
stroke-width: 1.75;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.js .step svg.big path,
.js .step svg.big circle {
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.step.in svg.big path,
.step.in svg.big circle {
stroke-dashoffset: 0;
transition: stroke-dashoffset 0.9s ease-out;
}
.step.in svg.big path:nth-child(2),
.step.in svg.big circle:nth-child(2) {
transition-delay: 0.15s;
}
.step.in svg.big path:nth-child(3),
.step.in svg.big circle:nth-child(3) {
transition-delay: 0.3s;
}
.step.in svg.big path:nth-child(4),
.step.in svg.big circle:nth-child(4) {
transition-delay: 0.45s;
}
.step.in svg.big path:nth-child(5),
.step.in svg.big circle:nth-child(5) {
transition-delay: 0.6s;
}
.step h3 {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
}
.step p {
font-size: 14px;
color: var(--oc-ink-soft);
}
.catalog {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 48px;
}
.entry {
display: grid;
grid-template-columns: 44px 1fr;
gap: 16px;
padding: 16px 34px 16px 6px;
border-bottom: 1px solid var(--oc-hairline);
border-radius: 4px;
position: relative;
transition: background 0.2s ease-out;
}
.entry:hover {
background: var(--oc-paper);
}
.entry::after {
content: "\2192";
position: absolute;
right: 10px;
top: 50%;
margin-top: -12px;
font-size: 16px;
color: var(--oc-ink);
opacity: 0;
transform: translateX(-6px);
transition:
opacity 0.2s ease-out,
transform 0.2s ease-out;
}
.entry:hover::after {
opacity: 1;
transform: translateX(0);
}
.pict {
width: 44px;
height: 44px;
border: 1px solid var(--oc-hairline);
border-radius: 8px;
background: var(--oc-surface);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
transition:
border-color 0.2s ease-out,
transform 0.2s ease-out;
}
.entry:hover .pict {
border-color: var(--oc-hairline-strong);
transform: translateY(-2px);
}
.pict svg {
width: 22px;
height: 22px;
stroke: var(--oc-ink);
stroke-width: 1.6;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.pict .pdot {
position: absolute;
right: -3px;
top: -3px;
width: 8px;
height: 8px;
border-radius: 50%;
border: 2px solid var(--oc-paper);
}
.pict .pdot.crit {
background: var(--oc-critical);
}
.pict .pdot.warn {
background: var(--oc-warning);
}
.pict .pdot.info {
background: var(--oc-info);
}
.catalog .entry:nth-child(odd) .pdot {
animation: ocpulse 3s ease-in-out infinite;
}
.catalog .entry:nth-child(even) .pdot {
animation: ocpulse 3s ease-in-out 1.5s infinite;
}
.entry:hover .pict-lic svg {
animation: fan 0.5s ease-out;
}
@keyframes fan {
50% {
transform: rotate(-6deg);
}
}
.entry:hover .pict-phone svg {
animation: ring 0.5s ease-in-out;
}
@keyframes ring {
25% {
transform: rotate(-10deg);
}
75% {
transform: rotate(10deg);
}
}
.entry:hover .pict-room svg {
animation: blinkoff 0.5s steps(2) 2;
}
@keyframes blinkoff {
50% {
opacity: 0.25;
}
}
.entry:hover .pict-ws svg {
animation: nudge 0.5s ease-out;
}
@keyframes nudge {
50% {
transform: translateY(-3px);
}
}
.entry h3 {
font-family: "IBM Plex Serif", "IBM Plex Serif Fallback", Georgia, serif;
font-weight: 600;
font-size: 16.5px;
margin-bottom: 3px;
}
.entry p {
font-size: 14px;
color: var(--oc-ink-soft);
line-height: 1.5;
}
.cat-foot {
display: flex;
align-items: center;
gap: 22px;
padding-top: 22px;
flex-wrap: wrap;
}
.textlink {
font-size: 13.5px;
font-weight: 600;
color: var(--oc-ink);
text-decoration: none;
border-bottom: 1.5px solid var(--oc-ink);
padding-bottom: 1px;
transition: opacity 0.18s ease-out;
}
.textlink:hover {
opacity: 0.7;
}
.cat-note {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", monospace;
font-size: 11.5px;
color: var(--oc-muted);
}
.cols3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.cols3 > div {
padding: 4px 28px;
}
.cols3 > div:first-child {
padding-left: 0;
}
.cols3 > div + div {
border-left: 1px solid var(--oc-hairline);
}
.tico {
width: 44px;
height: 44px;
border: 1px solid var(--oc-hairline);
border-radius: 8px;
background: var(--oc-surface);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
transition:
transform 0.2s ease-out,
border-color 0.2s ease-out;
}
.cols3 > div:hover .tico {
transform: translateY(-3px);
border-color: var(--oc-hairline-strong);
}
.tico svg {
width: 22px;
height: 22px;
stroke: var(--oc-ink);
stroke-width: 1.6;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.cols3 > div:hover .tico-ci svg {
animation: spinonce 0.7s ease-out;
}
@keyframes spinonce {
to {
transform: rotate(360deg);
}
}
.cols3 h3 {
font-size: 15.5px;
font-weight: 600;
margin-bottom: 8px;
}
.cols3 p {
font-size: 14px;
line-height: 1.6;
color: var(--oc-ink-soft);
}
.cta {
text-align: center;
padding: 84px 0 92px;
position: relative;
overflow: hidden;
}
.cta-org {
position: absolute;
right: -80px;
top: 50%;
width: 420px;
height: 320px;
margin-top: -160px;
opacity: 0.5;
pointer-events: none;
}
.cta-org-l {
right: auto;
left: -80px;
transform: scaleX(-1);
}
.cta .container {
position: relative;
}
.cta h2 {
font-size: clamp(26px, 3.4vw, 34px);
font-weight: 700;
letter-spacing: -0.015em;
text-wrap: balance;
margin-bottom: 12px;
}
.cta p {
color: var(--oc-ink-soft);
max-width: 31.2em;
margin: 0 auto 26px;
}
.cta .ctas {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 18px;
}
.cta .btn .arr {
animation: beckon 2.6s ease-in-out infinite;
}
@keyframes beckon {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(4px);
}
}
footer {
border-top: 1px solid var(--oc-hairline);
background: var(--oc-surface);
}
.foot-in {
display: flex;
align-items: center;
gap: 26px;
flex-wrap: wrap;
padding: 26px 0;
font-size: 13px;
color: var(--oc-ink-soft);
}
.foot-in .nlink {
font-size: 13px;
}
.foot-spacer {
flex: 1;
}
.tm {
font-size: 12px;
color: var(--oc-muted);
padding-bottom: 26px;
max-width: 43.2em;
}
.cline-foot {
height: 3px;
background: var(--oc-ink);
position: relative;
}
.cline-foot::before {
content: "";
position: absolute;
right: 0;
top: 0;
width: 64px;
height: 3px;
background: var(--oc-canary);
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.pulse,
.livedot,
.pdot,
.cta .btn .arr {
animation: none !important;
}
.slide,
.slide .st,
.rv,
.rule,
.board .brow,
.btn,
.btn .arr,
.icard,
.step,
.sdot,
.sdot::before,
.sarrow,
.nlink::after {
transition: none !important;
}
.rv,
.slide .st,
.board .brow {
opacity: 1 !important;
transform: none !important;
}
.rule {
transform: scaleX(1) !important;
}
.step svg.big path,
.step svg.big circle {
stroke-dasharray: none !important;
stroke-dashoffset: 0 !important;
transition: none !important;
}
.ticker {
animation: none !important;
}
.tickerband {
overflow-x: auto;
}
.beam {
display: none !important;
}
.slide.active .clock .hand {
animation: none !important;
transform: rotate(180deg);
}
.rulewrap::after {
animation: none !important;
opacity: 0 !important;
}
.in .pipe {
animation: none !important;
}
.slide.active .icard .chip,
.slide.active .rail .chip {
animation: none !important;
}
.slide.active .uline::after {
transition: none !important;
transform: scaleX(1);
}
.entry:hover .pict svg,
.cols3 > div:hover .tico svg {
animation: none !important;
}
.orgwrap {
transform: none !important;
}
}
@media (max-width: 860px) {
.container {
padding: 0 20px;
}
.slide {
grid-template-columns: 1fr;
gap: 30px;
padding: 36px 0 30px;
}
.slides {
min-height: 700px;
}
.steps {
grid-template-columns: 1fr;
}
.catalog {
grid-template-columns: 1fr;
}
.cols3 {
grid-template-columns: 1fr;
}
.cols3 > div {
padding: 14px 0;
}
.cols3 > div + div {
border-left: none;
border-top: 1px solid var(--oc-hairline);
}
.nav-in > .nlink {
display: none;
}
.flow {
display: none;
}
.ghostnum {
font-size: 96px;
top: -20px;
}
.cta-org {
display: none;
}
.orgwrap {
inset: -10px -20px -10px -10px;
opacity: 0.45;
}
}
.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;
}
.preview-note {
background: var(--oc-paper);
border-bottom: 1px solid var(--oc-hairline);
}
.preview-note p {
margin: 0;
padding: 10px 0;
font-size: 13.5px;
line-height: 1.5;
color: var(--oc-ink-soft);
}
.preview-note strong {
color: var(--oc-ink);
}
.mnav-btn {
display: none;
}
.mnav {
display: none;
}
@media (max-width: 860px) {
.mnav-btn {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
min-width: 44px;
min-height: 44px;
background: none;
border: 1px solid var(--oc-hairline);
border-radius: 8px;
cursor: pointer;
}
.mnav-bar {
width: 18px;
height: 2px;
background: var(--oc-ink);
}
.mnav {
display: block;
border-top: 1px solid var(--oc-hairline);
background: var(--oc-surface);
}
.mnav[hidden] {
display: none;
}
.mnav .nlink {
display: block;
padding: 14px 20px;
border-bottom: 1px solid var(--oc-hairline);
}
}
.chip.ok {
background: var(--oc-success);
}
.chip.flow {
background: var(--oc-success);
}
.chip.fix {
background: var(--oc-info);
}
.chip.macro {
background: var(--oc-ink);
}
.chip.bot {
background: var(--oc-canary);
color: var(--oc-ink);
}
.steps.four {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
.steps.four {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 560px) {
.steps.four {
grid-template-columns: 1fr;
}
}
.pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 34px;
}
@media (max-width: 900px) {
.pillars {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 560px) {
.pillars {
grid-template-columns: 1fr;
}
}
.pillar {
background: var(--oc-surface);
border: 1px solid var(--oc-hairline);
border-radius: 12px;
padding: 22px 22px 20px;
display: flex;
flex-direction: column;
gap: 10px;
transition:
transform 0.18s ease-out,
box-shadow 0.18s ease-out,
border-color 0.18s ease-out;
}
.pillar:hover {
transform: translateY(-3px);
border-color: var(--oc-hairline-strong);
box-shadow: 0 10px 26px rgba(25, 28, 31, 0.07);
}
.pillar .pnum {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.08em;
color: var(--oc-muted);
text-transform: uppercase;
}
.pillar h3 {
font-size: 17px;
font-weight: 600;
display: flex;
align-items: center;
gap: 9px;
}
.pillar h3 .ic {
width: 19px;
height: 19px;
stroke: var(--oc-ink);
}
.pillar p {
font-size: 13.8px;
line-height: 1.55;
color: var(--oc-ink-soft);
flex: 1;
}
.pillar .textlink {
align-self: flex-start;
}
.split {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: 52px;
align-items: center;
margin-top: 34px;
}
.split.rev {
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
@media (max-width: 900px) {
.split,
.split.rev {
grid-template-columns: minmax(0, 1fr);
gap: 30px;
}
}
.split ul.feat {
list-style: none;
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 11px;
}
.split ul.feat li {
position: relative;
padding-left: 26px;
font-size: 14.5px;
line-height: 1.55;
color: var(--oc-ink-soft);
}
.split ul.feat li::before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--oc-canary);
background: var(--oc-canary-halo);
}
.split ul.feat li b {
color: var(--oc-ink);
font-weight: 600;
}
.fixcard {
background: var(--oc-surface);
border: 1px solid var(--oc-hairline);
border-radius: 12px;
padding: 20px 22px;
box-shadow: 0 12px 30px rgba(25, 28, 31, 0.06);
}
.fixcard .ct {
font-weight: 600;
font-size: 14.5px;
margin: 10px 0 4px;
}
.fixsteps {
list-style: none;
margin-top: 14px;
border-top: 1px solid var(--oc-hairline);
}
.fixsteps li {
display: flex;
align-items: baseline;
gap: 12px;
padding: 11px 0;
border-bottom: 1px solid var(--oc-hairline);
font-size: 13.5px;
color: var(--oc-ink-soft);
}
.fixsteps li .fs {
flex: 0 0 auto;
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--oc-muted);
min-width: 74px;
}
.fixsteps li.done .fs {
color: var(--oc-success);
}
.fixsteps li b {
color: var(--oc-ink);
font-weight: 600;
}
.fixfoot {
margin-top: 12px;
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 11px;
color: var(--oc-muted);
}
.flowmap {
display: flex;
align-items: stretch;
gap: 0;
margin-top: 8px;
}
@media (max-width: 900px) {
.flowmap {
flex-direction: column;
}
}
.fnode {
flex: 1 1 0;
background: var(--oc-surface);
border: 1.5px solid var(--oc-ink);
border-radius: 10px;
padding: 14px 16px;
min-width: 0;
}
.fnode .fk {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--oc-muted);
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 7px;
}
.fnode .fk::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--oc-canary);
}
.fnode.cond .fk::before {
background: var(--oc-info);
}
.fnode.act .fk::before {
background: var(--oc-success);
}
.fnode p,
.fnode li {
font-size: 13.5px;
color: var(--oc-ink);
line-height: 1.5;
}
.fnode ul {
list-style: none;
}
.fnode ul li {
padding: 5px 0;
border-bottom: 1px dashed var(--oc-hairline);
}
.fnode ul li:last-child {
border-bottom: 0;
}
.fpipe {
flex: 0 0 36px;
position: relative;
align-self: center;
height: 0;
border-top: 2px dashed var(--oc-hairline-strong);
}
.fpipe::after {
content: "";
position: absolute;
right: -1px;
top: -5px;
border: 4px solid transparent;
border-left-color: var(--oc-hairline-strong);
}
@media (max-width: 900px) {
.fpipe {
flex-basis: 26px;
width: 0;
height: 26px;
border-top: 0;
border-left: 2px dashed var(--oc-hairline-strong);
align-self: center;
}
.fpipe::after {
right: -5px;
top: auto;
bottom: -1px;
border: 4px solid transparent;
border-top-color: var(--oc-hairline-strong);
}
}
.recipes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 26px;
}
@media (max-width: 900px) {
.recipes {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 560px) {
.recipes {
grid-template-columns: 1fr;
}
}
.recipe {
border: 1px dashed var(--oc-hairline-strong);
border-radius: 10px;
padding: 13px 15px;
font-size: 13px;
color: var(--oc-ink-soft);
background: var(--oc-paper);
}
.recipe b {
display: block;
color: var(--oc-ink);
font-weight: 600;
margin-bottom: 3px;
font-size: 13.5px;
}
.studio {
display: grid;
grid-template-columns: 150px minmax(0, 1fr) 170px;
gap: 14px;
background: var(--oc-surface);
border: 1px solid var(--oc-hairline);
border-radius: 12px;
padding: 16px;
box-shadow: 0 12px 30px rgba(25, 28, 31, 0.06);
}
@media (max-width: 700px) {
.studio {
grid-template-columns: 1fr;
}
}
.studio .shd {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--oc-muted);
margin-bottom: 9px;
}
.palette .pblock {
border: 1px dashed var(--oc-hairline-strong);
border-radius: 8px;
padding: 7px 10px;
font-size: 12px;
color: var(--oc-ink-soft);
margin-bottom: 7px;
background: var(--oc-paper);
cursor: grab;
}
.canvas {
border-left: 1px solid var(--oc-hairline);
border-right: 1px solid var(--oc-hairline);
padding: 0 14px;
}
.mblock {
border: 1.5px solid var(--oc-ink);
border-radius: 9px;
padding: 10px 13px;
font-size: 13px;
background: var(--oc-surface);
position: relative;
}
.mblock + .mblock {
margin-top: 18px;
}
.mblock + .mblock::before {
content: "";
position: absolute;
top: -19px;
left: 26px;
height: 18px;
border-left: 2px dashed var(--oc-hairline-strong);
}
.mblock .mk {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--oc-muted);
display: block;
margin-bottom: 2px;
}
.mblock.when {
border-color: var(--oc-warning);
}
.deploy .drow {
font-size: 12.5px;
color: var(--oc-ink-soft);
padding: 6px 0;
border-bottom: 1px solid var(--oc-hairline);
}
.deploy .drow b {
color: var(--oc-ink);
font-weight: 600;
}
.deploy .btn {
margin-top: 12px;
font-size: 12.5px;
padding: 8px 14px;
}
.chat {
background: var(--oc-surface);
border: 1px solid var(--oc-hairline);
border-radius: 12px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: 0 12px 30px rgba(25, 28, 31, 0.06);
}
.chat .chd {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--oc-muted);
border-bottom: 1px solid var(--oc-hairline);
padding-bottom: 9px;
}
.msg {
max-width: 85%;
font-size: 13.5px;
line-height: 1.5;
}
.msg.user {
align-self: flex-end;
background: var(--oc-paper);
border: 1px solid var(--oc-hairline-strong);
border-radius: 12px 12px 3px 12px;
padding: 9px 13px;
}
.msg.bot {
align-self: flex-start;
width: 85%;
}
.msg.bot .who {
font-size: 11.5px;
color: var(--oc-muted);
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 6px;
}
.msg.bot .who::before {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--oc-canary);
box-shadow: 0 0 0 3px var(--oc-canary-halo);
}
.botcard {
border: 1px solid var(--oc-hairline);
border-left: 3px solid var(--oc-canary);
border-radius: 3px 12px 12px 12px;
padding: 12px 14px;
background: #fff;
}
.botcard .ct {
font-weight: 600;
font-size: 13.5px;
margin-bottom: 4px;
}
.botcard p {
color: var(--oc-ink-soft);
font-size: 13px;
}
.cbtns {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.cbtn {
font-size: 12px;
font-weight: 600;
border: 1.5px solid var(--oc-ink);
border-radius: 6px;
background: var(--oc-surface);
color: var(--oc-ink);
padding: 5px 11px;
cursor: pointer;
}
.cbtn.primary {
background: var(--oc-ink);
color: #fff;
}
.pagehero {
padding: 74px 0 56px;
border-bottom: 1px solid var(--oc-hairline);
}
.pagehero h1 {
font-size: clamp(30px, 4.6vw, 44px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.08;
text-wrap: balance;
margin: 12px 0 16px;
max-width: 12.6em;
}
.pagehero .sub {
max-width: 34.8em;
}
.form {
background: var(--oc-surface);
border: 1px solid var(--oc-hairline);
border-radius: 12px;
padding: 26px;
box-shadow: 0 12px 30px rgba(25, 28, 31, 0.06);
}
.fgrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 560px) {
.fgrid {
grid-template-columns: 1fr;
}
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
}
.field.full {
grid-column: 1 / -1;
}
.field label {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--oc-muted);
}
.field input,
.field select,
.field textarea {
font: inherit;
font-size: 14px;
color: var(--oc-ink);
background: var(--oc-paper);
border: 1px solid var(--oc-hairline-strong);
border-radius: 7px;
padding: 10px 13px;
}
.field textarea {
resize: vertical;
min-height: 92px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--oc-ink);
box-shadow: 0 0 0 3px var(--oc-canary-halo);
}
.checks2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px 16px;
}
@media (max-width: 560px) {
.checks2 {
grid-template-columns: 1fr;
}
}
.checks2 label {
display: flex;
align-items: center;
gap: 9px;
font-size: 13.5px;
color: var(--oc-ink-soft);
font-family: inherit;
text-transform: none;
letter-spacing: normal;
}
.checks2 input {
width: 16px;
height: 16px;
accent-color: var(--oc-ink);
}
.form .btn {
border: 1.5px solid transparent;
font: inherit;
font-size: 13.5px;
font-weight: 600;
}
.form-success {
text-align: center;
padding: 40px 10px;
}
.form-success h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 8px;
}
.form-success p {
color: var(--oc-ink-soft);
font-size: 14px;
}
.nextsteps {
display: flex;
flex-direction: column;
gap: 18px;
}
.nextsteps .ns {
display: flex;
gap: 14px;
align-items: baseline;
}
.nextsteps .snum {
flex: 0 0 auto;
}
.nextsteps h3 {
font-size: 15px;
font-weight: 600;
margin-bottom: 3px;
}
.nextsteps p {
font-size: 13.5px;
color: var(--oc-ink-soft);
line-height: 1.55;
}
.availline {
background: var(--oc-surface);
border-bottom: 1px solid var(--oc-hairline);
text-align: center;
padding: 7px 16px;
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 11.5px;
letter-spacing: 0.02em;
color: var(--oc-muted);
}
.availline .avdot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--oc-canary);
margin-right: 8px;
vertical-align: 1px;
}
.scenario {
display: flex;
align-items: stretch;
gap: 0;
margin-top: 30px;
}
@media (max-width: 900px) {
.scenario {
flex-direction: column;
}
}
.scene {
flex: 1 1 0;
background: var(--oc-surface);
border: 1px solid var(--oc-hairline);
border-radius: 12px;
padding: 16px 18px;
min-width: 0;
}
.scene .sk {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--oc-muted);
margin-bottom: 8px;
}
.scene .ct {
font-weight: 600;
font-size: 14px;
margin: 8px 0 4px;
}
.scene p {
font-size: 13px;
color: var(--oc-ink-soft);
line-height: 1.5;
}
.launchmini {
margin-top: 18px;
border: 1px dashed var(--oc-hairline-strong);
border-radius: 12px;
padding: 20px 24px;
background: var(--oc-paper);
}
.launchmini h3 {
font-size: 15.5px;
font-weight: 600;
margin-bottom: 4px;
}
.launchmini p {
font-size: 13px;
color: var(--oc-ink-soft);
margin-bottom: 12px;
}
.launchrow {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.launchrow input {
flex: 1 1 220px;
font: inherit;
font-size: 14px;
color: var(--oc-ink);
background: var(--oc-surface);
border: 1px solid var(--oc-hairline-strong);
border-radius: 7px;
padding: 10px 13px;
}
.launchrow input:focus {
outline: none;
border-color: var(--oc-ink);
box-shadow: 0 0 0 3px var(--oc-canary-halo);
}
.launchmini .fine {
margin-top: 10px;
margin-bottom: 0;
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 10.5px;
color: var(--oc-muted);
}
.egstamp {
display: inline-block;
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--oc-muted);
border: 1px dashed var(--oc-hairline-strong);
border-radius: 5px;
padding: 2px 8px;
margin-bottom: 10px;
}
@media (max-width: 430px) {
.nav-in .btn .arr {
display: none;
}
.nav-in .btn {
padding: 8px 12px;
font-size: 12.5px;
}
.wordmark .logo-full {
display: none;
}
.wordmark .logo-mark {
display: block;
}
}
.band.launchband {
padding-top: 30px;
padding-bottom: 34px;
}
.launchband .launchmini {
margin-top: 0;
}
.launchmini h2 {
font-size: 17px;
font-weight: 600;
margin-bottom: 4px;
}
.lconsent {
max-width: 45.6em;
margin-top: 12px;
font-family: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, sans-serif;
font-size: 13px;
line-height: 1.65;
color: var(--oc-ink-soft);
}
.hp-inline {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
}
section.band.deep {
background: var(--oc-paper-deep);
border-top: 1px solid var(--oc-hairline);
border-bottom: 1px solid var(--oc-hairline);
}
section.band.alt + section.band.alt,
section.band.deep + section.band.deep {
border-top: 0;
}
.band.launchband {
background: var(--oc-paper-deep);
border-top: 1px solid var(--oc-hairline);
border-bottom: 1px solid var(--oc-hairline);
}
.launchmini {
border-style: solid;
border-color: var(--oc-hairline);
background: var(--oc-surface);
box-shadow: var(--oc-shadow-card);
}
.proof {
background: var(--oc-paper-deep);
border-top: 1px solid var(--oc-hairline);
border-bottom: 1px solid var(--oc-hairline);
}
.tickerband {
border-top: 1px solid var(--oc-hairline);
border-bottom: 1px solid var(--oc-hairline);
}
.pagehero {
border-bottom: 0;
}
.pillar,
.step,
.icard,
.scene,
.fixcard,
.fnode,
.stage,
.board,
.chat,
.studio,
.recipe {
box-shadow: var(--oc-shadow-card);
}
.recipe {
border-style: solid;
border-color: var(--oc-hairline);
background: var(--oc-surface);
}
.band h2,
.pagehero h1,
.cta h2,
.launchmini h2,
.launchmini h3 {
font-family: var(--oc-font-serif);
font-weight: 600;
letter-spacing: -0.005em;
}
.band h2 {
font-size: 30px;
line-height: 1.18;
}
.pagehero h1 {
font-weight: 600;
letter-spacing: -0.012em;
}
:root {
--hue-assure: var(--oc-chart-1);
--hue-act: var(--oc-chart-2);
--hue-studio: var(--oc-chart-3);
--hue-assist: var(--oc-chart-4);
--hue-assure-tint: #e0e7eb;
--hue-act-tint: #e7ede5;
--hue-studio-tint: #f1eae0;
--hue-assist-tint: #e3eaea;
--hue-neutral: var(--oc-ink-soft);
--hue-neutral-tint: var(--oc-paper-deep);
}
.h-assure {
--hue: var(--hue-assure);
--hue-tint: var(--hue-assure-tint);
}
.h-act {
--hue: var(--hue-act);
--hue-tint: var(--hue-act-tint);
}
.h-studio {
--hue: var(--hue-studio);
--hue-tint: var(--hue-studio-tint);
}
.h-assist {
--hue: var(--hue-assist);
--hue-tint: var(--hue-assist-tint);
}
.h-neutral {
--hue: var(--hue-neutral);
--hue-tint: var(--hue-neutral-tint);
}
.s-crit {
--hue: var(--oc-critical);
--hue-tint: var(--oc-critical-tint);
}
.s-warn {
--hue: var(--oc-warning);
--hue-tint: var(--oc-warning-tint);
}
.s-ok {
--hue: var(--oc-success);
--hue-tint: var(--oc-success-tint);
}
.s-info {
--hue: var(--oc-info);
--hue-tint: var(--oc-info-tint);
}
h1.serif,
h2.serif {
font-family: var(--oc-font-serif);
font-weight: 600;
letter-spacing: -0.005em;
}
.pagehero {
position: relative;
}
.pagehero.hero2 {
padding: 64px 0 52px;
}
.pagehero.hero2 .container {
display: grid;
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
gap: 48px;
align-items: center;
}
.pagehero.hero2 .hfig {
min-width: 0;
}
@media (max-width: 900px) {
.pagehero.hero2 .container {
grid-template-columns: minmax(0, 1fr);
}
}
.bhead {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px 32px;
align-items: end;
margin-bottom: 26px;
}
.bhead .lede {
margin-bottom: 0;
}
.bhead .bmeta {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 12px;
color: var(--oc-muted);
white-space: nowrap;
padding-bottom: 6px;
}
@media (max-width: 700px) {
.bhead {
grid-template-columns: minmax(0, 1fr);
}
}
.eyebrow.hued {
color: var(--oc-ink-soft);
}
.eyebrow .edot {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--hue, var(--oc-ink-soft));
margin-right: 8px;
vertical-align: 0;
}
.figure {
margin-top: 30px;
}
.two {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 32px;
align-items: start;
}
.two.wide-r {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.two.wide-l {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
@media (max-width: 900px) {
.two,
.two.wide-r,
.two.wide-l {
grid-template-columns: minmax(0, 1fr);
}
}
.shot {
background: var(--oc-surface);
border: 1px solid var(--oc-hairline-strong);
border-radius: 10px;
box-shadow: var(--oc-shadow-overlay);
overflow: hidden;
position: relative;
}
.shot .sbar {
display: flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 12px;
background: var(--oc-paper-deep);
border-bottom: 1px solid var(--oc-hairline);
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 11px;
color: var(--oc-muted);
}
.shot .sbar i {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--oc-hairline-strong);
display: inline-block;
}
.shot .sbar span {
margin-left: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.shot img {
display: block;
width: 100%;
height: auto;
}
.shot .stamp {
position: absolute;
right: 10px;
bottom: 12px;
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--oc-ink-soft);
background: rgba(255, 255, 255, 0.92);
border: 1px dashed var(--oc-hairline-strong);
border-radius: 5px;
padding: 2px 8px;
}
.shot.tilt {
transform: perspective(1400px) rotateY(-4deg) rotateX(1.5deg);
transform-origin: left center;
}
.shot.crop {
max-height: 420px;
}
.shot.crop img {
object-fit: cover;
object-position: top left;
height: 390px;
}
.shot.crop::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 72px;
background: linear-gradient(rgba(255, 255, 255, 0), #fff);
pointer-events: none;
}
.figcap {
font-size: 13px;
color: var(--oc-muted);
margin-top: 10px;
}
.figcap b {
color: var(--oc-ink-soft);
font-weight: 500;
}
.illus {
background: var(--oc-surface);
border: 1px solid var(--oc-hairline);
border-radius: 12px;
box-shadow: var(--oc-shadow-card);
padding: 18px;
}
.illus svg {
display: block;
width: 100%;
height: auto;
}
.illus.on-paper {
background: var(--oc-paper);
}
.illus .il-stroke {
fill: none;
stroke: var(--oc-ink);
stroke-width: 1.4;
}
.illus .il-soft {
fill: none;
stroke: var(--oc-hairline-strong);
stroke-width: 1.2;
}
.illus .il-fill {
fill: var(--oc-paper-deep);
}
.illus .il-hue {
fill: var(--hue, var(--oc-ink-soft));
}
.illus .il-hue-tint {
fill: var(--hue-tint, var(--oc-paper-deep));
}
.illus .il-hue-stroke {
fill: none;
stroke: var(--hue, var(--oc-ink-soft));
stroke-width: 1.6;
}
.illus .il-canary {
fill: var(--oc-canary);
}
.illus .il-ok {
fill: var(--oc-success);
}
.illus .il-warn {
fill: var(--oc-warning);
}
.illus .il-crit {
fill: var(--oc-critical);
}
.illus .il-info {
fill: var(--oc-info);
}
.illus .il-ok-tint {
fill: var(--oc-success-tint);
}
.illus .il-warn-tint {
fill: var(--oc-warning-tint);
}
.illus .il-crit-tint {
fill: var(--oc-critical-tint);
}
.illus .il-info-tint {
fill: var(--oc-info-tint);
}
.illus .il-mono {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 10px;
fill: var(--oc-muted);
}
.illus .il-label {
font-family: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, sans-serif;
font-size: 11.5px;
font-weight: 500;
fill: var(--oc-ink);
}
.illus .il-dash {
stroke-dasharray: 4 4;
}
.tbl {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--oc-surface);
border: 1px solid var(--oc-hairline);
border-radius: 10px;
overflow: hidden;
box-shadow: var(--oc-shadow-card);
font-size: 14.5px;
}
.tbl th {
text-align: left;
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--oc-ink-soft);
background: var(--oc-paper-deep);
padding: 11px 16px;
border-bottom: 1px solid var(--oc-hairline);
}
.tbl td {
padding: 13px 16px;
border-bottom: 1px solid var(--oc-hairline);
vertical-align: top;
color: var(--oc-ink-soft);
}
.tbl tr:last-child td {
border-bottom: 0;
}
.tbl td:first-child {
color: var(--oc-ink);
font-weight: 500;
}
.tbl td.mono,
.tbl th.mono {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
}
.tbl td.num {
text-align: right;
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
white-space: nowrap;
}
.tbl tr.edge td:first-child {
box-shadow: inset 3px 0 0 var(--hue, var(--oc-ink-soft));
}
.tbl tr.grp td {
background: var(--oc-paper);
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 11.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--oc-ink-soft);
padding: 8px 16px;
}
.tbl .yes,
.tbl .no {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 500;
}
.tbl .yes {
color: var(--oc-success);
}
.tbl .no {
color: var(--oc-critical);
}
.tbl .yes svg,
.tbl .no svg {
width: 15px;
height: 15px;
stroke: currentColor;
stroke-width: 2;
fill: none;
}
.tblwrap {
overflow-x: auto;
}
.strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
background: var(--oc-surface);
border: 1px solid var(--oc-hairline);
border-radius: 10px;
box-shadow: var(--oc-shadow-card);
overflow: hidden;
}
.strip.three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.strip.five {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.strip > div {
padding: 18px 22px 16px;
border-left: 1px solid var(--oc-hairline);
min-width: 0;
}
.strip > div:first-child {
border-left: 0;
}
.strip .k {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--oc-muted);
margin-bottom: 8px;
}
.strip .v {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 30px;
font-weight: 500;
line-height: 1;
color: var(--oc-ink);
letter-spacing: -0.02em;
}
.strip .v small {
font-size: 13px;
font-weight: 400;
color: var(--oc-ink-soft);
margin-left: 6px;
letter-spacing: 0;
}
.strip .src {
font-size: 12px;
color: var(--oc-muted);
margin-top: 8px;
}
.strip .bar {
height: 6px;
border-radius: 3px;
background: var(--oc-hairline);
margin-top: 12px;
overflow: hidden;
}
.strip .bar i {
display: block;
height: 100%;
background: var(--hue, var(--oc-ink-soft));
}
.strip.tinted > div {
background: var(--hue-tint, transparent);
}
@media (max-width: 900px) {
.strip,
.strip.five {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.strip > div:nth-child(odd) {
border-left: 0;
}
.strip > div:nth-child(n + 3) {
border-top: 1px solid var(--oc-hairline);
}
}
@media (max-width: 560px) {
.strip,
.strip.three,
.strip.five {
grid-template-columns: minmax(0, 1fr);
}
.strip > div {
border-left: 0;
border-top: 1px solid var(--oc-hairline);
}
.strip > div:first-child {
border-top: 0;
}
}
.srcline {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 11.5px;
color: var(--oc-muted);
margin-top: 10px;
}
.card2 {
background: var(--oc-surface);
border: 1px solid var(--oc-hairline);
border-radius: 10px;
box-shadow: var(--oc-shadow-card);
padding: 20px 22px 18px;
position: relative;
}
.card2.edge {
border-left: 3px solid var(--hue, var(--oc-ink-soft));
}
.card2.tint {
background: var(--hue-tint, var(--oc-paper-deep));
border-color: transparent;
}
.card2 > h3,
.card2 > .chead h3 {
font-size: 16px;
font-weight: 600;
margin: 0 0 6px;
}
.card2 > h3.serif {
font-family: var(--oc-font-serif);
font-size: 18px;
}
.card2 > p {
font-size: 14.5px;
color: var(--oc-ink-soft);
margin: 0;
}
.card2 .chead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.card2 .cband {
margin: -20px -22px 14px;
padding: 10px 22px;
background: var(--oc-paper-deep);
border-bottom: 1px solid var(--oc-hairline);
border-radius: 10px 10px 0 0;
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 600;
}
.card2.edge .cband {
border-radius: 0 10px 0 0;
}
.card2 .cband .meta {
margin-left: auto;
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 11.5px;
color: var(--oc-muted);
font-weight: 400;
}
.card2 .cband svg.ic {
width: 18px;
height: 18px;
color: var(--hue, var(--oc-ink-soft));
}
.grid2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.grid3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.grid4 {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
@media (max-width: 900px) {
.grid3,
.grid4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.grid2,
.grid3,
.grid4 {
grid-template-columns: minmax(0, 1fr);
}
}
.disc {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--hue-tint, var(--oc-paper-deep));
color: var(--hue, var(--oc-ink-soft));
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.disc svg {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 1.6;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.disc.sm {
width: 40px;
height: 40px;
}
.disc.sm svg {
width: 18px;
height: 18px;
}
.disc.num {
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 18px;
font-weight: 500;
}
.tico,
.pict {
background: var(--hue-tint, var(--oc-paper-deep));
border-color: transparent;
color: var(--hue, var(--oc-ink));
}
.tico svg,
.pict svg {
stroke: currentColor;
}
.pillar {
border-top: 3px solid var(--hue, var(--oc-hairline-strong));
}
.pillar h3 .ic {
color: var(--hue, var(--oc-ink));
}
.callout {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 14px;
align-items: start;
background: var(--hue-tint, var(--oc-info-tint));
border-radius: 10px;
padding: 16px 18px;
border-left: 3px solid var(--hue, var(--oc-info));
}
.callout .disc.sm {
background: var(--oc-surface);
}
.callout h3 {
font-size: 15.5px;
font-weight: 600;
margin: 0 0 4px;
}
.callout p {
font-size: 14.5px;
color: var(--oc-ink-soft);
margin: 0;
}
.stepper {
display: grid;
gap: 0;
}
.stepper > div {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
gap: 16px;
padding: 16px 0 18px;
border-bottom: 1px solid var(--oc-hairline);
position: relative;
}
.stepper > div:last-child {
border-bottom: 0;
}
.stepper > div::before {
content: "";
position: absolute;
left: 19px;
top: 56px;
bottom: -2px;
width: 2px;
background: var(--oc-hairline);
}
.stepper > div:last-child::before {
display: none;
}
.stepper h3 {
font-size: 16px;
font-weight: 600;
margin: 8px 0 4px;
}
.stepper p {
font-size: 14.5px;
color: var(--oc-ink-soft);
margin: 0;
}
.stepper.horiz {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.stepper.horiz > div {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
border-bottom: 0;
background: var(--oc-surface);
border: 1px solid var(--oc-hairline);
border-radius: 10px;
padding: 18px 20px 16px;
box-shadow: var(--oc-shadow-card);
}
.stepper.horiz > div::before {
display: none;
}
@media (max-width: 800px) {
.stepper.horiz {
grid-template-columns: minmax(0, 1fr);
}
}
.step .shead {
justify-content: flex-start;
gap: 10px;
}
.step .shead svg.big {
margin-left: auto;
}
.cols3.cards {
gap: 18px;
}
.cols3.cards > div {
background: var(--oc-surface);
border: 1px solid var(--oc-hairline);
border-radius: 10px;
padding: 20px 22px 18px;
box-shadow: var(--oc-shadow-card);
}
.cols3.cards > div + div {
border-left: 1px solid var(--oc-hairline);
}
.cols3.cards > div:first-child {
padding-left: 22px;
}
.cols3.tinted > div {
background: var(--hue-tint, var(--oc-paper-deep));
border-color: transparent;
}
.cols3.tinted .tico {
background: var(--oc-surface);
}
.faqgroup {
margin-top: 30px;
}
.faqgroup .fghead {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.faqgroup .fghead h3 {
font-family: var(--oc-font-serif);
font-weight: 600;
font-size: 20px;
margin: 0;
}
.faqgroup .fghead .fgn {
margin-left: auto;
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 11.5px;
color: var(--oc-muted);
}
.faq.card2 {
padding: 0 22px;
margin-top: 0;
}
.chip.soft {
color: var(--oc-ink-soft);
background: var(--hue-tint, var(--oc-paper-deep));
}
.chip.ok.soft {
color: var(--oc-success);
background: var(--oc-success-tint);
}
.chip.crit.soft {
color: var(--oc-critical);
background: var(--oc-critical-tint);
}
.chip.warn.soft {
color: var(--oc-warning);
background: var(--oc-warning-tint);
}
.chip.info.soft {
color: var(--oc-info);
background: var(--oc-info-tint);
}
.chip.ent {
color: var(--oc-ink-soft);
background: var(--oc-paper-deep);
font-weight: 500;
letter-spacing: 0.04em;
}
.catalog.cards2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
border: 0;
}
.catalog.cards2 .entry {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: 16px;
padding: 18px 20px 16px;
background: var(--oc-surface);
border: 1px solid var(--oc-hairline);
border-radius: 10px;
box-shadow: var(--oc-shadow-card);
}
.catalog.cards2 .entry:hover {
background: var(--oc-surface);
border-color: var(--oc-hairline-strong);
}
.catalog.cards2 .entry::after {
top: 24px;
margin-top: 0;
}
.catalog.cards2 .pict {
width: 56px;
height: 56px;
border-radius: 50%;
}
.catalog.cards2 .entry .erow {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 8px 0 2px;
}
@media (max-width: 800px) {
.catalog.cards2 {
grid-template-columns: minmax(0, 1fr);
}
}
.toc {
position: sticky;
top: 84px;
align-self: start;
background: var(--oc-surface);
border: 1px solid var(--oc-hairline);
border-radius: 10px;
padding: 14px 16px;
box-shadow: var(--oc-shadow-card);
font-size: 13.5px;
}
.toc b {
display: block;
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--oc-muted);
font-weight: 500;
margin-bottom: 8px;
}
.toc ol {
margin: 0;
padding-left: 18px;
color: var(--oc-ink-soft);
}
.toc li {
margin: 4px 0;
}
.toc a {
text-decoration: none;
}
.toc a:hover {
text-decoration: underline;
}
footer.foot2 {
background: var(--oc-paper-deep);
border-top: 1px solid var(--oc-hairline);
}
.foot2 .fgrid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
gap: 28px;
padding: 44px 0 30px;
}
.foot2 .fcol b {
display: block;
font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--oc-muted);
font-weight: 500;
margin-bottom: 12px;
}
.foot2 .fcol a {
display: block;
font-size: 13.5px;
color: var(--oc-ink-soft);
text-decoration: none;
padding: 3px 0;
}
.foot2 .fcol a:hover {
color: var(--oc-ink);
text-decoration: underline;
}
.foot2 .fbrand p {
font-size: 13.5px;
color: var(--oc-ink-soft);
max-width: 20.4em;
margin: 10px 0 0;
}
.foot2 .fbot {
display: flex;
gap: 18px;
flex-wrap: wrap;
align-items: center;
padding: 16px 0 22px;
border-top: 1px solid var(--oc-hairline);
font-size: 12.5px;
color: var(--oc-muted);
}
.foot2 .fbot .foot-spacer {
flex: 1;
}
@media (max-width: 900px) {
.foot2 .fgrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.foot2 .fbrand {
grid-column: 1 / -1;
}
}
.flowlist {
display: none;
gap: 8px;
margin: 6px 0 30px;
}
@media (max-width: 860px) {
.flow.desk-only {
display: none;
}
.flowlist {
display: grid;
}
}
.flowlist > div {
background: var(--oc-surface);
border: 1px solid var(--oc-hairline);
border-radius: 8px;
padding: 10px 14px;
font-size: 14px;
box-shadow: var(--oc-shadow-card);
}
.hero .icard {
box-shadow: var(--oc-shadow-overlay);
}
.icard.s-crit,
.icard.s-warn,
.hero .icard.h-act,
.hero .icard.h-assist {
border-left: 3px solid var(--hue);
}
.scene.s-crit,
.scene.h-act,
.scene.h-studio {
border-top: 3px solid var(--hue);
}
.recipe {
position: relative;
padding-top: 15px;
}
.recipe .rtag {
display: inline-block;
margin-bottom: 8px;
}
.recipe .disc.sm {
float: right;
margin: -4px -4px 6px 10px;
}