/*
 * DiviTorque — Global component primitives
 * Built from semantic tokens in tokens.css. Source: 02-DESIGN-SYSTEM.md §8,
 * 03-DESIGN-GUIDE.md Part B, rendered in style-tile.html.
 *
 * Usable as CSS-class fields in Divi modules and Code modules. UI is
 * monochrome — color lives ONLY in mesh gradients/imagery/icons.
 */

/* ─── Base ────────────────────────────────────────────────────────── */
/* border-box everywhere so borders (e.g. the highlighted plan ring) don't
   change a card's box size — keeps cards aligned. */
.dt-pricing *, .dt-pricing *::before, .dt-pricing *::after { box-sizing: border-box; }
body {
	background: var(--color-bg); color: var(--color-text);
	font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.dt-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* Titles use Geist (display); body text uses Inter (--font-sans on body).
   !important beats the Divi parent theme's default typography (Open Sans),
   which otherwise out-cascades our same-specificity body/heading rules. */
body { font-family: var(--font-sans) !important; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display) !important; }
input, textarea, select, button { font-family: var(--font-sans); }

/* WIG: eliminate the double-tap zoom delay + intentional tap highlight. */
a, button, [role="button"], summary, .btn, .dt-tab, .dt-toggle__opt {
	touch-action: manipulation;
	-webkit-tap-highlight-color: color-mix(in srgb, var(--color-action) 12%, transparent);
}

/* WIG: section/heading anchors clear the sticky header when deep-linked. */
:where(h1, h2, h3, h4, [id]) { scroll-margin-top: 84px; }

/* Skip link — first focusable, visible only on focus. */
.dt-skip {
	position: absolute; left: 8px; top: -60px; z-index: 100;
	background: var(--color-action); color: var(--color-on-action);
	padding: 10px 16px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--fw-med);
	transition: top var(--dur-base) var(--ease);
}
.dt-skip:focus-visible { top: 8px; outline: 2px solid var(--color-focus); outline-offset: 2px; }
#dt-main:focus { outline: none; }

