/* =========================================================================
DRAFT.CSS — conversion-focused homepage draft (proof-first)
Custom to The Standard. New sections prefixed .d-. Reuses brand tokens
from styles.css / ea-components.css. Load last.
========================================================================= */
:root {
--d-max: 1200px;
--d-gut: clamp(1.5rem, 5vw, 4rem);
--d-ease: cubic-bezier(.19, 1, .22, 1);
}
/* ── Shared content slot (elegant placeholder you replace with real media) ── */
.d-slot {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
text-align: center;
width: 100%;
color: var(--silver);
background:
linear-gradient(135deg, #121212 0%, #0b0b0b 100%);
border: 1px solid rgba(242, 242, 242, 0.14);
overflow: hidden;
}
.d-slot--wide { aspect-ratio: 16 / 9; }
.d-slot--square { aspect-ratio: 1 / 1; }
.d-slot--vertical { aspect-ratio: 9 / 16; }
.d-slot--tall { aspect-ratio: 4 / 5; }
.d-slot > video, .d-slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.d-slot-play {
width: 62px; height: 62px; border-radius: 50%;
border: 1px solid rgba(242, 242, 242, 0.55);
display: flex; align-items: center; justify-content: center;
}
.d-slot-play::after {
content: ''; width: 0; height: 0; margin-left: 4px;
border-left: 15px solid rgba(242, 242, 242, 0.85);
border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}
.d-slot-label { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cloud-white); }
.d-slot-hint { font-size: 12px; font-weight: 300; line-height: 1.6; max-width: 32ch; color: var(--stone); }
/* ── Buttons ─────────────────────────────────────────────────────────── */
.d-btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 1.15em 2.8em;
font-size: 0.74rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
text-decoration: none; cursor: pointer; border: 1px solid var(--cloud-white);
transition: background .3s var(--d-ease), color .3s var(--d-ease), border-color .3s var(--d-ease);
}
.d-btn--primary { background: var(--cloud-white); color: var(--deep-black); }
.d-btn--primary:hover { background: transparent; color: var(--cloud-white); }
.d-btn--ghost { background: transparent; color: var(--cloud-white); border-color: rgba(242,242,242,.4); }
.d-btn--ghost:hover { border-color: var(--cloud-white); }
/* ═══════════════════════════════════════════════════════════════════════
1 · ABOVE THE FOLD — proof-first
═══════════════════════════════════════════════════════════════════════ */
.d-hero {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between; /* copy up top, proof wall pinned to bottom of the fold */
padding: clamp(5rem, 10vh, 7rem) var(--d-gut) clamp(1.75rem, 4vh, 3rem);
overflow: hidden;
background: #000;
}
.d-hero-top {
display: grid;
grid-template-columns: 1.02fr 0.98fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
max-width: var(--d-max);
width: 100%;
margin: 0 auto;
flex: 1;
min-height: 0;
}
.d-hero-media { display: flex; justify-content: center; }
.d-hero-media .d-slot {
max-width: clamp(300px, 38vw, 480px);
max-height: 80vh;
margin-inline: auto; /* center the bottle video, not pinned to the right */
border: none;
background: transparent; /* let the dark hero show behind — no visible frame */
}
/* Show the WHOLE spin video — never crop it */
.d-hero-vid > video { object-fit: contain; }
/* ── Shoppable Instagram-style product tag on the hero video ──────────── */
.ig-tag {
position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
z-index: 6; text-decoration: none; -webkit-tap-highlight-color: transparent;
opacity: 0; animation: igTagIn 0.5s ease forwards; animation-delay: 1s;
}
@keyframes igTagIn {
from { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.ig-tag-dot {
display: block; width: 15px; height: 15px; margin: 0 auto; border-radius: 50%;
background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,0.12), 0 0 0 0 rgba(255,255,255,0.55);
animation: igpulse 2.4s ease-out infinite;
}
@keyframes igpulse {
0% { box-shadow: 0 0 0 2px rgba(0,0,0,0.12), 0 0 0 0 rgba(255,255,255,0.55); }
70% { box-shadow: 0 0 0 2px rgba(0,0,0,0.12), 0 0 0 13px rgba(255,255,255,0); }
100% { box-shadow: 0 0 0 2px rgba(0,0,0,0.12), 0 0 0 0 rgba(255,255,255,0); }
}
.ig-tag-card {
position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(0);
background: #fff; color: #0a0a0a; border-radius: 11px; padding: 9px 14px;
display: flex; align-items: center; gap: 8px; white-space: nowrap;
box-shadow: 0 10px 28px rgba(0,0,0,0.35);
transition: transform .25s ease, box-shadow .25s ease;
}
.ig-tag-card::before {
content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg);
width: 11px; height: 11px; background: #fff; border-radius: 2px;
}
.ig-tag-bag { width: 14px; height: 14px; color: #0a0a0a; flex: 0 0 auto; }
.ig-tag-name { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; }
.ig-tag-price {
font-size: 13px; font-weight: 400; color: #0a0a0a; position: relative; padding-left: 8px;
}
.ig-tag-price::before {
content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 1px; height: 12px; background: rgba(0,0,0,0.16);
}
.ig-tag:hover .ig-tag-card, .ig-tag:focus-visible .ig-tag-card {
transform: translateX(-50%) translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.48);
}
@media (prefers-reduced-motion: reduce) { .ig-tag-dot { animation: none; } }
/* ── "Launch 1 sold out" — same format/size as the Shop button, attached ── */
.d-hero-cta-col { display: inline-flex; flex-direction: column; align-items: stretch; }
.d-hero-stock {
/* mirrors .d-btn exactly, but transparent so it reads as a status tag */
display: inline-flex; align-items: center; justify-content: center;
padding: 1.15em 2.8em; margin-top: -1px;
font-size: 0.74rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
border: 1px solid rgba(242, 242, 242, 0.4); background: transparent; color: var(--stone);
}
/* Benefit list under the bottle — fills the buy column, reinforces value at purchase */
.buy-benefits {
list-style: none; margin: 2rem 0 0; padding: 1.9rem 0 0;
border-top: 1px solid rgba(255,255,255,0.12); display: grid; gap: 16px;
}
.buy-benefits li {
position: relative; padding-left: 30px;
font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--silver);
}
.buy-benefits li strong { color: var(--cloud-white); font-weight: 600; }
.buy-benefits li::before {
content: ''; position: absolute; left: 0; top: 1px; width: 18px; height: 18px;
background: no-repeat center/contain
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2f2f2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.d-hero-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
color: var(--silver); margin-bottom: 1.5rem;
}
.d-hero-eyebrow::before {
content: ''; width: 28px; height: 1px; background: var(--steel);
}
.d-hero-headline {
font-size: clamp(2.15rem, 4.6vw, 3.7rem);
font-weight: 700; line-height: 1.07; letter-spacing: -0.008em; text-transform: uppercase;
color: var(--cloud-white); margin: 0 0 1.6rem;
}
/* Refined italic-serif accent on the key word — the premium lift */
.d-hero-headline em {
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--cloud-white);
font-size: 1.18em;
padding: 0 0.04em;
}
.d-hero-sub {
font-size: clamp(1rem, 1.7vw, 1.2rem); font-weight: 300; line-height: 1.7;
color: var(--silver); max-width: 44ch; margin: 0 0 2.25rem;
}
.d-hero-cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.d-hero-price { margin-top: 20px; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); }
.d-hero-price strong { color: var(--cloud-white); font-weight: 600; }
/* Product visual answering "what is this" in-fold */
.d-hero-media { width: 100%; }
.d-hero-bottle { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
/* ── THE WALL — creative dual-row logo ticker ────────────────────────── */
.d-wall {
max-width: var(--d-max); width: 100%; margin: 0 auto;
padding-top: clamp(1.5rem, 4vh, 2.5rem);
border-top: 1px solid var(--ea-line, #1a1a1a);
}
.d-wall-eyebrow {
font-size: 10px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
color: var(--steel); text-align: center; margin-bottom: 1.25rem;
}
.d-ticker {
position: relative; width: 100%; overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.d-ticker-track {
display: flex; width: max-content; align-items: center;
animation: d-scroll-l 55s linear infinite;
will-change: transform;
}
.d-logo-img { height: clamp(30px, 3.6vw, 48px); width: auto; max-width: 170px; object-fit: contain; display: inline-block; vertical-align: middle; }
/* Shop: "see more" link under the reels in the buy block */
.shop-clips-more {
display: inline-block; margin-top: 14px;
font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--deep-black); text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,0.28); padding-bottom: 2px;
}
.shop-clips-more:hover { color: var(--steel); border-color: var(--steel); }
/* keep the buy-block reels from getting too tall next to the bottle */
.shop-buy-media .shop-bottle-img { max-height: 460px; width: auto; max-width: 100%; margin: 0 auto; }
/* ── Shop: enlarged Cal-QB reels as a standalone credibility band ─────── */
.reels-row {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 2vw, 26px); max-width: 940px; margin: 0 auto;
}
.reels-row .shop-clip-cap {
margin: 12px 0 0; font-size: 12px; letter-spacing: 0.02em; text-align: center; color: var(--stone);
}
@media (max-width: 760px) { .reels-row { grid-template-columns: 1fr 1fr; max-width: 520px; } }
@media (max-width: 460px) { .reels-row { grid-template-columns: 1fr; max-width: 300px; } }
/* Only pause on a real pointer hover (desktop). On touch, :hover sticks after
a tap/scroll and would freeze the ticker — so never pause it on mobile. */
@media (hover: hover) {
.d-ticker:hover .d-ticker-track { animation-play-state: paused; }
}
@keyframes d-scroll-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Keep the proof ticker scrolling even with reduce-motion — it's core social
proof, and a static clipped row hides most of the logos on phones. */
@media (prefers-reduced-motion: reduce) {
.d-ticker { -webkit-mask-image: none; mask-image: none; }
}
/* Hold the ticker on the first logos until the wall is actually on screen.
Otherwise it scrolls while the section is still below the fold and the
marquee names have already passed by the time the visitor arrives.
Gating animation-name (not animation-play-state) on purpose: it leaves the
hover-to-pause rule above untouched, and flipping the name back on restarts
the loop from the first logo for free. main.js adds .wall-armed only when it
can drive this, so with no JS the ticker runs exactly as it did before. */
.d-wall.wall-armed .d-ticker-track { animation-name: none; }
.d-wall.wall-armed.is-live .d-ticker-track { animation-name: d-scroll-l; }
/* Each logo: unified monochrome on black; blooms to full color on hover.
Replace the .d-logo-fallback text with: 
*/
.d-logo {
position: relative;
flex: 0 0 auto;
height: clamp(46px, 6vw, 68px);
display: flex; align-items: center; justify-content: center;
padding: 0 clamp(2rem, 4.5vw, 3.4rem);
opacity: 1;
transition: opacity .35s var(--d-ease), transform .35s var(--d-ease), filter .35s var(--d-ease);
}
/* subtle hairline divider between each name/logo */
.d-logo::after {
content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
width: 1px; height: 20px; background: rgba(255, 255, 255, 0.13);
}
.d-logo img {
height: 100%; width: auto; object-fit: contain; /* real team colors, as provided */
}
.d-logo:hover { opacity: 1; transform: scale(1.06); }
/* Text fallback until real logo files are dropped in */
.d-logo-fallback {
font-size: clamp(1rem, 2.05vw, 1.5rem); font-weight: 600; letter-spacing: 0.13em;
text-transform: uppercase; color: var(--silver); white-space: nowrap;
transition: color .35s var(--d-ease);
}
.d-logo:hover .d-logo-fallback { color: var(--cloud-white); }
/* ═══════════════════════════════════════════════════════════════════════
Section shell
═══════════════════════════════════════════════════════════════════════ */
.d-section { max-width: var(--d-max); margin: 0 auto; padding: clamp(3rem, 6vh, 5rem) var(--d-gut); }
/* Desktop, HOME PAGE ONLY: tighter vertical rhythm so it reads desktop-first,
not like a tall stacked mobile page. Shop/story keep their own spacing. */
@media (min-width: 769px) {
body.home .d-section { padding-top: clamp(2.5rem, 5vh, 4rem); padding-bottom: clamp(2.5rem, 5vh, 4rem); }
body.home .d-close { padding-top: clamp(3.25rem, 6.5vh, 4.75rem); padding-bottom: clamp(3.25rem, 6.5vh, 4.75rem); }
}
.d-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.d-head--center { text-align: center; }
.d-eyebrow { margin: 0 0 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone); }
.d-h2 { margin: 0; font-size: clamp(28px, 4.4vw, 46px); font-weight: 600; letter-spacing: .02em; line-height: 1.15; color: var(--cloud-white); }
.d-h2 em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: 0; font-size: 1.08em; }
.d-lead { margin: 16px auto 0; max-width: 600px; font-size: 16px; font-weight: 300; line-height: 1.8; color: var(--stone); }
.d-head--center .d-lead { margin-left: auto; margin-right: auto; }
.d-rule { border: none; border-top: 1px solid var(--ea-line, #1a1a1a); max-width: var(--d-max); margin: 0 auto; width: calc(100% - var(--d-gut) * 2); }
/* ── Video element (shared: demo + review clips) ─────────────────────── */
.d-video { width: 100%; height: auto; display: block; background: #000; border-radius: 4px; }
/* ── DEMO — vertical (9:16) player + points ──────────────────────────── */
.d-demo-grid { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.d-demo-video { width: 100%; }
/* ── HOW IT WORKS ─────────────────────────────────────────────────────
Desktop: centered video + connected step timeline below.
Mobile: video fills its frame with the steps overlaid on it.
───────────────────────────────────────────────────────────────────── */
.d-how-video { position: relative; max-width: 384px; margin: 0 auto; }
.d-how-video .d-video { max-height: 66vh; }
/* Low Power Mode fallback. iOS blocks ALL video autoplay on low battery, and no
markup can override it. Animated images are not covered by that policy, so when
playback is refused we swap in an animated WebP of the same clip and the section
still moves. Loaded only if it is actually needed. */
.d-how-loop {
display: none;
position: absolute; top: 0; left: 0; z-index: 1;
width: 100%; height: 100%; object-fit: cover;
}
.is-looping > .d-how-loop { display: block; }
/* The frozen video underneath would show through the WebP's edges otherwise. */
.is-looping > video { visibility: hidden; }
/* Last-resort fallback. Shown only if the animated WebP also fails, in which
case the clip needs a tap. */
.d-how-play {
display: none;
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
width: 68px; height: 68px; padding: 0; border-radius: 50%;
border: 1px solid rgba(255,255,255,0.7); background: rgba(0,0,0,0.4);
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
cursor: pointer; align-items: center; justify-content: center;
}
.d-how-video.is-blocked .d-how-play { display: flex; }
.d-how-play-tri {
display: block; margin-left: 5px;
width: 0; height: 0;
border-top: 11px solid transparent; border-bottom: 11px solid transparent;
border-left: 18px solid #fff;
}
/* Desktop: 2-column, sized like the hero (a touch smaller) — this section sells
the product by showing it work, so it carries real weight. Video on the LEFT,
heading + vertical steps on the RIGHT. Mobile is untouched. */
@media (min-width: 769px) {
#how {
display: grid; align-items: center;
grid-template-columns: auto minmax(0, 1fr);
column-gap: clamp(3rem, 5.5vw, 6rem);
max-width: 1240px;
padding-top: clamp(3rem, 7vh, 5.5rem);
padding-bottom: clamp(3rem, 7vh, 5.5rem);
}
#how .d-how-video {
grid-column: 1; grid-row: 1 / span 2;
max-width: none; width: -moz-fit-content; width: fit-content; margin: 0;
}
#how .d-how-video .d-video { width: auto; height: min(74vh, 620px); max-width: 100%; max-height: none; }
#how .d-head {
grid-column: 2; grid-row: 1; align-self: end;
text-align: left; margin: 0 0 clamp(1.75rem, 4vh, 2.75rem);
}
#how .d-head .d-h2 { font-size: clamp(32px, 4vw, 50px); }
#how .d-flow2 {
grid-column: 2; grid-row: 2; align-self: start;
margin: 0; max-width: none;
flex-direction: column; align-items: stretch; gap: clamp(1.75rem, 3.5vh, 2.75rem);
}
#how .d-flow2-step { flex-direction: row; align-items: flex-start; text-align: left; padding: 0; gap: 1.25rem; }
#how .d-flow2-step::before { display: none; } /* drop the horizontal connector */
#how .d-flow2-txt { align-items: flex-start; }
#how .d-flow2-t { font-size: clamp(19px, 2vw, 23px); margin-bottom: 6px; }
#how .d-flow2-d { font-size: clamp(15px, 1.3vw, 16.5px); max-width: none; }
#how .d-flow2-n { margin-bottom: 0; width: 52px; height: 52px; font-size: 17px; }
}
/* Desktop timeline below the video */
.d-flow2 {
list-style: none; padding: 0;
margin: clamp(2.75rem, 6vw, 4.5rem) auto 0; max-width: 820px;
display: flex; align-items: flex-start;
}
.d-flow2-step {
position: relative; flex: 1 1 0; min-width: 0;
padding: 0 clamp(0.5rem, 1.6vw, 1.5rem);
display: flex; flex-direction: column; align-items: center; text-align: center;
}
.d-flow2-step:not(:first-child)::before {
content: ''; position: absolute; top: 24px; right: calc(50% + 24px);
width: calc(100% - 48px); height: 1px; background: rgba(255,255,255,0.18);
}
.d-flow2-n {
position: relative; z-index: 1; flex: 0 0 auto;
width: 48px; height: 48px; border-radius: 50%;
border: 1px solid rgba(255,255,255,0.28); background: transparent;
display: flex; align-items: center; justify-content: center;
font-size: 16px; font-weight: 600; color: var(--cloud-white); margin-bottom: 22px;
}
.d-flow2-txt { display: flex; flex-direction: column; align-items: center; }
.d-flow2-t { font-size: clamp(18px, 2vw, 21px); font-weight: 600; color: var(--cloud-white); margin-bottom: 9px; }
.d-flow2-d { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--stone); max-width: 210px; }
/* Overlay steps — hidden on desktop, shown on mobile */
.d-vsteps {
display: none;
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
list-style: none; margin: 0; padding: clamp(3rem, 12vw, 4.5rem) clamp(0.9rem, 4vw, 1.35rem) clamp(0.9rem, 4vw, 1.25rem);
flex-direction: column; gap: clamp(0.5rem, 2vw, 0.8rem);
background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.78) 42%, rgba(0,0,0,0.32) 78%, rgba(0,0,0,0) 100%);
pointer-events: none;
}
.d-vstep { display: flex; align-items: center; gap: 0.7rem; }
.d-vstep-n {
flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.06);
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; color: #fff;
}
.d-vstep-txt { display: flex; align-items: baseline; gap: 0.45rem; min-width: 0; flex-wrap: wrap; }
.d-vstep-t { font-size: 14px; font-weight: 700; letter-spacing: 0.01em; color: #fff; }
.d-vstep-d { font-size: 13px; font-weight: 300; line-height: 1.4; color: rgba(255,255,255,0.82); text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
@media (max-width: 768px) {
/* swap: timeline out, overlay in */
.d-flow2 { display: none; }
.d-vsteps { display: flex; }
/* video fills its frame edge to edge, no letterbox, no distortion */
.d-how-video { max-width: 400px; border-radius: 8px; overflow: hidden; background: #000; }
.d-how-video .d-video { max-height: none; width: 100%; height: auto; border-radius: 0; }
}
@media (max-width: 480px) {
.d-vstep-t { font-size: 13px; }
.d-vstep-d { font-size: 12px; }
.d-vstep-n { width: 24px; height: 24px; font-size: 11px; }
}
.d-demo-video .d-video { max-height: 74vh; }
.d-points { list-style: none; margin: 0; padding: 0; }
.d-points li { padding: 22px 0; border-top: 1px solid var(--ea-line, #1a1a1a); }
.d-points li:last-child { border-bottom: 1px solid var(--ea-line, #1a1a1a); }
.d-point-t { display: block; font-size: 15px; font-weight: 600; color: var(--cloud-white); margin-bottom: 8px; }
.d-point-d { display: block; font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--stone); }
/* ── BENEFIT STEPS ───────────────────────────────────────────────────── */
.d-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem,4vw,3rem); }
.d-step { border-top: 1px solid var(--ea-line, #1a1a1a); padding-top: 22px; }
.d-step-n { font-size: 11px; font-weight: 700; letter-spacing: .28em; color: var(--steel); margin-bottom: 16px; }
.d-step-t { font-size: 18px; font-weight: 600; color: var(--cloud-white); margin-bottom: 10px; }
.d-step-d { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--stone); }
/* ── PROOF / TESTIMONIALS carousel ───────────────────────────────────── */
.d-proof { max-width: none; padding-left: 0; padding-right: 0; }
.d-proof .d-head { max-width: var(--d-max); margin-left: auto; margin-right: auto; padding: 0 var(--d-gut); }
/* Desktop: center and polish the reviews heading (the wording/lettering) with a
short accent rule, so it reads more organized than the plain left-aligned block. */
@media (min-width: 769px) {
.d-proof .d-head { text-align: center; }
.d-proof .d-head .d-lead { margin-left: auto; margin-right: auto; }
.d-proof .d-head .d-eyebrow::before {
content: ''; display: block; width: 42px; height: 2px; background: var(--cloud-white); margin: 0 auto 18px;
}
}
.d-proof-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px var(--d-gut) 24px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.d-proof-track::-webkit-scrollbar { display: none; }
.d-proof-track > * { scroll-snap-align: start; flex: 0 0 auto; }
.d-clip { width: clamp(230px, 26vw, 300px); }
.d-clip .d-slot { border-radius: 4px; }
.d-clip-handle { margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--silver); }
.d-review { width: clamp(300px, 32vw, 380px); border: 1px solid var(--ea-line, #1a1a1a); background: #0b0b0b; padding: 32px 30px; display: flex; flex-direction: column; }
.d-stars { font-size: 14px; letter-spacing: .15em; color: var(--cloud-white); margin-bottom: 20px; }
.d-quote { font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--cloud-white); margin: 0 0 auto; }
.d-attrib { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--ea-line, #1a1a1a); }
.d-attrib-name { font-size: 12px; font-weight: 600; color: var(--cloud-white); }
.d-attrib-role { margin-top: 4px; font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); }
/* ── FOUNDER ─────────────────────────────────────────────────────────── */
.d-founder-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.d-founder-body p { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--stone); margin: 0 0 1.5rem; }
.d-founder-body p strong { color: var(--silver); font-weight: 600; }
/* ── GUARANTEE bar ───────────────────────────────────────────────────── */
.d-guarantee { border-top: 1px solid var(--ea-line, #1a1a1a); border-bottom: 1px solid var(--ea-line, #1a1a1a); display: grid; grid-template-columns: repeat(3, 1fr); max-width: var(--d-max); margin: 0 auto; }
.d-guar-item { padding: clamp(2.25rem,4.5vw,3.25rem) 1.5rem; text-align: center; border-left: 1px solid var(--ea-line, #1a1a1a); }
.d-guar-item:first-child { border-left: none; }
.d-guar-t { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cloud-white); margin-bottom: 10px; }
.d-guar-d { font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--stone); }
/* ── FINAL CTA ───────────────────────────────────────────────────────── */
.d-final { text-align: center; padding: clamp(5rem,10vh,8rem) var(--d-gut); }
.d-final .d-h2 { margin-bottom: 12px; }
/* Centered rule above the closing headline (replaces the removed eyebrow) */
.d-final .d-h2::before {
content: ''; display: block; width: 46px; height: 2px; background: var(--cloud-white);
margin: 0 auto 1.75rem;
}
.d-final .d-lead { margin-bottom: 2.5rem; }
/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 920px) {
.d-hero-top { grid-template-columns: 1fr; text-align: left; }
.d-hero-media { justify-content: center; margin-top: 1.5rem; }
.d-hero-media .d-slot { max-width: 300px; max-height: none; }
.d-demo-grid, .d-founder-grid { grid-template-columns: 1fr; }
.d-demo-video { max-width: 320px; margin: 0 auto; }
.d-steps { grid-template-columns: 1fr; }
.d-founder-media { order: -1; }
}
@media (max-width: 620px) {
.d-guarantee { grid-template-columns: 1fr; }
.d-guar-item { border-left: none; border-top: 1px solid var(--ea-line, #1a1a1a); }
.d-guar-item:first-child { border-top: none; }
.d-hero-cta-row { flex-direction: column; align-items: stretch; }
.d-hero-cta-col { display: flex; } /* full-width button + attached tag */
.d-hero-price { text-align: center; }
}
/* ── SHOP: bottle + Cal-QB reels sitting beside the buy button ─────────── */
.shop-buy-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
max-width: var(--ea-max, 1180px);
margin: 0 auto;
}
.shop-bottle-img { width: 100%; height: auto; display: block; }
/* Feather the mockup's edges so its studio-gray backdrop melts into the section
gray and the bottles read as floating — no rectangular photo edge. */
.section-product .shop-bottle-img {
-webkit-mask-image:
linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
mask-composite: intersect;
}
.shop-clips-label {
font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--steel); margin: 1.5rem 0 0.85rem;
}
.shop-clips-label a { color: var(--deep-black); text-decoration: underline; text-underline-offset: 2px; }
.shop-clips-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.shop-clip {
position: relative; aspect-ratio: 9 / 16; border-radius: 4px; overflow: hidden;
background: #e7e7e7; border: 1px solid var(--silver, #bcbdbf);
display: flex; align-items: center; justify-content: center;
}
.shop-clip > video, .shop-clip > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shop-clip-play {
width: 38px; height: 38px; border-radius: 50%;
border: 1px solid rgba(0,0,0,0.35); background: rgba(255,255,255,0.55);
display: flex; align-items: center; justify-content: center;
}
.shop-clip-play::after {
content: ''; width: 0; height: 0; margin-left: 3px;
border-left: 11px solid rgba(0,0,0,0.7); border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
/* right column rhythm */
.shop-buy-info .price-row { margin-top: 0; }
@media (max-width: 820px) {
.shop-buy-grid { grid-template-columns: 1fr; gap: 1.75rem; }
.shop-buy-media { max-width: 420px; margin: 0 auto; }
}
/* ── Trust row at the buy button ──────────────────────────────────────── */
.buy-trust {
list-style: none; margin: 1.5rem 0 0; padding: 1.25rem 0 0;
border-top: 1px solid var(--silver, #bcbdbf);
display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: space-between;
}
.buy-trust li {
display: flex; align-items: center; gap: 7px;
font-size: 10px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
color: var(--steel);
}
.buy-trust li::before {
content: ''; width: 12px; height: 12px; flex: 0 0 auto;
background: no-repeat center/contain
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151515' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
/* Phones: keep all three on ONE line (Ships in 3 Days was wrapping alone). */
@media (max-width: 520px) {
.buy-trust {
flex-wrap: nowrap; justify-content: space-between; gap: 0 6px;
margin-top: 1.35rem; padding-top: 1.1rem;
}
.buy-trust li {
font-size: 8.5px; letter-spacing: 0.03em; gap: 4px; white-space: nowrap;
}
.buy-trust li::before { width: 10px; height: 10px; }
/* Tighten the gray gap below the strip so the hand-off to the next section
is balanced (was 64px of empty gray under the now one-line strip). */
.section-product { padding-bottom: 40px; }
}
/* ── STORY PAGE — reformatted to the homepage design system ───────────── */
.d-story-hero {
text-align: center; background: #000;
padding: clamp(6.5rem, 15vh, 10rem) var(--d-gut) clamp(2.5rem, 6vh, 4rem);
}
.d-story-h1 {
font-size: clamp(2rem, 5.2vw, 3.5rem); font-weight: 700; letter-spacing: -0.005em;
line-height: 1.1; text-transform: uppercase; color: var(--cloud-white);
max-width: 18ch; margin: 0.5rem auto 0;
}
.d-story-h1 em, .d-serif {
font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400;
text-transform: none; letter-spacing: 0; font-size: 1.2em; color: var(--cloud-white);
}
.d-story { max-width: 760px; }
/* Chapter labels get a short leading rule so each chapter opens with a line */
.d-story .d-eyebrow {
text-align: left; display: inline-flex; align-items: center; gap: 14px;
}
.d-story .d-eyebrow::before {
content: ''; flex: 0 0 auto; width: 32px; height: 1px; background: var(--steel);
}
.d-story-lede {
margin: 0 0 2rem; font-size: clamp(10px, 2.4vw, 12px); font-weight: 600; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--silver); white-space: nowrap;
}
.d-story-lede strong { color: var(--cloud-white); font-weight: 700; }
/* "Read more about Belay's story" — external link, understated with a rule */
.d-story-readmore-wrap {
max-width: 760px; margin: clamp(1.5rem, 3vw, 2.25rem) auto clamp(1.75rem, 3.5vw, 2.5rem);
padding: 0 var(--d-gut); text-align: center;
}
/* Breathing room where prose follows a headline or a standout moment */
.d-story .d-h2 + .d-prose { margin-top: clamp(1.25rem, 3vw, 1.75rem); }
.d-moment + .d-prose { margin-top: clamp(1.5rem, 3vw, 2rem); }
.d-story-readmore {
display: inline-flex; align-items: center; gap: 10px; padding-bottom: 5px;
font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--silver); text-decoration: none;
border-bottom: 1px solid rgba(242, 242, 242, 0.28);
transition: color .25s ease, border-color .25s ease;
}
.d-story-readmore::after { content: '\2192'; font-size: 1.05em; }
.d-story-readmore:hover { color: var(--cloud-white); border-bottom-color: var(--cloud-white); }
.d-prose p {
font-size: clamp(1rem, 1.5vw, 1.1rem); font-weight: 300; line-height: 1.85;
color: var(--stone); margin: 0 0 1.5rem;
}
.d-prose p:last-child { margin-bottom: 0; }
.d-prose strong { color: var(--silver); font-weight: 600; }
.d-pullquote {
margin: clamp(2.5rem, 5vw, 3.5rem) 0; padding: 0; border: none;
font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400;
font-size: clamp(1.55rem, 3.4vw, 2.3rem); line-height: 1.32; color: var(--cloud-white);
}
.d-moment {
margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
font-size: clamp(1.3rem, 2.6vw, 1.85rem); font-weight: 700; letter-spacing: 0.01em;
color: var(--cloud-white);
}
/* Short rule above each standout line so the key moments read as callouts */
.d-moment::before {
content: ''; display: block; width: 46px; height: 2px; background: var(--cloud-white);
margin: 0 0 1.4rem;
}
.d-press { list-style: none; margin: 0; padding: 0; }
.d-press li {
display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
padding: 1.4rem 0; border-top: 1px solid var(--ea-line, #1a1a1a);
}
.d-press li:last-child { border-bottom: 1px solid var(--ea-line, #1a1a1a); }
.d-press-pub { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); }
.d-press-link { font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 400; color: var(--cloud-white); text-decoration: none; }
.d-press-link:hover { color: var(--silver); }
/* Shop reel captions */
.shop-clip-cap {
margin: 8px 0 0; font-size: 10px; font-weight: 600; letter-spacing: 0.03em;
color: var(--steel); line-height: 1.3;
}
/* Shop "see more" reel tile */
.shop-clip--more {
text-decoration: none; color: var(--deep-black);
font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
text-align: center; line-height: 1.55; padding: 12px;
transition: color .3s ease, background .3s ease;
}
.shop-clip--more:hover { color: var(--steel); background: #dedede; }
/* ── STORY IMAGES (color + flavor) ────────────────────────────────────── */
.d-story-hero-img {
position: relative; min-height: 54vh; display: flex; align-items: flex-end;
overflow: hidden; background: #000;
}
.d-story-hero-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.d-story-hero-img::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.85) 100%);
}
.d-story-hero-inner {
position: relative; z-index: 2; width: 100%; max-width: var(--d-max); margin: 0 auto;
padding: 0 var(--d-gut) clamp(2.5rem, 6vh, 4rem); text-align: center;
}
.d-story-hero-inner .d-eyebrow { color: var(--silver); }
.d-story-hero-inner .d-story-h1 { margin-top: 0.5rem; }
.d-story-figure { max-width: 880px; margin: clamp(2.5rem, 5vw, 4rem) auto; padding: 0 var(--d-gut); }
.d-story-figure img { width: 100%; height: auto; display: block; border-radius: 4px; }
.d-story-figure figcaption {
margin-top: 0.9rem; font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--steel); text-align: center;
}
.d-story-figure--full { max-width: none; margin: clamp(3rem, 6vw, 5rem) 0; padding: 0; position: relative; }
.d-story-figure--full img { border-radius: 0; width: 100%; max-height: 62vh; object-fit: cover; }
.d-story-figure--full figcaption {
position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
padding: clamp(2rem, 5vw, 3.5rem) var(--d-gut);
background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
color: var(--cloud-white); text-align: center;
font-size: clamp(1.3rem, 2.8vw, 2rem); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
}
/* ── Hero in-fold social proof ────────────────────────────────────────── */
.d-hero-proof {
margin: 1.5rem 0 0; display: flex; align-items: center; gap: 10px;
font-size: 12px; font-weight: 400; letter-spacing: 0.04em; color: var(--stone);
}
.d-hero-stars { color: var(--cloud-white); letter-spacing: 0.14em; font-size: 12px; }
@media (max-width: 620px) { .d-hero-proof { font-size: 11px; } }
/* ── Sticky buy bar — DESKTOP ONLY (home page).
Mobile is intentionally off: enabling a fixed bottom bar on iOS reintroduced
the fixed-element bleed that broke the top nav, so the bar stays desktop-only.
Parked below the fold; slides up on scroll, tucks away over the closing CTA. */
.d-stickybar {
display: none; align-items: center; justify-content: center; gap: clamp(14px, 4vw, 24px);
position: fixed; left: 0; right: 0; bottom: 0; width: 100%; margin: 0; z-index: 900;
box-sizing: border-box; text-decoration: none;
height: 60px; padding: 0 24px;
background: rgba(21, 21, 21, 0.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-top: 1px solid rgba(242, 242, 242, 0.12);
transform: translateY(115%);
transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
}
@media (min-width: 769px) { .d-stickybar { display: flex; } }
.d-stickybar.is-visible { transform: translateY(0); }
.d-stickybar-info {
font-size: clamp(12px, 3.4vw, 13px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone);
}
.d-stickybar-info strong { color: var(--cloud-white); font-weight: 600; }
.d-stickybar-btn {
flex: 0 0 auto; background: var(--cloud-white); color: var(--deep-black);
font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
padding: 12px 26px; border-radius: 2px; transition: transform .18s ease, background .18s ease;
}
.d-stickybar:hover .d-stickybar-btn { transform: translateY(-1px); background: #fff; }
/* Headline that must hold a single line at every width. Sized off the viewport
so it shrinks to fit rather than wrapping. */
.d-head-oneline {
white-space: nowrap;
font-size: clamp(17px, 5vw, 44px);
}
/* ── BUNDLES / multi-pack ─────────────────────────────────────────────── */
.bundle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 860px; margin: 0 auto; }
.bundle-card {
position: relative; border: 1px solid var(--ea-line, #1a1a1a); padding: 34px 24px 28px;
text-align: center; display: flex; flex-direction: column;
}
.bundle-card--pop { border-color: var(--cloud-white); }
.bundle-badge {
position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
background: var(--cloud-white); color: var(--deep-black);
font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
padding: 5px 12px; white-space: nowrap;
}
.bundle-qty { font-size: 18px; font-weight: 600; letter-spacing: 0.02em; color: var(--cloud-white); margin: 0 0 10px; }
.bundle-price { font-size: 34px; font-weight: 300; color: var(--cloud-white); margin: 0; letter-spacing: 0.01em; }
.bundle-per { font-size: 12px; color: var(--stone); margin: 6px 0 16px; letter-spacing: 0.04em; }
.bundle-save {
display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--cloud-white); border: 1px solid var(--ea-line, #1a1a1a); padding: 5px 12px; margin: 0 auto 22px;
}
.bundle-card .reserve-btn { margin-top: auto; }
.bundle-note { text-align: center; margin-top: 2rem; font-size: 11px; letter-spacing: 0.06em; color: var(--steel); }
@media (max-width: 720px) { .bundle-grid { grid-template-columns: 1fr; max-width: 340px; } }
/* ── Email capture (Klaviyo) ──────────────────────────────────────────── */
.d-signup-form { display: flex; gap: 10px; max-width: 480px; margin: 2rem auto 0; flex-wrap: wrap; justify-content: center; }
.d-signup-input {
flex: 1 1 240px; min-width: 0; background: transparent;
border: 1px solid rgba(255,255,255,0.25); color: var(--cloud-white);
font-family: inherit; font-size: 15px; padding: 14px 16px;
}
.d-signup-input::placeholder { color: var(--steel); }
.d-signup-input:focus { outline: none; border-color: var(--cloud-white); }
.d-signup-btn {
flex: 0 0 auto; background: var(--cloud-white); color: var(--deep-black);
border: none; cursor: pointer;
font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 14px 28px;
transition: opacity .2s ease;
}
.d-signup-btn:hover { opacity: 0.85; }
.d-signup-form .d-signup-msg { flex: 1 0 100%; margin: 0.6rem 0 0; font-size: 13px; }
.d-signup-form .signup-success { color: var(--cloud-white); }
.d-signup-form .signup-error { color: #e5836f; }
/* Standard Bearers clip: clean custom play button (replaces janky native controls) */
.d-clip-vid { position: relative; line-height: 0; }
.d-clip-playbtn {
position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
background: transparent; border: 0; cursor: pointer;
display: flex; align-items: center; justify-content: center;
-webkit-tap-highlight-color: transparent; border-radius: 4px;
transition: background .25s ease;
}
.d-clip-playbtn:hover { background: rgba(0,0,0,0.12); }
.d-clip-playbtn::before {
content: ''; width: 62px; height: 62px; border-radius: 50%;
background: rgba(10,10,10,0.5); border: 1.5px solid rgba(255,255,255,0.9);
}
.d-clip-playbtn::after {
content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-42%, -50%);
border-left: 17px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
/* ── Closing section (final CTA + Launch 2 capture) — premium, designed ── */
.d-close {
position: relative; max-width: var(--d-max); margin: 0 auto;
padding: clamp(4.5rem, 9vh, 7rem) var(--d-gut); text-align: center; overflow: hidden;
}
.d-close::before {
content: ''; position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%);
width: min(660px, 92vw); aspect-ratio: 1; pointer-events: none;
background: radial-gradient(circle, rgba(255,255,255,0.06), transparent 68%);
}
.d-close-inner { position: relative; max-width: 640px; margin: 0 auto; }
.d-close-head {
font-size: clamp(2.5rem, 6vw, 4.2rem); font-weight: 700; text-transform: uppercase;
letter-spacing: -0.01em; line-height: 1.04; color: var(--cloud-white); margin: 0.7rem 0 1.1rem;
}
.d-close-head em {
font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400;
text-transform: none; letter-spacing: 0; font-size: 1.16em;
}
.d-close-btn { margin-top: 2rem; }
.d-close-divider {
display: flex; align-items: center; gap: 16px; max-width: 440px;
margin: clamp(3rem, 6vw, 4.5rem) auto 0; color: var(--steel);
}
.d-close-divider::before, .d-close-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.14); }
.d-close-divider span { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; }
.d-close-product {
margin: 1rem auto 0; font-size: 12px; font-weight: 500; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--stone);
}
.d-close-product strong { color: var(--cloud-white); font-weight: 600; }
.d-close-note {
max-width: 440px; margin: 1.4rem auto 0; font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--silver);
}
.d-close-note strong { color: var(--cloud-white); font-weight: 600; }
.d-signup2 { max-width: 440px; margin: 1.25rem auto 0; }
.d-signup2-pill {
display: flex; border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.03);
transition: border-color .2s ease;
}
.d-signup2-pill:focus-within { border-color: rgba(255,255,255,0.6); }
.d-signup2-pill input {
flex: 1; min-width: 0; background: transparent; border: 0; color: var(--cloud-white);
padding: 15px 18px; font-size: 15px; font-family: inherit;
}
.d-signup2-pill input::placeholder { color: var(--steel); }
.d-signup2-pill input:focus { outline: none; }
.d-signup2-pill button {
flex: 0 0 auto; background: var(--cloud-white); color: var(--deep-black); border: 0; cursor: pointer;
padding: 0 26px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
transition: opacity .2s ease;
}
.d-signup2-pill button:hover { opacity: 0.85; }
.d-signup2-msg { margin: 0.8rem 0 0; font-size: 13px; }
.d-signup2 .signup-success { color: var(--cloud-white); }
.d-signup2 .signup-error { color: #e5836f; }
@media (max-width: 460px) {
.d-signup2-pill { flex-direction: column; }
.d-signup2-pill button { padding: 14px; }
}
/* ═══════════════════════════════════════════════════════════════════════
iOS STICKY CHROME — solid header + buy bar welded to top/bottom of screen,
safe-area aware, so no page content ever shows above or below them.
═══════════════════════════════════════════════════════════════════════ */
:root { --nav-h: 64px; --bar-h: 50px; }
/* Header: fixed, edge-to-edge, opaque; background fills the status-bar/notch strip */
.site-nav {
position: fixed; top: 0; left: 0; right: 0; width: 100%; margin: 0;
z-index: 1000; box-sizing: border-box;
height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
padding-top: env(safe-area-inset-top, 0px);
background: #151515;
}
@media (max-width: 768px) {
/* Frame the page BETWEEN the fixed bars — content never hides under them */
body { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }
/* Bar overlays and hides over the closing CTA, so no reserved bottom gap. */
body:has(.d-stickybar) { padding-bottom: 0; }
/* The body already offsets the nav here; styles.css also puts padding-top:64px on
, which double-stacked into a dark strip below the nav. Zero it on mobile. */
main { padding-top: 0; }
/* body now clears the nav, so the first section doesn't need its own big gap */
main > *:first-child { padding-top: clamp(1.25rem, 4vh, 2.25rem) !important; }
}
/* A global reduce-motion reset (styles.css) sets animation-duration:0.01ms and
animation-iteration-count:1 !important on * — which freezes the proof ticker on
phones with Reduce Motion enabled. Re-assert the ticker scroll (core social
proof, low motion risk). Override ONLY those two properties: using the
animation shorthand here would also force animation-name !important, which
defeats the start-on-scroll gate and made the ticker run from page load for
every Reduce Motion visitor. */
@media (prefers-reduced-motion: reduce) {
.d-ticker-track {
animation-duration: 55s !important;
animation-iteration-count: infinite !important;
}
}
/* (Sticky buy bar styling is unified above — same on mobile and desktop.) */
/* ── D1 / Pro athlete — direct-line toggle ────────────────────────────── */
.athlete-toggle { border: 1px solid rgba(255, 255, 255, 0.14); transition: border-color .25s ease; }
.athlete-toggle[open] { border-color: rgba(255, 255, 255, 0.3); }
.athlete-toggle-head {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 4vw, 2rem);
cursor: pointer; list-style: none; user-select: none;
transition: background .25s ease;
}
.athlete-toggle-head::-webkit-details-marker { display: none; }
.athlete-toggle-head:hover { background: rgba(255, 255, 255, 0.03); }
.athlete-toggle-heading { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.athlete-toggle-title {
font-size: clamp(1.3rem, 3.2vw, 2rem); font-weight: 700; line-height: 1.1;
letter-spacing: -0.005em; color: var(--cloud-white);
}
.athlete-toggle-icon { position: relative; flex: 0 0 auto; width: 20px; height: 20px; }
.athlete-toggle-icon::before, .athlete-toggle-icon::after { content: ''; position: absolute; background: var(--cloud-white); }
.athlete-toggle-icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.athlete-toggle-icon::after {
left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%);
transition: transform .25s ease, opacity .2s ease;
}
.athlete-toggle[open] .athlete-toggle-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.athlete-toggle-body { padding: 0 clamp(1.25rem, 4vw, 2rem) clamp(1.5rem, 3.5vw, 2.25rem); }