/* ==========================================================================
   Premium Accounting, inner pages.

   The homepage is built from the component classes in style.css. The other
   145 pages are Bootstrap markup inherited from the previous theme. Rather
   than rewrite 145 page bodies and risk their copy, links and schema, this
   file maps that markup onto the same design system: same scale, same
   spacing, same navy/blue palette, same card, button, list and FAQ chrome.

   Everything here is scoped to body.pa-inner so the homepage is untouched.
   ========================================================================== */


/* ---------------------------------------------------------------- canvas */
/* 1192 - 48 = 1144, the same content width as the header/footer .wrap, so the
   page body and the logo share a left edge on every inner page */
.pa-inner .container,
.pa-inner .container-fluid{max-width:1192px;padding-left:24px;padding-right:24px}

.pa-inner .section{padding:80px 0;position:relative}
.pa-inner .section.bg-light{background:var(--alt)!important;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Background alternation carries most of the separation, but roughly a quarter
   of the pages have two sections on the same ground in a row. Those get a thin
   rule so a section boundary is never invisible. */
.pa-inner .section + .section:not(.bg-light):not(.cta-section):not(.text-bg-dark),
.pa-inner .section.bg-light + .section.bg-light{border-top:1px solid var(--line2)}

/* ------------------------------------------------------------- typography */
/* Interior section headings are not heroes. The homepage keeps the full
   display scale; inside a page a heading only has to outrank its paragraph. */
.pa-inner .section h2,.pa-inner .section .h2{font-size:clamp(21px,1.9vw,27px);
  line-height:1.26;letter-spacing:-.02em}
.pa-inner .section h3{font-size:17.5px}
.pa-inner h3{margin-bottom:6px}
.pa-inner .h3{line-height:1.35}
.pa-inner .h6{font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--label)}
.pa-inner p{color:var(--body)}
.pa-inner .lead{color:var(--body)}
.pa-inner .text-muted{color:var(--soft)!important}

/* clear air under the heading block so the next heading can never crowd the
   content above it */
.pa-inner .section > .container > .text-center.mb-5,
.pa-inner .section > .container > h2.text-center.mb-5{margin-bottom:40px!important}
.pa-inner .section > .container > .text-center h2{margin-bottom:12px}
.pa-inner .section > .container > h2:not(.mb-5){margin-bottom:22px}
.pa-inner .section > .container > p + p{margin-top:0}
.pa-inner .section > .container > ul + p,
.pa-inner .section > .container > .row + p{margin-top:26px}

/* ==========================================================================
   Section compositions

   tools/compose.py reads what each section actually contains -- how much
   prose, how many list items, how long each item is, whether it carries
   media, a table, cards or an accordion -- and writes one of these classes
   onto the section. The width, the alignment and the column count come from
   that measurement, not from a single rule applied to every section.
   ========================================================================== */

/* ---- cmp-narrow: a short statement. Centred and tight, on purpose. ------- */
.pa-inner .cmp-narrow > .container > p{max-width:56ch;margin-left:auto;margin-right:auto;
  text-align:center}
.pa-inner .cmp-narrow > .container > .text-center > h2,
.pa-inner .cmp-narrow > .container > h2{max-width:26ch;margin-left:auto;margin-right:auto}

/* ---- cmp-read: no heading to sit beside, so the copy takes a generous
        reading measure centred in the canvas rather than hugging one edge. - */
.pa-inner .cmp-read > .container > :is(p,ul,ol){max-width:82ch;
  margin-left:auto;margin-right:auto}
@media (min-width:992px){
  /* a headingless two column block keeps its own narrower canvas, so it reads
     as a deliberate opening rather than as full width body copy */
  .pa-inner .cmp-read.cmp-2col > .container{max-width:1040px}
}

/* ---- cmp-wide: a long explanation that has a heading but too much copy to
        sit beside it. Left aligned at the widest measure that still tracks. - */
.pa-inner .cmp-wide > .container > :is(p,ul,ol){max-width:88ch;
  margin-left:0;margin-right:0}
.pa-inner .cmp-wide > .container > .text-center{text-align:left!important}
.pa-inner .cmp-wide > .container > :is(.text-center > h2,h2){margin-left:0;
  margin-right:0;text-align:left}

/* ---- cmp-2col: two or more long paragraphs set in two text columns, which
        halves the height without touching the line length. ---------------- */
@media (min-width:992px){
  .pa-inner .cmp-2col > .container{columns:2;column-gap:56px}
  .pa-inner .cmp-2col > .container > :is(.text-center,h2,.h2){column-span:all}
  .pa-inner .cmp-2col > .container > :is(p,ul,ol){max-width:none;
    break-inside:avoid-column;margin-bottom:16px}
}

/* ---- cmp-aside: a heading and its explanation, set side by side. A page of
        ten one-paragraph sections stacked down a centred ribbon is the
        Word-document problem; this uses the width and cuts the wrap. ------ */
.pa-inner .cmp-aside > .container > p{max-width:82ch}
@media (min-width:992px){
  .pa-inner .cmp-aside > .container{display:grid;
    grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:0 56px;
    align-items:start;grid-auto-rows:min-content}
  /* span 50, not 1 / -1: with no explicit rows declared, -1 resolves to the
     end of the *explicit* grid, so 1 / -1 silently collapsed to row 1 and a
     three line heading stretched that row away from its paragraph */
  .pa-inner .cmp-aside > .container > :is(.text-center,h2,.h2){grid-column:1;
    grid-row:1 / span 50;text-align:left!important;max-width:none}
  .pa-inner .cmp-aside > .container > .text-center.mb-5,
  .pa-inner .cmp-aside > .container > h2.mb-5{margin:0!important}
  .pa-inner .cmp-aside > .container > .text-center > h2{margin:0;text-align:left;
    max-width:none}
  .pa-inner .cmp-aside > .container > :is(p,ul,ol){grid-column:2;max-width:74ch;
    margin:0 0 15px}
  .pa-inner .cmp-aside > .container > :is(p,ul,ol):last-child{margin-bottom:0}
  /* longer copy earns a wider text column, so the heading still fills the left
     and the paragraph still stops short of an unreadable line length */
  .pa-inner .cmp-aside.cmp-long > .container{
    grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr)}
  .pa-inner .cmp-aside.cmp-long > .container > :is(p,ul,ol){max-width:86ch}
}

/* ---- cmp-grid2/3/4: a list-led section. The column count came from the
        item count and the length of the items. --------------------------- */
