/* Refinement of the approved desktop/mobile reference. Loaded after home-reference-v2.css. */
.ar-intro { min-width: 0; }
.ar-visual .ar-float { transform: none; animation: none !important; }
/* Named icons override old nth-of-type anchors from home-review-fixes.css. */
body:has(.ar-hero) .ar-visual .ar-float[data-app-icon="sber"] { left: 10%; right: auto; top: 8%; }
body:has(.ar-hero) .ar-visual .ar-float[data-app-icon="max"] { left: 3%; right: auto; top: 41%; }
body:has(.ar-hero) .ar-visual .ar-float[data-app-icon="vk"] { left: 9%; right: auto; top: 74%; }
body:has(.ar-hero) .ar-visual .ar-float[data-app-icon="tbank"] { right: 6%; left: auto; top: 9%; }
body:has(.ar-hero) .ar-visual .ar-float[data-app-icon="psb"] { right: 1%; left: auto; top: 43%; }
body:has(.ar-hero) .ar-visual .ar-float[data-app-icon="alfa"] { right: 7%; left: auto; top: 76%; }
.ar-visual .ar-float[data-app-icon="alfa"] > span:last-child { max-width: 100px; }
@media (max-width: 1109px) {
  .ar-visual .ar-float-desktop { display: none; }
}
/* Tablet uses a real visual grid column, not absolute art over the links. */
@media (min-width: 680px) and (max-width: 900px) {
  body:has(.ar-hero) .ar-hero { min-height: 0; padding-bottom: 48px; }
  .ar-hero .ar-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, .54fr) minmax(0, .46fr);
    grid-template-areas: "eyebrow eyebrow" "intro visual" "actions actions" "pricing pricing" "benefits benefits";
    gap: 12px 16px;
    align-items: start;
    min-height: 0;
  }
  .ar-hero .ar-hero-copy { display: contents; }
  .ar-hero .ar-eyebrow { grid-area: eyebrow; justify-self: start; }
  .ar-hero .ar-intro { grid-area: intro; min-width: 0; }
  .ar-hero .ar-heading { max-width: none; width: 100%; margin: 7px 0 14px; font-size: clamp(32px, 4.6vw, 42px); }
  .ar-hero .ar-lead { max-width: none; width: 100%; margin: 0; font-size: 14px; }
  .ar-hero .ar-visual { grid-area: visual; position: relative; width: 100%; height: 360px; right: auto; top: auto; opacity: 1; }
  .ar-hero .ar-device.has-art { width: min(245px, 82%); height: 345px; top: 0; }
  .ar-hero .ar-float { font-size: 9px; }
  .ar-hero .ar-float-icon { width: 43px; height: 43px; }
  .ar-hero .ar-actions { grid-area: actions; margin: 0; z-index: 4; }
  .ar-hero .ar-pricing { grid-area: pricing; margin: 0; }
  .ar-hero .ar-benefits { grid-area: benefits; margin-top: 6px; }
}
/* On phones, the visual participates in layout: the CTA cannot float over app icons. */
@media (max-width: 679px) {
  body:has(.ar-hero) .ar-hero { padding: 21px 15px 37px; }
  .ar-hero .ar-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, .51fr) minmax(0, .49fr);
    grid-template-areas: "eyebrow eyebrow" "intro visual" "actions actions" "pricing pricing" "benefits benefits";
    gap: 11px 4px;
    min-height: 0;
    align-items: start;
  }
  .ar-hero .ar-hero-copy { display: contents; }
  .ar-hero .ar-eyebrow { grid-area: eyebrow; justify-self: start; margin: 0 0 1px; }
  .ar-hero .ar-intro { grid-area: intro; align-self: start; min-width: 0; }
  .ar-hero .ar-heading {
    max-width: none;
    width: 100%;
    margin: 8px 0 12px;
    font-size: clamp(25px, 7.2vw, 34px);
    line-height: 1.06;
    letter-spacing: -.052em;
  }
  .ar-hero .ar-lead {
    max-width: none;
    width: 100%;
    font-size: clamp(10.5px, 2.8vw, 12.5px);
    line-height: 1.42;
    margin: 0;
    color: #c5d6ea;
  }
  .ar-hero .ar-visual {
    grid-area: visual;
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    height: 283px;
    min-width: 0;
    align-self: start;
    overflow: visible;
    opacity: 1;
    z-index: 1;
  }
  .ar-hero .ar-orbit { inset: 14% -1% 17%; }
  .ar-hero .ar-device.has-art {
    width: min(160px, 91%);
    height: 272px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .ar-hero .ar-float { gap: 3px; font-size: 8px; line-height: 1.08; max-width: 58px; z-index: 3; }
  .ar-hero .ar-float-icon { width: 37px; height: 37px; border-radius: 11px; }
  .ar-hero .ar-float-icon img { border-radius: 10px; }
  body:has(.ar-hero) .ar-visual .ar-float[data-app-icon="sber"] { left: 0; right: auto; top: 20px; }
  body:has(.ar-hero) .ar-visual .ar-float[data-app-icon="max"] { left: -1px; right: auto; top: 172px; }
  body:has(.ar-hero) .ar-visual .ar-float[data-app-icon="vk"] { right: -2px; left: auto; top: 71px; }
  body:has(.ar-hero) .ar-visual .ar-float[data-app-icon="tbank"] { right: -2px; left: auto; top: 190px; }
  .ar-hero .ar-visual .ar-float-desktop { display: none; }
  .ar-hero .ar-actions {
    grid-area: actions;
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin: 0;
    width: 100%;
    clear: none;
  }
  .ar-hero .ar-primary, .ar-hero .ar-secondary { width: 100%; min-height: 47px; }
  .ar-hero .ar-pricing { grid-area: pricing; margin: 0; }
  .ar-hero .ar-benefits { grid-area: benefits; margin: 3px 0 0; }
}
@media (max-width: 360px) {
  .ar-hero .ar-hero-inner { grid-template-columns: minmax(0, .52fr) minmax(0, .48fr); column-gap: 2px; }
  .ar-hero .ar-heading { font-size: 25px; }
  .ar-hero .ar-lead { font-size: 10.5px; }
  .ar-hero .ar-visual { height: 270px; }
  .ar-hero .ar-device.has-art { width: min(146px, 94%); height: 265px; }
  .ar-hero .ar-float-icon { width: 33px; height: 33px; }
  body:has(.ar-hero) .ar-visual .ar-float[data-app-icon="max"] { top: 160px; }
  body:has(.ar-hero) .ar-visual .ar-float[data-app-icon="tbank"] { top: 180px; }
}