/*
  Pitch deck system. One stylesheet, no build step.

  Every slide is <section class="slide" data-layout="NAME">. The eight layouts are
  cover, statement, pain, proof, real, scope, offer, ask (see ../README.md).
  A deck sets only its accent, in a <style> block or on <body style="">:
    --accent       the brand colour used as a fill (buttons, the ask panel)
    --accent-ink   the text colour that is readable on --accent

  Size model: all sizes are design pixels times --s. --s fits a 1440 x 900 canvas
  into any landscape window. On a phone, in portrait, or in a short window,
  --s fits a 390 px wide canvas, slides scroll, and the promise comes before any photo.
*/

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

:root {
  --paper: #f4f1ea;
  --paper-2: #e9e5da;
  --card: #fbfaf6;
  --ink: #16150f;
  --ink-2: #57533f;
  --live: #1a8a4a;
  --accent: #ffcc00;
  --accent-ink: #16150f;

  --s: min(100vw / 1440, 100vh / 900);
  --pad: calc(64 * var(--s));
  --gap: calc(24 * var(--s));
  --foot: calc(88 * var(--s));
  --r: calc(24 * var(--s));

  --t-small: max(13px, calc(16 * var(--s)));
  --t-body: max(16px, calc(22 * var(--s)));
  --t-lead: max(18px, calc(28 * var(--s)));
  --t-h3: max(18px, calc(26 * var(--s)));
  --t-h2: max(28px, calc(54 * var(--s)));
  --t-h1: max(32px, calc(68 * var(--s)));
  --t-say: max(30px, calc(72 * var(--s)));
  --t-quote: max(28px, calc(60 * var(--s)));
  --t-num: max(72px, calc(200 * var(--s)));
}

@supports (height: 100dvh) {
  :root { --s: min(100vw / 1440, 100dvh / 900); }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-body);
  line-height: 1.4;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, figure, blockquote, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, .say, .big, .num, .price .amount {
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 650; letter-spacing: -0.015em; line-height: 1.15; }
p { text-wrap: pretty; }
.lead { font-size: var(--t-lead); line-height: 1.3; color: var(--ink-2); max-width: 34em; }
.small { font-size: var(--t-small); color: var(--ink-2); }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

/* ---------- slide frame ---------- */

