/* ============================================================================
   c10 - THE CINEMATIC LAYER
   Five plates approved by Mia 2026-09-14 (assets/plates/APPROVED.md) carry
   sections 01 to 05. Section order and copy are HERS and are untouched: the
   copy was diffed against c9 string by string, 137 visible strings, zero
   difference, before the first shot.

   THE PREFIX, and why it is shaped exactly like this.
   Two sheets that matter here are deliberately UNLAYERED and address sections
   by id: 50-light.css (paper on #proof, #services, #markets) and
   c10-inherited.css (the c9 component layer, "#services .flow" and kin).
   MEASURED, not assumed: the heaviest competitor is
   "main>section#markets .ed__head h2", which is 1 id, 1 class, 3 types,
   because .ed__head is a class. A first attempt weighed 1 id, 1 class, 1 type,
   lost, and section 05 rendered black on black. The prefix below is
   "main>section.pl:is(<the four ids>,.pl)", which is 1 id, 2 classes, 2 types
   and beats every paper rule on the class count alone, whatever its type
   count. .pl sits inside the :is list as well, so the same prefix also matches
   the hero, which has no id and never was paper, while still carrying an id's
   weight.

   Light model, from APPROVED.md: source upper right, corners to near-black
   violet #05010F, gold under a tenth of the frame. Type never sits on a grey
   scrim; it sits on our own black, ramped.
   ========================================================================= */

:root{
  --plate-ink:#05010F;        /* the corner value of all five plates */
  --plate-txt:#F2EFF6;
  --plate-dim:#E8E3E3;        /* body value measured on capital.com, capref/cap_type.json */
  --plate-faint:rgba(242,239,246,.60);
}

/* ---- the sticky sheet stack is retired ----------------------------------
   33-stack.css pinned every section as a sticky sheet at a hard-coded height.
   The plate is the device now; a pinned sheet would crop it and fight its own
   scroll. stack-pin.js is not loaded by this page either. */
main>section{ position:static; top:auto; height:auto; min-height:0; }
html,body{ background:var(--plate-ink); }

