/* LexBeyond brand system · 2026-09-27
   Brand primary: 无界钴蓝 / Beyond Cobalt / #365CFF
   The canonical color tokens below are shared by the website and UI proposals. */
:root {
  --brand: #365CFF;
  --brand-hover: #2447D8;
  --brand-tint: #EAF0FF;
  --carbon: #111827;
  --canvas: #F3F6FB;
  --signal: #33C7D9;
  --paper: #F8FAFD;
  --ink: #111827;
  --text: #263247;
  --muted: #627086;
  --line: #DCE3EE;
  --gold: #365CFF;
  --soft: #F0F4FC;
  --sans: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: var(--sans);
}
html {scroll-padding-top: 90px}
body {font-size: 15px; line-height: 1.8; -webkit-font-smoothing: antialiased}
h1,h2,h3 {font-family: var(--sans); font-weight: 600; letter-spacing: -.03em}
p {text-wrap: pretty}
.wrap {width: min(1280px, calc(100% - 80px))}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible {outline-color: var(--brand)}
.site-header {background: rgba(248,250,253,.96); border-color: var(--line); backdrop-filter: blur(14px)}
.header-inner {min-height: 82px; gap: 38px}
.brand {gap: 11px}
.brand-mark {width: 36px; height: 36px; flex: 0 0 36px}
.brand b {font-family: var(--sans); font-size: 22px; font-weight: 650; letter-spacing: 1px; line-height: 1.35}
.brand small {font-size: 9px; letter-spacing: 2.8px; margin-top: 3px; font-weight: 600; color: var(--muted)}
.nav {gap: 31px; font-size: 14px}
.nav a {position: relative}
.nav a[aria-current=page] {color: var(--carbon); font-weight: 600}
.nav a[aria-current=page]:after {content: ""; position: absolute; bottom: -21px; height: 2px; background: var(--brand); left: 0; right: 0}
.button {background: var(--brand); border-color: var(--brand); border-radius: 6px; font-weight: 550; box-shadow: 0 3px 0 #11182708}
.button:hover {background: var(--brand-hover); border-color: var(--brand-hover); transform: none}
.button.secondary {background: white; border-color: #C7D1E2; color: var(--carbon); box-shadow: none}
.button.secondary:hover {background: var(--brand-tint); border-color: #A6B7EF}
.button[disabled] {background: #EFF2F7; color: #758096; border-color: #DFE5EE; box-shadow: none}
.header-start {background: var(--carbon); border-color: var(--carbon); min-height: 40px; font-size: 13px; padding: 8px 17px}
.menu-toggle {border-color: var(--line); color: var(--carbon)}
.text-link {text-decoration-color: #A9B9F3}
.quiet-link {display: inline-block; color: var(--brand); font-size: 14px; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #BEC9F5}
.kicker {display: flex; gap: 10px; align-items: center; font-size: 12px; letter-spacing: 1.4px; font-weight: 600; color: var(--muted); line-height: 1.6}
.kicker>span {display: inline-block; width: 6px; height: 6px; border-radius: 1px; background: var(--brand)}
.site-footer {padding: 28px 0 22px; background: #F8FAFD; border-color: var(--line)}
.footer-line {display: flex; justify-content: space-between; gap: 25px; align-items: center}
.footer-wordmark {font-size: 13px; letter-spacing: 2px; font-weight: 650; color: var(--carbon)}
.footer-wordmark>span {letter-spacing: 0; color: var(--muted); margin-left: 22px; font-size: 12px; font-weight: 400}
.footer-links {font-size: 12px; gap: 24px}
.footer-legal {display: flex; justify-content: space-between; gap: 20px; margin-top: 15px; color: #727D90; font-size: 11px}
.footer-separator {margin: 0 13px; color: #BCC4D1}

/* Compact marketing entry: one hero and a three-way navigation rail. */
.home-page {background: var(--canvas)}
.launch-hero {display: grid; grid-template-columns: .81fr 1.19fr; gap: 46px; align-items: center; padding-top: 70px; padding-bottom: 62px}
.launch-copy {padding: 8px 0}
.launch-copy h1 {font-size: clamp(42px,4.05vw,61px); line-height: 1.29; letter-spacing: -.06em; margin-top: 24px; white-space: nowrap; font-weight: 650}
.launch-copy h1>span {color: var(--brand); letter-spacing: -.06em}
.launch-description {font-size: 17px; color: var(--muted); line-height: 1.95; margin-top: 23px}
.launch-actions {display: flex; align-items: center; gap: 23px; flex-wrap: wrap; margin-top: 30px}
.launch-actions .button {min-height: 49px; padding: 12px 22px; font-size: 14px}
.play-link {display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: var(--carbon); background: none; border: 0; padding: 9px 0; font-size: 13px; white-space: nowrap}
.play-icon {display: inline-grid; place-items: center; border: 1px solid #A6B3C8; border-radius: 50%; width: 25px; height: 25px; font-size: 9px; padding-left: 2px}
.entry-price {display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; margin-top: 25px; font-size: 12px; color: var(--muted)}
.entry-price b {font-size: 23px; font-weight: 600; color: var(--carbon); letter-spacing: -.04em}
.entry-price i {display: block; width: 1px; height: 12px; background: #C3CEDF; margin: 0 4px}
.entry-price>span:last-child {color: var(--brand); margin-left: 3px}
.launch-proof {display: flex; flex-wrap: wrap; gap: 16px; margin-top: 25px; font-size: 11px; color: #737F92}
.launch-proof span {display: flex; gap: 6px; align-items: center}
.launch-proof span:before {content: ""; width: 4px; height: 4px; background: #92A1BB; border-radius: 50%}
.launch-visual {min-width: 0; background: #152037; border: 1px solid #25324C; padding: 14px; box-shadow: 0 24px 52px -24px #22335455; border-radius: 12px; position: relative}
.visual-bar {display: flex; justify-content: space-between; gap: 10px; color: #93A3BF; font-size: 9px; letter-spacing: 1px; padding: 2px 1px 12px}
.visual-bar>span:first-child {display: flex; align-items: center; gap: 8px}
.visual-bar i {width: 5px; height: 5px; background: var(--signal); display: block; border-radius: 50%}
.hero-preview,.scene-image-button {position: relative; display: block; width: 100%; padding: 0; border: 0; background: #F3F6FB; border-radius: 6px; overflow: hidden; cursor: zoom-in}
.hero-preview img,.scene-image-button img {width: 100%; height: auto}
.zoom-cue {display: flex; align-items: center; gap: 15px; position: absolute; right: 14px; bottom: 12px; padding: 6px 12px; border: 1px solid #CCD5E5; background: #FFFFFFF5; color: #36445D; font-size: 10px; border-radius: 4px; box-shadow: 0 2px 9px #1729470D}
.zoom-cue b {color: var(--brand); font-size: 14px}
.visual-caption {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 10px; color: #9CAAC0; padding: 11px 1px 0}
.visual-caption a {color: #DCE6FC}
.route-section {display: grid; grid-template-columns: .7fr 1fr 1fr 1fr; border-top: 1px solid #D2DBE9; border-bottom: 1px solid #D2DBE9; margin-bottom: 45px; padding: 27px 0; gap: 0}
.route-intro {padding: 0 24px 0 0}
.route-intro p {font-size: 16px; color: #536077; line-height: 1.75; margin-top: 12px}
.route-intro .kicker {font-size: 10px; letter-spacing: 1.7px}
.route-card {display: flex; flex-direction: column; padding: 0 26px; border-left: 1px solid #D2DBE9; transition: color .15s}
.route-index {font-size: 10px; letter-spacing: .5px; color: #6B7990}
.route-card h2 {font-size: 21px; line-height: 1.6; margin-top: 10px; font-weight: 550; letter-spacing: -.02em}
.route-bottom {display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #778499; gap: 14px; margin-top: 15px}
.route-bottom b {color: var(--brand); font-size: 20px; line-height: 1}
.route-card:hover h2 {color: var(--brand)}

/* Product scenes: intentional choice, no automatic slideshow. */
.experience-head {display: flex; justify-content: space-between; gap: 32px; align-items: end; padding-top: 46px; padding-bottom: 28px}
.experience-head h1 {font-size: clamp(30px,3vw,42px); margin-top: 13px; line-height: 1.5}
.experience-head p:not(.kicker) {color: var(--muted); margin-top: 11px; font-size: 14px}
.experience-head>.play-link {margin-bottom: 5px}
.experience-workspace {padding-bottom: 38px}
.scene-tabs {display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 30px}
.scene-tabs button {display: flex; gap: 13px; align-items: center; font-size: 14px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 17px 31px 17px 0; color: var(--muted); margin-right: 22px}
.scene-tabs button span {font-size: 10px; color: #9BA7B9; font-variant-numeric: tabular-nums}
.scene-tabs button[aria-pressed=true] {color: var(--brand); border-color: var(--brand); font-weight: 600}
.scene-tabs button[aria-pressed=true] span {color: var(--brand)}
.experience-grid {display: grid; grid-template-columns: 275px minmax(0,1fr); gap: 44px; align-items: center}
.scene-overline {font-size: 11px; color: var(--brand); font-weight: 600; letter-spacing: 1px}
.scene-copy h2 {font-size: 33px; line-height: 1.45; margin-top: 13px; font-weight: 600}
.scene-copy>p:not(.scene-overline) {color: var(--muted); font-size: 14px; margin-top: 17px; line-height: 1.9}
.scene-copy ol {list-style: none; padding: 0; margin: 23px 0; counter-reset: scene}
.scene-copy li {counter-increment: scene; font-size: 13px; color: #4F5D75; display: flex; gap: 14px; align-items: center; margin-top: 12px}
.scene-copy li:before {content: "0" counter(scene); font-size: 10px; color: #8B9BB3; font-weight: 600}
.scene-copy .button {margin-top: 5px; font-size: 13px}
.scene-copy .quiet-link {margin-top: 18px; display: block; font-size: 12px}
.scene-media {background: #ECF1F9; padding: 14px; border: 1px solid #DAE2F0; border-radius: 10px; min-width: 0}
.scene-image-button {border: 1px solid #D6DFEC; border-radius: 6px; box-shadow: 0 10px 26px -14px #1E355C55}
.design-disclosure {font-size: 10px; color: #7B889D; text-align: center; margin-top: 11px}
.more-capabilities {border-top: 1px solid var(--line); margin-top: 28px; padding-top: 18px; color: var(--muted)}
.more-capabilities summary {display: flex; justify-content: space-between; gap: 25px; cursor: pointer; list-style: none; font-size: 13px}
.more-capabilities summary span {color: var(--brand); font-size: 17px}
.more-capabilities p {max-width: 920px; font-size: 13px; margin-top: 14px}
#concept-modal {width: min(1500px,calc(100vw - 40px)); max-height: 94vh}
.concept-modal-body {padding: 14px 20px 17px; overflow: auto}
.concept-modal-body img {width: 100%; min-width: 700px}
.concept-modal-body p {font-size: 12px; color: var(--muted); margin-top: 13px}
dialog {border-color: #BDCAE0; background: #F8FAFD}
dialog::backdrop {background: #111827B8}
.modal-head h2 {font-size: 18px; letter-spacing: 0}
.modal-body video {background: #111827}

/* Clear costs, two plans, no invented discount. */
.compact-heading {padding-top: 43px; padding-bottom: 30px}
.compact-heading h1 {font-size: 43px; margin-top: 13px}
.compact-heading>p:last-child {color: var(--muted); margin-top: 10px; font-size: 14px}
.plan-layout {display: grid; grid-template-columns: 1fr 1fr .8fr; gap: 24px}
.plan-card {border: 1px solid var(--line); background: white; padding: 26px; border-radius: 8px; display: flex; flex-direction: column}
.plan-card.recommended {border-color: #A6B8FF; box-shadow: 0 3px 0 #365CFF inset}
.plan-card-top {display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; font-weight: 550}
.plan-badge {padding: 3px 8px; border-radius: 3px; color: var(--brand); background: var(--brand-tint); font-size: 10px; font-weight: 500}
.plan-note {font-size: 11px; color: var(--muted); font-weight: 400}
.plan-price {font-size: 61px; color: var(--carbon); letter-spacing: -.05em; font-weight: 500; line-height: 1.3; margin: 24px 0 12px; font-variant-numeric: tabular-nums}
.plan-price sup {font-size: 25px; vertical-align: top; position: relative; top: 9px; margin-right: 4px}
.plan-price span {font-size: 12px; letter-spacing: 0; color: var(--muted); margin-left: 10px; font-weight: 400}
.plan-card>p {font-size: 13px; color: var(--muted)}
.plan-card ul {padding-left: 17px; font-size: 13px; color: #536279; margin: 23px 0 27px}
.plan-card .button {width: 100%; font-size: 13px; min-height: 45px; margin-top: auto}
.cost-sidebar {padding: 22px 16px 18px 12px}
.cost-icon {font-size: 10px; border: 1px solid #BAC7DD; border-radius: 4px; color: #61718A; display: inline-flex; height: 29px; padding: 2px 6px; align-items: center; letter-spacing: 1px}
.cost-sidebar h2 {font-size: 27px; line-height: 1.5; margin-top: 13px}
.cost-sidebar p {font-size: 12px; color: var(--muted); margin-top: 17px}
.cost-sidebar p b {color: #344359; font-weight: 550}
.cost-sidebar .quiet-link {font-size: 12px; margin-top: 19px}
.sales-status {display: flex; gap: 7px; align-items: center; font-size: 10px; color: #7A879B; margin-top: 23px}
.sales-status span {width: 5px; height: 5px; background: #9DAAC0; border-radius: 50%}
.pricing-questions {padding-top: 22px; padding-bottom: 36px}
.plan-footnote {font-size: 11px; color: #7B889B; margin-bottom: 17px; max-width: 960px}
.pricing-questions .faq {max-width: none}
.pricing-questions .faq details {padding: 14px 0}
.pricing-questions .faq summary {font-size: 13px; font-weight: 500}
.pricing-questions .faq p {font-size: 13px; max-width: 930px}

/* Guides retain the verified instructions and adopt the brand system. */
.page-head h1 {font-size: 37px; line-height: 1.5}
.page-head {padding-top: 35px; padding-bottom: 29px}
.breadcrumb {margin-bottom: 18px; font-size: 12px}
.guide-page .page-head>p {font-size: 14px}
.guide-sidebar {top: 109px}
.guide-nav button[aria-current=step] {background: var(--brand)}
.guide-sidebar .small {font-size: 11px}
.guide-body h2 {font-weight: 600; font-size: 29px}
.guide-body .step-kicker {color: var(--brand)}
.guide-body,.tutorial-section {font-size: 15px}
.os-switch {background: #E8EEF8}
.os-switch button[aria-pressed=true] {color: var(--brand)}
.guide-progress {background: #E5EBF7}
.guide-progress span {background: var(--brand)}
.path,.filename,.task-checks,.connect-map>div {background: #F1F5FC; border-color: #DCE4F2}
.key-card .key-label {color: var(--brand)}
.help-callout {background: #EDF2FF; border-color: #8CA5F7}
.help-callout.gold {background: #F1F4FA; border-color: #A6B5CF}
.success-hint {background: #EDF6F6; border-color: #2D8C88}
.success-hint b {color: #226D6A}
.copy-button {border-color: #C4D1E7}
.diagram-title {background: #E9EFF9}
.tutorial-diagram {background: #F5F7FC; border-color: #DCE4F2}
.diagram-menu .highlight {background: var(--brand)}
.pane-tag {background: var(--brand-tint); color: var(--brand)}
.ui-example {background: #F0F4FC; border-color: #D4DEF0}
.ui-example .example-button {background: var(--brand)}
.step-title .step-badge {background: var(--brand)}
.toc a[aria-current=step] {color: var(--brand); border-color: var(--brand); background: var(--brand-tint); font-weight: 550}
.api-layout {grid-template-columns: 210px minmax(0,1fr); gap: 35px; padding-bottom: 40px}
.api-step-footer {border: 1px solid var(--line); border-radius: 7px; margin-top: 18px; background: white}
#api-progress {font-size: 12px}
.tutorial-section {scroll-margin-top: 20px}
.toast {background: var(--carbon)}
.download-card,.support-card,.key-card,.guide-panel {border-color: var(--line)}
.download-state {color: #73839A}

@media (min-width:1500px) {
  .launch-hero {padding-top: 86px; padding-bottom: 74px}
}
@media (max-width:1120px) {
  .wrap {width: calc(100% - 56px)}
  .header-inner {gap: 26px}
  .nav {gap: 24px}
  .launch-hero {grid-template-columns: .87fr 1.13fr; gap: 30px; padding-top: 50px; padding-bottom: 48px}
  .launch-copy h1 {font-size: 46px}
  .launch-actions {gap: 14px}
  .launch-description {font-size: 15px}
  .visual-bar {font-size: 8px}
  .visual-bar>span:last-child {display: none}
  .route-section {grid-template-columns: .65fr 1fr 1fr 1fr}
  .route-card {padding: 0 19px}
  .route-card h2 {font-size: 19px}
  .route-bottom {font-size: 10px}
  .experience-grid {grid-template-columns: 235px minmax(0,1fr); gap: 28px}
  .scene-copy h2 {font-size: 29px}
  .plan-layout {gap: 18px; grid-template-columns: 1fr 1fr .72fr}
  .plan-card {padding: 23px}
  .plan-card-top {flex-wrap: wrap; gap: 5px}
}
@media (max-width:820px) {
  .wrap {width: calc(100% - 36px)}
  .header-inner {min-height: 73px; padding: 12px 0; gap: 17px}
  .brand b {font-size: 20px}
  .brand-mark {width: 33px; height: 33px; flex-basis: 33px}
  .nav {gap: 9px 27px; font-size: 13px}
  .nav a[aria-current=page]:after {bottom: 1px}
  .header-start {margin-left: auto}
  .launch-hero {grid-template-columns: 1fr; gap: 34px; padding-top: 39px; padding-bottom: 36px}
  .launch-copy {max-width: 600px}
  .launch-copy h1 {font-size: 53px; line-height: 1.25; margin-top: 19px}
  .launch-description {font-size: 16px; margin-top: 17px}
  .launch-actions {margin-top: 23px; gap: 25px}
  .entry-price {margin-top: 15px}
  .launch-proof {margin-top: 13px}
  .launch-visual {width: 100%; max-width: 760px; padding: 12px}
  .visual-bar {font-size: 9px}
  .visual-bar>span:last-child {display: block}
  .route-section {grid-template-columns: repeat(3,minmax(0,1fr)); padding: 23px 0; margin-bottom: 30px}
  .route-intro {display: none}
  .route-card {padding: 0 17px}
  .route-card:first-of-type {border-left: 0; padding-left: 0}
  .route-card:last-of-type {padding-right: 0}
  .route-card h2 {font-size: 18px}
  .route-bottom {font-size: 10px; align-items: start}
  .footer-line {align-items: start; flex-direction: column; gap: 17px}
  .footer-wordmark>span {margin-left: 17px}
  .footer-legal {flex-direction: column; gap: 5px}
  .experience-head {padding-top: 30px; align-items: start; flex-direction: column; gap: 10px}
  .experience-head h1 {font-size: 32px}
  .scene-tabs {margin-bottom: 22px}
  .scene-tabs button {font-size: 13px; gap: 8px; padding: 12px 15px 12px 0; margin-right: 20px}
  .experience-grid {grid-template-columns: 1fr; gap: 23px}
  .scene-copy {display: grid; grid-template-columns: 1fr 1fr; gap: 0 35px; align-items: start}
  .scene-copy .scene-overline {grid-column: 1/-1}
  .scene-copy h2 {grid-column: 1; margin-top: 10px}
  .scene-copy>p:not(.scene-overline) {grid-column: 2; grid-row: 2; margin-top: 12px}
  .scene-copy ol {grid-column: 2; margin: 10px 0}
  .scene-copy .button {grid-column: 1; grid-row: 3; align-self: end; justify-self: start; margin-top: 16px}
  .scene-copy .quiet-link {grid-column: 1/-1; margin-top: 16px}
  .plan-layout {grid-template-columns: 1fr 1fr}
  .cost-sidebar {grid-column: 1/-1; border-top: 1px solid var(--line); margin-top: 6px; padding: 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 25px}
  .cost-sidebar h2 {font-size: 24px; margin: 0}
  .cost-icon {display: none}
  .cost-sidebar p {margin: 0}
  .cost-sidebar p:first-of-type {grid-column: 2; grid-row: 1}
  .cost-sidebar p:nth-of-type(2) {grid-column: 2}
  .cost-sidebar .quiet-link {grid-column: 1; grid-row: 2; margin: 0}
  .sales-status {grid-column: 1/-1; margin: 0}
  .compact-heading h1 {font-size: 36px}
  .guide-layout,.api-layout {grid-template-columns: minmax(0,1fr); gap: 22px}
  .toc {gap: 6px}
  .toc a {padding: 9px 12px; font-size: 12px}
  .page-head h1 {font-size: 33px}
  .guide-body h2 {font-size: 27px}
}
@media (max-width:560px) {
  .header-inner {gap: 10px}
  .brand {gap: 8px}
  .brand b {font-size: 18px}
  .brand small {font-size: 8px; letter-spacing: 2.3px}
  .brand-mark {width: 30px; height: 30px; flex-basis: 30px}
  .header-inner>.button {font-size: 12px; padding: 7px 10px; min-height: 36px; gap: 5px}
  .menu-toggle {font-size: 12px; padding: 6px 8px}
  .launch-hero {padding-top: 30px; gap: 28px}
  .kicker {font-size: 10px; letter-spacing: .8px}
  .launch-copy h1 {font-size: clamp(34px,9.5vw,49px); line-height: 1.3; letter-spacing: -.045em}
  .launch-description {font-size: 14px; line-height: 1.9; margin-top: 17px}
  .launch-actions {gap: 19px; margin-top: 22px}
  .launch-actions .button {font-size: 13px; padding: 11px 16px; min-height: 44px; gap: 10px}
  .play-link {font-size: 12px}
  .play-icon {width: 23px; height: 23px}
  .entry-price {font-size: 11px; gap: 8px}
  .entry-price b {font-size: 21px}
  .launch-proof {font-size: 10px; gap: 13px}
  .launch-visual {padding: 8px; border-radius: 8px; box-shadow: 0 18px 34px -24px #22335477}
  .visual-bar {font-size: 7px; padding-bottom: 8px; letter-spacing: .4px}
  .visual-caption {font-size: 8px; gap: 4px; padding-top: 8px}
  .zoom-cue {right: 7px; bottom: 6px; font-size: 8px; padding: 3px 7px; gap: 8px}
  .zoom-cue b {font-size: 11px}
  .route-section {display: block; padding: 0; border-bottom: 0; margin-bottom: 20px}
  .route-card,.route-card:first-of-type,.route-card:last-of-type {display: grid; grid-template-columns: 1fr auto; padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--line)}
  .route-card h2 {grid-column: 1; font-size: 16px; margin-top: 6px; letter-spacing: 0; line-height: 1.6}
  .route-card h2 br {display: none}
  .route-index {grid-column: 1; font-size: 9px}
  .route-bottom {grid-column: 2; grid-row: 1/3; align-self: center; max-width: 110px; text-align: right; font-size: 9px; margin: 0; gap: 13px; align-items: center}
  .route-bottom b {font-size: 18px}
  .site-footer {padding-top: 21px}
  .footer-wordmark {font-size: 11px}
  .footer-wordmark>span {font-size: 10px; margin-left: 12px}
  .footer-links {font-size: 10px; gap: 18px}
  .footer-legal {font-size: 9px; line-height: 1.8}
  .experience-head {padding-top: 27px; padding-bottom: 12px; gap: 7px}
  .experience-head h1 {font-size: 28px; line-height: 1.4}
  .experience-head p:not(.kicker) {font-size: 12px}
  .scene-tabs {gap: 0; justify-content: space-between; margin-bottom: 19px}
  .scene-tabs button {font-size: 12px; padding-right: 0; margin: 0; gap: 5px}
  .scene-tabs button span {font-size: 9px}
  .scene-copy {display: block}
  .scene-copy h2 {font-size: 28px; margin-top: 7px}
  .scene-copy h2 br {display: none}
  .scene-copy>p:not(.scene-overline) {font-size: 13px; margin-top: 12px}
  .scene-copy ol {display: flex; flex-wrap: wrap; gap: 7px 15px; margin: 16px 0}
  .scene-copy li {font-size: 11px; gap: 6px; margin: 0}
  .scene-copy .button {margin-top: 0; min-height: 42px}
  .scene-copy .quiet-link {font-size: 11px; margin-top: 12px}
  .scene-media {padding: 8px; border-radius: 6px}
  .design-disclosure {font-size: 9px; margin-top: 8px}
  .more-capabilities {margin-top: 21px; padding-top: 15px}
  .more-capabilities summary {font-size: 12px}
  #concept-modal {width: calc(100vw - 16px); max-height: 95vh}
  .concept-modal-body {padding: 8px}
  .concept-modal-body p {font-size: 10px}
  .modal-head h2 {font-size: 14px}
  .compact-heading {padding-top: 28px; padding-bottom: 22px}
  .compact-heading h1 {font-size: 32px}
  .compact-heading>p:last-child {font-size: 13px}
  .plan-layout {grid-template-columns: 1fr; gap: 15px}
  .plan-card {padding: 24px}
  .plan-card-top {flex-wrap: nowrap}
  .plan-price {font-size: 52px; margin-top: 18px}
  .plan-card ul {margin: 17px 0 22px; font-size: 12px}
  .cost-sidebar {gap: 17px; padding-bottom: 8px}
  .cost-sidebar h2 {font-size: 22px}
  .cost-sidebar p {font-size: 11px}
  .cost-sidebar .quiet-link {font-size: 11px}
  .page-head h1 {font-size: 29px}
  .page-head {padding-top: 24px}
  .page-head>p {font-size: 13px}
  .guide-body h2 {font-size: 25px}
  .tutorial-section h2 {font-size: 24px}
  .guide-body,.tutorial-section {font-size: 14px}
  .guide-nav button {font-size: 12px}
  .tutorial-section,.guide-body {padding: 22px 18px}
  .api-step-footer {padding: 14px; gap: 12px}
  .api-step-footer .button {font-size: 12px; padding: 9px 11px}
}
@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto}
  * {transition: none!important}
}

.image-pan-hint{display:none}
@media(max-width:560px){.concept-modal-body .image-pan-hint{display:block;margin:0 0 10px;color:var(--brand);font-size:11px}}

/* Preserve the supplied white-background logo; no recoloring or blending. */
.brand .original-logo{width:46px;height:44px;flex:0 0 46px;object-fit:contain;mix-blend-mode:normal;border-radius:0}
@media(max-width:820px){.brand .original-logo{width:40px;height:38px;flex-basis:40px}}
@media(max-width:560px){.brand .original-logo{width:37px;height:35px;flex-basis:37px}}

.menu-toggle{white-space:nowrap}
@media(max-width:380px){.header-inner{gap:7px}.brand{gap:6px}.brand b{font-size:17px;letter-spacing:.5px}}

/* Keep the five site destinations visible, including in narrow windows. */
@media(max-width:1000px){
  html{scroll-padding-top:145px}
  .header-inner{flex-wrap:wrap;gap:8px 16px;padding:12px 0 0}
  .header-inner>.header-start{margin-left:auto}
  .nav,.nav.is-open{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));order:3;width:100%;margin:0;gap:0;padding:4px 0 0;border-top:1px solid #E1E7F0;font-size:13px}
  .nav a{display:block;text-align:center;padding:10px 3px;min-height:42px}
  .nav a[aria-current=page]{color:var(--brand);background:#EAF0FF88;border-radius:4px 4px 0 0}
  .nav a[aria-current=page]:after{bottom:0;left:12px;right:12px}
}
@media(max-width:560px){.nav,.nav.is-open{font-size:12px}.header-inner{padding-bottom:0;gap:9px 12px}}
@media(max-width:360px){.nav,.nav.is-open{font-size:10.5px}.nav a{padding-left:1px;padding-right:1px}}

/* Public registration remains readable and centered with or without JavaScript. */
.footer-registration{display:flex;justify-content:center;text-align:center;margin-top:15px;font-size:12px;line-height:1.8;color:#65758D}
.footer-registration a{text-decoration:underline;text-underline-offset:3px}
.footer-registration a:hover{color:var(--brand)}
.availability-note{padding:12px 0;border-top:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.8}