.slide {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
  visibility: hidden;
  opacity: 0;
  transform: translateY(calc(10 * var(--s)));
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s 0.28s;
}
.slide.is-on {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.in {
  position: relative;
  height: 100%;
  max-width: calc(1600 * var(--s));
  margin-inline: auto;
  padding: var(--pad) var(--pad) var(--foot);
  display: grid;
  gap: var(--gap);
}

/* Logo pair at the foot of every slide, added by deck.js from <template id="pair"> */
.foot {
  position: absolute;
  inset: auto 0 0 0;
  height: var(--foot);
  max-width: calc(1600 * var(--s));
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 3;
}
.pair {
  display: inline-flex;
  align-items: center;
  gap: calc(14 * var(--s));
  height: calc(52 * var(--s));
  min-height: 40px;
  padding: 0 calc(20 * var(--s));
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-weight: 650;
  font-size: var(--t-small);
  pointer-events: auto;
}
.pair img { height: 60%; width: auto; }
.pair .x { color: var(--ink-2); font-weight: 500; }

/* ---------- pieces ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: max(44px, calc(60 * var(--s)));
  padding: 0 calc(30 * var(--s));
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: var(--t-body);
  font-weight: 650;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn.quiet { background: var(--paper-2); color: var(--ink); }

.live {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--t-small);
  color: var(--ink-2);
}
.live::before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--live);
  flex: none;
}

/* A picture always sits whole on a soft panel. Nothing is cropped or framed. */
.pic {
  background: var(--paper-2);
  border-radius: var(--r);
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 0;
  min-width: 0;
  position: relative;
}
.pic img { width: 100%; height: 100%; object-fit: contain; }
.pic.logos img { height: calc(56 * var(--s)); width: auto; }
.pic.shot img { border-radius: calc(10 * var(--s)); }

/* A product capture sits on the slide as it is: rounded corners and a soft shadow, no panel and no frame.
   --ar is the picture's width / height. It lets the image grow to the largest size that fits its box. */
.media { display: grid; place-items: center; min-height: 0; min-width: 0; position: relative; container-type: size; }
.media picture { display: contents; }
.media img, .shot-img {
  width: min(100cqw, calc(100cqh * var(--ar, 1.6)));
  height: auto;
  border-radius: calc(14 * var(--s));
  box-shadow: 0 calc(2 * var(--s)) calc(6 * var(--s)) rgba(22, 21, 15, 0.08), 0 calc(18 * var(--s)) calc(48 * var(--s)) rgba(22, 21, 15, 0.14);
}
.pic.logos { display: flex; align-items: center; justify-content: center; gap: calc(40 * var(--s)); padding: calc(28 * var(--s)); flex-wrap: wrap; }
.pic.logos img { width: auto; height: calc(56 * var(--s)); min-height: 30px; max-width: 40%; }
.pic.pad { padding: calc(20 * var(--s)); }
.credit { font-size: max(11px, calc(12 * var(--s))); color: var(--ink-2); }

.cards { display: grid; gap: var(--gap); grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.card, .panel {
  background: var(--card);
  border-radius: var(--r);
  padding: calc(28 * var(--s));
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--s));
  min-width: 0;
}
.panel { background: var(--paper-2); }
.card .pic, .panel .pic { background: var(--paper-2); }
.panel .pic { background: var(--card); }
.card p, .panel li { font-size: var(--t-body); }
.panel ul { display: flex; flex-direction: column; gap: calc(10 * var(--s)); }
.panel li { padding-inline-start: 1.1em; position: relative; }
.panel li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.58em; width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--ink); }
.panel.dark li::before { background: var(--accent); }
.panel.dark { background: var(--ink); color: var(--paper); }
.panel.dark .small { color: #c9c4b3; }

/* ---------- 1. cover ---------- */

[data-layout="cover"] { background: var(--ink); color: var(--paper); }
[data-layout="cover"] .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
[data-layout="cover"] .shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,21,15,.9) 0%, rgba(22,21,15,.74) 46%, rgba(22,21,15,.1) 82%), linear-gradient(0deg, rgba(22,21,15,.55) 0%, rgba(22,21,15,0) 38%); }
[data-layout="cover"] .in { align-content: center; z-index: 1; }
[data-layout="cover"] .say-cover { display: grid; gap: calc(26 * var(--s)); max-width: calc(860 * var(--s)); }
[data-layout="cover"] h1 { font-size: max(34px, calc(72 * var(--s))); }
[data-layout="cover"] .lead { color: #e7e2d3; }
[data-layout="cover"] .credit { background: rgba(22,21,15,.6); padding: calc(6 * var(--s)) calc(12 * var(--s)); border-radius: calc(8 * var(--s)); position: absolute; top: calc(22 * var(--s)); inset-inline-end: calc(28 * var(--s)); color: #e7e2d3; z-index: 2; max-width: 40%; text-align: end; }

/* ---------- 2. statement ---------- */

[data-layout="statement"] .in { align-content: center; }
[data-layout="statement"] .say { font-size: var(--t-say); max-width: 20em; }
[data-layout="statement"] .top { display: grid; grid-template-columns: 1fr; gap: var(--gap); align-items: end; }
[data-layout="statement"] .top.has-pic { grid-template-columns: 1.4fr 1fr; }
[data-layout="statement"][data-variant="cards"] .say { font-size: var(--t-h2); max-width: none; }
[data-layout="statement"][data-variant="cards"] .card { padding: calc(24 * var(--s)); gap: calc(12 * var(--s)); }
[data-layout="statement"][data-variant="cards"] .card p { font-size: max(15px, calc(19 * var(--s))); line-height: 1.35; }
[data-layout="statement"][data-variant="cards"] .card .pic { aspect-ratio: 2 / 1; }
[data-layout="statement"] .card .small { font-size: max(12px, calc(14 * var(--s))); }
[data-layout="statement"] .card .pic { aspect-ratio: 3 / 2; }

/* ---------- 3. pain ---------- */

[data-layout="pain"] .in { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; }
[data-layout="pain"] .in.has-pic { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
[data-layout="pain"] .words { display: flex; flex-direction: column; justify-content: center; gap: calc(28 * var(--s)); }
[data-layout="pain"] .big { max-width: 17em; font-size: max(30px, calc(76 * var(--s))); letter-spacing: -0.03em; line-height: 1.08; }
[data-layout="pain"] .num { font-size: var(--t-num); line-height: 0.9; letter-spacing: -0.06em; }
[data-layout="pain"] .src { display: flex; align-items: center; gap: calc(14 * var(--s)); font-size: var(--t-small); color: var(--ink-2); }
[data-layout="pain"] .src img { height: calc(30 * var(--s)); min-height: 18px; width: auto; }
[data-layout="pain"] .more { grid-column: 1 / -1; }
[data-layout="pain"] .more .card { gap: calc(10 * var(--s)); }
[data-layout="pain"] .more p.q { font-size: max(17px, calc(23 * var(--s))); line-height: 1.3; }

/* ---------- 4. proof ---------- */
/* The capture is the slide. Side layout: a short caption beside it (data-side="left" flips it).
   Top layout (data-side="top"): the headline above and the capture across the whole slide. */

[data-layout="proof"] .in { grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr); align-items: stretch; }
[data-layout="proof"][data-side="left"] .in { grid-template-columns: minmax(0, 1fr) minmax(0, 0.34fr); }
[data-layout="proof"][data-side="left"] .cap { order: 2; }
[data-layout="proof"] .cap { display: flex; flex-direction: column; justify-content: center; gap: calc(22 * var(--s)); }
[data-layout="proof"] .cap h2 { font-size: max(26px, calc(42 * var(--s))); }
[data-layout="proof"] .cap .lead { font-size: max(17px, calc(24 * var(--s))); }
[data-layout="proof"] .cap .live { font-size: max(15px, calc(19 * var(--s))); }
[data-layout="proof"] .cap .btn { align-self: flex-start; }
[data-layout="proof"][data-side="top"] .in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
[data-layout="proof"][data-side="top"] .cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: calc(14 * var(--s)) var(--gap); }
[data-layout="proof"][data-side="top"] .cap h2 { grid-column: 1; font-size: var(--t-h2); }
[data-layout="proof"][data-side="top"] .cap .lead { grid-column: 1; max-width: none; }
[data-layout="proof"][data-side="top"] .cap .live { grid-column: 2; grid-row: 1; justify-self: end; }
[data-layout="proof"][data-side="top"] .cap .btn { grid-column: 2; grid-row: 2; justify-self: end; }
[data-layout="proof"] .media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: calc(14 * var(--s)); background: var(--card); opacity: 0; transition: opacity 0.3s ease; }
[data-layout="proof"] .media.is-live iframe { opacity: 1; }
[data-layout="proof"] .media.is-live > picture { visibility: hidden; }
.media .ph-note { position: absolute; inset-inline: 0; bottom: 0; padding: 10px 16px; font-size: var(--t-small); font-weight: 650; background: var(--accent); color: var(--accent-ink); text-align: center; }

