/* ============================================================
EMBEDPORTAL — editorial, technical, blueprint aesthetic
Palette: ink #0B0A08 · paper #F5EFE4 · signal #FF5B1F · teal #3DCFB6
Fonts: Fraunces (display) · Instrument Sans (body) · JetBrains Mono (accents)
============================================================ */
:root {
--ink: #0b0a08;
--ink-2: #141210;
--ink-3: #1d1a16;
--line: #2a2521;
--line-strong: #3a342e;
--paper: #f5efe4;
--paper-2: #ece4d3;
--paper-line: #d6cdb9;
--cream: #fdfaf3;
--signal: #ff5b1f;
--signal-2: #ff7a3e;
--teal: #3dcfb6;
--amber: #f1b500;
--muted: #a09a90;
--muted-dark: #6b6760;
--radius: 2px;
--container: 1260px;
--f-display: "Fraunces", ui-serif, Georgia, serif;
--f-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
--f-mono: "JetBrains Mono", ui-monospace, monospace;
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* ----------------------------- reset -------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--ink);
color: var(--cream);
font-family: var(--f-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4 {
margin: 0;
font-weight: 400;
letter-spacing: -0.01em;
}
p {
margin: 0;
}
button {
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
em {
font-style: italic;
}
::selection {
background: var(--signal);
color: var(--ink);
}
/* subtle film grain overlay */
.grain {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1000;
opacity: 0.06;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 36px;
}
@media (max-width: 780px) {
.container {
padding: 0 22px;
}
}
/* reveal animation */
[data-reveal] {
opacity: 0;
transform: translateY(18px);
transition:
opacity 0.75s var(--ease),
transform 0.75s var(--ease);
will-change: opacity, transform;
}
[data-reveal].is-in {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
[data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
* {
animation: none !important;
transition-duration: 0s !important;
}
}
/* ============================================================
Animations & motion utilities
============================================================ */
/* Portal hero tilt — driven by JS mousemove */
.portal__frame {
transform: perspective(1200px) rotateX(var(--tiltX, 0deg))
rotateY(var(--tiltY, 0deg)) translate3d(var(--tX, 0), var(--tY, 0), 0);
transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
transform-style: preserve-3d;
}
/* Gentle floating on portal dash cards (baseline, JS-independent) */
@keyframes floatA {
0%,
100% {
transform: translate3d(0, 0, 0) rotate(var(--r, 0deg));
}
50% {
transform: translate3d(0, -5px, 0) rotate(var(--r, 0deg));
}
}
@keyframes floatB {
0%,
100% {
transform: translate3d(0, 0, 0) rotate(var(--r, 0deg));
}
50% {
transform: translate3d(0, -8px, 0) rotate(var(--r, 0deg));
}
}
/* Marquee-style trust strip (only if overflowing) */
.trust__list {
position: relative;
}
/* Shimmer sweep on primary CTA */
.btn--primary {
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn--primary::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
110deg,
transparent 0%,
transparent 40%,
rgba(255, 255, 255, 0.35) 50%,
transparent 60%,
transparent 100%
);
transform: translateX(-120%);
transition: transform 0.7s cubic-bezier(0.3, 0.7, 0.3, 1);
pointer-events: none;
z-index: -1;
}
.btn--primary:hover::after {
transform: translateX(120%);
}
/* Feature / use-case / plan cursor glow.
.plan keeps overflow:visible so the POPULAR badge can float
above the card's top edge. */
.feat,
.usecard {
position: relative;
isolation: isolate;
overflow: hidden;
}
.plan {
position: relative;
isolation: isolate;
}
.feat::before,
.usecard::before,
.plan::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
260px circle at var(--mx, -200px) var(--my, -200px),
rgba(255, 91, 31, 0.1),
transparent 60%
);
opacity: 0;
transition: opacity 0.35s var(--ease);
pointer-events: none;
z-index: -1;
}
.feat:hover::before,
.usecard:hover::before,
.plan:hover::before {
opacity: 1;
}
/* Plan card slight lift on hover */
.plan {
transition:
transform 0.3s var(--ease),
border-color 0.3s var(--ease);
}
.plan:hover {
transform: translateY(-3px);
border-color: var(--line-strong);
}
.plan--featured {
transition: transform 0.3s var(--ease);
}
.plan--featured:hover {
transform: translateY(-5px);
}
/* Chip hover */
.chips li,
.feat__mini-org span {
transition:
background 0.2s var(--ease),
color 0.2s var(--ease),
border-color 0.2s var(--ease);
}
.chips li:hover {
background: rgba(255, 91, 31, 0.08);
color: var(--cream);
border-color: var(--line-strong);
}
/* FAQ summary hover */
.faq__list summary {
transition:
color 0.2s var(--ease),
padding-left 0.25s var(--ease);
padding-left: 0;
}
.faq__list summary:hover {
padding-left: 6px;
}
/* Nav link underline grow (already present, add easing) */
.nav__links a::after {
transition: width 0.25s cubic-bezier(0.4, 0.2, 0.2, 1);
}
/* Brand logo micro wobble on hover */
.brand:hover .brand__mark img,
.brand:hover .brand__mark svg {
animation: logoPop 0.5s cubic-bezier(0.3, 1.6, 0.6, 1);
}
@keyframes logoPop {
0% {
transform: rotate(0) scale(1);
}
40% {
transform: rotate(-8deg) scale(1.08);
}
70% {
transform: rotate(4deg) scale(1.04);
}
100% {
transform: rotate(0) scale(1);
}
}
/* Swatch popping on click */
.swatch.is-active {
animation: swatchPop 0.4s var(--ease);
}
@keyframes swatchPop {
0% {
transform: scale(1);
}
50% {
transform: scale(0.96);
}
100% {
transform: translateY(-2px) scale(1);
}
}
/* Compare table row hover */
.compare__table tbody tr {
transition: background-color 0.2s var(--ease);
}
.compare__table tbody tr:hover th,
.compare__table tbody tr:hover td {
background: rgba(255, 91, 31, 0.04) !important;
}
/* Arrow in link-arrow animates on page reveal too */
.link-arrow::after {
content: "";
}
/* Ticker-like scrolling ribbon for "chapter labels" — subtle breathe */
.chapter-label span:first-child {
animation: breathe 3.6s ease-in-out infinite;
}
@keyframes breathe {
0%,
100% {
opacity: 0.6;
}
50% {
opacity: 1;
}
}
/* Eyebrow tick rotates slowly */
.eyebrow__tick {
display: inline-block;
animation: spin 14s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
/* Dashcard head tag glows softly on view */
.tag {
animation: tagGlow 4s ease-in-out infinite;
}
@keyframes tagGlow {
0%,
100% {
filter: brightness(1);
}
50% {
filter: brightness(1.15);
}
}
/* Hide mouse-move effects on touch devices */
@media (hover: none) {
.feat::before,
.usecard::before,
.plan::before {
display: none;
}
.portal__frame {
transform: none !important;
}
}
/* ============================================================
Extra motion — drifting orbs, pulsing ticks, stagger reveals
============================================================ */
/* Floating gradient orbs behind the hero */
.hero::after {
content: "";
position: absolute;
inset: -10%;
pointer-events: none;
background:
radial-gradient(
420px 320px at 78% 14%,
rgba(255, 91, 31, 0.16),
transparent 60%
),
radial-gradient(
360px 280px at 22% 70%,
rgba(61, 207, 182, 0.1),
transparent 62%
),
radial-gradient(
300px 240px at 60% 92%,
rgba(255, 91, 31, 0.09),
transparent 60%
);
animation: orbDrift 22s ease-in-out infinite alternate;
z-index: 0;
filter: blur(2px);
}
@keyframes orbDrift {
0% {
transform: translate3d(0, 0, 0) scale(1);
}
50% {
transform: translate3d(-24px, 18px, 0) scale(1.05);
}
100% {
transform: translate3d(22px, -16px, 0) scale(1.02);
}
}
@media (prefers-reduced-motion: reduce) {
.hero::after {
animation: none;
}
}
/* Pulsing corner ticks around the portal window */
.tick {
animation: tickPulse 3.2s var(--ease) infinite;
}
.tick--tr {
animation-delay: 0.4s;
}
.tick--bl {
animation-delay: 0.8s;
}
.tick--br {
animation-delay: 1.2s;
}
@keyframes tickPulse {
0%,
100% {
opacity: 0.6;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.12);
}
}
/* Hero headline — stagger in display words */
.display {
opacity: 0;
animation: headlineIn 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s forwards;
}
.display__italic,
.display__accent {
display: inline-block;
transform: translateY(0.35em);
opacity: 0;
animation: wordUp 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.display__italic {
animation-delay: 0.55s;
}
.display__accent {
animation-delay: 0.8s;
}
@keyframes headlineIn {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes wordUp {
from {
opacity: 0;
transform: translateY(0.35em);
}
to {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.display,
.display__italic,
.display__accent {
animation: none;
opacity: 1;
transform: none;
}
}
/* Display accent underline sweep — animates in once parent is revealed */
.display__accent::after {
transform: skew(-12deg) scaleX(0);
transform-origin: left center;
animation: accentSweep 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 1.15s forwards;
}
@keyframes accentSweep {
to {
transform: skew(-12deg) scaleX(1);
}
}
/* Kicker line grows from 0 */
.kicker::before {
transform-origin: left;
animation: kickerGrow 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}
@keyframes kickerGrow {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
/* Feature numbers drift subtly */
.feat__num {
display: inline-block;
animation: numFloat 5s ease-in-out infinite;
}
.feat:nth-child(2n) .feat__num {
animation-delay: 0.6s;
}
.feat:nth-child(3n) .feat__num {
animation-delay: 1.2s;
}
@keyframes numFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
/* Step circle shimmer */
.step__num {
position: relative;
overflow: hidden;
}
.step__num::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(
from 0deg,
transparent 0deg,
rgba(255, 91, 31, 0.25) 60deg,
transparent 120deg
);
animation: stepSpin 4.2s linear infinite;
pointer-events: none;
}
@keyframes stepSpin {
to {
transform: rotate(360deg);
}
}
/* Hero CTA buttons slide up on load */
.hero__ctas .btn {
opacity: 0;
animation: ctaIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 1s forwards;
}
.hero__ctas .btn:nth-child(2) {
animation-delay: 1.15s;
}
@keyframes ctaIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.hero__ctas .btn {
animation: none;
opacity: 1;
transform: none;
}
}
/* Chapter label subtle slide-in */
.chapter-label {
opacity: 0;
transform: translateX(-10px) rotate(180deg);
animation: chapterIn 1s ease 0.5s forwards;
}
@keyframes chapterIn {
to {
opacity: 1;
transform: rotate(180deg) translateY(0);
}
}
/* Eyebrow badge pops in first */
.eyebrow {
animation: badgeIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes badgeIn {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: none;
}
}
/* Dashcard tilt-in on first view */
.dashcard--1 {
animation:
cardIn1 1.1s cubic-bezier(0.22, 0.9, 0.3, 1) 0.6s both,
cardHover 6s var(--ease) infinite alternate 0.7s;
}
.dashcard--2 {
animation:
cardIn2 1.1s cubic-bezier(0.22, 0.9, 0.3, 1) 0.4s both,
cardHover 7s var(--ease) infinite alternate-reverse 0.7s;
}
.dashcard--3 {
animation:
cardIn3 1.1s cubic-bezier(0.22, 0.9, 0.3, 1) 0.2s both,
cardHover 8s var(--ease) infinite alternate 0.7s;
}
@keyframes cardIn1 {
from {
opacity: 0;
transform: translateY(24px) rotate(0deg);
}
to {
opacity: 1;
transform: translateY(0) rotate(0deg);
}
}
@keyframes cardIn2 {
from {
opacity: 0;
transform: translateY(24px) rotate(3deg);
}
to {
opacity: 0.98;
transform: translateY(0) rotate(-1.2deg);
}
}
@keyframes cardIn3 {
from {
opacity: 0;
transform: translateY(24px) rotate(5deg);
}
to {
opacity: 0.92;
transform: translateY(0) rotate(-2deg);
}
}
/* Section chevron underline for h-display — drawn line under major headings */
.h-display {
position: relative;
}
/* Signal-colored line below section-head on reveal */
.section-head {
position: relative;
}
.section-head.is-in::after {
animation: headLine 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s forwards;
}
.section-head::after {
content: "";
position: absolute;
left: 0;
bottom: -28px;
width: 60px;
height: 1px;
background: var(--signal);
transform: scaleX(0);
transform-origin: left;
}
@keyframes headLine {
to {
transform: scaleX(1);
}
}
/* Hero stats — solid cream, no shine (kept clean) */
/* Swatches pulse gently until first interaction */
.wl__swatches:not(:focus-within) .swatch:nth-child(1) {
box-shadow: 0 0 0 0 rgba(11, 10, 8, 0.3);
animation: swatchHint 3s ease-in-out 1.5s 2;
}
@keyframes swatchHint {
0%,
100% {
box-shadow: 0 0 0 0 rgba(11, 10, 8, 0.25);
}
50% {
box-shadow: 0 0 0 6px rgba(11, 10, 8, 0);
}
}
/* Ticker-style scrolling background grid shift on hero */
.hero {
background-position: 0 0;
animation: gridDrift 60s linear infinite;
}
@keyframes gridDrift {
from {
background-position: 0 0;
}
to {
background-position: 64px 64px;
}
}
@media (prefers-reduced-motion: reduce) {
.hero {
animation: none;
}
}
/* Security code panel caret blink on foot */
.codepanel__foot span::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
margin-right: 2px;
animation: blink 1.2s steps(2) infinite;
}
.codepanel__foot span:nth-child(2)::before {
animation-delay: 0.3s;
}
.codepanel__foot span:nth-child(3)::before {
animation-delay: 0.6s;
}
@keyframes blink {
50% {
opacity: 0.25;
}
}
.codepanel__foot span {
color: var(--teal);
}
.codepanel__foot span:nth-child(1)::before {
background: var(--signal);
}
.codepanel__foot span:nth-child(3)::before {
background: var(--amber);
}
/* Security section grid ripple */
.security::before {
animation: gridDrift 80s linear infinite reverse;
}
/* Link arrow tail pulses right */
.link-arrow {
position: relative;
}
.link-arrow::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: currentColor;
transform: scaleX(1);
transform-origin: left;
transition: transform 0.35s var(--ease);
}
.link-arrow:hover {
border-bottom-color: transparent;
}
.link-arrow:hover::after {
animation: arrowLine 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes arrowLine {
0% {
transform: scaleX(1);
transform-origin: right;
}
45% {
transform: scaleX(0);
transform-origin: right;
}
55% {
transform: scaleX(0);
transform-origin: left;
}
100% {
transform: scaleX(1);
transform-origin: left;
}
}
/* ----------------------------- type utilities --------------------------- */
.mono {
font-family: var(--f-mono);
font-feature-settings: "ss01";
letter-spacing: 0.01em;
}
.kicker {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--signal);
margin: 0 0 22px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.kicker::before {
content: "";
display: inline-block;
width: 24px;
height: 1px;
background: var(--signal);
}
.kicker--light {
color: var(--signal-2);
}
.display,
.h-display {
font-family: var(--f-display);
font-variation-settings:
"opsz" 144,
"SOFT" 20;
font-weight: 440;
font-size: clamp(44px, 7.2vw, 104px);
line-height: 0.96;
letter-spacing: -0.025em;
}
.h-display {
font-size: clamp(38px, 5.4vw, 76px);
line-height: 1.02;
}
.display__italic {
font-style: italic;
font-variation-settings:
"opsz" 144,
"SOFT" 50;
color: var(--signal);
}
.display__accent {
font-style: italic;
font-variation-settings:
"opsz" 144,
"SOFT" 80;
color: var(--signal);
position: relative;
}
.display__accent::after {
content: "";
position: absolute;
left: 2%;
bottom: 6%;
width: 96%;
height: 5px;
background: var(--signal);
opacity: 0.25;
transform: skew(-12deg);
}
.lede {
font-family: var(--f-display);
font-variation-settings: "opsz" 36;
font-weight: 380;
font-size: clamp(17px, 1.35vw, 21px);
line-height: 1.55;
color: #e7e1d4;
max-width: 46ch;
}
.lede em {
color: var(--signal-2);
font-style: italic;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #cfc8b8;
border: 1px solid var(--line);
padding: 7px 12px;
border-radius: 999px;
}
.eyebrow__tick {
color: var(--signal);
font-size: 9px;
}
/* ----------------------------- buttons --------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 11px 18px;
border-radius: var(--radius);
font-family: var(--f-mono);
font-size: 12.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
border: 1px solid transparent;
transition:
transform 0.2s var(--ease),
background 0.2s var(--ease),
color 0.2s var(--ease),
border-color 0.2s var(--ease);
white-space: nowrap;
}
.btn:hover {
transform: translateY(-1px);
}
.btn--primary {
background: var(--signal);
color: var(--ink);
border-color: var(--signal);
font-weight: 600;
}
.btn--primary:hover {
background: var(--signal-2);
border-color: var(--signal-2);
}
.btn--ghost {
border-color: var(--line-strong);
color: var(--cream);
background: transparent;
}
.btn--ghost:hover {
border-color: var(--cream);
background: rgba(255, 255, 255, 0.04);
}
.btn--lg {
padding: 15px 24px;
font-size: 13px;
}
.btn--full {
width: 100%;
justify-content: center;
}
.play {
color: var(--signal);
font-size: 10px;
}
.link-quiet {
font-family: var(--f-mono);
font-size: 12.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #cfc8b8;
padding: 6px 4px;
}
.link-quiet:hover {
color: var(--signal);
}
.link-arrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--f-mono);
font-size: 12.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--signal);
border-bottom: 1px solid currentColor;
padding-bottom: 4px;
transition: gap 0.2s var(--ease);
}
.link-arrow:hover {
gap: 14px;
}
/* ----------------------------- nav --------------------------- */
.nav {
position: sticky;
top: 0;
z-index: 80;
backdrop-filter: blur(14px) saturate(1.2);
background: rgba(11, 10, 8, 0.72);
border-bottom: 1px solid var(--line);
}
.nav__inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 28px;
padding-top: 18px;
padding-bottom: 18px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--cream);
min-width: 0;
}
.brand__mark {
flex: 0 0 44px;
width: 44px;
height: 44px;
display: inline-grid;
place-items: center;
line-height: 0;
}
.brand__mark svg,
.brand__mark img {
width: 44px;
height: 44px;
display: block;
max-width: none;
flex-shrink: 0;
}
.brand__wordwrap {
display: inline-flex;
flex-direction: column;
line-height: 1;
gap: 5px;
}
.brand__word {
display: inline-flex;
align-items: baseline;
font-size: 26px;
line-height: 1;
color: var(--cream);
}
.brand__word-a {
font-family: "Bricolage Grotesque", var(--f-body), sans-serif;
font-weight: 700;
letter-spacing: -0.045em;
font-feature-settings: "ss01";
}
.brand__word-b {
font-family: "Fraunces", ui-serif, Georgia, serif;
font-style: italic;
font-weight: 500;
font-variation-settings: "opsz" 144, "SOFT" 60;
font-size: 1.06em;
letter-spacing: -0.015em;
margin-left: 0.04em;
position: relative;
top: 0.035em;
color: var(--signal);
}
.brand:hover .brand__word-b {
color: var(--signal-2);
}
.brand__word-b,
.brand__word-a {
transition: color .25s var(--ease);
}
.brand__sub {
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: 0.14em;
color: var(--muted);
text-transform: uppercase;
}
.brand__sub em {
color: var(--signal);
font-style: italic;
}
/* footer variant: no sub-label, same clean mark */
.brand--foot .brand__word {
font-size: 22px;
}
.nav__links {
display: flex;
gap: 28px;
justify-content: center;
}
.nav__links a {
font-size: 14px;
color: #dcd6c9;
position: relative;
padding: 6px 0;
}
.nav__links a:hover {
color: var(--signal);
}
.nav__links a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1px;
background: var(--signal);
transition: width 0.2s var(--ease);
}
.nav__links a:hover::after {
width: 100%;
}
.nav__cta {
display: flex;
align-items: center;
gap: 14px;
}
@media (max-width: 960px) {
.nav__links {
display: none;
}
.brand__sub {
display: none;
}
}
@media (max-width: 640px) {
.nav__cta .link-quiet {
display: none;
}
.nav__inner {
gap: 12px;
padding-top: 14px;
padding-bottom: 14px;
}
.brand {
gap: 8px;
}
.brand__word {
font-size: 19px;
letter-spacing: -0.03em;
}
.brand__mark,
.brand__mark svg,
.brand__mark img {
width: 36px;
height: 36px;
flex: 0 0 36px;
}
.btn {
padding: 9px 14px;
font-size: 11.5px;
letter-spacing: 0.06em;
}
.btn--lg {
padding: 13px 18px;
font-size: 12px;
}
}
@media (max-width: 420px) {
.container {
padding: 0 16px;
}
.brand__word {
font-size: 17px;
}
}
/* ============================================================
MOBILE — section padding, spacing, readability
============================================================ */
@media (max-width: 780px) {
/* reduce heavy section padding on mobile */
.hero {
padding: 36px 0 64px;
}
.spread,
.features,
.security,
.how,
.wl,
.use,
.pricing,
.faq {
padding: 64px 0;
}
.cta {
padding: 80px 0;
}
.foot {
padding-top: 48px;
}
/* section headers */
.section-head {
margin-bottom: 40px;
}
/* hero tightening */
.hero__grid {
gap: 36px;
margin-top: 12px;
}
.hero__copy > * + * {
margin-top: 20px;
}
.hero__stats {
margin-top: 36px;
}
.hero__stats > div {
padding: 14px 10px 0 0;
}
.hero__stats dd {
font-size: 22px;
}
/* portal window — let it breathe but not overwhelm */
.portal {
padding: 10px;
}
.portal__body {
min-height: 340px;
padding: 20px;
}
.portal__chrome {
padding: 10px 12px;
gap: 10px;
}
.portal__addr {
font-size: 10px;
padding: 4px 10px;
}
.portal__tools {
display: none;
}
.dashcard--3 {
display: none;
}
.dashcard--2 {
top: 20px;
width: 60%;
}
.dashcard--1 {
right: 12px;
bottom: 12px;
width: 88%;
}
.kpi__value {
font-size: 18px;
}
.anno {
font-size: 8.5px;
}
.anno span {
padding: 1px 4px;
}
/* trust strip */
.trust__inner {
padding-top: 26px;
padding-bottom: 26px;
}
.trust__list {
gap: 18px 28px;
}
.trust__list li {
font-size: 16px;
}
.trust__list img {
width: 18px;
height: 18px;
}
/* spec sheet */
.specsheet__rows > div {
grid-template-columns: 110px 1fr;
padding: 12px 14px;
gap: 12px;
}
.specsheet__rows dt {
font-size: 10px;
}
.specsheet__rows dd {
font-size: 14px;
}
/* feature grid becomes single column */
.feat {
padding: 28px 22px 32px;
}
.feat__num {
margin-bottom: 24px;
}
.feat__title {
font-size: 22px;
}
/* security code panel — scroll */
.codepanel .code {
font-size: 11.5px;
padding: 12px 14px;
}
.codepanel__head,
.codepanel__foot {
padding: 8px 12px;
font-size: 10px;
flex-wrap: wrap;
gap: 8px;
}
/* how-it-works step circles */
.step {
padding: 28px 22px;
gap: 18px;
}
.step__num {
flex: 0 0 56px;
height: 56px;
}
.step__num span {
font-size: 22px;
}
.step__body h3 {
font-size: 20px;
}
/* white-label demo */
.wl__browser {
transform: none;
}
.wl__stage {
min-height: 0;
}
.wl__side {
gap: 10px;
padding: 12px 10px;
}
.wl__main {
padding: 18px 16px;
}
.wl__mainhead h4 {
font-size: 18px;
}
.wl__kpis {
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.wl__kpis > div {
padding: 8px 10px;
}
.wl__kpis strong {
font-size: 16px;
}
.wl__kpis span {
font-size: 9px;
}
.swatch > span {
width: 36px;
}
/* use cases */
.usecard {
padding: 28px 22px 26px;
}
.usecard h3 {
font-size: 22px;
}
/* pricing cards */
.plan {
padding: 28px 22px;
}
.plan header h3 {
font-size: 26px;
}
.plan__num {
font-size: 52px;
}
/* FAQ */
.faq__list summary {
font-size: 18px;
}
/* CTA */
.cta__title {
font-size: clamp(32px, 9vw, 52px);
}
.cta__ctas {
flex-direction: column;
width: 100%;
max-width: 320px;
}
.cta__ctas .btn {
width: 100%;
justify-content: center;
}
/* footer bar */
.foot__bar {
flex-direction: column;
gap: 10px;
align-items: flex-start;
padding: 18px 0;
font-size: 10.5px;
}
.foot__links {
flex-wrap: wrap;
gap: 16px;
}
/* legal pages — hide sticky TOC on mobile (becomes awkward) */
.legal__toc {
position: static;
}
.legal__body > section {
padding: 28px 0;
}
.legal__body h2 {
font-size: 24px;
}
.legal-hero {
padding: 60px 0 40px;
}
/* disable the big display__accent underline on narrow screens */
.display__accent::after {
display: none;
}
}
/* prevent horizontal scroll from any overflow */
html,
body {
overflow-x: hidden;
}
/* chapter label — vertical magazine chapter marker */
.chapter-label {
position: absolute;
left: 22px;
top: 140px;
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
display: flex;
gap: 16px;
align-items: center;
pointer-events: none;
user-select: none;
}
.chapter-label::before {
content: "";
width: 1px;
height: 44px;
background: var(--line-strong);
}
.chapter-label span:first-child {
color: var(--signal);
}
.chapter-label--light {
color: #6b6760;
}
.chapter-label--light span:first-child {
color: var(--signal);
}
.chapter-label--light::before {
background: #c5bca8;
}
@media (max-width: 1200px) {
.chapter-label {
display: none;
}
}
/* ============================================================
HERO
============================================================ */
.hero {
position: relative;
padding: 54px 0 96px;
overflow: hidden;
/* engineering blueprint grid */
background-image:
linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
background-size: 64px 64px;
background-position: center top;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(
800px 400px at 80% 0%,
rgba(255, 91, 31, 0.1),
transparent 60%
),
radial-gradient(
600px 300px at 10% 80%,
rgba(61, 207, 182, 0.07),
transparent 60%
);
}
.hero__inner {
position: relative;
z-index: 1;
}
/* ticker */
.ticker {
display: flex;
gap: 18px;
align-items: center;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #b5ad9c;
padding: 10px 14px;
border: 1px solid var(--line);
border-radius: 999px;
width: fit-content;
max-width: 100%;
overflow: hidden;
background: rgba(20, 18, 16, 0.5);
backdrop-filter: blur(6px);
margin-bottom: 36px;
}
.ticker strong {
color: var(--cream);
font-weight: 500;
}
.ticker__live {
color: var(--signal);
font-weight: 700;
letter-spacing: 0.2em;
}
.ticker__sep {
color: var(--muted-dark);
font-size: 8px;
}
.ticker__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--signal);
box-shadow: 0 0 0 0 rgba(255, 91, 31, 0.55);
animation: pulse 1.8s infinite var(--ease);
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 91, 31, 0.55);
}
70% {
box-shadow: 0 0 0 10px rgba(255, 91, 31, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 91, 31, 0);
}
}
@media (max-width: 780px) {
.ticker {
font-size: 10px;
gap: 10px;
padding: 8px 12px;
}
.ticker span:nth-child(n + 8) {
display: none;
}
}
.hero__grid {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: 64px;
align-items: start;
margin-top: 28px;
}
@media (max-width: 1080px) {
.hero__grid {
grid-template-columns: 1fr;
gap: 56px;
}
}
.hero__copy > * + * {
margin-top: 26px;
}
.hero__ctas {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.hero__stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin-top: 56px;
border-top: 1px solid var(--line);
}
.hero__stats > div {
padding: 18px 16px 0 0;
border-right: 1px solid var(--line);
margin-left: 27px;
}
.hero__stats > div:last-child {
border-right: 0;
padding-right: 0;
}
.hero__stats dt {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.hero__stats dd {
margin: 6px 0 0;
font-family: var(--f-display);
font-variation-settings: "opsz" 72;
font-size: 28px;
line-height: 1;
color: var(--cream);
/* Guard against inherited gradient-clip effects */
background: none;
-webkit-text-fill-color: var(--cream);
-webkit-background-clip: border-box;
background-clip: border-box;
animation: none;
}
@media (max-width: 640px) {
.hero__stats {
grid-template-columns: repeat(2, 1fr);
row-gap: 18px;
}
.hero__stats > div:nth-child(2) {
border-right: 0;
}
}
/* ---------- portal window ---------- */
.portal {
position: relative;
padding: 20px;
}
.portal__frame {
position: relative;
background: var(--ink-2);
border: 1px solid var(--line-strong);
border-radius: 6px;
padding: 0;
overflow: hidden;
box-shadow:
0 20px 60px -20px rgba(0, 0, 0, 0.7),
0 4px 20px -8px rgba(255, 91, 31, 0.2);
}
.portal__chrome {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 16px;
padding: 12px 16px;
background: var(--ink-3);
border-bottom: 1px solid var(--line);
}
.portal__dots {
display: flex;
gap: 6px;
}
.portal__dots span {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--line-strong);
}
.portal__dots span:nth-child(1) {
background: #ff5f57;
}
.portal__dots span:nth-child(2) {
background: #febc2e;
}
.portal__dots span:nth-child(3) {
background: #28c840;
}
.portal__addr {
font-family: var(--f-mono);
font-size: 11px;
color: var(--muted);
display: inline-flex;
gap: 8px;
align-items: center;
justify-self: center;
padding: 5px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(0, 0, 0, 0.25);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.portal__addr-lock {
color: var(--teal);
display: inline-grid;
place-items: center;
}
.portal__tools {
display: flex;
gap: 6px;
}
.portal__tools span {
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: 0.16em;
padding: 3px 7px;
border: 1px solid var(--line);
color: var(--signal);
border-radius: 2px;
background: rgba(255, 91, 31, 0.05);
}
.portal__body {
position: relative;
padding: 28px 28px 32px;
min-height: 420px;
background:
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px) 0 0 / 24px
24px,
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px) 0 0 /
24px 24px,
radial-gradient(
400px 240px at 80% 100%,
rgba(255, 91, 31, 0.08),
transparent 60%
),
var(--ink-2);
}
.dashcard {
position: absolute;
background: #1b1814;
border: 1px solid var(--line-strong);
border-radius: 4px;
padding: 14px 16px;
box-shadow: 0 14px 40px -18px rgba(0, 0, 0, 0.8);
transition: transform 0.6s var(--ease);
}
.dashcard__head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
font-size: 11px;
}
.dashcard__title {
font-family: var(--f-display);
font-style: italic;
font-size: 14px;
color: var(--cream);
}
.tag {
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: 0.1em;
padding: 3px 6px;
border-radius: 2px;
text-transform: uppercase;
font-weight: 600;
}
.tag--tableau {
background: rgba(233, 118, 39, 0.14);
color: #e97627;
border: 1px solid rgba(233, 118, 39, 0.35);
}
.tag--powerbi {
background: rgba(242, 200, 17, 0.14);
color: #f2c811;
border: 1px solid rgba(242, 200, 17, 0.35);
}
.tag--quicksight {
background: rgba(61, 207, 182, 0.14);
color: #3dcfb6;
border: 1px solid rgba(61, 207, 182, 0.35);
}
.dashcard__rls {
margin-left: auto;
font-family: var(--f-mono);
font-size: 9px;
color: var(--muted);
background: rgba(0, 0, 0, 0.3);
padding: 3px 6px;
border-radius: 2px;
border: 1px solid var(--line);
}
.dashcard--1 {
right: 24px;
bottom: 20px;
width: 82%;
z-index: 3;
animation: cardHover 6s var(--ease) infinite alternate;
}
.dashcard--2 {
right: 56px;
top: 40px;
width: 54%;
z-index: 2;
transform: rotate(-1.2deg);
background: #1f1b16;
animation: cardHover 7s var(--ease) infinite alternate-reverse;
}
.dashcard--3 {
left: 20px;
top: 24px;
width: 44%;
z-index: 1;
transform: rotate(-2deg);
background: #1f1b16;
animation: cardHover 8s var(--ease) infinite alternate;
opacity: 0.92;
}
@keyframes cardHover {
from {
transform: translateY(0) rotate(var(--r, 0deg));
}
to {
transform: translateY(-6px) rotate(var(--r, 0deg));
}
}
.dashcard--2 {
--r: -1.2deg;
}
.dashcard--3 {
--r: -2deg;
}
.dashcard__row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 10px;
}
.kpi {
padding: 8px 10px;
border: 1px solid var(--line);
border-radius: 2px;
background: rgba(0, 0, 0, 0.2);
}
.kpi__label {
display: block;
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.kpi__value {
display: block;
font-family: var(--f-display);
font-variation-settings: "opsz" 72;
font-size: 22px;
line-height: 1.1;
color: var(--cream);
margin-top: 4px;
}
.kpi__delta {
display: inline-block;
margin-top: 2px;
font-family: var(--f-mono);
font-size: 10px;
}
.kpi__delta.up {
color: var(--teal);
}
.kpi__delta.dn {
color: #ff7b7b;
}
.dashcard__chart {
width: 100%;
height: 96px;
display: block;
margin-top: 8px;
}
.chart__grid {
stroke: rgba(255, 255, 255, 0.06);
stroke-width: 1;
stroke-dasharray: 2 4;
fill: none;
}
.chart__line {
stroke: var(--signal);
stroke-width: 1.8;
fill: none;
stroke-linejoin: round;
}
.chart__tip {
fill: var(--signal);
}
.chart__area {
pointer-events: none;
}
.dashcard__foot {
display: flex;
justify-content: space-between;
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed var(--line);
font-size: 10px;
color: var(--muted);
}
.dashcard__mini {
display: flex;
align-items: flex-end;
gap: 6px;
height: 62px;
padding: 4px 2px 0;
}
.dashcard__mini .bar {
flex: 1;
height: calc(var(--h) * 100%);
background: linear-gradient(180deg, var(--signal), rgba(255, 91, 31, 0.2));
border-radius: 1px;
}
.dashcard__cohort {
display: flex;
flex-direction: column;
gap: 4px;
padding: 2px 0;
}
.cohort__row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
}
.cohort__row span {
height: 18px;
border-radius: 1px;
background: rgba(61, 207, 182, calc(var(--v, 0.5)));
}
/* annotation lines */
.anno {
position: absolute;
font-family: var(--f-mono);
font-size: 9.5px;
color: var(--muted);
letter-spacing: 0.12em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 8px;
}
.anno span {
color: var(--signal);
border: 1px solid var(--line-strong);
padding: 1px 5px;
border-radius: 2px;
background: rgba(0, 0, 0, 0.3);
}
.anno--a {
top: 10px;
right: 20px;
}
.anno--b {
top: 50%;
left: -20px;
transform: translateY(-50%);
}
.anno--c {
bottom: 8px;
left: 24px;
}
@media (max-width: 1080px) {
.anno--b {
display: none;
}
}
/* corner tick marks */
.tick {
position: absolute;
width: 14px;
height: 14px;
color: var(--signal);
}
.tick::before,
.tick::after {
content: "";
position: absolute;
background: currentColor;
}
.tick::before {
width: 14px;
height: 1px;
top: 7px;
left: 0;
}
.tick::after {
width: 1px;
height: 14px;
top: 0;
left: 7px;
}
.tick--tl {
top: 0;
left: 0;
}
.tick--tr {
top: 0;
right: 0;
}
.tick--bl {
bottom: 0;
left: 0;
}
.tick--br {
bottom: 0;
right: 0;
}
/* ============================================================
TRUST STRIP
============================================================ */
.trust {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--ink-2);
}
.trust__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 26px;
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
}
.trust__label {
font-size: 10.5px;
letter-spacing: 0.28em;
color: var(--signal);
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 12px;
}
.trust__label::before,
.trust__label::after {
content: "";
width: 28px;
height: 1px;
background: var(--line-strong);
}
/* ---- Marquee ---- */
.marquee {
position: relative;
width: 100%;
overflow: hidden;
padding: 8px 0;
--marquee-speed: 38s;
}
.marquee__track {
display: flex;
width: max-content;
animation: marquee var(--marquee-speed) linear infinite;
will-change: transform;
}
.marquee:hover .marquee__track {
animation-play-state: paused;
}
.marquee__set {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 64px;
padding-right: 64px;
flex-shrink: 0;
}
.marquee__set li {
display: inline-flex;
align-items: center;
gap: 12px;
color: #cfc8b8;
font-family: var(--f-display);
font-variation-settings: "opsz" 36;
font-weight: 500;
font-size: 22px;
letter-spacing: -0.015em;
transition:
color 0.25s var(--ease),
transform 0.25s var(--ease);
white-space: nowrap;
}
.marquee__set li:hover {
color: var(--cream);
transform: translateY(-2px);
}
.marquee__set img {
width: 26px;
height: 26px;
transition:
transform 0.3s var(--ease),
filter 0.3s var(--ease);
}
.marquee__set li:hover img {
transform: rotate(-6deg) scale(1.08);
}
@keyframes marquee {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-50%, 0, 0);
}
}
/* edge fades so logos ease in/out of view */
.marquee__fade {
position: absolute;
top: 0;
bottom: 0;
width: 120px;
z-index: 2;
pointer-events: none;
}
.marquee__fade--l {
left: 0;
background: linear-gradient(to right, var(--ink-2), transparent);
}
.marquee__fade--r {
right: 0;
background: linear-gradient(to left, var(--ink-2), transparent);
}
@media (prefers-reduced-motion: reduce) {
.marquee__track {
animation: none;
}
.marquee__set:last-child {
display: none;
}
}
@media (max-width: 780px) {
.marquee {
--marquee-speed: 28s;
}
.marquee__set {
gap: 44px;
padding-right: 44px;
}
.marquee__set li {
font-size: 18px;
}
.marquee__set img {
width: 20px;
height: 20px;
}
.marquee__fade {
width: 60px;
}
}
.trust__list li {
display: inline-flex;
align-items: center;
gap: 10px;
color: #cfc8b8;
font-family: var(--f-display);
font-variation-settings: "opsz" 36;
font-weight: 500;
font-size: 19px;
letter-spacing: -0.01em;
transition:
color 0.2s var(--ease),
transform 0.2s var(--ease);
}
.trust__list li:hover {
color: var(--cream);
transform: translateY(-1px);
}
.trust__list img {
width: 22px;
height: 22px;
}
.logo-txt {
font-family: var(--f-display);
font-style: italic;
font-weight: 500;
font-size: 19px;
color: #afa89a;
}
/* ============================================================
SPREAD (thesis)
============================================================ */
.spread {
position: relative;
padding: 120px 0;
border-bottom: 1px solid var(--line);
}
.spread__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 96px;
align-items: start;
}
@media (max-width: 1080px) {
.spread__grid {
grid-template-columns: 1fr;
gap: 56px;
}
.spread {
padding: 80px 0;
}
}
.spread__lede {
font-family: var(--f-display);
font-variation-settings: "opsz" 24;
font-size: 19px;
line-height: 1.55;
color: #d8d1c2;
max-width: 42ch;
margin-top: 22px;
}
.spread__lede strong {
color: var(--cream);
font-weight: 500;
}
.spread__left .link-arrow {
margin-top: 28px;
}
/* spec sheet */
.specsheet {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--ink-2);
position: relative;
}
.specsheet::before,
.specsheet::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border: 1px solid var(--signal);
}
.specsheet::before {
top: -5px;
left: -5px;
border-right: 0;
border-bottom: 0;
}
.specsheet::after {
bottom: -5px;
right: -5px;
border-left: 0;
border-top: 0;
}
.specsheet__head {
display: flex;
justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid var(--line);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.specsheet__rows > div {
display: grid;
grid-template-columns: 140px 1fr;
padding: 16px 20px;
border-bottom: 1px dashed var(--line);
gap: 16px;
}
.specsheet__rows > div:last-child {
border-bottom: 0;
}
.specsheet__rows dt {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #cfc8b8;
}
.specsheet__rows dd {
margin: 0;
font-family: var(--f-display);
font-variation-settings: "opsz" 24;
font-size: 16px;
color: var(--cream);
}
.specsheet__rows .neg dd {
color: #8a8579;
font-style: italic;
}
.specsheet__foot {
padding: 14px 20px;
border-top: 1px solid var(--line);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--muted);
background: rgba(255, 91, 31, 0.04);
}
.specsheet__foot a {
color: var(--signal);
border-bottom: 1px solid var(--signal);
}
/* ============================================================
FEATURES
============================================================ */
.features {
position: relative;
padding: 120px 0;
border-bottom: 1px solid var(--line);
}
.section-head {
margin-bottom: 72px;
max-width: 900px;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.feat {
padding: 36px 30px 42px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
position: relative;
background: var(--ink);
transition: background 0.3s var(--ease);
}
.feat:hover {
background: #120f0c;
}
.feat--wide {
grid-column: span 2;
}
.feat--tall {
grid-row: span 2;
}
.feat__num {
font-size: 10.5px;
letter-spacing: 0.18em;
color: var(--signal);
display: block;
margin-bottom: 36px;
}
.feat__title {
font-family: var(--f-display);
font-variation-settings: "opsz" 36;
font-size: 28px;
line-height: 1.1;
color: var(--cream);
margin-bottom: 14px;
letter-spacing: -0.01em;
}
.feat__body {
font-size: 15px;
line-height: 1.6;
color: #c9c2b3;
max-width: 44ch;
}
.chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 22px;
}
.chips li {
font-family: var(--f-mono);
font-size: 10.5px;
padding: 4px 8px;
border: 1px solid var(--line);
border-radius: 2px;
color: #cfc8b8;
letter-spacing: 0.05em;
}
.feat__mini-org {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 24px;
}
.feat__mini-org span {
font-family: var(--f-mono);
font-size: 10.5px;
padding: 3px 8px;
border: 1px dashed var(--line-strong);
border-radius: 2px;
color: #cfc8b8;
}
.feat--alt {
background: var(--ink-2);
}
.code {
margin: 22px 0 0;
padding: 16px 18px;
background: #0d0c0a;
border: 1px solid var(--line);
border-radius: 2px;
font-family: var(--f-mono);
font-size: 12.5px;
line-height: 1.65;
color: #d4cfc2;
overflow-x: auto;
}
.code .c-com {
color: var(--muted);
font-style: italic;
}
.code .c-key {
color: var(--signal);
}
.code .c-typ {
color: var(--teal);
}
.code .c-str {
color: #e8c46a;
}
.code .c-fn {
color: #e8c46a;
}
.code .c-num {
color: #f2c811;
}
@media (max-width: 980px) {
.feature-grid {
grid-template-columns: repeat(2, 1fr);
}
.feat--wide {
grid-column: span 2;
}
.feat--tall {
grid-row: auto;
}
}
@media (max-width: 640px) {
.feature-grid {
grid-template-columns: 1fr;
}
.feat--wide {
grid-column: auto;
}
}
/* ============================================================
SECURITY (inverted — paper on ink but very dark)
============================================================ */
.security {
position: relative;
padding: 120px 0;
background: #070605;
border-bottom: 1px solid var(--line);
overflow: hidden;
}
.security::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
700px 400px at 100% 0%,
rgba(255, 91, 31, 0.1),
transparent 60%
),
linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px) 0 0 / 48px
48px,
linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px) 0
0 / 48px 48px;
pointer-events: none;
}
.security__grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 80px;
align-items: start;
}
@media (max-width: 1080px) {
.security__grid {
grid-template-columns: 1fr;
gap: 56px;
}
.security {
padding: 80px 0;
}
}
.security__lede {
font-family: var(--f-display);
font-variation-settings: "opsz" 24;
font-size: 18px;
line-height: 1.6;
color: #c9c2b3;
max-width: 46ch;
margin: 22px 0 28px;
}
.sec-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.sec-list li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14.5px;
color: #d8d1c2;
padding: 14px 0;
border-bottom: 1px dashed var(--line);
}
.sec-list li:last-child {
border-bottom: 0;
}
.check {
color: var(--signal);
font-family: var(--f-mono);
font-weight: 700;
}
.codepanel {
background: #0d0c0a;
border: 1px solid var(--line);
border-radius: 2px;
overflow: hidden;
position: relative;
box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
}
.codepanel::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(255, 91, 31, 0.05), transparent 30%);
}
.codepanel__head {
display: flex;
justify-content: space-between;
padding: 10px 16px;
border-bottom: 1px solid var(--line);
font-size: 11px;
color: var(--muted);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.codepanel__file {
color: var(--signal);
}
.codepanel .code {
margin: 0;
border: 0;
border-radius: 0;
font-size: 13px;
}
.codepanel__foot {
display: flex;
justify-content: space-between;
padding: 10px 16px;
border-top: 1px solid var(--line);
font-size: 11px;
color: var(--muted);
}
.codepanel__foot span {
color: var(--teal);
}
/* ============================================================
HOW IT WORKS
============================================================ */
.how {
position: relative;
padding: 120px 0;
border-bottom: 1px solid var(--line);
}
.steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.step {
display: flex;
gap: 28px;
padding: 40px 32px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
align-items: flex-start;
}
.step__num {
flex: 0 0 72px;
height: 72px;
border: 1px solid var(--signal);
border-radius: 50%;
display: grid;
place-items: center;
position: relative;
}
.step__num::before {
content: "";
position: absolute;
inset: -6px;
border: 1px dashed var(--line);
border-radius: 50%;
}
.step__num span {
font-family: var(--f-display);
font-variation-settings: "opsz" 72;
font-style: italic;
font-size: 28px;
color: var(--signal);
}
.step__body h3 {
font-family: var(--f-display);
font-variation-settings: "opsz" 36;
font-size: 24px;
color: var(--cream);
margin-bottom: 10px;
}
.step__body p {
font-size: 14.5px;
color: #c9c2b3;
margin-bottom: 12px;
max-width: 34ch;
}
.step__meta {
font-size: 10.5px;
letter-spacing: 0.18em;
color: var(--signal);
}
@media (max-width: 980px) {
.steps {
grid-template-columns: 1fr;
}
}
/* ============================================================
WHITE-LABEL (paper section — flips to light)
============================================================ */
.wl {
background: var(--paper);
color: var(--ink);
padding: 140px 0;
position: relative;
border-bottom: 1px solid var(--paper-line);
}
.wl::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(11, 10, 8, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(11, 10, 8, 0.04) 1px, transparent 1px);
background-size: 64px 64px;
pointer-events: none;
}
.wl__grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 80px;
align-items: center;
}
@media (max-width: 1080px) {
.wl__grid {
grid-template-columns: 1fr;
gap: 56px;
}
.wl {
padding: 80px 0;
}
}
.wl .kicker {
color: var(--signal);
}
.wl .h-display {
color: var(--ink);
}
.wl .display__italic {
color: var(--signal);
}
.wl__lede {
font-family: var(--f-display);
font-variation-settings: "opsz" 24;
font-size: 19px;
line-height: 1.55;
color: #342e27;
max-width: 44ch;
margin-top: 20px;
}
.wl__swatches {
display: flex;
gap: 14px;
margin-top: 32px;
flex-wrap: wrap;
}
.swatch {
display: inline-flex;
flex-direction: column;
gap: 8px;
padding: 12px;
background: var(--cream);
border: 1px solid var(--paper-line);
border-radius: var(--radius);
cursor: pointer;
transition:
border-color 0.2s var(--ease),
transform 0.2s var(--ease);
}
.swatch:hover,
.swatch.is-active {
border-color: var(--ink);
transform: translateY(-2px);
}
.swatch.is-active {
box-shadow: 0 0 0 2px var(--ink);
}
.swatch > span {
display: block;
height: 14px;
width: 44px;
border-radius: 1px;
}
.swatch > span + span {
margin-top: -2px;
}
.swatch em {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink);
margin-top: 6px;
font-style: normal;
}
/* white-label demo browser */
.wl__browser {
background: var(--cream);
border: 1px solid var(--paper-line);
border-radius: 4px;
overflow: hidden;
box-shadow:
0 40px 80px -40px rgba(0, 0, 0, 0.35),
0 4px 12px -4px rgba(0, 0, 0, 0.1);
transition:
background 0.4s var(--ease),
color 0.4s var(--ease);
}
.wl__chrome {
display: flex;
gap: 8px;
align-items: center;
padding: 12px 14px;
border-bottom: 1px solid var(--paper-line);
background: var(--paper-2);
}
.wl__chrome > span {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--paper-line);
}
.wl__chrome > span:nth-child(1) {
background: #ff5f57;
}
.wl__chrome > span:nth-child(2) {
background: #febc2e;
}
.wl__chrome > span:nth-child(3) {
background: #28c840;
}
.wl__url {
margin-left: 12px;
font-size: 11px;
color: #5a5346;
background: var(--cream);
padding: 5px 12px;
border: 1px solid var(--paper-line);
border-radius: 2px;
flex: 1;
}
.wl__stage {
display: grid;
grid-template-columns: 220px 1fr;
min-height: 440px;
}
/* --- sidebar --- */
.wl__side {
background: var(--wl-bg, var(--ink));
color: var(--wl-fg, var(--cream));
padding: 14px 12px;
display: flex;
flex-direction: column;
gap: 14px;
transition:
background 0.4s var(--ease),
color 0.4s var(--ease);
position: relative;
}
.wl__side::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1px;
background: rgba(255, 255, 255, 0.06);
}
/* org header row */
.wl__orghead {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 4px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wl__toggle {
width: 26px;
height: 26px;
display: inline-grid;
place-items: center;
border-radius: 4px;
color: rgba(255, 255, 255, 0.55);
transition:
background 0.15s var(--ease),
color 0.15s var(--ease);
}
.wl__toggle:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--wl-fg, var(--cream));
}
.wl__orgmark {
width: 26px;
height: 26px;
display: inline-grid;
place-items: center;
border-radius: 4px;
background: var(--wl-accent, var(--signal));
color: var(--wl-accent-fg, var(--ink));
font-family: var(--f-mono);
font-size: 12px;
font-weight: 700;
}
.wl__orgname {
font-family: var(--f-body);
font-size: 13px;
font-weight: 500;
color: var(--wl-fg, var(--cream));
letter-spacing: -0.01em;
}
/* org switcher */
.wl__orgswitch {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
text-align: left;
transition: background 0.15s var(--ease);
}
.wl__orgswitch:hover {
background: rgba(255, 255, 255, 0.08);
}
.wl__orgswitch .wl__switchname {
flex: 1;
font-family: var(--f-body);
letter-spacing: -0.01em;
}
.wl__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4);
animation: wlPulse 2s infinite var(--ease);
flex: 0 0 6px;
}
@keyframes wlPulse {
0% {
box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.35);
}
70% {
box-shadow: 0 0 0 6px rgba(74, 222, 128, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
}
}
/* dashboards nav section */
.wl__navlabel {
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.35);
padding: 4px 6px;
margin-top: 2px;
}
.wl__nav {
display: flex;
flex-direction: column;
gap: 1px;
flex: 1;
}
.wl__nav li {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 10px;
border-radius: 4px;
font-size: 13px;
color: rgba(255, 255, 255, 0.55);
transition:
background 0.15s var(--ease),
color 0.15s var(--ease);
cursor: pointer;
border-left: 2px solid transparent;
padding-left: 8px;
}
.wl__nav li:hover {
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.85);
}
.wl__nav li.is-active {
background: rgba(255, 255, 255, 0.08);
color: var(--wl-fg, var(--cream));
border-left-color: var(--wl-accent, var(--signal));
}
.wl__nav li svg {
color: currentColor;
opacity: 0.7;
flex: 0 0 13px;
}
.wl__nav li.is-active svg {
color: var(--wl-accent, var(--signal));
opacity: 1;
}
/* user block at bottom */
.wl__user {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 8px;
margin-top: auto;
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding-top: 12px;
}
.wl__avatar {
width: 28px;
height: 28px;
display: inline-grid;
place-items: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: var(--wl-fg, var(--cream));
font-family: var(--f-mono);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.02em;
}
.wl__userinfo {
display: flex;
flex-direction: column;
flex: 1;
line-height: 1.2;
min-width: 0;
}
.wl__userinfo strong {
font-size: 12.5px;
font-weight: 500;
color: var(--wl-fg, var(--cream));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wl__userinfo span {
font-size: 10.5px;
color: rgba(255, 255, 255, 0.45);
}
.wl__user svg {
color: rgba(255, 255, 255, 0.35);
flex: 0 0 12px;
}
/* main area breadcrumb */
.wl__crumb {
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #8a8579;
margin-bottom: 4px;
}
.wl__main {
padding: 24px 28px;
background: var(--cream);
color: var(--ink);
}
.wl__mainhead {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.wl__mainhead h4 {
font-family: var(--f-display);
font-variation-settings: "opsz" 36;
font-size: 22px;
color: var(--ink);
}
.wl__btn {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 7px 12px;
background: var(--wl-accent, var(--signal));
color: var(--wl-fg-btn, var(--ink));
border-radius: 2px;
}
.wl__kpis {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 18px;
}
.wl__kpis > div {
padding: 12px 14px;
border: 1px solid var(--paper-line);
border-radius: 2px;
background: #fbf7ed;
}
.wl__kpis span {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #6e685a;
}
.wl__kpis strong {
display: block;
margin-top: 4px;
font-family: var(--f-display);
font-variation-settings: "opsz" 72;
font-size: 22px;
color: var(--ink);
font-weight: 500;
}
.wl__chart {
width: 100%;
height: 110px;
margin-top: 6px;
}
.wl__line {
stroke: var(--wl-accent, var(--signal));
stroke-width: 2;
fill: none;
stroke-linejoin: round;
}
/* theme variants applied via swatch click (everything reads from vars) */
body[data-wl-theme="ink"] {
--wl-bg: #0b0a08;
--wl-fg: #f5efe4;
--wl-accent: #ff5b1f;
--wl-accent-fg: #0b0a08;
}
body[data-wl-theme="forest"] {
--wl-bg: #1b3a2b;
--wl-fg: #f2ede1;
--wl-accent: #e8c46a;
--wl-accent-fg: #1b3a2b;
}
body[data-wl-theme="oxblood"] {
--wl-bg: #4a1320;
--wl-fg: #f6e9da;
--wl-accent: #d96a4e;
--wl-accent-fg: #ffffff;
}
body[data-wl-theme="slate"] {
--wl-bg: #1a2230;
--wl-fg: #eef1f5;
--wl-accent: #3dcfb6;
--wl-accent-fg: #0b0a08;
}
/* main-area chart line + export button follow the accent */
body[data-wl-theme] .wl__line {
stroke: var(--wl-accent);
}
body[data-wl-theme] .wl__btn {
background: var(--wl-accent);
color: var(--wl-accent-fg);
}
@media (max-width: 720px) {
.wl__stage {
grid-template-columns: 1fr;
}
.wl__side {
padding: 16px;
}
.wl__side ul {
flex-direction: row;
flex-wrap: wrap;
}
}
/* ============================================================
USE CASES
============================================================ */
.use {
position: relative;
padding: 120px 0;
border-bottom: 1px solid var(--line);
}
.use__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
@media (max-width: 780px) {
.use__grid {
grid-template-columns: 1fr;
}
}
.usecard {
background: var(--ink);
padding: 36px 32px 30px;
transition: background 0.3s var(--ease);
}
.usecard:hover {
background: #120f0c;
}
.usecard header {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 18px;
}
.usecard header .mono {
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--signal);
}
.usecard h3 {
font-family: var(--f-display);
font-variation-settings: "opsz" 36;
font-size: 28px;
color: var(--cream);
}
.usecard p {
font-size: 15px;
color: #c9c2b3;
max-width: 48ch;
line-height: 1.6;
}
.usecard footer {
margin-top: 22px;
padding-top: 16px;
border-top: 1px dashed var(--line);
font-size: 11px;
letter-spacing: 0.12em;
color: var(--muted);
}
.usecard footer em {
color: #cfc8b8;
font-style: italic;
}
/* ============================================================
PRICING
============================================================ */
.pricing {
padding: 120px 0;
border-bottom: 1px solid var(--line);
}
.plans {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 40px;
}
@media (max-width: 980px) {
.plans {
grid-template-columns: 1fr;
}
}
.plan {
padding: 32px 28px;
border: 1px solid var(--line);
border-radius: 3px;
background: var(--ink);
display: flex;
flex-direction: column;
position: relative;
}
.plan header h3 {
font-family: var(--f-display);
font-variation-settings: "opsz" 36;
font-size: 30px;
color: var(--cream);
margin-bottom: 6px;
}
.plan__tag {
font-family: var(--f-display);
font-variation-settings: "opsz" 24;
font-style: italic;
font-size: 15px;
color: #a9a293;
margin-bottom: 24px;
}
.plan__price {
display: flex;
align-items: baseline;
gap: 4px;
margin-bottom: 28px;
padding-bottom: 24px;
border-bottom: 1px dashed var(--line);
}
.plan__cur {
font-family: var(--f-display);
font-size: 22px;
color: var(--muted);
}
.plan__num {
font-family: var(--f-display);
font-variation-settings:
"opsz" 144,
"SOFT" 30;
font-weight: 440;
font-size: 62px;
line-height: 1;
color: var(--cream);
letter-spacing: -0.03em;
}
.plan__num--text {
font-size: 40px;
font-style: italic;
}
.plan__per {
font-family: var(--f-mono);
font-size: 12px;
color: var(--muted);
}
.plan__features {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 28px;
flex: 1;
}
.plan__features li {
font-size: 14px;
color: #d8d1c2;
padding-left: 22px;
position: relative;
}
.plan__features li::before {
content: "+";
position: absolute;
left: 0;
color: var(--signal);
font-family: var(--f-mono);
}
.plan--featured {
background: linear-gradient(180deg, #1a1510 0%, #0f0d0a 100%);
border-color: var(--signal);
box-shadow: 0 20px 60px -30px rgba(255, 91, 31, 0.3);
}
.plan__badge {
position: absolute;
top: -9px;
right: 18px;
font-size: 9.5px;
letter-spacing: 0.2em;
padding: 4px 10px;
background: var(--signal);
color: var(--ink);
border-radius: 2px;
}
.pricing__sub {
margin-top: 22px;
font-family: var(--f-display);
font-variation-settings: "opsz" 24;
font-size: 18px;
line-height: 1.55;
color: #c9c2b3;
max-width: 58ch;
}
.pricing__sub em {
color: var(--signal);
font-style: italic;
}
.plan__feature--neg {
color: #6b6760 !important;
text-decoration: line-through;
text-decoration-color: rgba(255, 255, 255, 0.18);
}
.plan__feature--neg::before {
content: "−" !important;
color: #6b6760 !important;
}
.plan__features li strong {
color: var(--cream);
font-weight: 500;
}
/* ============================================================
FEATURE COMPARISON TABLE
============================================================ */
.compare {
margin-top: 80px;
padding-top: 72px;
border-top: 1px solid var(--line);
}
.compare__head {
margin-bottom: 40px;
max-width: 700px;
}
.compare__title {
font-family: var(--f-display);
font-variation-settings: "opsz" 72;
font-weight: 440;
font-size: clamp(26px, 3vw, 40px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--cream);
}
.compare__wrap {
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 2px;
background: var(--ink-2);
/* nicer scrollbar on webkit */
scrollbar-width: thin;
scrollbar-color: var(--line-strong) transparent;
}
.compare__wrap::-webkit-scrollbar {
height: 8px;
}
.compare__wrap::-webkit-scrollbar-thumb {
background: var(--line-strong);
border-radius: 4px;
}
.compare__table {
width: 100%;
min-width: 780px;
border-collapse: collapse;
font-size: 14.5px;
text-align: left;
}
.compare__table th,
.compare__table td {
padding: 18px 22px;
border-bottom: 1px dashed var(--line);
vertical-align: middle;
}
.compare__table tr:last-child th,
.compare__table tr:last-child td {
border-bottom: 0;
}
/* header row */
.compare__table thead th {
font-family: var(--f-body);
font-weight: 500;
background: rgba(255, 91, 31, 0.04);
border-bottom: 1px solid var(--line);
padding: 22px;
vertical-align: bottom;
min-width: 160px;
}
.compare__table thead th.compare__feature {
background: transparent;
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
width: 38%;
}
.compare__table thead th:not(.compare__feature) {
text-align: center;
}
.compare__plan {
display: block;
font-family: var(--f-display);
font-variation-settings: "opsz" 36;
font-size: 22px;
font-weight: 500;
color: var(--cream);
letter-spacing: -0.02em;
margin-bottom: 6px;
}
.compare__price {
display: block;
font-size: 11.5px;
letter-spacing: 0.1em;
color: var(--muted);
}
.compare__pop {
display: inline-block;
margin-top: 8px;
font-size: 9.5px;
letter-spacing: 0.2em;
padding: 3px 8px;
background: var(--signal);
color: var(--ink);
border-radius: 2px;
}
/* body rows */
.compare__table tbody th {
font-weight: 500;
color: var(--cream);
font-family: var(--f-body);
font-size: 14.5px;
line-height: 1.4;
letter-spacing: -0.005em;
}
.compare__table tbody th em {
display: block;
font-family: var(--f-display);
font-style: italic;
font-variation-settings: "opsz" 24;
font-size: 13px;
color: var(--muted);
margin-top: 4px;
font-weight: 400;
}
.compare__table tbody td {
text-align: center;
color: #d0c9b9;
}
.compare__table tbody tr:nth-child(even) th,
.compare__table tbody tr:nth-child(even) td {
background: rgba(255, 255, 255, 0.015);
}
/* popular column emphasis */
.compare__col--pop {
background: rgba(255, 91, 31, 0.06) !important;
border-left: 1px solid rgba(255, 91, 31, 0.25);
border-right: 1px solid rgba(255, 91, 31, 0.25);
}
.compare__table tbody tr:nth-child(even) .compare__col--pop {
background: rgba(255, 91, 31, 0.08) !important;
}
.compare__table thead th.compare__col--pop {
background: rgba(255, 91, 31, 0.1) !important;
position: relative;
}
/* cell content */
.yes {
display: inline-grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(61, 207, 182, 0.15);
color: var(--teal);
font-family: var(--f-mono);
font-size: 13px;
font-weight: 700;
}
.no {
color: #4a453f;
font-family: var(--f-mono);
font-size: 16px;
}
.v {
font-family: var(--f-display);
font-variation-settings: "opsz" 24;
font-style: italic;
color: var(--cream);
font-size: 15.5px;
}
.n {
font-family: var(--f-display);
font-variation-settings: "opsz" 72;
font-size: 22px;
color: var(--cream);
}
/* scroll hint on mobile */
.compare__wrap::after {
content: "";
}
@media (max-width: 780px) {
.compare__wrap {
position: relative;
}
.compare__table {
font-size: 13px;
}
.compare__table th,
.compare__table td {
padding: 14px 14px;
}
.compare__plan {
font-size: 18px;
}
}
/* ============================================================
FAQ
============================================================ */
.faq {
padding: 120px 0;
border-bottom: 1px solid var(--line);
}
.faq__grid {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
gap: 80px;
align-items: start;
}
@media (max-width: 980px) {
.faq__grid {
grid-template-columns: 1fr;
gap: 40px;
}
}
.faq__list details {
border-top: 1px solid var(--line);
padding: 22px 0;
}
.faq__list details:last-child {
border-bottom: 1px solid var(--line);
}
.faq__list summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
font-family: var(--f-display);
font-variation-settings: "opsz" 36;
font-size: 22px;
color: var(--cream);
transition: color 0.2s var(--ease);
}
.faq__list summary::-webkit-details-marker {
display: none;
}
.faq__list summary::after {
content: "+";
font-family: var(--f-mono);
font-size: 22px;
color: var(--signal);
transition: transform 0.2s var(--ease);
}
.faq__list details[open] summary::after {
content: "–";
}
.faq__list details[open] summary {
color: var(--signal);
}
.faq__list p {
margin-top: 14px;
color: #c9c2b3;
font-size: 15px;
line-height: 1.65;
max-width: 64ch;
}
/* ============================================================
CTA BAND
============================================================ */
.cta {
position: relative;
padding: 140px 0;
background:
radial-gradient(
600px 400px at 50% 0%,
rgba(255, 91, 31, 0.18),
transparent 70%
),
#070605;
text-align: center;
overflow: hidden;
}
.cta::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
}
.cta__inner {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
}
.cta__mark {
color: var(--signal);
opacity: 0.9;
}
.cta__title {
max-width: 20ch;
}
.cta__lede {
font-family: var(--f-display);
font-variation-settings: "opsz" 24;
font-size: 19px;
color: #d0c9b9;
max-width: 52ch;
line-height: 1.55;
}
.cta__ctas {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
.cta__meta {
font-size: 11px;
letter-spacing: 0.16em;
color: var(--muted);
text-transform: uppercase;
margin-top: 8px;
}
/* ============================================================
FOOTER
============================================================ */
.foot {
background: var(--ink);
padding-top: 80px;
}
.foot__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 56px;
border-bottom: 1px solid var(--line);
}
@media (max-width: 980px) {
.foot__grid {
grid-template-columns: 1fr 1fr;
gap: 40px 24px;
}
.foot__brand {
grid-column: 1 / -1;
}
}
.foot__lede {
margin-top: 20px;
font-family: var(--f-display);
font-variation-settings: "opsz" 24;
font-size: 16px;
line-height: 1.55;
color: #c9c2b3;
max-width: 38ch;
}
.foot__lede a {
color: var(--signal);
border-bottom: 1px solid currentColor;
}
.foot__addr {
margin-top: 18px;
font-size: 10.5px;
letter-spacing: 0.14em;
color: var(--muted);
text-transform: uppercase;
}
.foot__col h4 {
font-size: 10.5px;
letter-spacing: 0.2em;
color: var(--signal);
text-transform: uppercase;
margin-bottom: 18px;
}
.foot__col ul {
display: flex;
flex-direction: column;
gap: 10px;
}
.foot__col a {
font-size: 14px;
color: #d8d1c2;
transition: color 0.15s var(--ease);
}
.foot__col a:hover {
color: var(--signal);
}
.foot__bar {
display: flex;
justify-content: space-between;
padding: 24px 0;
font-size: 11px;
letter-spacing: 0.12em;
color: var(--muted);
flex-wrap: wrap;
gap: 14px;
}
.foot__links {
display: flex;
gap: 22px;
}
.foot__links a:hover {
color: var(--signal);
}
.foot__links a[aria-current="page"] {
color: var(--signal);
}
/* ============================================================
LEGAL PAGES — privacy / terms
============================================================ */
.legal-hero {
position: relative;
padding: 96px 0 56px;
border-bottom: 1px solid var(--line);
background-image:
linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
background-size: 64px 64px;
}
.legal-breadcrumb {
display: flex;
gap: 10px;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 40px;
}
.legal-breadcrumb a {
color: var(--signal);
border-bottom: 1px solid currentColor;
}
.legal-breadcrumb span:not(:last-child) {
color: var(--muted-dark);
}
.legal-breadcrumb span:last-child {
color: var(--cream);
}
.legal-hero .h-display {
max-width: 14ch;
}
.legal-lede {
margin-top: 28px;
font-family: var(--f-display);
font-variation-settings: "opsz" 36;
font-size: clamp(18px, 1.35vw, 22px);
line-height: 1.55;
color: #d8d1c2;
max-width: 56ch;
}
.legal-meta {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin-top: 48px;
border-top: 1px solid var(--line);
}
.legal-meta > div {
padding: 18px 16px 0 0;
border-right: 1px solid var(--line);
}
.legal-meta > div:last-child {
border-right: 0;
padding-right: 0;
}
.legal-meta dt {
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.legal-meta dd {
margin: 6px 0 0;
font-family: var(--f-mono);
font-size: 14px;
color: var(--cream);
}
.legal-meta dd a {
color: var(--signal);
border-bottom: 1px solid currentColor;
}
@media (max-width: 780px) {
.legal-meta {
grid-template-columns: repeat(2, 1fr);
row-gap: 18px;
}
.legal-meta > div:nth-child(2) {
border-right: 0;
}
}
.legal {
padding: 80px 0 120px;
}
.legal__grid {
display: grid;
grid-template-columns: 260px 1fr;
gap: 80px;
align-items: start;
}
@media (max-width: 980px) {
.legal__grid {
grid-template-columns: 1fr;
gap: 48px;
}
.legal__toc {
position: static !important;
}
}
.legal__toc {
position: sticky;
top: 100px;
align-self: start;
}
.legal__toc .kicker {
margin-bottom: 18px;
}
.legal__toc ol {
display: flex;
flex-direction: column;
gap: 10px;
counter-reset: toc;
}
.legal__toc a {
font-size: 13.5px;
color: #cfc8b8;
border-left: 1px solid var(--line);
padding: 4px 0 4px 14px;
display: block;
transition:
color 0.15s var(--ease),
border-color 0.15s var(--ease);
}
.legal__toc a:hover {
color: var(--signal);
border-color: var(--signal);
}
.legal__body > section {
padding: 40px 0;
border-bottom: 1px dashed var(--line);
scroll-margin-top: 100px;
}
.legal__body > section:first-child {
padding-top: 0;
}
.legal__body > section:last-of-type {
border-bottom: 0;
}
.legal__body h2 {
font-family: var(--f-display);
font-variation-settings: "opsz" 72;
font-weight: 500;
font-size: 30px;
color: var(--cream);
margin-bottom: 20px;
letter-spacing: -0.02em;
}
.legal__body p {
font-size: 15.5px;
line-height: 1.7;
color: #d0c9b9;
margin-bottom: 14px;
max-width: 68ch;
}
.legal__body p strong {
color: var(--cream);
font-weight: 500;
}
.legal__body a:not(.btn):not(.doc-related__link) {
color: var(--signal);
border-bottom: 1px solid currentColor;
}
.legal__body a.btn {
border-bottom: 0;
}
.legal__body a.btn--primary { color: var(--ink); }
.legal__body a.btn--ghost { color: var(--cream); }
.legal__body em {
color: #e8d8bf;
}
.legal-list {
margin: 10px 0 18px;
display: flex;
flex-direction: column;
gap: 10px;
}
.legal-list li {
font-size: 15px;
line-height: 1.65;
color: #d0c9b9;
padding-left: 26px;
position: relative;
max-width: 68ch;
}
.legal-list li::before {
content: "+";
position: absolute;
left: 0;
top: 0;
color: var(--signal);
font-family: var(--f-mono);
font-size: 14px;
}
.legal-check {
margin: 10px 0 18px;
display: flex;
flex-direction: column;
gap: 10px;
}
.legal-check li {
font-size: 15px;
line-height: 1.6;
color: #d0c9b9;
display: flex;
gap: 12px;
max-width: 68ch;
}
.legal-check li span {
color: var(--signal);
font-family: var(--f-mono);
flex: 0 0 16px;
}
.legal-table {
margin: 14px 0 24px;
border: 1px solid var(--line);
border-radius: 2px;
background: var(--ink-2);
overflow: hidden;
}
.legal-row {
display: grid;
grid-template-columns: 1.2fr 2.4fr 2fr;
gap: 18px;
padding: 14px 18px;
font-size: 14px;
color: #d0c9b9;
border-bottom: 1px dashed var(--line);
}
.legal-row:last-child {
border-bottom: 0;
}
.legal-row--head {
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--signal);
background: rgba(255, 91, 31, 0.05);
border-bottom: 1px solid var(--line);
}
.legal-row span:first-child {
color: var(--cream);
font-weight: 500;
}
.legal-note {
font-size: 11px;
letter-spacing: 0.08em;
color: var(--muted);
padding: 12px 14px;
background: rgba(255, 91, 31, 0.04);
border: 1px dashed var(--line);
border-radius: 2px;
margin: 10px 0 20px;
}
.legal-caps {
font-family: var(--f-mono);
font-size: 12.5px !important;
letter-spacing: 0.02em;
line-height: 1.75 !important;
color: #b5ad9c !important;
padding: 18px 20px;
background: var(--ink-2);
border: 1px solid var(--line);
border-radius: 2px;
max-width: none !important;
}
.legal-back {
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
@media (max-width: 640px) {
.legal-row {
grid-template-columns: 1fr;
gap: 6px;
}
.legal-row--head {
display: none;
}
}
/* ============================================================
DOCS — hub + article-specific elements
============================================================ */
.docs-grid-section { padding: 40px 0 120px; }
.docs-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: 2px;
}
@media (max-width: 780px) { .docs-grid { grid-template-columns: 1fr; } }
.docs-grid > li { display: block; background: var(--ink); }
.doccard {
display: block;
padding: 32px 30px 36px;
position: relative;
transition: background .25s var(--ease);
color: var(--cream);
height: 100%;
}
.doccard:hover { background: #120f0c; }
.doccard__tag {
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--signal);
display: block;
margin-bottom: 22px;
}
.doccard__title {
font-family: var(--f-display);
font-variation-settings: "opsz" 36;
font-size: 26px;
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--cream);
margin-bottom: 14px;
max-width: 26ch;
}
.doccard__body {
font-size: 15px;
line-height: 1.6;
color: #c9c2b3;
max-width: 56ch;
margin-bottom: 22px;
}
.doccard__meta {
display: flex;
gap: 14px;
font-size: 10.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
}
.doccard__arrow {
position: absolute;
top: 32px;
right: 30px;
font-family: var(--f-mono);
color: var(--signal);
font-size: 18px;
transition: transform .25s var(--ease);
}
.doccard:hover .doccard__arrow { transform: translateX(4px); }
.doccard--coming {
padding: 32px 30px 36px;
opacity: .55;
pointer-events: none;
}
.doccard--coming .doccard__meta { color: var(--signal); }
/* Article body tweaks */
.doc-body__content { padding-bottom: 40px; }
.doc-body__content h2 { scroll-margin-top: 100px; }
.doc-body__content h3 {
font-family: var(--f-display);
font-variation-settings: "opsz" 36;
font-size: 22px;
color: var(--cream);
margin-top: 20px;
margin-bottom: 12px;
letter-spacing: -0.01em;
}
.mono-inline {
font-family: var(--f-mono);
font-size: .88em;
padding: 1px 6px;
background: rgba(255,91,31,.08);
color: var(--signal-2);
border-radius: 2px;
border: 1px solid rgba(255,91,31,.18);
}
/* Numbered steps inside a doc */
.doc-steps {
display: flex;
flex-direction: column;
gap: 0;
margin: 18px 0 28px;
padding: 0;
}
.doc-steps > li {
display: grid;
grid-template-columns: 64px 1fr;
gap: 20px;
padding: 22px 0;
border-bottom: 1px dashed var(--line);
align-items: start;
}
.doc-steps > li:last-child { border-bottom: 0; }
.doc-step__num {
width: 44px;
height: 44px;
border: 1px solid var(--signal);
border-radius: 50%;
display: inline-grid;
place-items: center;
font-size: 13px;
color: var(--signal);
letter-spacing: .1em;
position: relative;
flex: 0 0 44px;
}
.doc-step__num::before {
content: "";
position: absolute;
inset: -5px;
border: 1px dashed var(--line);
border-radius: 50%;
}
.doc-steps h3 {
font-family: var(--f-display);
font-variation-settings: "opsz" 36;
font-size: 19px;
color: var(--cream);
margin: 0 0 8px !important;
letter-spacing: -0.01em;
}
.doc-steps p {
font-size: 15px !important;
line-height: 1.65;
color: #c9c2b3;
max-width: 64ch;
margin-bottom: 10px !important;
}
.doc-steps p:last-child { margin-bottom: 0 !important; }
@media (max-width: 640px) {
.doc-steps > li { grid-template-columns: 40px 1fr; gap: 14px; }
.doc-step__num { width: 32px; height: 32px; font-size: 11px; flex: 0 0 32px; }
}
/* Doc-page FAQ */
.doc-body__content details {
border-top: 1px solid var(--line);
padding: 18px 0;
}
.doc-body__content details:last-of-type { border-bottom: 1px solid var(--line); }
.doc-body__content summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-family: var(--f-display);
font-variation-settings: "opsz" 36;
font-size: 18px;
color: var(--cream);
transition: color .2s var(--ease);
}
.doc-body__content summary::-webkit-details-marker { display: none; }
.doc-body__content summary::after {
content: "+";
font-family: var(--f-mono);
font-size: 18px;
color: var(--signal);
transition: transform .2s var(--ease);
}
.doc-body__content details[open] summary::after { content: "–"; }
.doc-body__content details[open] summary { color: var(--signal); }
.doc-body__content details p {
margin-top: 12px !important;
color: #c9c2b3;
font-size: 14.5px !important;
line-height: 1.65;
max-width: 64ch;
}
/* In-article CTA box */
.doc-cta {
margin-top: 56px;
padding: 36px 34px;
border: 1px solid var(--line-strong);
border-radius: 3px;
background:
radial-gradient(500px 200px at 90% 0%, rgba(255,91,31,.12), transparent 60%),
var(--ink-2);
position: relative;
}
.doc-cta::before,
.doc-cta::after {
content: "";
position: absolute;
width: 10px; height: 10px;
border: 1px solid var(--signal);
}
.doc-cta::before { top: -5px; left: -5px; border-right: 0; border-bottom: 0; }
.doc-cta::after { bottom: -5px; right: -5px; border-left: 0; border-top: 0; }
.doc-cta h3 {
font-family: var(--f-display);
font-variation-settings: "opsz" 72;
font-size: 28px;
color: var(--cream);
margin-bottom: 10px !important;
letter-spacing: -0.015em;
}
.doc-cta p {
font-size: 15px !important;
color: #c9c2b3;
margin-bottom: 22px !important;
max-width: 56ch;
}
.doc-cta__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* Related guides block */
.doc-related {
margin-top: 56px;
padding-top: 32px;
border-top: 1px solid var(--line);
}
.doc-related .kicker { margin-bottom: 18px; }
.doc-related__link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 0;
border-bottom: 1px dashed var(--line);
font-family: var(--f-display);
font-variation-settings: "opsz" 36;
font-size: 18px;
color: var(--cream);
transition: color .2s var(--ease), padding-left .25s var(--ease);
}
.doc-related__link span {
font-family: var(--f-mono);
color: var(--signal);
font-size: 14px;
transition: transform .2s var(--ease);
}
.doc-related__link:hover { color: var(--signal); padding-left: 6px; }
.doc-related__link:hover span { transform: translateX(4px); }
.doc-related__link:last-child { border-bottom: 0; }