/* ========================================================================== Founding Season Integration Vortex™ — PPC Landing Page World: geological section. Quartz strata, a gold ore seam, mica fleck. Palette and type pinned by blueprint.md. Do not re-decide. ========================================================================== */ /* Fonts load from in each document, not @import: an @import here would serialise the font request behind this stylesheet and delay LCP on paid traffic. */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Ground — mineral strata, alternating down the page */ --quartz: #FAF6EF; --white: #FFFFFF; --quartz-soft: #F5EFE6; /* Seam and accent */ --gold: #BB9269; --gold-quiet: rgba(187, 146, 105, 0.32); --gold-hair: rgba(187, 146, 105, 0.20); --mica: #D6B699; --mica-fill: rgba(214, 182, 153, 0.18); /* Gold #BB9269 is pinned for rules, borders, badges and active indicators — as TEXT it reads 2.47:1 on Soft Quartz. These are the same hue carried down to legibility: --gold-text clears 4.5:1 for small copy, --gold-mark clears the 3:1 non-text floor for icons and glyphs. Rules still use --gold. */ --gold-text: #85684B; --gold-mark: #A8845F; /* Action */ --ore: #9E6455; --ore-deep: #854E41; --ore-tint: rgba(158, 100, 85, 0.10); /* Text */ --ink: #2A2421; --body: #585556; /* The brief pins #7D7C7B for eyebrows and labels. At 12–13px that measures 3.64:1 on Soft Quartz — below AA, on a page carrying medical and insurance microcopy. --body-quiet is the same grey carried to 4.52:1 and is what the page ships; the pinned value stays recorded here. */ --label: #7D7C7B; --body-quiet: #6E6D6C; --placeholder: #74716F; /* Type — SUBSTITUTION ON THE RECORD. The brief pins Nexa Bold (display) and Avenir Book (body). Both are licensed faces and neither is available to this project, so neither is fetched: the page ships Jost and Nunito Sans, chosen and locked in blueprint.md's Font Substitution block. The licensed names stay first in each stack, so dropping real webfont files in later upgrades the page with no code change. A visitor who already owns Nexa or Avenir gets it; nobody else is served a download. */ --font-display: 'Jost', 'Nexa', system-ui, -apple-system, sans-serif; --font-body: 'Nunito Sans', 'Avenir', 'Avenir Next', system-ui, -apple-system, sans-serif; /* Rhythm — one spacing scale, whole page */ --s-1: 0.5rem; --s-2: 0.75rem; --s-3: 1rem; --s-4: 1.5rem; --s-5: 2rem; --s-6: 3rem; --s-7: 4rem; --s-8: 6rem; --s-9: 8rem; --shell: 1200px; /* The shell's inline gutter. A fixed 1.5rem was a phone gutter applied to every width: from 1248px down to 768px it was the only margin left, so headlines and actions sat 24px from the glass and 14px from the seam. Fluid from 24px on phones to 48px from 1200px up. */ --gutter: clamp(1.5rem, 4vw, 3rem); --measure: 68ch; --radius: 3px; /* The second radius. 2px was hard-coded in four places — the placeholder tag, the savings badge and the two disclosure signs — while --radius carried 3px, so the system had an undeclared step. It is a real step, not drift: a 1.15rem sign at 3px reads round. Declared, it can be reasoned about. */ --radius-chip: 2px; /* Type scale. Colour, spacing, shadow, easing and measure were all tokenised and type was not: Section 4 alone declared fourteen raw font sizes. These are the ramp DESIGN.md already records, given names. Headings stay on their own clamp() expressions — they are fluid and do not belong to a fixed ramp. label-sm/label are chrome, small/reading/lead are the reading ladder, and subhead upward are display sizes. */ --t-label-sm: 0.75rem; --t-label: 0.8125rem; --t-small: 0.9375rem; --t-reading: 1.0625rem; --t-lead: 1.125rem; --t-subhead: 1.25rem; --t-recap: 1.5rem; --t-code-sm: 1.75rem; --t-code-min: 2rem; --t-figure: 2.5rem; --t-code: 2.75rem; /* The band ladder — one column grid for the banded lists. Differentiation and the Journey are the same structural idea: a marker, a title, a body, separated by hairlines. They used to declare separate ladders (3.5/15, 2.5/17, 7/16), so their titles landed at different x down the page and the beds read as unrelated tables rather than one section through rock. One ladder, declared once. The marker column keeps 56px: it was sized for the since-removed timeline's "Step 4" at 48px, and dropping it to the Journey's 34px diamond-plus-numeral would pull the Journey's titles left of the Differentiation bed's, which is the misalignment this exists to prevent. */ --band-marker: 3.5rem; --band-title: 16rem; --band-gap: var(--s-5); --band-gap-stacked: var(--s-2); /* Depth — offset plus soft blur, never a zero-offset halo */ --lift-1: 0 1px 2px rgba(42, 36, 33, 0.04), 0 2px 8px rgba(42, 36, 33, 0.04); --lift-2: 0 2px 4px rgba(42, 36, 33, 0.05), 0 8px 24px rgba(42, 36, 33, 0.07); --lift-3: 0 4px 8px rgba(42, 36, 33, 0.06), 0 18px 48px rgba(42, 36, 33, 0.10); --ease: cubic-bezier(0.16, 1, 0.3, 1); /* Brand bar. Three tiers, because the hero's CTA has to clear the fold on a ~730px laptop viewport (1920 at 125% scaling, minus browser chrome) and every pixel of header is taken from that budget. The stacked logo's tagline is texture at these sizes, as it is on ommassage.net. */ --header-h: 4rem; /* phones: 40px logo */ --logo-h: 2.5rem; --desk-bar-h: 4rem; } @media (min-width: 900px) { :root { --header-h: 4rem; --logo-h: 2.75rem; } /* short desktop: 44px logo */ } @media (min-width: 900px) and (min-height: 820px) { :root { --header-h: 5.5rem; --logo-h: 3.5rem; } /* tall desktop: 56px logo */ } /* -------------------------------------------------------------------------- 2. Reset and browser surfaces The parts we did not draw still carry the design. -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* The strata carry 6rem of their own block padding, so the old 3rem here stacked into ~9rem of dead space above every anchor target. Enough to clear the section's top hairline, no more. The bottom value clears the standing mobile action. */ scroll-padding-top: var(--s-3); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--quartz); color: var(--body); font-family: var(--font-body); font-size: 17px; line-height: 1.6; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Display type only, and invisible at any normal size: it fires only on a word that cannot fit its column at all. At a 200% text setting the hero's 76px headline meets a 294px column, and without this one long word runs off the screen. It is deliberately NOT on : inherited everywhere it would also break strings a reader has to copy exactly — the promo code first among them. */ .h1, .h2, .h3, .h4, .stage-card__title, .wt-stage__name, .faq__q-text { overflow-wrap: break-word; } ::selection { background: var(--mica); color: var(--ink); } :root { caret-color: var(--ore); accent-color: var(--ore); } * { scrollbar-color: var(--gold-quiet) transparent; scrollbar-width: thin; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: var(--quartz-soft); } *::-webkit-scrollbar-thumb { background: var(--gold-quiet); border-radius: 0; } *::-webkit-scrollbar-thumb:hover { background: var(--gold); } :focus-visible { outline: 2px solid var(--ore); outline-offset: 3px; border-radius: 1px; } :focus:not(:focus-visible) { outline: none; } /* Inline links are small text, so they take Ore Deep (5.8–6.2:1): Ore itself is 4.17–4.76:1 on the grounds and passes only as large text. */ a { color: var(--ore-deep); text-decoration-thickness: 1px; text-underline-offset: 0.22em; } a:not(.cta):hover { color: var(--ink); } img, svg, video { display: block; max-width: 100%; } figure { margin: 0; } /* -------------------------------------------------------------------------- 3. Type scale Sizes from blueprint.md, adjusted for Jost's smaller optical size. -------------------------------------------------------------------------- */ /* Heading colour follows the Om Massage Brand Reference Guide, which sets headings and the wordmark in Ore — the same as ommassage.net. Ore on the three grounds measures 4.17–4.76:1, which clears AA only as large text (≥24px, or ≥18.66px bold). H1–H3 are all 21px bold or larger, so they carry Ore; H4 is 17px and steps down to Ore Deep (5.81–6.16:1), the same hue at a reading grade. */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ore); font-weight: 700; margin: 0; text-wrap: balance; } h4, .h4 { color: var(--ore-deep); } .h1 { font-size: clamp(2.375rem, 1.55rem + 3.4vw, 3.25rem); /* 38 → 52 */ line-height: 1.15; letter-spacing: -0.022em; } .h2 { font-size: clamp(1.875rem, 1.5rem + 1.55vw, 2.25rem); /* 30 → 36 */ line-height: 1.25; letter-spacing: -0.018em; } .h3 { font-size: clamp(1.3125rem, 1.16rem + 0.63vw, 1.5rem); line-height: 1.3; letter-spacing: -0.012em; } .h4 { font-size: var(--t-reading); line-height: 1.35; font-weight: 600; letter-spacing: -0.005em; } /* Eyebrow — pinned by the brief. Nexa Bold uppercase 12–14px / 0.12em. Block, not flex: a flex container would tear the ™ off its word. */ .eyebrow { position: relative; display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--t-label); line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; /* The brand guide sets subheadings in Gold. Seam Gold as text is 2.62:1, so the eyebrow takes Gold Text — same hue, 4.50:1 on Soft Quartz, 4.78:1 on Quartz. */ color: var(--gold-text); margin: 0 0 var(--s-3); padding-left: 2.5rem; max-width: 46ch; } .eyebrow::before { content: ''; position: absolute; left: 0; top: 0.66em; width: 1.75rem; height: 1px; background: var(--gold); } p { margin: 0 0 var(--s-3); max-width: var(--measure); } p:last-child { margin-bottom: 0; } .lead { font-size: var(--t-lead); line-height: 1.58; color: var(--body); } .supporting { font-size: var(--t-reading); color: var(--body-quiet); } strong, b { font-weight: 700; color: var(--ink); } .tm { font-size: 0.62em; vertical-align: 0.55em; letter-spacing: 0; font-weight: 500; } /* -------------------------------------------------------------------------- 4. Shell and strata -------------------------------------------------------------------------- */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } /* Every stratum's shell is a query container, so the beds inside it can be gated on the room they actually have rather than on the window. See The Matching-Unit Query Rule: the proof grid and the FAQ carry fixed rem tracks, and a px media query cannot see a reader's text-size setting grow them. The hero is excluded — its shell is a flex child inside the viewport-height budget and carries no rem-track grid to protect. */ .stratum:not(.hero) > .shell { container-type: inline-size; container-name: bed; } .stratum { position: relative; padding-block: var(--s-8); } /* One step down on phones: 6rem above and below every bed is most of a viewport of empty quartz at 390px. The beds keep their proportion to each other, they just stop out-measuring their own content. */ @media (max-width: 599px) { .stratum { padding-block: var(--s-7); } } .stratum--quartz { background: var(--quartz); } .stratum--white { background: var(--white); } .stratum--soft { background: var(--quartz-soft); } /* The seam: a gold hairline at every stratum boundary. */ .stratum + .stratum::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-hair) 12%, var(--gold-hair) 88%, transparent); } .stratum__head { margin-bottom: var(--s-6); } /* The interval between a heading and the paragraph under it, wherever the pair occurs. This was seven inline margin-top declarations across two documents. */ .stratum__head p, h2 + p, h3 + p { margin-top: var(--s-3); } /* -------------------------------------------------------------------------- 5. The ore seam — the page's through-line A fixed 1px rail on wide viewports, filled by scroll depth. -------------------------------------------------------------------------- */ .seam { position: fixed; top: 0; bottom: 0; left: max(calc((100vw - var(--shell)) / 2 - 2.5rem), 0.625rem); width: 1px; background: var(--gold-quiet); z-index: 5; pointer-events: none; } .seam__fill { position: absolute; inset-inline: 0; top: 0; height: 0; background: var(--gold); will-change: height; } /* The bead marks depth and inverts across the Journey. */ .seam__bead { position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin-left: -3.5px; margin-top: -3.5px; background: var(--ore); transform: rotate(45deg); will-change: top, transform; } /* Narrow viewports keep the seam: it is the page's through-line and the carrier of the signature, so it moves into the screen edge rather than disappearing. */ /* The rail's max() floors at 10px once (100vw - 1200px) / 2 - 2.5rem drops below it, which happens at 1300px — not 1180px. Below 1180 the bead shrank but between 1180 and 1300 it rode the screen edge at full size. One breakpoint, derived from the rail's own formula. */ @media (max-width: 1300px) { .seam { left: 0.625rem; } .seam__bead { width: 5px; height: 5px; margin-left: -2.5px; margin-top: -2.5px; } } @media (max-width: 420px) { .seam { left: 0.375rem; } } /* -------------------------------------------------------------------------- 6. Actions Ore is reserved for the primary action. Nothing else uses it as a fill. -------------------------------------------------------------------------- */ .cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; font-family: var(--font-display); font-size: var(--t-reading); font-weight: 600; letter-spacing: 0.005em; line-height: 1; color: var(--white); background: var(--ore); border: 1px solid var(--ore); border-radius: var(--radius); padding: 1.15rem 2rem; text-decoration: none; cursor: pointer; text-align: center; transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease); box-shadow: var(--lift-1); } .cta:hover { background: var(--ore-deep); border-color: var(--ore-deep); color: var(--white); box-shadow: var(--lift-2); transform: translateY(-1px); } .cta:active { transform: translateY(0); box-shadow: var(--lift-1); } .cta--block { display: flex; width: 100%; } .cta--lg { font-size: var(--t-lead); padding: 1.3rem 2.25rem; } .cta[disabled], .cta[aria-disabled='true'] { background: var(--mica); border-color: var(--mica); color: var(--white); cursor: not-allowed; box-shadow: none; transform: none; } /* Secondary anchor — typographic, never a second button. */ .anchor-link { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-display); font-size: var(--t-reading); font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 0.3em; transition: color 0.3s var(--ease), border-color 0.3s var(--ease); } /* The link keeps its size; its target does not. 33px of type and underline is under the 44px touch floor, so an invisible box extends the hit area instead of padding, which would push the gold underline away from the words. */ .anchor-link { position: relative; } .anchor-link::after { content: ''; position: absolute; inset: -0.625rem -0.5rem; } .anchor-link:hover { color: var(--ore-deep); border-color: var(--ore); } .anchor-link .glyph { transition: transform 0.4s var(--ease); } .anchor-link:hover .glyph { transform: translateY(3px); } .action-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-3); } /* -------------------------------------------------------------------------- 7. Placeholders — clearly labelled, correctly proportioned. Never a stock photo standing in for the real space. -------------------------------------------------------------------------- */ .placeholder { position: relative; background: var(--quartz-soft); border: 1px solid var(--gold-quiet); border-radius: var(--radius); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } .placeholder::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 22% 28%, rgba(214, 182, 153, 0.42) 0 1px, transparent 1.6px), radial-gradient(circle at 68% 61%, rgba(214, 182, 153, 0.34) 0 1px, transparent 1.6px), radial-gradient(circle at 41% 79%, rgba(187, 146, 105, 0.30) 0 1px, transparent 1.6px), radial-gradient(circle at 84% 19%, rgba(187, 146, 105, 0.24) 0 1px, transparent 1.6px); background-size: 90px 90px, 130px 130px, 110px 110px, 160px 160px; opacity: 0.9; } .placeholder__tag { position: absolute; top: var(--s-3); left: var(--s-3); font-family: var(--font-display); font-size: var(--t-label-sm); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ore); background: var(--white); border: 1px solid var(--gold-quiet); padding: 0.4em 0.7em; border-radius: var(--radius-chip); } .placeholder__note { position: relative; padding: var(--s-4); font-size: var(--t-small); line-height: 1.5; color: var(--body); background: linear-gradient(to top, rgba(250, 246, 239, 0.97), rgba(250, 246, 239, 0.0)); padding-top: var(--s-7); } .placeholder__note strong { display: block; margin-bottom: 0.15em; font-family: var(--font-display); } /* The hero frame owns its ratio, so the placeholder and the video it stands in for fill the same box. Phones: 1:1, because the source footage is square and a square crops nothing (4:5 cost ~86px more and cut the sides). Desktop: the frame is the full height of the stratum. */ .placeholder--fill { aspect-ratio: auto; } @media (max-width: 899px) { .hero .media-frame { aspect-ratio: 1 / 1; } } .ratio-4x5 { aspect-ratio: 4 / 5; } /* Real photography sits in the same box a placeholder held: the ratio class owns the frame, the image fills it and crops rather than shifting layout. */ .portrait { width: 100%; height: auto; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--gold-quiet); } .ratio-16x9 { aspect-ratio: 16 / 9; } .ratio-1x1 { aspect-ratio: 1 / 1; } /* -------------------------------------------------------------------------- 7b. Brand bar and desktop standing action -------------------------------------------------------------------------- */ /* No ground of its own: the header sits on the page's Quartz, so the hero's half-bleed media can rise behind it to the top edge of the viewport. */ .site-header .shell { display: flex; align-items: center; height: var(--header-h); } .site-header__logo { height: var(--logo-h); width: auto; } .desk-bar { display: none; } @media (min-width: 900px) { html:has(.desk-bar) { scroll-padding-top: calc(var(--desk-bar-h) + var(--s-3)); } .desk-bar { display: block; position: fixed; inset-inline: 0; top: 0; z-index: 20; background: color-mix(in srgb, var(--quartz) 92%, transparent); border-bottom: 1px solid var(--gold-quiet); transform: translateY(-110%); transition: transform 0.5s var(--ease); } .desk-bar.is-up { transform: translateY(0); } .desk-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); height: var(--desk-bar-h); } .desk-bar__mark { height: 2rem; width: auto; } .desk-bar .cta { padding-block: 0.8rem; box-shadow: var(--lift-2); } } @supports not (background: color-mix(in srgb, red 50%, transparent)) { .desk-bar { background: var(--quartz); } } @media (prefers-reduced-motion: reduce) { .desk-bar { transition: none; } } /* -------------------------------------------------------------------------- 8. Section 1 — Hero -------------------------------------------------------------------------- */ /* The hero's own intervals, as tokens, so the short- and tall-desktop tiers below change rhythm in one place. Groups: [eyebrow + H1] · [subhead] · [plate + CTA] · [fine print]. Tight inside a group, wider between groups. */ .hero { --hero-pad-top: var(--s-2); --hero-pad-bottom: var(--s-8); --hero-gap-head: var(--s-4); /* H1 → subhead */ --hero-gap-offer: var(--s-4); /* subhead → plate */ padding-block: var(--hero-pad-top) var(--hero-pad-bottom); } /* Mobile order follows the DOM: head → media → rest, per the brief. Desktop lifts the media into its own column beside both. */ .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; } /* Narrow viewports: a tighter stack. Every value here is spacing or leading — no pinned content is cut. The action group keeps the page-wide 16px plate → CTA interval; the plinth carries the action below the real fold. */ @media (max-width: 899px) { .hero { --hero-pad-bottom: var(--s-7); } .hero__grid { gap: var(--s-4); } .hero .hero__sub { line-height: 1.5; } .snapshot { margin-top: var(--s-3); } /* The large variant buys presence through width on mobile, where the button is already full-bleed in its column; it does not also need the height. */ .hero__rest .cta--lg { padding-block: 1.15rem; } } /* Below the two-column breakpoint the media follows the offer and the action. The brief numbers the visual at 4, ahead of the offer plate — but it also sets the standard this page is judged by, "clear in 10 seconds", and a 4:5 portrait in that slot pushes the price and the button off the first two screens. The offer leads on mobile; the media keeps its place on desktop. */ @media (max-width: 899px) { .hero__head { order: 1; } .hero__rest { order: 2; } .hero__media { order: 3; margin-top: var(--s-2); } } /* Desktop: the hero is at least one viewport tall (less the brand bar), so the next stratum never shows as an accidental sliver. Two empty rows above and below the copy take whatever height the viewport adds, the lower one heavier so the copy sits slightly above centre. On a short laptop there is nothing to add and both rows collapse to zero. */ @media (min-width: 900px) { .hero { --hero-pad-top: var(--s-2); --hero-pad-bottom: var(--s-7); --hero-gap-head: var(--s-2); --hero-gap-offer: var(--s-4); display: flex; flex-direction: column; min-height: calc(100svh - var(--header-h)); } .hero > .shell { flex: 1; display: flex; } .hero__grid { flex: 1; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); grid-template-areas: 'top media' 'head media' 'rest media' 'foot media'; grid-template-rows: 1fr auto auto 1.35fr; column-gap: var(--s-7); row-gap: 0; } .hero__head { grid-area: head; } .hero__rest { grid-area: rest; padding-top: var(--hero-gap-head); } .hero__media { grid-area: media; } .hero .eyebrow { margin-bottom: var(--s-2); } /* Short desktop: the CTA must clear a ~730px fold under the brand bar. */ .hero .snapshot { padding: 1.25rem var(--s-4); } .hero .hero__sub { line-height: 1.5; } } /* Tall desktop: the room exists, so the groups get their full separation. */ @media (min-width: 900px) and (min-height: 820px) { .hero { --hero-pad-top: var(--s-4); --hero-gap-head: var(--s-4); --hero-gap-offer: var(--s-5); } .hero .eyebrow { margin-bottom: var(--s-3); } .hero .snapshot { padding: var(--s-4); } .hero .hero__sub { line-height: 1.55; } } .hero__sub { font-size: var(--t-reading); line-height: 1.55; margin-top: 0; /* Same 34 as the offer plate below it, in the same unit. As 34em against a 17px subhead it measured 578px to the plate's 544px, so the two right edges in the hero's left column missed each other by 32px. */ max-width: 34rem; } .hero__media { position: relative; display: flex; flex-direction: column; } .media-frame { position: relative; display: flex; overflow: hidden; background: var(--quartz-soft); } .media-frame > * { flex: 1; } /* Taken out of flow on purpose. The frame owns its height — flex:1 against the hero grid on desktop, aspect-ratio 1/1 on mobile — and an in-flow child would override both with its own intrinsic ratio. The 9:16 hero still did exactly that: it stretched the media column and pushed the hero CTA 129px below a 1440x900 fold, breaking The Viewport Hero Rule. */ .media-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Half-bleed. The image is not a tile sitting in the layout; it is the stratum's own bed, running off the right edge of the viewport and the full height of the section. A geological section is cut off by its frame — beds run out of view. The negative margin measures shell edge to viewport edge, clamped so it still reaches the edge below the shell's max width. */ @media (min-width: 900px) { .hero__grid { align-items: stretch; } .hero__media { align-self: stretch; margin-right: calc(-1 * max((100vw - var(--shell)) / 2 + var(--gutter), var(--gutter))); /* Up through the hero's top padding and the brand bar, so the bed still starts at the viewport's top edge; down through the bottom padding. */ margin-block: calc(-1 * (var(--hero-pad-top) + var(--header-h))) calc(-1 * var(--hero-pad-bottom)); /* No margin-left: the column gap is the gutter. A 2rem margin here stacked on the 4rem column-gap, so the bed started 96px from the copy while its own grid track said 64px — the track boundary and the visible edge of the image disagreed. */ } .media-frame { flex: 1; min-height: 32rem; } .hero__media .placeholder { aspect-ratio: auto; border: 0; border-radius: 0; } } .hero__caption { margin-top: var(--s-3); font-size: var(--t-small); color: var(--body-quiet); max-width: none; } @media (min-width: 900px) { /* Seated on the image as a bed label, not floating past the bleed edge. The band runs to the viewport edge with the bed, but its text stops on the shell's own right gutter — otherwise the caption was the one line on the page ragging 200px further right than every other line at 1440px. */ .hero__caption { margin-top: 0; padding: var(--s-2) var(--s-4); padding-right: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter))); background: var(--quartz); border-top: 1px solid var(--gold); font-size: var(--t-label); } } /* Offer snapshot — the one plate on the page that earns full elevation. */ .snapshot { background: var(--white); border: 1px solid var(--gold-quiet); border-radius: var(--radius); padding: var(--s-4); margin-top: var(--hero-gap-offer, var(--s-4)); box-shadow: var(--lift-2); max-width: 34rem; } .snapshot__name { font-family: var(--font-display); font-size: var(--t-subhead); font-weight: 700; color: var(--ink); line-height: 1.3; letter-spacing: -0.01em; } .snapshot__desc { margin-top: var(--s-1); /* Supporting copy inside the plate sits on the small step, not the reading step: the plate's hierarchy is name, then this, then the $295 figure. */ font-size: var(--t-small); color: var(--body); } .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) 0.9em; } .price__now { font-family: var(--font-display); font-size: var(--t-figure); font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -0.03em; } .price__was { font-size: var(--t-reading); color: var(--body-quiet); text-decoration: line-through; text-decoration-color: var(--mica); } /* Centred, not baselined: a bordered chip hung from the $295 figure's baseline dropped its box well below the number's optical block. The price row keeps baseline alignment for the type beside it. */ .save-tag { display: inline-block; align-self: center; font-family: var(--font-display); font-size: var(--t-label-sm); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: var(--mica-fill); border: 1px solid var(--gold-quiet); padding: 0.45em 0.75em; border-radius: var(--radius-chip); } /* Two intervals, measured ink to ink: ~12–16px inside a group (figure to tag, label to its list, item to item) and 24px between the price group and the inclusions, matching the plate's padding. The box values are smaller than the visible gaps because the label and list lines carry their own leading. */ .inclusions { margin-top: 1.25rem; } .inclusions__label { font-family: var(--font-display); font-size: var(--t-label-sm); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--body-quiet); margin-bottom: var(--s-1); } .tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); } .tick-list li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.7em; align-items: start; /* Plate list copy sits with the plate's other supporting copy on the small step; the name and the $295 figure carry the plate's hierarchy. */ font-size: var(--t-small); color: var(--ink); line-height: 1.5; } .tick-list svg { margin-top: 0.32em; color: var(--gold-mark); flex: none; } /* Fine print after an action: one interval, page-wide. 24px from the button, a hairline opening the fine-print group, 16px to the words. The hero once declared its own 24px / no-rule override here, but .seasonality came later in the file at equal specificity and silently won, so the hero shipped 12px + rule + 12px while the Section 4 closer shipped 24 + rule + 16. `.fine-print` is the same component under an honest name; `.seasonality` stays because it is what the hero and the Section 4 closer carry, and both say when the offer runs. Use `.fine-print` for any other fine print after an action. */ .seasonality, .fine-print { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--gold-hair); font-size: var(--t-label); line-height: 1.45; color: var(--body-quiet); max-width: 58ch; } /* In the hero the fine print takes the column's own 34rem, so its rule ends on the offer plate's right edge instead of short of it. */ .seasonality--hero { max-width: 34rem; } /* -------------------------------------------------------------------------- 9. Section 2 — Proof and differentiation Strata bands, not a row of identical cards. -------------------------------------------------------------------------- */ .diff { margin-top: var(--s-6); border-top: 1px solid var(--gold-hair); max-width: 66rem; container-type: inline-size; container-name: diff; } .diff__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--band-gap-stacked); padding-block: var(--s-5); border-bottom: 1px solid var(--gold-hair); } /* The Matching-Unit Query Rule, applied here as it already is on the walkthrough. The ladder's marker and title tracks are rem and grow with the reader's text setting; a px media query does not, so the bed stayed in three columns hundreds of pixels past the width where three columns fit and the clause track starved. 51.75rem is this bed's own width at a 900px viewport, so at a 16px root nothing moves and above it the gate travels with the text. */ @container diff (min-width: 51.75rem) { .diff__item { grid-template-columns: var(--band-marker) minmax(0, var(--band-title)) minmax(0, 1fr); gap: var(--band-gap); align-items: baseline; } } @supports not (container-type: inline-size) { @media (min-width: 56.25rem) { .diff__item { grid-template-columns: var(--band-marker) minmax(0, var(--band-title)) minmax(0, 1fr); gap: var(--band-gap); align-items: baseline; } } } .diff__num { font-family: var(--font-display); font-size: var(--t-small); font-weight: 600; color: var(--gold-text); letter-spacing: 0.08em; } .diff__title { font-family: var(--font-display); font-size: var(--t-reading); font-weight: 700; line-height: 1.35; color: var(--ink); } /* The band cells are

