:root{
    --bg:#f6f7fb; /* page background */
    --panel:#ffffff; /* cards and panels */
    --ink:#0b1021; /* primary text */
    --muted:#667085; /* muted text */
    --brand:#f0702f; /* Matomo orange (approx) */
    --brand-ink:#fff;
    --line:#e7e9ef; /* borders */
    --chip:#f2f4f7; /* subtle chips */
    --success:#0ea66a;
    --shadow: 0 1px 2px rgba(16,24,40,.06), 0 6px 20px rgba(16,24,40,.08);
    --radius: 14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0; font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color:var(--ink);
}
.container{max-width: 1400px;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 24px}
.brand{display:flex;gap:10px;align-items:center;font-weight:700}
.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--brand)}
.cart{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);cursor:pointer}
.cart svg{width:18px;height:18px}
.hero{padding:24px 0 16px}
.title{font-size:26px;line-height:1.2;margin:4px 0 6px;font-weight:800;letter-spacing:-.01em}
.subtitle{color:var(--muted);font-size:14px}
.cta-row{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.pc-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);cursor:pointer;font-weight:600}
.pc-btn.primary{background:var(--brand);border-color:transparent;color:var(--brand-ink);}
.pc-btn:focus-visible{outline:3px solid rgba(240,112,47,.35);outline-offset:2px}


/* Plan switcher */
.plan-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.plans{display:flex;gap:8px;flex-wrap:wrap}
.plan{position:relative;display:flex;flex-direction:column;gap:6px;min-width:140px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--chip);cursor:pointer}
.plan.active{border-color:var(--brand);background:#fff0e9}
.plan .pc-label{font-weight:700;font-size:14px}
.plan .note{font-size:12px;color:var(--muted)}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:16px;margin-top:16px}
@media (max-width: 980px){.grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width: 640px){.grid{grid-template-columns:1fr}}

/* Card */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:8px}
.card h3{margin:0;font-size:15px;letter-spacing:.2px}
.desc{color:var(--muted);font-size:13px;min-height:40px}
.price{font-weight:800;margin-top:auto}
.meta{display:flex;align-items:center;gap:8px}
.actions{display:flex;gap:8px}
.pill{font-size:12px;border:1px solid var(--line);background:var(--chip);padding:6px 10px;border-radius:8px}
.add{margin-left:auto;background:var(--brand);border:none;color:#fff;border-radius:8px;padding:8px 12px;font-weight:700;cursor:pointer}
.add:disabled{opacity:.5;cursor:not-allowed}
.details{background:#fff;border:1px solid var(--line);padding:8px 12px;border-radius:8px;cursor:pointer}

.footer-note{color:var(--muted);font-size:13px;margin:28px 0 8px;text-align:center}
.billing-toggle{display:flex;align-items:center;gap:8px;margin-left:auto}
.toggle{position:relative;width:48px;height:26px;background:var(--chip);border:1px solid var(--line);border-radius:999px;cursor:pointer}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border:1px solid var(--line);border-radius:50%;transition:transform .25s ease}
.toggle.on{background:#ffe7db;border-color:#ffc6aa}
.toggle.on::after{transform:translateX(22px)}

.benefits{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-top:28px}
.benefits h2{margin:0 0 12px;text-align:center}
.benefit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.benefit{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--chip)}

/* --- Cart Modal (right sheet) --- */
.modal-backdrop{
    position:fixed; inset:0; background:rgba(15,23,42,.35);
    opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:60;
}
.modal-backdrop.open{opacity:1; pointer-events:auto;}
.cart-sheet{
    position:fixed; top:0; right:-420px; width:360px; max-width:90vw; height:100vh;
    background:var(--panel); border-left:1px solid var(--line); box-shadow:var(--shadow);
    display:flex; flex-direction:column; transition:right .24s ease; z-index:61;
}
.modal-backdrop.open .cart-sheet{ right:0; }

.sheet-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px; border-bottom:1px solid var(--line); font-weight:700;
}
.sheet-body{ padding:12px 18px; overflow:auto; flex:1; }
.sheet-footer{ padding:14px 18px; border-top:1px solid var(--line); }
.cart-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.cart-row{
    display:grid; grid-template-columns:1fr auto auto; align-items:center;
    gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--chip);
}
.cart-title{ font-weight:600; }
.cart-sub{ font-size:12px; color:var(--muted); }
.cart-price{ font-weight:800; }
.cart-remove{
    border:none; background:transparent; cursor:pointer; font-weight:800; color:#b42318; padding:6px;
}
.cart-empty{ color:var(--muted); text-align:center; padding:18px; }
.total-row{ display:flex; justify-content:space-between; align-items:center; font-weight:800; margin:10px 0 12px; }
.checkout-btn{
    width:100%; padding:12px 14px; border-radius:10px; border:none; cursor:pointer;
    background:var(--brand); color:#fff; font-weight:800;
 }

