/* ========================================================================== MyCabin homepage (fresh conversion) — Page Pack frontend CSS Scoped entirely under .pp-home (Page Pack Spec §5). Every selector below is nested under that root class — no bare element or utility selectors. Re-derived independently from source-design/myc-homepage.zip's own styles.css — see manifest.json notes for what was migrated to native Gutenberg attributes vs. what stays here. 01 Tokens (scoped custom properties, not :root) 02 Base resets (scoped) 03 Section / layout helpers + typography utilities 04 Buttons, links, icon buttons, dots 05 Hero + demo-day bars (inline + docked) 06 Press marquee 07 Popular homes rail 08 Two routes 09 Financing marquee 10 Proof (video + grid) 11 Client stories + customer portrait grid 12 Reviews marquee 13 Process shortlist (scroll-pinned hero + step rail) 14 FAQ accordion 15 Final CTA 16 Flow-layout margin protection (Page Pack Spec §5 / rule 6) 17 Desktop layer (min-width: 900px) 18 Reduced motion ========================================================================== */ /* ========================================================================== 01 TOKENS — scoped to .pp-home, never :root (Page Pack Spec §5, layer 2). ========================================================================== */ .pp-home { --pp-ink: #27272C; --pp-bone: #FFFFFF; --pp-paper: #FFFFFF; --pp-surface: #FBF6F3; --pp-olive: #6E5C3C; --pp-accent: #917EBC; --pp-accent-soft: #CDCBFF; --pp-scrim: var(--pp-ink); --pp-stone: color-mix(in oklab, var(--pp-ink) 11%, var(--pp-bone)); --pp-ink-hair: color-mix(in oklab, var(--pp-ink) 7%, var(--pp-bone)); --pp-ink-line: color-mix(in oklab, var(--pp-ink) 13%, var(--pp-bone)); --pp-ink-72: color-mix(in oklab, var(--pp-ink) 72%, transparent); --pp-ink-56: color-mix(in oklab, var(--pp-ink) 65%, transparent); --pp-bone-80: color-mix(in oklab, var(--pp-bone) 80%, transparent); --pp-bone-60: color-mix(in oklab, var(--pp-bone) 60%, transparent); --pp-bone-line: color-mix(in oklab, var(--pp-bone) 22%, transparent); --pp-maxw: 1280px; --pp-gutter: clamp(18px, 4vw, 40px); --pp-sec-y: clamp(64px, 10vw, 136px); /* Rail/marquee/demobar gutter — lets those full-bleed components still start their first item at the same content column as everything else. */ --pp-rail-pad: max(var(--pp-gutter), calc((100% - var(--pp-maxw)) / 2 + var(--pp-gutter))); --pp-r-pill: 999px; --pp-r-card: 11px; --pp-r-lg: 10px; --pp-r-md: 9px; --pp-r-sm: 8px; --pp-ease: cubic-bezier(.22, 1, .36, 1); --pp-t-med: .25s; --pp-t-slow: .35s; position: relative; background: var(--pp-bone); color: var(--pp-ink); overflow-x: clip; } /* ========================================================================== 02 BASE RESETS (scoped) ========================================================================== */ .pp-home h1, .pp-home h2, .pp-home h3, .pp-home h4, .pp-home p, .pp-home blockquote, .pp-home figure { margin: 0; } .pp-home a { color: var(--pp-ink); text-decoration: none; } .pp-home a:hover { color: var(--pp-accent); } .pp-home img, .pp-home video { max-width: 100%; display: block; } .pp-home button { font: inherit; color: inherit; } .pp-home blockquote.wp-block-quote { border: 0; padding: 0; margin: 0; font-style: normal; } .pp-home blockquote.wp-block-quote p { margin: 0; } /* ========================================================================== 03 SECTION / LAYOUT HELPERS -------------------------------------------------------------------------- .pp-section itself carries no horizontal padding, so a full-bleed child (a rail or marquee) can still reach the true viewport edge. Any child that should instead sit in the normal maxw+gutter content column (the equivalent of the source's own `.wrap` div) gets that treatment directly, without an extra wrapper block — same visual result, flatter markup. ========================================================================== */ .pp-home .pp-section { position: relative; padding-block: var(--pp-sec-y); } .pp-home .pp-section--press { overflow: hidden; } /* Plain scoped top hairline — deliberately NOT Gutenberg's native border block-support (style.border.top + has-border-color class). That native attribute pulled in the theme/global-styles default border-width for the other three sides (confirmed live: a 3px solid frame appeared on the right/bottom/left of the financing section, from nothing in this pack's own files), a class of leak the previous accepted Homepage's own pack avoids entirely by never using the native border attribute. */ .pp-home .pp-section--rule-top { border-top: 1px solid var(--pp-ink-hair); } /* Micro Fix 34: color only. Source's Financing
carries `style="border-top:1px solid var(--ink-hair)"` (7% ink on bone, the subtle hairline token); this rule used --pp-ink-line (13% ink on bone -- the heavier row-divider token), so the seam rendered visibly darker. Token corrected to the source's --pp-ink-hair (already defined, same formula as source's --ink-hair). Width/thickness/position/margins untouched. This class is used only by #financing. */ .pp-home .pp-section--homes, .pp-home .pp-section--proof { padding-block: clamp(32px, 5vw, 56px); } .pp-home .pp-section--process { padding-top: 0; /* Micro Fix 19: the customer-photo mosaic's fade (.pp-portrait-grid-wrap::after, just above) already correctly resolves to var(--pp-surface) (#FBF6F3, matching source's --surface/--beige exactly) at its terminal stop -- but this section, which the mosaic's fade sits inside and which is immediately followed by "process", was never given a background-color of its own, so nothing painted underneath the fade's endpoint. Source's own process-shortlist
class list is `section process-shortlist bg-surface`, where `.bg-surface { background: var(--surface); }` -- the exact same token/value the fade already targets. This pack was missing the .bg-surface-equivalent entirely, leaving the section to render at the page's default background instead, producing the visible seam. Fixed by reusing the pack's own existing --pp-surface variable (already shared with the fade, per this round's preferred strategy) rather than introducing a second, independently-hardcoded color. */ background-color: var(--pp-surface); } /* Micro Fix 20, issue 1 (white gap): Micro Fix 19 gave this section the correct background-color, but a visible white/lighter band still appeared between the mosaic's fade and this section's now-correct background. Root cause: the same un-neutralized WordPress default "Flow" block-gap mechanism already found and fixed at eight earlier top-level section boundaries this Homepage (Micro Fix 05/06/07/10/15) -- .pp-section--process is .pp-home's 9th top-level child, and had never been added to that neutralization list, so it was silently pushed down from the true reviews/process seam by the theme's default block-gap margin. Both this section's own padding-bottom:0 (reviews) and padding-top:0 (this section, confirmed matching source's own `style="padding-top:clamp(60px, 9vw,120px);padding-bottom:0"` on the reviews
and process-shortlist's own plain, unpadded top exactly) already left zero intentional gap between them -- the visible band was entirely the injected margin, showing the page's own base background through the gap. Neutralizing it removes the gap outright; no separate "smoothness" fix was needed for issue 2 once this was fixed -- the fade's own gradient formula (`linear-gradient(180deg, transparent, var(--pp- surface) 78%)`) was re-verified character-for-character identical to source's, so the perceived abruptness was this gap creating a hard visual stop right after the gradual fade, not an actual difference in the fade itself. */ .pp-home > .pp-section--process { margin-block-start: 0; } .pp-home .pp-section--reviews { overflow: hidden; padding-top: clamp(60px, 9vw, 120px); padding-bottom: 0; } .pp-home .pp-section > .wp-block-heading, .pp-home .pp-section > p, .pp-home .pp-section > .pp-routes, .pp-home .pp-section > .pp-proof-media-grid, .pp-home .pp-section > .pp-reviews-head, .pp-home .pp-section > .pp-head-row, .pp-home .pp-section > .pp-ps-grid, .pp-home .pp-section > .pp-faq-cols, .pp-home .pp-section > .pp-stories, .pp-home .pp-section > .pp-stories-controls, .pp-home .pp-section > .pp-portrait-grid-wrap, .pp-home .pp-section > .wp-block-buttons.pp-proof-cta, .pp-home .pp-section > .wp-block-buttons.pp-reviews-cta { box-sizing: border-box; max-width: var(--pp-maxw); margin-inline: auto; padding-inline: var(--pp-gutter); } /* Micro Fix 29: `.pp-stories-controls` (mobile-only Customer Stories rail controls) was missing from this list -- `.pp-stories` (the rail itself, its sibling) was already here, but the controls row underneath it never got the same maxw+gutter treatment, so it rendered edge-to-edge against the full section width instead of the normal content column: the progress indicator sat flush against the true left edge and the arrows flush against the true right edge. Source's own controls row (`.rail__ controls.stories-controls`) sits, like `.stories`, as a direct child of `.wrap` -- its own inline `style="padding-inline:0"` only means "no padding beyond what .wrap already provides," not "no inset at all." This pack has no separate `.wrap` wrapper element (see this section's own header comment above); the equivalent inset is applied directly to each qualifying child instead, and `.pp-stories-controls` simply wasn't one of them. Its own dedicated rule below already set `padding-inline:0` (now correctly relying on this shared rule for the actual inset, matching source's own equivalent intent) but also `max-width:none`, which is removed below since it fought the max-width this rule now provides. */ .pp-home .pp-head-row, .pp-home .pp-reviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 24px; flex-wrap: wrap; } .pp-home h2.wp-block-heading { line-height: 1.04; letter-spacing: -.022em; font-weight: 500; } .pp-home h3.wp-block-heading { font-weight: 500; letter-spacing: -.018em; } .pp-home .pp-lead { margin-top: clamp(14px, 2vw, 18px); line-height: 1.55; color: var(--pp-ink-72); } .pp-home .pp-eyebrow { margin-top: clamp(28px, 5vw, 40px); font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--pp-ink-56); } .pp-home .pp-mw-16 { max-width: 16ch; } .pp-home .pp-mw-18 { max-width: 18ch; } .pp-home .pp-mw-20 { max-width: 20ch; } .pp-home .pp-mw-24 { max-width: 24ch; } /* Micro Fix 17, issues A+B: source declares this reviews heading as `h2 h2--xs mw-24` -- NOT plain `.h2` -- where `.h2--xs { font-size: clamp(26px,4.6vw,40px); line-height:1.08; }` is a genuinely smaller size than plain `.h2`'s clamp(30px,6.4vw,58px), the same "wrong preset" bug already found and fixed for the Financing heading (Micro Fix 12) and proof-card titles (Micro Fix 13): this block uses `"fontSize":"mycabin-heading-xl"` (matching plain .h2), whose generated `.has-mycabin-heading-xl-font-size` class carries `!important` from WordPress core, so a plain override loses regardless of selector specificity. Because `ch` is font-size-relative, "24ch" at the wrong (larger) size renders wide enough to consume the ENTIRE .pp-reviews-head flex row on its own -- even though `.pp-reviews-head { display:flex; justify-content:space-between; ... }` already exactly matches source's `.head-row` mechanism -- leaving no room for `.pp-rating` to sit beside it, so `flex-wrap:wrap` (also already correct, matching source) wraps the rating onto its own line below. This single font-size correction is expected to resolve the header composition (issue A) as a direct structural consequence of the heading actually fitting at its correct width, not a separate layout fix -- exactly as this round's own instructions anticipated ("once the source header-row structure is restored, the cards should naturally begin higher" applies equally to the rating fitting beside the heading). */ .pp-home .pp-reviews-head h2.pp-mw-24 { font-size: clamp(26px, 4.6vw, 40px) !important; /* Micro Fix 18: the font-size fix above (Micro Fix 17) resolved the header composition, but the heading still wrapped too EARLY ("What people are / saying about MyCabin" instead of source's "What people are saying / about MyCabin") -- .pp-mw-24's max-width:24ch was already confirmed correctly applying (no competing max-width/width rule exists for this element, verified via a full-file search), so the effective available width itself was not the problem. The actual cause is the same one already found and fixed for every other heading on this page (Mentioned In, Two Routes, Financing): the active theme applies `text-wrap: balance` to headings by default, which deliberately picks a narrower-than-available wrap width to even out line lengths, independent of max-width -- this specific heading was simply the one place that override was never added. text-wrap:pretty cancels it, letting the already-correct 24ch width actually govern the wrap point, matching source's own inherited body-level value (this pack's paragraphs already compute text-wrap:pretty by default). */ text-wrap: pretty; } .pp-home .pp-mw-26 { max-width: 26ch; } .pp-home .pp-mw-34 { max-width: 34ch; } .pp-home .pp-mw-38 { max-width: 38ch; } .pp-home .pp-mw-42 { max-width: 42ch; } .pp-home .pp-mw-46 { max-width: 46ch; } /* Micro Fix 04 RETRY (v1.0.6): the generic .pp-section > h/p rule above sets box-sizing:border-box + margin-inline:auto + padding-inline:var(--pp-gutter) directly on these elements (this pack has no separate .wrap ancestor like source does). Three distinct bugs compounded in the v1.0.5 attempt, which only overrode max-width: 1) margin-inline:auto was left unopposed, so the narrower box got centered instead of staying flush with the section's own text column (pushed the paragraph right). 2) box-sizing:border-box subtracted the gutter padding from the ch-based width budget, narrowing the usable text width below genuine 34ch/46ch. 3) the active theme applies `text-wrap: balance` to headings (confirmed live: paragraphs already correctly compute `text-wrap: pretty`, matching source's own body rule at source-design/homepage-original-new.zip/styles.css:141 -- only headings get the theme's balance override), which re-balances line lengths independent of max-width and was the dominant cause of the too-narrow wrap. Fix: box-sizing:content-box (ch measures pure content, matching source's separate wrap-padding architecture), text-wrap:pretty (cancels the theme's heading override, matching source's inherited body value), and margin-left:var(--pp-rail-pad) with margin-right:0 and padding-inline:0 -- --pp-rail-pad (defined above, already used by this pack's own bleed-rail components) is the exact "centered content-column left offset + gutter" quantity that plain full-width children (like the eyebrow) resolve to via their own max-width:var(--pp-maxw)+margin-inline:auto; using it here decouples the narrower elements' horizontal POSITION from their WIDTH, so they align flush with the section's text column at every viewport width instead of being independently (and differently) centered. Verified live via a disposable diagnostic Draft at 1470/800/500px viewports: heading/paragraph/eyebrow text all start at the identical x-offset at every width, and the heading wraps as "MyCabin -- the perfect choice for your / next home", matching source. */ .pp-home .pp-section--intro h2.pp-mw-34 { box-sizing: content-box; max-width: 34ch; margin-left: var(--pp-rail-pad); margin-right: 0; padding-inline: 0; text-wrap: pretty; } .pp-home .pp-section--intro p.pp-mw-46 { box-sizing: content-box; max-width: 46ch; margin-left: var(--pp-rail-pad); margin-right: 0; padding-inline: 0; /* Micro Fix 05: source's .lead rule (styles.css:249-254) sets font-weight:300 -- the pack's own shared .pp-lead rule never declared it, so this paragraph fell back to the inherited body weight (400), rendering visibly heavier than source. Font-family, font-size (mycabin-body-l preset), line-height and color (--pp-ink-72) were all individually re-verified against source and already matched exactly -- weight was the one real mismatch. Scoped here (not on the shared .pp-lead class) because .pp-lead is also used, unmodified, by the Two Routes and financing paragraphs -- both out of scope this round. */ font-weight: 300; } /* Micro Fix 05, issue A: WordPress's default "Flow" layout (this pack's own root .pp-home group has no explicit `layout` attribute) generates `:where(.is-layout-flow) > * + * { margin-block-start: }` -- the exact mechanism already documented and neutralized for several *inner* components in section 16 below, but never applied to .pp-home's own top-level section children. .pp-section--intro is the 3rd top-level child (after .pp-hero and the normally-hidden .pp-dock), so it silently receives that extra margin on top of its own, already-correct `padding-top: var(--wp--preset--spacing--mycabin- section-standard)` -- inflating the gap below the brown Demo Day lane beyond what source produces (source has no such mechanism: .hero and the "Mentioned In"
are plain siblings with no injected gap). :where() carries zero specificity, so this plain override needs no !important. Scoped to this one section only, not a global .pp-home > * reset, per this round's explicit scope -- the same un-neutralized default likely affects other top-level section boundaries pack-wide, but that is out of scope for this round. */ .pp-home > .pp-section--intro { margin-block-start: 0; } /* Micro Fix 06: the same un-neutralized WordPress Flow block-gap mechanism documented for .pp-section--intro above (Micro Fix 05, issue A), one section boundary later. .pp-section--homes's own padding-block already matches source exactly (clamp(32px, 5vw, 56px), the same reduced value as source's own inline `style="padding-top:clamp(32px,5vw,56px)"` on
, deliberately smaller than the standard section padding since the marquee immediately above it already carries its own clamp(28px,6vw,44px) bottom padding) -- but as .pp-home's 4th top-level child (after .pp-hero, .pp-dock and .pp-section--intro), it still silently receives the theme's default block-gap margin stacked on top of that already-correct padding, inflating the gap between the marquee and "Popular prefab homes" beyond what source produces (source has no such mechanism: the two
elements are plain siblings with no injected gap). Scoped to this one boundary only, matching the same minimal, non-global pattern as Micro Fix 05. */ .pp-home > .pp-section--homes { margin-block-start: 0; } /* Micro Fix 07, issue 2: same un-neutralized WordPress Flow block-gap mechanism as Micro Fix 05/06 above, one more section boundary along. The "Two Routes" section (.pp-section--surface, the top-level sibling immediately after .pp-section--homes) already has correct top padding -- var(--wp--preset--spacing--mycabin-section- standard), matching source's own plain, un-overridden `.section{padding-block: var(--sec-y)}` on
exactly, since "Two Routes" carries no inline padding-top override in source (unlike "Popular prefab homes", which does) -- but as .pp-home's 5th top-level child it was still silently receiving the theme's default block-gap margin on top of that already-correct padding, inflating the gap below the rail's progress/arrow controls row. Scoped via an adjacent-sibling selector (.pp-section--homes + .pp-section--surface) rather than the bare .pp-section--surface class, because that class is reused by a second, unrelated, strictly out-of-scope section later on the page (the "stories" section) -- the sibling combinator matches only the one instance that directly follows "Popular prefab homes", since .pp-section--homes itself appears exactly once. No content.html change was needed. */ .pp-home > .pp-section--homes + .pp-section--surface { margin-block-start: 0; } /* Micro Fix 08: "Not starting from scratch?" headline/paragraph width. Source (styles.css) declares .mw-18{max-width:18ch} and .mw-42{max-width:42ch} literally (confirmed, not inferred from the class names) on this h2/p. This pack's generic .pp-section > .wp-block-heading / .pp-section > p rule (3-class / 3-class+element specificity) already beats the plain .pp-mw-18/.pp-mw-42 utility classes (2-class), the same mechanism already fixed for the "Mentioned In" section (Micro Fix 04 Retry) -- so this heading/paragraph render at the section's full max-width instead of 18ch/42ch. Scoped via the same adjacent-sibling selector as the Micro Fix 07 spacing fix above (.pp-section--homes + .pp-section--surface), rather than a bare h2.pp-mw-18/p.pp-mw-42 selector, because .pp-mw-18 is reused by two other, out-of-scope headings ("stories" and FAQ) and .pp-section--surface itself is reused by the out-of-scope "stories" section -- this combinator matches only the "Two Routes" instance. Left alignment is explicitly frozen this round (user confirmed it is already correct): at the section's CURRENT, un-narrowed width the generic rule's max-width:var(--pp-maxw) + margin-inline:auto + padding-inline: var(--pp-gutter) (border-box) already resolves to the identical left offset as --pp-rail-pad (both variables share the same max(gutter, (100%-maxw)/2+gutter) formula) -- so replacing that coupled position+width mechanism with an explicit margin-left:var(--pp-rail-pad) + content-box max-width is mathematically the same left edge today, but (unlike leaving margin-inline:auto in place) does not shift it once the box is narrowed, exactly the same decoupling already proven correct for the "Mentioned In" heading/paragraph. text-wrap:pretty on the heading cancels the active theme's default text-wrap:balance on headings (already documented and fixed the same way for "Mentioned In"'s own heading) so the narrower width actually produces natural wrapping instead of a rebalanced, still-wide line; the paragraph needs no such override (this pack's paragraphs already compute text-wrap:pretty by default, per the same earlier finding). Section padding-top, background, and every other rule for this section are untouched. */ .pp-home > .pp-section--homes + .pp-section--surface h2.pp-mw-18 { box-sizing: content-box; max-width: 18ch; margin-left: var(--pp-rail-pad); margin-right: 0; padding-inline: 0; text-wrap: pretty; } .pp-home > .pp-section--homes + .pp-section--surface p.pp-mw-42 { box-sizing: content-box; max-width: 42ch; margin-left: var(--pp-rail-pad); margin-right: 0; padding-inline: 0; /* Micro Fix 09: source's shared .lead rule (styles.css) sets font-weight:300 -- the same property this pack's own shared .pp-lead rule never declared, already found and fixed once for the "Mentioned In" paragraph (Micro Fix 05). Font-family (Poppins, inherited), font-size (the mycabin-body-l preset, matching source's own .lead{font-size:clamp(16px,2vw,20px)}), line-height (1.55) and color (--pp-ink-72, matching source's --ink-72 formula) were all re-verified and already match -- weight was the one real mismatch again. Scoped here (not on the shared .pp-lead class) for the same reason as Micro Fix 05: .pp-lead is also used, unmodified, by the financing paragraph -- out of scope this round. */ font-weight: 300; } /* Micro Fix 10: source's Financing
carries its own `style="border-top:1px solid var(--ink-hair)"` directly on the section wrapper -- no separate divider element. This pack's equivalent, `.pp-section--rule-top { border-top: 1px solid var(--pp-ink-line); }` (below), is already structurally correct in the same way: a border on the #financing wrapper's own top edge, coinciding with its own box's top (border-box), which is exactly where Two Routes' own #FBF6F3 background ends and Financing's plain, background-less white begins. The reported "floating separator with whitespace above and below it" is the same un-neutralized WordPress Flow block-gap margin already found and fixed for five earlier section boundaries (Micro Fix 05/06/07) -- #financing is .pp-home's 6th top-level child and was never added to that list, so it was silently pushed down from the true Two-Routes/Financing seam by the theme's default block-gap. Because Financing has no background-color of its own (matching source's bg-paper, i.e. the plain page background), that pushed-down gap is visually indistinguishable white space -- making the border-top (which moved down together with the rest of #financing, still correctly at ITS OWN top edge) look like a divider floating independently inside the section, exactly matching the report. Fixed the same way as every prior instance: neutralize only this section's own top margin, restoring the border to sit exactly at the real background-change boundary. Financing's own padding-top (between the border and the heading) is untouched, so the heading's spacing below the line is unaffected. */ .pp-home > .pp-section--rule-top { margin-block-start: 0; } /* Micro Fix 15: same un-neutralized WordPress Flow block-gap mechanism already found and fixed at five earlier top-level section boundaries (Micro Fix 05/06/07/ 10). Source: the "proof"
(id="proof", "Nothing left to chance.") has no own bottom-whitespace element -- its CTA ("Learn more about MyCabin") is simply the last child before
, and the section's own padding-bottom (clamp(32px,5vw,56px), the same reduced value as its padding-top, already correct in this pack via .pp-section--proof) provides all the space below it. The following "Client stories"
has no inline padding-top override, so it uses the plain, standard `.section{padding-block:var(--sec-y)}` rule -- also already correct in this pack via the mycabin-section-standard preset. Both paddings individually matched source exactly, but #stories (.pp-section--surface's 2nd instance) is .pp-home's next top-level child after .pp-section--proof and had never been added to the neutralization list, so it silently received the theme's default block-gap margin on top of its own correct padding-top -- inflating the gap below the CTA beyond what source produces. Scoped via an adjacent-sibling selector (.pp-section--proof + .pp-section-- surface) rather than the bare .pp-section--surface class, since that class is also used by the earlier, already-protected "Two Routes" section -- .pp-section-- proof appears exactly once, so this combinator matches only the "stories" instance. No content.html change needed; the CTA's own position relative to the content above it, and "stories"' own internal content, are both untouched. */ .pp-home > .pp-section--proof + .pp-section--surface { margin-block-start: 0; } /* Micro Fix 11, issues A/B: Financing headline/paragraph width. Source (styles.css) declares this heading as `h2 h2--sm mw-26` -- NOT plain `.h2` -- where `.h2--sm { font-size: clamp(28px, 5.6vw, 52px); line-height: 1.08; }` is a genuinely smaller size than plain `.h2`'s clamp(30px,6.4vw,58px). This pack's block instead uses the `mycabin-heading-xl` preset (clamp(30px,6.4vw,58px) -- matches plain .h2, confirmed already correct for "Mentioned In"/"Two Routes", but wrong here). Since `ch` is a font-size-relative unit, rendering "26ch" at the wrong (larger) font-size produces a wider box than genuine 26ch at .h2--sm's actual size -- a real, source-provable typography cause directly essential to reproducing the correct width/wrap, not a cosmetic change. Overriding font-size only (not the rest of the block's typography) is why the headline still wrapped too wide even before considering the max-width specificity conflict below; line-height was left untouched, since (unlike font-size) it does not affect ch-width math and is not itself a reported defect this round. `.mw-26`/`.mw-46` (26ch/46ch, confirmed literal) then lose to the generic `.pp-section > h/p` rule, the same specificity conflict already fixed for "Mentioned In" and "Two Routes" -- same proven remedy: box-sizing:content-box, text-wrap:pretty (heading only -- paragraphs already compute text-wrap:pretty by default), and margin-left:var(--pp-rail-pad) in place of margin-inline:auto so left alignment is preserved instead of re-centering once narrowed (mathematically identical to the current, un-narrowed left edge, exactly as established for the two earlier sections). Scoped via #financing (a unique id, matching source's own id, no markup change needed) rather than a bare selector, since .pp-mw-26 is also used by the out-of-scope "Nothing Left to Chance" paragraph and .pp-mw-46 by the out-of-scope "Mentioned In" paragraph. Note: this pack's shared .pp-lead rule is still missing font-weight:300 (the same latent bug already fixed for "Mentioned In" and "Two Routes" in their own dedicated rounds) -- not fixed here, since weight is not one of this round's three confirmed issues. */ .pp-home #financing h2.pp-mw-26 { box-sizing: content-box; max-width: 26ch; margin-left: var(--pp-rail-pad); margin-right: 0; padding-inline: 0; text-wrap: pretty; /* Micro Fix 12: the Micro Fix 11 font-size correction above never actually took effect. WordPress core generates font-size PRESET utility classes (here, `.has-mycabin-heading-xl-font-size`, from this block's `"fontSize": "mycabin-heading-xl"` attribute) with `!important` baked in (wp-includes/class-wp-theme-json.php's preset-class output; the same general "Global Styles wins via importance, not specificity" mechanic already found and handled for this pack's body font-family, documented in class-mgds-fonts.php) -- so a plain, non-important font-size here, even at higher selector specificity, always lost to it. This round's `!important` is the narrowest possible fix: it targets only this one already-uniquely-scoped rule (#financing h2.pp-mw-26, not any shared/global selector), corrects exactly one property, and is required specifically because the competing rule is itself !important -- not used to "overpower Gutenberg" generally. The alternative (removing the `fontSize` attribute from content.html so the preset class is never applied at all) was available but rejected in favor of staying CSS-only, per this round's explicit file-ownership preference. */ font-size: clamp(28px, 5.6vw, 52px) !important; } .pp-home #financing p.pp-mw-46 { box-sizing: content-box; max-width: 46ch; margin-left: var(--pp-rail-pad); margin-right: 0; padding-inline: 0; /* Micro Fix 12: source's shared .lead rule sets font-weight:300; this pack's shared .pp-lead rule never declares one, so this paragraph fell back to the inherited body weight (400) -- the same latent bug already fixed for "Mentioned In" and "Two Routes" in their own dedicated rounds, flagged but not yet fixed here at the time of Micro Fix 11. Font-family, font-size (mycabin- body-l preset, already correct), line-height and color were not touched -- only weight was wrong. No !important needed here: unlike font-size, font-weight is not part of WordPress's preset-class system, so this plain declaration in the already most-specific rule for this element wins normally. */ font-weight: 300; } /* Micro Fix 35: Financing headline -> paragraph gap, below desktop only. Source: `