/* ---------- 5. real and proposed ---------- */
/* Left: what works today, as small real captures with a short label each (--cols sets the columns).
   Right: what comes after the client says yes, at most four short lines. */

[data-layout="real"] .in { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
[data-layout="real"] h2 { grid-column: 1 / -1; }
[data-layout="real"] .works { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); grid-auto-rows: min-content; align-content: center; gap: var(--gap); min-height: 0; }
[data-layout="real"] .works h3 { grid-column: 1 / -1; color: var(--ink-2); }
[data-layout="real"] .works figure { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(12 * var(--s)); min-width: 0; }
[data-layout="real"] .works img { width: 100%; height: auto; aspect-ratio: var(--tar, 1.6); object-fit: cover; object-position: top left; border-radius: calc(12 * var(--s)); box-shadow: 0 calc(2 * var(--s)) calc(6 * var(--s)) rgba(22, 21, 15, 0.08), 0 calc(12 * var(--s)) calc(32 * var(--s)) rgba(22, 21, 15, 0.12); }
[data-layout="real"] .works figcaption { font-size: max(16px, calc(21 * var(--s))); font-weight: 650; letter-spacing: -0.01em; }
[data-layout="real"] .after { justify-content: center; gap: calc(28 * var(--s)); padding: calc(40 * var(--s)); }
[data-layout="real"] .after h3 { color: #c9c4b3; }
[data-layout="real"] .after li { font-size: max(19px, calc(32 * var(--s))); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
[data-layout="real"] .after ul { gap: calc(22 * var(--s)); }

/* ---------- 7. scope and timeline ---------- */

[data-layout="scope"] .in { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); align-items: stretch; }
[data-layout="scope"] .left { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; }
[data-layout="scope"] .left .pic, [data-layout="scope"] .left .media { flex: 1 1 0; }
[data-layout="scope"] .stages { display: grid; grid-auto-rows: 1fr; gap: calc(14 * var(--s)); min-height: 0; }
[data-layout="scope"] .stage { background: var(--paper-2); border-radius: var(--r); padding: calc(22 * var(--s)) calc(28 * var(--s)); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: calc(8 * var(--s)) calc(28 * var(--s)); align-content: center; }
[data-layout="scope"] .stage .when { font-size: max(18px, calc(26 * var(--s))); font-weight: 650; color: var(--ink-2); }
[data-layout="scope"] .stage h3 { grid-column: 1; }
[data-layout="scope"] .stage .get { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: max(18px, calc(26 * var(--s))); }
[data-layout="scope"] .stage .get b { font-weight: 650; }
[data-layout="scope"] .stage.now { background: var(--accent); color: var(--accent-ink); }
[data-layout="scope"] .stage.now .when { color: var(--accent-ink); }

/* ---------- 8. offer ---------- */

[data-layout="offer"] .in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: stretch; }
[data-layout="offer"] .left { display: flex; flex-direction: column; justify-content: space-between; gap: var(--gap); min-height: 0; }
[data-layout="offer"] .left .pic { flex: 1 1 0; }
[data-layout="offer"] .price { background: var(--ink); color: var(--paper); border-radius: var(--r); padding: calc(40 * var(--s)); display: flex; flex-direction: column; gap: calc(22 * var(--s)); justify-content: center; }
[data-layout="offer"] .price .amount { font-size: max(44px, calc(92 * var(--s))); letter-spacing: -0.05em; line-height: 0.95; }
[data-layout="offer"] .price .amount small { font-size: 0.32em; letter-spacing: -0.01em; font-weight: 500; color: #c9c4b3; display: block; margin-top: 0.3em; }
[data-layout="offer"] .price .rows { display: grid; gap: calc(10 * var(--s)); }
[data-layout="offer"] .price .row { background: #26251c; border-radius: calc(16 * var(--s)); padding: calc(16 * var(--s)) calc(22 * var(--s)); display: flex; justify-content: space-between; gap: var(--gap); font-size: max(16px, calc(20 * var(--s))); }
[data-layout="offer"] .price .row b { font-weight: 650; white-space: nowrap; }
[data-layout="offer"] .price .note { font-size: var(--t-small); color: #c9c4b3; }

/* ---------- 9. ask ---------- */

[data-layout="ask"] .in { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; }
[data-layout="ask"] .words { display: flex; flex-direction: column; justify-content: center; gap: calc(30 * var(--s)); }
[data-layout="ask"] h2 { font-size: max(34px, calc(80 * var(--s))); }
[data-layout="ask"] .who { display: grid; gap: calc(18 * var(--s)); justify-items: start; }
[data-layout="ask"] .who .small { font-size: max(15px, calc(18 * var(--s))); max-width: 36em; }
[data-layout="ask"] .logos { background: var(--accent); color: var(--accent-ink); border-radius: var(--r); display: grid; place-content: center; justify-items: center; gap: calc(26 * var(--s)); padding: calc(40 * var(--s)); }
[data-layout="ask"] .logos .tile { background: var(--card); border-radius: calc(20 * var(--s)); padding: calc(26 * var(--s)) calc(40 * var(--s)); display: grid; place-items: center; }
[data-layout="ask"] .logos .tile img { height: calc(84 * var(--s)); min-height: 44px; width: auto; max-width: 100%; }
[data-layout="ask"] .logos .times { font-size: var(--t-h3); font-weight: 700; }

/* ---------- deck controls ---------- */

.ctl {
  position: fixed;
  z-index: 10;
  inset-block-end: calc((var(--foot) - 52 * var(--s)) / 2);
  inset-inline-end: var(--pad);
  display: flex;
  align-items: center;
  gap: 4px;
  height: calc(52 * var(--s));
  min-height: 44px;
  padding: 0 6px;
  background: var(--card);
  border-radius: 999px;
  font-size: var(--t-small);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.ctl button {
  width: max(44px, calc(44 * var(--s)));
  height: max(44px, calc(44 * var(--s)));
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.3em;
  cursor: pointer;
}
.ctl button:hover:not(:disabled) { background: var(--paper-2); }
.ctl button:disabled { opacity: 0.3; cursor: default; }
.ctl output { min-width: 3.4em; text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .slide, .slide.is-on, .btn, .media iframe { transition: none; transform: none; }
}

/* ---------- phone, portrait and short windows: slides scroll, promise first ---------- */

@media screen and (max-aspect-ratio: 1/1), screen and (max-width: 760px), screen and (max-height: 520px) {
  :root {
    --s: clamp(0.85px, 100vw / 390, 1.45px);
    --pad: calc(22 * var(--s));
    --gap: calc(16 * var(--s));
    --foot: calc(96 * var(--s));
    --r: calc(20 * var(--s));
    --t-small: calc(15 * var(--s));
    --t-body: calc(17 * var(--s));
    --t-lead: calc(19 * var(--s));
    --t-h3: calc(21 * var(--s));
    --t-h2: calc(34 * var(--s));
    --t-h1: calc(38 * var(--s));
    --t-say: calc(36 * var(--s));
    --t-quote: calc(30 * var(--s));
    --t-num: calc(120 * var(--s));
  }
  .slide { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
  .in { height: auto; min-height: 100%; display: flex; flex-direction: column; gap: calc(20 * var(--s)); padding: calc(28 * var(--s)) var(--pad) 0; }
  .foot { position: static; height: auto; padding: calc(8 * var(--s)) var(--pad) calc(96 * var(--s)); }
  .ctl { inset-inline: var(--pad); justify-content: space-between; height: 56px; padding: 0 8px; box-shadow: 0 0 0 1px rgba(22,21,15,.1); }
  .ctl button { width: 48px; height: 48px; }

  /* cover: text on paper first, the photo whole under it */
  [data-layout="cover"] { background: var(--paper); color: var(--ink); }
  [data-layout="cover"] .shade { display: none; }
  [data-layout="cover"] { display: flex; flex-direction: column; }
  [data-layout="cover"] .in { min-height: 0; }
  [data-layout="cover"] .bg { position: static; order: 1; flex: none; width: calc(100% - 2 * var(--pad)); height: auto; margin: var(--gap) var(--pad) 0; object-fit: contain; border-radius: var(--r); }
  [data-layout="cover"] .foot { order: 3; }
  [data-layout="cover"] .in { justify-content: flex-start; }
  [data-layout="cover"] .say-cover { order: 1; }
  [data-layout="cover"] h1 { font-size: var(--t-h1); }
  [data-layout="cover"] .lead { color: var(--ink-2); }
  [data-layout="cover"] .credit { position: static; order: 2; background: none; border-radius: 0; padding: 0 var(--pad); color: var(--ink-2); max-width: none; text-align: start; }

  [data-layout="statement"] .top.has-pic { grid-template-columns: 1fr; }
  [data-layout="statement"] .top { display: flex; flex-direction: column; }
  .cards { grid-template-columns: 1fr; }
  [data-layout="statement"] .card .pic { aspect-ratio: auto; }

  [data-layout="pain"] .in { display: flex; }
  [data-layout="pain"] .big { font-size: var(--t-quote); max-width: none; overflow-wrap: anywhere; }
  [data-layout="pain"] .pic { order: 3; }
  [data-layout="pain"] .more { order: 4; }

  [data-layout="proof"] .in { display: flex; }
  [data-layout="proof"] .cap { gap: calc(16 * var(--s)); }
  [data-layout="proof"] .cap h2 { font-size: var(--t-h2); }
  .media { container-type: normal; display: block; }
  .media img, .shot-img { width: 100%; }
  [data-layout="proof"][data-side="top"] .cap { display: flex; }
  [data-layout="proof"] .cap .btn { align-self: stretch; justify-content: center; }
  [data-layout="proof"][data-side="left"] .cap { order: 0; }

  [data-layout="real"] .in, [data-layout="scope"] .in, [data-layout="offer"] .in, [data-layout="ask"] .in { display: flex; }
  [data-layout="real"] .works { grid-template-columns: repeat(var(--pcols, 1), minmax(0, 1fr)); }
  [data-layout="real"] .after { padding: calc(26 * var(--s)); }
  [data-layout="scope"] .stage { grid-template-columns: 1fr; }
  [data-layout="scope"] .stage .get { grid-column: 1; grid-row: auto; }
  [data-layout="scope"] .left .pic, [data-layout="scope"] .left .media { flex: none; order: 3; }
  [data-layout="scope"] .left { flex: none; }
  [data-layout="scope"] .stages { display: flex; flex-direction: column; }
  [data-layout="offer"] .left .pic { flex: none; order: 3; }
  [data-layout="offer"] .price { padding: calc(26 * var(--s)); }
  [data-layout="offer"] .price .amount { font-size: calc(60 * var(--s)); }
  [data-layout="ask"] h2 { font-size: var(--t-h1); }
  [data-layout="ask"] .logos { padding: calc(24 * var(--s)); }
  [data-layout="ask"] .words .btn { align-self: stretch; justify-content: center; }
  .pic img, .media img { height: auto; }
}

/* ---------- print: one slide per page, 1440 x 900 ---------- */

@page { size: 1440px 900px; margin: 0; }

@media print {
  :root { --s: 1px !important; }
  html, body { height: auto; overflow: visible; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .slide, .slide.is-on { position: relative; inset: auto; width: 1440px; height: 900px; visibility: visible; opacity: 1; transform: none; transition: none; break-after: page; overflow: hidden; }
  .ctl, .sr, .media iframe { display: none !important; }
  .media > picture { visibility: visible !important; }
}

[data-layout="pain"] h2 { font-size: var(--t-lead); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: var(--ink-2); }

/* stat figure on a card (goals) and a text wordmark for a client without a logo file */
.card .stat { font-size: max(32px, calc(64 * var(--s))); font-weight: 750; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.wordmark { font-size: max(20px, calc(34 * var(--s))); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-align: center; }
[data-layout="statement"][data-variant="cards"] .card p.stat { font-size: max(36px, calc(76 * var(--s))); line-height: 1; }
[data-layout="pain"] .in.has-pic .pic { align-self: center; aspect-ratio: 3 / 2; height: auto; }
[data-layout="offer"] .left { justify-content: center; }

@media screen and (max-aspect-ratio: 1/1), screen and (max-width: 760px), screen and (max-height: 520px) {
  [data-layout="offer"] .left { display: contents; }
  [data-layout="offer"] .left .pic { order: 3; flex: none; }
  [data-layout="offer"] .price { order: 1; }
}
@media screen and (max-aspect-ratio: 1/1), screen and (max-width: 760px), screen and (max-height: 520px) {
  [data-layout="offer"] .price { padding: calc(24 * var(--s)); }
  [data-layout="offer"] .price .amount { font-size: calc(50 * var(--s)); }
  [data-layout="offer"] .price .row { flex-direction: column; gap: calc(2 * var(--s)); }
}