/* ============================================================
   COMPLIANCE . Authorisation and safeguarding (compliance.html) + Personal account safeguarding
   (compliance-individuals.html) . 2026-10-26
   Ground truth: 26.10 pages/Compliance/Spec+Html/digidoe-compliance.html + digidoe-compliance-page-spec.md (1440 wide).
   One frame, two routes (Yuval 2026-10-26: "basically the same pages, users just get to them from different places").

   Same recipe as sept-dev.css: <main> IS the designer's markup (classes cmp-*, qa/oracle/designer_to_main.py) and
   this is his stylesheet with the mechanical changes (qa/oracle/skin_css.py):
     .x                 -> [data-skin="cmp"] #main .cmp-x
     hero photo         -> his CSS background, data: URI -> sept/compliance/hero.webp (md5-matched)
     embedded images    -> his named files under sept/compliance/ (md5-matched); photos as webp
     body min-width     -> gone (D1); the block at the end relaxes his fixed widths below 1300.
     nav + footer       -> his rules dropped (33 selectors), chrome stays live (D2): dd-nav.css + sept-footer.css

   Deviations from his HTML, each on record:
     badges     the proof pages show the OFFICIAL badge artwork (docs/iso-badge-rules.md s.1) inside his two ISO cards,
                120px square so the type stays legible (s.2), in place of his medal line icon. Yuval 2026-10-26:
                "we are allowed to use the real badges" on compliance. His .feat height is therefore auto.
     vault      his safeguarding export carries the pre-26-October "RING-FENCED" label; the live SEGREGATED image
                (assets/aug03/compliance--safeguarding-funds.webp, David's note) fills his 650x543 slot instead.
     blank lines his <br><br> blank lines in two cards are two paragraphs (the live freeze reads two nodes); the
                second paragraph carries the same one-line gap.
     individuals the Individual route keeps its own h1, hero lines, one FAQ sentence, CTA title and its
                "Your information supports account checks." section (.cmp-info, drawn in his safeguarding text styles).
     reveals    kept (D3): scroll-driven, same timing family as alt-home.css, defined at the end.
   ============================================================ */

/* ---------- resets his page relied on, scoped to main (skin_css.py standard block) ---------- */
html[data-skin="cmp"] body{background:#fff}
[data-skin="cmp"] main{
  width:100%;overflow-x:clip;color:#121212;font-size:16px;line-height:normal;letter-spacing:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;
}
[data-skin="cmp"] #main *,[data-skin="cmp"] #main *::before,[data-skin="cmp"] #main *::after{box-sizing:border-box}
[data-skin="cmp"] #main *{margin:0;padding:0}
[data-skin="cmp"] #main ul{list-style:none}
[data-skin="cmp"] #main a{color:inherit;text-decoration:none}
[data-skin="cmp"] #main img,[data-skin="cmp"] #main svg{display:block}
[data-skin="cmp"] #main h1,[data-skin="cmp"] #main h2,[data-skin="cmp"] #main h3,[data-skin="cmp"] #main p{max-width:none;letter-spacing:0;text-wrap:initial}
[data-skin="cmp"] #main section{position:relative;width:100%}   /* his absolute .divider hairlines hang off the section (Payments and FX taught this) */

/* ---------- his page, transcribed (skin_css.py) ---------- */
/* ---------- Shared ---------- */
[data-skin="cmp"] #main .cmp-wrap-1280{max-width:1280px;margin:0 auto}
[data-skin="cmp"] #main .cmp-col-1440{width:1440px;margin:0 auto;background:#FFFFFF}
[data-skin="cmp"] #main .cmp-btn{height:47px;border-radius:100px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-size:16px;line-height:19px;padding:0 24px;border:0;cursor:pointer}
[data-skin="cmp"] #main .cmp-btn--dark{background:#121212;color:#FFFFFF;font-weight:700}
[data-skin="cmp"] #main .cmp-btn--light{background:#FFFFFF;color:#121212;font-weight:700}
[data-skin="cmp"] #main .cmp-btn--grey{background:#F4F3F0;color:#555049;font-weight:500}
[data-skin="cmp"] #main .cmp-btn--glass{background:rgba(18,18,18,0.16);color:#FFFFFF;font-weight:500}
[data-skin="cmp"] #main .cmp-h-section{font-size:44px;line-height:53px;font-weight:500;color:#121212}
[data-skin="cmp"] #main .cmp-body-16{font-size:16px;line-height:24px;font-weight:400}
[data-skin="cmp"] #main .cmp-divider{width:1160px;height:0;margin:0 auto;border-top:1px solid #D6D2C7;margin-bottom:-1px;position:relative;z-index:1}
/* ---------- 1. Navbar ---------- */
/* ---------- 2. Hero ---------- */
[data-skin="cmp"] #main .cmp-hero{height:708px;padding:0 80px;display:flex;flex-direction:column;align-items:center;gap:20px}
[data-skin="cmp"] #main .cmp-hero__card{width:1280px;height:640px;flex:none;border-radius:48px;overflow:hidden;padding:80px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:40px;
  background:url(sept/compliance/hero.webp) center/cover no-repeat}