/* ---- THE PLATE ---------------------------------------------------------- */
main>section.pl:is(#proof,#services,#why,#markets,.pl){
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--plate-ink);
  border-radius:0;            /* a full-bleed plate has no rounded sheet edge */
  box-shadow:none;
  --col:44%;                  /* the copy column, set per plate below */
  --plate-h:42.42vw;          /* 1584 x 672 */
  padding-block:clamp(76px,6.4vw,120px) clamp(88px,7.6vw,140px);
}
main>section.pl:is(#proof,#services,#why,#markets,.pl)::before,main>section.pl:is(#proof,#services,#why,#markets,.pl)::after{ display:none !important; }

main>section.pl:is(#proof,#services,#why,#markets,.pl)>.pl__art{ position:absolute; left:0; right:0; bottom:0; z-index:0; line-height:0; }
main>section.pl:is(#proof,#services,#why,#markets,.pl)>.pl__art img{ width:100%; height:auto; display:block; }

/* The two seams. Every plate is already near-black at its top edge, so a short
   ramp from the section ground hides the join; the bottom ramp stops the lit
   half of the frame from ending on a hard horizontal cut. */
main>section.pl:is(#proof,#services,#why,#markets,.pl)>.pl__art::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    var(--plate-ink) 0%, rgba(5,1,15,.55) 9%, rgba(5,1,15,0) 26%,
    rgba(5,1,15,0) 84%, rgba(5,1,15,.72) 95%, var(--plate-ink) 100%);
}

/* The ground the type sits on. One gradient, left to right, our own black. */
main>section.pl:is(#proof,#services,#why,#markets,.pl)>.pl__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(96deg,
      rgba(5,1,15,.95) 0%, rgba(5,1,15,.90) 26%, rgba(5,1,15,.62) 44%,
      rgba(5,1,15,.14) 60%, rgba(5,1,15,.00) 74%),
    linear-gradient(0deg, rgba(5,1,15,.72) 0%, rgba(5,1,15,0) 34%);
}
main>section.pl:is(#proof,#services,#why,#markets,.pl)>.wrap,
main>section.pl:is(#proof,#services,#why,#markets,.pl)>.hero__in{ position:relative; z-index:2; width:100%; }
main>section.pl:is(#proof,#services,#why,#markets,.pl)>.scrollcue{ position:absolute; z-index:2; }

/* The copy column, applied ONCE to the direct children of the wrap. Applying
   it to descendants as well compounded the percentage: 46 per cent of 46 per
   cent of 46 per cent left section 05 a 131px column that broke the word
   "rebuild" across three lines. Measured in the browser, not guessed. */
main>section.pl:is(#proof,#services,#why,#markets,.pl)>.wrap>*{ max-width:var(--col); }

/* section heights: the plate must always have room to land whole */
main>section.pl--02:is(#proof,#services,#why,#markets,.pl),main>section.pl--03:is(#proof,#services,#why,#markets,.pl),main>section.pl--04:is(#proof,#services,#why,#markets,.pl){ min-height:calc(var(--plate-h) + clamp(120px,12vw,220px)); }
main>section.pl--05:is(#proof,#services,#why,#markets,.pl){ --plate-h:55.81vw; min-height:calc(var(--plate-h) + clamp(90px,8vw,160px)); }

/* ---- DARK RESTORE -------------------------------------------------------
   #proof, #services and #markets were paper. They carry plates 02, 03 and 05
   now, so every paper value returns to ink. Sections 06 to 08 stay paper on
   purpose: the story is told dark, the offer is made light. */
main>section.pl:is(#proof,#services,#why,#markets,.pl){
  --srf:var(--plate-ink); --srf-raised:rgba(255,255,255,.045);
  --srf-raised-2:rgba(255,255,255,.075); --srf-sunken:var(--plate-ink);
  --txt:var(--plate-txt); --txt-dim:var(--plate-dim); --txt-faint:var(--plate-faint);
  --line:rgba(255,255,255,.12); --line-strong:rgba(255,255,255,.22);
  --accent:var(--v-300); --accent-solid:var(--v-500); --eyebrow-c:var(--g-500);
  --face-1:none; --face-2:none;
  color:var(--plate-txt);
}
main>section.pl:is(#proof,#services,#why,#markets,.pl) :is(h1,h2,h3,h4){ color:var(--plate-txt); }
main>section.pl:is(#proof,#services,#why,#markets,.pl) :is(h1,h2) :is(.h1dim,.h2dim){ color:rgba(242,239,246,.46); }
main>section.pl:is(#proof,#services,#why,#markets,.pl) :is(.ed__lede,.ed__after,.rebuild__claim,.audience){ color:var(--plate-dim); }
main>section.pl:is(#proof,#services,#why,#markets,.pl) :is(.folio__t,.subfolio,.fig__s,.scrollcue){ color:var(--plate-faint); }
main>section.pl:is(#proof,#services,#why,#markets,.pl) .subfolio i{ background:linear-gradient(90deg, rgba(255,255,255,.20), rgba(255,255,255,0)); }
main>section.pl:is(#proof,#services,#why,#markets,.pl) .fig__l{ color:var(--plate-dim); }
main>section.pl:is(#proof,#services,#why,#markets,.pl) .fig__n{
  color:var(--plate-txt);
  background:linear-gradient(178deg,#ffffff 6%, #d6c8ff 58%, #9a7bf0 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
main>section.pl:is(#proof,#services,#why,#markets,.pl) .mkt{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.15); }
main>section.pl:is(#proof,#services,#why,#markets,.pl) .mkt:hover{ background:rgba(255,255,255,.10); }
main>section.pl:is(#proof,#services,#why,#markets,.pl) .mkt__n{ color:var(--plate-txt); }
main>section.pl:is(#proof,#services,#why,#markets,.pl) .arrow{ color:var(--v-300); border-bottom-color:rgba(156,112,248,.40); }
main>section.pl:is(#proof,#services,#why,#markets,.pl) .arrow::after{ color:var(--g-500); }
main>section.pl:is(#proof,#services,#why,#markets,.pl) .btn{
  background:var(--g-500); color:var(--on-gold); border-color:transparent;
  box-shadow:0 10px 34px -12px rgba(255,206,66,.55);
}
main>section.pl:is(#proof,#services,#why,#markets,.pl) .btn:hover{ background:#FFD968; color:var(--on-gold); }

/* ---- the cinema lift is unhooked ---------------------------------------
   40-cinema.css:288 fades and blurs .fig__n from a --lift variable that
   cinema.js computes off the STICKY SEAM position. The stack is gone, so that
   seam never resolves and the four shifts rendered at opacity .2 under a 5px
   blur: "Minutes" and "Generation" were invisible. The motion belonged to the
   stack and leaves with it. */
main>section.pl:is(#proof,#services,#why,#markets,.pl) :is(.fig,.fig__n,.fig__t){ filter:none; transform:none; opacity:1; }
/* Same cause, the hero: 40-cinema.css:262 drives .hero__in opacity from
   --seam, which cinema.js computes off the same retired sticky seam. On a
   390px viewport it settled at 0.05 and the headline, the audience line and
   the CTA were all but invisible; at 1440 it happened to resolve to 1, which
   is exactly how a dead hook hides. Measured at both widths, then pinned. */
main>section.pl--01:is(#proof,#services,#why,#markets,.pl)>.hero__in{ opacity:1; }

/* ---- 01 - HERO, rebuilt to Mia's own reference 2026-09-14 ----------------
   Read off her frame at 4x: a real left gutter rather than type against the
   edge, "Did you?" carried by the violet rather than by grey, TWO buttons of
   equal weight, a three-line claim set small on the right so the frame is not
   left-heavy, and a bar across the foot holding three proofs and the three
   brand marks. Her note on the old build was exact: everything hugged the
   left edge and the ground was flat black. Both are answered here. */
main>section.pl--01:is(#proof,#services,#why,#markets,.pl){
  --col:min(46%, 660px);
  min-height:clamp(620px, 44vw, 900px);
  /* MEASURED: with no explicit column the grid made ONE implicit track sized
     to .wrap's own max-width, 1235.72px, and centred it, so the headline
     started at 102 + 88 = 190px however the gutter was declared. An
     explicit full-width track is the fix. */
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:1fr auto;
  align-items:center; justify-items:stretch;
  padding-block:0;
  /* the ground is no longer black. The plate carries the light, and this sits
     under it so any uncovered pixel is still violet. */
  /* matched to the plate Mia supplied: a violet light in its upper left
     falling to near-black at the foot, so the section ground and the picture
     are the same ramp and the plate's edge has nothing to give it away. */
  /* the same value the plate is filled with, so any pixel the plate does not
     cover at an odd window ratio is indistinguishable from it */
  background:#04010E;
}
/* the veil is much lighter than the story sections: the hero is meant to be
   the brightest frame on the page, not the darkest. */
/* The plate FILLS the hero instead of sitting in it. Measured twice: anchored
   at its natural height the plate's own top row drew a hard horizontal line
   across the frame at y=185, and ramping it into a guessed ground colour only
   moved the line rather than removing it. With top and bottom pinned and the
   image covering, there is no top edge to hide. The crop eats the left of the
   plate, which is the empty half, and the mask feathers what is left. */
/* The plate is now composed for this band exactly: Mia's eagle keyed out of a
   flat green frame and laid over a planet this repo draws (make_hero_plate.py),
   at 2560 x 1100, which is the band's own ratio. So it runs FULL WIDTH with no
   mask: there is no foreign left half to hide any more, and the bird is whole
   at every window height instead of being cropped by a cover fit. */
main>section.pl--01:is(#proof,#services,#why,#markets,.pl)>.pl__art{
  top:0; bottom:0; left:0; right:0; width:100%;
  -webkit-mask-image:none; mask-image:none;
}
main>section.pl--01:is(#proof,#services,#why,#markets,.pl)>.pl__art img{ height:100%; object-fit:cover; object-position:78% 50%; }
main>section.pl--01:is(#proof,#services,#why,#markets,.pl)>.pl__art::after{ background:none; }
main>section.pl--01:is(#proof,#services,#why,#markets,.pl)>.pl__veil{
  background:
    linear-gradient(100deg, rgba(8,3,22,.82) 0%, rgba(8,3,22,.52) 24%, rgba(8,3,22,.12) 40%, rgba(8,3,22,0) 54%),
    linear-gradient(0deg, rgba(8,3,22,.55) 0%, rgba(8,3,22,0) 26%);
}
/* ONE gutter, owned here. Measured first: .wrap was already parking itself at
   x=110 from its own max-width, and my padding stacked on top of that, so the
   headline started at 198px against the reference's 88px. The wrap is made
   full-bleed and the gutter is declared once. */
main>section.pl--01:is(#proof,#services,#why,#markets,.pl)>.hero__in,
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .herobar__in{
  width:100%; max-width:none; margin-inline:0; justify-self:stretch;
  padding-inline:var(--gut);
}
main>section.pl--01:is(#proof,#services,#why,#markets,.pl){ --gut:clamp(22px,6.1vw,92px); }
main>section.pl--01:is(#proof,#services,#why,#markets,.pl)>.hero__in{ grid-row:1; }
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) h1{
  font-size:clamp(42px, 5.2vw, 76px); line-height:1.03; letter-spacing:-.024em;
  max-width:none; margin:0;
}
/* the second line is the brand colour, not a grey echo */
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) h1 .h1dim{
  color:#B98CFF;
  background:linear-gradient(96deg,#C9A4FF 0%, #8B54F7 52%, #C77DFF 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .audience{
  max-width:34ch; font-size:clamp(15px,1.25vw,19px); line-height:1.5;
  margin:clamp(18px,1.8vw,30px) 0 0; color:var(--plate-dim);
}
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .cta-row{
  display:flex; flex-wrap:wrap; gap:clamp(10px,1vw,16px);
  margin-top:clamp(24px,2.6vw,40px);
}
/* THE BUTTON. Colours sampled off the target Mia sent, not invented: the face
   runs #3A1A96 at the lower left through #5A2ECB to #7B4CF0 at the upper
   right, which is why the gradient is diagonal rather than flat violet. The
   two inset lines are what makes it read as a lit object: a white hairline
   along the top edge and a dark one along the bottom. The outer glow is the
   same violet, thrown down and out. */
main>section:is(.pl--01,.pl--05):is(#proof,#services,#why,#markets,.pl) .cta-row .btn{
  position:relative; isolation:isolate; overflow:hidden;
  min-width:clamp(184px,15.8vw,244px);
  justify-content:center;
  padding:clamp(14px,1.2vw,19px) clamp(22px,1.8vw,30px);
  font-size:clamp(14px,1.02vw,16px); font-weight:600; letter-spacing:.005em;
  border:0; border-radius:clamp(13px,1.15vw,17px);
  color:#fff;
  /* MEASURED off her sample rather than eyeballed: across the whole face the
     blue channel sits at 236 to 237 and only red and green move, which is why
     it reads as saturated violet and not as a grey-violet. Top edge runs
     #5E33EC to #8747ED, the bottom-left corner falls to #3E1B98. */
  /* MEASURED off her sample rather than eyeballed: across the whole face the
     blue channel sits at 236 to 237 and only red and green move, which is why
     it reads as saturated violet and not as a grey-violet. */
  background:linear-gradient(112deg, #5130EC 0%, #5A34EC 30%, #6B3DEC 62%, #8747ED 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 18px 44px -16px rgba(110,60,240,.78),
    0 2px 10px -4px rgba(110,60,240,.55);
  transition:transform .18s ease, box-shadow .22s ease, filter .22s ease;
}
/* the sheen: a soft light sitting on the top half of the face, so the button
   has a surface rather than a fill. */
main>section:is(.pl--01,.pl--05):is(#proof,#services,#why,#markets,.pl) .cta-row .btn::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    /* the diagonal specular band, which is what makes her sample look like a
       lit surface rather than a fill. Runs lower-left to upper-right. */
    linear-gradient(115deg,
      rgba(255,255,255,0) 20%, rgba(255,255,255,.055) 34%,
      rgba(255,255,255,.17) 47%, rgba(255,255,255,.05) 60%,
      rgba(255,255,255,0) 74%),
    /* the shade in the lower-left corner */
    radial-gradient(88% 150% at 2% 112%, rgba(30,8,96,.72) 0%, rgba(30,8,96,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 38%);
}
main>section:is(.pl--01,.pl--05):is(#proof,#services,#why,#markets,.pl) .cta-row .btn:hover{
  filter:brightness(1.08); transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 22px 54px -16px rgba(122,72,250,.92),
    0 2px 12px -4px rgba(122,72,250,.6);
}
main>section:is(.pl--01,.pl--05):is(#proof,#services,#why,#markets,.pl) .cta-row .btn:active{ transform:translateY(0); filter:brightness(.97); }
/* the second button is the same object with the light taken out of it: same
   box, same radius, a hairline and a breath of glass instead of the fill. */
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .cta-row .btn--line{
  color:var(--plate-txt);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  backdrop-filter:blur(3px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.34),
    inset 0 1px 0 rgba(255,255,255,.20);
}
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .cta-row .btn--line::after{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 58%); }
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .cta-row .btn--line:hover{
  filter:none; color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.46),
    inset 0 1px 0 rgba(255,255,255,.22),
    0 14px 34px -18px rgba(0,0,0,.8);
}
/* the right-hand claim. Small, quiet, and the reason the frame is not
   left-heavy any more. */
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hero__real{
  position:absolute; z-index:2; margin:0;
  /* the claim is absolute against the SECTION, and the section's second row
     is the strip, so a small bottom offset put two of its three lines under
     the strip. It is pinned above the strip instead, measured against the
     strip's own rendered height. */
  right:var(--gut); bottom:calc(var(--barh,104px) + clamp(18px,2vw,34px)); top:auto; transform:none;
  text-align:right; text-transform:uppercase;
  font-size:clamp(10px,.78vw,12px); letter-spacing:.2em; line-height:2.1;
  color:rgba(242,239,246,.74);
  /* the plate Mia supplied is LIT where this line sits, so the line needs its
     own ground rather than borrowing the picture's. A scrim shaped to the text
     block keeps it legible without putting a box on the image. */
  padding:clamp(10px,1vw,16px) clamp(14px,1.3vw,22px);
  border-radius:clamp(8px,.8vw,12px);
  /* MEASURED: over the lit feather tips 3.56 per cent of this block fell below
     4.5:1, so the scrim was decorative rather than load-bearing. It is now
     opaque at the centre and still has no visible box edge. */
  /* MEASURED trade-off, not a preference: the soft version read cleaner but
     let 5.31 per cent of the block fall under 4.5:1 on the lit feathers. The
     stronger scrim holds legibility at 0.02 per cent and costs a faint edge.
     Legibility wins; the edge is the open item. */
  background:radial-gradient(110% 150% at 62% 50%, rgba(6,2,18,.90) 0%, rgba(6,2,18,.72) 46%, rgba(6,2,18,.28) 76%, rgba(6,2,18,0) 100%);
  backdrop-filter:blur(3px) brightness(.62);
  text-shadow:0 1px 12px rgba(4,1,12,.95), 0 0 3px rgba(4,1,12,.9);
}
/* THE STRIP at the foot of the hero. It was a row of text on a flat panel with
   a hard rule above it. Now it is a band: the rule fades out at both ends
   instead of stopping dead, the ground is a violet glass that is lighter in
   the middle than at the edges, and the dividers between the three proofs are
   short gradient columns rather than full-height lines. */
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .herobar{
  grid-row:2; position:relative; z-index:2; width:100%;
  border-top:0;
  background:
    radial-gradient(120% 320% at 50% 0%, rgba(124,70,245,.16) 0%, rgba(124,70,245,0) 62%),
    linear-gradient(180deg, rgba(10,4,28,.52) 0%, rgba(8,3,22,.80) 100%);
  backdrop-filter:blur(6px) saturate(1.15);
}
/* the hairline, fading at both ends */
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .herobar::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%, rgba(190,155,255,.42) 22%,
    rgba(255,255,255,.55) 50%, rgba(190,155,255,.42) 78%, rgba(255,255,255,0) 100%);
}
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .herobar__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px,3vw,56px); flex-wrap:wrap;
  padding-block:clamp(16px,1.6vw,26px);
}
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hstats{
  display:flex; align-items:flex-start; gap:clamp(18px,2.4vw,44px);
  list-style:none; margin:0; padding:0; flex-wrap:wrap;
}
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hstats li{
  position:relative;
  display:grid; grid-template-columns:auto auto; column-gap:.5em;
  align-items:baseline; padding-left:clamp(18px,2.4vw,44px);
}
/* the divider is a short column that fades out top and bottom, so the strip
   reads as one band rather than a table */
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hstats li::before{
  content:""; position:absolute; left:0; top:6%; bottom:6%; width:1px;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(190,155,255,.34) 45%, rgba(255,255,255,0));
}
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hstats li:first-child{ padding-left:0; }
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hstats li:first-child::before{ display:none; }
/* the figure carries the violet, the label carries the meaning */
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hstats b{
  font-size:clamp(17px,1.32vw,21px); font-weight:600; letter-spacing:-.01em;
  color:#CBB2FF;
  background:linear-gradient(96deg,#EDE4FF 0%, #B98CFF 60%, #8B54F7 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hstats span{ font-size:clamp(13px,1vw,16px); color:rgba(242,239,246,.88); }
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hstats em{
  grid-column:1 / -1; font-style:normal; margin-top:4px;
  font-size:clamp(10px,.76vw,12px); letter-spacing:.01em;
  color:rgba(242,239,246,.48);
}
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hmarks{
  display:flex; align-items:center; gap:clamp(20px,2.6vw,46px);
  list-style:none; margin:0; padding:0;
}
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hmarks li{
  display:flex; align-items:center; justify-content:center;
  transition:filter .22s ease, opacity .22s ease;
}
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hmarks li:hover{ filter:drop-shadow(0 0 14px rgba(150,100,250,.55)); }
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hmark{ display:block; width:auto; opacity:.94; }
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hmark--ss{ height:clamp(17px,1.5vw,23px); }
/* the KnightSlots mark ships with a near-black wordmark, which is invisible on
   ink. Inverting it is the same treatment 50-light.css already gives the
   conference logos, so it is the house move, not a new one. */
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hmark--ks{ height:clamp(15px,1.35vw,21px); filter:invert(1) brightness(1.6); }
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hmark--caf{ height:clamp(26px,2.4vw,34px); filter:saturate(.85) brightness(1.06); }
main>section.pl--01:is(#proof,#services,#why,#markets,.pl)>.scrollcue{ display:none; }

/* ---- 02 - COMMODITY -----------------------------------------------------
   A wall of identical dashboards from 0.40 out. The four shifts fold into a
   2 x 2 block inside the column instead of a row across the monitors. */
main>section.pl--02:is(#proof,#services,#why,#markets,.pl){ --col:min(46%, 760px); }
main>section.pl--02:is(#proof,#services,#why,#markets,.pl) .figures{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(18px,2vw,34px) clamp(24px,2.6vw,44px);
  margin-top:clamp(34px,3.6vw,58px);
}
main>section.pl--02:is(#proof,#services,#why,#markets,.pl) .fig{ border-top:1px solid rgba(255,255,255,.14); padding-top:14px; }

/* Mia's frame, 2026-09-14 (1672 x 941). The four shifts now live ON the
   monitors inside the picture, so on desktop the plate fills the whole
   section, the headline sits over its dark left third, and the HTML figures
   stay in the page for screen readers and search but are not drawn twice. */
main>section.pl--02:is(#proof,#services,#why,#markets,.pl) .figures{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap; margin:0;
}

/* ---- 02 to 05 · MIA'S FRAMES (2026-09-14) -------------------------------
   Every story section now runs on a frame Mia made herself, with her own
   type baked out of it and rebuilt here as live text. One construction for
   all four: the plate fills the whole section, the copy sits over its dark
   left third, line breaks follow her layout exactly. The old per-section
   furniture (the $1 IN flow, the two loops, the rebuild claim) is not in
   her frames, so it left the page with them. Only the plate height differs:
   02 to 04 are 1672 x 941, 05 is 1774 x 887. */
main>section:is(.pl--02,.pl--03,.pl--04,.pl--05):is(#proof,#services,#why,#markets,.pl){
  --plate-h:56.28vw; --col:min(50%, 820px);
  min-height:var(--plate-h);
  display:flex; flex-direction:column; justify-content:center; align-items:stretch;
  padding-block:clamp(40px,4vw,72px);
}
/* where Mia's own layout puts the headline, as a share of the frame height,
   read off her files: 03 starts at 0.18, 05 at 0.14 */
main>section.pl--03:is(#proof,#services,#why,#markets,.pl){ justify-content:flex-start; padding-top:calc(var(--plate-h) * .16); }
main>section.pl--05:is(#proof,#services,#why,#markets,.pl){ --plate-h:50vw; justify-content:flex-start; padding-top:calc(var(--plate-h) * .12); }
main>section:is(.pl--02,.pl--03,.pl--04,.pl--05):is(#proof,#services,#why,#markets,.pl)>.pl__art{ top:0; }
main>section:is(.pl--02,.pl--03,.pl--04,.pl--05):is(#proof,#services,#why,#markets,.pl)>.pl__art img{ height:100%; object-fit:cover; object-position:50% 50%; }
main>section:is(.pl--02,.pl--03,.pl--04,.pl--05):is(#proof,#services,#why,#markets,.pl)>.pl__veil{
  background:linear-gradient(96deg,
    rgba(5,1,15,.70) 0%, rgba(5,1,15,.45) 24%, rgba(5,1,15,.10) 38%, rgba(5,1,15,0) 46%);
}
main>section:is(.pl--02,.pl--03,.pl--04,.pl--05):is(#proof,#services,#why,#markets,.pl) h2{
  font-size:clamp(40px,3.7vw,68px); line-height:1.04; letter-spacing:-.02em; max-width:none; white-space:nowrap;
}
main>section:is(.pl--02,.pl--03,.pl--04,.pl--05):is(#proof,#services,#why,#markets,.pl) h2 .h2acc{
  color:#B98CFF;
  background:linear-gradient(96deg,#C9A4FF 0%, #8B54F7 52%, #C77DFF 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
main>section.pl--02:is(#proof,#services,#why,#markets,.pl) h2 .h2acc{ display:block; }
main>section:is(.pl--02,.pl--03,.pl--04,.pl--05):is(#proof,#services,#why,#markets,.pl) .ed__lede{
  font-size:clamp(15px,1.25vw,21px); line-height:1.5;
}
main>section.pl--05:is(#proof,#services,#why,#markets,.pl) .ed__cta{ margin-top:clamp(24px,2.4vw,40px); }

/* ==========================================================================
   PHONE. A plate read through a veil at 390px loses the face, and the face is
   the only thing the plate is for. So below 760px the plate stops being a
   ground and becomes a still above the copy, uncropped, on ink.
   ========================================================================= */
@media (max-width:760px){
  main>section.pl:is(#proof,#services,#why,#markets,.pl){ display:block; padding-block:0 clamp(56px,10vw,76px); --col:100%; min-height:0; }
  /* A 2.36:1 plate shown whole at 390px puts the man 30px wide and the story
     is gone. So on the phone the still is re-framed to 4:3 and cropped around
     the subject, whose horizontal position in each plate was read off the
     approved file: hero 0.62, commodity 0.55, cost 0.60, street 0.50,
     summit 0.72. */
  main>section.pl:is(#proof,#services,#why,#markets,.pl)>.pl__art{
    position:relative; inset:auto; margin:0 0 clamp(26px,6vw,38px);
    aspect-ratio:4/3; overflow:hidden;
  }
  main>section.pl:is(#proof,#services,#why,#markets,.pl)>.pl__art img{ height:100%; object-fit:cover; object-position:var(--op,50% 50%); }
  main>section.pl--01:is(#proof,#services,#why,#markets,.pl){ --op:62% 50%; }
  main>section:is(.pl--02,.pl--03,.pl--04,.pl--05):is(#proof,#services,#why,#markets,.pl){ display:block; min-height:0; padding-block:0 clamp(56px,10vw,76px); }
  main>section:is(.pl--02,.pl--03,.pl--04,.pl--05):is(#proof,#services,#why,#markets,.pl) h2{ font-size:clamp(28px,7.8vw,40px); white-space:normal; }
  main>section.pl--02:is(#proof,#services,#why,#markets,.pl){ --op:96% 50%; }
  main>section:is(.pl--02,.pl--03,.pl--04,.pl--05):is(#proof,#services,#why,#markets,.pl) .ed__lede br{ display:none; }
  /* on the phone the monitor type is too small to read, so the figures come back */
  main>section.pl--02:is(#proof,#services,#why,#markets,.pl) .figures{
    position:static; width:auto; height:auto; overflow:visible; clip:auto; clip-path:none;
    white-space:normal; margin-top:clamp(28px,7vw,40px);
  }
  main>section.pl--03:is(#proof,#services,#why,#markets,.pl){ --op:72% 50%; }
  main>section.pl--04:is(#proof,#services,#why,#markets,.pl){ --op:84% 50%; }
  main>section.pl--05:is(#proof,#services,#why,#markets,.pl){ --op:92% 50%; padding-top:0; }
  main>section.pl:is(#proof,#services,#why,#markets,.pl)>.pl__art::after{
    background:linear-gradient(180deg, var(--plate-ink) 0%, rgba(5,1,15,0) 18%,
                                       rgba(5,1,15,0) 76%, var(--plate-ink) 100%);
  }
  main>section.pl:is(#proof,#services,#why,#markets,.pl)>.pl__veil{ display:none; }
  main>section.pl--01:is(#proof,#services,#why,#markets,.pl){ padding-top:clamp(78px,20vw,110px); }
  main>section.pl--01:is(#proof,#services,#why,#markets,.pl) h1{ font-size:clamp(34px,9vw,46px); max-width:14ch; }
  main>section.pl--01:is(#proof,#services,#why,#markets,.pl)>.scrollcue{ display:none; }
  main>section.pl--01:is(#proof,#services,#why,#markets,.pl){ display:block; --gut:clamp(20px,5.4vw,28px); min-height:0; padding-top:clamp(56px,14vw,78px); }
  /* the still sits on the hero's OWN violet ground here, so its ramp has to
     fade into that and not into the story sections' near-black. */
  main>section.pl--01:is(#proof,#services,#why,#markets,.pl)>.pl__art::after{
    background:linear-gradient(180deg, #1B0A39 0%, rgba(27,10,57,0) 16%,
                                       rgba(16,6,42,0) 80%, #10062A 100%);
  }
  main>section.pl--01:is(#proof,#services,#why,#markets,.pl)>.pl__art{ width:100%; -webkit-mask-image:none; mask-image:none; }
  main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hero__real{
    position:static; transform:none; text-align:left; margin:clamp(22px,6vw,30px) 0 0;
    padding-inline:var(--gut); line-height:1.9;
  }
  main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .cta-row .btn{ min-width:0; flex:1 1 46%; }
  main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .herobar{ margin-top:clamp(26px,7vw,36px); }
  main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .herobar__in{ flex-direction:column; align-items:flex-start; gap:clamp(16px,4vw,22px); }
  main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hstats{ flex-direction:column; gap:clamp(12px,3vw,16px); }
  main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hstats li{ padding-left:0; border-left:0; }
  main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hmarks{ gap:clamp(18px,5vw,26px); }
  main>section.pl--05:is(#proof,#services,#why,#markets,.pl){ padding-bottom:clamp(56px,10vw,76px); }
}

/* ==========================================================================
   06 · LEARN WITH US. OR EARN WITH US.  Mia's layout, 2026-09-15.
   Three offers side by side on the dark ground: Intelligence (free), the
   Affiliate Programme (three brands) and the Partner Platform (in
   development). Built as live UI, not a picture: only the illustrations are
   images, lifted from her frame with the baked type and the AI-drawn brand
   logos removed; the real brand marks sit on top. Scoped by id + class so it
   outranks the paper styling 50-light.css gives #recognition.
   ========================================================================= */
main>section#recognition.lx{
  --lx-ink:#F2EFF6; --lx-dim:rgba(242,239,246,.74); --lx-line:rgba(160,130,255,.16);
  background:
    radial-gradient(70% 55% at 50% -10%, rgba(88,40,190,.34) 0%, rgba(88,40,190,0) 70%),
    linear-gradient(180deg, #0D0624 0%, #080318 100%);
  color:var(--lx-ink); box-shadow:none;
  padding-block:clamp(72px,7vw,120px) clamp(72px,7vw,120px);
}
main>section#recognition.lx .wrap{ max-width:1560px; }
main>section#recognition.lx .lx__h{
  margin:0 auto clamp(40px,4.4vw,76px); text-align:center; color:var(--lx-ink);
  font-size:clamp(34px,3.7vw,64px); line-height:1.08; letter-spacing:-.02em; font-weight:600;
}
main>section#recognition.lx .lx__acc{
  background:linear-gradient(96deg,#E4CCFF 0%, #B98CFF 55%, #9A6BF5 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
main>section#recognition.lx .lx__cols{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
}
main>section#recognition.lx .lx__col{
  display:flex; flex-direction:column; min-width:0;
  padding-inline:clamp(18px,2vw,34px);
}
main>section#recognition.lx .lx__col+.lx__col{ border-left:1px solid var(--lx-line); }
main>section#recognition.lx .lx__t{
  margin:0; color:var(--lx-ink); font-size:clamp(22px,2.1vw,36px); font-weight:500; letter-spacing:-.01em; line-height:1.15;
}
main>section#recognition.lx .lx__s{ margin:.4em 0 clamp(16px,1.4vw,24px); color:var(--lx-dim); font-size:clamp(14px,1.2vw,20px); }

/* the object in each column fills the space; the button always sits at the same height */
main>section#recognition.lx .lx__panel,
main>section#recognition.lx .lx__tiles,
main>section#recognition.lx .lx__pp{ flex:1 1 auto; }

/* ---- Intelligence ---- */
main>section#recognition.lx .lx__panel{
  display:flex; flex-direction:column; gap:10px; padding:10px;
  border:1px solid rgba(150,130,255,.26); border-radius:18px;
  background:linear-gradient(180deg, rgba(40,26,96,.35), rgba(20,12,52,.25));
}
main>section#recognition.lx .lx__search{
  display:flex; align-items:center; gap:12px; padding:0 16px; height:clamp(40px,2.9vw,48px);
  border:1px solid rgba(150,130,255,.30); border-radius:12px; background:rgba(8,4,24,.55); color:var(--lx-dim);
}
main>section#recognition.lx .lx__search svg{ width:20px; height:20px; flex:0 0 auto; }
main>section#recognition.lx .lx__search input{
  all:unset; flex:1; min-width:0; color:var(--lx-ink); font-size:clamp(14px,1.05vw,17px);
}
main>section#recognition.lx .lx__search input::placeholder{ color:var(--lx-dim); opacity:1; }
main>section#recognition.lx .lx__card{
  position:relative; display:block; overflow:hidden; border-radius:12px; flex:1 1 0; min-height:clamp(120px,10.5vw,176px);
  border:1px solid rgba(150,130,255,.22); color:#fff; text-decoration:none; isolation:isolate;
}
main>section#recognition.lx .lx__card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .5s ease; }
main>section#recognition.lx .lx__card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(8,4,26,.78) 0%, rgba(8,4,26,.42) 42%, rgba(8,4,26,0) 70%);
}
main>section#recognition.lx .lx__card:hover img{ transform:scale(1.04); }
main>section#recognition.lx .lx__card-txt{ position:absolute; left:clamp(14px,1.3vw,22px); bottom:clamp(10px,1vw,16px); display:flex; flex-direction:column; gap:6px; }
main>section#recognition.lx .lx__card-t{ font-size:clamp(16px,1.45vw,24px); line-height:1.12; font-weight:500; }
main>section#recognition.lx .lx__card-k{ font-size:clamp(10px,.78vw,13px); letter-spacing:.26em; text-transform:uppercase; color:rgba(242,239,246,.78); }
main>section#recognition.lx .lx__chev{ position:absolute; right:clamp(14px,1.4vw,24px); top:50%; width:12px; height:20px; transform:translateY(-50%); color:#fff; }

/* ---- Affiliate Programme ---- */
main>section#recognition.lx .lx__tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
main>section#recognition.lx .lx__tile{
  position:relative; display:block; overflow:hidden; border-radius:14px; min-height:clamp(260px,24vw,400px);
  border:1px solid rgba(255,255,255,.12);
}
main>section#recognition.lx .lx__tile-art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
main>section#recognition.lx .lx__tile:hover .lx__tile-art{ transform:scale(1.05); }
main>section#recognition.lx .lx__tile-mark{
  position:absolute; left:50%; top:9%; transform:translateX(-50%); width:78%; height:auto; max-height:22%; object-fit:contain;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.55));
}
main>section#recognition.lx .lx__tile-mark--ss{ width:88%; }
main>section#recognition.lx .lx__tile-mark--ks{ width:92%; filter:invert(1) brightness(1.7) drop-shadow(0 4px 14px rgba(0,0,0,.55)); top:10%; }
main>section#recognition.lx .lx__tile-mark--caf{ width:90%; top:5%; max-height:28%; }

/* ---- Partner Platform ---- */
main>section#recognition.lx .lx__pp{
  display:flex; flex-direction:column; gap:clamp(10px,1vw,16px);
  padding:clamp(16px,1.6vw,28px); border-radius:18px;
  border:1px solid rgba(140,160,255,.62);
  background:
    radial-gradient(90% 70% at 0% 100%, rgba(40,80,255,.55) 0%, rgba(40,80,255,0) 60%),
    radial-gradient(70% 60% at 100% 0%, rgba(120,60,255,.45) 0%, rgba(120,60,255,0) 65%),
    linear-gradient(160deg, #10197A 0%, #0B1160 45%, #1B0E6E 100%);
  box-shadow:0 0 0 1px rgba(90,110,255,.18), 0 30px 70px -30px rgba(60,80,255,.75), inset 0 1px 0 rgba(255,255,255,.18);
}
main>section#recognition.lx .lx__pp-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
main>section#recognition.lx .lx__pp-top b{ font-weight:500; font-size:clamp(15px,1.22vw,22px); color:#fff; white-space:nowrap; }
main>section#recognition.lx .lx__pill{
  flex:0 0 auto; padding:6px 14px; border-radius:10px; font-size:clamp(11px,.85vw,14px); color:#fff;
  border:1px solid rgba(200,170,255,.55); background:rgba(40,20,110,.55);
}
main>section#recognition.lx .lx__tabs{ display:flex; gap:clamp(20px,2.8vw,48px); margin:0; padding-inline:12px; font-size:clamp(13px,1vw,17px); color:rgba(230,232,255,.86); }
main>section#recognition.lx .lx__tabs span{ padding-bottom:10px; border-bottom:3px solid transparent; }
main>section#recognition.lx .lx__tabs .is-on{ color:#D9A8FF; font-weight:600; border-bottom-color:#C77DFF; }
main>section#recognition.lx .lx__pp-body{
  display:flex; flex-direction:column; gap:12px; padding:12px; margin-top:-2px;
  border-radius:14px; border:1px solid rgba(140,160,255,.30); background:rgba(14,22,110,.45);
}
main>section#recognition.lx .lx__row{
  display:flex; align-items:center; gap:clamp(10px,1vw,18px); padding:clamp(12px,1.1vw,18px) clamp(12px,1.2vw,20px);
  border-radius:12px; border:1px solid rgba(150,170,255,.38); background:rgba(40,60,190,.35); color:#fff;
  font-size:clamp(12px,.95vw,16px);
}
main>section#recognition.lx .lx__row>svg{ width:clamp(22px,1.8vw,28px); height:auto; flex:0 0 auto; }
main>section#recognition.lx .lx__row>span{ flex:1; min-width:0; }
main>section#recognition.lx .lx__row .lx__row-go{ width:10px; }
main>section#recognition.lx .lx__link{ display:flex; flex-direction:column; gap:10px; }
main>section#recognition.lx .lx__link code{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:inherit; font-size:clamp(11px,.85vw,14px); padding:8px 12px; border-radius:8px;
  border:1px solid rgba(150,170,255,.40); background:rgba(10,16,80,.6); color:rgba(235,238,255,.92);
}
main>section#recognition.lx .lx__pp-foot{ margin:auto 0 0; display:flex; justify-content:center; gap:10px; color:rgba(230,232,255,.86); font-size:clamp(13px,1.05vw,17px); }
main>section#recognition.lx .lx__pp-foot i{ font-style:normal; opacity:.6; }

/* ---- buttons: the hero's lit violet, and a hairline sibling for the one not yet open ---- */
main>section#recognition.lx .lx__btn{
  position:relative; align-self:stretch; display:flex; align-items:center; justify-content:center; gap:12px;
  margin:clamp(20px,2vw,32px) clamp(0px,2vw,30px) 0; padding:clamp(15px,1.3vw,21px) 24px; border-radius:clamp(13px,1.15vw,17px);
  font-size:clamp(15px,1.25vw,21px); font-weight:500; color:#fff; text-decoration:none;
  background:linear-gradient(112deg, #5130EC 0%, #5A34EC 30%, #6B3DEC 62%, #8747ED 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.28), 0 18px 44px -16px rgba(110,60,240,.78);
  transition:transform .18s ease, filter .22s ease;
}
main>section#recognition.lx .lx__btn i{ font-style:normal; }
main>section#recognition.lx .lx__btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
main>section#recognition.lx .lx__btn--line{
  background:transparent; box-shadow:none;
  border:2px solid transparent;
  background:linear-gradient(#0A041C,#0A041C) padding-box, linear-gradient(100deg,#8B54F7,#D46BF0) border-box;
}

@media (max-width:1100px){
  main>section#recognition.lx .lx__cols{ grid-template-columns:1fr; gap:clamp(44px,8vw,64px); }
  main>section#recognition.lx .lx__col{ padding-inline:0; }
  main>section#recognition.lx .lx__col+.lx__col{ border-left:0; border-top:1px solid var(--lx-line); padding-top:clamp(36px,7vw,52px); }
  main>section#recognition.lx .lx__btn{ margin-inline:0; }
  main>section#recognition.lx .lx__tile{ min-height:clamp(240px,62vw,420px); }
}

/* ==========================================================================
   08 · THE FAIR SKY BRIEFING.  Mia's frame, 2026-09-15 (2171 x 724, 3:1).
   The one light section: eagle on the left, lavender sky and mountains, the
   copy and the sign-up form sit in the open sky exactly where her layout puts
   them (copy from 0.214 of the width, form from 0.632). The picture carries
   no type; everything readable is live. The form keeps its id and field
   names, so whatever wires it later wires it unchanged.
   ========================================================================= */
main>section#contact.bf{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:33.35vw; padding:0; display:flex; align-items:center; border-radius:0;
  background:#E7E1FA; box-shadow:none; color:#150D4A;
}
main>section#contact.bf>.bf__art{ position:absolute; inset:0; z-index:-1; line-height:0; }
main>section#contact.bf>.bf__art img{ width:100%; height:100%; object-fit:cover; object-position:0% 50%; }
main>section#contact.bf .bf__in{
  width:100%; display:grid; grid-template-columns:minmax(0,1fr) 33.6vw; align-items:center;
  column-gap:2vw; padding:4vw 3.4vw 4vw 21.4vw;
}
main>section#contact.bf .bf__kick{
  margin:0 0 1.1vw; font-size:clamp(11px,1.12vw,24px); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#322C5C;
}
main>section#contact.bf h2{
  margin:0; color:#150D4A; font-size:clamp(28px,2.84vw,72px); font-weight:700; letter-spacing:-.025em; line-height:1.08;
  white-space:nowrap;
}
main>section#contact.bf .bf__lede{
  margin:1.4vw 0 0; color:#3F3A6E; font-size:clamp(15px,1.32vw,32px); line-height:1.45; white-space:nowrap;
}
main>section#contact.bf .bf__form{
  display:grid; grid-template-columns:minmax(0,1fr) 15vw; gap:.7vw; margin:0; align-self:center;
}
main>section#contact.bf .bf__sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
main>section#contact.bf .bf__form input{
  all:unset; box-sizing:border-box; height:clamp(46px,3.9vw,76px); padding:0 1.3vw; border-radius:clamp(8px,.6vw,12px);
  background:#fff; color:#150D4A; font-size:clamp(15px,1.12vw,22px);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 30px -18px rgba(40,20,120,.45);
}
main>section#contact.bf .bf__form input::placeholder{ color:#7A769E; opacity:1; }
main>section#contact.bf .bf__form input:focus-visible{ outline:2px solid #6B3DEC; outline-offset:2px; }
main>section#contact.bf .bf__form button{
  all:unset; box-sizing:border-box; cursor:pointer; height:clamp(46px,3.9vw,76px);
  display:flex; align-items:center; justify-content:center; gap:1.4vw; padding:0 1.2vw;
  border-radius:clamp(8px,.6vw,12px); color:#fff; font-size:clamp(15px,1.25vw,24px); font-weight:500;
  background:linear-gradient(112deg, #5130EC 0%, #5A34EC 30%, #6B3DEC 62%, #8747ED 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.20), 0 16px 40px -18px rgba(90,50,230,.85);
  transition:filter .2s ease, transform .18s ease;
}
main>section#contact.bf .bf__form button:hover{ filter:brightness(1.08); transform:translateY(-1px); }
main>section#contact.bf .bf__form button:focus-visible{ outline:2px solid #150D4A; outline-offset:2px; }
main>section#contact.bf .bf__form button i{ font-style:normal; }
main>section#contact.bf .bf__note{ grid-column:1 / -1; margin:.3vw 0 0 .3vw; color:#26204F; font-size:clamp(13px,.95vw,18px); }

@media (max-width:760px){
  main>section#contact.bf{ display:block; min-height:0; background:#E7E1FA; }
  main>section#contact.bf>.bf__art{ position:relative; inset:auto; aspect-ratio:16/10; overflow:hidden; }
  main>section#contact.bf>.bf__art img{ object-position:8% 55%; }
  main>section#contact.bf>.bf__art::after{
    content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(231,225,250,0) 60%, #E7E1FA 100%);
  }
  main>section#contact.bf .bf__in{ grid-template-columns:1fr; row-gap:26px; padding:8px 20px 56px; }
  main>section#contact.bf .bf__kick{ margin-bottom:12px; }
  main>section#contact.bf .bf__lede{ margin-top:14px; }
  main>section#contact.bf .bf__lede br{ display:none; }
  main>section#contact.bf .bf__lede{ white-space:normal; }
  main>section#contact.bf h2{ white-space:normal; font-size:clamp(28px,7.6vw,38px); }
  main>section#contact.bf .bf__form{ grid-template-columns:1fr; gap:10px; }
  main>section#contact.bf .bf__form input,
  main>section#contact.bf .bf__form input::placeholder{ font-size:16px; }
  main>section#contact.bf .bf__form input{ padding:0 16px; }
  main>section#contact.bf .bf__form button{ gap:14px; }
  main>section#contact.bf .bf__note{ margin:4px 0 0 2px; }
}

/* ==========================================================================
   07 · AWARDS AND CONFERENCES.  Mia's layout, 2026-09-15. The brands, the
   partner-account bar and the markets list left this section (they now live
   in "Learn with us" or nowhere); what stays is the proof. Awards as two
   white cards, conferences as four columns: the organiser's mark above a
   photograph. The photographs are OUR OWN from SBC Summit Lisbon 2025,
   upscaled 2x, each keeping its truthful caption as alt text.
   ========================================================================= */
main>section#partners.ac{
  --ac-ink:#150D4A; --ac-dim:#6C6891; --ac-violet:#4B3F8C;
  background:#F3F0FB; color:var(--ac-ink);
  padding-block:clamp(64px,6vw,110px) clamp(72px,7vw,120px);
}
main>section#partners.ac .wrap{ max-width:1600px; }
main>section#partners.ac .ac__h{
  margin:0 0 clamp(28px,3vw,52px); color:var(--ac-ink);
  font-size:clamp(34px,3.9vw,72px); font-weight:500; letter-spacing:-.03em; line-height:1.05;
}
main>section#partners.ac .ac__label{
  display:flex; align-items:center; gap:18px; margin:0 0 clamp(18px,1.8vw,28px);
  font-size:clamp(11px,.9vw,15px); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ac-violet);
}
main>section#partners.ac .ac__label i{ flex:1; height:1px; background:rgba(75,63,140,.22); }
main>section#partners.ac .awards{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,34px);
  margin:0 0 clamp(36px,3.6vw,60px); padding:0; list-style:none;
}
main>section#partners.ac .award{
  display:flex; align-items:center; gap:clamp(16px,1.6vw,28px); margin:0;
  padding:clamp(16px,1.7vw,28px); border-radius:18px; border:1px solid rgba(75,63,140,.08);
  background:#fff; box-shadow:0 18px 44px -26px rgba(40,24,110,.35), 0 2px 6px rgba(40,24,110,.05);
}
main>section#partners.ac .edaw__badge{ flex:0 0 clamp(120px,12vw,200px); line-height:0; }
main>section#partners.ac .edaw__badge img{ width:100%; height:auto; border-radius:6px; display:block; }
main>section#partners.ac .edaw__txt{ display:flex; flex-direction:column; gap:clamp(8px,.8vw,14px); min-width:0; }
main>section#partners.ac .edaw__name{ color:var(--ac-ink); font-size:clamp(17px,1.5vw,26px); font-weight:500; letter-spacing:-.01em; }
main>section#partners.ac .edaw__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; color:var(--ac-dim); font-size:clamp(13px,1.08vw,18px); }
main>section#partners.ac .edtag,
main>section#partners.ac .edtag--win{
  margin:0; padding:.5em 1.1em; border-radius:999px; border:0;
  background:#ECE7FB; color:#3B2F7A; font-size:clamp(11px,.92vw,16px); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
main>section#partners.ac .ac__confs{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.1vw,18px);
  margin:0; padding:0; list-style:none;
}
main>section#partners.ac .ac__confs li{ display:flex; flex-direction:column; align-items:center; gap:clamp(14px,1.4vw,24px); }
main>section#partners.ac .ac__logo{ height:clamp(46px,4.3vw,76px); display:flex; align-items:center; justify-content:center; }
main>section#partners.ac .ac__logo img{
  height:62%; width:auto; max-width:78%;
  filter:brightness(0) saturate(100%) invert(8%) sepia(40%) saturate(3800%) hue-rotate(238deg) brightness(70%);
}
main>section#partners.ac .ac__logo img.ac__logo--sigma{ height:100%; }
main>section#partners.ac .ac__photo{
  width:100%; aspect-ratio:388/318; height:auto; object-fit:cover; object-position:var(--op,50% 50%);
  border-radius:16px; box-shadow:0 20px 44px -26px rgba(40,24,110,.45);
}

@media (max-width:900px){
  main>section#partners.ac .awards{ grid-template-columns:1fr; }
  main>section#partners.ac .ac__confs{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:28px; }
}
@media (max-width:520px){
  main>section#partners.ac .award{ flex-direction:column; align-items:flex-start; }
  main>section#partners.ac .edaw__badge{ flex-basis:auto; width:160px; }
}

/* ==========================================================================
   01 · HERO ARRIVAL, 2026-09-15. Mia's note: the old still read as an eagle
   that had taken offence, head tilted away. So the hero now ARRIVES: the bird
   leaves the planet, crosses the empty space, lands on the right and locks
   eyes with the viewer. The clip's last frame IS 01-hero-stare.jpg, which is
   also the poster and the permanent still, so the motion resolves into the
   page instead of cutting to a different picture. Plays once per session,
   never on a phone, never under prefers-reduced-motion (script in index.html).
   ========================================================================= */
main>section.pl--01:is(#proof,#services,#why,#markets,.pl)>.pl__art .hero__vid{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover; object-position:64% 50%;
}
main>section.pl--01:is(#proof,#services,#why,#markets,.pl)>.pl__art img{ object-position:64% 50%; }

/* the copy holds back until the bird is in frame, then fades up */
@keyframes heroCopyIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
body.hero-arriving main>section.pl--01:is(#proof,#services,#why,#markets,.pl)>.wrap{
  animation:heroCopyIn 800ms cubic-bezier(.22,.61,.36,1) 1700ms both;
}
body.hero-arriving main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .ticker{
  animation:heroCopyIn 800ms cubic-bezier(.22,.61,.36,1) 2400ms both;
}
@media (max-width:760px){
  main>section.pl--01:is(#proof,#services,#why,#markets,.pl)>.pl__art .hero__vid{ display:none; }
}

/* ==========================================================================
   SECTION TRANSITIONS, five variants, 2026-09-15. Mia: "каждый кадр говорит
   историю, листать так неинтересно". The engine (inline in each tr*.html)
   writes two numbers on every section, --in (0 as it enters the viewport, 1
   when it is seated) and --out (0 seated, 1 gone), plus --seam on <body> for
   the splice pulse. Nothing here animates on a timer: every value is a pure
   function of scroll position, so the motion is under Mia's finger.
   Variant is chosen by a body class, tr-1 .. tr-5.
   ========================================================================= */
main>section{ --in:1; --out:0; }
body:is(.tr-1,.tr-2,.tr-3,.tr-4,.tr-5) main>section{ will-change:transform, opacity, filter; }
@media (prefers-reduced-motion:reduce){
  body:is(.tr-1,.tr-2,.tr-3,.tr-4,.tr-5) main>section{ transform:none !important; opacity:1 !important; filter:none !important; clip-path:none !important; }
}

/* ---- T1 · DISSOLVE. The film dissolve: the frame you are leaving fades
   under the one arriving, and both drift a little, so the cut is a blend. */
body.tr-1 main>section{
  opacity:calc(min(1, var(--in) * 2.2) * (1 - min(1, var(--out) * 1.6)));
  transform:translate3d(0, calc((1 - var(--in)) * 42px - var(--out) * 42px), 0);
}

/* ---- T2 · DOLLY. The camera pushes through the frame: the outgoing plate
   grows and softens as if we passed it, the incoming one settles from a
   slight over-scale. */
body.tr-2 main>section{
  transform:scale(calc(1 + var(--out) * .10 + (1 - var(--in)) * .045));
  filter:blur(calc(var(--out) * 7px)) brightness(calc(1 - var(--out) * .45));
  opacity:calc(1 - var(--out) * .35);
}

/* ---- T3 · SHUTTER. The plate opens like an iris: the picture is revealed
   from a letterbox slit to the full frame, and closes as it leaves. */
body.tr-3 main>section>.pl__art,
body.tr-3 main>section>.bf__art{
  clip-path:inset(calc((1 - min(1, var(--in) * 1.35)) * 46%) 0 calc((1 - min(1, var(--in) * 1.35)) * 46%) 0);
}
body.tr-3 main>section>:is(.wrap,.hero__in,.bf__in){
  opacity:calc(min(1, max(0, (var(--in) - .45) * 3)));
  transform:translate3d(0, calc((1 - min(1, var(--in))) * 26px), 0);
}

/* ---- T4 · DEPTH. No cut at all: the picture pans slower than the words, so
   the page reads as one long camera move with layers at different depths. */
body.tr-4 main>section>.pl__art img,
body.tr-4 main>section>.bf__art img{
  transform:translate3d(0, calc((var(--in) - .5) * -7%), 0) scale(1.09);
}
body.tr-4 main>section>:is(.wrap,.hero__in,.bf__in){
  transform:translate3d(0, calc((1 - var(--in)) * 60px - var(--out) * 60px), 0);
  opacity:calc(min(1, var(--in) * 1.6) * (1 - var(--out) * .8));
}

/* ---- T5 · SPLICE. A hard film cut: a one-frame flash of light and a grain
   bump on the seam, the way two shots are joined on real stock. */
body.tr-5 main>section{ transform:translate3d(0, calc(var(--out) * -26px), 0); }
body.tr-5::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:var(--seam, 0);
  background:
    radial-gradient(120% 70% at 50% 50%, rgba(226,206,255,.55) 0%, rgba(160,110,255,.20) 45%, rgba(5,1,15,0) 75%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,0) 1px 3px);
  mix-blend-mode:screen;
}

/* ---- T6 · PINNED STAGE, the capital.com mechanic, MEASURED 2026-09-15 -----
   Read off their live page, not from memory: no GSAP, no Lenis, no AOS, no
   scroll-snap, only 13 elements with a real scroll-linked keyframe. What
   carries their page is STICKY PANELS: blocks 760 to 900px tall pinned inside
   parents of 3057, 4050 and 7335px, so a frame HOLDS on screen for several
   screens while its content advances, and the next frame climbs over it.
   The selectors below carry the same id weight as the rest of this sheet,
   because the plate sections are grid and flex there and a 2-class selector
   loses to them (measured: the stage stayed static until this was fixed). */
body.tr-6 main>section.pl:not(.pl--01):is(#proof,#services,#why,#markets,.pl){
  display:block; height:190vh; min-height:0; padding-block:0;
  /* MEASURED trap: overflow:hidden on the parent makes it a scroll container and
     kills sticky on the child. The clipping moves to the stage instead. */
  overflow:visible;
}
body.tr-6 main>section.pl:not(.pl--01):is(#proof,#services,#why,#markets,.pl)>.stage{
  position:sticky; top:0; height:100vh; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(40px,4vw,72px);
}
body.tr-6 main>section.pl:not(.pl--01):is(#proof,#services,#why,#markets,.pl)>.stage>.pl__art{ position:absolute; inset:0; }
body.tr-6 main>section.pl:not(.pl--01):is(#proof,#services,#why,#markets,.pl)>.stage>.pl__art :is(img,video){
  width:100%; height:100%; object-fit:cover;
  transform:scale(calc(1.02 + var(--hold, 0) * .07));
}
body.tr-6 main>section.pl:not(.pl--01):is(#proof,#services,#why,#markets,.pl)>.stage>:is(.wrap,.hero__in){
  opacity:calc(min(1, max(0, (var(--hold, 0) + .15) * 4)) * (1 - max(0, (var(--hold, 0) - .80) * 5)));
  transform:translate3d(0, calc((1 - min(1, (var(--hold,0) + .18) * 4)) * 46px - max(0, var(--hold,0) - .82) * 80px), 0);
}
body.tr-6 main>section.pl--01:is(#proof,#services,#why,#markets,.pl)>.stage>.ticker{ position:absolute; left:0; right:0; bottom:0; }
@media (max-width:760px){
  body.tr-6 main>section.pl:not(.pl--01):is(#proof,#services,#why,#markets,.pl){ display:block; height:auto; }
  body.tr-6 main>section.pl:not(.pl--01):is(#proof,#services,#why,#markets,.pl)>.stage{ position:static; height:auto; padding-block:0 clamp(56px,10vw,76px); }
  body.tr-6 main>section.pl:not(.pl--01):is(#proof,#services,#why,#markets,.pl)>.stage>:is(.wrap,.hero__in){ opacity:1; transform:none; }
  body.tr-6 main>section.pl:not(.pl--01):is(#proof,#services,#why,#markets,.pl)>.stage>.pl__art :is(img,video){ transform:none; }
}

/* ==========================================================================
   LOOM FIXES, 2026-09-15. Mia recorded five problems; each block names its own.
   ========================================================================= */

/* (1) The bird flies at once. The video is invisible until a frame is really moving, and the
   landed still is held back while it arrives, so there is never a frozen far-away launch frame
   on screen. If the clip is dropped (index.html script) the still simply shows. */
main>section.pl--01:is(#proof,#services,#why,#markets,.pl)>.pl__art .hero__vid{ opacity:1; }
body.hero-arriving main>section.pl--01:is(#proof,#services,#why,#markets,.pl)>.wrap{ animation-delay:900ms; }
body.hero-arriving main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .ticker{ animation-delay:1300ms; }

/* (2) No space under the facts line. The hero is exactly one scene tall on desktop, so the
   ticker sits on the bottom edge of the screen and nothing of the next scene peeks under it. */
@media (min-width:761px){
  main>section.pl--01:is(#proof,#services,#why,#markets,.pl){ min-height:0; height:calc(100vh - 64px); }
  @supports (height:100svh){
    main>section.pl--01:is(#proof,#services,#why,#markets,.pl){ height:calc(100svh - 64px); }
  }
}
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .ticker{ padding-block:clamp(14px,1.4vw,22px) clamp(10px,1vw,16px); }
/* the hero copy leaves before it can reach the header as the first scene scrolls away */
@media (min-width:761px){
  body.tr-6 main>section.pl--01:is(#proof,#services,#why,#markets,.pl)>.hero__in{
    opacity:calc(1 - min(1, var(--out, 0) * 7)); transition:none;
  }
}
@media (max-width:760px){
  main>section.pl--01:is(#proof,#services,#why,#markets,.pl){ padding-bottom:0; }
}

/* (3)+(4) Copy never rides under the header. The pinned stage centres its copy in the room
   BELOW the floating header, and a scene's copy stays hidden while its frame is still climbing
   over the previous one (--in below 1), so no line of text travels behind the header. */
body.tr-6 main>section.pl:not(.pl--01):is(#proof,#services,#why,#markets,.pl)>.stage{
  padding-top:calc(var(--under-hdr, 88px) + clamp(12px,2vw,32px));
}
body.tr-6 main>section.pl:not(.pl--01):is(#proof,#services,#why,#markets,.pl)>.stage>:is(.wrap,.hero__in){
  opacity:calc(min(1, max(0, (var(--in, 1) - .92) * 12.5)) * min(1, max(0, (var(--hold, 0) + .15) * 4)) * (1 - max(0, (var(--hold, 0) - .80) * 5)));
}
@media (max-width:760px){
  body.tr-6 main>section.pl:not(.pl--01):is(#proof,#services,#why,#markets,.pl)>.stage{ padding-top:0; }
  body.tr-6 main>section.pl:not(.pl--01):is(#proof,#services,#why,#markets,.pl)>.stage>:is(.wrap,.hero__in){ opacity:1; }
}

/* (5) No black band between Awards and the Briefing. The fading variants (T1, T2, T5) dimmed
   and shifted EVERY section, so the light Awards and Briefing sections turned see-through over
   the black page ground and the hero pulled up off its ticker. The film transition belongs to
   the picture scenes only; light sections and the hero stay solid. */
body:is(.tr-1,.tr-2,.tr-5) main>section:not(.pl),
body:is(.tr-1,.tr-2,.tr-5) main>section.pl--01{ opacity:1 !important; transform:none !important; filter:none !important; }

/* ==========================================================================
   SCREEN OVER SCREEN, 2026-09-15 (body.stack). Mia: "c6 очень плавно переходит мои секции,
   также должны переходить и в этой новой версии". So this is c6's own mechanic, not a new one:
   33-stack.css pins each section as an opaque sheet and the next one rides up over it with a
   rounded lip and an upward shadow, native scroll, no wheel handling. c10 had retired it (line 38
   of this file); it is restored here for desktop, and every sheet is exactly ONE SCREEN tall so a
   finished transition shows one whole section and nothing else (her screenshots 3 and 4).
   stack-pin.js (c6, unchanged) keeps each sheet's pin offset right.
   ========================================================================= */
@media (min-width:861px){
  body.stack{ --room-top:calc(64px + 24px); }
  body.stack main>section:not(.pl--01):is(#proof,#services,#why,#markets,#recognition,#partners){
    position:sticky; top:0; height:100vh; min-height:0; overflow:hidden; isolation:isolate;
    border-radius:clamp(26px,2.7vw,46px) clamp(26px,2.7vw,46px) 0 0;
    box-shadow:0 -30px 66px rgba(0,0,0,.62), 0 -2px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.11);
    transform:none; opacity:1; filter:none;
  }
  @supports (height:100svh){
    body.stack main>section:not(.pl--01):is(#proof,#services,#why,#markets,#recognition,#partners){ height:100svh; }
  }
  body.stack main>section#proof{ z-index:1; }
  body.stack main>section#services{ z-index:2; }
  body.stack main>section#why{ z-index:3; }
  body.stack main>section#markets{ z-index:4; }
  body.stack main>section#recognition{ z-index:5; }
  body.stack main>section#partners{ z-index:6; }
  body.stack main>section#contact.bf{ position:relative; z-index:7; top:auto; }
  body.stack .foot{ position:relative; z-index:8; }

  /* picture sheets: copy centred in the room below the floating header */
  body.stack main>section.pl:not(.pl--01):is(#proof,#services,#why,#markets,.pl){
    display:flex; flex-direction:column; justify-content:center;
    padding-block:var(--room-top) 4vh;
  }
  body.stack main>section.pl:not(.pl--01):is(#proof,#services,#why,#markets,.pl)>.pl__art{ top:0; bottom:0; height:auto; }
  body.stack main>section.pl:not(.pl--01):is(#proof,#services,#why,#markets,.pl)>.pl__art img{ width:100%; height:100%; object-fit:cover; }

  /* 03: the heading sits in the dark wall ABOVE the laptop, never across it (screenshot 1).
     The plate is anchored top-left, so the laptop's top edge stays below ~47% of the screen,
     and the four lines are sized to end before it. */
  body.stack main>section.pl.pl--03:not(.pl--01):is(#proof,#services,#why,#markets,.pl){ justify-content:flex-start; padding-top:calc(var(--room-top) + 4vh); }
  body.stack main>section.pl.pl--03:not(.pl--01):is(#proof,#services,#why,#markets,.pl)>.pl__art img{ object-position:0% 0%; }
  body.stack main>section.pl.pl--03:not(.pl--01):is(#proof,#services,#why,#markets,.pl) h2{ font-size:min(clamp(28px,3.6vw,64px), 6.2vh); line-height:1.04; }
  body.stack main>section.pl.pl--03:not(.pl--01):is(#proof,#services,#why,#markets,.pl)>.wrap{ flex:0 0 auto; margin-block:0; padding-block:0; height:auto; min-height:0; }
  body.stack main>section.pl.pl--03:not(.pl--01):is(#proof,#services,#why,#markets,.pl) .ed__head{ margin:0; padding:0; }

  /* Awards and Conferences: sized to the screen height so the whole section fits under the header */
  body.stack main>section#partners.ac .ac__h{ font-size:min(clamp(34px,3.6vw,64px), 6vh); margin-bottom:2.2vh; }
  body.stack main>section#partners.ac .ac__label{ margin-block:1.6vh 1.4vh; }
  body.stack main>section#partners.ac .award{ padding-block:min(22px, 2.2vh); }
  body.stack main>section#partners.ac .ac__confs{ row-gap:1vh; }
  body.stack main>section#partners.ac .ac__logo{ height:min(56px, 6vh); margin-bottom:1.2vh; }
  body.stack main>section#partners.ac .ac__photo{ aspect-ratio:auto; height:min(28vh, 318px); }

  /* 05: the man and the eagle stand at the right edge of the plate, so the crop takes only
     the empty left sky (screenshot 2). */
  body.stack main>section.pl--05:is(#proof,#services,#why,#markets,.pl)>.pl__art img{ object-position:100% 80%; }

  /* light sheets: content centred in the room below the header, and scaled to the screen height */
  body.stack main>section#recognition.lx,
  body.stack main>section#partners.ac{
    display:flex; flex-direction:column; justify-content:center;
    padding-block:var(--room-top) 3vh;
  }
  body.stack main>section#recognition.lx>.wrap,
  body.stack main>section#partners.ac>.wrap{ width:100%; }
}

/* ==========================================================================
   SPEED, 2026-09-15. Mia: "сайт в целом тормозит". Measured on the shoot box by switching one
   layer off at a time while scrolling (Chromium: 56 frames over 33ms with everything on, 11 with
   everything off; WebKit frame rate doubled with the sheet shadows off). Culprits, each replaced
   by a look-alike the browser can composite instead of repainting every frame:
   1 the frosted-glass header (26px blur + saturate re-rendered over moving pictures);
   2 the 66px blurred shadows cast by every sheet onto the one beneath;
   3 the fade mask on the moving facts line;
   4 fixed-attachment backgrounds.
   ========================================================================= */
body.stack .hdr,
body:has(.hero).stack .hdr[data-stuck="1"]{
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
body:has(.hero).stack .hdr[data-stuck="1"]{
  background-color:rgba(13,7,28,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px -14px rgba(0,0,0,.8);
}
body.stack *{ background-attachment:scroll !important; }
@media (min-width:861px){
  body.stack main>section:not(.pl--01):is(#proof,#services,#why,#markets,#recognition,#partners){
    box-shadow:inset 0 1px 0 rgba(255,255,255,.11);
    will-change:transform;
  }
}
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .ticker{
  -webkit-mask-image:none !important; mask-image:none !important;
}
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .ticker__track{ will-change:transform; }
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .ticker::before,
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .ticker::after{
  content:""; position:absolute; top:0; bottom:0; width:7%; z-index:3; pointer-events:none;
}
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .ticker::before{ left:0; background:linear-gradient(90deg, #05010F, rgba(5,1,15,0)); }
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .ticker::after{ right:0; background:linear-gradient(270deg, #05010F, rgba(5,1,15,0)); }

/* ==========================================================================
   TYPE SYSTEM, capital.com's, 2026-09-15. Measured on their live page: every heading is ONE
   weight (400) of their display face, set tight (line-height 0.9, tracking -2%), and everything
   else is the system SF Pro at 400. Their display face is Geigy by Lineto, a commercial font
   whose licence forbids use without Lineto's consent, so the display face here stays Switzer,
   the free neo-grotesque of the same lineage already self-hosted by c6 (51-type.css). What is
   copied is the SYSTEM: one weight, tight leading, the same tracking, SF Pro for text.
   ========================================================================= */
body.stack main :is(h1, h2, h3),
body.stack main>section#recognition.lx :is(.lx__h, .lx__t),
body.stack main>section#partners.ac :is(.ac__h, .edaw__name),
body.stack main>section#contact.bf h2{
  font-family:var(--font-display); font-weight:400; letter-spacing:-.02em;
}
body.stack main :is(h1, h2),
body.stack main>section#recognition.lx .lx__h,
body.stack main>section#partners.ac .ac__h,
body.stack main>section#contact.bf h2{ line-height:.95; }
body.stack main :is(h3),
body.stack main>section#recognition.lx .lx__t,
body.stack main>section#partners.ac .edaw__name{ line-height:1.02; }
body.stack main>section#recognition.lx .lx__card-t{ font-weight:400; }
body.stack main h1{ letter-spacing:-.024em; line-height:1.03; }   /* the hero's two-line break is designed at this width */
body.stack :is(main, .foot) :is(p, li, a:not(.brandmark), button, input, label){
  font-family:var(--font-text);
}
body.stack main :is(.btn, .lx__btn, .bf__form button){ font-weight:500; letter-spacing:0; }

/* ==========================================================================
   HERO WITHOUT A CLIP, 2026-09-15. Mia: slow connections must never wait or stall. One JPEG,
   two ~23KB glow layers cut to the same frame (so they sit on the eyes and the rim light under
   any crop), and motion made only of transform and opacity:
   0.0 to 1.8s  the frame settles from a slight push-in, out of the dark
   1.1s         the eyes flare, then keep a slow burn every 4.5s
   always       the planet's rim light breathes; the eagle follows the cursor a few pixels
   ========================================================================= */
main>section.pl--01:is(#proof,#services,#why,#markets,.pl)>.pl__art{ overflow:hidden; }
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hero__cam{
  position:absolute; inset:-12px; will-change:transform;
  transform:translate3d(var(--px,0px), var(--py,0px), 0);
}
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hero__cam>img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:64% 50%; display:block;
}
main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hero__glow{ opacity:0; pointer-events:none; }
@keyframes heroSettle{ from{ transform:scale(1.07); filter:brightness(.35); } to{ transform:none; filter:none; } }
@keyframes heroEyes{
  0%{ opacity:0; } 6%{ opacity:1; } 16%{ opacity:.34; }
  55%{ opacity:.55; } 70%{ opacity:.3; } 100%{ opacity:.34; }
}
@keyframes heroEyesBurn{ 0%,100%{ opacity:.34; } 50%{ opacity:.62; } }
@keyframes heroFlare{ 0%,100%{ opacity:.25; } 50%{ opacity:.7; } }
@media (prefers-reduced-motion:no-preference){
  main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hero__cam>img:first-child{
    animation:heroSettle 1.8s cubic-bezier(.16,.84,.3,1) both;
  }
  main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hero__glow--eyes{
    animation:heroEyes 2.6s ease-out 1.1s both, heroEyesBurn 4.5s ease-in-out 3.7s infinite;
  }
  main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hero__glow--flare{
    animation:heroFlare 6s ease-in-out .6s infinite;
  }
}
@media (prefers-reduced-motion:reduce){
  main>section.pl--01:is(#proof,#services,#why,#markets,.pl) .hero__glow--eyes{ opacity:.34; }
}

/* 03: Mia's screenshot, the burning money at the right edge was cropped away. The crop now takes
   the empty left wall instead; the heading already sits above the laptop, so nothing collides. */
@media (min-width:861px){
  body.stack main>section.pl.pl--03:not(.pl--01):is(#proof,#services,#why,#markets,.pl)>.pl__art img{ object-position:100% 0%; }
}

/* ==========================================================================
   PAGE: INTELLIGENCE (intelligence.html, body.page-intel), 2026-09-15, v2.
   Layout after Mia's reference, soft2bet.com/news, measured on the live page: a big centred
   title, a pill filter, then ONE editorial column of rows, picture 16:9 on the left with a
   category tag, headline on the right, an arrow top right, the date small bottom right, hairline
   between rows. Carried in Fair Sky's approved language: violet light, the paper sheet used for
   Awards, capital.com's type system, the Briefing band with the eagle.
   ========================================================================= */
body.page-intel{ background:#05010F; }
body.page-intel .nwrap{ width:100%; max-width:1080px; margin-inline:auto; padding-inline:clamp(20px,4vw,48px); }

/* ---- N1 title + filter (dark) ---- */
body.page-intel .nhead{
  position:relative; isolation:isolate; overflow:hidden; text-align:center; color:#F2EFF6;
  padding:calc(64px + clamp(28px,4.5vh,52px)) 0 clamp(40px,5vh,56px);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(98,46,210,.38) 0%, rgba(98,46,210,0) 70%),
    linear-gradient(180deg,#0A0322 0%,#05010F 100%);
}
body.page-intel .nhead__glow{
  position:absolute; left:50%; top:-30vmax; width:70vmax; height:70vmax; margin-left:-35vmax; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(150,95,255,.30), rgba(120,60,240,.08) 60%, rgba(0,0,0,0) 75%);
  animation:nOrb 14s ease-in-out infinite; will-change:transform;
}
@keyframes nOrb{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
body.page-intel .nkick{ margin:0 0 8px; font-size:clamp(11px,.9vw,14px); font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#B98CFF; }
body.page-intel .nhead h1{
  margin:0; font-size:clamp(40px,4.4vw,68px); line-height:1.08; padding-bottom:.06em; letter-spacing:-.025em;
  background:linear-gradient(96deg,#EDE1FF 0%, #B98CFF 50%, #8B54F7 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
body.page-intel .nsub{ margin:clamp(6px,1vh,10px) auto 0; font-size:clamp(14px,1.05vw,17px); color:rgba(242,239,246,.74); max-width:48ch; }
body.page-intel .nfilter{
  display:inline-flex; flex-wrap:wrap; justify-content:center; gap:2px; margin-top:clamp(16px,2.4vh,26px);
  padding:4px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(160,130,255,.26);
}
body.page-intel .nfilter button{
  all:unset; cursor:pointer; padding:7px clamp(10px,.9vw,14px); border-radius:999px;
  font-size:clamp(11px,.75vw,12px); font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:rgba(242,239,246,.72);
  transition:background .2s ease, color .2s ease;
}
body.page-intel .nfilter button:hover{ color:#fff; background:rgba(160,130,255,.12); }
body.page-intel .nfilter button.is-on{ color:#fff; background:linear-gradient(112deg,#5130EC,#8747ED); box-shadow:0 8px 22px -10px rgba(110,60,240,.8); }
body.page-intel .nfilter button:focus-visible{ outline:2px solid #B98CFF; outline-offset:2px; }

/* ---- N2 feed (paper) ---- */
body.page-intel .nfeed{
  position:relative; background:#F3F0FB; color:#150D4A;
  border-radius:clamp(22px,2vw,34px) clamp(22px,2vw,34px) 0 0; margin-top:-22px;
  padding:clamp(16px,2.4vh,28px) 0 clamp(40px,6vh,72px);
}
body.page-intel .nlist{ list-style:none; margin:0; padding:0; }
body.page-intel .nrow{ border-bottom:1px solid rgba(21,13,74,.12); }
body.page-intel .nrow[hidden]{ display:none; }
body.page-intel .nrow__a{
  display:grid; grid-template-columns:clamp(180px,20vw,260px) minmax(0,1fr) auto; grid-template-rows:1fr auto;
  column-gap:clamp(16px,2vw,28px); padding:clamp(12px,1.3vw,18px) 0; color:inherit; text-decoration:none;
}
body.page-intel .nimg{
  grid-row:1 / span 2; position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border-radius:10px;
  background:#0B0520; box-shadow:0 18px 40px -26px rgba(40,24,110,.55);
}
body.page-intel .nimg img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
body.page-intel .nimg--badge{ background:radial-gradient(80% 90% at 50% 40%, #2A1760 0%, #0B0520 80%); }
body.page-intel .nimg--badge img{ object-fit:contain; padding:16% 20%; }
body.page-intel .nbadge{
  position:absolute; left:8px; top:8px; padding:3px 7px; border-radius:5px;
  font-size:9px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#fff;
  background:linear-gradient(112deg,#5130EC,#8747ED);
}
body.page-intel .nrow__t{
  grid-column:2; align-self:start; font-family:var(--font-display); font-weight:400;
  font-size:clamp(16px,1.25vw,20px); line-height:1.22; letter-spacing:-.01em; color:#150D4A;
  transition:color .2s ease;
}
body.page-intel .nrow__go{ grid-column:3; grid-row:1; align-self:start; font-size:16px; line-height:1; color:#6B3DEC; transition:transform .25s ease; }
body.page-intel .nrow__d{ grid-column:2 / span 2; grid-row:2; justify-self:end; align-self:end; margin-top:8px; font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:#8E89AE; }
body.page-intel .nrow__d--soon{ color:#6B3DEC; }
body.page-intel .nrow__a:hover .nimg img{ transform:scale(1.04); }
body.page-intel .nrow__a:hover .nrow__t{ color:#5130EC; }
body.page-intel .nrow__a:hover .nrow__go{ transform:translate(3px,-3px); }
body.page-intel .nrow__a:focus-visible{ outline:2px solid #6B3DEC; outline-offset:6px; border-radius:14px; }
body.page-intel .nempty{ margin:clamp(24px,4vh,48px) 0 0; text-align:center; font-size:17px; color:#5F5A86; }
body.page-intel .nempty a{ color:#5130EC; }

/* the Briefing band keeps its home-page styling; the footer follows it */
body.page-intel main>section#contact.bf{ position:relative; z-index:1; }
body.page-intel main>section#contact.bf .bf__lede{ white-space:normal; max-width:36ch; }
body.page-intel main>section#contact.bf .bf__lede br{ display:none; }

@media (max-width:760px){
  body.page-intel .nfilter{ border-radius:18px; }
  body.page-intel .nrow__a{ grid-template-columns:1fr auto; grid-template-rows:auto auto auto; }
  body.page-intel .nimg{ grid-row:1; grid-column:1 / span 2; margin-bottom:16px; }
  body.page-intel .nrow__t{ grid-column:1; grid-row:2; }
  body.page-intel .nrow__go{ grid-column:2; grid-row:2; }
  body.page-intel .nrow__d{ grid-column:1 / span 2; grid-row:3; justify-self:start; }
}
@media (prefers-reduced-motion:reduce){ body.page-intel .nhead__glow{ animation:none; } }

/* ==========================================================================
   PAGE: AFFILIATE PROGRAMME (affiliate-programme.html, body.page-aff), 2026-09-15.
   Built to Mia's own mock (ChatGPT Image Sep 15 2026 10_45_27 PM): hero with the eagle over a
   night city, 3 brand tiles, the commercial models on paper with glass cards, 3 steps, FAQ, and an
   apply band over dark mountains. Compact spacing, as she asked on the Intelligence page.
   ========================================================================= */
body.page-aff{ background:#05010F; color:#F2EFF6; }
body.page-aff .awrap{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:clamp(20px,4vw,48px); }
body.page-aff .aacc{
  background:linear-gradient(96deg,#D9BFFF 0%, #B98CFF 50%, #9A6BF5 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
body.page-aff .akick{ margin:0 0 10px; font-size:clamp(11px,.8vw,13px); font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:#B98CFF; }
body.page-aff .akick--ink{ color:#6B3DEC; }
body.page-aff main h2{ margin:0; font-size:clamp(30px,3vw,48px); line-height:1.02; letter-spacing:-.02em; }
body.page-aff .alede{ margin:14px 0 0; font-size:clamp(16px,1.2vw,19px); line-height:1.45; color:rgba(242,239,246,.86); }
body.page-aff .abtn{
  display:inline-flex; align-items:center; justify-content:center; padding:13px 24px; border-radius:12px;
  font-size:15px; font-weight:500; color:#fff; text-decoration:none; white-space:nowrap;
  background:linear-gradient(112deg,#5130EC 0%,#6B3DEC 62%,#8747ED 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 14px 34px -16px rgba(110,60,240,.85);
  transition:transform .18s ease, filter .2s ease;
}
body.page-aff .abtn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
body.page-aff .abtn--line{ background:rgba(10,4,28,.55); border:1px solid rgba(255,255,255,.28); box-shadow:none; }
body.page-aff .asec{ position:relative; padding-block:clamp(44px,6vh,72px); }

/* ---- A1 hero ---- */
body.page-aff .ahero{
  position:relative; isolation:isolate; overflow:hidden; min-height:min(640px, 78svh);
  display:flex; align-items:center; padding:calc(64px + 32px) 0 44px; background:#05010F;
}
body.page-aff .ahero__art{ position:absolute; inset:0; z-index:-2; }
body.page-aff .ahero__art img{ width:100%; height:100%; object-fit:cover; object-position:70% 40%; display:block;
  animation:aSettle 1.8s cubic-bezier(.16,.84,.3,1) both; }
@keyframes aSettle{ from{ transform:scale(1.06); opacity:.4; } to{ transform:none; opacity:1; } }
body.page-aff .ahero__veil{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(5,1,15,.88) 0%, rgba(5,1,15,.55) 34%, rgba(5,1,15,0) 58%), linear-gradient(0deg, rgba(5,1,15,.8) 0%, rgba(5,1,15,0) 30%); }
body.page-aff .ahero h1{ margin:0; font-size:clamp(44px,5vw,80px); line-height:.98; letter-spacing:-.025em; }
body.page-aff .acta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
body.page-aff .amodels{ display:flex; align-items:center; gap:14px; margin:clamp(28px,5vh,56px) 0 0; font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:rgba(242,239,246,.8); }
body.page-aff .amodels i{ width:4px; height:4px; border-radius:50%; background:#B98CFF; }
body.page-aff .ahero__tag{ position:absolute; right:clamp(20px,4vw,64px); bottom:28px; margin:0; text-align:right; font-size:11px; line-height:1.7; letter-spacing:.22em; text-transform:uppercase; color:rgba(242,239,246,.78); }

/* ---- A2 brands ---- */
body.page-aff .abrands{ background:linear-gradient(180deg,#07021A 0%,#05010F 100%); }
body.page-aff .atiles{ list-style:none; margin:clamp(20px,3vh,32px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px); }
body.page-aff .atile a{ position:relative; display:block; aspect-ratio:4/4.6; overflow:hidden; border-radius:16px; color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.14); }
body.page-aff .atile--ss a{ border-color:rgba(255,170,60,.55); } body.page-aff .atile--ks a{ border-color:rgba(255,70,60,.5); } body.page-aff .atile--caf a{ border-color:rgba(60,220,200,.5); }
body.page-aff .atile__art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 62%; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
body.page-aff .atile a::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 62%, rgba(0,0,0,.55) 100%); }
body.page-aff .atile__mark{ position:absolute; z-index:1; left:50%; top:clamp(16px,2vw,28px); transform:translateX(-50%); width:auto; max-width:72%; }
body.page-aff .atile__mark--ss{ height:clamp(28px,2.6vw,42px); } body.page-aff .atile__mark--ks{ height:clamp(22px,2vw,32px); filter:invert(1) brightness(1.6); } body.page-aff .atile__mark--caf{ height:clamp(52px,5vw,82px); }
body.page-aff .atile__go{ position:absolute; z-index:1; left:0; right:0; bottom:clamp(14px,1.6vw,22px); text-align:center; font-size:15px; }
body.page-aff .atile__go i{ font-style:normal; display:inline-block; transition:transform .2s ease; }
body.page-aff .atile a:hover .atile__art{ transform:scale(1.05); }
body.page-aff .atile a:hover .atile__go i{ transform:translateX(4px); }

/* ---- A3 commercial models (paper) ---- */
body.page-aff .amodel{
  color:#150D4A; border-radius:clamp(22px,2vw,34px) clamp(22px,2vw,34px) 0 0;
  background:radial-gradient(60% 70% at 85% 20%, rgba(185,150,255,.28), rgba(185,150,255,0) 70%), #F1EDFB;
}
body.page-aff .amodel h2{ color:#150D4A; font-size:clamp(36px,4vw,64px); }
body.page-aff .acards{ list-style:none; margin:clamp(20px,3vh,32px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px); }
body.page-aff .acard{
  padding:clamp(20px,2vw,30px); border-radius:18px; min-height:clamp(170px,19vw,230px);
  background:linear-gradient(160deg, rgba(255,255,255,.92), rgba(240,234,255,.7));
  border:1px solid rgba(140,100,255,.35); box-shadow:0 18px 40px -26px rgba(80,50,200,.5), inset 0 1px 0 #fff;
  transition:transform .25s ease, box-shadow .25s ease;
}
body.page-aff .acard:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -26px rgba(80,50,200,.6), inset 0 1px 0 #fff; }
body.page-aff .acard__k{ margin:0 0 12px; font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#6B3DEC; }
body.page-aff .acard h3{ margin:0; font-size:clamp(30px,3vw,46px); line-height:.98; letter-spacing:-.025em; color:#150D4A; font-weight:500; }
body.page-aff .acard p:last-child{ margin:14px 0 0; font-size:clamp(15px,1.1vw,18px); line-height:1.4; color:#2A2455; }
body.page-aff .adeal{ display:flex; align-items:center; gap:18px; margin:clamp(22px,3vh,32px) 0 12px; font-size:16px; color:#2A2455; }
body.page-aff .adeal::before, body.page-aff .adeal::after{ content:""; flex:1; height:1px; background:rgba(21,13,74,.18); }
body.page-aff .adeal__cta{ margin:0; text-align:center; }
body.page-aff .aperks{ list-style:none; margin:clamp(20px,3vh,28px) 0 0; padding:14px 0 0; border-top:1px solid rgba(21,13,74,.14);
  display:grid; grid-template-columns:repeat(3,1fr); text-align:center; font-size:15px; color:#150D4A; }
body.page-aff .aperks li+li{ border-left:1px solid rgba(21,13,74,.18); }

/* ---- A4 steps ---- */
body.page-aff .asteps{ background:#05010F; border-top:1px solid rgba(160,130,255,.12); }
body.page-aff .astep__list{ list-style:none; margin:clamp(20px,3vh,30px) 0 0; padding:0; display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:clamp(10px,1.6vw,24px); }
body.page-aff .astep{ display:flex; align-items:center; gap:16px; }
body.page-aff .astep__n{ flex:0 0 auto; width:clamp(48px,4vw,58px); height:clamp(48px,4vw,58px); border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-display); font-size:clamp(18px,1.5vw,22px); color:#F2EFF6; border:1.5px solid rgba(160,110,255,.7); box-shadow:0 0 22px -6px rgba(140,90,255,.6) inset; }
body.page-aff .astep h3{ margin:0; font-size:clamp(17px,1.3vw,20px); color:#F2EFF6; }
body.page-aff .astep p{ margin:4px 0 0; font-size:14px; line-height:1.4; color:rgba(242,239,246,.7); }
body.page-aff .astep__arrow{ color:rgba(185,140,255,.8); font-size:20px; }

/* ---- A5 FAQ ---- */
body.page-aff .afaq{ background:#05010F; border-top:1px solid rgba(160,130,255,.12); }
body.page-aff .afaq__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
body.page-aff .afaq__more{ margin:0; font-size:14px; color:rgba(242,239,246,.8); }
body.page-aff .afaq__more a{ color:#B98CFF; }
body.page-aff .afaq__list{ margin-top:clamp(16px,2.4vh,24px); display:grid; gap:8px; }
body.page-aff .afaq__q{ border:1px solid rgba(160,130,255,.22); border-radius:10px; background:rgba(255,255,255,.025); }
body.page-aff .afaq__q summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:13px 18px; font-size:15px; color:#F2EFF6; }
body.page-aff .afaq__q summary::-webkit-details-marker{ display:none; }
body.page-aff .afaq__q summary::after{ content:"+"; font-size:22px; line-height:1; color:#D9C3FF; transition:transform .25s ease; }
body.page-aff .afaq__q[open] summary::after{ transform:rotate(45deg); }
body.page-aff .afaq__q p{ margin:0; padding:0 18px 16px; font-size:15px; line-height:1.55; color:rgba(242,239,246,.76); max-width:80ch; }

/* ---- A6 apply band ---- */
body.page-aff .aapply{ position:relative; isolation:isolate; overflow:hidden; padding-block:clamp(44px,7vh,76px); }
body.page-aff .aapply__art{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(8,3,26,.92) 0%, rgba(8,3,26,.6) 45%, rgba(8,3,26,.55) 100%), url("plates/08-briefing@2x.jpg") 100% 62% / 150% auto no-repeat, #120733; }
body.page-aff .aapply__art::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(60,20,150,.45), rgba(20,6,50,.25)); mix-blend-mode:multiply; }
body.page-aff .aapply__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:clamp(28px,5vw,80px); align-items:center; }
body.page-aff .aapply h2{ font-size:clamp(34px,3.6vw,56px); }
body.page-aff .aform{ display:grid; gap:6px; padding:clamp(18px,1.8vw,26px); border-radius:16px;
  background:rgba(10,4,30,.78); border:1px solid rgba(160,130,255,.35); box-shadow:0 30px 60px -30px rgba(0,0,0,.8); }
body.page-aff .aform label{ font-size:13px; color:#F2EFF6; margin-top:6px; }
body.page-aff .aform input{ all:unset; box-sizing:border-box; height:40px; padding:0 12px; border-radius:8px; font-size:15px; color:#F2EFF6;
  background:rgba(255,255,255,.05); border:1px solid rgba(160,130,255,.3); }
body.page-aff .aform input::placeholder{ color:rgba(242,239,246,.45); }
body.page-aff .aform input:focus-visible{ outline:2px solid #8B54F7; outline-offset:1px; }
body.page-aff .aform button{ all:unset; box-sizing:border-box; cursor:pointer; margin-top:14px; height:44px; border-radius:10px; text-align:center; font-size:15px; font-weight:500; color:#fff;
  background:linear-gradient(112deg,#5130EC,#8747ED); box-shadow:0 12px 30px -14px rgba(110,60,240,.9); }
body.page-aff .aform button:disabled{ opacity:.6; cursor:default; }
body.page-aff .aform__ok{ margin:8px 0 0; font-size:14px; color:#C8F5D9; }

/* ---- narrow ---- */
@media (max-width:860px){
  body.page-aff .ahero{ min-height:0; padding-top:calc(64px + 40px); }
  body.page-aff .ahero__art img{ object-position:78% 50%; }
  body.page-aff .ahero__veil{ background:linear-gradient(0deg, rgba(5,1,15,.95) 0%, rgba(5,1,15,.55) 60%, rgba(5,1,15,.35) 100%); }
  body.page-aff .ahero__tag{ display:none; }
  body.page-aff .atiles, body.page-aff .acards{ grid-template-columns:1fr; }
  body.page-aff .atile a{ aspect-ratio:16/10; }
  body.page-aff .aperks{ grid-template-columns:1fr; gap:10px; }
  body.page-aff .aperks li+li{ border-left:0; }
  body.page-aff .astep__list{ grid-template-columns:1fr; }
  body.page-aff .astep__arrow{ display:none; }
  body.page-aff .afaq__head{ flex-direction:column; align-items:flex-start; }
  body.page-aff .aapply__in{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ body.page-aff .ahero__art img{ animation:none; } }

/* affiliate: the models block is the page's loudest moment in Mia's mock (bold, large), so it
   overrides the one-weight type system on purpose, and the id weight beats body.stack main h3 */
body.page-aff main section#models h2{ font-size:clamp(40px,4.6vw,72px); font-weight:600; letter-spacing:-.03em; }
body.page-aff main section#models .acard h3{ font-size:clamp(34px,3.4vw,56px); font-weight:700; line-height:.95; letter-spacing:-.03em; }
body.page-aff main section#models .acard p:last-child{ font-size:clamp(16px,1.3vw,20px); }
body.page-aff main section#models .acard__k{ font-size:12px; }
body.page-aff main section#models .adeal{ font-size:17px; }
body.page-aff main section#models .aperks{ font-size:16px; }
body.page-aff .atile__mark--ks{ height:clamp(28px,2.6vw,40px); }
body.page-aff .aapply__art{ background-size:120% auto; background-position:100% 70%; }

/* affiliate, Mia 2026-09-15 23:00: every section after the hero fits ONE screen on desktop,
   and the apply band shows the eagle. Sizes are capped by the screen height, not only width. */
@media (min-width:861px) and (min-height:600px){
  body.page-aff .asec, body.page-aff .aapply{
    min-height:100svh; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center;
    padding-block:calc(64px + 20px) 3vh;
  }
  /* brands: tiles take what is left of the screen under the heading */
  body.page-aff .atiles{ margin-top:2.4vh; }
  body.page-aff .atile a{ aspect-ratio:auto; height:calc(100svh - 64px - 20px - 3vh - 150px); max-height:560px; }
  /* models */
  body.page-aff main section#models h2{ font-size:min(clamp(40px,4.6vw,72px), 8vh); }
  body.page-aff main section#models .acards{ margin-top:2.4vh; }
  body.page-aff main section#models .acard{ min-height:0; padding:min(26px,3vh) clamp(20px,2vw,30px); }
  body.page-aff main section#models .acard h3{ font-size:min(clamp(34px,3.4vw,56px), 6.4vh); }
  body.page-aff main section#models .adeal{ margin:2.4vh 0 1.2vh; }
  body.page-aff main section#models .aperks{ margin-top:2.2vh; padding-top:1.4vh; }
  /* steps and FAQ share one screen: steps on top, questions under them */
  body.page-aff .asteps{ min-height:0; padding-bottom:0; justify-content:flex-end; }
  body.page-aff .afaq{ min-height:0; border-top:0; padding-top:4vh; justify-content:flex-start; }
  body.page-aff .afaq__q p{ padding-bottom:12px; }
  /* apply band: the Briefing eagle on the left, copy and form to its right */
  body.page-aff .aapply__art{
    background:linear-gradient(90deg, rgba(8,3,26,0) 0%, rgba(8,3,26,.15) 22%, rgba(8,3,26,.62) 40%, rgba(8,3,26,.7) 100%),
               url("plates/08-briefing@2x.jpg") 0% 50% / cover no-repeat, #120733;
  }
  body.page-aff .aapply__art::after{ background:linear-gradient(180deg, rgba(40,14,110,.35), rgba(20,6,50,.35)); }
  body.page-aff .aapply__in{ max-width:none; padding-left:clamp(240px,24vw,420px); padding-right:clamp(24px,5vw,90px); }
}
/* apply band uses the home Briefing band's own proportion (3:1), so the eagle sits whole on the
   left at the size Mia already approved there, and the copy starts where the home copy starts */
@media (min-width:861px) and (min-height:600px){
  body.page-aff .aapply{ min-height:33.35vw; padding-block:calc(64px + 12px) 2vw; }
  body.page-aff .aapply__art{
    background:linear-gradient(90deg, rgba(8,3,26,0) 0%, rgba(8,3,26,0) 18%, rgba(8,3,26,.55) 32%, rgba(8,3,26,.66) 100%),
               url("plates/08-briefing@2x.jpg") 0% 50% / cover no-repeat, #120733;
  }
  body.page-aff .aapply__in{ padding-left:21.4vw; }
}

/* affiliate, Mia 23:07: no dead band under the hero, the brands heading shows on the first screen,
   and sections move like the home page: each is a sheet that pins while the next rides over it. */
@media (min-width:861px) and (min-height:600px){
  body.page-aff .ahero{ min-height:0; height:calc(100svh - 64px - 200px); padding-bottom:28px; }
  body.page-aff .abrands{ justify-content:flex-start; padding-top:calc(64px + 28px); }
  body.page-aff .asheet{ min-height:100svh; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:#05010F; padding-top:calc(64px + 16px); }
  body.page-aff .asheet>.asec{ min-height:0; padding-block:0; justify-content:flex-start; }
  body.page-aff .asheet>.afaq{ padding-top:4vh; }
  body.page-aff main>:is(#brands, #models, #startfaq){
    position:sticky; top:0; height:100svh; overflow:hidden; isolation:isolate;
    border-radius:clamp(26px,2.7vw,46px) clamp(26px,2.7vw,46px) 0 0;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.11); will-change:transform;
  }
  body.page-aff main>#brands{ z-index:1; } body.page-aff main>#models{ z-index:2; } body.page-aff main>#startfaq{ z-index:3; }
  body.page-aff main>#apply{ position:relative; z-index:4; border-radius:clamp(26px,2.7vw,46px) clamp(26px,2.7vw,46px) 0 0; }
  body.page-aff .foot{ position:relative; z-index:5; }
  body.page-aff .atile a{ height:calc(100svh - 64px - 28px - 4vh - 120px); }
}

/* ==========================================================================
   PAGE: PLATFORM (platform.html, body.page-plat), 2026-09-15. One screen, Mia's mock: the platform
   is in development, so the page is a single coming-soon hero with a notify form over a faceted
   wing made from the approved eagle's feathers.
   ========================================================================= */
body.page-plat{ background:#05010F; color:#F2EFF6; }
body.page-plat .awrap{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:clamp(20px,4vw,48px); }
body.page-plat .aacc{ background:linear-gradient(96deg,#D9BFFF 0%, #B98CFF 50%, #9A6BF5 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
body.page-plat .phero{ position:relative; isolation:isolate; overflow:hidden; min-height:100svh; display:flex; align-items:center; padding:calc(64px + 24px) 0 48px; }
body.page-plat .phero__art{ position:absolute; inset:0; z-index:-2; }
body.page-plat .phero__art img{ width:100%; height:100%; object-fit:cover; object-position:80% 60%; display:block; animation:pWing 2s cubic-bezier(.16,.84,.3,1) both, pDrift 16s ease-in-out 2s infinite; will-change:transform; }
@keyframes pWing{ from{ transform:translate3d(4%,3%,0) scale(1.06); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes pDrift{ 0%,100%{ transform:none; } 50%{ transform:translate3d(-1%,-1%,0) scale(1.02); } }
body.page-plat .phero__veil{ position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(5,1,15,.92) 0%, rgba(5,1,15,.6) 36%, rgba(5,1,15,0) 60%); }
body.page-plat .ppill{ display:inline-block; margin:0 0 22px; padding:9px 18px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:#E4D8FF; background:rgba(60,30,140,.45); border:1px solid rgba(160,130,255,.4); }
body.page-plat main h1{ margin:0; font-size:clamp(44px,5.4vw,88px); line-height:.98; letter-spacing:-.025em; }
body.page-plat .plede{ margin:22px 0 0; max-width:40ch; font-size:clamp(17px,1.4vw,22px); line-height:1.45; color:rgba(242,239,246,.86); }
body.page-plat .pform{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; max-width:560px; }
body.page-plat .pform input{ all:unset; box-sizing:border-box; flex:1 1 260px; height:54px; padding:0 20px; border-radius:12px; font-size:16px; color:#F2EFF6; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.28); }
body.page-plat .pform input::placeholder{ color:rgba(242,239,246,.6); }
body.page-plat .pform input:focus-visible{ outline:2px solid #8B54F7; outline-offset:2px; }
body.page-plat .pform button{ all:unset; box-sizing:border-box; cursor:pointer; height:54px; padding:0 30px; border-radius:12px; font-size:16px; font-weight:500; color:#fff; background:linear-gradient(112deg,#5130EC,#8747ED); box-shadow:0 14px 34px -14px rgba(110,60,240,.9); transition:filter .2s ease, transform .18s ease; }
body.page-plat .pform button:hover{ filter:brightness(1.08); transform:translateY(-1px); }
body.page-plat .pform button:disabled{ opacity:.6; cursor:default; transform:none; }
body.page-plat .pnote{ margin:14px 0 0; font-size:14px; color:rgba(242,239,246,.7); }
@media (max-width:860px){
  body.page-plat .phero__art img{ object-position:75% 50%; }
  body.page-plat .phero__veil{ background:linear-gradient(0deg, rgba(5,1,15,.95) 0%, rgba(5,1,15,.6) 55%, rgba(5,1,15,.35) 100%); }
  body.page-plat .pform button{ flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce){ body.page-plat .phero__art img{ animation:none; } }
body.page-plat .phero__art{ position:absolute !important; inset:0 !important; width:auto !important; height:auto !important; }
body.page-plat .phero__art img{ position:absolute; inset:0; width:100% !important; height:100% !important; max-width:none; max-height:none; }
body.page-plat .pform .bf__sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
body.page-plat .phero__in{ position:relative; }
/* platform v2: the art IS Mia's mock with its text removed, so the frame matches her image; no veil
   over it (her mock has none), the copy sits in the dark left half exactly as she placed it */
body.page-plat .phero__art img{ object-position:100% 100%; animation:pWing 1.6s cubic-bezier(.16,.84,.3,1) both; }
body.page-plat .phero__veil{ background:linear-gradient(90deg, rgba(5,1,15,.35) 0%, rgba(5,1,15,0) 45%); }
body.page-plat .phero{ padding-top:64px; }
body.page-plat .awrap.phero__in{ max-width:none; padding-left:5.8vw; }
body.page-plat .ppill{ margin-bottom:1.6vw; padding:.7vw 1.3vw; font-size:max(11px,.85vw); color:#EDE6FF; background:#1A0F3D; border-color:#3A2A7A; }
body.page-plat main h1{ font-size:clamp(44px,5.2vw,96px); line-height:1.04; letter-spacing:-.02em; }
body.page-plat .plede{ max-width:39ch; font-size:clamp(17px,1.6vw,28px); line-height:1.36; margin-top:1.8vw; color:rgba(242,239,246,.88); }
body.page-plat .pform{ max-width:40.6vw; margin-top:3.2vw; gap:.75vw; flex-wrap:nowrap; }
body.page-plat .pform input{ height:max(52px,4vw); flex:1 1 57%; background:rgba(0,0,0,.35); border-color:rgba(255,255,255,.34); font-size:max(15px,1.05vw); }
body.page-plat .pform button{ height:max(52px,4vw); flex:0 0 auto; padding:0 max(24px,3.2vw); font-size:max(15px,1.1vw); border-radius:12px; }
body.page-plat .pnote{ margin-top:1.4vw; font-size:max(13px,.95vw); }
@media (max-width:860px){
  body.page-plat .awrap.phero__in{ padding-left:20px; }
  body.page-plat .pform{ max-width:none; flex-wrap:wrap; }
  body.page-plat .pform button{ flex:1 1 100%; }
  body.page-plat .phero__art img{ object-position:80% 100%; }
  body.page-plat .phero__veil{ background:linear-gradient(0deg, rgba(5,1,15,.7) 0%, rgba(5,1,15,.2) 60%); }
}

/* ==========================================================================
   PAGES: BRANDS (brand-*.html, body.page-brand), 2026-09-15, to Mia's 3 mocks.
   Dark hero with the brand art and its logo, a light overview sheet with tabs, a dark providers
   strip, a light payments sheet that ends with the other two brands. Facts come from the old
   site's own brand pages; nothing is invented here.
   ========================================================================= */
body.page-brand{ background:#05010F; color:#F2EFF6; }
body.page-brand .awrap{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:clamp(20px,4vw,48px); }
body.page-brand .aacc{ background:linear-gradient(96deg,#D9BFFF 0%, #B98CFF 50%, #9A6BF5 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
body.page-brand .abtn{ display:inline-flex; align-items:center; gap:10px; padding:13px 24px; border-radius:12px; font-size:15px; font-weight:500; color:#fff; text-decoration:none;
  background:linear-gradient(112deg,#5130EC,#6B3DEC 62%,#8747ED); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 14px 34px -16px rgba(110,60,240,.85); transition:transform .18s ease, filter .2s ease; }
body.page-brand .abtn i{ font-style:normal; }
body.page-brand .abtn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
body.page-brand .abtn--line{ background:rgba(10,4,28,.5); border:1px solid rgba(255,255,255,.3); box-shadow:none; }
body.page-brand .acta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

/* B1 hero */
body.page-brand .bhero{ position:relative; isolation:isolate; overflow:hidden; padding:calc(64px + 28px) 0 clamp(28px,4vh,44px); min-height:min(76svh,720px); display:flex; align-items:center; }
body.page-brand .bhero__art{ position:absolute; inset:0; z-index:-2; }
body.page-brand .bhero__art img{ width:100%; height:100%; object-fit:cover; object-position:72% 32%; animation:aSettle 1.6s cubic-bezier(.16,.84,.3,1) both; }
body.page-brand .bhero__veil{ position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(5,1,15,.94) 0%, rgba(5,1,15,.72) 38%, rgba(5,1,15,.25) 70%, rgba(5,1,15,.5) 100%), linear-gradient(0deg, rgba(5,1,15,.85), rgba(5,1,15,0) 40%); }
body.page-brand .bcrumb{ display:flex; gap:10px; align-items:center; font-size:13px; color:rgba(242,239,246,.7); margin-bottom:clamp(18px,3vh,34px); }
body.page-brand .bcrumb a{ color:rgba(242,239,246,.7); text-decoration:none; }
body.page-brand .bcrumb a:hover{ color:#fff; }
body.page-brand .bmark{ display:block; width:auto; margin-bottom:clamp(14px,2vh,22px); }
body.page-brand main h1{ margin:0; font-size:clamp(40px,4.6vw,76px); line-height:1.0; letter-spacing:-.025em; }
body.page-brand .blede{ margin:18px 0 0; max-width:36ch; font-size:clamp(16px,1.25vw,20px); line-height:1.45; color:rgba(242,239,246,.86); }
body.page-brand .bfacts{ list-style:none; display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,64px); margin:clamp(26px,4vh,44px) 0 0; padding:clamp(18px,2.4vh,26px) 0 0; border-top:1px solid rgba(255,255,255,.16); }
body.page-brand .bfacts b{ display:block; font-family:var(--font-display); font-weight:400; font-size:clamp(18px,1.5vw,24px); letter-spacing:-.01em; }
body.page-brand .bfacts span{ font-size:13px; color:rgba(242,239,246,.66); }

/* B2, B4 paper sheets; B3 dark strip */
body.page-brand .bsec{ padding-block:clamp(40px,6vh,72px); }
body.page-brand .bview, body.page-brand .bpay{ background:#F1EDFB; color:#150D4A; }
body.page-brand .bview{ border-radius:clamp(22px,2vw,34px) clamp(22px,2vw,34px) 0 0; }
body.page-brand .bview h2, body.page-brand .bpay h2{ margin:0; color:#150D4A; font-size:clamp(30px,3vw,48px); letter-spacing:-.02em; }
body.page-brand .bview__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
body.page-brand .bview__note{ margin:0; text-align:right; font-size:13px; line-height:1.5; color:#6B3DEC; }
body.page-brand .btabs{ display:flex; flex-wrap:wrap; gap:8px; margin:clamp(20px,3vh,30px) 0 clamp(16px,2.4vh,24px); }
body.page-brand .btabs button{ all:unset; cursor:pointer; padding:11px 22px; border-radius:999px; font-size:14px; font-weight:500; color:#3B3468; background:#fff; box-shadow:0 8px 20px -14px rgba(40,24,110,.5); }
body.page-brand .btabs button.is-on{ color:#fff; background:linear-gradient(112deg,#5130EC,#8747ED); }
body.page-brand .btabs button:focus-visible{ outline:2px solid #6B3DEC; outline-offset:2px; }
body.page-brand .bpanel{ background:#fff; border-radius:18px; padding:clamp(20px,2.4vw,32px); box-shadow:0 24px 50px -34px rgba(40,24,110,.5); }
body.page-brand .bpanel h3{ margin:0 0 16px; font-size:clamp(18px,1.5vw,24px); color:#150D4A; }
body.page-brand .bflags{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
body.page-brand .bflags li{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:12px; background:#F5F2FD; font-size:15px; color:#150D4A; }
body.page-brand .bflags span{ font-size:20px; line-height:1; }
body.page-brand .bchips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
body.page-brand .bchips li{ padding:11px 18px; border-radius:999px; background:#fff; border:1px solid rgba(21,13,74,.12); font-size:15px; color:#150D4A; }
body.page-brand .bpay .bchips li{ background:#fff; }
body.page-brand .bpanel__foot{ margin:18px 0 0; font-size:13px; color:#6F6A94; }
body.page-brand .bprov{ background:#080318; }
body.page-brand .bprov h2{ margin:0; font-size:clamp(30px,3vw,48px); letter-spacing:-.02em; }
body.page-brand .bprov .blede{ margin-top:10px; }
body.page-brand .bprov__row{ list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:clamp(20px,3vh,30px) 0 0; padding:0; }
body.page-brand .bprov__row li{ display:grid; place-items:center; height:76px; padding:0 16px; border-radius:14px; text-align:center; font-size:15px; color:#F2EFF6;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(160,130,255,.18); }
body.page-brand .bprov__foot{ margin:16px 0 0; font-size:14px; color:rgba(242,239,246,.66); }
body.page-brand .bother{ margin-top:clamp(28px,5vh,52px); padding-top:clamp(20px,3vh,30px); border-top:1px solid rgba(21,13,74,.14); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; }
body.page-brand .bother>p{ margin:0; font-family:var(--font-display); font-size:clamp(22px,2vw,32px); letter-spacing:-.02em; color:#150D4A; }
body.page-brand .bother__links{ display:flex; flex-wrap:wrap; gap:16px; }
body.page-brand .bother__links a{ display:flex; align-items:center; gap:12px; padding:8px 18px 8px 8px; border-radius:14px; background:#fff; text-decoration:none; color:#150D4A; font-size:15px; box-shadow:0 14px 30px -22px rgba(40,24,110,.6); transition:transform .2s ease; }
body.page-brand .bother__links a:hover{ transform:translateY(-2px); }
body.page-brand .bother__links img{ width:54px; height:54px; object-fit:cover; border-radius:10px; }
body.page-brand .bother__links i{ font-style:normal; color:#6B3DEC; }
@media (max-width:860px){
  body.page-brand .bhero{ min-height:0; }
  body.page-brand .bhero__veil{ background:linear-gradient(0deg, rgba(5,1,15,.95) 20%, rgba(5,1,15,.55) 70%, rgba(5,1,15,.4) 100%); }
  body.page-brand .bview__head{ flex-direction:column; align-items:flex-start; }
  body.page-brand .bview__note{ text-align:left; }
  body.page-brand .bfacts{ gap:18px; }
}
/* the KnightSlots wordmark is dark artwork, so it needs inverting on the dark hero */
body.page-brand .bmark[src*="knightslots"]{ filter:invert(1) brightness(1.7); }
/* each brand tile has its subject at a different height, so each gets its own crop */
body.page-brand .bhero__art img[src*="tile-ss"]{ object-position:62% 58%; }
body.page-brand .bhero__art img[src*="tile-ks"]{ object-position:74% 26%; }
body.page-brand .bhero__art img[src*="tile-caf"]{ object-position:70% 34%; }

/* brands v2, Mia 2026-09-16 "точь в точь": art panel on the right fading into the page, facts with
   icons, the markets tab shows the world map with our markets lit, providers on a rail. */
body.page-brand .bhero__art{ left:44%; }
body.page-brand .bhero__veil{ background:linear-gradient(90deg, #05010F 0%, #05010F 40%, rgba(5,1,15,.55) 56%, rgba(5,1,15,.15) 78%, rgba(5,1,15,.45) 100%), linear-gradient(0deg, rgba(5,1,15,.9), rgba(5,1,15,0) 42%); }
body.page-brand .bhero__fade{ position:absolute; inset:0; z-index:-1; background:radial-gradient(70% 90% at 78% 45%, rgba(0,0,0,0) 40%, rgba(5,1,15,.65) 100%); }
body.page-brand .bico{ display:inline-grid; place-items:center; width:1.5em; height:1.5em; }
body.page-brand .bico svg{ width:100%; height:100%; }
body.page-brand .bfacts li{ display:flex; align-items:center; gap:12px; }
body.page-brand .bfacts .bico{ width:26px; height:26px; color:#B98CFF; }
body.page-brand .bfacts li+li{ border-left:1px solid rgba(255,255,255,.16); padding-left:clamp(20px,4vw,64px); }
body.page-brand .btabs button{ display:inline-flex; align-items:center; gap:10px; }
body.page-brand .btabs .bico{ width:18px; height:18px; color:currentColor; }
body.page-brand .bpanel--map{ display:grid; grid-template-columns:minmax(0,230px) minmax(0,1fr); gap:clamp(18px,2.4vw,34px); align-items:start; }
body.page-brand .bmarkets .bflags{ grid-template-columns:1fr; gap:6px; }
body.page-brand .bmarkets .bflags li{ padding:9px 14px; font-size:14px; }
body.page-brand .bmapbox{ position:relative; }
body.page-brand .bmap{ width:100%; height:auto; display:block; }
body.page-brand .bmap path{ fill:#DDD7F5; stroke:#fff; stroke-width:.5; }
body.page-brand .blegend{ position:absolute; right:0; top:8px; list-style:none; margin:0; padding:12px 16px; border-radius:12px; background:#fff; box-shadow:0 18px 40px -28px rgba(40,24,110,.6); font-size:13px; color:#150D4A; }
body.page-brand .blegend li{ display:flex; align-items:center; gap:8px; padding:2px 0; }
body.page-brand .blegend li::before{ content:""; width:7px; height:7px; border-radius:50%; background:#6B3DEC; }
body.page-brand .bstrip{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin:6px 0 0; padding:14px 18px; border-radius:12px; background:#F5F2FD; font-size:14px; color:#150D4A; }
body.page-brand .bstrip span{ display:inline-flex; align-items:center; gap:10px; font-weight:500; white-space:nowrap; }
body.page-brand .bstrip .bico{ width:20px; height:20px; color:#6B3DEC; }
body.page-brand .bstrip b{ font-weight:400; color:#6F6A94; border-left:1px solid rgba(21,13,74,.16); padding-left:22px; }
body.page-brand .bprov__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
body.page-brand .bprov__all{ color:#B98CFF; text-decoration:none; font-size:15px; white-space:nowrap; }
body.page-brand .bprov__all i{ font-style:normal; }
body.page-brand .bprov__wrap{ position:relative; display:flex; align-items:center; gap:12px; margin-top:clamp(20px,3vh,30px); }
body.page-brand .bprov__row{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0; padding:0; list-style:none; }
body.page-brand .bprov__row::-webkit-scrollbar{ display:none; }
body.page-brand .bprov__row li{ flex:0 0 clamp(150px,17vw,210px); scroll-snap-align:start; }
body.page-brand .bprov__nav{ all:unset; cursor:pointer; flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; font-size:22px; color:#D9C3FF; border:1px solid rgba(160,130,255,.4); }
body.page-brand .bprov__nav:hover{ background:rgba(140,90,255,.18); }
@media (max-width:860px){
  body.page-brand .bhero__art{ left:0; opacity:.5; }
  body.page-brand .bpanel--map{ grid-template-columns:1fr; }
  body.page-brand .blegend{ position:static; margin-top:12px; display:grid; grid-template-columns:repeat(2,1fr); }
  body.page-brand .bstrip b{ border-left:0; padding-left:0; }
  body.page-brand .bfacts li+li{ border-left:0; padding-left:0; }
}
/* the map panel sets display:grid, which beat the hidden attribute, so Languages, Currencies and
   Licences opened underneath the map instead of replacing it (Mia, 2026-09-16) */
body.page-brand .bpanel[hidden]{ display:none !important; }
/* the hero art is now the brand's own device shot from our main site: shown whole, never cropped */
body.page-brand .bhero__art{ left:46%; right:clamp(12px,3vw,56px); top:auto; bottom:6%; height:76%; }
body.page-brand .bhero__art img{ object-fit:contain; object-position:center bottom; animation:aSettle 1.4s cubic-bezier(.16,.84,.3,1) both; }
body.page-brand .bhero__veil{ background:radial-gradient(60% 70% at 72% 55%, rgba(110,60,220,.22), rgba(5,1,15,0) 70%), linear-gradient(90deg,#05010F 0%, rgba(5,1,15,.75) 46%, rgba(5,1,15,0) 70%); }
body.page-brand .bhero__fade{ background:radial-gradient(75% 95% at 76% 55%, rgba(0,0,0,0) 45%, rgba(5,1,15,.55) 100%); }
body.page-brand .bhero{ background:radial-gradient(70% 90% at 78% 50%, rgba(70,30,160,.35), rgba(5,1,15,0) 70%), #05010F; }
@media (max-width:860px){ body.page-brand .bhero__art{ position:relative; left:auto; right:auto; bottom:auto; height:auto; margin:20px 0 0; opacity:1; } body.page-brand .bhero__art img{ height:auto; } }

/* brand hero v3, Mia 2026-09-16: the artwork comes from her own reference frames, and the column is
   spread over the screen instead of being packed into the top third. */
@media (min-width:861px){
  body.page-brand .bhero{ min-height:calc(100svh - 0px); padding:calc(64px + 3vh) 0 4vh; }
  body.page-brand .bhero>.awrap{ display:flex; flex-direction:column; justify-content:space-between; min-height:calc(100svh - 64px - 7vh); }
  body.page-brand .bcrumb{ margin-bottom:0; }
  body.page-brand .bmark{ margin:0 0 2.2vh; }
  body.page-brand main h1{ font-size:clamp(46px,5vw,84px); }
  body.page-brand .blede{ margin-top:2.4vh; font-size:clamp(17px,1.35vw,22px); }
  body.page-brand .acta{ margin-top:3.4vh; }
  body.page-brand .bfacts{ margin-top:0; padding-top:3vh; }
  body.page-brand .bhero__art{ left:48%; right:clamp(8px,2vw,40px); top:12%; bottom:12%; height:auto; }
}
body.page-brand .bhero__art img{ object-fit:contain; object-position:center; }
/* the reference frame is a rectangle, so its edges are masked into the page instead of ending abruptly */
@media (min-width:861px){
  body.page-brand .bhero__art{ left:53%; top:14%; bottom:10%; }
  body.page-brand .bhero__art img{ object-fit:cover; object-position:center;
    -webkit-mask-image:radial-gradient(120% 120% at 62% 50%, #000 52%, rgba(0,0,0,.65) 72%, rgba(0,0,0,0) 92%);
            mask-image:radial-gradient(120% 120% at 62% 50%, #000 52%, rgba(0,0,0,.65) 72%, rgba(0,0,0,0) 92%); }
  body.page-brand .bhero__fade{ background:none; }
  body.page-brand .bhero__veil{ background:linear-gradient(90deg,#05010F 0%, rgba(5,1,15,.85) 40%, rgba(5,1,15,0) 62%); }
}
@media (min-width:861px){
  /* the fade has to start inside the frame, or the rectangle still shows its corners */
  body.page-brand .bhero__art img{
    -webkit-mask-image:radial-gradient(72% 82% at 58% 50%, #000 40%, rgba(0,0,0,.55) 74%, rgba(0,0,0,0) 100%);
            mask-image:radial-gradient(72% 82% at 58% 50%, #000 40%, rgba(0,0,0,.55) 74%, rgba(0,0,0,0) 100%);
  }
  /* copy keeps to its own half; the brand wordmark never runs under the artwork */
  body.page-brand .bhero>.awrap>*{ max-width:46%; }
  body.page-brand .bhero .bmark{ max-width:min(46%, 360px); height:auto !important; max-height:52px; object-fit:contain; object-position:left center; }
  body.page-brand .bfacts{ max-width:70%; }
}
@media (min-width:861px){
  /* masks on the image alone still left visible corners, so the blend is painted as an overlay
     of the page colour on all four edges of the art panel */
  body.page-brand .bhero__art img{ -webkit-mask-image:none; mask-image:none; }
  body.page-brand .bhero__art::after{
    content:""; position:absolute; inset:-1px; pointer-events:none;
    background:
      linear-gradient(90deg, #05010F 0%, rgba(5,1,15,.6) 12%, rgba(5,1,15,0) 34%),
      linear-gradient(270deg, #05010F 0%, rgba(5,1,15,0) 22%),
      linear-gradient(180deg, #05010F 0%, rgba(5,1,15,0) 22%),
      linear-gradient(0deg, #05010F 0%, rgba(5,1,15,0) 22%);
  }
  body.page-brand .bfacts{ max-width:none; white-space:nowrap; }
  body.page-brand .bhero>.awrap>.bfacts{ max-width:none; }
}

/* brand hero v4, Mia 2026-09-16 08:06: the whole block fits ONE screen, spacing is tighter, and the
   artwork fills the full height of the section instead of sitting in a square. The map's floating
   legend is removed: the list on the left already names every market. */
@media (min-width:861px){
  body.page-brand .bhero{ height:100svh; min-height:0; padding:calc(64px + 2vh) 0 2.5vh; }
  body.page-brand .bhero>.awrap{ min-height:0; height:100%; justify-content:center; gap:0; }
  body.page-brand .bcrumb{ margin-bottom:2vh; }
  body.page-brand .bmark{ margin:0 0 1.6vh; max-height:46px; }
  body.page-brand main h1{ font-size:clamp(42px,4.4vw,72px); }
  body.page-brand .blede{ margin-top:1.6vh; }
  body.page-brand .acta{ margin-top:2.4vh; }
  body.page-brand .bfacts{ margin-top:auto; padding-top:2.2vh; }
  body.page-brand .bhero__art{ left:50%; right:0; top:0; bottom:0; }
  body.page-brand .bhero__art img{ object-fit:cover; object-position:center; }
  body.page-brand .bhero__art::after{
    background:
      linear-gradient(90deg, #05010F 0%, rgba(5,1,15,.75) 10%, rgba(5,1,15,0) 30%),
      linear-gradient(180deg, #05010F 0%, rgba(5,1,15,0) 16%),
      linear-gradient(0deg, #05010F 0%, rgba(5,1,15,0) 16%);
  }
}
body.page-brand .blegend{ display:none; }
body.page-brand .bmapbox{ display:grid; place-items:center; }
@media (min-width:861px){
  body.page-brand .bhero{ box-sizing:border-box; }
  body.page-brand .bhero>.awrap{ box-sizing:border-box; padding-block:0; }
  body.page-brand main h1{ font-size:min(clamp(38px,4vw,64px), 8.4vh); line-height:1.0; }
  body.page-brand .blede{ font-size:min(clamp(16px,1.2vw,20px), 2.4vh); margin-top:1.4vh; }
  body.page-brand .acta{ margin-top:2vh; }
  body.page-brand .abtn{ padding:11px 20px; font-size:14px; }
  body.page-brand .bfacts{ padding-top:1.8vh; gap:clamp(16px,3vw,48px); }
  body.page-brand .bfacts b{ font-size:min(clamp(16px,1.3vw,21px), 2.6vh); }
}
@media (min-width:861px){
  /* the section was centring an already full-height column, which pushed the facts off screen */
  body.page-brand .bhero{ display:block; }
  body.page-brand .bhero>.awrap{ display:flex; flex-direction:column; justify-content:space-between; height:100%; }
  body.page-brand .bhero>.awrap>.bcrumb{ flex:0 0 auto; }
}
@media (min-width:861px){
  /* the header sits in the flow above the section, so the section must not reserve its height twice */
  body.page-brand .bhero{ height:calc(100svh - 64px); padding:2.4vh 0 2.4vh; }
}
/* provider cards carry a real logo where we hold our own copy of the file; icons for the other tabs */
body.page-brand .bprov__card{ display:grid; place-items:center; height:86px; padding:0 18px; border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border:1px solid rgba(160,130,255,.2); }
body.page-brand .bprov__card img{ max-width:78%; max-height:46px; width:auto; height:auto; object-fit:contain; filter:brightness(1.1); }
body.page-brand .bprov__card--text b{ font-weight:500; font-size:15px; color:#EDE6FF; letter-spacing:.02em; text-align:center; }
body.page-brand .bchip--ico{ display:inline-flex; align-items:center; gap:10px; }
body.page-brand .bchip--ico>span{ display:inline-grid; place-items:center; font-size:18px; line-height:1; }
body.page-brand .bchip--cur>span{ width:26px; height:26px; border-radius:50%; background:#EEE9FC; color:#5130EC; font-size:14px; font-weight:600; }
body.page-brand .bchip--lic>span{ width:20px; height:20px; color:#6B3DEC; }
body.page-brand .bchip--lic>span svg{ width:100%; height:100%; }
/* our copies of the studio logos are artwork on white, so their cards are white, which is also how
   Mia's reference renders them: bright, not sunk into the dark */
body.page-brand .bprov__card:has(img){ background:#fff; border-color:rgba(255,255,255,.2); }
body.page-brand .bprov__card img{ filter:none; }

/* ==========================================================================
   BRAND HERO v3, Mia's QA of 2026-09-16 09:40. Her criteria, verbatim:
   the heading, the lede, both buttons and the WHOLE facts row visible at 1440x900 and 1366x768
   with no scrolling; 60 to 100px of the light Brand overview section already showing under it;
   the height coming from a compact composition, not from the artwork; the reel smaller and almost
   whole, ending above the facts row; no vertical darkening seam down the middle.
   Appended last so it wins over the earlier brand blocks without touching them.
   ========================================================================= */
@media (min-width:861px){
  /* one screen minus the header minus the peek of the next section */
  body.page-brand .bhero{ height:calc(100svh - 64px - 92px); min-height:520px; padding:2.4vh 0 2.4vh; }
  body.page-brand .bhero>.awrap{ height:100%; display:flex; flex-direction:column; justify-content:center; gap:0; }

  /* the copy block is compact and the facts sit right under the buttons, not pinned to the floor */
  body.page-brand .bcrumb{ margin:0 0 1.8vh; }
  body.page-brand .bhero .bmark{ margin:0 0 1.8vh; max-height:min(44px,5vh); }
  body.page-brand .bhero h1{ font-size:min(clamp(40px,4.4vw,68px), 9.4vh); line-height:1.02; }
  body.page-brand .bhero .blede{ margin-top:1.6vh; font-size:min(clamp(16px,1.25vw,20px), 2.4vh); }
  body.page-brand .bhero .acta{ margin-top:2.4vh; }
  body.page-brand .bhero .bfacts{ margin-top:3.2vh; padding-top:2vh; }

  /* three equal columns under one rule, each with its own divider */
  body.page-brand .bfacts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; max-width:none; white-space:normal; }
  body.page-brand .bfacts li{ padding-right:clamp(16px,2vw,36px); }
  body.page-brand .bfacts li+li{ border-left:1px solid rgba(255,255,255,.16); padding-left:clamp(18px,2.4vw,44px); }

  /* the reel: smaller, whole, ending above the facts rule */
  /* the box carries the art's own 1344x1245 proportion, so the feathered edges below land on the
     picture itself instead of on empty letterbox */
  body.page-brand .bhero__art{ left:auto; right:clamp(10px,3vw,64px); top:5%; bottom:22%; height:auto;
    aspect-ratio:1344/1245; width:auto; }
  /* contain shows the whole reel, but a JPG carries its own dark rectangle, so all four edges are
     feathered into the page instead of ending on a straight line */
  body.page-brand .bhero__art img{ object-fit:cover; object-position:center; height:100%; width:100%;
    -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 15%, #000 88%, rgba(0,0,0,0) 100%),
                       linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 13%, #000 84%, rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 15%, #000 88%, rgba(0,0,0,0) 100%),
                       linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 13%, #000 84%, rgba(0,0,0,0) 100%);
    -webkit-mask-composite:source-in; mask-composite:intersect; }
  body.page-brand .bhero__art::after{ content:none; }

  /* no hard vertical edge: the dark side fades across the whole width in small steps */
  body.page-brand .bhero__veil{
    background:linear-gradient(90deg, rgba(5,1,15,.96) 0%, rgba(5,1,15,.9) 24%, rgba(5,1,15,.74) 38%,
      rgba(5,1,15,.48) 50%, rgba(5,1,15,.22) 62%, rgba(5,1,15,.08) 74%, rgba(5,1,15,.2) 100%),
      linear-gradient(0deg, rgba(5,1,15,.7), rgba(5,1,15,0) 44%);
  }
  body.page-brand .bhero__fade{ background:radial-gradient(78% 96% at 74% 48%, rgba(0,0,0,0) 52%, rgba(5,1,15,.45) 100%); }
  body.page-brand .bhero{ background:radial-gradient(64% 84% at 74% 48%, rgba(70,30,160,.3), rgba(5,1,15,0) 70%), #05010F; }
}

/* Mia 2026-09-16 10:00: every provider is a real logo now (each taken from that provider's own
   site), so the strip is one white-on-dark set instead of a mix of pictures and text.
   brightness(0) invert(1) makes any source mark, light or dark, the same white silhouette. */
/* white chips, each brand in its own colours: a monochrome filter turns a solid-shape mark like
   Play'n GO into a white blob, so the chip carries the real logo instead. */
body.page-brand .bprov__card:has(img){ background:#fff; border-color:rgba(255,255,255,.2); }
body.page-brand .bprov__card img{ max-width:76%; max-height:40px; filter:none; }
/* the strip is a wrapping grid, so no card is ever cut off at the edge */
body.page-brand .bprov__wrap{ display:block; }
body.page-brand .bprov__nav{ display:none; }
body.page-brand .bprov__row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; overflow:visible; scroll-snap-type:none; }
/* payment chips: one rhythm, equal gaps and one minimum width, so the rows read as a grid */
body.page-brand .bchips{ gap:12px; }
body.page-brand .bpay .bchips li{ min-width:118px; text-align:center; padding:11px 20px; }

/* four of the marks only exist as white-on-transparent (Playtech, Relax, Push, Big Time Gaming,
   Pragmatic Play), which is invisible on a white chip. brightness(0) turns any of them into the
   same black silhouette, so the strip stays one white-chip set. */
body.page-brand .bprov__card img[src*="playtech"],
body.page-brand .bprov__card img[src*="relax-gaming"],
body.page-brand .bprov__card img[src*="push-gaming"],
body.page-brand .bprov__card img[src*="big-time-gaming"],
body.page-brand .bprov__card img[src*="pragmatic-play"]{ filter:brightness(0); }