/* Generated by tools/extract-reference-css.mjs — do not edit; edit the files in styles/. */
/* ---- Reference styles (verbatim from jp-bookkeeping-reference.html) ---- */
#jp-site#jp-site .section h2{font-size:clamp(32px,4.5vw,48px);font-weight:650;line-height:1.12;letter-spacing:-1.4px}
#jp-site#jp-site .section .eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:650;letter-spacing:1.8px;margin-bottom:22px}
#jp-site#jp-site .section .eyebrow:before{content:'';display:block;width:34px;height:3px;background:currentColor;border-radius:3px;flex-shrink:0}
#jp-site#jp-site .section-head{max-width:760px;margin-bottom:38px}
#jp-site#jp-site .section-head:not(.service-heading) h2:after{content:'';display:block;width:60px;height:4px;background:var(--copper);border-radius:4px;margin-top:22px}
#jp-site#jp-site .service-heading{max-width:none;background:var(--navy);padding:38px 40px;border-radius:20px;margin-bottom:30px;position:relative;border-bottom:5px solid var(--copper)}
#jp-site#jp-site .service-heading h2{color:#fff}
#jp-site#jp-site .service-heading .eyebrow,#jp-site#jp-site .heading-accent{color:#ebbc96}
#jp-site#jp-site .path{display:flex;flex-direction:column;padding:32px;box-shadow:0 6px 22px rgba(20,40,63,.05)}
#jp-site#jp-site .path small{min-height:1.65em}
#jp-site#jp-site .path h3{font-weight:600;min-height:2.7em;display:flex;align-items:flex-start}
#jp-site#jp-site .path p{flex-grow:1;margin-top:12px}
#jp-site#jp-site .path .text-link{align-self:flex-start;margin-top:25px}
#jp-site#jp-site .service h3{font-weight:600}
@media(max-width:580px){#jp-site#jp-site .service-heading{padding:28px 25px}#jp-site#jp-site .path h3{min-height:0}#jp-site#jp-site .section h2{letter-spacing:-.8px}}
#jp-site#jp-site{border-radius:20px;overflow:clip}
#jp-site#jp-site .monogram{border-radius:12px}
#jp-site#jp-site .action{border-radius:12px}
#jp-site#jp-site .hero-image{border-radius:20px;overflow:hidden}
#jp-site#jp-site .hero-image img{border-radius:20px}
#jp-site#jp-site .hero-caption{border-radius:0 0 20px 20px}
#jp-site#jp-site .path{border-radius:18px;overflow:hidden}
#jp-site#jp-site .split-photo,#jp-site#jp-site .portrait{border-radius:20px;overflow:hidden}
#jp-site#jp-site .service{border-radius:14px}
#jp-site#jp-site blockquote{border-radius:16px}
#jp-site#jp-site .credentials,#jp-site#jp-site .slate,#jp-site#jp-site .founder,#jp-site#jp-site .cta,#jp-site#jp-site .detail-head{border-radius:20px}
#jp-site#jp-site .nav-link,#jp-site#jp-site .text-link,#jp-site#jp-site details,#jp-site#jp-site summary,#jp-site#jp-site .resource-row{border-radius:10px}
#jp-site#jp-site .top{border-radius:20px 20px 0 0}
#jp-site#jp-site .site-footer{border-radius:20px}
#jp-site{--navy:#14283f;--copper:#a65f35;--ink:#213346;--light:#f1f4f7;background:#fff;color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65}#jp-site *{box-sizing:border-box}#jp-site button,#jp-site a{font:inherit}#jp-site a{color:inherit;text-decoration:none}#jp-site button{cursor:pointer}#jp-site h1,#jp-site h2,#jp-site h3,#jp-site p{margin:0}#jp-site h1{font-size:clamp(38px,5.5vw,62px);line-height:1.08;letter-spacing:-2px;font-weight:600;color:var(--navy)}#jp-site h2{font-size:clamp(28px,3.4vw,40px);line-height:1.18;letter-spacing:-1px;font-weight:500;color:var(--navy)}#jp-site h3{font-size:22px;line-height:1.35;font-weight:500;color:var(--navy)}#jp-site p{margin-top:18px}#jp-site .wrap{max-width:1180px;margin:auto;padding:0 48px}#jp-site .top{background:var(--navy);color:#fff;font-size:12px;letter-spacing:.4px;padding:8px 0}#jp-site .top .wrap{display:flex;justify-content:space-between;gap:12px}#jp-site header{border-bottom:1px solid #e1e6ea;background:#fff}#jp-site .header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:94px}#jp-site .brand{border:0;background:none;color:var(--navy);padding:0;display:flex;align-items:center;gap:12px;text-align:left}#jp-site .monogram{border:1px solid var(--navy);font-family:Georgia,serif;font-size:31px;width:52px;height:54px;line-height:52px;text-align:center}#jp-site .brand-name{font-size:19px;font-weight:600;line-height:1.2}#jp-site .brand-sub{font-size:10px;letter-spacing:2px;margin-top:5px;display:block}#jp-site nav{display:flex;gap:20px;align-items:center}#jp-site .nav-link{border:0;background:none;color:var(--ink);padding:12px 0;font-size:13px}#jp-site .nav-link:hover{color:var(--copper)}#jp-site .action{display:inline-flex;justify-content:center;align-items:center;padding:13px 20px;background:var(--copper);color:#fff!important;border:1px solid var(--copper);font-size:14px;border-radius:2px;font-weight:500}#jp-site .action.secondary{background:transparent;color:var(--navy)!important;border-color:#bdc7d0}#jp-site .action:hover{filter:brightness(.92)}#jp-site .eyebrow{font-size:11px;letter-spacing:1.7px;text-transform:uppercase;color:var(--copper);font-weight:600;margin-bottom:18px}#jp-site .hero{display:grid;grid-template-columns:1.05fr 1fr;min-height:585px}#jp-site .hero-copy{padding:65px 36px 54px 48px;align-self:center}#jp-site .hero-copy p{max-width:460px;color:#4c5d6d;font-size:17px}#jp-site .hero-image{position:relative;min-height:480px}#jp-site .hero-image img{height:100%;width:100%;position:absolute;object-fit:cover;object-position:40% center}#jp-site .hero-caption{position:absolute;bottom:0;left:0;right:0;background:var(--navy);color:#fff;padding:22px 28px;font-size:13px}#jp-site .hero-caption strong{font-weight:500;display:block;font-size:20px}#jp-site .buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}#jp-site .mini-note{font-size:12px;margin-top:18px;color:#61707e}#jp-site .credentials{background:var(--light);border-bottom:1px solid #dde4ea}#jp-site .credential-inner{display:grid;grid-template-columns:repeat(3,1fr);padding-top:23px;padding-bottom:23px;gap:30px}#jp-site .credential{font-size:13px;color:#566575}#jp-site .credential b{display:block;color:var(--navy);font-size:15px;font-weight:500}#jp-site .section{padding:72px 0}#jp-site .section-head{max-width:660px;margin-bottom:34px}#jp-site .section-head p{color:#5b6976}#jp-site .paths{display:grid;grid-template-columns:1fr 1fr;gap:24px}#jp-site .path{padding:32px;border:1px solid #d9e0e6;border-top:3px solid var(--copper);background:#fff}#jp-site .path small{font-size:11px;color:var(--copper);letter-spacing:1.5px;text-transform:uppercase}#jp-site .path h3{margin-top:12px;font-size:26px}#jp-site .path p{color:#596776;font-size:15px}#jp-site .text-link{border:0;border-bottom:1px solid var(--copper);padding:0 0 4px;background:none;color:var(--navy);margin-top:24px;font-size:14px}#jp-site .split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}#jp-site .split-photo{width:100%;height:390px;object-fit:cover}#jp-site .slate{background:var(--light)}#jp-site .checks{list-style:none;padding:0;margin:25px 0 0}#jp-site .checks li{padding:9px 0 9px 23px;position:relative;border-bottom:1px solid #dce3e9;font-size:15px}#jp-site .checks li:before{content:'✓';position:absolute;left:0;color:var(--copper)}#jp-site .service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid #dce2e8}#jp-site .service{padding:25px 20px 28px 0;border-bottom:1px solid #dce2e8;text-align:left;border-left:0;border-right:0;background:transparent;color:var(--ink)}#jp-site .service:hover{background:var(--light)}#jp-site .service span{font-size:11px;color:var(--copper);display:block;margin-bottom:12px}#jp-site .service h3{font-size:19px}#jp-site .service p{font-size:14px;color:#627080;margin-top:10px}#jp-site .founder{background:var(--navy);color:#e7edf3}#jp-site .founder h2{color:#fff}#jp-site .portrait{position:relative;height:435px;overflow:hidden}#jp-site .portrait img{width:100%;height:158%;object-fit:cover;position:absolute;top:-27%;object-position:center center}#jp-site .founder .eyebrow{color:#e4b58f}#jp-site .founder p{color:#d5dee7}#jp-site .founder .text-link{color:#fff}#jp-site .signature{font-family:Georgia,serif;font-size:26px;margin-top:24px}#jp-site .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:35px}#jp-site .step-number{font-family:Georgia,serif;font-size:30px;color:var(--copper);border-bottom:1px solid #dae1e7;padding-bottom:12px;margin-bottom:18px}#jp-site .steps h3{font-size:18px}#jp-site .steps p{font-size:14px;color:#5c6a77;margin-top:10px}#jp-site .quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}#jp-site blockquote{margin:0;padding:28px;background:#fff;border-left:3px solid var(--copper);font-family:Georgia,serif;font-size:20px;line-height:1.6}#jp-site blockquote footer{font-family:Arial,sans-serif;font-size:12px;color:#5c6976;margin-top:20px}#jp-site details{padding:18px 0;border-bottom:1px solid #dbe2e8}#jp-site summary{cursor:pointer;font-size:17px;color:var(--navy)}#jp-site details p{font-size:15px;color:#5b6977;padding:0 20px}#jp-site .cta{background:#e9edf1;padding:55px 0}#jp-site .cta .wrap{display:flex;gap:30px;justify-content:space-between;align-items:center}#jp-site .cta h2{font-size:32px;max-width:510px}#jp-site .cta p{font-size:15px;margin-top:12px}#jp-site .site-footer{background:var(--navy);color:#d4dee7;padding:40px 0 22px}#jp-site .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;font-size:13px}#jp-site .footer-grid h3{color:#fff;font-size:17px;margin-bottom:12px}#jp-site .footer-grid button{display:block;background:none;border:0;color:#d4dee7;padding:4px 0;font-size:13px;text-align:left}#jp-site .copyright{margin-top:32px;border-top:1px solid #34485c;padding-top:18px;font-size:11px}#jp-site .detail-head{background:var(--light);padding:58px 0}#jp-site .detail-head h1{max-width:800px;font-size:48px}#jp-site .detail-head p{max-width:730px;color:#556474;font-size:18px}#jp-site .detail-body{padding:52px 0 66px}#jp-site .detail-body h2{font-size:29px;margin:32px 0 14px}#jp-site .detail-body h2:first-child{margin-top:0}#jp-site .detail-body p{max-width:800px;color:#566575}#jp-site .detail-body ul{padding-left:22px;max-width:800px}#jp-site .resource-row{padding:26px 0;border-bottom:1px solid #dce2e8}#jp-site .resource-row h3{font-size:24px}#jp-site button:focus-visible,#jp-site a:focus-visible,#jp-site summary:focus-visible{outline:3px solid #a65f35;outline-offset:5px}#jp-site [hidden]{display:none!important}
@media(max-width:850px){#jp-site .wrap{padding-left:25px;padding-right:25px}#jp-site .header-inner{flex-wrap:wrap;padding-top:20px;padding-bottom:15px;gap:14px}#jp-site nav{width:100%;gap:18px;flex-wrap:wrap}#jp-site .hero-copy{padding:44px 25px}#jp-site .hero{min-height:520px}#jp-site .hero-image{min-height:420px}#jp-site .split{gap:28px}#jp-site .service-grid{grid-template-columns:1fr 1fr}#jp-site .steps{grid-template-columns:1fr 1fr}#jp-site .section{padding:52px 0}}
@media(max-width:580px){#jp-site .top .wrap span:last-child{display:none}#jp-site .hero,#jp-site .paths,#jp-site .split,#jp-site .quote-grid{grid-template-columns:1fr}#jp-site .hero-image{min-height:320px}#jp-site .hero h1{font-size:43px}#jp-site .credential-inner{grid-template-columns:1fr;gap:16px}#jp-site .credential{border-bottom:1px solid #dce2e8;padding-bottom:12px}#jp-site .service-grid{grid-template-columns:1fr}#jp-site .cta .wrap{display:block}#jp-site .cta .action{margin-top:24px}#jp-site .footer-grid{grid-template-columns:1fr}#jp-site .split-photo{height:280px}#jp-site .portrait{height:420px}#jp-site nav{gap:15px}#jp-site .nav-link{font-size:12px}#jp-site nav .action{padding:8px 12px;font-size:12px}#jp-site .detail-head h1{font-size:38px}}
/* ---- Additions ---- */
/* Additions to the reference stylesheet. Each rule either gives a real link the box the
   reference's <button> had, or adds accessibility without changing the approved appearance. */

/* The approved reference renders with the browser's default 8px body margin around the rounded #jp-site frame. */
body { margin: 8px; background: #fff; }
/* <picture> wrappers must not add a box: the <img> stays the direct layout child, as in the reference. */
#jp-site picture { display: contents; }
#jp-site picture source { display: none; }

/* The reference is rendered in quirks mode, where an inline-flex eyebrow alone on its line gets no
   line-height strut. In standards mode the strut adds ~7px per section; block-level flex at
   fit-content width renders identically without it. */
#jp-site#jp-site .section .eyebrow { display: flex; width: fit-content; }

/* <a> replacements for the reference's <button data-page> controls. Buttons are inline-block
   by default; links are inline, so restore the box the reference relied on. */
#jp-site a.brand { display: flex; }
#jp-site a.nav-link { display: inline-block; text-align: center; }
#jp-site a.text-link { display: inline-block; text-align: center; }
#jp-site a.action.secondary { text-align: center; }
/* The reference tiles are <button>s: they keep the UA button top border, and a button vertically
   centres its content when grid stretching makes it taller than the content. */
#jp-site a.service { display: flex; flex-direction: column; justify-content: center; border-top: 2px outset rgb(0, 0, 0); }
#jp-site .footer-grid a.footer-link { display: block; width: fit-content; background: none; border: 0; color: #d4dee7; padding: 4px 0; font-size: 13px; text-align: left; }
#jp-site .footer-grid a:hover, #jp-site .top a:hover { text-decoration: underline; }
#jp-site .detail-body .path a { text-decoration: underline; text-underline-offset: 3px; }
/* Contextual links inside reference-style page copy (e.g. cleanup → monthly, resources → monthly). */
#jp-site .detail-body p a, #jp-site .detail-body li a { text-decoration: underline; text-underline-offset: 3px; color: var(--navy); }
/* Converted from the reference's inline style on the founder note. */
#jp-site .founder-note { color: #d5dee7; }

/* Contrast: the reference copper (#a65f35) on light slate (#f1f4f7, 4.4:1) and on the CTA band
   (#e9edf1, 4.1:1), including the inner-page header (#f1f4f7), falls just short of WCAG AA for small text. A marginally deeper copper keeps
   the same look and reaches 5.1:1 and 4.8:1. Everywhere on white the original copper is kept. */
#jp-site .slate .eyebrow, #jp-site .cta .eyebrow, #jp-site .detail-head .eyebrow, #jp-site .service:hover span { color: #985630; }

/* Screen-reader-only text (e.g. "opens in a new tab" on scheduling links). */
#jp-site .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Skip link: invisible until focused. */
#jp-site .skip-link { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 14px; }
#jp-site .skip-link:focus { top: 12px; }
#jp-site main:focus { outline: none; }
#jp-site { position: relative; }

/* Text enlargement: let long strings wrap instead of forcing horizontal scroll. The footer columns
   are left out: as in the reference, the email address sets its column's minimum width, so it
   never breaks mid-address in the three-column layout (the footer is one column below 580px). */
#jp-site { overflow-wrap: break-word; }
#jp-site .hero > *, #jp-site .split > *, #jp-site .paths > *, #jp-site .quote-grid > *, #jp-site .steps > *, #jp-site .service-grid > *, #jp-site .cred-inner > * { min-width: 0; }

@media (prefers-reduced-motion: reduce) { #jp-site * { transition: none !important; scroll-behavior: auto !important; } }

/* Portrait: the reference crop (height 158%, top -27%) hides the screenshot's black margins at
   desktop and wide-tablet widths, but below ~770px it lets up to ~15px of black show. Up to 800px,
   size the image so the photo area (source rows 345-1453 of 1800, aspect 832:1108, plus a small margin)
   always covers the frame, centred. Above 800px the reference crop is untouched. Nothing is edited in
   the file itself; this is presentation cropping only. */
#jp-site .portrait { --ph: 435px; }
@media (max-width: 580px) { #jp-site .portrait { --ph: 420px; } }
@media (max-width: 800px) {
  #jp-site .portrait { container-type: inline-size; }
  #jp-site#jp-site .portrait img { top: 50%; left: 50%; width: max(100cqw, calc(var(--ph) * 0.77)); max-width: none; height: auto; object-fit: fill; transform: translate(-50%, -50%); }
}

/* =====================================================================================
   Brand system (Intuit ProAdvisor brand review, round 2, 2026-10-23). The brand guide requires
   "Your business name/logo must appear larger than any Intuit brand or logo on your website".
   These are OUR design targets for meeting it, not Intuit-prescribed dimensions:
   - JP lockup: monogram 88x92 and a 32px wordmark (72x78 and 26px on phones);
   - credential badges: 72px wide (64px on phones), natural proportions, with a text caption;
   - any heading or promotional line that names an Intuit product: at most 20px (18px on phones),
     via --jp-product-max. Large headings name JP's services, not the product.
   Same monogram treatment (Georgia, navy border, 12px corners) as the approved reference.
   ===================================================================================== */
#jp-site {
  --jp-mark-w: 88px; --jp-mark-h: 92px; --jp-mark-fs: 52px;
  --jp-word: 32px; --jp-word-sub: 12px;
  --jp-badge-w: 72px;
  --jp-product-max: 20px;
}
@media (max-width: 580px) {
  #jp-site {
    --jp-mark-w: 72px; --jp-mark-h: 78px; --jp-mark-fs: 43px;
    --jp-word: 26px; --jp-word-sub: 10px;
    --jp-badge-w: 64px;
    --jp-product-max: 18px;
  }
}
#jp-site .header-inner { min-height: 124px; }
#jp-site .brand { gap: 18px; min-width: 0; }
#jp-site .monogram { width: var(--jp-mark-w); height: var(--jp-mark-h); font-size: var(--jp-mark-fs); line-height: calc(var(--jp-mark-h) - 2px); flex-shrink: 0; }
#jp-site .brand-name { font-size: var(--jp-word); font-weight: 700; line-height: 1.12; letter-spacing: -.3px; min-width: 0; }
#jp-site .brand-sub { font-size: var(--jp-word-sub); font-weight: 600; letter-spacing: 2.2px; margin-top: 7px; }
@media (max-width: 580px) {
  #jp-site .header-inner { min-height: 0; }
  #jp-site .brand { gap: 14px; }
  #jp-site .brand-sub { letter-spacing: 1.4px; margin-top: 5px; }
}
/* Headings and promotional lines that mention an Intuit product use min(own size,
   var(--jp-product-max)) where they are defined: .cred-panel-title below, .svc-cards h3 in
   styles/service-page.css. */
/* Footer: the same lockup in white, so the company name leads the footer too. */
#jp-site .footer-grid .footer-brand { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 650; line-height: 1.2; margin-bottom: 14px; }
#jp-site .footer-grid .footer-brand .monogram { border-color: #fff; color: #fff; width: 46px; height: 48px; font-size: 27px; line-height: 46px; flex-shrink: 0; font-weight: 400; }

/* =====================================================================================
   Owner-directed additions, 2026-10-05: phone numbers, call buttons, credential badges.
   ===================================================================================== */

/* Focus rings on navy surfaces: the reference copper ring is under 3:1 there; the light copper
   used by the reference's own navy eyebrows is clearly visible. */
#jp-site .top a:focus-visible, #jp-site .founder a:focus-visible, #jp-site .site-footer a:focus-visible { outline-color: #ebbc96; }

/* ---------- Phone numbers (shared .phones block: top strip, contact card, footer) ---------- */
#jp-site .phones { display: flex; flex-wrap: wrap; gap: 6px; }
#jp-site .phone { display: flex; flex-direction: column; justify-content: center; min-height: 44px; line-height: 1.25; border-radius: 10px; text-decoration: none; }
#jp-site .phone-label, #jp-site .phone-number { display: block; white-space: nowrap; }
#jp-site .phone-label { font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
#jp-site .phone-number { font-weight: 650; }
#jp-site .phone:hover .phone-number { text-decoration: underline; text-underline-offset: 3px; }

/* Contact strip: service-area text left, numbers right. The strip is a little taller than the
   reference's so each number is a 44px touch target. */
#jp-site .top { padding: 5px 0; }
#jp-site .top .top-inner { flex-wrap: wrap; align-items: center; column-gap: 24px; row-gap: 2px; }
#jp-site .top-area { padding: 4px 0; }
#jp-site .phones-top { justify-content: flex-end; }
#jp-site .phones-top .phone { padding: 3px 12px; color: #fff; }
#jp-site .top a.phone:hover { text-decoration: none; background: rgba(255, 255, 255, .08); }
#jp-site .top a.phone:focus-visible { outline-offset: 1px; }
#jp-site .phones-top .phone-main .phone-label { color: #ebbc96; }
#jp-site .phones-top .phone-main .phone-number { font-size: 16px; letter-spacing: .3px; }
#jp-site .phones-top .phone-alt .phone-label { color: #b8c6d3; }
#jp-site .phones-top .phone-alt .phone-number { font-size: 14px; font-weight: 500; color: #dfe7ee; }

/* Contact card: main number large, additional number directly beneath it. */
#jp-site .phones-contact { flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 14px; }
#jp-site .phones-contact .phone { color: var(--navy); }
/* The contact card underlines its links (rule above); here only the number carries it, not the label. */
#jp-site .detail-body .path a.phone { text-decoration: none; }
#jp-site .phones-contact .phone-number { text-decoration: underline; text-underline-offset: 3px; }
#jp-site .phones-contact .phone-main .phone-label { color: var(--copper); }
#jp-site .phones-contact .phone-main .phone-number { font-size: 26px; font-weight: 600; letter-spacing: -.3px; }
#jp-site .phones-contact .phone-alt .phone-label { color: #566575; }
#jp-site .phones-contact .phone-alt .phone-number { font-size: 18px; font-weight: 500; }

/* Footer: main number more prominent than before, additional number underneath. */
#jp-site .phones-footer { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 6px; }
#jp-site .footer-grid .phones-footer .phone { color: #fff; }
#jp-site .footer-grid a.phone:hover { text-decoration: none; }
#jp-site .phones-footer .phone-main .phone-label { color: #ebbc96; }
#jp-site .phones-footer .phone-main .phone-number { font-size: 20px; font-weight: 600; }
#jp-site .phones-footer .phone-alt .phone-label { color: #b8c6d3; }
#jp-site .phones-footer .phone-alt .phone-number { font-size: 15px; font-weight: 500; color: #d4dee7; }
#jp-site .footer-email { display: inline-block; padding: 8px 0; }
/* Website credit inside the copyright line: inherits its colour and size; underlined so it reads as a link. */
#jp-site .footer-credit { text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* ---------- Main-number call button (shared: hero, closing CTA, inner pages, mobile bar) ---------- */
#jp-site .action.call { background: var(--navy); border-color: var(--navy); }

/* Hero: "Explore Our Services" is a text link under the buttons; its touch area is enlarged
   invisibly so the underline stays where the reference draws it. */
#jp-site .hero-explore { position: relative; margin-top: 22px; }
#jp-site .hero-explore::after { content: ''; position: absolute; inset: -10px -6px; }

/* Closing CTA: call + scheduling side by side; below 980px they move under the heading. */
#jp-site .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
@media (max-width: 980px) {
  #jp-site .cta .wrap { flex-wrap: wrap; }
  #jp-site .cta-actions { justify-content: flex-start; }
}
@media (max-width: 580px) {
  #jp-site .cta-actions { margin-top: 24px; }
  #jp-site#jp-site .cta .cta-actions .action { margin-top: 0; }
}

/* ---------- Credential artwork (supplied files, unaltered: contain, never stretched) ---------- */
#jp-site .badge-img { display: block; width: var(--jp-badge-w); max-width: 100%; height: auto; object-fit: contain; }
#jp-site .bbb-seal { display: inline-block; line-height: 0; background: #fff; padding: 10px 12px; border-radius: 12px; }
#jp-site .bbb-img { display: block; width: 175px; max-width: 100%; height: auto; object-fit: contain; }
#jp-site .footer-bbb { margin-top: 18px; }
#jp-site .contact-bbb { margin-top: 22px; border: 1px solid #d9e0e6; }
#jp-site .badge-issuer, #jp-site .badge-status, #jp-site .badge-holder, #jp-site figcaption strong { display: block; }

/* Homepage credentials section (replaces the text-only strip under the hero). */
#jp-site .cred-section .cred-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px 48px; padding-top: 30px; padding-bottom: 30px; }
#jp-site .cred-title { font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -.4px; }
#jp-site .cred-copy p { margin-top: 8px; font-size: 15px; color: #566575; }
#jp-site .cred-badges { display: flex; align-items: center; gap: 28px; }
#jp-site .cred-badges .cred-figure { width: 120px; }
#jp-site .cred-badges .cred-figure .badge-img { margin-bottom: 8px; }
@media (max-width: 980px) { #jp-site .cred-section .cred-inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 580px) {
  #jp-site .cred-copy { text-align: center; }
  #jp-site .cred-badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); max-width: 290px; margin: 0 auto; justify-items: center; gap: 18px 28px; }
  #jp-site .cred-badges .cred-figure { width: auto; }
  #jp-site .cred-bbb { grid-column: 1 / -1; }
}

/* Full Intuit credentials panel: homepage founder section and About page. */
#jp-site .cred-panel { margin-top: 48px; background: #fff; color: var(--ink); border: 1px solid #d9e0e6; border-radius: 20px; padding: 30px 32px 28px; }
#jp-site .cred-panel-title { font-size: min(20px, var(--jp-product-max)); font-weight: 600; }
#jp-site .cred-panel-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 26px 16px; }
#jp-site .cred-figure { margin: 0; text-align: center; }
#jp-site .cred-figure .badge-img { margin: 0 auto 12px; }
#jp-site .cred-figure figcaption, #jp-site .service-badge figcaption { font-size: 13px; line-height: 1.4; color: #566575; }
#jp-site .badge-issuer { font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--copper); }
#jp-site .cred-figure figcaption strong, #jp-site .service-badge figcaption strong { margin-top: 3px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--navy); text-wrap: balance; }
#jp-site .badge-status { margin-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
@media (max-width: 580px) { #jp-site .cred-panel { padding: 24px 20px; } }

/* One supporting badge on a service page. */
#jp-site .service-badge { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; max-width: 800px; margin: 28px 0 6px; padding: 18px 22px; background: var(--light); border-radius: 14px; }
#jp-site .service-badge .badge-issuer { color: #985630; }
#jp-site .badge-holder { margin-top: 4px; }

/* ---------- Merit & Matter 2026 award (2026-10-06) ---------- */
/* Supplied artwork, unaltered: a width, height:auto and contain; no shadow, filter or plate. Each
   placement stands apart from the Intuit/BBB credentials. */
#jp-site .award { display: inline-block; line-height: 0; border-radius: 12px; }
#jp-site .award-img { display: block; max-width: 100%; height: auto; object-fit: contain; }

/* Footer, every page: the round seal under the Explore links. */
#jp-site .footer-award { margin-top: 20px; }
#jp-site .footer-award .award-img { width: 104px; }

/* Homepage: the plaque beside the "Client experiences" heading. */
#jp-site .quote-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; margin-bottom: 38px; }
/* The wrapper carries the reference's 38px heading margin, so the heading itself drops it
   (doubled id to match the reference rule's specificity). */
#jp-site#jp-site .quote-head .section-head { flex: 1 1 480px; margin-bottom: 0; }
#jp-site .home-award .award-img { width: 340px; }

/* About: a concise recognition section with the plaque at full readable width. */
#jp-site .award-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 44px; margin-top: 40px; padding: 34px 36px; background: var(--light); border-radius: 20px; }
#jp-site#jp-site .award-panel h2 { margin: 0 0 10px; }
#jp-site .award-panel .award-copy p { margin-top: 0; max-width: 460px; }
#jp-site .about-award .award-img { width: 460px; }
@media (max-width: 980px) { #jp-site .award-panel { grid-template-columns: minmax(0, 1fr); } }

/* Services: the shield as an accent between the service grid and the closing buttons. */
#jp-site .award-note { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; max-width: 800px; margin-top: 40px; padding: 24px 28px; border: 1px solid #d9e0e6; border-radius: 20px; }
#jp-site .award-note .award { flex: 0 0 auto; }
#jp-site .services-award .award-img { width: 112px; }
#jp-site .award-note .award-copy { flex: 1 1 260px; }
#jp-site#jp-site .award-note h2 { margin: 0 0 6px; font-size: 22px; }
#jp-site .award-note .award-copy p { margin-top: 0; }

@media (max-width: 580px) {
  #jp-site .home-award .award-img { width: 320px; }
  /* Slim side padding so the plaque keeps a readable width on small phones. */
  #jp-site .award-panel { padding: 26px 14px; }
  #jp-site .footer-award .award-img { width: 96px; }
}

/* ---------- Mobile contact bar (≤580px) ---------- */
/* Fixed to the bottom, clear of the safe-area insets. The body reserves its height (with room
   to spare) so it never covers the footer, and scroll-padding keeps focused controls above it. */
#jp-site .mobile-bar { display: none; }
body { margin-left: max(8px, env(safe-area-inset-left)); margin-right: max(8px, env(safe-area-inset-right)); }
@media (max-width: 580px) {
  #jp-site .mobile-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; z-index: 20; left: 0; right: 0; bottom: 0;
    padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    background: #fff; border-top: 1px solid #d9e0e6; box-shadow: 0 -6px 18px rgba(20, 40, 63, .08); }
  #jp-site .mobile-bar .action { min-height: 48px; padding: 8px 6px; font-size: 13px; text-align: center; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom)); }

  /* Contact strip on phones: service-area text above two numbers side by side. Each number keeps
     its own width (no clipping): when both don't fit, or text is enlarged, they stack. */
  #jp-site .top .top-inner { display: block; }
  #jp-site .top-area { font-size: 11px; }
  #jp-site .phones-top .phone { flex: 1 1 0; padding: 3px 8px; }
  #jp-site .phones-top .phone-label { letter-spacing: .8px; }
}
/* ---- Service-page standard (styles/service-page.css) ---- */
/* Service-page standard (2026-10-18). Building blocks from service-page.mjs, first used by Monthly
   Bookkeeping. Everything extends the reference system: palette tokens (--navy, --copper, --ink,
   --light), .wrap, .section rhythm, .section-head, .eyebrow, .checks, .step-number, .action, and
   the approved radii: 20px panels/photos, 18px service cards, 16px callouts, 14px tiles, 12px buttons. */

/* Text links inside service-page copy are underlined so they read as links. */
#jp-site .svc-hero .svc-note a, #jp-site .svc-section p a, #jp-site .svc-scope a, #jp-site .svc-faq a, #jp-site .svc-local .svc-facts a {
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Hero: copy on a solid slate panel, photograph beside it ---------- */
#jp-site .svc-hero { background: var(--light); border-radius: 20px; padding: 40px 0 56px; }
#jp-site .svc-hero-panel { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 52px; align-items: center; }
#jp-site .svc-hero .eyebrow { color: #985630; margin-bottom: 14px; }
#jp-site .svc-hero h1 { font-size: clamp(36px, 4.4vw, 52px); max-width: 620px; letter-spacing: -1.6px; }
#jp-site .svc-lede { margin-top: 16px; font-size: 20px; line-height: 1.45; font-weight: 500; color: var(--navy); }
#jp-site .svc-intro { margin-top: 14px; font-size: 17px; color: #4c5d6d; max-width: 600px; }
#jp-site .svc-area { margin-top: 14px; font-size: 13px; letter-spacing: .3px; color: #556474; }
#jp-site .svc-note { margin-top: 22px; max-width: 580px; padding-left: 14px; border-left: 3px solid var(--copper); font-size: 14px; color: #4c5d6d; }
#jp-site .svc-note a { color: var(--navy); white-space: nowrap; }
#jp-site .svc-hero-img { display: block; width: 100%; height: auto; border-radius: 20px; object-fit: cover; }
#jp-site .svc-hero-img-landscape { aspect-ratio: 4 / 3; }

/* Breadcrumb */
#jp-site .svc-crumbs { margin-bottom: 22px; font-size: 13px; color: #556474; }
#jp-site .svc-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
#jp-site .svc-crumbs li + li::before { content: '›'; margin: 0 9px; color: #8494a3; }
#jp-site .svc-crumbs a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #bdc7d0; }
#jp-site .svc-crumbs a:hover { text-decoration-color: currentColor; }

/* ---------- Problem → response rows (hairlines, no cards) ---------- */
#jp-site .svc-issues { list-style: none; margin: 0; padding: 0; border-top: 1px solid #dce2e8; }
#jp-site .svc-issues li { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 8px 40px; padding: 22px 0; border-bottom: 1px solid #dce2e8; }
#jp-site .svc-issues h3 { font-size: 19px; font-weight: 600; line-height: 1.35; }
#jp-site .svc-issues p { margin: 0; font-size: 15.5px; color: #566575; }

/* ---------- Service cards (18px) ---------- */
#jp-site .svc-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
#jp-site .svc-cards li { background: #fff; border: 1px solid #d9e0e6; border-top: 3px solid var(--copper); border-radius: 18px; padding: 26px 26px 28px; }
#jp-site .svc-cards h3 { font-size: min(19px, var(--jp-product-max, 19px)); font-weight: 600; line-height: 1.3; }
#jp-site .svc-cards p { margin-top: 10px; font-size: 15px; color: #596776; }

/* ---------- Included vs. additional agreed scope (20px panels) ---------- */
#jp-site .svc-scope { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 28px; }
#jp-site .svc-scope-panel { border-radius: 20px; padding: 28px 30px 30px; }
#jp-site .svc-scope-panel h3 { font-size: 20px; font-weight: 600; }
#jp-site .svc-scope-in { background: #fff; border: 1px solid #d9e0e6; }
#jp-site .svc-scope-in .checks { margin-top: 14px; }
#jp-site .svc-scope-extra { background: var(--navy); color: #d5dee7; }
#jp-site .svc-scope-extra h3 { color: #fff; }
#jp-site .svc-scope-extra ul { list-style: none; margin: 14px 0 0; padding: 0; }
#jp-site .svc-scope-extra li { padding: 9px 0; border-bottom: 1px solid #34485c; font-size: 15px; }
#jp-site .svc-scope-extra a { color: #fff; }
#jp-site .svc-scope-extra a:focus-visible { outline-color: #ebbc96; }
#jp-site .svc-scope-extra p { margin-top: 16px; font-size: 14px; color: #c9d6e2; }

/* ---------- Two-column content + callouts (16px) ---------- */
#jp-site .svc-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 44px; align-items: start; }
#jp-site .svc-needs { list-style: none; margin: 0; padding: 0; border-top: 1px solid #dce2e8; }
#jp-site .svc-needs li { padding: 14px 0; border-bottom: 1px solid #dce2e8; font-size: 15.5px; color: #566575; }
#jp-site .svc-needs strong { color: var(--navy); font-weight: 600; }
#jp-site .svc-callout { background: #fff; border-left: 4px solid var(--copper); border-radius: 16px; padding: 24px 26px; }
#jp-site .svc-section:not(.slate) .svc-callout { background: var(--light); }
#jp-site .svc-callout h3 { font-size: 18px; font-weight: 600; }
#jp-site .svc-callout p { margin-top: 10px; font-size: 15px; color: #566575; }
#jp-site .svc-callout-wide { margin-top: 34px; max-width: 800px; }
#jp-site .svc-callout + .svc-callout { margin-top: 16px; }
#jp-site .svc-after { margin-top: 20px; font-size: 15px; color: #566575; }

/* ---------- Reports: profit vs. cash with a hypothetical example ---------- */
#jp-site .svc-cash { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; align-items: center; margin-top: 28px; padding: 32px 34px; background: #fff; border: 1px solid #d9e0e6; border-radius: 20px; }
#jp-site .svc-cash h3 { font-size: 22px; font-weight: 600; }
#jp-site .svc-cash p { font-size: 15.5px; color: #566575; margin-top: 12px; }
#jp-site .svc-example { background: var(--light); border-radius: 16px; padding: 20px 22px; }
#jp-site .svc-example table { width: 100%; border-collapse: collapse; font-size: 15px; }
#jp-site .svc-example caption { text-align: left; font-weight: 600; color: var(--navy); padding-bottom: 10px; }
#jp-site .svc-example caption span, #jp-site .svc-example th span { display: block; font-size: 12px; font-weight: 400; color: #566575; }
#jp-site .svc-example th { text-align: left; font-weight: 400; padding: 10px 12px 10px 0; vertical-align: top; }
#jp-site .svc-example td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding: 10px 0; vertical-align: top; }
#jp-site .svc-example tbody tr { border-bottom: 1px solid #d5dde5; }
#jp-site .svc-example tfoot th, #jp-site .svc-example tfoot td { font-weight: 700; color: var(--navy); border-top: 2px solid var(--navy); }

/* ---------- Process steps (reference .step-number) ---------- */
#jp-site .svc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
#jp-site .svc-steps h3 { font-size: 17px; font-weight: 600; line-height: 1.35; }
#jp-site .svc-steps p { margin-top: 8px; font-size: 14px; color: #5c6a77; }
#jp-site .svc-steps-long { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 24px; }
/* Exactly six steps: two rows of three rather than four and two. */
@media (min-width: 981px) {
  #jp-site .svc-steps-long:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 36px; }
}

/* ---------- Two paths side by side (20px panels; label in copper) ---------- */
#jp-site .svc-paths { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
#jp-site .svc-paths > li { background: #fff; border: 1px solid #d9e0e6; border-top: 3px solid var(--copper); border-radius: 20px; padding: 28px 30px 30px; }
#jp-site .svc-section:not(.slate) .svc-paths > li { background: var(--light); border-color: transparent; border-top-color: var(--copper); }
#jp-site .svc-path-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #985630; }
#jp-site .svc-paths h3 { margin-top: 8px; font-size: 22px; font-weight: 600; line-height: 1.3; }
#jp-site .svc-paths p { margin-top: 10px; font-size: 15.5px; color: #566575; }
#jp-site .svc-paths .checks { margin-top: 16px; }

/* ---------- Comparison table (row headers; stacks on phones via data-label) ---------- */
#jp-site .svc-table-wrap { background: #fff; border: 1px solid #d9e0e6; border-radius: 20px; padding: 8px 28px 12px; }
#jp-site .svc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
#jp-site .svc-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#jp-site .svc-table th, #jp-site .svc-table td { text-align: left; vertical-align: top; padding: 16px 20px 16px 0; }
#jp-site .svc-table td:last-child { padding-right: 0; }
#jp-site .svc-table thead th { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #985630; padding-top: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--navy); }
#jp-site .svc-table tbody th { width: 22%; font-weight: 600; color: var(--navy); }
#jp-site .svc-table tbody td { color: #566575; }
#jp-site .svc-table tbody td:nth-of-type(1) { width: 34%; }
#jp-site .svc-table tbody tr + tr { border-top: 1px solid #dce2e8; }
#jp-site .svc-th-note { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: #566575; }
#jp-site .svc-table-even tbody th { width: 19%; }
#jp-site .svc-table-even tbody td, #jp-site .svc-table-even tbody td:nth-of-type(1) { width: auto; }
#jp-site .svc-table-even { table-layout: fixed; }
#jp-site .svc-table-even thead th:first-child { width: 19%; }

/* ---------- Service stages compared (current stage in navy) ---------- */
#jp-site .svc-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
#jp-site .svc-stages li { display: flex; flex-direction: column; background: #fff; border: 1px solid #d9e0e6; border-radius: 14px; padding: 22px; }
#jp-site .svc-stage-name { font-size: 18px; font-weight: 600; color: var(--navy); }
#jp-site .svc-stages p { margin: 8px 0 16px; font-size: 14.5px; color: #566575; flex: 1; }
#jp-site .svc-stages a { font-size: 14.5px; font-weight: 600; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
#jp-site .svc-stages li.is-current { background: var(--navy); border-color: var(--navy); }
#jp-site .svc-stages li.is-current .svc-stage-name { color: #fff; }
#jp-site .svc-stages li.is-current p { color: #d5dee7; }
#jp-site .svc-stage-here { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #ebbc96; }

/* ---------- Preparation checklist (two columns) + one-line privacy note ---------- */
#jp-site .svc-checklist { margin-top: 0; columns: 2; column-gap: 44px; }
#jp-site .svc-checklist li { font-size: 15.5px; break-inside: avoid; }
#jp-site .svc-privacy { margin-top: 20px; max-width: 760px; font-size: 14px; color: #556474; }

/* ---------- Geographic section: prose + facts list ---------- */
#jp-site .svc-prose p { font-size: 16px; color: #566575; }
#jp-site .svc-prose p:first-child { margin-top: 0; }
#jp-site .svc-facts { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid #34485c; }
#jp-site .svc-facts li { padding: 9px 0; border-bottom: 1px solid #34485c; font-size: 15px; color: #e7edf3; }
#jp-site .svc-facts a { color: #fff; }
#jp-site .svc-facts-light { margin-top: 0; border-top-color: #dce2e8; }
#jp-site .svc-facts-light li { color: var(--ink); border-bottom-color: #dce2e8; }
#jp-site .svc-facts-light a { color: var(--navy); }

/* ---------- Scope: estimate panel with the two evaluation actions ---------- */
#jp-site .svc-estimate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 28px; padding: 28px 32px; background: #fff; border: 1px solid #d9e0e6; border-left: 4px solid var(--copper); border-radius: 20px; }
#jp-site .svc-estimate > div:first-child { flex: 1 1 380px; }
#jp-site .svc-estimate h3 { font-size: 20px; font-weight: 600; }
#jp-site .svc-estimate p { margin-top: 8px; font-size: 15.5px; color: #566575; }
#jp-site .svc-estimate .buttons { margin-top: 0; }

/* ---------- Experience section (reference .founder navy band, .portrait, approved badge) ---------- */
#jp-site .svc-local .service-badge { margin: 24px 0 4px; max-width: 460px; }
#jp-site .svc-local .text-link { margin-top: 24px; }

/* ---------- FAQ (reference details/summary) ---------- */
#jp-site .svc-faq { max-width: 860px; border-top: 1px solid #dbe2e8; }
#jp-site .svc-faq summary { font-weight: 500; }

/* ---------- Related services (14px tiles) ---------- */
#jp-site .svc-related { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#jp-site .svc-related a { display: flex; flex-direction: column; height: 100%; padding: 22px; background: #fff; border: 1px solid #d9e0e6; border-radius: 14px; }
#jp-site .svc-related a:hover { border-color: var(--copper); }
#jp-site .svc-related a:hover .svc-related-name { text-decoration: underline; text-underline-offset: 3px; }
#jp-site .svc-related-name { font-size: 17px; font-weight: 600; color: var(--navy); line-height: 1.35; }
#jp-site .svc-related-text { margin-top: 6px; font-size: 14px; color: #566575; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  #jp-site .svc-cards, #jp-site .svc-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #jp-site .svc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #jp-site .svc-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  #jp-site .svc-hero { padding: 32px 0 44px; }
  #jp-site .svc-hero-panel, #jp-site .svc-scope, #jp-site .svc-split, #jp-site .svc-cash, #jp-site .svc-paths { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  #jp-site .svc-paths { gap: 20px; }
  #jp-site .svc-issues li { grid-template-columns: minmax(0, 1fr); }
  #jp-site .svc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Table → stacked rows: each row header becomes a title, each cell is labelled from data-label. */
  #jp-site .svc-table-wrap { padding: 4px 24px 8px; }
  #jp-site .svc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #jp-site .svc-table, #jp-site .svc-table tbody, #jp-site .svc-table tr, #jp-site .svc-table th, #jp-site .svc-table td { display: block; width: auto !important; }
  #jp-site .svc-table tbody tr { padding: 18px 0; }
  #jp-site .svc-table tbody th { padding: 0 0 8px; font-size: 16.5px; }
  #jp-site .svc-table tbody td { padding: 4px 0 0; }
  #jp-site .svc-table tbody td::before { content: attr(data-label); display: block; margin-top: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #985630; }
}
@media (max-width: 580px) {
  #jp-site .svc-hero h1 { font-size: 36px; letter-spacing: -1px; }
  #jp-site .svc-lede { font-size: 18px; }
  #jp-site .svc-cards, #jp-site .svc-related, #jp-site .svc-steps, #jp-site .svc-stages { grid-template-columns: minmax(0, 1fr); }
  #jp-site .svc-paths > li { padding: 24px 22px; }
  #jp-site .svc-table-wrap { padding: 4px 18px 8px; }
  #jp-site .svc-checklist { columns: 1; }
  #jp-site .svc-estimate { padding: 24px 20px; }
  #jp-site .svc-cash { padding: 24px 20px; }
  #jp-site .svc-scope-panel { padding: 24px 22px; }
  #jp-site .svc-example { padding: 16px 14px; }
}
@media (max-width: 400px) {
  /* Smallest phones: less nested padding so example tables keep their width. */
  #jp-site .svc-cash { padding: 20px 14px; }
  #jp-site .svc-example { padding: 14px 12px; }
}