/* C33 (Claude): calmer pricing. Cards share row tracks (subgrid) so names, prices, costs, features and buttons
   line up across plans; costs sit in one labelled list instead of loose sentences. No lines under plan copy. */
.pricing-switch{display:inline-flex;flex-wrap:wrap;gap:6px;padding:6px;border:1px solid var(--line,#d9d2c5);border-radius:32px;margin:4px 0 32px;background:#fbf8f1}
.pricing-switch button{min-height:46px;padding:10px 20px;border:0;border-radius:26px;background:transparent;color:#241d18;font:inherit;cursor:pointer;display:flex;align-items:center;gap:10px}
.pricing-switch button[aria-pressed=true]{background:#213e34;color:#fff9ed}
.pricing-switch button:focus-visible{outline:3px solid #ad5738;outline-offset:3px}
.pricing-saving{font-size:11px;line-height:1.35;border-radius:16px;padding:5px 8px;background:#e9e1d4;color:#594536}
.pricing-switch button[aria-pressed=true] .pricing-saving{background:#fff9ed;color:#213e34}
.pricing-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Eight shared rows: label, name, status, tagline, price, costs, features, action. */
.terracotta .services .service{display:grid;grid-template-rows:subgrid;grid-row:span 8;row-gap:0;align-content:start}
.terracotta .services .service>*{min-width:0}
.terracotta .services .service .num{margin-bottom:14px}
.terracotta .services .service h3{margin:0 0 10px}
.terracotta .services .service .plan-state{align-self:start;justify-self:start;margin:0 0 14px;padding:4px 10px;border-radius:999px;background:#1f1a150d;font-size:11px;line-height:1.5;letter-spacing:.03em;opacity:1}
.terracotta .services .service:nth-child(2) .plan-state{background:#fff9ed26}
.terracotta .services .service>p{margin:0 0 4px}

.pricing-amounts{margin:22px 0 16px;min-width:0;align-self:end}
.terracotta .services .service .price{margin:0 0 6px;font-size:clamp(26px,2.3vw,34px);line-height:1.1;white-space:nowrap}
.terracotta .services .service-proposed .price,.terracotta .services .service[data-plan=Automation] .price{font-size:clamp(23px,1.9vw,28px)}
.pricing-amounts .tiny{display:block;font-size:12px;line-height:1.5;letter-spacing:.02em;opacity:.75}

/* Costs: soft tinted panel, each label above its amount, spacing (not rules) between rows. */
.pricing-costs{margin:0;padding:12px 14px;border-radius:14px;background:#1f1a1508;display:grid;gap:10px;align-self:start}
.terracotta .services .service:nth-child(2) .pricing-costs{background:#fff9ed1f}
.pricing-costs .cost-row{display:grid;gap:1px}
.pricing-costs .cost-row[hidden]{display:none!important}
.pricing-costs dt{font-size:12px;line-height:1.45;opacity:.78}
.pricing-costs dd{margin:0;font-size:14px;line-height:1.4;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

.terracotta .services .service ul{margin:22px 0 26px;align-self:start}
.terracotta .services .service>a{align-self:end}

/* Fine print: three short labelled notes in columns. */
.pricing-fineprint{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:32px 0 0}
.pricing-fineprint h3{font:600 12px/1.4 var(--sans,inherit);letter-spacing:.08em;text-transform:uppercase;color:#ad5738;margin:0 0 8px}
.pricing-fineprint p{margin:0;font-size:13px;line-height:1.7;color:#5c5148;max-width:none}

@media(prefers-reduced-motion:no-preference){.pricing-switch button{transition:background .18s ease,color .18s ease}}
@media(max-width:1100px){.pricing-fineprint{grid-template-columns:1fr}}
@media(max-width:600px){
 .pricing-switch{display:flex;border-radius:24px}
 .pricing-switch button{flex:1;justify-content:center;padding:12px}
 .pricing-switch button[data-pricing-period=yearly]{flex-direction:column;gap:4px}
 .terracotta .services .service .price{font-size:32px;white-space:normal}
}

/* The longer VND Lite range must remain within a four-column desktop card. */
html[lang=vi] .terracotta .services .service-proposed .price{font-size:clamp(18px,1.35vw,21px)}
@media(max-width:600px){html[lang=vi] .terracotta .services .service-proposed .price{font-size:28px;overflow-wrap:anywhere}}