/* pricing grid */
.pricing{margin-top:28px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width: 1024px){.pricing{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 640px){.pricing{grid-template-columns:1fr}}

.bundle-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:12px}
/*.bundle-card.popular{outline:2px solid #ffb38e}*/
.badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:#fff0e9;color:#a64210;border:1px solid #ffd6c4;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800}

.bundle-card h3{margin:0;font-size:16px}
.bundle-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:var(--chip);font-size:12px;color:var(--muted)}
.bigprice{font-size:28px;font-weight:900;letter-spacing:.3px}
.small{font-size:12px;color:var(--muted)}
.divider{height:1px;background:var(--line);margin:2px 0}
ul.pc{list-style:none;padding:0;margin:0;display:grid;gap:8px}
li.pc{display:flex;gap:8px;align-items:flex-start}
li.pc::before{content:"✓";font-weight:900;margin-top:1px}

/* Modern pill tabs with sliding background */
.tabs-navigations {
    /* layout */
    display: flex !important;
    gap: 4px;
    padding: 4px !important;
    margin: 0 !important;
    width: 100%;

    /* look */
    background: #e8e8e8;
    border: 0 !important;
    border-radius: 999px !important;
    overflow: hidden;

    /* slider variables */
    position: relative;
    --active-index: 0;
    --tabs-count: 3;
}

/* IMPORTANT: neutralize Bootstrap justified/table styles */
.tabs-navigations.btn-group-justified,
.tabs-navigations.btn-group-justified > li {
    float: none !important;
    display: flex !important;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.tabs-navigations > li {
    flex: 1 1 0;   /* equal widths */
    border: 0 !important;
    height: auto !important;
    position: relative;
    z-index: 2;    /* above slider */
}

/* clickable area */
.tabs-navigations > li > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 40px;

    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;

    font-weight: 600;
    color: #666;
    text-decoration: none;

    transition: color 0.2s ease;
}

/* remove your old spacer pseudo elements */
.tabs-navigations li a:before,
.tabs-navigations li a:after {
    content: none !important;
    display: none !important;
}

/* active label */
.tabs-navigations li.active > a {
    color: #fff !important;
}

/* the sliding pill */
.tabs-navigations::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;

    width: calc((100% - 8px - (4px * (var(--tabs-count) - 1))) / var(--tabs-count));
    border-radius: 999px;
    background: #0EA600;

    transform: translateX(calc(var(--active-index) * (100% + 4px)));
    transition: transform 0.25s ease;
    z-index: 1;
}

/* ===== Slider Tabs (pure CSS) ===== */

.slider-tabs {
    --gap: 4px;
    --pad: 4px;
    --h: 47px;
    --bg: #e9ecef;
    --active: #0ea600;
    --text: #495057;
    --text-active: #fff;
    --radius: 999px;

    --count: 5;
}

.slider-tabs[data-tabs="1"] { --count: 1; }
.slider-tabs[data-tabs="2"] { --count: 2; }
.slider-tabs[data-tabs="3"] { --count: 3; }
.slider-tabs[data-tabs="4"] { --count: 4; }
.slider-tabs[data-tabs="5"] { --count: 5; }

