/* undefined — polish layer for inner pages (pricing, devices, faq, checkout, account) */
/* Loaded after style.css on inner pages only; index.html does not load it.  */
/* Refinements on top of style.css — no layout rewrites, no new keyframes.   */

/* 01 / Sub-hero: top light, more expressive h1, decorative mono index */
.sub-hero {
  background: radial-gradient(560px 260px at 14% 0%, #ffffff08, transparent 72%);
}
.sub-hero h1 {
  font-weight: 800;
  text-shadow: 0 10px 44px #0006;
}
/* decorative right-side mono caption; ::after is taken, ::before is free */
.sub-hero::before {
  content: '/// UNDEFINED';
  position: absolute;
  top: 0;
  right: 0;
  font: 500 8px/1 var(--mono);
  letter-spacing: .22em;
  color: #55555a;
  pointer-events: none;
}
/* small lit square in front of the page index */
.sub-hero .kicker::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  background: #efeee9;
  box-shadow: 0 0 10px #ffffff40;
}
/* 02 / Breadcrumb: hover accent */
.breadcrumb a:hover {
  color: #efeee9;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 03 / Panels: one shared depth, light seam on top of the summary columns */
.checkout-panel,
.checkout-aside,
.account-main,
.account-aside,
.faq-help,
.device-guide,
.help-tools,
.price-summary {
  box-shadow: inset 0 1px #ffffff08, 0 15px 45px #0002;
}
.price-summary {
  position: relative;
}
/* checkout-aside is sticky on desktop (positioned), static on mobile — fixed below */
.checkout-aside::before,
.price-summary::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffffff40, transparent);
}

/* 04 / Wizard progress: glowing current step, muted completed steps */
.wizard-step b {
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.wizard-step.is-current {
  box-shadow: 0 -4px 16px -6px #ffffff26;
}
.wizard-step.is-current b {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border: 1px solid #efeee9;
  border-radius: 4px;
  background: #232327;
  color: #f6f5f1;
  box-shadow: 0 0 18px #fff2;
}
.wizard-step.is-complete b {
  color: #d6d6d1;
}

/* 05 / Checkout plan + payment method: hover lift, active glow */
.checkout-plan,
.payment-method {
  transition: transform .25s, background .25s, border-color .25s, box-shadow .25s;
}
.checkout-plan:not(:disabled):hover,
.payment-method:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: #6e6e73;
}
.checkout-plan.active {
  box-shadow: inset 3px 0 #f3f2ed, 0 0 22px #ffffff17;
}
.payment-method.active {
  box-shadow: 0 0 20px #ffffff14;
}

/* 06 / Account orders: hover accent, selected card inverted */
.account-order {
  transition: transform .25s, background .25s, border-color .25s, box-shadow .25s;
}
.account-order:hover {
  transform: translateY(-1px);
  border-color: #8f8f92;
  box-shadow: 0 10px 26px #0003;
}
.account-order.active {
  background: #f0efeb;
  border-color: #f0efeb;
  color: #101011;
  box-shadow: 0 12px 30px #0004;
}
.account-order.active small {
  color: #55555a;
}
.account-order.active:hover {
  background: #f6f5f1;
  border-color: #fff;
  transform: translateY(-1px);
}

/* 07 / Checkout history rows: hover accent */
.history-item {
  transition: transform .25s, background .25s, border-color .25s, box-shadow .25s;
}
.history-item:hover {
  transform: translateY(-1px);
  background: #1d1d20;
  border-color: #9a9a9e;
  box-shadow: 0 8px 22px #0003;
}

/* 08 / QR block: lighter frame, mono caption */
.qr-block {
  border-color: #4a4a4f;
  box-shadow: inset 0 1px #ffffff0c, 0 12px 32px #0003;
}
.qr-block p {
  font: 500 10px/1.7 var(--mono);
  letter-spacing: .04em;
  color: #a9a9ae;
}

/* 09 / Focus states for interactive cards and tabs */
.plan:focus-visible,
.checkout-plan:focus-visible,
.payment-method:focus-visible,
.account-order:focus-visible,
.history-item:focus-visible,
.device-tab:focus-visible,
.help-category:focus-visible {
  outline: 2px solid #efeee9;
  outline-offset: 3px;
}

/* 10 / Micro labels: mono captions */
.field-label,
.help-search label {
  font: 600 10px var(--mono);
  letter-spacing: .14em;
  color: #9b9ba0;
}
.panel-label {
  letter-spacing: .14em;
  color: #9b9ba0;
}

