/* Diatrace slide decks. Loaded after site.css (tokens, fonts, .icon).
   Spec: design.md §7. Every size inside a slide is in cqw (1cqw = 1% of the
   slide's width) so a slide is identical on screen, projector and paper.
   Screen: a column of slides, arrow keys to move. Print: one slide per page. */

:root{
  --slide-w:min(96vw,calc((100vh - 40px) * 16 / 9));
  --g:6cqw;              /* side gutter */
  --rule-strong:rgba(0,0,0,.22);
  --grey-clause:rgba(0,0,0,.42);
  --deck:"";
  --total:"";
}

/* ---------- Screen shell ---------- */
.deck-body{background:#e6e6e2;min-height:100vh}
.deck{counter-reset:slide;display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px 0 96px}
html:has(.deck-body){scroll-snap-type:y proximity}

.frame{container-type:inline-size;position:relative;width:var(--slide-w);aspect-ratio:16/9;background:var(--surface);color:var(--text);overflow:hidden;border-radius:4px;counter-increment:slide;scroll-snap-align:center;flex:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}

/* Chrome: logo top-left, section top-right, deck name bottom-left, page bottom-right */
.frame::before{content:"";position:absolute;z-index:2;top:2.8cqw;left:var(--g);width:7cqw;height:1.4cqw;background:url('/static/assets/images/diatrace-dark.svg') left center/contain no-repeat}
.frame::after{content:counter(slide,decimal-leading-zero) var(--total);position:absolute;z-index:2;right:var(--g);bottom:2.6cqw;font-size:.78cqw;letter-spacing:.08em;color:var(--text-faint);font-variant-numeric:tabular-nums}
.slide::before,.slide::after{position:absolute;z-index:2;font-size:.78cqw;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
.slide::before{content:attr(data-section);top:3cqw;right:var(--g)}
.slide::after{content:var(--deck);bottom:2.6cqw;left:var(--g)}

.slide{position:absolute;inset:0;display:flex;flex-direction:column;padding:8cqw var(--g) 6.5cqw}
.slide > .fill{flex:1;min-height:0}

/* Dark: footer surface, white type */
.frame--dark{background:var(--surface-inverse);color:#fff;--text-faint:rgba(255,255,255,.4);--text-muted:rgba(255,255,255,.62);--text-subtle:rgba(255,255,255,.5);--rule:rgba(255,255,255,.12);--rule-strong:rgba(255,255,255,.3);--grey-clause:rgba(255,255,255,.42);--ink:#fff}
.frame--dark::before,.frame--cover::before{background-image:url('/static/assets/images/diatrace-light.svg')}
.frame--alt{background:var(--surface-alt)}

/* Cover: full-bleed tinted image, copy bottom-left */
.frame--cover{background:var(--media);color:#fff;--text-faint:rgba(255,255,255,.45);--text-muted:rgba(255,255,255,.7);--grey-clause:rgba(255,255,255,.5)}
.frame--cover::before{top:4.2cqw;width:9cqw;height:1.8cqw}
.frame--cover::after,.frame--cover .slide::after{display:none}
.frame--cover .slide{justify-content:flex-end;padding-bottom:5.5cqw}
.frame--cover .slide::before{top:4.6cqw}
.bleed{position:absolute;inset:0;overflow:hidden;background:var(--media);isolation:isolate}
.bleed img{width:100%;height:100%;object-fit:cover;display:block;mix-blend-mode:luminosity;opacity:.9}
.bleed::after{content:"";position:absolute;inset:0;background:var(--lime);mix-blend-mode:multiply;opacity:.55}
.bleed--shade::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 38%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.72) 100%)}
.frame--cover .slide > *{position:relative;z-index:1}

/* ---------- Type ---------- */
.frame .eyebrow{font-size:.78cqw;letter-spacing:.18em}
.d-display{font-size:6.2cqw;line-height:.98;letter-spacing:-.04em;font-weight:400;max-width:20ch;text-wrap:balance}
.d-title{font-size:4.1cqw;line-height:1.02;letter-spacing:-.035em;font-weight:400;max-width:18ch;text-wrap:balance}
.d-heading{font-size:2.9cqw;line-height:1.08;letter-spacing:-.03em;font-weight:400;max-width:28ch;text-wrap:balance}
.d-statement{font-size:3.1cqw;line-height:1.22;letter-spacing:-.022em;max-width:38ch;text-wrap:pretty}
.d-statement span,.d-heading span,.d-title span,.d-display span{color:var(--grey-clause)}
/* In headlines the grey clause always starts its own line */
.d-heading span,.d-title span,.d-display span{display:block}
.d-lead{font-size:1.3cqw;line-height:1.55;color:var(--text-muted);max-width:60ch;text-wrap:pretty}
.d-body{font-size:1.1cqw;line-height:1.55;color:var(--text-muted);text-wrap:pretty}
.d-item{font-size:1.55cqw;line-height:1.25;letter-spacing:-.01em}
.d-h3{font-size:1.55cqw;line-height:1.2;letter-spacing:-.01em;font-weight:500}
.d-label{font-size:.78cqw;letter-spacing:.18em;text-transform:uppercase;color:var(--text-subtle)}
.d-num{font-size:.85cqw;letter-spacing:.08em;color:var(--text-faint);font-variant-numeric:tabular-nums}
.d-caption{font-size:.85cqw;line-height:1.5;color:var(--text-faint)}
.d-stat{font-size:9cqw;line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.d-stat small{font-size:.3em;letter-spacing:-.01em;color:var(--text-subtle);margin-left:.3cqw}
.frame b{font-weight:500;color:var(--ink)}

.eyebrow + .d-display,.eyebrow + .d-title,.eyebrow + .d-heading,.eyebrow + .d-statement{margin-top:1.6cqw}
.d-display + .d-lead,.d-title + .d-lead,.d-heading + .d-lead{margin-top:1.8cqw}
.d-statement + .d-lead{margin-top:2.4cqw}

.frame .icon{font-size:2.1cqw;color:var(--ink)}
.frame .link{font-size:1.1cqw;gap:.6cqw;border-bottom-width:.14cqw;padding-bottom:.3cqw}
.frame .link .icon{font-size:1.4cqw}

/* ---------- Layout ---------- */
.d-stack{display:flex;flex-direction:column;align-items:flex-start}
.d-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6cqw;align-items:start}
.d-split--even{grid-template-columns:1fr 1fr}
.d-split--wide{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.d-split--end{align-items:end}
.d-split--center{align-items:center}

/* Head row: heading left, lead right on an equal column so it sets in 2–3 wide lines */
.d-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:6cqw;align-items:end}
.d-head .d-lead{max-width:none;text-wrap:balance}

/* Columns on one top rule; .is-key gets the lime edge */
.d-cols{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));border-top:1px solid var(--rule)}
.d-col{display:flex;flex-direction:column;gap:1.1cqw;padding:2.2cqw 2.6cqw 0 0;border-top:.18cqw solid transparent;margin-top:-1px}
.d-col.is-key{border-top-color:var(--lime)}
.d-col__top{display:flex;align-items:center;justify-content:space-between;min-height:2.2cqw}

