/* ===================== Docutrain — landing page (v2, Vercel-style) =====================
Built on the Vercel-style system (DESIGN.md). Flat, editorial, Geist + Geist Mono.
Marketing cards use a crisp hairline edge on white over a slightly cooler canvas
(not soft grey blur). Hairlines also on chrome / interactive controls. One radius scale.
Subpages (why-docutrain, pricing, blog) and React marketing shells use this file. */
/* ========== Fonts (self-hosted Geist, variable) ==========
Metric-matched fallbacks so the fallback->Geist swap is
width-identical (no layout shift). woff2 are stays a transparent sticky rail; .nav-in is the
capsule, so the sticky/scrolled/hamburger JS keeps working untouched. */
/* The hero is full-bleed now, so the capsule has no adjacent container edge to
clash with and no longer needs to nest. It aligns to the page's content
column instead, sharing a left edge with the hero headline and the format
rail below it — one column for everything at the top of the page. */
.nav{position:sticky;top:0;z-index:50;background:transparent;
padding:var(--nav-block) var(--gutter);
backdrop-filter:none;border-bottom:0;pointer-events:none}
/* inner padding uses --panel-pad so the logo lands on the same vertical line as
the hero headline and the format rail. A fixed px padding here drifts off that
line as --panel-pad scales with the viewport. Right side is pulled in by the
trailing button's own optical padding. */
/* same column as .hero-in and the format rail */
.nav-in{max-width:var(--hero-maxw);margin:0 auto;height:var(--nav-cap);
padding-left:20px;padding-right:10px;
display:flex;align-items:center;gap:clamp(10px,1.5vw,26px);pointer-events:auto;
background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
border-radius:var(--r-xl);box-shadow:var(--hair), var(--sh-nav);
transition:box-shadow .2s ease,background-color .2s ease}
/* keep the logo link from shrinking when the nav links compete for width */
.nav-in>a{flex:none;display:inline-flex;align-items:center}
.nav-logo{height:26px;width:auto;flex:none}
/* link padding and gaps shrink with the viewport so the row degrades gracefully
instead of jamming against the actions cluster before the hamburger kicks in */
/* Links centre in the space between logo and actions, so the capsule stays
balanced at every width instead of pooling all the slack into one gap.
flex, NOT a 3-col grid — a grid forces equal side columns and starves the
actions cluster (tried and reverted previously). Safe against the two known
jitter sources: fonts are self-hosted with metric-matched fallbacks, and
.user-menu-mount reserves a fixed 34x34 footprint during island handoff. */
.nav-links{display:flex;align-items:center;justify-content:center;flex:1;
gap:clamp(0px,.3vw,4px);margin-left:clamp(0px,.6vw,8px);min-width:0}
.nav-link{
font-size:clamp(14px,1.05vw,15px);color:var(--v-fg);padding:8px clamp(8px,1vw,13px);border-radius:var(--r-sm);transition:.12s;
font-weight:600;letter-spacing:-.018em;white-space:nowrap;
}
.nav-link:hover{color:var(--v-fg);background:var(--v-hover)}
.nav-link.active{color:var(--v-fg);background:var(--v-hover);font-weight:600}
/* Products dropdown (home page) */
.nav-dropdown{position:relative;display:inline-flex;align-items:center}
.nav-dropdown-trigger{
display:inline-flex;align-items:center;gap:5px;border:0;background:none;font:inherit;cursor:pointer;
font-size:clamp(14px,1.05vw,15px);color:var(--v-fg);padding:8px clamp(8px,1vw,13px);border-radius:var(--r-sm);transition:.12s;
font-weight:600;letter-spacing:-.018em;white-space:nowrap;
}
.nav-dropdown-trigger:hover,.nav-dropdown.is-open .nav-dropdown-trigger{color:var(--v-fg);background:var(--v-hover)}
.nav-dropdown-chevron{width:14px;height:14px;flex:none;opacity:.85;transition:transform .15s ease}
.nav-dropdown.is-open .nav-dropdown-chevron{transform:rotate(180deg)}
.nav-dropdown-panel{
position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:368px;padding:10px 8px 8px;
background:var(--v-surface);border:none;border-radius:var(--r-md);
box-shadow:0 0 0 1px var(--v-chrome-border), 0 16px 40px -18px rgba(10,10,10,.18);
opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px);
transition:opacity .15s ease,transform .15s ease,visibility .15s;
}
.nav-dropdown.is-open .nav-dropdown-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.nav-dropdown-eyebrow{
margin:0 0 6px;padding:0 12px 8px;
font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.09em;
text-transform:uppercase;color:var(--v-fg-subtle);
border-bottom:1px solid var(--v-border);
}
.nav-dropdown-item{
display:flex;align-items:center;gap:14px;padding:12px 12px;border-radius:var(--r-sm);
color:inherit;text-decoration:none;transition:background-color .12s,color .12s;
}
.nav-dropdown-item:hover{background:var(--v-hover)}
.nav-dropdown-item:hover .nav-dropdown-title{color:var(--brand-ink)}
.nav-dropdown-item:hover .nav-dropdown-icon{background:var(--brand-tint);color:var(--brand-ink)}
.nav-dropdown-icon{
flex:none;display:flex;align-items:center;justify-content:center;width:42px;height:42px;
border:none;border-radius:var(--r-md);background:var(--v-hover);color:var(--brand);
transition:background-color .12s,color .12s;
}
.nav-dropdown-icon svg{width:19px;height:19px;display:block}
.nav-dropdown-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.nav-dropdown-title{
font-size:15.5px;font-weight:600;color:var(--v-fg);letter-spacing:-.022em;line-height:1.25;
transition:color .12s;
}
.nav-dropdown-desc{
font-size:13.5px;line-height:1.55;color:var(--v-fg-muted);letter-spacing:-.005em;max-width:26ch;
}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:clamp(5px,.55vw,8px);flex:none}
/* Match user-menu hamburger footprint (34×34) — same as ChatHeaderHamburgerTrigger */
.nav-right .btn{box-sizing:border-box;height:34px;padding:0 12px;font-size:13px;border-radius:var(--r-sm);gap:6px;line-height:1}
.nav-right .btn svg{flex:none;width:14px;height:14px;display:block;color:inherit;fill:none;stroke:currentColor}
.nav-right .btn .nav-start-icon,
.nav-right .btn svg.nav-start-icon{fill:currentColor;stroke:currentColor}
/* Nav CTAs: Sign in / Dashboard = flat chrome fill; Get Started = solid primary.
Keyed off .btn-secondary, not href — the Sign in link carries query params
(getLoginUrl), so an href selector silently misses it in the React shells. */
.nav-right .btn-secondary{
background:var(--v-chrome-bg);color:var(--v-fg);border-color:var(--v-chrome-border);
}
.nav-right .btn-secondary:hover{
background:var(--v-chrome-hover);border-color:var(--v-chrome-border-hover);color:var(--v-fg);
}
.nav-right a[href="/app/start"]{
background:var(--v-fg);color:#fafafa;border-color:var(--v-fg);
}
.nav-right a[href="/app/start"]:hover{
background:#262626;border-color:#262626;color:#fafafa;
}
.nav-right a[href="/app/start"] svg{color:inherit;fill:currentColor;stroke:currentColor}
/* Shed the widest optional items before the row jams. Order of sacrifice:
the logged-in Dashboard shortcut first, then the links divider. Both remain
reachable in the mobile menu. */
@media (max-width:1340px){
.nav-dashboard-link{display:none!important}
}
@media (max-width:1260px){
.nav-sep-links{display:none}
}
.nav-sep{width:1px;height:22px;background:var(--v-border)}
.nav-sep-links{margin:0 7px}
/* nav hamburger (mobile) — landing.js animates the 3 spans + toggles .active */
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:2px;
width:36px;height:36px;margin-left:auto;border:0;background:none;cursor:pointer;padding:0;
appearance:none;-webkit-appearance:none;box-sizing:border-box}
.nav-toggle span{display:block;height:2px;width:18px;margin:0;background:var(--v-fg);transform-origin:center;
transition:transform .2s ease-out,opacity .1s ease-out}
.nav-toggle.is-open span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-4px) rotate(-45deg)}
/* capsule lifts off the page once scrolled (landing.js adds .scrolled) */
.nav.scrolled .nav-in{background:rgba(255,255,255,.93);box-shadow:var(--hair), var(--sh-2)}
/* auth-aware visibility — preserves the head session-detection script's
no-flash behavior (html.is-authed toggles logged-in vs logged-out controls;
landing.js re-syncs after DOM ready + on cross-tab sign-out). */
[data-auth="logged-in"]{display:none!important}
html.is-authed [data-auth="logged-in"]{display:inline-flex!important}
html.is-authed [data-auth="logged-out"]{display:none!important}
.mobile-menu [data-auth]{display:none!important}
.mobile-menu-foot[data-auth]{display:none!important}
.mobile-menu-foot[data-auth="logged-out"]{display:flex!important}
html.is-authed .mobile-menu-foot[data-auth="logged-out"]{display:none!important}
html.is-authed .mobile-menu-foot[data-auth="logged-in"]{display:flex!important}
/* Reserve a fixed 34x34 footprint so the actions row width can't change while
the React user-menu island hands off (skeleton 34x34 -> innerHTML='' ->
async-mounted ChatHeaderHamburgerTrigger, also 34x34). */
.user-menu-mount{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px}
.user-menu-mount button{border-style:solid;appearance:none;-webkit-appearance:none;box-sizing:border-box}
.user-menu-skeleton{box-sizing:border-box;width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--v-chrome-border);background:var(--v-chrome-bg)}
/* mobile slide-down menu (shown by landing.js via .active) */
.mobile-menu{display:none;position:fixed;inset:var(--nav-total) 0 0 0;z-index:49;background:var(--v-bg);
flex-direction:column;border-top:1px solid var(--v-border);overflow:hidden}
.mobile-menu.active{display:flex}
.mobile-menu-body{flex:1;overflow-y:auto;padding:20px 28px 12px;-webkit-overflow-scrolling:touch}
.mobile-menu-group+.mobile-menu-group{margin-top:22px}
.mobile-menu-label{
display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;
text-transform:uppercase;color:var(--v-fg-subtle);margin:0 0 4px;padding:0 6px;
}
.mobile-menu-links{display:flex;flex-direction:column}
.mobile-menu-links a{
display:flex;align-items:center;min-height:44px;font-size:17px;font-weight:600;color:var(--v-fg-muted);
padding:0 6px;border-bottom:1px solid var(--v-border);letter-spacing:-.012em;
}
.mobile-menu-links a:hover{color:var(--v-fg)}
.mobile-menu-links-rich a{
flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;
min-height:58px;padding:10px 6px;
}
.mobile-menu-link-title{
font-size:17px;font-weight:600;letter-spacing:-.018em;line-height:1.25;color:var(--v-fg);
}
.mobile-menu-link-desc{
font-size:13.5px;font-weight:450;line-height:1.45;color:var(--v-fg-muted);letter-spacing:-.005em;
}
.mobile-menu-links-rich a:hover .mobile-menu-link-title{color:var(--brand-ink)}
.mobile-menu-foot{
flex-shrink:0;display:flex;flex-direction:column;gap:10px;padding:16px 28px calc(20px + env(safe-area-inset-bottom,0px));
border-top:1px solid var(--v-border);background:var(--v-surface);
}
.mobile-menu-signin{
display:flex!important;align-items:center;justify-content:center;gap:8px;min-height:44px;
font-size:15px;font-weight:500;color:var(--v-fg);border:1px solid var(--v-border);border-radius:var(--r-sm);
background:var(--v-surface);line-height:1;transition:background-color .12s,border-color .12s,color .12s;
}
.mobile-menu-signin:hover{color:var(--v-fg);background:var(--v-hover);border-color:var(--v-border-strong)}
/* Mobile Get Started — same solid primary as desktop nav CTA */
.mobile-menu-signin[href="/app/start"],
.mobile-menu a.m-primary{
display:flex!important;align-items:center;justify-content:center;gap:8px;min-height:48px;height:auto;
margin:0;padding:0 16px;background:var(--v-fg);color:#fafafa;border:1px solid var(--v-fg);border-radius:var(--r-sm);
font-size:15px;font-weight:500;line-height:1;
}
.mobile-menu-signin[href="/app/start"]:hover,
.mobile-menu a.m-primary:hover{background:#262626;color:#fafafa;border-color:#262626}
.mobile-menu-signin[href="/app/dashboard"]{background:var(--v-surface);border-color:var(--v-border);color:var(--v-fg)}
.mobile-menu-signin[href="/app/dashboard"]:hover{background:var(--v-hover);border-color:var(--v-border-strong);color:var(--v-fg)}
.mobile-menu-signin svg,
.mobile-menu a.m-primary svg{flex:none;width:16px;height:16px;display:block;color:inherit;fill:currentColor;stroke:currentColor}
/* ===================== HERO =====================
An inset rounded panel carrying an atmospheric wash, not a full-bleed band.
Negative top margin pulls the panel up behind the floating nav capsule, so
the capsule reads as sitting *inside* the hero; matching top padding keeps
the content clear of it. */
/* Scoped to `header.hero`, NOT bare `.hero`. This file is @imported into the
SPA bundle by marketing-layout.css, so a bare `.hero` leaks app-wide — and
the login page has its own `` (auth-page.css sets only
max-width on it). The negative top margin below then dragged that column up
under the auth header. Keep marketing page-level selectors element-qualified
or otherwise unable to collide. */
header.hero{
position:relative;overflow:hidden;
/* Full-bleed. The top of the page is not an object sitting on a canvas — it
IS the canvas, so it carries no container edge, no radius, no side inset.
This also removes the nav capsule's only adjacent edge, so the two rounded
outlines can no longer clash. Mid-page sections are still panels. */
width:100%;max-width:none;
margin:calc(-1 * var(--nav-total)) auto 0;
padding:calc(var(--nav-total) + clamp(38px,5vw,74px)) var(--gutter) clamp(48px,6vw,84px);
border-radius:0;
/* Committed palette: brand blue anchored, warm paper as counterweight.
Deliberately NOT the periwinkle→blush AI-SaaS mesh (PRODUCT.md anti-ref). */
background:
radial-gradient(112% 86% at 6% -6%, rgba(15,129,199,.16) 0%, rgba(15,129,199,0) 56%),
radial-gradient(92% 76% at 100% 4%, rgba(206,186,160,.30) 0%, rgba(206,186,160,0) 62%),
radial-gradient(76% 108% at 52% 116%, rgba(15,129,199,.09) 0%, rgba(15,129,199,0) 60%),
linear-gradient(174deg,#f2f6fa 0%,#f8f7f4 62%,#fbfaf7 100%);
/* no ring — an inset hairline would draw a line down the viewport edges */
box-shadow:none;
}
/* grain: keeps the wash from reading as a flat CSS gradient */
header.hero::after{
content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
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%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}
/* .hero-in also carries .wrap — the panel owns the horizontal inset now */
header.hero .hero-in{max-width:var(--hero-maxw);margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(36px,5vw,72px);align-items:center}
header.hero h1{font-size:clamp(42px,5.6vw,78px);line-height:1.005;font-weight:600;letter-spacing:-.038em;margin:20px 0 0;text-wrap:balance}
header.hero h1 .b{color:var(--brand)}
.hero-sub{margin:22px 0 0;font-size:clamp(16px,1.35vw,18px);line-height:1.6;color:var(--v-fg-muted);max-width:520px}
.hero-actions-block{margin-top:28px;display:flex;flex-direction:column}
.hero-cta{display:flex;align-items:center;flex-wrap:wrap;gap:11px;margin-top:0}
/* hero stage — chat mock */
.hero-stage{position:relative;z-index:1}
/* hero — chat mock: each bubble wipes in once (no looping skeleton shimmer) */
.diagram{position:relative;z-index:2;border:none;border-radius:var(--r-xl);background:var(--v-surface);overflow:hidden;
box-shadow:var(--hair), var(--sh-3)}
/* Stay clipped until the wipe runs — avoids a flash when .is-loaded is added */
header.hero .diagram .chat-msg{clip-path:inset(0 100% 0 0)}
header.hero .diagram .chat-msg.user{clip-path:inset(0 0 0 100%)}
header.hero .diagram.is-loaded .chat-msg{
animation:hero-bubble-wipe-ltr .78s cubic-bezier(.16,1,.3,1) both;will-change:clip-path
}
header.hero .diagram.is-loaded .chat-msg.user{animation-name:hero-bubble-wipe-rtl}
header.hero .diagram.is-loaded .chat-msg:nth-child(1){animation-delay:.06s}
header.hero .diagram.is-loaded .chat-msg:nth-child(2){animation-delay:.34s}
header.hero .diagram.is-loaded .chat-msg:nth-child(3){animation-delay:.62s}
@keyframes hero-bubble-wipe-ltr{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes hero-bubble-wipe-rtl{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
.diagram-head{display:flex;align-items:center;gap:7px;padding:9px 14px;border-bottom:1px solid var(--v-border);background:var(--v-surface-muted)}
.diagram-head .d{width:9px;height:9px;border-radius:999px;background:var(--v-border-strong)}
.diagram-head .doc{margin-left:8px;display:inline-flex;align-items:center;gap:5px;min-width:0}
/* Bare glyph, no chip — like a real browser favicon. A filled tile here is
background-on-background against the muted title bar and reads muddy. */
.diagram-head .doc .ico{display:flex;align-items:center;justify-content:center;flex:none;color:var(--brand-ink);line-height:0}
.diagram-head .doc .ico svg{width:15px;height:15px;display:block}
.diagram-head .doc .lbl{font-size:12px;font-weight:600;letter-spacing:-.012em;color:var(--v-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.diagram-head .doc .sub{font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--v-fg-subtle);white-space:nowrap}
.diagram-head .live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--v-delta-up)}
.diagram-head .live i{
position:relative;display:inline-block;width:7px;height:7px;border-radius:999px;background:var(--v-delta-up);flex:none;
}
.diagram-head .live i::before{
content:'';position:absolute;inset:-4px;border-radius:999px;background:var(--v-delta-up);opacity:.35;
animation:hero-live-pulse 2s ease-out infinite;
}
@keyframes hero-live-pulse{0%{transform:scale(.55);opacity:.45}70%,100%{transform:scale(1.65);opacity:0}}
@media (prefers-reduced-motion:reduce){.diagram-head .live i::before{animation:none;opacity:.25;transform:none}}
/* message thread */
.chat-thread{padding:18px 16px 6px;display:flex;flex-direction:column;gap:13px}
.chat-msg{display:flex;gap:9px;align-items:flex-start;max-width:86%}
.chat-msg.bot{align-self:flex-start}
.chat-msg.user{align-self:flex-end;flex-direction:row-reverse}
.chat-av{width:26px;height:26px;border-radius:var(--r-pill);flex:none;background:var(--brand-tint) url('/docutrain-icon.png') center/68% no-repeat;border:none}
.chat-bubble{border:none;border-radius:var(--r-md);padding:11px 12px;display:flex;flex-direction:column;gap:7px;background:var(--v-hover);min-width:120px}
.chat-bubble.b-bot{border-top-left-radius:var(--r-xs)}
.chat-bubble.b-user{background:var(--brand);border-color:var(--brand);border-top-right-radius:var(--r-xs);min-width:0}
/* skeleton lines — static placeholders revealed by the bubble wipe */
.sk-l{height:7px;border-radius:var(--r-xs);background:#e8e8e8}
.chat-bubble.b-user .sk-l{background:rgba(255,255,255,.42)}
@media (prefers-reduced-motion:reduce){
.hero .diagram .chat-msg{
animation:none!important;clip-path:none!important;will-change:auto
}
}
.chat-src{display:inline-flex;align-items:center;gap:6px;margin-top:1px;font-family:var(--mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-ink)}
.chat-src i{width:5px;height:5px;border-radius:999px;background:var(--brand);flex:none}
/* composer */
.chat-composer{margin:8px 14px 0;display:flex;align-items:center;gap:10px;border:1px solid var(--v-border);border-radius:var(--r-lg);padding:8px 8px 8px 12px;background:var(--v-surface)}
.chat-composer .ph{flex:1;display:inline-flex;align-items:center;min-width:0;min-height:18px;font-size:13px;color:var(--v-fg-subtle)}
.chat-composer .ph-typed{color:var(--v-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-composer .ph.is-empty .ph-typed{color:var(--v-fg-subtle)}
.chat-composer .ph::after{
content:'';display:inline-block;width:2px;height:14px;margin-left:2px;background:var(--brand);border-radius:1px;
opacity:0;transform:translateY(.5px);flex:none;
}
header.hero .diagram.is-loaded .chat-composer .ph::after{
animation:hero-composer-cursor 1.05s step-end infinite;
}
@keyframes hero-composer-cursor{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
.hero .diagram.is-loaded .chat-composer .ph::after{animation:none;opacity:.85}
}
.chat-composer .send{width:30px;height:30px;border-radius:var(--r-sm);background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
/* composer control chips */
.chat-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px 15px}
.cc-grp{display:flex;align-items:center;gap:7px;min-width:0}
.cc-lbl{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--v-fg-subtle);flex:none}
.cc-seg{display:inline-flex;border:none;border-radius:var(--r-sm);overflow:hidden;flex:none;background:var(--v-hover)}
.cc-seg span{padding:4px 9px;font-family:var(--mono);font-size:10px;font-weight:500;color:var(--v-fg-muted);border-right:1px solid rgba(10,10,10,.06);white-space:nowrap}
.cc-seg span:last-child{border-right:none}
.cc-seg span.on{background:var(--brand-tint);color:var(--brand-ink)}
@media (max-width:600px){
.chat-controls{flex-direction:row;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 14px;flex-wrap:nowrap}
.cc-grp{justify-content:flex-start;width:auto;min-width:0}
.cc-grp:last-child{display:none}
.cc-seg span{padding:4px 8px;font-size:9.5px}
.chat-composer{margin-left:12px;margin-right:12px}
.chat-thread{padding-left:12px;padding-right:12px}
.diagram-head .doc{margin-left:4px;gap:4px}
.diagram-head .doc .ico svg{width:14px;height:14px}
.diagram-head .doc .lbl{font-size:11px}
.diagram-head .doc .sub{font-size:8px}
}
/* ---- format strip ----
Now a floating rail that overlaps the hero panel's bottom edge, tying the two
together instead of stacking another bordered band under it. */
.formats-section{position:relative;z-index:4;margin-top:calc(-1 * clamp(24px,3vw,38px));padding-bottom:var(--pad-section-tight)}
/* same content column as the nav capsule and the hero text */
.formats-section .formats-in{
width:calc(100% - var(--gutter) * 2);
max-width:var(--hero-maxw);
padding-left:0;padding-right:0;
}
.formats{
display:flex;align-items:stretch;
border:none;border-radius:var(--r-xl);background:rgba(255,255,255,.94);
backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
box-shadow:var(--hair), var(--sh-2);
padding:0 clamp(8px,1.4vw,18px);border-top:0;border-bottom:0;overflow:hidden;
}
.formats .lead{
display:flex;align-items:center;flex-shrink:0;margin:0;
padding:14px 28px 14px 0;
font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--v-fg-muted);
white-space:nowrap;position:relative;
}
.formats .lead::after{
content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
width:1px;height:22px;background:var(--v-border);
}
.hero-formats-row{
list-style:none;margin:0;padding:0;flex:1;display:flex;align-items:stretch;min-width:0;
}
.hero-format{
flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;
min-width:0;padding:14px 16px;border:none;border-radius:0;
background:transparent;transition:background-color .12s;position:relative;
}
.hero-format:not(:last-child)::after{
content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
width:1px;height:22px;background:var(--v-border);
}
.hero-format:hover{background:var(--v-hover)}
.hero-format-icon{color:var(--v-fg-subtle);line-height:0;flex-shrink:0}
.hero-format-icon svg{width:auto;height:22px;display:block}
.hero-format-name{
font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--v-fg);white-space:nowrap;
}
.hero-format-sub{display:none}
/* sparing brand-accent highlights inside the otherwise-neutral glyphs */
.hero-format-icon-peak{fill:var(--brand);stroke:none}
.hero-format-icon-play{fill:var(--brand);stroke:none}
.hero-format-icon-stamp{stroke:var(--brand)}
.hero-format-icon-stampchar{fill:var(--brand);stroke:none;font-family:var(--mono);font-size:5px;font-weight:700;letter-spacing:.02em}
@media (max-width:920px){
.formats .lead{font-size:9px;padding-right:20px}
.hero-format{gap:5px;padding:14px 10px}
.hero-format-name{font-size:10px}
.hero-format-icon svg{height:20px}
}
@media (max-width:760px){
.formats{flex-direction:column}
.formats .lead{
justify-content:center;padding:12px 16px;
}
.formats .lead::after{
right:auto;left:50%;top:auto;bottom:0;transform:translateX(-50%);
width:48px;height:1px;
}
.hero-formats-row{flex-wrap:wrap}
.hero-format{
flex:1 1 33.333%;padding:14px 8px;
}
.hero-format::after{display:none}
.hero-format:not(:nth-child(3n))::after{
display:block;right:0;top:50%;bottom:auto;left:auto;transform:translateY(-50%);
width:1px;height:22px;
}
.hero-format:nth-child(3n+4)::before{
content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);
width:48px;height:1px;background:var(--v-border);
}
}
@media (max-width:440px){
.hero-format{flex:1 1 50%}
.hero-format:not(:nth-child(3n))::after{display:none}
.hero-format:not(:nth-child(2n))::after{
display:block;right:0;top:50%;bottom:auto;left:auto;transform:translateY(-50%);
width:1px;height:22px;
}
.hero-format:nth-child(3n+4)::before{display:none}
.hero-format:nth-child(2n+3)::before{
content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);
width:48px;height:1px;background:var(--v-border);
}
}
.fchip .d{width:6px;height:6px;border-radius:2px}
/* ===================== SECTION scaffolding =====================
Rhythm comes from fluid padding and alternating white/tinted panels, not from
a hairline under every band. */
.section{padding:var(--pad-section) 0;border-bottom:0;position:relative}
.section-tight{padding:var(--pad-section-tight) 0}
/* tinted panel section — breaks the endless white run */
.section-panel{
width:calc(100% - var(--gutter) * 2);max-width:var(--panel-w);
margin-inline:auto;border-radius:var(--r-panel);
padding:var(--pad-section) var(--panel-pad);
background:
radial-gradient(88% 70% at 92% 0%, rgba(15,129,199,.075) 0%, rgba(15,129,199,0) 58%),
linear-gradient(178deg,#f4f7fa 0%,#f7f6f3 100%);
box-shadow:inset 0 0 0 1px rgba(16,38,56,.05);
}
.section-panel > .wrap{padding-left:0;padding-right:0}
/* ink panel — same object, inverted. Used once, for weight. */
.section-ink{
background:radial-gradient(80% 70% at 84% 0%, rgba(15,129,199,.20) 0%, rgba(15,129,199,0) 60%),
linear-gradient(172deg,#101820 0%,#0a0a0a 70%);
box-shadow:none;color:#ededed;
}
.section-ink .section-head h2{color:#fafafa}
.section-ink .section-head p{color:#a8a8a8}
.section-head{max-width:700px}
.section-head.center{margin:0 auto;text-align:center}
.section-head h2{font-size:clamp(30px,3.7vw,47px);line-height:1.07;font-weight:600;letter-spacing:-.032em;margin:16px 0 0;text-wrap:balance}
.section-head p{margin:17px 0 0;font-size:clamp(15.5px,1.25vw,17px);line-height:1.62;color:var(--v-fg-muted)}
.section-head.center p{margin-left:auto;margin-right:auto;max-width:60ch}
/* ---- features bento ---- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px);margin-top:clamp(36px,4.5vw,60px)}
.bento-cell{position:relative;display:flex;flex-direction:column;border:none;border-radius:var(--r-lg);
background:var(--v-surface);padding:28px 28px 26px;min-height:172px;box-shadow:var(--hair), var(--sh-1);
transition:box-shadow .18s ease,transform .18s ease}
.bento-cell:hover{background:var(--v-surface);box-shadow:var(--hair), var(--sh-2);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.bento-cell:hover{transform:none}}
.bento-cell.span2{grid-column:span 2}
.bento-cell.span3{grid-column:span 3}
.bento-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:auto}
.bento-ico{color:var(--brand-ink);display:inline-flex;line-height:0}
.bento-ico svg{width:28px;height:28px;display:block;flex:none;stroke-width:1.35}
.bento-idx{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--v-fg-subtle);font-variant-numeric:tabular-nums}
.bento h3{font-size:16px;font-weight:600;letter-spacing:-.012em;margin:20px 0 0}
.bento p{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--v-fg-muted);max-width:460px}
/* grounded mini-visual */
.bento-ground{display:flex;flex-wrap:wrap;gap:9px 20px;margin-top:18px}
.gchip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--v-fg)}
.gchip svg{flex:none;color:var(--v-delta-up)}
/* single avatar showcase tile */
.bento-cell.bento-avatar-cell{display:grid;grid-template-rows:auto 1fr auto;min-height:240px}
.bento-cell.bento-avatar-cell .bento-top{margin-bottom:0}
.bento-avatar{display:flex;align-items:center;justify-content:center;padding:10px 0}
.bento-avatar img{width:150px;height:150px;border-radius:50%;object-fit:cover;border:none;
background:var(--v-surface);box-shadow:var(--elev)}
.bento-cell.bento-avatar-cell .bento-foot{margin-top:20px}
.bento-cell.bento-avatar-cell h3{margin-top:0}
/* branding avatars inline */
.bento-cell.branding{padding:16px;justify-content:center}
/* Hollywood Squares avatar grid */
.hsq{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hsq-tile{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 10px 14px;border-radius:var(--r-md);
border:none;background:var(--v-hover);text-align:center;transition:background-color .12s}
.hsq-tile:hover{background:#ececec}
.hsq-tile img{width:56px;height:56px;border-radius:var(--r-lg);object-fit:cover;border:none;background:var(--v-surface)}
.hsq-name{font-size:12.5px;font-weight:600;color:var(--v-fg);line-height:1.2;letter-spacing:-.01em}
.hsq-name small{display:block;font-family:var(--mono);font-size:9px;font-weight:400;color:var(--v-fg-subtle);margin-top:3px;letter-spacing:.02em}
.hsq-more{flex-direction:row;justify-content:center;gap:9px;background:var(--brand-tint);border:none;color:var(--brand-ink);grid-column:1 / -1}
.hsq-more .t{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.35}
@media (max-width:920px){
.bento{grid-template-columns:1fr 1fr}
.bento-cell.span2,.bento-cell.span3{grid-column:span 2}
.bento-cell.branding{flex-direction:column;align-items:stretch;gap:22px}
.bento-cell.branding .bb-text{flex:none}
}
@media (max-width:560px){
.bento{grid-template-columns:1fr}
.bento-cell.span2,.bento-cell.span3{grid-column:span 1}
.hsq{grid-template-columns:repeat(3,1fr)}
}
/* ---- how it works ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.step{position:relative;border:none;border-radius:var(--r-lg);background:var(--v-surface);padding:26px 24px;box-shadow:var(--elev)}
.step-n{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--v-fg-subtle);letter-spacing:.08em}
.step-ico{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--r-sm);
border:none;background:var(--brand-tint);color:var(--brand-ink);margin:14px 0 16px}
.step h3{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:0}
.step p{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--v-fg-muted)}
.step-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;font-weight:500;color:var(--brand-ink)}
/* ---- split (media showcase / generic 2-col) ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:8px}
.split.rev{align-items:start}
.split.rev .split-text{order:2}
.split-text h2{font-size:30px;line-height:1.12;font-weight:600;letter-spacing:-.026em;margin:13px 0 0;text-wrap:balance}
.split-text p{margin:15px 0 0;font-size:15.5px;line-height:1.62;color:var(--v-fg-muted);max-width:460px}
.checklist{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.checklist li{display:flex;align-items:flex-start;gap:11px;font-size:14px;color:var(--v-fg)}
.checklist li svg{flex:none;color:var(--brand);margin-top:1px}
.checklist li b{font-weight:600}
.checklist li span{color:var(--v-fg-muted)}
/* media showcase visual — assistant response with lightbox + video */
.media-card{border:none;border-radius:var(--r-lg);background:var(--v-surface);overflow:hidden;box-shadow:var(--elev)}
.media-head{display:flex;align-items:center;gap:9px;padding:12px 15px;border-bottom:1px solid var(--v-border);background:var(--v-surface-muted)}
.media-head .av{width:24px;height:24px;border-radius:var(--r-pill);flex:none;background:var(--brand-tint) url('/docutrain-icon.png') center/68% no-repeat;border:none}
.media-head .nm{font-size:12.5px;font-weight:600}
.media-head .st{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--v-fg-subtle);display:flex;align-items:center;gap:5px}
.media-head .st .dot{width:6px;height:6px;border-radius:999px;background:var(--v-delta-up)}
.media-body{padding:16px 16px 18px}
.media-q{display:inline-block;font-size:12.5px;color:var(--v-fg-muted);background:var(--v-hover);border:none;
border-radius:var(--r-sm);padding:7px 11px;margin-bottom:14px}
.media-line{height:8px;border-radius:3px;background:var(--v-hover);margin-bottom:8px}
.media-attach{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.attach{position:relative;border:none;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:16/10;background:var(--v-hover)}
.attach .mock{display:block;width:100%;height:100%}
.attach .tag{position:absolute;top:7px;left:7px;z-index:1;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.05em;
text-transform:uppercase;background:rgba(255,255,255,.94);border:none;border-radius:var(--r-xs);padding:2px 6px;color:var(--v-fg-muted)}
.attach .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;width:38px;height:38px;border-radius:999px;
background:rgba(255,255,255,.95);border:none;display:flex;align-items:center;justify-content:center;color:var(--v-fg);
box-shadow:var(--elev)}
.attach .dur{position:absolute;bottom:7px;right:7px;z-index:1;font-family:var(--mono);font-size:9px;background:var(--v-fg);color:#fff;border-radius:3px;padding:2px 5px}
/* ---- access / security row ---- */
.access-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.access{border:none;border-radius:var(--r-lg);background:var(--v-surface);padding:26px 24px;box-shadow:var(--elev)}
.access-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.access-ico{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r-sm);border:none;background:var(--v-hover);color:var(--v-fg)}
.access h3{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0}
.access p{margin:7px 0 0;font-size:13px;line-height:1.58;color:var(--v-fg-muted)}
.v-chip{display:inline-flex;align-items:center;gap:6px;height:23px;padding:0 9px;border:none;
border-radius:var(--r-pill);font-family:var(--mono);font-size:10.5px;font-weight:500;background:var(--v-hover)}
.v-chip .cdot{width:6px;height:6px;border-radius:999px}
/* ---- collections + branding (two halves) ---- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}
.panel{border:none;border-radius:var(--r-lg);background:var(--v-surface);padding:28px 26px;box-shadow:var(--elev)}
.panel h3{font-size:17px;font-weight:600;letter-spacing:-.015em;margin:14px 0 0}
.panel p{margin:9px 0 0;font-size:14px;line-height:1.6;color:var(--v-fg-muted)}
.panel-ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-sm);border:none;background:var(--v-hover);color:var(--v-fg)}
/* collection stack visual */
.coll-vis{margin-top:20px;display:flex;flex-direction:column;gap:8px}
.coll-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;border-radius:var(--r-sm);background:var(--v-hover)}
.coll-item .ci{width:26px;height:26px;border-radius:var(--r-sm);border:none;background:var(--v-surface);display:flex;align-items:center;justify-content:center;color:var(--v-fg-subtle);flex:none}
.coll-item .ct{font-size:13px;font-weight:500}
.coll-item .cm{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--v-fg-subtle)}
/* avatars visual */
.av-row{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}
.av-card{display:flex;align-items:center;gap:13px;padding:10px 18px 10px 10px;border:none;border-radius:var(--r-lg);background:var(--v-hover)}
.av-card .av{width:60px;height:60px;border-radius:var(--r-md);flex:none;border:none;object-fit:cover;background:var(--v-surface)}
.av-card .an{font-size:14px;font-weight:600;line-height:1.15;letter-spacing:-.01em}
.av-card .ad{font-family:var(--mono);font-size:10px;color:var(--v-fg-subtle);margin-top:2px}
/* company branding visual */
.brand-vis{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.brand-field{display:flex;align-items:center;gap:12px;padding:11px 14px;border:none;border-radius:var(--r-md);background:var(--v-hover)}
.brand-field .bf-label{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--v-fg-subtle);flex:none;width:78px}
.brand-field .bf-logo{height:17px;width:auto}
.brand-field .bf-val{font-size:13.5px;font-weight:600;color:var(--v-fg);display:inline-flex;align-items:center;white-space:nowrap}
.brand-field .bf-val .caret{display:inline-block;width:1.5px;height:15px;background:var(--brand);margin-left:2px;animation:bf-blink 1.1s step-end infinite}
@keyframes bf-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.brand-field .bf-val .caret{animation:none}}
.brand-swatches{display:flex;align-items:center;gap:11px}
.brand-swatches .sws{display:flex;gap:9px;margin-left:auto}
.brand-sw{width:24px;height:24px;border-radius:var(--r-sm);border:none;box-shadow:inset 0 0 0 1px rgba(10,10,10,.08)}
.brand-sw.sel{outline:2px solid var(--brand);outline-offset:2px}
/* ---- safety / compliance — live moderation console ---- */
.guard-console{margin-top:48px;border:none;border-radius:var(--r-lg);background:var(--v-surface);overflow:hidden;box-shadow:var(--elev)}
.guard-head{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--v-border);background:var(--v-surface-muted)}
.guard-head .ttl{font-size:13px;font-weight:600;letter-spacing:-.01em}
.guard-head .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.guard-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--v-delta-up)}
.guard-live .pulse{width:7px;height:7px;border-radius:999px;background:var(--v-delta-up);position:relative}
.guard-live .pulse::after{content:"";position:absolute;inset:-3px;border-radius:999px;border:1px solid var(--v-delta-up);opacity:.6;animation:guard-ping 1.8s ease-out infinite}
@keyframes guard-ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.8);opacity:0}}
@media (prefers-reduced-motion:reduce){.guard-live .pulse::after{animation:none;opacity:.4}}
.guard-head .win{font-family:var(--mono);font-size:11px;color:var(--v-fg-subtle)}
.guard-grid{display:grid;grid-template-columns:236px 1fr}
.guard-legend{border-right:1px solid var(--v-border);padding:16px 18px;background:var(--v-surface-muted)}
.guard-legend .lh{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--v-fg-subtle);margin-bottom:14px}
.guard-det{display:flex;align-items:center;gap:10px;padding:9px 0}
.guard-det + .guard-det{border-top:1px solid var(--v-border)}
.guard-det .dt{width:8px;height:8px;border-radius:999px;flex:none}
.guard-det .nm{font-size:12.5px;font-weight:500;color:var(--v-fg)}
.guard-det .ct{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--v-fg-subtle)}
.guard-det .ct b{color:var(--v-fg);font-weight:600}
.guard-feed{min-width:0}
.guard-row{display:grid;grid-template-columns:18px 132px 1fr auto;gap:14px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--v-border);transition:background-color .12s}
.guard-row:last-child{border-bottom:none}
.guard-row:hover{background:var(--v-bg)}
.guard-row .sev{width:8px;height:8px;border-radius:999px;justify-self:center}
.guard-type{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--r-pill);border:none;
background:var(--v-hover);font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.guard-msg{min-width:0;font-size:13px;color:var(--v-fg-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guard-msg .q{color:var(--v-fg-subtle);font-style:italic}
.guard-end{display:flex;align-items:center;gap:14px;white-space:nowrap}
.guard-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500}
.guard-status .sd{width:6px;height:6px;border-radius:999px}
.guard-time{font-family:var(--mono);font-size:11px;color:var(--v-fg-subtle);min-width:48px;text-align:right}
/* severity / status colors */
.c-danger{color:var(--v-danger)}.bg-danger{background:var(--v-danger)}
.c-warn{color:#b7791f}.bg-warn{background:var(--v-warn)}
.c-subtle{color:var(--v-fg-subtle)}.bg-subtle{background:var(--v-fg-subtle)}
.c-brand{color:var(--brand-ink)}.bg-brand{background:var(--brand)}
.c-ok{color:var(--v-delta-up)}.bg-ok{background:var(--v-delta-up)}
.guard-type.t-danger{color:var(--v-danger);background:#fef2f2;border-color:transparent}
.guard-type.t-warn{color:#b7791f;background:#fffbeb;border-color:transparent}
.guard-type.t-subtle{color:var(--v-fg-subtle)}
.guard-type.t-brand{color:var(--brand-ink);background:var(--brand-tint);border-color:transparent}
.guard-foot{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--v-border);background:var(--v-surface-muted)}
.guard-foot .note{font-size:12.5px;color:var(--v-fg-muted)}
.guard-foot .note b{color:var(--v-fg);font-weight:600}
.guard-foot .all{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--brand-ink)}
@media (max-width:780px){
.guard-grid{grid-template-columns:1fr}
.guard-legend{border-right:none;border-bottom:1px solid var(--v-border)}
.guard-row{grid-template-columns:14px 1fr;row-gap:8px}
.guard-row .guard-type{grid-column:2}.guard-end{grid-column:2}
}
/* ---- embed widget ---- */
.embed-card{border:none;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);position:relative;box-shadow:var(--elev)}
.embed-head{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid #2a2a2a}
.embed-head .d{width:9px;height:9px;border-radius:999px;background:#3a3a3a}
.embed-head .t{margin-left:8px;font-family:var(--mono);font-size:11px;color:#8a8a8a}
.embed-code{padding:18px 20px;font-family:var(--mono);font-size:12.5px;line-height:1.85;color:#d4d4d4;overflow-x:auto}
.embed-code .tag{color:#7ec5f0}.embed-code .at{color:#c8a0f0}.embed-code .vl{color:#9fe0a8}.embed-code .cm{color:#6a6a6a}
/* floating widget mock */
.widget-mock{position:relative;border:none;border-radius:var(--r-lg);background:var(--v-hover);
min-height:220px;overflow:hidden;display:flex;align-items:flex-end;justify-content:flex-end;padding:18px}
.widget-mock .sitebar{position:absolute;top:0;left:0;right:0;height:38px;border-bottom:1px solid var(--v-border);background:var(--v-surface);display:flex;align-items:center;gap:8px;padding:0 14px}
.widget-mock .sb-dot{width:8px;height:8px;border-radius:999px;background:var(--v-border-strong)}
.widget-mock .sb-line{height:6px;border-radius:3px;background:var(--v-hover)}
.widget-bubble{width:54px;height:54px;border-radius:999px;background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff;
box-shadow:0 8px 24px -8px rgba(15,129,199,.5)}
.widget-pop{position:absolute;right:18px;bottom:84px;width:210px;border:none;border-radius:var(--r-md);background:var(--v-surface);overflow:hidden;box-shadow:var(--elev)}
.widget-pop .wp-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--v-border)}
.widget-pop .wp-av{width:22px;height:22px;border-radius:999px;background:linear-gradient(135deg,var(--brand),#0a6aa6)}
.widget-pop .wp-nm{font-size:11.5px;font-weight:600}
.widget-pop .wp-body{padding:12px}
.widget-pop .wp-msg{height:7px;border-radius:3px;background:var(--v-hover);margin-bottom:7px}
/* ---- analytics / intelligence ---- */
.intel-card{border:none;border-radius:var(--r-lg);background:var(--v-surface);overflow:hidden;box-shadow:var(--elev)}
.intel-head{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--v-border);background:var(--v-surface-muted)}
.intel-head .ttl{font-size:13px;font-weight:600}
.intel-body{padding:6px 0}
.theme-row{display:grid;grid-template-columns:1fr 120px 56px;gap:16px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--v-border)}
.theme-row:last-child{border-bottom:none}
.theme-name{font-size:13.5px;font-weight:500}
.theme-name small{display:block;font-family:var(--mono);font-size:10px;color:var(--v-fg-subtle);font-weight:400;margin-top:2px}
.theme-bar{height:6px;border-radius:3px;background:var(--v-hover);overflow:hidden}
.theme-bar i{display:block;height:100%;border-radius:3px;background:var(--brand)}
.theme-pct{font-family:var(--mono);font-size:12px;color:var(--v-fg);text-align:right}
/* ---- final CTA — inset ink panel, the page's heaviest object ---- */
.cta-band{
position:relative;overflow:hidden;
width:calc(100% - var(--gutter) * 2);max-width:var(--panel-w);
margin:0 auto var(--pad-section-tight);border-radius:var(--r-panel);border-bottom:0;color:#fafafa;
background:
radial-gradient(72% 88% at 50% -12%, rgba(15,129,199,.30) 0%, rgba(15,129,199,0) 62%),
radial-gradient(60% 70% at 92% 108%, rgba(206,186,160,.14) 0%, rgba(206,186,160,0) 60%),
linear-gradient(168deg,#111a22 0%,#0a0a0a 68%);
}
.cta-band::after{
content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;
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%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.cta-in{position:relative;z-index:1;padding:clamp(64px,8vw,112px) var(--panel-pad);text-align:center}
.cta-in .eyebrow{background:rgba(255,255,255,.07);color:#9fd4f5;box-shadow:0 0 0 1px rgba(255,255,255,.13)}
.cta-in .eyebrow::before{background:#7ec5f0}
.cta-in h2{font-size:clamp(32px,4.4vw,54px);line-height:1.04;font-weight:600;letter-spacing:-.034em;margin:18px auto 0;max-width:660px;text-wrap:balance}
.cta-in p{margin:18px auto 0;max-width:480px;font-size:clamp(15.5px,1.3vw,17px);line-height:1.6;color:#a8a8a8}
.cta-actions{display:flex;align-items:center;justify-content:center;gap:11px;margin-top:30px}
.btn-on-dark{background:#fafafa;color:#0a0a0a;border-color:#fafafa;box-shadow:0 10px 30px -12px rgba(0,0,0,.7)}
.btn-on-dark:hover{background:#fff;border-color:#fff;box-shadow:0 16px 40px -14px rgba(0,0,0,.8);transform:translateY(-1px)}
.btn-dark-ghost{background:rgba(255,255,255,.05);color:#fafafa;border-color:rgba(255,255,255,.16);box-shadow:none}
.btn-dark-ghost:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.28);transform:translateY(-1px)}
.cta-note{margin-top:20px;font-family:var(--mono);font-size:11px;color:#7a7a7a}
/* ---- footer ---- */
.footer{background:var(--v-bg);padding:56px 0 40px}
.footer-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:36px}
.footer-brand .logo{height:24px;width:auto;margin-bottom:14px}
.footer-brand p{font-size:13px;line-height:1.6;color:var(--v-fg-muted);max-width:240px;margin:0}
.footer-col h4{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--v-fg-subtle);margin:0 0 14px}
.footer-col a{display:block;font-size:13.5px;color:var(--v-fg-muted);padding:5px 0;transition:.12s}
.footer-col a:hover{color:var(--v-fg)}
.footer-bottom{max-width:var(--maxw);margin:40px auto 0;padding:22px 28px 0;border-top:1px solid var(--v-border);
display:flex;align-items:center;justify-content:space-between;gap:16px}
.footer-bottom .c{font-family:var(--mono);font-size:11px;color:var(--v-fg-subtle)}
/* ---- responsive ---- */
@media (max-width:920px){
.hero-in,.split,.footer-in{grid-template-columns:1fr;gap:36px}
.steps,.access-grid,.duo{grid-template-columns:1fr}
/* hero keeps its panel padding (clamp handles the scale-down); only the
nav-clearing top inset needs to stay in sync. */
.split.rev .split-text{order:0}
.footer-in{grid-template-columns:1fr 1fr}
}
/* nav: collapse to hamburger + mobile menu once the full link set won't fit.
Raised from 1080px — the capsule's padding and rounding cost horizontal room,
so the row started jamming while still nominally "fitting". */
@media (max-width:1200px){
.nav-links,.nav-right{display:none}
.nav-toggle{display:flex;margin-right:2px}
.nav-in{gap:16px}
}
@media (max-width:600px){
.wrap,.nav-in,.footer-bottom{padding-left:20px;padding-right:20px}
.mobile-menu-body,.mobile-menu-foot{padding-left:20px;padding-right:20px}
.footer-in{grid-template-columns:1fr 1fr}
.footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}
.cta-actions{flex-direction:column;align-items:stretch;width:100%;max-width:360px;margin-left:auto;margin-right:auto}
.cta-actions .btn{width:100%}
.hero-sub{max-width:none}
.hero-actions-block{margin-top:20px}
.hero-cta{flex-direction:column;align-items:stretch;width:100%;gap:10px}
.hero-cta .btn{width:100%;justify-content:center;white-space:normal;text-align:center}
.hero-cta .btn svg{flex:none}
.kicker{letter-spacing:.08em;font-size:11px}
.page-title{font-size:36px}
.plan-grid{grid-template-columns:1fr}
}
/* ===================== SUBPAGES (why / pricing / blog) ===================== */
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.section-sm{padding:56px 0}
.hero-actions{display:flex;flex-wrap:wrap;gap:11px;align-items:center;margin-top:4px}
/* ---- page heroes = the same panel object as the landing hero ----
CSS-only on purpose: pricing, why-docutrain, the blog index AND the 12
generated blog posts all share these two class names, so the treatment
reaches every one without editing scripts/generate-blog.js (whose output
would overwrite hand-edited HTML anyway).
The offset is driven from rather than left to margin collapsing,
which is fragile and silently stops working if ever gains padding.
Blog POSTS nest the header one level deeper, inside ,
so that wrapper needs its own selector. */
main:has(> .pricing-hero),
main:has(> .article-header),
main:has(> .blog-article > .article-header){margin-top:calc(-1 * var(--nav-total))}
.pricing-hero,.article-header{
position:relative;overflow:hidden;border-bottom:0;
/* full-bleed, matching the landing hero — see .hero */
width:100%;max-width:none;margin:0 auto;
padding:calc(var(--nav-total) + clamp(34px,4.5vw,64px)) var(--gutter) clamp(40px,5vw,68px);
border-radius:0;
background:
radial-gradient(108% 84% at 5% -8%, rgba(15,129,199,.15) 0%, rgba(15,129,199,0) 56%),
radial-gradient(88% 74% at 100% 2%, rgba(206,186,160,.27) 0%, rgba(206,186,160,0) 62%),
linear-gradient(174deg,#f2f6fa 0%,#f8f7f4 64%,#fbfaf7 100%);
box-shadow:none;
}
.pricing-hero::after,.article-header::after{
content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
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)' opacity='.06'/%3E%3C/svg%3E");
}
/* the panel owns the horizontal inset — .container would double it */
.pricing-hero > .container,.article-header > .container{
position:relative;z-index:1;padding-left:0;padding-right:0;max-width:var(--hero-maxw);
}
.hero-meta,.article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:11px;font-weight:500;
letter-spacing:.08em;text-transform:uppercase;color:var(--v-fg-subtle);margin-bottom:24px}
.hero-meta-sep,.article-meta-sep{width:20px;height:1px;background:var(--v-border)}
.page-title,.hero-wordmark,.article-title{font-size:clamp(36px,6vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1.05;
color:var(--v-fg);margin:0 0 14px;text-wrap:balance}
.hero-deck,.article-deck{font-size:clamp(17px,2vw,20px);line-height:1.45;color:var(--v-fg-muted);margin:0;max-width:640px;letter-spacing:-.01em}
/* editorial article (why-docutrain) */
.article-body{max-width:720px;margin:0 auto;padding:64px 28px;font-size:16.5px;line-height:1.72;color:var(--v-fg)}
.article-body p{margin:0 0 22px}
.article-body p strong{font-weight:600}
.article-section{margin-bottom:48px;padding-bottom:48px;border-bottom:1px solid var(--v-border)}
.article-section:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.article-section h2{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--v-fg);margin:0 0 20px}
.article-section .label,.section-marker{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;color:var(--brand-ink);margin-bottom:12px}
.article-section .label::before,.section-marker::before{content:'';width:6px;height:6px;border-radius:2px;background:var(--brand);flex:none}
.principle-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--v-border)}
.principle-list li{display:grid;grid-template-columns:48px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--v-border);align-items:start}
.principle-num{font-family:var(--mono);font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--brand-ink)}
.principle-list h3{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--v-fg);margin:0 0 8px}
.principle-list p{font-size:15px;line-height:1.62;color:var(--v-fg-muted);margin:0}
.pull-quote{font-size:17px;font-weight:500;font-style:italic;line-height:1.55;color:var(--v-fg);background:var(--v-surface-muted);
border:none;border-radius:var(--r-lg);padding:22px 24px;margin:28px 0}
.bio-block{display:grid;gap:14px}
.bio-lead{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start}
.bio-photo{margin:0}
.bio-photo img{display:block;width:200px;height:200px;object-fit:cover;border-radius:var(--r-lg);border:none;box-shadow:var(--elev)}
.bio-block a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:2px}
.article-cta{display:grid;gap:14px;padding:28px 0;margin-top:24px;border-top:1px solid var(--v-border)}
.article-cta p{font-family:var(--mono);font-size:13px;color:var(--v-fg-muted);margin:0}
/* pricing plans */
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px;padding-bottom:56px}
.plan-card{display:flex;flex-direction:column;border:none;border-radius:var(--r-lg);background:var(--v-surface);
padding:30px 24px;position:relative;box-shadow:var(--hair), var(--sh-1);
transition:box-shadow .18s ease,transform .18s ease}
.plan-card:hover{box-shadow:var(--hair), var(--sh-2);transform:translateY(-3px)}
/* the recommended tier reads as lifted, not just tinted */
.plan-card.featured{background:var(--brand-tint);box-shadow:0 0 0 1px var(--brand-line), var(--sh-2)}
.plan-card.featured:hover{box-shadow:0 0 0 1px var(--brand-line), var(--sh-3);transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.plan-card:hover,.plan-card.featured:hover{transform:none}}
.plan-recommended{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:9.5px;font-weight:600;text-transform:uppercase;
letter-spacing:.08em;color:var(--brand-ink);padding:3px 8px;border:none;border-radius:var(--r-xs);background:var(--v-surface)}
.plan-tier{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--v-fg-subtle);margin-bottom:8px}
.plan-name{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--v-fg);margin-bottom:14px}
.plan-description{font-size:13.5px;line-height:1.55;color:var(--v-fg-muted);margin:0 0 20px;min-height:64px}
.plan-price{font-family:var(--mono);font-size:36px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--v-fg);margin-bottom:4px}
.plan-price-note{font-family:var(--mono);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--v-fg-subtle);margin-bottom:20px}
.plan-limits{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.plan-limit-chip{display:inline-flex;font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--v-fg-muted);padding:3px 8px;
border:none;border-radius:var(--r-pill);background:var(--v-hover)}
.plan-features{list-style:none;margin:0 0 24px;padding:16px 0 0;border-top:1px solid var(--v-border);flex:1}
.plan-features li{display:grid;grid-template-columns:16px 1fr;gap:10px;padding:5px 0;font-size:13.5px;line-height:1.5;color:var(--v-fg);align-items:start}
.plan-features li.unavailable{color:var(--v-fg-subtle)}
.plan-features .check{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--brand-ink);line-height:1.4}
.plan-features .dash{font-family:var(--mono);font-size:12px;color:var(--v-fg-subtle);line-height:1.4}
.plan-cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 15px;
font-size:14px;font-weight:500;border-radius:var(--r-sm);text-decoration:none;transition:background-color .12s,border-color .12s,color .12s}
.plan-cta-primary{background:var(--v-fg);color:#fafafa;border:1px solid var(--v-fg)}
.plan-cta-primary:hover{background:#262626}
.plan-cta-outline{background:var(--v-surface);color:var(--v-fg);border:1px solid var(--v-border)}
.plan-cta-outline:hover{background:var(--v-hover);border-color:var(--v-border-strong)}
/* comparison table */
.comparison-wrap{border:none;border-radius:var(--r-lg);background:var(--v-surface);overflow-x:auto;margin-bottom:56px;box-shadow:var(--elev)}
.comparison{width:100%;border-collapse:collapse;font-size:14px}
.comparison thead th{text-align:left;padding:14px 18px;font-family:var(--mono);font-size:10.5px;font-weight:500;text-transform:uppercase;
letter-spacing:.08em;color:var(--v-fg-subtle);border-bottom:1px solid var(--v-border);background:var(--v-surface-muted);white-space:nowrap}
.comparison thead th.col-featured{color:var(--brand-ink)}
.comparison tbody td{padding:12px 18px;border-bottom:1px solid var(--v-border);vertical-align:middle}
.comparison tbody tr:last-child td{border-bottom:0}
.comparison tbody td:first-child{color:var(--v-fg);font-weight:500}
.comparison tbody td.col-featured{background:var(--brand-tint);color:var(--brand-ink);font-weight:500}
.comparison .cat-row td{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
color:var(--v-fg-subtle);background:var(--v-surface-muted);padding:10px 18px}
.comparison .check{font-family:var(--mono);color:var(--v-fg);font-weight:600}
.comparison .check.primary{color:var(--brand-ink)}
.comparison .dash{font-family:var(--mono);color:var(--v-fg-subtle)}
.comparison .value{font-family:var(--mono);color:var(--v-fg);font-weight:500}
.comparison .value.accent{color:var(--brand-ink)}
/* FAQ */
.faq{border-top:1px solid var(--v-border);margin-bottom:56px}
.faq-item{border-bottom:1px solid var(--v-border)}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;padding:20px 0;font-size:15px;font-weight:500;
letter-spacing:-.01em;color:var(--v-fg);background:none;border:0;cursor:pointer;text-align:left;font-family:var(--sans)}
.faq-chevron{flex:none;color:var(--v-fg-subtle);transition:transform .15s}
.faq-item.open .faq-chevron{transform:rotate(180deg)}
.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease-out}
.faq-item.open .faq-answer{grid-template-rows:1fr}
.faq-answer-inner{overflow:hidden}
.faq-answer-inner>div{padding:0 0 20px;font-size:14.5px;line-height:1.62;color:var(--v-fg-muted)}
.faq-answer-inner a{color:var(--brand-ink);text-decoration:underline}
/* blog index + posts */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:36px}
.blog-card{display:flex;flex-direction:column;gap:10px;padding:26px 24px;border:none;border-radius:var(--r-lg);
background:var(--v-surface);color:var(--v-fg);text-decoration:none;height:100%;box-shadow:var(--hair), var(--sh-1);
transition:box-shadow .18s ease,transform .18s ease}
.blog-card:hover{box-shadow:var(--hair), var(--sh-2);transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.blog-card:hover{transform:none}}
.blog-card-order{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-ink)}
.blog-card-title{font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.28;color:var(--v-fg);margin:0}
.blog-card-deck{font-size:14px;line-height:1.55;color:var(--v-fg-muted);margin:0;flex:1}
.blog-card-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;color:var(--v-fg-subtle);margin-top:4px}
.blog-card-arrow{transition:transform .12s}
.blog-card:hover .blog-card-arrow{transform:translateX(3px)}
.blog-back{color:var(--brand-ink);text-decoration:none}
.blog-back:hover{text-decoration:underline}
.blog-body,.blog-article .article-body{max-width:760px}
.blog-body h2,.blog-article .blog-body h2{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--v-fg);margin:36px 0 14px}
.blog-body h3{font-size:18px;font-weight:600;letter-spacing:-.015em;margin:28px 0 12px}
.blog-body h4{font-size:15px;font-weight:600;margin:22px 0 10px}
.blog-body p{margin:0 0 18px}
.blog-body p strong{font-weight:600;color:var(--v-fg)}
.blog-body a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:2px}
.blog-body ul,.blog-body ol{margin:0 0 18px;padding-left:1.35em}
.blog-body li{margin-bottom:8px;line-height:1.62;color:var(--v-fg-muted)}
.blog-body li::marker{color:var(--v-fg-subtle)}
.blog-body hr{border:0;border-top:1px solid var(--v-border);margin:32px 0}
.blog-body blockquote{margin:24px 0;padding:16px 20px;border:none;background:var(--v-surface-muted);border-radius:var(--r-md)}
.blog-body blockquote p{margin:0;font-style:italic;color:var(--v-fg-muted)}
.blog-body code{font-family:var(--mono);font-size:.88em;background:var(--v-hover);border:none;border-radius:var(--r-xs);padding:1px 5px}
.blog-body pre{background:var(--ink);color:#e5e5e5;border-radius:var(--r-lg);padding:18px 20px;overflow-x:auto;margin:0 0 20px;font-size:13px;line-height:1.65}
.blog-body pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
.blog-table-wrap{overflow-x:auto;margin:0 0 24px;border:none;border-radius:var(--r-lg);box-shadow:var(--elev);background:var(--v-surface)}
.blog-table{width:100%;border-collapse:collapse;font-size:14px}
.blog-table thead{background:var(--v-surface-muted)}
.blog-table th{text-align:left;padding:12px 16px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;
text-transform:uppercase;color:var(--v-fg-subtle);border-bottom:1px solid var(--v-border)}
.blog-table td{padding:12px 16px;border-top:1px solid var(--v-border);vertical-align:top;color:var(--v-fg-muted)}
.blog-table td code{font-size:12px}
.blog-content-image,.blog-content-figure{margin:24px 0}
.blog-content-image{max-width:100%;height:auto;border-radius:var(--r-lg);border:none;box-shadow:var(--elev)}
.blog-content-caption{font-family:var(--mono);font-size:11px;color:var(--v-fg-subtle);margin-top:8px;text-align:center}
.blog-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:40px 0;padding-top:32px;border-top:1px solid var(--v-border)}
.blog-prevnext-link{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:none;border-radius:var(--r-lg);
background:var(--v-surface);text-decoration:none;transition:background-color .12s;box-shadow:var(--elev)}
.blog-prevnext-link:hover{background:var(--v-surface-muted)}
.blog-prevnext-next{text-align:right}
.blog-prevnext-label{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--v-fg-subtle)}
.blog-prevnext-title{font-size:14px;font-weight:600;line-height:1.35;color:var(--v-fg)}
@media (max-width:1000px){
.plan-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:780px){
.bio-lead{display:flow-root}
.bio-photo{float:left;margin:2px 18px 10px 0}
.bio-photo img{width:108px;height:108px}
.bio-lead > p{margin-top:0}
.blog-prevnext{grid-template-columns:1fr}
.blog-prevnext-next{text-align:left}
.comparison-wrap{font-size:13px}
}