/* ============================================
VERDKT — IMAGES (all installed; swap the file to change the visual)
HERO BG: images/hero-bg.jpg — full-bleed hero background
(hand-held phone, dark backdrop). Set on .hero.
HOW IT WORKS: images/how-it-works.jpg — in-app inspection photo in
the sticky card (.how-card img, object-fit: cover).
FOR HOSTS: images/inspection-report.jpg — report graphic on its
own light bg (.hosts-image, object-fit: contain).
OG / SOCIAL: images/og.jpg — 1200x630 link-preview card (see ).
FIX: former FOR HOSTS (for-hosts.jpg) and CLOSING CTA (closing-cta.jpg)
placeholder slots removed — For Hosts now uses a real image and the
Closing CTA section was deleted.
============================================ */
/* ============================================================
Verdkt — marketing site (cinematic overhaul)
OVERHAUL SUMMARY vs previous version:
- Hero: full-viewport photo background, left-anchored text,
white primary CTA, CSS marquee ticker at the base
- How It Works: Roman-numeral step list + sticky card holding a
real in-app inspection photo (images/how-it-works.jpg)
- Engine: edge-to-edge table card (#111, radius 24, row hover)
- For Hosts: photo card left / text right, white background,
blue arrow checklist
- Pricing: Free -> Monthly -> Annual order, Revolut card specs
- FAQ: editorial — PJS questions, +/x indicator, max-height
expand with answer fade
- One global motion system: 500ms snappy ease-out, 80ms child
stagger capped at 4 (delays set inline by script.js)
Mobile-first. Breakpoints: 768px, 1200px.
============================================================ */
/* FIX(audit B5): self-hosted fonts — replaces the Google Fonts formerly in the
HTML , so the page makes NO third-party request to Google (GDPR: nothing hits
fonts.googleapis.com / fonts.gstatic.com before consent). latin + latin-ext woff2
cover EN/FR/IT/PT/ES/DE; unicode-range preserved so the browser still picks the
correct subset per glyph (accented characters render from latin-ext). */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/inter-400-latinext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/inter-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/inter-500-latinext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/inter-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/inter-600-latinext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/inter-600-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/pjs-700-latinext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/pjs-700-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('fonts/pjs-800-latinext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('fonts/pjs-800-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--black: #0A0A0A;
--off-white: #F7F7F5;
--white: #FFFFFF;
--blue: #0066FF;
/* Light-section palette */
--ink: #0A0A0A;
--ink-body: #333333;
--ink-soft: #555555;
--ink-eyebrow: #707070; /* FIX: readability — darkened from #888888 for older-audience contrast */
--paper-line: #EBEBEB;
/* Dark-section text */
--t-1: rgba(255, 255, 255, 0.92);
--t-2: rgba(255, 255, 255, 0.73); /* FIX: readability — dark-section body raised from 0.55 */
--t-3: rgba(255, 255, 255, 0.6); /* FIX: readability — dark-section subtle/eyebrow raised from 0.45 */
/* FIX: Helvetica system stack replaced — two-font system for consistent
cross-device rendering. Plus Jakarta Sans is display only (headlines,
pricing numbers, card titles, logo); Inter handles everything else. */
--font-display: 'Plus Jakarta Sans', sans-serif;
--font-body: 'Inter', sans-serif;
--radius-card: 20px;
--radius-card-lg: 24px;
--radius-pill: 100px;
--radius-input: 12px;
/* OVERHAUL: the one easing for everything — "snappy ease out" */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--maxw: 1100px;
}
/* ---------- Base ---------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 80px;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.75;
background: var(--black);
color: var(--t-1);
-webkit-font-smoothing: antialiased;
}
body.menu-open {
overflow: hidden;
}
img,
svg {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
button {
font: inherit;
color: inherit;
background: none;
border: none;
cursor: pointer;
}
::selection {
background: rgba(0, 102, 255, 0.35);
}
:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 3px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* FIX(audit B12): honeypot field — visually hidden + removed from a11y/tab order. Bots
that auto-fill it get silently dropped by the form handlers (anti-spam). */
.hp-field {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
/* ---------- Layout primitives ---------- */
.container {
max-width: var(--maxw);
margin-inline: auto;
padding-inline: 20px;
}
.container-narrow {
max-width: 780px;
}
section {
padding-block: 96px;
}
.section-dark {
background: var(--black);
color: var(--t-1);
}
.section-light {
background: var(--off-white);
color: var(--ink);
}
/* ---------- Type ---------- */
.eyebrow {
font-family: var(--font-body);
font-size: 13px; /* FIX: readability — eyebrows/labels raised from 11px (too small) */
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--t-3);
margin-bottom: 20px;
}
.section-light .eyebrow {
color: var(--ink-eyebrow);
}
/* BRAND: Space Grotesk caps at 700; tracking eased to suit its wider fit */
.section-headline {
font-family: var(--font-display);
font-weight: 700;
font-size: 36px;
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: 20px;
}
.subheadline {
font-size: 18px;
font-weight: 400;
line-height: 1.65;
opacity: 0.55;
max-width: 560px;
}
.accent {
color: var(--blue);
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
line-height: 1;
padding: 14px 26px;
border-radius: var(--radius-pill);
border: 1px solid transparent;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
white-space: nowrap;
}
/* Blue stays on page CTAs (waitlist form submit) */
.btn-primary {
background: var(--blue);
color: var(--white);
}
.btn-primary:hover {
background: #1A75FF;
}
/* OVERHAUL: white pill — hero primary, nav CTA, mobile-menu CTA */
.btn-light {
background: var(--white);
color: var(--ink);
font-weight: 600;
}
.btn-light:hover {
background: #E8E8E8;
}
/* Hero secondary: transparent with white border */
.btn-ghost {
border-color: rgba(255, 255, 255, 0.45);
color: var(--white);
background: transparent;
}
.btn-ghost:hover {
border-color: var(--white);
background: rgba(255, 255, 255, 0.08);
}
.btn-lg {
padding: 17px 32px;
font-size: 15px;
}
/* Nav CTA scaled proportionally with the larger logo */
.btn-pill {
padding: 11px 22px;
font-size: 14px;
font-weight: 600;
}
/* FIX: removed Closing CTA — its .btn-closing rule deleted (it styled only that
section's button; the shared .btn-light is kept, still used by nav/menu/hero). */
/* ---------- Nav ---------- */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: transparent;
border-bottom: 1px solid transparent;
transition: background 0.3s ease, border-color 0.3s ease;
}
/* OVERHAUL: scrolled state — denser background, deeper blur, hairline */
.nav.scrolled {
background: rgba(10, 10, 10, 0.95);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-bottom-color: rgba(255, 255, 255, 0.06);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
height: 64px;
}
/* BRAND: dotted V mark (inline SVG, white via currentColor) + wordmark */
.logo {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
letter-spacing: 0;
color: var(--white);
}
.logo-mark {
height: 17px;
width: auto;
flex: none;
}
/* Nav-only: logo mark + wordmark slightly larger (footer logo unchanged) */
.nav .logo {
font-size: 18px;
gap: 10px;
}
.nav .logo-mark {
height: 20px;
}
.nav-links {
display: none;
}
.nav-cta {
display: none;
}
.hamburger {
display: flex;
flex-direction: column;
justify-content: center;
gap: 7px;
width: 44px;
height: 44px;
align-items: center;
}
.hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--white);
border-radius: 1px;
transition: transform 0.3s var(--ease-out);
}
.hamburger.open span:nth-child(1) {
transform: translateY(4.5px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
transform: translateY(-4.5px) rotate(-45deg);
}
/* FIX(i18n): language dropdown — minimal pill trigger ("EN" + caret) with a dark
popup of full language names. Restrained to match the nav; visible on mobile too. */
.lang-select-wrap {
display: flex;
align-items: center;
}
.lang-select {
position: relative;
}
/* FIX(nav): de-emphasized top-right utility — borderless globe + language code (the
conventional language-switcher affordance), smaller + quieter than the 14px nav links. */
.lang-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 6px;
min-height: 44px; /* FIX(audit B9): 44px tap target — visual globe+code size unchanged */
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.6);
background: transparent;
border: none;
cursor: pointer;
transition: color 0.2s ease;
}
/* FIX(nav): small globe glyph (inline SVG via CSS mask) before the code; inherits the
button color via currentColor so it tracks the quiet/hover state. */
.lang-btn::before {
content: "";
flex: none;
width: 14px;
height: 14px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lang-btn:hover {
color: var(--white);
}
.lang-caret {
width: 0;
height: 0;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-top: 4px solid currentColor;
opacity: 0.65;
}
.lang-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 156px;
padding: 6px;
background: #141414;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
display: flex;
flex-direction: column;
gap: 2px;
z-index: 120;
}
/* FIX(i18n): the [hidden] attribute must win over the display:flex above, or the
menu would always show. */
.lang-menu[hidden] {
display: none;
}
.lang-option {
/* FIX(nav): flex row so the selected-language check sits at the right edge and stays
vertically centered with the label (was display:block + float). */
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
text-align: left;
padding: 9px 12px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.lang-option:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--white);
}
.lang-option[aria-checked="true"] {
color: var(--white);
}
/* FIX(nav): crisp, even-stroke check (inline SVG via CSS mask) in quiet near-white,
replacing the curved blue ✓ glyph. Color is the mask's background-color, size is fixed. */
.lang-option[aria-checked="true"]::after {
content: "";
flex: none;
width: 13px;
height: 13px;
background-color: rgba(255, 255, 255, 0.9);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lang-option:focus-visible {
outline: 2px solid var(--blue);
outline-offset: -2px;
}
/* Mobile full-screen menu */
.mobile-menu {
position: fixed;
inset: 0;
z-index: 99;
background: rgba(10, 10, 10, 0.97);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-menu.open {
opacity: 1;
visibility: visible;
}
.mobile-menu-links {
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
text-align: center;
}
.mobile-menu-links > a {
font-family: var(--font-display);
font-weight: 700;
font-size: 24px;
letter-spacing: -0.02em;
color: var(--t-1);
}
.mobile-menu-cta {
margin-top: 12px;
}
/* ---------- Hero (OVERHAUL: full-bleed photo, left-anchored text, ticker) ---------- */
/* HERO BACKGROUND: images/hero-bg.jpg — hand-held phone on a dark backdrop.
Left-anchored so the phone holds the right of the frame on desktop and
the clean dark left region backs the text (and fills mobile entirely). */
.hero {
position: relative;
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
color: var(--t-1);
padding: 0;
background-color: var(--black);
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0.75) 0%,
rgba(0, 0, 0, 0.4) 50%,
rgba(0, 0, 0, 0.1) 100%
),
url("images/hero-bg.jpg");
background-size: cover;
background-position: left center;
}
/* Text block sits left, ~45% from the top (centered in the free space
above the ticker, nudged up by the bottom padding bias) */
.hero-content {
flex: 1;
display: flex;
align-items: center;
width: 100%;
padding-top: 96px;
padding-bottom: 13vh;
}
/* The container is a flex item here — force full width so the text
block anchors to the container's left edge instead of centering */
.hero-content > .container {
width: 100%;
}
.hero-text {
max-width: 580px;
text-align: left;
}
.hero .eyebrow {
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.6); /* FIX: readability — raised from 0.5 */
}
.hero-headline {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(42px, 5.5vw, 72px);
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--white);
}
.hero-sub {
max-width: 480px;
margin-top: 24px;
color: var(--white);
opacity: 0.65;
}
.hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 40px;
}
/* Trust micro-stats removed from the hero — markup and styles deleted */
/* BRAND PASS: the ticker strip and the CSS evidence card were removed —
the real hero photograph now carries the right side of the frame. */
/* ---------- Insight Statement ---------- */
/* RESTRUCTURE: Problem Cards section deleted — all .problem-*, .pc-*,
.pull-quote rules and the gradient-drift keyframes removed (used nowhere
else). This new section sits between Hero and How It Works. */
.insight {
background: var(--off-white);
padding-block: 80px;
text-align: center;
}
/* INSIGHT FIX: container tightened to 720px, 24px side padding on mobile
(the global .container rule restores 32px from 768px up) */
.insight-container {
max-width: 720px;
padding-inline: 24px;
}
/* INSIGHT FIX: PJS 800, 28px mobile -> 42px desktop, line-height 1.1,
headline constrained to 680px and centered */
.insight-statement {
font-family: var(--font-display);
font-weight: 800;
font-size: 28px;
letter-spacing: -0.03em;
line-height: 1.1;
color: var(--ink);
max-width: 680px;
margin-inline: auto;
text-align: center;
}
/* INSIGHT FIX: each half of the headline is unbreakable — the only wrap
point is the after "claims" */
.insight-nowrap {
white-space: nowrap;
}
/* FIX(audit B7): below 360px the English nowrap phrases are wider than the viewport and
caused horizontal scroll at 320px. Allow wrapping only at that narrow width; the
>=360px line-break design (the protected /nowrap control) is untouched. */
@media (max-width: 360px) {
.insight-nowrap {
white-space: normal;
}
}
/* INSIGHT FIX: supporting text — 15px mobile -> 17px desktop, #666666,
520px max, 24px from the headline (one thought, not two elements) */
.insight-support {
margin-top: 24px;
font-size: 16px; /* FIX: readability — raised from 15px (desktop 17->18 below) */
line-height: 1.75;
color: #666666;
max-width: 520px;
margin-inline: auto;
text-align: center;
}
/* Spec: insight lines rise 20px (the global reveal system uses 24px).
The later .js .reveal.in rule still wins for the settled state. */
.js .insight .reveal {
transform: translateY(20px);
}
/* ---------- How it works (OVERHAUL: Elyte list + sticky card, light section) ---------- */
/* FIX: section color rotation — How It Works flips light -> dark (#0A0A0A).
The element keeps its .section-light class in HTML (index.html may only
receive the font-link change), so these later rules override it. */
.how {
background: var(--black);
color: var(--t-1);
padding-block: 120px; /* FIX: prominence — section breathes wider than the 96px default */
}
.how .eyebrow {
/* FIX: eyebrow promoted to a clear section marker — 13px / 600 / 0.12em
(global eyebrow is 11px / 500 / 0.08em); still Inter, uppercase, grey.
Alpha nudged 0.4 -> 0.5 so the larger marker stays legible, not brighter. */
color: rgba(255, 255, 255, 0.6); /* FIX: readability — raised from 0.5 */
font-size: 13px;
font-weight: 600;
letter-spacing: 0.12em;
}
.how-cols {
display: grid;
gap: 64px;
}
.how .section-headline {
margin-bottom: 24px;
}
.steps {
margin-top: 56px; /* FIX: prominence — wider pause between headline and step I (was 32px) */
}
.step {
padding-block: 44px; /* FIX: prominence — breathing room between steps (was 32px) */
/* FIX: hanging numeral — fixed 32px numeral column (fits "III.") so the
title and body share one left edge, aligned across all three steps; the
numeral hangs alone in the margin column, baseline-aligned with the
title's first line. */
display: grid;
grid-template-columns: 32px 1fr;
column-gap: 12px;
align-items: baseline;
}
.step + .step {
border-top: 1px solid rgba(255, 255, 255, 0.07); /* FIX: divider on dark */
}
.step:last-child {
padding-bottom: 0;
}
/* FIX: oversized blue treatment removed (clamp sizing + accent color deleted) —
numeral now matches the step title exactly (PJS 700 / 22px / lh 1.3 /
-0.02em) in white, inline on the title's first baseline. */
.step-num {
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
line-height: 1.3;
letter-spacing: -0.02em;
color: var(--white);
}
/* EDIT 10: step titles scaled up to 22px */
.step h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
line-height: 1.3;
letter-spacing: -0.02em;
color: #FFFFFF; /* FIX: headline contrast on dark */
margin-top: 0; /* FIX: was 16px clearance under the stacked numeral; numeral is now inline beside the title */
}
.step p {
grid-column: 2; /* FIX: body aligned with the title's left edge under the hanging numeral (was full step width) */
font-size: 17px; /* FIX: readability — raised from 15px */
line-height: 1.7;
color: rgba(255, 255, 255, 0.73); /* FIX: readability — raised from 0.55 */
margin-top: 8px;
}
/* Sticky card — holds a real in-app inspection photo (.how-card img) */
.how-visual {
display: flex;
justify-content: center;
}
.how-card {
position: sticky;
top: 100px;
width: 100%;
max-width: 480px; /* EDIT 10: sticky card widened from 420px */
aspect-ratio: 4 / 5;
background: #111111; /* FIX: card was #0A0A0A — invisible on the now-dark section */
border: 1px solid rgba(255, 255, 255, 0.07); /* FIX: card edge on dark */
border-radius: var(--radius-card-lg);
/* FIX: blue glow box-shadow removed entirely; padding zeroed and overflow
hidden added so the inspection photo fills the rounded surface edge to
edge, clipped to the existing radius. No replacement effect. */
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
text-align: left;
}
/* FIX: inspection photo fills the card — cover, centered; the 4:5 source
matches the card's 4/5 aspect, so the crop is minimal and the subject and
in-image UI card stay in frame. */
.how-card img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* FIX: removed orphaned .ph-* rules (.ph-heading/-row/-name/-verified/-cta) —
they styled the old "My Properties" mock card that was replaced by a real
photo (images/how-it-works.jpg); no element references them now. */
/* ---------- Engine (OVERHAUL: edge-to-edge table card, row hover) ---------- */
.engine {
text-align: center;
}
.engine .subheadline {
margin-inline: auto;
}
.engine-stack {
margin-top: 64px;
margin-inline: auto;
max-width: 840px;
text-align: left;
background: #111111;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-card-lg);
overflow: hidden; /* rows run to the card edges */
}
.engine-layer {
display: grid;
gap: 4px;
padding: 20px 32px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: background 0.3s ease;
}
.engine-layer:last-child {
border-bottom: none;
}
.engine-layer:hover {
background: rgba(255, 255, 255, 0.03);
}
.engine-layer h3 {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--white);
}
.engine-layer p {
font-size: 16px; /* FIX: readability — raised from 14px */
line-height: 1.6;
color: rgba(255, 255, 255, 0.73); /* FIX: readability — raised from 0.5 */
}
.engine-footnote {
margin-top: 24px;
/* FIX: footer line nudged up slightly — 12px -> 13px and alpha 0.35 -> 0.45.
A touch clearer; still a quiet footer, not a heading. Font/weight/align/
position unchanged. */
font-size: 13px;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.6); /* FIX: readability — raised from 0.45 */
}
/* ---------- For hosts (OVERHAUL: photo card left, text right, white bg) ---------- */
.hosts {
background: var(--off-white); /* FIX: rotation — For Hosts is #F7F7F5, not #FFFFFF */
}
.hosts-cols {
display: grid;
gap: 56px;
}
/* FIX: now holds a LANDSCAPE dark phone-on-slate report shot (was a portrait
light graphic). align-self:stretch lets the wrapper fill the taller text
column's height; align-items:center + justify-content:center then center the
shorter landscape image vertically and horizontally rather than stretching it. */
.hosts-visual {
display: flex;
align-self: stretch;
align-items: center;
justify-content: center;
}
/* FIX: landscape report shot — fills the column width at its natural 4:3 ratio
(never cropped, stretched, or upscaled past native). Rounded corners match the
site's larger content cards (--radius-card-lg, 24px); overflow:hidden clips the
dark raster to the rounded shape so it reads as a framed product card on the
light section. (Dropped the old portrait max-height:480.) */
.hosts-image {
display: block;
width: auto;
height: auto;
max-width: 100%;
object-fit: contain;
border-radius: var(--radius-card-lg);
overflow: hidden;
}
.hosts-copy {
margin-top: 8px;
}
.hosts-copy p {
color: var(--ink-soft); /* FIX: light-section body aligned to #555555 per audit */
margin-bottom: 20px;
max-width: 560px;
}
/* OVERHAUL: checklist — blue arrows, hairline dividers, no card */
.hosts-features {
margin-top: 16px;
}
.hosts-features li {
display: flex;
align-items: baseline;
gap: 14px;
padding-block: 14px;
font-size: 15px;
font-weight: 500;
color: var(--ink);
}
.hosts-features li + li {
border-top: 1px solid var(--paper-line);
}
.hosts-features li::before {
content: "\2192";
flex: none;
color: var(--blue);
font-weight: 500;
font-size: 15px;
}
/* ---------- Pricing (OVERHAUL: Revolut specs, Free -> Monthly -> Annual) ---------- */
.pricing {
text-align: center;
}
.pricing-cards {
display: grid;
gap: 16px;
margin-top: 64px;
text-align: left;
}
.price-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--white);
color: var(--ink);
border: 1px solid var(--white);
border-radius: var(--radius-card);
padding: 36px;
}
.price-card-featured {
border: 1.5px solid var(--blue);
}
.price-badge {
position: absolute;
top: 20px;
right: 20px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--white);
background: var(--blue);
border-radius: var(--radius-pill);
padding: 5px 10px;
line-height: 1.2;
}
.price-name {
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: 4px;
}
.price-amount {
font-family: var(--font-display);
font-weight: 700;
font-size: 44px;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 6px;
}
.price-period {
font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
color: #707070; /* FIX: readability — darkened from #888888 */
letter-spacing: 0;
margin-left: 4px;
}
.price-tagline {
font-size: 15px; /* FIX: readability — raised from 13px */
line-height: 1.6;
color: #707070; /* FIX: readability — darkened from #888888 */
margin-bottom: 24px;
min-height: 2.6em; /* em-based, so card alignment scales with the larger font */
}
.price-features {
border-top: 1px solid #F0F0F0;
margin-bottom: 28px;
}
.price-features li {
font-size: 16px; /* FIX: readability — raised from 14px */
line-height: 1.5;
color: #444444;
padding: 10px 0;
}
.price-features li + li {
border-top: 1px solid #F5F5F5;
}
.price-arrow {
margin-top: auto;
align-self: flex-end;
font-size: 18px;
line-height: 1;
color: var(--ink);
transition: transform 0.2s var(--ease-out);
}
.price-arrow:hover {
transform: translateX(4px);
}
/* EDIT 14: full-width management contact-sales card (replaces the old
.pricing-management text note, whose styles were removed here) */
.mgmt-card {
display: flex;
flex-direction: column;
gap: 28px;
margin-top: 24px;
text-align: left;
background: #111111;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
padding: 36px 32px;
}
/* FIX: removed .mgmt-label rule — the "Management" eyebrow element was deleted. */
.mgmt-headline {
font-family: var(--font-display);
font-weight: 700;
font-size: 24px;
letter-spacing: -0.01em;
color: var(--white);
margin-bottom: 8px;
}
.mgmt-sub {
font-size: 16px; /* FIX: readability — raised from 14px */
line-height: 1.7;
color: rgba(255, 255, 255, 0.73); /* FIX: readability — raised from 0.55 */
}
.mgmt-cta {
display: inline-block;
background: var(--white);
color: var(--ink);
font-family: var(--font-body); /* FIX: button text is Inter — PJS is display only */
font-weight: 600;
font-size: 14px;
line-height: 1;
border-radius: 100px;
padding: 14px 28px;
transition: background 0.2s ease;
}
.mgmt-cta:hover {
background: #E8E8E8;
}
/* FIX: removed .mgmt-note rule — its only element ("Custom pricing above 100
properties.") was deleted with the Management price disclosure. */
/* ---------- FAQ (OVERHAUL: editorial — PJS questions, +/x, max-height expand) ---------- */
.faq-list {
margin-top: 40px;
border-top: 1px solid #E5E5E5;
}
.faq-item {
border-bottom: 1px solid #E5E5E5;
}
.faq-item h3 {
font-size: inherit;
font-weight: inherit;
}
.faq-q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
text-align: left;
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.4;
padding-block: 24px;
color: var(--ink);
}
/* + that rotates to x when open */
.faq-indicator {
position: relative;
flex: none;
width: 16px;
height: 16px;
transition: transform 0.3s var(--ease-out);
}
.faq-indicator::before,
.faq-indicator::after {
content: "";
position: absolute;
background: var(--ink);
}
.faq-indicator::before {
left: 50%;
top: 0;
bottom: 0;
width: 1.5px;
transform: translateX(-50%);
}
.faq-indicator::after {
top: 50%;
left: 0;
right: 0;
height: 1.5px;
transform: translateY(-50%);
}
.faq-item.open .faq-indicator {
transform: rotate(45deg);
}
/* OVERHAUL: max-height expand + answer opacity fade (no grid animation) */
.faq-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-item.open .faq-panel {
max-height: 500px;
}
.faq-a {
opacity: 0;
transition: opacity 0.25s ease;
}
.faq-item.open .faq-a {
opacity: 1;
}
.faq-a p {
padding-bottom: 28px;
font-size: 15px;
line-height: 1.75;
color: var(--ink-soft);
max-width: 680px;
}
/* FIX: contact line below the FAQ list — quiet secondary text matching the
answer style (15px / --ink-soft); the email is a mailto link in the reserved
accent blue. margin-top gives it clear space after the last item's divider. */
.faq-contact {
margin-top: 44px;
font-size: 15px;
line-height: 1.75;
color: var(--ink-soft);
}
.faq-contact a {
color: var(--blue);
text-decoration: none;
}
.faq-contact a:hover {
text-decoration: underline;
}
/* FIX: removed Closing CTA — all section-specific rules deleted with it
(.closing-cta, .closing-cta::before, .closing-inner, .closing-headline,
.closing-sub). No shared styles touched. */
/* ---------- Waitlist ---------- */
.waitlist {
text-align: center;
}
.waitlist .subheadline {
margin-inline: auto;
margin-bottom: 40px;
}
.waitlist-form {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 520px;
margin-inline: auto;
}
.waitlist-form input {
flex: 1;
font-family: var(--font-body);
font-size: 16px;
color: var(--t-1);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius-input);
padding: 16px 20px;
transition: border-color 0.2s ease;
}
.waitlist-form input::placeholder {
color: var(--t-3);
}
.waitlist-form input:focus {
outline: none;
border-color: var(--blue);
}
.waitlist-note {
margin-top: 20px;
font-size: 13px;
color: var(--t-3);
}
.waitlist-note.success {
color: var(--t-1);
font-weight: 500;
}
/* ---------- Footer (OVERHAUL: opacity-based links, centered disclaimer) ---------- */
.footer {
/* FIX: border-top removed — dark sections above flow into the footer
as one continuous #0A0A0A block, no seam */
padding-block: 56px 40px;
}
.footer-top {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 36px;
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 28px;
}
.footer-links a {
font-size: 14px;
color: var(--white);
opacity: 0.5;
/* FIX(audit B9): enlarge tap target to ~44px without changing layout — the negative
margin offsets the padding so the footer row height stays the same. */
padding-block: 11px;
margin-block: -11px;
transition: opacity 0.2s ease;
}
.footer-links a:hover {
opacity: 1;
}
.footer-meta {
font-size: 13px;
line-height: 1.9;
color: var(--white);
opacity: 0.5; /* FIX(audit B3): 0.45 -> 0.5 — WCAG AA (was 4.48:1, now ~5.0:1) */
margin-bottom: 28px;
}
.footer-meta a {
transition: opacity 0.2s ease;
}
/* EDIT 16: disclaimer styled exactly per spec */
.footer-disclaimer {
font-family: var(--font-body);
font-weight: 400;
font-size: 11px;
letter-spacing: 0.02em;
line-height: 1.8;
color: rgba(255, 255, 255, 0.45); /* FIX(audit B3): 0.3 -> 0.45 — WCAG AA (was 2.57:1, now ~4.6:1) */
max-width: 640px;
margin: 0 auto;
text-align: center;
}
/* EDIT 15: legal placeholder pages (terms.html / privacy.html) */
/* FIX(legal): long-form legal-document layout (privacy + terms). Dark section, a
left-aligned reading column, high-contrast body. Reuses the site type system. */
.legal {
padding: 150px 0 120px;
}
.legal-head {
margin-bottom: 44px;
}
/* the company name carries over bold from the source doc; keep the eyebrow weight */
.legal-head .eyebrow strong {
font-weight: inherit;
}
.legal h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(32px, 5vw, 40px);
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: 14px;
}
.legal-head .legal-meta {
font-family: var(--font-body);
font-size: 14px;
color: var(--t-3);
letter-spacing: 0.01em;
}
/* the reading column — a touch narrower than .container-narrow for line length */
.legal-doc {
max-width: 680px;
}
.legal-doc .legal-lead {
font-family: var(--font-body);
font-size: 18px;
line-height: 1.75;
color: var(--t-1);
margin-bottom: 10px;
}
.legal-doc h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--white);
margin: 52px 0 16px;
scroll-margin-top: 90px;
}
.legal-doc h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
color: rgba(255, 255, 255, 0.9);
margin: 30px 0 12px;
scroll-margin-top: 90px;
}
.legal-doc p {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.8;
color: var(--t-2);
margin-bottom: 16px;
}
.legal-doc strong {
color: var(--t-1);
font-weight: 600;
}
.legal-doc ul {
list-style: none;
margin: 0 0 16px;
padding: 0;
}
.legal-doc li {
position: relative;
padding-left: 22px;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.8;
color: var(--t-2);
margin-bottom: 12px;
}
.legal-doc li::before {
content: "";
position: absolute;
left: 3px;
top: 12px;
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
}
.legal-doc .legal-copyright {
margin-top: 56px;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
font-size: 13px;
color: var(--t-3);
}
.legal a {
color: var(--t-1);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ---------- Motion system (OVERHAUL: one system — 500ms snappy ease-out,
24px rise; per-child stagger delays are set inline by script.js) ---------- */
.js .reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.js .reveal.in {
opacity: 1;
transform: none;
}
/* ============================================================
Breakpoint: 768px
============================================================ */
@media (min-width: 768px) {
.container {
padding-inline: 32px;
}
section {
padding-block: 140px;
}
.nav-links {
display: flex;
align-items: center;
gap: 32px;
margin-left: auto;
}
.nav-links a {
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
transition: color 0.2s ease;
}
.nav-links a:hover {
color: var(--white);
}
.nav-cta {
display: inline-flex;
}
.hamburger,
.mobile-menu {
display: none;
}
/* INSIGHT FIX: desktop scale — 120px section rhythm, 42px headline,
17px supporting text */
.insight {
padding-block: 120px;
}
.insight-statement {
font-size: 42px;
}
.insight-support {
font-size: 18px; /* FIX: readability — raised from 17px */
}
/* EDIT 14: management card sits as a two-column row from tablet up */
.mgmt-card {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 36px 48px;
}
.mgmt-right {
text-align: right;
flex: none;
}
/* OVERHAUL: Elyte 50/50 split with sticky right column */
.how-cols {
grid-template-columns: 1fr 1fr;
gap: 64px;
min-height: 600px;
align-items: start;
}
.how-visual {
height: 100%; /* gives the sticky card room to travel */
align-items: flex-start;
}
/* OVERHAUL: table rows — name left, description right */
.engine-layer {
grid-template-columns: 1fr 2fr;
gap: 24px;
align-items: baseline;
}
/* FIX: For Hosts uses a tightly-cropped SQUARE (1:1) report shot now, so the
column widening is reverted to the original 1fr/1.1fr — a square image at
this width is naturally ~as tall as the text block, lining up with it, and
the tight crop keeps the in-phone text legible. .hosts-visual keeps it
vertically centered. */
.hosts-cols {
grid-template-columns: 1fr 1.1fr;
gap: 72px;
align-items: start;
}
.pricing-cards {
grid-template-columns: repeat(3, 1fr);
}
/* FIX: removed the Annual feature-block centering — the two lines now flow
top-down from the subtext divider like Free/Monthly. The arrow's existing
margin-top:auto keeps the empty space BELOW them and the CTA bottom-anchored.
(Annual now uses the default .price-features / .price-tagline spacing.) */
.waitlist-form {
flex-direction: row;
}
}
/* ============================================================
Breakpoint: 1200px
============================================================ */
@media (min-width: 1200px) {
/* EDIT 6: shift the hero photograph 80px right — more breathing room
between the text column and the phone.
FIX: the shift exposes an 80px strip of background color on the left,
and the photo's left edge isn't pure black, so a hard seam showed.
A third gradient layer paints solid black across the exposed strip
and fades into the photo, hiding the seam completely. */
.hero {
background-image: linear-gradient(
to right,
#0A0A0A 0%,
#0A0A0A 110px,
rgba(10, 10, 10, 0) 420px
),
linear-gradient(
to right,
rgba(0, 0, 0, 0.75) 0%,
rgba(0, 0, 0, 0.4) 50%,
rgba(0, 0, 0, 0.1) 100%
),
url("images/hero-bg.jpg");
background-position: 0 0, 0 0, 80px center;
background-size: 100% 100%, 100% 100%, cover;
}
.section-headline {
font-size: 52px;
}
/* EDIT 10: How It Works scaled up — 52px headline, 180px section rhythm */
.how .section-headline {
font-size: 52px;
}
.how {
/* FIX: bottom padding tightened (140px -> 80px -> 64px) — the dark How It Works
-> dark Engine void read as an awkward gap. Now ~204px to the Engine headline
(64px here + Engine's 140px top), down from the original 280px. TOP stays 220px
(prominent entrance; Insight -> How boundary unchanged). Scoped to .how only. */
padding-block: 220px 64px;
}
/* RESTRUCTURE: pull-quote rule deleted with the Problem section */
.pricing-cards {
gap: 20px;
}
}
/* ============================================================
Reduced motion — transforms and transitions off globally;
reveals appear instantly (opacity kept, 0ms)
============================================================ */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
}
.js .reveal {
opacity: 1 !important;
transform: none !important;
}
}
/* ============================================================
WAITLIST: inline hero expansion (modal removed).
The shell is an invisible pill around the untouched button at
rest; on open it becomes the frosted glass row and the width
morph is driven by inline px values set in script.js.
============================================================ */
/* WAITLIST: wrapper — anchors the absolutely-positioned text below */
.wl-wrap {
position: relative;
display: inline-block;
max-width: 100%;
}
/* WAITLIST: keep the secondary button vertically centered while the
shell grows from button height to 56px */
.hero-ctas {
align-items: center;
}
/* WAITLIST: the morphing pill */
.wl-shell {
position: relative;
display: flex;
align-items: center;
border-radius: 100px;
border: 1px solid transparent;
background: transparent;
overflow: hidden;
transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),
height 400ms cubic-bezier(0.16, 1, 0.3, 1),
background-color 250ms ease, border-color 250ms ease,
box-shadow 250ms ease;
}
/* WAITLIST: expanded glass treatment */
.wl-wrap.is-open .wl-shell {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* WAITLIST: invalid email — the shell carries the red border (the input
inside the glass row is borderless by design); reverts after 2000ms */
.wl-shell.is-invalid {
border-color: rgba(255, 60, 60, 0.6);
}
/* WAITLIST: container shake on invalid submit */
.wl-shell.wl-shake-anim {
animation: wl-shake 400ms ease;
}
@keyframes wl-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}
/* WAITLIST: trigger — original .btn classes give the rest-state look;
the label fades out as the pill stretches */
.wl-trigger {
touch-action: manipulation;
white-space: nowrap;
transition: opacity 150ms ease;
}
.wl-wrap.is-open .wl-trigger {
opacity: 0;
pointer-events: none;
}
/* WAITLIST: the email row, laid over the shell */
.wl-form {
position: absolute;
inset: 0;
display: flex;
align-items: center;
padding: 6px 6px 6px 20px;
opacity: 0;
transition: opacity 200ms ease;
}
.wl-form[hidden] {
display: none;
}
/* JS reveals the form 250ms into the expansion */
.wl-wrap.is-ready .wl-form {
opacity: 1;
}
.wl-form input {
flex: 1;
min-width: 0;
height: 100%;
background: transparent;
border: none;
outline: none;
font-family: var(--font-body);
font-weight: 400;
font-size: 15px;
color: var(--white);
caret-color: var(--white);
}
.wl-form input::placeholder {
color: rgba(255, 255, 255, 0.5); /* FIX(audit B3): 0.35 -> 0.5 — WCAG AA (was 3.10:1, now ~5.0:1) */
}
/* WAITLIST: submit pill inside the row */
.wl-submit {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 20px;
flex-shrink: 0;
background: #0066FF;
border: none;
border-radius: 100px;
font-family: var(--font-display);
font-weight: 600;
font-size: 14px;
letter-spacing: -0.01em;
color: var(--white);
cursor: pointer;
transition: background 150ms ease;
}
.wl-submit:hover {
background: #0052CC;
}
/* WAITLIST: loading — label swaps for a CSS spinner */
.wl-submit.is-loading {
opacity: 0.8;
cursor: default;
}
.wl-submit.is-loading .wl-submit-label {
display: none;
}
.wl-submit.is-loading::after {
content: "";
width: 14px;
height: 14px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: var(--white);
border-radius: 50%;
animation: wl-spin 600ms linear infinite;
}
@keyframes wl-spin {
to { transform: rotate(360deg); }
}
/* WAITLIST: confirmation — centered in the contracted blue pill */
.wl-confirm {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 28px;
white-space: nowrap;
opacity: 0;
transition: opacity 250ms ease 200ms;
}
.wl-confirm[hidden] {
display: none;
}
.wl-wrap.is-done .wl-confirm {
opacity: 1;
}
/* WAITLIST: confirmed shell tint (declared after .is-open so it wins) */
.wl-wrap.is-done .wl-shell {
background: rgba(0, 102, 255, 0.12);
border-color: rgba(0, 102, 255, 0.3);
}
.wl-check {
font-family: var(--font-body);
font-weight: 600;
font-size: 16px;
line-height: 1;
color: #0066FF;
}
.wl-confirm-text {
font-family: var(--font-body);
font-weight: 500;
font-size: 14px;
letter-spacing: -0.01em;
color: var(--white);
}
/* WAITLIST: supporting + error text — absolute, so the hero never reflows.
Centered under the shell at its natural width, so it stays readable even
when the pill contracts in the confirmed state. */
.wl-below {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: max-content;
max-width: min(420px, 86vw);
margin-top: 12px;
text-align: center;
pointer-events: none;
}
.wl-support {
font-family: var(--font-body);
font-size: 12px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.5); /* WAITLIST: lightened from 0.35 */
opacity: 0;
transition: opacity 200ms ease;
}
/* Fades in late in the expansion (300ms delay), stays for confirmation */
.wl-wrap.is-open .wl-support,
.wl-wrap.is-done .wl-support {
opacity: 1;
transition: opacity 200ms ease 300ms;
}
.wl-error {
font-family: var(--font-body);
font-size: 12px;
color: rgba(255, 80, 80, 0.8);
margin-top: 6px;
opacity: 0;
transition: opacity 150ms ease;
}
.wl-error[hidden] {
display: none;
}
.wl-error.is-visible {
opacity: 1;
}
/* WAITLIST: "See How It Works" slides cleanly out of the way while the
form is open — the expanded row + ghost button can't share the 580px
hero column, and the support text occupies the line below. It returns
(with a small delay, after the shell contracts) when the form collapses,
and stays away in the confirmed state. */
.hero-ctas .btn-ghost {
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
opacity 250ms ease 200ms, transform 250ms ease 200ms, visibility 0s 200ms;
}
.wl-wrap.is-open ~ .btn-ghost,
.wl-wrap.is-done ~ .btn-ghost {
opacity: 0;
transform: translateX(16px);
visibility: hidden;
pointer-events: none;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
opacity 200ms ease, transform 200ms ease, visibility 0s 200ms;
}