/* ============================================================
   PARTNER HUB HOME . 30.09 SKIN . 2026-09-30
   Ground truth: web/sep 30 changes/partners-home 30.09 update.html
                 + partners-home-spec 30.09 update.md
   Figma "DD-Website" frame "Partners - Home" (964:18383), 1440 x 4332,
   desktop only. Same four folds the live page already had (hero, "Choose
   the partnership", "A regulated platform", CTA); this is a re-skin, not a
   cut. Supersedes the 09-17 board skin (sept-ptrhome-board.css/js, no
   longer linked from the page).

   Yuval, 2026-09-30: "do as designer said". So, as on 09-17: <main> IS the
   designer's markup (classes p30-*, built once by qa/oracle/board30_to_main.py)
   and this file is his stylesheet with three mechanical changes:
     .x                 -> [data-sept="ptr"] #main .p30-x   (no collision with dd-shell / alt-home)
     width:1440/1280/…  -> max-width + minmax(0,1fr)        (FL-012: a comp's min-width is not production CSS;
                                                              no horizontal scroll at 1280 / 1366 / 1440)
     hero photo         -> assets/sept/ptr30/hero-dark.webp  (his "Hero Image dark partners s.png", the dark
                                                              treatment is baked into the export, spec §2.1)
   Chrome untouched: nav = the shared contract in sept-ptrhome.css; footer =
   sept-footer.css (site-wide, same day). Under 940 the sheet at the end takes
   over: the mobile island does not mount on this page, so the desktop <main>
   is what a phone renders.

   Deviations from the board, each on record:
     fold 4  FCA card link keeps "Verify DigiDoe on the FCA Register", not the
             board's "Discuss white label" (D5, 09-17: a copy-paste of another
             fold's link; it would send an FCA check to a sales form).
     copy    every visible word is the live approved text (qa/text-freeze.mjs).
   ============================================================ */

html[data-sept="ptr"] body{background:#fff}

/* ---------- resets the board relied on, scoped to main ---------- */
/* Attribute + element, never the bare #main id: an id would outrank every
   .p30-* class below (README trap 3). */
[data-sept="ptr"] main{
  width:100%;overflow-x:clip;color:#121212;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;
}
[data-sept="ptr"] #main *{box-sizing:border-box;margin:0;padding:0}
[data-sept="ptr"] #main section{width:100%;padding:0;background:#fff}
[data-sept="ptr"] #main h1,[data-sept="ptr"] #main h2,[data-sept="ptr"] #main h3,[data-sept="ptr"] #main p{
  margin:0;font-weight:inherit;letter-spacing:normal!important;line-height:normal;text-wrap:auto;font-family:inherit;
}
[data-sept="ptr"] #main a{color:inherit;text-decoration:none}
[data-sept="ptr"] #main img,[data-sept="ptr"] #main svg{display:block;max-width:none}
[data-sept="ptr"] #main section::before,[data-sept="ptr"] #main section::after{content:none!important;display:none!important}

/* The designer's page wrapper. Load-bearing: sept-ptrhome.css styles the OLD
   main by position (`main > section:nth-child(n)`, 26 rules); one level down,
   none of them can match. */
[data-sept="ptr"] #main .p30-page{width:100%;display:flex;flex-direction:column;align-items:center}
[data-sept="ptr"] #main .p30-fixed{width:100%;max-width:1440px;margin:0 auto}

/* ---------- pills, spec §0.5 ---------- */
[data-sept="ptr"] #main .p30-pill{
  display:inline-flex;align-items:center;justify-content:center;height:47px;padding:14px 24px;border-radius:100px;
  font-size:16px;line-height:19px;font-weight:500;white-space:nowrap;border:none;cursor:pointer;flex-shrink:0;
  box-shadow:none;transition:none;
}
[data-sept="ptr"] #main .p30-pill-dark{background:#121212;color:#FFFFFF;font-weight:700}
[data-sept="ptr"] #main .p30-pill-light{background:#F4F3F0;color:#555049;font-weight:500}
[data-sept="ptr"] #main .p30-pill-white{background:#FFFFFF;color:#121212;font-weight:700}
[data-sept="ptr"] #main .p30-pill-glass{background:rgba(18,18,18,0.16);color:#FFFFFF;font-weight:500}
[data-sept="ptr"] #main .p30-btn-row{display:flex;gap:20px;align-items:center}

