/* =========================================================================
tokens.css — the palette, and nothing else.
Split out of app.css because two different stylesheets now need it: the
packet builder (app.css) and the public pages (web/site/site.css). Both
builds concatenate this file ahead of theirs, so there is exactly one
definition of what "accent" means and a palette change cannot land in the
app while the landing page keeps the old one.
The dark palette hangs off [data-theme="dark"] on and nothing else.
src/theme.js sets that attribute during head parsing — resolving "follow the
system" itself — so there is one dark palette here rather than one for the
media query and a second for the manual choice, which would drift.
========================================================================= */
:root {
color-scheme: light;
/* One blue-black family shared by the landing walkthrough, the footer, and
the complete dark application. Naming it once prevents each surface from
inventing another almost-identical navy. */
--night: #060a12;
--night-surface: #0b1423;
--night-surface-2: #0e1b2e;
--night-line: rgba(158, 185, 225, .17);
--night-ink: #f4f7fc;
--night-muted: #8b9aaf;
--night-accent: #55c8ff;
/* surfaces */
--bg: #f1f4f7;
--surface: #ffffff;
--surface-2: #fafbfc;
--surface-3: #f0f2f5;
--line: #d9dee6;
--line-2: #bcc5d1;
--line-strong: #98a4b3;
/* ink */
--ink: #14171c;
--ink-2: #545b66;
--ink-3: #7b828d;
/* accent + status */
--accent: #155e75;
--accent-hi: #0e4b5e;
--accent-ink: #124f62;
--accent-soft: #eaf6f8;
--accent-line: #a9d7df;
--accent-ring: rgba(21, 94, 117, .22);
/* Text and glyphs sitting ON --accent. Not always white: the dark palette's
accent is a light cyan, which white type cannot be read against. */
--on-accent: #ffffff;
/* The logo tile only. Fixed in both themes — it is the mark, and it matches
the favicon and the installed app icon, so it must not follow the UI
accent when that lightens for dark mode. */
--brand: #155e75;
--warn: #a55a09;
--warn-soft: #fdf6e8;
--warn-line: #f0d9a8;
--danger: #bc2626;
--danger-soft: #fdf2f2;
--danger-line: #f3c9c9;
--ok: #0a7a52;
--ok-soft: #eefaf4;
--ok-line: #b3e3ce;
/* Favourite star, and the lit top edge of the app bar. */
--star: #b77900;
--star-hi: #9a6700;
--star-soft: #fff7d6;
--edge-hi: rgba(255, 255, 255, .8);
--r-sm: 6px;
--r: 9px;
--r-lg: 13px;
/* Action geometry is shared by the public site and packet builder. Variants
may change colour or size, but a button should not change its silhouette
when the user crosses the sign-in boundary. */
--button-radius: 999px;
--button-radius-inner: 999px;
--button-height: 40px;
--button-height-sm: 36px;
--button-height-lg: 44px;
--button-pad: 16px;
--button-pad-sm: 12px;
--button-pad-lg: 18px;
--shadow-1: 0 1px 2px rgba(16, 22, 34, .07);
--shadow-2: 0 8px 28px -6px rgba(16, 22, 34, .18), 0 2px 6px rgba(16, 22, 34, .06);
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
/* Public pages only. ui-serif resolves to New York on Apple platforms and
Georgia elsewhere — both are text faces that hold up at display sizes,
which is the whole reason the landing page can look set rather than
typed without loading a webfont the CSP would have to admit. */
--serif: ui-serif, "New York", Georgia, "Iowan Old Style", Palatino, serif;
--rail-w: 236px;
--bar-h: 56px;
}
:root[data-theme="dark"] {
/* Also switches the browser's own furniture — scrollbars, the date and time
pickers, and select popups — which no token can reach. */
color-scheme: dark;
--bg: var(--night);
--surface: var(--night-surface);
--surface-2: var(--night-surface-2);
--surface-3: #132238;
--line: #1c2b42;
--line-2: #31445f;
--line-strong: #536985;
--ink: var(--night-ink);
--ink-2: #aebdd0;
--ink-3: var(--night-muted);
--accent: var(--night-accent);
--accent-hi: #7ad7ff;
--accent-ink: #93dcff;
--accent-soft: #0b2638;
--accent-line: #255472;
--accent-ring: rgba(85, 200, 255, .28);
--on-accent: #06111e;
--warn: #e5aa55;
--warn-soft: #2a2216;
--warn-line: #4d3d1f;
--danger: #f08a8a;
--danger-soft: #2c1a1a;
--danger-line: #5a2e2e;
--ok: #4fc79b;
--ok-soft: #12271f;
--ok-line: #26543f;
--star: #e5b545;
--star-hi: #f2ca70;
--star-soft: #2f2513;
--edge-hi: rgba(255, 255, 255, .05);
--shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
--shadow-2: 0 12px 32px -8px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .4);
}
/* =========================================================================
site.css — the public pages: landing, about, privacy, terms, login.
These are the opposite problem from the app. The app is a dense instrument
operated with a patient waiting; these pages are read once, by someone
deciding whether to trust the thing. So the type is bigger, the measure is
narrower, and there is air.
Loaded with src/tokens.css and nothing else — deliberately not app.css,
which is 1,100 lines of controls no public page has. The two stylesheets
share a palette and no components.
Restraint here is not only taste. The served CSP is style-src 'self' with no
unsafe-inline and font-src 'self' with no external host, so there are no
webfonts and no inline style attributes anywhere in these pages. The display
face is the platform's own serif (--serif), which is why the headings look
set rather than typed without a byte being downloaded.
========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
/* The UA stylesheet's [hidden] { display: none } is namespaced to HTML, so it
does not reach SVG. Without this the theme button paints all three of its
icons on top of each other. */
svg[hidden] { display: none; }
/* Column layout so the footer sits at the bottom of a short page — the login
screen is half a viewport tall, and a footer floating mid-screen above a
band of background reads as a rendering failure. */
body {
margin: 0;
min-height: 100dvh;
display: flex;
flex-direction: column;
font: 16px/1.65 var(--sans);
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
main { flex: 1 0 auto; }
.foot { flex: none; }
/* Anchors land below the sticky header rather than under it. */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
a { color: var(--accent-ink); text-decoration-color: var(--accent-line); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.021em; line-height: 1.15; }
p { margin: 0; }
/* Skip link — the header has enough furniture to be worth skipping. */
.skip {
position: absolute; left: 12px; top: -60px; z-index: 80;
padding: 9px 14px; border-radius: var(--r-sm);
background: var(--accent); color: var(--on-accent);
font-size: 14px; font-weight: 600; text-decoration: none;
transition: top .15s;
}
.skip:focus { top: 12px; }
/* =====================================================================
layout
===================================================================== */
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 28px; }
/* 68ch is about 12 words a line at this size — the width prose is actually
read at, and the reason the legal pages are not full-bleed. */
.wrap.narrow { max-width: calc(68ch + 56px); }
.wrap.mid { max-width: 900px; }
section { padding: 84px 0; }
section + section { padding-top: 0; }
.section-tight { padding: 56px 0; }
@media (max-width: 700px) {
.wrap { padding: 0 20px; }
section { padding: 56px 0; }
}
/* Phones. The header is the tight case — a wordmark, a theme control and a
primary action on one line — so the wordmark is what gives way, and it
truncates rather than pushing the sign-in button off the screen. */
@media (max-width: 430px) {
.wrap { padding: 0 16px; }
.top-in { height: 62px; gap: 8px; }
.brand { font-size: 15px; min-width: 0; }
.brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eyebrow { font-size: 11px; letter-spacing: .07em; }
.eyebrow::before { width: 18px; }
}
/* =====================================================================
brand mark — one shared asset across site chrome, app bar, and favicon
===================================================================== */
.mark {
width: 36px; height: 36px;
flex: none;
display: grid; place-items: center;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
.mark img {
width: 100%; height: 100%; display: block;
object-fit: contain;
transform: scale(1.06);
}
.mark.lg { width: 52px; height: 52px; border-radius: 0; }
/* =====================================================================
header
===================================================================== */
.top {
position: sticky; top: 0; z-index: 40;
transform: translateY(0);
border-bottom: 1px solid transparent;
/* Opaque first: where color-mix is unsupported the whole declaration is
dropped, and a transparent sticky bar is unreadable rather than merely
less pretty. */
background: var(--bg);
background: color-mix(in srgb, var(--bg) 82%, transparent);
backdrop-filter: saturate(1.55) blur(18px);
-webkit-backdrop-filter: saturate(1.55) blur(18px);
transition:
transform .24s cubic-bezier(.4, 0, .2, 1),
border-color .2s,
background .2s,
box-shadow .2s;
}
/* Set by site.js once the page has scrolled: the rule only earns its keep
when there is content behind the bar. */
.top.stuck {
border-bottom-color: var(--line);
background: var(--bg);
background: color-mix(in srgb, var(--bg) 86%, transparent);
box-shadow: 0 8px 28px rgba(4, 12, 28, .08);
}
.top.is-hidden { transform: translateY(calc(-100% - 1px)); }
.top:focus-within { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.top { transition: border-color .2s, background .2s, box-shadow .2s; }
.top.is-hidden { transform: translateY(0); }
}
.top-in { display: flex; align-items: center; gap: 14px; height: 68px; }
.brand {
display: flex; align-items: center; gap: 11px;
color: var(--ink); text-decoration: none; font-weight: 600;
letter-spacing: -.017em; font-size: 15.5px;
}
.brand:hover { color: var(--ink); }
.brand .sub { color: var(--ink-3); font-weight: 450; }
.top-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.site-links { display: flex; align-items: center; gap: 2px; }
.navlink {
padding: 7px 11px; border-radius: var(--button-radius);
color: var(--ink-2); font-size: 14.5px; font-weight: 500; text-decoration: none;
}
.navlink:hover { background: var(--surface-3); color: var(--ink); }
.navlink[aria-current="page"] { color: var(--ink); font-weight: 600; }
@media (max-width: 820px) { .navlink.hide-sm { display: none; } }
/* =====================================================================
buttons — same shape language as the app, one size up for reading pages
===================================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: var(--button-height); padding: 0 var(--button-pad);
font: inherit; font-size: 15px; font-weight: 600;
border: 1px solid var(--line-2); border-radius: var(--button-radius);
background: var(--surface); color: var(--ink);
text-decoration: none; white-space: nowrap; cursor: pointer;
transition: background .13s, border-color .13s, color .13s,
box-shadow .13s, transform .13s;
}
.btn:hover { background: var(--surface-3); border-color: var(--ink-3); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--on-accent); }
.btn.ghost { background: none; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-3); color: var(--ink); }
.btn.sm { height: var(--button-height-sm); padding: 0 var(--button-pad-sm); font-size: 14px; }
.btn.lg { height: var(--button-height-lg); padding: 0 var(--button-pad-lg); }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.icon { width: var(--button-height-sm); height: var(--button-height-sm); padding: 0; }
.btn.icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round; }
/* =====================================================================
hero
===================================================================== */
.hero { padding: 92px 0 72px; }
.eyebrow {
display: flex; align-items: center; gap: 9px;
margin-bottom: 22px;
color: var(--accent-ink);
font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.eyebrow::before {
content: ""; width: 26px; height: 2px; border-radius: 2px;
background: var(--accent); flex: none;
}
.display {
font-family: var(--serif);
font-size: clamp(36px, 5.6vw, 58px);
line-height: 1.06;
letter-spacing: -.028em;
font-weight: 500;
/* In em, so it tracks the clamp: the headline breaks where its
says and
nowhere else, at every width down to the mobile stack. */
max-width: 13.5em;
text-wrap: pretty;
}
.display .quiet { color: var(--ink-3); }
.lede {
max-width: 60ch; margin-top: 26px;
font-size: 18.5px; line-height: 1.6; color: var(--ink-2);
}
.lede strong { color: var(--ink); font-weight: 600; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
/* Facts, not features: what the reader would otherwise have to ask. */
.factbar {
display: flex; flex-wrap: wrap; gap: 10px 30px;
margin-top: 44px; padding-top: 24px;
border-top: 1px solid var(--line);
font-size: 14px; color: var(--ink-3);
}
.factbar b { color: var(--ink-2); font-weight: 600; }
@media (max-width: 700px) {
.hero { padding: 56px 0 48px; }
.lede { font-size: 17px; }
.cta-row .btn { flex: 1 1 auto; }
}
/* =====================================================================
the privacy claim — the one inverted panel on the page
This is the argument the whole tool rests on, so it gets the page's only
change of ground. Fixed dark in both themes: it is a statement, not a
surface, and it should read the same to everyone.
===================================================================== */
.claim {
--panel: #0d2b34;
--panel-2: #143a45;
--panel-line: rgba(255, 255, 255, .13);
--panel-ink: #dff0f3;
--panel-ink-2: #9fc4cc;
padding: 0;
}
.claim-in {
border-radius: 20px;
background: radial-gradient(120% 140% at 12% 0%, var(--panel-2) 0%, var(--panel) 58%);
color: var(--panel-ink);
padding: 58px 52px;
display: grid;
/* The figure carries type of its own, and type inside an SVG scales with the
box. Giving the diagram the wider column is what keeps its labels legible
rather than decorative. */
grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
gap: 48px;
align-items: center;
}
.claim h2 {
font-family: var(--serif); font-weight: 500;
font-size: clamp(27px, 3.4vw, 38px); line-height: 1.13;
}
.claim p { margin-top: 18px; color: var(--panel-ink-2); font-size: 16.5px; line-height: 1.62; }
.claim code {
font-family: var(--mono); font-size: .87em;
padding: 2px 6px; border-radius: 4px;
background: rgba(255, 255, 255, .09); color: #bfe4ea;
}
.claim .note { margin-top: 22px; font-size: 14.5px; color: #7ea8b2; }
.claim a { color: #9ad9e4; text-decoration-color: rgba(154, 217, 228, .4); }
/* The diagram: browser holds the data, the arrow out is refused. */
.figure { border: 1px solid var(--panel-line); border-radius: 14px; padding: 26px; background: rgba(0, 0, 0, .16); }
.figure svg { width: 100%; height: auto; display: block; }
.figure figcaption { margin-top: 16px; font-size: 13px; line-height: 1.5; color: #7ea8b2; text-align: center; }
@media (max-width: 900px) {
.claim-in { grid-template-columns: 1fr; gap: 36px; padding: 40px 28px; border-radius: 16px; }
}
/* =====================================================================
section headings
===================================================================== */
.head { max-width: 52ch; margin-bottom: 44px; }
.head h2 {
font-family: var(--serif); font-weight: 500;
font-size: clamp(26px, 3.3vw, 36px); line-height: 1.14;
}
.head p { margin-top: 15px; font-size: 17px; color: var(--ink-2); }
/* =====================================================================
feature grid
===================================================================== */
.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cell { background: var(--bg); padding: 30px 28px; }
.cell h3 { font-size: 16.5px; font-weight: 650; letter-spacing: -.012em; }
.cell p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.cell .ico {
width: 30px; height: 30px; margin-bottom: 16px;
display: grid; place-items: center;
border-radius: 8px; background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.cell .ico svg { width: 16px; height: 16px; fill: none; stroke: var(--accent-ink); stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
/* =====================================================================
channels — hosted / offline / installed
===================================================================== */
.channel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--line); }
.channel:last-child { border-bottom: 0; }
.channel .num {
width: 30px; height: 30px; display: grid; place-items: center;
border-radius: 50%; border: 1px solid var(--accent-line); background: var(--accent-soft);
color: var(--accent-ink); font-size: 13px; font-weight: 700;
}
.channel h3 { font-size: 16.5px; }
.channel p { margin-top: 8px; font-size: 15px; color: var(--ink-2); max-width: 64ch; }
/* =====================================================================
callout — access, and the standing clinical disclaimer
===================================================================== */
.callout {
border: 1px solid var(--line-2); border-radius: var(--r-lg);
background: var(--surface); padding: 34px 36px;
box-shadow: var(--shadow-1);
}
.callout h2 { font-family: var(--serif); font-weight: 500; font-size: 27px; }
.callout p { margin-top: 13px; color: var(--ink-2); max-width: 62ch; font-size: 15.5px; }
.callout .cta-row { margin-top: 24px; }
.warnbox {
border: 1px solid var(--warn-line); border-left: 3px solid var(--warn);
border-radius: var(--r); background: var(--warn-soft);
padding: 20px 24px;
}
.warnbox h3 { font-size: 15px; color: var(--warn); letter-spacing: 0; }
.warnbox p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.warnbox p + p { margin-top: 10px; }
/* =====================================================================
long-form documents — about, privacy, terms
===================================================================== */
.doc-head { padding: 72px 0 0; }
.doc-head h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 5vw, 46px); line-height: 1.08; }
.doc-head .meta {
display: flex; flex-wrap: wrap; gap: 8px 20px;
margin-top: 20px; padding-bottom: 26px; border-bottom: 1px solid var(--line);
font-size: 14px; color: var(--ink-3);
}
.doc-head .meta b { color: var(--ink-2); font-weight: 600; }
.doc { padding: 34px 0 84px; font-size: 16.5px; line-height: 1.72; }
.doc > * + * { margin-top: 18px; }
.doc h2 {
margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--line);
font-family: var(--serif); font-weight: 500; font-size: 27px; line-height: 1.2;
}
.doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc h3 { margin-top: 32px; font-size: 17px; font-weight: 650; letter-spacing: -.008em; }
.doc p { color: var(--ink); }
.doc ul, .doc ol { margin-top: 14px; padding-left: 24px; color: var(--ink); }
.doc li { margin-top: 9px; }
.doc li > ul, .doc li > ol { margin-top: 9px; }
.doc strong { font-weight: 650; }
.doc code { font-family: var(--mono); font-size: .87em; padding: 2px 5px; border-radius: 4px;
background: var(--surface-3); border: 1px solid var(--line); }
.doc hr { margin: 44px 0; border: 0; border-top: 1px solid var(--line); }
/* Defined terms and the summary rows at the top of each legal section. */
.doc .summary {
margin-top: 22px; padding: 16px 20px;
border-left: 3px solid var(--accent-line); border-radius: 0 var(--r-sm) var(--r-sm) 0;
background: var(--accent-soft);
font-size: 15.5px; line-height: 1.6; color: var(--accent-ink);
}
.doc .summary b { font-weight: 700; }
/* Tables inside documents scroll on their own rather than widening the page. */
.tablewrap { margin-top: 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc th, .doc td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.doc th { background: var(--surface-2); font-weight: 650; font-size: 13px; text-transform: uppercase;
letter-spacing: .05em; color: var(--ink-2); white-space: nowrap; }
.doc tr:last-child td { border-bottom: 0; }
/* In-page contents, for documents long enough to navigate. */
.toc { margin-top: 26px; padding: 22px 26px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.toc h2 { margin: 0; padding: 0; border: 0; font-family: var(--sans); font-size: 12px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.toc ol { margin-top: 12px; padding-left: 20px; font-size: 15px; }
.toc li { margin-top: 6px; }
/* The single About & legal destination keeps the two detailed policy
documents discoverable without repeating them in the global chrome. */
.policy-index {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px; margin-top: 24px;
}
.policy-link {
display: grid; gap: 7px; min-height: 118px; padding: 20px;
border: 1px solid var(--line); border-radius: var(--r);
background: var(--surface-2); color: var(--ink); text-decoration: none;
}
.policy-link:hover { border-color: var(--line-strong); background: var(--surface-3); }
.policy-link span { font-weight: 650; }
.policy-link small { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 620px) { .policy-index { grid-template-columns: 1fr; } }
/* =====================================================================
login
Its own centred layout rather than the page grid. Every state below is
real markup toggled by site/login.js — nothing is injected as a string,
so the page is readable and the CSP has no inline anything to allow.
===================================================================== */
.auth-main { display: grid; place-items: center; padding: 56px 20px 72px; }
.auth { width: 100%; max-width: 428px; }
.auth-brand { display: grid; justify-items: center; gap: 18px; margin-bottom: 30px; text-align: center; }
.auth-brand h1 { font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: -.02em; }
.auth-brand p { margin-top: 9px; color: var(--ink-2); font-size: 15.5px; }
.auth-card {
border: 1px solid var(--line-2); border-radius: var(--r-lg);
background: var(--surface); padding: 30px 32px;
box-shadow: var(--shadow-2);
}
.auth-step[hidden] { display: none; }
.auth-step > * + * { margin-top: 18px; }
.auth-h { font-size: 17px; font-weight: 650; }
.field { display: grid; gap: 7px; }
.field > label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.field > label .opt { font-weight: 400; color: var(--ink-3); }
.hint { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.field input, .field select {
width: 100%; height: 46px; padding: 0 14px;
font: inherit; font-size: 16px; /* 16px: iOS zooms anything smaller */
border: 1px solid var(--line-2); border-radius: var(--r-sm);
background: var(--surface); color: var(--ink);
transition: border-color .13s, box-shadow .13s;
}
.field select {
appearance: none; cursor: pointer; padding-right: 36px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 13px center;
}
.field input:hover, .field select:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus {
outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--danger); }
.field input[aria-invalid="true"]:focus, .field select[aria-invalid="true"]:focus {
box-shadow: 0 0 0 3px rgba(188, 38, 38, .2);
}
/* One input rather than six boxes: paste works, autofill from the OS works,
and a screen reader announces one field instead of counting to six. */
.field input.code {
height: 62px;
font-family: var(--mono); font-size: 30px; font-weight: 600;
letter-spacing: .34em; text-indent: .34em; text-align: center;
}
.auth-sent { font-size: 15px; color: var(--ink-2); }
.auth-sent b { color: var(--ink); font-weight: 650; word-break: break-all; }
.auth-msg {
display: flex; gap: 9px; align-items: flex-start;
padding: 12px 14px; border-radius: var(--r-sm);
font-size: 14px; line-height: 1.5;
border: 1px solid var(--danger-line); background: var(--danger-soft); color: var(--danger);
}
.auth-msg[hidden] { display: none; }
.auth-msg.ok { border-color: var(--ok-line); background: var(--ok-soft); color: var(--ok); }
.auth-msg.warn { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.auth-msg svg { width: 16px; height: 16px; flex: none; margin-top: 2px;
fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.linkbtn {
min-height: var(--button-height-sm);
padding: 0 var(--button-pad-sm);
border: 1px solid transparent;
border-radius: var(--button-radius);
background: none;
font: inherit; font-size: 14px; font-weight: 500;
color: var(--accent-ink); cursor: pointer; text-decoration: none;
display: inline-flex; align-items: center; justify-content: center;
transition: background .13s, border-color .13s, color .13s, box-shadow .13s;
}
.linkbtn:hover { border-color: var(--line); background: var(--surface-3); }
.linkbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.linkbtn:disabled { color: var(--ink-3); cursor: not-allowed; text-decoration: none; }
.linkbtn:disabled:hover { border-color: transparent; background: none; }
/* Small supporting text inside the sign-in flow. */
.auth-degrade {
margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
font-size: 13.5px; line-height: 1.6; color: var(--ink-3);
}
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 460px) { .two-up { grid-template-columns: 1fr; } }
/* Facility tick list on the onboarding step. A fieldset because these are one
question with several answers, and a legend is what a screen reader repeats
for each box — without it every row announces as an unattached checkbox. */
.facility-field { border: 0; padding: 0; margin: 0; }
.facility-field[hidden] { display: none; }
.facility-field > legend {
padding: 0; font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.facility-field > legend .opt { font-weight: 400; color: var(--ink-3); }
.facility-field > .hint { margin: 7px 0 10px; }
.checks { display: grid; gap: 8px; }
.check {
display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start;
padding: 12px 14px; cursor: pointer;
border: 1px solid var(--line-2); border-radius: var(--r-sm);
background: var(--surface);
transition: border-color .13s, background .13s;
}
.check:hover { border-color: var(--ink-3); }
.check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.check:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-ring); }
/* Height and width are set explicitly because the .field input rule above
would otherwise stretch these to a 46px-tall text box. */
.check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accent); }
.check-name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.check-detail { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
/* =====================================================================
footer
===================================================================== */
.foot {
margin-top: 40px; padding: 60px 0 28px;
border-top: 1px solid var(--line); background: var(--surface-2);
}
.foot-main {
display: grid; grid-template-columns: minmax(240px, .85fr) minmax(460px, 1.15fr);
align-items: start; gap: clamp(56px, 9vw, 112px);
}
.foot-about { max-width: 31ch; }
.foot-about p { margin-top: 14px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.foot a { color: var(--ink-2); text-decoration: none; font-size: 14.5px; }
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.foot-nav {
display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr));
gap: 28px 44px; padding-top: 3px;
}
.foot-nav-group { display: grid; align-content: start; gap: 8px; }
.foot-nav-title {
margin-bottom: 4px;
font-family: var(--sans); font-size: 11px; line-height: 1.4; font-weight: 700;
color: var(--ink-3); letter-spacing: .09em; text-transform: uppercase;
}
.foot-nav a { width: fit-content; line-height: 1.5; white-space: nowrap; }
.foot-notice {
margin-top: 44px; padding: 20px 22px;
display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px;
border: 1px solid var(--line); border-radius: var(--r);
background: var(--surface); color: var(--ink-3);
font-size: 13px; line-height: 1.6;
}
.foot-notice-mark {
width: 28px; height: 28px;
display: grid; place-items: center;
border: 1px solid var(--line-2); border-radius: 50%;
color: var(--ink-2); font-size: 13px; font-weight: 700;
}
.foot-notice p { max-width: 92ch; }
.foot-notice p + p { margin-top: 4px; }
.foot-notice strong { color: var(--ink-2); }
.foot-bottom {
margin-top: 24px; padding-top: 20px;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
border-top: 1px solid var(--line);
color: var(--ink-3); font-size: 12.5px; line-height: 1.5;
}
.foot-build { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
@media (max-width: 780px) {
.foot { padding-top: 48px; }
.foot-main { grid-template-columns: 1fr; gap: 36px; }
.foot-about { max-width: 38ch; }
.foot-nav { padding-top: 0; }
.foot-notice { margin-top: 36px; }
}
@media (max-width: 520px) {
.foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; }
.foot-notice { grid-template-columns: 1fr; padding: 18px; }
.foot-bottom { align-items: flex-start; flex-direction: column; }
}
/* =====================================================================
Hold Packet product entry — dark, calm, and login-first
The public documents keep the restrained reading layout above. The home
and sign-in routes are the product's front door, so they use a dedicated
night palette, luminous depth, and low-amplitude motion. No remote images or
fonts are needed; the atmosphere is drawn with gradients and SVG paths.
===================================================================== */
body.home,
body.auth-page {
color-scheme: dark;
--bg: #071126;
--surface: #0e1d38;
--surface-2: #0a1730;
--surface-3: #142746;
--line: rgba(150, 195, 235, .14);
--line-2: rgba(155, 202, 241, .23);
--line-strong: rgba(169, 214, 248, .4);
--ink: #f2f7fc;
--ink-2: #b4c6d9;
--ink-3: #7f99b5;
--accent: #55c8ff;
--accent-hi: #78d6ff;
--accent-ink: #8ddcff;
--accent-soft: rgba(64, 190, 255, .1);
--accent-line: rgba(84, 201, 255, .28);
--accent-ring: rgba(85, 200, 255, .22);
--on-accent: #041126;
--shadow-1: 0 1px 2px rgba(0, 0, 0, .25);
--shadow-2: 0 30px 90px rgba(0, 5, 20, .45), 0 2px 8px rgba(0, 0, 0, .28);
background: #071126;
}
.home { overflow-x: hidden; }
.home main { overflow: clip; }
.home #theme-btn,
.auth-page #theme-btn { display: none; }
.home .top,
.auth-page .top {
border-bottom-color: rgba(154, 205, 245, .09);
background: rgba(7, 17, 38, .78);
backdrop-filter: saturate(1.35) blur(20px);
-webkit-backdrop-filter: saturate(1.35) blur(20px);
}
.home .top.stuck,
.auth-page .top.stuck {
border-bottom-color: rgba(154, 205, 245, .16);
background: rgba(7, 17, 38, .94);
}
.home .navlink,
.auth-page .navlink { color: #9fb4ca; }
.home .navlink:hover,
.auth-page .navlink:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.home .top .btn.primary,
.auth-page .top .btn.primary {
border-color: rgba(120, 214, 255, .38);
background: rgba(86, 200, 255, .12);
color: #dff5ff;
}
.home .top .btn.primary:hover,
.auth-page .top .btn.primary:hover { background: rgba(86, 200, 255, .2); }
/* Hero */
.home-hero {
position: relative;
min-height: calc(100dvh - 68px);
padding: clamp(72px, 9vw, 116px) 0 86px;
display: grid;
align-items: center;
isolation: isolate;
background:
radial-gradient(ellipse 80% 58% at 50% 108%, rgba(31, 115, 196, .24), transparent 68%),
linear-gradient(145deg, #071126 0%, #091934 54%, #071126 100%);
}
.home-hero::before {
content: "";
position: absolute; inset: 0; z-index: -3;
opacity: .18;
background-image:
linear-gradient(rgba(133, 188, 230, .07) 1px, transparent 1px),
linear-gradient(90deg, rgba(133, 188, 230, .07) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: linear-gradient(to bottom, black, transparent 78%);
}
.home-aurora {
position: absolute; z-index: -2;
width: 520px; height: 520px; border-radius: 50%;
filter: blur(90px); opacity: .26;
animation: glowBreathe 9s ease-in-out infinite alternate;
}
.aurora-one { right: -120px; top: 4%; background: #195ee9; }
.aurora-two { left: 18%; bottom: -330px; background: #09b6dc; animation-delay: -4s; }
.home-waves {
position: absolute; z-index: -1; inset: auto -3% -4% -3%;
width: 106%; height: 72%; overflow: visible; opacity: .62;
}
.home-wave {
fill: none; stroke-linecap: round;
vector-effect: non-scaling-stroke;
transform-origin: center;
animation: waveShift 14s ease-in-out infinite alternate;
}
.wave-one { stroke: rgba(62, 142, 255, .24); stroke-width: 84; filter: blur(1px); }
.wave-two { stroke: rgba(72, 211, 255, .12); stroke-width: 40; animation-delay: -5s; }
.wave-three { stroke: rgba(117, 126, 255, .12); stroke-width: 18; animation-delay: -9s; }
.home-hero-grid {
display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(370px, .76fr);
gap: clamp(54px, 7vw, 92px); align-items: center;
}
.home-copy { animation: heroArrive .7s cubic-bezier(.2, .75, .3, 1) both; }
.home-kicker {
display: flex; align-items: center; gap: 10px;
color: #83d9ff; font-size: 11px; font-weight: 750;
line-height: 1.3; letter-spacing: .13em; text-transform: uppercase;
}
.home-kicker > span {
width: 28px; height: 1px; flex: none;
background: linear-gradient(90deg, #58ccff, #ff8b6b);
box-shadow: 0 0 14px rgba(88, 204, 255, .7);
}
.home-copy h1 {
max-width: 9.6em; margin-top: 25px;
font-family: var(--sans); font-size: clamp(48px, 6.2vw, 76px);
font-weight: 630; line-height: .98; letter-spacing: -.058em;
text-wrap: balance;
}
.home-copy h1 em {
font-family: var(--serif); font-weight: 400; font-style: italic;
color: #78d7ff; letter-spacing: -.045em;
text-shadow: 0 0 34px rgba(66, 192, 255, .18);
}
.home-lede {
max-width: 54ch; margin-top: 28px;
color: #adc0d4; font-size: 18px; line-height: 1.65;
}
.home-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.home-actions .btn { height: 48px; padding: 0 21px; border-radius: var(--button-radius); }
.home-primary {
border-color: #61ceff;
background: linear-gradient(135deg, #78d9ff, #42bdf8);
color: #061329;
box-shadow: 0 10px 34px rgba(38, 168, 236, .22), inset 0 1px rgba(255, 255, 255, .48);
}
.home-primary:hover {
border-color: #91e2ff; background: linear-gradient(135deg, #91e2ff, #59caff);
color: #061329; transform: translateY(-1px);
}
.home-secondary {
border-color: rgba(160, 205, 240, .2);
background: rgba(255, 255, 255, .035); color: #d7e8f7;
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.home-secondary:hover {
border-color: rgba(160, 220, 255, .38);
background: rgba(255, 255, 255, .07); color: #fff;
}
.home-actions .btn svg,
.hero-auth-card .btn svg,
.home-private-card a svg {
width: 18px; height: 18px; fill: none; stroke: currentColor;
stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.home-assurances {
display: flex; flex-wrap: wrap; gap: 12px 24px;
margin-top: 32px; color: #7f99b5; font-size: 13px;
}
.home-assurances span { display: inline-flex; align-items: center; gap: 8px; }
.home-assurances svg {
width: 17px; height: 17px; fill: none; stroke: #68cff8;
stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round;
}
/* Login card in the hero */
.home-auth-wrap {
position: relative; animation: heroArrive .7s .12s cubic-bezier(.2, .75, .3, 1) both;
}
.home-card-glow {
position: absolute; inset: 12% -12% -10%; z-index: -1;
border-radius: 46%; opacity: .36; filter: blur(58px);
background: linear-gradient(150deg, #216ae5, #24c4e8 68%, #ff7f67);
animation: glowBreathe 7s ease-in-out infinite alternate;
}
.auth.auth-home { max-width: 460px; }
.hero-auth-card {
position: relative; overflow: hidden;
padding: 30px;
border: 1px solid rgba(163, 217, 255, .2);
border-radius: 22px;
background: linear-gradient(145deg, rgba(18, 40, 75, .92), rgba(8, 23, 50, .92));
box-shadow: 0 36px 110px rgba(0, 5, 20, .52), inset 0 1px rgba(255, 255, 255, .08);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.hero-auth-card::before {
content: ""; position: absolute; left: 11%; right: 11%; top: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(135, 219, 255, .7), transparent);
}
.home-auth-head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.home-auth-head .mark { width: 42px; height: 42px; border-radius: 12px; }
.home-auth-head .mark svg { width: 42px; height: 42px; }
.home-auth-head h2 { margin-top: 3px; font-size: 20px; letter-spacing: -.025em; }
.home-auth-eyebrow {
color: #7893af; font-size: 10px; font-weight: 750;
letter-spacing: .12em; text-transform: uppercase;
}
.hero-auth-card .auth-step > * + * { margin-top: 17px; }
.hero-auth-card .field > label { color: #b9ccde; font-size: 13px; }
.hero-auth-card .field input,
.hero-auth-card .field select {
height: 48px; border-color: rgba(156, 206, 243, .2);
border-radius: 9px; background-color: rgba(3, 14, 34, .54); color: #f4f9ff;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .16);
}
.hero-auth-card .field input::placeholder { color: #607b98; }
.hero-auth-card .field input:hover,
.hero-auth-card .field select:hover { border-color: rgba(149, 218, 255, .42); }
.hero-auth-card .field input:focus,
.hero-auth-card .field select:focus {
border-color: #59c9ff; box-shadow: 0 0 0 3px rgba(78, 195, 255, .15), 0 0 30px rgba(47, 172, 238, .08);
}
.hero-auth-card .btn.primary {
height: 48px; border: 0; border-radius: var(--button-radius);
background: linear-gradient(135deg, #78d9ff, #42bdf8); color: #061329;
box-shadow: 0 10px 28px rgba(39, 174, 239, .18);
}
.hero-auth-card .btn.primary:hover { background: linear-gradient(135deg, #91e2ff, #59caff); color: #061329; }
.hero-auth-card .auth-degrade {
margin-top: 19px; padding-top: 17px; border-color: rgba(150, 200, 237, .12);
color: #718aa5; font-size: 12.5px;
}
.home-auth-bottom {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
margin-top: 22px; padding-top: 19px; border-top: 1px solid rgba(150, 200, 237, .12);
font-size: 12px; color: #718aa5;
}
.home-auth-bottom span { display: inline-flex; align-items: center; gap: 7px; }
.home-auth-bottom svg {
width: 15px; height: 15px; fill: none; stroke: #61c9f5;
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.home-auth-bottom a { color: #8ddcff; font-weight: 600; text-decoration: none; }
.home-auth-bottom a:hover { text-decoration: underline; }
.home-auth-note { margin-top: 14px; text-align: center; color: #6e87a2; font-size: 12px; }
/* Proof strip */
.home-proof { padding: 0; border-block: 1px solid rgba(149, 200, 240, .1); background: #08152c; }
.home-proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.home-proof-grid > div {
min-height: 116px; padding: 28px 26px;
display: grid; align-content: center; gap: 3px;
border-left: 1px solid rgba(149, 200, 240, .1);
}
.home-proof-grid > div:last-child { border-right: 1px solid rgba(149, 200, 240, .1); }
.home-proof-grid strong {
color: #eaf6ff; font-size: 28px; font-weight: 620; line-height: 1;
letter-spacing: -.04em;
}
.home-proof-grid span { color: #708aa5; font-size: 12px; }
/* How it works */
.home-how { padding: 112px 0; background: #09172f; }
.home-section-head { max-width: 650px; }
.home-section-head h2,
.home-private-card h2,
.home-final h2 {
margin-top: 19px; font-family: var(--sans); font-weight: 620;
font-size: clamp(34px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -.045em;
}
.home-section-head > p:last-child {
max-width: 56ch; margin-top: 18px; color: #93aac2; font-size: 17px; line-height: 1.65;
}
.home-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 52px; }
.home-feature {
position: relative; min-height: 320px; padding: 26px;
border: 1px solid rgba(151, 205, 244, .13); border-radius: 17px;
background: linear-gradient(145deg, rgba(19, 42, 76, .66), rgba(9, 24, 50, .8));
box-shadow: inset 0 1px rgba(255, 255, 255, .035);
transition: transform .28s ease, border-color .28s ease, background .28s ease;
}
.home-feature:hover {
transform: translateY(-4px); border-color: rgba(104, 207, 255, .3);
background: linear-gradient(145deg, rgba(24, 51, 91, .74), rgba(10, 27, 56, .9));
}
.home-feature-num {
position: absolute; right: 23px; top: 22px;
color: #4f6d8b; font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
}
.home-feature-icon {
width: 52px; height: 52px; display: grid; place-items: center;
border: 1px solid rgba(91, 205, 255, .22); border-radius: 14px;
background: rgba(50, 177, 243, .08); box-shadow: inset 0 1px rgba(255, 255, 255, .05);
}
.home-feature-icon svg {
width: 25px; height: 25px; fill: none; stroke: #70d2ff;
stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round;
}
.home-feature h3 { margin-top: 60px; color: #edf7ff; font-size: 20px; letter-spacing: -.025em; }
.home-feature p { margin-top: 13px; color: #8fa8c0; font-size: 14.5px; line-height: 1.7; }
/* Privacy statement */
.home-private { padding: 0 0 112px; background: #09172f; }
.home-private-card {
min-height: 430px; padding: 70px clamp(34px, 7vw, 80px);
display: grid; grid-template-columns: minmax(240px, .72fr) minmax(0, 1fr);
gap: clamp(48px, 8vw, 100px); align-items: center;
border: 1px solid rgba(131, 206, 255, .16); border-radius: 26px;
background:
radial-gradient(circle at 11% 50%, rgba(46, 162, 242, .16), transparent 34%),
linear-gradient(135deg, #0c2042, #0a1832 68%);
box-shadow: 0 38px 100px rgba(0, 5, 20, .22), inset 0 1px rgba(255, 255, 255, .04);
}
.home-private-card > div:last-child { max-width: 610px; }
.home-private-card > div > p:last-of-type {
margin-top: 20px; color: #99afc5; font-size: 16px; line-height: 1.7;
}
.home-private-card a {
display: inline-flex; align-items: center; gap: 8px; margin-top: 25px;
color: #84d8ff; font-size: 14px; font-weight: 650; text-decoration: none;
}
.home-private-card a:hover { color: #b8eaff; }
.privacy-orbit { position: relative; width: min(250px, 100%); aspect-ratio: 1; margin: 0 auto; }
.privacy-core {
position: absolute; z-index: 2; inset: 50% auto auto 50%;
width: 86px; height: 86px; display: grid; place-items: center;
transform: translate(-50%, -50%); border: 1px solid rgba(120, 216, 255, .4);
border-radius: 24px; background: linear-gradient(145deg, #194578, #0c244a);
box-shadow: 0 0 60px rgba(49, 175, 242, .24), inset 0 1px rgba(255, 255, 255, .12);
}
.privacy-core svg {
width: 43px; height: 43px; fill: none; stroke: #a2e4ff;
stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round;
}
.orbit {
position: absolute; inset: 50% auto auto 50%; border-radius: 50%;
border: 1px solid rgba(100, 202, 255, .18); transform: translate(-50%, -50%);
}
.orbit::after {
content: ""; position: absolute; left: 50%; top: -4px;
width: 7px; height: 7px; border-radius: 50%; background: #67d3ff;
box-shadow: 0 0 16px #47c4ff;
}
.orbit-one { width: 164px; height: 164px; animation: orbit 18s linear infinite; }
.orbit-two { width: 232px; height: 232px; border-color: rgba(136, 119, 255, .12); animation: orbit 26s linear infinite reverse; }
.orbit-two::after { background: #ff8b6b; box-shadow: 0 0 16px rgba(255, 139, 107, .8); }
/* Final call to action */
.home-final { padding: 88px 0; background: #071126; }
.home-final-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 46px; }
.home-final h2 { max-width: 720px; font-size: clamp(32px, 4vw, 48px); }
.home-final .home-actions { flex: none; margin-top: 0; }
/* Sign-in route */
.auth-page main {
position: relative; overflow: hidden;
background:
radial-gradient(circle at 18% 15%, rgba(39, 103, 220, .18), transparent 34%),
radial-gradient(circle at 86% 74%, rgba(28, 188, 226, .12), transparent 31%),
#08142a;
}
.auth-page main::before {
content: ""; position: absolute; left: -12%; right: -12%; bottom: -26%; height: 62%;
border: 70px solid rgba(69, 147, 255, .07); border-radius: 50%; transform: rotate(-7deg);
pointer-events: none;
}
.auth-page .auth-main { position: relative; z-index: 1; min-height: 660px; }
.auth-page .auth-card {
border-color: rgba(157, 211, 249, .18); border-radius: 20px;
background: linear-gradient(145deg, rgba(18, 39, 72, .94), rgba(9, 24, 50, .96));
}
.auth-page .field input,
.auth-page .field select { background-color: rgba(3, 14, 34, .48); }
.auth-page .foot,
.home .foot {
margin-top: 0; border-top-color: rgba(149, 200, 240, .11); background: #061024;
}
.auth-page .foot-notice,
.auth-page .foot-bottom,
.home .foot-notice,
.home .foot-bottom { border-color: rgba(149, 200, 240, .11); }
@keyframes heroArrive {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes waveShift {
from { transform: translate3d(-1.5%, 5px, 0) scaleX(1.01); }
to { transform: translate3d(1.5%, -8px, 0) scaleX(.99); }
}
@keyframes glowBreathe {
from { transform: scale(.94); opacity: .2; }
to { transform: scale(1.06); opacity: .34; }
}
@keyframes orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (max-width: 980px) {
.home-hero { min-height: auto; padding-top: 78px; }
.home-hero-grid { grid-template-columns: 1fr; gap: 66px; }
.home-copy { max-width: 720px; }
.home-copy h1 { max-width: 10.8em; }
.auth.auth-home { max-width: 560px; }
.home-auth-wrap { width: 100%; max-width: 560px; }
.home-feature-grid { grid-template-columns: 1fr 1fr; }
.home-feature:last-child { grid-column: 1 / -1; min-height: 270px; }
.home-private-card { grid-template-columns: 230px minmax(0, 1fr); }
.home-final-in { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 700px) {
.home-hero { padding: 58px 0 64px; }
.home-hero-grid { grid-template-columns: minmax(0, 1fr); }
.home-copy, .home-auth-wrap, .auth.auth-home { min-width: 0; max-width: 100%; }
.home-copy h1 { margin-top: 20px; font-size: clamp(43px, 13.4vw, 62px); }
.home-lede { font-size: 16.5px; }
.home-actions { flex-direction: column; }
.home-actions .btn { width: 100%; flex: none; }
.home-assurances { align-items: flex-start; flex-direction: column; }
.hero-auth-card { width: 100%; min-width: 0; padding: 24px; border-radius: 18px; }
.home-auth-bottom { align-items: flex-start; flex-direction: column; }
.home-proof-grid { grid-template-columns: 1fr 1fr; }
.home-proof-grid > div { min-height: 102px; padding: 22px 18px; }
.home-proof-grid > div:nth-child(odd) { border-left: 1px solid rgba(149, 200, 240, .1); }
.home-proof-grid > div:nth-child(-n+2) { border-bottom: 1px solid rgba(149, 200, 240, .1); }
.home-how { padding: 82px 0; }
.home-feature-grid { grid-template-columns: 1fr; }
.home-feature, .home-feature:last-child { grid-column: auto; min-height: 278px; }
.home-feature h3 { margin-top: 46px; }
.home-private { padding-bottom: 82px; }
.home-private-card { grid-template-columns: 1fr; padding: 48px 26px; gap: 46px; border-radius: 20px; }
.privacy-orbit { width: 210px; }
.orbit-two { width: 204px; height: 204px; }
.home-final { padding: 72px 0; }
.home-final .home-actions { width: 100%; }
}
@media (max-width: 430px) {
.home .top-in, .auth-page .top-in { height: 62px; }
.home .top-nav, .auth-page .top-nav { gap: 0; }
.home .top .btn.sm, .auth-page .top .btn.sm { padding: 0 11px; }
.home-auth-head { align-items: flex-start; }
.hero-auth-card { padding: 21px; }
.home-proof-grid strong { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
.home-copy, .home-auth-wrap, .home-aurora, .home-wave, .orbit { animation: none; }
.home-feature { transition: none; }
}
/* =====================================================================
Home v2 — cinematic opening, editorial product story
The hero art is an original local asset emitted with a content hash by the
site build. Everything after it is deliberately near-black: the interface
scenes, serif headlines, and slow pinned sequence do the storytelling.
===================================================================== */
.home {
background: #080808;
color: #f4f1ec;
}
.home main { overflow: clip; }
.home .wrap { max-width: 1240px; }
/* The homepage header floats over the opening scene, then becomes a compact
black glass bar once content passes under it. */
.home .top {
position: fixed; inset: 0 0 auto; width: 100%;
border-bottom-color: transparent;
background: linear-gradient(to bottom, rgba(13, 9, 8, .42), transparent);
backdrop-filter: none; -webkit-backdrop-filter: none;
}
.home .top.stuck {
border-bottom-color: rgba(255, 255, 255, .11);
background: rgba(8, 8, 8, .88);
backdrop-filter: saturate(1.1) blur(18px);
-webkit-backdrop-filter: saturate(1.1) blur(18px);
}
.home .top-in { max-width: 1120px; height: 68px; }
.home .brand { color: #fff; }
.home .navlink { color: rgba(255, 255, 255, .68); }
.home .navlink:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.home .top .btn.primary {
border-color: rgba(255, 255, 255, .28);
border-radius: var(--button-radius);
background: rgba(255, 255, 255, .13);
color: #fff;
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.home .top .btn.primary:hover { border-color: #fff; background: #fff; color: #0a0a0a; }
/* Full-bleed cinematic hero. */
.home-hero {
position: relative;
min-height: 100svh;
padding: 132px 0 92px;
display: grid;
align-items: center;
isolation: isolate;
background-color: #8d3f26;
background-image: none;
background-size: cover;
background-position: center;
}
.home-hero::before { content: none; }
.home-hero-shade {
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(to bottom, rgba(7, 6, 5, .14) 0%, rgba(10, 7, 5, .04) 30%, rgba(13, 7, 4, .35) 68%, rgba(8, 6, 5, .8) 100%),
radial-gradient(ellipse 82% 62% at 50% 48%, transparent 22%, rgba(25, 9, 4, .34) 100%);
}
.home-hero-in {
min-height: calc(100svh - 224px);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.home-kicker {
display: flex; align-items: center; gap: 11px;
color: #e9a27e;
font-size: 11px; font-weight: 720; line-height: 1.3;
letter-spacing: .14em; text-transform: uppercase;
}
.home-kicker > span {
width: 28px; height: 1px; flex: none;
background: currentColor;
box-shadow: none;
}
.home-hero-kicker { color: rgba(255, 255, 255, .8); }
.home-hero h1 {
max-width: 12ch;
margin-top: 24px;
color: #fff;
font-family: var(--serif);
font-size: clamp(58px, 7.5vw, 104px);
font-weight: 400;
line-height: .91;
letter-spacing: -.061em;
text-wrap: balance;
text-shadow: 0 3px 28px rgba(36, 11, 2, .2);
}
.home-hero h1 em {
color: #fff3e9;
font-style: italic;
font-weight: 400;
}
.home-lede {
max-width: 650px;
margin-top: 27px;
color: rgba(255, 255, 255, .82);
font-size: 18px;
line-height: 1.58;
text-shadow: 0 2px 18px rgba(30, 8, 2, .24);
}
.home-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.home-actions .btn { height: 52px; padding: 0 23px; border-radius: var(--button-radius); }
.home-primary {
border-color: #fff;
background: #fff;
color: #0b0b0b;
box-shadow: 0 14px 34px rgba(38, 12, 4, .18);
}
.home-primary:hover {
border-color: #f5d6c6;
background: #f5d6c6;
color: #0b0b0b;
transform: translateY(-1px);
}
.home-secondary {
border-color: rgba(255, 255, 255, .3);
background: rgba(255, 255, 255, .08);
color: #fff;
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.home-secondary:hover {
border-color: rgba(255, 255, 255, .7);
background: rgba(255, 255, 255, .16);
color: #fff;
}
.home-actions .btn svg,
.hero-auth-card .btn svg,
.home-private-card a svg,
.home-access-copy a svg {
width: 18px; height: 18px;
fill: none; stroke: currentColor; stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round;
}
.home-assurances {
display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
margin-top: 25px;
color: rgba(255, 255, 255, .78);
font-size: 12.5px;
}
.home-assurances span {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 11px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px;
background: rgba(30, 13, 7, .12);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.home-assurances svg {
width: 16px; height: 16px;
fill: none; stroke: #fff0e8; stroke-width: 1.55;
stroke-linecap: round; stroke-linejoin: round;
}
.home-scroll-cue {
position: absolute; left: 50%; bottom: 24px;
display: flex; align-items: center; gap: 8px;
transform: translateX(-50%);
color: rgba(255, 255, 255, .7);
font-size: 12px;
text-decoration: none;
}
.home-scroll-cue:hover { color: #fff; }
.home-scroll-cue svg {
width: 17px; height: 17px;
fill: none; stroke: currentColor; stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round;
animation: scrollNudge 1.8s ease-in-out infinite;
}
/* Proof strip. */
.home-proof {
border-block: 1px solid #242424;
background: #090909;
}
.home-proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.home-proof-grid > div {
min-height: 122px;
padding: 30px 28px;
display: grid; align-content: center; gap: 5px;
border-left: 1px solid #242424;
}
.home-proof-grid > div:last-child { border-right: 1px solid #242424; }
.home-proof-grid strong {
color: #f7f3ef;
font-family: var(--serif);
font-size: 31px; font-weight: 400; line-height: 1;
letter-spacing: -.04em;
}
.home-proof-grid span { color: #777; font-size: 12px; }
/* Editorial introduction + product workspace. */
.home-story { padding: 150px 0 132px; background: #090909; }
.home-story-grid {
display: grid;
grid-template-columns: minmax(310px, .72fr) minmax(560px, 1.28fr);
gap: clamp(64px, 8vw, 112px);
align-items: center;
}
.home-story-copy h2,
.home-flow-copy h2,
.home-private-card h2,
.home-access-copy h2,
.home-final h2 {
margin-top: 20px;
color: #f5f2ed;
font-family: var(--serif);
font-size: clamp(48px, 5.6vw, 76px);
font-weight: 400;
line-height: .98;
letter-spacing: -.055em;
}
.home-story-copy h2 em,
.home-final h2 em { color: #d78662; font-weight: 400; }
.home-story-copy > p:last-child,
.home-flow-sticky > p:last-of-type,
.home-access-copy > p {
max-width: 48ch;
margin-top: 25px;
color: #8e8e8e;
font-size: 16px;
line-height: 1.7;
}
.home-workspace {
position: relative;
overflow: hidden;
min-height: 590px;
padding: 18px;
border: 1px solid #2a2a2a;
border-radius: 28px;
background: #121212;
box-shadow: 0 42px 100px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .035);
}
.home-workspace::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(135deg, rgba(255, 138, 91, .06), transparent 35%);
}
.workspace-bar {
height: 56px;
display: flex; align-items: center; gap: 12px;
padding: 0 10px 14px;
border-bottom: 1px solid #272727;
color: #d8d8d8;
font-size: 13px; font-weight: 620;
}
.workspace-mark {
width: 30px; height: 30px;
display: grid; place-items: center;
border: 1px solid #333; border-radius: 9px;
background: #0b0b0b;
}
.workspace-mark svg { width: 21px; fill: none; stroke: #f4f4f4; stroke-width: 3; stroke-linecap: round; }
.workspace-status {
margin-left: auto;
display: inline-flex; align-items: center; gap: 7px;
color: #929292; font-size: 11px; font-weight: 500;
}
.workspace-status i { width: 6px; height: 6px; border-radius: 50%; background: #df8a64; box-shadow: 0 0 12px #df8a64; }
.workspace-patient {
margin: 24px 6px 0;
padding: 19px;
display: flex; align-items: center; gap: 14px;
border: 1px solid #292929; border-radius: 17px;
background: #191919;
}
.workspace-avatar {
width: 44px; height: 44px;
display: grid; place-items: center;
border-radius: 50%;
background: #f0e1d8; color: #322018;
font-size: 12px; font-weight: 740;
}
.workspace-patient > div { display: grid; gap: 3px; }
.workspace-patient b { color: #eee; font-size: 14px; }
.workspace-patient div span { color: #777; font-size: 11px; }
.workspace-check {
width: 30px; height: 30px; margin-left: auto;
display: grid; place-items: center;
border-radius: 50%; background: #1e3029; color: #68cb9d;
}
.workspace-check svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.workspace-steps { margin: 18px 6px 0; display: grid; gap: 8px; }
.workspace-steps > div {
min-height: 68px; padding: 0 18px;
display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 11px;
border: 1px solid transparent; border-radius: 15px;
color: #777; background: #111;
}
.workspace-steps > div > span {
width: 30px; height: 30px; display: grid; place-items: center;
border-radius: 50%; background: #202020;
color: #737373; font-family: var(--mono); font-size: 10px;
}
.workspace-steps b { font-size: 13px; font-weight: 570; }
.workspace-steps small { color: #5e5e5e; font-size: 10px; }
.workspace-steps .done { color: #a9a9a9; }
.workspace-steps .done > span { background: #1e3029; color: #70c99f; }
.workspace-steps .active {
border-color: rgba(226, 139, 99, .34);
background: linear-gradient(100deg, rgba(211, 113, 72, .18), #171717 64%);
color: #f0e8e3;
}
.workspace-steps .active > span { background: #d77d57; color: #160b07; }
.workspace-steps .active small { color: #d88a68; }
.workspace-note {
margin: 18px 6px 0; padding: 14px 16px;
display: flex; align-items: center; gap: 12px;
border: 1px solid #292929; border-radius: 14px;
background: #0d0d0d;
}
.workspace-note > span { color: #d58a69; }
.workspace-note svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.45; }
.workspace-note p { display: grid; color: #666; font-size: 10.5px; line-height: 1.5; }
.workspace-note b { color: #bdbdbd; font-size: 11px; }
/* Sticky product walkthrough. */
.home-flow { padding: 138px 0 126px; border-top: 1px solid #1f1f1f; background: #090909; }
.home-flow-grid {
display: grid;
grid-template-columns: minmax(300px, .72fr) minmax(540px, 1.08fr);
gap: clamp(70px, 9vw, 132px);
align-items: start;
}
.home-flow-sticky { position: sticky; top: 132px; }
.home-flow-copy h2 { font-size: clamp(52px, 5.5vw, 74px); }
.home-flow-index {
display: flex; align-items: center; gap: 10px;
margin-top: 38px;
color: #4a4a4a;
font-family: var(--mono); font-size: 10px;
}
.home-flow-index span { transition: color .25s; }
.home-flow-index span.active { color: #e09471; }
.home-flow-index i { width: 38px; height: 1px; background: #2c2c2c; }
.home-flow-stack { display: grid; gap: 28px; }
.home-flow-card {
min-height: 570px;
padding: clamp(30px, 4.5vw, 50px);
display: flex; flex-direction: column;
overflow: hidden;
border: 1px solid #292929;
border-radius: 26px;
background: linear-gradient(145deg, #151515, #101010);
box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}
.flow-card-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.flow-card-head > span {
width: 35px; height: 35px; display: grid; place-items: center;
border-radius: 50%; background: #e18a63; color: #170b07;
font-family: var(--mono); font-size: 10px; font-weight: 750;
}
.flow-card-head small { color: #6e6e6e; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.home-flow-card h3 {
margin-top: 34px; color: #f0eeeb;
font-family: var(--serif); font-size: clamp(44px, 5vw, 66px);
font-weight: 400; line-height: 1; letter-spacing: -.05em;
}
.home-flow-card > p { max-width: 52ch; margin-top: 16px; color: #898989; font-size: 14.5px; line-height: 1.7; }
.flow-visual {
position: relative; min-height: 230px; margin-top: auto;
border: 1px solid #292929; border-radius: 20px;
background: #0b0b0b;
}
.flow-paste { padding: 33px; display: grid; grid-template-columns: 1fr 54px .72fr; align-items: center; gap: 17px; }
.paste-source {
min-height: 142px; padding: 19px;
display: grid; align-content: start; gap: 14px;
border: 1px solid #333; border-radius: 14px; background: #171717;
}
.paste-source span { color: #8d8d8d; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.paste-source i { display: block; width: 100%; height: 7px; border-radius: 10px; background: #2c2c2c; }
.paste-source i:nth-of-type(2) { width: 76%; }
.paste-source i:nth-of-type(3) { width: 88%; }
.flow-paste > svg { width: 54px; fill: none; stroke: #a8674a; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.paste-result {
min-height: 142px; display: grid; place-content: center; text-align: center;
border: 1px solid rgba(224, 138, 99, .42); border-radius: 14px;
background: rgba(202, 104, 65, .12);
}
.paste-result b { color: #f2c3ad; font-family: var(--serif); font-size: 34px; font-weight: 400; }
.paste-result span { color: #8d6655; font-size: 11px; }
.flow-map { padding: 25px; display: grid; grid-template-columns: 1fr .78fr; align-items: center; gap: 24px; }
.flow-map > svg { width: 100%; overflow: visible; }
.map-outline { fill: rgba(255, 255, 255, .02); stroke: #373737; stroke-width: 1.2; }
.map-route { fill: none; stroke: #d67f58; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 6; }
.flow-map circle { fill: #e59773; stroke: #432216; stroke-width: 5; }
.flow-map > div, .flow-docs > div { display: grid; gap: 5px; }
.flow-map b, .flow-docs > div b { color: #e1dfdc; font-size: 13px; }
.flow-map span, .flow-docs > div span { color: #686868; font-size: 10.5px; }
.flow-docs { min-height: 250px; }
.flow-doc { position: absolute; width: 132px; height: 168px; border: 1px solid #3a3a3a; border-radius: 9px; background: #181818; }
.flow-doc-back { left: 42px; bottom: 29px; transform: rotate(-8deg); }
.flow-doc-mid { left: 68px; bottom: 27px; transform: rotate(-2deg); background: #202020; }
.flow-doc-front { left: 94px; bottom: 24px; padding: 24px 19px; display: grid; align-content: start; gap: 12px; transform: rotate(5deg); background: #e8dfd8; }
.flow-doc-front i { display: block; height: 5px; border-radius: 6px; background: #b4aaa2; }
.flow-doc-front i:nth-child(2) { width: 72%; }
.flow-doc-front b { margin-top: auto; color: #6c4535; font-family: var(--serif); font-size: 27px; font-weight: 400; }
.flow-docs > div { position: absolute; right: 42px; top: 50%; transform: translateY(-50%); }
/* A slow horizontal rail gives the middle of the page a change in direction. */
.home-rail { padding: 122px 0 132px; overflow: hidden; border-top: 1px solid #202020; background: #090909; }
.home-rail-head p {
max-width: 12ch;
color: #f2efeb;
font-family: var(--serif); font-size: clamp(52px, 7vw, 92px);
font-weight: 400; line-height: .94; letter-spacing: -.06em;
}
.home-rail-window { margin-top: 65px; overflow: hidden; }
.home-rail-track {
width: max-content;
display: flex; gap: 18px;
padding-left: max(28px, calc((100vw - 1240px) / 2 + 28px));
animation: railDrift 42s linear infinite;
}
.home-rail-track:hover { animation-play-state: paused; }
.home-rail-track article {
width: 330px; height: 330px; padding: 28px;
display: flex; flex-direction: column;
border: 1px solid #292929; border-radius: 24px;
background:
radial-gradient(circle at 80% 18%, rgba(217, 124, 82, .13), transparent 35%),
#121212;
}
.home-rail-track article:nth-child(even) { background: radial-gradient(circle at 20% 86%, rgba(126, 109, 205, .1), transparent 35%), #121212; }
.home-rail-track span { color: #777; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.home-rail-track h3 { margin-top: auto; color: #ddd; font-family: var(--serif); font-size: 31px; font-weight: 400; line-height: 1.05; }
.home-rail-track small { margin-top: 13px; color: #a4674c; font-size: 11px; }
/* Privacy architecture. */
.home-private { padding: 0 0 140px; background: #090909; }
.home-private-card {
min-height: 550px; padding: 72px clamp(36px, 7vw, 86px);
display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.05fr);
gap: clamp(58px, 9vw, 120px); align-items: center;
border: 1px solid #2c2c2c; border-radius: 30px;
background:
radial-gradient(circle at 13% 50%, rgba(222, 126, 83, .13), transparent 32%),
linear-gradient(135deg, #171412, #101010 68%);
box-shadow: 0 40px 120px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .035);
}
.home-private-card > div:last-child { max-width: 670px; }
.home-private-card h2 { font-size: clamp(50px, 5.4vw, 74px); }
.home-private-card > div > p:last-of-type { margin-top: 23px; color: #8d8d8d; font-size: 16px; line-height: 1.72; }
.home-private-card a,
.home-access-copy a {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 27px;
color: #dda181; font-size: 14px; font-weight: 620; text-decoration: none;
}
.home-private-card a:hover, .home-access-copy a:hover { color: #f1c6af; }
.privacy-orbit { position: relative; width: min(265px, 100%); aspect-ratio: 1; margin: 0 auto; }
.privacy-core {
position: absolute; z-index: 2; inset: 50% auto auto 50%;
width: 90px; height: 90px; display: grid; place-items: center;
transform: translate(-50%, -50%);
border: 1px solid rgba(227, 143, 103, .42); border-radius: 50%;
background: linear-gradient(145deg, #5c2e1e, #241510);
box-shadow: 0 0 70px rgba(204, 100, 59, .2), inset 0 1px rgba(255, 255, 255, .1);
}
.privacy-core svg { width: 44px; height: 44px; fill: none; stroke: #efb497; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.orbit { position: absolute; inset: 50% auto auto 50%; border: 1px solid rgba(225, 142, 101, .17); border-radius: 50%; transform: translate(-50%, -50%); }
.orbit::after { content: ""; position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: #e58f67; box-shadow: 0 0 16px #d57148; }
.orbit-one { width: 170px; height: 170px; animation: orbit 18s linear infinite; }
.orbit-two { width: 244px; height: 244px; border-color: rgba(144, 122, 210, .13); animation: orbit 27s linear infinite reverse; }
.orbit-two::after { background: #9a87dc; box-shadow: 0 0 16px rgba(154, 135, 220, .7); }
/* Functional sign-in, presented as the product's quiet handoff. */
.home-access { padding: 140px 0; background: #eee7e0; color: #15110f; }
.home-access-grid {
display: grid; grid-template-columns: minmax(0, .88fr) minmax(420px, .72fr);
gap: clamp(64px, 10vw, 142px); align-items: center;
}
.home-access .home-kicker { color: #a34f30; }
.home-access-copy h2 { color: #17110f; font-size: clamp(50px, 5.7vw, 78px); }
.home-access-copy > p { color: #716862; }
.home-access-copy a { color: #843c25; }
.home-access-copy a:hover { color: #4f2113; }
.home-auth-wrap { position: relative; }
.home-card-glow {
position: absolute; inset: 8% -10% -8%; z-index: 0;
border-radius: 46%; filter: blur(54px); opacity: .24;
background: linear-gradient(150deg, #df855f, #a34f31 70%, #574670);
}
.auth.auth-home { position: relative; z-index: 1; max-width: 500px; }
.hero-auth-card {
position: relative; overflow: hidden;
padding: 31px;
border: 1px solid #303030; border-radius: 24px;
background: linear-gradient(145deg, #171717, #0f0f0f);
color: #eee;
box-shadow: 0 38px 100px rgba(45, 21, 12, .22), inset 0 1px rgba(255, 255, 255, .05);
}
.hero-auth-card::before { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(233, 149, 109, .7), transparent); }
.home-auth-head { display: flex; align-items: center; gap: 14px; margin-bottom: 27px; }
.home-auth-head .mark { width: 43px; height: 43px; border-radius: 12px; }
.home-auth-head .mark svg { width: 43px; height: 43px; }
.home-auth-head h2 { margin-top: 3px; color: #efefef; font-size: 20px; letter-spacing: -.025em; }
.home-auth-eyebrow { color: #89736a; font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.hero-auth-card .auth-step > * + * { margin-top: 17px; }
.hero-auth-card .field > label { color: #c5bcb7; font-size: 13px; }
.hero-auth-card .field input,
.hero-auth-card .field select {
height: 49px; border-color: #343434; border-radius: 10px;
background-color: #0b0b0b; color: #f5f3f1;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
}
.hero-auth-card .field input::placeholder { color: #625a56; }
.hero-auth-card .field input:hover,
.hero-auth-card .field select:hover { border-color: #755444; }
.hero-auth-card .field input:focus,
.hero-auth-card .field select:focus { border-color: #d47e59; box-shadow: 0 0 0 3px rgba(210, 119, 80, .15); }
.hero-auth-card .btn.primary {
height: 49px; border: 0; border-radius: var(--button-radius);
background: #f1ece8; color: #14100e;
box-shadow: none;
}
.hero-auth-card .btn.primary:hover { background: #e9c9ba; color: #14100e; }
.hero-auth-card .auth-degrade { margin-top: 18px; padding-top: 17px; border-color: #292929; color: #756d68; font-size: 12px; }
.home-auth-bottom {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
margin-top: 22px; padding-top: 19px; border-top: 1px solid #292929;
color: #766c67; font-size: 12px;
}
.home-auth-bottom span { display: inline-flex; align-items: center; gap: 7px; }
.home-auth-bottom svg { width: 15px; height: 15px; fill: none; stroke: #d48a69; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.home-auth-bottom a { color: #d79b7d; font-weight: 600; text-decoration: none; }
.home-auth-bottom a:hover { color: #efc4ae; text-decoration: underline; }
.home-auth-note { margin-top: 14px; text-align: center; color: #806f66; font-size: 12px; }
/* Closing statement. */
.home-final {
padding: 148px 0 136px;
background:
radial-gradient(ellipse 60% 70% at 50% 115%, rgba(181, 75, 42, .24), transparent 70%),
#090909;
}
.home-final-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.home-final h2 { max-width: 990px; font-size: clamp(55px, 7.4vw, 100px); }
.home-final .home-actions { margin-top: 42px; }
/* Motion is opt-in from site.js so blocked JavaScript never hides content. */
.home-motion-ready [data-reveal] {
opacity: 0;
transform: translateY(24px);
transition: opacity .72s cubic-bezier(.2, .7, .25, 1), transform .72s cubic-bezier(.2, .7, .25, 1);
}
.home-motion-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@keyframes scrollNudge {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}
@keyframes heroAmbientGlow {
0%, 100% { opacity: .16; transform: scale(.94) translateY(1.5%); }
50% { opacity: .29; transform: scale(1.08) translateY(-1%); }
}
@keyframes railDrift { to { transform: translateX(-38%); } }
@media (max-width: 1040px) {
.home-story-grid, .home-flow-grid { grid-template-columns: 1fr; }
.home-story-copy { max-width: 720px; }
.home-workspace { width: 100%; max-width: 760px; }
.home-flow-sticky { position: relative; top: auto; max-width: 720px; }
.home-flow-index { display: none; }
.home-flow-stack { grid-template-columns: 1fr 1fr; }
.home-flow-card:last-child { grid-column: 1 / -1; }
.home-access-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
}
@media (max-width: 820px) {
.home .top-in { height: 68px; }
.home-hero { padding-top: 116px; background-position: 56% center; }
.home-story { padding: 110px 0 100px; }
.home-story-grid { gap: 54px; }
.home-flow { padding: 104px 0 96px; }
.home-flow-grid { gap: 58px; }
.home-flow-stack { grid-template-columns: 1fr; }
.home-flow-card:last-child { grid-column: auto; }
.home-rail { padding: 96px 0 106px; }
.home-private { padding-bottom: 106px; }
.home-private-card { grid-template-columns: 1fr; gap: 52px; padding: 58px 36px; }
.home-access { padding: 108px 0; }
.home-access-grid { grid-template-columns: 1fr; }
.auth.auth-home, .home-auth-wrap { width: 100%; max-width: 560px; }
.home-final { padding: 112px 0 108px; }
}
@media (max-width: 700px) {
.home .wrap { padding-inline: 20px; }
.home .top .brand { gap: 8px; }
.home .top .brand > span:last-child { font-size: 14px; }
.home-hero { min-height: 830px; padding: 108px 0 78px; }
.home-hero-in { min-height: 640px; justify-content: center; }
.home-hero h1 { max-width: 10ch; font-size: clamp(52px, 15vw, 78px); }
.home-lede { max-width: 37ch; font-size: 16px; }
.home-actions { width: 100%; flex-direction: column; }
.home-actions .btn { width: 100%; }
.home-assurances { align-items: center; flex-direction: column; }
.home-scroll-cue { bottom: 18px; }
.home-proof-grid { grid-template-columns: 1fr 1fr; }
.home-proof-grid > div { min-height: 104px; padding: 22px 18px; }
.home-proof-grid > div:nth-child(-n+2) { border-bottom: 1px solid #242424; }
.home-story-copy h2,
.home-flow-copy h2,
.home-private-card h2,
.home-access-copy h2 { font-size: clamp(46px, 13vw, 64px); }
.home-workspace { min-height: 520px; padding: 13px; border-radius: 22px; }
.workspace-bar { font-size: 11px; }
.workspace-patient { padding: 14px; }
.workspace-steps > div { min-height: 61px; padding-inline: 13px; grid-template-columns: 33px 1fr; }
.workspace-steps small { display: none; }
.workspace-note { display: none; }
.home-flow-card { min-height: 520px; border-radius: 22px; }
.flow-paste { padding: 20px; grid-template-columns: 1fr; }
.flow-paste > svg { display: none; }
.paste-source, .paste-result { min-height: 94px; }
.flow-map { grid-template-columns: 1fr; }
.flow-map > svg { max-height: 130px; }
.flow-docs > div { right: 24px; }
.flow-doc-back { left: 22px; }
.flow-doc-mid { left: 45px; }
.flow-doc-front { left: 68px; }
.home-rail-window { overflow-x: auto; scrollbar-width: none; }
.home-rail-window::-webkit-scrollbar { display: none; }
.home-rail-track { animation: none; padding-right: 20px; }
.home-rail-track article { width: 280px; height: 300px; }
.home-private-card { padding: 46px 24px; border-radius: 24px; }
.privacy-orbit { width: 230px; }
.orbit-two { width: 220px; height: 220px; }
.home-access-grid { gap: 52px; }
.hero-auth-card { padding: 24px; border-radius: 20px; }
.home-auth-bottom { align-items: flex-start; flex-direction: column; }
.home-final h2 { font-size: clamp(50px, 14vw, 72px); }
}
@media (max-width: 430px) {
.home .top-in { height: 62px; }
.home .top .btn.sm { height: 32px; padding: 0 11px; }
.home-hero { min-height: 780px; background-position: 61% center; }
.home-hero-in { min-height: 600px; }
.home-hero h1 { font-size: clamp(48px, 15.5vw, 66px); }
.home-assurances span { font-size: 11px; }
.home-proof-grid strong { font-size: 27px; }
.home-workspace { min-height: 490px; }
.workspace-bar > span:nth-child(2) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.home-flow-card { min-height: 500px; padding: 26px 21px; }
.home-flow-card h3 { font-size: 47px; }
.flow-visual { min-height: 210px; }
.flow-docs > div { left: 22px; right: auto; top: 20px; transform: none; }
.flow-doc-back { left: 64px; bottom: 16px; }
.flow-doc-mid { left: 88px; bottom: 14px; }
.flow-doc-front { left: 112px; bottom: 11px; width: 108px; height: 140px; }
.home-auth-head { align-items: flex-start; }
.hero-auth-card { padding: 21px; }
}
@media (prefers-reduced-motion: reduce) {
.home-scroll-cue svg, .home-rail-track, .orbit { animation: none; }
.home-motion-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
}
/* =====================================================================
print — the legal pages get printed and filed, so they should print well
===================================================================== */
@media print {
.top, .foot, .skip, .cta-row, .toc { display: none; }
body { background: #fff; color: #000; font-size: 11pt; }
.doc { padding: 0; font-size: 11pt; }
.doc h2 { page-break-after: avoid; }
.doc-head { padding-top: 0; }
a { text-decoration: none; color: #000; }
}
/* ---- account ----
Injected by site.js once /api/me answers. The signed-out state is plain
markup in header.html and needs nothing here. */
.account-in { display: inline-flex; align-items: center; gap: .55rem; }
.account-who {
max-width: 14ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 640px) { .account-who { display: none; } }
/* =====================================================================
Contact + closing sign-in — the homepage's quiet final act
===================================================================== */
.visually-hidden {
position: absolute !important;
width: 1px !important; height: 1px !important;
padding: 0 !important; margin: -1px !important;
overflow: hidden !important; clip: rect(0 0 0 0) !important;
white-space: nowrap !important; border: 0 !important;
}
.home-contact {
padding: 134px 0;
color: #171311;
background: #eee8e2;
}
.home-contact-grid {
display: grid;
grid-template-columns: minmax(0, .82fr) minmax(460px, .9fr);
align-items: start;
gap: clamp(64px, 10vw, 136px);
}
.home-contact .home-kicker { color: #a34f30; }
.home-contact-copy h2 {
max-width: 8.5ch;
margin-top: 22px;
color: #171311;
font-family: var(--serif);
font-size: clamp(52px, 6.2vw, 82px);
font-weight: 400;
line-height: .96;
letter-spacing: -.055em;
}
.home-contact-copy > p {
max-width: 48ch;
margin-top: 26px;
color: #6f655f;
font-size: 17px;
line-height: 1.65;
}
.contact-boundary {
display: flex;
align-items: flex-start;
gap: 12px;
max-width: 47ch;
margin-top: 32px;
padding-top: 25px;
border-top: 1px solid rgba(41, 31, 26, .14);
color: #766861;
font-size: 13px;
line-height: 1.55;
}
.contact-boundary svg {
width: 20px; height: 20px; flex: none;
fill: none; stroke: #a95032; stroke-width: 1.6;
stroke-linecap: round; stroke-linejoin: round;
}
.contact-form {
position: relative;
padding: 34px;
border: 1px solid rgba(47, 33, 26, .12);
border-radius: 24px;
background: rgba(255, 255, 255, .56);
box-shadow: 0 30px 80px rgba(61, 33, 20, .09);
}
.contact-form > * + * { margin-top: 18px; }
.contact-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-field { display: grid; gap: 7px; }
.contact-field label {
color: #312923;
font-size: 12px; font-weight: 700;
letter-spacing: .035em;
}
.contact-field label span { color: #968a82; font-weight: 500; }
.contact-field input,
.contact-field select,
.contact-field textarea {
width: 100%;
border: 1px solid rgba(49, 35, 28, .18);
border-radius: 11px;
background: rgba(255, 255, 255, .72);
color: #191411;
font: inherit;
font-size: 15px;
box-shadow: inset 0 1px 2px rgba(42, 26, 17, .025);
transition: border-color .15s, box-shadow .15s, background .15s;
}
.contact-field input,
.contact-field select { height: 48px; padding: 0 13px; }
.contact-field textarea { min-height: 136px; padding: 12px 13px; resize: vertical; line-height: 1.55; }
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: #a29790; }
.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover { border-color: rgba(151, 76, 46, .42); }
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
outline: none;
border-color: #ad5d3d;
background: #fff;
box-shadow: 0 0 0 3px rgba(173, 93, 61, .12);
}
.contact-trap {
position: absolute; left: -10000px; top: auto;
width: 1px; height: 1px; overflow: hidden;
}
.contact-confirm {
display: flex; align-items: flex-start; gap: 10px;
color: #675d57;
font-size: 13px; line-height: 1.5;
cursor: pointer;
}
.contact-confirm input { width: 17px; height: 17px; margin: 2px 0 0; flex: none; accent-color: #a74e30; }
.contact-submit-row {
display: flex; align-items: center; justify-content: space-between; gap: 20px;
padding-top: 4px;
}
.contact-submit {
height: 50px;
padding: 0 22px;
border: 0;
border-radius: var(--button-radius);
background: #171311;
color: #fff;
}
.contact-submit:hover { background: #a64f31; color: #fff; }
.contact-submit svg {
width: 18px; height: 18px;
fill: none; stroke: currentColor; stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round;
}
.contact-submit-row p { max-width: 19ch; color: #998d85; font-size: 11.5px; line-height: 1.45; text-align: right; }
.contact-msg {
padding: 11px 13px;
border: 1px solid rgba(173, 80, 47, .22);
border-radius: 10px;
background: rgba(173, 80, 47, .08);
color: #7d371f;
font-size: 13px;
line-height: 1.5;
}
.contact-msg.ok {
border-color: rgba(52, 119, 82, .23);
background: rgba(52, 119, 82, .09);
color: #245d3d;
}
.home-login-band {
position: relative;
min-height: 760px;
padding: 126px 0 112px;
display: grid;
align-items: center;
isolation: isolate;
color: #fff;
background-color: #7f341f;
background-image: none;
background-size: cover;
background-position: center 42%;
}
.home-login-band::before {
content: "";
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(to bottom, rgba(48, 17, 7, .42), rgba(55, 18, 7, .57)),
radial-gradient(ellipse 74% 72% at 50% 42%, rgba(148, 54, 25, .08), rgba(25, 9, 5, .28));
}
.home-login-band-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.home-login-band .home-kicker { color: rgba(255, 255, 255, .74); }
.home-login-band h2 {
margin-top: 21px;
color: #fff;
font-family: var(--serif);
font-size: clamp(58px, 7vw, 92px);
font-weight: 400;
line-height: .96;
letter-spacing: -.055em;
text-wrap: balance;
}
.home-login-lede {
max-width: 660px;
margin-top: 23px;
color: rgba(255, 255, 255, .78);
font-size: 17px;
line-height: 1.6;
}
.home-login-band .home-auth-wrap { width: min(100%, 640px); margin-top: 36px; animation: none; }
.home-login-band .auth.auth-home { width: 100%; max-width: none; }
.login-band-card {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: #fff;
box-shadow: none;
}
.login-band-card .auth-step > * + * { margin-top: 16px; }
.login-pill {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-height: 82px;
padding: 9px 9px 9px 27px;
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 999px;
background: rgba(119, 50, 28, .5);
box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 18px 46px rgba(39, 12, 5, .13);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.login-pill input {
width: 100%; height: 54px; min-width: 0;
padding: 0;
border: 0;
outline: 0;
background: transparent;
color: #fff;
font: inherit;
font-size: 17px;
}
.login-pill input::placeholder { color: rgba(255, 255, 255, .7); }
.login-pill-submit {
height: 62px;
min-width: 174px;
padding: 0 24px;
border: 0;
border-radius: 999px;
background: #fff;
color: #15100e;
font-size: 16px;
}
.login-pill-submit:hover { background: #f2d7ca; color: #15100e; }
.login-pill-submit svg {
width: 20px; height: 20px;
fill: none; stroke: currentColor; stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round;
}
.login-band-card .auth-msg { text-align: left; }
.login-band-card .auth-degrade {
margin-top: 17px; padding-top: 0; border: 0;
color: rgba(255, 255, 255, .58);
font-size: 12px;
}
.login-band-card .auth-sent { color: rgba(255, 255, 255, .82); }
.login-band-card .field { text-align: left; }
.login-band-card .field > label { color: rgba(255, 255, 255, .82); }
.login-band-card .field input,
.login-band-card .field select {
height: 50px;
border-color: rgba(255, 255, 255, .2);
border-radius: 11px;
background: rgba(56, 20, 9, .58);
color: #fff;
}
.login-band-card .field input:focus,
.login-band-card .field select:focus {
border-color: rgba(255, 255, 255, .68);
box-shadow: 0 0 0 3px rgba(255, 255, 255, .12);
}
.login-band-card .btn.primary {
border: 0;
border-radius: var(--button-radius);
background: #fff;
color: #15100e;
}
.login-band-card .linkbtn { color: #f3c7b2; }
.login-skip {
display: inline-block;
margin-top: 16px;
color: rgba(255, 255, 255, .78);
font-size: 14px;
text-underline-offset: 4px;
}
.login-skip:hover { color: #fff; }
.home-login-band .home-auth-note { margin-top: 16px; color: rgba(255, 255, 255, .52); }
.home .foot {
margin-top: 0;
border-top-color: rgba(255, 255, 255, .1);
background: #090909;
}
.home .foot > .wrap { max-width: 1120px; }
.home .foot .brand { color: #f7f4f1; }
.home .foot a,
.home .foot-about p { color: #a99f99; }
.home .foot a:hover { color: #f7f4f1; }
.home .foot-nav-title,
.home .foot-notice,
.home .foot-bottom { color: #817771; }
.home .foot-notice,
.home .foot-bottom { border-color: rgba(255, 255, 255, .1); }
.home .foot-notice { background: #111; }
.home .foot-notice-mark { border-color: rgba(255, 255, 255, .14); color: #a99f99; }
.home .foot-notice strong { color: #bcb2ac; }
@media (max-width: 900px) {
.home-contact { padding: 104px 0; }
.home-contact-grid { grid-template-columns: 1fr; gap: 54px; }
.home-contact-copy { max-width: 680px; }
.home-contact-copy h2 { max-width: 10ch; }
.contact-form { max-width: 680px; }
}
@media (max-width: 600px) {
.home-contact { padding: 82px 0; }
.home-contact-copy h2 { font-size: clamp(48px, 14vw, 66px); }
.contact-form { padding: 24px 20px; border-radius: 19px; }
.contact-pair { grid-template-columns: 1fr; }
.contact-submit-row { align-items: stretch; flex-direction: column; }
.contact-submit { width: 100%; }
.contact-submit-row p { max-width: none; text-align: center; }
.home-login-band { min-height: 720px; padding: 100px 0 90px; }
.home-login-band h2 { font-size: clamp(51px, 14vw, 70px); }
.home-login-lede { font-size: 15.5px; }
.login-pill { grid-template-columns: 1fr; padding: 10px; border-radius: 24px; }
.login-pill input { height: 50px; padding: 0 12px; text-align: center; }
.login-pill-submit { width: 100%; min-width: 0; height: 56px; }
}
/* =====================================================================
streamlined homepage
The opening artwork stays a true CSS background: content remains readable
without it, and the ambient light layer can move independently without
scaling or softening the supplied illustration.
===================================================================== */
.home-intro {
position: relative;
min-height: max(760px, 100svh);
padding: 128px 0 80px;
display: grid;
align-items: stretch;
isolation: isolate;
overflow: hidden;
background-color: #09071e;
background-image: none;
background-size: cover;
background-position: 50% center;
}
.home-intro::before {
content: "";
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(to bottom, rgba(4, 3, 20, .54) 0%, rgba(6, 4, 23, .25) 44%, rgba(6, 4, 21, .5) 72%, rgba(5, 3, 17, .92) 100%),
radial-gradient(ellipse 64% 50% at 50% 25%, rgba(7, 5, 28, .68) 0%, rgba(8, 5, 28, .36) 52%, transparent 100%);
}
.home-intro::after {
content: "";
position: absolute; z-index: -1;
inset: 20% 16% -6%;
border-radius: 50%;
background: radial-gradient(circle at 50% 59%,
rgba(255, 207, 120, .42) 0%,
rgba(221, 100, 255, .18) 29%,
rgba(87, 72, 255, .09) 49%,
transparent 72%);
filter: blur(34px);
mix-blend-mode: screen;
opacity: .18;
transform: scale(.94) translateY(1.5%);
animation: heroAmbientGlow 9s ease-in-out infinite;
will-change: opacity, transform;
pointer-events: none;
}
.home-intro-in {
position: relative; z-index: 1;
min-height: calc(max(760px, 100svh) - 208px);
padding-top: clamp(16px, 4vh, 46px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
}
.home-intro h1 {
max-width: 900px;
color: #fff;
font-family: var(--serif);
font-size: clamp(56px, 6.7vw, 92px);
font-weight: 400;
line-height: .96;
letter-spacing: -.055em;
text-wrap: balance;
text-shadow: 0 4px 34px rgba(5, 2, 20, .62);
}
.home-intro-in > p {
max-width: 650px;
margin-top: 24px;
color: rgba(255, 255, 255, .84);
font-size: 18px;
line-height: 1.6;
text-shadow: 0 2px 20px rgba(4, 2, 19, .72);
}
.home-open {
min-width: 194px;
height: 52px;
margin-top: 30px;
border-color: rgba(255, 255, 255, .9);
border-radius: 999px;
background: #fff;
color: #11101a;
box-shadow: 0 14px 42px rgba(255, 177, 94, .22), 0 0 38px rgba(163, 100, 255, .12);
}
.home-open:hover {
border-color: #fff1db;
background: #fff1db;
color: #11101a;
transform: translateY(-1px);
}
.home-availability {
margin-top: 17px;
padding: 6px 11px;
border: 1px solid rgba(255, 255, 255, .17);
border-radius: 999px;
background: rgba(12, 8, 37, .24);
color: rgba(255, 255, 255, .7);
font-size: 12px;
line-height: 1.35;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.home-steps {
padding: 112px 0 120px;
border-top: 1px solid rgba(255, 255, 255, .08);
background:
radial-gradient(ellipse 56% 42% at 50% 0%, rgba(91, 61, 178, .12), transparent 76%),
#090909;
}
.home-section-head { text-align: center; }
.home-section-head h2 {
color: #f7f4f1;
font-family: var(--serif);
font-size: clamp(44px, 5.2vw, 68px);
font-weight: 400;
letter-spacing: -.045em;
}
.home-step-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
margin-top: 54px;
overflow: hidden;
border: 1px solid #29272d;
border-radius: 22px;
background: #29272d;
}
.home-step-grid article {
min-height: 232px;
padding: 34px 32px;
background: linear-gradient(150deg, #111014, #0c0b0e);
}
.home-step-grid article > span {
width: 32px; height: 32px;
display: grid; place-items: center;
border: 1px solid rgba(122, 208, 255, .24);
border-radius: 50%;
background: rgba(75, 130, 255, .08);
color: #8edcff;
font-size: 12px;
font-weight: 700;
}
.home-step-grid h3 { margin-top: 28px; color: #f4f1ee; font-size: 21px; }
.home-step-grid p { max-width: 29ch; margin-top: 11px; color: #8d898f; font-size: 15px; }
@media (max-width: 760px) {
.home-intro { min-height: 780px; padding: 108px 0 64px; background-position: 50% center; }
.home-intro-in { min-height: 608px; padding-top: 14px; }
.home-intro h1 { font-size: clamp(48px, 14.2vw, 68px); line-height: .98; }
.home-intro-in > p { max-width: 36ch; font-size: 16px; }
.home-intro::before {
background:
linear-gradient(to bottom, rgba(4, 3, 20, .64), rgba(7, 4, 24, .34) 48%, rgba(5, 3, 18, .87) 100%),
radial-gradient(ellipse 90% 48% at 50% 21%, rgba(7, 5, 28, .74), transparent 100%);
}
.home-intro::after { inset: 26% -12% 0; filter: blur(28px); }
.home-step-grid { grid-template-columns: 1fr; }
.home-step-grid article { min-height: auto; padding: 28px 26px 30px; }
.home-step-grid h3 { margin-top: 20px; }
.home-steps { padding: 84px 0 90px; }
}
@media (prefers-reduced-motion: reduce) {
.home-intro::after { animation: none; opacity: .21; transform: none; }
}
/* =====================================================================
Simple product landing page
The content stays deliberately spare while the supplied illustration and a
quiet light bloom carry the opening scene.
===================================================================== */
.home-intro {
position: relative;
min-height: max(760px, 100svh);
padding: 142px 0 108px;
display: flex;
align-items: center;
isolation: isolate;
overflow: hidden;
border-bottom: 1px solid var(--line);
background-color: #09071e;
background-image: url("/assets/holdpacket-hero-background.1089a07321.png");
background-size: cover;
background-position: 50% center;
}
.home-intro::before {
content: "";
position: absolute; inset: 0; z-index: 0;
background:
linear-gradient(90deg, rgba(4, 4, 22, .93) 0%, rgba(5, 4, 25, .8) 37%, rgba(7, 4, 25, .24) 70%, rgba(5, 3, 20, .45) 100%),
linear-gradient(to bottom, rgba(5, 4, 22, .34), rgba(6, 4, 23, .12) 52%, rgba(5, 3, 18, .78) 100%);
pointer-events: none;
}
.home-intro::after {
content: "";
position: absolute; z-index: 0;
inset: 17% 11% -5% 33%;
border-radius: 50%;
background: radial-gradient(circle at 52% 60%,
rgba(255, 207, 120, .44) 0%,
rgba(221, 100, 255, .18) 29%,
rgba(87, 72, 255, .09) 49%,
transparent 72%);
filter: blur(34px);
mix-blend-mode: screen;
opacity: .18;
transform: scale(.94) translateY(1.5%);
animation: heroAmbientGlow 9s ease-in-out infinite;
will-change: opacity, transform;
pointer-events: none;
}
.home-intro-in {
position: relative;
z-index: 1;
width: 100%;
min-width: 0;
min-height: 0;
max-width: 1240px;
padding-top: 0;
display: block;
text-align: left;
}
.home-intro h1 {
max-width: 10.5em;
color: #fff;
font-family: var(--serif);
font-size: clamp(48px, 7vw, 82px);
font-weight: 400;
line-height: .99;
letter-spacing: -.045em;
text-wrap: normal;
text-shadow: 0 4px 34px rgba(4, 2, 20, .7);
}
.home-intro-in > p {
max-width: 54ch;
margin-top: 28px;
color: rgba(255, 255, 255, .82);
font-size: 19px;
line-height: 1.6;
text-shadow: 0 2px 20px rgba(4, 2, 19, .72);
}
.home-open {
min-width: 194px;
height: 50px;
margin-top: 36px;
border-color: rgba(255, 255, 255, .92);
border-radius: 999px;
background: #fff;
color: #11101a;
box-shadow: 0 14px 42px rgba(255, 177, 94, .22), 0 0 38px rgba(163, 100, 255, .12);
}
.home-open:hover {
border-color: #fff1db;
background: #fff1db;
color: #11101a;
transform: translateY(-1px);
}
.home-availability {
display: block;
margin-top: 16px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: rgba(255, 255, 255, .62);
font-size: 13px;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.home-intro-copy > p {
max-width: 54ch;
margin-top: 20px;
color: rgba(255, 255, 255, .82);
font-size: 17px;
line-height: 1.6;
text-shadow: 0 2px 20px rgba(4, 2, 19, .72);
}
.home-login-panel {
width: min(100%, 640px);
margin-top: 26px;
}
.home-login-title {
margin-bottom: 9px;
color: rgba(255, 255, 255, .76);
font-size: 13px;
}
.hero-login-card {
padding: 15px;
border-color: rgba(145, 199, 255, .24);
border-radius: 16px;
background: rgba(8, 20, 49, .72);
box-shadow: 0 18px 54px rgba(3, 3, 22, .28), inset 0 1px rgba(255, 255, 255, .06);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.hero-email-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
}
.hero-email-row input {
width: 100%; min-width: 0; height: 48px;
padding: 0 14px;
border: 1px solid rgba(165, 207, 244, .25);
border-radius: 10px;
background: rgba(5, 12, 32, .72);
color: #fff;
font: inherit;
font-size: 15px;
}
.hero-email-row input::placeholder { color: rgba(211, 226, 241, .54); }
.hero-email-row input:focus {
outline: none;
border-color: #65cfff;
box-shadow: 0 0 0 3px rgba(80, 195, 255, .17);
}
.hero-email-submit {
height: 48px;
padding-inline: 19px;
border-color: #71d4ff;
border-radius: var(--button-radius);
background: #58c7f8;
color: #071426;
}
.hero-email-submit:hover { border-color: #92e0ff; background: #7bd8ff; color: #071426; }
.hero-login-step { padding: 3px; }
.home-steps {
padding: 104px 0;
border-bottom: 1px solid var(--line);
background: var(--surface-2);
}
.home-section-head { text-align: left; }
.home-section-head h2,
.home-contact-copy h2 {
color: var(--ink);
font-family: var(--serif);
font-size: clamp(34px, 4.5vw, 48px);
font-weight: 500;
}
.home-section-head > p {
max-width: 620px;
margin-top: 14px;
color: var(--ink-2);
font-size: 16px;
line-height: 1.6;
}
.home-step-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-top: 48px;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
}
.home-step-grid article {
min-height: 0;
padding: 20px 0 0;
display: flex;
min-width: 0;
flex-direction: column;
border-top: 1px solid var(--line-2);
background: transparent;
}
.home-step-grid article > .home-step-number {
width: auto;
height: auto;
display: block;
border: 0;
border-radius: 0;
background: transparent;
color: var(--ink-3);
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
}
.home-step-grid h3 {
margin-top: 32px;
color: var(--ink);
font-size: 18px;
}
.home-step-grid p {
max-width: 30ch;
margin-top: 10px;
color: var(--ink-2);
font-size: 15px;
}
.home-step-preview {
position: relative;
min-height: 286px;
margin: 30px 0 0;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--surface);
box-shadow: var(--shadow-2);
}
.step-preview-bar {
height: 42px;
padding: 0 13px;
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
align-items: center;
border-bottom: 1px solid var(--line);
background: var(--surface-2);
color: var(--ink-2);
}
.step-preview-bar b {
overflow: hidden;
font-size: 10px;
font-weight: 650;
text-overflow: ellipsis;
white-space: nowrap;
}
.step-preview-bar small { color: var(--ink-3); font-size: 8px; }
.preview-dots { display: flex; gap: 4px; }
.preview-dots i {
width: 5px;
height: 5px;
display: block;
border-radius: 50%;
background: var(--line-strong);
opacity: .72;
}
.preview-entry-body,
.preview-packet-body { padding: 20px 18px 17px; }
.preview-heading {
display: flex;
align-items: center;
justify-content: space-between;
}
.preview-heading > span { color: var(--ink); font-size: 11px; font-weight: 700; }
.preview-heading > small {
padding: 3px 6px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent-ink);
font-size: 7px;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
}
.preview-fields {
margin-top: 15px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.preview-fields > div {
min-width: 0;
padding: 9px 10px;
display: grid;
gap: 4px;
border: 1px solid var(--line);
border-radius: 7px;
background: var(--surface);
}
.preview-fields small { color: var(--ink-3); font-size: 7px; }
.preview-fields b {
overflow: hidden;
color: var(--ink);
font-size: 9px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.preview-saved {
margin-top: 14px;
padding: 9px 10px;
display: flex;
align-items: center;
gap: 7px;
border: 1px solid var(--ok-line);
border-radius: 7px;
background: var(--ok-soft);
color: var(--ok);
font-size: 7.5px;
font-weight: 600;
}
.preview-saved i,
.preview-ready > i {
width: 13px;
height: 13px;
display: grid;
flex: none;
place-items: center;
border-radius: 50%;
background: var(--ok);
}
.preview-saved i::after,
.preview-ready > i::after {
content: "";
width: 5px;
height: 3px;
border-bottom: 1.5px solid var(--surface);
border-left: 1.5px solid var(--surface);
transform: translateY(-1px) rotate(-45deg);
}
.preview-overline {
display: block;
color: var(--ink-3);
font-size: 7px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.preview-packet-option {
margin-top: 9px;
padding: 9px 10px;
display: grid;
grid-template-columns: 13px minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--surface);
}
.preview-packet-option.is-selected {
border-color: var(--accent-line);
background: var(--accent-soft);
box-shadow: 0 0 0 2px var(--accent-ring);
}
.preview-packet-option > i {
width: 12px;
height: 12px;
border: 1px solid var(--line-strong);
border-radius: 50%;
}
.preview-packet-option.is-selected > i {
border: 3px solid var(--accent);
background: var(--surface);
}
.preview-packet-option > span { min-width: 0; display: grid; gap: 2px; }
.preview-packet-option b {
overflow: hidden;
color: var(--ink);
font-size: 8px;
font-weight: 650;
text-overflow: ellipsis;
white-space: nowrap;
}
.preview-packet-option small { color: var(--ink-3); font-size: 6.5px; }
.preview-packet-option em {
color: var(--accent-ink);
font-size: 6.5px;
font-style: normal;
font-weight: 700;
white-space: nowrap;
}
.preview-packet-next {
margin-top: 11px;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--ink-3);
font-size: 7px;
}
.preview-packet-next b {
padding: 6px 11px;
border-radius: 999px;
background: var(--accent);
color: var(--on-accent);
font-size: 7px;
}
.preview-review-body {
position: relative;
min-height: 244px;
background:
radial-gradient(circle at 50% 32%, var(--accent-soft), transparent 60%),
var(--surface-2);
}
.preview-paper {
position: absolute;
width: 128px;
height: 174px;
display: block;
border: 1px solid #cfd3d9;
border-radius: 3px;
background: #fff;
box-shadow: 0 11px 25px rgba(23, 30, 42, .15);
}
.preview-paper-back { top: 27px; left: calc(50% - 50px); transform: rotate(8deg); opacity: .66; }
.preview-paper-middle { top: 24px; left: calc(50% - 75px); transform: rotate(-7deg); opacity: .84; }
.preview-paper-front {
top: 19px;
left: calc(50% - 64px);
padding: 16px 13px;
color: #25292f;
text-align: center;
}
.preview-form-seal {
width: 25px;
height: 25px;
margin: 0 auto 8px;
display: grid;
place-items: center;
border: 1px solid #626a75;
border-radius: 50%;
font-family: var(--serif);
font-size: 8px;
font-weight: 700;
}
.preview-paper-front small { display: block; font-size: 4px; line-height: 1.35; text-transform: uppercase; }
.preview-paper-front b {
margin: 6px 0 11px;
display: block;
font-family: var(--serif);
font-size: 8px;
line-height: 1.18;
}
.preview-paper-front > i {
height: 1px;
margin-top: 9px;
display: block;
background: #c8ccd2;
}
.preview-paper-front > i:nth-of-type(2) { width: 78%; }
.preview-paper-front > i:nth-of-type(3) { width: 90%; }
.preview-paper-front strong {
position: absolute;
right: 9px;
bottom: 8px;
color: #686f78;
font-size: 6px;
}
.preview-ready {
position: absolute;
right: 14px;
bottom: 12px;
padding: 8px 10px;
display: flex;
align-items: center;
gap: 7px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--surface);
color: var(--ink);
box-shadow: var(--shadow-1);
}
.preview-ready > span { display: grid; gap: 1px; }
.preview-ready b { font-size: 7.5px; }
.preview-ready small { color: var(--ink-3); font-size: 6px; }
.home-contact {
padding: 104px 0;
color: var(--ink);
background: var(--bg);
}
.home-contact-grid {
display: grid;
grid-template-columns: minmax(0, .7fr) minmax(420px, 1fr);
align-items: start;
gap: 80px;
}
.home-contact-copy h2 {
max-width: none;
margin: 0;
line-height: 1.15;
letter-spacing: -.025em;
}
.home-contact-copy > p {
max-width: 40ch;
margin-top: 18px;
color: var(--ink-2);
font-size: 16px;
line-height: 1.6;
}
.home-contact-copy .contact-boundary {
display: block;
margin-top: 26px;
padding-top: 20px;
border-top: 1px solid var(--line);
color: var(--ink-3);
font-size: 13px;
}
.contact-form {
padding: 28px;
border: 1px solid var(--line-2);
border-radius: var(--r-lg);
background: var(--surface);
box-shadow: var(--shadow-1);
}
.contact-form > * + * { margin-top: 18px; }
.contact-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-field { display: grid; gap: 7px; }
.contact-field label { color: var(--ink-2); font-size: 14px; font-weight: 600; letter-spacing: 0; }
.contact-field label span { color: var(--ink-3); font-weight: 400; }
.contact-field input,
.contact-field select,
.contact-field textarea,
.field textarea {
width: 100%;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: 16px;
box-shadow: none;
}
.contact-field input,
.contact-field select { height: 46px; padding: 0 14px; }
.contact-field textarea,
.field textarea { min-height: 120px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover,
.field textarea:hover { border-color: var(--ink-3); }
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus,
.field textarea:focus {
outline: none;
border-color: var(--accent);
background: var(--surface);
box-shadow: 0 0 0 3px var(--accent-ring);
}
.contact-trap {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.contact-confirm {
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--ink-2);
font-size: 13px;
line-height: 1.5;
cursor: pointer;
}
.contact-confirm input { width: 17px; height: 17px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.contact-submit { margin-top: 22px; }
.contact-msg {
padding: 11px 13px;
border: 1px solid var(--danger-line);
border-radius: var(--r-sm);
background: var(--danger-soft);
color: var(--danger);
font-size: 13px;
}
.contact-msg.ok { border-color: var(--ok-line); background: var(--ok-soft); color: var(--ok); }
.contact-msg[hidden] { display: none; }
/* Keep the sign-in page plain as well. */
.auth-page main { background: var(--bg); }
.auth-page main::before { content: none; }
.auth-page .auth-main { min-height: 610px; }
.auth-page .auth-card { background: var(--surface); }
.auth-page .foot { background: var(--surface-2); }
.account-in { display: inline-flex; align-items: center; gap: .55rem; }
.account-who { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
.home-step-grid { grid-template-columns: 1fr; gap: 34px; }
.home-step-grid h3 { margin-top: 18px; }
.home-step-grid p { max-width: 48ch; }
.home-step-preview { width: min(100%, 520px); }
.home-contact-grid { grid-template-columns: 1fr; gap: 44px; }
.contact-form { max-width: 680px; }
}
@media (max-width: 600px) {
.home-intro {
min-height: 720px;
padding: 102px 0 76px;
background-position: 50% center;
}
.home-intro::before {
background:
linear-gradient(to bottom, rgba(4, 3, 21, .77) 0%, rgba(7, 4, 24, .48) 55%, rgba(5, 3, 18, .88) 100%),
radial-gradient(ellipse 125% 56% at 30% 26%, rgba(5, 4, 25, .76), transparent 100%);
}
.home-intro::after { inset: 29% -16% 2%; filter: blur(28px); }
.home-intro h1 {
max-width: 100%;
font-size: clamp(43px, 12.6vw, 58px);
overflow-wrap: normal;
word-break: normal;
}
.home-intro-copy > p { font-size: 16px; }
.home-login-panel { margin-top: 24px; }
.hero-email-row { grid-template-columns: 1fr; }
.hero-email-submit { width: 100%; }
.home-open { width: 100%; }
.home-steps, .home-contact { padding: 72px 0; }
.contact-pair { grid-template-columns: 1fr; }
.contact-form { padding: 22px 18px; }
.contact-submit { width: 100%; }
}
@media (max-width: 640px) { .account-who { display: none; } }
@media (prefers-reduced-motion: reduce) {
.home-intro::after { animation: none; opacity: .21; transform: none; }
}
@media print {
.top, .foot, .skip, .cta-row, .toc { display: none; }
body { background: #fff; color: #000; font-size: 11pt; }
.doc { padding: 0; font-size: 11pt; }
.doc h2 { page-break-after: avoid; }
.doc-head { padding-top: 0; }
a { color: #000; text-decoration: none; }
}
/* =====================================================================
Landing hero: static full artwork with one compact, centered action stack.
===================================================================== */
.home .top {
position: fixed;
inset: 0 0 auto;
width: 100%;
border-bottom: 0;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.home .top.stuck {
border-bottom: 1px solid rgba(255, 255, 255, .13);
background: rgba(8, 7, 24, .72);
box-shadow: 0 12px 34px rgba(2, 2, 16, .24);
backdrop-filter: saturate(1.35) blur(20px);
-webkit-backdrop-filter: saturate(1.35) blur(20px);
}
.home .top .brand { color: #fff; text-shadow: 0 2px 18px rgba(3, 2, 18, .72); }
.home .top .btn.primary {
border-color: rgba(255, 255, 255, .52);
background: rgba(8, 6, 28, .38);
color: #fff;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.home .top .btn.primary:hover { border-color: #fff; background: rgba(8, 6, 28, .64); color: #fff; }
.home-intro {
min-height: 100svh;
padding: 0;
display: block;
border: 0;
background-color: #09071e;
background-image: url("/assets/holdpacket-hero-background.1089a07321.png");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 47%;
animation: none;
}
.home-intro::before {
content: "";
display: block;
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(to bottom,
rgba(5, 3, 20, .14) 0%,
rgba(5, 3, 20, .03) 42%,
rgba(5, 3, 20, .42) 70%,
rgba(5, 3, 20, .92) 100%);
pointer-events: none;
}
.home-intro::after {
content: none;
display: none;
}
.home-intro-in {
position: relative;
z-index: 1;
min-height: 100svh;
max-width: 1120px;
padding-top: 48vh;
padding-bottom: 32px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
text-align: center;
}
.home-intro-copy { width: min(100%, 620px); }
.home-intro h1 {
max-width: 100%;
margin: 0;
color: #fff;
font-size: clamp(30px, 3.25vw, 40px);
line-height: 1.04;
letter-spacing: -.035em;
text-shadow: 0 3px 24px rgba(3, 2, 18, .82);
animation: none;
}
.home-intro-in > .home-intro-copy > p {
max-width: 48ch;
margin: 12px auto 0;
color: rgba(255, 255, 255, .78);
font-size: 14.5px;
line-height: 1.55;
text-shadow: 0 2px 16px rgba(3, 2, 18, .85);
animation: none;
}
.home-login-panel {
width: min(100%, 500px);
max-width: none;
margin-top: 18px;
animation: none;
}
.home-login-title {
margin: 0 0 8px;
color: rgba(255, 255, 255, .82);
font-size: 12.5px;
font-weight: 600;
text-align: center;
}
.hero-login-card {
padding: 8px;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 14px;
background: rgba(7, 5, 28, .58);
box-shadow: 0 18px 50px rgba(3, 2, 18, .3);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
animation: none;
}
.hero-email-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
}
.hero-email-row input {
width: 100%;
min-width: 0;
height: 44px;
padding: 0 13px;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 8px;
outline: none;
background: rgba(4, 3, 20, .44);
color: #fff;
font: inherit;
font-size: 16px;
}
.hero-email-row input::placeholder { color: rgba(255, 255, 255, .58); }
.hero-email-row input:focus { border-color: rgba(255, 255, 255, .76); box-shadow: 0 0 0 3px rgba(255, 255, 255, .1); }
.hero-email-submit {
height: 44px;
padding-inline: 18px;
border-color: #fff;
border-radius: var(--button-radius);
background: #fff;
color: #151021;
}
.hero-email-submit:hover { border-color: #fff0d8; background: #fff0d8; color: #151021; }
.hero-login-step { padding: 10px; }
.hero-login-card .auth-step > * + * { margin-top: 14px; }
.hero-login-card .field > label,
.hero-login-card .auth-h { color: #fff; }
.hero-login-card .hint,
.hero-login-card .auth-sent { color: rgba(255, 255, 255, .66); }
.hero-login-card .auth-sent b { color: #fff; }
.hero-login-card .field input,
.hero-login-card .field select,
.hero-login-card .field textarea {
border-color: rgba(255, 255, 255, .2);
background-color: rgba(4, 3, 20, .5);
color: #fff;
}
.hero-login-card .linkbtn { color: #c6eaff; }
@media (max-width: 800px) {
.home-intro {
min-height: 100svh;
background-position: 50% center;
}
.home-intro-in {
min-height: 100svh;
padding-top: 42vh;
padding-bottom: 26px;
}
.home-intro h1 { max-width: 100%; font-size: clamp(29px, 8.4vw, 38px); }
.home-intro-in > .home-intro-copy > p { margin-top: 10px; font-size: 14px; }
.home-login-panel { width: min(100%, 500px); margin-top: 16px; }
}
@media (max-width: 520px) {
.home-intro-in { padding-top: 36vh; padding-bottom: 20px; }
.hero-email-row { grid-template-columns: 1fr; }
.hero-email-submit { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.home-intro,
.home-intro::after,
.home-intro h1,
.home-intro-in > .home-intro-copy > p,
.home-login-panel,
.hero-login-card { animation: none; }
}
/* =====================================================================
Landing walkthrough: a scroll-led product story.
The unenhanced layout is a readable sequence of three large rows. site.js
upgrades it on wide screens to a single sticky stage, then crossfades the
rows as the reader moves through the section. This keeps the document and
its meaning intact when scripts or motion are unavailable.
===================================================================== */
.home-steps {
--flow-bg: var(--night);
--flow-panel: var(--night-surface);
--flow-panel-2: var(--night-surface-2);
--flow-line: var(--night-line);
--flow-copy: var(--night-ink);
--flow-muted: var(--night-muted);
--flow-accent: var(--night-accent);
position: relative;
isolation: isolate;
overflow: clip;
padding: 0;
border-block: 1px solid rgba(143, 174, 218, .13);
background:
radial-gradient(ellipse 44% 36% at 78% 44%, rgba(48, 121, 213, .09), transparent 72%),
radial-gradient(ellipse 36% 28% at 16% 78%, rgba(91, 61, 177, .07), transparent 76%),
var(--flow-bg);
color: var(--flow-copy);
}
.home-steps::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
opacity: .2;
pointer-events: none;
background-image:
linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: linear-gradient(to bottom, transparent, #000 17%, #000 82%, transparent);
}
.home-steps-stage { position: relative; padding: 112px 0 118px; }
.home-steps-shell { position: relative; }
.home-flow-label {
display: flex;
align-items: center;
gap: 14px;
color: #9cabbe;
font-size: 11px;
font-weight: 650;
letter-spacing: .1em;
text-transform: uppercase;
}
.home-flow-label i {
width: 52px;
height: 1px;
display: block;
background: var(--flow-line);
}
.home-flow-label b {
color: var(--flow-accent);
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: .04em;
}
.home-step-grid {
margin-top: 76px;
display: grid;
grid-template-columns: 1fr;
gap: 118px;
overflow: visible;
border: 0;
background: transparent;
}
.home-step-grid .home-step-scene {
min-height: 520px;
padding: 0;
display: grid;
grid-template-columns: minmax(300px, .78fr) minmax(520px, 1.22fr);
align-items: center;
gap: clamp(64px, 8vw, 118px);
border: 0;
background: transparent;
}
.home-step-copy { position: relative; z-index: 2; }
.home-step-grid .home-step-copy .home-step-number {
display: block;
color: var(--flow-accent);
font-family: var(--mono);
font-size: 10px;
font-weight: 650;
letter-spacing: .08em;
text-transform: uppercase;
}
.home-step-grid .home-step-copy h3 {
max-width: 8.7ch;
margin-top: 24px;
color: var(--flow-copy);
font-family: var(--serif);
font-size: clamp(50px, 5.3vw, 72px);
font-weight: 400;
line-height: .98;
letter-spacing: -.052em;
text-wrap: balance;
}
.home-step-grid .home-step-copy h3 em {
color: #8bd9ff;
font-weight: 400;
}
.home-step-grid .home-step-copy p {
max-width: 43ch;
margin-top: 24px;
color: var(--flow-muted);
font-size: 15px;
line-height: 1.7;
}
.home-step-grid .home-step-preview {
--ink: #eef5ff;
--ink-2: #b1c0d3;
--ink-3: #71849e;
--surface: #101c2e;
--surface-2: #091321;
--line: rgba(152, 183, 224, .15);
--line-2: rgba(152, 183, 224, .23);
--line-strong: #5d718c;
--accent: #57c9ff;
--accent-ink: #8ad9ff;
--accent-soft: rgba(66, 178, 236, .13);
--accent-line: rgba(83, 201, 255, .44);
--accent-ring: rgba(83, 201, 255, .1);
--on-accent: #07131f;
--ok: #53d6a2;
--ok-soft: rgba(43, 181, 128, .11);
--ok-line: rgba(77, 210, 160, .3);
position: relative;
width: 100%;
min-height: 456px;
margin: 0;
overflow: hidden;
border: 1px solid var(--flow-line);
border-radius: 24px;
background:
linear-gradient(145deg, rgba(22, 41, 67, .94), rgba(8, 17, 30, .98));
box-shadow:
0 38px 90px rgba(0, 0, 0, .35),
inset 0 1px rgba(255, 255, 255, .04);
}
.home-step-grid .home-step-preview::before {
content: "";
position: absolute;
z-index: 0;
width: 260px;
height: 260px;
right: -90px;
top: -110px;
border-radius: 50%;
background: rgba(61, 176, 236, .13);
filter: blur(44px);
pointer-events: none;
}
.home-step-grid .step-preview-bar,
.home-step-grid .preview-entry-body,
.home-step-grid .preview-packet-body,
.home-step-grid .preview-review-body { position: relative; z-index: 1; }
.home-step-grid .step-preview-bar {
height: 58px;
padding: 0 21px;
grid-template-columns: 54px minmax(0, 1fr) auto;
border-color: var(--flow-line);
background: rgba(6, 13, 24, .62);
}
.home-step-grid .step-preview-bar b { font-size: 12px; }
.home-step-grid .step-preview-bar small { font-size: 9px; }
.home-step-grid .preview-dots { gap: 5px; }
.home-step-grid .preview-dots i { width: 6px; height: 6px; background: #50637d; }
.home-step-grid .preview-entry-body,
.home-step-grid .preview-packet-body { padding: 32px 30px 29px; }
.home-step-grid .preview-heading > span { font-size: 13px; }
.home-step-grid .preview-heading > small { padding: 5px 8px; font-size: 8px; }
.home-step-grid .preview-fields { margin-top: 24px; gap: 14px; }
.home-step-grid .preview-fields > div {
min-height: 67px;
padding: 12px 14px;
align-content: center;
gap: 5px;
border-color: var(--flow-line);
border-radius: 10px;
background: rgba(14, 28, 47, .88);
}
.home-step-grid .preview-fields small { font-size: 8px; }
.home-step-grid .preview-fields b { font-size: 11px; }
.home-step-grid .preview-saved {
margin-top: 18px;
min-height: 48px;
padding: 11px 13px;
gap: 9px;
border-radius: 10px;
font-size: 9px;
}
.home-step-grid .preview-saved i,
.home-step-grid .preview-ready > i { width: 17px; height: 17px; }
.home-step-grid .preview-overline { font-size: 8px; }
.home-step-grid .preview-packet-option {
min-height: 67px;
margin-top: 13px;
padding: 12px 14px;
grid-template-columns: 17px minmax(0, 1fr) auto;
gap: 11px;
border-color: var(--flow-line);
border-radius: 11px;
background: rgba(14, 28, 47, .76);
}
.home-step-grid .preview-packet-option > i { width: 15px; height: 15px; }
.home-step-grid .preview-packet-option b { font-size: 10px; }
.home-step-grid .preview-packet-option small,
.home-step-grid .preview-packet-option em { font-size: 8px; }
.home-step-grid .preview-packet-next { margin-top: 17px; font-size: 9px; }
.home-step-grid .preview-packet-next b { padding: 8px 15px; font-size: 8px; }
.home-step-grid .preview-review-body {
min-height: 398px;
background:
radial-gradient(circle at 48% 38%, rgba(74, 178, 231, .18), transparent 50%),
rgba(7, 15, 27, .6);
}
.home-step-grid .preview-paper { width: 190px; height: 258px; border-radius: 5px; }
.home-step-grid .preview-paper-back {
top: 65px;
left: calc(48% - 62px);
transform: rotate(9deg);
}
.home-step-grid .preview-paper-middle {
top: 59px;
left: calc(48% - 120px);
transform: rotate(-8deg);
}
.home-step-grid .preview-paper-front {
top: 42px;
left: calc(48% - 95px);
padding: 25px 20px;
}
.home-step-grid .preview-form-seal { width: 37px; height: 37px; margin-bottom: 13px; font-size: 10px; }
.home-step-grid .preview-paper-front small { font-size: 5.5px; }
.home-step-grid .preview-paper-front b { margin: 10px 0 17px; font-size: 12px; }
.home-step-grid .preview-paper-front > i { margin-top: 13px; }
.home-step-grid .preview-paper-front strong { right: 13px; bottom: 12px; font-size: 8px; }
.home-step-grid .preview-ready {
right: 24px;
bottom: 24px;
padding: 12px 15px;
gap: 10px;
border-color: var(--flow-line);
border-radius: 12px;
background: rgba(14, 28, 47, .94);
}
.home-step-grid .preview-ready b { font-size: 10px; }
.home-step-grid .preview-ready small { font-size: 8px; }
/* The signed-in quick tour uses the same four-scene story. These two previews
complete the public version without pretending there is a live Epic
integration: the arrow is explicitly copy/paste, and every value is a
synthetic example. */
.home-step-grid .preview-team-body,
.home-step-grid .preview-epic-body {
position: relative; z-index: 1;
min-height: 398px;
padding: 31px 30px;
}
.home-step-grid .preview-team-body { display: grid; align-content: center; gap: 13px; }
.home-step-grid .preview-team-row {
min-height: 76px; padding: 13px 15px;
display: grid; grid-template-columns: minmax(0, 1fr) auto;
align-items: center; gap: 13px;
border: 1px solid var(--flow-line);
border-radius: 11px;
background: rgba(14, 28, 47, .78);
}
.home-step-grid .preview-team-row > span { min-width: 0; display: grid; gap: 4px; }
.home-step-grid .preview-team-row small { color: var(--ink-3); font-size: 8px; }
.home-step-grid .preview-team-row b { overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.home-step-grid .preview-team-row em { color: var(--ink-3); font-size: 8px; font-style: normal; }
.home-step-grid .preview-team-row > i {
width: 18px; height: 18px;
display: grid; place-items: center;
border-radius: 50%; background: var(--ok);
}
.home-step-grid .preview-team-row > i::after {
content: ""; width: 7px; height: 4px;
border-left: 1.5px solid #071921; border-bottom: 1.5px solid #071921;
transform: translateY(-1px) rotate(-45deg);
}
.home-step-grid .preview-wet-sign {
min-height: 47px; padding: 10px 13px;
display: flex; align-items: center; gap: 9px;
border: 1px solid var(--ok-line);
border-radius: 10px;
background: var(--ok-soft);
color: var(--ok); font-size: 9px; font-weight: 650;
}
.home-step-grid .preview-wet-sign > i {
position: relative; width: 21px; height: 11px; flex: none;
border-radius: 999px; background: #405469;
}
.home-step-grid .preview-wet-sign > i::after {
content: ""; position: absolute; left: 1px; top: 1px;
width: 9px; height: 9px; border-radius: 50%; background: #a5b6c6;
}
.home-step-grid .preview-epic-body {
display: grid;
grid-template-columns: minmax(0, .95fr) 34px minmax(0, 1.05fr);
align-items: center; gap: 10px;
}
.home-step-grid .preview-epic-chart,
.home-step-grid .preview-epic-fill {
min-width: 0; min-height: 272px; padding: 16px;
border: 1px solid var(--flow-line);
border-radius: 12px;
background: rgba(14, 28, 47, .8);
}
.home-step-grid .preview-epic-chart > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.home-step-grid .preview-epic-chart > div b { color: #b9d7ee; font-size: 10px; }
.home-step-grid .preview-epic-chart > div small,
.home-step-grid .preview-epic-fill > small { color: var(--ink-3); font-size: 8px; }
.home-step-grid .preview-epic-selection {
position: relative; margin-top: 20px; padding: 12px;
display: grid; gap: 8px;
border-radius: 7px;
background: rgba(62, 152, 236, .31);
color: #dce8f2;
}
.home-step-grid .preview-epic-selection b { font-size: 9px; }
.home-step-grid .preview-epic-selection small { font-size: 7.5px; line-height: 1.3; }
.home-step-grid .preview-epic-chart > em {
width: max-content; margin: 20px auto 0; padding: 6px 9px;
display: block;
border: 1px solid rgba(112, 198, 245, .35);
border-radius: 7px;
background: #102b45;
color: #bceaff; font-size: 8px; font-style: normal; font-weight: 700;
}
.home-step-grid .preview-epic-arrow { color: #62cef9; font-size: 24px; text-align: center; }
.home-step-grid .preview-epic-paste {
min-height: 66px; margin-top: 9px; padding: 10px;
border: 1px dashed #52677c;
border-radius: 8px;
background: rgba(5, 13, 23, .38);
color: #9cdfff; font-size: 8px; font-weight: 650;
}
.home-step-grid .preview-epic-fields { margin-top: 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.home-step-grid .preview-epic-fields > span {
min-width: 0; min-height: 46px; padding: 7px 8px;
display: grid; align-content: center; gap: 3px;
border: 1px solid var(--ok-line);
border-radius: 7px;
background: var(--ok-soft);
}
.home-step-grid .preview-epic-fields small { color: #75a392; font-size: 6px; }
.home-step-grid .preview-epic-fields b { overflow: hidden; color: #a8e5cc; font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }
.home-step-progress {
display: none;
align-items: center;
gap: 0;
color: #526176;
}
.home-step-progress span {
min-width: 0;
display: grid;
grid-template-columns: minmax(32px, 1fr) auto auto;
align-items: center;
gap: 9px;
font-family: var(--mono);
transition: color .35s ease;
}
.home-step-progress span + span { margin-left: 11px; }
.home-step-progress i {
height: 1px;
display: block;
overflow: hidden;
background: #223047;
}
.home-step-progress i::after {
content: "";
width: 100%;
height: 100%;
display: block;
transform: scaleX(0);
transform-origin: left;
background: var(--flow-accent);
transition: transform .55s cubic-bezier(.2, .75, .2, 1);
}
.home-step-progress b { font-size: 9px; font-weight: 600; }
.home-step-progress small { font-size: 9px; }
.home-step-progress span.active { color: #b8c5d6; }
.home-step-progress span.active i::after { transform: scaleX(1); }
@media (min-width: 901px) {
.home-steps.is-enhanced { height: 460svh; min-height: 3200px; }
.home-steps.is-enhanced .home-steps-stage {
position: sticky;
top: 0;
height: 100svh;
min-height: 700px;
padding: 0;
overflow: hidden;
}
.home-steps.is-enhanced .home-steps-shell { height: 100%; }
.home-steps.is-enhanced .home-flow-label {
position: absolute;
z-index: 4;
top: 103px;
left: 28px;
right: 28px;
}
.home-steps.is-enhanced .home-step-grid {
position: absolute;
inset: 0 28px;
margin: 0;
display: block;
}
.home-steps.is-enhanced .home-step-grid .home-step-scene {
--scene-opacity: 0;
--scene-shift: 46px;
position: absolute;
inset: 0;
min-height: 0;
padding: 122px 0 104px;
opacity: var(--scene-opacity);
transform: translate3d(0, var(--scene-shift), 0);
will-change: opacity, transform;
pointer-events: none;
}
.home-steps.is-enhanced .home-step-scene:first-child { --scene-opacity: 1; --scene-shift: 0px; }
.home-steps.is-enhanced .home-step-copy {
transform: translate3d(0, var(--copy-shift, 0), 0);
will-change: transform;
}
.home-steps.is-enhanced .home-step-preview {
transform: translate3d(0, var(--preview-shift, 0), 0) scale(.985);
transition: border-color .55s ease, box-shadow .55s ease;
will-change: transform;
}
.home-steps.is-enhanced .home-step-scene.is-active .home-step-preview {
border-color: rgba(101, 203, 250, .31);
box-shadow:
0 44px 110px rgba(0, 0, 0, .43),
0 0 70px rgba(39, 138, 205, .08),
inset 0 1px rgba(255, 255, 255, .055);
}
.home-steps.is-enhanced [data-flow-item] {
opacity: .2;
transform: translateY(15px);
transition:
opacity .62s cubic-bezier(.2, .72, .2, 1),
transform .62s cubic-bezier(.2, .72, .2, 1);
}
.home-steps.is-enhanced .is-active [data-flow-item] { opacity: 1; transform: translateY(0); }
.home-steps.is-enhanced .is-active [data-flow-item]:nth-child(2) { transition-delay: .07s; }
.home-steps.is-enhanced .is-active [data-flow-item]:nth-child(3) { transition-delay: .14s; }
.home-steps.is-enhanced .is-active [data-flow-item]:nth-child(4) { transition-delay: .21s; }
.home-steps.is-enhanced .preview-paper-back[data-flow-item] { transform: translateY(15px) rotate(-1deg); }
.home-steps.is-enhanced .preview-paper-middle[data-flow-item] { transform: translateY(15px) rotate(-1deg); }
.home-steps.is-enhanced .preview-paper-front[data-flow-item] { transform: translateY(15px) rotate(0); }
.home-steps.is-enhanced .is-active .preview-paper-back[data-flow-item] { transform: translateY(0) rotate(9deg); }
.home-steps.is-enhanced .is-active .preview-paper-middle[data-flow-item] { transform: translateY(0) rotate(-8deg); }
.home-steps.is-enhanced .is-active .preview-paper-front[data-flow-item] { transform: translateY(0) rotate(0); }
.home-steps.is-enhanced .home-step-progress {
position: absolute;
z-index: 4;
left: 28px;
right: 28px;
bottom: 31px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.home-steps-stage { padding: 86px 0 104px; }
.home-step-grid { margin-top: 64px; gap: 104px; }
.home-step-grid .home-step-scene {
min-height: 0;
grid-template-columns: 1fr;
gap: 42px;
}
.home-step-grid .home-step-copy h3 { max-width: 10ch; }
.home-step-grid .home-step-copy p { max-width: 54ch; }
.home-step-grid .home-step-preview { width: min(100%, 680px); }
}
@media (min-width: 901px) and (max-height: 760px) {
.home-steps.is-enhanced .home-steps-stage { min-height: 650px; }
.home-steps.is-enhanced .home-flow-label { top: 76px; }
.home-steps.is-enhanced .home-step-grid .home-step-scene { padding: 90px 0 72px; }
.home-step-grid .home-step-copy h3 { margin-top: 18px; font-size: clamp(44px, 4.6vw, 61px); }
.home-step-grid .home-step-copy p { margin-top: 18px; }
.home-step-grid .home-step-preview { min-height: 382px; }
.home-step-grid .step-preview-bar { height: 52px; }
.home-step-grid .preview-entry-body,
.home-step-grid .preview-packet-body { padding: 24px 25px 22px; }
.home-step-grid .preview-fields { margin-top: 18px; }
.home-step-grid .preview-fields > div { min-height: 58px; }
.home-step-grid .preview-packet-option { min-height: 57px; margin-top: 10px; }
.home-step-grid .preview-review-body { min-height: 329px; }
.home-step-grid .preview-team-body,
.home-step-grid .preview-epic-body { min-height: 329px; padding: 23px 25px; }
.home-step-grid .preview-team-row { min-height: 61px; }
.home-step-grid .preview-epic-chart,
.home-step-grid .preview-epic-fill { min-height: 230px; padding: 13px; }
.home-step-grid .preview-epic-selection { margin-top: 13px; padding: 9px; gap: 5px; }
.home-step-grid .preview-epic-chart > em { margin-top: 12px; }
.home-step-grid .preview-epic-paste { min-height: 52px; }
.home-step-grid .preview-epic-fields > span { min-height: 37px; }
.home-step-grid .preview-paper { width: 158px; height: 214px; }
.home-step-grid .preview-paper-back { top: 52px; left: calc(48% - 51px); }
.home-step-grid .preview-paper-middle { top: 48px; left: calc(48% - 100px); }
.home-step-grid .preview-paper-front { top: 34px; left: calc(48% - 79px); padding: 20px 16px; }
.home-step-grid .preview-form-seal { width: 31px; height: 31px; margin-bottom: 9px; }
.home-step-grid .preview-paper-front b { margin: 8px 0 12px; font-size: 10px; }
.home-steps.is-enhanced .is-active .preview-paper-back[data-flow-item] { transform: translateY(0) rotate(9deg); }
.home-steps.is-enhanced .is-active .preview-paper-middle[data-flow-item] { transform: translateY(0) rotate(-8deg); }
.home-steps.is-enhanced .home-step-progress { bottom: 19px; }
}
@media (max-width: 600px) {
.home-steps-stage { padding: 72px 0 84px; }
.home-flow-label { gap: 10px; }
.home-flow-label i { width: 32px; }
.home-step-grid { margin-top: 52px; gap: 88px; }
.home-step-grid .home-step-scene { gap: 31px; }
.home-step-grid .home-step-copy h3 { margin-top: 18px; font-size: clamp(43px, 13vw, 58px); }
.home-step-grid .home-step-copy p { margin-top: 19px; font-size: 14px; }
.home-step-grid .home-step-preview { min-height: 350px; border-radius: 18px; }
.home-step-grid .step-preview-bar { height: 50px; padding: 0 15px; grid-template-columns: 43px 1fr auto; }
.home-step-grid .step-preview-bar small { display: none; }
.home-step-grid .preview-entry-body,
.home-step-grid .preview-packet-body { padding: 22px 17px 20px; }
.home-step-grid .preview-fields { margin-top: 17px; gap: 9px; }
.home-step-grid .preview-fields > div { min-height: 58px; padding: 10px; }
.home-step-grid .preview-packet-option { min-height: 59px; margin-top: 10px; padding: 10px; }
.home-step-grid .preview-packet-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-step-grid .preview-review-body { min-height: 300px; }
.home-step-grid .preview-team-body,
.home-step-grid .preview-epic-body { min-height: 300px; padding: 18px 16px; }
.home-step-grid .preview-team-row { min-height: 59px; padding: 10px; }
.home-step-grid .preview-team-row em { display: none; }
.home-step-grid .preview-epic-body { grid-template-columns: 1fr; gap: 7px; }
.home-step-grid .preview-epic-chart,
.home-step-grid .preview-epic-fill { min-height: 0; padding: 11px; }
.home-step-grid .preview-epic-selection { margin-top: 8px; padding: 8px; gap: 4px; }
.home-step-grid .preview-epic-selection small:last-child { display: none; }
.home-step-grid .preview-epic-chart > em { margin-top: 7px; }
.home-step-grid .preview-epic-arrow { height: 17px; font-size: 18px; transform: rotate(90deg); }
.home-step-grid .preview-epic-paste { min-height: 33px; margin-top: 5px; padding: 7px; }
.home-step-grid .preview-epic-fields { margin-top: 6px; }
.home-step-grid .preview-epic-fields > span { min-height: 32px; }
.home-step-grid .preview-paper { width: 143px; height: 194px; }
.home-step-grid .preview-paper-back { top: 51px; left: calc(48% - 45px); }
.home-step-grid .preview-paper-middle { top: 47px; left: calc(48% - 90px); }
.home-step-grid .preview-paper-front { top: 33px; left: calc(48% - 72px); padding: 18px 14px; }
.home-step-grid .preview-form-seal { width: 29px; height: 29px; margin-bottom: 8px; }
.home-step-grid .preview-paper-front b { margin: 7px 0 10px; font-size: 9px; }
.home-step-grid .preview-ready { right: 12px; bottom: 14px; padding: 9px 10px; }
}
@media (prefers-reduced-motion: reduce) {
.home-step-progress i::after,
.home-steps [data-flow-item],
.home-steps .home-step-preview { transition: none; }
}
/* =====================================================================
Final shared-chrome and focused page refinements.
These rules intentionally live last. The landing page changes the header's
colors to remain legible over its artwork, but the control geometry should
not change when someone follows a link to another public page.
===================================================================== */
.home-actions .btn { border-radius: var(--button-radius); }
.top .btn.sm {
min-width: 78px;
height: var(--button-height-sm);
padding: 0 var(--button-pad);
border-radius: var(--button-radius);
font-size: 14px;
line-height: 1;
}
.top .btn.sm.primary {
border-color: #155e75;
background: #155e75;
color: #fff;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.top .btn.sm.primary:hover {
border-color: #0e4b5e;
background: #0e4b5e;
color: #fff;
}
/* One composed email control instead of a card, an input frame, and a button
all competing as separate boxes. Later sign-in steps still use the normal
card treatment because they contain several fields and actions. */
.hero-login-card {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.hero-login-card #step-email .hero-email-row { margin-top: 0; }
.hero-login-card .hero-login-step {
padding: 20px;
border: 1px solid rgba(255, 255, 255, .24);
border-radius: 13px;
background: rgba(7, 5, 28, .78);
box-shadow: 0 16px 44px rgba(3, 2, 18, .3);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.hero-email-row {
gap: 5px;
padding: 5px;
border: 1px solid rgba(255, 255, 255, .32);
border-radius: 13px;
background: rgba(7, 5, 28, .68);
box-shadow: 0 16px 44px rgba(3, 2, 18, .3);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
transition: border-color .14s, box-shadow .14s, background .14s;
}
.hero-email-row:focus-within {
border-color: rgba(255, 255, 255, .72);
background: rgba(7, 5, 28, .82);
box-shadow: 0 0 0 3px rgba(255, 255, 255, .1), 0 18px 48px rgba(3, 2, 18, .34);
}
.hero-email-row input {
height: 44px;
padding: 0 12px;
border: 0;
border-radius: 8px;
background: transparent;
box-shadow: none;
}
.hero-email-row input:focus {
border: 0;
box-shadow: none;
}
.hero-email-row input[aria-invalid="true"] {
box-shadow: inset 0 0 0 1px rgba(255, 165, 165, .78);
}
.hero-email-submit {
height: var(--button-height-lg);
border-radius: var(--button-radius);
}
.hero-login-card .linkbtn:hover {
border-color: rgba(255, 255, 255, .2);
background: rgba(255, 255, 255, .08);
color: #fff;
}
.contact-page-main {
min-height: calc(100svh - 108px);
padding: clamp(76px, 9vw, 116px) 0;
background:
radial-gradient(circle at 15% 12%, var(--accent-soft), transparent 32%),
var(--bg);
}
.contact-page .home-contact-copy .eyebrow { margin-bottom: 18px; }
.contact-page .home-contact-copy h1 {
max-width: 9ch;
margin: 0;
color: var(--ink);
font-family: var(--serif);
font-size: clamp(44px, 6vw, 68px);
font-weight: 500;
line-height: 1.02;
letter-spacing: -.035em;
}
.contact-page .foot { margin-top: 0; }
@media (max-width: 520px) {
.top .btn.sm { min-width: 72px; height: var(--button-height-sm); padding-inline: var(--button-pad-sm); }
.hero-email-row { gap: 6px; padding: 6px; }
.contact-page-main { padding: 68px 0 76px; }
}
/* ---- the bot challenge ----
The widget is a fixed-size iframe Cloudflare renders into these wrappers.
Both forms space their children with `> * + *`, so an empty wrapper — which
is what a build with no site key produces — has to take itself out of the
flow entirely or it leaves an 18px hole where nothing is. */
.contact-challenge:empty,
.auth-challenge:empty { display: none; }
.contact-challenge iframe,
.auth-challenge iframe { max-width: 100%; }
/* =========================================================================
Administration console.
Appended to site.css at build time rather than shipped separately: it is one
page's worth of rules, and a second stylesheet is a second request on every
public page that will never use it.
Everything here is built from the same tokens as the rest of the site (see
src/tokens.css), so the console follows the reader's theme without a single
colour literal below.
========================================================================= */
.adm { padding: 40px 0 96px; }
/* Visible to a screen reader, to nobody else. Used for the labels on the
search and filter controls, whose purpose is obvious to anyone who can see
the placeholder and invisible to anyone who cannot, and for the file inputs
the drop zones stand in front of — which must stay focusable, so
`display: none` is not available. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ---- masthead ---- */
.adm-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
padding-bottom: 24px;
border-bottom: 1px solid var(--line);
}
.adm-title { font-family: var(--serif); font-size: 30px; line-height: 1.2; font-weight: 600; }
.adm-sub { margin-top: 6px; font-size: 14.5px; color: var(--ink-2); }
/* ---- the super administrator's site switch ----
Sits above the button beside it rather than in line with it: this changes
what every panel on the page is about, and a control that consequential
should not read as a sibling of "Open the packet builder". */
.adm-head-side { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.adm-site-switch { display: flex; flex-direction: column; gap: 4px; }
.adm-site-label {
font-size: 11.5px;
font-weight: 650;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-3);
}
.adm-site-picker {
max-width: 34ch;
padding: 7px 10px;
font: inherit;
font-size: 14px;
color: var(--ink);
background: var(--bg);
border: 1px solid var(--line);
border-radius: 7px;
}
.adm-site-picker:disabled { opacity: 0.6; }
/* ---- the operator's feature override ----
Sits under the site picker, and looks like what it is: a switch that is
quiet while off and unmistakable while on, because on means this console —
and the packet builder next to it — is not showing what clinicians here
see. */
.adm-override {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 6px;
max-width: 100%;
padding: 3px 8px;
border: 1px solid var(--line);
border-radius: 999px;
font-size: 11.5px;
color: var(--ink-3);
cursor: pointer;
}
.adm-override.is-on {
color: var(--warn);
background: var(--warn-soft);
border-color: var(--warn-line);
}
.adm-override input { margin: 0; flex: none; width: 12px; height: 12px; }
.adm-override-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-override-state {
flex: none;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* ---- the one alert region ---- */
.adm-alert {
display: flex;
align-items: center;
gap: 14px;
margin-top: 20px;
padding: 12px 16px;
border: 1px solid var(--accent-line);
background: var(--accent-soft);
color: var(--accent-ink);
border-radius: var(--r);
font-size: 14.5px;
}
.adm-alert.ok { border-color: var(--ok-line); background: var(--ok-soft); color: var(--ok); }
.adm-alert.bad { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger); }
.adm-alert .linkbtn { margin-left: auto; color: inherit; }
/* ---- tabs ----
A horizontal strip that scrolls rather than wraps: nine sections wrapping to
two rows moves every tab under the reader's cursor the moment one gains a
count badge. */
.adm-tabs {
display: flex;
gap: 2px;
margin: 22px 0 26px;
padding-bottom: 2px;
overflow-x: auto;
border-bottom: 1px solid var(--line);
scrollbar-width: thin;
}
.adm-tab {
flex: none;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 10px 14px;
border: 0;
border-bottom: 2px solid transparent;
background: none;
color: var(--ink-2);
font: inherit;
font-size: 14.5px;
font-weight: 550;
cursor: pointer;
white-space: nowrap;
}
.adm-tab:hover { color: var(--ink); }
.adm-tab.is-on { color: var(--accent); border-bottom-color: var(--accent); }
.adm-count {
display: inline-grid;
place-items: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
background: var(--accent);
color: var(--on-accent);
font-size: 12px;
font-weight: 650;
}
/* ---- layout ---- */
.adm-card {
padding: 24px 26px;
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--surface);
box-shadow: var(--shadow-1);
}
.adm-card + .adm-card { margin-top: 18px; }
.adm-intro p { font-size: 15px; line-height: 1.65; color: var(--ink-2); max-width: 76ch; }
.adm-intro p + p { margin-top: 10px; }
.adm-h { font-size: 16px; font-weight: 650; margin-bottom: 12px; }
.adm-h-mt { margin-top: 26px; }
.adm-legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.adm-note { font-size: 13.5px; line-height: 1.6; color: var(--ink-3); max-width: 76ch; }
.adm-note code { font-family: var(--mono); font-size: 12.5px; }
.adm-empty { font-size: 14px; color: var(--ink-3); padding: 8px 0; }
.adm-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.adm-split-wide { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
.adm-stack > * + * { margin-top: 14px; }
.adm-quote {
margin: 10px 0;
padding: 2px 0 2px 14px;
border-left: 3px solid var(--line-2);
font-size: 14.5px;
line-height: 1.6;
color: var(--ink-2);
}
/* ---- KPI tiles ---- */
.adm-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
}
.adm-kpis-sm { margin-bottom: 16px; }
.adm-kpi { background: var(--surface); padding: 18px 20px; }
.adm-kpi-v { font-family: var(--serif); font-size: 27px; line-height: 1.1; font-weight: 600; }
.adm-kpi-l { margin-top: 6px; font-size: 13.5px; font-weight: 550; color: var(--ink-2); }
.adm-kpi-s { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
/* ---- "waiting on you" ---- */
.adm-waiting-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
width: 100%;
padding: 13px 15px;
border: 1px solid var(--line);
border-radius: var(--r);
background: var(--surface-2);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.adm-waiting-row + .adm-waiting-row { margin-top: 10px; }
.adm-waiting-row:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.adm-waiting-row.warn { border-color: var(--warn-line); background: var(--warn-soft); }
.adm-waiting-row span { font-size: 13.5px; color: var(--accent); font-weight: 600; }
/* ---- activity feed ---- */
.adm-feed { display: grid; gap: 9px; }
.adm-feed-mt { margin-top: 16px; }
.adm-feed li {
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
gap: 10px;
align-items: baseline;
font-size: 13.5px;
}
.adm-feed-a { font-weight: 600; }
.adm-feed-t { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-feed-w { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
/* ---- toolbars ---- */
.adm-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.adm-bar-gap { flex: 1 1 auto; }
.adm-search { min-width: 260px; flex: 1 1 260px; }
.adm-inline-form { display: flex; gap: 10px; align-items: flex-end; margin-top: 12px; }
.adm-inline-form .field { flex: 1 1 auto; }
/* ---- tables ----
Wide by nature — a roster row carries a name, a role, a licence, facilities,
a timestamp and its actions. The wrapper scrolls so the page never does. */
.adm-tablewrap {
overflow-x: auto;
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--surface);
}
.adm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm-table th {
position: sticky;
top: 0;
z-index: 1;
padding: 11px 14px;
background: var(--surface-2);
border-bottom: 1px solid var(--line);
text-align: left;
font-size: 12.5px;
font-weight: 650;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--ink-3);
white-space: nowrap;
}
.adm-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table tr.is-off td { opacity: .62; }
.adm-table tr.is-bad td { background: var(--danger-soft); }
.adm-sub-cell { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.adm-mono { font-family: var(--mono); font-size: 12.5px; }
.adm-bad-text { color: var(--danger); }
.adm-format-wrap { margin-top: 12px; }
.adm-format-table { font-size: 13.5px; }
.adm-format-table td:first-child { white-space: nowrap; }
.adm-format-table code { font-family: var(--mono); font-size: 12.5px; }
.adm-format-note { margin-top: 12px; }
/* ---- rows, badges, inline actions ---- */
.adm-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
padding: 16px 18px;
border: 1px solid var(--line);
border-radius: var(--r);
background: var(--surface);
}
.adm-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14.5px; }
.adm-tag {
display: inline-block;
padding: 1px 8px;
border: 1px solid var(--accent-line);
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent-ink);
font-size: 11.5px;
font-weight: 600;
white-space: nowrap;
}
.adm-tag.warn { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.adm-tag.bad { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger); }
.adm-tag.off { border-color: var(--line-2); background: var(--surface-3); color: var(--ink-3); }
.adm-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; white-space: nowrap; }
.adm-actions .linkbtn { font-size: 13.5px; }
.linkbtn.danger { color: var(--danger); }
/* Destructive, and it has to look it before it is pressed rather than only in
the confirmation that follows. */
.btn.danger { border-color: var(--danger-line); color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); }
.adm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-chip {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 12px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface-2);
}
.adm-code {
font-family: var(--mono);
font-size: 13px;
word-break: break-all;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--surface-2);
margin: 8px 0 10px;
}
/* ---- clinician feedback ---- */
.adm-feedback-response { display: grid; gap: 14px; }
.adm-feedback-response + .adm-feedback-response { margin-top: 0; }
.adm-feedback-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}
.adm-feedback-head time { white-space: nowrap; }
.adm-feedback-response .adm-quote { margin: 0; white-space: pre-wrap; }
.adm-feedback-settings { margin-bottom: 18px; }
.adm-feedback-setting-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 300px));
gap: 16px;
}
.adm-number-suffix {
display: grid;
grid-template-columns: minmax(72px, 100px) 1fr;
align-items: center;
gap: 10px;
}
.adm-number-suffix span { color: var(--ink-3); font-size: 13px; }
/* ---- forms ---- */
.adm-form { display: grid; gap: 14px; margin-top: 4px; }
.adm-form + .adm-dialog-foot { margin-top: 18px; }
.adm-dialog-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.adm-danger-check { border-color: var(--warn-line); background: var(--warn-soft); }
.adm-more { display: flex; justify-content: center; margin-top: 18px; }
/* ---- site feature access ---- */
.adm-feature-card { margin-top: 18px; }
.adm-feature-list { display: grid; gap: 14px; margin-top: 4px; }
.adm-feature {
display: grid;
gap: 12px;
padding: 16px 18px;
border: 1px solid var(--line);
border-radius: var(--r);
background: var(--surface-2);
}
.adm-feature .check { background: var(--surface); }
.adm-feature-message { max-width: 760px; }
.adm-feature-message input { width: 100%; }
/* ---- dialog ---- */
.adm-dialog {
width: min(560px, calc(100vw - 32px));
padding: 26px 28px;
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--surface);
color: var(--ink);
box-shadow: var(--shadow-2);
}
.adm-dialog::backdrop { background: rgba(9, 13, 20, .5); }
/* ---- drop zones ---- */
.adm-drop {
display: grid;
gap: 6px;
place-items: center;
padding: 34px 20px;
border: 1.5px dashed var(--line-2);
border-radius: var(--r-lg);
background: var(--surface-2);
text-align: center;
font-size: 14.5px;
}
.adm-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.adm-warnings { display: grid; gap: 6px; margin-bottom: 14px; font-size: 13.5px; color: var(--warn); }
/* ---- QI health banners ----
Stacked rather than the one-line .adm-alert: each of these says what has gone
wrong, what it costs, and offers the action that fixes it, and a measurement
store that has stopped recording deserves more than a strip of text. */
.adm-qi-alert {
display: grid;
gap: 6px;
justify-items: start;
border-left-width: 3px;
}
.adm-qi-alert.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.adm-qi-alert.bad { border-left-color: var(--danger); background: var(--danger-soft); }
.adm-qi-alert b { font-size: 14.5px; }
.adm-queue-filter { min-width: 190px; }
/* ---- QI charts ---- */
.adm-chart { margin: 0; }
.adm-svg { width: 100%; height: auto; overflow: visible; }
.adm-axis { stroke: var(--line-2); stroke-width: 1; }
.adm-median { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 4 4; }
.adm-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.adm-dot { fill: var(--accent); }
.adm-svg-t { fill: var(--ink-3); font-size: 10.5px; font-family: var(--sans); }
.adm-bars { display: grid; gap: 9px; }
.adm-bars li {
display: grid;
grid-template-columns: minmax(90px, 30%) minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
font-size: 13.5px;
}
.adm-bar-l { color: var(--ink-2); text-transform: capitalize; }
.adm-bar-t { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.adm-bar-f { display: block; height: 100%; background: var(--accent); }
.adm-bar-n { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
/* ---- narrow screens ----
An administrator on a phone is doing one thing: working the request queue
between two other things. The tables stay scrollable; everything that was
two columns becomes one. */
@media (max-width: 860px) {
.adm-feedback-setting-grid { grid-template-columns: 1fr; }
.adm-split, .adm-split-wide { grid-template-columns: 1fr; }
.adm-row { flex-direction: column; gap: 12px; }
.adm-head { align-items: flex-start; }
.adm-feedback-head { flex-direction: column; gap: 6px; }
}
/* =========================================================================
Shared site chrome.
Loaded last by both the public-site and packet-builder stylesheets. The
header and footer HTML already come from one pair of fragments; keeping the
final visual rules here makes that shared shell look the same on both sides
of /app as well.
========================================================================= */
.top .wrap,
.foot .wrap {
width: 100%;
max-width: 1120px;
margin: 0 auto;
padding-inline: 28px;
}
.top {
position: sticky;
top: 0;
z-index: 40;
transform: translateY(0);
border-bottom: 1px solid transparent;
background: var(--bg);
background: color-mix(in srgb, var(--bg) 86%, transparent);
box-shadow: none;
backdrop-filter: saturate(1.45) blur(18px);
-webkit-backdrop-filter: saturate(1.45) blur(18px);
transition: transform .24s cubic-bezier(.4, 0, .2, 1),
border-color .2s, background .2s, box-shadow .2s;
}
.top.stuck {
border-bottom-color: var(--line);
background: var(--bg);
background: color-mix(in srgb, var(--bg) 92%, transparent);
box-shadow: 0 8px 28px rgba(4, 12, 28, .08);
}
.top.is-hidden { transform: translateY(calc(-100% - 1px)); }
.top:focus-within { transform: translateY(0); }
.top-in {
height: 68px;
display: flex;
align-items: center;
gap: 14px;
}
.top .brand,
.foot .brand {
display: inline-flex;
align-items: center;
gap: 11px;
color: inherit;
font: 600 15.5px/1.2 var(--sans);
letter-spacing: -.017em;
text-decoration: none;
}
.top .mark,
.foot .mark {
width: 36px;
height: 36px;
flex: none;
display: grid;
place-items: center;
}
.top .mark img,
.foot .mark img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
transform: scale(1.06);
}
.top-nav {
margin-left: auto;
display: flex;
align-items: center;
gap: 4px;
}
.top .navlink {
padding: 7px 11px;
border-radius: var(--button-radius);
color: var(--ink-2);
font: 500 14px/1.45 var(--sans);
text-decoration: none;
}
.top .navlink:hover { background: var(--surface-3); color: var(--ink); }
.top .btn.sm {
min-width: 78px;
height: var(--button-height-sm);
padding: 0 var(--button-pad);
border-radius: var(--button-radius);
font-size: 14px;
line-height: 1;
}
.top .btn.sm.primary {
border-color: #155e75;
background: #155e75;
color: #fff;
}
.top .btn.sm.primary:hover {
border-color: #0e4b5e;
background: #0e4b5e;
color: #fff;
}
.account-in { display: inline-flex; align-items: center; gap: 8px; }
.account-who {
max-width: 27ch;
min-width: 0;
}
.account-who-destination {
flex: none;
font-weight: 650;
}
.account-who-name {
min-width: 0;
max-width: 15ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-who-name::before { content: "·"; margin-right: 7px; color: var(--ink-3); }
/* The site switcher. Sized to a hospital name rather than to its longest
possible value: these read "UCHealth University of Colorado Hospital", and a
control wide enough for that would crowd out everything beside it. It keeps
the native select on purpose — a custom menu here would be one more thing to
get keyboard focus wrong on, in the header of a clinical tool. */
.account-site {
max-width: 22ch;
min-width: 0;
padding-right: 8px;
font-weight: 600;
text-overflow: ellipsis;
}
.account-site:disabled { opacity: 0.6; }
/* The homepage header stays over its opening artwork. Its scrolled state and
the app's dark palette both land on the same blue-black used by the product
walkthrough below. */
.home .top {
position: fixed;
inset: 0 0 auto;
width: 100%;
border-bottom-color: transparent;
background: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.home .top.stuck {
border-bottom-color: var(--night-line);
background: color-mix(in srgb, var(--night) 90%, transparent);
box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
backdrop-filter: saturate(1.25) blur(20px);
-webkit-backdrop-filter: saturate(1.25) blur(20px);
}
.home .top .brand { color: #fff; text-shadow: 0 2px 18px rgba(3, 8, 18, .72); }
.home .top .navlink { color: rgba(255, 255, 255, .72); }
.home .top .navlink:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.home .top .btn.sm.primary {
border-color: rgba(255, 255, 255, .5);
background: rgba(6, 10, 18, .42);
color: #fff;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.home .top .btn.sm.primary:hover {
border-color: #fff;
background: rgba(6, 10, 18, .72);
color: #fff;
}
/* /app keeps its workspace toolbar sticky. The site header is the normal page
masthead above it, so the app does not spend 124 persistent pixels on two
stacked bars. */
.app-page {
min-height: 100dvh;
display: flex;
flex-direction: column;
}
.app-page .top {
position: relative;
flex: none;
transform: none;
border-bottom-color: var(--line);
background: var(--bg);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.app-page .shell { width: 100%; flex: 1 0 auto; }
/* A compact close rather than a second policy page. The longer professional-
responsibility language lives in About, Terms, and Privacy, where readers
have the context to use it. */
.foot {
flex: none;
margin-top: 40px;
padding: 54px 0 24px;
border-top: 1px solid var(--night-line);
background:
radial-gradient(ellipse 48% 90% at 8% 0%, rgba(45, 110, 173, .1), transparent 72%),
var(--night);
color: var(--night-ink);
}
.app-page .foot,
.home .foot { margin-top: 0; }
/* Earlier page-specific themes used brown-black and slate footer variants.
Keep their typography and ground on this one shared night palette. */
.home .foot,
.auth-page .foot {
border-top-color: var(--night-line);
background:
radial-gradient(ellipse 48% 90% at 8% 0%, rgba(45, 110, 173, .1), transparent 72%),
var(--night);
}
.foot-main {
display: grid;
grid-template-columns: minmax(260px, 1fr) auto;
align-items: start;
gap: clamp(48px, 9vw, 112px);
}
.foot-about { max-width: 36ch; }
.foot .brand { color: var(--night-ink); }
.foot-about > p {
margin: 14px 0 0;
color: var(--night-muted);
font: 400 14px/1.65 var(--sans);
}
.foot-assurance {
margin-top: 16px;
display: inline-flex;
align-items: center;
gap: 8px;
color: #a9bad0;
font: 500 12.5px/1.45 var(--sans);
}
.foot-assurance::before {
content: "";
width: 6px;
height: 6px;
flex: none;
border-radius: 50%;
background: var(--night-accent);
box-shadow: 0 0 0 4px rgba(85, 200, 255, .1);
}
.foot-nav {
display: grid;
grid-template-columns: repeat(2, minmax(120px, 1fr));
gap: 32px 56px;
padding-top: 3px;
}
.foot-nav-group { display: grid; align-content: start; gap: 9px; }
.foot-nav-title {
margin: 0 0 5px;
color: #72839a;
font: 700 10.5px/1.4 var(--sans);
letter-spacing: .11em;
text-transform: uppercase;
}
.foot a {
width: fit-content;
color: var(--night-muted);
font: 450 14px/1.5 var(--sans);
text-decoration: none;
}
.foot a:hover { color: var(--night-ink); text-decoration: none; }
.foot-bottom {
margin-top: 42px;
padding-top: 19px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px 24px;
border-top: 1px solid var(--night-line);
color: #718198;
font: 400 12px/1.5 var(--sans);
}
.foot-bottom-center { margin-left: auto; }
.foot-build {
margin-left: auto;
color: #65768d;
font-family: var(--mono);
font-size: 11px;
white-space: nowrap;
}
.home .foot .brand,
.auth-page .foot .brand { color: var(--night-ink); }
.home .foot a,
.home .foot-about > p,
.auth-page .foot a,
.auth-page .foot-about > p { color: var(--night-muted); }
.home .foot a:hover,
.auth-page .foot a:hover { color: var(--night-ink); }
.home .foot-nav-title,
.auth-page .foot-nav-title,
.home .foot-bottom,
.auth-page .foot-bottom { color: #718198; }
.home .foot-bottom,
.auth-page .foot-bottom { border-color: var(--night-line); }
.skip {
position: absolute;
left: 12px;
top: -60px;
z-index: 80;
padding: 9px 14px;
border-radius: var(--r-sm);
background: var(--accent);
color: var(--on-accent);
font: 600 14px/1.4 var(--sans);
text-decoration: none;
transition: top .15s;
}
.skip:focus { top: 12px; }
@media (max-width: 780px) {
.top .wrap,
.foot .wrap { padding-inline: 20px; }
.foot { padding-top: 44px; }
.foot-main { grid-template-columns: 1fr; gap: 34px; }
.foot-nav { padding-top: 0; }
}
@media (max-width: 640px) {
.account-who-name { display: none; }
/* The switcher survives the narrow breakpoint where the account name does
not. Knowing which hospital a packet is being built for matters more on a
ward phone than knowing your own name does. */
.account-site { max-width: 12ch; }
.foot-bottom { align-items: flex-start; flex-direction: column; }
.foot-bottom-center,
.foot-build { margin-left: 0; }
}
@media (max-width: 430px) {
.top .wrap,
.foot .wrap { padding-inline: 16px; }
.top-in { height: 62px; gap: 8px; }
.top .brand { min-width: 0; font-size: 15px; }
.top .brand > span:last-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.top .btn.sm { min-width: 72px; padding-inline: var(--button-pad-sm); }
.foot-nav { gap: 26px 32px; }
}
@media (prefers-reduced-motion: reduce) {
.top { transition: border-color .2s, background .2s, box-shadow .2s; }
.top.is-hidden { transform: translateY(0); }
}
@media print {
.top,
.foot,
.skip { display: none; }
}