/* ============================================================
   NOBL — OUR PLATFORM
   Page-scoped. Hero, buttons, eyebrows, CTA and the kit motifs
   all come from components.css.

   This is the product page, so it is the most product-forward
   page on the site: one big app frame up top, then six
   capabilities alternating left/right, each with the surface of
   the product that actually does the thing. Every surface is
   Smoke on a light section — the page is light, the product is
   dark, the way Stripe treats a code block.
   ============================================================ */


/* ------------------------------------------------------------
   1. HERO
   ------------------------------------------------------------ */

.pf-hero { padding-bottom: clamp(56px, 7vw, 92px); }
.pf-hero__title { max-width: 19ch; margin-bottom: 24px; }
.pf-hero__sub   { max-width: 58ch; margin-bottom: 34px; }
.pf-hero__ctas  { margin: 0 0 clamp(48px, 6vw, 76px); }

/* The one Fiber Fade on the site. The kit reserves the gradient
   for hero frames, so this is where it lives — as a wash the
   product sits on, never behind text. */
.pframe {
  position: relative;
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-card);
  padding: clamp(18px, 2.4vw, 30px);
  background:
    linear-gradient(135deg, rgba(91,157,181,0.16), rgba(58,111,149,0.10)),
    var(--s2);
  overflow: hidden;
}
.pframe__note {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 0;
}


/* --- the app shell -------------------------------------------
   Its left rail is the page's own table of contents: the six
   items here are the six sections below, in order.
   ------------------------------------------------------------ */

/* A dark surface owns its own text colour. These panels used to sit
   inside .section--dark and inherit a light colour from it; now that
   the sections around them are light, anything inside without an
   explicit colour falls through to near-black ink on near-black. */
.app {
  color: var(--on-dark-list);
  background: var(--smoke);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-mock);
}

.app__bar {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--bw-08);
  background: rgba(255,255,255,0.03);
}
.app__dots { display: flex; gap: 5px; flex: none; }
.app__dots i { width: 6.5px; height: 6.5px; border-radius: var(--r-full); background: var(--bw-14); }
.app__path {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-dark-mono);
  margin-right: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--accent-fill);
  flex: none;
}
.app__live i {
  width: 5px; height: 5px;
  border-radius: var(--r-full);
  background: var(--accent-fill);
  animation: noblPulse 2.4s ease-in-out infinite;
}

.app__body { display: grid; grid-template-columns: 148px minmax(0, 1fr); }

.app__rail {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 16px 12px;
  border-right: 1px solid var(--bw-08);
}
.app__rail-item {
  font-family: var(--font-mono);
  font-size: var(--t-chip);
  letter-spacing: var(--tr-chip);
  text-transform: uppercase;
  color: var(--on-dark-mono);
  padding: 9px 10px;
  border-radius: var(--r-button);
}
.app__rail-item.is-on {
  color: var(--on-dark-heading);
  background: rgba(255,255,255,0.06);
}

.app__main { padding: 20px 22px 24px; display: grid; gap: 22px; }

.app__stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--bw-08);
  border: 1px solid var(--bw-08);
  border-radius: var(--r-tile);
  overflow: hidden;
}
.app__stats > div { background: var(--smoke); padding: 14px 16px 16px; }
.app__stats dt {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-dark-mono);
  margin-bottom: 9px;
}
.app__stats dd {
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--on-dark-heading);
  font-variant-numeric: tabular-nums;
}
/* Gold is money, and only money. */
.app__stat--pay dd { color: var(--gold); }

.app__chart {
  border: 1px solid var(--bw-08);
  border-radius: var(--r-tile);
  padding: 15px 16px 16px;
}
.app__chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-dark-mono);
}
.app__chart-head em { font-style: normal; color: var(--accent-fill); }
.app__bars {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: end;
  gap: 7px;
  height: 104px;
}
.app__bars i {
  display: block;
  border-radius: var(--r-icon);
  background: rgba(91,157,181,0.30);
}
.app__bars i.is-peak { background: var(--accent-fill); }

@media (max-width: 760px) {
  .app__body { grid-template-columns: 1fr; }
  .app__rail {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 4px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--bw-08);
  }
  .app__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* $107.2K is the widest figure and ran out of its cell at 375 */
  .app__stats dd { font-size: 18px; }
}