.pa-inner [class*="cmp-grid"] > .container > p{max-width:84ch;margin-left:0;margin-right:0}
@media (min-width:768px){
  .pa-inner .cmp-grid2 > .container > ul,
  .pa-inner .cmp-grid3 > .container > ul,
  .pa-inner .cmp-grid4 > .container > ul{columns:2;column-gap:40px;
    column-rule:1px solid var(--line2)}
}
@media (min-width:992px){
  .pa-inner .cmp-grid3 > .container > ul{columns:3;column-gap:34px}
  .pa-inner .cmp-grid4 > .container > ul{columns:4;column-gap:28px}
}

/* ---- cmp-split: short list, real copy. Copy left, list panel right, the
        way CoverPay and SelectRate set a supporting list. ----------------- */
.pa-inner .cmp-split > .container > p{max-width:none}
@media (min-width:992px){
  .pa-inner .cmp-split > .container{display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:2px 58px;align-items:start}
  .pa-inner .cmp-split > .container > :is(.text-center,h2){grid-column:1 / -1}
  .pa-inner .cmp-split > .container > p{grid-column:1;margin:0 0 14px}
  .pa-inner .cmp-split > .container > ul{grid-column:2;grid-row:2 / span 30;
    align-self:start;margin:2px 0 0;columns:1;
    border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:6px 22px}
  .pa-inner .cmp-split > .container > ul > li{padding:12px 0 12px 26px;margin:0;
    border-bottom:1px solid var(--line2)}
  .pa-inner .cmp-split > .container > ul > li:last-child{border-bottom:0}
  .pa-inner .cmp-split > .container > ul > li:before{top:20px}
  .pa-inner .bg-light.cmp-split > .container > ul{box-shadow:var(--sh)}
}

/* ---- cmp-media: a video sits beside its copy, not under it. ------------- */
.pa-inner .cmp-media > .container > p{max-width:84ch}
@media (min-width:992px){
  .pa-inner .cmp-media .row{align-items:center}
}
/* a video well: framed and filled, so the section reads as designed before
   the embed has loaded rather than as an empty right half */
.pa-inner .ratio{background:var(--alt);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.pa-inner .ratio > iframe,.pa-inner .ratio > video{border-radius:0;border:0}

/* ---- cmp-table / cmp-faq / cmp-cards: content that is already full width;
        the prose above it lines up with its left edge. ------------------- */
.pa-inner :is(.cmp-table,.cmp-faq,.cmp-cards) > .container > p{max-width:84ch;
  margin-left:0;margin-right:0}
.pa-inner .cmp-cards > .container > p{max-width:84ch}
/* A paragraph that declares itself centred has to be centred in the canvas as
   well. Anchoring its measure to the left edge, which is right for the prose
   that introduces a table or a card grid, pushed these closing lines 144px off
   the page's axis: centred text, visibly not in the centre. 19 pages. */
.pa-inner :is(.cmp-table,.cmp-faq,.cmp-cards) > .container > p.text-center,
.pa-inner [class*="cmp-grid"] > .container > p.text-center{
  margin-left:auto;margin-right:auto}

/* the CTA bands set their own measure regardless of composition */
.pa-inner .cta-section p,.pa-inner .text-bg-dark p{max-width:720px}
.pa-inner .card p,.pa-inner .accordion-body p,.pa-inner .line-card p{max-width:none}

/* ==========================================================================
   Hero compositions, chosen from the length of the hero copy
   ========================================================================== */
/* white, like the CoverPay hero; the hairline is the only separator so the
   hero does not merge into the first white section below it */
.pa-inner .hero{background:#fff;padding:74px 0 62px;
  border-bottom:1px solid var(--line2);overflow:hidden}
.pa-inner .hero h1{margin:0 auto 4px}
.pa-inner .hero .btn{margin-top:4px}
.pa-inner .hero .breadcrumb{justify-content:center}

/* ---- a guide opens with its contents. Same panel CoverPay uses: the page's
        own section headings, linked, beside the headline. ---------------- */
.pa-inner .hero-guide{text-align:left}
.pa-inner .hero-guide .row{align-items:center}
.pa-inner .hero-guide h1{margin-left:0;max-width:none}
.pa-inner .hero-guide .lead,.pa-inner .hero-guide p{margin-left:0;margin-right:0}
.pa-inner .hero-guide .d-grid,.pa-inner .hero-guide .d-md-flex,
.pa-inner .hero-guide .mt-3{justify-content:flex-start!important}
.otp{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:22px 24px}
.otp-title{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--label);margin:0 0 12px}
.otp ul{list-style:none;margin:0;padding:0}
.otp li{border-top:1px solid var(--line2)}
.otp li:first-child{border-top:0}
.otp a{display:flex;align-items:flex-start;gap:10px;padding:11px 0;
  font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.4}
.otp a:after{content:"";flex:none;margin-left:auto;width:7px;height:7px;
  border-right:1.8px solid var(--blue-l);border-bottom:1.8px solid var(--blue-l);
  transform:rotate(-45deg);margin-top:5px}
.otp a:hover{color:var(--blue)}
.otp a:hover:after{border-color:var(--blue)}
.otp-more{margin:12px 0 0;font-size:12.5px;color:var(--soft)}
@media (max-width:575px){
  /* one long label wraps and goes full width while the short one does not,
     which reads as an accident; give both the same shape */
  .pa-inner .hero .btn{width:100%;justify-content:center;margin:0 0 10px}
}
@media (max-width:991px){
  .pa-inner .hero-guide{text-align:center}
  .pa-inner .hero-guide .d-grid,.pa-inner .hero-guide .d-md-flex,
  .pa-inner .hero-guide .mt-3{justify-content:center!important}
  .otp{margin-top:28px;text-align:left}
}
/* anchored sections should not land under the sticky header */
.pa-inner .section[id]{scroll-margin-top:96px}

/* short copy: centred and narrow reads as deliberate */
.pa-inner .hero-tight h1{max-width:900px}
.pa-inner .hero-tight .lead,.pa-inner .hero-tight p{max-width:680px;
  margin-left:auto;margin-right:auto}

/* medium copy: the same centre, more room, so it stops wrapping early */
.pa-inner .hero-wide h1{max-width:1000px}
.pa-inner .hero-wide .lead,.pa-inner .hero-wide p{max-width:880px;
  margin-left:auto;margin-right:auto}

/* long copy: a headline beside its paragraph, so 600 characters read in five
   lines instead of ten and the page stops opening with a narrow ribbon */
