/* c9.css · concatenated from the section agents' addendum sheets. */

/* ---- css_dark.css ---- */
/* ==========================================================================
   css_dark.css · c9 sections 02 / 03 / 04 (the dark run).

   Every declaration below is either a c6 ROLE TOKEN or a copy of a value c6
   already uses, cited inline. No new hue, no new type size: where a size was
   needed it is an existing type token, because the c6 ramp forbids inventing
   one (02-type.css:5 "nothing else may invent a size").

   Three structures needed layout that c6 had no container for, and each one is
   a TRACK COUNT or a small primitive, never a new component system:
     · caps  — .figures is repeat(3) (30-dossier.css:129) and 02 has FOUR items.
     · flow  — 03 is one pound entering, five leaks, an unknown leaving.
     · cyc   — 04 is a crank turned once against a crank turned five times.
   ========================================================================== */

/* --------------------------------------------------------------------------
   02 · CAPABILITIES. Four ledger columns: what it is called, what it took,
   what it takes now. The strike does the arguing, so nothing else has to.
   -------------------------------------------------------------------------- */
#proof .caps{
  /* same grid as .figures (30-dossier.css:129), four tracks instead of three.
     repeat(4,minmax(0,1fr)) is the exact shape .mkts already uses at
     32-compose.css:259-261. */
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(20px,2.4vw,44px);
}
#proof .cap{
  /* the ledger rule. --line-strong is the token at 00-tokens.css:51, and this
     is the same "hairline above a block" gesture as .folio__r
     (30-dossier.css:76). */
  border-top:1px solid var(--line-strong);
  padding-top:clamp(16px,1.5vw,26px);
}
/* .fig__l carries margin-top because it normally sits UNDER the numeral
   (30-dossier.css:148). Here it leads, so the margin goes. */
#proof .cap .fig__l{ margin-top:0; }
#proof .cap__was{
  margin:clamp(14px,1.3vw,22px) 0 0;
  /* .fig__s colour and size are inherited from 30-dossier.css:154 */
}
#proof .cap__was s{ text-decoration-thickness:1px; text-underline-offset:2px; }
/* the ONE gold node per column: the hinge between what was and what is.
   --g-500 is the token at 00-tokens.css:32 and gold-as-a-node is the folio's
   own idiom (30-dossier.css:74). */
#proof .cap__go{
  display:block;
  width:1px; height:clamp(18px,1.7vw,30px);
  margin:clamp(10px,1vw,16px) 0;
  background:linear-gradient(180deg, var(--g-500), rgba(255,255,255,0));
}
#proof .cap__is{
  /* the numeral tier is 54-116px (30-dossier.css:136); these are WORDS, four
     across, so they take the existing card-title tier instead: --h2-sm,
     02-type.css:23. The gradient fill of .fig__n is inherited untouched. */
  font-size:var(--h2-sm);
  letter-spacing:-.028em;
}
@media (max-width:1080px){
  #proof .caps{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:560px){
  #proof .caps{ grid-template-columns:minmax(0,1fr); }
}
/* --------------------------------------------------------------------------
   03 · THE MONEY FLOW. Left to right: one pound in, five leaks, an unknown out.
   #services is one screen and clips (36-services-row.css:22-40), so this stays
   compact and never grows a second row on a wide screen.
   -------------------------------------------------------------------------- */
