/* ============================================================
   COMPANY . FAQ (faq.html) . 2026-10-21
   Ground truth: 21.10 notes otabek/FAQ/Spec+Html/digidoe-faq.html + digidoe-faq-page-spec.md;
                 the PDF is 1440 x 3135 pt (1 pt = 1 px). Figma "DD-Website" frame "FAQ" (1275:9870).

   Same recipe as sept-cnt/bbat/brol.css: <main> IS the designer's markup (classes faq-*,
   qa/oracle/designer_to_main.py) and this is his stylesheet with the mechanical changes (qa/oracle/skin_css.py):
     .x                 -> [data-skin="faq"] #main .faq-x
     hero photo         -> his <img>, data: URI -> sept/faq/hero.webp (md5-matched); his radial shade svg kept inline
     body min-width     -> gone (D1); the block at the end relaxes his fixed widths below 1300.
     nav + footer       -> his rules dropped (40 selectors), chrome stays live (D2): dd-nav.css + sept-footer.css

   Deviations from his HTML, each on record (Yuval 2026-10-21 "all ok"):
     copy       live text wins: "driver's licence" (straight apostrophe), "Speak to our team" with the full stop
                outside the link; the hero disclaimer keeps his break after "not a bank." (same words, two nodes).
     headings   his h2 per question (live had h3 under the h1, a skipped level).
     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="faq"] body{background:#fff}
[data-skin="faq"] 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="faq"] #main *,[data-skin="faq"] #main *::before,[data-skin="faq"] #main *::after{box-sizing:border-box}
[data-skin="faq"] #main *{margin:0;padding:0}
[data-skin="faq"] #main ul{list-style:none}
[data-skin="faq"] #main a{color:inherit;text-decoration:none}
[data-skin="faq"] #main img,[data-skin="faq"] #main svg{display:block}
[data-skin="faq"] #main h1,[data-skin="faq"] #main h2,[data-skin="faq"] #main h3,[data-skin="faq"] #main p{max-width:none;letter-spacing:0;text-wrap:initial}
[data-skin="faq"] #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) ---------- */
[data-skin="faq"] #main .faq-container{width: 1280px; margin: 0 auto;}
/* ---------- Hero ---------- */
[data-skin="faq"] #main .faq-hero{display: flex; flex-direction: column; align-items: center; gap: 20px;}
[data-skin="faq"] #main .faq-hero-card{position: relative; width: 1280px; height: 640px;
    border-radius: 48px; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 80px;
    isolation: isolate;}
[data-skin="faq"] #main .faq-hero-photo{position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: -2;}
[data-skin="faq"] #main .faq-hero-shade{position: absolute; inset: 0; z-index: -1; border-radius: 48px;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1280 640' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-94.55 -29.75 59.5 -189.1 945.5 297.5)'><stop stop-color='rgba(44,38,32,0)' offset='0'/><stop stop-color='rgba(44,38,32,0)' offset='0.12559'/><stop stop-color='rgba(44,38,32,1)' offset='1'/></radialGradient></defs></svg>");
    background-size: 100% 100%;}
[data-skin="faq"] #main .faq-hero-text{width: 500px; display: flex; flex-direction: column; gap: 20px; color: #FFFFFF;}
[data-skin="faq"] #main .faq-hero-text h1{width: 420px; font-weight: 500; font-size: 52px; line-height: 63px;}
[data-skin="faq"] #main .faq-hero-text p{width: 400px; font-weight: 400; font-size: 16px; line-height: 24px; opacity: 0.8;}
[data-skin="faq"] #main .faq-hero-disclaimer{width: 1280px; text-align: center;
    font-weight: 400; font-size: 16px; line-height: 24px; color: #7B756D;}
/* ---------- FAQ ---------- */
[data-skin="faq"] #main .faq-faq{display: flex; flex-direction: column; align-items: center; gap: 80px;
    padding: 120px 0 160px;}
[data-skin="faq"] #main .faq-faq-list{width: 800px; display: flex; flex-direction: column;}
[data-skin="faq"] #main .faq-faq-item{padding: 40px 0 39px; border-bottom: 1px solid #D6D2C7;
    display: flex; flex-direction: column; gap: 20px;}
[data-skin="faq"] #main .faq-faq-item h2{font-weight: 500; font-size: 28px; line-height: 34px; color: #121212;}
[data-skin="faq"] #main .faq-faq-item p{font-weight: 400; font-size: 16px; line-height: 24px; color: #5C5750;}
[data-skin="faq"] #main .faq-faq-item a,[data-skin="faq"] #main .faq-faq-note a{color: #B75F00;}
[data-skin="faq"] #main .faq-faq-note{width: 800px; font-weight: 400; font-size: 16px; line-height: 24px; color: #7B756D;}

/* ---------- D3: reveals, the alt-home family ---------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    @keyframes faq-rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
    @keyframes faq-scale-in{from{opacity:0;transform:translateY(28px) scale(.965)}to{opacity:1;transform:none}}
    [data-skin="faq"] #main .faq-hero-card{animation:faq-scale-in both;animation-timeline:view();animation-range:entry 0% entry 42%}
    [data-skin="faq"] #main .faq-faq-item,[data-skin="faq"] #main .faq-faq-note{animation:faq-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="faq"] #main .faq-hero{padding:0 40px}
  [data-skin="faq"] #main .faq-hero-card,[data-skin="faq"] #main .faq-hero-disclaimer{width:100%}
  [data-skin="faq"] #main .faq-hero-card{padding:60px}
  [data-skin="faq"] #main .faq-faq{padding:100px 40px 140px}
  [data-skin="faq"] #main .faq-faq-list,[data-skin="faq"] #main .faq-faq-note{width:100%;max-width:800px}
}

/* ---------- chrome the skinned pages carry (sept-bbat.css lines 207-211, keyed on data-skin) ---------- */
html[data-skin="faq"]: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;height:47px!important;min-height:47px!important;padding:0 24px!important;display:inline-grid!important;place-items:center!important;line-height:normal!important}
html[data-skin="faq"]: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="faq"]: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;height:47px!important;min-height:47px!important;padding:0 24px!important;display:inline-grid!important;place-items:center!important;line-height:normal!important}
html[data-skin="faq"]: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="faq"] .cookiebar .cb-accept{background:#121212!important;color:#fff!important}