/* 生成物，禁止手改：scripts/build-tokens.mjs 由 C 端冻结原型 v5.20.0 :root 实测派生（别名已解析到字面值，无悬空 var）。深色见 tokens.json#global.color.dark（结构化令牌，原型无 dark CSS 变量名，W7 换肤落地）。 */
:root {
  --color-brand-anchor: #193069;
  --color-brand-anchor-tech: #172E5A;
  --color-brand-green: #31A3A7;
  --color-brand-sky: #3994C9;
  --color-brand-primary: #2E63DC;
  --color-brand-primary-hover: #244FB8;
  --color-brand-primary-active: #1D4097;
  --color-brand-primary-light: #E9EFFC;
  --color-brand-primary-lighter: #F4F7FE;
  --color-brand-sys-blue: #007AFF;
  --color-semantic-surface-default: #FFFFFF;
  --color-semantic-surface-muted: #F5F6F8;
  --color-semantic-surface-subtle: #F0F1F4;
  --color-semantic-surface-inverse: #1F2329;
  --color-semantic-text-primary: #1F2329;
  --color-semantic-text-secondary: #4E5969;
  --color-semantic-text-tertiary: #8A9099;
  --color-semantic-text-inverse: #FFFFFF;
  --color-semantic-text-disabled: #BCC1C9;
  --color-semantic-text-link: #2E63DC;
  --color-semantic-border-default: #EEF0F3;
  --color-semantic-border-strong: #DCDFE4;
  --color-semantic-border-focus: #2E63DC;
  --color-semantic-feedback-success: #34A36C;
  --color-semantic-feedback-warning: #E7A639;
  --color-semantic-feedback-danger: #DB4C29;
  --color-semantic-feedback-info: #2E63DC;
  --color-semantic-tone-ai-base: #31A3A7;
  --color-semantic-tone-ai-deep: #1E8E93;
  --color-semantic-tone-ai-soft: #E2F4F4;
  --color-semantic-tone-family-base: #3994C9;
  --color-semantic-tone-family-deep: #2B7BA8;
  --color-semantic-tone-family-soft: #E7F2FA;
  --color-semantic-tone-success-base: #34A36C;
  --color-semantic-tone-success-deep: #2A8C5C;
  --color-semantic-tone-success-soft: #E4F4EC;
  --color-semantic-tone-warm-base: #E7A639;
  --color-semantic-tone-warm-deep: #C4871E;
  --color-semantic-tone-warm-soft: #FBF1DD;
  --color-semantic-tone-danger-base: #DB4C29;
  --color-semantic-tone-danger-deep: #C43C1E;
  --color-semantic-tone-danger-soft: #FAE9E5;
  --color-semantic-tone-gold-base: #B5975F;
  --color-semantic-tone-gold-deep: #9A7C45;
  --color-semantic-tone-gold-soft: #F3EBDD;
  --color-semantic-overlay-scrim: rgba(31,35,41,.50);
  --color-gradient-brand: linear-gradient(135deg,#193069 0%,#2E5AA8 52%,#31A3A7 120%);
  --color-gradient-warm: linear-gradient(135deg,#E7A639 0%,#C4871E 100%);
  --color-scoped-companion-ear: #BBD3FB;
  --color-scoped-companion-blush: #FFC4CD;
  --font-family-base: -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','PingFang SC','Helvetica Neue','Microsoft YaHei',sans-serif;
  --font-size-tier-standard-caption2: 11px;
  --font-size-tier-standard-caption: 12px;
  --font-size-tier-standard-body-sm: 13px;
  --font-size-tier-standard-subhead: 15px;
  --font-size-tier-standard-body-lg: 16px;
  --font-size-tier-standard-body: 17px;
  --font-size-tier-standard-headline: 17px;
  --font-size-tier-standard-title: 20px;
  --font-size-tier-standard-title2: 22px;
  --font-size-tier-standard-display: 28px;
  --font-size-tier-standard-ltitle: 34px;
  --font-size-tier-elder-caption2: 13px;
  --font-size-tier-elder-caption: 14px;
  --font-size-tier-elder-body-sm: 15px;
  --font-size-tier-elder-subhead: 17px;
  --font-size-tier-elder-body-lg: 18px;
  --font-size-tier-elder-body: 19px;
  --font-size-tier-elder-headline: 19px;
  --font-size-tier-elder-title: 22px;
  --font-size-tier-elder-title2: 24px;
  --font-size-tier-elder-display: 30px;
  --font-size-tier-elder-ltitle: 36px;
  --font-size-tier-elder-xl-caption2: 15px;
  --font-size-tier-elder-xl-caption: 16px;
  --font-size-tier-elder-xl-body-sm: 18px;
  --font-size-tier-elder-xl-subhead: 19px;
  --font-size-tier-elder-xl-body-lg: 22px;
  --font-size-tier-elder-xl-body: 21px;
  --font-size-tier-elder-xl-headline: 21px;
  --font-size-tier-elder-xl-title: 24px;
  --font-size-tier-elder-xl-title2: 28px;
  --font-size-tier-elder-xl-display: 36px;
  --font-size-tier-elder-xl-ltitle: 40px;
  --font-line-height-tight: 1.3;
  --font-line-height-normal: 1.4;
  --font-line-height-relaxed: 1.5;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 26px;
  --radius-full: 9999px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 2px rgba(31,35,41,.05);
  --shadow-md: 0 4px 6px -1px rgba(31,35,41,.08),0 2px 4px -2px rgba(31,35,41,.08);
  --shadow-lg: 0 10px 15px -3px rgba(31,35,41,.10),0 4px 6px -4px rgba(31,35,41,.10);
  --shadow-focus-ring: 0 0 0 3px rgba(46,99,220,.25);
  --z-index-base: 0;
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-fixed: 300;
  --z-index-nav-bar: 300;
  --z-index-tab-bar: 300;
  --z-index-modal: 1000;
  --z-index-mask: 1000;
  --z-index-sheet: 1000;
  --z-index-fullscreen: 1000;
  --z-index-game: 1000;
  --z-index-popover: 1100;
  --z-index-game-overlay: 1100;
  --z-index-tooltip: 1200;
  --z-index-toast: 1300;
  --z-index-global-error: 1400;
  --motion-duration-fast: 150ms;
  --motion-duration-normal: 250ms;
  --motion-duration-slow: 400ms;
  --motion-easing-standard: cubic-bezier(.4,0,.2,1);
  --motion-easing-accelerate: cubic-bezier(.4,0,1,1);
  --motion-easing-decelerate: cubic-bezier(0,0,.2,1);
  --safe-t: env(safe-area-inset-top,0px);
  --safe-b: env(safe-area-inset-bottom,0px);
  --brand: #193069;
  --brand-tech: #172E5A;
  --primary: #2E63DC;
  --primary-pressed: #244FB8;
  --primary-active: #1D4097;
  --primary-soft: #E9EFFC;
  --primary-softer: #F4F7FE;
  --ai: #31A3A7;
  --ai-deep: #1E8E93;
  --ai-soft: #E2F4F4;
  --family: #3994C9;
  --family-deep: #2B7BA8;
  --family-soft: #E7F2FA;
  --success: #34A36C;
  --success-deep: #2A8C5C;
  --success-soft: #E4F4EC;
  --warm: #E7A639;
  --warm-deep: #C4871E;
  --warm-soft: #FBF1DD;
  --danger: #DB4C29;
  --danger-deep: #C43C1E;
  --danger-soft: #FAE9E5;
  --gold: #B5975F;
  --gold-deep: #9A7C45;
  --gold-soft: #F3EBDD;
  --bg: #F5F6F8;
  --surface: #fff;
  --surface-2: #F0F1F4;
  --ink: #1F2329;
  --ink-2: #4E5969;
  --sub: #8A9099;
  --disabled: #BCC1C9;
  --line: #EEF0F3;
  --line-strong: #DCDFE4;
  --grad-brand: linear-gradient(135deg,#193069 0%,#2E5AA8 52%,#31A3A7 120%);
  --grad-warm: linear-gradient(135deg,#E7A639 0%,#C4871E 100%);
  --scrim: rgba(31,35,41,.50);
  --font-caption2: 11px;
  --font-caption: 12px;
  --font-sm: 13px;
  --font-subhead: 15px;
  --font-lg: 16px;
  --font-body: 17px;
  --font-headline: 17px;
  --font-title: 20px;
  --font-title2: 22px;
  --font-display: 28px;
  --font-ltitle: 34px;
  --lh-tight: 1.3;
  --lh-normal: 1.4;
  --lh-relaxed: 1.5;
  --cxs-med: #2E63DC;
  --cxs-med-soft: #E9EFFC;
  --cxs-home: #C4871E;
  --cxs-home-soft: #FBF1DD;
  --cxs-emo: #1E8E93;
  --cxs-emo-soft: #E2F4F4;
  --cxs-travel: #2B7BA8;
  --cxs-travel-soft: #E7F2FA;
  --cxs-price: #C4871E;
}

:root{--font-family-web:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;--font-site-caption:12px;--font-site-small:14px;--font-site-body:16px;--font-site-h4:18px;--font-site-h3:24px;--font-site-h2:36px;--font-site-h1:48px;--layout-site-max:1200px;--layout-hero-min-height:680px;--site-footer-bg:#0F131A;--site-footer-surface:#171C24;--site-hero-deep:#0F131A;--site-hero-mid:#172E5A;--site-hero-primary:#2E63DC;--site-on-dark:#E9ECF1;--site-on-dark-muted:#B8BFC9;--site-on-dark-sub:#98A0AB;--site-line-dark:#38404C}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --font-site-h1: clamp(1.375rem, 0.7rem + 3.2vw, 3.25rem);
  --font-site-h2: clamp(1.0625rem, 0.65rem + 2vw, 2rem);
  --font-site-h3: clamp(0.9375rem, 0.85rem + 0.55vw, 1.5rem);
  --font-site-lead: clamp(0.875rem, 0.82rem + 0.28vw, 1.125rem);
}

html {
  overflow-x: clip;
  scroll-behavior: auto;
  font-family: var(--font-family-web, var(--font-family-base));
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.7;
}

.site {
  min-height: 100vh;
  color: var(--color-semantic-text-primary);
  background: var(--color-semantic-surface-default);
  font-family: var(--font-family-web, var(--font-family-base));
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.container {
  max-width: var(--layout-site-max);
  margin: 0 auto;
  padding: 0 var(--spacing-6);
}

/* —— 顶栏：始终透明。深色班纳盖住时浅字，其余深字。菜单展开时才铺实底。 —— */
.navbar {
  position: relative;
  z-index: var(--z-index-fixed);
  background: transparent;
  box-shadow: none;
  transition:
    background var(--motion-duration-normal, 0.3s) ease,
    box-shadow var(--motion-duration-normal, 0.3s) ease;
}

.navbar.is-menu-open {
  background: color-mix(in srgb, var(--color-semantic-surface-default) 95%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-sm);
}

.navbar-inner {
  max-width: var(--layout-site-max);
  margin: 0 auto;
  padding: 0 var(--spacing-6);
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
  height: calc(var(--spacing-12) + var(--spacing-4));
}

.logo {
  display: flex;
  align-items: flex-end;
  align-self: flex-end;
  min-width: 0;
  height: 100%;
}

/* Keep the whole wordmark inside the bar. Zooming the ink to the bar edge clips the round emblem. */
.logo-img {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: left bottom;
  transition: none;
}

.site-footer .footer-logo {
  display: flex;
  align-items: flex-end;
  height: calc(var(--font-site-small, var(--font-caption)) * 1.8 * 2);
  max-width: 100%;
}

.site-footer .logo-img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: left bottom;
}

.logo-img-dark {
  display: none;
}

.navbar .logo-img-dark {
  display: none;
}

.logo-icon {
  width: calc(var(--spacing-8) + var(--spacing-1));
  height: calc(var(--spacing-8) + var(--spacing-1));
  border-radius: var(--radius-md);
  background: var(--color-gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-semantic-text-inverse);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-site-h4, var(--font-lg));
}

.nav-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--spacing-1);
  flex: 1;
  justify-content: center;
  min-width: 0;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-1);
  width: var(--spacing-10);
  height: var(--spacing-10);
  margin-left: auto;
  padding: var(--spacing-2);
}

