/* Scoped shared calculator: controls left, result and break-even chart right.
   On narrow screens the controls come first and the result follows them. */
.cost-calc{margin:0 0 70px;padding:40px 0 32px;border-top:2px solid #121714;border-bottom:1px solid #bbc3bb;scroll-margin-top:28px}
.cost-calc h2,.article .cost-calc h2{font-size:clamp(30px,4vw,48px);margin:0 0 14px;max-width:22ch}
.cost-calc>p{margin:0 0 30px;max-width:60ch;font-size:19px;color:#3d453c}
.cost-calc-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px 56px;align-items:start}
.cost-calc-result{border-left:1px solid #bbc3bb;padding-left:40px;min-width:0}
.cost-calc-controls{min-width:0}
.cost-calc label,.cost-calc legend{display:block;font-size:16px;font-weight:700;margin-bottom:8px;color:#121714;padding:0}
.cost-calc-money{display:flex;align-items:center;border:1px solid #8a948a;background:#fff}
.cost-calc-money:focus-within{outline:3px solid #174bef;outline-offset:4px}
.cost-calc-money span{padding:0 0 0 16px;font-size:26px;font-weight:700;color:#566055}
.cost-calc-money input{flex:1;min-width:0;min-height:60px;padding:8px 14px 8px 6px;border:0;background:transparent;color:#121714;font:inherit;font-size:26px;font-weight:750;letter-spacing:-.02em;font-variant-numeric:tabular-nums;outline:0}
.cost-calc-money:has(input[aria-invalid=true]){border:2px solid #9f211c}
.cost-calc-hint{font-size:16px;line-height:1.5;color:#4f584f;margin:8px 0 0}
.cost-calc-error{font-size:16px;color:#9f211c;margin:6px 0 0;font-weight:600}
.cost-calc input[type=range]{display:block;width:100%;height:44px;margin:12px 0 0;accent-color:#174bef;cursor:pointer}
.cost-calc-scale{display:flex;justify-content:space-between;font-size:14px;color:#566055;font-variant-numeric:tabular-nums;margin-top:-4px}
.cost-calc-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0 0}
.cost-calc-presets button{min-height:46px;background:transparent;border:1px solid #bbc3bb;color:#121714;font:inherit;font-size:16px;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums}
.cost-calc-presets button:hover{border-color:#121714}
.cost-calc-presets button[aria-pressed=true]{background:#121714;border-color:#121714;color:#fff}
.cost-calc-field{border:0;margin:28px 0 0;padding:0;min-width:0}
.cost-calc-segments{display:grid;grid-template-columns:1fr 1fr;border:1px solid #8a948a;background:#fff}
.cost-calc-segments-4{grid-template-columns:repeat(4,1fr)}
.cost-calc .cost-calc-segments label{position:relative;margin:0;font-weight:600;cursor:pointer}
.cost-calc-segments label+label{border-left:1px solid #bbc3bb}
.cost-calc-segments input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.cost-calc-segments span{display:flex;align-items:center;justify-content:center;min-height:48px;padding:6px 8px;text-align:center;line-height:1.25;font-size:16px}
.cost-calc-segments label:hover span{background:#eef0ec}
.cost-calc-segments input:checked+span{background:#121714;color:#fff}
.cost-calc-segments input:focus-visible+span{outline:3px solid #174bef;outline-offset:-3px}
.cost-calc input:focus-visible,.cost-calc button:focus-visible,.cost-calc a:focus-visible,.cost-calc-chart:focus-visible{outline:3px solid #174bef;outline-offset:4px}
.cost-calc-context{font-size:16px;margin:0 0 10px;color:#4f584f;font-variant-numeric:tabular-nums}
.cost-calc-outcome{font-size:clamp(28px,3vw,40px);line-height:1.08;letter-spacing:-.04em;color:#174bef;margin:0 0 12px;text-wrap:balance;font-variant-numeric:tabular-nums}
.cost-calc-outcome[data-tone=shopify]{color:#121714}
.cost-calc-sub{font-size:17px;line-height:1.55;color:#121714;margin:0 0 24px;max-width:52ch}
.cost-calc-sub [data-calc-monthly]{font-weight:700}
.cost-calc-chart{margin:0 0 6px;cursor:crosshair;touch-action:pan-y}
.cost-calc-chart svg{display:block;width:100%;height:auto;overflow:visible;font-variant-numeric:tabular-nums}
.cost-calc-chart .grid{stroke:#dfe3dd;stroke-width:1}
.cost-calc-chart .tick,.cost-calc-chart .axis{font-size:12px;fill:#566055}
.cost-calc-chart .saving{fill:#174bef;fill-opacity:.1}
.cost-calc-chart .gax,.cost-calc-chart .shopify,.cost-calc-chart .payments{stroke-width:2.5;stroke-linecap:round}
.cost-calc-chart .gax{stroke:#174bef}
.cost-calc-chart .shopify{stroke:#121714;stroke-dasharray:7 5}
.cost-calc-chart .payments{stroke:#121714}
.cost-calc-chart .label{font-size:13px;font-weight:700;fill:#121714}
.cost-calc-chart .gax-label{fill:#174bef}
.cost-calc-chart svg.narrow .label{font-size:11px}
.cost-calc-chart .now{stroke:#8a948a;stroke-width:1;stroke-dasharray:3 4}
.cost-calc-chart .dot{stroke:#f8f9f7;stroke-width:2}
.cost-calc-chart .gax-dot{fill:#174bef}
.cost-calc-chart .shopify-dot{fill:#566055}
.cost-calc-chart .payments-dot{fill:#121714}
.cost-calc-chart .cross{fill:#f8f9f7;stroke:#174bef;stroke-width:2.5}
.cost-calc-chart .tip{font-size:12px;font-weight:700;fill:#121714;paint-order:stroke;stroke:#f8f9f7;stroke-width:4px;stroke-linejoin:round}
.cost-calc-chart .hover[hidden]{display:none}
.cost-calc-break-even{font-size:17px;line-height:1.55;font-weight:600;color:#121714;margin:0 0 22px;max-width:52ch}
.cost-calc-caveat{font-size:16px;line-height:1.6;color:#4f584f;margin:20px 0 0;max-width:70ch}
.cost-calc .button,.article .cost-calc .button{margin-top:0;min-height:54px;padding:14px 20px;font-size:16px;gap:20px}
.cost-calc .button[aria-disabled=true]{opacity:.5;cursor:default}

/* The exhaustive four-setup table and the long rate notes stay in the page for
   everyone, opened from their own summary. Nothing is hidden from a reader
   without JavaScript: the defaults are in the markup. */
.cost-calc-details{margin-top:20px}
.cost-calc-details>summary{font-size:17px}
.cost-calc-compare{width:100%;border-collapse:collapse;margin:4px 0 18px;font-variant-numeric:tabular-nums}
.cost-calc-compare caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cost-calc-compare thead th{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#566055;text-align:right;padding:0 0 10px 12px;vertical-align:bottom}
.cost-calc-compare thead th:first-child{text-align:left;padding-left:0}
.cost-calc-compare tbody tr{border-top:1px solid #ccd1cc}
.cost-calc-compare tbody tr:last-child{border-bottom:1px solid #ccd1cc}
.cost-calc-compare tbody th{text-align:left;font-size:17px;font-weight:700;line-height:1.3;padding:16px 12px 16px 0;vertical-align:top}
.cost-calc-compare tbody td{text-align:right;font-size:17px;font-weight:750;color:#121714;padding:16px 0 16px 12px;vertical-align:top;white-space:nowrap}
.cost-calc-compare tbody th small{display:block;font-size:16px;font-weight:400;line-height:1.45;color:#4f584f;margin-top:6px;max-width:34ch}
.cost-calc-compare tbody tr.is-gax th{color:#174bef}
.cost-calc-compare tbody tr.is-pending th,.cost-calc-compare tbody tr.is-pending td{color:#4f584f;font-weight:400}
.cost-calc-compare tbody tr.is-pending td{font-size:16px}
/* A reference row: a comparison Shopify's UK terms do not sell, so it reads as evidence, not an option. */
.cost-calc-compare tbody tr.is-reference th>span{color:#3d453c}
.cost-calc-compare tbody th .cost-calc-flag{display:block;margin-top:8px;font-size:16px;font-weight:700;color:#9f211c}
.cost-calc-compare tbody th .cost-calc-flag:empty{display:none}
.cost-calc-notes{max-width:70ch;margin:4px 0 8px}
.cost-calc .fine,.article .cost-calc .fine{margin:0 0 12px;max-width:70ch;font-size:16px;line-height:1.6;color:#4f584f}
.cost-calc ::selection{background:#174bef;color:#fff}

@media(max-width:1000px){.cost-calc-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px 40px}.cost-calc-result{padding-left:28px}}
@media(max-width:860px){
 .cost-calc{margin-bottom:45px;padding:28px 0 24px}
 .cost-calc>p{margin-bottom:22px}
 .cost-calc-layout{grid-template-columns:1fr;gap:26px}
 .cost-calc-controls{order:1}
 .cost-calc-result{order:2;border-left:0;border-top:1px solid #bbc3bb;padding:24px 0 0}
 .cost-calc-outcome{font-size:30px}
 .cost-calc-compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .cost-calc-compare,.cost-calc-compare tbody,.cost-calc-compare tr,.cost-calc-compare th,.cost-calc-compare td{display:block;width:100%}
 .cost-calc-compare tbody tr{padding:14px 0}
 .cost-calc-compare tbody th{padding:0 0 8px}
 .cost-calc-compare tbody th small{max-width:none}
 .cost-calc-compare tbody td{display:flex;justify-content:space-between;gap:16px;padding:2px 0;border:0;font-size:17px;text-align:left}
 .cost-calc-compare tbody td::before{content:attr(data-label);color:#566055;font-size:16px;font-weight:400}
 .cost-calc-field{margin-top:22px}
}
@media(max-width:420px){
 .cost-calc-segments-4{grid-template-columns:1fr 1fr}
 .cost-calc-segments-4 label:nth-child(3){border-left:0}
 .cost-calc-segments-4 label:nth-child(n+3){border-top:1px solid #bbc3bb}
 .cost-calc-outcome{font-size:27px}
}
/* Average order value reuses the £ field, one size down. */
.cost-calc-field-value{margin-top:22px}
.cost-calc-money-small span{font-size:20px;padding-left:12px}
.cost-calc-money-small input{min-height:50px;font-size:20px;font-weight:700;padding:6px 12px 6px 4px}
/* One calm focus/error ring on the £ field: no inner input outline, error colour wins. */
.cost-calc .cost-calc-money input:focus-visible{outline:0}
.cost-calc-money:focus-within{outline:0;border-color:#174bef;box-shadow:0 0 0 1px #174bef}
.cost-calc-money:has(input[aria-invalid=true]){border:1px solid #9f211c;box-shadow:0 0 0 1px #9f211c}
@media (forced-colors:active){.cost-calc-money:focus-within{outline:2px solid CanvasText}}
/* The Gax plan choice: two named plans, each with its hosting and price in plain words. */
.cost-calc-gax-plan{margin:0 0 28px}
.cost-calc-gax-plan .cost-calc-segments span{flex-direction:column;gap:2px;min-height:56px;padding:10px 10px}
.cost-calc-gax-plan .cost-calc-segments span strong{font-weight:700;line-height:1.25}
.cost-calc-gax-plan .cost-calc-segments span em{font-style:normal;font-size:16px;font-weight:400;line-height:1.4}
@media(max-width:520px){
 .cost-calc-gax-plan .cost-calc-segments{grid-template-columns:1fr}
 .cost-calc-gax-plan .cost-calc-segments label+label{border-left:0;border-top:1px solid #bbc3bb}
}


/* The plan questions: three short steps above the comparison. Every row is a
   real radio in a real fieldset, at 16px or larger, and no answer is pre-picked.
   Selectors stay under .cost-calc so the article's own type rules cannot win. */
.cost-calc .cost-calc-costs-title{font-size:clamp(24px,2.6vw,32px);line-height:1.15;letter-spacing:-.03em;margin:36px 0 12px;max-width:26ch}
.cost-calc .cost-calc-wizard{margin:26px 0 0;padding:24px 0 4px;border-top:1px solid #ccd1cc;max-width:760px}
.cost-calc .wizard-progress{margin:0 0 10px;font-size:16px;font-weight:700;color:#566055;font-variant-numeric:tabular-nums}
.cost-calc .wizard-bar{height:4px;background:#dfe3dd;margin:0 0 24px;overflow:hidden}
.cost-calc .wizard-bar span{display:block;height:100%;width:33.333%;background:#174bef;transition:width .2s ease}
.cost-calc [data-gax-wizard][data-step="2"] .wizard-bar span{width:66.666%}
.cost-calc [data-gax-wizard][data-step="3"] .wizard-bar span,.cost-calc [data-gax-wizard][data-step="result"] .wizard-bar span{width:100%}
.cost-calc .wizard-step-title{font-size:20px;line-height:1.25;letter-spacing:-.02em;margin:0 0 14px;color:#121714;max-width:40ch}
.cost-calc .wizard-result-title{font-size:clamp(24px,3vw,32px);line-height:1.12;letter-spacing:-.03em;margin:0 0 14px;color:#121714;max-width:34ch;text-wrap:balance}
.cost-calc .wizard-step-title:focus-visible,.cost-calc .wizard-result-title:focus-visible{outline:3px solid #174bef;outline-offset:6px}
.cost-calc .wizard-hint{font-size:16px;line-height:1.55;color:#4f584f;margin:0 0 16px;max-width:62ch}
.cost-calc .wizard-field{border:0;margin:0 0 22px;padding:0;min-width:0}
.cost-calc .wizard-field legend{font-size:17px;font-weight:700;margin:0 0 12px;padding:0;color:#121714;max-width:52ch}
.cost-calc .wizard-options{display:grid;gap:8px}
.cost-calc .wizard-options label{display:flex;align-items:flex-start;gap:12px;min-height:52px;margin:0;padding:12px 14px;border:1px solid #8a948a;background:#fff;cursor:pointer;font-size:16px;font-weight:400;line-height:1.4}
.cost-calc .wizard-options label:hover{border-color:#121714}
.cost-calc .wizard-options label:has(input:checked){border-color:#121714;box-shadow:inset 0 0 0 1px #121714;background:#eef0ec}
.cost-calc .wizard-options input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:#174bef;cursor:pointer}
.cost-calc .wizard-options span{display:block;min-width:0}
.cost-calc .wizard-options strong{display:block;font-weight:700;color:#121714}
.cost-calc .wizard-options em{display:block;font-style:normal;font-size:16px;color:#4f584f;margin-top:2px}
.cost-calc .wizard-options input:focus-visible{outline:3px solid #174bef;outline-offset:3px}
.cost-calc .wizard-field[aria-invalid=true] legend{color:#9f211c}
.cost-calc .wizard-error{font-size:16px;font-weight:600;line-height:1.5;color:#9f211c;margin:10px 0 0}
.cost-calc .wizard-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:22px 0 0}
.cost-calc .wizard-actions .button,.cost-calc .wizard-result .button{min-height:54px;padding:14px 20px;font-size:17px;gap:20px;border:0;cursor:pointer;font-family:inherit}
.cost-calc .wizard-back{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:14px 20px;background:transparent;border:1px solid #121714;color:#121714;font:inherit;font-size:17px;font-weight:700;cursor:pointer}
.cost-calc .wizard-back:hover{background:#121714;color:#fff}
.cost-calc .wizard-back[hidden],.cost-calc .wizard-step[hidden],.cost-calc .wizard-result[hidden],.cost-calc .cost-calc-base[hidden]{display:none}
.cost-calc .wizard-result{margin:4px 0 0;padding:0 0 8px}
.cost-calc .wizard-result[data-tone=small] .wizard-result-title{color:#174bef}
.cost-calc .wizard-result-reason{font-size:17px;line-height:1.55;color:#121714;margin:0 0 20px;max-width:60ch}
.cost-calc .wizard-figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 20px;padding:16px 0;border-top:1px solid #bbc3bb;border-bottom:1px solid #bbc3bb}
.cost-calc .wizard-figures dt{font-size:16px;line-height:1.4;color:#566055;margin:0 0 4px}
.cost-calc .wizard-figures dd{margin:0;font-size:18px;font-weight:700;color:#121714;font-variant-numeric:tabular-nums}
.cost-calc .wizard-caveats{margin:0 0 22px;padding:0 0 0 20px;max-width:64ch}
.cost-calc .wizard-caveats li{font-size:16px;line-height:1.55;color:#3d453c;margin:0 0 8px}
.cost-calc .wizard-result .wizard-back{margin-top:12px}
@media(max-width:760px){.cost-calc .wizard-figures{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}}
@media(max-width:420px){.cost-calc .wizard-figures{grid-template-columns:1fr}.cost-calc .wizard-options label{padding:12px}}
@media (prefers-reduced-motion:reduce){.cost-calc .wizard-bar span{transition:none}}

/* When the wizard rules the small shop out, the plan says so in plain words. */
.cost-calc .cost-calc-plan-reason{margin:10px 0 0;padding-left:12px;border-left:3px solid #174bef;font-size:16px;line-height:1.5;font-weight:600;color:#3d453c;max-width:52ch}
.cost-calc .cost-calc-plan-reason[hidden]{display:none}
.cost-calc .cost-calc-segments label:has(input:disabled){cursor:not-allowed}
.cost-calc .cost-calc-segments input:disabled+span{background:#f1f3ef;color:#8a948a}
/* Base prices only: the provider's card rate is not ours to assume. */
.cost-calc .cost-calc-base{margin:0 0 24px;padding:16px 18px;border:1px solid #bbc3bb;background:#fff;max-width:56ch}
.cost-calc .cost-calc-base span{display:block;font-size:17px;line-height:1.55;font-weight:600;color:#121714;font-variant-numeric:tabular-nums}
.cost-calc .cost-calc-base p{font-size:16px;line-height:1.55;color:#4f584f;margin:10px 0 0;max-width:56ch}
.cost-calc .cost-calc-details[hidden]{display:none}

/* Provisional figures stay out of the decision until the questions are complete. */
.cost-calc-finances{display:none}
[data-gax-wizard] [hidden]{display:none!important}
.cost-calc .wizard-step-title,.cost-calc .wizard-result-title{margin-top:0}