[data-skin="cmp"] #main .cmp-hero__text{width:500px;display:flex;flex-direction:column;gap:20px}
[data-skin="cmp"] #main .cmp-hero__title{font-size:52px;line-height:63px;font-weight:500;color:#FFFFFF}
[data-skin="cmp"] #main .cmp-hero__sub{width:480px;color:#FFFFFF;opacity:.8}
[data-skin="cmp"] #main .cmp-hero__btns{display:flex;gap:20px}
[data-skin="cmp"] #main .cmp-hero__disc{white-space:nowrap;text-align:center;color:#7B756D;flex:none}
/* ---------- 3. Safeguarding ---------- */
[data-skin="cmp"] #main .cmp-safe{height:743px;position:relative}
[data-skin="cmp"] #main .cmp-safe__text{position:absolute;left:160px;top:200px;width:480px;display:flex;flex-direction:column;gap:20px}
[data-skin="cmp"] #main .cmp-safe__text p{color:#5C5750}
[data-skin="cmp"] #main .cmp-safe__img{position:absolute;left:715px;top:100px;width:650px;height:543px;object-fit:cover}
/* ---------- 4. Feature grid ---------- */
[data-skin="cmp"] #main .cmp-feat{height:1048px;padding:140px 80px 160px;display:flex;flex-direction:column;align-items:center;gap:80px;overflow:hidden}
[data-skin="cmp"] #main .cmp-feat__title{width:666px;text-align:center}
[data-skin="cmp"] #main .cmp-feat__grid{width:1200px;display:flex;flex-direction:column;gap:30px}
[data-skin="cmp"] #main .cmp-feat__row{display:flex;gap:30px;align-items:stretch}
[data-skin="cmp"] #main .cmp-card{width:380px;flex:none;background:#F4F3F0;border-radius:24px;padding:30px;display:flex;flex-direction:column;gap:30px;overflow:hidden}
[data-skin="cmp"] #main .cmp-card__icon{width:40px;height:40px}
[data-skin="cmp"] #main .cmp-card__text{width:320px;display:flex;flex-direction:column;gap:12px}
[data-skin="cmp"] #main .cmp-card__title{font-size:24px;line-height:29px;font-weight:500;color:#121212}
[data-skin="cmp"] #main .cmp-card__body{font-size:14px;line-height:18.9px;font-weight:400;color:#555049}
[data-skin="cmp"] #main .cmp-card__body a{color:#AC5900}
/* ---------- 5. FAQ ---------- */
[data-skin="cmp"] #main .cmp-faq{height:1052px;padding:140px 80px 80px;display:flex;flex-direction:column;align-items:center;gap:60px;overflow:hidden}
[data-skin="cmp"] #main .cmp-faq__title{width:666px;text-align:center}
[data-skin="cmp"] #main .cmp-faq__list{width:800px;display:flex;flex-direction:column}
[data-skin="cmp"] #main .cmp-faq__item{padding:40px 0;display:flex;flex-direction:column;gap:20px;border-bottom:1px solid #D6D2C7}
[data-skin="cmp"] #main .cmp-faq__q{font-size:28px;line-height:34px;font-weight:500;color:#121212}
[data-skin="cmp"] #main .cmp-faq__a{color:#5C5750}
/* ---------- 6. CTA ---------- */
[data-skin="cmp"] #main .cmp-cta{height:640px;padding:80px}
[data-skin="cmp"] #main .cmp-cta__card{width:1280px;height:480px;background:#121212;border-radius:48px;overflow:hidden;position:relative}
[data-skin="cmp"] #main .cmp-cta__img{position:absolute;left:74px;top:30px;width:559px;height:420px;object-fit:cover}
[data-skin="cmp"] #main .cmp-cta__text{position:absolute;left:680px;top:109.5px;width:520px;display:flex;flex-direction:column;gap:40px;align-items:flex-start}
[data-skin="cmp"] #main .cmp-cta__group{display:flex;flex-direction:column;gap:20px}
[data-skin="cmp"] #main .cmp-cta__title{color:#FFFFFF}
[data-skin="cmp"] #main .cmp-cta__sub{color:#A0A0A0}
/* ---------- 7. Footer ---------- */
[data-skin="cmp"] #main .cmp-legal{font-size:12px;line-height:18px;color:#555049}
[data-skin="cmp"] #main .cmp-btn:focus-visible{outline:2px solid #AC5900;outline-offset:2px}

/* ---------- the official badge artwork in his two ISO cards (iso-badge-rules s.1, s.2): the artwork is square with its
     own white margin, so a 120 square replaces his 40px medal icon; row 2 grows with it, the section height is auto ---------- */