.menu-toggle span {
  display: block;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--color-semantic-text-primary);
}

.navbar.is-overlay .menu-toggle span {
  background: var(--color-semantic-text-inverse);
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: clamp(0.9375rem, 0.85rem + 0.25vw, 1.125rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.5;
  color: var(--color-semantic-text-primary);
  border-radius: var(--radius-sm);
  transition:
    color var(--motion-duration-fast, 0.2s) ease,
    background var(--motion-duration-fast, 0.2s) ease;
}

.nav-link:hover {
  color: var(--color-brand-primary);
  background: var(--color-brand-primary-light);
}

.navbar.is-overlay .nav-link {
  color: color-mix(in srgb, var(--color-semantic-text-inverse) 90%, transparent);
  background: transparent;
}

.navbar.is-overlay .nav-link:hover {
  color: var(--color-semantic-text-inverse);
  background: transparent;
}

.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown {
  display: block;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 12rem;
  padding: var(--spacing-2);
  background: var(--color-semantic-surface-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, 0.12));
  z-index: 20;
}

.dropdown-item {
  display: block;
  padding: var(--spacing-2) var(--spacing-3);
  font-size: clamp(0.875rem, 0.8rem + 0.15vw, 1rem);
  color: var(--color-semantic-text-primary);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.dropdown-item:hover {
  background: var(--color-brand-primary-light);
  color: var(--color-brand-primary);
}

.btn-console {
  flex-shrink: 0;
  padding: var(--spacing-2) var(--spacing-5);
  font-size: var(--font-site-body, var(--font-sm));
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-brand-primary);
  border: 1px solid var(--color-brand-primary);
  border-radius: var(--radius-full);
  transition:
    color var(--motion-duration-fast, 0.2s) ease,
    background var(--motion-duration-fast, 0.2s) ease,
    border-color var(--motion-duration-fast, 0.2s) ease;
}

.btn-console:hover {
  background: var(--color-brand-primary);
  color: var(--color-semantic-text-inverse);
}

.navbar.is-overlay .btn-console {
  color: var(--color-semantic-text-inverse);
  background: transparent;
  border-color: color-mix(in srgb, var(--color-semantic-text-inverse) 60%, transparent);
}

.navbar.is-overlay .btn-console:hover {
  background: var(--color-semantic-text-inverse);
  color: var(--color-brand-primary);
}

.site-main {
  padding-top: 0;
}

.site-main:has(> .block[data-block-type='hero'][data-hero='home']:first-child),
.site-main:has(> .block[data-block-type='carousel']:first-child),
.site-main:has(> .block[data-layout='banner']:first-child) {
  padding-top: 0;
}

.site-main > .block[data-block-type='carousel']:first-child .frames {
  min-height: 0;
}

.site-main > .block[data-block-type='carousel']:first-child {
  padding-bottom: var(--spacing-10);
}

/* —— 区块通用 —— */
.block {
  padding: var(--spacing-10) 0;
}

.block[data-block-type='cards'],
.block[data-block-type='faq'],
.block[data-block-type='contact'] {
  padding-top: var(--spacing-12);
  padding-bottom: var(--spacing-12);
  background: var(--color-semantic-surface-muted);
}