/* Visually-hidden (screen-reader only) utility. */
.dt-visually-hidden {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─── Eyebrow ─────────────────────────────────────────────────────── */
.dt-eyebrow {
	font-size: var(--text-label); font-weight: var(--fw-med); letter-spacing: .04em;
	color: var(--color-text-faint);
}

/* ─── Buttons (text only — NO icons) ──────────────────────────────── */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	font: var(--fw-med) var(--text-base)/1 var(--font-sans);
	border-radius: var(--radius-pill); padding: 15px 28px; min-height: 44px;
	cursor: pointer; border: 1px solid transparent; text-decoration: none;
	transition: background var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-primary { background: var(--color-action); color: var(--color-on-action); border-color: var(--color-action); }
.btn-primary:hover { background: var(--color-action-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary { background: var(--color-bg); color: var(--color-text); border-color: var(--color-border); }
.btn-secondary:hover { background: var(--color-surface); }
.btn-tertiary { background: none; border: none; color: var(--color-text); padding: 15px 10px; }
.btn-tertiary:hover { text-decoration: underline; }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn-sm { padding: 10px 20px; font-size: var(--text-sm); min-height: 40px; }
.btn-lg { padding: 18px 34px; font-size: var(--text-lg); }

/* ─── Chips (Free / Pro) ──────────────────────────────────────────── */
.chip {
	display: inline-block; font-size: 12px; font-weight: var(--fw-med); padding: 4px 11px;
	border-radius: var(--radius-pill); border: 1px solid var(--color-border); color: var(--color-text-muted);
}
.chip-free { background: var(--color-surface); }
.chip-pro { background: var(--color-action); color: var(--color-on-action); border-color: var(--color-action); }

/* ─── Card ────────────────────────────────────────────────────────── */
.card {
	background: var(--color-surface-2); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); padding: var(--space-5);
	transition: border-color var(--dur-base) var(--ease);
}
.card:hover { border-color: var(--gray-300); }

/* ─── Module card ─────────────────────────────────────────────────── */
.mod {
	position: relative; display: flex; gap: 18px; background: var(--color-surface-2);
	border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 22px;
	transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base), border-color var(--dur-base);
}
.mod:hover { border-color: var(--gray-300); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.mod .modicon { align-self: flex-start; }
.mod__badge { position: absolute; top: 16px; right: 16px; }
.mod__body { min-width: 0; padding-right: 48px; }
.mod__title { font-size: var(--text-base); font-weight: var(--fw-semi); letter-spacing: -.01em; line-height: var(--lh-heading); margin: 0; padding: 0; }
.mod__desc { font-size: 13px; color: var(--color-text-muted); margin-top: 6px; line-height: var(--lh-body); }

/* ─── Pricing plan cards (shared component: home + pricing page) ───── */
.dt-pp__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; max-width: 1040px; margin: 0 auto; }
.dt-pp__card { display: flex; flex-direction: column; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: clamp(32px, 3vw, 44px) clamp(26px, 2.4vw, 34px); }
.dt-pp__card--featured { border-color: var(--color-action); box-shadow: var(--shadow-md); }
.dt-pp__name { font-size: var(--text-xl); font-weight: var(--fw-semi); letter-spacing: -.015em; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dt-pp__for { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--lh-body); margin-top: 10px; min-height: 2.8em; }
.dt-pp__price { font-size: 46px; font-weight: var(--fw-semi); letter-spacing: -.025em; line-height: 1; margin: 30px 0 8px; font-variant-numeric: tabular-nums; }
.dt-pp__price span { font-size: 14px; color: var(--color-text-faint); font-weight: var(--fw-reg); letter-spacing: 0; }
.dt-pp__price s { font-size: 20px; color: var(--color-text-faint); font-weight: var(--fw-reg); margin-right: 8px; }
/* dollar saved — gradient TEXT (warm mesh tones, deepened for legibility) */
.dt-pp__save { margin: 0; font-size: 13.5px; font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; color: #B45309; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.dt-pp__save { width: fit-content; background-image: linear-gradient(92deg, #C2410C, #DD8A2C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
.dt-pp__cta.btn { width: 100%; white-space: nowrap; margin-top: 24px; padding-top: 15px; padding-bottom: 15px; }
.dt-pp__inherit { margin: 26px 0 0; font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--color-text); letter-spacing: -.005em; }
.dt-pp__list { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-direction: column; gap: 16px; }
.dt-pp__inherit + .dt-pp__list { margin-top: 20px; }
.dt-pp__list li { display: flex; align-items: center; gap: 11px; font-size: var(--text-sm); color: var(--color-text); line-height: 1.45; }
.dt-pp__check { flex: 0 0 auto; color: var(--color-text); }
.dt-guarantee { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; font-size: var(--text-sm); color: var(--color-text-muted); }
.dt-guarantee li { display: flex; align-items: center; gap: 8px; }
.dt-guarantee li::before { content: "✓"; font-weight: var(--fw-semi); color: var(--color-text); }
@media (max-width: 880px) { .dt-pp__grid { grid-template-columns: 1fr; max-width: 440px; } }

/* ─── FAQ accordion (shared: landing + pricing) ───────────────────── */
.dt-faq { background: var(--color-bg); border-top: 1px solid var(--color-border); padding: var(--section-y) 0; }
.dt-faq__wrap { max-width: 760px; }
.dt-faq__title { font-size: var(--text-2xl); font-weight: var(--fw-semi); text-align: center; margin-bottom: 36px; }
.dt-faq__item { border-bottom: 1px solid var(--color-border); }
.dt-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; background: none; border: 0; cursor: pointer; font-family: var(--font-sans); font-size: var(--text-lg); font-weight: var(--fw-med); color: var(--color-text); padding: 22px 0; min-height: 44px; }
.dt-faq__q:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.dt-faq__icon { position: relative; flex: 0 0 16px; width: 16px; height: 16px; }
.dt-faq__icon::before, .dt-faq__icon::after { content: ""; position: absolute; background: var(--color-text-faint); transition: transform var(--dur-base) var(--ease); }
.dt-faq__icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.dt-faq__icon::after { top: 0; left: 7px; width: 2px; height: 16px; }
.dt-faq__q[aria-expanded="true"] .dt-faq__icon::after { transform: scaleY(0); }
.dt-faq__a { overflow: hidden; max-height: 0; transition: max-height var(--dur-base) var(--ease); }
.dt-faq__q[aria-expanded="true"] + .dt-faq__a { max-height: 600px; }
.dt-faq__a p { color: var(--color-text-muted); padding: 0 0 22px; max-width: 64ch; line-height: var(--lh-body); }
@media (prefers-reduced-motion: reduce) { .dt-faq__a, .dt-faq__icon::before, .dt-faq__icon::after { transition: none; } }

