/* XFreedom /go/ — mobile-first UI layer (2026-10-27). Loaded after styles.css and pricing.css.
   Targets 320 px … 4K: no horizontal scroll, clamp() type, ≥44 px tap targets, SVG icons. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video { max-width: 100%; }
.ic { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -.2em; }
.wrap { width: 100%; max-width: 560px; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
.top { gap: 10px; margin-bottom: 12px; }
.top-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.chip { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.chip-tg { border-color: #19d3c555; background: #19d3c51a; color: #dffaf7; }
.chip-tg.is-in { background: #ffffff0d; border-color: var(--line); max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.brand { min-width: 0; font-size: clamp(17px, 5vw, 20px); }
.btn, .store, .app, .step-btn, .chip-choice, summary, .dot-btn { min-height: 44px; }
.btn { white-space: normal; text-align: center; line-height: 1.2; }
input, select, textarea { min-height: 44px; }
summary { display: flex; align-items: center; }

/* hero + 3-step path */
.hero { margin: 2px 2px 12px; }
h1 { font-size: clamp(26px, 7.6vw, 46px); margin: 4px 0 6px; }
.sub { font-size: clamp(14px, 3.9vw, 17px); }
.path { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.path li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 10px 6px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #ffffff0a, #ffffff03); font-size: clamp(11px, 3.1vw, 14px); line-height: 1.25; color: var(--si); }
.path-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #63d9dc; background: radial-gradient(circle at 50% 30%, #19d3c52e, #0a2a2d); border: 1px solid #19d3c544; font-size: 20px; }
.path b { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 5px; border-radius: 50%; font-size: 11px; color: #041413; background: linear-gradient(180deg, #e9edf0, #9aa3aa); vertical-align: 1px; }
.path li span:last-child { overflow-wrap: anywhere; }
.has-sub .path { display: none; }

/* plan cards — layout A: 2×2 on phones/tablets, 4 across on desktop */
.pricing-section { margin: 0 0 14px; }
.pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pricing-card { padding: 12px 12px 12px; border-radius: 18px; transform: none !important; cursor: pointer; }
.pricing-card:hover, .pricing-card:focus-within, .pricing-card.is-selected { transform: none !important; }
.plan-top { min-height: 0; gap: 8px; flex-wrap: nowrap; }
.plan-top h2 { font-size: clamp(15px, 4.3vw, 20px); line-height: 1.15; }
.plan-crown { width: 34px; height: 34px; border-radius: 11px; font-size: 18px; }
.plan-crown .ic { width: 20px; height: 20px; }
.plan-gift { color: #ffd38a; border-color: #ffb02055; background: radial-gradient(ellipse at center, #ffb02033, #2a2109); }
.plan-top input[type=radio] { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; margin: 0; opacity: 0; border-radius: 18px; z-index: 1; cursor: pointer; }
.plan-description, .plan-features, .plan-price-caption { display: none; }
.plan-meta { margin: 8px 0 6px; font-size: clamp(11.5px, 3.1vw, 13px); line-height: 1.3; }
.plan-price { font-size: clamp(24px, 7.2vw, 34px); }
.selected-badge { left: 12px; top: -11px; font-size: 11px; padding: 3px 10px; }
.plan-buy { position: relative; z-index: 2; margin-top: 10px; min-height: 44px; white-space: normal; line-height: 1.2; padding: 8px 6px; font-size: clamp(13px, 3.6vw, 15px); }
.trial-btn:not(:disabled) { background: linear-gradient(105deg, #ffcf70, #ffa94d); border-color: #ffc46a; color: #2a1800; -webkit-text-fill-color: #2a1800; box-shadow: 0 0 18px #ffb02033; }
.trial-card { border-color: #ffb02044; }
.trial-card:hover, .trial-card:focus-within { border-color: #ffc46a; box-shadow: 0 0 0 1px #ffb02055, 0 12px 36px -12px #ffb02066; }
.trial-btn:disabled { color: #c9bfa8; -webkit-text-fill-color: #c9bfa8; }
.pricing-payment-row { margin-top: 18px; gap: 10px; }
.pricing-providers { gap: 8px; }
.provider-choice { min-height: 44px; border-radius: 14px; padding: 6px 12px; }
.provider-choice small { color: var(--gr); font-size: 11px; }
.provider-choice.is-off { opacity: .55; }
.provider-choice[data-extra].is-off { display: none; }
.pricing-section input[type=radio] { border-radius: 50%; }
.provider-choice input[type=radio] { min-height: 0; }
.payment-message { font-size: clamp(13px, 3.4vw, 14.5px); }
.help-link { margin: 6px 0 0; font-size: 14px; color: var(--si2); }
.help-link a { color: var(--tq); display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 600px) {
  .wrap { max-width: 760px; }
  .plan-description { display: block; min-height: 0; font-size: 13.5px; margin-top: 8px; }
  .plan-price-caption { display: block; }
  .plan-features { display: grid; margin: 12px 0 4px; gap: 8px; }
  .plan-features li { font-size: 13px; }
  .pricing-card { padding: 16px; }
  .pricing-grid { gap: 14px; }
}
@media (min-width: 900px) {
  .wrap { max-width: 1180px; column-gap: 22px; }
  .pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .plan-description { min-height: 4.2em; }
  .builder, .pricing-section, #connectionRequestSection { grid-column: 1 / -1; }
  .pricing-card:hover, .pricing-card.is-selected { transform: translateY(-3px) !important; }
}
.pricing-card:hover .plan-buy:not(:disabled), .pricing-card.is-selected .plan-buy:not(:disabled) { color: #001f23; }

/* layout B: swipe carousel with full cards */
html[data-layout="b"] .pricing-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 12px 14px 6px; margin: 0 -14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
html[data-layout="b"] .pricing-grid::-webkit-scrollbar { display: none; }
html[data-layout="b"] .pricing-card { flex: 0 0 min(76%, 330px); scroll-snap-align: center; padding: 16px; }
html[data-layout="b"] .plan-description, html[data-layout="b"] .plan-features, html[data-layout="b"] .plan-price-caption { display: block; }
html[data-layout="b"] .plan-features { display: grid; margin: 12px 0 8px; gap: 8px; }
html[data-layout="b"] .plan-top h2 { font-size: clamp(18px, 5vw, 22px); }
html[data-layout="b"] .plan-price { font-size: clamp(30px, 9vw, 40px); }
.plans-dots { display: none; }
html[data-layout="b"] .plans-dots { display: flex; justify-content: center; gap: 2px; margin-bottom: 6px; }
.dot-btn { width: 28px; background: none; border: 0; position: relative; cursor: pointer; }
.dot-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #ffffff33; transition: width .2s, background .2s, margin .2s; }
.dot-btn.on::after { width: 20px; margin-left: -10px; border-radius: 6px; background: var(--tq); }
@media (min-width: 900px) { html[data-layout="b"] .pricing-grid { justify-content: safe center; margin: 0; padding-left: 0; padding-right: 0; } html[data-layout="b"] .pricing-card { flex-basis: 300px; } }

/* layout C: one-line list rows */
html[data-layout="c"] .pricing-grid { grid-template-columns: 1fr; gap: 8px; }
html[data-layout="c"] .pricing-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top price" "meta buy"; column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 14px; }
html[data-layout="c"] .plan-top { grid-area: top; }
html[data-layout="c"] .plan-meta { grid-area: meta; margin: 0; }
html[data-layout="c"] .plan-price { grid-area: price; font-size: clamp(22px, 6.4vw, 30px); text-align: right; }
html[data-layout="c"] .plan-buy { grid-area: buy; margin: 4px 0 0; min-width: clamp(104px, 30vw, 150px); }
html[data-layout="c"] .plan-description, html[data-layout="c"] .plan-features, html[data-layout="c"] .plan-price-caption { display: none; }
html[data-layout="c"] .selected-badge { top: -9px; }
@media (min-width: 900px) { html[data-layout="c"] .pricing-grid { max-width: 760px; margin: 0 auto; } }

/* plan constructor */
.builder { margin: 14px 0; padding: clamp(14px, 4vw, 24px); }
.builder h2 { margin: 0 0 4px; font-size: clamp(20px, 5.4vw, 26px); }
.builder-grid { display: grid; gap: 18px; margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip-choice { padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); background: #ffffff0c; color: var(--si); font: 600 15px/1 inherit; font-family: inherit; cursor: pointer; }
.chip-choice.is-on { background: linear-gradient(105deg, #00b9b8, #08b5d6); border-color: #17d7df; color: #001f23; }
.stepper { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 18px; padding: 4px; background: #00000040; }
.step-btn { width: 52px; height: 52px; border-radius: 14px; border: 0; background: #ffffff12; color: var(--txt); font: 600 26px/1 inherit; font-family: inherit; cursor: pointer; }
.step-btn:disabled { opacity: .35; cursor: not-allowed; }
.stepper output { min-width: 64px; text-align: center; font: 700 28px/1 Georgia, serif; }
.builder-sum { display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 16px; background: linear-gradient(150deg, #0a1e20, #061012); border: 1px solid #19d3c533; }
.sum-price { font: 700 clamp(40px, 11vw, 56px)/1.05 Georgia, serif; color: #edf5f5; }
.builder-sum .btn.big { margin: 10px 0 4px; }
@media (min-width: 700px) { .builder-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }

/* login dialog */
.dlg { border: 1px solid #19d3c545; border-radius: 22px; background: #0d1214; color: var(--txt); padding: 22px clamp(16px, 5vw, 26px) 20px; width: min(92vw, 440px); max-height: 92vh; overflow: auto; }
.dlg::backdrop { background: #000b; backdrop-filter: blur(4px); }
.dlg h2 { margin: 0 44px 10px 0; font-size: clamp(20px, 5.4vw, 24px); }
.dlg-x { position: absolute; top: 8px; right: 8px; margin: 0; }
.dlg-close { width: 44px; height: 44px; border: 0; border-radius: 12px; background: #ffffff10; color: var(--txt); font-size: 26px; line-height: 1; cursor: pointer; }
.login-steps { margin: 0 0 6px; padding-left: 22px; color: var(--si); line-height: 1.5; }
.center-row { justify-content: center; margin-top: 6px; }
.mock-box { margin-top: 14px; padding: 12px; border: 1px dashed #ffb86b88; border-radius: 12px; color: #ffd38a; font-size: 13px; }
.mock-box input { flex: 1; }

/* sub-card, forms, misc responsiveness */
.code { font-size: clamp(14px, 4.4vw, 22px); letter-spacing: 1px; overflow-wrap: anywhere; }
.linkbox { flex-wrap: wrap; }
.linkbox input { flex: 1 1 180px; }
#connectionRequestForm .request-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.apps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.card { padding: clamp(14px, 4vw, 20px); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid #b5ffff; outline-offset: 3px; }

/* very small phones (320) */
@media (max-width: 359px) {
  .wrap { padding-left: 10px; padding-right: 10px; }
  .pricing-grid { gap: 8px; }
  .pricing-card { padding: 10px; }
  .plan-crown { display: none; }
  .path li { padding: 8px 4px; }
}
@media (max-width: 459px) { .xs-hide { display: none; } }
/* tall screens: scale the whole page (CSS pixels stay sharp: vector UI + 2×/3× raster icons) */
@media (min-width: 1920px) { body { zoom: 1.25; } }
@media (min-width: 2560px) { body { zoom: 1.6; } }
@media (min-width: 3200px) { body { zoom: 2; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media (max-width: 359px) {
  .top { gap: 6px; }
  .top-actions { gap: 6px; }
  .chip { padding: 0 10px; font-size: 13px; gap: 6px; }
  .brand { font-size: 16px; gap: 6px; }
  .brand .logo, .brand img, .brand svg { width: 32px; height: 32px; }
}
.pricing-card { display: flex; flex-direction: column; }
.pricing-card .plan-buy { margin-top: auto; }
.pricing-card .plan-price-caption, .pricing-card .plan-features { margin-bottom: 10px; }
.pricing-card .plan-buy { align-self: stretch; }
.chip-tg #accountSuffix { margin-left: -6px; }
@media (max-width: 359px) { .brand span { display: none; } }