@media (min-width:992px){
  .pa-inner .hero-split{text-align:left}
  .pa-inner .hero-split .row > [class*="col-"]{display:grid;
    grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
    gap:10px 56px;align-items:start;text-align:left}
  .pa-inner .hero-split h1{grid-column:1;grid-row:1 / span 2;margin:0;max-width:none;
    align-self:center}
  .pa-inner .hero-split .lead,.pa-inner .hero-split p{grid-column:2;grid-row:1;
    max-width:70ch;margin:0}
  .pa-inner .hero-split .d-grid,.pa-inner .hero-split .d-md-flex,
  .pa-inner .hero-split > .container .mt-3{grid-column:2;grid-row:2;
    justify-content:flex-start!important;margin-top:22px!important}
}

/* ------------------------------------------------------------------ lists */
/* style.css already draws the check marker on .icon-list li, so the inline
   Bootstrap icon inside these list items would render a second one. */
.pa-inner .icon-list li > i.bi{display:none}
.pa-inner .icon-list li{break-inside:avoid;-webkit-column-break-inside:avoid;
  margin-bottom:12px;padding-right:20px}
.pa-inner .icon-list{margin-bottom:0}
/* several pages leave a <p> unclosed around a list, which the parser turns
   into an empty paragraph that then takes a grid row of its own */
.pa-inner p:empty{display:none}
.pa-inner .list-nav{list-style:none;margin:0;padding:0}
.pa-inner .list-nav li{margin:8px 0}
/* ------------------------------------------------------------------ cards */
.pa-inner .card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden}
.pa-inner .card-body{padding:26px 24px}
.pa-inner .card-title{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:8px}
.pa-inner .card p{font-size:15px;margin-bottom:0}
.pa-inner .bg-light .card{box-shadow:var(--sh2)}

