/* ==========================================================================
   FIXOVKA · VARIANT B+ — the chosen page, as a layer over variant B
   ==========================================================================
   Loaded AFTER fixovka-b.css. Both files ship: the client chose B+ on
   2026-10-05, and this is the page that goes into the A/B test.

   Variant B is the brief, built as asked. B+ is the same page taken further,
   one section at a time. Keeping B+ as
   a layer rather than a second copy of the stylesheet means:
   - a fix to variant B reaches both pages;
   - this file IS the difference — what choosing B+ costs to build is what
     is in here, plus the markup that differs between the two pages.

   Rules of the layer:
   - every selector starts with `.fxb--plus`, the class B+'s roots carry
     beside `.fxb` (<main>, sticky bar, callback button and panel);
   - same isolation contract as variant B: `fxb-` classes, `--fxb-` tokens,
     nothing outside an `.fxb` root, px not rem;
   - new components get new class names (`fxb-…`), they do not redefine
     variant B's — a B block restyled here is written as an override under
     `.fxb--plus`, so deleting this file returns the page to variant B.

   Sections are added below in page order, each under its own heading, as
   they are worked through.
   ========================================================================== */

/* ------------------------------------------------------------------ 1 · hero
   Five changes, one aim: the first screen should say "fixed price, here is
   the number, one tap to your own" without being read. */

/* The page's warm background gets a source: an orange glow behind the
   picture and a faint cool one opposite, so the hero is a place rather
   than the top of a list. Painted on the section, clipped by it. */
.fxb--plus .fxb-hero {
  overflow: hidden;
  background:
    radial-gradient(620px 460px at 82% 38%, rgba(255, 96, 26, .16), rgba(255, 96, 26, 0) 70%),
    radial-gradient(520px 420px at 4% 96%, rgba(24, 40, 108, .07), rgba(24, 40, 108, 0) 70%);
}

/* The rating: one badge. Three grey phrases in a row read as small print;
   five stars in a pill read as a rating, and it leads to the reviews. */
.fxb--plus .fxb-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 16px; color: var(--fxb-muted); font-size: 14px; }
.fxb--plus .fxb-proof b { color: var(--fxb-navy); font-weight: 500; }
.fxb--plus .fxb-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 12px; border: 1px solid var(--fxb-line); border-radius: 999px;
  background: #fff; color: var(--fxb-muted); line-height: 1.3; text-decoration: none;
  box-shadow: 0 6px 18px -10px rgba(5, 17, 72, .35);
  transition: border-color .15s, transform .15s;
}
.fxb--plus .fxb-badge:hover { border-color: var(--fxb-orange); transform: translateY(-1px); }
.fxb--plus .fxb-badge .fxb-stars svg { width: 15px; height: 14px; }
.fxb--plus .fxb-badge__sep { width: 1px; height: 14px; background: var(--fxb-line); }

/* The headline on three lines, not four: at 60px it filled the column's
   whole height before the prices began. Smaller type and a wider text
   column (the picture needs less than it had) bring the prices up. */
.fxb--plus .fxb-h1 { font-size: clamp(30px, 4.1vw, 50px); line-height: 1.12; }

/* The promise inside the headline. */
.fxb--plus .fxb-hl { color: var(--fxb-orange); }

/* Price cards: the page's main argument, and a control. Bigger number, a
   footer that says what a click does, and a hover that answers. */
.fxb--plus .fxb-prices { gap: 14px; max-width: 620px; margin-top: 24px; }
.fxb--plus .fxb-price {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 18px 20px 14px; border-color: #f3e3da; border-radius: 22px;
  box-shadow: 0 14px 34px -18px rgba(255, 96, 26, .55);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.fxb--plus .fxb-price:hover { border-color: var(--fxb-orange); transform: translateY(-3px); box-shadow: 0 20px 40px -18px rgba(255, 96, 26, .7); }
.fxb--plus .fxb-price__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fxb--plus .fxb-price__icon { width: 32px; height: 32px; }
.fxb--plus .fxb-price__name { font-size: 17px; }
.fxb--plus .fxb-price__value { font-size: 36px; line-height: 1.1; letter-spacing: -.01em; }
.fxb--plus .fxb-price__vat { margin: 2px 0 6px; }
.fxb--plus .fxb-price__go {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--fxb-line);
  color: var(--fxb-navy); font-size: 14.5px; font-weight: 500;
}
.fxb--plus .fxb-price__arrow { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--fxb-peach); color: var(--fxb-orange); transition: background-color .15s, color .15s, transform .15s; }
.fxb--plus .fxb-price:hover .fxb-price__arrow { background: var(--fxb-orange); color: #fff; transform: translateX(3px); }

/* The three reasons: chips with an icon each instead of a ticked line. */
.fxb--plus .fxb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.fxb--plus .fxb-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px; border: 1px solid var(--fxb-line); border-radius: 999px;
  background: rgba(255, 255, 255, .8); color: var(--fxb-navy); font-size: 14.5px; font-weight: 400; line-height: 1.3;
}
.fxb--plus .fxb-chip__icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--fxb-peach); color: var(--fxb-orange); }

/* The picture: on a glow, a little larger, and barely moving — enough to
   read as an object in the room, not as an illustration pasted beside. */
.fxb--plus .fxb-hero__visual { position: relative; justify-self: center; width: 100%; max-width: 340px; }
.fxb--plus .fxb-hero__visual::before {
  content: ""; position: absolute; inset: 8% -6% 2%; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 138, 40, .55), rgba(255, 96, 26, 0));
  filter: blur(24px);
}
.fxb--plus .fxb-hero__art { position: relative; z-index: 1; display: block; max-width: none; width: 100%; filter: drop-shadow(0 30px 34px rgba(226, 64, 12, .32)); animation: fxb-float 7s ease-in-out infinite; }
@keyframes fxb-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(1.2deg); }
}

@media (max-width: 767px) {
  .fxb--plus .fxb-hero__visual { display: none; }
  .fxb--plus .fxb-hero { background: radial-gradient(420px 320px at 100% 8%, rgba(255, 96, 26, .16), rgba(255, 96, 26, 0) 70%); }
}
@media (max-width: 480px) {
  .fxb--plus .fxb-prices { gap: 10px; margin-top: 16px; }
  .fxb--plus .fxb-price { padding: 14px 14px 10px; border-radius: 18px; }
  .fxb--plus .fxb-price__icon { display: block; width: 24px; height: 24px; }
  .fxb--plus .fxb-price__name { font-size: 15px; }
  .fxb--plus .fxb-price__value { font-size: 27px; }
  .fxb--plus .fxb-price__go { margin-top: 10px; padding-top: 8px; font-size: 13px; }
  .fxb--plus .fxb-price__arrow { width: 24px; height: 24px; }
  .fxb--plus .fxb-badge { gap: 8px; padding: 6px 12px 6px 10px; font-size: 13px; }
  .fxb--plus .fxb-chips { margin-top: 16px; }
  .fxb--plus .fxb-chip { font-size: 14px; }
}