/* hide radios but keep accessible */
.slider-tabs__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* pill container */
.slider-tabs__nav {
    display: grid;
    grid-template-columns: repeat(var(--count), 1fr);
    gap: var(--gap);
    padding: 0;
    position: relative;
    overflow: hidden;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

/* tabs */
.slider-tabs__tab {
    height: var(--h);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px;

    cursor: pointer;
    user-select: none;

    font-weight: 600;
    color: var(--text);
    transition: color .2s ease, background-color .2s ease;
}

.slider-tabs__tab {
    border-right: 1px solid #DEE2E6;
}
.slider-tabs__tab:last-of-type {
    border-right: none;
}

.slider-tabs__tab:hover {
    color: #E67E22;
}

/* the sliding pill */
.slider-tabs__slider {
    display: none;
    position: absolute;
    top: var(--pad);
    bottom: var(--pad);
    left: var(--pad);

    width: calc((100% - (2 * var(--pad)) - ((var(--count) - 1) * var(--gap))) / var(--count));
    border-radius: var(--radius);
    background: var(--active);

    transform: translateX(0);
    transition: transform .25s ease;
    z-index: 0;
}

/* ensure labels sit above slider */
.slider-tabs__tab { position: relative; z-index: 1; }

/* active label color */
#tab-desc:checked ~ .slider-tabs__nav label[for="tab-desc"],
#tab-preview:checked ~ .slider-tabs__nav label[for="tab-preview"],
#tab-documentation:checked ~ .slider-tabs__nav label[for="tab-documentation"],
#tab-faq:checked ~ .slider-tabs__nav label[for="tab-faq"],
#tab-reviews:checked ~ .slider-tabs__nav label[for="tab-reviews"] {
    color: #E67E22;
}

/* slider position */
.slider-tabs__input[data-pos="0"]:checked ~ .slider-tabs__nav .slider-tabs__slider { transform: translateX(0%); }
.slider-tabs__input[data-pos="1"]:checked ~ .slider-tabs__nav .slider-tabs__slider { transform: translateX(calc(1 * (100% + var(--gap)))); }
.slider-tabs__input[data-pos="2"]:checked ~ .slider-tabs__nav .slider-tabs__slider { transform: translateX(calc(2 * (100% + var(--gap)))); }
.slider-tabs__input[data-pos="3"]:checked ~ .slider-tabs__nav .slider-tabs__slider { transform: translateX(calc(3 * (100% + var(--gap)))); }
.slider-tabs__input[data-pos="4"]:checked ~ .slider-tabs__nav .slider-tabs__slider { transform: translateX(calc(4 * (100% + var(--gap)))); }

/* panels */
.slider-tabs__panels { margin-top: 30px; }
.slider-tabs__panel { display: none; }

#tab-desc:checked ~ .slider-tabs__panels #description { display: block; }
#tab-preview:checked ~ .slider-tabs__panels #preview { display: block; }
#tab-documentation:checked ~ .slider-tabs__panels #documentation { display: block; }
#tab-faq:checked ~ .slider-tabs__panels #faq { display: block; }
#tab-reviews:checked ~ .slider-tabs__panels #reviews { display: block; }

.slider-tabs__nav .averageRating {
    margin: 0px 0px 0px 9px;
}

.tab-content{
    border-bottom: 0;
}
.tab-content .chat-bubble-border{
    border-radius: 32px 32px 0 32px;
}
.tab-content #description {}
.tab-content #description h3.highlightHeading,
.tab-content #description h4.highlightHeading{
    color: #0ea600;
}

.tab-content .right-div-readme p,
.tab-content .right-div-readme li,
.tab-content .left-div-readme p,
.tab-content .left-div-readme li {
    color: #727476;
    line-height: 25px;
}

.tab-content #description blockquote{
    font-family: 'Nunito', sans-serif;
}

.tab-content #description blockquote p{
    font-size: 16px !important;
    line-height: 24px !important;
    color: #333 !important;
    font-style: italic !important;
}
.tab-content #description blockquote p strong{
    font-style: normal !important;
    font-family: 'Nunito', sans-serif;
}

.main-div-readme {
  display: flex;
  gap: 48px;
}

.left-div-readme,
.right-div-readme {
  flex: 1;
}

