/* ============================================================
   PRICING . Account plans and pricing (pricing.html) . 2026-10-22
   Ground truth: Pricing page/Spec+Html/digidoe-pricing.html + digidoe-pricing-page-spec.md; Pricing.pdf is
                 1440 x 10324.65 pt (1 pt = 1 px). Figma "DD-Website" frame "Pricing" (1316:13357), Annual 1318:15184.

   Same recipe as sept-dev/faq.css: <main> IS the designer's markup (classes pr-*,
   qa/oracle/designer_to_main.py) and this is his stylesheet with the mechanical changes (qa/oracle/skin_css.py):
     .x                 -> [data-skin="pricing"] #main .pr-x
     hero photo         -> his CSS background, data: URI -> sept/pricing/hero.webp; fills the card (0 0/100% 100%):
                           his spec's 104.77% zoom disagrees with his own PDF, the PDF wins (Yuval 2026-10-22)
     embedded images    -> his named files under sept/pricing/ (md5-matched); the charges illustration as webp
     ISO badges         -> the OFFICIAL artwork badges/official/{27001,22301}-nonukas.png, not his PNGs
     nav + footer       -> his rules dropped (47 selectors), chrome stays live (D2): dd-nav.css + sept-footer.css

   Deviations from his HTML, each on record:
     wraps      plan description + price note boxes 2px wider (Dynamic lines break where his PDF does; Inter here
                sets ~0.2px wider than Figma's).
     copy       live wins: the approved ISO sentence. His PDF wins (Yuval 2026-10-22): "Free trial"; the toggle's
                "Save" chip and "Need help choosing? Talk to our team." dropped. Footer ISO badge images stay
                removed (f0d4408, Yarden's notes).
     toggle     his Monthly/Annual JS -> assets/js/sept-pricing.js; data-billing kept so the price lens re-runs.
     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="pricing"] body{background:#fff}
[data-skin="pricing"] 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="pricing"] #main *,[data-skin="pricing"] #main *::before,[data-skin="pricing"] #main *::after{box-sizing:border-box}
[data-skin="pricing"] #main *{margin:0;padding:0}
[data-skin="pricing"] #main ul{list-style:none}
[data-skin="pricing"] #main a{color:inherit;text-decoration:none}
[data-skin="pricing"] #main img,[data-skin="pricing"] #main svg{display:block}
[data-skin="pricing"] #main h1,[data-skin="pricing"] #main h2,[data-skin="pricing"] #main h3,[data-skin="pricing"] #main p{max-width:none;letter-spacing:0;text-wrap:initial}
[data-skin="pricing"] #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="pricing"] #main .pr-link{color:#B75F00}
[data-skin="pricing"] #main .pr-link:hover{text-decoration:underline}
/* Buttons */
[data-skin="pricing"] #main .pr-btn{display:inline-flex;align-items:center;justify-content:center;height:47px;padding:14px 24px;border-radius:100px;font-size:16px;line-height:19px;white-space:nowrap;cursor:pointer;flex-shrink:0;transition:opacity .15s}
[data-skin="pricing"] #main .pr-btn:hover{opacity:.85}
[data-skin="pricing"] #main .pr-btn-dark{background:#121212;color:#fff;font-weight:700}
[data-skin="pricing"] #main .pr-btn-orange{background:#F37F00;color:#fff;font-weight:700}
[data-skin="pricing"] #main .pr-btn-white{background:#fff;color:#555049;font-weight:500}
[data-skin="pricing"] #main .pr-btn-sand{background:#F4F3F0;color:#555049;font-weight:500}
[data-skin="pricing"] #main .pr-btn-glass{background:rgba(18,18,18,.16);color:#fff;font-weight:500}
[data-skin="pricing"] #main .pr-btn-full{width:100%}
[data-skin="pricing"] #main .pr-divider{width:1160px;height:1px;margin:0 auto -1px;background:#D6D2C7;position:relative;z-index:1}
[data-skin="pricing"] #main .pr-h2{font-weight:500;font-size:44px;line-height:53px;color:#121212;text-align:center}
/* 1. Navbar */
/* 2. Hero */
[data-skin="pricing"] #main .pr-hero{padding:0 80px;display:flex;flex-direction:column;align-items:center;gap:20px;height:684px}
[data-skin="pricing"] #main .pr-hero-card{position:relative;width:1280px;height:640px;border-radius:48px;overflow:hidden;padding:80px;display:flex;flex-direction:column;justify-content:center;gap:40px;
  background: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(-97.95 -28.6 57.2 -195.9 979.5 286)'><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>") 0 0/100% 100% no-repeat,
  url(sept/pricing/hero.webp) 0 0/100% 100% no-repeat;}