/* ------------------------------------------------------------
   2–7. CAPABILITIES

   No longer one alternating row per module — the page changes
   shape as it goes: two interactive panels (mirrored), a focus
   surface, the shared system map, a full-width ranks view, and
   The Vault. The .cap rules below are retained only for the
   framed eyebrow and section head they still supply.
   ------------------------------------------------------------ */

.cap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: var(--gap-col-lg);
  align-items: center;
}
/* Reordering alone would hand the art the narrower track on every
   other row; swap the columns too so the surface keeps its width. */
.cap--flip { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); }
.cap--flip .cap__copy { order: 2; }

.cap__copy .h2 { margin-bottom: 20px; max-width: 18ch; }
.cap__copy .intro { max-width: 50ch; }

.cap__list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.cap__list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--t-card);
  line-height: var(--lh-body);
  color: var(--body);
}
.cap__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 7px; height: 7px;
  border-radius: var(--r-icon);
  background: var(--accent);
}

@media (max-width: 1000px) {
  .cap { grid-template-columns: 1fr; gap: 40px; }
  .cap--flip .cap__copy { order: 0; }
  .cap__copy .h2 { max-width: none; }
}


/* ------------------------------------------------------------
   PRODUCT SURFACES
   Every module's artwork shares one dark shell.
   ------------------------------------------------------------ */

/* A dark surface owns its own text colour. These panels used to sit
   inside .section--dark and inherit a light colour from it; now that
   the sections around them are light, anything inside without an
   explicit colour falls through to near-black ink on near-black. */
.surf {
  color: var(--on-dark-list);
  background: var(--smoke);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-mock);
}
.surf__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 13px 18px;
  border-bottom: 1px solid var(--bw-08);
  background: rgba(255,255,255,0.03);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-dark-mono);
}
.surf__head em { font-style: normal; color: var(--accent-fill); }

/* rows shared by roster / grades / board / lib */
.surf ol { list-style: none; margin: 0; padding: 6px 18px 10px; }
.surf ol > li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--bw-08);
}
.surf ol > li:last-child { border-bottom: 0; }
.surf b {
  display: block;
  font-size: var(--t-card);
  font-weight: 600;
  color: var(--on-dark-list);
}
.surf i {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-dark-mono);
  margin-top: 5px;
}

/* --- 2. roster --- */
.roster__av {
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  background: rgba(91,157,181,0.22);
  border: 1px solid rgba(91,157,181,0.4);
  flex: none;
}
.roster__who { flex: 1 1 auto; min-width: 0; }

/* --- 3. area grades --- */
.grades__g {
  width: 38px; height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-button);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.grades__g--a { background: var(--accent-soft); color: var(--accent-fill); border: 1px solid var(--accent-line); }
.grades__g--b { background: rgba(255,255,255,0.06); color: var(--on-dark-list); border: 1px solid var(--bw-14); }
.grades__g--d { background: rgba(200,96,80,0.14); color: #E08C7C; border: 1px solid rgba(200,96,80,0.4); }
.grades__who { flex: 1 1 auto; min-width: 0; }
.grades__act {
  flex: none;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--r-button);
  padding: 7px 12px;
}
.grades__act.is-off {
  background: none;
  color: var(--on-dark-mono);
  border: 1px solid var(--bw-14);
}

/* --- 4. payroll ledger --- */
.ledger { margin: 0; padding: 6px 18px 12px; }
.ledger > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--bw-08);
}
.ledger dt { font-size: var(--t-card); color: var(--on-dark-list); }
.ledger dt i { margin-top: 5px; }
.ledger dd {
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: var(--tr-display);
  color: var(--on-dark-heading);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ledger__neg dd { color: var(--on-dark-meta); }
.ledger__net {
  border-bottom: 0 !important;
  border-top: 1px solid var(--bw-18);
  margin-top: 4px;
  padding-top: 17px !important;
}
.ledger__net dt { color: var(--on-dark-heading); font-weight: 600; }
.ledger__net dd { color: var(--gold); font-size: 25px; }

/* --- 5. reporting --- */
.report { padding: 16px 18px 18px; }
.report__filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; }
.report__filters span {
  font-family: var(--font-mono);
  font-size: var(--t-chip);
  letter-spacing: var(--tr-chip);
  text-transform: uppercase;
  color: var(--on-dark-mono);
  border: 1px solid var(--bw-14);
  border-radius: var(--r-button);
  padding: 6px 10px 5px;
}
.report__filters span.is-on {
  color: var(--accent-fill);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.report__chart {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  height: 118px;
}
.report__chart i {
  display: block;
  border-radius: var(--r-icon);
  background: rgba(91,157,181,0.30);
}
.report__chart i.is-peak { background: var(--accent-fill); }
.report__foot {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-dark-mono);
}
.report__foot em { font-style: normal; color: var(--accent-fill); }

