/* sales-fx.css: page rules for the sales pages on the redesign layer (27 Oct 2026):
   /services (fx-services), /pricing (fx-pricing), /build-my-plan (fx-plan), /missed-call-cost (fx-mcc),
   /growth-partnership (fx-growth), /funding (fx-funding). Load after page-fx.css.
   Every rule is scoped by the page's body class. Solid only, colours only from the fx tokens,
   prices in tabular numbers and never animated. */

/* ---------- /funding ---------- */
.fx-funding .fd-regions{align-items:stretch}
.fx-funding .fd-region{gap:12px}
.fx-funding .fd-region>p{margin:0;font-size:16.5px;line-height:1.55;color:var(--fx-muted)}
.fx-funding .fd-region .fd-status{font-size:19px;line-height:1.35;font-weight:500;color:var(--fx-ink)}
.fx-funding .fd-region .pg-ticks li{font-size:16px}
.fx-funding .fd-region .pg-small{margin-top:auto;padding-top:6px}
/* The worker sets html[data-market]: the visitor's country comes first and gets the accent edge. */
html[data-market="PT"] .fx-funding #r-pt,html[data-market="CA"] .fx-funding #r-ca,html[data-market="US"] .fx-funding #r-us{order:-1;border-color:color-mix(in srgb,var(--fx-accent) 45%,var(--fx-line))}

/* ---------- /growth-partnership (pay per booked job) ---------- */
.fx-growth .gp-big{margin:2px 0 4px;font-size:48px;line-height:1;font-weight:500;letter-spacing:-.03em;color:var(--fx-ink);font-variant-numeric:tabular-nums}
.fx-growth .gp-chips{margin-top:12px}
.fx-growth .pg-plan .pg-amount>span:last-child:not(.geo-price){font-size:18px;letter-spacing:0;font-weight:400;color:var(--fx-muted)}
.fx-growth .gp-example{margin-top:24px}
.fx-growth .mc .mc-grid.gp-mc{grid-template-columns:minmax(0,560px)}

/* ---------- /build-my-plan (plan-builder.css styles the builder; map its tokens to the fx tokens) ---------- */
.fx-plan{--gradient-canvas:var(--fx-ground);--gradient-ink:var(--fx-ink);--gradient-muted:var(--fx-muted);--gradient-line:var(--fx-line);
  --gradient-soft:var(--fx-surface);--gradient-white:var(--fx-surface);--gradient-accent:var(--fx-accent);--gradient-focus:var(--fx-accent);
  --gradient-action:var(--fx-action);--gradient-action-ink:var(--fx-action-ink)}
.fx-plan .pb-section{padding-top:0}
.fx-plan .pb{padding-block:0 24px}
/* 13px label floor for the older reader. */
.fx-plan .pb-steps li span,.fx-plan .pb-lh-name span,.fx-plan .pb-lh-meta,.fx-plan .pb-line-price small,
.fx-plan .pb-yearly em,.fx-plan .pb-paper-foot{font-size:13px}
/* The proposal sheet is paper in both themes: keep its own ink. */
.fx-plan .pb-paper{--gradient-ink:var(--paper-ink);--gradient-muted:var(--paper-muted);--gradient-line:var(--paper-line)}

/* ---------- /missed-call-cost (missed-call-cost.css styles the calculator; map its tokens to the fx tokens) ---------- */
.fx-mcc{--gradient-canvas:var(--fx-ground);--gradient-ink:var(--fx-ink);--gradient-muted:var(--fx-muted);--gradient-line:var(--fx-line);
  --gradient-soft:var(--fx-surface);--gradient-white:var(--fx-surface);--gradient-accent:var(--fx-accent);--gradient-focus:var(--fx-accent);
  --gradient-action:var(--fx-action);--gradient-action-ink:var(--fx-action-ink)}
.fx-mcc .mcc-section{padding-top:0}
.fx-mcc .mcc-card--next{margin-top:20px}
.fx-mcc .mcc-method{max-width:none}
.fx-mcc .mcc-found[hidden]{display:none}
.fx-mcc .mcc-disclaim,.fx-mcc .mcc-cta-note{font-size:15px}
.fx-mcc .mcc-hint{font-size:14.5px}
.fx-mcc .mcc-skip{font-size:16px}