[data-skin="pricing"] #main .pr-hero-text{width:500px;display:flex;flex-direction:column;gap:20px;color:#fff}
[data-skin="pricing"] #main .pr-hero-text h1{width:430px;font-weight:500;font-size:52px;line-height:63px}
[data-skin="pricing"] #main .pr-hero-text p{width:480px;font-size:16px;line-height:24px;opacity:.8}
[data-skin="pricing"] #main .pr-hero-btns{display:flex;gap:20px}
[data-skin="pricing"] #main .pr-hero-btns .pr-btn-white{color:#121212;font-weight:700}
[data-skin="pricing"] #main .pr-hero-note{font-size:16px;line-height:24px;color:#7B756D;white-space:nowrap;text-align:center}
/* 3. Pricing */
[data-skin="pricing"] #main .pr-pricing{padding:120px 80px 160px;display:flex;flex-direction:column;align-items:center;gap:80px}
[data-skin="pricing"] #main .pr-pricing-top{width:1280px;display:flex;flex-direction:column;align-items:center;gap:40px}
[data-skin="pricing"] #main .pr-toggle{background:#F4F3F0;border-radius:60px;padding:4px;display:flex}
[data-skin="pricing"] #main .pr-toggle button{width:120px;height:50px;padding:14px 24px;border-radius:100px;font-weight:500;font-size:18px;line-height:22px;color:#555049;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s}
[data-skin="pricing"] #main .pr-toggle button[aria-selected="true"]{background:#fff;color:#121212}
[data-skin="pricing"] #main .pr-plans{width:1280px;display:flex;gap:30px;align-items:stretch}
[data-skin="pricing"] #main .pr-plan{flex:1 1 0;min-width:0;border-radius:24px;padding:30px;display:flex;flex-direction:column;gap:30px;background:#fff;box-shadow:inset 0 0 0 1px #D6D2C7}
[data-skin="pricing"] #main .pr-plan.pr-featured{box-shadow:inset 0 0 0 1px #F37F00,0 16px 48px -16px rgba(243,127,0,.8)}
[data-skin="pricing"] #main .pr-plan-head{display:flex;flex-direction:column;gap:10px}
[data-skin="pricing"] #main .pr-plan-name-row{display:flex;justify-content:space-between;align-items:center;height:29px}
[data-skin="pricing"] #main .pr-plan-name{font-weight:500;font-size:24px;line-height:29px;color:#121212;white-space:nowrap}
[data-skin="pricing"] #main .pr-badge{height:29px;padding:7px 16px;border-radius:100px;background:rgba(243,127,0,.1);color:#F37F00;font-weight:700;font-size:12px;line-height:15px;text-transform:uppercase;white-space:nowrap}
[data-skin="pricing"] #main .pr-plan-desc{height:48px;margin-right:-2px;font-size:16px;line-height:24px;color:#5C5750}
[data-skin="pricing"] #main .pr-plan-price{display:flex;flex-direction:column;gap:5px}
[data-skin="pricing"] #main .pr-price-row{display:flex;align-items:flex-end;gap:5px}
[data-skin="pricing"] #main .pr-price{font-weight:500;font-size:44px;line-height:53px;color:#121212;white-space:nowrap}
[data-skin="pricing"] #main .pr-per{flex:1;height:31px;font-size:16px;line-height:24px;color:#5C5750}
[data-skin="pricing"] #main .pr-caption{margin-right:-2px;font-size:14px;line-height:21px;color:#5C5750}
[data-skin="pricing"] #main .pr-annual .pr-caption-fixed{height:42px}
[data-skin="pricing"] #main .pr-features{list-style:none;display:flex;flex-direction:column;gap:10px}
[data-skin="pricing"] #main .pr-features li{display:flex;gap:10px;align-items:center;font-size:16px;line-height:24px;color:#5C5750}
[data-skin="pricing"] #main .pr-features li.pr-wrap2{align-items:flex-start}
[data-skin="pricing"] #main .pr-features li.pr-no{color:#9B948C}
[data-skin="pricing"] #main .pr-features li img{width:24px;height:24px;flex-shrink:0}
[data-skin="pricing"] #main .pr-features li span{flex:1;min-width:0}
[data-skin="pricing"] #main .pr-plan-foot{font-size:14px;line-height:21px;color:#7B756D}
[data-skin="pricing"] #main .pr-pricing-bottom{display:flex;flex-direction:column;align-items:center;gap:40px}
[data-skin="pricing"] #main .pr-premium{width:1120px;background:#F4F3F0;border-radius:24px;padding:40px;display:flex;align-items:center;gap:40px;overflow:hidden}
[data-skin="pricing"] #main .pr-premium-text{flex:1;display:flex;flex-direction:column;gap:12px}
[data-skin="pricing"] #main .pr-premium-text h3{font-weight:500;font-size:20px;line-height:24px;color:#121212}
[data-skin="pricing"] #main .pr-premium-text p{font-size:14px;line-height:21px;color:#555049}
[data-skin="pricing"] #main .pr-legal{width:1000px;text-align:center;font-size:14px;line-height:21px;color:#7B756D}
/* 4. Capabilities */
[data-skin="pricing"] #main .pr-caps{padding:140px 80px 160px;display:flex;flex-direction:column;align-items:center;gap:80px}
[data-skin="pricing"] #main .pr-caps .pr-h2{width:600px}
[data-skin="pricing"] #main .pr-cap-row{width:1200px;display:flex;gap:30px;align-items:stretch}
[data-skin="pricing"] #main .pr-cap{flex:1 1 0;min-width:0;border-radius:24px;padding:30px;box-shadow:inset 0 0 0 1px #D6D2C7;overflow:hidden;display:flex;flex-direction:column;gap:30px}
[data-skin="pricing"] #main .pr-cap img{width:40px;height:40px}
[data-skin="pricing"] #main .pr-cap-text{display:flex;flex-direction:column;gap:12px}
[data-skin="pricing"] #main .pr-cap-text h3{font-weight:500;font-size:20px;line-height:24px;color:#121212}
[data-skin="pricing"] #main .pr-cap-text p{font-size:16px;line-height:24px;color:#5C5750}
/* 5. Fee table */
[data-skin="pricing"] #main .pr-fees{padding:140px 80px 160px;display:flex;flex-direction:column;align-items:center;gap:80px}
[data-skin="pricing"] #main .pr-fees-head{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
[data-skin="pricing"] #main .pr-fees-head .pr-h2{width:660px}
[data-skin="pricing"] #main .pr-fees-head p{font-size:16px;line-height:24px;color:#5C5750;white-space:nowrap}
[data-skin="pricing"] #main .pr-fee-table{width:1120px;border-collapse:collapse;table-layout:fixed}
[data-skin="pricing"] #main .pr-fee-table col.pr-c1{width:360px}
[data-skin="pricing"] #main .pr-fee-table th,[data-skin="pricing"] #main .pr-fee-table td{padding:0;font-weight:400;box-shadow:inset 0 -1px 0 #D6D2C7;text-align:center;white-space:nowrap}
[data-skin="pricing"] #main .pr-fee-table th{height:50px;padding-bottom:20px;font-size:20px;line-height:30px;color:#121212;vertical-align:top}
[data-skin="pricing"] #main .pr-fee-table th.pr-core{color:#B75F00}
[data-skin="pricing"] #main .pr-fee-table td{height:48px;padding:12px 0;font-size:16px;line-height:24px;color:#5C5750}
[data-skin="pricing"] #main .pr-fee-table th:first-child,[data-skin="pricing"] #main .pr-fee-table td:first-child{text-align:left}
[data-skin="pricing"] #main .pr-fee-table td.pr-free{color:#B75F00}
[data-skin="pricing"] #main .pr-fees-note{width:700px;text-align:center;font-size:14px;line-height:21px;color:#7B756D}
/* 6. Illustration */
[data-skin="pricing"] #main .pr-how{padding:140px 80px 0;display:flex;flex-direction:column;align-items:center;gap:20px}
[data-skin="pricing"] #main .pr-how-head{height:149px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
[data-skin="pricing"] #main .pr-how-head .pr-h2{width:800px}
[data-skin="pricing"] #main .pr-how-head p{width:522px;font-size:16px;line-height:24px;color:#5C5750}
[data-skin="pricing"] #main .pr-how img{width:740px;height:1237.65px;object-fit:cover}
/* 7. FAQ */
[data-skin="pricing"] #main .pr-faq{padding:80px 80px 0;display:flex;flex-direction:column;align-items:center}
[data-skin="pricing"] #main .pr-faq-list{width:800px}
[data-skin="pricing"] #main .pr-faq-item{padding:40px 0;display:flex;flex-direction:column;gap:20px;box-shadow:inset 0 -1px 0 #D6D2C7;overflow:hidden}
[data-skin="pricing"] #main .pr-faq-item h3{font-weight:500;font-size:28px;line-height:34px;color:#121212}
[data-skin="pricing"] #main .pr-faq-item p{font-size:16px;line-height:24px;color:#5C5750}
[data-skin="pricing"] #main .pr-faq-item p strong{display:block;font-weight:500;color:#121212}
/* 8. Trust */
[data-skin="pricing"] #main .pr-trust{padding:160px 160px 80px;display:flex;flex-direction:column;align-items:center;gap:80px}
[data-skin="pricing"] #main .pr-trust .pr-h2{width:720px}
[data-skin="pricing"] #main .pr-trust-row{width:1120px;display:flex;gap:30px;align-items:stretch}
[data-skin="pricing"] #main .pr-trust-card{flex:1 1 0;min-width:0;height:380px;border-radius:24px;padding:40px;box-shadow:inset 0 0 0 1px #D6D2C7;display:flex;flex-direction:column;gap:30px;overflow:hidden}
[data-skin="pricing"] #main .pr-trust-vis{height:120px;display:flex;align-items:center;gap:20px}
[data-skin="pricing"] #main .pr-trust-vis .pr-fca{width:127px;height:40px;object-fit:cover}
[data-skin="pricing"] #main .pr-shield-circle{width:100px;height:100px;border-radius:50%;background:#F6F6F6;display:flex;align-items:center;justify-content:center}
[data-skin="pricing"] #main .pr-iso{width:93px;height:120px}
[data-skin="pricing"] #main .pr-trust-text{display:flex;flex-direction:column;gap:12px}
[data-skin="pricing"] #main .pr-trust-text h3{font-weight:500;font-size:20px;line-height:27px;color:#121212}
[data-skin="pricing"] #main .pr-trust-text p{font-size:14px;line-height:21px;color:#5C5750}
[data-skin="pricing"] #main .pr-trust-bottom{width:590px;display:flex;flex-direction:column;align-items:center;gap:40px}
[data-skin="pricing"] #main .pr-trust-bottom p{text-align:center;font-size:14px;line-height:21px;color:#7B756D}
/* 9. CTA */
[data-skin="pricing"] #main .pr-cta{padding:80px}
[data-skin="pricing"] #main .pr-cta-card{width:1280px;height:438px;background:#F4F3F0;border-radius:48px;padding:100px 80px;display:flex;align-items:center;justify-content:center;overflow:hidden}
[data-skin="pricing"] #main .pr-cta-inner{display:flex;flex-direction:column;align-items:center;gap:60px}
[data-skin="pricing"] #main .pr-cta-text{width:720px;display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center}
[data-skin="pricing"] #main .pr-cta-text p{width:580px;font-size:16px;line-height:24px;color:#555049}
[data-skin="pricing"] #main .pr-cta-btns{display:flex;gap:20px}
/* 10. Footer */

