/* =====================================================================
   Dental Books — product landing page. Static page served from
   /dental-books/ (canonical /license/dentalbooks). Styled to match the
   Dental Books desktop client's "SkyRock White" system, presented over
   a FIXED Webb ground (owner 2026-08-22, re-picked 08-24 — the new
   SkyRock Vibe): the COSMOS-Web field, a sky full of galaxies —
   frosted-white clinical panels floating on it, white top bar,
   steel-navy + gold, soft shadows. Not pickable; the visible credit
   rides .db-sky-credit under the footer (owner rule: Webb imagery
   always carries its credit).
     COSMOS-Web field (NIRCam)  ESA/Webb, NASA & CSA, G. Gozaliasl,
                                A. Koekemoer, M. Franco, and the
                                COSMOS-Web team
   Self-contained tokens (mirror the client's styles/tokens.css).
   `db-` namespace.
   ===================================================================== */

:root {
    /* Surfaces */
    --bg: #ebebeb; --surface: #ffffff; --surface-2: #f7f7f7; --surface-3: #ebebeb;
    --line: #e4e4e4; --line-strong: #d2d2d2;
    /* Frosted panel — cool glass that lets the cosmos faintly tint it (a tonal bridge between
       the starfield and the clinical white), instead of a stark pure-white box. */
    --panel: linear-gradient(158deg, rgba(249, 249, 249, 0.90), rgba(234, 234, 234, 0.86));
    --panel-line: rgba(255, 255, 255, 0.45); --panel-blur: blur(16px) saturate(1.15);
    --panel-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    /* Ink */
    /* THE INK LADDER, measured 2026-08-20. --subtle was #8a93a3, which renders at
       2.59:1 on these frosted panels — under the 4.5:1 floor outright, and it is what
       sets the tooth numbers on the odontogram. --gold-ink was #8a6d1f at 4.09:1, just
       short. Both move to the values the Dental Books client's own rebuild landed on
       after measuring the same problem (components/logbooks/logbooks.css carries that
       working): #545a63 gives 6.49:1 and #7a5e17 gives 5.70:1 on the purely neutral
       light ramp the surfaces moved to on 2026-08-21. Gold stops there rather
       than going deeper — past roughly 6:1 it stops reading as gold and starts reading
       as brown, and it is the one warm mark on the page. Re-measure before changing
       either of them. */
    --text: #2a2f3a; --muted: #5b6473; --subtle: #545a63; --on-accent: #ffffff;
    /* On the starfield (light text directly on the cosmos) */
    --on-dark: #FFF6F6; --on-dark-muted: rgba(255, 255, 255, 0.74); --on-dark-faint: rgba(255, 255, 255, 0.55);
    --gold-light: #d9c08a;
    /* Brand: steel-navy + gold signature */
    --accent: #3C486B; --accent-hover: #2e3a56; --accent-press: #283350;
    --accent-soft: #eef1f7; --accent-ring: rgba(60, 72, 107, 0.22);
    --gold: #c2a35a; --gold-soft: rgba(194, 163, 90, 0.40); --gold-ink: #7a5e17;
    --steel-grad: linear-gradient(-145deg, #2e3a56, #3C486B, #283350, #46557e, #2e3a56);
    --silver-grad: linear-gradient(-145deg, #f4f4f4, #e0e0e0, #fcfcfc, #d8d8d8, #eeeeee);
    --metal-plate: linear-gradient(145deg, #5a6068 0%, #34383f 38%, #23272d 55%, #444a52 78%, #2b2f35 100%);
    /* Semantic */
    --success: #2e9e6b; --danger: #d9534f;
    /* Type */
    --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Spacing */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
    /* Radii */
    --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
    /* Elevation */
    --sh-sm: 0 1px 2px rgba(8, 12, 24, 0.18), 0 2px 6px rgba(8, 12, 24, 0.16);
    --sh-md: 0 1px 3px rgba(8, 12, 24, 0.22), 0 8px 22px rgba(8, 12, 24, 0.28);
    --sh-lg: 0 14px 38px rgba(5, 8, 18, 0.46);
    /* Motion */
    --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --dur: 160ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    min-height: 100vh;
    color: var(--text);
    font-family: var(--font);
    font-size: 0.9375rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background-color: #0b0e1a;
    background-image:
        linear-gradient(180deg, rgba(8, 11, 22, 0.58), rgba(8, 11, 22, 0.72)),
        url('/components/files/images/cosmos-web-field-webb.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
a { color: var(--accent); text-decoration: none; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gold-soft); border-radius: var(--r-sm); }

main { max-width: 72rem; margin: 0 auto; padding: 0 var(--s-5); }

/* ---------------- Top bar (brushed black metal — SkyRock dark vibe) ---------------- */
.db-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-3) var(--s-5);
    background: linear-gradient(-145deg, #1c1c1c, #2a2a2a, #141414, #333333, #1c1c1c);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
    position: sticky; top: 0; z-index: 20;
}
.db-brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--on-dark); }
.db-brand-logo {
    width: 1.9rem; height: 1.9rem; flex: 0 0 auto; display: inline-block;
    background-image: url('/components/files/icons/OfficialSkyRockWhiteLogo.svg');
    background-size: contain; background-repeat: no-repeat; background-position: center;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.db-brand-text { display: flex; flex-direction: column; line-height: 1.05; font-weight: 700; letter-spacing: 0.04em; color: var(--on-dark); }
.db-brand-sub { color: rgba(255, 255, 255, 0.5); font-size: 0.6rem; letter-spacing: 0.18em; font-weight: 400; text-transform: uppercase; margin-top: 2px; }

.db-nav { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; justify-content: flex-end; }
.db-nav a {
    color: rgba(255, 255, 255, 0.72); text-decoration: none; font-size: 0.9rem; font-weight: 600;
    padding: 0.5rem 0.85rem; border-radius: var(--r-md); border: 1px solid transparent;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.db-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.db-nav a.db-nav-cta { border-color: var(--gold-light); color: var(--on-dark); }
.db-nav a.db-nav-cta:hover { background: rgba(194, 163, 90, 0.16); color: #fff; }
.db-lang { display: inline-flex; align-items: center; margin-right: var(--s-2); }

/* ---------------- Buttons (light, for dark/cosmic surfaces) ---------------- */
.db-btn {
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
    border: 1px solid transparent; border-radius: var(--r-md);
    padding: 0.7rem 1.4rem; font-weight: 600; font-size: 0.95rem; cursor: pointer; color: var(--accent);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.db-btn:active { transform: translateY(1px); }
/* Primary (silver). Named --silver for HTML compatibility. */
.db-btn--silver { background: var(--silver-grad); color: var(--accent); box-shadow: var(--sh-md); }
.db-btn--silver:hover { filter: brightness(1.04); }
/* Secondary (translucent light outline on the cosmos). */
.db-btn--ghost { background: rgba(255, 255, 255, 0.08); color: var(--on-dark); border-color: rgba(255, 255, 255, 0.42); }
.db-btn--ghost:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.62); color: #fff; }

/* ---------------- Hero (open on the starfield, light text) ---------------- */
.db-hero {
    text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
    padding: clamp(2.75rem, 8vw, 5.5rem) 0 clamp(2rem, 5vw, 3.25rem);
}
.db-hero-badge {
    display: inline-flex; align-items: center; gap: var(--s-2); color: var(--gold-light);
    text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.7rem; font-weight: 700;
    padding: 0.42rem 0.9rem; border: 1px solid var(--gold-soft); border-radius: var(--r-pill);
    background: rgba(194, 163, 90, 0.12);
}
.db-hero-title {
    margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.0;
    font-size: clamp(2.8rem, 11vw, 6.5rem);
    display: flex; flex-wrap: wrap; gap: 0 0.2em; justify-content: center;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.db-hero-title-1 { color: var(--on-dark); }
.db-hero-title-2 {
    background: linear-gradient(180deg, #f3e6c2 0%, #d9c08a 55%, #c2a35a 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #d9c08a;
}
.db-hero-lead { margin: 0; color: var(--on-dark-muted); font-size: clamp(1.02rem, 2.3vw, 1.2rem); max-width: 46rem; line-height: 1.6; text-wrap: balance; }
.db-hero-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; margin-top: var(--s-2); }

.db-hero-stats {
    list-style: none; margin: var(--s-5) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); width: 100%; max-width: 52rem;
}
.db-hero-stat {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: var(--s-4) var(--s-3); background: var(--panel); -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-line); border-radius: var(--r-lg); box-shadow: var(--sh-md);
}
.db-hero-stat-n { font-size: clamp(1.2rem, 3.2vw, 1.7rem); font-weight: 800; color: var(--accent); letter-spacing: -0.01em; }
.db-hero-stat-l { font-size: 0.82rem; color: var(--muted); }

/* ---------------- Section scaffolding (headers sit on the cosmos) ---------------- */
.db-divider { width: 100%; max-width: 72rem; height: 1px; margin: 0 auto; background: rgba(255, 255, 255, 0.14); }
.db-section { padding: clamp(2.5rem, 7vw, 4.5rem) 0; }
.db-eyebrow { margin: 0 0 var(--s-2); color: var(--gold-light); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; font-weight: 700; }
.db-eyebrow--gold { color: var(--gold-light); }
/* 32ch + balance, not 22ch: at 22 every heading on the rewritten page broke a
   single word onto its own line ("...siempre en / orden"). A measure that
   guarantees an orphan is the wrong measure, and `text-wrap: balance` evens out
   whatever still wraps. Browsers without it just wrap normally. */
.db-h2 { margin: 0 0 var(--s-3); font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -0.015em; color: var(--on-dark); max-width: 32ch; text-wrap: balance; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); }
.db-lead { margin: 0 0 var(--s-6); color: var(--on-dark-muted); font-size: clamp(1rem, 2.2vw, 1.1rem); max-width: 52rem; line-height: 1.6; }

/* ---------------- Card grids (frosted-white panels) ---------------- */
/* min(Xrem, 100%) rather than a bare Xrem: `minmax(20rem, 1fr)` demands a 320px
   track even inside a 272px container, which is how a phone at 320px ends up
   scrolling sideways. The min() lets the track collapse to the container. */
.db-grid { display: grid; gap: var(--s-4); }
.db-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.db-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.db-grid--5 { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }

.db-card {
    background: var(--panel); -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-line); border-radius: var(--r-lg);
    padding: var(--s-5); box-shadow: var(--sh-md);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.db-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.db-card-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.8rem; height: 2.8rem; border-radius: var(--r-md); margin-bottom: var(--s-3);
    border: 1px solid var(--line); background: var(--accent-soft); color: var(--accent);
}
.db-card-ic svg { width: 22px; height: 22px; display: block; }
.db-card-t { margin: 0 0 var(--s-2); font-size: 1.1rem; font-weight: 700; color: var(--text); }
.db-card-p { margin: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.55; }

.db-card--step { padding-top: var(--s-4); }
.db-step-n { display: block; font-size: 0.95rem; font-weight: 800; color: var(--accent); letter-spacing: 0.14em; margin-bottom: var(--s-2); font-variant-numeric: tabular-nums; }

/* ---------------- Callout (frosted highlight) ---------------- */
.db-callout {
    display: flex; gap: var(--s-4); align-items: flex-start; margin-top: var(--s-5);
    padding: var(--s-5); border: 1px solid var(--panel-line); border-left: 3px solid var(--accent);
    border-radius: var(--r-md); background: var(--panel); -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur); box-shadow: var(--sh-md);
}
.db-callout-ic { color: var(--accent); flex: 0 0 auto; line-height: 1; margin-top: 2px; }
.db-callout-ic svg { width: 22px; height: 22px; display: block; }
.db-callout-p { margin: 0; color: var(--muted); font-size: 0.98rem; line-height: 1.6; }
.db-callout-p strong { color: var(--text); }

