/* Faithful native port of Pricing v2b Cards.dc.html. Homepage type and gutters
   are shared; the imported palette, cards, checkmarks and controls stay intact. */
#pricing.pricing-refinement{font-family:Archivo,system-ui,sans-serif;color:#1c1b19;background:#f7f6f2!important;font-variant-numeric:tabular-nums}
#pricing .pr-shell{max-width:1240px;margin:0 auto}
#pricing [hidden]{display:none!important}
html:lang(en) #pricing [data-pr-non-english]{display:none}
#pricing a{color:#2b44c4;text-decoration:none}
#pricing a:hover{color:#1c2f8f;text-decoration:underline}
#pricing .pr-intro{display:grid;max-width:760px}
#pricing .pr-kicker{margin-bottom:16px}
#pricing .pr-intro :is(h2,h3){text-wrap:balance;color:#1c1b19}
#pricing .pr-intro h3{margin:0;font:500 32px/1.2 Archivo,system-ui,sans-serif;letter-spacing:-.02em}
#pricing .pr-intro p{margin:20px 0 0;font-size:var(--section-copy-size,20px);line-height:1.45;color:#6b6860}
#pricing .pr-navigation{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;margin-top:48px}
#pricing .pr-audience{display:flex;gap:4px;padding:4px;background:#eceae4;border-radius:999px;justify-self:start;max-width:100%}
#pricing .pr-audience button{border:1px solid transparent;cursor:pointer;font:500 14px/1.4 Archivo,system-ui,sans-serif;padding:8px 16px;min-height:44px;border-radius:999px;background:transparent;color:#6b6860}
#pricing .pr-audience button[aria-pressed=true]{background:#fff;color:#1c1b19;border-color:#e6e3dc}
#pricing .pr-help,#pricing .pr-text-link{font-size:14px;font-weight:500;display:inline-flex;align-items:center;min-height:44px;justify-self:start}
#pricing .pr-description{margin:24px 0 0;font-size:14px;line-height:1.5;color:#6b6860}
#pricing .pr-description a{font-weight:500}
#pricing .pr-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
/* Lite: a quiet entry row under the embedded cards, so Starter stays the visible first plan. */
#pricing .pr-lite{margin-top:16px;background:#fff;border:1px solid #e6e3dc;border-radius:16px;padding:20px 24px;display:flex;flex-wrap:wrap;gap:16px 24px;justify-content:space-between;align-items:center;scroll-margin-top:24px}
#pricing .pr-lite-copy{display:grid;gap:4px;flex:1 1 320px;max-width:560px}
#pricing .pr-lite p{margin:0;font-size:14px;line-height:1.5;color:#6b6860}
#pricing .pr-lite .pr-price-block{padding:0}
#pricing .pr-lite .pr-price strong{font-size:24px}
#pricing .pr-card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;background:#fff;border:1px solid #e6e3dc;border-radius:16px;padding:24px;scroll-margin-top:24px}
#pricing .pr-card-heading{display:grid;gap:4px;align-content:start}
#pricing .pr-card h3,#pricing .pr-enterprise h3,#pricing .pr-lite h3{margin:0;font-size:20px;line-height:1.3;font-weight:500;letter-spacing:-.01em}
#pricing .pr-card-heading p{margin:0;font-size:14px;line-height:1.45;color:#6b6860;text-wrap:pretty}
#pricing .pr-price-block{padding:20px 0 16px;display:grid;gap:4px;align-content:start}
#pricing .pr-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px}
#pricing .pr-price strong{font-size:32px;line-height:1;font-weight:500;letter-spacing:-.02em}
#pricing .pr-price small{font-size:14px;color:#6b6860}
#pricing .pr-price-note{font-size:14px;line-height:20px;min-height:20px;color:#6b6860}
#pricing .pr-price-note strong{font-weight:500;color:#1c1b19;white-space:nowrap}
#pricing .pr-button{display:inline-flex;justify-content:center;align-items:center;min-height:44px;padding:9px 20px;border-radius:999px;border:1px solid #1c1b19;color:#1c1b19;font-size:14px;line-height:1.45;font-weight:500;text-align:center;text-decoration:none}
#pricing .pr-button:hover{background:#1c1b19;color:#f7f6f2;text-decoration:none}
#pricing .pr-card .pr-button{width:100%}
#pricing .pr-features{margin-top:20px;padding-top:20px;border-top:1px solid #eeece6;display:grid;gap:10px;align-content:start}
#pricing .pr-includes{font-size:12px;color:#6b6860}
#pricing .pr-features ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#pricing .pr-features li{display:grid;grid-template-columns:14px 1fr;gap:10px;font-size:14px;line-height:1.45;font-weight:400;text-wrap:pretty}
#pricing .pr-check{margin-top:3px}
#pricing .pr-footnote{margin:4px 0 0;font-size:12px;line-height:1.5;color:#6b6860}
#pricing .pr-enterprise{margin-top:16px;background:#1c1b19;color:#f7f6f2;border-radius:16px;padding:24px;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
#pricing .pr-enterprise-copy{display:grid;gap:4px;max-width:620px}
#pricing .pr-enterprise p{margin:0;font-size:14px;line-height:1.5;color:#b8b5ad}
#pricing .pr-enterprise .pr-button{background:#f7f6f2;color:#1c1b19;border-color:transparent}
#pricing .pr-enterprise .pr-button:hover{background:#fff}
#pricing:not(.pr-ready) .pr-navigation{display:none}
@media(max-width:900px){
  #pricing .pr-card{padding:20px}
}