/* ---------- 2. hero, spec §2 ---------- */
[data-sept="ptr"] #main .p30-hero{height:684px;padding:0 80px;display:flex;flex-direction:column;align-items:center;gap:20px;background:#FFFFFF}
[data-sept="ptr"] #main .p30-hero-card{
  width:100%;max-width:1280px;height:640px;flex-shrink:0;border-radius:48px;overflow:hidden;padding:80px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:40px;
  background:#2C2620 url("sept/ptr30/hero-dark.webp") center/cover no-repeat;
}
[data-sept="ptr"] #main .p30-hero-text{width:520px;max-width:100%;display:flex;flex-direction:column;gap:20px}
/* sept-ptrhome.css pins `main h1` !important; these are the designer's own values */
[data-sept="ptr"] #main .p30-hero-text h1{font-size:52px!important;line-height:63px!important;font-weight:500!important;color:#FFFFFF;text-align:left}
[data-sept="ptr"] #main .p30-hero-text p{font-size:16px;line-height:24px;color:#FFFFFF;opacity:.8}
[data-sept="ptr"] #main .p30-trust{font-size:16px;line-height:24px;color:#7B756D;text-align:center;white-space:nowrap}

/* ---------- section headers ---------- */
[data-sept="ptr"] #main .p30-sec-head{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;max-width:100%}
[data-sept="ptr"] #main .p30-sec-head h2{font-size:44px;line-height:53px;font-weight:500;color:#121212;text-align:center}
[data-sept="ptr"] #main .p30-sec-head p{width:700px;max-width:100%;font-size:16px;line-height:24px;color:#5C5750}

/* ---------- 3. partnership models, spec §3 ---------- */
[data-sept="ptr"] #main .p30-models{min-height:1102px;padding:120px 80px 80px;display:flex;flex-direction:column;align-items:center;gap:80px;overflow:hidden;background:#FFFFFF}
[data-sept="ptr"] #main .p30-models .p30-sec-head{width:750px}
/* !important: sept-ptrhome.css still says `#types h2{max-width:none!important}` for the old fold */
[data-sept="ptr"] #main .p30-models .p30-sec-head h2{max-width:540px!important;margin:0!important}
[data-sept="ptr"] #main .p30-grid-4{width:100%;max-width:1120px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
[data-sept="ptr"] #main .p30-p-card{
  min-height:321px;padding:30px;border-radius:24px;border:1px solid #D6D2C7;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;gap:30px;
  background:linear-gradient(153.5deg,#FFFFFF 4.6%,#F4F3F0 96.4%);box-shadow:none;
}
[data-sept="ptr"] #main .p30-p-top{display:flex;flex-direction:column;gap:30px}
[data-sept="ptr"] #main .p30-p-top img{width:40px;height:40px}
[data-sept="ptr"] #main .p30-p-txt{display:flex;flex-direction:column;gap:12px}
[data-sept="ptr"] #main .p30-p-txt h3{font-size:24px;line-height:29px;font-weight:500;color:#121212}
[data-sept="ptr"] #main .p30-p-txt p{width:485px;max-width:100%;font-size:16px;line-height:24px;color:#555049}
[data-sept="ptr"] #main .p30-p-link{font-size:16px;line-height:24px;font-weight:500;color:#B75F00}

/* ---------- 4. regulated platform, spec §4 ---------- */
[data-sept="ptr"] #main .p30-regulated{min-height:1017px;padding:60px 80px;display:flex;flex-direction:column;align-items:center;gap:80px;overflow:hidden;background:#FFFFFF}
[data-sept="ptr"] #main .p30-regulated .p30-sec-head{width:700px}
[data-sept="ptr"] #main .p30-regulated .p30-sec-head h2{max-width:480px!important;margin:0!important}
[data-sept="ptr"] #main .p30-f-grid{width:100%;max-width:1120px;display:flex;flex-direction:column;gap:20px}
[data-sept="ptr"] #main .p30-f-row{display:flex;gap:20px;align-items:stretch}
[data-sept="ptr"] #main .p30-f-row.p30-r1{min-height:251px}
[data-sept="ptr"] #main .p30-f-row.p30-r2{min-height:220px}
[data-sept="ptr"] #main .p30-f-card{
  flex:1 1 0;min-width:0;border:1px solid #D6D2C7;border-radius:24px;padding:50px 50px 50px 40px;
  display:flex;align-items:center;gap:40px;overflow:hidden;background:transparent;box-shadow:none;
}
[data-sept="ptr"] #main .p30-f-vis{width:120px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
[data-sept="ptr"] #main .p30-f-vis.p30-fca img{width:120px;height:37.875px}
[data-sept="ptr"] #main .p30-f-vis.p30-shield{height:140px}
[data-sept="ptr"] #main .p30-f-vis .p30-circle{width:100px;height:100px;border-radius:50%;background:#F6F6F6;display:flex;align-items:center;justify-content:center}
[data-sept="ptr"] #main .p30-f-vis .p30-circle img{width:50px;height:50px}
[data-sept="ptr"] #main .p30-f-vis.p30-iso{height:120px}
[data-sept="ptr"] #main .p30-f-vis.p30-iso img{width:93px;height:120px;border-radius:0}
[data-sept="ptr"] #main .p30-f-txt{width:300px;max-width:100%;display:flex;flex-direction:column;gap:16px}
[data-sept="ptr"] #main .p30-f-txt h3{font-size:24px;line-height:32.4px;font-weight:500;color:#121212}
[data-sept="ptr"] #main .p30-f-txt p{font-size:14px;line-height:21px;color:#5C5750}
[data-sept="ptr"] #main .p30-f-link{font-size:16px;line-height:24px;font-weight:400;color:#B75F00}
[data-sept="ptr"] #main .p30-reg-note{width:720px;max-width:100%;font-size:16px;line-height:24px;color:#7B756D;text-align:center}