/* the old circular icon chip becomes the family's rounded tile */
.pa-inner .icon-box{width:50px;height:50px;border-radius:13px;background:var(--tint);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.pa-inner .icon-box i{font-size:23px;line-height:1;color:var(--blue)}
.pa-inner .text-center .icon-box,
.pa-inner .icon-box.mx-auto{margin-left:auto;margin-right:auto}

.pa-inner .line-card,
.pa-inner .company-list li{border:1px solid var(--line);border-radius:12px;background:#fff;
  box-shadow:none;text-align:center}
.pa-inner .line-card{min-height:118px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:14px 10px;transition:.15s}
.pa-inner .line-card:hover{border-color:#C6D3EE;box-shadow:var(--sh)}
.pa-inner .line-card i{font-size:22px;color:var(--blue);margin-bottom:10px}
.pa-inner .line-card span{font-size:12.5px;line-height:1.4;font-weight:600;color:var(--ink)}
.pa-inner .lines-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:12px}
.pa-inner .company-list{list-style:none;margin:0 0 16px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pa-inner .company-list li{min-height:52px;display:flex;align-items:center;
  justify-content:center;padding:6px}

/* --------------------------------------------------------------- accordion */
.pa-inner .accordion{--bs-accordion-border-color:var(--line);
  --bs-accordion-btn-focus-box-shadow:none}
.pa-inner .accordion-item{background:#fff;border:1px solid var(--line);
  border-radius:12px!important;margin-bottom:10px;overflow:hidden}
.pa-inner .accordion-button{background:#fff;color:var(--ink);font-weight:700;
  font-size:16px;padding:17px 20px;box-shadow:none;letter-spacing:-.015em}
.pa-inner .accordion-button:not(.collapsed){background:var(--tint);color:var(--blue);
  box-shadow:none}
.pa-inner .accordion-button:focus{box-shadow:none;border-color:var(--line)}
.pa-inner .accordion-button::after{width:14px;height:14px;background-size:14px}
.pa-inner .accordion-body{padding:6px 20px 20px;font-size:15px;color:var(--body);max-width:84ch}

/* --------------------------------------------------------------- CTA bands */
.pa-inner .cta-section,
.pa-inner .text-bg-dark{background:var(--navy)!important;color:#fff!important;
  border-radius:var(--r)}
.pa-inner .section.cta-section,
.pa-inner .section.text-bg-dark{border-radius:0;padding:86px 0;
  border-top:0;border-bottom:0}
/* a CTA is a destination, not a paragraph that happens to have buttons */
.pa-inner .cta-section .container,
.pa-inner .text-bg-dark .container{text-align:center}
.pa-inner .cta-section h2,.pa-inner .text-bg-dark h2{max-width:760px;
  margin-left:auto;margin-right:auto;margin-bottom:14px}
.pa-inner .cta-section p,.pa-inner .text-bg-dark p{max-width:720px;
  margin-left:auto;margin-right:auto}
.pa-inner .cta-buttons,
.pa-inner .cta-section .d-flex,.pa-inner .cta-section .d-grid,
.pa-inner .text-bg-dark .d-flex,.pa-inner .text-bg-dark .d-grid{
  margin-top:30px;justify-content:center;align-items:stretch;gap:14px!important}
.pa-inner .cta-section .btn,.pa-inner .text-bg-dark .btn{
  min-width:220px;justify-content:center;margin:0!important}
@media (max-width:575px){
  .pa-inner .cta-section .btn,.pa-inner .text-bg-dark .btn{width:100%}
}
.pa-inner .cta-section h1,.pa-inner .cta-section h2,.pa-inner .cta-section h3,
.pa-inner .text-bg-dark h1,.pa-inner .text-bg-dark h2,.pa-inner .text-bg-dark h3{color:#fff}
.pa-inner .cta-section p,.pa-inner .text-bg-dark p{color:#C6D2E8}
.pa-inner .cta-section a:not(.btn),.pa-inner .text-bg-dark a:not(.btn){color:#9CC0FA}
.pa-inner .cta-section .btn-outline-primary,
.pa-inner .text-bg-dark .btn-outline-primary{background:#fff;border-color:#fff;color:var(--navy)}
.pa-inner .cta-section .btn-outline-primary:hover,
.pa-inner .text-bg-dark .btn-outline-primary:hover{background:var(--tint);border-color:var(--tint)}

/* A dark band can also contain white cards, and the pricing page does: the
   plan name and its description were being painted white and light blue on a
   white card. Inside a card the normal palette applies. */
.pa-inner .cta-section .card,.pa-inner .text-bg-dark .card{color:var(--body)}
.pa-inner .cta-section .card :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4),
.pa-inner .text-bg-dark .card :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4){color:var(--ink)}
.pa-inner .cta-section .card p,.pa-inner .text-bg-dark .card p{color:var(--body)}
/* a card inside a dark band is still a card: the band's 720px centred measure
   is for the band's own copy, and left the pricing footnote a short rule under
   a wide card */
.pa-inner .cta-section .card p,
.pa-inner .text-bg-dark .card p{max-width:none;margin-left:0;margin-right:0}
.pa-inner .cta-section .card .text-muted,
.pa-inner .text-bg-dark .card .text-muted{color:var(--soft)!important}
.pa-inner .cta-section .card a:not(.btn),
.pa-inner .text-bg-dark .card a:not(.btn){color:var(--blue)}
.pa-inner .cta-section .card .btn-outline-primary,
.pa-inner .text-bg-dark .card .btn-outline-primary{background:#fff;border-color:var(--line);color:var(--ink)}
/* card buttons size to their card, not to the CTA rule above */
.pa-inner .cta-section .card .btn,.pa-inner .text-bg-dark .card .btn{min-width:0;width:100%}

/* ------------------------------------------------------------------ tables */
.pa-inner .table{margin-bottom:0;border-color:var(--line)}
.pa-inner .card .table{min-width:680px}
.pa-inner .table thead th{background:var(--navy);color:#fff;font-weight:700;
  font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  border-color:var(--navy);padding:15px 16px;white-space:nowrap}
.pa-inner .table tbody td{padding:14px 16px;font-size:14.5px;color:var(--body);
  border-color:var(--line2);vertical-align:middle}
.pa-inner .table tbody td:first-child{font-weight:600;color:var(--ink);background:var(--alt)}
.pa-inner .table-hover tbody tr:hover{background:var(--tint2)}
.pa-inner .table-responsive{border-radius:var(--r);overflow-x:auto;-webkit-overflow-scrolling:touch}
.pa-inner .table + p{font-size:13px;color:var(--soft);margin:14px 0 0;text-align:center}

/* ------------------------------------------------------------------- stats */
.pa-inner .stats-wrapper{display:flex;flex-wrap:wrap;gap:18px}
.pa-inner .stats-item{flex:1 1 180px;font-size:14px;color:var(--soft);
  border-left:2px solid var(--tint);padding-left:16px}
.pa-inner .stats-item .h3{font-size:26px;font-weight:800;color:var(--ink)}

/* ------------------------------------------------------------- steps flow */
.pa-inner .steps-flow .card{overflow:visible}
.pa-inner .steps-flow .card-body{padding-top:30px}
.pa-inner .steps-flow .badge{position:absolute;top:-11px;
  background:var(--blue)!important;font-weight:700;padding:6px 12px;border-radius:100px}
.pa-inner .steps-flow .h4{font-size:16px;font-weight:700}

/* ----------------------------------------------------------------- pricing */
/* The plan cards sit on the dark band, and the band centres its content. That
   is right for the band's own heading and wrong inside a card: it pushed each
   feature to the middle of the row while its check mark stayed pinned at the
   row's left edge, so the two read as unrelated. Inside a card the feature list
   is a left aligned unit; only the plan name, price and description stay
   centred. Scoped to this section, not to .text-bg-dark generally. */
.pa-inner .pricing-plans .card{text-align:left}
.pa-inner .pricing-plans .card-body{padding:32px 30px}
.pa-inner .pricing-plans .plan-name,
.pa-inner .pricing-plans .pricing-price-block,
.pa-inner .pricing-plans > .container > .row > [class*="col-"] .card > .card-body > .card-text{
  text-align:center}
.pa-inner .pricing-plans .plan-name{font-size:15px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);margin:0 0 14px}
.pa-inner .pricing-plans .pricing-price-block{padding-bottom:18px;
  border-bottom:1px solid var(--line);margin-bottom:18px}
.pa-inner .pricing-plans .plan-price,
.pa-inner .pricing-plans .pricing-price-block .h2{font-size:34px;font-weight:800;
  letter-spacing:-.03em;color:var(--ink);line-height:1.1;margin:0}
.pa-inner .pricing-plans .pricing-price-block p{font-size:13.5px;color:var(--soft);
  max-width:none}
.pa-inner .pricing-plans .card-text{font-size:14.5px;color:var(--body);
  max-width:none;margin-bottom:20px}
.pa-inner .pricing-plans .plan-includes{font-size:11px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--label);
  margin:0 0 14px;max-width:none}
.pa-inner .pricing-plans .icon-list{margin:0}
.pa-inner .pricing-plans .icon-list li{font-size:14.5px;margin-bottom:11px;
  padding-left:26px;padding-right:0;break-inside:avoid}
.pa-inner .pricing-plans .icon-list li:last-child{margin-bottom:0}
/* Enterprise carries two dozen features; one centred column of them was two
   screens tall. Two balanced columns on desktop, one on mobile. */
@media (min-width:768px){
  .pa-inner .pricing-plans .plan-enterprise .icon-list{columns:2;column-gap:44px;
    column-rule:1px solid var(--line2)}
}
@media (min-width:1200px){
  .pa-inner .pricing-plans .plan-enterprise .icon-list{columns:3;column-gap:36px}
  .pa-inner .pricing-plans .plan-enterprise .card-text{max-width:78ch;
    margin-left:auto;margin-right:auto}
}
/* the line that closes a plan is a footnote on the feature list, not a second
   description, so it sits left with the features rather than centred under them */
.pa-inner .pricing-plans .plan-note{margin:16px 0 0;padding-top:14px;
  border-top:1px solid var(--line2);font-size:13.5px;color:var(--soft);
  text-align:left}

/* the call to action sits at the same height in every card */
.pa-inner .pricing-plans .mt-auto{padding-top:26px!important;margin-top:auto}
.pa-inner .pricing-plans .btn{width:100%;justify-content:center;min-width:0}
.pa-inner .pricing-plans .row{--bs-gutter-x:1.5rem;--bs-gutter-y:1.5rem}

.pa-inner .pricing-card{overflow:visible!important}
.pa-inner .pricing-badge{position:absolute;top:-13px;right:18px;z-index:5;
  padding:7px 15px;border-radius:100px;font-size:12px;font-weight:700;
  background:var(--blue);color:#fff}
.pa-inner .plan-price{font-size:32px;font-weight:800;color:var(--ink);
  margin:8px 0 0;letter-spacing:-.03em}
.pa-inner .pricing-price-block{display:flex;flex-direction:column;justify-content:center}

/* --------------------------------------------------------------- resources */
/* The workflow-timeline component shipped with no styles at all, so its steps
   wrapped raggedly across the row with the arrows landing wherever Bootstrap's
   col-auto put them and the icons floating left of their labels. It appears on
   twenty pages, several of them in the primary navigation. Laid out as an even
   grid: icon over label, one step per cell, numbered because the order is the
   point. No card chrome -- the alignment does the work. */
/* Laid out as a centred wrap rather than a grid. The flows run to eight, ten,
   thirteen and sixteen steps, and a fixed track count left an orphan hanging at
   the left of the last row (a seven-column grid turns eight steps into 7 + 1).
   Wrapping centred keeps the last row deliberate at every count. Bootstrap's
   .align-items-center utility carries !important, so the top alignment has to
   as well, or a three-line label lifts its own icon out of line with the rest. */
.pa-inner .workflow-timeline .workflow-row{display:flex;flex-wrap:wrap;
  justify-content:center;align-items:flex-start!important;gap:30px 26px;
  counter-reset:wf;margin:0}
.pa-inner .workflow-timeline .workflow-arrow,
.pa-inner .workflow-timeline .row > .d-md-none{display:none!important}
.pa-inner .workflow-timeline .workflow-step{flex:0 0 152px;width:auto;
  max-width:152px;padding:0;display:flex;flex-direction:column;
  align-items:center;text-align:center;position:relative}
.pa-inner .workflow-timeline .workflow-step:before{counter-increment:wf;
  content:counter(wf,decimal-leading-zero);font-size:10.5px;font-weight:800;
  letter-spacing:.12em;color:var(--blue-l);margin-bottom:10px}
.pa-inner .workflow-timeline .workflow-step .icon-box{width:46px;height:46px;
  border-radius:12px;margin:0 0 12px}
.pa-inner .workflow-timeline .workflow-step .icon-box i{font-size:21px}
.pa-inner .workflow-timeline .workflow-step :is(h3,.h6){font-size:12.5px;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);line-height:1.45;margin:0;min-height:0}
/* How many steps fit on a row is a property of the flow, not of the template.
   Eight steps wrapping at six leaves a two-step orphan; capped at four it reads
   4 + 4. The cap is set per section from its own step count: 8 -> wf-4,
   9, 10, 13 and 14 -> wf-5. Both are maximums, so narrower viewports still fit
   fewer per row. Step 152px, gap 26px. */
.pa-inner .workflow-timeline .workflow-row.wf-4{max-width:686px;margin-inline:auto}
.pa-inner .workflow-timeline .workflow-row.wf-5{max-width:864px;margin-inline:auto}

@media (max-width:575px){
  .pa-inner .workflow-timeline .workflow-row{gap:24px 16px}
  .pa-inner .workflow-timeline .workflow-step{flex:0 0 136px;max-width:136px}
}

/* The six guide pages that carry .guides-workflow also carry .workflow-timeline
   and use exactly the same markup, so the older fixed-width treatment written
   for them is redundant. Left in place it fought the grid above: 210px per step
   against an auto-fit track pushed the row 21px past the viewport at 768px.
   Removed rather than patched -- the component styles already cover these
   sections, and nothing on the site uses .guides-workflow on its own. */

.pa-inner .sitemap-links{list-style:none;margin:0;padding:0}
.pa-inner .sitemap-links a{color:var(--body);padding:3px 7px;border-radius:6px;display:inline-block}
.pa-inner .sitemap-links a:hover{background:var(--tint2);color:var(--blue2)}
.pa-inner .sitemap-links > li > a{font-weight:600;color:var(--ink)}
.pa-inner .sitemap-links > li > ul{list-style:none;padding-left:14px}
/* a sitemap is a reference index, not prose: run it in columns so it is
   scannable instead of two screens tall */
@media (min-width:768px){
  .pa-inner .sitemap-links > li > ul{columns:2;column-gap:34px;
    column-rule:1px solid var(--line2)}
  .pa-inner .sitemap-links > li > ul > li{break-inside:avoid}
}
@media (min-width:1200px){
  .pa-inner .sitemap-links > li > ul{columns:3;column-gap:30px}
}

.pa-inner .glossary-nav a{padding:8px 10px;border-radius:8px;display:inline-block}
.pa-inner .glossary-nav a:hover{background:var(--tint2)}
.pa-inner .nav-carriers .nav-link{text-align:left;border-radius:10px;color:var(--body);
  font-weight:600;font-size:14.5px}
.pa-inner .nav-carriers .nav-link.active{background:var(--navy);color:#fff}
.pa-inner .nav-carriers .nav-link span{display:none}

/* the old marketing gradient wash, retuned to the family palette */
.pa-inner .gradient-background{background-image:linear-gradient(170deg,#fff 0%,#fff 28%,
  var(--tint2) 42%,var(--tint) 55%,var(--tint2) 66%,#fff 80%,#fff 100%);
  background-size:cover;background-repeat:no-repeat}

.pa-inner .logos-section{background:var(--alt);border:1px solid var(--line);
  border-radius:var(--r);padding:18px}
.pa-inner .logos-main{display:flex;align-items:center;gap:26px}
.pa-inner .logo-text{min-width:200px;color:var(--label);font-size:12.5px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.5}
.pa-inner .logo-item{border-left:1px solid var(--line)}
.pa-inner .logo-item img{opacity:.75}
.pa-inner .logo-item img:hover{opacity:1}

/* ------------------------------------------------------------------- forms */
/* Request a Demo and Contact Us are the two conversion surfaces on the site;
   their controls were still Bootstrap defaults. */
.pa-inner :is(.form-control,.form-select){border:1px solid var(--line);
  border-radius:10px;padding:11px 14px;font-size:14.5px;color:var(--ink);
  background-color:#fff;transition:border-color .14s, box-shadow .14s}
.pa-inner :is(.form-control,.form-select):focus{border-color:var(--blue-l);
  box-shadow:0 0 0 3px rgba(27,75,196,.12);outline:0}
.pa-inner .form-control::placeholder{color:var(--label)}
.pa-inner .form-label,.pa-inner label{font-size:13px;font-weight:600;
  color:var(--body);margin-bottom:6px}
.pa-inner .form-check-label{font-weight:500;font-size:14px;margin-bottom:0}
.pa-inner .form-check-input{border-color:#C6D3EE;width:1.05em;height:1.05em;
  margin-top:.2em}
.pa-inner .form-check-input:checked{background-color:var(--blue);
  border-color:var(--blue)}
.pa-inner .form-check-input:focus{border-color:var(--blue-l);
  box-shadow:0 0 0 3px rgba(27,75,196,.12)}
.pa-inner form .btn{padding:13px 26px;font-size:15px}

/* --------------------------------------------------------- vendor disclaimer */
/* The disclaimer partial is a bare .container outside any section, so it had
   no padding, no measure and no separation: four paragraphs of small print
   running the full 1144px against the footer. It appears on every integration
   page. */
.pa-inner .container.small{max-width:1192px;padding:34px 24px 44px;
  margin-top:0;border-top:1px solid var(--line2)}
.pa-inner .container.small p{font-size:12.5px;line-height:1.7;color:var(--soft);
  max-width:96ch;margin:0 auto}
.pa-inner .container.small strong{color:var(--body)}

/* --------------------------------------------------------------- utilities */
/* The pricing comparison table marks an included feature with Bootstrap's
   .text-success, which is green. The brand system has no green in it, so the
   affirmative mark uses the family blue. */
.pa-inner .text-success{color:var(--blue)!important}
.pa-inner .bg-success{background:var(--blue)!important}
.pa-inner .fs-26{font-size:24px!important}
.pa-inner .badge.bg-primary,.pa-inner .bg-primary{background:var(--blue)!important}
.pa-inner .border{border-color:var(--line)!important}
.pa-inner .rounded,.pa-inner .rounded-3{border-radius:12px!important}
.pa-inner .shadow-sm{box-shadow:var(--sh)!important}
.pa-inner .breadcrumb{font-size:13px;margin-bottom:18px}
.pa-inner .breadcrumb a{color:var(--soft)}
.pa-inner .breadcrumb a:hover{color:var(--blue)}
.pa-inner .breadcrumb-item.active{color:var(--label)}
/* a video well: framed and filled, so the section reads as designed before
   the embed has loaded rather than as an empty right half */
.pa-inner .ratio{background:var(--alt);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.pa-inner video,.pa-inner iframe{max-width:100%;border-radius:12px}
.pa-inner .ratio > iframe,.pa-inner .ratio > video{border-radius:0;border:0}
@media (min-width:992px){
  /* the copy beside a video sits with it, not above it */
  .pa-inner .row:has(> [class*="col-"] .ratio){align-items:center}
}

/* ------------------------------------------------------------------ mobile */
@media (max-width:991px){
  .pa-inner .section{padding:60px 0}
  .pa-inner .hero{padding:52px 0 44px}
  .pa-inner .container,.pa-inner .container-fluid{padding-left:24px;padding-right:24px}
  .pa-inner .logos-main{flex-direction:column;align-items:flex-start;gap:12px}
  .pa-inner .logo-text{min-width:100%}
}
@media (max-width:767px){
  .pa-inner .section{padding:48px 0}
  .pa-inner .card-body{padding:22px 20px}
  .pa-inner .stats-wrapper{gap:14px}
  .pa-inner .table thead th,.pa-inner .table tbody td{padding:11px 12px;font-size:13.5px}
}

/* ==========================================================================
   MODERNIZATION PASS - inner pages
   Everything below is scoped to .pa-inner and changes no page markup. The
   composition classes it targets (cmp-grid2/3, cmp-aside, cmp-cards,
   cmp-table, cmp-faq, hero-tight/split/guide/wide) were already applied to
   every view by the earlier composition pass, which is what makes a single
   shared layer able to lift all 145 inner pages at once.
   ========================================================================== */

/* ---------- 1. section rhythm -------------------------------------------- */
/* The site had one tinted ground, so a long page read as a single sheet with
   faint seams. Two steps, alternating across the tinted bands only, give a
   page a rhythm of white -> near-white -> white -> pale navy without touching
   the white sections between them. Counted 16 deep, because the longest pages
   carry thirteen tinted bands. */
.pa-inner main :is(.section.bg-light,.section.cmp-flow){background:var(--alt)!important}
.pa-inner main :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow){background:var(--alt2)!important}
.pa-inner main :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow){background:var(--alt)!important}
.pa-inner main :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow){background:var(--alt2)!important}
.pa-inner main :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow){background:var(--alt)!important}
.pa-inner main :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow){background:var(--alt2)!important}
.pa-inner main :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow){background:var(--alt)!important}
.pa-inner main :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow){background:var(--alt2)!important}
.pa-inner main :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow){background:var(--alt)!important}
.pa-inner main :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow){background:var(--alt2)!important}
.pa-inner main :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow){background:var(--alt)!important}
.pa-inner main :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow){background:var(--alt2)!important}
.pa-inner main :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow){background:var(--alt)!important}
.pa-inner main :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow){background:var(--alt2)!important}
.pa-inner main :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow){background:var(--alt)!important}
.pa-inner main :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow)
  ~ :is(.section.bg-light,.section.cmp-flow){background:var(--alt2)!important}