.tab-content #description .main-div-readme {
    display: flex;
    margin-bottom: 5rem;
}
.tab-content #description .main-div-readme.readme-border {}
.tab-content #description .main-div-readme.readme-border .left-div-readme,
.tab-content #description .main-div-readme.readme-border .right-div-readme{
    padding: 32px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tab-content #description .main-div-readme.readme-border .right-div-readme::before{
    content: "";
    position: absolute;
    left: 0;
    top: 2rem;
    bottom: 2rem;
    width: 1px;
    background: #e9ecef;
}

.tab-content #description .main-div-readme.readme-border .right-div-readme ul::before{
    content: "";
    position: absolute;
    left: -1px;
    width: 3px;
    background: #0EA600;
    height: 68px;
}

.tab-content #description .main-div-readme img{
    max-width: 100%;
}

.tab-content #description ul.has-icons {
    list-style-type: none;
    padding-inline-start: 0;
}

.tab-content #description ul.has-icons li img{
    padding-bottom: 4px;
    padding-right: 3px;
}

.tab-content #description ul.has-icons li table td{
    line-height: 25px;
}

.tab-content #description table.readme-border{

}
.tab-content #description table.readme-border td{
    padding: 2rem;
    vertical-align: top;
    position: relative;
}

.tab-content #description table.readme-border td::after{
    content: "";
    position: absolute;
    left: 2rem;
    bottom: 2rem;
    width: 20%;
    height: 1px;
    background: #0ea600;
}

.tab-content #description table.readme-border td p img{
padding-bottom: 4px;
padding-right: 3px;
}

.tab-content #faq h3{
color: #333;
}

#tierSelectLoader{
  display:none;
  align-items:center;
  justify-content:center;
  height: 40px;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 4px;
  background: rgba(255,255,255,0.9);
}

#tierSelectLoader .tierSelectLoader__spinner{
  width:18px;
  height:18px;
  border:2px solid rgba(0,0,0,0.25);
  border-top-color: rgba(0,0,0,0.65);
  border-radius:50%;
  animation: tierSelectSpin 0.8s linear infinite;
}

@media (max-width: 768px){
.main-div-readme{
    flex-direction: column;
}
.left-div-readme,
.right-div-readme{
    width:100% !important;
}
}

.bundles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 60px;
}

.bundles-grid.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.bundle-card {
    background: white;
    border-radius: 16px;
    padding: 32px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    border: 2px solid #f0f0f0;
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bundle-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-color: #0ea600;
}

.bundle-card.popular {
    border-color: #0ea600;
    border-width: 3px;
}

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #0ea600;
    color: white;
    padding: 5px 16px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.bundle-tier {
    font-size: 2.0rem;
    color: #1a1a1a;
    margin-bottom: 8px;
    font-weight: 700;
}

.bundleslist .bundle-tier a {
    color: #1a1a1a;
}

.bundle-subtitle {
    color: #999;
    font-size: 1.4rem;
    margin-bottom: 24px;
    min-height: 100px;
    line-height: 1.4;
    font-weight: 400;
}

.legacy .bundle-subtitle{
    min-height: 75px;
}

.bundle-price {
    font-size: 2.8rem;
    color: #0ea600;
    font-weight: 700;
    margin-bottom: 6px;
}

.legacy .bundle-price{
    font-size: 2.0rem;
    margin-bottom: 30px;
}

.bundle-period {
    color: #666;
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.bundle-limits {
    background: #f8f9fa;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 20px;
    font-size: 1.4rem;
    color: #555;
    line-height: 1.4;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bundle-features {
    text-align: left;
    margin-bottom: 24px;
    flex-grow: 1;
}

.bundle-features h4 {
    font-size: 1.4rem;
    color: #1a1a1a;
    margin-bottom: 12px;
    font-weight: 700;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    padding: 4px 0;
    font-size: 1.4rem;
    color: #555;
    line-height: 1.4;
    display: grid;
    grid-template-columns: 14px 1fr;
    column-gap: 1px;
    align-items: start;
}

.feature-list li:before {
    content: "•";
    color: #0ea600;
    font-weight: bold;
    display: inline-block;
    width: 16px;
}

.feature-list li:has(> strong):before {
    content: none;
}

.feature-list li > strong {
    white-space: nowrap;
}

div.feature-column > ul > li a,
div.feature-column > ul > li {
    color: rgb(39, 174, 96);
}

.bundle-cta {
    width: 100%;
    padding: 12px;
    background: #0ea600;
    color: white !important;
    border: none;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: auto;
    text-decoration: none;
    display: inline-block;
}

.bundle-cta:hover {
    background: #01B62D;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
    color: white !important;
}

.bundle-cta.secondary {
    background: #6c757d;
    color: white !important;
}

.bundle-cta.secondary:hover {
    background: #5a6268;
    color: white !important;
}


/* Billing Toggle - Pill Tabs */
.billing-toggle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 40px;
}

.billing-pills {
    background: #e8e8e8;
    border-radius: 30px;
    padding: 4px;
    display: inline-flex;
    position: relative;
    isolation: isolate;
    border-radius: 999px;
}

.billing-pills::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 999px;
    background: #0ea600;
    transform: translateX(0);
    transition: transform 260ms cubic-bezier(.2,.8,.2,1);
    z-index: 0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.10);
}

