/* =====================================================================
   Douexa — Design Lab page (isolated page styles, "dl-" prefix)
   Local CSS vars remap automatically to the active site theme, same
   pattern as assets/css/pages/pricing.css.
   ===================================================================== */

.dl-page {
  --dl-bg: rgba(7, 11, 24, .72);
  --dl-surface: rgba(14, 20, 38, .72);
  --dl-surface-2: rgba(19, 28, 51, .82);
  --dl-line: rgba(148, 163, 184, .16);
  --dl-text: #f7f9ff;
  --dl-muted: #aab6cc;
  --dl-cyan: #20d4f4;
  --dl-blue: #4775ff;
  --dl-violet: #8b5cf6;
  --dl-green: #34d399;
  position: relative;
  color: var(--dl-text);
}
html[data-theme="light"] .dl-page {
  --dl-bg: rgba(247, 249, 255, .86);
  --dl-surface: rgba(255, 255, 255, .82);
  --dl-surface-2: rgba(244, 247, 255, .95);
  --dl-line: rgba(30, 41, 59, .11);
  --dl-text: #101828;
  --dl-muted: #596780;
}
.dl-page * { box-sizing: border-box; }
.dl-shell { width: min(1220px, calc(100% - 40px)); margin-inline: auto; }
.dl-eyebrow { display: inline-block; color: var(--dl-cyan); font-size: 12px; letter-spacing: .12em; font-weight: 600; }

/* Inline SVG icons — rendered by design-lab.js's icon() helper */
.dl-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; }
.dl-inline-icon { display: inline-flex; width: 15px; height: 15px; }
.dl-inline-icon .dl-icon { width: 100%; height: 100%; }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.dl-hero { padding: 150px 0 80px; position: relative; border-bottom: 1px solid var(--dl-line); }
.dl-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 60px; align-items: center; }
.dl-breadcrumb { display: flex; gap: 9px; color: var(--dl-muted); font-size: 12px; margin-bottom: 30px; }
.dl-breadcrumb a { color: inherit; text-decoration: none; }
.dl-hero h1 { font-size: clamp(38px, 5.2vw, 64px); line-height: 1.03; letter-spacing: -.045em; margin: 16px 0 22px; max-width: 720px; }
.dl-hero__lead { font-size: 17px; line-height: 1.7; color: var(--dl-muted); max-width: 580px; }
.dl-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0; align-items: center; }
.dl-hero__actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.dl-hero__trust { display: flex; flex-wrap: wrap; gap: 10px; }
.dl-hero__trust span { padding: 8px 11px; border: 1px solid var(--dl-line); border-radius: 999px; color: var(--dl-muted); font-size: 12px; background: var(--dl-surface); }

.dl-hero__hint { display: grid; gap: 16px; }
.dl-hint-card { border: 1px solid var(--dl-line); border-radius: 20px; background: var(--dl-surface); padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.dl-hint-card span.mono { font-size: 10px; color: var(--dl-cyan); letter-spacing: .1em; }
.dl-hint-swatches { display: flex; gap: 6px; }
.dl-hint-swatches i { width: 20px; height: 20px; border-radius: 6px; display: block; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.dl-hint-card--font strong { font-size: 26px; }
.dl-hint-dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--dl-blue), var(--dl-cyan)); animation: dl-hint-pulse 1.6s ease-in-out infinite; }
@keyframes dl-hint-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .35; } }

/* ---------------------------------------------------------------------
   Section shell
   --------------------------------------------------------------------- */
.dl-lab-section { padding: 100px 0 130px; }
.dl-section-head { max-width: 720px; margin-bottom: 40px; }
.dl-section-head h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: -.03em; margin: 14px 0 14px; }
.dl-section-head p { color: var(--dl-muted); font-size: 16px; line-height: 1.7; margin: 0; }

.dl-alert { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--dl-line); background: var(--dl-surface); margin-bottom: 30px; }
.dl-alert span[aria-hidden] { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 700; }
.dl-alert--success span[aria-hidden] { background: rgba(52, 211, 153, .15); color: var(--dl-green); }
.dl-alert--error span[aria-hidden] { background: rgba(248, 113, 113, .15); color: #f87171; }
.dl-alert strong { display: block; margin-bottom: 4px; }
.dl-alert p, .dl-alert ul { margin: 0; color: var(--dl-muted); font-size: 13.5px; line-height: 1.6; }
.dl-alert ul { padding-left: 18px; }

/* ---------------------------------------------------------------------
   Lab grid: controls (left) + sticky live preview (right)
   --------------------------------------------------------------------- */
.dl-lab { display: grid; grid-template-columns: minmax(300px, 30%) minmax(0, 70%); gap: 24px; align-items: start; }
.dl-lab__controls { position: sticky; top: 92px; max-height: calc(100vh - 112px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 24px; border: 1px solid var(--dl-line); border-radius: 24px; background: var(--dl-surface); }
.dl-lab__controls::-webkit-scrollbar { width: 8px; }
.dl-lab__controls::-webkit-scrollbar-thumb { background: rgba(146,160,189,.25); border-radius: 999px; }

/* AI assist box */
.dl-ai { border: 1px solid rgba(32, 212, 244, .3); border-radius: 22px; background: linear-gradient(160deg, rgba(32, 212, 244, .07), transparent 60%), var(--dl-surface-2); padding: 26px; margin-bottom: 38px; }
.dl-ai__head h3 { font-size: 19px; margin: 10px 0 8px; }
.dl-ai__head p { color: var(--dl-muted); font-size: 13.5px; line-height: 1.6; margin: 0 0 18px; }
.dl-ai__form { display: flex; gap: 10px; flex-wrap: wrap; }
.dl-ai__form textarea { flex: 1; min-width: 220px; resize: vertical; min-height: 52px; max-height: 140px; border: 1px solid var(--dl-line); border-radius: 14px; background: rgba(255, 255, 255, .025); color: var(--dl-text); padding: 13px 15px; font: inherit; outline: none; transition: border-color .2s, box-shadow .2s; }
.dl-ai__form textarea:focus { border-color: var(--dl-cyan); box-shadow: 0 0 0 4px rgba(32, 212, 244, .1); }
.dl-ai__form .btn { flex-shrink: 0; align-self: flex-end; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.dl-ai__btn-loading { display: inline-flex; align-items: center; gap: 4px; }
.dl-ai__btn-loading i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: dl-dot 1s infinite ease-in-out; }
.dl-ai__btn-loading i:nth-child(2) { animation-delay: .15s; }
.dl-ai__btn-loading i:nth-child(3) { animation-delay: .3s; }
@keyframes dl-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.dl-ai__result { margin-top: 18px; }
.dl-ai__bubble { border: 1px solid var(--dl-line); border-radius: 16px; background: rgba(255, 255, 255, .03); padding: 14px 16px; }
.dl-ai__result-title { color: var(--dl-cyan); font-size: 10px; }
.dl-ai__bubble p { margin: 8px 0; font-size: 13.5px; line-height: 1.6; }
.dl-ai__applied { display: inline-block; font-size: 11.5px; color: var(--dl-green); font-weight: 600; }

/* Step fieldsets */
.dl-step { border: 0; padding: 0; margin: 0 0 40px; }
.dl-step:last-child { margin-bottom: 0; }
.dl-step legend { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 700; margin-bottom: 10px; padding: 0; }
.dl-step legend em { font-style: normal; color: var(--dl-muted); font-size: 12px; font-weight: 500; }
.dl-step legend span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(32, 212, 244, .1); color: var(--dl-cyan); font: 11px 'JetBrains Mono', monospace; flex-shrink: 0; }
.dl-step__note { color: var(--dl-muted); font-size: 12.5px; line-height: 1.6; margin: 0 0 14px; }
.dl-step__note--spaced { margin-top: 22px; }

/* Website type grid */
.dl-platform-grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
.dl-platform-card { width: 100%; border: 1px solid var(--dl-line); border-radius: 14px; padding: 14px; text-align: left; cursor: pointer; background: rgba(255,255,255,.02); color: var(--dl-text); font: inherit; transition: .2s; }
.dl-platform-card strong { display: block; font-size: 13px; margin-bottom: 4px; }
.dl-platform-card small { display: block; color: var(--dl-muted); font-size: 11px; line-height: 1.45; }
.dl-platform-card:hover, .dl-platform-card.is-active { border-color: rgba(32,212,244,.6); background: rgba(32,212,244,.08); transform: translateY(-1px); }
.dl-type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dl-type-card { border: 1px solid var(--dl-line); border-radius: 16px; background: rgba(255, 255, 255, .02); padding: 16px 14px; text-align: left; cursor: pointer; color: var(--dl-text); display: flex; flex-direction: column; gap: 12px; transition: border-color .2s, background .2s, transform .2s; font: inherit; }
.dl-type-card:hover { transform: translateY(-2px); border-color: rgba(32, 212, 244, .4); }
.dl-type-card.is-active { border-color: rgba(32, 212, 244, .6); background: rgba(32, 212, 244, .08); box-shadow: inset 0 0 0 1px rgba(32, 212, 244, .1); }
.dl-type-card__icon { width: 22px; height: 22px; color: var(--dl-cyan); }
.dl-type-card__icon .dl-icon { width: 100%; height: 100%; }
.dl-type-card strong { font-size: 13px; line-height: 1.3; }

/* Design style grid */
.dl-style-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dl-style-card { border: 1px solid var(--dl-line); border-radius: 16px; background: rgba(255, 255, 255, .02); padding: 15px 14px; text-align: left; cursor: pointer; color: var(--dl-text); display: flex; align-items: flex-start; gap: 12px; transition: border-color .2s, background .2s, transform .2s; font: inherit; }
.dl-style-card:hover { transform: translateY(-2px); border-color: rgba(32, 212, 244, .4); }
.dl-style-card.is-active { border-color: rgba(32, 212, 244, .6); background: rgba(32, 212, 244, .08); box-shadow: inset 0 0 0 1px rgba(32, 212, 244, .1); }
.dl-style-card__icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--dl-cyan); }
.dl-style-card__icon .dl-icon { width: 100%; height: 100%; }
.dl-style-card strong { display: block; font-size: 12.5px; margin-bottom: 3px; }
.dl-style-card small { display: block; font-size: 10.5px; color: var(--dl-muted); line-height: 1.4; }

/* Palette toolbar + grid */
.dl-palette-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.dl-chip-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--dl-line); border-radius: 999px; padding: 9px 15px; background: var(--dl-surface); color: var(--dl-muted); font-size: 12px; cursor: pointer; font-family: inherit; transition: .2s; }
.dl-chip-btn:hover { color: var(--dl-text); border-color: rgba(32, 212, 244, .4); }
.dl-chip-btn[aria-pressed="true"] { color: #07111d; background: var(--dl-cyan); border-color: var(--dl-cyan); }
.dl-palette-count { margin-left: auto; font-size: 10px; color: var(--dl-muted); letter-spacing: .06em; }

.dl-palette-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-height: 360px; overflow-y: auto; padding-right: 4px; }
.dl-palette-grid::-webkit-scrollbar { width: 6px; }
.dl-palette-grid::-webkit-scrollbar-thumb { background: var(--dl-line); border-radius: 999px; }
.dl-palette-card { border: 1px solid var(--dl-line); border-radius: 16px; overflow: hidden; cursor: pointer; background: var(--dl-surface); transition: transform .2s, border-color .2s; text-align: left; font: inherit; color: var(--dl-text); padding: 0; }
.dl-palette-card:hover { transform: translateY(-2px); }
.dl-palette-card.is-active { border-color: rgba(32, 212, 244, .6); box-shadow: 0 0 0 1px rgba(32, 212, 244, .3); }
.dl-palette-card__swatches { display: flex; height: 44px; }
.dl-palette-card__swatches i { flex: 1; display: block; }
.dl-palette-card__name { display: block; padding: 9px 11px; font-size: 11.5px; font-weight: 600; }

