/* ==========================================================================
   Braintix Labs — service pages stylesheet
   Built from the Figma UI kit (file tGWfe2UbwdafZJIFYfHk8O, frame "ui kit")
   Covers: /ai-sales-solution and /vision-safety-solutions
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Font
   Mona Sans is GitHub's open-source variable font (SIL OFL 1.1).
   Drop Mona-Sans.woff2 into /assets/fonts/ or replace this @font-face
   with the declaration already used on the live site.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Mona Sans";
  src: url("/fonts/mona-sans.woff2") format("woff2 supports variations"),
       url("/fonts/mona-sans.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour */
  --bx-primary:   #1E8A8A;
  --bx-bg:        #ECF0F0;
  --bx-bg-1:      #D8E5E5;

  --bx-white-1:   #FFFFFF;
  --bx-white-2:   #ECF0F0;
  --bx-white-3:   #A9B8B8;
  --bx-white-10:  rgba(255, 255, 255, .10);

  --bx-dark-1:    #0C1E21;
  --bx-dark-2:    #18292C;
  --bx-dark-3:    #364E52;
  --bx-dark-4:    #67787A;

  --bx-border-1:  #C9D1D1;
  --bx-border-2:  #313D3D;
  --bx-border-3:  rgba(30, 138, 138, .15);
  --bx-border-4:  rgba(255, 255, 255, .15);

  --bx-gradient:  linear-gradient(115deg,
                    rgba(30, 138, 138, .30) 0%,
                    rgba(30, 138, 138, 0)  50%,
                    rgba(30, 138, 138, .30) 100%);

  /* Spacing scale */
  --bx-xxxs:  8px;
  --bx-xxs:  16px;
  --bx-xs:   24px;
  --bx-s:    32px;
  --bx-m:    40px;
  --bx-l:    60px;
  --bx-xl:   80px;
  --bx-xxl: 120px;

  /* Radii */
  --bx-radius-sm:  12px;
  --bx-radius-md:  16px;
  --bx-radius-lg:  24px;
  --bx-radius-xl:  32px;
  --bx-radius-pill: 999px;

  /* Layout */
  --bx-container: 1440px;
  --bx-gutter:    var(--bx-l);

  --bx-font: "Mona Sans", "Inter", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --bx-ease: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   3. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bx-bg);
  color: var(--bx-dark-3);
  font-family: var(--bx-font);
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--bx-dark-1);
  font-weight: 500;
  letter-spacing: 0;
}

h1 { font-size: 74px; line-height: 82px; }
h2 { font-size: 48px; line-height: 54px; }
h3 { font-size: 32px; line-height: 40px; }
h4 { font-size: 24px; line-height: 1.4; font-weight: 600; }

p { margin: 0 0 var(--bx-xxs); }
p:last-child { margin-bottom: 0; }

/* Text utilities mapped to the Figma type styles */
.bx-body-1 { font-size: 22px; line-height: 34px; }
.bx-body-2 { font-size: 18px; line-height: 26px; }
.bx-body-3 { font-size: 16px; line-height: 24px; }

.bx-muted     { color: var(--bx-dark-4); }
.bx-on-dark   { color: var(--bx-white-1); }
.bx-on-dark p,
.bx-on-dark .bx-muted { color: var(--bx-white-3); }

.bx-accent { color: var(--bx-primary); }

/* Screen-reader only */
.bx-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.bx-container {
  width: 100%;
  max-width: var(--bx-container);
  margin-inline: auto;
  padding-inline: var(--bx-gutter);
}

.bx-section { padding-block: var(--bx-xxl); }
.bx-section--tight { padding-block: var(--bx-xl); }

.bx-section-head { max-width: 760px; margin-bottom: var(--bx-l); }
.bx-section-head--center { margin-inline: auto; text-align: center; }
.bx-section-head p { margin-top: var(--bx-xs); }

.bx-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--bx-xl);
  align-items: start;
}

/* Eyebrow / section label — Figma "BTN/Sub-Title" */
.bx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--bx-xxxs);
  margin-bottom: var(--bx-xs);
  padding: 6px 14px;
  border: 1px dashed var(--bx-border-3);
  border-radius: var(--bx-radius-sm);
  color: var(--bx-primary);
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.bx-eyebrow svg { width: 18px; height: 18px; flex: none; }
.bx-on-dark .bx-eyebrow { border-color: var(--bx-border-4); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.bx-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bx-xxs);
  padding: 8px 8px 8px 28px;
  border: 1px solid transparent;
  border-radius: var(--bx-radius-pill);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  transition: background-color .25s var(--bx-ease),
              color .25s var(--bx-ease),
              transform .25s var(--bx-ease);
}
.bx-btn:hover { transform: translateY(-2px); }

