buys immunity from a whole class of Safari failure.
The duplicate ![]()
carries an identical srcset/sizes, so it resolves to the same
candidate the real icon already fetched and comes straight off the memory cache:
one network request, zero extra bytes. */
.step__glimmer {
position: absolute; inset: 0;
opacity: 0;
pointer-events: none;
/* Narrow band, soft shoulders. mask-size is 300%, so each 1% of the gradient is 3%
of the icon — the 44-56% span here is a ~50px sweep on a 138px icon. Widening
these stops reads as a wash over the whole icon rather than a specular glint. */
-webkit-mask-image: linear-gradient(76deg, rgba(0,0,0,0) 44%, rgba(0,0,0,.28) 48%, rgba(0,0,0,1) 50%, rgba(0,0,0,.28) 52%, rgba(0,0,0,0) 56%);
mask-image: linear-gradient(76deg, rgba(0,0,0,0) 44%, rgba(0,0,0,.28) 48%, rgba(0,0,0,1) 50%, rgba(0,0,0,.28) 52%, rgba(0,0,0,0) 56%);
-webkit-mask-size: 300% 300%; mask-size: 300% 300%;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: 118% 50%; mask-position: 118% 50%;
}
.step__glimmer img {
display: block; width: 100%; height: 100%; object-fit: contain;
filter: brightness(0) invert(1); /* every opaque pixel -> white; alpha untouched */
}
/* Without mask support the gradient is ignored and the opacity keyframes alone would
flash a solid white silhouette — considerably worse than no effect. Drop the layer
rather than degrade to that. The glimmer carries no information, so a static icon
is the correct fallback. */
@supports not ((-webkit-mask-image: linear-gradient(#000,#000)) or (mask-image: linear-gradient(#000,#000))) {
.step__glimmer { display: none; }
}
/* Linear, deliberately not var(--ease): a strong ease-in-out loiters at both ends —
which are off the icon and invisible — and races through the middle, which is the
entire point of the effect. Real speculars travel at constant speed. */
.steps.is-lit .step__glimmer { animation: step-glimmer 900ms linear both; }
.steps.is-lit .step:nth-child(2) .step__glimmer { animation-delay: 200ms; }
.steps.is-lit .step:nth-child(3) .step__glimmer { animation-delay: 400ms; }
/* Replaying on hover needs a SEPARATE keyframes name. After the scroll cascade runs,
`animation: step-glimmer ... both` stays applied to the element, so re-declaring the
same animation on :hover is a no-op and nothing replays. A distinct name is a distinct
animation, so it starts fresh on every pointer entry.
Hover-capable pointers only — on touch, :hover latches after a tap and the glimmer
would fire at a random moment and then stick. */
@media (hover: hover) and (pointer: fine) {
/* Whole .step is the target, not just .step__art — a 138px icon is a mean target, and
"point at the step, the icon catches the light" is the readable interaction. */
.step:hover .step__glimmer { animation: step-glimmer-hover 900ms linear both; }
}
@keyframes step-glimmer {
0% { opacity: 0; -webkit-mask-position: 118% 50%; mask-position: 118% 50%; }
12% { opacity: .75; }
82% { opacity: .75; }
100% { opacity: 0; -webkit-mask-position: -18% 50%; mask-position: -18% 50%; }
}
/* Same curve as the cascade so the two triggers read as one effect. */
@keyframes step-glimmer-hover {
0% { opacity: 0; -webkit-mask-position: 118% 50%; mask-position: 118% 50%; }
12% { opacity: .75; }
82% { opacity: .75; }
100% { opacity: 0; -webkit-mask-position: -18% 50%; mask-position: -18% 50%; }
}
.step h3 { margin: 0 0 var(--space-xs); }
/* gap is inherited, not re-declared: --space-xl is already 40px at 390. */
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
/* ── mobile timeline ──────────────────────────────────────────
Stacked steps get a rail on the left: a hairline with one dot per card. main.js
keeps .is-active on whichever step is crossing the middle of the viewport; the
active dot fills brand blue, the card's stroke lifts, and its glimmer re-runs.
The glimmer rule is AFTER the .is-lit rules in the cascade order, so while a card
is active it wins the `animation` property; class churn between cards restarts it. */
@media (max-width: 900px) {
.steps { position: relative; padding-left: 30px; }
.steps::before {
content: ''; position: absolute; left: 5px; top: 14px; bottom: 14px;
width: 2px; border-radius: 1px; background: var(--line-soft);
}
.step { transition: border-color .3s var(--ease); }
.step::before {
content: ''; position: absolute; left: -30px; top: 50%; translate: 0 -50%;
width: 12px; height: 12px; border-radius: 50%;
background: var(--surface-canvas); border: 2px solid var(--line-soft);
transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.step.is-active { border-color: var(--brand-periwinkle); }
.step.is-active::before {
background: var(--brand-blue); border-color: var(--brand-blue);
box-shadow: 0 0 0 4px var(--brand-tint);
}
.step.is-active .step__glimmer { animation: step-glimmer 900ms linear both; }
}
/* ============================================================
treatment cards
============================================================ */
/* One card, one surface: the gradient is painted on the CARD, starting saturated at
the top and dissolving to white before the copy begins — per the client's comp.
This replaces the old two-part construction (sand media panel over white body),
whose junction read as "a line in the middle". The dome image is gone entirely. */
.card {
display: flex; flex-direction: column;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--brand-periwinkle) 58%, #fff) 0%,
color-mix(in srgb, var(--brand-periwinkle) 20%, #fff) 34%,
var(--surface-card) 56%);
border: 1px solid var(--line-soft);
border-radius: var(--r-tile);
overflow: hidden;
transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card:hover { border-color: #d5d2ff; box-shadow: 0 18px 40px -24px rgba(17,17,20,.25); transform: translateY(-2px); }
.card__media { position: relative; aspect-ratio: 416 / 300; }
.card__pill {
position: absolute; left: 50%; top: 50%; translate: -50% -50%;
width: 55%; aspect-ratio: 1;
/* A clipping WINDOW. The sheet inside is an ![]()
moved by transform — NOT a
background-image. The background-size/position percentage path mis-rendered on
iOS Safari (huge zoomed fragments) while identical geometry was perfect in
Chromium; composited transforms on an img are the one sprite mechanism WebKit
has never got wrong. main.js injects the img and drives it. */
overflow: hidden;
}
.card__pill-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.card__pill-sheet {
position: absolute; left: 0; top: 0;
/* 800% = the 8x8 HD sheets: two per product (frames 0-63 / 64-120), because a
single 121-frame sheet caps cells at ~370px under iOS's ~16.7MP image-decode
ceiling — the split lifts cells to 448px, each sheet staying under the limit. */
width: 800%; height: 800%;
max-width: none; display: block;
will-change: transform;
}
.card__body { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-m); flex: 1 1 auto; }
.card__body h3 { margin: 0; }
/* margin:0 is load-bearing. This is a bare and its parent is a FLEX column —
flex items do not collapse margins, so the UA's 1em sat on top of the container's
16px gap and produced 32px above and below the dose line where the card design
asks for 16. Same leak class as .mono-micro and .stat__value. */
.card__dose { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs); }
.card__dose .sep { color: var(--text-muted); }
.card__desc { flex: 1 1 auto; }
.card__rule { height: 1px; background: var(--line-soft); }
.card__foot { display: flex; align-items: center; gap: var(--space-xs); }
.card__foot .price { flex: 1 1 auto; }
/* A glass render, matching the step/USP/trust icon family — not a disc with a glyph. */
.card__arrow {
width: 44px; height: 44px; object-fit: contain;
transition: transform .2s var(--ease);
}
.card:hover .card__arrow { transform: translateX(4px); }
/* The rotation is driven by JS (a requestAnimationFrame frame-stepper in main.js),
not CSS keyframes. The two-axis steps() approach was rebuilt after it broke twice:
once when a fill-mode parked the sheet on a blank cell, and once when the sheet
geometry changed under immutable-cached files. The stepper walks the 11x11 sheet
cell by cell from JS, so there is exactly one source of truth for frame order,
timing, replay and rest state. */
@media (prefers-reduced-motion: reduce) {
.card:hover { transform: none; }
.btn:hover { transform: none; }
.card:hover .card__arrow { transform: none; }
}
/* ============================================================
half the cost — comparison table
============================================================ */
/* Bento'd: the table lives inside a max-width card, centred. Full content-width gave
the four rows acres of empty tracking between columns; 880px is enough for the
longest row plus the two price columns without the dead air. */
.compare-shell {
max-width: 880px; margin-inline: auto;
background: var(--surface-card);
border: 1px solid var(--line-soft);
border-radius: var(--r-tile);
padding: var(--space-l) var(--space-l) var(--space-m);
overflow: hidden;
}
.compare {
/* separate, NOT collapse: border-collapse:collapse discards border-radius on cells,
and the tinted columns need rounded ends. border-spacing puts an even gutter
between the three columns (the tinted pills were touching); the negative inline
margins cancel the outer spacing so the table still aligns with the shell. */
border-collapse: separate; border-spacing: var(--space-s) 0;
width: calc(100% + 2 * var(--space-s));
margin-inline: calc(-1 * var(--space-s));
}
/* The tinted column is one visual pill inside the card: round its first and last
cells with the nested radius (--r-img, per the radii scale). */
.compare tbody tr:first-child .col-us { border-top-left-radius: var(--r-img); border-top-right-radius: var(--r-img); }
.compare tbody tr:last-child .col-us { border-bottom-left-radius: var(--r-img); border-bottom-right-radius: var(--r-img); }
.compare th, .compare td { text-align: left; vertical-align: middle; }
.compare thead th {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: var(--t-mono-micro); font-weight: 400;
letter-spacing: .06em; text-transform: uppercase;
color: var(--text-muted); padding: 0 var(--space-m) var(--space-s) 0;
}
.compare tbody th, .compare tbody td { padding: var(--space-s) var(--space-m) var(--space-s) 0; border-top: 1px solid var(--line-soft); }
.compare tbody th { font-weight: 400; padding-left: 0; }
.compare .t-name { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--t-mono-data); font-weight: 500; }
.compare .t-sub { color: var(--text-muted); font-size: var(--t-body-s); }
.compare .col-them {
background: var(--surface-sand);
padding-left: var(--space-m);
font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--t-mono-data);
}
/* The value columns are self-contained pills, but they are still TABLE columns — the
row rules stay so the grid reads, drawn in a neutral ink-alpha that works on both
the sand and the tint ground. Only the FIRST row's rule is dropped, so no line cuts
across the rounded top corners. The vertical hairline dividers go — the containers
do the column separation. */
.compare tbody .col-them, .compare tbody .col-us {
border-top: 1px solid rgba(17, 17, 20, .08);
border-left: 0;
}
.compare tbody tr:first-child .col-them,
.compare tbody tr:first-child .col-us { border-top: 0; }
.compare tbody tr:first-child .col-them { border-top-left-radius: var(--r-img); border-top-right-radius: var(--r-img); }
.compare tbody tr:last-child .col-them { border-bottom-left-radius: var(--r-img); border-bottom-right-radius: var(--r-img); }
.compare .col-us {
padding-left: var(--space-m);
background: var(--brand-tint); color: var(--brand-blue);
font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--t-mono-data); font-weight: 500;
}
.compare .col-us .t-sub { color: var(--brand-blue); opacity: .8; font-family: Inter, sans-serif; }
.compare thead .col-them, .compare thead .col-us { background: none; border-left: 0; color: var(--text-muted); }
.compare__foot { text-align: center; margin-top: var(--space-l); display: grid; gap: var(--space-2xs); justify-items: center; }
/* stacked cards on narrow screens — a 3-col table is unreadable at 390 */
@media (max-width: 760px) {
/* The desktop machinery — border-spacing gutters, negative-margin compensation,
per-corner radii on the tinted columns — must all reset here: on display:block
elements it turns into stray margins and clipped corners, which is exactly the
broken phone layout reported 2026-08-13. */
.compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
.compare { margin-inline: 0; border-spacing: 0; }
.compare thead { display: none; }
.compare tbody tr {
border: 1px solid var(--line-soft); border-radius: var(--r-img);
overflow: hidden; margin-bottom: var(--space-s);
padding: var(--space-2xs);
background: var(--surface-card);
}
.compare tbody th { border-top: 0; padding: var(--space-s); }
/* value cells become inset rounded chips with an even gap; all four corners round,
overriding the desktop first/last-row radius split */
.compare tbody td {
border-top: 0; padding: var(--space-s);
border-radius: var(--r-img) !important;
margin-top: var(--space-2xs);
}
.compare tbody td::before {
content: attr(data-label); display: block;
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: var(--t-mono-micro); letter-spacing: .06em; text-transform: uppercase;
color: var(--text-muted); margin-bottom: 4px;
}
.compare .col-them, .compare .col-us { border-left: 0; padding-left: var(--space-s); }
}
/* ============================================================
science
============================================================ */
/* stretch, not start: the photo and the three boxes are one bento row and must share
a bottom edge. The image DROPS its fixed aspect-ratio — the mech column is the
height authority and the photo cover-fills whatever that is; with a fixed ratio the
two columns could never agree. */
.science__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s); align-items: stretch; }
/* The img is ABSOLUTE inside the figure so it contributes zero intrinsic height to
the grid track — otherwise the photo's natural height competes with the mech column
and the taller of the two wins, which is exactly the mismatch being fixed. */
.science__img { position: relative; border-radius: var(--r-tile); overflow: hidden; min-height: 320px; }
.science__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Boxed rather than hairline-separated. Same recipe as .trust__item and .tile — white
on canvas, 1px --line-soft, --r-card — so the page keeps ONE container vocabulary
instead of inventing a treatment per section.
1fr rows: the three boxes split the column height equally, so the row's height is
set by the column as a whole and every box bottom lines up. */
.mech-list { display: grid; gap: var(--space-s); grid-template-rows: repeat(3, 1fr); }
.mech {
background: var(--surface-card);
border: 1px solid var(--line-soft);
border-radius: var(--r-card);
padding: var(--space-m);
}
.mech__head { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-2xs); }
.mech__head .idx { color: var(--brand-blue); }
.mech h3 { margin: 0; }
@media (max-width: 900px) { .science__row { grid-template-columns: 1fr; } }
/* ============================================================
full-bleed image bands
============================================================ */
.band { position: relative; overflow: hidden; padding: var(--section-pad) var(--gutter); color: #fff; }
.band > img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.band__scrim { position: absolute; inset: 0; z-index: 1; }
.band .wrap { position: relative; z-index: 2; }
.band--evidence .band__scrim { background: rgba(0,0,0,.58); }
.band--cta .band__scrim {
background: color-mix(in srgb, var(--surface-deep) 70%, transparent);
mix-blend-mode: multiply;
}
.band--cta .band__scrim2 { position: absolute; inset: 0; z-index: 1; background: rgba(5,0,46,.16); }
/* Bento tiles on the dark band: translucent ink cards with hairline borders, so the
photograph still reads through and the tiles feel cut from the band rather than
pasted onto it. Same radius family as the light bento cells. */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-s); margin: var(--space-l) 0; }
.stat__label { text-align: left; }
/* Outlined, not filled (client call via Loom follow-up): a white stroke on the
photo band, no background. */
.stat {
background: none;
border: 1px solid rgba(255,255,255,.38);
border-radius: var(--r-card);
padding: var(--space-m);
text-align: left;
}
/* tabular-nums is load-bearing, not typographic taste: the value counts up from 0, and
proportional digits change width as it climbs, which would shove the label under it
around for the whole animation. */
/* margin:0 is the biggest single margin leak on the page: this is a bare
, so the
UA's 1em resolves against --t-display-xl and lands at 64px top AND bottom, silently
inflating every gap in the evidence band. */
.stat__value {
margin: 0;
font-size: var(--t-display-xl); font-weight: 500; line-height: 1.05; letter-spacing: -.025em;
/* tabular-nums is load-bearing, not typographic taste: the value counts up from 0,
and proportional digits change width as it climbs, which would shove the label
under it around for the whole animation. */
font-variant-numeric: tabular-nums;
}
.stat__label { opacity: .82; margin-top: var(--space-xs); }
@media (max-width: 860px) {
.stats { grid-template-columns: 1fr; gap: var(--space-s); }
/* Same outlined rounded container as desktop (client call, superseding an earlier
"bare on mobile" note) — the white stroke/no-fill treatment inherits; only the
alignment centres. */
.stat { text-align: center; }
.stat__label { text-align: center; max-width: 28ch; margin-inline: auto; }
}
/* ── CTA split: one seamless black container ──────────────────
Same construction as the assessment .split — copy beside media, media on top on
mobile. The copy half is the video's exact ground (#000, measured from the render
corners), so there is no visible seam between the halves and the timelapse gets
its spotlight rather than carrying a headline. */
.cta-split {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
background: #000; color: var(--text-on-deep);
border-radius: var(--r-tile); overflow: hidden;
}
.cta-split__copy {
display: grid; gap: var(--space-m); align-content: center; justify-items: start;
padding: var(--space-xl);
}
.cta-split__copy p { opacity: .88; }
.cta-split__media { margin: 0; position: relative; min-height: 380px; }
.band__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
.cta-split { grid-template-columns: 1fr; }
/* media first — the video is the hook. A 4:3 panel with `contain`: the video
letterboxes inside it, but the bars are #000 on #000 — invisible — so the panel
gets real presence while the full frame always shows, uncropped. */
.cta-split__media { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
.cta-split__media .band__video { object-fit: contain; }
.cta-split__copy { padding: var(--space-l) var(--space-m) var(--space-l); }
}
/* ============================================================
included / faq / isi / footer
============================================================ */
.tile {
background: var(--surface-card); border: 1px solid var(--line-soft);
border-radius: var(--r-card); padding: var(--space-m); display: grid; gap: var(--space-xs); align-content: start;
}
.tile h3 { margin: 0; }
/* Capped like .compare-shell — full content width left the Q&A rows stretched thin. */
.faq { max-width: 880px; margin-inline: auto; }
.faq__item { border-top: 1px solid var(--line-soft); }
.faq__q {
width: 100%; display: flex; align-items: center; gap: var(--space-s);
padding: var(--space-m) 0; cursor: pointer; text-align: left;
}
.faq__q > span:first-child { flex: 1 1 auto; }
.faq__mark { color: var(--brand-blue); font-size: var(--t-subhead); line-height: 1; }
.faq__a { padding: 0 0 var(--space-m); max-width: 860px; }
.faq__item[data-open='false'] .faq__a { display: none; }
/* .isi and .footer sit outside and never had .section, so they carried their
own hand-set padding (72 / 88) and produced the page's two odd boundaries — 184 and
160 against 224 everywhere else. They now take --space-2xl like every section. */
.isi { background: var(--surface-sand); padding: var(--space-2xl) var(--gutter); }
/* Bento'd: each drug's safety copy in its own card. White-on-sand keeps the cards in
the page's one container recipe while the band still reads as a distinct zone. */
.isi__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s); margin: var(--space-s) 0; }
.isi__cols > div {
background: var(--surface-card);
border: 1px solid var(--line-soft);
border-radius: var(--r-card);
padding: var(--space-m);
}
@media (max-width: 860px) { .isi__cols { grid-template-columns: 1fr; } }
.footer { background: var(--surface-ink); color: var(--text-on-ink); padding: var(--space-2xl) var(--gutter) var(--space-xl); }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-l); }
/* fill goes on the ELEMENT, not on a descendant selector.