/* =============================================================================
   Taloventra tv/commerce.css — package E (pricing, compare). Area prefix: tv-com-*.
   Tokens only (no hex), logical properties only, no !important, mobile-first.
   Depends on tv/core.css for every tv-* component.
   ============================================================================= */

/* ---------- Legacy-layer guard (TV_LEGACY_PUBLIC): site.css styles bare <header> as the sticky site bar; keep section heads static.
   :where() keeps specificity at zero so core.css .tv-section-head--split still wins its grid at ≥900px. ---------- */
:where(.tv-page .tv-section-head){display:block;position:static;inset-block-start:auto;z-index:auto;block-size:auto;padding:0;border-block-end:0;gap:0;background:transparent}

/* ---------- Currency picker ---------- */
.tv-com-currency{display:flex;flex-wrap:wrap;align-items:end;gap:var(--tv-sp-s);margin-block-end:var(--tv-sp-xl)}
.tv-com-currency .tv-field{min-inline-size:min(100%,14rem)}
.tv-com-currency .tv-btn{min-block-size:48px}

/* ---------- Plan tiers ---------- */
.tv-com-tiers{display:grid;gap:var(--tv-gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));align-items:stretch}
@media (width>=1000px){.tv-com-tiers{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (width>=1000px) and (width<1200px){.tv-com-tier{padding:var(--tv-sp-m)}.tv-com-tier__amount{font-size:var(--tv-step-4)}}
.tv-com-tier{gap:var(--tv-sp-s);padding:var(--tv-sp-l);border-radius:var(--tv-r-l)}
.tv-com-tier--recommended{background:var(--tv-navy);border-color:var(--tv-navy);box-shadow:var(--tv-sh-3)}
.tv-com-tier__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--tv-sp-2xs)}
.tv-com-tier__name{margin:0;font-size:var(--tv-step-2)}
.tv-com-tier__price{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem}
.tv-com-tier__amount{font:500 var(--tv-step-5)/1 var(--tv-font-display);font-variant-numeric:tabular-nums;letter-spacing:var(--tv-track-display);color:var(--tv-heading);font-variation-settings:"SOFT" 40,"WONK" 0}
[dir=rtl] .tv-com-tier__amount{font-family:var(--tv-font-ui);letter-spacing:0}
.tv-com-tier__quote{font:600 var(--tv-step-3)/1.1 var(--tv-font-ui);color:var(--tv-heading)}
.tv-com-tier__unit,.tv-com-tier__code{font-size:var(--tv-step--1);color:var(--tv-text-3)}
.tv-com-tier__label{margin:0;font-size:var(--tv-step--2);color:var(--tv-text-3);letter-spacing:.02em}
.tv-com-tier__positioning{margin:0;font-size:var(--tv-step--1);color:var(--tv-text-2);min-block-size:3.2em}
.tv-com-tier__stack{margin:0;font:600 var(--tv-step--2)/1.3 var(--tv-font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--tv-text-3)}
.tv-com-tier .tv-checklist li{padding-block:.4rem;font-size:var(--tv-step--1)}
.tv-com-tier .tv-checklist__icon{color:var(--tv-accent-text)}
.tv-com-tier__cta{margin-block-start:auto;padding-block-start:var(--tv-sp-s)}
.tv-com-tier__cta form{margin:0}
.tv-com-tier__cta .tv-btn{inline-size:100%;justify-content:center}
.tv-com-notice{margin-block-start:var(--tv-sp-l);display:grid;gap:var(--tv-sp-s)}
.tv-com-notice .tv-small{margin:0;color:var(--tv-text-3);max-inline-size:var(--tv-w-prose)}

