/* Generated by scripts/direction-styles.mjs from components/marketplace/demo/lead-line.css — do not edit. */
/* ── lead-line.css ── */
/* ── Lead Line — ashdub. Dogs (cohort one, October 2026; the dog-walking variant) ────────────────────────────────────
   A dog walker's site made warm and outdoor: oat paper, forest ink and one lead-red accent (the owner's --brand). Its
   signature is a dashed ROUTE LINE drawn in code (an inline SVG wave masked into dashes, so it always takes the owner's
   colour) under the header, through the steps — which become stops on a walk — and over the footer; trust points cut as
   round-holed ID tags; dogs shown by size on tagged frames; dark bands carry faint map contours. Every walker-confirmed
   fact is a dashed luggage-label FACT SLOT, never a promise. Archivo, widened, for display and Work 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="lead-line"] {
  --lx-head: var(--font-archivo), "Archivo", system-ui, sans-serif; --lx-body: var(--font-worksans), "Work Sans", system-ui, sans-serif;
  --lx-head-w: 750; --lx-head-track: -0.022em; --lx-head-lh: 0.98; --lx-head-case: none;
  --lx-paper: #f3eee3; --lx-ink: #1d2a21; --lx-muted: #55604f; --lx-line: rgba(29,42,33,0.14);
  --lx-dark: #1d2a21; --lx-dark-ink: #f3eee3; --lx-dark-muted: #c3c9b6; --lx-dark-line: rgba(243,238,227,0.18);
  --lx-btn-r: 999px; --lx-btn-case: none; --lx-btn-track: 0; --lx-btn-size: .95rem; --lx-media-r: 28px;
  --lx-eyebrow-case: uppercase; --lx-eyebrow-track: 0.13em; --lx-sec: clamp(4.25rem, 9.5cqi, 8rem);
  --ll-card: #fbf8f1; --ll-soft: #e7e0cf; --ll-moss: #5d6b45;
  --ll-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath d='M0 12C20 2 40 2 60 12S100 22 120 12' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-dasharray='9 7.4'/%3E%3C/svg%3E");
  --ll-contour: repeating-radial-gradient(circle at 18% 30%, transparent 0 22px, rgb(255 255 255 / .045) 22px 23px), repeating-radial-gradient(circle at 82% 78%, transparent 0 30px, rgb(255 255 255 / .035) 30px 31px);
}
[data-direction="lead-line"][data-theme="dark"] {
  --lx-paper: #141a15; --lx-ink: #eef0e6; --lx-muted: #b4bba8; --lx-line: rgba(238,240,230,0.15);
  --lx-dark: #0c110d; --ll-card: #1b231c; --ll-soft: #232d24;
}

/* ── type: a widened grotesque that reads like a trail sign ── */
[data-direction="lead-line"] :is(.lx-display, .lx-h2, .lx-h3, .lx-proof-title, .mk-dh-brand, .lx-footer-name) { font-stretch: 118%; font-variation-settings: "wdth" 118; }
[data-direction="lead-line"] .lx-display { font-size: calc(clamp(2.6rem, 6.4cqi, 5.6rem) * var(--lx-title-scale, 1)); max-width: 14ch; }
[data-direction="lead-line"] .lx-h2 { font-size: calc(clamp(2rem, 4.4cqi, 3.6rem) * var(--lx-title-scale, 1)); line-height: 1.02; max-width: 17ch; }
[data-direction="lead-line"] .lx-h3 { font-weight: 700; letter-spacing: -.012em; }
[data-direction="lead-line"] .lx-eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-size: .72rem; font-weight: 700; color: var(--lx-accent); }
[data-direction="lead-line"] .lx-eyebrow::before { content: ""; width: 2.2rem; height: .75rem; background: currentColor; -webkit-mask: var(--ll-wave) 0 50% / 2.2rem .75rem no-repeat; mask: var(--ll-wave) 0 50% / 2.2rem .75rem no-repeat; }
[data-direction="lead-line"] .lx-tone-dark .lx-eyebrow { color: color-mix(in srgb, var(--lx-accent) 40%, #ffffff); }
[data-direction="lead-line"][data-theme="dark"] .lx-eyebrow { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }
[data-direction="lead-line"] .lx-lede { color: var(--lx-muted); }

/* ── buttons: rounded like a lead clip ── */
.mk-demo-site[data-direction="lead-line"] .lx-btn--primary { background: var(--lx-accent); color: var(--lx-accent-ink); box-shadow: 0 12px 26px -18px var(--lx-accent); }
.mk-demo-site[data-direction="lead-line"] .lx-btn--primary:hover { background: color-mix(in srgb, var(--lx-accent) 86%, #000); }
[data-direction="lead-line"] .lx-btn--secondary { box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 60%, transparent); }
[data-direction="lead-line"] .lx-btn--link { font-weight: 700; text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--lx-accent) 65%, transparent); }
[data-direction="lead-line"] .lx-tone-dark .lx-btn--primary { background: var(--lx-paper); color: var(--lx-dark); }
[data-direction="lead-line"][data-theme="dark"] .lx-tone-dark .lx-btn--primary { background: #f3eee3; color: #1d2a21; }

/* ── header: the name, a quiet nav and the route line under it ── */
.mk-demo-site[data-direction="lead-line"] .mk-dh { background: color-mix(in srgb, var(--lx-paper) 94%, transparent); border-bottom: 0; box-shadow: none; }
.mk-demo-site[data-direction="lead-line"] .mk-dh::after { content: ""; position: absolute; left: var(--lx-gutter); right: var(--lx-gutter); bottom: -6px; height: 12px; background: var(--lx-accent); opacity: .75; -webkit-mask: var(--ll-wave) 0 50% / 120px 12px repeat-x; mask: var(--ll-wave) 0 50% / 120px 12px repeat-x; pointer-events: none; }
.mk-demo-site[data-direction="lead-line"] .mk-dh-brand { font-size: clamp(1.2rem, 3.1cqi, 1.45rem); font-weight: 750; letter-spacing: -.01em; }
.mk-demo-site[data-direction="lead-line"] .mk-dh-links { gap: .1rem; padding: .25rem; border-radius: 999px; background: var(--ll-card); border-color: var(--lx-line); font-weight: 600; font-size: .88rem; }
.mk-demo-site[data-direction="lead-line"] .mk-dh-links a, .mk-demo-site[data-direction="lead-line"] .mk-dh-links .mk-inert { border-radius: 999px; }
.mk-demo-site[data-direction="lead-line"] .mk-dh-links li[data-current] a { background: var(--lx-ink); color: var(--lx-paper); }
.mk-demo-site[data-direction="lead-line"] .mk-dh-links .mk-dh-index, .mk-demo-site[data-direction="lead-line"] .mk-dh-links .mk-dh-dot { display: none; }
.mk-demo-site[data-direction="lead-line"] .mk-dh-links a, .mk-demo-site[data-direction="lead-line"] .mk-dh-brand > span { white-space: nowrap; }
/* five pages and the action fit inline only on a genuinely wide frame; below that the menu carries them */
@container demo (max-width: 1199px) {
  .mk-demo-site[data-direction="lead-line"] .mk-dh-nav, .mk-demo-site[data-direction="lead-line"] .mk-dh-cta { display: none; }
  .mk-demo-site[data-direction="lead-line"] .mk-dh-menu { display: block; }
}
.mk-demo-site[data-direction="lead-line"] .mk-dh-menu > summary { border-radius: 999px; background: var(--lx-accent); color: var(--lx-accent-ink); box-shadow: none; }
.mk-demo-site[data-direction="lead-line"] .mk-dh-panel { border-radius: 22px; background: var(--ll-card); }
.mk-demo-site[data-direction="lead-line"] .mk-dh-panel-links > li > * { border-radius: 999px; font-weight: 600; }
.mk-demo-site[data-direction="lead-line"] .mk-dh-panel-links .mk-dh-index { color: var(--lx-accent); opacity: 1; font-variant-numeric: tabular-nums; }
.mk-demo-site[data-direction="lead-line"] .mk-dh-panel-links > li[data-current] > * { background: var(--ll-soft); color: var(--lx-ink); box-shadow: inset 4px 0 0 var(--lx-accent); }

/* ── hero: the photograph in a rounded frame with an ID-tag ring on its corner ── */
[data-direction="lead-line"] .lx-hero-orbit, [data-direction="lead-line"] .lx-hero-sweep, [data-direction="lead-line"] .lx-hero-scroll { display: none !important; }
[data-direction="lead-line"] .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: hidden; aspect-ratio: 4 / 3; box-shadow: 0 30px 70px -48px rgb(29 42 33 / .6); }
[data-direction="lead-line"] .lx-hero--split .lx-hero-media::after { content: ""; position: absolute; right: 1.1rem; top: 1.1rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 5px solid var(--lx-paper); box-shadow: 0 6px 16px -8px rgb(0 0 0 / .45); }
@container (min-width: 900px) {
  [data-direction="lead-line"] .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) * 80), 50rem); }
  [data-direction="lead-line"] .lx-hero--split .lx-hero-media { margin: clamp(2rem, 4cqi, 3rem) var(--lx-gutter) clamp(2rem, 4cqi, 3rem) 0; aspect-ratio: 4 / 5; border-radius: 48% 48% var(--lx-media-r) var(--lx-media-r) / 30% 30% var(--lx-media-r) var(--lx-media-r); }
}
[data-direction="lead-line"] .lx-hero--editorial { padding-top: clamp(3rem, 8cqi, 6rem); }
[data-direction="lead-line"] .lx-hero--editorial .lx-hero-media { border-radius: var(--lx-media-r); }
[data-direction="lead-line"] .lx-note { border-top-style: dashed; }

