/* ============================================================
   Rework — FIX / POLISH layer (loaded LAST, overrides win).
   Robust layout: no overflow, safe wrapping, anchor offsets,
   tidy mobile, a11y focus. Award-grade finishing.
   ============================================================ */

/* anchor links land below the fixed header */
html{scroll-padding-top:90px;}

/* never let long Russian words break the layout */
h1,h2,h3,h4,.act-copy .sub,.sec-head p,.fcard p,.step p,.bcard p,
.benefit p,.story blockquote,.faq-q span,.dl .sub,.spot .sub,.cta-sub{
  overflow-wrap:break-word;word-break:normal;hyphens:none;text-wrap:pretty;
}

/* grid/flex children must be allowed to shrink (kills horizontal overflow) */
.act-copy,.hero-visual,.spot-grid>*,.dl-grid>*,.trust .stat,
.step,.fcard,.bcard,.city,.cat,.story,.benefit,.foot-col,.foot-brand{min-width:0;}

/* gradient headline keyword: a touch of breathing room so descenders/ y-tails
   and the drop-shadow aren't clipped by background-clip:text */
.hl{padding:0 .04em;line-height:1.08;}
.act-copy h1{padding-bottom:.04em;}

/* keyboard focus — visible, on-brand (accessibility = award criteria) */
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;
}

/* feature carousel: clip stray shadows, smoother edges */
.track-wrap{margin:0 -2px;}
.fcard{will-change:transform;}

/* keep the floating chips inside the stage on mid widths (no sideways scroll) */
@media(max-width:1100px){
  .chip.c1{left:0;}
  .chip.c2{right:0;}
}

/* tablet / mobile hero — CRITICAL FIX
   Base CSS hard-codes .hero-visual{grid-column:2}. When the grid collapses to
   one column on mobile, that forces an implicit 2nd column, squeezing the H1
   into ~80px so the headline shatters letter-by-letter. Force a true single
   column: copy on top, phone below, both full width. */
@media(max-width:900px){
  .hero .act{grid-template-columns:1fr !important;}
  .hero .act-copy{grid-column:1 / -1 !important;grid-row:auto !important;}
  .hero .hero-visual{grid-column:1 / -1 !important;grid-row:auto !important;
    width:100%;margin-top:44px;min-height:0;}
  .hero .hero-visual .phone{margin:0 auto;}
  /* headline must never break inside words */
  .act-copy h1{overflow-wrap:normal;word-break:keep-all;text-wrap:balance;}
  .chip{position:absolute;}
}

/* phones: tighten everything, kill the empty hero gap, center the visual */
@media(max-width:760px){
  .act-copy h1{letter-spacing:-.03em;}
  .act-trust{gap:18px 26px;}
  .hero-visual{min-height:0;margin-top:36px;}
  .spot h2,.dl h2{letter-spacing:-.03em;}
  .foot-bottom .contact{gap:6px 16px;}
}

/* very small phones: avatars/chips/qr don't overflow, single-column comfort */
@media(max-width:430px){
  .phone{width:236px;}
  .chip{font-size:11.5px;padding:8px 11px;}
  .chip .ico{width:26px;height:26px;}
  .story{padding:28px 24px 26px;}
  .qr-row{flex-wrap:wrap;}
}

/* reduced-motion: also calm the marquee + auroras already handled; ensure
   the gradient headline is static and legible */
@media (prefers-reduced-motion: reduce){
  .hl{background-position:0 0;}
}

/* ============================================================
   AWARD POLISH — elegant line-breaks, overflow guards, crispness
   ============================================================ */

/* balanced, magazine-quality line breaks on big type */
.act-copy h1,.sec-head h2,.spot h2,.dl h2,.cta-title,.bcard h3,.fcard .fbody h3{
  text-wrap:balance;
}

/* the giant closing wordmark must never create a horizontal scrollbar */
.cta-band{max-width:100vw;overflow:hidden;}
.cta-wordmark{max-width:100%;}

/* phone screens render crisp (no blurry scaling of the inline UI) */
.phone .screen,.fcard .pin-screen .screen,.bcard.b-lg .phone-mini .screen{
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}

/* bento large card: keep copy clear of the rotated mini-phone on small screens */
@media(max-width:520px){
  .bcard.b-lg{min-height:340px;}
  .bcard.b-lg .phone-mini{top:auto;bottom:22px;right:18px;transform:rotate(4deg);}
  .bcard.b-lg h3,.bcard.b-lg p{max-width:62%;}
}

/* trust counters: stop the gradient numbers from clipping their tails */
.trust .stat b{padding-bottom:.06em;line-height:1.08;}

/* section anchors that sit right under the marquee/header get a little air */
section.block[id]{scroll-margin-top:92px;}

/* premium detail: smooth momentum scon the feature track on touch */
.track{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}

/* make the light↔dark seams seamless on every viewport */
.light{isolation:isolate;}