/* ==========================================================================
   ONE LAYOUT STANDARD, 2026-09-16 (Mia: "одна секция = один экран, потом чуть-чуть скролла и
   футер, никаких обрезков; отступы везде одинаковые"). Loaded LAST on all 9 pages.

   Measured before this file: section heights ran 18% to 192% of a screen, heroes were 49, 71, 83,
   93 and 100 percent, section padding-top took 11 different values, h1 came in 4 sizes.

   The three roles a section can have, and nothing else:
     .sec-first  the section directly under the header  -> 100svh - header - peek
     .sec-full   any full section deeper in the page    -> 100svh
     .sec-last   the section the footer follows         -> 100svh - peek
   A list or feed keeps its natural height and only takes the padding and type tokens.
   ========================================================================= */
:root{
  --hdr:64px;          /* the header is in flow, so the first screen is 100svh minus this */
  --peek:92px;         /* the promise that the page continues: what shows of the next block */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --pad-sec:min(40px, 4.4vh);       /* section padding block, one value site-wide */
  --gap-head-lede:min(20px, 2.2vh);
  --gap-lede-cta:min(28px, 3vh);
  --ctrl-h:min(52px, 5.6vh);
  --wrap:1240px;
  --wrap-pad:clamp(20px, 4vw, 48px);
}

/* --- section roles -------------------------------------------------------
   sec-first: the hero under the header, one screen minus the header minus the peek.
   sec-full / sec-last / sec-auto: HEIGHT COMES FROM THE CONTENT. They share the padding,
   the type scale and the container, never a forced screen height (Mia 10:43: "ужас, столько
   пустого места, так быть не должно"). ------------------------------------------------------ */
@media (min-width:861px){
  body.stack section.sec-first, body.stack div.sec-first{
      min-height:calc(100svh - var(--hdr) - var(--peek)); height:calc(100svh - var(--hdr) - var(--peek));
      box-sizing:border-box; padding-block:var(--pad-sec); display:flex; align-items:center; }
  /* content sections keep their own height and their own padding; only the hero is standardised */
}
@media (max-width:860px){
  body.stack .sec-first, body.stack .sec-full, body.stack .sec-last, body.stack .sec-auto{
      height:auto; min-height:0; padding-block:48px; }
}

/* --- type scale, one ladder for every page -------------------------------- */
@media (min-width:861px){
  body.stack main h1{ font-size:min(clamp(44px,5vw,88px), 10.5vh); line-height:1.02; letter-spacing:-.025em; }
  body.stack main h2{ font-size:min(clamp(30px,3vw,48px), 6.4vh); line-height:1.04; letter-spacing:-.02em; }
  body.stack main .alede, body.stack main .blede, body.stack main .plede, body.stack main .clede{
    font-size:min(clamp(17px,1.3vw,22px), 2.6vh); line-height:1.42; margin-top:var(--gap-head-lede); }
  body.stack main .acta, body.stack main .bhero .acta{ margin-top:var(--gap-lede-cta); }
}
/* --- container, identical everywhere -------------------------------------- */
body.stack .awrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--wrap-pad); }

/* --- brand hero facts, variant 5 (Mia 2026-09-16 10:17): one line, dot separators, no rules,
       no icons. Replaces the three-column row with dividers she rejected. ------------------- */
body.page-brand .bfacts{ display:flex !important; flex-wrap:wrap; align-items:center; gap:var(--s4);
  border-top:0 !important; padding-top:0 !important; margin-top:var(--gap-lede-cta) !important;
  max-width:none; white-space:normal; }
body.page-brand .bfacts li{ display:flex; align-items:baseline; gap:var(--s2); border-left:0 !important;
  padding:0 !important; }