/* ─── Mesh module icons (the signature device) — DESIGN-SYSTEM §9 ──── */
.modicon {
	width: 56px; aspect-ratio: 1; flex: 0 0 56px; border-radius: 26%; overflow: hidden;
	display: grid; place-items: center;
	/* rich soft 3-point mesh (per-module hues) + white highlight for depth */
	background:
		radial-gradient(70% 65% at 26% 20%, var(--g1), transparent 60%),
		radial-gradient(72% 70% at 82% 26%, var(--g2), transparent 60%),
		radial-gradient(85% 85% at 55% 100%, var(--g3), transparent 62%),
		radial-gradient(60% 50% at 32% 12%, rgba(255, 255, 255, .35), transparent 55%),
		linear-gradient(150deg, var(--g1), var(--g2));
}
.modicon-sm { width: 28px; flex-basis: 28px; }
.modicon-lg { width: 96px; flex-basis: 96px; }
/* crisp white line glyph, uniform weight + size so the set matches */
.modicon svg { color: #fff; display: block; width: 56%; height: 56%; }
/* per-category hues (set --m1/--m2/--m3) */
.mi-content  { --m1:var(--mesh-peach); --m2:var(--mesh-coral);  --m3:var(--mesh-pink);   }
.mi-social   { --m1:var(--mesh-amber); --m2:var(--mesh-magenta);--m3:var(--mesh-violet); }
.mi-media    { --m1:var(--mesh-aqua);  --m2:var(--mesh-grass);  --m3:var(--mesh-mint);   }
.mi-nav      { --m1:var(--mesh-sky);   --m2:var(--mesh-indigo); --m3:var(--mesh-peri);   }
.mi-commerce { --m1:var(--mesh-grass); --m2:var(--mesh-mint);   --m3:var(--mesh-sky);    }
.mi-utility  { --m1:var(--mesh-violet);--m2:var(--mesh-peri);   --m3:var(--mesh-indigo); }

/* ─── Mesh plane (expressive layer; demo floats on it) ────────────── */
.mesh {
	border-radius: var(--radius-xl); padding: clamp(18px, 2.6vw, 34px);
	display: flex; align-items: center; justify-content: center; min-height: 280px;
	background:
		radial-gradient(75% 85% at 16% 8%,   var(--m1), transparent 64%),
		radial-gradient(70% 80% at 88% 16%,  var(--m2), transparent 62%),
		radial-gradient(95% 95% at 50% 110%, var(--m3), transparent 66%),
		radial-gradient(55% 60% at 40% 50%,  var(--m2), transparent 72%),
		linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 42%),
		var(--gray-0);
}
.mesh.peach  { --m1:var(--mesh-peach); --m2:var(--mesh-coral);  --m3:var(--mesh-pink);   }
.mesh.indigo { --m1:var(--mesh-sky);   --m2:var(--mesh-indigo); --m3:var(--mesh-peri);   }
.mesh.violet { --m1:var(--mesh-violet);--m2:var(--gray-700);    --m3:var(--mesh-peri);   }
.mesh.amber  { --m1:var(--mesh-amber); --m2:var(--mesh-magenta);--m3:var(--mesh-violet); }
.mesh.sky    { --m1:var(--mesh-sky);   --m2:var(--mesh-grass);  --m3:var(--mesh-amber);  }
.mesh.aqua   { --m1:var(--mesh-aqua);  --m2:var(--mesh-grass);  --m3:var(--mesh-mint);   }