.pa-inner .section.bg-light{border-color:var(--line-cool)!important}
.pa-inner .section.bg-light + .section.bg-light{border-top:0!important}
/* The accounting architecture sections are the spine of this site: the tables
   that lay out agency bill against direct bill, the chart of accounts, the
   reconciliation and settlement steps. They always take the deeper ground. */
.pa-inner .cmp-table.bg-light,.pa-inner .cmp-table{background:var(--alt2)!important;
  border-top:1px solid var(--line-cool);border-bottom:1px solid var(--line-cool)}

/* ---------- 2. heroes ----------------------------------------------------- */
/* 80 of the 145 inner pages opened with a centred H1 and a centred paragraph
   in the middle of a 1144px canvas, which is the single biggest waste of real
   estate on the site. Left aligned, with the supporting line held to a
   readable measure, the same content reads as a considered opening. */
.pa-inner .hero{background:linear-gradient(180deg,#FFFFFF 0%,#FAFBFE 58%,var(--alt) 100%);
  border-bottom:1px solid var(--line-cool);padding:64px 0 56px}
.pa-inner .hero.text-center,.pa-inner .hero.text-center .container,
.pa-inner .hero-tight,.pa-inner .hero-wide,.pa-inner .hero-guide{text-align:left}
.pa-inner .hero h1{margin:0 0 4px;max-width:20ch}
.pa-inner .hero .lead,.pa-inner .hero p{margin-top:16px}
.pa-inner .hero .breadcrumb{justify-content:flex-start}
.pa-inner .hero .d-grid,.pa-inner .hero .d-md-flex{justify-content:flex-start!important}
@media (min-width:992px){
  /* hero-tight and hero-wide: the headline takes the left two thirds, the
     supporting paragraph and actions sit beneath it at a readable measure. */
  .pa-inner :is(.hero-tight,.hero-wide) h1{max-width:17ch;font-size:clamp(30px,3.5vw,42px)}
  .pa-inner :is(.hero-tight,.hero-wide) .lead,
  .pa-inner :is(.hero-tight,.hero-wide) > .container p{max-width:74ch;font-size:17px}
  /* hero-split already divides the canvas. It gave the headline the narrower
     column and put the actions under the paragraph, so the left column ended
     half empty. Even the columns and move the actions under the headline. */
  .pa-inner .hero-split .row > [class*="col-"]{
    grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:14px 60px;align-items:center}
  .pa-inner .hero-split h1{grid-column:1;grid-row:1;align-self:end;max-width:none}
  .pa-inner .hero-split .lead,.pa-inner .hero-split p{grid-column:2;grid-row:1 / span 2;
    align-self:center;max-width:64ch;margin:0}
  .pa-inner .hero-split .d-grid,.pa-inner .hero-split .d-md-flex,
  .pa-inner .hero-split > .container .mt-3{grid-column:1;grid-row:2;align-self:start;
    justify-content:flex-start!important;margin-top:20px!important}
}

/* ---------- 4. cards and icons ------------------------------------------- */
/* Cards sat flat on the ground with a hairline border. A hair of shadow at
   rest and a 1px lift on the ones that are actually links is enough to tell
   a surface from the page without any of it reading as decoration. */
.pa-inner .card{box-shadow:var(--sh-hair);border-color:var(--line);
  transition:transform .15s,box-shadow .15s,border-color .15s}
.pa-inner .bg-light .card,.pa-inner .cmp-table .card{border-color:var(--line-cool)}
.pa-inner a.card:hover,.pa-inner .card:has(> a:only-child):hover,
.pa-inner .card:has(.stretched-link):hover{transform:translateY(-1px);
  box-shadow:var(--sh-lift);border-color:var(--line-cool)}
/* Equal height inside a row, so no card in a row is shorter than its neighbour
   and no row ends ragged. */
.pa-inner .row > [class*="col-"]{display:flex;flex-direction:column}
.pa-inner .row > [class*="col-"] > .card{height:100%}
/* Icon containers carried the blue at a size too small to register. Navy on a
   pale navy chip, with a hairline ring, makes them part of the system. */
.pa-inner .icon-box{background:var(--navy-tint);
  box-shadow:inset 0 0 0 1px var(--line-cool)}
.pa-inner .icon-box i{color:var(--navy)}
.pa-inner .bg-light .icon-box{background:#fff}
/* Check and square list glyphs keep the blue: they mark items, not sections. */
.pa-inner .icon-list .bi-check-circle{color:var(--blue)}

/* ---------- 5. closing call to action ------------------------------------ */
/* The navy ran the full width of the viewport, so the page ended in a slab.
   Contained in a panel it reads as a card that closes the page. */
.pa-inner .cta-section,.pa-inner .section.text-bg-dark{background:var(--alt)!important;
  padding:54px 0;border-top:1px solid var(--line-cool)}
.pa-inner .cta-section > .container,.pa-inner .section.text-bg-dark > .container{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy3) 100%);
  border-radius:20px;padding:44px 50px;color:#fff}
.pa-inner .cta-section h2,.pa-inner .section.text-bg-dark h2{color:#fff}
.pa-inner .cta-section p,.pa-inner .section.text-bg-dark p{color:#C9D4E8}
@media (max-width:767px){
  .pa-inner .cta-section > .container,.pa-inner .section.text-bg-dark > .container{
    padding:30px 22px;border-radius:16px}
}

/* ---------- 6. tables ----------------------------------------------------- */
/* 50 pages carry a comparison or chart-of-accounts table. They are the most
   accounting-specific thing on the site and deserve to look deliberate. */
.pa-inner .cmp-table table{border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid var(--line-cool);border-radius:12px;overflow:hidden}
.pa-inner .cmp-table thead th{background:var(--navy);color:#fff;font-weight:700;
  font-size:13.5px;letter-spacing:.01em;border:0;padding:13px 16px}
.pa-inner .cmp-table tbody td{border-top:1px solid var(--line2);padding:12px 16px;
  font-size:14.5px;vertical-align:top}
.pa-inner .cmp-table tbody tr:nth-child(even) td{background:#FAFBFE}
.pa-inner .cmp-table tbody tr:hover td{background:var(--navy-tint)}
.pa-inner .cmp-table td:first-child{font-weight:600;color:var(--ink)}

/* ---------- 7. heading alignment ------------------------------------------
   Almost every interior section opened with a centred H2 sitting over
   left-aligned prose and a left-aligned checklist. The mismatch is what made
   these pages read as a wall of blocks rather than a composed page. Aligning
   the heading with the content it introduces is a small change repeated about
   eight hundred times, and it does more for the site than any other rule here.
   Card and FAQ sections that are genuinely centred keep their centring. */
/* Bootstrap's .text-center carries !important, so undoing it needs the same,
   exactly as the existing .cmp-wide rule above does. */
.pa-inner :is(.cmp-grid2,.cmp-grid3,.cmp-grid4,.cmp-table,.cmp-media)
  > .container > .text-center{text-align:left!important}
.pa-inner :is(.cmp-grid2,.cmp-grid3,.cmp-grid4,.cmp-table,.cmp-media)
  > .container > .text-center > :is(h2,.h2,p){text-align:left;margin-left:0;margin-right:0}
.pa-inner :is(.cmp-grid2,.cmp-grid3,.cmp-grid4,.cmp-table)
  > .container > :is(h2,.h2,.text-center > h2){max-width:34ch;margin-left:0;margin-right:0}
/* The column rule between checklist columns read as an accidental divider
   wherever the last column was short. The gap alone separates them. */
.pa-inner [class*="cmp-grid"] > .container > ul{column-rule:none}

/* ---------- 8. the closing panel uses its width ---------------------------
   The contained panel put a centred heading over centred buttons, which left
   both halves of a 1100px panel half empty. Message left, actions right. */
@media (min-width:768px){
  .pa-inner .cta-section .cta-wrapper{display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(0,auto);gap:20px 44px;align-items:center}
  .pa-inner .cta-section .cta-content{grid-column:1;text-align:left}
  .pa-inner .cta-section .cta-content h2{text-align:left;margin:0}
  .pa-inner .cta-section .cta-content p{text-align:left;margin:12px 0 0}
  .pa-inner .cta-section .cta-buttons{grid-column:2;margin:0!important;
    justify-content:flex-end!important;flex-wrap:nowrap}
}

/* ---------- 9. the video well -------------------------------------------- */
/* Its copy column was a third of the canvas for a heading and four lines,
   which left the heading breaking over three lines beside a wide embed. */
@media (min-width:992px){
  .pa-inner .cmp-media .row > .col-lg-4{flex:0 0 auto;width:38%}
  .pa-inner .cmp-media .row > .col-lg-8{flex:0 0 auto;width:62%}
}

/* ---------- 11. the aside heading column ---------------------------------
   cmp-long gave the heading 0.6fr, about 295px, which is fine for a four word
   heading and breaks a fifty character one over four short lines. Widening it
   to 0.68fr costs the paragraph nothing, since that column is capped at 86ch
   by its own measure rule rather than by the grid. */
@media (min-width:992px){
  .pa-inner .cmp-aside.cmp-long > .container{
    grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr)}
}

/* ---------- 12. corrections after the new rules --------------------------- */
/* Section 5 sets the copy colour for the contained dark panel. A white card
   sitting inside that panel, which is how the pricing plans are built, must
   keep the normal palette; the earlier rules that did this now need restating
   because section 5 comes after them in the cascade. */
.pa-inner .cta-section .card,.pa-inner .section.text-bg-dark .card{color:var(--body)}
.pa-inner .cta-section .card p,.pa-inner .section.text-bg-dark .card p{color:var(--body)}
.pa-inner .cta-section .card :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4),
.pa-inner .section.text-bg-dark .card :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4){color:var(--ink)}
.pa-inner .cta-section .card .text-muted,
.pa-inner .section.text-bg-dark .card .text-muted{color:var(--soft)!important}
.pa-inner .cta-section .card li,.pa-inner .section.text-bg-dark .card li{color:var(--body)}
.pa-inner .cta-section .card .h6,.pa-inner .section.text-bg-dark .card .h6{color:var(--label)}

/* The hero paragraph kept the centred layout's auto margins, so it started
   part way across the canvas while the headline above it started at the left
   edge. Both now share one left edge. */
.pa-inner .hero .lead,.pa-inner .hero > .container p,
.pa-inner .hero .mt-3,.pa-inner .hero .my-3{margin-left:0;margin-right:0}
.pa-inner .hero > .container > .row > [class*="col-"]{text-align:left}

/* ==========================================================================
   ON THIS PAGE - one component, three placements
   Markup comes from templates/onpage.php. The card is a short list of the
   page's chapters, never an index, so it is small enough to sit in the hero
   rather than costing the page a band of its own.

   .pa-onpage--hero    a card in the hero's right column, or in the column the
                       guide pages already reserved for their own version
   .pa-onpage--below   a compact strip under the hero, for pages whose hero
                       right side is already carrying copy or a visual
   ========================================================================== */
.pa-onpage{background:#fff;border:1px solid var(--line-cool);border-top:3px solid var(--navy);
  border-radius:var(--r);box-shadow:var(--sh-hair);padding:18px 20px 14px}
.pa-onpage-label{margin:0 0 8px}
.pa-onpage-toggle{display:block;width:100%;text-align:left;background:none;border:0;
  padding:0;font:inherit;font-size:11px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--navy);cursor:default}