/* ── proof: trust points cut as round-holed ID tags ── */
[data-direction="lead-line"] .lx-proof { border-block: 0; padding-block: clamp(1.25rem, 3cqi, 2.5rem); }
[data-direction="lead-line"] .lx-proof-list { gap: clamp(.6rem, 1.6cqi, 1rem); border: 0; }
[data-direction="lead-line"] .lx-proof .lx-proof-list li, [data-direction="lead-line"] .lx-proof[data-lx-layout] .lx-proof-list li:first-child, [data-direction="lead-line"] .lx-proof[data-lx-layout] .lx-proof-list li { position: relative; padding: 1.2rem 1.25rem 1.2rem 3.9rem; border: 0; border-radius: 999px 22px 22px 999px; background: var(--ll-card); box-shadow: inset 0 0 0 1px var(--lx-line); }
[data-direction="lead-line"] .lx-proof-list li::before { content: ""; position: absolute; left: 1.15rem; top: 50%; width: 1.35rem; height: 1.35rem; margin-top: -.675rem; border-radius: 50%; background: var(--lx-paper); box-shadow: inset 0 0 0 2px var(--lx-accent); }
[data-direction="lead-line"] .lx-proof-title { font-family: var(--lx-head); font-weight: 700; font-size: 1.08rem; }
@container (min-width: 1000px) {
  [data-direction="lead-line"] .lx-proof-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── services: walks as tagged cards; rows with a fact-slot column ── */
[data-direction="lead-line"] .lx-svc-index { border-top: 0; gap: .7rem; }
@container (min-width: 640px) { [data-direction="lead-line"] .lx-svc-index { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .8rem; } }
[data-direction="lead-line"] .lx-svc-index-item { padding: 1.2rem 1.25rem; border: 0; border-radius: 24px; background: var(--ll-card); box-shadow: inset 0 0 0 1px var(--lx-line); transition: box-shadow .2s ease, transform .2s ease; }
[data-direction="lead-line"] .lx-svc-index-item:hover { box-shadow: inset 0 0 0 2px var(--lx-accent); transform: translateY(-2px); }
[data-direction="lead-line"] .lx-svc-index-n { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--lx-accent); color: var(--lx-accent-ink); font: 700 .78rem/1 var(--lx-body); font-variant-numeric: tabular-nums; }
[data-direction="lead-line"] .lx-svc-index-name { font-size: clamp(1.25rem, 4cqi, 1.6rem); font-weight: 700; font-stretch: 112%; font-variation-settings: "wdth" 112; }
[data-direction="lead-line"] .lx-svc-index-go { font-weight: 700; text-decoration-color: color-mix(in srgb, var(--lx-accent) 60%, transparent); }
[data-direction="lead-line"] .lx-svc-list { border-top-color: var(--lx-line); }
[data-direction="lead-line"] .lx-svc { padding-block: 1.3rem; border-bottom-style: dashed; }
[data-direction="lead-line"] .lx-svc .lx-h3 { font-size: clamp(1.15rem, 2.4cqi, 1.4rem); }
/* the fact slot: a luggage label the walker fills in, never a quoted figure */
[data-direction="lead-line"] .lx-svc-price, [data-direction="lead-line"] .lx-price-amount { position: relative; display: inline-flex; align-items: center; min-height: 1.95rem; padding: 0 .75rem 0 1.55rem; border: 1.5px dashed color-mix(in srgb, var(--lx-accent) 60%, transparent); border-radius: 6px 999px 999px 6px; background: color-mix(in srgb, var(--lx-accent) 6%, transparent); color: var(--lx-accent); font: 600 .78rem/1 var(--lx-body); letter-spacing: .01em; white-space: nowrap; }
[data-direction="lead-line"] .lx-svc-price::before, [data-direction="lead-line"] .lx-price-amount::before { content: ""; position: absolute; left: .55rem; top: 50%; width: .45rem; height: .45rem; margin-top: -.225rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
[data-direction="lead-line"][data-theme="dark"] :is(.lx-svc-price, .lx-price-amount) { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }
[data-direction="lead-line"] .lx-tone-dark :is(.lx-svc-price, .lx-price-amount) { color: #ffffff; border-color: rgb(255 255 255 / .45); }

/* ── gallery: dogs by size, rounded frames with a size tag ── */
[data-direction="lead-line"] .lx-gallery-grid { gap: clamp(.8rem, 2cqi, 1.5rem); }
[data-direction="lead-line"] .lx-gallery-frame { border-radius: 44% 44% var(--lx-media-r) var(--lx-media-r) / 32% 32% var(--lx-media-r) var(--lx-media-r); overflow: hidden; }
[data-direction="lead-line"] .lx-gallery figcaption { display: inline-flex; align-items: center; gap: .45rem; margin-top: .8rem; padding: .4rem .8rem .4rem .55rem; border-radius: 999px; background: var(--ll-card); box-shadow: inset 0 0 0 1px var(--lx-line); font-size: .78rem; font-weight: 700; color: var(--lx-ink); }
[data-direction="lead-line"] .lx-gallery figcaption::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--lx-accent); }

