/* Responsive layer. The pages were designed at one fixed width and shipped with a locked viewport, so none of this existed before. Three bands: >= 1600 content caps at 1280px and centres (every *-inner wrapper, plus home's two rows that carry the same role under a different name); full-bleed grounds keep bleeding. Drawn proportions are preserved rather than stretched. 768-1599 the native design, squeezing fluidly. NO RULES ARE AUTHORED FOR THIS BAND — the desktop rendering must stay byte-identical to what it was. <= 767 full stack, condensed nav, reduced gutters. ⚠ THERE IS NO TABLET TREATMENT, and that is a decision, not an omission. 768-1199 used to be its own band — rigid widths released, wide rows stacked, compositions scaled — which left it neither the desktop composition nor the phone one: the restructuring of mobile without any of the mobile fixes that make the restructuring work. Operator's call: the native design reaches down to 768 and the switch to the phone layout happens in one step at 767. If something needs to give at tablet width, it gives in the <=767 band by raising that boundary — not by reviving a third layout to maintain. Rows carry data-stack="wide"|"mid", written at build time from measured geometry (see stack_tags in tools/rebuild/build.py). Rows where an icon sits beside a label are deliberately not tagged and stay horizontal at every width. */ /* ── XL: cap and centre ─────────────────────────────────────────────────────── */ /* "Content caps at its native width" was the stated intent from the start (see the header above) but nothing ever gave it a number — margin-inline:auto only centres an element WITHIN space a max-width has already freed up; with no max-width, these boxes just kept resolving to their native width:80% forever; at 2560px that is a 2048px content column. Measured, not guessed: every content wrapper on every page is *-inner at width:80%, with zero exceptions (checked against home/origin/growth) — [class*="-inner"] is exactly that set, never a full-bleed ground layer, so it is safe to cap broadly rather than enumerate. 1280px, not an arbitrary round number: it is what width:80% already resolves to at exactly 1600px — the one value that makes "caps at its native width" literally true (the content simply stops growing where it already was) rather than an arbitrary number that would visibly jump the layout at the 1600px seam. [class*="-inner"] covers every content wrapper EXCEPT two on home: Framer named the hub-diagram and showcase rows' wrappers .offer-row-2/.offer-row-19 instead of *-inner, even though they're the same width:80% content-column role (confirmed live: at 2000px both resolved to 1600px, uncapped, while every *-inner sibling held at 1280px). Origin's and growth's equivalent columns (.product-col-8/11, .hubspot-col-6/.scope-col-7) are already nested inside a capped *-inner ancestor, so only home needs the extra selector. .hero > .hero-col is a THIRD pattern, on origin and growth only: their hero has no *-inner at all — the full-bleed .hero is centred by an absolutely-positioned .hero-col (left:50%, translate(-50%,-50%)) carrying its own 128px/64px padding as the gutter, and that box is width:100% with no cap, so it grew with the viewport while every other section's content stopped at 1280. Capping the box itself at 1280px is the direct child (.hero > .hero-col), not [class*="-inner"], because home ALSO has a class literally named .hero-col — for an unrelated flex item three levels deep in its own hero-content composition — and it is not a direct child of .hero there, so the child combinator reaches origin/growth's hero and leaves home's differently-shaped .hero-col alone. margin-inline:auto is a no-op on an absolutely-positioned box (the transform already centres it) but is left in for the same reason every other rule in this block carries it: legible intent if the positioning ever changes. ⚠ 1664px ON THIS ONE, NOT 1280 — capping the OUTER box at the same 1280 every other section uses was tried first and still read as misaligned, because .hero-col's box is 1280 but its READABLE CONTENT sits a further 192px in (its own 128px padding plus .hero-col-2's nested 64px) — measured at 2000px: the headline started at x552 while every other section's content started at x360, a 192px gap nothing else on the page has. 1280 + 2×192 = 1664 is the box width that, once its 192px padding is subtracted back out, leaves exactly 1280 of content centred at the SAME x360 every other section's content starts at — solved for algebraically, not measured, so it holds at any viewport width above the cap, not just 2000. */ @media (min-width: 1600px) { .page [class*="-inner"], .page .offer-row-2, .page .offer-row-19 { max-width: 1280px; margin-inline: auto; } .page .hero > .hero-col { max-width: 1664px; margin-inline: auto; } } /* ── Phone: release the fixed widths ────────────────────────────────────────── */ @media (max-width: 767px) { /* Framer sized almost every box in pixels at one viewport width. Below the design width those pixel widths are what pushes content past the edge, so cap them. ⚠ EXEMPTS animated logo rails EXCEPT the one inside .hero-box-2 — this blanket cap is exactly what was crushing the marquee (industry ticker, the mobile logo strip): the component's own CSS sets .bac-logo-run{width:max-content} specifically so the track is as wide as its content and the -50% translateX loop has real distance to run, but max-width:100% here overrode that back down to the viewport width, so flex-wrap:nowrap children (already forced nowrap in animated mode) had nowhere to go but overlap. .hero-box-2's OWN rail also carries data-anim="true" (it's the same component) but is deliberately NOT exempted: it has its own, older mobile treatment three rules down (.hero-box-2 .bac-logo-fit{width:auto;max-width:46%}) that depends on this very cap to bound the cells — remove the cap there and the two rules fight, each cell's max-width:46% resolving against an increasingly uncapped ancestor, and the rail's real width explodes (measured: 9879px at 375px viewport, versus the ~1970px it should be). That bogus width then poisoned everything else, because measureLogoRailSpeed() (bac-overlay.js) reads the FIRST [data-anim="true"] rail on the page as its speed reference — which is always this one — so the ticker's derived duration came out absurdly short (4.8s instead of ~106s): "the services carousel in hero is going too fast" was this, not a per-page speed mismatch. */ .page *:not(.fig-fit:not(:has(.bac-showcase-frame)) *):not(.bac-logo-rail[data-anim="true"]:not(.hero-box-2 *) *) { max-width: 100% } /* No blanket min-width:0 here. It was tried, to let flex children shrink below min-content, and it let nested text columns collapse instead — measured on Origin at 390px: a headline column went 267 -> 139 -> 5px, rendering one character per line. Flex's default min-width:auto is what stops that, so it stays. Where a specific container genuinely needs to shrink further, it is named below. */ /* Wide rows lose their side-by-side arrangement first. */ [data-stack="wide"]:not(.fig-fit:not(:has(.bac-showcase-frame)) *) { flex-direction: column !important; align-items: stretch !important; height: auto !important; } [data-stack="wide"] > *:not(.fig-fit:not(:has(.bac-showcase-frame)) *):not(.p) { width: 100% !important; max-width: 100% !important; height: auto !important; /* a stacked column sized for its old share of a row has no reason to keep that height */ flex: 0 0 auto !important; } /* Clipping ancestors hide, rather than reflow, anything still too wide. */ .page [style*="overflow"] { overflow-x: visible } /* The hero band is a full-viewport-height row with its content vertically centred. Once the row stacks, that height is just a gap above the content — measured at 390px: a 900px band holding 216px of content. Released to fit, with the dark ground given a height of its own since it no longer inherits the band's. */ .hero, .hero-inner { height: auto !important; min-height: 0 !important; } /* Origin and Growth Systems build the hero from three absolutely-positioned layers — the ground, the logo rail and the content column — with the section's own 100vh height holding them open. Releasing that height left nothing in flow and the section collapsed to 0, taking the ground (and the glyph wall painted on it) with it. The content column goes back into flow so the section sizes to it; the ground layers stay absolute behind it and inherit that height. */ .hero > [class*="-col"] { position: relative !important; width: 100% !important; max-width: 100% !important; height: auto !important; /* it was sized for its share of a 100vh band */ /* Framer centred this column with position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) — a self-referential centering trick that only makes sense while the column IS absolutely positioned. Switched to position:relative above (correct, it needs to be in flow for the section to size to it) but left the offsets in place, so a relative element inherited a 50%-of-itself top/left nudge with nothing to cancel it — measured on Origin: the column landed 198px above its own box, the eyebrow and half the headline scrolled off the top of the page before the nav even ends. Reset with it. */ top: auto !important; left: auto !important; transform: none !important; } .hero { min-height: 420px } .hero-inner { padding-top: 48px; padding-bottom: 48px } /* The dark ground and the logo rail are absolutely-positioned layers behind the headline, so they take their height from the row, not the other way round. Giving the ground its own min-height made it 340px inside a 216px row, which overflowed and was clipped — the headline appeared to sit outside the panel. The height belongs on the row that parents the layers. */ .hero-row { min-height: 360px } } /* ── Mobile ─────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { [data-stack="mid"]:not(.fig-fit:not(:has(.bac-showcase-frame)) *) { flex-direction: column !important; align-items: stretch !important; height: auto !important; } [data-stack="mid"] > *:not(.fig-fit:not(:has(.bac-showcase-frame)) *):not(.p) { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; } /* ── Origin hero CTA: the button was force-stretched to the stacked column's full width ───────────────────────────────────────────── .hero-row-4 (the "Join the Design Partner Program" button, a .p component: a small invisible left tile, the visible text pill, a 40px "+" tile) is a direct child of .hero-row-3, which carries data-stack="mid". The rule above forced it to width:100% like any other stacked column — wrong for a button, whose .p-label sizes to its own text (270px, unchanged from desktop) regardless of the outer box. Stretching only the OUTER box left 25px of dead space inserted between the pill and the "+" (8px natural gap at desktop -> 33px here) and read as one giant button bleeding to the edge of the card, rather than a normal button sitting beside its toggle. :not(.p) above stops the stretch at the source. This rule restores the DESKTOP-equivalent layout on top of that — content-width, packed tight (318px total: 270 label + 8 gap + 40 tile, measured off the desktop rendering) — because .hero-row-3 also switched to flex-direction:column for the stack, and a column's default align-items:stretch would otherwise still pull an un-stretched .p child to fill the cross axis width on its own. */ .hero-row-3[data-stack="mid"] > .p { align-self: flex-start !important; } /* Side gutters. The design's own inset is a fixed pixel value that leaves almost nothing for content at phone width. */ .page [class*="-inner"] { padding-left: 16px !important; padding-right: 16px !important; } /* Touch targets. 44px is the minimum comfortable target; the design has interactive elements well under that, which is survivable with a mouse and not with a thumb. */ a, button, [role="link"], [role="button"] { min-height: 44px } /* Nothing may exceed the viewport. */ html, body { overflow-x: hidden } } /* ── Composed figures ───────────────────────────────────────────────────────── */ /* Some boxes are compositions: a centre card ringed by labelled dots, a flow of plates between two columns. Their absolutely-positioned children ARE the content, so squeezing the box does not reflow it — it tears. Measured on the orbit figure at 390px: the box went from 1011px wide to 171px while keeping its 350px height, and the labels scattered out of their arrangement onto the card. These scale as one locked unit instead. The wrapper is a container, so the figure can read its width in cqi and scale itself to fit; the wrapper takes its height from aspect-ratio, which keeps that out of the circular dependency. Internal geometry is preserved by construction rather than by luck. Note the limit: scaling holds the composition but shrinks the labels with it. Below roughly 560px the 12px labels fall under a comfortable reading size — see the open item in the spec. */ /* Above the band the wrapper must not exist as far as layout is concerned, or it changes the desktop rendering it was added to protect — measured: 13 boxes moved before this rule. display:contents removes the box while keeping the element. */ .fig-fit { display: contents } @media (max-width: 767px) { .fig-fit { display: block; container-type: inline-size; width: 100%; overflow: hidden; aspect-ratio: var(--fw) / var(--fh); } .fig-fit > * { width: calc(var(--fw) * 1px) !important; min-width: calc(var(--fw) * 1px) !important; max-width: none !important; height: calc(var(--fh) * 1px) !important; transform-origin: top left; transform: scale(calc(100cqi / (var(--fw) * 1px))); } } /* ── Origin showcase: scale-lock above phone too ───────────────────────────── */ /* The showcase pair is exempt from the phone quarantine above (see THE QUARANTINE below) because it gets its own one-panel mobile treatment — but that exemption only ever addressed <=767. Above it, .fig-fit reverts to display:contents (no scaling at all) and the composition's real sizing takes over: the frame (.offer-col-59/-60) is a FIXED 515x660px box positioned inside a FLUID flex:1 0 0 column (.offer-box-11/-16). The two only ever line up at exactly the row's native 1011px width. Narrower, the column shrinks below 515 and the column's overflow:hidden eats into the frame; wider — which is what the >=1600 cap still allows, 628px of column against a 515px frame — the frame sits unchanged and the extra column width shows as bare blue ground around it. Measured: at a 1024px viewport the row rendered at 691px, already off the 1011px native width it needs. Fixed the same way the phone band fixes every other fixed-px composition: lock it to one scaling unit via container query, instead of letting box and frame drift apart at every width in between. :has(.bac-showcase-frame) is the same structural tag the quarantine uses to find this one figure — it is the only fig-fit carrying that class. */ @media (min-width: 768px) { .page .fig-fit:has(.bac-showcase-frame) { display: block; container-type: inline-size; width: 100%; overflow: hidden; aspect-ratio: var(--fw) / var(--fh); } .page .fig-fit:has(.bac-showcase-frame) > * { width: calc(var(--fw) * 1px) !important; min-width: calc(var(--fw) * 1px) !important; max-width: none !important; height: calc(var(--fh) * 1px) !important; transform-origin: top left; transform: scale(calc(100cqi / (var(--fw) * 1px))); } } /* ── THE QUARANTINE · the :not(...) every pattern rule in this file carries ──── */ /* READ THIS BEFORE ADDING A RULE THAT MATCHES BY PATTERN. A .fig-fit subtree is a composition that must reach the phone as the desktop drew it, only smaller — the wrapper scales it as one locked unit. But the responsive layer matches on the export's own hashed class names, and a composition is built from the SAME names as the rest of the page: its inner rows are "-row", its columns are "-col", it carries [data-stack] and [data-border] like anything else. There is no way to tell "a row that should stack on a phone" from "a row inside a picture" except by where it sits. Measured on the HubSpot integrations diagram at 375px, before this: all 107 nodes in the subtree differed from their desktop values. EIGHT rules were reaching in — .page * (max-width), the -row wildcards (flex-wrap, justify-content, align-content), the -col wildcard (align-items), .page .text (the centred captions), [data-border] (which is what removed the rounded frames around each group), the [data-stack] pair, and one entry in the enumerated padding list. The pills stacked vertically, the frames vanished, the labels went left, and the whole thing overflowed the aspect-ratio box and was clipped. With the guard: 107 differing nodes -> 2, both of them the wrapper doing its job. ⚠ NOT `revert`. That was tried and shipped briefly, and it is the wrong tool: revert rolls back the whole AUTHOR ORIGIN, so it discards the page's own desktop CSS along with this file's. Measured: `align-items: revert` on the diagram's centre row gave `normal`, not growth.css's `center`, and `height: revert` gave 193px instead of 350px. It only looked right for flex-direction because `row` happens to be both the UA default and the native value. Not matching in the first place is what leaves the page's own CSS intact, which is the actual requirement. COST: the guard adds one class of specificity to each rule it is on. That is why some rules elsewhere in this file needed a .page prefix to keep winning — if a rule stops applying after you add the guard, check specificity first. ⚠ ONE FIGURE IS EXEMPT, which is what the :not(:has(.bac-showcase-frame)) inside the guard is for. build.py's FIGURES list tags a composition from measured geometry, and it tagged home's Origin/Our Product showcase row (offer-row-23) — but that section is the one place we deliberately built a RESPONSIVE mobile treatment instead: one panel not two, 4px outer padding, a 48px inset before the image, 24px above it. Two mechanisms, opposite intents, same element. Quarantining it reverted the section to "desktop, scaled" and dropped the approved treatment; opting it out of the WRAPPER instead was worse, because the subtree is still inside .fig-fit structurally, so it got neither treatment and collapsed to zero height, overlapping the band below. Exempting it from the guard leaves it exactly as it behaved before the quarantine existed. If that section ever stops needing a bespoke mobile design, drop it from FIGURES in build.py and delete this exemption. */ /* ── Overlay-built components ───────────────────────────────────────────────── */ /* The hero scrub is not overridden here — it is not wired below 1200 at all (HERO_SCRUB_MIN_WIDTH in bac-overlay.js). Overriding it in CSS was tried and collapsed the band to zero height: its geometry comes from a pinned 100vh section plus an absolutely-positioned copy column, and removing either leaves nothing holding the height open. Unwired, the page's own two-column hero row remains and stacks like any other row. The card row is built in JS and so is not in the row inventory either. */ @media (max-width: 767px) { .bac-cards-row { flex-direction: column !important; height: auto !important } .bac-card-new { width: 100% !important; max-width: 100% !important; height: auto !important } } /* ── Nav ────────────────────────────────────────────────────────────────────── */ /* Condensed in place rather than collapsed behind a menu: the CTA stays visible and there is no new interactive component to build, style and make keyboard-reachable. It needs the room. Measured at 390px: logo 147 + links 251 + CTA 168 = 566px of content in 373px of viewport, so the links clipped and the CTA sat entirely off-screen. Everything below is scale, not restructuring. */ @media (max-width: 767px) { /* The inner column keeps the desktop content inset — 37px each side, 74px of a 373px bar spent on gutter before anything is laid out. And each link carries a fixed 140px hit area, so two links alone need 280px. Both are released. */ .nav-inner { width: 100% !important; max-width: 100% !important; padding-left: 10px !important; padding-right: 10px !important; } .nav-row-3 { width: auto !important; flex: 1 1 auto !important; justify-content: flex-end !important; gap: 6px !important; padding-right: 0 !important; } .nav-row-4 { width: auto !important; gap: 2px !important } .nav-row-5, .nav-row-6 { width: auto !important; min-width: 0 !important; padding: 6px 5px !important; } .nav-row-7 { flex: 0 0 auto !important } .nav .text { font-size: 12px !important } /* 12px is the floor; see the tiny-text note in the spec */ .nav-svg, .bac-nav-logo { width: 78px !important } .nav-row-7 .p-label { padding: 7px 9px !important; font-size: 12px !important; } .nav-row-7 .p-tile { width: 26px !important; min-width: 26px !important } } /* Below ~480px the four items genuinely do not fit at 12px: measured at 390px, the bar needs 405px of content in 341px of available width. Rather than let the CTA run off the edge, the labels drop to 11px and the logo's own inset goes. This is the one place the 12px floor is broken, and it is nav chrome rather than reading copy. */ @media (max-width: 479px) { .nav .text { font-size: 11px !important } .nav-row-2 { padding: 6px !important } .nav-row-5, .nav-row-6 { padding: 6px 2px !important } .nav-svg, .bac-nav-logo { width: 66px !important } .nav-row-7 .p-label { padding: 7px 8px !important; font-size: 11px !important } /* The CTA is a split button: "Book the Hour" plus an absolutely-positioned "+" tile. Below 480 the tile is the one element that will not fit — measured at 390px it sits at 380-406 against a 373px inner edge. The primary action stays visible, which is the part that matters; the secondary tile is dropped rather than letting the button run off the screen. */ .nav-row-7 .p-tile { display: none !important } } /* ── Columns that would otherwise collapse ──────────────────────────────────── */ /* Tagged at build time (see stack_tags): flex-column containers whose align-items is not stretch, which lets a text child size to its own content once the column gets narrow. Harmless at the width they were drawn for; at 390px it took an Origin headline from 267px to 5px wide, one character per line. Stretching them restores the full column width without touching the desktop band. */ @media (max-width: 767px) { [data-fill] { align-items: stretch !important } /* align-items alone does not reach a child that carries a definite width — measured: a stretch parent at 267px still held a 139px child. The child has to be told. */ [data-fill] > * { width: 100% !important; max-width: 100% !important; } } /* ── Padding scale ──────────────────────────────────────────────────────────── */ /* Tagged at build time: elements carrying 80px or more of horizontal padding. That is generous in a 1011px content column and fatal once nested in a narrow one — measured on Origin at 390px, two stacked levels of 64px padding left 11px of a 267px column for a headline, which then rendered one character per line. Scaled rather than removed, so the inset still reads as an inset. */ @media (max-width: 767px) { [data-pad] { padding-left: 16px !important; padding-right: 16px !important; } /* A tagged element nested inside another loses its inset entirely: two 16px insets inside a 358px column is 64px of gutter for one line of text. */ [data-pad] [data-pad] { padding-left: 0 !important; padding-right: 0 !important; } } /* ── Real anchors ───────────────────────────────────────────────────────────── */ /* The wired pseudo-links are real elements now (see linkify in build.py). An anchor carries user-agent colour and underline, which would change the rendering these pages are gated against, so both are neutralised. Hover and the underline sweep stay where they were, in bac-overlay.css. */ .page a { color: inherit; text-decoration: none; } /* ── Headings ───────────────────────────────────────────────────────────────── */ /* Each page now has an

(see promote_h1 in build.py). Framer emitted every piece of text as a

, so all three pages shipped without a single heading element — invisible on screen, material to assistive tech and crawlers. No CSS is needed for it. The page stylesheet already writes every text rule as `p.text, div.text, h1.text, h2.text, ...` and already resets heading margins, so an

is styled identically to the

it replaced. A reset was added here first and was the only thing that broke it: font-size:inherit overrode the rule that actually sizes these, and the Origin hero lost 96px of height. Verified: with no rule at all, 0 box and 0 property differences. */ /* ── Appear ─────────────────────────────────────────────────────────────────── */ /* Framer's "optimized appear" wrote an element's initial state into an inline style — opacity:0 — and animated it up from its runtime. With the runtime gone those elements never became visible; on Origin and Growth Systems that was the whole hero section, which is why those pages rendered as an empty band under the nav. The build strips the inline opacity and tags the element; the fade runs here, on the same curve as the page's one declared appear animation. */ [data-appear] { animation: appear-fade .4s cubic-bezier(.22, 1, .36, 1) .2s both; } @media (prefers-reduced-motion: reduce) { [data-appear] { animation: none; opacity: 1 } } /* ⚠ WHY [class*="-inner"] AND NOT [class$="-inner"]. The $= form matches only when the class ATTRIBUTE ENDS with "-inner", so one extra class silently drops the element out of the rule. Measured at 390: .problem-inner carries a second class appended at runtime by the overlay (bac-growth-band), so it never matched and stayed at its 80% width — 312px of a 390px viewport, indented 39px — while the other five inner columns went full width. The band looked deliberately inset rather than broken, which is why reading the rules never found it. */ /* ── Mobile: the full-bleed treatment ───────────────────────────────────────── */ /* Matches the approved design canvas (BAC — mobile viewports): full width, left aligned, 16px gutters, vertical stacking, and horizontal rules only. The export's page structure is a full-bleed section wrapping an inner column at width:80% carrying a 1px border on its left AND right. Those two borders are the vertical rules running down the page, and that 80% is why copy never reaches the edge — measured at 1600 the inner column is 1280, so 160px each side is spent on nothing. At 390 the same 80% leaves ~39px dead each side BEFORE the 16px gutter, which is 78px of a 390px screen given to margin. That is the whole of what made mobile read as a squeezed desktop rather than a phone layout. */ @media (max-width: 767px) { /* 1 — FULL WIDTH. The nav is excluded by name: it is condensed separately above, at a tighter 10px inset, and a blanket rule here would override it (this selector is more specific than .nav-inner, so it would win even though both are !important). */ .page [class*="-inner"]:not(.nav-inner) { width: 100% !important; max-width: 100% !important; } /* 2 — NO VERTICAL RULES. Borders on this export are painted by an ::after that reads these two custom properties, so zeroing them removes every left/right rule on the page in one declaration — 33 elements on home — without touching the top/bottom borders that separate the bands, which the canvas keeps. */ .page [data-border="true"]:not(.nav-row-2):not(.fig-fit:not(:has(.bac-showcase-frame)) *) { --border-left-width: 0px !important; --border-right-width: 0px !important; } /* 3 — LEFT ALIGNED. The page's own text rule is `text-align: var(--text-alignment, start)`, so redefining the variable moves every centred string without a blanket text-align override: 14 inline centre declarations on home, 10 on Origin, 8 on Growth Systems. ⚠ THE CONTAINERS TAKE align-items, NOT justify-content, AND NOT flex-start. These are COLUMN flex containers, so justify-content runs the vertical axis — setting it would move content up and down, not left. The horizontal axis is align-items, and it must go to STRETCH rather than flex-start: flex-start sizes a child to its own content, which is the collapse already documented above (an Origin headline went 267px -> 5px, one character per line). Stretch gives each child the full column and the text inside it aligns left on its own. */ .page .text:not(.fig-fit:not(:has(.bac-showcase-frame)) *) { --text-alignment: left !important } .page [class*="-inner"]:not(.nav-inner), .page [class*="-inner"]:not(.nav-inner) > * { align-items: stretch !important; } /* 4 — MINIMAL PADDING. 16px, matching the canvas. The gutter already lives on [class*="-inner"] and [data-pad] further up; this only adds the elements that carry neither, so a band's own inset does not reappear inside a full-width column. */ .page [class*="-inner"]:not(.nav-inner) { padding-left: 16px !important; padding-right: 16px !important; } } /* ── Mobile: nested insets, the fixed nav, and the type scale ───────────────── */ /* Three defects found by rendering at a real 390 viewport (headless Chrome at 390x844, and a same-origin 390px iframe for measurement) rather than by reading the rules. Every rule in the block above was landing correctly — inner columns full width, no side borders, nothing centred — and the page was still wrong. */ @media (max-width: 767px) { /* 1 — NESTED INSETS. The gutter is on the inner column, but structural columns INSIDE it carry their own: measured on the home hero, .hero-col adds 64px on top of the 16px gutter, so the h1 sat 80px in from the left against 16px on the right. The existing [data-pad] tagging does not catch these because it was written for elements at 80px or more; these sit at 40-128. Enumerated rather than matched by pattern, and generated from the three stylesheets rather than eyeballed, because a pattern like [class*="-row"] also catches controls — the contact submit is .contact-row-4 and its 12px/16px is what makes it a button. Every selector below is a layout container. */ .page .contact-col-2, .page .credentials-col-4, .page .credentials-row, .page .hero-col, .page .hero-col-2, .page .hero-row-2, .page .hubspot-col-8:not(.fig-fit:not(:has(.bac-showcase-frame)) *), .page .hubspot-row-3:not(.fig-fit:not(:has(.bac-showcase-frame)) *), .page .offer-col-58, .page .offer-row-21, .page .problem-col-16, .page .problem-col-4, .page .problem-col-5, .page .problem-row, .page .product-col-3, .page .proof-row, .page .scope-col-10, .page .scope-row, .page .scope-row-2 { padding-left: 0 !important; padding-right: 0 !important; } /* …except where the element paints its own background, which would then run its text flush against its own edge. These keep the gutter instead of losing it. */ .page .offer-row-6 { padding-left: 16px !important; padding-right: 16px !important; } /* 2 — THE FIXED NAV OVERLAPPED THE HERO. The bar is position:fixed and 56px tall, and at desktop the hero deliberately runs underneath it (see the position:fixed note in bac-overlay.css). At 390 the headline is the first thing in the band, so it collided with the bar — measured: h1 top at y0 against a nav bottom of 56, a 56px overlap. The band's existing top padding was 48px, which is less than the bar it has to clear. */ .page .hero-inner { padding-top: 72px !important; } /* 3 — TYPE SCALE. Desktop sizes survived into the band: the h1 rendered at 60px where the approved canvas has it at 44. Sizes are written as an inline --font-size custom property, so each step is matched on that property's own value — which is exact, and cannot be confused with a longer number (--font-size:130px does not contain the string "--font-size:30px"). */ .page [style*="--font-size:60px"] { font-size: 40px !important } .page [style*="--font-size:40px"] { font-size: 30px !important } .page [style*="--font-size:30px"] { font-size: 24px !important } } /* ── Mobile: the four faults found in the 390 render ────────────────────────── */ @media (max-width: 767px) { /* 1 — THE CONTENT COLUMN IS 80% UNDER SEVERAL NAMES. Fixing [class*="-inner"] caught five of them; it does not catch the rest, because the same 80% column is also written as .offer-row-19, .offer-col-55, .proof-col-3, .product-col-11 and .scope-col-7. That is why the Growth Systems block sat indented at x39 and 312px wide while the bands above it were full width — it was never a padding difference, it was a different name for the same column. Taken from the stylesheets by the declaration itself rather than by guessing at names. */ .page .contact-inner, .page .footer-inner, .page .hero-inner, .page .offer-col-55, .page .offer-row-19, .page .partner-inner, .page .problem-inner, .page .product-col-11, .page .product-inner, .page .proof-col-3, .page .proof-inner, .page .scope-col-7, .page .scope-inner { width: 100% !important; max-width: 100% !important; } /* 2 — THE THREE CARDS SHOWED ONLY THEIR ICONS. Each card is given an inline pixel height in JS, copied off a reference card (bac-overlay.js), and it carries overflow:hidden — so at 390 the card was 64px tall around 120px of content and the headline and body were simply cut off. Released here, at a specificity that beats both the inline height and the earlier rule that was not winning. */ .page .bac-card-new { height: auto !important; min-height: 0 !important; overflow: visible !important; } .page .bac-card-new .bac-card-body { opacity: 1 !important; transform: none !important; } /* 3 — THE HERO COPY BECOMES A SUBHEADER. At desktop the "Three things decide…" column is the right-hand half of a two-column band and the scrub trades width between them. Below 1200 the scrub is not wired at all, so that column just stacked underneath the dark card and landed on the paper ground as a separate block with a void above it. On mobile it is a subheader: the whole band takes the ink ground so the copy sits on the same surface as the headline, and the dark card's fixed height is released so the gap between headline and logos closes. No scrub, nothing to disable — it was never wired at this width. */ .page .hero-inner { background-color: var(--ink, #042839) !important; } .page .hero .text { --text-color: var(--paper, #F9F8F5) !important; } /* Scoped to .hero-row's OWN .hero-box/.hero-ground, not the bare class — "hero-box" and "hero-ground" are reused, per-page hash names. Origin and Growth Systems have their own .hero-box (the ground layer, a DIRECT child of .hero, native height:100%) and an unscoped rule here forced it to height:auto too, collapsing their hero ground to 0 for the same reason the mobile wall fix further down this file had to solve on home — an absolute layer with height:auto and nothing to give it intrinsic size resolves to zero. Home's is the only one nested inside a .hero-row, so that's the scope that actually means "home only". */ .page .hero-row .hero-box, .page .hero-row .hero-ground { height: auto !important; min-height: 0 !important; } /* 4 — THE CLIENT LOGOS OVERLAPPED. The rail is a marquee whose sets are laid out for a 1152px track; at 358 they sit on top of each other. It becomes an ordinary wrapping row, and the duplicate set the marquee needs for its loop is dropped, since nothing is looping at this width. ⚠ SCOPED TO .hero-box-2, NOT THE BARE CLASS. .bac-logo-rail/-run/-set is the same shared marquee component the industry-pill ticker (ensureIndustryTicker, bac-overlay.js) and Growth's credentials-row-5 carousel both reuse — the bare selector killed their animation too (animation:none!important), which is why "the carousel isn't moving" was reported on a page this rule was never meant to touch. .hero-box-2 is specifically where the HERO's own client-logo strip lives on every page that has one (confirmed: home and Growth both hold their hero logo rail there; Origin's .hero-box-2 is an unrelated image layer, so this scope is a no-op there, correctly). */ .hero-box-2 .bac-logo-run { position: static !important; display: flex !important; flex-wrap: wrap !important; gap: 18px 22px !important; width: 100% !important; animation: none !important; transform: none !important; } .hero-box-2 .bac-logo-set:nth-child(n+2) { display: none !important } .hero-box-2 .bac-logo-fit { position: static !important } } /* ── Mobile: the viewport-height minimums are the voids ─────────────────────── */ /* The bands are held open by viewport-height minimums written for a desktop window: .hero-inner min-height:100vh, .problem-inner 80vh, .proof-inner 60vh, on top of 128px and 64px of vertical padding. On a 390x844 phone that is 844, 675 and 506px of enforced emptiness around content that is a few hundred px tall — which is the void between the headline and the logo rail, and the long blank stretch before "Financial services firms". A minimum drawn as a fraction of the window is a desktop composition device: it makes a band feel like a screen. At phone size the content already fills the screen, so it only adds scroll. Released, and the vertical padding scaled with it — the hero keeps its own top padding, which is clearing the fixed nav. */ @media (max-width: 767px) { .page [class*="-inner"], .page .hero, .page .hero-row { min-height: 0 !important; } .page [class*="-inner"]:not(.nav-inner):not(.hero-inner) { padding-bottom: 48px !important; } .page .hero-inner { padding-bottom: 32px !important; } } /* ── Mobile: three follow-ups from the render ───────────────────────────────── */ @media (max-width: 767px) { /* THE CARDS ARE FLEX ITEMS, WHICH IS WHY height:auto DID NOTHING. Two rules already said height:auto!important and the card still computed 64px with no inline height on it — because the card is a flex child sharing a row with a definite height, and flex-basis decides the main size before height:auto is ever consulted. The row has to be released and the item taken off the grow path; only then does the card size to its own 120px of content. */ .page .bac-cards-row { height: auto !important; min-height: 0 !important; } .page .bac-card-new { flex: 0 0 auto !important; min-height: 0 !important; } /* THE SUBHEADER WAS INDENTED PAST THE HEADLINE. Measured: h1 at x16, the copy at x40 — the copy column carries its own 24px inset, which reads as a misalignment now that both sit on the same ground. The hero's own columns lose their horizontal padding; the band's 16px gutter is the only inset. */ .page .hero [class*="-col"] { padding-left: 0 !important; padding-right: 0 !important; } /* THE LOGO RAIL COLLAPSED TO 16px when the dark card's fixed height went. Its items are positioned layers that were being held open by that height, so the rail needs its own. */ .page .bac-logo-run, .page .bac-logo-set { min-height: 34px !important; align-items: center !important; } } /* ── Mobile: the complete 80% and vh sets ───────────────────────────────────── */ /* ⚠ THE EARLIER LISTS WERE A THIRD OF THE REAL ONES, and the reason is worth keeping: I built them by matching `.class{…}` at the start of a rule, and this stylesheet writes most of its rules as compound selectors — `.page .offer-row-2, .page .offer-row-19 { … width:80% }`. Every selector after the first comma was invisible to that scan, so the fix landed on five columns out of twenty and the bands that were left behind looked like a padding problem rather than a missed rule. Both sets below are taken by splitting every selector list, so they are the whole of what the three stylesheets declare. The two shapes, and why each one breaks a phone: width:80% is the content column, written under twenty different names. It is a desktop measure — it buys margin either side of a 1600px window — and at 390 it spends 78px of the screen on nothing. min-height:Nvh is a composition device: it makes a band fill the window so it reads as a screen. At phone size the content already fills the screen, so all it adds is scroll — measured on the offer band, 675px of enforced emptiness (80vh of 844) around 304px of content, which is the long blank stretch before "Growth Systems, Our Practice". */ @media (max-width: 767px) { .page .contact-inner, .page .credentials-inner, .page .footer-inner, .page .hero-inner, .page .hubspot-col-6, .page .hubspot-inner, .page .offer-col-10, .page .offer-col-55, .page .offer-row-19, .page .offer-row-2, .page .partner-inner, .page .problem-col-3, .page .problem-inner, .page .product-col-11, .page .product-col-8, .page .product-inner, .page .proof-col-3, .page .proof-inner, .page .scope-col-7, .page .scope-inner { width: 100% !important; max-width: 100% !important; } .page .credentials-col, .page .hero, .page .hero-inner, .page .hubspot-col, .page .offer-col, .page .offer-col-49, .page .partner, .page .problem-col, .page .problem-inner, .page .product-col, .page .proof-inner, .page .scope-col { min-height: 0 !important; } } /* ── Mobile: centred rows and spread columns ────────────────────────────────── */ /* The bands centre their content with flex, not with text-align, so redefining --text-alignment never reached them: .proof-row is a ROW with justify-content:center, which is why "From our Customers" sat at x147 in a 358px row and the first stat at x119 while the others ran left. The same property on a COLUMN is the vertical axis, and where it is space-between it is what pushed the four stats apart into a tall staggered ladder. flex-start fixes both at once: on a row it is the left edge, on a column it packs the children to the top. align-items is deliberately NOT touched here — on a column it is the horizontal axis and it must stay stretch (flex-start collapses a child to its own content, the 267px -> 5px failure this file already records), and on a row it would force equal heights on things that should not have them. The four button rows are excluded by name. They are rows too, and they centre their own label — that centring is what makes them read as buttons. */ @media (max-width: 767px) { .page [class*="-row"]:not([class*="nav-"]):not(.contact-row-4):not(.offer-row-5):not(.offer-row-22):not(.bac-gs-badge):not(.fig-fit:not(:has(.bac-showcase-frame)) *), .page [class*="-col"]:not([class*="nav-"]):not(.fig-fit:not(:has(.bac-showcase-frame)) *) { justify-content: flex-start !important; } } /* ── Mobile: the other axis ─────────────────────────────────────────────────── */ /* justify-content fixed the rows; the columns were still centring, because on a COLUMN the horizontal axis is align-items — .proof-col-5 is a column with align-items:center, which both centred its child and shrank it to its own content (153px inside a 310px column). That is why one stat sat centred while the others ran left. STRETCH, never flex-start: flex-start would centre nothing but would collapse each child to its content width, which is the 267px -> 5px failure recorded further up this file. Scoped to -col, because these names are the export's own convention for a column and applying it to a row would force equal heights on things like an icon beside a label. The rows wrap. A stat strip is four columns in a 358px row, so without wrapping they overflow or crush; with it they fall onto their own lines and stack, which is what the canvas shows. */ @media (max-width: 767px) { .page [class*="-col"]:not([class*="nav-"]):not(.fig-fit:not(:has(.bac-showcase-frame)) *) { align-items: stretch !important; } .page [class*="-row"]:not([class*="nav-"]):not(.contact-row-4):not(.offer-row-5):not(.offer-row-22):not(.fig-fit:not(:has(.bac-showcase-frame)) *) { flex-wrap: wrap !important; } } /* ── Mobile: buttons, the gutter for band-less sections, gaps, hero air ─────── */ @media (max-width: 767px) { /* 1 — BUTTONS WERE STRETCHING TO FULL WIDTH. Not a split: each of the pair was spanning the row, because align-items:stretch on their parent column (added to stop text columns collapsing) also stretches a button. They carry .p, the site's own button component, so that is what takes them back off the stretch path and sizes them to their label. */ .page .p { align-self: flex-start !important; width: auto !important; max-width: 100% !important; flex: 0 0 auto !important; } /* 2 — THE GUTTER ONLY EXISTED ON THE INNER COLUMN, so a section built without one had none. Two sections in the whole site are built that way — home's .offer and Origin's .hero — which is why the Origin headline sat flush at x0 while the eyebrow beside it was at x16. ⚠ FIRST ATTEMPT PUT THE GUTTER ON ALL TWENTY CONTENT-COLUMN NAMES AND THAT DOUBLE-INSET THE NESTED ONES: measured, the eyebrow landed at x32 against a headline at x18, because a content column inside another content column paid the gutter twice. Matched on the actual condition instead — a section that contains no inner column — which is exactly the two that need it. The hero is handled on its content column rather than on the section, because its dark ground is an absolutely-positioned inset:0 layer and insets resolve against the PADDING box: padding the section would have pulled the full-bleed ground in by 16px on each side. */ .page > *:not(.nav):not(:has([class*="-inner"])):not(:has(.hero-ground)) { padding-left: 16px !important; padding-right: 16px !important; } .page .hero:not(:has([class*="-inner"])) > [class*="-col"] { padding-left: 16px !important; padding-right: 16px !important; } /* 3 — GAPS WERE DRAWN FOR A 1152px COLUMN. 32-64px between stacked blocks is air at desktop and a scroll tax on a phone; taken to 20. Enumerated from the stylesheets by the declaration, same as the other sets. */ .page .contact-col-2, .page .contact-col-4, .page .contact-row-2, .page .credentials-col, .page .credentials-col-3, .page .footer-col, .page .footer-inner, .page .footer-row-3, .page .hero-col, .page .hubspot-col, .page .hubspot-col-8, .page .hubspot-row, .page .nav, .page .offer-col, .page .offer-col-13, .page .offer-col-49, .page .offer-col-58, .page .offer-row-21, .page .offer-row-4, .page .problem-col, .page .problem-col-16, .page .problem-col-4, .page .problem-inner, .page .product-col, .page .product-col-3, .page .proof-col-17, .page .proof-inner, .page .scope-col, .page .scope-row-2 { gap: 20px !important; } /* 4 — THE HERO NEEDED AIR. It was tight to the nav and to its own floor once the viewport-height minimum went. */ .page .hero-inner { padding-top: 88px !important; padding-bottom: 44px !important; } } /* ── Mobile: one gutter, not two ────────────────────────────────────────────── */ /* Giving the band-less sections their own gutter left the columns inside them still carrying theirs: .offer-row-3 has 16px of its own, so the Growth Systems block landed at x32 while the Origin headline beside it — a column with no padding of its own — sat at x16. The enumerated padding list did not catch it because that was written for insets of 32px and up, and this one is 16. Inside a section that gets the section-level gutter, the columns give theirs up; the section's 16px is the only inset. Buttons keep theirs — .p is the site's button component and its padding is what gives it its shape. */ @media (max-width: 767px) { /* the showcase frame is excluded: it carries its own deliberate inset (4px, and 48 on the left) and this rule outranks a plain class selector at specificity (0,6,0), which is why that inset kept disappearing. */ .page > *:not(.nav):not(:has([class*="-inner"])):not(:has(.hero-ground)) [class*="-row"]:not(.p):not(.bac-showcase-frame), .page > *:not(.nav):not(:has([class*="-inner"])):not(:has(.hero-ground)) [class*="-col"]:not(.p):not(.bac-showcase-frame) { padding-left: 0 !important; padding-right: 0 !important; } } /* ── Mobile: the client logo rail wraps instead of running off ──────────────── */ /* The rail is a marquee: each logo sits in a fixed 170px cell on a track built for a 1152px band. Turning the track into a wrapping row was not enough, because a 170px cell times eight still runs to 1180px and the cells never had a reason to wrap. The cells size to their logo and take at most half the row, so they fall into pairs. ⚠ EXCLUDES .bac-mobile-logo-strip. That section reuses this exact same .bac-logo-rail/-fit/-img markup on purpose (one carousel mechanism, not two) but wants the OPPOSITE mobile treatment — the hero-style animated, fixed-height, non-wrapping marquee, not this wrap-to-pills layout built for the hero's own mobile fallback. Without the guard this rule collapsed its cells to ~1px wide: width:auto!important on a flex item with no other definite width source resolves against content, and the same-rule pair (.bac-logo-img max-width/height:auto) left the actual with nothing to size from either — measured live, both landed under 1px. */ @media (max-width: 767px) { .page .bac-logo-fit:not(.bac-mobile-logo-strip *) { width: auto !important; max-width: 46% !important; flex: 0 0 auto !important; } .page .bac-logo-img:not(.bac-mobile-logo-strip *) { max-width: 100% !important; height: auto !important; } } /* ── Mobile: the showcase bleed is a desktop treatment ──────────────────────── */ /* The Origin showcase panels are deliberately sized from their artwork so the dashboard runs out of frame (ensureShowcaseBleed in bac-overlay.js, scoped to the home page at every width). At 390 that plate is 768px wide and it pushed the row — and with it the document — to 589px, which is the horizontal overflow left on this page. Running out of frame needs a frame wide enough to have an inside; a phone does not. The plate goes back to the panel's width and the image fits it. */ @media (max-width: 767px) { .page .bac-showcase-plate { width: 100% !important; height: auto !important; aspect-ratio: 2450 / 1550 !important; } .page .bac-showcase-plate > *, .page .bac-showcase-img { width: 100% !important; height: 100% !important; } .page .bac-showcase-img { object-fit: cover !important } /* ⚠ THE FRAME IS ABSOLUTELY POSITIONED and its parent is a fixed-height box with overflow:hidden. Releasing that height (the vh and min-height work above) left the parent at 0 and the frame at 9px — the panels rendered blank, with the image itself correctly sized at 292x185 inside them. An absolute child contributes no height, so at mobile the frame rejoins the flow and the parent sizes to it. */ .page .bac-showcase-frame { position: static !important; left: auto !important; bottom: auto !important; transform: none !important; width: 100% !important; height: auto !important; align-items: stretch !important; } .page :has(> .bac-showcase-frame) { height: auto !important; min-height: 0 !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; } } /* ── Mobile: the showcase pair stacks ───────────────────────────────────────── */ /* The two panels sit in a row built for a 1152px band; at 358 they stay side by side and the second is cut off. The row is not in the data-stack inventory because the panels are restructured at runtime, so it is matched by what it contains. */ @media (max-width: 767px) { .page [class*="-row"]:has(> * > .bac-showcase-frame) { flex-direction: column !important; height: auto !important; gap: 16px !important; } .page [class*="-row"]:has(> * > .bac-showcase-frame) > * { width: 100% !important; max-width: 100% !important; } } /* ═══ Mobile · operator pass, 22 Sep ══════════════════════════════════════════ */ @media (max-width: 767px) { /* 1 — HERO AT 50vh. A floor, not a fixed height, so a longer headline still grows the band rather than being clipped by it. */ .page .hero, .page .hero-inner { min-height: 50vh !important; } /* 2 — TOP BORDERS ON THE SECOND AND THIRD CARDS. The first card's top edge is the progress bar (.bac-card-bar); the other two had nothing, so the stack read as one long panel. Adjacent-sibling, so the first keeps its bar and is not given a second line above it. */ .page .bac-card-new + .bac-card-new { border-top: 1px solid rgba(4, 40, 57, .25) !important; } /* 3 — THE FIGURE CLIPS AND ITS CONTENT SCALES TO FIT. Replaces the 1.6x horizontal-scroll treatment: the diagram is scaled down to the artwork's own width so it sits inside its frame, and the pill carousel is clipped at the frame edge instead of running the page wide. */ .page .fig-fit { overflow: hidden !important; aspect-ratio: var(--fw) / var(--fh) !important; height: auto !important; } .page .fig-fit > * { transform: scale(calc(100cqi / (var(--fw) * 1px))) !important; } /* 4 — ONE SHOWCASE PANEL, NOT TWO. The pair was built for a band wide enough to hold both; at 390 the second is redundant. The panel that remains is constrained to the column — it was still measuring 573px wide, which is what was pushing the page — and takes 24px above the product image. */ .page [class*="-row"]:has(> * > .bac-showcase-frame) > *:nth-child(n+2) { display: none !important; } .page [class*="-box"]:has(> .bac-showcase-frame), .page [class*="-row"]:has(> * > .bac-showcase-frame), .page .bac-showcase-frame { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .page .bac-showcase-frame { padding-top: 24px !important; } /* 5 — THE PROOF BAND WAS CLIPPING ITS OWN CONTENT. .proof carries overflow:clip and a computed height, so the last of the four figures and the quote under them were cut off. Released to its content, the figures take a 16px inset instead of their desktop one, and every item set in the band is 16px apart. */ .page .proof, .page .proof-inner { overflow: visible !important; height: auto !important; } .page .proof-col-5 { padding: 16px !important; } .page .proof-row-4 { gap: 16px !important; margin-bottom: 16px !important; } .page .proof-row-2 { gap: 16px !important; } /* 6 — THE NAV CTA IS HIDDEN. At 390 it was overlapping "Growth Systems"; the page has its own Book the Hour in the contact band. */ .page .nav-row-7 { display: none !important; } } /* ── Mobile: wrapped rows were spreading their own lines ────────────────────── */ /* THE CAUSE OF THE BIG VERTICAL GAPS, and it is not a gap property. Making the rows wrap put them into multi-line flex, where the default align-content is stretch/normal — so any spare height in the container is divided BETWEEN THE LINES. The four proof figures sat ~79px apart on a row whose gap was 16. Packing the lines to the start is what makes the authored gap the real one. */ @media (max-width: 767px) { .page [class*="-row"]:not([class*="nav-"]):not(.bac-gs-badge):not(.fig-fit:not(:has(.bac-showcase-frame)) *) { align-content: flex-start !important; } /* The card's top edge is its progress bar — an 8px dark band that marks the ACTIVE card in the desktop cycle. Stacked and all expanded, that reads as one card being different rather than as a divider, so the bar goes and the second and third take a hairline instead. */ .page .bac-card-bar { display: none !important } /* 24px above the product image, measured from the panel's own top edge. Set on the plate rather than as frame padding, which the plate was not honouring. */ .page .bac-showcase-plate { margin-top: 24px !important } } /* ── Mobile: the proof band's columns carried fixed heights ─────────────────── */ /* The band itself was released earlier and the quote was STILL cut: .proof-col-17 is 116px tall around a 224px child, so the text overflowed its own column by 108px and the band ended mid-sentence. Releasing the band was not enough because the height was one level further in. Every column in this band sizes to its content, and the band's item sets sit 16px apart as asked. */ @media (max-width: 767px) { .page .proof [class*="-col"], .page .proof [class*="-row"], .page .proof [class*="-box"]:not(.bac-eyebrow-dot):not(.bac-eyebrow-halo) { height: auto !important; min-height: 0 !important; } /* The eyebrow dot/halo (offer-box-2/3, reused hash names) are fixed 8x8 indicators with no content, not layout containers; the blanket [class*="-box"] release above zeroed their height since an empty div's auto height is 0 — read as the eyebrow fading out on the proof band. */ .page .proof-inner, .page .proof-row-2, .page .proof-row-4 { gap: 16px !important; } } /* ── Mobile: the proof figures' own padding was the gap ─────────────────────── */ /* Not the container's gap, which was already 16, and not the wrapped-line spreading either. Each figure — .proof-row-4 through -7 — carries `padding: 40px 24px`, so a 60px stat occupied 141px and the four read as far apart. The earlier padding sweep missed them because it scanned HORIZONTAL padding only, and theirs is 24; the 40 is on the other axis. 16px as asked, and the rules either side of the set take the same so the band is even. */ @media (max-width: 767px) { .page .proof-row-3, .page .proof-row-4, .page .proof-row-5, .page .proof-row-6, .page .proof-row-7, .page .proof-row-8 { padding: 16px !important; } } /* ── Mobile: showcase inset, the 2x2 figure grid, the quote's alignment ─────── */ @media (max-width: 767px) { /* 1 — THE PANEL'S OWN PADDING IS 4px, and the product image sits 48px in from its left edge. The image is deliberately offset rather than centred: the dashboard's left edge is where its sidebar is, and holding it off the panel wall is what stops the two dark edges reading as one. */ .page .bac-showcase-frame { padding: 4px !important; } .page .bac-showcase-plate { margin-left: 48px !important; margin-top: 24px !important; } /* 2 — THE FOUR FIGURES BECOME A 2x2. The band is a column flex, so the direction flips to a wrapping row and each figure takes half the width less half the gap. The two rules either side of the set — .proof-row-3 and -8 — stay full width so they still read as rules across the band rather than becoming grid cells. */ .page .proof-row-2 { flex-direction: row !important; flex-wrap: wrap !important; gap: 16px !important; align-content: flex-start !important; } .page .proof-row-2 > * { flex: 0 0 100% !important; } .page .proof-row-4, .page .proof-row-5, .page .proof-row-6, .page .proof-row-7 { flex: 0 0 calc(50% - 8px) !important; min-width: 0 !important; } /* 3 — THE QUOTE WAS INSET PAST THE REST. Measured at x40 against a band gutter of 16, and boxed to 221px of a 358px column, so it set much narrower than everything above it. Both released, so it starts on the same line as the eyebrow, the headline and the figures. */ .page .proof-col-17, .page .proof-col-18 { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 100% !important; } } /* ── Mobile: one figure was padded twice ────────────────────────────────────── */ /* An earlier pass put 16px on .proof-col-5 to inset the figures, before the padding was moved onto the rows themselves. .proof-col-5 is the inner column of the FIRST figure only — the other three are .proof-col-8, -11 and -14 and were never given it — so once the grid formed, the top-left cell sat 16px right of the one below it and its row ran 32px taller. The row carries the inset now; the inner columns carry none. */ @media (max-width: 767px) { .page .proof-col-5 { padding: 0 !important; } } /* ── Mobile: the showcase inset, on the frame ───────────────────────────────── */ /* The 48px was set as a margin on the plate and did not land: the plate computes a 1011px width clamped by max-width, and its margin was not moving it — it measured 17px from the frame's left edge, not 52. The frame's own horizontal padding was also being zeroed, by the rule that strips insets inside a section that carries the band gutter (.offer is one), which is more specific than a plain .bac-showcase-frame selector. Both fixed by putting the inset on the FRAME, where it is a padding the plate cannot ignore, and by repeating the class to outrank the stripping rule. Originally 4px all round plus 48 on the left; the left-heavy inset is gone now (operator instruction) — 4px on all four sides, uniform. */ @media (max-width: 767px) { /* ⚠ THE PANEL IS INSIDE A SCALED WRAPPER, so a padding written in px does not arrive in px. .fig-fit scales this figure by 100cqi / --fw — measured 0.354 here, 358 rendered against a declared 1011 — and it scales the padding with everything else: 52px was arriving on screen as 18. The inset is therefore written in the figure's OWN coordinate space and divided back out by the same ratio the wrapper multiplies by, so 4 lands as 4 whatever the container width turns out to be. */ .page .bac-showcase-frame { padding: calc(4px * var(--fw) * 1px / 100cqi) !important; } .page .bac-showcase-plate { margin-left: 0 !important; } } /* ── Mobile: air around the customer logo and the quote ─────────────────────── */ /* The band's four blocks — headline, NOW Finance logo, the 2x2, the quote — are flex siblings on a 16px gap, and 16px is right BETWEEN the sets but too tight either side of the logo, which is a mark rather than a block of text and needs room to read as one. 24px of margin on top of the gap puts it 40px clear of the headline above and the grid below. Same treatment on the quote, so grid→quote matches logo→grid at 40px. ⚠ An earlier rule here set margin-bottom:0 on every child of .proof-inner — written before the gaps did the spacing — and it would have cancelled exactly this. Removed rather than worked around. */ @media (max-width: 767px) { .page .proof-svg { margin-top: 24px !important; margin-bottom: 24px !important; } .page .proof-col-17 { margin-top: 24px !important; } } /* ── Mobile: air between the headline and the subheader ──────────────────────── */ /* .hero-row (headline) and .hero-col-3 (the "Three things…" copy folded under it on mobile) are flush — 0px, measured — because .hero-inner's own gap is a desktop row-gap that collapses to nothing once the row stacks to a column. Margin on .hero-col-3 only, not the inner's gap: the inner also holds the band's other stacked pieces (logo strip lives inside .hero-row itself, not as a separate flex child), so a gap set on .hero-inner would be the safer-looking but wrong lever — this is the one that touches only this pair. */ @media (max-width: 767px) { .page .hero-col-3 { margin-top: 20px !important; } } /* ── Mobile: Origin's three product cards were an absolute stack, not a list ── */ /* .product-row is data-stack="wide" (flex-direction:column, already correct), and each card's OUTER wrapper (.product-box/-6/-11) already released to height:auto via the generic [data-stack="wide"] > * rule — but the actual card (.product-col-9/-12/-15) inside each wrapper is still Framer's native position:absolute, sized for a three-up desktop row. An absolutely positioned child contributes nothing to its in-flow parent's height, so every wrapper collapsed to ~0 and the three 364px cards sat stacked on top of each other at nearly the same offset (24px apart) instead of the row they were meant to be — which is what read, from the outside, as "no images at all": three cards fighting for the same 48px sliver. Enumerated by exact class, not [class*="product-col-"] — that pattern also matches .product-col itself (the 80vh section wrapper, released separately below) and other unrelated numbered instances on this page. */ @media (max-width: 767px) { .page .product-row .product-col-9, .page .product-row .product-col-12, .page .product-row .product-col-15 { position: relative !important; width: 100% !important; /* Operator devtools check: forced to the shared base value (180px) rather than each card's own per-instance top (e.g. -15's native 224px) — with position now relative this is just a small intra-card nudge, not the absolute anchor it used to be. */ top: 180px !important; } } /* ── Mobile: the min-height:Nvh sections release like everywhere else ────────── */ /* .product-col/.problem-col (Origin, min-height:80vh) and .partner (Origin and Growth Systems both, min-height:40vh) are the same "a fraction of the window is a desktop composition device" pattern already released everywhere else — at phone width the content fills the screen on its own; a vh floor under it just adds empty scroll. The hero keeps its own 50vh floor (set above) — deliberate, not an oversight. */ @media (max-width: 767px) { .page .product-col, .page .problem-col, .page .partner { min-height: 0 !important; } } /* ── Mobile: air between the partner CTA headline and its button ────────────── */ /* .partner-inner (Origin and Growth Systems) is a column flex with no gap — "normal", i.e. 0 — so "Build it with us, and run it first." and the "Book the Hour" button beneath it were flush, measured 0px. Margin on the button itself, the same lever used for the proof band's logo/quote above. */ @media (max-width: 767px) { .page .partner-row { margin-top: 24px !important; } } /* Mobile top/left bleed padding (32px 0 0 32px on .product-col-9/-12/-15) — tried, then reverted per operator devtools check: unticked in favour of the native padding, kept only the top:180 override below. */ /* ── Mobile: Origin/Growth's hero content clears the fixed nav ──────────────── */ /* Home's hero clears the nav via .hero-inner's own top padding — explicitly excluded from the blanket padding-top rule above for exactly that reason. Origin and Growth Systems have no .hero-inner (their hero is .hero-box/ .hero-box-2/.hero-col, three absolute-turned-relative layers straight under .hero) so that exclusion left their content column with none at all. .hero-col centres its content vertically in a 422px band (the 50vh floor) with barely any slack, so the breadcrumb eyebrow ("Origin" + its dot) landed right at the very top — underneath the fixed nav (56px, z-index 5) rather than below it, reading as a faint, oddly-placed ghost rather than what it is. 80px clears the nav with the same margin the rest of the page uses. No bottom padding at all natively — "How it works" sat flush against the hero's own bottom edge (the band otherwise already does the right thing: height:auto off the 50vh min-height floor grows it to fit content, 489px measured against a 422px floor, so "fit content, minimum 50vh" was already true; it just had no air at either end of that content). 48px added to match the vertical padding every other mobile section already carries. */ @media (max-width: 767px) { .page .hero > .hero-col { padding-top: 80px !important; padding-bottom: 48px !important; padding-left: 16px !important; } } /* ── Mobile: the Origin/Growth breadcrumb eyebrow — dot vs text misaligned ──── */ /* .hero > .hero-col > .hero-row (the "Origin" breadcrumb + its eyebrow dot) is align-items:center, which centres the dot's 28px-tall wrapper in the 44px row — but the breadcrumb link's own text sits at the TOP of that same 44px box (a native height that isn't just its text line; there's more in there than the label), not centred to match. Two different vertical anchors in one row put the dot a visible ~12px below the word it belongs beside, reading as unrelated/floating rather than an eyebrow marker. flex-start aligns both to the row's top, where the text already sits. */ @media (max-width: 767px) { .hero > .hero-col .hero-row { align-items: flex-start !important; } /* flex-start puts both at the row's top, but the dot's own wrapper chain (.hero-box-3 > .hero-col-3.hero-col-4.hero-col-5, place-content:center) still centres the 8x8 dot inside a taller box of its own — measured 16px lower than the text's cap-height once the row itself stopped absorbing that with its own centering. Pulled up to match. Growth Systems carries the same structure one class number over (.hero-box-4, not -3 — the usual per-page hash drift), same 20px offset measured, so both are listed. */ .hero > .hero-col .hero-row .hero-box-3, .hero > .hero-col .hero-row .hero-box-4 { margin-top: -16px !important; } } /* ── Mobile: Origin's "decision moved" section — more air between the groups ── */ /* Both gaps here come from a shared column gap (20px) that also spaces other things in the same flex column, so widened with margin on the specific piece rather than the gap itself — .problem-col/-col-2/-col-4 are Origin's own numbered instances (checked against home/growth, no collision) but the bare gap is still shared with siblings this instruction wasn't about. */ @media (max-width: 767px) { .page .problem-col-4 { margin-top: 16px !important; /* header -> the three items, 20px -> 36px */ } .page .problem-col-16 { margin-top: 24px !important; /* the three items -> the product image, 20px -> 44px */ } } /* ── Mobile: hide the "decision moved" product image ─────────────────────────── */ @media (max-width: 767px) { .page .problem-col-16 { display: none !important; } } /* ── Mobile: the "operating system" cards' text blocks back to their native 80% ─ .product-col-8/-11/-14 are absolutely-positioned text blocks overlaid on the Trust/Answer/Apply cards, native width 80%/80%/79%. -8 and -11 were getting forced to 100% by another mobile rule (their nearer ancestor row is caught by a wildcard elsewhere in this file); -14 was untouched and already correct. Forced back to 80% on all three so the text wraps the same width in each card rather than two of the three running edge to edge. */ @media (max-width: 767px) { .page .product-col-8, .page .product-col-11, .page .product-col-14 { width: 80% !important; } } /* ── Mobile: Growth Systems' hero logo rail was off-canvas ──────────────────── */ /* .hero-inner here isn't home's hero wrapper (home's has no .hero-box/.hero-col siblings at the same level — scoped with :has() to tell the two apart, same collision class as everything else in this file). On Growth it's the logo rail's own container: position:absolute; left:171px; width:80% — a desktop pixel offset that, at 375px wide, pushed it half off the right edge and cut its left edge clean off. Measured: logos rendering from x=187 to x=530 in a 375px viewport. Full width, left edge at the page's own. */ @media (max-width: 767px) { .hero:has(> .hero-box) > .hero-inner { left: 0 !important; width: 100% !important; } } /* ── Mobile: Growth Systems' remaining vh-based sections ─────────────────────── */ /* .credentials-col/.scope-col (80vh) and .hubspot-col (40vh) — the same desktop-composition-device pattern released everywhere else on this file (Origin's .product-col/.problem-col/.partner). Checked against home/origin, none of these three names collide. */ @media (max-width: 767px) { .page .credentials-col, .page .scope-col, .page .hubspot-col { min-height: 0 !important; } } /* ── Mobile: hide .scope-col-12 (Growth Systems) ──────────────────────────────── */ @media (max-width: 767px) { .page .scope-col-12 { display: none !important; } } /* ── Mobile: Growth Systems odds and ends ─────────────────────────────────────── */ @media (max-width: 767px) { /* Left inset removed on operator instruction — these carried the desktop row's own side padding (.hubspot-row: 64px; .credentials-col-8/-12/-16: 24px), which at phone width just eats into the 16px gutter already set by .page [class*="-inner"] above. */ .page .hubspot-row, .page .credentials-col-8, .page .credentials-col-12, .page .credentials-col-16 { padding-left: 0 !important; } /* The breadcrumb eyebrow link and the "How it works" link both read as having extra space below their text — not literal padding (both are 0px, checked), but the 44px touch-target floor this file sets on every (min-height:44px, for thumb-sized tap targets) stretching a ~17px text line into a 44px box with the text pinned to the top. Released for just these two, on operator instruction. */ .hero-col-6.bac-wired-link, .hero-col-11.bac-wired-link.bac-how-it-works-link { min-height: 0 !important; } /* .scope-box (the eyebrow dot before "How an engagement runs") is the same reused component as the hero breadcrumb's dot (.hero-box-3/-4) — an 8x8 mark centred inside a taller wrapper via a chain of nested classes that leaves it sitting low rather than centred once the row itself no longer absorbs the difference. Same correction. */ .scope-box { margin-top: -16px !important; } } /* ── Mobile: Growth Systems, second pass ─────────────────────────────────────── */ @media (max-width: 767px) { /* The "1/2/3/4" number badges (bac-gs-badge, added by wireGrowthSystemsCards) carry a native "hubspot-row-N" class too, so the -row wildcards catch them: align-content:flex-start (the multi-line-wrap fix) and justify-content: flex-start. Both are wrong here — this is a single digit centred in a 28px box, not a wrapping row. The digit was sitting hard left against the border. Excluded from both wildcards and centred on both axes explicitly. */ .bac-gs-badge { align-content: center !important; justify-content: center !important; } .page .scope-row-4 { padding-left: 0 !important; } .page .credentials-row-5 { padding-left: 0 !important; padding-right: 0 !important; } /* Growth's hero-box-2 (a direct child of .hero, distinguished from Origin's same-named-but-unrelated image layer by :has(.bac-logo-rail) — Origin's hero-box-2 holds a plain , not a rail) hidden on operator instruction. */ .hero:has(> .hero-box) .hero-box-2:has(.bac-logo-rail) { display: none !important; } /* Growth's credentials-row (the 3 stacked cards) and credentials-row-5 (the services-pill carousel right after them) carry Framer's generic [data-border="true"]::after treatment — a full-width absolute pseudo-element whose border-width reads from --border-top/-right/-bottom/-left-width custom properties (growth.css), not a literal border on the element itself. Operator instruction: drop the top/bottom lines on both at mobile. Overriding the custom properties, not border directly — the pseudo-element's own border-width is a var() lookup, so a plain `border-top:none` on the element would do nothing; the variable is what the ::after actually reads. */ .page .credentials-row, .page .credentials-row-5 { --border-top-width: 0; --border-bottom-width: 0; } } /* ── Mobile: footer — air after the mark, tighter top padding, a real gap ────── */ /* .footer-row-2 (data-stack="wide") already stacks the bac mark (.footer-col-4, the three-circle SVG) above the SOLUTIONS/CONTACT columns (.footer-row-3) at this width — but with no gap of its own, they sat flush, measured 0px between the mark's own bottom edge and the columns' top edge. Put on the mark rather than the row, so it reads as "space after the mark" and not a general row gap that would also open up wherever else this row's children change. 64px, raised from an initial 24px — operator instruction. */ @media (max-width: 767px) { .page .footer-col-4 { margin-bottom: 64px !important; } /* footer-row-2's native padding is 64px 0 32px — the SAME top inset a desktop-width footer needs to clear the rule above it, disproportionate once the row's own content is this compressed a stack. Bottom 32px is untouched, only the top drops to match. */ .page .footer-row-2 { padding-top: 32px !important; } /* footer-row-4 (Privacy Policy / Terms of Service, place-content:... space-between) carried no gap at all — space-between only spreads children when there's slack to spread INTO, and at this width there usually isn't, so the two links sat touching. */ .page .footer-row-4 { gap: 16px !important; } /* footer-row-6 (the HubSpot Diamond Partner badge) is native position:absolute — top:50%, translate(-50%,-50%) — centred on footer-row-4's FULL box height, independent of footer-row-4's own flex children (footer-row-5, the links row, and footer-col-17, the copyright line — both normal flow, stacked with the row's own gap:16px). Margin-top nudges could chase row-5 or the copyright line one at a time, but not both: centred-on-full-height math has no way to also respect a flex gap it isn't part of, and whichever sibling it was tuned against, the other one drifts into it as soon as either sibling's content height changes (confirmed: an earlier fix cleared the row-5 overlap this badge originally had, and the badge is now instead overlapping footer-col-17, which sits between row-5 and the badge in DOM order — same root cause, different sibling). Fixed at the source instead of re-tuning the offset again: make it a normal flex child like its siblings. It's already full row width (343px, matching footer-row-4/-row-5 — the horizontal centering was never "narrow badge centered in extra space", just the standard left:50%+translateX(-50%) full- width idiom), so nothing but position changes; row-4's own flex-direction: column + gap:16px take over the spacing to both neighbours, self-correcting regardless of how tall the copyright line renders. */ .page .footer-row-6 { position: static !important; top: auto !important; left: auto !important; transform: none !important; margin-top: 0 !important; } } /* ── Mobile: Growth Systems' "Scope in five days" step cards ─────────────────── */ /* .scope-row-4's three cards (Day 1 / Day 5 / Day 30+) carry an inline opacity:0.6 on the two not-yet-reached steps (.scope-col-19, .scope-col-24) — a desktop step-progress treatment (the current step reads at full contrast, the rest recede). Operator instruction: full opacity at this width, and 20px clear above the row. */ @media (max-width: 767px) { .page .scope-row-4 { margin-top: 20px !important; } .page .scope-row-4 > * { opacity: 1 !important; } }