/* Tightened so that at 1280×800 the whole hero — the three chips included —
   is on the first screen: the taller price cards had pushed them under it. */
@media (min-width: 768px) {
  .fxb--plus .fxb-hero { padding-top: calc(var(--fxb-nav-h) + 28px); }
  .fxb--plus .fxb-prices { margin-top: 20px; }
  .fxb--plus .fxb-hero__ctas { margin-top: 20px; }
  .fxb--plus .fxb-chips { margin-top: 16px; }
}

/* Phone. The brief's rule for the first screen still holds — promise,
   price, both buttons — and the richer hero has to earn its place inside
   it: one star instead of five, the promise on its own line, the cards'
   small print at variant B's size, nothing wrapping inside a card. */
@media (max-width: 480px) {
  .fxb--plus .fxb-hero { padding-top: calc(var(--fxb-nav-h) + 16px); }
  .fxb--plus .fxb-proof { flex-wrap: nowrap; gap: 10px; margin-bottom: 12px; font-size: 12.5px; white-space: nowrap; }
  .fxb--plus .fxb-badge { gap: 7px; padding: 5px 10px 5px 8px; font-size: 12.5px; }
  .fxb--plus .fxb-badge .fxb-stars svg:nth-child(n+2) { display: none; }
  .fxb--plus .fxb-h1 { font-size: 27px; line-height: 1.15; text-wrap: wrap; }
  .fxb--plus .fxb-hl { display: block; }
  .fxb--plus .fxb-hero__text { margin-top: 10px; font-size: 16px; line-height: 1.5; }
  .fxb--plus .fxb-prices { margin-top: 14px; }
  .fxb--plus .fxb-price { padding: 12px 12px 8px; }
  .fxb--plus .fxb-price__head { margin-bottom: 2px; }
  .fxb--plus .fxb-price__value { font-size: 26px; }
  .fxb--plus .fxb-price__vat { margin: 0 0 3px; font-size: 11.5px; }
  .fxb--plus .fxb-price__more { font-size: 11.5px; letter-spacing: -.01em; white-space: nowrap; }
  .fxb--plus .fxb-price__go { margin-top: 8px; padding-top: 7px; font-size: 12.5px; white-space: nowrap; }
  .fxb--plus .fxb-price__arrow { width: 22px; height: 22px; }
  .fxb--plus .fxb-hero__ctas { margin-top: 14px; }
}

/* The card footer on a phone: nothing clipped at 375. */
@media (max-width: 480px) {
  .fxb--plus .fxb-price__go { font-size: 12px; gap: 4px; }
  .fxb--plus .fxb-price__arrow { width: 20px; height: 20px; }
  .fxb--plus .fxb-price__arrow svg { width: 12px; height: 12px; }
}

/* ------------------------------------------------- 1 · hero, on the navy
   The light hero with a glow did not part from the page under it: same
   paper, same cards. This is the homepage's own surface — its gradient,
   to the degree — so the hero is a different room, the header (navy too)
   becomes its top edge, and the white price cards are the brightest thing
   on the screen. The rounded foot is what the page then slides out from. */
