/* XFreedom /go/ — design v2 (2026-10-27, TEST copy). Loaded LAST. Brighter, more saturated palette; glowing ring on the «Популярный» card;
   soft side glow on hover; every icon/logo is inline SVG (vector → razor-sharp at 4K); one alignment system for 320 px … 4K. */
:root {
  --bg: #04080a; --tq: #25f5e0; --tq2: #00d2e6; --cy: #2ac9ff; --vi: #8f74ff; --gold: #ffc533;
  --txt: #f7fcfd; --si: #e8f2f4; --si2: #b9cbd0; --gr: #8fa4ab; --line: #ffffff26;
  --card: #0a181bdd; --r: 20px; --g: 12px;
}
html, body { background: var(--bg); }
.bg { background:
  radial-gradient(1100px 620px at 12% -12%, #00f0d85c, transparent 62%),
  radial-gradient(900px 600px at 108% 4%, #2a7bff40, transparent 62%),
  radial-gradient(800px 520px at 50% 108%, #8f74ff30, transparent 65%),
  linear-gradient(180deg, #04080a, #07100f 60%, #04080a); }
.wrap { max-width: 560px; }
.hero { margin: 4px 0 14px; }
h1 { letter-spacing: -.02em; }
.grad { background: linear-gradient(90deg, #25f5e0, #2ac9ff 55%, #8f74ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { color: var(--si2); }

/* ---------- icons / logo (all inline SVG) ---------- */
.ic { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -.22em; }
.logo { flex: none; border-radius: 11px; filter: drop-shadow(0 4px 14px #00f0d870); }
.brand { gap: 10px; align-items: center; }
.app-logo { width: 40px; height: 40px; flex: none; }

/* ---------- header / buttons ---------- */
.chip { color: var(--txt); }
.chip-tg { border-color: #25f5e099; background: linear-gradient(180deg, #25f5e033, #25f5e014); color: #ecfffc; box-shadow: 0 0 18px -4px #25f5e066; }
.btn { background: linear-gradient(180deg, #4dfff0, #00cfe3); color: #02201f; box-shadow: 0 8px 26px #25f5e05c, inset 0 1px 0 #ffffff99; }
.btn.ghost { background: #ffffff12; color: var(--si); border-color: #ffffff2e; box-shadow: none; }
.btn .ic { width: 1.2em; height: 1.2em; }

/* ---------- 3-step strip ---------- */
.path { gap: 8px; }
.path li { border-color: #25f5e033; background: linear-gradient(180deg, #25f5e014, #ffffff05); color: var(--si); align-items: center; justify-content: flex-start; }
.path-ic { color: #7bfff1; background: radial-gradient(circle at 50% 30%, #25f5e04d, #082a2e); border-color: #25f5e077; box-shadow: 0 0 16px -4px #25f5e099; }
.path-ic .ic { width: 22px; height: 22px; }
.path b { flex: none; }

/* ---------- plan cards ---------- */
html[data-layout="a"] .pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); row-gap: 0; align-items: stretch; padding: 14px 0 0; margin: 0; }
html[data-layout="a"] .pricing-card { --glow: #25f5e0; --rc: 18px; margin: 0 0 var(--g); }
html[data-layout="a"] .is-popular { --glow: #2ac9ff; }
html[data-layout="a"] .trial-card { --glow: #ffb62e; }
.pricing-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; cursor: pointer;
  padding: 14px 14px 14px; border-radius: var(--rc, 18px); border: 1px solid #2f6a70;
  background: linear-gradient(155deg, #0f2d33f2 0%, #07161af5 55%, #050f12f7 100%);
  box-shadow: 0 14px 30px -12px #000c, inset 0 1px 0 #ffffff1c;
  transition: border-color .25s, box-shadow .25s, transform .25s, background .25s;
}
/* soft glow along BOTH side edges — appears on hover / focus / selection */
.pricing-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--glow) 38%, transparent), transparent 26%, transparent 74%, color-mix(in srgb, var(--glow) 38%, transparent)),
    radial-gradient(120% 60% at 50% 0, color-mix(in srgb, var(--glow) 12%, transparent), transparent 70%);
}
.pricing-card:hover, .pricing-card:focus-within, .pricing-card.is-selected {
  border-color: color-mix(in srgb, var(--glow) 80%, #fff 0%);
  box-shadow: -16px 0 36px -14px color-mix(in srgb, var(--glow) 75%, transparent), 16px 0 36px -14px color-mix(in srgb, var(--glow) 75%, transparent),
              0 0 0 1px color-mix(in srgb, var(--glow) 45%, transparent), 0 20px 44px -18px #000d, inset 0 1px 0 #ffffff26;
  background: linear-gradient(155deg, #123840f7, #081a1ff8 60%, #061216f9);
}
.pricing-card:hover::after, .pricing-card:focus-within::after, .pricing-card.is-selected::after { opacity: 1; }

/* «Популярный»: always-on glowing ring (animated conic outline) */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.is-popular { border-color: transparent; box-shadow: 0 0 34px -2px #25f5e07a, 0 0 80px -6px #2ac9ff66, 0 18px 40px -14px #000d, inset 0 1px 0 #ffffff2e; background: linear-gradient(155deg, #12414bf8, #08202af8 60%, #061519fa); }
.is-popular::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: calc(var(--rc) + 2px); padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--ang), #25f5e0, #2ac9ff 28%, #8f74ff 52%, #2ac9ff 76%, #25f5e0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: ring 7s linear infinite;
  filter: drop-shadow(0 0 6px #25f5e0aa);
}
@keyframes ring { to { --ang: 360deg; } }
.is-popular:hover, .is-popular:focus-within, .is-popular.is-selected {
  box-shadow: -18px 0 42px -12px #2ac9ffcc, 18px 0 42px -12px #25f5e0cc, 0 0 44px -2px #25f5e099, 0 0 96px -6px #2ac9ff77, 0 22px 46px -16px #000d, inset 0 1px 0 #ffffff33;
}
.pop-badge, .selected-badge { position: absolute; display: inline-flex; align-items: center; gap: 5px; z-index: 3; font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: .02em; border-radius: 999px; padding: 6px 11px; white-space: nowrap; }
.pop-badge { top: -13px; left: 50%; transform: translateX(-50%); color: #05201f; background: linear-gradient(90deg, #6bfff2, #2ac9ff 60%, #a58cff); box-shadow: 0 0 20px #25f5e0aa, inset 0 1px 0 #fff9; text-transform: uppercase; font-size: 11px; }
.pop-badge .ic, .selected-badge .ic { width: 12px; height: 12px; vertical-align: 0; }
.selected-badge { display: none; top: -11px; left: auto; right: 12px; color: #05201f; background: linear-gradient(90deg, #7dfff0, #1fe0ee); box-shadow: 0 0 14px #25f5e088; }
.is-selected .selected-badge { display: inline-flex; }
.is-popular .selected-badge { top: auto; bottom: auto; }

/* card content — one rhythm for every card */
.plan-top { position: static; display: flex; align-items: center; gap: 10px; min-height: 0; flex-wrap: nowrap; }
.plan-top h2 { margin: 0; font: 700 clamp(16px, 4.6vw, 21px)/1.15 Georgia, "Times New Roman", serif; color: #fff; overflow-wrap: anywhere; letter-spacing: 0; }
.plan-crown { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; color: #8bfff2; border: 1px solid #25f5e088; background: radial-gradient(circle at 50% 25%, #25f5e052, #09343a); box-shadow: 0 0 18px -4px #25f5e0aa, inset 0 0 10px #25f5e022; }
.plan-crown .ic { width: 21px; height: 21px; vertical-align: 0; }
.is-popular .plan-crown { color: #d2ecff; border-color: #2ac9ffaa; background: radial-gradient(circle at 50% 25%, #2ac9ff66, #0a2a45); box-shadow: 0 0 20px -2px #2ac9ffcc; }
.plan-gift { color: #ffe08a; border-color: #ffc53399; background: radial-gradient(circle at 50% 25%, #ffc53355, #3a2a07); box-shadow: 0 0 18px -4px #ffb62eaa; }
.plan-description { display: none; margin: 12px 0 0; color: var(--si2); font-size: 14px; line-height: 1.5; cursor: pointer; }
.plan-meta { display: flex; flex-direction: column; gap: 1px; margin: 10px 0 6px; padding: 0; font-size: clamp(12px, 3.3vw, 13.5px); line-height: 1.35; color: var(--si2); }
.plan-price { margin: 0; font: 700 clamp(26px, 7.4vw, 36px)/1.05 Georgia, "Times New Roman", serif; color: #fff; white-space: nowrap; text-shadow: 0 0 22px #25f5e033; font-variant-numeric: lining-nums tabular-nums; }
.is-popular .plan-price { text-shadow: 0 0 26px #2ac9ff77; }
.plan-price-caption { display: none; margin: 4px 0 0; font-size: 13px; color: var(--gr); }
.plan-features { display: none; list-style: none; padding: 0; margin: 14px 0 16px; gap: 10px; }
.plan-features li { display: flex; align-items: flex-start; gap: 9px; padding: 0; font-size: 14px; line-height: 1.35; color: var(--si); }
.plan-features li::before { content: none; }
.plan-features .ic { width: 17px; height: 17px; margin-top: 1px; color: #3dffe8; filter: drop-shadow(0 0 5px #25f5e099); }
.plan-buy {
  position: relative; z-index: 2; align-self: stretch; margin: auto 0 0; min-height: 46px; padding: 8px 10px; border-radius: 12px; border: 1px solid #3a7077;
  background: #0a1d21; color: #f1fafb; -webkit-text-fill-color: #f1fafb; font: 700 clamp(13.5px, 3.7vw, 15px)/1.2 inherit; font-family: inherit; white-space: normal; cursor: pointer;
  transition: background .25s, box-shadow .25s, color .25s, border-color .25s;
}
.plan-price + .plan-price-caption + .plan-features, .plan-price ~ .plan-buy { }
.pricing-card .plan-price { margin-bottom: 12px; }
.pricing-card:hover .plan-buy:not(:disabled), .pricing-card:focus-within .plan-buy:not(:disabled), .pricing-card.is-selected .plan-buy:not(:disabled), .is-popular .plan-buy:not(:disabled) {
  background: linear-gradient(105deg, #2bf2e0, #1fb8ff); border-color: #7ffaf2; color: #021d22; -webkit-text-fill-color: #021d22; box-shadow: 0 0 24px #25f5e077, inset 0 1px 2px #ffffffa0;
}
.plan-buy:disabled, .is-popular .plan-buy:disabled { background: #0c1f23; border-color: #37757c; color: #d3ecee; -webkit-text-fill-color: #d3ecee; box-shadow: none; }
.pricing-card:hover .plan-buy:disabled, .pricing-card:focus-within .plan-buy:disabled, .pricing-card.is-selected .plan-buy:disabled, .is-popular .plan-buy:disabled { background: #0e2a2f; border-color: #3ff2e5; color: #eafffe; -webkit-text-fill-color: #eafffe; box-shadow: 0 0 18px -4px #25f5e099; }
.trial-btn:not(:disabled), .trial-card:hover .trial-btn:not(:disabled) { background: linear-gradient(105deg, #ffe27a, #ffa83a); border-color: #ffd36a; color: #2a1700; -webkit-text-fill-color: #2a1700; box-shadow: 0 0 24px #ffb62e66, inset 0 1px 2px #fff9; }
.trial-card { border-color: #ffc53380; background: linear-gradient(155deg, #2a1f08f2, #0e0c08f5 60%, #070707f7); }
.trial-card:hover, .trial-card:focus-within { border-color: #ffd36a; background: linear-gradient(155deg, #33260af5, #120e08f8 60%, #080707f9); }
.trial-card .plan-description { color: #d9cdb0; }

/* ---------- MOBILE (<640): popular card on top (full width), two compact cards, trial strip ---------- */
@media (max-width: 639px) {
  html[data-layout="a"] .is-popular { order: 1; grid-column: 1 / -1; margin-top: 4px; }
  html[data-layout="a"] [data-plan="first-step"] { order: 2; }
  html[data-layout="a"] [data-plan="freedom"] { order: 3; }
  html[data-layout="a"] .trial-card { order: 4; grid-column: 1 / -1; }
  html[data-layout="a"] .is-popular, html[data-layout="a"] .trial-card {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top price" "meta price" "buy buy"; column-gap: 12px; row-gap: 0; align-items: center; padding: 16px 16px 14px;
  }
  .is-popular .plan-top, .trial-card .plan-top { grid-area: top; }
  .is-popular .plan-meta, .trial-card .plan-meta { grid-area: meta; flex-direction: row; gap: 0; margin: 6px 0 0; }
  .is-popular .plan-meta span + span::before, .trial-card .plan-meta span + span::before { content: "·"; margin: 0 .5em; }
  .is-popular .plan-price, .trial-card .plan-price { grid-area: price; margin: 0; font-size: clamp(30px, 9.4vw, 40px); text-align: right; align-self: center; }
  .is-popular .plan-buy, .trial-card .plan-buy { grid-area: buy; margin-top: 14px; }
  .trial-card { padding-top: 14px; }
  .trial-card .plan-price-caption { display: none; }
}
@supports (grid-template-rows: subgrid) {
  @media (max-width: 639px) {
    html[data-layout="a"] [data-plan="first-step"], html[data-layout="a"] [data-plan="freedom"] { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    html[data-layout="a"] [data-plan="first-step"] .plan-buy, html[data-layout="a"] [data-plan="freedom"] .plan-buy { margin-top: 0; }
  }
}

/* ---------- TABLET / DESKTOP (≥640): 3 plans in one row, «Популярный» in the CENTRE, trial strip below ---------- */
@media (min-width: 640px) {
  .wrap { max-width: 860px; }
  html[data-layout="a"] .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 24px); padding-top: 20px; }
  html[data-layout="a"] .pricing-card { --rc: 22px; padding: 20px 18px 18px; margin-bottom: 0; }
  html[data-layout="a"] .is-popular, html[data-layout="a"] .trial-card { order: 0; grid-column: auto; }
  html[data-layout="a"] [data-plan="first-step"], html[data-layout="a"] [data-plan="own-way"], html[data-layout="a"] [data-plan="freedom"] { order: 0; }
  .plan-description, .plan-price-caption { display: block; }
  .plan-features { display: grid; }
  .plan-top h2 { font-size: clamp(18px, 2.4vw, 24px); }
  .plan-crown { width: 40px; height: 40px; }
  .plan-meta { flex-direction: row; gap: 0; margin: 14px 0 6px; font-size: 13.5px; }
  .plan-meta span + span::before { content: "·"; margin: 0 .5em; }
  .plan-price { font-size: clamp(32px, 4.2vw, 48px); margin-bottom: 0; }
  .pricing-card .plan-price { margin-bottom: 0; }
  .plan-price-caption { margin-bottom: 0; }
  .plan-buy { min-height: 48px; }
  html[data-layout="a"] .is-popular { z-index: 2; }
  html[data-layout="a"] .pricing-card:hover, html[data-layout="a"] .pricing-card.is-selected { transform: translateY(-4px) !important; }
  html[data-layout="a"] .pricing-card:focus-within:not(:hover):not(.is-selected) { transform: none !important; }
  /* trial strip: one horizontal row under the three plans */
  html[data-layout="a"] .trial-card {
    grid-column: 1 / -1; margin-top: clamp(22px, 3vw, 32px); display: grid; grid-template-columns: minmax(200px, 0.9fr) minmax(0, 1.6fr) auto minmax(190px, 240px);
    grid-template-areas: "top desc price buy" "top meta cap buy"; column-gap: clamp(14px, 2.4vw, 28px); row-gap: 2px; align-items: center; padding: 16px 20px;
  }
  .trial-card .plan-top { grid-area: top; }
  .trial-card .plan-description { grid-area: desc; margin: 0; align-self: end; }
  .trial-card .plan-meta { grid-area: meta; margin: 0; align-self: start; }
  .trial-card .plan-price { grid-area: price; font-size: clamp(30px, 3.4vw, 40px); align-self: end; text-align: right; }
  .trial-card .plan-price-caption { grid-area: cap; margin: 0; text-align: right; align-self: start; white-space: nowrap; }
  .trial-card .plan-features { display: none; }
  .trial-card .plan-buy { grid-area: buy; margin: 0; }
  .selected-badge { right: 16px; }
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 640px) {
    /* every plan card spans the same 7 rows of the parent grid → title, text, price, features and button line up across cards */
    html[data-layout="a"] [data-plan] { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; }
    html[data-layout="a"] [data-plan] .plan-buy { margin: 0; }
    html[data-layout="a"] [data-plan] .plan-features { align-content: start; }
    html[data-layout="a"] .trial-card { grid-row: auto; display: grid; }
  }
}
@media (min-width: 900px) {
  .wrap { max-width: 1180px; }
  html[data-layout="a"] .pricing-card { padding: 24px 22px 22px; }
  .plan-description { font-size: 14.5px; }
  .plan-features li { font-size: 14.5px; }
  html[data-layout="a"] .trial-card { padding: 18px 26px; }
}

/* ---------- payment row, messages ---------- */
.pricing-payment-row { margin-top: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--si2); }
.provider-choice { background: #0a1d21; border-color: #3a7077; color: var(--txt); }
.provider-choice:has(input:checked) { border-color: #25f5e0; background: #25f5e01f; box-shadow: 0 0 16px -6px #25f5e0aa; }
.pricing-section input:checked { background: #25f5e0; border-color: #25f5e0; }
.payment-message { color: var(--si2); }
.help-link a { color: #5ffcee; }

/* ---------- constructor ---------- */
.card { background: linear-gradient(160deg, #0d2126e6, #081418e6); border-color: #ffffff22; }
.builder { padding: clamp(16px, 4vw, 26px); }
.builder-head { margin: 0; }
.builder-head p { margin: 4px 0 0; }
.builder .label { margin: 0 0 8px; }
.builder-controls { display: grid; align-content: start; gap: 0; }
.chips { gap: 8px; margin: 0 0 20px; }
.chip-choice { min-width: 64px; justify-content: center; padding: 0 14px; border-color: #ffffff2e; background: #ffffff12; color: var(--txt); line-height: 44px; font-size: 15px; font-weight: 700; }
.chip-choice.is-on { background: linear-gradient(105deg, #2bf2e0, #1fb8ff); border-color: #7ffaf2; color: #021d22; box-shadow: 0 0 20px -2px #25f5e099; }
.stepper { border-color: #ffffff2e; background: #00000055; }
.step-btn { display: inline-grid; place-items: center; background: #ffffff1c; color: #fff; }
.step-btn .ic { width: 22px; height: 22px; vertical-align: 0; }
.step-btn:not(:disabled):hover { background: #25f5e033; }
.stepper output { font-size: 30px; font-variant-numeric: tabular-nums; }
.builder-sum { background: linear-gradient(150deg, #0c2e33, #061418); border-color: #25f5e066; box-shadow: 0 0 30px -10px #25f5e077, inset 0 1px 0 #ffffff1c; }
.sum-price { color: #fff; text-shadow: 0 0 24px #25f5e044; }

/* ---------- login dialog / subscription / forms ---------- */
.dlg { background: linear-gradient(160deg, #0e262bf8, #071114f8); border-color: #25f5e077; box-shadow: 0 0 60px -10px #25f5e077; }
.dlg-close { display: grid; place-items: center; }
.dlg-close .ic { width: 20px; height: 20px; vertical-align: 0; }
.login-steps b { color: #7ffcf0; }
.open-apps { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 14px 0 6px; }
.open-apps .btn.big { margin: 0; }
.app-btn { justify-content: flex-start; gap: 12px; padding: 12px 16px; font-size: clamp(15px, 4.2vw, 18px); text-align: left; }
.app-btn span { flex: 1; text-align: center; padding-right: 40px; }
@media (min-width: 480px) { .open-apps { grid-template-columns: 1fr 1fr; } .app-btn span { padding-right: 0; text-align: left; } }
.linkbox { align-items: stretch; }
.linkbox .btn { flex: none; }
.restore, #stateLoading, #stateError, #connectionRequestSection { grid-column: 1 / -1; }
.restore, .builder, #connectionRequestSection { margin-left: 0; margin-right: 0; }
.foot { grid-column: 1 / -1; }
.foot a { color: #5ffcee; }
.toast { background: #f2fbfc; }

/* ---------- 320 px safety ---------- */
@media (max-width: 359px) {
  html[data-layout="a"] .pricing-card { padding: 11px; }
  html[data-layout="a"] .is-popular, html[data-layout="a"] .trial-card { padding: 14px 12px 12px; }
  .pop-badge { font-size: 10px; padding: 5px 9px; }
}
@media (prefers-reduced-motion: reduce) { .is-popular::before { animation: none !important; } }

/* compact two-column cards on phones: keep titles on one line */
@media (max-width: 639px) {
  html[data-layout="a"] .pricing-card:not(.is-popular):not(.trial-card) .plan-top { gap: 8px; }
  html[data-layout="a"] .pricing-card:not(.is-popular):not(.trial-card) .plan-top h2 { font-size: clamp(14.5px, 4.3vw, 19px); white-space: nowrap; overflow-wrap: normal; }
  html[data-layout="a"] .pricing-card:not(.is-popular):not(.trial-card) .plan-crown { width: 30px; height: 30px; border-radius: 10px; }
  html[data-layout="a"] .pricing-card:not(.is-popular):not(.trial-card) .plan-crown .ic { width: 18px; height: 18px; }
}
@media (max-width: 379px) {
  html[data-layout="a"] .pricing-card:not(.is-popular):not(.trial-card) .plan-crown { display: none; }
}
@media (min-width: 640px) { .trial-card .plan-top h2 { white-space: nowrap; } }
/* constructor stepper: [−] value [+] spans the row on phones */
.stepper { display: flex; align-items: center; justify-content: space-between; }
.stepper output { flex: 1; text-align: center; }
@media (min-width: 640px) { .stepper { display: inline-flex; justify-content: flex-start; min-width: 220px; } }