/* =========================================================
Amara Membership Site — responsive build from Figma
Breakpoints: Desktop (1464px+) / Tablet (1014–1463px) / Mobile (<=1013px)
(updated per the site-wide redesign — node-id=174-1558/174-1872/174-2186 —
which explicitly restated the breakpoint ranges; previously 1100/700.)
Font notes: Figma design specifies "Inter", "Instrument Sans" and
"Neue Montreal" (Neue Montreal is a licensed font not available on
Google Fonts — substituted with Inter throughout). Instrument Sans
was in the original Google Fonts but is never actually
referenced by any font-family in this file — dropped as dead weight
when the fonts were self-hosted below.
[Unverified: Tablet media crop dimensions and the access-video
overlay position. get_metadata for the Tablet frame (node 9:221)
fails with a non-transient SSE parse error — confirmed on repeated
retries, same failure as earlier in this project. Desktop and Mobile
media crop heights below ARE verified against real node data
(get_metadata on 9:37 and 9:405, cross-checked against each local
asset's actual pixel dimensions). Tablet spacing/typography and media
heights are still interpolated between the verified Desktop/Mobile
values and checked against a Tablet screenshot, not pulled
node-by-node — treat Tablet crop precision as lower-confidence than
Desktop/Mobile until the Figma API issue clears.]
========================================================= */
/* Self-hosted Inter (latin subset, the only weights this design
actually uses: 400 body copy, 700 everything bold — grep confirms no
500 usage despite it being in the old Google Fonts request).
Self-hosting instead of the Google Fonts CDN removes the
stylesheet round-trip (browser had to fetch fonts.googleapis.com's
CSS before it even knew which font file URLs to request) and lets
the tags in target a known, fixed URL —
preloading Google's CDN link directly doesn't work because the
actual woff2 URLs are hashed/generated inside that CSS response, not
known in advance. Loading the exact weight needed (rather than the
variable-font range Google serves by default) also keeps the file
size down. font-display:swap is kept so text is never invisible
(FOIT) while the font loads; preloading is what shortens the swap
window that causes FOUT, not font-display itself. */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../assets/fonts/inter-700.woff2') format('woff2');
}
:root {
/* Verified directly against the Figma file (get_design_context on the
root "Desktop" frame, node 174:1558): its own fill is bg-[#121212],
not pure black. The site was rendering true #000000 — a real bug,
not just an approximation — fixed here at the single source of
truth this variable feeds (body background). */
--black: #121212;
--white: #ffffff;
--muted: rgba(255, 255, 255, 0.5);
--muted-35: rgba(255, 255, 255, 0.35);
--card-bg: rgba(255, 255, 255, 0.04);
--border: rgba(255, 255, 255, 0.5);
--border-soft: rgba(255, 255, 255, 0.08);
--content-max: 1416px;
--frame-max: 1464px;
--gutter: 24px;
--gap-root: 72px;
--gap-heading: 144px;
--gap-footer: 288px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--black);
color: var(--white);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-weight: 400;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap {
max-width: var(--frame-max);
margin: 0 auto;
padding: 0 var(--gutter);
}
.c-white { color: var(--white); }
.c-muted { color: var(--muted); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 8px 24px;
border-radius: 4px;
font-weight: 700;
font-size: 16px;
letter-spacing: -0.48px;
border: 1px solid var(--border);
backdrop-filter: blur(20px);
white-space: nowrap;
transition: opacity 0.2s ease;
}
.btn:hover { opacity: 0.85; }
/* Verified via get_design_context node 66:22517 (Top Nav "Join Waitlist
CTA"): rounded-[4px], same radius as the base .btn class — no longer
the pill/capsule shape. Radius override removed so it inherits the
base .btn's 4px instead. */
.btn--outline {
background: rgba(255, 255, 255, 0.04);
color: var(--white);
padding: 8px 16px;
}
.btn--solid {
background: var(--white);
color: #121212;
}
/* ---------- Top nav ---------- */
.top-nav {
position: sticky;
top: 0;
z-index: 50;
background: var(--black);
}
/* Hidden while the "Ready to join?" / Call to Action section (id="join")
is in view — toggled by an IntersectionObserver in js/script.js, not
scroll position math, so it correctly covers both organic scrolling
AND clicking this same button (which jumps to #join): once the
section it points to is actually on screen, the button that got you
there hides itself instead of sitting redundantly next to its own
destination. Space is preserved (opacity/visibility, not display:none)
so the logo doesn't jump when it toggles. */
.top-nav__cta {
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.top-nav__cta.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.top-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 32px;
padding-bottom: 32px;
}
/* The source SVG is Figma's full 460x340 artboard; the "AMARA" glyphs
occupy only a small region of it (x:157-303, y:146-178, verified by
rasterizing the SVG and checking the crop pixel-for-pixel). Shown at
its natural, unscaled size and shifted with plain top/left offsets
so the 146x32 window clips exactly that region — no shorthand
`inset`, no simultaneous width:100% + offset ambiguity. */
.logo__crop {
position: relative;
display: block;
width: 146px;
height: 32px;
overflow: hidden;
}
.logo__crop img {
position: absolute;
top: -146px;
left: -157px;
display: block;
max-width: none;
width: 460px;
height: 340px;
}
.only-mobile { display: none; }
/* ---------- Section rhythm ---------- */
.section { padding-top: var(--gap-root); }
.feature, .partners, .cta-split { padding-top: calc(var(--gap-root) + var(--gap-heading)); }
.site-footer { padding-top: calc(var(--gap-root) + var(--gap-footer)); padding-bottom: 40px; }
/* ---------- Hero ---------- */
.hero__title {
font-weight: 700;
font-size: 56px;
line-height: 1.05;
letter-spacing: -3px;
max-width: 700px;
margin: 0 0 24px;
}
.hero__media {
border-radius: 4px;
overflow: hidden;
margin-bottom: 24px;
position: relative;
}
/* height:auto previously let the video render at its native 16:9 ratio
(~797px at 1416 wide) instead of Figma's actual target crop box.
Every media section in this design uses a FIXED height per
breakpoint (not a fluid aspect-ratio) — confirmed across Desktop
(get_metadata 9:48: 882px), Tablet (get_design_context 9:232: 552px)
and Mobile (get_metadata 9:416: 552px). Tablet/Mobile override this
height below; object-fit:cover does the cropping, same as everywhere
else in the file. */
.hero__img { width: 100%; height: 882px; object-fit: cover; }
/* Membership card floating over the hero video — reconstructed from
the real Figma node "Frame 2117133597" (264x166, centered at
50%/50% within the video canvas) using its actual vector exports,
positioned at their exact Figma coordinates. transform:scale() is
used (not width/height) so every child keeps its correct relative
position at smaller breakpoints. */
.hero__card-wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.hero__card {
position: relative;
width: 264px;
height: 166px;
flex: 0 0 auto;
}
.hero__card-outline,
.hero__card-shine {
position: absolute;
top: 0;
left: 0;
width: 264px;
height: 166px;
}
.hero__card-logo {
position: absolute;
left: 0;
top: 0;
width: 72px;
height: 24px;
}
.hero__card-chip {
position: absolute;
left: 26.8125px;
top: 53.4375px;
width: 40.09375px;
height: 29.5625px;
}
.hero__card-accent {
position: absolute;
left: 27px;
top: 54px;
width: 40px;
height: 29px;
}
.hero__card-label {
position: absolute;
right: 24px;
top: 7px;
font-family: 'Inter', sans-serif;
font-size: 4.8px;
line-height: 10px;
color: #fafafa;
white-space: nowrap;
text-align: right;
}
.hero__sub {
font-weight: 700;
font-size: 20px;
line-height: 1.12;
letter-spacing: -0.5px;
max-width: 696px;
margin: 0 0 0 auto;
text-align: right;
}
/* ---------- Feature (heading + full-width image) ---------- */
.feature__head { margin-bottom: 24px; }
.feature__title {
font-weight: 700;
font-size: 40px;
line-height: 1.06;
letter-spacing: -2.4px;
max-width: 696px;
margin: 0;
}
.feature__title span { display: block; }
.feature__media { border-radius: 4px; overflow: hidden; margin-bottom: 24px; position: relative; }
.feature__media picture { display: block; }
.feature__media img, .feature__media video { width: 100%; height: 552px; object-fit: cover; display: block; }
.feature__media--tall img, .feature__media--tall video { height: 552px; }
/* "Always personalized" is the one feature section whose Desktop crop
isn't 552 — verified via get_metadata node 9:82 (1416x583.74, not
1416x552 like every other feature section). */
#personalized .feature__media img { height: 584px; }
/* Access section: static rock/phone backdrop with the live app-demo
video cropped into the phone's screen cutout.
Selector is deliberately scoped as ".access__media .access__phone-video"
(specificity 0,2,1) rather than just ".access__phone-video" (0,1,0) —
the generic ".feature__media video" rule above is 0,1,1 and was
silently winning and forcing this to 100% width / 552px height.
The background photo renders at a CONSTANT pixel size at every
breakpoint (fixed height:552px + object-fit:cover on a fixed-aspect
source always yields the same rendered width, ~1415px, regardless of
viewport) — only the container acts as a variable-width "window" onto
that fixed-size photo, centered by object-fit's default 50% position.
The phone-video overlay has to follow the SAME model: a fixed pixel
size, kept centered on that same fixed-size photo, not scaled with
the container. It was previously positioned with percentages, which
is wrong for a different reason than the photo bug — percentages
recompute continuously as the container's fluid width changes (not
just at breakpoint boundaries), so the overlay visibly grew/shrank
while resizing instead of staying pinned to the phone bezel.
Verified via get_metadata (Desktop/Mobile) and get_design_context
(Tablet): converting each breakpoint's phone-video box to
canvas-space and comparing to the canvas's own center gives an
offset within 2px of dead-center at all three (-0.5px desktop,
-1.9px tablet, +0.7px mobile) — i.e. it's centered on the photo,
full stop, with a near-constant fixed size (159x343 desktop,
~162x345 tablet/mobile). left:50% + translateX(-50%) reproduces
that centering at any container width, fluidly, with no rescaling. */
.access__media { position: relative; }
.access__media .access__phone-video {
position: absolute;
left: 50%;
top: 116px;
width: 159px;
height: 343px;
transform: translateX(-50%);
border-radius: 19px;
object-fit: cover;
}
.feature__caption {
font-size: 16px;
line-height: 24px;
letter-spacing: -0.5px;
color: var(--muted);
text-align: right;
margin: 0;
}
.feature__caption--wide { max-width: 700px; margin-left: auto; text-align: right; }
/* ---------- Split (two-up text/media) ---------- */
.split__row {
display: flex;
gap: 24px;
align-items: stretch;
}
.split__col { flex: 1 1 0; min-width: 0; }
.split__col--media {
background: var(--card-bg);
border-radius: 4px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
min-height: 552px;
/* height (not just min-height) is required here, not just belt-and-
suspenders: the child img/video below is `height: 100%`, and a
percentage height only resolves against an ancestor with a
DEFINITE height. Chromium treats a flex item's min-height-derived
size as definite for that purpose; Safari/WebKit does not — with
only min-height set (no explicit height), Safari lets the img's
`height: 100%` fail to resolve and fall back to the image's
intrinsic aspect ratio, which (combined with this container's own
align-items/justify-content: center) renders as a smaller image
floating in the middle of the box with visible letterboxing above
and below. Confirmed as Safari-only: identical locally-served HTML
rendered correctly in Chrome DevTools' mobile emulation but showed
the letterboxing in both Safari's Responsive Design Mode and on a
real iOS device — a Chromium-vs-WebKit percentage-height-resolution
difference, not a caching or asset issue. Same fix already proven
for #memory and #privacy below (both use an explicit height for
this same reason); this is that fix applied to the shared base
rule so every plain full-bleed media section (Concierge, Foundation
/"lifestyle", the Ready-to-join CTA, etc.) gets it too, at every
breakpoint — see the matching height additions in the tablet and
mobile media queries further down this file. */
height: 552px;
}
.split__col--media img, .split__col--media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Previously: object-fit:contain + padding:24px + a dark background on
this image specifically, which is what produced the visible letterboxed
frame-within-a-frame in the rendered page. Root cause, confirmed against
Figma (get_metadata node 174:1721, the "Concierge Section Container"):
the container is 696x552, but the asset in use was a mis-cropped 664x552
export — contain/padding was a workaround for that size mismatch, not a
deliberate design choice (Figma's own composite fills its frame edge to
edge, no padding, no separate background). Re-exported the asset at the
correct 696x552 (now 1392x1104 @2x) aspect from that same node, so this
image now falls through to the general .split__col--media rule above —
full-bleed cover, no special-casing needed. */
/* Memory section ("Secure contextual memory") is NOT a full-bleed photo
like the other .split__col--media sections — real Figma node data
(get_metadata 9:85) shows the phone graphic (Frame 2117133651) is a
smaller element, top-anchored 72px into its container and centered,
not a 100%/100% fill:
get_design_context on the container (node 9:90) returns:
"content-stretch flex items-start justify-center overflow-clip
pt-[72px] ... size-full" wrapping a fixed "354px x 727px" child.
The container's own bg/radius (rgba(255,255,255,0.04), 4px) already
match --card-bg/.split__col--media, so only the video itself needs
overriding. The source video (1280x720, phone pillarboxed on black)
cropped via object-fit:cover into a 354x727 box lines up with the
phone's real edges almost exactly — confirmed by comparing an
extracted video frame against the original flat
secure-memory-phone-export.jpg (696x552), which is this same node
flattened by Figma at 1:1 scale.
Mobile verified via get_metadata 9:458/9:459 (327x327 container,
281x577 phone). Tablet/Mobile top-buffer and Tablet's box size are
per the user-supplied design spec (Tablet: 471px container, 281px-
wide video, 72px top buffer; Mobile: 327px container, 281px-wide
video, 24px top buffer), which supersedes the get_metadata reading
and an earlier interpolated Tablet guess — get_metadata fails
non-transiently for the Tablet frame (same SSE issue noted at the
top of this file). Video height at every breakpoint is width times
the phone graphic's fixed ~2.054 aspect ratio (727/354 = 2.054,
577/281 = 2.053 — confirmed constant, so used to derive height from
the given width at each breakpoint).
BUG FIX: .split__col--media only sets min-height, never a hard
height. A flex container with only min-height grows to fit its
tallest child instead of clipping it — so the 727px video was
silently expanding this box to 727px tall and overflow:hidden never
had anything to clip, showing the whole video. Setting an explicit
height (not min-height) here forces the box to stay at 552px so the
bottom 247px of the video actually gets hidden, as designed. */
#memory .split__col--media { align-items: flex-start; padding-top: 72px; height: 552px; }
#memory .split__col--media video {
width: 354px;
height: 727px;
flex-shrink: 0;
object-fit: cover;
border-radius: 65px;
}
.split__title {
font-weight: 700;
font-size: 20px;
line-height: 1.06;
letter-spacing: -0.5px;
margin: 0 0 8px;
}
.split__title--solo { margin-bottom: 0; }
.split__body {
font-size: 16px;
line-height: 1.3;
color: var(--muted);
margin: 0;
max-width: 420px;
}
/* ---------- New content blocks (site-wide redesign, node-id=174-1558) ----------
Three recurring patterns added across the redesign, all built from the
real Figma text/spacing values (get_design_context on each section):
1. .lead-text + .content-row + .detail-list — a bold 20px statement next
to a divided list of title/body pairs. Used under the Hero video and
under the spending section's image (verified: both use the exact same
20px/700/-0.5px lead style and 16px/700 + 16px/400 muted item style).
2. .faq-row (+ a .divider above it) — a standalone two-column FAQ-style
block: 20px bold question on the left, a 16px medium "lead" line +
16px muted description on the right. Used for the two new standalone
blocks ("Is my data secure?", "How does Amara help my household?")
and reused (without the divider) for the Membership section's new
"What makes Amara so influential?" block.
3. .detail-list reused full-width (no lead-text sibling) under the new
"One invaluable membership" heading.
All three collapse the same way at Mobile: title-over-body instead of
side-by-side, sizes step down 20→16 / 16→14, matching every other
mobile collapse already verified in this file (Access caption,
feature__caption, etc). */
.lead-text {
font-weight: 700;
font-size: 20px;
line-height: 1.06;
letter-spacing: -0.5px;
color: var(--white);
margin: 0;
}
.content-row { display: flex; gap: 24px; align-items: flex-start; }
.content-row > * { flex: 1 0 0; min-width: 0; }
.content-row--pad { padding-top: 16px; }
.detail-list { display: flex; flex-direction: column; width: 100%; }
.detail-item { display: flex; gap: 24px; padding: 24px 0; }
.detail-item:not(:first-child) { border-top: 1px solid var(--border-soft); }
.detail-item:first-child { padding-top: 0; }
.detail-item:last-child { padding-bottom: 0; }
.detail-item__title {
flex: 1 0 0;
font-weight: 700;
font-size: 16px;
line-height: 1.06;
letter-spacing: -0.5px;
color: var(--white);
margin: 0;
padding-right: 32px;
}
.detail-item__body {
flex: 1 0 0;
min-width: 0;
font-size: 16px;
line-height: 1.12;
letter-spacing: -0.5px;
color: var(--muted);
margin: 0;
padding-right: 32px;
}
.divider--flush { margin: 0; }
.faq-row { display: flex; gap: 24px; align-items: flex-start; }
.faq-row__title {
flex: 1 0 0;
font-weight: 700;
font-size: 20px;
line-height: 1.06;
letter-spacing: -0.5px;
color: var(--white);
margin: 0;
padding-right: 96px;
}
.faq-row__body { flex: 1 0 0; min-width: 0; padding-right: 96px; }
.faq-row__lead {
font-size: 16px;
line-height: 1.12;
letter-spacing: -0.5px;
color: var(--white);
font-weight: 500;
margin: 0 0 8px;
}
.faq-row__desc {
font-size: 16px;
line-height: 1.12;
letter-spacing: -0.5px;
color: var(--muted);
margin: 0;
}
.faq-block { display: flex; flex-direction: column; gap: 24px; }
.lifestyle__summary { padding-top: 48px; }
/* ---------- Partners grid ---------- */
.partners__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.partners__card {
background: var(--card-bg);
border-radius: 4px;
height: 360px;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
}
.partners__logo { max-width: 60%; max-height: 55%; object-fit: contain; }
.partners__lockup { display: flex; align-items: center; gap: 12px; }
.partners__mark { height: 36px; width: auto; }
.partners__wordmark { height: 28px; width: auto; }
/* ---------- CTA split (Ready to join) ---------- */
.cta-split__title {
font-weight: 700;
font-size: 40px;
line-height: 1.06;
letter-spacing: -2.4px;
margin: 0 0 48px;
}
.cta-split .split__col--media { min-height: 552px; }
/* ---------- Still have questions ---------- */
.divider { border: none; border-top: 1px solid var(--border-soft); margin: 0 0 48px; }
.questions__row {
display: flex;
gap: 24px;
align-items: center;
justify-content: space-between;
}
.questions__cta { display: flex; justify-content: flex-end; flex: 1 1 0; }
/* ---------- Footer ---------- */
.site-footer__inner {
display: flex;
align-items: center;
gap: 72px;
flex-wrap: wrap;
}
.site-footer p { margin: 0; font-size: 16px; line-height: 24px; color: var(--muted); }
.social-icons {
display: flex;
gap: 32px;
list-style: none;
margin: 0;
padding: 0;
}
.social-icons img { width: 16px; height: 16px; opacity: 0.7; }
.social-icons a:hover img { opacity: 1; }
/* =========================================================
TABLET (1014px – 1463px)
Breakpoint boundary updated to match the redesign's explicit range
(was 701–1100). Section-title typography at this width is now
directly verified (get_design_context node 174:1998, Tablet
"Financial Partners Section"): the 40px/-2.4px title is UNCHANGED
from Desktop at Tablet width — only the column width narrows (966px
content vs 1416px). The old 34px/-1.8px override below was an
interpolated guess made before this section existed in the file and
is removed accordingly.
========================================================= */
@media (max-width: 1463px) {
:root {
--gap-root: 64px;
--gap-heading: 112px;
--gap-footer: 180px;
}
.wrap { max-width: 1014px; }
.hero__title { font-size: 48px; max-width: 600px; }
.hero__sub { font-size: 18px; max-width: 560px; }
/* Verified via get_design_context node 9:232: Tablet's hero video box
is a fixed 552px tall (not an interpolated guess, and not the same
as Desktop's 882px) — same fixed-height-per-breakpoint pattern the
rest of the design uses. */
.hero__img { height: 552px; }
.feature__media img { height: 460px; }
/* Access section, verified via get_design_context node 9:247/9:253/9:256:
- Container stays 552px tall, same as Desktop/Mobile — the generic
460px rule above would otherwise win here since it's later in the
cascade at equal specificity.
- The background photo is centered (Figma's own markup positions it
via a flex-centered wrapper around an oversized image, which
nets out to the same thing as default object-position:50%), so
no override needed there.
- The phone-video overlay: fixed size + centered, same model as
the base rule (see comment there) — Tablet's own numbers
(161.69x344.87, top 114.23px) are close to but not identical to
Desktop's, so overridden here rather than left at Desktop's. */
.feature__media--tall img { height: 552px; }
.access__media .access__phone-video {
top: 114px;
width: 162px;
height: 345px;
}
/* height alongside min-height — see the long comment on the base
.split__col--media rule above for why: Safari won't resolve the
child img/video's `height: 100%` against a min-height-only box. */
.split__col--media { min-height: 460px; height: 460px; }
.cta-split .split__col--media { min-height: 460px; height: 460px; }
/* Corrected per explicit design spec: 471px container, 281px-wide
video, 72px top buffer (video overflows/clips below the container
bottom by design, same as Desktop/Mobile). Height derived from the
phone's fixed ~2.054 aspect ratio (281 * 2.054 ≈ 577px), which
lands on the same box size as Mobile's video — Tablet just gives
it a taller container and bigger top buffer, so less of it is
cropped. */
#memory .split__col--media { padding-top: 72px; height: 471px; }
#memory .split__col--media video { width: 281px; height: 577px; border-radius: 52px; }
.partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.partners__card { height: 300px; }
.hero__card { transform: scale(0.82); }
.site-footer__inner { gap: 40px; }
}
/* =========================================================
MOBILE (<=1013px) — verified against Mobile frame metadata
Breakpoint boundary updated to match the redesign's explicit range
(was <=700).
========================================================= */
@media (max-width: 1013px) {
:root {
--gap-root: 48px;
--gap-heading: 72px;
--gap-footer: 72px;
}
.wrap { padding: 0 24px; }
.top-nav__inner { padding-top: 24px; padding-bottom: 24px; }
.only-desktop-tablet { display: none; }
.only-mobile { display: inline; }
.btn--outline { height: auto; padding: 6px 16px; }
.hero__title { font-size: 40px; letter-spacing: -1.6px; max-width: 100%; }
/* Scoped to .hero__img specifically (not ".hero__media video/img") —
a descendant selector here would also match the small card images
nested inside .hero__card-wrap and force them to this height, which is
exactly what caused the distorted oversized logo on mobile.
327x552 (portrait!) verified via get_metadata node 9:416 — the
Mobile crop is a tall strip, not a shrunk version of Desktop's
landscape 1416x882 box. Previous 380px height was a guess, never
checked against real Mobile metadata. */
.hero__img { height: 552px; object-fit: cover; }
.hero__card { transform: scale(0.6); }
.hero__sub { font-size: 16px; line-height: 1.3; text-align: left; margin: 0; max-width: 100%; }
/* get_design_context node 174:2312 (Mobile "Financial Partners
Section"): the two-line white/muted title collapses into ONE
flowing paragraph at Mobile (24px/-1px) instead of stacking as two
block lines — Figma even hides the old two-separate-line text
layers and shows a single combined text node instead. The existing
markup already has whitespace between the two tags (the
indentation/newline in index.html), so switching them to
display:inline is enough to get natural word-wrapping with a space
between the white and muted portions — no markup change needed. */
.feature__title { font-size: 24px; letter-spacing: -1px; max-width: 100%; }
.feature__title span { display: inline; }
.cta-split__title { font-size: 28px; letter-spacing: -1.2px; max-width: 100%; }
/* Every .feature__media section on the Mobile frame crops to 552 tall
EXCEPT "Always personalized", which is a 327x327 square (verified
via get_metadata node 9:450 vs e.g. 9:473/9:520 — same node tree
that showed the previous flat 260px was wrong for all of them). */
.feature__media img { height: 552px; }
#personalized .feature__media img { height: 327px; }
.feature__caption { text-align: left; }
.feature__caption--wide { max-width: 100%; text-align: left; margin-left: 0; }
/* Access section: the phone-video overlay is a fixed-size element
centered on the (also fixed-size, see base rule comment) background
photo — NOT a percentage of the container. An earlier version of
this fix used percentages, which made the overlay visibly grow and
shrink as the viewport resized instead of staying pinned to the
phone bezel; converting Mobile's container-relative Figma numbers
(get_metadata node 9:440, left 83.35/327, top 114.38/552, width
161.69/327, height 344.87/552) into the underlying canvas's own
coordinate space confirms it's centered there too (offset from
canvas center: +0.7px), same as Desktop/Tablet. */
.access__media .access__phone-video {
top: 114px;
width: 162px;
height: 345px;
}
/* Mobile stacking order verified against Mobile-frame metadata:
text-then-media for all standard split sections, but
media-then-text for the "Ready to join" CTA split.
Media crop heights verified via get_metadata: memory/privacy/
foundation are 327x327 squares (nodes 9:458, 9:465, 9:512); the
"Ready to join" yacht is a 327x552 banner like the other CTA-style
shots (node 9:560), not a shrunk square — the old flat 260px/300px
values were guesses that didn't match either. */
.split__row { flex-direction: column; }
.split__col--text { order: 1; }
/* flex-basis (not min-height) + explicit height — same two-part fix
as #privacy below, generalized. Root cause has two independent
halves, both already diagnosed elsewhere in this file but not
previously applied to this shared base rule:
(1) .split__col sets flex:1 1 0, so in this column-direction flex
container flex-basis:0 governs main-axis sizing ahead of plain
`height`/`min-height` — see the #privacy comment below for the
full writeup. min-height only worked here by accident, as a
floor under a flex-grow:1 item with no sibling free space to
actually grow into.
(2) Even where the box ends up the right pixel size, the child
img/video's `height: 100%` needs a DEFINITE ancestor height to
resolve at all — Safari does not treat a min-height-derived
flex size as definite the way Chromium does (see the long
comment on the base .split__col--media rule near the top of
this file). flex-basis, being an explicit length, IS treated
as definite by both engines.
Confirmed via real-device testing: Concierge, Foundation ("the
foundation of the affluent lifestyle"), and the Ready-to-join CTA
section all rendered with visible letterboxing (image shrunk to
its intrinsic aspect ratio, centered, gaps above/below) in Safari
— both real iOS and macOS Responsive Design Mode — while rendering
correctly in Chrome DevTools' mobile emulation of the exact same
local files. #memory was never affected because its video is given
a literal pixel height (727px), not a percentage, so it never hit
the definite-height requirement in the first place; #privacy was
never affected because it already had an explicit flex-basis for
an unrelated reason (see below), which happened to satisfy both
halves of this bug as a side effect.
SELF-CAUGHT BUG while writing this exact fix: setting flex-basis
and height here isn't sufficient by itself, because CSS cascade
resolves each property independently across every matching rule —
it doesn't "reset" properties a later, narrower media query
doesn't mention. The Tablet rule above (`@media max-width:1463px`)
is STILL an active match at Mobile widths too (a 390px viewport
satisfies max-width:1463px AND max-width:1013px simultaneously),
and it sets `min-height: 460px`. This Mobile rule never declared
its own `min-height`, so that Tablet min-height silently survived
as an unremoved floor and kept forcing these boxes to 460px tall
at Mobile — confirmed via getComputedStyle (flexBasis correctly
read 327px, but the actual used height still came out 460px).
Exact same failure mode already documented on #privacy below;
min-height:0 here is the same fix, generalized. */
.split__col--media { flex: 0 0 327px; height: 327px; min-height: 0; order: 2; }
.split__body { max-width: 100%; }
/* Security section ("Privacy secured", id="privacy") is the one
.split__col--media instance that ISN'T a 327x327 square at Mobile —
re-verified directly against the current Figma Mobile frame
(get_metadata 174:2186 → "Security Section" → "Security Section
Image", node 174:2302): 327x271.84, not 327x327. The blanket
min-height:327px above was leaving this box taller than Figma
specifies, so the crop didn't match the design file even though
object-fit:cover always visually fills whatever box it's given (no
gap — just the wrong amount of the photo showing).
BUG initially introduced fixing this: setting height+min-height
alone rendered as 0px tall, not 271.84px — caught via a computed-
style check. Root cause: .split__col (the shared base class) sets
flex: 1 1 0, and in a column-direction flex container that
flex-basis:0 governs main-axis (vertical) sizing ahead of the
plain `height` property, so `height` was silently ignored while
flex-grow:1 tried to distribute free space that a plain-auto-height
column container doesn't actually have. Overriding flex-basis
(via the shorthand) instead of height is what actually fixes it. */
#privacy .split__col--media { flex: 0 0 271.84px; min-height: 0; }
/* min-height:0 above overrides the general rule's min-height:327px —
that min-height is a separate hard floor that survives flex-basis
changes (min-height always wins over a flex-computed size), so it
was still forcing this box back up to 327px tall even after the
flex-basis fix above. Caught the same way: a second computed-style
check after the first attempt still rendered 327px, not 271.84px. */
/* 327px container, 281px-wide video (matches get_metadata node
9:458/9:459: 327x327 container, phone 281x577, horizontally
centered — 23+281/2 = 163.5 = 327/2). Top buffer corrected to 24px
per explicit design spec (supersedes the 16px read off the raw
node offset). */
#memory .split__col--media { padding-top: 24px; height: 327px; }
#memory .split__col--media video { width: 281px; height: 577px; border-radius: 52px; }
/* Same flex-basis + explicit-height fix as the general
.split__col--media rule above, and for the same reason (this is
the "Ready to join?" yacht image, one of the three sections
confirmed broken in Safari). min-height:0 added for the same
reason as the general rule above too — the Tablet block's
`.cta-split .split__col--media { min-height: 460px; }` is still an
active match here (390px satisfies both max-width queries at
once); it happens not to visibly clip anything since 552 > 460,
but leaving that stale floor in place would be fragile, so it's
explicitly zeroed here rather than relying on 552 always safely
exceeding whatever the Tablet value happens to be. */
.cta-split .split__col--media { order: 1; flex: 0 0 552px; height: 552px; min-height: 0; }
.cta-split .split__col--text { order: 2; }
.cta-split__title { margin-bottom: 24px; }
.partners__grid { grid-template-columns: 1fr; }
.partners__card { height: 220px; }
.questions__row { flex-direction: column; align-items: flex-start; gap: 24px; }
.questions__cta { justify-content: flex-start; }
.site-footer__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
/* New content blocks: verified via get_design_context node 174:2204
(Mobile Hero subheadline) — 20px lead → 16px, 16px detail-item
title/body → 14px, and the title+body pairs go from side-by-side to
stacked. Same 20→16 / 16→14 step-down pattern applied to .faq-row,
which wasn't directly fetched at Mobile but matches every other
verified collapse in this file. */
.lead-text { font-size: 16px; }
.content-row, .content-row--pad { flex-direction: column; gap: 24px; }
.detail-item { flex-direction: column; gap: 8px; padding: 24px 0; }
.detail-item__title, .detail-item__body { font-size: 14px; padding-right: 0; }
.faq-row { flex-direction: column; gap: 16px; }
.faq-row__title, .faq-row__body { padding-right: 0; }
.faq-row__title { font-size: 16px; }
.faq-row__lead, .faq-row__desc { font-size: 14px; }
.lifestyle__summary { padding-top: 32px; }
}