/* ──────────────────────────────────────────────────────────
   Voxel3Di CMS — shared visual shell.

   Kept deliberately small + framework-free. The real "brand"
   styling lives in the Vue app's design tokens; this stylesheet
   matches just enough that the public CMS pages don't look like
   a different site when visitors land on /en/about and click
   "Log in" through to /portal/*.

   When the Vue design system gets a stable token export, swap
   this file's :root variables for that export and the surfaces
   stay in sync.
   ────────────────────────────────────────────────────────── */

:root {
    --brand-primary: #0f4d8a;
    --brand-primary-dark: #0a3866;
    --brand-accent: #00bfa5;
    --text: #1c1f23;
    --text-muted: #5b6168;
    --surface: #ffffff;
    --surface-alt: #f5f7fa;
    --border: #e3e7ec;
    --max-width: 72rem;
    --radius: 0.5rem;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-arabic: "IBM Plex Sans Arabic", "Cairo", "Tajawal", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--surface);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.cms-page--ar, .cms-page--rtl { font-family: var(--font-arabic); }

a { color: var(--brand-primary); }
a:hover { color: var(--brand-primary-dark); }

img { max-width: 100%; height: auto; display: block; }

/* ── Header ────────────────────────────────── */
.cms-header { border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 10; }
.cms-header__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.cms-header__brand { font-weight: 700; font-size: 1.25rem; color: var(--brand-primary); text-decoration: none; }
.cms-header__nav { display: flex; gap: 1.25rem; flex: 1; }
.cms-header__nav-link { color: var(--text); text-decoration: none; font-weight: 500; }
.cms-header__nav-link.is-active { color: var(--brand-primary); }
.cms-header__actions { display: flex; gap: 1rem; align-items: center; }
.cms-header__locale-switch { display: flex; gap: 0.5rem; font-size: 0.9rem; }
.cms-header__login {
    padding: 0.5rem 1rem;
    background: var(--brand-primary);
    color: white;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
}

/* ── Hero ────────────────────────────────── */
.hero { position: relative; padding: 4rem 1.25rem; background: var(--surface-alt); }
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.25; z-index: 0; }
.hero__inner { position: relative; max-width: var(--max-width); margin: 0 auto; z-index: 1; }
.hero__heading { font-size: clamp(2rem, 4vw, 3.25rem); margin: 0 0 1rem; line-height: 1.15; }
.hero__subheading { font-size: 1.15rem; color: var(--text-muted); max-width: 42rem; margin: 0 0 1.5rem; }
.hero__price { font-size: 1.1rem; margin: 0 0 1.5rem; }
.hero__price-amount { font-weight: 700; font-size: 1.4rem; color: var(--brand-primary); }
.hero__cta { display: inline-block; }

/* ── Buttons ────────────────────────────────── */
.btn { display: inline-block; padding: 0.75rem 1.5rem; border-radius: var(--radius); font-weight: 600; text-decoration: none; }
.btn--primary { background: var(--brand-primary); color: white; }
.btn--primary:hover { background: var(--brand-primary-dark); color: white; }
.btn--secondary { background: transparent; color: var(--brand-primary); border: 2px solid var(--brand-primary); }

/* ── Page shells ────────────────────────────────── */
.cms-main { max-width: var(--max-width); margin: 2.5rem auto; padding: 0 1.25rem; }
.page__header { margin-bottom: 2rem; }
.page__title { font-size: clamp(1.75rem, 3vw, 2.5rem); margin: 0 0 0.5rem; }
.page__intro { font-size: 1.15rem; color: var(--text-muted); margin: 0 0 1rem; }
.page__meta { color: var(--text-muted); font-size: 0.95rem; }
.page__hero { width: 100%; border-radius: var(--radius); margin-top: 1rem; }

/* ── Prose (StreamField body) ────────────────────────────────── */
.prose { max-width: 44rem; }
.prose__heading { margin: 2rem 0 0.75rem; }
.prose__paragraph { margin: 0 0 1rem; }
.prose__figure { margin: 2rem 0; }
.prose__figcaption { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.5rem; text-align: center; }
.prose__quote { margin: 2rem 0; padding: 1rem 1.5rem; border-left: 4px solid var(--brand-accent); background: var(--surface-alt); }
.prose--legal { max-width: 50rem; }

/* RTL inversions */
.cms-page--rtl .prose__quote { border-left: none; border-right: 4px solid var(--brand-accent); }

