/* ============================================================================
   C9 interior pages — hero, prose, and the Gravity Forms reskin.

   The concept covers the homepage and the services hub. Interior pages had no
   design, so this extends the same system rather than inventing a second one:
   identical tokens, identical type scale, identical rhythm. Every value here is
   derived from c9.css, not chosen fresh.

   Scoped under .c9 like everything else, so Divi-built pages are untouched.
   ========================================================================== */

/* --- interior hero ---------------------------------------------------------
   Shallower than the homepage hero — an interior page should get the reader to
   the content, not perform. Same navy field, same dot texture, ~40% the height. */
.c9 .phero {
  position: relative;
  background: var(--navy);
  color: #fff;
  padding: 78px 0 64px;
  overflow: hidden;
}
.c9 .phero::after {                       /* the concept's dot field, reused */
  content: "";
  position: absolute;
  inset: 0 0 0 58%;
  background-image: radial-gradient(rgba(227, 178, 0, .5) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  opacity: .5;
  pointer-events: none;
}
.c9 .phero > .c9-wrap { position: relative; z-index: 1; }
.c9 .phero h1 {
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.025em;
  color: #fff;
  max-width: 19ch;
}
.c9 .phero-sub {
  font-size: 18px;
  line-height: 1.62;
  color: #ffffffc4;
  max-width: 60ch;
  margin: 20px 0 0;
}
.c9 .phero .hero-cta { margin-top: 32px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.c9 .phero .tlink { color: #fff9; }
.c9 .phero .tlink:hover { color: #fff; }

/* --- prose -----------------------------------------------------------------
   One column, held to a readable measure. 68ch is the top of the comfortable
   range for body text; wider and the eye loses the line return. */
.c9 .pbody { background: var(--paper); padding: 76px 0 88px; }
.c9 .c9-prose { max-width: 68ch; }

.c9 .c9-prose > * + * { margin-top: 1.15em; }   /* one rhythm, not per-element guesses */

.c9 .c9-prose h2 {
  font-size: clamp(24px, 2.5vw, 31px);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy);
  margin-top: 2em;
}
.c9 .c9-prose h3 {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--navy);
  margin-top: 1.8em;
}
.c9 .c9-prose h4 {
  font-family: var(--c9-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-top: 1.8em;
}
.c9 .c9-prose > h2:first-child, .c9 .c9-prose > h3:first-child { margin-top: 0; }

.c9 .c9-prose p { font-size: 17px; line-height: 1.72; color: var(--mut); }

/* Long unbroken tokens — an email address, a URL — cannot wrap, so at 320px
   `tom@handsoffsalestax.com` measured 325px inside a 320px viewport and the end
   of it was clipped off the page. On booking-confirmation, where that address is
   the whole point of the page.
   `anywhere` rather than `break-word` so it only breaks when a line genuinely
   cannot fit, and only in prose — headings and the hero set their own measure. */
.c9 .c9-prose p,
.c9 .c9-prose li,
.c9 .c9-prose a { overflow-wrap: anywhere; }

/* Table cells get `break-word`, not `anywhere`, and the difference is not
   cosmetic: `anywhere` also changes how the browser computes a cell's
   MIN-CONTENT width. With it, a column can legally shrink to one character, so
   the table has no floor to resist being squeezed — which is half of why the
   nexus chart rendered 58,184px tall. `break-word` still rescues a long
   unbroken token, but the column keeps its longest word as a minimum.

   Visible in the reading, which is where it was judged: with `anywhere` the
   chart set "Alabam / a (AL)" and "exclude / d". The chart costs about 14% more
   height this way, and it is a reference table people read down — hyphenating a
   state name across two lines to save scroll is the wrong trade. */
.c9 .c9-prose td,
.c9 .c9-prose th { overflow-wrap: break-word; }
.c9 .c9-prose strong { color: var(--navy); font-weight: 600; }

/* Links carry a gold underline rather than a colour change — on a page of navy
   headings, a coloured link competes; an underline reads as a link at any size.
   :not(.btn) because this rule outguns `.c9 .btn` on element count, and its
   `padding-bottom: 1px` was collapsing the button's 14px — the text sat 13px
   low in every button inside prose (Kyle's off-centre "Learn More", 18 Aug). */
.c9 .c9-prose a:not(.btn) {
  color: var(--navy);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 0 var(--gold);
  padding-bottom: 1px;
  transition: box-shadow .15s, color .15s;
}
.c9 .c9-prose a:not(.btn):hover { color: var(--gold-text); box-shadow: inset 0 -2px 0 0 var(--gold); }

.c9 .c9-prose ul, .c9 .c9-prose ol { padding-left: 0; list-style: none; }
.c9 .c9-prose li {
  position: relative;
  padding-left: 26px;
  font-size: 17px;
  line-height: 1.72;
  color: var(--mut);
  margin-top: .6em;
}
.c9 .c9-prose ul > li::before {
  content: "";
  position: absolute;
  left: 2px; top: .72em;
  width: 7px; height: 2px;
  background: var(--gold);
}
.c9 .c9-prose ol { counter-reset: c9li; }
.c9 .c9-prose ol > li { counter-increment: c9li; }
.c9 .c9-prose ol > li::before {
  content: counter(c9li, decimal-leading-zero);
  position: absolute;
  left: 0; top: .1em;
  font-family: var(--c9-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-text);
}

.c9 .c9-prose blockquote {
  margin-left: 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--gold);
}
.c9 .c9-prose blockquote p { font-size: 19px; line-height: 1.6; color: var(--navy); }

.c9 .c9-prose img { max-width: 100%; height: auto; display: block; border-radius: 6px; }
.c9 .c9-prose figure { margin: 0; }
.c9 .c9-prose figcaption { font-family: var(--c9-mono); font-size: 12px; color: var(--mut); margin-top: 10px; }

/* Tables scroll rather than break the page — these pages carry state-by-state
   charts that are wider than the measure on a phone. */
.c9 .c9-prose .c9-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.c9 .c9-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.c9 .c9-prose th, .c9 .c9-prose td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.c9 .c9-prose th {
  font-family: var(--c9-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-text);
  border-bottom-color: var(--navy);
}
.c9 .c9-prose td { color: var(--mut); }
.c9 .c9-prose tbody tr:hover td { background: var(--wash); }

/* --- open questions in authored copy ----------------------------------------
   A rewritten page sometimes needs a fact nobody has given us — what a service
   costs, how long it takes. Writing a plausible number would be the worst
   available option: it reads as researched and ships as fact.

   So the section is written, marked .c9-tbc, and shown ONLY on staging, where
   it reads as the question it is. On production it does not render at all, so
   an unanswered question cannot reach a customer even if it is forgotten here.
   Same mechanism as the staging reCAPTCHA notice, keyed off c9_staging_body_class().
   --------------------------------------------------------------------------- */
/* Scoped to `.c9 .c9-tbc`, not `.c9 .c9-prose .c9-tbc`.

   The homepage is not prose — it is c9-home.php — so a note placed there
   inherited none of this and rendered as ordinary page copy at h2 size, in the
   middle of the homepage. A to-be-confirmed question that looks like finished
   copy is worse than no note at all: it is the exact failure this block exists
   to prevent, wearing the page's own clothes.

   `display:none` first so a block outside .c9 can never leak either. */
.c9 .c9-tbc { display: none; }

body.c9-staging .c9 .c9-tbc {
  display: block;
  margin: 2em 0;
  padding: 18px 20px;
  border: 1px dashed rgba(11, 43, 84, .3);
  border-radius: 6px;
  background: rgba(227, 178, 0, .06);
}
body.c9-staging .c9 .c9-tbc::before {
  /* Colon, not an em dash. This is our own scaffolding rather than HOST's copy,
     so it sits outside the no-dash rule on paper — but the client reads it on
     screen, and a dash here on the same page that answers his complaint about
     dashes is the wrong thing for him to notice. */
  content: "Open question: staging only, never rendered on the live site";
  display: block;
  font-family: var(--c9-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 10px;
}
body.c9-staging .c9 .c9-tbc > h2 { margin-top: 0; font-size: 20px; }
body.c9-staging .c9 .c9-tbc > p { margin-top: .6em; font-size: 15.5px; }

/* --- Gravity Forms ---------------------------------------------------------
   These pages carry the firm's actual lead forms. Left in Divi's styling they
   are the one obviously un-designed thing on an otherwise finished page, so
   they get the same treatment as everything else. Selectors are deliberately
   broad because Gravity's markup differs between versions. */
.c9 .gform_wrapper { margin: 2em 0 0; }
/* `.gravity-theme` is on the selector because Gravity ships
   `.gform_wrapper.gravity-theme .gfield_label { font-size: 16px }` — the same
   specificity as ours, loaded after ours, so it won on font-size alone. Every
   label was rendering at 16px rather than 11px while the rest of this block
   applied normally, which is why it read as C9 everywhere and was still wrong:
   mono, uppercase and gold at half again the intended size. Most forms hide
   their labels so it never showed, but referral-program asks a full-sentence
   radio question and it came out as a two-line shouting kicker.
   Since 15 Oct 2026 every label shows (Kyle: "Put labels above the fields
   instead of placeholders"), so they are plain navy text, not a kicker, and
   match the Salesforce forms' labels (c9-wp.css). */
.c9 .gform_wrapper .gfield_label,
.c9 .gform_wrapper.gravity-theme .gfield_label {
  font-family: var(--c9-sans);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
  margin-bottom: 8px;
  display: block;
}
.c9 .gform_wrapper input[type="text"],
.c9 .gform_wrapper input[type="email"],
.c9 .gform_wrapper input[type="tel"],
.c9 .gform_wrapper input[type="number"],
.c9 .gform_wrapper select,
.c9 .gform_wrapper textarea {
  width: 100%;
  font-family: var(--c9-sans);
  font-size: 16px;                 /* 16px or iOS zooms the page on focus */
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--c9-radius);
  padding: 13px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.c9 .gform_wrapper input:focus,
.c9 .gform_wrapper select:focus,
.c9 .gform_wrapper textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(11, 43, 84, .10);
}
.c9 .gform_wrapper .gform_footer input[type="submit"],
.c9 .gform_wrapper .gform_button {
  font-family: var(--c9-sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  background: var(--gold);
  border: 0;
  border-radius: var(--c9-radius);
  padding: 14px 26px;
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.c9 .gform_wrapper .gform_footer input[type="submit"]:hover,
.c9 .gform_wrapper .gform_button:hover { background: var(--gold-hover); transform: translateY(-1px); }
.c9 .gform_wrapper .gfield_required { color: var(--gold-text); }

/* The error state marked the message and not the field — and it was not ours.

   Submit the contact form empty and six red boxes appear while every input keeps
   its resting `rgba(0,0,0,.2)` border. In a two-column layout that is genuinely
   hard to read: "This field is required." and "Phone format: (###) ###-####"
   both sit in full-width boxes under a Work Email / Phone pair, with nothing
   saying which belongs to which.

   GRAVITY FORMS ALREADY DOES THIS. Its own theme.min.css carries

       .gform_wrapper.gravity-theme .gfield_error [aria-invalid="true"]
           { border: 1px solid #C02B0A }

   and it never applies, because Divi's generated et-core-unified sheet has

       .globalform_wrapper.gform_wrapper.gravity-theme .gfield input[type="text"]
           { border: 1px solid rgba(0,0,0,.2) }

   — five class-level selectors against Gravity's four, and it loads afterwards.
   So the plugin's error styling was being suppressed by the page builder, on
   every form on the site.

   The first attempt at this rule lost the same way: four classes against Divi's
   five. Class COUNT decides before source order does, so no amount of `html
   body` helps — those add element weight, which is only compared after classes.
   The doubled class is the same trick `.dvmd_tm_icon.dvmd_tm_icon` and the Divi
   post-nav rule already use here, and it is the honest one: six beats five.

   Targeting `[aria-invalid="true"]` rather than the input types means this marks
   exactly what Gravity marked and cannot drift from its semantics. Colour is not
   carrying the meaning alone — the message stays, and aria-invalid is already
   on the field for anyone not seeing the border.

   The BORDER only. A tinted background was tried and dropped rather than left in
   as a declaration that does nothing: Divi also emits

       div#gform_fields_1 .gfield input[type="text"] { background:#fff!important }

   an ID plus !important, which no class selector can beat — the trap CLAUDE.md
   already records for #left-area and #page-container. Matching it would mean
   hard-coding a form id into this stylesheet, and the border is the signal that
   was missing anyway. */
.c9 .gform_wrapper.gform_wrapper .gfield_error.gfield_error [aria-invalid="true"] {
  border: 1px solid #C02B0A;
}
.c9 .gform_wrapper.gform_wrapper .gfield_error.gfield_error [aria-invalid="true"]:focus {
  border-color: #C02B0A;
  box-shadow: 0 0 0 3px rgba(192, 43, 10, .12);
}
.c9 .gform_wrapper .validation_message,
.c9 .gform_wrapper .gfield_validation_message { color: #C02B0A; font-size: 14px; }

@media (max-width: 780px) {
  .c9 .phero { padding: 54px 0 46px; }
  .c9 .phero::after { inset: 0 0 0 30%; opacity: .3; }
  .c9 .pbody { padding: 52px 0 62px; }
}

/* Safety net for images whose Divi module never declared a width. Left alone
   they render at their natural size — the icon sets on these pages are 700px
   files displayed at 120px — and one of them swallows a whole viewport. */
.c9 .c9-prose img { max-width: 100%; height: auto; }
.c9 .c9-prose p > img:only-child { margin-inline: auto; }

/* --- accordions ------------------------------------------------------------
   Divi accordions become <details>. Native, so they work without JavaScript and
   are keyboard- and screen-reader-accessible without any ARIA of ours. */
.c9 .c9-prose details.c9-faq {
  border-top: 1px solid var(--line);
  padding: 0;
  margin-top: 0;
}
.c9 .c9-prose details.c9-faq:last-of-type { border-bottom: 1px solid var(--line); }
.c9 .c9-prose details.c9-faq > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 20px 44px 20px 0;
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
}
.c9 .c9-prose details.c9-faq > summary::-webkit-details-marker { display: none; }
.c9 .c9-prose details.c9-faq > summary::after {
  content: "+";
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--c9-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--gold-text);
  transition: transform .16s;
}
.c9 .c9-prose details.c9-faq[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.c9 .c9-prose details.c9-faq > summary:hover { color: var(--gold-text); }
.c9 .c9-prose details.c9-faq > summary:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.c9 .c9-prose .c9-faq-body { padding: 0 0 22px; }
.c9 .c9-prose .c9-faq-body > *:first-child { margin-top: 0; }
/* The answers' paragraphs ran together with no space between them, and the
   intro sat on the first question's rule (host-visual-check, 29 Sep 2026). */
.c9 .c9-prose .c9-faq-body > * + * { margin-top: 1em; }
.c9 .c9-prose :not(details) + details.c9-faq { margin-top: 20px; }
@media (prefers-reduced-motion: reduce) {
  .c9 .c9-prose details.c9-faq > summary::after { transition: none; }
}

/* --- icon items ------------------------------------------------------------
   Divi blurbs are an icon plus a heading plus a line of body. Flattened they
   become an <img> followed by an unrelated <h3>, and a column of them reads as
   random icons beside random headings. Grouped, they become a proper row. */
.c9 .c9-prose .c9-iconitem {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0 20px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.c9 .c9-prose .c9-iconitem:last-of-type { border-bottom: 1px solid var(--line); }
.c9 .c9-prose .c9-iconitem img {
  grid-row: 1 / span 2;
  width: 56px; height: auto;
  max-width: 56px;          /* overrides Divi's own 120px on these icons */
  margin: 0;
}
.c9 .c9-prose .c9-iconitem > :is(h2, h3, h4) { margin: 0; grid-column: 2; }
.c9 .c9-prose .c9-iconitem > h3 { font-size: 18px; }
.c9 .c9-prose .c9-iconitem > h4 { margin-top: 0; }
.c9 .c9-prose .c9-iconitem > p { margin: 6px 0 0; grid-column: 2; font-size: 16px; }
.c9 .c9-prose .c9-iconitem > *:not(img):not(:is(h2,h3,h4)):first-of-type { grid-column: 2; }

/* An icon item with no image should not leave a 56px hole. */
.c9 .c9-prose .c9-iconitem:not(:has(img)) { grid-template-columns: 1fr; }
.c9 .c9-prose .c9-iconitem:not(:has(img)) > * { grid-column: 1; }

@media (max-width: 560px) {
  .c9 .c9-prose .c9-iconitem { grid-template-columns: 44px 1fr; gap: 0 14px; }
  .c9 .c9-prose .c9-iconitem img { width: 44px; max-width: 44px; }
}

/* A very tall editorial image dominates the column and pushes everything below
   it off the first screen. Capping the height keeps the page readable; the
   image stays legible because these are wide photographs, not portraits. */
.c9 .c9-prose > p > img:only-child,
.c9 .c9-prose > img { max-height: 520px; object-fit: cover; }

/* Divi centres some blocks via classes rather than inline styles, which the
   extractor's inline-style strip cannot reach. The prose column is left-aligned
   by design — a centred block inside it reads as a mistake.

   The #main-content prefix is needed on the second rule: Divi's own class rules
   (.step and friends, from the child theme) carry enough specificity to beat a
   plain `.c9 .c9-prose *`, which left a three-step row centred against
   left-aligned prose on referral-program. */
.c9 .c9-prose,
.c9 .c9-prose * { text-align: left; }
#main-content .c9 .c9-prose,
#main-content .c9 .c9-prose *:not(th):not(td) { text-align: left; }
.c9 .c9-prose .c9-table-scroll th { text-align: left; }

/* Divi step rows: give them the same treatment as icon items so a 1-2-3
   sequence reads as a sequence rather than three stray centred lines. */
.c9 .c9-prose .step {
  position: relative;
  padding: 16px 0 16px 34px;
  border-top: 1px solid var(--line);
  font-size: 17px;
  color: var(--navy);
  font-weight: 600;
  counter-increment: c9step;
}
.c9 .c9-prose .step:last-of-type { border-bottom: 1px solid var(--line); }
.c9 .c9-prose { counter-reset: c9step; }
.c9 .c9-prose .step::before {
  content: counter(c9step, decimal-leading-zero);
  position: absolute; left: 0; top: 18px;
  font-family: var(--c9-mono);
  font-size: 12px; font-weight: 600;
  color: var(--gold-text);
}

/* Gravity Forms emits its own heading levels (an h2 section title followed by
   h4 field-group labels), which we never see at extraction time. Levelling them
   visually keeps the page reading correctly; the markup is the plugin's. */
.c9 .c9-prose .gform_wrapper h4,
.c9 .c9-prose .gsection_title {
  font-family: var(--c9-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--navy);
}

/* --- 404 -------------------------------------------------------------------- */
.c9 .c9-404-search { display: flex; gap: 10px; margin: 0 0 8px; max-width: 34rem; }
.c9 .c9-404-search input[type="search"] {
  flex: 1;
  font-family: var(--c9-sans);
  font-size: 16px;                       /* 16px or iOS zooms on focus */
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--c9-radius);
  padding: 13px 14px;
}
.c9 .c9-404-search input[type="search"]:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(11, 43, 84, .10);
}
.c9 .c9-404-search .btn { border: 0; cursor: pointer; }
.c9 .c9-404-links { columns: 2; column-gap: 40px; }
.c9 .c9-404-links li::before { display: none; }
.c9 .c9-404-links li { padding-left: 0; break-inside: avoid; }
@media (max-width: 560px) {
  .c9 .c9-404-search { flex-direction: column; }
  .c9 .c9-404-links { columns: 1; }
}

/* --- keep C9 winning over the legacy long-tail rules ------------------------
   c9-legacy.css styles post/archive/404 templates via `#main-content h1 {...}`,
   which carries ID specificity and beat `.c9 .phero h1`. On the 404 — a C9 page
   rendering inside those body classes — that painted the headline navy on a
   navy hero and made it invisible.

   Matching the ID specificity here rather than reaching for !important, so the
   cascade stays debuggable. */
#main-content .c9 .phero h1,
#main-content .c9 .hero h1,
#main-content .c9 .shero h1,
#main-content .c9 .band h2,
#main-content .c9 .phero h2 { color: #fff; }

#main-content .c9 .phero-sub,
#main-content .c9 .band-lead,
#main-content .c9 .lead.ondark { color: #ffffffc4; }

#main-content .c9 .eyebrow.ondark { color: var(--gold); }

#main-content .c9 .phero .tlink,
#main-content .c9 .band-alt { color: #ffffffb3; }

#main-content .c9 .btn.gold { color: var(--ink); }

/* Testimonial attribution. port_pages.php lifts author and job_title out of the
   et_pb_testimonial ATTRIBUTES — a tag-strip keeps the quote and drops who said
   it, which turns a customer testimonial into anonymous self-praise. Set in the
   micro-label register so it reads as a source, not as more of the quote. */
.c9 .c9-prose blockquote .c9-cite {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-ink, #826700);
  margin: 14px 0 0;
}
/* Was `content: "— "`, an em dash generated in front of every citation on every
   authored page that carries a blockquote.

   It is CSS rather than copy, so no grep of the PHP would ever have found it and
   the em-dash sweep of 11 Aug 2026 missed it completely. It only surfaced by
   looking at a screenshot of /customer-stories/ and reading the citations. The
   homepage rotator uses .hsay-cite and has no such rule, which is why three
   pages of automated checks all came back clean.

   The rule is dropped rather than swapped for another mark: the citation already
   reads as a citation from its own styling, and it sits directly under the quote
   it belongs to. */

/* Partner logo wall. port_pages.php wraps a run of 3+ image-only blocks in
   .c9-logo-wall — flattened out of Divi's columns they otherwise stack one per
   line, which turned ten partner logos into 976px of vertical column. */
.c9 .c9-prose .c9-logo-wall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 26px;
  margin: 28px 0 34px;
}
.c9 .c9-prose .c9-logo-wall p { margin: 0; }
.c9 .c9-prose .c9-logo-wall img {
  display: block;
  max-width: 135px;
  height: auto;
}

/* referral-program's closing CTA is styled by ID in Divi's page-specific custom
   CSS (et-core-unified-9722): #referral is white and #referral-links is
   #FFDE02 — a FOURTH legacy yellow, not among the three the sitewide retirement
   enumerates. Both were written for a dark Divi section that the port flattened
   away, so on C9's near-white prose they measure 1.28:1 against the background.
   Invisible, not merely off-brand.

   ID selectors, so the override needs the .c9 .c9-prose ancestors to win. */
.c9 .c9-prose #referral { color: var(--navy, #0B2B54); }
.c9 .c9-prose #referral-links,
.c9 .c9-prose #referral-links:hover { color: var(--gold-ink, #826700); }

/* Anchor targets lifted from Divi's module_id by port_pages.php. Zero-size, so
   they never affect layout; scroll-margin-top clears the fixed 75px header,
   which otherwise covers the thing the reader just jumped to. */
.c9 .c9-anchor {
  display: block;
  width: 0;
  height: 0;
  scroll-margin-top: 95px;
}
/* The id came from a Divi section, so HOST's page CSS for that section still
   reaches the span: on /referral-program/ #referral-first-sec carries
   "padding: 80px 0 !important", and with its neighbour that was 400px of
   blank page under the hero (found 15 Oct 2026). :not(#c9-x) adds an id's
   weight so this outranks any single-id rule, !important or not. The <p>
   the port wrapped each anchor in takes no space either. */
.c9 .c9-prose .c9-anchor:not(#c9-x) { padding: 0 !important; margin: 0 !important; border: 0 !important; }
.c9 .c9-prose p:has(> .c9-anchor:only-child) { margin: 0; padding: 0; }
/* HOST's page CSS also set a drop shadow on the referral page's opening
   paragraph and black on its form heading. */
.c9 .c9-prose #referral-para { text-shadow: none; }
.c9 .c9-prose #referral-banner { color: var(--navy, #0B2B54); }

/* A closing line that Divi sized like a heading and the extractor promoted to
   one. It is a sentence, so it reads as a slightly larger sentence — not as an
   h2 with nothing underneath it. */
.c9 .c9-prose .c9-closing {
  margin-top: 2em;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--navy);
  max-width: 58ch;
}

/* --- .pland — authored landing sections ------------------------------------
   Kyle, 13 Aug 2026, on sales-tax-filings: it "reads more like a Q&A as
   opposed to a true landing/marketing page … the copy of the page itself is
   too narrow. Maybe expanding that out a bit would solve some/all of what I
   am sensing here."

   The 68ch prose measure is right for an article and wrong for a page that
   sells. A page opts in with 'wide' => true in c9_page_meta(), which puts
   .c9-prose--wide on the prose wrapper; inside it, .pland sections take the
   full wrap width while running copy keeps a measure through .pl-copy.
   Everything derives from the existing system — same tokens, same mono
   labels, same thin rules. Piloted on sales-tax-filings; roll it to the other
   service pages only once Kyle signs the pattern off. */

.c9 .c9-prose--wide { max-width: none; }

.c9 .pland > * + * { margin-top: 72px; }
.c9 .pl-copy { max-width: 62ch; }
.c9 .pl-copy > * + * { margin-top: 1.15em; }

/* Running copy beside a ledger rail — the homepage since-grid shape, so the
   page reads as designed rather than poured. */
.c9 .pl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 72px;
  align-items: start;
}
.c9 .pl-rail { border-top: 2px solid var(--navy); }
.c9 .pl-rail .plr {
  display: grid;
  /* 132px: wide enough for a ten-character mono value ("Since 2017",
     "3 to 4 yrs") on one line. At 104px they broke mid-value. */
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.c9 .pl-rail .plr-v { font-family: var(--c9-mono); font-weight: 600; font-size: 20px; color: var(--navy); }
.c9 .pl-rail .plr-l { font-size: 14px; color: var(--mut); }

/* A side panel beside running copy: one statement under a mono label. Kyle,
   24 Sep 2026, on audit defense: "only one column of text ... Maybe adding
   something on the side panel". Same card as the steps (white, thin rule,
   navy top) so it reads as part of the page, not a callout dropped on it. */
.c9 .pl-side {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 2px solid var(--navy);
  padding: 26px 28px 30px;
}
.c9 .c9-prose .pl-side .pl-side-k {
  margin: 0;
  padding: 0;
  font-family: var(--c9-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
/* The heading beside the card keeps the prose column's top margin, which put
   it 60px below the card's top edge. Scoped to grids with a card; the ledger
   rail on the other pages reads fine with the offset. */
.c9 .c9-prose .pl-grid:has(> .pl-side) > .pl-copy > :first-child { margin-top: 0; }
.c9 .c9-prose .pl-side p {
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--navy);
}
/* Desktop only: :has() outranks the one-column rule in the 980px query, and
   unscoped it squeezed the copy to one letter per line on a phone. */
@media (min-width: 981px) {
  .c9 .pl-grid:has(> .pl-side) { grid-template-columns: minmax(0, 1fr) 360px; }
}

/* Two side by side: the free and the paid call on the consultation page, the
   form and the calendar on contact. Kyle, 24 Sep 2026: "very bland", "one
   dimensional ... no page breaks or design elements". Cards are the same card
   as the steps and the side panel. */
.c9 .pl-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}
.c9 .pl-pair--cards { align-items: stretch; }
.c9 .pl-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 2px solid var(--navy);
  padding: 28px 30px 32px;
}
.c9 .c9-prose .pl-card-k {
  margin: 0;
  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-card > * + *,
.c9 .c9-prose .pl-col > * + *,
.c9 .c9-prose .pl-cal > * + * { margin-top: 18px; }
.c9 .c9-prose .pl-card > .pl-card-k + * { margin-top: 12px; }
/* Balanced, so a two-line card heading does not leave one word on the second
   line ("book a paid / call", host-visual-check, 30 Sep 2026). */
.c9 .c9-prose .pl-card h2 { font-size: 24px; line-height: 1.25; text-wrap: balance; }
/* Contact: the calendar beside the form card gets the same frame, so the two
   ways in read as a pair. */
.c9 .pl-col > .calendly-inline-widget {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 2px solid var(--navy);
}
/* Consultation: Calendly centres its own box inside a full-width frame, so the
   heading is centred over it to read as one closing block rather than a
   left-hand heading with a calendar 140px in from it. */
.c9 .c9-prose .pl-cal > h2,
#main-content .c9 .c9-prose .pl-cal > h2 { text-align: center; }
.c9 .c9-prose .pl-col > h2:first-child,
.c9 .c9-prose .pl-card > :first-child { margin-top: 0; }
.c9 .pl-col { scroll-margin-top: 96px; }
/* Both frames end on one line (Noel, 30 Sep 2026, on contact: "different
   vertical ends"). Each column is a flex column and its frame takes the rest
   of the height, so the shorter one gains space inside, at the bottom. */
.c9 .pl-pair--even { align-items: stretch; }
.c9 .pl-pair--even > .pl-col { display: flex; flex-direction: column; }
.c9 .pl-pair--even > .pl-col > :last-child { flex: 1 1 auto; }
/* Three lines, like the service-page forms; it grows with what is typed where
   the browser supports field-sizing. */
.c9 .c9-prose .pl-pair .pl-col .gform_wrapper textarea {
  height: 96px;
  min-height: 96px;
  field-sizing: content;
}
.c9 .c9-prose .pl-contact-line p { font-size: 17px; }
.c9 .pl-cal { scroll-margin-top: 96px; }

/* The guarantee as a band rather than a paragraph. */
.c9 .pl-band { background: var(--navy); border-top: 3px solid var(--gold); padding: 44px 48px; }
/* A link inside the band: the prose link rule paints links navy, which on the
   navy band is invisible text. Same class count as that rule, later in the
   file, so source order decides it. */
.c9 .c9-prose .pl-band a { color: #fff; box-shadow: inset 0 -1px 0 0 var(--gold); }
.c9 .c9-prose .pl-band a:hover { color: var(--gold); }
.c9 .pl-band .pl-band-line {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  max-width: 30ch;
}
.c9 .pl-band .pl-band-sub { margin: 14px 0 0; font-size: 15px; color: #ffffffc4; max-width: 60ch; }

/* Numbered steps, three across.

   The numbers come from the prose sheet's own ol counter (c9li) rather than a
   counter of ours: `.c9 .c9-prose ol > li` outguns any single-class li rule
   here on element count, so a second plstep counter-increment would lose the
   property fight and never advance. The class is doubled below for the same
   reason — the prose ::before positions its number absolutely at the li's
   left edge, which is right in running copy and wrong inside a padded card. */
.c9 .pl-steps {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.c9 .pl-steps.pl-steps > li {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 2px solid var(--navy);
  margin-top: 0;
  padding: 24px 24px 28px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--mut);
}
.c9 .pl-steps.pl-steps > li::before {
  content: counter(c9li, decimal-leading-zero);
  position: static;
  display: block;
  font-family: var(--c9-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--gold-text);
  margin-bottom: 12px;
}
.c9 .pl-steps.pl-steps > li strong { display: block; color: var(--navy); font-size: 17px; margin-bottom: 6px; }
/* A closing paragraph under the steps: price, or what is included. Kyle,
   8 Sep 2026, on "What it costs" and "Included with filings" as blocks of
   their own: "feels out of place ... as if it was just thrown on the page". */
/* Centred and a size up (Kyle, 24 Sep 2026, on the matrix page: the text above
   the form "doesn't look quite right. Let's maybe try making it centered and
   maybe increasing font size"). It closes the steps, so it reads as their
   conclusion rather than a stray paragraph at the left edge. The #main-content
   selector is needed to beat the prose column's left-align rule above. */
.c9 .c9-prose .pl-how-note,
#main-content .c9 .c9-prose .pl-how-note {
  max-width: 62ch;
  margin: 36px auto 0;
  text-align: center;
  font-size: 19px;
  line-height: 1.6;
}

/* Two quotes side by side; the blockquote itself is styled by .c9-prose. */
.c9 .pl-quotes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin-top: 26px;
}
.c9 .pl-quotes-grid blockquote { margin: 0; }
.c9 .pl-quotes-more { margin-top: 22px; }

/* Price: the number at display size, the terms beside it. */
.c9 .pl-price-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-top: 26px;
}
.c9 .pl-price-fig { margin: 0; }
.c9 .pl-price-fig .plp-n {
  display: block;
  font-size: clamp(48px, 6vw, 72px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--navy);
}
.c9 .pl-price-fig .plp-l {
  display: block;
  font-family: var(--c9-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-top: 10px;
}
.c9 .pl-price-copy { max-width: 58ch; }
.c9 .c9-prose .pl-price-copy > * + * { margin-top: 18px; }

/* The closing form keeps the article measure — a wrap-width Gravity form is a
   wall of inputs. Centered as a block (Kyle, 18 Aug 2026): on a wide layout a
   left-anchored form reads as unfinished, and this rule is why every future
   wide page's form centers without a per-page rule. */
.c9 .pl-form { max-width: 68ch; margin-inline: auto; scroll-margin-top: 96px; }
/* Heading, lead, form and button sat flush on each other: the prose h2 has no
   bottom margin here. Found by host-visual-check, 29 Sep 2026, on six pages
   ("Book a call about your TaxJar account" 5px above its first field). */
.c9 .c9-prose .pl-form > * + * { margin-top: 18px; }

/* The form in a card, heading above it. Noel, 29 Sep 2026, on audit defense:
   the open form and its services list "look awful". Same card as the steps
   and the side panel. On audit defense only until Noel signs it off; rolling
   it out is adding the class to other pages' .pl-form. */
.c9 .c9-prose .pl-form--card form {
  margin-top: 22px;
  padding: 32px 32px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 2px solid var(--navy);
}
/* The services list: a small label and two compact columns, in place of a
   gold-underlined 20px heading over ten full-size rows. The markup is HOST's
   Salesforce form (checkboxes on one <p>, split by <br>), so it is styled, not
   rewritten: every field still posts. */
.c9 .c9-prose .pl-form--card .services-title {
  margin: 24px 0 10px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}
.c9 .c9-prose .pl-form--card .services-title::before { display: none; }
.c9 .c9-prose .pl-form--card .services-title + p {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.4;
}
.c9 .c9-prose .pl-form--card .services-title + p br { display: none; }
/* The other Salesforce markup (TaxJar, VDA, help desk) has no services title:
   the checkboxes follow the message field inside the same <p>, split by <br>.
   The labels go two to a row; the fields above are full width anyway. */
.c9 .c9-prose .pl-form--card form p br { display: none; }
/* A wrapping row, not inline half-width labels: two 50% inline boxes plus the
   space between them overflow the line, so they stacked one per row anyway. */
.c9 .c9-prose .pl-form--card form p:not(.services-title + p):has(> label > input[type="checkbox"]) {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
}
/* Fields keep the 10px rhythm from the row gap alone; the message box carries
   the extra space above the checkboxes, so both columns' first row lines up. */
.c9 .c9-prose .pl-form--card form p:not(.services-title + p):has(> label > input[type="checkbox"]) > :is(input, textarea) { flex: 0 0 100%; margin: 0; }
.c9 .c9-prose .pl-form--card form p:not(.services-title + p):has(> label > input[type="checkbox"]) > textarea { margin-bottom: 8px; }
.c9 .c9-prose .pl-form--card form p:not(.services-title + p) > label:has(> input[type="checkbox"]) {
  display: flex;
  align-items: center;
  flex: 0 0 50%;
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}
/* Full width: the form card spans the page instead of the centred 68ch column
   (Noel, 29 Sep 2026, audit defense), and the services use the width. */
.c9 .pl-form--wide { max-width: none; }
@media (min-width: 981px) {
  .c9 .c9-prose .pl-form--wide .services-title + p { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .c9 .c9-prose .pl-form--card form { padding: 22px 18px 20px; }
  .c9 .c9-prose .pl-form--card .services-title + p { grid-template-columns: 1fr; }
  .c9 .c9-prose .pl-form--card form p:not(.services-title + p) > label:has(> input[type="checkbox"]) { flex-basis: 100%; }
}

/* The block that hands off to the form sits in the same centred column as the
   form. Kyle, 8 Sep 2026, on nexus analysis and again on the exposure review:
   "the sections right above the form feel a bit off to me and I think it might
   be the fact that it is left-aligned ... Please make that adjustment on every
   page." Same specificity as .pl-copy, later in the file, so it wins. */
.c9 .pl-before { max-width: 68ch; margin-inline: auto; }

@media (max-width: 980px) {
  .c9 .pland > * + * { margin-top: 56px; }
  .c9 .pl-grid { grid-template-columns: 1fr; gap: 40px; }
  .c9 .pl-steps { grid-template-columns: 1fr; }
  .c9 .pl-quotes-grid { grid-template-columns: 1fr; }
  .c9 .pl-pair { grid-template-columns: 1fr; gap: 56px; }
  .c9 .pl-pair--cards { gap: 26px; }
  /* One pixel under the band's 26px, for the card's border: card text and
     band text then start on the same line (they were 5px apart). */
  .c9 .pl-card { padding: 24px 25px 28px; }
  .c9 .pl-price-grid { grid-template-columns: 1fr; gap: 20px; }
  .c9 .pl-band { padding: 32px 26px; }
  /* Below 980px the centred 68ch column is only a few pixels narrower than
     the page, so it sat 5px in from everything above it at 768px (found by
     host-visual-check, 29 Sep 2026). Full width here; the page is the measure. */
  .c9 .pl-before, .c9 .pl-form { max-width: none; }
}

/* Table typography on narrow phones — 13 Aug extended QA.
   Cells already use break-word (see above), but a value column narrower than
   "Department" still has to break mid-word; hyphens make that read as a word
   rather than a misprint. And the anchor rule's `anywhere` (needed for long
   URLs in running copy) reaches links inside table cells, which is what
   shattered the 50-state table's names into 'Massachu/setts' fragments at
   390px — inside a cell, a link takes the cell's own wrapping policy back. */
.c9 .c9-prose td { hyphens: auto; }
.c9 .c9-prose td a { overflow-wrap: break-word; }

/* Links in the hero standfirst. The intro renders in .phero-sub, OUTSIDE
   .c9-prose, so a link there had no affordance at all — on
   /thank-you-free-e-book/ the page's one action, "CLICKING HERE" to the PDF,
   read as plain bold caps and the QA called it dead text. Same underline
   device as prose links, tuned for the navy field. */
.c9 .phero-sub a {
  color: #fff;
  box-shadow: inset 0 -1px 0 0 var(--gold);
}
.c9 .phero-sub a:hover { color: var(--gold); box-shadow: inset 0 -2px 0 0 var(--gold); }