.billing-pills.monthly::before { transform: translateX(0); }
.billing-pills.annual::before  { transform: translateX(100%); }

.billing-pill {
    padding: 10px 28px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #666;
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: color 200ms ease, transform 200ms ease;
}

.billing-pill:hover,
.billing-pill:active,
.billing-pill:focus {
    background: transparent;
    color: #333;
    outline: none;
}

.billing-pill.active {
    color: #fff;
}

.billing-pill:active { transform: scale(0.98); }

.billing-pill:focus-visible {
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.35);
}

.billing-savings-badge {
    position: absolute;
    top: -8px;
    right: -12px;
    background: #FF6B35;
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 10px;
}

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #0ea600;
    color: white;
    padding: 5px 16px;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
}

.bundleslist {
    text-align: center;
}

.bundleslist a {
    color: #0ea600;
}

.bundleslist h4 a {
    color: #000;
}

/* Comparison Table */
.comparison-section {
    margin: 60px 0 80px;
}

.comparison-toggle {
    width: 100%;
    background: white;
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    padding: 24px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    transition: all 0.3s ease;
}

.comparison-toggle:hover {
    border-color: #0ea600;
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.1);
}

.toggle-icon {
    font-size: 2rem;
    font-weight: 300;
    color: #666;
}

.comparison-table-wrapper {
    margin-top: 30px;
    background: white;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    overflow-x: auto;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.4rem;
}

.comparison-table thead th {
    background: #f8f9fa;
    padding: 16px 20px;
    text-align: center;
    font-weight: 700;
    color: #1a1a1a;
    border-bottom: 2px solid #e5e5e5;
    position: sticky;
    top: 0;
    z-index: 10;
}

.comparison-table thead th.feature-col {
    text-align: left;
    background: white;
    border-bottom: 2px solid #e5e5e5;
}

.comparison-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
}

.comparison-table tbody tr:hover {
    background: #fafafa;
}

.comparison-table td {
    padding: 16px 20px;
    text-align: center;
    color: #555;
}

.comparison-table td strong{

}

.comparison-table td.feature-name {
    text-align: left;
    font-weight: 600;
    color: #333;
}

.comparison-table .category-row td {
    background: #f8f9fa;
    padding: 12px 20px;
    font-size: 1.4rem;
    color: #1a1a1a;
    border-top: 2px solid #e5e5e5;
}

.comparison-table .category-row td a {
    font-size: 1.4rem;
    color: #0ea600;
}

.comparison-table .check {
    color: #0ea600;
    font-size: 1.9rem;
    font-weight: 700;
}

.comparison-table .unavailable {
    position: relative;
    cursor: help;
}

.comparison-able .unavailable:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
}

.comparison-table .unavailable:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
}

.comparison-table .plugin-link {
    cursor: pointer;
    color: #0ea600;
    text-decoration: none;
    position: relative;
    font-weight: 600;
    font-size: 1.4rem;
}

.comparison-table .plugin-link:hover {
    text-decoration: underline;
}

.comparison-table .feature-name {
    position: relative;
}

.comparison-table .plugin-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    background: #333;
    color: white;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: normal;
    width: 280px;
    text-align: left;
    z-index: 10000;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    font-weight: normal;
}

.comparison-table .ui-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 20px;
    border: 6px solid transparent;
    border-top-color: #333;
}