@container (max-width: 759px) {
  [data-direction="lead-line"] .lx-gallery-item:nth-child(3):last-child { grid-column: 1 / -1; }
  [data-direction="lead-line"] .lx-gallery-item:nth-child(3):last-child .lx-gallery-frame { aspect-ratio: 16 / 10; border-radius: var(--lx-media-r); }
}

/* ── split: photograph with soft corners; points as tag rows ── */
[data-direction="lead-line"] .lx-split-media { border-radius: var(--lx-media-r); box-shadow: 0 30px 70px -55px rgb(29 42 33 / .6); }
[data-direction="lead-line"] .lx-points li { padding-left: 1.9rem; }
[data-direction="lead-line"] .lx-points li::before { top: .3em; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2.5px var(--lx-accent); }

/* ── steps: stops on a walk joined by the route line ── */
[data-direction="lead-line"] .lx-tone-soft { background: var(--ll-soft); color: var(--lx-ink); }
[data-direction="lead-line"] .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-accent); font: 700 1rem/1 var(--lx-body); box-shadow: inset 0 0 0 3px var(--lx-accent); }
[data-direction="lead-line"] .lx-tone-soft .lx-step-n { background: var(--ll-soft); }
[data-direction="lead-line"] .lx-steps--row .lx-step { border-top: 0; padding-top: 0; }
@container (min-width: 900px) {
  [data-direction="lead-line"] .lx-steps--row .lx-steps-list { position: relative; }
  [data-direction="lead-line"] .lx-steps--row .lx-steps-list::before { content: ""; position: absolute; left: 1.35rem; right: 0; top: .75rem; height: 1.2rem; background: var(--lx-accent); opacity: .7; -webkit-mask: var(--ll-wave) 0 50% / 120px 1.2rem repeat-x; mask: var(--ll-wave) 0 50% / 120px 1.2rem repeat-x; }
}
[data-direction="lead-line"] .lx-steps--timeline .lx-step:not(:last-child)::after { left: 1.3rem; top: 3rem; width: 0; background: none; border-left: 3px dashed color-mix(in srgb, var(--lx-accent) 55%, transparent); }
[data-direction="lead-line"] .lx-steps--cards .lx-step { border: 0; border-radius: 26px; background: var(--ll-card); box-shadow: inset 0 0 0 1px var(--lx-line); }

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