.bx-btn__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  flex: none;
  transition: transform .25s var(--bx-ease);
}
.bx-btn:hover .bx-btn__icon { transform: rotate(45deg); }
.bx-btn__icon svg { width: 16px; height: 16px; }

.bx-btn--primary { background: var(--bx-primary); color: var(--bx-white-1); }
.bx-btn--primary .bx-btn__icon { background: var(--bx-dark-1); color: var(--bx-white-1); }
.bx-btn--primary:hover { background: #17706f; }

.bx-btn--dark { background: var(--bx-dark-1); color: var(--bx-white-1); }
.bx-btn--dark .bx-btn__icon { background: var(--bx-white-1); color: var(--bx-dark-1); }
.bx-btn--dark:hover { background: var(--bx-dark-2); }

.bx-btn--light { background: var(--bx-white-1); color: var(--bx-dark-1); }
.bx-btn--light .bx-btn__icon { background: var(--bx-primary); color: var(--bx-white-1); }

.bx-btn--ghost {
  background: transparent;
  color: var(--bx-white-1);
  border-color: var(--bx-border-4);
}
.bx-btn--ghost .bx-btn__icon { background: var(--bx-primary); color: var(--bx-white-1); }

/* Text link with arrow */
.bx-link {
  display: inline-flex; align-items: center; gap: var(--bx-xxxs);
  color: var(--bx-primary); font-size: 16px; line-height: 24px; font-weight: 600;
}
.bx-link svg { width: 14px; height: 14px; transition: transform .25s var(--bx-ease); }
.bx-link:hover svg { transform: translate(3px, -3px); }

/* --------------------------------------------------------------------------
   7. Page hero (dark banner + breadcrumbs)
   -------------------------------------------------------------------------- */
.bx-hero {
  position: relative;
  margin: var(--bx-xxxs) var(--bx-xxxs) 0;
  /* The site header is fixed over the top of this banner — the extra top
     padding is the room it needs. */
  padding-block: 190px 130px;
  border-radius: var(--bx-radius-lg);
  background:
    radial-gradient(60% 120% at 22% 55%, rgba(30, 138, 138, .38) 0%, rgba(30, 138, 138, 0) 62%),
    var(--bx-dark-1);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}
/* diagonal line pattern, matches the Figma hero texture */
.bx-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, .045) 0px,
    rgba(255, 255, 255, .045) 1px,
    transparent 1px,
    transparent 46px
  );
}
.bx-hero h1 { color: var(--bx-white-1); }

.bx-breadcrumbs {
  display: inline-flex; align-items: center; gap: var(--bx-xxxs);
  margin-top: var(--bx-s);
  padding: 10px 20px;
  border-radius: var(--bx-radius-pill);
  background: var(--bx-white-10);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  font-size: 16px; line-height: 24px;
  color: var(--bx-white-3);
}
.bx-breadcrumbs svg { width: 16px; height: 16px; color: var(--bx-primary); }
.bx-breadcrumbs a:hover { color: var(--bx-white-1); }
.bx-breadcrumbs [aria-current="page"] { color: var(--bx-white-1); }
.bx-breadcrumbs__sep { opacity: .6; }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.bx-grid { display: grid; gap: var(--bx-s); }
.bx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.bx-card {
  padding: var(--bx-m);
  border: 1px solid var(--bx-border-1);
  border-radius: var(--bx-radius-md);
  background: var(--bx-white-1);
  transition: border-color .25s var(--bx-ease), transform .25s var(--bx-ease);
}
.bx-card:hover { border-color: var(--bx-primary); transform: translateY(-4px); }
.bx-card h3, .bx-card h4 { margin-bottom: var(--bx-xxs); }
.bx-card p { color: var(--bx-dark-4); font-size: 16px; line-height: 24px; }

/* Round icon badge — linear teal icon inside a tinted circle */
.bx-icon {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  margin-bottom: var(--bx-xs);
  border: 1px solid var(--bx-border-3);
  border-radius: 50%;
  background: rgba(30, 138, 138, .08);
  color: var(--bx-primary);
}
.bx-icon svg { width: 26px; height: 26px; }
.bx-on-dark .bx-icon { background: rgba(30, 138, 138, .16); border-color: var(--bx-border-4); }