/* --- 6. leaderboard --- */
.board__n {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--t-chip);
  letter-spacing: var(--tr-chip);
  color: var(--on-dark-mono);
  width: 22px;
}
.board__who { flex: 1 1 auto; min-width: 0; }
.board__v {
  flex: none;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: var(--tr-display);
  color: var(--on-dark-heading);
  font-variant-numeric: tabular-nums;
}
/* First place is the money position. */
.board__top .board__n { color: var(--gold); }
.board__top .board__v { color: var(--gold); }
.board__key {
  margin: 0;
  padding: 0 18px 16px;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-dark-mono);
}

/* --- 7. resource library --- */
.lib__k {
  flex: none;
  width: 74px;
  font-family: var(--font-mono);
  font-size: var(--t-chip);
  letter-spacing: var(--tr-chip);
  text-transform: uppercase;
  color: var(--accent-fill);
}
.lib > li > b { flex: 1 1 auto; min-width: 0; }
.lib > li > i { flex: none; margin-top: 0; }

@media (max-width: 560px) {
  .surf ol { padding-inline: 14px; }
  .ledger, .report { padding-inline: 14px; }
  .surf__head { padding-inline: 14px; }
  .lib__k { width: 58px; }
}


/* ------------------------------------------------------------
   PLATFORM — spec panel extras

   The panel itself is shared (components.css). These are the two
   artifact shapes this page needs that For ISPs did not: a plain
   value column, and the team/org split.
   ------------------------------------------------------------ */

/* Mirror image: the list moves to the right, the stage to the left,
   so consecutive capability sections don't read as the same row
   twice. */
.spec--flip { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }
.spec--flip .spec__nav  { order: 2; }
.spec--flip .spec__stage { order: 1; }

/* a value rather than a status chip */
.spec__val {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: var(--tr-chip);
  color: var(--on-dark-heading);
  white-space: nowrap;
  flex: none;
}

/* the illustrated button on the invite card */
.spec__cta {
  margin: 14px 0 0;
}
.spec__cta span {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--r-button);
  padding: 9px 16px;
}

/* --- teams: the roster on one side, who reports to whom on the other --- */
.orgsplit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  padding-top: 14px;
}
.orgsplit__teams { list-style: none; margin: 0; padding: 0; }
.orgsplit__teams li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--bw-08);
}
.orgsplit__teams li:last-child { border-bottom: 0; }
.orgsplit__teams b {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--on-dark-list);
}
.orgsplit__teams span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: var(--tr-chip);
  text-transform: uppercase;
  color: var(--on-dark-mono);
  white-space: nowrap;
}

.orgsplit__tree {
  border-left: 1px solid var(--bw-08);
  padding-left: 18px;
}
.orgsplit__mgr {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--on-dark-heading);
}
.orgsplit__mgr i {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: var(--tr-chip);
  text-transform: uppercase;
  color: var(--accent-fill);
  margin-top: 4px;
}
/* the reporting line: one spine, a tick per rep */
.orgsplit__reps {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  position: relative;
}
.orgsplit__reps::before {
  content: "";
  position: absolute;
  left: 0; top: -6px; bottom: 9px;
  width: 1px;
  background: var(--bw-14);
}
.orgsplit__reps li {
  position: relative;
  padding: 5px 0;
  font-size: 12px;
  color: var(--on-dark-list);
}
.orgsplit__reps li::before {
  content: "";
  position: absolute;
  left: -14px; top: 50%;
  width: 10px; height: 1px;
  background: var(--bw-14);
}