/* Redesigned custom color panel — no bare native color-input icons */
.dl-custom-colors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 16px; padding-top: 18px; border-top: 1px dashed var(--dl-line); }
.dl-swatch-field { display: flex; flex-direction: column; gap: 8px; }
.dl-swatch-field > span { font-size: 11px; color: var(--dl-muted); font-weight: 600; }
.dl-swatch-input { display: flex; flex-direction: column; gap: 6px; }
.dl-swatch-color { position: relative; display: block; width: 100%; height: 40px; border-radius: 10px; border: 1px solid var(--dl-line); overflow: hidden; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.dl-swatch-color input[type="color"] { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); border: 0; padding: 0; margin: 0; cursor: pointer; opacity: 0; }
.dl-swatch-hex { width: 100%; border: 1px solid var(--dl-line); border-radius: 8px; background: rgba(255,255,255,.025); color: var(--dl-text); padding: 7px 9px; font: 11px 'JetBrains Mono', monospace; text-transform: uppercase; outline: none; }
.dl-swatch-hex:focus { border-color: var(--dl-cyan); }

/* Font grid */
.dl-font-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dl-font-card { border: 1px solid var(--dl-line); border-radius: 16px; padding: 16px; text-align: left; cursor: pointer; background: rgba(255, 255, 255, .02); color: var(--dl-text); transition: border-color .2s, transform .2s; font: inherit; }
.dl-font-card:hover { transform: translateY(-2px); border-color: rgba(32, 212, 244, .4); }
.dl-font-card.is-active { border-color: rgba(32, 212, 244, .6); background: rgba(32, 212, 244, .08); }
.dl-font-card__sample { font-size: 22px; line-height: 1.2; margin-bottom: 6px; }
.dl-font-card__body { font-size: 12.5px; color: var(--dl-muted); margin-bottom: 8px; }
.dl-font-card__name { font-size: 11px; color: var(--dl-cyan); font-family: 'JetBrains Mono', monospace; }

/* Header/footer layout grid — small SVG diagram + label, not screenshots */
.dl-layout-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dl-layout-card { border: 1px solid var(--dl-line); border-radius: 14px; padding: 12px; text-align: left; cursor: pointer; background: rgba(255, 255, 255, .02); color: var(--dl-text); transition: border-color .2s, transform .2s; font: inherit; }
.dl-layout-card:hover { transform: translateY(-2px); border-color: rgba(32, 212, 244, .4); }
.dl-layout-card.is-active { border-color: rgba(32, 212, 244, .6); background: rgba(32, 212, 244, .08); }
.dl-layout-card__diagram { display: block; width: 100%; height: 40px; border: 1px solid var(--dl-line); border-radius: 8px; padding: 5px; margin-bottom: 8px; color: var(--dl-cyan); background: rgba(255,255,255,.02); }
.dl-layout-card__diagram svg { width: 100%; height: 100%; display: block; }
.dl-layout-card strong { font-size: 11px; font-weight: 600; }

/* Theme toggle + motion grid */
.dl-theme-toggle { display: flex; gap: 10px; margin-bottom: 18px; }
.dl-theme-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--dl-line); border-radius: 14px; padding: 13px; background: rgba(255, 255, 255, .02); color: var(--dl-muted); cursor: pointer; font: inherit; font-weight: 600; transition: .2s; }
.dl-theme-btn.is-active { border-color: rgba(32, 212, 244, .6); color: var(--dl-text); background: rgba(32, 212, 244, .08); }

.dl-motion-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dl-motion-card { border: 1px solid var(--dl-line); border-radius: 16px; padding: 15px; text-align: left; cursor: pointer; background: rgba(255, 255, 255, .02); color: var(--dl-text); transition: border-color .2s, transform .2s; font: inherit; }
.dl-motion-card:hover { transform: translateY(-2px); border-color: rgba(32, 212, 244, .4); }
.dl-motion-card.is-active { border-color: rgba(32, 212, 244, .6); background: rgba(32, 212, 244, .08); }
.dl-motion-card strong { display: block; font-size: 13px; margin-bottom: 5px; }
.dl-motion-card small { color: var(--dl-muted); font-size: 11.5px; line-height: 1.5; }

/* Personalize */
.dl-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.dl-field { display: grid; gap: 8px; font-size: 12px; }
.dl-field > span { font-weight: 700; }
.dl-field input, .dl-field select, .dl-field textarea { width: 100%; border: 1px solid var(--dl-line); border-radius: 14px; background: rgba(255, 255, 255, .025); color: var(--dl-text); padding: 13px 15px; font: inherit; outline: none; transition: border-color .2s, box-shadow .2s; }
.dl-field input:focus, .dl-field select:focus, .dl-field textarea:focus { border-color: var(--dl-cyan); box-shadow: 0 0 0 4px rgba(32, 212, 244, .1); }

/* Client-side-only image upload */
.dl-upload__drop { display: flex; align-items: center; gap: 16px; border: 1px dashed var(--dl-line); border-radius: 16px; padding: 18px; }
.dl-upload__icon { width: 30px; height: 30px; color: var(--dl-cyan); flex-shrink: 0; }
.dl-upload__drop strong { display: block; font-size: 13px; margin-bottom: 4px; }
.dl-upload__drop p { margin: 0; font-size: 11.5px; color: var(--dl-muted); line-height: 1.5; }
.dl-upload__btn { flex-shrink: 0; margin-left: auto; white-space: nowrap; font-size: 12px; padding: 10px 16px; cursor: pointer; }
.dl-upload__preview { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.dl-upload__preview img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; border: 1px solid var(--dl-line); }

/* ---------------------------------------------------------------------
   Sticky live preview panel
   --------------------------------------------------------------------- */
.dl-preview { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dl-preview__topbar { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; }
.dl-preview__topbar > span.mono { font-size: 10.5px; color: var(--dl-cyan); letter-spacing: .1em; }
.dl-preview__devices, .dl-preview__actions { display: flex; gap: 8px; }
.dl-preview__devices button, .dl-preview__actions button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--dl-line); border-radius: 10px; background: var(--dl-surface); color: var(--dl-muted); cursor: pointer; transition: .2s; }
.dl-preview__devices button.is-active { color: var(--dl-cyan); border-color: rgba(32,212,244,.55); background: rgba(32,212,244,.08); }
.dl-preview__actions button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--dl-line); border-radius: 999px; background: var(--dl-surface); color: var(--dl-muted); cursor: pointer; transition: .2s; }
.dl-preview__actions button:hover { color: var(--dl-text); border-color: rgba(32, 212, 244, .4); }

