/* /local-pricing — the page additions on top of the canon kit (canon-tokens → canon-kit → canon-kit-x → THIS → canon-m → canon-fx).
   The ЦЕНА block itself (.price .pmain .alt .pbig) is the kit's; here only what the pricing rows need: the included-lines
   list, the buttons row, the small notes, the lead text, the «що ми робимо» list, the FAQ. Same weight rule as the kit
   (":root .cz X"), CSP: no inline styles. */
:root .cz .pc-lead{display:flex;flex-direction:column;gap:8px;margin-top:6px;font-size:clamp(16px,1.8vw,18px)}
:root .cz .pc-hl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
:root .cz .pc-usd{margin-top:-6px}
:root .cz .pc-ask{font:700 clamp(20px,2.4vw,24px)/1.25 var(--f-disp);letter-spacing:-.02em}
:root .cz .pc-alt{display:flex;flex-direction:column;gap:12px}
:root .cz .pc-alt-price{font:800 30px/1.1 var(--f-disp);letter-spacing:-.03em}
:root .cz .pc-alt-price small{font:500 14px var(--f-body);color:var(--ink2);letter-spacing:0}
:root .cz .pc-alt-p{font-size:15px;color:var(--ink2);line-height:1.5}
:root .cz .pc-ink{color:var(--ink)}
:root .cz .pc-hr{border:0;border-top:1px solid var(--lilac);width:100%;margin:8px 0}
:root .cz .pc-note{font-size:14px;color:var(--ink2);margin:0}
:root .cz .pmain .pc-note{color:var(--m-text)}
:root .cz ul.lc-prepay-lines{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:2px}
/* the included lines: a check + text; chartreuse ticks on the dark card */
:root .cz .pc-get{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
:root .cz .pc-get li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;font-size:16px;line-height:1.45}
:root .cz .pc-get .lc-i{margin-top:2px;color:var(--good)}
:root .cz .pmain .pc-get li{color:var(--m-text)}
:root .cz .pmain .pc-get .lc-i{color:var(--chartreuse)}
:root .cz .pmain details.fold>summary{background:var(--m-cell);color:var(--paper)}
/* buttons: the main one, the refund line, the way in through the free check */
:root .cz .pc-buy{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:auto;padding-top:6px}
:root .cz .pc-buy .btn{max-width:100%;text-align:center}
:root .cz .pc-refund{margin:0;padding:8px 12px;border-radius:12px;background:var(--good-wash);color:var(--good);font-weight:600}
:root .cz .pmain .pc-refund{background:var(--m-cell);color:var(--chartreuse)}
:root .cz .pmain .pc-go.ghost{color:var(--chartreuse)}
:root .cz .lc-staff-lines{margin:0;padding-left:18px;font-size:13px;color:var(--ink2)}
/* what we do: the four items, one row each */
:root .cz .pc-doing{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
:root .cz .pc-doing li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start}
:root .cz .pc-doing .lc-i{margin-top:3px;color:var(--violet)}
:root .cz .pc-doing li>span{display:flex;flex-direction:column;gap:4px}
:root .cz .pc-doing .lc-doing-what{color:var(--ink)}
:root .cz .pc-site{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:20px 22px}
:root .cz .pc-faq{display:flex;flex-direction:column;gap:12px;max-width:860px}
:root .cz .pc-faq details.card{display:block;gap:0}
:root .cz .pc-faq details.card p{padding:0 24px 22px;margin:0;color:var(--ink2);font-size:16px;line-height:1.55}
@media (max-width:640px){
  :root .cz .pc-buy .btn{width:100%}
  :root .cz .pc-faq summary{min-height:56px;padding:16px 18px;font-size:17px}
  :root .cz .pc-faq details.card p{padding:0 18px 18px}
  :root .cz .pc-site .btn{width:100%}
  :root .cz .pc-get li{font-size:15px}
}

/* ── С5: the price page's tier switch (phone only). canon-motion.js hides the other pane with [hidden] (display:none!important in
   canon-motion.css); a wide screen shows both tiers, so the switch itself goes and the panes come back (longer selector wins). ── */
@media (min-width:641px){:root .cz .cz-seg.cz-seg-m{display:none}
  :root .cz .price .pmain[data-cz-pane][hidden]{display:flex!important}:root .cz .price .pc-alt[data-cz-pane][hidden]{display:block!important}}