/* ─── Card grid (auto-fit) ────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }

/* ─── Text link with underline affordance (arrows on links, never buttons) */
.dt-link { display: inline-block; margin-top: 22px; font-weight: var(--fw-med); border-bottom: 1.5px solid var(--color-text); padding-bottom: 2px; }
.dt-link:hover { opacity: .7; }
.dt-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* ─── Demo card (floats on a mesh plane) ──────────────────────────── */
.dt-demo-card { background: var(--gray-0); border-radius: 14px; box-shadow: var(--shadow-lg); width: 100%; max-width: 340px; padding: 20px; }
.dt-demo-card h4 { margin: 14px 0 6px; font-size: var(--text-base); font-weight: var(--fw-semi); }
.dt-demo-card p { font-size: 13px; color: var(--color-text-muted); }
.dt-demo-card__pill { display: inline-block; margin-top: 14px; background: var(--color-action); color: var(--color-on-action); font-size: 12px; padding: 7px 14px; border-radius: var(--radius-pill); }

/* ─── Pricing card ────────────────────────────────────────────────── */
.price { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 30px; }
.price.reco { box-shadow: var(--shadow-md); outline: 2px solid var(--color-action); outline-offset: -2px; position: relative; }
.price .name { font-size: 13px; font-weight: var(--fw-med); letter-spacing: .04em; color: var(--color-text-faint); text-transform: uppercase; }
.price .desc { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 6px; }
.price .amt { font-size: 44px; font-weight: var(--fw-semi); letter-spacing: -.022em; margin: 18px 0 2px; font-variant-numeric: tabular-nums; }
.price .amt s { font-size: 24px; color: var(--color-text-faint); font-weight: var(--fw-reg); margin-right: 8px; }
.price .amt span { font-size: 15px; color: var(--color-text-faint); font-weight: var(--fw-reg); }
.price ul { list-style: none; padding: 0; margin: 18px 0 24px; }
.price li { font-size: var(--text-sm); padding: 7px 0; display: flex; gap: 9px; border-bottom: 1px solid var(--color-border); }
.price li::before { content: "✓"; font-weight: var(--fw-semi); }
.price .btn { width: 100%; }
.reco-chip { position: absolute; top: -11px; left: 30px; background: var(--color-action); color: var(--color-on-action); font-size: 12px; font-weight: var(--fw-med); padding: 5px 12px; border-radius: var(--radius-pill); }

/* ─── Stat (tabular-nums) ─────────────────────────────────────────── */
.dt-stat b { color: var(--color-text); font-weight: var(--fw-med); font-variant-numeric: tabular-nums; }

/* ─── "Divi 5 ready" badge ────────────────────────────────────────── */
.dt-d5 { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: var(--fw-med); color: var(--color-text); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 5px 12px; }
.dt-d5__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mesh-grass, #34D08C); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mesh-grass, #34D08C) 22%, transparent); }
.dt-d5__ver { color: var(--color-text-faint); font-weight: var(--fw-reg); font-variant-numeric: tabular-nums; padding-left: 8px; margin-left: 6px; border-left: 1px solid var(--color-border); }

/* ─── Account / customer portal (fallback heading behind the fixed portal) ─ */
.dt-account { padding: clamp(48px, 7vw, 88px) 0; text-align: center; }
.dt-account__title { font-size: var(--text-2xl); font-weight: var(--fw-semi); letter-spacing: -.02em; }
.dt-account__sub { color: var(--color-text-muted); margin-top: 10px; }
.dt-account__hint { font-size: var(--text-sm); color: var(--color-text-faint); margin-top: 16px; }
.dt-account__hint a { color: var(--color-text); border-bottom: 1px solid var(--color-border); }

/* ─── Universal page header (one style for every page) ────────────── */
.dt-page-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(72px, 9vw, 116px) 0 clamp(48px, 6vw, 72px); text-align: center; border-bottom: 1px solid var(--color-border); }
/* Cohesive premium aurora — warm (amber) → cool (sky), a soft periwinkle rise
   from below. Three large soft blobs, no pink/rainbow. Tasteful per the guide. */
