:root {
  /* Foundation tokens: a restrained, high-contrast owner product rather than
     a collection of one-off page treatments. */
  --mybyd-font-sans: Inter, Avenir, "Avenir Next", "Segoe UI", sans-serif;
  --mybyd-font-display: Inter, Avenir, "Avenir Next", "Segoe UI", sans-serif;
  --mybyd-ink: #061d2c;
  --mybyd-ink-deep: #080f1a;
  --mybyd-ink-raised: #0a2b40;
  --mybyd-panel: #0b2233;
  --mybyd-surface: #f7f7f3;
  --mybyd-surface-muted: #e8eef2;
  --mybyd-text: #eef5f8;
  --mybyd-text-on-light: #092032;
  --mybyd-blue: #78bef7;
  --mybyd-blue-strong: #2c91e2;
  --mybyd-blue-soft: rgba(120, 190, 247, .14);
  --mybyd-coral: #ff7868;
  --mybyd-success: #aee0c3;
  --mybyd-border: rgba(184, 214, 231, .24);
  --mybyd-border-strong: rgba(124, 196, 255, .48);
  --mybyd-text-muted: #bdd1dc;
  --mybyd-radius-card: 18px;
  --mybyd-radius-control: 12px;
  --mybyd-radius-pill: 999px;
  --mybyd-space-1: .5rem;
  --mybyd-space-2: 1rem;
  --mybyd-space-3: 1.5rem;
  --mybyd-space-4: 2.5rem;
  --mybyd-space-5: 4rem;
  --mybyd-content-width: 76rem;
  --mybyd-shadow-raised: 0 1.25rem 3rem rgba(0, 0, 0, .2);
  --mybyd-motion-fast: 160ms;
  --mybyd-motion-standard: 220ms;
  --mybyd-ease-out: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

.cms-shell { background: var(--mybyd-ink); color: var(--mybyd-text); font-family: var(--mybyd-font-sans); }
.cms-shell :focus-visible { outline: 2px solid var(--mybyd-blue); outline-offset: 3px; }
.cms-shell ::selection { background: var(--mybyd-blue); color: var(--mybyd-ink-deep); }
.cms-card { border: 1px solid var(--mybyd-border); border-radius: var(--mybyd-radius-card); }
.cms-card--light { background: var(--mybyd-surface); color: var(--mybyd-text-on-light); }
.cms-action { background: var(--mybyd-coral); border-radius: var(--mybyd-radius-control); color: #081923; }
.cms-source--official { color: #0b5b83; }
.cms-source--owner { color: #83520b; }
.cms-source--independent { color: #4d5660; }

.cms-shell main > .cms-block { padding-inline: clamp(1.5rem, 9vw, 10rem); }
.cms-block { margin-block: var(--mybyd-space-3); }
.cms-shell main > .cms-hero {
  margin: 0;
  min-height: clamp(22rem, 38vw, 32rem);
  padding-block: clamp(4rem, 9vw, 8rem);
  background: radial-gradient(circle at 78% 24%, rgba(49, 122, 162, .62), transparent 29%), linear-gradient(122deg, #071a2a, #0b3852);
  border-bottom: 1px solid var(--mybyd-border);
}
.cms-hero > p:first-child { margin: 0; color: var(--mybyd-blue); font-size: .72rem; font-weight: 900; letter-spacing: .16em; }
.cms-hero :is(h1, h2) { max-width: 13ch; margin: 1rem 0; font-size: clamp(3rem, 7vw, 6.2rem); line-height: .92; letter-spacing: -.075em; }
.cms-hero > p:last-child { max-width: 40rem; margin: 0; color: #c8dce7; font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.55; }
.cms-shell main > .cms-introduction,
.cms-shell main > .cms-steps,
.cms-shell main > .cms-specification-table,
.cms-shell main > .cms-faq,
.cms-shell main > .cms-related-content,
.cms-shell main > .cms-model-applicability,
.cms-shell main > .cms-source-panel,
.cms-shell main > .cms-garage-cta { max-width: var(--mybyd-content-width); margin-inline: auto; }
.cms-introduction { font-size: 1.125rem; line-height: 1.6; max-inline-size: 68ch; }
.cms-safety-callout { border-inline-start: .35rem solid var(--mybyd-coral); background: var(--mybyd-ink-raised); padding: var(--mybyd-space-3); }
.cms-steps ol { display: grid; gap: var(--mybyd-space-2); padding-inline-start: var(--mybyd-space-3); }
.cms-source-panel { border: 1px solid var(--mybyd-border); border-radius: var(--mybyd-radius-card); padding: var(--mybyd-space-3); }
.cms-source-panel p { margin: 0 0 .5rem; font-weight: 850; }
.cms-source-panel a { color: var(--mybyd-blue); font-weight: 800; }
.cms-owner-consensus { border: 1px solid color-mix(in srgb, var(--mybyd-coral) 55%, var(--mybyd-border)); border-radius: var(--mybyd-radius-card); padding: var(--mybyd-space-3); background: linear-gradient(135deg, color-mix(in srgb, var(--mybyd-coral) 10%, transparent), transparent); }
.cms-owner-consensus > p:first-child { margin: 0 0 .45rem; color: var(--mybyd-coral); font-weight: 850; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.cms-owner-consensus h2 { margin: 0 0 .65rem; }
.cms-owner-consensus small { color: var(--mybyd-muted); }
.cms-layout { display: grid; gap: var(--mybyd-space-3); }
.cms-layout--full_width { grid-template-columns: 1fr; }
.cms-layout--two_equal { grid-template-columns: 1fr 1fr; }
.cms-layout--two_wide_left { grid-template-columns: 2fr 1fr; }
.cms-layout--two_wide_right { grid-template-columns: 1fr 2fr; }
.cms-layout--two_three_two { grid-template-columns: 3fr 2fr; }
.cms-layout--three_equal { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 48rem) { .cms-layout { grid-template-columns: 1fr; } }

/* Editorial document system. Every guide, answer and manual receives this
   shared reading frame, so a new CMS entry can never fall back to raw text. */
.cms-document { padding-bottom: clamp(3.5rem, 8vw, 7rem); overflow: hidden; }
.cms-document-hero {
  box-sizing: border-box; min-height: clamp(23rem, 38vw, 29rem); position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, .7fr);
  align-items: center; gap: clamp(2rem, 7vw, 8rem);
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 10vw, 11rem);
  border-bottom: 1px solid var(--mybyd-border);
  background:
    radial-gradient(circle at 84% 31%, rgba(72, 157, 208, .3), transparent 20rem),
    radial-gradient(circle at 55% 118%, rgba(255, 120, 104, .13), transparent 26rem),
    repeating-linear-gradient(154deg, transparent 0 30px, rgba(151, 208, 237, .055) 31px 32px),
    linear-gradient(120deg, #041827 0%, #092e45 62%, #071d2d 100%);
}
.cms-document-hero::after { content: ''; position: absolute; inset: auto 0 0; height: 8rem; z-index: -1; background: linear-gradient(transparent, rgba(1, 13, 23, .38)); }
.cms-document-hero > div:first-child { max-width: 50rem; }
.cms-document-kicker { margin: 0 0 1rem; color: var(--mybyd-blue); font-size: .72rem; letter-spacing: .18em; font-weight: 900; }
.cms-document-hero h1 { max-width: 12ch; margin: 0; font-size: clamp(2.8rem, 5vw, 5.5rem); line-height: .91; letter-spacing: -.078em; text-wrap: balance; }
.cms-document-deck { max-width: 39rem; margin: 1.7rem 0 0; color: #c4d8e4; font-size: clamp(1.03rem, 1.5vw, 1.22rem); line-height: 1.55; }
.cms-document-trust { display: flex; flex-wrap: wrap; gap: .65rem 1.2rem; margin-top: 1.8rem; color: #d2eaf7; font-size: .78rem; font-weight: 800; }
.cms-document-trust span { display: inline-flex; align-items: center; gap: .45rem; }
.cms-document-trust span::before { content: '✓'; display: inline-grid; place-items: center; inline-size: 1.15rem; block-size: 1.15rem; border-radius: 50%; background: rgba(120, 190, 247, .18); color: var(--mybyd-blue); font-size: .72rem; }
.cms-document-hero-media { position: relative; align-self: end; min-height: 13rem; }
.cms-document-hero-media::before { content: ''; position: absolute; inset: 15% 3% 0; border-radius: 50%; background: radial-gradient(ellipse, rgba(118, 195, 239, .3), transparent 66%); filter: blur(7px); }
.cms-document-hero-media img { position: relative; z-index: 1; display: block; inline-size: 100%; max-height: 23rem; object-fit: contain; filter: drop-shadow(0 2rem 1.6rem rgba(0, 0, 0, .45)); }
.cms-document-body { max-width: 74rem; margin: 0 auto; padding: clamp(2rem, 5vw, 5rem) clamp(1.25rem, 3vw, 2rem) 0; }
.cms-document-body > .cms-block { margin: 0 0 1.35rem; }
.cms-document-body .cms-introduction { max-width: none; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid rgba(120, 190, 247, .27); border-radius: 1.35rem; background: linear-gradient(135deg, rgba(18, 61, 85, .82), rgba(9, 34, 51, .96)); font-size: clamp(1.16rem, 2vw, 1.55rem); line-height: 1.48; color: #f2f8fb; box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .13); }
.cms-document-body .cms-introduction::before { content: 'THE PRACTICAL ANSWER'; display: block; margin-bottom: .8rem; color: var(--mybyd-blue); font-size: .7rem; font-weight: 900; letter-spacing: .15em; }
.cms-document-body .cms-model-applicability { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1.1rem 1.2rem; border-radius: 1rem; border: 1px solid rgba(119, 189, 245, .22); background: rgba(13, 52, 75, .5); }
.cms-document-body .cms-model-applicability strong { display: inline-flex; align-items: center; min-height: 1.8rem; padding: 0 .7rem; border-radius: 999px; background: rgba(120, 190, 247, .14); color: #bde2f9; font-size: .78rem; }
.cms-document-body .cms-model-applicability p { margin: .1rem 0 0; color: #d0e0e8; line-height: 1.5; }
.cms-document-body .cms-safety-callout { position: relative; padding: clamp(1.4rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.2rem); border: 1px solid rgba(255, 120, 104, .36); border-inline-start: .38rem solid var(--mybyd-coral); border-radius: 1rem; background: linear-gradient(115deg, rgba(83, 39, 42, .44), rgba(17, 42, 57, .88)); }
.cms-document-body .cms-safety-callout h2 { margin: 0 0 .55rem; font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: -.04em; }
.cms-document-body .cms-safety-callout h2::before { content: 'SAFETY'; display: block; margin-bottom: .45rem; color: #ffad9f; font-size: .66rem; letter-spacing: .15em; }
.cms-document-body .cms-safety-callout p { max-width: 68ch; margin: 0; color: #e6eff4; line-height: 1.55; }
.cms-document-body .cms-source-panel { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 1.5rem; border: 1px solid rgba(120, 190, 247, .28); border-radius: 1rem; background: rgba(7, 32, 48, .8); }
.cms-document-body .cms-source-panel::before { content: 'SOURCE CHECKED'; color: #8fd5ff; font-size: .67rem; font-weight: 900; letter-spacing: .14em; }
.cms-document-body .cms-source-panel p { flex: 1; margin: 0; color: #fff; font-size: 1rem; font-weight: 800; }
.cms-document-body .cms-source-panel a { padding: .75rem 1rem; border: 1px solid rgba(120, 190, 247, .55); border-radius: 999px; color: #e9f7ff; text-decoration: none; white-space: nowrap; transition: .18s ease; }
.cms-document-body .cms-source-panel a:hover { transform: translateY(-2px); background: var(--mybyd-blue); color: #062033; }
.cms-document-body .cms-steps { counter-reset: owner-step; }
.cms-document-body .cms-steps::before { content: 'WHAT TO DO'; display: block; margin: 2.4rem 0 1rem; color: var(--mybyd-blue); font-size: .72rem; font-weight: 900; letter-spacing: .16em; }
.cms-document-body .cms-steps ol { gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--mybyd-border); }
.cms-document-body .cms-steps li { counter-increment: owner-step; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem; padding: 1.35rem 0; border-bottom: 1px solid var(--mybyd-border); color: #ebf5f9; font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.5; }
.cms-document-body .cms-steps li::before { content: '0' counter(owner-step); color: var(--mybyd-blue); font-size: .8rem; font-weight: 900; letter-spacing: .1em; }
.cms-document-body .cms-faq { margin-top: 2.8rem; }
.cms-document-body .cms-faq::before { content: 'USEFUL CONTEXT'; display: block; margin-bottom: 1rem; color: var(--mybyd-blue); font-size: .72rem; font-weight: 900; letter-spacing: .16em; }
.cms-document-body .cms-faq details { border-bottom: 1px solid var(--mybyd-border); padding: 1rem 0; }
.cms-document-body .cms-faq summary { cursor: pointer; color: #fff; font-weight: 800; }
.cms-document-body .cms-faq p { max-width: 68ch; color: #c8dae4; line-height: 1.55; }
.cms-document-body .cms-related-content { margin-top: 2.5rem; padding: 1.5rem; border-radius: 1rem; background: #0b2d42; }
.cms-document-body .cms-related-content ul { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.cms-document-body .cms-related-content a { display: inline-block; padding: .65rem .85rem; border: 1px solid var(--mybyd-border); border-radius: 999px; color: #d9eef9; text-decoration: none; font-size: .85rem; font-weight: 800; }
@media (max-width: 50rem) {
  .cms-document-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 4rem; }
  .cms-document-hero h1 { max-width: 12ch; }
  .cms-document-hero-media { display: none; }
  .cms-document-body .cms-model-applicability { grid-template-columns: 1fr; }
  .cms-document-body .cms-source-panel { align-items: flex-start; flex-wrap: wrap; }
  .cms-document-body .cms-source-panel::before { flex-basis: 100%; }
}

/* Universal guide template -------------------------------------------------
   This is a semantic theme contract, not a hard-coded page. Every editorial
   document carries the same stable classes, so a future theme can reskin the
   experience without migrating content, sources, metadata or canonical URLs. */
.cms-template--universal-guide { --guide-accent: var(--mybyd-blue); }
.cms-template--universal-guide .cms-document-hero { overflow: hidden; }
.cms-template--universal-guide .cms-document-hero {
  min-height: clamp(20rem, 30vw, 25rem);
  padding-block: clamp(2.8rem, 4.5vw, 4.5rem);
}
.cms-template--universal-guide .cms-document-hero h1 {
  max-width: 15ch;
  font-size: clamp(2.45rem, 4.25vw, 4.65rem);
  line-height: .9;
}
.cms-template--universal-guide .cms-document-deck { margin-top: 1.2rem; }
.cms-template--universal-guide .cms-document-hero-content { position: relative; z-index: 2; }
.cms-document-guide-visual {
  position: relative; z-index: 1; min-height: 19rem; display: grid; place-items: center;
  isolation: isolate;
}
.cms-document-guide-visual::before,
.cms-document-guide-visual::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.cms-document-guide-visual::before {
  inline-size: 21rem; block-size: 21rem; border: 1px solid rgba(151, 214, 246, .23);
  background: radial-gradient(circle, rgba(57, 145, 204, .21) 0 4%, transparent 4.5% 17%, rgba(120, 190, 247, .1) 17.5% 18%, transparent 18.5% 100%);
  box-shadow: inset 0 0 5rem rgba(44, 145, 226, .1), 0 0 5rem rgba(6, 18, 28, .18);
}
.cms-document-guide-visual::after {
  inline-size: 15rem; block-size: 15rem; border: 1px dashed rgba(120, 190, 247, .32);
  animation: mybyd-guide-orbit 26s linear infinite;
}
.cms-guide-visual-orbit { position: absolute; inline-size: 26rem; block-size: 26rem; border: 1px solid rgba(120, 190, 247, .09); border-radius: 50%; }
.cms-guide-visual-card {
  position: relative; z-index: 1; inline-size: min(100%, 19rem); padding: 1.5rem;
  border: 1px solid rgba(182, 225, 248, .33); border-radius: 1.25rem;
  background: linear-gradient(145deg, rgba(18, 64, 91, .95), rgba(5, 28, 44, .92));
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .06);
  transform: rotate(-3deg);
}
.cms-guide-visual-card span { display: block; color: var(--guide-accent); font-size: .62rem; font-weight: 900; letter-spacing: .17em; }
.cms-guide-visual-card strong { display: block; margin-top: .75rem; color: #fff; font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: .95; letter-spacing: -.065em; }
.cms-guide-visual-card i { display: block; block-size: .35rem; inline-size: 62%; margin: 1.5rem 0 1rem; border-radius: 99px; background: linear-gradient(90deg, var(--guide-accent), rgba(120, 190, 247, .1)); }
.cms-guide-visual-card small { color: #bed4e1; font-size: .78rem; font-weight: 700; }
.cms-guide-visual-route { position: absolute; inset: auto 4% 4% auto; z-index: 2; display: flex; gap: .52rem; align-items: center; }
.cms-guide-visual-route::before { content: ''; inline-size: 3rem; block-size: 1px; background: rgba(120, 190, 247, .55); }
.cms-guide-visual-route b { inline-size: .56rem; block-size: .56rem; border: 2px solid #e9f7ff; border-radius: 50%; background: var(--guide-accent); box-shadow: 0 0 0 .3rem rgba(120, 190, 247, .12); }
.cms-guide-visual-route b:nth-child(2) { opacity: .68; }.cms-guide-visual-route b:nth-child(3) { opacity: .38; }

/* Topic variation is intentionally presentational only. It never adds vehicle
   specifications; claims remain inside reviewed CMS blocks and source panels. */
.cms-template--universal-guide[data-guide-topic="charging"] { --guide-accent: #ffd06e; }
.cms-template--universal-guide[data-guide-topic="charging"] .cms-document-hero { background:
  radial-gradient(circle at 83% 30%, rgba(255, 197, 92, .18), transparent 19rem),
  radial-gradient(circle at 54% 118%, rgba(55, 157, 208, .18), transparent 26rem),
  repeating-linear-gradient(154deg, transparent 0 30px, rgba(151, 208, 237, .055) 31px 32px),
  linear-gradient(120deg, #041827 0%, #092e45 62%, #071d2d 100%);
}
.cms-template--universal-guide[data-guide-topic="charging"] .cms-guide-visual-card { transform: rotate(3deg); }
.cms-template--universal-guide[data-guide-topic="charging"] .cms-document-body .cms-steps ol { position: relative; display: grid; gap: .8rem; padding: .2rem 0 .2rem 1rem; border: 0; }
.cms-template--universal-guide[data-guide-topic="charging"] .cms-document-body .cms-steps ol::before { content: ''; position: absolute; inset: 1.6rem auto 1.6rem 1.9rem; inline-size: 1px; background: linear-gradient(var(--guide-accent), rgba(120, 190, 247, .14)); }
.cms-template--universal-guide[data-guide-topic="charging"] .cms-document-body .cms-steps li { position: relative; grid-template-columns: 3.1rem minmax(0, 1fr); padding: 1.3rem 1.4rem; border: 1px solid rgba(120, 190, 247, .2); border-radius: 1rem; background: linear-gradient(100deg, rgba(18, 61, 85, .55), rgba(7, 30, 45, .72)); }
.cms-template--universal-guide[data-guide-topic="charging"] .cms-document-body .cms-steps li::before { position: relative; z-index: 1; display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border: 1px solid rgba(255, 208, 110, .75); border-radius: 50%; background: #113d56; color: #ffe1a1; }

/* Official-information journeys ------------------------------------------------
   Manuals and other official-source pages benefit from showing the verified
   destination before the supporting safety and step-by-step material.  This
   is layout only: it keeps the CMS content and document order intact. */
.cms-template--universal-guide[data-guide-topic="manuals"] { --guide-accent: #9bd7ff; }
.cms-template--universal-guide[data-guide-topic="manuals"] .cms-document-hero {
  background:
    radial-gradient(circle at 76% 26%, rgba(139, 211, 255, .16), transparent 20rem),
    radial-gradient(circle at 26% 105%, rgba(49, 130, 180, .16), transparent 27rem),
    repeating-linear-gradient(154deg, transparent 0 30px, rgba(151, 208, 237, .055) 31px 32px),
    linear-gradient(120deg, #041827 0%, #092e45 62%, #071d2d 100%);
}
.cms-template--universal-guide[data-guide-topic="manuals"] .cms-document-body { display: flex; flex-direction: column; gap: 1.35rem; }
.cms-template--universal-guide[data-guide-topic="manuals"] .cms-document-body > .cms-block { margin: 0; }
.cms-template--universal-guide[data-guide-topic="manuals"] .cms-introduction { order: 1; }
.cms-template--universal-guide[data-guide-topic="manuals"] .cms-source-panel {
  order: 2; position: relative; overflow: hidden; min-height: 9.5rem; padding: clamp(1.5rem, 3vw, 2.2rem);
  border-color: rgba(155, 215, 255, .48); border-radius: 1.3rem;
  background: linear-gradient(112deg, rgba(16, 75, 108, .95), rgba(5, 28, 44, .96));
  box-shadow: 0 1.4rem 3.2rem rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .09);
}
.cms-template--universal-guide[data-guide-topic="manuals"] .cms-source-panel::before { content: 'OFFICIAL BYD DESTINATION'; position: relative; z-index: 1; color: #bde8ff; }
.cms-template--universal-guide[data-guide-topic="manuals"] .cms-source-panel::after { content: ''; position: absolute; inline-size: 16rem; block-size: 16rem; inset: -8rem -4rem auto auto; border: 1px solid rgba(158, 221, 255, .22); border-radius: 50%; box-shadow: 0 0 0 2.3rem rgba(106, 196, 244, .05), 0 0 0 5.1rem rgba(106, 196, 244, .035); }
.cms-template--universal-guide[data-guide-topic="manuals"] .cms-source-panel p { position: relative; z-index: 1; max-inline-size: 33ch; font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: -.035em; }
.cms-template--universal-guide[data-guide-topic="manuals"] .cms-source-panel a { position: relative; z-index: 1; border-color: rgba(196, 234, 255, .7); background: #dff4ff; color: #062033; font-weight: 900; }
.cms-template--universal-guide[data-guide-topic="manuals"] .cms-safety-callout { order: 3; }
.cms-template--universal-guide[data-guide-topic="manuals"] .cms-steps { order: 4; }
.cms-template--universal-guide[data-guide-topic="manuals"] .cms-steps::before { content: 'YOUR MANUAL ROUTE'; }

/* Manual explorer: information architecture, not another pile of cards. */
.cms-template--universal-guide[data-guide-topic="manuals"] .cms-manual-explorer { order: 0; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(1rem, 3vw, 2rem); border-bottom: 1px solid rgba(139, 210, 246, .2); }
.cms-manual-explorer-lead > p, .cms-manual-models > p, .cms-manual-official > span { margin: 0 0 .85rem; color: #9bd7ff; font-size: .68rem; font-weight: 900; letter-spacing: .17em; }
.cms-manual-explorer-lead h2 { max-inline-size: 11ch; margin: 0; color: #fff; font-size: clamp(2.1rem, 4vw, 4.2rem); line-height: .92; letter-spacing: -.07em; }
.cms-manual-explorer-lead > span { display: block; max-inline-size: 34rem; margin-top: 1.35rem; color: #bfd3df; font-size: 1rem; line-height: 1.6; }
.cms-manual-explorer-action { align-self: end; }
.cms-manual-explorer-action label { display: block; margin-bottom: .75rem; color: #d9e9f2; font-size: .85rem; font-weight: 800; }
.cms-manual-explorer-action form > div { display: flex; gap: .65rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(155, 215, 255, .42); }
.cms-manual-explorer-action input { min-inline-size: 0; flex: 1; padding: .7rem 0; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-weight: 750; }
.cms-manual-explorer-action input::placeholder { color: #84a4b6; }
.cms-manual-explorer-action button { border: 0; background: transparent; color: #9bd7ff; font: inherit; font-size: .85rem; font-weight: 900; cursor: pointer; white-space: nowrap; }
.cms-manual-explorer-action button b { font-size: 1.25rem; vertical-align: -1px; }
.cms-manual-explorer-action nav { display: flex; flex-wrap: wrap; gap: .55rem .8rem; margin-top: 1rem; }
.cms-manual-explorer-action nav a { color: #cce5f3; font-size: .82rem; font-weight: 800; text-decoration: none; }
.cms-manual-explorer-action nav a span { margin-left: .22rem; color: #78beee; }
.cms-manual-models { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 1.5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(139, 210, 246, .14); }
.cms-manual-models > p { flex: 0 0 auto; margin: 0; }
.cms-manual-models > div { display: flex; flex-wrap: wrap; gap: .55rem 1rem; }
.cms-manual-models a { color: #f0f7fb; font-size: .86rem; font-weight: 850; text-decoration: none; }
.cms-manual-models a::after { content: ' →'; color: #78beee; }
.cms-manual-official { grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: .75rem 1.2rem; padding: 1.05rem 0 0; border-top: 1px solid rgba(139, 210, 246, .14); }
.cms-manual-official > span { margin: 0; }
.cms-manual-official strong { color: #fff; font-size: 1rem; }
.cms-manual-official a { color: #9bd7ff; font-size: .86rem; font-weight: 900; text-decoration: none; }

@media (max-width: 50rem) {
  .cms-template--universal-guide[data-guide-topic="manuals"] .cms-manual-explorer { grid-template-columns: 1fr; gap: 2rem; }
  .cms-manual-explorer-lead h2 { max-inline-size: 14ch; }
  .cms-manual-models { display: block; }
  .cms-manual-models > p { margin-bottom: .7rem; }
  .cms-manual-explorer-action form > div { flex-wrap: wrap; }
  .cms-manual-explorer-action button { padding: .25rem 0; }
}

@media (max-width: 50rem) {
  .cms-template--universal-guide[data-guide-topic="manuals"] .cms-source-panel { min-height: 0; }
  .cms-template--universal-guide[data-guide-topic="manuals"] .cms-source-panel::after { inline-size: 10rem; block-size: 10rem; inset: -5rem -5rem auto auto; }
}

@keyframes mybyd-guide-orbit { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .cms-document-guide-visual::after { animation: none; } }

/* MyBYD Editorial 02 -------------------------------------------------------
   A deliberately opinionated theme layer.  It uses the stable CMS template
   contract above, so editorial content stays portable if the visual theme is
   replaced later. */
:root {
  --mybyd-ink: #080f1a;
  --mybyd-ink-raised: #0f2f4a;
  --mybyd-surface: #f6f8fb;
  --mybyd-text: #f6fbff;
  --mybyd-text-on-light: #0a1e2e;
  --mybyd-blue: #7cc4ff;
  --mybyd-blue-strong: #48aefa;
  --mybyd-coral: #ff6b5a;
  --mybyd-border: rgba(124, 196, 255, .19);
  --mybyd-radius-card: 1.5rem;
  --mybyd-content-width: 78rem;
}
.cms-shell { min-height: 100vh; background: var(--mybyd-ink-deep); color: #f6fbff; font-family: var(--mybyd-font-sans); }
.cms-shell main { overflow: clip; }
.cms-document { position: relative; padding-bottom: clamp(5rem, 10vw, 9rem); background: radial-gradient(circle at 90% 56%, rgba(124,196,255,.07), transparent 25rem), #080f1a; }
.cms-document-hero { min-height: clamp(22rem, 34vw, 30rem); grid-template-columns: minmax(0, 1.06fr) minmax(16rem, .7fr); gap: clamp(1.75rem, 5vw, 5rem); padding: clamp(3rem, 5.5vw, 5rem) max(1.5rem, calc((100vw - 78rem) / 2)); border: 0; background: radial-gradient(circle at 82% 30%, rgba(124,196,255,.18), transparent 18rem), radial-gradient(circle at 42% 108%, rgba(255,107,90,.12), transparent 22rem), linear-gradient(115deg, #080f1a 0%, #0b2941 58%, #0a1e2e 100%); }
.cms-document-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .35; background-image: linear-gradient(125deg, transparent 0 49.8%, rgba(124,196,255,.19) 50%, transparent 50.2%); background-size: 58px 58px; mask-image: linear-gradient(to right, #000, transparent 80%); }
.cms-document-hero::after { height: 13rem; background: linear-gradient(transparent, #080f1a); }
.cms-document-hero-content { animation: mybyd-rise .7s cubic-bezier(.2,.8,.2,1) both; }
.cms-document-kicker { display: flex; align-items: center; gap: .65rem; color: #7cc4ff; font-size: .69rem; letter-spacing: .19em; }
.cms-document-kicker::before { content: ''; inline-size: 2rem; block-size: 1px; background: currentColor; }
.cms-document-hero h1 { max-width: 12ch; margin-top: 1rem; font-size: clamp(3rem, 5.4vw, 5.75rem); line-height: .88; letter-spacing: -.04em; word-spacing: .08em; text-wrap: balance; }
.cms-document-deck { max-width: 35rem; margin-top: 1.35rem; color: #c6dae7; font-size: clamp(1.02rem, 1.45vw, 1.2rem); line-height: 1.52; }
.cms-document-trust { gap: .6rem; margin-top: 2rem; }
.cms-document-trust span { padding: .45rem .7rem; border: 1px solid rgba(124,196,255,.24); border-radius: 999px; background: rgba(7,31,48,.36); color: #dcecf6; }
.cms-document-trust span::before { display: none; }
.cms-document-hero-media { align-self: center; min-height: 14rem; animation: mybyd-float .8s .12s cubic-bezier(.2,.8,.2,1) both; }
.cms-document-hero-media::before { inset: 8% -10% 0; background: radial-gradient(ellipse, rgba(124,196,255,.32), transparent 67%); }
.cms-document-hero-media img { max-height: 22rem; transform: translateX(3%); filter: drop-shadow(0 2.5rem 2rem rgba(0,0,0,.48)); }
.cms-document-guide-visual { min-height: 16rem; transform: none; }
.cms-document-guide-visual::before { inline-size: 28rem; block-size: 28rem; border-color: rgba(124,196,255,.16); background: radial-gradient(circle, rgba(124,196,255,.22) 0 2%, transparent 2.5% 16%, rgba(124,196,255,.08) 16.5% 17%, transparent 17.5%); }
.cms-document-guide-visual::after { inline-size: 20rem; block-size: 20rem; border-color: rgba(255,255,255,.23); }
.cms-guide-visual-orbit { inline-size: 34rem; block-size: 34rem; border-color: rgba(124,196,255,.08); }
.cms-guide-visual-card { inline-size: min(100%, 22rem); padding: 2rem; border-radius: 1.7rem; border-color: rgba(255,255,255,.16); background: linear-gradient(145deg, rgba(20,66,95,.9), rgba(8,15,26,.96)); box-shadow: 0 2.5rem 6rem rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.1); }
.cms-guide-visual-card strong { font-size: clamp(2rem, 3.5vw, 3rem); }
.cms-guide-visual-route { inset: auto 3% 7% auto; }
.cms-document-body { max-width: 76rem; padding: clamp(2.2rem, 5vw, 5rem) clamp(1.25rem, 3vw, 2rem) 0; }
.cms-document-body > .cms-block { margin-bottom: 2rem; }
.cms-document-body .cms-introduction { max-width: 60rem; padding: 0 0 0 clamp(1.2rem, 3vw, 2.4rem); border: 0; border-radius: 0; border-left: 2px solid #7cc4ff; background: transparent; box-shadow: none; font-size: clamp(1.35rem, 2.45vw, 2.05rem); line-height: 1.35; color: #f2f8fb; }
.cms-document-body .cms-introduction::before { margin-bottom: 1.1rem; color: #7cc4ff; }
.cms-document-body .cms-source-panel { position: relative; overflow: hidden; padding: clamp(1.7rem, 3vw, 2.8rem); border: 1px solid rgba(124,196,255,.26); border-radius: 1.5rem; background: linear-gradient(120deg, #0f2f4a, #091c2d); box-shadow: 0 1.8rem 4rem rgba(0,0,0,.2); }
.cms-document-body .cms-source-panel::after { content: '↗'; position: absolute; inset: -2.2rem 1.4rem auto auto; color: rgba(124,196,255,.14); font-size: 9rem; font-weight: 300; line-height: 1; }
.cms-document-body .cms-source-panel p { max-width: 35ch; font-size: clamp(1.15rem, 2.1vw, 1.55rem); letter-spacing: -.04em; }
.cms-document-body .cms-source-panel a { position: relative; z-index: 1; padding: .9rem 1.2rem; border-color: transparent; background: #f6f8fb; color: #0a1e2e; }
.cms-document-body .cms-source-panel a:hover { background: #7cc4ff; color: #080f1a; }
.cms-document-body .cms-safety-callout { border: 0; border-left: 2px solid #ff6b5a; border-radius: 0; background: linear-gradient(90deg, rgba(255,107,90,.11), transparent 72%); }
.cms-document-body .cms-steps::before, .cms-document-body .cms-faq::before { color: #7cc4ff; }
.cms-document-body .cms-steps ol { max-width: 65rem; border-color: rgba(255,255,255,.13); }
.cms-document-body .cms-steps li { grid-template-columns: 4.4rem minmax(0,1fr); padding: 1.65rem 0; border-color: rgba(255,255,255,.13); font-size: clamp(1.08rem, 1.6vw, 1.28rem); }
.cms-document-body .cms-steps li::before { color: #7cc4ff; }
.cms-template--universal-guide[data-guide-topic="charging"] .cms-document-body .cms-steps ol { padding: 0; }
.cms-template--universal-guide[data-guide-topic="charging"] .cms-document-body .cms-steps ol::before { display: none; }
.cms-template--universal-guide[data-guide-topic="charging"] .cms-document-body .cms-steps li { margin-bottom: .75rem; padding: 1.45rem 1.55rem; border-color: rgba(255,208,110,.24); border-radius: 1rem; background: linear-gradient(100deg, rgba(20,62,84,.62), rgba(8,15,26,.2)); }
.cms-template--universal-guide[data-guide-topic="charging"] .cms-document-body .cms-steps li::before { background: #142f43; }
.cms-document-body .cms-faq details { max-width: 65rem; padding: 1.2rem 0; border-color: rgba(255,255,255,.13); }
.cms-document-body .cms-faq summary { font-size: clamp(1rem, 1.7vw, 1.2rem); }
.cms-document-body .cms-related-content { padding: 0; border-radius: 0; background: transparent; }
.cms-document-body .cms-related-content a { border-color: rgba(124,196,255,.28); background: rgba(124,196,255,.06); }
.cms-template--universal-guide[data-guide-topic="manuals"] .cms-document-hero { background: radial-gradient(circle at 80% 27%, rgba(124,196,255,.22), transparent 20rem), linear-gradient(118deg, #080f1a, #0c304a 60%, #0a1e2e); }
.cms-template--universal-guide[data-guide-topic="manuals"] .cms-source-panel { min-height: 0; border-radius: 1.5rem; background: linear-gradient(118deg, #124866, #0b2436); }
.cms-template--universal-guide[data-guide-topic="manuals"] .cms-source-panel::before { color: #9de1ff; }
.cms-template--universal-guide[data-guide-topic="manuals"] .cms-source-panel::after { content: '↗'; border: 0; box-shadow: none; color: rgba(255,255,255,.1); font-size: 9rem; }
.cms-template--universal-guide[data-guide-topic="manuals"] .cms-manual-explorer { gap: clamp(2rem, 7vw, 7rem); padding-top: 0; padding-bottom: 2.2rem; }
.cms-manual-explorer-lead h2 { font-size: clamp(2.8rem, 5.2vw, 5.25rem); }
.cms-manual-explorer-action { padding: 1.5rem 0; border-top: 1px solid rgba(124,196,255,.2); }
.cms-manual-explorer-action form > div { border-bottom-color: rgba(124,196,255,.5); }
.cms-manual-explorer-action button { color: #7cc4ff; }
.cms-manual-models { margin-top: .3rem; }
.cms-manual-models a { transition: color .16s ease, transform .16s ease; }
.cms-manual-models a:hover { color: #7cc4ff; transform: translateX(3px); }
.cms-manual-official { padding-top: 1.4rem; }
@keyframes mybyd-rise { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes mybyd-float { from { opacity: 0; transform: translate(2rem, 1.5rem); } to { opacity: 1; transform: translate(0, 0); } }
@media (max-width: 50rem) {
  .cms-document-hero { min-height: 0; padding: 3.5rem 1.25rem 3rem; }
  .cms-document-hero h1 { font-size: clamp(2.75rem, 11.5vw, 4.15rem); line-height: .9; }
  .cms-document-hero-media, .cms-document-guide-visual { display: none; }
  .cms-document-body .cms-introduction { font-size: 1.3rem; }
  .cms-document-body .cms-source-panel { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .cms-document-hero-content, .cms-document-hero-media { animation: none; } }

/* Evidence should support the reading flow, not become a second hero. */
.cms-document-body .cms-source-panel,
.cms-template--universal-guide[data-guide-topic] .cms-document-body .cms-source-panel {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:.85rem 1.15rem;
  min-height:0;
  padding:1rem 1.15rem;
  border:1px solid rgba(124,196,255,.26);
  border-radius:1rem;
  background:linear-gradient(100deg,rgba(16,53,77,.94),rgba(8,28,43,.98));
  box-shadow:none;
}
.cms-document-body .cms-source-panel::before,
.cms-template--universal-guide[data-guide-topic] .cms-document-body .cms-source-panel::before {
  content:'SOURCE CHECKED';
  color:#8fd5ff;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.13em;
  white-space:nowrap;
}
.cms-document-body .cms-source-panel::after,
.cms-template--universal-guide[data-guide-topic] .cms-document-body .cms-source-panel::after { display:none; }
.cms-document-body .cms-source-panel--affiliate,
.cms-template--universal-guide[data-guide-topic] .cms-document-body .cms-source-panel--affiliate {
  grid-template-columns:auto minmax(0,1fr) auto;
  background:linear-gradient(100deg,rgba(17,48,63,.94),rgba(9,31,42,.98));
}
.cms-document-body .cms-source-panel--affiliate::before,
.cms-template--universal-guide[data-guide-topic] .cms-document-body .cms-source-panel--affiliate::before {
  content:'RECOMMENDED AT TOPBYD';
  color:#a8d9ae;
}
.cms-document-body .cms-source-panel p,
.cms-template--universal-guide[data-guide-topic] .cms-document-body .cms-source-panel p {
  max-width:none;
  margin:0;
  color:#edf8ff;
  font-size:clamp(.94rem,1.35vw,1.08rem);
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.3;
}
.cms-document-body .cms-source-panel a,
.cms-template--universal-guide[data-guide-topic] .cms-document-body .cms-source-panel a {
  padding:.62rem .85rem;
  border:1px solid rgba(124,196,255,.45);
  border-radius:999px;
  background:transparent;
  color:#dff3ff;
  font-size:.8rem;
  font-weight:900;
  white-space:nowrap;
}
.cms-document-body .cms-source-panel a:hover,
.cms-template--universal-guide[data-guide-topic] .cms-document-body .cms-source-panel a:hover { background:#7cc4ff;color:#080f1a; }
.cms-document-body .cms-affiliate-disclosure {
  margin: 1.4rem 0 0;
  color: #8fa5b5;
  font-size: .76rem;
  line-height: 1.45;
  text-align: center;
}
@media(max-width:640px){
  .cms-document-body .cms-source-panel,
  .cms-template--universal-guide[data-guide-topic] .cms-document-body .cms-source-panel { grid-template-columns:1fr auto; gap:.55rem .8rem; padding:.9rem 1rem; }
  .cms-document-body .cms-source-panel::before,
  .cms-template--universal-guide[data-guide-topic] .cms-document-body .cms-source-panel::before { grid-column:1/-1; }
  .cms-document-body .cms-source-panel p,
  .cms-template--universal-guide[data-guide-topic] .cms-document-body .cms-source-panel p { font-size:.93rem; }
}

/* Contact is a shared public workflow, not an unconnected decorative page. */
.cms-contact { display:grid; grid-template-columns:minmax(0, .9fr) minmax(22rem, .72fr); gap:clamp(2rem,8vw,8rem); min-height:calc(100vh - 13rem); padding:clamp(4rem,9vw,9rem) max(1.5rem,calc((100vw - 78rem)/2)); background:radial-gradient(circle at 80% 25%,rgba(124,196,255,.18),transparent 20rem),linear-gradient(115deg,#080f1a,#0b2941 58%,#0a1e2e); }
.cms-contact>div>p { color:#7cc4ff; font-size:.72rem; font-weight:900; letter-spacing:.18em; }
.cms-contact h1 { max-width:9ch; margin:.8rem 0 1.5rem; font-size:clamp(3.6rem,7vw,7.4rem); line-height:.86; letter-spacing:-.09em; }
.cms-contact>div>span { display:block; max-width:38rem; color:#c6dae7; font-size:1.08rem; line-height:1.6; }
.cms-contact form { display:grid; gap:1rem; align-content:start; padding:clamp(1.4rem,3vw,2.4rem); border:1px solid rgba(124,196,255,.27); border-radius:1.5rem; background:rgba(7,25,39,.74); box-shadow:0 2rem 5rem rgba(0,0,0,.25); }
.cms-contact label { display:grid; gap:.45rem; color:#dcecf6; font-size:.8rem; font-weight:850; }
.cms-contact input,.cms-contact select,.cms-contact textarea { width:100%; padding:.85rem .95rem; border:1px solid rgba(124,196,255,.28); border-radius:.7rem; background:#091d2d; color:#f5fbff; font:inherit; }
.cms-contact textarea { min-height:9rem; resize:vertical; }
.cms-contact button { justify-self:start; border:0; border-radius:999px; padding:.9rem 1.25rem; background:#f6f8fb; color:#08131e; font:inherit; font-weight:900; cursor:pointer; }
.cms-contact-notice { margin:0; padding:.8rem 1rem; border-radius:.7rem; background:rgba(124,196,255,.13); color:#dff2ff; }
@media(max-width:760px){.cms-contact{grid-template-columns:1fr;min-height:0;padding:4.5rem 1.5rem}.cms-contact h1{font-size:clamp(3.2rem,14vw,5rem)}}
@media (max-width: 50rem) {
  .cms-document-guide-visual { display: none; }
  .cms-template--universal-guide[data-guide-topic="charging"] .cms-document-body .cms-steps li { padding: 1.15rem; }
}

/* Mobile is a single reading column. This rule must remain after the desktop
   editorial composition above: that composition reserves a visual track with
   a minimum width even after its visual has been hidden. */
@media (max-width: 50rem) {
  .cms-document-hero,
  .cms-template--universal-guide .cms-document-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .cms-document-hero-content {
    width: 100%;
    min-width: 0;
  }

  .cms-document-hero h1,
  .cms-template--universal-guide .cms-document-hero h1 {
    max-width: 11ch;
    overflow-wrap: anywhere;
  }
}

/* Complete block skins for the universal guide contract. These classes are
   deliberately content-neutral: the CMS decides labels, evidence and links. */
.cms-template--universal-guide .cms-owner-consensus {
  position: relative; overflow: hidden; padding: clamp(1.55rem, 3vw, 2.3rem);
  border: 1px solid rgba(255, 180, 151, .34); border-radius: 1.25rem;
  background: linear-gradient(125deg, rgba(92, 48, 53, .48), rgba(12, 41, 58, .92));
}
.cms-template--universal-guide .cms-owner-consensus::after { content: 'OWNER EXPERIENCE'; position: absolute; inset: auto -1rem -1.5rem auto; color: rgba(255, 170, 150, .08); font-size: clamp(2.4rem, 7vw, 5rem); font-weight: 950; letter-spacing: -.09em; pointer-events: none; }
.cms-template--universal-guide .cms-owner-consensus h2 { max-inline-size: 20ch; color: #fff; font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -.055em; }
.cms-template--universal-guide .cms-owner-consensus > p:not(:first-child) { position: relative; z-index: 1; max-inline-size: 65ch; color: #e4eef3; line-height: 1.55; }
.cms-template--universal-guide .cms-owner-consensus small { position: relative; z-index: 1; display: block; max-inline-size: 70ch; margin-top: 1rem; color: #c4d8e4; line-height: 1.5; }

.cms-template--universal-guide .cms-specification-table { overflow: hidden; border: 1px solid rgba(120, 190, 247, .24); border-radius: 1.2rem; background: #0a2a3f; }
.cms-template--universal-guide .cms-specification-table::before { content: 'VEHICLE-SPECIFIC INFORMATION'; display: block; padding: 1.1rem 1.35rem; border-bottom: 1px solid rgba(120, 190, 247, .18); color: var(--guide-accent); font-size: .68rem; font-weight: 900; letter-spacing: .15em; }
.cms-template--universal-guide .cms-specification-table table { inline-size: 100%; border-collapse: collapse; }
.cms-template--universal-guide .cms-specification-table th,
.cms-template--universal-guide .cms-specification-table td { padding: 1rem 1.35rem; border-bottom: 1px solid rgba(120, 190, 247, .14); text-align: left; vertical-align: top; }
.cms-template--universal-guide .cms-specification-table tr:last-child > * { border-bottom: 0; }
.cms-template--universal-guide .cms-specification-table th { inline-size: 38%; color: #a9d8f4; font-size: .9rem; font-weight: 850; }
.cms-template--universal-guide .cms-specification-table td { color: #f2f8fb; line-height: 1.5; }

.cms-template--universal-guide .cms-media { overflow: hidden; margin-top: clamp(2rem, 5vw, 4rem); border-radius: 1.25rem; background: #09263a; box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .17); }
.cms-template--universal-guide .cms-media img { display: block; inline-size: 100%; max-block-size: 42rem; object-fit: cover; }
.cms-template--universal-guide .cms-media figcaption { padding: .95rem 1.2rem; color: #b7d0dd; font-size: .85rem; line-height: 1.45; }
.cms-template--universal-guide .cms-media figcaption:empty { display: none; }

.cms-template--universal-guide .cms-garage-cta { padding: 0; border-radius: 1rem; overflow: hidden; background: linear-gradient(110deg, #0e4665, #0a263b); box-shadow: inset 0 1px rgba(255, 255, 255, .08); }
.cms-template--universal-guide .cms-garage-cta a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.45rem; color: #fff; font-weight: 900; text-decoration: none; }
.cms-template--universal-guide .cms-garage-cta a::after { content: '→'; color: var(--guide-accent); font-size: 1.4rem; transition: transform .18s ease; }
.cms-template--universal-guide .cms-garage-cta a:hover::after { transform: translateX(.28rem); }

.cms-template--universal-guide .cms-advert-slot { padding: 1.25rem 1.4rem; border: 1px dashed rgba(152, 197, 220, .36); border-radius: 1rem; background: rgba(9, 36, 53, .58); }
.cms-template--universal-guide .cms-advert-slot span { display: block; margin-bottom: .45rem; color: #abcada; font-size: .64rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.cms-template--universal-guide .cms-advert-slot strong { display: block; color: #fff; font-size: 1.12rem; }
.cms-template--universal-guide .cms-advert-slot p { max-inline-size: 68ch; margin: .45rem 0 0; color: #c2d5df; font-size: .88rem; line-height: 1.5; }
@media (max-width: 38rem) {
  .cms-template--universal-guide .cms-specification-table th,
  .cms-template--universal-guide .cms-specification-table td { display: block; inline-size: auto; padding: .85rem 1rem; }
  .cms-template--universal-guide .cms-specification-table th { padding-bottom: .15rem; border-bottom: 0; }
}

/* Task Centre: a task-first front door for the useful parts of the library. */
.cms-task-centre-hero { position:relative; overflow:hidden; padding:clamp(4.5rem,9vw,9rem) max(1.5rem,calc((100vw - 78rem)/2)); background:radial-gradient(circle at 82% 20%,rgba(124,196,255,.25),transparent 22rem),linear-gradient(120deg,#070f1b,#0c2e46 65%,#0b2030); }
.cms-task-centre-hero::after { content:'DO'; position:absolute; right:max(2rem,calc((100vw - 78rem)/2)); bottom:-.18em; color:rgba(124,196,255,.07); font-size:clamp(11rem,28vw,30rem); font-weight:950; line-height:.7; letter-spacing:-.13em; pointer-events:none; }
.cms-task-centre-hero>* { position:relative; z-index:1; }
.cms-task-centre-hero p,.cms-task-centre header>p { margin:0; color:#7cc4ff; font-size:.72rem; font-weight:900; letter-spacing:.18em; }
.cms-task-centre-hero h1 { max-width:10ch; margin:1rem 0 1.3rem; color:#f8fbff; font-size:clamp(3.7rem,7.7vw,8.3rem); line-height:.84; letter-spacing:-.095em; }
.cms-task-centre-hero>span { display:block; max-width:42rem; color:#c9dce7; font-size:clamp(1.02rem,1.55vw,1.22rem); line-height:1.58; }
.cms-task-centre-hero>a { display:inline-flex; gap:.7rem; align-items:center; margin-top:2rem; padding:.9rem 1.25rem; border-radius:999px; background:#f6f8fb; color:#071827; font-weight:900; text-decoration:none; }
.cms-task-centre-hero>a b { color:#176fa5; font-size:1.25rem; }
.cms-task-centre { padding:clamp(4.5rem,8vw,8rem) max(1.5rem,calc((100vw - 78rem)/2)); background:#08111d; }
.cms-task-centre header { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:2rem; align-items:end; margin-bottom:2.2rem; }
.cms-task-centre h2 { max-width:10ch; margin:.9rem 0 0; color:#f8fbff; font-size:clamp(3rem,5.7vw,6.2rem); line-height:.84; letter-spacing:-.085em; }
.cms-task-centre h2 span { color:#71839c; }
.cms-task-centre>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid rgba(124,196,255,.21); }
.cms-task-centre-card { position:relative; display:flex; min-height:18rem; flex-direction:column; padding:1.7rem; border-right:1px solid rgba(124,196,255,.21); border-bottom:1px solid rgba(124,196,255,.21); color:#f7fbff; text-decoration:none; transition:background .2s ease,transform .2s ease; }
.cms-task-centre-card:nth-child(3n+1) { border-left:1px solid rgba(124,196,255,.21); }
.cms-task-centre-card:hover { z-index:1; background:linear-gradient(145deg,rgba(27,91,130,.5),rgba(11,29,44,.9)); transform:translateY(-.2rem); }
.cms-task-centre-card b { color:#7cc4ff; font-size:.74rem; letter-spacing:.14em; }
.cms-task-centre-card strong { margin-top:auto; color:#fff; font-size:clamp(1.7rem,2.7vw,2.55rem); letter-spacing:-.065em; }
.cms-task-centre-card span { max-width:22rem; margin-top:.65rem; color:#a9c4d4; line-height:1.48; }
.cms-task-centre-card i { margin-top:1.2rem; color:#7cc4ff; font-size:.83rem; font-style:normal; font-weight:900; }
@media(max-width:760px){.cms-task-centre-hero{padding:4.8rem 1.5rem 4.1rem}.cms-task-centre-hero h1{font-size:clamp(3.25rem,14vw,4.9rem)}.cms-task-centre header{display:block}.cms-task-centre>div{grid-template-columns:1fr}.cms-task-centre-card,.cms-task-centre-card:nth-child(3n+1){min-height:13.5rem;border-left:1px solid rgba(124,196,255,.21)}.cms-task-centre-card strong{margin-top:1.8rem}.cms-task-centre-card:hover{transform:none}}

/* Your Car: a real device-private workspace, not a second homepage. */
.cms-your-car-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(19rem,.9fr); gap:3rem; align-items:center; min-height:34rem; padding:clamp(4.5rem,8vw,8rem) max(1.5rem,calc((100vw - 78rem)/2)); overflow:hidden; background:radial-gradient(circle at 87% 48%,rgba(50,143,198,.34),transparent 29rem),linear-gradient(115deg,#071321 18%,#102f46 100%); }
.cms-your-car-hero::after { content:'CAR'; position:absolute; right:max(1rem,calc((100vw - 78rem)/2)); bottom:-.16em; color:rgba(124,196,255,.07); font-size:clamp(9rem,23vw,25rem); font-weight:950; line-height:.7; letter-spacing:-.13em; pointer-events:none; }
.cms-your-car-hero>div,.cms-your-car-hero>aside { position:relative; z-index:1; }
.cms-your-car-hero p,.cms-your-car-routes header>p { margin:0; color:#7cc4ff; font-size:.72rem; font-weight:900; letter-spacing:.18em; }
.cms-your-car-hero h1 { max-width:9ch; margin:1rem 0 1.25rem; color:#f8fbff; font-size:clamp(3.7rem,7vw,7.7rem); line-height:.86; letter-spacing:-.095em; }
.cms-your-car-hero h1 em { color:#7cc4ff; font-style:normal; }
.cms-your-car-hero>div>span { display:block; max-width:38rem; color:#c9dce7; font-size:clamp(1.03rem,1.5vw,1.18rem); line-height:1.6; }
.cms-your-car-hero>div>a { display:inline-flex; gap:.7rem; align-items:center; margin-top:2rem; padding:.92rem 1.3rem; border-radius:999px; background:#f8fbff; color:#071827; font-weight:900; text-decoration:none; }
.cms-your-car-hero>div>a b { color:#176fa5; font-size:1.2rem; }
.cms-your-car-hero>aside:not(.cms-your-car-visual) { display:grid; gap:.8rem; align-content:center; min-height:13rem; padding:2rem; border:1px solid rgba(124,196,255,.35); border-radius:1.8rem; background:rgba(7,22,35,.48); box-shadow:0 1.5rem 3rem rgba(0,0,0,.18); }
.cms-your-car-hero>aside:not(.cms-your-car-visual) strong { color:#f8fbff; font-size:clamp(2.4rem,4vw,4rem); letter-spacing:-.08em; }.cms-your-car-hero>aside:not(.cms-your-car-visual) span { color:#b8d1df; font-size:1rem; line-height:1.5; }
.cms-your-car-trim { display:inline-flex; margin:-.35rem 0 1.35rem; padding:.43rem .75rem; border:1px solid rgba(124,196,255,.38); border-radius:99px; color:#d9ecf7; font-size:.85rem; font-weight:800; }
.cms-your-car-visual { min-height:22rem; border:1px solid rgba(124,196,255,.35); border-radius:2rem; background:linear-gradient(145deg,rgba(32,94,130,.48),rgba(5,21,34,.32)); overflow:hidden; }.cms-your-car-visual img { display:block; width:100%; height:22rem; object-fit:contain; }.cms-your-car-visual small { position:absolute; right:1.2rem; bottom:1.1rem; padding:.45rem .7rem; border-radius:99px; background:rgba(7,22,35,.82); color:#c9dce7; font-size:.76rem; font-weight:800; }
.cms-your-car-routes { padding:clamp(4.5rem,8vw,8rem) max(1.5rem,calc((100vw - 78rem)/2)); background:#08111d; }.cms-your-car-routes header { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:2rem; align-items:end; margin-bottom:2.2rem; }.cms-your-car-routes h2 { max-width:10ch; margin:.9rem 0 0; color:#f8fbff; font-size:clamp(3rem,5.7vw,6.2rem); line-height:.84; letter-spacing:-.085em; }.cms-your-car-routes h2 span { color:#71839c; }.cms-your-car-routes>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid rgba(124,196,255,.21); }.cms-your-car-routes a { display:flex; min-height:15.5rem; flex-direction:column; padding:1.6rem; border-right:1px solid rgba(124,196,255,.21); border-bottom:1px solid rgba(124,196,255,.21); color:#f7fbff; text-decoration:none; transition:background .2s ease; }.cms-your-car-routes a:nth-child(3n+1) { border-left:1px solid rgba(124,196,255,.21); }.cms-your-car-routes a:hover { background:rgba(28,89,126,.24); }.cms-your-car-routes a b { color:#7cc4ff; font-size:.74rem; letter-spacing:.14em; }.cms-your-car-routes a strong { margin-top:auto; font-size:clamp(1.45rem,2.3vw,2.15rem); letter-spacing:-.06em; }.cms-your-car-routes a span { margin-top:.6rem; color:#a9c4d4; line-height:1.48; }
@media(max-width:760px){.cms-your-car-hero{grid-template-columns:1fr;gap:2rem;min-height:unset;padding:4.8rem 1.5rem 4.1rem}.cms-your-car-hero h1{font-size:clamp(3.1rem,14vw,4.8rem)}.cms-your-car-visual{min-height:15rem}.cms-your-car-visual img{height:15rem}.cms-your-car-routes header{display:block}.cms-your-car-routes>div{grid-template-columns:1fr}.cms-your-car-routes a,.cms-your-car-routes a:nth-child(3n+1){min-height:12.5rem;border-left:1px solid rgba(124,196,255,.21)}.cms-your-car-routes a strong{margin-top:1.4rem}}