/* --------------------------------------------------------------------------
   9. Dark panel (problems / cases / contact)
   -------------------------------------------------------------------------- */
.bx-panel {
  position: relative;
  border-radius: var(--bx-radius-lg);
  background: var(--bx-dark-1);
  color: var(--bx-white-1);
  padding: var(--bx-xl);
  overflow: hidden;
  isolation: isolate;
}
.bx-panel::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--bx-gradient);
  opacity: .5;
}
.bx-panel h2, .bx-panel h3, .bx-panel h4 { color: var(--bx-white-1); }
.bx-panel p { color: var(--bx-white-3); }

/* Problem list — numbered rows on dark */
.bx-problems { display: grid; gap: var(--bx-xxs); }
.bx-problem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--bx-xs);
  align-items: start;
  padding: var(--bx-s);
  border: 1px solid var(--bx-border-2);
  border-radius: var(--bx-radius-md);
  background: var(--bx-dark-2);
  transition: border-color .25s var(--bx-ease);
}
.bx-problem:hover { border-color: var(--bx-primary); }
.bx-problem__num {
  font-size: 16px; font-weight: 700; letter-spacing: .1em;
  color: var(--bx-primary);
  padding-top: 6px;
}
.bx-problem h3 { font-size: 24px; line-height: 32px; font-weight: 600; margin-bottom: var(--bx-xxxs); }

/* --------------------------------------------------------------------------
   10. Steps (How it works — 01 / 02 / 03 / 04)
   -------------------------------------------------------------------------- */
.bx-steps { counter-reset: bxstep; display: grid; gap: var(--bx-s); }
.bx-step {
  position: relative;
  padding: var(--bx-m);
  border: 1px solid var(--bx-border-1);
  border-radius: var(--bx-radius-md);
  background: var(--bx-white-1);
}
.bx-step__num {
  display: block;
  margin-bottom: var(--bx-xs);
  font-size: 48px; line-height: 1; font-weight: 500;
  color: var(--bx-primary);
}
.bx-step h3 { font-size: 24px; line-height: 32px; font-weight: 600; margin-bottom: var(--bx-xxxs); }
.bx-step p { color: var(--bx-dark-4); font-size: 16px; line-height: 24px; }

/* --------------------------------------------------------------------------
   11. Accordion (industries / FAQ)
   -------------------------------------------------------------------------- */
.bx-accordion { display: grid; gap: var(--bx-xxs); }

.bx-ac {
  border: 1px solid var(--bx-border-1);
  border-radius: var(--bx-radius-md);
  background: var(--bx-white-1);
  overflow: hidden;
  transition: border-color .25s var(--bx-ease);
}
.bx-ac[open] { border-color: var(--bx-primary); }

.bx-ac summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bx-xs);
  padding: var(--bx-xs) var(--bx-s);
  cursor: pointer;
  list-style: none;
  font-size: 20px; line-height: 28px; font-weight: 600;
  color: var(--bx-dark-1);
}
.bx-ac summary::-webkit-details-marker { display: none; }
.bx-ac__sign {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border: 1px solid var(--bx-border-3); border-radius: 50%;
  color: var(--bx-primary);
  transition: background-color .25s var(--bx-ease), color .25s var(--bx-ease),
              transform .25s var(--bx-ease);
}
.bx-ac[open] .bx-ac__sign {
  background: var(--bx-primary); color: var(--bx-white-1); transform: rotate(180deg);
}
.bx-ac__body { padding: 0 var(--bx-s) var(--bx-s); }
.bx-ac__body p { color: var(--bx-dark-4); font-size: 16px; line-height: 26px; }
.bx-ac__body ul { margin-top: var(--bx-xxs); display: grid; gap: 6px; }
.bx-ac__body li {
  position: relative; padding-left: 22px;
  color: var(--bx-dark-4); font-size: 16px; line-height: 24px;
}
.bx-ac__body li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--bx-primary);
}

/* --------------------------------------------------------------------------
   12. CTA banner
   -------------------------------------------------------------------------- */