.dt-page-hero::before {
	content: ""; position: absolute; inset: -15% 0 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(56% 88% at 7% -12%,  color-mix(in srgb, var(--mesh-amber) 44%, transparent), transparent 64%),
		radial-gradient(56% 88% at 93% -12%, color-mix(in srgb, var(--mesh-sky)   48%, transparent), transparent 64%),
		radial-gradient(68% 80% at 50% 122%, color-mix(in srgb, var(--mesh-peri)  34%, transparent), transparent 70%);
	filter: blur(66px); opacity: .82;
}
.dt-page-hero--left { text-align: left; }
/* plain variant — no aurora; calm heading for decision pages (e.g. pricing) */
.dt-page-hero--plain { padding: clamp(48px, 7vw, 80px) 0 clamp(28px, 4vw, 40px); border-bottom: 0; }
.dt-page-hero--plain::before { content: none; }
/* --left keeps the centered container; only the text aligns left (so its left
   edge lines up with left-aligned page bodies that use the same .dt-wrap). */
.dt-page-hero__eyebrow { margin-bottom: 14px; }
.dt-page-hero__title { font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: var(--fw-semi); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.dt-page-hero__sub { font-size: var(--text-lg); line-height: var(--lh-body); color: var(--color-text-muted); max-width: 52ch; margin: 16px auto 0; text-wrap: balance; }
.dt-page-hero--left .dt-page-hero__sub { margin-inline: 0; }
/* optional mesh icon above the title (e.g. module pages) — the brand signature */
.dt-page-hero__icon { display: flex; justify-content: center; margin: 0 0 22px; }
.dt-page-hero--left .dt-page-hero__icon { justify-content: flex-start; }
.dt-page-hero__icon .modicon { box-shadow: var(--shadow-md); }
/* breadcrumb sits centered in the masthead */
.dt-page-hero .dt-breadcrumb { justify-content: center; margin-bottom: 20px; }
.dt-page-hero--left .dt-breadcrumb { justify-content: flex-start; }
@media (prefers-reduced-motion: no-preference) { .dt-page-hero::before { animation: dt-aurora 18s ease-in-out infinite alternate; } }
@keyframes dt-aurora { from { transform: translate3d(-2%, 0, 0) scale(1); } to { transform: translate3d(2%, -3%, 0) scale(1.08); } }

/* ─── Breadcrumb (shared) ─────────────────────────────────────────── */
.dt-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--text-sm); color: var(--color-text-faint); margin-bottom: 18px; }
.dt-breadcrumb a { color: var(--color-text-muted); }
.dt-breadcrumb a:hover { color: var(--color-text); }
.dt-breadcrumb__sep { color: var(--color-text-faint); opacity: .5; }
.dt-breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: var(--fw-med); }

/* ─── Comparison table cells (shared: pricing matrix + compare table) ── */
.dt-mx__yes { font-weight: var(--fw-semi); }
.dt-mx__no { color: var(--color-text-faint); }
.dt-mx__val { color: var(--color-text); }
.dt-mx__reco { background: color-mix(in srgb, var(--color-action) 4%, var(--color-surface-2)); }

