/* Generated by scripts/direction-styles.mjs from components/marketplace/demo/practice-chart.css — do not edit. */
/* ── practice-chart.css ── */
/* ── Practice Chart — ashdub. Dentist (cohort one, October 2026) ───────────────────────────────────────────────────────
   A dental practice's chart made calm: cool clinical white, deep ink and one cobalt accent (the owner's --brand), a row
   of chart cells under the header and over the footer, treatment rows numbered like chart positions, and every
   practice-confirmed fact drawn as a dashed FACT SLOT so nothing variable reads as a promise. Jost for display, DM 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="practice-chart"] {
  --lx-head: var(--font-jost), "Jost", system-ui, sans-serif; --lx-body: var(--font-dmsans), "DM Sans", system-ui, sans-serif;
  --lx-head-w: 500; --lx-head-track: -0.018em; --lx-head-lh: 1.02; --lx-head-case: none;
  --lx-paper: #f6f8fa; --lx-ink: #0e2233; --lx-muted: #4b5d6c; --lx-line: rgba(14,34,51,0.12);
  --lx-dark: #0d2131; --lx-dark-ink: #eef4f8; --lx-dark-muted: #a9bccb; --lx-dark-line: rgba(238,244,248,0.16);
  --lx-btn-r: 12px; --lx-btn-case: none; --lx-btn-track: 0; --lx-btn-size: .95rem; --lx-media-r: 22px;
  --lx-eyebrow-case: uppercase; --lx-eyebrow-track: 0.14em; --lx-sec: clamp(4.25rem, 9.5cqi, 8rem);
  --pc-cell: color-mix(in srgb, var(--lx-accent) 14%, #ffffff); --pc-cell-on: var(--lx-accent);
  --pc-soft: #e8eff6; --pc-card: #ffffff; --pc-ok: #1f8f6a;
  --pc-cells: repeating-linear-gradient(90deg, var(--pc-cell) 0 calc(100% / 16 - 3px), transparent calc(100% / 16 - 3px) calc(100% / 16));
}
[data-direction="practice-chart"][data-theme="dark"] {
  --lx-paper: #0b1824; --lx-ink: #e8f0f6; --lx-muted: #a6b8c7; --lx-line: rgba(232,240,246,0.14);
  --lx-dark: #071019; --pc-soft: #102233; --pc-card: #12263a; --pc-cell: color-mix(in srgb, var(--lx-accent) 30%, #0b1824);
}

/* ── type ── */
[data-direction="practice-chart"] .lx-display { font-size: calc(clamp(2.6rem, 6.2cqi, 5.4rem) * var(--lx-title-scale, 1)); max-width: 16ch; }
[data-direction="practice-chart"] .lx-h2 { font-size: calc(clamp(2.05rem, 4.4cqi, 3.7rem) * var(--lx-title-scale, 1)); line-height: 1.05; max-width: 18ch; }
[data-direction="practice-chart"] .lx-h3 { font-weight: 500; letter-spacing: -.01em; }
[data-direction="practice-chart"] .lx-eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .72rem; font-weight: 700; color: var(--lx-accent); }
[data-direction="practice-chart"] .lx-eyebrow::before { content: ""; width: 1.4rem; height: .55rem; border-radius: 3px; background: var(--pc-cells); background-size: 100% 100%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lx-accent) 40%, transparent); }
[data-direction="practice-chart"] .lx-tone-dark .lx-eyebrow { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }
[data-direction="practice-chart"] .lx-lede { color: var(--lx-muted); }

