/* hhpoker — shared UI tokens, components, then responsive overrides.
   Type roles: caption 12; secondary 14; body/action 16; subheading 18–24.
   Headings scale with the viewport. No external font download is required. */

/* 1. Design tokens */
:root {
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-caption: .75rem;
  --font-small: .875rem;
  --font-body: 1rem;
  --font-subtitle: 1.125rem;
  --font-card-title: 1.25rem;
  --font-section-small: 1.5rem;
  --font-section: clamp(1.5rem, 2.4vw, 2rem);
  --font-display: clamp(2.5rem, 4.5vw, 3.5rem);
  --font-hero-line: clamp(1.5rem, 2.8vw, 2.25rem);
  --font-counter: 2.5rem;
  --font-account: 1.5rem;
  --line-body: 1.75;
  --line-compact: 1.5;
  --line-heading: 1.3;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --blue: #315bff;
  --blue-hover: #2449dc;
  --ink: #161b27;
  --muted: #5f6c80;
  --line: #e3e8f1;
  --soft: #f2f6ff;
  --radius: 14px;
  --content: 1200px;
  --page-gutter: 48px;
  --section-space: 64px;
  --hero-art-width: 440px;
  --focus-ring: #87a2ff;
}

/* 2. Document foundation */
* { box-sizing: border-box; }
html { scroll-padding-top: 105px; }
body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-body);
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
}
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3 { font-weight: var(--weight-bold); line-height: var(--line-heading); }
h1 { margin: 0; font-size: var(--font-display); letter-spacing: -.035em; }
h2 { margin: 0; font-size: var(--font-section); letter-spacing: -.02em; }
h3 { font-size: var(--font-subtitle); }
.container {
  width: calc(100% - var(--page-gutter) * 2);
  max-width: var(--content);
  margin-inline: auto;
}
.section { padding-block: var(--section-space); }
.skip { position: fixed; top: -100px; left: 20px; z-index: 99; padding: 12px; background: #fff; }
.skip:focus { top: 10px; }
/* Used only by the separate design documentation pages. */
.eyebrow {
  margin: 0 0 16px;
  color: var(--blue);
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  line-height: var(--line-compact);
  letter-spacing: .12em;
}

/* 3. Header and navigation */
.header {
  position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid var(--line);
  background: #ffffffed; backdrop-filter: blur(12px);
}
.header-inner { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-logo { width: 178px; height: 42px; object-fit: contain; flex-shrink: 0; }
.brand-label {
  margin-left: 6px; padding-left: 15px; border-left: 1px solid var(--line);
  font-size: var(--font-small); color: var(--muted); white-space: nowrap;
}
.header nav { display: flex; align-self: stretch; gap: 32px; font-size: var(--font-small); font-weight: var(--weight-semibold); }
.header nav a { position: relative; display: flex; align-items: center; }
.header .active { color: var(--blue); }
.header .active::after { content: ""; position: absolute; bottom: 20px; left: 0; right: 0; height: 2px; background: var(--blue); }
.menu-toggle {
  display: none; flex-shrink: 0; width: 44px; height: 44px; padding: 11px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
}
.menu-toggle span { display: block; height: 2px; margin: 4px 0; background: #35415b; }
.breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  padding-top: 20px; font-size: var(--font-small); line-height: var(--line-compact);
  font-weight: var(--weight-regular); color: var(--muted);
}
.breadcrumb a { display: inline-flex; align-items: center; min-height: 32px; }
.breadcrumb [aria-current] { color: #404d63; }

/* 4. Hero */
.hero { overflow: hidden; background: radial-gradient(ellipse at 89% 36%, #dce9ff 0%, #edf3ff 28%, #f8faff 52%, #fff 84%); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; min-height: 474px; gap: 26px; }
.hero-copy { position: relative; z-index: 1; min-width: 0; padding: 28px 0 35px; }
.hero-line {
  margin: 12px 0 22px; font-size: var(--font-hero-line);
  font-weight: var(--weight-bold); line-height: var(--line-heading); letter-spacing: -.025em;
}
.hero-description { margin: 0 0 28px; font-size: var(--font-body); line-height: var(--line-body); color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 22px;
  min-height: 52px; padding: 12px 22px; border: 1px solid transparent; border-radius: 9px;
  font-size: var(--font-body); font-weight: var(--weight-semibold); line-height: var(--line-compact);
  transition: background .15s;
}
.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.primary:hover { background: var(--blue-hover); color: #fff; }
.secondary { border-color: #8199df; color: #2d3b57; background: #ffffff6b; }
.platforms { display: flex; align-items: center; gap: 23px; margin-top: 24px; font-size: var(--font-body); font-weight: var(--weight-medium); }
.platforms span { display: flex; align-items: center; gap: 9px; }
.platforms svg { width: 20px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.platforms i { height: 22px; width: 1px; background: #cbd4e3; }
.hero-art { position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; min-width: 0; }
.hero-art picture { display: contents; }
.hero-art img { width: var(--hero-art-width); max-width: 100%; height: auto; margin: 0; }

/* 5. Quick navigation and topic labels */
.quick-nav { display: grid; grid-template-columns: repeat(3, 1fr); padding-block: 26px; border-bottom: 1px solid var(--line); }
.quick-nav a { display: flex; align-items: center; gap: 14px; padding-inline: 24px; border-left: 1px solid var(--line); }
.quick-nav a:first-child { padding-left: 0; border-left: 0; }
.quick-icon { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--soft); color: var(--blue); font-size: var(--font-section-small); }
.quick-nav strong { display: block; font-size: var(--font-small); font-weight: var(--weight-semibold); }
.quick-nav small { font-size: var(--font-caption); color: var(--muted); }
.quick-nav b { margin-left: auto; color: var(--muted); font-size: var(--font-caption); font-weight: var(--weight-medium); }
.topic-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 22px; font-size: var(--font-small); }
.topic-tags > span { margin-right: 8px; color: var(--muted); }
.topic-tags a { padding: 5px 10px; border: 1px solid #dce5f5; border-radius: 5px; background: #f7f9ff; color: #536786; line-height: var(--line-compact); }
.topic-tags a:hover { background: #eaf0ff; border-color: #aebff2; color: var(--blue); }

/* 6. Download cards */
#download { padding-top: 36px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.download-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.download-card { min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, #fbfcff, #fff 50%); }
.card-heading { display: flex; align-items: center; gap: 14px; }
.card-heading > div { min-width: 0; }
.os-icon { flex-shrink: 0; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 13px; background: #edf3ff; color: var(--blue); }
.os-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.card-heading h3 { margin: 0; font-size: var(--font-card-title); letter-spacing: -.015em; }
.card-heading p { margin: 5px 0 0; font-size: var(--font-small); color: var(--muted); }
.device-tag { margin-left: auto; font-size: var(--font-caption); font-weight: var(--weight-semibold); letter-spacing: .04em; color: var(--muted); }
.card-description { margin: 22px 0 16px; min-height: 50px; font-size: var(--font-small); color: var(--muted); }
.specs { margin: 0; font-size: var(--font-small); }
.specs div { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-top: 1px solid var(--line); }
.specs dt { color: var(--muted); flex-shrink: 0; }
.specs dd { margin: 0; text-align: right; color: #45516a; font-variant-numeric: tabular-nums; }
.card-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.card-actions .download-support {
  display: inline-flex; align-items: center; gap: 18px; min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--blue); border-radius: 8px; background: var(--blue); color: #fff;
  font-size: var(--font-small); font-weight: var(--weight-semibold); line-height: var(--line-compact);
}
.card-actions .download-support:hover { background: var(--blue-hover); }
.card-actions a { font-size: var(--font-small); font-weight: var(--weight-semibold); color: var(--blue); }
.inline-note { margin: 16px 0 0; font-size: var(--font-caption); color: var(--muted); }

/* 7. Preparation, steps and FAQ */
.preflight { display: grid; grid-template-columns: 1fr 2.3fr; gap: 40px; padding-block: 36px 48px; border-top: 1px solid var(--line); }
.preflight h2 { font-size: var(--font-section-small); }
.preflight ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.preflight li span { display: block; margin-bottom: 8px; color: var(--blue); font-size: var(--font-caption); }
.preflight strong { font-size: var(--font-small); }
.preflight li p { margin: 6px 0 0; font-size: var(--font-small); color: var(--muted); }
.install-section { background: var(--soft); border-block: 1px solid #e8eefb; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin: 38px 0; padding: 0; list-style: none; }
.step-number { display: flex; align-items: center; gap: 24px; font-size: var(--font-counter); font-weight: var(--weight-semibold); line-height: 1; color: #adc3ff; }
.steps li:not(:last-child) .step-number::after { content: ""; flex: 1; height: 1px; background: #c5d6fa; }
.steps h3 { margin: 18px 0 8px; }
.steps p { margin: 0; font-size: var(--font-small); color: var(--muted); }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; padding-top: 30px; border-top: 1px solid #dbe4f6; }
.guide-grid h3 { margin: 0 0 12px; }
.guide-grid p { margin: 10px 0 0; font-size: var(--font-small); color: var(--muted); }
.faq-section { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; }
.faq-intro p { margin: 20px 0; font-size: var(--font-body); color: var(--muted); }
.text-link { font-size: var(--font-small); color: var(--blue); }
.faq-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { display: flex; justify-content: space-between; gap: 24px; padding-block: 20px; cursor: pointer; list-style: none; font-size: var(--font-body); font-weight: var(--weight-semibold); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex-shrink: 0; color: var(--muted); font-size: var(--font-card-title); font-weight: var(--weight-regular); line-height: 1.2; }
details[open] summary::after { content: "−"; color: var(--blue); }
details p { margin: 0; padding: 0 24px 22px 0; font-size: var(--font-small); color: var(--muted); }

/* 8. Related links, contact strip, footer */
.related { padding-block: 26px 40px; border-top: 1px solid var(--line); }
.related h2 { margin-bottom: 20px; font-size: var(--font-subtitle); letter-spacing: 0; }
.related > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.related a { display: flex; justify-content: space-between; gap: 8px; font-size: var(--font-small); color: var(--muted); }
.related a:hover, .related a span { color: var(--blue); }
.contact-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 36px; padding: 26px 30px; border: 1px solid #e2e9f6; border-radius: var(--radius); background: #f3f6fd; }
.contact-strip h2 { font-size: var(--font-card-title); }
.contact-strip p { margin: 8px 0 0; color: var(--muted); font-size: var(--font-small); }
.contact-strip-account { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; white-space: nowrap; }
.contact-channel { display: grid; grid-template-columns: 36px auto; column-gap: 9px; align-items: center; }
.contact-channel > img, .contact-channel > .strip-santiao { grid-column: 1; grid-row: 1 / 3; }
.contact-channel > span:not(.strip-santiao), .contact-channel > strong { grid-column: 2; }
.contact-channel > span:not(.strip-santiao) { font-size: var(--font-caption); color: var(--muted); }
.contact-channel strong { font-size: var(--font-card-title); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.contact-channel:has(.strip-santiao) { grid-template-columns: 76px auto; }
.strip-channel-logo { width: 32px; height: 32px; border-radius: 8px; }
.contact-strip-account button { min-height: 44px; padding: 10px 14px; border: 0; border-radius: 8px; background: var(--blue); color: #fff; font-size: var(--font-small); }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-block: 28px 36px; border-top: 1px solid var(--line); }
.footer .brand-logo { width: 148px; height: 35px; }
.footer p { margin: 8px 0 0; color: var(--muted); font-size: var(--font-caption); }
.footer nav { display: flex; flex-wrap: wrap; gap: 24px; font-size: var(--font-small); color: var(--muted); }

/* 9. Support panel — same font family and type roles as the page */
.support-widget { position: relative; z-index: 30; }
.support-launcher {
  position: fixed; bottom: 26px; right: 26px; display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 14px 20px; border: 1px solid #4269ff; border-radius: 50px;
  background: var(--blue); color: #fff; box-shadow: 0 7px 25px #244fbf26;
  font-size: var(--font-small); font-weight: var(--weight-semibold);
}
.support-launcher:hover { background: var(--blue-hover); }
.support-launcher svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.support-panel {
  position: fixed; right: 26px; bottom: 98px; width: 372px; max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 125px); overflow: auto; overscroll-behavior: contain;
  border: 1px solid #dce5f4; border-radius: 18px; background: #fff; box-shadow: 0 14px 65px #15234b24;
}
.support-panel:focus { outline: none; }
.support-header { display: flex; align-items: center; gap: 11px; padding: 18px 20px; border-bottom: 1px solid #e6ecf6; background: #f7f9ff; }
.support-header h2 { font-size: var(--font-subtitle); letter-spacing: 0; }
.support-header p { margin: 2px 0 0; font-size: var(--font-caption); color: var(--muted); }
.support-close { flex-shrink: 0; margin-left: auto; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #eaf0fa; color: var(--muted); font-size: var(--font-section-small); line-height: 1; }
.support-body { padding: 18px 20px; }
.support-intro { margin: 0 0 16px; font-size: var(--font-small); color: var(--muted); }
.support-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.support-topics button { flex: 1; min-height: 40px; padding: 7px 8px; border: 1px solid #dce5f5; border-radius: 6px; background: #fff; color: var(--muted); font-size: var(--font-small); white-space: nowrap; }
.support-topics button[aria-pressed="true"] { background: #edf2ff; border-color: #aabdff; color: var(--blue); }
.support-answer { margin: 12px 0 18px; padding: 14px; border-radius: 10px; background: #f6f8fc; font-size: var(--font-small); }
.support-answer strong { font-weight: var(--weight-semibold); }
.support-answer p { margin: 8px 0 10px; color: var(--muted); }
.support-answer a { color: var(--blue); }
.contact-card { padding: 14px; border: 1px solid #dce5ef; border-radius: 11px; }
.santiao-card { margin-top: 12px; }
.contact-label { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: var(--font-small); font-weight: var(--weight-semibold); }
.channel-logo { flex-shrink: 0; object-fit: contain; border-radius: 8px; }
.santiao-logo-frame { display: inline-flex; position: relative; align-items: center; justify-content: center; flex-shrink: 0; width: 76px; height: 44px; overflow: hidden; }
.santiao-logo { width: 76px; height: 76px; max-width: none; object-fit: contain; }
.contact-kind { margin-left: auto; color: var(--muted); font-size: var(--font-caption); font-weight: var(--weight-regular); white-space: nowrap; }
.contact-main { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin: 12px 0 8px; }
.contact-value { font-size: var(--font-account); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; user-select: all; }
[data-copy-contact] { min-height: 40px; padding: 8px 10px; border: 0; border-radius: 7px; background: var(--blue); color: #fff; font-size: var(--font-caption); }
.contact-card p { margin: 0; color: var(--muted); font-size: var(--font-caption); }
.copy-status { min-height: 18px; margin: 8px 0 0; font-size: var(--font-caption); color: var(--blue); }
.support-footnote { margin: 6px 0 0; color: var(--muted); font-size: var(--font-caption); }
.support-noscript { position: fixed; bottom: 20px; right: 20px; max-width: calc(100% - 40px); padding: 10px 16px; border-radius: 30px; background: var(--blue); color: #fff; font-size: var(--font-small); }

/* 10. Responsive overrides — each breakpoint is defined once */
@media (min-width: 1500px) {
  :root { --hero-art-width: 455px; }
  .hero-grid { min-height: 490px; }
}
@media (max-width: 1100px) {
  :root { --page-gutter: 32px; --hero-art-width: 370px; }
  .brand-label, .device-tag { display: none; }
  .brand-logo { width: 155px; height: 37px; }
  .header nav { gap: 24px; }
  .hero-grid { min-height: 460px; gap: 20px; }
  .hero-description br { display: none; }
  .quick-nav a { padding-inline: 16px; }
  .quick-nav b { display: none; }
  .download-card { padding: 24px; }
  .card-heading { gap: 12px; }
  .card-heading h3 { font-size: var(--font-subtitle); }
  .os-icon { width: 44px; height: 44px; }
  .preflight { grid-template-columns: 1fr; gap: 26px; }
  .faq-section { gap: 40px; }
  .contact-strip { flex-direction: column; align-items: flex-start; }
  .contact-strip-account { width: 100%; }
}
@media (max-width: 900px) and (min-width: 761px) {
  :root { --hero-art-width: 305px; }
  .hero-grid { grid-template-columns: 1.25fr 1fr; gap: 0; }
  .actions { gap: 10px; }
  .button { padding-inline: 14px; gap: 12px; }
  .card-actions { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  :root {
    --page-gutter: 20px; --section-space: 44px; --hero-art-width: 245px;
    --font-display: clamp(2rem, 8.7vw, 2.5rem);
    --font-hero-line: clamp(1.375rem, 5.6vw, 1.75rem);
    --font-counter: 2rem;
  }
  .header-inner { height: auto; min-height: 68px; flex-wrap: wrap; padding-block: 12px; gap: 0; }
  .brand-logo { width: 145px; height: 35px; }
  .menu-toggle { margin-left: auto; }
  .js .menu-toggle { display: block; }
  .header nav { order: 4; width: 100%; justify-content: space-between; gap: 0; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
  .header nav a { justify-content: center; flex: 1; min-height: 44px; padding: 8px; }
  .js .header nav { display: none; }
  .js .header nav.is-open { display: flex; }
  .header .active::after { bottom: 0; left: 20%; right: 20%; }
  .breadcrumb { gap: 10px; padding-top: 16px; }
  .hero-grid { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .hero-copy { padding: 24px 0 0; }
  .hero-line { margin: 12px 0 20px; }
  .hero-description { margin-bottom: 24px; }
  .desktop-break { display: none; }
  .actions { gap: 12px; }
  .button { padding: 12px 18px; gap: 16px; }
  .platforms { margin-top: 24px; }
  .hero-art { min-height: 250px; }
  .hero-art img { max-width: 82%; }
  .quick-nav { padding-block: 20px; }
  .quick-nav a { justify-content: center; padding-inline: 8px; gap: 0; }
  .quick-icon, .quick-nav small { display: none; }
  .topic-tags { padding-top: 20px; }
  .topic-tags > span { flex-basis: 100%; }
  #download { padding-top: 32px; }
  .section-head { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 24px; }
  .download-grid { grid-template-columns: 1fr; }
  .card-heading h3 { font-size: var(--font-card-title); }
  .preflight { padding-block: 30px; }
  .preflight ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .steps { grid-template-columns: 1fr; gap: 24px; margin: 28px 0; }
  .steps li { display: grid; grid-template-columns: 42px 1fr; column-gap: 16px; }
  .step-number { grid-row: 1 / 3; align-items: flex-start; }
  .step-number::after { display: none; }
  .steps h3 { margin: 0 0 6px; font-size: var(--font-body); }
  .steps p { grid-column: 2; }
  .steps br { display: none; }
  .guide-grid { grid-template-columns: 1fr; gap: 28px; }
  .faq-section { grid-template-columns: 1fr; gap: 28px; }
  .faq-intro h2 br, .faq-intro p br { display: none; }
  .faq-intro p { margin: 12px 0; }
  .related > div { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .contact-strip { padding: 22px; }
  .contact-strip-account { gap: 18px; }
  .footer { flex-direction: column; align-items: flex-start; padding-bottom: 96px; }
  .footer nav { gap: 20px; }
  .support-launcher { bottom: calc(17px + env(safe-area-inset-bottom)); right: 17px; width: 54px; height: 54px; padding: 15px; border-radius: 50%; }
  .support-launcher span { display: none; }
  .support-panel { right: 12px; left: 12px; bottom: calc(82px + env(safe-area-inset-bottom)); width: auto; max-width: none; max-height: calc(100dvh - 110px); border-radius: 16px; }
  .support-header { padding: 16px 18px; }
  .support-body { padding: 16px 18px; }
}
@media (max-width: 380px) {
  :root { --page-gutter: 16px; }
  .actions { gap: 10px; }
  .button { flex: 1; padding-inline: 10px; gap: 8px; font-size: var(--font-small); }
  .download-card { padding: 20px; }
  .card-heading h3 { font-size: var(--font-subtitle); }
  .quick-nav a { padding-inline: 5px; }
  .quick-nav strong { font-size: var(--font-caption); }
  .support-body { padding-inline: 14px; }
  .contact-kind { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}


/* Batch design: editorial hierarchy, semantic diagrams and four hero compositions. */
:root{--content:1160px;--font-display:clamp(2.5rem,3.45vw,3.15rem);--section-space:64px}
body{overflow-wrap:break-word}
.header-inner{height:80px}.brand-logo{width:174px;height:44px}.brand-label{font-size:14px}
.hero{background:#f5f8ff url('background.webp') center/cover no-repeat;border-bottom:1px solid #e5ecfa}
.hero-grid{grid-template-columns:1.15fr 1fr;min-height:540px;gap:45px}
.hero-copy{padding:42px 0 56px}.hero-copy h1{max-width:720px;line-height:1.3}
.eyebrow{font-size:12px;letter-spacing:.16em;margin-bottom:17px}
.hero-line{font-size:clamp(1.25rem,1.8vw,1.65rem);margin:20px 0 16px;color:#30466b;font-weight:600}
.hero-description{max-width:610px;margin-bottom:26px}.hero-art img{width:520px;max-width:100%;height:auto}
.hero-download-note{font-size:12px;color:#5f6c80;margin:14px 0 0}.actions .secondary{border-color:#a6baee;background:#fff}.hero-art img{filter:saturate(1.08)}
.hero-copy h1 span{display:block}.hero-copy h1 span+span{margin-top:6px}
.hero-art figcaption{font-size:12px;color:#687a99;text-align:center;margin-top:-20px;padding-bottom:24px}
.hero-art{display:block;align-self:center;margin:0}.breadcrumb{font-size:14px}
.quick-nav{padding:25px 0}.quick-nav strong{font-size:14px}.quick-nav small{font-size:12px}
.topic-tags{padding-bottom:12px}.theme-caption{font-size:12px;letter-spacing:.12em;color:var(--blue);font-weight:600;display:block;margin-bottom:10px}
.focus-section{padding-top:48px}.focus-head{display:flex;gap:30px;justify-content:space-between;align-items:end;margin-bottom:25px}.focus-head p{margin:0;color:var(--muted);font-size:14px}
.comparison{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:14px}
.comparison th,.comparison td{padding:21px 24px;text-align:left;border-bottom:1px solid var(--line)}.comparison thead{background:var(--soft);font-size:12px;color:#536b95}.comparison tr:last-child td{border-bottom:0}.comparison td:first-child{font-weight:650;color:#243f70;width:24%}
.route-line{display:flex;list-style:none;padding:0;margin:0;gap:20px}.route-line li{flex:1;min-width:0;padding:25px 22px;border-top:3px solid #315bff;background:#f4f7fe;border-radius:0 0 14px 14px}.route-line b{font-size:28px;color:#7297ee}.route-line h3{margin:17px 0 9px}.route-line p{font-size:14px;color:var(--muted);margin:0}
.decision-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.decision-grid article{display:grid;grid-template-columns:48px 1fr;gap:20px;padding:25px;border:1px solid #d7e2f7;border-radius:14px}.decision-grid article>span{color:var(--blue);font-size:25px;font-weight:650}.decision-grid h3{margin:0 0 8px}.decision-grid p{font-size:14px;color:var(--muted);margin:0}.decision-grid strong{display:block;font-size:14px;color:#315bff;margin-top:10px}
.check-board{display:grid;grid-template-columns:1fr 1fr;gap:0 35px;background:#f4f7ff;padding:12px 30px;border-radius:18px}.check-board article{padding:22px 0;border-bottom:1px solid #dce5f8;display:flex;gap:17px}.check-board article:last-child{border-bottom:0}.check-board .tick{display:grid;place-items:center;flex:0 0 28px;height:28px;border:1px solid #b4c7ed;border-radius:8px;color:#315bff}.check-board h3{margin:0 0 8px;font-size:18px}.check-board p{margin:0;color:var(--muted);font-size:14px}.check-board small{display:block;color:#315bff;font-size:14px;margin-top:6px}
.essay{background:#f6f8fd;border-block:1px solid #e5ecf8}.essay .section-head{margin-bottom:32px}.essay-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}.essay-grid article{min-width:0}.essay-grid h3{font-size:20px;line-height:1.5;margin:14px 0}.essay-grid p{font-size:16px;color:#56657e;margin:0;line-height:1.9}.article-index{font-size:12px;letter-spacing:.12em;color:#315bff}
.essay-stacked .essay-grid{grid-template-columns:1fr}.essay-stacked article{display:grid;grid-template-columns:50px 270px 1fr;gap:24px;align-items:start;padding-bottom:28px;border-bottom:1px solid #dfe7f5}.essay-stacked article:last-child{border:0;padding-bottom:0}.essay-stacked h3{margin:0}.essay-stacked .article-index{padding-top:6px}
.essay-feature .essay-grid{grid-template-columns:1.2fr 1fr}.essay-feature article:first-child{grid-row:span 2;background:#e7efff;padding:30px;border-radius:16px}.essay-feature article:not(:first-child){padding:0 0 20px;border-bottom:1px solid #dce5f6}
.download-card{background:#fff;padding:28px}.download-card h3{font-size:23px}.download-card .card-description{font-size:16px;line-height:1.8;min-height:86px}.os-icon{font-size:22px;font-weight:650}.card-sub{font-size:14px;color:var(--muted);margin:4px 0 0}.download-grid{gap:24px}.card-actions{margin-top:20px}.download-support{min-height:46px}.inline-note{font-size:14px;line-height:1.7}.guide-pair{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:24px}.guide-pair article{padding:22px 25px;background:var(--soft);border-left:3px solid #aac0f6}.guide-pair h3{margin:0 0 12px}.guide-pair p{font-size:14px;color:var(--muted);margin:0}
.faq-section{grid-template-columns:1fr 1.7fr}.faq-intro h2{max-width:300px}.faq-intro p{font-size:14px}.faq-list summary{font-size:16px}.faq-list details p{font-size:16px;line-height:1.85}.source-note{font-size:12px;color:#697994;margin:20px 0 0}.source-note a{text-decoration:underline;text-underline-offset:3px}.contact-strip-account{white-space:normal}.contact-channel strong{white-space:nowrap}
.footer-note{max-width:630px}.footer{padding-bottom:45px}.footer nav{gap:18px}.related>div{grid-template-columns:repeat(3,minmax(0,1fr))}.related .source-note a{display:inline;font-size:inherit;color:inherit}
.layout-reverse .hero-grid{grid-template-columns:1fr 1.15fr}.layout-reverse .hero-art{order:-1}.layout-reverse .hero-copy{padding-left:8px}.layout-reverse .hero{background-color:#f0f5ff}
.layout-editorial .hero-grid{grid-template-columns:1.35fr .85fr;gap:60px;min-height:530px}.layout-editorial .hero-copy{border-left:4px solid #315bff;padding-left:32px;margin:38px 0}.layout-editorial .hero-art{background:#edf3ff;border:1px solid #dce6fa;border-radius:26px}.layout-editorial .hero-art img{padding:6px}.layout-editorial .hero-art figcaption{padding:0 15px 22px;margin:0}.layout-editorial .hero{background-color:#fff}
.layout-banner .hero-grid{grid-template-columns:1.2fr 1fr;gap:55px;min-height:480px;background:#eaf1ff;border:1px solid #dce6fb;border-radius:26px;margin-top:22px;margin-bottom:42px;padding:12px 35px}.layout-banner .hero{background:#fff url('background.webp') center/cover no-repeat}.layout-banner .hero-copy{padding:26px 0}.layout-banner .hero-art img{width:470px}.layout-banner .hero-copy h1{font-size:clamp(2.2rem,3vw,2.9rem)}
@media(min-width:1100px){.layout-editorial .download-grid{grid-template-columns:1.15fr 1fr}.layout-reverse .faq-section{grid-template-columns:1.2fr 2fr}.layout-banner .faq-section{display:block}.layout-banner .faq-intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.layout-banner .faq-intro h2{max-width:none}.layout-banner .faq-intro p{margin:0}}
@media(max-width:1100px){.hero-grid,.layout-editorial .hero-grid,.layout-banner .hero-grid{gap:25px}.brand-label{display:none}.hero-copy h1{font-size:2.5rem}.essay-stacked article{grid-template-columns:35px 210px 1fr;gap:18px}.essay-grid{gap:24px}.contact-strip{align-items:flex-start}.route-line{gap:12px}.route-line li{padding:22px 16px}.layout-banner .hero-grid{padding:20px}.layout-editorial .hero-copy{padding-left:23px}}
@media(max-width:760px){:root{--font-display:clamp(2rem,8vw,2.5rem);--section-space:42px}.header-inner{height:auto}.brand-logo{width:150px;height:38px}.hero-grid,.layout-reverse .hero-grid,.layout-editorial .hero-grid,.layout-banner .hero-grid{grid-template-columns:1fr;gap:4px;min-height:0}.hero-copy,.layout-reverse .hero-copy{padding:28px 0 12px}.hero-copy h1,.layout-banner .hero-copy h1{font-size:clamp(2rem,8vw,2.5rem)}.hero-description{font-size:16px}.hero-line{font-size:21px}.eyebrow{font-size:12px}.hero-art{min-height:0;width:100%;display:grid;justify-items:center}.hero-art img,.layout-banner .hero-art img{width:320px;max-width:100%}.hero-art figcaption{margin:-10px 0 0;padding:0 0 20px}.layout-reverse .hero-art{order:initial}.layout-editorial .hero-copy{margin:25px 0 20px;padding:0 0 0 18px}.layout-editorial .hero-art{width:100%;max-width:390px;justify-self:center;margin:0 0 25px}.layout-editorial .hero-art img{width:300px}.layout-editorial .hero-art figcaption{padding-bottom:16px}.layout-banner .hero-grid{margin-bottom:25px;padding:22px 20px 5px;border-radius:18px}.layout-banner .hero-copy{padding:0}.quick-nav a{gap:0}.quick-nav strong{font-size:14px}.quick-nav b{display:none}.topic-tags{font-size:12px}.focus-head{display:block}.focus-head p{margin-top:10px}.comparison th,.comparison td{padding:16px 12px;font-size:14px}.comparison td:first-child{width:24%}.comparison th{font-size:12px}.route-line{display:grid;grid-template-columns:1fr 1fr;gap:15px}.route-line h3{font-size:18px}.decision-grid{grid-template-columns:1fr}.check-board{grid-template-columns:1fr;padding:6px 22px}.check-board article{padding:20px 0}.essay-grid,.essay-feature .essay-grid{grid-template-columns:1fr}.essay-grid article{padding-bottom:22px;border-bottom:1px solid #dce5f6}.essay-grid article:last-child{padding-bottom:0;border:0}.essay-stacked article{display:block}.essay-stacked h3{margin:10px 0 14px}.essay-feature article:first-child{grid-row:auto;padding:24px}.download-card .card-description{min-height:0}.guide-pair{grid-template-columns:1fr;gap:18px}.faq-section{grid-template-columns:1fr;gap:24px}.faq-intro h2{max-width:none}.faq-list details p{font-size:14px}.related>div{grid-template-columns:1fr}.contact-strip-account{gap:16px}.contact-strip{padding:22px}.footer{padding-bottom:100px}.footer-nav{width:100%}.card-heading{gap:12px}.card-heading h3{font-size:21px}.device-tag{display:none}.focus-section{padding-top:30px}}
@media(max-width:380px){.layout-banner .hero-grid{padding:22px 14px 5px}.route-line{grid-template-columns:1fr}.comparison th,.comparison td{padding:12px 8px}.hero-art img{width:280px}.actions .button{font-size:14px}.hero-copy h1{font-size:32px}.decision-grid article{grid-template-columns:32px 1fr;gap:12px;padding:22px 18px}}