.block > .container,
.block > .cols,
.block > .media,
.block > .carousel,
.block > .cta,
.block > .rich,
.block > form,
.block > .empty-state,
.block > .jobs,
.block > details {
  max-width: var(--layout-site-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
}

.block > .jobs {
  max-width: 48rem;
  padding-left: 0;
  padding-right: 0;
}

.jobs {
  list-style: none;
  margin: 0;
  border: 1px solid var(--color-semantic-border-default);
  border-radius: var(--radius-xl, var(--radius-lg));
  background: var(--color-semantic-surface-default);
  overflow: hidden;
}

.jobs li + li {
  border-top: 1px solid var(--color-semantic-border-default);
}

.job-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-6);
  padding: var(--spacing-5) var(--spacing-6);
  color: inherit;
  text-decoration: none;
}

.job-row:hover {
  background: color-mix(in srgb, var(--color-brand-primary-light) 45%, var(--color-semantic-surface-default));
}

.job-row-main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  min-width: 0;
  text-align: left;
}

.job-row-title {
  color: var(--color-semantic-text-primary);
  font-size: var(--font-site-h4, var(--font-body));
  font-weight: var(--font-weight-bold, 700);
}

.job-row-meta {
  color: var(--color-semantic-text-secondary);
  font-size: var(--font-site-body, var(--font-sm));
}

.job-row .card-link {
  flex: 0 0 auto;
  margin-top: 0;
  padding-top: 0;
}

.section-header {
  max-width: var(--layout-site-max);
  margin: 0 auto var(--spacing-8);
  padding: 0 var(--spacing-6);
  text-align: center;
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-4);
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-site-body, var(--font-sm));
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-brand-primary);
  background: var(--color-brand-primary-light);
  border-radius: var(--radius-full);
}

.section-tag::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
}

.section-desc {
  margin: var(--spacing-4) auto 0;
  max-width: 40rem;
  font-size: var(--font-site-lead, var(--font-site-body));
  line-height: 1.7;
  color: var(--color-semantic-text-secondary);
}

.site[data-page='product'] .section-desc,
.site[data-page='product-family'] .section-desc {
  max-width: none;
}

.block-title {
  margin: 0 auto;
  max-width: var(--layout-site-max);
  color: var(--color-semantic-text-primary);
  font-size: var(--font-site-h2, var(--font-ltitle));
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.02em;
}

.section-header .block-title {
  margin-top: 0;
}

.card-link {
  display: inline-block;
  margin-top: auto;
  padding-top: var(--spacing-4);
  font-size: var(--font-site-body, var(--font-sm));
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-brand-primary);
}

/* —— Hero：封版全幅渐变 —— */
.block[data-block-type='hero'] {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--color-semantic-text-inverse);
  background: linear-gradient(
    135deg,
    var(--site-hero-deep) 0%,
    var(--site-hero-mid) 35%,
    var(--color-brand-anchor) 70%,
    var(--site-hero-primary) 100%
  );
}

.block[data-block-type='hero'][data-hero='home'] {
  min-height: var(--layout-hero-min-height);
  display: flex;
  align-items: center;
}

.block[data-block-type='hero'][data-hero='page'] {
  padding: calc(var(--spacing-12) * 2) 0 calc(var(--spacing-12) + var(--spacing-4));
  text-align: center;
}

.block[data-block-type='hero']::before,
.block[data-block-type='hero']::after {
  content: '';
  position: absolute;
  border-radius: var(--radius-full);
  pointer-events: none;
}

.block[data-block-type='hero']::before {
  top: -30%;
  right: -10%;
  width: calc(var(--spacing-12) * 14);
  height: calc(var(--spacing-12) * 14);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--color-brand-sky) 25%, transparent) 0%,
    transparent 60%
  );
}

.block[data-block-type='hero']::after {
  bottom: -40%;
  left: -5%;
  width: calc(var(--spacing-12) * 12);
  height: calc(var(--spacing-12) * 12);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--color-brand-primary) 20%, transparent) 0%,
    transparent 60%
  );
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--color-semantic-text-inverse) 3%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-semantic-text-inverse) 3%, transparent) 1px,
      transparent 1px
    );
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--layout-site-max);
  width: 100%;
  margin: 0 auto;
  padding: var(--spacing-10) var(--spacing-6);
}

.block[data-block-type='hero'][data-hero='home'] .hero-content {
  max-width: 45rem;
  margin-left: var(--spacing-6);
  margin-right: auto;
  padding-left: 0;
  padding-right: var(--spacing-6);
  width: 100%;
  text-align: left;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-6);
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-site-body, var(--font-sm));
  color: color-mix(in srgb, var(--color-semantic-text-inverse) 92%, transparent);
  background: color-mix(in srgb, var(--color-semantic-text-inverse) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-semantic-text-inverse) 18%, transparent);
  border-radius: var(--radius-full);
}

.hero-badge .dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--radius-full);
  background: var(--color-semantic-feedback-success);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-semantic-feedback-success) 80%, transparent);
}

.hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  margin-top: var(--spacing-8);
}

.hero-btns .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-8);
  font-size: var(--font-site-h4, var(--font-body));
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-brand-primary);
  background: var(--color-semantic-text-inverse);
  border-radius: var(--radius-full);
}

.block[data-block-type='hero'] h1 {
  margin: 0 0 var(--spacing-6);
  font-size: var(--font-site-h1, var(--font-ltitle));
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  color: var(--color-semantic-text-inverse);
  letter-spacing: -0.02em;
}

.block[data-block-type='hero'] h1 .highlight {
  background: linear-gradient(
    100deg,
    var(--color-semantic-text-inverse) 0%,
    var(--color-brand-primary-light) 46%,
    var(--color-brand-sky) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.block[data-block-type='hero'][data-hero='page'] h1 {
  font-size: clamp(1.125rem, 0.9rem + 1.1vw, 2rem);
}

.block[data-block-type='hero'] p {
  margin: 0;
  max-width: 35rem;
  font-size: var(--font-site-lead, var(--font-site-body));
  line-height: 1.8;
  color: color-mix(in srgb, var(--color-semantic-text-inverse) 88%, transparent);
}

.block[data-block-type='hero'][data-hero='page'] p {
  margin-left: auto;
  margin-right: auto;
}

/* —— 图文 / 卡片 —— */
.cols,
.media {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-6);
}

.cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--spacing-6);
}

.cols[data-columns='1'] {
  grid-template-columns: 1fr;
}

.cols[data-columns='3'] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cols[data-columns='4'] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-6);
}

.site[data-page='careers'] .block[data-block-type='cards'] .card p {
  white-space: nowrap;
}

.media[data-side='right'] {
  flex-direction: row-reverse;
}

.media-figure,
.media-copy {
  flex: 1 1 16rem;
  min-width: 0;
}

.media-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 11rem;
  padding: var(--spacing-8);
  background: linear-gradient(
    135deg,
    var(--color-brand-primary-light) 0%,
    color-mix(in srgb, var(--color-brand-primary-light) 70%, var(--color-brand-sky)) 100%
  );
  border-radius: var(--radius-xl, var(--radius-lg));
}

.media-figure img {
  width: min(100%, 10rem);
  height: auto;
}

.media-copy h2 {
  margin: 0 0 var(--spacing-3);
  color: var(--color-semantic-text-primary);
  font-size: var(--font-site-h3, var(--font-title));
}

a.card {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a.card .card-link {
  color: var(--color-brand-primary);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-semantic-border-default);
  border-radius: var(--radius-xl, var(--radius-lg));
  padding: var(--spacing-6);
  background: var(--color-semantic-surface-default);
  box-shadow: var(--shadow-card, var(--shadow-sm));
  text-align: center;
  transition:
    transform var(--motion-duration-normal, 0.3s) ease,
    box-shadow var(--motion-duration-normal, 0.3s) ease,
    border-color var(--motion-duration-normal, 0.3s) ease;
}