/* ── CTA block ────────────────────────────────── */
.cta { background: var(--surface-alt); padding: 2rem; border-radius: var(--radius); margin: 2rem 0; }
.cta--primary { background: var(--brand-primary); color: white; }
.cta--primary .btn { background: white; color: var(--brand-primary); }
.cta__title { margin: 0 0 0.5rem; }
.cta__body { margin: 0 0 1rem; }

/* ── FAQ ────────────────────────────────── */
.faq { margin: 2rem 0; }
.faq__list { padding: 0; }
.faq__item { border-bottom: 1px solid var(--border); padding: 1rem 0; }
.faq__question { cursor: pointer; font-weight: 600; font-size: 1.05rem; }
.faq__answer { padding-top: 0.75rem; color: var(--text-muted); }

/* ── Feature grid ────────────────────────────────── */
.feature-grid { margin: 2.5rem 0; }
.feature-grid__heading { margin: 0 0 1.5rem; }
.feature-grid__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.feature-grid__item { background: var(--surface-alt); padding: 1.5rem; border-radius: var(--radius); }
.feature-grid__icon { font-size: 1.75rem; display: block; margin-bottom: 0.5rem; }
.feature-grid__item-title { margin: 0 0 0.5rem; font-size: 1.1rem; }
.feature-grid__item-body { margin: 0; color: var(--text-muted); }

/* ── Blog list ────────────────────────────────── */
.blog-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.5rem; list-style: none; padding: 0; }
.blog-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .15s; }
.blog-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.blog-card__image { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.blog-card__body { padding: 1.25rem; }
.blog-card__title { margin: 0 0 0.5rem; font-size: 1.2rem; }
.blog-card__intro { margin: 0 0 0.75rem; color: var(--text-muted); }
.blog-card__meta { font-size: 0.85rem; color: var(--text-muted); }

/* ── Tags ────────────────────────────────── */
.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 2rem 0 0; }
.tag-list__item { background: var(--surface-alt); padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.85rem; color: var(--text-muted); }

/* ── Footer ────────────────────────────────── */
.cms-footer { border-top: 1px solid var(--border); padding: 2rem 1.25rem; background: var(--surface-alt); margin-top: 4rem; }
.cms-footer__inner { max-width: var(--max-width); margin: 0 auto; display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cms-footer__copy { margin: 0; color: var(--text-muted); }
.cms-footer__nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.cms-footer__nav a { color: var(--text-muted); text-decoration: none; }
.cms-footer__nav a:hover { color: var(--text); }

/* ══════════════════════════════════════════════════════════
   CLINICAL MANUALS
   Added 2026-07-28. Every class below already existed in the
   block templates and had no CSS at all, so /en/manuals/
   rendered as bare bullets with default-blue links.

   Reference documents, not marketing: one measure, restrained
   colour, generous line-height. Two deliberate hierarchy calls
   — the clinical warning is the loudest element on the page
   (it carries the rules that cause remakes when missed), and
   the feature-grid icon slot renders as a tabular-numeric
   value because preparation figures live there ("1.0–1.5 mm").
   ══════════════════════════════════════════════════════════ */

/* Photon's manuals are orange, not Voxel3Di blue. Scoped to the tenant's
   own body class so the Voxel3Di CMS pages keep the shared shell palette. */
.cms-page--manualindexpage,
.cms-page--servicepage {
    --brand-primary: #c96f16;
    --brand-primary-dark: #a55a10;
    --manual-accent: #f79533;
    --manual-accent-soft: #fff4e8;
    --measure: 68ch;
}

/* ── Shelf: families + manual cards ── */
.manual-families, .manual-list {
    list-style: none; padding: 0; margin: 0 0 1.25rem;
    display: grid; gap: 0.9rem;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}
.manual-family > a, .manual-card__link {
    display: block; height: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--manual-accent);
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
    text-decoration: none; color: inherit;
    transition: border-color .14s, transform .14s, box-shadow .14s;
}
.manual-family > a:hover, .manual-card__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(16, 24, 40, .09);
}
.manual-family__title, .manual-card__title {
    margin: 0 0 0.3rem; font-size: 1.12rem; font-weight: 700; color: var(--text);
}
/* These were inheriting the anchor's underline — they are prose, not links. */
.manual-family__intro, .manual-card__body {
    margin: 0; font-size: 0.92rem; line-height: 1.55;
    color: var(--text-muted); text-decoration: none;
}
.manual-card__image { width: 100%; border-radius: var(--radius); margin-bottom: 0.75rem; display: block; }
.manual-list__empty {
    color: var(--text-muted); font-style: italic; padding: 1.5rem;
    background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius);
}

