/* =====================================================================================================
01 · Hero — MOBILE build (below 1024 px). Owner: HERO-M. Every selector is scoped to #home .v-mobile.
Pulls up under the glass header so Today's sky runs behind it, then: eyebrow, a two-line title (always exactly
two lines, sized to the screen), lede, Apple's App Store badge above the white button, fine print. The eyebrow
is the page's and the big title a
, for search.
Below: the DESKTOP hero's three real phones, as one piece scaled to the screen (owner, 30 Sep: "in mobile also
3 screen should come like this … reduce the size … in total, not the length and width"). Same screens, same
order, the desktop's side/centre ratio (.86), drop and ±5° tilt: step-done on the left, Today upright in front,
the welcome recording on the right. Every size comes from ONE unit, --u (1% of the screen width on phones,
capped on tablets), so nothing is ever squashed in one direction. The centre phone is 38% of the screen, small
enough that the side phones show like the desktop's (about three quarters of each, owner 30 Sep); everything
else (art, shadows, hill, glow) is a share of the centre phone, so the group is the desktop's in miniature.
The only thing that adapts is how far the side phones tuck behind the centre one: as far out as the screen
allows, never wider apart than the desktop's own tuck.
The waving star stands low at the left on the white hill, in front of the left phone's foot (never over a
screen's words), and the hill runs into the next section.
===================================================================================================== */
#home .v-mobile {
--pad-l: max(var(--gutter), env(safe-area-inset-left, 0px));
--pad-r: max(var(--gutter), env(safe-area-inset-right, 0px));
--top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
position: relative;
margin-top: calc(var(--top) * -1); /* run the sky up behind the glass header */
padding-top: calc(var(--top) + var(--section-y-tight));
background: linear-gradient(180deg, var(--sky-0) 0%, var(--sky-0) 28%, var(--sky-1) 56%, var(--sky-2) 84%);
overflow: hidden; /* the hill and the phones' shadows never leave the hero */
}
@supports (overflow: clip) { #home .v-mobile { overflow: clip; } }
/* ---- the words ---- */
#home .v-mobile .mhr-copy { position: relative; z-index: 5; max-width: 600px; margin: 0 auto; padding: 0 var(--pad-r) 0 var(--pad-l); text-align: center; }
#home .v-mobile .mhr-eyebrow { margin-bottom: 12px; text-wrap: balance; } /* the page's
, in the eyebrow look */
#home .v-mobile .mhr-title {
/* always exactly two lines: the second line is sized to the screen with a little air (it is 9.94 em wide) */
font-size: clamp(25px, calc((100vw - var(--pad-l) - var(--pad-r)) * .092), 44px);
line-height: 1.14; letter-spacing: -0.03em;
}
#home .v-mobile .mhr-title span { display: block; white-space: nowrap; }
#home .v-mobile .mhr-l2 { color: var(--accent-edge); } /* the deeper blue: readable on the sky */
#home .v-mobile .mhr-lede { max-width: 31em; margin: 14px auto 0; }
/* Apple's badge (54 px, its own shape, never stretched) above the white button, both centred;
14 px apart = the badge's clear space (a quarter of its height) */
#home .v-mobile .mhr-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 28px; }
#home .v-mobile .mhr-cta .btn { padding: 0 24px; }
#home .v-mobile .mhr-fine { margin-top: 16px; }
#home .v-mobile .mhr-fine span { display: inline-block; }
/* ---- the phone group ---- */
#home .v-mobile .mhr-stage { position: relative; margin-top: 36px; padding-bottom: var(--section-y); container-type: inline-size; } /* rhythm set centrally (brief §15) */
#home .v-mobile .mhr-group {
--vw: 1vw; /* 1% of the stage (= the screen); cqw where supported, below */
--u: min(var(--vw), calc(256px / 38)); /* THE unit. Phones: 1% of the width. Tablets stop growing at a 256 px centre phone (desktop's 1024 size) */
--cw: calc(var(--u) * 38); /* centre phone: 38% of the screen on phones — 122 px at 320, 148 at 390, 163 at 430 */
--sw: calc(var(--cw) * .86); /* side phones: the desktop's ratio */
--ch: calc(var(--cw) * 2.1024); /* a phone's height = w × (0.06 + 0.94 × 2868 / 1320) */
--sh: calc(var(--sw) * 2.1024);
--drop: calc(var(--cw) * .1824); /* side phones stand further back: the desktop's 54 px at a 296 px centre */
--foot: calc(var(--drop) + var(--sh)); /* where the side phones stand (their bottom centre, the tilt's pivot) */
--edge-air: max(calc(var(--vw) * 2), calc(env(safe-area-inset-left, 0px) + 4px), calc(env(safe-area-inset-right, 0px) + 4px)); /* least air between a tilted phone's top corner and the screen edge (or a notch) */
/* The side phones' pivots, measured from the centre: as far out as the screen allows (a phone tilted 5° about its
bottom centre reaches .669 of its width out), but never wider apart than the desktop's tuck (.26 of a side phone
behind the centre one) and never tucked more than .70. Phones: .28 tucked (72% of each side phone shows).
Tablets: exactly the desktop's .26. */
--xp: clamp(calc(var(--cw) / 2 - var(--sw) * .20),
calc(var(--vw) * 50 - var(--edge-air) - var(--sw) * .669),
calc(var(--cw) / 2 + var(--sw) * .24));
--star: calc(var(--cw) * .362); /* the art is a share of the centre phone, like everything else */
--peak: calc(var(--cw) * .267); /* the desktop's star : peak = 200 : 150 */
--shade: max(5px, calc(var(--cw) * .0286)); /* the star's shadow line */
position: relative;
/* down to the star's shadow line, the lowest thing in the group (it stands just in front of the phones' feet) */
height: calc(var(--foot) + var(--cw) * .0105 + var(--star) * .9667 + 3px + var(--shade)); /* .0105: the star's top, below */
}
@supports (width: 1cqw) { #home .v-mobile .mhr-group { --vw: 1cqw; } }
/* a soft light behind the phones, so they lift off the sky (it never reaches the words: they sit above it) */
#home .v-mobile .mhr-glow {
position: absolute; z-index: 0; left: 50%; top: calc(var(--cw) * -.305); pointer-events: none;
width: calc(var(--xp) * 2 + var(--sw) * 1.9); height: calc(var(--ch) + var(--cw) * .305);
transform: translateX(-50%);
background: radial-gradient(closest-side, rgba(255, 255, 255, .88), rgba(255, 255, 255, .45) 55%, rgba(255, 255, 255, 0));
}
/* the white hill (the desktop's): a wide, gentle arc that rises behind the phones' lower part and runs through the
section's bottom padding into the next (white) section; the hero clips it at its own bottom edge */
#home .v-mobile .mhr-hill {
position: absolute; z-index: 1; left: 50%; top: calc(var(--ch) - var(--cw) * .324);
width: calc(var(--vw) * 200); height: calc(var(--cw) * 1.15 + var(--section-y) * 2);
transform: translateX(-50%);
/* owner 2026-09-30: no line where the sky meets the hill. The arc is a gradient that fades out along its whole edge
(the last 22% of the ellipse's radius), with plain white below the ellipse's centre line, so there is no seam. */
--rb: calc(var(--cw) * .857);
background:
radial-gradient(ellipse 50% var(--rb) at 50% var(--rb), #fff 78%, rgba(255, 255, 255, 0) 100%) 0 0 / 100% calc(var(--rb) * 2) no-repeat,
linear-gradient(#fff, #fff) 0 var(--rb) / 100% calc(100% - var(--rb)) no-repeat;
}
/* contact shadows where each phone stands on the hill (level on the ground, not tilted with the phone) */
#home .v-mobile .mhr-contact {
--pw: var(--cw); --px: 0px; --py: var(--ch);
position: absolute; z-index: 1; left: 50%; pointer-events: none;
top: calc(var(--py) - var(--cw) * .061); height: calc(var(--cw) * .122);
width: calc(var(--pw) * 1.1); margin-left: calc(var(--px) - var(--pw) * .55);
border-radius: 50%;
background:
radial-gradient(closest-side, rgba(15, 26, 43, .24), rgba(15, 26, 43, 0)) center / 74% 56% no-repeat,
radial-gradient(closest-side, rgba(15, 26, 43, .10), rgba(15, 26, 43, 0));
}
#home .v-mobile .mhr-contact-l,
#home .v-mobile .mhr-contact-r { --pw: var(--sw); --py: var(--foot); }
#home .v-mobile .mhr-contact-l { --px: calc(var(--xp) * -1); }
#home .v-mobile .mhr-contact-r { --px: var(--xp); }
/* the three phones: Today upright in front, the side phones a step back and tilted 5° about their feet */
#home .v-mobile .mhr-slot { position: absolute; }
#home .v-mobile .mhr-centre { z-index: 3; top: 0; left: calc(50% - var(--cw) / 2); width: var(--cw); }
#home .v-mobile .mhr-left,
#home .v-mobile .mhr-right { z-index: 2; top: var(--drop); width: var(--sw); }
#home .v-mobile .mhr-left { left: calc(50% - var(--xp) - var(--sw) / 2); }
#home .v-mobile .mhr-right { left: calc(50% + var(--xp) - var(--sw) / 2); }
#home .v-mobile .mhr-centre .phone { --w: var(--cw); }
#home .v-mobile .mhr-left .phone,
#home .v-mobile .mhr-right .phone { --w: var(--sw); transform-origin: 50% 100%; }
#home .v-mobile .mhr-left .phone { transform: rotate(-5deg); }
#home .v-mobile .mhr-right .phone { transform: rotate(5deg); }
/* the shared frame; only the drop shadow is ours (the desktop's, scaled with the group) */
#home .v-mobile .mhr-phone {
box-shadow:
0 calc(var(--cw) * .076) calc(var(--cw) * .114) calc(var(--cw) * -.069) rgba(15, 26, 43, .30),
0 calc(var(--cw) * .021) calc(var(--cw) * .103) calc(var(--cw) * -.027) rgba(15, 26, 43, .13);
}
/* the waving star stands low at the left, on the hill just in front of the left phone's foot: its head only meets
the phone's frame, never the screen. It pops in, then waves in bursts around its base. */
#home .v-mobile .mhr-star {
position: absolute; z-index: 4; width: var(--star);
left: calc(50% - var(--xp) - var(--sw) * .4981 - var(--cw) * .124); /* .4981 w: the tilted phone's bottom corner */
/* UX red team 30 Sep: 2% of the centre phone lower than before (3 px at 390, 5 px on tablets). At rest the head
still meets the frame, and at the top of its wave (+5°) it no longer touches the screen (pixel-tested 320–834). */
top: calc(var(--foot) + var(--cw) * .0105);
}
/* the goal (the desktop's little mountain with its flag) answers it at the right, just below the right phone */
#home .v-mobile .mhr-peak {
position: absolute; z-index: 4; width: var(--peak);
left: calc(50% + var(--xp) + var(--sw) * .4981 + var(--cw) * .124 - var(--peak));
top: calc(var(--foot) + var(--cw) * .057);
}
#home .v-mobile .mhr-peak img { width: 100%; filter: var(--art-drop); }
#home .v-mobile .mhr-peak.in img { animation: home-m-pop .9s var(--spring) .7s both; transform-origin: 50% 100%; }
#home .v-mobile .mhr-pop { transform-origin: 45% 100%; }
#home .v-mobile .mhr-wave { width: 100%; filter: var(--art-drop); transform-origin: 45% 97%; animation: home-m-wave 5.4s var(--ease) 1.8s infinite; }
#home .v-mobile .mhr-star.in .mhr-pop { animation: home-m-pop .9s var(--spring) .55s both; }
#home .v-mobile .mhr-star .art-shadow { width: 44%; height: var(--shade); margin: 3px 0 0 23%; background: #D3DAE3; }
@keyframes home-m-pop {
from { transform: translateY(10px) scale(.55); opacity: 0; }
55% { opacity: 1; }
to { transform: none; opacity: 1; }
}
@keyframes home-m-wave {
0%, 60%, 100% { transform: rotate(0deg); }
65% { transform: rotate(-5deg); }
71% { transform: rotate(5deg); }
77% { transform: rotate(-3.5deg); }
83% { transform: rotate(3deg); }
89% { transform: rotate(-1deg); }
94% { transform: rotate(0deg); }
}
/* ---- tablets: centred, narrower words; the buttons side by side. The phone group is the same piece: it stops
growing at the desktop's 1024 size and the side phones open out to the desktop's own tuck ---- */
@media (min-width: 768px) {
#home .v-mobile { --pad-l: max(32px, env(safe-area-inset-left, 0px)); --pad-r: max(32px, env(safe-area-inset-right, 0px)); padding-top: calc(var(--top) + var(--section-y)); }
#home .v-mobile .mhr-copy { max-width: 720px; }
#home .v-mobile .mhr-eyebrow { font-size: 15px; margin-bottom: 16px; }
#home .v-mobile .mhr-title { font-size: 56px; line-height: 1.08; }
#home .v-mobile .mhr-lede { max-width: 540px; margin-top: 20px; font-size: 19px; }
#home .v-mobile .mhr-cta { flex-direction: row; justify-content: center; gap: 16px; margin-top: 32px; }
#home .v-mobile .mhr-cta .btn { padding: 0 26px; }
#home .v-mobile .mhr-fine { margin-top: 18px; }
#home .v-mobile .mhr-stage { margin-top: 48px; }
}
/* wide tablets: there is room beside the phones again, so the star and the goal stand beside them on the hill,
exactly where the desktop puts them (39 px of air from the side phones' feet) */
@media (min-width: 900px) {
#home .v-mobile .mhr-group { --star: calc(var(--cw) * .381); --peak: calc(var(--cw) * .286); height: calc(var(--ch) + var(--cw) * .069); }
#home .v-mobile .mhr-star { top: auto; bottom: calc(var(--cw) * .107); left: calc(50% - var(--xp) - var(--sw) * .5 - var(--cw) * .152 - var(--star)); }
#home .v-mobile .mhr-peak { top: auto; bottom: calc(var(--cw) * .16); left: calc(50% + var(--xp) + var(--sw) * .5 + var(--cw) * .152); }
}
/* 30 Sep: the tab-bar strip is fixed in the image itself (today-maya-p17-clean.webp: nothing scrolls behind the tab bar), no overlay. */