/* tokens.css is linked separately in the HTML (parallel load) so the
custom properties below resolve without a serial @import chain. */
/* Self-hosted display face (Space Grotesk v22, latin subset, variable 500-700).
Vendored into public/assets/fonts so the site makes no runtime call to Google
Fonts — keeps it standalone and consistent with the cookieless posture. Only
headings use it (--font-display); body/UI stays on system Inter.
font-display: swap so headings paint immediately in the fallback. */
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("/assets/fonts/space-grotesk-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
* {
box-sizing: border-box;
}
:root {
/* Display face for headings (Space Grotesk, loaded in BaseLayout head);
falls back to the body sans so headings never go unstyled if the web
font is blocked. Body / UI stays on Inter via --project-font-sans. */
--font-display: "Space Grotesk", var(--project-font-sans);
/* Fluid hero display: scales with the viewport instead of three fixed
breakpoints, so the headline owns the fold on wide screens (S3). */
--lead-type-display: clamp(2.25rem, 1.3rem + 4vw, 4.5rem);
--lead-type-section: 2.25rem;
--lead-type-subheadline: 1.125rem;
--lead-type-body-large: 1.0625rem;
--lead-type-card-title: 1.2rem;
--lead-type-panel-title: 1.45rem;
--lead-type-form-title: 1.6rem;
/* Pipeline-bar hues (S2). The hero's four bars are labelled teal/cyan/blue/
amber but previously all rendered as the one red accent. These reference
the real colour primitives (vendored in tokens.css) so the dataviz is
honestly multi-hue. Brand action colour stays red/blue — this is scoped
to the decorative hero chart only. */
--lead-bar-teal: linear-gradient(180deg, var(--color-teal-300), var(--color-teal-500));
--lead-bar-cyan: linear-gradient(180deg, var(--color-cyan-300), var(--color-cyan-600));
--lead-bar-blue: linear-gradient(180deg, var(--color-blue-300), var(--color-blue-600));
--lead-bar-amber: linear-gradient(180deg, var(--color-amber-200), var(--color-amber-500));
}
@media (max-width: 64rem) {
:root {
--lead-type-section: 2rem;
--lead-type-subheadline: 1.0625rem;
}
}
@media (max-width: 40rem) {
:root {
--lead-type-section: 1.7rem;
--lead-type-subheadline: 1rem;
--lead-type-body-large: 1rem;
--lead-type-panel-title: 1.28rem;
--lead-type-form-title: 1.4rem;
}
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--project-font-sans);
font-size: var(--typography-font-size-base);
line-height: var(--typography-line-height-base);
color: var(--lead-site-text);
min-height: 100vh;
background: linear-gradient(180deg, var(--lead-site-bg-start) 0%, var(--lead-site-bg) 100%);
}
/* Text-selection highlight: brand accent + its readable foreground, so the
default browser blue gives way to the tokenized palette (red in dark, blue
in light). Mirrors the .skip-link accent pair. */
::selection {
background: var(--lead-site-teal);
color: var(--lead-site-primary-text);
}
::-moz-selection {
background: var(--lead-site-teal);
color: var(--lead-site-primary-text);
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 40;
padding: var(--space-3) var(--space-4);
background: var(--lead-site-teal);
color: var(--lead-site-primary-text);
border-radius: 0 0 var(--corner-radius-md) 0;
font-weight: var(--project-weight-strong);
}
.skip-link:focus {
left: 0;
}
.page-width {
width: min(var(--project-layout-max), calc(100% - var(--project-layout-gutter)));
margin: 0 auto;
}
/* --- Site header / nav --- */
/*
* Frosted-glass header. The bar is a translucent, saturated backdrop blur so the
* hero colours bleed through as a soft frosted wash (rather than the old flat,
* near-opaque bar where the blur never read). It starts light and "materialises"
* into a denser, lifted bar once the page scrolls (the .is-scrolled state is
* toggled by app.js). All colours derive from the existing theme tokens, so it
* stays correct in both light (white / blue) and dark (black / red) palettes.
*/
.site-header {
position: sticky;
top: 0;
z-index: 30;
--header-surface: color-mix(in srgb, var(--lead-site-bg) 58%, transparent);
--header-blur: 16px;
--header-border: color-mix(in srgb, var(--lead-site-border) 80%, transparent);
--header-shadow: 0 0 0 0 transparent;
background: var(--header-surface);
-webkit-backdrop-filter: saturate(180%) blur(var(--header-blur));
backdrop-filter: saturate(180%) blur(var(--header-blur));
border-bottom: 1px solid var(--header-border);
box-shadow: var(--header-shadow);
transition: background 0.25s ease, box-shadow 0.25s ease,
border-color 0.25s ease, -webkit-backdrop-filter 0.25s ease,
backdrop-filter 0.25s ease;
}
/* Top-edge glass sheen — a hairline highlight that reads on the dark palette
and stays invisibly harmless on the light one. */
.site-header::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(
90deg,
transparent,
color-mix(in srgb, var(--color-white) 50%, transparent),
transparent
);
opacity: 0.55;
pointer-events: none;
}
.site-header.is-scrolled {
--header-surface: color-mix(in srgb, var(--lead-site-bg) 80%, transparent);
--header-blur: 22px;
--header-border: color-mix(in srgb, var(--lead-site-teal) 22%, var(--lead-site-border));
--header-shadow: 0 var(--space-3) var(--space-8)
color-mix(in srgb, var(--lead-site-shadow) 72%, transparent);
}
.site-header .page-width {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) 0;
transition: padding 0.25s ease;
}
.site-header.is-scrolled .page-width {
padding: calc(var(--space-2) + 0.125rem) 0;
}
.brand {
display: inline-flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
color: var(--lead-site-text);
font-weight: var(--project-weight-strong);
font-size: 1.05rem;
letter-spacing: 0;
transition: transform 0.2s ease;
}
.brand:hover {
transform: translateY(-1px);
}
.brand img {
width: 2.25rem;
height: 2.25rem;
border-radius: var(--corner-radius-md);
display: block;
/* Faint accent ring on the wayfinding mark; blooms into a glow on hover. */
box-shadow: 0 0 0 1px color-mix(in srgb, var(--lead-site-teal) 16%, transparent);
transition: box-shadow 0.2s ease;
}
.brand:hover img {
box-shadow:
0 0 0 1px color-mix(in srgb, var(--lead-site-teal) 38%, transparent),
0 6px 18px color-mix(in srgb, var(--lead-site-glow-teal) 100%, transparent);
}
.site-nav {
display: flex;
align-items: center;
gap: var(--space-2);
}
/* Primary destination links sit left of the theme toggle + Login button.
They collapse below the tablet breakpoint, where the footer carries
wayfinding (no hamburger JS to maintain). */
.site-nav-links {
display: flex;
align-items: center;
gap: var(--space-1);
margin-right: var(--space-2);
}
@media (max-width: 52rem) {
.site-nav-links {
display: none;
}
}
/* Text links read as quiet pills with a frosted hover chip. */
.site-nav .nav-link {
position: relative;
color: var(--lead-site-muted);
text-decoration: none;
font-size: var(--typography-font-size-sm);
font-weight: var(--typography-font-weight-medium);
padding: var(--space-2) var(--space-3);
border-radius: var(--corner-radius-pill);
transition: color 0.15s ease, background 0.15s ease;
}
.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible {
color: var(--lead-site-text);
background: color-mix(in srgb, var(--lead-site-text) 7%, transparent);
}
/* Canonical "you are here" indicator: an accent dot under the current page. */
.site-nav .nav-link[aria-current="page"] {
color: var(--lead-site-text);
}
.site-nav .nav-link[aria-current="page"]::after {
content: "";
position: absolute;
left: 50%;
bottom: 0.1rem;
width: 0.3rem;
height: 0.3rem;
border-radius: var(--corner-radius-pill);
background: var(--lead-site-teal);
transform: translateX(-50%);
}
.site-nav .button {
min-height: 2.5rem;
padding: 0 var(--space-4);
}
.theme-toggle {
position: relative;
display: inline-flex;
width: 2.5rem;
height: 2.5rem;
flex: 0 0 auto;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid color-mix(in srgb, var(--lead-site-border) 90%, transparent);
border-radius: var(--corner-radius-pill);
background: color-mix(in srgb, var(--lead-site-bg-elevated) 56%, transparent);
color: var(--lead-site-text);
cursor: pointer;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lead-site-text) 4%, transparent);
transition:
background 0.15s ease,
border-color 0.15s ease,
box-shadow 0.15s ease,
color 0.15s ease,
transform 0.15s ease;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
border-color: color-mix(in srgb, var(--lead-site-teal) 42%, var(--lead-site-border));
background: color-mix(in srgb, var(--lead-site-bg-elevated) 84%, transparent);
color: var(--lead-site-teal);
box-shadow: 0 0 0 3px var(--lead-site-ring);
transform: translateY(-1px);
}
.theme-toggle:focus-visible {
outline: none;
}
.theme-toggle-icon {
width: 1.1rem;
height: 1.1rem;
transition:
opacity 0.16s ease,
transform 0.16s ease;
}
.theme-toggle-moon {
position: absolute;
opacity: 0;
transform: scale(0.8) rotate(-24deg);
}
.theme-toggle-sun {
opacity: 1;
transform: scale(1) rotate(0deg);
}
:root[data-theme="dark"] .theme-toggle-moon {
opacity: 1;
transform: scale(1) rotate(0deg);
}
:root[data-theme="dark"] .theme-toggle-sun {
opacity: 0;
transform: scale(0.8) rotate(24deg);
}
/* Header CTAs: glassy secondary chip + a primary that lifts off the bar. */
.site-header .button.secondary {
--lead-button-fill: color-mix(in srgb, var(--lead-site-bg-elevated) 50%, transparent);
--lead-button-fill-hover: color-mix(in srgb, var(--lead-site-bg-elevated) 78%, transparent);
--lead-button-border-glow: color-mix(in srgb, var(--lead-site-teal) 48%, transparent);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.site-header .button.secondary:hover,
.site-header .button.secondary:focus-visible {
--lead-button-fill: var(--lead-button-fill-hover);
}
.site-header .button.primary {
--lead-button-fill: linear-gradient(
135deg,
var(--lead-site-teal) 0%,
var(--lead-site-teal-strong) 100%
);
box-shadow: 0 6px 18px color-mix(in srgb, var(--lead-site-teal) 32%, transparent);
}
.site-header .button.primary:hover,
.site-header .button.primary:focus-visible {
box-shadow:
0 0 0 1px var(--lead-button-border-glow),
0 8px 24px color-mix(in srgb, var(--lead-site-teal) 46%, transparent);
}
.site-header .button.primary:focus-visible {
box-shadow:
0 0 0 3px var(--lead-site-ring),
0 0 0 1px var(--lead-button-border-glow),
0 8px 24px color-mix(in srgb, var(--lead-site-teal) 46%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.site-header,
.site-header .page-width,
.brand,
.brand img,
.site-nav .nav-link,
.theme-toggle,
.theme-toggle-icon,
.site-header .button,
.site-header .button::before {
transition: none;
}
.site-header .button:hover,
.site-header .button:focus-visible,
.site-header .button:hover::before,
.site-header .button:focus-visible::before {
transform: none;
}
}
.site-shell {
width: min(var(--project-layout-max), calc(100% - var(--project-layout-gutter)));
margin: 0 auto;
padding: var(--space-6) 0 var(--space-12);
}
.hero-band,
.content-band,
.cta-band {
background: var(--lead-site-bg-elevated);
border: 1px solid var(--lead-site-border);
border-radius: var(--project-radius-card);
box-shadow: var(--project-shadow-card);
}
.hero-band {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(var(--project-panel-min), 0.8fr);
gap: var(--project-hero-gap);
padding: var(--project-hero-padding);
}
.eyebrow {
margin: 0 0 var(--space-3);
color: var(--lead-site-teal);
text-transform: uppercase;
font-size: var(--project-type-eyebrow);
font-weight: var(--project-weight-strong);
letter-spacing: 0.08em;
}
h1,
h2,
h3,
p,
ul {
margin-top: 0;
}
/* Headings carry the display face; body/UI stays on Inter. Display type wants
a touch of negative tracking so the larger sizes don't read loose. */
h1,
h2,
h3 {
font-family: var(--font-display);
}
h1 {
font-size: var(--lead-type-display);
line-height: 1.04;
letter-spacing: -0.02em;
margin-bottom: 1.125rem;
overflow-wrap: anywhere;
}
h2 {
font-size: var(--lead-type-section);
line-height: 1.12;
letter-spacing: -0.015em;
margin-bottom: 0.875rem;
}
h3 {
font-size: var(--lead-type-card-title);
letter-spacing: -0.01em;
margin-bottom: 0.625rem;
}
.hero-text,
.section-heading p,
.service-card p,
.plan-card p,
.cta-copy p,
.metric-foot,
.metric-label,
.checklist-card li {
color: var(--lead-site-muted);
line-height: var(--project-type-body-line);
}
.hero-text {
font-size: var(--lead-type-body-large);
}
.hero-actions,
.cta-band {
display: flex;
gap: var(--space-3);
align-items: center;
}
.cta-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
justify-content: flex-end;
}
.onboarding-expectations {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-3);
margin-top: var(--space-5);
}
.onboarding-expectations div {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-3);
align-items: start;
min-width: 0;
padding: var(--space-4);
border: 1px solid var(--lead-site-border);
border-radius: var(--project-radius-card);
background: var(--lead-site-card-surface);
}
.onboarding-expectations span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
border-radius: var(--corner-radius-md);
background: var(--lead-site-icon-surface);
color: var(--lead-site-teal);
font-size: var(--typography-font-size-sm);
font-weight: var(--project-weight-strong);
}
.onboarding-expectations p {
margin: 0;
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
line-height: var(--project-type-body-line);
}
.button {
--lead-button-fill: linear-gradient(
135deg,
var(--lead-site-secondary-surface) 0%,
color-mix(in srgb, var(--lead-site-secondary-surface-hover) 72%, var(--lead-site-secondary-surface)) 100%
);
--lead-button-fill-hover: linear-gradient(
135deg,
var(--lead-site-secondary-surface-hover) 0%,
color-mix(in srgb, var(--lead-site-secondary-surface-hover) 82%, var(--lead-site-secondary-surface)) 100%
);
--lead-button-ink: var(--lead-site-text);
--lead-button-shine: color-mix(in srgb, var(--lead-site-teal) 82%, var(--color-white));
--lead-button-border-glow: color-mix(in srgb, var(--lead-site-teal) 54%, transparent);
position: relative;
isolation: isolate;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--project-button-height);
padding: 0 var(--project-button-padding-x);
border: 1px solid transparent;
border-radius: var(--project-radius-card);
background:
var(--lead-button-fill) padding-box,
linear-gradient(
120deg,
color-mix(in srgb, var(--lead-site-border) 74%, transparent) 0%,
var(--lead-button-shine) 48%,
color-mix(in srgb, var(--lead-site-border) 74%, transparent) 100%
)
border-box;
background-position: 0 0, 0% 50%;
background-size: 100% 100%, 220% 100%;
color: var(--lead-button-ink);
text-decoration: none;
font-weight: var(--project-weight-strong);
white-space: nowrap;
transform: translateZ(0);
transition:
background-position 0.42s ease,
box-shadow 0.18s ease,
color 0.18s ease,
transform 0.18s ease;
}
.button::before {
content: "";
position: absolute;
inset: 1px;
border-radius: calc(var(--project-radius-card) - 1px);
background: linear-gradient(
115deg,
transparent 0%,
color-mix(in srgb, var(--color-white) 28%, transparent) 46%,
transparent 72%
);
opacity: 0;
pointer-events: none;
transform: translateX(-130%) skewX(-16deg);
transition: opacity 0.18s ease, transform 0.52s ease;
}
/* Match the frontend Button: inline svg sized to the text, never shrinking. */
.button .lucide {
position: relative;
z-index: 1;
width: 1.15rem;
height: 1.15rem;
flex-shrink: 0;
}
.button:focus-visible {
outline: none;
box-shadow:
0 0 0 3px var(--lead-site-ring),
0 0 0 1px var(--lead-button-border-glow),
0 10px 26px color-mix(in srgb, var(--lead-site-teal) 24%, transparent);
}
/* Icon nudges right on hover for the primary CTAs (subtle affordance). */
.button.primary .lucide {
transition: transform 0.15s ease;
}
.button.primary:hover .lucide,
.button.primary:focus-visible .lucide {
transform: translateX(2px);
}
.button.primary {
--lead-button-fill: linear-gradient(
135deg,
var(--lead-site-teal) 0%,
color-mix(in srgb, var(--lead-site-teal-strong) 88%, var(--lead-site-teal)) 100%
);
--lead-button-fill-hover: linear-gradient(
135deg,
var(--lead-site-teal-strong) 0%,
var(--lead-site-teal) 100%
);
--lead-button-ink: var(--lead-site-primary-text);
color: var(--lead-site-primary-text);
}
.button.primary:hover,
.button.primary:focus-visible {
--lead-button-fill: var(--lead-button-fill-hover);
}
.button.secondary {
--lead-button-ink: var(--lead-site-text);
color: var(--lead-site-text);
/* Quiet ghost: no gradient border, no sheen sweep, no glow. The primary
stays expressive; the secondary recedes so hierarchy reads at a glance
instead of two equally-shiny buttons competing (S4). */
background: transparent;
border-color: var(--lead-site-border);
box-shadow: none;
}
.button.secondary::before {
display: none;
}
.button.secondary:hover,
.button.secondary:focus-visible {
background: color-mix(in srgb, var(--lead-site-text) 7%, transparent);
border-color: color-mix(in srgb, var(--lead-site-text) 22%, transparent);
box-shadow: none;
transform: none;
}
/* Keep an accessible focus ring even though the glow is gone. */
.button.secondary:focus-visible {
border-color: transparent;
box-shadow:
0 0 0 3px var(--lead-site-ring),
0 0 0 1px var(--lead-button-border-glow);
}
.button:hover,
.button:focus-visible {
background-position: 0 0, 100% 50%;
box-shadow:
0 0 0 1px var(--lead-button-border-glow),
0 10px 26px color-mix(in srgb, var(--lead-site-teal) 24%, transparent);
transform: translateY(-1px);
}
.button:hover::before,
.button:focus-visible::before {
opacity: 1;
transform: translateX(130%) skewX(-16deg);
}
.button:active {
transform: translateY(0);
}
.button:focus-visible {
box-shadow:
0 0 0 3px var(--lead-site-ring),
0 0 0 1px var(--lead-button-border-glow),
0 10px 26px color-mix(in srgb, var(--lead-site-teal) 24%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.button,
.button::before,
.button.primary .lucide {
transition: none;
}
.button:hover,
.button:focus-visible,
.button:hover::before,
.button:focus-visible::before,
.button.primary:hover .lucide,
.button.primary:focus-visible .lucide {
transform: none;
}
}
/* --- Login page --- */
.login-shell {
padding-top: var(--space-8);
}
.login-panel {
display: grid;
grid-template-columns: minmax(22rem, 0.78fr) minmax(0, 1.12fr);
gap: var(--space-10);
align-items: center;
min-height: calc(100svh - 11rem);
}
.login-context {
display: grid;
gap: var(--space-6);
min-width: 0;
}
.login-brand-card {
display: inline-flex;
align-items: center;
justify-self: start;
gap: var(--space-3);
max-width: 100%;
padding: 0.55rem 0.75rem;
border: 1px solid var(--lead-site-border);
border-radius: var(--corner-radius-lg);
background: color-mix(in srgb, var(--lead-site-bg-elevated) 78%, transparent);
color: var(--lead-site-text);
text-decoration: none;
box-shadow: 0 var(--space-4) var(--space-8)
color-mix(in srgb, var(--lead-site-shadow) 62%, transparent);
}
.login-brand-card img {
width: 3rem;
height: 3rem;
flex: 0 0 auto;
border-radius: var(--corner-radius-lg);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--lead-site-teal) 18%, transparent);
}
.login-brand-card span {
display: grid;
gap: 0.125rem;
min-width: 0;
}
.login-brand-card strong {
overflow-wrap: anywhere;
font-size: var(--typography-font-size-sm);
line-height: 1.2;
}
.login-brand-card small {
color: var(--lead-site-muted);
font-size: 0.75rem;
line-height: 1.2;
}
.login-copy {
max-width: 43rem;
}
.login-copy h1 {
max-width: 11ch;
margin-bottom: var(--space-4);
font-size: var(--lead-type-display);
line-height: 1.06;
}
.login-copy .hero-text {
max-width: 38rem;
margin-bottom: 0;
font-size: var(--lead-type-body-large);
}
.login-workspace-preview {
display: grid;
gap: var(--space-3);
max-width: 36rem;
padding: var(--space-4);
border: 1px solid var(--lead-site-border);
border-radius: var(--corner-radius-lg);
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--lead-site-card-surface) 90%, transparent),
color-mix(in srgb, var(--lead-site-bg-elevated) 82%, transparent)
);
box-shadow: 0 var(--space-5) var(--space-12)
color-mix(in srgb, var(--lead-site-shadow) 46%, transparent);
}
.workspace-preview-header,
.workspace-preview-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: var(--space-3);
align-items: center;
}
.workspace-preview-header {
grid-template-columns: minmax(0, 1fr) auto;
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
}
.workspace-preview-header strong,
.workspace-preview-row strong {
color: var(--lead-site-text);
font-size: var(--typography-font-size-sm);
}
.workspace-preview-row {
min-height: 2.75rem;
padding: 0.7rem 0.85rem;
border: 1px solid color-mix(in srgb, var(--lead-site-border) 80%, transparent);
border-radius: var(--corner-radius-md);
background: color-mix(in srgb, var(--lead-site-bg) 68%, transparent);
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
}
.preview-dot {
width: 0.65rem;
height: 0.65rem;
border-radius: var(--corner-radius-pill);
background: var(--lead-site-teal);
box-shadow: 0 0 0 0.25rem var(--lead-site-glow-teal);
}
.preview-dot-muted {
background: var(--lead-site-blue);
box-shadow: 0 0 0 0.25rem var(--lead-site-glow-blue);
}
.preview-dot-soft {
background: var(--lead-site-muted);
box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--lead-site-muted) 14%, transparent);
}
.login-assurance-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-3);
max-width: 36rem;
}
.login-assurance-grid div {
min-width: 0;
padding: var(--space-4);
border: 1px solid var(--lead-site-border);
border-radius: var(--corner-radius-lg);
background: color-mix(in srgb, var(--lead-site-card-surface) 72%, transparent);
}
.login-assurance-grid span {
display: block;
margin-bottom: var(--space-2);
color: var(--lead-site-teal);
font-size: 0.75rem;
font-weight: var(--project-weight-strong);
}
.login-assurance-grid p {
margin: 0;
color: var(--lead-site-text);
font-size: var(--typography-font-size-sm);
line-height: 1.35;
}
.login-card {
justify-self: start;
width: min(100%, 27rem);
padding: var(--space-8);
}
.login-card-header {
margin-bottom: var(--space-5);
}
.login-card h2 {
margin-bottom: var(--space-2);
font-size: var(--lead-type-form-title);
line-height: 1.1;
}
.login-card .form-grid {
gap: var(--space-5);
}
.login-card .field input {
min-height: 3rem;
background: color-mix(in srgb, var(--lead-site-field-surface) 86%, var(--lead-site-bg));
}
.login-card .form-footer {
display: grid;
gap: var(--space-3);
margin-top: var(--space-6);
}
.login-card .form-footer .button {
width: 100%;
min-width: 0;
border: 0;
cursor: pointer;
}
.login-card .form-status {
margin: 0;
padding: 0.75rem 0.875rem;
border: 1px solid transparent;
border-radius: var(--corner-radius-md);
}
.login-card .form-status[hidden] {
display: none;
}
.login-card .form-status[data-state="error"] {
border-color: color-mix(in srgb, var(--lead-site-danger) 30%, var(--lead-site-border));
background: color-mix(in srgb, var(--lead-site-danger) 9%, transparent);
}
.login-links {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-3);
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--lead-site-border);
}
.login-links a {
color: var(--lead-site-teal);
font-size: var(--typography-font-size-sm);
font-weight: var(--typography-font-weight-semibold);
text-decoration: none;
}
.login-links a:hover,
.login-links a:focus-visible {
text-decoration: underline;
}
@media (max-width: 64rem) {
.login-panel {
grid-template-columns: 1fr;
gap: var(--space-8);
min-height: auto;
}
.login-copy h1 {
max-width: 15ch;
}
.login-workspace-preview,
.login-assurance-grid {
max-width: none;
}
.login-card {
justify-self: stretch;
width: min(100%, 34rem);
}
}
@media (max-width: 40rem) {
.login-shell {
padding-top: var(--space-5);
}
.login-panel {
gap: var(--space-6);
}
.login-brand-card {
justify-self: stretch;
}
.login-copy h1 {
max-width: 14ch;
}
.login-copy .hero-text {
font-size: var(--typography-font-size-base);
line-height: 1.6;
}
.login-workspace-preview {
padding: var(--space-3);
}
.workspace-preview-row {
grid-template-columns: auto minmax(0, 1fr);
}
.workspace-preview-row strong {
grid-column: 2;
}
.login-assurance-grid {
grid-template-columns: 1fr;
}
.login-card {
padding: var(--space-5);
}
.login-links {
flex-direction: column;
}
}
/* --- Create account page --- */
.account-shell {
padding-top: var(--space-8);
}
.account-panel {
display: grid;
grid-template-columns: minmax(24rem, 0.92fr) minmax(0, 1.08fr);
gap: var(--space-10);
align-items: center;
min-height: calc(100svh - 11rem);
}
.account-card {
justify-self: start;
width: min(100%, 34rem);
padding: var(--space-8);
}
.account-card-header {
margin-bottom: var(--space-5);
}
.account-card h2 {
margin-bottom: var(--space-2);
font-size: var(--lead-type-form-title);
line-height: 1.1;
}
.account-form-grid {
gap: var(--space-4);
}
.account-card .field input {
min-height: 3rem;
background: color-mix(in srgb, var(--lead-site-field-surface) 86%, var(--lead-site-bg));
}
.account-guidance {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-4);
}
.account-guidance span {
display: inline-flex;
align-items: center;
min-height: 2rem;
padding: 0.3rem 0.55rem;
border: 1px solid color-mix(in srgb, var(--lead-site-teal) 24%, var(--lead-site-border));
border-radius: var(--corner-radius-md);
background: color-mix(in srgb, var(--lead-site-teal) 8%, transparent);
color: var(--lead-site-muted);
font-size: 0.78rem;
line-height: 1.25;
}
.account-agreement {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-3);
align-items: start;
margin-top: var(--space-5);
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
line-height: 1.5;
}
.account-agreement input {
width: 1.05rem;
height: 1.05rem;
margin-top: 0.15rem;
accent-color: var(--lead-site-teal);
}
.account-agreement input:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--lead-site-ring);
}
.account-agreement a,
.account-card-footer a {
color: var(--lead-site-teal);
font-weight: var(--typography-font-weight-semibold);
text-decoration: none;
}
.account-agreement a:hover,
.account-agreement a:focus-visible,
.account-card-footer a:hover,
.account-card-footer a:focus-visible {
text-decoration: underline;
}
.account-form-footer {
display: grid;
gap: var(--space-3);
margin-top: var(--space-6);
}
.account-form-footer .button {
width: 100%;
min-width: 0;
border: 0;
cursor: pointer;
}
.account-form-footer .button[disabled] {
opacity: 0.68;
cursor: not-allowed;
}
.account-status {
margin: 0;
padding: 0.75rem 0.875rem;
border: 1px solid transparent;
border-radius: var(--corner-radius-md);
}
.account-status[hidden] {
display: none;
}
.account-status[data-state="error"] {
border-color: color-mix(in srgb, var(--lead-site-danger) 30%, var(--lead-site-border));
background: color-mix(in srgb, var(--lead-site-danger) 9%, transparent);
}
.account-status[data-state="loading"] {
border-color: color-mix(in srgb, var(--lead-site-teal) 24%, var(--lead-site-border));
background: color-mix(in srgb, var(--lead-site-teal) 8%, transparent);
}
.account-card-footer {
margin: var(--space-5) 0 0;
padding-top: var(--space-4);
border-top: 1px solid var(--lead-site-border);
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
line-height: 1.5;
}
.account-context {
display: grid;
gap: var(--space-6);
min-width: 0;
}
.account-copy {
max-width: 45rem;
}
.account-copy h1 {
max-width: 12ch;
margin-bottom: var(--space-4);
font-size: var(--lead-type-display);
line-height: 1.06;
}
.account-copy .hero-text {
max-width: 40rem;
margin-bottom: 0;
font-size: var(--lead-type-body-large);
}
.account-route-card {
display: grid;
gap: var(--space-3);
max-width: 38rem;
padding: var(--space-4);
border: 1px solid var(--lead-site-border);
border-radius: var(--corner-radius-lg);
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--lead-site-card-surface) 88%, transparent),
color-mix(in srgb, var(--lead-site-bg-elevated) 84%, transparent)
);
box-shadow: 0 var(--space-5) var(--space-12)
color-mix(in srgb, var(--lead-site-shadow) 46%, transparent);
}
.account-route-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-3);
align-items: start;
min-width: 0;
padding: var(--space-3);
border: 1px solid color-mix(in srgb, var(--lead-site-border) 80%, transparent);
border-radius: var(--corner-radius-md);
background: color-mix(in srgb, var(--lead-site-bg) 68%, transparent);
}
.account-route-row span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: var(--corner-radius-md);
background: var(--lead-site-icon-surface);
color: var(--lead-site-teal);
font-size: 0.75rem;
font-weight: var(--project-weight-strong);
}
.account-route-row strong {
display: block;
color: var(--lead-site-text);
font-size: var(--typography-font-size-sm);
}
.account-route-row p {
margin: 0.2rem 0 0;
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
line-height: 1.45;
}
@media (max-width: 64rem) {
.account-panel {
grid-template-columns: 1fr;
gap: var(--space-8);
min-height: auto;
}
.account-copy h1 {
max-width: 16ch;
}
.account-card {
justify-self: stretch;
}
.account-route-card {
max-width: none;
}
}
@media (max-width: 40rem) {
.account-shell {
padding-top: var(--space-5);
}
.account-panel {
gap: var(--space-6);
}
.account-card {
padding: var(--space-5);
}
.account-form-grid {
grid-template-columns: 1fr;
}
.account-copy h1 {
max-width: 14ch;
}
.account-copy .hero-text {
font-size: var(--typography-font-size-base);
line-height: 1.6;
}
}
/* --- Forgot password page --- */
.recover-shell {
padding-top: var(--space-8);
}
.recover-panel {
display: grid;
grid-template-columns: minmax(22rem, 0.78fr) minmax(0, 1.12fr);
gap: var(--space-10);
align-items: center;
min-height: calc(100svh - 11rem);
}
.recover-card {
justify-self: start;
width: min(100%, 29rem);
padding: var(--space-8);
}
.recover-card-header {
margin-bottom: var(--space-5);
}
.recover-card h2 {
margin-bottom: var(--space-2);
font-size: var(--lead-type-form-title);
line-height: 1.1;
}
.recover-card .field input {
min-height: 3rem;
background: color-mix(in srgb, var(--lead-site-field-surface) 86%, var(--lead-site-bg));
}
.recover-note {
margin-top: var(--space-4);
padding: 0.75rem 0.875rem;
border: 1px solid color-mix(in srgb, var(--lead-site-teal) 22%, var(--lead-site-border));
border-radius: var(--corner-radius-md);
background: color-mix(in srgb, var(--lead-site-teal) 8%, transparent);
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
line-height: 1.45;
}
.recover-form-footer {
display: grid;
gap: var(--space-3);
margin-top: var(--space-6);
}
.recover-form-footer .button {
width: 100%;
min-width: 0;
border: 0;
cursor: pointer;
}
.recover-form-footer .button[disabled] {
opacity: 0.68;
cursor: not-allowed;
}
.recover-status {
margin: 0;
padding: 0.75rem 0.875rem;
border: 1px solid transparent;
border-radius: var(--corner-radius-md);
}
.recover-status[hidden] {
display: none;
}
.recover-status[data-state="error"] {
border-color: color-mix(in srgb, var(--lead-site-danger) 30%, var(--lead-site-border));
background: color-mix(in srgb, var(--lead-site-danger) 9%, transparent);
}
.recover-status[data-state="loading"] {
border-color: color-mix(in srgb, var(--lead-site-teal) 24%, var(--lead-site-border));
background: color-mix(in srgb, var(--lead-site-teal) 8%, transparent);
}
.recover-status[data-state="success"] {
border-color: color-mix(in srgb, var(--lead-site-success) 30%, var(--lead-site-border));
background: color-mix(in srgb, var(--lead-site-success) 10%, transparent);
}
.recover-links {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-3);
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--lead-site-border);
}
.recover-links a {
color: var(--lead-site-teal);
font-size: var(--typography-font-size-sm);
font-weight: var(--typography-font-weight-semibold);
text-decoration: none;
}
.recover-links a:hover,
.recover-links a:focus-visible {
text-decoration: underline;
}
.recover-context {
display: grid;
gap: var(--space-6);
min-width: 0;
}
.recover-copy {
max-width: 44rem;
}
.recover-copy h1 {
max-width: 12ch;
margin-bottom: var(--space-4);
font-size: var(--lead-type-display);
line-height: 1.06;
}
.recover-copy .hero-text {
max-width: 39rem;
margin-bottom: 0;
font-size: var(--lead-type-body-large);
}
.recover-route-card {
display: grid;
gap: var(--space-3);
max-width: 38rem;
padding: var(--space-4);
border: 1px solid var(--lead-site-border);
border-radius: var(--corner-radius-lg);
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--lead-site-card-surface) 88%, transparent),
color-mix(in srgb, var(--lead-site-bg-elevated) 84%, transparent)
);
box-shadow: 0 var(--space-5) var(--space-12)
color-mix(in srgb, var(--lead-site-shadow) 46%, transparent);
}
.recover-route-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-3);
align-items: start;
min-width: 0;
padding: var(--space-3);
border: 1px solid color-mix(in srgb, var(--lead-site-border) 80%, transparent);
border-radius: var(--corner-radius-md);
background: color-mix(in srgb, var(--lead-site-bg) 68%, transparent);
}
.recover-route-row span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: var(--corner-radius-md);
background: var(--lead-site-icon-surface);
color: var(--lead-site-teal);
font-size: 0.75rem;
font-weight: var(--project-weight-strong);
}
.recover-route-row strong {
display: block;
color: var(--lead-site-text);
font-size: var(--typography-font-size-sm);
}
.recover-route-row p {
margin: 0.2rem 0 0;
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
line-height: 1.45;
}
@media (max-width: 64rem) {
.recover-panel {
grid-template-columns: 1fr;
gap: var(--space-8);
min-height: auto;
}
.recover-copy h1 {
max-width: 16ch;
}
.recover-card {
justify-self: stretch;
}
.recover-route-card {
max-width: none;
}
}
@media (max-width: 40rem) {
.recover-shell {
padding-top: var(--space-5);
}
.recover-panel {
gap: var(--space-6);
}
.recover-card {
padding: var(--space-5);
}
.recover-copy h1 {
max-width: 14ch;
}
.recover-copy .hero-text {
font-size: var(--typography-font-size-base);
line-height: 1.6;
}
.recover-links {
flex-direction: column;
}
}
.hero-visual {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
align-self: stretch;
}
.visual-card {
background: linear-gradient(180deg, var(--lead-site-card-gradient-start), var(--lead-site-card-gradient-end));
border: 1px solid var(--lead-site-border);
border-radius: var(--project-radius-card);
padding: var(--project-button-padding-x);
}
.metric-card strong {
display: block;
font-size: var(--project-type-metric);
line-height: 1;
margin: 0.625rem 0;
}
.pipeline-card {
grid-row: span 2;
}
.pipeline-bars {
height: 13.125rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: end;
gap: var(--space-3);
margin: 1.125rem 0 0.875rem;
}
.bar {
display: block;
border-radius: var(--project-radius-pill) var(--project-radius-pill) var(--project-radius-bar) var(--project-radius-bar);
}
.bar.teal {
background: var(--lead-bar-teal);
}
.bar.cyan {
background: var(--lead-bar-cyan);
}
.bar.blue {
background: var(--lead-bar-blue);
}
.bar.amber {
background: var(--lead-bar-amber);
}
.checklist-card ul {
padding-left: 1.125rem;
margin-bottom: 0;
}
.content-band,
.cta-band {
margin-top: var(--project-section-gap);
}
.content-band {
padding: var(--project-section-padding);
}
.service-grid,
.plan-list {
display: grid;
gap: var(--space-4);
}
.service-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.service-card,
.plan-card {
min-height: 13.75rem;
padding: 1.375rem;
border-radius: var(--project-radius-card);
border: 1px solid var(--lead-site-border);
background: var(--lead-site-card-surface);
}
.split-band {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: var(--project-section-gap);
}
.plan-tag {
display: inline-flex;
min-height: 1.75rem;
align-items: center;
padding: 0 var(--project-pill-padding-x);
border-radius: var(--project-radius-pill);
background: var(--lead-site-tag-surface);
color: var(--lead-site-teal);
font-size: var(--project-type-eyebrow);
font-weight: var(--project-weight-strong);
margin-bottom: 0.875rem;
}
.cta-band {
justify-content: space-between;
padding: var(--space-8) var(--space-10);
}
.cta-copy {
max-width: 43.75rem;
}
@media (max-width: 61.25rem) {
.hero-band,
.split-band,
.service-grid {
grid-template-columns: 1fr;
}
.hero-visual {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 40rem) {
.site-shell {
width: min(100%, calc(100% - var(--project-layout-gutter-mobile)));
padding: var(--space-3) 0 1.75rem;
}
.hero-band,
.content-band,
.cta-band {
padding: var(--project-mobile-padding);
}
.hero-actions,
.cta-band,
.hero-visual {
flex-direction: column;
grid-template-columns: 1fr;
}
.button {
width: 100%;
}
.cta-actions {
width: 100%;
justify-content: stretch;
}
.cta-actions .button {
flex: 1 1 100%;
}
.service-card,
.plan-card {
min-height: 0;
}
.site-nav {
gap: var(--space-2);
}
.site-nav .nav-link {
display: none;
}
.site-nav .button {
width: auto;
flex: 0 0 auto;
min-height: 2.35rem;
padding: 0 var(--space-3);
}
.theme-toggle {
width: 2.35rem;
height: 2.35rem;
}
.onboarding-expectations {
grid-template-columns: 1fr;
}
.proof-grid {
grid-template-columns: 1fr;
}
.form-grid {
grid-template-columns: 1fr;
}
.contact-band {
display: flex;
flex-direction: column;
grid-template-columns: none;
gap: var(--space-6);
align-items: stretch;
overflow: visible;
}
.contact-intro,
.contact-flow,
.booking-panel,
.lead-form {
width: 100%;
min-width: 0;
}
.booking-panel,
.lead-form {
padding: var(--space-4);
}
}
/* --- Hero metric footnote (labels the illustrative figures) --- */
.metric-note {
display: block;
margin-top: var(--space-2);
font-size: 0.7rem;
color: var(--lead-site-muted);
opacity: 0.8;
}
/* --- Proof / trust band --- */
.proof-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
}
.proof-card {
padding: var(--space-6);
border-radius: var(--project-radius-card);
border: 1px solid var(--lead-site-border);
background: var(--lead-site-card-surface);
}
.proof-card .quote {
margin: 0 0 var(--space-4);
font-size: 1.05rem;
line-height: 1.5;
color: var(--lead-site-text);
}
.proof-card .attribution {
margin: 0;
font-size: var(--typography-font-size-sm);
color: var(--lead-site-muted);
}
/* --- Contact page --- */
.contact-band {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(var(--project-panel-min), 1.1fr);
gap: var(--project-section-gap);
align-items: start;
min-width: 0;
}
.contact-intro,
.contact-flow,
.booking-panel,
.lead-form {
min-width: 0;
}
.contact-flow {
display: grid;
gap: var(--space-5);
}
.contact-intro .lead-detail {
margin: var(--space-5) 0 0;
padding-left: 1.125rem;
color: var(--lead-site-muted);
line-height: var(--project-type-body-line);
}
.contact-direct {
margin-top: var(--space-6);
font-size: var(--typography-font-size-sm);
color: var(--lead-site-muted);
}
.contact-direct a {
color: var(--lead-site-teal);
}
/* --- Form --- */
.booking-panel,
.lead-form {
background: var(--lead-site-card-surface);
border: 1px solid var(--lead-site-border);
border-radius: var(--project-radius-card);
padding: 1.75rem;
position: relative;
z-index: 1;
}
.booking-panel h2,
.lead-form h2 {
margin: 0 0 var(--space-3);
font-size: var(--lead-type-panel-title);
line-height: 1.15;
}
.booking-panel p,
.form-intro {
color: var(--lead-site-muted);
line-height: 1.6;
}
.booking-panel p,
.form-intro {
margin: 0 0 var(--space-5);
}
.booking-grid {
display: grid;
gap: var(--space-4);
}
.booking-type-field {
display: grid;
gap: var(--space-2);
margin: 0;
padding: 0;
border: 0;
}
.booking-type-field legend {
margin-bottom: var(--space-2);
color: var(--lead-site-text);
font-size: var(--typography-font-size-sm);
font-weight: var(--typography-font-weight-semibold);
}
.booking-type-field label {
display: flex;
align-items: center;
gap: var(--space-2);
min-height: 2.75rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--lead-site-border);
border-radius: var(--corner-radius-md);
background: var(--lead-site-field-surface);
color: var(--lead-site-text);
cursor: pointer;
}
.booking-type-field input {
width: 1rem;
height: 1rem;
accent-color: var(--lead-site-teal);
}
.booking-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
margin-top: var(--space-5);
}
.booking-actions .button {
min-width: 13rem;
}
.booking-status {
margin: 0;
font-size: var(--typography-font-size-sm);
line-height: 1.4;
}
.booking-status[data-state="error"] {
color: var(--lead-site-danger);
}
.booking-status[data-state="success"] {
color: var(--lead-site-success);
}
.booking-status[data-state="pending"] {
color: var(--lead-site-muted);
}
.booking-summary {
margin: var(--space-4) 0 0;
padding: var(--space-3);
border: 1px solid color-mix(in srgb, var(--lead-site-teal) 36%, var(--lead-site-border));
border-radius: var(--corner-radius-md);
background: color-mix(in srgb, var(--lead-site-teal) 10%, transparent);
color: var(--lead-site-text);
font-size: var(--typography-font-size-sm);
line-height: 1.5;
}
.lead-form[hidden] {
display: none;
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.field {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.field.field-full {
grid-column: 1 / -1;
}
.field label {
font-size: var(--typography-font-size-sm);
font-weight: var(--typography-font-weight-semibold);
color: var(--lead-site-text);
}
.field label .req {
color: var(--lead-site-teal);
margin-left: 0.15rem;
}
.field input,
.field select,
.field textarea {
width: 100%;
font-family: inherit;
font-size: var(--typography-font-size-base);
color: var(--lead-site-text);
background: var(--lead-site-field-surface);
border: 1px solid var(--lead-site-border);
border-radius: var(--corner-radius-md);
padding: 0.7rem 0.85rem;
min-height: 2.75rem;
}
.field textarea {
min-height: 8rem;
resize: vertical;
line-height: 1.5;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
outline: none;
border-color: var(--lead-site-teal);
box-shadow: 0 0 0 3px var(--lead-site-glow-teal);
}
/* Honeypot: visually hidden, kept in-flow off-screen, hidden from AT */
.hp-field {
position: absolute;
left: -9999px;
width: var(--lead-site-visually-hidden-size);
height: var(--lead-site-visually-hidden-size);
overflow: hidden;
}
.form-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
margin-top: var(--space-5);
}
.form-footer .button {
min-width: 12rem;
}
.form-footer .button[aria-disabled="true"],
.form-footer .button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.form-status {
font-size: var(--typography-font-size-sm);
line-height: 1.4;
}
.form-status[data-state="error"] {
color: var(--lead-site-danger);
}
.form-status[data-state="success"] {
color: var(--lead-site-success);
}
.form-status[data-state="loading"] {
color: var(--lead-site-muted);
}
.form-consent {
margin: var(--space-4) 0 0;
font-size: 0.78rem;
color: var(--lead-site-muted);
line-height: 1.5;
}
@media (max-width: 40rem) {
.contact-band {
display: flex;
flex-direction: column;
grid-template-columns: none;
gap: var(--space-6);
align-items: stretch;
overflow: visible;
}
.contact-intro,
.contact-flow,
.booking-panel,
.lead-form {
width: 100%;
min-width: 0;
}
.booking-panel,
.lead-form {
padding: var(--space-4);
}
.form-grid {
grid-template-columns: 1fr;
}
}
.fallback-band {
display: grid;
gap: var(--space-6);
min-height: 28rem;
align-content: center;
}
.fallback-band .section-heading {
max-width: 48rem;
}
.fallback-band .section-heading p:last-child {
margin-bottom: 0;
color: var(--lead-site-muted);
line-height: var(--project-type-body-line);
}
/* Quiet secondary routes on the 404 — one primary button owns the action,
these recede to inline links (Part 3 · 404). */
.fallback-links {
margin: 0;
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
max-width: 44ch;
}
/* "What's ahead" step preview that differentiates onboarding from the
create-account handoff (Part 3). */
.onboarding-steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-3);
max-width: 34rem;
}
.onboarding-steps li {
display: grid;
grid-template-columns: 2.5rem 1fr;
gap: var(--space-3);
align-items: center;
}
.onboarding-steps p {
margin: 0;
color: var(--lead-site-muted);
}
.onboarding-step-index {
font-family: var(--font-display);
font-size: var(--lead-type-card-title);
font-weight: var(--project-weight-strong);
color: color-mix(in srgb, var(--lead-site-teal) 60%, transparent);
font-variant-numeric: tabular-nums;
}
.fallback-links a {
color: var(--lead-site-text);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--lead-site-teal) 60%, transparent);
text-underline-offset: 0.2em;
}
.fallback-links a:hover,
.fallback-links a:focus-visible {
text-decoration-color: var(--lead-site-teal);
}
/* --- Footer --- */
.site-footer {
position: relative;
border-top: 1px solid var(--lead-site-border);
background: color-mix(in srgb, var(--lead-site-bg) 80%, transparent);
margin-top: var(--space-12);
}
/* Teal-to-transparent hairline riding the top edge — gives the flat border a
designed "horizon" and ties the footer back to the site's accent. */
.site-footer::before {
position: absolute;
inset: -1px 0 auto 0;
height: 1px;
content: "";
pointer-events: none;
background: linear-gradient(
90deg,
transparent 0%,
color-mix(in srgb, var(--lead-site-teal) 50%, transparent) 18%,
color-mix(in srgb, var(--lead-site-teal) 70%, transparent) 50%,
color-mix(in srgb, var(--lead-site-teal) 50%, transparent) 82%,
transparent 100%
);
}
.site-footer .footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
gap: var(--space-8);
padding: var(--space-10) 0 var(--space-6);
}
.site-footer .footer-brand {
grid-column: span 2;
}
.footer-brand .brand {
margin-bottom: var(--space-3);
transition: transform var(--motion-duration-normal) var(--motion-ease-emphasized);
}
.footer-brand .brand:hover,
.footer-brand .brand:focus-visible {
transform: translateY(-2px);
}
.footer-brand .brand img {
transition: transform var(--motion-duration-slow) var(--motion-ease-emphasized);
}
.footer-brand .brand:hover img,
.footer-brand .brand:focus-visible img {
transform: rotate(-6deg) scale(1.04);
}
.footer-brand p {
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
line-height: 1.6;
max-width: 32rem;
margin: 0;
}
/* Statement footer (S6): a strong lead line + a real CTA turn the brand column
into a closing statement, so the footer reads as more than a 4-column link
wall. The link columns still carry wayfinding alongside it. */
.footer-brand .footer-statement {
font-family: var(--font-display);
font-size: var(--lead-type-panel-title);
font-weight: var(--project-weight-strong);
letter-spacing: -0.015em;
line-height: 1.15;
color: var(--lead-site-text);
margin: var(--space-3) 0 var(--space-2);
max-width: 18ch;
}
.footer-brand .footer-cta {
margin-top: var(--space-5);
}
.footer-col h4 {
font-size: var(--typography-font-size-rem-082);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--lead-site-muted);
margin: 0 0 var(--space-3);
}
.footer-col ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.625rem;
}
/* Links share one left-to-right motion language: the label nudges along the
"track" while a teal underline wipes in beneath it. */
.footer-col a {
position: relative;
display: inline-flex;
align-items: center;
color: var(--lead-site-text);
text-decoration: none;
font-size: var(--typography-font-size-sm);
transition:
color var(--motion-duration-normal) var(--motion-ease-standard),
transform var(--motion-duration-normal) var(--motion-ease-emphasized);
}
.footer-col a::after {
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
content: "";
background: var(--lead-site-teal);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--motion-duration-normal) var(--motion-ease-emphasized);
}
.footer-col a:hover,
.footer-col a:focus-visible {
color: var(--lead-site-teal);
transform: translateX(3px);
}
.footer-col a:hover::after,
.footer-col a:focus-visible::after {
transform: scaleX(1);
}
.footer-legal {
border-top: 1px solid var(--lead-site-border);
}
.footer-legal .page-width {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3) var(--space-5);
padding: var(--space-5) 0;
}
.footer-legal p {
margin: 0;
font-size: 0.76rem;
color: var(--lead-site-muted);
line-height: 1.55;
flex: 1 1 24rem;
}
/* Inline legal links carried by the minimal / next-step footer variants, where
there is no full Legal column. Sits inside .footer-legal p. */
.footer-legal-links {
display: inline-flex;
flex-wrap: wrap;
gap: var(--space-4);
margin-left: var(--space-3);
}
.footer-legal-links a {
color: var(--lead-site-muted);
text-decoration: none;
transition: color var(--motion-duration-normal) var(--motion-ease-standard);
}
.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
color: var(--lead-site-teal);
}
/* Back-to-top: a real utility whose arrow lifts on hover, echoing the upward
rise of the column reveal. */
.footer-top-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-left: auto;
color: var(--lead-site-muted);
text-decoration: none;
font-size: var(--typography-font-size-sm);
font-weight: var(--typography-font-weight-medium);
white-space: nowrap;
transition: color var(--motion-duration-normal) var(--motion-ease-standard);
}
.footer-top-link:hover,
.footer-top-link:focus-visible {
color: var(--lead-site-teal);
}
.footer-top-arrow {
width: 1rem;
height: 1rem;
transition: transform var(--motion-duration-normal) var(--motion-ease-emphasized);
}
.footer-top-link:hover .footer-top-arrow,
.footer-top-link:focus-visible .footer-top-arrow {
transform: translateY(-3px);
}
/* Reduced motion: keep color feedback, drop the positional/scale animation. */
@media (prefers-reduced-motion: reduce) {
.footer-brand .brand,
.footer-brand .brand img,
.footer-col a,
.footer-col a::after,
.footer-top-arrow {
transition: none;
}
.footer-brand .brand:hover,
.footer-brand .brand:focus-visible,
.footer-brand .brand:hover img,
.footer-brand .brand:focus-visible img,
.footer-col a:hover,
.footer-col a:focus-visible,
.footer-top-link:hover .footer-top-arrow,
.footer-top-link:focus-visible .footer-top-arrow {
transform: none;
}
}
@media (max-width: 61.25rem) {
.site-footer .footer-grid {
grid-template-columns: 1fr 1fr;
}
.footer-brand {
grid-column: 1 / -1;
}
}
@media (max-width: 40rem) {
.site-footer .footer-grid {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.footer-top-link {
margin-left: 0;
}
}
/* --- Iconography (vendored Lucide icons; mirrors the frontend icon system) --- */
.lucide {
display: inline-block;
vertical-align: middle;
}
/* Tinted square holding a stroked icon — the frontend Card "icon slot" pattern. */
.icon-tile {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: var(--corner-radius-lg);
background: var(--lead-site-icon-surface);
border: 1px solid var(--lead-site-icon-border);
color: var(--lead-site-icon-text);
margin-bottom: var(--space-4);
}
.icon-tile .lucide {
width: 1.5rem;
height: 1.5rem;
}
/* Service cards become an icon → title → copy stack. */
.service-card {
display: flex;
flex-direction: column;
}
.service-card h3 {
margin-bottom: var(--space-2);
}
/* Lucide icon inside the plan tag pill (mirrors a Badge-with-icon). */
.plan-tag .lucide {
width: 0.95rem;
height: 0.95rem;
margin-right: 0.4rem;
}
/* Check-marker lists (operating stack, contact detail) — icon replaces the bullet. */
.icon-list {
list-style: none;
padding-left: 0;
margin: 0;
display: grid;
gap: 0.625rem;
}
.icon-list li {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: 0.625rem;
}
.icon-list .lucide {
width: 1.1rem;
height: 1.1rem;
margin-top: 0.15rem;
color: var(--lead-site-teal);
flex-shrink: 0;
}
/* Inline mail icon for contact links. */
.inline-icon {
width: 1rem;
height: 1rem;
margin-right: 0.4rem;
color: var(--lead-site-teal);
vertical-align: -0.18em;
}
/* --- Decorative hero backdrop (vendored dot-grid asset) --- */
.hero-band {
position: relative;
overflow: hidden;
}
.hero-band::before {
content: "";
position: absolute;
inset: 0;
background-image: url("assets/hero-pattern.svg");
background-size: 1.75rem 1.75rem;
opacity: 0.5;
pointer-events: none;
-webkit-mask-image: radial-gradient(circle at top right, var(--lead-site-mask-opaque) 0%, transparent 62%);
mask-image: radial-gradient(circle at top right, var(--lead-site-mask-opaque) 0%, transparent 62%);
}
.hero-band > * {
position: relative;
z-index: 1;
}
/* --- Hero 3D backdrop (three-system, balanced preset) --- */
/* The canvas sits behind the dot-grid pattern and all hero content (which is
raised to z-index:1 above). Decorative only — pointer-events stay off so the
parallax never blocks the CTAs, and it inherits the radial mask shape. */
.hero-canvas {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
display: block;
pointer-events: none;
opacity: 0.55;
-webkit-mask-image: radial-gradient(circle at top right, var(--lead-site-mask-opaque) 0%, transparent 70%);
mask-image: radial-gradient(circle at top right, var(--lead-site-mask-opaque) 0%, transparent 70%);
}
@media (prefers-reduced-motion: reduce) {
/* Calmer, fully static backdrop when motion is reduced. */
.hero-canvas {
opacity: 0.4;
}
}
/* --- Shared: section heading max width + inline CTA links --- */
.section-heading {
max-width: 52rem;
margin-bottom: var(--space-6);
}
.section-heading h1 {
margin-bottom: var(--space-4);
}
.subheadline {
max-width: 44rem;
margin: 0 0 var(--space-4);
color: var(--lead-site-text);
font-size: var(--lead-type-subheadline);
font-weight: var(--project-weight-strong);
line-height: 1.45;
}
.copy-stack {
display: grid;
gap: var(--space-3);
}
.copy-stack p {
margin: 0;
}
.cta-copy p a {
color: var(--lead-site-teal);
}
/* --- Pricing: engagement-model tiers --- */
.tier-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-4);
}
.pricing-model-list,
.pricing-steps {
padding: 0;
margin: 0;
list-style: none;
}
.tier-item {
display: flex;
min-width: 0;
}
.tier-card {
display: flex;
flex-direction: column;
width: 100%;
padding: var(--space-6);
border-radius: var(--project-radius-card);
border: 1px solid var(--lead-site-border);
background: var(--lead-site-card-surface);
}
/* Featured tier physically breaks the grid (Part 3 · pricing): accent ring,
tinted surface, and a lift so the recommended plan reads at a glance instead
of being one class away from its neighbours. */
.tier-featured {
border-color: color-mix(in srgb, var(--lead-site-teal) 55%, transparent);
background:
linear-gradient(180deg, var(--lead-site-tag-surface) 0%, transparent 60%),
var(--lead-site-card-surface);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--lead-site-teal) 32%, transparent),
0 18px 48px color-mix(in srgb, var(--lead-site-teal) 16%, transparent);
}
@media (min-width: 64rem) {
.tier-featured {
transform: translateY(-0.5rem);
}
}
.tier-trial {
align-self: flex-start;
margin-bottom: var(--space-2);
padding: 0.2rem var(--space-2);
border-radius: var(--project-radius-pill);
background: var(--lead-site-tag-surface);
color: var(--lead-site-teal);
font-size: var(--typography-font-size-xs);
font-weight: var(--project-weight-strong);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.tier-card h2 {
margin: 0 0 var(--space-2);
font-size: 1.25rem;
line-height: 1.2;
}
.tier-card.tier-featured {
border-color: var(--lead-site-teal);
box-shadow: 0 0 0 1px var(--lead-site-teal);
}
.tier-badge {
display: inline-flex;
width: max-content;
max-width: 100%;
min-height: 1.75rem;
align-items: center;
margin: 0 0 var(--space-3);
padding: 0 var(--project-pill-padding-x);
border: 1px solid var(--lead-site-icon-border);
border-radius: var(--project-radius-pill);
background: var(--lead-site-icon-surface);
color: var(--lead-site-teal);
font-size: var(--project-type-eyebrow);
font-weight: var(--project-weight-strong);
overflow-wrap: anywhere;
}
.tier-price {
font-size: 1.5rem;
font-weight: var(--project-weight-strong);
color: var(--lead-site-text);
margin: var(--space-1) 0 0.125rem;
}
.tier-price small {
display: block;
margin-top: 0.125rem;
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
font-weight: var(--typography-font-weight-medium);
}
.tier-trial {
display: inline-flex;
width: max-content;
max-width: 100%;
margin: calc(var(--space-2) * -1) 0 var(--space-3);
color: var(--lead-site-muted);
font-size: var(--typography-font-size-xs);
font-weight: var(--project-weight-strong);
overflow-wrap: anywhere;
}
.tier-meta {
font-size: var(--typography-font-size-sm);
color: var(--lead-site-muted);
margin: 0 0 var(--space-4);
}
.tier-summary {
margin: 0 0 var(--space-5);
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
line-height: 1.6;
}
.tier-facts {
display: grid;
gap: var(--space-3);
margin: 0 0 var(--space-5);
}
.tier-facts div {
padding-top: var(--space-3);
border-top: 1px solid var(--lead-site-border);
}
.tier-facts dt {
color: var(--lead-site-teal);
font-size: var(--project-type-eyebrow);
font-weight: var(--project-weight-strong);
text-transform: uppercase;
}
.tier-facts dd {
margin: var(--space-1) 0 0;
color: var(--lead-site-text);
font-size: var(--typography-font-size-sm);
line-height: 1.55;
}
.tier-list {
margin-bottom: var(--space-6);
}
.tier-cta {
margin-top: auto;
width: 100%;
}
.pricing-note {
margin: var(--space-6) 0 0;
padding: var(--space-5) var(--space-6);
border: 1px solid var(--lead-site-border);
border-radius: var(--project-radius-card);
background: var(--lead-site-card-surface);
font-size: var(--typography-font-size-sm);
color: var(--lead-site-muted);
line-height: 1.6;
max-width: 52rem;
}
.pricing-note strong {
color: var(--lead-site-text);
}
.pricing-table-wrap {
overflow-x: auto;
border: 1px solid var(--lead-site-border);
border-radius: var(--project-radius-card);
background: var(--lead-site-card-surface);
}
.pricing-table-wrap:focus-visible {
outline: 0.1875rem solid var(--lead-site-ring);
outline-offset: var(--space-1);
}
.pricing-comparison {
width: 100%;
min-width: 68rem;
border-collapse: collapse;
}
.pricing-comparison caption {
padding: var(--space-4) var(--space-5);
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
text-align: left;
}
.pricing-comparison th,
.pricing-comparison td {
padding: var(--space-4) var(--space-5);
border-top: 1px solid var(--lead-site-border);
text-align: left;
vertical-align: top;
}
.pricing-comparison thead th {
position: sticky;
top: 0;
z-index: 1;
background: var(--lead-site-bg-elevated);
color: var(--lead-site-teal);
font-size: var(--project-type-eyebrow);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.pricing-comparison tbody th {
width: 22%;
color: var(--lead-site-text);
}
/* Zebra rows make a wide comparison table scannable row-to-row. */
.pricing-comparison tbody tr:nth-child(even) th,
.pricing-comparison tbody tr:nth-child(even) td {
background: color-mix(in srgb, var(--lead-site-text) 3%, transparent);
}
.pricing-comparison td {
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
line-height: 1.55;
}
.pricing-steps .plan-card {
min-height: 0;
}
.pricing-steps .plan-tag {
width: max-content;
}
.proof-card h3 {
margin: 0 0 var(--space-3);
color: var(--lead-site-text);
font-size: 1.05rem;
line-height: 1.35;
}
/* --- Services: two-column detail cards --- */
.detail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.detail-card {
min-height: 0;
}
/* Services as a connected sequence (Part 3 · services): an ordered step number
ghosts into each card so capture → campaigns → lifecycle → measurement reads
as one funnel feeding itself, not four disconnected cards. */
.services-flow {
counter-reset: svc;
}
.services-flow .detail-card {
position: relative;
counter-increment: svc;
overflow: hidden;
z-index: 0;
}
/* Real card content is lifted above the watermark so the ghost number can
never reduce heading/body legibility, no matter how the title wraps. */
.services-flow .detail-card > * {
position: relative;
z-index: 1;
}
.services-flow .detail-card::after {
content: counter(svc, decimal-leading-zero);
position: absolute;
top: var(--space-2);
right: var(--space-4);
z-index: 0;
font-family: var(--font-display);
font-size: 2.4rem;
font-weight: var(--project-weight-strong);
line-height: 1;
color: color-mix(in srgb, var(--lead-site-teal) 16%, transparent);
pointer-events: none;
}
/* List variant for PublicRoutePage (S8 / Part 2): numbered editorial rows
instead of a grid of equal cards. A hairline separates each row and a large
ghosted index sits in a fixed left column, giving template pages a second,
distinctly different rhythm. */
.detail-rows {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0;
border-top: 1px solid var(--lead-site-border);
}
.detail-row {
display: grid;
grid-template-columns: 3.5rem 1fr;
gap: var(--space-5);
align-items: start;
padding: var(--space-6) 0;
border-bottom: 1px solid var(--lead-site-border);
}
.detail-row-index {
font-family: var(--font-display);
font-size: var(--lead-type-panel-title);
font-weight: var(--project-weight-strong);
line-height: 1;
color: color-mix(in srgb, var(--lead-site-teal) 55%, transparent);
font-variant-numeric: tabular-nums;
}
.detail-row-text h3 {
margin-bottom: var(--space-2);
}
.detail-row-text p {
margin: 0;
color: var(--lead-site-muted);
max-width: 52ch;
}
.detail-row-text .plan-tag {
margin-bottom: var(--space-3);
}
@media (max-width: 40rem) {
.detail-row {
grid-template-columns: 2.5rem 1fr;
gap: var(--space-4);
padding: var(--space-5) 0;
}
}
.detail-card .tier-list {
margin-top: var(--space-2);
margin-bottom: 0;
}
/* Case-studies empty state (Part 3): a reserved, dashed slot that makes the
absence of published cases read as a deliberate proof standard, not an
unfinished page. */
.case-placeholder {
display: grid;
gap: var(--space-4);
padding: var(--space-8);
border: 1.5px dashed color-mix(in srgb, var(--lead-site-teal) 40%, var(--lead-site-border));
border-radius: var(--project-radius-card);
background: color-mix(in srgb, var(--lead-site-teal) 4%, transparent);
}
.case-placeholder-badge {
justify-self: start;
padding: 0.2rem var(--space-3);
border-radius: var(--project-radius-pill);
background: var(--lead-site-tag-surface);
color: var(--lead-site-teal);
font-size: var(--typography-font-size-xs);
font-weight: var(--project-weight-strong);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.case-placeholder-title {
font-family: var(--font-display);
font-size: var(--lead-type-panel-title);
font-weight: var(--project-weight-strong);
letter-spacing: -0.015em;
color: var(--lead-site-text);
margin: 0;
}
.case-placeholder-outline {
margin: 0;
padding-left: 1.25rem;
display: grid;
gap: var(--space-2);
color: var(--lead-site-muted);
max-width: 48ch;
}
.case-placeholder-note {
margin: 0;
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
}
.sitemap-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.sitemap-card h2 {
margin-bottom: var(--space-4);
font-size: var(--lead-type-panel-title);
}
.sitemap-list {
display: grid;
gap: var(--space-4);
margin: 0;
padding: 0;
list-style: none;
}
.sitemap-list li {
display: grid;
gap: var(--space-1);
}
.sitemap-list a {
color: var(--lead-site-teal);
font-weight: var(--project-weight-strong);
text-decoration: none;
}
.sitemap-list a:hover,
.sitemap-list a:focus-visible {
color: var(--lead-site-teal-dark);
text-decoration: underline;
text-underline-offset: 0.18em;
}
.sitemap-list p {
margin: 0;
color: var(--lead-site-muted);
line-height: 1.55;
}
.detail-checklist {
align-self: center;
gap: var(--space-4);
}
.detail-checklist li {
color: var(--lead-site-text);
line-height: var(--project-type-body-line);
}
/* --- Legal / policy long-form pages --- */
.legal-content {
max-width: 48rem;
}
/* "Last updated" reads as a chip rather than a loose grey line (Part 3 · legal). */
.legal-content .updated {
display: inline-flex;
align-items: center;
margin: 0 0 var(--space-8);
padding: 0.25rem var(--space-3);
border: 1px solid var(--lead-site-border);
border-radius: var(--project-radius-pill);
background: var(--lead-site-card-surface);
font-size: var(--typography-font-size-xs);
color: var(--lead-site-muted);
}
/* A hairline rule above each section gives a long legal document visual
structure and scannable breaks instead of an unbroken wall. */
.legal-content h2 {
font-size: 1.4rem;
margin: var(--space-10) 0 var(--space-3);
padding-top: var(--space-6);
border-top: 1px solid var(--lead-site-border);
}
.legal-content h2:first-of-type {
margin-top: var(--space-4);
padding-top: 0;
border-top: 0;
}
.legal-content p,
.legal-content li {
color: var(--lead-site-muted);
line-height: 1.7;
}
.legal-content ul {
padding-left: var(--space-5);
display: grid;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.legal-content a {
color: var(--lead-site-teal);
}
.legal-content .legal-note {
margin-top: var(--space-8);
padding: var(--space-5) var(--space-6);
border: 1px solid var(--lead-site-border);
border-left: 3px solid var(--lead-site-teal);
border-radius: var(--project-radius-card);
background: var(--lead-site-card-surface);
font-size: var(--typography-font-size-sm);
}
@media (max-width: 61.25rem) {
.tier-grid,
.detail-grid {
grid-template-columns: 1fr;
}
.sitemap-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 78rem) and (min-width: 61.251rem) {
.tier-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* --- Checkout (Square) --- */
.checkout-band {
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(var(--project-panel-min), 1.12fr);
gap: var(--project-section-gap);
align-items: start;
}
.checkout-intro {
position: sticky;
top: calc(var(--header-height, 4.5rem) + var(--space-6));
}
.checkout-trust {
margin-top: var(--space-4);
font-size: var(--typography-font-size-sm);
color: var(--lead-site-muted);
line-height: 1.6;
}
.checkout-proof-list {
display: grid;
gap: var(--space-3);
margin: var(--space-6) 0 0;
padding: 0;
list-style: none;
}
.checkout-proof-list li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-3);
align-items: center;
color: var(--lead-site-text);
font-size: var(--typography-font-size-sm);
font-weight: var(--project-weight-strong);
}
.checkout-proof-list svg {
width: 1.1rem;
height: 1.1rem;
color: var(--lead-site-teal);
}
.checkout-step-list {
display: grid;
gap: var(--space-3);
padding: 0;
margin: var(--space-6) 0 0;
list-style: none;
}
.checkout-step-list li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-3);
align-items: start;
padding: var(--space-4);
border: 1px solid var(--lead-site-border);
border-radius: var(--project-radius-card);
background: var(--lead-site-card-surface);
}
.checkout-step-list strong {
display: block;
margin-bottom: var(--space-1);
color: var(--lead-site-text);
}
.checkout-step-list p {
margin: 0;
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
line-height: 1.5;
}
.checkout-trial-card {
margin-top: var(--space-4);
padding: var(--space-5);
border: 1px solid var(--lead-site-icon-border);
border-radius: var(--project-radius-card);
background: var(--lead-site-icon-surface);
}
.checkout-trial-card strong {
display: block;
margin-bottom: var(--space-2);
color: var(--lead-site-text);
}
.checkout-trial-card p {
margin: 0;
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
line-height: 1.55;
}
.checkout-next-card {
margin-top: var(--space-5);
padding: var(--space-5);
border: 1px solid var(--lead-site-border);
border-radius: var(--project-radius-card);
background: var(--lead-site-card-surface);
}
.checkout-next-card h2 {
margin: 0 0 var(--space-4);
font-size: 1.15rem;
}
.checkout-next-card ol {
display: grid;
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
.checkout-next-card li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-3);
align-items: start;
}
.checkout-next-card li > span {
display: inline-flex;
width: 1.7rem;
height: 1.7rem;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--lead-site-icon-surface);
color: var(--lead-site-teal);
font-size: var(--typography-font-size-xs);
font-weight: var(--project-weight-strong);
}
.checkout-next-card p {
margin: 0;
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
line-height: 1.55;
}
/* Hosted Square payment-link product (the /checkout_test page) */
.checkout-product {
background: var(--lead-site-card-surface);
border: 1px solid var(--lead-site-border);
border-radius: var(--project-radius-card);
padding: 1.75rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.product-eyebrow {
margin: 0;
color: var(--lead-site-teal);
text-transform: uppercase;
font-size: var(--project-type-eyebrow);
font-weight: var(--project-weight-strong);
}
.product-name {
margin: var(--space-1) 0 0;
}
.product-seller {
margin: 0;
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
}
.product-note {
margin: var(--space-2) 0 0;
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
line-height: 1.5;
}
.product-pay {
margin-top: var(--space-5);
width: 100%;
}
.checkout-form {
background: var(--lead-site-card-surface);
border: 1px solid color-mix(in srgb, var(--lead-site-teal) 26%, var(--lead-site-border));
border-radius: var(--project-radius-card);
padding: clamp(1.25rem, 3vw, 2rem);
box-shadow:
var(--project-shadow-card),
0 1.5rem 4rem color-mix(in srgb, var(--lead-site-teal) 10%, transparent);
}
.checkout-form-heading {
margin-bottom: var(--space-5);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--lead-site-border);
}
.checkout-form-heading h2 {
margin: 0;
font-size: var(--lead-type-panel-title);
}
.checkout-form-heading p:last-child {
margin: var(--space-2) 0 0;
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
line-height: 1.55;
}
.checkout-amount-region {
margin-bottom: var(--space-5);
}
.checkout-amount {
display: flex;
min-height: 3.15rem;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin: var(--space-4) 0 0;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--lead-site-border);
border-radius: var(--corner-radius-md);
background: var(--lead-site-field-surface);
font-size: 1rem;
font-weight: var(--project-weight-strong);
color: var(--lead-site-text);
}
.checkout-order-summary {
padding: var(--space-5);
border: 1px solid var(--lead-site-border);
border-radius: var(--project-radius-card);
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--lead-site-icon-surface) 82%, transparent),
var(--lead-site-card-surface)
);
}
.checkout-order-summary h2 {
margin: var(--space-1) 0 var(--space-3);
font-size: 1.25rem;
}
.checkout-order-summary ul {
display: grid;
gap: var(--space-2);
margin: 0;
padding-left: 1.1rem;
}
.checkout-order-summary li {
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
line-height: 1.5;
}
.checkout-order-summary a {
color: var(--lead-site-teal);
font-weight: var(--project-weight-strong);
}
.self-pay-summary {
margin-bottom: var(--space-5);
padding: var(--space-5);
border: 1px solid var(--lead-site-border);
border-radius: var(--project-radius-card);
background: var(--lead-site-field-surface);
}
.self-pay-summary-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: baseline;
justify-content: space-between;
}
.self-pay-summary h2 {
margin: 0;
font-size: 1.3rem;
line-height: 1.2;
}
.self-pay-summary-price {
color: var(--lead-site-teal);
font-size: 1.2rem;
font-weight: var(--project-weight-strong);
}
.self-pay-summary-desc,
.self-pay-summary-note {
margin: var(--space-3) 0 0;
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
line-height: 1.55;
}
.self-pay-summary-note {
padding-top: var(--space-3);
border-top: 1px solid var(--lead-site-border);
}
/* Express digital-wallet region (Apple Pay / Google Pay). Hidden by default;
checkout.js unhides it only when at least one wallet initializes. */
.wallet-region {
display: grid;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.wallet-region[hidden] {
display: none;
}
.wallet-eyebrow {
margin: 0;
font-size: var(--typography-font-size-xs, 0.75rem);
font-weight: var(--typography-font-weight-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--lead-site-muted);
}
.wallet-buttons {
display: grid;
gap: var(--space-2);
}
/* Apple Pay's own button styling (Square renders into our element). */
.apple-pay-button {
-webkit-appearance: -apple-pay-button;
appearance: -apple-pay-button;
-apple-pay-button-type: plain;
-apple-pay-button-style: black;
height: 3.2rem;
border-radius: var(--corner-radius-md);
cursor: pointer;
}
/* Google Pay injects its own button; just reserve height. */
.google-pay-button {
min-height: 3.2rem;
}
.wallet-divider {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--typography-font-size-sm);
color: var(--lead-site-muted);
}
.wallet-divider::before,
.wallet-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--lead-site-border);
}
@media (prefers-color-scheme: dark) {
.apple-pay-button {
-apple-pay-button-style: white;
}
}
[data-theme="dark"] .apple-pay-button {
-apple-pay-button-style: white;
}
[data-theme="light"] .apple-pay-button {
-apple-pay-button-style: black;
}
/* Square injects its card iframe here. */
.card-container {
min-height: 2.75rem;
padding: 0.45rem var(--space-2);
background: var(--lead-site-field-surface);
border: 1px solid var(--lead-site-border);
border-radius: var(--corner-radius-md);
}
/* Label row for the Square card field: field label + "Secured by Square". */
.card-field-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
}
.card-secured {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: var(--typography-font-size-sm);
font-weight: var(--typography-font-weight-medium, 500);
color: var(--lead-site-muted);
}
.card-secured .lucide {
color: var(--project-accent-success, var(--lead-site-muted));
}
/* Accepted-card trust row beneath the card field (air-gapped, token-driven). */
.accepted-cards {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin: var(--space-3) 0 0;
padding: 0;
list-style: none;
}
.accepted-cards li {
font-size: var(--typography-font-size-xs, 0.75rem);
font-weight: var(--typography-font-weight-semibold);
letter-spacing: 0.02em;
color: var(--lead-site-muted);
}
.accepted-cards li:not(:first-child) {
padding: 0.15rem 0.5rem;
border: 1px solid var(--lead-site-border);
border-radius: var(--corner-radius-sm, 0.375rem);
}
.accepted-cards li:first-child {
display: inline-flex;
align-items: center;
color: var(--lead-site-text);
}
.checkout-form .form-footer {
display: grid;
gap: var(--space-3);
margin-top: var(--space-5);
}
.checkout-form .form-footer .button {
width: 100%;
min-height: 3.2rem;
}
.form-status[data-state="pending"] {
color: var(--project-accent-info, var(--lead-site-muted));
}
/* Tier (package) selection */
.tier-fieldset {
border: none;
margin: 0;
padding: 0;
}
.field-legend {
font-size: var(--typography-font-size-sm);
font-weight: var(--typography-font-weight-semibold);
color: var(--lead-site-text);
margin-bottom: var(--space-2);
padding: 0;
}
.tier-options {
display: grid;
gap: 0.625rem;
}
.tier-loading {
margin: 0;
font-size: var(--typography-font-size-sm);
color: var(--lead-site-muted);
}
.tier-option {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: 0.85rem var(--space-4);
border: 1px solid var(--lead-site-border);
border-radius: var(--corner-radius-md);
background: var(--lead-site-field-surface);
cursor: pointer;
}
.tier-option[data-selected="true"] {
border-color: var(--lead-site-teal);
background: var(--lead-site-icon-surface);
box-shadow: 0 0 0 1px var(--lead-site-teal);
}
.tier-option[aria-disabled="true"] {
cursor: wait;
}
.tier-option:focus-within {
border-color: var(--lead-site-teal);
box-shadow: 0 0 0 3px var(--lead-site-glow-teal);
}
.tier-option input {
margin-top: 0.2rem;
accent-color: var(--lead-site-teal);
}
.tier-body {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
width: 100%;
}
.tier-option-top {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: baseline;
justify-content: space-between;
}
.tier-name {
font-weight: var(--typography-font-weight-semibold);
color: var(--lead-site-text);
}
.tier-price-choice {
color: var(--lead-site-teal);
font-size: var(--typography-font-size-sm);
font-weight: var(--project-weight-strong);
}
.tier-desc {
font-size: var(--typography-font-size-sm);
color: var(--lead-site-muted);
}
.tier-option-badge {
width: max-content;
max-width: 100%;
padding: 0.15rem var(--space-2);
border: 1px solid var(--lead-site-icon-border);
border-radius: var(--project-radius-pill);
color: var(--lead-site-teal);
font-size: var(--typography-font-size-xs);
font-weight: var(--project-weight-strong);
overflow-wrap: anywhere;
}
.checkout-assurances {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
margin: var(--space-5) 0 0;
}
.checkout-assurances div {
padding-top: var(--space-3);
border-top: 1px solid var(--lead-site-border);
}
.checkout-assurances dt {
color: var(--lead-site-teal);
font-size: var(--project-type-eyebrow);
font-weight: var(--project-weight-strong);
text-transform: uppercase;
}
.checkout-assurances dd {
margin: var(--space-1) 0 0;
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
line-height: 1.5;
}
/* Custom amount input */
.amount-input {
display: flex;
align-items: center;
gap: var(--space-2);
}
.amount-prefix {
font-size: 1.05rem;
color: var(--lead-site-muted);
}
.amount-input input {
flex: 1;
}
.field-help {
margin: var(--space-2) 0 0;
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
line-height: 1.45;
}
/* Checkout hub options */
.checkout-options {
display: grid;
gap: var(--space-4);
}
.checkout-option {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-6);
border: 1px solid var(--lead-site-border);
border-radius: var(--project-radius-card);
background: var(--lead-site-card-surface);
text-decoration: none;
color: var(--lead-site-text);
}
.checkout-option-featured {
border-color: color-mix(in srgb, var(--lead-site-teal) 42%, var(--lead-site-border));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--lead-site-teal) 35%, transparent);
}
.checkout-option-badge {
display: inline-flex;
width: max-content;
max-width: 100%;
min-height: 1.75rem;
align-items: center;
padding: 0 var(--project-pill-padding-x);
border: 1px solid var(--lead-site-icon-border);
border-radius: var(--project-radius-pill);
background: var(--lead-site-icon-surface);
color: var(--lead-site-teal);
font-size: var(--project-type-eyebrow);
font-weight: var(--project-weight-strong);
overflow-wrap: anywhere;
}
.checkout-option:hover,
.checkout-option:focus-visible {
border-color: var(--lead-site-teal);
box-shadow: 0 0 0 3px var(--lead-site-glow-teal);
}
.checkout-option h2 {
margin: 0;
font-size: 1.1rem;
}
.checkout-option p {
margin: 0;
font-size: var(--typography-font-size-sm);
color: var(--lead-site-muted);
line-height: 1.5;
}
.checkout-option ul {
display: grid;
gap: var(--space-2);
margin: var(--space-2) 0 var(--space-3);
padding-left: 1.1rem;
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
line-height: 1.45;
}
.checkout-option-cta {
margin-top: auto;
color: var(--lead-site-teal);
font-weight: var(--typography-font-weight-semibold);
font-size: var(--typography-font-size-sm);
}
.onboarding-expectations div,
.visual-card,
.service-card,
.plan-card,
.proof-card,
.tier-card,
.pricing-note,
.booking-panel,
.lead-form,
.legal-content .legal-note,
.checkout-step-list li,
.checkout-trial-card,
.checkout-next-card,
.checkout-product,
.checkout-form,
.self-pay-summary,
.checkout-order-summary,
.tier-option,
.checkout-option {
position: relative;
isolation: isolate;
overflow: hidden;
transition:
border-color var(--lead-site-card-transition-fast) ease,
box-shadow var(--lead-site-card-transition-fast) ease,
transform var(--lead-site-card-transition-fast) ease;
}
.onboarding-expectations div::before,
.visual-card::before,
.service-card::before,
.plan-card::before,
.proof-card::before,
.tier-card::before,
.pricing-note::before,
.booking-panel::before,
.lead-form::before,
.legal-content .legal-note::before,
.checkout-step-list li::before,
.checkout-trial-card::before,
.checkout-next-card::before,
.checkout-product::before,
.checkout-form::before,
.self-pay-summary::before,
.checkout-order-summary::before,
.tier-option::before,
.checkout-option::before {
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
left: var(--lead-site-card-sheen-overrun);
width: var(--lead-site-card-sheen-width);
pointer-events: none;
content: "";
background:
linear-gradient(
105deg,
transparent 0%,
transparent 24%,
color-mix(in srgb, var(--lead-site-text) 12%, transparent) 46%,
color-mix(in srgb, var(--lead-site-teal) 14%, transparent) 52%,
transparent 76%,
transparent 100%
);
opacity: 0;
transform: translateX(var(--lead-site-card-sheen-start-x))
skewX(var(--lead-site-card-sheen-skew));
transition:
opacity var(--lead-site-card-transition-fast) ease,
transform var(--lead-site-card-transition-medium) ease;
}
.onboarding-expectations div > *,
.visual-card > *,
.service-card > *,
.plan-card > *,
.proof-card > *,
.tier-card > *,
.pricing-note > *,
.booking-panel > *,
.lead-form > *,
.legal-content .legal-note > *,
.checkout-step-list li > *,
.checkout-trial-card > *,
.checkout-next-card > *,
.checkout-product > *,
.checkout-form > *,
.self-pay-summary > *,
.checkout-order-summary > *,
.tier-option > *,
.checkout-option > * {
position: relative;
z-index: 1;
}
.onboarding-expectations div:hover,
.visual-card:hover,
.service-card:hover,
.plan-card:hover,
.proof-card:hover,
.tier-card:hover,
.pricing-note:hover,
.booking-panel:hover,
.booking-panel:focus-within,
.lead-form:hover,
.lead-form:focus-within,
.legal-content .legal-note:hover,
.checkout-step-list li:hover,
.checkout-trial-card:hover,
.checkout-next-card:hover,
.checkout-product:hover,
.checkout-form:hover,
.checkout-form:focus-within,
.self-pay-summary:hover,
.checkout-order-summary:hover,
.tier-option:hover,
.tier-option:focus-within,
.checkout-option:hover,
.checkout-option:focus-visible {
border-color: color-mix(in srgb, var(--lead-site-teal) 42%, var(--lead-site-border));
box-shadow:
var(--project-shadow-card),
0 1.25rem 3rem color-mix(in srgb, var(--lead-site-teal) 14%, transparent);
transform: translateY(var(--lead-site-card-hover-lift));
}
.onboarding-expectations div:hover::before,
.visual-card:hover::before,
.service-card:hover::before,
.plan-card:hover::before,
.proof-card:hover::before,
.tier-card:hover::before,
.pricing-note:hover::before,
.booking-panel:hover::before,
.booking-panel:focus-within::before,
.lead-form:hover::before,
.lead-form:focus-within::before,
.legal-content .legal-note:hover::before,
.checkout-step-list li:hover::before,
.checkout-trial-card:hover::before,
.checkout-next-card:hover::before,
.checkout-product:hover::before,
.checkout-form:hover::before,
.checkout-form:focus-within::before,
.self-pay-summary:hover::before,
.checkout-order-summary:hover::before,
.tier-option:hover::before,
.tier-option:focus-within::before,
.checkout-option:hover::before,
.checkout-option:focus-visible::before {
opacity: 1;
transform: translateX(var(--lead-site-card-sheen-end-x))
skewX(var(--lead-site-card-sheen-skew));
}
@media (max-width: 61.25rem) {
.checkout-band {
grid-template-columns: 1fr;
}
.checkout-band.checkout-action-first .checkout-form {
order: 1;
}
.checkout-band.checkout-action-first .checkout-intro {
order: 2;
}
.checkout-band.checkout-action-first .checkout-form-heading p:last-child,
.checkout-band.checkout-action-first .checkout-order-summary ul {
display: none;
}
.checkout-band.checkout-action-first .checkout-order-summary {
padding: var(--space-4);
}
.checkout-band.checkout-action-first .checkout-order-summary h2 {
margin-bottom: 0;
}
.checkout-band.checkout-action-first .checkout-amount-region {
margin-bottom: var(--space-4);
}
.checkout-intro {
position: static;
}
.checkout-options {
grid-template-columns: 1fr;
}
.checkout-assurances {
grid-template-columns: 1fr;
}
}
/* ──────────────────────────────────────────────────────────────────────────
Self-serve booking scheduler (/booking). The day/time grid is rendered at
runtime by public/booking-engine.js, so these styles must be GLOBAL (not
Astro-scoped) to reach the dynamically-created slot buttons. Colors come from
the --lead-site-* tokens, so dark mode is handled by the token layer.
────────────────────────────────────────────────────────────────────────── */
.booking-intro {
max-width: 48rem;
margin-bottom: var(--space-6);
}
.booking-scheduler {
display: grid;
gap: var(--space-6);
}
.booking-calendar {
display: grid;
gap: var(--space-5);
}
.booking-loading {
margin: 0;
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
}
.booking-zone-note {
margin: 0;
color: var(--lead-site-muted);
font-size: var(--typography-font-size-sm);
}
.booking-day {
display: grid;
gap: var(--space-3);
}
.booking-day-label {
margin: 0;
font-size: var(--typography-font-size-md, 1rem);
font-weight: var(--typography-font-weight-semibold);
color: var(--lead-site-text);
}
.booking-slot-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.booking-slot {
padding: 0.55rem 0.95rem;
border: 1px solid var(--lead-site-border);
border-radius: var(--corner-radius-pill);
background: var(--lead-site-field-surface);
color: var(--lead-site-text);
font: inherit;
font-size: var(--typography-font-size-sm);
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.booking-slot:hover,
.booking-slot:focus-visible {
border-color: var(--lead-site-teal);
background: color-mix(in srgb, var(--lead-site-teal) 12%, transparent);
}
.booking-slot.is-selected {
border-color: var(--lead-site-teal);
background: var(--lead-site-teal);
color: var(--lead-site-teal-foreground, var(--color-white));
font-weight: var(--typography-font-weight-semibold);
}
.booking-intake[hidden] {
display: none;
}
.booking-intake {
display: grid;
gap: var(--space-4);
padding-top: var(--space-5);
border-top: 1px solid var(--lead-site-border);
}
.booking-chosen {
margin: 0;
padding: var(--space-3);
border: 1px solid color-mix(in srgb, var(--lead-site-teal) 36%, var(--lead-site-border));
border-radius: var(--corner-radius-md);
background: color-mix(in srgb, var(--lead-site-teal) 10%, transparent);
color: var(--lead-site-text);
font-size: var(--typography-font-size-sm);
font-weight: var(--typography-font-weight-semibold);
}
.field-optional {
color: var(--lead-site-muted);
font-weight: 400;
}
.booking-confirmed-slot {
font-weight: var(--typography-font-weight-semibold);
}
@media (min-width: 56rem) {
.booking-scheduler {
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
align-items: start;
}
.booking-intake {
padding-top: 0;
padding-left: var(--space-6);
border-top: none;
border-left: 1px solid var(--lead-site-border);
}
.booking-intake[hidden] {
display: none;
}
}