#services .flow{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(16px,2vw,40px);
  margin-top:clamp(26px,3vw,52px);
}
#services .flow__node{
  margin:0;
  /* the display-numeral treatment of .fig__n (30-dossier.css:136-146), at the
     word tier (--h2-sm, 02-type.css:23) so two nodes plus five chips fit one
     row inside the clipped section. */
  font-size:var(--h2-sm);
  line-height:.9;
  font-weight:300;
  letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  color:#fff;
  background:linear-gradient(178deg,#ffffff 6%, #d6c8ff 58%, #9a7bf0 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* what leaves is the unknown, so it leaves in gold: --g-500 / --g-700,
   00-tokens.css:32-33. Same clip-text gesture, different ramp. */
#services .flow__node--out{
  background:linear-gradient(178deg, var(--g-500) 10%, #8A6100 100%);
  -webkit-background-clip:text; background-clip:text;
}
#services .flow__leaks{
  /* .mkts brings the tile look (32-compose.css:258-273); only the track count
     and the top margin change, because here it sits BETWEEN two nodes. */
  margin:0;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:clamp(8px,.8vw,14px);
  position:relative;
}
#services .flow__leaks .mkt{
  /* one row, five across: the tile loses the flag track and tightens. */
  grid-template-columns:minmax(0,1fr);
  padding:clamp(12px,1.1vw,18px) clamp(10px,1vw,16px);
  text-align:center;
}
#services .flow__leaks .mkt__n{ font-size:clamp(12px,.86vw,15px); }
@media (max-width:1080px){
  #services .flow{ grid-template-columns:minmax(0,1fr); justify-items:center; gap:clamp(18px,2.4vw,32px); }
  #services .flow__leaks{ grid-template-columns:repeat(2, minmax(0,1fr)); width:100%; }
}
@media (max-width:520px){
  #services .flow__leaks{ grid-template-columns:minmax(0,1fr); }
}
#why .loop{
  border-top:1px solid var(--line-strong);   /* 00-tokens.css:51 */
  padding-top:clamp(16px,1.5vw,26px);
}
#why .loop .fig__l{ margin-top:0; }
#why .cyc{
  list-style:none; margin:clamp(22px,2.2vw,38px) 0 0; padding:0;
  display:flex; align-items:center; gap:clamp(10px,1.1vw,18px);
  position:relative;
}
#why .cyc__n{
  position:relative;
  width:clamp(34px,2.9vw,46px); aspect-ratio:1;
  display:grid; place-items:center;
  border:1px solid var(--line-strong);        /* 00-tokens.css:51 */
  border-radius:50%;
  background:linear-gradient(178deg, rgba(255,255,255,.05), rgba(255,255,255,.014)); /* .mkt, 32-compose.css:268 */
  font-size:clamp(11px,.74vw,13.5px);         /* --micro, 02-type.css:27 */
  font-weight:700; letter-spacing:.06em;
  color:var(--txt-faint);
}
/* a completed cycle. --v-400 / --v-700 are the tokens at 00-tokens.css:27-30;
   the ramp direction copies .mkt:hover (32-compose.css:272). */
#why .cyc__n.is-on{
  border-color:var(--v-300);
  background:linear-gradient(178deg, var(--v-400), var(--v-700));
  color:#fff;
  box-shadow:0 30px 80px -20px rgba(113,50,245,.42);   /* --shadow-lift, 00-tokens.css:59 */
}
@media (max-width:860px){
  #why .loops{ grid-template-columns:minmax(0,1fr); }
}
/* --------------------------------------------------------------------------
   c9 · 03 COST, the seam into 04 Competition.

   36-services-row.css:22-40 gives `main > section.ed--l2` min-height:100svh with
   its content flex-centred. That was sized for c6's three render tiles (523px of
   content, measured). c9's money flow is 337px, so centring left 296px of dead
   ground between "Bad decisions are still expensive." and the 04 sheet, and the
   scroll read as a gap instead of a beat.

   The section now takes its own height. NO new spacing scale is introduced: the
   padding is the padding-block 36-services-row.css:39 already declares for this
   very section, which lands at 72px at 1440, inside c6's own measured range for
   content-sized sections (c6 recognition 73, c6 contact 106).

   Desktop only. At 390 the same seam already measured 60px, so it is correct and
   is deliberately left alone.
-------------------------------------------------------------------------- */
@media (min-width:861px){
  main > section#services{
    min-height:0;
    display:block;
  }
}

/* ---- css_light.css ---- */
/* ---------------------------------------------------------------------------
   2 · 05 REBUILD.  Copy left, the resolving signal right.
   Layout only; the column ratio and gap are `.talk`'s (30-dossier.css:392-394),
   so this section sits on the same two-column rhythm as the contact block.
------------------------------------------------------------------------------ */
.rebuild{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(20px,3vw,64px);
  align-items:center;
}
.rebuild__fig{ margin:0; min-width:0; }
.rebuild__fig svg{ display:block; width:100%; height:auto; }
/* the emphasised line. Sized on the LEDE tier (30-dossier.css:103-108) but
   carried at full ink instead of dim, which is the only way the page says the
   sentence that matters most out loud without inventing a new type size. */