/* 11 / Mobile: point edits to what this layer adds only */
@media (max-width: 650px) {
  .sub-hero::before { display: none; }
  /* style.css unsets sticky here; keep the ::before seam anchored to the panel */
  .checkout-aside { position: relative; }
  .checkout-panel,
  .checkout-aside,
  .account-main,
  .account-aside,
  .price-summary { padding: 20px; }
  .wizard-step.is-current b { min-width: 22px; height: 22px; font-size: 9px; }
  .account-order.active { box-shadow: 0 8px 22px #0004; }
}

/* 12 / Reduced motion: no movement from this layer */
@media (prefers-reduced-motion: reduce) {
  .checkout-plan,
  .payment-method,
  .account-order,
  .history-item,
  .wizard-step b { transition: none !important; }
  .checkout-plan:hover,
  .payment-method:hover,
  .account-order:hover,
  .account-order.active:hover,
  .history-item:hover { transform: none; }
}

/* 13 / devices.html: alternative clients inside the device panel        */
/* Only the variant matching the active device tab is shown.              */
.client-alternatives {
  margin-top: 26px;
  border: 1px solid #343438;
  border-radius: 7px;
  background: #17171a;
  padding: 20px 22px;
}
.client-alternatives-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.client-alternatives-head p {
  margin: 0;
  font-size: 10px;
  color: #85858b;
  line-height: 1.7;
}
.client-alternatives-head .panel-label {
  flex: none;
}
.client-variant {
  display: none;
}
/* Tab buttons and the panel are in different subtrees, so the active tab  */
/* is matched through the shared .device-guide ancestor via :has().        */
/* The first tab carries .active in the static markup, so the iOS list is  */
/* visible even before app.js runs.                                       */
.device-guide:has(.device-tab.active[data-device="ios"]) .client-variant[data-device="ios"],
.device-guide:has(.device-tab.active[data-device="android"]) .client-variant[data-device="android"],
.device-guide:has(.device-tab.active[data-device="windows"]) .client-variant[data-device="windows"],
.device-guide:has(.device-tab.active[data-device="mac"]) .client-variant[data-device="mac"] {
  display: block;
}
/* Browsers without :has() show every list rather than an empty block.    */
@supports not selector(:has(*)) {
  .client-variant {
    display: block;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed #343438;
  }
  .client-variant::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font: 600 9px var(--mono);
    letter-spacing: .12em;
    color: #77777d;
    text-transform: uppercase;
  }
}
.client-variant ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.client-item {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid #2c2c30;
}
.client-item:first-child {
  border-top: 0;
}
.client-item b {
  font-size: 12px;
  letter-spacing: -.02em;
}
.client-item small {
  font-size: 10px;
  line-height: 1.7;
  color: #909095;
}
.client-item a {
  font: 500 10px var(--mono);
  color: #d6d6d3;
  white-space: nowrap;
  border-bottom: 1px solid #4a4a4f;
  padding-bottom: 1px;
  transition: color .25s, border-color .25s;
}
.client-item a:hover {
  color: #fff;
  border-color: #fff;
}
.client-item a span {
  font-size: 11px;
  margin-left: 4px;
}
.client-item.is-static small {
  color: #85858b;
}
.client-item .client-arrow {
  font: 400 14px/1 var(--mono);
  color: #55555a;
}
.guide-client-label {
  display: block;
  margin-top: 4px;
}
@media (max-width: 700px) {
  .client-alternatives {
    padding: 16px;
  }
  .client-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .client-item a {
    justify-self: start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .client-item a { transition: none; }
}

/* 14 / devices.html: "Проверка подключения" section                      */
.device-check-section {
  padding-bottom: 16px;
}
.device-check-section .section-top {
  align-items: start;
}
.device-check-section h2 {
  font-size: clamp(34px, 4.4vw, 52px);
  letter-spacing: -.065em;
  line-height: 1.1;
  margin: 20px 0 0;
  font-weight: 800;
}
.device-check-section .section-intro {
  margin-bottom: 8px;
}
/* Steps reuse .guide-steps; only the two site links need this page's look. */
.device-check-section .check-guide {
  margin-top: 38px;
}
.device-check-section .guide-steps p a {
  color: #e3e3e1;
  border-bottom: 1px solid #4a4a4f;
  padding-bottom: 1px;
  transition: color .25s, border-color .25s;
}
.device-check-section .guide-steps p a:hover {
  color: #fff;
  border-color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .device-check-section .guide-steps p a { transition: none; }
}
.check-card {
  background: #17171a;
  border: 1px solid #303034;
  border-radius: 8px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.check-card h3 {
  font-size: 15px;
  letter-spacing: -.03em;
  margin: 0;
}

/* 15 / devices.html: closing "Не подходит приложение?" panel             */
.other-clients {
  padding-top: 0;
}
.other-clients-panel {
  border: 1px solid #343438;
  border-radius: 8px;
  background: radial-gradient(circle at right, #232327, #161618 70%);
  padding: 38px 40px;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 40px;
  align-items: start;
}
.other-clients-panel h2 {
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -.06em;
  line-height: 1.08;
  margin: 14px 0 0;
  font-weight: 800;
}
.other-clients-copy {
  display: grid;
  gap: 14px;
  align-content: start;
}
.other-clients-copy p {
  margin: 0;
  font-size: 12px;
  line-height: 1.85;
  color: #a2a2a7;
  max-width: 520px;
}
.other-clients-note {
  font: 500 8px/1.8 var(--mono);
  letter-spacing: .12em;
  color: #737378;
}
@media (max-width: 900px) {
  .other-clients-panel {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 26px 22px;
  }
}

/* 16 / devices.html: "Две частые заминки" cards before the help strip     */
.device-fix-section {
  padding-top: 0;
}
.device-fix-head {
  display: grid;
  gap: 12px;
  max-width: 460px;
}
.device-fix-head h2 {
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -.06em;
  line-height: 1.08;
  margin: 0;
  font-weight: 800;
}
.device-fix-head p {
  margin: 0;
  font-size: 11px;
  line-height: 1.8;
  color: #85858b;
}
.device-fix {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.device-fix .check-card {
  gap: 10px;
  align-content: start;
}
.device-fix .check-card .panel-label {
  color: #8e8e93;
}
.device-fix .check-card p {
  margin: 0;
  font-size: 11px;
  line-height: 1.85;
  color: #929297;
}
.device-fix .check-card code {
  font: 500 10px var(--mono);
  color: #d6d6d3;
  background: #232327;
  border-radius: 3px;
  padding: 1px 5px;
}
.device-fix-section .device-help-strip {
  margin-top: 14px;
}
@media (max-width: 900px) {
  .device-fix {
    grid-template-columns: 1fr;
  }
}