/* ============================================================================= SECTION COPY — SHARED GLOBAL LOCK ----------------------------------------------------------------------------- Single source of truth for title -> first-paragraph spacing and paragraph -> paragraph spacing inside the shared 101 and Process sections on public product pages. Canonical lock reference: .cursor/rules/public-page-101-system.mdc OWNERSHIP - Title -> first paragraph spacing is controlled ONLY by the title margin (via --section-title-gap). No flex gap on the section root for this spacing. - Paragraph -> paragraph spacing inside the 101 rail is controlled ONLY by .section-copy-rail { gap }. No margins on paragraphs. - Process text side uses the same title margin for its title gap. HOW TO ADD A NEW PAGE - Link this file in the page . - Use the approved markup pattern from public-page-101-system.mdc. - Do NOT add per-page media-query overrides for .section-title margins, .section-copy-intro / .section-copy-follow margins, .journey-intro-new / .journey-walkthrough-desc margins, or flex gap on #topic-101 / .process-text-side unless an exception is explicitly approved. ============================================================================= */ :root { /* Desktop + larger tablets (>= 769px). */ --section-title-gap: 32px; --section-copy-paragraph-gap: 20px; } /* Tablet range where 101 and Process sit on a narrower shell. */ @media (min-width: 641px) and (max-width: 768px) { :root { --section-title-gap: 28px; } } /* Phone. */ @media (max-width: 640px) { :root { --section-title-gap: 24px; } } /* ----------------------------------------------------------------------------- PROCESS + FAQ RAIL LOCK One shared rail system for the finished Health pages: - Process uses a fixed text measure plus a fixed right-side card lane. - FAQ uses the same right-side card lane. - FAQ list width is still hydrated at runtime per page, but it now keys off the Process text column width instead of whatever the copy happens to do. This keeps layout structural rather than copy-dependent. ----------------------------------------------------------------------------- */ body.page-product { --section-side-card-width: clamp(280px, 24vw, 320px); --section-side-rail-gap: clamp(40px, 4vw, 56px); --process-text-rail-width: clamp(540px, 52vw, 620px); } /* Laptop / split-screen: keep Process + FAQ CTAs calm next to a fixed Resources rail (premium sites avoid a “pinched” side column — ABC MOTTO: clarity, not friction). */ @media (min-width: 961px) and (max-width: 1320px) { body.page-product { --section-side-rail-gap: clamp(22px, 2.8vw, 44px); --section-side-card-width: clamp(212px, 19vw, 252px); --process-text-rail-width: min(100%, clamp(480px, 48vw, 600px)); } } /* Tablet portrait + narrow desktop/split-screen landscape (744–960): same rail tokens. */ @media (min-width: 744px) and (max-width: 1024px) and (orientation: portrait), (min-width: 744px) and (max-width: 960px) and (orientation: landscape) { body.page-product { --section-side-card-width: 228px; --section-side-rail-gap: 30px; --process-text-rail-width: min(100%, 48ch); } } /* ----------------------------------------------------------------------------- TITLE -> FIRST PARAGRAPH SPACING Single rule owns the gap via the CSS variable. Specificity intentionally raised (using :where is NOT used; instead we scope by section id on the 101 side and by a compound path on the Process side) so legacy per-page rules such as `.path-subsection .section-title` cannot override the shared lock. ----------------------------------------------------------------------------- */ #topic-101 > .section-title, .path-subsection .process-text-side > .section-title { margin: 0 0 var(--section-title-gap); } /* ----------------------------------------------------------------------------- PARAGRAPH -> PARAGRAPH SPACING (101 rail) Single rule owns inter-paragraph rhythm. Paragraphs themselves carry no margin. ----------------------------------------------------------------------------- */ #topic-101 .section-copy-rail { display: flex; flex-direction: column; gap: var(--section-copy-paragraph-gap); } #topic-101 .section-copy-intro, #topic-101 .section-copy-follow { margin: 0; } /* ----------------------------------------------------------------------------- PROCESS TEXT SIDE — paragraph reset Process uses its own paragraph rhythm elsewhere; ensure no legacy top/bottom margins stack with the title gap variable. ----------------------------------------------------------------------------- */ .process-text-side > .journey-intro-new, .process-text-side > .journey-walkthrough-desc { margin: 0; } .process-text-side > .journey-walkthrough-desc { margin-top: var(--section-copy-paragraph-gap); } /* Match #topic-101 body copy color (Process had been inheriting --text-body below 769px). */ .process-text-side > .journey-intro-new, .process-text-side > .journey-walkthrough-desc { color: rgba(212, 218, 230, 0.92); } .process-text-side > .journey-walkthrough-desc strong { color: inherit; font-weight: inherit; } /* ----------------------------------------------------------------------------- SECTION ROOT RESET Remove any legacy flex gap that previously tried to control title spacing. Layout stays block for 101; Process text-side keeps flex for its own stacking (its title gap still comes from --section-title-gap, not from flex gap). ----------------------------------------------------------------------------- */ #topic-101 { display: block; } .process-text-side { display: flex; flex-direction: column; gap: 0; } .process-desktop-copy { display: none; } .process-desktop-line { display: block; } /* ----------------------------------------------------------------------------- SHARED DESKTOP / TABLET RAIL These selectors intentionally beat the legacy per-page `.process-split-layout` and `.faq-split-layout` rules that still live in each page's inline style. Include narrow landscape (split-screen desktop): without this, widths 744–960px landscape skip the rail and fall back to inline 50/50 grids + mixed align-items, which throws the Process + FAQ CTAs out of alignment. ----------------------------------------------------------------------------- */ @media (min-width: 961px), (min-width: 744px) and (max-width: 1024px) and (orientation: portrait), (min-width: 744px) and (max-width: 960px) and (orientation: landscape) { body.page-product .path-subsection.flow-subsection .process-split-layout, body.page-product .path-subsection[id$="-facts"] .faq-split-layout { grid-template-columns: minmax(0, min(100%, var(--process-text-rail-width))) minmax(0, 1fr); gap: var(--section-side-rail-gap); justify-content: start; } /* Process: top-align the text column so the last line sits where copy ends; center only the walkthrough card (align-self on .process-launch-side). If the whole grid used align-items: center, .process-text-side would vertically center in the row when the card is taller—adding false space below the last line before the carrier border line. Spacing to “Plans from leading carriers” is measured to that border. */ body.page-product .path-subsection.flow-subsection .process-split-layout { align-items: start; } body.page-product .path-subsection[id$="-facts"] .faq-split-layout { align-items: start; } body.page-product .path-subsection.flow-subsection .process-text-side { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; } body.page-product .path-subsection.flow-subsection .process-launch-side { width: min(100%, var(--section-side-card-width)); max-width: var(--section-side-card-width); min-width: 0; justify-self: center; align-self: center; padding-top: 0; /* Per-page CSS nudges Process only (margin + translate) for “tall / 4:3-ish” viewports — split IDE + browser matches that media, but FAQ CTA does not, so the walkthrough card drifted up/right vs “We Can Help”. Shared rail wins. */ margin-inline: 0; transform: none; } body.page-product .path-subsection[id$="-facts"] .faq-chat-cta { width: min(100%, var(--section-side-card-width)); max-width: var(--section-side-card-width); min-width: 0; justify-self: center; /* Match Process walkthrough card: centered in the split row (topic list | CTA). */ align-self: center; } body.page-product .path-subsection[id$="-facts"] .faq-split-layout .topic-list { box-sizing: border-box; min-width: 0; justify-self: stretch; width: 100%; max-width: 100%; } } /* FAQ: question row + opened answer copy — compact on tablet/phone (fits rail; matches prior step-down). */ @media (max-width: 1024px) { body.page-product .path-subsection[id$="-facts"] .topic-item summary h3 { flex: 1; min-width: 0; font-size: 10px; letter-spacing: 0.05px; line-height: 1.28; } body.page-product .path-subsection[id$="-facts"] .topic-body { font-size: 12px; line-height: 1.5; } } /* Extra air before carrier strip on narrow layouts (matches 101→next break rhythm). */ @media (max-width: 960px) { body.page-product .path-subsection.flow-subsection .process-split-layout { padding-bottom: 20px; } } @media (min-width: 1001px) and (pointer: fine) { .process-mobile-copy { display: none; } .process-desktop-copy { display: block; } /* Paragraph-level `text-wrap: balance` on product pages inherits here and reflows manual line segments into uneven “short tail” lines. */ body.page-product .process-desktop-copy .process-desktop-line { text-wrap: wrap; } } /* ----------------------------------------------------------------------------- MOBILE PHONE — spacing for the two side-card CTAs only (not FAQ row-to-row): - Process copy → Guided Walkthrough - FAQ accordion stack → Still Have Questions / We Can Help Does not set .topic-list gap (spacing between each FAQ question stays on the per-page rules). One band size (--product-mobile-cta-band) matches both CTAs: - Walkthrough: gap above button = band; band below button = padding-bottom on this grid + 18px margin on .carrier-trust-divider (Health pages). Tuned so gap == padding + 18 (e.g. 26 = 8 + 18). - We Can Help: gap above card = band; below the card use padding on the facts subsection plus margin on the video (page CSS also draws a ::before hairline at top: -24px on the video card — that line must not sit on the CTA). ----------------------------------------------------------------------------- */ @media (max-width: 640px) { body.page-product { --product-mobile-cta-band: 26px; } body.page-product .path-subsection.flow-subsection .process-split-layout { gap: var(--product-mobile-cta-band); padding-bottom: calc(var(--product-mobile-cta-band) - 18px); } body.page-product .path-subsection[id$="-facts"] .faq-split-layout { gap: var(--product-mobile-cta-band); } /* Below We Can Help → hairline: same general feel as walkthrough; tuned a touch tighter than the first midpoint (8px / 28px / -13px hairline). */ body.page-product .path-subsection[id$="-facts"] { padding-bottom: 8px; } body.page-product .path-subsection[id$="-facts"] + .path-subsection.product-video-section { margin-top: 28px !important; } body.page-product .path-subsection[id$="-facts"] + .path-subsection.product-video-section::before { top: -13px !important; } body.page-product .path-subsection.flow-subsection .process-launch-side, body.page-product .path-subsection[id$="-facts"] .faq-chat-cta { margin-top: 0; } } /* ----------------------------------------------------------------------------- JOURNEY CTA PRIMARY LINES — “See How It Works” + “We Can Help” Exactly 3pt smaller than the per-breakpoint .journey-entry-title sizes set in each Health product page (inline CSS). Scoped to these two cards only. ----------------------------------------------------------------------------- */ @media (min-width: 961px) { body.page-product .path-subsection.flow-subsection .process-launch-side .journey-entry-title, body.page-product .path-subsection[id$="-facts"] .faq-chat-cta .faq-chat-trigger-card .journey-entry-title { font-size: calc(17px - 3pt); } } @media (min-width: 769px) and (max-width: 960px) and (orientation: landscape) { body.page-product .path-subsection.flow-subsection .process-launch-side .journey-entry-title { font-size: calc(15px - 3pt); } body.page-product .path-subsection[id$="-facts"] .faq-chat-cta .faq-chat-trigger-card .journey-entry-title { font-size: calc(16px - 3pt); } } @media (max-width: 768px) { body.page-product .path-subsection.flow-subsection .process-launch-side .journey-entry-title { font-size: calc(13.5px - 3pt); } body.page-product .path-subsection[id$="-facts"] .faq-chat-cta .faq-chat-trigger-card .journey-entry-title { font-size: calc(16px - 3pt); } } @media (min-width: 744px) and (max-width: 1024px) and (orientation: portrait) { body.page-product .path-subsection.flow-subsection .process-launch-side .journey-entry-title, body.page-product .path-subsection[id$="-facts"] .faq-chat-cta .faq-chat-trigger-card .journey-entry-title { font-size: calc(17px - 3pt); } } /* ----------------------------------------------------------------------------- NARROW MAIN PANEL — stack Process + FAQ CTAs (CSS container queries, 2023+) Viewport breakpoints miss “IDE + browser” split: the readable column is the glass panel width, not the monitor. When that column is too tight for text | CTA | (Resources rail outside), premium sites stack the secondary CTA under the primary copy instead of pinching or overlapping — clarity over cramming. ----------------------------------------------------------------------------- */ body.page-product .product-main .section-panel.panel-unified { container-type: inline-size; container-name: product-panel; } /* Panel ≤800px: stack CTAs (split IDE / narrow window). Must stay BELOW typical laptop main columns (~950–1050px after Resources rail) or full-width regresses to a stacked CTA and kills the original side-by-side Process rail. */ @container product-panel (max-width: 800px) { body.page-product .path-subsection.flow-subsection .process-split-layout, body.page-product .path-subsection[id$="-facts"] .faq-split-layout { grid-template-columns: minmax(0, 1fr) !important; gap: clamp(18px, 4.5cqi, 28px) !important; align-items: stretch; } body.page-product .path-subsection[id$="-facts"] .faq-split-layout .topic-list { max-width: 100%; } body.page-product .path-subsection.flow-subsection .process-launch-side, body.page-product .path-subsection[id$="-facts"] .faq-chat-cta { width: min(100%, min(380px, 92cqi)) !important; max-width: min(400px, 100%) !important; justify-self: center !important; align-self: center !important; margin-inline: auto; } } /* ----------------------------------------------------------------------------- VIDEO + TESTIMONIALS — MOBILE-ONLY SHORT HEADLINES (finished Health set) Desktop / tablet: .video-title-desktop and .testimonials-title-desktop. max-width 768px matches per-page mobile bands (same breakpoint as video copy). ----------------------------------------------------------------------------- */ body.page-product .product-video-section .video-title-mobile, body.page-product .product-testimonials .testimonials-title-mobile { display: none; } @media (max-width: 768px) { body.page-product .product-video-section .video-title-desktop, body.page-product .product-testimonials .testimonials-title-desktop { display: none; } body.page-product .product-video-section .video-title-mobile, body.page-product .product-testimonials .testimonials-title-mobile { display: block; } body.page-product .product-video-section .video-summary, body.page-product .product-video-section .video-copy-mobile { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; } body.page-product .product-video-section .video-copy-mobile { display: block; } } /* ----------------------------------------------------------------------------- FINAL CTA — COMPACT SHORT HEADLINE Optional: wrap copy in .final-cta-title-desktop / .final-cta-title-mobile inside .path-subsection-final .section-title. Compact title now covers phone + tablet. Lock: compact headline should stay as a single short line on phone/tablet; keep longer page-specific phrasing on desktop only. ----------------------------------------------------------------------------- */ body.page-product .path-subsection-final .section-title .final-cta-title-mobile { display: none; } body.page-product .path-subsection-final .final-copy-desktop { display: none; } body.page-product .path-subsection-final .final-copy-compact { display: inline; } body.page-product .path-subsection-final .final-legal-block { display: grid; justify-items: center; gap: 2px; width: min(100%, 48ch) !important; margin: 0 auto; padding-top: 10px !important; padding-bottom: 2px !important; text-align: center; } body.page-product .path-subsection-final .final-legal-lead, body.page-product .path-subsection-final .final-license-line, body.page-product .path-subsection-final .final-legal-copy { width: 100%; margin: 0; text-wrap: balance; } /* Compact legal copy is a shared visual lock, not freeform page copy. Keep the compact variant within the finished Health shell rhythm: one lead row, one license row, and a short legal row stack. */ body.page-product .path-subsection-final .final-legal-lead { max-width: 46ch; font-size: 10.4px !important; line-height: 1.34 !important; } body.page-product .path-subsection-final .final-license-line { max-width: 45ch; font-size: 9.9px !important; line-height: 1.34 !important; } body.page-product .path-subsection-final .final-legal-copy { width: min(100%, 38ch) !important; max-width: 38ch; font-size: 10px !important; line-height: 1.34 !important; } body.page-product .path-subsection-final .final-legal-links { margin-top: 8px; } body[data-phone-nav-class="marketplace-phone-nav-open"].page-product .path-subsection-final .final-legal-lead { max-width: 48ch !important; } body[data-phone-nav-class="marketplace-phone-nav-open"].page-product .path-subsection-final .final-legal-lead .final-copy-compact { white-space: nowrap; } @media (max-width: 1024px) { body.page-product .path-subsection-final .section-title .final-cta-title-desktop { display: none; } body.page-product .path-subsection-final .section-title .final-cta-title-mobile { display: block; } }