/* Landing page redesign (index-new.html). Builds on styles.css (font, logo, base styles).
One light look only. Brand colours:
Chalk White #FAFAFA 60% the canvas
Forest Slate #34463F 30% navigation, headers, text
Warm Ochre #E29553 10% accents: active buttons, checkmarks, highlights */
:root {
--chalk: #FAFAFA;
--slate: #34463F;
--ochre: #E29553;
color-scheme: light;
}
.hn-body { background: var(--chalk); color: var(--slate); overflow-x: clip; }
/* ---------- Header: a Deep Juniper bar floating over the countertop ---------- */
.hn-header { position: absolute; inset: 0 0 auto 0; z-index: 20; padding: 16px var(--gutter); }
.hn-bar { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 10px 10px 10px 22px; border-radius: 999px; background: var(--slate); box-shadow: 0 10px 30px rgba(52, 70, 63, .22); }
.hn-bar .brand { --logo-h: 26px; }
.hn-login { color: var(--chalk); font-weight: 600; font-size: .9375rem; text-decoration: none; padding: 10px 18px; border-radius: 999px; }
.hn-login:hover { background: rgba(250, 250, 250, .1); }
.hn-header :focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }
/* ---------- Section 1: hero on the kitchen countertop ---------- */
/* The hero stays pinned while section 2 slides up over it (sticky). Where the hero is taller than
the screen (short phones), home-new.js sets a negative top so it scrolls fully into view first. */
.hn-hero { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: clip; display: grid; place-items: center; isolation: isolate;
background: #F7F7F6 url("../img/hero/counter.jpg") center / cover no-repeat; }
/* Each dish: the sharp picture, with its pre-blurred copy stacked on top (faded in on scroll).
Shadows are part of the pictures. Sizes follow the screen width; positions are set so the
dishes never overlap each other or the headline (checked at phone, tablet, laptop and wide). */
/* The dishes only get their own GPU layers (will-change) while they're moving (.is-moving, set by
home-new.js). Kept permanently, those layers sat under the whole page (the hero is pinned) and
made the browser re-render everything above them on every hover, which blurred it for a while. */
.hn-dish { position: absolute; z-index: 1; pointer-events: none; user-select: none; }
.hn-hero.is-moving .hn-dish, .hn-hero.is-moving .hn-soft { will-change: transform, opacity; }
.hn-dish img { display: block; width: 100%; height: auto; }
.hn-dish .hn-soft { position: absolute; inset: 0; opacity: 0; }
/* The hero and section 2 share a wrapper, so the hero is only pinned while section 2 slides over it
and scrolls away with it, instead of staying under sections 3, 4 and onwards. */
.hn-stage { position: relative; }
/* Each picture has room for its shadow around it (about 22% each side), so the boxes are larger
than the food. Karahi top left, spoon top right, biryani bottom right, samosas bottom left, roti
peeking up under the words. */
.hn-salan { width: 36vw; left: -10vw; top: -4vh; }
.hn-spoon { width: 27vw; right: -8vw; top: 20vh; }
.hn-biryani { width: 37vw; right: -8vw; bottom: -13vh; }
.hn-samosa { width: 33vw; left: -7vw; bottom: -10vh; }
.hn-roti { width: 28vw; left: 36vw; bottom: -25vh; }
/* The words, above the dishes: headline, a line, the button, three ticks. */
.hn-copy { position: relative; z-index: 2; display: grid; justify-items: center; gap: clamp(16px, 2.4vh, 26px); margin: 0 var(--gutter); text-align: center; }
.hn-title { max-width: 13ch; text-wrap: balance;
font-size: clamp(2.6rem, 6.4vw, 6rem); line-height: .96; font-weight: 600; letter-spacing: -.045em; color: var(--slate); }
.hn-you { color: var(--ochre); }
.hn-sub { max-width: 34ch; font-size: clamp(1.02rem, 1.35vw, 1.25rem); line-height: 1.45; color: var(--slate); opacity: .82; text-wrap: balance; }
.hn-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 999px;
background: var(--ochre); color: var(--slate); font-weight: 700; font-size: 1.0625rem; text-decoration: none;
box-shadow: 0 10px 24px rgba(226, 149, 83, .35); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s; }
.hn-cta:hover { background: #E8A066; transform: translateY(-1px); box-shadow: 0 14px 30px rgba(226, 149, 83, .42); }
.hn-cta:focus-visible { outline: 3px solid var(--slate); outline-offset: 3px; }
.hn-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hn-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; list-style: none; padding: 0; margin: 0;
font-size: .9375rem; font-weight: 600; color: var(--slate); }
.hn-checks li { display: inline-flex; align-items: center; gap: 7px; }
.hn-checks svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--ochre); fill: none; stroke: var(--chalk); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
/* Tablets and small laptops: dishes a little smaller so the headline keeps its space. */
@media (max-width: 1100px) {
.hn-salan { width: 44vw; left: -14vw; top: -6vh; }
.hn-spoon { width: 32vw; right: -11vw; top: 22vh; }
.hn-biryani { width: 42vw; right: -12vw; bottom: -10vh; }
.hn-samosa { width: 38vw; left: -11vw; bottom: -8vh; }
.hn-roti { width: 30vw; left: 35vw; bottom: -22vh; }
}
/* Phones: the karahi and spoon in a band above the words, the biryani and samosas in a band below
(no room for the roti). The hero grows taller than a short screen rather than squeezing the
words into the food. */
@media (max-width: 700px) {
/* Space above = where the karahi ends (54px + 47vw), below = where the biryani starts, plus a margin. */
.hn-hero { height: auto; min-height: 100vh; min-height: 100svh; align-content: start; padding: calc(78px + 47vw) 0 calc(55vw - 14px); }
.hn-salan { width: 56vw; left: -14vw; top: 54px; }
.hn-spoon { width: 54vw; right: -15vw; top: 70px; }
.hn-biryani { width: 62vw; right: -15vw; bottom: -40px; }
.hn-samosa { width: 56vw; left: -13vw; bottom: -24px; }
.hn-roti { display: none; }
.hn-title { font-size: clamp(2.3rem, 11.5vw, 3.2rem); max-width: 9ch; }
.hn-checks { font-size: .875rem; gap: 6px 14px; }
}
/* ---------- Section 2: How it works ---------- */
/* A Chalk White sheet that slides up over the pinned hero (rounded top edge and a soft shadow mark
where it starts). Forest Slate for words, Warm Ochre only for the small step labels and ticks. */
.hn-how { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; background: var(--chalk); color: var(--slate);
padding: clamp(80px, 12vh, 140px) var(--gutter) clamp(80px, 12vh, 140px); border-radius: 30px 30px 0 0;
box-shadow: 0 -1px 0 rgba(52, 70, 63, .06), 0 -24px 60px rgba(52, 70, 63, .10); }
.hn-how-wrap { width: 100%; max-width: 1160px; margin: 0 auto; position: relative; }
/* Header: heading on the left, the subtitle across from it, sharing a baseline. */
.hn-how-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px 40px; margin-bottom: clamp(36px, 6vh, 64px); }
.hn-how-head h2 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: .98; font-weight: 600; letter-spacing: -.045em; color: var(--slate); }
.hn-how-head p { font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.5; color: var(--slate); opacity: .7; max-width: 30ch; }
@media (min-width: 961px) { .hn-how-head p { max-width: none; white-space: nowrap; } }
/* The three cards: text first (the heading is the focus), the app preview below, rising from the
card's bottom edge so it supports the words rather than competing with them. */
.hn-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.hn-step { display: flex; flex-direction: column; overflow: hidden; background: #fff; color: var(--slate); border-radius: 22px;
border: 1px solid rgba(52, 70, 63, .07);
box-shadow: 0 1px 2px rgba(52, 70, 63, .04), 0 10px 30px -8px rgba(52, 70, 63, .10); }
.hn-step:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(52, 70, 63, .05), 0 18px 40px -10px rgba(52, 70, 63, .16); }
.hn-step-text { order: -1; padding: clamp(24px, 2.4vw, 32px) clamp(22px, 2.2vw, 30px) 0; display: grid; align-content: start; }
.hn-num { font-size: .8125rem; font-weight: 700; letter-spacing: .14em; color: var(--ochre); opacity: .8; margin-bottom: 14px; transition: opacity .3s ease; }
.hn-step:hover .hn-num { opacity: 1; }
.hn-step h3 { font-size: clamp(1.35rem, 1.75vw, 1.6rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; color: var(--slate); margin-bottom: 10px; }
.hn-step p { font-size: .98rem; line-height: 1.6; color: var(--slate); opacity: .72; max-width: 34ch; }
.hn-shot { position: relative; margin-top: auto; padding-top: 26px; height: 210px; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; }
.hn-shot .ui { transform-origin: 50% 0; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.hn-step:hover .hn-shot .ui { transform: translateY(-4px); }
/* The little app screens (drawn from the real quiz, My day and Progress screens): white panels with a
hairline edge and a light shadow, set into the card. */
.ui { width: min(82%, 290px); background: #fff; border-radius: 14px; padding: 14px 14px 12px; display: grid; gap: 8px;
border: 1px solid rgba(52, 70, 63, .09); box-shadow: 0 8px 24px -6px rgba(52, 70, 63, .14); font-size: 12px; color: var(--slate); }
.ui-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 10.5px; font-weight: 600; opacity: .9; }
.ui-h { font-size: 13px; font-weight: 700; }
.ui-bar { flex: 1; max-width: 120px; height: 5px; border-radius: 5px; background: #EDEBE6; overflow: hidden; }
.ui-bar i { display: block; height: 100%; background: var(--ochre); border-radius: 5px; }
.ui-chip { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #F6EBDD; color: #8A5426; }
.ui-q { font-size: 14px; font-weight: 700; letter-spacing: -.01em; margin: 2px 0; }
.ui-opt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1.5px solid #E7E4DE; font-weight: 600; }
.ui-opt.is-on { border-color: var(--ochre); background: #FCF4EC; }
.ui-tick { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #CFCBC3; flex: none; position: relative; }
.ui-opt.is-on .ui-tick, .ui-tick.on { border-color: var(--ochre); background: var(--ochre); }
.ui-opt.is-on .ui-tick::after, .ui-tick.on::after, .ui-check::after { content: ""; position: absolute; left: 4px; top: 2px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ui-meal { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 10px; background: #F7F6F3; }
.ui-meal small { display: block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .55; }
.ui-meal b { display: block; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-meal > div { min-width: 0; }
.ui-dot { width: 26px; height: 26px; border-radius: 8px; }
.ui-dot.d1 { background: linear-gradient(135deg, #F2C98F, #E29553); }
.ui-dot.d2 { background: linear-gradient(135deg, #C9875A, #8E4E2A); }
.ui-dot.d3 { background: linear-gradient(135deg, #B9D48A, #6E9A45); }
.ui-check { width: 17px; height: 17px; border-radius: 50%; background: var(--ochre); position: relative; flex: none; }
.ui-check.off { background: none; border: 1.5px solid #CFCBC3; }
.ui-check.off::after { display: none; }
.ui-chart { width: 100%; height: 74px; display: block; }
.ui-habits { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; }
.ui-habits span { margin-right: auto; opacity: .7; }
.ui-habits i { width: 14px; height: 14px; border-radius: 4px; background: #EDEBE6; }
.ui-habits i.on { background: var(--ochre); }
.ui-win { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 11.5px; }
/* Entrance. home-new.js watches the heading and each card separately and adds .is-in to
each one as it actually comes into view (cards arriving together get --d: 0s, .14s, .28s).
The entrance is a one-off keyframe animation, kept apart from the hover transition, so hovering
never waits for an entrance delay. "backwards" holds the starting state during the delay; once it
finishes, the card is back to its normal style and hover works on it directly. */
@keyframes hn-rise { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: none; } }
.hn-how.hn-ready .hn-how-head:not(.is-in), .hn-how.hn-ready .hn-step:not(.is-in) { opacity: 0; }
.hn-how.hn-ready .hn-how-head.is-in { animation: hn-rise .9s cubic-bezier(.16, 1, .3, 1) backwards; }
.hn-how.hn-ready .hn-step.is-in { animation: hn-rise 1s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) backwards; }
/* Hover: immediate, no delay, in and out. */
.hn-step { transition: transform .32s cubic-bezier(.2, .8, .2, 1), box-shadow .32s cubic-bezier(.2, .8, .2, 1); }
/* Without JavaScript nothing is hidden (.hn-ready is added by the script). The animations play for
everyone, including devices set to reduce motion (the owner's choice, 31 Oct 2026). */
/* Tablets: the cards stack, each with its words on the left and the preview rising from the
bottom-right corner. */
@media (max-width: 960px) {
.hn-steps { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin: 0 auto; }
.hn-step { flex-direction: row; align-items: stretch; }
.hn-step-text { flex: 1 1 54%; padding: 30px 8px 30px 30px; align-content: center; }
.hn-shot { flex: 0 0 46%; margin-top: 0; align-self: flex-end; height: 200px; padding-top: 28px; }
.hn-how-head p { max-width: 40ch; }
}
/* Phones: one column, the words above the preview. */
@media (max-width: 600px) {
.hn-how { border-radius: 24px 24px 0 0; }
.hn-step { flex-direction: column; border-radius: 20px; }
.hn-step-text { padding: 26px 24px 0; }
.hn-shot { flex: none; align-self: auto; height: 190px; padding-top: 22px; }
}
/* ---------- Section 3: Desi food meets fitness ----------
Editorial, two columns: the words on the left; on the right the food (the karahi photo, with its chutney
and lime) and, overlapping it, the app's My day card with real
recipes and their figures. Protein is the figure that stands out. Chalk, like section 2, and above
the pinned hero too. */
.hn-desi { position: relative; z-index: 2; background: var(--chalk); color: var(--slate);
padding: clamp(48px, 8vh, 96px) var(--gutter) clamp(96px, 14vh, 160px); overflow: clip; }
.hn-desi-wrap { width: 100%; max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: clamp(40px, 6vw, 96px); align-items: center; }
.hn-label { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font-size: .8125rem; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--slate); }
.hn-label::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--ochre); }
.hn-desi-text h2 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 1.02; font-weight: 600; letter-spacing: -.04em; color: var(--slate);
margin: 0 0 22px; text-wrap: balance; }
/* The highlighted words: an apricot marker stroke behind them (the text itself stays Forest Slate,
so it stays easy to read). It sweeps in once the heading has arrived. */
.hn-mark { background: linear-gradient(transparent 60%, rgba(226, 149, 83, .38) 60%, rgba(226, 149, 83, .38) 88%, transparent 88%) no-repeat 0 0 / 100% 100%;
-webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .06em; }
.hn-desi-lede { font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.6; opacity: .78; max-width: 46ch; margin: 0 0 34px; }
.hn-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; max-width: 46ch; }
.hn-perks li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.hn-perks svg { width: 22px; height: 22px; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--ochre); fill: none; stroke: var(--chalk);
stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.hn-perks b { display: block; font-size: 1rem; font-weight: 700; margin-bottom: 2px; }
.hn-perks span { display: block; font-size: .9375rem; line-height: 1.5; opacity: .7; }
/* The food: the karahi, large. */
.hn-desi-art { position: relative; padding-bottom: 20%; }
/* The image has room for its shadow around the dish, so it's drawn a little larger than its column. */
.hn-plate { position: relative; width: 112%; margin: -6% -10% 0 auto; aspect-ratio: 941 / 950; }
.hn-karahi { position: relative; z-index: 1; width: 100%; height: auto; display: block; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.hn-plate:hover .hn-karahi { transform: rotate(5deg); }
/* The My day card, overlapping the bottom left of the photo. Same white panel as the previews in
section 2, a little larger. */
.hn-plan { position: absolute; z-index: 3; left: 0; bottom: 0; width: min(380px, 66%); margin: 0; background: #fff; border-radius: 18px; padding: 16px 16px 14px;
border: 1px solid rgba(52, 70, 63, .08); box-shadow: 0 2px 4px rgba(52, 70, 63, .04), 0 24px 50px -16px rgba(52, 70, 63, .26);
transition: transform .32s cubic-bezier(.2, .8, .2, 1), box-shadow .32s cubic-bezier(.2, .8, .2, 1); }
.hn-plan:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(52, 70, 63, .05), 0 30px 60px -18px rgba(52, 70, 63, .32); }
.hn-plan-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hn-plan .ui-h { font-size: 15px; }
.hn-plan .ui-chip { font-size: 11px; }
.hn-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hn-meal { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
background: #F7F6F3; transition: background-color .25s ease; }
.hn-meal:hover { background: #FCF4EC; }
.hn-meal-main { min-width: 0; display: grid; gap: 2px; }
.hn-meal-k { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(52, 70, 63, .6); }
.hn-meal-k em { font-style: normal; font-size: 9.5px; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; background: #F6EBDD; color: #8A5426; }
.hn-meal-main b { font-size: 13.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hn-macros { font-size: 11.5px; opacity: .6; white-space: nowrap; }
.hn-pro { display: grid; justify-items: end; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A5426; }
.hn-pro b { font-size: 22px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--slate); text-transform: none; }
.hn-pro small { font-size: 13px; font-weight: 600; margin-left: 1px; }
.hn-plan figcaption { margin-top: 12px; font-size: 12px; font-weight: 600; opacity: .7; }
.hn-desi-note { position: absolute; left: min(400px, 70%); right: 0; bottom: 0; margin: 0; font-size: .75rem; line-height: 1.5; opacity: .55; }
/* Entrance: the same rise as section 2. The marker sweeps in just after the heading. */
.hn-desi.hn-ready [data-rise]:not(.is-in) { opacity: 0; }
.hn-desi.hn-ready [data-rise].is-in { animation: hn-rise 1s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) backwards; }
.hn-desi.hn-ready .hn-mark { background-size: 0% 100%; transition: background-size 1s cubic-bezier(.65, 0, .35, 1) calc(var(--d, 0s) + .45s); }
.hn-desi.hn-ready h2.is-in .hn-mark { background-size: 100% 100%; }
/* Tablets: one column, the words first, then the food with the card overlapping it. */
@media (max-width: 960px) {
.hn-desi-wrap { grid-template-columns: minmax(0, 1fr); max-width: 720px; gap: 56px; }
.hn-desi-text h2 { font-size: clamp(2.2rem, 6vw, 3.2rem); }
.hn-desi-art { padding-bottom: 0; }
.hn-plate { width: 92%; margin: -4% -6% 0 auto; }
.hn-plan { position: relative; width: min(380px, 58%); margin-top: -34%; }
.hn-desi-note { position: static; max-width: 46ch; margin-top: 28px; }
}
/* Phones: the food comes straight after the description (the three points follow it), the card
overlapping the photo's lower edge at full width. */
@media (max-width: 600px) {
.hn-desi { padding-bottom: 88px; }
.hn-desi-wrap { display: flex; flex-direction: column; gap: 0; }
.hn-desi-text { display: contents; }
.hn-desi-art { order: 1; margin: 4px 0 48px; }
.hn-perks { order: 2; }
.hn-label { font-size: .75rem; margin-bottom: 18px; }
.hn-desi-text h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
.hn-desi-lede { margin-bottom: 28px; }
.hn-desi-art { padding-bottom: 0; }
.hn-plate { width: 112%; margin: -6% -6% 0 -6%; }
.hn-plan { width: 100%; margin-top: -12%; }
.hn-meal-main b { font-size: 13px; }
}
/* ---------- Section 4: Invest in your nutrition ----------
Editorial: a large two-line heading across the page (the second line set in a little, the
"yourself" underlined with an apricot brush stroke), then a tall photo (one per reason) beside the
introduction and three reasons, separated by fine rules rather than set in cards. */
.hn-invest { position: relative; z-index: 2; background: var(--chalk); color: var(--slate);
padding: clamp(72px, 11vh, 128px) var(--gutter) clamp(104px, 15vh, 176px); }
.hn-invest-wrap { width: 100%; max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
column-gap: clamp(48px, 7vw, 112px); row-gap: clamp(48px, 7vh, 80px); align-items: center; }
.hn-invest-head { grid-column: 1 / -1; }
.hn-invest-head h2 { margin: 0; font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: 1; font-weight: 600; letter-spacing: -.05em; color: var(--slate); }
.hn-line { display: block; }
.hn-line + .hn-line { padding-left: clamp(0px, 12vw, 180px); }
.hn-swash { position: relative; display: inline-block; white-space: nowrap; }
.hn-swash svg { position: absolute; left: -2%; bottom: -.16em; width: 102%; height: .26em; overflow: visible; }
.hn-swash path { fill: none; stroke: var(--ochre); stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* One frame, three photos: the one for the reason being read fades in (home-new.js sets .is-on). */
.hn-invest-photo { position: relative; margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 488 / 688; background: #E9ECE9; }
.hn-invest-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transform: scale(1.04);
transition: opacity .8s ease, transform 1.4s cubic-bezier(.16, 1, .3, 1); }
.hn-invest-photo img.is-on { opacity: 1; transform: none; }
.hn-reason-photo { display: none; }
.hn-invest-lede { margin: 0 0 clamp(28px, 4vh, 44px); font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.5; letter-spacing: -.01em; max-width: 34ch; }
/* The three reasons: fine rules between them; on hover the rule fills with apricot from the left. */
.hn-reasons { list-style: none; margin: 0; padding: 0; }
.hn-reasons li { position: relative; padding: 24px 0 26px; border-top: 1px solid rgba(52, 70, 63, .14); }
.hn-reasons li:last-child { border-bottom: 1px solid rgba(52, 70, 63, .14); }
.hn-reasons li::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--ochre);
transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.hn-reasons li:hover::before, .hn-reasons li.is-on::before { transform: scaleX(1); }
.hn-reasons h3 { margin: 0 0 8px; font-size: clamp(1.25rem, 1.6vw, 1.45rem); font-weight: 600; letter-spacing: -.02em; }
.hn-reasons p { margin: 0; font-size: 1rem; line-height: 1.6; opacity: .72; max-width: 50ch; }
/* Entrance: the same rise as sections 2 and 3, one part after another. The photo also settles
from a slight zoom, and the brush stroke draws itself once the heading has arrived. */
.hn-invest.hn-ready [data-rise]:not(.is-in) { opacity: 0; }
.hn-invest.hn-ready [data-rise].is-in { animation: hn-rise 1s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) backwards; }
@keyframes hn-settle { from { transform: scale(1.08); } to { transform: none; } }
.hn-invest.hn-ready .hn-invest-photo.is-in img { animation: hn-settle 1.6s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) backwards; }
.hn-invest.hn-ready .hn-swash path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hn-invest.hn-ready h2.is-in .hn-swash path { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.65, 0, .35, 1) calc(var(--d, 0s) + .55s); }
/* Tablets: still side by side, closer together. */
@media (max-width: 960px) {
.hn-invest-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
.hn-invest-head h2 { font-size: 7.2vw; }
.hn-invest-photo { position: sticky; top: 24px; }
.hn-line + .hn-line { padding-left: 8vw; }
}
/* Phones: one column. The heading, a wider photo, then the words. */
@media (max-width: 680px) {
.hn-invest { padding-bottom: 96px; }
.hn-invest-wrap { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
.hn-invest-head h2 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
.hn-line + .hn-line { padding-left: 0; }
.hn-invest-photo { display: none; }
.hn-reason-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3.6; object-fit: cover; object-position: 50% 22%; border-radius: 22px; margin: 6px 0 22px; }
.hn-reasons li { padding: 20px 0 22px; }
}
/* ---------- Section 5: A different approach to fitness ----------
Replaces the old page's statistics. Four beats, top to bottom:
1. the headline, large, with its second line quieter, and the introduction beside it
2. the comparison: "the usual approach" in a calm, cool panel (typographic, a faint empty plate),
beside "the Six Codes approach" in a warm panel led by a real food photo that rises above
the panel
3. one research finding in very large type: a solid "10", a pale "46"
4. the closing line beside a portrait food photo
No cards beyond the two comparison panels; apricot only in small accents. */
.hn-approach { position: relative; z-index: 2; background: var(--chalk); color: var(--slate);
padding: clamp(72px, 11vh, 128px) var(--gutter) clamp(104px, 15vh, 176px); overflow: clip; }
.hn-approach-wrap { width: 100%; max-width: 1160px; margin: 0 auto; }
.hn-approach-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 28px clamp(40px, 6vw, 96px); align-items: end;
margin-bottom: clamp(72px, 12vh, 128px); }
.hn-approach-head h2 { margin: 0; font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: 1; font-weight: 600; letter-spacing: -.05em; text-wrap: balance; }
.hn-approach-head h2 span { display: block; margin-top: .3em; font-size: .56em; line-height: 1.12; font-weight: 500; letter-spacing: -.03em; color: rgba(52, 70, 63, .62); max-width: 22ch; }
.hn-approach-intro { margin: 0; font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.65; opacity: .78; max-width: 42ch; }
/* The comparison. */
.hn-compare { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.hn-compare h3 { margin: 0 0 22px; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hn-compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.hn-compare li { font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.45; }
.hn-usual { position: relative; overflow: hidden; align-self: end; padding: clamp(28px, 3vw, 44px); border-radius: 24px; background: #EEF0EE; color: rgba(52, 70, 63, .82); }
.hn-usual h3 { color: rgba(52, 70, 63, .62); }
.hn-usual li { position: relative; padding-left: 26px; }
.hn-usual li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 1.5px; background: rgba(52, 70, 63, .45); }
/* A faint, empty plate: the meals that aren't there. Decorative only. */
.hn-usual-plate { display: block; width: 150px; aspect-ratio: 1; margin: 40px 0 0 auto; border-radius: 50%; border: 1.5px solid rgba(52, 70, 63, .14);
box-shadow: inset 0 0 0 18px rgba(52, 70, 63, .035); }
.hn-ours { position: relative; border-radius: 24px; background: #FCF4EC; padding: 0 clamp(28px, 3vw, 44px) clamp(28px, 3vw, 44px); margin-top: clamp(48px, 7vh, 72px); }
.hn-ours-photo { margin: calc(-1 * clamp(48px, 7vh, 72px)) 0 clamp(26px, 3vw, 36px); border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3;
box-shadow: 0 24px 50px -24px rgba(52, 70, 63, .35); }
.hn-ours-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hn-ours h3 { color: #8A5426; }
.hn-ours li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; font-weight: 500; }
.hn-ours li svg { width: 22px; height: 22px; margin-top: 2px; padding: 4px; border-radius: 50%; background: var(--ochre); fill: none; stroke: var(--chalk);
stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
/* The finding: very large figures set into the layout, the words beside them. */
.hn-finding { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px clamp(40px, 6vw, 96px); align-items: center;
margin-top: clamp(88px, 14vh, 160px); padding-top: clamp(40px, 6vh, 64px); border-top: 1px solid rgba(52, 70, 63, .14); }
.hn-tenof { margin: 0; display: flex; align-items: baseline; font-size: clamp(6rem, 17vw, 15rem); line-height: .82; font-weight: 600; letter-spacing: -.06em; }
.hn-tenof b { font-weight: 600; }
.hn-tenof span { display: inline-flex; align-items: baseline; }
.hn-tenof i { font-style: normal; font-weight: 400; color: var(--ochre); margin: 0 .02em 0 .06em; font-size: .62em; }
/* The "46" is pale (the whole), the "10" solid (the part). An outline was tried: the font's
overlapping contours show through a stroke. The figure's meaning is in its aria-label. */
.hn-tenof em { font-style: normal; color: #CFD6D2; }
.hn-finding-lead { margin: 0 0 18px; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.2; font-weight: 600; letter-spacing: -.025em; max-width: 22ch; }
.hn-finding-text p:not(.hn-finding-lead):not(.hn-source) { margin: 0 0 14px; font-size: 1rem; line-height: 1.6; opacity: .78; max-width: 48ch; }
.hn-source { margin: 18px 0 0; font-size: .8125rem; line-height: 1.55; opacity: .7; max-width: 52ch; }
.hn-source cite { font-style: italic; }
.hn-source a { color: inherit; text-decoration: underline; text-decoration-color: rgba(226, 149, 83, .7); text-underline-offset: 3px; transition: color .2s ease; }
.hn-source a:hover { color: #8A5426; }
.hn-source a:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; border-radius: 2px; }
/* The close: a portrait photo, the closing line beside it. */
.hn-approach-close { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px clamp(40px, 7vw, 112px); align-items: center;
margin-top: clamp(88px, 14vh, 160px); }
.hn-close-photo { margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 24px 50px -26px rgba(52, 70, 63, .3); }
.hn-close-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hn-close-text h3 { margin: 0 0 22px; font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1.02; font-weight: 600; letter-spacing: -.045em; }
.hn-close-text h3 span { display: block; margin-top: .35em; font-size: .52em; line-height: 1.2; font-weight: 500; letter-spacing: -.025em; color: rgba(52, 70, 63, .7); max-width: 24ch; }
.hn-close-text p { margin: 0; padding-top: 22px; position: relative; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; opacity: .8; max-width: 44ch; }
.hn-close-text p::before { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 3px; border-radius: 3px; background: var(--ochre); }
/* Entrance: text rises (as in the other sections); the two comparison panels slide in from their
sides; photos settle from a slight zoom; the "/46" follows the "10" a moment later. Transform
and opacity only. */
@keyframes hn-slide-l { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
@keyframes hn-slide-r { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
.hn-approach.hn-ready [data-rise]:not(.is-in) { opacity: 0; }
.hn-approach.hn-ready [data-rise].is-in { animation: hn-rise 1s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) backwards; }
.hn-approach.hn-ready .hn-from-l.is-in { animation-name: hn-slide-l; animation-duration: 1.1s; }
.hn-approach.hn-ready .hn-from-r.is-in { animation-name: hn-slide-r; animation-duration: 1.1s; }
.hn-approach.hn-ready .hn-tenof span.is-in { animation-name: hn-slide-r; }
.hn-approach.hn-ready .hn-from-r.is-in .hn-ours-photo img, .hn-approach.hn-ready .hn-close-photo.is-in img { animation: hn-settle 1.6s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) backwards; }
/* Tablets: the comparison stays side by side but tighter; the rest stacks. */
@media (max-width: 960px) {
.hn-approach-head, .hn-finding { grid-template-columns: minmax(0, 1fr); }
.hn-compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.hn-usual-plate { width: 110px; }
.hn-approach-close { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
/* Phones: one column throughout. The usual approach comes first, compact; then the warm panel with
its photo; the finding; the photo and closing line. */
@media (max-width: 680px) {
.hn-approach { padding-bottom: 96px; }
.hn-approach-head { margin-bottom: 56px; }
.hn-approach-head h2 { font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
.hn-compare { grid-template-columns: minmax(0, 1fr); gap: 0; }
.hn-usual { align-self: auto; }
.hn-usual-plate { display: none; }
.hn-ours { margin-top: 64px; }
.hn-ours-photo { margin-top: -40px; }
.hn-tenof { font-size: clamp(5.5rem, 30vw, 8rem); }
.hn-approach-close { grid-template-columns: minmax(0, 1fr); }
.hn-close-photo { aspect-ratio: 4 / 3.4; }
}
/* ---------- Calls to action inside sections (same button as the hero) ---------- */
.hn-cta-row { margin: 0; }
.hn-how .hn-cta-row { display: flex; justify-content: center; margin-top: clamp(36px, 6vh, 56px); }
.hn-desi-cta { margin-top: 34px; }
.hn-close-text .hn-cta-row { margin-top: 30px; }
@media (max-width: 600px) { .hn-desi-cta { order: 3; } }
/* ---------- Section 6: Pricing (placeholders until prices are set) ---------- */
.hn-pricing, .hn-faq { position: relative; z-index: 2; background: var(--chalk); color: var(--slate); padding: clamp(72px, 11vh, 128px) var(--gutter); }
.hn-pricing-wrap, .hn-faq-wrap { width: 100%; max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
gap: 40px clamp(40px, 7vw, 112px); align-items: center; }
.hn-pricing-head h2, .hn-faq-head h2 { margin: 0 0 18px; font-size: clamp(2.4rem, 4.8vw, 4.2rem); line-height: 1; font-weight: 600; letter-spacing: -.045em; }
.hn-pricing-head > p:last-child { margin: 0; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; opacity: .78; max-width: 40ch; }
.hn-plan-card { background: #fff; border-radius: 22px; padding: clamp(28px, 3vw, 40px); border: 1px solid rgba(52, 70, 63, .07);
box-shadow: 0 1px 2px rgba(52, 70, 63, .04), 0 10px 30px -8px rgba(52, 70, 63, .10); }
.hn-plan-card h3 { margin: 0 0 10px; font-size: 1.25rem; font-weight: 600; }
.hn-price { margin: 0 0 24px; display: flex; align-items: baseline; gap: 8px; }
.hn-price b { font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 600; letter-spacing: -.04em; }
.hn-price span { opacity: .7; }
.hn-plan-card ul { list-style: none; margin: 0 0 28px; padding: 22px 0 0; border-top: 1px solid rgba(52, 70, 63, .12); display: grid; gap: 12px; }
.hn-plan-card li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.hn-plan-card li svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--ochre); fill: none; stroke: var(--chalk); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.hn-plan-card .hn-cta { width: 100%; justify-content: center; }
/* Placeholder text: visibly unfinished, so it can't be mistaken for real terms. */
.hn-ph { color: rgba(52, 70, 63, .45); text-decoration: underline dashed rgba(52, 70, 63, .3); text-underline-offset: 4px; }
/* ---------- Section 7: FAQs (native details/summary accordion) ---------- */
.hn-faq-wrap { align-items: start; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.hn-faq-list { border-top: 1px solid rgba(52, 70, 63, .14); }
.hn-faq-list details { border-bottom: 1px solid rgba(52, 70, 63, .14); }
.hn-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 18px 0; cursor: pointer; list-style: none;
font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 600; }
.hn-faq-list summary::-webkit-details-marker { display: none; }
.hn-faq-list summary:focus-visible { outline: 2px solid var(--ochre); outline-offset: 4px; border-radius: 4px; }
/* The plus: two bars; the upright one turns flat when open. */
.hn-faq-list summary i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #F6EBDD; }
.hn-faq-list summary i::before, .hn-faq-list summary i::after { content: ""; position: absolute; left: 8px; top: 13px; width: 12px; height: 2px; border-radius: 2px; background: #8A5426; transition: transform .25s ease; }
.hn-faq-list summary i::after { transform: rotate(90deg); }
.hn-faq-list details[open] summary i::after { transform: rotate(0deg); }
.hn-faq-list details p { margin: 0; padding: 0 48px 22px 0; line-height: 1.65; opacity: .78; max-width: 62ch; }
/* ---------- Section 8: Final call to action (Forest Slate) ---------- */
.hn-final { position: relative; z-index: 2; background: var(--slate); color: var(--chalk); border-radius: 30px 30px 0 0;
padding: clamp(96px, 16vh, 176px) var(--gutter); text-align: center; }
.hn-final-wrap { max-width: 900px; margin: 0 auto; }
.hn-final h2 { margin: 0 0 22px; font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 1; font-weight: 600; letter-spacing: -.05em; color: var(--chalk); text-wrap: balance; }
.hn-final h2 .hn-nw { white-space: nowrap; }
.hn-final h2 .hn-final-accent { display: block; color: var(--ochre); }
.hn-final p { margin: 0 auto; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.55; opacity: .82; max-width: 38ch; }
.hn-final .hn-cta-row { margin-top: 38px; opacity: 1; }
.hn-final .hn-cta:focus-visible { outline-color: var(--chalk); }
/* Entrance: the same gentle rise as the other sections. */
.hn-pricing.hn-ready [data-rise]:not(.is-in), .hn-faq.hn-ready [data-rise]:not(.is-in), .hn-final.hn-ready [data-rise]:not(.is-in) { opacity: 0; }
.hn-pricing.hn-ready [data-rise].is-in, .hn-faq.hn-ready [data-rise].is-in, .hn-final.hn-ready [data-rise].is-in { animation: hn-rise 1s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) backwards; }
/* The CTAs added to sections 2 and 3 rise with them. */
.hn-how.hn-ready .hn-cta-row:not(.is-in) { opacity: 0; }
.hn-how.hn-ready .hn-cta-row.is-in { animation: hn-rise 1s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) backwards; }
/* Tablets and phones: one column. */
@media (max-width: 860px) {
.hn-pricing-wrap, .hn-faq-wrap { grid-template-columns: minmax(0, 1fr); }
.hn-plan-card { max-width: 480px; }
}
@media (max-width: 600px) {
.hn-final { border-radius: 24px 24px 0 0; }
.hn-faq-list details p { padding-right: 0; }
}
/* ---------- Footer: continues the final section's Forest Slate ---------- */
.hn-footer { position: relative; z-index: 2; background: var(--slate); color: rgba(250, 250, 250, .72); padding: 0 var(--gutter) 40px; }
.hn-footer-wrap { max-width: 1160px; margin: 0 auto; padding-top: 40px; border-top: 1px solid rgba(250, 250, 250, .14); display: grid; gap: 22px; }
.hn-footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.hn-footer .brand { --logo-h: 26px; }
.hn-footer-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.hn-footer-nav a { color: var(--chalk); font-size: .9375rem; font-weight: 500; text-decoration: none; padding: 6px 0; }
.hn-footer-nav a:hover { color: var(--ochre); }
.hn-footer a:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; border-radius: 4px; }
.hn-disclaimer { margin: 0; font-size: .8125rem; line-height: 1.6; max-width: 80ch; }
.hn-copy-line { margin: 0; font-size: .8125rem; }