/* Generated by scripts/direction-styles.mjs from components/marketplace/demo/pipe-run.css — do not edit. */
/* ── pipe-run.css ── */
/* ── Pipe Run — ashdub. Plumber (cohort two, October 2026) ───────────────────────────────────────────────────────────
   A plumber's site made plain and practical: lime-plaster paper, slate ink and one copper accent (the owner's --brand).
   Its signature is the copper PIPE RUN — a rounded line with elbow joints along the header and section openings — with
   steps drawn as VALVES on a line, the two first-click routes as a dark URGENT card beside a light PLANNED card, and
   every plumber-confirmed fact as an arrow-ended PIPE LABEL rather than a promise. Inter Tight for display, Manrope 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="pipe-run"] {
  --lx-head: var(--font-inter-tight), "Inter Tight", system-ui, sans-serif; --lx-body: var(--font-manrope), "Manrope", system-ui, sans-serif;
  --lx-head-w: 800; --lx-head-track: -0.034em; --lx-head-lh: 0.96; --lx-head-case: none;
  --lx-paper: #f2efe9; --lx-ink: #1b2328; --lx-muted: #545e65; --lx-line: rgba(27,35,40,0.14);
  --lx-dark: #1b2328; --lx-dark-ink: #f2efe9; --lx-dark-muted: #b9c1c6; --lx-dark-line: rgba(242,239,233,0.16);
  --lx-btn-r: 8px; --lx-btn-case: none; --lx-btn-track: 0; --lx-btn-size: .95rem; --lx-media-r: 14px;
  --lx-eyebrow-case: uppercase; --lx-eyebrow-track: 0.12em; --lx-sec: clamp(4rem, 9cqi, 7.5rem);
  --pr-card: #fbfaf7; --pr-soft: #e6e2d9; --pr-pipe: 5px;
  --pr-joint: radial-gradient(circle, var(--lx-paper) 0 3px, var(--lx-accent) 3.5px 7px, transparent 7.5px);
}
[data-direction="pipe-run"][data-theme="dark"] {
  --lx-paper: #12181c; --lx-ink: #eef0ee; --lx-muted: #aab3b8; --lx-line: rgba(238,240,238,0.14);
  --lx-dark: #0a0f12; --pr-card: #1a2227; --pr-soft: #222c32;
}

/* ── type: tight, heavy and direct ── */
[data-direction="pipe-run"] .lx-display { font-size: calc(clamp(2.6rem, 6.6cqi, 5.8rem) * var(--lx-title-scale, 1)); max-width: 13ch; }
[data-direction="pipe-run"] .lx-h2 { font-size: calc(clamp(2rem, 4.5cqi, 3.7rem) * var(--lx-title-scale, 1)); line-height: 1; max-width: 17ch; }
[data-direction="pipe-run"] .lx-h3 { font-weight: 750; letter-spacing: -.018em; }
[data-direction="pipe-run"] .lx-eyebrow { display: inline-flex; align-items: flex-end; gap: .6rem; font-size: .72rem; font-weight: 800; color: var(--lx-accent); }
/* an elbow joint before every eyebrow */
[data-direction="pipe-run"] .lx-eyebrow::before { content: ""; width: .9rem; height: .9rem; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; border-bottom-left-radius: .55rem; transform: translateY(-.15rem); }
[data-direction="pipe-run"] .lx-tone-dark .lx-eyebrow { color: color-mix(in srgb, var(--lx-accent) 38%, #ffffff); }
[data-direction="pipe-run"][data-theme="dark"] .lx-eyebrow { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }
[data-direction="pipe-run"] .lx-lede { color: var(--lx-muted); }

/* ── buttons: square-shouldered and solid ── */
.mk-demo-site[data-direction="pipe-run"] .lx-btn--primary { background: var(--lx-accent); color: var(--lx-accent-ink); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .18); }
.mk-demo-site[data-direction="pipe-run"] .lx-btn--primary:hover { background: color-mix(in srgb, var(--lx-accent) 86%, #000); }
[data-direction="pipe-run"] .lx-btn--secondary { box-shadow: inset 0 0 0 2px currentColor; }
[data-direction="pipe-run"] .lx-btn--link { font-weight: 800; text-decoration-thickness: 2px; text-decoration-color: var(--lx-accent); }
[data-direction="pipe-run"] .lx-tone-dark .lx-btn--primary { background: #ffffff; color: #1b2328; box-shadow: none; }

/* ── header: the name, a plain nav and the pipe run with its joints ── */
.mk-demo-site[data-direction="pipe-run"] .mk-dh { background: color-mix(in srgb, var(--lx-paper) 95%, transparent); border-bottom: 0; box-shadow: none; }
.mk-demo-site[data-direction="pipe-run"] .mk-dh::after { content: ""; position: absolute; left: var(--lx-gutter); right: var(--lx-gutter); bottom: -1px; height: var(--pr-pipe); border-radius: 99px; background: var(--lx-accent); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35); }
.mk-demo-site[data-direction="pipe-run"] .mk-dh-brand { font-size: clamp(1.2rem, 3cqi, 1.45rem); font-weight: 800; letter-spacing: -.02em; }
.mk-demo-site[data-direction="pipe-run"] .mk-dh-links { gap: .1rem; padding: .25rem; border-radius: 10px; background: var(--pr-card); border-color: var(--lx-line); font-weight: 700; font-size: .88rem; }
.mk-demo-site[data-direction="pipe-run"] .mk-dh-links a, .mk-demo-site[data-direction="pipe-run"] .mk-dh-links .mk-inert { border-radius: 7px; }
.mk-demo-site[data-direction="pipe-run"] .mk-dh-links li[data-current] a { background: var(--lx-ink); color: var(--lx-paper); }
.mk-demo-site[data-direction="pipe-run"] .mk-dh-links .mk-dh-index, .mk-demo-site[data-direction="pipe-run"] .mk-dh-links .mk-dh-dot { display: none; }
.mk-demo-site[data-direction="pipe-run"] .mk-dh-links a, .mk-demo-site[data-direction="pipe-run"] .mk-dh-brand > span { white-space: nowrap; }
@container demo (max-width: 1199px) {
  .mk-demo-site[data-direction="pipe-run"] .mk-dh-nav, .mk-demo-site[data-direction="pipe-run"] .mk-dh-cta { display: none; }
  .mk-demo-site[data-direction="pipe-run"] .mk-dh-menu { display: block; }
}
.mk-demo-site[data-direction="pipe-run"] .mk-dh-menu > summary { border-radius: 8px; background: var(--lx-accent); color: var(--lx-accent-ink); box-shadow: none; }
.mk-demo-site[data-direction="pipe-run"] .mk-dh-panel { border-radius: 14px; background: var(--pr-card); }
.mk-demo-site[data-direction="pipe-run"] .mk-dh-panel-links > li > * { border-radius: 8px; font-weight: 700; }
.mk-demo-site[data-direction="pipe-run"] .mk-dh-panel-links .mk-dh-index { color: var(--lx-accent); opacity: 1; font-variant-numeric: tabular-nums; }
.mk-demo-site[data-direction="pipe-run"] .mk-dh-panel-links > li[data-current] > * { background: var(--pr-soft); color: var(--lx-ink); box-shadow: inset 4px 0 0 var(--lx-accent); }

/* ── hero: the photograph framed by a pipe elbow ── */
[data-direction="pipe-run"] .lx-hero-orbit, [data-direction="pipe-run"] .lx-hero-sweep, [data-direction="pipe-run"] .lx-hero-scroll { display: none !important; }
[data-direction="pipe-run"] .lx-hero--split .lx-hero-media { position: relative; margin: 0 var(--lx-gutter) clamp(1.5rem, 4cqi, 2.5rem); border-radius: var(--lx-media-r); overflow: visible; aspect-ratio: 4 / 3; }
[data-direction="pipe-run"] .lx-hero--split .lx-hero-media img { border-radius: var(--lx-media-r); }
[data-direction="pipe-run"] .lx-hero--split .lx-hero-media::before { content: ""; position: absolute; left: -.85rem; top: 1.5rem; bottom: -.85rem; width: 2.2rem; border-left: var(--pr-pipe) solid var(--lx-accent); border-bottom: var(--pr-pipe) solid var(--lx-accent); border-bottom-left-radius: 1.4rem; pointer-events: none; }
[data-direction="pipe-run"] .lx-hero--split .lx-hero-media::after { content: ""; position: absolute; left: calc(-.85rem - 5px); top: calc(1.5rem - 9px); width: 15px; height: 15px; background: var(--pr-joint); pointer-events: none; }
@container (min-width: 900px) {
  [data-direction="pipe-run"] .lx-hero--split .lx-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; min-height: min(calc(var(--mk-vh, 1svh) * 78), 48rem); }
  [data-direction="pipe-run"] .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="pipe-run"] .lx-hero--editorial { padding-top: clamp(3rem, 8cqi, 6rem); }
[data-direction="pipe-run"] .lx-hero--editorial .lx-hero-media { border-radius: var(--lx-media-r); }
[data-direction="pipe-run"] .lx-note { border-top-style: solid; border-top-width: 2px; }

/* ── the two routes: a dark URGENT card beside a light PLANNED card ── */
[data-direction="pipe-run"] .lx-svc-index { border-top: 0; gap: .8rem; }
@container (min-width: 640px) { [data-direction="pipe-run"] .lx-svc-index { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .9rem; } }
[data-direction="pipe-run"] .lx-svc-index-item { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1rem; min-height: clamp(9rem, 22cqi, 13rem); padding: 1.4rem 1.4rem 1.4rem 1.9rem; border: 0; border-radius: 14px; background: var(--pr-card); box-shadow: inset 0 0 0 2px var(--lx-line); transition: box-shadow .2s ease, transform .2s ease; }
[data-direction="pipe-run"] .lx-svc-index-item::before { content: ""; position: absolute; left: .75rem; top: 1.2rem; bottom: 1.2rem; width: var(--pr-pipe); border-radius: 99px; background: var(--lx-accent); }
[data-direction="pipe-run"] .lx-svc-index-item:first-child { background: var(--lx-dark); color: var(--lx-dark-ink); box-shadow: none; }
[data-direction="pipe-run"] .lx-svc-index-item:first-child .lx-svc-index-detail { color: var(--lx-dark-muted); }
[data-direction="pipe-run"] .lx-svc-index-item:first-child .lx-svc-index-name { color: #ffffff; }
[data-direction="pipe-run"] .lx-svc-index-item:first-child::before { background: color-mix(in srgb, var(--lx-accent) 55%, #ffffff); }
[data-direction="pipe-run"] .lx-svc-index-item:first-child .lx-svc-index-go { color: #ffffff; }
[data-direction="pipe-run"] .lx-svc-index-item:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--lx-accent); }
[data-direction="pipe-run"] .lx-svc-index-item:first-child:hover { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lx-accent) 55%, #ffffff); }
[data-direction="pipe-run"] .lx-svc-index-name { font-size: clamp(1.45rem, 4.4cqi, 2.1rem); font-weight: 800; letter-spacing: -.03em; }
[data-direction="pipe-run"] .lx-svc-index-go { font-weight: 800; text-decoration-color: var(--lx-accent); }
[data-direction="pipe-run"] .lx-svc-list { border-top-color: var(--lx-line); }
[data-direction="pipe-run"] .lx-svc { padding-block: 1.3rem; }
[data-direction="pipe-run"] .lx-svc .lx-h3 { font-size: clamp(1.15rem, 2.4cqi, 1.4rem); }
/* the fact slot: an arrow-ended pipe label the plumber fills in, never a quoted figure */
[data-direction="pipe-run"] .lx-svc-price, [data-direction="pipe-run"] .lx-price-amount { display: inline-flex; align-items: center; min-height: 1.95rem; padding: 0 1.15rem 0 .7rem; background: color-mix(in srgb, var(--lx-accent) 13%, var(--lx-paper)); color: var(--lx-accent); font: 750 .78rem/1 var(--lx-body); letter-spacing: .01em; white-space: nowrap; clip-path: polygon(0 0, calc(100% - .65rem) 0, 100% 50%, calc(100% - .65rem) 100%, 0 100%); }
[data-direction="pipe-run"][data-theme="dark"] :is(.lx-svc-price, .lx-price-amount) { color: color-mix(in srgb, var(--lx-accent) 40%, #ffffff); background: color-mix(in srgb, var(--lx-accent) 22%, var(--lx-paper)); }
[data-direction="pipe-run"] .lx-tone-dark :is(.lx-svc-price, .lx-price-amount) { color: #ffffff; background: rgb(255 255 255 / .12); }

/* ── proof: cards hung from a pipe clip ── */
[data-direction="pipe-run"] .lx-proof { border-block: 0; padding-block: clamp(1.25rem, 3cqi, 2.5rem); }
[data-direction="pipe-run"] .lx-proof-list { gap: clamp(.6rem, 1.6cqi, 1rem); border: 0; }
[data-direction="pipe-run"] .lx-proof[data-lx-layout] .lx-proof-list li, [data-direction="pipe-run"] .lx-proof[data-lx-layout] .lx-proof-list li:first-child { position: relative; padding: 1.5rem 1.25rem 1.2rem; border: 0; border-radius: 12px; background: var(--pr-card); box-shadow: inset 0 0 0 1px var(--lx-line); }
[data-direction="pipe-run"] .lx-proof-list li::before { content: ""; position: absolute; left: 1.25rem; right: 1.25rem; top: 0; height: var(--pr-pipe); border-radius: 0 0 4px 4px; background: var(--lx-accent); }
[data-direction="pipe-run"] .lx-proof-title { font-family: var(--lx-head); font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; }
@container (min-width: 1000px) { [data-direction="pipe-run"] .lx-proof-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── steps: valves on a pipe ── */
[data-direction="pipe-run"] .lx-tone-soft { background: var(--pr-soft); color: var(--lx-ink); }
[data-direction="pipe-run"] .lx-step-n { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%; background: var(--lx-paper); color: var(--lx-ink); font: 800 .82rem/1 var(--lx-body); box-shadow: inset 0 0 0 4px var(--lx-accent); font-variant-numeric: tabular-nums; }
[data-direction="pipe-run"] .lx-tone-soft .lx-step-n { background: var(--pr-soft); }
[data-direction="pipe-run"] .lx-steps--row .lx-step { border-top: 0; padding-top: 0; }
@container (min-width: 900px) {
  [data-direction="pipe-run"] .lx-steps--row .lx-steps-list { position: relative; }
  [data-direction="pipe-run"] .lx-steps--row .lx-steps-list::before { content: ""; position: absolute; left: 1.35rem; right: 0; top: calc(1.35rem - var(--pr-pipe) / 2); height: var(--pr-pipe); border-radius: 99px; background: var(--lx-accent); opacity: .85; }
}
[data-direction="pipe-run"] .lx-steps--timeline .lx-step:not(:last-child)::after { left: calc(1.35rem - var(--pr-pipe) / 2); top: 2.7rem; width: var(--pr-pipe); border-radius: 99px; background: var(--lx-accent); opacity: .85; }

/* ── prices and questions ── */
[data-direction="pipe-run"] .lx-price-group { padding: clamp(1rem, 2.4cqi, 1.5rem); border: 0; border-radius: 14px; background: var(--pr-card); box-shadow: inset 0 0 0 1px var(--lx-line); }
[data-direction="pipe-run"] .lx-price-group-title { font-weight: 800; padding-bottom: .5rem; border-bottom: var(--pr-pipe) solid var(--lx-accent); border-radius: 0 0 2px 2px; }
[data-direction="pipe-run"] .lx-price-leader { border-bottom-style: dotted; }
[data-direction="pipe-run"] .lx-faq-list { border-top: 0; display: grid; gap: .5rem; }
[data-direction="pipe-run"] .lx-faq-item { border: 0; border-radius: 10px; background: var(--pr-card); box-shadow: inset 0 0 0 1px var(--lx-line); padding-inline: 1.1rem; }
[data-direction="pipe-run"] .lx-faq-item summary { font-weight: 700; }
[data-direction="pipe-run"] .lx-faq-mark::before, [data-direction="pipe-run"] .lx-faq-mark::after { background: var(--lx-accent); }

/* ── dark bands: slate with faint pipe runs; contact and footer ── */
[data-direction="pipe-run"] .lx-tone-dark { background-color: var(--lx-dark); background-image: repeating-linear-gradient(0deg, transparent 0 58px, rgb(255 255 255 / .035) 58px 63px); }
[data-direction="pipe-run"] .lx-cta-number { font-family: var(--lx-head); font-weight: 800; letter-spacing: -.02em; }
[data-direction="pipe-run"] .lx-facts { border-top: 0; gap: .5rem; }
[data-direction="pipe-run"] .lx-facts > div { padding: .9rem 1rem; border: 0; border-radius: 12px; background: var(--pr-card); box-shadow: inset 0 0 0 1px var(--lx-line); }
[data-direction="pipe-run"] .lx-footer { position: relative; }
[data-direction="pipe-run"] .lx-footer::before { content: ""; position: absolute; left: var(--lx-gutter); right: var(--lx-gutter); top: 1.1rem; height: var(--pr-pipe); border-radius: 99px; background: rgb(255 255 255 / .22); }
[data-direction="pipe-run"] .lx-footer-name { font-weight: 800; }

/* ── the guided request inherits the card ── */
.mk-demo-site[data-direction="pipe-run"] .mk-enq-card { border-radius: 16px; background: var(--pr-card); }
.mk-demo-site[data-direction="pipe-run"] .mk-enq-chip { border-radius: 8px; }
.mk-demo-site[data-direction="pipe-run"] .mk-enq :is(input, textarea) { border-radius: 8px; }

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

/* Narrow phones (280): nothing may widen the page. Fact rows and the "to confirm" slot pills wrap within their row
   (the factory's nowrap pills and min-content fact columns pushed planned, quote, credentials and prices up to 83px
   wide), and the split hero's single track and title size give way to a long word such as "Registrations". */
[data-direction="pipe-run"] .lx-facts > div { grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr); }
[data-direction="pipe-run"] .lx-facts > div:has(.lx-hours) { grid-template-columns: minmax(0, 1fr); }
[data-direction="pipe-run"] .lx-facts dd { min-width: 0; overflow-wrap: anywhere; }
[data-direction="pipe-run"] .lx-facts .lx-hours li > span { min-width: 0; white-space: normal; }
[data-direction="pipe-run"] .lx-facts .lx-hours li > span:first-child { flex: none; overflow-wrap: normal; } /* a day stays whole ("Saturday"); the hours wrap */
[data-direction="pipe-run"] :is(.lx-svc-head, .lx-price-head) { flex-wrap: wrap; row-gap: .45rem; min-width: 0; }
[data-direction="pipe-run"] :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="pipe-run"] .lx-hero--split .lx-hero-grid { grid-template-columns: minmax(0, 1fr); }
  [data-direction="pipe-run"] .lx-hero-text :is(h1, h2) { font-size: min(11.5cqi, 2.6rem); overflow-wrap: break-word; }
}

/* ── signature (correction 10): two doors, then "what's happening?" ──────────────────────────────────────────────────
   The first screen is a TRIAGE, not a banner: the question as the headline, then two doors — the urgent door dark and
   number-led, the planned door on paper with the pipe drawing — joined by the copper run with its joint. Below, each
   symptom is a disclosure that says what to do and which route it takes. */
.mk-demo-site[data-direction="pipe-run"] .lx-hero--triage { padding-block: clamp(2.5rem, 7cqi, 6rem) clamp(3rem, 8cqi, 6.5rem); }
.mk-demo-site[data-direction="pipe-run"] .lx-triage { display: grid; gap: clamp(1.75rem, 4cqi, 3rem); }
.mk-demo-site[data-direction="pipe-run"] .lx-triage-head .lx-display { max-width: 12ch; font-size: calc(clamp(2.6rem, 7cqi, 6rem) * var(--lx-title-scale, 1)); }
.mk-demo-site[data-direction="pipe-run"] .lx-triage-doors { position: relative; display: grid; gap: 1rem; }
.mk-demo-site[data-direction="pipe-run"] .lx-door { position: relative; display: flex; flex-direction: column; gap: 1.1rem; min-height: 15rem; padding: clamp(1.25rem, 3cqi, 2rem); border-radius: var(--lx-media-r); }
.mk-demo-site[data-direction="pipe-run"] .lx-door-k { font: 800 clamp(3rem, 8cqi, 5.5rem)/.8 var(--lx-head); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px currentColor; opacity: .55; }
.mk-demo-site[data-direction="pipe-run"] .lx-door--now { background: var(--lx-dark); color: var(--lx-dark-ink); }
.mk-demo-site[data-direction="pipe-run"] .lx-door--now .lx-btn { justify-content: space-between; min-height: 3.5rem; font-size: 1.1rem; background: var(--lx-accent); color: var(--lx-accent-ink); }
.mk-demo-site[data-direction="pipe-run"] .lx-door--now .lx-note { margin-top: auto; color: var(--lx-dark-muted); }
.mk-demo-site[data-direction="pipe-run"] .lx-door--plan { background: var(--pr-card); box-shadow: inset 0 0 0 2px var(--lx-ink); }
.mk-demo-site[data-direction="pipe-run"] .lx-door--plan .lx-btn { min-height: 3.5rem; }
.mk-demo-site[data-direction="pipe-run"] .lx-door--plan .lx-hero-media { margin-top: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(var(--lx-media-r) - 4px); }
.mk-demo-site[data-direction="pipe-run"] .lx-door--plan .lx-hero-media .lx-img { width: 100%; height: 100%; }
/* the copper run joining the two doors */
.mk-demo-site[data-direction="pipe-run"] .lx-triage-doors::before { content: ""; position: absolute; left: 50%; top: -1rem; bottom: -1rem; width: var(--pr-pipe); translate: -50% 0; background: var(--lx-accent); border-radius: 3px; z-index: -1; }
@container demo (min-width: 900px) {
  .mk-demo-site[data-direction="pipe-run"] .lx-triage { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: end; }
  .mk-demo-site[data-direction="pipe-run"] .lx-triage-doors { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .mk-demo-site[data-direction="pipe-run"] .lx-door { min-height: 26rem; }
  .mk-demo-site[data-direction="pipe-run"] .lx-triage-doors::before { left: -1rem; right: -1rem; top: 50%; bottom: auto; width: auto; height: var(--pr-pipe); translate: 0 -50%; }
}

/* symptoms: disclosures with their route */
.mk-demo-site[data-direction="pipe-run"] .lx-symptoms { display: grid; gap: clamp(1.5rem, 4cqi, 3rem); }
.mk-demo-site[data-direction="pipe-run"] .lx-symptom-list { list-style: none; margin: 0; padding: 0; border-top: var(--pr-pipe) solid var(--lx-ink); }
.mk-demo-site[data-direction="pipe-run"] .lx-symptom { border-bottom: 1px solid var(--lx-line); padding-block: .4rem; }
.mk-demo-site[data-direction="pipe-run"] .lx-symptom > summary { padding-left: 1.6rem; background: var(--pr-joint) 0 50% / 14px 14px no-repeat; }
.mk-demo-site[data-direction="pipe-run"] .lx-symptom-name { font: 800 clamp(1.2rem, 2.4cqi, 1.6rem)/1.1 var(--lx-head); letter-spacing: -.02em; }
.mk-demo-site[data-direction="pipe-run"] .lx-symptom-route { display: inline-flex; align-items: center; min-height: 1.9rem; padding: 0 .75rem; border-radius: 999px; background: var(--lx-accent); color: var(--lx-accent-ink); font-weight: 700; font-size: .875rem; }
.mk-demo-site[data-direction="pipe-run"] .lx-symptom[open] { padding-bottom: 1.25rem; }
.mk-demo-site[data-direction="pipe-run"] .lx-symptom .lx-body { max-width: 52ch; padding-left: 1.6rem; color: var(--lx-muted); }
.mk-demo-site[data-direction="pipe-run"] .lx-symptom .lx-btn { margin-left: 1.6rem; }
@container demo (min-width: 900px) { .mk-demo-site[data-direction="pipe-run"] .lx-symptoms { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }

/* ── gate10 correction: useful urgency, no dead surfaces ─────────────────────────────────────────────────────────────
   The urgent door now carries what to do (the service line) and the gas-safety line, so the dark half is information,
   not a slab. The decorative pinstripes on dark bands are gone. Promises read as ONE job ticket (a checklist with a
   perforated edge) and credentials as a JOB SHEET with tick boxes — neither is a row of cards. */
.mk-demo-site[data-direction="pipe-run"] .lx-tone-dark { background-image: none; }
.mk-demo-site[data-direction="pipe-run"] .lx-door--now { justify-content: flex-start; }
.mk-demo-site[data-direction="pipe-run"] .lx-door-body { margin: 0; font: 600 clamp(1.1rem, 2.1cqi, 1.35rem)/1.4 var(--lx-body); color: var(--lx-dark-ink); max-width: 30ch; }
.mk-demo-site[data-direction="pipe-run"] .lx-door-safety { margin: auto 0 0; padding: .85rem 1rem; border-left: 4px solid var(--lx-accent); background: rgb(255 255 255 / .06); font-weight: 600; color: var(--lx-dark-ink); }
.mk-demo-site[data-direction="pipe-run"] .lx-door--now .lx-btn { width: 100%; }
[data-direction="pipe-run"][data-theme="dark"] .lx-door--now { background: var(--pr-card); box-shadow: inset 0 0 0 2px var(--lx-accent); }

/* promises: one job ticket */
.mk-demo-site[data-direction="pipe-run"] .lx-proof[data-lx-layout="ticket"] .lx-proof-list { display: grid; gap: 0; max-width: 46rem; margin-inline: auto; padding: 1.4rem 1.6rem 1.6rem; background: var(--pr-card); box-shadow: inset 0 0 0 2px var(--lx-ink); border-radius: var(--lx-media-r); position: relative; }
.mk-demo-site[data-direction="pipe-run"] .lx-proof[data-lx-layout="ticket"] .lx-proof-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 14px; background: radial-gradient(circle at 7px 7px, var(--lx-paper) 5px, transparent 5.5px) 0 0 / 18px 14px repeat-x; }
.mk-demo-site[data-direction="pipe-run"] .lx-proof[data-lx-layout="ticket"] .lx-proof-list li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .1rem .9rem; padding: .9rem 0; border: 0; border-top: 1px dashed var(--lx-line); background: none; box-shadow: none; }
.mk-demo-site[data-direction="pipe-run"] .lx-proof[data-lx-layout="ticket"] .lx-proof-list li::before { content: ""; grid-row: 1 / span 2; width: 1.4rem; height: 1.4rem; border-radius: 4px; background: var(--lx-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E") center / 80% no-repeat; }
.mk-demo-site[data-direction="pipe-run"] .lx-proof[data-lx-layout="ticket"] .lx-proof-detail { color: var(--lx-muted); }

/* credentials: a job sheet */
.mk-demo-site[data-direction="pipe-run"] .lx-services[data-lx-layout="jobsheet"] .lx-svc-list { border: 2px solid var(--lx-ink); border-radius: var(--lx-media-r); background: var(--pr-card); }
.mk-demo-site[data-direction="pipe-run"] .lx-services[data-lx-layout="jobsheet"] .lx-svc { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .2rem .9rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--lx-line); }
.mk-demo-site[data-direction="pipe-run"] .lx-services[data-lx-layout="jobsheet"] .lx-svc:last-child { border-bottom: 0; }
.mk-demo-site[data-direction="pipe-run"] .lx-services[data-lx-layout="jobsheet"] .lx-svc::before { content: ""; grid-row: 1 / span 2; width: 1.3rem; height: 1.3rem; margin-top: .2rem; border: 2px solid var(--lx-ink); border-radius: 3px; }
.mk-demo-site[data-direction="pipe-run"] .lx-services[data-lx-layout="jobsheet"] .lx-svc > * { grid-column: 2; }

/* ── gate11 correction: one ticket, read top to bottom; a response journey ───────────────────────────────────────────
   The ticket is a single column at every width (the shared proof grid had split it into four narrow columns, so each
   tick sat over a title broken one word per line), and its tick is a static box, not the pipe stub. Below the routes
   the home reads as what happens next: a response timeline, the job sheet, the ticket, then the phone close. */
.mk-demo-site[data-direction="pipe-run"] .lx-proof[data-lx-layout="ticket"] .lx-proof-list { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
.mk-demo-site[data-direction="pipe-run"] .lx-proof[data-lx-layout="ticket"] .lx-proof-list li { grid-template-columns: 1.6rem minmax(0, 1fr); border-left: 0; padding: .9rem 0; }
.mk-demo-site[data-direction="pipe-run"] .lx-proof[data-lx-layout="ticket"] .lx-proof-list li:first-child { border-top: 0; padding-left: 0; }
.mk-demo-site[data-direction="pipe-run"] .lx-proof[data-lx-layout="ticket"] .lx-proof-list li::before { position: static; left: auto; right: auto; top: auto; grid-column: 1; align-self: start; margin-top: .15rem; }
.mk-demo-site[data-direction="pipe-run"] .lx-proof[data-lx-layout="ticket"] :is(.lx-proof-title, .lx-proof-detail) { grid-column: 2; min-width: 0; }
.mk-demo-site[data-direction="pipe-run"] .lx-steps--timeline .lx-steps-list { max-width: 52rem; }
.mk-demo-site[data-direction="pipe-run"] [data-journey-surface] { background: var(--pr-card); box-shadow: inset 0 0 0 2px var(--lx-ink); }

/* ── gate12 critic correction: two full route cards, a headline that is always first ─────────────────────────────────
   The headline column aligns to the top (it had sunk to the bottom of a tall row — off the editor canvas), and the
   route cards stack under it until the frame is wide enough for words and both cards side by side. Cards size to their
   content (no 26rem minimum, no hollow band under a ghost numeral): the urgent card is words, action and gas note; the
   planned card leads with its drawing. Job-sheet rows use a copper joint, not an empty checkbox that looks clickable.
   The installed enquiry wears the pipe: square tabs, copper pipe progress, the job-sheet card. */
.mk-demo-site[data-direction="pipe-run"] .lx-triage { align-items: start; }
@container demo (min-width: 900px) and (max-width: 1199px) { .mk-demo-site[data-direction="pipe-run"] .lx-triage { grid-template-columns: minmax(0, 1fr); } }
@container demo (min-width: 900px) { .mk-demo-site[data-direction="pipe-run"] .lx-door { min-height: 0; } }
.mk-demo-site[data-direction="pipe-run"] .lx-door { min-height: 0; }
.mk-demo-site[data-direction="pipe-run"] .lx-door-k { font: 700 .875rem/1 var(--lx-body); letter-spacing: .14em; color: currentColor; -webkit-text-stroke: 0; opacity: .8; }
.mk-demo-site[data-direction="pipe-run"] .lx-door--plan .lx-hero-media { order: -1; margin: 0; aspect-ratio: 4 / 3; }
.mk-demo-site[data-direction="pipe-run"] .lx-services[data-lx-layout="jobsheet"] .lx-svc::before { width: .9rem; height: .9rem; margin-top: .45rem; border: 0; border-radius: 50%; background: var(--lx-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lx-accent) 22%, transparent); }
.mk-demo-site[data-direction="pipe-run"] [data-enquiry-intent] { border-radius: 6px; padding: 3px; }
.mk-demo-site[data-direction="pipe-run"] [data-enquiry-intent] > * { border-radius: 4px; }
.mk-demo-site[data-direction="pipe-run"] [data-enquiry-journey] ol[aria-label="Enquiry progress"] li > span:first-child { height: 6px; border-radius: 3px; }

/* g93d4 critic: beside the urgent card, the PLANNED card held a small pipe drawing over an empty lower half. On wide
   frames the drawing — the design's pipe run — grows to fill the card (whole, never cropped) and the button sits on
   the card's base, so the two routes read as a matched pair. */
@container demo (min-width: 900px) {
  .mk-demo-site[data-direction="pipe-run"] .lx-door--plan .lx-hero-media { flex: 1 1 auto; margin-top: 0; aspect-ratio: auto; min-height: 14rem; background: color-mix(in srgb, var(--lx-ink) 6%, var(--pr-card)); }
  .mk-demo-site[data-direction="pipe-run"] .lx-door--plan .lx-hero-media .lx-img { object-fit: contain; }
  .mk-demo-site[data-direction="pipe-run"] .lx-door--plan .lx-btn { margin-top: auto; }
}

/* ── g0c01b critic correction: the triage owns the wide canvas ───────────────────────────────────────────────────────
   At 1920 the first screen was a text column and two boxed route cards with a small pipe drawing, floating in a field
   of unused cream. On wide frames the triage now fills the first screen: the question at full display scale over the
   copper run, and the two routes drawn as tall doors — the urgent door's words and action at reading-room size, the
   planned door's pipe drawing large enough to be the picture of the page. The copper run joining them runs on to the
   frame's edge, so the two choices hang from one pipe. Urgent/planned choice, gas line, timeline and emergency band are unchanged. */
@container demo (min-width: 1400px) {
  .mk-demo-site[data-direction="pipe-run"] .lx-hero--triage { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(3.5rem, 5cqi, 6rem); }
  .mk-demo-site[data-direction="pipe-run"] .lx-triage-doors::before { left: -2.5rem; right: calc(-1 * var(--lx-gutter) - 4rem); }
  .mk-demo-site[data-direction="pipe-run"] .lx-triage { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; column-gap: clamp(3rem, 5cqi, 6rem); min-height: min(calc(var(--mk-vh, 1svh) * 76), 52rem); }
  .mk-demo-site[data-direction="pipe-run"] .lx-triage-head .lx-display { max-width: 9ch; font-size: calc(clamp(3rem, 6.4cqi, 8rem) * var(--lx-title-scale, 1)); }
  .mk-demo-site[data-direction="pipe-run"] .lx-triage-doors { gap: 2rem; align-items: stretch; }
  .mk-demo-site[data-direction="pipe-run"] .lx-door { min-height: min(calc(var(--mk-vh, 1svh) * 64), 38rem); padding: clamp(1.75rem, 2.4cqi, 2.75rem); gap: 1.5rem; }
  .mk-demo-site[data-direction="pipe-run"] .lx-door-k { font-size: 1rem; }
  .mk-demo-site[data-direction="pipe-run"] .lx-door-body { font-size: clamp(1.4rem, 1.6cqi, 1.8rem); max-width: 22ch; }
  .mk-demo-site[data-direction="pipe-run"] .lx-door--now .lx-btn, .mk-demo-site[data-direction="pipe-run"] .lx-door--plan .lx-btn { min-height: 4rem; font-size: 1.2rem; }
  .mk-demo-site[data-direction="pipe-run"] .lx-door--plan .lx-hero-media { min-height: 20rem; }
  .mk-demo-site[data-direction="pipe-run"] .lx-door-safety { font-size: 1.05rem; padding: 1rem 1.2rem; }
}

/* ── g360 critic: the copper run is the signature, drawn at its real weight ──────────────────────────────────────────
   At 1920 the pipe read as a thin line through a cream field, and the planned door's drawing sat small inside a grey
   box. On wide frames the run is a heavy copper pipe with a highlight and joints (the urgent and planned doors hang
   from it), the hero stands on a warm plaster plane opened by a lighter strip behind the doors, and the planned door's
   drawing fills its panel. Choice, gas line, words and actions are unchanged. */
@container demo (min-width: 1400px) {
  .mk-demo-site[data-direction="pipe-run"] .lx-hero--triage { background: linear-gradient(180deg, color-mix(in srgb, var(--lx-accent) 7%, var(--lx-paper)) 0%, var(--lx-paper) 70%); }
  .mk-demo-site[data-direction="pipe-run"] .lx-triage-doors::before { height: 14px; border-radius: 7px; background: linear-gradient(180deg, color-mix(in srgb, var(--lx-accent) 55%, #ffffff) 0 3px, var(--lx-accent) 3px 10px, color-mix(in srgb, var(--lx-accent) 70%, #000000) 10px 14px); box-shadow: 0 10px 18px -10px rgb(0 0 0 / .45); }
  .mk-demo-site[data-direction="pipe-run"] .lx-triage-doors::after { content: ""; position: absolute; z-index: -1; top: 50%; left: 49%; width: 30px; height: 26px; translate: -50% -50%; border-radius: 4px; background: color-mix(in srgb, var(--lx-accent) 80%, #000000); box-shadow: inset 0 3px 0 rgb(255 255 255 / .25); }
  .mk-demo-site[data-direction="pipe-run"] .lx-door--plan .lx-hero-media { background: color-mix(in srgb, var(--lx-ink) 4%, var(--pr-card)); }
  .mk-demo-site[data-direction="pipe-run"] .lx-door--plan .lx-hero-media .lx-img { object-fit: cover; object-position: 50% 55%; }
}

/* ── 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="pipe-run"][data-theme="system"] {
  --lx-paper: #12181c; --lx-ink: #eef0ee; --lx-muted: #aab3b8; --lx-line: rgba(238,240,238,0.14);
  --lx-dark: #0a0f12; --pr-card: #1a2227; --pr-soft: #222c32;
}
[data-direction="pipe-run"][data-theme="system"] .lx-eyebrow { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }
[data-direction="pipe-run"][data-theme="system"] :is(.lx-svc-price, .lx-price-amount) { color: color-mix(in srgb, var(--lx-accent) 40%, #ffffff); background: color-mix(in srgb, var(--lx-accent) 22%, var(--lx-paper)); }
[data-direction="pipe-run"][data-theme="system"] .lx-door--now { background: var(--pr-card); box-shadow: inset 0 0 0 2px var(--lx-accent); }
}