/* Print: a plain, readable copy of the page. Linked with media="print" (index.html): it never blocks rendering, though a browser may still fetch it at low priority.
   On screen the page is a scroll story (pinned scenes, a fixed globe, one-time reveals, one panel at a time); on paper
   everything is static, open and visible, in dark ink on white whichever theme the visitor chose. No text relies on a
   background: browsers leave backgrounds out of a printout by default. */
@page { margin: 14mm; }

:root, [data-theme="dark"] {
  color-scheme: light;
  --bg: #fff; --bg-glow: #fff; --surface: #fff; --surface-solid: #fff; --chip-bg: #fff; --edge: #c9cedd;
  --ink: #0b1020; --ink-2: #1c2338; --muted: #3d4560; --line: #c9cedd; --ring: #0b1020;
  --accent: #2433c9; --ok: #0a6b45; --warn: #8a5400; --risk: #b3321f; --error: #b42318;
  --btn-bg: #fff; --btn-ink: #0b1020; --plan-cta: #fff; --plan-cta-ink: #0b1020;
  --shadow: 0 0 0; --photo-filter: none; --halo-opacity: 0; --grain: 0; --rest-mix: 100%;
}
html { overflow: visible; }
body { background: #fff; color: var(--ink); min-height: 0; }

/* Screen-only parts: the nav and menu, the custom cursor, the globe and everything around it, the health check and the form
   (neither can be used on paper). The footer carries the contact details. */
body::after, .cursor, .nav, .sheet, .skip-link, .stage, .hero__horizon, [data-slot], .orbit-tabs, .health, .assessment__card { display: none !important; }

/* Pinned scenes become ordinary sections. */
[data-scene], [data-pin], .hero { position: static !important; height: auto !important; min-height: 0 !important; }
[data-pin] { display: block !important; padding: 0 !important; margin-inline: 0 !important; width: auto !important; }
.hero { padding: 0 !important; }
.services__body, .process__pin { display: block !important; }
section { padding-block: 8mm !important; }
.wrap { width: auto !important; margin-inline: 0 !important; padding-top: 0 !important; }
.eyebrow, .section-head, h1, h2, h3, summary { break-after: avoid; }
.plan, .panel, .faq__item, .sla__row, .step, .outcomes li, .facts div, figure { break-inside: avoid; }

/* Everything shows: no reveal waiting for a scroll, no animation, no fade. Shadows would print as grey smudges. */
* { opacity: 1 !important; }
*, *::before, *::after { transition: none !important; animation: none !important; box-shadow: none !important; }
/* Two screen decorations paint over their neighbours when printed (a feathered strip behind the tool logos, the plan cards' pointer ring). */
.tools::before, .plan::before, .compare summary::after, .faq__item summary::after { display: none !important; } /* the last two are "+" buttons: the answers print open */
[data-reveal], .hero__title .line > span, .outcomes h3, .outcomes p { translate: none !important; transform: none !important; }

/* Every service panel and process step, not just the selected one. */
.panel, .panel[hidden] { display: block !important; visibility: visible !important; grid-area: auto !important; margin-top: 12px; }
.services__panels { display: block !important; max-width: none !important; }
.panel::before { content: attr(data-service); display: block; margin-bottom: 10px; font: 500 .75rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.step { grid-area: auto !important; color: var(--ink-2) !important; }
.step h3 { color: var(--ink) !important; }
/* Needed on short pages (landscape or small paper): sections.css clips inactive step text and small-phone outcome lines to 1px while pinned. */
.step p, .outcomes p { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; white-space: normal !important; }

/* Plans stack as plain blocks (a grid fragments badly across pages); the featured card stops bulging past its row. */
.plans__grid { display: block !important; margin-top: 8mm !important; }
.plan { margin: 0 0 5mm !important; padding: 5mm 6mm !important; }
.plan__pitch { min-height: 0 !important; }

/* The statement is gradient-filled on screen; on paper it is plain ink. */
.problem__fill { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--ink) !important; }

/* Buttons and badges print as outlines, since a filled one would lose its text without its background. */
.btn, .plan--featured, .plan__badge { background: none !important; border: 1px solid var(--ink) !important; color: var(--ink) !important; }
.plan__badge { position: static !important; translate: none !important; align-self: flex-start; }

/* Closed disclosures (FAQ answers, the comparison table) print open where the browser allows it. */
details::details-content { content-visibility: visible; display: block; }