.bx-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: var(--bx-m);
  align-items: center;
  padding: var(--bx-l);
  border-radius: var(--bx-radius-lg);
  background: var(--bx-primary);
  color: var(--bx-white-1);
}
.bx-cta h2 { color: var(--bx-white-1); font-size: 40px; line-height: 48px; }
.bx-cta p { color: rgba(255, 255, 255, .82); margin: var(--bx-xxs) 0 var(--bx-s); max-width: 46ch; }
.bx-cta__media {
  /* faq-consultation.webp already comes pre-composited with its own
     irregular cutout baked in — just show it full-bleed, no extra mask */
  display: flex;
  align-items: center;
  justify-content: center;
}
.bx-cta__media img { display: block; width: 100%; height: auto; }

/* faq-consultation.webp has a transparent notch punched out of its
   bottom-right corner: on braintix.ai's FAQ block a teal phone card sits
   in it (.faq__callout). Reproduced here so the cut-out reads as
   intentional instead of looking like a rendering glitch. */
.bx-cta__media--notched { position: relative; }
.bx-cta__callout {
  position: absolute;
  right: 0;
  bottom: 0;
  /* exact size of the transparent notch in faq-consultation.webp,
     measured off the file's alpha channel (1170x1202 source) */
  width: 41.62%;
  height: 41.76%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--bx-xxs);
  padding: var(--bx-xxs);
  border-radius: var(--bx-radius-sm);
  background: var(--bx-primary);
  color: var(--bx-white-1);
}
.bx-cta__callout strong {
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
}
/* icon above the number, same stacking as the site's .faq__callout */
.bx-cta__callout-phone { display: flex; flex-direction: column; gap: 8px; }
.bx-cta__callout-icon {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  background: var(--bx-dark-1) url("/images/faq-phone.svg") center / 17px no-repeat;
}
.bx-cta__callout a {
  align-self: flex-start;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  border-bottom: 1px solid var(--bx-white-1);
}

/* consultation-photo-overlay.webp is a plain rectangular photo on the
   real site — its blob shape comes from this exact SVG mask (pulled
   from braintix.ai/images/consultation-photo-mask.svg), not a baked-in
   cutout, so we reproduce the same clip here instead of approximating
   it with border-radius. */
.bx-cta__media--blob {
  aspect-ratio: 494.39 / 295.271;
  position: relative;
  overflow: hidden;
  -webkit-mask: url("/images/consultation-photo-mask.svg") 50% / 100% 100% no-repeat;
  mask: url("/images/consultation-photo-mask.svg") 50% / 100% 100% no-repeat;
}
/* Matches braintix.ai exactly. On the live site the photo is a *nested*
   second layer, so its percentages compound with the wrapper's:
     wrapper  .consultation__bitmap        110.641% x 114.131%  @ -2.348% / -6.288%
     photo    .consultation__bitmap:after  111.23%  x 108.28%   @ -8.17%  / -8.52%
   Flattened against the mask box that gives:
     width  110.641% x 111.23% = 123.065%
     height 114.131% x 108.28% = 123.581%
     left   -2.348% + (-8.17% x 1.10641)  = -11.387%
     top    -6.288% + (-8.52% x 1.14131)  = -16.012%
   object-fit:fill mirrors their `background-size:100% 100%`; the box and the
   photo share the same 1.667 aspect ratio, so nothing is actually distorted. */
.bx-cta__media--blob img {
  position: absolute;
  width: 123.065%;
  max-width: none; /* override the sitewide img{max-width:100%} reset,
                       which otherwise clamps this intentional overscan */
  height: 123.581%;
  top: -16.012%;
  left: -11.387%;
  object-fit: fill;
}

/* --------------------------------------------------------------------------
   13. Placeholder blocks (Success stories / Related articles)
   -------------------------------------------------------------------------- */