@media (max-width: 980px) {
  .spec--flip { grid-template-columns: 1fr; }
  .spec--flip .spec__nav  { order: 1; }
  .spec--flip .spec__stage { order: 2; }
}
@media (max-width: 560px) {
  .orgsplit { grid-template-columns: 1fr; gap: 14px; }
  .orgsplit__tree { border-left: 0; border-top: 1px solid var(--bw-08); padding: 14px 0 0; }
}


/* --- the compact scorecard artifact --- */
.minigrade { padding-top: 14px; }
.minigrade__v {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 16px;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--on-dark-heading);
  font-variant-numeric: tabular-nums;
}
.minigrade__v span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: var(--tr-label);
  color: var(--on-dark-mono);
}
.minigrade__v em { font-style: normal; color: var(--gold); margin-left: 4px; }

.minigrade__parts { list-style: none; margin: 0; padding: 0; }
.minigrade__parts li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--bw-08);
}
.minigrade__parts span {
  font-size: 12px;
  color: var(--on-dark-list);
  white-space: nowrap;
}
.minigrade__parts i {
  display: block;
  height: 3px;
  border-radius: var(--r-full);
  background: var(--bw-10);
  overflow: hidden;
  position: relative;
}
.minigrade__parts i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--pct) * 1%);
  border-radius: inherit;
  background: var(--accent-fill);
}
.minigrade__parts b {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tr-chip);
  text-align: right;
  color: var(--on-dark-heading);
  font-variant-numeric: tabular-nums;
}
.minigrade__parts b em { font-style: normal; color: var(--on-dark-mono); }
.minigrade__scale {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tr-chip);
  text-transform: uppercase;
  color: var(--on-dark-mono);
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--bw-08);
}


/* ------------------------------------------------------------
   PAYROLL — one surface, focused

   A rep logged in, not an itemised sum. Hovering a module on the
   rail dims everything the module did not produce, which is the
   same focus device the home page uses on the OS mock.
   ------------------------------------------------------------ */

.payos {
  color: var(--on-dark-list);
  background: var(--smoke);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 44px 70px -40px rgba(11,13,15,0.6),
              0 4px 10px -4px rgba(11,13,15,0.18);
}

.payos__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 13px 20px;
  border-bottom: 1px solid var(--bw-08);
  background: rgba(255,255,255,0.03);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-dark-mono);
}
.payos__bar i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-fill); flex: none;
}
.payos__bar span { color: var(--on-dark-list); }
.payos__bar em { font-style: normal; margin-left: auto; }

.payos__body {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
}

/* --- the module rail --- */
.payos__rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 12px;
  border-right: 1px solid var(--bw-08);
}
.payos__mod {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 11px 12px;
  border-radius: var(--r-button);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--on-dark-body);
  transition: background var(--d-state), color var(--d-state);
}
.payos__mod:hover,
.payos__mod:focus-visible { background: rgba(255,255,255,0.06); color: var(--on-dark-heading); outline: none; }
.payos__ico {
  width: 16px; height: 16px;
  border-radius: var(--r-icon);
  flex: none;
  background: var(--bw-14);
}
.payos__ico--c { background: var(--accent-fill); }
.payos__ico--o { background: var(--gold); }
.payos__ico--x { background: var(--red); }
.payos__ico--d { background: var(--bw-25); }

/* --- the ledger --- */
.payos__main { padding: 16px 20px 20px; }
.payos__rows { list-style: none; margin: 0; padding: 0; }
.payos__rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bw-08);
}
.payos__id { font-size: 13px; color: var(--on-dark-list); white-space: nowrap; }
.payos__meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: var(--tr-chip);
  text-transform: uppercase;
  color: var(--on-dark-mono);
}
.payos__rows b {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: var(--tr-display);
  color: var(--on-dark-heading);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.payos__neg { color: var(--red) !important; }

.payos__net {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 16px 0 0;
}
.payos__net span { font-size: 13px; font-weight: 600; color: var(--on-dark-heading); }
.payos__net b {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: var(--tr-display);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.payos__act {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--bw-08);
}
.payos__btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--on-dark-heading);
  border: 1px solid var(--bw-25);
  border-radius: var(--r-button);
  padding: 9px 14px;
  white-space: nowrap;
}
.payos__act em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tr-chip);
  text-transform: uppercase;
  color: var(--on-dark-mono);
}

