/* ServioX Pro typography, measured on servioxpro.com on 2026-10-02.
 * Scope is opt-in: the reference homepage and other products never load this.
 * Values are role measurements, not a template-dependent scale. The important
 * layer supersedes old template typography without changing layout or colors.
 * Product prices, ornaments and the attribution badge retain their own metrics:
 * the marketing homepage has no equivalent role for those components.
 */
@layer serviox-pro-typography {
  [data-pro-typography],
  [data-pro-typography] :where([lang]) {
    --pro-type-body-family: 'Assistant', 'Rubik', system-ui, -apple-system, sans-serif;
    --pro-type-heading-family: 'Rubik', 'Assistant', sans-serif;
    --pro-type-brand-family: 'Rubik', 'Assistant', sans-serif;
    --pro-type-body-size: 16px;
    --pro-type-body-line: 1.65;
    --pro-type-body-weight: 400;
    --pro-type-paragraph-weight: 400;
    --pro-type-body-tracking: normal;
    --pro-type-hero-size: clamp(36px, 4.4vw, 56px);
    --pro-type-hero-line: 1.12;
    --pro-type-hero-weight: 600;
    --pro-type-hero-tracking: -.025em;
    --pro-type-hero-copy-size: clamp(17px, 1.8vw, 21px);
    --pro-type-hero-copy-line: 1.82;
    --pro-type-hero-copy-weight: 600;
    --pro-type-section-size: clamp(31px, 4.3vw, 52px);
    --pro-type-section-line: 1.2;
    --pro-type-pricing-section-line: 1.2;
    --pro-type-section-weight: 600;
    --pro-type-cta-heading-line: 1.16;
    --pro-type-section-tracking: -.025em;
    --pro-type-card-size: 21px;
    --pro-type-card-line: 1.65;
    --pro-type-card-weight: 600;
    --pro-type-card-tracking: -.025em;
    --pro-type-card-copy-size: 15px;
    --pro-type-card-copy-line: 1.65;
    --pro-type-card-copy-weight: 400;
    --pro-type-brand-size: 24px;
    --pro-type-brand-line: 1.2;
    --pro-type-brand-weight: 700;
    --pro-type-brand-tracking: -.025em;
    --pro-type-nav-size: 14px;
    --pro-type-nav-line: 1.65;
    --pro-type-nav-weight: 700;
    --pro-type-action-size: 16px;
    --pro-type-action-line: 1.25;
    --pro-type-action-weight: 700;
    --pro-type-label-size: 15px;
    --pro-type-label-line: 1.65;
    --pro-type-label-weight: 600;
    --pro-type-input-size: 16px;
    --pro-type-input-line: 1.45;
    --pro-type-input-weight: 400;
    --pro-type-footer-link-size: 15px;
    --pro-type-footer-link-line: 1.65;
    --pro-type-footer-link-weight: 600;
    --pro-type-footer-details-weight: 600;
    --pro-type-footer-copy-size: 16px;
    --pro-type-footer-copy-line: 1.65;
    --pro-type-footer-copy-weight: 700;
    --pro-type-legal-size: 12px;
    --pro-type-legal-line: 1.85;
    --pro-type-legal-weight: 400;
    --pro-type-faq-size: 20px;
    --pro-type-faq-copy-size: 17px;
    --pro-type-faq-line: 1.3;
    --pro-type-faq-tracking: -.025em;
    --pro-type-family: var(--pro-type-body-family);
  }
  [data-pro-typography]:lang(en),
  [data-pro-typography] :where([lang="en"]) {
    --pro-type-body-family: 'Inter', 'Assistant', system-ui, sans-serif;
    --pro-type-heading-family: 'Inter', 'Assistant', sans-serif;
    --pro-type-brand-family: 'Inter', 'Assistant', sans-serif;
    --pro-type-family: var(--pro-type-body-family);
  }
  [data-pro-typography]:lang(ar),
  [data-pro-typography] :where([lang="ar"]) {
    --pro-type-body-family: 'Noto Sans Arabic', 'Tajawal', 'Assistant', sans-serif;
    --pro-type-heading-family: 'Noto Sans Arabic', 'Tajawal', 'Assistant', sans-serif;
    --pro-type-brand-family: 'Noto Sans Arabic', 'Tajawal', sans-serif;
    --pro-type-body-line: 1.95;
    --pro-type-paragraph-weight: 500;
    --pro-type-hero-line: 1.18;
    --pro-type-hero-tracking: normal;
    --pro-type-hero-copy-weight: 500;
    --pro-type-section-tracking: normal;
    --pro-type-cta-heading-line: 1.35;
    --pro-type-section-line: 1.35;
    --pro-type-card-line: 1.35;
    --pro-type-card-tracking: normal;
    --pro-type-card-copy-line: 1.65;
    --pro-type-card-copy-weight: 500;
    --pro-type-brand-weight: 600;
    --pro-type-brand-tracking: normal;
    --pro-type-nav-line: 1.95;
    --pro-type-nav-weight: 600;
    --pro-type-action-weight: 600;
    --pro-type-label-line: 1.95;
    --pro-type-footer-link-line: 1.95;
    --pro-type-footer-copy-line: 1.95;
    --pro-type-footer-copy-weight: 600;
    --pro-type-faq-line: 1.35;
    --pro-type-faq-tracking: normal;
    --pro-type-family: var(--pro-type-body-family);
  }

  [data-pro-typography],
  [data-pro-typography] * {
    font-family: var(--pro-type-family) !important;
  }
  [data-pro-typography],
  [data-pro-typography] body,
  [data-pro-typography] :where(.site-canvas, .svx-guided, .svx-wizard, .svx-design-preview) {
    --font-body: var(--pro-type-body-family);
    --font-heading: var(--pro-type-heading-family);
    --font-display: var(--pro-type-heading-family);
    --pr-font: var(--pro-type-body-family);
    --ng-font: var(--pro-type-body-family);
    --ng-display: var(--pro-type-heading-family);
    font-size: var(--pro-type-body-size) !important;
    font-weight: var(--pro-type-body-weight) !important;
    line-height: var(--pro-type-body-line) !important;
    letter-spacing: var(--pro-type-body-tracking) !important;
  }
  [data-pro-typography] :where(h1, h2, h3, h4, .brand, .pro-brand, .pr-brand, .brand-title, .site-brand, .pr-footer-brand, .examples-brand) {
    --pro-type-family: var(--pro-type-heading-family);
  }
  /* Workspace/page/dialog titles are cards, not landing-page hero sections. */
  [data-pro-typography] :where(h1, h2, h3, h4):not(:where(.site-canvas.template-classicBusiness .hero h1)) {
    font-size: var(--pro-type-card-size) !important;
    font-weight: var(--pro-type-card-weight) !important;
    line-height: var(--pro-type-card-line) !important;
    letter-spacing: var(--pro-type-card-tracking) !important;
  }
  [data-pro-typography] :where(.svx-premium #top h1, [data-pro-initial-content] > h1, .public-hero h1, .marketing-main h1, .examples-intro h1),
  [data-pro-typography="site"] :where(.hero h1, main > h1) {
    font-size: var(--pro-type-hero-size) !important;
    font-weight: var(--pro-type-hero-weight) !important;
    line-height: var(--pro-type-hero-line) !important;
    letter-spacing: var(--pro-type-hero-tracking) !important;
  }
  [data-pro-typography] :where(.svx-premium .pr-section h2, [data-pro-initial-content] > section > h2, .public-section h2, .marketing-section h2, .section-head h2),
  [data-pro-typography="site"] :where(main section h2) {
    font-size: var(--pro-type-section-size) !important;
    font-weight: var(--pro-type-section-weight) !important;
    line-height: var(--pro-type-section-line) !important;
    letter-spacing: var(--pro-type-section-tracking) !important;
  }
  /* The source pricing heading is an exception to ordinary AR section heads. */
  [data-pro-typography] :where(.pricing-stage .section-head h2) {
    line-height: var(--pro-type-pricing-section-line) !important;
  }
  /* Benefit cards and the closing marketing CTA are distinct source roles.
   * A contact-information section is still an ordinary section: it is not
   * the homepage's lead-form introduction or a process-route group heading. */
  [data-pro-typography] :where(#benefits h3, .public-benefit-grid h3, .feature h3) {
    line-height: 1.35 !important;
  }
  [data-pro-typography] :where(.public-final h2, .premium-cta-band h2) {
    font-size: clamp(31px, 4vw, 48px) !important;
    line-height: var(--pro-type-cta-heading-line, 1.16) !important;
    letter-spacing: var(--pro-type-section-tracking) !important;
  }
  [data-pro-typography] :where(h1, h2, h3, h4) :where(span, b, strong, em, small, bdi) {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
  }
  [data-pro-typography] :where(p) {
    font-size: var(--pro-type-body-size) !important;
    font-weight: var(--pro-type-paragraph-weight) !important;
    line-height: var(--pro-type-body-line) !important;
    letter-spacing: normal !important;
  }
  /* Homepage hero paragraph; all premium intros are inside section#top. */
  [data-pro-typography] :where(#top .pr-lead, [data-pro-initial-hero-copy], .hero-text, .hero-subtitle, .ng-lead, .public-hero-copy > p) {
    font-size: var(--pro-type-hero-copy-size) !important;
    font-weight: var(--pro-type-hero-copy-weight) !important;
    line-height: var(--pro-type-hero-copy-line) !important;
    letter-spacing: normal !important;
  }
  [data-pro-typography] :where(.brand, .pro-brand, .pr-brand, .brand-title, .site-brand, .pr-footer-brand, .examples-brand) {
    --pro-type-family: var(--pro-type-brand-family);
    font-size: var(--pro-type-brand-size) !important;
    font-weight: var(--pro-type-brand-weight) !important;
    line-height: var(--pro-type-brand-line) !important;
    letter-spacing: var(--pro-type-brand-tracking) !important;
  }
  [data-pro-typography] :where(.brand, .pro-brand, .pr-brand, .brand-title, .site-brand, .pr-footer-brand, .examples-brand) :where(span, b, strong, bdi) {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
  }
  [data-pro-typography] :where(nav a:not(.brand, .pro-brand, .pr-brand, .site-brand, .svx-powered-by), .nav a:not(.brand, .pro-brand, .pr-brand, .site-brand, .svx-powered-by), .nav-links a, .examples-nav-actions a) {
    --pro-type-family: var(--pro-type-body-family);
    font-size: var(--pro-type-nav-size) !important;
    font-weight: var(--pro-type-nav-weight) !important;
    line-height: var(--pro-type-nav-line) !important;
    letter-spacing: normal !important;
  }
  [data-pro-typography] :where(.btn, .pr-button, .ng-action, .button, .primary-btn, .public-primary-link, .pr-product-open, .pr-text-link, a.wa, a.whatsapp-order, .dfy-sticky-action) {
    --pro-type-family: var(--pro-type-body-family);
    font-size: var(--pro-type-action-size) !important;
    font-weight: var(--pro-type-action-weight) !important;
    line-height: var(--pro-type-action-line) !important;
    letter-spacing: normal !important;
  }
  [data-pro-typography] :where(.btn, .pr-button, .ng-action, .button, .primary-btn, .public-primary-link, .pr-product-open, .pr-text-link, a.wa, a.whatsapp-order, .dfy-sticky-action) :where(span, b, strong) {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
  }
  [data-pro-typography] :where(label, legend, .pr-contact-label, .guided-field > span, .guided-contact-field legend) {
    --pro-type-family: var(--pro-type-body-family);
    font-size: var(--pro-type-label-size) !important;
    font-weight: var(--pro-type-label-weight) !important;
    line-height: var(--pro-type-label-line) !important;
    letter-spacing: normal !important;
  }
  [data-pro-typography] :where(input, select, textarea) {
    --pro-type-family: var(--pro-type-body-family);
    font-size: var(--pro-type-input-size) !important;
    font-weight: var(--pro-type-input-weight) !important;
    line-height: var(--pro-type-input-line) !important;
    letter-spacing: normal !important;
  }
  /* Design cards use semantic h3; their summaries use the live card-copy role. */
  [data-pro-typography] :where(.pr-product p, .pr-service p, .design-card p, .template-card p, .service-card p, .product-card p, [data-pr-description], [data-pro-initial-content] > :is(#services, #products) > article > p:not([data-pro-initial-price])) {
    font-size: var(--pro-type-card-copy-size) !important;
    font-weight: var(--pro-type-card-copy-weight) !important;
    line-height: var(--pro-type-card-copy-line) !important;
    letter-spacing: normal !important;
  }
  /* The homepage's managed card b title is deliberately body-family, not h3. */
  [data-pro-typography] :where(.demo-card-body) b {
    --pro-type-family: var(--pro-type-body-family);
    font-size: 21px !important;
    font-weight: 600 !important;
    line-height: 26.25px !important;
    letter-spacing: normal !important;
  }
  [data-pro-typography] :where(.demo-card-body) p {
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 25.2px !important;
    letter-spacing: normal !important;
  }
  [data-pro-typography] :where(.pr-faq summary, .faq h3, .faq-item summary, .ng-faq summary, [data-pro-initial-content] > #faq > article > h3) {
    --pro-type-family: var(--pro-type-heading-family);
    font-size: var(--pro-type-faq-size) !important;
    font-weight: 600 !important;
    line-height: var(--pro-type-faq-line) !important;
    letter-spacing: var(--pro-type-faq-tracking) !important;
  }
  [data-pro-typography] :where(.pr-faq summary, .faq-item summary, .ng-faq summary) span {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
  }
  [data-pro-typography] :where(.pr-faq p, .faq p, .faq-item p, .ng-faq p, [data-pro-initial-content] > #faq > article > p) {
    font-size: var(--pro-type-faq-copy-size) !important;
    font-weight: var(--pro-type-paragraph-weight) !important;
    line-height: 1.75 !important;
    letter-spacing: normal !important;
  }
  /* Text-only card actions have their own measured role, distinct from CTA. */
  [data-pro-typography] :where(.pr-product-open, .pr-text-link, .design-open, .guided-text-button) {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: var(--pro-type-body-line) !important;
    letter-spacing: normal !important;
  }
  /* The reference gallery's all-designs CTA uses14px with the CTA1.25 line. */
  [data-pro-typography] :where(.example-gallery-link) {
    font-size: 14px !important;
    font-weight: var(--pro-type-action-weight) !important;
    line-height: var(--pro-type-action-line) !important;
    letter-spacing: normal !important;
  }
  /* The live header account control is14/600/1.2, distinct from hero CTA16.
   * Language selection is also a header control, not a form-field input. */
  [data-pro-typography] :where(.top .nav #navLogin, .top .nav #navDashboard, .top .nav #navNew, .top .nav #navLogout) {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
  }
  [data-pro-typography] :where(.top .nav #navHome) {
    font-size: var(--pro-type-nav-size) !important;
    font-weight: var(--pro-type-nav-weight) !important;
    line-height: var(--pro-type-nav-line) !important;
    letter-spacing: normal !important;
  }
  [data-pro-typography] :where(.lang-btn, .top .nav #uiLangSelect) {
    font-size: 13px !important;
    font-weight: var(--pro-type-nav-weight) !important;
    line-height: normal !important;
    letter-spacing: normal !important;
  }
  [data-pro-typography] :where(.footer-business-details) {
    font-size: 14px !important;
    font-weight: var(--pro-type-footer-details-weight, 600) !important;
    line-height: 1.8 !important;
    letter-spacing: normal !important;
  }
  [data-pro-typography]:lang(ar), [data-pro-typography] :where([lang="ar"]) {
    --pro-type-footer-details-weight: 400;
  }
  [data-pro-typography] :where(footer nav a, .footer-links a, .pr-legal a, [data-pro-initial-content] > footer > a) {
    font-size: var(--pro-type-footer-link-size) !important;
    font-weight: var(--pro-type-footer-link-weight) !important;
    line-height: var(--pro-type-footer-link-line) !important;
    letter-spacing: normal !important;
  }
  [data-pro-typography] :where(.footer-copy, .copyright) {
    font-size: var(--pro-type-footer-copy-size) !important;
    font-weight: var(--pro-type-footer-copy-weight) !important;
    line-height: var(--pro-type-footer-copy-line) !important;
    letter-spacing: normal !important;
  }
  [data-pro-typography] :where(.disclaimer, .pr-legal p, .legal-note, .footer-legal, .pr-jn-legal-note p) {
    font-size: var(--pro-type-legal-size) !important;
    font-weight: var(--pro-type-legal-weight) !important;
    line-height: var(--pro-type-legal-line) !important;
    letter-spacing: normal !important;
  }
  /* Preserve the existing price and attribution metrics, including children.
   * Only their language family changes. No metric role selector targets
   * these elements or their descendants. */
  [data-pro-typography] :is(.pr-price, .pr-price *, .product-modal-price, .product-modal-price *, .svx-powered-by, .svx-powered-by *) {
    --pro-type-family: var(--pro-type-body-family);
  }
  /* Preview's former body tracking was .016em HE / .008em EN at 16px.
   * Keep that inherited value on the approved exceptions while ordinary
   * Pro copy adopts the reference homepage's normal tracking. */
  [data-pro-typography] .svx-premium:lang(he) :is(.pr-price, .svx-powered-by) {
    letter-spacing: .256px !important;
  }
  [data-pro-typography] .svx-premium:lang(en) :is(.pr-price, .svx-powered-by) {
    letter-spacing: .128px !important;
  }
  /* Initial published HTML is visible without JavaScript. Its original price
   * paragraphs inherited16px/400/1.7; preserve those metrics explicitly. */
  [data-pro-typography] [data-pro-initial-price] {
    --pro-type-family: var(--pro-type-body-family);
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    letter-spacing: normal !important;
  }
  [data-pro-typography]:lang(he) [data-pro-initial-price] { letter-spacing: .256px !important; }
  [data-pro-typography]:lang(en) [data-pro-initial-price] { letter-spacing: .128px !important; }
  /* The product dialog lives outside the canvas. Preserve Preview's original
   * body-inherited price metrics there as well; AR has its own explicit1.35. */
  [data-pro-typography="renderer"]:lang(he) .product-modal-price {
    line-height: 1.72 !important;
    letter-spacing: .256px !important;
  }
  [data-pro-typography="renderer"]:lang(en) .product-modal-price {
    line-height: 1.72 !important;
    letter-spacing: .128px !important;
  }
  [data-pro-typography] :where(.pr-eyebrow, .pr-kicker, .section-eyebrow, .public-kicker, .examples-kicker, .guided-eyebrow, .wizard-step-tag) {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
  }
  /* Builder section/step controls are navigation, field spans are labels. */
  [data-pro-typography] :where(.guided-pane-button, .guided-section-button, .wizard-steps button) {
    font-size: var(--pro-type-nav-size) !important;
    font-weight: var(--pro-type-nav-weight) !important;
    line-height: var(--pro-type-nav-line) !important;
    letter-spacing: normal !important;
  }
  /* The bespoke sample sites previously inherited this exact 1.7 line height
   * from done-for-you-quality.css. Prices remain family-only exceptions. */
  [data-pro-typography="site"] :is(.price, .product-price, .popup-price, .fee) {
    --pro-type-family: var(--pro-type-body-family);
    line-height: 1.7 !important;
  }
  /* Winning reference rules: pro-main-quality.css 1744-45, 1655,
   * 1844-47, 1870-1927; footer-copy's earlier important rule is at 600px. */
  @media (max-width: 1080px) {
    [data-pro-typography], [data-pro-typography] :where([lang]) { --pro-type-brand-size: 21px; }
    /* Match the reference's full-name wrapping with the larger shared face. */
    [data-pro-typography] .brand.pro-brand > .pro-brand__name {
      min-width: min-content !important;
      white-space: normal !important;
    }
  }
  @media (max-width: 760px) {
    [data-pro-typography] :where(.public-final h2, .premium-cta-band h2) { font-size: 31px !important; }
    [data-pro-typography], [data-pro-typography] :where([lang]) {
      --pro-type-hero-size: 36px;
      --pro-type-hero-line: 1.12;
      --pro-type-hero-copy-size: 17px;
      --pro-type-section-size: 31px;
      --pro-type-section-line: 1.2;
      --pro-type-faq-size: 18px;
      --pro-type-faq-copy-size: 16px;
      --pro-type-faq-line: 1.45;
    }
    [data-pro-typography]:lang(ar), [data-pro-typography] :where([lang="ar"]) {
      --pro-type-hero-size: 32px;
      --pro-type-hero-line: 1.35;
      --pro-type-section-size: 28px;
      --pro-type-section-line: 1.35;
      --pro-type-pricing-section-line: 1.35;
      --pro-type-faq-line: 1.35;
    }
  }
  @media (max-width: 600px) {
    [data-pro-typography], [data-pro-typography] :where([lang]) { --pro-type-footer-copy-size: 14px; }
  }
  @media (max-width: 380px) {
    [data-pro-typography], [data-pro-typography] :where([lang]) { --pro-type-brand-size: 18px; }
  }
}