/* dieterdavis.com — Customer Experience Analytics reference sheets
   Fixed US-Letter landscape sheets (1056 x 816 px = 11in x 8.5in @ 96dpi) laid on
   the dark site background. The sheet is the print unit; everything marked
   .screen-only is chrome around it. Scaled to the viewport by a tiny inline
   script on the page; without it the sheet scrolls horizontally instead. */

.cx-sheets {
  --paper:#ffffff; --ink:#1c2733; --ink-2:#4b5866; --ink-3:#7c8793; --rule:#d5dae0; --wash:#f3f5f7;
  --ana:#2a5d8f; --ana-wash:#e6eef6; --swat:#d2691e; --swat-wash:#fbeee3;
  --s1:#aab3bd; --s2:#6f8aa3; --s3:#2a5d8f; --s4:#d2691e; --s5:#1c2733;
  --display:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sheet-font:"IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ---- sheet frame (screen) ---- */
.sheet-wrap {
  position: relative; left: 50%; transform: translateX(-50%);
  width: min(1056px, calc(100vw - 3rem));
  margin: 1.6rem 0 2rem; overflow-x: auto; overflow-y: hidden;
}
.sheet-wrap.fit { overflow: hidden; }
.sheet {
  width: 1056px; height: 816px; background: var(--paper); color: var(--ink);
  font-family: var(--sheet-font); transform-origin: top left;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 32px rgba(0,0,0,.45);
  padding: 34px 44px 30px; display: flex; flex-direction: column;
}
.sheet-wrap.fit .sheet { position: absolute; top: 0; left: 0; }

/* ---- sheet typography (overrides the global h1/h2/h3/p/a rules) ---- */
.sheet .eyebrow { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.sheet h1 { font-family: var(--display); font-weight: 600; font-size: 27px; line-height: 1.15; margin: 4px 0 0; text-wrap: balance; letter-spacing: -.005em; color: var(--ink); }
.sheet h2 { font-family: var(--display); font-weight: 600; font-size: 16px; margin: 0; line-height: 1.2; color: var(--ink); }
.sheet h3 { font-family: var(--sheet-font); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 3px; font-weight: 600; color: var(--ink-2); line-height: 1.3; }
.sheet p { margin: 0; font-size: 11px; line-height: 1.38; color: var(--ink); }
.sheet ul, .sheet ol { margin: 0; padding-left: 14px; font-size: 11px; line-height: 1.38; color: var(--ink); }
.sheet li { margin: 0 0 2px; }
.sheet a { color: var(--ana); text-decoration: none; border-bottom: 1px solid currentColor; }
.sheet a:hover { color: var(--swat); text-decoration: none; }
.sheet b, .sheet strong { color: inherit; }
.sheet .head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; border-bottom: 1.5px solid var(--ink); padding-bottom: 10px; }
.sheet .head .sub { font-size: 12px; color: var(--ink-2); max-width: 380px; text-align: right; line-height: 1.4; }
.sheet .foot { margin-top: auto; border-top: 1px solid var(--rule); padding-top: 8px; display: flex; justify-content: space-between; gap: 16px; font-size: 10.5px; color: var(--ink-3); }
.sheet .foot .sig { color: var(--ink-2); white-space: nowrap; }
.sheet .foot .sig b { font-weight: 600; color: var(--ink); }

/* ---- Stages: sheet 1, the staircase ---- */
.sheet-stages p { font-size: 11.5px; line-height: 1.45; }
.stairs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end; margin-top: 14px; height: 540px; }
.step { display: flex; flex-direction: column; border: 1.2px solid var(--ink); background: var(--paper); }
.step .cap { color: #fff; padding: 9px 11px 8px; display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: baseline; }
.step .cap .num { font-family: var(--display); font-size: 26px; font-weight: 600; line-height: 1; grid-row: 1 / span 2; }
.step .cap .name { font-family: var(--display); font-size: 16px; font-weight: 600; line-height: 1.1; }
.step .cap .tag { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .9; margin-top: 2px; }
.step .body { padding: 9px 11px 10px; display: grid; gap: 7px; align-content: start; flex: 1; }
.step .body p { font-size: 10.8px; line-height: 1.4; color: var(--ink-2); }
.step .body b { display: block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 1px; }
.step .body .lead { color: var(--ink); font-weight: 500; font-size: 11.2px; }
.s1 { height: 345px; } .s1 .cap { background: var(--s1); }
.s2 { height: 394px; } .s2 .cap { background: var(--s2); }
.s3 { height: 443px; } .s3 .cap { background: var(--s3); }
.s4 { height: 492px; } .s4 .cap { background: var(--s4); }
.s5 { height: 540px; } .s5 .cap { background: var(--s5); }
.team-mark { font-size: 9.5px; padding: 3px 7px; border-radius: 2px; font-weight: 600; letter-spacing: .04em; justify-self: start; }
.team-mark.ana { background: var(--ana-wash); color: var(--ana); border: 1px solid var(--ana); }
.team-mark.swat { background: var(--swat-wash); color: var(--swat); border: 1px solid var(--swat); }
.axes { margin-top: 10px; display: grid; gap: 6px; }
.axis { display: grid; grid-template-columns: 118px 1fr; gap: 12px; align-items: center; font-size: 10.5px; }
.axis .lab { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; text-align: right; }
.axis .bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; border-top: 1px solid var(--ink); padding-top: 5px; color: var(--ink-2); }
.axis .bar span { position: relative; }
.axis .bar span::before { content: ""; position: absolute; left: 0; top: -8px; width: 1px; height: 5px; background: var(--ink); }

