/* Shared UI rhythm. The approved brand, content and native captures stay intact. */
:root {
  --text: var(--ink);
  --space-section: 56px;
  --space-block: 32px;
  --sticky-offset: 100px;
  scroll-padding-top: var(--sticky-offset);
}

/* Header and page content share the same outer edges. */
.wrap, .nav-shell { width: min(1200px, calc(100% - 80px)); margin-inline: auto; }

/* One calm navigation group, with contact and utility controls kept distinct. */
.nav-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "brand nav email actions";
  min-height: 84px;
  height: auto;
  gap: 18px;
  position: relative;
}
.nav-shell > .brand { grid-area: brand; display: inline-flex; align-items: center; min-height: 44px; }
.nav-shell .wordmark { font-size: 34px; }
.desktop-nav { grid-area: nav; justify-self: center; min-width: 0; }
.header-actions { grid-area: actions; gap: 4px; }
.header .desktop-nav, .subpage .header .desktop-nav { gap: 2px; padding: 4px; background: var(--soft); border-radius: 12px; }
.desktop-nav > a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; white-space: nowrap; transition: background .18s, color .18s; }
.header .desktop-nav > a:hover, .desktop-nav > a[aria-current="page"] { background: var(--surface); color: var(--ink); }
.desktop-nav > a[aria-current="page"]::after { content: ""; position: absolute; inset-inline: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--accent); }
.header-email {
  grid-area: email;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  border-radius: 8px;
  color: var(--muted);
  transition: color .18s;
}
.header-email .icon { width: 17px; height: 17px; }
.header-email:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.icon-button { width: 44px; height: 44px; }
.header .icon-button { border-radius: 10px; }
.language-picker summary { min-height: 44px; padding: 8px; border-radius: 10px; transition: background .18s; }
.language-picker summary:hover, .language-picker[open] summary { background: var(--soft); }
.language-picker[open] summary > .icon:last-child { transform: rotate(180deg); }
.language-menu { top: calc(100% + 12px); box-shadow: 0 16px 40px #00000014; }
.language-menu a { min-height: 44px; }
.header .nav-download { display: inline-flex; min-height: 44px; padding: 10px 16px; gap: 12px; margin-inline-start: 6px; font-size: 13px; transition: transform .18s, background .18s; }
.nav-download:hover { transform: translateY(-1px); background: #ffc13f; }
.mobile-toggle .menu-close { display: none; }
.mobile-toggle[aria-expanded="true"] { background: var(--soft); }
.mobile-toggle[aria-expanded="true"] .menu-open { display: none; }
.mobile-toggle[aria-expanded="true"] .menu-close { display: block; }
.header a:focus-visible, .header button:focus-visible, .header summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.mobile-nav a { min-width: 0; overflow-wrap: break-word; }
.skip-link { left: auto; inset-inline-start: 16px; }
.demo-sections { gap: 12px; }

/* Type and actions share an explicit baseline instead of incidental inline flow. */
.button { min-height: 48px; padding: 13px 20px; gap: 10px; }
.button .icon:last-child { margin-inline-start: 0; }
.button-secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.text-link { min-height: 44px; font-size: 14px; line-height: 1.5; gap: 10px; }
button.text-link { padding: 0; background: transparent; border: 0; text-align: start; }
.link-label { min-width: 0; }
.small-note, .capture-note { font-size: 13px; line-height: 1.75; }
.context-note { font-size: 14px; line-height: 1.75; padding: 16px 18px; margin-top: 20px; }
.context-note + .context-note { margin-top: 16px; }
h2 { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.15; }
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
html:lang(ar) :is(h1, h2, h3) { letter-spacing: normal; }
html:lang(ar) :is(h1, h2, h3) { line-height: 1.4; }

/* Page headers: one compact stack, followed by a single content interval. */
.page, .checkout-page .page { padding-block: 24px 0; }
.breadcrumb, .checkout-page .breadcrumb { margin-bottom: 12px; font-size: 13px; }
.page-label, .checkout-page .page-label { margin-bottom: 12px; line-height: 1.5; }
.page-heading, .subpage .page-heading, .checkout-page .page-heading { margin-bottom: var(--space-block); max-width: 1100px; }
.subpage .page-heading h1, .checkout-page .page-heading h1 {
  font-size: clamp(34px, 4.1vw, 58px);
  line-height: 1.15;
  letter-spacing: -.045em;
  max-width: 1000px;
}
.page-intro, .checkout-page .page-intro { font-size: 17px; line-height: 1.75; margin-top: 16px; max-width: 72ch; }
.product-hero { margin-bottom: 32px; }
.product-hero .capture-note { margin-top: 12px; }
.feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; margin-block: 32px; }
.feature-item { min-width: 0; }
.feature-item p { font-size: 15px; line-height: 1.8; margin-top: 12px; }
.catalog-section { padding-block: 28px 0; margin-bottom: 32px; }
.catalog-section:last-child { margin-bottom: 0; }
.catalog-title { flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.catalog-title h2 { min-width: 0; font-size: 28px; line-height: 1.3; }
.catalog-section .feature-grid { margin-block: 24px 0; }
.page-end { margin-top: 40px; padding-top: 24px; gap: 16px 24px; }
.page-end > p { font-size: 19px; }
.page-end > .button { font-size: 14px; }

/* Homepage: preserve the original story, remove compounded 100px gaps. */
.section { padding-block: var(--space-section); }
.hero { padding-top: 40px; }
.hero h1 { font-size: clamp(40px, 5.6vw, 80px); line-height: 1.12; }
.hero .intro { margin-top: 20px; }
.hero-actions { gap: 16px 24px; flex-wrap: wrap; margin-top: 24px; }
.hero-stage { margin-top: 32px; }
.hero-demo { padding-block: 28px 8px; }
.hero-demo .section-heading > .eyebrow { display: none; }
.hero-demo .section-heading h2 { font-size: clamp(28px, 3vw, 38px); }
.hero-demo .section-heading > p:last-child { margin-top: 12px; max-width: 76ch; font-size: 15px; line-height: 1.6; }
.hero-demo .feature-tabs { margin-block: 20px 12px; }
.provider-carousel { padding-top: 40px; }
.provider-toolbar { gap: 16px; }
.provider-toolbar > p, .provider-carousel .provider-note { font-size: 12px; line-height: 1.75; }
.provider-controls .icon-button { width: 44px; height: 44px; }
.section-heading > p:last-child { margin-top: 16px; line-height: 1.75; }
.feature-tabs { width: fit-content; max-width: 100%; flex-wrap: wrap; gap: 6px; margin-block: 28px 24px; }
.feature-tabs button { min-height: 44px; padding: 10px 20px; font-size: 14px; }
.panel-caption { gap: 24px; margin-top: 20px; padding-inline: 0; }
.panel-caption p { font-size: 15px; line-height: 1.75; }
.conversation { padding-block: var(--space-section); gap: 28px; }
.conversation-copy > p:not(.eyebrow) { margin-top: 16px; line-height: 1.75; }
.conversation-copy .text-link { margin-top: 16px; }
.expanded-product .expanded-stage { margin-top: 28px; }
.expanded-product > .text-link { margin-top: 0; }
.expanded-ai-details .feature-grid { margin-block: 8px 24px; }
.ai-section { padding-bottom: 32px; }
.ai-layout { gap: 36px; margin-top: 28px; }
.ai-notes { gap: 20px; }
.ai-notes .small-note { font-size: 13px; }
.section-more { margin-top: 24px; }
.privacy { padding-block: var(--space-section); }
.privacy-heading { gap: 48px; }
.privacy-heading p:last-child { margin-top: 16px; line-height: 1.75; }
.privacy-points { margin-top: 32px; padding-top: 28px; gap: 32px; }
.privacy-points p { font-size: 15px; line-height: 1.8; }
.download { padding-block: var(--space-section); }
.download-card { padding: 40px; gap: 32px; }
.download-card .download-detail, .download-card .download-note { font-size: 12px; line-height: 1.75; }
.faq { padding-block: var(--space-section); }
.faq-list summary { min-height: 56px; font-size: 16px; line-height: 1.5; }
.faq-list p { font-size: 15px; line-height: 1.8; }
.platform-item span { font-size: 12px; }

/* Product details and supporting pages. */
.related-band { gap: 32px; padding-block: 32px 0; }
.related-band h2 { font-size: 28px; }
.related-band p { font-size: 15px; line-height: 1.8; }
.changelog { margin-top: 0; }
.changelog > section { grid-template-columns: 52px minmax(0, 1fr); gap: 24px; margin-bottom: 32px; }
.change-marker { width: 48px; height: 48px; }
.changelog h2 { font-size: 27px; line-height: 1.25; margin-bottom: 12px; }
.changelog p { font-size: 15px; line-height: 1.8; }
.roadmap-grid { gap: 32px; }
.roadmap-phase p { font-size: 15px; line-height: 1.8; }
.roadmap-phase .text-link { font-size: 14px; margin-top: 12px; }
.contact-layout { padding-block: 0 32px; gap: 32px 48px; align-items: start; }
.contact-address { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.35; min-height: 48px; gap: 16px; }
.contact-info { min-width: 0; }
.contact-info > p { margin-bottom: 20px; font-size: 16px; line-height: 1.75; }
.contact-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.contact-actions > .text-link { margin: 0; }
.support-faq-link { margin-bottom: 20px; }
.support-search { padding: 4px 16px; margin-bottom: 24px; }
.support-search input { padding-block: 10px; min-height: 44px; font-size: 16px; }
.help-list details { padding: 18px 20px; }
.help-list summary { min-height: 32px; line-height: 1.5; }
.help-list p { font-size: 15px; line-height: 1.8; margin-top: 16px; }
.support-contact { margin-top: 40px; padding-top: 28px; }
.support-contact h2 { font-size: 30px; }
.support-contact p { margin-block: 16px 20px; line-height: 1.75; }
.principles { display: grid; gap: 32px; margin-block: 0 32px; }
.principles article { grid-template-columns: 64px minmax(0, 1fr); gap: 24px; margin: 0; }
.principles article > span { font-size: 42px; }
.principles h2 { font-size: 30px; line-height: 1.3; }
.principles p { margin-top: 12px; font-size: 16px; line-height: 1.8; }
.brand-family { padding: 28px; gap: 24px; flex-wrap: wrap; }
.compare-row > div { font-size: 15px; line-height: 1.75; padding: 20px; overflow-wrap: normal; min-width: 0; }
.download-panel { padding: 32px; gap: 40px; }
.download-panel > img { width: 128px; height: 128px; }
.download-panel .small-note { font-size: 13px; }
.platform-list-full { margin-block: 24px 16px; }
.platform-list-full .platform-item { padding: 20px 16px; }
.platform-list-full .platform-item span { font-size: 15px; }
.platform-list-full .platform-item small { font-size: 12px; }
.install-steps { margin-block: 32px; gap: 24px; }
.install-steps li { font-size: 15px; line-height: 1.75; }
.sitemap-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.sitemap-groups > section { min-width: 0; }
.sitemap-groups h2 { font-size: 26px; line-height: 1.3; margin-bottom: 16px; }
.sitemap-link { min-height: 44px; padding-block: 10px; font-size: 15px; gap: 12px; }
.sitemap-link > .icon { margin-inline-start: auto; }
.privacy-prose h2 { font-size: 29px; margin-bottom: 16px; }
.privacy-prose p { font-size: 16px; line-height: 1.85; }

/* FAQ remains a crawlable document, with comfortable controls and RTL padding. */
.faq-tools { margin-bottom: 32px; }
.faq-tools .support-search { padding: 4px 16px; gap: 12px; }
.faq-tools input { padding-block: 10px; font-size: 16px; }
.faq-tools .icon-button { width: 44px; height: 44px; }
.faq-tool-bottom { gap: 12px 24px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; }
.faq-tool-bottom > div { gap: 12px 20px; }
.faq-tool-bottom .text-link { min-height: 44px; font-size: 13px; }
.faq-count, .faq-sidebar .small-note { font-size: 12px; }
.faq-layout, .faq-method { grid-template-columns: 230px minmax(0, 1fr); gap: 40px; }
.faq-sidebar { top: var(--sticky-offset); }
.faq-sidebar nav a { min-height: 44px; font-size: 14px; }
.faq-method-link { min-height: 44px; font-size: 13px; }
.faq-topic { margin-bottom: 48px; }
.faq-topic > header { padding-bottom: 18px; }
.faq-topic h2 { font-size: 30px; line-height: 1.3; }
.faq-answer > summary { padding-block: 18px; min-height: 64px; }
.faq-answer h3 { font-size: 16px; line-height: 1.6; }
.faq-answer-body { padding: 0; padding-block-end: 24px; padding-inline: 33px 34px; font-size: 15px; }
.faq-answer-links { font-size: 12px; gap: 10px; }
.faq-permalink { min-height: 40px; }
.faq-method { padding-block: 32px; }
.faq-method > p { font-size: 15px; line-height: 1.8; }
.faq-source-library > summary { min-height: 44px; font-size: 16px; }
.faq-source-library ol { font-size: 13px; }
.faq-source-library small, .faq-origin footer { font-size: 12px; }
.faq-original { margin-block: 20px; }
.faq-original > summary { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; min-height: 36px; cursor: pointer; list-style: none; color: var(--muted); font-size: 13px; }
.faq-original > summary::-webkit-details-marker { display: none; }
.faq-original > summary:hover { color: var(--ink); }
.faq-original > summary .icon { width: 16px; height: 16px; flex: none; transition: transform .18s; }
.faq-original[open] > summary .icon { transform: rotate(180deg); }
.faq-original .faq-origin { margin-block: 8px 0; }

/* Pricing has natural content height, rather than a stretched, empty Free card. */
.pricing-plans { align-items: start; margin-block: 0 32px; }
.pricing-plans .plan-card { padding: 28px; }
.plan-heading > p { min-height: 0; font-size: 15px; margin-top: 12px; }
.plan-billing { min-height: 48px; margin-block: 20px 16px; }
.plan-billing button { min-height: 44px; font-size: 13px; }
.plan-price { min-height: 148px; }
.plan-price .price-number { font-size: 66px; margin-bottom: 12px; }
.plan-price .price-saving, .free-tagline { font-size: 13px; line-height: 1.75; }
.plan-card > .button { margin-top: 16px; }
.plan-inclusions, .plan-inclusions-label { padding-top: 22px; margin-top: 24px; }
.plan-inclusions li { font-size: 15px; line-height: 1.75; margin-top: 12px; }
.plan-card > .small-note { font-size: 12px; margin-top: 20px; }
.landing-pricing .pricing-layout { margin-top: 32px; }
.landing-pricing > .section-more { margin-block: 20px 16px; }

/* The local cabinet prioritizes plan selection and predictable keyboard focus. */
.checkout-page .checkout-preview { padding-block: 16px; margin-bottom: 28px; }
.checkout-preview p, .checkout-plan small, .checkout-period small { font-size: 13px; line-height: 1.75; }
.checkout-layout { gap: 40px; }
.checkout-summary { top: var(--sticky-offset); padding: 26px; }
.checkout-summary > .small-note { font-size: 12px; }
.checkout-provider { font-size: 12px; }
.checkout-notice { font-size: 13px; min-height: 0; padding-block: 16px; }
.billing-actions { gap: 12px 24px; }
.billing-actions .text-link, .billing-history .text-link { font-size: 14px; }
.billing-current > p { font-size: 14px; }
.billing-history { margin-top: 40px; padding-top: 28px; }
.billing-history th { font-size: 12px; }
.billing-empty { font-size: 14px; }

/* Footer contacts form a single deliberate group, with readable navigation. */
.footer { margin-top: 48px; padding-top: 32px; gap: 32px 48px; }
.footer-intro { display: block; min-width: 0; }
.footer-intro p { font-size: 15px; line-height: 1.75; margin-top: 18px; }
.footer-contact-links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; }
.footer-contact-links > .text-link { margin: 0; font-size: 14px; min-height: 44px; }
.footer-email { width: fit-content; max-width: 100%; white-space: nowrap; }
.footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.footer-links nav { min-width: 0; }
.footer-links h2 { font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
.footer-links a { display: block; min-height: 44px; font-size: 14px; line-height: 1.5; padding-block: 8px; overflow-wrap: break-word; hyphens: auto; }
.footer-bottom { font-size: 12px; line-height: 1.75; gap: 12px 24px; flex-wrap: wrap; padding-top: 24px; }
.platform-credits { display: inline-flex; align-items: center; min-height: 40px; }

@media (max-width: 1239px) {
  .nav-shell { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand email actions"; gap: 16px; }
  .header .desktop-nav { display: none; }
  .header-email { justify-self: end; }
  .mobile-toggle { display: inline-grid; }
  .mobile-nav:not([hidden]) { position: absolute; top: 100%; inset-inline: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; width: min(1200px, calc(100% - 80px)); max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain; margin-inline: auto; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 0 0 16px 16px; box-shadow: 0 16px 32px #00000012; }
  .mobile-nav a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: 8px; font-size: 14px; line-height: 1.5; transition: background .18s; }
  .mobile-nav a:hover { background: var(--soft); }
  .mobile-nav .mobile-primary { font-weight: 750; }
  .mobile-nav a[aria-current="page"] { background: var(--soft); box-shadow: inset 3px 0 var(--accent); }
  .mobile-nav .mobile-download { grid-column: 1 / -1; justify-content: center; margin-top: 8px; background: var(--accent); color: #242424; font-weight: 750; }
  .mobile-nav .mobile-download:hover { background: #ffc13f; }
}

@media (max-width: 1160px) {
  .footer { grid-template-columns: minmax(0, 1fr); }
  .footer-intro { max-width: 650px; }
  .footer-intro p { max-width: 58ch; }
  .footer-links { gap: 32px; }
  .ai-layout { gap: 28px; }
}

@media (max-width: 900px) {
  .feature-grid { gap: 28px 32px; }
  .panel-caption { gap: 20px; }
  .faq-layout, .faq-method { grid-template-columns: 190px minmax(0, 1fr); gap: 28px; }
  .checkout-layout { gap: 24px; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); }
  .checkout-plan { padding: 16px; }
  .checkout-plan-options { gap: 12px; }
  .checkout-period { padding: 16px; }
  .roadmap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .roadmap-phase:last-child { grid-column: 1 / -1; }
}

@media (max-width: 800px) {
  .wrap, .nav-shell, .mobile-nav:not([hidden]) { width: calc(100% - 40px); }
}

@media (max-width: 767px) {
  :root { --space-section: 36px; --space-block: 24px; --sticky-offset: 100px; }
  .wrap, .nav-shell, .mobile-nav:not([hidden]) { width: calc(100% - 32px); }
  .nav-shell {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 44px 28px;
    grid-template-areas: "brand actions" "email actions";
    gap: 0 12px;
    padding-block: 6px;
  }
  .nav-shell .wordmark { font-size: 28px; }
  .header-actions { gap: 2px; }
  .header-email { width: auto; justify-self: start; justify-content: start; min-height: 28px; gap: 6px; font-size: 12px; line-height: 1.5; }
  .header-email .icon { width: 14px; height: 14px; }
  .header .nav-download { display: none; }
  .header .icon-button { width: 44px; height: 44px; }
  .language-picker summary { font-size: 12px; padding: 8px 6px; }
  .language-picker { position: static; }
  .language-menu { top: calc(100% + 8px); inset-inline: 0; width: auto; max-width: none; max-height: calc(100dvh - 108px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; }
  .language-menu a { font-size: 14px; padding: 10px; }
  .mobile-nav:not([hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; gap: 4px 8px; }
  .page, .checkout-page .page { padding-top: 16px; }
  .breadcrumb, .checkout-page .breadcrumb { margin-bottom: 8px; }
  .page-label, .checkout-page .page-label { margin-bottom: 10px; font-size: 13px; }
  .subpage .page-heading h1, .checkout-page .page-heading h1 { font-size: clamp(32px, 7.6vw, 42px); line-height: 1.18; }
  .page-intro, .checkout-page .page-intro { font-size: 16px; line-height: 1.75; margin-top: 14px; }
  .section-heading > p:last-child { font-size: 15px; line-height: 1.75; margin-top: 14px; }
  .hero { padding-top: 28px; }
  .hero h1 { font-size: clamp(36px, 8vw, 52px); }
  .hero .eyebrow { font-size: 11px; line-height: 1.6; }
  .intro { font-size: 16px; line-height: 1.75; margin-top: 18px; }
  .hero-actions { gap: 12px 20px; margin-top: 20px; }
  .hero-stage { margin-top: 24px; }
  .capture-note, .product-hero .capture-note { font-size: 12px; margin-top: 10px; }
  .provider-carousel { padding-top: 28px; }
  .provider-carousel .provider-note { font-size: 12px; max-width: 100%; }
  .provider-toolbar { align-items: center; flex-wrap: wrap; gap: 8px 16px; }
  .provider-toolbar > p { font-size: 12px; }
  .feature-tabs { width: 100%; gap: 4px; padding: 4px; margin-block: 24px 20px; }
  .feature-tabs button { flex: 1 1 auto; padding: 10px 12px; font-size: 13px; white-space: normal; }
  .panel-caption { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .panel-caption p { font-size: 15px; }
  .conversation-copy > p:not(.eyebrow) { font-size: 15px; }
  .expanded-product .expanded-stage { margin-top: 24px; }
  .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-block: 24px; }
  .subpage .feature-item :is(h2,h3) { font-size: 23px; }
  .feature-item p { font-size: 15px; line-height: 1.75; margin-top: 10px; }
  .catalog-title { gap: 8px 20px; }
  .catalog-title h2 { font-size: 26px; }
  .catalog-title > .text-link { font-size: 14px; }
  .product-hero { margin-bottom: 24px; }
  .privacy-points { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .privacy-points p { font-size: 15px; }
  .privacy-heading p:last-child { font-size: 15px; }
  .download-card { padding: 28px 24px; gap: 24px; }
  .download-card h2 { font-size: 32px; }
  .download-card .platform-list { gap: 14px; }
  .platform-item span { font-size: 12px; }
  .ai-notes h3 { font-size: 18px; }
  .ai-notes .small-note { font-size: 13px; }
  .ai-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .small-note { font-size: 13px; max-width: none; }
  .context-note { font-size: 14px; padding: 14px; }
  .related-band { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 28px; }
  .related-band h2 { font-size: 27px; }
  .page-end { margin-top: 32px; gap: 12px 20px; padding-top: 24px; }
  .page-end > p { font-size: 19px; }
  .changelog > section { grid-template-columns: 42px minmax(0, 1fr); gap: 16px; margin-bottom: 28px; }
  .change-marker { width: 40px; height: 40px; }
  .changelog h2 { font-size: 25px; }
  .roadmap-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .roadmap-phase:last-child { grid-column: auto; }
  .roadmap-phase p { font-size: 15px; }
  .roadmap-phase article { padding-block: 18px; }
  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 28px; }
  .contact-info > p { font-size: 15px; margin-bottom: 16px; }
  .contact-actions > .button { display: inline-flex; width: auto; font-size: 14px; }
  .contact-actions { gap: 12px 20px; }
  .help-list details { padding: 14px 16px; }
  .help-list summary { font-size: 16px; line-height: 1.5; min-height: 40px; }
  .help-list p { font-size: 15px; }
  .support-contact { margin-top: 32px; padding-top: 24px; }
  .support-contact p { font-size: 15px; }
  .principles { gap: 28px; }
  .principles article { grid-template-columns: 36px minmax(0, 1fr); gap: 16px; }
  .principles article > span { font-size: 28px; }
  .principles h2 { font-size: 27px; }
  .principles p { font-size: 15px; }
  .brand-family { padding: 24px; }
  .compare-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare-row > div { padding: 16px 12px; font-size: 14px; line-height: 1.75; }
  .compare-row:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare-row [role=rowheader] { grid-column: 1 / -1; padding-bottom: 4px; font-size: 16px; }
  .compare-row [role=cell]::before { content: attr(data-column-label); display: block; font-size: 12px; color: var(--muted); font-weight: 650; margin-bottom: 8px; }
  .comparison { position: relative; }
  .download-panel { padding: 28px 20px; gap: 24px; }
  .download-panel .button { font-size: 14px; }
  .download-panel .small-note { font-size: 13px; }
  .platform-list-full .platform-item { padding: 16px 12px; }
  .platform-list-full .platform-item span { font-size: 14px; }
  .platform-list-full .platform-item small { font-size: 12px; }
  .install-steps { margin-block: 28px; gap: 24px; }
  .install-steps li { font-size: 15px; }
  .sitemap-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .sitemap-groups h2 { font-size: 25px; }
  .sitemap-link { font-size: 15px; }
  .privacy-prose h2 { font-size: 27px; }
  .privacy-prose p { font-size: 15px; line-height: 1.8; }
  .demo-controls { gap: 16px; margin-block: 24px 16px; }
  .demo-sections { gap: 12px; }
  .demo-sections .button { min-height: 44px; font-size: 13px; padding: 10px 12px; }
  .demo-controls > .text-link { font-size: 14px; }
  .demo-window { scrollbar-width: thin; }
  .demo-window iframe { height: min(720px, 78dvh); min-height: 500px; }
  .demo-launch > .button { width: auto; min-width: 220px; max-width: calc(100% - 32px); font-size: 14px; }
  .gallery-section { margin-top: 32px; }
  .gallery-section h2 { font-size: 28px; margin-bottom: 24px; }
  .faq-layout, .faq-method { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .faq-sidebar { position: static; }
  .faq-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .faq-sidebar nav a { font-size: 13px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
  .faq-sidebar .small-note { font-size: 12px; margin: 12px 0 0; }
  .faq-tools { margin-bottom: 24px; }
  .faq-tools .support-search { padding: 4px 12px; gap: 8px; }
  .faq-tools input { font-size: 16px; }
  .faq-tool-bottom { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; font-size: 13px; }
  .faq-tool-bottom > div { gap: 12px 20px; justify-content: flex-start; }
  .faq-tool-bottom .text-link { font-size: 13px; gap: 8px; }
  .faq-count { font-size: 13px; white-space: normal; }
  .faq-count > span:last-child { display: inline; margin-inline-start: 8px; }
  .faq-topic h2 { font-size: 26px; line-height: 1.35; }
  .faq-answer > summary { gap: 10px; min-height: 64px; padding-block: 16px; }
  .faq-answer h3 { font-size: 15px; line-height: 1.6; }
  .faq-answer-body { padding: 0; padding-block-end: 24px; padding-inline: 23px 0; font-size: 15px; }
  .faq-origin > p { font-size: 14px; }
  .faq-method { padding-block: 28px; }
  .faq-method > p, .faq-source-library > summary { font-size: 15px; }
  .faq-source-library ol { font-size: 13px; }
  .pricing-plans { gap: 24px; }
  .pricing-plans .plan-card { padding: 24px; }
  .plan-heading > p { font-size: 15px; }
  .plan-price { min-height: 0; }
  .plan-price .price-number { font-size: 64px; }
  .plan-billing button { font-size: 13px; }
  .plan-card > .button { margin-top: 20px; }
  .free-tagline { font-size: 14px; }
  .checkout-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .checkout-summary { grid-row: auto; position: static; padding: 24px; }
  .checkout-preview p, .checkout-plan small, .checkout-period small { font-size: 13px; }
  .checkout-period strong { font-size: 14px; }
  .checkout-period em { font-size: 11px; }
  .checkout-plan { padding: 16px; }
  .billing-history { margin-top: 32px; }
  .billing-history table { font-size: 13px; }
  .billing-history .text-link { font-size: 13px; }
  .footer { margin-top: 36px; padding-top: 28px; gap: 28px; }
  .footer-intro .wordmark { font-size: 32px; }
  .footer-intro p { font-size: 15px; }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .footer-links h2, .footer-links a { font-size: 14px; }
  .footer-bottom { font-size: 12px; align-items: flex-start; gap: 10px; }
  .lightbox-toolbar { font-size: 12px; align-items: flex-start; }
  .lightbox-toolbar .icon-button { width: 44px; height: 44px; }
  .screenshot .zoom-affordance { opacity: 1; transform: none; width: 30px; height: 30px; padding: 6px; inset-inline-end: 10px; bottom: 10px; }
}

@media (max-width: 480px) {
  .sitemap-groups { grid-template-columns: minmax(0, 1fr); }
  .hero-actions > .button { font-size: 14px; }
  .lightbox-controls { gap: 16px; }
}

@media (max-width: 359px) {
  .nav-shell { column-gap: 10px; }
  .nav-shell .wordmark { font-size: 25px; }
  .language-picker summary { min-width: 44px; justify-content: center; }
  .language-picker summary > .icon:first-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  .header a, .header button, .header summary { transition: none; }
  .header .nav-download:hover { transform: none; }
}

.footer-brand{display:inline-flex;align-items:center;min-height:44px}
/* One header offset, rather than scroll-padding plus another full scroll-margin. */
.section[id],.catalog-section,.faq-answer,.faq-topic,.faq-answers,.provider-carousel,.faq-source-library li{scroll-margin-top:0}

/* Supplementary preview details stay available without delaying the plan controls. */
.checkout-page .checkout-preview{display:block}
.checkout-preview>summary{display:flex;align-items:center;gap:12px;min-height:44px;list-style:none;cursor:pointer}
.checkout-preview>summary::-webkit-details-marker{display:none}
.checkout-preview>summary>strong{flex:1;font-size:14px;line-height:1.6}
.checkout-preview>summary>.icon:last-child{width:17px;height:17px;transition:transform .2s}
.checkout-preview[open]>summary>.icon:last-child{transform:rotate(180deg)}
.checkout-preview>p{margin-top:12px;padding-inline-start:34px;font-size:14px}
html:lang(ar) .page-heading h1{letter-spacing:normal;line-height:1.4}
@media(max-width:767px){.checkout-page .checkout-preview{padding-block:10px}.checkout-preview>summary>strong{font-size:13px}.checkout-preview>p{padding-inline-start:0;font-size:13px}}

.demo-scroll-hint{display:none}
@media(max-width:767px){.demo-scroll-hint:has(+.demo-window iframe:not([hidden])){display:block;font-size:13px;line-height:1.75;color:var(--muted);margin:0 0 16px}}

/* One live native renderer is shared by the product blocks on the homepage. */
.showcase{min-width:0;width:100%}
.showcase-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;margin-bottom:12px}
.showcase-toolbar>div{display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap}
.showcase-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:650;line-height:1.6}
.showcase-label>.icon{width:18px;height:18px}
.showcase-toolbar .text-link{font-size:13px}
.showcase-stage{position:relative;isolation:isolate;width:100%;min-width:0;aspect-ratio:1280/800;min-height:560px;max-height:800px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface);direction:ltr;scrollbar-width:thin}
.showcase-stage>.showcase-poster{width:100%;min-width:1000px;border-radius:0;box-shadow:none}
.showcase-stage>iframe{position:absolute;inset:0;display:block;width:100%;min-width:1000px;height:100%;border:0;background:var(--surface)}
.showcase-live-layer{position:absolute;z-index:2;overflow-x:auto;overflow-y:hidden;direction:ltr;background:var(--surface);scrollbar-width:thin}
.showcase-live-layer>iframe{display:block;width:100%;min-width:1000px;height:100%;border:0;background:var(--surface)}
.showcase-stage[data-state=loading]>iframe{opacity:0;pointer-events:none}
.showcase-loading{position:absolute;z-index:1;inset-inline:16px;bottom:16px;display:block;width:fit-content;margin-inline:auto;padding:10px 16px;border-radius:8px;background:var(--surface);color:var(--ink);font-size:14px;box-shadow:0 0 0 1px var(--line)}
.showcase-note{font-size:13px;line-height:1.8;margin-top:18px;max-width:80ch}
.showcase-mobile-hint{display:none}
.showcase-details .feature-grid{margin-block:28px 16px}
.showcase-details .feature-item>.text-link{margin-top:8px;font-size:13px}
.landing-page .ai-layout{grid-template-columns:minmax(0,1fr)}
.landing-page .ai-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.landing-page .ai-notes>.small-note{grid-column:1/-1;max-width:80ch}
@media(max-width:1079px){.showcase-mobile-hint{display:block;font-size:13px;line-height:1.75;margin-bottom:12px}}
@media(max-width:767px){
 .showcase-toolbar{gap:4px 16px;margin-bottom:8px}
 .showcase-toolbar>div{gap:8px 20px}
 .showcase-toolbar .text-link{font-size:12px}
 .showcase-stage{aspect-ratio:auto;height:min(650px,78dvh);min-height:500px}
 .showcase-note{font-size:13px;margin-top:14px}
 .landing-page .ai-notes{grid-template-columns:minmax(0,1fr);gap:20px}
}

.public-payment-notice{align-items:flex-start;margin-bottom:24px}.public-payment-notice h2{font-size:20px;line-height:1.35;margin:0 0 8px}.public-payment-notice p{margin:0;line-height:1.65}.checkout-continue:disabled{cursor:not-allowed}