/* present-deck.css: the slides of a presentation (js/present/render.js), themed by a brand kit's custom properties
   (--k-*, set by kitStyle()). Every length inside a slide is in container units of .pd-frame, so the same markup is a
   1280 x 720 slide on a projector, a stage preview in the studio and a filmstrip thumbnail. Landscape is the
   presentation; .pd-flow (set by the player on tall phone screens) reflows each slide into a readable column. */

@font-face{font-family:'PD Inter';src:url('/assets/fonts/inter-var-full.woff2') format('woff2');font-weight:100 900;font-display:swap}

.pd-slide{position:relative;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden;background:var(--k-ground);scroll-snap-align:start;scroll-snap-stop:always}
.pd-slide:has(.is-light){background:var(--k-ground2)}
/* .pd-box is the 16:9 container; the frame inside it carries the layout. The frame's own padding is in container
   units too, and an element cannot query itself, so the box (not the frame) is the container. */
.pd-box{position:relative;container-type:inline-size;width:min(100vw,calc(100svh * 16 / 9));aspect-ratio:16/9}
.pd-frame{
  --pad:5cqw;--top:9.4cqw;--bot:6.6cqw;--gap:3cqw;--r:1.6cqw;
  --fs-display:7.5cqw;--fs-big:5.4cqw;--fs-h2:3.75cqw;--fs-quote:4.2cqw;--fs-num:6.25cqw;--fs-price:4.2cqw;
  --fs-sub:1.72cqw;--fs-body:1.41cqw;--fs-small:1.1cqw;--fs-note:.86cqw;--fs-brand:1.6cqw;--mark:1.9cqw;
  position:absolute;inset:0;overflow:hidden;
  background:var(--k-ground);color:var(--k-ink);font-family:'PD Inter',Inter,system-ui,-apple-system,sans-serif;
  font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
}
.pd-frame,.pd-frame *{box-sizing:border-box}
.pd-frame :where(h1,h2,h3,p,ul,ol,figure,blockquote){margin:0;padding:0}
.pd-frame :where(ul,ol){list-style:none}
.pd-frame img{display:block;max-width:none}

/* the inverted ground a slide may ask for ("tone": "light") */
.pd-frame.is-light{--k-ground:var(--k-ground2);--k-ink:var(--k-ink-on2);--k-ink2:var(--k-ink2-on2);--k-mist:var(--k-ink2-on2);--k-accent-text:var(--k-accent-text2);background:var(--k-ground)}

/* type roles */
.pd-display{font-family:var(--k-display);font-weight:var(--k-display-weight);letter-spacing:var(--k-display-tracking);line-height:var(--k-display-leading);text-wrap:balance}
.pd-h2{font-family:var(--k-display);font-weight:var(--k-display-weight);letter-spacing:var(--k-display-tracking);line-height:1.06;font-size:var(--fs-h2);text-wrap:balance}
.pd-sub{font-size:var(--fs-sub);line-height:1.4;color:var(--k-ink2);max-width:46ch;text-wrap:pretty}
.pd-body{font-size:var(--fs-body);line-height:1.55;color:var(--k-ink2);max-width:42ch;text-wrap:pretty}
.pd-meta{font-size:var(--fs-small);color:var(--k-mist)}
.pd-foot{font-size:var(--fs-small);color:var(--k-mist);max-width:70ch}
.pd-note{position:absolute;left:var(--pad);bottom:3.2cqw;font-size:var(--fs-note);color:var(--k-mist);z-index:3}

/* chrome: the brand at the top left, the page number at the bottom right */
.pd-top{position:absolute;top:3.4cqw;left:var(--pad);z-index:3}
.pd-brand{display:inline-flex;align-items:center;gap:.8cqw;font-family:var(--k-display);font-weight:var(--k-display-weight);font-size:var(--fs-brand);letter-spacing:var(--k-display-tracking);line-height:1;color:var(--k-ink)}
.pd-brand img{height:var(--mark);width:auto}
.pd-num-page{position:absolute;right:var(--pad);bottom:3.2cqw;font-size:var(--fs-small);color:var(--k-mist);font-variant-numeric:tabular-nums;z-index:3}


