straight into , with inline styles and no hook, so it is hidden by what it holds. Live prints it; the plugin stays active, only the badge goes. */ body > div:has(> a[href*="malcare.com"]) { display: none !important; } @media (max-width: 640px) { .c9 .foot-legal { flex-direction: column; align-items: flex-start; gap: 14px; } } /* --- neutralise Divi's inherited typography ------------------------------- Divi sets line-height on (1.6 -> 25.6px). The concept never sets one on its container, so every C9 element that does not declare its own inherits the browser's `normal` (~1.2) there and 25.6px here. Font sizes match exactly; only the leading differs — which is why the page reads subtly wrong rather than obviously broken. It compounds down the page: on the "why HOST" section it left the text column 33px taller and the ledger 29px shorter than the concept, so the two halves stopped lining up. Restoring `normal` on the container matches the concept exactly. Anything with its own line-height (.lead, .hero-sub, .card p, .llabel) is untouched, because those cascade over this. */ .c9 { line-height: normal; } /* Divi also gives every

a bottom margin of 1em. The concept sets margins per element, so leave the ones it declares alone and only zero the ones it does not — otherwise Divi's 1em opens gaps the design never had. */ .c9 .lrow p, .c9 .hs p, .c9 .proof-row p { margin: 0; } /* Divi pads the bottom of every heading (10px) and paragraph (~1em). The concept controls that spacing with margins instead, which it sets per element — so Divi's padding is added ON TOP of the design's own rhythm and every block grows. Zeroing the padding leaves the concept's margins in charge. This is what was making the "why HOST" text column 22px taller than its ledger and the hero 40px taller than the concept. */ .c9 h1, .c9 h2, .c9 h3, .c9 h4, .c9 h5, .c9 h6, .c9 p { padding-bottom: 0; } /* --- homepage testimonial --------------------------------------------------- The homepage carried five platform logos and nothing from a human being. HOST has two written case studies with named customers; this surfaces one. Deliberately plain: a quote from a CFO does not need a card, an avatar or a star rating to be believed, and the attribution is the part doing the work — so it gets the mono treatment the rest of C9 uses for labels, not italics. --------------------------------------------------------------------------- */ .c9 .hsay { background: var(--wash); padding: 88px 0; } .c9 .hsay .c9-wrap { max-width: 860px; } .c9 .hsay-quote { margin: 0; border: 0; padding: 0; } .c9 .hsay-quote p { margin: 0; font-size: clamp(21px, 2.3vw, 28px); line-height: 1.42; font-weight: 600; letter-spacing: -.015em; color: var(--navy); text-wrap: balance; } .c9 .hsay-cite { margin: 22px 0 26px; font-family: var(--c9-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); } @media (max-width: 700px) { .c9 .hsay { padding: 60px 0; } } /* Rotator: every slide sits in the SAME grid cell, so the box is always as tall as the longest quote and nothing below it moves when the rotator advances. This is what the previous rule intended and never did. It said "slides stack in one box" while `[hidden] { display: none }` took the other eight out of flow entirely, leaving `min-height` as the only thing holding the space open — and 168px was the height of the SHORTEST quote, so it held nothing. The section swung between 484px and 557px as it rotated, shoving "Who this is for" and every section under it up and down the page. That was survivable while this section was sixth on the homepage and one quote in seven was tall. It moved to second on 11 Aug 2026 and three Google reviews were added, making it four in nine — a 73px jolt directly under the hero. `display: block` overrides the UA's `[hidden] { display: none }` so the slide keeps its cell; `visibility: hidden` is what actually hides it, and it hides from the accessibility tree too, which is the behaviour c9-home.php's markup comment relies on. The JS goes on toggling `hidden` and needs no change. */ .c9 .hsay-rot { position: relative; display: grid; } .c9 .hsay-slide { margin: 0; grid-area: 1 / 1; } .c9 .hsay-slide[hidden] { display: block; visibility: hidden; } .c9 .hsay-slide.is-on { animation: c9-say-in .45s ease both; } @keyframes c9-say-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .c9 .hsay-cite { margin: 22px 0 0; } .c9 .hsay-dots { display: flex; gap: 10px; margin: 26px 0 24px; } .c9 .hsay-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(11, 43, 84, .22); cursor: pointer; transition: background .15s, transform .15s; } .c9 .hsay-dot:hover { background: rgba(11, 43, 84, .42); } .c9 .hsay-dot.is-on { background: var(--gold); transform: scale(1.25); } .c9 .hsay-dot:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; } /* The mobile `min-height: 250px` that was here is gone with the desktop one. The grid now sizes to the tallest slide at whatever width it is asked to, so a hard-coded floor can only be wrong in one of two directions: too small and it does nothing, too large and it adds dead space under a short quote. */ @media (prefers-reduced-motion: reduce) { .c9 .hsay-slide.is-on { animation: none; } } /* --- platform row: say what the relationship is ----------------------------- .proof-more is a separate section so .proof itself still measures identical to the approved concept — see the comment in c9-home.php. It has to LOOK like one block, and it did not. .proof-more had no background, so the page's paper (#FBFAF7) showed through against .proof's cream (#F1F1EA) — and .proof drew a border-bottom as well, so a single thought was split by a colour change AND a rule, with the negative margin then pulling the sentence hard against that rule. It read as two unrelated strips. So .proof-more carries the same background, and the rule moves to the bottom of the pair — where the block actually ends. Nothing about .proof's own geometry changes, which is the point of keeping them separate: the concept comparison still measures what it was built to measure. */ .c9 .proof { border-bottom: 0; } /* The names were the concept's LOGO grey (#97a0b3), which was right when this row held muted partner marks — you dim a logo wall so it does not shout over the copy. As three words of plain text the same grey reads as disabled, and this row is meant to be proof. Navy, like every other name on the page. Geometry is untouched, so --compare-concept still measures what it measures. */ .c9 .proof-name { color: var(--navy); } .c9 .proof-more { padding: 0 0 46px; margin-top: -18px; background: var(--wash); border-bottom: 1px solid var(--line); } .c9 .proof-note { margin: 18px auto 0; max-width: 62ch; text-align: center; font-size: 14.5px; line-height: 1.6; color: var(--mut); } .c9 .proof-note a { display: inline-block; margin-left: 4px; font-family: var(--c9-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-text); text-decoration: none; border-bottom: 1px solid rgba(130, 103, 0, .35); } .c9 .proof-note a:hover { color: var(--ink); border-bottom-color: var(--ink); } /* --- who this is for -------------------------------------------------------- Three rows rather than three cards: the page already has a four-card grid in "What we do", and a second grid directly above it reads as a repeat of the same idea rather than a different one. */ .c9 .hwho { padding: 76px 0 8px; } .c9 .hwho-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; } .c9 .hwho-list li { padding: 20px 0; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.6; color: var(--mut); max-width: 72ch; } .c9 .hwho-list li:last-child { border-bottom: 1px solid var(--line); } .c9 .hwho-list strong { color: var(--navy); font-weight: 700; } /* The summary read as a fourth audience row that had lost its heading: three rows separated by hairlines, then this paragraph 22px under the last rule in the same measure and nearly the same weight. Separated properly and set apart from the list — the rows are a taxonomy, this is the sentence that generalises them. (A second .hwho-foot rule was added above this one before it was noticed; it lost on source order and did nothing. Removed rather than left in — a rule that never applies is worse than no rule, because the next person reads it as working.) */ .c9 .hwho-foot { margin: 40px 0 0; max-width: 64ch; font-size: 15px; line-height: 1.65; color: var(--mut); } @media (max-width: 700px) { .c9 .hwho { padding: 54px 0 4px; } } /* --- rotator controls ------------------------------------------------------- Bars, not dots. C9's vocabulary is thin gold rules and mono labels — the 50x3 accent bar on .services-title, the gold top-border on each card — so a row of short bars belongs here and a row of bordered circles did not. The bars also do the counter's job: three segments with one lit says both how many there are and which you are on, so the separate "1 / 3" went away rather than repeating it. */ .c9 .hsay-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 460px; margin: 30px 0 26px; } .c9 .hsay-bars { display: flex; gap: 8px; } .c9 .hsay-dot { width: 34px; height: 3px; padding: 0; border: 0; border-radius: 2px; background: rgba(11, 43, 84, .18); cursor: pointer; transition: background .18s, transform .18s; } .c9 .hsay-dot:hover { background: rgba(11, 43, 84, .38); } .c9 .hsay-dot.is-on { background: var(--gold); transform: scaleY(1.66); } .c9 .hsay-dot:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 5px; } .c9 .hsay-arrows { display: flex; gap: 4px; } .c9 .hsay-arrow { border: 0; background: none; cursor: pointer; padding: 4px 8px; font-size: 17px; line-height: 1; color: rgba(11, 43, 84, .4); transition: color .15s, transform .15s; } .c9 .hsay-arrow:hover { color: var(--navy); } .c9 .hsay-arrow[data-c9-prev]:hover { transform: translateX(-2px); } .c9 .hsay-arrow[data-c9-next]:hover { transform: translateX(2px); } .c9 .hsay-arrow:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; } @media (max-width: 700px) { .c9 .hsay-nav { max-width: none; gap: 16px; } .c9 .hsay-dot { width: 28px; } /* Twelve quotes are twelve bars: at 390px they ran past the edge and took the arrows off-screen (host-visual-check, 29 Sep 2026). They share the row instead. */ .c9 .hsay-bars { flex: 1 1 auto; min-width: 0; gap: 6px; } .c9 .hsay-dot { flex: 1 1 0; width: auto; min-width: 6px; } } /* Skip link. Off-screen rather than display:none, because a hidden element is not focusable and a skip link that cannot be focused is decoration. It comes back on :focus-visible only, so a mouse user never sees it — and it sits above the header's own stacking context, which is sticky. */ .c9 .c9-skip { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: 12px 18px; background: var(--navy); color: #fff; font-weight: 600; text-decoration: none; border-radius: 0 0 6px 0; } .c9 .c9-skip:focus, .c9 .c9-skip:focus-visible { left: 0; } /* The target must not draw a focus ring of its own — the reader has arrived, there is nothing to indicate. */ .c9 #c9-main:focus { outline: none; } /* --------------------------------------------------------------------------- The sticky header, which was not sticky. `.c9 .site` carries `position: sticky` straight from the approved concept and it has never worked on WordPress. Three separate reasons, all invisible to a query — the computed style says `sticky` on every page while the header scrolls away: 1. `top: var(--hc-bar-h)` and the variable is not defined here, so `top` computes to `auto` and a sticky element with no offset never engages. In the concept that variable is 44px — the height of the CONCEPT GALLERY's own chrome bar, which exists only in the demo. On the real site it is 0. The same undefined variable silently broke two more rules the generated sheet carries: `.shead`'s sticky offset and `.sgroup`'s scroll-margin, so every in-page anchor on the services hub was landing without its offset. 2. A sticky element only travels inside its own containing block, and Theme Builder renders the header into a stack of Divi wrappers that are all exactly 75px tall. `.c9 .site` had nowhere to move. The element that CAN travel is Divi's own `.et-l--header`, whose containing block is `#et-boc` — the full height of the page. 3. `#page-container` is `overflow-x:hidden; overflow-y:auto`, which makes it the nearest scrolling ancestor. It is exactly as tall as its content so it never scrolls, and the sticky never resolves. `clip` still clips horizontally without creating a scroll container. The blog templates already carry this fix for the sidebar; it needs to be sitewide. --------------------------------------------------------------------------- */ .c9 { --hc-bar-h: 0px; } /* The admin bar is fixed for logged-in editors and would sit on top of the header. Below 600px WordPress lets it scroll away, so there is nothing to clear. */ body.admin-bar .c9 { --hc-bar-h: 32px; } @media (max-width: 782px) { body.admin-bar .c9 { --hc-bar-h: 46px; } } @media (max-width: 600px) { body.admin-bar .c9 { --hc-bar-h: 0px; } } /* `html body` for specificity: Divi's own `#page-container { overflow-x:hidden; overflow-y:auto }` scores the same and loads afterwards, so a plain `#page-container` rule lost on every page. It only appeared to work on posts, where the blog sidebar's `body.single-post #page-container` was already winning — which is exactly the kind of partial pass that reads as success. */ html body #page-container { overflow-x: clip; overflow-y: visible; } #page-container > .et-boc > .et-l--header, #page-container > .et-l--header { position: sticky; top: 0; z-index: 40; } body.admin-bar #page-container > .et-boc > .et-l--header, body.admin-bar #page-container > .et-l--header { top: 32px; } @media (max-width: 782px) { body.admin-bar #page-container > .et-boc > .et-l--header, body.admin-bar #page-container > .et-l--header { top: 46px; } } @media (max-width: 600px) { body.admin-bar #page-container > .et-boc > .et-l--header, body.admin-bar #page-container > .et-l--header { top: 0; } } /* Footer social channels. A plain row under the contact lines rather than icons: the footer already carries the wordmark, the tagline, a phone number and an inbox in that column, and four icon glyphs would read as clutter next to them. Same .tlink treatment as the phone and the inbox, so the column reads as one list of ways to reach HOST. */ .c9 .foot-social { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; } .c9 .foot-social a { font-size: 14px; } /* --- services hub: the index strip ------------------------------------------ c9.css styles `.shero-toc a` as the column itself — flex, padding, a divider rule on the right. The strip now holds a heading link plus a list of service links, so the column moves to `.toc-col` and the generated rules have to be taken back off the anchors, or every service name draws its own divider. Not a redesign of the strip: same grid, same dividers, same rhythm. It is the same component carrying the list it always had room for. */ .c9 .shero-toc { grid-template-columns: repeat(4, 1fr); } .c9 .shero-toc a { display: inline; padding: 0; border-right: 0; } .c9 .shero-toc .toc-col { display: flex; flex-direction: column; gap: 6px; padding: 26px 24px 30px 0; border-right: 1px solid var(--line-dark); } .c9 .shero-toc .toc-col:last-child { border-right: 0; } .c9 .shero-toc .toc-col + .toc-col { padding-left: 24px; } .c9 .shero-toc .toc-head { display: flex; flex-direction: column; gap: 6px; text-decoration: none; } .c9 .shero-toc .toc-head:hover .toc-name { color: #fff; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; } .c9 .shero-toc .toc-list { list-style: none; margin: 12px 0 0; padding: 0; } .c9 .shero-toc .toc-list li { margin: 0 0 5px; } .c9 .shero-toc .toc-list a { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .72); text-decoration: none; } .c9 .shero-toc .toc-list a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; } @media (max-width: 980px) { .c9 .shero-toc { grid-template-columns: repeat(2, 1fr); } .c9 .shero-toc .toc-col:nth-child(2) { border-right: 0; } .c9 .shero-toc .toc-col:nth-child(n+3) { border-top: 1px solid var(--line-dark); } .c9 .shero-toc .toc-col:nth-child(odd) { padding-left: 0; } } @media (max-width: 620px) { .c9 .shero-toc { grid-template-columns: 1fr; } .c9 .shero-toc .toc-col { border-right: 0; padding-left: 0; } .c9 .shero-toc .toc-col + .toc-col { padding-left: 0; border-top: 1px solid var(--line-dark); } } /* --- the sticky CTA --------------------------------------------------------- Desktop: one gold button, bottom right. Mobile: a two-up bar, because tap-to-call is worth a permanent slot on a phone and worth nothing on a laptop — so the phone shows on small screens only and stays in the header on large ones. Hidden until JS decides it should show (see c9-nav.js). `[hidden]` is beaten by a class selector, so the display rule has to name the attribute too or the button flashes on screen before the script has run. */ .c9-sticky-cta[hidden] { display: none; } .c9-sticky-cta { /* One pill carrying both controls, with a single border and a single shadow. They were two separately-styled elements with a gap between them, which read as two floating things rather than one. */ background: #fff; border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 14px 34px -12px rgba(11, 43, 84, .45); padding: 5px; position: fixed; right: 28px; bottom: 28px; z-index: 90; display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(8px); /* opacity:0 alone leaves an invisible button hit-testing at bottom-right and sitting in the tab order — confirmed with elementFromPoint, which returned A.btn.gold at the top of the page. visibility takes it out of both, and is transitionable (unlike display) so the fade still runs. */ visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; } .c9-sticky-cta.is-on { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; } /* Two classes each, so this ties with `.c9-sticky-cta.is-on` — and ties are broken by element count next, which the `body` here supplies. Source order never gets a say, so this holds wherever it sits in the file. */ body.c9-nav-open .c9-sticky-cta { opacity: 0; visibility: hidden; pointer-events: none; } .c9-sticky-cta .c9-sticky-call { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px 0 14px; font-weight: 700; font-size: 14.5px; color: var(--navy); text-decoration: none; white-space: nowrap; } .c9-sticky-cta .c9-sticky-call:hover { color: var(--gold-text); } .c9-sticky-cta .btn.gold { box-shadow: none; white-space: nowrap; border-radius: 4px; } @media (max-width: 780px) { /* A bar, not a floating button: at this width a circle or a pill in the corner sits on top of body copy, and the bar gives the phone number somewhere to be. */ .c9-sticky-cta { left: 0; right: 0; bottom: 0; gap: 0; background: #fff; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: 0 -6px 22px -12px rgba(11, 43, 84, .35); padding: 10px 14px; transform: translateY(100%); } .c9-sticky-cta.is-on { transform: none; } .c9-sticky-cta .c9-sticky-call { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; background: none; border: 0; box-shadow: none; border-radius: 0; padding: 12px 14px; font-size: 14px; font-weight: 700; color: var(--navy); text-decoration: none; white-space: nowrap; } .c9-sticky-cta .btn.gold { flex: 1 1 auto; justify-content: center; box-shadow: none; } /* NO padding-bottom here. It was added so the bar would not cover the last of the page — but the bar now stands down whenever the footer is on screen, and the footer carries a tel: link and a Contact link on every page. So the padding never protected anything and simply left a 72px white strip below the navy footer, sitewide. Measured at maximum scroll on six templates: the bar is off on all of them. */ } /* The custom Calendly embed (#host_calendly_embed, on sales-tax-registration-new and -new-calendly) collapsed to Calendly's 150px fallback on staging: the 700px its container gets on production lives in Divi page-specific custom CSS, which porting flattens away — same class of loss as the referral-program dark section. Production measures 700px (checked 13 Aug 2026); match it. */ .c9 #host_calendly_embed { height: 700px; } /* --- Legal pages (Kyle, 14 Sep 2026) -------------------------------------- Footer links on every page, the version line under the h1, no sales chrome on a terms page, and a print layout that is the document alone. */ .c9 .foot-legal-links { display: flex; flex-wrap: wrap; gap: 18px; } .c9 .foot-legal-links a { font-size: 13px; color: rgba(255, 255, 255, .7); text-decoration: none; } .c9 .foot-legal-links a:hover { color: #fff; text-decoration: underline; } .c9 .phero .legal-version, .c9 .legal-version { font-family: var(--c9-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; } .c9 .phero-sub.legal-version { color: var(--gold); } .c9 .legal-note { padding: 14px 18px; border: 1px dashed var(--gold); background: rgba(227, 178, 0, .06); } .c9 .legal-print, .c9 .legal-actions { margin: 22px 0 34px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .c9 .legal-printbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--navy); text-decoration: underline; cursor: pointer; } .c9 .legal-printbtn:hover { color: var(--gold-text); } body.c9-legal .c9 section.band { display: none; } body.c9-legal .c9-sticky-cta { display: none; } /* Kyle's final text, 2 Nov 2026: "707-GET-HOST" broke at 390. */ body.c9-legal .c9 .c9-prose a[href^="tel:"] { white-space: nowrap; } body.c9-legal .c9 .phero .btn, body.c9-legal .c9 .phero .tlink { display: none; } /* /legal/ and the versions pages are a short list of links and nothing else. Kyle, 3 Nov 2026: the text "sits in a narrow column on the left with empty space on the right". So the list runs across the page as cards, the home page's card style, as many across as there are (up to four), the whole card a link. The documents themselves have more than a list, so this misses them. */ body.c9-legal .c9 .c9-prose > ul:only-child { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 20px; margin: 0; } body.c9-legal .c9 .c9-prose > ul:only-child > li { margin: 0; padding: 26px 26px 24px; background: #fff; border: 1px solid var(--line); text-wrap: balance; transition: border-color .18s, box-shadow .18s; } body.c9-legal .c9 .c9-prose > ul:only-child > li::before { left: -1px; top: -1px; width: 44px; height: 3px; } body.c9-legal .c9 .c9-prose > ul:only-child > li > a { font-weight: 700; color: var(--navy); box-shadow: none; padding-bottom: 0; } body.c9-legal .c9 .c9-prose > ul:only-child > li > a::after { content: ""; position: absolute; inset: 0; } body.c9-legal .c9 .c9-prose > ul:only-child > li:hover { border-color: rgba(11, 43, 84, .32); box-shadow: 0 20px 44px -26px rgba(11, 43, 84, .4); } body.c9-legal .c9 .c9-prose > ul:only-child > li:hover > a { color: var(--gold-text); } @media (max-width: 980px) { body.c9-legal .c9 .c9-prose > ul:only-child { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } } @media print { body.c9-legal .c9 header, body.c9-legal .c9 footer, body.c9-legal .c9-sticky-cta, body.c9-legal .c9 .legal-print, body.c9-legal .c9 .legal-actions, body.c9-legal .c9 .legal-note, body.c9-legal .c9 .band { display: none !important; } body.c9-legal .c9, body.c9-legal .c9 .phero { background: #fff !important; color: #000 !important; } body.c9-legal .c9 .phero h1, body.c9-legal .c9 .phero-sub { color: #000 !important; } body.c9-legal .c9 .c9-prose { max-width: none; } body.c9-legal .c9 a { color: #000; text-decoration: none; } body.c9-legal .c9 a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; } } /* The rate lookup: one embed (port_pages.php drops the phone-only copy), so it takes the phone copy's 800px itself below 768px. */ .c9 iframe.c9-rate-lookup { display: block; width: 100%; height: 450px; border: 0; } @media (max-width: 767px) { .c9 iframe.c9-rate-lookup { height: 800px; } } /* The sticky bar's short label. Below 480px the bar carries the phone number and the button side by side, and "Get a free consultation" ran 26px past the right edge at 375 (Kyle, 2 Oct 2026). The button may also shrink, so a narrower phone squeezes the padding rather than the arrow. */ .c9-sticky-cta .c9-sticky-short { display: none; } @media (max-width: 480px) { .c9-sticky-cta .c9-sticky-long { display: none; } .c9-sticky-cta .c9-sticky-short { display: inline; } .c9-sticky-cta .btn.gold { min-width: 0; } } /* Home hero: the line between the standfirst and the button is gone (Kyle, 2 Oct 2026), so the button takes the gap the line used to leave. */ .c9 .hero .hero-sub + .hero-cta { margin-top: 38px; } /* Below 360px even the short label is tight: the arrow sat on the button's edge at 320. The phone link gives up some padding and the arrow goes. */ @media (max-width: 359px) { .c9-sticky-cta .c9-sticky-call { padding: 12px 10px 12px 2px; } .c9-sticky-cta .btn.gold .arr { display: none; } } /* FAQ plan table. HOST's own style.css gives every cell on the FAQ page a 225px floor (`.page-id-4009 .entry-content tr td`, !important, inside a mobile media query), sized for three plans. With Essentials gone (Kyle, 2 Oct 2026) two columns fit a phone, so the floor goes and the table stops scrolling sideways. */ body.page-id-4009 .entry-content .c9 td { min-width: 0 !important; } /* Sales tax calculator: the tool beside the rail of why rates are hard, the note under the tool in the small print it is. */ .c9 .pl-calc { scroll-margin-top: 96px; } .c9 .pl-calc-tool iframe.c9-rate-lookup { background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--navy); } .c9 .c9-prose .pl-calc-note { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--mut); } /* Option cards that end on their own action (consultation call: the free call books, the paid call goes to the form). The action sits on the card's bottom edge, so two cards of different lengths still end level. */ .c9 .pl-card--act { display: flex; flex-direction: column; } .c9 .c9-prose .pl-card--act > .pl-card-act { margin-top: auto; padding-top: 24px; font-weight: 600; color: var(--navy); } /* A short list inside an option card: the three things to bring to the free call. Divi's own list spacing (23px under the ul) doubled the gap around it. */ .c9 .c9-prose .pl-card > .pl-card-list { margin: 10px 0 0; padding: 0; } .c9 .c9-prose .pl-card > .pl-card-list > li { margin-top: .2em; } .c9 .c9-prose .pl-card > .pl-card-list + p { margin-top: 14px; } /* Gravity form 1 (registration, exposure, nexus analysis, filings, contact), dressed as the Salesforce form card on the other service pages: the same font, field height, 10px between fields, a three-line message box and the same Submit. Round 6 left these A- ("other font, small Submit, uneven gaps on a phone"). Why the selectors are this heavy. Divi's generated sheet styles these fields with `.globalform_wrapper.gform_wrapper.gravity-theme .gfield input[type="text"]` (five classes: Open Sans, 9px 10px padding, a 15px bottom margin that is the row gap) and the Submit with `div#gform_wrapper_1 input#gform_submit_button_1 { padding: 8px 15px !important }`. Gravity's own phone rule sets line-height 2 through four :not() attributes. Seven classes beat the first two; the Submit needs the ids and !important, as Divi's own rule does. */ .c9 .c9-prose .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="text"], .c9 .c9-prose .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="email"], .c9 .c9-prose .gform_wrapper.gform_wrapper.gravity-theme .gfield input[type="tel"], .c9 .c9-prose .gform_wrapper.gform_wrapper.gravity-theme .gfield textarea { font-family: var(--c9-sans); font-size: 16px; line-height: 20px; min-height: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 5px; margin: 0; } .c9 .c9-prose .gform_wrapper.gform_wrapper.gravity-theme .gfield textarea { height: 86px; min-height: 86px; field-sizing: content; } .c9 .c9-prose .gform_wrapper.gform_wrapper.gravity-theme .gform_fields { row-gap: 10px; grid-row-gap: 10px; } .c9 .c9-prose .gform_wrapper.gform_wrapper.gravity-theme .ginput_complex > span { margin-bottom: 0; } @media (max-width: 640px) { .c9 .c9-prose .gform_wrapper.gform_wrapper.gravity-theme .ginput_complex > span:not(:last-child) { margin-bottom: 10px; } } .c9 .c9-prose div#gform_wrapper_1 input#gform_submit_button_1 { font-family: var(--c9-sans) !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 1px; line-height: 20px !important; min-height: 0 !important; padding: 13px 22px !important; } /* HandL's six UTM and gclid fields are empty grid rows, and with a row gap each one added 10px under the spam check. Hidden fields still submit, so the tracking is untouched. The spam check gets the Salesforce card's space above it. */ .c9 .c9-prose .gform_wrapper.gform_wrapper.gravity-theme .gfield[class*="gfield--type-handlfree"] { display: none; } .c9 .c9-prose .gform_wrapper.gform_wrapper.gravity-theme .gfield--type-captcha { margin-top: 22px; } /* Contact at tablet width: the page is one column, the calendar column is wide enough that Calendly draws its own bordered card, and ours around it made a double frame. Ours steps aside there; on phones and in the two-column desktop layout Calendly draws none, so ours stays. */ @media (min-width: 720px) and (max-width: 980px) { /* Calendly insets its card 18px each side and about 66px from the top of its frame, and never draws it wider than 680px (centred beyond that). So both columns stop at 680px here and the widget is pulled out by the inset: the calendar card then sits flush under the form card, both starting at the heading's edge, instead of floating 85px down and off to the middle. */ .c9 .c9-prose .pl-pair--even > .pl-col { max-width: 680px; } .c9 .c9-prose .pl-col > .calendly-inline-widget { background: none; border: 0; margin: -48px -18px 0; } } /* --- Hero card ------------------------------------------------------------- 'hero_card' in c9_page_meta(): a white card in the hero's empty right half (Kyle, 2 Oct 2026). Copy on the left as before, the card beside it at desktop, under it below 980px. */ .c9 .phero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: center; } .c9 .phero-card { position: relative; z-index: 1; background: #fff; color: var(--ink); border-top: 3px solid var(--gold); border-radius: 4px; padding: 28px 30px 26px; box-shadow: 0 22px 48px -24px rgba(0, 0, 0, .55); } .c9 .phero-card p { margin: 0; } .c9 .phero-card .phc-k { font-family: var(--c9-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); } .c9 .phero-card .phc-price { margin-top: 12px; display: flex; align-items: baseline; gap: 10px; } .c9 .phero-card .phc-n { font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--navy); } .c9 .phero-card .phc-l { font-family: var(--c9-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); } .c9 .phero-card .phc-terms { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--mut); } .c9 .phero-card .phc-g { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; color: var(--ink); } .c9 .phero-card .phc-g strong { color: var(--navy); } .c9 .phero-card .phc-more { margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--navy); } .c9 .phero-card .phc-more a { color: var(--navy); text-decoration: none; box-shadow: inset 0 -1px 0 0 var(--gold); } .c9 .phero-card .phc-more a:hover { color: var(--gold-text); } @media (max-width: 980px) { .c9 .phero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } .c9 .phero-card { max-width: 420px; } } /* --- Plan cards (sales tax filings) ---------------------------------------- */ .c9 .pl-plans { scroll-margin-top: 96px; } .c9 .c9-prose .pl-plans > .pl-pair { margin-top: 26px; } .c9 .c9-prose .pl-plan .pl-plan-price { margin-top: 10px; display: flex; align-items: baseline; gap: 10px; } .c9 .pl-plan .plp-n { font-size: 48px; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--navy); } .c9 .pl-plan .plp-l { font-family: var(--c9-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); } .c9 .pl-plan .plp-q { font-size: 28px; line-height: 48px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); } .c9 .c9-prose .pl-plan .pl-plan-terms { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--mut); } .c9 .c9-prose .pl-plan .pl-plan-lead { margin-top: 22px; font-weight: 600; color: var(--navy); font-size: 16px; } .c9 .c9-prose .pl-plan .pl-plan-list { margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); } .c9 .c9-prose .pl-plan .pl-plan-lead + .pl-plan-list { margin-top: 10px; padding-top: 0; border-top: 0; } .c9 .c9-prose .pl-plan .pl-plan-list > li { margin-top: .25em; font-size: 16px; line-height: 1.55; } .c9 .c9-prose .pl-plan .pl-plan-lead { padding-top: 18px; border-top: 1px solid var(--line); } .c9 .c9-prose .pl-plan .c9-tbc { margin: 18px 0 0; font-size: 14px; } /* --- Form beside "What happens next" (sales tax filings) ------------------- */ /* c9-prose.css loads after this sheet and sets .pl-pair's columns with the same two classes, so these carry .c9-prose to win, and repeat the one-column rule below 980px themselves. */ .c9 .pl-pair--form { scroll-margin-top: 96px; } .c9 .c9-prose .pl-pair--form { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; } @media (max-width: 980px) { .c9 .c9-prose .pl-pair--form { grid-template-columns: minmax(0, 1fr); gap: 48px; } } .c9 .c9-prose .pl-pair--form .pl-col > * + * { margin-top: 18px; } .c9 .c9-prose .pl-next { padding-top: 0; } .c9 .c9-prose .pl-next .pl-next-steps { margin: 18px 0 0; } .c9 .c9-prose .pl-next .pl-next-steps > li { margin-top: 18px; padding-left: 44px; font-size: 16px; line-height: 1.6; } .c9 .c9-prose .pl-next .pl-next-steps > li:first-child { margin-top: 0; } .c9 .c9-prose .pl-next .pl-next-steps > li strong { display: block; color: var(--navy); font-size: 17px; margin-bottom: 2px; } /* No one-word last lines. Visual QA of twelve pages, 3 Oct 2026, found them in hero headlines ("We have seen this audit / before."), section headings, the band ("Start with a free / consultation.") and the opening text under the headline ("answers / it."). Headings balance their lines; paragraphs only avoid a lone last word. Browsers without text-wrap keep today's wrapping. */ .c9 .phero h1, .c9 .c9-prose h2, .c9 .c9-prose h3, .c9 .band h2, .c9 .pl-band .pl-band-line { text-wrap: balance; } /* Home, "27 years. One thing. Sales / tax." between 541 and 860px (4 Oct 2026). */ .c9 .since-lead h2 { text-wrap: balance; } /* Home, Why HOST, 15 Oct 2026: the ledger is gone (it repeated the strip under the hero), so the paragraph and its link sit in the right column, level with the heading rather than the eyebrow above it. */ .c9 .since-body { padding-top: 38px; } .c9 .since-body .lead { max-width: 52ch; margin: 0 0 26px; } @media (max-width: 860px) { .c9 .since-grid { gap: 28px; } .c9 .since-lead h2 { margin-bottom: 0; } .c9 .since-body { padding-top: 0; } } .c9 .phero-sub, .c9 .c9-prose p, .c9 .c9-prose li, .c9 .band-lead, .c9 .pl-band .pl-band-sub { text-wrap: pretty; } /* The opening section's heading starts level with the rail beside it. The prose top margin put the heading 65px below the rail's top rule on every service page (VDA most visibly). The side-panel version of this rule is in c9-prose.css; this one covers the ledger rail. */ .c9 .c9-prose .pl-grid > .pl-copy > :first-child { margin-top: 0; } /* Filings follow-ups, 3 Oct 2026. */ .c9 .c9-nowrap { white-space: nowrap; } .c9 .phero-card p, .c9 .pl-rail .plr-l { text-wrap: pretty; } .c9 .c9-prose .pl-plan .c9-tbc { margin-bottom: 8px; } /* HOST's old theme draws a 65x3 gold bar under every h2.pageTitle, placed absolutely with bottom: 0 from a heading that is not positioned. On /faqs/ all four landed together on the bottom edge of the How to start band. C9 headings carry no such accent, so it goes. */ .c9 .c9-prose .pageTitle::before { display: none; } /* --- Sitewide design pass, 3 Oct 2026 --------------------------------------- Kyle, 2 Oct 2026: "more two- and three-column layouts, cards and visual breaks, so the pages don't read as one long scroll." Built from the same card as the steps and the option cards (white, thin rule, navy top edge), so new pages read as the same site, not a kit of parts. */ /* Card grids: .pl-cards--2, --3 or --4 across at desktop, two at tablet, one on a phone. */ .c9 .c9-prose .pl-cards { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .c9 .c9-prose .pl-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c9 .c9-prose .pl-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* An odd card out at the end of a two-across list spans the row (About's five values, 15 Oct 2026), rather than sitting alone beside a gap. */ .c9 .c9-prose .pl-cards--2.pl-cards--odd > li:last-child:nth-child(odd) { grid-column: 1 / -1; } .c9 .c9-prose .pl-tile { margin: 0; padding: 24px 24px 26px; background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--navy); } .c9 .c9-prose .pl-cards > .pl-tile::before { display: none; } .c9 .c9-prose .pl-tile > * { margin: 0; } .c9 .c9-prose .pl-tile > * + * { margin-top: 10px; } .c9 .c9-prose .pl-tile h3 { font-size: 18px; line-height: 1.3; color: var(--navy); } .c9 .c9-prose .pl-tile p, .c9 .c9-prose .pl-tile li { font-size: 15.5px; line-height: 1.6; color: var(--mut); } .c9 .c9-prose .pl-tile .pl-tile-k { font-family: var(--c9-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); } .c9 .c9-prose .pl-tile ul { margin: 14px 0 0; padding: 0; } .c9 .c9-prose .pl-tile ul > li { margin-top: 10px; } .c9 .c9-prose .pl-tile ul > li:first-child { margin-top: 0; } .c9 .c9-prose .pl-cards + p { margin-top: 22px; } @media (max-width: 980px) { .c9 .c9-prose .pl-cards, .c9 .c9-prose .pl-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .c9 .c9-prose .pl-cards, .c9 .c9-prose .pl-cards--2, .c9 .c9-prose .pl-cards--4 { grid-template-columns: minmax(0, 1fr); } } /* Quotes as cards, two or three across. */ .c9 .c9-prose .pl-quote-cards { margin-top: 26px; display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .c9 .c9-prose .pl-quote-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .c9 .c9-prose .pl-quote-cards blockquote { margin: 0; padding: 24px 26px 24px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--gold); display: flex; flex-direction: column; } .c9 .c9-prose .pl-quote-cards blockquote p:not(.c9-cite) { font-size: 17px; line-height: 1.6; margin: 0; } .c9 .c9-prose .pl-quote-cards blockquote .c9-cite { margin-top: auto; padding-top: 16px; } @media (max-width: 980px) { .c9 .c9-prose .pl-quote-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .c9 .c9-prose .pl-quote-cards, .c9 .c9-prose .pl-quote-cards--3 { grid-template-columns: minmax(0, 1fr); } } /* Partner logos in one even row (Kyle, 2 Oct 2026): every mark in the same box, scaled to fit it, ten across at desktop, five across below. */ .c9 .c9-prose .pl-logos .c9-logo-wall { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 22px; align-items: center; margin: 26px 0 0; padding: 26px 24px; background: #fff; border: 1px solid var(--line); } .c9 .c9-prose .pl-logos .c9-logo-wall p { display: flex; justify-content: center; } .c9 .c9-prose .pl-logos .c9-logo-wall img { width: 100%; max-width: 110px !important; height: 44px; object-fit: contain; border-radius: 0; } @media (max-width: 980px) { .c9 .c9-prose .pl-logos .c9-logo-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 26px; } } @media (max-width: 480px) { /* Two across: ten marks make five even rows (three across left one alone). */ .c9 .c9-prose .pl-logos .c9-logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* The state picker on /resources/. */ .c9 .c9-prose .pl-picker { margin: 0; padding: 26px 28px 28px; background: var(--navy); border-top: 3px solid var(--gold); } .c9 .c9-prose .pl-picker label { display: block; font-family: var(--c9-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } .c9 .c9-prose .pl-picker-row { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; } .c9 .c9-prose .pl-picker select { flex: 1 1 240px; min-width: 0; height: 48px; padding: 0 14px; font-family: var(--c9-sans); font-size: 16px; color: var(--ink); background: #fff; border: 0; border-radius: 5px; } .c9 .c9-prose .pl-picker .btn { flex: 0 0 auto; height: 48px; padding: 0 22px; border: 0; cursor: pointer; font-size: 15px; } /* A navy band carrying a short list: four statements across (partner program, "What makes HOST different"). */ .c9 .c9-prose .pl-band--list .pl-band-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 28px; } .c9 .c9-prose .pl-band--list .pl-band-list > li { margin: 0; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, .22); font-size: 16px; line-height: 1.55; color: #fff; } .c9 .c9-prose .pl-band--list .pl-band-list > li::before { display: none; } @media (max-width: 980px) { .c9 .c9-prose .pl-band--list .pl-band-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .c9 .c9-prose .pl-band--list .pl-band-list { grid-template-columns: minmax(0, 1fr); } } /* Running copy above a full-width table keeps a reading measure. */ .c9 .c9-prose .pl-measure { max-width: 68ch; } /* A story beside its quote (customer stories, Secure Centric). */ .c9 .c9-prose .pl-pair--story { align-items: center; } .c9 .c9-prose .pl-quote-cards--1 { margin-top: 0; grid-template-columns: minmax(0, 1fr); } /* Pairs of short sections (about): each column's heading starts level. */ .c9 .c9-prose .pl-pair > .pl-col > h2:first-child { margin-top: 0; } /* A quote inside an option card: the card is already white. */ .c9 .c9-prose .pl-card blockquote { margin: 22px 0 0; } .c9 .c9-prose .pl-card blockquote p:not(.c9-cite) { font-size: 17px; } /* Perk tiles carry a title and at most a line. */ .c9 .c9-prose .pl-perks .pl-tile { padding: 20px 22px; } /* Sections without a layout class (heading, a line, then cards or a table): the prose h2 has no bottom margin, so the line under it sat flush. Plain sections only; a grid section's columns must not pick up a top margin. */ .c9 .c9-prose .pland > section:not([class]) > * + *, .c9 .c9-prose .pland > section.pl-logos > * + * { margin-top: 14px; } .c9 .c9-prose .pland > section:not([class]) > p + .pl-cards, .c9 .c9-prose .pland > section:not([class]) > p + .pl-quote-cards, .c9 .c9-prose .pland > section:not([class]) > h2 + .pl-cards, .c9 .c9-prose .pland > section:not([class]) > h2 + .pl-quote-cards, .c9 .c9-prose .pland > section:not([class]) > h2 + .pl-picker, .c9 .c9-prose .pland > section:not([class]) > .pl-measure + *, .c9 .c9-prose .pland > section.pl-logos > h2 + * { margin-top: 24px; } /* Two across at tablet width leaves an odd last card alone (three leaders, three resource cards, nine partner benefits): it takes the whole row. */ @media (min-width: 641px) and (max-width: 980px) { .c9 .c9-prose .pl-cards:not(.pl-cards--2) > .pl-tile:last-child:nth-child(odd) { grid-column: 1 / -1; } } /* Perks are short labels: two across even on a phone. */ @media (max-width: 640px) { .c9 .c9-prose .pl-perks.pl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .c9 .c9-prose .pl-perks .pl-tile { padding: 16px 16px 18px; } .c9 .c9-prose .pl-perks .pl-tile h3 { font-size: 16px; } } /* Home hero: copy on the left, a photograph filling the right (Noel, 5 Oct 2026, of four options: "i like opton 3"). The photo fades into the navy on its left, so the headline never sits on a hard edge, and darkens toward the bottom, where the four figures run across it. */ .c9 .hero--photo .hero-inner, .c9 .hero--photo .hero-stats { position: relative; } .c9 .hero-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 44%; margin: 0; overflow: hidden; } /* Anchored a little left of centre and high: both faces in the panel. */ .c9 .hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 45% 30%; } .c9 .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 43, 84, .88) 0%, rgba(11, 43, 84, 0) 36%), linear-gradient(90deg, var(--navy) 0%, rgba(11, 43, 84, .62) 30%, rgba(11, 43, 84, .2) 100%); } .c9 .hero--photo .hero-dots { display: none; } @media (max-width: 980px) { /* One column: there is no right half to fill, so the hero is its text. */ .c9 .hero-photo { display: none; } } .c9 .phero-card .phc-quote { margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); } .c9 .phero-card .phc-quote p { font-size: 16px; line-height: 1.55; color: var(--navy); font-weight: 500; } .c9 .phero-card .phc-quote .phc-cite { margin-top: 10px; font-family: var(--c9-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); } /* The state picker inside a hero card (resources). */ .c9 .phero-card .pl-picker label { display: block; font-family: var(--c9-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); } .c9 .phero-card .pl-picker-row { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; } .c9 .phero-card .pl-picker select { width: 100%; height: 48px; padding: 0 14px; font-family: var(--c9-sans); font-size: 16px; color: var(--ink); background: #fff; border: 1px solid rgba(11, 43, 84, .3); border-radius: 5px; } .c9 .phero-card .pl-picker .btn { justify-content: center; height: 48px; border: 0; cursor: pointer; font-size: 15px; } .c9 .phero-card .phc-quote { border-left: 0; padding-left: 0; } /* Facts in a hero card (the calculator, and the state guides' fast facts). Value over label, a rule between rows: the ledger, stacked to fit 340px. */ .c9 .phero-card .phc-rail .plr { padding: 14px 0; border-bottom: 1px solid var(--line); } .c9 .phero-card .phc-rail .plr:first-child { padding-top: 0; } .c9 .phero-card .phc-rail .plr:last-child { padding-bottom: 0; border-bottom: 0; } .c9 .phero-card .phc-rail .plr-v { display: block; font-family: var(--c9-mono); font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--navy); } .c9 .phero-card .phc-rail .plr-l { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--mut); text-wrap: pretty; } /* The audit defense side panel: its label, then the statement. */ .c9 .phero-card .phc-side .pl-side-k { margin: 0; font-family: var(--c9-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); } /* The label is an h3 by the time it renders (the heading pass promotes it). */ .c9 .phero-card .phc-side .pl-side-k + p { margin-top: 12px; font-size: 17px; line-height: 1.55; font-weight: 500; color: var(--navy); } /* The opening section without its rail is the copy alone. */ .c9 .c9-prose .pl-grid--solo { grid-template-columns: minmax(0, 1fr); } /* Hub hero cards: a word at display size (TaxMatrix, Remote), a lead quote. */ .c9 .phero-card .phc-word { margin-top: 10px; font-size: 36px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--navy); } .c9 .phero-card .phc-terms strong { color: var(--navy); } .c9 .phero-card .phc-quote--lead { margin-top: 14px; padding-top: 0; border-top: 0; } .c9 .phero-card .phc-quote--lead p { font-size: 22px; line-height: 1.4; font-weight: 600; } /* Three short sections in a row (about). */ .c9 .c9-prose .pl-pair--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } @media (max-width: 980px) { .c9 .c9-prose .pl-pair--3 { grid-template-columns: minmax(0, 1fr); gap: 40px; } } /* "Sales tax only, on purpose" takes two lines and the other two headings one, so the three paragraphs started at different heights (4 Oct 2026). Each heading holds two lines while they sit side by side. */ @media (min-width: 981px) { .c9 .c9-prose .pl-pair--3 h2 { min-height: 2.4em; min-height: 2lh; } } /* Photo breaks (about, careers, partner program): full width, 21:9. They are stock placeholders, and the reply to Kyle says so. The page does not: the staging-only label that used to sit on each photo was removed on 5 Oct 2026 (Noel: "has placeholder language arg remove that, its just for email"). */ .c9 .c9-prose .pl-photo { position: relative; margin-left: 0; margin-right: 0; margin-bottom: 0; } .c9 .c9-prose .pl-photo img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 0; } @media (max-width: 640px) { .c9 .c9-prose .pl-photo img { aspect-ratio: 4 / 3; } } /* The prose sheet's `figure { margin: 0 }` outranks `.pland > * + *`, so the photo takes the section gap itself. */ .c9 .c9-prose .pland > .pl-photo { margin-top: 72px; } @media (max-width: 980px) { .c9 .c9-prose .pland > .pl-photo { margin-top: 56px; } } /* The opening section of a service page whose rail went up into the hero: a split section, heading on the left third, copy on the right, so the section uses the page's width instead of a 62ch column with nothing beside it (Kyle, 24 Sep 2026: "one column of text"; his own fix, "split sections, headings at more than one size"). Desktop only; below 980px the heading sits over the copy as before. */ @media (min-width: 981px) { .c9 .c9-prose .pl-grid--solo > .pl-copy { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); column-gap: 64px; align-items: start; } .c9 .c9-prose .pl-grid--solo > .pl-copy > h2 { grid-column: 1; grid-row: 1 / span 12; margin: 0; font-size: clamp(28px, 2.6vw, 36px); } .c9 .c9-prose .pl-grid--solo > .pl-copy > :not(h2) { grid-column: 2; max-width: 68ch; } .c9 .c9-prose .pl-grid--solo > .pl-copy > h2 + * { margin-top: 0; } } /* Careers: seven perks. The last one takes what is left of its row, so no row ends on an empty slot (four across: it spans two; two across: it spans the row). */ .c9 .c9-prose .pl-perks > .pl-tile:last-child:nth-child(4n+3) { grid-column: span 2; } @media (max-width: 980px) { .c9 .c9-prose .pl-perks > .pl-tile:last-child:nth-child(4n+3) { grid-column: auto; } .c9 .c9-prose .pl-perks > .pl-tile:last-child:nth-child(odd) { grid-column: 1 / -1; } } /* A list in the split opening section (TaxJar): Divi's list padding left 45px above it; it takes the paragraph gap instead. */ .c9 .c9-prose .pl-grid--solo > .pl-copy > ul { margin-top: 1.15em; padding-top: 0; } .c9 .c9-prose .pl-grid--solo > .pl-copy > ul > li:first-child { margin-top: 0; } /* --- Home polish, 3 Oct 2026 ------------------------------------------------ Kyle, 2 Oct: "almost everything is left-aligned and stacked in one narrow column. That leaves a lot of empty space on the right side". */ /* Who we help: three columns at desktop, each under a navy rule, unframed so it does not repeat the four cards in What we do. Rows again below 860px. */ @media (min-width: 861px) { .c9 .hwho-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 44px; } .c9 .hwho-list li { max-width: none; padding: 22px 0 0; border-top: 2px solid var(--navy); } .c9 .hwho-list li:last-child { border-bottom: 0; } .c9 .hwho-list strong { display: block; margin-bottom: 8px; font-size: 19px; } .c9 .hwho-foot { margin-top: 36px; max-width: none; } } /* In their words: centred, a deliberate break between two left-aligned sections, with each quote centred in the rotator's fixed-height cell so the space a shorter quote leaves is split above and below it. */ .c9 .hsay .c9-wrap { text-align: center; } .c9 .hsay-slide { align-self: center; } .c9 .hsay-nav { margin-left: auto; margin-right: auto; } .c9 .hsay-nav { justify-content: center; } /* Filings: "Before you can file" sits under What happens next, as the note it is, instead of a lone paragraph between the quotes and the form. */ .c9 .c9-prose .pl-next .pl-next-note { margin-top: 28px; padding: 20px 22px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--gold); } .c9 .c9-prose .pl-next .pl-next-note h3 { margin: 0; font-size: 17px; color: var(--navy); } .c9 .c9-prose .pl-next .pl-next-note p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; } /* Both columns end on one line (Noel, 30 Sep 2026, on contact: "different vertical ends"): the form card takes the height the steps and the note need. Desktop only, where the two sit side by side. */ @media (min-width: 981px) { .c9 .c9-prose .pl-pair--form { align-items: stretch; } .c9 .c9-prose .pl-pair--form > .pl-col:first-child { display: flex; flex-direction: column; } .c9 .c9-prose .pl-pair--form > .pl-col:first-child > .pl-card { flex: 1 1 auto; } } .c9 .c9-prose .pl-next .pl-next-steps { padding-bottom: 0; } /* Unframed columns under a gold rule: the partner page's six reasons, so the page does not run two card walls back to back. */ .c9 .c9-prose .pl-cards--plain { row-gap: 34px; column-gap: 40px; } .c9 .c9-prose .pl-cards--plain > .pl-tile { background: none; border: 0; border-top: 2px solid var(--gold); padding: 18px 0 0; } /* A closing line with some weight. */ .c9 .c9-prose .pl-kicker { font-size: 19px; line-height: 1.5; font-weight: 600; color: var(--navy); } .c9 .c9-prose .pland > section:not([class]) > .pl-cards + .pl-kicker { margin-top: 30px; } /* --- Polish pass from the 13-page visual review, 3 Oct 2026 ----------------- */ /* Split opening section: a narrower heading column at a larger size, so a two-line heading beside nine lines of text no longer leaves 200px of empty column; the heading also stays in view while the text scrolls past. A section with a list in it (TaxJar) is too long to sit beside its heading, so it stacks. */ @media (min-width: 981px) { .c9 .c9-prose .pl-grid--solo > .pl-copy { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); } .c9 .c9-prose .pl-grid--solo > .pl-copy > h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1.12; position: sticky; top: 118px; align-self: start; } .c9 .c9-prose .pl-grid--solo > .pl-copy:has(> ul) { display: block; max-width: 68ch; } .c9 .c9-prose .pl-grid--solo > .pl-copy:has(> ul) > h2 { position: static; font-size: clamp(30px, 3.4vw, 42px); } .c9 .c9-prose .pl-grid--solo > .pl-copy:has(> ul) > :not(h2) { max-width: none; } .c9 .c9-prose .pl-grid--solo > .pl-copy:has(> ul) > h2 + * { margin-top: 1.15em; } /* The price block starts its text on the same line as the split text. */ .c9 .c9-prose .pl-price-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); column-gap: 64px; } } /* Navy statement bands: centred, so a short line does not leave the right half of the box empty. The list band (partner) keeps its columns. */ .c9 .c9-prose .pl-band:not(.pl-band--list) { text-align: center; } .c9 .c9-prose .pl-band:not(.pl-band--list) .pl-band-line, .c9 .c9-prose .pl-band:not(.pl-band--list) .pl-band-sub { margin-left: auto; margin-right: auto; } /* The note under the steps (matrix, notice management) stays centred as Kyle asked, except on a phone, where a six-line centred block reads badly. */ @media (max-width: 640px) { .c9 .c9-prose .pl-how-note, #main-content .c9 .c9-prose .pl-how-note { text-align: left; } } /* Hero card rail: labels wrap only when they must; on a phone the rows sit two across, so a four-fact card does not double the hero's height. */ .c9 .phero-card .phc-rail .plr-l { text-wrap: wrap; } @media (max-width: 640px) { .c9 .phero-card .phc-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; } .c9 .phero-card .phc-rail .plr, .c9 .phero-card .phc-rail .plr:first-child, .c9 .phero-card .phc-rail .plr:last-child { padding: 12px 0; border-bottom: 1px solid var(--line); } .c9 .phero-card .phc-rail .plr:nth-last-child(-n+2):nth-child(odd), .c9 .phero-card .phc-rail .plr:last-child { border-bottom: 0; } .c9 .phero-card .phc-rail .plr-v { font-size: 18px; } .c9 .phero-card .phc-rail .plr-l { font-size: 13.5px; } /* Balanced headlines broke "Your TaxJar / account, / fully managed." on a phone; at that width only a lone last word is avoided. */ .c9 .phero h1 { text-wrap: pretty; } } /* Gravity's footer padding left about 50px under Submit inside the form card, against 28px on the Salesforce forms. */ .c9 .c9-prose .gform_wrapper.gform_wrapper.gravity-theme .gform_footer { padding-bottom: 0; margin-bottom: 0; } /* One quote alone keeps a reading measure instead of running 1084px. */ .c9 .pl-quotes-grid > blockquote:only-child { max-width: 72ch; } /* A