.pa-onpage-list{list-style:none;margin:0;padding:0}
.pa-onpage-list li + li{border-top:1px solid var(--line2)}
.pa-onpage-list a{display:flex;align-items:baseline;gap:10px;padding:9px 8px;
  margin:0 -8px;border-radius:8px;color:var(--ink);font-size:14px;font-weight:600;
  line-height:1.35;transition:background .14s,color .14s,box-shadow .14s}
.pa-onpage-list a::before{content:"";flex:none;width:5px;height:5px;margin-top:6px;
  border-right:1.6px solid var(--blue);border-bottom:1.6px solid var(--blue);
  transform:rotate(-45deg);transition:transform .15s}
.pa-onpage-list a:hover{background:var(--navy-tint);color:var(--navy);
  box-shadow:inset 3px 0 0 var(--navy)}
.pa-onpage-list a:hover::before{transform:rotate(-45deg) translate(1.5px,1.5px)}
.pa-onpage-list a:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
/* Every entry has to land clear of the sticky header. */
.pa-inner h2[id],.pa-inner h3[id],.pa-inner section[id]{scroll-margin-top:100px}

/* ---- in the hero -------------------------------------------------------- */
/* templates/onpage.php adds .pa-hero-otc to the hero and a second column to
   its row. Splitting the row here is what turns a headline sitting alone in a
   1144px canvas into a balanced opening. */