/* ---------- /services (opens with the homepage Services List V2 section, svc-fx.css) ---------- */
body.fx-services{--fx-surface:var(--gradient-soft,#282420)}
:root[data-theme="light"] body.fx-services{--fx-surface:#f8f7f4}
/* The three plain lines under the four cards (same as home-fx.css, which only the homepage loads). */
.fx-services .fx-more{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;border-top:1px solid var(--fx-line-strong)}
.fx-services .fx-more li{display:flex;flex-direction:column;gap:6px;padding:22px 0 4px;min-width:0}
.fx-services .fx-more p{margin:0;font-size:16.5px;line-height:1.55;color:var(--fx-muted)}
.fx-services .fx-more .fx-more-q{font-size:18px;font-weight:600;line-height:1.3;color:var(--fx-ink)}
.fx-services .fx-more .geo-price{font-variant-numeric:tabular-nums;color:var(--fx-ink);font-weight:600}
.fx-services .fx-more .fx-link{margin-top:auto;font-size:15px;color:var(--fx-ink)}
@media (max-width:860px){.fx-services .fx-more{grid-template-columns:1fr}.fx-services .fx-more li{padding:18px 0 6px;border-bottom:1px solid var(--fx-line)}.fx-services .fx-more li:last-child{border-bottom:0}}
/* The five group cards: the whole card is the link. */
.fx-services .sv-families{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))}
.fx-services .op-family{display:flex;flex-direction:column;gap:8px;height:100%;color:inherit;text-decoration:none}
.fx-services .op-family-card{padding:0}
.fx-services .op-family{padding:22px 22px 18px;border-radius:inherit}
.fx-services .op-family:focus-visible{outline:2px solid var(--fx-accent);outline-offset:3px}
.fx-services .op-family h3{margin:0;font-size:20px;line-height:1.25;font-weight:600;color:var(--fx-ink)}
.fx-services .op-family .gradient-product-label{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;margin:0;padding:0;border:0;background:none}
/* Offer cards in each group. */
.fx-services .sv-group{margin:36px 0 14px;font:500 13px/1.3 var(--fx-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fx-muted)}
.fx-services .fx-head+.pg-cards{margin-top:8px}
.fx-services .sv-from{margin:0 0 10px;font-size:16px;line-height:1.55;color:var(--fx-muted)}
.fx-services .sv-price{margin:6px 0 0;font-size:18px;line-height:1.35;font-weight:600;color:var(--fx-ink);font-variant-numeric:tabular-nums}
.fx-services .pg-card .sv-terms{font-size:15px;line-height:1.5}
.fx-services .sv-note{position:relative;z-index:1;margin:0;font-size:15.5px}
.fx-services .sv-note a{color:var(--fx-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--fx-accent);text-underline-offset:4px}
.fx-services .sv-trust{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px 32px;max-width:none}
.fx-services .sv-more h2{margin:0 0 14px;font-size:22px;font-weight:600;color:var(--fx-ink)}
.fx-services .sv-more ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:10px 28px}
.fx-services .sv-more li{font-size:16px}

/* ---------- /pricing ---------- */
/* motion.css (the plan calculator) reads --mx-* tokens; point them at the fx tokens. */
.fx-pricing{--mx-ink:var(--fx-ink);--mx-muted:var(--fx-muted);--mx-line:var(--fx-line);--mx-surface:var(--fx-surface);--mx-canvas:var(--fx-ground);
  --mx-accent:var(--fx-accent);--mx-action:var(--fx-action);--mx-action-ink:var(--fx-action-ink)}
.fx-pricing .pr-geo{font-size:15px}
.fx-pricing .fx-head .fx-lede{margin:0}
/* Monthly / yearly switch: a solid segmented control. */
.fx-pricing .op-billing{display:flex;justify-content:flex-start;margin:0 0 10px}
.fx-pricing .op-seg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--fx-line-strong);border-radius:999px;background:var(--fx-surface)}
.fx-pricing .bill-opt{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--fx-muted);font:inherit;font-size:16px;font-weight:600;cursor:pointer;
  transition:background-color .2s var(--fx-ease),color .2s var(--fx-ease)}
.fx-pricing .bill-opt[aria-pressed="true"]{background:var(--fx-action);color:var(--fx-action-ink)}
.fx-pricing .bill-opt:focus-visible{outline:2px solid var(--fx-accent);outline-offset:2px}
.fx-pricing .billing-note{margin:0 0 22px;font-size:16px;color:var(--fx-muted)}
.fx-pricing .op-note{margin:22px 0 0;max-width:80ch;font-size:16px;line-height:1.6;color:var(--fx-muted)}
/* Plan cards (pg-plan does the box). */
.fx-pricing .op-tiers{align-items:stretch}
.fx-pricing .op-tier-kicker{margin:0;font:500 13px/1.3 var(--fx-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fx-muted)}
.fx-pricing .op-tier .op-tier-sub{font-size:16.5px}
.fx-pricing .op-price{margin:6px 0 0;font-variant-numeric:tabular-nums}
.fx-pricing .op-price .pr-from{font-size:18px;letter-spacing:0;font-weight:400;color:var(--fx-muted)}
.fx-pricing .op-tier .op-per{font-size:15.5px;margin-top:-4px}
.fx-pricing .op-tier .op-usage{font-size:15.5px;padding:10px 12px;border:1px solid var(--fx-line);border-radius:var(--fx-radius-sm);background:color-mix(in srgb,var(--fx-ground) 45%,var(--fx-surface))}
.fx-pricing .op-tier .op-terms{font-size:15px;line-height:1.55}
.fx-pricing .op-tier-cta{margin-top:auto;padding-top:8px}
.fx-pricing .op-tier-cta .fx-btn{width:100%;justify-content:center}
.fx-pricing .op-ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--fx-line);border-radius:var(--fx-radius-sm);overflow:hidden}
.fx-pricing .op-ladder>div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-left:1px solid var(--fx-line)}
.fx-pricing .op-ladder>div:first-child{border-left:0}
.fx-pricing .op-ladder b{font-size:18px;font-variant-numeric:tabular-nums}
.fx-pricing .op-ladder-k{font-size:13px;color:var(--fx-muted)}
.fx-pricing .pg-tag{position:absolute;top:-14px;left:24px;background:var(--fx-surface)}
.fx-pricing .op-tier .soon{color:var(--fx-muted)}
.fx-pricing .op-tier .soon::before{content:"Coming";position:static;display:inline-block;width:auto;height:auto;margin-right:8px;padding:1px 8px;border:1px solid var(--fx-line-strong);border-radius:999px;transform:none;
  font:500 13px/1.5 var(--fx-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--fx-muted)}
