/* ============================================================
Introtwine — Website Styles
Warm "sanctuary" design language.
SELF-CONTAINED: the design-system token layer is inlined below
(vendored verbatim from design-system/tokens/*.css) so the site
ships as one CSS file with no external folder dependency — it
deploys by uploading this single file. design-system/ remains
the in-repo source of truth; if those tokens change, regenerate
the block below from design-system/tokens/*.css.
Hanken Grotesk is loaded via the in each page's .
============================================================ */
/* ====== design-system tokens (inlined) ====== */
:root {
/* --- Color: warm neutral grounds (greige, never gray) --- */
--cream-50: #FDFBF7;
--cream-100: #F9F4EC;
--cream-200: #F2EADD;
--cream-300: #E9DECE;
--cream-400: #DBCDB8;
/* Warm inks (brown-black, never cool) */
--ink-900: #2A241F;
--ink-700: #51493F;
--ink-500: #837A6C;
--ink-300: #ADA293;
/* Hairlines */
--line: #E7DBCA;
--line-strong: #D6C7B0;
/* Coral / terracotta accent (living, saturated) */
--coral-50: #FCEEE8;
--coral-100: #F8E0D6;
--coral-200: #F2C2B1;
--coral-300: #EC9A82;
--coral-400: #E87459;
--coral-500: #DD5C42; /* PRIMARY accent */
--coral-600: #C84B33; /* hover */
--coral-700: #B23F2A; /* press */
/* Warm positive (sage-olive) */
--olive-500: #6E7A4F;
--olive-100: #ECEBDA;
/* Semantic — surfaces */
--surface-page: var(--cream-100);
--surface-card: var(--cream-50);
--surface-sunken: var(--cream-200);
--surface-well: var(--cream-300);
--surface-accent: var(--coral-50);
--surface-inverse: var(--ink-900);
/* Semantic — text */
--text-primary: var(--ink-900);
--text-secondary: var(--ink-500);
--text-muted: var(--ink-300);
--text-accent: var(--coral-600);
--text-on-accent: var(--cream-50);
--text-on-inverse: var(--cream-100);
/* Semantic — accent */
--accent: var(--coral-500);
--accent-hover: var(--coral-600);
--accent-press: var(--coral-700);
--accent-tint: var(--coral-100);
--accent-wash: var(--coral-50);
/* Semantic — borders */
--border: var(--line);
--border-strong: var(--line-strong);
--border-accent: var(--coral-300);
/* Focus — soft warm coral glow, never a hard ring */
--focus-ring: 0 0 0 4px rgba(221, 92, 66, 0.22);
/* Positive / completion */
--positive: var(--olive-500);
--positive-tint: var(--olive-100);
/* --- Typography --- */
--font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system,
'Segoe UI', sans-serif;
--font-ui: var(--font-sans);
--font-num: var(--font-sans);
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--text-2xs: 0.6875rem; /* 11 */
--text-xs: 0.75rem; /* 12 */
--text-sm: 0.875rem; /* 14 */
--text-base: 1rem; /* 16 */
--text-md: 1.125rem; /* 18 */
--text-lg: 1.375rem; /* 22 */
--text-xl: 1.75rem; /* 28 */
--text-2xl: 2.25rem; /* 36 */
--text-3xl: 3rem; /* 48 */
--text-4xl: 4rem; /* 64 */
--text-5xl: 5.25rem; /* 84 */
--leading-tight: 1.08;
--leading-snug: 1.2;
--leading-normal: 1.4;
--leading-relaxed: 1.6;
--leading-loose: 1.8;
--tracking-tight: -0.02em;
--tracking-snug: -0.01em;
--tracking-normal: 0em;
--tracking-wide: 0.04em;
--tracking-wider: 0.14em;
--display-weight: var(--weight-light);
--heading-weight: var(--weight-medium);
--body-weight: var(--weight-regular);
--label-weight: var(--weight-semibold);
/* --- Spacing --- */
--space-0: 0;
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.5rem; /* 24 */
--space-6: 2rem; /* 32 */
--space-7: 3rem; /* 48 */
--space-8: 4rem; /* 64 */
--space-9: 6rem; /* 96 */
--space-10: 8rem; /* 128 */
--space-11: 12rem; /* 192 */
--measure-prose: 38rem;
--measure-narrow: 28rem;
--measure-wide: 72rem;
--gutter-mobile: var(--space-5);
--gutter-desktop: var(--space-8);
/* --- Radius --- */
--radius-xs: 6px;
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-2xl: 36px;
--radius-pill: 999px;
/* --- Elevation (warm brown-tinted, very low alpha) --- */
--shadow-none: none;
--shadow-soft:
0 1px 2px rgba(74, 54, 38, 0.04),
0 6px 18px rgba(74, 54, 38, 0.05);
--shadow-lifted:
0 2px 4px rgba(74, 54, 38, 0.05),
0 14px 40px rgba(74, 54, 38, 0.08);
--shadow-overlay:
0 4px 8px rgba(74, 54, 38, 0.06),
0 30px 70px rgba(74, 54, 38, 0.12);
--shadow-inset: inset 0 1px 2px rgba(74, 54, 38, 0.05);
--scrim: rgba(42, 36, 31, 0.42);
/* --- Motion (slow, soft, reverent) --- */
--dur-instant: 120ms;
--dur-fast: 220ms;
--dur-base: 380ms;
--dur-slow: 680ms;
--dur-reverent: 1200ms;
--ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-inout: cubic-bezier(0.45, 0.05, 0.2, 1);
--ease-thread: cubic-bezier(0.65, 0.0, 0.35, 1);
--ease-entrance: cubic-bezier(0.16, 0.84, 0.44, 1);
--transition-fade: opacity var(--dur-base) var(--ease-soft);
}
@media (prefers-reduced-motion: reduce) {
:root {
--dur-instant: 0ms;
--dur-fast: 0ms;
--dur-base: 0ms;
--dur-slow: 0ms;
--dur-reverent: 0ms;
}
}
/* ====== design-system base (inlined) — warm default canvas ====== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--surface-page);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--body-weight);
line-height: var(--leading-relaxed);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: 'ss01', 'cv01';
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: var(--heading-weight);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-snug);
color: var(--text-primary);
}
p { margin: 0; }
::selection {
background: var(--coral-200);
color: var(--ink-900);
}
* { scrollbar-color: var(--line-strong) transparent; }
/* ---------- Resets / page-level ---------- */
[hidden] { display: none !important; }
html {
scroll-behavior: smooth;
scroll-padding-top: 84px;
}
@media (max-width: 760px) {
html { scroll-padding-top: 116px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
img, svg { display: block; max-width: 100%; }
/* The design system base sets every to the coral accent. The
marketing site colours links per context instead. */
a {
color: inherit;
text-decoration: none;
}
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--surface-inverse);
color: var(--text-on-inverse);
padding: var(--space-2) var(--space-3);
font-size: var(--text-sm);
border-radius: 0 0 var(--radius-sm) 0;
z-index: 100;
}
.skip-link:focus { left: 0; top: 0; }
/* ---------- Focus — soft warm coral glow, never a hard ring ---------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
.btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: var(--radius-sm);
}
/* ---------- Header ---------- */
.site-header {
position: sticky; top: 0; z-index: 50;
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4) clamp(var(--space-5), 4vw, var(--space-8));
background: color-mix(in srgb, var(--surface-page) 86%, transparent);
backdrop-filter: saturate(120%) blur(10px);
-webkit-backdrop-filter: saturate(120%) blur(10px);
border-bottom: 1px solid transparent;
transition: border-color var(--dur-base) var(--ease-soft);
}
.site-header.is-scrolled {
border-bottom-color: var(--border);
}
.brand {
display: inline-flex; align-items: center; gap: var(--space-2);
color: var(--text-primary);
}
.brand-mark { width: 30px; height: 30px; flex: 0 0 auto; color: var(--text-primary); }
.brand-mark .node { fill: var(--accent); }
.brand-word {
font-size: var(--text-lg);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-snug);
line-height: 1;
}
.site-nav {
display: flex; align-items: center; gap: var(--space-3);
font-size: var(--text-sm);
flex: 1;
justify-content: center;
}
.site-nav a {
color: var(--text-secondary);
font-weight: var(--weight-medium);
padding: var(--space-2) 0;
white-space: nowrap;
position: relative;
transition: color var(--dur-fast) var(--ease-soft);
}
.site-nav a:hover { color: var(--text-primary); }
.site-nav a[aria-current="true"] { color: var(--text-primary); }
.site-nav a[aria-current="true"]::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: var(--accent);
}
.nav-sep { color: var(--text-muted); }
.nav-cta {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: 0 var(--space-4);
height: 38px;
border: 1px solid transparent;
border-radius: var(--radius-pill);
background: var(--accent);
color: var(--text-on-accent);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-snug);
white-space: nowrap;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-soft);
}
.nav-cta:hover { background: var(--accent-hover); }
.nav-cta:active { background: var(--accent-press); }
/* ---------- Main / sections ---------- */
main { display: block; }
.section {
padding: clamp(var(--space-8), 9vw, var(--space-9)) clamp(var(--space-5), 5vw, var(--space-8));
position: relative;
}
.section-head {
max-width: var(--measure-wide);
margin: 0 auto clamp(var(--space-6), 5vw, var(--space-8));
text-align: left;
}
.section-head::before {
content: "";
display: block;
width: 40px;
height: 2px;
border-radius: var(--radius-pill);
background: var(--accent);
margin-bottom: var(--space-5);
}
.eyebrow {
display: inline-block;
font-size: var(--text-2xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--text-accent);
margin-bottom: var(--space-4);
}
.section-title {
font-weight: var(--weight-light);
font-size: clamp(var(--text-xl), 4.4vw, var(--text-3xl));
line-height: var(--leading-snug);
letter-spacing: var(--tracking-snug);
color: var(--text-primary);
margin: 0;
max-width: 20ch;
text-wrap: balance;
}
.section-title em {
font-style: normal;
color: var(--text-secondary);
display: block;
}
.section-lede {
font-size: clamp(var(--text-md), 1.8vw, var(--text-lg));
line-height: var(--leading-normal);
color: var(--text-secondary);
margin-top: var(--space-5);
max-width: 42ch;
}
/* ---------- Hero ---------- */
.hero {
padding: clamp(var(--space-7), 7vw, var(--space-9)) clamp(var(--space-5), 5vw, var(--space-8));
max-width: var(--measure-wide);
margin: 0 auto;
text-align: center;
}
.hero-title {
font-weight: var(--weight-light);
font-size: clamp(var(--text-3xl), 6.6vw, var(--text-5xl));
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--text-primary);
margin: 0 auto;
max-width: 16ch;
text-wrap: balance;
}
.hero-title em {
font-style: normal;
color: var(--text-secondary);
}
.hero-sub {
font-size: clamp(var(--text-base), 1.4vw, var(--text-md));
line-height: var(--leading-relaxed);
color: var(--text-secondary);
margin: clamp(var(--space-5), 3vw, var(--space-6)) auto 0;
max-width: 60ch;
text-wrap: pretty;
}
.hero-ctas {
display: flex; align-items: center; justify-content: center;
gap: var(--space-5);
margin-top: clamp(var(--space-6), 4vw, var(--space-7));
flex-wrap: wrap;
}
.hero-caption {
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--text-secondary);
margin: var(--space-4) auto 0;
max-width: 46ch;
text-wrap: pretty;
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--space-2);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-snug);
line-height: 1;
height: 46px;
padding: 0 var(--space-5);
border-radius: var(--radius-pill);
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: background var(--dur-fast) var(--ease-soft),
border-color var(--dur-fast) var(--ease-soft),
color var(--dur-fast) var(--ease-soft);
-webkit-tap-highlight-color: transparent;
}
.btn-primary {
background: var(--accent);
color: var(--text-on-accent);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-press); }
.btn-lg {
height: 56px;
padding: 0 var(--space-6);
font-size: var(--text-md);
}
.btn-text {
display: inline-flex; align-items: center; gap: var(--space-2);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-snug);
color: var(--text-primary);
height: 46px;
padding: 0 var(--space-1);
transition: color var(--dur-fast) var(--ease-soft);
}
.btn-text:hover { color: var(--text-accent); }
/* ---------- Waitlist inline form ---------- */
.waitlist-form {
margin-top: clamp(var(--space-4), 2.5vw, var(--space-5));
}
.waitlist-inline {
display: inline-flex;
align-items: stretch;
justify-content: center;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface-card);
overflow: hidden;
transition: border-color var(--dur-fast) var(--ease-soft),
box-shadow var(--dur-fast) var(--ease-soft);
margin: 0 auto;
}
.waitlist-inline:focus-within {
border-color: var(--border-accent);
box-shadow: var(--focus-ring);
}
.waitlist-email {
width: 220px;
min-width: 0;
padding: var(--space-3) var(--space-4);
border: none;
background: transparent;
color: var(--text-primary);
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: 1;
outline: none;
}
.waitlist-email::placeholder { color: var(--text-muted); }
.waitlist-divider {
width: 1px;
background: var(--border);
flex-shrink: 0;
margin: var(--space-2) 0;
}
.waitlist-submit {
background: transparent;
border: none;
padding: var(--space-3) var(--space-5);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--text-secondary);
white-space: nowrap;
cursor: pointer;
transition: color var(--dur-fast) var(--ease-soft);
line-height: 1;
}
.waitlist-submit:hover { color: var(--text-accent); }
.waitlist-confirm {
font-size: var(--text-base);
color: var(--text-secondary);
margin: var(--space-2) 0 0;
text-align: center;
}
@media (max-width: 760px) {
.waitlist-inline { max-width: 320px; }
.waitlist-email { width: 160px; }
}
/* ---------- Razón ---------- */
.section-razon {
background: var(--surface-sunken);
border-block: 1px solid var(--border);
}
.prose {
max-width: var(--measure-prose);
margin: 0 auto;
}
.prose p {
font-size: clamp(var(--text-md), 1.6vw, var(--text-lg));
line-height: var(--leading-relaxed);
color: var(--text-primary);
margin: 0;
text-wrap: pretty;
}
.prose p + p { margin-top: var(--space-5); }
.prose .pull {
font-weight: var(--weight-light);
font-size: clamp(var(--text-lg), 2.2vw, var(--text-xl));
line-height: var(--leading-snug);
color: var(--text-primary);
margin: var(--space-7) 0 !important;
padding-left: clamp(var(--space-5), 4vw, var(--space-7));
border-left: 2px solid var(--accent);
max-width: 30ch;
}
/* ---------- Proceso ---------- */
.steps {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: var(--measure-wide);
display: flex;
flex-direction: column;
gap: 0;
}
.step {
display: grid;
grid-template-columns: 140px 1fr;
gap: clamp(var(--space-5), 5vw, var(--space-8));
align-items: baseline;
padding: clamp(var(--space-6), 5vw, var(--space-7)) 0;
border-top: 1px solid var(--border);
}
.step:last-child { border-bottom: 1px solid var(--border); }
.step-num {
font-weight: var(--weight-light);
font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
line-height: 1;
color: var(--accent);
letter-spacing: var(--tracking-tight);
font-variant-numeric: tabular-nums;
}
.step-body h3 {
font-weight: var(--weight-medium);
font-size: clamp(var(--text-lg), 2.6vw, var(--text-xl));
line-height: var(--leading-snug);
color: var(--text-primary);
margin: 0 0 var(--space-3);
letter-spacing: var(--tracking-snug);
}
.step-body p {
font-size: clamp(var(--text-base), 1.3vw, var(--text-md));
line-height: var(--leading-relaxed);
color: var(--text-secondary);
margin: 0;
max-width: 56ch;
text-wrap: pretty;
}
/* ---------- Expectativa ---------- */
.section-expectativa {
background: var(--surface-sunken);
border-block: 1px solid var(--border);
}
.pillars {
max-width: var(--measure-wide);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--border);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.pillar {
background: var(--surface-sunken);
padding: clamp(var(--space-6), 4vw, var(--space-7)) clamp(var(--space-5), 3vw, var(--space-6));
}
.pillar-num {
display: block;
font-weight: var(--weight-light);
font-size: var(--text-lg);
color: var(--accent);
margin-bottom: var(--space-5);
letter-spacing: var(--tracking-normal);
}
.pillar h3 {
font-weight: var(--weight-medium);
font-size: clamp(var(--text-lg), 2.4vw, var(--text-xl));
color: var(--text-primary);
margin: 0 0 var(--space-3);
letter-spacing: var(--tracking-snug);
}
.pillar p {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--text-secondary);
margin: 0;
text-wrap: pretty;
}
/* ---------- FAQ ---------- */
.faq-list {
max-width: var(--measure-prose);
margin: 0 auto;
}
.faq-item {
border-top: 1px solid var(--border);
}
.faq-item:last-child {
border-bottom: 1px solid var(--border);
}
.faq-item summary {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: clamp(var(--space-5), 3vw, var(--space-6)) 0;
cursor: pointer;
font-weight: var(--weight-medium);
font-size: clamp(var(--text-md), 1.8vw, var(--text-lg));
line-height: var(--leading-normal);
color: var(--text-primary);
user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary::after {
content: "+";
font-size: var(--text-xl);
font-weight: var(--weight-light);
color: var(--accent);
flex: 0 0 auto;
line-height: 1;
transition: transform var(--dur-base) var(--ease-soft);
display: inline-block;
}
.faq-item[open] > summary::after {
transform: rotate(45deg);
}
.faq-a {
font-size: clamp(var(--text-base), 1.3vw, var(--text-md));
line-height: var(--leading-relaxed);
color: var(--text-secondary);
padding-bottom: clamp(var(--space-5), 3vw, var(--space-6));
margin: 0;
max-width: 56ch;
text-wrap: pretty;
}
/* ---------- Final CTA — warm coral band ---------- */
.cta-final {
text-align: center;
padding: clamp(var(--space-9), 10vw, var(--space-10)) clamp(var(--space-5), 5vw, var(--space-8));
background: var(--accent);
}
.cta-rule {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
margin: 0 auto clamp(var(--space-6), 4vw, var(--space-7));
width: 100%;
max-width: 160px;
}
.cta-rule .rail {
flex: 1;
height: 1px;
background: var(--cream-50);
}
.cta-rule .rail:first-child { opacity: 0.55; }
.cta-rule .rail:last-child { opacity: 0.55; }
.cta-rule .meeting-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--cream-50);
flex: 0 0 auto;
}
.cta-line {
font-weight: var(--weight-light);
font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
line-height: var(--leading-tight);
color: var(--cream-50);
margin: 0 auto;
max-width: 22ch;
letter-spacing: var(--tracking-tight);
text-wrap: balance;
}
.cta-line em {
font-style: normal;
color: var(--coral-100);
}
.cta-q {
font-size: clamp(var(--text-md), 1.8vw, var(--text-lg));
color: var(--coral-100);
margin: clamp(var(--space-6), 4vw, var(--space-7)) 0 clamp(var(--space-6), 4vw, var(--space-6));
}
/* On the coral band, the primary button inverts to a cream pill. */
.cta-final .btn-primary {
background: var(--cream-50);
color: var(--text-accent);
}
.cta-final .btn-primary:hover { background: var(--cream-100); }
.cta-final .btn-primary:active { background: var(--cream-200); }
.cta-final .waitlist-inline {
background: var(--cream-50);
border-color: transparent;
}
.cta-final .waitlist-divider { background: var(--coral-100); }
.cta-final .waitlist-submit { color: var(--text-accent); }
.cta-final .waitlist-submit:hover { color: var(--accent-press); }
.cta-final .waitlist-confirm { color: var(--coral-100); }
/* ---------- Footer ---------- */
.site-footer {
border-top: 1px solid var(--border);
padding: clamp(var(--space-6), 5vw, var(--space-7)) clamp(var(--space-5), 5vw, var(--space-8));
background: var(--surface-page);
}
.footer-inner {
max-width: var(--measure-wide);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
flex-wrap: wrap;
font-size: var(--text-sm);
color: var(--text-muted);
}
.brand-footer .brand-mark { width: 24px; height: 24px; }
.brand-footer .brand-word { font-size: var(--text-md); white-space: nowrap; }
.footer-email {
color: var(--text-secondary);
border-bottom: 1px solid transparent;
white-space: nowrap;
transition: border-color var(--dur-fast) var(--ease-soft);
}
.footer-email:hover { border-bottom-color: var(--text-secondary); }
.footer-legal {
display: flex;
gap: var(--space-4);
font-size: var(--text-sm);
}
.footer-legal a {
color: var(--text-muted);
border-bottom: 1px solid transparent;
transition: color var(--dur-fast) var(--ease-soft),
border-color var(--dur-fast) var(--ease-soft);
}
.footer-legal a:hover {
color: var(--text-secondary);
border-bottom-color: var(--border-strong);
}
.footer-copy { color: var(--text-muted); white-space: nowrap; }
/* ---------- Back to top ---------- */
.back-top {
position: fixed;
bottom: var(--space-6);
right: var(--space-6);
width: 44px;
height: 44px;
border-radius: var(--radius-pill);
background: var(--surface-card);
border: 1px solid var(--border);
color: var(--text-primary);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
box-shadow: var(--shadow-soft);
transition: opacity var(--dur-base) var(--ease-soft),
background var(--dur-fast) var(--ease-soft);
z-index: 40;
}
.back-top svg { width: 18px; height: 18px; }
.back-top.is-visible { opacity: 1; pointer-events: auto; }
.back-top:hover { background: var(--surface-sunken); }
/* ---------- Legal pages ---------- */
.legal-page {
padding: clamp(var(--space-7), 7vw, var(--space-8)) clamp(var(--space-5), 5vw, var(--space-8)) clamp(var(--space-8), 9vw, var(--space-9));
}
.legal-doc {
max-width: var(--measure-prose);
margin: 0 auto;
}
.legal-doc-header {
margin-bottom: clamp(var(--space-7), 7vw, var(--space-8));
padding-bottom: clamp(var(--space-6), 4vw, var(--space-7));
border-bottom: 1px solid var(--border);
}
.legal-doc-header .eyebrow {
margin-bottom: var(--space-4);
}
.legal-doc-header h1 {
font-weight: var(--weight-light);
font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
line-height: var(--leading-snug);
letter-spacing: var(--tracking-snug);
color: var(--text-primary);
margin: 0 0 var(--space-4);
}
.legal-meta {
font-size: var(--text-sm);
color: var(--text-muted);
margin: 0;
}
.legal-doc h2 {
font-weight: var(--weight-medium);
font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
color: var(--text-primary);
margin: clamp(var(--space-7), 5vw, var(--space-8)) 0 var(--space-4);
letter-spacing: var(--tracking-snug);
}
.legal-doc p,
.legal-doc li {
font-size: clamp(var(--text-base), 1.3vw, var(--text-md));
line-height: var(--leading-relaxed);
color: var(--text-secondary);
text-wrap: pretty;
}
.legal-doc p { margin: 0 0 var(--space-4); }
.legal-doc p:last-child { margin-bottom: 0; }
.legal-doc ul {
margin: 0 0 var(--space-4);
padding-left: var(--space-5);
}
.legal-doc li { margin-bottom: var(--space-2); }
.legal-doc li:last-child { margin-bottom: 0; }
.legal-doc strong {
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.legal-doc a {
color: var(--text-accent);
border-bottom: 1px solid var(--border-accent);
transition: color var(--dur-fast) var(--ease-soft),
border-color var(--dur-fast) var(--ease-soft);
}
.legal-doc a:hover {
color: var(--accent-press);
border-bottom-color: var(--accent-press);
}
@media (max-width: 760px) {
.legal-page { padding: var(--space-7) var(--space-5) var(--space-8); }
.legal-doc h2 { margin-top: var(--space-7); }
}
/* ---------- Responsive ---------- */
/* Tablet & below — header stacks: brand+CTA top row, nav links second row */
@media (max-width: 760px) {
.site-header {
flex-wrap: wrap;
padding: var(--space-3) var(--space-4) 0;
gap: var(--space-2);
}
.brand-mark { width: 26px; height: 26px; }
.brand-word { font-size: var(--text-md); }
.brand { order: 1; }
.nav-cta {
order: 2;
height: 34px;
padding: 0 var(--space-3);
font-size: var(--text-xs);
}
.site-nav {
order: 3;
flex: 1 1 100%;
justify-content: center;
gap: var(--space-2);
font-size: var(--text-xs);
padding: var(--space-2) 0 var(--space-3);
margin-top: var(--space-1);
border-top: 1px solid var(--border);
}
.site-nav a { padding: var(--space-1) 0; }
.section { padding: var(--space-8) var(--space-5); }
.section-head { margin-bottom: var(--space-6); }
.hero { padding: var(--space-8) var(--space-5); }
.section-head::before { width: 32px; margin-bottom: var(--space-4); }
.cta-rule { gap: var(--space-2); max-width: 140px; }
.hero-title {
font-size: clamp(var(--text-2xl), 8.5vw, var(--text-3xl));
line-height: var(--leading-snug);
max-width: none;
}
.hero-title br { display: none; }
.hero-title em { display: block; margin-top: var(--space-1); }
.hero-sub {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
margin-top: var(--space-5);
max-width: 36ch;
}
.hero-ctas {
gap: var(--space-2);
margin-top: var(--space-6);
flex-direction: column;
align-items: stretch;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.btn-text {
justify-content: center;
color: var(--text-secondary);
}
.section-title { font-size: clamp(var(--text-xl), 7vw, var(--text-2xl)); }
.prose p { font-size: var(--text-md); line-height: var(--leading-relaxed); }
.prose p + p { margin-top: var(--space-5); }
.prose .pull {
font-size: var(--text-lg);
line-height: var(--leading-snug);
margin: var(--space-6) 0 !important;
padding-left: var(--space-4);
max-width: none;
}
.step {
grid-template-columns: 1fr;
gap: var(--space-2);
padding: var(--space-6) 0;
}
.step-num { font-size: var(--text-2xl); margin-bottom: var(--space-1); }
.step-body h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.step-body p { font-size: var(--text-base); }
.pillars { grid-template-columns: 1fr; gap: 1px; }
.pillar { padding: var(--space-6) var(--space-5); }
.pillar-num { margin-bottom: var(--space-4); }
.faq-item summary { font-size: var(--text-md); }
.faq-a { font-size: var(--text-base); }
.cta-final { padding: var(--space-9) var(--space-5); }
.cta-line { font-size: clamp(var(--text-xl), 7.5vw, var(--text-2xl)); }
.cta-q { margin: var(--space-5) 0 var(--space-6); font-size: var(--text-md); }
.site-footer { padding: var(--space-6) var(--space-5); }
.footer-inner {
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
}
}
/* Phone — tighten further */
@media (max-width: 420px) {
.section { padding: var(--space-8) var(--space-5); }
.hero { padding: var(--space-7) var(--space-5); }
.section-lede { margin-top: var(--space-5); }
}