/* BioElle landing — base */
/* ============================================================
Tokens — lifted exactly from /docs/mockups/bioelle-redesign.html
============================================================ */
:root {
color-scheme: light;
--cream-page: #FBF4ED;
--cream-deep: #F4ECE2;
--cream-card: #FBF7F2;
--cream-tile: #FDFAF5;
--bone: #E0D6C7;
--linen: #E8DCCB;
--taupe: #A89280;
--blush-faint: #F0E0D4;
--blush-soft: #E8CFC0;
--blush-accent: #D6B5A6;
--rose-mute: #B0857A;
--wine: #4A2C32;
--wine-deep: #2D1A1F;
--ink: #1F1B18;
--ink-soft: #45403B;
--ink-mute: #6E665E;
--ink-faint: #B0A697;
--sage: #94A48A;
--sage-deep: #62725A;
--champagne: #C2A472;
--champagne-deep: #927039;
--rose-attn: #9C5046;
--border-soft: rgba(74, 44, 50, 0.04);
--border: rgba(74, 44, 50, 0.06);
--shadow-flat: 0 1px 2px rgba(74, 44, 50, 0.03);
--shadow-card: 0 1px 3px rgba(74, 44, 50, 0.04), 0 12px 28px rgba(74, 44, 50, 0.04);
--shadow-anchor: 0 2px 6px rgba(74, 44, 50, 0.05), 0 24px 48px rgba(74, 44, 50, 0.08);
--r-sm: 10px;
--r-md: 18px;
--r-lg: 26px;
--r-xl: 32px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', system-ui, sans-serif;
background: linear-gradient(180deg, #FBF4ED 0%, #F4ECE2 50%, #EDE3D5 100%);
color: var(--ink);
-webkit-font-smoothing: antialiased;
line-height: 1.55;
position: relative;
overflow-x: hidden;
}
/* Vellum grain overlay — same SVG fractal noise as the canonical mockup */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.85;
mix-blend-mode: multiply;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
position: relative;
z-index: 1;
}
@media (max-width: 760px) { .container { padding: 0 22px; } }
.num { font-feature-settings: 'tnum'; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.label-mono {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 500;
color: var(--ink-mute);
}
/* =========================== NAV =========================== */
.nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(251, 244, 237, 0.85);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-soft);
}
.nav-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 32px;
}
@media (max-width: 760px) { .nav-row { padding: 16px 22px; } }
.brand-mark {
/* the mark is an outlined SVG — font-size only sets the 0.76em box.
Colour is the brand ink from docs/brand, not the page wine. */
font-size: 24px;
color: #191916;
}
.nav-links {
display: flex;
gap: 32px;
list-style: none;
}
@media (max-width: 760px) { .nav-links { display: none; } }
.nav-links a {
text-decoration: none;
font-size: 13px;
color: var(--ink-soft);
font-weight: 500;
letter-spacing: 0.02em;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--wine); }
.nav-cta {
display: flex;
gap: 12px;
align-items: center;
}
.signin-link {
text-decoration: none;
font-size: 13px;
color: var(--ink-soft);
font-weight: 500;
padding: 10px 4px;
}
@media (max-width: 760px) { .signin-link { display: none; } }
.begin-pill {
appearance: none;
background: var(--wine);
color: var(--cream-page);
border: none;
border-radius: 999px;
padding: 10px 20px;
font-family: inherit;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 4px 14px rgba(74, 44, 50, 0.16);
text-decoration: none;
display: inline-block;
}
.begin-pill:hover { background: var(--wine-deep); }
/* =========================== HERO =========================== */
.hero { padding: 72px 0 64px; position: relative; }
@media (max-width: 760px) { .hero { padding: 40px 0 40px; } }
.hero-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 72px;
align-items: center;
}
@media (max-width: 980px) {
.hero-grid { grid-template-columns: 1fr; gap: 56px; }
.hero-visual { order: -1; }
}
.hero-eyebrow { margin-bottom: 24px; color: var(--rose-mute); }
.hero-headline {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: clamp(40px, 6.2vw, 76px);
line-height: 1.02;
color: var(--wine-deep);
letter-spacing: -0.025em;
margin-bottom: 28px;
}
.hero-headline i { font-style: normal; color: var(--rose-mute); }
.hero-sub {
font-family: 'Inter', sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 1.5;
color: var(--ink-soft);
max-width: 480px;
margin-bottom: 36px;
}
.hero-cta-row {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
}
.ghost-link {
text-decoration: none;
font-size: 13px;
color: var(--wine);
letter-spacing: 0.04em;
font-weight: 500;
border-bottom: 1px solid var(--rose-mute);
padding: 12px 4px;
transition: opacity 0.15s ease;
}
.ghost-link:hover { opacity: 0.7; }
.hero-meta {
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid var(--border-soft);
display: flex;
gap: 36px;
flex-wrap: wrap;
}
.hero-meta-item { font-size: 12px; color: var(--ink-mute); letter-spacing: 0.04em; }
.hero-meta-item .v {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 500;
color: var(--wine);
display: block;
margin-bottom: 4px;
}
/* =========================== PHONE SHELLS =========================== */
.phone {
width: 280px;
height: 580px;
background: #14100D;
border-radius: 42px;
padding: 10px;
box-shadow:
0 0 0 2px rgba(255, 247, 240, 0.5),
0 32px 80px rgba(74, 44, 50, 0.20),
0 12px 30px rgba(74, 44, 50, 0.12);
position: relative;
margin: 0 auto;
}
.phone::before {
content: '';
position: absolute;
top: 18px;
left: 50%;
transform: translateX(-50%);
width: 88px;
height: 24px;
background: #14100D;
border-radius: 14px;
z-index: 5;
}
.phone-screen {
width: 100%;
height: 100%;
background: linear-gradient(180deg, #FCF6EE 0%, #F8F0E5 35%, #F4ECE2 100%);
border-radius: 34px;
padding: 44px 16px 14px;
overflow: hidden;
position: relative;
}
.phone-screen::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
z-index: 0;
}
.phone-screen > * { position: relative; z-index: 1; }
/* Real-screenshot overlay — when a PNG exists in docs/marketing/screenshots/
it overlays the HTML mockup with the actual app capture. If the file
doesn't load (onerror="this.remove()" in the HTML), the underlying
HTML mockup stays visible as a graceful fallback. */
.phone { position: relative; }
.phone .screen-shot {
position: absolute;
inset: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
object-fit: cover;
object-position: top center;
border-radius: 34px;
z-index: 20;
display: block;
}
/* shared screen primitives (lifted from canonical mockup, scaled for 260px viewport) */
.topbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.topbar .label {
font-family: 'IBM Plex Mono', monospace;
font-size: 8px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
color: var(--ink-mute);
margin-bottom: 4px;
}
.topbar .date {
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: 14px;
color: var(--wine);
}
.topbar .date .num-d {
font-family: 'Inter', sans-serif;
font-style: normal;
font-feature-settings: 'tnum';
font-size: 12px;
color: var(--ink);
margin-left: 5px;
letter-spacing: -0.01em;
}
.topbar .avatar {
width: 26px; height: 26px;
border-radius: 999px;
background: linear-gradient(135deg, var(--blush-faint), var(--blush-accent));
color: var(--wine-deep);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 500;
}
.section-caption {
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: 12px;
color: var(--wine);
margin-bottom: 8px;
display: flex;
align-items: baseline;
justify-content: space-between;
}
.section-caption .small {
font-family: 'IBM Plex Mono', monospace;
font-style: normal;
font-size: 7px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 500;
}
.block { margin-bottom: 8px; }
/* anchor — Today hero card */
.anchor {
background: var(--cream-card);
border-radius: 18px;
padding: 16px 14px 14px;
box-shadow: 0 1px 3px rgba(74, 44, 50, 0.04), 0 14px 28px rgba(74, 44, 50, 0.08);
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.anchor::before {
content: '';
position: absolute;
top: -40px; right: -40px;
width: 140px; height: 140px;
background: radial-gradient(circle, rgba(214, 181, 166, 0.28) 0%, transparent 70%);
pointer-events: none;
}
.anchor .row {
display: flex;
justify-content: space-between;
align-items: flex-end;
position: relative;
}
.anchor .intro {
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: 11px;
color: var(--rose-mute);
margin-bottom: 4px;
}
.anchor .num-big {
font-family: 'Inter', sans-serif;
font-feature-settings: 'tnum';
font-size: 48px;
font-weight: 300;
line-height: 0.9;
color: var(--wine-deep);
letter-spacing: -0.04em;
}
.anchor .num-big .of {
font-size: 13px;
font-weight: 400;
color: var(--ink-faint);
margin-left: 2px;
letter-spacing: 0;
}
.anchor .meta { text-align: right; }
.anchor .phase {
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: 14px;
color: var(--wine);
}
.anchor .meta .d {
font-size: 9px;
color: var(--ink-mute);
margin-top: 2px;
letter-spacing: 0.02em;
}
.anchor .bar {
height: 2px;
background: var(--linen);
border-radius: 999px;
margin-top: 12px;
overflow: hidden;
}
.anchor .bar > .fill {
height: 100%;
background: linear-gradient(90deg, var(--rose-mute) 0%, var(--wine) 100%);
border-radius: 999px;
}
.anchor .bar-axis {
display: flex;
justify-content: space-between;
font-family: 'IBM Plex Mono', monospace;
font-size: 7px;
color: var(--ink-faint);
margin-top: 4px;
letter-spacing: 0.1em;
}
/* tiles */
.grid-2x2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.tile {
background: var(--cream-tile);
border-radius: 12px;
padding: 10px 9px;
box-shadow: var(--shadow-flat);
position: relative;
}
.tile .label {
font-family: 'IBM Plex Mono', monospace;
font-size: 7px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 500;
margin-bottom: 5px;
}
.tile .num-tile {
font-feature-settings: 'tnum';
font-size: 16px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.02em;
line-height: 1;
}
.tile .num-tile .u {
font-size: 8px;
font-weight: 400;
color: var(--ink-mute);
margin-left: 2px;
}
.tile .delta { font-size: 8px; color: var(--sage-deep); margin-top: 4px; letter-spacing: 0.02em; }
.tile.warn .delta { color: var(--champagne-deep); }
.tile.attn .delta { color: var(--rose-attn); }
.tile.warn::before, .tile.attn::before {
content: '';
position: absolute;
left: 0; top: 10px; bottom: 10px;
width: 1.5px;
border-radius: 999px;
}
.tile.warn::before { background: var(--champagne); }
.tile.attn::before { background: var(--rose-attn); }
/* protocol checks */
.checks {
background: var(--cream-card);
border-radius: 12px;
padding: 4px 10px;
box-shadow: var(--shadow-flat);
}
.check-row {
display: grid;
grid-template-columns: 14px 1fr auto;
gap: 8px;
align-items: center;
padding: 7px 0;
border-top: 1px solid var(--border-soft);
}
.check-row:first-child { border-top: none; }
.checkbox {
width: 11px; height: 11px;
border-radius: 999px;
border: 1.2px solid var(--ink-faint);
}
.checkbox.is-on {
background: var(--wine);
border-color: var(--wine);
}
.check-row .text { font-size: 10px; color: var(--ink); }
.check-row.done .text { color: var(--ink-faint); text-decoration: line-through; }
.check-row .meta {
font-feature-settings: 'tnum';
font-size: 9px;
color: var(--ink-mute);
letter-spacing: 0;
}
/* cycle ladder block */
.cycle-card {
background: var(--cream-card);
border-radius: 12px;
padding: 12px 10px;
box-shadow: var(--shadow-flat);
}
.cycle-card .head-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
}
.cycle-card .phase-name {
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: 13px;
color: var(--wine);
}
.cycle-card .phase-day {
font-feature-settings: 'tnum';
font-size: 9px;
color: var(--ink-mute);
letter-spacing: 0.04em;
}
.ladder {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 3px;
margin-bottom: 6px;
}
.ladder-step { height: 3px; background: var(--bone); border-radius: 999px; }
.ladder-step.done { background: var(--rose-mute); }
.ladder-step.current { background: var(--wine); box-shadow: 0 0 0 1.5px rgba(74, 44, 50, 0.10); }
.ladder-labels {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 3px;
font-family: 'IBM Plex Mono', monospace;
font-size: 6.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-faint);
text-align: center;
font-weight: 500;
}
.ladder-labels span.current { color: var(--wine); }
.cycle-card .narr {
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: 10.5px;
color: var(--wine-deep);
line-height: 1.4;
margin-top: 8px;
}
/* insight card */
.insight-card {
background: linear-gradient(135deg, var(--blush-faint) 0%, var(--cream-card) 100%);
border-radius: 14px;
padding: 12px 11px;
border: 1px solid rgba(176, 133, 122, 0.10);
}
.insight-card .intro {
font-family: 'IBM Plex Mono', monospace;
font-size: 7px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--rose-mute);
font-weight: 500;
margin-bottom: 6px;
}
.insight-card .quote {
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: 11.5px;
line-height: 1.4;
color: var(--wine-deep);
margin-bottom: 8px;
letter-spacing: -0.005em;
}
.insight-card .ref {
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: 9px;
color: var(--ink-mute);
line-height: 1.4;
}
/* sync footer */
.sync {
display: flex;
align-items: center;
gap: 5px;
margin-top: 10px;
font-family: 'IBM Plex Mono', monospace;
font-size: 7px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-faint);
font-weight: 500;
}
.sync .dot {
width: 4px; height: 4px;
border-radius: 999px;
background: var(--sage);
}
/* cycle screen — calendar */
.cycle-hero { margin-bottom: 10px; }
.cycle-hero .label-mono-sm {
font-family: 'IBM Plex Mono', monospace;
font-size: 7px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--rose-mute);
margin-bottom: 4px;
font-weight: 500;
}
.cycle-hero h2 {
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: 24px;
color: var(--wine-deep);
line-height: 0.95;
letter-spacing: -0.02em;
margin-bottom: 4px;
font-weight: 400;
}
.cycle-hero .sub {
font-family: 'IBM Plex Mono', monospace;
font-size: 7px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-mute);
}
.cal {
background: var(--cream-card);
border-radius: 14px;
padding: 11px 10px;
box-shadow: var(--shadow-flat);
margin-bottom: 8px;
}
.cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
margin-top: 4px;
}
.cal-dow {
font-family: 'IBM Plex Mono', monospace;
font-size: 7px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-faint);
text-align: center;
padding: 3px 0;
font-weight: 500;
}
.cal-cell {
aspect-ratio: 1;
display: grid;
place-items: center;
font-feature-settings: 'tnum';
font-size: 8px;
font-weight: 500;
color: var(--ink-soft);
border-radius: 999px;
position: relative;
}
.cal-cell.muted { color: var(--ink-faint); font-weight: 400; }
.cal-cell.period { color: var(--rose-attn); }
.cal-cell.period::after {
content: '';
position: absolute;
bottom: 1px;
width: 2px; height: 2px;
border-radius: 999px;
background: var(--rose-attn);
}
.cal-cell.fertile { color: var(--sage-deep); }
.cal-cell.fertile::after {
content: '';
position: absolute;
bottom: 1px;
width: 2px; height: 2px;
border-radius: 999px;
background: var(--sage);
}
.cal-cell.today { color: var(--wine); background: rgba(176, 133, 122, 0.10); }
.cal-cell.today::before {
content: '';
position: absolute;
inset: 1px;
border: 1px solid var(--wine);
border-radius: 999px;
}
/* labs marker card */
.labs-hero { margin-bottom: 10px; }
.labs-hero h2 {
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: 18px;
color: var(--wine-deep);
line-height: 1.05;
letter-spacing: -0.015em;
margin-bottom: 4px;
font-weight: 400;
}
.labs-hero .sub {
font-family: 'IBM Plex Mono', monospace;
font-size: 6.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-mute);
}
.marker-card {
background: var(--cream-card);
border-radius: 14px;
padding: 12px 11px 10px;
box-shadow: var(--shadow-flat);
margin-bottom: 8px;
}
.marker-card h4 {
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: 12px;
color: var(--wine);
margin-bottom: 8px;
font-weight: 400;
}
.marker-card h4 .small {
font-family: 'IBM Plex Mono', monospace;
font-style: normal;
font-size: 6px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
margin-left: 6px;
font-weight: 500;
}
.marker {
padding: 7px 0;
border-top: 1px solid var(--border-soft);
}
.marker:first-of-type { border-top: none; padding-top: 2px; }
.marker .head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 4px;
}
.marker .name { font-size: 9px; color: var(--ink); font-weight: 500; }
.marker .v {
font-feature-settings: 'tnum';
font-size: 11px;
font-weight: 600;
color: var(--wine);
letter-spacing: -0.02em;
}
.marker .v .u {
font-size: 7px;
color: var(--ink-mute);
margin-left: 1px;
font-weight: 400;
}
.marker.warn .v { color: var(--champagne-deep); }
.marker.attn .v { color: var(--rose-attn); }
.range {
height: 3px;
background: var(--linen);
border-radius: 999px;
position: relative;
margin: 3px 0;
}
.range .opt {
position: absolute;
height: 100%;
background: var(--sage);
opacity: 0.4;
border-radius: 999px;
top: 0;
}
.range .pin {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 7px; height: 7px;
border-radius: 999px;
background: var(--wine);
border: 1.5px solid var(--cream-card);
box-shadow: 0 0 0 0.5px rgba(74, 44, 50, 0.5);
}
.marker.warn .range .pin { background: var(--champagne-deep); }
.marker.attn .range .pin { background: var(--rose-attn); }
.marker .ref-line {
display: flex;
justify-content: space-between;
margin-top: 3px;
}
.marker .ref-line .status { font-size: 7.5px; color: var(--sage-deep); font-weight: 500; }
.marker.warn .ref-line .status { color: var(--champagne-deep); }
.marker.attn .ref-line .status { color: var(--rose-attn); }
.marker .ref-line .rng {
font-family: 'IBM Plex Mono', monospace;
font-size: 7px;
color: var(--ink-faint);
letter-spacing: 0.06em;
}
/* avatar / body screen */
.avatar-stage { text-align: center; margin-bottom: 10px; }
.avatar-stage .intro {
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: 11px;
color: var(--rose-mute);
margin-bottom: 4px;
}
.figure-frame {
height: 240px;
position: relative;
margin-bottom: 8px;
}
.meas-tag {
position: absolute;
background: var(--cream-card);
border-radius: 999px;
padding: 3px 7px;
font-size: 7px;
color: var(--ink-mute);
letter-spacing: 0.06em;
font-family: 'IBM Plex Mono', monospace;
text-transform: uppercase;
font-weight: 500;
box-shadow: 0 1px 4px rgba(74, 44, 50, 0.08);
display: flex;
align-items: baseline;
gap: 4px;
}
.meas-tag .v {
font-family: 'Inter', sans-serif;
font-size: 9px;
color: var(--wine);
font-weight: 600;
text-transform: none;
letter-spacing: -0.01em;
}
.meas-dot {
position: absolute;
width: 5px; height: 5px;
border-radius: 999px;
background: var(--wine);
box-shadow: 0 0 0 2px rgba(74, 44, 50, 0.10);
}
.avatar-meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
background: var(--cream-card);
border-radius: 14px;
padding: 10px 8px;
box-shadow: var(--shadow-flat);
}
.avatar-meta .ls-stat { text-align: center; }
.avatar-meta .v {
font-feature-settings: 'tnum';
font-size: 12px;
font-weight: 600;
color: var(--wine);
letter-spacing: -0.02em;
line-height: 1;
}
.avatar-meta .v .u {
font-size: 7px;
color: var(--ink-mute);
margin-left: 1px;
font-weight: 400;
}
.avatar-meta .l {
font-family: 'IBM Plex Mono', monospace;
font-size: 6.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-mute);
margin-top: 3px;
font-weight: 500;
}
/* annual cover */
.annual-cover {
background: linear-gradient(135deg, var(--cream-card) 0%, var(--blush-faint) 100%);
border-radius: 14px;
padding: 18px 14px 14px;
border: 1px solid rgba(176, 133, 122, 0.10);
margin-bottom: 8px;
}
.annual-cover .label-mono-sm {
font-family: 'IBM Plex Mono', monospace;
font-size: 7px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--rose-mute);
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(74, 44, 50, 0.06);
font-weight: 500;
}
.annual-cover h2 {
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: 36px;
color: var(--wine-deep);
line-height: 0.92;
margin-bottom: 8px;
letter-spacing: -0.025em;
font-weight: 400;
}
.annual-cover .intro {
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: 10px;
line-height: 1.4;
color: var(--wine);
margin-bottom: 10px;
}
.annual-cover .auth {
padding-top: 8px;
border-top: 1px solid rgba(74, 44, 50, 0.06);
font-family: 'IBM Plex Mono', monospace;
font-size: 6.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 500;
}
.month-strip {
background: var(--cream-card);
border-radius: 14px;
padding: 12px 11px;
box-shadow: var(--shadow-flat);
margin-bottom: 8px;
}
.month-strip h4 {
font-family: 'IBM Plex Mono', monospace;
font-size: 7px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--rose-mute);
margin-bottom: 8px;
font-weight: 500;
}
.month-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 2px;
}
.mcell { aspect-ratio: 0.45; border-radius: 2px; background: var(--linen); }
.mcell.l1 { background: rgba(176, 133, 122, 0.30); }
.mcell.l2 { background: rgba(176, 133, 122, 0.55); }
.mcell.l3 { background: rgba(176, 133, 122, 0.78); }
.mcell.l4 { background: var(--wine); }
.month-axis {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 2px;
margin-top: 5px;
font-family: 'IBM Plex Mono', monospace;
font-size: 6.5px;
color: var(--ink-faint);
text-align: center;
font-weight: 500;
}
.narr-mini {
background: var(--cream-card);
border-radius: 14px;
padding: 12px 11px;
box-shadow: var(--shadow-flat);
}
.narr-mini .label-mono-sm {
font-family: 'IBM Plex Mono', monospace;
font-size: 7px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--rose-mute);
margin-bottom: 8px;
font-weight: 500;
}
.narr-mini p {
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: 9.5px;
line-height: 1.5;
color: var(--wine-deep);
margin-bottom: 5px;
}
.narr-mini .sig {
margin-top: 6px;
font-family: 'IBM Plex Mono', monospace;
font-size: 6.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 500;
}
/* predictions screen */
.pred-intro {
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: 12px;
color: var(--wine);
margin-bottom: 10px;
}
.pred-card {
background: var(--cream-card);
border-radius: 14px;
padding: 11px 10px;
box-shadow: var(--shadow-flat);
margin-bottom: 8px;
}
.pred-card h4 {
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: 11px;
color: var(--wine);
margin-bottom: 8px;
font-weight: 400;
}
.pred-input { margin-bottom: 9px; }
.pred-input:last-child { margin-bottom: 0; }
.pred-input .head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 4px;
}
.pred-input .head .label-mono-sm {
font-family: 'IBM Plex Mono', monospace;
font-size: 7px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 500;
}
.pred-input .head .value {
font-feature-settings: 'tnum';
font-size: 11px;
font-weight: 600;
color: var(--wine);
letter-spacing: -0.02em;
}
.pred-input .head .value .u {
font-size: 7px;
color: var(--ink-mute);
font-weight: 400;
}
.pred-rail {
height: 3px;
background: var(--linen);
border-radius: 999px;
position: relative;
}
.pred-rail .fill {
height: 100%;
background: var(--wine);
border-radius: 999px;
}
.pred-rail .thumb {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 9px; height: 9px;
border-radius: 999px;
background: var(--wine);
border: 2px solid var(--cream-card);
box-shadow: 0 0 0 0.5px rgba(74, 44, 50, 0.4);
}
.pred-outcome {
background: linear-gradient(135deg, var(--blush-faint) 0%, var(--cream-card) 100%);
border-radius: 14px;
padding: 12px 10px;
border: 1px solid rgba(176, 133, 122, 0.10);
margin-bottom: 8px;
}
.pred-outcome .label-mono-sm {
font-family: 'IBM Plex Mono', monospace;
font-size: 7px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--rose-mute);
margin-bottom: 8px;
font-weight: 500;
}
.pred-outcome .grid-2x2 { gap: 5px; margin-bottom: 8px; }
.pred-outcome .pt {
background: rgba(255, 255, 255, 0.55);
border-radius: 9px;
padding: 7px 8px;
}
.pred-outcome .pt .l {
font-family: 'IBM Plex Mono', monospace;
font-size: 6.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 4px;
font-weight: 500;
}
.pred-outcome .pt .v {
font-feature-settings: 'tnum';
font-size: 13px;
font-weight: 600;
color: var(--wine);
letter-spacing: -0.02em;
line-height: 1;
}
.pred-outcome .pt .v .u {
font-size: 7px;
color: var(--ink-mute);
margin-left: 1px;
font-weight: 400;
}
.pred-outcome .pt .delta {
font-size: 7px;
color: var(--sage-deep);
margin-top: 3px;
letter-spacing: 0.04em;
}
.pred-outcome .conf {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid rgba(74, 44, 50, 0.06);
}
.pred-outcome .conf .row {
display: flex;
justify-content: space-between;
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: 9px;
color: var(--ink-mute);
margin-bottom: 3px;
}
.pred-outcome .conf-bar {
height: 2px;
background: var(--linen);
border-radius: 999px;
overflow: hidden;
}
.pred-outcome .conf-bar .fill {
height: 100%;
background: var(--wine);
}
.pred-outcome .disclaimer {
margin-top: 6px;
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: 8.5px;
color: var(--ink-mute);
line-height: 1.4;
}
/* =========================== SECTIONS =========================== */
.section { padding: 72px 0; position: relative; }
@media (max-width: 760px) { .section { padding: 48px 0; } }
.section-head {
text-align: center;
margin-bottom: 44px;
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
.section-head .label-mono { color: var(--rose-mute); margin-bottom: 16px; }
.section-head h2 {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: clamp(32px, 4.5vw, 48px);
line-height: 1.1;
color: var(--wine-deep);
letter-spacing: -0.015em;
margin-bottom: 16px;
}
.section-head h2 i { font-style: normal; color: var(--rose-mute); }
.section-head p {
font-size: 16px;
color: var(--ink-soft);
line-height: 1.6;
max-width: 520px;
margin: 0 auto;
}
/* premise strip */
.premise-strip {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
}
@media (max-width: 760px) { .premise-strip { grid-template-columns: 1fr; gap: 10px; } }
.premise-card {
background: var(--cream-card);
border-radius: var(--r-lg);
padding: 36px 32px;
box-shadow: var(--shadow-flat);
position: relative;
overflow: hidden;
}
.premise-card::before {
content: '';
position: absolute;
left: 0; top: 36px; bottom: 36px;
width: 2px;
background: var(--rose-mute);
border-radius: 999px;
}
.premise-card .quote {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 1.3;
color: var(--wine-deep);
margin-bottom: 18px;
padding-left: 16px;
letter-spacing: -0.005em;
}
.premise-card .body {
font-size: 14px;
line-height: 1.6;
color: var(--ink-soft);
padding-left: 16px;
}
/* lead feature — full width hero card */
.lead-feature {
background: var(--cream-card);
border-radius: var(--r-xl);
padding: 64px 56px;
box-shadow: var(--shadow-card);
border: 1px solid rgba(176, 133, 122, 0.08);
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 64px;
align-items: center;
}
@media (max-width: 980px) {
.lead-feature { grid-template-columns: 1fr; gap: 48px; padding: 44px 32px; }
}
.lead-feature .label-mono { color: var(--rose-mute); margin-bottom: 16px; }
.lead-feature h2 {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: clamp(30px, 4.2vw, 44px);
line-height: 1.08;
color: var(--wine-deep);
letter-spacing: -0.02em;
margin-bottom: 22px;
}
.lead-feature h2 i { font-style: normal; color: var(--rose-mute); }
.lead-feature p {
font-size: 16px;
color: var(--ink-soft);
line-height: 1.65;
margin-bottom: 16px;
}
.lead-feature .frustration {
font-family: 'Inter', sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 1.5;
color: var(--wine);
border-left: 2px solid var(--rose-mute);
padding: 4px 0 4px 20px;
margin: 24px 0;
}
.lead-feature .insight-stack {
display: flex;
flex-direction: column;
gap: 12px;
}
.insight-tile {
background: var(--cream-tile);
border-radius: var(--r-md);
padding: 22px 22px;
box-shadow: var(--shadow-flat);
border-left: 2px solid var(--rose-mute);
}
.insight-tile.warn { border-left-color: var(--champagne); }
.insight-tile .eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--rose-mute);
margin-bottom: 10px;
font-weight: 500;
}
.insight-tile.warn .eyebrow { color: var(--champagne-deep); }
.insight-tile .quote {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
color: var(--wine-deep);
margin-bottom: 10px;
}
.insight-tile .ref {
font-family: 'Inter', sans-serif;
font-size: 12.5px;
font-weight: 400;
color: var(--ink-mute);
line-height: 1.5;
}
/* feature rows */
.feature-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
margin-bottom: 72px;
}
.feature-row:last-child { margin-bottom: 0; }
.feature-row.reverse { direction: rtl; }
.feature-row.reverse > * { direction: ltr; }
@media (max-width: 980px) {
.feature-row, .feature-row.reverse {
grid-template-columns: 1fr;
gap: 48px;
direction: ltr;
}
.feature-row { margin-bottom: 64px; }
}
.feature-text { max-width: 460px; }
.feature-text .label-mono { color: var(--rose-mute); margin-bottom: 16px; }
.feature-text h3 {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: clamp(28px, 4vw, 40px);
line-height: 1.1;
color: var(--wine-deep);
letter-spacing: -0.015em;
margin-bottom: 20px;
}
.feature-text h3 i { font-style: normal; color: var(--rose-mute); }
.feature-text p {
font-size: 15.5px;
color: var(--ink-soft);
line-height: 1.65;
margin-bottom: 18px;
}
.feature-text .bullets {
list-style: none;
margin-top: 24px;
padding: 0;
}
.feature-text .bullets li {
padding: 10px 0;
font-size: 14px;
color: var(--ink-soft);
line-height: 1.5;
border-top: 1px solid var(--border-soft);
display: flex;
gap: 14px;
align-items: baseline;
}
.feature-text .bullets li:last-child { border-bottom: 1px solid var(--border-soft); }
.feature-text .bullets .dot {
width: 4px; height: 4px;
border-radius: 999px;
background: var(--rose-mute);
flex: none;
margin-top: 6px;
}
.feature-visual {
display: flex;
justify-content: center;
align-items: center;
min-height: 460px;
}
/* how steps */
.how-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 32px;
counter-reset: step;
}
@media (max-width: 760px) { .how-grid { grid-template-columns: 1fr; gap: 24px; } }
.how-step {
background: var(--cream-card);
border-radius: var(--r-lg);
padding: 36px 32px;
box-shadow: var(--shadow-flat);
position: relative;
counter-increment: step;
}
.how-step::before {
content: counter(step, decimal-leading-zero);
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: 38px;
color: var(--rose-mute);
line-height: 1;
position: absolute;
top: 32px;
right: 32px;
opacity: 0.6;
}
.how-step h3 {
font-family: 'Inter', sans-serif;
font-size: 19px;
font-weight: 500;
color: var(--wine-deep);
line-height: 1.2;
letter-spacing: -0.005em;
margin-bottom: 18px;
padding-right: 60px;
}
.how-step p {
font-size: 14px;
color: var(--ink-soft);
line-height: 1.6;
}
/* for / ICP */
.for-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 760px) { .for-grid { grid-template-columns: 1fr; gap: 10px; } }
.for-card {
background: var(--cream-card);
border-radius: var(--r-lg);
padding: 36px 32px;
box-shadow: var(--shadow-flat);
}
.for-card .label-mono { color: var(--rose-mute); margin-bottom: 14px; }
.for-card .quote {
font-family: 'Inter', sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 1.3;
color: var(--wine-deep);
margin-bottom: 18px;
letter-spacing: -0.005em;
}
.for-card .body {
font-size: 14px;
color: var(--ink-soft);
line-height: 1.6;
}
/* voice samples */
.voice-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}
@media (max-width: 880px) { .voice-grid { grid-template-columns: 1fr; gap: 12px; } }
.voice-card {
background: var(--cream-card);
border-radius: var(--r-lg);
padding: 28px 26px;
box-shadow: var(--shadow-card);
position: relative;
overflow: hidden;
}
.voice-card::before {
content: '';
position: absolute;
left: 0; top: 28px; bottom: 28px;
width: 3px;
border-radius: 999px;
background: var(--rose-mute);
}
.voice-card.warn::before { background: var(--champagne); }
.voice-card.gradient {
background: linear-gradient(135deg, var(--blush-faint) 0%, var(--cream-card) 100%);
border: 1px solid rgba(176, 133, 122, 0.10);
}
.voice-card.gradient::before { display: none; }
.voice-card .body { padding-left: 14px; }
.voice-card.gradient .body { padding-left: 0; }
.voice-card .eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--rose-mute);
margin-bottom: 12px;
font-weight: 500;
}
.voice-card.warn .eyebrow { color: var(--champagne-deep); }
.voice-card .quote {
font-family: 'Inter', sans-serif;
font-size: 15.5px;
font-weight: 400;
line-height: 1.4;
color: var(--wine-deep);
margin-bottom: 14px;
letter-spacing: -0.005em;
}
.voice-card .ref {
font-size: 12px;
font-weight: 400;
color: var(--ink-mute);
line-height: 1.5;
font-family: 'Inter', sans-serif;
padding-top: 12px;
border-top: 1px solid var(--border-soft);
}
/* privacy */
.privacy-card {
background: var(--cream-card);
border-radius: var(--r-xl);
padding: 56px 48px;
box-shadow: var(--shadow-card);
border: 1px solid rgba(176, 133, 122, 0.10);
max-width: 900px;
margin: 0 auto;
}
@media (max-width: 760px) { .privacy-card { padding: 36px 28px; } }
.privacy-card .label-mono { color: var(--rose-mute); margin-bottom: 16px; }
.privacy-card h2 {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: clamp(28px, 4vw, 40px);
line-height: 1.1;
color: var(--wine-deep);
letter-spacing: -0.015em;
margin-bottom: 36px;
}
.privacy-card h2 i { font-style: normal; color: var(--rose-mute); }
.promise-list { list-style: none; padding: 0; margin: 0; }
.promise-list li {
padding: 18px 0;
border-top: 1px solid var(--border-soft);
display: grid;
grid-template-columns: 36px 1fr;
gap: 18px;
align-items: start;
}
.promise-list li:first-child { padding-top: 8px; border-top: none; }
.promise-list .mark {
font-family: 'Cormorant Garamond', serif;
font-style: normal;
font-size: 22px;
color: var(--rose-mute);
line-height: 1;
padding-top: 4px;
}
.promise-list .text {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: var(--wine-deep);
letter-spacing: -0.005em;
}
.promise-list .text .meta {
display: block;
font-family: 'Inter', sans-serif;
font-style: normal;
font-size: 12.5px;
color: var(--ink-mute);
margin-top: 6px;
line-height: 1.5;
}
/* pricing */
.pricing-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
max-width: 1080px;
margin: 0 auto;
}
@media (max-width: 880px) { .pricing-grid { grid-template-columns: 1fr; gap: 14px; } }
.pricing-card {
background: var(--cream-card);
border-radius: var(--r-lg);
padding: 36px 32px 32px;
box-shadow: var(--shadow-flat);
border: 1px solid var(--border-soft);
position: relative;
display: flex;
flex-direction: column;
}
.pricing-card.featured {
box-shadow: var(--shadow-card);
border: 1px solid var(--rose-mute);
}
.pricing-card.featured::before {
content: 'most chosen';
position: absolute;
top: -12px;
left: 32px;
background: var(--wine);
color: var(--cream-page);
padding: 5px 12px;
border-radius: 999px;
font-family: 'IBM Plex Mono', monospace;
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
}
.pricing-card .tier {
font-family: 'Inter', sans-serif;
font-size: 22px;
font-weight: 500;
color: var(--wine-deep);
margin-bottom: 6px;
letter-spacing: -0.005em;
}
.pricing-card .meta-line {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 24px;
font-weight: 500;
}
.pricing-card .price {
font-feature-settings: 'tnum';
font-size: 38px;
font-weight: 300;
color: var(--wine-deep);
letter-spacing: -0.04em;
line-height: 1;
margin-bottom: 4px;
}
.pricing-card .price .currency {
font-size: 22px;
font-weight: 400;
color: var(--ink-mute);
margin-right: 2px;
}
.pricing-card .price .per {
font-size: 12px;
font-weight: 400;
color: var(--ink-mute);
margin-left: 4px;
letter-spacing: 0;
}
.pricing-card .price-note {
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 400;
color: var(--ink-mute);
margin-bottom: 24px;
}
.pricing-card .features {
list-style: none;
padding: 0;
margin: 0 0 28px 0;
flex: 1;
}
.pricing-card .features li {
padding: 10px 0;
font-size: 13.5px;
color: var(--ink-soft);
line-height: 1.5;
border-top: 1px solid var(--border-soft);
display: flex;
gap: 10px;
align-items: baseline;
}
.pricing-card .features li:last-child { border-bottom: 1px solid var(--border-soft); }
.pricing-card .features .dot {
width: 4px; height: 4px;
border-radius: 999px;
background: var(--rose-mute);
flex: none;
margin-top: 7px;
}
.pricing-card .cta {
width: 100%;
appearance: none;
background: transparent;
border: 1px solid var(--border);
border-radius: 999px;
padding: 14px;
font-family: inherit;
font-size: 11px;
font-weight: 500;
color: var(--wine);
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
display: block;
text-align: center;
}
.pricing-card.featured .cta {
background: var(--wine);
color: var(--cream-page);
border-color: var(--wine);
box-shadow: 0 4px 14px rgba(74, 44, 50, 0.16);
}
.pricing-card.featured .cta:hover { background: var(--wine-deep); }
/* token strip — small row inside Free or below pricing */
.token-strip {
margin-top: 32px;
background: var(--cream-card);
border-radius: var(--r-md);
padding: 22px 28px;
box-shadow: var(--shadow-flat);
display: grid;
grid-template-columns: 1fr auto auto auto;
gap: 24px;
align-items: center;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 880px) {
.token-strip { grid-template-columns: 1fr 1fr; row-gap: 16px; padding: 20px 22px; }
}
.token-strip .lead {
font-family: 'Inter', sans-serif;
font-size: 15px;
font-weight: 400;
color: var(--wine-deep);
line-height: 1.4;
}
.token-strip .lead .small {
display: block;
font-family: 'Inter', sans-serif;
font-style: normal;
font-size: 12px;
color: var(--ink-mute);
margin-top: 4px;
line-height: 1.5;
}
.token-pill {
text-align: center;
}
.token-pill .lab {
font-family: 'IBM Plex Mono', monospace;
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 500;
margin-bottom: 4px;
}
.token-pill .pri {
font-feature-settings: 'tnum';
font-size: 18px;
font-weight: 600;
color: var(--wine);
letter-spacing: -0.02em;
}
/* faq */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
width: 100%;
appearance: none;
background: transparent;
border: none;
padding: 24px 0;
font-family: 'Inter', sans-serif;
font-size: 17px;
font-weight: 500;
color: var(--wine-deep);
letter-spacing: -0.005em;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
line-height: 1.3;
}
.faq-q .plus {
font-family: 'Inter', sans-serif;
font-size: 24px;
color: var(--rose-mute);
font-weight: 300;
transition: transform 0.3s ease;
flex: none;
margin-left: 24px;
}
.faq-item.open .faq-q .plus { transform: rotate(45deg); }
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.open .faq-a {
max-height: 480px;
padding: 0 0 28px;
}
.faq-a p {
font-size: 14.5px;
color: var(--ink-soft);
line-height: 1.65;
max-width: 600px;
}
/* final cta */
.cta-section {
text-align: center;
padding: 88px 0;
position: relative;
}
@media (max-width: 760px) { .cta-section { padding: 80px 0; } }
.cta-section::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 50%, rgba(214, 181, 166, 0.20) 0%, transparent 60%);
pointer-events: none;
}
.cta-section .container { position: relative; }
.cta-section .label-mono { color: var(--rose-mute); margin-bottom: 24px; }
.cta-section h2 {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: clamp(40px, 6vw, 64px);
line-height: 1.05;
color: var(--wine-deep);
letter-spacing: -0.025em;
margin-bottom: 28px;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.cta-section h2 i { font-style: normal; color: var(--rose-mute); }
.cta-section p {
font-family: 'Inter', sans-serif;
font-size: 17px;
font-weight: 400;
color: var(--ink-soft);
margin-bottom: 40px;
line-height: 1.5;
}
.cta-section .row {
display: flex;
gap: 18px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.cta-section .row .begin-pill {
padding: 14px 28px;
font-size: 12px;
}
.cta-section .gp-line {
margin-top: 28px;
font-family: 'Inter', sans-serif;
font-size: 13.5px;
font-weight: 400;
color: var(--ink-mute);
}
/* footer */
footer {
background: var(--cream-deep);
border-top: 1px solid var(--border);
padding: 64px 0 40px;
position: relative;
z-index: 1;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 48px;
}
@media (max-width: 760px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.footer-brand .brand-mark {
font-size: 28px;
margin-bottom: 12px;
display: block;
}
.footer-brand p {
font-family: 'Inter', sans-serif;
font-size: 13.5px;
font-weight: 400;
color: var(--ink-mute);
line-height: 1.55;
max-width: 280px;
}
.footer-col h4 {
font-family: 'IBM Plex Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--rose-mute);
margin-bottom: 18px;
font-weight: 500;
}
.footer-col ul { list-style: none; padding: 0; }
.footer-col li { padding: 6px 0; }
.footer-col a {
text-decoration: none;
font-size: 13px;
color: var(--ink-soft);
transition: color 0.2s;
}
.footer-col a:hover { color: var(--wine); }
.footer-legal {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 24px;
border-top: 1px solid var(--border-soft);
flex-wrap: wrap;
gap: 16px;
}
.footer-legal p {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 400;
color: var(--ink-mute);
line-height: 1.55;
max-width: 540px;
}
.footer-legal .copy {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-faint);
font-weight: 500;
}
/* ============ MOTION + COMPARISON (added 2026-09-17) ============ */
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* 1 · scroll reveal — only active when JS adds .js-reveal to ,
so no-JS and reduced-motion visitors see the full page at once. */
.js-reveal .rv {
opacity: 0;
transform: translateY(18px);
transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
transition-delay: var(--rv-d, 0ms);
will-change: opacity, transform;
}
.js-reveal .rv.is-in { opacity: 1; transform: none; }
/* 2 · data that draws itself */
.js-reveal .rv .bar .fill,
.js-reveal .rv .pred-rail .fill,
.js-reveal .rv .conf-bar .fill {
transform: scaleX(0);
transform-origin: left center;
transition: transform 1.5s cubic-bezier(.22,.61,.36,1) .35s;
}
.js-reveal .rv.is-in .bar .fill,
.js-reveal .rv.is-in .pred-rail .fill,
.js-reveal .rv.is-in .conf-bar .fill { transform: scaleX(1); }
.js-reveal .rv .range .pin,
.js-reveal .rv .pred-rail .thumb { opacity: 0; transition: opacity .6s ease 1.2s; }
.js-reveal .rv.is-in .range .pin,
.js-reveal .rv.is-in .pred-rail .thumb { opacity: 1; }
.spark { margin-top: 16px; }
.spark svg { display:block; width:100%; height:auto; overflow:visible; }
.spark .line { fill:none; stroke: var(--sage-deep); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0; }
.spark .base { stroke: var(--bone); stroke-width:1; stroke-dasharray:2 4; }
.spark .end { fill: var(--sage-deep); }
.spark .cap { display:flex; justify-content:space-between; margin-top:6px; font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.04em; color: var(--ink-mute); }
.js-reveal .rv .spark .line { stroke-dashoffset:1; transition: stroke-dashoffset 2s cubic-bezier(.22,.61,.36,1) .4s; }
.js-reveal .rv.is-in .spark .line { stroke-dashoffset:0; }
.js-reveal .rv .spark .end { opacity:0; transition: opacity .4s ease 2.2s; }
.js-reveal .rv.is-in .spark .end { opacity:1; }
/* 4 · comparison table */
.cmp-wrap {
background: var(--cream-card);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.cmp { width:100%; min-width:680px; border-collapse:collapse; font-size:14px; color: var(--ink-soft); }
.cmp th, .cmp td { padding:18px 20px; text-align:center; border-bottom:1px solid var(--border); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom:0; }
.cmp thead th { vertical-align:bottom; padding-top:28px; font-weight:400; }
.cmp thead .who { display:block; font-family: 'Inter', sans-serif; font-size:16px; font-weight:500; color: var(--wine-deep); line-height:1.2; }
.cmp thead .does { display:block; margin-top:6px; font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-mute); }
.cmp tbody th { text-align:left; font-weight:400; color: var(--ink); width:34%; line-height:1.4; }
.cmp .us { background: var(--blush-faint); }
.cmp thead .us .who { font-style:normal; letter-spacing:.02em; color: var(--wine); }
.cmp .yes { display:inline-block; width:9px; height:9px; border-radius:50%; background: var(--wine); }
.cmp .us .yes { background: var(--wine-deep); }
.cmp .no { color: var(--ink-faint); }
.cmp .part { font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.04em; color: var(--ink-mute); }
.cmp-note { margin:18px auto 0; text-align:center; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.04em; color: var(--ink-mute); }
@media (max-width: 760px) {
.cmp { min-width:0; font-size:12.5px; table-layout:fixed; }
.cmp th, .cmp td { padding:14px 4px; }
.cmp thead td { width:34%; }
.cmp tbody th { padding-left:14px; padding-right:6px; }
.cmp thead th { padding-top:18px; }
.cmp thead .who { font-size:11.5px; }
.cmp thead .does { display:none; }
.cmp .part { font-size:9px; letter-spacing:0; }
.cmp-note { padding:0 12px; line-height:1.6; }
}
.js-reveal .cmp tbody tr { opacity:0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.js-reveal .cmp-wrap.is-in tbody tr { opacity:1; transform:none; }
.js-reveal .cmp-wrap.is-in tbody tr:nth-child(1){transition-delay:.25s}
.js-reveal .cmp-wrap.is-in tbody tr:nth-child(2){transition-delay:.35s}
.js-reveal .cmp-wrap.is-in tbody tr:nth-child(3){transition-delay:.45s}
.js-reveal .cmp-wrap.is-in tbody tr:nth-child(4){transition-delay:.55s}
.js-reveal .cmp-wrap.is-in tbody tr:nth-child(5){transition-delay:.65s}
.js-reveal .cmp-wrap.is-in tbody tr:nth-child(6){transition-delay:.75s}
.js-reveal .cmp-wrap.is-in tbody tr:nth-child(7){transition-delay:.85s}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.rv, .rv * { transition: none !important; }
}
/* ---- tighten pass (2026-09-17) ---- */
@media (min-width: 1100px) { .for-grid.four { grid-template-columns: repeat(4, 1fr); } }
.for-grid.four .for-card { padding: 28px 24px; }
.for-grid.four .for-card .quote { font-size: 18px; }
.more-wrap { text-align: center; margin-top: -16px; }
.more-features:not([hidden]) + .more-wrap { margin-top: 56px; }
.more-btn {
appearance: none; cursor: pointer;
background: transparent; color: var(--wine-deep);
border: 1px solid var(--blush-accent); border-radius: 999px;
padding: 14px 28px;
font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
transition: background .25s ease, border-color .25s ease;
}
.more-btn:hover { background: var(--blush-faint); border-color: var(--rose-mute); }
.more-btn:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
/* ============ MIST + GLASS (added 2026-09-17) ============
The "iOS frosted glass" feel = 3 things together:
(1) soft colour mist behind, (2) translucent blurred panels on top,
(3) a thin light edge + big radius. Warm BioElle palette, not teal. */
:root {
--glass-bg: rgba(253, 250, 245, 0.52);
--glass-bg-strong: rgba(253, 250, 245, 0.68);
--glass-edge: rgba(255, 255, 255, 0.72);
--glass-blur: blur(22px) saturate(165%);
--glass-shadow: 0 10px 40px rgba(74, 44, 50, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.mist { position: relative; isolation: isolate; overflow: hidden; }
.mist::before {
content: '';
position: absolute;
inset: -12% -8%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(38% 46% at 16% 28%, rgba(232, 207, 192, 0.95) 0%, transparent 70%),
radial-gradient(34% 42% at 82% 18%, rgba(148, 164, 138, 0.42) 0%, transparent 72%),
radial-gradient(42% 50% at 72% 78%, rgba(214, 181, 166, 0.80) 0%, transparent 70%),
radial-gradient(30% 38% at 34% 88%, rgba(194, 164, 114, 0.34) 0%, transparent 72%),
radial-gradient(28% 34% at 50% 44%, rgba(255, 255, 255, 0.85) 0%, transparent 70%);
filter: blur(28px);
animation: mist-drift 26s ease-in-out infinite alternate;
}
@keyframes mist-drift {
0% { transform: translate3d(-2%, -1%, 0) scale(1); }
50% { transform: translate3d(2%, 2%, 0) scale(1.06); }
100% { transform: translate3d(-1%, 3%, 0) scale(1.03); }
}
.hero.mist { overflow: hidden; padding-bottom: 112px; }
@media (max-width: 760px) { .hero.mist { padding-bottom: 84px; } }
/* the page rises over the mist as a rounded sheet */
.hero.mist + .section, .reads-marquee + .section {
margin-top: -44px;
border-radius: 44px 44px 0 0;
background: var(--cream-page);
box-shadow: 0 -14px 44px rgba(74, 44, 50, 0.06);
z-index: 2;
}
@media (max-width: 760px) { .hero.mist + .section, .reads-marquee + .section { border-radius: 30px 30px 0 0; margin-top: -30px; } }
/* floating frosted nav */
.nav { background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 12px 16px 0; }
.nav-row {
background: var(--glass-bg);
-webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-edge);
border-radius: 22px;
box-shadow: var(--glass-shadow);
padding: 12px 14px 12px 32px;
}
@media (max-width: 760px) { .nav { padding: 8px 10px 0; } .nav-row { padding: 10px 10px 10px 22px; border-radius: 18px; } }
/* hero facts become one glass bar */
.hero-meta {
border-top: 0;
margin-top: 40px;
padding: 20px 8px;
gap: 0;
background: var(--glass-bg);
-webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-edge);
border-radius: 22px;
box-shadow: var(--glass-shadow);
flex-wrap: nowrap;
}
.hero-meta-item { flex: 1 1 0; padding: 0 20px; border-left: 1px solid rgba(74, 44, 50, 0.10); letter-spacing: 0.01em; }
.hero-meta-item:first-child { border-left: 0; }
.hero-meta-item .v { font-size: 16px; }
@media (max-width: 760px) {
.hero-meta { flex-direction: column; padding: 6px 20px; }
.hero-meta-item { padding: 14px 0; border-left: 0; border-top: 1px solid rgba(74, 44, 50, 0.10); }
.hero-meta-item:first-child { border-top: 0; }
}
/* lead feature: glass card + glass tiles over mist */
#lead.mist { padding-top: 24px; }
#lead.mist::before { -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.lead-feature {
background: var(--glass-bg);
-webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-edge);
box-shadow: var(--glass-shadow);
}
.insight-tile {
background: rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
box-shadow: 0 1px 2px rgba(74, 44, 50, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.cmp-wrap {
background: var(--glass-bg-strong);
border: 1px solid var(--glass-edge);
box-shadow: var(--glass-shadow);
}
.more-btn { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-color: var(--glass-edge); box-shadow: var(--glass-shadow); }
.cta-section.mist { overflow: hidden; }
.cta-section.mist::before { inset: -20% -8%; background:
radial-gradient(40% 60% at 22% 40%, rgba(232, 207, 192, 0.95) 0%, transparent 70%),
radial-gradient(36% 56% at 80% 60%, rgba(148, 164, 138, 0.40) 0%, transparent 72%),
radial-gradient(30% 44% at 50% 50%, rgba(255, 255, 255, 0.85) 0%, transparent 70%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
:root { --glass-bg: rgba(253, 250, 245, 0.92); --glass-bg-strong: rgba(253, 250, 245, 0.96); }
}
@media (prefers-reduced-motion: reduce) { .mist::before { animation: none; } }
/* ---- hero video slot (2026-09-17) ---- */
.hero-video { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 1.2s ease; }
.hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* cream veil keeps the dark headline readable over any footage */
.hero-video::after {
content: ''; position: absolute; inset: 0;
background:
linear-gradient(90deg, rgba(251, 244, 237, 0.90) 0%, rgba(251, 244, 237, 0.72) 42%, rgba(251, 244, 237, 0.28) 100%),
linear-gradient(180deg, rgba(251, 244, 237, 0.35) 0%, transparent 30%, rgba(251, 244, 237, 0.55) 100%);
}
.hero.has-video .hero-video { opacity: 1; }
.hero.has-video.mist::before { opacity: 0.35; }
@media (max-width: 980px) {
.hero-video::after { background: linear-gradient(180deg, rgba(251, 244, 237, 0.55) 0%, rgba(251, 244, 237, 0.86) 55%, rgba(251, 244, 237, 0.92) 100%); }
}
.video-ph {
position: absolute; right: 32px; bottom: 72px; z-index: 3;
display: flex; gap: 12px; align-items: center;
padding: 12px 16px; border-radius: 16px;
background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
border: 1px dashed rgba(74, 44, 50, 0.35);
font-size: 11.5px; line-height: 1.5; color: var(--ink-soft);
}
.video-ph b { color: var(--wine-deep); font-weight: 600; }
.video-ph code { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; }
.video-ph-icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--wine); color: #fff; font-size: 11px; padding-left: 2px; flex: none; }
.hero.has-video .video-ph { display: none; }
@media (max-width: 980px) { .video-ph { position: static; margin: 0 22px 20px; } }
.video-toggle {
position: absolute; right: 32px; bottom: 72px; z-index: 3;
width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
color: var(--wine-deep); font-size: 11px; letter-spacing: 1px;
}
.video-toggle:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
@media (max-width: 760px) { .video-toggle { right: 16px; bottom: 48px; } }
/* ---- nav: full-width bar at the top, shrinks into the floating glass pill on scroll ---- */
.nav { padding: 0; transition: padding .45s cubic-bezier(.22,.61,.36,1); }
.nav-row {
max-width: 100%;
border-radius: 0;
border-color: transparent;
border-bottom-color: rgba(74, 44, 50, 0.06);
background: rgba(253, 250, 245, 0.30);
box-shadow: none;
/* full-bleed bar, but line the contents up with the 1280 container */
padding: 18px max(40px, calc((100vw - 1280px) / 2 + 32px))
18px max(32px, calc((100vw - 1280px) / 2 + 32px));
transition:
max-width .55s cubic-bezier(.22,.61,.36,1),
border-radius .45s cubic-bezier(.22,.61,.36,1),
padding .45s cubic-bezier(.22,.61,.36,1),
background-color .35s ease, border-color .35s ease, box-shadow .45s ease;
}
.nav.is-scrolled { padding: 12px 16px 0; }
.nav.is-scrolled .nav-row {
max-width: 1280px;
border-radius: 22px;
border-color: var(--glass-edge);
background: var(--glass-bg);
box-shadow: var(--glass-shadow);
padding: 12px 14px 12px 32px;
}
@media (max-width: 760px) {
.nav { padding: 0; }
.nav-row { padding: 14px 22px; border-radius: 0; } /* container is 22px under 760px */
.nav.is-scrolled { padding: 8px 10px 0; }
.nav.is-scrolled .nav-row { padding: 10px 10px 10px 22px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { .nav, .nav-row { transition: none; } }
/* ---- nav merges with the top of the page: the hero (mist / video) now runs
underneath it, so the full-width bar is real glass, not a band above the hero ---- */
:root { --nav-h: 78px; }
@media (max-width: 760px) { :root { --nav-h: 64px; } }
.nav { margin-bottom: calc(-1 * var(--nav-h)); }
.hero.mist { padding-top: calc(72px + var(--nav-h)); }
@media (max-width: 760px) { .hero.mist { padding-top: calc(40px + var(--nav-h)); } }
.nav-row {
background: rgba(255, 255, 255, 0.18);
border-bottom-color: rgba(255, 255, 255, 0.55);
box-shadow: 0 1px 0 rgba(74, 44, 50, 0.05);
}
/* hero film: slide the phone left so her face shows beside it, not behind it */
@media (min-width: 981px) {
.hero.has-video .hero-visual .phone { margin-left: 0; margin-right: auto; }
.hero-video video { object-position: 100% 40%; }
}
/* ---- hero film v2 (2026-09-17): no phone over the film, and a much lighter veil ---- */
.hero.has-video .hero-visual { display: none; }
.hero.has-video.mist::before { opacity: 0; }
@media (min-width: 981px) {
.hero.has-video .hero-grid { grid-template-columns: minmax(0, 620px) 1fr; min-height: 600px; }
.hero-video video { object-position: 100% 35%; }
/* cream only where the words are; her side of the frame is left clear */
.hero-video::after {
background:
linear-gradient(90deg, rgba(251, 244, 237, 0.88) 0%, rgba(251, 244, 237, 0.74) 30%, rgba(251, 244, 237, 0.30) 46%, rgba(251, 244, 237, 0) 58%),
linear-gradient(180deg, rgba(251, 244, 237, 0) 80%, rgba(251, 244, 237, 0.35) 100%);
}
}
@media (max-width: 980px) {
/* phone + tablet: the film sits on top as its own picture, words below it */
.hero.has-video.mist { padding-top: 0; }
.hero.has-video .hero-video { position: relative; inset: auto; z-index: 0; height: 78vw; max-height: 560px; }
.hero.has-video .hero-video video { object-position: 82% 30%; }
.hero.has-video .hero-video::after { background: linear-gradient(180deg, rgba(251, 244, 237, 0) 70%, rgba(251, 244, 237, 1) 100%); }
.hero.has-video .hero-grid { padding-top: 12px; }
.hero.has-video .video-toggle { top: calc(78vw - 56px); bottom: auto; right: 16px; }
}
.cmp-title { text-align:center; font-family:'Cormorant Garamond', serif; font-weight:400; font-size:clamp(26px, 3.4vw, 36px); color:var(--wine-deep); letter-spacing:-0.01em; margin:0 0 28px; }
/* ===================== theme layer (ported from the 2026-09-19 mock) ===================== */
.liquid-word { position: relative; display: inline-block; line-height: 1; }
.liquid-word .lw-src { visibility: hidden; } /* superseded below: sr-only, no longer sizes the box */
.nav .brand-mark { font-size: 30px; } /* a touch bigger so the motion reads */
.footer-brand .brand-mark { font-size: 52px; }
.liquid-cta { position: relative; isolation: isolate; overflow: hidden; }
.liquid-cta::before { display: none; } /* drop old radial + mist */
.liquid-cta .liquid-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.liquid-cta .container { position: relative; z-index: 2; }
/* cream veil so copy stays readable; grain on top */
.liquid-cta::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
radial-gradient(60% 70% at 50% 50%, rgba(251,244,237,.72) 0%, rgba(251,244,237,.35) 60%, transparent 100%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E"); }
.liquid-cta .begin-pill { box-shadow: 0 14px 44px rgba(74,44,50,.18); }
.liquid-cta .gp-line { background: rgba(253,250,245,.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
display: inline-block; padding: 10px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.7); }
/* ===== HALO — liquid at low opacity behind app UI (Emerald-style) ===== */
.has-halo { position: relative; }
.halo { position: absolute; inset: -10% -6%; z-index: 0; pointer-events: none; border-radius: 40%;
filter: blur(46px) saturate(1.3); opacity: .38; overflow: hidden; animation: halo-breathe 14s ease-in-out infinite; }
.halo .liquid-bg { width: 100%; height: 100%; display: block; }
@keyframes halo-breathe { 0%,100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.06) rotate(2deg); } }
.has-halo > *:not(.halo) { position: relative; z-index: 1; }
/* hero: halo sits behind the frameless card */
.hero-visual { position: relative; }
.halo-hero { inset: -6% -14%; opacity: .5; }
.hero-visual > .phone { position: relative; z-index: 1; }
/* Did it work?: quieter, wider */
.lead-feature .halo { inset: -16% -10%; opacity: .32; }
/* .halo deliberately does NOT use --dur-ambient. The app's 2.1s breath is for
small live-status accents; this is a page-scale blurred wash behind the
artwork. At 2.1s it throbs. It keeps the slow 14s drift. */
@media (prefers-reduced-motion: reduce) { .halo { animation: none; } }
/* ===== FRAMELESS — every phone mockup, no iPhone shell ===== */
.phone { background: transparent; padding: 0; border-radius: 30px; box-shadow: 0 40px 90px rgba(74,44,50,.20), 0 12px 30px rgba(74,44,50,.10), 0 0 0 1px rgba(255,255,255,.7); }
.phone::before { display: none; }
.phone .screen-shot { inset: 0; width: 100%; height: 100%; border-radius: 30px; object-position: center -46px; }
.phone-screen { border-radius: 30px; padding-top: 22px; }
.hero-visual .phone { width: 300px; height: 620px; }
/* bleed: hero card runs under the cream sheet */
@media (min-width: 981px) { .hero-visual .phone { margin-bottom: -70px; } }
/* ===== "READS" MARQUEE ===== */
.reads-marquee { position: relative; z-index: 3; background: var(--cream-page); display: flex; align-items: center; gap: 28px; margin: 0; padding: 18px 6vw;
border-top: 1px solid rgba(74,44,50,.08); border-bottom: 1px solid rgba(74,44,50,.08); }
.reads-marquee + .section { margin-top: 0; border-radius: 0; box-shadow: none; }
.hero.mist { padding-bottom: 40px; }
.reads-label { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-mute); flex: none; }
.reads-track { flex: 1; overflow: hidden; display: flex; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.reads-row { display: flex; align-items: center; gap: 22px; padding-right: 22px; white-space: nowrap; flex: none;
font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--wine); animation: reads-scroll 34s linear infinite; }
.reads-row i { font-style: normal; color: var(--blush-accent); }
.reads-marquee:hover .reads-row { animation-play-state: paused; }
@keyframes reads-scroll { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .reads-row { animation: none; } }
/* ===== COVERAGE section (Oura-style pills + card row) ===== */
.coverage { background: var(--cream-page); }
.coverage .sub { color: var(--ink-mute); font-size: 15px; margin: 12px auto 0; max-width: 46ch; }
.cov-pills { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 36px 0 44px; }
.cov-pill { appearance: none; display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 999px; cursor: pointer;
background: transparent; border: 1px solid rgba(74,44,50,.18); color: var(--wine); font: 500 13.5px/1 'Inter', sans-serif; letter-spacing: .01em; transition: all .25s ease; }
.cov-pill i { font-style: normal; font-size: 13px; opacity: .7; }
.cov-pill:hover { border-color: var(--wine); }
.cov-pill.is-on { background: var(--wine-deep); color: var(--cream-page); border-color: var(--wine-deep); box-shadow: 0 0 0 3px rgba(74,44,50,.10); }
.cov-pill.is-on i { opacity: 1; }
.cov-head { display: flex; align-items: baseline; gap: 22px; margin: 0 0 22px; flex-wrap: wrap; }
.cov-count { font-family: 'Cormorant Garamond', serif; font-size: 30px; color: var(--wine-deep); }
.cov-head p { margin: 0; color: var(--ink-mute); font-size: 14.5px; max-width: 60ch; }
.cov-row { display: grid; grid-template-columns: 1.05fr 1fr 1fr 1fr; gap: 16px; align-items: stretch; height: 400px; }
@media (max-width: 1000px) { .cov-row { height: auto; } }
@media (max-width: 1000px) { .cov-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cov-row { grid-template-columns: 1fr; } }
.cov-card { background: var(--cream-card); border: 1px solid var(--border-soft); border-radius: 24px; padding: 22px 22px 18px; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
box-shadow: 0 10px 30px rgba(74,44,50,.05); }
.cov-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.cov-g { font-family: 'Cormorant Garamond', serif; font-size: 24px; color: var(--wine-deep); }
.cov-n { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--rose-mute); }
.cov-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-content: flex-start; }
.cov-chips span { font-size: 12px; color: var(--ink-soft); background: rgba(253,250,245,.9); border: 1px solid rgba(74,44,50,.10); border-radius: 999px; padding: 5px 10px; line-height: 1.2; }
.cov-cap { margin: 16px 0 0; font-size: 13px; color: var(--ink-mute); line-height: 1.5; }
.cov-shot { position: relative; isolation: isolate; overflow: hidden; padding: 0; background: var(--cream-deep); }
.cov-shot img { position: relative; z-index: 1; width: 78%; height: calc(100% - 30px); margin: 30px auto 0; display: block; border-radius: 22px 22px 0 0; box-shadow: 0 24px 50px rgba(74,44,50,.18), 0 0 0 1px rgba(255,255,255,.7); object-fit: cover; object-position: center -38px; }
.cov-shot .halo { opacity: .55; inset: -20%; }
.cov-more { margin-top: 18px; font-size: 13px; color: var(--ink-mute); display: flex; gap: 18px; flex-wrap: wrap; }
.cov-more span { white-space: nowrap; } .cov-more b { font-weight: 500; color: var(--wine); font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.cov-panel { animation: cov-in .35s ease; } @keyframes cov-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* ===== FOUR TILES ===== */
.tiles { background: var(--cream-page); }
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .tile-grid { grid-template-columns: 1fr; } }
.tile { position: relative; isolation: isolate; overflow: hidden; background: var(--cream-deep); border: 1px solid var(--border-soft); border-radius: 28px; padding: 40px 40px 0; min-height: 420px; display: flex; flex-direction: column; }
@media (max-width: 760px) { .tile { padding: 28px 24px 0; min-height: 360px; } }
.tile h3 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.15; color: var(--wine-deep); margin: 0 0 12px; max-width: 22ch; }
.tile p { font-size: 15px; line-height: 1.6; color: var(--ink-mute); margin: 0 0 22px; max-width: 48ch; }
.tile-art { position: relative; margin-top: auto; height: 240px; }
.tile-art img { position: absolute; right: 0; bottom: -40px; width: 62%; max-width: 360px; border-radius: 22px 22px 0 0; box-shadow: 0 24px 60px rgba(74,44,50,.18), 0 0 0 1px rgba(255,255,255,.7); object-fit: cover; object-position: center -48px; height: 300px; z-index: 1; }
@media (max-width: 760px) { .tile-art { height: 200px; } .tile-art img { width: 78%; height: 250px; } }
.tile-art .halo { inset: -10% -10%; opacity: .45; }
.tile-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-bottom: 40px; }
.tile-chips span { font-size: 13px; color: var(--wine); background: rgba(253,250,245,.9); border: 1px solid rgba(74,44,50,.10); border-radius: 999px; padding: 8px 14px; }
.tile-privacy { padding-bottom: 40px; }
.tile-seals { display: flex; gap: 14px; flex-wrap: wrap; margin-top: auto; margin-bottom: 22px; }
.tile-seals span { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 16px; background: rgba(253,250,245,.9); border: 1px solid rgba(74,44,50,.10); font-size: 12px; color: var(--ink-mute); min-width: 120px; }
.tile-seals b { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--wine-deep); }
/* ===== SHEET EDGE #2 — page sheet ends over the liquid CTA, footer rises after it (mirrors the hero) ===== */
#faq { position: relative; z-index: 2; background: var(--cream-page); border-radius: 0 0 44px 44px; margin-bottom: -44px; padding-bottom: calc(var(--section-pad, 96px) + 12px);
box-shadow: 0 14px 44px rgba(74,44,50,.06); }
.liquid-cta { padding-top: 132px; padding-bottom: 132px; }
footer { position: relative; z-index: 2; border-radius: 44px 44px 0 0; margin-top: -44px; border-top: 0; box-shadow: 0 -14px 44px rgba(74,44,50,.06); }
@media (max-width: 760px) { #faq { border-radius: 0 0 30px 30px; margin-bottom: -30px; } footer { border-radius: 30px 30px 0 0; margin-top: -30px; } .liquid-cta { padding-top: 110px; padding-bottom: 110px; } }
/* ===== CREDENTIALS strip ===== */
.cred { padding: 56px 0 48px; background: var(--cream-page); border-top: 1px solid rgba(74,44,50,.06); }
.cred-row { display: flex; align-items: center; gap: 48px; }
.cred-label { font-size: 13px; line-height: 1.35; color: var(--ink-soft); flex: none; }
.cred-logos { flex: 1; display: flex; justify-content: space-around; align-items: center; gap: 32px; flex-wrap: wrap; }
.cred-logo { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; filter: grayscale(1); opacity: .62; transition: opacity .3s, filter .3s; }
.cred-logo:hover { filter: none; opacity: 1; }
.cred-logo img { height: 30px; width: auto; display: block; }
.cred-logo i { font-style: normal; font-family: 'Cormorant Garamond', serif; font-size: 22px; line-height: 1.05; color: var(--wine-deep); text-align: center; letter-spacing: .01em; }
.cred-note { margin-top: 22px; font-size: 12.5px; line-height: 1.6; color: var(--ink-mute); text-align: center; max-width: 72ch; }
@media (max-width: 760px) { .cred-row { flex-direction: column; align-items: flex-start; gap: 22px; } .cred-logos { justify-content: flex-start; gap: 24px 32px; } .cred-note { text-align: left; } }
/* ===== CONTRAST RHYTHM : one dark band + one real accent ===== */
:root { --accent: #9C5046; --accent-deep: #7E3E36; --accent-soft: #C9776A; }
/* Motion tokens lifted from the app (mvp/src/app/globals.css). Every ambient
glow in BioElle breathes on the same clock, so moving site -> app feels like
one product. Change them in globals.css first, then mirror here. */
:root { --dur-ambient: 2100ms; --ease-breath: ease-in-out;
/* #C9A24B — the app's glow gold. Deliberately warmer than --champagne
(#C2A472, which is the app's --warning). Glows only, never fills. */
--glow-gold-rgb: 201, 162, 75; }
/* 2. real accent — CTAs + italic words + active states */
.begin-pill, .nav-cta .begin-pill, .cta-section .row .begin-pill { background: var(--accent); color: #FFF7F2; box-shadow: 0 6px 20px rgba(156,80,70,.28); }
.begin-pill:hover { background: var(--accent-deep); }
.hero-headline i, .section h2 i, .cta-section h2 i, .lead-feature h2 i, .tile h3 i { color: var(--accent); }
.label-mono, .hero-eyebrow, .cov-n, .glass .k, .cred-label { color: var(--accent); }
.cov-pill.is-on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(156,80,70,.14); }
.ghost-link { color: var(--accent-deep); border-color: rgba(156,80,70,.45); }
.reads-row i { color: var(--accent-soft); }
.tile-seals b { color: var(--accent-deep); }
/* rose-mute is too pale for small text on cream — lift it */
.hero-meta-item, .cov-cap, .tile p, .cov-head p { color: var(--ink-soft); }
/* 1. dark band — CTA + footer on wine-deep, liquid glows on top */
.liquid-cta { background: var(--wine-deep); }
.liquid-cta .liquid-bg { opacity: .5; mix-blend-mode: normal; filter: saturate(1.3) contrast(1.1); }
.liquid-cta::after { background:
radial-gradient(60% 70% at 50% 50%, rgba(45,26,31,.50) 0%, rgba(45,26,31,.18) 60%, transparent 100%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"); }
.liquid-cta .label-mono { color: var(--accent-soft); }
.liquid-cta h2 { color: #FBF4ED; }
.liquid-cta h2 i { color: #D9A99A; }
.liquid-cta p { color: rgba(251,244,237,.78); }
.liquid-cta .row .begin-pill { background: #FBF4ED; color: var(--wine-deep); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.liquid-cta .row .begin-pill:hover { background: #fff; }
.liquid-cta .ghost-link { color: #FBF4ED; border-color: rgba(251,244,237,.45); }
.liquid-cta .gp-line { background: rgba(45,26,31,.45); color: rgba(251,244,237,.75); border-color: rgba(255,255,255,.14); }
footer { background: var(--wine-deep); box-shadow: none; border-top: 1px solid rgba(255,255,255,.06); }
footer .brand-mark { color: #FBF4ED; }
footer .footer-brand p, footer .footer-col a, footer .footer-legal p, footer .footer-legal .copy { color: rgba(251,244,237,.62); }
footer .footer-col a:hover { color: #FBF4ED; }
footer .footer-col h4 { color: var(--accent-soft); }
footer .footer-legal { border-color: rgba(255,255,255,.10); }
/* the sheet edge above the CTA now shows cream over dark — keep it */
#faq { box-shadow: 0 24px 60px rgba(45,26,31,.35); }
/* ===== ROSE TRACES — small, repeated, same colour, from hero to band ===== */
/* rule under every eyebrow */
.section-head .label-mono::after, .hero-eyebrow::after, .lead-feature .label-mono::after, .cta-section .label-mono::after {
content: ''; display: block; width: 28px; height: 1px; background: var(--accent); margin: 10px auto 0; opacity: .7; }
.hero-eyebrow::after, .lead-feature .label-mono::after { margin-left: 0; }
.cta-section .label-mono::after { background: var(--accent-soft); }
/* hero stats bar: rose top edge */
.hero-meta { border-top: 2px solid var(--accent); }
/* quote bar */
.frustration { border-left: 2px solid var(--accent); }
/* numbers */
.how-step::before { color: var(--accent); opacity: .55; }
.cov-n, .cov-more b { color: var(--accent); }
/* dots + icons */
.faq-q .plus { color: var(--accent); }
.reads-row i { color: var(--accent); opacity: .55; }
.footer-col h4, .cred-label { color: var(--accent-soft); }
/* chart line picks up the thread */
.spark .line { stroke: var(--accent); }
.spark .dot, .spark circle { fill: var(--accent); }
/* hovers */
.nav-links a:hover, .footer-col a:hover { color: var(--accent); }
.tile:hover, .cov-card:hover { border-color: rgba(156,80,70,.28); }
.cov-pill:hover { border-color: var(--accent); color: var(--accent); }
/* one faint rose band mid-page */
#life-stages { background: linear-gradient(180deg, #F7EAE3 0%, #F4E4DC 100%); border-color: rgba(156,80,70,.10); }
/* whisper of Ember in the mid-page halo */
.lead-feature .halo::after { content: ''; position: absolute; inset: 20% 40% -10% -10%; background: radial-gradient(closest-side, rgba(156,80,70,.55), transparent 70%); filter: blur(30px); }
/* nav wordmark: warm the liquid letters slightly toward rose */
/* ===== LAUNCH SWITCH — or "live" ===== */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
html[data-launch="waitlist"] .live-only, html[data-launch="waitlist"] .signin-link { display: none; }
html[data-launch="live"] .waitlist-only { display: none; }
.waitlist { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; max-width: 520px; margin: 0 auto 26px; position: relative; }
.waitlist input { flex: 1 1 240px; height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(251,244,237,.10);
color: #FBF4ED; font: 400 14px 'Inter', sans-serif; outline: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.waitlist input::placeholder { color: rgba(251,244,237,.55); }
.waitlist input:focus { border-color: var(--accent-soft); box-shadow: 0 0 0 3px rgba(201,119,106,.25); }
.waitlist .begin-pill { height: 48px; display: inline-flex; align-items: center; }
.waitlist .wl-note, .waitlist .wl-done { flex-basis: 100%; text-align: center; font-size: 12.5px; color: rgba(251,244,237,.62); }
.waitlist .wl-done { color: #FBF4ED; }
.waitlist.is-done input, .waitlist.is-done button, .waitlist.is-done .wl-note { display: none; }
/* hero form (light surface) */
.hero .waitlist { justify-content: flex-start; margin: 0 0 22px; max-width: 480px; }
.hero .waitlist input { background: rgba(253,250,245,.85); color: var(--ink); border-color: rgba(74,44,50,.18); }
.hero .waitlist input::placeholder { color: var(--ink-mute); }
.hero .waitlist .wl-note, .hero .waitlist .wl-done { text-align: left; color: var(--ink-mute); }
.hero .waitlist .wl-done { color: var(--wine-deep); }
/* ===== DE-CLAUDE PASS ===== */
h1, h2, .hero-headline, .cta-section h2, .tile h3, .cov-g, .cov-count, .glass .v, .reads-row, .cred-logo i {
font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 120, 'SOFT' 30, 'wght' 380; letter-spacing: -0.015em; }
h1 i, h2 i, .hero-headline i, .cta-section h2 i, .tile h3 i { font-variation-settings: 'opsz' 120, 'SOFT' 60, 'wght' 340; font-style: normal; }
.how-step::before { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 300; }
.hero-headline { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; max-width: 12ch; }
.section h2 { max-width: 22ch; margin-left: auto; margin-right: auto; }
.lead-feature h2 { margin-left: 0; }
.how-step h3 { font-size: 20px; line-height: 1.25; }
.label-mono, .hero-eyebrow, .cred-label, .reads-label, .cov-n, .glass .k, .tile-seals b, .footer-col h4, .cta-section .label-mono {
font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.section-head .label-mono::after, .hero-eyebrow::after, .lead-feature .label-mono::after, .cta-section .label-mono::after { width: 18px; margin-top: 8px; }
.cov-more b, .cov-n { font-family: 'Inter', sans-serif; font-weight: 500; }
.begin-pill, .waitlist .begin-pill, .cta { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500; padding: 12px 22px; }
/* ===== HERO EDIT : bigger, fewer, clearer ===== */
.hero-headline { font-size: clamp(46px, 6vw, 80px); line-height: .96; max-width: none; margin-bottom: 26px; }
.hero-sub { font-size: 17px; max-width: 34ch; margin-bottom: 30px; }
.hero-text { padding-top: 24px; }
.hero-meta { margin-top: 64px; padding: 22px 8px; border-top: 0; background: rgba(253,250,245,.62); }
.hero-meta::before { content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; background: var(--accent); border-radius: 2px; }
.hero-meta { position: relative; }
.hero-meta-item { padding: 0 22px; }
.hero-meta-item .v { display: block; font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 96, 'SOFT' 40, 'wght' 400; font-size: 30px; line-height: 1; color: var(--wine-deep); margin-bottom: 6px; letter-spacing: -0.02em; }
.hero-meta-item span:not(.v) { font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); display: block; }
@media (max-width: 760px) { .hero-meta { flex-wrap: wrap; flex-direction: row; } .hero-meta-item { flex: 1 1 45%; padding: 12px 10px; border: 0; } .hero-meta-item .v { font-size: 26px; } }
/* 5. nav: plain cream, no blur cutting through the video */
.nav-row { background: rgba(251,244,237,.94); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid rgba(255,255,255,.8); box-shadow: 0 6px 24px rgba(74,44,50,.08); }
/* 6. breathing room */
.hero { padding-top: 96px; }
@media (max-width: 760px) { .hero { padding-top: 40px; } .hero-headline { font-size: clamp(38px, 11vw, 46px); } }
/* ===== STICKY STACK (Emerald-style, CSS only) ===== */
@media (min-width: 861px) {
.tile-grid.stack { display: block; }
.tile-grid.stack .tile { position: sticky; top: calc(96px + var(--i) * 22px); margin-bottom: 26px; min-height: 480px; padding: 44px 48px 0;
display: grid; grid-template-columns: 1fr 1.1fr; column-gap: 40px; align-items: start; z-index: calc(1 + var(--i));
box-shadow: 0 -8px 30px rgba(74,44,50,.06), 0 24px 60px rgba(74,44,50,.08); background: var(--cream-deep); }
.tile-grid.stack .tile:nth-child(2) { background: #F4E4DC; } .tile-grid.stack .tile:nth-child(3) { background: var(--cream-card); } .tile-grid.stack .tile:nth-child(4) { background: #EFE6DA; }
.tile-grid.stack .tile h3 { grid-column: 1; font-size: clamp(28px, 2.6vw, 36px); max-width: 16ch; }
.tile-grid.stack .tile p { grid-column: 1; }
.tile-grid.stack .tile .tile-art { grid-column: 2; grid-row: 1 / span 3; height: 100%; min-height: 420px; margin: 0; }
.tile-grid.stack .tile .tile-art img { width: 78%; max-width: 440px; bottom: -60px; right: 0; height: 380px; }
.tile-grid.stack .tile .tile-chips, .tile-grid.stack .tile .tile-seals, .tile-grid.stack .tile .ghost-link { grid-column: 1; }
.tile-grid.stack .tile .tile-chips { margin-top: 8px; padding-bottom: 44px; }
.tile-grid.stack .tile.tile-privacy { padding-bottom: 44px; }
.tile-grid.stack .tile:last-child { margin-bottom: 0; }
.tiles { padding-bottom: 120px; }
}
/* ===== LIVE SCORE CARD ===== */
.score-live { position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; padding: 18px 20px 16px; margin-bottom: 14px;
background: rgba(253,250,245,.72); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 14px 44px rgba(74,44,50,.10), inset 0 1px 0 rgba(255,255,255,.9);
-webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
.score-live .halo { inset: -30% -20%; opacity: .40; z-index: -1; }
.sl-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.sl-phase { color: var(--ink-mute); text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.sl-arc { position: relative; width: 220px; margin: 6px auto 0; }
.sl-arc svg { width: 100%; height: auto; display: block; overflow: visible; }
.sl-track { fill: none; stroke: rgba(74,44,50,.12); stroke-width: 6; stroke-linecap: round; }
.sl-fill { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s cubic-bezier(.22,.61,.36,1) .2s; }
.sl-dot { fill: var(--wine-deep); stroke: #fff; stroke-width: 2; opacity: 0; transition: opacity .4s 1.4s; }
.score-live.is-on .sl-fill { stroke-dashoffset: 21; } .score-live.is-on .sl-dot { opacity: 1; }
.sl-num { position: absolute; left: 0; right: 0; bottom: -4px; text-align: center; font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 144, 'SOFT' 40, 'wght' 380; font-size: 56px; line-height: 1; color: var(--wine-deep); letter-spacing: -0.03em; }
.sl-of { font-size: 16px; color: var(--ink-mute); margin-left: 2px; letter-spacing: 0; }
.sl-foot { margin-top: 14px; font-size: 11.5px; color: var(--ink-mute); text-align: center; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) { .sl-fill { transition: none; } .sl-dot { transition: none; } }
/* ===== LIFE STAGES — one morphing dial ===== */
.stages { display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: center; margin-top: 44px; }
@media (max-width: 900px) { .stages { grid-template-columns: 1fr; gap: 28px; } .stage-dial { margin: 0 auto; } }
.stage-dial { position: relative; isolation: isolate; width: 340px; height: 340px; }
.stage-dial .halo { inset: -18%; opacity: .5; z-index: -1; }
.stage-dial svg { width: 100%; height: 100%; display: block; overflow: visible; transform: rotate(-90deg); }
.sd-ticks { fill: none; stroke: rgba(74,44,50,.28); stroke-width: 10; stroke-linecap: butt; transition: stroke-dasharray 1.1s cubic-bezier(.4,0,.2,1), stroke 1s; }
.sd-arc { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray 1.1s cubic-bezier(.4,0,.2,1), stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1), stroke 1s, opacity .8s; }
.a1 { stroke: #E8CFC0; } .a2 { stroke: #94A48A; } .a3 { stroke: #C2A472; } .a4 { stroke: var(--accent); }
.sd-heat circle { fill: var(--accent); transition: opacity .9s, r .9s; }
.sd-marker { fill: var(--wine-deep); stroke: #FBF4ED; stroke-width: 3; transform-origin: 160px 160px; transition: transform 1.1s cubic-bezier(.4,0,.2,1), opacity .6s; }
.sd-pause line { stroke: var(--wine-deep); stroke-width: 6; stroke-linecap: round; opacity: 0; transition: opacity .6s; }
.sd-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.sd-big { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 144, 'SOFT' 40, 'wght' 380; font-size: 44px; line-height: 1; color: var(--wine-deep); letter-spacing: -0.03em; transition: opacity .35s; }
.sd-small { margin-top: 8px; font-size: 12.5px; color: var(--ink-mute); max-width: 150px; line-height: 1.35; transition: opacity .35s; }
.stage-dial.is-swapping .sd-big, .stage-dial.is-swapping .sd-small { opacity: 0; }
.stage-list { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid rgba(74,44,50,.10); }
.stage-list button { appearance: none; background: none; border: 0; padding: 6px 0; cursor: pointer; font: 400 15px 'Inter', sans-serif; color: var(--ink-mute); position: relative; transition: color .3s; }
.stage-list button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 4s linear; }
.stage-list button.is-on { color: var(--wine-deep); }
.stage-list button.is-on::after { transform: scaleX(1); }
.stages.is-paused .stage-list button.is-on::after { transition: none; }
.st-quote { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 96, 'SOFT' 40, 'wght' 380; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; color: var(--wine-deep); margin-bottom: 12px; transition: opacity .35s, transform .35s; }
.st-body { font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; margin: 0; transition: opacity .35s .05s, transform .35s .05s; }
.stage-text.is-swapping .st-quote, .stage-text.is-swapping .st-body { opacity: 0; transform: translateY(6px); }
.stage-modes { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--ink-mute); }
.stage-modes .sm-label { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .sd-ticks, .sd-arc, .sd-marker { transition: none; } }
.cov-group { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 500; align-self: center; margin-right: 4px; }
.cov-group-do { margin-left: 18px; padding-left: 18px; border-left: 1px solid rgba(74,44,50,.16); }
/* ===== COMPARISON — bigger, raised BioElle column ===== */
.cmp-title { font-family: 'Fraunces', serif; font-size: clamp(30px, 3.4vw, 44px); text-align: center; margin: 56px 0 28px; color: var(--wine-deep); }
.cmp-title i { color: var(--accent); }
.cmp-wrap { overflow: visible; padding-top: 22px; }
.cmp { font-size: 15.5px; }
.cmp th, .cmp td { padding: 20px 22px; }
.cmp tbody th { text-align: left; font-weight: 400; color: var(--ink); font-size: 15.5px; }
.cmp thead th .who { display: block; font-family: 'Fraunces', serif; font-size: 20px; color: var(--wine-deep); }
.cmp thead th .does { display: block; font-size: 12px; color: var(--ink-mute); margin-top: 4px; }
/* the raised column */
.cmp .us { background: var(--accent); color: #FBF4ED; position: relative; }
.cmp thead th.us { border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(156,80,70,.25); }
.cmp thead th.us .who, .cmp thead th.us .does { color: #FBF4ED; }
.cmp thead th.us .does { opacity: .8; }
.cmp tbody tr:last-child td.us { border-radius: 0 0 22px 22px; box-shadow: 0 14px 34px rgba(156,80,70,.25); }
.cmp td.us .yes { background: #FBF4ED; color: var(--accent); }
.cmp td.us .part { color: #FBF4ED; opacity: .9; }
.cmp td.us, .cmp th.us { border-bottom-color: rgba(255,255,255,.18); }
.cmp .yes, .cmp .no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.cmp .yes { background: var(--accent); color: #fff; } .cmp .yes::before { content: '✓'; font-size: 14px; font-weight: 600; }
.cmp .no { background: rgba(74,44,50,.08); color: var(--ink-faint); } .cmp .no::before { content: '×'; font-size: 16px; } .cmp .no::after { display: none; }
.cmp .part { font-family: 'Inter', sans-serif; letter-spacing: 0; }
.cmp-note { font-family: 'Inter', sans-serif; letter-spacing: 0; }
.cmp .part { font-size: 12.5px; color: var(--ink-mute); }
.cmp-note { text-align: center; font-size: 12.5px; color: var(--ink-mute); margin-top: 18px; }
/* ===== COMING SOON PILL ===== */
.soon-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--wine-deep);
background: rgba(253,250,245,.85); border: 1px solid rgba(74,44,50,.14); margin-left: 14px; vertical-align: middle; text-transform: none; letter-spacing: 0; }
.soon-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
box-shadow: 0 0 0 3px rgba(var(--glow-gold-rgb),.20), 0 0 5px 0 rgba(var(--glow-gold-rgb),.28);
animation: soon-dot-breathe var(--dur-ambient) var(--ease-breath) infinite; }
/* The app's own construction: a primary-coloured dot with a GOLD halo, exactly
like .nav-due-disc in globals.css — wine disc, gold breath. The dot keeps the
landing's rose accent; only the glow is gold. Rhythm and the blur/spread/alpha
steps are the app's numbers from .protocol-bar-due, not new ones. */
@keyframes soon-dot-breathe {
0%, 100% { box-shadow: 0 0 0 3px rgba(var(--glow-gold-rgb),.20), 0 0 5px 0 rgba(var(--glow-gold-rgb),.28); }
50% { box-shadow: 0 0 0 3px rgba(var(--glow-gold-rgb),.20), 0 0 13px 3px rgba(var(--glow-gold-rgb),.58); }
}
/* App pattern for reduced motion: stop the loop, hold ABOVE the midpoint so the
dot still reads as live. Mirrors .protocol-bar-due's held value exactly. */
@media (prefers-reduced-motion: reduce) {
.soon-pill::before { animation: none;
box-shadow: 0 0 0 3px rgba(var(--glow-gold-rgb),.20), 0 0 11px 2px rgba(var(--glow-gold-rgb),.46); }
}
html[data-launch="live"] .soon-pill { display: none; }
/* ===== FOOTER WAITLIST ===== */
.footer-wl { margin: 18px 0 0; max-width: 420px; }
.footer-wl .waitlist { justify-content: flex-start; margin: 0; }
.footer-wl .waitlist input { background: rgba(251,244,237,.08); border-color: rgba(255,255,255,.18); color: #FBF4ED; }
.footer-wl .waitlist .wl-note, .footer-wl .waitlist .wl-done { text-align: left; }
.footer-wl .waitlist .begin-pill { background: #FBF4ED; color: var(--wine-deep); box-shadow: none; }
/* section backgrounds (were inline) */
#how, #pricing { background: var(--cream-deep); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
/* ---- specificity fixes after dropping !important (verified by computed-style diff vs the mock) ---- */
.hero.mist { padding-top: 96px; }
@media (max-width: 760px) { .hero.mist { padding-top: 40px; } }
.section-head .label-mono, .lead-feature .label-mono, .feature-text .label-mono, .for-card .label-mono, .privacy-card .label-mono, .cta-section .label-mono { color: var(--accent); }
.liquid-cta .label-mono { color: var(--accent-soft); }
.cmp thead th { padding-top: 20px; }
.pricing-card .cta, .pricing-card.featured .cta { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500; padding: 12px 22px; }
.section-head h2, .lead-feature h2, .cta-section h2, .privacy-card h2, .feature-text h3, .how-step h3, .cmp-title { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 120, 'SOFT' 30, 'wght' 380; letter-spacing: -0.015em; }
.section-head h2 i, .lead-feature h2 i, .cta-section h2 i { font-variation-settings: 'opsz' 120, 'SOFT' 60, 'wght' 340; }
/* waitlist counter — only rendered once /api/waitlist reports >= 50 */
.waitlist .wl-count:not([hidden]) { flex-basis: 100%; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-mute); }
.waitlist .wl-count::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.waitlist .wl-count b { font-weight: 500; color: var(--wine-deep); }
.liquid-cta .wl-count, .footer-wl .wl-count { color: rgba(251,244,237,.62); } .liquid-cta .wl-count b, .footer-wl .wl-count b { color: #FBF4ED; }
.waitlist.is-done .wl-count { display: none; }
/* "Did it work?" — photo | copy | cards (Oura-style photo + UI row) */
.lead-feature.has-photo { grid-template-columns: 0.72fr 1fr 1fr; gap: 40px; padding: 40px 40px 40px 40px; align-items: stretch; }
.lead-photo { margin: 0; border-radius: 22px; overflow: hidden; position: relative; min-height: 420px; box-shadow: 0 24px 60px rgba(74,44,50,.16), 0 0 0 1px rgba(255,255,255,.7); }
.lead-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; display: block; }
.lead-feature.has-photo > div:nth-child(3) { align-self: center; }
@media (max-width: 1180px) { .lead-feature.has-photo { grid-template-columns: 1fr 1fr; } .lead-photo { grid-column: 1 / -1; min-height: 300px; } .lead-photo img { object-position: 50% 25%; } }
@media (max-width: 980px) { .lead-feature.has-photo { grid-template-columns: 1fr; gap: 28px; padding: 24px; } .lead-photo { min-height: 360px; } }
/* ================= BRAND WORDMARK =================
The mark is the outlined Fraunces wordmark, /brand/bioelle-wordmark.svg.
No font is involved. .lw-mark is the static layer and owns the box; a CSS
mask (not ![]()
) so the mark follows currentColor — wine in the nav, cream
in the footer. The liquid canvas sits on top of it. */
.brand-mark .lw-mark {
display: block;
height: 0.76em; /* holds the old cap height — nothing shifts */
aspect-ratio: 6157.2 / 1510; /* ring-o wordmark viewBox */
background: currentColor;
-webkit-mask: url('brand/bioelle-wordmark.svg') no-repeat center / contain;
mask: url('brand/bioelle-wordmark.svg') no-repeat center / contain;
}
/* under 20px tall the ring-o closes up and reads as a smudge — use the plain cut.
the plain cut is a different width, so it needs its own ratio */
.brand-mark.is-small .lw-mark {
aspect-ratio: 6179 / 1510;
-webkit-mask-image: url('brand/bioelle-wordmark-plain.svg');
mask-image: url('brand/bioelle-wordmark-plain.svg');
}
/* the word still exists for screen readers, but no longer sizes the box */
.liquid-word .lw-src {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Entrance: the dot hops into the ring once, on load. Same motion as
brand/bioelle-wordmark-loader.svg, played once instead of looping.
In the nav the inline SVG IS the mark — it rasterises sharper than a CSS
mask at the same size, and there is no swap when the hop finishes.
Reduced motion is handled in landing.js: the node is removed,
which leaves this same SVG sitting at rest. */
.brand-mark.has-entrance .lw-anim {
display: block;
height: 0.76em; /* same box the mask had */
width: auto;
aspect-ratio: 6157.2 / 1510;
color: inherit;
}
/* the launch pill sits under the hero email input, not beside the eyebrow.
its 14px margin-left was the gap from the eyebrow text — on its own row it
just knocks the pill out of line with the input, so it goes. */
.soon-row { margin-top: 14px; }
.soon-row .soon-pill { margin-left: 0; }
html[data-launch="live"] .soon-row { display: none; }
/* How-it-reads close: loop line + proof link (2026-09-24) */
.how-loop { margin-top: 32px; font-weight: 600; }
.how-proof { margin-top: 12px; }
/* Upright serif rule (2026-09-21): no italic inside any heading (2026-09-24) */
h1 i, h2 i, h3 i, h4 i, h1 em, h2 em, h3 em, h4 em { font-style: normal; }
/* Proof stat band (2026-09-24) */
.proof-stat { padding-top: 48px; padding-bottom: 48px; }
.proof-stat .section-head { margin-bottom: 0; }
.proof-stat h2 { font-size: clamp(56px, 9vw, 96px); line-height: 1; }
.proof-stat sup { font-size: 0.6em; }
.proof-stat .proof-fn { margin-top: 14px; font-size: 12px; color: var(--ink-mute); }
.proof-stat .proof-fn i { font-style: normal; }
/* Mobile: nothing may widen the page (live check 2026-09-24).
Decorative halos bled past 390px and the 2-col footer grid could not shrink. */
.section, .cred, .cta-section { overflow-x: clip; }
.footer-grid > * { min-width: 0; }
.footer-col a { overflow-wrap: anywhere; }
/* Footer links: whole link is the tap target, at least 32px tall (was ~17px text in a padded li). */
.footer-col li { padding: 0; }
.footer-col a { display: inline-block; min-height: 32px; padding: 7px 0; line-height: 18px; }
/* Ring dot in brand rose (Kate 2026-09-28). The mask paints one colour, so the
dot is laid over the masked mark at the exact circle position from
bioelle-wordmark.svg (cx 2320.1, cy 513.4, r 95 in a 6157.2 x 1510 box). */
.brand-mark .lw-mark { position: relative; }
.brand-mark .lw-mark::after {
content: ""; position: absolute; border-radius: 50%;
left: 36.105%; top: 27.576%; width: 3.151%; height: 12.848%;
background: #9C5046;
}
footer .brand-mark .lw-mark::after { background: #DE8E80; }
.brand-mark.is-small .lw-mark::after { display: none; }
/* ---- comparison table on phones: fit 5 columns, beat the late desktop overrides above ---- */
@media (max-width: 760px) {
.cmp-wrap { overflow: hidden; padding-top: 14px; }
.cmp-wrap .cmp { width: 100%; min-width: 0; table-layout: fixed; font-size: 12.5px; }
.cmp-wrap .cmp th, .cmp-wrap .cmp td { padding: 12px 2px; }
.cmp-wrap .cmp thead td { width: 30%; }
.cmp-wrap .cmp tbody th { width: 30%; padding: 12px 6px 12px 12px; font-size: 12.5px; line-height: 1.35; }
.cmp-wrap .cmp thead th { padding-top: 12px; padding-bottom: 8px; }
.cmp-wrap .cmp thead th .who { font-size: 10.5px; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: normal; word-break: normal; hyphens: none; }
.cmp-wrap .cmp thead th .does { display: none; }
.cmp-wrap .cmp .yes, .cmp-wrap .cmp .no { width: 22px; height: 22px; }
.cmp-wrap .cmp .part { font-size: 10.5px; line-height: 1.25; display: inline-block; }
.cmp-wrap .cmp thead th.us { border-radius: 14px 14px 0 0; }
.cmp-wrap .cmp tbody tr:last-child td.us { border-radius: 0 0 14px 14px; }
.cmp-note { padding: 0 12px; }
}
/* ---- phone batch 2: footer overlap, pricing strip, list gaps, caption, links, tap targets ---- */
.pricing-card .features li .ft { flex: 1; min-width: 0; }
.faq-intro a, .section-head p a, #faq p a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
/* footer: brand + email block full width so the form cannot sit over the Product column */
.footer-brand { grid-column: 1 / -1; }
.footer-wl { max-width: none; }
.footer-wl .waitlist input { flex: 1 1 100%; min-width: 0; }
.footer-col a { min-height: 44px; display: inline-flex; align-items: center; padding: 0; }
.footer-legal p, .footer-legal .copy { overflow-wrap: anywhere; }
/* "DEXA uploads are free" strip: text full width, the two prices side by side underneath */
.token-strip { grid-template-columns: 1fr 1fr; align-items: start; }
.token-strip .lead { grid-column: 1 / -1; }
.token-strip .token-pill { text-align: left; }
/* chart caption: stop the three bits colliding */
.spark .cap { flex-wrap: wrap; gap: 2px 8px; }
.spark .cap span:nth-child(2) { order: 3; flex-basis: 100%; text-align: center; }
/* two-line link: one underline under the text, not a box border per line */
.how-proof .ghost-link { display: inline; border-bottom: 0; text-decoration: underline; text-decoration-color: rgba(156,80,70,.45); text-underline-offset: 4px; padding: 0; line-height: 1.7; }
/* nav-style tab / chip links: at least 44px to tap */
.stage-tabs button, .life-tabs button, .tabs button, [role="tab"] { min-height: 44px; }
.nav-links a, .mobile-menu a { min-height: 44px; display: inline-flex; align-items: center; }
}
/* The Read feature */
.read-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.read-text .label-mono { color: var(--rose-mute); margin-bottom: 16px; }
.read-text h2 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(32px, 4.5vw, 48px); line-height: 1.1; color: var(--wine-deep); letter-spacing: -0.015em; margin: 0 0 20px; }
.read-text h2 i { font-style: normal; color: var(--rose-mute); }
.read-text > p { max-width: 440px; margin: 0 0 24px; font-size: 16px; line-height: 1.6; }
.read-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.read-points li { padding-left: 18px; position: relative; }
.read-points li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--rose-mute); }
.read-art { position: relative; isolation: isolate; height: 560px; overflow: hidden; border-radius: 28px; background: var(--cream-deep); }
.read-art .halo { opacity: .55; inset: -20%; }
.read-art img { position: relative; z-index: 1; display: block; width: 62%; max-width: 340px; height: calc(100% - 36px); margin: 36px auto 0; border-radius: 22px 22px 0 0; object-fit: cover; object-position: top; box-shadow: 0 24px 60px rgba(74,44,50,.18), 0 0 0 1px rgba(255,255,255,.7); }
@media (max-width: 760px) {
.read-grid { grid-template-columns: 1fr; gap: 32px; }
.read-art { height: 460px; }
.read-art img { width: 70%; }
}