/* photographs that fill the slide */
.pd-fill{position:absolute;inset:0;overflow:hidden}
.pd-fill .pd-photo{width:100%;height:100%;object-fit:cover}
.pd-scrim{position:absolute;inset:0;background:linear-gradient(0deg,var(--k-scrim) 0%,rgba(0,0,0,0) 62%),linear-gradient(90deg,var(--k-scrim) 0%,var(--k-scrim) 24%,rgba(0,0,0,0) 70%)}
.pd-l-cover .pd-cover-copy,.pd-l-photo .pd-photo-copy{text-shadow:0 1px 2px rgba(0,0,0,.18),0 2px 30px rgba(0,0,0,.28)}
.pd-scrim-low{background:linear-gradient(0deg,var(--k-scrim) 0%,rgba(0,0,0,0) 55%),linear-gradient(180deg,var(--k-scrim) 0%,rgba(0,0,0,0) 22%)}
.pd-l-cover,.pd-l-photo{color:var(--k-on-photo)}
.pd-l-cover .pd-brand,.pd-l-photo .pd-brand{color:var(--k-on-photo)}
.pd-l-cover .pd-sub,.pd-l-photo .pd-sub,.pd-l-cover .pd-meta,.pd-l-cover .pd-note,.pd-l-photo .pd-num-page{color:var(--k-on-photo)}
.pd-l-cover .pd-sub,.pd-l-photo .pd-sub{opacity:.88}
.pd-l-cover .pd-meta,.pd-l-cover .pd-note,.pd-l-photo .pd-num-page{opacity:.78}

/* cover */
.pd-cover-copy{position:absolute;left:var(--pad);bottom:8.6cqw;width:64cqw;z-index:2}
.pd-l-cover .pd-display{font-size:var(--fs-display);margin-bottom:1.8cqw}
.pd-l-cover .pd-sub{margin-bottom:2.2cqw}

/* statement: one sentence, set large */
.pd-l-statement{display:grid;align-content:center;padding:var(--top) 14cqw var(--bot) var(--pad)}
.pd-big{font-size:var(--fs-big)}
.pd-statement-copy .pd-sub{margin-top:3cqw}

/* split: a photograph and one idea */
.pd-l-split{display:grid;grid-template-columns:58% 1fr}
.pd-split-img{height:100%;overflow:hidden}
.pd-split-img img{width:100%;height:100%;object-fit:cover}
.pd-split-copy{display:grid;align-content:center;gap:2cqw;padding:var(--top) var(--pad) var(--bot) 4.6cqw}
.pd-l-split .pd-top{left:calc(58% + 4.6cqw)}
.pd-l-split.pd-side-right{grid-template-columns:1fr 58%}
.pd-l-split.pd-side-right .pd-split-img{order:2}
.pd-l-split.pd-side-right .pd-split-copy{padding:var(--top) 4.6cqw var(--bot) var(--pad)}
.pd-l-split.pd-side-right .pd-top{left:var(--pad)}
.pd-points{display:grid;gap:1cqw;margin-top:.6cqw}
.pd-points li{position:relative;padding-left:2cqw;font-size:var(--fs-body);color:var(--k-ink)}
.pd-points li::before{content:"";position:absolute;left:0;top:.72em;width:1cqw;height:1px;background:var(--k-accent)}

/* photo: the full-bleed one-liner */
.pd-photo-copy{position:absolute;left:var(--pad);bottom:7.4cqw;width:62cqw;z-index:2;display:grid;gap:1.4cqw}
.pd-l-photo .pd-h2{font-size:var(--fs-big)}

/* the stacked layouts: a heading, then the content */
.pd-l-gallery,.pd-l-stats,.pd-l-steps,.pd-l-compare,.pd-l-offer{display:flex;flex-direction:column;padding:var(--top) var(--pad) var(--bot)}
.pd-head{max-width:30ch;margin-bottom:var(--gap)}
.pd-gallery-row,.pd-stats-row,.pd-steps-wrap,.pd-compare-row,.pd-offer-row{flex:1;min-height:0}