/* ── Records — the most-read block on any manual ── */
.records { margin: 2rem 0; }
.records__heading { margin: 0 0 0.35rem; font-size: 1.4rem; font-weight: 800; }
.records__intro { margin: 0 0 1.1rem; color: var(--text-muted); max-width: var(--measure); }
.records__types { display: grid; gap: 1rem; }
.records__type {
    border: 1px solid var(--border);
    border-left: 4px solid var(--manual-accent);
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem; background: var(--surface-alt);
}
.records__type-head { margin-bottom: 0.75rem; }
.records__type-title { margin: 0; font-size: 1.06rem; font-weight: 700; }
.records__type-support {
    display: inline-block; margin-top: 0.25rem;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--brand-primary-dark); background: var(--manual-accent-soft);
    padding: 0.12rem 0.55rem; border-radius: 999px;
}
.records__group { margin-bottom: 0.85rem; }
.records__group:last-child { margin-bottom: 0; }
.records__group-title {
    margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted);
}
.records__group--required .records__group-title { color: var(--brand-primary-dark); }
.records__list { margin: 0; padding-left: 1.25rem; font-size: 0.92rem; }
.records__list li { margin-bottom: 0.25rem; }
.records__list--required li { font-weight: 600; }

/* Loudest element in the file, on purpose. */
.records__warning {
    margin-top: 0.85rem; padding: 0.75rem 0.95rem;
    background: #fef2f2; border: 1px solid #fecaca; border-left: 4px solid #dc2626;
    border-radius: var(--radius); color: #7f1d1d; font-size: 0.9rem; line-height: 1.55;
}
.records__warning strong { color: #991b1b; }

/* ── Protocol steps ── */
.protocol { margin: 2rem 0; }
.protocol__heading { margin: 0 0 0.35rem; font-size: 1.4rem; font-weight: 800; }
.protocol__intro { margin: 0 0 1.1rem; color: var(--text-muted); max-width: var(--measure); }
.protocol__steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.protocol__steps > li {
    counter-increment: step; position: relative;
    padding: 0 0 1.4rem 3rem; border-left: 2px solid var(--border); margin-left: 0.95rem;
}
.protocol__steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.protocol__steps > li::before {
    content: counter(step); position: absolute; left: -1rem; top: -0.15rem;
    width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: var(--manual-accent); color: #fff;
    font-weight: 800; font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
}
.protocol__step-title { margin: 0 0 0.25rem; font-size: 1.02rem; font-weight: 700; }
.protocol__step-body { margin: 0; max-width: var(--measure); }
.protocol__step-body p { margin: 0 0 0.5rem; }
.protocol__condition {
    display: inline-block; margin-top: 0.35rem;
    font-size: 0.74rem; font-weight: 700;
    color: var(--brand-primary-dark); background: var(--manual-accent-soft);
    padding: 0.15rem 0.6rem; border-radius: 999px;
}
.protocol__step-image { border-radius: var(--radius); margin-top: 0.6rem; }

/* ── Comparison table — scrolls in its own box, never the page ── */
.svc-compare { margin: 2rem 0; }
.svc-compare__heading { margin: 0 0 0.85rem; font-size: 1.4rem; font-weight: 800; }
.svc-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.svc-compare__table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 38rem; }
.svc-compare__table th, .svc-compare__table td {
    text-align: left; padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--border); vertical-align: top;
}
.svc-compare__table thead th {
    font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
    color: var(--text-muted); border-bottom: 2px solid var(--border); white-space: nowrap;
}
.svc-compare__table tbody tr:hover { background: var(--surface-alt); }
.svc-compare__table tbody td:first-child { font-weight: 600; }
.svc-compare__cost { font-weight: 700; color: var(--brand-primary-dark); white-space: nowrap; }
.svc-compare__footnote { margin: 0.6rem 0 0; font-size: 0.84rem; color: var(--text-muted); }