/* ── buttons: soft-cornered, calm ── */
.mk-demo-site[data-direction="practice-chart"] .lx-btn--primary { background: var(--lx-accent); color: var(--lx-accent-ink); box-shadow: 0 1px 0 rgb(0 0 0 / .08), 0 10px 24px -16px var(--lx-accent); }
.mk-demo-site[data-direction="practice-chart"] .lx-btn--primary:hover { background: color-mix(in srgb, var(--lx-accent) 88%, #000); }
[data-direction="practice-chart"] .lx-btn--secondary { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 55%, transparent); }
[data-direction="practice-chart"] .lx-btn--link { font-weight: 600; text-decoration-color: color-mix(in srgb, var(--lx-accent) 60%, transparent); }
[data-direction="practice-chart"] .lx-tone-dark .lx-btn--primary { background: #ffffff; color: var(--lx-dark); }

/* ── header: the name, a quiet nav and the chart-cell rule ── */
.mk-demo-site[data-direction="practice-chart"] .mk-dh { background: color-mix(in srgb, var(--lx-paper) 94%, transparent); border-bottom: 0; box-shadow: none; }
.mk-demo-site[data-direction="practice-chart"] .mk-dh::after { content: ""; position: absolute; left: var(--lx-gutter); right: var(--lx-gutter); bottom: 0; height: 5px; border-radius: 2px; background: var(--pc-cells); }
.mk-demo-site[data-direction="practice-chart"] .mk-dh-brand { font-size: clamp(1.25rem, 3.2cqi, 1.5rem); font-weight: 500; letter-spacing: -.01em; }
.mk-demo-site[data-direction="practice-chart"] .mk-dh-links { gap: .15rem; padding: .25rem; border-radius: 14px; background: var(--pc-card); border-color: var(--lx-line); font-weight: 600; font-size: .88rem; }
.mk-demo-site[data-direction="practice-chart"] .mk-dh-links a, .mk-demo-site[data-direction="practice-chart"] .mk-dh-links .mk-inert { border-radius: 10px; }
.mk-demo-site[data-direction="practice-chart"] .mk-dh-links li[data-current] a { background: var(--pc-soft); color: var(--lx-ink); box-shadow: inset 0 -2px 0 var(--lx-accent); }
.mk-demo-site[data-direction="practice-chart"] .mk-dh-links .mk-dh-index, .mk-demo-site[data-direction="practice-chart"] .mk-dh-links .mk-dh-dot { display: none; }
.mk-demo-site[data-direction="practice-chart"] .mk-dh-links a, .mk-demo-site[data-direction="practice-chart"] .mk-dh-brand > span { white-space: nowrap; }
/* four pages and a long action fit inline only on a genuinely wide frame; below that the menu carries them */
@container demo (max-width: 1099px) {
  .mk-demo-site[data-direction="practice-chart"] .mk-dh-nav, .mk-demo-site[data-direction="practice-chart"] .mk-dh-cta { display: none; }
  .mk-demo-site[data-direction="practice-chart"] .mk-dh-menu { display: block; }
}
.mk-demo-site[data-direction="practice-chart"] .mk-dh-menu > summary { border-radius: 12px; background: var(--lx-accent); color: var(--lx-accent-ink); box-shadow: none; }
.mk-demo-site[data-direction="practice-chart"] .mk-dh-panel { border-radius: 18px; background: var(--pc-card); }
.mk-demo-site[data-direction="practice-chart"] .mk-dh-panel-links > li > * { border-radius: 10px; font-weight: 500; }
.mk-demo-site[data-direction="practice-chart"] .mk-dh-panel-links .mk-dh-index { color: var(--lx-accent); opacity: 1; font-variant-numeric: tabular-nums; }
.mk-demo-site[data-direction="practice-chart"] .mk-dh-panel-links > li[data-current] > * { background: var(--pc-soft); box-shadow: inset 3px 0 0 var(--lx-accent); color: var(--lx-ink); }

/* ── hero: split, the photograph in a soft clinical frame with a chart-cell edge ── */
[data-direction="practice-chart"] .lx-hero-orbit, [data-direction="practice-chart"] .lx-hero-sweep, [data-direction="practice-chart"] .lx-hero-scroll { display: none !important; }
[data-direction="practice-chart"] .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 -50px rgb(14 34 51 / .55); }
[data-direction="practice-chart"] .lx-hero--split .lx-hero-media::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 1rem; height: 6px; border-radius: 3px; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .85) 0 calc(100% / 16 - 3px), transparent calc(100% / 16 - 3px) calc(100% / 16)); }
@container (min-width: 900px) {
  [data-direction="practice-chart"] .lx-hero--split .lx-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: min(calc(var(--mk-vh, 1svh) * 80), 50rem); }
  [data-direction="practice-chart"] .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="practice-chart"] .lx-hero--editorial { padding-top: clamp(3rem, 8cqi, 6rem); }
[data-direction="practice-chart"] .lx-hero--editorial .lx-hero-media { border-radius: var(--lx-media-r); }
[data-direction="practice-chart"] .lx-note { border-top-style: dashed; }

/* ── proof: four reassurance cards numbered like chart positions (11–14) ── */
[data-direction="practice-chart"] .lx-proof { border-block: 0; padding-block: clamp(1.25rem, 3cqi, 2.5rem); }
[data-direction="practice-chart"] .lx-proof-list { counter-reset: pc 10; gap: clamp(.6rem, 1.6cqi, 1rem); }
[data-direction="practice-chart"] .lx-proof-list li { counter-increment: pc; position: relative; padding: 1.25rem 1.25rem 1.25rem 3.6rem; border: 1px solid var(--lx-line); border-radius: 16px; background: var(--pc-card); }
[data-direction="practice-chart"] .lx-proof-list li::before { content: counter(pc); position: absolute; left: 1.1rem; top: 1.25rem; min-width: 1.9rem; padding: .25rem 0; border-radius: 7px; background: var(--pc-soft); color: var(--lx-accent); font: 700 .78rem/1 var(--lx-body); text-align: center; font-variant-numeric: tabular-nums; }
[data-direction="practice-chart"] .lx-proof-title { font-family: var(--lx-head); font-weight: 500; font-size: 1.12rem; }
@container (min-width: 600px) { [data-direction="practice-chart"] .lx-proof-list li:nth-child(2) { border-top: 1px solid var(--lx-line); } }
@container (min-width: 1000px) {
  [data-direction="practice-chart"] .lx-proof-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [data-direction="practice-chart"] .lx-proof-list li, [data-direction="practice-chart"] .lx-proof-list li:first-child { border-left: 1px solid var(--lx-line); padding: 1.25rem 1.25rem 1.25rem 3.6rem; }
}