/* ---------- 5. CTA, spec §5 ---------- */
[data-sept="ptr"] #main .p30-cta{min-height:760px;padding:120px 80px 160px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:120px;background:#FFFFFF}
[data-sept="ptr"] #main .p30-cta-img{width:480px;height:480px;border-radius:48px;object-fit:cover;flex-shrink:0}
[data-sept="ptr"] #main .p30-cta-txt{width:520px;max-width:100%;display:flex;flex-direction:column;gap:60px}
[data-sept="ptr"] #main .p30-cta-a{display:flex;flex-direction:column;gap:20px}
[data-sept="ptr"] #main .p30-cta-a h2{font-size:44px;line-height:53px;font-weight:500;color:#121212;text-align:left}
[data-sept="ptr"] #main .p30-cta-p{display:flex;flex-direction:column;gap:20px}
[data-sept="ptr"] #main .p30-cta-p p{font-size:16px;line-height:24px;color:#5C5750}

/* ---------- 940..1279: the 1120 inner column no longer fits, let rows breathe ---------- */
@media (max-width:1279px) and (min-width:940px){
  [data-sept="ptr"] #main .p30-cta{gap:60px;padding:100px 80px 120px}
  [data-sept="ptr"] #main .p30-cta-img{width:400px;height:400px}
  [data-sept="ptr"] #main .p30-cta-txt{width:480px}
}

/* ---------- under 940: the designer's fixed geometry, released ---------- */
/* No island on this page, so this is the phone. Widths go fluid, grids stack.
   Copy is unchanged; the freeze runs at 390 as well as 1440. */
@media (max-width:939px){
  [data-sept="ptr"] #main .p30-hero{height:auto;padding:0 16px 16px}
  /* the designer drew 1440 only; on a phone the copy would sit over the photo's bright right half,
     so the spec's dark overlay (§2.1, #2C2620) is laid over the whole card here */
  [data-sept="ptr"] #main .p30-hero-card{height:auto;min-height:0;border-radius:24px;padding:36px 24px;gap:28px;justify-content:flex-start;
    background:linear-gradient(rgba(44,38,32,.62),rgba(44,38,32,.78)),#2C2620 url("sept/ptr30/hero-dark.webp") center/cover no-repeat}
  [data-sept="ptr"] #main .p30-hero-text{width:auto}
  [data-sept="ptr"] #main .p30-hero-text h1{font-size:34px!important;line-height:1.2!important} /* sept-ptrhome.css pins main h1 !important under 900 */
  [data-sept="ptr"] #main .p30-trust{white-space:normal;font-size:14px;line-height:20px;padding:0 8px}
  [data-sept="ptr"] #main .p30-sec-head h2{font-size:30px;line-height:1.2}
  [data-sept="ptr"] #main .p30-models,[data-sept="ptr"] #main .p30-regulated{min-height:0;padding:56px 20px;gap:40px}
  [data-sept="ptr"] #main .p30-grid-4{grid-template-columns:1fr;gap:16px}
  [data-sept="ptr"] #main .p30-p-card{min-height:0;gap:24px}
  [data-sept="ptr"] #main .p30-p-txt p{width:auto}
  [data-sept="ptr"] #main .p30-f-row{flex-direction:column;min-height:0}
  [data-sept="ptr"] #main .p30-f-card{padding:28px 24px;gap:24px;flex-direction:column;align-items:flex-start}
  [data-sept="ptr"] #main .p30-f-vis.p30-shield,[data-sept="ptr"] #main .p30-f-vis.p30-iso{height:auto}
  [data-sept="ptr"] #main .p30-f-txt{width:auto}
  [data-sept="ptr"] #main .p30-cta{min-height:0;padding:40px 20px 64px;flex-direction:column;gap:32px;align-items:flex-start}
  [data-sept="ptr"] #main .p30-cta-img{width:100%;height:auto;aspect-ratio:1/1;border-radius:24px}
  [data-sept="ptr"] #main .p30-cta-txt{width:auto;gap:32px}
  [data-sept="ptr"] #main .p30-cta-a h2{font-size:30px;line-height:1.2}
  [data-sept="ptr"] #main .p30-btn-row{flex-wrap:wrap;gap:12px}
  [data-sept="ptr"] #main .p30-pill{white-space:normal;height:auto;min-height:47px;text-align:center}
}