.cols[data-columns='2'] .card,
.cols[data-columns='3'] .card {
  text-align: left;
}

.site[data-page='partner'] .card {
  align-items: center;
  text-align: center;
}

.card:hover {
  transform: translateY(-2px);
  border-color: var(--color-semantic-border-strong);
  box-shadow: var(--shadow-md);
}

.card h3,
.frame h3 {
  margin: 0 0 var(--spacing-3);
  color: var(--color-semantic-text-primary);
  font-size: var(--font-site-h3, var(--font-title));
  position: relative;
  z-index: 1;
}

.card h3 {
  font-size: var(--font-site-h3, 1rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.4;
}

.card h3 a {
  color: var(--color-brand-primary);
}

.card p,
.frame p,
.media-copy p,
.rich p {
  margin: 0;
  color: var(--color-semantic-text-secondary);
  font-size: var(--font-site-body, var(--font-sm));
  line-height: 1.75;
  position: relative;
  z-index: 1;
}

.cols[data-columns='4'] .card {
  padding: var(--spacing-6);
}

.site[data-page='product'] .cols[data-columns='3'],
.site[data-page='product'] .cols[data-columns='4'] {
  gap: var(--spacing-6);
}

.flow {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-1);
  max-width: var(--layout-site-max);
  margin: 0 auto;
  padding: 0 var(--spacing-6);
  list-style: none;
}

.flow-step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: var(--spacing-4) var(--spacing-6) var(--spacing-4) var(--spacing-8);
  text-align: center;
  background: var(--color-brand-primary-light);
  color: var(--color-brand-primary);
  clip-path: polygon(
    0 0,
    calc(100% - var(--spacing-4)) 0,
    100% 50%,
    calc(100% - var(--spacing-4)) 100%,
    0 100%,
    var(--spacing-4) 50%
  );
}

.flow-step:first-child {
  padding-left: var(--spacing-4);
  clip-path: polygon(
    0 0,
    calc(100% - var(--spacing-4)) 0,
    100% 50%,
    calc(100% - var(--spacing-4)) 100%,
    0 100%
  );
}

.flow-step:last-child {
  background: var(--color-brand-primary);
  color: var(--color-semantic-text-inverse);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--spacing-4) 50%);
}

.flow-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-1);
}

.flow-index {
  font-size: var(--font-site-body, var(--font-sm));
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.flow-step h3 {
  margin: 0;
  color: inherit;
  font-size: var(--font-site-body, var(--font-sm));
  font-weight: var(--font-weight-semibold, 600);
}

.flow-step p {
  margin: 0;
  color: inherit;
  font-size: var(--font-site-body, var(--font-sm));
  line-height: 1.5;
}

.timeline {
  position: relative;
  max-width: var(--layout-site-max);
  margin: 0 auto;
  padding: 0 var(--spacing-6) 0 calc(var(--spacing-8) + var(--spacing-6));
}

.block[data-layout='timeline'] .section-header {
  text-align: left;
}

.timeline::before {
  content: '';
  position: absolute;
  left: calc(var(--spacing-6) + var(--spacing-2));
  top: var(--spacing-2);
  bottom: var(--spacing-2);
  width: 2px;
  background: var(--color-brand-primary-light);
}

.timeline-item {
  position: relative;
  margin-bottom: var(--spacing-8);
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--spacing-8) + var(--spacing-1));
  top: calc(var(--spacing-1) + 2px);
  width: calc(var(--spacing-3) + 2px);
  height: calc(var(--spacing-3) + 2px);
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  border: 3px solid var(--color-semantic-surface-default);
  box-shadow: 0 0 0 2px var(--color-brand-primary-light);
}

.timeline-item .year {
  margin-bottom: var(--spacing-2);
  color: var(--color-brand-primary);
  font-size: var(--font-site-body, var(--font-sm));
  font-weight: var(--font-weight-bold);
}

.timeline-item h3 {
  margin: 0 0 var(--spacing-2);
  color: var(--color-semantic-text-primary);
  font-size: var(--font-site-h3, var(--font-title));
  font-weight: var(--font-weight-semibold, 600);
}

.timeline-item p {
  margin: 0;
  color: var(--color-semantic-text-secondary);
  font-size: var(--font-site-body, var(--font-sm));
  line-height: 1.6;
}

.credential-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-6);
  max-width: var(--layout-site-max);
  margin: 0 auto;
  padding: 0 var(--spacing-6);
}

.credential {
  padding: var(--spacing-6);
  text-align: center;
  background: var(--color-semantic-surface-default);
  border: 1px solid var(--color-semantic-border-default);
  border-radius: var(--radius-xl, var(--radius-lg));
}

.credential-frame {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 var(--spacing-4);
  padding: var(--spacing-2);
  overflow: visible;
  color: var(--color-semantic-text-secondary);
  background: var(--color-semantic-surface-sunken, var(--color-semantic-surface-muted, var(--color-brand-primary-light)));
  border: 0;
  border-radius: var(--radius-lg);
  font: inherit;
  cursor: zoom-in;
}

.credential-frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 7.5rem;
  margin: 0 auto;
  object-fit: contain;
}

.cert-viewer {
  width: min(56rem, calc(100vw - var(--spacing-8)));
  max-height: calc(100vh - var(--spacing-8));
  margin: auto;
  padding: var(--spacing-4);
  border: 0;
  background: transparent;
}

.cert-viewer::backdrop {
  background: color-mix(in srgb, var(--color-semantic-text-primary) 45%, transparent);
}

.cert-viewer img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - var(--spacing-16));
  margin: 0 auto;
  object-fit: contain;
  background: var(--color-semantic-surface-default);
}

.cert-viewer-close {
  display: block;
  margin: 0 0 var(--spacing-3) auto;
  padding: var(--spacing-2) var(--spacing-4);
  color: var(--color-semantic-text-primary);
  background: var(--color-semantic-surface-default);
  border: 0;
  border-radius: var(--radius-md);
  font: inherit;
  cursor: pointer;
}

.credential h3 {
  margin: 0;
  font-size: var(--font-site-body, var(--font-sm));
}

.credential p,
.credential-empty {
  margin: var(--spacing-2) 0 0;
  color: var(--color-semantic-text-secondary);
  font-size: var(--font-site-small, var(--font-caption));
}

/* —— 轮播班纳：整幅图铺满 —— */
.block[data-block-type='carousel'] {
  padding: 0;
}

.block > .carousel {
  max-width: none;
  margin: 0;
  padding: 0;
}

.block[data-layout='banner'] {
  padding: 0 0 var(--spacing-10);
}

.page-banner {
  position: relative;
  max-width: none;
  margin: 0;
  height: auto;
  aspect-ratio: 16 / 7;
  min-height: 0;
  overflow: hidden;
  background: var(--color-brand-anchor);
}

.page-banner::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: calc((var(--spacing-12) + var(--spacing-4)) * 3);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-brand-anchor) 92%, transparent) 0,
    color-mix(in srgb, var(--color-brand-anchor) 84%, transparent) calc(var(--spacing-12) + var(--spacing-4)),
    transparent
  );
  pointer-events: none;
}

.page-banner img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.carousel {
  position: relative;
  display: grid;
  background: var(--color-brand-anchor);
}

.frames {
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 7;
  min-height: 0;
  overflow: hidden;
}

.frames .frame {
  grid-area: 1 / 1;
  min-height: 0;
  margin: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.frames .frame a {
  position: relative;
  display: block;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  color: var(--color-semantic-text-inverse);
  text-decoration: none;
}

.frames .frame a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-brand-anchor) 62%, transparent) 0%,
    transparent 58%
  );
}

.frames .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  background: var(--color-brand-anchor);
}