/* ---------------- Odontogram block ---------------- */
/* min-width:0 on the items: a grid track refuses to shrink below an item's
   min-content unless you say so, so at 320px the odontogram board pushed the
   document 25px wide instead of letting the chart scroll inside it. */
.db-odo { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.db-odo-board, .db-odo-points { min-width: 0; }
@media (max-width: 60rem) { .db-odo { grid-template-columns: 1fr; } }

.db-odo-board {
    margin: 0; padding: var(--s-5);
    background: var(--panel); -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-line); border-radius: var(--r-lg); box-shadow: var(--sh-md);
}
.db-odo-cap { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; margin-bottom: var(--s-4); }
.db-odo-chart { display: flex; flex-direction: column; gap: var(--s-5); align-items: center; }
.db-odo-fallback { color: var(--subtle); font-size: 0.9rem; padding: var(--s-6) 0; }

.db-odo-arch { display: flex; justify-content: center; align-items: flex-end; gap: var(--s-2); width: 100%; }
.db-odo-arch + .db-odo-arch { margin-top: var(--s-2); }
.db-odo-quad { display: flex; gap: 0.18rem; }
.db-odo-mid { width: 1px; align-self: stretch; margin: 0 var(--s-2); background: var(--gold-soft); }

.db-odo-tooth { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.db-odo-tooth--lower { flex-direction: column-reverse; }
.db-odo-tooth svg { width: clamp(20px, 4.6vw, 30px); height: clamp(20px, 4.6vw, 30px); overflow: visible; display: block; }
.db-odo-tooth-num { font-size: 0.62rem; color: var(--subtle); font-variant-numeric: tabular-nums; }
/* Teeth mirror the client's odontogram: white surface cells with a hairline (rgba 0,0,0,0.10);
   a marked surface takes the clinical category fill (set per-surface in JS) with a darker
   inset-style ring (rgba 0,0,0,0.28), matching the app's .dc1-* coding. */
.db-odo-surf { stroke: rgba(0, 0, 0, 0.10); stroke-width: 1; }
.db-odo-surf--healthy { fill: #ffffff; }
.db-odo-surf:not(.db-odo-surf--healthy) { stroke: rgba(0, 0, 0, 0.28); }
.db-odo-tooth:hover svg { filter: drop-shadow(0 2px 5px rgba(20, 30, 50, 0.28)); }

/* legend */
.db-legend { list-style: none; margin: 0; padding: var(--s-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: center; border-top: 1px solid var(--line); width: 100%; }
.db-legend__item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: var(--muted); }
.db-legend__dot { width: 0.72rem; height: 0.72rem; border-radius: 3px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }

/* plaque-index stat tiles */
.db-odo-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
.db-stat { text-align: center; padding: var(--s-3) var(--s-2); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-sm); }
.db-stat-v { display: block; font-size: 1.5rem; font-weight: 800; color: var(--text); }
.db-stat-l { display: block; font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
.db-stat--pct { background: linear-gradient(160deg, var(--gold-soft), var(--surface)); border-color: var(--gold); }
.db-stat--pct .db-stat-v { color: var(--gold-ink); }

/* points beside the chart (on the cosmos) */
.db-odo-points { display: flex; flex-direction: column; gap: var(--s-4); }
.db-point { padding-left: var(--s-4); border-left: 2px solid var(--gold-light); }
.db-point-t { margin: 0 0 var(--s-1); font-size: 1.05rem; font-weight: 700; color: var(--on-dark); }
.db-point-p { margin: 0; color: var(--on-dark-muted); font-size: 0.93rem; line-height: 1.55; }

/* ---------------- Books section accents ---------------- */
.db-section--books .db-lead em { color: var(--gold-light); font-style: normal; font-weight: 700; }

/* Privacy assurance — "only you hold the key". Gold-accented frosted panel that
   reads as the section's proof point, one notch louder than a plain card. */
.db-privacy {
    display: flex; gap: var(--s-4); align-items: flex-start; margin-top: var(--s-5);
    padding: var(--s-5); border: 1px solid var(--gold-soft); border-left: 3px solid var(--gold);
    border-radius: var(--r-md); background: var(--panel);
    -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
    box-shadow: var(--sh-md), var(--panel-sheen);
}
.db-privacy-ic {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 2.8rem; height: 2.8rem; border-radius: var(--r-md);
    border: 1px solid var(--gold-soft); background: rgba(194, 163, 90, 0.12); color: var(--gold-ink);
}
.db-privacy-ic svg { width: 22px; height: 22px; display: block; }
.db-privacy-t { margin: 0 0 var(--s-2); font-size: 1.1rem; font-weight: 700; color: var(--text); }
.db-privacy-p { margin: 0; color: var(--muted); font-size: 0.96rem; line-height: 1.6; }
.db-secret {
    margin: var(--s-5) auto 0; text-align: center; color: var(--on-dark-muted);
    font-size: 1rem; font-style: italic; max-width: 46rem;
}
.db-secret strong { color: var(--gold-light); font-style: normal; }

/* ---------------- Closing CTA panel (steel-navy band) ---------------- */
.db-cta-panel {
    text-align: center; border: 1px solid var(--accent-press); border-radius: var(--r-lg);
    box-shadow: var(--sh-lg); background: var(--steel-grad); color: var(--on-accent);
    padding: clamp(2.2rem, 6vw, 3.75rem) clamp(1.5rem, 5vw, 3.5rem);
    margin: clamp(2rem, 6vw, 3.5rem) 0 clamp(2.5rem, 6vw, 3.25rem);
    display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.db-cta-panel .db-eyebrow--gold { color: var(--gold-light); }
.db-cta-h { margin: 0; font-size: clamp(1.6rem, 4.2vw, 2.5rem); font-weight: 800; letter-spacing: -0.015em; color: #fff; max-width: 26ch; text-wrap: balance; }
.db-cta-p { margin: var(--s-2) auto var(--s-3); max-width: 48rem; color: rgba(255, 255, 255, 0.82); font-size: clamp(1rem, 2.1vw, 1.1rem); line-height: 1.6; }
.db-cta-tag { margin: var(--s-3) 0 0; color: rgba(255, 255, 255, 0.6); font-size: 0.84rem; letter-spacing: 0.06em; }

/* ---------------- Footer ---------------- */
.db-foot { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; justify-content: center; color: var(--on-dark-faint); font-size: 0.85rem; padding: var(--s-5) 0 var(--s-6); text-align: center; }
.db-foot a { color: var(--on-dark-muted); text-decoration: none; }
.db-foot a:hover { color: #fff; text-decoration: underline; }
.db-foot-dot { color: rgba(255, 255, 255, 0.3); }
/* The Webb ground's visible credit (owner rule: cosmos imagery always carries
   its credit). Quiet by design — the faintest ink on the page, under the foot. */
.db-sky-credit { margin: 0; padding: 0 var(--s-5) var(--s-6); text-align: center; color: rgba(255, 255, 255, 0.42); font-size: 0.72rem; letter-spacing: 0.02em; }

/* Lit-glass top sheen on every frosted panel (placed after the individual box-shadows so it
   adds to them — softens the white-on-cosmos edge and reads as glass, not a flat white box). */
.db-card, .db-hero-stat, .db-odo-board, .db-callout { box-shadow: var(--sh-md), var(--panel-sheen); }

/* ---------------- Responsive ---------------- */
@media (max-width: 40rem) {
    /* Keep the full arch on one line on phones: shrink the teeth and let the board
       scroll horizontally rather than clip or break the layout. */
    .db-odo-board { padding: var(--s-4) var(--s-3); }
    .db-odo-chart { overflow-x: auto; padding-bottom: var(--s-1); }
    .db-odo-arch { min-width: -moz-fit-content; min-width: fit-content; }
    .db-odo-tooth svg { width: 16px; height: 16px; }
    .db-odo-quad { gap: 1px; }
    .db-odo-mid { margin: 0 var(--s-1); }
}

@media (max-width: 38rem) {
    .db-hero-stats { grid-template-columns: 1fr; max-width: 24rem; }
    /* Stack the top bar so the nav never crams against the brand or rags down the
       right edge: brand centered on top, a centered wrapping nav below. */
    .db-topbar { flex-direction: column; align-items: stretch; gap: var(--s-2); padding: var(--s-3) var(--s-4); }
    .db-brand { justify-content: center; }
    .db-nav { justify-content: center; gap: 2px 4px; }
    .db-nav a { padding: 0.4rem 0.6rem; font-size: 0.82rem; }
    .db-lang { margin-right: 0; }
    .db-brand-text { font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
    .db-card, .db-btn, .db-odo-tooth svg { transition: none; }
    .db-card:hover { transform: none; }
}

/* =====================================================================
   SALES REWRITE 2026-08-20 — the pieces the conversion pass added: the
   price, the playable odontogram's controls, the mid-page calls to
   action, the Ley 1581 block, the price table and the FAQ.
   ===================================================================== */

/* Screen-reader-only: carries the live tally as the visitor charts, so the
   figures under the odontogram are not a mouse-only readout. */
.db-sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------------- The price, in the hero ---------------- */
/* A premium product that hides its price makes the visitor do the work of
   finding out, and most of them simply leave. It goes above the fold. */
.db-hero-price { margin: var(--s-2) 0 0; display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; justify-content: center; }
.db-hero-price-amt {
    font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -0.02em;
    color: var(--on-dark); font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.db-hero-price-per { font-size: 1rem; font-weight: 600; color: var(--gold-light); letter-spacing: 0.04em; }
.db-hero-price-note { margin: 0; color: var(--on-dark-muted); font-size: 0.9rem; }

/* The qualifiers that stop a wrong-fit visitor from signing up: the platform,
   where the data lives, and that they can leave with it. */
.db-hero-quals {
    list-style: none; margin: var(--s-4) 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: center;
}
.db-qual {
    display: inline-flex; align-items: center; gap: 0.45rem;
    color: var(--on-dark-muted); font-size: 0.86rem;
}
.db-qual::before {
    content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%;
    background: var(--gold-light); flex: 0 0 auto;
}

.db-hero-cta--left { justify-content: flex-start; }

/* ---------------- Buttons: the quiet third tier ---------------- */
.db-btn--quiet {
    background: var(--surface); color: var(--accent); border-color: var(--line-strong);
    box-shadow: var(--sh-sm);
}
.db-btn--quiet:hover { background: var(--surface-2); border-color: var(--accent); }

/* ---------------- The playable odontogram ---------------- */
.db-demo-hint {
    margin: 0 0 var(--s-2); color: var(--muted); font-size: 0.8rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
}
/* The legend became a palette: each entry is a real button that sets the brush. */
.db-legend { padding-top: 0; margin-bottom: var(--s-5); border-top: none; justify-content: flex-start; }
.db-legend li { display: inline-flex; }
.db-legend__item {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: inherit; font-size: 0.76rem; color: var(--muted);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
    padding: 0.28rem 0.65rem; cursor: pointer;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.db-legend__item:hover { border-color: var(--line-strong); background: var(--surface-2); color: var(--text); }
.db-legend__item.is-on {
    border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--accent-ring);
}
.db-legend__dot--erase { background: var(--surface); border: 1px dashed var(--line-strong); box-shadow: none; }

/* A surface you can mark has to look like one. */
.db-odo-chart .db-odo-surf { cursor: pointer; transition: opacity var(--dur) var(--ease); }
.db-odo-tooth { cursor: pointer; border-radius: var(--r-sm); }
.db-odo-tooth:hover svg { filter: drop-shadow(0 2px 6px rgba(20, 30, 50, 0.34)); }
.db-odo-tooth:hover .db-odo-surf--healthy { opacity: 0.72; }
.db-odo-tooth:focus { outline: none; }
.db-odo-tooth:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring), 0 0 0 1px var(--accent); }

.db-demo-bar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    flex-wrap: wrap; margin-top: var(--s-4); padding-top: var(--s-4);
    border-top: 1px solid var(--line);
}
.db-demo-kbd { margin: 0; color: var(--subtle); font-size: 0.78rem; max-width: 30rem; }

/* ---------------- Mid-page call to action ---------------- */
/* The old page put its only CTA 5,700px down. A visitor convinced by the
   odontogram should not have to scroll past four more sections to act. */
.db-midcta {
    display: flex; align-items: center; justify-content: center; gap: var(--s-4);
    flex-wrap: wrap; text-align: center;
    margin-top: var(--s-6); padding: var(--s-5);
    border: 1px solid var(--panel-line); border-radius: var(--r-lg);
    background: var(--panel); -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
    box-shadow: var(--sh-md), var(--panel-sheen);
}
.db-midcta-p { margin: 0; color: var(--text); font-size: 1rem; font-weight: 600; max-width: 34rem; }

/* ---------------- Ley 1581 note ---------------- */
.db-leg-note {
    margin: var(--s-5) 0 0; max-width: 58rem;
    color: var(--on-dark-faint); font-size: 0.86rem; line-height: 1.6;
}

/* ---------------- Price ---------------- */
.db-price { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
@media (max-width: 56rem) { .db-price { grid-template-columns: 1fr; } }

.db-price-card {
    background: var(--panel); -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-line); border-top: 3px solid var(--gold);
    border-radius: var(--r-lg); padding: var(--s-6) var(--s-5);
    box-shadow: var(--sh-md), var(--panel-sheen);
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2);
}
.db-price-name { margin: 0; color: var(--muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
.db-price-fig { margin: 0; display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.db-price-amt { font-size: clamp(2.2rem, 5.5vw, 3.1rem); font-weight: 800; letter-spacing: -0.025em; color: var(--text); font-variant-numeric: tabular-nums; }
.db-price-per { font-size: 0.98rem; font-weight: 700; color: var(--gold-ink); }
.db-price-note { margin: 0; color: var(--muted); font-size: 0.88rem; }
.db-price-list { margin: var(--s-3) 0 var(--s-4); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-2); align-self: stretch; }
.db-price-list li { position: relative; padding-left: 1.6rem; color: var(--text); font-size: 0.94rem; line-height: 1.5; }
/* A tick drawn in CSS rather than an icon font or an image: no new origin, and
   it scales with the text it belongs to. */
.db-price-list li::before {
    content: ""; position: absolute; left: 0.25rem; top: 0.42em;
    width: 0.42rem; height: 0.74rem; border: solid var(--success);
    border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.db-price-side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding-top: var(--s-2); }
.db-price-side-t { margin: 0; color: var(--on-dark); font-size: 1.05rem; font-weight: 700; }
.db-price-side-p { margin: 0; color: var(--on-dark-muted); font-size: 0.92rem; line-height: 1.6; }

/* ---------------- FAQ ---------------- */
/* Open by default, no accordion: an objection the visitor has to click to read
   is an objection they leave with instead. */
.db-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: var(--s-4) var(--s-6); }
.db-faq-item { padding-left: var(--s-4); border-left: 2px solid var(--gold-soft); }
.db-faq-q { margin: 0 0 var(--s-2); font-size: 1.02rem; font-weight: 700; color: var(--on-dark); line-height: 1.3; }
.db-faq-a { margin: 0; color: var(--on-dark-muted); font-size: 0.94rem; line-height: 1.6; }

@media (max-width: 38rem) {
    .db-demo-bar { flex-direction: column; align-items: stretch; }
    .db-demo-bar .db-btn { width: 100%; }
    .db-midcta .db-btn { width: 100%; }
}