/* Numbered rows with lime dots */
.d-rows{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule);align-self:stretch}
.d-rows li{display:grid;grid-template-columns:4cqw minmax(0,1fr) auto;align-items:center;gap:1.2cqw;padding:1.45cqw 0;border-bottom:1px solid var(--rule)}
.d-rows li > .d-num{align-self:center}
.d-rows .d-body{margin-top:.35cqw;max-width:52ch}
.d-rows .d-note{font-size:1cqw;color:var(--text-subtle);text-align:right;font-variant-numeric:tabular-nums}
.d-dot{width:.6cqw;height:.6cqw;border-radius:50%;background:var(--lime);display:inline-block}
.d-rows--tight li{padding:1.05cqw 0}
.d-rows--check li{grid-template-columns:3cqw minmax(0,1fr)}
.d-rows--check .icon{font-size:1.6cqw}

/* Journey: nodes on a line. .is-on = traced (lime), .is-gap = broken record (dashed) */
.d-flow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);list-style:none;padding:0;margin:0}
.d-flow li{position:relative;padding:3.2cqw 1cqw 0 0}
.d-flow li::before{content:"";position:absolute;left:0;right:0;top:.95cqw;height:.12cqw;background:var(--rule-strong)}
.d-flow li:last-child::before{right:auto;width:1.2cqw}
.d-flow li::after{content:"";position:absolute;left:0;top:.4cqw;width:1.2cqw;height:1.2cqw;box-sizing:border-box;border-radius:50%;background:var(--surface);border:.14cqw solid var(--ink)}
.frame--dark .d-flow li::after{background:var(--surface-inverse)}
.frame--alt .d-flow li::after{background:var(--surface-alt)}
.d-flow li.is-on::before{background:var(--lime);height:.24cqw;top:.9cqw}
.d-flow li.is-on::after{background:var(--lime);border-color:var(--lime)}
.d-flow li.is-gap::before{background:repeating-linear-gradient(90deg,var(--rule-strong) 0 .6cqw,transparent .6cqw 1.2cqw)}
.d-flow li.is-end::after{background:var(--ink);border-color:var(--ink)}
.d-flow .d-item{font-size:1.35cqw}
.d-flow .d-body{font-size:.95cqw;margin-top:.5cqw}
.d-flow .d-num{display:block;margin-bottom:.6cqw}

