/* ==========================================================================
closure. landing page
Philosophy: one motif (the blue dot), editorial type, dark restraint,
Apple-native feel without being a clone.
========================================================================== */
/* --------------------------------------------------------------------------
Tokens
-------------------------------------------------------------------------- */
:root {
/* Core palette — dark-first, mirrors the iOS app tokens.
Lifted off-black with a faint cool-blue undertone so the page reads as
a designed surface instead of a void; harmonizes with the iOS-blue accent. */
--bg: #0B0D14;
--bg-2: #11131C;
--surface: #171922;
--surface-2: #1C1E27;
--surface-3: #22242E;
--text: #F5F6F8;
--text-2: #D4D6DC;
--muted: #8A8D97;
--muted-2: #6E7179;
--hairline: rgba(255, 255, 255, 0.08);
--hairline-strong: rgba(255, 255, 255, 0.14);
--hairline-soft: rgba(255, 255, 255, 0.04);
/* Primary accent + secondary category colors (matches the iOS app). */
--accent: #0A84FF;
--accent-2: #3CA1FF;
--accent-soft: rgba(10, 132, 255, 0.18);
--accent-softer: rgba(10, 132, 255, 0.08);
--accent-glow: rgba(10, 132, 255, 0.32);
/* Pipeline / collections / draft */
--purple: #8B85FF;
--purple-2: #A8A3FF;
--purple-soft: rgba(139, 133, 255, 0.22);
--purple-softer: rgba(139, 133, 255, 0.08);
--purple-glow: rgba(139, 133, 255, 0.30);
/* Momentum / paid / success */
--green: #30D158;
--green-2: #4EE07A;
--green-soft: rgba(48, 209, 88, 0.22);
--green-softer: rgba(48, 209, 88, 0.08);
--green-glow: rgba(48, 209, 88, 0.28);
/* Priority / warning / overdue */
--orange: #FF9F0A;
--orange-2: #FFB947;
--orange-soft: rgba(255, 159, 10, 0.22);
--orange-softer: rgba(255, 159, 10, 0.08);
--orange-glow: rgba(255, 159, 10, 0.28);
--success: var(--green);
--warning: var(--orange);
--danger: #FF453A;
/* Typography */
--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", system-ui, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace;
/* Scale */
--container: 1240px;
--gutter: clamp(20px, 4vw, 48px);
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 36px;
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
/* Pronounced overshoot for hover lifts — reads as tactile/expensive. */
--ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-fast: 180ms;
--dur: 320ms;
--dur-slow: 640ms;
}
/* Light theme — opt-in via [data-theme="light"] on , set by JS from
localStorage. We deliberately do NOT respect prefers-color-scheme so the
default is always dark; users opt in via the nav toggle. */
[data-theme="light"] {
/* Page surfaces — soft white-blue gradient field, matching the iOS app */
--bg: #F4F6FA;
--bg-2: #EAEDF4;
--surface: #FFFFFF;
--surface-2: #F4F6FA;
--surface-3: #EAEDF4;
/* Type — near-black, never pure black, for warmth */
--text: #0B0D14;
--text-2: #2A2E3A;
--muted: #6A6E7A;
--muted-2: #9CA0AB;
/* Borders — black alpha at the same opacities as the dark mode whites */
--hairline: rgba(10, 12, 18, 0.10);
--hairline-strong: rgba(10, 12, 18, 0.18);
--hairline-soft: rgba(10, 12, 18, 0.05);
/* Accent stays the same blue across both themes — it's the brand */
--accent: #0A84FF;
--accent-2: #2196FF;
--accent-soft: rgba(10, 132, 255, 0.14);
--accent-softer: rgba(10, 132, 255, 0.06);
--accent-glow: rgba(10, 132, 255, 0.20);
/* Secondary accents toned for light backgrounds */
--purple-soft: rgba(139, 133, 255, 0.16);
--purple-softer: rgba(139, 133, 255, 0.06);
--purple-glow: rgba(139, 133, 255, 0.22);
--green-soft: rgba(48, 209, 88, 0.16);
--green-softer: rgba(48, 209, 88, 0.06);
--green-glow: rgba(48, 209, 88, 0.22);
--orange-soft: rgba(255, 159, 10, 0.16);
--orange-softer: rgba(255, 159, 10, 0.06);
--orange-glow: rgba(255, 159, 10, 0.22);
}
/* Browser meta theme color — match the body bg for the iOS notch / address bar */
[data-theme="light"] {
color-scheme: light;
}
/* ----- Light theme: fine-tuned overrides for elements that don't auto-adapt
from the token swap alone (gradients, blend modes, opacities). ----- */
/* Body gets a soft top-down gradient instead of flat white, matching the
subtle depth of the iOS app's light backgrounds. */
[data-theme="light"] body {
background:
radial-gradient(1400px 700px at 50% -200px, #FFFFFF, transparent 70%),
linear-gradient(180deg, #F4F6FA 0%, #EAEDF4 100%);
background-attachment: fixed;
}
/* Hero grain pattern is subtler in light mode (dark dots, multiply blend) */
[data-theme="light"] .hero__grain {
opacity: 0.5;
mix-blend-mode: multiply;
background-image: radial-gradient(rgba(10, 12, 18, 0.06) 1px, transparent 1px);
}
/* Hero blue glow on the right is softer against a light field */
[data-theme="light"] .hero__glow {
opacity: 0.55;
}
/* Scroll cue line — needs darker stroke against light background */
[data-theme="light"] .hero__scroll-line {
background: linear-gradient(to bottom, var(--muted), transparent);
}
/* Nav scrolled state — light blur instead of dark */
[data-theme="light"] .nav.is-scrolled {
background: color-mix(in srgb, #FFFFFF 78%, transparent);
border-bottom-color: var(--hairline);
}
/* Pill (Now on iOS) — soft white card */
[data-theme="light"] .pill {
background: color-mix(in srgb, #FFFFFF 88%, transparent);
border-color: var(--hairline);
color: var(--text-2);
}
/* Story section background tint */
[data-theme="light"] .story::before {
background: radial-gradient(800px 500px at 50% 0%, var(--accent-softer), transparent 70%);
opacity: 0.7;
}
/* Stat section background gradient */
[data-theme="light"] .stat::before {
background: radial-gradient(800px 480px at 50% 50%, var(--accent-softer), transparent 70%);
opacity: 0.7;
}
/* Stat big number — gradient from text to muted, slightly different in light */
[data-theme="light"] .stat__big {
background: linear-gradient(180deg, var(--text) 0%, color-mix(in srgb, var(--muted) 70%, var(--text)) 130%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Display headline — first line is muted in dark mode, slightly different here */
[data-theme="light"] .display__line:first-child {
color: color-mix(in srgb, var(--text) 55%, var(--muted));
}
/* Feature grid — uses background hairlines as cell separators; we want
white cells with subtle borders, not floating cards. The default
token-driven background already does this; just ensure feature hover
stays subtle. */
[data-theme="light"] .feature {
background: var(--surface);
}
[data-theme="light"] .feature:hover {
background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
/* Pricing card backgrounds — solid white with less transparency */
[data-theme="light"] .plan {
background: #FFFFFF;
}
[data-theme="light"] .plan--featured {
background:
radial-gradient(700px 300px at 50% -20%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
#FFFFFF;
}
/* Pricing badge — neutral pill picks up surface color naturally */
[data-theme="light"] .plan__badge {
background: #FFFFFF;
border-color: var(--hairline-strong);
}
/* ...but the accent variant ("Best value · Save 29%") keeps its blue
fill + white text so it stays legible on the white card. */
[data-theme="light"] .plan__badge--accent {
background: var(--accent);
border-color: var(--accent);
color: #FFFFFF;
}
/* Audience card hover */
[data-theme="light"] .audience__card {
background: var(--surface);
}
[data-theme="light"] .audience__card:hover {
background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
/* Closing CTA — keep the subtle blue glow but lighter */
[data-theme="light"] .cta__glow {
opacity: 0.7;
}
/* Footer — distinct from body bg */
[data-theme="light"] .footer {
background: color-mix(in srgb, var(--bg-2) 85%, transparent);
}
/* Marquee chips on light background */
[data-theme="light"] .chip {
background: var(--surface);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 8px 20px -10px rgba(10, 12, 18, 0.08);
}
[data-theme="light"] .chip--accent {
background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
/* Story quote box */
[data-theme="light"] .story__body .quote {
background: var(--surface);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 6px 16px -8px rgba(10, 12, 18, 0.06);
}
/* Phone frame chrome — keeps the same dark bezel in both themes (real
iPhones have black bezels regardless), so no override needed. The
shadow under the phone gets a softer light-mode tint though. */
[data-theme="light"] .phone__shadow {
background: radial-gradient(ellipse at center, rgba(10, 12, 18, 0.16), transparent 65%);
}
[data-theme="light"] .phone__frame {
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.14),
inset 0 -1px 0 rgba(0, 0, 0, 0.5),
0 1px 0 rgba(255, 255, 255, 0.5),
0 30px 60px -30px rgba(10, 20, 50, 0.28),
0 60px 120px -20px rgba(10, 20, 50, 0.18),
0 90px 180px -30px var(--accent-softer);
}
/* Stat unit "days" pill stays accent-colored — works in both themes */
/* Update meta theme color via JS (handled in script.js) */
/* --------------------------------------------------------------------------
Reset
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
scroll-padding-top: 88px;
}
body {
margin: 0;
min-height: 100vh;
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: 17px;
line-height: 1.55;
letter-spacing: -0.005em;
overflow-x: hidden;
font-feature-settings: "ss01", "cv11";
}
img,
svg {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: 800;
letter-spacing: -0.025em;
}
p {
margin: 0;
}
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
::selection {
background: var(--accent);
color: #FFF;
}
/* Accessible focus */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
.skip {
position: absolute;
left: -9999px;
}
.skip:focus {
left: 16px;
top: 16px;
z-index: 1000;
padding: 10px 16px;
background: var(--text);
color: var(--bg);
border-radius: var(--radius-sm);
}
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
position: relative;
}
/* --------------------------------------------------------------------------
Reveal (scroll animation)
-------------------------------------------------------------------------- */
/* Reveals: always visible. Subtle entry animation kept only for the hero. */
.reveal {
opacity: 1;
transform: none;
}
.hero .reveal {
animation: rise 900ms var(--ease) var(--reveal-delay, 0ms) both;
}
@keyframes rise {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.hero .reveal { animation: none; }
* {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}
/* --------------------------------------------------------------------------
Wordmark
-------------------------------------------------------------------------- */
.wordmark {
display: inline-flex;
align-items: baseline;
font-family: var(--font-sans);
font-weight: 700;
font-size: 20px;
letter-spacing: -0.02em;
color: var(--text);
line-height: 1;
white-space: nowrap;
}
.wordmark__text {
display: inline-block;
}
.wordmark__dot {
display: inline-block;
width: 8px;
height: 8px;
margin-left: 2px;
background: var(--accent);
border-radius: 999px;
box-shadow: 0 0 22px var(--accent-glow);
/* Sit the dot snug against the "e" of "Closure" with its bottom slightly
below the text baseline — manually nudged to match the visual rhythm
of a typographic period at this wordmark size. */
transform: translateY(1px);
}
.wordmark--sm {
font-size: 18px;
}
/* The tiny accent dot used as "closure." punctuation at end of headings */
.accent-dot {
display: inline-block;
width: 0.28em;
height: 0.28em;
margin-left: 0.06em;
background: var(--accent);
border-radius: 999px;
vertical-align: baseline;
transform: translateY(0.04em);
box-shadow: 0 0 22px var(--accent-glow);
}
/* --------------------------------------------------------------------------
Buttons
-------------------------------------------------------------------------- */
.btn {
--btn-bg: transparent;
--btn-fg: var(--text);
--btn-border: var(--hairline-strong);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
padding: 0 18px;
background: var(--btn-bg);
color: var(--btn-fg);
border: 1px solid var(--btn-border);
border-radius: 999px;
font-weight: 600;
font-size: 15px;
letter-spacing: -0.005em;
transition:
transform var(--dur-fast) var(--ease-overshoot),
background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease),
box-shadow var(--dur) var(--ease);
white-space: nowrap;
}
.btn:hover {
transform: translateY(-1px);
}
.btn:active {
transform: translateY(0);
}
.btn--primary {
--btn-bg: var(--accent);
--btn-fg: #FFFFFF;
--btn-border: var(--accent);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.2) inset,
0 10px 28px -14px var(--accent-glow),
0 2px 0 rgba(0, 0, 0, 0.22);
}
.btn--primary:hover {
--btn-bg: var(--accent-2);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.22) inset,
0 18px 42px -14px var(--accent-glow),
0 2px 0 rgba(0, 0, 0, 0.22);
}
.btn--ghost {
--btn-bg: transparent;
--btn-border: var(--hairline-strong);
}
.btn--ghost:hover {
--btn-border: var(--text-2);
--btn-bg: var(--hairline-soft);
}
.btn--lg {
height: 54px;
padding: 0 24px;
font-size: 16px;
font-weight: 600;
}
.btn--block {
display: flex;
width: 100%;
}
.btn__apple {
margin-top: -2px;
}
/* --------------------------------------------------------------------------
Nav
-------------------------------------------------------------------------- */
.nav {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
padding: 14px 0;
background: transparent;
transition:
background-color var(--dur) var(--ease),
border-color var(--dur) var(--ease),
backdrop-filter var(--dur) var(--ease),
padding var(--dur) var(--ease);
border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
padding: 10px 0;
background: color-mix(in srgb, var(--bg) 68%, transparent);
backdrop-filter: saturate(180%) blur(22px);
-webkit-backdrop-filter: saturate(180%) blur(22px);
border-bottom-color: var(--hairline);
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.nav__links {
display: flex;
align-items: center;
gap: 28px;
font-size: 14.5px;
font-weight: 500;
color: var(--muted);
}
.nav__links a {
transition: color var(--dur-fast) var(--ease);
}
.nav__links a:hover {
color: var(--text);
}
.nav__actions {
display: flex;
align-items: center;
gap: 10px;
}
.nav__actions .btn--ghost {
display: none;
}
/* ---------- Theme toggle (sun / moon segmented pill) ---------- */
.theme-toggle {
position: relative;
display: inline-flex;
align-items: center;
padding: 3px;
background: color-mix(in srgb, var(--surface) 70%, transparent);
border: 1px solid var(--hairline);
border-radius: 999px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
margin-right: 6px;
}
.theme-toggle__btn {
position: relative;
z-index: 2;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
color: var(--muted);
transition: color var(--dur-fast) var(--ease);
cursor: pointer;
}
.theme-toggle__btn:hover {
color: var(--text-2);
}
.theme-toggle__btn[aria-pressed="true"] {
color: var(--accent);
}
.theme-toggle__btn[aria-pressed="true"]:hover {
color: var(--accent-2);
}
.theme-toggle__pill {
position: absolute;
top: 3px;
left: 3px;
width: 30px;
height: 30px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
box-shadow: 0 2px 10px -4px var(--accent-glow);
transition: transform var(--dur) var(--ease-spring);
pointer-events: none;
z-index: 1;
}
[data-theme="light"] .theme-toggle__pill {
transform: translateX(30px);
}
@media (max-width: 720px) {
.nav__actions .btn--ghost,
.nav__actions .btn--primary span:not(.wave-icon) { /* keep primary button */ }
.theme-toggle { margin-right: 4px; }
}
@media (max-width: 520px) {
.theme-toggle { display: none; } /* Hide on small mobile to save room */
}
@media (max-width: 860px) {
.nav__links { display: none; }
}
/* --------------------------------------------------------------------------
Hero
-------------------------------------------------------------------------- */
.hero {
position: relative;
padding: 160px 0 80px;
min-height: min(900px, 100vh);
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
grid-template-areas: "text stage";
align-items: center;
gap: 24px;
overflow: hidden;
}
.hero__inner {
grid-area: text;
max-width: none;
padding-bottom: 40px;
position: relative;
z-index: 2;
}
.hero__glow {
position: absolute;
width: 1200px;
height: 1200px;
right: -420px;
top: -260px;
background: radial-gradient(closest-side, var(--accent-glow), rgba(10, 132, 255, 0) 70%);
filter: blur(60px);
opacity: 0.7;
pointer-events: none;
z-index: 0;
}
.hero__grain {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.45;
mix-blend-mode: overlay;
background-image: radial-gradient(
rgba(255, 255, 255, 0.035) 1px,
transparent 1px
);
background-size: 3px 3px;
}
.hero__eyebrow {
margin-bottom: 28px;
}
.pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
font-size: 13px;
font-weight: 600;
color: var(--text-2);
background: color-mix(in srgb, var(--surface) 70%, transparent);
border: 1px solid var(--hairline);
border-radius: 999px;
letter-spacing: 0;
backdrop-filter: blur(10px);
}
.pill__dot {
width: 7px;
height: 7px;
background: var(--accent);
border-radius: 999px;
box-shadow: 0 0 18px var(--accent-glow);
animation: pulse 2.8s var(--ease) infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(1.25); }
}
/* Display type */
.display {
font-size: clamp(44px, 7vw, 104px);
font-weight: 900;
line-height: 0.94;
letter-spacing: -0.045em;
margin: 0 0 28px;
color: var(--text);
white-space: nowrap;
}
.display__line {
display: block;
position: relative;
}
.display__line:first-child {
color: var(--text-2);
}
.display__dot {
display: inline-block;
width: 0.22em;
height: 0.22em;
margin-left: 0.04em;
background: var(--accent);
border-radius: 999px;
transform: translateY(0.015em);
box-shadow:
0 0 32px var(--accent-glow),
0 0 64px var(--accent-softer);
animation: breathe 3.6s var(--ease) infinite;
}
@keyframes breathe {
0%, 100% { transform: translateY(0.015em) scale(1); box-shadow: 0 0 32px var(--accent-glow), 0 0 64px var(--accent-softer); }
50% { transform: translateY(0.015em) scale(1.08); box-shadow: 0 0 40px var(--accent-glow), 0 0 96px var(--accent-softer); }
}
.hero__sub {
font-size: clamp(17px, 1.6vw, 20px);
line-height: 1.55;
color: var(--text-2);
max-width: 580px;
margin: 0 0 36px;
font-weight: 450;
}
.hero__cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 48px;
}
.hero__proof {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
font-size: 13px;
font-weight: 500;
color: var(--muted);
letter-spacing: 0.01em;
text-transform: uppercase;
}
.hero__proof li {
position: relative;
padding-left: 14px;
}
.hero__proof li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 4px;
height: 4px;
border-radius: 999px;
background: var(--muted-2);
transform: translateY(-50%);
}
/* Stage / hero mockup area */
.hero__stage {
grid-area: stage;
position: relative;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
/* Saturated bloom centered on the phone — fades to transparent within the
stage area. Makes the device feel cinematic instead of catalogued.
(Inspired by Raycast's "gradient behind the app interface" technique.) */
.hero__stage::before {
content: "";
position: absolute;
inset: -120px;
background: radial-gradient(
closest-side,
rgba(10, 132, 255, 0.45) 0%,
rgba(10, 132, 255, 0.20) 28%,
rgba(10, 132, 255, 0.06) 55%,
transparent 78%
);
filter: blur(40px);
z-index: 0;
pointer-events: none;
}
.hero__stage > * { position: relative; z-index: 1; }
[data-theme="light"] .hero__stage::before {
background: radial-gradient(
closest-side,
rgba(10, 132, 255, 0.22) 0%,
rgba(10, 132, 255, 0.10) 28%,
rgba(10, 132, 255, 0.04) 55%,
transparent 78%
);
filter: blur(50px);
}
@media (prefers-reduced-motion: reduce) {
/* Aura is static, but reducing intensity respects users who want a calmer page. */
.hero__stage::before { opacity: 0.7; }
}
.hero__scroll-cue {
position: absolute;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted-2);
z-index: 3;
}
.hero__scroll-line {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, var(--muted-2), transparent);
animation: scroll-cue 2.2s var(--ease) infinite;
}
@keyframes scroll-cue {
0%, 100% { transform: scaleY(1); transform-origin: top; opacity: 0.4; }
50% { transform: scaleY(0.4); opacity: 1; }
}
@media (max-width: 960px) {
.hero {
grid-template-columns: 1fr;
grid-template-areas: "text" "stage";
padding: 120px 0 40px;
min-height: auto;
gap: 32px;
}
.hero__inner {
max-width: none;
padding-bottom: 0;
text-align: left;
}
.hero__stage {
margin-top: 8px;
}
.phone--hero {
--phone-w: 280px;
transform: rotateX(2deg) rotateY(-4deg) rotateZ(0.5deg);
}
.hero__scroll-cue { display: none; }
.hero__glow {
right: -40%;
width: 140%;
height: 720px;
}
.hero__cta { gap: 10px; }
.hero__cta .btn { flex: 1; min-width: 0; }
.hero__proof { font-size: 11px; gap: 6px 14px; }
}
@media (max-width: 520px) {
.hero {
padding: 108px 0 32px;
}
.hero__cta {
flex-direction: column;
align-items: stretch;
}
.hero__cta .btn { width: 100%; }
.phone--hero { --phone-w: 260px; }
}
/* --------------------------------------------------------------------------
Phone frame + app UI (CSS-drawn)
-------------------------------------------------------------------------- */
/* Phone frame: a chrome bezel sized to the exact iPhone 17 Pro screenshot ratio
(1206x2622 = 1:2.174). Real screenshot lives inside as an ![]()
.
The outer aspect is slightly taller than the inner to account for the 8px
bezel — computed so the inner area matches the image exactly. */
.phone {
--phone-w: 340px;
width: var(--phone-w);
aspect-ratio: 340 / 716;
position: relative;
perspective: 1600px;
}
.phone--hero {
--phone-w: 344px;
transform: rotateX(4deg) rotateY(-8deg) rotateZ(1deg);
transition: transform 800ms var(--ease);
transform-style: preserve-3d;
}
.phone--story {
--phone-w: 276px;
}
.phone__frame {
position: absolute;
inset: 0;
background:
linear-gradient(160deg, #2E2E34 0%, #1A1A20 55%, #0F0F14 100%);
border-radius: 56px;
padding: 7px;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.14),
inset 0 -1px 0 rgba(0, 0, 0, 0.5),
0 1px 0 rgba(255, 255, 255, 0.08),
0 40px 60px -40px rgba(0, 0, 0, 0.8),
0 60px 120px -20px rgba(0, 0, 0, 0.5),
0 90px 180px -30px var(--accent-softer);
}
.phone__frame::before {
content: "";
position: absolute;
inset: 2px;
border-radius: 54px;
background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 30%);
pointer-events: none;
z-index: 2;
}
.phone__screen {
position: absolute;
inset: 7px;
background: var(--bg-2);
border-radius: 49px;
overflow: hidden;
}
.phone__screen img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
transition: opacity 360ms var(--ease);
}
/* Both dark + light images load in parallel; only one is visible at a time
based on [data-theme]. The opacity transition gives a soft cross-fade
when the user toggles. */
.phone__img--dark { opacity: 1; }
.phone__img--light { opacity: 0; }
[data-theme="light"] .phone__img--dark { opacity: 0; }
[data-theme="light"] .phone__img--light { opacity: 1; }
.phone__shadow {
position: absolute;
inset: auto 8% -30px 8%;
height: 80px;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 65%);
filter: blur(24px);
pointer-events: none;
z-index: -1;
}
/* --------------------------------------------------------------------------
Shared section header
-------------------------------------------------------------------------- */
.section-head {
margin-bottom: 56px;
max-width: 840px;
}
.section-head--center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 14px;
}
.section-title {
font-size: clamp(34px, 5.5vw, 64px);
font-weight: 900;
line-height: 1.02;
letter-spacing: -0.035em;
color: var(--text);
}
.section-title em {
font-style: normal;
color: var(--accent);
font-weight: 900;
}
.section-sub {
margin-top: 16px;
font-size: 18px;
line-height: 1.6;
color: var(--text-2);
max-width: 620px;
}
.section-head--center .section-sub {
margin-left: auto;
margin-right: auto;
}
/* --------------------------------------------------------------------------
Moment section
-------------------------------------------------------------------------- */
.moment {
padding: 140px 0;
border-top: 1px solid var(--hairline);
position: relative;
}
.moment .container {
max-width: 1040px;
text-align: center;
}
.moment .eyebrow {
margin-bottom: 18px;
}
.editorial {
font-size: clamp(42px, 7.4vw, 104px);
line-height: 1;
font-weight: 900;
letter-spacing: -0.045em;
color: var(--text);
margin-bottom: 40px;
}
.editorial br + {
color: var(--muted);
}
.moment__body {
font-size: clamp(17px, 1.6vw, 21px);
line-height: 1.55;
color: var(--text-2);
max-width: 640px;
margin: 0 auto;
}
/* When a moment section uses two stacked body paragraphs (e.g. pain on top,
solution beneath), give them a comfortable gap so they read as separate
beats rather than running together. */
.moment__body + .moment__body {
margin-top: 18px;
}
/* --------------------------------------------------------------------------
Story section
-------------------------------------------------------------------------- */
.story {
padding: 140px 0;
border-top: 1px solid var(--hairline);
position: relative;
}
.story::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(600px 400px at 50% 0%, var(--accent-softer), transparent 70%);
pointer-events: none;
}
.story__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
position: relative;
}
.story__item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
.story__index {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
color: var(--muted);
letter-spacing: 0.05em;
padding: 6px 10px;
border: 1px solid var(--hairline);
border-radius: 999px;
}
.phone--story {
--phone-w: 260px;
margin: 8px auto 16px;
transform: scale(1);
transition: transform 600ms var(--ease);
}
.story__item:hover .phone--story {
transform: scale(1.015) translateY(-4px);
}
.story__title {
font-size: 26px;
font-weight: 800;
letter-spacing: -0.025em;
color: var(--text);
margin-top: 8px;
}
.story__body {
font-size: 16px;
line-height: 1.55;
color: var(--text-2);
}
.story__body .quote {
display: block;
padding: 12px 14px;
margin: 12px 0;
background: var(--surface-2);
border-left: 2px solid var(--accent);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
color: var(--text);
font-style: italic;
font-size: 15px;
}
@media (max-width: 960px) {
.story { padding: 100px 0; }
.story__grid {
grid-template-columns: 1fr;
gap: 80px;
justify-items: center;
}
.story__item {
align-items: center;
text-align: center;
max-width: 460px;
}
.story__index {
margin-bottom: 4px;
}
.phone--story {
--phone-w: 272px;
margin: 0 auto;
}
.story__title {
margin-top: 12px;
}
.story__body {
max-width: 420px;
margin: 0 auto;
}
.story__body .quote {
text-align: left;
margin-left: auto;
margin-right: auto;
max-width: 400px;
}
.moment { padding: 100px 0; }
.billing, .audience, .features, .pricing, .cta { padding: 100px 0; }
.stat { padding: 120px 0; }
.footer { padding: 60px 0 32px; }
}
/* --------------------------------------------------------------------------
Invoice showcase — stacked card carousel
Five invoice images stacked with depth (offset + scale + opacity). The
front card is full-size and fully visible; background cards peek out
with decreasing opacity to show color variety. Clicking/swiping cycles
through the stack. Placed between the Story and Billing Styles sections.
-------------------------------------------------------------------------- */
.invoices {
padding: 160px 0 140px;
border-top: 1px solid var(--hairline);
position: relative;
overflow: hidden;
}
.invoices::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(1000px 600px at 70% 40%, var(--accent-softer), transparent 70%);
opacity: 0.5;
pointer-events: none;
}
/* Split layout: text left, carousel right */
.invoices__grid {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 48px;
align-items: start;
position: relative;
z-index: 1;
}
.invoices__head {
padding-top: 40px;
}
.invoices__head {
max-width: 460px;
}
.invoices__title {
font-size: clamp(34px, 4.8vw, 56px);
font-weight: 900;
line-height: 1.02;
letter-spacing: -0.035em;
color: var(--text);
margin: 14px 0 20px;
}
.invoices__body {
font-size: 17px;
line-height: 1.6;
color: var(--text-2);
margin-bottom: 28px;
}
.invoices__proof {
display: flex;
flex-direction: column;
gap: 10px;
}
.invoices__proof li {
position: relative;
padding-left: 20px;
font-size: 15px;
line-height: 1.5;
color: var(--text-2);
font-weight: 500;
}
.invoices__proof li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 6px;
height: 6px;
background: var(--accent);
border-radius: 999px;
box-shadow: 0 0 10px var(--accent-glow);
}
.inv-carousel {
position: relative;
z-index: 1;
}
/* Stage: holds the stack + provides the height context */
.inv-carousel__stage {
position: relative;
display: flex;
justify-content: center;
padding: 0 80px 44px 0;
-webkit-user-select: none;
user-select: none;
}
/* Stack: the container for all 5 cards. Sized by the front card. */
.inv-carousel__stack {
position: relative;
width: 100%;
max-width: 440px;
aspect-ratio: 800 / 1036;
}
/* Each card: absolutely positioned inside the stack */
.inv-carousel__card {
position: absolute;
inset: 0;
margin: 0;
border-radius: 12px;
overflow: hidden;
box-shadow:
0 2px 0 rgba(255, 255, 255, 0.04) inset,
0 20px 50px -20px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.06);
transition:
transform 520ms var(--ease-spring),
opacity 420ms var(--ease),
box-shadow 420ms var(--ease);
cursor: pointer;
will-change: transform, opacity;
}
.inv-carousel__card img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
pointer-events: none;
border-radius: inherit;
}
/* Stacked positions (0 = front, 4 = back) */
.inv-carousel__card[data-position="0"] {
z-index: 5;
transform: translateX(0) translateY(0) scale(1);
opacity: 1;
}
.inv-carousel__card[data-position="1"] {
z-index: 4;
transform: translateX(28px) translateY(14px) scale(0.95);
opacity: 0.55;
}
.inv-carousel__card[data-position="2"] {
z-index: 3;
transform: translateX(56px) translateY(28px) scale(0.90);
opacity: 0.35;
}
.inv-carousel__card[data-position="3"] {
z-index: 2;
transform: translateX(84px) translateY(42px) scale(0.85);
opacity: 0.2;
}
.inv-carousel__card[data-position="4"] {
z-index: 1;
transform: translateX(112px) translateY(56px) scale(0.80);
opacity: 0.1;
}
/* The card exiting to the left — uses !important to override the
data-position transform while the exit animation plays. */
.inv-carousel__card.is-exiting {
transform: translateX(-110%) rotate(-3deg) scale(0.94) !important;
opacity: 0 !important;
transition:
transform 420ms var(--ease),
opacity 280ms var(--ease) 60ms;
z-index: 6 !important;
pointer-events: none;
}
/* The card entering from back → front needs a snappier spring */
.inv-carousel__card.is-entering {
transition:
transform 440ms var(--ease-spring),
opacity 340ms var(--ease);
}
/* Caption under the front card */
.inv-carousel__caption {
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 10px;
white-space: nowrap;
font-size: 13px;
color: var(--muted);
transition: opacity 320ms var(--ease);
}
.inv-carousel__card:not([data-position="0"]) .inv-carousel__caption {
opacity: 0;
pointer-events: none;
}
.inv-carousel__caption strong {
color: var(--text);
font-weight: 700;
}
.inv-carousel__caption span {
color: var(--muted);
}
.inv-carousel__caption strong::after {
content: "·";
margin-left: 10px;
color: var(--muted-2);
}
/* Controls: arrows + dots — centered under the front card by matching
the stage's right padding (which offsets for the stacked bg cards). */
.inv-carousel__controls {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
padding-top: 24px;
padding-right: 80px;
}
.inv-carousel__arrow {
width: 40px;
height: 40px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--surface) 70%, transparent);
border: 1px solid var(--hairline);
color: var(--muted);
cursor: pointer;
transition:
color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
}
.inv-carousel__arrow:hover {
color: var(--text);
border-color: var(--hairline-strong);
transform: scale(1.06);
}
.inv-carousel__arrow:active {
transform: scale(0.96);
}
.inv-carousel__dots {
display: flex;
align-items: center;
gap: 8px;
}
.inv-carousel__dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--muted-2);
border: 0;
padding: 0;
cursor: pointer;
transition:
background-color var(--dur) var(--ease),
transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.inv-carousel__dot:hover {
background: var(--muted);
transform: scale(1.3);
}
.inv-carousel__dot--active {
background: var(--accent);
box-shadow: 0 0 10px var(--accent-glow);
transform: scale(1.2);
}
/* Light mode: give the invoice cards a soft shadow instead of dark */
[data-theme="light"] .inv-carousel__card {
box-shadow:
0 20px 50px -20px rgba(10, 20, 50, 0.22),
0 0 0 1px rgba(10, 20, 50, 0.08);
}
/* Responsive: stack layout vertically on tablet/mobile */
@media (max-width: 960px) {
.invoices { padding: 100px 0; }
.invoices__grid {
grid-template-columns: 1fr;
gap: 56px;
}
.invoices__head { max-width: none; padding-top: 0; }
.inv-carousel__stage { padding: 0 60px 44px 0; }
.inv-carousel__controls { padding-right: 60px; }
.inv-carousel__stack { max-width: 360px; margin: 0 auto; }
}
@media (max-width: 520px) {
.inv-carousel__stage { padding: 0 40px 44px 0; }
.inv-carousel__controls { padding-right: 40px; }
.inv-carousel__stack { max-width: 280px; }
.inv-carousel__card[data-position="1"] { transform: translateX(14px) translateY(8px) scale(0.96); }
.inv-carousel__card[data-position="2"] { transform: translateX(28px) translateY(16px) scale(0.92); }
.inv-carousel__card[data-position="3"] { transform: translateX(42px) translateY(24px) scale(0.88); }
.inv-carousel__card[data-position="4"] { transform: translateX(56px) translateY(32px) scale(0.84); }
.inv-carousel__caption { font-size: 11px; gap: 6px; }
.inv-carousel__caption strong::after { margin-left: 6px; }
}
/* --------------------------------------------------------------------------
Billing marquee
-------------------------------------------------------------------------- */
.billing {
padding: 140px 0;
border-top: 1px solid var(--hairline);
overflow: hidden;
}
.marquee {
margin-top: 56px;
position: relative;
-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
display: inline-flex;
gap: 20px;
animation: marquee 34s linear infinite;
padding: 8px 0;
white-space: nowrap;
will-change: transform;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.chip {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
font-size: 20px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text);
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 999px;
}
.chip::before {
content: "";
width: 6px;
height: 6px;
background: var(--muted-2);
border-radius: 999px;
}
.chip--accent {
color: var(--text);
border-color: var(--accent-soft);
background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.chip--accent::before {
background: var(--accent);
box-shadow: 0 0 12px var(--accent-glow);
}
/* --------------------------------------------------------------------------
Audience grid
-------------------------------------------------------------------------- */
.audience {
padding: 140px 0;
border-top: 1px solid var(--hairline);
}
.audience__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
margin-bottom: 40px;
}
.audience__card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 28px 22px;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
transition:
transform var(--dur) var(--ease-overshoot),
border-color var(--dur) var(--ease),
background-color var(--dur) var(--ease);
position: relative;
overflow: hidden;
}
.audience__card::after {
content: "";
position: absolute;
inset: -1px;
background: radial-gradient(240px 120px at 20% 0%, var(--accent-softer), transparent 70%);
opacity: 0;
transition: opacity var(--dur) var(--ease);
pointer-events: none;
}
.audience__card:hover {
transform: translateY(-3px);
border-color: var(--hairline-strong);
}
.audience__card:hover::after {
opacity: 1;
}
.audience__icon {
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface-2);
color: var(--accent);
border: 1px solid var(--hairline);
}
.audience__card h3 {
font-size: 17px;
font-weight: 800;
letter-spacing: -0.01em;
}
.audience__card p {
font-size: 13px;
color: var(--muted);
line-height: 1.5;
}
.audience__footnote {
text-align: center;
font-size: 15px;
color: var(--muted);
margin-top: 20px;
}
@media (max-width: 1100px) {
.audience__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.audience__grid {
grid-template-columns: 1fr;
}
}
/* --------------------------------------------------------------------------
Dashboards (Stats + Pipeline)
Split asymmetric layout: copy on the left, two staggered phones on the right.
Echoes the hero's asymmetric feel without repeating it exactly.
-------------------------------------------------------------------------- */
.dashboards {
padding: 160px 0 140px;
border-top: 1px solid var(--hairline);
position: relative;
overflow: hidden;
}
.dashboards__glow {
position: absolute;
width: 1100px;
height: 1100px;
right: -240px;
top: 50%;
transform: translateY(-50%);
background: radial-gradient(closest-side, var(--accent-softer), rgba(10, 132, 255, 0) 70%);
pointer-events: none;
z-index: 0;
filter: blur(40px);
}
.dashboards__grid {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 64px;
align-items: center;
position: relative;
z-index: 1;
}
.dashboards__head {
max-width: 460px;
}
.dashboards__title {
font-size: clamp(34px, 4.8vw, 58px);
font-weight: 900;
line-height: 1.02;
letter-spacing: -0.035em;
color: var(--text);
margin: 14px 0 24px;
}
.dashboards__body {
font-size: 17px;
line-height: 1.6;
color: var(--text-2);
margin-bottom: 32px;
}
.dashboards__body strong {
color: var(--text);
font-weight: 700;
}
.dashboards__points {
display: flex;
flex-direction: column;
gap: 16px;
}
.dashboards__points li {
display: flex;
align-items: flex-start;
gap: 14px;
font-size: 15px;
line-height: 1.55;
color: var(--text-2);
padding-left: 0;
}
.dashboards__point-label {
flex-shrink: 0;
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 10px;
background: color-mix(in srgb, var(--accent) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--accent-2);
margin-top: 1px;
}
.dashboards__point-label--purple {
background: color-mix(in srgb, var(--purple) 14%, transparent);
border-color: color-mix(in srgb, var(--purple) 40%, transparent);
color: var(--purple-2);
}
/* Stage: two staggered phones with a slight 3D feel */
.dashboards__stage {
display: flex;
justify-content: center;
align-items: center;
gap: 28px;
position: relative;
perspective: 2000px;
}
.phone--dash {
--phone-w: 288px;
transform-style: preserve-3d;
transition: transform 800ms var(--ease);
}
.phone--dash .phone__shadow {
inset: auto 10% -24px 10%;
height: 60px;
opacity: 0.9;
}
.phone--dash-a {
transform: translateY(-28px) rotateY(6deg) rotateX(2deg) rotateZ(-1deg);
}
.phone--dash-b {
transform: translateY(28px) rotateY(-6deg) rotateX(2deg) rotateZ(1deg);
}
.phone--dash-a:hover {
transform: translateY(-34px) rotateY(4deg) rotateX(1deg) rotateZ(-0.5deg) scale(1.02);
}
.phone--dash-b:hover {
transform: translateY(22px) rotateY(-4deg) rotateX(1deg) rotateZ(0.5deg) scale(1.02);
}
.phone__caption {
position: absolute;
left: 50%;
bottom: -36px;
transform: translateX(-50%);
padding: 6px 14px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
background: color-mix(in srgb, var(--surface) 60%, transparent);
border: 1px solid var(--hairline);
border-radius: 999px;
backdrop-filter: blur(8px);
white-space: nowrap;
}
@media (max-width: 1140px) {
.dashboards__grid {
gap: 40px;
}
.phone--dash { --phone-w: 256px; }
.dashboards__stage { gap: 18px; }
}
@media (max-width: 960px) {
.dashboards { padding: 110px 0; }
.dashboards__grid {
grid-template-columns: 1fr;
gap: 56px;
align-items: start;
}
.dashboards__head {
max-width: none;
}
.dashboards__stage {
flex-direction: row;
gap: 24px;
}
.phone--dash { --phone-w: 260px; }
}
@media (max-width: 640px) {
.dashboards__stage {
flex-direction: column;
gap: 60px;
}
.phone--dash { --phone-w: 272px; }
.phone--dash-a,
.phone--dash-b {
transform: none;
}
.phone--dash-a:hover,
.phone--dash-b:hover {
transform: scale(1.01);
}
}
/* --------------------------------------------------------------------------
Stat
-------------------------------------------------------------------------- */
.stat {
padding: 180px 0;
border-top: 1px solid var(--hairline);
position: relative;
}
.stat::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(700px 400px at 50% 50%, var(--accent-softer), transparent 70%);
pointer-events: none;
}
.stat__inner {
text-align: center;
position: relative;
max-width: 820px;
}
.stat__big {
font-family: var(--font-mono);
font-size: clamp(120px, 22vw, 280px);
font-weight: 900;
line-height: 0.9;
letter-spacing: -0.05em;
color: var(--text);
font-feature-settings: "tnum";
background: linear-gradient(180deg, var(--text) 0%, var(--muted) 140%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat__unit {
display: inline-block;
font-size: clamp(26px, 3vw, 42px);
font-weight: 800;
color: var(--accent);
margin-top: -20px;
margin-bottom: 32px;
letter-spacing: -0.02em;
}
.stat__body {
font-size: clamp(20px, 2.4vw, 30px);
line-height: 1.4;
font-weight: 600;
color: var(--text);
max-width: 740px;
margin: 0 auto 20px;
letter-spacing: -0.015em;
}
.stat__body em {
font-style: normal;
color: var(--accent);
}
.stat__source {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted-2);
}
/* --------------------------------------------------------------------------
Features grid
-------------------------------------------------------------------------- */
.features {
padding: 140px 0;
border-top: 1px solid var(--hairline);
}
.features__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--hairline);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
overflow: hidden;
}
.feature {
padding: 40px 32px;
background: var(--bg);
display: flex;
flex-direction: column;
gap: 14px;
transition: background-color var(--dur) var(--ease);
}
.feature:hover {
background: var(--surface);
}
.feature__icon {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: var(--accent-softer);
color: var(--accent);
border: 1px solid var(--accent-soft);
}
.feature h3 {
font-size: 18px;
font-weight: 800;
letter-spacing: -0.015em;
color: var(--text);
}
.feature p {
font-size: 14.5px;
line-height: 1.55;
color: var(--muted);
}
@media (max-width: 900px) {
.features__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.features__grid { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
Roadmap — "Already shipping."
Four cards in a 2×2 grid, each with a date pill at the top. Dates
replace the old vague "Coming soon" badges. The integrations card
re-uses the platform logos (monochrome with color on hover). Placed
between the features grid and pricing.
-------------------------------------------------------------------------- */
.roadmap {
padding: 140px 0;
border-top: 1px solid var(--hairline);
position: relative;
}
.roadmap::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(800px 450px at 50% 20%, var(--accent-softer), transparent 70%);
opacity: 0.6;
pointer-events: none;
}
/* Timeline list — vertical line on the left with dot markers.
Each item takes its natural height, so Android (short) and
More-than-production (long) look balanced instead of stretched. */
.roadmap__timeline {
position: relative;
max-width: 640px;
margin: 0 auto;
padding: 0 0 0 40px;
z-index: 1;
}
/* The vertical connecting line */
.roadmap__timeline::before {
content: "";
position: absolute;
left: 5px;
top: 16px;
bottom: 16px;
width: 2px;
background: linear-gradient(
to bottom,
var(--accent),
color-mix(in srgb, var(--accent) 40%, var(--hairline)) 50%,
var(--hairline-soft)
);
border-radius: 999px;
}
.roadmap__item {
position: relative;
padding: 0 0 36px;
}
.roadmap__item:last-child {
padding-bottom: 0;
}
/* Dot on the timeline */
.roadmap__dot {
position: absolute;
left: -40px;
top: 8px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--accent);
border: 2.5px solid var(--bg);
box-shadow:
0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent),
0 0 14px var(--accent-glow);
}
.roadmap__dot--muted {
background: var(--muted-2);
box-shadow:
0 0 0 2px color-mix(in srgb, var(--muted) 20%, transparent),
none;
}
/* Card body */
.roadmap__content {
padding: 24px 28px;
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--surface) 65%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition:
border-color var(--dur) var(--ease),
background-color var(--dur) var(--ease);
}
.roadmap__item:hover .roadmap__content {
border-color: color-mix(in srgb, var(--accent) 30%, var(--hairline));
background: color-mix(in srgb, var(--accent) 3%, var(--surface));
}
.roadmap__content--muted {
border-style: dashed;
}
/* Date pill */
.roadmap__date {
display: inline-flex;
padding: 4px 11px;
margin-bottom: 14px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent-2);
background: color-mix(in srgb, var(--accent) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
border-radius: 999px;
}
.roadmap__date--muted {
color: var(--muted);
background: color-mix(in srgb, var(--muted) 8%, transparent);
border-color: var(--hairline);
}
/* Title row: icon + heading inline */
.roadmap__head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.roadmap__icon {
width: 38px;
height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: var(--accent-softer);
color: var(--accent);
border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
flex-shrink: 0;
}
.roadmap__icon--muted {
background: color-mix(in srgb, var(--muted) 10%, transparent);
color: var(--muted);
border-color: var(--hairline);
}
/* Platform logos */
.roadmap__logos {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.roadmap__logo {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
filter: grayscale(1) brightness(0.55);
opacity: 0.65;
transition: filter 360ms var(--ease), opacity 360ms var(--ease);
}
.roadmap__item:hover .roadmap__logo {
filter: grayscale(0) brightness(1);
opacity: 1;
}
[data-theme="light"] .roadmap__logo {
filter: grayscale(1) brightness(0.75);
opacity: 0.55;
}
[data-theme="light"] .roadmap__item:hover .roadmap__logo {
filter: grayscale(0) brightness(1);
opacity: 1;
}
/* Platform logos (Apple, Android) — inline SVGs using currentColor so
monochrome treatment is just a color change, no CSS filter needed. */
.roadmap__platform-logo {
width: 38px;
height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: var(--accent-softer);
color: var(--muted);
border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
flex-shrink: 0;
transition: color 360ms var(--ease), background-color 360ms var(--ease);
}
.roadmap__item:hover .roadmap__platform-logo {
color: var(--text);
background: color-mix(in srgb, var(--text) 8%, var(--accent-softer));
}
.roadmap__item:hover .roadmap__platform-logo--android {
color: #3DDC84;
background: color-mix(in srgb, #3DDC84 10%, var(--accent-softer));
}
.roadmap__name {
font-size: 20px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text);
margin: 0;
}
.roadmap__desc {
font-size: 14px;
line-height: 1.55;
color: var(--muted);
margin: 0;
}
@media (max-width: 860px) {
.roadmap { padding: 100px 0; }
.roadmap__timeline {
max-width: none;
padding-left: 36px;
}
.roadmap__dot { left: -36px; }
.roadmap__content { padding: 20px 22px; }
.roadmap__item { padding-bottom: 28px; }
}
/* --------------------------------------------------------------------------
Pricing
Two Pro cards side-by-side (yearly featured, monthly with trial) and a
"What Pro unlocks" feature grid below. No more freemium — the app is
free to download, Pro unlocks at the moment you send an invoice.
-------------------------------------------------------------------------- */
.pricing {
padding: 140px 0;
border-top: 1px solid var(--hairline);
position: relative;
overflow: hidden;
}
.pricing__glow {
position: absolute;
width: 1100px;
height: 900px;
left: 50%;
top: 30%;
transform: translateX(-50%);
background: radial-gradient(closest-side, var(--accent-softer), transparent 70%);
pointer-events: none;
z-index: 0;
filter: blur(30px);
}
.pricing > .container { position: relative; z-index: 1; }
.pricing .section-sub {
margin-top: 18px;
max-width: 640px;
}
.pricing__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 880px;
margin: 72px auto 0;
}
.plan {
position: relative;
padding: 40px 36px 32px;
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--surface) 85%, transparent);
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
gap: 28px;
transition: transform var(--dur) var(--ease-overshoot), border-color var(--dur) var(--ease);
}
.plan:hover {
transform: translateY(-2px);
border-color: var(--hairline-strong);
}
.plan--featured {
background:
radial-gradient(700px 300px at 50% -20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
color-mix(in srgb, var(--surface) 92%, transparent);
border-color: color-mix(in srgb, var(--accent) 42%, var(--hairline));
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 30px 70px -30px var(--accent-glow);
}
.plan--featured:hover {
border-color: color-mix(in srgb, var(--accent) 60%, var(--hairline));
}
.plan__badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text);
background: color-mix(in srgb, var(--surface-2) 95%, transparent);
border: 1px solid var(--hairline-strong);
border-radius: 999px;
white-space: nowrap;
backdrop-filter: blur(10px);
}
.plan__badge--accent {
color: #FFFFFF;
background: var(--accent);
border-color: var(--accent);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.24) inset,
0 10px 28px -10px var(--accent-glow);
}
.plan__badge svg { flex-shrink: 0; }
.plan__head {
display: flex;
flex-direction: column;
gap: 4px;
}
.plan__name {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
margin: 0;
}
.plan__cadence {
font-size: 28px;
font-weight: 900;
letter-spacing: -0.025em;
color: var(--text);
margin: 0 0 8px;
line-height: 1;
}
.plan--featured .plan__cadence {
color: var(--accent-2);
}
.plan__price {
font-family: var(--font-mono);
font-size: 62px;
font-weight: 900;
line-height: 1;
letter-spacing: -0.04em;
color: var(--text);
display: inline-flex;
align-items: baseline;
margin-top: 6px;
font-feature-settings: "tnum";
}
.plan__currency {
font-size: 28px;
margin-right: 2px;
color: var(--muted);
font-weight: 800;
}
.plan__cents {
font-size: 28px;
color: var(--muted);
font-weight: 800;
}
.plan__period {
font-size: 15px;
font-weight: 600;
color: var(--muted);
margin-left: 8px;
letter-spacing: 0;
}
.plan__sub {
margin-top: 10px;
font-size: 14px;
line-height: 1.5;
color: var(--muted);
}
/* Founders pricing — struck-out reference price under the main number, with
a small tag pill that reads "Founders price". Only used on the featured
yearly card for now. */
.plan__price-was {
margin: 10px 0 0;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font-size: 13.5px;
line-height: 1.4;
color: var(--muted);
letter-spacing: -0.005em;
}
.plan__price-was s {
font-family: var(--font-mono);
font-feature-settings: "tnum";
text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent);
text-decoration-thickness: 1.5px;
}
.plan__price-was-tag {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
padding: 3px 8px;
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 12%, transparent);
white-space: nowrap;
}
/* Pricing context anchor — a single subtle line framing the cards against
the category average. Keeps the price from reading as a number in a
vacuum. Sits between the plan cards and the "Pro unlocks" grid. */
.pricing__anchor {
max-width: 520px;
margin: 36px auto 0;
text-align: center;
font-size: 13px;
line-height: 1.55;
color: var(--muted);
letter-spacing: -0.005em;
}
.pricing__anchor-range {
color: var(--text-2);
font-weight: 600;
white-space: nowrap;
}
/* What Pro unlocks (feature grid below the two cards) */
.pricing__unlocks {
max-width: 880px;
margin: 56px auto 0;
}
.pricing__unlocks-label {
text-align: center;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 28px;
}
.pricing__unlocks-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px 32px;
}
.pricing__unlocks-grid li {
display: flex;
align-items: flex-start;
gap: 14px;
}
.pricing__unlocks-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: var(--accent-softer);
color: var(--accent);
border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.pricing__unlocks-grid h3 {
font-size: 15px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--text);
margin: 2px 0 4px;
}
.pricing__unlocks-grid p {
font-size: 13.5px;
line-height: 1.5;
color: var(--muted);
}
.pricing__note {
margin-top: 48px;
text-align: center;
font-size: 13px;
line-height: 1.6;
color: var(--muted);
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 860px) {
.pricing { padding: 110px 0; }
.pricing__grid {
grid-template-columns: 1fr;
gap: 28px;
max-width: 460px;
margin-top: 64px;
}
.pricing__unlocks {
margin-top: 56px;
}
.pricing__unlocks-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.plan {
padding: 36px 28px 28px;
}
.plan__price { font-size: 54px; }
.plan__currency, .plan__cents { font-size: 24px; }
.plan__cadence { font-size: 24px; }
}
/* --------------------------------------------------------------------------
Founder note
A quiet editorial pause between Pricing and the closing CTA. Not a card,
not a callout — just a direct message from the founder, centered in a
comfortable reading width. The signature line has a single blue accent
dot to tie it to the rest of the page's motif.
-------------------------------------------------------------------------- */
.founder {
padding: 140px 0 120px;
border-top: 1px solid var(--hairline);
position: relative;
overflow: hidden;
}
.founder::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(640px 360px at 50% 50%, var(--accent-softer), transparent 70%);
opacity: 0.55;
pointer-events: none;
}
.founder__inner {
max-width: 760px;
text-align: center;
position: relative;
z-index: 1;
}
.founder .eyebrow {
display: inline-block;
margin: 0 0 32px;
padding: 6px 14px;
background: color-mix(in srgb, var(--surface) 60%, transparent);
border: 1px solid var(--hairline);
border-radius: 999px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.founder__quote {
margin: 0 0 36px;
padding: 0;
border: 0;
}
.founder__quote p {
margin: 0;
font-size: clamp(20px, 2.3vw, 28px);
line-height: 1.55;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--text);
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
.founder__ellipsis {
display: inline;
letter-spacing: 0.02em;
color: var(--muted);
}
.founder__signature {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 14px;
color: var(--muted);
font-weight: 500;
letter-spacing: -0.005em;
}
.founder__signature-name {
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
}
.founder__signature-dot {
width: 5px;
height: 5px;
border-radius: 999px;
background: var(--accent);
box-shadow: 0 0 10px var(--accent-glow);
flex-shrink: 0;
}
.founder__signature-role {
font-weight: 500;
}
@media (max-width: 720px) {
.founder { padding: 100px 0 88px; }
.founder__quote { margin-bottom: 28px; }
.founder__signature {
flex-wrap: wrap;
justify-content: center;
gap: 8px 12px;
}
}
/* --------------------------------------------------------------------------
Closing CTA
-------------------------------------------------------------------------- */
.cta {
position: relative;
padding: 180px 0 160px;
border-top: 1px solid var(--hairline);
overflow: hidden;
text-align: center;
}
.cta__glow {
position: absolute;
width: 1400px;
height: 1400px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(closest-side, var(--accent-softer), transparent 70%);
pointer-events: none;
z-index: 0;
}
.cta__inner {
position: relative;
z-index: 2;
}
.cta__mark {
display: inline-flex;
align-items: baseline;
font-size: clamp(48px, 7vw, 92px);
font-weight: 900;
letter-spacing: -0.04em;
color: var(--text);
margin-bottom: 24px;
}
.wordmark__dot--xl {
width: 0.22em;
height: 0.22em;
margin-left: 0.04em;
box-shadow:
0 0 40px var(--accent-glow),
0 0 120px var(--accent-softer);
animation: breathe 3.6s var(--ease) infinite;
}
.cta__title {
font-size: clamp(32px, 4.6vw, 56px);
font-weight: 800;
color: var(--text-2);
margin-bottom: 16px;
letter-spacing: -0.025em;
}
.cta__sub {
font-size: 17px;
color: var(--muted);
margin-bottom: 40px;
}
.cta__buttons {
display: flex;
justify-content: center;
gap: 12px;
}
/* --------------------------------------------------------------------------
Footer
-------------------------------------------------------------------------- */
.footer {
padding: 80px 0 40px;
border-top: 1px solid var(--hairline);
background: var(--bg-2);
}
.footer__inner {
display: grid;
grid-template-columns: 1.3fr 2fr;
gap: 60px;
padding-bottom: 60px;
border-bottom: 1px solid var(--hairline);
}
.footer__desc {
margin-top: 12px;
color: var(--muted);
font-size: 14px;
max-width: 340px;
}
.footer__nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.footer__nav h4 {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted-2);
margin-bottom: 14px;
}
.footer__nav a {
display: block;
padding: 6px 0;
font-size: 14px;
color: var(--text-2);
transition: color var(--dur-fast) var(--ease);
}
.footer__nav a:hover {
color: var(--accent);
}
.footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 28px;
font-size: 13px;
color: var(--muted);
}
.footer__mark {
display: inline-flex;
align-items: center;
gap: 4px;
}
@media (max-width: 860px) {
.footer__inner { grid-template-columns: 1fr; gap: 40px; }
.footer__nav { grid-template-columns: repeat(3, 1fr); }
.footer__bottom { flex-direction: column; gap: 12px; text-align: center; }
}
@media (max-width: 520px) {
.footer__nav { grid-template-columns: 1fr 1fr; gap: 24px; }
}
/* ==========================================================================
Preview gate (soft launch)
Full-screen overlay shown until the visitor enters the preview password.
The whole block can be deleted when the app launches publicly — search
for "preview-gate" / "is-gated" to find every reference.
========================================================================== */
#preview-gate {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
background:
radial-gradient(900px 600px at 50% 30%, var(--accent-softer), transparent 70%),
var(--bg);
-webkit-font-smoothing: antialiased;
font-family: var(--font-sans);
color: #F5F6F8;
animation: gate-fade-in 600ms var(--ease) both;
}
@keyframes gate-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.gate__inner {
width: 100%;
max-width: 440px;
text-align: center;
}
.gate__mark {
display: inline-flex;
align-items: baseline;
margin-bottom: 32px;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
color: #F5F6F8;
}
.gate__mark-text { display: inline-block; }
.gate__mark-dot {
display: inline-block;
width: 9px;
height: 9px;
margin-left: 3px;
background: #0A84FF;
border-radius: 999px;
box-shadow: 0 0 22px rgba(10, 132, 255, 0.32);
}
.gate__title {
font-size: clamp(28px, 4vw, 36px);
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.025em;
margin: 0 0 14px;
color: #F5F6F8;
}
.gate__title-dot {
display: inline-block;
width: 0.18em;
height: 0.18em;
margin-left: 0.04em;
background: #0A84FF;
border-radius: 999px;
transform: translateY(0.04em);
box-shadow: 0 0 22px rgba(10, 132, 255, 0.32);
}
.gate__body {
font-size: 15px;
line-height: 1.55;
color: #A0A3AD;
margin: 0 auto 28px;
max-width: 360px;
}
.gate__form {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.gate__form input {
flex: 1;
min-width: 0;
height: 48px;
padding: 0 18px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 999px;
color: #F5F6F8;
font: inherit;
font-size: 15px;
letter-spacing: -0.005em;
transition: border-color 180ms ease, background-color 180ms ease;
}
.gate__form input::placeholder { color: #6E7179; }
.gate__form input:focus {
outline: none;
border-color: rgba(10, 132, 255, 0.55);
background: rgba(10, 132, 255, 0.08);
}
.gate__submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 48px;
padding: 0 20px;
background: linear-gradient(180deg, #2196FF, #0A84FF 60%, #0672EF);
color: #FFFFFF;
font-weight: 700;
font-size: 15px;
letter-spacing: -0.005em;
border: 0;
border-radius: 999px;
cursor: pointer;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.28),
0 12px 26px -10px rgba(10, 132, 255, 0.55);
transition: transform 180ms ease;
}
.gate__submit:hover { transform: translateY(-1px); }
.gate__submit:active { transform: translateY(0); }
.gate__error {
margin: 12px 0 0;
font-size: 13px;
color: #FF6B62;
font-weight: 500;
}
.gate__footnote {
margin: 28px 0 0;
font-size: 13px;
color: #6E7179;
}
.gate__footnote a {
color: #A0A3AD;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.18);
text-underline-offset: 3px;
}
.gate__footnote a:hover { color: #F5F6F8; }
@media (max-width: 480px) {
#preview-gate { padding: 20px; }
.gate__form { flex-direction: column; gap: 10px; }
.gate__submit { width: 100%; }
}
/* ==========================================================================
Beta signup modal
Opens from any [data-beta-open] button. A dialog on top of a blurred
backdrop, with a form state and a success state swapped by JS.
Matches the brand via the existing token system, so it adapts to both
dark and light themes automatically.
========================================================================== */
.beta-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
transition: opacity 280ms var(--ease);
pointer-events: none;
font-family: var(--font-sans);
}
.beta-modal[aria-hidden="false"] {
opacity: 1;
pointer-events: auto;
}
.beta-modal[hidden] { display: none; }
.beta-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(5, 5, 8, 0.72);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
}
.beta-modal__card {
position: relative;
width: 100%;
max-width: 460px;
max-height: calc(100vh - 48px);
overflow-y: auto;
padding: 40px 36px 32px;
background:
radial-gradient(700px 340px at 50% -80px, var(--accent-softer), transparent 70%),
var(--surface);
border: 1px solid var(--hairline-strong);
border-radius: 24px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 40px 90px -20px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(10, 132, 255, 0.06);
transform: translateY(16px) scale(0.98);
transition: transform 360ms var(--ease-spring);
}
.beta-modal[aria-hidden="false"] .beta-modal__card {
transform: translateY(0) scale(1);
}
.beta-modal__close {
position: absolute;
top: 14px;
right: 14px;
width: 34px;
height: 34px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--muted);
background: color-mix(in srgb, var(--surface-2) 70%, transparent);
border: 1px solid var(--hairline);
transition:
color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
cursor: pointer;
}
.beta-modal__close:hover {
color: var(--text);
border-color: var(--hairline-strong);
transform: scale(1.05);
}
/* Wordmark at the top of the card */
.beta-modal__mark {
display: inline-flex;
align-items: baseline;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 22px;
line-height: 1;
}
.beta-modal__mark-text { display: inline-block; }
.beta-modal__mark-dot {
display: inline-block;
width: 7px;
height: 7px;
margin-left: 2px;
background: var(--accent);
border-radius: 999px;
box-shadow: 0 0 18px var(--accent-glow);
transform: translateY(1px);
}
.beta-modal__title {
font-size: clamp(24px, 3.4vw, 32px);
font-weight: 900;
line-height: 1.08;
letter-spacing: -0.025em;
color: var(--text);
margin: 0 0 12px;
}
.beta-modal__title-dot {
display: inline-block;
width: 0.2em;
height: 0.2em;
margin-left: 0.04em;
background: var(--accent);
border-radius: 999px;
transform: translateY(0.04em);
box-shadow: 0 0 20px var(--accent-glow);
}
.beta-modal__body {
font-size: 14.5px;
line-height: 1.55;
color: var(--text-2);
margin: 0 0 24px;
}
/* -------- Form -------- */
.beta-modal__form {
display: flex;
flex-direction: column;
gap: 14px;
}
.beta-modal__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.beta-modal__label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.beta-modal__form input[type="text"],
.beta-modal__form input[type="email"],
.beta-modal__form select {
width: 100%;
height: 44px;
padding: 0 14px;
background: color-mix(in srgb, var(--surface-2) 85%, transparent);
border: 1px solid var(--hairline-strong);
border-radius: 12px;
color: var(--text);
font: inherit;
font-size: 14px;
letter-spacing: -0.005em;
transition:
border-color var(--dur-fast) var(--ease),
background-color var(--dur-fast) var(--ease);
}
.beta-modal__form input[type="text"]::placeholder,
.beta-modal__form input[type="email"]::placeholder {
color: var(--muted-2);
}
.beta-modal__form input[type="text"]:focus,
.beta-modal__form input[type="email"]:focus,
.beta-modal__form select:focus {
outline: none;
border-color: color-mix(in srgb, var(--accent) 60%, var(--hairline));
background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.beta-modal__form input:invalid:not(:placeholder-shown) {
border-color: color-mix(in srgb, var(--danger) 40%, var(--hairline));
}
.beta-modal__select-wrap {
position: relative;
}
.beta-modal__form select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 36px;
cursor: pointer;
}
.beta-modal__select-chev {
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-50%);
color: var(--muted);
pointer-events: none;
}
/* Optional "(optional)" hint next to a field label */
.beta-modal__label-optional {
margin-left: 5px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--muted-2);
}
/* Conditional "Tell us more" field — hidden until the role dropdown is set
to one of the "Other" values, then slides in cleanly. */
.beta-modal__field--detail {
display: none;
}
.beta-modal__field--detail[data-shown="true"] {
display: flex;
animation: beta-field-in 280ms var(--ease) both;
}
@keyframes beta-field-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.beta-modal__submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 50px;
margin-top: 8px;
padding: 0 22px;
background: linear-gradient(180deg, #2196FF, #0A84FF 60%, #0672EF);
color: #FFFFFF;
font-weight: 700;
font-size: 15px;
letter-spacing: -0.005em;
border: 0;
border-radius: 999px;
cursor: pointer;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.28),
0 12px 28px -12px var(--accent-glow);
transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.beta-modal__submit:hover { transform: translateY(-1px); }
.beta-modal__submit:active { transform: translateY(0); }
.beta-modal__submit:disabled {
opacity: 0.75;
cursor: wait;
transform: none;
}
.beta-modal__submit-spinner { display: none; animation: beta-spin 900ms linear infinite; }
.beta-modal__submit.is-loading .beta-modal__submit-label,
.beta-modal__submit.is-loading .beta-modal__submit-arrow { display: none; }
.beta-modal__submit.is-loading .beta-modal__submit-spinner { display: inline-block; }
@keyframes beta-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.beta-modal__error {
margin: 12px 0 0;
padding: 10px 14px;
font-size: 13px;
line-height: 1.5;
color: var(--text-2);
background: color-mix(in srgb, var(--danger) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent);
border-radius: 10px;
}
.beta-modal__error a {
color: var(--text);
text-decoration: underline;
text-underline-offset: 2px;
}
.beta-modal__social-proof {
margin: 16px 0 0;
padding: 10px 14px;
font-size: 12.5px;
line-height: 1.45;
color: var(--text-2);
text-align: center;
background: color-mix(in srgb, var(--accent) 6%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
border-radius: 10px;
}
.beta-modal__footnote {
margin: 10px 0 0;
font-size: 12px;
color: var(--muted-2);
text-align: center;
}
/* -------- Success state -------- */
.beta-modal__state--success {
text-align: center;
}
.beta-modal__check {
width: 64px;
height: 64px;
margin: 4px auto 24px;
border-radius: 999px;
background: color-mix(in srgb, var(--success) 18%, transparent);
border: 1.5px solid color-mix(in srgb, var(--success) 55%, transparent);
color: var(--success);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 36px color-mix(in srgb, var(--success) 28%, transparent);
}
.beta-modal__state--success .beta-modal__title-dot {
background: var(--success);
box-shadow: 0 0 20px color-mix(in srgb, var(--success) 45%, transparent);
}
.beta-modal__close-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
margin-top: 28px;
padding: 0 28px;
background: transparent;
color: var(--text);
font-weight: 600;
font-size: 14px;
border: 1px solid var(--hairline-strong);
border-radius: 999px;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.beta-modal__close-btn:hover {
border-color: var(--text-2);
background: color-mix(in srgb, var(--text) 6%, transparent);
}
/* Lock body scroll while the modal is open */
body.beta-modal-open {
overflow: hidden;
}
/* -------- Responsive -------- */
@media (max-width: 520px) {
.beta-modal { padding: 16px; }
.beta-modal__card {
padding: 32px 24px 24px;
border-radius: 20px;
max-height: calc(100vh - 32px);
}
.beta-modal__close {
top: 10px;
right: 10px;
width: 32px;
height: 32px;
}
}
/* -------- Beta incentive badge above pricing cards -------- */
.pricing__beta-badge {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 24px;
padding: 8px 16px;
background: color-mix(in srgb, var(--accent) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
border-radius: 999px;
font-size: 13.5px;
font-weight: 500;
color: var(--text-2);
letter-spacing: -0.005em;
}
.pricing__beta-badge svg {
flex-shrink: 0;
color: var(--accent);
}
.pricing__beta-badge strong {
font-weight: 700;
color: var(--text);
}
/* ==========================================================================
Support page (/support.html)
Append-only — all rules scoped under .support-page so they don't leak
into index.html. Reuses existing tokens (--surface, --hairline, --accent,
--radius-lg, --dur, --ease) for visual continuity.
========================================================================== */
/* ----- Active-state styling for the new "Support" nav link ----- */
.support-page .nav__links a[aria-current="page"] {
color: var(--text);
}
/* ----- Hero ----- */
.support-page__hero {
position: relative;
padding: 160px 0 72px;
border-bottom: 1px solid var(--hairline);
overflow: hidden;
}
.support-page__hero::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(700px 380px at 50% 0%, var(--accent-softer), transparent 70%);
opacity: 0.6;
pointer-events: none;
}
.support-page__hero > .container {
position: relative;
z-index: 1;
}
.support-page__hero .section-head {
margin-bottom: 0;
}
/* ----- Generic support-page section ----- */
.support-page__section {
padding: 96px 0;
border-top: 1px solid var(--hairline);
}
.support-page__section:first-of-type {
border-top: 0;
}
.support-page__section .section-head {
margin-bottom: 36px;
max-width: 760px;
}
.support-page__section .section-title {
font-size: clamp(28px, 4vw, 44px);
}
.support-page__section .section-sub a {
color: var(--accent);
transition: color var(--dur-fast) var(--ease);
}
.support-page__section .section-sub a:hover {
color: var(--accent-2);
text-decoration: underline;
}
/* ----- Card / panel ----- */
.support-card {
display: flex;
align-items: flex-start;
gap: 22px;
padding: 28px 32px;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
transition:
border-color var(--dur) var(--ease),
background-color var(--dur) var(--ease);
}
.support-card:hover {
border-color: var(--hairline-strong);
}
.support-card--block {
display: block;
}
.support-card__icon {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
background: var(--accent-softer);
color: var(--accent);
border: 1px solid var(--accent-soft);
}
.support-card__body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.support-card__label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted-2);
margin: 0;
}
.support-card__email {
font-size: 18px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
text-decoration: none;
word-break: break-word;
transition: color var(--dur-fast) var(--ease);
}
.support-card__email:hover {
color: var(--accent);
}
.support-card__hint {
margin: 4px 0 0;
font-size: 13.5px;
color: var(--muted);
}
.support-card--block p,
.support-card--block ol {
font-size: 16px;
line-height: 1.65;
color: var(--text-2);
}
.support-card--block p {
margin: 0 0 14px;
}
.support-card--block p:last-child {
margin-bottom: 0;
}
.support-card__steps {
list-style: decimal;
padding-left: 22px;
margin: 4px 0 18px;
}
.support-card__steps li {
padding: 4px 0;
color: var(--text-2);
}
.support-card--block a {
color: var(--accent);
word-break: break-word;
transition: color var(--dur-fast) var(--ease);
}
.support-card--block a:hover {
color: var(--accent-2);
text-decoration: underline;
}
/* ----- FAQ list (/) ----- */
.support-faq__list {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
overflow: hidden;
}
.support-faq__list details {
border-bottom: 1px solid var(--hairline);
transition: background-color var(--dur-fast) var(--ease);
}
.support-faq__list details:last-child {
border-bottom: 0;
}
.support-faq__list details[open] {
background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.support-faq__list summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
padding: 22px 28px;
font-size: 16.5px;
font-weight: 600;
color: var(--text);
cursor: pointer;
list-style: none;
letter-spacing: -0.01em;
transition: color var(--dur-fast) var(--ease);
}
.support-faq__list summary::-webkit-details-marker {
display: none;
}
.support-faq__list summary:hover {
color: var(--accent);
}
.support-faq__list summary::after {
content: "";
flex-shrink: 0;
width: 9px;
height: 9px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform var(--dur) var(--ease);
}
.support-faq__list details[open] summary::after {
transform: rotate(-135deg);
}
.support-faq__list details > p {
padding: 0 28px 24px;
font-size: 15.5px;
line-height: 1.65;
color: var(--text-2);
margin: 0;
}
.support-faq__list details > p a {
color: var(--accent);
transition: color var(--dur-fast) var(--ease);
}
.support-faq__list details > p a:hover {
color: var(--accent-2);
text-decoration: underline;
}
/* ----- Responsive ----- */
@media (max-width: 720px) {
.support-page__hero { padding: 130px 0 56px; }
.support-page__section { padding: 64px 0; }
.support-card { padding: 22px 22px; gap: 16px; }
.support-card__email { font-size: 16px; }
.support-faq__list summary { padding: 18px 20px; font-size: 15.5px; }
.support-faq__list details > p { padding: 0 20px 20px; }
}