/* ─── CTA block (B5 — reusable page closer; the one mesh-backed section) ─ */
/* Closing CTA — full-bleed aurora band (no container, no card). */
.dt-cta-block {
	position: relative; isolation: isolate; overflow: hidden;
	background-color: var(--color-bg); color: var(--color-text);
	padding: var(--section-y) var(--gutter); text-align: center; border-top: 1px solid var(--color-border);
}
/* Same aurora as the page header, spanning the full width. */
.dt-cta-block::before {
	content: ""; position: absolute; inset: -15% 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(48% 88% at 6% -16%,  color-mix(in srgb, var(--mesh-amber) 50%, transparent), transparent 62%),
		radial-gradient(48% 88% at 94% -16%, color-mix(in srgb, var(--mesh-sky)   54%, transparent), transparent 62%),
		radial-gradient(72% 84% at 50% 126%, color-mix(in srgb, var(--mesh-peri)  38%, transparent), transparent 70%);
	filter: blur(68px); opacity: .9;
}
.dt-cta-block__title {
	font-size: clamp(2.25rem, 5vw, 3.4rem); font-weight: var(--fw-semi);
	line-height: var(--lh-display); letter-spacing: -.025em; max-width: 20ch; margin: 0 auto; text-wrap: balance;
}
.dt-cta-block__sub { font-size: var(--text-lg); color: var(--color-text-muted); margin: 16px auto 0; max-width: 48ch; text-wrap: pretty; }
.dt-cta-block__actions { display: flex; gap: var(--space-2); justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 28px; }
/* trust row — check-marked items, the conversion nudge under the button */
.dt-cta-block__assure { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: var(--text-sm); color: var(--color-text-muted); }
.dt-cta-block__assure li { display: inline-flex; align-items: center; gap: 7px; }
.dt-cta-block__assure li::before { content: ""; flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; background: color-mix(in srgb, #16A34A 16%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; }

/* ─── Legal pages (simple left heading, narrow column) ────────────── */
.dt-legal { padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 96px); }
.dt-legal__wrap { max-width: 720px; margin: 0 auto; padding-inline: var(--gutter); }
.dt-legal__head { margin-bottom: clamp(28px, 4vw, 40px); padding-bottom: clamp(20px, 3vw, 28px); border-bottom: 1px solid var(--color-border); }
.dt-legal__title { font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: var(--fw-semi); letter-spacing: -.025em; line-height: 1.1; }
.dt-legal__content { max-width: none; margin: 0; }

/* ─── Templates & content (page / archive / 404) ──────────────────── */
.dt-page { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }
.dt-page__content { max-width: 70ch; margin-inline: auto; }
.dt-page__content > p, .dt-page__content > ul, .dt-page__content > ol { margin: 0 0 var(--space-4); color: var(--color-text); line-height: var(--lh-relaxed, 1.7); }
.dt-page__content > h2 { font-size: var(--text-xl); font-weight: var(--fw-semi); letter-spacing: -.01em; margin: var(--space-7) 0 var(--space-3); }
.dt-page__content > h3 { font-size: var(--text-lg); font-weight: var(--fw-semi); margin: var(--space-6) 0 var(--space-2); }
.dt-page__content a { color: var(--color-text); border-bottom: 1px solid var(--color-border); }
.dt-page__content a:hover { border-color: var(--color-text); }
.dt-page__content ul, .dt-page__content ol { padding-left: 1.25em; }
.dt-page__content li { margin: 0 0 var(--space-2); }
.dt-page__intro { padding: clamp(32px, 5vw, 56px) var(--gutter) 0; max-width: 72ch; }

.dt-archive { padding: clamp(48px, 7vw, 96px) var(--gutter); }
.dt-archive__header { margin-bottom: var(--space-7); }
.dt-archive__title { font-size: var(--text-2xl); font-weight: var(--fw-semi); }
.dt-archive__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-5); }
.dt-card { display: flex; flex-direction: column; gap: 10px; padding: 0; overflow: hidden; }
.dt-card__media { display: block; aspect-ratio: 16 / 9; background: var(--color-surface); }
.dt-card__media img { width: 100%; height: 100%; object-fit: cover; }
.dt-card__title { font-size: var(--text-lg); font-weight: var(--fw-semi); letter-spacing: -.01em; padding: 0 var(--space-5); }
.dt-card__title a:hover { text-decoration: underline; }
.dt-card__excerpt { font-size: var(--text-sm); color: var(--color-text-muted); padding: 0 var(--space-5); }
.dt-card__meta { font-size: 13px; color: var(--color-text-faint); padding: 0 var(--space-5) var(--space-5); font-variant-numeric: tabular-nums; }

.dt-empty { padding: clamp(48px, 8vw, 96px) 0; text-align: center; color: var(--color-text-muted); }

.pagination, .dt-page__pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: var(--space-7); }
.pagination .page-numbers, .dt-page__pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.pagination .page-numbers.current { background: var(--color-action); color: var(--color-on-action); border-color: var(--color-action); }
.pagination a.page-numbers:hover { border-color: var(--gray-300); color: var(--color-text); }
.pagination .page-numbers:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.dt-404 { padding: clamp(72px, 12vw, 160px) var(--gutter); text-align: center; }
.dt-404__title { font-size: var(--text-3xl); font-weight: var(--fw-semi); line-height: var(--lh-display); letter-spacing: -.022em; max-width: 18ch; margin: 12px auto 0; }
.dt-404__sub { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 46ch; margin: 18px auto 0; }
.dt-404__actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; margin-top: var(--space-6); }