/* Bracket under part of a flow: "KP covers this" */
.d-bracket{position:relative;padding-top:1.3cqw;border-top:.14cqw solid var(--lime)}
.d-bracket--muted{border-top:.14cqw dashed var(--rule-strong)}

/* Comparison table */
.d-table{width:100%;border-collapse:collapse;font-size:1.05cqw;line-height:1.45}
.d-table th{font-weight:400;text-align:left;font-size:.78cqw;letter-spacing:.18em;text-transform:uppercase;color:var(--text-subtle);padding:0 2cqw 1cqw 0;vertical-align:bottom}
.d-table td{padding:1.25cqw 2cqw 1.25cqw 0;border-top:1px solid var(--rule);vertical-align:top;color:var(--text-muted)}
.d-table td:first-child{color:var(--ink);font-size:1.3cqw;letter-spacing:-.01em;width:22%}
.d-table .is-key{border-top:.18cqw solid var(--lime);color:var(--ink)}
.d-table th.is-key{border-top:0;color:var(--ink)}

/* Big numbers in a row */
.d-stats{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:0 4cqw;border-top:1px solid var(--rule);padding-top:2.4cqw}
.d-stats .d-stat{font-size:5.6cqw}
.d-stats .d-body{margin-top:1cqw;max-width:36ch}

/* Partner logos in one ink tone (site .logos) */
.d-partners{display:flex;align-items:center;gap:3.5cqw;padding-top:1.8cqw;border-top:1px solid var(--rule)}
.d-partners img{height:2.6cqw;width:auto;filter:brightness(0);opacity:.7}

/* Price block */
.d-price{font-size:4.4cqw;letter-spacing:-.035em;line-height:1}
.d-price small{font-size:1.1cqw;letter-spacing:0;color:var(--text-subtle);margin-left:.3cqw}

/* Panel: the one filled surface */
.d-panel{background:var(--surface-alt);border-radius:.5cqw;padding:2.6cqw}
.frame--alt .d-panel{background:var(--surface)}
.frame--dark .d-panel{background:rgba(255,255,255,.05)}

/* Tag (status label) */
.d-tag{display:inline-flex;align-items:center;gap:.5cqw;font-size:.78cqw;letter-spacing:.14em;text-transform:uppercase;padding:.45cqw .8cqw;border-radius:99px;border:1px solid var(--rule-strong);color:var(--text-subtle)}
.d-tag .d-dot{width:.5cqw;height:.5cqw}

/* Figure: image with hairline edge */
.d-figure img{display:block;width:100%;height:auto;border-radius:.5cqw;box-shadow:0 0 0 1px var(--rule)}
.d-figure figcaption{margin-top:1cqw}

/* Tinted image inside the layout */
.d-media{position:relative;border-radius:.5cqw;overflow:hidden;background:var(--media);isolation:isolate;height:100%}
.d-media img{width:100%;height:100%;object-fit:cover;display:block;mix-blend-mode:luminosity;opacity:.9}
.d-media::after{content:"";position:absolute;inset:0;background:var(--lime);mix-blend-mode:multiply;opacity:.55}

