/*
 * Website plan comparison matrix — shared by /website-pricing and
 * /websites-for-cpa-accounting-firms (partial: offshoring/custom/partials/website-pricing-matrix).
 * Every rule is scoped under .Choose_Plan so the generic class names below
 * (.btn, .no, .ck, .chip, .val ...) never leak into the rest of either page.
 * Loaded BEFORE a page's own stylesheet, so page-level overrides still win.
 */

section.Choose_Plan{
    background: #fff;
    padding: 72px 0 72px 0;
}

section.Choose_Plan h2{
    font-family: Inter;
    font-size: 36px;
    font-weight: 700;
    line-height: 43.2px;
    letter-spacing: -0.02em;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #26244A;
    margin-bottom: 28px;
}

/* Buttons — reference's .btn/.btn-secondary system, used by the matrix's
   tfoot CTA links (class="btn btn-secondary"). */
.Choose_Plan .btn{display:inline-block;font-size:14px;font-weight:600;padding:11px 22px;border-radius:4px;border:1.5px solid transparent;cursor:pointer;transition:background .18s,border-color .18s,color .18s,box-shadow .18s;font-family:inherit}
.Choose_Plan .btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(58,88,239,.35)}
.Choose_Plan .btn-primary{background:#3A58EF;color:#fff}
.Choose_Plan .btn-primary:hover{background:#314BD0}
.Choose_Plan .btn-secondary{background:#fff;color:#3A58EF;border-color:#3A58EF}
.Choose_Plan .btn-secondary:hover,
.Choose_Plan .btn-secondary.is-hovered{background:#EBEEFD}
.Choose_Plan .btn-secondary:active,
.Choose_Plan .btn-secondary.is-pressed{background:#3A58EF;border-color:#3A58EF;color:#fff}

/* ── Matrix ── */
.Choose_Plan .matrix-tools{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;flex-wrap:wrap}

/* ── Tab toggle (pill) ── */
.Choose_Plan .tab-toggle-wrap{display:flex;justify-content:center;margin-bottom:14px}
.Choose_Plan .tab-toggle{display:inline-flex;gap:8px;background:#fff;border:1px solid #EAECF0;border-radius:50px;padding:8px}
.Choose_Plan .tab-toggle-btn{font-family:'Inter',sans-serif;font-size:14px;font-weight:500;line-height:20px;padding:10px 24px;border-radius:50px;border:none;cursor:pointer;background:#EBEEFD;color:#5D667B;white-space:nowrap;transition:background .15s,color .15s}
.Choose_Plan .tab-toggle-btn.is-active{background:#182878;color:#fff;box-shadow:0px 4px 4px rgba(24,39,75,.06),0px 2px 4px rgba(24,39,75,.02),0px 0px 2px #e0e0e0}
.Choose_Plan .sub-toggle-wrap{position:relative;display:flex;justify-content:center;align-items:center;margin-bottom:32px}
.Choose_Plan .group-actions-btn{position:absolute;right:0;top:50%;transform:translateY(-50%);white-space:nowrap}

/* ── Billing toggle (Monthly / Yearly) — Figma node 10940:54932 ── */
.Choose_Plan .billing-toggle-wrap{position:absolute;left:0;top:50%;transform:translateY(-50%)}
.Choose_Plan .billing-toggle{display:flex;gap:2px;align-items:stretch;background:#F9FAFB;border-radius:12px;padding:2px}
.Choose_Plan .billing-toggle-btn{font-family:'Inter',sans-serif;font-size:16px;font-weight:500;line-height:24px;border:none;cursor:pointer;background:transparent;color:#5D667B;border-radius:10px;padding:8px 20px;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;transition:background .15s,color .15s}
.Choose_Plan .billing-toggle-btn.is-active{background:#182878;color:#fff}
.Choose_Plan .billing-toggle-btn .save-chip{display:inline-flex;align-items:center;background:#F0C33A;color:#101828;font-weight:600;font-size:16px;line-height:24px;border-radius:4px;padding:0 8px}
@media (max-width:900px){
  .Choose_Plan .sub-toggle-wrap{flex-wrap:wrap;gap:14px}
  .Choose_Plan .billing-toggle-wrap{position:static;transform:none;order:-1;width:100%;display:flex;justify-content:center}
  .Choose_Plan .group-actions-btn{position:static;transform:none}
}
.Choose_Plan .sub-toggle{display:inline-flex;gap:4px;background:#EBEEFD;border:1px solid #EAECF0;border-radius:10px;padding:4px;flex-wrap:wrap;justify-content:center}
.Choose_Plan .sub-toggle-btn{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;padding:8px 16px;border-radius:7px;border:none;cursor:pointer;background:transparent;color:#667085;white-space:nowrap;transition:background .15s,color .15s}
.Choose_Plan .sub-toggle-btn.is-active{background:#fff;color:#101828;box-shadow:0 1px 2px rgba(16,24,40,.08)}
.Choose_Plan .legend{display:flex;gap:18px;font-size:12.5px;color:#667085;align-items:center;flex-wrap:wrap}
.Choose_Plan .legend i{font-style:normal;display:inline-flex;align-items:center;gap:6px}
.Choose_Plan .linkbtn{background:none;border:none;font-family:inherit;font-size:13px;font-weight:600;color:#3A58EF;cursor:pointer;padding:6px 0}
.Choose_Plan .linkbtn:hover{color:#314BD0}
.Choose_Plan .scroll-x{overflow-x:auto;overflow-y:clip;border:1px solid #EAECF0;border-radius:12px;background:#fff}
.Choose_Plan table.matrix{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;min-width:1040px}
/* Tab-driven column visibility. Every data column carries exactly one
   letter class (col-c .. col-i) matching the source spreadsheet's
   column. Each combination of the two tab levels (DIFU/DIY, and the
   Website/Marketing/BD sub-choice) maps to one of five distinct sets
   of visible columns; col-i (Custom) is included in every one of
   them, always trailing as the last column. Hidden by default; the
   active view-* class on the <table> re-shows only its columns. */
.Choose_Plan .col-c,
.Choose_Plan .col-d,
.Choose_Plan .col-e,
.Choose_Plan .col-f,
.Choose_Plan .col-g,
.Choose_Plan .col-h,
.Choose_Plan .col-i{display:none}
/* col-d ($149 "Website + Content", DIFU) sits on the WEBSITE tab, beside col-c.
   The Website tab is one view class for BOTH delivery models (computeViewClass
   returns 'view-website' either way), so on the DIY tab the page JS hides it with
   hide-col-d: col-d's plan is DIFU-only, so planForColumn() finds nothing there. */
.Choose_Plan table.matrix.view-website .col-c,
.Choose_Plan table.matrix.view-website .col-d,
.Choose_Plan table.matrix.view-website .col-i{display:table-cell}
/* col-d moved to the Website tab above - it is no longer offered here. */
.Choose_Plan table.matrix.view-difu-marketing .col-f,
.Choose_Plan table.matrix.view-difu-marketing .col-i{display:table-cell}
.Choose_Plan table.matrix.view-difu-bd .col-h,
.Choose_Plan table.matrix.view-difu-bd .col-i{display:table-cell}
.Choose_Plan table.matrix.view-diy-marketing .col-e,
.Choose_Plan table.matrix.view-diy-marketing .col-i{display:table-cell}
.Choose_Plan table.matrix.view-diy-bd .col-h,
.Choose_Plan table.matrix.view-diy-bd .col-i{display:table-cell}
/* A column whose plan is switched off in the admin (or has no plan for the
   active DIFU/DIY tab) is hidden outright — set from the page JS. */
.Choose_Plan table.matrix.hide-col-c .col-c,
.Choose_Plan table.matrix.hide-col-d .col-d,
.Choose_Plan table.matrix.hide-col-e .col-e,
.Choose_Plan table.matrix.hide-col-f .col-f,
.Choose_Plan table.matrix.hide-col-h .col-h{display:none}
/* col-h holds both the DIFU and the DIY BD plan; where their values differ the
   cell carries one span per tab and the active view-* class keeps only its own. */
.Choose_Plan table.matrix .only-diy,
.Choose_Plan table.matrix.view-diy-marketing .only-difu,
.Choose_Plan table.matrix.view-diy-bd .only-difu{display:none}
.Choose_Plan table.matrix.view-diy-marketing .only-diy,
.Choose_Plan table.matrix.view-diy-bd .only-diy{display:inline}
.Choose_Plan .subgrp td{background:#EBEEFD;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#667085;padding:9px 14px 9px 36px;border-bottom:1px solid #EAECF0}
.Choose_Plan .matrix thead th{background:#fff;box-shadow:0 1px 0 #D0D5DD;border-bottom:1px solid #D0D5DD;padding:14px 14px 8px;text-align:center;vertical-align:top;position:relative}
.Choose_Plan .matrix thead th:first-child{text-align:left;position:sticky;left:0;z-index:12;min-width:320px;width:34%;padding-left:36px;background:#fff}
.Choose_Plan .th-name{display:block;font-size:11px;font-weight:700;color:#101828;margin-top:6px}
.Choose_Plan .th-price{display:inline-block;font-family:'Inter', ui-monospace, SFMono-Regular, Menlo, monospace;font-size:16px;font-weight:700;color:#3A58EF;background:#EBEEFD;padding:3px 12px;border-radius:8px}
.Choose_Plan .th-note{display:block;font-size:11px;color:#667085;font-weight:500;margin-top:2px}
.Choose_Plan .matrix th:first-child .th-name{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#667085;font-weight:700}
.Choose_Plan .matrix tbody td{padding:11px 14px;text-align:center;border-bottom:1px solid #EAECF0;color:#475467;vertical-align:middle}
.Choose_Plan .matrix tbody td:first-child{text-align:left;position:sticky;left:0;background:#fff;z-index:10;font-weight:500;color:#101828;border-right:1px solid #EAECF0;padding-left:36px}
.Choose_Plan .matrix tbody tr:hover td{background:#F9FAFB}
.Choose_Plan .matrix tbody tr:hover td:first-child{background:#F9FAFB}
.Choose_Plan .grp>td{background:#12327B!important;color:#fff!important;padding:0!important;border-bottom:none!important}
.Choose_Plan .grp>td button{width:100%;display:flex;align-items:center;gap:10px;background:none;border:none;color:#fff;font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:12px 14px 12px 8px;cursor:pointer;text-align:left}
.Choose_Plan .grp>td button .count{margin-left:auto;font-family:'Inter', ui-monospace, SFMono-Regular, Menlo, monospace;font-size:11px;font-weight:500;color:rgba(255,255,255,.5);letter-spacing:0;text-transform:none}
.Choose_Plan .chev{transition:transform .2s;flex-shrink:0;transform-origin:50% 50%}
.Choose_Plan tbody.is-closed .chev{transform:rotate(-90deg)}
.Choose_Plan tbody.is-closed tr:not(.grp){display:none}
.Choose_Plan .cell-note{display:block;font-size:11.5px;color:#667085;font-weight:400;margin-top:2px;line-height:1.4}
.Choose_Plan .ck{display:inline-block;width:18px;height:18px;vertical-align:middle;font-size:0;line-height:0;color:transparent;background:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyMiAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iMTEiIGZpbGw9IiNEOERFRkMiLz4KPHBhdGggZD0iTTE0Ljk0NzUgNy4wNDA5NUMxNC42NzMzIDcuMDYxMyAxNC40MTgzIDcuMTg5MzggMTQuMjM4MiA3LjM5NzJMMTAuMzUwNyAxMS45MDY2QzEwLjI5ODcgMTEuOTY2MiAxMC4yMzQ4IDEyLjAxNDQgMTAuMTYzMiAxMi4wNDhDMTAuMDkxNSAxMi4wODE2IDEwLjAxMzYgMTIuMDk5OCA5LjkzNDQ5IDEyLjEwMTZDOS44NTUzNyAxMi4xMDM0IDkuNzc2NzUgMTIuMDg4NiA5LjcwMzY2IDEyLjA1ODJDOS42MzA1OCAxMi4wMjc5IDkuNTY0NjMgMTEuOTgyNiA5LjUxMDA0IDExLjkyNTNMNy43Mjg3OSAxMC4wNTAzQzcuNTM4OTkgOS44NTEgNy4yNzc3OSA5LjczNTIzIDcuMDAyNjMgOS43Mjg0OUM2LjcyNzQ4IDkuNzIxNzUgNi40NjA5MiA5LjgyNDU5IDYuMjYxNiAxMC4wMTQ0QzYuMDYyMjcgMTAuMjA0MiA1Ljk0NjUgMTAuNDY1NCA1LjkzOTc2IDEwLjc0MDVDNS45MzMwMyAxMS4wMTU3IDYuMDM1ODYgMTEuMjgyMiA2LjIyNTY2IDExLjQ4MTZMOS4yMjg3OSAxNC42MzE2QzkuMzI5MTMgMTQuNzM1NyA5LjQ1MDAxIDE0LjgxNzggOS41ODM3NiAxNC44NzI4QzkuNzE3NTEgMTQuOTI3NyA5Ljg2MTIyIDE0Ljk1NDIgMTAuMDA1OCAxNC45NTA3QzEwLjE1MDMgMTQuOTQ3MiAxMC4yOTI2IDE0LjkxMzcgMTAuNDIzNSAxNC44NTIzQzEwLjU1NDQgMTQuNzkwOSAxMC42NzExIDE0LjcwMyAxMC43NjYzIDE0LjU5NDFMMTUuODEgOC43NTM0NUMxNS45NDExIDguNTk3MTQgMTYuMDIzNSA4LjQwNTg0IDE2LjA0NyA4LjIwMzIyQzE2LjA3MDYgOC4wMDA1OSAxNi4wMzQyIDcuNzk1NSAxNS45NDI0IDcuNjEzMzFDMTUuODUwNyA3LjQzMTEzIDE1LjcwNzUgNy4yNzk4MiAxNS41MzA3IDcuMTc4MUMxNS4zNTM5IDcuMDc2MzcgMTUuMTUxMiA3LjAyODY5IDE0Ljk0NzUgNy4wNDA5NVoiIGZpbGw9IiMzQTU4RUYiLz4KPC9zdmc+Cg==') center/contain no-repeat}
.Choose_Plan .no{display:inline-block;width:18px;height:18px;vertical-align:middle;font-size:0;line-height:0;color:transparent;background:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyMiAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iMTEiIGZpbGw9IiNGRUU0RTIiLz4KPHJlY3QgeD0iNi4yMDExNyIgeT0iMTQuMzM2NSIgd2lkdGg9IjEwLjgiIGhlaWdodD0iMS44IiByeD0iMC45IiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgNi4yMDExNyAxNC4zMzY1KSIgZmlsbD0iI0YwNDQzOCIvPgo8cmVjdCB4PSI3LjQ3NjU2IiB5PSI2LjY5OTcxIiB3aWR0aD0iMTAuOCIgaGVpZ2h0PSIxLjgiIHJ4PSIwLjkiIHRyYW5zZm9ybT0icm90YXRlKDQ1IDcuNDc2NTYgNi42OTk3MSkiIGZpbGw9IiNGMDQ0MzgiLz4KPC9zdmc+Cg==') center/contain no-repeat}
.Choose_Plan .val{font-family:'Inter', ui-monospace, SFMono-Regular, Menlo, monospace;font-size:12.5px;font-weight:600;color:#101828}
.Choose_Plan .chip{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:4px;letter-spacing:.01em}
.Choose_Plan .chip-green{background:#ECFDF3;color:#067647}
.Choose_Plan .chip-amber{background:#FFFAEB;color:#B54708}
.Choose_Plan .chip-blue{background:#EBEEFD;color:#3A58EF}
.Choose_Plan .chip-grey{background:#F2F4F7;color:#667085}
.Choose_Plan .matrix tfoot td{padding:16px 14px;text-align:center;background:#fff;box-shadow:0 -1px 0 #D0D5DD;border-top:1px solid #D0D5DD}
.Choose_Plan .matrix tfoot td:first-child{position:sticky;left:0;z-index:12;background:#fff;text-align:left;font-size:12px;color:#667085;padding-left:36px}

/* ── Pinned header/footer (JS-driven — see script) ──
   .scroll-x scrolls horizontally, and per spec that makes it a scroll
   container on both axes, which breaks native position:sticky for
   top/bottom inside it. These two bars are real fixed-position clones
   that the script keeps in sync with scroll position and horizontal
   offset. Hidden and inert until the script activates them. */
.Choose_Plan .matrix-pin{position:fixed;left:0;overflow:hidden;z-index:40;background:#fff;display:none;pointer-events:none}
.Choose_Plan .matrix-pin.is-active{display:block;pointer-events:auto}
.Choose_Plan .matrix-pin--head{top:0;box-shadow:0 1px 0 #D0D5DD}
.Choose_Plan .matrix-pin--foot{bottom:0;box-shadow:0 -1px 0 #D0D5DD}
.Choose_Plan .matrix-pin-inner table{border-collapse:separate;border-spacing:0;table-layout:fixed}
.Choose_Plan .matrix-pin-inner th,
.Choose_Plan .matrix-pin-inner td{box-sizing:border-box}
.Choose_Plan .matrix-pin--head .matrix-pin-inner th{background:#fff;padding:16px 14px;text-align:center;vertical-align:bottom;border-bottom:none}
.Choose_Plan .matrix-pin--head .matrix-pin-inner th:first-child{text-align:left}
.Choose_Plan .matrix-pin--foot .matrix-pin-inner td{padding:16px 14px;text-align:center;background:#fff;border-top:none}
.Choose_Plan .matrix-pin--foot .matrix-pin-inner td:first-child{text-align:left;font-size:12px;color:#667085}

.Choose_Plan .matrix tbody tr.subgrp td {
    background: #EBEEFD;
    padding: 0;
}

/* Collapsible sub-groups: the subgrp row toggles the feature rows under it
   (up to the next subgrp row). Rows are hidden via .is-sub-hidden from the
   page JS (website-pricing-matrix-js). */
.Choose_Plan .subgrp td button{width:100%;display:flex;align-items:center;gap:8px;background:none;border:none;font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#12327B;padding: 9px 14px 9px 30px;cursor:pointer;text-align:left}
.Choose_Plan .subgrp td button:hover{color:#3A58EF}
.Choose_Plan .subgrp td button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px rgba(58,88,239,.35)}
.Choose_Plan tr.subgrp.is-closed .chev{transform:rotate(-90deg)}
.Choose_Plan .matrix tbody tr.is-sub-hidden{display:none}

@media (max-width:767.51px) {
section.Choose_Plan h2{
      font-size: 24px;
      margin-bottom: 0px;
  }
}