.frames .frame figcaption {
  position: absolute;
  z-index: 1;
  left: max(var(--spacing-6), calc((100% - var(--layout-site-max)) / 2 + var(--spacing-6)));
  bottom: calc(var(--spacing-12) + var(--spacing-4));
  max-width: min(36rem, calc(100% - var(--spacing-12)));
}

.frames .frame .frame-badge {
  display: inline-flex;
  margin-bottom: var(--spacing-3);
  padding: var(--spacing-1) var(--spacing-3);
  color: var(--color-semantic-text-inverse);
  background: color-mix(in srgb, var(--color-brand-anchor) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-semantic-text-inverse) 35%, transparent);
  border-radius: var(--radius-full);
  font-size: var(--font-site-body, var(--font-sm));
}

.frames .frame figcaption h3 {
  margin: 0 0 var(--spacing-3);
  color: var(--color-semantic-text-inverse);
  font-size: var(--font-site-h1, var(--font-display));
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--color-brand-anchor) 40%, transparent);
}

.frames .frame figcaption h3 .highlight {
  color: var(--color-semantic-text-inverse);
}

.frames .frame figcaption p {
  margin: 0;
  color: color-mix(in srgb, var(--color-semantic-text-inverse) 92%, transparent);
  font-size: var(--font-site-lead, var(--font-site-body));
  line-height: 1.7;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--color-brand-anchor) 40%, transparent);
}

.frames .frame:not(:first-child) {
  display: none;
}

.carousel .dots {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: var(--spacing-4);
  display: flex;
  gap: var(--spacing-2);
  transform: translateX(-50%);
}

.carousel .dots button {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-semantic-text-inverse) 45%, transparent);
}

.carousel .dots button[aria-current='true'] {
  width: 1.4rem;
  background: var(--color-semantic-text-inverse);
}

.carousel [data-pause] {
  position: absolute;
  z-index: 2;
  right: var(--spacing-4);
  bottom: var(--spacing-4);
  display: grid;
  place-items: center;
  width: var(--spacing-10);
  height: var(--spacing-10);
  padding: 0;
  color: var(--color-semantic-text-inverse);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-semantic-text-inverse) 70%, transparent);
  border-radius: var(--radius-full);
}

.carousel .pause-icon {
  display: flex;
  gap: var(--spacing-1);
  width: 0.7rem;
  height: 0.75rem;
}

.carousel .pause-icon::before,
.carousel .pause-icon::after {
  content: '';
  flex: 1;
  background: currentColor;
  border-radius: 1px;
}

.carousel [data-pause][data-state='play'] .pause-icon {
  width: 0;
  height: 0;
  gap: 0;
  border-style: solid;
  border-width: 0.38rem 0 0.38rem 0.62rem;
  border-color: transparent transparent transparent currentColor;
}

.carousel [data-pause][data-state='play'] .pause-icon::before,
.carousel [data-pause][data-state='play'] .pause-icon::after {
  content: none;
}

/* —— CTA：独立白底带，和上方灰底卡片区分开 —— */
.block[data-block-type='cta'] {
  background: var(--color-semantic-surface-default);
  padding: calc(var(--spacing-12) + var(--spacing-8)) 0;
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-6);
  max-width: var(--layout-site-max);
  margin: 0 auto;
  padding: 0 var(--spacing-6);
  position: relative;
  z-index: 1;
}

.cta-content {
  max-width: 40rem;
}

.cta-title {
  margin: 0 0 var(--spacing-4);
  color: var(--color-semantic-text-primary);
  font-size: var(--font-site-h2, var(--font-ltitle));
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

.cta-lead,
.cta p {
  margin: 0;
  max-width: 35rem;
  color: var(--color-semantic-text-secondary);
  font-size: var(--font-site-lead, var(--font-site-body));
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.7;
}

.cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  justify-content: center;
  margin-top: var(--spacing-6);
}

.block[data-block-type='cta'] a,
.block[data-block-type='cta'] button.btn-primary,
.empty-state a,
.jobs + p a,
.empty + p a {
  display: inline-block;
  padding: calc(var(--spacing-3) + 2px) calc(var(--spacing-8) + var(--spacing-1));
  color: var(--color-semantic-text-inverse);
  background: var(--color-semantic-text-primary);
  border: 0;
  border-radius: var(--radius-lg);
  font: inherit;
  font-weight: var(--font-weight-semibold, 600);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.block[data-block-type='cta'] .btn-outline-light {
  color: var(--color-semantic-text-primary);
  background: transparent;
  border: 1px solid var(--color-semantic-border-default);
  box-shadow: none;
}

.block[data-block-type='cta'] a:hover,
.block[data-block-type='cta'] button.btn-primary:hover {
  transform: translateY(-2px);
}

/* —— 扫码咨询弹层 —— */
.scan-dialog {
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl, var(--radius-lg));
  background: transparent;
  max-width: calc(100vw - var(--spacing-8));
}

.scan-dialog::backdrop {
  background: color-mix(in srgb, var(--color-semantic-text-primary) 45%, transparent);
}

.scan-dialog-panel {
  width: min(22rem, 100%);
  padding: var(--spacing-8);
  background: var(--color-semantic-surface-default);
  border-radius: var(--radius-xl, var(--radius-lg));
  box-shadow: var(--shadow-lg, var(--shadow-md));
  text-align: center;
}

.scan-dialog-title {
  margin: 0 0 var(--spacing-4);
  color: var(--color-semantic-text-primary);
  font-size: var(--font-site-h3, var(--font-title));
  font-weight: 700;
}

.scan-dialog-body {
  display: grid;
  gap: var(--spacing-4);
  justify-items: center;
  color: var(--color-semantic-text-secondary);
  font-size: var(--font-site-h4, var(--font-body));
  line-height: 1.6;
}

.scan-dialog-body p {
  margin: 0;
}

.scan-dialog-qr {
  margin: 0;
}

.scan-dialog-qr img {
  display: block;
  width: calc(var(--spacing-12) * 4);
  height: calc(var(--spacing-12) * 4);
  object-fit: contain;
  border: 1px solid var(--color-semantic-border-default);
  border-radius: var(--radius-md);
  padding: var(--spacing-2);
  background: var(--color-semantic-surface-default);
}

.scan-dialog-qr figcaption {
  margin-top: var(--spacing-3);
  font-size: var(--font-site-body, var(--font-sm));
  color: var(--color-semantic-text-secondary);
}

.scan-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  justify-content: center;
  margin-top: var(--spacing-6);
}

.scan-dialog-actions .btn-primary,
.scan-dialog-body > .btn-primary {
  display: inline-block;
  padding: var(--spacing-3) var(--spacing-6);
  color: var(--color-semantic-text-inverse);
  background: var(--color-brand-primary);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold, 600);
  text-decoration: none;
}

.scan-dialog-actions .btn-outline-light {
  display: inline-block;
  padding: var(--spacing-3) var(--spacing-6);
  color: var(--color-semantic-text-primary);
  background: transparent;
  border: 1px solid var(--color-semantic-border-default);
  border-radius: var(--radius-lg);
  font: inherit;
  cursor: pointer;
}

/* —— 表单 —— */
form[data-lead] {
  display: grid;
  gap: var(--spacing-4);
  max-width: 28rem;
}

form[data-lead] label {
  display: grid;
  gap: var(--spacing-2);
  color: var(--color-semantic-text-primary);
  font-size: var(--font-site-body, var(--font-sm));
}

form[data-lead] .field {
  display: grid;
  gap: var(--spacing-2);
}

form[data-lead] input,
form[data-lead] textarea {
  width: 100%;
  padding: var(--spacing-3);
  color: var(--color-semantic-text-primary);
  background: var(--color-semantic-surface-default);
  border: 1px solid var(--color-semantic-border-default);
  border-radius: var(--radius-md);
  font: inherit;
}

form[data-lead] input:focus,
form[data-lead] textarea:focus {
  outline: 2px solid var(--color-brand-primary-light);
  border-color: var(--color-brand-primary);
}