.fxb--plus .fxb-hero {
  border-radius: 0 0 36px 36px;
  background:
    radial-gradient(560px 420px at 84% 46%, rgba(255, 110, 30, .34), rgba(255, 96, 26, 0) 70%),
    linear-gradient(111.14deg, #18286c 7.52%, #051148 91.58%);
  color: rgba(255, 255, 255, .86);
}
.fxb--plus .fxb-hero .fxb-h1 { color: #fff; }
.fxb--plus .fxb-hero .fxb-hl { color: var(--fxb-orange); }
.fxb--plus .fxb-hero .fxb-hero__text { color: rgba(255, 255, 255, .82); }
.fxb--plus .fxb-hero .fxb-proof { color: rgba(255, 255, 255, .72); }
.fxb--plus .fxb-hero .fxb-proof__since b { color: #fff; }
/* The badge and the price cards stay white: they are the two things to
   look at, and on navy they need no shadow of their own colour. */
.fxb--plus .fxb-hero .fxb-badge { border-color: transparent; box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .6); }
.fxb--plus .fxb-hero .fxb-price { border-color: transparent; box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .75); }
.fxb--plus .fxb-hero .fxb-price:hover { border-color: var(--fxb-orange); box-shadow: 0 26px 48px -20px rgba(255, 96, 26, .7); }
.fxb--plus .fxb-hero .fxb-chip { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #fff; }
.fxb--plus .fxb-hero .fxb-chip__icon { background: rgba(255, 96, 26, .22); color: #ff8a52; }
.fxb--plus .fxb-hero :focus-visible { outline-color: #fff; }
.fxb--plus .fxb-hero .fxb-hero__visual::before { background: radial-gradient(closest-side, rgba(255, 150, 60, .6), rgba(255, 96, 26, 0)); }
.fxb--plus .fxb-hero .fxb-hero__art { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }
/* The section after it starts on the page's paper again. */
.fxb--plus .fxb-hero { padding-bottom: 56px; }

@media (max-width: 767px) {
  .fxb--plus .fxb-hero {
    border-radius: 0 0 26px 26px; padding-bottom: 28px;
    background:
      radial-gradient(360px 300px at 100% 4%, rgba(255, 110, 30, .3), rgba(255, 96, 26, 0) 70%),
      linear-gradient(111.14deg, #18286c 7.52%, #051148 91.58%);
  }
}

/* ------------------------------------- 1 · hero, the right half filled in
   The card alone left the right half thin. Around it now: two faint
   orbits that give it a place, and two small floating cards that say the
   product's two points in pictures — locked until the end of 2029, and a
   flat line against a wavy one. Decorative (the text says both), slow,
   and still under reduced motion. The picture column is wider for them. */
.fxb--plus .fxb-hero__visual { max-width: 330px; }

.fxb--plus .fxb-orbit { position: absolute; left: 50%; top: 50%; z-index: 0; border: 1px solid rgba(255, 255, 255, .13); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.fxb--plus .fxb-orbit--1 { width: 128%; aspect-ratio: 1; }
.fxb--plus .fxb-orbit--2 { width: 168%; aspect-ratio: 1; border-color: rgba(255, 255, 255, .07); border-style: dashed; }

/* Between the tablet's width and the desktop header's the column is too
   narrow for the outer orbit: it would run off the page. */
@media (max-width: 1099px) {
  .fxb--plus .fxb-orbit--2 { display: none; }
}

/* Two columns only where the picture has room: from 900px. These rules
   outrank variant B's own one-column switch (two classes against one), and
   written without a media query they kept the 61 % text column on a phone
   too — the picture hidden, its column still reserved, and the price cards
   ending 50px short of the screen's edge. Below 900px the hero is one
   column and everything in it runs the full width. */
.fxb--plus .fxb-hero__grid { grid-template-columns: 1fr; }
.fxb--plus .fxb-hero__visual { display: none; }
@media (min-width: 900px) {
  .fxb--plus .fxb-hero__grid { grid-template-columns: 1.3fr .7fr; }
  .fxb--plus .fxb-hero__visual { display: block; }
}
@media (max-width: 899px) {
  .fxb--plus .fxb-prices { max-width: none; }
}
/* Three chips on one line beside the picture. */
@media (min-width: 900px) {
  .fxb--plus .fxb-chips { gap: 6px; }
  .fxb--plus .fxb-chip { padding: 5px 12px 5px 5px; font-size: 13.5px; }
  .fxb--plus .fxb-chip__icon { width: 26px; height: 26px; }
}

/* ------------------------------------------------------------ page width
   The content column of the inmake website: 1296px, with a gutter that
   grows from 16 to 32px. Variant B's 1080px read as a narrow strip on a
   1440+ screen; the header below is laid out on the same column, so the
   logo sits above the headline and the CTA above the page's right edge. */
.fxb--plus { --fxb-page: 1296px; --fxb-gutter: clamp(16px, 4vw, 32px); }
.fxb--plus .fxb-container { max-width: calc(var(--fxb-page) + 2 * var(--fxb-gutter)); padding-inline: var(--fxb-gutter); }
/* Running text keeps a reading measure inside the wider column. */
.fxb--plus .fxb-faq, .fxb--plus .fxb-limit { max-width: 980px; }

/* ----------------------------------------------------------------- header
   The site's new header (it replaces the layout's on every page; built
   and shown here first). One bar on the page's column: logo · navigation in a glass
   pill · phone, language, account, CTA. Clear over the navy hero; once
   the page has moved it takes a navy, blurred ground of its own so it
   reads over the light sections too. */
.fxb--plus.fxb-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1010;
  color: #fff;
  transition: background-color .25s, box-shadow .25s;
  background: linear-gradient(111.14deg, #18286c 7.52%, #051148 91.58%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* `fxb-header--solid`: for pages that do not start with a dark hero —
   the header goes site-wide, and white type over a light page is
   unreadable until the first scroll. */
.fxb--plus.fxb-header.is-scrolled, .fxb--plus.fxb-header.is-open, .fxb--plus.fxb-header.fxb-header--solid {
  background: rgba(13, 24, 84, .9);
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .7);
}
.fxb--plus .fxb-header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  max-width: calc(var(--fxb-page) + 2 * var(--fxb-gutter)); margin-inline: auto; padding-inline: var(--fxb-gutter);
  height: 80px;
}
.fxb--plus .fxb-header__logo { display: block; flex: none; }
.fxb--plus .fxb-header__logo img { display: block; width: auto; height: 34px; }

.fxb--plus .fxb-header__nav {
  display: flex; align-items: center; gap: 2px;
  padding: 5px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}
.fxb--plus .fxb-header__nav a {
  padding: 8px 15px; border-radius: 999px;
  color: rgba(255, 255, 255, .88); font-size: 15px; font-weight: 400; line-height: 1.3; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.fxb--plus .fxb-header__nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.fxb--plus .fxb-header__nav a[aria-current] { background: #fff; color: var(--fxb-navy); font-weight: 500; }

.fxb--plus .fxb-header__side { display: flex; align-items: center; gap: 10px; flex: none; }
.fxb--plus .fxb-header__phone { display: flex; align-items: center; gap: 8px; margin-right: 6px; color: #fff; font-size: 16px; font-weight: 500; line-height: 1.15; text-decoration: none; white-space: nowrap; }
.fxb--plus .fxb-header__phone svg { color: var(--fxb-orange); }
.fxb--plus .fxb-header__phone small { display: block; color: rgba(255, 255, 255, .6); font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.fxb--plus .fxb-header__lang,
.fxb--plus .fxb-header__account {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  color: #fff; font-size: 14px; font-weight: 400; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s;
}
.fxb--plus .fxb-header__lang { width: 42px; padding: 0; font-size: 13px; letter-spacing: .04em; }
.fxb--plus .fxb-header__lang:hover, .fxb--plus .fxb-header__account:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.fxb--plus .fxb-header__cta { height: 42px; padding: 0 20px; font-size: 15px; }
.fxb--plus.fxb-header :focus-visible { outline-color: #fff; }

.fxb--plus .fxb-header__burger { display: none; position: relative; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: transparent; cursor: pointer; }
.fxb--plus .fxb-header__burger span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: #fff; transition: transform .2s, opacity .2s, top .2s; }
.fxb--plus .fxb-header__burger span:nth-child(1) { top: 14px; }
.fxb--plus .fxb-header__burger span:nth-child(2) { top: 19px; }
.fxb--plus .fxb-header__burger span:nth-child(3) { top: 24px; }
.fxb--plus .fxb-header__burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.fxb--plus .fxb-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.fxb--plus .fxb-header__burger[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

.fxb--plus .fxb-header__menu { max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow: auto; padding: 8px var(--fxb-gutter) 24px; border-top: 1px solid rgba(255, 255, 255, .12); }
.fxb--plus .fxb-header__menu nav { display: grid; }
.fxb--plus .fxb-header__menu nav a { padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #fff; font-size: 19px; font-weight: 400; text-decoration: none; }
.fxb--plus .fxb-header__menu-foot { display: grid; gap: 10px; margin-top: 20px; }
.fxb--plus .fxb-header__menu-account { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.fxb--plus .fxb-header__menu-phone { margin-top: 6px; color: rgba(255, 255, 255, .7); font-size: 15px; text-align: center; }
.fxb--plus .fxb-header__menu-phone a { color: #fff; text-decoration: none; }
.fxb--plus .fxb-header__menu-phone b { font-weight: 500; }

/* What gives way first as the bar narrows: the phone line, then the
   account's label, then the whole navigation moves into the burger. */
@media (max-width: 1320px) {
  .fxb--plus .fxb-header__phone { display: none; }
}
@media (max-width: 1160px) {
  .fxb--plus .fxb-header__account span { display: none; }
  .fxb--plus .fxb-header__account { width: 42px; padding: 0; }
  .fxb--plus .fxb-header__nav a { padding-inline: 11px; font-size: 14.5px; }
}
@media (max-width: 1000px) {
  .fxb--plus .fxb-header__nav, .fxb--plus .fxb-header__lang { display: none; }
  .fxb--plus .fxb-header__burger { display: block; }
}
@media (min-width: 1001px) {
  .fxb--plus .fxb-header__menu { display: none !important; }
}
@media (max-width: 767px) {
  .fxb--plus .fxb-header__bar { height: 64px; gap: 12px; }
  .fxb--plus .fxb-header__logo img { height: 28px; }
  .fxb--plus .fxb-header__cta { display: none; }
}

/* The headline on the wider column: the promise always on a line of its
   own, and the type a step larger again now that there is room, so the
   three-line shape holds from 900px to the widest screen. */
.fxb--plus .fxb-hl { display: block; }
@media (min-width: 900px) {
  .fxb--plus .fxb-h1 { font-size: clamp(40px, 4.1vw, 58px); }
}

/* The open menu is a full screen of its own: solid, above the sticky bar
   and the callback button, so nothing of the page shows around it. */
.fxb--plus.fxb-header.is-open { z-index: 1050; background: #0d1854; }
.fxb--plus.fxb-header.is-open .fxb-header__menu { min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); }
/* The limit note runs the width of the calculator above it. */
.fxb--plus .fxb-limit { max-width: none; }


/* The picture sat hard against the right edge of the column. Moved in toward the text, so the hero's weight is
   in the middle of the page rather than at its margin. */
@media (min-width: 900px) {
  .fxb--plus .fxb-hero__visual { left: -56px; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .fxb--plus .fxb-hero__visual { left: -16px; }
}

/* The logo on a phone: 28px was small beside two 42px round buttons. */
@media (max-width: 767px) {
  .fxb--plus .fxb-header__logo img { height: 36px; }
}

/* Once the page has moved the header is solid — the homepage gradient, no
   blur, nothing of the page showing through. A translucent bar over white
   cards and orange buttons kept changing colour as they passed under it. */
.fxb--plus.fxb-header.is-scrolled, .fxb--plus.fxb-header.is-open, .fxb--plus.fxb-header.fxb-header--solid {
  background: linear-gradient(111.14deg, #18286c 7.52%, #051148 91.58%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ----------------------------------------------------------------- footer
   The site's own footer, untouched except for its width: it sits on a
   1200px column of its own, which on this page ended 48px inside the
   content and the header on both sides. The B+ page puts `fxb--plus` on
   the <footer> (not `fxb` — its typography stays the site's) and these two
   rules move its containers onto the page's column. `!important` because
   the site's own `!max-w-1200` and `xl:px-0` are important too. */
.fxb--plus.footer .container {
  max-width: calc(var(--fxb-page) + 2 * var(--fxb-gutter)) !important;
  padding-inline: var(--fxb-gutter) !important;
}

/* ------------------------------------------------------------ 2 · calculator
   The component is unchanged here too. It only has to fill the page's
   column: its own wrapper stops at 1200px (the site's `max-w-1200`), which
   was wider than variant B's 1080px column and so never showed — on the
   1296px column it left the calculator 48px short on each side of the
   heading above it and the limit note below. */
.fxb--plus .fxb-calc .plyn__calculator { width: 100%; max-width: none !important; margin-inline: 0; }

/* The tariff card on the wide column. The component caps its text at 290px
   and gives the picture 100px at the far right — on a 640px card that is a
   narrow text, 200px of nothing, and a stamp in the corner. Where the card
   is wide enough (its own width decides, not the window: the same card is
   340px on a phone and stacked full-width on a tablet) the text gets a
   proper measure and the picture takes the middle of what is left, at a
   size that fills the card's height. */
.fxb--plus .fxb-calc .tariff-card { container: fxb-tariff / inline-size; }
/* The picture is turned and casts a shadow at every size. That used to be
   set separately in the narrow and the wide layout, so the card between
   them (a 440–570px card: windows of 500–630px, and the two-column desktop
   up to 1230px) showed it flat and upright. One rule; the layouts below
   only set its size. */
.fxb--plus .fxb-calc .tariff-content-cta .icon { transform: rotate(5deg); filter: drop-shadow(0 14px 18px rgba(226, 64, 12, .28)); }
@container fxb-tariff (min-width: 520px) {
  .fxb--plus .fxb-calc .tariff-content { flex: 0 1 360px; max-width: 360px; }
  .fxb--plus .fxb-calc .tariff-content-cta { flex: 1 1 0; justify-content: center; min-width: 0; }
  .fxb--plus .fxb-calc .tariff-content-cta .icon { width: auto; max-width: 100%; height: 208px; filter: drop-shadow(0 16px 20px rgba(226, 64, 12, .28)); }
}

/* ---------------------------------------------------------------- 3 · reviews
   Variant B sets the score at the left end of a row and the arrows at the
   right; under a centred heading on a 1296px column that row is two small
   things 900px apart with nothing between them. Here the score joins the
   heading — centred under the sentence it proves, as one white lockup, so
   "4,8" is read with the title and not found beside the cards — and the
   controls go under the cards they move, the link to Google between the
   two arrows. */
.fxb--plus .fxb-head .fxb-rv__score {
  gap: 16px; margin-top: 12px; padding: 11px 28px 13px 24px;
  border: 1px solid var(--fxb-line); border-radius: 999px; background: #fff;
  box-shadow: 0 14px 34px -20px rgba(255, 96, 26, .55);
  text-align: left;
}
.fxb--plus .fxb-head .fxb-rv__num { font-size: 52px; letter-spacing: -.01em; }
.fxb--plus .fxb-head .fxb-rv__meta { gap: 5px; padding-top: 6px; }
.fxb--plus .fxb-head .fxb-stars svg { width: 22px; height: 21px; }
.fxb--plus .fxb-head .fxb-rv__count { font-size: 15px; }

.fxb--plus .fxb-rv { gap: 20px; }
.fxb--plus .fxb-rv__nav { justify-content: center; gap: 18px; }
.fxb--plus .fxb-rv__all { margin: 0; font-size: 15px; font-weight: 400; }

@media (max-width: 480px) {
  .fxb--plus .fxb-head .fxb-rv__score { gap: 12px; padding: 10px 22px 10px 18px; }
  .fxb--plus .fxb-head .fxb-rv__num { font-size: 44px; }
  .fxb--plus .fxb-head .fxb-stars svg { width: 19px; height: 18px; }
  .fxb--plus .fxb-head .fxb-rv__count { font-size: 14px; }
}

/* ----------------------------------------------- 6 · switching, 7 · FAQ
   Both headings are centred, like the sections around them (reviews, the
   price promise, the benefit cards) — left-aligned they were the only two
   that started at the page's edge, and the FAQ under its heading was a
   980px list pushed to the left of a 1296px column. The list is now the
   width of the price-promise graph and centred, so the page keeps one
   narrow measure for things that are read and one wide one for things
   that are compared. */
.fxb--plus .fxb-faq { width: 100%; max-width: 1000px; margin-inline: auto; }

/* ------------------------------------------------------ 10 · referral banner
   Built, not pasted (see the markup). The page's closing block, on the
   same navy as its opening one: the amount in orange, one sentence, one
   button, and the site's cut-out figure standing on the banner's lower
   edge with his head above its upper one — which is why the banner keeps
   clear space above itself. */
.fxb--plus .fxb-refer {
  position: relative; display: grid; align-items: center;
  margin-top: 72px; min-height: 280px; padding: 44px 56px;
  border-radius: 32px; color: #fff;
  background:
    radial-gradient(420px 320px at 76% 62%, rgba(255, 110, 30, .42), rgba(255, 96, 26, 0) 70%),
    linear-gradient(111.14deg, #18286c 7.52%, #051148 91.58%);
}
.fxb--plus .fxb-refer__body { position: relative; z-index: 1; display: grid; gap: 12px; justify-items: start; max-width: 56%; }
.fxb--plus .fxb-refer .fxb-eyebrow { color: #ff8a52; }
.fxb--plus .fxb-refer__title { color: #fff; font-size: clamp(34px, 4.4vw, 60px); font-weight: 600; line-height: 1.05; text-wrap: balance; }
.fxb--plus .fxb-refer__title span { color: var(--fxb-orange); white-space: nowrap; }
.fxb--plus .fxb-refer__text { color: rgba(255, 255, 255, .86); font-size: clamp(17px, 1.7vw, 22px); font-weight: 400; line-height: 1.4; }
.fxb--plus .fxb-refer__text b { color: #fff; font-weight: 600; white-space: nowrap; }
.fxb--plus .fxb-refer__cta { margin-top: 10px; padding: 16px 32px; font-size: 18px; }
.fxb--plus .fxb-refer__person {
  position: absolute; right: 9%; bottom: 0; z-index: 0;
  width: auto; max-width: none; height: calc(100% + 64px);
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45));
  pointer-events: none; user-select: none;
}
.fxb--plus .fxb-refer :focus-visible { outline-color: #fff; }

@media (max-width: 899px) {
  .fxb--plus .fxb-refer { padding: 36px 32px; }
  .fxb--plus .fxb-refer__person { right: 2%; }
}
@media (max-width: 600px) {
  .fxb--plus .fxb-refer { margin-top: 56px; min-height: 0; padding: 28px 22px 0; border-radius: 26px; overflow: hidden;
    background:
      radial-gradient(300px 240px at 70% 86%, rgba(255, 110, 30, .42), rgba(255, 96, 26, 0) 70%),
      linear-gradient(111.14deg, #18286c 7.52%, #051148 91.58%); }
  .fxb--plus .fxb-refer__body { max-width: none; }
  .fxb--plus .fxb-refer__cta { width: 100%; }
  /* Under the text on a phone: the figure closes the banner, cut at the waist. */
  .fxb--plus .fxb-refer__person { position: static; justify-self: center; height: 230px; margin-top: 18px; margin-bottom: -40px; }
}

/* ------------------------------------------------------- 4 · the graph, drawn
   The site's graph.png redrawn as SVG and text (see the markup, which also
   says how to go back to the picture). In the brand's two colours rather
   than the picture's green and red: orange is Fixovka everywhere on this
   page — the hero's mini graph says the same thing with the same line —
   and the market price is the navy it is compared against, pale through
   the summer where it runs under the fixed price and full through the
   winter where it runs over. */
.fxb--plus .fxb-chart {
  display: grid; gap: 18px; width: 100%; margin: 6px 0;
  padding: clamp(18px, 3vw, 36px) clamp(16px, 3vw, 40px) clamp(18px, 2.6vw, 30px);
  border: 1px solid var(--fxb-line); border-radius: 28px; background: #fff;
  box-shadow: 0 24px 60px -34px rgba(5, 17, 72, .35);
}
.fxb--plus .fxb-chart__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.fxb--plus .fxb-chart__key {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px 8px 14px; border: 1.5px solid currentColor; border-radius: 999px;
  font-size: 16px; font-weight: 500; line-height: 1.3; white-space: nowrap;
}
.fxb--plus .fxb-chart__key::before { content: ""; flex: none; width: 22px; height: 0; border-top: 3px solid currentColor; border-radius: 2px; }
.fxb--plus .fxb-chart__key--fix { color: var(--fxb-orange); }
.fxb--plus .fxb-chart__key--market { color: var(--fxb-navy); }
.fxb--plus .fxb-chart__key--market::before { border-top-style: dashed; border-top-width: 2.5px; }

.fxb--plus .fxb-chart__plot { position: relative; }
.fxb--plus .fxb-chart__svg { display: block; width: 100%; height: clamp(190px, 30vw, 340px); overflow: visible; }
.fxb--plus .fxb-chart__svg path { fill: none; vector-effect: non-scaling-stroke; }
.fxb--plus .fxb-chart__svg .fxb-chart__area { fill: url(#fxb-chart-fill); }
.fxb--plus .fxb-chart__grid path { stroke: #e9ecf7; stroke-width: 1; }
.fxb--plus .fxb-chart__market { stroke-width: 2.5; stroke-dasharray: 7 6; stroke-linecap: round; }
.fxb--plus .fxb-chart__fix { stroke: var(--fxb-orange); stroke-width: 4; stroke-linecap: round; }
/* Zero-length segments with round caps: dots that stay round and the same
   size however the plot is stretched. */
.fxb--plus .fxb-chart__dots { stroke: var(--fxb-orange); stroke-width: 15; stroke-linecap: round; }
.fxb--plus .fxb-chart__lock {
  position: absolute; left: 46%; top: 47.2%; z-index: 1;
  width: clamp(64px, 11vw, 124px); height: auto; max-width: none;
  transform: translate(-50%, -34%) rotate(-8deg);
  filter: drop-shadow(0 14px 18px rgba(226, 64, 12, .35));
  pointer-events: none; user-select: none;
}

.fxb--plus .fxb-chart__seasons { display: grid; grid-template-columns: 44fr 56fr; }
.fxb--plus .fxb-chart__season { display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: var(--fxb-navy); font-size: clamp(17px, 2.2vw, 24px); font-weight: 500; line-height: 1.2; }
.fxb--plus .fxb-chart__season svg { flex: none; }

/* Drawing in: the lines are wiped on from the left, then the lock lands.
   Only once the script has armed it. */
.fxb--plus .fxb-chart.is-armed .fxb-chart__market,
.fxb--plus .fxb-chart.is-armed .fxb-chart__fix,
.fxb--plus .fxb-chart.is-armed .fxb-chart__dots,
.fxb--plus .fxb-chart.is-armed .fxb-chart__area { clip-path: inset(0 100% 0 0); }
.fxb--plus .fxb-chart.is-armed .fxb-chart__lock { opacity: 0; transform: translate(-50%, -60%) rotate(-22deg) scale(.7); }
.fxb--plus .fxb-chart.is-in .fxb-chart__market,
.fxb--plus .fxb-chart.is-in .fxb-chart__fix,
.fxb--plus .fxb-chart.is-in .fxb-chart__dots,
.fxb--plus .fxb-chart.is-in .fxb-chart__area { clip-path: inset(-20px -20px -20px -20px); transition: clip-path 1.5s cubic-bezier(.4, 0, .2, 1); }
.fxb--plus .fxb-chart.is-in .fxb-chart__market { transition-delay: .35s; }
/* The transitions live on the arriving state only. On the armed state they
   also animated the ARMING — the lock took 1.25s of delay to fade out
   after load, so a graph already on screen (a reload at #jistota) was
   revealed before it had ever been hidden, and nothing moved. */
.fxb--plus .fxb-chart.is-in .fxb-chart__lock { transition: opacity .6s ease 1.2s, transform .7s cubic-bezier(.22, 1, .36, 1) 1.2s; }
.fxb--plus .fxb-chart.is-in .fxb-chart__lock { opacity: 1; transform: translate(-50%, -34%) rotate(-8deg); }

@media (max-width: 600px) {
  .fxb--plus .fxb-chart { gap: 14px; border-radius: 22px; }
  .fxb--plus .fxb-chart__key { padding: 6px 13px 6px 10px; font-size: 13.5px; gap: 7px; }
  .fxb--plus .fxb-chart__key::before { width: 16px; }
  .fxb--plus .fxb-chart__fix { stroke-width: 3; }
  .fxb--plus .fxb-chart__dots { stroke-width: 10; }
  .fxb--plus .fxb-chart__market { stroke-width: 2; stroke-dasharray: 5 5; }
  .fxb--plus .fxb-chart__season svg { width: 20px; height: 20px; }
}
/* Variant B styles every image in this section as the full-width graph. */
.fxb--plus .fxb-promise .fxb-chart__lock { display: block; margin: 0; border-radius: 0; }

/* The drawn lock: an SVG keeps its own proportions, so only the width is set. */
.fxb--plus .fxb-chart svg.fxb-chart__lock { width: clamp(58px, 9.5vw, 108px); height: auto; overflow: visible; filter: drop-shadow(0 14px 18px rgba(226, 64, 12, .38)); }

/* ------------------------------------- 4 · the graph in the picture's colours
   Back to the site's own code, sampled from graph.png: the fixed price is
   green (#00c437) with a green wash under it, the monthly prices are red
   (#e90f2c), pale through the summer. The earlier orange-and-navy version
   matched the page; this one matches what the customer already knows —
   green holds, red moves — and the orange is left to the lock. */
.fxb--plus .fxb-chart { --fxb-fix: #00c437; --fxb-fix-ink: #0a9a30; --fxb-market: #e90f2c; }
.fxb--plus .fxb-chart__key--fix { color: var(--fxb-fix-ink); }
.fxb--plus .fxb-chart__key--market { color: var(--fxb-market); }
.fxb--plus .fxb-chart__fix { stroke: var(--fxb-fix); }
.fxb--plus .fxb-chart__dots { stroke: var(--fxb-fix); filter: drop-shadow(0 0 5px rgba(0, 196, 55, .55)); }

/* The lock, hung on the line. `left` / `top` are the seventh dot (x 542.7
   of 1000, y 170 of 360 in the plot's own units); the translate is the
   centre of the shackle's opening inside the picture (63.66 % across,
   27.47 % down — measured from the file's alpha). Whatever size the lock
   or the plot takes, that dot stays in the middle of the opening. The
   picture is already tilted, so no rotation here. */
.fxb--plus .fxb-chart .fxb-chart__lock {
  left: 54.27%; top: 47.22%;
  width: clamp(54px, 12.5%, 122px); height: auto;
  transform: translate(-63.66%, -27.47%);
  filter: drop-shadow(0 4px 6px rgba(40, 18, 0, .14)) drop-shadow(0 18px 26px rgba(40, 18, 0, .2));
}
/* A settle, not a drop: the lock fades in while it comes down 5 % of its
   own height, with no overshoot. The first version fell from a third of
   its height above and bounced — too much for the last beat of a graph. */
.fxb--plus .fxb-chart.is-armed .fxb-chart__lock { opacity: 0; transform: translate(-63.66%, -32.5%); }
.fxb--plus .fxb-chart.is-in .fxb-chart__lock { opacity: 1; transform: translate(-63.66%, -27.47%); }

/* ------------------------------------------------------ 5 · benefit cards
   "Odkrýváme karty", without pictures. Variant B's cards are 420px tall to
   make room for an illustration in the corner, and most of each is empty
   navy. These are as tall as their words: an icon in an orange tile, the
   benefit's name, its sentence. Same navy as the hero, with a glow in one
   corner. They are dealt in, one after another. */
.fxb--plus .fxb-deck { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fxb--plus .fxb-deck__card {
  position: relative; display: grid; gap: 10px; align-content: start; overflow: hidden;
  padding: 30px 30px 32px; border-radius: 28px; color: rgba(255, 255, 255, .84);
  background:
    radial-gradient(260px 200px at 100% 0%, rgba(255, 110, 30, .30), rgba(255, 96, 26, 0) 70%),
    linear-gradient(140deg, #1d2c7e 0%, #131f66 45%, #08124b 100%);
  box-shadow: 0 24px 50px -30px rgba(5, 17, 72, .7);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s;
}
.fxb--plus .fxb-deck__card:hover { transform: translateY(-4px); box-shadow: 0 30px 56px -28px rgba(5, 17, 72, .8); }
.fxb--plus .fxb-deck__icon {
  display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 14px; border-radius: 18px;
  background: linear-gradient(145deg, #ff8a3c, #ff601a 60%, #e2500c); color: #fff;
  box-shadow: 0 14px 24px -12px rgba(255, 96, 26, .9), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.fxb--plus .fxb-deck__kicker { color: #ff8a52; font-size: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.fxb--plus .fxb-deck__title { color: #fff; font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; line-height: 1.15; text-wrap: balance; }
.fxb--plus .fxb-deck__card p { max-width: 36ch; font-size: 17px; font-weight: 400; line-height: 1.55; }

/* Dealt in: only once the script has armed the deck. */
.fxb--plus .fxb-deck.is-armed .fxb-deck__card { opacity: 0; transform: translateY(26px) rotate(-1.5deg); }
.fxb--plus .fxb-deck.is-in .fxb-deck__card { opacity: 1; transform: none; transition: opacity .5s ease, transform .7s cubic-bezier(.22, 1, .36, 1), box-shadow .25s; }
.fxb--plus .fxb-deck.is-in .fxb-deck__card:nth-child(2) { transition-delay: .12s; }
.fxb--plus .fxb-deck.is-in .fxb-deck__card:nth-child(3) { transition-delay: .24s; }
.fxb--plus .fxb-deck.is-in .fxb-deck__card:hover { transform: translateY(-4px); transition-delay: 0s; }

/* Stacked (tablet and phone): the same card, one under another, everything
   on one left edge — icon, kicker, title, sentence. The first phone layout
   put the icon beside the kicker and title and let the sentence run back
   under the icon: two left edges in one small card, and a title that
   wrapped in one card and not in the next made the three look unrelated. */
@media (max-width: 900px) {
  .fxb--plus .fxb-deck { grid-template-columns: 1fr; gap: 14px; }
  .fxb--plus .fxb-deck__card { gap: 8px; padding: 24px 24px 26px; border-radius: 24px; }
  .fxb--plus .fxb-deck__icon { width: 48px; height: 48px; margin-bottom: 10px; border-radius: 15px; }
  .fxb--plus .fxb-deck__icon svg { width: 24px; height: 24px; }
  .fxb--plus .fxb-deck__kicker { font-size: 13px; }
  .fxb--plus .fxb-deck__card p { max-width: none; }
}

/* The narrow tariff card's layout (picture beside the text, buttons side
   by side underneath) is variant B's now — see fixovka-b.css. B+ only
   sets its own picture size and a lighter shadow there. */
@container fxb-tariffs (max-width: 440px) {
  .fxb--plus .fxb-calc .tariff-content-cta .icon { width: 92px; height: auto; filter: drop-shadow(0 12px 16px rgba(226, 64, 12, .25)); }
}

/* --------------------------------------------------- 6 · switching, as a path
   After the hero, the graph and the navy cards, three white tiles with a
   small number in a circle were the page's flattest moment — and the two
   steps that name an action could not be clicked. Here the steps are stops
   on a line: a large numbered disc each, joined by a dashed rule, the text
   under them with no box around it. Steps 1 and 2 end in a link that does
   what the step says. */
.fxb--plus .fxb-path { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; margin-top: 10px; }
.fxb--plus .fxb-path__step { position: relative; display: grid; gap: 18px; align-content: start; }
.fxb--plus .fxb-path__no {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(140deg, #1d2c7e 0%, #08124b 100%); color: #fff;
  font-size: 28px; font-weight: 600; line-height: 1;
  box-shadow: 0 0 0 8px var(--fxb-bg), 0 16px 28px -14px rgba(5, 17, 72, .7);
}
/* The rule to the next stop: from this disc to the next one, across the gap. */
.fxb--plus .fxb-path__step:not(:last-child)::after {
  content: ""; position: absolute; top: 31px; left: 64px; right: -40px; z-index: 0;
  border-top: 2px dashed #ffb894;
}
.fxb--plus .fxb-path__body { display: grid; gap: 8px; align-content: start; max-width: 36ch; }
.fxb--plus .fxb-path__title { color: var(--fxb-navy); font-size: clamp(21px, 1.9vw, 26px); font-weight: 600; line-height: 1.2; text-wrap: balance; }
.fxb--plus .fxb-path__body p { font-size: 17px; font-weight: 400; }
.fxb--plus .fxb-path__link {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 6px;
  color: var(--fxb-navy); font-size: 16px; font-weight: 500; text-decoration: underline; text-decoration-color: #ffb894; text-underline-offset: 4px;
}
.fxb--plus .fxb-path__link svg { color: var(--fxb-orange); transition: transform .15s; }
.fxb--plus .fxb-path__link:hover { text-decoration-color: var(--fxb-orange); }
.fxb--plus .fxb-path__link:hover svg { transform: translateX(4px); }

/* Drawn in: the stops appear in order, the rule grows from each to the next. */
.fxb--plus .fxb-path.is-armed .fxb-path__step { opacity: 0; transform: translateY(18px); }
.fxb--plus .fxb-path.is-armed .fxb-path__step::after { clip-path: inset(0 100% 0 0); }
.fxb--plus .fxb-path.is-in .fxb-path__step { opacity: 1; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
.fxb--plus .fxb-path.is-in .fxb-path__step::after { clip-path: inset(-4px 0 -4px 0); transition: clip-path .6s ease; }
.fxb--plus .fxb-path.is-in .fxb-path__step:nth-child(2) { transition-delay: .25s; }
.fxb--plus .fxb-path.is-in .fxb-path__step:nth-child(3) { transition-delay: .5s; }
.fxb--plus .fxb-path.is-in .fxb-path__step:nth-child(1)::after { transition-delay: .2s; }
.fxb--plus .fxb-path.is-in .fxb-path__step:nth-child(2)::after { transition-delay: .45s; }

/* Stacked: the path runs down the left, the text beside it. */
@media (max-width: 767px) {
  .fxb--plus .fxb-path { grid-template-columns: 1fr; gap: 26px 0; }
  .fxb--plus .fxb-path__step { grid-template-columns: 52px 1fr; gap: 0 18px; }
  .fxb--plus .fxb-path__no { width: 52px; height: 52px; font-size: 23px; box-shadow: 0 0 0 6px var(--fxb-bg), 0 12px 22px -12px rgba(5, 17, 72, .7); }
  .fxb--plus .fxb-path__step:not(:last-child)::after { top: 52px; bottom: -26px; left: 25px; right: auto; border-top: 0; border-left: 2px dashed #ffb894; }
  .fxb--plus .fxb-path__body { max-width: none; padding-top: 4px; }
  .fxb--plus .fxb-path.is-armed .fxb-path__step::after { clip-path: inset(0 0 100% 0); }
  .fxb--plus .fxb-path.is-in .fxb-path__step::after { clip-path: inset(0 -4px 0 -4px); }
}

/* --------------------------------------------------------------------- 7 · FAQ
   The browser's own triangle and six identical white boxes. Each question
   is now a row with a round plus that turns into a minus, a hover that
   says it can be opened, and an open state that stands out from the closed
   ones — orange hairline, a soft shadow. The first one starts open, so the
   list shows what is behind the questions. */
.fxb--plus .fxb-faq { gap: 12px; }
.fxb--plus .fxb-faq__item { padding: 0; border-radius: 20px; transition: border-color .15s, box-shadow .2s; }
.fxb--plus .fxb-faq__item:hover { border-color: #ffc9ae; }
.fxb--plus .fxb-faq__item[open] { border-color: var(--fxb-orange); box-shadow: 0 18px 40px -28px rgba(255, 96, 26, .7); }
.fxb--plus .fxb-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 22px 20px 26px; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.3;
  list-style: none; border-radius: 20px;
}
.fxb--plus .fxb-faq__q::-webkit-details-marker { display: none; }
.fxb--plus .fxb-faq__q::after {
  content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background:
    linear-gradient(var(--fxb-orange), var(--fxb-orange)) center / 14px 2px no-repeat,
    linear-gradient(var(--fxb-orange), var(--fxb-orange)) center / 2px 14px no-repeat,
    var(--fxb-peach);
  transition: transform .25s, background-color .15s;
}
.fxb--plus .fxb-faq__item[open] .fxb-faq__q::after {
  background:
    linear-gradient(#fff, #fff) center / 14px 2px no-repeat,
    var(--fxb-orange);
  transform: rotate(180deg);
}
.fxb--plus .fxb-faq__item p { margin: 0; padding: 0 70px 24px 26px; font-size: 17px; font-weight: 400; line-height: 1.6; }
@media (max-width: 600px) {
  .fxb--plus .fxb-faq__q { padding: 16px 16px 16px 20px; gap: 12px; }
  .fxb--plus .fxb-faq__q::after { width: 32px; height: 32px; }
  .fxb--plus .fxb-faq__item p { padding: 0 20px 20px; }
}

/* While a question is closing it already looks closed — the icon turns back
   and the orange leaves at the start of the movement, not at its end. The
   answer fades with the height. */
.fxb--plus .fxb-faq__item.is-closing { border-color: var(--fxb-line); box-shadow: none; }
.fxb--plus .fxb-faq__item.is-closing .fxb-faq__q::after {
  background:
    linear-gradient(var(--fxb-orange), var(--fxb-orange)) center / 14px 2px no-repeat,
    linear-gradient(var(--fxb-orange), var(--fxb-orange)) center / 2px 14px no-repeat,
    var(--fxb-peach);
  transform: none;
}
.fxb--plus .fxb-faq__item p { transition: opacity .25s ease; }
.fxb--plus .fxb-faq__item.is-closing p { opacity: 0; }
@starting-style {
  .fxb--plus .fxb-faq__item[open] p { opacity: 0; }
}

/* The path's end. The rule used to stop at the third disc, as if a fourth
   step were missing. It now runs on from "3" to a green tick at the row's
   right edge: three steps, and then it is done. The green is the graph's
   fixed-price green — the same "settled" on the same page. */
.fxb--plus .fxb-path__step:last-child::after {
  content: ""; position: absolute; top: 31px; left: 64px; right: 52px; z-index: 0;
  border-top: 2px dashed #ffb894;
}
.fxb--plus .fxb-path__end {
  position: absolute; top: 8px; right: 0; z-index: 1;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: #00c437; color: #fff;
  box-shadow: 0 0 0 8px var(--fxb-bg), 0 14px 24px -12px rgba(0, 150, 45, .8);
}
.fxb--plus .fxb-path.is-armed .fxb-path__end { opacity: 0; transform: scale(.6); }
.fxb--plus .fxb-path.is-in .fxb-path__end { opacity: 1; transform: none; transition: opacity .35s ease 1.1s, transform .5s cubic-bezier(.22, 1, .36, 1) 1.1s; }
.fxb--plus .fxb-path.is-in .fxb-path__step:nth-child(3)::after { transition-delay: .7s; }

@media (max-width: 767px) {
  /* Down the left: the rule continues under "3" to the tick below it. */
  .fxb--plus .fxb-path__step:last-child { padding-bottom: 74px; }
  .fxb--plus .fxb-path__step:last-child::after { top: 52px; bottom: 40px; left: 25px; right: auto; border-top: 0; border-left: 2px dashed #ffb894; }
  .fxb--plus .fxb-path__end { top: auto; bottom: 0; left: 6px; right: auto; width: 40px; height: 40px; box-shadow: 0 0 0 6px var(--fxb-bg), 0 12px 20px -10px rgba(0, 150, 45, .8); }
  .fxb--plus .fxb-path__end svg { width: 19px; height: 19px; }
}

/* "Máte hotovo" beside the tick, stacked layout only. In the row the tick
   ends a line that visibly runs through three steps; under a column of
   steps it was a green dot with nothing beside it, where every stop above
   has a title. */
.fxb--plus .fxb-path__done { display: none; }
@media (max-width: 767px) {
  .fxb--plus .fxb-path__done {
    position: absolute; left: 70px; bottom: 0; display: flex; align-items: center; height: 40px;
    color: #0a9a30; font-size: 21px; font-weight: 600; line-height: 1.2;
  }
  .fxb--plus .fxb-path.is-armed .fxb-path__done { opacity: 0; }
  .fxb--plus .fxb-path.is-in .fxb-path__done { opacity: 1; transition: opacity .4s ease 1.2s; }
}

/* The narrowest phones (320px). The rating badge and "Na trhu od 2012" are
   kept on one line on a phone, and together they need 295px — 7px more than
   a 320px screen has between its gutters, so the whole hero column was
   pushed past the right gutter. There the line may break again. */
@media (max-width: 340px) {
  .fxb--plus .fxb-proof { flex-wrap: wrap; }
}


/* Live Vue calculator: scoped to the opt-in Fixovka 2029 variant. */
.fxb-calc .calculator-fixovka29 .fx29-select { position: relative; }
.fxb-calc .calculator-fixovka29 .fx29-select::after {
  content: ''; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px;
  border-right: 1.5px solid #ff601a; border-bottom: 1.5px solid #ff601a;
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.fxb-calc .calculator-fixovka29 select {
  width: 100%; appearance: none; border: 1px solid #202b75; border-radius: 8px;
  background: #f8fafc; color: #202b75; padding: 12px 30px 12px 16px;
  font: inherit; font-size: 14px; line-height: 21px; height: 47px;
}
.fxb-calc .calculator-fixovka29 select:focus-visible { outline: 2px solid #ff601a; outline-offset: 2px; }
.fxb-calc .calculator-fixovka29 .fx29-error { color: #b42318; font-size: 14px; }
.fxb-calc .calculator-fixovka29 .fx29-error button { text-decoration: underline; }
.fxb-calc .calculator-fixovka29 .numeric-input__field:disabled { opacity: .5; }
.fxb-calc .calculator-fixovka29 .numeric-input__button:disabled { opacity: .3; cursor: default; }
.fxb-calc .calculator-fixovka29 .tariff-card-group { align-content: start; }