/* ---------- his page wrapper (his .wrap, a chrome-shared class, so it is the generated .pr-page here) ---------- */
[data-skin="pricing"] #main .pr-page{width:1440px;max-width:100%;margin:0 auto}

/* ---------- element resets skin_css.py drops but his page relies on: browser button chrome (the toggle drew
     2px outset borders and a grey fill without this) and his focus ring ---------- */
[data-skin="pricing"] #main button{font:inherit;border:none;background:none;color:inherit;-webkit-appearance:none;appearance:none}
[data-skin="pricing"] #main :focus-visible{outline:2px solid #F37F00;outline-offset:2px}

/* ---------- the official badge artwork is square (350x350, its own white margin): a 120 square fills his slot height,
     proportions untouched (iso-badge-rules s.1) ---------- */
[data-skin="pricing"] #main .pr-iso{width:120px;height:120px;object-fit:contain}

/* ---------- D3: reveals, the alt-home family ---------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    @keyframes pr-rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
    @keyframes pr-scale-in{from{opacity:0;transform:translateY(28px) scale(.965)}to{opacity:1;transform:none}}
    [data-skin="pricing"] #main .pr-hero-card,[data-skin="pricing"] #main .pr-cta-card{animation:pr-scale-in both;animation-timeline:view();animation-range:entry 0% entry 42%}
    [data-skin="pricing"] #main .pr-plans,[data-skin="pricing"] #main .pr-premium,[data-skin="pricing"] #main .pr-cap-row,
    [data-skin="pricing"] #main .pr-fee-table,[data-skin="pricing"] #main .pr-how img,[data-skin="pricing"] #main .pr-faq-list,
    [data-skin="pricing"] #main .pr-trust-row{animation:pr-rise both;animation-timeline:view();animation-range:entry 0% entry 48%}
  }
}
@media (prefers-reduced-motion: reduce){[data-skin="pricing"] #main .pr-toggle button{transition:none}}

/* ---------- D1: below 1300 his fixed canvas relaxes (desktop only; nothing here is a mobile layout) ---------- */
@media (max-width:1299.98px){
  [data-skin="pricing"] #main .pr-hero,[data-skin="pricing"] #main .pr-pricing,[data-skin="pricing"] #main section{padding-left:40px;padding-right:40px}
  [data-skin="pricing"] #main .pr-hero-card,[data-skin="pricing"] #main .pr-cta-card,[data-skin="pricing"] #main .pr-pricing-top,
  [data-skin="pricing"] #main .pr-plans,[data-skin="pricing"] #main .pr-premium,[data-skin="pricing"] #main .pr-legal,
  [data-skin="pricing"] #main .pr-cap-row,[data-skin="pricing"] #main .pr-fee-table,[data-skin="pricing"] #main .pr-trust-row,
  [data-skin="pricing"] #main .pr-divider{width:100%;max-width:100%}
  [data-skin="pricing"] #main .pr-hero-note{white-space:normal}
  [data-skin="pricing"] #main .pr-plan,[data-skin="pricing"] #main .pr-cap-row > *,[data-skin="pricing"] #main .pr-trust-row > *{min-width:0}
}

/* ---------- chrome the skinned pages carry (sept-bbat.css lines 207-211, keyed on data-skin) ---------- */
html[data-skin="pricing"]: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="pricing"]: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="pricing"]: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="pricing"]: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="pricing"] .cookiebar .cb-accept{background:#121212!important;color:#fff!important}