/* Published section homepage-hero-pathfinder, block 0; extracted without changes. */

  .ew-pf-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(560px, 72vh, 680px);
    overflow: hidden;
    background: var(--ew-black);
  }
  .ew-pf-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Subject (M2 on the lift) sits right-of-center (~77% across the
       1408px frame); bias the cover-crop right so it survives narrower
       viewports instead of framing the center roller door. */
    object-position: 72% center;
  }
  .ew-pf-hero__bg--placeholder {
    background:
      repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 60px),
      linear-gradient(160deg, var(--ew-carbon) 0%, var(--ew-black) 70%);
  }
  /* Scrim — left-anchored legibility wash over the photo. ORIGINAL baseline
     settings, restored now that the overlay actually paints (it was hidden by
     Dawn's div:empty rule — see the display fix below). Single left-to-right
     gradient: dark at the text edge, easing across the frame. The @600px
     mobile rule replaces this background. */
  .ew-pf-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8,8,9,0.94) 0%, rgba(8,8,9,0.78) 46%, rgba(8,8,9,0.30) 100%);
  }
  /* Dawn base.css hides empty decorative nodes via `div:empty { display:none }`
     (specificity 0,1,1 — outranks the single-class .ew-pf-hero__scrim, 0,1,0).
     This scrim is intentionally an empty overlay div, so it was being hidden
     and never painted — re-assert display with parent-scoped specificity
     (0,2,0). Keep this as a display-only rule so the @600px mobile background
     override (single-class) still wins for `background`. */
  .ew-pf-hero > .ew-pf-hero__scrim { display: block; }
  .ew-pf-hero__inner {
    position: relative;
    z-index: 1;
    padding: 56px 24px;
    max-width: 1320px;
  }
  .ew-pf-hero__proof {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--ew-steel);
    padding: 6px 12px;
    font-family: var(--ew-font-mono, monospace);
    font-size: var(--ew-text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ew-paper);
  }
  .ew-pf-hero__rank {
    color: var(--on-accent);
    background: var(--accent);
    font-weight: 800;
    padding: 2px 6px;
  }
  .ew-pf-hero__h {
    color: var(--ew-white);
    font-size: clamp(34px, 5.4vw, 64px);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.02;
    margin: 18px 0 0;
    max-width: 18ch;
    text-shadow: 0 2px 12px rgba(0,0,0,0.55);
  }
  .ew-pf-hero__sub {
    color: var(--ew-white);
    font-size: clamp(15px, 1.5vw, 18px);
    font-weight: 500;
    line-height: 1.5;
    margin: 16px 0 0;
    max-width: 52ch;
    text-shadow: 0 2px 12px rgba(0,0,0,0.55);
  }
  /* §4 voice switch — neutral is default-visible (SEO-safe); a livery
     swaps in its variant. */
  .ew-pf-hero [data-voice] { display: none; }
  .ew-pf-hero [data-voice="neutral"] { display: inline; }
  body[data-livery="performance"] .ew-pf-hero [data-voice="neutral"],
  body[data-livery="drifter"]     .ew-pf-hero [data-voice="neutral"],
  body[data-livery="oemplus"]     .ew-pf-hero [data-voice="neutral"] { display: none; }
  body[data-livery="performance"] .ew-pf-hero [data-voice="performance"],
  body[data-livery="drifter"]     .ew-pf-hero [data-voice="drifter"],
  body[data-livery="oemplus"]     .ew-pf-hero [data-voice="oemplus"] { display: inline; }

  .ew-pf-hero__ctas {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 28px;
  }
  .ew-pf-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
  }
  .ew-pf-hero__cta--ghost {
    background: transparent;
    border: 1px solid var(--ew-steel);
    color: var(--ew-paper);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 13px 24px;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .ew-pf-hero__cta--ghost:hover { border-color: var(--accent); color: var(--ew-white); }

  @media (prefers-reduced-motion: reduce) {
    .ew-pf-hero__cta { transition: none; }
  }
  @media (min-width: 601px) and (max-width: 900px) {
    /* Tablet crop: the base 72% center clips the M2's rear bumper in this
       width band. Shift the focal point right so the full rear stays in
       frame. Bounded above 600px so it never clobbers the mobile crop. */
    .ew-pf-hero__bg { object-position: 84% center; }
  }
  @media (max-width: 600px) {
    /* Narrow viewport crops to a vertical slice — anchor it on the car's
       cabin/haunch (right edge of frame), lifted slightly above center so
       the body stays in frame instead of empty foreground floor. */
    .ew-pf-hero__bg { object-position: 80% 42%; }
    /* Tighten the top stop: the car region is brighter than the old
       placeholder, and the chip + headline sit up top. Darkens where text
       lands; keeps a readable 0.78 mid-band so the photo still reads. */
    .ew-pf-hero__scrim { background: linear-gradient(180deg, rgba(8,8,9,0.86) 0%, rgba(8,8,9,0.78) 30%, rgba(8,8,9,0.94) 78%); }
    .ew-pf-hero__inner { padding: 44px 24px; }
    .ew-pf-hero__ctas { align-self: stretch; }
    .ew-pf-hero__cta { justify-content: center; align-self: stretch; }
  }

/* Published section livery-capture, block 0; extracted without changes. */

  .ew-capture {
    /* Top rule only — divides from the hero. No bottom rule: the trust strip
       below carries its own frame, so a bottom divider read as a distracting
       stray line above it (LP 2026-06-17). */
    border-top: 1px solid var(--ew-steel);
  }
  .ew-capture__inner { max-width: 1320px; margin: 0 auto; }

  /* Shared container = a single sequenced flow. Step 1 and Step 2
     read as one tool; the connector rule between them is the visual
     "now, then" rhythm — no double-divider, no double-bay padding.
     Both steps use a 2-column 48px/1fr grid (Phase 1 Follow-up B —
     LP restored the Step 1 indicator next to the vehicle picker for
     symmetry with the Step 2 indicator next to the livery picker). */
  .ew-capture__step {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    align-items: start;
  }
  .ew-capture__step + .ew-capture__step {
    margin-top: 24px;
    padding-top: 24px;
    position: relative;
  }
  /* Soft connector between the two steps — a thin line down the
     step-number column, not a full-width divider that breaks the
     "one tool" feel. */
  .ew-capture__step + .ew-capture__step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 23px;
    width: 1px;
    height: 18px;
    background: var(--ew-steel);
  }
  .ew-capture__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--ew-steel);
    color: var(--ew-aluminum);
    font-size: var(--ew-text-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-top: 2px;
  }
  .ew-capture__step--one .ew-capture__step-num,
  .ew-capture__step--two .ew-capture__step-num {
    border-color: var(--accent);
    color: var(--accent-text);
  }
  .ew-capture__step-body { min-width: 0; }

  .ew-capture__h {
    margin: 8px 0 0;
  }
  .ew-capture__sub {
    color: var(--ew-paper);
    font-size: var(--ew-text-sm);
    max-width: 60ch;
    margin: 12px 0 0;
    line-height: 1.5;
  }
  .ew-capture__q {
    margin: 6px 0 16px;  /* breathing room above the tap-cards */
  }
  /* capture-v3 — YMMT control. Looks like the prior hint text;
     behaves like a button (data-ew-vresolver-open delegated to the
     vehicle-resolver). Underline on hover for affordance signal. */
  .ew-capture__hint-btn {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--ew-aluminum);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline dotted color-mix(in srgb, var(--ew-aluminum) 60%, transparent);
    text-underline-offset: 3px;
  }
  .ew-capture__hint-btn:hover { color: var(--ew-white); text-decoration-color: var(--accent); }
  .ew-capture__hint-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

  /* Reveal animation on Step 2 — single flow, not a disjointed band */
  .ew-capture__step--two:not([hidden]) {
    animation: ewCaptureStepIn 0.32s ease-out both;
  }
  @keyframes ewCaptureStepIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ew-capture__step--two:not([hidden]) { animation: none; }
  }

  /* Mobile: drop the step-number column to a small inline pill so
     the tap-cards don't crush. */
  @media (max-width: 560px) {
    .ew-capture__step { grid-template-columns: 1fr; gap: 4px; }
    .ew-capture__step + .ew-capture__step::before { left: 0; height: 14px; }
    .ew-capture__step-num { width: 26px; height: 26px; font-size: var(--ew-text-xs); margin-top: 0; }
  }