elements, so the global paragraph margin was adding 1rem on top of every stacked gap — the beds read 28px apart where the token said 12px. The grid's gap is the only interval in a band. */ .diff__num, .diff__title, .journey__marker, .journey__name { margin: 0; } .diff__body { color: var(--body); } .diff__body p { max-width: 58ch; } /* Matthew authority block */ .authority { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); margin-top: var(--s-8); padding-top: var(--s-7); border-top: 1px solid var(--gold-hair); } @media (min-width: 900px) { .authority { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-7); align-items: start; } } .authority__credentials { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-2); border-top: 1px solid var(--gold-hair); padding-top: var(--s-4); } .authority__credentials li { font-size: var(--t-small); line-height: 1.5; color: var(--body); padding-left: 1.1rem; position: relative; } .authority__credentials li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); } /* Guest proof */ .proof { margin-top: var(--s-8); padding-top: var(--s-7); border-top: 1px solid var(--gold-hair); } /* Guest testimonials: a manual carousel, never auto-rotating. On desktop it joins the band ladder like the FAQ: heading left, slides in the body column. Controls sit above the slides, so the arrows never move when a short slide follows the long one. Without JavaScript every slide shows, stacked. */ /* Gated on the bed, not the window: this grid's first column is 21.5rem of fixed track and its second is capped in rem too, so at a large text setting a px query kept a 65rem layout inside a 56rem window and the control row ran off the side. */ @container bed (min-width: 51.75rem) { .proof { display: grid; grid-template-columns: calc(var(--band-marker) + var(--band-gap) + var(--band-title)) minmax(0, 44rem); column-gap: var(--band-gap); align-items: start; } } @supports not (container-type: inline-size) { @media (min-width: 56.25rem) { .proof { display: grid; grid-template-columns: calc(var(--band-marker) + var(--band-gap) + var(--band-title)) minmax(0, 44rem); column-gap: var(--band-gap); align-items: start; } } } .carousel { margin-top: var(--s-5); } @media (min-width: 900px) { .carousel { margin-top: 0; } } /* The control row is chrome measured in rem, so at a large text setting it grew past the bed: five marks plus two arrows plus the gap ran 18.75rem, which is 600px at a 32px root inside a 328px phone column. It now yields in two stages — the marks shrink toward a 1.5rem floor that is still a comfortable target, and the row wraps the arrows onto their own line before anything can overflow. */ .carousel__controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--gold); } .carousel__controls[hidden] { display: none; } .carousel__marks { display: flex; flex: 1 1 auto; min-width: 0; } .carousel__mark { flex: 0 1 2.25rem; min-width: 1.5rem; width: 2.25rem; height: 2.75rem; padding: 0; background: transparent; border: 0; cursor: pointer; position: relative; } .carousel__mark::before { content: ''; position: absolute; left: 0.25rem; right: 0.25rem; top: 50%; height: 2px; background: var(--gold-quiet); transition: background 0.3s var(--ease); } .carousel__mark:hover::before { background: var(--gold); } .carousel__mark[aria-current='true']::before { background: var(--ore); } .carousel__steps { display: flex; flex: none; gap: var(--s-1); margin-left: auto; } .carousel__step { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; color: var(--ore-deep); background: transparent; border: 1px solid var(--gold-quiet); border-radius: var(--radius); cursor: pointer; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); } .carousel__step:hover:not(:disabled) { border-color: var(--gold); background: var(--mica-fill); } .carousel__step:disabled { color: var(--gold-mark); opacity: 0.45; cursor: default; } .carousel__track { padding-top: var(--s-4); } .reflection { margin: 0; } .reflection blockquote { margin: 0; } .reflection + .reflection { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--gold-hair); } .reflection p { font-family: var(--font-display); font-size: clamp(1.3125rem, 1.16rem + 0.63vw, 1.5rem); line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); max-width: 36ch; /* Hang the opening quote mark so the text edge stays flush. */ text-indent: -0.4em; } .reflection .reflection__more { margin-top: var(--s-4); font-family: var(--font-body); font-size: var(--t-reading); line-height: 1.6; font-weight: 400; letter-spacing: normal; color: var(--body); max-width: 58ch; text-indent: -0.36em; } /* With JavaScript the slides share one grid cell; the track takes the current slide's height (set by script) and changes when the slide does. Hidden slides are visibility:hidden, so they leave the accessibility tree and tab order. */ .js .carousel.is-ready .carousel__track { display: grid; align-items: start; touch-action: pan-y; } .js .carousel.is-ready .reflection { grid-area: 1 / 1; margin: 0; padding: 0; border: 0; opacity: 0; visibility: hidden; transform: translateX(var(--from, 1rem)); transition: opacity 0.35s var(--ease), transform 0.6s var(--ease), visibility 0s linear 0.35s; } .js .carousel.is-ready .reflection.is-current { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s var(--ease) 0.1s, transform 0.6s var(--ease) 0.1s, visibility 0s; } @media (prefers-reduced-motion: reduce) { .js .carousel.is-ready .carousel__track, .js .carousel.is-ready .reflection, .js .carousel.is-ready .reflection.is-current { transition: none; transform: none; } } .proof__note { margin-top: var(--s-4); max-width: 58ch; } /* Every section ends on the same beat: centred, between two gold rules, on the inverted ground. Section 4's summary used to end left-aligned on a hairline, the one closer of four in a different grammar — and the one carrying the price. */ .callout, .closing-value { margin-top: var(--s-7); padding: var(--s-6) var(--s-5); background: var(--quartz); border-block: 1px solid var(--gold); text-align: center; } .stratum--quartz .callout, .stratum--quartz .closing-value { background: var(--white); } .stratum--soft .callout, .stratum--soft .closing-value { background: var(--white); } .callout p { font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.5rem); line-height: 1.4; font-weight: 500; color: var(--ink); margin-inline: auto; max-width: 30ch; letter-spacing: -0.01em; } .callout .action-row { justify-content: center; } /* -------------------------------------------------------------------------- 10. Section 3 — The Journey Six stages on a descending arc. The bead inverts here. -------------------------------------------------------------------------- */ .journey { position: relative; margin-top: var(--s-6); } .journey__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 66rem; container-type: inline-size; container-name: journey; } /* Below the band breakpoint every bed stacks in one column, so the marker, the name and the copy all start at the same left edge. The two-column mobile grid this replaces auto-placed the copy back under the marker, 64px off the name. */ .journey__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--band-gap-stacked); padding-block: var(--s-5); border-bottom: 1px solid var(--gold-hair); } .journey__stage:first-child { border-top: 1px solid var(--gold-hair); } /* The arc: each stage steps further from the seam, then returns. Full amplitude on desktop; half on phones, where most paid traffic lands, so the page's most distinctive structural idea is not a desktop-only feature. */ .journey__stage { padding-left: calc(var(--offset) / 2); } .journey__stage:nth-child(1) { --offset: 0rem; } .journey__stage:nth-child(2) { --offset: 1rem; } .journey__stage:nth-child(3) { --offset: 2rem; } .journey__stage:nth-child(4) { --offset: 2rem; } .journey__stage:nth-child(5) { --offset: 1rem; } .journey__stage:nth-child(6) { --offset: 0rem; } /* Same repair as `.diff__item` and the walkthrough: gate the ladder in the unit its tracks are written in, and ask the bed rather than the window. */ @container journey (min-width: 51.75rem) { .journey__stage { grid-template-columns: var(--band-marker) minmax(0, var(--band-title)) minmax(0, 1fr); gap: var(--band-gap); align-items: baseline; padding-left: var(--offset); } } @supports not (container-type: inline-size) { @media (min-width: 56.25rem) { .journey__stage { grid-template-columns: var(--band-marker) minmax(0, var(--band-title)) minmax(0, 1fr); gap: var(--band-gap); align-items: baseline; padding-left: var(--offset); } } } .journey__marker { position: relative; font-family: var(--font-display); font-size: var(--t-label); font-weight: 600; color: var(--gold-text); letter-spacing: 0.08em; } /* The diamond sits at the marker column's own left edge, not 0.9rem outside it. Overhanging, it broke the section's left content edge on stages 1 and 6 — the two stages the Arc Rule holds flush against the seam. */ .journey__marker::after { content: ''; position: absolute; left: 0; top: 0.52em; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); } /* The marker's own indent and its trailing rule belong to the three-column state, so they travel with the ladder's gate rather than with a second viewport query. */ .journey__marker::after { display: none; } @container journey (min-width: 51.75rem) { .journey__marker { padding-left: 0.9rem; } .journey__marker::after { display: block; } } @supports not (container-type: inline-size) { @media (min-width: 56.25rem) { .journey__marker { padding-left: 0.9rem; } .journey__marker::after { display: block; } } } .journey__name { font-family: var(--font-display); font-size: var(--t-subhead); font-weight: 700; color: var(--ink); line-height: 1.3; letter-spacing: -0.01em; } .journey__copy { color: var(--body); } .journey__copy p { max-width: 58ch; } .pacing-note { margin-top: var(--s-5); font-size: var(--t-small); color: var(--body-quiet); font-style: italic; max-width: 58ch; } /* -------------------------------------------------------------------------- 11. Section 4 — What's included -------------------------------------------------------------------------- */ .offer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); margin-top: var(--s-6); } @media (min-width: 900px) { .offer-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-6); align-items: start; } } .summary-card { background: var(--quartz); border: 1px solid var(--gold-quiet); border-radius: var(--radius); padding: var(--s-5); box-shadow: var(--lift-1); } .stratum--quartz .summary-card { background: var(--white); } /* A bed, not a second plate. It shipped as the summary card's twin — same ground, border, radius and padding, differing only by one shadow — so two co-equal surfaces sat side by side and neither won. The plate rule settles which is which: a bordered, shadowed plate is for an offer, a form or a funnel terminus. The summary card is the offer; this is the arithmetic behind it. So it takes the stratum treatment instead — transparent ground, one gold rule on top, square corners — and the plate keeps its elevation alone. */ .value-block { border-top: 1px solid var(--gold); padding: var(--s-5) 0 0; } .value-list { list-style: none; margin: var(--s-3) 0 0; padding: 0; } .value-list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding-block: var(--s-2); border-bottom: 1px solid var(--gold-hair); font-size: var(--t-small); line-height: 1.4; } .value-list li:last-child { border-bottom: 0; } .value-list .v-name { color: var(--body); } .value-list .v-sub { display: block; margin-top: 0.2rem; font-size: var(--t-label); line-height: 1.45; color: var(--body-quiet); } .value-list .v-amt { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .value-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--gold); font-family: var(--font-display); } .value-total__label { font-size: var(--t-small); color: var(--body); } .value-total__amt { font-size: var(--t-recap); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } /* Same vocabulary as .price__was in the plate: the superseded figure goes quiet and takes a Mica strike, so the pair reads as a gap rather than as two facts. */ .value-total__amt--was { color: var(--body-quiet); text-decoration: line-through; text-decoration-color: var(--mica); } .value-total--price { border-top-color: var(--gold-hair); } .value-gap { margin-top: var(--s-2); font-family: var(--font-display); font-size: var(--t-small); font-weight: 600; color: var(--ore-deep); } .footnote { margin-top: var(--s-3); font-size: var(--t-label); line-height: 1.5; color: var(--body-quiet); } /* The plate's most valuable line, and until 2026-09-18 its quietest: it shipped at 15px beside a "Save $55" badge worth about a fifth as much. It now reads at the plate's reading size with the amount in Ink, the same weight the prices take, so the two commercial facts in this plate are legible against each other. */ .insurance-line { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--gold-hair); font-size: var(--t-reading); line-height: 1.5; color: var(--body); } .insurance-line__amt { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .insurance-line a { font-weight: 600; } /* Stage grid + shared detail panel */ .stages { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--gold-hair); } .stages__helper { font-size: var(--t-small); color: var(--body-quiet); margin-bottom: var(--s-4); } .stages__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } /* The cards and their panels are siblings in one grid, so the panel can span both columns under the whole 2x2 block. `nth-of-type` used to place the cards, which worked only while the cards were