/* The demo "browser window" frame */
.dl-frame { width: 100%; margin-inline: auto; transition: width .3s ease; border: 1px solid var(--dl-line); border-radius: 22px; overflow: hidden; background: #0b0e17; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.dl-frame[data-device="tablet"] { width: min(760px, 88%); }
.dl-frame[data-device="mobile"] { width: min(390px, 72%); }
.dl-frame[data-device="mobile"] .dlv-links { display: none; }
.dl-frame[data-device="mobile"] .dlv-cards { grid-template-columns: 1fr; }
.dl-frame[data-device="tablet"] .dlv-cards { grid-template-columns: repeat(2, 1fr); }
.dl-frame__chrome { height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #05070d; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.dl-frame__chrome span { width: 8px; height: 8px; border-radius: 50%; }
.dl-frame__chrome span:nth-child(1) { background: #f87171; }
.dl-frame__chrome span:nth-child(2) { background: #fbbf24; }
.dl-frame__chrome span:nth-child(3) { background: #34d399; }
.dl-frame__url { margin-left: 10px; flex: 1; background: rgba(255, 255, 255, .06); border-radius: 6px; padding: 5px 10px; font-size: 10.5px; color: #92a0bd; font-family: 'JetBrains Mono', monospace; }

.dl-view-demo-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; border: 1px solid var(--dl-line); border-radius: 14px; padding: 13px; background: var(--dl-surface); color: var(--dl-text); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; transition: .2s; }
.dl-view-demo-btn:hover { border-color: rgba(32, 212, 244, .5); background: rgba(32, 212, 244, .06); }

/* Summary + review + save */
.dl-summary { border: 1px solid rgba(32, 212, 244, .3); border-radius: 22px; padding: 22px; background: linear-gradient(160deg, var(--dl-surface-2), var(--dl-bg)); box-shadow: 0 20px 50px rgba(0, 0, 0, .15); }
.dl-summary__label { font-size: 10px; color: var(--dl-cyan); }
.dl-summary__chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 18px; min-height: 26px; }
.dl-summary__chips span { padding: 6px 10px; border-radius: 999px; background: rgba(71, 117, 255, .1); border: 1px solid rgba(71, 117, 255, .22); font-size: 10.5px; color: var(--dl-text); }
.dl-summary__review { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.dl-review-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--dl-line); border-radius: 10px; padding: 10px; background: rgba(255,255,255,.02); color: var(--dl-muted); font: 11.5px inherit; cursor: pointer; transition: .2s; }
.dl-review-btn:hover { color: var(--dl-text); border-color: rgba(32, 212, 244, .4); }
.dl-summary .btn { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 8px; }
.dl-summary__disclaimer { font-size: 10.5px; color: var(--dl-muted); margin: 12px 0 0; line-height: 1.5; }

/* Toast */
.dl-toast { position: fixed; bottom: 26px; right: 26px; z-index: 900; background: #101828; color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 13px; box-shadow: 0 20px 50px rgba(0,0,0,.35); transform: translateY(12px); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease; }
.dl-toast.is-visible { transform: translateY(0); opacity: 1; }

/* =====================================================================
   Live preview render target (mini preview + full demo share this)
   ===================================================================== */
.dl-frame__stage.dl-render { padding: 26px 24px 30px; }
.dl-render {
  background: var(--dlv-bg, #0a0d18);
  color: var(--dlv-text, #f5f7ff);
  --dlv-surface: color-mix(in srgb, var(--dlv-bg, #0a0d18) 90%, var(--dlv-text, #fff) 10%);
  --dlv-line: color-mix(in srgb, var(--dlv-bg, #0a0d18) 78%, var(--dlv-text, #fff) 22%);
  --dlv-muted: color-mix(in srgb, var(--dlv-text, #fff) 62%, var(--dlv-bg, #0a0d18) 38%);
  --dlv-radius: 12px;
  --dlv-shadow: none;
  --dlv-border-w: 1px;
  transition: background-color .4s ease, color .4s ease;
}

.dlv-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 16px; margin-bottom: 22px; border-bottom: var(--dlv-border-w) solid var(--dlv-line); font-family: var(--dlv-heading-font, 'Space Grotesk'), sans-serif; }
.dlv-brand { font-weight: 700; font-size: 15px; }
.dlv-links { display: flex; gap: 14px; font-family: var(--dlv-body-font, 'Inter'), sans-serif; font-size: 11px; color: var(--dlv-muted); }
.dlv-links a { pointer-events: none; }
.dlv-cta { font-family: var(--dlv-body-font, 'Inter'), sans-serif; font-size: 11px; font-weight: 700; padding: 7px 13px; border-radius: var(--dlv-radius); background: var(--dlv-primary, #3d5afe); color: var(--dlv-bg, #0a0d18); box-shadow: var(--dlv-shadow); }

.dlv-hero { text-align: center; padding: 20px 10px 30px; max-width: 480px; margin-inline: auto; }
.dlv-eyebrow { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .1em; color: var(--dlv-secondary, #22d3ee); margin-bottom: 12px; }
.dlv-heading { font-family: var(--dlv-heading-font, 'Space Grotesk'), sans-serif; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 10px; }
.dlv-sub { font-family: var(--dlv-body-font, 'Inter'), sans-serif; font-size: 12.5px; line-height: 1.6; color: var(--dlv-muted); margin: 0 0 20px; }
.dlv-hero-ctas { display: flex; gap: 10px; justify-content: center; font-family: var(--dlv-body-font, 'Inter'), sans-serif; }
.dlv-btn-primary, .dlv-btn-ghost { font-size: 11.5px; font-weight: 700; padding: 9px 16px; border-radius: var(--dlv-radius); transition: transform .2s ease; }
.dlv-btn-primary { background: var(--dlv-primary, #3d5afe); color: var(--dlv-bg, #0a0d18); box-shadow: var(--dlv-shadow); }
.dlv-btn-ghost { border: var(--dlv-border-w) solid var(--dlv-line); color: var(--dlv-text); }

.dlv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }
.dlv-card { border: var(--dlv-border-w) solid var(--dlv-line); border-radius: var(--dlv-radius); padding: 14px 12px; background: var(--dlv-surface); font-family: var(--dlv-body-font, 'Inter'), sans-serif; box-shadow: var(--dlv-shadow); }
.dlv-card i { display: block; width: 22px; height: 22px; border-radius: 7px; margin-bottom: 10px; background: var(--dlv-accent, var(--dlv-secondary, #22d3ee)); }
.dlv-card strong { display: block; font-size: 11.5px; margin-bottom: 4px; }
.dlv-card small { font-size: 10px; color: var(--dlv-muted); line-height: 1.4; }

.dlv-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: var(--dlv-border-w) solid var(--dlv-line); font-family: var(--dlv-body-font, 'Inter'), sans-serif; font-size: 10px; color: var(--dlv-muted); }
.dlv-footer-links { display: flex; gap: 10px; }

/* Motion presets: entrance keyframes + hover feel, applied via [data-motion] on .dl-frame (mini) or .dl-demo (full) */
@keyframes dl-anim-minimal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dl-anim-elegant { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dl-anim-bold { from { opacity: 0; transform: translateY(26px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dl-anim-playful { 0% { opacity: 0; transform: translateY(20px) rotate(-2deg); } 60% { opacity: 1; transform: translateY(-4px) rotate(1deg); } 100% { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes dl-anim-cinematic { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }

[data-motion="minimal"] .dlv-nav, [data-motion="minimal"] .dld-header { animation: dl-anim-minimal .3s ease-out both; }
[data-motion="minimal"] .dlv-hero, [data-motion="minimal"] .dld-hero { animation: dl-anim-minimal .35s ease-out .05s both; }
[data-motion="minimal"] .dlv-card, [data-motion="minimal"] .dld-tile { animation: dl-anim-minimal .3s ease-out both; }
[data-motion="minimal"] .dlv-btn-primary { transition: transform .15s ease; }
[data-motion="minimal"] .dlv-btn-primary:hover { transform: scale(1.03); }

[data-motion="elegant"] .dlv-nav, [data-motion="elegant"] .dld-header { animation: dl-anim-elegant .7s cubic-bezier(.16,.84,.44,1) both; }
[data-motion="elegant"] .dlv-hero, [data-motion="elegant"] .dld-hero { animation: dl-anim-elegant .8s cubic-bezier(.16,.84,.44,1) .1s both; }
[data-motion="elegant"] .dlv-card, [data-motion="elegant"] .dld-tile { animation: dl-anim-elegant .8s cubic-bezier(.16,.84,.44,1) both; }
[data-motion="elegant"] .dlv-btn-primary { transition: transform .35s ease, box-shadow .35s ease; }
[data-motion="elegant"] .dlv-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.25); }

[data-motion="bold"] .dlv-nav, [data-motion="bold"] .dld-header { animation: dl-anim-bold .5s cubic-bezier(.2,.9,.25,1.1) both; }
[data-motion="bold"] .dlv-hero, [data-motion="bold"] .dld-hero { animation: dl-anim-bold .6s cubic-bezier(.2,.9,.25,1.1) .08s both; }
[data-motion="bold"] .dlv-card, [data-motion="bold"] .dld-tile { animation: dl-anim-bold .6s cubic-bezier(.2,.9,.25,1.1) both; }
[data-motion="bold"] .dlv-btn-primary { transition: transform .25s cubic-bezier(.2,.9,.25,1.4); }
[data-motion="bold"] .dlv-btn-primary:hover { transform: scale(1.08) translateY(-2px); }

[data-motion="playful"] .dlv-nav, [data-motion="playful"] .dld-header { animation: dl-anim-playful .6s cubic-bezier(.68,-.55,.27,1.55) both; }
[data-motion="playful"] .dlv-hero, [data-motion="playful"] .dld-hero { animation: dl-anim-playful .7s cubic-bezier(.68,-.55,.27,1.55) .08s both; }
[data-motion="playful"] .dlv-card, [data-motion="playful"] .dld-tile { animation: dl-anim-playful .7s cubic-bezier(.68,-.55,.27,1.55) both; }
[data-motion="playful"] .dlv-btn-primary { transition: transform .3s cubic-bezier(.68,-.55,.27,1.55); }
[data-motion="playful"] .dlv-btn-primary:hover { transform: rotate(-2deg) scale(1.06); }

[data-motion="cinematic"] .dlv-nav, [data-motion="cinematic"] .dld-header { animation: dl-anim-cinematic 1s cubic-bezier(.22,1,.36,1) both; }
[data-motion="cinematic"] .dlv-hero, [data-motion="cinematic"] .dld-hero { animation: dl-anim-cinematic 1.1s cubic-bezier(.22,1,.36,1) .15s both; }
[data-motion="cinematic"] .dlv-card, [data-motion="cinematic"] .dld-tile { animation: dl-anim-cinematic 1.1s cubic-bezier(.22,1,.36,1) both; }
[data-motion="cinematic"] .dlv-btn-primary { transition: transform .6s cubic-bezier(.22,1,.36,1); }
[data-motion="cinematic"] .dlv-btn-primary:hover { transform: scale(1.05); }

.dl-frame.is-replaying .dlv-nav, .dl-frame.is-replaying .dlv-hero, .dl-frame.is-replaying .dlv-card { animation: none !important; }
.dl-demo.is-replaying .dld-header, .dl-demo.is-replaying .dld-hero, .dl-demo.is-replaying .dld-tile { animation: none !important; }

/* stagger cards/tiles a little regardless of style */
.dlv-cards .dlv-card:nth-child(2), .dld-features .dld-tile:nth-child(2), .dld-gallery .dld-tile:nth-child(2) { animation-delay: .08s; }
.dlv-cards .dlv-card:nth-child(3), .dld-features .dld-tile:nth-child(3), .dld-gallery .dld-tile:nth-child(3) { animation-delay: .16s; }
.dld-features .dld-tile:nth-child(4), .dld-gallery .dld-tile:nth-child(4) { animation-delay: .24s; }
.dld-features .dld-tile:nth-child(5), .dld-gallery .dld-tile:nth-child(5) { animation-delay: .32s; }
.dld-features .dld-tile:nth-child(6), .dld-gallery .dld-tile:nth-child(6) { animation-delay: .4s; }

/* =====================================================================
   Design styles — 12 distinct visual treatments applied via [data-style]
   on any .dl-render element (mini preview stage or full demo frame).
   ===================================================================== */

/* 1. Glassmorphism */
.dl-render[data-style="glassmorphism"] { --dlv-radius: 18px; }
.dl-render[data-style="glassmorphism"] .dlv-card,
.dl-render[data-style="glassmorphism"] .dld-tile,
.dl-render[data-style="glassmorphism"] .dld-testimonial,
.dl-render[data-style="glassmorphism"] .dld-cta { background: color-mix(in srgb, var(--dlv-surface) 55%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid color-mix(in srgb, var(--dlv-text) 18%, transparent); }
.dl-render[data-style="glassmorphism"] .dlv-nav { background: color-mix(in srgb, var(--dlv-surface) 45%, transparent); backdrop-filter: blur(10px); margin: -10px -14px 22px; padding: 14px; border-radius: 16px; border-bottom: 0; }

/* 2. Classic / Corporate */
.dl-render[data-style="corporate"] { --dlv-radius: 4px; --dlv-shadow: none; }
.dl-render[data-style="corporate"] .dlv-card, .dl-render[data-style="corporate"] .dld-tile { border-width: 1px; box-shadow: none; }
.dl-render[data-style="corporate"] .dlv-heading, .dl-render[data-style="corporate"] .dld-hero h1 { letter-spacing: -.005em; }
.dl-render[data-style="corporate"] .dlv-btn-primary, .dl-render[data-style="corporate"] .dld-cta .dlv-btn-primary { border-radius: 3px; }

/* 3. Minimalism */
.dl-render[data-style="minimalism"] { --dlv-radius: 0px; --dlv-shadow: none; --dlv-border-w: 1px; }
.dl-render[data-style="minimalism"] .dlv-card, .dl-render[data-style="minimalism"] .dld-tile { background: transparent; }
.dl-render[data-style="minimalism"] .dlv-card i { display: none; }
.dl-render[data-style="minimalism"] .dlv-eyebrow, .dl-render[data-style="minimalism"] .dld-eyebrow { display: none; }

/* 4. Bento Box UI */
.dl-render[data-style="bento"] { --dlv-radius: 20px; }
.dl-render[data-style="bento"] .dlv-cards, .dl-render[data-style="bento"] .dld-features { gap: 12px; }
.dl-render[data-style="bento"] .dlv-cards .dlv-card:first-child, .dl-render[data-style="bento"] .dld-features .dld-tile:first-child { grid-column: span 2; }
.dl-render[data-style="bento"] .dlv-card, .dl-render[data-style="bento"] .dld-tile { background: color-mix(in srgb, var(--dlv-primary) 10%, var(--dlv-surface)); border: 0; }

/* 5. Neumorphism */
.dl-render[data-style="neumorphism"] { --dlv-radius: 20px; --dlv-border-w: 0px; }
.dl-render[data-style="neumorphism"] .dlv-card, .dl-render[data-style="neumorphism"] .dld-tile, .dl-render[data-style="neumorphism"] .dld-testimonial { background: var(--dlv-bg); border: 0; box-shadow: 8px 8px 16px color-mix(in srgb, var(--dlv-bg) 70%, black), -8px -8px 16px color-mix(in srgb, var(--dlv-bg) 82%, white); }
.dl-render[data-style="neumorphism"] .dlv-btn-primary { box-shadow: 4px 4px 10px color-mix(in srgb, var(--dlv-bg) 70%, black), -4px -4px 10px color-mix(in srgb, var(--dlv-bg) 82%, white); }

/* 6. Neo-Brutalism */
.dl-render[data-style="neobrutalism"] { --dlv-radius: 10px; --dlv-border-w: 2.5px; }
.dl-render[data-style="neobrutalism"] .dlv-card, .dl-render[data-style="neobrutalism"] .dld-tile, .dl-render[data-style="neobrutalism"] .dlv-btn-primary, .dl-render[data-style="neobrutalism"] .dld-testimonial { border: 2.5px solid var(--dlv-text); box-shadow: 5px 5px 0 var(--dlv-text); }
.dl-render[data-style="neobrutalism"] .dlv-card:hover, .dl-render[data-style="neobrutalism"] .dld-tile:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--dlv-text); }

/* 7. Dark UI */
.dl-render[data-style="dark-ui"] { --dlv-radius: 14px; }
.dl-render[data-style="dark-ui"].dl-render { background: #06070c !important; color: #f2f4ff !important; }
.dl-render[data-style="dark-ui"] .dlv-card, .dl-render[data-style="dark-ui"] .dld-tile { background: #0d0f18; border-color: rgba(255,255,255,.08); box-shadow: 0 0 24px -8px var(--dlv-primary); }
.dl-render[data-style="dark-ui"] .dlv-eyebrow, .dl-render[data-style="dark-ui"] .dld-eyebrow { text-shadow: 0 0 12px var(--dlv-secondary); }

/* 8. Brutalism (raw) */
.dl-render[data-style="brutalism"] { --dlv-radius: 0px; --dlv-shadow: none; --dlv-border-w: 2px; }
.dl-render[data-style="brutalism"], .dl-render[data-style="brutalism"] * { font-family: 'JetBrains Mono', monospace !important; }
.dl-render[data-style="brutalism"] .dlv-card, .dl-render[data-style="brutalism"] .dld-tile { background: transparent; border: 2px solid var(--dlv-text); }
.dl-render[data-style="brutalism"] .dlv-btn-primary, .dl-render[data-style="brutalism"] .dld-cta .dlv-btn-primary { border-radius: 0; border: 2px solid var(--dlv-text); }
.dl-render[data-style="brutalism"] .dlv-heading, .dl-render[data-style="brutalism"] .dld-hero h1 { text-transform: uppercase; }

/* 9. Maximalism */
.dl-render[data-style="maximalism"] { --dlv-radius: 22px; }
.dl-render[data-style="maximalism"] .dlv-nav, .dl-render[data-style="maximalism"] .dld-header { background: linear-gradient(120deg, color-mix(in srgb, var(--dlv-primary) 20%, transparent), color-mix(in srgb, var(--dlv-accent) 20%, transparent)); border-radius: 16px; padding: 12px 16px; border-bottom: 0; margin-bottom: 22px; }
.dl-render[data-style="maximalism"] .dlv-card, .dl-render[data-style="maximalism"] .dld-tile { background: linear-gradient(140deg, color-mix(in srgb, var(--dlv-primary) 16%, var(--dlv-surface)), color-mix(in srgb, var(--dlv-accent) 14%, var(--dlv-surface))); border: 0; }
.dl-render[data-style="maximalism"] .dlv-heading, .dl-render[data-style="maximalism"] .dld-hero h1 { background: linear-gradient(120deg, var(--dlv-primary), var(--dlv-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 10. Skeuomorphism */
.dl-render[data-style="skeuomorphism"] { --dlv-radius: 12px; }
.dl-render[data-style="skeuomorphism"] .dlv-btn-primary, .dl-render[data-style="skeuomorphism"] .dld-cta .dlv-btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--dlv-primary) 85%, white), var(--dlv-primary)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 6px rgba(0,0,0,.35); border: 1px solid color-mix(in srgb, var(--dlv-primary) 60%, black); }
.dl-render[data-style="skeuomorphism"] .dlv-card, .dl-render[data-style="skeuomorphism"] .dld-tile { background: linear-gradient(180deg, color-mix(in srgb, var(--dlv-surface) 90%, white), var(--dlv-surface)); box-shadow: 0 4px 10px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.15); }

/* 11. Typographic */
.dl-render[data-style="typographic"] .dlv-heading, .dl-render[data-style="typographic"] .dld-hero h1 { font-size: 40px !important; text-transform: uppercase; letter-spacing: -.03em; }
.dl-render[data-style="typographic"] .dlv-eyebrow, .dl-render[data-style="typographic"] .dld-eyebrow { font-size: 12px; letter-spacing: .2em; }
.dl-render[data-style="typographic"] .dlv-card i, .dl-render[data-style="typographic"] .dld-tile i { display: none; }
.dl-render[data-style="typographic"] .dlv-card, .dl-render[data-style="typographic"] .dld-tile { border: 0; border-top: 2px solid var(--dlv-text); border-radius: 0; background: transparent; padding-top: 14px; }

/* 12. Retro / Y2K */
.dl-render[data-style="retro"] { --dlv-radius: 24px; }
.dl-render[data-style="retro"].dl-render { background: linear-gradient(160deg, var(--dlv-bg), color-mix(in srgb, var(--dlv-primary) 18%, var(--dlv-bg))) !important; }
.dl-render[data-style="retro"] .dlv-btn-primary, .dl-render[data-style="retro"] .dld-cta .dlv-btn-primary { background: linear-gradient(90deg, var(--dlv-primary), var(--dlv-accent)); border-radius: 999px; }
.dl-render[data-style="retro"] .dlv-card, .dl-render[data-style="retro"] .dld-tile { border-radius: 999px 24px 24px 24px; border: 2px dashed color-mix(in srgb, var(--dlv-primary) 50%, var(--dlv-text)); }

/* ---------------------------------------------------------------------
   Full-page demo content (only rendered inside .dl-demo__frame)
   --------------------------------------------------------------------- */
.dld-header { display: flex; align-items: center; justify-content: space-between; padding: 20px clamp(20px, 4vw, 56px); border-bottom: 1px solid var(--dlv-line); font-family: var(--dlv-heading-font), sans-serif; }
.dld-header .dlv-links { font-size: 13px; gap: 26px; }
.dld-header--centered { flex-direction: column; gap: 14px; text-align: center; }
.dld-header--centered .dlv-links { order: 2; }
.dld-header--bar { background: var(--dlv-primary); color: var(--dlv-bg); }
.dld-header--bar .dlv-links { color: color-mix(in srgb, var(--dlv-bg) 70%, transparent); }
.dld-header--bar .dlv-cta { background: var(--dlv-bg); color: var(--dlv-primary); }
.dld-header--stacked .dlv-links { display: none; }
.dld-header--stacked .dlv-cta { padding: 8px 10px; }

.dld-hero { text-align: center; padding: clamp(60px, 10vw, 120px) clamp(20px, 6vw, 56px); max-width: 760px; margin-inline: auto; }
.dld-eyebrow { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .16em; color: var(--dlv-secondary); margin-bottom: 18px; }
.dld-hero h1 { font-family: var(--dlv-heading-font), sans-serif; font-size: clamp(32px, 5vw, 58px); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 18px; }
.dld-hero p { font-family: var(--dlv-body-font), sans-serif; font-size: 16px; line-height: 1.7; color: var(--dlv-muted); margin: 0 0 30px; }
.dld-hero .dlv-hero-ctas { justify-content: center; }
.dld-hero .dlv-btn-primary, .dld-hero .dlv-btn-ghost { font-size: 13.5px; padding: 13px 24px; }
.dld-hero-media { margin-top: 40px; border-radius: var(--dlv-radius); overflow: hidden; border: 1px solid var(--dlv-line); aspect-ratio: 16/7; background: var(--dlv-surface); display: flex; align-items: center; justify-content: center; }
.dld-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dld-hero-media .dl-icon { width: 42px; height: 42px; color: var(--dlv-muted); }

.dld-logostrip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(24px, 5vw, 56px); padding: 34px clamp(20px, 6vw, 56px); border-top: 1px solid var(--dlv-line); border-bottom: 1px solid var(--dlv-line); font-family: var(--dlv-body-font), sans-serif; }
.dld-logostrip span { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--dlv-muted); opacity: .7; }

.dld-section { padding: clamp(50px, 8vw, 100px) clamp(20px, 6vw, 56px); }
.dld-section__head { max-width: 560px; margin: 0 auto 40px; text-align: center; }
.dld-section__head span { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; color: var(--dlv-secondary); margin-bottom: 12px; }
.dld-section__head h2 { font-family: var(--dlv-heading-font), sans-serif; font-size: clamp(24px, 3.4vw, 38px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 10px; }
.dld-section__head p { font-family: var(--dlv-body-font), sans-serif; color: var(--dlv-muted); font-size: 14px; line-height: 1.65; margin: 0; }

.dld-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dld-tile { font-family: var(--dlv-body-font), sans-serif; }
.dld-features .dld-tile { border: var(--dlv-border-w) solid var(--dlv-line); border-radius: var(--dlv-radius); background: var(--dlv-surface); padding: 24px; box-shadow: var(--dlv-shadow); }
.dld-tile i.dld-tile-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--dlv-accent); color: var(--dlv-bg); margin-bottom: 16px; }
.dld-tile i.dld-tile-icon .dl-icon { width: 20px; height: 20px; }
.dld-tile h3 { font-size: 16px; margin: 0 0 8px; }
.dld-tile p { font-size: 13px; line-height: 1.6; color: var(--dlv-muted); margin: 0; }

.dld-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dld-gallery .dld-tile { aspect-ratio: 4/3; border-radius: var(--dlv-radius); overflow: hidden; border: var(--dlv-border-w) solid var(--dlv-line); background: linear-gradient(140deg, color-mix(in srgb, var(--dlv-primary) 30%, var(--dlv-surface)), color-mix(in srgb, var(--dlv-secondary) 24%, var(--dlv-surface))); display: flex; align-items: center; justify-content: center; position: relative; padding: 0; }
.dld-gallery .dld-tile img { width: 100%; height: 100%; object-fit: cover; }
.dld-gallery .dld-tile .dl-icon { width: 26px; height: 26px; color: color-mix(in srgb, var(--dlv-text) 55%, transparent); }
.dld-gallery .dld-tile span { position: absolute; bottom: 10px; left: 12px; font-size: 10.5px; font-family: var(--dlv-body-font), sans-serif; color: var(--dlv-text); background: color-mix(in srgb, var(--dlv-bg) 55%, transparent); padding: 4px 8px; border-radius: 999px; }

.dld-testimonial { max-width: 680px; margin: 0 auto; text-align: center; border: var(--dlv-border-w) solid var(--dlv-line); border-radius: var(--dlv-radius); background: var(--dlv-surface); padding: clamp(30px, 5vw, 50px); box-shadow: var(--dlv-shadow); }
.dld-testimonial p { font-family: var(--dlv-heading-font), sans-serif; font-size: clamp(18px, 2.4vw, 24px); line-height: 1.5; margin: 0 0 20px; }
.dld-testimonial strong { display: block; font-family: var(--dlv-body-font), sans-serif; font-size: 13px; }
.dld-testimonial small { display: block; font-family: var(--dlv-body-font), sans-serif; font-size: 11.5px; color: var(--dlv-muted); margin-top: 3px; }

.dld-cta { text-align: center; max-width: 640px; margin: 0 auto; border-radius: var(--dlv-radius); background: linear-gradient(150deg, color-mix(in srgb, var(--dlv-primary) 22%, var(--dlv-surface)), var(--dlv-surface)); border: var(--dlv-border-w) solid var(--dlv-line); padding: clamp(36px, 6vw, 60px); box-shadow: var(--dlv-shadow); }
.dld-cta h2 { font-family: var(--dlv-heading-font), sans-serif; font-size: clamp(22px, 3vw, 32px); margin: 0 0 12px; }
.dld-cta p { font-family: var(--dlv-body-font), sans-serif; color: var(--dlv-muted); font-size: 14px; margin: 0 0 24px; }

.dld-footer { border-top: 1px solid var(--dlv-line); padding: 40px clamp(20px, 6vw, 56px) 30px; font-family: var(--dlv-body-font), sans-serif; }
.dld-footer--simple { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--dlv-muted); }
.dld-footer--simple .dlv-brand { font-family: var(--dlv-heading-font), sans-serif; }
.dld-footer--columns { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; }
.dld-footer--columns h4 { font-size: 11px; letter-spacing: .08em; color: var(--dlv-muted); margin: 0 0 14px; }
.dld-footer--columns p, .dld-footer--columns a { display: block; font-size: 12.5px; color: var(--dlv-muted); margin-bottom: 9px; }
.dld-footer--newsletter { text-align: center; }
.dld-footer--newsletter .dld-newsletter-box { max-width: 420px; margin: 0 auto 30px; display: flex; gap: 8px; }
.dld-footer--newsletter input { flex: 1; border: var(--dlv-border-w) solid var(--dlv-line); border-radius: var(--dlv-radius); padding: 11px 14px; background: var(--dlv-surface); color: var(--dlv-text); font: 12.5px inherit; }
.dld-footer--minimal { text-align: center; font-size: 11.5px; color: var(--dlv-muted); }

/* =====================================================================
   Full-page demo overlay
   ===================================================================== */
.dl-demo { position: fixed; inset: 0; z-index: 800; background: #05060b; display: flex; flex-direction: column; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s linear .3s; }
.dl-demo.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s ease; }
.dl-demo__toolbar { flex-shrink: 0; display: flex; align-items: center; gap: 18px; padding: 12px 20px; background: #0b0e17; border-bottom: 1px solid rgba(255,255,255,.08); flex-wrap: wrap; }
.dl-demo__brand { color: #20d4f4; font-size: 11px; letter-spacing: .1em; }
.dl-demo__devices { display: flex; gap: 4px; background: rgba(255,255,255,.05); border-radius: 10px; padding: 4px; }
.dl-demo__devices button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: #9ca8c3; cursor: pointer; }
.dl-demo__devices button.is-active { background: #20d4f4; color: #06101a; }
.dl-demo__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.dl-demo__actions .dl-review-btn { color: #cfd8ea; border-color: rgba(255,255,255,.12); }
.dl-demo__actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.dl-demo__close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: none; color: #fff; cursor: pointer; }
.dl-demo__close:hover { border-color: #20d4f4; color: #20d4f4; }

.dl-demo__scroll { flex: 1; overflow-y: auto; padding: 30px 20px 60px; display: flex; justify-content: center; }
.dl-demo__viewport { width: 100%; max-width: 1400px; transition: max-width .35s ease; }
.dl-demo__viewport[data-device="tablet"] { max-width: 834px; }
.dl-demo__viewport[data-device="mobile"] { max-width: 390px; }
.dl-demo__frame { border-radius: 18px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,.5); }
.dl-demo__viewport[data-device="tablet"] .dl-demo__frame, .dl-demo__viewport[data-device="mobile"] .dl-demo__frame { border: 8px solid #1a1d29; }

/* ---------------------------------------------------------------------
   Save dialog (same behaviour as the pricing brief dialog)
   --------------------------------------------------------------------- */
.dl-dialog { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s linear .3s; }
.dl-dialog.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s ease; }
.dl-dialog__backdrop { position: absolute; inset: 0; background: rgba(4, 6, 14, .7); backdrop-filter: blur(6px); border: 0; cursor: pointer; }
.dl-dialog__panel { position: relative; z-index: 1; width: min(640px, 100%); max-height: 88vh; overflow-y: auto; border: 1px solid var(--dl-line); border-radius: 26px; background: var(--dl-page-bg, #0b0e1a); padding: 30px; box-shadow: 0 40px 100px rgba(0, 0, 0, .5); }
html[data-theme="light"] .dl-dialog__panel { background: #fff; }
.dl-dialog__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 22px; }
.dl-dialog__header h2 { font-size: 22px; margin: 10px 0 8px; }
.dl-dialog__header p { color: var(--dl-muted); font-size: 13px; line-height: 1.55; margin: 0; max-width: 420px; }
.dl-dialog__close { flex-shrink: 0; width: 34px; height: 34px; border: 1px solid var(--dl-line); border-radius: 10px; background: none; color: var(--dl-text); font-size: 18px; cursor: pointer; }
.dl-form__summary { border: 1px solid var(--dl-line); border-radius: 16px; padding: 14px 16px; margin-bottom: 20px; background: rgba(255,255,255,.02); }
.dl-form__summary .mono { font-size: 10px; color: var(--dl-cyan); }
.dl-form__summary strong { display: block; font-size: 15px; margin: 6px 0 4px; }
.dl-form__summary p { margin: 0; font-size: 12.5px; color: var(--dl-muted); line-height: 1.5; }
.dl-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dl-field--full { margin-top: 16px; }
.dl-form-consent { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0; color: var(--dl-muted); font-size: 12px; line-height: 1.5; cursor: pointer; }
.dl-form-consent input { margin-top: 3px; accent-color: var(--dl-cyan); }
.dl-form-consent em { color: var(--dl-cyan); font-style: normal; }
.dl-form__actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 6px; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .dl-lab { grid-template-columns: minmax(280px, 36%) minmax(0, 64%); }
}
@media (max-width: 1080px) {
  .dl-hero__grid { grid-template-columns: 1fr; }
  .dl-hero__hint { display: none; }
  .dl-lab { grid-template-columns: 1fr; }
  .dl-lab__controls { position: relative; top: auto; max-height: none; overflow: visible; }
  .dl-preview { position: relative; top: auto; }
  .dl-preview { position: relative; top: auto; }
}
@media (max-width: 760px) {
  .dl-shell { width: min(100% - 24px, 1220px); }
  .dl-hero { padding: 120px 0 60px; }
  .dl-lab__controls { padding: 22px; }
  .dl-type-grid, .dl-style-grid { grid-template-columns: repeat(2, 1fr); }
  .dl-palette-grid { grid-template-columns: repeat(2, 1fr); max-height: 360px; }
  .dl-font-grid { grid-template-columns: 1fr; }
  .dl-motion-grid, .dl-layout-grid { grid-template-columns: 1fr 1fr; }
  .dl-detail-grid { grid-template-columns: 1fr; }
  .dl-custom-colors { grid-template-columns: repeat(2, 1fr); }
  .dlv-cards, .dld-features, .dld-gallery { grid-template-columns: 1fr; }
  .dld-footer--columns { grid-template-columns: 1fr 1fr; }
  .dlv-links { display: none; }
  .dl-form__grid { grid-template-columns: 1fr; }
  .dl-ai__form { flex-direction: column; align-items: stretch; }
  .dl-ai__form .btn { align-self: stretch; justify-content: center; }
  .dl-upload__drop { flex-direction: column; align-items: flex-start; }
  .dl-upload__btn { margin-left: 0; }
  .dl-summary__review { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .dl-type-grid, .dl-palette-grid, .dl-motion-grid, .dl-layout-grid, .dl-style-grid { grid-template-columns: 1fr 1fr; }
  .dl-custom-colors { grid-template-columns: 1fr 1fr; }
}

.dl-honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important; }


/* =====================================================================
   V4 — WordPress/Shopify-style visual customizer
   ===================================================================== */
.dl-customizer-mode { min-height:100vh; background:#eef1f5; color:#18202b; }
.dl-customizer-mode .dl-hero,
.dl-customizer-mode .dl-section-head { display:none; }
.dl-customizer-bar { height:58px; position:sticky; top:0; z-index:80; display:grid; grid-template-columns:1fr auto auto 1fr; align-items:center; gap:12px; padding:0 16px; border-bottom:1px solid #d7dce3; background:#fff; box-shadow:0 2px 12px rgba(15,23,42,.06); }
.dl-customizer-bar__brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; padding:6px 8px 6px 6px; border-radius:10px; transition:background .2s; }
.dl-customizer-bar__brand:hover { background:rgba(37,99,235,.08); }
.dl-customizer-bar__logo { display:block; height:22px; width:auto; max-width:150px; object-fit:contain; flex-shrink:0; }
.dl-customizer-bar__brand strong { font-size:14px; letter-spacing:.1em; }
.dl-customizer-bar__brand span { font-size:13px; color:#687386; padding-left:12px; border-left:1px solid #d7dce3; }
.dl-customizer-bar__status { display:flex; align-items:center; gap:8px; color:#687386; font-size:12px; }
.dl-customizer-bar__status i { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.12); }
.dl-customizer-bar > .btn { justify-self:end; min-height:38px; padding:9px 16px; }
.dl-customizer-mode .dl-lab-section { padding:0; }
.dl-customizer-mode .dl-shell { width:100%; max-width:none; }
.dl-customizer-mode .dl-lab { display:grid; grid-template-columns:minmax(300px, 30vw) minmax(0,1fr); gap:0; height:calc(100vh - 58px); overflow:hidden; }
.dl-customizer-mode .dl-lab__controls { position:relative; top:auto; max-height:none; height:100%; overflow:auto; padding:0; border:0; border-radius:0; background:#f8f9fb; border-right:1px solid #d7dce3; color:#202936; }
.dl-customizer-mode .dl-ai { margin:0; border:0; border-bottom:1px solid #dfe3e8; border-radius:0; padding:18px; background:#fff; }
.dl-customizer-mode .dl-ai__head h3 { color:#18202b; }
.dl-customizer-mode .dl-ai__head p,
.dl-customizer-mode .dl-step__note { color:#6b7280; }
.dl-customizer-mode .dl-ai__form textarea,
.dl-customizer-mode input[type="text"],
.dl-customizer-mode input[type="email"],
.dl-customizer-mode textarea { background:#fff; color:#111827; border-color:#cfd5dd; }
.dl-customizer-mode .dl-step { margin:0; border-bottom:1px solid #dfe3e8; background:#fff; }
.dl-customizer-mode .dl-step legend { width:100%; margin:0; padding:17px 18px; cursor:pointer; color:#26303e; font-size:14px; background:#fff; position:relative; }
.dl-customizer-mode .dl-step legend::after { content:'›'; position:absolute; right:18px; top:50%; transform:translateY(-50%) rotate(90deg); font-size:22px; color:#667085; transition:.2s; }
.dl-customizer-mode .dl-step.is-collapsed legend::after { transform:translateY(-50%); }
.dl-customizer-mode .dl-step > :not(legend) { margin-left:18px; margin-right:18px; }
.dl-customizer-mode .dl-step > :last-child { margin-bottom:18px; }
.dl-customizer-mode .dl-step.is-collapsed > :not(legend) { display:none !important; }
.dl-customizer-mode .dl-step legend span { width:24px; height:24px; border-radius:6px; background:#edf4ff; color:#2563eb; }
.dl-customizer-mode .dl-platform-card,
.dl-customizer-mode .dl-type-card,
.dl-customizer-mode .dl-style-card,
.dl-customizer-mode .dl-palette-card,
.dl-customizer-mode .dl-font-card,
.dl-customizer-mode .dl-layout-card,
.dl-customizer-mode .dl-motion-card { background:#fff; color:#1f2937; border-color:#d7dce3; }
.dl-customizer-mode .dl-preview { position:relative; top:auto; height:100%; max-height:none; display:flex; flex-direction:column; padding:0; border:0; border-radius:0; background:#e9edf2; overflow:hidden; }
.dl-customizer-mode .dl-preview__topbar { min-height:52px; padding:0 16px; background:#fff; border-bottom:1px solid #d7dce3; display:flex; align-items:center; gap:12px; }
.dl-preview__autosave { font-size:11px; color:#7b8492; margin-right:auto; }
.dl-customizer-mode .dl-frame { flex:1; width:calc(100% - 34px); max-width:none; min-height:0; margin:16px auto 0; border-radius:3px 3px 0 0; box-shadow:0 8px 28px rgba(15,23,42,.15); background:#fff; }
.dl-customizer-mode .dl-frame__stage { height:calc(100% - 36px); min-height:0; overflow:auto; }
.dl-customizer-mode .dl-frame[data-device="tablet"] { width:min(820px, calc(100% - 40px)); }
.dl-customizer-mode .dl-frame[data-device="mobile"] { width:min(390px, calc(100% - 40px)); }
.dl-customizer-mode .dl-view-demo-btn { position:absolute; right:18px; bottom:18px; z-index:4; margin:0; width:auto; background:#111827; color:#fff; border:0; box-shadow:0 8px 24px rgba(15,23,42,.2); }
.dl-customizer-mode .dl-summary { display:none; }
.dl-local-assets { margin:18px; padding:14px; border:1px solid #d7dce3; border-radius:10px; background:#f8fafc; }
.dl-local-assets .dl-field { margin-bottom:12px; }
.dl-local-assets input[type="file"] { width:100%; font-size:12px; color:#4b5563; }
.dl-privacy-note { margin:4px 0 12px; font-size:11px; line-height:1.55; color:#667085; }
.dl-local-assets__actions { display:flex; flex-wrap:wrap; gap:8px; }
.dlv-logo-image { display:block; max-width:145px; max-height:42px; object-fit:contain; }
.dld-gallery img { width:100%; height:100%; min-height:180px; object-fit:cover; display:block; }
@media (max-width:900px) {
  .dl-customizer-bar { grid-template-columns:1fr auto auto; }
  .dl-customizer-bar__status { display:none; }
  .dl-customizer-mode .dl-lab { grid-template-columns:280px minmax(620px,1fr); overflow:auto; }
}
@media (max-width:680px) {
  .dl-customizer-bar__brand span { display:none; }
  .dl-customizer-mode .dl-lab { display:block; height:auto; overflow:visible; }
  .dl-customizer-mode .dl-lab__controls { height:auto; max-height:none; }
  .dl-customizer-mode .dl-preview { height:72vh; position:sticky; bottom:0; z-index:30; border-top:1px solid #d7dce3; }
}


/* =====================================================================
   Design Lab Customizer v3 — professional split workspace
   ===================================================================== */
body:has(#dl-page.dl-customizer-mode) .site-header,
body:has(#dl-page.dl-customizer-mode) .site-footer { display:none !important; }
body:has(#dl-page.dl-customizer-mode) main { padding-top:0 !important; margin-top:0 !important; }
body:has(#dl-page.dl-customizer-mode) { overflow:hidden; background:#eef1f5; }

.dl-customizer-mode { min-height:100vh; background:#eef1f5; color:#172033; }
.dl-customizer-bar { position:relative; height:64px; z-index:100; grid-template-columns:1fr auto auto 1fr; padding:0 20px; box-shadow:none; }
.dl-customizer-bar__brand strong { font-size:15px; color:#101828; }
.dl-customizer-bar__brand span { font-size:13px; }
.dl-customizer-mode .dl-lab { grid-template-columns:320px minmax(0,1fr); height:calc(100vh - 64px); min-height:0; }
.dl-customizer-mode .dl-lab__controls { display:flex; flex-direction:column; background:#f7f8fa; scrollbar-gutter:stable; }
.dl-controls-head { order:-20; padding:22px 20px 18px; background:#fff; border-bottom:1px solid #dde2e8; }
.dl-controls-head__eyebrow { display:block; margin-bottom:7px; font-size:10px; font-weight:800; letter-spacing:.14em; color:#2563eb; }
.dl-controls-head h2 { margin:0 0 7px; font-size:19px; line-height:1.25; color:#172033; }
.dl-controls-head p { margin:0; font-size:12px; line-height:1.55; color:#667085; }
.dl-step[data-step="themes"] { order:-19; }
.dl-step[data-step="platform"] { order:-18; }
.dl-step[data-step="type"] { order:-17; }
.dl-step[data-step="style"] { order:-16; }
.dl-step[data-step="colors"] { order:-15; }
.dl-step[data-step="fonts"] { order:-14; }
.dl-step[data-step="page-details"] { order:-13; }
.dl-step[data-step="layout"] { order:-12; }
.dl-step[data-step="theme"] { order:-11; }
.dl-step[data-step="details"] { order:-10; }
.dl-step[data-step="themes"] { border-bottom-width:6px; border-image:linear-gradient(90deg, var(--dl-blue), var(--dl-violet)) 1; }
.dl-customizer-mode .dl-step legend { padding:16px 18px; font-weight:700; }
.dl-customizer-mode .dl-step legend span { display:inline-flex; align-items:center; justify-content:center; }
.dl-customizer-mode .dl-palette-grid { grid-template-columns:1fr; }
.dl-customizer-mode .dl-palette-card { min-height:68px; }
.dl-customizer-mode .dl-font-grid { grid-template-columns:1fr; }
.dl-customizer-mode .dl-font-card { text-align:left; }

.dl-customizer-mode .dl-preview { background:#e8ebef; }
.dl-customizer-mode .dl-preview__topbar { flex:0 0 58px; min-height:58px; padding:0 18px; box-shadow:0 1px 0 #d7dce3; }
.dl-preview__title { display:flex; flex-direction:column; margin-right:auto; line-height:1.2; }
.dl-preview__title strong { font-size:13px; color:#172033; }
.dl-preview__title span { margin-top:3px; font-size:10px; color:#7b8492; }
.dl-preview__devices { padding:4px; border:1px solid #d8dde5; border-radius:10px; background:#f7f8fa; }
.dl-preview__devices button { width:36px; height:30px; border:0; border-radius:7px; background:transparent; }
.dl-preview__devices button.is-active { background:#fff; color:#2563eb; box-shadow:0 1px 5px rgba(16,24,40,.12); }
.dl-customizer-mode .dl-frame { flex:1; width:calc(100% - 30px); height:calc(100% - 78px); margin:14px auto; border-radius:8px; overflow:hidden; box-shadow:0 12px 38px rgba(16,24,40,.18); transition:width .32s ease, border-radius .32s ease; }
.dl-customizer-mode .dl-frame__chrome { height:36px; }
.dl-customizer-mode .dl-frame__stage { height:calc(100% - 36px); padding:0 0 68px; overflow:auto; scroll-behavior:smooth; font-family:var(--dlv-body-font, 'Inter'),sans-serif; }
.dl-customizer-mode .dl-frame[data-device="desktop"] { width:calc(100% - 30px); }
.dl-customizer-mode .dl-frame[data-device="tablet"] { width:min(820px, calc(100% - 46px)); border-radius:14px; }
.dl-customizer-mode .dl-frame[data-device="mobile"] { width:min(390px, calc(100% - 46px)); border-radius:20px; }
.dl-customizer-mode .dl-frame__stage .dld-page { min-height:100%; }
.dl-customizer-mode .dl-frame__stage .dld-header { position:relative; top:auto; z-index:2; }
.dl-customizer-mode .dl-view-demo-btn { right:26px; bottom:24px; border-radius:10px; }

/* Ensure typography choices affect every preview element immediately. */
.dl-render, .dl-render p, .dl-render a, .dl-render span, .dl-render small, .dl-render input, .dl-render button { font-family:var(--dlv-body-font, 'Inter'), sans-serif; }
.dl-render h1, .dl-render h2, .dl-render h3, .dl-render h4, .dl-render h5, .dl-render h6, .dl-render .dlv-brand, .dl-render strong { font-family:var(--dlv-heading-font, 'Space Grotesk'), sans-serif; }

@media (max-width:1100px) {
  .dl-customizer-mode .dl-lab { grid-template-columns:290px minmax(0,1fr); }
}
@media (max-width:760px) {
  body:has(#dl-page.dl-customizer-mode) { overflow:auto; }
  .dl-customizer-bar { position:sticky; top:0; grid-template-columns:1fr auto; }
  .dl-customizer-bar__status { display:none; }
  .dl-customizer-mode .dl-lab { display:block; height:auto; }
  .dl-customizer-mode .dl-lab__controls { height:auto; }
  .dl-customizer-mode .dl-preview { position:relative; height:74vh; min-height:560px; }
}

/* =====================================================================
   V4 — compact premium workspace, visible site chrome and richer demo
   ===================================================================== */
body:has(#dl-page.dl-customizer-mode) .site-header,
body:has(#dl-page.dl-customizer-mode) .site-footer { display: none !important; }
body:has(#dl-page.dl-customizer-mode) main { padding-top: 0 !important; margin-top: 0 !important; }
body:has(#dl-page.dl-customizer-mode) { overflow: hidden; background:#eef1f5; margin:0 !important; padding:0 !important; }
html:has(#dl-page.dl-customizer-mode) { margin:0 !important; padding:0 !important; }
#dl-page.dl-customizer-mode { margin:0 !important; }
.dl-customizer-mode .dl-lab-section { padding:0 !important; margin:0 !important; }
.dl-customizer-mode .dl-shell { margin-top:0 !important; }

.dl-customizer-bar { position:sticky; top:0; z-index:80; min-height:52px; padding:8px 18px; }
.dl-customizer-mode .dl-lab { grid-template-columns:290px minmax(0,1fr); height:calc(100vh - 52px); min-height:560px; }
.dl-customizer-mode .dl-controls-head { padding:16px 18px 14px; }
.dl-customizer-mode .dl-controls-head h2 { font-size:18px; margin:5px 0 6px; }
.dl-customizer-mode .dl-controls-head p { font-size:11.5px; line-height:1.5; }
.dl-customizer-mode .dl-step legend { padding:12px 15px; font-size:13px; }
.dl-customizer-mode .dl-step legend span { width:24px; height:24px; font-size:10px; }
.dl-customizer-mode .dl-step__note { padding:0 15px; font-size:10.5px; line-height:1.45; }
.dl-customizer-mode .dl-platform-grid,
.dl-customizer-mode .dl-type-grid,
.dl-customizer-mode .dl-style-grid,
.dl-customizer-mode .dl-palette-toolbar,
.dl-customizer-mode .dl-palette-grid,
.dl-customizer-mode .dl-font-grid,
.dl-customizer-mode .dl-layout-grid,
.dl-customizer-mode .dl-theme-toggle,
.dl-customizer-mode .dl-motion-grid,
.dl-customizer-mode .dl-detail-grid,
.dl-customizer-mode .dl-upload,
.dl-customizer-mode .dl-local-assets { margin-left:14px; margin-right:14px; }
.dl-customizer-mode .dl-platform-card,
.dl-customizer-mode .dl-type-card,
.dl-customizer-mode .dl-style-card,
.dl-customizer-mode .dl-font-card,
.dl-customizer-mode .dl-layout-card,
.dl-customizer-mode .dl-motion-card { min-height:auto; padding:10px 11px; border-radius:10px; }
.dl-customizer-mode .dl-platform-card small,
.dl-customizer-mode .dl-style-card small,
.dl-customizer-mode .dl-motion-card small { font-size:9.5px; line-height:1.35; }
.dl-customizer-mode .dl-palette-card { min-height:54px; border-radius:10px; }
.dl-customizer-mode .dl-preview__topbar { flex-basis:50px; min-height:50px; padding:0 14px; }
.dl-customizer-mode .dl-frame-wrap { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; }
.dl-customizer-mode .dl-frame { width:calc(100% - 22px); height:calc(100% - 64px); margin:10px auto; flex:1; }
.dl-customizer-mode .dl-frame[data-device="desktop"] { width:calc(100% - 22px); }
.dl-customizer-mode .dl-view-demo-btn { right:18px; bottom:16px; font-size:11px; padding:9px 12px; }
.dl-customizer-mode .dl-saved-panel { flex-shrink:0; margin:0 10px 10px; padding:10px 12px; border-radius:12px; }
.dl-customizer-mode .dl-saved-panel__head { margin-bottom:8px; }
.dl-customizer-mode .dl-saved-panel__form { margin-bottom:8px; }
.dl-customizer-mode .dl-saved-list { max-height:88px; }

.dl-compact-control { margin:10px 14px 14px; padding:11px; border:1px solid #dde2e9; border-radius:10px; background:#fff; }
.dl-compact-control > span,
.dl-compact-control label { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:10.5px; font-weight:700; color:#344054; margin-bottom:8px; }
.dl-compact-control output { font-size:9.5px; font-weight:600; color:#667085; }
.dl-compact-control input[type="range"] { width:100%; accent-color:#2563eb; }
.dl-segmented { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:3px; border-radius:8px; background:#f2f4f7; }
.dl-segmented button { min-width:0; border:0; border-radius:6px; background:transparent; color:#667085; padding:7px 4px; font-size:9.5px; font-weight:700; cursor:pointer; }
.dl-segmented button.is-active { background:#fff; color:#155eef; box-shadow:0 1px 4px rgba(16,24,40,.12); }

/* richer homepage canvas */
.dl-render { position:relative; isolation:isolate; overflow:hidden; }
.dld-page { position:relative; min-height:100%; overflow:hidden; }
.dld-gridfx { position:absolute; inset:0; pointer-events:none; z-index:-2; opacity:.42; background-image:linear-gradient(var(--dlv-line) 1px,transparent 1px),linear-gradient(90deg,var(--dlv-line) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,#000,transparent 78%); }
.dld-orb { position:absolute; width:320px; aspect-ratio:1; border-radius:50%; filter:blur(70px); opacity:.16; pointer-events:none; z-index:-1; animation:dldFloat 10s ease-in-out infinite alternate; }
.dld-orb--one { top:90px; right:-90px; background:var(--dlv-primary); }
.dld-orb--two { top:460px; left:-130px; background:var(--dlv-secondary); animation-delay:-4s; }
@keyframes dldFloat { to { transform:translate3d(30px,-22px,0) scale(1.08); } }
.dld-header { position:sticky; top:0; z-index:8; backdrop-filter:blur(14px); background:color-mix(in srgb,var(--dlv-bg) 84%,transparent); }
.dld-hero { position:relative; max-width:900px; }
.dld-hero::after { content:""; position:absolute; left:50%; bottom:28px; width:180px; height:1px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,var(--dlv-primary),transparent); }
.dld-hero-media { position:relative; box-shadow:0 30px 80px color-mix(in srgb,var(--dlv-primary) 18%,transparent); transform:perspective(900px) rotateX(2deg); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.dld-hero-media:hover { transform:perspective(900px) rotateX(0) translateY(-5px); }
.dld-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:0 clamp(20px,6vw,56px); border:1px solid var(--dlv-line); border-radius:var(--dlv-radius); overflow:hidden; background:var(--dlv-line); }
.dld-stat { padding:20px; text-align:center; background:var(--dlv-surface); }
.dld-stat strong { display:block; font:700 24px/1 var(--dlv-heading-font),sans-serif; color:var(--dlv-primary); }
.dld-stat span { display:block; margin-top:7px; font:500 10px/1.3 var(--dlv-body-font),sans-serif; color:var(--dlv-muted); text-transform:uppercase; letter-spacing:.1em; }
.dld-tile { transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; }
.dld-tile:hover { transform:translateY(-7px); border-color:color-mix(in srgb,var(--dlv-primary) 45%,var(--dlv-line)); box-shadow:0 20px 48px color-mix(in srgb,var(--dlv-primary) 14%,transparent); }
.dld-gallery .dld-tile:nth-child(2), .dld-gallery .dld-tile:nth-child(5) { transform:translateY(18px); }
.dld-gallery .dld-tile:nth-child(2):hover, .dld-gallery .dld-tile:nth-child(5):hover { transform:translateY(11px); }
.dld-marquee { overflow:hidden; border-block:1px solid var(--dlv-line); background:color-mix(in srgb,var(--dlv-primary) 6%,var(--dlv-bg)); }
.dld-marquee__track { display:flex; width:max-content; gap:44px; padding:13px 0; animation:dldMarquee 24s linear infinite; }
.dld-marquee span { font:700 10px/1 var(--dlv-body-font),sans-serif; letter-spacing:.16em; color:var(--dlv-muted); white-space:nowrap; }
@keyframes dldMarquee { to { transform:translateX(-50%); } }

.dl-render[data-hero-layout="split"] .dld-hero { display:grid; grid-template-columns:1fr 1fr; gap:42px; align-items:center; max-width:1180px; text-align:left; }
.dl-render[data-hero-layout="split"] .dld-hero-copy { min-width:0; }
.dl-render[data-hero-layout="split"] .dld-hero-media { margin-top:0; aspect-ratio:4/5; }
.dl-render[data-hero-layout="split"] .dld-hero .dlv-hero-ctas { justify-content:flex-start; }
.dl-render[data-hero-layout="split"] .dld-hero::after { display:none; }
.dl-render[data-hero-layout="editorial"] .dld-hero { text-align:left; max-width:1080px; }
.dl-render[data-hero-layout="editorial"] .dld-hero h1 { max-width:820px; font-size:clamp(44px,7vw,86px); }
.dl-render[data-hero-layout="editorial"] .dld-hero p { max-width:570px; }
.dl-render[data-hero-layout="editorial"] .dld-hero .dlv-hero-ctas { justify-content:flex-start; }
.dl-render[data-button-shape="square"] { --dlv-button-radius:0px; }
.dl-render[data-button-shape="soft"] { --dlv-button-radius:10px; }
.dl-render[data-button-shape="pill"] { --dlv-button-radius:999px; }
.dl-render .dlv-btn-primary,.dl-render .dlv-btn-ghost,.dl-render .dlv-cta { border-radius:var(--dlv-button-radius,10px) !important; }

@media (max-width:900px) {
  .dl-render[data-hero-layout="split"] .dld-hero { grid-template-columns:1fr; text-align:center; }
  .dl-render[data-hero-layout="split"] .dld-hero .dlv-hero-ctas { justify-content:center; }
  .dld-stats { grid-template-columns:1fr; }
}
.dld-section { padding-top:var(--dld-section-space,76px); padding-bottom:var(--dld-section-space,76px); }

/* =====================================================================
   V5 — Quick-start theme gallery, saved styles panel, undo/redo,
   and general "premium builder" motion polish.
   ===================================================================== */

/* Quick-start themes (step 1) — like a Shopify / WordPress theme picker */
.dl-theme-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.dl-chip-btn--accent { border-color: rgba(139, 92, 246, .35); background: linear-gradient(135deg, rgba(71,117,255,.14), rgba(139,92,246,.14)); color: var(--dl-text); }
.dl-chip-btn--accent:hover { border-color: var(--dl-violet); box-shadow: 0 0 0 4px rgba(139, 92, 246, .12); }
.dl-chip-btn--accent .dl-inline-icon { transition: transform .4s cubic-bezier(.2,.8,.2,1.4); }
.dl-chip-btn--accent:hover .dl-inline-icon { transform: rotate(180deg); }

.dl-theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.dl-theme-card {
  position: relative; text-align: left; cursor: pointer; font: inherit; color: var(--dl-text);
  border: 1px solid var(--dl-line); border-radius: 18px; overflow: hidden; padding: 0;
  background: var(--dl-surface);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, box-shadow .28s ease;
  opacity: 0; transform: translateY(10px);
  animation: dl-theme-card-in .5s cubic-bezier(.2,.8,.2,1) forwards;
}
.dl-theme-grid .dl-theme-card:nth-child(1) { animation-delay: .01s; }
.dl-theme-grid .dl-theme-card:nth-child(2) { animation-delay: .03s; }
.dl-theme-grid .dl-theme-card:nth-child(3) { animation-delay: .05s; }
.dl-theme-grid .dl-theme-card:nth-child(4) { animation-delay: .07s; }
.dl-theme-grid .dl-theme-card:nth-child(5) { animation-delay: .09s; }
.dl-theme-grid .dl-theme-card:nth-child(6) { animation-delay: .11s; }
.dl-theme-grid .dl-theme-card:nth-child(7) { animation-delay: .13s; }
.dl-theme-grid .dl-theme-card:nth-child(8) { animation-delay: .15s; }
.dl-theme-grid .dl-theme-card:nth-child(9) { animation-delay: .17s; }
.dl-theme-grid .dl-theme-card:nth-child(10) { animation-delay: .19s; }
.dl-theme-grid .dl-theme-card:nth-child(n+11) { animation-delay: .2s; }
@keyframes dl-theme-card-in { to { opacity: 1; transform: translateY(0); } }
.dl-theme-card:hover { transform: translateY(-4px); border-color: rgba(32, 212, 244, .55); box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.dl-theme-card.is-active { border-color: var(--dl-cyan); box-shadow: 0 0 0 2px rgba(32,212,244,.35); }
.dl-theme-card.is-applied { animation: dl-theme-card-pulse .7s ease; }
@keyframes dl-theme-card-pulse { 0% { box-shadow: 0 0 0 0 rgba(32,212,244,.5); } 70% { box-shadow: 0 0 0 14px rgba(32,212,244,0); } 100% { box-shadow: 0 0 0 0 rgba(32,212,244,0); } }
.dl-theme-card__thumb { position: relative; display: flex; align-items: flex-end; height: 64px; padding: 8px; overflow: hidden; }
.dl-theme-card__thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 30%); transform: translateX(-120%); transition: transform .6s ease; }
.dl-theme-card:hover .dl-theme-card__thumb::after { transform: translateX(120%); }
.dl-theme-card__badge { position: absolute; top: 8px; left: 8px; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; background: rgba(5, 6, 11, .55); color: #fff; backdrop-filter: blur(4px); }
.dl-theme-card__swatches { display: flex; gap: 4px; }
.dl-theme-card__swatches i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255,255,255,.55); display: block; }
.dl-theme-card__body { display: block; padding: 10px 12px 12px; }
.dl-theme-card__body strong { display: block; font-size: 12.5px; margin-bottom: 3px; }
.dl-theme-card__body small { display: block; font-size: 10px; color: var(--dl-muted); }

/* Undo / redo, customizer bar */
.dl-history-group { display: flex; gap: 6px; }
.dl-history-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--dl-line); border-radius: 9px; background: rgba(255,255,255,.03); color: var(--dl-muted); cursor: pointer; transition: .2s; }
.dl-history-btn:hover:not(:disabled) { color: var(--dl-text); border-color: rgba(32,212,244,.5); background: rgba(32,212,244,.08); }
.dl-history-btn:disabled { opacity: .35; cursor: not-allowed; }

/* My saved styles panel */
.dl-saved-panel { border: 1px solid var(--dl-line); border-radius: 18px; padding: 16px 18px; background: var(--dl-surface); }
.dl-saved-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dl-saved-panel__hint { font-size: 10px; color: var(--dl-muted); }
.dl-saved-panel__form { display: flex; gap: 8px; margin-bottom: 12px; }
.dl-saved-panel__form input { flex: 1; min-width: 0; border: 1px solid var(--dl-line); border-radius: 10px; background: rgba(255,255,255,.025); color: var(--dl-text); padding: 9px 12px; font: inherit; font-size: 12px; outline: none; transition: border-color .2s, box-shadow .2s; }
.dl-saved-panel__form input:focus { border-color: var(--dl-cyan); box-shadow: 0 0 0 4px rgba(32, 212, 244, .1); }
.dl-saved-panel__form .dl-chip-btn { flex-shrink: 0; white-space: nowrap; }
.dl-saved-list { display: flex; flex-direction: column; gap: 6px; max-height: 168px; overflow-y: auto; }
.dl-saved-empty { margin: 0; font-size: 11.5px; color: var(--dl-muted); line-height: 1.6; }
.dl-saved-chip { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 9px; border: 1px solid var(--dl-line); border-radius: 12px; padding: 7px 9px; background: rgba(255,255,255,.02); transition: border-color .2s, background .2s; }
.dl-saved-chip:hover { border-color: rgba(32,212,244,.4); background: rgba(32,212,244,.05); }
.dl-saved-chip__swatches { display: flex; gap: 3px; }
.dl-saved-chip__swatches i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.4); display: block; }
.dl-saved-chip__name { font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-saved-chip button { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 7px; background: transparent; color: var(--dl-muted); cursor: pointer; transition: .2s; }
.dl-saved-chip button:hover { color: var(--dl-cyan); background: rgba(32,212,244,.12); }
.dl-saved-chip button[data-action="delete"]:hover { color: #f87171; background: rgba(248,113,113,.12); }

@media (max-width: 640px) {
  .dl-theme-grid { grid-template-columns: 1fr; }
  .dl-saved-panel__form { flex-direction: column; }
}

/* Compact customizer layout tweaks for the new modules */
.dl-customizer-mode .dl-theme-grid,
.dl-customizer-mode .dl-theme-toolbar,
.dl-customizer-mode .dl-saved-panel { margin-left: 14px; margin-right: 14px; }
.dl-customizer-mode .dl-theme-card__thumb { height: 46px; }
.dl-customizer-mode .dl-theme-card__body { padding: 8px 10px 10px; }
.dl-customizer-mode .dl-theme-card__body strong { font-size: 11px; }
.dl-customizer-mode .dl-theme-card__body small { font-size: 9px; }
.dl-customizer-mode .dl-saved-panel { margin-top: 10px; }

/* =====================================================================
   V6 — type-specific demo content: makes an ecommerce selection look
   like a store, a blog look like a blog, etc. All scoped to .dld-*
   inside the live render target and themed off the --dlv-* tokens.
   ===================================================================== */

/* Ecommerce — product grid */
.dld-shop-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.dld-shop-card { position:relative; border:1px solid var(--dlv-line); border-radius:var(--dlv-radius); overflow:hidden; background:var(--dlv-surface); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.dld-shop-card:hover { transform:translateY(-6px); box-shadow:0 18px 40px color-mix(in srgb,var(--dlv-primary) 16%,transparent); }
.dld-shop-card__badge { position:absolute; top:10px; left:10px; z-index:2; font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.05em; padding:4px 9px; border-radius:999px; background:var(--dlv-primary); color:#fff; }
.dld-shop-card__media { aspect-ratio:1/1; display:grid; place-items:center; background:color-mix(in srgb,var(--dlv-primary) 8%,var(--dlv-bg)); color:var(--dlv-muted); }
.dld-shop-card__media svg { width:28px; height:28px; }
.dld-shop-card__body { padding:13px 14px 15px; }
.dld-shop-card__body strong { display:block; font:600 13px/1.3 var(--dlv-heading-font),sans-serif; margin-bottom:8px; }
.dld-shop-card__row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.dld-shop-card__row > span:first-child { font:700 14px/1 var(--dlv-heading-font),sans-serif; color:var(--dlv-primary); }
.dld-shop-card__cart { font:600 10.5px/1 var(--dlv-body-font),sans-serif; padding:7px 10px; border-radius:var(--dlv-button-radius,8px); border:1px solid var(--dlv-line); color:var(--dlv-text); transition:.2s; }
.dld-shop-card:hover .dld-shop-card__cart { background:var(--dlv-primary); border-color:var(--dlv-primary); color:#fff; }

/* Blog — post list */
.dld-blog-list { display:flex; flex-direction:column; gap:2px; border:1px solid var(--dlv-line); border-radius:var(--dlv-radius); overflow:hidden; }
.dld-blog-post { display:flex; align-items:center; gap:16px; padding:16px 18px; background:var(--dlv-surface); text-decoration:none; color:inherit; border-bottom:1px solid var(--dlv-line); transition:background .2s, padding-left .2s; }
.dld-blog-post:last-child { border-bottom:0; }
.dld-blog-post:hover { background:color-mix(in srgb,var(--dlv-primary) 6%,var(--dlv-surface)); padding-left:24px; }
.dld-blog-post__thumb { flex-shrink:0; width:52px; height:52px; border-radius:calc(var(--dlv-radius) * .5); display:grid; place-items:center; background:color-mix(in srgb,var(--dlv-primary) 10%,var(--dlv-bg)); color:var(--dlv-muted); }
.dld-blog-post__thumb svg { width:20px; height:20px; }
.dld-blog-post__body { display:flex; flex-direction:column; gap:4px; min-width:0; }
.dld-blog-post__date { font:600 9.5px/1 var(--dlv-body-font),sans-serif; letter-spacing:.08em; color:var(--dlv-primary); text-transform:uppercase; }
.dld-blog-post__body strong { font:600 14.5px/1.3 var(--dlv-heading-font),sans-serif; }
.dld-blog-post__more { font:500 11px/1 var(--dlv-body-font),sans-serif; color:var(--dlv-muted); }

/* Restaurant — menu */
.dld-menu-list { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 34px; }
.dld-menu-item__top { display:flex; align-items:baseline; gap:8px; }
.dld-menu-item__top strong { font:600 14.5px/1.3 var(--dlv-heading-font),sans-serif; white-space:nowrap; }
.dld-menu-item__dots { flex:1; border-bottom:1.5px dotted var(--dlv-line); transform:translateY(-3px); }
.dld-menu-item__top > span:last-child { font:700 13px/1 var(--dlv-heading-font),sans-serif; color:var(--dlv-primary); white-space:nowrap; }
.dld-menu-item p { margin:6px 0 0; font-size:12.5px; color:var(--dlv-muted); line-height:1.5; }

/* SaaS — pricing */
.dld-pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.dld-pricing-card { position:relative; border:1px solid var(--dlv-line); border-radius:var(--dlv-radius); background:var(--dlv-surface); padding:24px 20px; display:flex; flex-direction:column; gap:14px; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.dld-pricing-card:hover { transform:translateY(-5px); }
.dld-pricing-card.is-featured { border-color:var(--dlv-primary); box-shadow:0 18px 44px color-mix(in srgb,var(--dlv-primary) 22%,transparent); }
.dld-pricing-card__badge { position:absolute; top:-11px; left:20px; font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.05em; padding:4px 10px; border-radius:999px; background:var(--dlv-primary); color:#fff; }
.dld-pricing-card strong { font:600 15px/1 var(--dlv-heading-font),sans-serif; }
.dld-pricing-card__price { font:700 30px/1 var(--dlv-heading-font),sans-serif; }
.dld-pricing-card__price span { font:500 12px/1 var(--dlv-body-font),sans-serif; color:var(--dlv-muted); margin-left:3px; }
.dld-pricing-card ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; }
.dld-pricing-card ul li { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--dlv-muted); }
.dld-pricing-card ul li svg { width:15px; height:15px; flex-shrink:0; color:var(--dlv-primary); }
.dld-pricing-card .dlv-btn-primary { text-align:center; justify-content:center; }

/* Booking — services + slots */
.dld-booking-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.dld-booking-services { display:flex; flex-direction:column; gap:10px; }
.dld-booking-service { display:flex; align-items:center; gap:10px; padding:13px 15px; border:1px solid var(--dlv-line); border-radius:calc(var(--dlv-radius) * .6); background:var(--dlv-surface); }
.dld-booking-service strong { flex:1; font:600 13px/1.3 var(--dlv-heading-font),sans-serif; }
.dld-booking-service span { font-size:11.5px; color:var(--dlv-muted); }
.dld-booking-service span:last-child { font-weight:700; color:var(--dlv-primary); }
.dld-booking-slots { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; align-content:start; }
.dld-slot { text-align:center; padding:11px 6px; border:1px solid var(--dlv-line); border-radius:calc(var(--dlv-radius) * .5); font:600 11.5px/1 var(--dlv-body-font),sans-serif; color:var(--dlv-text); background:var(--dlv-surface); cursor:default; transition:.2s; }
.dld-slot:hover { border-color:var(--dlv-primary); color:var(--dlv-primary); background:color-mix(in srgb,var(--dlv-primary) 8%,var(--dlv-surface)); }

/* Portfolio — capability tags */
.dld-tags-row { display:flex; flex-wrap:wrap; gap:10px; }
.dld-tags-row span { padding:9px 16px; border-radius:999px; border:1px solid var(--dlv-line); font:600 12px/1 var(--dlv-body-font),sans-serif; background:var(--dlv-surface); }

/* Landing — urgency banner */
.dld-urgency { display:flex; align-items:center; gap:14px; padding:18px 22px; border-radius:var(--dlv-radius); border:1px solid var(--dlv-line); background:color-mix(in srgb,var(--dlv-primary) 8%,var(--dlv-surface)); }
.dld-urgency__dot { width:9px; height:9px; border-radius:50%; background:var(--dlv-primary); flex-shrink:0; animation:dl-hint-pulse 1.6s ease-in-out infinite; }
.dld-urgency strong { font:600 13.5px/1 var(--dlv-heading-font),sans-serif; }
.dld-urgency span:last-child { font-size:12.5px; color:var(--dlv-muted); }

/* Business — process steps */
.dld-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.dld-step { padding:20px 18px; border:1px solid var(--dlv-line); border-radius:var(--dlv-radius); background:var(--dlv-surface); }
.dld-step > span { display:block; font:700 22px/1 var(--dlv-heading-font),sans-serif; color:color-mix(in srgb,var(--dlv-primary) 55%, var(--dlv-line)); margin-bottom:10px; }
.dld-step strong { display:block; font:600 14px/1.3 var(--dlv-heading-font),sans-serif; margin-bottom:6px; }
.dld-step p { margin:0; font-size:12px; color:var(--dlv-muted); line-height:1.5; }

@media (max-width:900px) {
  .dld-shop-grid { grid-template-columns:repeat(2,1fr); }
  .dld-pricing-grid { grid-template-columns:1fr; }
  .dld-booking-grid { grid-template-columns:1fr; }
  .dld-steps { grid-template-columns:repeat(2,1fr); }
  .dld-menu-list { grid-template-columns:1fr; }
}