/* Published section homepage-proof-band, block 0; extracted without changes. */

  .ew-proof__head { text-align: center; margin-bottom: 32px; }
  .ew-proof__head .ew-overline { margin-bottom: 8px; }
  .ew-proof__sub {
    color: var(--ew-paper);
    font-size: var(--ew-text-sm);
    max-width: 56ch;
    margin: 12px auto 0;
    line-height: 1.5;
  }
  .ew-proof__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  @media (min-width: 760px) {
    .ew-proof__grid { grid-template-columns: repeat(4, 1fr); }
  }
  .ew-proof__card {
    display: flex;
    flex-direction: column;
    background: var(--ew-panel);
    border: 1px solid var(--ew-steel);
  }
  /* Livery weighting — matching cards lead; neutral keeps author order */
  body[data-livery="performance"] .ew-proof__card[data-affinity="performance"],
  body[data-livery="drifter"]     .ew-proof__card[data-affinity="drifter"],
  body[data-livery="oemplus"]     .ew-proof__card[data-affinity="oemplus"] {
    order: -1;
  }
  .ew-proof__card-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 2;
    object-fit: cover;
    display: block;
    background: var(--ew-graphite);
  }
  .ew-proof__card-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ew-aluminum);
    font-family: var(--ew-font-mono, monospace);
    font-size: var(--ew-text-xs);
    letter-spacing: 0.12em;
  }
  .ew-proof__card-body { padding: 18px; }
  .ew-proof__stat {
    color: var(--accent-text);
    font-size: var(--ew-text-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
  }
  .ew-proof__car {
    color: var(--ew-white);
    font-size: var(--ew-text-sm);
    font-weight: 600;
    margin-top: 8px;
  }
  .ew-proof__note {
    color: var(--ew-paper);
    font-size: var(--ew-text-sm);
    line-height: 1.5;
    margin: 8px 0 0;
  }

/* Published section shop-modes, block 0; extracted without changes. */

  .ew-modes__head { text-align: center; margin-bottom: var(--ew-s-6); }
  .ew-modes__head .ew-overline { margin-bottom: 8px; }
  .ew-modes__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  @media (min-width: 760px) {
    .ew-modes__grid { grid-template-columns: repeat(3, 1fr); }
  }
  .ew-modes__tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 168px;
    padding: 24px;
    background: var(--ew-black);
    border: 1px solid var(--ew-steel);
    text-align: left;
    color: inherit;            /* kill UA default link blue; text lives in child spans */
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease;
  }
  .ew-modes__tile:hover,
  .ew-modes__tile:focus-visible {
    border-color: var(--accent);
    transform: translateY(-2px);
  }
  .ew-modes__tile-blurb {
    color: var(--ew-paper);
    font-size: var(--ew-text-sm);
    line-height: 1.5;
    flex: 1;
  }
  .ew-modes__tile-go {
    color: var(--accent-text);
    font-family: var(--ew-font-mono);
    font-size: var(--ew-text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  @media (prefers-reduced-motion: reduce) {
    .ew-modes__tile { transition: border-color 0.18s ease; }
    .ew-modes__tile:hover, .ew-modes__tile:focus-visible { transform: none; }
  }

/* Published section featured-phantom, block 0; extracted without changes. */

  .ew-phantom {
    /* Scoped light-mode tokens — defined ONLY on this section's subtree.
       Do not promote to :root; reverting this file fully reverts the look. */
    --ew-phantom-surface:    #F4F4F2;   /* RECOMMENDED DEFAULT (faint grey). White alt: #FFFFFF — one-line LP switch */
    --ew-phantom-ink:        #0A0A0B;
    --ew-phantom-sub:        #3A3A40;
    --ew-phantom-red:        #C0162A;   /* brand red darkened for AA on light — TEXT use (eyebrow, card spec) */
    --ew-phantom-red-edge:   #E11D2C;   /* brand red — GRAPHIC/border use (hairline, badge border, hover) */
    --ew-phantom-card:       #FFFFFF;
    --ew-phantom-card-line:  #D8D8DC;
    --ew-phantom-well:       #ECECEE;

    position: relative;
    background: var(--ew-phantom-surface);
    padding: 112px 0 120px;
    /* Full-bleed: extend edge-to-edge, breaking out of any constrained parent.
       No vertical margin — the light band butts the black rows for a clean seam. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  @media (max-width: 560px) { .ew-phantom { padding: 72px 0 80px; } }
  .ew-phantom__accent {
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--ew-phantom-red-edge);
  }
  .ew-phantom__container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
  }
  .ew-phantom__head {
    text-align: center;
    margin-bottom: 48px;
  }
  .ew-phantom__eyebrow {
    color: var(--ew-phantom-red);
    font-family: var(--ew-font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 16px;
  }
  .ew-phantom__h {
    color: var(--ew-phantom-ink);
    font-size: clamp(36px, 5.5vw, 56px);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 16px;
  }
  .ew-phantom__sub {
    color: var(--ew-phantom-sub);
    font-size: 16px;
    line-height: 1.55;
    max-width: 64ch;
    margin: 0 auto;
  }
  .ew-phantom__strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 920px;
    margin: 0 auto 44px;
  }
  .ew-phantom__strip-col {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 0 32px;
    text-align: left;
  }
  .ew-phantom__strip-col + .ew-phantom__strip-col {
    border-left: 1px solid var(--ew-phantom-card-line);
  }
  .ew-phantom__strip-mark {
    flex: none;
    line-height: 0;
    margin-top: 2px;
  }
  .ew-phantom__strip-mark .ew-phantom-mark { --ew-phantom-mark-h: 40px; }
  .ew-phantom__strip-label {
    color: var(--ew-phantom-ink);
    font-family: var(--ew-font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 5px;
  }
  .ew-phantom__strip-text {
    color: var(--ew-phantom-sub);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    max-width: 34ch;
  }
  @media (max-width: 700px) {
    .ew-phantom__strip {
      grid-template-columns: 1fr;
      max-width: 420px;
      gap: 24px;
      margin-bottom: 36px;
    }
    .ew-phantom__strip-col { padding: 0 8px; }
    .ew-phantom__strip-col + .ew-phantom__strip-col {
      border-left: none;
      border-top: 1px solid var(--ew-phantom-card-line);
      padding-top: 24px;
    }
  }
  @media (max-width: 560px) {
    .ew-phantom__strip-mark .ew-phantom-mark { --ew-phantom-mark-h: 34px; }
  }
  .ew-phantom__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1140px;
    margin: 0 auto;
  }
  @media (max-width: 960px) { .ew-phantom__grid { grid-template-columns: repeat(2, 1fr); max-width: 720px; } }
  @media (max-width: 560px) { .ew-phantom__grid { grid-template-columns: 1fr; max-width: 420px; } }
  .ew-phantom__card {
    position: relative;
    display: block;
    background: var(--ew-phantom-card);
    border: 1px solid var(--ew-phantom-card-line);
    box-shadow: 0 1px 2px rgba(10,10,11,.06);
    color: var(--ew-phantom-sub);
    text-decoration: none;
    transition: border-color var(--ew-dur-fast) var(--ew-ease), box-shadow var(--ew-dur-fast) var(--ew-ease), transform var(--ew-dur-fast) var(--ew-ease);
  }
  .ew-phantom__card:hover {
    border-color: var(--ew-phantom-red-edge);
    box-shadow: 0 6px 16px rgba(10,10,11,.10);
    transform: translateY(-2px);
  }
  .ew-phantom__card-mark {
    /* Per-card sub-brand stamp, pinned top-right over the card image.
       viewBox 0 0 4257 1100 (~3.87:1). Height-based sizing + width:auto
       preserves aspect (never squished/cropped); max-width guards width.
       No box/border per VIS-3b — bare lockup as a small corner stamp. */
    position: absolute; top: 10px; right: 10px;
    height: 16px;
    width: auto;
    max-width: 72px;
    display: block;
    pointer-events: none;
    z-index: 2;
  }
  @media (max-width: 560px) {
    /* Single-column, larger card images — nudge the stamp up a touch. */
    .ew-phantom__card-mark { height: 18px; }
    .ew-phantom__card-mark--stage { height: auto; }
    .ew-phantom__card-mark--stage .ew-phantom-mark { --ew-phantom-mark-h: 30px; }
  }
  .ew-phantom__card-mark--stage {
    /* S1/S2 mark is near-square (945:645) vs the wide wordmark, so the
       img-height/max-width rules above don't apply — the inline-block
       wrapper carries its own height token. Sized a touch larger so the
       S1/S2 distinction reads as a corner stamp on the light band. */
    height: auto;
    width: auto;
    max-width: none;
    line-height: 0;
  }
  .ew-phantom__card-mark--stage .ew-phantom-mark { --ew-phantom-mark-h: 26px; }
  .ew-phantom__card-img {
    aspect-ratio: 1 / 1;
    background: var(--ew-phantom-well);
    overflow: hidden;
  }
  .ew-phantom__card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ew-phantom__card-img--placeholder {
    background: linear-gradient(135deg, #ECECEE 0%, #DDDDE0 100%);
  }
  .ew-phantom__card-body { padding: 14px 16px 18px; }
  .ew-phantom__card-spec {
    color: var(--ew-phantom-red);
    font-family: var(--ew-font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .ew-phantom__card-title {
    color: var(--ew-phantom-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 8px;
  }
  .ew-phantom__card-price {
    color: var(--ew-phantom-sub);
    font-size: 13px;
    font-family: var(--ew-font-mono);
    letter-spacing: 0.04em;
  }
  .ew-phantom__viewall {
    text-align: center;
    margin-top: 40px;
  }
  @media (max-width: 560px) { .ew-phantom__viewall { margin-top: 32px; } }
  .ew-phantom__viewall-link {
    /* WCAG 2.5.8: min-height + vertical padding keep the hit area >=24px tall
       (12px line-height + 6px*2 padding = 24px). Hover underline moved off
       border-bottom to text-decoration so it stays tight to the glyphs
       despite the padding. */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 6px 0;
    line-height: 1;
    color: var(--ew-phantom-ink);
    font-family: var(--ew-font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--ew-dur-fast) var(--ew-ease), text-decoration-color var(--ew-dur-fast) var(--ew-ease);
  }
  .ew-phantom__viewall-link:hover {
    color: var(--ew-phantom-red);
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .ew-phantom__viewall-link:focus-visible {
    outline: 2px solid var(--ew-phantom-red-edge);
    outline-offset: 3px;
  }
  .ew-phantom__empty {
    text-align: center;
    color: var(--ew-phantom-sub);
    font-family: var(--ew-font-mono);
    font-size: 12px;
  }

/* Published section homepage-founder, block 0; extracted without changes. */

  .ew-founder__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
  }
  @media (min-width: 900px) {
    .ew-founder__grid { grid-template-columns: 460px 1fr; gap: 48px; }
  }
  .ew-founder__media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--ew-steel);
  }
  .ew-founder__media img {
    position: absolute;
    top: 0;
    left: 50%;
    width: 200%;
    height: auto;
    transform: translate(-50%, -30%);
    display: block;
  }
  .ew-founder__placeholder {
    width: 100%;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--ew-steel);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ew-black);
    color: var(--ew-aluminum);
    font-family: var(--ew-font-mono, monospace);
    font-size: var(--ew-text-xs);
    letter-spacing: 0.12em;
    text-align: center;
    padding: 0 16px;
  }
  .ew-founder__copy {
    color: var(--ew-paper);
    font-size: var(--ew-text-base);
    line-height: 1.6;
    margin: var(--ew-s-4) 0 0;
    max-width: 56ch;
  }
  .ew-founder__tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: var(--ew-s-4) 0 0;
    padding: 0;
  }
  .ew-founder__tags li {
    font-family: var(--ew-font-mono, monospace);
    font-size: var(--ew-text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ew-paper);
    border: 1px solid var(--ew-steel);
    padding: 6px 10px;
    border-radius: var(--ew-radius);
  }

/* Published section collection-brand-header, block 0; extracted without changes. */

    .ew-brandhdr__grid { align-items: center; }
    .ew-brandhdr__body { max-width: 60ch; }
    .ew-brandhdr__name {
      font-size: clamp(31px, 5vw, 61px);
      margin: var(--ew-s-2) 0 0;
    }
    .ew-brandhdr__blurb { margin-top: var(--ew-s-4); }
    .ew-brandhdr__markwrap {
      display: flex;
      align-items: center;
      justify-content: center;
      aspect-ratio: 4 / 3;
      background: var(--ew-graphite);
      border: 1px solid var(--ew-steel);
      padding: var(--ew-s-6);
    }
    .ew-brandhdr__logo {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .ew-brandhdr__wordmark {
      color: var(--ew-paper);
      font-size: clamp(24px, 4vw, 40px);
      font-weight: 900;
      letter-spacing: -0.02em;
      line-height: 1.05;
      text-align: center;
      overflow-wrap: anywhere;
      max-width: 100%;
    }
  
/* Published section tech-essays-article, block 0; extracted without changes. */

  .ew-article-grid { grid-template-columns: 240px minmax(0, 1fr); grid-auto-columns: minmax(0, 1fr); }
  .ew-article-grid > * { grid-column: 2 / -1; min-width: 0; }   /* any child defaults to WIDE col */
  .ew-article-grid > .ew-toc { grid-column: 1; }                /* TOC pinned back to 240px col */
  .ew-article-body { min-width: 0; overflow-wrap: break-word; }
  /* TOC genuinely hidden (<2 h2): collapse to one full-width column, no dead 240px gutter. */
  .ew-article-grid--no-toc { grid-template-columns: 1fr; }
  .ew-article-grid--no-toc > * { grid-column: 1 / -1; }
  @media (max-width: 900px) {
    .ew-article-grid { grid-template-columns: 1fr !important; }
    .ew-article-grid > * { grid-column: 1 / -1 !important; }
    .ew-toc { position: static !important; border-bottom: 1px solid var(--ew-steel); padding-bottom: 16px; }
  }
  /* Article body headings — raw editor HTML carries no brand class, so give the
     rte h1/h2/h3 the brand heading + eyebrow treatment. Scoped to .ew-article-body
     so PDP descriptions and other sitewide .rte content are untouched.
     Livery: --accent on the h2 rule (follows livery, house-red default);
     --accent-text on h3 text (AA-safe small accent; livery accent when active).
     h1/h2 stay near-white regardless of livery.
     Sizes are rem against this theme's 10px root (brand: h1 39 / h2 31 / h3 25 /
     body 15 / overline 12px) — NOT the 16px-root rems some specs assume. */
  .ew-article-body h1 {
    color: #F4F4F5;
    font-family: var(--font-heading-family);
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.15;
  }
  .ew-article-body h2 {
    color: #F4F4F5;
    font-family: var(--font-heading-family);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.25;
    border-left: 3px solid var(--accent);
    padding-left: .6rem;
    margin-top: 2.2rem;
  }
  .ew-article-body h3 {
    color: var(--accent-text);
    font-family: var(--ew-font-mono);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  /* Hanging bullets/numbers, all breakpoints: the marker sits in the gutter
     and wrapped lines align under the text. Dawn's default is
     list-style-position: inside (padding-left:2rem); with imported
     <li><p>…</p></li> markup the block paragraph drops below the marker, so
     "1." renders alone on its own line. Compound .ew-article-body.rte (0,2,1)
     beats Dawn's global .rte rules (0,1,1) so PDP descriptions and other
     sitewide .rte content are untouched. */
  .ew-article-body.rte ul,
  .ew-article-body.rte ol {
    list-style-position: outside;
    padding-left: 1.5em;
  }

  /* ── Mobile readability — essay rich-text only (≤749px) ─────────────────
     Compound .ew-article-body.rte (0,2,1) beats Dawn's global .rte rules
     (0,1,1) so PDP descriptions and other sitewide .rte content are
     untouched, and everything here is gated below Dawn's 750px desktop
     breakpoint so desktop rendering is byte-identical. */
  @media (max-width: 749px) {
    /* Wide spec tables scroll inside their own box instead of pushing the
       page wide. Test case: the ~875px table-layout:fixed spec table in the
       MINI essay. display:block turns the table into a scroll container;
       the inner rows/cells reconstitute at their natural width and scroll. */
    .ew-article-body.rte table {
      display: block;
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }

/* Published section header, block 0; extracted without changes. */

  /* Design-system sync (Item 1b, 2026-05-29): the pill now uses the same
     tokens as the sibling header controls (.ew-nav__icon-btn) — the
     JetBrains Mono spec-label font, the 8pt spacing scale, and the shared
     motion tokens — instead of bespoke values. Two-signal protection:
     the resting/hover/active states are NEUTRAL (steel → white), never
     a signal color — the dedicated error token is --danger; the brand red
     (--ew-redline / --accent) is brand identity, not error. The livery
     accent remains the only color the pill carries, and only decoratively
     (the body[data-livery] rules below). */
  .ew-garage-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--ew-s-2);
    padding: var(--ew-s-2) var(--ew-s-3);
    background: var(--ew-graphite);
    border: 1px solid var(--ew-steel);
    color: var(--ew-paper);
    font-family: var(--ew-font-mono);
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: border-color var(--ew-dur-fast) var(--ew-ease), color var(--ew-dur-fast) var(--ew-ease), background-color var(--ew-dur-fast) var(--ew-ease);
    white-space: nowrap;
    cursor: pointer;
    max-width: 320px;
  }
  .ew-garage-pill:hover { border-color: var(--ew-aluminum); color: var(--ew-white); }
  .ew-garage-pill:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
  .ew-garage-pill[data-ew-set="true"] { border-color: var(--ew-aluminum); color: var(--ew-white); }
  .ew-garage-pill svg { flex-shrink: 0; }
  /* capture-v3 — combined pill ambient livery color.
     When body[data-livery] is set, the pill's border + the active
     SVG icon stroke pick up the livery's accent (--livery-accent).
     Neutral when no livery is set (default outline above). */
  body[data-livery] .ew-garage-pill--combined {
    border-color: var(--livery-accent);
    color: var(--livery-accent);
  }
  body[data-livery] .ew-garage-pill--combined:hover {
    color: var(--ew-white);
    border-color: var(--livery-accent);
    background: color-mix(in srgb, var(--livery-accent) 12%, transparent);
  }
  body[data-livery] .ew-garage-pill--combined .ew-garage-pill__label,
  body[data-livery] .ew-garage-pill--combined .ew-garage-pill__use-case {
    color: var(--ew-white);
  }
  .ew-garage-pill__use-case {
    font-family: var(--ew-font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ew-paper);
    margin-left: var(--ew-s-1);
  }
  .ew-garage-pill__use-case[hidden] { display: none; }
  .ew-garage-pill__label {
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ew-garage-pill__clear {
    background: transparent;
    border: none;
    color: var(--ew-aluminum);
    font-size: 16px;
    line-height: 1;
    padding: 0 var(--ew-s-1) 0 var(--ew-s-1);
    cursor: pointer;
    border-left: 1px solid var(--ew-steel);
    margin-left: var(--ew-s-1);
    transition: color var(--ew-dur-fast) var(--ew-ease);
  }
  /* Neutral hover — two-signal protection (was --ew-redline). */
  .ew-garage-pill__clear:hover { color: var(--ew-white); }
  .ew-garage-pill--mobile {
    display: flex;
    width: 100%;
    padding: 12px 16px;
    margin: 16px 0;
    justify-content: center;
    max-width: none;
  }
  @media (max-width: 760px) {
    .ew-nav__actions .ew-garage-pill { display: none; }
  }
  /* Solo column heading (when a child has no grandchildren in a wide megamenu) */
  .ew-nav__col-head--solo {
    display: block;
    padding: 8px 0;
    color: var(--ew-paper);
    text-decoration: none;
    font-weight: 500;
  }
  .ew-nav__col-head--solo:hover { color: var(--ew-white); }
  /* Megamenu column heading clickable */
  .ew-nav__col-head {
    display: block;
    text-decoration: none;
    color: var(--accent-text);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
  }
  .ew-nav__col-head:hover { color: var(--ew-white); }
  /* 3A-revert: non-clickable column label (url='#' menu items render
     as <span>). Same red treatment as the clickable head, but no hover
     state and not focusable — these are section labels, not links. */
  .ew-nav__col-head--label {
    cursor: default;
    user-select: none;
  }
  .ew-nav__col-head--label:hover { color: var(--accent-text); }
  /* 3A-T: Tuning ▾ column 1 has no red header — this invisible spacer
     reserves the same vertical height as the red column heads in
     columns 2–N so row-1 of column 1 (Find Your Tune) aligns to row-1
     of the other columns (E-Chassis, Stage 1, Performance). */
  .ew-nav__col-head--invisible {
    visibility: hidden;
    pointer-events: none;
  }
  /* Walkthrough Phase 0 sub-phase C — "See all brands →" /
     "See all categories →" link styling. Smaller font + muted color
     so the footer-of-column link reads as quieter than body items
     without losing the affordance signal. */
  .ew-nav__col-list .ew-nav__see-all {
    font-size: 12px;
    color: var(--ew-aluminum);
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px solid var(--ew-steel);
    letter-spacing: 0.04em;
  }
  .ew-nav__col-list .ew-nav__see-all:hover {
    color: var(--accent-text);
  }
  .ew-mobile-section__sublist .ew-nav__see-all,
  .ew-mobile-section__sublist a[href*="shop-by-brand"],
  .ew-mobile-section__sublist a[href*="shop-by-category"] {
    color: var(--ew-aluminum);
    font-size: 13px;
  }
  /* Mobile drawer red section label (mirrors desktop column heads
     inside Tuning / Shop drawers). Single-level drilldown per spec. */
  .ew-mobile-section__label {
    display: block;
    color: var(--accent-text);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.14em;
    margin: 16px 0 6px;
    padding: 0;
  }
  .ew-mobile-section__sublist {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
  }
  .ew-mobile-section__sublist li { margin: 0; }
  .ew-mobile-section__sublist a {
    display: block;
    padding: 8px 0;
    color: var(--ew-paper);
    text-decoration: none;
    font-size: 15px;
  }
  .ew-mobile-section__sublist a:hover { color: var(--ew-white); }
  /* Summary heads (links WITH children) inherit the canonical flat-link
     type (.ew-mobile-drawer__list a) so accordion heads and childless
     links render in ONE identical style. list-style:none reinforces the
     base.css summary reset (no double disclosure marker). */
  .ew-mobile-section > .ew-mobile-section__head {
    display: block;
    padding: var(--ew-s-4) 0;
    color: var(--ew-paper);
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px solid var(--ew-carbon);
    text-decoration: none;
    list-style: none;
  }
  .ew-mobile-section[open] > .ew-mobile-section__head,
  .ew-mobile-section > .ew-mobile-section__head:hover { color: var(--ew-white); }
  /* Primary CTA (mobile drawer) — full-width Path Finder front door. */
  .ew-mobile-drawer__build {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: var(--ew-s-4) 0 var(--ew-s-5);
  }
  /* A1c — emphasized "Find Your Tune" solo column (the Path Finder front door) */
  .ew-nav__col-head--cta {
    color: var(--accent-text);
    font-weight: 800;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
  }
  .ew-nav__col-head--cta:hover { color: var(--ew-white); }

  /* Esse Werks wordmark logo (SVG) — replaces the old text brandmark.
     The SVG viewBox is cropped tight to the white artwork, so element
     height == visible logo height. 30px == the Garage pill's border-box
     height (14px padding + 2px border + 14px content), so the wordmark
     spans exactly pill-top to pill-bottom. */
  .ew-brandmark__logo {
    display: block;
    height: 30px;
    width: auto;
  }
  @media (max-width: 760px) {
    .ew-brandmark__logo { height: 26px; }
  }
  .ew-mobile-drawer__head .ew-brandmark__logo,
  .ew-mobile-drawer .ew-brandmark__logo { height: 24px; }

  /* ============================================================
     INTL-2 — Header country selector (flag + ISO trigger)
     Restyles the SHARED localization disclosure for the header rail.
     Scoped under .ew-nav__localization so the announcement-bar /
     footer instances (which never get this class) are untouched.
     Two-signal protection: trigger is neutral steel→white; the
     decorative flag artwork is the only color it carries. Focus ring
     uses --ew-paper (#E8E8EA) → 16.17:1 vs the --ew-black header bg.
     ============================================================ */
  .ew-nav__localization {
    display: inline-flex;
    align-items: center;
  }
  .ew-nav__localization .localization-form {
    display: flex;
    padding: 0;
    margin: 0;
  }
  /* The trigger: a compact pill consistent with .ew-nav__icon-btn siblings. */
  .ew-nav__localization .ew-flag-trigger.disclosure__button {
    display: inline-flex;
    align-items: center;
    gap: var(--ew-s-2);
    min-height: 44px;            /* S-19: matches 44px .ew-nav__icon-btn siblings; ≥44 comfort target */
    padding: var(--ew-s-1) var(--ew-s-2);
    background: transparent;
    border: 1px solid var(--ew-steel);
    color: var(--ew-paper);
    font-family: var(--ew-font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--ew-dur-fast) var(--ew-ease),
                color var(--ew-dur-fast) var(--ew-ease);
  }
  .ew-nav__localization .ew-flag-trigger.disclosure__button:hover {
    border-color: var(--ew-aluminum);
    color: var(--ew-white);
  }
  .ew-nav__localization .ew-flag-trigger.disclosure__button:focus-visible {
    outline: 2px solid var(--ew-paper);   /* 16.17:1 vs --ew-black */
    outline-offset: 2px;
  }
  /* Kill Dawn's pseudo-element link underline/box-shadow on the trigger. */
  .ew-nav__localization .ew-flag-trigger.link::before,
  .ew-nav__localization .ew-flag-trigger.link::after { box-shadow: none; content: none; }
  .ew-nav__localization .ew-flag-trigger:hover { text-decoration: none; }

  /* Resting trigger badge: circular flag crop. Scoped to the trigger only so
     the dropdown rows (.ew-flag-cell) stay rectangular. ~26px fits inside the
     existing 32px button without growing the row. */
  .ew-flag-trigger__flag {
    display: inline-flex;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    border: 1px solid var(--ew-steel);
  }
  /* Fill the circle edge-to-edge; drop the base .ew-flag's own border/radius
     inside the badge so the crop is clean. Trigger-scoped only. */
  .ew-flag-trigger__flag .ew-flag {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    object-fit: cover;
  }
  /* Missing-flag region: render the ISO code centered INSIDE the circle. */
  .ew-flag-trigger__flag .ew-flag--fallback {
    width: 100%;
    height: 100%;
    border-radius: 0;
    font-size: 9px;
  }
  /* Caret BESIDE the circle (never over text): the button's flex gap alone
     spaces it; no margin → no overlap. */
  .ew-nav__localization .ew-flag-trigger .icon-caret {
    width: 0.7rem;
    height: auto;
    margin-left: 0;
    flex: 0 0 auto;
  }
  .ew-nav__localization .ew-flag-trigger[aria-expanded='true'] .icon-caret {
    transform: rotate(180deg);
  }

  /* Flag artwork (trigger + rows) */
  .ew-flag {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 1px;
    object-fit: cover;
  }
  .ew-flag--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--ew-font-mono);
    font-size: 9px;
    letter-spacing: 0.04em;
    color: var(--ew-paper);
    background: var(--ew-steel);
    border-radius: 1px;
  }

  /* Dropdown opens DOWNWARD, right-aligned to the trigger (header sits at top).
     The shared component CSS defaults the panel to bottom:100% (upward) — for
     the header we override to top:100%. */
  .ew-nav__localization .disclosure { position: relative; }
  .ew-nav__localization .disclosure__list-wrapper {
    bottom: auto;
    top: calc(100% + var(--ew-s-2));
    right: 0;
    transform: translateY(0);
    background: var(--ew-graphite);
    border: 1px solid var(--ew-steel);
    border-radius: 0;
  }
  /* Flag cell adds a 4th grid column to each row (checkmark, flag, name, currency). */
  .ew-nav__localization .ew-flag-disclosure .disclosure__link {
    grid-template-columns: auto auto 1fr auto;
    color: var(--ew-paper);
  }
  .ew-nav__localization .ew-flag-disclosure .disclosure__link:hover,
  .ew-nav__localization .ew-flag-disclosure .disclosure__link[aria-current='true'] {
    color: var(--ew-white);
    background: var(--ew-carbon);
  }
  .ew-nav__localization .ew-flag-cell {
    display: inline-flex;
    width: 22px;
    height: 16px;
    align-self: center;
  }

  /* Mobile: the rail is tight — collapse the RESTING trigger to flag-only
     (hide the ISO code text), but the OPEN dropdown still shows full country
     names + currency, so no text signal is lost in the list. */
  @media (max-width: 760px) {
    /* Resting trigger is already flag-only; keep a minimal gap so the caret
       never crushes against the circle, and keep the reduced padding. The
       circle (26px) + gap + caret keeps the hit-area ≥24px. */
    .ew-nav__localization .ew-flag-trigger.disclosure__button {
      padding: var(--ew-s-1);
      gap: var(--ew-s-1);
    }
    /* Native component already turns the panel into a bottom sheet < 749px. */
  }

/* Published section footer, block 0; extracted without changes. */

  /* Brand mark + NAP read as one "envelope" block. */
  .ew-footer__brand {
    border-top: 1px solid var(--ew-steel);
    padding-top: var(--ew-s-7);
    margin-bottom: 12px;
  }
  .ew-footer__brand-link { display: inline-block; }
  .ew-footer__logo {
    display: block;
    height: 22px;
    width: auto;
    opacity: 0.85;
  }
  .ew-footer__brand-link:hover .ew-footer__logo { opacity: 1; }
  .ew-footer__address { border-top: none; padding-top: 0; }

/* Published section announcement-porsche, block 0; extracted without changes. */

    .ew-announce-hidden .ew-announce{display:none}

    .ew-announce{
      position:relative;z-index:60;overflow:hidden;
      background-color:#14090b; /* fallback for no color-mix */
      background-color:color-mix(in srgb, var(--accent, #E11D2C) 15%, #0a0a0c);
      border-bottom:1px solid rgba(255,255,255,.10);
      border-bottom-color:color-mix(in srgb, var(--accent, #E11D2C) 55%, transparent);
      animation:ew-drop .5s cubic-bezier(.2,.8,.2,1) both;
    }
    .ew-announce::after{
      content:"";position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(100deg,transparent 36%,rgba(255,255,255,.15) 50%,transparent 64%);
      transform:translateX(-120%);
      animation:ew-sheen 9s ease-out .5s infinite;
    }
    .ew-announce__link{
      position:relative;z-index:1;
      display:flex;align-items:center;justify-content:center;gap:12px;
      min-height:38px;padding:8px 44px;text-decoration:none;color:#fff;
    }
    .ew-announce__chip{
      flex:none;display:inline-flex;align-items:center;gap:6px;line-height:1;
      font-family:var(--ew-font-mono, "JetBrains Mono", ui-monospace, monospace);
      font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;
      border:1px solid rgba(255,255,255,.35);
      border-color:color-mix(in srgb, var(--accent, #E11D2C) 75%, transparent);
      border-radius:999px;padding:3px 9px;
    }
    .ew-announce__chip::before{
      content:"";width:5px;height:5px;border-radius:50%;
      background:var(--accent, #E11D2C);animation:ew-pulse 2.4s ease-out infinite;
    }
    .ew-announce__text{font-size:13px;font-weight:500;letter-spacing:.005em;color:#fff}
    .ew-announce__text--short{display:none}
    .ew-announce__cta{
      display:inline-flex;align-items:center;gap:6px;
      font-size:13px;font-weight:600;color:#fff;
      text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
      text-decoration-color:color-mix(in srgb, var(--accent, #E11D2C) 85%, transparent);
    }
    .ew-announce__cta svg{transition:transform .18s ease}
    .ew-announce__link:hover .ew-announce__cta svg{transform:translateX(3px)}
    .ew-announce__link:focus-visible{outline:2px solid #fff;outline-offset:-3px;border-radius:2px}
    .ew-announce__close{
      position:absolute;top:50%;right:6px;transform:translateY(-50%);z-index:2;
      width:32px;height:32px;display:grid;place-items:center;
      background:none;border:0;cursor:pointer;color:rgba(255,255,255,.55);border-radius:6px;
    }
    .ew-announce__close:hover{color:#fff;background:rgba(255,255,255,.08)}
    .ew-announce__close:focus-visible{outline:2px solid #fff;outline-offset:-2px}

    @keyframes ew-drop{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
    @keyframes ew-sheen{0%{transform:translateX(-120%)}12%{transform:translateX(120%)}100%{transform:translateX(120%)}}
    @keyframes ew-pulse{
      0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent, #E11D2C) 70%, transparent)}
      70%{box-shadow:0 0 0 6px transparent}
      100%{box-shadow:0 0 0 0 transparent}
    }

    /* ≤640px all three parts do not fit on one line — measured 301px needed
       vs 295px available at 375px, which wrapped the bar to 62px tall. The
       chip is the redundant part (the copy already says "Porsche is next"),
       so it drops here, mirroring how .ew-trust-bar swaps to a short variant
       at 767px. Symmetric 38px padding keeps the copy optically centred while
       reserving the 32px close button plus its 6px offset on the right.
       Measured after: 238px needed vs 299px available at 375px (244px at
       320px), so nowrap can never clip. */
    @media (max-width:640px){
      .ew-announce__link{gap:8px;padding:8px 38px;min-height:36px}
      .ew-announce__chip{display:none}
      .ew-announce__text{display:none}
      .ew-announce__text--short{display:inline;font-size:12.5px;font-weight:500;color:#fff}
      .ew-announce__text--short,.ew-announce__cta{white-space:nowrap}
      .ew-announce__cta{font-size:12.5px}
    }
    @media (prefers-reduced-motion:reduce){
      .ew-announce,.ew-announce__chip::before{animation:none!important}
      .ew-announce::after{display:none}
    }