collapses to exactly the 67px .header-spacer box: the lander's whole body lives in the position:fixed .wrap, so #brux-lander contributes 0 in-flow height. Blink lets a fixed descendant escape the overflow clip of an ancestor that isn't its containing block, so Chrome and Android render fine — iOS WebKit clips it anyway, cropping the entire lander (and the JS-built .fold-nav rail, also a child of #brux-lander) to a 67px strip with a blank white page below it. The site's own fixed bottom nav sits OUTSIDE #main-content, which is why it kept painting on the phone while the lander did not. Un-clip main — this stylesheet only loads on the Bruxism Lander template, so the clip is restored on every other page. */ html body #wrapper #main-content{overflow:visible} /* …and the SAME trap one level up, which only arms itself on mobile: the theme ships `html,body{overflow-x:hidden}` (custom-styles.css, ≤767px) plus `body{padding-bottom:60px}`. A box with overflow-x:hidden and overflow-y visible computes overflow-y to `auto`, so becomes a real 60px-tall SCROLL CONTAINER — measured at a 390px viewport: body 60px, overflow-x hidden / overflow-y auto, while #main-content is 0px there. 60px is exactly the strip left on the phone. Neutralise it too, or un-clipping main alone just hands the crop to body. Safe here: the root is already scroll-locked above, so body's overflow-x:hidden is doing nothing on this page anyway. */ html body{overflow:visible} /* NO SITEWIDE SALE BANNER ON THIS PAGE (per user). header/style10.php renders `.saleParentWrapper > .deal-top-bar` (the sale ticker strip) whenever a sitewide sale window is open, and drops body.bannerAdded. It breaks this lander at BOTH widths, because the fold pane is a fixed box positioned against a chrome height measured with no sale running: · mobile — the wrapper is position:fixed;top:0;z-index:1030, so its 54px strip paints straight over the top of every fold (.wrap is top:0); · desktop — the strip pushes #sbr-header from 0→92 down to 56→148, while .wrap stays at top:96px, so the header overlapped the pane by 52px. Hiding the strip restores the intended geometry exactly — measured at 1200px: header 0→92 against a 96px pane top, a clean 4px gap — so no compensating offset is needed here or in the mobile block. Scoped by construction: this stylesheet only loads on the Bruxism Lander template, so the banner still runs everywhere else. body.bannerAdded is left in place; nothing on this page keys off it (verified: .header-spacer is 67px desktop / 0 mobile either way). */ .saleParentWrapper .deal-top-bar{display:none} /* keyboard focus lands on the pane (JS sets tabindex) — no ring on click */ #brux-lander .wrap:focus{outline:none} /* Fold nav — the section-skip dot rail (built by bruxism-lander.js). One dot per fold, active dot stretches into a pill, click jumps straight to that fold (snap keeps it exact). The rail itself is a glossy frosted- glass pill (backdrop-blur + translucent white + top highlight) so it stays clearly visible on every fold — pastels, the purple final fold, and the dark footer band alike; browsers without backdrop-filter still get the translucent white pill. rgba(51,31,151,…) = --night-guard-purple. */ #brux-lander .fold-nav{position:fixed;z-index:500;display:flex;flex-direction:column;gap:2px; /* --ng lives on .wrap but the rail is appended to #brux-lander — without redeclaring it here every var(--ng) dot color resolved INVALID (i.e. transparent dots: the original "rail is not visible" bug) */ --ng:var(--night-guard-purple); --ng-lav:color-mix(in srgb,var(--ng) 32%,#fff); background:transparent;border-radius:var(--r-full)} #brux-lander .fold-dot{position:relative;display:flex;align-items:center;justify-content:center; padding:0;border:0;background:transparent;cursor:pointer} #brux-lander .fold-dot i{display:block;border-radius:var(--r-full); background:color-mix(in srgb,var(--ng) 38%,#fff); border:1px solid color-mix(in srgb,var(--ng) 50%,#fff); /* white halo keeps bare dots legible on the purple fold + dark footer (the rail itself is transparent) */ box-shadow:0 0 0 2px rgba(255,255,255,.62); transition:all var(--ease-fast)} #brux-lander .fold-dot:hover i{background:var(--ng-lav)} #brux-lander .fold-dot.on i{background:var(--ng);border-color:var(--ng); box-shadow:0 0 0 2px rgba(255,255,255,.75),0 1px 4px rgba(51,31,151,.35)} /* section-name toast — popped above the rail by JS when the active fold changes (mobile substitute for the desktop hover labels) */ #brux-lander .fold-toast{position:absolute;bottom:calc(100% + 10px);left:50%; transform:translateX(-50%) translateY(5px);white-space:nowrap; background:#fff;color:var(--ng);font-family:var(--font-stamp); font-size:var(--t-body-sm);letter-spacing:var(--ls-stamp);text-transform:uppercase; padding:5px 14px;border-radius:var(--r-pill); border:1px solid color-mix(in srgb,var(--ng) 18%,#fff);box-shadow:var(--shadow-dropdown); opacity:0;pointer-events:none;transition:opacity var(--ease-fast),transform var(--ease-fast)} #brux-lander .fold-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} @media (min-width:641px){#brux-lander .fold-toast{display:none}} /* desktop has hover labels */ #brux-lander .fold-dot span{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%); white-space:nowrap;background:#fff;color:var(--ng);font-family:var(--font-stamp); font-size:var(--t-body-sm);letter-spacing:var(--ls-stamp);text-transform:uppercase; padding:4px 12px;border-radius:var(--r-pill); border:1px solid color-mix(in srgb,var(--ng) 18%,#fff);box-shadow:var(--shadow-dropdown); opacity:0;pointer-events:none;transition:opacity var(--ease-fast)} #brux-lander .fold-dot:hover span,#brux-lander .fold-dot:focus-visible span{opacity:1} #brux-lander .fold-dot:focus-visible{outline:2px solid var(--sbr-blue);outline-offset:2px;border-radius:var(--r-sm)} /* ============ MOBILE FOLD-SNAP SECTIONS (≤640px) ============ One section per fold: every top-level lander section fills the visible viewport (100svh minus the 55px fixed bottom nav) and the root scroller (html) snaps fold-to-fold — a flick JUMPS to the next section instead of free pixel scrolling (snap-stop:always = max one fold per gesture). A section taller than one fold (small phones, opened FAQs) still scrolls freely inside itself before snapping onward — an oversized snap area is a valid rest position, so nothing becomes unreachable. Each fold gets its own pastel background so sections read as separate screens. The press strip is absorbed into the bottom of the hero fold. The site footer gets a snap stop of its own so `mandatory` can't strand it. Desktop (>640px) untouched. */ @media (max-width:640px){ /* THE LANDER IS THE SCROLLER, not the page root. Root-scroller snapping is unreliable on real phones here — the theme sets overflow on BOTH html and body, a combo where iOS/Android skip snap physics on the root scroller (finger flicks free-scrolled even though html computed `y mandatory`). An inner scroll container snaps everywhere. The page (html) keeps only the site footer's own scroll range: flicking past the last fold chains out of the wrap into it, so the footer stays reachable and needs no snap rules. Native hash links (#offer/#check) scroll whichever ancestor overflows, so they still work; lander JS scrollToEl() switched to scrollIntoView for the same reason. NOTE: a top sale banner (body.bannerAdded, ~54px fixed) will overlay fold tops during sitewide sales — revisit fold offsets if one goes live. */ /* --mnav = the fixed bottom nav's REAL overlay height. bruxism-lander.js measures #main-navigation-mobile at load/resize and sets it inline on #brux-lander (0 when the nav is absent/hidden — some browsers/sessions don't show it, and a hardcoded 55px let the next fold's top slice peek out at the bottom). 55px is only the no-JS fallback. Declared on #brux-lander, NOT .wrap: an own declaration on .wrap would beat the inherited inline override. */ #brux-lander{--mnav:55px} /* FIXED pane (like desktop): anchored top:0 → bottom:--mnav. Fixed boxes resize with the browser's collapsing toolbar natively, so folds (min-height:100%) always equal exactly the visible area — svh sizing could not track that and let the next fold peek out. And because the pane's box ENDS above the nav, nothing exists below it to peek. */ #brux-lander .wrap{ position:fixed;top:0;left:0;right:0;bottom:var(--mnav); overflow-y:auto;overflow-x:hidden; scroll-snap-type:y mandatory; scroll-behavior:smooth; scroll-padding:0} /* flex centering (NOT block align-content: no Samsung Internet / older Safari support — folds silently top-aligned there). The explicit width:100% on .shell is load-bearing: its `margin:0 auto` disables flex cross-axis stretch, and shrink-to-fit blew it out to max-content once before (offer carousel → 1170px). */ #brux-lander header.hero, #brux-lander .wrap>section{ min-height:100%; display:flex;flex-direction:column;justify-content:center; scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:0; padding:16px 0 20px} #brux-lander header.hero>.shell, #brux-lander .wrap>section>.shell{width:100%} /* MOBILE keeps the ORIGINAL two separate last folds (per user): the blue final CTA is a normal .wrap>section fold, and the adopted footer below is its own snap stop. It's shorter than a fold (~660px), so it gets a full fold's min-height — otherwise its snap top sits past pane max-scroll and clamps short, bleeding the previous fold into view. */ #brux-lander .wrap>footer.fixed-footer-container{min-height:100%; scroll-snap-align:start;scroll-snap-stop:always;background:#fff} /* FALLBACK ONLY: .lastfold (final CTA + footer combined) exists on mobile only when the page loaded at desktop width and was then narrowed across the 640px boundary — the JS combine is decided once at load. Render it as one scrollable snap fold so nothing becomes unreachable. */ #brux-lander .wrap>.lastfold{min-height:100%;display:flex;flex-direction:column; scroll-snap-align:start;scroll-snap-stop:always} #brux-lander .wrap>.lastfold>.final{flex:1 0 auto;display:flex;flex-direction:column; justify-content:safe center;padding:20px 0} #brux-lander .wrap>.lastfold>footer.fixed-footer-container{flex:0 0 auto;min-height:0;background:#fff} /* root scroll lock lives in the all-viewport block above */ /* fold 1 = hero + compact one-row press strip (44px) + a 36px clearance below it so the horizontal fold-nav pill floats in free space instead of covering the logos — 44+36 = the 80px taken off hero */ #brux-lander header.hero{min-height:calc(100% - 80px)} #brux-lander .press{height:44px;padding:0;display:flex;align-items:center;margin-bottom:36px} #brux-lander .press .shell{flex-wrap:nowrap;justify-content:flex-start;gap:16px; overflow-x:auto;scrollbar-width:none;width:100%} #brux-lander .press .shell::-webkit-scrollbar{display:none} #brux-lander .press .k{font-size:10px;flex:0 0 auto} #brux-lander .press img{height:13px;flex:0 0 auto} /* hero fold fit: cap the kit image, tighten type + spacing */ #brux-lander .hero .eyebrow{font-size:12px;margin-bottom:8px} #brux-lander .ribbon{font-size:20px;padding:10px 16px} #brux-lander .ribbon-sub{font-size:12.5px;padding:9px 14px} #brux-lander .hero-art{margin:12px 0 4px} #brux-lander .hero-art img{width:auto;max-width:min(420px,88%);max-height:30vh;max-height:30svh} #brux-lander .hero .sub{font-size:12.5px;line-height:1.5;margin-top:10px;max-width:52ch} #brux-lander .btnrow{margin-top:12px;gap:8px} #brux-lander .btnrow .btn{font-size:14px;padding:10px 18px} #brux-lander .trustline{margin-top:10px;font-size:11px;gap:6px 10px} /* per-fold background tints live in the all-viewport block above */ /* proof fold fit (was ~1.35 folds): tighter quote + 2-up price cards */ #brux-lander .proof .head h2{font-size:16px} #brux-lander .quote{margin-top:10px} #brux-lander .quote blockquote{font-size:13px} #brux-lander .quote blockquote::before{font-size:34px;margin-bottom:6px} #brux-lander .quote figcaption{margin-top:8px;font-size:10px} #brux-lander .price-contrast{grid-template-columns:1fr 1fr;gap:8px;margin-top:14px} #brux-lander .pc{padding:12px} #brux-lander .pc .pc-tag{font-size:9.5px;padding:3px 8px;margin-bottom:6px} #brux-lander .pc .pc-price{font-size:24px} #brux-lander .pc p{font-size:10px;margin-top:6px;line-height:1.4} #brux-lander .proof .agg{margin-top:12px;font-size:11px} /* faq + learn small trims so those folds rest comfortably */ #brux-lander .faq .head h2,#brux-lander .learn .head h2{font-size:16px} #brux-lander .faq-list{margin-top:12px;gap:8px} /* sized so the longest question ("How do you fit it without seeing my teeth?") stays a single line down to ~360px-wide phones */ #brux-lander .faq-list summary{padding:12px 14px;font-size:11px;gap:10px} #brux-lander .faq-list summary::after{font-size:20px} #brux-lander .faq-list details p{padding:0 16px 12px;font-size:11.5px;line-height:1.5} #brux-lander .learn .art-grid{margin-top:12px;gap:8px} #brux-lander .art{padding:12px 14px} #brux-lander .art .go{padding-top:8px} /* Phones stack the 4 cards in one column, so a 2:1 image on top of each would add ~660px and push this fold well past one screen. Go horizontal instead — square thumb left, text right — which is the usual article-list shape and costs the fold almost nothing. */ #brux-lander .art{flex-direction:row;align-items:center;gap:12px} #brux-lander .art-thumb{flex:0 0 66px;aspect-ratio:1;margin-bottom:0} #brux-lander .art-thumb.contain img{padding:4px} #brux-lander .art .go{padding-top:4px} /* fold nav: HORIZONTAL pill centered above the bottom nav — --mnav now lives on #brux-lander so the rail inherits the measured value too. Active dot stretches in width. Labels are hover-only, so hide them on touch — the dots keep aria-labels. */ #brux-lander .fold-nav{flex-direction:row;left:50%;right:auto;top:auto; bottom:calc(var(--mnav) + 10px); transform:translateX(-50%);gap:1px;padding:1px 6px} #brux-lander .fold-dot{width:24px;height:26px} #brux-lander .fold-dot i{width:7px;height:7px} #brux-lander .fold-dot.on i{width:18px;height:7px} #brux-lander .fold-dot span{display:none} } /* ============ DESKTOP FOLD-SNAP (>640px) ============ Same one-section-per-fold + flick-jump + tints as mobile. The wrap becomes a FIXED pane below the 96px fixed #sbr-header (position:fixed sidesteps the ~67px of invisible in-flow elements #wrapper keeps above the lander, which would misalign an in-flow pane by exactly that much). Folds size off the pane (min-height:100%); there's no bottom nav on desktop. Root scroll is locked in the all-viewport block, so the pane is the page's only scroller — which also freezes the theme's scroll-driven header behaviors: the header stays its full 96px, matching the pane's top offset. Folds taller than the pane (short windows) free-scroll internally before snapping onward. */ @media (min-width:641px){ #brux-lander .wrap{ position:fixed;top:96px;left:0;right:0;bottom:0; overflow-y:auto;overflow-x:hidden; scroll-snap-type:y mandatory; scroll-behavior:smooth; scroll-padding:0} body.admin-bar #brux-lander .wrap{top:calc(96px + 32px)} /* WP admin bar */ /* flex centering + width:100% shell guard — same reasoning as the mobile block (block align-content lacks Samsung Internet/older Safari support; bare flex shrink-fits .shell to max-content). */ #brux-lander header.hero, #brux-lander .wrap>section{ min-height:100%; /* safe center: content shorter than the pane stays vertically centered (equal top/bottom); content TALLER than the pane top-aligns and scrolls instead of centering (which would clip the top in a scroll container). Every overflowing fold then shares the same top gap — the padding — rather than the old mix of tiny/centered/clipped rhythms. */ display:flex;flex-direction:column;justify-content:safe center; scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:0; /* padding scales down on short windows so tall folds fit more often before they have to scroll; caps at 24 on roomy windows */ padding:clamp(12px,2.2vh,24px) 0} #brux-lander header.hero>.shell, #brux-lander .wrap>section>.shell{width:100%} /* fold 1 = hero + press strip (69px at desktop sizes) */ #brux-lander header.hero{min-height:calc(100% - 69px)} /* LAST FOLD = blue final CTA + footer, combined by bruxism-lander.js into one snap stop. The .final CTA flex-grows to absorb the slack (centered blue banner) so the footer is pinned to the bottom and fills the screen; the footer no longer floats alone in a half-empty fold. On short windows the pair is taller than the pane and simply scrolls within this one fold. */ #brux-lander .wrap>.lastfold{min-height:100%;display:flex;flex-direction:column; scroll-snap-align:start;scroll-snap-stop:always} #brux-lander .wrap>.lastfold>.final{flex:1 0 auto;display:flex;flex-direction:column; justify-content:safe center;padding:clamp(16px,2.4vh,40px) 0} /* slim the closing CTA so the blue banner + the ~625px footer share one screen on typical laptops (the footer is the immovable floor) */ #brux-lander .wrap>.lastfold>.final h2{font-size:clamp(24px,2.8vw,34px);margin-bottom:.25em} #brux-lander .wrap>.lastfold>.final p{font-size:var(--t-body);line-height:var(--lh-snug);margin-bottom:var(--sp-4)} #brux-lander .wrap>.lastfold>.final .micro{margin-top:var(--sp-3);margin-bottom:0} #brux-lander .wrap>.lastfold>footer.fixed-footer-container{flex:0 0 auto;background:#fff} /* the footer's trust bar ships with 96px top+bottom padding (192px of whitespace around a ~55px icon row) — far too tall to share the last fold. Trim it ON THIS PAGE ONLY so the CTA + footer fit one screen; the icons + all footer content are untouched. */ #brux-lander .wrap>.lastfold .section-return-policy-option{padding-top:26px;padding-bottom:26px} /* FALLBACK ONLY: a direct-child footer at desktop width means the page loaded ≤640 (no combine — mobile keeps separate folds) and was widened after; give it the old own-fold treatment so it stays a valid snap stop. */ #brux-lander .wrap>footer.fixed-footer-container{min-height:100%; scroll-snap-align:start;scroll-snap-stop:always;background:#fff} /* fold nav: clear of the pane's scrollbar, centered on the pane (not the viewport — the pane starts below the 96px header) */ #brux-lander .fold-nav{right:20px;top:calc(50% + 48px);transform:translateY(-50%);gap:3px;padding:9px 3px} #brux-lander .fold-dot{width:26px;height:22px} #brux-lander .fold-dot i{width:9px;height:9px} #brux-lander .fold-dot.on i{height:22px} } /* ============ OFFER FOLD DESKTOP FIT (>640px) ============ The offer fold (head + toggle + CTA + 3 product cards + assurance row) ran ~129px taller than a 900px-tall window's pane, cutting off the assurance row. Compact the vertical rhythm so it fits one fold; taller windows just get more breathing room (fold centers). Mobile already fits — untouched. */ @media (min-width:641px){ /* section.offer (1,2,1) to outrank the fold's `.wrap>section{padding:…}` (1,1,1) — a plain `.offer` (1,1,0) lost and the padding never shrank. Offer is the tallest content fold, so it runs a touch tighter than the shared clamp to fit more laptop windows before it has to scroll. */ #brux-lander .wrap>section.offer{padding:clamp(6px,1.2vh,12px) 0} #brux-lander .offer .head h2{font-size:clamp(24px,3vw,30px);margin-bottom:.3em} #brux-lander .offer .head p{font-size:var(--t-body)} #brux-lander .offer .head{margin-top:var(--sp-2)} #brux-lander .toggle{margin-top:var(--sp-3)} #brux-lander .thickness-note{margin-top:var(--sp-2)} #brux-lander .offer .check-match{margin-top:var(--sp-2)} #brux-lander .cards{margin-top:var(--sp-3)} #brux-lander .card .pstage{height:200px} #brux-lander .card .cbody{padding:var(--sp-3) var(--sp-4)} #brux-lander .card .lasts{margin-top:var(--sp-2)} #brux-lander .card .pricebox{margin-top:var(--sp-2)} #brux-lander .card .ctacol{padding-top:var(--sp-3)} #brux-lander .assure{margin-top:var(--sp-3)} }