/* ── Feature grid — preparation figures live in the icon slot ── */
.cms-page--servicepage .feature-grid__list {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.cms-page--servicepage .feature-grid__item {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0.95rem 1.05rem; background: var(--surface);
}
.cms-page--servicepage .feature-grid__icon {
    display: block; margin-bottom: 0.3rem;
    font-size: 1.05rem; font-weight: 800; color: var(--brand-primary-dark);
    font-variant-numeric: tabular-nums;
}
.feature-grid__item-title { margin: 0 0 0.25rem; font-size: 0.92rem; font-weight: 700; }
.feature-grid__item-body { margin: 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }

/* ── FAQ ── */
.cms-page--servicepage .faq__list { display: grid; gap: 0.6rem; }
.cms-page--servicepage .faq__item {
    border: 1px solid var(--border); border-bottom: 1px solid var(--border);
    border-radius: var(--radius); padding: 0.95rem 1.1rem; background: var(--surface-alt);
}
.faq__question { margin: 0 0 0.35rem; font-size: 0.98rem; font-weight: 700; }
.faq__answer { margin: 0; font-size: 0.92rem; color: var(--text-muted); max-width: var(--measure); }
.faq__answer p { margin: 0 0 0.5rem; }
.faq__answer p:last-child { margin-bottom: 0; }

/* ── CTA ── */
.cms-page--servicepage .cta {
    margin: 2rem 0 0; padding: 1.4rem 1.6rem;
    background: var(--manual-accent-soft); border: 1px solid #fcd9ae; border-radius: var(--radius);
}
.cta__title { margin: 0 0 0.3rem; font-size: 1.12rem; font-weight: 800; }
.cta__body { margin: 0 0 0.85rem; color: var(--text-muted); max-width: var(--measure); }
.cms-page--servicepage .cta .btn {
    display: inline-block; padding: 0.6rem 1.25rem;
    background: var(--manual-accent); color: #fff; border-radius: 999px;
    text-decoration: none; font-weight: 700; font-size: 0.92rem;
}
.cms-page--servicepage .cta .btn:hover { background: var(--brand-primary-dark); color: #fff; }

/* Draft banner — these ship pending clinical sign-off and say so up top. */
.cms-page--servicepage .prose__paragraph:first-child strong:first-child { color: var(--brand-primary-dark); }
.cms-page--servicepage .prose__paragraph { max-width: var(--measure); }

@media (max-width: 45rem) {
    .manual-families, .manual-list { grid-template-columns: 1fr; }
    .records__type { padding: 1rem 1.05rem; }
    .protocol__steps > li { padding-left: 2.5rem; }
}

/* Manuals get printed and pinned up in surgeries. */
@media print {
    .cms-header, .cms-footer, .cta { display: none; }
    .records__type, .faq__item, .protocol__steps > li,
    .feature-grid__item, .svc-compare__table tr { break-inside: avoid; }
    .records__heading, .protocol__heading, .prose__heading { break-after: avoid; }
    .svc-compare__scroll { overflow: visible; }
    .svc-compare__table { min-width: 0; }
}

/* RTL — the Arabic manual tree. */
.cms-page--rtl .records__type, .cms-page--rtl .manual-family > a {
    border-left: 1px solid var(--border); border-right: 4px solid var(--manual-accent);
}
.cms-page--rtl .records__warning { border-left: 1px solid #fecaca; border-right: 4px solid #dc2626; }
.cms-page--rtl .protocol__steps > li {
    border-left: 0; border-right: 2px solid var(--border);
    margin-left: 0; margin-right: 0.95rem; padding: 0 3rem 1.4rem 0;
}
.cms-page--rtl .protocol__steps > li::before { left: auto; right: -1rem; }
.cms-page--rtl .records__list { padding-left: 0; padding-right: 1.25rem; }

/* ── Verification badge ──
   Three states, three weights. "Draft" has to stop someone reaching for a
   handpiece; "source-verified" says the numbers are real but Photon has not
   signed them; "clinically approved" is the only one that is reassuring. */
.verify {
    margin: 0 0 1.25rem; padding: 0.8rem 1.05rem;
    border-radius: var(--radius); font-size: 0.9rem; line-height: 1.55;
    border: 1px solid; border-left-width: 4px;
}
.verify--unverified {
    background: #fef2f2; border-color: #fecaca; border-left-color: #dc2626; color: #7f1d1d;
}
.verify--source_verified {
    background: #fffbeb; border-color: #fde68a; border-left-color: #d97706; color: #78350f;
}
.verify--clinically_signed {
    background: #f0fdf4; border-color: #bbf7d0; border-left-color: #16a34a; color: #14532d;
}
.cms-page--rtl .verify { border-left-width: 1px; border-right-width: 4px; }

/* ── Diagrams ──
   Inline SVG figures. Colours come from custom properties so the drawings
   follow the page into print and RTL instead of baking hex into the markup. */
.diagram {
    margin: 1.6rem 0; padding: 1.1rem 1.2rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius);
    --diag-tooth: #374151;
    --diag-prep: #d97706;
    --diag-dim: #b45309;
    --diag-warn: #dc2626;
    --diag-pink: #f2b8b5;
}
.diagram__title {
    margin: 0 0 0.6rem; font-size: 0.98rem; font-weight: 700; color: var(--text);
}
.diagram__canvas { display: block; }
.diagram__canvas svg { display: block; width: 100%; height: auto; max-width: 34rem; margin: 0 auto; }
.diagram__caption {
    margin-top: 0.7rem; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5;
}
.diagram__source { display: block; margin-top: 0.2rem; font-size: 0.78rem; opacity: 0.8; }

/* Type inside the drawings. Kept here rather than inline so a figure restyles
   with the page and stays legible when printed. */
.diag__label { font: 700 13px var(--font-body); fill: var(--text); }
.diag__dim { font: 700 12px var(--font-body); fill: var(--diag-dim); }
.diag__dim-sub { font: 500 10.5px var(--font-body); fill: var(--text-muted); }
.diag__note { font: 500 11px var(--font-body); fill: var(--text-muted); }
.diag__warn-note { font: 700 11px var(--font-body); fill: var(--diag-warn); }
.diag__ok { font: 700 12px var(--font-body); fill: #15803d; }
.diag__warn { font: 700 12px var(--font-body); fill: var(--diag-warn); }

@media print {
    /* Ink-friendly, and never split a figure from its caption. */
    .diagram { break-inside: avoid; border-color: #ccc; background: #fff; }
    .diagram { --diag-tooth: #000; --diag-dim: #000; --diag-prep: #666; }
}

/* ── Manual reading layout ──
   Contents rail beside the body. These pages run long and a dentist arrives
   wanting one section, not a linear read. The rail is built from the page's
   own heading blocks, so it cannot drift from the content. */
.manual-layout { display: block; }
.manual-anchor { scroll-margin-top: 5rem; }   /* clear the sticky header */

.manual-toc { display: none; }
.manual-toc__label {
    margin: 0 0 0.5rem; font-size: 0.7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted);
}
.manual-toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.manual-toc__list a {
    display: block; padding: 0.25rem 0 0.25rem 0.7rem;
    border-left: 2px solid var(--border);
    font-size: 0.85rem; line-height: 1.4;
    color: var(--text-muted); text-decoration: none;
}
.manual-toc__list a:hover { color: var(--brand-primary-dark); border-left-color: var(--manual-accent); }
/* "What to send us" is why most dentists open the page — weight it. */
.manual-toc__key { font-weight: 700; color: var(--text) !important; }

@media (min-width: 62rem) {
    .manual-layout { display: grid; grid-template-columns: 15rem 1fr; gap: 2rem; align-items: start; }
    .manual-toc { display: block; position: sticky; top: 5rem; }
}
@media print { .manual-toc { display: none; } .manual-layout { display: block; } }

/* ── Clinical figures ──
   Photographs of the lab's own work. Dark specimen shots on a light page need
   a frame or they float; the caption carries the credit inline. */
.clinfig {
    margin: 1.6rem 0; padding: 0.75rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius);
}
.clinfig__img {
    display: block; width: 100%; height: auto;
    border-radius: calc(var(--radius) - 2px); background: #000;
}
.clinfig__caption {
    margin-top: 0.6rem; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5;
}
.clinfig__credit { display: block; margin-top: 0.15rem; font-size: 0.76rem; opacity: 0.75; }
@media print { .clinfig { break-inside: avoid; border-color: #ccc; } }

/* ── Shell alignment with the pricing SPA ──
   The manuals and /p/pricing are the same lab. Before this the manuals used a
   plain white bar, a text wordmark and the system font while the pricing page
   had the Photon logo, an orange gradient and Rubik — they read as two
   different products. */
.cms-page { font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.cms-header__brand { display: inline-flex; align-items: center; gap: 0.55rem; }
/* Wordmark, not the Flow app icon — see the comment in _header.html. */
.cms-header__wordmark { font-weight: 700; letter-spacing: -0.01em; }

/* Warm banner behind the page title, echoing the pricing hero without
   shouting — a manual is a reference document, not a landing page.

   The ServicePage selectors here were `.service__hero` / `.service__hero-heading`
   / `.service__hero-sub`, none of which exist: service_page.html renders
   `.hero.hero--service` with `.hero__heading` and `.hero__subheading`. So the
   whole rule was dead and the manuals kept the plain grey `.hero` — the flat
   slab in the report. Written against the template's real class names now. */
.cms-page--manualindexpage .page__header,
.cms-page--servicepage .hero--service {
    background: linear-gradient(135deg, #f79533 0%, #d97a1d 100%);
    color: #fff;
    border-radius: var(--radius);
    padding: 1.6rem 1.75rem;
    margin-bottom: 1.5rem;
}
.cms-page--manualindexpage .page__title,
.cms-page--servicepage .hero--service .hero__heading { color: #fff; }
.cms-page--manualindexpage .page__intro,
.cms-page--servicepage .hero--service .hero__subheading { color: rgba(255,255,255,.92); }

/* With a hero photograph the base `.hero__image` rule drops it to 0.25 opacity,
   which over the orange gradient reads as mud rather than as a picture. Show
   the photograph properly and lay the brand colour over it as a scrim that
   fades out to the right, so the heading keeps its contrast and the image is
   still legible where it matters. Pages with no hero image are untouched and
   keep the flat gradient above. */
.cms-page--servicepage .hero--service { position: relative; overflow: hidden; }
.cms-page--servicepage .hero--service .hero__image { opacity: 1; }
.cms-page--servicepage .hero--service:has(.hero__image)::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(100deg,
        rgba(176, 88, 18, 0.95) 0%,
        rgba(176, 88, 18, 0.86) 40%,
        rgba(176, 88, 18, 0.30) 100%);
}
/* Taller banner when there is something to look at. */
.cms-page--servicepage .hero--service:has(.hero__image) { padding: 2.6rem 1.75rem; }

/* `.hero__subheading` carries a 1.5rem bottom margin for the price/CTA that
   follows it on a marketing ServicePage. A manual has neither, so that margin
   was left dangling as empty banner. Collapse whatever ends up last. */
.cms-page--servicepage .hero--service .hero__inner > :last-child { margin-bottom: 0; }

/* On the gradient the accent colours vanish into their own background. */
.cms-page--servicepage .hero--service .hero__price,
.cms-page--servicepage .hero--service .hero__price-amount { color: #fff; }
.cms-page--servicepage .hero--service .hero__cta {
    background: #fff; color: #b8620f; border-color: #fff;
}

@media (max-width: 45rem) {
    .cms-page--manualindexpage .page__header,
    .cms-page--servicepage .hero--service { padding: 1.1rem 1.15rem; }
}
@media print {
    .cms-page--manualindexpage .page__header,
    .cms-page--servicepage .hero--service { background: none; color: #000; padding: 0; }
    .cms-page--manualindexpage .page__title,
    .cms-page--servicepage .hero--service .hero__heading { color: #000; }
    .cms-page--servicepage .hero--service .hero__subheading { color: #444; }
}

/* ── Shelf cards: one card per manual ──
   Each family holds exactly one manual, so a family card wrapping a manual
   card was a box inside a box for no gain. The shelf lists the documents
   themselves; the family name rides along as an eyebrow. Reuses the card
   styling above rather than declaring a second, competing one. */
.manual-card__eyebrow {
    display: block; margin: 0 0 0.35rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--manual-accent, #d97a1d);
}
/* Bleed the photograph to the card edges — the anchor carries the padding. */
.manual-card--photo .manual-card__link { padding: 0; overflow: hidden; }
.manual-card--photo .manual-card__image {
    border-radius: 0; margin: 0 0 0.9rem;
    aspect-ratio: 16 / 9; object-fit: cover;
}
.manual-card--photo .manual-card__eyebrow,
.manual-card--photo .manual-card__title { margin-left: 1.4rem; margin-right: 1.4rem; }
.manual-card--photo .manual-card__body { margin: 0 1.4rem 1.25rem; }