` -- a fixed 18px at every width (the heading has `margin:0` via source's reset, so this is the whole gap). Pack: the shared `.pp-lead { margin-top: clamp(14px, 2vw, 18px) }` resolves to 14px at phone widths (2vw < 14px until 700px) and only reaches 18px at 900px, so the paragraph sat 4px too close on mobile/narrow tablet. Not a WordPress block-gap effect: `.pp-lead` (0,2,0) already beats the flow-layout margin. Scoped to #financing's paragraph and the file's existing below-desktop breakpoint; at >=900px the shared rule already computes 18px, so desktop is untouched. Shared `.pp-lead`, the heading, typography, width and wrapping are not changed. */ @media (max-width: 899px) { .pp-home #financing p.pp-mw-46 { margin-top: 18px; } } /* Micro Fix 36: Reviews section top -> headline gap, below desktop only. Source: `

` directly follows the Customer Stories
as a plain sibling with no injected gap, so the headline sits exactly clamp(60px,9vw,120px) below the seam. This pack's `.pp-section--reviews` padding-top is already that same value (rule near the top of this file, unchanged), and the headline/rating row add no top space of their own. The extra space is the same un-neutralized WordPress Flow block-gap mechanism already fixed at the other top-level section boundaries (Micro Fix 05/06/07/10/15): `.pp-home`'s flow layout injects `:where(.is-layout-flow) > * + * { margin-block-start: }` onto this section, stacked above its correct padding. Stories has a #FBF6F3 background and Reviews none, so the injected margin shows as plain white space under the Stories seam, i.e. as extra top padding. Neutralized for this one section only (:where() has zero specificity, so no !important), scoped to the file's existing below-desktop breakpoint so the accepted desktop layout is untouched. The Stories section, the seam, the reviews padding, headline, rating row, rail and cards are not changed. */ @media (max-width: 899px) { .pp-home > .pp-section--reviews { margin-block-start: 0; } } /* Micro Fix 37: "Simple. Fast. Clear." line wrap, below desktop only. Source: `