/* Inline diagrams draw with currentColor and these classes */
.d-svg{display:block;width:100%;height:auto;overflow:visible}
.d-svg text{font-family:var(--font);fill:currentColor}
.d-svg .muted{fill:var(--text-muted)}
.d-svg .faint{fill:var(--text-faint)}
.d-svg .stroke{fill:none;stroke:currentColor;stroke-width:1.5}
.d-svg .rule{fill:none;stroke:var(--rule-strong);stroke-width:1}
.d-svg .lime{fill:none;stroke:var(--lime);stroke-width:3}
.d-svg .lime-fill{fill:var(--lime)}
.d-svg .paper{fill:var(--surface)}
.frame--dark .d-svg .paper{fill:var(--surface-inverse)}
.frame--alt .d-svg .paper{fill:var(--surface-alt)}

/* ---------- Phone mock: the public tracking page ---------- */
.d-phone{width:18.5cqw;aspect-ratio:9/18.5;border-radius:3cqw;background:#141414;padding:.7cqw;margin-inline:auto}
.d-phone__screen{height:100%;border-radius:2.4cqw;background:#fff;color:var(--text);overflow:hidden;display:flex;flex-direction:column;padding:2.2cqw 1.6cqw 1.4cqw}
.d-phone__bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.6cqw}
.d-phone__bar img{height:.9cqw;width:auto}
.d-phone .d-label{font-size:.55cqw}
.d-phone__title{font-size:1.45cqw;letter-spacing:-.03em;line-height:1.05;margin-top:.6cqw}
.d-phone__meta{font-size:.72cqw;color:var(--text-muted);margin-top:.4cqw}
.d-phone__score{display:flex;align-items:baseline;gap:.4cqw;background:var(--surface-alt);border-radius:.4cqw;padding:.8cqw .9cqw;margin-top:1.1cqw}
.d-phone__score b{font-size:2cqw;font-weight:400;letter-spacing:-.04em}
.d-phone__score span{font-size:.62cqw;color:var(--text-subtle)}
.d-phone__score em{margin-left:auto;font-style:normal;font-size:.55cqw;letter-spacing:.14em;text-transform:uppercase;color:var(--text-subtle)}
.d-steps{list-style:none;padding:0;margin:1.2cqw 0 0;position:relative}
.d-steps li{position:relative;padding:0 0 .85cqw 1.5cqw;font-size:.78cqw;line-height:1.3}
.d-steps li::before{content:"";position:absolute;left:.18cqw;top:.3cqw;width:.5cqw;height:.5cqw;border-radius:50%;background:var(--lime)}
.d-steps li::after{content:"";position:absolute;left:.4cqw;top:.9cqw;bottom:0;width:.06cqw;background:var(--rule-strong)}
.d-steps li:last-child::after{display:none}
.d-steps small{display:block;font-size:.62cqw;color:var(--text-subtle);margin-top:.12cqw}
.d-phone__foot{margin-top:auto;font-size:.58cqw;color:var(--text-faint);display:flex;align-items:center;gap:.4cqw}
.d-phone__foot .icon{font-size:.85cqw;color:var(--text-faint)}

/* ---------- Spacing utilities (win over component margins) ---------- */
.frame .d-foot{margin-top:auto}
.frame .d-mt{margin-top:3.5cqw}
.frame .d-mt-s{margin-top:2cqw}

/* ---------- Screen controls ---------- */
.deck-bar{position:fixed;right:20px;bottom:20px;display:flex;align-items:center;gap:12px;padding:6px 6px 6px 16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid var(--rule);border-radius:10px;font-size:13px;color:var(--text-muted);z-index:10}
.deck-bar__count{font-variant-numeric:tabular-nums;min-width:52px}
.deck-bar__hint{color:var(--text-faint)}
.deck-bar .btn{height:34px;padding:0 14px;font-size:13px;font-weight:500}
.deck-bar .btn .icon{font-size:17px;color:#fff}
@media (max-width:720px){.deck-bar__hint{display:none}}

/* ---------- Print: one slide per 1600×900 page ---------- */
@page{size:1600px 900px;margin:0}
@media print{
  html,body{background:none!important}
  .deck{display:block;padding:0}
  .frame{width:1600px;height:900px;aspect-ratio:auto;border-radius:0;break-after:page;page-break-after:always;margin:0}
  .frame:last-child{break-after:auto;page-break-after:auto}
  .deck-bar{display:none}
}