/* Biggest Goal — scroll-driven single page */
:root {
--bg: #0B0B14;
--bg-2: #12121F;
--ivory: #F5F0E6;
--ivory-2: #EBE3D3;
--ink: #0B0B14;
--purple: #7C5CFF;
--purple-deep: #5A3FE0;
--coral: #FF7A59;
--mute: #8A8AA3;
--mute-ivory: #6B6556;
--line: rgba(255,255,255,0.10);
--line-dark: rgba(11,11,20,0.12);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
html, body {
background: var(--bg);
color: var(--ivory);
font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
font-feature-settings: "ss01", "ss02", "cv11";
-webkit-font-smoothing: antialiased;
/* Use `clip` instead of `hidden` so html/body don't become scroll containers —
`overflow-x: hidden` on breaks `position: sticky` in the Q&A
section on tall desktop viewports. */
overflow-x: clip;
}
::selection { background: var(--purple); color: white; }
.hp-0426-serif { font-family: 'Sora', 'Geist', sans-serif; font-weight: 600; letter-spacing: -0.01em; }
.hp-0426-mono { font-family: 'Geist Mono', ui-monospace, monospace; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
/* ---------- NAV ---------- */
.hp-0426-nav {
position: fixed; top: 0; left: 0; right: 0;
display: flex; justify-content: space-between; align-items: center;
padding: 22px 32px;
z-index: 100;
mix-blend-mode: difference;
pointer-events: none;
}
.hp-0426-nav > * { pointer-events: auto; }
.hp-0426-nav-logo {
display: flex; align-items: center; gap: 10px;
color: #fff;
font-weight: 600;
font-size: 17px;
letter-spacing: -0.01em;
}
.hp-0426-nav-logo-img {
height: 22px;
width: auto;
max-width: 140px;
display: block;
}
@media (min-width: 900px) {
.hp-0426-nav-logo-img { height: 24px; max-width: 160px; }
}
.hp-0426-nav-cta {
padding: 10px 18px;
border-radius: 999px;
background: #fff;
color: #0B0B14;
font-weight: 500;
font-size: 14px;
display: inline-flex; align-items: center; gap: 8px;
transition: transform .2s;
}
.hp-0426-nav-cta:hover { transform: translateY(-1px); }
/* Progress bar */
.hp-0426-progress {
position: fixed; top: 0; left: 0; height: 2px; width: 100%;
background: var(--purple);
z-index: 101;
mix-blend-mode: normal;
transform: scaleX(0);
transform-origin: left;
will-change: transform;
}
/* ---------- SHARED ---------- */
.hp-0426-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Geist Mono', monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mute);
}
.hp-0426-eyebrow.hp-0426-on-light { color: var(--mute-ivory); }
.hp-0426-eyebrow .hp-0426-dot {
flex: 0 0 auto;
width: 6px; height: 6px; border-radius: 50%;
background: var(--purple);
box-shadow: 0 0 12px var(--purple);
}
.hp-0426-section {
position: relative;
padding: 0;
}
.hp-0426-wrap {
max-width: 1240px;
margin: 0 auto;
padding: 0 32px;
}
.hp-0426-wrap-wide { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
/* ---------- HERO ---------- */
.hp-0426-hero {
position: relative;
min-height: 100vh;
min-height: 100svh;
display: grid;
place-items: center;
overflow: hidden;
padding: 120px 24px 80px;
}
.hp-0426-hero-bg {
position: absolute; inset: 0;
background:
radial-gradient(1200px 700px at 75% 15%, rgba(124,92,255,0.28), transparent 65%),
radial-gradient(900px 600px at 15% 85%, rgba(255,122,89,0.14), transparent 65%),
radial-gradient(600px 400px at 50% 50%, rgba(90,63,224,0.08), transparent 70%),
var(--bg);
z-index: 0;
animation: aurora-drift 22s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
0% { background-position: 0% 0%, 0% 0%, 0% 0%, 0 0; filter: hue-rotate(0deg); }
50% { background-position: 8% -4%, -6% 4%, 4% -2%, 0 0; filter: hue-rotate(-8deg); }
100% { background-position: -4% 6%, 4% -4%, -3% 2%, 0 0; filter: hue-rotate(4deg); }
}
.hp-0426-hero-canvas {
position: absolute; inset: 0;
width: 100%; height: 100%;
z-index: 1;
pointer-events: none;
opacity: 0.9;
}
.hp-0426-hero-vignette {
position: absolute; inset: 0;
background: radial-gradient(ellipse at center, transparent 40%, rgba(11,11,20,0.55) 100%);
z-index: 2;
pointer-events: none;
}
.hp-0426-hero-grain {
position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 3px 3px;
pointer-events: none;
z-index: 2;
}
.hp-0426-hero-inner {
position: relative; z-index: 3;
text-align: center;
max-width: 1240px;
width: 100%;
}
.hp-0426-hero-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.03);
backdrop-filter: blur(8px);
font-family: 'Geist Mono', monospace;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #d4d4e0;
margin-bottom: 40px;
}
.hp-0426-hero-eyebrow .hp-0426-pulse {
width: 7px; height: 7px; border-radius: 50%;
background: var(--purple);
box-shadow: 0 0 0 0 rgba(124,92,255,0.8);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(124,92,255,0.6); }
70% { box-shadow: 0 0 0 10px rgba(124,92,255,0); }
100% { box-shadow: 0 0 0 0 rgba(124,92,255,0); }
}
.hp-0426-hero-title {
font-family: 'Sora', 'Geist', sans-serif;
font-weight: 600;
font-size: clamp(44px, 7vw, 108px);
line-height: 0.96;
letter-spacing: -0.035em;
color: #fff;
}
.hp-0426-hero-title .hp-0426-line {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 0.22em;
overflow: visible;
}
.hp-0426-hero-title .hp-0426-word {
display: inline-block;
will-change: transform, opacity;
}
.hp-0426-hero-title .hp-0426-word:last-child { margin-right: 0; }
.hp-0426-hero-title .hp-0426-italic { font-style: normal; color: var(--ivory); }
.hp-0426-hero-title .hp-0426-shuffle {
position: relative;
display: inline-flex;
justify-content: center;
align-items: baseline;
color: var(--coral);
vertical-align: baseline;
}
.hp-0426-hero-title .hp-0426-shuffle-inner {
position: relative;
display: inline-block;
}
.hp-0426-hero-title .hp-0426-shuffle-inner::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0.05em; height: 0.06em;
background: var(--coral);
transform: scaleX(0);
transform-origin: left;
animation: underline-sweep 2.4s 0.6s cubic-bezier(.8,0,.2,1) forwards;
}
.hp-0426-hero-title .hp-0426-shuffle::after { content: none; }
@keyframes underline-sweep {
to { transform: scaleX(1); }
}
.hp-0426-hero-sub {
margin: 44px auto 0;
max-width: 580px;
font-size: 18px;
line-height: 1.55;
color: #b4b4c8;
}
.hp-0426-hero-cta {
margin-top: 48px;
display: inline-flex;
align-items: center; gap: 14px;
padding: 18px 28px;
border-radius: 999px;
background: var(--purple);
color: #fff;
font-weight: 500;
font-size: 16px;
position: relative;
transition: transform .25s, background .25s;
}
.hp-0426-hero-cta:hover { background: var(--purple-deep); transform: translateY(-2px); }
.hp-0426-hero-cta .hp-0426-arrow {
display: inline-grid; place-items: center;
width: 26px; height: 26px; border-radius: 999px;
background: rgba(255,255,255,0.18);
transition: transform .3s;
}
.hp-0426-hero-cta:hover .hp-0426-arrow { transform: translateX(4px); }
.hp-0426-hero-scroll-hint {
position: absolute; bottom: 28px; left: 50%;
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 10px;
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mute);
z-index: 4;
}
.hp-0426-hero-scroll-hint .hp-0426-bar {
width: 1px; height: 40px;
background: linear-gradient(to bottom, var(--mute), transparent);
position: relative;
overflow: hidden;
}
.hp-0426-hero-scroll-hint .hp-0426-bar::after {
content: '';
position: absolute; top: -40px; left: 0; right: 0; height: 20px;
background: linear-gradient(to bottom, transparent, var(--purple));
animation: trickle 2.2s ease-in-out infinite;
}
@keyframes trickle {
0% { top: -40px; }
100% { top: 40px; }
}
/* ---------- LOGO MARQUEE ---------- */
.hp-0426-logos-band {
padding: 60px 0 40px;
background: var(--bg);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
position: relative;
overflow: hidden;
}
.hp-0426-logos-label {
text-align: center;
margin-bottom: 32px;
}
.hp-0426-marquee {
display: flex;
gap: 60px;
animation: marquee 40s linear infinite;
width: max-content;
}
.hp-0426-marquee-item {
font-family: 'Sora', 'Geist', sans-serif;
font-size: 28px;
color: #5c5c76;
white-space: nowrap;
display: flex; align-items: center; gap: 60px;
}
.hp-0426-marquee-item::after {
content: '·';
color: var(--purple);
font-style: normal;
}
@keyframes marquee {
to { transform: translateX(-50%); }
}
/* ---------- MOMENT (sticky manifesto) ---------- */
.hp-0426-moment {
background: var(--bg);
padding: 120px 0 160px;
position: relative;
}
.hp-0426-moment .hp-0426-wrap { position: relative; }
.hp-0426-moment-eyebrow { margin-bottom: 40px; text-align: center; }
.hp-0426-moment-text {
font-family: 'Sora', 'Geist', sans-serif;
font-size: clamp(30px, 4.5vw, 64px);
line-height: 1.15;
letter-spacing: -0.02em;
text-align: center;
max-width: 1000px;
margin: 0 auto;
color: #fff;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 0.3em;
}
.hp-0426-moment-text .hp-0426-word {
display: inline-block;
color: #2a2a3e;
transition: color 0.4s ease;
}
.hp-0426-moment-text .hp-0426-word.hp-0426-emph {
color: #6b6b85;
}
.hp-0426-moment-text .hp-0426-word.hp-0426-active { color: #fff; }
.hp-0426-moment-text .hp-0426-word.hp-0426-emph.hp-0426-active { color: var(--coral); }
.hp-0426-moment-text .hp-0426-emph { /* color only, no italic */ }
.hp-0426-moment-sub {
margin-top: 48px;
max-width: 780px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: 'Geist', sans-serif;
font-size: clamp(17px, 1.5vw, 22px);
line-height: 1.5;
color: rgba(255,255,255,0.55);
letter-spacing: -0.01em;
}
/* ---------- BELIEFS (pinned cards) ---------- */
.hp-0426-beliefs {
background: var(--ivory);
color: var(--ink);
padding: 140px 0 180px;
position: relative;
}
.hp-0426-beliefs-intro { text-align: center; margin-bottom: 80px; }
.hp-0426-beliefs-intro .hp-0426-eyebrow { margin-bottom: 20px; display: inline-flex; }
.hp-0426-beliefs-intro h2 {
font-family: 'Sora', 'Geist', sans-serif;
font-weight: 600;
font-size: clamp(34px, 5vw, 62px);
line-height: 1.05;
letter-spacing: -0.025em;
max-width: 900px;
margin: 0 auto;
}
.hp-0426-beliefs-intro h2 .hp-0426-italic { font-style: normal; color: var(--purple); }
.hp-0426-beliefs-grid { display: none; }
/* ---------- Q&A (scroll-focus) ---------- */
.hp-0426-qa-scroll .hp-0426-beliefs-intro { position: relative; z-index: 2; }
.hp-0426-qa-stage {
position: relative;
/* section is 4 slides * ~80vh each of scroll = ~320vh. With sticky, the inner content fills 1 viewport */
height: 360vh;
max-width: 1160px;
margin: 40px auto 0;
padding: 0 32px;
}
.hp-0426-qa-sticky {
position: sticky;
top: 0;
height: 100vh;
display: grid;
grid-template-columns: 260px 1fr;
align-items: center;
gap: 64px;
}
.hp-0426-qa-progress {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 22px;
font-family: 'Geist Mono', monospace;
font-size: 12px;
letter-spacing: 0.12em;
color: var(--mute-ivory);
text-transform: uppercase;
position: relative;
padding-left: 10px;
}
.hp-0426-qa-progress::before {
content: "";
position: absolute;
left: 14px; top: 8px; bottom: 8px;
width: 1px;
background:
linear-gradient(to bottom,
var(--coral) 0,
var(--coral) calc(var(--qa-progress, 0) * 100%),
var(--line-dark) calc(var(--qa-progress, 0) * 100%),
var(--line-dark) 100%);
transition: background 0.15s linear;
}
.hp-0426-qa-progress li {
display: flex;
align-items: center;
gap: 18px;
cursor: pointer;
transition: color 0.3s ease;
position: relative;
z-index: 1;
}
.hp-0426-qa-progress .hp-0426-qa-dot {
width: 9px; height: 9px;
border-radius: 999px;
background: var(--line-dark);
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.hp-0426-qa-progress li.hp-0426-active {
color: var(--ink);
}
.hp-0426-qa-progress li.hp-0426-active .hp-0426-qa-dot {
background: var(--coral);
transform: scale(1.3);
box-shadow: 0 0 0 4px rgba(255,122,89,0.15);
}
.hp-0426-qa-progress li.hp-0426-past .hp-0426-qa-dot {
background: var(--ink);
}
/* Pulse the next (about-to-activate) dot so users see motion ahead of their cursor */
.hp-0426-qa-progress li.hp-0426-active + li .hp-0426-qa-dot {
animation: hp-0426-qa-pulse-next 1.6s ease-in-out infinite;
}
@keyframes hp-0426-qa-pulse-next {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255,122,89,0);
}
50% {
transform: scale(1.25);
box-shadow: 0 0 0 6px rgba(255,122,89,0.18);
}
}
@media (prefers-reduced-motion: reduce) {
.hp-0426-qa-progress li.hp-0426-active + li .hp-0426-qa-dot { animation: none; }
}
.hp-0426-qa-slides {
position: relative;
min-height: 540px;
}
.hp-0426-qa-slide {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0;
opacity: 0;
transform: translateY(28px) scale(0.985);
filter: blur(6px);
transition: opacity 0.7s cubic-bezier(.2,.8,.2,1),
transform 0.7s cubic-bezier(.2,.8,.2,1),
filter 0.7s cubic-bezier(.2,.8,.2,1);
pointer-events: none;
}
.hp-0426-qa-slide.hp-0426-active {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
pointer-events: auto;
}
.hp-0426-qa-slide.hp-0426-exit-up {
opacity: 0;
transform: translateY(-28px) scale(0.985);
filter: blur(6px);
}
.hp-0426-qa-count {
font-family: 'Geist Mono', monospace;
font-size: 12px;
letter-spacing: 0.14em;
color: var(--coral);
margin-bottom: 28px;
text-transform: uppercase;
}
.hp-0426-qa-slide h3 {
font-family: 'Sora', 'Geist', sans-serif;
font-weight: 600;
font-size: clamp(32px, 4vw, 56px);
line-height: 1.08;
letter-spacing: -0.025em;
color: var(--ink);
text-wrap: balance;
margin: 0 0 28px;
max-width: 18ch;
}
.hp-0426-qa-slide p {
font-size: clamp(17px, 1.3vw, 20px);
line-height: 1.55;
color: #3a3528;
margin: 0;
max-width: 58ch;
}
/* "Up next" peek — anchored to the bottom of the slide and revealed by the
--qa-slide-progress custom property the JS sets as the user scrolls within
the current slide. Eye-catching motion right where the user is reading. */
.hp-0426-qa-up-next {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
gap: 14px;
padding: 18px 0 0;
font-family: 'Geist Mono', monospace;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mute-ivory);
opacity: calc(0.55 + (var(--qa-slide-progress, 0) * 0.45));
transition: opacity 0.2s linear, color 0.3s ease;
pointer-events: none;
}
/* The "loading bar" above the Up next peek — a 3px track with a coral fill
that grows from 0% to 100% width as the user scrolls through the slide.
When it reaches 100%, the next slide is about to swap in. */
.hp-0426-qa-up-next::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--line-dark);
border-radius: 999px;
}
.hp-0426-qa-up-next::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 3px;
width: calc(var(--qa-slide-progress, 0) * 100%);
background: var(--coral);
border-radius: 999px;
box-shadow: 0 0 12px rgba(255, 122, 89, 0.45);
transition: width 0.12s linear;
}
.hp-0426-qa-up-next-label {
flex: 0 0 auto;
color: var(--coral);
letter-spacing: 0.18em;
line-height: 1;
/* Uppercase ink sits high in the line-box — nudge down so it visually aligns
with the lowercase title text rather than just box-centering with it. */
transform: translateY(2px);
}
.hp-0426-qa-up-next-title {
flex: 1 1 auto;
color: var(--ink);
font-family: 'Geist', sans-serif;
font-size: 14px;
letter-spacing: 0;
text-transform: none;
font-weight: 500;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hp-0426-qa-up-next-arrow {
flex: 0 0 auto;
color: var(--coral);
font-size: 18px;
line-height: 1;
display: inline-block;
transform: translateX(calc(var(--qa-slide-progress, 0) * 10px));
transition: transform 0.2s linear;
}
.hp-0426-qa-up-next-last .hp-0426-qa-up-next-arrow {
/* Last slide: arrow points down instead of right; nudge downward */
transform: translateY(calc(var(--qa-slide-progress, 0) * 6px));
}
@media (prefers-reduced-motion: reduce) {
.hp-0426-qa-up-next,
.hp-0426-qa-up-next-title,
.hp-0426-qa-up-next-arrow,
.hp-0426-qa-up-next::after { transition: none; transform: none; }
.hp-0426-qa-up-next { opacity: 1; }
}
.hp-0426-qa-foot {
max-width: 1160px;
margin: 0 auto;
padding: 80px 32px 0;
text-align: center;
}
.hp-0426-qa-foot p {
font-size: 15px;
color: #6B6556;
}
.hp-0426-qa-foot a {
color: var(--ink);
font-weight: 500;
text-decoration: none;
border-bottom: 1px solid var(--ink);
padding-bottom: 1px;
transition: color 0.2s, border-color 0.2s;
}
.hp-0426-qa-foot a:hover {
color: var(--coral);
border-color: var(--coral);
}
/* ---------- PROGRAMS (horizontal) ---------- */
.hp-0426-programs {
background: var(--bg);
color: var(--ivory);
position: relative;
padding-top: 140px;
}
.hp-0426-programs-intro {
text-align: center;
padding: 0 32px 80px;
max-width: 1100px;
margin: 0 auto;
}
.hp-0426-programs-intro .hp-0426-eyebrow { margin-bottom: 20px; display: inline-flex; }
.hp-0426-programs-intro h2 {
font-family: 'Sora', 'Geist', sans-serif;
font-weight: 600;
font-size: clamp(34px, 5vw, 64px);
line-height: 1.03;
letter-spacing: -0.025em;
color: #fff;
}
.hp-0426-programs-intro h2 .hp-0426-italic { font-style: normal; color: var(--coral); }
.hp-0426-programs-intro p {
margin-top: 28px;
font-size: 18px;
line-height: 1.55;
color: #a8a8bf;
max-width: 600px;
margin-left: auto; margin-right: auto;
}
/* ---------- PROGRAMS (sticky index + stack) ---------- */
.hp-0426-programs-grid {
display: grid;
grid-template-columns: 360px 1fr;
gap: 80px;
max-width: 1400px;
margin: 0 auto;
padding: 0 48px 40px;
align-items: start;
}
.hp-0426-programs-index {
position: sticky;
top: 100px;
align-self: start;
}
.hp-0426-programs-index-list {
list-style: none;
display: flex; flex-direction: column;
counter-reset: programIdx;
border-top: 1px solid rgba(255,255,255,0.08);
}
.hp-0426-programs-index-list li {
display: grid;
grid-template-columns: 44px 1fr;
gap: 16px;
align-items: start;
padding: 22px 4px;
border-bottom: 1px solid rgba(255,255,255,0.08);
cursor: pointer;
opacity: 0.5;
transition: opacity .4s ease, transform .4s ease, background .3s;
position: relative;
}
.hp-0426-programs-index-list li::before {
content: '';
position: absolute; left: -20px; top: 50%;
width: 3px; height: 0;
background: var(--coral);
border-radius: 2px;
transform: translateY(-50%);
transition: height .4s cubic-bezier(.6,0,.2,1);
}
.hp-0426-programs-index-list li.hp-0426-active {
opacity: 1;
}
.hp-0426-programs-index-list li.hp-0426-active::before { height: 60%; }
.hp-0426-programs-index-list li:hover { opacity: 1; }
.hp-0426-pi-num {
font-family: 'Geist Mono', monospace;
font-size: 12px;
letter-spacing: 0.1em;
color: var(--coral);
padding-top: 3px;
}
.hp-0426-pi-name {
font-family: 'Sora', 'Geist', sans-serif;
font-weight: 600;
font-size: 20px;
color: #fff;
letter-spacing: -0.015em;
line-height: 1.2;
}
.hp-0426-pi-meta {
margin-top: 4px;
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #8a8aa3;
}
.hp-0426-programs-index-hint {
margin-top: 18px;
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #6f6f88;
}
.hp-0426-programs-stack {
display: flex; flex-direction: column;
gap: 28px;
}
.hp-0426-program-card {
background: linear-gradient(180deg, #1a1a2c 0%, #121222 100%);
border: 1px solid var(--line);
border-radius: 24px;
padding: 44px;
display: flex; flex-direction: column;
position: relative;
overflow: hidden;
scroll-margin-top: 90px;
opacity: 0.55;
transform: translateY(14px);
transition: opacity .6s ease, transform .6s ease, border-color .4s, box-shadow .4s;
}
.hp-0426-program-card.hp-0426-active {
opacity: 1;
transform: translateY(0);
border-color: rgba(124,92,255,0.35);
box-shadow: 0 30px 80px -40px rgba(124,92,255,0.5);
}
.hp-0426-program-card::before {
content: '';
position: absolute; inset: -1px;
border-radius: 24px;
padding: 1px;
background: linear-gradient(135deg, rgba(124,92,255,0.6), transparent 40%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity .4s;
pointer-events: none;
}
.hp-0426-program-card.hp-0426-active::before { opacity: 1; }
.hp-0426-program-tag {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(124,92,255,0.12);
border: 1px solid rgba(124,92,255,0.3);
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #b9a8ff;
align-self: flex-start;
}
.hp-0426-program-name {
font-family: 'Sora', 'Geist', sans-serif;
font-size: 42px;
line-height: 1.02;
letter-spacing: -0.02em;
color: #fff;
margin: 28px 0 16px;
}
.hp-0426-program-name .hp-0426-italic { font-style: normal; color: var(--purple); }
.hp-0426-program-desc {
font-size: 16px;
line-height: 1.55;
color: #a8a8bf;
margin-bottom: 32px;
}
.hp-0426-program-meta {
display: flex; flex-wrap: wrap; gap: 16px;
margin-bottom: 28px;
padding: 20px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.hp-0426-program-meta-item {
font-family: 'Geist Mono', monospace;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #8a8aa3;
display: flex; align-items: center; gap: 8px;
}
.hp-0426-program-meta-item b { color: #fff; font-weight: 600; }
.hp-0426-program-bullets {
list-style: none;
display: flex; flex-direction: column; gap: 12px;
margin-bottom: 32px;
}
.hp-0426-program-bullets li {
display: flex; gap: 12px;
font-size: 14.5px;
line-height: 1.5;
color: #c8c8d8;
}
.hp-0426-program-bullets li::before {
content: ''; flex-shrink: 0;
width: 6px; height: 6px; border-radius: 50%;
background: var(--purple);
margin-top: 8px;
}
.hp-0426-program-price {
margin-top: auto;
display: flex; justify-content: flex-start; align-items: center;
}
.hp-0426-program-price .hp-0426-amount {
font-family: 'Sora', 'Geist', sans-serif;
font-size: 36px;
color: #fff;
line-height: 1;
}
.hp-0426-program-price .hp-0426-amount small { font-size: 14px; color: var(--mute); }
.hp-0426-program-price .hp-0426-link {
font-size: 14px;
color: var(--purple);
display: inline-flex; align-items: center; gap: 6px;
border-bottom: 1px solid rgba(124,92,255,0.4);
padding-bottom: 2px;
}
/* ---------- PROOF ---------- */
.hp-0426-proof {
background: var(--ivory);
color: var(--ink);
padding: 140px 0 120px;
position: relative;
overflow: hidden;
isolation: isolate;
z-index: 1;
}
.hp-0426-proof .hp-0426-testimonial-rows {
overflow: hidden;
}
.hp-0426-proof-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
max-width: 1240px;
margin: 0 auto 100px;
padding: 0 32px;
border-top: 1px solid var(--line-dark);
border-bottom: 1px solid var(--line-dark);
}
.hp-0426-stat {
padding: 40px 24px;
border-right: 1px solid var(--line-dark);
text-align: left;
}
.hp-0426-stat:last-child { border-right: 0; }
.hp-0426-stat-num {
font-family: 'Sora', 'Geist', sans-serif;
font-size: clamp(40px, 5vw, 64px);
line-height: 1;
letter-spacing: -0.03em;
margin-bottom: 12px;
color: var(--ink);
}
.hp-0426-stat-num .hp-0426-plus { color: var(--purple); font-style: italic; }
.hp-0426-stat-label {
font-size: 13px;
line-height: 1.4;
color: var(--mute-ivory);
max-width: 180px;
}
.hp-0426-proof-title {
text-align: center;
max-width: 900px;
margin: 0 auto 80px;
padding: 0 32px;
}
.hp-0426-proof-title .hp-0426-eyebrow { margin-bottom: 20px; display: inline-flex; }
.hp-0426-proof-title h2 {
font-family: 'Sora', 'Geist', sans-serif;
font-size: clamp(32px, 4.5vw, 56px);
line-height: 1.05;
letter-spacing: -0.02em;
}
.hp-0426-proof-title h2 .hp-0426-italic { font-style: normal; color: var(--purple); }
.hp-0426-testimonial-rows {
display: flex; flex-direction: column; gap: 24px;
}
.hp-0426-testimonial-row {
display: flex; gap: 24px;
width: max-content;
animation: scroll-left 80s linear infinite;
}
.hp-0426-testimonial-row.hp-0426-reverse { animation: scroll-right 90s linear infinite; }
@keyframes scroll-left {
to { transform: translateX(calc(-50% - 12px)); }
}
@keyframes scroll-right {
from { transform: translateX(calc(-50% - 12px)); }
to { transform: translateX(0); }
}
.hp-0426-testimonial-card {
flex: 0 0 420px;
background: #fff;
border: 1px solid var(--line-dark);
border-radius: 16px;
padding: 28px;
display: flex; flex-direction: column; gap: 16px;
}
.hp-0426-testimonial-quote {
font-family: 'Sora', 'Geist', sans-serif;
font-size: 19px;
line-height: 1.35;
color: var(--ink);
}
.hp-0426-testimonial-author {
display: flex; align-items: center; gap: 12px;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--line-dark);
}
.hp-0426-testimonial-avatar {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--purple);
color: #fff;
display: grid; place-items: center;
font-weight: 600;
font-size: 14px;
flex-shrink: 0;
}
.hp-0426-testimonial-name {
font-size: 14px;
font-weight: 500;
color: var(--ink);
}
.hp-0426-testimonial-role {
font-size: 12px;
color: var(--mute-ivory);
margin-top: 2px;
}
/* ---------- COURSE (finale) ---------- */
.hp-0426-course {
background: var(--bg);
color: var(--ivory);
padding: 160px 0 140px;
position: relative;
overflow: hidden;
}
.hp-0426-course-bg {
position: absolute; inset: 0;
background:
radial-gradient(900px 500px at 80% 30%, rgba(124,92,255,0.25), transparent 60%),
radial-gradient(700px 400px at 15% 70%, rgba(255,122,89,0.15), transparent 60%);
pointer-events: none;
}
.hp-0426-course-inner {
position: relative;
max-width: 1240px;
margin: 0 auto;
padding: 0 32px;
}
.hp-0426-course-lead { text-align: center; margin-bottom: 80px; }
.hp-0426-course-lead .hp-0426-eyebrow { margin-bottom: 24px; display: inline-flex; }
.hp-0426-course-lead h2 {
font-family: 'Sora', 'Geist', sans-serif;
font-weight: 600;
font-size: clamp(40px, 6.5vw, 92px);
line-height: 0.95;
letter-spacing: -0.03em;
color: #fff;
}
.hp-0426-course-lead h2 .hp-0426-italic { font-style: normal; color: var(--coral); }
.hp-0426-course-lead .hp-0426-price-tag {
display: inline-flex; align-items: baseline; gap: 10px;
margin-top: 36px;
padding: 10px 20px;
border-radius: 999px;
background: rgba(255,255,255,0.06);
border: 1px solid var(--line);
}
.hp-0426-course-lead .hp-0426-price-tag .hp-0426-big {
font-family: 'Sora', 'Geist', sans-serif;
font-size: 32px;
color: #fff;
font-style: italic;
}
.hp-0426-course-lead .hp-0426-price-tag .hp-0426-label {
font-family: 'Geist Mono', monospace;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mute);
}
.hp-0426-course-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: stretch;
}
.hp-0426-course-visual {
position: relative;
border-radius: 24px;
background: linear-gradient(160deg, #2a1d4a 0%, #0f0a1c 100%);
border: 1px solid var(--line);
padding: 32px;
overflow: hidden;
display: flex; flex-direction: column;
min-height: 440px;
}
.hp-0426-course-visual::before {
content: '';
position: absolute; top: -50%; right: -30%;
width: 80%; height: 80%;
background: radial-gradient(circle, rgba(124,92,255,0.35), transparent 60%);
border-radius: 50%;
}
.hp-0426-course-visual-header {
display: flex; justify-content: space-between; align-items: center;
position: relative; z-index: 1;
margin-bottom: 24px;
}
.hp-0426-course-visual-dot {
display: flex; gap: 6px;
}
.hp-0426-course-visual-dot span {
width: 10px; height: 10px; border-radius: 50%;
background: rgba(255,255,255,0.15);
}
.hp-0426-course-visual-title {
font-family: 'Geist Mono', monospace;
font-size: 11px;
color: var(--mute);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.hp-0426-module-list {
position: relative; z-index: 1;
display: flex; flex-direction: column; gap: 10px;
margin-top: 12px;
}
.hp-0426-module {
display: flex; align-items: center; gap: 14px;
padding: 14px 18px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--line);
border-radius: 12px;
transition: all .4s;
opacity: 0.5;
transform: translateX(-8px);
}
.hp-0426-module.hp-0426-in { opacity: 1; transform: translateX(0); background: rgba(124,92,255,0.1); border-color: rgba(124,92,255,0.4); }
.hp-0426-module-num {
font-family: 'Geist Mono', monospace;
font-size: 11px;
color: var(--mute);
width: 24px;
flex-shrink: 0;
}
.hp-0426-module.hp-0426-in .hp-0426-module-num { color: var(--purple); }
.hp-0426-module-title {
font-size: 14px;
color: #d8d8e8;
}
.hp-0426-module.hp-0426-in .hp-0426-module-title { color: #fff; }
.hp-0426-module-check {
margin-left: auto;
width: 16px; height: 16px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
display: grid; place-items: center;
flex-shrink: 0;
}
.hp-0426-module.hp-0426-in .hp-0426-module-check {
background: var(--purple);
}
.hp-0426-module.hp-0426-in .hp-0426-module-check::after {
content: '';
width: 6px; height: 3px;
border-left: 1.5px solid #fff;
border-bottom: 1.5px solid #fff;
transform: rotate(-45deg) translate(1px, -1px);
}
.hp-0426-course-side h3 {
font-family: 'Sora', 'Geist', sans-serif;
font-size: 38px;
line-height: 1.05;
letter-spacing: -0.02em;
color: #fff;
margin-bottom: 24px;
}
.hp-0426-course-side h3 .hp-0426-italic { font-style: italic; color: var(--purple); }
.hp-0426-course-side p {
font-size: 17px;
line-height: 1.55;
color: #a8a8bf;
margin-bottom: 24px;
}
.hp-0426-course-features {
list-style: none;
display: flex; flex-direction: column; gap: 14px;
margin-bottom: 40px;
}
.hp-0426-course-features li {
display: flex; gap: 14px; align-items: flex-start;
font-size: 15px;
line-height: 1.5;
color: #d4d4e0;
}
.hp-0426-course-features li svg {
width: 18px; height: 18px;
flex-shrink: 0;
color: var(--purple);
margin-top: 2px;
}
.hp-0426-course-ctas {
display: flex; flex-direction: column; gap: 14px;
}
.hp-0426-course-cta-primary {
display: inline-flex; align-items: center; justify-content: center; gap: 14px;
padding: 20px 28px;
border-radius: 16px;
background: var(--purple);
color: #fff;
font-weight: 500;
font-size: 17px;
transition: all .25s;
position: relative;
overflow: hidden;
}
.hp-0426-course-cta-primary:hover { background: var(--purple-deep); transform: translateY(-2px); }
.hp-0426-course-cta-primary .hp-0426-arrow {
display: inline-grid; place-items: center;
width: 30px; height: 30px; border-radius: 999px;
background: rgba(255,255,255,0.2);
transition: transform .3s;
}
.hp-0426-course-cta-primary:hover .hp-0426-arrow { transform: translateX(4px); }
.hp-0426-course-cta-secondary {
display: inline-flex; align-items: center; justify-content: center; gap: 12px;
padding: 18px 28px;
border-radius: 16px;
background: transparent;
color: #fff;
border: 1px solid var(--line);
font-weight: 500;
font-size: 15px;
transition: all .25s;
}
.hp-0426-course-cta-secondary:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.25); }
.hp-0426-course-cta-secondary b { color: var(--coral); font-weight: 500; }
/* ---------- FINAL CTA / FOOTER ---------- */
.hp-0426-final-cta {
background: var(--ivory);
color: var(--ink);
padding: 160px 32px 100px;
text-align: center;
position: relative;
overflow: hidden;
isolation: isolate;
z-index: 2;
}
.hp-0426-final-cta h2 {
font-family: 'Sora', 'Geist', sans-serif;
font-weight: 600;
font-size: clamp(44px, 8vw, 120px);
line-height: 0.92;
letter-spacing: -0.035em;
max-width: 1200px;
margin: 0 auto;
}
.hp-0426-final-cta h2 .hp-0426-italic { font-style: normal; color: var(--purple); }
.hp-0426-final-cta p {
margin: 40px auto 0;
font-size: 18px;
line-height: 1.5;
max-width: 580px;
color: var(--mute-ivory);
}
.hp-0426-final-cta .hp-0426-row {
display: inline-flex; flex-wrap: wrap; gap: 14px;
margin-top: 48px;
justify-content: center;
}
.hp-0426-final-cta .hp-0426-btn-primary {
display: inline-flex; align-items: center; gap: 12px;
padding: 18px 28px;
border-radius: 999px;
background: var(--ink);
color: var(--ivory);
font-weight: 500;
font-size: 16px;
transition: all .25s;
}
.hp-0426-final-cta .hp-0426-btn-primary:hover { background: var(--purple); }
.hp-0426-final-cta .hp-0426-btn-ghost {
display: inline-flex; align-items: center; gap: 12px;
padding: 18px 28px;
border-radius: 999px;
background: transparent;
color: var(--ink);
border: 1px solid rgba(11,11,20,0.2);
font-weight: 500;
font-size: 16px;
transition: all .25s;
}
.hp-0426-final-cta .hp-0426-btn-ghost:hover { background: rgba(11,11,20,0.04); }
.hp-0426-footer {
background: var(--ivory);
color: var(--mute-ivory);
padding: 80px 32px 40px;
border-top: 1px solid var(--line-dark);
}
.hp-0426-footer-inner {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
padding-bottom: 60px;
}
.hp-0426-footer-brand { font-family: 'Sora', 'Geist', sans-serif; font-size: 32px; color: var(--ink); letter-spacing: -0.02em; }
.hp-0426-footer-logo { height: 26px; width: auto; display: block; filter: invert(1) brightness(0.15); }
.hp-0426-footer-brand + p { margin-top: 16px; font-size: 14px; line-height: 1.55; max-width: 340px; }
.hp-0426-footer-col h4 {
font-family: 'Geist Mono', monospace;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 16px;
}
.hp-0426-footer-col a {
display: block;
font-size: 14px;
color: var(--mute-ivory);
margin-bottom: 10px;
transition: color .2s;
}
.hp-0426-footer-col a:hover { color: var(--ink); }
.hp-0426-footer-bottom {
max-width: 1240px;
margin: 0 auto;
padding-top: 24px;
border-top: 1px solid var(--line-dark);
font-size: 12px;
display: flex; justify-content: space-between;
}
/* ---------- PODCAST (light editorial) ---------- */
.hp-0426-podcast {
position: relative;
overflow: hidden;
padding: 140px 0 120px;
background: var(--ivory);
color: var(--ink);
}
.hp-0426-podcast-bg {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(700px 420px at 92% 10%, rgba(124,92,255,0.10), transparent 60%),
radial-gradient(600px 360px at 6% 88%, rgba(255,122,89,0.12), transparent 65%);
}
.hp-0426-podcast-bg::after {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(rgba(11,11,20,0.05) 1px, transparent 1px);
background-size: 3px 3px;
opacity: 0.45;
}
.hp-0426-podcast-inner {
position: relative;
max-width: 1240px;
margin: 0 auto;
padding: 0 48px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: start;
}
/* left: lead column */
.hp-0426-podcast-lead .hp-0426-eyebrow.hp-0426-on-dark {
color: var(--mute-ivory);
background: rgba(11,11,20,0.04);
border-color: rgba(11,11,20,0.08);
}
.hp-0426-podcast-lead h2 {
font-family: 'Sora', 'Geist', sans-serif;
font-weight: 600;
font-size: clamp(40px, 5vw, 72px);
line-height: 1.03;
letter-spacing: -0.03em;
margin: 20px 0 24px;
max-width: 14ch;
color: var(--ink);
}
.hp-0426-podcast-why {
font-size: 18px;
line-height: 1.6;
color: var(--mute-ivory);
max-width: 52ch;
margin-bottom: 36px;
}
.hp-0426-podcast-lead h2 .hp-0426-hi-coral { color: var(--coral); }
/* hosts */
.hp-0426-podcast-hosts {
display: flex; gap: 28px; flex-wrap: wrap;
padding: 22px 0 28px;
border-top: 1px solid rgba(11,11,20,0.12);
border-bottom: 1px solid rgba(11,11,20,0.12);
margin-bottom: 32px;
}
.hp-0426-podcast-host { display: flex; align-items: center; gap: 12px; }
.hp-0426-host-avatar {
width: 44px; height: 44px; border-radius: 999px;
background: linear-gradient(135deg, var(--purple) 0%, #5a3de8 100%);
display: grid; place-items: center;
font-family: 'Geist Mono', monospace;
font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
color: #fff;
box-shadow: 0 0 0 1px rgba(11,11,20,0.08);
}
.hp-0426-host-avatar-2 {
background: linear-gradient(135deg, var(--coral) 0%, #c85638 100%);
}
.hp-0426-host-meta .hp-0426-host-name {
font-family: 'Geist', sans-serif;
font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.2;
}
.hp-0426-host-meta .hp-0426-host-role {
font-family: 'Geist Mono', monospace;
font-size: 10px; color: var(--mute-ivory); letter-spacing: 0.08em;
text-transform: uppercase; margin-top: 3px;
}
/* actions */
.hp-0426-podcast-actions {
display: flex; flex-direction: column; gap: 22px;
align-items: flex-start;
}
.hp-0426-podcast-primary {
display: inline-flex; align-items: center; gap: 10px;
background: var(--ink); color: #fff;
padding: 14px 22px 14px 26px;
border-radius: 999px;
font-family: 'Geist', sans-serif;
font-size: 15px; font-weight: 500;
text-decoration: none;
transition: transform .2s, background .2s;
}
.hp-0426-podcast-primary:hover {
background: #000;
transform: translateY(-2px);
}
.hp-0426-podcast-platforms {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.hp-0426-platforms-label {
font-family: 'Geist Mono', monospace;
font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--mute-ivory);
margin-right: 4px;
}
.hp-0426-platform-chip {
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 14px 7px 12px;
background: transparent;
border: 1px solid rgba(11,11,20,0.14);
border-radius: 999px;
color: var(--ink);
font-family: 'Geist', sans-serif; font-size: 13px;
text-decoration: none;
transition: background .2s, color .2s, border-color .2s;
}
.hp-0426-platform-chip:hover {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.hp-0426-platform-chip svg { opacity: 0.85; }
/* right: feed */
.hp-0426-podcast-feed {
position: relative;
display: flex; flex-direction: column;
border-top: 2px solid var(--ink);
}
.hp-0426-feed-header {
display: flex; justify-content: space-between; align-items: center;
padding: 18px 0 14px;
border-bottom: 1px solid rgba(11,11,20,0.1);
}
.hp-0426-feed-title { display: flex; flex-direction: column; gap: 4px; }
.hp-0426-feed-tag {
font-family: 'Geist Mono', monospace;
font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--mute-ivory);
}
.hp-0426-feed-live {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Instrument Serif', Georgia, serif;
font-size: 20px; color: var(--ink);
}
.hp-0426-live-dot {
width: 8px; height: 8px; border-radius: 999px;
background: var(--coral);
box-shadow: 0 0 0 0 rgba(255,122,89,0.5);
animation: feed-pulse 2s infinite;
}
@keyframes feed-pulse {
0% { box-shadow: 0 0 0 0 rgba(255,122,89,0.5); }
70% { box-shadow: 0 0 0 8px rgba(255,122,89,0); }
100% { box-shadow: 0 0 0 0 rgba(255,122,89,0); }
}
.hp-0426-episode {
display: block;
padding: 22px 0;
border-bottom: 1px solid rgba(11,11,20,0.1);
color: inherit;
text-decoration: none;
transition: transform .2s ease;
position: relative;
}
.hp-0426-episode:hover { transform: translateX(4px); }
.hp-0426-episode:hover .hp-0426-ep-title { color: var(--purple); }
.hp-0426-ep-meta {
display: flex; align-items: center; gap: 14px;
font-family: 'Geist Mono', monospace;
font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--mute-ivory);
margin-bottom: 10px;
}
.hp-0426-ep-meta .hp-0426-ep-num {
padding: 3px 7px;
background: rgba(124,92,255,0.1);
border: 1px solid rgba(124,92,255,0.28);
border-radius: 4px;
color: var(--purple-deep);
}
.hp-0426-ep-meta .hp-0426-ep-len::before { content: '·'; margin-right: 14px; color: rgba(11,11,20,0.3); }
.hp-0426-ep-title {
font-family: 'Sora', 'Geist', sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 1.25;
color: var(--ink);
margin-bottom: 8px;
transition: color .2s;
}
.hp-0426-ep-blurb {
font-size: 14px; line-height: 1.55;
color: var(--mute-ivory);
margin-bottom: 10px;
max-width: 56ch;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
/* RichText renders inner ; clamp it at the container level */
.hp-0426-ep-blurb p { margin: 0; }
.hp-0426-ep-blurb > *:not(:first-child) { display: none; }
.hp-0426-ep-link {
display: inline-flex; align-items: center; gap: 6px;
font-family: 'Geist Mono', monospace;
font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--purple-deep);
}
.hp-0426-feed-all {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 28px;
padding: 10px 16px;
border: 1px solid rgba(11,11,20,0.15);
border-radius: 999px;
font-family: 'Geist', sans-serif;
font-size: 13px;
color: var(--ink);
text-decoration: none;
transition: background .2s, border-color .2s, transform .2s;
align-self: flex-start;
}
.hp-0426-feed-all:hover {
background: var(--ink);
color: #fff;
border-color: var(--ink);
transform: translateY(-2px);
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
.hp-0426-podcast { padding: 100px 0 90px; }
.hp-0426-podcast-inner { grid-template-columns: 1fr; gap: 60px; padding: 0 24px; }
.hp-0426-podcast-lead h2 { font-size: clamp(34px, 6.5vw, 52px); }
.hp-0426-beliefs-grid { grid-template-columns: 1fr; }
.hp-0426-qa-stage { padding: 0 24px; }
.hp-0426-qa-sticky { grid-template-columns: 180px 1fr; gap: 36px; }
.hp-0426-qa-progress { font-size: 12px; }
.hp-0426-qa-slide h3 { font-size: clamp(26px, 4.2vw, 40px); }
.hp-0426-proof-stats { grid-template-columns: repeat(2, 1fr); }
.hp-0426-stat:nth-child(2) { border-right: 0; }
.hp-0426-stat:nth-child(1), .hp-0426-stat:nth-child(2) { border-bottom: 1px solid var(--line-dark); }
.hp-0426-course-layout { grid-template-columns: 1fr; gap: 40px; }
.hp-0426-footer-inner { grid-template-columns: 1fr 1fr; }
.hp-0426-programs-grid { grid-template-columns: 1fr; gap: 48px; padding: 0 24px 40px; }
.hp-0426-programs-index { display: none; }
}
/* At true mobile widths, collapse the Q&A to a simple stacked list */
@media (max-width: 640px) {
.hp-0426-hero { padding: 100px 20px 72px; min-height: auto; }
.hp-0426-hero-eyebrow {
font-size: 11px; padding: 7px 12px;
white-space: normal; text-align: center;
line-height: 1.4; max-width: 100%;
letter-spacing: 0.04em;
margin-bottom: 28px;
}
.hp-0426-hero-title { font-size: clamp(36px, 11vw, 56px); letter-spacing: -0.03em; }
.hp-0426-hero-title .hp-0426-line { gap: 0 0.18em; }
.hp-0426-hero-sub { font-size: 16px; margin-top: 28px; max-width: 100%; padding: 0 8px; }
.hp-0426-hero-cta {
margin-top: 32px;
font-size: 14px;
padding: 14px 18px 14px 22px;
white-space: normal; text-align: left;
line-height: 1.3;
max-width: 100%;
}
.hp-0426-hero-scroll-hint { display: none; }
.hp-0426-qa-stage { height: auto; padding: 0 20px; margin-top: 24px; }
.hp-0426-qa-sticky { position: static; grid-template-columns: 1fr; height: auto; gap: 32px; padding: 40px 0; }
.hp-0426-qa-progress {
flex-direction: row;
flex-wrap: wrap;
gap: 12px 16px;
padding-left: 0;
padding-right: 4px;
overflow-x: visible;
}
.hp-0426-qa-progress li { flex: 0 0 auto; }
.hp-0426-qa-progress::before { display: none; }
.hp-0426-qa-slides { min-height: auto; }
.hp-0426-qa-slide { position: relative; opacity: 1; transform: none; filter: none; padding: 32px 0; border-bottom: 1px solid var(--line-dark); }
.hp-0426-qa-slide.hp-0426-exit-up { opacity: 1; transform: none; filter: none; }
/* On mobile the slides stack so the "Up next" peek is redundant — hide it. */
.hp-0426-qa-up-next { display: none; }
}
/* reduce motion */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* ============================================================
UntitledUI overrides for blog / tools / get-started pages.
The site-wide dark body bg makes the default uui-* dark text
invisible; these rules re-color and re-font to match the
new home page (Sora headings, Geist body, Geist Mono eyebrows).
============================================================ */
/* Webflow renders combo class names as hyphenated (e.g. "uui-heading-large 6"
becomes class="uui-heading-large-6"), so we match with attribute substring
selectors to catch all numbered variants. */
[class*="uui-heading-large"],
[class*="uui-heading-medium"],
[class*="uui-heading-small"],
[class*="uui-heading-xsmall"],
[class*="uui-blog06_title-link"],
[class*="uui-blogsection03_title-link"] {
font-family: 'Sora', sans-serif !important;
font-weight: 600 !important;
letter-spacing: -0.02em !important;
color: var(--ivory) !important;
}
[class*="uui-text-size-large"],
[class*="uui-text-size-medium"],
[class*="uui-text-size-small"] {
font-family: 'Geist', sans-serif !important;
color: var(--ivory-2) !important;
}
[class*="uui-heading-subheading"] {
font-family: 'Geist Mono', monospace !important;
font-size: 12px !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--coral) !important;
}
[class*="uui-blog06_menu-link"] {
font-family: 'Geist Mono', monospace !important;
color: var(--ivory-2) !important;
}
[class*="uui-blog06_menu-link"]:hover { color: var(--ivory) !important; }
[class*="uui-blog06_menu-link"].last-link,
[class*="uui-blog06_menu-link"].w--current { color: var(--ivory) !important; }
/* Pill buttons — but exclude link-style buttons (uui-button-link-X) and
non-button utility classes (uui-button-row, uui-button-wrapper, uui-button-icon)
so we only hit actual button elements. */
[class*="uui-button"]:not([class*="uui-button-link"]):not([class*="uui-button-row"]):not([class*="uui-button-wrapper"]):not([class*="uui-button-icon"]) {
font-family: 'Geist', sans-serif !important;
background: var(--coral) !important;
color: var(--bg) !important;
border: 0 !important;
border-radius: 999px !important;
font-weight: 500 !important;
}
[class*="uui-button"]:not([class*="uui-button-link"]):not([class*="uui-button-row"]):not([class*="uui-button-wrapper"]):not([class*="uui-button-icon"]):hover {
background: #ff5a3c !important;
}
/* Text-style "button link" (e.g. back-to-blog "All posts" link with arrow icon).
Transparent bg, coral text — looks like a text link, not a pill. */
[class*="uui-button-link"] {
font-family: 'Geist Mono', monospace !important;
color: var(--coral) !important;
background: transparent !important;
letter-spacing: 0.08em !important;
}
/* Children of button-link inherit coral text (so child
All posts
shows). */
[class*="uui-button-link"] * { color: inherit !important; background: transparent !important; }
.w-pagination-wrapper,
.w-pagination-previous,
.w-pagination-next {
font-family: 'Geist Mono', monospace !important;
color: var(--ivory-2) !important;
}
.w-pagination-previous:hover,
.w-pagination-next:hover { color: var(--ivory) !important; }
/* Collapse the blog post image area when the CMS item has no image bound.
Use [class*="..."] selectors since Webflow renders combo classes with
hyphenated suffixes (e.g. .uui-blog06_image-link-3). */
[class*="uui-blog06_image-link"]:not(:has(img[src]:not([src=""]))),
[class*="uui-blog06_image-link"]:not(:has(img)),
[class*="uui-blog06_image-wrapper"]:not(:has(img[src]:not([src=""]))),
[class*="uui-blog06_image-wrapper"]:not(:has(img)) {
display: none !important;
}
/* Same for the podcast list's image-link */
[class*="uui-blogsection03_image-link"]:not(:has(img[src]:not([src=""]))):not(:has([class*="uui-blogsection03_image"])),
[class*="uui-blogsection03_image-wrapper"]:not(:has(img[src]:not([src=""]))):not(:has([class*="uui-blogsection03_image"])) {
display: none !important;
}
/* ============================================================
Light-theme pages: Biggest Goal Blog, Automate Your Agency,
Podcast detail template, Blog Post detail template.
Webflow adds `data-wf-page=""` to , so we
scope these overrides via :is() across the four IDs.
============================================================ */
html:is(
[data-wf-page="67588cf481353f16d8f49b86"],
[data-wf-page="6774140f86bdeb489730a77d"],
[data-wf-page="677402ac0197311e4aa25b65"],
[data-wf-page="67588bb2746c497e3c1af6c1"],
[data-wf-page="6750b1833a7eda7dfd747e02"]
),
html:is(
[data-wf-page="67588cf481353f16d8f49b86"],
[data-wf-page="6774140f86bdeb489730a77d"],
[data-wf-page="677402ac0197311e4aa25b65"],
[data-wf-page="67588bb2746c497e3c1af6c1"],
[data-wf-page="6750b1833a7eda7dfd747e02"]
) body {
background: var(--ivory) !important;
color: var(--ink) !important;
}
/* Headings → dark ink */
html:is(
[data-wf-page="67588cf481353f16d8f49b86"],
[data-wf-page="6774140f86bdeb489730a77d"],
[data-wf-page="677402ac0197311e4aa25b65"],
[data-wf-page="67588bb2746c497e3c1af6c1"],
[data-wf-page="6750b1833a7eda7dfd747e02"]
) :is(
[class*="uui-heading-large"],
[class*="uui-heading-medium"],
[class*="uui-heading-small"],
[class*="uui-heading-xsmall"],
[class*="uui-blog06_title-link"],
[class*="uui-blogsection03_title-link"]
) {
color: var(--ink) !important;
}
/* Body text → dark brown */
html:is(
[data-wf-page="67588cf481353f16d8f49b86"],
[data-wf-page="6774140f86bdeb489730a77d"],
[data-wf-page="677402ac0197311e4aa25b65"],
[data-wf-page="67588bb2746c497e3c1af6c1"],
[data-wf-page="6750b1833a7eda7dfd747e02"]
) :is(
[class*="uui-text-size-large"],
[class*="uui-text-size-medium"],
[class*="uui-text-size-small"]
) {
color: #3a3528 !important;
}
/* Category menu links → muted ink (active = full ink) */
html:is(
[data-wf-page="67588cf481353f16d8f49b86"],
[data-wf-page="6774140f86bdeb489730a77d"],
[data-wf-page="677402ac0197311e4aa25b65"],
[data-wf-page="67588bb2746c497e3c1af6c1"],
[data-wf-page="6750b1833a7eda7dfd747e02"]
) [class*="uui-blog06_menu-link"] {
color: var(--mute-ivory) !important;
}
html:is(
[data-wf-page="67588cf481353f16d8f49b86"],
[data-wf-page="6774140f86bdeb489730a77d"],
[data-wf-page="677402ac0197311e4aa25b65"],
[data-wf-page="67588bb2746c497e3c1af6c1"],
[data-wf-page="6750b1833a7eda7dfd747e02"]
) :is(
[class*="uui-blog06_menu-link"]:hover,
[class*="uui-blog06_menu-link"].last-link,
[class*="uui-blog06_menu-link"].w--current
) {
color: var(--ink) !important;
}
/* Pagination text on light bg */
html:is(
[data-wf-page="67588cf481353f16d8f49b86"],
[data-wf-page="6774140f86bdeb489730a77d"],
[data-wf-page="677402ac0197311e4aa25b65"],
[data-wf-page="67588bb2746c497e3c1af6c1"],
[data-wf-page="6750b1833a7eda7dfd747e02"]
) :is(
.w-pagination-wrapper,
.w-pagination-previous,
.w-pagination-next
) {
color: var(--mute-ivory) !important;
}