/* ════════════════════════════════════════════════════════════════════════
Letybo USA Homepage — concatenated stylesheet
Sections:
1) Design tokens (variables, @font-face)
2) Homepage styles (§01..§07 + Clinical Evidence modal)
3) Tweaks panel chrome
════════════════════════════════════════════════════════════════════════ */
/* ============ 1) DESIGN TOKENS ============ */
/* ======================================================================
LETYBO — colors_and_type.css
----------------------------------------------------------------------
Single source of truth for the Letybo design system.
Tokens follow the Letybo Brandbook (Hugel × Letybo) and the
K-Aesthetics editorial reference set (Tamburins / Nonfiction /
Sulwhasoo / Aēsop).
====================================================================== */
/* ──────────────────────────────────────────────────────────────────────
FONTS
────────────────────────────────────────────────────────────────────── */
@font-face {
font-family: "Avant Garde Gothic";
src: url("../fonts/ITCAvantGardeGothic-ExtraLight.otf") format("opentype");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Avant Garde Gothic";
src: url("../fonts/ITCAvantGardeGothic-Book.otf") format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Avant Garde Gothic";
src: url("../fonts/ITCAvantGardeGothic-Medium.otf") format("opentype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
:root {
/* ──────────────────────────────────────────────────────────────────
COLOR — PRIMARY PALETTE (per Brandbook §3)
────────────────────────────────────────────────────────────────── */
--letybo-fresh-blue: #00AEEF; /* primary accent (= Hugel Cyan) */
--letybo-soft-blue: #C6EAFB; /* light support tint */
--letybo-purple: #848AFD; /* signature secondary */
--letybo-white: #FFFFFF; /* dominant background */
/* GRADIENT STOPS (per Brandbook §4 – §5) */
--grad-a-1: #838AFB;
--grad-a-2: #AF93ED;
--grad-a-3: #95D3FC;
--grad-a-4: #9AD1D6;
--grad-b-1: #CFEFFF;
--grad-b-2: #E8D8FF;
/* SIGNATURE GRADIENTS — use as backgrounds / product backdrops */
--gradient-light:
linear-gradient(118deg,
var(--grad-a-1) 0%,
var(--grad-a-2) 36%,
var(--grad-a-3) 70%,
var(--grad-a-4) 100%);
--gradient-soft:
linear-gradient(135deg,
var(--grad-b-1) 0%,
var(--grad-b-2) 100%);
--gradient-soft-radial:
radial-gradient(120% 90% at 30% 20%,
var(--grad-b-1) 0%,
var(--grad-b-2) 60%,
#F4ECFF 100%);
/* ATMOSPHERIC LILAC — the photoshoot backdrop seen across imagery */
--letybo-lilac: #D6CDF0;
--letybo-lilac-pale: #EBE5F7;
--letybo-lilac-deep: #B8A9DB;
/* ──────────────────────────────────────────────────────────────────
COLOR — NEUTRALS (Hugel parent system)
────────────────────────────────────────────────────────────────── */
--hugel-aqua: #DFF3F3;
--hugel-charcoal: #414042;
--hugel-dark-grey: #191717;
--ink-100: #0E0E12; /* near-black, body text on light */
--ink-90: #1B1B22;
--ink-80: #2B2B33;
--ink-70: #414042; /* = Hugel charcoal */
--ink-60: #5C5C66;
--ink-50: #7A7A85;
--ink-40: #9C9CA6;
--ink-30: #C2C2CC;
--ink-20: #DEDEE4;
--ink-15: #E8E8ED;
--ink-10: #F1F1F4;
--ink-05: #F8F8FA;
/* ──────────────────────────────────────────────────────────────────
SEMANTIC SURFACES & TEXT
────────────────────────────────────────────────────────────────── */
--bg-canvas: var(--letybo-white);
--bg-soft: #FBFAFE; /* faint lilac-tinted bg */
--bg-tint-blue: var(--letybo-soft-blue);
--bg-tint-lilac: var(--letybo-lilac-pale);
--bg-card: var(--letybo-white);
--bg-inverse: #0B0B0F; /* editorial black mode */
--fg-primary: var(--ink-100);
--fg-secondary: var(--ink-70);
--fg-tertiary: var(--ink-60);
--fg-muted: var(--ink-40);
--fg-inverse: #F4F1FA;
--fg-accent: var(--letybo-fresh-blue);
--fg-accent-2: var(--letybo-purple);
/* PRIMARY ACTION — buttons, primary CTAs (brand decision) */
--action-primary: var(--letybo-purple); /* #848AFD */
--action-primary-hover: #6F76F0;
--action-primary-press: #5860D9;
--action-on-primary: #FFFFFF;
--line-hairline: #ECEAF2;
--line-rule: #DEDAEA;
--line-strong: var(--ink-80);
/* States derived from accents */
--accent-hover: #009BD4; /* fresh blue −8% */
--accent-press: #0084B5; /* fresh blue −16% */
--purple-hover: #6E76EE;
--purple-press: #5860D9;
/* Dark purple variant for small text (<18pt) over light cyan-lavender backgrounds.
Ensures WCAG AA 4.5:1 minimum vs the lightest video frames in §02 Globally Trusted.
Use only when --letybo-purple or --purple-press fail contrast. */
--letybo-purple-ink: #2F35A0;
/* Lightest lavender wash — §03b Proven results pillars background gradient end. */
--lavender-tint: #EFEAFB;
/* ──────────────────────────────────────────────────────────────────
TYPE FAMILIES
────────────────────────────────────────────────────────────────── */
--font-display: "Avant Garde Gothic", "ITC Avant Garde Gothic Pro",
"Century Gothic", "URW Gothic", system-ui, sans-serif;
--font-text: "Avant Garde Gothic", "ITC Avant Garde Gothic Pro",
"Century Gothic", "URW Gothic", system-ui, sans-serif;
--font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace,
SFMono-Regular, Menlo, monospace;
/* WEIGHTS — keep ≤3 weights per layout (brand rule) */
/* Mapped to ITC Avant Garde Gothic available weights: ExtraLight 200, Book 400, Medium 500. */
--w-thin: 200; /* ExtraLight — was 100, fixed (Brief 3) */
--w-light: 400; /* Book — was 300, fixed; alias of --w-book (Brief 3) */
--w-extralight: 200;
--w-book: 400;
--w-medium: 500;
/* ──────────────────────────────────────────────────────────────────
TYPE SCALE — editorial cadence, generous tracking on display
────────────────────────────────────────────────────────────────── */
--fs-display-xl: clamp(64px, 9vw, 144px);
--fs-display-l: clamp(48px, 6.5vw, 96px);
--fs-display-m: clamp(40px, 5vw, 72px);
--fs-display-s: clamp(32px, 3.5vw, 52px);
--fs-h1: 40px;
--fs-h2: 32px;
--fs-h3: 24px;
--fs-h4: 20px;
--fs-h5: 17px;
--fs-h6: 14px;
--fs-body-l: 18px;
--fs-body: 16px;
--fs-body-s: 14px;
--fs-caption: 12px;
--fs-eyebrow: 11px;
/* LINE HEIGHTS */
--lh-display: 1.02;
--lh-tight: 1.12;
--lh-snug: 1.25;
--lh-body: 1.55;
--lh-loose: 1.7;
/* TRACKING — display airy, eyebrows pronounced */
--ls-display: -0.02em;
--ls-h: -0.01em;
--ls-body: 0em;
--ls-eyebrow: 0.18em;
--ls-caps-s: 0.12em;
/* ──────────────────────────────────────────────────────────────────
SPACING (4px base, editorial generous)
────────────────────────────────────────────────────────────────── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 40px;
--space-9: 56px;
--space-10: 72px;
--space-11: 96px;
--space-12: 128px;
--space-13: 176px;
/* ──────────────────────────────────────────────────────────────────
RADII — mostly square / minimal. Pills only for capsule chips.
────────────────────────────────────────────────────────────────── */
--r-xs: 2px;
--r-sm: 4px;
--r-md: 8px;
--r-lg: 14px;
--r-xl: 20px;
--r-pill: 999px;
/* ──────────────────────────────────────────────────────────────────
SHADOWS — diffuse, never harsh. Use as "lift", not "drop".
────────────────────────────────────────────────────────────────── */
--shadow-xs: 0 1px 2px rgba(28, 24, 60, 0.04);
--shadow-sm: 0 4px 14px rgba(28, 24, 60, 0.05);
--shadow-md: 0 14px 40px -12px rgba(28, 24, 60, 0.10);
--shadow-lg: 0 28px 80px -24px rgba(28, 24, 60, 0.16);
--shadow-glass:
inset 0 1px 0 rgba(255,255,255,0.6),
0 30px 60px -30px rgba(132, 138, 253, 0.35);
--shadow-focus: 0 0 0 3px rgba(0, 174, 239, 0.28);
/* ──────────────────────────────────────────────────────────────────
MOTION — Lenis-like cadence, never bouncy
────────────────────────────────────────────────────────────────── */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* default */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* page morph */
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* hover */
--dur-1: 120ms;
--dur-2: 220ms; /* default microinteraction */
--dur-3: 380ms; /* hover layered reveals */
--dur-4: 720ms; /* section morph */
--dur-5: 1200ms; /* cinematic loader */
/* LAYOUT */
--content-max: 1320px;
--content-prose: 68ch;
--gutter: clamp(16px, 4vw, 64px);
}
/* ──────────────────────────────────────────────────────────────────────
SEMANTIC TYPOGRAPHY
Apply these to real elements in product code.
────────────────────────────────────────────────────────────────────── */
html { color-scheme: light; }
body, .body {
font-family: var(--font-text);
font-weight: var(--w-book);
font-size: var(--fs-body);
line-height: var(--lh-body);
letter-spacing: var(--ls-body);
color: var(--fg-primary);
background: var(--bg-canvas);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.display-xl, .display-l, .display-m, .display-s {
font-family: var(--font-display);
font-weight: var(--w-extralight);
letter-spacing: var(--ls-display);
line-height: var(--lh-display);
text-wrap: pretty;
color: var(--fg-primary);
}
.display-xl { font-size: var(--fs-display-xl); }
.display-l { font-size: var(--fs-display-l); }
.display-m { font-size: var(--fs-display-m); }
.display-s { font-size: var(--fs-display-s); line-height: var(--lh-tight); }
h1, .h1 { font-family: var(--font-display); font-weight: var(--w-extralight); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-h); }
h2, .h2 { font-family: var(--font-display); font-weight: var(--w-extralight); font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-h); }
h3, .h3 { font-family: var(--font-display); font-weight: var(--w-book); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-h); }
h4, .h4 { font-family: var(--font-text); font-weight: var(--w-medium); font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: 0; }
h5, .h5 { font-family: var(--font-text); font-weight: var(--w-medium); font-size: var(--fs-h5); line-height: var(--lh-snug); letter-spacing: 0.01em; }
h6, .h6 { font-family: var(--font-text); font-weight: var(--w-medium); font-size: var(--fs-h6); line-height: var(--lh-snug); letter-spacing: var(--ls-caps-s); text-transform: uppercase; }
p, .p { font-size: var(--fs-body); line-height: var(--lh-body); }
.lead { font-size: var(--fs-body-l); line-height: var(--lh-body); color: var(--fg-secondary); font-weight: var(--w-book); }
small, .small, .caption { font-size: var(--fs-caption); line-height: var(--lh-snug); color: var(--fg-tertiary); }
.eyebrow {
font-family: var(--font-text);
font-size: var(--fs-eyebrow);
font-weight: var(--w-medium);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--fg-tertiary);
}
.mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; }
a { color: inherit; text-decoration: none; transition: opacity var(--dur-2) var(--ease-soft); }
a:hover { opacity: 0.62; }
hr { border: 0; border-top: 1px solid var(--line-rule); margin: var(--space-8) 0; }
::selection { background: var(--letybo-soft-blue); color: var(--ink-100); }
/* ============ 2) HOMEPAGE STYLES ============ */
/* ======================================================================
Letybo USA — Homepage (hi-fi)
Built on tokens from styles/letybo-tokens.css
====================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--bg-canvas);
color:var(--fg-primary);
font-family:var(--font-text);
font-weight:var(--w-book);
font-size:var(--fs-body);
line-height:var(--lh-body);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
#CookiebotWidget,
#CookiebotWidgetUnderlay {
display: none !important;
}
/* project-level override — wider gutter than the design-system default for editorial breath */
:root{--gutter:clamp(24px,5vw,80px)}
img,video{display:block;max-width:100%}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none;transition:opacity var(--dur-2) var(--ease-soft)}
a:hover{opacity:.62}
hr.rule{border:0;border-top:1px solid var(--line-hairline);margin:var(--space-10) 0}
/* ──────────────────────────────────────────── layout primitives */
.container{max-width:var(--content-max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.eyebrow{
font-family:var(--font-text);font-weight:var(--w-medium);
font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);
text-transform:uppercase;color:var(--fg-tertiary);
}
.eyebrow.on-dark{color:rgba(255,255,255,.7)}
.lead{font-size:var(--fs-body-l);line-height:var(--lh-body);color:var(--fg-secondary);max-width:60ch}
.display-xl{font-family:var(--font-display);font-weight:var(--w-extralight);
font-size:var(--fs-display-xl);line-height:var(--lh-display);letter-spacing:var(--ls-display);
text-wrap:pretty;margin:0}
.display-l{font-family:var(--font-display);font-weight:var(--w-extralight);
font-size:var(--fs-display-l);line-height:var(--lh-display);letter-spacing:var(--ls-display);
text-wrap:pretty;margin:0}
.display-m{font-family:var(--font-display);font-weight:var(--w-extralight);
font-size:var(--fs-display-m);line-height:var(--lh-tight);letter-spacing:var(--ls-display);
text-wrap:pretty;margin:0}
.display-s{font-family:var(--font-display);font-weight:var(--w-extralight);
font-size:var(--fs-display-s);line-height:var(--lh-tight);letter-spacing:var(--ls-display);
text-wrap:pretty;margin:0}
/* purple word accent — applied to a single anchor word in editorial display headlines */
.wa{color:#6248D4}
/* ──────────────────────────────────────────── buttons / links */
.btn{
display:inline-flex;align-items:center;gap:10px;
font-weight:var(--w-medium);font-size:14px;letter-spacing:.01em;
padding:14px 26px;border-radius:var(--r-pill);border:1px solid transparent;
cursor:pointer;transition:all var(--dur-2) var(--ease-soft);
}
.btn .arr{display:inline-block;transition:transform var(--dur-3) var(--ease-out)}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:#5B3FE0;color:var(--action-on-primary);
box-shadow:0 4px 14px rgba(132,138,253,.22)}
.btn-primary:hover{background:var(--action-primary-hover);transform:translateY(-1px);
box-shadow:0 14px 30px -10px rgba(132,138,253,.4)}
.btn-primary:active{background:var(--action-primary-press);transform:translateY(0)}
.btn-secondary{background:transparent;color:var(--ink-100);border-color:var(--ink-90)}
.btn-secondary:hover{background:var(--ink-100);color:#fff;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink-100);padding-left:0;padding-right:0}
.btn-ghost:hover{opacity:.62}
.btn-inverse{background:#fff;color:var(--ink-100)}
.btn-inverse:hover{
background:linear-gradient(90deg,#D1ECFF 0%,#E7DCFF 100%);
color:var(--ink-100);
transform:translateY(-1px);
}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-outline-light:hover{background:#6E74E8;color:#fff;border-color:#6E74E8}
.tx-link{
display:inline-flex;align-items:center;gap:8px;
font-weight:var(--w-medium);font-size:14px;color:var(--ink-100);
border-bottom:1px solid transparent;padding-bottom:2px;
}
.tx-link .arr{transition:transform var(--dur-3) var(--ease-out)}
.tx-link:hover{opacity:1;border-bottom-color:var(--ink-100)}
.tx-link:hover .arr{transform:translateX(4px)}
/* ──────────────────────────────────────────── grey evergreen bar + nav */
.evergreen{
background:#0B0B0F;border-bottom:1px solid #0B0B0F;
font-size:12px;letter-spacing:.02em;color:#fff;
}
.evergreen .row{position:relative;display:flex;justify-content:center;align-items:center;gap:32px;padding:10px 0;flex-wrap:wrap}
/* Patients bar items are absolutely positioned, so the row collapses — give it the
same content line as the HCP bar (static items) so both top bars match height */
.evergreen:not(.hcp-bar) .row{min-height:38.6px}
.evergreen-intended{position:absolute;left:0;top:50%;transform:translateY(-50%);color:#fff;opacity:.92;letter-spacing:.02em}
.evergreen-hcp{position:absolute;right:0;top:50%;transform:translateY(-50%)}
.evergreen .row > a:not(.evergreen-hcp){position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.evergreen a{display:inline-flex;align-items:center;gap:8px}
.evergreen a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--letybo-purple);flex:0 0 auto}
.evergreen a:hover{opacity:.62}
.evergreen .arr{transition:transform var(--dur-3) var(--ease-out)}
.evergreen a:hover .arr{transform:translateX(3px)}
/* v24 — mobile sticky ISI: full text in a scrollable box that auto-hides over #isi.
(Reverts the v20/v21/v23 text-hiding; text now shows in full on mobile.) */
@media (max-width:600px){
.isi-sticky .summary{
display:block;
max-height:38vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
font-size:clamp(11px,3vw,13px);line-height:1.5;
}
.isi-sticky .summary .isi-summary-rest{display:inline}
.isi-sticky .isi-warning-title{white-space:normal;display:inline;font-size:inherit}
.isi-sticky .btn-read .btn-read-text{display:inline}
}
.isi-sticky--hidden{transform:translateY(120%) !important;opacity:0 !important;pointer-events:none}
/* v18 — mobile: drop absolute positioning so the 3 items stack centered (no overlap) */
/* v22 — each item on one line, bullet tight to its text */
@media (max-width:760px){
.evergreen .row{flex-direction:column;gap:8px;flex-wrap:nowrap;text-align:center}
.evergreen:not(.hcp-bar) .row{min-height:0}
.evergreen-intended,
.evergreen-hcp,
.evergreen .row > a:not(.evergreen-hcp){
position:static;transform:none;left:auto;right:auto;top:auto;text-align:center;
}
.evergreen a{justify-content:center;white-space:nowrap;font-size:clamp(10px,3vw,13px);max-width:100%}
.evergreen-intended{white-space:nowrap;font-size:clamp(10px,3vw,13px)}
}
.nav{
position:sticky;top:0;z-index:50;
background:linear-gradient(90deg, #D2ECFF 0%, #E7DCFF 100%);
border-bottom:1px solid transparent;transition:border-color var(--dur-3) var(--ease-soft);
}
.nav.is-scrolled{border-bottom-color:var(--line-hairline)}
.nav .row{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:24px}
.nav .brand{display:inline-flex;align-items:center;gap:10px;
font-family:var(--font-display);font-weight:var(--w-extralight);
font-size:22px;letter-spacing:-.02em;color:var(--ink-100)}
/* full lockup ratio is 711×262 ≈ 2.7:1. At nav height 38px the wordmark
row is ~13px tall — small but legible. Bump if needed. */
.nav .brand img{height:38px;width:auto;display:block}
.nav .brand sup{font-size:9px;font-weight:var(--w-book)}
sup.reg{font-size:0.6em;vertical-align:super;line-height:0}
.nav .links{display:flex;gap:36px;align-items:center}
.nav .links a{font-size:13px;letter-spacing:.02em;color:var(--ink-100);transition:opacity var(--dur-2) var(--ease-soft)}
.nav .links a:hover{opacity:.55}
.nav .cta{
font-size:13px;font-weight:var(--w-medium);padding:10px 18px;
border:1px solid #5B3FE0;border-radius:var(--r-pill);
background:#5B3FE0;color:#fff;
display:inline-flex;align-items:center;gap:8px;
transition:all var(--dur-2) var(--ease-soft);
}
.nav .cta:hover{background:#6E74E8;border-color:#6E74E8;color:#fff}
.nav .cta .arr{transition:transform var(--dur-3) var(--ease-out)}
.nav .cta:hover .arr{transform:translateX(3px)}
/* ──────────────────────────────────────────── 404 */
.not-found-page{background:#fff}
.not-found-hero{
position:relative;
min-height:640px;
display:grid;
align-items:center;
overflow:hidden;
background:#0b0b0f;
color:#fff;
}
.not-found-media,
.not-found-scrim{
position:absolute;
inset:0;
}
.not-found-media img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}
.not-found-scrim{
background:
linear-gradient(90deg,rgba(11,11,15,.84) 0%,rgba(11,11,15,.58) 48%,rgba(11,11,15,.2) 100%),
linear-gradient(180deg,rgba(11,11,15,.1) 0%,rgba(11,11,15,.48) 100%);
}
.not-found-hero .container{
position:relative;
z-index:1;
width:100%;
padding-top:88px;
padding-bottom:88px;
}
.not-found-copy{
max-width:720px;
}
.not-found-copy h1{
margin:8px 0 20px;
font-family:var(--font-display);
font-size:72px;
line-height:1.02;
font-weight:var(--w-extralight);
letter-spacing:0;
}
.not-found-copy .lead{
max-width:56ch;
color:rgba(255,255,255,.86);
}
.not-found-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:30px;
}
.not-found-actions .btn{
min-height:50px;
}
.not-found-paths{
background:#fff;
padding:72px 0;
}
.not-found-paths-head{
display:grid;
grid-template-columns:minmax(0,360px) minmax(0,1fr);
gap:32px;
align-items:end;
margin-bottom:32px;
}
.not-found-paths h2,
.not-found-safety h2{
margin:0;
font-family:var(--font-display);
font-weight:var(--w-extralight);
font-size:44px;
line-height:1.08;
letter-spacing:0;
}
.not-found-link-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
border-top:1px solid var(--line-rule);
}
.not-found-link{
min-height:188px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:24px;
padding:24px;
border-right:1px solid var(--line-rule);
border-bottom:1px solid var(--line-rule);
color:var(--ink-100);
transition:background var(--dur-2) var(--ease-soft),opacity var(--dur-2) var(--ease-soft);
}
.not-found-link:first-child{
border-left:1px solid var(--line-rule);
}
.not-found-link:hover{
opacity:1;
background:var(--bg-soft);
}
.not-found-link span{
font-family:var(--font-display);
font-size:22px;
line-height:1.2;
font-weight:var(--w-book);
}
.not-found-link small{
color:var(--ink-60);
font-size:13px;
line-height:1.45;
}
.not-found-safety{
background:#f8f8fa;
padding:72px 0;
border-top:1px solid var(--line-hairline);
}
.not-found-safety-grid{
display:grid;
grid-template-columns:minmax(0,360px) minmax(0,720px);
gap:clamp(32px,6vw,96px);
}
.not-found-safety-copy{
display:flex;
flex-direction:column;
gap:16px;
color:var(--ink-80);
}
.not-found-safety-copy p{
margin:0;
font-size:15px;
line-height:1.65;
}
.not-found-safety-copy b{
color:#000;
font-weight:var(--w-medium);
}
.not-found-safety-copy a{
color:#000;
text-decoration:underline;
text-underline-offset:2px;
}
.not-found-safety-copy .isi-material{
margin-top:4px;
font-size:13px;
letter-spacing:.04em;
color:#000;
}
@media (max-width:980px){
.not-found-link-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.not-found-link:nth-child(odd){border-left:1px solid var(--line-rule)}
}
@media (max-width:760px){
.not-found-hero{min-height:560px}
.not-found-hero .container{padding-top:64px;padding-bottom:64px}
.not-found-copy h1{font-size:46px}
.not-found-actions{flex-direction:column;align-items:stretch}
.not-found-actions .btn{justify-content:center;width:100%}
.not-found-paths,.not-found-safety{padding:56px 0}
.not-found-paths-head,
.not-found-safety-grid{grid-template-columns:1fr;gap:20px}
.not-found-paths h2,.not-found-safety h2{font-size:34px}
.not-found-link-grid{grid-template-columns:1fr}
.not-found-link,
.not-found-link:first-child,
.not-found-link:nth-child(odd){border-left:1px solid var(--line-rule)}
}
/* ──────────────────────────────────────────── HERO */
.hero{position:relative;height:86vh;min-height:640px;overflow:hidden;background:#0a0a0c}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* Video on top of the static ![]()
fallback (img stays as no-video / load-failure fallback). */
.hero-media video{z-index:1}
.hero-media img{z-index:0}
.hero-scrim{
position:absolute;inset:0;z-index:1;
background:
linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,0) 60%,rgba(0,0,0,.55) 100%),
rgba(0,0,0,var(--hero-scrim,.18));
transition:background var(--dur-3) var(--ease-soft);
}
.hero-inner{position:relative;z-index:2;height:100%;color:#fff;
display:flex;flex-direction:column;justify-content:space-between;
padding-top:80px;padding-bottom:64px}
.hero-top{display:flex;justify-content:flex-end}
.hero-top .eyebrow{color:rgba(255,255,255,.7)}
.hero-text{max-width:1100px}
.hero-text .eyebrow{color:rgba(255,255,255,.7);margin-bottom:18px}
.hero-text h1{color:#fff;font-size:clamp(48px,7.2vw,116px);font-weight:var(--w-extralight);
line-height:.98;letter-spacing:-0.025em;margin:0 0 24px}
.hero-text h1 sup{font-size:.32em;vertical-align:super;font-weight:var(--w-book);letter-spacing:0}
/* K-TOX brand lockup — Test Söhne Breit (Bold). Falls back to a heavy wide grotesque
until the licensed font file is dropped in and wired via @font-face below. */
.hero-ktox{
display:block;width:max-content;max-width:100%;
font-family:"Test Söhne Breit","Söhne Breit","Söhne",var(--font-display),"Arial Black",sans-serif;
font-weight:800;
font-size:clamp(64px,10vw,156px);
line-height:.86;letter-spacing:-.01em;
margin:0 0 6px;
background:linear-gradient(180deg,#3E1E81 0%,#9068DC 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
filter:drop-shadow(0 2px 18px rgba(0,0,0,.28));
}
.hero-text .sub{color:rgba(255,255,255,.86);font-size:clamp(18px,1.5vw,22px);
line-height:1.45;max-width:none;margin:0 0 36px;font-weight:var(--w-book);text-wrap:nowrap}
/* Hero lockup: white Letybo logo + K-TOX on one row.
Scale (font-size = em) drives both: logo = 1em (≈ old K-TOX size),
K-TOX = .93em with line-height .86 → its visible height = .8em = 80% of the logo. */
.hero-lockup{display:flex;align-items:center;gap:clamp(14px,1.4vw,24px);
font-size:clamp(54px,8vw,84px);margin:0 0 10px}
.hero-lockup-logo{height:1em;width:auto;display:block;
filter:drop-shadow(0 2px 18px rgba(0,0,0,.28))}
/* K-TOX — shrunk 30% then enlarged 15% */
.hero-lockup .hero-ktox{font-size:clamp(34.5px,3.96vw,51.8px);margin:0;line-height:.86}
/* Letybo logo aligned to the right, vertically centered with the hero CTA buttons */
.hero-logo-corner{margin-left:auto;align-self:center;
height:clamp(63.36px,7.26vw,95.04px);width:auto;display:block;
filter:drop-shadow(0 2px 18px rgba(0,0,0,.28))}
@media (max-width:760px){
.hero-logo-corner{margin-left:0;height:62px}
}
@media (max-width:900px){
.hero-text .sub{text-wrap:balance}
}
.hero-cta-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hero-footnote{margin:22px 0 0;color:rgba(255,255,255,.62);font-size:12px;line-height:1.4;letter-spacing:.01em}
.hero-footnote sup{font-size:.8em;margin-right:1px}
.hero-bottom{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
border-top:1px solid rgba(255,255,255,.22);padding-top:24px}
.hero-pillar{display:flex;flex-direction:column;gap:6px;color:#fff;cursor:pointer;
transition:opacity var(--dur-2) var(--ease-soft)}
.hero-pillar:hover{opacity:.7}
.hero-pillar .num{font-family:var(--font-text);font-size:11px;letter-spacing:.18em;
text-transform:uppercase;color:rgba(255,255,255,.55)}
.hero-pillar .lbl{font-family:var(--font-display);font-weight:var(--w-extralight);
font-size:clamp(22px,2.2vw,32px);letter-spacing:-.01em;line-height:1.05}
/* indication block under hero (below the fold of the hero) */
/* indication block under hero (below the fold of the hero).
The hairline divider is repainted as ::after so it can draw L→R on reveal.
border-bottom kept on the bare .indication for the no-JS fallback. */
.indication{
display:flex;align-items:center;justify-content:center;
min-height:38vh;
padding:clamp(32px,5vh,64px) 0;
background:#fff;position:relative;
border-bottom:1px solid var(--line-hairline);
}
.indication.js-anim{border-bottom-color:transparent}
.indication::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:var(--line-hairline);
transform:scaleX(0);transform-origin:left center;
transition:transform 900ms cubic-bezier(.22,.61,.36,1);
}
.indication.is-revealed::after{transform:scaleX(1);transition-delay:600ms}
/* — entrance stagger · only active once JS has marked .js-anim
(avoids text being invisible if JS fails to load) */
.indication.js-anim p{
opacity:0;transform:translateY(12px);
transition:opacity 600ms cubic-bezier(.22,.61,.36,1),
transform 600ms cubic-bezier(.22,.61,.36,1);
}
.indication.js-anim.is-revealed p{opacity:1;transform:translateY(0);transition-delay:0ms}
/* — ® breath · subtle 4500ms loop, starts after stagger finishes (~900ms) */
@keyframes brandBreath{
0%,100%{transform:scale(1)}
50% {transform:scale(1.06)}
}
.indication .reg-mark{display:inline-block;transform-origin:center}
.indication.is-revealed .reg-mark{
animation:brandBreath 4500ms ease-in-out infinite;
animation-delay:1200ms;
}
/* — reduced-motion fallback · skip stagger + breath, show final state */
/* — reduced-motion fallback · skip stagger + breath, show final state */
@media (prefers-reduced-motion: reduce){
.indication.js-anim p{
opacity:1 !important;transform:none !important;transition:none !important;
}
.indication::after{transform:scaleX(1) !important;transition:none !important}
.indication .reg-mark{animation:none !important}
}
.indication p{
color:var(--ink-70);font-size:var(--fs-body-l);line-height:1.6;
max-width:68ch;margin:0 auto;text-align:center;text-wrap:pretty;
}
.indication p b{font-weight:var(--w-medium);color:var(--ink-100)}
/* ──────────────────────────────────────────── §02 GLOBALLY TRUSTED — rebuilt
Full-bleed scroll-scrubbed video as background layer · text floats on top
in a 3-col grid (pillars · empty spacer · side texts). */
.gt-breathe{height:0;background:var(--bg-canvas)}
.gt{position:relative;height:380vh;background:#fff}
.gt-stage{
position:sticky;top:0;height:100vh;overflow:hidden;
}
/* LAYER 0 — full-bleed video. No box, no border-radius, no padding. */
.gt-vial{
position:absolute;inset:0;z-index:0;
pointer-events:none;
transition:opacity 700ms var(--ease-out);
}
.gt-vial.is-fading{opacity:1}
.gt-vial .gt-video{
position:absolute;inset:0;
width:100%;height:100%;object-fit:cover;
pointer-events:none;
}
.gt-vial .gt-video.is-hidden{opacity:0;visibility:hidden}
.gt-vial .gt-canvas{
position:absolute;inset:0;
width:100%;height:100%;object-fit:cover;
pointer-events:none;image-rendering:auto;
}
/* LAYER 5 — text grid on top of video */
.gt-grid{
position:relative;z-index:5;height:100%;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);
gap:clamp(20px,3vw,56px);
padding:clamp(48px,7vh,88px) clamp(24px,5vw,80px);
align-items:center;
}
.gt-center-spacer{min-width:0}
/* LEFT — pillars stacked, sequential scroll-driven reveal */
.gt-pillars{display:flex;flex-direction:column;gap:clamp(28px,4.5vh,52px);min-width:0}
/* §02 bottom legal footnote — centered over the lower (light) part of the video */
.gt-foot{
position:absolute;left:0;right:0;bottom:22px;z-index:6;
text-align:center;margin:0;padding:0 24px;
font-family:var(--font-text);font-size:11px;line-height:1.5;
color:rgba(20,22,34,.62);text-wrap:balance;
}
.gt-foot sup{font-size:.85em;margin-right:1px}
@media (max-width:900px){
.gt-foot{position:static;margin-top:var(--space-7)}
}
.gt-pillar{
opacity:0;transform:translateY(18px);
transition:opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
}
.gt-pillar.is-on{opacity:1;transform:translateY(0)}
.gt-pillar-title{
font-family:var(--font-display);font-weight:var(--w-medium);
font-size:clamp(34px,3.6vw,52px);line-height:1.02;letter-spacing:-.02em;
color:var(--letybo-purple-ink);margin:0;
}
.gt-pillar-title .wa{display:block;font-weight:var(--w-extralight);color:var(--ink-100)}
/* §02 left pillars — stat variant (15+ Years / 44+ Million / 70+ Countries) */
.gt-pillar-title.gt-stat{display:flex;flex-direction:column;line-height:1.0;letter-spacing:-.02em}
.gt-stat .big{
font-weight:var(--w-medium);color:var(--letybo-purple-ink);
font-size:clamp(40px,4.4vw,72px);line-height:.98;
}
.gt-stat .sub{
font-weight:var(--w-extralight);color:var(--ink-100);
font-size:clamp(18px,1.9vw,28px);line-height:1.1;letter-spacing:-.01em;margin-top:6px;
}
.gt-stat .sub sup{font-size:.5em;vertical-align:super;font-weight:var(--w-book)}
/* RIGHT — two side texts stacked */
.gt-side{display:flex;flex-direction:column;gap:clamp(32px,7vh,72px);justify-content:center;min-width:0}
.gt-side-top{
font-family:var(--font-display);font-weight:var(--w-extralight);
font-size:clamp(48px,5.4vw,84px);line-height:1.05;letter-spacing:-.025em;
color:var(--letybo-purple-ink);margin:0;text-wrap:pretty;max-width:14ch;
}
.gt-side-top .em{color:var(--letybo-purple)}
.gt-side-bottom{
font-family:var(--font-display);font-weight:var(--w-extralight);
font-size:clamp(24px,2.4vw,40px);line-height:1.2;letter-spacing:-.02em;
margin:0;text-wrap:pretty;max-width:22ch;
/* Inherited sweep treatment from former .gt-callout-final, scaled into the grid. */
background:linear-gradient(90deg,#4A9BD8 0%,#4A9BD8 30%,#B8C8FF 50%,#7A6BB0 70%,#7A6BB0 100%);
background-size:250% 100%;
background-position:0% 0%;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
transition:background-position 1200ms cubic-bezier(.22,.61,.36,1);
}
.gt-side-bottom.is-revealed{background-position:100% 0%}
.gt-side-bottom:not(.is-revealed){transition:none}
.gt-side-bottom .em{
background:inherit;-webkit-background-clip:inherit;background-clip:inherit;
-webkit-text-fill-color:inherit;color:inherit;
}
/* Bubbles drift in over the vial in the final phase */
.gt-bubbles{position:absolute;inset:0;pointer-events:none;z-index:3}
.gt-bubble{position:absolute;border-radius:50%;
background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(206,221,255,.6) 50%, rgba(180,170,235,.4) 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px rgba(132,138,253,.15);
opacity:0;transform:translateY(20px);
}
/* Tablet / mobile — collapse to 1 column stacked, drop the sticky pin and scroll-scrub.
Video stays in flow as a stacked element rather than full-bleed bg. */
/* Tablet / mobile — collapse to 1 column stacked, drop the sticky pin and scroll-scrub.
Video stays in flow as a stacked element rather than full-bleed bg. */
/* Mobile §02 — KEEP the desktop overlay (video bg + stats on top) + scroll-scrub.
Text reduced + dark scrim behind for guaranteed contrast over any video frame. */
@media (max-width:900px){
.gt{height:300vh}
.gt-stage{position:sticky;top:0;height:100vh;overflow:hidden}
.gt-vial{position:absolute;inset:0}
.gt-vial .gt-video,
.gt-vial .gt-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* legibility scrim — sits between video (z0) and the text grid (z5) */
.gt-stage::after{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(180deg,rgba(8,10,26,.58) 0%,rgba(8,10,26,.34) 45%,rgba(8,10,26,.64) 100%);
}
.gt-grid{
grid-template-columns:1fr;height:100%;display:grid;
align-content:center;gap:clamp(18px,3.4vh,34px);
padding:clamp(74px,12vh,104px) clamp(20px,6vw,40px) clamp(54px,8vh,82px);
}
.gt-center-spacer{display:none}
.gt-pillars{padding:0;gap:clamp(16px,2.8vh,26px)}
.gt-side{padding:0;gap:clamp(16px,2.6vh,26px)}
/* reduced + light text + shadow for contrast over the scrim */
.gt-pillar-title{font-size:clamp(26px,6.2vw,40px);color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.42)}
.gt-pillar-title .wa{color:#fff}
.gt-stat .big{font-size:clamp(30px,8vw,44px);color:#fff}
.gt-stat .sub{font-size:clamp(13px,3.6vw,18px);color:rgba(255,255,255,.92)}
.gt-stat{text-shadow:0 2px 14px rgba(0,0,0,.44)}
.gt-side-top{font-size:clamp(30px,7.2vw,46px);color:#fff;max-width:none;text-shadow:0 2px 14px rgba(0,0,0,.42)}
/* drop the gradient-clip sweep on mobile so the text stays legible on any frame */
.gt-side-bottom{font-size:clamp(18px,4.6vw,26px);max-width:none;
background:none;-webkit-text-fill-color:#E8ECFF;color:#E8ECFF;
text-shadow:0 2px 14px rgba(0,0,0,.42)}
.gt-foot{position:absolute;left:0;right:0;bottom:14px;margin:0;color:rgba(255,255,255,.8)}
}
@media (max-width:600px){
.gt-side-top,
.gt-side-bottom{max-width:none}
}
/* ──────────────────────────────────────────── §02b GLOBALLY TRUSTED · STATS BAND
Static lavender-purple section · headline + 3 icon-stat columns + active-ingredient band. */
.gt-stats{
position:relative;
padding:clamp(80px,11vh,140px) 0 clamp(72px,9vh,120px);
color:#fff;overflow:hidden;
background:
radial-gradient(ellipse 60% 80% at 22% 28%, rgba(176,166,255,.40) 0%, transparent 62%),
radial-gradient(ellipse 70% 70% at 78% 72%, rgba(74,82,200,.45) 0%, transparent 60%),
linear-gradient(135deg,#6E76EE 0%,#7B83F0 50%,#5F69E5 100%);
}
.gt-stats-h{
font-family:var(--font-display);font-weight:var(--w-extralight);
font-size:clamp(48px,6.4vw,88px);line-height:1.02;letter-spacing:-.02em;
color:#fff;margin:0 0 clamp(48px,7vh,96px);text-align:center;
}
/* §02b — As Seen In press band (replaces old stats interior; .gt-stats bg kept) */
.gts-press{
display:flex;flex-direction:column;align-items:center;text-align:center;
gap:clamp(28px,4.4vh,48px);
max-width:1080px;margin:0 auto;
}
.gts-hugel{
height:clamp(40px,4.4vw,58px);width:auto;display:block;opacity:.96;
}
.gts-quote{
margin:0;max-width:26ch;
font-family:var(--font-display);font-weight:var(--w-extralight);
font-size:clamp(32px,4.4vw,64px);line-height:1.08;letter-spacing:-.025em;
color:#fff;text-wrap:balance;
}
.gts-quote-accent{color:var(--letybo-soft-blue)}
.gts-attr{
margin:0;
font-family:var(--font-text);font-weight:var(--w-medium);
font-size:clamp(13px,1.1vw,16px);letter-spacing:.06em;text-transform:uppercase;
color:rgba(255,255,255,.8);
}
.gts-logos{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:clamp(28px,4vw,64px);
margin-top:clamp(8px,1.6vh,20px);
}
.gts-logo{
height:clamp(22px,2.2vw,32px);width:auto;display:block;opacity:.92;
}
@media (max-width:600px){
.gts-logos{gap:clamp(24px,6vw,40px)}
.gts-logo{height:clamp(18px,5vw,26px)}
.gts-hugel{height:clamp(36px,9vw,48px)}
}
/* Section reveal cascade — press content fades up on entry. */
.gt-stats.js-fade-up .gts-hugel,
.gt-stats.js-fade-up .gts-quote,
.gt-stats.js-fade-up .gts-attr,
.gt-stats.js-fade-up .gts-logos{
opacity:0;transform:translateY(20px);
transition:opacity 720ms cubic-bezier(.22,.61,.36,1),
transform 720ms cubic-bezier(.22,.61,.36,1);
}
.gt-stats.js-fade-up.is-revealed .gts-hugel{opacity:1;transform:none;transition-delay:0ms}
.gt-stats.js-fade-up.is-revealed .gts-quote{opacity:1;transform:none;transition-delay:140ms}
.gt-stats.js-fade-up.is-revealed .gts-attr{opacity:1;transform:none;transition-delay:240ms}
.gt-stats.js-fade-up.is-revealed .gts-logos{opacity:1;transform:none;transition-delay:340ms}
@media (prefers-reduced-motion: reduce){
.gt-stats.js-fade-up .gts-hugel,
.gt-stats.js-fade-up .gts-quote,
.gt-stats.js-fade-up .gts-attr,
.gt-stats.js-fade-up .gts-logos{
opacity:1 !important;transform:none !important;transition:none !important;
}
}
/* Reduced-motion: both effects skip animation, show final state. */
/* Reduced-motion: both effects skip animation, show final state. */
@media (prefers-reduced-motion: reduce){
.gt-side-bottom{background-position:100% 0% !important;transition:none !important}
.gt-pillar{opacity:1 !important;transform:none !important;transition:none !important}
}
/* ──────────────────────────────────────────── Cursor-follow spotlight
--mx/--my are written by JS in pointermove on each element so a
radial-gradient slides under the text via background-clip:text.
Default position is off-canvas → text reads as solid --ink-100.
Falls back to plain black on touch and reduced-motion. */
.has-spotlight{
background:radial-gradient(
circle 220px at var(--mx, -9999px) var(--my, -9999px),
#4A9BD8 0%,
#7A6BB0 60%,
var(--ink-100) 100%
);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
/* Preserve the .wa purple word-accent over the spotlight fill. */
.has-spotlight .wa{
background:none;
-webkit-background-clip:initial;background-clip:initial;
-webkit-text-fill-color:initial;color:var(--letybo-purple);
}
@media (hover:none),(prefers-reduced-motion:reduce){
.has-spotlight{
background:none;
-webkit-background-clip:initial;background-clip:initial;
-webkit-text-fill-color:initial;color:var(--ink-100);
}
}
/* ════════════════════════════════════════════════════════
§03b — Proven results pillars (from brochure)
════════════════════════════════════════════════════════ */
.pillars-block{
background:linear-gradient(180deg, #fff 0%, var(--lavender-tint, #EFEAFB) 100%);
padding:96px 48px;
position:relative;
}
.pillars-inner{
max-width:1280px;
margin:0 auto;
}
.pillars-eyebrow{
font-size:11px;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--letybo-purple-ink, #2F35A0);
font-weight:var(--w-medium, 500);
text-align:center;
margin-bottom:14px;
}
.pillars-headline{
text-align:center;
font-size:clamp(36px, 5vw, 52px);
font-weight:var(--w-thin, 100);
letter-spacing:-0.025em;
line-height:1.05;
margin-bottom:64px;
color:var(--ink-100, #0E1014);
}
.pillars-headline em{
font-style:normal;
color:#6248D4;
}
.pillars-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:32px;
counter-reset:pillar-counter;
}
.pillar{
counter-increment:pillar-counter;
background:white;
border-radius:20px;
padding:40px 32px;
border:1px solid rgba(132, 138, 253, 0.12);
position:relative;
transition:transform 560ms var(--ease-soft, cubic-bezier(.22,.61,.36,1)),
box-shadow 560ms var(--ease-soft);
display:flex;
flex-direction:column;
gap:16px;
}
.pillar:hover{
transform:translateY(-4px);
box-shadow:0 24px 48px -16px rgba(46, 53, 160, 0.15);
}
.pillar-num{
display:flex;
align-items:center;
gap:10px;
font-size:11px;
letter-spacing:0.16em;
text-transform:uppercase;
color:#6248D4;
font-weight:var(--w-medium, 500);
margin-bottom:4px;
}
.pillar-num::before{
content:counter(pillar-counter);
display:inline-flex;
align-items:center;
justify-content:center;
width:28px;
height:28px;
border-radius:50%;
background:var(--letybo-purple, #848AFD);
color:white;
font-size:13px;
font-weight:var(--w-medium, 500);
letter-spacing:0;
}
.pillar-headline{
font-size:22px;
font-weight:var(--w-light, 300);
letter-spacing:-0.015em;
line-height:1.3;
color:var(--ink-100, #0E1014);
margin:0;
min-height:96px;
}
.pillar-headline em{
font-style:normal;
color:var(--letybo-purple-ink, #2F35A0);
font-weight:var(--w-medium, 500);
}
/* Pillar 1 (Onset) — make "1–3 days" the protagonist */
.pillar-onset .pillar-headline em{
display:block;
font-size:40px;
line-height:1.05;
letter-spacing:-0.025em;
color:#6248D4;
margin-top:4px;
}
/* Pillar 2 (Duration) — make "4 months" the protagonist */
.pillar-duration .pillar-headline em{
display:block;
font-size:40px;
line-height:1.05;
letter-spacing:-0.025em;
color:#6248D4;
margin-top:4px;
}
.pillar-headline sup{
font-size:0.65em;
color:#6248D4;
font-weight:var(--w-medium, 500);
margin-left:1px;
}
.pillar-support{
font-size:14px;
color:var(--ink-70, #4A4F5C);
line-height:1.6;
margin:0;
}
/* Pillar 3 — stat variant */
.pillar-stat{
font-size:64px;
font-weight:var(--w-thin, 100);
letter-spacing:-0.03em;
line-height:1;
color:#6248D4;
margin:0;
min-height:96px;
}
.pillar-stat--word{
font-size:40px;
font-weight:var(--w-light, 300);
line-height:1.05;
letter-spacing:-0.02em;
}
.pillar-stat small{
font-size:0.5em;
font-weight:var(--w-light, 300);
margin-left:2px;
color:#6248D4;
}
.pillar-stat-label{
font-size:14px;
color:var(--ink-70, #4A4F5C);
text-transform:lowercase;
letter-spacing:0.02em;
margin-top:-8px;
}
.pillars-foot{
margin-top:48px;
text-align:left;
font-size:10px;
color:var(--ink-50, #757D8C);
line-height:1.5;
max-width:1080px;
margin-left:auto;
margin-right:auto;
}
.pillars-foot p{
margin:0 0 8px 0;
}
.pillars-foot sup{font-size:.85em;margin-right:1px}
.pillars-foot .ref{color:var(--letybo-purple-ink, #2F35A0)}
/* ─── Reveal animation (on intersection observer) */
.pillar{
opacity:0;
transform:translateY(20px);
transition:opacity 800ms var(--ease-out, cubic-bezier(.16,1,.3,1)),
transform 800ms var(--ease-out),
box-shadow 560ms var(--ease-soft);
}
.pillars-grid.is-revealed .pillar{
opacity:1;
transform:translateY(0);
}
.pillars-grid.is-revealed .pillar:nth-child(1){ transition-delay:0ms }
.pillars-grid.is-revealed .pillar:nth-child(2){ transition-delay:140ms }
.pillars-grid.is-revealed .pillar:nth-child(3){ transition-delay:280ms }
/* ─── Headline reveal */
.pillars-headline,
.pillars-eyebrow{
opacity:0;
transform:translateY(12px);
transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.pillars-block.is-revealed .pillars-headline,
.pillars-block.is-revealed .pillars-eyebrow{
opacity:1;
transform:translateY(0);
}
.pillars-block.is-revealed .pillars-eyebrow{ transition-delay:0ms }
.pillars-block.is-revealed .pillars-headline{ transition-delay:120ms }
/* ─── Responsive */
@media (max-width:900px){
.pillars-grid{
grid-template-columns:1fr;
gap:20px;
}
.pillars-block{
padding:64px 24px;
}
.pillars-headline{
font-size:36px;
}
.pillar-stat{
font-size:48px;
}
}
/* ─── Reduced motion */
@media (prefers-reduced-motion:reduce){
.pillar,
.pillars-headline,
.pillars-eyebrow{
transition:none !important;
opacity:1 !important;
transform:none !important;
}
}
/* ─── Placeholder helper (dev visual; user no la ve diferente) */
.placeholder-copy{
/* Estilo idéntico al user; el dev sabe que es placeholder por la clase + comment HTML */
}
/* ──────────────────────────────────────────── §04 WHY LETYBO — sticky-pin Vision Pro */
.why-pin{position:relative;height:300vh;background:#fff}
.why-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;padding:48px 0}
.why-stage .container{width:100%;display:flex;flex-direction:column;gap:32px;height:100%}
.why-head{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:48px;margin-bottom:32px}
.why-head .eyebrow{margin-bottom:0}
.why-head h2{margin:0}
.why-h{font-family:var(--font-display);font-weight:var(--w-extralight);
font-size:clamp(40px,5vw,72px);line-height:1.04;letter-spacing:-.02em;color:var(--ink-100);margin:0;text-wrap:balance}
@media (max-width:900px){.why-head{grid-template-columns:1fr;gap:18px}}
.why-progress{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;border-top:1px solid var(--line-hairline);padding-top:18px}
.why-progress .step{
background:transparent;border:0;cursor:pointer;
font-family:var(--font-text);font-weight:var(--w-medium);
font-size:12px;letter-spacing:.12em;text-transform:uppercase;
color:var(--ink-60);padding:6px 14px 6px 0;display:inline-flex;align-items:baseline;gap:10px;
transition:color 420ms var(--ease-soft);
}
.why-progress .step .num{font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;color:inherit}
.why-progress .step.is-on{color:var(--ink-100)}
.why-progress .step + .step{padding-left:18px;border-left:1px solid var(--line-hairline)}
.why-slides{position:relative;flex:1;min-height:0}
.why-slide{position:absolute;inset:0;
opacity:0;transform:translateY(28px);pointer-events:none;
transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out);
}
.why-slide.is-active{opacity:1;transform:translateY(0);pointer-events:auto}
.why-slide .grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,6vw,96px);align-items:center;height:100%}
@media (max-width:900px){.why-slide .grid{grid-template-columns:1fr;gap:24px}}
.why-slide .text{display:flex;flex-direction:column;gap:18px}
.why-slide .big-num{font-family:var(--font-display);font-weight:var(--w-extralight);
font-size:clamp(56px,8vw,128px);line-height:.95;letter-spacing:-.03em;color:#6B50B0}
.why-slide h3{font-family:var(--font-display);font-weight:var(--w-extralight);
font-size:clamp(36px,4.4vw,64px);line-height:1.04;letter-spacing:-.02em;margin:0;color:var(--ink-100)}
.why-slide p{margin:0;font-size:var(--fs-body-l);line-height:1.55;color:var(--ink-70);max-width:46ch}
.why-bullets{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:0}
.why-bullets li{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-top:1px solid var(--line-hairline);
font-size:14px;color:var(--ink-90)}
.why-bullets li:last-child{border-bottom:1px solid var(--line-hairline)}
.why-bullets li span{color:var(--ink-30);width:16px;flex:0 0 16px}
.why-bullets li em{font-style:italic;color:var(--ink-100)}
.why-slide .visual{position:relative;aspect-ratio:4/5;width:100%;max-width:100%;min-width:0;max-height:100%;
border-radius:var(--r-md);overflow:hidden;background:var(--bg-soft);align-self:center;justify-self:center;
box-shadow:var(--shadow-sm);
}
.why-slide .visual svg{position:absolute;inset:0;width:100%;height:100%}
/* Pillar photos replacing the SVG placeholders. object-fit:cover absorbs
the 16:9 source into the 4:5 portrait visual slot. Per-slot
object-position calibrated to keep the key subject visible after crop. */
.why-slide .visual .pillar-photo{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center;
border-radius:inherit;display:block;
user-select:none;-webkit-user-drag:none;
}
.why-slide .visual[data-photo-slot^="02"] .pillar-photo{object-position:60% 35%}
.why-slide .visual[data-photo-slot^="03"] .pillar-photo{object-position:center 40%}
.why-slide .visual .photo-tag{
position:absolute;left:14px;bottom:14px;
font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
color:rgba(11,11,15,.45);background:rgba(255,255,255,.6);
padding:5px 9px;border-radius:99px;backdrop-filter:blur(8px);
}
/* ──────────────────────────────────────────── §05 FIND A SPECIALIST */
.find{padding:var(--space-13) 0;background:var(--bg-soft)}
/* 35/65 — texto comprimido, foto protagónica. align-items:center centra
verticalmente el texto contra la foto vertical 3:4. */
.find .grid{display:grid;grid-template-columns:35fr 65fr;gap:clamp(40px,5vw,80px);align-items:center}
@media (max-width:900px){.find .grid{grid-template-columns:1fr;gap:40px}}
.find h2{margin:0 0 24px}
.find p{color:var(--ink-70);font-size:var(--fs-body-l);line-height:1.55;max-width:48ch;margin:0 0 36px}
.find .cta-row{display:flex;gap:18px;flex-wrap:wrap}
.find .visual{aspect-ratio:3/4;border-radius:var(--r-md);
background:
radial-gradient(60% 60% at 70% 30%,#E8D8FF 0%,rgba(232,216,255,0) 70%),
radial-gradient(60% 60% at 30% 70%,#CFEFFF 0%,rgba(207,239,255,0) 70%),
linear-gradient(135deg,#F8F4FF 0%,#F0F8FF 100%);
position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:center;
}
.find .visual .pin{
position:absolute;width:14px;height:14px;border-radius:50%;
background:var(--letybo-purple);
box-shadow:0 0 0 6px rgba(132,138,253,.2),0 0 0 14px rgba(132,138,253,.08);
}
/* Video replacing the previous static photo. Same container chrome
(aspect 3:4, gradient fallback). The motion of the vials is the
interaction now — parallax tilt removed. */
.find .visual .find-visual-video{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;object-position:center;
border-radius:inherit;display:block;
}
@media (max-width:768px){
.find .visual{aspect-ratio:4/5} /* less extreme vertical on mobile */
}
.find .visual .pin::after{
content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;
border-radius:50%;background:var(--letybo-purple);transform:translate(-50%,-50%);
animation:pulse 2200ms var(--ease-soft) infinite;opacity:.5;
}
@keyframes pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.5}100%{transform:translate(-50%,-50%) scale(3.5);opacity:0}}
/* ──────────────────────────────────────────── §06 BRAND CLOSING */
.closing{position:relative;padding:var(--space-13) 0;background:
radial-gradient(120% 90% at 30% 20%,#E8D8FF 0%,#F4ECFF 60%,#FBFAFE 100%);
overflow:hidden;
}
/* §06 ambient aurora — two GPU-cheap radial blobs traveling across the
section on offset timings (32s / 38s) so they never sync into a beat.
Sized at 80% of the container with ±~40% translate range, the blobs
actually visit different quadrants over the loop rather than just
"breathing" in place — the visual reads as objects drifting, Apple-style.
filter:blur(80px) on top of the gradient falloff hides any silhouette
against the section edge (combined with .closing's overflow:hidden).
cubic-bezier(.45,0,.55,1) is a soft sinusoidal ease for organic feel.
Animating only transform + opacity keeps both blobs on a single GPU layer. */
.closing::before,
.closing::after{
content:"";position:absolute;
top:10%;left:10%;width:80%;height:80%;
border-radius:50%;
filter:blur(80px);
pointer-events:none;
will-change:transform;
}
/* Pastel palette (default) */
.closing::before{
background:radial-gradient(circle, rgba(149,211,252,.65), transparent 70%);
animation:closing-blob-1 32s cubic-bezier(.45,0,.55,1) infinite;
}
.closing::after{
background:radial-gradient(circle, rgba(132,138,253,.45), transparent 70%);
animation:closing-blob-2 38s cubic-bezier(.45,0,.55,1) infinite;
}
/* Saturated palette — add class="closing--vivid" on the section to preview.
Same motion, deeper colors with slightly tighter falloff. */
.closing--vivid::before{
background:radial-gradient(circle, rgba(120,200,255,.85), transparent 65%);
}
.closing--vivid::after{
background:radial-gradient(circle, rgba(132,138,253,.70), transparent 65%);
}
@keyframes closing-blob-1{
0% {transform:translate(-30%,-20%) scale(1)}
25% {transform:translate( 40%, 10%) scale(1.15)}
50% {transform:translate( 20%, 50%) scale(.9)}
75% {transform:translate(-25%, 30%) scale(1.1)}
100% {transform:translate(-30%,-20%) scale(1)}
}
@keyframes closing-blob-2{
0% {transform:translate( 40%, 30%) scale(1)}
30% {transform:translate(-30%, 40%) scale(1.2)}
60% {transform:translate(-20%,-25%) scale(.85)}
85% {transform:translate( 30%,-15%) scale(1.1)}
100% {transform:translate( 40%, 30%) scale(1)}
}
@media (prefers-reduced-motion: reduce){
.closing::before,
.closing::after{animation:none !important}
}
.closing .grid{position:relative;display:grid;grid-template-columns:1fr;gap:32px;align-items:start}
.closing .eyebrow{color:var(--ink-70);margin-bottom:24px}
/* §06 closing headline — typographic lockup using the display-xl utility.
Two children force the explicit line break. */
.closing-headline{margin:0 0 24px}
.closing-headline .hero-ktox{font-size:clamp(34.5px,3.96vw,51.8px);line-height:.86}
.form-consent{margin:4px 0 0}
.consent-label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.consent-label input{margin-top:3px;flex-shrink:0}
.consent-label span{font-size:12px;line-height:1.5;color:var(--ink-70)}
.closing-headline .l1,
.closing-headline .l2{display:block}
.closing-sub{color:var(--ink-70);font-size:clamp(28px,3.4vw,48px);font-weight:var(--w-extralight);line-height:1.2;letter-spacing:-.015em;max-width:24ch;margin:24px 0 0}
.closing-sub sup{font-size:.38em;vertical-align:super;line-height:0}
.closing-foot{margin:28px 0 0;color:var(--ink-50);font-size:12px;line-height:1.4;letter-spacing:.01em}
.closing-foot sup{font-size:.85em;margin-right:1px}
/* ──────────────────────────────────────────── §07 CONNECT WITH US */
.connect{padding:var(--space-11) 0 calc(var(--space-8) + 56px);background:var(--gradient-soft)}
.connect .grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,5vw,72px);align-items:center}
@media (max-width:900px){.connect .grid{grid-template-columns:1fr}}
.connect h2{margin:0 0 18px;color:var(--ink-100)}
.connect .lead{color:var(--ink-80);font-size:var(--fs-body-l);margin:0 0 14px}
.connect .body-p{color:var(--ink-70);max-width:46ch;margin:0}
.connect .hs-form-html{
margin:0;
max-width:none;
background:rgba(255,255,255,.66);
-webkit-backdrop-filter:blur(20px) saturate(140%);
backdrop-filter:blur(20px) saturate(140%);
border:1px solid rgba(255,255,255,.6);
box-shadow:var(--shadow-glass);
border-radius:var(--r-md);
}
.field{display:flex;flex-direction:column;gap:6px;position:relative}
.field label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60);font-weight:var(--w-medium)}
.field input,.field textarea{
font:inherit;font-size:16px;color:var(--ink-100);
background:transparent;border:0;border-bottom:1px solid var(--ink-30);
padding:10px 0 12px;outline:none;
transition:border-color var(--dur-2) var(--ease-soft),box-shadow var(--dur-2) var(--ease-soft);
}
.field textarea{resize:vertical;min-height:96px;line-height:1.55}
.field input:focus,.field textarea:focus{border-bottom-color:var(--letybo-purple);
box-shadow:0 1px 0 0 var(--letybo-purple)}
.field.is-error input,.field.is-error textarea{border-bottom-color:#c2410c}
.field .err{font-size:12px;color:#c2410c;display:none}
.field.is-error .err{display:block}
/* ──────────────────────────────────────────── ISI · Full Safety Information (moved from subpage) */
.isi-full{background:#fff;padding:clamp(56px,9vh,120px) 0;border-top:1px solid var(--line-hairline)}
.isi-full-grid{
display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);
gap:clamp(40px,7vw,100px);align-items:start;
}
.isi-full-aside{position:sticky;top:96px;align-self:start}
.isi-full-title{
font-family:var(--font-display);font-weight:var(--w-extralight);
font-size:clamp(32px,3.4vw,52px);line-height:1.05;letter-spacing:-.02em;
color:#000;margin:0 0 18px;text-wrap:balance;
}
.isi-full-product{
font-family:var(--font-text);font-weight:var(--w-book);
font-size:16px;line-height:1.6;color:#000;margin:0;
}
.isi-full-product sup{font-size:.7em;vertical-align:.4em}
.isi-full-body{display:flex;flex-direction:column;gap:20px;max-width:720px}
.isi-block p{
font-family:var(--font-text);font-weight:var(--w-book);
font-size:16px;line-height:1.7;color:#000;margin:0 0 10px;
}
.isi-block p:last-child{margin-bottom:0}
.isi-block b{font-weight:var(--w-medium);color:#000}
.isi-block a{color:#000;text-decoration:underline;text-underline-offset:2px}
.isi-block a:hover{opacity:.6}
.isi-block p.isi-material{margin-top:18px;font-size:13px;letter-spacing:.04em;color:#000}
.isi-block p.isi-ai-disclosure{font-family:var(--font-text);font-size:16px;line-height:1.7;color:#000;margin:16px 0 0}
.isi-boxed-warning{
border:1px solid var(--ink-30, #C2C2CC);
border-radius:0;
padding:16px 20px;
margin:16px 0;
}
.isi-boxed-warning p{
font-family:var(--font-text);
font-size:16px;
line-height:1.6;
color:#000;
margin:0 0 8px;
}
.isi-boxed-warning p:last-child{margin-bottom:0}
.isi-boxed-warning b{font-weight:var(--w-medium)}
@media (max-width:900px){
.isi-full-grid{grid-template-columns:1fr;gap:28px}
.isi-full-aside{position:relative;top:0}
}
/* ──────────────────────────────────────────── STICKY ISI BANNER */
.isi-sticky{
position:fixed;left:0;right:0;bottom:0;z-index:60;
background:rgba(14,14,16,.96);
color:#fff;backdrop-filter:blur(20px);
border-top:1px solid rgba(255,255,255,.08);
transform:translateY(0);opacity:1;
transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .45s cubic-bezier(.4,0,.2,1);
will-change:transform,opacity;
}
.isi-sticky .container{padding-top:14px;padding-bottom:14px;
display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center}
.isi-sticky .lbl{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
color:rgba(255,255,255,.6);font-weight:var(--w-medium)}
.isi-sticky .summary{font-size:10px;line-height:1.5;color:rgba(255,255,255,.92);
max-width:none;display:block;letter-spacing:0;
}
.isi-sticky .btn-read{
font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-100);background:#fff;padding:9px 16px;border-radius:var(--r-pill);
display:inline-flex;align-items:center;gap:8px;font-weight:var(--w-medium);
}
.isi-sticky .btn-read:hover{opacity:.85}
/* ──────────────────────────────────────────── FOOTER */
.foot{background:#0B0B0F;color:#cfcfd4;padding:var(--space-12) 0 96px;text-align:left}
.foot .top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(24px,4vw,72px);margin-bottom:var(--space-10)}
@media (max-width:900px){.foot .top{grid-template-columns:1fr 1fr}}
.foot .brand{display:flex;flex-direction:column;gap:18px}
.foot .brand .mark{font-family:var(--font-display);font-weight:var(--w-extralight);
font-size:28px;letter-spacing:-.02em;color:#fff;display:inline-block}
/* footer is on dark — use the on-dark logo variant (white wordmark, blue waves).
We avoid CSS filters here: invert() flips the brand blue (#00B2F5) into orange. */
.foot .brand .mark img{height:38px;width:auto;display:block}
.foot .brand .mark sup{font-size:11px;font-weight:var(--w-book)}
.foot .social{display:flex;gap:14px;align-items:center;font-size:13px}
.foot .social .ig{
width:32px;height:32px;border:1px solid rgba(255,255,255,.18);border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;color:#fff;
transition:all var(--dur-2) var(--ease-soft);
}
.foot .social .ig:hover{background:#fff;color:var(--ink-100);border-color:#fff}
.foot h6,.foot-heading{margin:0 0 14px;font-size:10.5px;letter-spacing:.18em;
text-transform:uppercase;color:#fff;font-weight:var(--w-medium)}
.foot a.lk{display:block;padding:5px 0;color:#cfcfd4;font-size:13px;transition:opacity var(--dur-2) var(--ease-soft)}
.foot a.lk:hover{opacity:.62}
.foot .ae{color:#cfcfd4;font-size:13px;line-height:1.7}
.foot .ae b{color:#fff;font-weight:var(--w-medium)}
.foot .refs{font-size:11.5px;line-height:1.7;color:#6B6B75;display:flex;flex-direction:column;gap:10px}
.foot .refs sup{color:#cfcfd4;margin-right:6px}
.foot .legal{border-top:1px solid #2B2B33;padding-top:24px;
display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
font-size:11px;color:#9C9CA6;line-height:1.6}
.foot .legal p{margin:0}
.foot .legal-links{display:flex;gap:24px;flex-wrap:wrap}
.foot .legal-links a{color:#9C9CA6;text-transform:uppercase;letter-spacing:.08em;font-size:11px;text-decoration:none}
.foot .legal-links a:hover{color:#fff}
/* ──────────────────────────────────────────── modal for Find a Provider stub */
.modal{position:fixed;inset:0;z-index:80;background:rgba(11,11,15,.6);
display:none;align-items:center;justify-content:center;padding:24px;
backdrop-filter:blur(10px);}
.modal.is-open{display:flex;animation:fadeIn 240ms var(--ease-soft)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{background:#fff;border-radius:var(--r-md);max-width:520px;width:100%;
padding:clamp(28px,3vw,40px);position:relative;
box-shadow:0 40px 100px -20px rgba(0,0,0,.4);
animation:modalIn 380ms var(--ease-out)}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-card .close{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;
border:1px solid var(--line-hairline);display:inline-flex;align-items:center;justify-content:center;
cursor:pointer;color:var(--ink-70);transition:all var(--dur-2) var(--ease-soft)}
.modal-card .close:hover{background:var(--ink-05);color:var(--ink-100)}
.modal-card .eyebrow{margin-bottom:14px;color:var(--letybo-purple)}
.modal-card h3{font-family:var(--font-display);font-weight:var(--w-extralight);
font-size:32px;line-height:1.1;letter-spacing:-.02em;margin:0 0 14px;color:var(--ink-100)}
.modal-card p{margin:0 0 24px;color:var(--ink-70);font-size:15px;line-height:1.55}
.modal-card .zip-row{display:flex;gap:10px;margin-bottom:24px}
.modal-card .zip-row[hidden]{display:none}
.modal-card .zip-row input{flex:1;font:inherit;font-size:16px;padding:14px 16px;
border:1px solid var(--ink-20);border-radius:var(--r-pill);outline:none;
transition:border-color var(--dur-2) var(--ease-soft)}
.modal-card .zip-row input:focus{border-color:var(--letybo-purple)}
@keyframes revealFade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media (max-width:900px){
.hero-bottom{grid-template-columns:1fr;gap:14px}
.isi-sticky .container{grid-template-columns:auto 1fr auto;gap:10px}
.isi-sticky .summary{max-height:40vh;overflow-y:auto}
.foot{padding-bottom:160px}
.connect{padding-bottom:var(--space-8)}
}
/* v18-hcp — mobile reflow of sticky ISI: text full-width on top, button on its
own row below, right-aligned. Placed after the 900px block so it wins the
grid-template-columns cascade at ≤600px. Auto-hide box + slide animation
are untouched (handled on .isi-sticky itself). Applies to Patients + HCP. */
@media (max-width:600px){
.isi-sticky .container{grid-template-columns:auto 1fr;row-gap:12px;align-items:start}
.isi-sticky .btn-read{grid-column:1 / -1;justify-self:end;min-height:40px}
}
/* v23-hcp — footer collapses to 1 column on mobile (was stuck at 2-col ≤900px,
clipping "Adverse Event Reporting" + long email). Break the long email word. */
@media (max-width:600px){
.foot .top{grid-template-columns:1fr}
.foot .ae,.foot .ae a{overflow-wrap:break-word;word-break:break-word}
}
/* Hide the source template — panels are lifted into the modal track by JS. */
#ce-modal-panels-src{display:none !important}
@keyframes ceBobDown{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
/* ════════════════════════════════════════════════════════════════════════════
MICRO-INTERACTIONS PASS · v22
Reusable systems + per-block reveal/hover behavior.
Single shared IO observer drives all .is-revealed toggles (see scripts/home.js).
All entries respect prefers-reduced-motion.
════════════════════════════════════════════════════════════════════════════ */
/* ─── .has-split · reusable split-line headline reveal ─────────────────────
Wrap each visual line in text.
The .split-line acts as an overflow-clip mask; inner slides from
translateY(110%) to translateY(0). When parent gets .is-revealed, lines
cascade with 180ms stagger between :nth-child positions.
Block-axis padding+negative-margin gives ascenders/descenders breathing
room without changing visual layout. */
.has-split .split-line{
display:block;overflow:hidden;
padding-block:0.15em;margin-block:-0.15em;
}
.has-split .split-line > span{
display:block;
transform:translateY(110%);
transition:transform 900ms var(--ease-out);
}
.has-split.is-revealed .split-line > span{transform:translateY(0)}
.has-split.is-revealed .split-line:nth-child(2) > span{transition-delay:180ms}
.has-split.is-revealed .split-line:nth-child(3) > span{transition-delay:360ms}
.has-split.is-revealed .split-line:nth-child(4) > span{transition-delay:540ms}
/* ─── §02b stats · per-item reveal + icon draw-on ─────────────────────────
Each .gt-stats-item is observed individually (shared IO).
Stagger of 0/200/400ms applied via :nth-child + transition-delay.
Icons use stroke-dasharray:1000 (overshoot any real perimeter) with
stroke-dashoffset transition; starts 200ms after the item reveal so the
line "draws on" inside the already-faded item. */
.gt-stats .gt-stats-item{
opacity:0;transform:translateY(24px);
transition:opacity 800ms var(--ease-out),
transform 800ms var(--ease-out);
}
.gt-stats .gt-stats-item.is-revealed{opacity:1;transform:translateY(0)}
.gt-stats .gt-stats-item:nth-child(1).is-revealed{transition-delay:0ms}
.gt-stats .gt-stats-item:nth-child(2).is-revealed{transition-delay:200ms}
.gt-stats .gt-stats-item:nth-child(3).is-revealed{transition-delay:400ms}
.gt-stats-icon path,
.gt-stats-icon circle,
.gt-stats-icon ellipse,
.gt-stats-icon line,
.gt-stats-icon rect,
.gt-stats-icon polygon{
stroke-dasharray:1000;
stroke-dashoffset:1000;
transition:stroke-dashoffset 1400ms var(--ease-out) 200ms;
}
.gt-stats-item.is-revealed .gt-stats-icon path,
.gt-stats-item.is-revealed .gt-stats-icon circle,
.gt-stats-item.is-revealed .gt-stats-icon ellipse,
.gt-stats-item.is-revealed .gt-stats-icon line,
.gt-stats-item.is-revealed .gt-stats-icon rect,
.gt-stats-item.is-revealed .gt-stats-icon polygon{
stroke-dashoffset:0;
}
/* Mobile: drop the artificial staircase delays so each scroll-in item
reveals immediately when it crosses 30% (no jarring 400ms wait for #3). */
/* Mobile: drop the artificial staircase delays so each scroll-in item
reveals immediately when it crosses 30% (no jarring 400ms wait for #3). */
@media (max-width:900px){
.gt-stats .gt-stats-item:nth-child(1).is-revealed,
.gt-stats .gt-stats-item:nth-child(2).is-revealed,
.gt-stats .gt-stats-item:nth-child(3).is-revealed{transition-delay:0ms}
}
/* ─── §05 .find · entrance reveal + CTA hover override ───────────────────
Section adds .js-fade-up; shared IO toggles .is-revealed once.
.btn-primary inside .find gets a deeper purple lift shadow (overrides the
global .btn-primary:hover) — arrow shift handled by global .btn:hover .arr. */
.find.js-fade-up{
opacity:0;transform:translateY(32px);
transition:opacity 900ms var(--ease-out),
transform 900ms var(--ease-out);
}
.find.js-fade-up.is-revealed{opacity:1;transform:translateY(0)}
@media (hover:hover){
.find .btn-primary:hover{
box-shadow:0 8px 20px -6px rgba(132,138,253,.55);
}
}
/* ─── Locator modal · ZIP focus-within ring ──────────────────────────────
The §05 "Find a Provider" CTAs open the locator modal where the ZIP
input lives. Focus-within applies purple ring + soft shadow on the row
container so the input + button glow together. */
.modal-card .zip-row{
border-radius:var(--r-pill);
transition:box-shadow var(--dur-3) var(--ease-soft);
}
.modal-card .zip-row:focus-within{
box-shadow:0 0 0 4px rgba(132,138,253,.15),
0 8px 24px -8px rgba(132,138,253,.3);
}
.modal-card .zip-row:focus-within input{
border-color:var(--letybo-purple);
}
/* ─── prefers-reduced-motion · umbrella ──────────────────────────────────
All entrance reveals + hover transforms disabled. Color/background-only
hovers (e.g. nav link opacity) stay intact since they're not gated here.
Locator ZIP focus glow stays — it's feedback, not motion. */
/* ─── prefers-reduced-motion · umbrella ──────────────────────────────────
All entrance reveals + hover transforms disabled. Color/background-only
hovers (e.g. nav link opacity) stay intact since they're not gated here.
Locator ZIP focus glow stays — it's feedback, not motion. */
@media (prefers-reduced-motion: reduce){
.has-split .split-line > span{
transform:none !important;transition:none !important;
}
.find.js-fade-up,
.find.js-fade-up *{
opacity:1 !important;transform:none !important;transition:none !important;
}
.find .btn-primary:hover{box-shadow:none !important}
}
/* ════════════════════════════════════════════════════════
§03b — Before/After carousel (above the 3 pillars)
════════════════════════════════════════════════════════ */
.ba-carousel{
margin-bottom:64px;
position:relative;
border-radius:24px;
background:white;
box-shadow:0 24px 48px -16px rgba(46,53,160,0.15);
border:1px solid rgba(132,138,253,0.12);
overflow:hidden;
}
.ba-track{
display:flex;
transition:transform 560ms var(--ease-out);
will-change:transform;
}
.ba-slide{flex:0 0 100%; min-width:0}
/* ─── frame del before/after */
.ba-frame{
position:relative;
width:100%;
aspect-ratio:21/9;
overflow:hidden;
cursor:ew-resize;
user-select:none;
background:#000;
touch-action:pan-y; /* permite scroll vertical en mobile */
}
.ba-img-before,
.ba-img-after{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;
display:block;
pointer-events:none;
}
.ba-after-wrap{
position:absolute;inset:0;
overflow:hidden;
clip-path:inset(0 0 0 50%); /* default: before LEFT (50%), after RIGHT (50%) */
}
/* ─── handle vertical (drag indicator) */
.ba-handle{
position:absolute;
top:0;bottom:0;left:50%;
width:2px;
background:rgba(255,255,255,0.92);
pointer-events:none;
box-shadow:0 0 0 1px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.18);
transform:translateX(-50%);
}
.ba-handle::before{
content:"";
position:absolute;top:50%;left:50%;
width:48px;height:48px;border-radius:50%;
background:white;
transform:translate(-50%,-50%);
box-shadow:0 4px 12px rgba(0,0,0,0.2);
}
.ba-handle::after{
content:"⇆";
position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);
font-size:18px;
color:var(--letybo-purple-ink);
font-weight:var(--w-medium);
}
/* ─── labels BEFORE / AFTER */
.ba-label{
position:absolute;top:24px;
font-size:11px;letter-spacing:0.20em;text-transform:uppercase;
font-weight:var(--w-medium);color:white;
padding:6px 12px;
background:rgba(0,0,0,0.55);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
border-radius:6px;
pointer-events:none;
z-index:2;
}
.ba-label-before{left:24px}
.ba-label-after{right:24px}
/* ─── info del paciente (debajo del frame) */
.ba-info{
padding:24px 32px 28px;
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:24px;
flex-wrap:wrap;
}
.ba-patient-name{
font-size:20px;
font-weight:var(--w-light);
letter-spacing:-0.01em;
color:var(--ink-100);
}
.ba-patient-name em{
font-style:normal;
font-weight:var(--w-medium);
}
.ba-patient-meta{
font-size:12px;
color:var(--ink-50);
letter-spacing:0.04em;
text-transform:uppercase;
margin-top:4px;
}
.ba-timing{
font-size:11px;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--letybo-purple-ink);
font-weight:var(--w-medium);
}
/* ─── navegación: flechas + dots */
.ba-nav{
display:flex;
justify-content:center;
align-items:center;
gap:16px;
margin-top:32px;
margin-bottom:16px;
}
.ba-dots{display:flex;gap:4px}
.ba-dot{
width:24px;height:24px;border-radius:50%;
background:transparent;
cursor:pointer;
border:none;padding:0;
position:relative;
transition:all 320ms var(--ease-soft);
}
.ba-dot::after{
content:"";
position:absolute;
inset:7px;
border-radius:50%;
background:var(--ink-20);
transition:all 320ms var(--ease-soft);
}
.ba-dot.is-active{
width:28px;
border-radius:999px;
}
.ba-dot.is-active::after{
inset:7px 3px;
border-radius:999px;
background:var(--letybo-purple);
}
.ba-arrow{
width:44px;height:44px;border-radius:50%;
background:white;
border:1px solid var(--ink-20);
color:var(--ink-100);
cursor:pointer;
font-size:16px;
font-family:inherit;
transition:all 320ms var(--ease-soft);
display:flex;align-items:center;justify-content:center;
}
.ba-arrow:hover:not(:disabled){
border-color:var(--letybo-purple);
color:var(--letybo-purple);
}
.ba-arrow:disabled{
opacity:0.3;
cursor:not-allowed;
}
/* ─── footnote */
.ba-foot{
text-align:center;
margin-bottom:48px;
font-size:12px;
color:#6B6B75;
font-style:italic;
line-height:1.5;
}
/* ─── responsive */
@media (max-width:760px){
.ba-handle::before{width:36px;height:36px}
.ba-handle::after{font-size:14px}
.ba-label{font-size:10px;top:12px;padding:4px 10px}
.ba-label-before{left:12px}
.ba-label-after{right:12px}
.ba-info{padding:18px 20px;flex-direction:column;align-items:flex-start;gap:8px}
.ba-patient-name{font-size:18px}
}
/* ─── reduced motion */
@media (prefers-reduced-motion:reduce){
.ba-track{transition:none !important}
.ba-dot, .ba-arrow{transition:none !important}
}
/* ============ 3) TWEAKS PANEL CHROME ============ */
/* ─────────────────────────────────────────────────────────────────────
Tweaks panel chrome (lifted from inline