/* gallery: three things side by side, equal */
.pd-gallery-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2cqw;align-items:start}
.pd-tile-img{aspect-ratio:1/1;max-height:29cqw;width:100%;overflow:hidden;border-radius:var(--r)}
.pd-tile-img img{width:100%;height:100%;object-fit:cover}
.pd-tile figcaption{margin-top:1.2cqw;font-size:var(--fs-body);color:var(--k-ink)}

/* stats: the numbers that matter */
.pd-stats-row{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--gap);align-content:center}
.pd-stat{border-top:1px solid color-mix(in srgb,var(--k-mist) 45%,transparent);padding-top:2cqw}
.pd-num{font-family:var(--k-display);font-weight:var(--k-display-weight);letter-spacing:var(--k-display-tracking);font-size:var(--fs-num);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.pd-label{margin-top:1.2cqw;font-size:var(--fs-body);color:var(--k-ink2);max-width:24ch}
.pd-l-stats .pd-foot{margin-top:var(--gap)}

/* chart: one comparison, one bar that matters */
.pd-l-chart{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:4cqw;padding:var(--top) var(--pad) var(--bot)}
.pd-chart-copy{display:grid;align-content:center;gap:2cqw}
.pd-chart{position:relative;display:flex;flex-direction:column;background:var(--k-lift);border-radius:var(--r);padding:4.4cqw 3cqw 2cqw}
.pd-unit{position:absolute;top:1.8cqw;left:3cqw;font-size:var(--fs-small);color:var(--k-mist)}
.pd-bars{flex:1;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:1cqw;min-height:0}
.pd-bar{display:grid;grid-template-rows:1fr auto;gap:1cqw;min-height:0}
.pd-bar-track{position:relative;display:flex;align-items:flex-end;border-bottom:1px solid color-mix(in srgb,var(--k-mist) 50%,transparent)}
.pd-bar-track i{position:relative;display:block;width:100%;height:var(--h);border-radius:.5cqw .5cqw 0 0;background:color-mix(in srgb,var(--k-ink) 22%,transparent);transform-origin:50% 100%}
.pd-bar.is-hi .pd-bar-track i{background:var(--k-accent)}
.pd-bar-track b{position:absolute;left:-60%;right:-60%;bottom:var(--h);margin-bottom:.7cqw;text-align:center;font-family:var(--k-display);font-weight:var(--k-display-weight);font-size:2.4cqw;line-height:1;color:var(--k-accent-lift);white-space:nowrap}
.pd-bar span{font-size:var(--fs-small);color:var(--k-mist);text-align:center;white-space:nowrap}
.pd-bar.is-hi span{color:var(--k-ink)}

/* steps: a real sequence */
.pd-steps-wrap{position:relative;display:grid;align-content:center}
.pd-steps-in{position:relative}
.pd-steps{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--gap)}
/* from the centre of the first number to the centre of the last */
.pd-steps-line{position:absolute;left:1.9cqw;width:calc(100% - (100% - (var(--n) - 1) * var(--gap)) / var(--n));top:calc(1.9cqw - 1px);height:2px;overflow:visible;pointer-events:none}
.pd-steps-line line{stroke:color-mix(in srgb,var(--k-mist) 60%,transparent);stroke-width:1.5;vector-effect:non-scaling-stroke}
.pd-step-n{position:relative;z-index:1;display:grid;place-items:center;width:3.8cqw;height:3.8cqw;border-radius:50%;background:var(--k-ground);border:1.5px solid var(--k-accent-line);color:var(--k-accent-text);font-family:var(--k-display);font-weight:var(--k-display-weight);font-size:1.8cqw;line-height:1;margin-bottom:2.2cqw}
.pd-step h3{font-size:var(--fs-sub);font-weight:600;letter-spacing:-.01em;line-height:1.25;margin-bottom:.9cqw}
.pd-step p{font-size:var(--fs-body);color:var(--k-ink2);max-width:28ch}