form[data-lead] input[aria-invalid='true'],
form[data-lead] textarea[aria-invalid='true'] {
  border-color: var(--color-semantic-tone-danger-base);
}

form[data-lead] .field-error {
  margin: 0;
  color: var(--color-semantic-tone-danger-base);
  font-size: var(--font-site-small, var(--font-caption));
}

form[data-lead] button[disabled] {
  cursor: progress;
  opacity: 0.7;
}

.block[data-block-type='prose'] .rich {
  max-width: 40rem;
  text-align: center;
}

.block[data-prose='wide'] .rich {
  max-width: var(--layout-site-max);
  text-align: left;
}

.block[data-prose='wide'] .rich p {
  margin: 0 0 var(--spacing-5);
}

.block[data-prose='wide'] .rich p:first-child {
  margin-bottom: var(--spacing-8);
  color: var(--color-semantic-text-primary);
  font-size: var(--font-site-h3, var(--font-title));
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.5;
  text-align: center;
}

.site[data-page='product'] .block[data-prose='wide'] .rich p:first-child,
.site[data-page='product-family'] .block[data-prose='wide'] .rich p:first-child,
.site[data-page='product-hardware'] .block[data-prose='wide'] .rich p:first-child,
.site[data-page='product-digital'] .block[data-prose='wide'] .rich p:first-child,
.site[data-page='partners-city'] .block[data-prose='wide'] .rich p:first-child,
.site[data-page='partners-org'] .block[data-prose='wide'] .rich p:first-child,
.site[data-page='partners-enterprise'] .block[data-prose='wide'] .rich p:first-child,
.site[data-page='partner'] .block[data-prose='wide'] .rich p:first-child {
  margin-bottom: 0;
}

.block[data-prose='wide'] .rich p:not(:first-child) {
  padding-left: var(--spacing-5);
  border-left: 2px solid var(--color-brand-primary-light);
}

.block[data-block-type='prose'] .rich p,
.block[data-block-type='legal'] .rich p {
  font-size: var(--font-site-h4, var(--font-body));
  line-height: 1.7;
}

.block[data-block-type='legal'] .rich {
  max-width: var(--layout-site-max);
  margin: 0 auto;
  text-align: left;
}

.block[data-block-type='legal'] .legal-doc h1 {
  text-align: left;
}

.block[data-block-type='legal'] .legal-doc h2,
.block[data-block-type='legal'] .legal-doc h3,
.block[data-block-type='legal'] .legal-doc p,
.block[data-block-type='legal'] .legal-doc li {
  margin: 0 0 var(--spacing-4);
}

.block[data-block-type='legal'] .legal-doc h2 {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6875rem);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.3;
}

.block[data-block-type='legal'] .legal-doc p,
.block[data-block-type='legal'] .legal-doc li {
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.7;
}

.block[data-block-type='legal'] .legal-doc ul,
.block[data-block-type='legal'] .legal-doc ol {
  margin: 0 0 var(--spacing-4);
  padding-left: var(--spacing-6);
}

.block[data-block-type='legal'] .legal-doc table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 var(--spacing-4);
  overflow-x: auto;
  border-collapse: collapse;
}

.block[data-block-type='legal'] .legal-doc th,
.block[data-block-type='legal'] .legal-doc td {
  padding: var(--spacing-3);
  border: 1px solid var(--color-semantic-border-default);
  text-align: left;
  vertical-align: top;
}

.block[data-block-type='legal'] .legal-doc th {
  background: var(--color-semantic-surface-muted);
  white-space: nowrap;
}

.block[data-block-type='faq'] details {
  margin: 0 auto var(--spacing-3);
  max-width: var(--layout-site-max);
  padding: var(--spacing-4) var(--spacing-6);
  border: 1px solid var(--color-semantic-border-default);
  border-radius: var(--radius-xl, var(--radius-lg));
  background: var(--color-semantic-surface-default);
}

.block[data-block-type='faq'] summary {
  cursor: pointer;
  font-size: 1rem;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-semantic-text-primary);
}

.block[data-block-type='faq'] details p {
  font-size: 0.9375rem;
}

.block[data-block-type='contact'] form[data-lead] {
  margin-right: auto;
  margin-left: auto;
}

.contact-desk {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr);
  gap: var(--spacing-10);
  align-items: start;
  max-width: var(--layout-site-max);
  margin: 0 auto;
  padding: 0 var(--spacing-6);
}

.contact-desk-title {
  margin: 0 0 var(--spacing-5);
  color: var(--color-semantic-text-primary);
  font-size: var(--font-site-h3, var(--font-title));
  font-weight: var(--font-weight-bold);
  text-align: left;
}

.contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-semantic-border-default);
}

.contact-list li {
  padding: var(--spacing-5) 0;
  border-bottom: 1px solid var(--color-semantic-border-default);
}

.contact-list h3 {
  margin: 0 0 var(--spacing-2);
  color: var(--color-semantic-text-primary);
  font-size: var(--font-site-h4, var(--font-body));
}

.contact-list p,
.contact-panel-lead {
  margin: 0;
  color: var(--color-semantic-text-secondary);
  font-size: var(--font-site-body, var(--font-sm));
  line-height: 1.7;
}

.contact-facts {
  margin-top: var(--spacing-3);
  color: var(--color-semantic-text-primary);
}

.contact-facts a {
  color: var(--color-brand-primary);
}

.contact-dot {
  margin: 0 var(--spacing-2);
  color: var(--color-semantic-text-secondary);
}

.contact-panel {
  padding: var(--spacing-6);
  border: 1px solid var(--color-semantic-border-default);
  border-radius: var(--radius-xl, var(--radius-lg));
  background: var(--color-semantic-surface-default);
  box-shadow: var(--shadow-card, var(--shadow-sm));
}

.contact-panel-lead {
  margin-bottom: var(--spacing-5);
}

.contact-sheet .contact-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto;
  text-align: center;
}

.contact-sheet .contact-panel .contact-desk-title,
.contact-tile .contact-desk-title {
  justify-content: center;
}

.contact-sheet .contact-panel > .contact-desk-title {
  align-self: stretch;
  justify-content: flex-start;
}

.contact-sheet .contact-panel form[data-lead] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-4) var(--spacing-4);
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  align-content: start;
  text-align: left;
}

.contact-sheet .contact-panel form[data-lead] .field:nth-child(n + 3),
.contact-sheet .contact-panel form[data-lead] button,
.contact-sheet .contact-panel form[data-lead] .form-note {
  grid-column: 1 / -1;
}

.contact-sheet .contact-panel form[data-lead] label {
  color: var(--color-semantic-text-secondary);
  font-size: var(--font-site-small, var(--font-caption));
  font-weight: var(--font-weight-medium, 500);
}

.contact-sheet .contact-panel form[data-lead] input,
.contact-sheet .contact-panel form[data-lead] textarea {
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-semantic-surface-muted, var(--color-semantic-surface-default));
}

.contact-sheet .contact-panel form[data-lead] input::placeholder,
.contact-sheet .contact-panel form[data-lead] textarea::placeholder {
  color: var(--color-semantic-text-tertiary);
}

.contact-sheet .contact-panel form[data-lead] button {
  justify-self: stretch;
  margin-top: var(--spacing-2);
  padding: var(--spacing-4) var(--spacing-6);
}

.contact-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-6);
  align-items: stretch;
  max-width: var(--layout-site-max);
  margin: 0 auto;
  padding: 0 var(--spacing-6);
}

.contact-main,
.contact-tiles {
  display: contents;
}

.contact-actions {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0;
  height: auto;
  padding: var(--spacing-8);
  box-shadow: var(--shadow-card, var(--shadow-sm));
  border: 1px solid var(--color-semantic-border-default);
  border-radius: var(--radius-xl, var(--radius-lg));
  background: var(--color-semantic-surface-default);
  text-align: center;
}

