:root {
    --font-sans: "Inter", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
    --font-display: "Playfair Display", "Noto Serif SC", ui-serif, Georgia, serif;
    --type-hero: clamp(2.25rem, 5vw, 4.5rem);
    --type-page: clamp(2.25rem, 4vw, 3rem);
    --type-section: clamp(1.75rem, 3vw, 2.625rem);
    --type-card-large: 1.5rem;
    --type-ui-heading: 1.25rem;
    --type-card: 1rem;
    --type-body: 1rem;
    --type-small: .875rem;
    --type-label: .8125rem;
    --type-caption: .75rem;
}

.qh-skip-link{position:fixed;z-index:100000;left:1rem;top:1rem;transform:translateY(-180%);padding:.75rem 1rem;border-radius:.5rem;background:#111820;color:#fff!important;font-weight:700;text-decoration:none;box-shadow:0 8px 25px #0004}
.qh-skip-link:focus{transform:translateY(0)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid #d9a441!important;outline-offset:3px!important}
[aria-disabled="true"],:disabled{cursor:not-allowed;opacity:.68}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(forced-colors:active){:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid CanvasText!important}.qh-skip-link{border:2px solid CanvasText}}

html, body, button, input, select, textarea, table {
    font-family: var(--font-sans) !important;
    font-feature-settings: "kern" 1, "liga" 1;
}

body {
    font-size: var(--type-body);
    font-weight: 400;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

nav, button, .button, [class*="button"], [class*="btn"] {
    font-family: var(--font-sans) !important;
    font-size: clamp(.875rem, 1.2vw, 1rem);
    font-weight: 600;
}

input, select, textarea { font-size: .9375rem; }
label, th {
    font-family: var(--font-sans) !important;
    font-size: var(--type-label);
    font-weight: 600;
}

.font-sans { font-family: var(--font-sans) !important; }
.font-display { font-family: var(--font-display) !important; }
.tabular, .price, .amount, [class*="price"], [class*="total"], td, time {
    font-variant-numeric: tabular-nums lining-nums;
}

body:not([data-ui-surface="business"]) .marketing-heading,
body:not([data-ui-surface="business"]) .hero-copy h1,
body:not([data-ui-surface="business"]) .hero h1,
body:not([data-ui-surface="business"]) main > header h1,
body:not([data-ui-surface="business"]) .section-head h2,
body:not([data-ui-surface="business"]) section > h2 {
    font-family: var(--font-display) !important;
    font-weight: 600;
    letter-spacing: -.025em;
}

body:not([data-ui-surface="business"]) .hero-copy h1,
body:not([data-ui-surface="business"]) .hero h1 {
    font-size: var(--type-hero);
    font-weight: 700;
    line-height: 1.04;
}

body:not([data-ui-surface="business"]) main > header h1 {
    font-size: var(--type-page);
    line-height: 1.1;
}

body:not([data-ui-surface="business"]) .section-head h2,
body:not([data-ui-surface="business"]) section > h2 {
    font-size: var(--type-section);
    line-height: 1.16;
}

body[data-ui-surface="business"],
body[data-ui-surface="business"] h1,
body[data-ui-surface="business"] h2,
body[data-ui-surface="business"] h3,
body[data-ui-surface="business"] h4,
body[data-ui-surface="business"] h5,
body[data-ui-surface="business"] h6 {
    font-family: var(--font-sans) !important;
    letter-spacing: normal;
}

body[data-ui-surface="business"] h1 { font-weight: 700; }
small, .caption { font-size: var(--type-caption); }

html:lang(zh-CN), html:lang(zh-CN) body {
    font-family: "Noto Sans SC", "Inter", sans-serif !important;
}

html:lang(zh-CN) .font-display,
html:lang(zh-CN) .marketing-heading {
    font-family: "Noto Serif SC", "Playfair Display", serif !important;
}

/*
 * Interface surfaces: admin dashboard, customer account, documents, tracking.
 *
 * The h1-h6 rule above was not enough. The admin template declares
 * font-family:"Rubik",Arial !important on .app-wrapper, .qh-native-content and
 * every form control, and .qh-native-content input (0,1,1) outranks the plain
 * element selectors above (0,0,1) — so admin form controls, content areas and
 * wrappers all rendered in Rubik/Arial. Separately, fifty-one admin pages carry
 * their own inline <style> blocks setting Georgia on statistic numbers
 * (.stat strong, .metric b, .card strong, .route); none of those are headings,
 * so nothing here reached them either.
 *
 * The source declarations have been replaced with the token, but this rule
 * stays as the net that makes the "no page picks its own font" guarantee
 * enforceable rather than aspirational. It is scoped to the surface attribute,
 * so public marketing typography is untouched, and it steps around the three
 * things that legitimately need a different family: icon fonts (Tabler,
 * Phosphor, flag-icons, slick), and code samples.
 */
body[data-ui-surface="business"],
body[data-ui-surface="business"] .app-wrapper,
body[data-ui-surface="business"] .app-content,
body[data-ui-surface="business"] .qh-native-content {
    font-family: var(--font-sans) !important;
}

body[data-ui-surface="business"] :not(i):not(code):not(pre):not(kbd):not(samp):not([class*="ti-"]):not([class*="ph-"]):not([class*="flag-icon"]):not([class*="slick"]) {
    font-family: var(--font-sans) !important;
}

body[data-ui-surface="business"] .ti,
body[data-ui-surface="business"] [class*="ti-"] { font-family: "tabler-icons" !important; }

body[data-ui-surface="business"] code,
body[data-ui-surface="business"] pre,
body[data-ui-surface="business"] kbd,
body[data-ui-surface="business"] samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

/* Disciplined weights, per the typography hierarchy. No display face here. */
body[data-ui-surface="business"] h1 { font-size: var(--type-ui-heading); font-weight: 700; }
body[data-ui-surface="business"] h2 { font-size: 1.125rem; font-weight: 700; }
body[data-ui-surface="business"] h3,
body[data-ui-surface="business"] h4 { font-size: var(--type-card); font-weight: 600; }

/*
 * Financial and statistical values line up column to column. Admin screens are
 * read by scanning down a column of figures, which proportional digits break.
 */
body[data-ui-surface="business"] td,
body[data-ui-surface="business"] th,
body[data-ui-surface="business"] .stat,
body[data-ui-surface="business"] .stat strong,
body[data-ui-surface="business"] .metric,
body[data-ui-surface="business"] .metric b,
body[data-ui-surface="business"] .card strong,
body[data-ui-surface="business"] .qh-kpi h3 {
    font-variant-numeric: tabular-nums lining-nums;
}

@media (max-width: 800px) {
    :root { --type-hero: clamp(2.25rem, 9vw, 3.375rem); }
    body { font-size: .9375rem; }
}

@media print {
    * {
        font-family: "Inter", "Noto Sans SC", "DejaVu Sans", sans-serif !important;
        font-variant-numeric: tabular-nums lining-nums;
    }
}