/* ── dark bands: forest ink with faint map contours; contact and footer ── */
[data-direction="lead-line"] .lx-tone-dark { background-color: var(--lx-dark); background-image: var(--ll-contour); }
[data-direction="lead-line"] .lx-facts { border-top: 0; gap: .5rem; }
[data-direction="lead-line"] .lx-facts > div { padding: .9rem 1rem; border: 0; border-radius: 18px; background: var(--ll-card); box-shadow: inset 0 0 0 1px var(--lx-line); }
[data-direction="lead-line"] .lx-footer { position: relative; }
[data-direction="lead-line"] .lx-footer::before { content: ""; position: absolute; left: var(--lx-gutter); right: var(--lx-gutter); top: 1rem; height: 12px; background: rgb(255 255 255 / .3); -webkit-mask: var(--ll-wave) 0 50% / 120px 12px repeat-x; mask: var(--ll-wave) 0 50% / 120px 12px repeat-x; }
[data-direction="lead-line"] .lx-footer-name { font-weight: 750; }

/* ── the guided dog profile inherits the tag card ── */
.mk-demo-site[data-direction="lead-line"] .mk-enq-card { border-radius: 26px; background: var(--ll-card); }
.mk-demo-site[data-direction="lead-line"] .mk-enq-chip { border-radius: 999px; }
.mk-demo-site[data-direction="lead-line"] .mk-enq :is(input, textarea) { border-radius: 14px; }

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