/* ---------- "Everything in Basic, plus" stack ---------- */
.tv-com-stack{display:grid;gap:var(--tv-gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.tv-com-stack .tv-card{gap:var(--tv-sp-s)}
.tv-com-stack__from{margin:0;display:inline-flex;align-items:center;gap:.4rem;font:600 var(--tv-step--2)/1.2 var(--tv-font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--tv-accent-text)}
.tv-com-stack .tv-checklist li{padding-block:.4rem}

/* ---------- Feature matrix (pricing) and comparison table ---------- */
.tv-com-matrix .tv-table__scroll,.tv-com-compare .tv-table__scroll{max-block-size:min(80dvh,60rem);overflow:auto}
.tv-com-matrix table{min-inline-size:44rem}
.tv-com-compare table{min-inline-size:60rem}
.tv-com-matrix th:first-child,.tv-com-matrix td:first-child,.tv-com-compare th:first-child,.tv-com-compare td:first-child{position:sticky;inset-inline-start:0;z-index:1;min-inline-size:11rem;max-inline-size:16rem;box-shadow:1px 0 0 var(--tv-border)}
[dir=rtl] .tv-com-matrix th:first-child,[dir=rtl] .tv-com-matrix td:first-child,[dir=rtl] .tv-com-compare th:first-child,[dir=rtl] .tv-com-compare td:first-child{box-shadow:-1px 0 0 var(--tv-border)}
.tv-com-matrix thead th:first-child,.tv-com-compare thead th:first-child{z-index:3}
.tv-com-matrix tbody td{text-align:center;vertical-align:middle;min-inline-size:6.5rem}
.tv-com-matrix tbody td .tv-icon{vertical-align:middle}
.tv-com-matrix tbody th{font-weight:500}
.tv-com-matrix tbody th a{display:inline-flex;align-items:center;gap:.5rem;color:var(--tv-heading);text-decoration:none;min-block-size:32px}
.tv-com-matrix tbody th a .tv-icon{flex:none;color:var(--tv-text-3)}
.tv-com-matrix tbody th a:hover{color:var(--tv-link-hover);text-decoration:underline;text-underline-offset:.15em}
.tv-com-matrix .tv-table__group th .tv-badge{margin-inline-start:.5rem;vertical-align:middle}
.tv-com-matrix .tv-com-matrix__planned th{color:var(--tv-text-2);font-weight:500}
.tv-com-matrix .tv-com-matrix__planned td .tv-badge{white-space:nowrap}
.tv-com-matrix thead th{text-align:center}
.tv-com-matrix thead th:first-child{text-align:start}
.tv-com-matrix thead th small{display:block;font:500 var(--tv-step--2)/1.3 var(--tv-font-ui);opacity:.85}
.tv-com-footnote{margin:var(--tv-sp-s) 0 0;font-size:var(--tv-step--1);color:var(--tv-text-3);max-inline-size:var(--tv-w-prose)}

.tv-com-compare thead th{vertical-align:bottom}
.tv-com-compare thead th small{display:block;font:500 var(--tv-step--2)/1.3 var(--tv-font-ui);opacity:.85}
.tv-com-compare tbody td{vertical-align:top}
.tv-com-compare .tv-com-cell{display:grid;gap:.45rem;justify-items:start}
.tv-com-compare .tv-com-cell a{display:inline-flex;align-items:center;gap:.3rem;color:var(--tv-link);text-decoration:underline;text-decoration-color:color-mix(in oklab,currentColor 40%,transparent);text-underline-offset:.15em;min-block-size:24px}
.tv-com-compare .tv-com-cell a:hover{text-decoration-color:currentColor;color:var(--tv-link-hover)}
.tv-com-compare .tv-com-cell a .tv-icon--arrow{inline-size:16px;block-size:16px;flex:none}
.tv-com-compare .tv-com-cell__text{color:var(--tv-text-2)}
.tv-com-compare .is-highlight .tv-badge--neutral{background:var(--tv-surface);color:var(--tv-heading)}
.tv-com-legend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--tv-sp-xs) var(--tv-sp-s);margin:0 0 var(--tv-sp-m);padding:0;list-style:none;font-size:var(--tv-step--1);color:var(--tv-text-3)}
.tv-com-legend li{display:inline-flex;align-items:center;gap:.4rem}
.tv-com-method{display:grid;gap:var(--tv-sp-s);margin-block-end:var(--tv-sp-l);max-inline-size:var(--tv-w-prose)}
.tv-com-method p{margin:0}
.tv-com-sources{margin-block-start:var(--tv-sp-xl)}
.tv-com-sources ul{margin:0;padding-inline-start:1.2rem}
.tv-com-sources li{padding-block:.3rem}
.tv-com-sources a{color:var(--tv-link);text-decoration:underline;text-decoration-color:color-mix(in oklab,currentColor 40%,transparent);text-underline-offset:.15em}
.tv-com-sources a:hover{text-decoration-color:currentColor;color:var(--tv-link-hover)}
.tv-com-sources .tv-icon--arrow{inline-size:16px;block-size:16px;vertical-align:-2px}

/* Group rows span the whole table, so the label itself sticks to the start edge while the row scrolls. */
.tv-table__group th{position:static;max-inline-size:none}
.tv-com-group{display:inline-flex;align-items:center;gap:.5rem;position:sticky;inset-inline-start:1rem}

/* ---------- Follow one real request ---------- */
.tv-com-journey{display:grid;gap:var(--tv-sp-xl)}
.tv-com-journey__note{margin:0;font-size:var(--tv-step--1);color:var(--tv-text-3)}

/* ---------- Add-ons ---------- */
.tv-com-services .tv-card__title{padding-inline-end:2.25rem}

/* ---------- Questions to ask ---------- */
.tv-com-questions{display:grid;gap:var(--tv-sp-l);align-items:start}
@media (width>=900px){.tv-com-questions{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.tv-com-questions .tv-section-head{margin-block-end:0}
.tv-com-questions .tv-checklist li{font-size:var(--tv-step-0)}

@media (prefers-reduced-motion:reduce){.tv-com-tier{transition:none}}