/* Inner pages: the homepage's finish, additive only. Loads last; removing its <link> returns a page to how it was.
   Linked by every inner page (the homepage has its own mobile-polish.css). Page-specific layout rules are scoped by a page class. */

/* Small logo mark beside the name, as on the homepage. */
.nav-brand-logo{height:26px;width:auto}
@media (max-width:800px){.nav-brand-logo{height:22px}}

/* Even line breaks: no orphan words in headings, no ragged last lines in paragraphs. */
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}

/* Headlines: the homepage's weights and tightening. */
.hero h1{font-weight:800;letter-spacing:-.03em;line-height:1}
section:not(.hero) h2{font-weight:700;letter-spacing:-.02em}

/* One reading column: section headings, intros, tables and lists all start at the same left edge. */
.cost-page .section-header{text-align:left;max-width:900px;margin-left:auto;margin-right:auto}
.cost-page .section-header p{margin-left:0;max-width:44em}
.cost-page .cost-narrow,.cost-page .audit-faq-list{max-width:900px}

/* Steps keep their numbers (they are a real sequence) but line up with the column instead of centering. */
.cost-page .steps-grid{max-width:900px;margin-left:auto;margin-right:auto}
.cost-page .step{text-align:left}
.cost-page .step .step-number{margin-left:0}

/* Hero buttons: the homepage's size and weight. */
.hero-actions>a{font-size:15px;font-weight:600}

/* One corner size for buttons and fields; buttons answer a press. */
.btn-primary,.btn-secondary,.btn-card,.hero-actions>a,.contact-call,form input,form select,form textarea{border-radius:6px}
.btn-primary,.btn-secondary,.btn-card{transition:transform .15s ease,background-color .2s ease,border-color .2s ease}
.btn-primary:active,.btn-secondary:active,.btn-card:active{transform:translateY(1px) scale(.99)}
/* The app and Start pages set their own sharper corners and tighter headings; bring them to the same finish. */
.app-page .btn-primary,.start-page .btn-primary,.start-fields input,.start-fields select,.start-fields textarea{border-radius:6px}
.app-page .hero h1{letter-spacing:-.03em}
@media (prefers-reduced-motion:reduce){.btn-primary:active,.btn-secondary:active,.btn-card:active{transform:none}}

/* Trade pages: the example screenshots are 3:2; show them whole instead of cropping off the bottom. */
.trade-demo img{aspect-ratio:3/2}

/* Samples page: the in-text button matches the other buttons (one line, no glow). */
.samples-split .btn-primary{display:inline-flex;align-items:center;width:auto;min-height:56px;padding:15px 20px;font-size:15px;font-weight:600;white-space:nowrap;box-shadow:none}
.samples-illustrative{margin-top:1rem;font-size:.9rem;color:var(--muted)}

/* Client-work labels use the site's orange, not a separate green. */
.client-work .sample-label{color:var(--action-orange-deep)}

/* Client work on tablets: three cards were about 180 px wide with wrapping buttons; stack them until there is room. */
@media (min-width:601px) and (max-width:1023px){.client-work-page .sample-showcase-grid{grid-template-columns:1fr;max-width:640px}}

/* App and Start pages: their top-bar button text is longer than the homepage's "Request Audit"; tighten it on narrow phones so Menu stays fully on screen. */
@media (max-width:389px){.app-page .nav-phone,.start-page .nav-phone{padding-left:7px;padding-right:7px;letter-spacing:0}}

/* Trade pages: the homepage's section patterns (same markup classes), scoped to .trade-page.
   What a site needs: a spec list with thin rules beside a sticky heading, no boxes. */