/* ─── Docs live search (support page + docs archive) ──────────────── */
.dt-docsearch { position: relative; max-width: 600px; }
.dt-docsearch__box { position: relative; display: flex; align-items: center; }
.dt-docsearch__icon { position: absolute; left: 16px; display: inline-flex; color: var(--color-text-faint); pointer-events: none; }
.dt-docsearch__input { width: 100%; font: var(--fw-reg) 16px/1.5 var(--font-sans); padding: 14px 44px 14px 46px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-text); transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.dt-docsearch__input::placeholder { color: var(--color-text-faint); }
.dt-docsearch__input:focus { outline: none; border-color: var(--color-text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-text) 7%, transparent); }
.dt-docsearch__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.dt-docsearch__spinner { position: absolute; right: 16px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--color-border); border-top-color: var(--color-text); opacity: 0; pointer-events: none; }
.dt-docsearch.is-loading .dt-docsearch__spinner { opacity: 1; animation: dt-docspin .6s linear infinite; }
@keyframes dt-docspin { to { transform: rotate(360deg); } }

.dt-docsearch__results { position: absolute; z-index: 50; top: calc(100% + 8px); left: 0; right: 0; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 6px; max-height: 60vh; overflow-y: auto; }
.dt-docsearch__result { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: var(--radius-md); color: var(--color-text); }
.dt-docsearch__result:hover, .dt-docsearch__result[aria-selected="true"] { background: var(--color-surface); }
.dt-docsearch__ricon { flex: 0 0 auto; color: var(--color-text-faint); }
.dt-docsearch__rtitle { flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); font-weight: var(--fw-med); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-docsearch__rarrow { flex: 0 0 auto; color: var(--color-text-faint); opacity: 0; transform: translateX(-3px); transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.dt-docsearch__result:hover .dt-docsearch__rarrow, .dt-docsearch__result[aria-selected="true"] .dt-docsearch__rarrow { opacity: 1; transform: none; }
.dt-docsearch__empty { padding: 16px 14px; font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

/* ─── Docs archive ────────────────────────────────────────────────── */
.dt-docs-archive { padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 8vw, 96px); }
.dt-docs-archive__search { max-width: 600px; margin: 0 auto clamp(28px, 4vw, 40px); }
.dt-docs-list { list-style: none; padding: 0; margin: 0; max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.dt-docs-list__item a { display: block; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px 22px; transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.dt-docs-list__item a:hover { border-color: var(--color-text); transform: translateY(-1px); }
.dt-docs-list__title { font-size: var(--text-lg); font-weight: var(--fw-semi); letter-spacing: -.01em; }
.dt-docs-list__excerpt { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 6px; line-height: var(--lh-body); }
.dt-docs-empty { text-align: center; color: var(--color-text-muted); padding: 40px 0; }

/* ─── Review card (shared: home · pricing · compare) ──────────────── */
.dt-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1040px; margin: 0 auto; }
.dt-review { display: flex; flex-direction: column; gap: 16px; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 28px 26px; color: var(--color-text); box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
a.dt-review:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gray-300); }
.dt-review__stars { color: #FFB020; font-size: 15px; letter-spacing: 3px; line-height: 1; }
/* reset every UA blockquote default — no left bar, no indent */
.dt-review__quote { margin: 0; padding: 0; border: 0; quotes: none; font-size: var(--text-base); line-height: var(--lh-body); letter-spacing: -.003em; color: var(--color-text); flex: 1; }
.dt-review__by { display: flex; align-items: center; gap: 12px; margin-top: 2px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.dt-review__avatar { width: 40px; height: 40px; border-radius: 999px; flex: 0 0 40px; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-border) inset; }
.dt-review__id { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.dt-review__id b { font-size: var(--text-sm); font-weight: var(--fw-semi); letter-spacing: -.005em; }
.dt-review__id span { font-size: 12px; color: var(--color-text-faint); }
@media (max-width: 980px) { .dt-reviews__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dt-reviews__grid { grid-template-columns: 1fr; max-width: 460px; } }

/* ─── Mobile rhythm ───────────────────────────────────────────────── */
@media (max-width: 640px) {
	/* tighter vertical spacing + smaller lead text so sections don't feel oversized */
	:root { --section-y: clamp(40px, 9vw, 60px); --text-lg: 1.125rem; }
	/* mesh panels hug their content instead of forcing a tall min-height */
	.mesh { min-height: 0; padding: 20px; }
}

/* ─── Accessibility floor ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}