/** Shopify CDN: Minification failed Line 467:1 Unexpected "}" **/ @import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap"); /* ============================================================================ LP-08 · Mode A · men on a GLP-1, prevention angle ---------------------------------------------------------------------------- R11 — BRAND BEFORE THE FIRST RULE. brand/visual-system.md (locked 2026-05-12). PALETTE — the locked five, nothing else: #5f91d5 primary · wordmark · CTA fill #ebbc21 accent · marks #ffffff ground #1a1a1a body text #E5B23F product (gummy) Support tones derived from the primary only: #2F4E7E deep (text on light), #4A7BC0 hover, #EEF4FB tint. FORBIDDEN: pastels outside the five, pink/lilac, black+neon-green, candy gummy tones, and the deprecated #F5F2ED / #2F4A3C / #C8900A set. TYPOGRAPHY — Inter (400/500/600/700/800). Georgia italic ONLY for verbatim reader quotes. No display, script, slab or condensed faces. FORM — this is an ARTICLE, not a dashboard. The eleven corpus pages are text, image, button, text, image, button. No cards, no drop shadows, no tinted panels. The previous build carried 10 shadowed cards, 49 tinted blocks and 59 rounded elements; removing them cut a quarter of the page length on its own. Sections are separated by whitespace and a hairline. Nothing is a container. ========================================================================== */ :root{ --blue:#5f91d5; --blue-dk:#4A7BC0; --blue-tint:#EEF4FB; --blue-deep:#2F4E7E; --gold:#ebbc21; --gummy:#E5B23F; --ink:#1a1a1a; --white:#ffffff; --muted:#5C6066; --grey:#8A9198; --rule:#E4E7EA; --wrap:720px; /* ⚠️ ONE SOURCE FOR THE DESKTOP CONTAINER (2026-08-14). Three places have to agree on it — .wrap, the full-bleed band offset on ::before, and the hero's --hpad — and when they were three hard-coded 1240s they drifted apart the moment one changed. They are variables now; change here only. Narrowed 1240 → 1100 the same day: at 1240 the wide elements sat at x=128 while the centred prose sat at x=320, and the 192px step was visible as a jump every time the page went from a text block to a picture row or the review wall. At 1100 the step is ~120px and reads as a deliberate breakout instead of two competing layouts. */ --deskwrap:1100px; --deskpad:28px; } *{box-sizing:border-box} html{overflow-x:hidden} /* never on body — it kills position:sticky */ body{ margin:0;padding:0;background:var(--white);color:var(--ink); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-weight:400;font-size:17.5px;line-height:1.62; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} a{color:inherit} .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px} /* ---- HERO — full-bleed photo, everything sits on top of it -------------- ⚠️ THE HERO OWNS ITS HEIGHT. THE PHOTO DOES NOT. (fixed 2026-08-14) This is the LP-09 construction (`.hero-img{height:clamp(560px,82vh,740px)}` + object-fit:cover) and it is here for a measured reason. Before: the photo ran at height:auto, so the hero was 1.34 × viewport width — 429px on a 320px phone. The copy block needs 352px at 33px type, the quote sits at 11%, and 429 does not hold both. Measured on the live page at 320px: headline 6 lines / 222px, .vtext top y=55, quote 47–124 → OVERLAP, which is exactly what the founder photographed. The same rule made the hero 965px tall at 768px, pushing the CTA under the fold on every tablet. After: a height BAND independent of the photo, so the room for the copy no longer shrinks with the screen, and the photo covers whatever box it gets. Together with the fluid type below, the clearance between quote and headline is ≥110px at every width from 280px up. ⚠️ Do not restore height:auto on the image. It reintroduces both bugs. */ /* The band is measured, not taste. At 320px the copy block is 238px and the quote 55px, so the smallest hero that clears both is 353px; 430 leaves a ~70px breath. The ceiling matters more than the floor: at 84vh/720px a tablet put ~320px of empty photo between the quote and the headline (founder flagged it), so the cap comes down to 500 — the photo still carries the frame, it just stops idling. */ .vhero{ position:relative;isolation:isolate;background:#171717;overflow:hidden; height:clamp(430px,64vh,500px); } /* object-position 50% 0 — the crop comes off the BOTTOM (tiled floor, nothing in it). Both heads sit at the very top of hero.png; any other anchor clips a crown. Same value the ≥1000px split uses, for the same reason. */ .vhero>img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block} /* one shade, bottom-weighted, so white type holds over any part of the photo */ .vshade{ position:absolute;inset:0;pointer-events:none; background: linear-gradient(to bottom,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 22%), linear-gradient(to top,rgba(0,0,0,.92) 0,rgba(0,0,0,.72) 30%,rgba(0,0,0,0) 62%); } .vmark{ position:absolute;top:16px;left:0;right:0;text-align:center;z-index:2; color:#fff;font-weight:700;font-size:14px;letter-spacing:.26em;text-decoration:none; padding:6px; } /* The quote pill is back — founder's own call 2026-08-12, not an import. It is IN FLOW above the headline, not floating: two earlier absolutely-positioned attempts landed on the subject's face and then on the headline itself. In flow it cannot collide, whatever the photograph does. The rating rides at the end of the sub-line instead of holding its own row — that removed one line from the hero. */ .vtext{position:absolute;left:0;right:0;bottom:22px;z-index:2;padding:0 20px} .vquote{ /* Position measured, not guessed — variance scan of hero.png over every bubble-sized rectangle in the top 42%: the reflected head x 57-69%, y 6-24% (std 40-52, the busiest area) his back x 14-58%, y 11-20% std 25.0 · mean 63.5 ← phone/tablet beside the head x 66%, y 31% std 13.9 · mean 55.5 ← desktop split On phones the headline block grew when the hero CTA went in and reached up into y31%, so the quote collided with it. Moved onto his back at y11%, which is above the headline whatever the text does. Founder 2026-08-12: "It should be on his back." The desktop split keeps the head position — there the type lives in its own column and nothing can collide. ⚠️ top:31% is exact ONLY while the hero photo runs at its natural aspect (height:auto → hero height == image height). The ≥1000px split crops the photo, so it re-derives top in vw — see that block. Re-run the scan if hero.png is ever replaced. */ position:absolute;top:11%;left:14%;right:auto;z-index:2;margin:0;width:44%;max-width:none; background:rgba(255,255,255,.09); -webkit-backdrop-filter:blur(14px) saturate(115%); backdrop-filter:blur(14px) saturate(115%); border:1px solid rgba(255,255,255,.16); border-radius:2px;padding:8px 12px 9px; } .vquote blockquote{ margin:0;font-family:Georgia,serif;font-style:italic; font-size:clamp(12.5px,3.9vw,16px);line-height:1.42;color:rgba(255,255,255,.93); text-shadow:0 1px 9px rgba(0,0,0,.5); } /* ⚠️ FLUID, not stepped (fixed 2026-08-14). The hero type used to jump 33px → 42px → 44px at two breakpoints, which meant every phone from 280px to 559px rendered the SAME 33px headline: six lines on a 320px screen, three on a 430px one. Founder: "the text needs to get smaller when the phone is smaller." A clamp does that continuously — 25px at 320, 28px at 375, 32px at 430, 44px from 595 up — and removes the jumps at 560/760. The vw term is what makes it track the screen; the floor is what stops it collapsing on a folded phone. */ .vtext h1{ margin:0 0 10px;color:#fff;font-size:clamp(25px,7.4vw,44px);line-height:1.12;font-weight:700; letter-spacing:-.026em;text-wrap:balance; } .vtext h1 .brk{display:block;font-weight:400;color:rgba(255,255,255,.72)} /* ⚠️ SIZED UP 2026-08-14 — founder: the deck "is too small". It ran at clamp(14.5px,4.3vw,18px), which on a phone put 15.5px against a 28px headline: caption distance, not a second voice. No wording change fixes that, so the type moved with the copy. */ /* balance stops "fix." dropping alone onto a second line at 375px */ .vsub{margin:0;color:rgba(255,255,255,.94);font-size:clamp(17px,5vw,22px); line-height:1.38;font-weight:600;letter-spacing:-.008em;text-wrap:balance} /* the credibility line dropped a step when the deck took its place under the headline — it is the third voice in the hero, not the second */ .vrate{margin:9px 0 0;color:rgba(255,255,255,.72);font-size:clamp(13px,3.6vw,15.5px); line-height:1.45;font-weight:500} .vrate b{font-weight:700;color:rgba(255,255,255,.92)} .vrate .rate{white-space:nowrap;margin-left:10px} .vrate .stars{color:var(--gold);letter-spacing:.06em;margin-right:6px} .vrate .nb{white-space:nowrap} .vsub b{font-weight:700;color:#fff} .vsub .rate{white-space:nowrap;margin-left:10px} .vsub .nb{white-space:nowrap} /* GLP-1 stays whole — the hyphen is a break opportunity */ .vsub .stars{color:var(--gold);letter-spacing:.06em;margin-right:6px} /* ---- 560–999px · TABLET — hero full-bleed, copy on the page measure ------ The two stepped h1 sizes that used to live here (42px at 560, 44px at 760) are gone: the clamp above covers the whole range continuously. The hero was also capped at `max-width:720px; margin:0 auto` from 760px up. That cap existed only because a height:auto 3:4 photo across 1280px would have been 1700px tall — the height band above removes the reason, and the cap was costing us white gutters beside a portrait photo on every tablet, making the hero the one boxed element on an otherwise full-bleed page. LP-09 runs its hero at 100vw at every width and constrains only the copy. Same here: photo spans the viewport, headline keeps the 720px measure the article below it uses, so the line length stays readable on an iPad. */ /* ⚠️ UPPER BOUND IS LOAD-BEARING. Without `and (max-width:999px)` the max-width+margin:auto below also hits the ≥1000px split, where .vtext is a grid item in the left column: at 1728 it centred the copy inside an 854px column and put the headline 107px right of the wordmark, breaking the one left edge the whole layout is built on. Measured, not theoretical. */ @media(min-width:560px) and (max-width:999px){ .vtext{max-width:var(--wrap);margin:0 auto} .vquote{width:min(44%,330px)} } /* ---- ≥1000px: SPLIT HERO — type left, photo right, edge to edge ---------- Founder direction 2026-08-12, from a comparable niche brand's listicle hero. This is the ONE element that spans the viewport; everything below it keeps the 720px column. Why a split solves what the overlay could not: laid over a full-width photo, the 3:4 portrait had to be cropped to ~38% of its height, which cut both heads, and the shade needed to run to 62% at .92 alpha to carry white type — a 145px band of near-black with no picture in it. Side by side, the type sits on flat #171717 and the photo keeps a near-square box it can actually fill, so neither has to damage the other. The shade is switched off here for the same reason: nothing is on top of the photo any more. Three siblings share the left column via explicit rows, so no markup changes: wordmark top, headline block centred in the slack, quote at the foot. The photo spans all three rows. ------------------------------------------------------------------------ */ @media(min-width:1000px){ .vhero{ /* ⚠️ NOT A FREE NUMBER — it IS the article's left edge, computed. Founder 2026-08-14: "the hero and the logo should align with the text below." They never did: the old clamp(88px,9.5vw,190px) put the hero type at 137px against the body's 128px at 1440 (9px off, read as a wobble) and at 97px against 172px at 1024 (75px off). My own first pass made it worse — 66px against 128px. The body edge is knowable: .wrap is max-width:1240 + 28px padding at this breakpoint, so its text starts at (100vw − 1240)/2 + 28, floored at 28. That is exactly the expression below. Measured after: hero 128 / body 128 at 1440, 272/272 at 1728, 28/28 at 1000. ⚠️ If .wrap's 1240 cap or its 28px padding ever change, change them here too — these two numbers are now a pair. */ /* ⭐ THE HERO SITS ON THE PROSE AXIS, NOT THE CONTAINER EDGE. The page has exactly two vertical lines at this breakpoint: text at the centred 800px measure, pictures breaking out around it. The hero headline is text, so it belongs on the first one — the wordmark, the H1, the sub-line and the button now start at the same x as every paragraph below them. 400px is half the 800px prose measure; that is the whole formula. */ /* ⚠️ CAPPED AT 300px (founder 2026-08-14: "die Hero-Section noch etwas nach links"). The prose axis is 50vw − 400px, so it keeps walking right as the monitor grows: 320px of left padding at 1440, but 600px at 2000 — on a wide screen the headline sat almost at the middle of its own panel with a third of the black doing nothing. The cap means the hero holds the prose axis up to ~1400px, which is where most sessions are, and stops following it beyond that. ⚠️ Consequence, deliberate: above ~1400px the hero no longer shares the body text's left edge. That alignment was set earlier the same day; this narrows it to the widths where it is actually visible. */ --hpad:clamp(var(--deskpad), calc(50vw - 400px), 300px); max-width:none;margin:0; display:grid; /* 54/46, not 50/50. --hpad is charged twice against the text panel, so at 190px a half panel would leave a 400px column for a 47px headline — five lines. Giving the type side four extra points buys back ~58px and costs the photo nothing it was using. */ /* 64/36, was 54/46. Moving the type onto the prose axis pushed its left edge to 320px at 1440, and a 54% panel would have left a 417px column for a 42px headline — "Losing (And How To Fix It)" is one unbreakable 26-character unit and would have run onto the photo. 64% gives 576px and the photo still fills a 36% column it can cover without stretching. */ grid-template-columns:minmax(0,64%) minmax(0,36%); /* five rows: mark · slack · headline · quote · slack. Headline and quote are adjacent so they read as one group — with a single 1fr row between them the quote drifted 300px down the column. The two slack rows are .45/.55 — near-even, so the block is pinned to neither edge. The hero is 520 tall for ~340 of content, leaving ~90px above and below: enough to breathe, not the 200px of dead black it carried at 660. */ grid-template-rows:auto .45fr auto auto .55fr; /* ⚠️ HEIGHT, not min-height. With min-height the fr rows have no definite basis to resolve against, the row-spanning photo falls back to its own intrinsic 1194×1600, and the hero renders 965px tall — past the fold and 305px of it empty tiled floor. A definite height makes height:100% on the photo resolve and object-fit finally does its job. Left column needs ~320px for mark + headline + sub + quote, so 660 has room to spare and nothing can be clipped. */ /* 470, down from 580 → 540 → here (founder 2026-08-14: less air under the button and over the headline). The panel holds ~250px of type; at 540 the two slack rows still split ~240px of bare black around it, and the gap under the CTA read as an unfinished section rather than as margin. At 470 the slack is ~170px, ~75 over the headline and ~93 under the button — enough to breathe, not enough to look empty. */ height:min(470px,72vh); /* …but a definite height alone still clips on a short laptop (13" at browser zoom 125% is a 600px viewport → 80vh = 480px for ~430px of type, and any zoom above that cuts the button off). LP-09 hit exactly this and moved off a fixed box. min-content lets the hero grow when the content genuinely needs it, while `height` above stays the basis the fr rows and the photo's height:100% resolve against. ⚠️ Safe ONLY because .vhero>img carries min-height:0 — without it the photo's intrinsic 1194×1600 becomes the container's min-content height and the hero blows out to 965px again. Do not remove that line. */ min-height:min-content; } /* cover has to drop ~200px somewhere and both heads sit at the very top of hero.png — at 8% it already clipped his crown. So the crop comes entirely off the bottom (tiled floor, nothing in it). */ .vhero>img{ grid-column:2;grid-row:1 / -1; width:100%;height:100%;object-fit:cover;object-position:50% 0; /* ⚠️ without min-height:0 the photo's intrinsic 1194×1600 becomes the min-content contribution of a row-spanning item and inflates the whole hero past the viewport. */ min-height:0; } /* The seam between panel and photo was a hard vertical edge. The shade is re-used here as a horizontal blend: it sits in the same grid cell as the photo (same column, same rows) and, being later in the DOM, paints on top. 26% of the panel is enough to read as a dissolve without eating the man. */ .vshade{ grid-column:2;grid-row:1 / -1;position:relative;inset:auto; background:linear-gradient(to right, #171717 0, rgba(23,23,23,.92) 4%, rgba(23,23,23,.55) 12%, rgba(23,23,23,.18) 20%, rgba(23,23,23,0) 28%); } .vmark{ grid-column:1;grid-row:1; position:static;text-align:left; padding:22px 0 0;margin-left:var(--hpad); } .vtext{ grid-column:1;grid-row:3; position:static;align-self:end; /* ⚠️ ASYMMETRIC ON PURPOSE. --hpad is now the article's left edge, which at 1728 is 272px — charged on BOTH sides it would have left a 389px column for a 48px headline. The right side owes nothing to the article edge; it only needs to clear the photo seam, and 40px does that. */ padding:16px 40px 0 var(--hpad); } /* Scales with the viewport, and the FLOOR has to come down as --hpad goes up: at 1000px the padding leaves a ~350px column. Stepped down again for the inline bracket below — "Losing (And How To Fix It)" is 26 characters against 21 for the longest set line, so it needs roughly a fifth off the size to share a line with "Losing". */ /* raised with --hpad above: 30px at 1000 (was 26), 42 at 1440, 48 from ~1650. max-width keeps the measure sane past 1600px, where the panel is 860px wide and an uncapped line would run to 22 words. */ .vtext h1{font-size:clamp(30px,2.9vw,48px);margin-bottom:14px;text-wrap:balance;max-width:15em} .vsub{max-width:32em} /* founder 2026-08-12: the bracket rides beside "Losing", not under it. display:inline alone was not enough — the browser still ended a line on "Losing" and pushed the bracket down. Binding the two into one unbreakable unit forces the break to happen BEFORE "Losing", so the pair lands on a line together. That unit is 26 characters against 21 for the longest set line, which is why the size above had to come down with it. Desktop only: on a phone column the unit would overflow. */ .vtext h1 .brk{display:inline} .vtext h1 .tail{white-space:nowrap} /* text-wrap:balance above evens the remaining lines out. Without it the unbreakable tail pushed everything before it up and left "What You're" stranded as a two-word line. */ /* ⚠️ was a flat 17px, which silently undid the sized-up deck at exactly the widths where the headline is largest — 42px H1 against a 17px deck. It scales with the panel now, floored at the phone value. */ .vsub{font-size:clamp(19px,1.5vw,23px)} /* on flat #171717 the blur has nothing to sample, so this reads as a plain bordered quote box — which is what the reference does anyway. */ /* EXACTLY on his back (founder 2026-08-12). A column profile of hero.png over rows y20-55% puts his back at x 10-52% — at x 54% the column mean jumps 48 → 76 → 107, which is the lit mirror, not him. Best box inside that range: x 19-53%, y 29-37% std 15.7 · mean 46.7 chosen over the flatter x26-56 box because the box must stay inside 10-52% at EVERY width. At 1000px a min-width pushed the 26% box out to 64% — i.e. its right third landed on the mirror. This one scales purely (no min-width), so 19-53% holds from 1000 to 2560. The earlier y11% spot sat on his shoulders and ran past him into the mirror. The maths, since cover crops in this layout: the panel is 46vw wide and the photo is scaled to that width, so its drawn height is 46vw × 1600/1194 = 61.6vw. Image-y 29% therefore lands at .29 × 61.6vw = 17.9vw from the top — NOT at 29% of the 520px hero. Capped at 58% of the hero because past ~1700px the crop is deep enough (at 1920 only the top 40% of the photo is on screen) that 19.4vw would fall out of the frame. ⚠️ An absolutely positioned GRID ITEM is laid out against its grid AREA, not the grid. So left/width percentages here are ALREADY percentages of the photo panel — left:19% IS 19% of the photo. (Writing calc(50% + 10vw) put it at 70% of the panel and shot it off the right edge.) Only `top` needs vw, because the panel's height is the cropped 520px, not the photo's drawn height. ⚠️ 19% sits inside the left-edge fade (out by 28%), which is fine — the fade only darkens, and this box is dark already. */ .vquote{ grid-column:2;grid-row:1 / -1; position:absolute;top:min(17.9vw,58%);left:19%;right:auto; width:34%;min-width:0;max-width:340px; margin:0;padding:10px 14px 11px; } .vquote blockquote{font-size:clamp(17px,1.55vw,24px);line-height:1.38} } /* 14px top was all the air the lead had: it started immediately under the hero's black edge and its last line sat hard against the tinted band of R1 below it (founder 2026-08-14: "mehr Padding oben und unten"). */ .lead{padding:30px 0 34px} .lead p{margin:0 0 15px;font-size:19px;line-height:1.58} .lead p:last-child{margin-bottom:0} .lead .kicker{ display:block;font-size:12.5px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--blue);margin-bottom:8px; } /* ---- CTA — repeated verbatim, never escalating (6 of 8 multi-CTA pages) ⚠️ BUTTON WORDING: "Protect The Muscle". Founder decision 2026-08-12, taken with the risk on the table. PACK-FRONT-LOCKED.md L183 rejects "Protect Muscle" for the PACK as a disease-claim risk with a lawyer flag — which is why the product is called Preserve Gummies. A CTA is a different surface, but FDA structure/function applies to marketing too, and Meta ad review is the stricter gate: "protect" on the LP can drag the ad down with it. Safe alternative if it is ever flagged: "Keep The Muscle". -------------- */ .cta{margin:26px 0 32px;text-align:center} /* hero CTA — sits under the sub-line inside the hero (founder direction 2026-08-12). Needs the .vtext prefix: .btn is declared after this and its width:100% would otherwise win on source order and stretch it to the column. Sized to its words, not to the column. */ .vtext a.vbtn{display:inline-block;width:auto;margin-top:20px;padding:14px 30px;font-size:16px} /* bigger, founder 2026-08-14 — it is the only ask on the page and it was sized like a form control */ .btn{ display:block;width:100%;background:var(--blue);color:var(--white); border:0;border-radius:8px;padding:21px 26px;font-family:inherit; font-size:19px;font-weight:700;letter-spacing:-.005em; cursor:pointer;text-decoration:none;text-align:center; } .btn:hover,.btn:focus-visible{background:var(--blue-dk)} .btn:focus-visible{outline:3px solid var(--blue-deep);outline-offset:2px} .cta .sub{font-size:14px;color:var(--muted);margin:10px 0 0;line-height:1.5;white-space:nowrap} .cta .sub b{color:var(--ink);font-weight:600} /* ---- reasons ------------------------------------------------------------ */ /* ⚠️ THE BOTTOM VALUE IS NOT DECORATIVE. This rule was `padding:32px 0 0` — no bottom padding at all. R1 and R3 hid it because .surf-tint pads them, but R2 and R4 carry no surface, so their last line sat flush on the next section's edge (founder 2026-08-14: "especially in section four, there is no padding on the bottom"). */ /* padding, NOT padding + margin: the two used to stack with the next section's padding for ~136px of white under the last button. The section's own padding is the rhythm; the margin was duplicating it. */ .reason{padding:34px 0 38px;border-top:1px solid var(--rule);margin-top:0} /* ⚠️ .arg EXISTS FOR ONE REASON: the whole argument column — heading, copy and the ask — has to be a SINGLE element so it can be position:sticky on desktop. As separate grid items it cannot travel as a block. On a phone the wrapper must not reorder anything, so display:contents dissolves it and the three parts order themselves: heading, picture, copy. That keeps the mobile reading order the page has always had, even though the picture now comes first in the markup. */ .reason{display:flex;flex-direction:column} .arg{display:contents} /* ⚠️ The CTA is the last thing in a reason, so its own bottom margin stacks on top of the section's padding AND the next section's padding — measured ~136px of dead white under the guarantee line on a phone. The section owns the separation; the button does not add to it. */ .arg > .cta{margin-bottom:0} .arg > h2{order:1} .reason > figure:first-of-type{order:2} .arg > *:not(h2){order:3} h2{font-size:26px;line-height:1.25;font-weight:700;margin:0 0 15px;letter-spacing:-.019em} h2 .n{color:var(--blue)} .reason p{margin:0 0 15px} .reason p:last-of-type{margin-bottom:0} em{font-family:Georgia,serif;font-style:italic;color:var(--ink)} figure{margin:22px 0 26px} figure img{width:100%;border-radius:4px} figcaption{font-size:13.5px;color:var(--muted);margin-top:9px;line-height:1.5} /* The explanatory diagrams are near-black. Inset by the wrap's 20px they put a hard black edge into a white page, and scrolling past four of them reads as one long black line down the left. Full-bleed instead: deliberate dark bands. Founder report 2026-08-12. */ figure.band{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} figure.band img{border-radius:0} figure.band figcaption{max-width:var(--wrap);margin:9px auto 0;padding:0 20px} } /* the "two jobs" block had no rule at all — it butted against the CTA above and its h3 fell back to the browser default size */ .kicker-line{font-weight:600;color:var(--ink)} /* ---- offer — a PRODUCT CARD, not a configurator. He does not choose here; the card hands him to the product page and the choice happens there (founder call 2026-08-11). ------------------------------------------- */ .offer{margin:34px 0 0;padding-top:32px;border-top:1px solid var(--rule);scroll-margin-top:52px} .offer h3{font-size:24px;font-weight:700;margin:0 0 5px;line-height:1.28} .offer .osub{color:var(--muted);font-size:16.5px;margin:0 0 22px} /* ---- PRODUCT CARD — the one licensed exception to the no-cards rule ------- The article form at the top of this file bans cards, shadows and rounded panels. This element is exempt by founder call 2026-08-14 ("make a product card, make a drop shadow, some separation, organise it better"): it is the only place on the page where something is being SOLD rather than argued, and it has to read as a product tile, not as another paragraph. Nothing else on the page may take a shadow off the back of this. */ a.card{ display:block;text-decoration:none;color:inherit; background:var(--white); border:1px solid #E8ECF1;border-radius:14px;overflow:hidden; box-shadow:0 1px 2px rgba(26,26,26,.04), 0 8px 24px rgba(26,26,26,.08); transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; } a.card:hover,a.card:focus-visible{ border-color:#D3DEEC; box-shadow:0 2px 4px rgba(26,26,26,.05), 0 16px 40px rgba(26,26,26,.13); transform:translateY(-2px); } a.card:focus-visible{outline:3px solid var(--blue-deep);outline-offset:3px} a.card img{width:100%;display:block;background:#EDF1F6} /* more room than the old 18px — the body was the cramped half of the card */ .cbody{padding:24px 26px 26px} .cname{margin:0;font-size:20px;font-weight:700;line-height:1.28;letter-spacing:-.012em} .crate{margin:7px 0 0;font-size:14px;color:var(--muted)} .crate .stars{color:var(--gold);letter-spacing:.08em;margin-right:5px} /* a hairline under the name block: the separation the founder asked for — identity above, what-you-get below, ask at the bottom */ .cbul{margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--rule)} .cbul li{ list-style:none;font-size:15.5px;color:var(--ink);line-height:1.5; padding:0 0 10px 24px;position:relative; } .cbul li:last-child{padding-bottom:0} .cbul li::before{ content:"✓";position:absolute;left:0;top:0;color:var(--blue); font-weight:700;font-size:14px; } .cbody .btn{display:block;text-align:center;margin-top:22px;border-radius:9px;padding:15px 18px} .cfoot{margin:12px 0 0;font-size:13px;color:var(--grey);line-height:1.5;text-align:center} .gt{font-size:15px;font-weight:700;margin:26px 0 10px} /* ---- FAQ ---------------------------------------------------------------- */ /* bottom value added 2026-08-14 — the last question sat flush on the tinted review band below it */ .faq{margin:34px 0 0;padding:32px 0 36px;border-top:1px solid var(--rule)} .faq h3{font-size:22px;font-weight:700;margin:0 0 12px} details{border-top:1px solid var(--rule)} details:last-of-type{border-bottom:1px solid var(--rule)} summary{padding:15px 38px 15px 0;font-weight:600;font-size:16px;cursor:pointer; list-style:none;position:relative;line-height:1.45} summary::-webkit-details-marker{display:none} summary::after{content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%); color:var(--blue);font-size:21px;line-height:1} details[open] summary::after{content:"–"} details .a{padding:0 0 16px;font-size:15.5px;color:var(--muted);line-height:1.6} details .a p{margin:0 0 10px} details .a p:last-child{margin:0} .panel{margin:0;padding:0} .panel li{list-style:none;display:flex;justify-content:space-between;gap:14px; padding:8px 0;border-bottom:1px solid var(--rule);font-size:15px} .panel li:last-child{border-bottom:0} .panel b{color:var(--ink);font-weight:600} .panel span{color:var(--muted);white-space:nowrap} /* ---- reviews — big images, horizontal snap carousel -------------------- */ .reviews{margin:34px 0 0;padding-top:8px;text-align:center} .reviews h3{font-size:22px;font-weight:700;margin:0 0 4px} .reviews .agg{color:var(--muted);font-size:15px;margin:0} .reviews .agg .stars{color:var(--gold);letter-spacing:.08em} /* the heading block centres; the cards inside the rail stay left-set */ .reviews .track{text-align:left} .slider{position:relative} /* arrows are a desktop affordance — on a phone the thumb already does this */ .sarrow{display:none} .reviews .hint{margin:10px 0 0;font-size:11.5px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--grey)} .track{ display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;margin:12px -20px 0;padding:0 20px 14px; scrollbar-width:thin; } /* ⚠️ The review cards are the ONE deliberate exception to the no-cards/no-shadow rule at the top of this file. Founder call 2026-08-12: they need to read as separate objects you can swipe through, and a hairline border alone was too flat to signal that. Nothing else on the page gets a shadow. */ .track .card{ flex:0 0 82%;max-width:330px;scroll-snap-align:start; border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--white); box-shadow:0 1px 2px rgba(26,26,26,.05), 0 6px 20px rgba(26,26,26,.10); } .track .card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block} .cx{padding:15px 16px 17px} .cx .s{color:var(--blue-deep);font-size:13px;letter-spacing:.1em} .cx .t{font-weight:700;font-size:16px;margin:5px 0 7px;line-height:1.38} .cx p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.55} .cx .w{margin:11px 0 0;font-size:13px;color:var(--ink);font-weight:600} .cx .w span{color:var(--grey);font-weight:400} @media (min-width:601px){ .track .card{flex:0 0 46%;max-width:330px} } /* ⚠️ PHONE ONLY — founder 2026-08-14: "move the bullet points a little bit to the right and center the whole element." The block centres; the LIST does not. It is an inline-block, so it shrinks to its longest line and that block is what gets centred, while the sentences inside stay flush left — centred bullet text would give three ragged left edges. Desktop already did this (≥1000px); this brings the phone in line. */ .close{margin:40px 0 0;padding-top:8px;text-align:center} .cl{list-style:none;margin:0 0 22px;padding:0;display:inline-block;text-align:left;padding-left:10px} .cl li{ position:relative;padding:0 0 0 30px;margin:0 0 13px; font-size:16.5px;line-height:1.55;color:var(--muted); } .cl li:last-child{margin-bottom:0} .cl li b{color:var(--ink);font-weight:700} .cl li::before{ content:"";position:absolute;left:2px;top:9px;width:9px;height:9px; border-radius:50%;background:var(--gold); } .clsub{font-size:13.5px;color:var(--grey);margin:12px 0 0;text-align:center} .close h3{font-size:25px;font-weight:700;margin:0 0 12px;line-height:1.28} .close p{color:var(--muted);font-size:16.5px;margin:0 0 13px;line-height:1.6} .close p b{color:var(--ink)} footer{text-align:center;padding:30px 20px 44px;font-size:12.5px;color:var(--muted);line-height:1.65} @media (max-width:600px){ body{font-size:17px} h1{font-size:27px} h2{font-size:23px} .lead p{font-size:17.5px} .offer h3,.close h3{font-size:21px} .faq h3,.reviews h3,.tbl h3{font-size:20px} th,td{padding:11px 8px;font-size:12.5px} td.us{min-width:130px;max-width:130px} } @media (max-width:360px){ .wrap{padding:0 15px} /* the carousel bleeds to the edge with -20px; below 360 the wrap padding drops to 15px and the 5px difference became a horizontal scroll */ .track{margin-left:-15px;margin-right:-15px;padding-left:15px;padding-right:15px} h1{font-size:25px} } /* ══════════════════════════════════════════════════════════════════════ DESKTOP LAYER · this block must stay LAST in the stylesheet — the .track rule below has the same specificity as the mobile swipe-track rule and only wins on source order. ══════════════════════════════════════════════════════════════════════ */ @media(min-width:760px){ /* ⚠️ the margin shorthand must keep the negative left offset — the mobile rule centres this 100vw box with margin-left:calc(50% - 50vw), and a plain "margin:30px 0" silently resets it and shunts the band 300px right */ figure.band{ background:#1d1c1d;padding:34px 0 28px; margin-top:30px;margin-bottom:34px; margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); } figure.band img{max-width:min(760px,62vh);margin-inline:auto} figure.band figcaption{color:rgba(255,255,255,.68)} .reason figure:not(.band), .offer figure:not(.band), .lead figure:not(.band){ width:min(100vw,1100px); margin-left:calc(50% - min(50vw,550px));margin-right:calc(50% - min(50vw,550px)); } body{font-size:20px} .reason p, .lead p{font-size:20px} .lead p{font-size:21px} details .a p{font-size:18px} footer p{max-width:var(--wrap);margin-inline:auto} } @media(min-width:1024px){ .track{ display:grid;gap:18px; overflow:visible;width:min(100vw,1100px);padding:0; margin:14px 0 0;margin-left:calc(50% - min(50vw,550px)); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .track .card{flex:none;max-width:none;scroll-snap-align:none} .reviews .hint{display:none} a.card{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);align-items:stretch} a.card img{height:100%;object-fit:cover} .cx{padding:24px 26px 26px} } /* ══════════════════════════════════════════════════════════════════════ ≥1000px · REASONS RUN TWO-UP — picture left, argument right. Founder direction 2026-08-12. Must sit after the DESKTOP LAYER block: that one gives figure.band a full-bleed 100vw and .reason figures 1100px, and both have to be undone here on source order. The section breaks out of the 720px prose column to 1080px, because at 720 a 44/56 split leaves a 300px picture and a 380px measure — the burned-in type in the diagrams would fall under 20px and the argument would read like a newspaper column. At 1080 the picture gets ~460px and the argument ~570px, which is still inside the corpus measure band. row-gap MUST stay 0: the picture spans 30 implicit rows so it can sit beside the whole argument, and any row-gap would be multiplied across all 30. Vertical rhythm comes from the existing h2/p margins instead. ══════════════════════════════════════════════════════════════════════ */ @media(min-width:1000px){ .reason:not(.no-fig){ display:grid; grid-template-columns:minmax(0,44%) minmax(0,1fr); column-gap:46px;row-gap:0; align-items:start; } /* ⭐ BOTH COLUMNS STICK, AND THAT IS THE WHOLE TRICK. Founder 2026-08-14: "the text should scroll with it, or the image should scroll with it" — then, on R1: "the text is not sticky, please also do it here." Those are the same request seen from two sections. Why R1 behaved differently: sticky only does something when the element is SHORTER than its container. R3's copy is long, so the picture has room to travel and pins. R1's copy is short and its diagram is the tall one — there the PICTURE has no travel and the copy is what needs to pin. Rather than hard-code which is which per section, both carry sticky with the same offset: whichever column is shorter travels, the taller one simply never has room to and behaves normally. Self-balancing, and it stays correct when copy is edited. Picture and heading start on the same line (grid-row 1 for both), as asked earlier the same day. ⚠️ Depends on the overflow-x:clip rule further down — see it before concluding sticky is broken. */ .reason:not(.no-fig)>.arg{ display:block;grid-column:2;grid-row:1; align-self:start;position:sticky;top:32px; } .reason:not(.no-fig)>figure:first-of-type{ grid-column:1;grid-row:1; align-self:start;position:sticky;top:32px; } .arg>h2{margin-top:0} /* (The second-figure rules that lived here are gone with R3's flat-lay — no reason carries two pictures any more.) */ /* undo the full-bleed band — inside a column it is a framed picture, not a band across the viewport */ .reason figure.band{ width:auto;margin:0;padding:20px;background:#1d1c1d;border-radius:3px; } .reason figure.band img{max-width:100%;margin:0} .reason figure.band figcaption{max-width:none;margin:11px 0 0;padding:0} .reason figure:not(.band){width:auto;margin-left:0;margin-right:0} } /* ══════════════════════════════════════════════════════════════════════ ≥1000px · SECTION SURFACES — three brand fields, nothing invented. Founder direction 2026-08-12: readable separation between sections. #ffffff the ground. brand/visual-system.md picks it over #F5F2ED deliberately ("cleaner than the rejected Manus default") — it is what makes us read pharma-D2C and not wellness. #EEF4FB the ONLY sanctioned light tint, derived from #5f91d5. #1a1a1a the dark field (Black-Edition pack surface). #ebbc21 and #E5B23F stay marks, never fields. Creams and pastels are forbidden outright, so this is the whole available set. Rhythm — no two neighbours alike, and the eye gets a landmark every other section: lead ○ · R1 ◐ · R2 ○ · R3 ◐ · R4 ○ · offer ◐ · faq ○ · reviews ◐ · close ● ⚠️ This partially reverses the "no tinted panels" line in the header of this file. That was a real decision — stripping 49 tinted blocks cut a quarter of the page. These are full-bleed FIELDS behind the text, not containers around it: no borders, no radius, no shadow, so the article form survives. Founder call, taken with that on the table. Painted by a pseudo-element rather than a background, so the negative margins the two-column reasons already carry are left alone. ══════════════════════════════════════════════════════════════════════ */ @media(min-width:1000px){ /* 64, up from 54 — founder 2026-08-14 asked for more air above and below the sections; this is the value the plain .reason sections now match. */ .surf-tint,.surf-dark{position:relative;padding-top:64px;padding-bottom:64px} /* ⚠️ NOT left:calc(50% - 50vw). That centres the band on the ELEMENT, which only lands on the viewport when the element is itself viewport-centred. The prose sections are capped at 860 and left-anchored inside a 1184 wrap, so their centre sits ~162px left of the viewport centre and the band ended 162px short of the right edge — caught on screen, not in the numbers. Over-extending 100vw past both edges fixed the look but blew the document out to 2650px; overflow-x:hidden hid the scrollbar, but the overflow was still there and iOS does not always honour that. So the offset is computed instead: the distance from any section's left edge back to the viewport is exactly the wrap's own centring plus its padding, and that IS knowable — max((100vw - 1240px)/2, 0) + 28px. Exact at every width, and the band is then precisely 100vw wide with nothing hanging over. */ .surf-tint::before,.surf-dark::before{ content:"";position:absolute;z-index:-1; top:0;bottom:0; left:calc(-1 * (max((100vw - var(--deskwrap)) / 2, 0px) + var(--deskpad))); width:100vw; } .surf-tint::before{background:#EEF4FB} .surf-dark::before{background:#1a1a1a} /* the surfaces carry their own air, so the old rules between sections are redundant and would draw a line inside a coloured field */ .surf-tint,.surf-dark{margin-top:0;margin-bottom:0;border-top:0} .offer.surf-tint{padding-top:54px} /* dark field: invert the type. Every colour that was set against white has to be answered here or it goes invisible. */ .surf-dark{color:rgba(255,255,255,.82)} .surf-dark h3{color:#fff} .surf-dark p{color:rgba(255,255,255,.72)} .surf-dark p b,.surf-dark li b{color:#fff} .surf-dark .cl li{color:rgba(255,255,255,.88)} .surf-dark .clsub{color:rgba(255,255,255,.55)} /* R3's diagram sits on the tint — drop the dark card padding so the picture reads as a picture, not a plaque */ .surf-tint figure.band{background:#1d1c1d} } /* ══════════════════════════════════════════════════════════════════════ ≥1000px · ONE COLUMN, ONE PADDING — everything under the hero. Founder direction 2026-08-12: "Everything below the hero section should have the same padding left and right for all the sections." This retires the three competing widths the page had grown: 720 for prose, 1080 for the two-up reasons, 1100 for the review track, each with its own negative margins. Now .wrap is 1080/40 and NOTHING breaks out of it, so every section starts and ends on the same two vertical lines. Prose still gets a measure — a paragraph running the full 1000px would be ~135 characters, twice the corpus band. It is capped and anchored to the SAME left edge, so the eye reads one margin down the whole page while the reasons and the reviews use the full width beside it. Only the hero is exempt; it spans the viewport. ══════════════════════════════════════════════════════════════════════ */ @media(min-width:1000px){ /* Founder wants the sections below to sit WIDER than the hero's generous margins. Most of the visible side margin here is the 1080 cap centring itself, not the padding — dropping 40→28 alone would move the edge 12px and read as no change. So the cap goes up too. */ .wrap{max-width:var(--deskwrap);padding:0 var(--deskpad)} /* nothing breaks out any more — undo every full-bleed/oversize rule the 760px DESKTOP LAYER set, or they win nothing but a ragged page */ figure.band, .reason figure:not(.band), .offer figure:not(.band), .lead figure:not(.band){ width:auto;margin-left:0;margin-right:0; } figure.band{margin-top:0;margin-bottom:0} figure.band img{max-width:100%} /* Prose measure, left-anchored to the shared edge. 800, not the 680 it was: once the container widened to 1240, a 680 column left ~500px of bare white beside every paragraph and the page read half-empty. 800 gives ~76 characters at 20px — the top of the corpus band, and nowhere near the 135 an uncapped column would give. 860 was tried first and measured 82. .cta belongs in here: .btn is width:100%, so in a 1184px section the button rendered as a slab running far past every paragraph. */ .lead, .reason.no-fig, .faq, .cta{max-width:800px} /* ⚠️ .offer AND .close ARE NOT IN THAT LIST, AND MUST NOT BE. Both paint a full-bleed band through ::before, and that band's offset is computed from a LEFT-ANCHORED section: left:-(max((100vw-1240)/2,0)+28). Cap or centre the section itself and the painted field moves with it — which is exactly what happened when I centred them: the tint and the black ended short of the right edge with white spilling in on the left (founder: "the background should stay black", "over the whole width"). So the SECTION stays full width and only its CHILDREN are capped and centred. Band untouched, content centred. */ /* ⚠️ WRITTEN AS .offer.surf-tint, NOT .offer, ON PURPOSE. `.offer > *` is specificity 0,1,0 and loses to the base rules `.offer h3` (0,1,1) and `.offer .osub` (0,2,0) no matter how late it is declared — the heading stayed on the left edge while the rest centred. Doubling the class puts this at 0,2,0, which ties .osub and wins on order. */ .offer.surf-tint > *, .close.surf-dark > *{max-width:800px;margin-left:auto;margin-right:auto} /* ⚠️ CENTRED, not left-anchored (founder 2026-08-14, four screenshots). At 1440 each of these was an 800px block pinned at x=128 inside a 1184px container — 384px of bare white down the right side of the offer, the FAQ and the closing block, which is what made the lower half read as unfinished. Centred, they share an axis with the wide elements that break out around them (the two-up reasons and the review wall, both 1184) instead of hanging off one edge of them. ⚠️ .lead is deliberately NOT in this list — it is the paragraph directly under the hero and it holds the hero's left edge. Centring it would put it 192px right of the wordmark and re-open the misalignment fixed earlier today. If the lead should move too, the hero has to move with it, and the hero headline loses ~360px of column to do so. */ .lead, .reason.no-fig, .faq{margin-left:auto;margin-right:auto} /* desktop gets more of it than the phone — the hero above and the tinted band below are both hard edges, and the lead is the only thing between them */ .lead{padding:58px 0 58px} .reason{padding-top:64px;padding-bottom:64px;margin-top:0} /* the closing pledge reads as one centred block above its button (founder 2026-08-14) */ .close.surf-dark{text-align:center} .close .cl{display:inline-block;text-align:left} /* ⚠️ WAS text-align:left. Founder 2026-08-14: the closing line of a reason and the button under it are one beat, and that beat is centred. Left- aligned inside an 800px box that is itself left-anchored in a 1240px wrap, the button sat at neither the page centre nor the text edge — it read as unplaced. Centred, it is the only element on the page that is, which is what makes it read as the ask. */ /* margin-top 12, not the base 26: the button belongs to the line above it ("direkt unter 'It happens whether you train or not'"), not to the gap between two sections. The section's own bottom padding was already carrying the separation. */ .cta{text-align:left;margin-left:0;margin-right:auto;margin-top:12px} /* the kicker is the statement each reason lands on — centred in the ARGUMENT column, not across the page: the lead picture is sticky in the left column over the same rows, so a full-width line would print on top of it. */ /* ⚠️ LEFT, NOT CENTRED — reversed 2026-08-14 on founder's call: "sollte auch für den anderen Text left-aligned sein." Centred, it broke the column's flush-left edge and read as a caption; it stays a statement through weight and the space around it instead. (It WAS centred earlier the same day at his request — this supersedes that.) */ .arg>p.kicker-line{text-align:left;margin-top:22px;margin-bottom:0;font-size:19px} /* ⚠️ LEFT, NOT CENTRED — founder 2026-08-14: "please make all the buttons left-aligned." This reverses the centring set earlier the same day (margin:auto + text-align:center). The button now starts on the same edge as the line above it, which is what "directly under" actually looks like once the text is flush left too. .close's button is a bare .btn, not wrapped in .cta — it has to be named here or it stays a full-column slab. */ .cta .btn{max-width:460px;margin-left:0;margin-right:auto} /* the guarantee line belongs to the button, not to the column — it centres on the button's width, not on the text measure (founder 2026-08-14) */ .cta .sub{max-width:460px;margin-left:0;margin-right:auto;text-align:center} /* the offer's heading block centres over its card */ .offer h3, .offer .osub{text-align:center} /* ⚠️ THE CLOSING BUTTON IS THE EXCEPTION — founder 2026-08-14: "not this button." The reason CTAs sit flush left under their flush-left copy; the closing block is a centred pledge, so its button centres with it. */ .close .btn{max-width:460px;margin-left:auto;margin-right:auto} .lead figure, .offer figure{max-width:800px} /* ═══ REVIEW SLIDER · three visible, five in the rail ═══════════════════ Was a 3-column grid here, which silently dropped reviews 4 and 5 on desktop — the rail existed only on phones. Same swipeable track at every width now, with arrows as the pointer affordance. */ /* ⭐ THE RAIL RUNS THE FULL VIEWPORT (founder 2026-08-14: "von ganz links nach ganz rechts, damit man mehr Reviews sieht"). Inside the 1044px container only three cards fitted and twelve of the fifteen were behind an arrow. Breaking out to 100vw shows five on a 1920 screen and seven on an ultrawide, with the same negative-offset arithmetic the coloured bands use — the distance from a section's left edge back to the viewport is (100vw − deskwrap)/2 + deskpad, floored at deskpad. */ .track{ display:flex;gap:18px;overflow-x:auto;overflow-y:visible; scroll-snap-type:x mandatory; width:100vw; margin:20px 0 0; margin-left:calc(-1 * (max((100vw - var(--deskwrap)) / 2, 0px) + var(--deskpad))); padding:4px var(--deskpad) 16px; grid-template-columns:none; scrollbar-width:none; } .track::-webkit-scrollbar{display:none} /* fixed width now, not a fraction of the container — the rail is wider than the container, so "a third of it" would have made the cards enormous */ .track .card{flex:0 0 336px;max-width:none;scroll-snap-align:start} .sarrow{ display:grid;place-items:center;position:absolute;top:calc(50% - 24px); width:48px;height:48px;padding:0 0 4px; border:1px solid var(--rule);border-radius:50%;background:var(--white); color:var(--ink);font-size:26px;line-height:1;cursor:pointer;z-index:3; box-shadow:0 2px 12px rgba(26,26,26,.14); transition:border-color .15s ease, box-shadow .15s ease, opacity .15s ease; } /* the rail is full-bleed now, so the arrows ride the viewport edges rather than the container's */ .sarrow.prev{left:calc(-1 * (max((100vw - var(--deskwrap)) / 2, 0px) + var(--deskpad)) + 14px)} .sarrow.next{right:calc(-1 * (max((100vw - var(--deskwrap)) / 2, 0px) + var(--deskpad)) + 14px)} .sarrow:hover{border-color:var(--blue);box-shadow:0 4px 18px rgba(26,26,26,.2)} .sarrow:focus-visible{outline:3px solid var(--blue-deep);outline-offset:2px} .sarrow[disabled]{opacity:.28;cursor:default;box-shadow:none} /* ═══ WHY THE STICKY PICTURES ACTUALLY STICK ════════════════════════════ Straight out of LP-09 (its own comment: "why nothing was sticking"): `overflow-x:hidden` turns the element into a scroll container and silently kills position:sticky for every descendant. `overflow-x:clip` clips exactly the same way WITHOUT creating one, so sticky survives. ⚠️ The base stylesheet sets html{overflow-x:hidden} — do not "tidy up" by deleting these two lines; the pictures stop travelling if you do. */ html{overflow-x:clip} body{overflow-x:clip} /* the closing pledge and the FAQ need the same air as the reasons */ .faq{padding-top:64px;padding-bottom:64px} }