.fx-pricing .op-tier .soon{padding-left:0}
/* Office: one wide card. */
.fx-pricing .op-wide-card{margin-top:40px}
.fx-pricing .op-wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.fx-pricing .op-wide>div{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (max-width:860px){.fx-pricing .op-wide{grid-template-columns:1fr}}
/* S7 card under the Team plan. */
.fx-pricing .pr-mc{margin-top:16px;max-width:560px}
/* Trust strip. */
.fx-pricing .op-trust{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px 28px}
/* Usage panels. */
.fx-pricing .op-usage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:860px){.fx-pricing .op-usage-grid{grid-template-columns:1fr}}
.fx-pricing .op-panel h3{margin:0;font-size:21px;font-weight:600}
.fx-pricing .op-panel>p{margin:0;font-size:16.5px;line-height:1.55;color:var(--fx-muted)}
.fx-pricing .op-panel .pg-ticks li{font-size:16px}
.fx-pricing .op-rate{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px}
.fx-pricing .op-rate strong{font-size:40px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fx-pricing .op-rate span{font-size:16px;color:var(--fx-muted)}
/* Price lists (add-ons, managed services): solid rows. */
.fx-pricing .op-list{list-style:none;margin:0;padding:0;border:1px solid var(--fx-line);border-radius:var(--fx-radius);background:var(--fx-surface);box-shadow:var(--fx-shadow-soft);overflow:hidden}
.fx-pricing .op-list li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) minmax(0,1fr);gap:8px 24px;padding:18px 22px;border-top:1px solid var(--fx-line);align-items:baseline}
.fx-pricing .op-list li:first-child{border-top:0}
.fx-pricing .op-list-name{font-size:17px;font-weight:600;color:var(--fx-ink)}
.fx-pricing .op-list-name a{color:var(--fx-ink);text-decoration:underline;text-decoration-color:var(--fx-line-strong);text-underline-offset:4px}
.fx-pricing .op-list-name a:hover{text-decoration-color:var(--fx-accent)}
.fx-pricing .op-list-desc{font-size:16px;line-height:1.55;color:var(--fx-muted)}
.fx-pricing .op-list-price{font-size:17px;font-weight:600;color:var(--fx-ink);text-align:right;font-variant-numeric:tabular-nums}
.fx-pricing .op-list-price small{display:block;margin-top:2px;font-size:14.5px;font-weight:400;line-height:1.45;color:var(--fx-muted)}
@media (max-width:760px){.fx-pricing .op-list li{grid-template-columns:1fr}.fx-pricing .op-list-price{text-align:left}}
/* The comparison table: solid, in its own scroll box. */
.fx-pricing .op-compare{min-width:760px;font-size:15.5px}
.fx-pricing .op-compare caption{caption-side:top;text-align:left;padding:14px 16px;font-size:15px;color:var(--fx-muted)}
.fx-pricing .op-compare th,.fx-pricing .op-compare td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--fx-line)}
.fx-pricing .op-compare thead th{font:500 13px/1.3 var(--fx-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--fx-muted)}
.fx-pricing .op-compare .op-col-featured{color:var(--fx-ink);box-shadow:inset 0 -2px 0 var(--fx-accent)}
.fx-pricing .op-compare-group th{padding-top:20px;font-size:15px;font-weight:600;color:var(--fx-ink);background:color-mix(in srgb,var(--fx-ground) 45%,var(--fx-surface))}
.fx-pricing .op-compare td{font-variant-numeric:tabular-nums}
.fx-pricing .op-compare .op-yes{color:var(--fx-ink);font-weight:600}
.fx-pricing .op-compare .op-no{color:var(--fx-muted)}
.fx-pricing .op-compare .op-soon{color:var(--fx-accent)}
/* FAQ heading column. */
.fx-pricing .op-faq .fx-head .op-note{margin-top:10px}
.fx-pricing .pr-more h2{margin:0 0 14px;font-size:22px;font-weight:600;color:var(--fx-ink)}
.fx-pricing .pr-more ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:10px 28px}
.fx-pricing .pr-more li{font-size:16px}
.fx-pricing #tiers .pg-plans{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px}
.fx-pricing #tiers .pg-plan{padding:26px 20px 20px}