/* ============================================================================================================
 * Design A — "Clean film" (owner's pick 2026-10-07, canvas page A; source C:\Design\Products\Website Clean
 * Redesign Draft). White page; ONE navy "film" surface (#0a1628 + blue/cyan glows + dot grid) for the hero, the
 * decks/themes band and the closing panel; near-black #0B1220 1px outlines on cards, buttons and inputs, light grey
 * #D0D5DD for dividers; blue gradient for the main action, dark gradient for the header CTA, white outline for the
 * rest. Brand fonts stay (Clash Display headings, Poppins text). Light by default; the toggle still gives the
 * classic dark theme.
 * Loaded only when <html class="da"> (config site_design = 'a', or ?design=a). Everything is scoped to html.da;
 * colour rules to light (html.da:not([data-theme="dark"])).
 * ============================================================================================================ */

/* ---------- 1. Tokens (light) ---------- */
html.da:not([data-theme="dark"]) {
  --da-ink: #0B1220; --da-ink-2: #475467; --da-ink-3: #667085; --da-link: #1D4ED8; --da-rule: #D0D5DD;
  --da-line: #0B1220; --da-hover: #F2F4F7; --da-navy: #0a1628;
  --color-bg-base: #FFFFFF; --color-bg-subtle: #F8FAFC; --color-bg-muted: #F2F4F7; --color-bg-elevated: #FFFFFF;
  --color-bg-card: #FFFFFF; --color-bg-input: #FFFFFF; --color-bg-dark: #0a1628;
  --color-text-primary: #0B1220; --color-text-secondary: #475467; --color-text-tertiary: #667085;
  --color-text-link: #1D4ED8; --color-text-link-hover: #1E3A8A;
  --color-border-default: #D0D5DD; --color-border-muted: #EAECF0; --color-border-strong: #0B1220; --color-border-brand: #1D4ED8;
  --color-brand-primary: #1D4ED8; --color-brand-500: #2563EB; --color-brand-600: #1D4ED8; --color-brand-700: #1E40AF; --color-brand-50: #EFF4FF;
  --t-accent: #1D4ED8; --t-gradient-hero: #FFFFFF;
  --t-gradient-button: linear-gradient(135deg, #1D4ED8 0%, #3B82F6 100%);
  --t-gradient-button-hover: linear-gradient(135deg, #1E40AF 0%, #2563EB 100%);
  --t-glass-bg: #FFFFFF; --t-glass-border: #0B1220; --t-glass-border-hover: #1D4ED8; --t-glass-shadow: none;
  --shadow-card: none; --shadow-card-hover: 0 18px 40px rgba(10, 22, 40, .12); --shadow-button: none;
  --radius-xl: 20px; --radius-2xl: 24px;
  --da-film: radial-gradient(42% 70% at 12% 0%, rgba(37, 99, 235, .45), rgba(37, 99, 235, 0) 70%),
             radial-gradient(45% 75% at 95% 100%, rgba(56, 189, 248, .26), rgba(56, 189, 248, 0) 70%),
             radial-gradient(30% 50% at 60% 40%, rgba(124, 58, 237, .14), rgba(124, 58, 237, 0) 70%), #0a1628;
}
html.da:not([data-theme="dark"]) body { background: #FFFFFF !important; color: #0B1220; }

/* ---------- 2. Type ---------- */
html.da :is(h1, h2, h3) { text-wrap: balance; }
html.da:not([dir="rtl"]) :is(h1, h2, .brand-font) { letter-spacing: -.015em; }
html.da :is(p, li) { text-wrap: pretty; }

/* ---------- 3. Header: links in an outlined pill, round lang + theme buttons, dark gradient CTA ---------- */
html.da .pptd-header { background: rgba(255, 255, 255, .96) !important; border-bottom: 1px solid var(--color-border-default) !important; box-shadow: none !important; }
html.da[data-theme="dark"] .pptd-header { background: rgba(7, 14, 28, .94) !important; border-bottom-color: #1F2D44 !important; }
html.da .pptd-desktop-links { border: 1px solid var(--color-border-default); border-radius: 999px; padding: 3px; gap: 2px; }   /* ~42px tall (was ~54) */
html.da .pptd-nav-link { font-size: .92rem; font-weight: 500; padding: 6px 14px; border-radius: 999px; color: var(--color-text-primary); box-shadow: none !important; }
html.da .pptd-nav-link:hover { background: var(--color-bg-muted); color: var(--color-text-primary); }
html.da .pptd-nav-link.active { background: #0a1628; color: #FFFFFF; font-weight: 600; }
html.da[data-theme="dark"] .pptd-nav-link.active { background: #F1F5F9; color: #0a1628; }
html.da :is(#lang-toggle, .pptd-header-right [data-theme-toggle]) { border: 1px solid var(--color-border-default) !important; border-radius: 999px !important; min-width: 40px; height: 40px; justify-content: center; }
html.da .pptd-header-right > .pptd-btn-primary {
  background: radial-gradient(130% 170% at 0% 0%, rgba(37, 99, 235, .8) 0%, rgba(37, 99, 235, 0) 58%),
              radial-gradient(120% 170% at 100% 100%, rgba(56, 189, 248, .5) 0%, rgba(56, 189, 248, 0) 58%), #0a1628;
  color: #FFFFFF; border: 1px solid rgba(148, 163, 184, .3); border-radius: 999px !important; padding: 9px 20px !important;
  font-size: .9rem !important; font-weight: 600; letter-spacing: 0; text-transform: none; box-shadow: none;
}
html.da .pptd-header-right > .pptd-btn-primary:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.18); box-shadow: 0 14px 30px rgba(10, 22, 40, .35); }

/* ---------- 4. Buttons ---------- */
html.da .pptd-btn { border-radius: 999px; font-weight: 600; letter-spacing: 0; }
html.da .pptd-btn-primary { background: var(--t-gradient-button); color: #FFFFFF; box-shadow: none; }
html.da .pptd-btn-primary:hover:not(:disabled) { box-shadow: 0 12px 28px rgba(37, 99, 235, .36); transform: translateY(-2px); }
html.da:not([data-theme="dark"]) .pptd-btn-secondary { background: #FFFFFF; color: #0B1220; border: 1px solid #0B1220; }
html.da:not([data-theme="dark"]) .pptd-btn-secondary:hover:not(:disabled) { background: #F2F4F7; color: #0B1220; }
html.da .pptd-btn-lg { min-height: 52px; padding: 0 28px; font-size: 1rem; }

/* ---------- 5. Cards, badges, chips, inputs ---------- */
html.da .glass-card { -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 20px; box-shadow: none; }
html.da:not([data-theme="dark"]) .glass-card { background: #FFFFFF; border-color: #0B1220; }
html.da :is(a.glass-card, .glass-card.is-link):hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--da-link, #1D4ED8); }
html.da .landing-section-badge { text-transform: none; letter-spacing: 0; font-weight: 600; border-radius: 999px; }
html.da:not([data-theme="dark"]) .landing-section-badge { background: #FFFFFF; border: 1px solid var(--color-border-default); color: var(--color-text-secondary); }
html.da .pptd-badge { border-radius: 999px; }
html.da .pptd-hero { background: #FFFFFF; }
html.da[data-theme="dark"] .pptd-hero { background: var(--color-bg-base); }
html.da .pptd-input { border-radius: 12px; }
html.da:not([data-theme="dark"]) .pptd-input { border-color: #0B1220; }
html.da:not([data-theme="dark"]) .pptd-input:focus { border-color: #1D4ED8; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
html.da:not([data-theme="dark"]) input[type="checkbox"]:checked { background: #1D4ED8; border-color: #1D4ED8; }
html.da :focus-visible { outline: 2px solid #2563EB; outline-offset: 3px; }

/* ---------- 6. Footer ---------- */
html.da .pptd-footer { border-top: 1px solid var(--color-border-default); }
html.da:not([data-theme="dark"]) .pptd-footer { background: #FFFFFF; }
html.da .pptd-footer-heading { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
html.da .pptd-footer-list a:hover { color: #1D4ED8; }

/* ---------- 7. The film: navy surface with glows and a dot grid ---------- */
html.da .da-film, html.da .hd-embed, html.da .hclose {
  position: relative; isolation: isolate; overflow: hidden; color: #FFFFFF;
  background: radial-gradient(42% 70% at 12% 0%, rgba(37, 99, 235, .45), rgba(37, 99, 235, 0) 70%),
              radial-gradient(45% 75% at 95% 100%, rgba(56, 189, 248, .26), rgba(56, 189, 248, 0) 70%),
              radial-gradient(30% 50% at 60% 40%, rgba(124, 58, 237, .14), rgba(124, 58, 237, 0) 70%), #0a1628 !important;
}
html.da :is(.da-film, .hd-embed, .hclose)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(148, 163, 184, .22) 1.2px, transparent 1.6px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000, transparent 78%); mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000, transparent 78%);
}
html.da[data-theme="dark"] :is(.da-film, .hd-embed, .hclose) { box-shadow: inset 0 0 0 1px #1F2D44; }
html.da .da-glow, html.da .da-dots { display: none; }   /* the film paints its glows itself */

/* ---------- 8. Homepage hero: film panel, doors overlapping its lower edge ---------- */
html.da .hd2-hero { background: #FFFFFF !important; padding-top: 24px !important; padding-bottom: 48px !important; }
html.da[data-theme="dark"] .hd2-hero { background: var(--color-bg-base) !important; }
html.da .hd2-hero > div[style*="blur"] { display: none; }
html.da .da-film { border-radius: 32px; padding: 64px 32px 150px; text-align: center; }
html.da .da-film .hd2-top { margin: 0 auto; max-width: 1120px !important; }
html.da .da-film .landing-section-badge { background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(148, 163, 184, .3) !important; color: #FFFFFF !important; }
html.da .da-film .landing-section-badge :is(i, svg) { color: #93C5FD; }
html.da .da-film .hd2-h1 { color: #FFFFFF; font-weight: 700; font-size: clamp(34px, 4.7vw, 66px); line-height: 1.04; }
html.da .da-film .hd2-h1 span { display: block; background: linear-gradient(92deg, #60A5FA 0%, #38BDF8 55%, #5EEAD4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.da .da-film .hd2-sub { color: #C7D2E3; }
html.da .da-film .hd2-ask { color: #E2E8F0; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; margin-top: 40px; }
html.da .hd2-doors { position: relative; z-index: 2; margin: -118px 24px 0 !important; gap: 20px !important; counter-reset: door; }
html.da .hd2-door { background: #FFFFFF !important; border: 1px solid #0B1220 !important; border-radius: 20px !important; padding: 22px 22px 20px !important; gap: 8px !important; box-shadow: 0 18px 40px rgba(10, 22, 40, .10); }
html.da[data-theme="dark"] .hd2-door { background: #0E1A2E !important; border-color: #52627A !important; }
html.da .hd2-door:hover { transform: translateY(-4px); border-color: #1D4ED8 !important; box-shadow: 0 18px 40px rgba(10, 22, 40, .16) !important; }
html.da .hd2-door .hd2-ico { display: none !important; }
html.da .hd2-door::before { counter-increment: door; content: counter(door); display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--t-gradient-button); color: #FFFFFF; font-family: var(--font-display, 'Clash Display'), sans-serif; font-weight: 700; font-size: 16px; }
html.da .hd2-door b { font-family: var(--font-display, 'Clash Display'), sans-serif; font-weight: 600; font-size: 21px; line-height: 1.2; color: var(--color-text-primary); }
html.da .hd2-door .hd2-line { font-size: 14px; color: var(--color-text-secondary); }
html.da .hd2-door em { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--color-border-default); width: 100%; color: #1D4ED8; font-weight: 600; }
html.da[data-theme="dark"] .hd2-door em { color: #7DA8FF; }
html.da .hd2-door .hd2-go { top: 22px !important; right: 20px !important; background: transparent !important; border: 0 !important; color: var(--color-text-primary) !important; }
html.da[dir="rtl"] .hd2-door .hd2-go { right: auto !important; left: 20px !important; }
html.da .hd2-trust { margin-top: 28px !important; }
html.da .hd2-stars { color: #D97706 !important; }

/* ---------- 9. Chapters: number + name above a big heading, price pill, outlined cards ---------- */
html.da .hcbar { background: rgba(255, 255, 255, .96) !important; border-bottom: 1px solid var(--color-border-default) !important; box-shadow: none !important; }
html.da[data-theme="dark"] .hcbar { background: rgba(7, 14, 28, .94) !important; }
html.da .hcbar-i { border-radius: 999px !important; }
html.da .hcbar-i.is-on { background: #0a1628 !important; color: #FFFFFF !important; }
html.da .hcbar-i.is-on :is(i, svg) { color: #FFFFFF !important; }
html.da .hc { background: #FFFFFF !important; border-top: 1px solid var(--color-border-default); }
html.da[data-theme="dark"] .hc { background: var(--color-bg-base) !important; }
html.da .hc-wrap { padding-block: 96px !important; }
html.da .hc-head .hc-ico { display: none !important; }
html.da .hc-kicker { display: flex !important; align-items: center; gap: 12px; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; font-weight: 600 !important; color: var(--color-text-primary) !important; }
html.da .hc-kicker span { display: inline-grid !important; place-items: center; width: 34px !important; height: 34px !important; border-radius: 999px !important; background: var(--t-gradient-button) !important; color: #FFFFFF !important; font-family: var(--font-display, 'Clash Display'), sans-serif; font-weight: 700; font-size: 16px !important; }
html.da .hc-head h2 { font-weight: 700 !important; font-size: clamp(28px, 3.4vw, 46px) !important; line-height: 1.08 !important; }
html.da .hc-price { background: transparent !important; border: 1px solid var(--color-border-strong) !important; color: var(--color-text-primary) !important; border-radius: 999px !important; font-weight: 600 !important; }
html.da .hc-media { border-radius: 20px !important; box-shadow: none !important; }
html.da .hc-txt { color: var(--color-text-primary) !important; font-size: 18px !important; }
html.da .hc-list :is(i, svg) { color: #1D4ED8 !important; }
html.da .hc-more { color: #1D4ED8 !important; font-weight: 600; }
html.da :is(.hc-sublinks, .hc-chips) a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--color-border-default) !important; border-radius: 999px !important; background: var(--color-bg-card) !important; color: var(--color-text-secondary) !important; font-size: 14px; font-weight: 500; }
html.da :is(.hc-sublinks, .hc-chips) a:hover { border-color: var(--color-text-primary) !important; color: var(--color-text-primary) !important; }
html.da .hc-sub-head h3 { font-weight: 700 !important; }
/* how it works, projects, plans, categories: outlined cards */
html.da :is(.hc-steps li, .hc-proj, .hc-plan, .hc-tile, .hc-cat) { background: var(--color-bg-card) !important; border: 1px solid var(--color-border-strong) !important; border-radius: 20px !important; box-shadow: none !important; }
html.da[data-theme="dark"] :is(.hc-steps li, .hc-proj, .hc-plan, .hc-tile, .hc-cat) { border-color: #52627A !important; }
html.da .hc-steps li { padding: 22px !important; }
html.da .hc-steps li::before { width: 34px !important; height: 34px !important; background: #0a1628 !important; font-family: var(--font-display, 'Clash Display'), sans-serif; font-weight: 700 !important; font-size: 16px !important; }
html.da .hc-steps li::after { display: none !important; }
html.da .hc-steps b { font-family: var(--font-display, 'Clash Display'), sans-serif; font-weight: 600; font-size: 19px !important; }
html.da :is(.hc-proj, .hc-tile, .hc-cat):hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover) !important; border-color: #1D4ED8 !important; }
html.da .hc-tag { background: transparent !important; border: 1px solid var(--color-border-default) !important; color: var(--color-text-secondary) !important; border-radius: 999px !important; }
html.da .hc-plan-tag { background: var(--t-gradient-button) !important; color: #FFFFFF !important; }
/* decks + themes: the second film band */
html.da .hd-embed { border-radius: 32px; padding: 56px !important; }
html.da .hd-embed :is(.hd-title, .hd-row-head h3, .hd-row-head h4, .hd-name, .hd-row-head b) { color: #FFFFFF !important; }
html.da .hd-embed :is(.hd-lede, .hd-meta, .hd-row-head p, .hd-eyebrow) { color: #C7D2E3 !important; }
html.da .hd-embed .hd-facts { border: 1px solid rgba(148, 163, 184, .3); border-radius: 20px; background: rgba(255, 255, 255, .03); }
html.da .hd-embed .hd-fact b { background: linear-gradient(92deg, #60A5FA 0%, #38BDF8 55%, #5EEAD4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--font-display, 'Clash Display'), sans-serif; }
html.da .hd-embed .hd-fact span { color: #C7D2E3 !important; }
html.da .hd-embed .hd-stack { border-radius: 14px; }
html.da .hd-embed .hd-ctas .pptd-btn-primary { background: #FFFFFF !important; color: #0a1628 !important; }
html.da .hd-embed .hd-ctas :is(.pptd-btn-secondary, .pptd-btn-ghost) { background: transparent !important; color: #FFFFFF !important; border: 1px solid rgba(148, 163, 184, .45) !important; }
html.da .hd-embed .hd-ctas :is(.pptd-btn-secondary, .pptd-btn-ghost):hover { background: rgba(255, 255, 255, .08) !important; }

/* ---------- 10. Reviews, FAQ, closing film, contact ---------- */
html.da .hp-review-card { background: var(--color-bg-card) !important; border: 1px solid var(--color-border-strong) !important; border-radius: 20px !important; box-shadow: none !important; }
html.da[data-theme="dark"] .hp-review-card { border-color: #52627A !important; }
html.da .hfaq { background: #FFFFFF !important; }
html.da[data-theme="dark"] .hfaq { background: var(--color-bg-base) !important; }
html.da .hfaq-list :is(details, .hfaq-item) { background: var(--color-bg-card) !important; border: 1px solid var(--color-border-strong) !important; border-radius: 20px !important; box-shadow: none !important; }
html.da[data-theme="dark"] .hfaq-list :is(details, .hfaq-item) { border-color: #52627A !important; }
html.da .hclose { margin: 0 auto; max-width: calc(var(--content-max, 1280px) + 48px); width: calc(100% - 48px); border-radius: 32px; padding: 56px 0 !important; text-align: start; }
html.da .hclose-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 56px; align-items: start; padding: 0 56px !important; }
html.da .hclose-in > h2 { grid-column: 1; color: #FFFFFF !important; font-size: clamp(32px, 4vw, 52px) !important; line-height: 1.05 !important; margin: 0 !important; }
html.da .hclose-in > p { grid-column: 1; color: #C7D2E3 !important; margin: 0 !important; }
html.da .hclose-doors { grid-column: 2; grid-row: 1 / span 2; display: flex !important; flex-direction: column; gap: 0 !important; border-top: 1px solid rgba(148, 163, 184, .3); margin: 0 !important; }
html.da .hclose-door { display: flex !important; flex-direction: row !important; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0 !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(148, 163, 184, .3) !important; border-radius: 0 !important; text-align: start !important; }
html.da .hclose-door:hover { transform: none !important; }
html.da .hclose-door b { color: #FFFFFF !important; font-size: 18px !important; font-weight: 600; }
html.da .hclose-door > span { margin-top: 0 !important; color: #7DA8FF !important; white-space: nowrap; }
html.da .hp-contact-grid .glass-card { border: 1px solid var(--color-border-strong) !important; border-radius: 32px !important; box-shadow: none !important; }
html.da section.pptd-section:has(.hp-contact-grid) { background: #FFFFFF !important; }
html.da[data-theme="dark"] section.pptd-section:has(.hp-contact-grid) { background: var(--color-bg-base) !important; }
html.da .hp-contact-grid :is(input, textarea) { border: 1px solid var(--color-border-strong) !important; border-radius: 12px !important; background: var(--color-bg-card) !important; }

/* ---------- 11. Template page ---------- */
html.da .td-hero { background: #FFFFFF !important; }
html.da[data-theme="dark"] .td-hero { background: var(--color-bg-base) !important; }
html.da .td-hero h1 { font-weight: 700 !important; font-size: clamp(30px, 4vw, 52px) !important; line-height: 1.05 !important; }
html.da .td-preview-card { border: 0 !important; border-radius: 24px !important; box-shadow: none !important; background: var(--da-film, #0a1628) !important; }
html.da[data-theme="dark"] .td-preview-card { background: #0a1628 !important; box-shadow: inset 0 0 0 1px #1F2D44 !important; }
html.da .td-meta-chip { background: transparent !important; border: 1px solid var(--color-border-default) !important; border-radius: 999px !important; }
html.da .td-sidebar .td-info-card { background: var(--color-bg-card) !important; border: 1px solid var(--color-border-strong) !important; border-radius: 24px !important; box-shadow: none !important; }
html.da .td-search-mini { border: 1px solid var(--color-border-strong) !important; border-radius: 999px !important; background: var(--color-bg-card) !important; box-shadow: none !important; }
html.da .td-search-mini input { border: 0 !important; background: transparent !important; box-shadow: none !important; }
html.da :is(.td-size-opt, .td-orient-opt, .td-ed-opt) { border: 1px solid var(--color-border-strong) !important; border-radius: 12px !important; background: var(--color-bg-card) !important; color: var(--color-text-primary) !important; font-weight: 600 !important; box-shadow: none !important; }
html.da :is(.td-orient-opt, .td-ed-opt) { border-radius: 14px !important; }
html.da :is(.td-size-opt, .td-orient-opt, .td-ed-opt)[aria-checked="true"] { border-color: #1D4ED8 !important; box-shadow: inset 0 0 0 1px #1D4ED8 !important; color: #1D4ED8 !important; }
html.da[data-theme="dark"] :is(.td-size-opt, .td-orient-opt, .td-ed-opt)[aria-checked="true"] { border-color: #7DA8FF !important; box-shadow: inset 0 0 0 1px #7DA8FF !important; color: #7DA8FF !important; }
html.da .td-dl-btn { background: var(--t-gradient-button) !important; border-radius: 999px !important; box-shadow: none !important; }
html.da .td-dl-btn:hover { box-shadow: 0 12px 28px rgba(37, 99, 235, .36) !important; transform: translateY(-2px); }
html.da .td-addin-btn { border-radius: 999px !important; border: 1px solid var(--color-border-strong) !important; background: var(--color-bg-card) !important; }
html.da .td-tag { border-radius: 999px !important; border: 1px solid var(--color-border-default) !important; background: transparent !important; text-transform: none !important; }
html.da .td-tag:hover { border-color: var(--color-text-primary) !important; }
html.da .td-palette-label { text-transform: none !important; letter-spacing: 0 !important; }
html.da .rs-card-img { border: 1px solid var(--color-border-strong); border-radius: 16px; transition: transform .25s ease, box-shadow .25s ease; }
html.da .rs-card:hover .rs-card-img { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

/* ---------- 12. Category + search listing ---------- */
html.da .tmpl-hero { background: #FFFFFF !important; border-bottom: 1px solid var(--color-border-default); }
html.da[data-theme="dark"] .tmpl-hero { background: var(--color-bg-base) !important; }
html.da .tmpl-hero::before, html.da .tmpl-hero::after { display: none !important; }
html.da .tmpl-hero h1 { font-weight: 700 !important; font-size: clamp(34px, 4.4vw, 60px) !important; line-height: 1.05 !important; }
html.da .tmpl-hero-badge { text-transform: none !important; letter-spacing: 0 !important; border-radius: 999px !important; }
html.da .tmpl-feature-card { background: var(--color-bg-card) !important; border: 1px solid var(--color-border-strong) !important; border-radius: 20px !important; box-shadow: none !important; }
html.da .tmpl-feature-icon { background: transparent !important; border: 1px solid var(--color-border-default) !important; color: #1D4ED8 !important; border-radius: 12px !important; }
html.da .tmpl-search { border: 1px solid var(--color-border-strong) !important; border-radius: 999px !important; background: var(--color-bg-card) !important; box-shadow: none !important; }
html.da .tmpl-search input { border: 0 !important; background: transparent !important; box-shadow: none !important; }
html.da .tmpl-pills { border: 1px solid var(--color-border-default) !important; border-radius: 999px !important; background: transparent !important; padding: 4px !important; }
html.da .tmpl-pills button { border-radius: 999px !important; }
html.da .tmpl-pills button.active { background: #0a1628 !important; color: #FFFFFF !important; box-shadow: none !important; }
html.da .sidebar-group-label { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; }
html.da .tmpl-sidebar :is(input[type="search"], input[type="text"]) { border: 1px solid var(--color-border-strong) !important; border-radius: 999px !important; background: var(--color-bg-card) !important; }
html.da .number-bar .number { border-radius: 999px !important; }
html.da .number-bar :is(.number.active, .number.selected) { background: #0a1628 !important; border-color: #0a1628 !important; color: #FFFFFF !important; }
html.da .tmpl-card { border: 1px solid var(--color-border-strong) !important; border-radius: 20px !important; box-shadow: none !important; }
html.da[data-theme="dark"] .tmpl-card { border-color: #52627A !important; }
html.da .tmpl-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover) !important; border-color: #1D4ED8 !important; }
html.da .pptd-pagination :is(a, span) { border-radius: 999px !important; }
html.da .pptd-pagination .active { background: #0a1628 !important; border-color: #0a1628 !important; color: #FFFFFF !important; }
html.da .cat-faq-badge { text-transform: none !important; letter-spacing: 0 !important; }
html.da .cat-faq-item { border: 1px solid var(--color-border-strong) !important; border-radius: 20px !important; box-shadow: none !important; }

/* ---------- 13. Blog ---------- */
html.da .blog-hero-section { background: #FFFFFF !important; border-bottom: 1px solid var(--color-border-default); }
html.da[data-theme="dark"] .blog-hero-section { background: var(--color-bg-base) !important; }
html.da .blog-hero-section h1 { font-weight: 700 !important; }
html.da .blog-hero-badge { text-transform: none !important; letter-spacing: 0 !important; }
html.da .blog-hero-search .pptd-input { border: 1px solid var(--color-border-strong) !important; border-radius: 999px !important; background: var(--color-bg-card) !important; }
html.da .blog-cat-pill { border: 1px solid var(--color-border-default) !important; background: transparent !important; border-radius: 999px !important; text-transform: none !important; }
html.da .blog-cat-pill.active { background: #0a1628 !important; border-color: #0a1628 !important; color: #FFFFFF !important; }
html.da .blog-sort-pills a.active { background: #0a1628 !important; color: #FFFFFF !important; border-radius: 999px; }
html.da :is(.blog-featured, .blog-card) { border: 1px solid var(--color-border-strong) !important; border-radius: 20px !important; box-shadow: none !important; }
html.da[data-theme="dark"] :is(.blog-featured, .blog-card) { border-color: #52627A !important; }
html.da :is(.blog-featured, .blog-card):hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover) !important; border-color: #1D4ED8 !important; }
html.da :is(.blog-featured-cat, .blog-card-cat) { text-transform: none !important; letter-spacing: 0 !important; }

/* ---------- 14. Enterprise portal (--ep-* tokens from _nav.php) ---------- */
html.da:not([data-theme="dark"]) {
  --ep-bg: #FFFFFF; --ep-side: #FFFFFF; --ep-card: #FFFFFF; --ep-inset: #F8FAFC;
  --ep-border: #D0D5DD; --ep-border-strong: #0B1220; --ep-line: #EAECF0;
  --ep-text: #0B1220; --ep-text-2: #344054; --ep-muted: #667085; --ep-label: #667085;
  --ep-nav: #0B1220; --ep-hover: #F2F4F7; --ep-nav-on-bg: #0a1628; --ep-nav-on: #FFFFFF;
  --ep-accent: #1D4ED8; --ep-accent-soft: #EFF4FF; --ep-focus: rgba(37, 99, 235, .18); --ep-info: #1D4ED8;
}
html.da .ep-label { text-transform: none !important; letter-spacing: 0 !important; }
html.da .ep-card { border-radius: 20px; }

/* ---------- 15. Search boxes: rounded outline, blue on focus, never an underline ---------- */
html.da :is(.td-search-mini, .tmpl-search):focus-within, html.da :is(.blog-hero-search .pptd-input, .tmpl-sidebar input, #mobile-nav .pptd-input):focus { border-color: #1D4ED8 !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15) !important; outline: 0 !important; }
html.da :is(.td-search-mini, .tmpl-search) input:focus { outline: 0 !important; box-shadow: none !important; }

/* ---------- 16. Mobile menu ---------- */
html.da #mobile-nav { background: #FFFFFF !important; border-top: 0 !important; border-bottom: 1px solid var(--color-border-default); box-shadow: 0 24px 48px rgba(10, 22, 40, .16) !important; padding: 16px 20px 24px !important; max-height: calc(100dvh - 68px) !important; }
html.da #mobile-nav .pptd-input { height: 48px; font-size: 16px; border: 1px solid #0B1220 !important; border-radius: 999px !important; background: #FFFFFF !important; padding-inline-start: 42px !important; }
html.da #mobile-nav .pptd-mobile-search :is(i, svg) { left: 16px !important; color: #0B1220 !important; }
html.da[dir="rtl"] #mobile-nav .pptd-mobile-search :is(i, svg) { left: auto !important; right: 16px !important; }
html.da #mobile-nav .pptd-mobile-links { gap: 0; }
html.da #mobile-nav .pptd-nav-link { justify-content: space-between !important; gap: 12px; padding: 15px 14px; border-radius: 0; border-bottom: 1px solid #EAECF0; font-family: var(--font-display, 'Clash Display'), sans-serif; font-size: 20px; font-weight: 600; line-height: 1.2; color: #0B1220 !important; background: transparent !important; }
html.da #mobile-nav .pptd-nav-link::after { content: ""; flex: none; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: .35; margin-inline-end: 4px; }
html.da[dir="rtl"] #mobile-nav .pptd-nav-link::after { transform: rotate(-135deg); }
html.da #mobile-nav .pptd-nav-link:hover { background: #F2F4F7 !important; border-radius: 14px; }
html.da #mobile-nav .pptd-nav-link.active { background: #0a1628 !important; color: #FFFFFF !important; border-bottom-color: transparent; border-radius: 14px; }
html.da #mobile-nav .pptd-nav-link.active::after { opacity: 1; }
html.da[dir="rtl"] #mobile-nav .pptd-nav-link, html.da:is([lang="ja"], [lang="zh"], [lang="ko"]) #mobile-nav .pptd-nav-link { font-family: inherit; }
html.da #mobile-nav .pptd-header-inner > div:last-child { border-top: 0 !important; margin-top: 12px !important; padding-top: 8px !important; }
html.da #mobile-nav .pptd-header-inner > div:last-child a { padding: 8px 12px !important; border: 1px solid #D0D5DD !important; color: #344054 !important; font-size: 13px !important; }
html.da #mobile-nav .pptd-header-inner > div:last-child a[aria-current] { background: #0a1628 !important; border-color: #0a1628 !important; color: #FFFFFF !important; }
html.da #mobile-menu-btn { position: relative; width: 44px; height: 44px; justify-content: center; border: 1px solid var(--color-border-default) !important; }
html.da body.pptd-mobile-menu-open #mobile-menu-btn { background: #0a1628 !important; color: #FFFFFF !important; border-color: #0a1628 !important; }
html.da body.pptd-mobile-menu-open #mobile-menu-btn :is(i, svg) { display: none; }
html.da body.pptd-mobile-menu-open #mobile-menu-btn::before, html.da body.pptd-mobile-menu-open #mobile-menu-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
html.da body.pptd-mobile-menu-open #mobile-menu-btn::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- 17. Popups: one A card for every dialog (light theme; dark keeps the classic dark popups) ----------
 * White card, near-black 1px outline, 24px corners, soft deep shadow; blue gradient primary, outlined secondary,
 * outlined round close. Fullscreen viewers (film box, portfolio lightbox, Palette Studio) are left as they are. */
html.da:not([data-theme="dark"]) { --da-pop-shadow: 0 30px 80px rgba(10, 22, 40, .28); --da-pop-overlay: rgba(10, 22, 40, .55); }
html.da:not([data-theme="dark"]) :is(.ppt-popup-overlay, .ob-overlay, .bk-modal-overlay, .bs-overlay, #pptdModalOverlay, #bdgCelebrationOverlay, #bkEditOverlay, #pptdConfirmModal, #cancelModal, #deleteAccountModal, #planChangeModal, .qrs-modal-backdrop, .ep-modal-overlay, #pptd-cookie-modal .ccm-overlay, .tmpl-sidebar-overlay, .dw-drawer) { background: var(--da-pop-overlay) !important; -webkit-backdrop-filter: blur(4px) !important; backdrop-filter: blur(4px) !important; }
html.da:not([data-theme="dark"]) :is(.ppt-popup, .ob-modal, .bk-modal, .bs-modal, #pptdModalOverlay > div, #bdgCelebrationModal, #bkEditOverlay > div, #pptdConfirmModal > div, #cancelModal > div, #deleteAccountModal > div, #planChangeModal > .glass-card, .qrs-modal, .ep-modal-card, .ep-prompt-card, #pptd-cookie-modal .ccm-dialog) { background: #FFFFFF !important; color: #0B1220; border: 1px solid #0B1220 !important; border-radius: 24px !important; box-shadow: var(--da-pop-shadow) !important; }
html.da:not([data-theme="dark"]) :is(.pptd-ap, #pptd-cookie-banner .ccb-inner, .ept-tooltip) { background: #FFFFFF !important; border: 1px solid #0B1220 !important; border-radius: 20px !important; box-shadow: 0 18px 40px rgba(10, 22, 40, .16) !important; }
html.da:not([data-theme="dark"]) .pptd-toast { background: #FFFFFF !important; border-top: 1px solid #0B1220 !important; border-right: 1px solid #0B1220 !important; border-bottom: 1px solid #0B1220 !important; border-radius: 14px !important; box-shadow: 0 12px 28px rgba(10, 22, 40, .14) !important; }
html.da:not([data-theme="dark"]) .dw-drawer-panel { background: #FFFFFF !important; border-inline-start: 1px solid #0B1220 !important; }
html.da:not([data-theme="dark"]) :is(.ob-title, .bs-title, .bk-modal-header h3, #pptdModalOverlay h3, .qrs-modal-header h3, .ep-prompt-title, #pptdConfirmTitle, #planChangeModal h3, #pptd-cookie-modal h3, #bdgCelebName, .ept-title, .pptd-ap h3, #pptd-cookie-banner .ccb-text strong) { font-family: var(--font-display, 'Clash Display'), sans-serif !important; font-weight: 700 !important; color: #0B1220 !important; }
html.da:not([data-theme="dark"]) :is(.ob-eyebrow, .pptd-ap-k) { text-transform: none !important; letter-spacing: 0 !important; color: #1D4ED8 !important; }
html.da:not([data-theme="dark"]) :is(.ob-close, .bk-modal-close, .bs-close, .qrs-modal-close, .ep-modal-close, .ep-prompt-close, .pptd-ap-x, #cancelModal > div > button:first-child, #deleteAccountModal > div > button:first-child, #bdgCelebrationModal > button:first-child) { width: 36px !important; height: 36px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 999px !important; border: 1px solid #0B1220 !important; background: #FFFFFF !important; color: #0B1220 !important; line-height: 1 !important; }
html.da:not([data-theme="dark"]) :is(.ob-close, .bk-modal-close, .bs-close, .qrs-modal-close, .ep-modal-close, .ep-prompt-close, .pptd-ap-x):hover { background: #F2F4F7 !important; transform: none !important; }
html.da:not([data-theme="dark"]) :is(.bk-btn-save, .bs-btn-primary, .qrs-modal-ok, #pptdModalOverlay button, .pptd-ap-btn.p) { background: linear-gradient(135deg, #1D4ED8 0%, #3B82F6 100%) !important; color: #FFFFFF !important; border: 0 !important; border-radius: 999px !important; }
html.da:not([data-theme="dark"]) :is(.bk-btn-cancel, .bs-btn-ghost, .qrs-modal-cancel, .pptd-ap-btn.s) { background: #FFFFFF !important; color: #0B1220 !important; border: 1px solid #0B1220 !important; border-radius: 999px !important; }
html.da:not([data-theme="dark"]) :is(.bk-btn-cancel, .bs-btn-ghost, .qrs-modal-cancel, .pptd-ap-btn.s):hover { background: #F2F4F7 !important; }
html.da:not([data-theme="dark"]) #pptd-cookie-banner .pptd-btn-ghost { border: 1px solid #0B1220 !important; color: #0B1220 !important; }
html.da:not([data-theme="dark"]) .ob-route { background: #FFFFFF !important; border: 1px solid #0B1220 !important; border-radius: 16px !important; }
html.da:not([data-theme="dark"]) .ob-route:hover { border-color: #1D4ED8 !important; box-shadow: 0 12px 28px rgba(10, 22, 40, .12); }
html.da:not([data-theme="dark"]) #pptd-cookie-modal .ccm-row { background: #FFFFFF !important; border: 1px solid #D0D5DD; border-radius: 14px !important; }
html.da #pptd-lang-banner { background: #0a1628 !important; }
/* download popups 1-4: white card, film strip header kept small, outlined pills */
html.da:not([data-theme="dark"]) .ppt-popup { max-width: 500px; overflow: hidden; }
html.da:not([data-theme="dark"]) .ppt-popup .pp-top { background: radial-gradient(60% 120% at 0% 0%, rgba(37, 99, 235, .45), rgba(37, 99, 235, 0) 70%), radial-gradient(60% 120% at 100% 100%, rgba(56, 189, 248, .26), rgba(56, 189, 248, 0) 70%), #0a1628 !important; padding: 32px 32px 26px; }
html.da:not([data-theme="dark"]) .ppt-popup .pp-title { font-family: var(--font-display, 'Clash Display'), sans-serif; font-weight: 700; color: #FFFFFF; }
html.da:not([data-theme="dark"]) .ppt-popup .pp-subtitle { color: #C7D2E3; }
html.da:not([data-theme="dark"]) .ppt-popup .pp-close { width: 36px; height: 36px; border: 1px solid; top: 16px; right: 16px; background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .35) !important; color: #FFFFFF !important; }
html.da:not([data-theme="dark"]) .ppt-popup .pp-close:hover { background: rgba(255, 255, 255, .18) !important; }
html.da:not([data-theme="dark"]) .ppt-popup .pp-bottom { background: #FFFFFF; padding: 22px 32px 26px; }
html.da:not([data-theme="dark"]) .ppt-popup .pp-cta { border-radius: 999px; padding: 14px 12px; font-size: 14px; }
html.da:not([data-theme="dark"]) .ppt-popup :is(.pp-cta-ppt, .pp-cta-upgrade, .pp-cta-brand) { background: linear-gradient(135deg, #1D4ED8 0%, #3B82F6 100%) !important; color: #FFFFFF !important; }
html.da:not([data-theme="dark"]) .ppt-popup :is(.pp-cta-gs, .pp-cta-wait) { background: #FFFFFF !important; color: #0B1220 !important; border: 1px solid #0B1220 !important; }
html.da:not([data-theme="dark"]) .ppt-popup :is(.pp-cta-gs, .pp-cta-wait):hover { background: #F2F4F7 !important; }
html.da:not([data-theme="dark"]) .ppt-popup :is(.pp-usage-text, .pp-limit-msg p) { color: #475467; }
html.da:not([data-theme="dark"]) .ppt-popup .pp-skip { color: #667085; }
html.da:not([data-theme="dark"]) .ppt-popup .pp-customize-nudge { color: #475467; }
html.da:not([data-theme="dark"]) .ppt-popup .pp-customize-nudge button { color: #1D4ED8; }
html.da:not([data-theme="dark"]) .ppt-popup .pp-opt-label { color: #344054; }
html.da:not([data-theme="dark"]) .ppt-popup .pp-opt-label strong { color: #1D4ED8; }
html.da:not([data-theme="dark"]) .ppt-popup .pp-or { color: #98A2B3; }
html.da:not([data-theme="dark"]) .ppt-popup .pp-or::before, html.da:not([data-theme="dark"]) .ppt-popup .pp-or::after { background: #EAECF0; }
html.da:not([data-theme="dark"]) #popup4-flash-offer { color: #B45309; }
html.da:not([data-theme="dark"]) .ppt-popup .pp-pack { color: #475467; }
html.da:not([data-theme="dark"]) .ppt-popup .pp-pack:hover { color: #0B1220; }
html.da:not([data-theme="dark"])[dir="rtl"] .ppt-popup .pp-close { right: auto; left: 16px; }

/* ---------- 18. Phones and tablets ---------- */
@media (max-width: 1000px) {
  html.da .hclose-in { grid-template-columns: minmax(0, 1fr); padding: 0 28px !important; }
  html.da .hclose-doors { grid-column: 1; grid-row: auto; }
  html.da .hd-embed { padding: 36px 24px !important; border-radius: 24px; }
}
@media (max-width: 640px) {
  /* 40px round buttons + a tighter CTA keep the phone header off its last compact step (which hides the CTA) */
  html.da :is(#lang-toggle, .pptd-header-right [data-theme-toggle], #mobile-menu-btn) { min-width: 40px !important; width: 40px !important; height: 40px !important; }
  html.da .pptd-header-right > .pptd-btn-primary { padding: 9px 14px !important; font-size: .84rem !important; }
  html.da .da-film .hd2-h1 { font-size: 30px; }
  html.da .hd2-hero { padding-top: 12px !important; }
  html.da .da-film { border-radius: 24px; padding: 36px 18px 120px; }
  html.da .da-film .hd2-ask { margin-top: 24px; }
  html.da .hd2-doors { margin: -96px 10px 0 !important; gap: 12px !important; }
  html.da .hd2-door { padding: 16px !important; }
  html.da .hd2-door::before { width: 28px; height: 28px; font-size: 14px; }
  html.da .hd2-door b { font-size: 17px; }
  html.da .hc-wrap { padding-block: 64px !important; }
  html.da .hc-steps { row-gap: 14px; }
  html.da .hclose { width: calc(100% - 24px); border-radius: 24px; padding: 36px 0 !important; }
  html.da .hclose-in { padding: 0 20px !important; }
  html.da .ppt-popup { width: calc(100% - 32px) !important; max-height: calc(100dvh - 40px); overflow-y: auto; }
  html.da .ppt-popup .pp-top { padding: 26px 22px 20px !important; }
  html.da .ppt-popup .pp-bottom { padding: 18px 22px 22px !important; }
}

/* ---------- 19. Fixes from the first live look (?design=a) ---------- */
html.da .hc { padding: 0 !important; }
html.da .hc-wrap { padding-block: 80px !important; }
html.da .hd2-hero { padding-bottom: 8px !important; }
html.da .hd-embed .hd-facts { display: flex; padding: 0; overflow: hidden; }
html.da .hd-embed .hd-fact { padding: 18px 26px; display: flex; flex-direction: column; gap: 2px; }
html.da .hd-embed .hd-fact + .hd-fact { border-inline-start: 1px solid rgba(148, 163, 184, .3); }
html.da .hd-embed .hd-fact b { font-size: 34px; line-height: 1.05; }
/* section labels: plain small text (the hero's stays a glass pill) */
html.da .landing-section-badge:not(.da-film .landing-section-badge) { background: transparent !important; border: 0 !important; padding: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; font-weight: 600 !important; color: var(--color-text-tertiary) !important; }
html.da .landing-section-badge:not(.da-film .landing-section-badge) :is(i, svg) { display: none !important; }
/* closing choice: same width as the page, text under the heading */
html.da .hclose { width: min(calc(var(--content-max, 1230px) - 2rem), calc(100% - 32px)) !important; max-width: none !important; }   /* the hero film's width (container minus its 1rem gutters) */
html.da .hclose-in { grid-template-rows: auto 1fr; max-width: none !important; }
html.da .hclose-in > p { align-self: start; }
/* contact: one outlined card holding the form and the details */
html.da .hp-contact-grid { border: 1px solid var(--color-border-strong); border-radius: 32px; padding: 48px; gap: 48px !important; align-items: start !important; }
html.da[data-theme="dark"] .hp-contact-grid { border-color: #52627A; }
html.da .hp-contact-grid .glass-card { border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: transparent !important; }
/* template page: the slide sits inside the film frame; the line under the title is body text */
html.da .td-preview-card { padding: clamp(16px, 3.4vw, 44px) !important; }
html.da .td-preview-card img { border-radius: 10px; box-shadow: 0 28px 60px rgba(0, 0, 0, .38); }
html.da .td-hero h1 + h2 { font-family: var(--font-sans, Poppins), sans-serif !important; font-weight: 400 !important; letter-spacing: 0 !important; font-size: 17px !important; color: var(--color-text-secondary) !important; }
@media (max-width: 640px) { html.da .hp-contact-grid { padding: 24px; border-radius: 24px; } }


/* ---------- 20. Templates menu in the header (2026-10-07) ---------- */
html.da .pptd-nav-dd-menu { top: calc(100% + 10px); border: 1px solid #0B1220; border-radius: 20px; padding: 8px; box-shadow: 0 24px 60px rgba(10, 22, 40, .18); }
html.da[data-theme="dark"] .pptd-nav-dd-menu { background: #0E1A2E; border-color: #52627A; }
html.da .pptd-nav-dd-item { border-radius: 14px; }
html.da .pptd-nav-dd-item:hover { background: #F2F4F7; }
html.da .pptd-nav-dd-item.is-on { background: #EFF4FF; }
html.da[data-theme="dark"] .pptd-nav-dd-item:is(:hover, .is-on) { background: #1A2B47; }
html.da .pptd-nav-dd-ico { background: var(--t-gradient-button); color: #FFFFFF; border-radius: 12px; }
html.da .pptd-nav-dd-item b { font-family: var(--font-display, 'Clash Display'), sans-serif; font-weight: 600; font-size: 15px; }
html.da .pptd-nav-dd-btn.active svg { color: #FFFFFF; }
/* phone menu: the three template kinds sit under a small "Templates" label */
html.da #mobile-nav .pptd-mobile-group { margin: 14px 0 4px; padding: 0 14px; font-size: 13px; font-weight: 600; color: #667085; }
html.da #mobile-nav .pptd-nav-link.pptd-mobile-sub { padding-inline-start: 28px; font-size: 18px; }


/* ---------- 21. Dropdowns (every select.pptd-input: themes filters, deck builder, quote + demo forms, profile) ----------
 * Closed: outlined pill + our chevron, every browser. Open list: Chrome/Edge 135+ style it through
 * appearance: base-select (rounded card, soft shadow, highlighted choice, tick); other browsers keep their native list. */
html.da select.pptd-input:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none; min-height: 46px; padding: 0 44px 0 18px; border: 1px solid var(--color-border-strong);
  border-radius: 999px; background: var(--color-bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1220' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 16px; color: var(--color-text-primary);
  font: inherit; font-size: 15px; line-height: 1.2; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
html.da[dir="rtl"] select.pptd-input:not([multiple]):not([size]) { padding: 0 18px 0 44px; background-position: left 16px center; }
html.da[data-theme="dark"] select.pptd-input:not([multiple]):not([size]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2E8F0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); border-color: #52627A; }
html.da select.pptd-input:not([multiple]):not([size]):hover { border-color: #1D4ED8; }
html.da select.pptd-input:not([multiple]):not([size]):focus-visible { outline: 0; border-color: #1D4ED8; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
@supports (appearance: base-select) {
  html.da select.pptd-input:not([multiple]):not([size]), html.da select.pptd-input:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  html.da select.pptd-input:not([multiple]):not([size]) { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 0 18px; background-image: none; }
  html.da select.pptd-input:not([multiple]):not([size])::picker-icon { content: ""; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1220' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; transition: rotate .2s ease; }
  html.da[data-theme="dark"] select.pptd-input:not([multiple]):not([size])::picker-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2E8F0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
  html.da select.pptd-input:not([multiple]):not([size]):open::picker-icon { rotate: 180deg; }
  html.da select.pptd-input::picker(select) { margin-block: 8px; padding: 6px; border: 1px solid #0B1220; border-radius: 16px; background: #FFFFFF; box-shadow: 0 24px 60px rgba(10, 22, 40, .18); max-height: min(420px, 60vh); overflow-y: auto; }
  html.da[data-theme="dark"] select.pptd-input::picker(select) { background: #0E1A2E; border-color: #52627A; }
  html.da select.pptd-input option { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 10px; font-size: 14.5px; color: #0B1220; cursor: pointer; }
  html.da[data-theme="dark"] select.pptd-input option { color: #E2E8F0; }
  html.da select.pptd-input option:is(:hover, :focus-visible) { background: #F2F4F7; outline: 0; }
  html.da[data-theme="dark"] select.pptd-input option:is(:hover, :focus-visible) { background: #1A2B47; }
  html.da select.pptd-input option:checked { background: #EFF4FF; color: #1D4ED8; font-weight: 600; }
  html.da[data-theme="dark"] select.pptd-input option:checked { background: rgba(96, 165, 250, .16); color: #93C5FD; }
  html.da select.pptd-input option::checkmark { order: 1; margin-inline-start: auto; content: "\2713"; color: #1D4ED8; font-weight: 700; }
}

/* ---------- 22. Older landing pages brought into A (2026-10-15: free + infographic hubs, about, partners, changelog,
 * categories, add-in + tool pages, legal, sign-in). Most of them lay out with inline styles, so the hooks are those
 * styles (the --t-gradient-* tokens, the old brand-coloured add-in buttons). Copy is untouched.
 * One white page; the promo / closing bands become the navy film; no lavender washes, colour glows or all-caps. */
/* sentence case everywhere (owner rule; 95 strings fixed 10-07, CSS-driven caps are the rest) */
html.da body :not(svg):not(svg *) { text-transform: none !important; }
/* heroes built on --t-gradient-hero: A's heading size */
html.da section[style*="--t-gradient-hero"] h1, html.da .tr-hero h1 { font-size: clamp(34px, 4.4vw, 60px) !important; font-weight: 700 !important; line-height: 1.05 !important; }
html.da section[style*="--t-gradient-hero"] h1 + p { font-size: 18px !important; }
/* grey and tinted bands: white, divided by a hairline */
html.da:not([data-theme="dark"]) :is(section[style*="--color-bg-secondary"], section.pptd-section[style*="--color-bg-subtle"], .legal-hero) { background: #FFFFFF !important; border-top: 1px solid var(--color-border-default); }
html.da .legal-hero { border-top: 0 !important; border-bottom: 1px solid var(--color-border-default); }
/* colour glows behind heroes */
html.da :is(.pds-glow, .ent-glow) { display: none !important; }
/* the film: promo + closing bands, the brand / word-cloud / QR / add-in closing cards */
html.da :is(section[style*="--t-gradient-cta"], .wc-addon-cta, .qrl-finalcta, .bm-hero, .al-final, .pptd-section div[style*="#0f1d3a"]) {
  --color-text-primary: #FFFFFF; --color-text-secondary: #C7D2E3; --color-text-tertiary: #94A3B8;
  --t-glass-bg: rgba(255, 255, 255, .06); --t-glass-border: rgba(148, 163, 184, .35); --t-accent: #93C5FD; --t-accent-bg: rgba(147, 197, 253, .14);
  --color-bg-card: rgba(255, 255, 255, .05); --color-border-default: rgba(148, 163, 184, .3); --color-success: #5EEAD4; --color-brand-500: #93C5FD;
  position: relative; isolation: isolate; overflow: hidden; color: #FFFFFF; border: 0 !important; box-shadow: none !important;
  background: radial-gradient(42% 70% at 12% 0%, rgba(37, 99, 235, .45), rgba(37, 99, 235, 0) 70%),
              radial-gradient(45% 75% at 95% 100%, rgba(56, 189, 248, .26), rgba(56, 189, 248, 0) 70%),
              radial-gradient(30% 50% at 60% 40%, rgba(124, 58, 237, .14), rgba(124, 58, 237, 0) 70%), #0a1628 !important;
}
html.da :is(section[style*="--t-gradient-cta"], .wc-addon-cta, .qrl-finalcta, .bm-hero, .al-final, .pptd-section div[style*="#0f1d3a"])::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(148, 163, 184, .22) 1.2px, transparent 1.6px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000, transparent 78%); mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000, transparent 78%);
}
html.da .wc-addon-cta::before { display: none; }
html.da[data-theme="dark"] :is(section[style*="--t-gradient-cta"], .wc-addon-cta, .qrl-finalcta, .bm-hero, .al-final, .pptd-section div[style*="#0f1d3a"]) { box-shadow: inset 0 0 0 1px #1F2D44 !important; }
/* full-width bands become a rounded panel the width of the page */
html.da section[style*="--t-gradient-cta"] { width: min(calc(var(--content-max, 1230px) - 2rem), calc(100% - 32px)); margin: 56px auto !important; border-radius: 32px; padding-block: 64px !important; }
html.da :is(.qrl-finalcta, .al-final, .pptd-section div[style*="#0f1d3a"]) { border-radius: 32px !important; padding: 56px 32px !important; }
html.da .qrl-finalcta { max-width: min(calc(var(--content-max, 1230px) - 2rem), calc(100% - 32px)); margin: 48px auto !important; }
html.da .bm-hero { border-radius: 32px !important; }
html.da :is(section[style*="--t-gradient-cta"], .wc-addon-cta, .qrl-finalcta, .bm-hero, .al-final, .pptd-section div[style*="#0f1d3a"]) :is(h2, h3, strong) { color: #FFFFFF !important; }
html.da :is(section[style*="--t-gradient-cta"], .qrl-finalcta, .al-final, .ent-final-inner) h2 { font-size: clamp(28px, 3.4vw, 44px) !important; font-weight: 700 !important; line-height: 1.08 !important; }
/* a two-column band (text beside cards) keeps a smaller heading */
html.da section[style*="--t-gradient-cta"] div[style*="grid-template-columns:1fr 1fr"] h2 { font-size: clamp(26px, 2.6vw, 36px) !important; }
html.da :is(section[style*="--t-gradient-cta"], .wc-addon-cta, .qrl-finalcta, .al-final, .pptd-section div[style*="#0f1d3a"]) :is(p, li) { color: #C7D2E3 !important; }
html.da section[style*="--t-gradient-cta"] .glass-card { background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(148, 163, 184, .35) !important; }
html.da section[style*="--t-gradient-cta"] .glass-card p { color: #C7D2E3 !important; }
/* buttons on the film: white primary, white-outline secondary (as on the homepage's film bands) */
html.da :is(section[style*="--t-gradient-cta"], .wc-addon-cta, .qrl-finalcta, .bm-hero, .al-final, .pptd-section div[style*="#0f1d3a"]) :is(.pptd-btn-primary, a.pptd-btn[style*="#38bdf8"], a[style*="#d1451e"]) {
  background: #FFFFFF !important; color: #0a1628 !important; border: 1px solid #FFFFFF !important; border-radius: 999px !important; box-shadow: none !important; }
html.da :is(section[style*="--t-gradient-cta"], .wc-addon-cta, .qrl-finalcta, .bm-hero, .al-final) :is(.pptd-btn-secondary, .pptd-btn-ghost, a[style*="#fbbc04"]) {
  background: transparent !important; color: #FFFFFF !important; border: 1px solid rgba(148, 163, 184, .55) !important; border-radius: 999px !important; box-shadow: none !important; }
html.da :is(section[style*="--t-gradient-cta"], .wc-addon-cta, .qrl-finalcta, .bm-hero, .al-final) :is(.pptd-btn-secondary, .pptd-btn-ghost, a[style*="#fbbc04"]):hover { background: rgba(255, 255, 255, .08) !important; }
html.da :is(a[style*="#d1451e"], a[style*="#fbbc04"]) :is(i, svg) { color: currentColor !important; }
/* the old brand-coloured icon tiles next to them */
html.da section[style*="--t-gradient-cta"] div[style*="rgba(209,69,30"], html.da section[style*="--t-gradient-cta"] div[style*="rgba(251,188,4"] { background: rgba(255, 255, 255, .08) !important; }
html.da section[style*="--t-gradient-cta"] :is(i, svg)[style*="#d1451e"], html.da section[style*="--t-gradient-cta"] :is(i, svg)[style*="#fbbc04"], html.da .pptd-section div[style*="#0f1d3a"] :is(i, svg) { color: #93C5FD !important; }
html.da .pptd-section div[style*="#0f1d3a"] > div:first-child { background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(148, 163, 184, .3); }
/* QR mid-page band: an outlined card instead of the plum wash */
html.da .qrl-midcta-inner { background: var(--color-bg-card) !important; border: 1px solid var(--color-border-strong) !important; border-radius: 24px !important; }
html.da[data-theme="dark"] .qrl-midcta-inner { border-color: #52627A !important; }
/* steps: one ink number, not four gradients */
html.da .pds-steps .pds-step .pds-step-num { background: #0a1628 !important; font-family: var(--font-display, 'Clash Display'), sans-serif; font-weight: 700; box-shadow: none !important; }
html.da[data-theme="dark"] .pds-steps .pds-step .pds-step-num { background: #F1F5F9 !important; color: #0a1628 !important; }
/* categories hub: no stock mosaic; A heading */
html.da section.pptd-section[style*="--color-bg-subtle"] :is(img[src*="categoryimage"], div:has(> img[src*="categoryimage"])) { display: none !important; }
html.da section.pptd-section[style*="--color-bg-subtle"] h1 { font-size: clamp(34px, 4.4vw, 60px) !important; font-weight: 700 !important; line-height: 1.05 !important; max-width: 900px; }
html.da section.pptd-section[style*="--color-bg-subtle"] p { max-width: 640px !important; }
/* "Browse by category" tiles on /template: rounded, light outline */
html.da .tmpl-cat-grid > a.glass-card { border-radius: 999px !important; border: 1px solid var(--color-border-default) !important; font-weight: 500 !important; }
html.da .tmpl-cat-grid > a.glass-card:hover { border-color: var(--color-text-primary) !important; box-shadow: none !important; transform: none !important; }
/* sign-in showcase + verified card: white with an ink outline, no tint */
html.da:not([data-theme="dark"]) :is(.auth-showcase, .va-addin-card) { background: #FFFFFF !important; border: 1px solid #0B1220 !important; box-shadow: none !important; }
/* FAQ written as plain <details> on the free hubs */
html.da section[style*="--color-bg-subtle"] details { border: 1px solid var(--color-border-strong) !important; border-radius: 20px !important; background: var(--color-bg-card) !important; }
/* The same box also lands on FAQs built as a flat list with no side padding (themes page, every ready-made deck page),
   so their questions, answers and +/− sat on the border. The free hubs set their padding inline; these don't. */
html.da section[style*="--color-bg-subtle"] details:not([style]) { padding: 0 24px !important; margin: 0 0 12px !important; }
html.da section[style*="--color-bg-subtle"] details:not([style]) > summary { padding: 18px 0 !important; }
html.da section[style*="--color-bg-subtle"] details:not([style]) > summary ~ * { margin: 0 0 18px !important; }

/* Design services (pds-*) and Enterprise (ent-*) pages: one blue, ink outlines, no rainbow */
html.da :is(.pds-badge, .ent-badge) { background: #FFFFFF !important; border: 1px solid var(--color-border-default) !important; color: var(--color-text-secondary) !important; letter-spacing: 0 !important; }
html.da[data-theme="dark"] :is(.pds-badge, .ent-badge) { background: transparent !important; }
html.da :is(.pds-btn-primary, .ent-btn-primary) { background: var(--t-gradient-button) !important; box-shadow: none !important; }
html.da :is(.pds-btn-primary, .ent-btn-primary):hover { box-shadow: 0 12px 28px rgba(37, 99, 235, .36) !important; }
html.da :is(.pds-hero-stats strong, .pds-stat strong, .ent-hero-stats strong) { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--color-text-primary) !important; }
html.da .ent-grad { background: linear-gradient(92deg, #1D4ED8 0%, #2563EB 50%, #0EA5E9 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
html.da :is(.pds-door, .pds-card, .pds-cr-card, .pds-quote-card, .ent-card, .ent-shortcut, .ent-form-card) { border: 1px solid var(--color-border-strong) !important; border-radius: 20px !important; box-shadow: none !important; }
html.da[data-theme="dark"] :is(.pds-door, .pds-card, .pds-cr-card, .pds-quote-card, .ent-card, .ent-shortcut, .ent-form-card) { border-color: #52627A !important; }
html.da :is(.pds-door, .pds-card, .ent-card):hover { border-color: #1D4ED8 !important; box-shadow: var(--shadow-card-hover) !important; }
html.da :is(.pds-grid .pds-card, .ent-grid .ent-card) :is(.pds-card-icon, .ent-card-icon) { background: transparent !important; border: 1px solid var(--color-border-default) !important; color: #1D4ED8 !important; }
html.da[data-theme="dark"] :is(.pds-grid .pds-card, .ent-grid .ent-card) :is(.pds-card-icon, .ent-card-icon) { color: #7DA8FF !important; }
html.da :is(.pds-quote-card, .ent-form-card)::before { display: none !important; }
html.da .ent-steps .ent-step .ent-step-num { background: #0a1628 !important; font-family: var(--font-display, 'Clash Display'), sans-serif; font-weight: 700; box-shadow: none !important; }
html.da[data-theme="dark"] .ent-steps .ent-step .ent-step-num { background: #F1F5F9 !important; color: #0a1628 !important; }
html.da .pds-cr-dot.active, html.da .ba-tag-after { background: #0a1628 !important; }
html.da .ba-handle { background: #FFFFFF !important; }
html.da .pds-diy-inner { background: var(--color-bg-card) !important; border: 1px solid var(--color-border-strong) !important; border-radius: 24px !important; }
html.da .ent-final-inner {
  --color-text-primary: #FFFFFF; --color-text-secondary: #C7D2E3; --color-text-tertiary: #94A3B8; --color-border-default: rgba(148, 163, 184, .3);
  position: relative; isolation: isolate; overflow: hidden; border: 0 !important; border-radius: 32px !important; color: #FFFFFF;
  background: radial-gradient(42% 70% at 12% 0%, rgba(37, 99, 235, .45), rgba(37, 99, 235, 0) 70%), radial-gradient(45% 75% at 95% 100%, rgba(56, 189, 248, .26), rgba(56, 189, 248, 0) 70%), #0a1628 !important; }
html.da .ent-final-inner :is(h2, h3, strong) { color: #FFFFFF !important; }
html.da .ent-final-inner :is(p, li, span) { color: #C7D2E3; }
html.da .ent-final-inner .ent-btn-primary { background: #FFFFFF !important; color: #0a1628 !important; }

html.da .ent-problem { border: 1px solid var(--color-border-strong) !important; border-radius: 20px !important; }
html.da[data-theme="dark"] .ent-problem { border-color: #52627A !important; }
html.da .ent-problem-icon { background: transparent !important; border: 1px solid var(--color-border-default); color: #1D4ED8 !important; }
html.da :is(.ent-rung, .ent-rung:nth-child(2), .ent-rung:nth-child(3), .ent-rung:nth-child(4)) { --hue: #1D4ED8; --hue-bg: #EFF4FF; border: 1px solid var(--color-border-strong) !important; border-radius: 20px !important; box-shadow: none !important; }
html.da[data-theme="dark"] :is(.ent-rung, .ent-rung:nth-child(2), .ent-rung:nth-child(3), .ent-rung:nth-child(4)) { --hue: #7DA8FF; --hue-bg: rgba(125, 168, 255, .14); border-color: #52627A !important; }
html.da .ent-rung-num { background: #0a1628 !important; font-family: var(--font-display, 'Clash Display'), sans-serif; font-weight: 700; }
html.da[data-theme="dark"] .ent-rung-num { background: #F1F5F9 !important; color: #0a1628 !important; }
html.da .ent-clip-tab.is-on { border-color: #0a1628 !important; box-shadow: 0 0 0 1px #0a1628 !important; }
html.da[data-theme="dark"] .ent-clip-tab.is-on { border-color: #F1F5F9 !important; box-shadow: 0 0 0 1px #F1F5F9 !important; }

/* Arabic (Cairo) needs taller lines than Clash, and no negative tracking */
html.da[dir="rtl"] :is(h1, h2, h3, .hd2-h1, .hd2-door b, .hc-head h2, .hclose-in > h2) { line-height: 1.3 !important; letter-spacing: 0 !important; }
@media (prefers-reduced-motion: reduce) { html.da * { transition: none !important; animation: none !important; } }