/* --- the focus device --- */
.payos [data-part] { transition: opacity var(--d-state); }
.payos[data-focus] [data-part] { opacity: .22; }
.payos[data-focus="commission"] [data-part="commission"],
.payos[data-focus="override"]   [data-part="override"],
.payos[data-focus="chargeback"] [data-part="chargeback"],
.payos[data-focus="dispute"]    [data-part="dispute"] { opacity: 1; }
/* the net is what every module resolves into, so it never dims */
.payos[data-focus] [data-part="net"] { opacity: 1; }
.payos[data-focus="dispute"] .payos__btn {
  border-color: var(--accent-fill);
  box-shadow: 0 0 0 4px rgba(91,157,181,0.14);
}

@media (max-width: 760px) {
  .payos__body { grid-template-columns: 1fr; }
  .payos__rail {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 1px solid var(--bw-08);
    padding: 12px;
  }
  .payos__mod { width: auto; font-size: 12px; padding: 9px 10px; }
  .payos__rows li { grid-template-columns: minmax(0, 1fr) auto; }
  .payos__meta { grid-column: 1 / 3; grid-row: 2; }
  .payos__main { padding: 14px 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .payos [data-part] { transition: none; }
}


/* ------------------------------------------------------------
   RANKS & COMPETITIONS

   Full width so the page changes gear here. Three ranks run the
   track; Prestige sits past the end of the meter and is drawn as
   out of reach rather than as the next step, because most reps
   never take it.
   ------------------------------------------------------------ */

.ranks {
  color: var(--on-dark-list);
  background: var(--smoke);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 44px 70px -40px rgba(11,13,15,0.6),
              0 4px 10px -4px rgba(11,13,15,0.18);
}
.ranks__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 13px 22px;
  border-bottom: 1px solid var(--bw-08);
  background: rgba(255,255,255,0.03);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-dark-mono);
}
.ranks__bar i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-fill); flex: none; }
.ranks__bar span { color: var(--on-dark-list); }
.ranks__bar em { font-style: normal; margin-left: auto; }

/* --- the track --- */
.ranks__track { padding: 26px 22px 24px; border-bottom: 1px solid var(--bw-08); }
.ranks__tiers {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.ranks__tiers li {
  padding: 14px 16px 15px;
  border-radius: var(--r-card);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--bw-08);
}
.ranks__tiers b {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 17px;
  line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--on-dark-mono);
}
.ranks__tiers span {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tr-chip);
  text-transform: uppercase;
  color: var(--on-dark-mono);
  margin-top: 8px;
}
.ranks__tiers .is-done b { color: var(--on-dark-list); }
.ranks__tiers .is-done span { color: var(--accent-fill); }
.ranks__tiers .is-now {
  background: rgba(91,157,181,0.10);
  border-color: var(--accent-fill);
}
.ranks__tiers .is-now b { color: var(--on-dark-heading); }
.ranks__tiers .is-now span { color: var(--accent-fill); }
/* Prestige is past the meter, not the next step on it. */
.ranks__tiers .is-prestige {
  background: transparent;
  border-style: dashed;
  border-color: rgba(212,168,90,0.42);
}
.ranks__tiers .is-prestige b { color: var(--gold); }
.ranks__tiers .is-prestige span { color: rgba(212,168,90,0.75); }

.ranks__meter {
  margin: 0;
  height: 5px;
  border-radius: var(--r-full);
  background: var(--bw-10);
  overflow: hidden;
}
.ranks__meter i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent-fill);
  transition: width 1.1s var(--ease-out) .25s;
}
.ranks[data-reveal="in"] .ranks__meter i { width: calc(var(--pct) * 1%); }
.ranks__next {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--on-dark-mono);
  margin: 11px 0 0;
}

/* --- competition + leaderboard --- */
.ranks__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ranks__comp  { padding: 22px; border-right: 1px solid var(--bw-08); }
.ranks__board { padding: 22px; }
.ranks__h {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-dark-mono);
  margin: 0 0 14px;
}
.ranks__comp-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--on-dark-heading);
  margin: 0 0 18px;
}
.ranks__meta { list-style: none; margin: 0; padding: 0; }
.ranks__meta li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--bw-08);
}
.ranks__meta span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: var(--tr-chip);
  text-transform: uppercase;
  color: var(--on-dark-mono);
}
.ranks__meta b { font-size: 13px; font-weight: 600; color: var(--on-dark-heading); white-space: nowrap; }
.ranks__meta .is-gold { color: var(--gold); }
.ranks__prize {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--on-dark-list);
}
.ranks__prize span {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tr-chip);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}