/* compare: until now, and from here */
.pd-compare-row{display:grid;grid-template-columns:1fr 1fr;gap:2cqw;align-content:center}
.pd-col{border-radius:var(--r);padding:3cqw}
.pd-col.is-then{border:1px solid color-mix(in srgb,var(--k-mist) 40%,transparent)}
.pd-col.is-now{background:var(--k-lift)}
.pd-col-k{font-size:var(--fs-sub);font-weight:600;letter-spacing:-.01em;margin-bottom:1.8cqw;color:var(--k-ink2)}
.pd-col.is-now .pd-col-k{color:var(--k-accent-lift)}
.pd-col ul{display:grid;gap:1.3cqw}
.pd-col li{position:relative;padding-left:2.2cqw;font-size:var(--fs-body);color:var(--k-ink2)}
.pd-col.is-now li{color:var(--k-ink)}
.pd-col li::before{content:"";position:absolute;left:0;top:.6em;width:.7cqw;height:.7cqw;border-radius:50%;background:color-mix(in srgb,var(--k-mist) 70%,transparent)}
.pd-col.is-now li::before{background:var(--k-accent)}

/* question: what people really ask, and the answer */
.pd-l-question{display:grid;align-content:center;padding:var(--top) 12cqw var(--bot) var(--pad)}
.pd-quote{font-size:var(--fs-quote);line-height:1.12;max-width:26ch}
.pd-qm{color:var(--k-accent-text)}
.pd-answer{margin:3.4cqw 0 0 9cqw;max-width:52ch;padding-left:2cqw;border-left:2px solid var(--k-accent-line);font-size:var(--fs-sub);line-height:1.45;color:var(--k-ink2)}

/* offer: what to choose, cards of one size */
.pd-offer-row{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2cqw;align-items:stretch;align-content:center}
.pd-card{display:flex;flex-direction:column;background:var(--k-lift);border-radius:var(--r);padding:2.6cqw}
.pd-card.is-featured{box-shadow:inset 0 0 0 2px var(--k-accent)}
.pd-card-name{font-size:var(--fs-sub);font-weight:600;letter-spacing:-.01em}
.pd-card-price{font-family:var(--k-display);font-weight:var(--k-display-weight);letter-spacing:var(--k-display-tracking);font-size:var(--fs-price);line-height:1.05;margin-top:1cqw}
.pd-card-detail{font-size:var(--fs-small);color:var(--k-mist);margin-top:.6cqw}
.pd-card ul{display:grid;gap:.9cqw;margin-top:2cqw;padding-top:2cqw;border-top:1px solid color-mix(in srgb,var(--k-mist) 35%,transparent)}
.pd-card li{position:relative;padding-left:2cqw;font-size:var(--fs-body);color:var(--k-ink2);line-height:1.4}
.pd-card li::before{content:"";position:absolute;left:0;top:.66em;width:1cqw;height:1px;background:var(--k-accent)}
.pd-l-offer .pd-foot{margin-top:2cqw}

/* close */
.pd-l-close{display:grid;align-content:center;padding:var(--top) var(--pad) var(--bot)}
.pd-l-close.has-img{grid-template-columns:1fr 45%;grid-template-rows:100%;align-content:stretch;padding:0}
.pd-close-img{grid-column:2;grid-row:1;height:100%;overflow:hidden}
.pd-close-img img{width:100%;height:100%;object-fit:cover}
.pd-close-copy{grid-column:1;grid-row:1;display:grid;align-content:center;gap:2cqw;max-width:60cqw}
.pd-l-close.has-img .pd-close-copy{padding:var(--top) 4.6cqw var(--bot) var(--pad)}
.pd-close-h{font-size:var(--fs-big)}
.pd-action span{display:inline-flex;align-items:center;min-height:4.2cqw;padding:0 2.4cqw;border-radius:999px;background:var(--k-accent);color:var(--k-on-accent);font-size:var(--fs-body);font-weight:600}
.pd-l-close.has-img .pd-num-page{right:calc(45% + var(--pad))}

