/* Shared visual foundations for the public site and Django account pages. */
.site-ui {
  --ink: #1d1d1f; --text: #515154; --muted: #6e6e73;
  --surface: #f5f5f7; --line: #d2d2d7; --line-strong: #b8b8be;
  --green: #008578; --accent-hover: #007b70; --accent-text: #007f74; --on-accent: #fff;
  color: var(--ink); background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.site-ui .container { width: min(1120px, calc(100% - 80px)); }
.site-ui .site-header { position: sticky; top: 0; z-index: 20; max-width: none; min-height: 60px; padding: 10px max(24px, calc((100% - 1120px) / 2)); border-bottom: 1px solid #0000000d; background: #ffffffed; backdrop-filter: saturate(180%) blur(20px); }
.site-ui .brand { gap: 8px; font-size: 20px; font-weight: 600; letter-spacing: -.6px; }
.site-ui .brand img { width: 28px; height: 28px; flex-basis: 28px; }
.site-ui .site-header nav { font-size: 12px; font-weight: 400; gap: 28px; }
.site-ui .site-header a[aria-current='page'] { color: var(--accent-text); }
.site-ui .header-actions { gap: 20px; font-size: 12px; }
.site-ui .button { border-radius: 999px; font-size: 16px; font-weight: 400; min-height: 46px; padding: 11px 24px; }
.site-ui .button.secondary { background: transparent; border-color: var(--line-strong); }
.site-ui .nav-download { font-size: 12px; min-height: 32px; padding: 6px 15px; }
.site-ui .nav-download svg { display: none; }
.site-ui .text-link { font-size: 16px; font-weight: 400; gap: 8px; }
.site-ui .text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-ui .text-link svg { width: 16px; }
.site-ui .icon-link { display: inline-flex; align-items: center; gap: 6px; }
.site-ui .icon-link svg, .site-ui .text-link svg { flex-shrink: 0; height: 16px; vertical-align: middle; }
.site-ui .hero-actions .button, .site-ui .hero-actions .text-link, .site-ui .home-download .button { font-size: 16px; }
.site-ui .home-download .button { min-height: 46px; padding: 11px 24px; }
.site-ui .mobile-menu nav { gap: 0; }
.site-ui .mobile-menu nav form { margin: 0; }
.site-ui .mobile-menu nav button { width: 100%; padding: 13px 16px; text-align: left; font: inherit; border-radius: 6px; }
.site-ui .mobile-menu nav button:hover { background: var(--surface); }
.site-ui .eyebrow { font-size: 15px; line-height: 1.5; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.site-ui main [id] { scroll-margin-top: 88px; }
.site-ui .site-footer { max-width: none; padding: 32px max(24px, calc((100% - 1120px) / 2)) 20px; border: 0; background: var(--surface); }
.site-ui .footer-main { gap: 32px; }
.site-ui .footer-column { gap: 10px; font-size: 12px; }
.site-ui .footer-column h2 { font-size: 13px; font-weight: 600; }
.site-ui .footer-bottom { padding-top: 16px; margin-top: 24px; font-size: 11px; }
.site-ui .page-hero { padding-block: 48px 40px; text-align: center; }
.site-ui .page-hero h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.2; font-weight: 650; letter-spacing: -.04em; white-space: pre-line; }
.site-ui .page-hero h1 span { color: var(--accent-text); }
.site-ui .page-lead { max-width: 700px; margin: 20px auto 0; font-size: 18px; line-height: 1.7; color: var(--text); }
.site-ui .page-meta { margin-top: 20px; font-size: 13px; color: var(--muted); }
.site-ui .page-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 24px; margin-top: 28px; }
.site-ui .content-card { padding: 32px; border-radius: 24px; background: var(--surface); min-width: 0; }
.site-ui .content-card h2 { font-size: 26px; line-height: 1.35; font-weight: 600; letter-spacing: -.03em; }
.site-ui .content-card p { margin-top: 14px; font-size: 16px; color: var(--text); }
.site-ui .content-card .text-link { margin-top: 22px; }
.site-ui .support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-block: 0 80px; }
.site-ui .document-hero { text-align: left; }
.site-ui .document-hero .page-lead { margin-left: 0; }
.site-ui .document-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 72px; padding-bottom: 96px; align-items: start; }
.site-ui .document-sidebar { position: sticky; top: 92px; }
.site-ui .document-nav { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--line); padding-top: 24px; }
.site-ui .document-nav > p { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.site-ui .document-nav a { font-size: 14px; line-height: 1.6; }
.site-ui .document-sidebar > .text-link { margin-top: 28px; font-size: 14px; }
.site-ui .prose { width: min(780px, calc(100% - 48px)); max-width: 780px; margin: 64px auto 96px; padding: 0; }
.site-ui .prose h1 { font-size: clamp(36px, 4.5vw, 56px); line-height: 1.2; margin-bottom: 28px; }
.site-ui .prose h2 { font-size: 26px; line-height: 1.4; font-weight: 600; margin: 44px 0 18px; letter-spacing: -.03em; }
.site-ui .prose p, .site-ui .prose li { font-size: 16px; line-height: 1.95; color: var(--text); }
.site-ui .prose p + p { margin-top: 18px; }
.site-ui .prose li + li { margin-top: 12px; }
.site-ui .prose ol, .site-ui .prose ul { padding-left: 24px; margin-block: 20px; }
.site-ui .document-content { width: 100%; max-width: none; margin: 0; }
.site-ui .document-content > section { padding-bottom: 36px; border-bottom: 1px solid #e8e8ed; }
.site-ui .document-content > section + section { padding-top: 36px; }
.site-ui .document-content > section h2 { margin-top: 0; }
.site-ui .shortcut { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 18px; font-size: 13px; color: var(--muted); }
.site-ui kbd { padding: 3px 8px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.site-ui .guide-note { padding: 20px 24px; border-radius: 16px; background: var(--surface); margin-top: 24px; }
.site-ui .download-hero { padding-bottom: 48px; }
.site-ui .download-brand { margin: 0 auto 20px; }
.site-ui .download-panel { max-width: 780px; margin: 0 auto 48px; padding: 40px; border-radius: 28px; background: var(--surface); text-align: center; }
.site-ui .download-panel h2 { font-size: 30px; font-weight: 600; line-height: 1.4; }
.site-ui .download-panel p { margin: 18px auto 0; max-width: 560px; font-size: 17px; color: var(--text); }
.site-ui .download-panel .button, .site-ui .download-panel .text-link { margin-top: 24px; }
.site-ui .download-panel .page-actions .button, .site-ui .download-panel .page-actions .text-link { margin-top: 0; }
.site-ui .store-logo { flex: 0 0 24px; object-fit: contain; }
.site-ui .download-panel .store-status { font-size: 14px; color: var(--muted); }
.site-ui .download-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; list-style: none; padding: 0; margin: 28px 0 0; font-size: 14px; color: var(--muted); }
.site-ui .download-facts li { display: inline-flex; align-items: center; gap: 8px; }
.site-ui .download-facts svg { color: var(--accent-text); }
.site-ui .release-list { max-width: 860px; margin: 0 auto 88px; }
.site-ui .release-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 40px; padding: 36px; border-radius: 24px; background: var(--surface); }
.site-ui .release-card h2 { font-size: 28px; font-weight: 600; }
.site-ui .release-card .badge-free { margin-top: 14px; }
.site-ui .release-card p, .site-ui .release-card li { font-size: 16px; line-height: 1.85; color: var(--text); }
.site-ui .release-card ul { padding-left: 20px; margin: 20px 0 0; }
.site-ui .release-card li + li { margin-top: 8px; }
.site-ui .release-links { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 32px; }
.site-ui.checkout-page { background: var(--surface); }
.site-ui.checkout-page main { width: min(1120px, calc(100% - 80px)); margin: 0 auto; padding: 64px 0 80px; min-height: 75vh; }
.site-ui .checkout-panel { max-width: 640px; padding: 44px; margin: 0 auto; border: 0; border-radius: 24px; background: #fff; text-align: center; }
.site-ui .checkout-panel h1 { margin: 18px 0 24px; font-size: 36px; line-height: 1.25; letter-spacing: -.04em; }
.site-ui .checkout-panel > p:not(.eyebrow):not(.price):not(.fine) { font-size: 16px; line-height: 1.85; color: var(--text); }
.site-ui .checkout-panel .price { font-size: 48px; line-height: 1.25; letter-spacing: -.04em; margin: 24px 0 28px; }
.site-ui .checkout-panel .fine { margin-top: 20px; font-size: 13px; line-height: 1.8; color: var(--muted); overflow-wrap: anywhere; }
.site-ui .checkout-panel .button { margin: 24px 0 4px; }
.site-ui .checkout-panel .checkout-return { display: inline-flex; margin-top: 24px; }
.site-ui .pro-hero { padding-bottom: 48px; }
.site-ui .pro-hero .page-lead { white-space: pre-line; }
.site-ui .pro-section { border: 0; background: var(--surface); padding-block: 72px; }
.site-ui .pro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.site-ui .pro-card { border: 0; border-radius: 24px; padding: 32px; }
.site-ui .pro-card-copy { padding: 0; }
.site-ui .pro-card h3 { display: flex; align-items: center; gap: 12px; font-size: 30px; line-height: 1.3; letter-spacing: -.035em; }
.site-ui .pro-card h3 svg { flex-shrink: 0; color: var(--accent-text); }
.site-ui .pro-card p { font-size: 16px; line-height: 1.75; flex: none; }
.site-ui :is(.home-feature-card, .pro-card) > .demo-preview { margin-top: 20px; }
.site-ui :is(.home-feature-card, .pro-card) .demo-thumbnail { border-radius: var(--demo-radius-x) / var(--demo-radius-y); box-shadow: 0 12px 32px #1f29371a, 0 3px 8px #1f29370d; }
.site-ui :is(.home-feature-card, .pro-card) .demo-enlarge { border-radius: inherit; }
.site-ui .pro-footnote { font-size: 13px; margin-top: 32px; }
.site-ui .feature-tags { margin-top: 18px; }
.site-ui .feature-tags li { font-size: 11px; border: 0; padding: 5px 9px; }
.site-ui .pricing-section { padding-block: 88px; border: 0; background: #fff; }
.site-ui .section-intro { margin-bottom: 40px; }
.site-ui .section-intro h2 { font-size: clamp(34px, 4vw, 48px); line-height: 1.2; }
.site-ui .section-intro > p:last-child { font-size: 18px; }
.site-ui .price-card { border: 0; border-radius: 24px; background: var(--surface); padding: 32px; }
.site-ui .pro-plan { background: #eef8f5; }
.site-ui .plan-name { font-size: 30px; }
.site-ui .plan-description { font-size: 15px; margin-top: 12px; }
.site-ui .launch-offer { width: fit-content; margin-top: 20px; padding: 4px 10px; border: 1px solid var(--pro-text); border-radius: 6px; color: var(--pro-text); font-size: 13px; font-weight: 600; }
.site-ui .plan-price { font-size: 56px; }
.site-ui .plan-price small { font-size: 13px; }
.site-ui .plan-price.store-price-label { font-size: clamp(26px, 3vw, 38px); }
.site-ui .plan-price.store-price-label small { display: block; margin-left: 0; }
.site-ui .pro-plan > .button { margin-block: 20px; }
.site-ui .pro-option { background: #ffffffbf; border: 0; border-radius: 16px; grid-template-columns: 1fr auto; gap: 14px; padding: 20px; }
.site-ui .pro-option:last-child { background: #ffffffbf; }
.site-ui .pro-option > .button { grid-column: 1 / -1; font-size: 14px; }
.site-ui .pro-option h3 { font-size: 18px; }
.site-ui .pro-option > div p { font-size: 13px; }
.site-ui .option-price > span { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 2px 8px; font-size: 32px; }
.site-ui .option-price small { font-size: 12px; }
.site-ui .option-price .price-label { display: inline; margin-top: 0; color: var(--accent-text); font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.site-ui .check-list li { font-size: 14px; line-height: 1.7; }
.site-ui .plan-bottom { font-size: 12px; line-height: 1.8; margin-top: 20px; }
.site-ui .license-notes { padding-top: 32px; }
.site-ui .license-notes p { font-size: 13px; line-height: 1.9; }
.site-ui .faq-section { padding-block: 72px 96px; }
.site-ui .faq-intro h2 { font-size: 40px; line-height: 1.2; }
.site-ui .faq-intro > p:not(.eyebrow) { font-size: 16px; }
.site-ui .faq-intro .text-link { font-size: 16px; }
.site-ui .faq-list summary { padding-block: 25px; font-size: 17px; line-height: 1.5; }
.site-ui .faq-list details > p { padding: 0 32px 24px 0; font-size: 15px; line-height: 1.85; }

/* Motion marks interactive controls; informational cards stay still. */
.site-ui a, .site-ui .text-button, .site-ui .faq-list summary { transition: color 180ms ease; }
.site-ui .button { transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .site-ui .button:not(:disabled):hover { box-shadow: 0 3px 12px #0085781f; }
}
/* Native details remain keyboard accessible, with an instant fallback. */
@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
  .site-ui .faq-list details { interpolate-size: allow-keywords; }
  .site-ui .faq-list details::details-content { height: 0; overflow: clip; transition: height 240ms ease, content-visibility 240ms allow-discrete; }
  .site-ui .faq-list details[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .site-ui *, .site-ui *::before, .site-ui *::after, .site-ui details::details-content { transition: none !important; }
}
@media (max-width: 950px) {
  .site-ui .desktop-signout { display: none; }
  .site-ui .container { width: calc(100% - 64px); }
  .site-ui.checkout-page main { width: calc(100% - 64px); }
  .site-ui .document-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 40px; }
  .site-ui .pro-card { padding: 24px; }
  .site-ui .pro-card h3 { font-size: 25px; }
  .site-ui .pricing-grid { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }
  .site-ui .pro-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-ui .pro-option { grid-template-columns: 1fr; }
  .site-ui .option-price { text-align: left; }
  .site-ui .option-price > span { justify-content: flex-start; }
  .site-ui .document-sidebar > .text-link { font-size: 13px; }
}
@media (max-width: 720px) {
  .site-ui .container { width: calc(100% - 40px); }
  .site-ui .site-header { min-height: 56px; padding: 8px 20px; gap: 12px; }
  .site-ui .brand { font-size: 19px; }
  .site-ui .brand img { width: 25px; height: 25px; flex-basis: 25px; }
  .site-ui .header-actions { gap: 12px; }
  .site-ui .mobile-menu summary { border: 0; min-width: 32px; min-height: 36px; }
  .site-ui .mobile-menu nav { gap: 0; }
  .site-ui .page-hero { padding-block: 48px 40px; }
  .site-ui .page-hero h1 { font-size: 36px; }
  .site-ui .page-lead { font-size: 17px; margin-top: 20px; }
  .site-ui .page-actions { gap: 18px; }
  .site-ui .button { font-size: 15px; }
  .site-ui .text-link, .site-ui .hero-actions .button, .site-ui .hero-actions .text-link, .site-ui .home-download .button { font-size: 15px; }
  .site-ui .nav-download { font-size: 12px; padding-inline: 14px; }
  .site-ui .document-layout { grid-template-columns: 1fr; gap: 36px; padding-bottom: 64px; }
  .site-ui .document-sidebar { position: static; }
  .site-ui .document-nav { flex-direction: row; flex-wrap: wrap; gap: 10px 18px; padding-top: 20px; }
  .site-ui .document-nav > p { width: 100%; }
  .site-ui .document-nav a { font-size: 13px; }
  .site-ui .document-sidebar > .text-link { display: none; }
  .site-ui .prose { margin-block: 40px 64px; }
  .site-ui .document-content { margin: 0; }
  .site-ui .prose h2 { font-size: 24px; }
  .site-ui .prose p, .site-ui .prose li { font-size: 15px; }
  .site-ui .support-grid { grid-template-columns: 1fr; gap: 20px; margin-bottom: 56px; }
  .site-ui .content-card { padding: 26px; border-radius: 20px; }
  .site-ui .content-card h2 { font-size: 24px; }
  .site-ui .content-card p { font-size: 15px; }
  .site-ui .download-panel { padding: 32px 24px; border-radius: 22px; }
  .site-ui .download-panel h2 { font-size: 26px; }
  .site-ui .download-panel p { font-size: 16px; }
  .site-ui .download-facts { gap: 14px 20px; font-size: 13px; }
  .site-ui .release-list { margin-bottom: 56px; }
  .site-ui .release-card { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
  .site-ui .release-card p, .site-ui .release-card li { font-size: 15px; }
  .site-ui.checkout-page main { width: calc(100% - 40px); padding-block: 40px 56px; }
  .site-ui .checkout-panel { padding: 26px; border-radius: 20px; }
  .site-ui .checkout-panel h1 { font-size: 32px; }
  .site-ui .checkout-panel .price { font-size: 44px; }
  .site-ui .checkout-panel > p:not(.eyebrow):not(.price):not(.fine) { font-size: 15px; }
  .site-ui .pro-section { padding-block: 40px; }
  .site-ui .pro-grid { grid-template-columns: 1fr; gap: 20px; }
  .site-ui .pro-card { border-radius: 20px; }
  .site-ui :is(.home-feature-card, .pro-card) > .demo-preview { margin-top: 18px; }
  .site-ui .pro-card h3 { font-size: 27px; }
  .site-ui .pro-card p { font-size: 15px; }
  .site-ui .pricing-section { padding-block: 56px; }
  .site-ui .section-intro > p:last-child { font-size: 16px; }
  .site-ui .price-card { padding: 26px; }
  .site-ui .pro-options { grid-template-columns: 1fr; }
  .site-ui .pro-option { grid-template-columns: 1fr auto; }
  .site-ui .option-price { text-align: right; }
  .site-ui .option-price > span { justify-content: flex-end; }
  .site-ui .pro-checks { grid-template-columns: 1fr; }
  .site-ui .faq-section { padding-block: 48px 64px; }
  .site-ui .faq-intro h2 { font-size: 34px; }
  .site-ui .faq-list summary { font-size: 16px; }
  .site-ui .site-footer { padding: 28px 20px 20px; }
  .site-ui .footer-main { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .site-ui .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 370px) {
  .site-ui.checkout-page main { width: calc(100% - 32px); }
  .site-ui .checkout-panel { padding: 22px; }
  .site-ui .container { width: calc(100% - 32px); }
  .site-ui .site-header { padding-inline: 16px; }
  .site-ui .header-actions { gap: 8px; }
  .site-ui .brand { font-size: 18px; }
  .site-ui .nav-download { padding-inline: 12px; }
  .site-ui .page-hero h1 { font-size: 32px; }
  .site-ui .footer-main { gap: 16px; }
}