@media (min-width:992px){
  .pa-inner .pa-hero-otc > .container > .row{display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,384px);gap:0 60px;align-items:center}
  .pa-inner .pa-hero-otc > .container > .row > [class*="col-"]{width:auto;max-width:none;flex:none}
  .pa-inner .pa-hero-otc .pa-onpage-col{min-width:0}
  .pa-inner .pa-hero-otc h1{max-width:15ch}
  .pa-inner .pa-hero-otc .lead,.pa-inner .pa-hero-otc > .container p{max-width:52ch}
}
@media (max-width:991px){
  .pa-inner .pa-onpage-col{margin-top:28px}
}

/* ---- the compact strip below the hero ----------------------------------- */
.pa-onpage--below{max-width:1192px;margin:26px auto 0;width:calc(100% - 48px)}
@media (min-width:700px){
  .pa-onpage--below .pa-onpage-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:36px}
  .pa-onpage--below .pa-onpage-list li + li{border-top:0}
  .pa-onpage--below .pa-onpage-list li{border-top:1px solid var(--line2)}
  .pa-onpage--below .pa-onpage-list li:nth-child(1),
  .pa-onpage--below .pa-onpage-list li:nth-child(2){border-top:0}
}

/* ---- the phone: a real disclosure --------------------------------------- */
/* Without JavaScript the list is simply open, which is why the button starts
   aria-expanded="true". js/site.js sets data-pa-js on the document and only
   then does the card become collapsible, and only at phone widths. */
