/* ============================================================
   RIVET · B2B dark layer (Brand OS v1.2)
   Loaded ONLY by license.html and for-companies.html, after
   os-dark.css. Every rule is scoped to html[data-mode="dark"] so
   this file is inert anywhere else, and the Brand OS pass can
   delete it once the global token CSS covers the same ground.
   - Ground: flat black. No full-bleed gradients.
   - Cards: elev-1, no border, no shadow.
   - Magenta: the primary action plus at most one insight a screen.
   - No gradients. The CTA band is a flat elev-1 card: a dark-anchored
     duo would dissolve into the black ground at its anchor edge, and
     no other duo keeps the magenta button at 3:1 or more.
   - Text: ghost-white headings, #B7B7C6 body, purple-500 labels.
   - Focus: 3px purple-500 ring, 2px offset.
   - Phones: 12px text floor, 44px tap targets.
   ============================================================ */

/* ---- Ground ---- */
html[data-mode="dark"] body{ background:#000; background-image:none; }
html[data-mode="dark"] main :is(.phero,.section--alt,.section--paper){ background:transparent; }

/* ---- Type colours ---- */
html[data-mode="dark"] main .eyebrow{ color:var(--purple-500,#7B87FF); }
html[data-mode="dark"] main .lead{ color:#B7B7C6; }
html[data-mode="dark"] main .muted{ color:var(--slate-on-dark,#9A9BBD); }
html[data-mode="dark"] main .label{ color:var(--purple-500,#7B87FF); font-size:max(12px,var(--step--2)); }
html[data-mode="dark"] main p a:not(.btn),
html[data-mode="dark"] main .b2b-link{ color:var(--purple-500,#7B87FF); font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
html[data-mode="dark"] main p a:not(.btn):hover,
html[data-mode="dark"] main .b2b-link:hover{ color:#F8F8FA; }
html[data-mode="dark"] main [lang="ar"]{ font-family:var(--font-ar,'Almarai',sans-serif); }

/* ---- Focus: the global ring in rivet.css, purple-500 on these dark pages via --focus-ring ---- */

/* ---- Cards: elev-1, no border, no shadow ---- */
html[data-mode="dark"] main :is(.tile,.step,.jrny,.chartmock,.logotile,.casestudy,.figcard,.gradquote,.b2b-card){
  background:var(--elev-1,#0A0A0C); border:0; box-shadow:none;
}
html[data-mode="dark"] main :is(.tile,.step)::before{ display:none; }   /* no gradient strips */
html[data-mode="dark"] main :is(.tile h3,.step h3,.jrny__t,.chartmock__head b,.casestudy h3,.b2b-card h3){ color:#F8F8FA; }
html[data-mode="dark"] main :is(.tile p,.step p,.casestudy p,.b2b-card p){ color:#B7B7C6; }
html[data-mode="dark"] main .tile h3{ font-size:var(--role-card); }
html[data-mode="dark"] main .tile p,
html[data-mode="dark"] main .step p{ font-size:0.95rem; line-height:1.55; }

/* Numerals are Plex Mono */
html[data-mode="dark"] main :is(.step__n,.tile__n){ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
html[data-mode="dark"] main .step__n{ background:var(--elev-3,#1A1A22); color:#F8F8FA; width:32px; height:32px; }
html[data-mode="dark"] main .tile__n{ font-size:0.8rem; font-weight:600; letter-spacing:0.08em; color:var(--purple-500,#7B87FF); }

/* ---- Hero facts row: Mono meta, 12px floor ---- */
html[data-mode="dark"] main .b2b-facts{
  list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 16px;
  font-family:var(--font-mono); font-size:max(12px,0.78rem); letter-spacing:0.08em; text-transform:uppercase;
  color:var(--slate-on-dark,#9A9BBD);
}
html[data-mode="dark"] main .b2b-facts li{ display:inline-flex; align-items:flex-start; gap:8px; }
html[data-mode="dark"] main .b2b-facts li::before{ content:""; width:6px; height:6px; border-radius:2px; background:var(--purple-500,#7B87FF); flex:none; margin-top:.5em; margin-top:calc(.5lh - 3px); } /* bullet centred on the first line when a fact wraps */
html[data-mode="dark"] main .b2b-facts [lang="ar"]{ text-transform:none; letter-spacing:0; font-size:0.9rem; }

/* ---- Short note under a block (e.g. the delivery method line) ---- */
html[data-mode="dark"] main .b2b-note{ margin:clamp(18px,2.4vw,26px) 0 0; color:#B7B7C6; max-width:70ch; }

/* ---- Sub-head inside a section ---- */
html[data-mode="dark"] main .b2b-subhead{
  margin:clamp(36px,4.4vw,56px) 0 clamp(16px,2vw,22px);
  font-family:var(--font-mono); font-size:max(12px,0.8rem); font-weight:500; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--purple-500,#7B87FF);
}

/* ---- Journeys ---- */
html[data-mode="dark"] main .jrny:hover{ border-color:transparent; box-shadow:none; }
html[data-mode="dark"] main .jrny__n{ background:var(--elev-2,#12121A); color:#F8F8FA; }
html[data-mode="dark"] main .jrny__from{ color:var(--slate-on-dark,#9A9BBD); font-size:max(12px,0.72rem); }
html[data-mode="dark"] main .jrny__from .ar-arrow{ color:var(--purple-500,#7B87FF); }

/* ---- Case study: one bounded elev-1 card, no 3-stop gradient ---- */
html[data-mode="dark"] main .casestudy__tag{ font-size:12px; white-space:nowrap; }
/* at 12px the pill no longer fits beside the logo on phones: let it drop below on one line */
html[data-mode="dark"] main .casestudy__brand{ flex-wrap:wrap; row-gap:10px; }
html[data-mode="dark"] main .casestudy__meta{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; color:var(--slate-on-dark,#9A9BBD); }
/* Column labels are h3 (a11y-8). The whole rule lives here, not in the long-cached
   components.css, so returning visitors get it without a stamp bump. */
html[data-mode="dark"] main .casestudy__col :is(h3,.casestudy__k){ /* a label, not a heading (no Mono caps headings) */  font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; margin:0 0 8px; color:var(--slate-on-dark,#9A9BBD); }
html[data-mode="dark"] main .casestudy__metric span{ color:#B7B7C6; }
html[data-mode="dark"] main .casestudy__metrics{ border-top-color:var(--elev-4,#1E1E2A); }
html[data-mode="dark"] main .casestudy__quote small{ font-size:12px; color:var(--slate-on-dark,#9A9BBD); }
html[data-mode="dark"] main .casestudy__source{ margin:16px 0 0; font-family:var(--font-mono); font-size:12px; color:var(--slate-on-dark,#9A9BBD); }
html[data-mode="dark"] main .casestudy__source:empty{ display:none; }

/* ---- Evidence chart: one series, one magenta insight, labelled directly in ink ---- */
html[data-mode="dark"] main .chartmock__bars i{ background:var(--purple-500,#7B87FF); opacity:1; }
html[data-mode="dark"] main .chartmock__bars i.hot{ position:relative; background:var(--magenta,#FF00D4); box-shadow:none; }
html[data-mode="dark"] main .chartmock__lbl{
  position:absolute; right:0; bottom:calc(100% + 6px); white-space:nowrap;
  font-family:var(--font-mono); font-style:normal; font-size:12px; line-height:1.2; letter-spacing:0.08em; text-transform:uppercase; color:#F8F8FA;
}
html[data-mode="dark"] main .chartmock__x span{ color:var(--slate-on-dark,#9A9BBD); font-size:12px; }
html[data-mode="dark"] main .chartmock__foot span{ color:#B7B7C6; font-size:12px; }
html[data-mode="dark"] main .chartmock__foot i.is-base{ background:var(--purple-500,#7B87FF); }
html[data-mode="dark"] main .chartmock__note{ margin:0; padding-top:12px; border-top:1px solid var(--elev-4,#1E1E2A); font-size:12px; line-height:1.5; color:var(--slate-on-dark,#9A9BBD); }

/* ---- Maturity model: flat plate, level 3 is the one insight ---- */
html[data-mode="dark"] main .gstage:not(.camelx-stage){ background:var(--elev-1,#0A0A0C); border:0; box-shadow:none; }
html[data-mode="dark"] main .gstage__tag{ font-size:12px; }
html[data-mode="dark"] main .gstage:not(.camelx-stage) .gnode{
  background:var(--elev-2,#12121A); border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
}
html[data-mode="dark"] main .gstage:not(.camelx-stage) .gnode::before{ display:none; }
html[data-mode="dark"] main .gnode::after{ box-shadow:none; }
html[data-mode="dark"] main :is(.mlvl--1,.mlvl--2){ --gc:var(--dv-6,#5E5F7E); }
html[data-mode="dark"] main .mlvl--3{ --gc:var(--magenta,#FF00D4); }
html[data-mode="dark"] main :is(.mlvl--4,.mlvl--5){ --gc:var(--purple-500,#7B87FF); }
html[data-mode="dark"] main .mlvl .num{ color:#F8F8FA; }
html[data-mode="dark"] main .gstage:not(.camelx-stage) .mlvl small{ color:#B7B7C6; font-size:max(12px,0.76rem); }
html[data-mode="dark"] main .gstage:not(.camelx-stage) .mlvl__pin{
  top:0; transform:translate(-50%,-50%); z-index:2; background:var(--elev-3,#1A1A22); border:0; color:#F8F8FA; font-size:12px; padding:3px 8px;
}
html[data-mode="dark"] main .gstage:not(.camelx-stage) .mlvl__pin--os{ color:#F8F8FA; }   /* ink: the level-3 bar is the one magenta insight */
html[data-mode="dark"] main .gstage:not(.camelx-stage) .matur__note{ color:#B7B7C6; }

/* ---- Figures ---- */
html[data-mode="dark"] main .figcard:hover{ box-shadow:none; }
html[data-mode="dark"] main .figcard figcaption{ border-top:0; background:transparent; }
html[data-mode="dark"] main .figcard figcaption p{ color:#B7B7C6; font-size:0.88rem; }

/* ---- Stat row: solid ink numerals (no gradient text) ---- */
html[data-mode="dark"] main .statrow > div{ border-top-color:var(--elev-4,#1E1E2A); }
html[data-mode="dark"] main .statrow dt{ background:none; -webkit-background-clip:border-box; background-clip:border-box; color:#F8F8FA; -webkit-text-fill-color:currentColor; }
html[data-mode="dark"] main .statrow dd{ color:#B7B7C6; }

/* ---- Certified members marquee (styles injected by certified-members.js) ---- */
html[data-mode="dark"] main .cmemb__k{ color:var(--purple-500,#7B87FF); font-size:12px; }
html[data-mode="dark"] main .cmemb__count{ color:var(--slate-on-dark,#9A9BBD); font-size:12px; }
html[data-mode="dark"] main .cmemb__name{ color:#F8F8FA; }
html[data-mode="dark"] main .cmemb__role{ color:var(--slate-on-dark,#9A9BBD); font-size:12px; }
html[data-mode="dark"] main .cmemb__star{ background:var(--purple,#3B06D4); border-color:#000; }
html[data-mode="dark"] main .cmemb__li{ color:var(--purple-500,#7B87FF); border-color:var(--elev-4,#1E1E2A); }

/* ---- Testimonial ---- */
html[data-mode="dark"] main .gradquote::before{ display:none; }
html[data-mode="dark"] main .gradquote blockquote{ color:#F8F8FA; }
html[data-mode="dark"] main .gradquote figcaption{ color:var(--slate-on-dark,#9A9BBD); font-size:12px; }
html[data-mode="dark"] main .gradquote figcaption b{ color:#F8F8FA; }
html[data-mode="dark"] main .gradquote__badge{ color:var(--purple-500,#7B87FF); font-size:12px; }
html[data-mode="dark"] main .gradquote__photo{ border-color:var(--elev-2,#12121A); }
@media (max-width:560px){
  /* at 12px the corner badge would sit on the photo; put it in the column flow */
  html[data-mode="dark"] main .gradquote__badge{ position:static; }
}
html[data-mode="dark"] main .b2b-li{
  position:relative; display:inline-grid; place-items:center; width:24px; height:24px; margin-left:6px; vertical-align:middle;
  color:var(--purple-500,#7B87FF); background:var(--elev-2,#12121A); border-radius:6px;
}
html[data-mode="dark"] main .b2b-li::after{ content:""; position:absolute; inset:-10px; }   /* 44px hit area */

/* ---- CTA band: a flat elev-1 card, no duo.
   Brand OS: a dark-anchored duo (Depth) on a black page dissolves into the ground
   at its anchor edge. The duos that avoid that (Dusk, System) put the magenta
   button below 3:1 (2.5:1 on slate, 2.9:1 on purple). On elev-1 the button is
   5.8:1, white is 19:1, #D1D1D9 is 13:1 and the purple-500 eyebrow is 5.6:1. ---- */
html[data-mode="dark"] main .ctaband{ background:var(--elev-1,#0A0A0C); background-image:none; border:0; box-shadow:none; }
html[data-mode="dark"] main .ctaband::before,
html[data-mode="dark"] main .ctaband::after{ display:none; }
html[data-mode="dark"] main .ctaband h2{ color:#F8F8FA; }
html[data-mode="dark"] main .ctaband p{ color:var(--silver,#D1D1D9); }
html[data-mode="dark"] main .ctaband .eyebrow{ color:var(--purple-500,#7B87FF); }

/* ---- Offer cards (owner partials) ---- */
html[data-mode="dark"] main .b2b-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,20px); }
html[data-mode="dark"] main .b2b-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:760px){ html[data-mode="dark"] main :is(.b2b-grid,.b2b-grid--2){ grid-template-columns:1fr; } }
html[data-mode="dark"] main .b2b-card{ display:flex; flex-direction:column; gap:10px; padding:clamp(20px,2.4vw,28px); border-radius:var(--r-lg,24px); }
html[data-mode="dark"] main .b2b-card p{ margin:0; }
html[data-mode="dark"] main .b2b-card__k{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--purple-500,#7B87FF); }
html[data-mode="dark"] main .b2b-card .b2b-card__price{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:var(--step-2); font-weight:600; color:#F8F8FA; letter-spacing:-0.02em; }
html[data-mode="dark"] main .b2b-card .b2b-card__meta{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--slate-on-dark,#9A9BBD); }
html[data-mode="dark"] main .b2b-card ul{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; color:#B7B7C6; font-size:0.95rem; }
html[data-mode="dark"] main .b2b-card li{ position:relative; padding-left:16px; line-height:1.55; }
html[data-mode="dark"] main .b2b-card li::before{ content:""; position:absolute; left:0; top:0.6em; width:6px; height:6px; border-radius:2px; background:var(--purple-500,#7B87FF); }
html[data-mode="dark"] main .b2b-card__foot{ margin-top:auto; padding-top:8px; display:flex; flex-wrap:wrap; gap:10px; }
html[data-mode="dark"] main .b2b-partner__logo{ height:40px; width:auto; align-self:flex-start; }
html[data-mode="dark"] main .b2b-partner__quote{ margin:4px 0 0; }
html[data-mode="dark"] main .b2b-partner__quote blockquote{ margin:0; color:#F8F8FA; line-height:1.5; }
html[data-mode="dark"] main .b2b-partner__quote figcaption{ margin-top:8px; }

/* ---- Book-a-call card (owner partial) ---- */
html[data-mode="dark"] main .b2b-book{ align-items:flex-start; }

/* ---- FAQ accordion ---- */
html[data-mode="dark"] main .b2b-faq{ display:flex; flex-direction:column; gap:10px; max-width:860px; }
html[data-mode="dark"] main .b2b-faq details{ background:var(--elev-1,#0A0A0C); border-radius:var(--r-md,16px); }
html[data-mode="dark"] main .b2b-faq summary{
  min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 20px; cursor:pointer; list-style:none; font-weight:600; color:#F8F8FA; border-radius:inherit;
}
html[data-mode="dark"] main .b2b-faq summary::-webkit-details-marker{ display:none; }
html[data-mode="dark"] main .b2b-faq summary::after{ content:"+"; flex:none; font-family:var(--font-mono); font-size:1.1rem; color:var(--purple-500,#7B87FF); }
html[data-mode="dark"] main .b2b-faq details[open] summary::after{ content:"\2212"; }
html[data-mode="dark"] main .b2b-faq details p{ margin:0; padding:0 20px 18px; color:#B7B7C6; max-width:70ch; }

/* ---- Phones: full-width 44px buttons, 12px floor ---- */
html[data-mode="dark"] main .btn{ min-height:44px; }
@media (max-width:560px){
  html[data-mode="dark"] main :is(.phero__cta,.ctaband__cta) .btn{ width:100%; }
  html[data-mode="dark"] main .ctaband{ padding:24px 20px; }
}

/* ---- Motion ---- */
@media (prefers-reduced-motion: reduce){
  html[data-mode="dark"] main :is(.jrny,.gnode,.figcard,.tile){ transition:none; }
  html[data-mode="dark"] main :is(.jrny,.gnode,.figcard,.tile):hover{ transform:none; }
}