is first in the HTML; we use flex `order` to flip it
visually without touching markup. */
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 6px 16px;
}
.footer-meta p:first-child {
order: 2;
text-align: right;
}
.footer-meta p:last-child {
order: 1;
text-align: left;
}
.footer-meta p {
margin: 0;
}
/* ── Footer dividers ─────────────────────────────────────────────────
1px #E5E7EB rules (3px radius) spanning the site's content grid —
edge to edge of the centred max-width container at each breakpoint,
NOT the full viewport. One above the link columns, one between
.footer-inner and .footer-meta. Drawn as absolutely-positioned
pseudo-elements so neither the footer HTML nor its layout changes. */
.footer-cols,
.footer-meta {
position: relative;
}
.footer-cols::before,
.footer-meta::before {
content: "";
position: absolute;
height: 1px;
background: #E5E7EB;
border-radius: 3px;
}
/* Midway into the grid gap above the link columns. .footer-cols already
spans the grid content width, so 0/0 lands on the content edges. */
.footer-cols::before {
top: -24px;
left: 0;
right: 0;
}
/* At the top edge of the meta strip — the .footer-inner / .footer-meta
boundary. .footer-meta's own box includes the --pad-x side padding, so
inset by it to align the line with the grid's content edges. */
.footer-meta::before {
top: 0;
left: var(--pad-x);
right: var(--pad-x);
}
/* Breathing room above the columns divider — DOUBLE the previous gap
between the row above and the grey line (tablet 24→48, desktop 12→24,
mobile 8→16). Padding on the row-1 block pushes the second row (line
included) down without moving the line relative to the columns below.
On mobile the row directly above the line is the socials, not the
brand, so the padding sits there. */
.footer-brand {
padding-bottom: 24px;
}
@media (max-width: 639px) {
.footer-brand {
padding-bottom: 0;
}
.footer-socials {
padding-bottom: 8px;
}
/* Mobile: hide the divider below the socials row (the columns line);
the meta-strip divider stays. */
.footer-cols::before {
display: none;
}
}
@media (min-width: 1024px) {
.footer-brand {
padding-bottom: 12px;
}
}
/* On narrow mobile, stack vertically with copyright on top (HTML order). */
@media (max-width: 639px) {
.footer-meta {
flex-direction: column;
align-items: flex-start;
}
.footer-meta p:first-child,
.footer-meta p:last-child {
order: 0;
text-align: left;
}
}
/* Mobile phone only (< 640px): horizontally centre the footer blocks.
Tablet/desktop layout (≥ 640px) is untouched. */
@media (max-width: 639px) {
.footer-brand {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.footer-socials {
justify-content: center;
}
.footer-cols {
justify-items: center;
text-align: center;
}
.footer-meta {
align-items: center;
text-align: center;
}
.footer-meta p:first-child,
.footer-meta p:last-child {
text-align: center;
}
}
/* CTA mobile (< 640px) — relax the heavy left-padding, drop the absolute
wordmark down so it can't overlap the headline */
@media (max-width: 639px) {
.cta {
min-height: clamp(620px, 130vw, 760px);
}
.cta-brand {
position: static;
display: flex;
justify-content: flex-end;
padding: 24px var(--pad-x) 0;
}
.cta-brand-text {
font-size: 18px;
}
.cta-copy {
padding: 32px var(--pad-x) 0;
max-width: none;
}
.cta-stores {
position: static;
padding: 28px var(--pad-x) 36px;
flex-direction: column;
left: auto;
bottom: auto;
}
.cta-store {
width: 100%;
max-width: 280px;
}
}
/* ═══════════════════════════════════════════════════════════════════
RESPONSIVE
═════════════════════════════════════════════════════════════════ */
@media (min-width: 640px) {
.features-inner {
grid-template-columns: repeat(2, 1fr);
}
.pillar-grid {
grid-template-columns: repeat(2, 1fr);
}
.apart-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-cols {
grid-template-columns: repeat(4, 1fr);
}
/* Desktop: brand on left, socials on right (same row), cols span row 2 */
.footer-inner {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"brand socials"
"cols cols";
}
.footer-socials {
justify-self: end;
/* push to the right edge of footer */
align-self: start;
/* top-align: icons sit on the same row as the brand logo */
}
}
@media (min-width: 768px) {
:root {
--pad-x: 40px;
}
.testi-cols {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
:root {
--pad-x: 56px;
}
/* Nav: full pill with text links + CTA. Pill is 56px tall; brand 44px. */
.nav-pill {
height: 60px;
padding: 6px;
}
/* Activate the two groups: brand+sep at the left, links+CTA at the right. */
.nav-left {
display: flex;
align-items: center;
gap: 20px;
}
.nav-right {
display: flex;
align-items: center;
/* gap between the links group and the CTA */
gap: 6px;
/* push the whole right group to the right edge of the pill */
margin-left: auto;
}
.nav-links {
display: flex;
}
/* Inside the right group the links are content-width and close together;
no flex-grow / left-padding needed (the group is positioned by .nav-right). */
.nav-right .nav-links {
flex: 0 0 auto;
padding-left: 0;
}
.nav-cta {
display: inline-flex;
align-items: center;
}
.nav-menu {
display: none;
}
.nav-mobile {
display: none !important;
}
/* Hero: text block left, phones right, top-aligned */
.hero {
padding: 100px 0 80px;
}
.hero-inner {
flex-direction: row;
align-items: stretch;
text-align: left;
gap: 48px;
}
.hero-copy {
flex: 1 1 0;
max-width: 760px;
display: flex;
flex-direction: column;
}
/* Keep each forced line ("Your home," / "finally organised.") on one row so
the headline stays exactly two rows; the copy column widens to fit it. */
.hero-h1 {
white-space: nowrap;
}
/* Push badges toward the bottom of the copy column to fill the lower-left space.
Then nudge them down so they sit 48px above the hero section's bottom edge:
the copy-column bottom is 32px (hero-inner pb) + 80px (hero pb) = 112px above
the section edge, so translateY(64px) lands the badges at 48px. */
.hero-app-badges {
margin-top: auto;
transform: translateY(64px);
}
.hero-sub {
margin-left: 0;
margin-right: 0;
/* The headline now sits on two rows instead of three; add back the one lost
line (80px × 1.16 ≈ 93px) here so the hero keeps its original height and
the gap before the badges grows accordingly. */
margin-bottom: 93px;
}
.hero-phones {
margin-top: 0;
flex: 1 1 0;
gap: 0;
}
.hero-phone {
max-width: 100%;
flex-basis: auto;
}
/* Why: 2-column text+phone */
.why-inner {
grid-template-columns: 1.1fr 0.9fr;
gap: 80px;
}
.why-phone {
width: 320px;
}
.why-second-phone figure {
width: 560px;
}
/* Features: 4-up */
.features-inner {
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}
/* ── SNAP — pinned-scroll choreography (R7) ───────────────────────
The section pins: .snap-stage is sticky (100vh) inside a tall
.snap-track whose height JS sets to 100vh + the pinned scroll budget.
While pinned, JS (initSnapPinned) drives the per-block motion:
• copy (left column, with its checks nested inside it) rises to the
rest line, HOLDs there (the "5-clicks" pause), then exits the top;
• only after the outgoing copy has fully left does the next block's
copy enter from the bottom edge;
• the right-column phone stays put and its image SNAPS per block
(display swap — no fade) when the incoming copy reaches the
phone's bottom.
Entry (first block + phone rising together) and exit (last block +
phone leaving together, then the next section scrolls up normally)
fall out naturally from the sticky stage. */
.snap {
padding: 0;
/* R8: the visible dark panel now lives on the pinned .snap-stage (so the
"section" the user sees is the stationary window with real top/bottom
edges). The tall .snap track itself is transparent on desktop. */
background: none;
background-image: none;
}
/* The decorative glow moves onto the stage (below); hide the section one. */
.snap::before {
display: none;
}
.snap-track {
display: block;
position: relative;
}
.snap-stage {
display: block;
position: sticky;
/* Stationary "section" window: JS (measure) sets the exact height + top in
px so the phone is viewport-centred and this frame's TOP edge is 120px
above the phone top. overflow:hidden clips copy at the frame edges. */
top: calc((100vh - 78vh) / 2);
height: 78vh;
overflow: hidden;
/* White panel (moved off .snap) — identical fill to the mobile section. */
background: #ffffff;
/* Geometry tokens for the side columns. Frame aligned to the site's
1280px grid (half = 640px; was a wider 1440px frame) so the copy's
left edge sits on the same vertical line as every other section's
headings. */
--snap-phone-w: 320px;
--snap-col-gap: 48px;
--snap-gutter: max(var(--pad-x), calc(50vw - 640px + var(--pad-x)));
}
/* Decorative glow, now scoped to the stage (clipped by its overflow). */
.snap-stage::before {
content: "";
position: absolute;
right: -10%;
top: -20%;
width: 70%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 60%);
pointer-events: none;
z-index: 0;
}
/* Each block fills the pinned stage; JS reveals the active one(s). */
.snap-inner {
position: absolute;
inset: 0;
display: block;
grid-template-columns: none;
gap: 0;
max-width: none;
margin: 0;
padding: 0;
min-height: 0;
align-items: stretch;
pointer-events: none;
}
/* Left text column — copy with its checks nested inside, so the whole
column animates as ONE unit. Anchored at top:0; JS sets translateY and
matches the column's height to the phone img so the eyebrow top-aligns
with the img top and the checks bottom-align with the img bottom. */
.snap-copy {
position: absolute;
top: 0;
margin: 0;
will-change: transform;
backface-visibility: hidden;
order: 0;
left: var(--snap-gutter);
/* 56/44 split (was 50/50): the copy keeps reading width while the
340px phone's column shrinks — its side voids drop from ~138px to
~60px, tightening the text↔phone pairing. */
right: calc(44% + var(--snap-col-gap) / 2);
text-align: left;
display: flex;
flex-direction: column;
}
/* Checks ride inside .snap-copy. Collapse pattern (Jul 2026): the
"Know more" toggle now carries the column's bottom-pinning (see the
toggle's ≥1024 margin-top:auto rule near the collapse styles); the
list itself needs no margins/padding of its own — the global
collapsed/open rules drive them. */
.snap-checks {
position: static;
}
/* The sub rides directly under the h2 as its subtext (base 12px gap);
the column's slack pools in the single sub→checks gap, with the
checks still pinned to the phone-img bottom via their margin-top:auto.
Desktop sizing: 18/500 (base) → 16/400. */
.snap-sub {
font-size: 16px;
font-weight: 400;
}
/* Right-column phone — JS sets `top` and toggles `.is-active` so exactly
one phone shows at a time → instant snap between images. */
.snap-visual {
order: 0;
position: absolute;
left: calc(56% + var(--snap-col-gap) / 2);
right: var(--snap-gutter);
min-height: 0;
display: none;
}
.snap-visual.is-active {
/* flex (not block) re-centres the phone inside the right column. */
display: flex;
justify-content: center;
}
.snap-phone {
position: static;
width: var(--snap-phone-w);
opacity: 1;
transition: none;
pointer-events: none;
z-index: 5;
/* Same subtle neutral-grey shadow as the base rule — the earlier
navy-tinted version could pick up a green cast against the warm
white stage. */
box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18);
}
}
@media (min-width: 1280px) {
.snap-stage {
--snap-phone-w: 340px;
}
}
/* Reduced-motion: skip the pinned choreography entirely and lay the snap
blocks out as plain, readable stacked sections on desktop (JS also
bails out, leaving these static styles in charge). */
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
/* The stage becomes display:contents below (no box → no background), and the
desktop rule made .snap transparent. Restore the dark fill on .snap so the
white snap copy stays readable in the static stacked fallback. */
.snap {
background: #ffffff;
padding: 80px 0;
}
.snap-track,
.snap-stage {
display: contents !important;
}
.snap-inner {
position: static;
display: block;
max-width: var(--max);
margin: 0 auto;
padding: 56px var(--pad-x);
min-height: 0;
}
.snap-copy,
.snap-checks,
.snap-visual {
position: static;
transform: none;
inset: auto;
left: auto;
right: auto;
top: auto;
width: auto;
display: block;
text-align: left;
}
.snap-visual {
margin: 24px 0 0;
}
.snap-checks {
margin-top: 24px;
padding-top: 0;
}
}
/* Apart carousel + pillars — desktop sizing. These rules used to sit at
top level and leaked into tablet/mobile (the 4-up pillar row squeezed
into the 640–1023px range); now correctly scoped to ≥1024px. Desktop
output is unchanged. */
@media (min-width: 1024px) {
/* Apart carousel: roomier card frame at desktop */
.apart-stage {
max-width: 980px;
}
/* Pillars: 4-up sticky-notes */
.pillar-grid {
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.pillar {
padding: 32px 28px 36px;
}
.pillar h3 {
font-size: 24px;
}
}
/* ═══════════════════════════════════════════════════════════════════
PILLARS — desktop redesign (≥1024 px)
Fixed 320 × 360 cards laid out in a flex row that lets adjacent
cards overlap at the corners. Cards are slightly tilted (≤ 3°) in
alternating directions. Icons are absolutely positioned so a small
portion (≈ 12% of their width) tucks behind the card's right edge.
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
.pillar-grid {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
gap: 0;
grid-template-columns: none;
}
.pillar-grid .pillar {
width: 320px;
height: 360px;
flex: 0 0 320px;
box-sizing: border-box;
/* Reserve the upper area for the absolute-positioned icon. */
padding: 200px 28px 28px;
/* Clip the portion of the icon that pokes past the right edge so
only ~85% of the icon is visible. */
overflow: hidden;
}
/* Every card except the first nudges left, creating a corner-overlap
with the previous card. */
.pillar-grid .pillar+.pillar {
margin-left: -40px;
}
/* Stagger z-index so cards layer left-to-right: each later card sits
visually on top of its neighbour to the left. */
.pillar-grid .pillar:nth-child(1) {
z-index: 1;
}
.pillar-grid .pillar:nth-child(2) {
z-index: 2;
}
.pillar-grid .pillar:nth-child(3) {
z-index: 3;
}
.pillar-grid .pillar:nth-child(4) {
z-index: 4;
}
/* Card 3's existing -3° rotation is at the boundary; nudge it to
-2.5° so every tilt is strictly under 3°. */
.pillar-grid .pillar:nth-child(3) {
transform: rotate(-2.5deg);
}
/* Vary the vertical position of alternate cards by ±12 px (24 px total
spread) so the row isn't perfectly horizontal — gives the cluster a
hand-pinned scrapbook feel. */
.pillar-grid .pillar:nth-child(odd) {
margin-top: -12px;
}
.pillar-grid .pillar:nth-child(even) {
margin-top: 12px;
}
/* Icon: positioned absolutely with right: -22px so ~22px (≈ 12% of
its 180-px width) is clipped by the card's overflow: hidden. */
.pillar-grid .pillar-ic {
position: absolute;
top: 28px;
right: -22px;
width: 180px;
height: 180px;
margin: 0;
}
}
/* Testimonials / FAQ / CTA — desktop 2-column splits and Figma paddings.
These rules also used to sit at top level, forcing cramped side-by-side
columns onto 640–1023px tablets; now correctly scoped to ≥1024px so
tablet falls back to the stacked base layout. Desktop is unchanged. */
@media (min-width: 1024px) {
/* Testimonials: 1/3 copy + 2/3 cards */
.testi-inner {
grid-template-columns: 1fr 1.4fr;
gap: 56px;
}
.testi-cols {
grid-template-columns: 1fr 1fr;
}
/* FAQ: 2-column. faq-list column widened 10% (1.1fr → 1.21fr); the copy
column absorbs the difference (0.9fr → 0.79fr) so the total stays 2 and
the 80px gap is unchanged. */
.faq-inner {
grid-template-columns: 0.79fr 1.21fr;
gap: 80px;
}
/* CTA: padding-top matches .cta-brand top:72px so .cta-h2 and the brand
logo share the same horizontal top edge at desktop. Horizontal padding
stays the symmetric --pad-x so the copy keeps the shared container
alignment and the stores row stays truly centred. */
.cta-copy {
padding: 72px var(--pad-x) 0;
}
.cta-stores {
padding: 64px var(--pad-x) 80px;
}
.cta-brand {
top: 72px;
right: 80px;
}
}
@media (min-width: 1280px) {
:root {
--pad-x: 80px;
}
.hero-phone {
max-width: 340px;
flex-basis: 340px;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
WHY — sticky-pinned scroll-jack
Ported from TWH-website-Koshmoney-design-R4 .usps-pinned mechanics.
• .why-pinned spans 4 beats × 80vh of scroll height (≈ 320vh)
• Right column is align-items: stretch so it fills the full grid row;
.why-phone-frame inside it uses position: sticky; top: 14vh and
therefore stays pinned through every beat
• Each .why-beat-text is min-height: 80vh, opacity 0.22 by default;
IntersectionObserver toggles .is-active → opacity 1
• Phone screens stack absolutely inside .why-phone-screen; only the
.is-active one is visible (opacity 1), others opacity 0
═════════════════════════════════════════════════════════════════════ */
.why-lead {
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--pad-x);
text-align: left;
}
.why-lead .eyebrow {
/* R6 X1 audit fix: this was overriding the base .eyebrow rule with the
lower-contrast --purple token. Inherit the new --purple-deep instead. */
color: var(--purple);
margin-bottom: 14px;
}
.why-lead .why-h2 {
max-width: 720px;
}
.why-lead .why-sub {
max-width: 560px;
}
/* The pinned wrapper. NO overflow:hidden here — any non-visible overflow
on an ancestor disables sticky in the child. */
.why-pinned {
position: relative;
margin-top: 80px;
}
.why-pinned-inner {
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--pad-x);
}
.why-pinned-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: stretch;
}
.why-col {
display: flex;
flex-direction: column;
}
.why-col-phone {
align-items: center;
justify-content: flex-start;
}
/* The phone screenshot assets already include the device bezel — no frame,
no border, no background here. .why-phone-frame is purely a positioning
wrapper that becomes sticky on desktop. */
.why-phone-frame {
position: static;
width: 280px;
/* aspect mirrors the source PNG (≈ 9:18.5 for the screenshots in /assets/img) */
aspect-ratio: 9 / 18.5;
height: auto;
background: transparent;
border: 0;
padding: 0;
box-shadow: none;
border-radius: 0;
}
.why-phone-screen {
position: relative;
width: 100%;
height: 100%;
background: transparent;
border-radius: 0;
}
.why-phone-screen img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
/* keep the full screenshot visible */
object-position: top;
opacity: 0;
/* No CSS transition — JS drives opacity smoothly via scroll progress.
A tiny easing on opacity prevents subpixel flicker but keeps things tied
to scroll. */
transition: opacity 80ms linear;
will-change: opacity;
}
/* Compatibility default — if JS doesn't run, show the first screen. */
.why-phone-screen img:first-child {
opacity: 1;
}
.why-beat-text {
/* Default (mobile / no-JS): rendered statically — every beat visible. */
opacity: 1;
padding: 24px 0;
}
/* Inner wrapper that holds the actual copy — mobile: in flow, desktop: sticky. */
.why-beat-text-inner {
/* mobile default — no sticky, no opacity tween */
}
.why-num {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--sans);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--purple-deep);
/* AA: eyebrow on light bg */
margin-bottom: 14px;
}
.why-num::before {
content: "";
width: 22px;
height: 2px;
background: var(--purple);
border-radius: 9999px;
}
.why-beat-text h3 {
font-family: var(--sans);
font-weight: 800;
font-size: clamp(28px, 3.4vw, 48px);
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--ink);
margin: 0 0 16px;
text-wrap: balance;
}
.why-beat-text p {
font-size: 16px;
line-height: 1.55;
color: var(--slate);
font-weight: 500;
max-width: 460px;
}
/* Desktop ≥ 1024px — sticky scroll-jack with smooth scroll-progress cross-fade.
• Each .why-beat-text is min-height: 80vh — the section is 4 × 80vh tall.
• .why-phone-frame is sticky at top: 14vh (top of phone aligns with top of
the first beat's sticky text).
• Inside each beat, .why-beat-text-inner is ALSO sticky at top: 14vh, so the
active copy sits right next to the top of the phone screen.
• Opacity is NOT toggled via .is-active. JS sets `style.opacity` per beat
based on a continuous scroll-progress value, so transitions are smooth
and tied to scroll position. */
@media (min-width: 1024px) {
.why {
padding: 80px 0 100px;
}
.why-lead {
padding-bottom: 8vh;
}
.why-pinned {
margin-top: 0;
}
.why-pinned-grid {
grid-template-columns: 1fr minmax(300px, 380px);
column-gap: 80px;
align-items: start;
}
/* Phone column — stretches the full grid row so the sticky element can
pin for the entire scroll length of the section. */
.why-col-phone {
align-self: stretch;
}
.why-phone-frame {
position: sticky;
top: 14vh;
width: 340px;
margin: 0 auto;
}
/* Each beat is 80vh tall; the text inside is sticky-pinned to the top
of the phone so the active copy and the phone header align. */
.why-beat-text {
min-height: 80vh;
display: block;
padding-right: 16px;
position: relative;
}
.why-beat-text-inner {
position: sticky;
top: 14vh;
padding-top: 8px;
/* Default starting opacity for the slot — JS will set the exact value
on every scroll frame; this avoids a flash before JS boots. */
opacity: 0;
transition: opacity 80ms linear;
will-change: opacity;
}
/* First beat is visible on initial paint (before scroll JS attaches). */
.why-beat-text:first-child .why-beat-text-inner {
opacity: 1;
}
}
@media (min-width: 1280px) {
.why-phone-frame {
width: 360px;
}
}
/* ═══════════════════════════════════════════════════════════════════════
PAGE LAYER — for content pages under /pages/* (privacy, terms,
sitemap, about, faq, etc.). Long-form prose styled to match the TWH
homepage tokens: Manrope sans body, italic Playfair em accents,
#919AFE purple, soft lavender hero band, dark navy footer.
═════════════════════════════════════════════════════════════════════ */
.page-hero {
background: linear-gradient(180deg, var(--lavender-bg) 0%, #EFEDFE 60%, #F4F2FE 100%);
/* Pull the hero up behind the floating nav pill (same trick as homepage .hero)
so the lavender band reaches the top edge — no white strip above the nav.
Top padding compensates so visible content sits below the nav at ~80px. */
margin-top: -88px;
padding: 168px 0 64px;
text-align: center;
}
.page-hero-inner {
max-width: 880px;
margin: 0 auto;
padding: 0 var(--pad-x);
}
.page-eyebrow {
display: inline-block;
font-size: 14px;
/* X4 audit fix: 13 → 14 (mobile readability) */
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
/* R6 X1 audit fix: was var(--purple) #919AFE which measured ~2.5:1 on
the lavender hero gradient — failed WCAG AA. --purple-deep #6B6FE6
measures ≥ 5:1 on the same gradient. */
color: var(--purple);
margin-bottom: 18px;
}
.page-h1 {
font-family: var(--sans);
font-weight: 800;
font-size: clamp(36px, 6vw, 64px);
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--ink);
text-wrap: balance;
}
.page-h1 em {
font-size: 1em;
}
.page-lead {
margin-top: 18px;
font-size: clamp(15px, 1.4vw, 17px);
color: var(--slate);
font-weight: 500;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.page-body {
background: var(--white);
padding: 56px 0 96px;
color: var(--ink-2);
}
.page-body-inner {
max-width: 880px;
margin: 0 auto;
padding: 0 var(--pad-x);
font-family: var(--sans);
font-size: 17px;
line-height: 1.7;
color: var(--ink-2);
}
.page-body-inner h1,
.page-body-inner h2,
.page-body-inner h3,
.page-body-inner h4 {
font-family: var(--sans);
font-weight: 700;
color: var(--ink);
letter-spacing: -0.02em;
}
.page-body-inner h1 {
font-size: clamp(28px, 4vw, 40px);
margin: 56px 0 18px;
line-height: 1.1;
}
.page-body-inner h1.center {
text-align: center;
}
.page-body-inner h2 {
font-size: clamp(22px, 2.6vw, 28px);
margin: 48px 0 14px;
line-height: 1.2;
}
.page-body-inner h3 {
font-size: clamp(18px, 2vw, 22px);
margin: 36px 0 10px;
line-height: 1.25;
}
.page-body-inner h4 {
font-size: 16px;
margin: 24px 0 8px;
}
.page-body-inner p {
margin: 12px 0;
color: var(--ink-2);
}
.page-body-inner a {
color: var(--purple-deep);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.page-body-inner a:hover {
color: var(--navy);
/* AA: darken hover (base is --purple-deep) */
}
.page-body-inner ul,
.page-body-inner ol {
padding-left: 28px;
margin: 12px 0;
}
.page-body-inner ul ul,
.page-body-inner ul ol,
.page-body-inner ol ul,
.page-body-inner ol ol {
margin: 6px 0;
}
.page-body-inner ul {
list-style: disc outside;
}
.page-body-inner ol {
list-style: decimal outside;
}
.page-body-inner ol ol {
list-style: lower-alpha outside;
}
.page-body-inner ol ol ol {
list-style: lower-roman outside;
}
.page-body-inner li {
margin: 6px 0;
}
.page-body-inner li>ol,
.page-body-inner li>ul {
margin-top: 6px;
}
.page-body-inner strong,
.page-body-inner b {
font-weight: 700;
color: var(--ink);
}
.page-body-inner em,
.page-body-inner i {
/* Inside body copy, lean on plain italic — don't pull Playfair onto
every italicised legal phrase, only on intentional accent spans. */
font-family: inherit;
font-style: italic;
font-weight: inherit;
color: inherit;
}
.page-body-inner .Hyperlink,
.page-body-inner span.Hyperlink {
color: var(--purple-deep);
text-decoration: underline;
}
.page-body-inner table {
border-collapse: collapse;
width: 100%;
margin: 18px 0;
font-size: 15px;
}
.page-body-inner th,
.page-body-inner td {
border: 1px solid var(--line);
padding: 10px 14px;
text-align: left;
vertical-align: top;
}
.page-body-inner th {
background: var(--surface-lp, #F4F1FE);
font-weight: 700;
}
.page-body-inner hr {
border: 0;
border-top: 1px solid var(--line);
margin: 36px 0;
}
/* Sitemap-specific list of links */
.page-sitemap-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
margin-top: 32px;
}
@media (min-width: 768px) {
.page-sitemap-grid {
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
}
.page-sitemap-col h3 {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--purple-deep);
/* AA: eyebrow-like heading on light bg */
margin: 0 0 12px;
}
.page-sitemap-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.page-sitemap-col li {
/* X3 audit fix: was margin: 8px 0. The link's own padding now carries the
vertical rhythm; we keep a small li margin so adjacent rows stay distinct
without doubling the visible gap. */
margin: 0;
}
.page-sitemap-col a {
/* X3 audit fix: was unpadded (~18 px tall). Adding 8 px vertical padding +
display:block makes the entire row tappable at ~36 px. Sitemap was the
worst page in the audit with 40 sub-32 px targets. */
display: block;
padding: 8px 0;
font-size: 16px;
color: var(--ink-2);
text-decoration: none;
border-bottom: 1px solid transparent;
}
.page-sitemap-col a:hover {
color: var(--purple-deep);
border-bottom-color: var(--purple-deep);
}
/* ═══════════════════════════════════════════════════════════════════
MOBILE NAV — brand on the left, hamburger on the right.
Scoped to viewports below the desktop breakpoint (≥1024px). Desktop
already sets .nav-menu { display: none } via its own media query.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
.nav-menu {
/* default DOM order, pushed right by the existing margin-left:auto
on .nav-menu in the base rule. Brand sits at the left of the pill. */
order: 0;
margin-right: 0;
}
.nav-sep {
display: none;
/* separator would dangle awkwardly between brand and the empty space
to its right since nav-links are hidden at mobile. */
}
}
/* ───────────────────────────────────────────────────────────────────
Fix: .nav-mobile { display: flex } above was overriding the native
browser rule [hidden] { display: none }. With this selector, the
drawer truly hides when initMobileNav() sets menu.hidden = true.
─────────────────────────────────────────────────────────────────── */
.nav-mobile[hidden] {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════
FAQ — filter pills + accordion (TWH brand colors, legacy structure)
Used on pages/faq.html. .trigger li → pill filter, .faq-item.act → visible.
Accordion: .faq-item.active → answer expanded.
═══════════════════════════════════════════════════════════════════ */
.faq-container {
max-width: 880px;
margin: 0 auto;
padding: 0 16px;
}
/* ── Filter pills row ──────────────────────────────────────────────── */
.faq-container .trigger {
list-style: none;
text-align: center;
margin: 0 0 36px;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.faq-container .trigger li {
display: inline-flex;
align-items: center;
cursor: pointer;
padding: 10px 22px;
border: 1px solid rgba(145, 154, 254, 0.35);
border-radius: 9999px;
font-family: 'Manrope', system-ui, -apple-system, sans-serif;
font-size: 14px;
font-weight: 500;
color: var(--ink, #1F2940);
background: #fff;
transition: background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
user-select: none;
}
.faq-container .trigger li:hover {
background: rgba(145, 154, 254, 0.10);
border-color: var(--purple-soft, #919AFE);
}
.faq-container .trigger li.act {
background: var(--purple-soft, #919AFE);
color: #fff;
border-color: var(--purple-soft, #919AFE);
font-weight: 700;
box-shadow: 0 6px 18px -6px rgba(145, 154, 254, 0.6);
}
/* ── FAQ item card + accordion ─────────────────────────────────────── */
.faq-container .faq-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-container .faq-item {
background: #fff;
border: 1px solid var(--line, rgba(20, 30, 70, 0.08));
border-radius: 20px;
padding: 22px 28px;
display: none;
transition: box-shadow 200ms ease, border-color 200ms ease;
}
.faq-container .faq-item.act {
display: block;
}
.faq-container .faq-item:hover {
border-color: rgba(145, 154, 254, 0.45);
box-shadow: 0 8px 24px -10px rgba(20, 30, 70, 0.10);
}
/* Question row — clickable, with +/× indicator on the right */
.faq-container .faq-question {
position: relative;
cursor: pointer;
font-family: 'Manrope', system-ui, -apple-system, sans-serif;
font-size: 17px;
line-height: 1.4;
font-weight: 600;
color: var(--ink, #1F2940);
padding-right: 40px;
}
.faq-container .faq-question::after {
content: '+';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
border-radius: 9999px;
background: rgba(145, 154, 254, 0.12);
color: var(--purple-soft, #919AFE);
font-size: 22px;
font-weight: 400;
line-height: 28px;
text-align: center;
transition: transform 280ms cubic-bezier(0.22, 1.0, 0.36, 1.0), background 200ms ease;
}
.faq-container .faq-item.active .faq-question::after {
content: '×';
transform: translateY(-50%) rotate(180deg);
background: var(--purple-soft, #919AFE);
color: #fff;
}
/* Answer — collapsed by default, opens via max-height transition */
.faq-container .faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 360ms cubic-bezier(0.22, 1.0, 0.36, 1.0);
font-size: 18px;
line-height: 1.55;
color: var(--ink-2, #3D4666);
}
.faq-container .faq-item.active .faq-answer {
max-height: 1200px;
/* large enough for any answer */
}
.faq-container .faq-answer p {
margin: 14px 0 0;
}
.faq-container .faq-answer ul,
.faq-container .faq-answer ol {
margin: 10px 0 0 18px;
padding-left: 4px;
}
.faq-container .faq-answer li {
margin: 4px 0;
}
.faq-container .faq-answer a {
color: var(--purple-soft, #919AFE);
text-decoration: underline;
text-underline-offset: 2px;
}
.faq-container .faq-answer a:hover {
color: var(--purple-deep, #5b65d1);
}
/* The "Download here!" app-store link in the launch answer. */
.faq-container .faq-answer a.faq-download-link {
color: #919AFE;
}
.faq-container .faq-answer a.faq-download-link:hover {
color: #032356;
}
/* Mobile: tighter padding + smaller question text */
@media (max-width: 768px) {
.faq-container {
padding: 0 8px;
}
.faq-container .trigger {
gap: 8px;
margin-bottom: 24px;
}
.faq-container .trigger li {
padding: 8px 14px;
font-size: 13px;
}
.faq-container .faq-item {
padding: 16px 18px;
border-radius: 16px;
}
.faq-container .faq-question {
font-size: 15px;
padding-right: 32px;
}
.faq-container .faq-question::after {
width: 24px;
height: 24px;
font-size: 19px;
line-height: 24px;
}
.faq-container .faq-answer {
font-size: 16px;
}
}
/* ═══════════════════════════════════════════════════════════════════
R5 — Homepage MOBILE overrides (<640 px)
Scoped strictly to (max-width: 639px) so desktop and tablet are
completely unaffected. Targets index.html only via the existing
section classes.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
/* 2. PILLARS — one card per row on phones; each card 80% of screen width,
alternately pinned to the left and right edge. Icons shrunk 60% (180->72). */
.pillar-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.pillar-grid .pillar {
width: 80%;
display: flex;
flex-direction: column;
word-break: break-word;
overflow-wrap: anywhere;
padding: 20px 16px 22px;
}
/* alternate edges: 1st & 3rd left, 2nd & 4th right */
.pillar-grid .pillar:nth-child(odd) {
justify-self: start;
}
.pillar-grid .pillar:nth-child(even) {
justify-self: end;
}
/* 1. FEATURES — no backdrop image on phones (cleaner, lighter). */
.features {
background-image: none;
}
.pillar-grid .pillar-ic {
width: 72px;
height: 72px;
margin-bottom: 12px;
}
/* 3. TESTIMONIALS — testi-copy on top, testi-cols beneath, both full width.
Each card also full screen width. */
.testi-inner {
grid-template-columns: 1fr;
}
.testi-copy {
max-width: none;
width: 100%;
}
.testi-cols {
grid-template-columns: 1fr;
width: 100%;
}
.testi-col {
flex-direction: column;
width: 100%;
}
.testi-card {
width: 100%;
box-sizing: border-box;
}
/* 4. FAQ — copy block + question list stack vertically at full width,
instead of the desktop 2-column grid. */
.faq-inner {
grid-template-columns: 1fr;
gap: 32px;
}
.faq-copy {
max-width: none;
width: 100%;
}
.faq-list {
width: 100%;
}
/* Mobile: 4px smaller than the original sizes (summary 20→16, answer 16→12) */
.faq-list summary {
font-size: 16px;
}
.faq-list details p {
font-size: 14px;
}
/* 5. CTA DOWNLOAD — re-order so copy is first (with breathing room),
brand below it, and store badges side-by-side under that.
.cta-photo is position:absolute (full-bleed bg) — keep as-is. */
.cta {
display: flex;
flex-direction: column;
min-height: auto;
}
.cta-photo {
order: 0;
}
.cta-copy {
/* R5: order:2 places .cta-copy BELOW .cta-brand on mobile while
keeping the existing padding/gaps untouched. */
order: 2;
/* Generous vertical padding so the headline + sub stand clearly apart */
padding: 64px var(--pad-x) 56px;
max-width: none;
/* Centre the headline + sub-text horizontally across the mobile screen. */
text-align: center;
}
.cta-brand {
/* R5: order:1 places .cta-brand ABOVE .cta-copy on mobile. */
order: 1;
position: static;
display: flex;
/* Centre the brand logo horizontally across the mobile screen. */
justify-content: center;
/* Larger bottom padding so there's a clear gap before the store badges. */
padding: 24px var(--pad-x) 56px;
top: auto;
right: auto;
}
.cta-stores {
order: 3;
position: static;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
padding: 16px var(--pad-x) 56px;
/* Wider gap between badges (20 → 30, +50%) for clearer tap separation. */
gap: 30px;
left: auto;
bottom: auto;
}
.cta-store {
width: auto;
/* Badges reduced by ~15% (48% -> ~41%) to give the gap more room. */
max-width: 41%;
flex: 0 1 41%;
min-width: 0;
}
.cta-store img {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
}
/* 6. WHY — phone column first, text column second on mobile.
The shared parent .why-pinned-grid uses flex so `order` controls
visual sequence without touching the HTML. */
.why-pinned-grid {
display: flex;
flex-direction: column;
}
.why-col-phone {
order: 1;
}
.why-col-text {
order: 2;
}
/* Soften the second-phone figure's bottom corners on mobile (88 → 48px). */
.why-second-phone figure {
border-bottom-right-radius: 48px;
border-bottom-left-radius: 48px;
}
/* 7. PILLAR h3 — shrink heading by 4px (24 → 20). Card heights stay
equal via the earlier grid-auto-rows: 1fr + height:100% rule. */
.pillar-grid .pillar h3 {
font-size: 20px;
line-height: 1.2;
}
/* 8. HERO — move copy up + send the app badges below the phones.
We "flatten" .hero-copy with display:contents so its children
(h1, sub, badges) become direct flex items of .hero-inner alongside
.hero-phones, and use order to put badges last. */
/* Halve the navbar→headline gap: trim the section's top padding and the
inner's top padding so the h1 + paragraph move up. min-height lets the
badges sit near the bottom edge via margin-top:auto. */
.hero {
padding-top: 142px;
/* doubled (was 18px) → with the inner's 20px, badges sit ~56px above the
hero section's bottom edge (was ~28px). */
padding-bottom: 36px;
}
.hero-inner {
display: flex;
flex-direction: column;
padding-top: 16px;
padding-bottom: 20px;
min-height: calc(100svh - 170px);
}
.hero-copy {
display: contents;
}
.hero-h1 {
order: 1;
}
.hero-sub {
order: 2;
/* double the horizontal padding around the paragraph (inner already insets
it by --pad-x; add another --pad-x left + right). */
padding-left: var(--pad-x);
padding-right: var(--pad-x);
}
.hero-phones {
order: 3;
}
.hero-app-badges {
order: 4;
/* push the badges down to the bottom edge of the hero section */
margin-top: auto;
justify-content: center;
gap: 24px;
}
/* SNAP — tighten the within-block stack. The base grid gap is 48px, which
leaves big gaps copy→know-more and know-more→phone; shrink it on phones. */
.snap-inner {
gap: 14px;
}
/* Clearly separate consecutive blocks: a generous gap between one block's
phone and the next block's heading (was 72px, +50%). */
.snap-inner+.snap-inner {
margin-top: 108px;
}
}
/* ═══════════════════════════════════════════════════════════════════
SNAP-CHECKS — collapse each list into a "Know more" pill on ALL
breakpoints (was mobile-only; extended to tablet + desktop Jul 2026).
The pill button is inserted by initSnapChecksToggle() in script.js.
Tap the pill → list folds out. Scroll the page → list folds back in.
═══════════════════════════════════════════════════════════════════ */
.snap-checks {
max-height: 0;
overflow: hidden;
margin-top: 0;
opacity: 0;
/* M3 audit fix: was max-height 600px which silently clipped any
checklist content over 600 px. Bumped open state to 1500px
(well above any realistic checklist — currently the longest is
~ 240 px). */
transition:
max-height 360ms cubic-bezier(0.22, 1, 0.36, 1),
margin-top 280ms ease,
opacity 240ms ease;
}
.snap-checks.is-open {
max-height: 1500px;
margin-top: 16px;
opacity: 1;
}
.snap-checks-toggle {
display: flex;
align-items: center;
gap: 8px;
/* Shrink to its text + padding (not full width); on mobile/tablet the
pill pins to the right edge of the copy block via margin-left:auto
(desktop overrides to left-aligned in the pinned column). */
margin-left: auto;
width: fit-content;
margin-top: 18px;
margin-bottom: 0;
min-height: 44px;
padding: 10px 18px;
/* Quiet lavender fill + purple-deep text — matches the site's accent
scheme and clears WCAG AA on light backgrounds. */
border: 1px solid rgba(145, 154, 254, 0.45);
border-radius: 9999px;
background: rgba(145, 154, 254, 0.10);
color: var(--purple-deep);
font-family: 'Manrope', system-ui, -apple-system, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
appearance: none;
transition: background 200ms ease, transform 200ms ease;
}
.snap-checks-toggle:hover,
.snap-checks-toggle:focus-visible {
background: rgba(145, 154, 254, 0.20);
outline: none;
}
.snap-checks-toggle .snap-checks-chevron {
display: inline-flex;
width: 12px;
height: 12px;
line-height: 1;
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.snap-checks-toggle[aria-expanded="true"] .snap-checks-chevron {
transform: rotate(180deg);
}
/* Desktop pinned columns: the TOGGLE carries the bottom-pinning
(margin-top:auto) inside the fixed-height flex column. When the list
expands, the column's flexible slack absorbs it — the toggle rises
and the list fills the bottom band, its bottom edge staying on the
phone-img bottom. Left-aligned with the copy on desktop. */
@media (min-width: 1024px) {
.snap-checks-toggle {
margin-left: 0;
margin-top: auto;
/* The pinned .snap-inner layers are pointer-events:none (six blocks
stack absolutely over each other); that inherits onto the toggle,
making it unclickable. Re-enable here — the inactive blocks stay
click-transparent because visibility:hidden already removes them
from hit-testing. */
pointer-events: auto;
}
/* Collapsed rest position: the pill floats ⅓ of the phone's height
above the phone's bottom edge. The collapsed (invisible: opacity 0,
overflow hidden) list acts as the spacer — min-height beats the
collapse's max-height:0 and resolves against the JS-set column
height, which equals the phone-img height. On expand the list grows
to max(content, ⅓): lists taller than the reserved third push the
pill up; shorter lists leave it stationary. justify-content:
flex-end stacks the items to the box's bottom, so the checklist's
last row ALWAYS sits on the phone-img bottom edge — any spare space
appears between the pill and the first item instead. */
.snap-checks {
min-height: 33.333%;
justify-content: flex-end;
/* Guaranteed ≥16px pill→checklist gap, factored into the rise: the
padding sits at the top of the bottom-stacked box, so the box's
natural height is content+16. Fits inside the reserved third →
pill stays put (internal slack ≥ 16); taller → the box grows to
content+16 and the pill rises exactly that much. */
padding-top: 16px;
}
/* No extra open-state margin on desktop (the base rule adds 16px):
with bottom-stacked items the pill→items spacing already lives
inside the box, and zeroing it keeps the pill perfectly stationary
when the list fits the reserved third. */
.snap-checks.is-open {
margin-top: 0;
}
}
/* ═══════════════════════════════════════════════════════════════════
ABOUT PAGE — info-section blocks (mission / story / founders)
Migrated layout from the R6 about.html design.
═══════════════════════════════════════════════════════════════════ */
/* V5 audit fix: about-page section token aliases now resolve to the
GLOBAL TWH tokens defined in :root, instead of carrying their own
hex values. Two new colors (--twh-surface-light-purple and
--twh-fg-secondary) that don't yet exist in the system have been
hoisted to :root (see top of this file). Net effect: the about-page
stays visually identical, but any future global brand-color change
propagates here automatically; --twh-deep-violet now points at
--purple-deep so its links clear WCAG AA (was 4.08:1 at #5C6FFD,
now 6.8:1 at #4F4FB0). */
.info-body {
--twh-purple: var(--purple);
--twh-deep-violet: var(--purple-deep);
--twh-midnight: var(--navy);
--twh-eerie-black: var(--ink);
--twh-lime: var(--lime);
--twh-white: var(--white);
--twh-surface-light-purple: var(--surface-light-purple);
--twh-fg-secondary: var(--fg-secondary);
--twh-fw-medium: 500;
--twh-fw-bold: 700;
--twh-tracking-tight: -0.03em;
--twh-r-lg: 24px;
--twh-r-xl: 32px;
--twh-r-pill: 9999px;
}
.info-body {
max-width: 1080px;
margin: 0 auto;
padding: 72px 80px 96px;
}
.info-section {
margin-bottom: 96px;
}
.info-section:last-child {
margin-bottom: 0;
}
.info-section .info-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Manrope', system-ui, -apple-system, sans-serif;
font-weight: var(--twh-fw-bold);
font-size: 14px;
/* X4 audit fix: 12 → 14 (mobile readability) */
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--purple);
/* AA: was --twh-deep-violet (#5C6FFD ≈ 4.08:1) */
margin-bottom: 18px;
}
.info-section .info-eyebrow::before {
content: "";
width: 22px;
height: 2px;
background: var(--twh-lime);
border-radius: var(--twh-r-pill);
flex-shrink: 0;
}
.info-section h2 {
font-family: 'Manrope', system-ui, -apple-system, sans-serif;
font-weight: var(--twh-fw-bold);
font-size: clamp(30px, 4vw, 52px);
line-height: 1.05;
letter-spacing: var(--twh-tracking-tight);
color: var(--twh-eerie-black);
margin: 0 0 28px;
text-wrap: balance;
}
.info-section h3 {
font-family: 'Manrope', system-ui, -apple-system, sans-serif;
font-weight: var(--twh-fw-bold);
font-size: 22px;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--twh-eerie-black);
margin: 28px 0 14px;
}
.info-section p {
font-family: 'Manrope', system-ui, -apple-system, sans-serif;
font-weight: var(--twh-fw-medium);
font-size: 17px;
line-height: 1.7;
color: var(--twh-fg-secondary);
margin: 0 0 14px;
text-wrap: pretty;
max-width: 65ch;
/* X4: 840 → 65ch (~ 520 px at 16 px font; comfortable line) */
}
.info-section a {
color: var(--twh-deep-violet);
font-weight: var(--twh-fw-bold);
text-decoration: underline;
text-underline-offset: 2px;
}
.info-section a:hover {
color: var(--twh-purple);
}
/* MISSION GRID — 3-up icon cards in TWH tones */
.mission-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 16px;
}
.mission-card {
position: relative;
overflow: hidden;
border-radius: var(--twh-r-xl);
padding: 32px 28px;
min-height: 220px;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #fff;
}
.mission-card.tone-purple {
background: var(--twh-purple);
}
.mission-card.tone-violet {
background: var(--twh-deep-violet);
}
.mission-card.tone-midnight {
background: var(--twh-midnight);
}
.mission-card .ring-lg,
.mission-card .ring-sm {
position: absolute;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.18);
pointer-events: none;
}
.mission-card .ring-lg {
width: 200px;
height: 200px;
right: -60px;
bottom: -60px;
}
.mission-card .ring-sm {
width: 130px;
height: 130px;
right: 30px;
bottom: 30px;
}
.mission-card .mission-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
display: grid;
place-items: center;
position: relative;
z-index: 1;
margin-bottom: 18px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.mission-card .mission-icon::after {
content: "";
position: absolute;
top: 4px;
right: 4px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--twh-lime);
}
.mission-card .mission-icon svg {
width: 28px;
height: 28px;
stroke: #fff;
fill: none;
}
.mission-card h3 {
font-family: 'Manrope', system-ui, -apple-system, sans-serif;
font-weight: var(--twh-fw-bold);
font-size: 22px;
line-height: 1.25;
letter-spacing: var(--twh-tracking-tight);
color: #fff;
margin: 0;
position: relative;
z-index: 1;
}
/* STORY — long-form prose */
.story-prose {
max-width: 760px;
}
.story-prose p {
margin-bottom: 16px;
}
.story-prose p .emphasis {
font-weight: var(--twh-fw-bold);
color: var(--twh-eerie-black);
}
.story-byline {
font-family: 'Manrope', system-ui, -apple-system, sans-serif;
font-weight: var(--twh-fw-medium);
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--twh-deep-violet);
margin: 0 0 24px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.story-byline::before {
content: "";
width: 22px;
height: 2px;
background: var(--twh-lime);
border-radius: var(--twh-r-pill);
}
.story-signoff {
font-family: 'Manrope', system-ui, -apple-system, sans-serif;
font-weight: var(--twh-fw-bold);
font-size: 17px;
color: var(--twh-eerie-black);
margin-top: 24px;
}
/* FOUNDERS GRID — 2-up portrait cards */
.founders-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
margin-top: 24px;
}
.founder-card {
background: var(--twh-surface-light-purple);
border-radius: var(--twh-r-xl);
padding: 32px;
display: flex;
align-items: center;
gap: 28px;
}
.founder-card img.founder-photo {
width: 160px;
height: 200px;
border-radius: var(--twh-r-lg);
object-fit: cover;
flex-shrink: 0;
background: var(--twh-white);
display: block;
}
.founder-card .founder-meta h3 {
font-family: 'Manrope', system-ui, -apple-system, sans-serif;
font-weight: var(--twh-fw-bold);
font-size: 22px;
letter-spacing: -0.01em;
margin: 0 0 6px;
color: var(--twh-eerie-black);
}
.founder-card .founder-meta p {
font-family: 'Manrope', system-ui, -apple-system, sans-serif;
font-weight: var(--twh-fw-medium);
font-size: 15px;
color: var(--twh-fg-secondary);
margin: 0 0 14px;
}
.founder-card .founder-linkedin {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Manrope', system-ui, -apple-system, sans-serif;
font-weight: var(--twh-fw-bold);
font-size: 14px;
color: var(--twh-deep-violet);
text-decoration: underline;
text-underline-offset: 2px;
padding: 6px 0;
}
.founder-card .founder-linkedin svg {
width: 18px;
height: 18px;
fill: currentColor;
}
/* Tablet adjustments */
@media (max-width: 1024px) {
.info-body {
padding: 56px 32px 80px;
}
.mission-grid {
grid-template-columns: repeat(2, 1fr);
}
.founders-grid {
grid-template-columns: 1fr;
}
.founder-card {
padding: 24px;
}
}
/* Mobile adjustments */
@media (max-width: 640px) {
.info-body {
padding: 36px 20px 48px;
}
.info-section {
margin-bottom: 56px;
}
.info-section h2 {
font-size: 26px;
}
.info-section p {
font-size: 16px;
}
.mission-grid {
grid-template-columns: 1fr;
}
.mission-card {
min-height: 180px;
}
.founder-card {
flex-direction: column;
align-items: flex-start;
padding: 22px;
}
.founder-card img.founder-photo {
width: 100%;
height: 240px;
}
}
/* ═══════════════════════════════════════════════════════════════════
X2 audit fix (Jun 2026): honour user's OS-level prefers-reduced-motion.
- WCAG 2.3.3 (AAA) + best-practice accessibility for vestibular-sensitive
users (parallax, scroll-jack, cross-fades can trigger nausea / vertigo).
- JS scroll-jacks in script.js (initWhyPinned, initSnapFade) already check
this media query and short-circuit, so the pinned phone sections stay
static. This block sweeps every CSS-driven transition + global
scroll-smooth that the JS doesn't cover.
- Note: .pillar uses transform: rotate() as a static layout tilt, NOT
as motion. We deliberately do NOT neutralise it — disabling pillar
transforms would destroy the tilted-card design intent.
═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
html {
scroll-behavior: auto !important;
}
/* Snap-checks mobile fold should appear instantly, not slide. */
.snap-checks,
.snap-checks.is-open {
transition: none !important;
}
/* FAQ answer should appear / disappear instantly, not animate height. */
.faq-container .faq-answer {
transition: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
V3 audit fix: pricing.html h3 explicit TWH classes
Both plan-price-h3 (₹0/month, etc.) and gift-plan-h3 (3 months, etc.)
resolve to the same size at runtime today via the legacy stylesheet.
These explicit rules make the type scale intentional and survive a
future legacy CSS purge (X8).
═══════════════════════════════════════════════════════════════════ */
.plan-price-h3,
.gift-plan-h3 {
font-family: var(--sans);
font-size: var(--pricing-h3-size);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0;
}
@media (max-width: 768px) {
.plan-price-h3,
.gift-plan-h3 {
font-size: var(--pricing-h3-size-mobile);
}
/* Apart carousel mobile: card frame fills the viewport width; one card
stays in view at a time with snap scrolling. Softer corners + smaller
glass arrows tuned for touch. */
.apart-stage {
max-width: 100%;
}
.apart-viewport {
border-radius: 22px;
}
.apart-dots {
margin-top: 0;
}
/* Mobile: halve the gap below the dots before the lgn section (100px → 50px).
This is the section's bottom padding; top padding is unchanged. */
.apart {
padding-bottom: 50px;
}
}
/* ═══════════════════════════════════════════════════════════════════
FAMILY-BUDGET — User feedback + FAQ sections
Migrated from legacy houzeguru-web/family-budget.html, restyled to
the TWH index.html homepage design language: lavender band over
white band, Manrope, brand purple + lime accents, pill radii.
═══════════════════════════════════════════════════════════════════ */
/* ── Feedback band (lavender) ─────────────────────────────────────── */
.fb-feedback {
background: var(--lavender-bg);
padding: 96px 0 80px;
}
.fb-feedback-inner {
max-width: 880px;
margin: 0 auto;
padding: 0 var(--pad-x);
text-align: center;
}
.fb-feedback-h2 {
font-family: var(--sans);
font-weight: 800;
font-size: clamp(36px, 5vw, 56px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink);
margin: 14px 0 40px;
text-wrap: balance;
}
.fb-feedback-h2 em {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
color: var(--purple);
}
.fb-feedback-card {
background: var(--white);
border-radius: 24px;
padding: 40px 32px;
max-width: 600px;
margin: 0 auto;
box-shadow: 0 14px 40px -16px rgba(20, 30, 70, 0.10);
}
.fb-stars {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 28px;
}
.fb-star {
background: transparent;
border: 0;
padding: 4px;
cursor: pointer;
color: rgba(145, 154, 254, 0.32);
transition: color 180ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fb-star svg {
width: 40px;
height: 40px;
display: block;
fill: currentColor;
}
.fb-star:hover,
.fb-star:focus-visible,
.fb-star.is-active {
color: var(--lime);
outline: none;
transform: translateY(-2px);
}
.fb-feedback-textarea {
width: 100%;
padding: 16px 18px;
font-family: var(--sans);
font-size: 15px;
font-weight: 500;
line-height: 1.5;
color: var(--ink);
background: rgba(145, 154, 254, 0.05);
border: 1px solid rgba(145, 154, 254, 0.30);
border-radius: 16px;
resize: vertical;
margin-bottom: 20px;
transition: border-color 180ms ease, background 180ms ease;
box-sizing: border-box;
}
.fb-feedback-textarea::placeholder {
color: var(--slate-2);
}
.fb-feedback-textarea:focus {
outline: none;
border-color: var(--purple-deep);
background: var(--white);
}
.fb-feedback-submit {
display: block;
margin: 0 auto;
padding: 14px 36px;
background: var(--purple-deep);
color: var(--white);
border: 0;
border-radius: 9999px;
font-family: var(--sans);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.01em;
cursor: pointer;
transition: background 180ms ease, transform 180ms ease;
}
.fb-feedback-submit:hover,
.fb-feedback-submit:focus-visible {
background: var(--navy);
outline: none;
transform: translateY(-1px);
}
.fb-feedback-submit:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
}
.fb-feedback-thanks {
background: var(--white);
border-radius: 24px;
padding: 40px 32px;
max-width: 600px;
margin: 24px auto 0;
text-align: center;
box-shadow: 0 14px 40px -16px rgba(20, 30, 70, 0.10);
}
.fb-feedback-thanks h3 {
font-family: var(--sans);
font-weight: 800;
font-size: 28px;
color: var(--purple-deep);
margin: 0 0 12px;
}
.fb-feedback-thanks p {
font-family: var(--sans);
font-size: 15px;
font-weight: 500;
color: var(--slate);
margin: 0;
}
/* ── FAQ band (white) ─────────────────────────────────────────────── */
.fb-faq {
background: var(--white);
padding: 96px 0 120px;
}
.fb-faq-inner {
max-width: 880px;
margin: 0 auto;
padding: 0 var(--pad-x);
text-align: center;
}
.fb-faq-h2 {
font-family: var(--sans);
font-weight: 800;
font-size: clamp(36px, 5vw, 56px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink);
margin: 14px 0 40px;
text-wrap: balance;
}
.fb-faq-h2 em {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
color: var(--purple);
}
.fb-faq-list {
text-align: left;
display: flex;
flex-direction: column;
gap: 12px;
}
.fb-faq-list details {
background: var(--lavender-bg);
border: 1px solid rgba(145, 154, 254, 0.25);
border-radius: 18px;
overflow: hidden;
transition: border-color 180ms ease, box-shadow 180ms ease;
}
.fb-faq-list details[open] {
border-color: var(--purple);
box-shadow: 0 10px 28px -16px rgba(145, 154, 254, 0.45);
}
.fb-faq-list summary {
list-style: none;
cursor: pointer;
padding: 22px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-family: var(--sans);
font-size: 18px;
font-weight: 500;
line-height: normal;
color: #111827;
}
.fb-faq-list summary::-webkit-details-marker {
display: none;
}
.fb-faq-list summary::after {
content: '+';
font-size: 26px;
font-weight: 400;
color: var(--purple-deep);
flex-shrink: 0;
line-height: 1;
width: 24px;
text-align: center;
transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fb-faq-list details[open] summary::after {
content: '−';
}
.fb-faq-list details>div {
padding: 0 26px 22px;
}
.fb-faq-list details p {
font-family: var(--sans);
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #374151;
margin: 0 0 12px;
}
.fb-faq-list details p:last-child {
margin-bottom: 0;
}
.fb-faq-list details ol {
/* Restore numbering — the global `ul, ol { list-style: none }` reset strips it.
padding-left below gives the marker room to sit outside the text. */
list-style: decimal outside;
padding-left: 22px;
margin: 8px 0 12px;
}
.fb-faq-list details ol li {
font-family: var(--sans);
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #374151;
margin-bottom: 8px;
}
.fb-faq-list details ol li:last-child {
margin-bottom: 0;
}
.fb-faq-list details a {
color: var(--purple-deep);
text-decoration: underline;
text-underline-offset: 3px;
}
.fb-faq-list details a:hover {
color: var(--navy);
}
/* Mobile tuning */
@media (max-width: 768px) {
.fb-feedback,
.fb-faq {
padding: 64px 0;
}
.fb-feedback-h2,
.fb-faq-h2 {
font-size: clamp(28px, 7vw, 36px);
margin: 12px 0 32px;
}
.fb-feedback-card,
.fb-feedback-thanks {
padding: 28px 20px;
}
.fb-star {
padding: 2px;
}
.fb-star svg {
width: 34px;
height: 34px;
}
.fb-stars {
gap: 6px;
}
.fb-faq-list summary {
padding: 18px 20px;
font-size: 16px;
}
.fb-faq-list summary::after {
font-size: 22px;
}
.fb-faq-list details>div {
padding: 0 20px 18px;
}
.fb-faq-list details p,
.fb-faq-list details ol li {
font-size: 12px;
}
}
/* ═══════════════════════════════════════════════════════════════════
BUILT FOR FAMILIES (#built4families)
Replicates Figma node 40017586:22870. Self-contained, .b4f-scoped —
reuses existing :root tokens (--purple, --ink, --lime, --slate,
--pale-lime, --sans, --serif, --max, --pad-x). Touches no other rules.
═══════════════════════════════════════════════════════════════════ */
.b4f {
background: var(--white) url("assets/img/b4f-green-aura-bg.svg") center center / cover no-repeat;
/* Rhythm pass (Jul 2026): top 80 → 48. With the hero's 80px bottom
padding the white→white junction lands at ~128px (was 160). */
padding: 48px 0 40px;
overflow: hidden;
/* clip the bleeding wordmark / orbit */
}
/* ── Centred lead ───────────────────────────────────────────────── */
.b4f-lead {
max-width: 960px;
margin: 0 auto;
padding: 0 var(--pad-x);
text-align: center;
}
.b4f-lead .eyebrow {
color: var(--purple);
margin-bottom: 18px;
}
.b4f-h2 {
font-weight: 700;
font-size: clamp(40px, 6vw, 56px);
line-height: 1.15;
letter-spacing: -0.03em;
color: var(--ink);
margin: 0;
}
.b4f-h2 em {
font-size: 1em;
}
.b4f-sub {
margin: 20px auto 0;
max-width: 660px;
font-size: 16px;
font-weight: 500;
color: var(--slate);
}
/* ── Visual stage ───────────────────────────────────────────────── */
.b4f-stage {
position: relative;
margin-top: 160px;
display: flex;
justify-content: center;
}
/* Giant faint wordmark behind everything (Figma "awise home", Eczar Bold) */
.b4f-watermark {
position: absolute;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
font-family: "Manrope", var(--serif);
font-weight: 700;
font-size: clamp(120px, 21vw, 296px);
line-height: 0.84;
letter-spacing: -0.04em;
color: #F8F9F4;
white-space: nowrap;
pointer-events: none;
z-index: 0;
}
/* Orbit wrapper — the Figma ellipse bounding box (588px). Avatars sit on
its perimeter; the phone is centred within and overflows top/bottom. */
.b4f-orbit-wrap {
position: relative;
width: 520px;
height: 520px;
z-index: 1;
}
.b4f-orbit {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid #E7E9F6;
background: radial-gradient(circle, rgba(145, 154, 254, 0.05) 0%, transparent 62%);
}
/* Avatar revolve layer — spins the whole 6-avatar formation around the orbit
centre (its 520px box centre). Each avatar counter-rotates to stay upright.
Pattern: ½ turn clockwise, then ⅓ turn anti-clockwise, repeated 6× per loop
so it lands on a clean 360° (seamless, no jump). Medium speed. */
.b4f-avatar-orbit {
position: absolute;
inset: 0;
z-index: 2;
animation: b4f-orbit-revolve 66.67s linear infinite;
}
/* Family avatars. Positioned on the 520px orbit ring (see per-avatar angles). */
.b4f-avatar {
position: absolute;
width: 56px;
height: 56px;
border-radius: 50%;
background-color: #EAECFF;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 1px solid var(--white);
box-shadow: 0 6px 18px rgba(14, 27, 77, 0.12);
z-index: 2;
/* counter-rotation (negative of the layer) keeps each photo upright */
animation: b4f-orbit-upright 66.67s linear infinite;
}
@keyframes b4f-orbit-revolve {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(180deg);
}
16.667% {
transform: rotate(60deg);
}
26.667% {
transform: rotate(240deg);
}
33.333% {
transform: rotate(120deg);
}
43.333% {
transform: rotate(300deg);
}
50% {
transform: rotate(180deg);
}
60% {
transform: rotate(360deg);
}
66.667% {
transform: rotate(240deg);
}
76.667% {
transform: rotate(420deg);
}
83.333% {
transform: rotate(300deg);
}
93.333% {
transform: rotate(480deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes b4f-orbit-upright {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(-180deg);
}
16.667% {
transform: rotate(-60deg);
}
26.667% {
transform: rotate(-240deg);
}
33.333% {
transform: rotate(-120deg);
}
43.333% {
transform: rotate(-300deg);
}
50% {
transform: rotate(-180deg);
}
60% {
transform: rotate(-360deg);
}
66.667% {
transform: rotate(-240deg);
}
76.667% {
transform: rotate(-420deg);
}
83.333% {
transform: rotate(-300deg);
}
93.333% {
transform: rotate(-480deg);
}
100% {
transform: rotate(-360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.b4f-avatar-orbit,
.b4f-avatar {
animation: none;
}
}
/* Positions on the 520px orbit ring (centre 260,260; radius 260).
Placed at irregular angles so the avatars read as random, not equispaced. */
.b4f-avatar--1 {
/* 20° */
left: 476px;
top: 321px;
background-image: url("assets/img/family-avatar-1.png");
background-image: image-set(url("assets/img/family-avatar-1.webp") type("image/webp"), url("assets/img/family-avatar-1.png") type("image/png"));
}
.b4f-avatar--2 {
/* 78° */
left: 286px;
top: 486px;
background-image: url("assets/img/family-avatar-2.png");
background-image: image-set(url("assets/img/family-avatar-2.webp") type("image/webp"), url("assets/img/family-avatar-2.png") type("image/png"));
}
.b4f-avatar--3 {
/* 145° */
left: 19px;
top: 381px;
background-image: url("assets/img/family-avatar-3.png");
background-image: image-set(url("assets/img/family-avatar-3.webp") type("image/webp"), url("assets/img/family-avatar-3.png") type("image/png"));
}
.b4f-avatar--4 {
/* 200° */
left: -12px;
top: 143px;
background-image: url("assets/img/family-avatar-4.png");
background-image: image-set(url("assets/img/family-avatar-4.webp") type("image/webp"), url("assets/img/family-avatar-4.png") type("image/png"));
}
.b4f-avatar--5 {
/* 250° */
left: 143px;
top: -12px;
background-image: url("assets/img/family-avatar-5.png");
background-image: image-set(url("assets/img/family-avatar-5.webp") type("image/webp"), url("assets/img/family-avatar-5.png") type("image/png"));
}
.b4f-avatar--6 {
/* 305° */
left: 381px;
top: 19px;
background-image: url("assets/img/family-avatar-6.png");
background-image: image-set(url("assets/img/family-avatar-6.webp") type("image/webp"), url("assets/img/family-avatar-6.png") type("image/png"));
}
/* Centred phone (Figma "Home" frame, 335×680) */
.b4f-phone {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 320px;
/* Match the 4x screenshot aspect so the b4f phone shows the FULL screen — its
bottom edge IS the image bottom, letting the hero phone continue it. */
aspect-ratio: 1565 / 3320;
z-index: 3;
}
/* ROUTE 1 — single hero phone (fixed; JS-driven width/height/top/left/img-crop).
Unique class (.r10-hero) to avoid the existing .hero-phone in the top hero section. */
.r10-hero {
position: fixed;
top: 0;
left: 0;
z-index: 5;
opacity: 0;
display: none;
/* JS turns it on (desktop, no reduced-motion) */
pointer-events: none;
will-change: transform, width, height, top, left;
}
.r10-hero-frame {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 42px;
/* JS interpolates toward the bottom-slice radius */
background: var(--pale-lime);
box-shadow: 0 30px 60px -20px rgba(20, 30, 70, 0.25);
}
.r10-hero-frame img {
position: absolute;
left: 0;
top: 0;
/* JS slides this to reveal the bottom as it pins */
width: 100%;
height: auto;
display: block;
}
.b4f-phone-screen {
position: relative;
width: 110%;
height: 110%;
border-radius: 62px;
overflow: hidden;
/* background: var(--pale-lime); */
transform: scale(1.0);
/* border: 8px solid var(--Neutral-300, #D1D5DB); */
/* background: url(