.comparison-table .plugin-link:hover .plugin-tooltip {
    display: block;
}

.included-features {
    background: #fafafa;
    border-radius: 16px;
    padding: 50px 40px;
    margin-bottom: 40px;
    box-shadow: none;
    border: 1px solid #e5e5e5;
}

.included-features h3 {
    text-align: center;
    font-size: 2rem;
    color: #1a1a1a;
    margin-bottom: 40px;
    font-weight: 700;
}

.included-features p{ text-align: center; color: #666; font-size: 1.4rem; margin-bottom: 40px; max-width: 800px; margin-left: auto; margin-right: auto; }

.included-features-data {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
}

.features-grid {
    display: block;
}

.feature-column ul { list-style: none; }
.feature-column li { padding: 8px 0; font-size: 1.4rem; color: #27AE60; font-weight: 500; line-height: 1.5; }
.feature-column li:before { content: "•"; color: #27AE60; font-weight: bold; display: inline-block; width: 16px; margin-right: 5px; }

.faq-section { background: #f5f5f5; padding: 30px 40px 60px 40px;  }
.faq-section h2 { text-align: center; font-size: 3rem; font-weight: 700; color: #1a1a1a; margin-bottom: 40px; }
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; max-width: 1200px; margin: 0 auto; }
.faq-item h3 { font-size: 1.7rem; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; line-height: 1.4; }
.faq-item p { font-size: 1.4rem; color: #555; line-height: 1.6; }
.faq-item a { color: #27AE60; }
.bottom-cta { text-align: center; margin-bottom: 40px; }
.get-started-btn {
    display: inline-block;
    background: #27AE60;
    color: white !important;
    padding: 14px 36px;
    border-radius: 8px;
    font-size: 1.7rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 15px;
}
.free-trial-note {
    color: #666;
    font-size: 1.4rem;
    font-style: italic;
}

@media (max-width: 1200px) {
    .bundles-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .included-features-data {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cloud-comparison {
        grid-template-columns: 1fr;
    }

    .cloud-plan-column {
        border-right: none;
        border-bottom: 1px solid #e5e5e5;
    }

    .cloud-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .bundles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .included-features-data {
        grid-template-columns: 1fr;
    }

    .cloud-features-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {
    .bundles-grid {
        grid-template-columns: 1fr;
    }
    .faq-grid { grid-template-columns: repeat(1, 1fr); }

}

@media (max-width: 768px) {

    #comparison-table-cloud,
    #comparison-table-cloud thead,
    #comparison-table-cloud tbody,
    #comparison-table-cloud tr{
        display: block;
        width: 100%;
    }

    /* Disable sticky behaviour added by JS */
    #comparison-table-cloud thead th{
        position: static !important;
        top: auto !important;
    }

    #comparison-table-cloud thead{
        border: 3px solid #30519f;
        border-radius: 16px;
        margin-bottom: 30px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }

    #comparison-table-cloud thead th.pricingColumn{
        text-align: center !important;
        padding: 12px !important;
    }

    #comparison-table-cloud thead th.pricingColumn:first-of-type{
        border-radius: 12px 12px 0 0;
    }

    #comparison-table-cloud thead tr{
        padding: 0px 0px 30px 0px;
    }

    #comparison-table-cloud tbody{
        border: 0;
    }

    #comparison-table-cloud  tr{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 14px 0;
    }

    #comparison-table-cloud  tr > th{
        grid-column: 1 / -1;
        display: block;
        font-weight: 700;
        padding: 0 0 4px 0;
        border: 0;
        text-align: center !important;
    }

    #comparison-table-cloud  tr > td{
        display: block;
        padding: 10px 12px;
        border: 1px solid #eee;
        border-radius: 10px;
        background: #fff;
        margin: 0;
        min-width: 0;
    }

    /* Labels */
    #comparison-table-cloud  tr > td:nth-of-type(1)::before {
        content: "Business";
        display: block;
        font-size: 12px;
        font-weight: 700;
        color: #666;
        margin-bottom: 6px;
    }

    #comparison-table-cloud  tr > td:nth-of-type(2)::before {
        content: "Enterprise";
        display: block;
        font-size: 12px;
        font-weight: 700;
        color: #666;
        margin-bottom: 6px;
    }

    #comparison-table-cloud  tr > td .icon-check,
    #comparison-table-cloud  tr > td .icon-x {
        margin: 0 auto;
    }

    #comparison-table-cloud .highlight-border-sides {
        border-left: none !important;
        border-right: none !important;
    }

    /* Section header rows (Set up / Allowances / Features etc.) */
    #comparison-table-cloud  tr:has(th.topicSeparator){
        grid-template-columns: 1fr;          /* force single column */
        gap: 0;
        padding: 18px 0 10px;
        border-bottom: 0;
        margin-top: 10px;
    }

    #comparison-table-cloud  tr > th.topicSeparator {
        grid-column: 1 / -1;
        display: block;
        padding: 16px 22px !important;
        border-radius: 6px;
        background: #30519f !important;
        border: 0;
        color: #FFFFFF;
        margin-top: 1rem;
    }

    /* Hide the empty td cells on topicSeparator rows */
    #comparison-table-cloud  tr:has(th.topicSeparator) > td{
        display: none !important;
    }

    #comparison-table-cloud  .hidden.mobileOnly{
        display: block !important;
        visibility: visible !important;
    }

    #comparison-table-cloud  .hideOnMobile{
        display: none !important;
    }

    #comparison-table-cloud  button.enterprise-contact-button{
        display: none;
    }


    .comparison-table{
        border: 0;
    }

    .comparison-table thead{
        display: none;
    }

    /* category rows stay simple */
    .comparison-table tbody tr.category-row{
        display: block;
        margin: 18px 0 8px;
        border: 0;
    }
    .comparison-table tbody tr.category-row td{
        display: block;
        padding: 0;
        border: 0;
        background: transparent;
        color: #0ea600;
        margin-top: 3rem;
        margin-bottom: 1rem;
    }

    /* each feature row becomes a card */
    .comparison-table tbody tr:not(.category-row){
        display: block;
        border: 0;
        border-radius: 14px;
        background: #fff;
        padding: 12px 12px 6px;
        margin: 0 0 12px;
    }

    /* all cells become block rows */
    .comparison-table tbody tr:not(.category-row) > td{
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 10px 30px;
        border: 0;
        border-top: 1px solid #e7e9ef;
        min-width: 0;
    }

    /* feature name at top */
    .comparison-table tbody tr:not(.category-row) > td.feature-name{
        border-top: 0;
        padding-top: 0;
        font-weight: 800;
    }

    /* left “label” column for plan cells */
    .comparison-table tbody tr:not(.category-row) > td:not(.feature-name)::before{
        content: attr(data-label);
        font-weight: 600;
        color: #667085;
        flex: 0 0 42%;
        max-width: 42%;
    }

    /* value column */
    .comparison-table tbody tr:not(.category-row) > td:not(.feature-name){
        text-align: left;
    }

    /* Optional: make checkmarks align nicely */
    .comparison-table .check,
    .comparison-table .unavailable{
        display: inline-block;
        min-width: 1.2em;
        text-align: center;
    }
}

.orbit{
    width:34px;
    height:34px;
    border-radius:50%;
    position: relative;
    box-sizing: border-box;
    border:2px solid rgba(0,0,0,.15);
}

.orbit > span{
    position:absolute;
    inset:-2px;
    border-radius:50%;
    border:2px solid transparent;
    border-top-color: rgb(14 166 0);
    border-right-color: rgb(49 82 160);
    animation: orbit-spin 1s cubic-bezier(.6,.2,.2,.8) infinite;
}

@keyframes orbit-spin{
    to { transform: rotate(360deg); }
}

.loader-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:160px; /* gives it some breathing room; tweak or remove */
}

/* size variants */
.orbit.orbit--lg{
    width:64px;
    height:64px;
    border-width:3px;
}

.orbit.orbit--lg > span{
    inset:-3px;
    border-width:3px;
}

.price-display {
    position: relative;
}

.price-content {
    display: none;
}

.price-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.8);
    z-index: 10;
}

.price-loader__spinner {
    width: 22px;
    height: 22px;
    border: 3px solid #ddd;
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}