.contact-actions section {
  width: 100%;
}

.contact-actions .contact-desk-title {
  justify-content: flex-start;
}

.contact-actions section + section {
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-6);
  border-top: 1px solid var(--color-semantic-border-default);
}

.contact-sheet .contact-desk-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.contact-ico {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  color: var(--color-brand-primary);
}

.contact-ico svg {
  width: 100%;
  height: 100%;
}

.contact-phone {
  font-size: var(--font-site-h3, var(--font-title));
}

.contact-address {
  font-size: calc((var(--font-site-h4, var(--font-body)) + var(--font-site-h3, var(--font-title))) / 2);
}

.contact-actions .store-link {
  font-size: var(--font-site-h4, var(--font-body));
}

.consult-panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 40);
  display: grid;
  place-items: end center;
  padding: var(--spacing-6);
  background: var(--color-semantic-overlay, rgb(0 0 0 / 35%));
}

.consult-panel[hidden] {
  display: none;
}

.consult-card {
  display: grid;
  grid-template-rows: auto minmax(12rem, 40vh) auto;
  width: min(28rem, 100%);
  max-height: 80vh;
  padding: var(--spacing-5);
  border-radius: var(--radius-xl, var(--radius-lg));
  background: var(--color-semantic-surface-default);
  box-shadow: var(--shadow-card, var(--shadow-sm));
}

.consult-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--spacing-2);
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.consult-head h2 {
  margin: 0;
  color: var(--color-semantic-text-primary);
  font-size: var(--font-site-h3, var(--font-title));
}

.consult-head p {
  grid-column: 1;
  margin: 0;
  color: var(--color-semantic-text-secondary);
  font-size: var(--font-site-small, var(--font-caption));
}

.consult-log {
  overflow: auto;
  display: grid;
  align-content: start;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

.consult-user,
.consult-agent {
  margin: 0;
  max-width: 90%;
  padding: var(--spacing-3);
  border-radius: var(--radius-md);
  line-height: 1.6;
}

.consult-user {
  justify-self: end;
  color: var(--color-semantic-text-inverse);
  background: var(--color-brand-primary);
}

.consult-agent {
  justify-self: start;
  color: var(--color-semantic-text-primary);
  background: var(--color-semantic-surface-muted, var(--color-semantic-surface-default));
  border: 1px solid var(--color-semantic-border-default);
}

.consult-form {
  display: grid;
  gap: var(--spacing-3);
}

.consult-form textarea {
  width: 100%;
  padding: var(--spacing-3);
  border: 1px solid var(--color-semantic-border-default);
  border-radius: var(--radius-md);
  font: inherit;
}

.contact-phone {
  margin: 0;
  font-weight: var(--font-weight-medium, 500);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

.contact-phone a {
  color: var(--color-brand-primary);
  text-decoration: none;
}

.contact-address {
  margin: 0;
  color: var(--color-semantic-text-primary);
  line-height: 1.7;
}

.contact-actions .reach-lead {
  margin: 0 0 var(--spacing-4);
  color: var(--color-semantic-text-secondary);
  font-size: var(--font-site-body, var(--font-sm));
  line-height: 1.6;
}

.contact-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: var(--spacing-6);
  box-shadow: var(--shadow-card, var(--shadow-sm));
  border: 1px solid var(--color-semantic-border-default);
  border-radius: var(--radius-xl, var(--radius-lg));
  background: var(--color-semantic-surface-default);
  text-align: center;
}

.contact-tile .qrcode-grid,
.contact-tile .app-downloads {
  width: 100%;
}

.contact-sheet .qrcode-grid,
.app-downloads {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-4);
}

.contact-sheet .app-download {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 100%;
  padding: var(--spacing-4);
  border: 1px solid var(--color-semantic-border-default);
  border-radius: var(--radius-md);
  text-align: center;
}

.contact-sheet .store-marks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  min-height: calc(var(--spacing-12) * 1.75);
}

.contact-sheet .store-mark,
.contact-sheet .qr-hold,
.contact-sheet .qrcode-item img {
  width: calc(var(--spacing-12) * 1.75);
  height: calc(var(--spacing-12) * 1.75);
  flex: 0 0 auto;
}

.contact-sheet .store-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-semantic-border-default);
  border-radius: var(--radius-md);
  color: var(--color-semantic-text-primary);
  background: var(--color-semantic-surface-default);
}

.contact-sheet .store-mark svg {
  width: var(--spacing-6);
  height: var(--spacing-6);
}

.contact-sheet .store-mark[aria-disabled='true'] {
  color: var(--color-semantic-text-tertiary);
}

.contact-sheet .qr-hold,
.contact-sheet .qrcode-item img {
  border: 1px dashed var(--color-semantic-border-default);
  border-radius: var(--radius-md);
  background: var(--color-semantic-surface-muted, var(--color-semantic-surface-default));
  object-fit: contain;
}

.contact-sheet .qr-hold {
  background:
    linear-gradient(var(--color-semantic-border-default), var(--color-semantic-border-default)) 22% 22% / 22% 22% no-repeat,
    linear-gradient(var(--color-semantic-border-default), var(--color-semantic-border-default)) 56% 22% / 22% 22% no-repeat,
    linear-gradient(var(--color-semantic-border-default), var(--color-semantic-border-default)) 22% 56% / 22% 22% no-repeat,
    var(--color-semantic-surface-muted, var(--color-semantic-surface-default));
}

.contact-sheet .qrcode-box {
  width: calc(var(--spacing-12) * 2.25);
  margin: 0 auto;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2);
  border: 1px dashed var(--color-semantic-border-default);
  border-radius: var(--radius-md);
  background: var(--color-semantic-surface-muted, var(--color-semantic-surface-default));
  color: var(--color-semantic-text-tertiary);
  font-size: var(--font-site-small, var(--font-caption));
  line-height: 1.4;
  text-align: center;
  overflow: hidden;
}

.contact-sheet .qrcode-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.contact-sheet .qrcode-item p,
.app-download h3 {
  margin: var(--spacing-3) 0 0;
  color: var(--color-semantic-text-primary);
  font-size: var(--font-site-body, var(--font-sm));
  font-weight: var(--font-weight-semibold, 600);
}

.app-download .store-links {
  display: grid;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
}

.download-empty {
  color: var(--color-semantic-text-secondary);
  font-size: var(--font-site-small, var(--font-caption));
}

.contact-reach-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-6);
  max-width: var(--layout-site-max);
  margin: 0 auto;
  padding: 0 var(--spacing-6);
}

.reach-panel {
  padding: var(--spacing-6);
  border: 1px solid var(--color-semantic-border-default);
  border-radius: var(--radius-xl, var(--radius-lg));
  background: var(--color-semantic-surface-default);
}

.reach-lead,
.download-empty {
  margin: 0 0 var(--spacing-4);
  color: var(--color-semantic-text-secondary);
  font-size: var(--font-site-body, var(--font-sm));
  line-height: 1.7;
}

.store-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

.store-link {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-5);
  color: var(--color-semantic-text-inverse);
  background: var(--color-brand-primary);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-semibold, 600);
}

form[data-lead] button {
  justify-self: center;
  padding: var(--spacing-3) var(--spacing-8);
  color: var(--color-semantic-text-inverse);
  background: var(--color-brand-primary);
  border: 0;
  border-radius: var(--radius-full);
  font: inherit;
  font-weight: var(--font-weight-semibold, 600);
  cursor: pointer;
}

.form-note,
.empty {
  color: var(--color-semantic-text-secondary);
}

.empty-state {
  padding: var(--spacing-12) var(--spacing-6);
  text-align: center;
}

.empty-state h1 {
  margin-bottom: var(--spacing-4);
  font-size: var(--font-site-h2, var(--font-ltitle));
}

