/* Server pages (#60): /dedicated catalog, /cloud-vps, VPS vs Cloud comparison.
   Tokens fall back to the redesign design system (ds.css) first, then to the current theme,
   so the same markup works on the current site and inside the redesign (light and dark). */

.sv {
    --sv-bg: var(--ds-bg, #fff);
    --sv-soft: var(--ds-bg-soft, #F4F7FF);
    --sv-surface: var(--ds-surface, #fff);
    --sv-ink: var(--ds-ink, var(--color-secondary, #2D3C58));
    --sv-muted: var(--ds-muted, #56607A);
    --sv-line: var(--ds-line, #E3E9F7);
    --sv-primary: var(--ds-primary, var(--color-primary, #0565E0));
    --sv-primary-hover: var(--ds-primary-hover, #0558c9);
    --sv-on-primary: var(--ds-on-primary, #fff);
    --sv-accent: var(--ds-bg-accent, #EAF1FF);
    --sv-warn: var(--ds-warn, #7a4b00);
    --sv-warn-soft: var(--ds-warn-soft, #FFF1D6);
    --sv-good: var(--ds-good, #137a47);
    --sv-good-soft: var(--ds-good-soft, #E3F6EC);
    --sv-radius: var(--ds-radius, 14px);
    --sv-shadow: var(--ds-shadow, 0 14px 40px rgba(20, 50, 120, .10));
    color: var(--sv-ink);
}
.sv [hidden] { display: none !important; }
/* the theme stretches every <button> to full width */
.sv button { width: auto; max-width: none; }
.sv h2, .sv h3 { color: var(--sv-ink); }
.sv-section { padding: 90px 0; background: var(--sv-bg); }
.sv-section--soft { background: var(--sv-soft); }
.sv-head { max-width: 860px; margin: 0 auto 36px; text-align: center; }
.sv-head h2 { margin-bottom: 12px; }
.sv-head p { margin: 0; color: var(--sv-muted); font-size: 18px; line-height: 1.55; }

.sv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px;
    border-radius: 10px; border: 2px solid transparent; font-weight: 600; font-size: 15px; line-height: 1.2;
    white-space: nowrap; transition: background .2s, color .2s, border-color .2s;
}
.sv-btn--primary { background: var(--sv-primary); color: var(--sv-on-primary); }
.sv-btn--primary:hover { background: var(--sv-primary-hover); color: var(--sv-on-primary); }
.sv-btn--ghost { background: transparent; color: var(--sv-primary); border-color: var(--sv-line); }
.sv-btn--ghost:hover { border-color: var(--sv-primary); color: var(--sv-primary); }

/* purpose tabs */
.sv-purposes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.sv-purpose {
    display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; text-align: left;
    border: 1px solid var(--sv-line); border-radius: var(--sv-radius); background: var(--sv-surface); color: var(--sv-ink);
    transition: border-color .2s, box-shadow .2s;
}
.sv-purpose strong { font-size: 16px; }
.sv-purpose span { font-size: 14px; color: var(--sv-muted); }
.sv-purpose:hover { border-color: var(--sv-primary); }
.sv-purpose.is-active { border-color: var(--sv-primary); box-shadow: inset 0 0 0 1px var(--sv-primary); background: var(--sv-accent); }

.sv-toolbar { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-bottom: 14px; }
.sv-seg, .sv-sort { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 15px; color: var(--sv-muted); }
.sv-seg > span { margin-right: 4px; }
.sv-seg button, .sv-sort button {
    padding: 6px 12px; border-radius: 8px; border: 1px solid var(--sv-line); background: var(--sv-surface);
    color: var(--sv-ink); font-size: 14px;
}
.sv-sort { margin-left: auto; }
.sv-sort button { border-color: transparent; background: transparent; color: var(--sv-muted); }
.sv-seg button:hover, .sv-sort button:hover { color: var(--sv-primary); }
.sv-seg button.is-active, .sv-sort button.is-active { background: var(--sv-accent); border-color: var(--sv-primary); color: var(--sv-primary); font-weight: 600; }
.sv-sort button.is-active { border-color: transparent; }

/* catalog table */
.sv-table { border: 1px solid var(--sv-line); border-radius: var(--sv-radius); overflow: hidden; background: var(--sv-surface); }
.sv-row {
    display: grid; grid-template-columns: 1.1fr 2fr 1fr 1.6fr 1.3fr; gap: 18px; align-items: start;
    padding: 18px 22px; border-top: 1px solid var(--sv-line); font-size: 15px; line-height: 1.45;
}
[data-sv-list] .sv-row:first-child { border-top: 0; }
.sv-row--head {
    border-top: 0; border-bottom: 1px solid var(--sv-line); background: var(--sv-soft); color: var(--sv-muted);
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding-top: 12px; padding-bottom: 12px;
}
.sv-row small { display: block; color: var(--sv-muted); font-size: 13px; }
.sv-row strong { color: var(--sv-ink); }
.sv-row__name strong { font-size: 18px; }
.sv-row__disk { display: block; }
.sv-row__gpu { margin-top: 4px; color: var(--sv-ink) !important; font-weight: 600; }
.sv-row__price strong { display: block; font-size: 19px; }
.sv-row__price .sv-btn { margin-top: 10px; }
.sv-row__label { display: none; }
.sv-tag {
    display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 6px; vertical-align: middle;
    background: var(--sv-soft); color: var(--sv-muted); font-size: 12px; font-weight: 700;
}
.sv-tag--gpu { background: var(--sv-good-soft); color: var(--sv-good); }
.sv-empty { padding: 36px 22px; text-align: center; color: var(--sv-muted); }
.sv-empty p { margin-bottom: 14px; }
.sv-note { margin-top: 12px; font-size: 14px; color: var(--sv-muted); text-align: center; }

.sv-custom {
    display: flex; gap: 24px; align-items: center; justify-content: space-between; margin-top: 28px; padding: 24px 28px;
    border-radius: var(--sv-radius); background: var(--sv-soft); border: 1px solid var(--sv-line);
}
.sv-custom h3 { margin-bottom: 6px; font-size: 21px; }
.sv-custom p { margin: 0; color: var(--sv-muted); }
.sv-custom__action { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; color: var(--sv-muted); font-size: 14px; }

/* VPS vs Cloud */
.sv-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sv-compare__card { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--sv-line); border-radius: var(--sv-radius); background: var(--sv-surface); }
.sv-compare__card.is-current { border-color: var(--sv-primary); }
.sv-compare__card h3 { font-size: 22px; margin-bottom: 14px; }
.sv-list { margin: 0 0 20px; padding: 0; list-style: none; flex: 1; }
.sv-list li { position: relative; padding-left: 24px; color: var(--sv-muted); line-height: 1.55; }
.sv-list li + li { margin-top: 8px; }
.sv-list li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--sv-primary); }
.sv-compare__card .sv-btn { align-self: flex-start; }

/* Cloud VPS */
.sv-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sv-fact { padding: 22px; border: 1px solid var(--sv-line); border-radius: var(--sv-radius); background: var(--sv-surface); }
.sv-fact h3 { font-size: 18px; margin-bottom: 8px; }
.sv-fact p { margin: 0; color: var(--sv-muted); font-size: 15px; line-height: 1.55; }
.sv-families { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.sv-family {
    display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; text-align: left; border: 1px solid var(--sv-line);
    border-radius: var(--sv-radius); background: var(--sv-surface); color: var(--sv-ink);
}
.sv-family b { font-size: 20px; }
.sv-family span { color: var(--sv-muted); font-size: 14px; }
.sv-family:hover { border-color: var(--sv-primary); }
.sv-family.is-active { border-color: var(--sv-primary); box-shadow: inset 0 0 0 1px var(--sv-primary); background: var(--sv-accent); }
.sv-panel__text { margin: 0 0 14px; color: var(--sv-muted); }
.sv-plans { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--sv-line); border-radius: var(--sv-radius); overflow: hidden; background: var(--sv-surface); }
.sv-plans th, .sv-plans td { padding: 14px 20px; border-top: 1px solid var(--sv-line); text-align: left; font-size: 15px; white-space: nowrap; }
.sv-plans thead th { border-top: 0; background: var(--sv-soft); color: var(--sv-muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.sv-plans tbody th { font-weight: 700; color: var(--sv-ink); }
.sv-plans td small { color: var(--sv-muted); margin-left: 4px; }
.sv-plans td:last-child, .sv-plans th:last-child { text-align: right; }
.sv-plans .sv-price { font-weight: 700; color: var(--sv-ink); margin-right: 14px; }

@media (max-width: 1199px) {
    .sv-purposes, .sv-families, .sv-facts { grid-template-columns: repeat(2, 1fr); }
    .sv-row { grid-template-columns: 1fr 1.6fr 1fr 1.4fr 1.2fr; gap: 12px; }
}
@media (max-width: 991px) {
    .sv-row--head { display: none; }
    .sv-row { grid-template-columns: 1fr 1fr; gap: 10px 18px; padding: 18px; }
    .sv-row__name, .sv-row__cpu, .sv-row__price { grid-column: 1 / -1; }
    .sv-row__label { display: block; font-size: 12px; color: var(--sv-muted); text-transform: uppercase; letter-spacing: .04em; }
    .sv-row__price { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; padding-top: 10px; border-top: 1px dashed var(--sv-line); }
    .sv-row__price .sv-row__label { grid-column: 1 / -1; }
    .sv-row__price .sv-btn { grid-column: 2; grid-row: 2 / span 3; margin-top: 0; }
    .sv-compare { grid-template-columns: 1fr; }
    .sv-sort { margin-left: 0; }
}
@media (max-width: 767px) {
    .sv-section { padding: 60px 0; }
    .sv-purposes, .sv-families, .sv-facts { grid-template-columns: 1fr; }
    .sv-custom { flex-direction: column; align-items: flex-start; }
    .sv-custom__action { align-items: flex-start; }
    /* plans as cards: price and the order button stay visible without horizontal scroll */
    .sv-plans, .sv-plans tbody, .sv-plans tr, .sv-plans th, .sv-plans td { display: block; }
    .sv-plans { border: 0; background: transparent; }
    .sv-plans thead { display: none; }
    .sv-plans tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px; margin-bottom: 12px; padding: 16px; border: 1px solid var(--sv-line); border-radius: var(--sv-radius); background: var(--sv-surface); }
    .sv-plans th, .sv-plans td { padding: 0; border: 0; white-space: normal; text-align: left !important; }
    .sv-plans tbody th { grid-column: 1 / -1; font-size: 18px; }
    .sv-plans td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--sv-muted); text-transform: uppercase; letter-spacing: .04em; }
    .sv-plans td small { display: block; margin-left: 0; }
    .sv-plans .sv-plans__buy { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px dashed var(--sv-line); }
}

/* ---- More character (John, 08.11: «все одноманітне, додай градієнту, виділення, жирнішим») ---- */
.sv {
    --sv-violet: var(--ds-accent-violet, #7B5CFF);
    --sv-grad: linear-gradient(135deg, var(--sv-primary) 0%, var(--sv-violet) 100%);
    --sv-grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--sv-primary) 10%, var(--sv-surface)) 0%, color-mix(in srgb, var(--sv-violet) 12%, var(--sv-surface)) 100%);
}
.sv-head h2 { font-weight: 800; }
.sv-head h2::after {
    content: ""; display: block; width: 64px; height: 4px; margin: 16px auto 0; border-radius: 4px; background: var(--sv-grad);
}
.sv-btn--primary { background: var(--sv-grad); box-shadow: 0 8px 20px color-mix(in srgb, var(--sv-primary) 28%, transparent); }
.sv-btn--primary:hover { filter: brightness(1.08); background: var(--sv-grad); }

/* purpose tabs: icon, count bubble, gradient when active */
.sv-purpose { position: relative; padding: 18px 18px 16px; gap: 6px; }
.sv-purpose strong { font-size: 17px; font-weight: 800; padding-right: 34px; }
.sv-purpose__icon {
    display: inline-flex; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 12px; align-items: center; justify-content: center;
    background: var(--sv-grad-soft); color: var(--sv-primary);
}
.sv-purpose__count {
    position: absolute; top: 16px; right: 16px; min-width: 28px; padding: 3px 8px; border-radius: 20px; text-align: center;
    background: var(--sv-soft); color: var(--sv-ink); font-style: normal; font-weight: 800; font-size: 13px;
}
.sv-purpose.is-active { background: var(--sv-grad); border-color: transparent; box-shadow: var(--sv-shadow); color: #fff; }
.sv-purpose.is-active strong, .sv-purpose.is-active span { color: #fff; }
.sv-purpose.is-active .sv-purpose__icon { background: rgba(255, 255, 255, .18); color: #fff; }
.sv-purpose.is-active .sv-purpose__count { background: rgba(255, 255, 255, .22); color: #fff; }

/* catalog rows: bolder names and prices, accent bar on hover, the cheapest of each group stands out */
.sv-table { box-shadow: var(--sv-shadow); }
.sv-row { position: relative; transition: background .15s; }
[data-sv-list] .sv-row:hover { background: color-mix(in srgb, var(--sv-primary) 4%, var(--sv-surface)); }
[data-sv-list] .sv-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: transparent; }
[data-sv-list] .sv-row:hover::before, [data-sv-list] .sv-row.is-pick::before { background: var(--sv-grad); }
.sv-row__name strong { font-size: 20px; font-weight: 800; }
.sv-row > div:nth-child(3) strong { font-size: 18px; font-weight: 800; }
.sv-row__price strong {
    font-size: 23px; font-weight: 800; background: var(--sv-grad); -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.sv-pick {
    display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 20px; background: var(--sv-grad); color: #fff;
    font-size: 12px; font-weight: 700; letter-spacing: .01em;
}
.sv-row.is-pick { background: color-mix(in srgb, var(--sv-violet) 4%, var(--sv-surface)); }

/* «not found what you need»: a gradient banner */
.sv-custom { background: var(--sv-grad); border: 0; color: #fff; box-shadow: var(--sv-shadow); }
.sv-custom h3, .sv-custom p, .sv-custom__action span { color: #fff; }
.sv-custom h3 { font-weight: 800; font-size: 23px; }
.sv-custom p { opacity: .9; }
.sv-custom .sv-btn--primary { background: #fff; color: var(--sv-primary); box-shadow: none; }
.sv-custom .sv-btn--primary:hover { filter: none; background: #F0F4FF; }

/* VPS vs Cloud */
.sv-compare__icon {
    display: inline-flex; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 14px; align-items: center; justify-content: center;
    background: var(--sv-grad-soft); color: var(--sv-primary);
}
.sv-compare__card h3 { font-weight: 800; }
.sv-compare__card--cloud { background: var(--sv-grad-soft); border-color: color-mix(in srgb, var(--sv-violet) 30%, var(--sv-line)); }
.sv-compare__card--cloud .sv-compare__icon { background: var(--sv-grad); color: #fff; }
.sv-compare__card.is-current { box-shadow: var(--sv-shadow); }

/* Cloud facts and families */
.sv-fact { transition: transform .2s, box-shadow .2s; }
.sv-fact:hover { transform: translateY(-3px); box-shadow: var(--sv-shadow); }
.sv-fact h3 { font-weight: 800; }
.sv-fact__icon {
    display: inline-flex; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; align-items: center; justify-content: center;
    background: var(--sv-grad); color: #fff;
}
.sv-family { position: relative; overflow: hidden; border-top: 4px solid var(--sv-fam, var(--sv-primary)); }
.sv-family--cx { --sv-fam: #2F80ED; }
.sv-family--cpx { --sv-fam: #E5484D; }
.sv-family--cax { --sv-fam: #2FA36B; }
.sv-family--ccx { --sv-fam: #8E44EC; }
.sv-family__icon {
    display: inline-flex; width: 36px; height: 36px; margin-bottom: 4px; border-radius: 10px; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--sv-fam) 14%, var(--sv-surface)); color: var(--sv-fam);
}
.sv-family b { font-size: 24px; font-weight: 800; color: var(--sv-fam); }
.sv-family strong { font-weight: 700; }
.sv-family.is-active { background: color-mix(in srgb, var(--sv-fam) 8%, var(--sv-surface)); border-color: var(--sv-fam); box-shadow: var(--sv-shadow); }
.sv-plans { box-shadow: var(--sv-shadow); }
.sv-plans tbody th { font-size: 17px; font-weight: 800; }
.sv-plans .sv-price { font-size: 18px; font-weight: 800; color: var(--sv-primary); }
.sv-plans tbody tr:hover { background: color-mix(in srgb, var(--sv-primary) 4%, var(--sv-surface)); }

/* SSL catalog on /ssl (same catalog pattern) */
.sv-purposes--6 { grid-template-columns: repeat(3, 1fr); }
.sv-row--ssl { grid-template-columns: 1.7fr 1.1fr 1.8fr 1.3fr; }
.sv-ssl__name { display: flex; gap: 12px; align-items: flex-start; }
.sv-ssl__name strong { font-size: 17px !important; line-height: 1.3; }
.sv-ssl__logo { flex: 0 0 auto; width: 28px; height: 36px; object-fit: contain; }
.sv-ssl__brand {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 74px; padding: 6px 8px; border-radius: 8px;
    font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #fff; background: var(--sv-grad);
}
.sv-ssl__brand--rapidssl { background: linear-gradient(135deg, #0B4F8A, #1D7FD8); }
.sv-ssl__brand--certum { background: linear-gradient(135deg, #B0102E, #E5484D); }
.sv-level {
    display: inline-block; margin-bottom: 4px; padding: 3px 10px; border-radius: 20px; color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .03em;
}
.sv-level--dv { background: linear-gradient(135deg, #1E9E62, #2FC27F); }
.sv-level--ov { background: linear-gradient(135deg, #1F5FE0, #4C8DFF); }
.sv-level--ev { background: linear-gradient(135deg, #6A3FE0, #A26BFF); }
.sv-levels { margin-top: 48px; }
.sv-levels h3 { margin-bottom: 16px; font-size: 24px; font-weight: 800; text-align: center; }
.sv-levels__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sv-levels__item { padding: 22px; border: 1px solid var(--sv-line); border-radius: var(--sv-radius); background: var(--sv-surface); }
.sv-levels__item strong { display: block; margin: 6px 0; font-size: 17px; font-weight: 800; }
.sv-levels__item p { margin: 0; color: var(--sv-muted); font-size: 15px; line-height: 1.55; }
.sv-callout {
    margin-top: 18px; padding: 18px 22px; border-radius: var(--sv-radius);
    background: var(--sv-warn-soft); border: 1px solid color-mix(in srgb, var(--sv-warn) 20%, transparent); color: var(--sv-warn);
}
.sv-callout strong { display: block; margin-bottom: 4px; font-size: 17px; }
.sv-callout p { margin: 0; line-height: 1.55; }
@media (max-width: 991px) {
    .sv-row--ssl { grid-template-columns: 1fr 1fr; }
    .sv-row--ssl .sv-row__name { grid-column: 1 / -1; }
    .sv-levels__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .sv-purposes--6 { grid-template-columns: 1fr; }
}

/* Hosting plans on /hosting: period switch, three cards with aligned resources */
.sv-periods { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 auto 28px; padding: 6px; width: max-content; max-width: 100%; border-radius: 14px; background: var(--sv-surface); border: 1px solid var(--sv-line); }
.sv-periods button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 16px; border: 0; border-radius: 10px; background: transparent; color: var(--sv-ink); font-weight: 700; font-size: 15px; }
.sv-periods button small { font-size: 12px; font-weight: 700; color: var(--sv-good); }
.sv-periods button:hover { color: var(--sv-primary); }
.sv-periods button.is-active { background: var(--sv-grad); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--sv-primary) 30%, transparent); }
.sv-periods button.is-active small { color: #fff; opacity: .9; }
.sv-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.sv-plan {
    position: relative; display: flex; flex-direction: column; padding: 28px 26px; border: 1px solid var(--sv-line);
    border-radius: calc(var(--sv-radius) + 4px); background: var(--sv-surface); transition: transform .2s, box-shadow .2s;
}
.sv-plan:hover { transform: translateY(-4px); box-shadow: var(--sv-shadow); }
.sv-plan.is-popular { border: 2px solid transparent; background: linear-gradient(var(--sv-surface), var(--sv-surface)) padding-box, var(--sv-grad) border-box; box-shadow: var(--sv-shadow); }
.sv-plan__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 4px 14px; border-radius: 20px; background: var(--sv-grad); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; }
.sv-plan h3 { margin-bottom: 4px; font-size: 26px; font-weight: 800; letter-spacing: .02em; }
.sv-plan__suits { min-height: 44px; margin: 0 0 18px; color: var(--sv-muted); font-size: 15px; line-height: 1.45; }
.sv-plan__price { min-height: 92px; margin-bottom: 16px; }
.sv-plan__price strong { font-size: 34px; font-weight: 800; line-height: 1.1; background: var(--sv-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sv-plan__price span { margin-left: 6px; color: var(--sv-muted); font-size: 15px; }
.sv-plan__price small { display: block; margin-top: 6px; color: var(--sv-muted); font-size: 14px; }
.sv-plan__save { margin-left: 6px; padding: 2px 8px; border-radius: 20px; background: var(--sv-good-soft); color: var(--sv-good); font-style: normal; font-weight: 700; font-size: 12px; }
.sv-plan__order { width: 100%; padding: 13px 20px; font-size: 16px; }
.sv-plan__res { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--sv-line); list-style: none; display: grid; gap: 12px; }
.sv-plan__res li { display: flex; gap: 12px; align-items: flex-start; font-weight: 700; font-size: 15px; line-height: 1.35; cursor: help; }
.sv-plan__res small { display: block; font-weight: 500; font-size: 12px; color: var(--sv-muted); text-transform: uppercase; letter-spacing: .04em; }
.sv-plan__ico { flex: 0 0 auto; display: inline-flex; width: 32px; height: 32px; border-radius: 9px; align-items: center; justify-content: center; background: var(--sv-grad-soft); color: var(--sv-primary); }
.sv-allprices { margin-top: 28px; }
.sv-allprices summary { width: max-content; margin: 0 auto 16px; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--sv-line); background: var(--sv-surface); color: var(--sv-primary); font-weight: 700; cursor: pointer; }
.sv-allprices[open] summary { background: var(--sv-accent); }
.sv-allprices td strong { display: block; color: var(--sv-ink); font-size: 16px; }
.sv-allprices td small { color: var(--sv-muted); margin-left: 0; }
.sv-allprices .sv-plans td, .sv-allprices .sv-plans th { text-align: left !important; }
.sv-explain { margin-top: 44px; }
.sv-explain h3 { margin-bottom: 18px; font-size: 24px; font-weight: 800; text-align: center; }
.sv-explain__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sv-explain__item { display: flex; gap: 12px; padding: 18px; border: 1px solid var(--sv-line); border-radius: var(--sv-radius); background: var(--sv-surface); }
.sv-explain__item strong { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 800; }
.sv-explain__item p { margin: 0; color: var(--sv-muted); font-size: 14px; line-height: 1.55; }
@media (max-width: 991px) {
    .sv-plans-grid, .sv-explain__grid { grid-template-columns: 1fr; }
    .sv-plan__suits, .sv-plan__price { min-height: 0; }
    .sv-plan.is-popular { order: -1; }
}
@media (max-width: 767px) {
    .sv-periods { width: 100%; }
    .sv-periods button { flex: 1 1 30%; padding: 8px 6px; font-size: 14px; }
}

/* a plan Hetzner does not sell right now: stays on the page, leads nowhere */
.sv-btn--soldout { background: var(--sv-line, #e2e5ea); color: var(--sv-muted, #6b7280); border-color: transparent; box-shadow: none; cursor: not-allowed; pointer-events: none; filter: none; }
.is-soldout, .is-soldout strong { color: var(--sv-muted); }
.sv-price.is-soldout { color: var(--sv-muted); font-weight: 600; }
.sv-stale { display: block; color: var(--sv-muted); font-size: 12px; font-style: italic; }
.sv-plans .sv-stale { display: inline; margin-right: 14px; }

/* data center flags (inline SVG, Windows has no emoji flags) */
.sv-flag { display: inline-block; vertical-align: -2px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); margin-right: 5px; }
.sv-dc { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; }
.sv-plans td.sv-dc { display: table-cell; margin-left: 0; white-space: nowrap; }
.sv-seg button .sv-flag { margin-right: 4px; }
.sv-toolbar--cloud { margin-bottom: 18px; }

/* one line about paying for a year under the catalog heading */
.sv-head .sv-term { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--sv-ink, inherit); }