/* ── dark mode: the accent's own on-dark tint for the walk-step numerals (WCAG AA on every owner palette; gate8) ── */
[data-direction="lead-line"][data-theme="dark"] .lx-step-n { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }

/* ── signature (correction 10): the walk, told as a walk ─────────────────────────────────────────────────────────────
   Home opens on the dog, not a split banner: the photograph runs the full width and a walk NOTE is clipped over it —
   the reassurance an owner reads first. Then the size chooser (a native radio set, sizes drawn as growing dots), then
   the start as a ROUTE: stops strung along the dashed lead, left to right on wide screens, down the page on phones. */
.mk-demo-site[data-direction="lead-line"] .lx-hero--note { padding: 0; }
.mk-demo-site[data-direction="lead-line"] .lx-note-stage { position: relative; display: grid; }
.mk-demo-site[data-direction="lead-line"] .lx-hero--note .lx-hero-media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0 0 0 clamp(2rem, 8cqi, 5rem); }
.mk-demo-site[data-direction="lead-line"] .lx-hero--note .lx-hero-media .lx-img { width: 100%; height: 100%; object-fit: cover; }
.mk-demo-site[data-direction="lead-line"] .lx-note-over { position: relative; margin-top: -2.5rem; padding-bottom: clamp(2rem, 6cqi, 4rem); }
.mk-demo-site[data-direction="lead-line"] .lx-note-card { position: relative; max-width: 36rem; padding: clamp(1.5rem, 4.4cqi, 2.75rem); border-radius: 26px 26px 26px 8px; background: var(--ll-card); color: var(--lx-ink); box-shadow: 0 34px 70px -44px rgb(20 26 21 / .6); }
.mk-demo-site[data-direction="lead-line"] .lx-note-clip { position: absolute; top: -1.15rem; left: 2.2rem; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 5px solid var(--lx-accent); background: var(--ll-card); }
.mk-demo-site[data-direction="lead-line"] .lx-note-clip::after { content: ""; position: absolute; left: 50%; top: -1.6rem; width: 5px; height: 1.6rem; translate: -50% 0; background: var(--lx-accent); border-radius: 3px; }
.mk-demo-site[data-direction="lead-line"] .lx-hero--note .lx-display { font-size: calc(clamp(2.3rem, 5.4cqi, 4.6rem) * var(--lx-title-scale, 1)); }
.mk-demo-site[data-direction="lead-line"] .lx-hero--note .lx-note { margin-top: 1.1rem; padding-top: .9rem; border-top: 2px dashed var(--lx-line); color: var(--lx-muted); }
@container demo (min-width: 900px) {
  .mk-demo-site[data-direction="lead-line"] .lx-note-stage { min-height: min(calc(var(--mk-vh, 1svh) * 86), 54rem); }
  .mk-demo-site[data-direction="lead-line"] .lx-hero--note .lx-hero-media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0 0 0 6rem; }
  .mk-demo-site[data-direction="lead-line"] .lx-note-over { display: flex; align-items: flex-end; margin-top: 0; padding-block: 6rem 4.5rem; }
}