.trade-page #services .deliverables-grid{display:block;max-width:none;padding:0;margin:0}
.trade-page #services .deliverable-item{background:none;border:0;border-radius:0;padding:22px 0;border-top:1px solid var(--card-border)}
.trade-page #services .deliverable-item:last-child{border-bottom:1px solid var(--card-border)}
.trade-page #services .deliverable-item h3{margin:0 0 6px}
.trade-page #services .deliverable-item p{margin:0;max-width:40em}
@media (min-width:901px){
  .trade-page #services{display:grid;grid-template-columns:minmax(260px,5fr) 7fr;column-gap:64px;align-items:start;padding-left:max(2rem,calc((100% - 1180px)/2));padding-right:max(2rem,calc((100% - 1180px)/2))}
  .trade-page #services .section-header{position:sticky;top:110px;text-align:left;margin:0;max-width:none}
  .trade-page #services .section-header p{margin-left:0}
}
/* Questions: thin-rule list under a left-aligned heading, no tinted boxes or side bars. */
.trade-page .faq{padding-left:max(1.5rem,calc((100% - 1180px)/2));padding-right:max(1.5rem,calc((100% - 1180px)/2))}
.trade-page .faq .section-header{text-align:left;max-width:none;margin-left:0;margin-right:0}
.trade-page .faq .section-header p{margin-left:0;max-width:44em}
.trade-page .faq .faq-grid{max-width:none;margin:0;column-gap:64px;row-gap:0}
.trade-page .faq .faq-item{background:none;border:0;border-radius:0;border-top:1px solid var(--card-border);padding:24px 0 28px}
.trade-page .faq .faq-item p{max-width:40em}
/* Guide pages (cost-guide layout): the same thin-rule FAQ rows, kept in the guide's 900px column. */
.cost-page .faq .faq-grid{column-gap:64px;row-gap:0}
.cost-page .faq .faq-item{background:none;border:0;border-radius:0;border-top:1px solid var(--card-border);padding:24px 0 28px}
/* Pricing and examples share the 1180 px column, with the heading lined up on the left. */
.trade-page #pricing .section-header,.trade-page .sample-showcase .section-header{text-align:left;max-width:1180px;margin-left:auto;margin-right:auto}
.trade-page #pricing .section-header p{margin-left:0;max-width:44em}
.trade-page .sample-showcase-shell{max-width:1180px}
@media (min-width:801px){.trade-page .pricing-grid{max-width:1180px}}
/* Phones: long intros read left-aligned, and pricing and sample rows swipe (hint and Pro-first from site-nav.js). */
.trade-page .ic-swipe-hint{display:none}
@media (max-width:800px){
  .trade-page .section-header,.trade-page .section-header h2,.trade-page .section-header p{text-align:left}
  .trade-page .section-header p{margin-left:0}
  .trade-page .sample-showcase-grid,.trade-page .pricing-grid{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:20px;padding:6px 20px 18px;margin-inline:-20px;max-width:none;scrollbar-width:none}
  .trade-page .sample-showcase-grid::-webkit-scrollbar,.trade-page .pricing-grid::-webkit-scrollbar{display:none}
  .trade-page .sample-showcase-grid>*,.trade-page .pricing-grid>*{flex:0 0 86%;scroll-snap-align:start;max-width:none;margin:0}
  .trade-page .pricing-grid{padding-top:22px}
  .trade-page .pricing .ic-swipe-hint{color:#B9B2A6}
  .trade-page .sample-showcase-grid:focus-visible,.trade-page .pricing-grid:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
  .trade-page .ic-swipe-hint{display:block;margin:.25rem 0 0;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
}

/* Landscaping's own sections line up with the same 1180 px column: left-aligned headings, readable 760 px text and
   lists starting at the column edge instead of centered; the two in-section buttons sit left on one line. */
.landscaping-page #landscaping-sites,.landscaping-page #how-customers-choose,.landscaping-page #proof,.landscaping-page .ls-note{padding-left:max(1.5rem,calc((100% - 1180px)/2));padding-right:max(1.5rem,calc((100% - 1180px)/2))}
.landscaping-page #landscaping-sites .section-header,.landscaping-page #how-customers-choose .section-header,.landscaping-page #proof .section-header{text-align:left;max-width:none;margin-left:0;margin-right:0}
.landscaping-page #landscaping-sites .section-header p,.landscaping-page #how-customers-choose .section-header p,.landscaping-page #proof .section-header p{margin-left:0;max-width:44em}
.landscaping-page .ls-copy,.landscaping-page .ls-rows,.landscaping-page .ls-links{margin-left:0;margin-right:0}
.landscaping-page .ls-compare{max-width:none;margin:0}
.landscaping-page .center-mt{text-align:left}
.landscaping-page .center-mt .btn-primary{display:inline-flex;width:auto;white-space:nowrap}
.landscaping-page .ls-note p{margin-left:0;text-align:left}

/* Service, SEO, location and design pages (one template: .contractor-seo-page, plus the design page's design-* copy).
   Every section below the hero sits on the homepage's 1180 px column with a left-aligned heading; the dark
   how-it-works band and the closing call stay centered, as on the homepage. */
:is(.contractor-seo-page,.design-page) section:not(.hero):not(.how-it-works):not(.contact){padding-left:max(1.5rem,calc((100% - 1180px)/2));padding-right:max(1.5rem,calc((100% - 1180px)/2))}
:is(.contractor-seo-page,.design-page) section:not(.hero):not(.how-it-works):not(.contact) .section-header{text-align:left;max-width:none;margin-left:0;margin-right:0}
:is(.contractor-seo-page,.design-page) section:not(.hero):not(.how-it-works):not(.contact) .section-header p{margin-left:0;max-width:44em}
:is(.contractor-seo-page,.design-page) :is(.cs-split,.design-split,.cs-compare,.design-compare){max-width:none;margin-left:0;margin-right:0}
:is(.contractor-seo-page,.design-page) :is(.audit-faq-list,.cs-links,.design-links,.ck-trades){margin-left:0;margin-right:0}
:is(.contractor-seo-page,.design-page) :is(.cs-note,.design-note) p{margin-left:0;text-align:left}
.contractor-seo-page .sample-showcase-shell,.design-page .sample-showcase-shell{max-width:1180px}
/* What it includes: the homepage spec list (thin rules, no boxes) beside a sticky heading. Only the checklist keeps numbers. */
:is(.contractor-seo-page,.design-page) .deliverables .deliverables-grid{display:block;max-width:none;padding:0;margin:0}
:is(.contractor-seo-page,.design-page) .deliverables .deliverable-item{background:none;border:0;border-radius:0;box-shadow:none;padding:22px 0;border-top:1px solid var(--card-border)}
:is(.contractor-seo-page,.design-page) .deliverables .deliverable-item:last-child{border-bottom:1px solid var(--card-border)}
:is(.contractor-seo-page,.design-page) .deliverables .deliverable-item h3{margin:0 0 6px}
:is(.contractor-seo-page,.design-page) .deliverables .deliverable-item p{margin:0;max-width:40em}
.checklist-page .deliverables .deliverable-item{display:grid;grid-template-columns:3.25rem 1fr;column-gap:12px;align-items:baseline}
.checklist-page .deliverables .deliverable-item span{grid-row:1/3;margin:0;font-variant-numeric:tabular-nums}
@media (min-width:901px){
  :is(.contractor-seo-page,.design-page) section.deliverables{display:grid;grid-template-columns:minmax(260px,5fr) 7fr;column-gap:64px;align-items:start}
  :is(.contractor-seo-page,.design-page) section.deliverables .section-header{position:sticky;top:110px;margin:0}
}
/* Phones: intros read left-aligned and the sample row swipes (hint from site-nav.js). */
:is(.contractor-seo-page,.design-page) .ic-swipe-hint{display:none}
@media (max-width:800px){
  :is(.contractor-seo-page,.design-page) .section-header,:is(.contractor-seo-page,.design-page) .section-header h2,:is(.contractor-seo-page,.design-page) .section-header p{text-align:left}
  :is(.contractor-seo-page,.design-page) .section-header p{margin-left:0}
  :is(.contractor-seo-page,.design-page) .sample-showcase-grid{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:20px;padding:6px 20px 18px;margin-inline:-20px;max-width:none;scrollbar-width:none}
  :is(.contractor-seo-page,.design-page) .sample-showcase-grid::-webkit-scrollbar{display:none}
  :is(.contractor-seo-page,.design-page) .sample-showcase-grid>*{flex:0 0 86%;scroll-snap-align:start;max-width:none;margin:0}
  :is(.contractor-seo-page,.design-page) .sample-showcase-grid:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
  :is(.contractor-seo-page,.design-page) .ic-swipe-hint{display:block;margin:.25rem 0 0;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
}
.checklist-page .ck-note{text-align:left;margin-left:0;margin-right:0}

/* Samples, sample strategy pages and client work: the same column treatment. Every section below the hero (except
   the dark band, the closing call and the client facts strip) sits on the 1180 px column with a left-aligned heading. */
:is(.samples-page,.client-work-page) section:not(.hero):not(.how-it-works):not(.contact):not(.cw-facts){padding-left:max(1.5rem,calc((100% - 1180px)/2));padding-right:max(1.5rem,calc((100% - 1180px)/2))}
:is(.samples-page,.client-work-page) section:not(.hero):not(.how-it-works):not(.contact) .section-header{text-align:left;max-width:none;margin-left:0;margin-right:0}
:is(.samples-page,.client-work-page) section:not(.hero):not(.how-it-works):not(.contact) .section-header p{margin-left:0;max-width:44em}
:is(.samples-page,.client-work-page) .sample-showcase-shell{max-width:1180px}
:is(.samples-page,.client-work-page) :is(.samples-split,.samples-compare){max-width:none;margin-left:0;margin-right:0}
.client-work-page .cw-limits-shell{max-width:44em;margin:0;text-align:left}
:is(.samples-page,.client-work-page) .samples-note p{margin-left:0;text-align:left}
/* What these demos show: the list without its boxed panel. */
.samples-page .client-promises-card{background:none;border:0;box-shadow:none;padding:0;max-width:44em;margin-left:0;margin-right:0}
/* Spec lists beside a sticky heading instead of boxes; small labels ("Goal 01", "Core", "Month 01") stay as kickers. */
:is(.samples-page,.client-work-page) .deliverables .deliverables-grid{display:block;max-width:none;padding:0;margin:0}
:is(.samples-page,.client-work-page) .deliverables .deliverable-item{background:none;border:0;border-radius:0;box-shadow:none;padding:22px 0;border-top:1px solid var(--card-border)}
:is(.samples-page,.client-work-page) .deliverables .deliverable-item:last-child{border-bottom:1px solid var(--card-border)}
:is(.samples-page,.client-work-page) .deliverables .deliverable-item span{display:block;margin:0 0 4px}
:is(.samples-page,.client-work-page) .deliverables .deliverable-item h3{margin:0 0 6px}
:is(.samples-page,.client-work-page) .deliverables .deliverable-item p{margin:0;max-width:40em}
@media (min-width:901px){
  :is(.samples-page,.client-work-page) section.deliverables{display:grid;grid-template-columns:minmax(260px,5fr) 7fr;column-gap:64px;align-items:start}
  :is(.samples-page,.client-work-page) section.deliverables .section-header{position:sticky;top:110px;margin:0}
}
/* Phones: intros read left-aligned and card rows swipe (hint from site-nav.js). */
:is(.samples-page,.client-work-page) .ic-swipe-hint{display:none}
@media (max-width:800px){
  :is(.samples-page,.client-work-page) .section-header,:is(.samples-page,.client-work-page) .section-header h2,:is(.samples-page,.client-work-page) .section-header p{text-align:left}
  :is(.samples-page,.client-work-page) .section-header p{margin-left:0}
  :is(.samples-page,.client-work-page) .sample-showcase-grid{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:20px;padding:6px 20px 18px;margin-inline:-20px;max-width:none;scrollbar-width:none}
  :is(.samples-page,.client-work-page) .sample-showcase-grid::-webkit-scrollbar{display:none}
  :is(.samples-page,.client-work-page) .sample-showcase-grid>*{flex:0 0 86%;scroll-snap-align:start;max-width:none;margin:0}
  :is(.samples-page,.client-work-page) .sample-showcase-grid:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
  :is(.samples-page,.client-work-page) .ic-swipe-hint{display:block;margin:.25rem 0 0;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
}

/* Company and form pages (about, free audit, project start, small business): the same column treatment. The facts
   strip, the orange audit band, the app note, the dark band and the closing call keep their own full-width layouts. */
:is(.about-page,.audit-page,.project-start-page,.small-business-page) section:not(.hero):not(.how-it-works):not(.contact):not(.about-facts):not(.free-audit):not(.app-offer){padding-left:max(1.5rem,calc((100% - 1180px)/2));padding-right:max(1.5rem,calc((100% - 1180px)/2))}
:is(.about-page,.audit-page,.project-start-page,.small-business-page) section:not(.hero):not(.how-it-works):not(.contact):not(.free-audit) .section-header{text-align:left;max-width:none;margin-left:0;margin-right:0}
:is(.about-page,.audit-page,.project-start-page,.small-business-page) section:not(.hero):not(.how-it-works):not(.contact):not(.free-audit) .section-header p{margin-left:0;max-width:44em}
.about-page .about-story-grid{max-width:none;margin:0}
.audit-page .audit-followup-shell{max-width:44em;margin:0;text-align:left}
:is(.audit-page,.project-start-page) :is(.audit-faq-list,.cs-links,.cs-split){margin-left:0;margin-right:0;max-width:none}
:is(.audit-page,.project-start-page) .audit-faq-list{max-width:860px}
.small-business-page .sample-showcase-shell{max-width:1180px}
.small-business-page .client-promises-card{background:none;border:0;box-shadow:none;padding:0;max-width:44em;margin-left:0;margin-right:0}
/* Lists instead of boxes. Numbers stay where the content is a sequence (project steps, audit steps) or matches the
   homepage's own "What you get" (small business); About keeps its small labels as kickers. */
:is(.about-page,.project-start-page,.small-business-page) .deliverables .deliverables-grid{display:block;max-width:none;padding:0;margin:0}
:is(.about-page,.project-start-page,.small-business-page) .deliverables .deliverable-item{background:none;border:0;border-radius:0;box-shadow:none;padding:22px 0;border-top:1px solid var(--card-border)}
:is(.about-page,.project-start-page,.small-business-page) .deliverables .deliverable-item:last-child{border-bottom:1px solid var(--card-border)}
:is(.about-page,.project-start-page,.small-business-page) .deliverables .deliverable-item h3{margin:0 0 6px}
:is(.about-page,.project-start-page,.small-business-page) .deliverables .deliverable-item p{margin:0;max-width:40em}
.about-page .deliverables .deliverable-item span{display:block;margin:0 0 4px}
:is(.project-start-page,.small-business-page) .deliverables .deliverable-item{display:grid;grid-template-columns:3.25rem 1fr;column-gap:12px;align-items:baseline}
:is(.project-start-page,.small-business-page) .deliverables .deliverable-item span{grid-row:1/3;margin:0;font-variant-numeric:tabular-nums}
@media (min-width:901px){
  :is(.about-page,.project-start-page,.small-business-page) section.deliverables{display:grid;grid-template-columns:minmax(260px,5fr) 7fr;column-gap:64px;align-items:start}
  :is(.about-page,.project-start-page,.small-business-page) section.deliverables .section-header{position:sticky;top:110px;margin:0}
}
.audit-page .audit-process .deliverable-item{background:none;border:0;border-radius:0;box-shadow:none;padding:20px 0 0;border-top:1px solid var(--card-border)}
.audit-page .audit-process .deliverables-grid{max-width:none;margin-left:0;margin-right:0}
/* Small business: the homepage's question lists, pricing header and phone rows. */
.small-business-page .faq .faq-grid{max-width:none;margin:0;column-gap:64px;row-gap:0}
.small-business-page .faq .faq-item{background:none;border:0;border-radius:0;border-top:1px solid var(--card-border);padding:24px 0 28px}
.small-business-page .faq .faq-item p{max-width:40em}
.small-business-page #pricing .section-header{max-width:1180px;margin-left:auto;margin-right:auto}
@media (min-width:801px){.small-business-page .pricing-grid{max-width:1180px}}
:is(.about-page,.audit-page,.project-start-page,.small-business-page) .ic-swipe-hint{display:none}
@media (max-width:800px){
  :is(.about-page,.audit-page,.project-start-page,.small-business-page) .section-header,:is(.about-page,.audit-page,.project-start-page,.small-business-page) .section-header h2,:is(.about-page,.audit-page,.project-start-page,.small-business-page) .section-header p{text-align:left}
  :is(.about-page,.audit-page,.project-start-page,.small-business-page) .section-header p{margin-left:0}
  .small-business-page :is(.sample-showcase-grid,.pricing-grid){display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:20px;padding:6px 20px 18px;margin-inline:-20px;max-width:none;scrollbar-width:none}
  .small-business-page :is(.sample-showcase-grid,.pricing-grid)::-webkit-scrollbar{display:none}
  .small-business-page :is(.sample-showcase-grid,.pricing-grid)>*{flex:0 0 86%;scroll-snap-align:start;max-width:none;margin:0}
  .small-business-page .pricing-grid{padding-top:22px}
  .small-business-page .pricing .ic-swipe-hint{color:#B9B2A6}
  .small-business-page :is(.sample-showcase-grid,.pricing-grid):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
  .small-business-page .ic-swipe-hint{display:block;margin:.25rem 0 0;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
}

/* Design page on phones: the three package links sit on one compact row (details are on the Start page), so the hero
   is not two screens tall. */
@media (max-width:600px){
  .design-page .design-packages{display:flex;flex-wrap:wrap;gap:6px 18px;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);padding:10px 0}
  .design-page .design-packages li{border:0;padding:0}
  .design-page .design-packages a{display:inline;margin:0}
  .design-page .design-pkg-desc{display:none}
}

/* Inner pages on phones: the hero starts just below the fixed nav (its height is --nav-offset) instead of leaving ~90 px of empty dark above the kicker. */
@media (max-width:800px){body .hero{padding-top:calc(var(--nav-offset) + 2.25rem)}}
@media (max-width:800px){.app-page .hero,.start-page .hero{padding-top:calc(var(--nav-offset) + 2.25rem)}}

/* Swipe-row cards contain their own hidden screen-reader labels (position:absolute .sr-only); without this the labels in
   off-screen cards are placed against the page and widen it in Chrome on phones. */
.sample-showcase-grid>*,.pricing-grid>*{position:relative}

/* Phones of every size (the 440 pt Pro Max included): hero buttons stack full width, not capped at 320 px from 421 px up. */
@media (max-width:600px){.hero .hero-actions{display:grid;grid-template-columns:1fr}.hero .hero-actions>a{width:100%;max-width:none;margin:0}}

/* Compact pricing (same as the homepage, 2026-10-27): five distinct rows per card, the shared items once under the
   cards, short fine print at a fixed reading width. */
:is(.trade-page,.small-business-page) #pricing .pricing-card{padding:1.6rem 1.6rem 1.25rem}
:is(.trade-page,.small-business-page) #pricing .card-header{padding-bottom:1rem;margin-bottom:.4rem}
:is(.trade-page,.small-business-page) #pricing .card-features{margin-bottom:1.25rem}
:is(.trade-page,.small-business-page) #pricing .card-features li{padding:.5rem 0;font-size:.95rem;line-height:1.4;border-bottom-color:rgba(31,31,31,.08)}
.small-business-page #pricing .card-question{min-height:0;margin-top:.6rem}
@media (min-width:768px){
  .trade-page #pricing .pricing-card{grid-row:span 7}
  .small-business-page #pricing .pricing-card{grid-row:span 8}
  :is(.trade-page,.small-business-page) #pricing .card-features{grid-row:span 5}
  :is(.trade-page,.small-business-page) #pricing .card-features li{min-height:0}
}
@media (max-width:800px){
  :is(.trade-page,.small-business-page) #pricing .pricing-card{padding:1.35rem 1.25rem 1.1rem}
  :is(.trade-page,.small-business-page) #pricing .card-price{font-size:2.5rem}
}
:is(.trade-page,.small-business-page) #pricing .pricing-includes{max-width:1180px;margin:1.75rem auto 0;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.75rem}
:is(.trade-page,.small-business-page) #pricing .pricing-includes-label{margin:0;color:#f5f1e7;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
:is(.trade-page,.small-business-page) #pricing .pricing-includes ul{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;list-style:none;margin:0;padding:0}
:is(.trade-page,.small-business-page) #pricing .pricing-includes li{display:flex;align-items:center;gap:.5rem;color:#E9E2D5;font-size:.98rem}
:is(.trade-page,.small-business-page) #pricing .pricing-includes li::before{content:'\2713';color:#E5966B;font-weight:800}
:is(.trade-page,.small-business-page) #pricing .pricing-note{max-width:62em;margin:1rem auto 0 max(0px,calc((100% - 1180px) / 2));text-align:left;font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.6)}
:is(.trade-page,.small-business-page) #pricing .pricing-note a{color:rgba(255,255,255,.85);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* Start page: the two packages list only what differs; what both include sits once under them. */
.start-page .start-includes{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.75rem;margin:1.5rem 0 0}
.start-page .start-includes .pricing-includes-label{margin:0;color:var(--text-headline);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.start-page .start-includes ul{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;list-style:none;margin:0;padding:0}
.start-page .start-includes li{display:flex;align-items:baseline;gap:.5rem;color:var(--text-body);font-size:.98rem}
.start-page .start-includes li::before{content:'\2713';color:var(--action-orange);font-weight:800}
.start-page .start-includes a{color:var(--action-orange-deep);text-underline-offset:3px;text-decoration-thickness:1px}
/* Guide byline under the hero headline: who wrote it and when it was last updated */
.hero .guide-byline{color:#b9bcb1;font-size:13px;font-weight:600;letter-spacing:.02em;line-height:1.5;margin:-.75rem 0 1.25rem}
.hero .guide-byline time{color:#f5f1e7}
.hero .guide-byline span{white-space:nowrap}
@media (max-width:640px){.hero .guide-byline .gb-pub{display:none}}