/* ---------- tall phone screens: each slide reflows into a column ---------- */
.pd-flow .pd-slide{height:auto;min-height:100svh;display:block;scroll-snap-align:start;scroll-snap-stop:normal}
.pd-flow .pd-frame{
  --pad:6.2cqw;--top:21cqw;--bot:15cqw;--gap:5cqw;--r:4cqw;
  --fs-display:12.4cqw;--fs-big:9.6cqw;--fs-h2:8.6cqw;--fs-quote:8.4cqw;--fs-num:13cqw;--fs-price:9.4cqw;
  --fs-sub:4.8cqw;--fs-body:4.3cqw;--fs-small:3.6cqw;--fs-note:3cqw;--fs-brand:4.6cqw;--mark:5.4cqw;
  position:relative;inset:auto;min-height:100svh
}
.pd-flow .pd-box{width:100%;aspect-ratio:auto}
.pd-flow .pd-top{top:7cqw}
/* the player's controls sit at the bottom right on a phone: the page number lives in them, the note rides above */
.pd-flow .pd-num-page{display:none}
.pd-flow .pd-note{bottom:22cqw;right:var(--pad)}
.pd-flow .pd-cover-copy,.pd-flow .pd-photo-copy{width:auto;right:var(--pad);bottom:32cqw}
.pd-flow .pd-l-photo .pd-photo-copy{bottom:22cqw}
/* the close slide's note follows its copy, clear of the controls */
.pd-flow .pd-l-close{padding-bottom:26cqw}
.pd-flow .pd-l-close .pd-close-copy,.pd-flow .pd-l-close.has-img .pd-close-copy{padding-bottom:0}
.pd-flow .pd-l-close .pd-note{position:static;order:3;margin:5cqw var(--pad) 0}
/* a photo stacked at the top of a phone slide would sit under the brand mark: the mark steps aside there */
.pd-flow .pd-l-split .pd-top,.pd-flow .pd-l-close.has-img .pd-top{display:none}
.pd-flow .pd-l-statement,.pd-flow .pd-l-question{padding:var(--top) var(--pad) var(--bot)}
.pd-flow .pd-answer{margin-left:0}
.pd-flow .pd-l-split,.pd-flow .pd-l-chart,.pd-flow .pd-l-close.has-img{display:flex;flex-direction:column;padding:0}
.pd-flow .pd-split-img,.pd-flow .pd-close-img{height:auto;aspect-ratio:4/3;order:0!important}
.pd-flow .pd-split-copy,.pd-flow .pd-l-close.has-img .pd-close-copy,.pd-flow .pd-l-split.pd-side-right .pd-split-copy{padding:8cqw var(--pad) var(--bot);order:1}
.pd-flow .pd-l-chart{padding:var(--top) var(--pad) var(--bot);gap:var(--gap)}
.pd-flow .pd-chart{min-height:78cqw;padding:12cqw 5cqw 5cqw}
.pd-flow .pd-unit{top:5cqw;left:5cqw}
.pd-flow .pd-bar-track b{font-size:6cqw}
.pd-flow .pd-bar span{font-size:2.8cqw}
.pd-flow .pd-gallery-row,.pd-flow .pd-steps,.pd-flow .pd-compare-row,.pd-flow .pd-offer-row{grid-template-columns:1fr}
.pd-flow .pd-tile-img{aspect-ratio:16/10;max-height:none}
.pd-flow .pd-stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.pd-flow .pd-steps-line{display:none}
.pd-flow .pd-step-n{width:10cqw;height:10cqw;font-size:4.6cqw;margin-bottom:3cqw}
.pd-flow .pd-col,.pd-flow .pd-card{padding:6cqw}
.pd-flow .pd-step p,.pd-flow .pd-body,.pd-flow .pd-sub{max-width:none}
.pd-flow .pd-close-copy{max-width:none}
.pd-flow .pd-action span{min-height:12cqw;padding:0 6cqw}

/* ---------- print: one 1280 x 720 page per slide, every element in its final state ---------- */
@media print{
  @page{size:1280px 720px;margin:0}
  html,body{background:#fff!important}
  .pd-deck{scroll-snap-type:none!important}
  .pd-slide{height:720px!important;width:1280px!important;min-height:0!important;display:block!important;break-after:page;page-break-after:always;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pd-box{width:1280px!important;height:720px!important;aspect-ratio:auto!important}
  .pd-frame{position:absolute!important;inset:0!important;min-height:0!important}
}