/* ── services: an index of treatments as chart rows; rows with a fact-slot column ── */
[data-direction="practice-chart"] .lx-svc-index { border-top: 0; gap: .6rem; }
@container (min-width: 640px) { [data-direction="practice-chart"] .lx-svc-index { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .8rem; } }
[data-direction="practice-chart"] .lx-svc-index-item { padding: 1.1rem 1.15rem; border: 1px solid var(--lx-line); border-radius: 16px; background: var(--pc-card); transition: border-color .2s ease, transform .2s ease; }
[data-direction="practice-chart"] .lx-svc-index-item:hover { border-color: color-mix(in srgb, var(--lx-accent) 45%, transparent); transform: translateY(-1px); }
[data-direction="practice-chart"] .lx-svc-index-n { display: inline-grid; place-items: center; min-width: 2.1rem; height: 1.6rem; border-radius: 7px; background: var(--pc-soft); color: var(--lx-accent); font: 700 .74rem/1 var(--lx-body); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
[data-direction="practice-chart"] .lx-svc-index-name { font-size: clamp(1.25rem, 4cqi, 1.6rem); font-weight: 500; }
[data-direction="practice-chart"] .lx-svc-index-go { font-weight: 600; text-decoration-color: color-mix(in srgb, var(--lx-accent) 55%, transparent); }
[data-direction="practice-chart"] .lx-svc-list { border-top-color: var(--lx-line); }
[data-direction="practice-chart"] .lx-svc { padding-block: 1.3rem; }
[data-direction="practice-chart"] .lx-svc .lx-h3 { font-size: clamp(1.15rem, 2.4cqi, 1.4rem); }
/* the fact slot: a practice-confirmed value, never a quoted figure */
[data-direction="practice-chart"] .lx-svc-price, [data-direction="practice-chart"] .lx-price-amount { display: inline-flex; align-items: center; min-height: 1.9rem; padding: 0 .7rem; border: 1.5px dashed color-mix(in srgb, var(--lx-accent) 55%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--lx-accent) 5%, transparent); color: var(--lx-accent); font: 600 .78rem/1 var(--lx-body); letter-spacing: .01em; white-space: nowrap; }
[data-direction="practice-chart"] .lx-tone-dark :is(.lx-svc-price, .lx-price-amount) { color: #ffffff; border-color: rgb(255 255 255 / .45); }

/* ── split: photograph with soft corners; points as checked rows ── */
[data-direction="practice-chart"] .lx-split-media { border-radius: var(--lx-media-r); box-shadow: 0 30px 70px -55px rgb(14 34 51 / .55); }
[data-direction="practice-chart"] .lx-points li { padding-left: 1.9rem; }
[data-direction="practice-chart"] .lx-points li::before { top: .3em; width: 1.05rem; height: 1.05rem; border-radius: 6px; background: var(--pc-soft); box-shadow: inset 0 0 0 1.5px var(--lx-accent); }

/* ── steps, prices, questions ── */
[data-direction="practice-chart"] .lx-tone-soft { background: var(--pc-soft); color: var(--lx-ink); }
[data-direction="practice-chart"] .lx-step-n { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--pc-card); color: var(--lx-accent); font: 600 1rem/1 var(--lx-body); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lx-accent) 45%, transparent); }
[data-direction="practice-chart"] .lx-steps--row .lx-step { border-top: 0; padding-top: 0; }
[data-direction="practice-chart"] .lx-steps--timeline .lx-step:not(:last-child)::after { left: 1.25rem; top: 2.9rem; width: 2px; background: var(--pc-soft); }
[data-direction="practice-chart"] .lx-price-group { padding: clamp(1rem, 2.4cqi, 1.5rem); border: 1px solid var(--lx-line); border-radius: 18px; background: var(--pc-card); }
[data-direction="practice-chart"] .lx-price-group-title { font-weight: 500; padding-bottom: .5rem; border-bottom: 1px solid var(--lx-line); }
[data-direction="practice-chart"] .lx-price-leader { border-bottom-style: dotted; }
[data-direction="practice-chart"] .lx-faq-list { border-top: 0; display: grid; gap: .55rem; }
[data-direction="practice-chart"] .lx-faq-item { border: 1px solid var(--lx-line); border-radius: 14px; background: var(--pc-card); padding-inline: 1.1rem; }
[data-direction="practice-chart"] .lx-faq-item summary { font-weight: 600; }
[data-direction="practice-chart"] .lx-faq-mark::before, [data-direction="practice-chart"] .lx-faq-mark::after { background: var(--lx-accent); }

/* ── dark bands: deep ink with a faint chart grid; contact and footer ── */
[data-direction="practice-chart"] .lx-tone-dark { background-color: var(--lx-dark); background-image: linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px); background-size: 2.5rem 2.5rem; }
[data-direction="practice-chart"] .lx-facts { border-top: 0; gap: .5rem; }
[data-direction="practice-chart"] .lx-facts > div { padding: .9rem 1rem; border: 1px solid var(--lx-line); border-radius: 14px; background: var(--pc-card); }
[data-direction="practice-chart"] .lx-footer { position: relative; }
[data-direction="practice-chart"] .lx-footer::before { content: ""; position: absolute; left: var(--lx-gutter); right: var(--lx-gutter); top: 1.25rem; height: 5px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .16) 0 calc(100% / 16 - 3px), transparent calc(100% / 16 - 3px) calc(100% / 16)); }
[data-direction="practice-chart"] .lx-footer-name { font-weight: 500; }

/* ── the guided appointment request inherits the clinical card ── */
.mk-demo-site[data-direction="practice-chart"] .mk-enq-card { border-radius: 20px; background: var(--pc-card); }
.mk-demo-site[data-direction="practice-chart"] .mk-enq-chip { border-radius: 10px; }
.mk-demo-site[data-direction="practice-chart"] .mk-enq :is(input, textarea) { border-radius: 10px; }

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

/* ── dark mode: the accent's own on-dark tint for eyebrows (WCAG AA on every owner palette and dark surface; gate8) ── */
[data-direction="practice-chart"][data-theme="dark"] .lx-eyebrow { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }

/* ── signature (correction 10): the clinic horizon and the chart ─────────────────────────────────────────────────────
   No card forest: the hero is calm words over a low PANORAMA of the surgery, the dental arch drawn as one line between
   them. Treatments are read from a CHART — eight teeth numbered the dentist's way (FDI 18–11) above a list where each
   treatment carries its own tooth number and opens to what happens at the appointment. */
.mk-demo-site[data-direction="practice-chart"] .lx-hero--clinic { padding-top: clamp(3rem, 8cqi, 6.5rem); }
.mk-demo-site[data-direction="practice-chart"] .lx-clinic { position: relative; padding-bottom: clamp(3rem, 7cqi, 5rem); }
.mk-demo-site[data-direction="practice-chart"] .lx-clinic .lx-hero-words { max-width: 44rem; }
.mk-demo-site[data-direction="practice-chart"] .lx-hero--clinic .lx-display { font-size: calc(clamp(2.4rem, 5.6cqi, 4.8rem) * var(--lx-title-scale, 1)); max-width: 16ch; }
.mk-demo-site[data-direction="practice-chart"] .lx-clinic-arch { position: absolute; left: var(--lx-gutter); right: var(--lx-gutter); bottom: 0; height: 2.6rem; border: 3px solid var(--lx-accent); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.mk-demo-site[data-direction="practice-chart"] .lx-clinic-horizon .lx-hero-media { aspect-ratio: 21 / 9; overflow: hidden; }
.mk-demo-site[data-direction="practice-chart"] .lx-clinic-horizon .lx-hero-media .lx-img { width: 100%; height: 100%; object-fit: cover; }
@container demo (max-width: 599px) { .mk-demo-site[data-direction="practice-chart"] .lx-clinic-horizon .lx-hero-media { aspect-ratio: 4 / 3; } }

/* the chart */
.mk-demo-site[data-direction="practice-chart"] .lx-chart { display: grid; gap: clamp(1.75rem, 4cqi, 2.75rem); }
.mk-demo-site[data-direction="practice-chart"] .lx-chart-arch { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .4rem; max-width: 34rem; }
.mk-demo-site[data-direction="practice-chart"] .lx-tooth { display: grid; place-items: end center; aspect-ratio: 3 / 4; padding-bottom: .35rem; border-radius: 40% 40% 48% 48% / 30% 30% 70% 70%; background: var(--pc-cell); color: var(--lx-ink); font: 600 .875rem/1 var(--lx-body); }
.mk-demo-site[data-direction="practice-chart"] .lx-tooth:nth-child(n+5) { background: color-mix(in srgb, var(--pc-cell) 60%, var(--pc-card)); }
.mk-demo-site[data-direction="practice-chart"] .lx-chart-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--lx-ink); }
.mk-demo-site[data-direction="practice-chart"] .lx-chart-item { border-bottom: 1px solid var(--lx-line); }
.mk-demo-site[data-direction="practice-chart"] .lx-chart-n { display: inline-grid; place-items: center; min-width: 2.4rem; height: 2.4rem; border-radius: 40% 40% 48% 48% / 30% 30% 70% 70%; background: var(--pc-soft); color: var(--lx-ink); font: 700 .875rem/1 var(--lx-body); }
.mk-demo-site[data-direction="practice-chart"] .lx-chart-name { font: 500 clamp(1.15rem, 2.2cqi, 1.45rem)/1.2 var(--lx-head); }
.mk-demo-site[data-direction="practice-chart"] .lx-chart-item[open] { padding-bottom: 1.2rem; }
.mk-demo-site[data-direction="practice-chart"] .lx-chart-item .lx-body { padding-left: 3.3rem; color: var(--lx-muted); max-width: 54ch; }
.mk-demo-site[data-direction="practice-chart"] .lx-chart-item .lx-btn { margin-left: 3.3rem; }
@container demo (min-width: 900px) { .mk-demo-site[data-direction="practice-chart"] .lx-chart { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; } .mk-demo-site[data-direction="practice-chart"] .lx-chart-arch { grid-column: 1; } .mk-demo-site[data-direction="practice-chart"] .lx-chart-list { grid-column: 2; grid-row: 1 / span 2; } }

/* dark: numerals, prices, fee groups and tooth labels in the accent's own on-dark tint (WCAG AA on every dark surface,
   for every owner palette) — the raw accent is too dark to read on navy (gate9 C6) */