/* —— 页脚：业界通行四列 + 底栏（对齐美团/京东信息架构） —— */
.site-footer {
  background: var(--color-semantic-surface-muted);
  color: var(--color-semantic-text-secondary);
  border-top: 1px solid var(--color-semantic-border-strong);
  padding: 0;
}

.site-footer-inner {
  max-width: var(--layout-site-max);
  margin: 0 auto;
  padding: calc(var(--spacing-12) + var(--spacing-4)) var(--spacing-6) var(--spacing-10);
}

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  gap: var(--spacing-10);
}

.site-footer .footer-col h4 {
  margin: 0 0 var(--spacing-4);
  color: var(--color-semantic-text-primary);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-semibold, 600);
}

.site-footer .footer-col p,
.site-footer .footer-about {
  margin: 0 0 var(--spacing-2);
  font-size: var(--font-site-small, var(--font-caption));
  color: var(--color-semantic-text-secondary);
  line-height: 1.8;
}

.site-footer .footer-logo {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-3);
  height: calc(var(--font-site-small, var(--font-caption)) * 1.8 * 2);
  margin-bottom: var(--spacing-4);
}

.site-footer .footer-link {
  display: block;
  padding: var(--spacing-1) 0;
  font-size: var(--font-site-small, var(--font-caption));
  color: var(--color-semantic-text-secondary);
  transition: color var(--motion-duration-fast, 0.2s) var(--motion-easing-standard, ease);
}

.site-footer .footer-link:hover {
  color: var(--color-semantic-text-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer .qrcode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-3);
  width: 100%;
  margin-top: var(--spacing-5);
}

.site-footer .qrcode-item {
  min-width: 0;
  text-align: center;
}

.site-footer .qrcode-box {
  width: 100%;
  max-width: calc(var(--spacing-12) * 2 + var(--spacing-6));
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto var(--spacing-1);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-semantic-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-semantic-surface-sunken, var(--color-semantic-surface-muted, var(--color-semantic-surface-default)));
  color: var(--color-semantic-text-tertiary);
  font-size: var(--font-site-small, var(--font-caption));
  overflow: hidden;
}

.site-footer .qrcode-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-footer .qrcode-item p {
  margin: 0;
  font-size: var(--font-site-small, var(--font-caption));
  line-height: 1.4;
  color: var(--color-semantic-text-secondary);
  overflow-wrap: anywhere;
}

.contact-codes .qrcode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6rem, max-content));
  justify-content: start;
  gap: var(--spacing-6);
  width: 100%;
}

.contact-codes .qrcode-item {
  min-width: 0;
  text-align: center;
}

.contact-codes .qrcode-box {
  width: calc(var(--spacing-12) * 2 + var(--spacing-6));
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto var(--spacing-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-semantic-border-default, var(--site-line-dark));
  border-radius: var(--radius-sm);
  background: var(--color-semantic-surface-default);
  color: var(--color-semantic-text-tertiary);
  font-size: var(--font-site-small, var(--font-caption));
  overflow: hidden;
}

.contact-codes .qrcode-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.contact-codes .qrcode-item p {
  margin: 0;
  font-size: var(--font-site-small, var(--font-caption));
  line-height: 1.4;
  color: var(--color-semantic-text-secondary);
  overflow-wrap: anywhere;
}

.site-footer-bottom {
  border-top: 1px solid var(--color-semantic-border-strong);
  background: var(--color-semantic-surface-default);
  padding: var(--spacing-6) var(--spacing-6) calc(var(--spacing-6) + var(--spacing-2));
  text-align: center;
}

.site-footer-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--layout-site-max);
  margin: 0 auto;
  gap: var(--spacing-3);
}

.site-footer-bottom p,
.footer-meta,
.footer-copy,
.site-footer-bottom .footer-legal-links,
.site-footer-bottom .footer-legal-links a {
  margin: 0;
  font-size: var(--font-site-small, var(--font-caption));
  line-height: 1.8;
}

.site-footer-bottom p,
.footer-meta,
.footer-copy {
  color: var(--color-semantic-text-secondary);
}

.footer-meta {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-1) var(--spacing-3);
}

.footer-meta-item {
  display: inline-flex;
  align-items: center;
}

.footer-sep {
  color: var(--color-semantic-text-tertiary);
}

.footer-copy {
  margin: 0;
  color: var(--color-semantic-text-secondary);
}

.site-footer-bottom .footer-trade-note {
  color: var(--color-semantic-text-tertiary);
}

.site-footer-bottom .footer-beian a,
.site-footer-bottom .footer-filing {
  color: var(--color-semantic-text-tertiary);
}

.site-footer-bottom .footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-5);
  margin: 0;
}

.site-footer-bottom .footer-legal-links a {
  color: var(--color-semantic-text-secondary);
}

.site-footer-bottom .footer-legal-links a:hover {
  color: var(--color-semantic-text-primary);
}

@media (max-width: 1024px) {
  .menu-toggle {
    display: flex;
  }

  .nav-menu {
    display: none;
  }

  .nav-menu.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--spacing-12) - var(--spacing-4));
    overflow-y: auto;
    padding: var(--spacing-4);
    background: var(--color-semantic-surface-default);
    box-shadow: var(--shadow-md);
  }

  .nav-menu.is-open .nav-link,
  .nav-menu.is-open .dropdown-item {
    color: var(--color-semantic-text-primary);
  }

  .nav-menu.is-open .dropdown {
    position: static;
    min-width: 0;
    margin: 0;
    padding: 0 0 var(--spacing-2) var(--spacing-4);
    box-shadow: none;
  }

  .cols[data-columns='3'],
  .cols[data-columns='4'] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flow {
    flex-direction: column;
    gap: var(--spacing-2);
  }

  .flow-step,
  .flow-step:first-child,
  .flow-step:last-child {
    padding: var(--spacing-3) var(--spacing-4);
    clip-path: none;
  }

  .frames {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .page-banner {
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .site-main > .block[data-block-type='carousel']:first-child .frames {
    min-height: 0;
  }

  .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .credential-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .footer-meta {
    flex-wrap: wrap;
  }

  .navbar-inner,
  .section-header,
  .cols,
  .cta,
  .block > .container,
  .block > .cols,
  .block > .media,
  .block > .rich {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }

  .block,
  .block[data-block-type='cta'] {
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
  }

  .credential-grid {
    grid-template-columns: 1fr;
  }

  .frames {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .page-banner {
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .job-row {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--spacing-2);
  }

  .contact-sheet,
  .contact-desk,
  .contact-reach-grid,
  .contact-main,
  .contact-tiles,
  .contact-sheet .qrcode-grid,
  .app-downloads,
  .contact-sheet .contact-panel form[data-lead] {
    grid-template-columns: 1fr;
  }

  .frames .frame figcaption {
    left: var(--spacing-4);
    right: var(--spacing-4);
    bottom: var(--spacing-12);
    max-width: none;
  }

  .section-desc,
  .cta-lead,
  .card p {
    overflow-wrap: anywhere;
  }

  .site-footer .footer-grid {
    grid-template-columns: 1fr;
  }

  .logo {
    height: calc(var(--spacing-10) + var(--spacing-2));
    max-width: 100%;
  }

  .site-footer .footer-logo {
    height: calc(var(--font-site-small, var(--font-caption)) * 1.8 * 2);
    max-width: 100%;
  }

  .logo-img,
  .site-footer .logo-img {
    height: 100%;
    max-width: 100%;
    margin-bottom: 0;
  }
}

@media (max-width:768px){.cols,.cols[data-columns]{grid-template-columns:1fr}.media,.media[data-side=right]{flex-direction:column}.media[data-ratio] .media-figure,.media[data-ratio] .media-copy{flex:1 1 auto}.block[data-block-type=hero][data-hero=home]{min-height:auto}}