/* DOMINANCE — VSL Funnel
---------------------------- */
:root {
--bg: #0A0A0A;
--bg-1: #0E0E0E;
--bg-2: #141414;
--bg-3: #1A1A1A;
--line: #1F1F1F;
--line-2: #262626;
--text: #F5F5F5;
--text-1: #C9C9C9;
--text-2: #8A8A8A;
--text-3: #5C5C5C;
--text-4: #3A3A3A;
--accent: #DC2626;
--accent-soft: rgba(220, 38, 38, 0.12);
--accent-line: rgba(220, 38, 38, 0.28);
--ease: cubic-bezier(0.32, 0.72, 0, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--radius: 6px;
--radius-lg: 10px;
--maxw: 1240px;
--pad-x: clamp(20px, 5vw, 56px);
--sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }
/* Clip horizontal overflow at BOTH html and body — iOS Safari treats
as the scroll container, so `overflow-x: hidden` on body alone lets the
step-pane enter animation (translateX(20px)) latch into html-level
horizontal rubber-band scroll on /apply and /qualified.
`overflow-x: clip` is preferable to `hidden` because it doesn't create
a scroll container at all — pure visual clipping, no rubber-band.
`hidden` first as fallback for the few engines that don't support clip. */
html, body { overflow-x: hidden; overflow-x: clip; }
body {
font-family: var(--sans);
background: var(--bg);
color: var(--text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "ss01", "cv11", "cv03";
font-optical-sizing: auto;
text-rendering: optimizeLegibility;
min-height: 100vh;
}
/* Filmic grain overlay — gives the dark bg a tactile, non-digital feel.
inset:0, not -50%: iOS Safari doesn't reliably clip fixed-positioned
elements with overflow-x:clip on , so any extension past the
viewport (the old inset:-50% blew it out by 50% per side) shows up as
horizontal scroll on phones. Shifting the noise via background-position
on a viewport-sized element gives the same dancing-grain visual without
extending the document box. */
.grain {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.035;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
animation: grainShift 7s steps(8) infinite;
}
@keyframes grainShift {
0% { background-position: 0px 0px; }
10% { background-position: -8px 5px; }
20% { background-position: 6px -8px; }
30% { background-position: -6px 8px; }
40% { background-position: 8px 5px; }
50% { background-position: -8px -5px; }
60% { background-position: 6px 8px; }
70% { background-position: -6px -8px; }
80% { background-position: 8px -5px; }
100% { background-position: 0px 0px; }
}
/* Display headlines — tighter tracking on Geist for premium feel */
h1.display, .display { letter-spacing: -0.045em; }
h2.title, .title { letter-spacing: -0.032em; }
/* Word-by-word stagger for h1 hero */
.word-stagger { display: inline; }
.word-stagger .w {
display: inline-block;
opacity: 0;
transform: translateY(0.4em);
filter: blur(6px);
animation: wordIn 700ms var(--ease-out) forwards;
}
@keyframes wordIn {
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* Scroll-driven reveal — uses view-timeline where supported, fallback is fade-in classes */
@supports (animation-timeline: view()) {
.reveal {
animation: revealIn linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
@keyframes revealIn {
from { opacity: 0; transform: translateY(28px); filter: blur(4px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
}
/* Magnetic CTA — JS sets --tx/--ty in px when cursor is within range */
.btn.magnetic {
transform: translate(var(--tx, 0px), var(--ty, 0px));
transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 320ms var(--ease), filter 320ms var(--ease);
}
.btn.magnetic:hover { transform: translate(var(--tx, 0px), calc(var(--ty, 0px) - 1px)); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
input, textarea, select { font-family: inherit; }
::selection { background: var(--accent); color: #fff; }
/* Subtle ambient grid background */
.ambient {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(to right, rgba(255,255,255,0.018) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.018) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
}
.ambient::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(800px 400px at 50% -10%, rgba(220,38,38,0.06), transparent 60%),
radial-gradient(600px 600px at 90% 100%, rgba(220,38,38,0.03), transparent 60%);
}
/* Custom cursor */
@media (hover: hover) and (pointer: fine) {
html.has-cursor, html.has-cursor body { cursor: none; }
html.has-cursor a, html.has-cursor button, html.has-cursor [role="button"], html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: none; }
}
.cursor {
position: fixed;
top: 0; left: 0;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
mix-blend-mode: normal;
box-shadow: 0 0 14px rgba(220,38,38,0.55);
transition: width 280ms var(--ease), height 280ms var(--ease), background 280ms var(--ease), opacity 280ms var(--ease);
opacity: 0;
}
.cursor-ring {
position: fixed;
top: 0; left: 0;
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.35);
pointer-events: none;
z-index: 9998;
transform: translate(-50%, -50%);
transition: width 320ms var(--ease), height 320ms var(--ease), border-color 320ms var(--ease), background 320ms var(--ease), opacity 280ms var(--ease);
opacity: 0;
backdrop-filter: invert(0.05);
-webkit-backdrop-filter: invert(0.05);
}
.cursor.visible, .cursor-ring.visible { opacity: 1; }
.cursor.hover-link { width: 6px; height: 6px; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.5); }
.cursor-ring.hover-link {
width: 56px; height: 56px;
border-color: rgba(220,38,38,0.6);
background: rgba(220,38,38,0.06);
}
.cursor-ring.hover-cta {
width: 80px; height: 80px;
border-color: rgba(220,38,38,0.8);
background: rgba(220,38,38,0.1);
}
.cursor.hover-cta { width: 4px; height: 4px; background: #fff; }
.cursor.hover-text {
width: 2px; height: 22px; border-radius: 2px;
background: #fff;
box-shadow: none;
}
.cursor-ring.hover-text { opacity: 0; }
.cursor.pressed { transform: translate(-50%, -50%) scale(0.6); }
.cursor-ring.pressed { transform: translate(-50%, -50%) scale(0.85); }
/* Hide on touch */
@media (hover: none) {
.cursor, .cursor-ring { display: none !important; }
html.has-cursor, html.has-cursor body { cursor: auto !important; }
}
/* Top nav */
.nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(10,10,10,0.72);
backdrop-filter: saturate(140%) blur(14px);
-webkit-backdrop-filter: saturate(140%) blur(14px);
border-bottom: 1px solid var(--line);
}
.nav-inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 14px var(--pad-x);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.nav-left { display: flex; align-items: center; gap: 18px; min-width: 0; }
.nav-logo {
height: 28px;
width: auto;
display: block;
filter: drop-shadow(0 0 0 transparent);
}
.nav-logo.wordmark { height: 24px; }
.nav-divider {
width: 1px; height: 18px; background: var(--line-2);
}
.nav-status {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--text-2);
text-transform: uppercase;
}
.nav-status .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px rgba(220,38,38,0.16);
animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(220,38,38,0.16); }
50% { box-shadow: 0 0 0 7px rgba(220,38,38,0.04); }
}
.nav-right {
display: flex; align-items: center; gap: 18px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--text-3);
text-transform: uppercase;
}
.nav-right .meta { display: flex; align-items: center; gap: 8px; }
.nav-right .meta::before {
content: ""; width: 4px; height: 4px; background: var(--text-3); border-radius: 50%;
}
/* Page shell */
.page {
position: relative;
z-index: 1;
min-height: calc(100vh - 57px);
padding: clamp(40px, 7vw, 96px) var(--pad-x) clamp(48px, 8vw, 120px);
}
.container {
max-width: var(--maxw);
margin: 0 auto;
position: relative;
}
/* Section eyebrow / chips */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-2);
padding: 7px 12px;
border: 1px solid var(--line-2);
border-radius: 100px;
background: rgba(255,255,255,0.012);
}
.eyebrow .tick {
width: 5px; height: 5px; background: var(--accent); border-radius: 50%;
}
/* Headlines */
h1.display, .display {
font-family: var(--sans);
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1.02;
font-size: clamp(40px, 6.4vw, 84px);
margin: 0;
color: var(--text);
}
h2.title, .title {
font-family: var(--sans);
font-weight: 600;
letter-spacing: -0.028em;
line-height: 1.06;
font-size: clamp(32px, 4.4vw, 56px);
margin: 0;
color: var(--text);
}
.lede {
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.55;
color: var(--text-1);
margin: 0;
letter-spacing: -0.005em;
max-width: 60ch;
}
/* Accent treatments */
.kicker {
font-family: var(--sans);
font-size: clamp(15px, 1.3vw, 17px);
font-weight: 500;
color: var(--text-2);
letter-spacing: -0.005em;
}
.kicker .accent {
color: var(--text);
position: relative;
white-space: nowrap;
}
.kicker .accent::after {
content: "";
position: absolute;
left: 0; right: 0;
bottom: -3px;
height: 2px;
background: var(--accent);
transform-origin: left center;
animation: wipe 900ms var(--ease-out) 600ms both;
}
@keyframes wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Buttons — premium (depth, light, no movement) */
.btn {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 0 28px;
height: 56px;
font-size: 15px;
font-weight: 500;
letter-spacing: -0.005em;
border-radius: var(--radius);
background:
radial-gradient(140% 180% at 50% -20%, #FF5050 0%, transparent 55%),
radial-gradient(120% 180% at 100% 120%, #A8181D 0%, transparent 55%),
linear-gradient(180deg, #DE2828 0%, #B81818 100%);
color: #fff;
position: relative;
overflow: hidden;
transition: filter 520ms var(--ease), box-shadow 520ms var(--ease);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.26),
inset 0 -1px 0 rgba(0,0,0,0.38),
inset 0 0 0 1px rgba(255,255,255,0.04),
0 1px 0 rgba(255,255,255,0.04),
0 10px 26px -12px rgba(220,38,38,0.55),
0 0 0 1px rgba(220,38,38,0.5);
isolation: isolate;
text-shadow: 0 1px 0 rgba(0,0,0,0.28);
}
.btn::before {
/* soft inner top highlight (glass) */
content: "";
position: absolute;
inset: 1px 1px auto 1px;
height: 52%;
border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
pointer-events: none;
opacity: 0.95;
}
.btn::after {
/* fine grain texture — adds material feel */
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.06;
mix-blend-mode: overlay;
pointer-events: none;
}
.btn:hover {
filter: brightness(1.06);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.32),
inset 0 -1px 0 rgba(0,0,0,0.42),
inset 0 0 0 1px rgba(255,255,255,0.06),
0 16px 38px -12px rgba(220,38,38,0.7),
0 0 0 1px rgba(220,38,38,0.7),
0 0 30px -6px rgba(220,38,38,0.35);
}
.btn:active { filter: brightness(0.97); transition-duration: 120ms; }
.btn .arrow { display: inline-block; }
/* glint disabled — kept selector empty so JSX renders harmlessly */
.btn .glint { display: none; }
/* Ripple injected by JS on click — soft, no scale jump */
.btn .ripple {
position: absolute;
width: 12px; height: 12px;
border-radius: 50%;
background: rgba(255,255,255,0.22);
transform: translate(-50%, -50%) scale(0);
pointer-events: none;
z-index: 2;
animation: ripple 800ms var(--ease-out) forwards;
}
@keyframes ripple {
to { transform: translate(-50%, -50%) scale(34); opacity: 0; }
}
.btn > span:not(.glint):not(.ripple):not(.arrow) { position: relative; z-index: 3; }
.btn .arrow { position: relative; z-index: 3; }
/* legacy ::before / ::after / glint / ripple selectors below are now overridden — keep as no-ops */
.btn-legacy-noop {}
.btn > span:not(.glint):not(.ripple):not(.arrow) { position: relative; z-index: 3; }
.btn .arrow { position: relative; z-index: 3; }
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0 18px;
height: 44px;
font-size: 14px;
font-weight: 500;
border-radius: var(--radius);
background: linear-gradient(180deg, #181818, #101010);
border: 1px solid var(--line-2);
color: var(--text-1);
position: relative;
overflow: hidden;
transition: transform 280ms var(--ease), border-color 280ms var(--ease), color 280ms var(--ease), box-shadow 280ms var(--ease);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.btn-ghost::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(160px 80px at var(--mx, 50%) var(--my, 50%), rgba(220,38,38,0.18), transparent 70%);
opacity: 0;
transition: opacity 280ms var(--ease);
pointer-events: none;
}
.btn-ghost:hover {
border-color: rgba(220,38,38,0.5);
color: var(--text);
transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 6px 18px -10px rgba(220,38,38,0.5);
}
.btn-ghost:hover::before { opacity: 1; }
.btn-pill {
height: 36px;
padding: 0 14px;
border-radius: 100px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--line-2);
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-2);
display: inline-flex; align-items: center; gap: 8px;
}
/* Video frame */
.video {
position: relative;
aspect-ratio: 16 / 9;
width: 100%;
background: #050505;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow:
0 0 0 1px rgba(255,255,255,0.02) inset,
0 30px 90px -40px rgba(0,0,0,0.9),
0 4px 16px -8px rgba(0,0,0,0.6);
}
.video::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(ellipse 60% 70% at 50% 50%, rgba(255,255,255,0.025), transparent 70%),
repeating-linear-gradient(115deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 14px);
pointer-events: none;
}
.video-corners::before,
.video-corners::after,
.video-corners > i:first-child,
.video-corners > i:last-child {
content: "";
position: absolute;
width: 14px; height: 14px;
border-color: rgba(255,255,255,0.25);
border-style: solid;
border-width: 0;
pointer-events: none;
}
.video-corners::before { top: 12px; left: 12px; border-top-width: 1px; border-left-width: 1px; }
.video-corners::after { top: 12px; right: 12px; border-top-width: 1px; border-right-width: 1px; }
.video-corners > i:first-child { bottom: 12px; left: 12px; border-bottom-width: 1px; border-left-width: 1px; }
.video-corners > i:last-child { bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; }
.play-btn {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.play-btn .ring {
width: 92px; height: 92px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex; align-items: center; justify-content: center;
transition: transform 240ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease);
}
.play-btn:hover .ring {
background: rgba(220,38,38,0.18);
border-color: rgba(220,38,38,0.6);
transform: scale(1.04);
}
.play-btn .triangle {
width: 0; height: 0;
border-left: 18px solid #fff;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
margin-left: 4px;
}
.video-meta {
position: absolute;
left: 18px; bottom: 16px;
display: flex; align-items: center; gap: 12px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-2);
z-index: 2;
}
.video-meta .badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 8px;
background: rgba(0,0,0,0.6);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 4px;
}
.video-meta .badge .live-dot {
width: 5px; height: 5px; border-radius: 50%;
background: var(--accent); box-shadow: 0 0 6px var(--accent);
}
.video-runtime {
position: absolute;
right: 18px; bottom: 16px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--text-2);
z-index: 2;
padding: 4px 8px;
background: rgba(0,0,0,0.6);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 4px;
}
/* Cards */
.card {
background: linear-gradient(180deg, #111 0%, #0C0C0C 100%);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 22px;
position: relative;
}
/* Footer */
.footer {
border-top: 1px solid var(--line);
padding: 32px var(--pad-x) 40px;
position: relative;
z-index: 1;
background: var(--bg);
}
.footer-inner {
max-width: var(--maxw);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--text-3);
text-transform: uppercase;
}
.footer-inner .legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-inner img { height: 16px; width: auto; opacity: 0.55; }
/* Progress bar (shared) */
.form-progress {
height: 2px;
background: var(--line);
position: relative;
}
.form-progress > i {
display: block;
height: 100%;
background: var(--accent);
width: 0%;
transition: width 380ms var(--ease);
}
.btn[disabled] {
pointer-events: none;
background: #2A1414;
color: #6A4040;
box-shadow: 0 0 0 1px var(--line-2);
}
/* Apply CTA card */
.apply-cta {
margin-top: clamp(64px, 9vw, 112px);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background:
radial-gradient(800px 280px at 90% 0%, rgba(220,38,38,0.08), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.014), transparent);
overflow: hidden;
position: relative;
}
.apply-cta::before {
content: ""; position: absolute; inset: 0;
background-image:
linear-gradient(to right, rgba(255,255,255,0.018) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.018) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse 60% 80% at 80% 50%, #000 30%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 60% 80% at 80% 50%, #000 30%, transparent 75%);
pointer-events: none;
}
.apply-cta-inner {
position: relative;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: clamp(24px, 4vw, 48px);
padding: clamp(28px, 4vw, 48px);
align-items: center;
}
@media (max-width: 860px) {
.apply-cta-inner { grid-template-columns: 1fr; }
}
.apply-cta-text { display: flex; flex-direction: column; align-items: flex-start; }
.apply-cta-meta {
margin-top: 18px;
display: flex; gap: 12px; flex-wrap: wrap;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
}
.apply-cta-meta b { color: var(--text-1); font-weight: 500; }
.apply-cta-action {
display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.apply-cta-action .btn { width: auto; min-width: 280px; }
.apply-cta-note {
font-size: 13px; color: var(--text-3); letter-spacing: -0.005em;
}
/* Modal — premium */
.modal-root {
position: fixed; inset: 0;
z-index: 200;
display: flex; align-items: center; justify-content: center;
padding: clamp(16px, 4vw, 40px);
animation: modalIn 320ms var(--ease-out) both;
}
@keyframes modalIn { from { opacity: 0; } to { opacity: 1; } }
.modal-backdrop {
position: absolute; inset: 0;
background: rgba(4,4,4,0.72);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
}
.modal-shell {
position: relative;
width: min(760px, 100%);
max-height: calc(100vh - 32px);
background:
radial-gradient(700px 240px at 50% -10%, rgba(220,38,38,0.08), transparent 60%),
linear-gradient(180deg, #141414 0%, #0A0A0A 100%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
display: flex; flex-direction: column;
box-shadow:
0 60px 140px -30px rgba(0,0,0,0.92),
0 0 0 1px rgba(255,255,255,0.04) inset,
0 1px 0 rgba(255,255,255,0.06) inset,
0 0 90px -20px rgba(220,38,38,0.22);
overflow: hidden;
animation: modalPop 460ms var(--ease-out) both;
isolation: isolate;
}
@keyframes modalPop {
from { opacity: 0; transform: translateY(20px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-vignette {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(800px 300px at 50% 0%, rgba(255,255,255,0.04), transparent 60%),
linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.4) 100%);
z-index: 0;
}
/* Header */
.modal-head {
position: relative;
z-index: 1;
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
padding: 20px 24px 18px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.modal-head-left {
display: flex; align-items: center; gap: 12px;
}
.modal-d {
height: 22px;
width: auto;
opacity: 0.95;
}
.modal-head-label {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-2);
}
.modal-head-right { display: flex; align-items: center; gap: 12px; }
.modal-step-count {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.06em;
color: var(--text-3);
display: inline-flex; align-items: center; gap: 4px;
font-feature-settings: "tnum";
}
.modal-step-count b { color: var(--text); font-weight: 500; }
.modal-step-count .sep { color: var(--text-4); }
.modal-step-count .of { color: var(--text-3); }
.modal-close {
width: 30px; height: 30px;
border-radius: 8px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
color: var(--text-2);
display: inline-flex; align-items: center; justify-content: center;
transition: background 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease), transform 240ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.modal-close:hover {
background: rgba(220,38,38,0.18);
border-color: rgba(220,38,38,0.6);
color: #fff;
transform: rotate(90deg);
}
}
/* Stepper rail */
.stepper-rail {
position: relative;
z-index: 1;
display: flex;
gap: 4px;
padding: 14px 24px 16px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.stepper-seg {
flex: 1;
height: 3px;
border-radius: 2px;
background: rgba(255,255,255,0.06);
position: relative;
overflow: hidden;
transition: background 320ms var(--ease);
}
.stepper-seg.done { background: var(--accent); }
.stepper-seg.active {
background: var(--accent);
box-shadow: 0 0 12px rgba(220,38,38,0.5);
}
.stepper-seg.active::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
animation: railPulse 1.6s var(--ease) infinite;
}
@keyframes railPulse {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* Body */
.modal-body {
position: relative;
z-index: 1;
padding: clamp(28px, 4vw, 40px) clamp(24px, 3.5vw, 40px) clamp(20px, 3vw, 32px);
overflow-y: auto;
flex: 1;
}
.step-pane {
display: flex; flex-direction: column; gap: 20px;
animation: paneIn 420ms var(--ease-out) both;
}
.step-pane.in-back { animation: paneInBack 420ms var(--ease-out) both; }
@keyframes paneIn {
from { opacity: 0; transform: translateX(20px); filter: blur(2px); }
to { opacity: 1; transform: translateX(0); filter: blur(0); }
}
@keyframes paneInBack {
from { opacity: 0; transform: translateX(-20px); filter: blur(2px); }
to { opacity: 1; transform: translateX(0); filter: blur(0); }
}
.step-num {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
}
.step-num-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 10px var(--accent);
}
.step-num-of { color: var(--text-3); letter-spacing: 0.08em; }
.step-q {
margin: 0;
font-size: clamp(24px, 2.8vw, 34px);
font-weight: 600;
letter-spacing: -0.025em;
color: var(--text);
line-height: 1.15;
max-width: 24ch;
}
.step-options { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.step-option {
display: grid;
grid-template-columns: 32px 1fr auto;
align-items: center;
gap: 14px;
padding: 16px 18px 16px 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.07);
border-radius: 10px;
color: var(--text-1);
font-size: 15px;
font-weight: 500;
letter-spacing: -0.005em;
text-align: left;
position: relative;
overflow: hidden;
transition:
transform 280ms var(--ease),
border-color 280ms var(--ease),
background 280ms var(--ease),
color 280ms var(--ease),
box-shadow 280ms var(--ease);
animation: optionIn 380ms var(--ease-out) both;
isolation: isolate;
}
@keyframes optionIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.step-option::before {
/* gradient sweep on hover */
content: "";
position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 35%, rgba(220,38,38,0.08) 50%, transparent 65%);
transform: translateX(-110%);
transition: transform 700ms var(--ease);
pointer-events: none;
z-index: 0;
}
/* Hover wrapped — prevents sticky :hover after tap on iOS that carried the
red highlight from a previous question's option onto the new question. */
@media (hover: hover) and (pointer: fine) {
.step-option:hover::before { transform: translateX(110%); }
.step-option:hover {
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
border-color: rgba(255,255,255,0.14);
color: var(--text);
transform: translateX(2px);
box-shadow: 0 8px 24px -16px rgba(0,0,0,0.6);
}
}
.step-option > * { position: relative; z-index: 1; }
.step-option-key {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0;
color: var(--text-2);
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 6px;
transition: all 280ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.step-option:hover .step-option-key {
color: #fff;
background: rgba(220,38,38,0.18);
border-color: rgba(220,38,38,0.45);
}
}
.step-option-text {
flex: 1;
letter-spacing: -0.005em;
}
.step-option-arrow {
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-4);
transition: transform 320ms var(--ease), color 320ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.step-option:hover .step-option-arrow {
color: var(--accent);
transform: translateX(4px);
}
}
.step-option.selected {
background:
radial-gradient(220px 80px at 50% 50%, rgba(220,38,38,0.22), transparent 70%),
linear-gradient(180deg, rgba(220,38,38,0.12), rgba(220,38,38,0.04));
border-color: rgba(220,38,38,0.7);
color: #fff;
box-shadow:
0 0 0 1px rgba(220,38,38,0.6),
0 8px 30px -10px rgba(220,38,38,0.45);
transform: translateX(2px);
}
.step-option.selected .step-option-key {
background: var(--accent);
border-color: var(--accent);
color: #fff;
box-shadow: 0 0 14px rgba(220,38,38,0.65);
}
.step-option.selected .step-option-arrow { color: #fff; }
/* Review list — refined */
.review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.review-edit {
width: 100%;
display: grid;
grid-template-columns: 32px 1fr 18px;
gap: 16px;
align-items: center;
padding: 14px 16px;
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.008));
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
text-align: left;
transition: all 240ms var(--ease);
color: var(--text-1);
}
.review-edit:hover {
border-color: rgba(220,38,38,0.5);
background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
transform: translateX(2px);
}
.review-num {
font-family: var(--mono); font-size: 11px; color: var(--text-3); letter-spacing: 0.1em;
align-self: start; padding-top: 2px;
}
.review-content { display: flex; flex-direction: column; gap: 3px; }
.review-q { font-size: 12px; color: var(--text-3); letter-spacing: 0.005em; }
.review-a { font-size: 14.5px; color: var(--text); font-weight: 500; letter-spacing: -0.005em; }
.review-edit-icon { color: var(--text-4); align-self: center; transition: color 240ms var(--ease); }
.review-edit:hover .review-edit-icon { color: var(--accent); }
/* Footer */
.modal-foot {
position: relative;
z-index: 1;
display: flex; align-items: center; gap: 14px;
padding: 14px 16px 14px 14px;
border-top: 1px solid rgba(255,255,255,0.05);
background: linear-gradient(180deg, transparent, rgba(0,0,0,0.3));
}
.modal-back {
height: 40px;
padding: 0 14px;
}
.modal-foot-status {
flex: 1;
text-align: center;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-3);
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.modal-foot-status b { color: var(--text-1); font-weight: 500; }
.modal-foot-status .kbd {
display: inline-flex; align-items: center; gap: 2px;
padding: 2px 7px;
font-family: var(--mono); font-size: 10.5px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-bottom-color: rgba(255,255,255,0.04);
border-radius: 4px;
color: var(--text-1);
letter-spacing: 0.05em;
text-transform: none;
}
@media (max-width: 640px) {
/* dvh — учитывает iOS browser bar; иначе верх и низ обрезаются */
.modal-shell { max-height: calc(100dvh - 16px); border-radius: 14px; }
.stepper-rail { padding: 12px 16px; }
.modal-head { padding: 16px 16px 14px; }
/* Sticky-футер: Submit не уезжает под адресную строку браузера,
padding-bottom учитывает iPhone home indicator. */
.modal-foot {
position: sticky;
bottom: 0;
z-index: 5;
flex-wrap: wrap;
padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
background: rgba(10,10,10,0.96);
backdrop-filter: saturate(140%) blur(14px);
-webkit-backdrop-filter: saturate(140%) blur(14px);
border-top: 1px solid rgba(255,255,255,0.06);
}
.modal-foot .btn { width: 100%; }
.modal-foot-status { width: 100%; order: -1; padding: 6px 0; }
.modal-back { height: 36px; }
.step-q { font-size: 22px; }
.step-option { grid-template-columns: 28px 1fr auto; padding: 14px 14px 14px 12px; }
.step-option-key { width: 24px; height: 24px; font-size: 10px; }
.apply-cta-action .btn { min-width: 0; width: 100%; }
/* iOS не зумит инпут только при font-size ≥16px — иначе форма «прыгает». */
.modal-input { font-size: 16px; }
/* Chrome mobile иногда расширяет Cal-iframe за вьюпорт →
горизонтальный скролл на /qualified. Жёстко клампим. */
#dominance-cal-embed,
#dominance-cal-embed iframe {
max-width: 100% !important;
width: 100% !important;
}
}
/* Q intro card (inside modal — for q7 fee explanation) */
.q-intro {
margin-top: 4px;
padding: 18px 18px 16px;
border: 1px solid var(--line-2);
border-left: 2px solid var(--accent);
border-radius: 8px;
background:
radial-gradient(400px 120px at 0% 0%, rgba(220,38,38,0.06), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,0.014), transparent);
display: flex; flex-direction: column; gap: 10px;
}
.q-intro-lead {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.01em;
}
.q-intro-body {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--text-1);
letter-spacing: -0.005em;
}
.q-intro-stat {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 2px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-2);
padding: 8px 12px;
background: rgba(220,38,38,0.08);
border: 1px solid var(--accent-line);
border-radius: 6px;
align-self: flex-start;
}
.q-intro-stat-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px var(--accent);
}
/* Hook hero
Desktop: text columns on the left (top + bottom share column 1), video in column 2.
Mobile (≤980px): single column ordered top → video → bottom, so the video sits
between the offer text and the red CTA. */
.hero {
display: grid;
grid-template-columns: 1.05fr 1fr;
grid-template-areas:
"top right"
"bottom right";
gap: clamp(32px, 5vw, 80px);
align-items: center;
}
.hero-text-top { grid-area: top; }
.hero-right { grid-area: right; }
.hero-text-bottom { grid-area: bottom; }
.hero-text-top,
.hero-text-bottom {
display: flex;
flex-direction: column;
gap: 28px;
align-items: flex-start;
}
@media (max-width: 980px) {
.hero {
grid-template-columns: 1fr;
grid-template-areas:
"top"
"right"
"bottom";
gap: 28px;
}
}
.hero-left { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.hero-meta {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
}
.hero-meta b { color: var(--text-1); font-weight: 500; }
.hero-stamp {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 18px;
font-family: var(--mono);
font-size: clamp(12px, 1.05vw, 14px);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-2);
}
.hero-stamp > span { white-space: nowrap; }
.hero-stamp b { color: var(--text); font-weight: 600; }
.hero-stamp .sep { color: var(--accent); font-weight: 700; padding: 0 10px; }
.hero-cta-row {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.hero-cta-note {
font-size: 13px;
color: var(--text-3);
letter-spacing: -0.005em;
}
.hero-cta-note b { color: var(--text-1); font-weight: 500; }
/* metrics row (replaced by strip below) */
.metrics-strip {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(20px, 4vw, 56px);
flex-wrap: wrap;
margin-top: clamp(48px, 7vw, 96px);
padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 36px);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(255,255,255,0.014), transparent);
}
.metric-strip {
display: flex;
flex-direction: column;
gap: 6px;
text-align: center;
}
.metric-strip-k {
font-family: var(--sans);
font-size: clamp(28px, 3.4vw, 42px);
font-weight: 600;
letter-spacing: -0.03em;
color: var(--text);
font-feature-settings: "tnum";
line-height: 1;
}
.metric-strip-l {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-3);
}
.metric-strip-divider {
width: 1px;
height: 36px;
background: var(--line-2);
}
@media (max-width: 740px) {
.metrics-strip { flex-direction: column; }
.metric-strip-divider { width: 60px; height: 1px; }
}
/* legacy grid metrics (kept in case showMetrics flag old data) */
.metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
margin-top: clamp(48px, 7vw, 96px);
overflow: hidden;
}
.metric {
background: var(--bg-1);
padding: 22px 22px 24px;
display: flex; flex-direction: column; gap: 8px;
}
.metric-k {
font-family: var(--sans);
font-size: clamp(28px, 3vw, 38px);
font-weight: 600;
letter-spacing: -0.028em;
color: var(--text);
font-feature-settings: "tnum";
}
.metric-k .unit { color: var(--text-3); font-weight: 500; margin-left: 2px; }
.metric-l {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
}
@media (max-width: 740px) {
.metrics { grid-template-columns: repeat(2, 1fr); }
}
/* Marquee logos */
.logos-row {
margin-top: clamp(40px, 6vw, 72px);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 22px 0;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-2);
overflow: hidden;
white-space: nowrap;
background: linear-gradient(180deg, transparent, rgba(220,38,38,0.02), transparent);
position: relative;
}
.logos-row::before, .logos-row::after {
content: "";
position: absolute; top: 0; bottom: 0;
width: clamp(40px, 8vw, 120px);
z-index: 2;
pointer-events: none;
}
.logos-row::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.logos-row::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.logos-track {
display: inline-flex; gap: 56px; align-items: center;
animation: marq 40s linear infinite;
padding-left: 56px;
}
.logos-track span { color: var(--text-2); }
.logos-track .sep { color: var(--accent); opacity: 0.7; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* VSL page two-col */
.vsl-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: clamp(28px, 4vw, 56px);
align-items: start;
}
@media (max-width: 1080px) {
.vsl-grid { grid-template-columns: 1fr; }
}
.vsl-side {
position: sticky;
top: 88px;
display: flex; flex-direction: column; gap: 16px;
}
.side-card {
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 22px;
background: linear-gradient(180deg, rgba(255,255,255,0.014), transparent);
}
.side-card h4 {
margin: 0 0 14px;
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-2);
}
.steps { display: flex; flex-direction: column; gap: 14px; }
.step { display: flex; gap: 12px; align-items: flex-start; }
.step .n {
flex: 0 0 auto;
width: 22px; height: 22px;
border-radius: 50%;
border: 1px solid var(--line-2);
display: flex; align-items: center; justify-content: center;
font-family: var(--mono);
font-size: 10px;
color: var(--text-2);
margin-top: 1px;
}
.step.done .n { background: var(--accent); border-color: var(--accent); color: #fff; }
.step.active .n { border-color: var(--accent); color: var(--accent); }
.step .body { display: flex; flex-direction: column; gap: 2px; }
.step .body b { font-size: 14px; font-weight: 500; color: var(--text); letter-spacing: -0.005em; }
.step .body span { font-size: 12.5px; color: var(--text-3); }
/* VSL header */
.vsl-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: clamp(24px, 3vw, 36px); }
/* Confirmation */
.confirm {
min-height: calc(100vh - 57px - 110px);
display: flex; align-items: center; justify-content: center;
padding: clamp(40px, 6vw, 80px) var(--pad-x);
position: relative; z-index: 1;
/* Local clip — Cal.com inline embed sometimes injects wrappers with their
own widths; clip locally so they can't bleed into html-level scroll on
iOS Safari. */
overflow-x: hidden;
overflow-x: clip;
}
.confirm-card {
max-width: 720px;
text-align: center;
display: flex; flex-direction: column; gap: 28px; align-items: center;
}
.confirm-mark {
width: 64px; height: 64px;
border-radius: 50%;
border: 1px solid var(--accent-line);
background: var(--accent-soft);
display: flex; align-items: center; justify-content: center;
position: relative;
}
.confirm-mark::before {
content: ""; position: absolute; inset: -8px;
border-radius: 50%;
border: 1px solid rgba(220,38,38,0.16);
animation: ring 2.4s var(--ease) infinite;
}
@keyframes ring {
0% { transform: scale(0.92); opacity: 0.8; }
100% { transform: scale(1.25); opacity: 0; }
}
.confirm-mark svg { width: 22px; height: 22px; color: var(--accent); }
.confirm-wordmark {
height: clamp(40px, 5vw, 64px);
width: auto;
margin-bottom: 8px;
}
.confirm-divider {
width: 100%;
height: 1px;
background: var(--line);
margin: 12px 0;
position: relative;
}
.confirm-divider::before {
content: "";
position: absolute; left: 50%; top: -3px;
width: 80px; height: 7px; transform: translateX(-50%);
background: radial-gradient(ellipse, var(--accent) 0%, transparent 70%);
opacity: 0.5;
}
.confirm-small {
font-size: 13px; color: var(--text-3); letter-spacing: -0.005em;
line-height: 1.6;
}
.confirm-small a { color: var(--text-1); border-bottom: 1px solid var(--line-2); }
.confirm-sig {
font-family: var(--sans);
font-style: italic;
font-weight: 400;
font-size: 18px;
color: var(--text-1);
letter-spacing: -0.005em;
}
/* Page transition */
.fade-in {
animation: fadeUp 600ms var(--ease-out) both;
}
.fade-in-2 { animation: fadeUp 700ms var(--ease-out) 80ms both; }
.fade-in-3 { animation: fadeUp 800ms var(--ease-out) 160ms both; }
.fade-in-4 { animation: fadeUp 900ms var(--ease-out) 240ms both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
/* Mobile */
@media (max-width: 640px) {
.nav-right { display: none; }
.nav-divider { display: none; }
.form-q { grid-template-columns: 1fr; gap: 8px; }
.form-q-num { padding-top: 0; }
.form-q-num .live { display: none; }
.btn { width: 100%; justify-content: space-between; }
.hero-cta-row { width: 100%; }
.footer-inner { font-size: 10px; }
.logos-row { gap: 24px; padding: 18px 0; }
}
/* Contact form inputs (inside modal) */
.modal-contact-form { display: flex; flex-direction: column; gap: 16px; }
.modal-input-group { display: flex; flex-direction: column; gap: 7px; }
.modal-input-label {
font-size: 13px; font-weight: 500; color: var(--text-1);
letter-spacing: -0.005em; display: flex; align-items: center; gap: 5px;
}
.modal-input-label .req { color: var(--accent); font-size: 12px; font-weight: 600; }
.modal-input {
width: 100%; height: 50px; padding: 0 16px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 10px; color: var(--text);
font-family: var(--sans); font-size: 15px; font-weight: 400;
letter-spacing: -0.005em; outline: none;
transition: border-color 220ms var(--ease), background 220ms var(--ease), box-shadow 220ms var(--ease);
-webkit-appearance: none;
}
.modal-input:focus {
border-color: rgba(220,38,38,0.55);
background: rgba(255,255,255,0.05);
box-shadow: 0 0 0 3px rgba(220,38,38,0.10);
}
.modal-input.modal-input-err {
border-color: rgba(220,38,38,0.7);
background: rgba(220,38,38,0.04);
}
.modal-input::placeholder { color: var(--text-4); }
.modal-input:-webkit-autofill,
.modal-input:-webkit-autofill:hover,
.modal-input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 30px #141414 inset;
-webkit-text-fill-color: var(--text);
caret-color: var(--text);
}
.modal-input-error {
font-size: 12px; color: var(--accent);
letter-spacing: -0.005em; display: flex; align-items: center; gap: 5px;
}
.modal-input-error::before { content: "✕"; font-size: 10px; }
/* ==========================================================================
Apply page (#/apply) — full-page mobile-first version of the application.
Plain document scroll. No fixed positioning, no body lock, no sticky tricks.
This is what the mobile pop-up should have been from day one.
========================================================================== */
.apply-page {
min-height: 100vh;
background:
radial-gradient(900px 320px at 50% -120px, rgba(220,38,38,0.06), transparent 60%),
var(--bg);
position: relative;
z-index: 2;
}
.apply-container {
max-width: 720px;
margin: 0 auto;
padding: 24px 24px 56px;
display: flex;
flex-direction: column;
gap: 18px;
}
.apply-head {
display: flex;
align-items: center;
gap: 12px;
}
.apply-leave {
width: 32px; height: 32px;
flex: 0 0 auto;
padding: 0;
background: transparent;
border: 0;
color: var(--text-3);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: color 220ms var(--ease), transform 320ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.apply-leave:hover {
color: var(--text);
transform: rotate(90deg);
}
}
.apply-head-label {
flex: 1;
display: flex; align-items: center; gap: 10px;
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-2);
min-width: 0;
}
.apply-head-label span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.apply-d { height: 20px; width: auto; opacity: 0.95; flex: 0 0 auto; }
.apply-step-count {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.06em;
color: var(--text-3);
display: inline-flex; align-items: center; gap: 4px;
font-feature-settings: "tnum";
flex: 0 0 auto;
}
.apply-step-count b { color: var(--text); font-weight: 500; }
.apply-step-count .sep { color: var(--text-4); }
.apply-step-count .of { color: var(--text-3); }
.apply-rail {
display: flex;
gap: 4px;
padding: 6px 0 2px;
}
.apply-body {
padding: 12px 0 8px;
min-height: 240px;
/* Local clip — defense in depth. The .step-pane enter animation slides
in from translateX(20px) and momentarily extends past the right edge.
iOS Safari doesn't always respect html-level overflow:clip for
transformed descendants, so clip locally too. */
overflow-x: hidden;
overflow-x: clip;
}
.apply-foot {
display: flex; align-items: center; gap: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.05);
flex-wrap: wrap;
}
.apply-back {
height: 44px;
padding: 0 18px;
flex: 0 0 auto;
}
/* Push Submit to the right edge so the footer reads "[← Back] ... [Submit →]"
instead of crowding both buttons on the left. Empty space between them
replaces the old status label without leaving a visual gap. */
.apply-submit { margin-left: auto; }
@media (max-width: 640px) {
.apply-container {
padding: 16px 16px 40px;
gap: 14px;
/* Fill the viewport so the question can center vertically and Back
sticks to the bottom. dvh tracks iOS Safari's collapsing URL bar
— vh would leave a gap when the bar hides. */
min-height: 100dvh;
}
.apply-head-label span {
/* On phones the label is mostly noise next to the logo; let it truncate. */
font-size: 10.5px;
letter-spacing: 0.12em;
}
/* Centre the question block in the leftover space between rail and footer. */
.apply-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
}
.apply-foot { gap: 10px; }
.apply-back { height: 44px; min-width: 96px; }
/* Override the global mobile .btn { width: 100% } so Submit shares the
row with Back instead of wrapping below it. */
.apply-submit { width: auto; flex: 1 1 0; min-width: 0; margin-left: 0; }
}
/* ============================================================
INTAKE — Client Intelligence Onboarding (#/intake)
Extends the apply-flow design language with section-segmented
progress, glassmorphism panel, and a richer input vocabulary.
============================================================ */
.intake-page {
min-height: 100dvh;
padding: clamp(16px, 3vw, 32px) clamp(12px, 3vw, 32px) clamp(32px, 5vw, 56px);
display: flex;
justify-content: center;
}
.intake-container {
width: 100%;
max-width: 980px;
display: flex;
flex-direction: column;
gap: clamp(14px, 2vw, 20px);
}
/* --- Section progress rail (7 segments, fills by completion) --- */
.intake-progress {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
padding: 8px 4px 14px;
}
.intake-seg { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.intake-seg-bar {
height: 4px;
border-radius: 3px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.04);
overflow: hidden;
position: relative;
}
.intake-seg-fill {
height: 100%;
background: var(--accent);
border-radius: 3px;
transition: width 480ms var(--ease);
}
.intake-seg.active .intake-seg-bar {
box-shadow: 0 0 14px rgba(220,38,38,0.35);
}
.intake-seg.active .intake-seg-bar::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
animation: railPulse 1.8s var(--ease) infinite;
pointer-events: none;
}
.intake-seg-label {
display: flex;
align-items: baseline;
gap: 6px;
min-width: 0;
}
.intake-seg-num {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.12em;
color: var(--text-3);
}
.intake-seg.done .intake-seg-num,
.intake-seg.active .intake-seg-num { color: var(--accent); }
.intake-seg-name {
font-size: 12px;
font-weight: 500;
color: var(--text-3);
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.intake-seg.active .intake-seg-name { color: var(--text); }
.intake-seg.done .intake-seg-name { color: var(--text-1); }
/* --- Header --- */
.intake-head {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 16px;
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
backdrop-filter: saturate(140%) blur(14px);
-webkit-backdrop-filter: saturate(140%) blur(14px);
}
.intake-head-label {
display: flex; align-items: center; gap: 10px;
flex: 1; min-width: 0;
}
.intake-d { height: 18px; width: auto; opacity: 0.95; flex: 0 0 auto; }
.intake-head-label span {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.intake-step-count {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
color: var(--text-3);
}
.intake-step-count b { color: var(--text); font-weight: 500; }
.intake-step-count .sep { color: var(--text-4); padding: 0 2px; }
.intake-save {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-3);
padding: 4px 8px;
border: 1px solid rgba(255,255,255,0.06);
border-radius: 999px;
}
.intake-save-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #10B981;
box-shadow: 0 0 8px rgba(16,185,129,0.55);
animation: saveBlink 2.4s var(--ease) infinite;
}
@keyframes saveBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* --- Body: glassmorphism panel --- */
.intake-body { position: relative; }
.intake-panel {
position: relative;
padding: clamp(24px, 3.2vw, 40px) clamp(20px, 3vw, 36px);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 14px;
background:
radial-gradient(900px 320px at 50% -10%, rgba(220,38,38,0.06), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
box-shadow:
0 1px 0 rgba(255,255,255,0.04) inset,
0 24px 60px -30px rgba(0,0,0,0.75);
overflow: hidden;
isolation: isolate;
}
.intake-panel.in-fwd { animation: paneIn 420ms var(--ease-out) both; }
.intake-panel.in-back { animation: paneInBack 420ms var(--ease-out) both; }
/* Section eyebrow (first Q of section only) */
.intake-section-eyebrow { margin-bottom: 28px; }
.intake-section-mono {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--accent);
margin-bottom: 8px;
}
.intake-section-title {
margin: 0 0 10px;
font-size: clamp(28px, 4vw, 40px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.05;
color: var(--text);
}
.intake-section-intro {
margin: 0;
max-width: 64ch;
font-size: 15px;
line-height: 1.55;
color: var(--text-2);
}
.intake-rule {
height: 1px;
margin: 24px 0 0;
background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 22%, rgba(220,38,38,0.18) 40%, transparent 70%);
}
/* Question block */
.intake-q { display: flex; flex-direction: column; gap: 14px; }
/* Section breadcrumb tag (shown on every question for orientation) */
.intake-q-section-tag {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
padding: 5px 10px 5px 8px;
border: 1px solid rgba(220,38,38,0.22);
background: linear-gradient(180deg, rgba(220,38,38,0.08), rgba(220,38,38,0.02));
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-1);
}
.intake-q-section-num { color: var(--accent); font-weight: 600; }
.intake-q-section-name { color: var(--text); }
.intake-q-meta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-3);
}
.intake-q-dot {
width: 5px; height: 5px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px rgba(220,38,38,0.55);
}
.intake-q-of { color: var(--text-4); }
.intake-q-req,
.intake-q-opt {
margin-left: auto;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid;
font-size: 9px;
}
.intake-q-req { color: var(--accent); border-color: rgba(220,38,38,0.45); }
.intake-q-opt { color: var(--text-3); border-color: rgba(255,255,255,0.08); }
.intake-q-label {
margin: 4px 0 0;
font-size: clamp(20px, 2.3vw, 26px);
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.3;
color: var(--text);
}
/* Hint card (good-answer snippet) */
.intake-q-hint {
margin-top: 4px;
padding: 14px 16px;
border: 1px solid rgba(220,38,38,0.18);
border-left: 2px solid var(--accent);
border-radius: 10px;
background:
linear-gradient(180deg, rgba(220,38,38,0.045), rgba(220,38,38,0.015));
}
.intake-q-hint-lead {
margin: 0 0 4px;
font-size: 13px;
font-weight: 600;
color: var(--text-1);
letter-spacing: -0.005em;
}
.intake-q-hint-body {
margin: 0;
font-size: 13px;
line-height: 1.55;
color: var(--text-2);
}
.intake-q-hint-stat {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 8px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
}
.intake-q-hint-dot {
width: 5px; height: 5px; border-radius: 50%;
background: var(--accent);
}
/* Input container */
.intake-q-input { margin-top: 6px; }
/* --- Inputs --- */
.intake-input,
.intake-textarea {
width: 100%;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 14px 16px;
color: var(--text);
font-family: var(--sans);
font-size: 15px;
line-height: 1.5;
letter-spacing: -0.005em;
outline: none;
transition: border-color 240ms var(--ease), background 240ms var(--ease), box-shadow 240ms var(--ease);
resize: vertical;
}
.intake-input::placeholder,
.intake-textarea::placeholder {
color: var(--text-4);
}
.intake-input:focus,
.intake-textarea:focus {
border-color: rgba(220,38,38,0.55);
background: rgba(0,0,0,0.5);
box-shadow: 0 0 0 3px rgba(220,38,38,0.12);
}
.intake-textarea { min-height: 140px; font-size: 15px; }
/* Chips */
.intake-chips { display: flex; flex-direction: column; gap: 10px; }
.intake-chip-list {
display: flex; flex-wrap: wrap; gap: 8px;
min-height: 0;
}
.intake-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 4px 6px 12px;
border: 1px solid rgba(220,38,38,0.35);
background: linear-gradient(180deg, rgba(220,38,38,0.14), rgba(220,38,38,0.04));
color: var(--text);
border-radius: 999px;
font-size: 13px;
letter-spacing: -0.005em;
animation: fadeUp 280ms var(--ease-out) both;
}
.intake-chip-x {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px;
border-radius: 50%;
border: none;
background: rgba(0,0,0,0.25);
color: var(--text-1);
cursor: pointer;
font-size: 14px;
line-height: 1;
transition: background 200ms var(--ease), color 200ms var(--ease);
}
.intake-chip-x:hover { background: var(--accent); color: #fff; }
.intake-chip-input-row {
display: grid; grid-template-columns: 1fr auto; gap: 8px;
}
.intake-chip-add {
white-space: nowrap;
height: auto;
padding: 0 14px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.03);
color: var(--text-1);
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: all 200ms var(--ease);
}
.intake-chip-add:hover {
border-color: rgba(220,38,38,0.45);
color: var(--text);
background: rgba(220,38,38,0.08);
}
.intake-hint-line {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-3);
}
/* Attach strip (paperclip under textarea — discreet, optional) */
.intake-attach {
margin-top: 10px;
border: 1px dashed rgba(255,255,255,0.08);
border-radius: 8px;
background: rgba(255,255,255,0.012);
transition: all 220ms var(--ease);
overflow: hidden;
}
.intake-attach.drag-over {
border-color: var(--accent);
border-style: solid;
background: rgba(220,38,38,0.06);
}
.intake-attach.has-files { border-style: solid; border-color: rgba(255,255,255,0.07); }
.intake-attach-row {
width: 100%;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: none;
border: none;
color: var(--text-2);
cursor: pointer;
text-align: left;
font-family: var(--sans);
transition: color 200ms var(--ease), background 200ms var(--ease);
}
.intake-attach-row:hover { color: var(--text); background: rgba(255,255,255,0.02); }
.intake-attach-clip { color: var(--text-3); }
.intake-attach-row:hover .intake-attach-clip { color: var(--accent); }
.intake-attach-label {
font-size: 13px;
letter-spacing: -0.005em;
color: inherit;
}
.intake-attach-cta {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-3);
padding: 4px 8px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 6px;
transition: all 200ms var(--ease);
}
.intake-attach-row:hover .intake-attach-cta {
color: var(--accent);
border-color: rgba(220,38,38,0.4);
}
.intake-attach-list {
display: flex; flex-direction: column;
border-top: 1px solid rgba(255,255,255,0.05);
padding: 6px 8px;
gap: 4px;
}
.intake-attach-item {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 6px;
font-size: 12px;
color: var(--text-1);
background: rgba(0,0,0,0.2);
}
.intake-attach-item > svg { color: var(--text-3); flex: 0 0 auto; }
.intake-attach-item-name {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
min-width: 0;
}
.intake-attach-item-size {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.1em;
color: var(--text-3);
}
.intake-attach-item-x {
width: 18px; height: 18px;
border: none;
background: rgba(255,255,255,0.04);
color: var(--text-2);
border-radius: 5px;
cursor: pointer;
font-size: 12px;
line-height: 1;
transition: all 200ms var(--ease);
}
.intake-attach-item-x:hover { background: var(--accent); color: #fff; }
/* Upload */
.intake-upload {
position: relative;
padding: 24px;
border: 1px dashed rgba(255,255,255,0.14);
border-radius: 12px;
background:
radial-gradient(400px 120px at 50% 0%, rgba(220,38,38,0.05), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.15));
text-align: center;
transition: all 220ms var(--ease);
}
.intake-upload.drag-over {
border-color: var(--accent);
background:
radial-gradient(400px 160px at 50% 0%, rgba(220,38,38,0.16), transparent 70%),
linear-gradient(180deg, rgba(220,38,38,0.08), rgba(0,0,0,0.1));
box-shadow: 0 0 0 3px rgba(220,38,38,0.18);
}
.intake-upload-icon { color: var(--text-1); margin-bottom: 8px; }
.intake-upload-prompt {
font-size: 15px;
color: var(--text-1);
letter-spacing: -0.005em;
}
.intake-upload-prompt b { color: var(--text); font-weight: 600; }
.intake-upload-browse {
background: none;
border: none;
color: var(--accent);
font: inherit;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
padding: 0;
}
.intake-upload-sub {
margin-top: 6px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-3);
}
.intake-upload-list {
display: flex; flex-direction: column; gap: 6px;
margin-top: 16px;
text-align: left;
}
.intake-upload-item {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 10px;
align-items: center;
padding: 8px 12px;
border: 1px solid rgba(255,255,255,0.06);
background: rgba(0,0,0,0.25);
border-radius: 8px;
font-size: 13px;
color: var(--text-1);
}
.intake-upload-item-name {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.intake-upload-item-size {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.1em;
color: var(--text-3);
}
.intake-upload-item-x {
width: 22px; height: 22px;
border: none; background: rgba(255,255,255,0.04);
color: var(--text-2);
border-radius: 6px;
cursor: pointer;
transition: all 200ms var(--ease);
}
.intake-upload-item-x:hover { background: var(--accent); color: #fff; }
/* Select (pill row) */
.intake-select { display: flex; flex-wrap: wrap; gap: 8px; }
.intake-select-opt {
padding: 10px 16px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.02);
color: var(--text-1);
border-radius: 10px;
font-size: 14px;
cursor: pointer;
transition: all 220ms var(--ease);
}
.intake-select-opt:hover { border-color: rgba(255,255,255,0.18); color: var(--text); }
.intake-select-opt.selected {
border-color: rgba(220,38,38,0.7);
background: linear-gradient(180deg, rgba(220,38,38,0.16), rgba(220,38,38,0.04));
color: #fff;
box-shadow: 0 0 0 1px rgba(220,38,38,0.45);
}
/* --- Footer --- */
.intake-foot {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 14px;
padding: 12px 16px;
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
backdrop-filter: saturate(140%) blur(14px);
-webkit-backdrop-filter: saturate(140%) blur(14px);
}
.intake-back {
display: inline-flex; align-items: center; gap: 8px;
height: 44px; min-width: 96px;
padding: 0 14px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.02);
color: var(--text-1);
border-radius: 10px;
font-size: 13px;
cursor: pointer;
transition: all 200ms var(--ease);
}
.intake-back:hover {
border-color: rgba(255,255,255,0.18);
color: var(--text);
}
.intake-foot-meter {
display: flex; flex-direction: column; gap: 6px;
min-width: 0;
}
.intake-foot-meter-mono {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-1);
}
.intake-foot-meter-total { color: var(--text-3); }
.intake-foot-meter-bar {
height: 3px;
border-radius: 2px;
background: rgba(255,255,255,0.05);
overflow: hidden;
}
.intake-foot-meter-fill {
height: 100%;
background: var(--accent);
border-radius: 2px;
transition: width 480ms var(--ease);
}
.intake-next {
position: relative;
display: inline-flex; align-items: center; gap: 10px;
height: 44px;
padding: 0 18px;
border-radius: 10px;
border: 1px solid rgba(220,38,38,0.75);
background: linear-gradient(180deg, var(--accent), #B91C1C);
color: #fff;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
cursor: pointer;
overflow: hidden;
isolation: isolate;
box-shadow:
0 0 0 1px rgba(220,38,38,0.4),
0 8px 28px -12px rgba(220,38,38,0.55);
transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), opacity 220ms var(--ease);
}
.intake-next:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow:
0 0 0 1px rgba(220,38,38,0.6),
0 12px 36px -10px rgba(220,38,38,0.7);
}
.intake-next:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.intake-next .arrow { transition: transform 220ms var(--ease); }
.intake-next:hover:not(:disabled) .arrow { transform: translateX(3px); }
/* --- Compiling interstitial (between Submit and Done) --- */
.intake-compiling {
padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 48px);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 14px;
background:
radial-gradient(900px 320px at 50% -10%, rgba(220,38,38,0.08), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
text-align: left;
animation: fadeUp 480ms var(--ease-out) both;
}
.intake-compiling.locked {
border-color: rgba(220,38,38,0.45);
box-shadow:
0 0 0 1px rgba(220,38,38,0.35),
0 24px 70px -25px rgba(220,38,38,0.4);
transition: all 600ms var(--ease);
}
.intake-compiling-mono {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 12px;
transition: color 400ms var(--ease);
}
.intake-compiling-mono-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 10px rgba(220,38,38,0.6);
animation: monoDotPulse 1s var(--ease) infinite;
}
.intake-compiling.locked .intake-compiling-mono-dot { animation: none; }
@keyframes monoDotPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.85); }
}
.intake-compiling-title {
margin: 0 0 28px;
font-size: clamp(28px, 4vw, 44px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.05;
color: var(--text);
}
.intake-compiling-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.intake-compiling-item {
display: grid;
grid-template-columns: 22px 36px 1fr auto;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid rgba(255,255,255,0.05);
border-radius: 10px;
background: rgba(0,0,0,0.18);
opacity: 0.45;
transition:
opacity 360ms var(--ease),
border-color 360ms var(--ease),
background 360ms var(--ease),
transform 360ms var(--ease);
}
.intake-compiling-item.active { opacity: 1; transform: translateX(2px); }
.intake-compiling-item.done {
opacity: 1;
border-color: rgba(220,38,38,0.32);
background: linear-gradient(180deg, rgba(220,38,38,0.08), rgba(220,38,38,0.02));
}
.intake-compiling-check {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
border-radius: 50%;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: var(--text-3);
transition: all 320ms var(--ease);
}
.intake-compiling-item.done .intake-compiling-check {
background: var(--accent);
border-color: var(--accent);
color: #fff;
box-shadow: 0 0 10px rgba(220,38,38,0.55);
animation: checkPop 360ms var(--ease-out) both;
}
@keyframes checkPop {
0% { transform: scale(0.6); }
60% { transform: scale(1.15); }
100% { transform: scale(1); }
}
.intake-compiling-pip {
width: 5px; height: 5px; border-radius: 50%;
background: var(--text-4);
}
.intake-compiling-item.active .intake-compiling-pip {
background: var(--accent);
box-shadow: 0 0 8px rgba(220,38,38,0.6);
animation: monoDotPulse 0.9s var(--ease) infinite;
}
.intake-compiling-num {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.12em;
color: var(--text-3);
}
.intake-compiling-item.done .intake-compiling-num,
.intake-compiling-item.active .intake-compiling-num { color: var(--accent); }
.intake-compiling-name {
font-size: 15px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--text);
}
.intake-compiling-status {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-3);
padding: 3px 7px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.06);
}
.intake-compiling-item.done .intake-compiling-status {
color: var(--accent);
border-color: rgba(220,38,38,0.35);
background: rgba(220,38,38,0.06);
}
.intake-compiling-item.active:not(.done) .intake-compiling-status {
color: var(--text);
border-color: rgba(255,255,255,0.12);
}
.intake-compiling-lockbar {
margin-top: 24px;
height: 3px;
border-radius: 2px;
background: rgba(255,255,255,0.05);
overflow: hidden;
}
.intake-compiling-lockbar-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--accent), #ff7a7a, var(--accent));
background-size: 200% 100%;
border-radius: 2px;
transition: width 900ms var(--ease);
}
.intake-compiling-lockbar.active .intake-compiling-lockbar-fill {
width: 100%;
animation: lockShine 1.2s var(--ease) both;
}
@keyframes lockShine {
from { background-position: 100% 0; box-shadow: 0 0 0 rgba(220,38,38,0); }
to { background-position: 0% 0; box-shadow: 0 0 18px rgba(220,38,38,0.55); }
}
/* --- Token-gate screens (checking / invalid / already-submitted) --- */
.intake-gate {
padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 56px);
text-align: center;
align-items: center;
border: 1px solid rgba(255,255,255,0.07);
border-radius: 14px;
background:
radial-gradient(900px 320px at 50% -10%, rgba(220,38,38,0.07), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
animation: fadeUp 520ms var(--ease-out) both;
}
.intake-gate-error { border-color: rgba(220,38,38,0.35); }
.intake-gate-mono {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 16px;
}
.intake-gate-title {
margin: 0 0 14px;
font-size: clamp(28px, 4vw, 44px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.05;
color: var(--text);
}
.intake-gate-sub {
margin: 0 auto;
max-width: 56ch;
font-size: 16px;
line-height: 1.55;
color: var(--text-2);
}
.intake-gate-meta {
margin-top: 20px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-3);
}
.intake-gate-meta code {
font-family: var(--mono);
color: var(--text-1);
padding: 2px 6px;
background: rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 4px;
}
.intake-head-client {
font-style: normal;
color: var(--text-1);
font-weight: 500;
}
/* --- Done screen --- */
.intake-done {
padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 48px);
text-align: center;
align-items: center;
border: 1px solid rgba(255,255,255,0.07);
border-radius: 14px;
background:
radial-gradient(900px 320px at 50% -10%, rgba(220,38,38,0.1), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
animation: doneIn 720ms var(--ease-out) both;
}
@keyframes doneIn {
from { opacity: 0; transform: translateY(20px) scale(0.985); filter: blur(6px); }
to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.intake-done-mono {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--accent);
margin-bottom: 16px;
}
.intake-done-title {
margin: 0 0 16px;
font-size: clamp(32px, 5vw, 52px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.05;
}
.intake-done-sub {
margin: 0 auto;
max-width: 60ch;
font-size: 16px;
line-height: 1.55;
color: var(--text-2);
}
.intake-done-meta {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
text-align: left;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
.intake-done-meta > div {
display: grid;
grid-template-columns: 110px 1fr;
gap: 16px;
align-items: baseline;
font-size: 14px;
color: var(--text-1);
padding: 10px 14px;
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
background: rgba(0,0,0,0.2);
}
.intake-done-meta .mono {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
}
/* --- Mobile --- */
@media (max-width: 720px) {
.intake-progress { grid-template-columns: repeat(7, 1fr); gap: 4px; }
.intake-seg-label { display: none; }
.intake-seg.active .intake-seg-label {
display: flex;
position: absolute;
transform: translateY(8px);
}
.intake-progress { position: relative; }
.intake-head { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
.intake-head-label span { font-size: 10px; }
.intake-save { font-size: 9px; }
.intake-panel { padding: 22px 18px; border-radius: 12px; }
.intake-section-title { font-size: 26px; }
.intake-q-label { font-size: 19px; }
.intake-foot {
grid-template-columns: auto 1fr;
grid-template-areas:
"meter meter"
"back next";
gap: 10px;
padding: 12px;
}
.intake-foot-meter { grid-area: meter; }
.intake-back { grid-area: back; }
.intake-next { grid-area: next; }
.intake-back { min-width: 0; }
.intake-input, .intake-textarea { font-size: 16px; } /* prevent iOS zoom */
}