/* ==========================================================================
   print.css — the page as a document
   A dark marketing page printed as-is is a fixed navigation bar stamped over
   every sheet, white text on paper the printer renders as grey, and diagrams
   that carry no information in ink. Printing is rare but the result should
   still be something a person can hand to someone.
   ========================================================================== */
@media print {
  :root {
    --bg: #fff; --bg-sink: #fff;
    --fg: #000; --fg-soft: #222; --fg-dim: #444; --fg-faint: #555;
    --hairline: rgba(0, 0, 0, 0.18);
    --hairline-2: rgba(0, 0, 0, 0.3);
    --surface: transparent; --surface-2: transparent;
  }

  body { background: #fff; color: #000; }

  /* The fixed bar would otherwise print on top of every page. */
  .nav, .scroll-cue, .langhint, .hero__aurora, .nav__burger { display: none !important; }

  /* `.hero::after` paints the dark scrim that holds the headline on screen.
     Most browsers drop background graphics when printing, so it usually
     vanishes — but a reader who ticks "Background graphics", which is a normal
     thing to do for a page that looks like this, got black text on a black
     field across the whole first sheet. The stylesheet had been edited three
     times across these rounds and never once rendered and looked at. */
  .hero::after { display: none !important; }

  /* Same reasoning for the glows: a shadow is a background graphic. */
  .btn, .btn--primary, .card, .stage, .surface { box-shadow: none !important; }

  /* Reveals and pinned scrubbing have no meaning on paper. */
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .scene__track { height: auto !important; }
  .scene__pin { position: static !important; height: auto !important; }

  .section { padding-block: 1.6cm; break-inside: avoid-page; }
  .hero { min-height: auto; padding-block: 1cm 1.6cm; }
  h1 { font-size: 30pt; }
  h2 { font-size: 20pt; }
  h3 { font-size: 12pt; }
  body, p, li { font-size: 10.5pt; }

  h1, h2, h3 { break-after: avoid-page; }
  .card, .scales__card, .open__col, .hz__item, .unit__step, .faq__item, .stage {
    break-inside: avoid-page;
    border-color: rgba(0, 0, 0, 0.2);
    background: none !important;
  }

  /* Answers are the content; a collapsed <details> prints as a heading alone. */
  .faq__item p { display: block !important; }

  /* Gradient text prints as nothing when backgrounds are dropped. The nav is
     hidden on paper, but the FOOTER carries the same wordmark and is not — so
     the printed page lost the product's own name at the bottom of every copy. */
  .grad-text { color: #000 !important; -webkit-text-fill-color: #000 !important; }
  .btn--primary { color: #000 !important; background: none !important; border: 1px solid #000; }

  /* A URL the reader cannot click is worth printing next to its label. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt; color: #555; word-break: break-all;
  }
  .brand::after, .btn::after { content: none !important; }

  /* The diagrams are drawn for a dark surface; in ink they are empty boxes. */
  [data-diagram], .surface { display: none; }

  /* Paper has no tabs. Five of the six use cases and four of the five
     architecture details were `hidden` behind controls, so a printed copy
     carried Legal and L3 only — and the Today / With WorkspaceX switch
     printed as a button beside the empty band its diagram had left. Every
     panel and caption prints; the controls and the empty stage do not. */
  .case[hidden], [data-layer-detail][hidden] { display: block !important; }
  .case { break-inside: avoid-page; margin-bottom: 0.6cm; }
  [data-layer-detail]::before {
    content: attr(data-layer-detail) " · "; text-transform: uppercase; font-weight: 600;
  }
  .switch, .cases__tabs, .compare { display: none !important; }
  .stage__captions { display: block !important; }
  .stage__caption.is-off { visibility: visible !important; }
}