/* the route: stops along the lead */
.mk-demo-site[data-direction="lead-line"] .lx-route { list-style: none; margin: clamp(2rem, 5cqi, 3.5rem) 0 0; padding: 0 0 0 2.2rem; display: grid; gap: 2rem; position: relative; }
.mk-demo-site[data-direction="lead-line"] .lx-route::before { content: ""; position: absolute; left: .55rem; top: .4rem; bottom: .4rem; width: .9rem; background: var(--lx-accent); -webkit-mask: var(--ll-wave) 50% 0 / .9rem 2.4rem repeat-y; mask: var(--ll-wave) 50% 0 / .9rem 2.4rem repeat-y; rotate: 0deg; }
.mk-demo-site[data-direction="lead-line"] .lx-stop { position: relative; }
.mk-demo-site[data-direction="lead-line"] .lx-stop-pin { position: absolute; left: -2.2rem; top: .15rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--lx-paper); border: 4px solid var(--lx-accent); box-shadow: 0 0 0 5px var(--lx-paper); }
.mk-demo-site[data-direction="lead-line"] .lx-stop:last-child .lx-stop-pin { background: var(--lx-accent); }
.mk-demo-site[data-direction="lead-line"] .lx-stop .lx-h3 { font-size: clamp(1.15rem, 2cqi, 1.45rem); }
.mk-demo-site[data-direction="lead-line"] .lx-stop .lx-body { color: var(--lx-muted); max-width: 30ch; }
@container demo (min-width: 900px) {
  .mk-demo-site[data-direction="lead-line"] .lx-route { padding: 3.4rem 0 0; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2.5rem; }
  .mk-demo-site[data-direction="lead-line"] .lx-route::before { left: 0; right: 0; top: .5rem; bottom: auto; width: auto; height: 1.6rem; -webkit-mask: var(--ll-wave) 0 50% / 7rem 1.6rem repeat-x; mask: var(--ll-wave) 0 50% / 7rem 1.6rem repeat-x; }
  .mk-demo-site[data-direction="lead-line"] .lx-stop-pin { left: 0; top: -3.15rem; }
}

/* sizes: dots that grow with the dog; the chosen photograph in the tag-shaped arch */
.mk-demo-site[data-direction="lead-line"] .lx-chooser--sizes .lx-chooser-swatch { display: inline-block; border-radius: 50%; background: var(--lx-accent); }
.mk-demo-site[data-direction="lead-line"] .lx-chooser--sizes .lx-chooser-option:nth-child(1) .lx-chooser-swatch { width: .9rem; height: .9rem; margin-inline: .55rem; }
.mk-demo-site[data-direction="lead-line"] .lx-chooser--sizes .lx-chooser-option:nth-child(2) .lx-chooser-swatch { width: 1.35rem; height: 1.35rem; margin-inline: .33rem; }
.mk-demo-site[data-direction="lead-line"] .lx-chooser--sizes .lx-chooser-option:nth-child(3) .lx-chooser-swatch { width: 2rem; height: 2rem; }
.mk-demo-site[data-direction="lead-line"] .lx-chooser--sizes .lx-gallery-frame { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 999px 999px 26px 26px; background: var(--ll-soft); }
.mk-demo-site[data-direction="lead-line"] .lx-chooser--sizes .lx-gallery-frame .lx-img { width: 100%; height: 100%; object-fit: cover; }
@container demo (min-width: 900px) {
  .mk-demo-site[data-direction="lead-line"] .lx-chooser--sizes .lx-chooser-set { grid-template-columns: minmax(16rem, .8fr) 1.2fr; align-items: center; }
  .mk-demo-site[data-direction="lead-line"] .lx-chooser--sizes .lx-chooser-options { flex-direction: column; align-items: flex-start; }
}

/* ── lower page (gate10 correction): one walk, told end to end — no card rows ─────────────────────────────────────────
   Size: the chooser is the section — large size rows beside the one arched photograph (the label is the caption, so no
   repeated chip). Walks: a walk MENU, not cards. Promises: ID tags hung from the lead. Facts: luggage labels on a line.
   The close is a light POSTCARD from the walker, not another dark band; the footer stays on the paper. */