@media(max-width:760px){#pricing .pr-cards{grid-template-columns:1fr}}
@media(max-width:600px){
  #pricing .pr-card-heading p,#pricing .pr-features li,#pricing .pr-description,#pricing .pr-enterprise p{font-size:16px;line-height:1.5}
  #pricing .pr-intro h3{font-size:26px}
  #pricing .pr-navigation{margin-top:32px;gap:12px}
  #pricing .pr-audience{width:100%;border-radius:28px}
  #pricing .pr-audience button{flex:1;min-width:0;padding:10px 12px}
  #pricing .pr-cards{margin-top:24px}
  #pricing .pr-footnote,#pricing .pr-includes{font-size:14px}
}

/* The reviewed phone layout; desktop card and calculator styling stays native. */
#pricing .pr-plan-buttons,#pricing .pr-carousel-controls{display:none}
@media(max-width:600px){
  #main-content #pricing.pricing-refinement{--pr-mobile-gutter:20px;padding-left:20px!important;padding-right:20px!important}
  #pricing .pr-intro h2{margin:0;font:500 28px/1.15 Archivo,system-ui,sans-serif;letter-spacing:-.025em}
  #pricing .pr-kicker{font-size:12px;font-weight:600;line-height:1.5;color:#1439a6}
  #pricing .pr-intro p{font-size:16px;line-height:1.5;margin-top:16px}
  #pricing .pr-navigation{margin-top:24px;gap:8px}
  #pricing .pr-audience{width:100%;border-radius:28px}
  #pricing .pr-audience button{flex:1;min-width:0;padding:10px 8px;font-size:14px;min-height:44px}
  #pricing .pr-description{font-size:16px;line-height:1.5;margin-top:16px}
  #pricing.pr-ready .pr-cards{display:flex;width:calc(100% + var(--pr-mobile-gutter));overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;scroll-padding:0;margin-top:12px;padding:2px 0 10px;scrollbar-width:thin;scrollbar-color:#2b44c4 #eceae4;overscroll-behavior-x:contain}
  #pricing.pr-ready .pr-card{display:flex;flex-direction:column;flex:0 0 calc(100% - var(--pr-mobile-gutter));min-width:0;scroll-snap-align:start}
  #pricing.pr-ready .pr-cards::after{content:'';flex:0 0 calc(var(--pr-mobile-gutter) - 12px)}
  #pricing .pr-plan-buttons{display:flex;gap:6px;margin-top:20px}
  #pricing .pr-plan-buttons button{flex:1;min-width:0;border:1px solid #e6e3dc;border-radius:10px;padding:8px 4px;min-height:44px;background:white;color:#1c1b19;font:400 14px/1.4 Archivo,system-ui,sans-serif}
  #pricing .pr-plan-buttons button[aria-pressed=true]{background:#1c1b19;border-color:#1c1b19;color:white}
  #pricing .pr-carousel-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:4px}
  #pricing .pr-carousel-controls button{width:44px;height:44px;border:1px solid #e6e3dc;border-radius:50%;background:white;color:#1c1b19}
  #pricing .pr-carousel-controls button:disabled{opacity:.4;cursor:default}
  #pricing .pr-carousel-controls svg{display:block;margin:auto}
  #pricing .pr-carousel-status{font-size:14px;color:#6b6860}
  #pricing .pr-enterprise{margin-top:16px;padding:20px;gap:16px}
}
@media(max-width:360px){
  #main-content #pricing.pricing-refinement{--pr-mobile-gutter:16px;padding-left:16px!important;padding-right:16px!important}
  #pricing .pr-audience button{padding:10px 6px}
}

/* Cost calculator: native port of Cost Calculator.dc.html. */
#pricing #calculator{margin-top:var(--section-space,80px);display:flex;flex-direction:column;gap:40px;scroll-margin-top:24px;color:#1c1b1a}
/* Hidden until the bridge script is ready, but keeping its space so the sections below do not jump. */
#pricing:not(.pr-ready) #calculator{visibility:hidden}
/* Start the calculator frame near its measured height for each width, so the page does not jump when the frame reports its real height. */
#pricing-calculator-frame{height:980px}
@media(max-width:860px){#pricing-calculator-frame{height:1330px}}
@media(max-width:600px){#pricing-calculator-frame{height:1450px}}
@media(max-width:440px){#pricing-calculator-frame{height:1570px}}
@media(max-width:370px){#pricing-calculator-frame{height:1620px}}
#pricing #calculator a{color:#2e44c8}
#pricing #calculator a:hover{color:#1c2f9e;text-decoration:underline}
#pricing .pr-calc-head{display:flex;flex-direction:column;gap:14px}
#pricing .pr-calc-kicker{font-size:14px;font-weight:600;letter-spacing:.16em;color:#2e44c8}
#pricing .pr-calc-head h3{margin:0;font-size:clamp(34px,5vw,52px);font-weight:500;letter-spacing:-.025em;line-height:1.05;color:#1c1b1a}
#pricing .pr-calc-head p{margin:0;font-size:19px;color:#5e5b55;max-width:640px;text-wrap:pretty;line-height:1.45}
#pricing .pr-calc-audience{display:flex;flex-direction:column;gap:16px}
#pricing .pr-calc-step{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:500}
#pricing .pr-calc-step>span{flex:none;width:28px;height:28px;border-radius:50%;background:#1c1b1a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px}
#pricing .pr-calc-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px}
#pricing .pr-calc-choice{text-align:left;font:inherit;color:inherit;cursor:pointer;padding:22px 24px;border-radius:18px;background:transparent;border:2px solid #ddd9d0;display:flex;gap:16px;align-items:flex-start}
#pricing .pr-calc-choice[aria-pressed=true]{background:#fff;border-color:#2e44c8}
#pricing .pr-calc-choice:focus-visible{outline:3px solid #2e44c8;outline-offset:3px}
#pricing .pr-calc-radio{flex:none;margin-top:3px;width:18px;height:18px;border-radius:50%;border:2px solid #ddd9d0;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
#pricing .pr-calc-radio>span{width:10px;height:10px;border-radius:50%;background:transparent}
#pricing .pr-calc-choice[aria-pressed=true] .pr-calc-radio{border-color:#2e44c8}
#pricing .pr-calc-choice[aria-pressed=true] .pr-calc-radio>span{background:#2e44c8}
#pricing .pr-calc-choice-text{display:flex;flex-direction:column;gap:6px}
#pricing .pr-calc-choice-title{font-size:19px;font-weight:500}
#pricing .pr-calc-choice-desc{font-size:15px;color:#5e5b55;line-height:1.45;text-wrap:pretty}
#pricing .pr-calc-wrap{display:flex;flex-direction:column;gap:10px}
#pricing .pr-calc-sticky{display:none;position:sticky;top:8px;z-index:5;background:#1c1b1a;color:#f7f6f2;border-radius:18px;padding:16px 18px;flex-direction:column;gap:10px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
#pricing .pr-calc-sticky.is-compact{padding:12px 18px}
#pricing .pr-calc-sticky.is-compact :is(.pr-calc-sticky-kicker,.pr-calc-sticky-bars){display:none}
#pricing .pr-calc-sticky-kicker{font-size:13px;font-weight:600;letter-spacing:.12em;color:#a9a59d}
#pricing .pr-calc-sticky-row{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
#pricing .pr-calc-sticky-head{font-size:28px;font-weight:500;letter-spacing:-.02em;color:#a5aef0}
#pricing .pr-calc-sticky.is-compact .pr-calc-sticky-head{font-size:20px}
#pricing .pr-calc-sticky-sub{font-size:15px;color:#f7f6f2}
#pricing .pr-calc-sticky-bars{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px 10px;font-size:15px;color:#a9a59d}
#pricing .pr-calc-mini{height:6px;border-radius:3px;background:#2e2d2b}
#pricing .pr-calc-mini>div{height:6px;border-radius:3px;background:#77736c}
#pricing .pr-calc-mini-value{color:#f7f6f2}
#pricing .pr-calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));border-radius:24px;overflow:hidden}
#pricing .pr-calc-inputs{background:#eeeffa;padding:clamp(24px,6vw,40px);display:flex;flex-direction:column;gap:32px;min-width:0}
#pricing .pr-calc-fields{display:flex;flex-direction:column;gap:28px}
#pricing .pr-calc-field{display:flex;flex-direction:column;gap:14px}
#pricing .pr-calc-field-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px 16px;flex-wrap:wrap}
#pricing .pr-calc-field-head label{font-size:17px;line-height:1.3}
#pricing .pr-calc-field-head output{font-size:40px;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
#pricing .pr-calc-field-head small{font-size:17px;font-weight:400;color:#5e5b55;margin-left:6px;letter-spacing:0}
#pricing .pr-calc-track{position:relative;height:28px}
#pricing .pr-calc-rail,#pricing .pr-calc-fill{position:absolute;left:0;top:11px;height:6px;border-radius:3px}
#pricing .pr-calc-rail{right:0;background:#d9d9e8}
#pricing .pr-calc-fill{background:#2e44c8}
#pricing .pr-calc-marker{position:absolute;top:4px;width:2px;height:20px;background:#1c1b1a}
#pricing .pr-calc-thumb{position:absolute;top:4px;width:20px;height:20px;border-radius:50%;background:#2e44c8;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transform:translateX(-50%);box-sizing:border-box;pointer-events:none}
#pricing .pr-calc-track:has(input:focus-visible) .pr-calc-thumb{outline:3px solid #2e44c8;outline-offset:2px}
#pricing .pr-calc-track input{position:absolute;left:0;top:-8px;width:100%;height:44px;margin:0;opacity:0;cursor:pointer;touch-action:pan-y}
#pricing .pr-calc-range{display:flex;justify-content:space-between;font-size:14px;color:#77736c}
#pricing .pr-calc-foot{margin-top:auto;padding-top:24px;border-top:1px solid #d9d9e8;display:flex;flex-direction:column;gap:12px}
#pricing .pr-calc-foot p{margin:0;font-size:15px;color:#5e5b55;line-height:1.5;text-wrap:pretty}
#pricing .pr-calc-foot a{font-size:16px;font-weight:500;align-self:flex-start}
#pricing .pr-calc-result{background:#1c1b1a;color:#f7f6f2;padding:clamp(24px,6vw,40px);display:flex;flex-direction:column;gap:32px;min-width:0}
#pricing .pr-calc-wide{display:flex;flex-direction:column;gap:32px}
#pricing .pr-calc-verdict{display:flex;flex-direction:column;gap:10px}
#pricing .pr-calc-kicker-dark{font-size:16px;color:#a9a59d}
#pricing .pr-calc-head-big{font-size:clamp(40px,5vw,60px);font-weight:500;letter-spacing:-.03em;line-height:1;color:#a5aef0}
#pricing .pr-calc-sub{font-size:20px;line-height:1.35;text-wrap:pretty}
#pricing .pr-calc-bars{display:flex;flex-direction:column;gap:22px}
#pricing .pr-calc-bar-row{display:flex;flex-direction:column;gap:8px}
#pricing .pr-calc-bar-label{display:flex;justify-content:space-between;gap:12px;font-size:16px}
#pricing .pr-calc-bar-label strong{font-weight:500;white-space:nowrap}
#pricing .pr-calc-flat{color:#a9a59d}
#pricing .pr-calc-bar{height:10px;border-radius:5px;background:#2e2d2b}
#pricing .pr-calc-bar>div{height:10px;border-radius:5px;background:#77736c}
#pricing .pr-calc-bar>.pr-calc-mesh,#pricing .pr-calc-mini>.pr-calc-mesh{background:#a5aef0}
#pricing .pr-calc-save{padding-top:22px;border-top:1px solid #3a3936;display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
#pricing .pr-calc-save>span:first-child{font-size:18px}
#pricing .pr-calc-save>span:last-child{font-size:clamp(28px,3.4vw,40px);font-weight:500;letter-spacing:-.02em;color:#a5aef0}
#pricing .pr-calc-ctas{margin-top:auto;display:flex;flex-wrap:wrap;gap:12px}
#pricing #calculator .pr-calc-cta{white-space:nowrap;display:inline-flex;padding:16px 26px;border-radius:999px;background:#a5aef0;color:#1c1b1a;font-size:17px;font-weight:500;text-decoration:none}
#pricing #calculator .pr-calc-cta-ghost{padding:15px 26px;background:transparent;border:1px solid #57544f;color:#f7f6f2}
#pricing .pr-calc-note{margin:0;font-size:15px;color:#77736c;line-height:1.5}
@media(max-width:859px){
  #pricing .pr-calc-sticky{display:flex}
  #pricing .pr-calc-wide{display:none}
}
#pricing #calculator .pr-calc-cta:hover{color:#1c1b1a;text-decoration:none}
#pricing #calculator .pr-calc-cta-ghost:hover{color:#f7f6f2}

/* Site type scale: pricing and calculator use the homepage section sizes
   (title = --section-title-size, lead = --section-copy-size, body 16px,
   eyebrow 12px/700). */
#pricing .pr-calc-kicker{font-size:12px;font-weight:700;letter-spacing:.13em;color:#1439a6}
#pricing .pr-calc-head h3{font-size:var(--section-title-size,46px);line-height:1.12;letter-spacing:-.03em}
#pricing .pr-calc-head p{font-size:var(--section-copy-size,18px);line-height:1.5}
#pricing .pr-calc-step,#pricing .pr-calc-choice-title{font-size:18px}
#pricing .pr-calc-choice-desc,#pricing .pr-calc-foot p,#pricing .pr-calc-field-head label,#pricing .pr-calc-field-head small{font-size:16px;line-height:1.5}
#pricing .pr-calc-note{font-size:14px}
#pricing .pr-card h3,#pricing .pr-enterprise h3,#pricing .pr-lite h3{font-size:24px;line-height:1.25}
#pricing .pr-card-heading p,#pricing .pr-features li,#pricing .pr-description,#pricing .pr-enterprise p,#pricing .pr-lite p,#pricing .pr-help,#pricing .pr-text-link{font-size:16px;line-height:1.5}
#pricing .pr-button{font-size:16px}
@media(min-width:601px){#pricing .pr-audience button{font-size:16px}}
@media(max-width:600px){#pricing .pr-card h3,#pricing .pr-enterprise h3,#pricing .pr-lite h3{font-size:22px}}