.ranks__list { list-style: none; margin: 0; padding: 0; }
.ranks__list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--bw-08);
}
.ranks__list li:last-child { border-bottom: 0; }
.ranks__pos {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tr-chip);
  color: var(--on-dark-mono);
  font-variant-numeric: tabular-nums;
}
.ranks__who { font-size: 13px; color: var(--on-dark-list); min-width: 0; }
.ranks__who i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: var(--tr-chip);
  text-transform: uppercase;
  color: var(--accent-fill);
  margin-left: 8px;
}
.ranks__list b {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: var(--tr-display);
  color: var(--on-dark-heading);
  font-variant-numeric: tabular-nums;
}
.ranks__list .is-you .ranks__pos,
.ranks__list .is-you b { color: var(--accent-fill); }

@media (max-width: 900px) {
  .ranks__tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ranks__split { grid-template-columns: 1fr; }
  .ranks__comp { border-right: 0; border-bottom: 1px solid var(--bw-08); }
}
@media (max-width: 520px) {
  .ranks__tiers { grid-template-columns: 1fr; }
  .ranks__track, .ranks__comp, .ranks__board { padding: 18px 16px; }
  .ranks__bar { padding: 12px 16px; }
  .ranks__bar em { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ranks__meter i { transition: none; }
}


/* ------------------------------------------------------------
   THE VAULT — and The Architect underneath it

   The AI layer is drawn as a layer: full width, at the FOOT of the
   panel, with each category feeding down into it. Making it a
   fourth tile beside the three would say the opposite of what it
   is.
   ------------------------------------------------------------ */

.vault {
  color: var(--on-dark-list);
  background: var(--smoke);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 44px 70px -40px rgba(11,13,15,0.6),
              0 4px 10px -4px rgba(11,13,15,0.18);
}
.vault__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 13px 22px;
  border-bottom: 1px solid var(--bw-08);
  background: rgba(255,255,255,0.03);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-dark-list);
}
.vault__bar i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-fill); flex: none; }

.vault__body { padding: 26px 22px 22px; }

.vault__cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.vault__cats li {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 24px;
  border-radius: var(--r-card);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--bw-10);
}
.vault__ico {
  width: 20px; height: 20px;
  border-radius: var(--r-icon);
  background: var(--accent-fill);
  margin-bottom: 16px;
}
.vault__cats li:nth-child(2) .vault__ico { background: var(--gold); }
.vault__cats li:nth-child(3) .vault__ico { background: var(--on-dark-meta); }
.vault__cats b {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--on-dark-heading);
}
.vault__desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--on-dark-body);
  margin-top: 8px;
}
/* each category feeds down into the layer */
.vault__feed {
  position: absolute;
  left: 50%; top: 100%;
  width: 1px; height: 22px;
  background: linear-gradient(180deg, var(--bw-14), rgba(91,157,181,0.65));
}

.vault__layer {
  position: relative;
  overflow: hidden;
  margin-top: 22px;
  padding: 22px 22px 24px;
  border-radius: var(--r-card);
  background:
    radial-gradient(rgba(255,255,255,0.075) 1px, transparent 1.2px) 0 0 / 14px 14px,
    linear-gradient(180deg, rgba(91,157,181,0.16), rgba(91,157,181,0.05));
  border: 1px solid rgba(91,157,181,0.38);
}
/* a slow sweep, so the layer reads as running rather than drawn */
.vault__scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(91,157,181,0.22), transparent);
  transform: translateX(-100%);
  animation: vaultScan 6s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes vaultScan { to { transform: translateX(100%); } }

.vault__layer-name {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--on-dark-heading);
}
.vault__layer-sub {
  position: relative;
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--accent-fill);
}

@media (max-width: 820px) {
  .vault__cats { grid-template-columns: 1fr; gap: 12px; }
  .vault__feed { display: none; }
}
@media (max-width: 520px) {
  .vault__body { padding: 18px 16px 16px; }
  .vault__bar { padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .vault__scan { animation: none; display: none; }
}