.mk-demo-site[data-direction="lead-line"] .lx-chooser--sizes .lx-chooser-options { display: grid; gap: .6rem; }
.mk-demo-site[data-direction="lead-line"] .lx-chooser--sizes .lx-chooser-option { display: flex; width: 100%; min-height: 4rem; padding: .6rem 1.1rem; border-radius: 18px; font: 700 clamp(1.05rem, 2cqi, 1.3rem)/1.2 var(--lx-head); font-stretch: 112%; }
.mk-demo-site[data-direction="lead-line"] .lx-chooser--sizes .lx-chooser-option:has(input:checked) { background: var(--lx-accent); border-color: var(--lx-accent); color: var(--lx-accent-ink); }
.mk-demo-site[data-direction="lead-line"] .lx-chooser--sizes .lx-chooser-option:has(input:checked) .lx-chooser-swatch { background: var(--lx-accent-ink); }
.mk-demo-site[data-direction="lead-line"] .lx-chooser--sizes .lx-chooser-view figcaption { display: none; }
@container demo (min-width: 900px) { .mk-demo-site[data-direction="lead-line"] .lx-chooser--sizes .lx-chooser-set { grid-template-columns: minmax(18rem, .75fr) 1.25fr; } }

/* walks: a menu read down the page */
.mk-demo-site[data-direction="lead-line"] .lx-services--index .lx-svc-index { display: block; border-top: 2px solid var(--lx-ink); }
.mk-demo-site[data-direction="lead-line"] .lx-services--index .lx-svc-index-item { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; border: 0; border-bottom: 1px dashed var(--lx-line); border-radius: 0; background: none; box-shadow: none; }
.mk-demo-site[data-direction="lead-line"] .lx-services--index .lx-svc-index-name { font-size: clamp(1.2rem, 2.4cqi, 1.6rem); }

/* promises: ID tags hanging from the lead */
.mk-demo-site[data-direction="lead-line"] .lx-proof[data-lx-layout="tags"] .lx-proof-list { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 2.2rem 1.4rem; padding-top: 2.6rem; }
.mk-demo-site[data-direction="lead-line"] .lx-proof[data-lx-layout="tags"] .lx-proof-list::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.6rem; background: var(--lx-accent); -webkit-mask: var(--ll-wave) 0 50% / 7rem 1.6rem repeat-x; mask: var(--ll-wave) 0 50% / 7rem 1.6rem repeat-x; }
.mk-demo-site[data-direction="lead-line"] .lx-proof[data-lx-layout="tags"] .lx-proof-list li { position: relative; padding: 1.6rem 1.2rem 1.2rem; border-radius: 999px 999px 22px 22px / 60px 60px 22px 22px; background: var(--ll-card); border: 2px solid var(--lx-ink); rotate: -1.2deg; }
.mk-demo-site[data-direction="lead-line"] .lx-proof[data-lx-layout="tags"] .lx-proof-list li:nth-child(even) { rotate: 1.4deg; }
.mk-demo-site[data-direction="lead-line"] .lx-proof[data-lx-layout="tags"] .lx-proof-list li::before { content: ""; position: absolute; top: .55rem; left: 50%; width: .8rem; height: .8rem; translate: -50% 0; border-radius: 50%; background: var(--lx-paper); box-shadow: inset 0 0 0 2px var(--lx-ink); }
.mk-demo-site[data-direction="lead-line"] .lx-proof[data-lx-layout="tags"] .lx-proof-title { display: block; text-align: center; }
.mk-demo-site[data-direction="lead-line"] .lx-proof[data-lx-layout="tags"] .lx-proof-detail { display: block; text-align: center; color: var(--lx-muted); }
@media (prefers-reduced-motion: reduce) { .mk-demo-site[data-direction="lead-line"] .lx-proof[data-lx-layout="tags"] .lx-proof-list li { rotate: 0deg; } }

/* facts: luggage labels on a line */
.mk-demo-site[data-direction="lead-line"] .lx-services[data-lx-layout="labels"] .lx-svc-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.mk-demo-site[data-direction="lead-line"] .lx-services[data-lx-layout="labels"] .lx-svc { padding: 1.1rem 1.2rem 1.2rem 2.4rem; border-radius: 8px 22px 22px 8px; background: var(--ll-card); border: 1.5px dashed var(--lx-line); position: relative; }
.mk-demo-site[data-direction="lead-line"] .lx-services[data-lx-layout="labels"] .lx-svc::before { content: ""; position: absolute; left: .85rem; top: 1.35rem; width: .7rem; height: .7rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--lx-accent); }

