/* Generated by scripts/direction-styles.mjs from components/marketplace/demo/circuit-schedule.css — do not edit. */
/* ── circuit-schedule.css ── */
/* ── Circuit Schedule — ashdub. Electrician (cohort two, October 2026) ─────────────────────────────────────────────────
   An electrician's site composed like the documents of the trade: a fine GRAPH-PAPER ground, charcoal ink and
   neutral-conductor blue (the owner's --brand). Services read as a CIRCUIT SCHEDULE — numbered ways in a ruled table,
   like the chart inside a consumer unit; green-and-yellow EARTH-SLEEVE stripes are the dividing rule; steps are drawn as
   ROCKER SWITCHES; drawings sit on a drawing SHEET with a title block; dark bands are blueprint grids; and every
   electrician-confirmed fact is a TERMINAL-STRIP slot, never a promise. Bebas Neue for display, IBM Plex Sans for
   reading — a pairing no other direction uses. Sizes follow the demo frame (cqi, @container, --mk-vh). Motion is a short
   settle only and stops for reduced motion. */

[data-direction="circuit-schedule"] {
  --lx-head: var(--font-bebas), "Bebas Neue", Impact, sans-serif; --lx-body: var(--font-plex), "IBM Plex Sans", system-ui, sans-serif;
  --lx-head-w: 400; --lx-head-track: 0.01em; --lx-head-lh: 0.92; --lx-head-case: none;
  --lx-paper: #f3f4f0; --lx-ink: #111519; --lx-muted: #4f585f; --lx-line: rgba(17,21,25,0.16);
  --lx-dark: #141a20; --lx-dark-ink: #eef1f3; --lx-dark-muted: #b3bcc3; --lx-dark-line: rgba(238,241,243,0.16);
  --lx-btn-r: 4px; --lx-btn-case: none; --lx-btn-track: .02em; --lx-btn-size: .86rem; --lx-media-r: 4px;
  --lx-eyebrow-case: uppercase; --lx-eyebrow-track: 0.16em; --lx-sec: clamp(4rem, 9cqi, 7.5rem);
  --cs-card: #ffffff; --cs-soft: #e7eae4; --cs-grid: rgba(17,21,25,0.055); --cs-alarm: #b3261e;
  --cs-earth: repeating-linear-gradient(-45deg, #2e7d32 0 10px, #e2c400 10px 20px);
  background-image: linear-gradient(var(--cs-grid) 1px, transparent 1px), linear-gradient(90deg, var(--cs-grid) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
}
[data-direction="circuit-schedule"][data-theme="dark"] {
  --lx-paper: #0f1418; --lx-ink: #e9eef1; --lx-muted: #a7b2ba; --lx-line: rgba(233,238,241,0.15);
  --lx-dark: #070a0d; --cs-card: #161d23; --cs-soft: #1d262d; --cs-grid: rgba(120,170,220,0.07);
}

/* ── type: tall capitals over a technical body ── */
[data-direction="circuit-schedule"] .lx-display { font-size: calc(clamp(3rem, 8.4cqi, 7.4rem) * var(--lx-title-scale, 1)); max-width: 12ch; }
[data-direction="circuit-schedule"] .lx-h2 { font-size: calc(clamp(2.4rem, 5.6cqi, 4.6rem) * var(--lx-title-scale, 1)); line-height: .95; max-width: 16ch; }
[data-direction="circuit-schedule"] .lx-h3 { font-family: var(--lx-body); font-weight: 600; letter-spacing: -.005em; text-transform: none; }
[data-direction="circuit-schedule"] .lx-eyebrow { display: inline-flex; align-items: center; gap: .7rem; font: 600 .7rem/1 var(--lx-body); color: var(--lx-accent); }
[data-direction="circuit-schedule"] .lx-eyebrow::before { content: ""; width: 1.8rem; height: .45rem; background: var(--cs-earth); border-radius: 1px; }
[data-direction="circuit-schedule"] .lx-tone-dark .lx-eyebrow { color: color-mix(in srgb, var(--lx-accent) 35%, #ffffff); }
[data-direction="circuit-schedule"][data-theme="dark"] .lx-eyebrow { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }
[data-direction="circuit-schedule"] .lx-lede { color: var(--lx-muted); }

/* ── buttons: square, labelled like switchgear ── */
.mk-demo-site[data-direction="circuit-schedule"] .lx-btn { font-family: var(--lx-body); font-weight: 600; }
.mk-demo-site[data-direction="circuit-schedule"] .lx-btn--primary { background: var(--lx-accent); color: var(--lx-accent-ink); box-shadow: 0 0 0 1px var(--lx-accent), inset 0 -3px 0 rgb(0 0 0 / .22); }
.mk-demo-site[data-direction="circuit-schedule"] .lx-btn--primary:hover { background: color-mix(in srgb, var(--lx-accent) 84%, #000); }
[data-direction="circuit-schedule"] .lx-btn--secondary { box-shadow: inset 0 0 0 1.5px currentColor; }
[data-direction="circuit-schedule"] .lx-btn--link { font-weight: 600; text-decoration-color: var(--lx-accent); }
[data-direction="circuit-schedule"] .lx-tone-dark .lx-btn--primary { background: #ffffff; color: #111519; box-shadow: none; }

/* ── header: the name and nav over an earth-sleeve rule ── */
.mk-demo-site[data-direction="circuit-schedule"] .mk-dh { background: color-mix(in srgb, var(--lx-paper) 96%, transparent); border-bottom: 0; box-shadow: none; }
.mk-demo-site[data-direction="circuit-schedule"] .mk-dh::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--cs-earth); }
.mk-demo-site[data-direction="circuit-schedule"] .mk-dh-brand { font-family: var(--lx-body); font-size: clamp(1.15rem, 3cqi, 1.35rem); font-weight: 700; letter-spacing: -.01em; }
.mk-demo-site[data-direction="circuit-schedule"] .mk-dh-links { gap: 0; padding: 0; border-radius: 4px; background: var(--cs-card); border-color: var(--lx-line); font-weight: 600; font-size: .82rem; letter-spacing: .02em; }
.mk-demo-site[data-direction="circuit-schedule"] .mk-dh-links a, .mk-demo-site[data-direction="circuit-schedule"] .mk-dh-links .mk-inert { border-radius: 0; border-right: 1px solid var(--lx-line); }
.mk-demo-site[data-direction="circuit-schedule"] .mk-dh-links li[data-current] a { background: var(--lx-ink); color: var(--lx-paper); }
.mk-demo-site[data-direction="circuit-schedule"] .mk-dh-links .mk-dh-index, .mk-demo-site[data-direction="circuit-schedule"] .mk-dh-links .mk-dh-dot { display: none; }
.mk-demo-site[data-direction="circuit-schedule"] .mk-dh-links a, .mk-demo-site[data-direction="circuit-schedule"] .mk-dh-brand > span { white-space: nowrap; }
@container demo (max-width: 1199px) {
  .mk-demo-site[data-direction="circuit-schedule"] .mk-dh-nav, .mk-demo-site[data-direction="circuit-schedule"] .mk-dh-cta { display: none; }
  .mk-demo-site[data-direction="circuit-schedule"] .mk-dh-menu { display: block; }
}
.mk-demo-site[data-direction="circuit-schedule"] .mk-dh-menu > summary { border-radius: 4px; background: var(--lx-accent); color: var(--lx-accent-ink); box-shadow: none; }
.mk-demo-site[data-direction="circuit-schedule"] .mk-dh-panel { border-radius: 6px; background: var(--cs-card); }
.mk-demo-site[data-direction="circuit-schedule"] .mk-dh-panel-links > li > * { border-radius: 0; font-weight: 600; }
.mk-demo-site[data-direction="circuit-schedule"] .mk-dh-panel-links .mk-dh-index { color: var(--lx-accent); opacity: 1; font-variant-numeric: tabular-nums; }
.mk-demo-site[data-direction="circuit-schedule"] .mk-dh-panel-links > li[data-current] > * { background: var(--cs-soft); color: var(--lx-ink); box-shadow: inset 4px 0 0 var(--lx-accent); }

/* ── hero: the drawing on a sheet with a title block ── */
[data-direction="circuit-schedule"] .lx-hero-orbit, [data-direction="circuit-schedule"] .lx-hero-sweep, [data-direction="circuit-schedule"] .lx-hero-scroll { display: none !important; }
[data-direction="circuit-schedule"] :is(.lx-hero, .lx-split) :is(.lx-hero-media, .lx-split-media) { position: relative; border-radius: var(--lx-media-r); background: var(--cs-card); box-shadow: 0 0 0 1px var(--lx-ink), 10px 10px 0 -1px var(--cs-soft), 10px 10px 0 0 var(--lx-line); overflow: hidden; }
[data-direction="circuit-schedule"] :is(.lx-hero-media, .lx-split-media) img { object-fit: contain !important; padding: 4%; background: var(--cs-card); }
[data-direction="circuit-schedule"] .lx-hero--split .lx-hero-media { margin: 0 var(--lx-gutter) clamp(1.5rem, 4cqi, 2.5rem); aspect-ratio: 4 / 3; }
@container (min-width: 900px) {
  [data-direction="circuit-schedule"] .lx-hero--split .lx-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; min-height: min(calc(var(--mk-vh, 1svh) * 76), 46rem); }
  [data-direction="circuit-schedule"] .lx-hero--split .lx-hero-media { margin: clamp(2rem, 4cqi, 3rem) var(--lx-gutter) clamp(2rem, 4cqi, 3rem) 0; aspect-ratio: 5 / 6; }
}
[data-direction="circuit-schedule"] .lx-hero--editorial { padding-top: clamp(3rem, 8cqi, 6rem); }
[data-direction="circuit-schedule"] .lx-note { border-top: 0; padding-top: .9rem; background: linear-gradient(var(--lx-line), var(--lx-line)) 0 0 / 3rem 1px no-repeat; }

/* ── services as a circuit schedule: a ruled table of numbered ways ── */
[data-direction="circuit-schedule"] .lx-svc-index { gap: 0; border-top: 2px solid var(--lx-ink); background: var(--cs-card); counter-reset: none; }
[data-direction="circuit-schedule"] .lx-svc-index-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--lx-line); border-radius: 0; background: transparent; transition: background-color .2s ease; }
[data-direction="circuit-schedule"] .lx-svc-index-item > span { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); column-gap: 1rem; row-gap: .2rem; align-items: baseline; }
[data-direction="circuit-schedule"] .lx-services--index[data-numbers="off"] .lx-svc-index-item > span { grid-template-columns: minmax(0, 1fr); padding-left: 1rem; }
[data-direction="circuit-schedule"] .lx-svc-index-item:hover { background: color-mix(in srgb, var(--lx-accent) 6%, transparent); }
[data-direction="circuit-schedule"] .lx-svc-index-n { grid-row: span 2; align-self: stretch; display: grid; place-items: center; border-right: 1px solid var(--lx-line); color: var(--lx-accent); font: 600 .78rem/1 var(--lx-body); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
[data-direction="circuit-schedule"] .lx-svc-index-n::before { content: "WAY " attr(data-n); }
[data-direction="circuit-schedule"] .lx-svc-index-name { font-family: var(--lx-body); font-size: clamp(1.05rem, 2.8cqi, 1.3rem); font-weight: 600; letter-spacing: -.01em; text-transform: none; }
[data-direction="circuit-schedule"] .lx-svc-index-detail { grid-column: 2; color: var(--lx-muted); }
[data-direction="circuit-schedule"] .lx-services--index[data-numbers="off"] .lx-svc-index-detail { grid-column: 1; }
[data-direction="circuit-schedule"] .lx-svc-index-go { font: 600 .8rem/1 var(--lx-body); letter-spacing: .02em; text-decoration: none; padding: .55rem .7rem; border: 1px solid var(--lx-line); border-radius: 3px; white-space: nowrap; }
[data-direction="circuit-schedule"] .lx-svc-index, [data-direction="circuit-schedule"] .lx-services--index .lx-svc-index { grid-template-columns: minmax(0, 1fr) !important; }
[data-direction="circuit-schedule"] .lx-svc-list { border-top: 2px solid var(--lx-ink); }
[data-direction="circuit-schedule"] .lx-svc { padding-block: 1.2rem; }
[data-direction="circuit-schedule"] .lx-svc .lx-h3 { font-size: clamp(1.05rem, 2.2cqi, 1.3rem); }
/* the fact slot: a terminal strip the electrician fills in, never a quoted figure */
[data-direction="circuit-schedule"] .lx-svc-price, [data-direction="circuit-schedule"] .lx-price-amount { display: inline-flex; align-items: center; min-height: 1.9rem; padding: 0 .7rem; border: 1px solid color-mix(in srgb, var(--lx-accent) 55%, transparent); border-left: 6px solid var(--lx-accent); border-radius: 2px; background: color-mix(in srgb, var(--lx-accent) 6%, var(--cs-card)); color: var(--lx-accent); font: 600 .74rem/1 var(--lx-body); letter-spacing: .02em; white-space: nowrap; }
[data-direction="circuit-schedule"][data-theme="dark"] :is(.lx-svc-price, .lx-price-amount) { color: color-mix(in srgb, var(--lx-accent) 40%, #ffffff); }
[data-direction="circuit-schedule"] .lx-tone-dark :is(.lx-svc-price, .lx-price-amount) { color: #ffffff; border-color: rgb(255 255 255 / .4); background: rgb(255 255 255 / .06); }

/* ── steps: rocker switches, the last one on ── */
[data-direction="circuit-schedule"] .lx-tone-soft { background-color: var(--cs-soft); color: var(--lx-ink); }
[data-direction="circuit-schedule"] .lx-step-n { position: relative; display: inline-grid; place-items: center; width: 2.2rem; height: 3.1rem; border-radius: 6px; background: var(--cs-card); color: transparent; font-size: 0; box-shadow: inset 0 0 0 2px var(--lx-ink); }
[data-direction="circuit-schedule"] .lx-step-n::before { content: ""; position: absolute; left: 5px; right: 5px; top: 5px; height: calc(50% - 6px); border-radius: 3px; background: var(--lx-ink); }
[data-direction="circuit-schedule"] .lx-step:last-child .lx-step-n::before { top: auto; bottom: 5px; background: var(--lx-accent); }
[data-direction="circuit-schedule"] .lx-steps--cards .lx-step { border: 0; border-radius: 4px; background: var(--cs-card); box-shadow: inset 0 0 0 1px var(--lx-line); }
[data-direction="circuit-schedule"] .lx-steps--cards .lx-step:nth-child(even) { margin-top: 0; }
[data-direction="circuit-schedule"] .lx-steps--timeline .lx-step:not(:last-child)::after { left: calc(1.1rem - 1px); top: 3.4rem; width: 2px; background: repeating-linear-gradient(var(--lx-accent) 0 6px, transparent 6px 10px); }

/* ── prices, questions and split ── */
[data-direction="circuit-schedule"] .lx-price-group { padding: clamp(1rem, 2.4cqi, 1.5rem); border: 0; border-top: 2px solid var(--lx-ink); border-radius: 0; background: var(--cs-card); }
[data-direction="circuit-schedule"] .lx-price-group-title { font-family: var(--lx-head); font-size: 1.4rem; letter-spacing: .03em; }
[data-direction="circuit-schedule"] .lx-faq-list { border-top: 2px solid var(--lx-ink); }
[data-direction="circuit-schedule"] .lx-faq-item summary { font-weight: 600; }
[data-direction="circuit-schedule"] .lx-faq-mark::before, [data-direction="circuit-schedule"] .lx-faq-mark::after { background: var(--lx-accent); }
[data-direction="circuit-schedule"] .lx-points li::before { top: .45em; width: .9rem; height: .5rem; border-radius: 1px; background: var(--cs-earth); }

/* ── dark bands: a blueprint grid; the emergency band carries an alarm edge ── */
[data-direction="circuit-schedule"] .lx-tone-dark { background-color: var(--lx-dark); background-image: linear-gradient(rgb(120 170 220 / .08) 1px, transparent 1px), linear-gradient(90deg, rgb(120 170 220 / .08) 1px, transparent 1px); background-size: 1.5rem 1.5rem; }
[data-direction="circuit-schedule"] .lx-cta.lx-tone-dark { box-shadow: inset 8px 0 0 var(--cs-alarm); }
[data-direction="circuit-schedule"] .lx-cta-number { font-family: var(--lx-head); font-size: clamp(2.4rem, 6cqi, 4rem); letter-spacing: .02em; }
[data-direction="circuit-schedule"] .lx-facts { border-top: 2px solid var(--lx-ink); gap: 0; }
[data-direction="circuit-schedule"] .lx-facts > div { padding: .9rem 1rem; border-bottom: 1px solid var(--lx-line); background: var(--cs-card); }
[data-direction="circuit-schedule"] .lx-facts > div { grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr); }
[data-direction="circuit-schedule"] .lx-facts > div:has(.lx-hours) { grid-template-columns: minmax(0, 1fr); }
[data-direction="circuit-schedule"] .lx-facts dd { min-width: 0; overflow-wrap: anywhere; }
[data-direction="circuit-schedule"] .lx-facts .lx-hours li { gap: .75rem; }
[data-direction="circuit-schedule"] .lx-facts .lx-hours li > span { min-width: 0; white-space: normal; }
[data-direction="circuit-schedule"] .lx-facts .lx-hours li > span:last-child { white-space: normal; text-align: right; }
[data-direction="circuit-schedule"] .lx-facts .lx-hours li > span:first-child { flex: none; overflow-wrap: normal; } /* a label stays whole ("Emergencies"); the hours wrap */
[data-direction="circuit-schedule"] .lx-footer { position: relative; }
[data-direction="circuit-schedule"] .lx-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--cs-earth); }
[data-direction="circuit-schedule"] .lx-footer-name { font-family: var(--lx-body); font-weight: 700; letter-spacing: -.01em; }

/* ── the guided request on a drawing sheet ── */
.mk-demo-site[data-direction="circuit-schedule"] .mk-enq-card { border-radius: 4px; background: var(--cs-card); box-shadow: 0 0 0 1px var(--lx-ink), 8px 8px 0 0 var(--cs-soft); }
.mk-demo-site[data-direction="circuit-schedule"] .mk-enq-chip { border-radius: 3px; }
.mk-demo-site[data-direction="circuit-schedule"] .mk-enq :is(input, textarea) { border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  [data-direction="circuit-schedule"] .lx-svc-index-item { transition: none; }
}

/* Narrow phones (280): the "to confirm" slot pills wrap within their row instead of widening the page (home, planned and
   prices were up to 105px wide), and the split hero gives way to a long word. */
[data-direction="circuit-schedule"] :is(.lx-svc-head, .lx-price-head) { flex-wrap: wrap; row-gap: .45rem; min-width: 0; }
[data-direction="circuit-schedule"] :is(.lx-svc-price, .lx-price-amount) { white-space: normal; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
@container (max-width: 340px) {
  [data-direction="circuit-schedule"] .lx-hero--split .lx-hero-grid { grid-template-columns: minmax(0, 1fr); }
  [data-direction="circuit-schedule"] .lx-hero-text :is(h1, h2) { font-size: min(11.5cqi, 2.6rem); overflow-wrap: break-word; }
}

/* ── signature (correction 10): the drawing board and the circuit schedule ───────────────────────────────────────────
   The hero is a working SHEET on the drafting grid: the words, and the consumer-unit drawing on a ruled sheet with its
   title block filled in. The services are the SCHEDULE itself — numbered ways in a table: circuit, what it covers and
   the kind of work, the way an electrician writes the chart inside the board door. */
.mk-demo-site[data-direction="circuit-schedule"] .lx-hero--board { padding-block: clamp(2.5rem, 7cqi, 6rem); }
.mk-demo-site[data-direction="circuit-schedule"] .lx-board { display: grid; gap: clamp(2rem, 5cqi, 3.5rem); align-items: center; }
.mk-demo-site[data-direction="circuit-schedule"] .lx-hero--board .lx-display { font-size: calc(clamp(3.4rem, 10cqi, 8.5rem) * var(--lx-title-scale, 1)); max-width: 9ch; }
.mk-demo-site[data-direction="circuit-schedule"] .lx-board-sheet { position: relative; margin: 0; padding: clamp(.75rem, 2cqi, 1.25rem); background: var(--cs-card); box-shadow: 0 0 0 1.5px var(--lx-ink); }
.mk-demo-site[data-direction="circuit-schedule"] .lx-board-sheet .lx-hero-media { aspect-ratio: 4 / 3; overflow: hidden; }
.mk-demo-site[data-direction="circuit-schedule"] .lx-board-sheet .lx-hero-media .lx-img { width: 100%; height: 100%; }
@container demo (min-width: 900px) { .mk-demo-site[data-direction="circuit-schedule"] .lx-board { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

/* the schedule table */
.mk-demo-site[data-direction="circuit-schedule"] .lx-schedule { list-style: none; margin: clamp(1.75rem, 4cqi, 2.75rem) 0 0; padding: 0; border-top: 4px solid var(--lx-ink); background: var(--cs-card); }
.mk-demo-site[data-direction="circuit-schedule"] .lx-way { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: .35rem 1rem; align-items: baseline; padding: 1rem 1rem; border-bottom: 1px solid var(--lx-line); }
.mk-demo-site[data-direction="circuit-schedule"] .lx-way-n { font: 400 1.6rem/1 var(--lx-head); }
.mk-demo-site[data-direction="circuit-schedule"] .lx-way-n::before { content: "Way "; font: 600 .875rem/1 var(--lx-body); letter-spacing: .08em; text-transform: uppercase; color: var(--lx-muted); margin-right: .2rem; }
.mk-demo-site[data-direction="circuit-schedule"] .lx-way-name { font: 400 clamp(1.4rem, 2.6cqi, 1.9rem)/1 var(--lx-head); letter-spacing: .01em; }
.mk-demo-site[data-direction="circuit-schedule"] .lx-way-name a { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.mk-demo-site[data-direction="circuit-schedule"] .lx-way-detail { grid-column: 2 / -1; color: var(--lx-muted); }
.mk-demo-site[data-direction="circuit-schedule"] .lx-way-rating { grid-row: 1; grid-column: 3; justify-self: end; padding: .3rem .65rem; border: 1.5px solid currentColor; font: 700 .875rem/1 var(--lx-body); letter-spacing: .1em; text-transform: uppercase; }
.mk-demo-site[data-direction="circuit-schedule"] .lx-way:nth-child(odd) { background: color-mix(in srgb, var(--lx-ink) 3%, transparent); }
@container demo (min-width: 900px) {
  .mk-demo-site[data-direction="circuit-schedule"] .lx-way { grid-template-columns: 7rem minmax(12rem, 1fr) minmax(0, 1.6fr) 7.5rem; align-items: center; }
  .mk-demo-site[data-direction="circuit-schedule"] .lx-way-detail { grid-column: auto; }
  .mk-demo-site[data-direction="circuit-schedule"] .lx-way-rating { grid-column: auto; grid-row: auto; }
}

/* ── gate10 correction: a complete sheet, intentional dark surfaces, the lower page as an electrician's paperwork ─────
   The drawing sits on one clean sheet (no stray rules, no empty title block). In dark mode the sheet IS the dark card
   and the drawing is drawn light on it — no grey square. The emergency band is a HAZARD LABEL (earth stripe edge);
   registration reads as a TEST CERTIFICATE: boxed fields with the value column the electrician completes. */
[data-direction="circuit-schedule"][data-theme="dark"] .lx-board-sheet { background: var(--cs-card); box-shadow: 0 0 0 1.5px var(--lx-line); }
.mk-demo-site[data-direction="circuit-schedule"] .lx-cta[data-lx-layout="phone"].lx-tone-dark { border-top: 10px solid transparent; border-image: var(--cs-earth) 10; }
.mk-demo-site[data-direction="circuit-schedule"] .lx-cta[data-lx-layout="phone"] .lx-cta-grid { gap: 1.5rem 3rem; }
.mk-demo-site[data-direction="circuit-schedule"] .lx-cta[data-lx-layout="phone"] .lx-cta-act { display: grid; gap: .9rem; justify-items: start; padding: 1.2rem 1.4rem; border: 2px solid var(--cs-alarm); }
.mk-demo-site[data-direction="circuit-schedule"] .lx-services[data-lx-layout="certificate"] .lx-svc-list { border: 2px solid var(--lx-ink); background: var(--cs-card); }
.mk-demo-site[data-direction="circuit-schedule"] .lx-services[data-lx-layout="certificate"] .lx-svc { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--lx-ink); }
.mk-demo-site[data-direction="circuit-schedule"] .lx-services[data-lx-layout="certificate"] .lx-svc:last-child { border-bottom: 0; }
.mk-demo-site[data-direction="circuit-schedule"] .lx-services[data-lx-layout="certificate"] .lx-svc-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center; }
.mk-demo-site[data-direction="circuit-schedule"] .lx-services[data-lx-layout="certificate"] .lx-h3 { font: 400 clamp(1.3rem, 2.4cqi, 1.7rem)/1 var(--lx-head); letter-spacing: .02em; }
@container demo (min-width: 900px) {
  .mk-demo-site[data-direction="circuit-schedule"] .lx-services[data-lx-layout="certificate"] .lx-svc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
  .mk-demo-site[data-direction="circuit-schedule"] .lx-services[data-lx-layout="certificate"] .lx-svc > .lx-body { grid-column: 2; grid-row: 1; margin: 0; }
}


/* ── gate11 correction: one clean drawing, readable at 280 ────────────────────────────────────────────────────────────
   The empty title-block box drawn over every drawing's corner is gone (it was CSS, not the artwork), and dark drawings
   take the floor's lighten blend so the inverted paper sinks into the dark sheet — no grey square. On narrow frames a
   circuit row stacks (way, name, detail, rating) and certificate fields stack their value under the label. */
@container demo (max-width: 479px) {
  .mk-demo-site[data-direction="circuit-schedule"] .lx-way { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .mk-demo-site[data-direction="circuit-schedule"] .lx-way-rating { grid-row: auto; grid-column: auto; justify-self: start; }
  .mk-demo-site[data-direction="circuit-schedule"] .lx-way-detail { grid-column: auto; }
}
@container demo (max-width: 599px) { .mk-demo-site[data-direction="circuit-schedule"] .lx-services[data-lx-layout="certificate"] .lx-svc-head { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
.mk-demo-site[data-direction="circuit-schedule"] .lx-services[data-lx-layout="certificate"] .lx-h3 { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.mk-demo-site[data-direction="circuit-schedule"] .lx-services[data-lx-layout="certificate"] .lx-svc-price { white-space: normal; }
/* ── gate12 critic correction: whole words, one sheet ────────────────────────────────────────────────────────────────
   Certificate labels never break inside a word ("COMPETE/NT-PER-SON"): the label column has a real minimum and the
   value chip sits under its label. The drawing sits on its own paper in ONE frame (no nested frame and offset shadow,
   no white card around a grey paper); in dark mode the sheet is transparent with a hairline, so no square remains.
   The installed enquiry is squared off with an earth-stripe progress. */
.mk-demo-site[data-direction="circuit-schedule"] .lx-services[data-lx-layout="certificate"] .lx-h3 { hyphens: none; overflow-wrap: normal; word-break: normal; font-size: clamp(1.15rem, 2cqi, 1.45rem); }
.mk-demo-site[data-direction="circuit-schedule"] .lx-services[data-lx-layout="certificate"] .lx-svc-head { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: .5rem; }
@container demo (min-width: 900px) { .mk-demo-site[data-direction="circuit-schedule"] .lx-services[data-lx-layout="certificate"] .lx-svc { grid-template-columns: minmax(15rem, 1fr) minmax(0, 1.5fr); } }
.mk-demo-site[data-direction="circuit-schedule"] .lx-board-sheet { background: var(--mk-art-paper, var(--cs-card)); }
.mk-demo-site[data-direction="circuit-schedule"] .lx-board-sheet .lx-hero-media { box-shadow: none; border-radius: 0; background: transparent; }
.mk-demo-site[data-direction="circuit-schedule"] .lx-board-sheet .lx-hero-media img { padding: 0; background: transparent; }
[data-direction="circuit-schedule"][data-theme="dark"] .lx-board-sheet { background: transparent; box-shadow: 0 0 0 1.5px var(--lx-line); }
.mk-demo-site[data-direction="circuit-schedule"] [data-enquiry-intent], .mk-demo-site[data-direction="circuit-schedule"] [data-enquiry-intent] > * { border-radius: 0; }
.mk-demo-site[data-direction="circuit-schedule"] [data-enquiry-journey] ol[aria-label="Enquiry progress"] li > span:first-child { height: 6px; border-radius: 0; }
.mk-demo-site[data-direction="circuit-schedule"] [data-enquiry-journey] ol[aria-label="Enquiry progress"] li > span:first-child.bg-brand { background-image: var(--cs-earth); }
.mk-demo-site[data-direction="circuit-schedule"] [data-journey-surface] { border-radius: 0; box-shadow: 0 0 0 2px var(--lx-ink); }

/* ── system mode: the design's dark rules follow the visitor's device unless the owner fixed light or dark ── */
@media (prefers-color-scheme: dark) {
[data-direction="circuit-schedule"][data-theme="system"] {
  --lx-paper: #0f1418; --lx-ink: #e9eef1; --lx-muted: #a7b2ba; --lx-line: rgba(233,238,241,0.15);
  --lx-dark: #070a0d; --cs-card: #161d23; --cs-soft: #1d262d; --cs-grid: rgba(120,170,220,0.07);
}
[data-direction="circuit-schedule"][data-theme="system"] .lx-eyebrow { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }
[data-direction="circuit-schedule"][data-theme="system"] :is(.lx-svc-price, .lx-price-amount) { color: color-mix(in srgb, var(--lx-accent) 40%, #ffffff); }
[data-direction="circuit-schedule"][data-theme="system"] .lx-board-sheet { background: var(--cs-card); box-shadow: 0 0 0 1.5px var(--lx-line); }
[data-direction="circuit-schedule"][data-theme="system"] .lx-board-sheet { background: transparent; box-shadow: 0 0 0 1.5px var(--lx-line); }
}