.rebuild__claim{
  margin:clamp(18px,1.8vw,30px) 0 0;
  max-width:34ch;
  font-size:clamp(17px,1.32vw,25px);
  line-height:1.44;
  font-weight:600;
  letter-spacing:-.015em;
  color:#0B0416;                          /* 50-light.css:160 h2 ink on paper */
}
.rebuild__cta{ margin:clamp(24px,2.4vw,40px) 0 0; }
@media (max-width:860px){
  .rebuild{ grid-template-columns:minmax(0,1fr); gap:clamp(24px,5vw,38px); }
  .rebuild__fig{ order:2; }
  .rebuild__claim{ max-width:none; }
}
/* ---------------------------------------------------------------------------
   3 · 06 INTELLIGENCE.  The tag row and the three library cards.

   The cards REUSE `.award`, which 50-light.css already turns into a white card
   on paper (50-light.css:189-195 for #markets, :339-344 for #recognition), so
   no colour is set here. Only the grid changes: `.awards` is a 2-up shelf
   (12-home.css:243-248 / 04-surfaces.css:592-595) and the library is a 3-up.
   Declared self-sufficiently (display/list/margin/padding) so it does not
   depend on which of those two sheets wins for `.awards`.
------------------------------------------------------------------------------ */
.tagrow{
  display:flex; flex-wrap:wrap;
  gap:clamp(7px,.6vw,10px);
  margin:clamp(22px,2.2vw,34px) 0 0;
}
.tagrow .edtag{ margin-right:0; }         /* the flex gap owns the spacing now */

.awards--lib{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.5vw,26px);
  align-items:stretch;
  list-style:none;
  margin:clamp(26px,2.6vw,44px) 0 0;
  padding:0;
  border-bottom:0;                        /* 12-home.css:247 draws a rule under
                                             the 2-up awards shelf; the library
                                             is not that shelf. */
}
.awards--lib .award{
  display:block;
  padding:clamp(20px,1.9vw,32px);
  border-radius:var(--r-card, var(--r-md));
}
.libcta{ margin:clamp(24px,2.4vw,40px) 0 0; }
@media (max-width:860px){
  .awards--lib{ grid-template-columns:minmax(0,1fr); }
}
/* ---------------------------------------------------------------------------
   4 · 07 PARTNERS.  The partner-account bar, and the movement headings.

   THE BRAND CARDS ARE DELIBERATELY NOT RESTYLED. `.brand` grounds itself on
   `var(--ink-950)` and `.brand__foot` on the same (37-brand-cards.css), and the
   paper mixin redefines the LEGACY neutrals (--n-950 ... --n-700) but NOT
   --ink-950/--ink-990, so the three cards keep their own dark world on the
   paper sheet and `.brand__where`'s hardcoded rgba(255,255,255,.82) stays
   correct against it. That is also the honest treatment: the artwork is
   full-bleed dark render, and a dark card on paper is the same gesture the
   photo strip already makes.

   The bar itself is a new arrangement, so it takes the `.award` card's paper
   values verbatim.
------------------------------------------------------------------------------ */
.pbar{
  margin:clamp(18px,1.8vw,30px) 0 0;
  padding:clamp(20px,2vw,34px) clamp(20px,2.2vw,38px);
  border:1px solid rgba(11,4,22,.12);     /* 50-light.css:190 .award border */
  border-radius:var(--r-lg);              /* 00-tokens.css geometry token */
  background:linear-gradient(178deg, #FFFFFF, rgba(255,255,255,.5));
                                          /* 50-light.css:191 .award ground */
  box-shadow:0 1px 2px rgba(24,10,48,.05), 0 12px 30px rgba(24,10,48,.07);
                                          /* 50-light.css:192 .award cast */
}
.pbar__t{
  margin:0;
  font-size:clamp(17px,1.28vw,24px); line-height:1.3; font-weight:600;
  letter-spacing:-.015em;
  color:#0B0416;                          /* 50-light.css:160 ink on paper */
}
.pbar__p{
  margin:clamp(8px,.7vw,12px) 0 0;
  font-size:clamp(14px,1vw,18px); line-height:1.55;
  color:rgba(11,4,22,.62);                /* 50-light.css:195 .edaw__meta */
}
.pbar__modes{
  display:flex; flex-wrap:wrap;
  gap:clamp(7px,.6vw,10px);
  margin:clamp(14px,1.3vw,22px) 0 0;
}
.pbar__modes .edtag{ margin-right:0; }
.pcta{ margin:clamp(24px,2.4vw,40px) 0 0; }
/* THE BRAND NAME AS COPY, not as pixels.
   v5's 07 labels each tile with the brand name. c6's cards carry the logo
   INSIDE the artwork, so on this page the three names existed only as image
   content and as `alt` text, i.e. not as copy at all, and "Casino & Friends"
   did not exist even there (c6's alt reads "Casino and Friends"). The footer
   therefore gains a name line above the market list. The foot stays dark, so
   the name takes the same white `.brand__go` uses and the market list keeps
   its own dimmer value, which preserves the footer's existing hierarchy. */
main > section#partners .brand__foot{
  align-items:center;
  min-height:clamp(70px,5.6vw,92px);      /* was clamp(58px,4.7vw,74px) at
                                             37-brand-cards.css .brand__foot,
                                             grown for the second line only */
  padding-top:clamp(10px,.9vw,14px);
  padding-bottom:clamp(10px,.9vw,14px);
}
main > section#partners .brand__id{
  display:flex; flex-direction:column;
  gap:clamp(3px,.3vw,6px);
  min-width:0;
}
main > section#partners .brand__nm{
  font-size:clamp(15px,1.12vw,20px);
  line-height:1.2;
  font-weight:600;
  letter-spacing:-.015em;
  color:#fff;                             /* 37-brand-cards.css .brand__go colour */
}
@media (max-width:760px){
  main > section#partners .brand__foot{ min-height:64px; }
  main > section#partners .brand__nm{ font-size:15px; }
}
/* the movement headings inside the long section. Sized between h2 and lede so
   the section reads as one piece with internal chapters rather than as several
   sections that lost their grounds. Ink comes from 50-light's own h3 rule. */