/* the close: a postcard from the walker */
.mk-demo-site[data-direction="lead-line"] .lx-cta[data-lx-layout="postcard"] { background: var(--ll-soft); color: var(--lx-ink); }
.mk-demo-site[data-direction="lead-line"] .lx-cta[data-lx-layout="postcard"] .lx-cta-grid { position: relative; padding: clamp(1.6rem, 4.4cqi, 3rem); border-radius: 6px; background: var(--ll-card); box-shadow: 0 30px 60px -48px rgb(20 26 21 / .55); background-image: linear-gradient(90deg, transparent calc(62% - 1px), var(--lx-line) calc(62% - 1px) 62%, transparent 62%); }
.mk-demo-site[data-direction="lead-line"] .lx-cta[data-lx-layout="postcard"] .lx-cta-grid::after { content: ""; position: absolute; top: 1.2rem; right: 1.2rem; width: 4.2rem; height: 5rem; border: 2px dashed var(--lx-accent); border-radius: 4px; }
@container demo (max-width: 699px) { .mk-demo-site[data-direction="lead-line"] .lx-cta[data-lx-layout="postcard"] .lx-cta-grid { background-image: none; } .mk-demo-site[data-direction="lead-line"] .lx-cta[data-lx-layout="postcard"] .lx-cta-grid::after { display: none; } }
[data-direction="lead-line"][data-theme="dark"] .lx-cta[data-lx-layout="postcard"] { background: var(--lx-paper); }

/* ── gate11 correction: the postcard sits in the page, the walks lead with a dog ─────────────────────────────────────
   The postcard keeps the page's gutters (it ran edge to edge because its padding replaced the wrap's) and loses the
   empty dashed stamp. Walks are image-led (a resting dog beside the list), not a numbered "Explore" index. The enquiry
   reads like the walker's own profile card: a tag-shaped surface on the lead-line paper. */
.mk-demo-site[data-direction="lead-line"] .lx-cta[data-lx-layout="postcard"] .lx-cta-grid { width: calc(100% - 2 * var(--lx-gutter)); max-width: var(--lx-max); margin-inline: auto; box-sizing: border-box; background-image: none; }
.mk-demo-site[data-direction="lead-line"] .lx-cta[data-lx-layout="postcard"] .lx-cta-grid::after { content: none; }
.mk-demo-site[data-direction="lead-line"] .lx-services--media .lx-media-frame { border-radius: var(--lx-media-r); overflow: hidden; aspect-ratio: 4 / 5; }
.mk-demo-site[data-direction="lead-line"] .lx-services--media .lx-media-frame .lx-img { width: 100%; height: 100%; object-fit: cover; }
.mk-demo-site[data-direction="lead-line"] [data-journey-surface] { background: var(--ll-card); border: 2px dashed color-mix(in srgb, var(--lx-accent) 55%, transparent); }

/* ── gate12 critic correction: the walker's tags ─────────────────────────────────────────────────────────────────────
   Each detail's status hangs as a dog tag (a punched hole, a rounded tag end) instead of a generic chip, and the installed
   enquiry's progress is the dashed lead. */
.mk-demo-site[data-direction="lead-line"] .lx-services[data-lx-layout="labels"] .lx-svc-price { border-radius: 999px 6px 6px 999px; padding-left: 1.5rem; background: radial-gradient(circle at .75rem 50%, var(--lx-paper) 0 .2rem, transparent .22rem), var(--ll-soft); }
.mk-demo-site[data-direction="lead-line"] [data-enquiry-journey] ol[aria-label="Enquiry progress"] li > span:first-child { height: 4px; border-radius: 0; -webkit-mask: repeating-linear-gradient(90deg, #000 0 .6rem, transparent .6rem 1rem); mask: repeating-linear-gradient(90deg, #000 0 .6rem, transparent .6rem 1rem); }

/* ── 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="lead-line"][data-theme="system"] {
  --lx-paper: #141a15; --lx-ink: #eef0e6; --lx-muted: #b4bba8; --lx-line: rgba(238,240,230,0.15);
  --lx-dark: #0c110d; --ll-card: #1b231c; --ll-soft: #232d24;
}
[data-direction="lead-line"][data-theme="system"] .lx-eyebrow { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }
[data-direction="lead-line"][data-theme="system"] .lx-tone-dark .lx-btn--primary { background: #f3eee3; color: #1d2a21; }
[data-direction="lead-line"][data-theme="system"] :is(.lx-svc-price, .lx-price-amount) { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }
[data-direction="lead-line"][data-theme="system"] .lx-step-n { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }
[data-direction="lead-line"][data-theme="system"] .lx-cta[data-lx-layout="postcard"] { background: var(--lx-paper); }
}