body.page-brand .bfacts li + li::before{ content:""; width:5px; height:5px; border-radius:50%;
  background:#B98CFF; margin-right:var(--s4); align-self:center; }
body.page-brand .bfacts .bico{ display:none; }
body.page-brand .bfacts b{ display:inline; font-size:min(20px, 2.4vh); font-weight:600; letter-spacing:-.01em; margin-right:var(--s2); }
body.page-brand .bfacts span{ display:inline; font-size:min(15px, 1.9vh); color:rgba(242,239,246,.62); }

/* index and intelligence carry the older layered c6 stylesheet, whose band heights outrank the
   role classes there. Only the HERO height is restated with that weight; content sections keep
   whatever height their content needs. */
@media (min-width:861px){
  body.stack section.sec-first{ height:calc(100svh - var(--hdr) - var(--peek)) !important;
                                min-height:calc(100svh - var(--hdr) - var(--peek)) !important; }
  body.stack section.sec-full, body.stack section.sec-last{ min-height:0 !important; height:auto !important; }
}

/* ---- Mia's list of 2026-09-16 20:10 ------------------------------------------------------- */

/* the KnightSlots mark is now a real white-on-dark PNG, so the old inversion must not apply */
body.page-aff .atile__mark--ks, body.page-brand .bmark[src*="knightslots"]{ filter:none !important; }
body.page-aff .atile__mark{ max-height:clamp(30px,3vw,46px); width:auto; }

/* the topic select: centre the value inside the box for real (a select ignores flex centring) */
.fselect{ line-height:min(44px,5vh); padding-block:0; }

/* headings on the light brand sheets were touching the content under them */
body.page-brand .bpay h2, body.page-brand .bview h2, body.page-brand .bprov h2{ margin-bottom:var(--s5); }
body.page-brand .bpay .bchips, body.page-brand .bprov__row{ margin-top:0; }

/* the apply band: the copy moves away from the eagle and closer to the form */
@media (min-width:861px) and (min-height:600px){
  body.page-aff .aapply__in{ padding-left:min(34vw, 520px) !important; gap:clamp(24px,3vw,48px); }
}

/* the SiGMA mark is a stacked lockup, so at the same height as the one-line marks beside it it
   reads half the size. It gets the height that makes it optically equal. */
/* the SiGMA mark is now their real one-line logotype (Wikimedia SiGMA_FULL_RGB, trimmed and
   downscaled), so it lines up with ICE, iGB and SBC at the same height and needs no inversion */
body.stack .ac__logo--sigma{ height:auto !important; max-height:min(34px,3.6vh) !important; width:auto !important;
  filter:none !important; }

/* apply band: the copy sits clear of the eagle and the heading keeps its two lines */
@media (min-width:861px) and (min-height:600px){
  body.page-aff .aapply__in{ padding-left:min(30vw, 440px) !important; padding-right:clamp(24px,4vw,64px) !important;
    grid-template-columns:minmax(0,1fr) minmax(0,400px); align-items:center; }
  body.page-aff .aapply h2{ font-size:min(clamp(30px,2.9vw,44px), 7vh); }
  body.page-aff .aapply .alede{ max-width:34ch; }
}

/* brand hero: the block is spread over the section instead of sitting squeezed at the top,
   exactly as in Mia's reference of 2026-09-16 20:13 */
@media (min-width:861px){
  body.page-brand section.bhero > .awrap{ display:flex; flex-direction:column; justify-content:space-evenly;
      height:100%; gap:0; }
  body.page-brand .bhero .bmark{ display:block; height:auto; max-height:min(52px,6vh); width:auto; margin:0; }
  body.page-brand .bhero .bcrumb{ margin:0; }
  body.page-brand .bhero .bfacts{ margin-top:0 !important; }
}

/* the steps + FAQ sheet was pinned, so the apply band slid over it and cut the question list in
   half (Mia 20:11 "друг на друга наложилось"). It now scrolls normally: nothing covers it and the
   empty screen above it is gone. The two sheets before it keep the motion. */
@media (min-width:861px){
  /* it must also PAINT above the two pinned sheets before it, otherwise the pinned models sheet
     covers it while it scrolls past and the questions never appear at all */
  body.page-aff main > #startfaq{ position:relative !important; z-index:3 !important; height:auto !important;
    min-height:0 !important; overflow:visible !important; padding-block:clamp(48px,6vh,80px) !important;
    border-radius:clamp(26px,2.7vw,46px) clamp(26px,2.7vw,46px) 0 0 !important; background:#05010F !important; }
  body.page-aff .asheet > .asec{ min-height:0 !important; padding-block:0 !important; }
  body.page-aff .asheet > .afaq{ padding-top:clamp(28px,4vh,48px) !important; }
}

/* Nolimit City: their mark is black on their own yellow, so the chip carries that yellow and the
   logo sits on it seamlessly. Last of the 12, no text cards left. */
body.page-brand .bprov__card:has(img[src*="nolimit"]){ background:#FFF200; }
body.page-brand .bprov__card img[src*="nolimit"]{ max-width:70%; max-height:34px; filter:none; }

/* ---- Mia's list of 2026-09-16 20:35 ------------------------------------------------------- */

/* the brand mark is out of the brand hero again, so the block is copy only */
body.page-brand .bhero .bmark{ display:none !important; }

/* the brand picture now lies across the WHOLE section with the darkening at its edges, instead of
   sitting in a feathered box on the right (Mia: "должно красиво ложиться на всю секцию") */
@media (min-width:861px){
  /* the box is the picture's own shape, full section height and flush right, so the feathering
     below lands exactly on the picture's edges and it melts into the dark instead of ending on a
     straight line (Mia 20:33: "должно красиво ложиться на всю секцию с затемнениями по бокам") */
  body.page-brand .bhero__art{ position:absolute !important; top:0 !important; bottom:0 !important;
    right:0 !important; left:auto !important; height:100% !important; width:auto !important;
    aspect-ratio:1344/1245; }
  body.page-brand .bhero__art img{ width:100% !important; height:100% !important; object-fit:cover;
    object-position:center;
    -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 34%, #000 86%, rgba(0,0,0,0) 100%),
                       linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 12%, #000 86%, rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 34%, #000 86%, rgba(0,0,0,0) 100%),
                       linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 12%, #000 86%, rgba(0,0,0,0) 100%);
    -webkit-mask-composite:source-in; mask-composite:intersect; }
  body.page-brand .bhero__veil{
    background:linear-gradient(90deg, rgba(5,1,15,.86) 0%, rgba(5,1,15,.6) 30%, rgba(5,1,15,.18) 48%,
      rgba(5,1,15,.04) 66%, rgba(5,1,15,.18) 88%, rgba(5,1,15,.5) 100%); }
  body.page-brand .bhero__fade{ background:none; }
}

/* every provider sits on the same white plate, Nolimit City included (their yellow is keyed out) */
body.page-brand .bprov__card:has(img[src*="nolimit"]){ background:#fff; }
body.page-brand .bprov__card img[src*="nolimit"]{ max-width:74%; max-height:36px; }

/* the KnightSlots mark is a finished white-on-dark file; every old inversion of it is switched off */
body .hmark--ks, body .lx__tile-mark--ks, body .atile__mark--ks, body .bmark[src*="knightslots"]{
  filter:none !important; }

/* apply band: the copy is centred in the space between the eagle and the form */
@media (min-width:861px) and (min-height:600px){
  body.page-aff .aapply__in{ padding-left:min(26vw, 380px) !important; }
  body.page-aff .aapply__copy{ text-align:left; }
}

/* the Introduce yourself sheet fits inside the window, at 900 and at 768 */
.kmodal{ padding:min(4vh,32px) 16px; }
.kmodal .fpaper{ max-height:calc(100vh - 8vh); overflow:auto; padding:min(28px,3vh) clamp(20px,2vw,32px); }
.kmodal .fpaper h2{ font-size:min(clamp(26px,2.4vw,36px), 5vh); margin-bottom:min(10px,1.2vh); }
.kmodal .fpaper .fsub{ margin-bottom:min(16px,2vh); font-size:15px; }
.kmodal .fgrid{ gap:min(12px,1.4vh) clamp(14px,1.4vw,22px); }
.kmodal .finput{ height:min(46px,5.2vh); }
.kmodal .ftext{ min-height:min(104px,11vh); }
.kmodal .fdrop{ min-height:min(66px,7.4vh); }
.kmodal .fsend{ height:min(54px,6vh); margin-top:min(14px,1.6vh); }
.kmodal .fnote{ margin-top:min(12px,1.4vh); }