@media (max-width:699px){
  .pa-onpage{padding:4px 16px}
  [data-pa-js] .pa-onpage-toggle{display:flex;align-items:center;justify-content:space-between;
    gap:12px;cursor:pointer;padding:15px 0;min-height:44px}
  [data-pa-js] .pa-onpage-toggle::after{content:"";width:8px;height:8px;flex:none;
    border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
  [data-pa-js] .pa-onpage-toggle[aria-expanded="true"]::after{
    transform:rotate(-135deg) translate(-3px,-3px)}
  [data-pa-js] .pa-onpage-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  [data-pa-js] .pa-onpage[data-open="false"] .pa-onpage-list{display:none}
  [data-pa-js] .pa-onpage-label{margin:0}
  [data-pa-js] .pa-onpage[data-open="true"] .pa-onpage-list{
    padding-bottom:12px;border-top:1px solid var(--line2);margin-top:2px}
  .pa-onpage--below{margin-top:20px;width:calc(100% - 40px)}
  .pa-onpage-list a{padding:11px 8px;font-size:13.8px}
}
@media (prefers-reduced-motion:reduce){
  .pa-onpage-toggle::after{transition:none}
  .pa-onpage-list a:hover::before{transform:rotate(-45deg)}
}

/* The aside sections align their heading with their copy through a grid that
   only exists at 992px and up, so on a phone the heading fell back to centred
   over left-aligned prose. Same alignment at every width. */
.pa-inner .cmp-aside > .container > .text-center{text-align:left!important}
.pa-inner .cmp-aside > .container > .text-center > :is(h2,.h2,p){text-align:left}