.pmove{
  margin:clamp(46px,4.6vw,84px) 0 clamp(18px,1.8vw,30px);
  font-size:clamp(22px,2.1vw,38px);
  line-height:1.12;
  letter-spacing:-.022em;
  font-weight:600;
}
.pmove + .ed__lede{ margin-top:0; }
/* ---------------------------------------------------------------------------
   5 · 08 BRIEFING.  Statement left, one field right.
   Layout only. The form is `.edform`/`.field`/`.btn`, all covered by the paper
   mixin (50-light.css:487-...), so nothing here sets a colour.
------------------------------------------------------------------------------ */
.brief{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(22px,3vw,56px);
  align-items:center;
}
.brief .ed__head{ margin-bottom:0; }
.brief__form{ margin:0; }
.brief__form .submit{ margin-top:clamp(16px,1.4vw,24px); }
@media (max-width:860px){
  .brief{ grid-template-columns:minmax(0,1fr); gap:clamp(22px,4vw,34px); }
}
/* --------------------------------------------------------------------------
   c9 · 08 BRIEFING, composition.

   Was: headline on the left, a one-field card far to the right, a wide empty
   middle, and a stray full-width rule under the single field. The rule is not a
   mistake in the fragment, it is c6's `.form .submit` top rule
   (04-surfaces.css:2116, inset 0 1px 0 --unlit / inset 0 2px 0 --lit-1), which
   reads correctly under the 4-field partner form and wrong under one field.

   Now: one column, the card sits directly under the copy at a contained width,
   and the field and the button share a row. Field, label and button treatment
   are untouched c6 form language, the same as the partner form in 07. No field
   added, no label renamed, no copy changed.
-------------------------------------------------------------------------- */
main > section#contact .brief{
  grid-template-columns:minmax(0,1fr);
  gap:clamp(18px,2vw,30px);
  max-width:min(100%, 880px);
}
main > section#contact .brief__form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:clamp(14px,1.4vw,22px);
}
main > section#contact .brief__form .field{ margin:0; }
main > section#contact .brief__form .submit{
  margin-top:0;
  padding-top:0;
  border-top:0;
  box-shadow:none;
}
@media (max-width:760px){
  main > section#contact .brief__form{
    grid-template-columns:minmax(0,1fr);
    align-items:stretch;
  }
}

/* ---- css_chrome.css ---- */
/* ==========================================================================
   c9 · CHROME. Header only, narrow widths only.

   c6's header prints the second word of the wordmark over the login control
   once the row stops fitting: measured on c6's own 390 frame as
   "FairSky Partners" overlapping "Login". c6 keeps that for now and is NOT
   edited here; this sheet is c9's, so only c9 changes.

   The fix drops the "Partners" half of the wordmark, so BOTH the mark and the
   login control survive: hiding the login link would remove a real navigation
   item. Scoped to `.hdr`, so the footer wordmark keeps its second word.

   Threshold 600px sits well below the 861px desktop breakpoint, so the desktop
   header is untouched by construction, not by hope.
   ========================================================================== */

@media (max-width:600px){
  .hdr .brandmark b span{ display:none; }
}

/* Hiding "Partners" stopped the two texts INTERSECTING but left them flush, so
   the header read as one run-on word, "FairSkyLogin". A rect-overlap probe
   passes that and a human does not, which is why the frame is the check.
   The login control is pushed to the far end of the row instead, next to the
   burger, so the wordmark and the control are separated by real space.
   Same max-width:600px scope, so the desktop header is still untouched. */
@media (max-width:600px){
  .hdr .portal--mobile{
    margin-left:auto;
    margin-right:clamp(10px,3vw,18px);
  }
}