[data-skin="cmp"] #main .cmp-feat{height:auto}
[data-skin="cmp"] #main .cmp-card__icon[src*="badges/official"]{width:120px;height:120px}
/* his blank line inside a card = one body line; the second paragraph keeps that distance */
[data-skin="cmp"] #main .cmp-card__body--more{margin-top:7px}
/* ---------- the Individual route's own section, in his safeguarding text styles ---------- */
[data-skin="cmp"] #main .cmp-info{padding:140px 80px 60px;display:flex;flex-direction:column;align-items:center}
[data-skin="cmp"] #main .cmp-info__inner{width:800px;display:flex;flex-direction:column;gap:20px}
[data-skin="cmp"] #main .cmp-info__title{font-size:44px;line-height:53px;font-weight:500;color:#121212}
[data-skin="cmp"] #main .cmp-info__lead,[data-skin="cmp"] #main .cmp-info__text{font-size:16px;line-height:24px;font-weight:400;color:#5C5750}
[data-skin="cmp"] #main .cmp-info__text a{color:#AC5900}
[data-skin="cmp"] #main .cmp-info__text a:hover{text-decoration:underline}
[data-skin="cmp"] #main .cmp-btn:hover{filter:brightness(0.95)}

/* ---------- D3: reveals, the alt-home family ---------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    @keyframes cmp-rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
    @keyframes cmp-scale-in{from{opacity:0;transform:translateY(28px) scale(.965)}to{opacity:1;transform:none}}
    [data-skin="cmp"] #main .cmp-hero__card,[data-skin="cmp"] #main .cmp-cta__card{animation:cmp-scale-in both;animation-timeline:view();animation-range:entry 0% entry 42%}
    [data-skin="cmp"] #main .cmp-safe__text,[data-skin="cmp"] #main .cmp-feat__grid,[data-skin="cmp"] #main .cmp-faq__list,[data-skin="cmp"] #main .cmp-info__inner{animation:cmp-rise both;animation-timeline:view();animation-range:entry 0% entry 48%}
  }
}

/* ---------- D1: below 1300 his fixed canvas relaxes (desktop only, D4; nothing here is a mobile layout) ---------- */
@media (max-width:1299.98px){
  [data-skin="cmp"] #main .cmp-col-1440{width:100%;max-width:1440px}
  [data-skin="cmp"] #main .cmp-hero{padding-left:40px;padding-right:40px;height:auto;padding-bottom:20px}
  [data-skin="cmp"] #main .cmp-hero__card{width:100%;padding:60px}
  [data-skin="cmp"] #main .cmp-hero__disc{white-space:normal}
  [data-skin="cmp"] #main .cmp-divider{width:auto;margin-left:40px;margin-right:40px}
  [data-skin="cmp"] #main .cmp-safe{height:auto;display:flex;align-items:center;gap:60px;padding:100px 40px}
  [data-skin="cmp"] #main .cmp-safe__text{position:static;width:auto;flex:1 1 0;min-width:0}
  [data-skin="cmp"] #main .cmp-safe__img{position:static;width:48%;height:auto;aspect-ratio:650/543}
  [data-skin="cmp"] #main .cmp-feat,[data-skin="cmp"] #main .cmp-faq,[data-skin="cmp"] #main .cmp-info{padding-left:40px;padding-right:40px;height:auto}
  [data-skin="cmp"] #main .cmp-feat__title,[data-skin="cmp"] #main .cmp-faq__title{width:auto;max-width:666px}
  [data-skin="cmp"] #main .cmp-feat__grid,[data-skin="cmp"] #main .cmp-faq__list,[data-skin="cmp"] #main .cmp-info__inner{width:100%;max-width:1200px}
  [data-skin="cmp"] #main .cmp-faq__list,[data-skin="cmp"] #main .cmp-info__inner{max-width:800px}
  [data-skin="cmp"] #main .cmp-feat__row{flex-wrap:wrap}
  [data-skin="cmp"] #main .cmp-card{width:auto;flex:1 1 280px;min-width:0}
  [data-skin="cmp"] #main .cmp-card__text{width:auto}
  [data-skin="cmp"] #main .cmp-cta{padding:60px 40px;height:auto}
  [data-skin="cmp"] #main .cmp-cta__card{width:100%;height:auto;display:flex;align-items:center;gap:40px;padding:40px}
  [data-skin="cmp"] #main .cmp-cta__img{position:static;width:40%;height:auto;aspect-ratio:559/420;border-radius:24px}
  [data-skin="cmp"] #main .cmp-cta__text{position:static;width:auto;flex:1 1 0;min-width:0}
}

/* ---------- chrome the skinned pages carry (sept-bbat.css lines 207-211, keyed on data-skin) ---------- */
html[data-skin="cmp"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-primary{background:#121212!important;border-color:#121212!important;color:#fff!important;font-weight:700!important}
html[data-skin="cmp"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-primary:hover{background:#2b2b2b!important;border-color:#2b2b2b!important}
html[data-skin="cmp"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-outline{background:#F4F3F0!important;border-color:#F4F3F0!important;color:#555049!important;font-weight:500!important}
html[data-skin="cmp"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-outline:hover{background:#121212!important;border-color:#121212!important;color:#fff!important}
html[data-skin="cmp"] .cookiebar .cb-accept{background:#121212!important;color:#fff!important}