.hero {
position: relative;
min-height: calc(100svh - var(--header-h));
padding-bottom: 0;
overflow: visible;
isolation: isolate;
display: flex;
flex-direction: column;
align-items: stretch;
/* Radial gradient lives on the hero now (not body). Outer ring matches the
body color (#D9E7F6) so the transition out is seamless as you scroll. */
background: var(--bg-radial);
}
.hero__content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-top: calc(clamp(16px, 3.2vh, 48px) + 50px);
gap: clamp(14px, 1.8vh, 22px);
}
.hero__headline {
font-family: var(--ff-display);
font-weight: 700;
font-size: var(--fs-h1);
line-height: var(--lh-tight);
color: var(--c-text);
letter-spacing: -0.005em;
max-width: 30ch;
}
.hero__period {
color: var(--c-sage);
}
/* Keeps "well-being." from breaking across lines at the hyphen — the period
travels with the word as one unit. */
.hero__nowrap {
white-space: nowrap;
}
/* Subhead is treated as a single locked-up unit: font-size scales fluidly
with viewport width, and the inline elements inside (pill, underline) use
em-based padding/borders so they scale in lockstep. `white-space: nowrap`
guarantees the only break is the explicit ` `.
Result: identical 2-line lockup at every viewport, just smaller. */
.hero__sub {
/* Locked at 18px by default; js/sections/hero.js measures the rendered
line and scales `font-size` DOWN inline only when the lockup would clip
the 20px viewport padding. A no-JS fallback clamp is applied via the
:where() rule below so the layout still degrades gracefully. */
font-size: 18px;
line-height: var(--lh-base);
color: var(--c-text);
white-space: nowrap;
}
/* No-JS fallback — the lockup still scales fluidly via vw on narrow widths
if for some reason the fit script never runs. The .js class is added on
in main.js when GSAP boots, so :not(.js) targets the fallback. */
:where(html:not(.js)) .hero__sub {
font-size: clamp(10px, 3vw, 18px);
}
/* Pill inside the subhead — em-based padding so it scales with the lockup. */
.hero__sub .pill-sage {
padding: 0.15em 0.7em;
}
/* Underline-sketch inside the subhead — em-based stroke so it scales. */
.hero__sub .underline-sketch {
border-bottom-width: 0.2em;
}
/* Headline + subhead breaks have desktop and mobile variants — only the
active one is rendered at each viewport. Desktop break locations are the
default; mobile-only breaks kick in via the `@media (max-width: 720px)`
block further down. */
.hero__headline-break--d,
.hero__sub-break--d { display: inline; }
.hero__headline-break--m,
.hero__sub-break--m { display: none; }
.hero__ctas {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start; /* keep both buttons at the top edge */
gap: 14px;
margin-top: 4px;
}
/* Stacks the "Try Pro for free" button with the micro line directly below
it so the micro reads as belonging to that button only. */
.hero__cta-stack {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.hero__microcopy {
font-size: var(--fs-micro);
color: var(--c-microcopy);
letter-spacing: 0.01em;
margin: 0;
}
/* On mobile the CTAs stack vertically. Let the stack's children flow into
the parent flex with `display: contents`, then push the micro line to the
bottom via `order`. With "Request demo" hidden on mobile, the final layout
reads: [Try Pro for free] / No credit card required. */
@media (max-width: 720px) {
.hero__ctas {
flex-direction: column;
align-items: center; /* center the button + micro under the centered headline */
}
.hero__cta-stack { display: contents; }
/* Hero "No credit card required" microcopy hides on phone — the hero
is busy enough at this width. Same line still appears in the mobile
menu and the footer where there's room for it. */
.hero__microcopy { display: none; }
}
/* Hero image — left-aligned within the container so the right column is
reserved for the timer demo / floater area. Inside `.hero__content` (a flex
column with `align-items: center`), an explicit `width: 100%` is needed so
the wrap spans the full container width like it did when it was a sibling. */
.hero__image-wrap {
display: flex;
justify-content: flex-start;
margin-top: clamp(28px, 4vh, 56px);
width: 100%;
}
.hero__image {
display: block;
position: relative;
width: 100%;
height: auto;
border-radius: 14px;
}
/* Click target — the hero image is a real