/* home.css — CrescoDB marketing site. Separate surface from the dashboard,
shares the brand. Marketing can have polish/motion (unlike the dev tool). */
/* Fonts are loaded by + preconnect in each page's , NOT by @import
here. @import is the slowest possible path: the browser has to fetch this
stylesheet, parse it, THEN discover the font CSS, then fetch the font files —
three serialised round trips before a single character renders in the brand
face. With display=swap that shows as a visible flash of the fallback font on
every page load, which is exactly the kind of cheapness a marketing page
can't afford. The version starts the font fetch in parallel with this
file, and preconnect opens the TLS handshake before it's even needed. */
:root {
/* Onyx / carbon black + lime — Resend-style: near-black, subtle white-alpha
borders, lime primary accent. */
--bg:#0a0a0c; --surface:#121214; --surface2:#18181b; --surface3:#222226; --border:#ffffff14;
--txt:#f4f4f6; --txt2:#a1a1aa; --txt3:#6b6b76;
--accent:#bef264; --accent2:#34d399; --accent3:#ff5470; --accent4:#ffb547;
/* Radius: a deliberate 3-step system. The old file had TEN ad-hoc values
(18/12/11/10/9/8/7/5/50%/100px) — inconsistent radii are one of the loudest
"assembled by a machine" tells. Tighter corners also read more engineered,
which is the right register for a developer tool. */
--r:12px; /* panels, terminals, big surfaces */
--r-sm:6px; /* inputs, buttons, small surfaces */
--r-xs:3px; /* ticks, rules, tiny marks */
--maxw:1140px;
/* Type scale — fixed steps instead of clamp() everywhere, so the rhythm is
intentional rather than fluid-mush. */
--t-hero:clamp(40px,6.2vw,74px);
--t-h2:clamp(26px,3.4vw,38px);
--t-h3:20px;
}
* { box-sizing:border-box; margin:0; padding:0; }
/* overflow-x on BOTH html and body: the decorative .glow blobs are wider than
a phone screen, and body alone doesn't stop the root element from panning.
`clip` (not `hidden`) is load-bearing: `hidden` turns body into a scroll
container, which silently kills the sticky header — clip just clips.
(`hidden` stays first as the fallback for pre-2022 browsers.) */
html { scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip; }
body { background:var(--bg); color:var(--txt); font-family:'DM Sans',system-ui,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip; }
a { color:inherit; text-decoration:none; }
.mono { font-family:'DM Mono',monospace; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.accent { color:var(--accent); }
.grad { background:linear-gradient(110deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* Atmosphere. Big blurred colour blobs are the single most recognisable
"AI landing page" decoration, so they're dialled right down — kept only as a
faint wash behind the hero — and the real texture comes from GRAIN and
HAIRLINES below: cheap, physical, and unmistakably deliberate. */
.glow { position:absolute; border-radius:50%; filter:blur(160px); opacity:.07; z-index:0; pointer-events:none; }
/* Film grain over the whole canvas. An actual material rather than decoration —
inline SVG turbulence, so there's no asset to fetch. */
body::after {
content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Engineering hairlines — a faint measured grid, fading out downward. Reads as
drafting paper / a schematic, not as a gradient wash. */
.gridlines {
position:absolute; inset:0; z-index:0; pointer-events:none;
background-image:linear-gradient(90deg,#ffffff08 1px,transparent 1px),linear-gradient(#ffffff08 1px,transparent 1px);
background-size:64px 64px;
-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
}
/* header */
header { position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:rgba(8,8,13,.7); border-bottom:1px solid var(--border); }
.nav { display:flex; align-items:center; gap:28px; height:64px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; }
/* Brand mark: the real CrescoDB logo, rendered as a mask so it takes the live
--accent (so it follows a user's custom accent). The literal "C" still in the
markup is hidden via font-size:0. */
.logo { width:30px; height:30px; flex-shrink:0; background:var(--accent); color:transparent; font-size:0; -webkit-mask:url('../img/favicon.svg') center/contain no-repeat; mask:url('../img/favicon.svg') center/contain no-repeat; }
.nav-links { display:flex; align-items:center; gap:24px; margin-left:14px; font-size:14px; color:var(--txt2); }
.nav-links a:hover { color:var(--txt); }
/* Resend-style hover dropdown */
.nav-drop-wrap { position:relative; display:flex; align-items:center; }
.nav-drop-trigger { display:inline-flex; align-items:center; gap:5px; cursor:default; color:var(--txt2); transition:color .15s; }
.nav-drop-wrap:hover .nav-drop-trigger { color:var(--txt); }
.nav-drop-trigger svg { transition:transform .2s ease; }
.nav-drop-wrap:hover .nav-drop-trigger svg { transform:rotate(180deg); }
.nav-drop {
position:absolute; top:100%; left:50%; margin-top:10px; width:440px;
background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:10px;
display:grid; grid-template-columns:1fr 1fr; gap:2px;
box-shadow:0 24px 60px rgba(0,0,0,.55);
opacity:0; visibility:hidden; transform:translateX(-50%) translateY(8px);
transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:60;
}
.nav-drop::before { content:""; position:absolute; top:-12px; left:0; right:0; height:12px; } /* hover bridge over the gap */
.nav-drop-wrap:hover .nav-drop { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav-drop a { display:flex; gap:11px; padding:11px 12px; border-radius:var(--r-sm); align-items:flex-start; transition:background .15s; }
.nav-drop a:hover { background:var(--surface2); }
.nav-drop .di { color:var(--accent); flex-shrink:0; font-size:15px; line-height:1.3; }
.nav-drop .dt { font-size:13px; font-weight:600; color:var(--txt); display:block; }
.nav-drop .dd { font-size:11.5px; color:var(--txt3); margin-top:3px; display:block; line-height:1.45; }
@media (max-width:860px){ .nav-drop{display:none;} }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:14px; }
/* Mobile nav: hamburger + slide-down sheet (hidden ≥861px; see the 860 query).
The sheet is position:absolute against the sticky header (NOT fixed — the
header's backdrop-filter makes it the containing block anyway), so it hangs
right under the bar at every header height. */
.nav-burger { display:none; align-items:center; justify-content:center; width:38px; height:38px; padding:0; background:var(--surface); color:var(--txt2); border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer; flex-shrink:0; }
.nav-burger:hover { color:var(--txt); }
.nav-burger .ic-close { display:none; }
body.mnav-open .nav-burger .ic-open { display:none; }
body.mnav-open .nav-burger .ic-close { display:block; }
.msheet { display:none; position:absolute; top:100%; left:0; right:0; max-height:calc(100dvh - 64px); overflow-y:auto; background:#0a0a0f; border-bottom:1px solid var(--border); box-shadow:0 24px 60px rgba(0,0,0,.55); padding:8px 18px 20px; }
.msheet-grp { border-bottom:1px solid var(--border); }
.msheet-grp summary { list-style:none; display:flex; align-items:center; justify-content:space-between; min-height:48px; font-size:15px; font-weight:600; color:var(--txt); cursor:pointer; }
.msheet-grp summary::-webkit-details-marker { display:none; }
.msheet-grp summary svg { transition:transform .2s ease; color:var(--txt3); }
.msheet-grp[open] summary svg { transform:rotate(180deg); }
.msheet-links { padding:2px 0 12px; display:flex; flex-direction:column; }
.msheet-links a { display:flex; align-items:center; min-height:40px; padding:0 12px; font-size:14px; color:var(--txt2); border-radius:var(--r-sm); }
.msheet-links a:active, .msheet-links a:hover { background:var(--surface2); color:var(--txt); }
.msheet-link { display:flex; align-items:center; min-height:48px; font-size:15px; font-weight:600; color:var(--txt); border-bottom:1px solid var(--border); }
.msheet-auth { display:flex; gap:10px; padding-top:16px; }
.msheet-auth .btn { flex:1; justify-content:center; min-height:44px; }
.btn { display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-weight:600; font-size:14px; padding:10px 18px; border-radius:var(--r-sm); cursor:pointer; border:1px solid transparent; transition:all .18s; white-space:nowrap; }
/* No lime bloom under the button, and no lift on hover. A control that emits
coloured light is a toy affordance — it's on every generated landing page and
on none of the tools we're measured against (Linear, Resend, Supabase all use
a flat primary). The shadow that's left is neutral and does the one job a
shadow should: say the button sits above the page. Hover brightens the fill,
which is the honest signal, instead of bouncing the element. */
.btn-primary { background:var(--accent); color:#0b0b0d; box-shadow:0 1px 2px rgba(0,0,0,.4); }
.btn-primary:hover { background:#d2f96e; }
.btn-ghost { color:var(--txt2); }
.btn-ghost:hover { color:var(--txt); }
.btn-outline { border-color:var(--border); color:var(--txt); }
.btn-outline:hover { border-color:var(--accent); }
.btn-lg { padding:14px 26px; font-size:15px; border-radius:var(--r-sm); }
/* segmented currency toggle (₦ / $) */
.cur-toggle { display:inline-flex; background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-sm); padding:3px; gap:2px; }
.cur-opt { border:none; background:transparent; color:var(--txt2); font-family:inherit; font-weight:600; font-size:13px; padding:7px 18px; border-radius:var(--r-xs); cursor:pointer; transition:background .15s, color .15s; }
/* 44px touch targets on coarse pointers (the 32px pill is fine for a mouse) */
@media (pointer:coarse){ .cur-opt{ padding:11px 20px; } }
.cur-opt:hover { color:var(--txt); }
.cur-opt.active { background:var(--accent); color:#0b0b0d; }
/* hero */
/* HERO — asymmetric two-column: the pitch reads down the left, the live terminal
sits right. The old hero was a centred stack (kicker → headline → sub → buttons
→ terminal), which is the default shape of every generated landing page. An
off-centre split with the product visible immediately is both more honest and
less template-shaped. Collapses to one column on narrow screens. */
.hero { position:relative; padding:84px 0 64px; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center; position:relative; z-index:2; }
@media (max-width:900px) { .hero-grid { grid-template-columns:1fr; gap:38px; } }
/* KICKER — the replacement for the old capsule ".pill". Flat letter-spaced caps
led by a short lime rule. No enclosing capsule anywhere on this site: rounded
badge/chip capsules are the visual signature of template output, and they make
otherwise-premium work read as auto-generated. (.pill is kept only as an alias
so any stray markup degrades to the flat treatment instead of a capsule.) */
.kicker, .pill {
display:inline-flex; align-items:center; gap:11px; margin-bottom:26px;
font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:1.7px;
color:var(--txt2); background:none; border:0; border-radius:0; padding:0;
}
.kicker::before, .pill::before { content:''; width:24px; height:1px; background:var(--accent); flex:none; }
.pill .dot, .kicker .dot { width:5px; height:5px; border-radius:50%; background:var(--accent2); }
/* Weight 500, not 800. Measured 19 Aug against Linear (510), Resend (400) and
Railway (500): every credible developer-tool hero sits at 400-510. Bold-
everything is the loudest "assembled by a machine" tell there is. */
h1 { font-size:var(--t-hero); line-height:1.02; letter-spacing:-2.6px; font-weight:500; }
.sub { font-size:17.5px; color:var(--txt2); max-width:52ch; margin:22px 0 0; }
.hero-cta { display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
.terminal { margin:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); text-align:left; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.term-bar { display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--border); }
.term-bar i { width:11px; height:11px; border-radius:50%; display:inline-block; }
.term-body { padding:18px 20px; font-family:'DM Mono',monospace; font-size:13.5px; line-height:1.9; }
.term-body .c { color:var(--txt3); }
.term-body .p { color:var(--accent2); }
.term-body .o { color:var(--txt2); }
/* sections */
section { position:relative; padding:70px 0; }
/* Section headers are LEFT-ALIGNED by default. The old file centred every one of
them, so thirteen consecutive sections shared an identical centred rhythm —
that metronome symmetry is what makes a page feel machine-assembled. Left
alignment plus the ruled kicker gives the page a spine to read down.
Sections that genuinely deserve a centred moment opt in with .sec-center. */
.eyebrow { display:flex; align-items:center; gap:11px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:1.7px; color:var(--txt2); }
.eyebrow::before { content:''; width:24px; height:1px; background:var(--accent); flex:none; }
.h2 { font-size:var(--t-h2); letter-spacing:-1.2px; line-height:1.12; font-weight:800; margin-top:14px; max-width:19ch; }
.lead { color:var(--txt2); max-width:56ch; margin:16px 0 0; font-size:16.5px; }
/* Opt-in centred section (used sparingly — the closing CTA, the pricing tiers). */
.sec-center .eyebrow { justify-content:center; }
.sec-center .h2 { text-align:center; margin-left:auto; margin-right:auto; max-width:22ch; }
.sec-center .lead { text-align:center; margin-left:auto; margin-right:auto; }
/* minmax(0,1fr) — NOT plain 1fr. `1fr` means minmax(auto,1fr), so one card
holding a long unbreakable token (the cresco.channel(...) snippet) blew its
own column out to 364px while its siblings sat at 203px. Pinning the minimum
to 0 keeps the columns honestly equal and lets long code wrap instead. */
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:48px; }
.card p .mono { overflow-wrap:anywhere; }
/* Cards lift on hover in every AI-generated layout ever shipped. Instead the card
stays put and a lime rule wipes in down its left edge — motion that points at
the content rather than bouncing the box. */
.card { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:26px; transition:border-color .2s, background .2s; }
.card::before { content:''; position:absolute; left:-1px; top:14px; bottom:14px; width:2px; background:var(--accent); border-radius:var(--r-xs); transform:scaleY(0); transform-origin:top; transition:transform .22s ease; }
.card:hover { border-color:#ffffff24; background:var(--surface2); }
.card:hover::before { transform:scaleY(1); }
.card .ico { width:38px; height:38px; border-radius:var(--r-sm); background:var(--surface2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--accent); margin-bottom:16px; }
.card h3 { font-size:17px; font-weight:700; }
.card p { color:var(--txt2); font-size:14px; margin-top:8px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:48px; }
.step .n { font-family:'DM Mono',monospace; font-size:13px; color:var(--accent); border:1px solid var(--border); border-radius:var(--r-sm); width:34px; height:34px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.step h3 { font-size:17px; }
.step code { font-family:'DM Mono',monospace; font-size:13px; color:var(--accent2); }
.step p { color:var(--txt2); font-size:14px; margin-top:8px; }
/* pricing */
.tiers { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:48px; }
.tier { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:26px 22px; display:flex; flex-direction:column; }
/* The accent ring stays — "this is the one we recommend" is real information.
The 50px lime bloom under it was decoration, and a glowing pricing card is
the single most template-shaped element a pricing page can have. */
.tier.pop { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.tier .tag { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--txt3); }
.tier.pop .tag { color:var(--accent); }
.tier .price { font-size:34px; font-weight:800; letter-spacing:-1px; margin:12px 0 2px; }
.tier .price span { font-size:14px; color:var(--txt3); font-weight:500; }
.tier ul { list-style:none; margin:18px 0; flex:1; }
.tier li { font-size:13.5px; color:var(--txt2); padding:7px 0 7px 24px; position:relative; }
.tier li::before { content:"✓"; position:absolute; left:0; color:var(--accent2); font-weight:700; }
.tier .btn { width:100%; justify-content:center; }
/* CTA + footer */
.cta { text-align:center; background:linear-gradient(180deg,var(--surface),var(--surface2)); border:1px solid var(--border); border-radius:var(--r); padding:60px 30px; margin:30px 0; }
footer { border-top:1px solid var(--border); padding:40px 0; color:var(--txt3); font-size:13px; }
.foot { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot-links { display:flex; gap:22px; }
.foot-links a:hover { color:var(--txt); }
/* auth */
.auth-wrap { min-height:calc(100vh - 64px); display:flex; align-items:center; justify-content:center; padding:40px 24px; position:relative; }
.auth-card { width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:32px; position:relative; z-index:1; }
.auth-card h2 { font-size:22px; font-weight:800; letter-spacing:-.5px; }
.auth-card .muted { color:var(--txt2); font-size:14px; margin-top:6px; }
/* Password strength meter (signup). A thin rule, not a badge — see the no-pills
rule. It reads as part of the input, which is what it is describing. */
.pw-meter { margin-top:8px; display:flex; align-items:center; gap:10px; }
.pw-bar { flex:1; height:3px; background:var(--surface3); border-radius:var(--r-xs); overflow:hidden; }
.pw-bar span { display:block; height:100%; width:0; border-radius:var(--r-xs); transition:width .18s ease, background .18s ease; }
.pw-label { font-size:11px; font-weight:600; white-space:nowrap; }
.field { margin-top:18px; }
.field label { display:block; font-size:12px; color:var(--txt3); margin-bottom:6px; font-weight:600; }
.field input { width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-sm); padding:12px 14px; color:var(--txt); font-family:inherit; font-size:14px; outline:none; transition:border-color .15s; }
.field input:focus { border-color:var(--accent); }
.field textarea { width:100%; min-height:140px; resize:vertical; background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-sm); padding:12px 14px; color:var(--txt); font-family:inherit; font-size:14px; line-height:1.55; outline:none; transition:border-color .15s; }
.field textarea:focus { border-color:var(--accent); }
/* contact page (marketing chrome + a wider auth-style card) */
.contact-card { width:100%; max-width:560px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:32px; position:relative; z-index:1; }
.contact-card h1 { font-size:clamp(24px,5vw,30px); letter-spacing:-.8px; }
.contact-card .btn { width:100%; justify-content:center; margin-top:22px; min-height:44px; }
.contact-alt { text-align:center; color:var(--txt3); font-size:13px; margin-top:16px; }
.contact-alt a { color:var(--accent); }
@media (max-width:640px){ .contact-card{ padding:24px 18px; } }
.auth-card .btn { width:100%; justify-content:center; margin-top:22px; }
.auth-alt { text-align:center; font-size:13.5px; color:var(--txt3); margin-top:18px; }
.auth-alt a { color:var(--accent); }
.auth-note { font-size:12px; color:var(--txt3); background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-sm); padding:10px 12px; margin-top:18px; line-height:1.5; }
.auth-msg { font-size:13px; margin-top:14px; min-height:18px; }
.field-link { float:right; font-weight:500; color:var(--txt3); }
.field-link:hover { color:var(--accent); }
/* docs */
.docs { display:grid; grid-template-columns:200px 1fr; gap:40px; padding:50px 0; align-items:start; }
/* Mobile-only "On this page" bar injected by site.js above the docs sidebar —
in flow (never covers content), 44px touch target. Hidden on desktop. */
.docs-toc-toggle { display:none; align-items:center; gap:9px; width:100%; min-height:44px; padding:10px 14px; margin:0 0 12px; background:var(--surface); color:var(--txt); border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:600; }
.docs-toc-toggle .chev { margin-left:auto; color:var(--txt3); display:inline-flex; }
.docs-toc-toggle .chev svg { transition:transform .2s ease; }
.docs-toc-toggle.open .chev svg { transform:rotate(180deg); }
/* The sidebar is its own scroll area. With 31 links against a page that is
~20 screens tall, a list that runs past the viewport means the entries you
need are the ones you cannot see. */
.docs-side { position:sticky; top:84px; font-size:13.5px; max-height:calc(100vh - 108px); overflow-y:auto; scrollbar-width:thin; padding-right:6px; }
.docs-side a { display:block; color:var(--txt2); padding:6px 0 6px 12px; border-left:2px solid transparent; line-height:1.35; }
.docs-side a:hover { color:var(--txt); }
/* "You are here". Without it, 20 screens of continuous prose give the reader no
way to tell where they are or how much is left. Set by site.js on scroll. */
.docs-side a.active { color:var(--txt); border-left-color:var(--accent); font-weight:600; }
.docs-side .grp { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--txt3); margin:18px 0 6px; font-weight:700; }
/* Reading measure. The main column was taking the full remaining grid width —
about 1150px at a normal desktop size, or ~140 characters a line. Long
measure is the single biggest reason a docs page reads as a wall: the eye
loses its place on the return sweep. ~78ch is the comfortable ceiling. */
.docs-main { max-width:78ch; }
.docs-main h1 { font-size:32px; letter-spacing:-1px; }
/* Section boundaries. h2 previously had 34px of top margin and nothing else, so
a new section was separated from the paragraph above it by roughly the same
space as any other paragraph break — the page read as one passage because
nothing marked where one topic ended and the next began. */
.docs-main h2 {
font-size:23px; letter-spacing:-.3px; margin:0; padding:0;
scroll-margin-top:96px; /* so anchor jumps clear the sticky header */
}
.docs-main h2::before {
content:""; display:block; height:1px; background:var(--border);
margin:56px 0 26px;
}
/* The first heading needs the space but not the rule — a line directly under
the page title reads as a mistake. */
.docs-main h2:first-of-type::before { margin-top:28px; background:transparent; }
.docs-main h3 { margin-top:28px; }
.docs-main p { color:var(--txt2); margin-top:12px; line-height:1.72; }
.docs-main ul { color:var(--txt2); margin:12px 0 0 20px; line-height:1.72; }
.docs-main li { margin:7px 0; }
/* Progress across the whole page, so "how much of this is left" is answerable
at a glance rather than by dragging the scrollbar. */
.docs-progress { position:fixed; top:0; left:0; height:2px; width:0; background:var(--accent); z-index:60; transition:width .1s linear; }
/* Sections as blocks. A rule between headings was still one continuous column —
you had to read to find the seam. Each section is now a bounded surface, so
the structure is visible before any of it is read. */
.doc-sec {
position:relative; margin:22px 0 0; padding:24px 28px 30px;
background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm);
}
.doc-sec:first-of-type { margin-top:18px; }
/* The accent edge is what makes a block read as a section start rather than as
a quote or a callout. */
.doc-sec::before {
content:""; position:absolute; left:-1px; top:18px; bottom:18px; width:2px;
border-radius:2px; background:var(--border);
}
.doc-sec:hover::before { background:var(--accent); }
.doc-sec-eyebrow {
display:flex; align-items:center; gap:10px; margin-bottom:10px;
font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--txt3);
}
.doc-sec-eyebrow .n { margin-left:auto; font-family:'DM Mono',monospace; letter-spacing:0; color:var(--txt3); opacity:.7; }
/* The heading owns the top of its own block now, so the rule-and-margin that
used to separate sections would be doubling up. */
.docs-main .doc-sec h2 { margin:0; }
.docs-main .doc-sec h2::before { display:none; }
.docs-main .doc-sec > :first-child { margin-top:0; }
/* Search */
.docs-search { position:relative; margin:0 0 14px; }
.docs-search input {
width:100%; box-sizing:border-box; min-height:38px; padding:8px 34px 8px 12px;
background:var(--bg); color:var(--txt); border:1px solid var(--border);
border-radius:var(--r-sm); font-family:inherit; font-size:13px;
}
.docs-search input:focus { outline:none; border-color:var(--accent); }
.docs-search input::-webkit-search-cancel-button { filter:grayscale(1) opacity(.6); }
.docs-search kbd {
position:absolute; right:9px; top:50%; transform:translateY(-50%); pointer-events:none;
font-family:'DM Mono',monospace; font-size:11px; color:var(--txt3);
border:1px solid var(--border); border-radius:4px; padding:1px 5px; background:var(--surface);
}
.docs-search input:focus ~ kbd, .docs-search input:not(:placeholder-shown) ~ kbd { display:none; }
.docs-search-empty { margin-top:10px; font-size:12.5px; color:var(--txt3); line-height:1.5; }
/* While filtering, the sticky sidebar should not also be tracking a section the
reader can no longer see. */
body.docs-searching .docs-side a.active { border-left-color:transparent; font-weight:400; color:var(--txt2); }
.code { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:14px 16px; font-family:'DM Mono',monospace; font-size:13px; color:var(--txt); margin-top:12px; white-space:pre; overflow-x:auto; line-height:1.7; }
.code .c { color:var(--txt3); } .code .p { color:var(--accent2); }
/* oauth + auth extras */
.back-home { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--txt3); margin-bottom:18px; }
.back-home:hover { color:var(--txt); }
.oauth { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.oauth-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:11px 14px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface2); color:var(--txt); font-family:inherit; font-weight:600; font-size:13.5px; cursor:pointer; transition:all .15s; }
.oauth-btn:hover { border-color:var(--accent); background:var(--surface); }
.oauth-btn svg { width:17px; height:17px; }
.divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--txt3); font-size:12px; }
.divider::before,.divider::after { content:""; flex:1; height:1px; background:var(--border); }
/* code example panel */
.example { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:48px; text-align:left; }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.panel-h { padding:11px 16px; border-bottom:1px solid var(--border); font-family:'DM Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--txt3); display:flex; align-items:center; gap:8px; }
.panel-h .m { font-weight:700; color:var(--accent2); }
.panel-b { padding:16px 18px; font-family:'DM Mono',monospace; font-size:12.5px; line-height:1.85; overflow-x:auto; white-space:pre; }
.panel-b .k { color:var(--accent); } .panel-b .s { color:var(--accent2); } .panel-b .n { color:var(--accent4); } .panel-b .c { color:var(--txt3); }
/* faq */
.faq { max-width:760px; margin:44px auto 0; }
.qa { border-bottom:1px solid var(--border); padding:20px 4px; }
.qa h3 { font-size:16px; font-weight:700; }
.qa p { color:var(--txt2); font-size:14.5px; margin-top:8px; }
/* logo / trust strip */
/* Fact strip — sits on a hairline under the whole hero, spanning the page rather
than floating centred. Middot separators, no chips. */
.strip { display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-top:56px; padding-top:22px; border-top:1px solid var(--border); color:var(--txt3); font-size:13px; position:relative; z-index:2; }
.strip .item { display:flex; align-items:center; gap:8px; }
.strip .item + .item::before { content:'·'; margin-right:18px; color:#ffffff26; }
.strip .item b { color:var(--txt); font-weight:700; }
/* footer columns */
.foot-cols { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; padding-bottom:34px; }
.foot-cols h4 { font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--txt3); margin-bottom:12px; }
.foot-cols a { display:block; color:var(--txt2); font-size:13.5px; padding:4px 0; }
.foot-cols a:hover { color:var(--txt); }
.foot-cols .blurb { color:var(--txt3); font-size:13px; line-height:1.6; margin-top:12px; max-width:260px; }
/* ── mega-menus (Resend/Supabase-style multi-column nav dropdowns) ── */
.nav-drop.mega { width:560px; left:0; transform:translateX(0) translateY(8px); grid-template-columns:1fr 1fr; gap:10px; padding:14px; }
.nav-drop-wrap:hover .nav-drop.mega { transform:translateX(0) translateY(0); }
.mega-col { display:flex; flex-direction:column; }
.mega-h { font-size:10.5px; text-transform:uppercase; letter-spacing:.9px; color:var(--txt3); font-weight:700; padding:8px 12px 5px; }
/* ── feature deep-dive rows ── */
/* Deliberately NOT a 50/50 split — an exact half-and-half grid is the shape every
generated page reaches for. The slight lean gives the copy room to breathe and
the alternating .rev keeps the page from settling into one rhythm. */
.frow { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:52px; align-items:center; margin-top:72px; }
.frow.rev { grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); }
.frow.rev .ftext { order:2; }
@media (max-width:900px) { .frow, .frow.rev { grid-template-columns:1fr; gap:32px; } .frow.rev .ftext { order:0; } }
.ftext .eyebrow, .ftext .lead { text-align:left; margin-left:0; }
.ftext h3 { font-size:clamp(22px,3vw,30px); letter-spacing:-.6px; font-weight:800; margin-top:10px; }
.ftext > p { color:var(--txt2); margin-top:12px; font-size:15px; }
.flist { list-style:none; margin:20px 0 0; display:grid; gap:10px; }
.flist li { position:relative; padding-left:26px; color:var(--txt2); font-size:14px; }
.flist li::before { content:"✓"; position:absolute; left:0; color:var(--accent2); font-weight:700; }
.flink { display:inline-flex; align-items:center; gap:6px; margin-top:20px; color:var(--accent); font-weight:600; font-size:14px; }
.flink:hover { gap:9px; }
.fvisual { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:18px; font-family:'DM Mono',monospace; font-size:12.5px; line-height:1.85; overflow:hidden; }
.fvisual .c { color:var(--txt3); } .fvisual .p { color:var(--accent2); } .fvisual .k { color:var(--accent); } .fvisual .n { color:var(--accent4); }
/* WAS a bordered, backgrounded, 7px-radius box — a tag chip, which is precisely
what the no-pills rule names. It survived the first pass because that audit
hunted `border-radius:100px` capsules and these are small-radius boxes.
What they hold is role names and engine names: plain information, not status.
So they read as mono text with middot separators, per the rule's own guidance. */
.fvisual .chip { display:inline; font-family:'DM Mono',monospace; font-size:12px; color:var(--txt2); background:none; border:0; border-radius:0; padding:0; }
.fvisual .chip + .chip::before { content:'·'; margin:0 9px; color:#ffffff2e; }
.fvisual .row { display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid var(--border); font-family:'DM Sans',sans-serif; font-size:13px; color:var(--txt2); }
.fvisual .row:last-child { border-bottom:none; }
/* Was a tinted mint micro-badge (5px radius over rgba(52,211,153,.12)) — both a
capsule-shaped mark AND one of the decorative tinted surfaces the de-rainbow
pass was supposed to have removed. The colour carries the meaning on its own. */
.fvisual .m { font-weight:700; font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; padding:0; border-radius:0; background:none; color:var(--accent2); font-family:'DM Mono',monospace; }
/* ── audience cards (for individuals / teams / enterprise) ── */
.aud-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; text-align:left; }
.aud { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:26px; display:flex; flex-direction:column; transition:border-color .2s, background .2s; }
.aud:hover { border-color:#ffffff24; background:var(--surface2); }
/* Audience label — flat caps over a hairline, not a capsule (see .kicker). */
.aud .badge { align-self:stretch; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px; color:var(--accent); background:none; border:0; border-bottom:1px solid var(--border); border-radius:0; padding:0 0 12px; margin-bottom:4px; }
.aud h3 { font-size:19px; margin-top:14px; }
.aud > p { color:var(--txt2); font-size:14px; margin-top:8px; }
.aud ul { list-style:none; margin:16px 0 20px; display:grid; gap:9px; flex:1; }
.aud li { position:relative; padding-left:22px; color:var(--txt2); font-size:13.5px; }
.aud li::before { content:"→"; position:absolute; left:0; color:var(--accent2); }
.aud .btn { width:100%; justify-content:center; }
/* ── use-case grid ── */
.ucase { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:44px; text-align:left; }
.uc { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:18px; transition:border-color .2s; }
.uc:hover { border-color:rgba(190,242,100,.35); }
/* Drawn icon, not an emoji glyph. Emoji render as someone else's artwork at
someone else's weight — the single fastest way to make a page look assembled
rather than designed. Same 1.6 stroke as every other icon on the site. */
.uc .ico { display:flex; color:var(--accent); }
.uc h4 { font-size:15px; margin-top:10px; }
.uc p { color:var(--txt3); font-size:12.5px; margin-top:5px; }
/* ── everything-included checklist ── */
.checks { display:grid; grid-template-columns:repeat(3,1fr); gap:11px 28px; margin:40px auto 0; text-align:left; max-width:940px; }
.checks div { position:relative; padding-left:26px; color:var(--txt2); font-size:14px; }
.checks div::before { content:"✓"; position:absolute; left:0; color:var(--accent2); font-weight:700; }
/* ── compact pricing teaser ── */
.ptease { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:42px; text-align:left; }
.pt { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:22px; }
.pt.pop { border-color:var(--accent); }
.pt .tag { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--txt3); }
.pt.pop .tag { color:var(--accent); }
.pt .price { font-size:26px; font-weight:800; letter-spacing:-1px; margin:8px 0 4px; }
.pt .price span { font-size:13px; color:var(--txt3); font-weight:500; }
.pt p { color:var(--txt2); font-size:13px; }
/* 5-column footer */
.foot-cols { grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; }
@media (max-width:860px){
.grid,.steps,.tiers,.example,.foot-cols,.frow,.aud-grid,.ucase,.checks,.ptease{ grid-template-columns:1fr; }
.nav-links{ display:none; } .docs{ grid-template-columns:1fr; gap:0; }
.frow{ gap:24px; } .frow.rev .ftext{ order:0; }
/* Grid items default to min-width:auto, so one wide unbreakable child makes
the collapsed 1fr track WIDER than the phone screen — pin them to 0. */
.grid > *,.steps > *,.tiers > *,.example > *,.foot-cols > *,.frow > *,.aud-grid > *,.ucase > *,.checks > *,.ptease > *,.docs > *{ min-width:0; }
.code{ max-width:100%; }
.card,.tier,.qa,.flist li,.checks div{ overflow-wrap:break-word; }
pre{ overflow-x:auto; }
/* Nav on phones/tablets: brand + ONE primary CTA + hamburger. Sign in moves
into the sheet (single-CTA mobile-nav guidance). */
.nav-burger{ display:flex; }
.nav-right .nav-signin{ display:none; }
body.mnav-open .msheet{ display:block; }
/* Docs sidebar: 20+ links would push the content below the fold — collapse
it behind an in-flow "On this page" bar (NN/G mobile-TOC pattern). */
.docs-side{ display:none; position:static; }
.docs-side.open{ display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:4px 16px 14px; margin:0 0 18px; }
.docs-side.open .grp:first-child{ margin-top:12px; }
.docs-side a{ min-height:36px; display:flex; align-items:center; }
.docs-toc-toggle{ display:flex; }
.docs-main{ margin-top:6px; }
}
@media (max-width:640px){
.glow{ width:240px !important; height:240px !important; filter:blur(80px); }
.hero{ padding:56px 0 48px; }
section{ padding:48px 0; }
.wrap{ padding:0 18px; }
.term-body{ font-size:12px; overflow-x:auto; }
.hero-cta{ flex-wrap:wrap; justify-content:center; }
.fvisual{ overflow-x:auto; }
/* Header: brand left, actions right, ONE row at every width — compact the
buttons instead of letting them wrap under the logo. */
.nav{ gap:10px; height:56px; flex-wrap:nowrap; }
.brand{ font-size:16px; gap:8px; flex-shrink:0; }
.brand .logo{ width:26px; height:26px; }
.nav-right{ gap:8px; flex-shrink:0; }
.nav .btn{ padding:8px 12px; font-size:13px; }
.nav-burger{ width:34px; height:34px; }
.msheet{ max-height:calc(100dvh - 56px); }
.docs{ padding:26px 0 44px; }
.docs-main h1{ font-size:clamp(24px,6.5vw,32px); }
.docs-main h2{ font-size:19px; }
}
@media (max-width:360px){
/* Tightest screens keep the single primary CTA; Sign in is one tap away
on the signup page (and vice versa). */
.nav-right .btn-ghost{ display:none; }
}
/* ── Toasts (CrescoAi-style: top-right, dark card, colored status icon) ──────── */
.cr-toasts { position:fixed; top:18px; right:18px; z-index:9999; display:flex; flex-direction:column; gap:10px; max-width:360px; pointer-events:none; }
.cr-toast { pointer-events:auto; display:flex; align-items:flex-start; gap:11px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--r); padding:12px 14px; box-shadow:0 16px 44px rgba(0,0,0,.5); color:var(--txt); font-size:13.5px; line-height:1.45; cursor:pointer; transform:translateX(120%); opacity:0; transition:transform .34s cubic-bezier(.22,1,.36,1), opacity .34s; }
.cr-toast.in { transform:translateX(0); opacity:1; }
.cr-toast.out { transform:translateX(120%); opacity:0; }
.cr-toast .ic { width:18px; height:18px; border-radius:50%; flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#0b0b0d; background:var(--accent); }
.cr-toast .tx { flex:1; min-width:0; }
.cr-toast .tt { font-weight:700; display:block; margin-bottom:2px; color:var(--txt); }
.cr-toast.success { border-left-color:var(--accent2); } .cr-toast.success .ic { background:var(--accent2); }
.cr-toast.error { border-left-color:var(--accent3); } .cr-toast.error .ic { background:var(--accent3); color:#fff; }
.cr-toast.info { border-left-color:var(--accent); } .cr-toast.info .ic { background:var(--accent); }