.bx-placeholder {
  border: 1px dashed var(--bx-border-1);
  border-radius: var(--bx-radius-md);
  background: rgba(255, 255, 255, .5);
  padding: var(--bx-m);
  min-height: 260px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.bx-placeholder__tag {
  align-self: flex-start;
  margin-bottom: auto;
  padding: 4px 12px;
  border-radius: var(--bx-radius-pill);
  background: rgba(30, 138, 138, .1);
  color: var(--bx-primary);
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
}
.bx-placeholder h3 { font-size: 22px; line-height: 30px; font-weight: 600; margin-bottom: var(--bx-xxxs); }
.bx-placeholder p { color: var(--bx-dark-4); font-size: 15px; line-height: 22px; }

.bx-panel .bx-placeholder {
  border-color: var(--bx-border-2);
  background: rgba(255, 255, 255, .04);
}
.bx-panel .bx-placeholder p { color: var(--bx-white-3); }

/* --------------------------------------------------------------------------
   14. Contact form (dark, underline inputs)
   -------------------------------------------------------------------------- */
.bx-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bx-s) var(--bx-m);
}
.bx-field { position: relative; }
.bx-field--full { grid-column: 1 / -1; }
.bx-field input,
.bx-field select,
.bx-field textarea {
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--bx-border-4);
  background: transparent;
  color: var(--bx-white-1);
  font-family: inherit;
  font-size: 16px; line-height: 24px;
  transition: border-color .25s var(--bx-ease);
}
.bx-field textarea { resize: vertical; min-height: 96px; }
.bx-field input::placeholder,
.bx-field textarea::placeholder { color: var(--bx-dark-4); }
.bx-field select { color: var(--bx-dark-4); appearance: none; }
.bx-field select option { color: var(--bx-dark-1); }
.bx-field :is(input, select, textarea):focus {
  outline: none;
  border-bottom-color: var(--bx-primary);
}

.bx-contact-cards { display: grid; gap: var(--bx-xxs); }
.bx-contact-card {
  padding: var(--bx-s);
  border-radius: var(--bx-radius-md);
  background: var(--bx-white-1);
}
.bx-panel .bx-contact-card h3,
.bx-contact-card h3 {
  color: var(--bx-dark-1);
  font-size: 26px; line-height: 34px; margin-bottom: var(--bx-xxxs);
}
.bx-panel .bx-contact-card p,
.bx-contact-card p { color: var(--bx-dark-4); font-size: 16px; line-height: 24px; }
.bx-contact-card a:hover { color: var(--bx-primary); }

/* --------------------------------------------------------------------------
   16. Responsive — mobile type scale from the Figma UI kit
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  :root { --bx-gutter: var(--bx-m); }
  .bx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .bx-split { grid-template-columns: 1fr; gap: var(--bx-m); }
  .bx-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-cta { grid-template-columns: 1fr; }
  .bx-cta__media { max-width: 420px; }
}

@media (max-width: 768px) {
  :root {
    --bx-gutter: var(--bx-xs);
    --bx-xxl: 64px;
    --bx-xl:  48px;
    --bx-l:   32px;
  }

  body { font-size: 17px; line-height: 22px; }

  h1 { font-size: 38px; line-height: 41px; }
  h2 { font-size: 26px; line-height: 34px; }
  h3 { font-size: 22px; line-height: 28px; }
  h4 { font-size: 20px; line-height: 22px; }

  .bx-body-1 { font-size: 18px; line-height: 26px; }
  .bx-body-2 { font-size: 17px; line-height: 22px; }
  .bx-body-3 { font-size: 16px; line-height: 21px; }

  .bx-hero { padding-block: 190px 72px; margin-inline: 6px; }
  .bx-panel { padding: var(--bx-s) var(--bx-xs); }
  .bx-cta { padding: var(--bx-s); }
  .bx-cta h2 { font-size: 26px; line-height: 34px; }

  .bx-grid--2,
  .bx-grid--3,
  .bx-grid--4 { grid-template-columns: 1fr; }

  .bx-card, .bx-step { padding: var(--bx-xs); }
  .bx-problem { grid-template-columns: 1fr; gap: var(--bx-xxxs); padding: var(--bx-xs); }
  .bx-ac summary { font-size: 18px; line-height: 24px; padding: var(--bx-xxs) var(--bx-xs); }
  .bx-ac__body { padding: 0 var(--bx-xs) var(--bx-xs); }

  .bx-form-grid { grid-template-columns: 1fr; }

  .bx-step__num { font-size: 34px; }
}

/* --------------------------------------------------------------------------
   17. Motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .bx-cta { display: none; }
  body { background: #fff; color: #000; }
}

/* The shared contact dialog inherits from body and from the panel and cards it
   sits in, so the bare body and h1-h4 rules above would restyle it. */
.contact-popup { font-size: 1rem; line-height: 1.5; }
.contact-popup :is(h1, h2, h3, h4) { color: inherit; }

/* Сообщение об ошибке отправки формы */
.bx-form-status {
  margin-top: var(--bx-xs);
  font-size: 14px;
  line-height: 1.5;
  color: #C0392B;
}
.bx-form-status a { color: inherit; text-decoration: underline; }
.bx-btn[disabled] { opacity: .6; cursor: not-allowed; }