/* ---- Stages: sheet 2, the detail grid ---- */
.stage-grid { margin-top: 10px; display: grid; grid-template-columns: 150px 1.35fr 1fr 1fr 1.15fr; border-top: 1.5px solid var(--ink); }
.stage-grid > div { padding: 6px 10px 7px; border-bottom: 1px solid var(--rule); font-size: 10.4px; line-height: 1.38; color: var(--ink-2); }
.stage-grid .th { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding-top: 7px; padding-bottom: 5px; border-bottom: 1px solid var(--ink); }
.stage-grid .stage { color: var(--ink); border-left: 5px solid; padding-left: 9px; }
.stage-grid .stage .nm { font-family: var(--display); font-size: 15px; font-weight: 600; display: block; line-height: 1.15; }
.stage-grid .stage .tl { font-size: 10px; color: var(--ink-3); display: block; margin-top: 2px; line-height: 1.3; }
.stage-grid .c1 { border-color: var(--s1); } .stage-grid .c2 { border-color: var(--s2); } .stage-grid .c3 { border-color: var(--s3); }
.stage-grid .c4 { border-color: var(--s4); } .stage-grid .c5 { border-color: var(--s5); }
.stage-grid .unlock { color: var(--ink); }
.stage-grid .unlock::before { content: "\2192  "; color: var(--swat); font-weight: 600; }
.use { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); }
.use p { font-size: 10.5px; color: var(--ink-2); }
.use .rule, .engage .rule { background: var(--wash); padding: 9px 12px; border-left: 5px solid var(--ink); }
.use .rule h3, .engage .rule h3 { color: var(--ink); }

/* ---- Operating model: sheet 1, the illustration ---- */
.sheet figure { margin: 14px 0 0; }
.sheet figure svg { width: 100%; height: auto; display: block; color: var(--ink); }
.sheet figcaption { font-size: 10.5px; color: var(--ink-3); margin-top: 4px; }
.takeaways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); }
.takeaways p { font-size: 11px; color: var(--ink-2); }
.takeaways b { display: block; color: var(--ink); font-weight: 600; font-size: 11.5px; margin-bottom: 2px; }

/* ---- Operating model: sheet 2, the teams ---- */
.teams { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 10px; }
.team { display: grid; gap: 7px; align-content: start; }
.team-head { display: flex; align-items: baseline; gap: 10px; padding: 6px 12px; border-left: 5px solid; }
.team-head .n { font-family: var(--display); font-size: 22px; font-weight: 600; line-height: 1; }
.team-head small { font-size: 11px; color: var(--ink-2); letter-spacing: .04em; text-transform: uppercase; font-weight: 500; }
.ana .team-head { border-color: var(--ana); background: var(--ana-wash); }
.swat .team-head { border-color: var(--swat); background: var(--swat-wash); }
.team.ana h3 { color: var(--ana); } .team.swat h3 { color: var(--swat); }
.block { padding: 0 12px; }
.loop { counter-reset: step; display: grid; gap: 3px; padding: 0; margin: 0; list-style: none; }
.loop li { display: grid; grid-template-columns: 18px 1fr; gap: 6px; font-size: 11px; line-height: 1.36; }
.loop li::before { counter-increment: step; content: counter(step); font-weight: 600; color: var(--swat); font-family: var(--display); font-size: 13px; }
.loop b { font-weight: 600; }
.engage { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 18px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule); }
.engage .rule { padding: 8px 12px; }
.engage p { font-size: 10.5px; color: var(--ink-2); }

/* ---- print: one sheet per US-Letter landscape page, nothing else ---- */
@media print {
  @page { size: 11in 8.5in; margin: 0; }
  .cx-sheets .screen-only, .cx-sheets .site-header, .cx-sheets .site-footer { display: none !important; }
  .cx-sheets main { max-width: none; padding: 0; margin: 0; }
  /* !important beats the inline sizes the fit script wrote for the screen */
  .cx-sheets .sheet-wrap {
    left: auto !important; transform: none !important; width: 11in !important; height: 8.5in !important;
    margin: 0; overflow: hidden; break-after: page; page-break-after: always;
  }
  .cx-sheets .sheet-wrap:last-of-type { break-after: auto; page-break-after: auto; }
  .cx-sheets .sheet { position: static; transform: none !important; box-shadow: none; width: 11in; height: 8.5in; }
  .cx-sheets .sheet a { color: var(--ana); }
  .cx-sheets .sheet h1, .cx-sheets .sheet h2, .cx-sheets .sheet h3, .cx-sheets .sheet b { color: inherit; }
  .cx-sheets .sheet .cap, .cx-sheets .sheet .cap .name, .cx-sheets .sheet .cap .num, .cx-sheets .sheet .cap .tag { color: #fff; }
  .cx-sheets .sheet .foot .sig b { color: var(--ink); }
}