[data-direction="practice-chart"][data-theme="dark"] :is(.lx-step-n, .lx-svc-price, .lx-price-amount, .lx-svc-index-n) { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }
[data-direction="practice-chart"][data-theme="dark"] :is(.lx-svc-price, .lx-price-amount) { border-color: color-mix(in srgb, var(--lx-accent) 55%, #ffffff); }
[data-direction="practice-chart"][data-theme="dark"] .lx-proof-list li::before { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }
[data-direction="practice-chart"][data-theme="dark"] :is(.lx-tooth, .lx-chart-n) { color: var(--lx-ink); }

/* ── gate10 correction: the chart is the instrument ──────────────────────────────────────────────────────────────────
   On wide screens the clinic hero sets the words and the surgery side by side, so the first view is never half empty;
   the stray arch stroke goes. The tooth chart is drawn LARGE and is live: opening a treatment lights the matching
   tooth (native details state, read with :has — no script). Promises are a RECORD (a dated clinical-notes column),
   facts a CARD (the practice's registration card), the close an APPOINTMENT slip. */
.mk-demo-site[data-direction="practice-chart"] .lx-clinic-arch { display: none; }
@container demo (min-width: 900px) {
  .mk-demo-site[data-direction="practice-chart"] .lx-hero--clinic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(2rem, 4cqi, 4rem); padding: clamp(3rem, 6cqi, 5rem) max(var(--lx-gutter), calc((100cqi - var(--lx-max)) / 2)); }
  .mk-demo-site[data-direction="practice-chart"] .lx-hero--clinic .lx-wrap { padding: 0; max-width: none; margin: 0; }
  .mk-demo-site[data-direction="practice-chart"] .lx-clinic { padding-bottom: 0; }
  .mk-demo-site[data-direction="practice-chart"] .lx-clinic-horizon .lx-hero-media { aspect-ratio: 4 / 5; max-height: min(calc(var(--mk-vh, 1svh) * 78), 44rem); width: 100%; border-radius: var(--lx-media-r, 1.25rem); }
}

.mk-demo-site[data-direction="practice-chart"] .lx-chart-arch { max-width: 40rem; gap: .5rem; }
.mk-demo-site[data-direction="practice-chart"] .lx-tooth { position: relative; min-height: 4.5rem; padding-bottom: .5rem; font: 700 1rem/1 var(--lx-body); box-shadow: inset 0 0 0 1px var(--lx-line); transition: background-color .2s ease, color .2s ease; }
.mk-demo-site[data-direction="practice-chart"] .lx-tooth i { position: absolute; top: 18%; left: 50%; width: 38%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--pc-card); box-shadow: inset 0 0 0 2px var(--lx-line); }
.mk-demo-site[data-direction="practice-chart"] .lx-chart-n { min-width: 2.75rem; height: 2.75rem; font-size: 1rem; }
@container demo (min-width: 900px) { .mk-demo-site[data-direction="practice-chart"] .lx-tooth { min-height: 6rem; font-size: 1.125rem; } }
.mk-demo-site[data-direction="practice-chart"] .lx-chart:has(.lx-chart-list > li:is([data-teeth~="11"], [data-teeth="all"]) > details[open]) .lx-tooth[data-tooth="11"] { background: var(--lx-accent); color: #ffffff; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lx-accent) 60%, #000000); opacity: 1; transform: translateY(-3px); outline: 3px solid color-mix(in srgb, var(--lx-accent) 35%, transparent); outline-offset: 2px; }
.mk-demo-site[data-direction="practice-chart"] .lx-chart:has(.lx-chart-list > li:is([data-teeth~="12"], [data-teeth="all"]) > details[open]) .lx-tooth[data-tooth="12"] { background: var(--lx-accent); color: #ffffff; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lx-accent) 60%, #000000); opacity: 1; transform: translateY(-3px); outline: 3px solid color-mix(in srgb, var(--lx-accent) 35%, transparent); outline-offset: 2px; }
.mk-demo-site[data-direction="practice-chart"] .lx-chart:has(.lx-chart-list > li:is([data-teeth~="13"], [data-teeth="all"]) > details[open]) .lx-tooth[data-tooth="13"] { background: var(--lx-accent); color: #ffffff; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lx-accent) 60%, #000000); opacity: 1; transform: translateY(-3px); outline: 3px solid color-mix(in srgb, var(--lx-accent) 35%, transparent); outline-offset: 2px; }
.mk-demo-site[data-direction="practice-chart"] .lx-chart:has(.lx-chart-list > li:is([data-teeth~="14"], [data-teeth="all"]) > details[open]) .lx-tooth[data-tooth="14"] { background: var(--lx-accent); color: #ffffff; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lx-accent) 60%, #000000); opacity: 1; transform: translateY(-3px); outline: 3px solid color-mix(in srgb, var(--lx-accent) 35%, transparent); outline-offset: 2px; }
.mk-demo-site[data-direction="practice-chart"] .lx-chart:has(.lx-chart-list > li:is([data-teeth~="15"], [data-teeth="all"]) > details[open]) .lx-tooth[data-tooth="15"] { background: var(--lx-accent); color: #ffffff; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lx-accent) 60%, #000000); opacity: 1; transform: translateY(-3px); outline: 3px solid color-mix(in srgb, var(--lx-accent) 35%, transparent); outline-offset: 2px; }
.mk-demo-site[data-direction="practice-chart"] .lx-chart:has(.lx-chart-list > li:is([data-teeth~="16"], [data-teeth="all"]) > details[open]) .lx-tooth[data-tooth="16"] { background: var(--lx-accent); color: #ffffff; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lx-accent) 60%, #000000); opacity: 1; transform: translateY(-3px); outline: 3px solid color-mix(in srgb, var(--lx-accent) 35%, transparent); outline-offset: 2px; }
.mk-demo-site[data-direction="practice-chart"] .lx-chart:has(.lx-chart-list > li:is([data-teeth~="17"], [data-teeth="all"]) > details[open]) .lx-tooth[data-tooth="17"] { background: var(--lx-accent); color: #ffffff; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lx-accent) 60%, #000000); opacity: 1; transform: translateY(-3px); outline: 3px solid color-mix(in srgb, var(--lx-accent) 35%, transparent); outline-offset: 2px; }
.mk-demo-site[data-direction="practice-chart"] .lx-chart:has(.lx-chart-list > li:is([data-teeth~="18"], [data-teeth="all"]) > details[open]) .lx-tooth[data-tooth="18"] { background: var(--lx-accent); color: #ffffff; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lx-accent) 60%, #000000); opacity: 1; transform: translateY(-3px); outline: 3px solid color-mix(in srgb, var(--lx-accent) 35%, transparent); outline-offset: 2px; }
[data-direction="practice-chart"][data-theme="dark"] .lx-chart .lx-tooth { color: var(--lx-ink); }
@media (prefers-reduced-motion: reduce) { .mk-demo-site[data-direction="practice-chart"] .lx-tooth, .mk-demo-site[data-direction="practice-chart"] .lx-chart .lx-tooth { transition: none; transform: none !important; } }

/* promises as a clinical record */
.mk-demo-site[data-direction="practice-chart"] .lx-proof[data-lx-layout="record"] .lx-proof-list { display: grid; gap: 0; border: 0; border-top: 2px solid var(--lx-ink); counter-reset: pc-rec; }
.mk-demo-site[data-direction="practice-chart"] .lx-proof[data-lx-layout="record"] .lx-proof-list li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1.25rem; padding: 1.15rem 0; border: 0; border-bottom: 1px solid var(--lx-line); border-radius: 0; background: none; box-shadow: none; counter-increment: pc-rec; }
.mk-demo-site[data-direction="practice-chart"] .lx-proof[data-lx-layout="record"] .lx-proof-list li::before { content: "R" counter(pc-rec, decimal-leading-zero); position: static; grid-row: span 2; font: 700 1rem/1.4 var(--lx-body); letter-spacing: .06em; color: var(--lx-accent); }
[data-direction="practice-chart"][data-theme="dark"] .lx-proof[data-lx-layout="record"] .lx-proof-list li::before { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }
@container demo (min-width: 900px) { .mk-demo-site[data-direction="practice-chart"] .lx-proof[data-lx-layout="record"] .lx-proof-list { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }

/* facts as the practice's registration card */
.mk-demo-site[data-direction="practice-chart"] .lx-services[data-lx-layout="card"] .lx-svc-list { display: grid; gap: 0; max-width: 46rem; padding: 1.5rem clamp(1.25rem, 3cqi, 2.25rem); border: 2px solid var(--lx-ink); border-radius: 10px; background: var(--pc-card); }
.mk-demo-site[data-direction="practice-chart"] .lx-services[data-lx-layout="card"] .lx-svc-list > li { padding: .9rem 0; border: 0; border-bottom: 1px dashed var(--lx-line); background: none; box-shadow: none; border-radius: 0; }
.mk-demo-site[data-direction="practice-chart"] .lx-services[data-lx-layout="card"] .lx-svc-list > li:last-child { border-bottom: 0; }
.mk-demo-site[data-direction="practice-chart"] .lx-services[data-lx-layout="card"] .lx-svc-price { font-size: .875rem; }

/* the close: an appointment slip */
.mk-demo-site[data-direction="practice-chart"] .lx-cta[data-lx-layout="appointment"] .lx-cta-grid { width: calc(100% - 2 * var(--lx-gutter)); max-width: var(--lx-max); margin-inline: auto; padding: clamp(1.5rem, 4cqi, 2.75rem); border: 2px solid var(--lx-accent); border-radius: 12px; background: var(--pc-card); box-sizing: border-box; }

/* ── gate11 correction: an intelligible chart, an aligned slip ───────────────────────────────────────────────────────
   Each treatment names the teeth it usually concerns (its row's own data — "all", or FDI numbers); opening it lights
   exactly those teeth, with a written key, so the chart explains rather than decorates. On narrow frames the arch is
   two rows of four, never eight crushed chips. The appointment slip keeps the page's gutters (gate11 F7c). */
.mk-demo-site[data-direction="practice-chart"] .lx-chart-key { grid-column: 1; margin: -.5rem 0 0; max-width: 34rem; font-size: .9375rem; line-height: 1.5; color: var(--lx-muted); }
@container demo (max-width: 479px) { .mk-demo-site[data-direction="practice-chart"] .lx-chart-arch { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 20rem; } .mk-demo-site[data-direction="practice-chart"] .lx-tooth { min-height: 4rem; } }

/* ── gate12 correction (item 3): an unmistakable selected treatment ──────────────────────────────────────────────────
   The open treatment is plainly the selected one: an accent rail, a tinted card and a bold name, its summary keeping a
   3px focus ring; inside it a sentence names the teeth it concerns. On the chart, the teeth it concerns are filled,
   ringed and raised while the others step back — even for "all of them" the whole arch visibly switches on. The state is
   the native disclosure (details/summary: expanded/collapsed to assistive technology); no script. */
.mk-demo-site[data-direction="practice-chart"] .lx-chart-item[open] { background: color-mix(in srgb, var(--lx-accent) 7%, var(--pc-card)); box-shadow: inset 4px 0 0 var(--lx-accent); }
.mk-demo-site[data-direction="practice-chart"] .lx-chart-item[open] > summary { padding-left: .9rem; }
.mk-demo-site[data-direction="practice-chart"] .lx-chart-item[open] .lx-chart-name { font-weight: 700; color: var(--lx-accent); }
.mk-demo-site[data-direction="practice-chart"] .lx-chart-item > summary:focus-visible { outline: 3px solid var(--lx-accent); outline-offset: -3px; }
.mk-demo-site[data-direction="practice-chart"] .lx-chart-teeth { margin: .6rem 0 0 3.3rem; font-weight: 700; font-size: .9375rem; color: var(--lx-ink); }
.mk-demo-site[data-direction="practice-chart"] .lx-chart:has(.lx-chart-item[open]) .lx-tooth { opacity: .4; }
.mk-demo-site[data-direction="practice-chart"] .lx-chart .lx-tooth { transition: opacity .2s ease, transform .2s ease, background-color .2s ease; }
[data-direction="practice-chart"][data-theme="dark"] .lx-chart-item[open] { background: color-mix(in srgb, var(--lx-accent) 16%, var(--lx-dark)); }
[data-direction="practice-chart"][data-theme="dark"] .lx-chart-item[open] .lx-chart-name { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }

/* ── gate12 critic correction: the practice's own image, one chart ───────────────────────────────────────────────────
   The surgery photograph is toned into the practice's cobalt (a quiet duotone wash), so it reads as this practice's
   picture rather than a stock frame, and it never glares in dark mode. The treatments page leads with the live chart
   (its separate drawn chart is gone, so there is one chart, the one that works). The page closes on the practice-facts
   card with its own appointment action instead of a second band. Enquiry progress is a row of tooth chips. */
.mk-demo-site[data-direction="practice-chart"] .lx-clinic-horizon .lx-hero-media { position: relative; }
.mk-demo-site[data-direction="practice-chart"] .lx-clinic-horizon .lx-hero-media .lx-img { filter: grayscale(.35) contrast(1.04); }
.mk-demo-site[data-direction="practice-chart"] .lx-clinic-horizon .lx-hero-media::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--lx-accent) 22%, transparent); mix-blend-mode: multiply; pointer-events: none; }
[data-direction="practice-chart"][data-theme="dark"] .lx-clinic-horizon .lx-hero-media .lx-img { filter: grayscale(.4) brightness(.7) contrast(1.05); }
.mk-demo-site[data-direction="practice-chart"] .lx-services[data-lx-layout="card"] .lx-actions { margin-top: 1.25rem; }
.mk-demo-site[data-direction="practice-chart"] [data-enquiry-journey] ol[aria-label="Enquiry progress"] li > span:first-child { height: .7rem; border-radius: 40% 40% 48% 48% / 30% 30% 70% 70%; }

/* g93d4 critic: the tooth chart — the design's signature instrument — read small and faint. On wide frames it spans its
   column and each tooth is drawn larger with an accent-tinted outline, so the chart carries the section. */
.mk-demo-site[data-direction="practice-chart"] .lx-tooth { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lx-accent) 38%, var(--lx-line)); }
.mk-demo-site[data-direction="practice-chart"] .lx-tooth i { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lx-accent) 45%, var(--lx-line)); }
@container demo (min-width: 900px) {
  .mk-demo-site[data-direction="practice-chart"] .lx-chart-arch { max-width: none; gap: .65rem; }
  .mk-demo-site[data-direction="practice-chart"] .lx-tooth { min-height: 7.5rem; font-size: 1.25rem; }
}

/* ── g0c01b critic correction: a dental first impression, and scale through the page ─────────────────────────────────
   Logo off, the first view was generic healthcare: a headline and one chair photograph on white. The surgery now sits on
   the practice's own CHART PANEL — a deep cobalt-navy plate (the accepted navy clinical identity) carrying the dental
   chart's upper arch as its ruler (FDI positions 18 → 28 across the top, the sixteen chart cells along the foot) with
   the photograph mounted between them like a film on a light box — so the page reads as a dentist's chart before any
   word is read. Further down, the live tooth chart becomes the section's headline instrument (full width, large teeth,
   framed), and the registration card stands on a navy band so the page alternates weight instead of white planes. The
   appointment request, the chart's behaviour and every fact slot are unchanged. */
.mk-demo-site[data-direction="practice-chart"] { --pc-panel: color-mix(in srgb, var(--lx-accent) 26%, var(--lx-dark)); }
.mk-demo-site[data-direction="practice-chart"] .lx-clinic-horizon { position: relative; padding: 2.75rem var(--lx-gutter) 2.6rem; background: var(--pc-panel); }
.mk-demo-site[data-direction="practice-chart"] .lx-clinic-horizon::before { content: "18  17  16  15  14  13  12  11   ·   21  22  23  24  25  26  27  28" / ""; position: absolute; left: var(--lx-gutter); right: var(--lx-gutter); top: 1rem; overflow: hidden; white-space: pre; font: 600 .875rem/1 var(--lx-body); letter-spacing: .12em; color: var(--lx-dark-muted); pointer-events: none; }
.mk-demo-site[data-direction="practice-chart"] .lx-clinic-horizon::after { content: ""; position: absolute; left: var(--lx-gutter); right: var(--lx-gutter); bottom: 1rem; height: .7rem; border-radius: 3px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--lx-accent) 55%, #ffffff) 0 calc(100% / 16 - 4px), transparent calc(100% / 16 - 4px) calc(100% / 16)); opacity: .8; pointer-events: none; }
.mk-demo-site[data-direction="practice-chart"] .lx-clinic-horizon .lx-hero-media { box-shadow: 0 0 0 6px color-mix(in srgb, #ffffff 92%, var(--lx-accent)), 0 40px 80px -40px rgb(0 0 0 / .7); }
@container demo (min-width: 900px) {
  .mk-demo-site[data-direction="practice-chart"] .lx-hero--clinic { background: linear-gradient(90deg, var(--lx-paper) 0 50%, var(--pc-panel) 50% 100%); padding-block: 0; }
  .mk-demo-site[data-direction="practice-chart"] .lx-hero--clinic .lx-clinic { padding-block: clamp(3rem, 6cqi, 5rem); }
  .mk-demo-site[data-direction="practice-chart"] .lx-clinic-horizon { align-self: stretch; display: grid; align-items: center; padding: 3.5rem 0 3.25rem clamp(1.5rem, 3cqi, 3rem); background: none; }
  .mk-demo-site[data-direction="practice-chart"] .lx-clinic-horizon::before { left: clamp(1.5rem, 3cqi, 3rem); right: 0; top: 1.4rem; }
  .mk-demo-site[data-direction="practice-chart"] .lx-clinic-horizon::after { left: clamp(1.5rem, 3cqi, 3rem); right: 0; bottom: 1.3rem; }
  .mk-demo-site[data-direction="practice-chart"] .lx-hero--clinic .lx-display { font-size: calc(clamp(2.6rem, 5.4cqi, 5.6rem) * var(--lx-title-scale, 1)); }
}
/* the live chart as the section's instrument */
.mk-demo-site[data-direction="practice-chart"] .lx-services--chart { background: color-mix(in srgb, var(--lx-accent) 6%, var(--lx-paper)); }
.mk-demo-site[data-direction="practice-chart"] .lx-chart-arch { padding: clamp(1rem, 3cqi, 2rem); border-radius: 22px; background: var(--pc-card); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lx-accent) 30%, var(--lx-line)), 0 30px 60px -45px rgb(14 34 51 / .45); }
@container demo (min-width: 1100px) {
  .mk-demo-site[data-direction="practice-chart"] .lx-chart { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: clamp(3rem, 5cqi, 5rem); }
  .mk-demo-site[data-direction="practice-chart"] .lx-chart-arch { grid-column: 1 / -1; grid-row: 1; gap: .9rem; }
  .mk-demo-site[data-direction="practice-chart"] .lx-chart > :first-child { grid-column: 1; grid-row: 2; }
  .mk-demo-site[data-direction="practice-chart"] .lx-chart-key { grid-column: 1; grid-row: 3; }
  .mk-demo-site[data-direction="practice-chart"] .lx-chart-list { grid-column: 2; grid-row: 2 / span 2; }
  .mk-demo-site[data-direction="practice-chart"] .lx-tooth { min-height: 9.5rem; font-size: 1.375rem; }
}
/* the registration card on a navy band */
.mk-demo-site[data-direction="practice-chart"] .lx-services[data-lx-layout="card"] { background: var(--lx-dark); }
.mk-demo-site[data-direction="practice-chart"] .lx-services[data-lx-layout="card"] .lx-sec-intro { color: var(--lx-dark-ink); --lx-muted: var(--lx-dark-muted); --lx-line: var(--lx-dark-line); }
.mk-demo-site[data-direction="practice-chart"] .lx-services[data-lx-layout="card"] .lx-sec-intro .lx-eyebrow { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }
.mk-demo-site[data-direction="practice-chart"] .lx-services[data-lx-layout="card"] .lx-svc-list { color: var(--lx-ink); border-color: transparent; box-shadow: 0 40px 80px -50px rgb(0 0 0 / .7); }

@media (prefers-reduced-motion: reduce) { .mk-demo-site[data-direction="practice-chart"] .lx-chart .lx-tooth { transition: none; transform: none; } }

/* ── 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="practice-chart"][data-theme="system"] {
  --lx-paper: #0b1824; --lx-ink: #e8f0f6; --lx-muted: #a6b8c7; --lx-line: rgba(232,240,246,0.14);
  --lx-dark: #071019; --pc-soft: #102233; --pc-card: #12263a; --pc-cell: color-mix(in srgb, var(--lx-accent) 30%, #0b1824);
}
[data-direction="practice-chart"][data-theme="system"] .lx-eyebrow { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }
[data-direction="practice-chart"][data-theme="system"] :is(.lx-step-n, .lx-svc-price, .lx-price-amount, .lx-svc-index-n) { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }
[data-direction="practice-chart"][data-theme="system"] :is(.lx-svc-price, .lx-price-amount) { border-color: color-mix(in srgb, var(--lx-accent) 55%, #ffffff); }
[data-direction="practice-chart"][data-theme="system"] .lx-proof-list li::before { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }
[data-direction="practice-chart"][data-theme="system"] :is(.lx-tooth, .lx-chart-n) { color: var(--lx-ink); }
[data-direction="practice-chart"][data-theme="system"] .lx-chart .lx-tooth { color: var(--lx-ink); }
[data-direction="practice-chart"][data-theme="system"] .lx-proof[data-lx-layout="record"] .lx-proof-list li::before { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }
[data-direction="practice-chart"][data-theme="system"] .lx-chart-item[open] { background: color-mix(in srgb, var(--lx-accent) 16%, var(--lx-dark)); }
[data-direction="practice-chart"][data-theme="system"] .lx-chart-item[open] .lx-chart-name { color: color-mix(in srgb, var(--lx-accent) 45%, #ffffff); }
[data-direction="practice-chart"][data-theme="system"] .lx-clinic-horizon .lx-hero-media .lx-img { filter: grayscale(.4) brightness(.7) contrast(1.05); }
}