` sits in a flex-centered `.ps-hero__inner` with the same gutter padding, size (clamp(38px,10vw,52px)), weight, letter-spacing and `text-align:center` this pack already has, no width/max-width/white-space rule, and inherits `text-wrap: pretty` from source's body (styles.css:141), so it wraps greedily: "Simple. Fast." / "Clear." This pack's box, typography and words (split into the same inline-block spans by frontend.js) already match; the only difference is that the active theme applies `text-wrap: balance` to headings (the same override already found for the Mentioned In, Two Routes, Financing and Reviews headings), which evens the two lines out as "Simple." / "Fast. Clear." Restores the source's `pretty` on this one heading only, inside the file's existing below-desktop breakpoint. No width, margin, position, typography, fade or markup is changed; at desktop the tagline is a single line, so nothing changes there. */ @media (max-width: 899px) { .pp-home .pp-ps-display { text-wrap: pretty; } } /* Micro Fix 38: three mobile-only FAQ corrections, all inside the file's existing below-desktop breakpoint and all scoped to the FAQ. (1) Section top -> headline gap. Source: `
` -> `.section { padding-block: var(--sec-y) }` (clamp(64px,10vw,136px)), a plain sibling of the process section with no injected gap. This pack's #faq padding-top is the same value (mycabin-section-standard preset, unchanged), but #faq is a top-level child of `.pp-home` that was never added to the block-gap neutralization list used at the other section boundaries (Micro Fix 05/06/07/10/ 15/36): the flow layout's `:where(.is-layout-flow) > * + * { margin-block-start: }` stacks on top of its padding, visible as extra white space because #faq has no background of its own. Neutralized for this one section. (2) Headline wrap. Source: `h2.h2.h2--sm.mw-18` (max-width 18ch) inherits `text-wrap: pretty` from body, so it wraps greedily: "Questions people" / "ask us." Box, size and max-width already match here; the active theme's default `text-wrap: balance` on headings evened it out as "Questions" / "people ask us." (the same override fixed for the other headings in earlier rounds). `pretty` restored on this one heading. Font size/weight/line-height/width unchanged. (3) Wrapped-row breathing room. Source's question is `

` (`.faq h3 { font: inherit }`) around a `