/*
  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; }
}

/* ---------- motion: content rises in when its slide comes up, photos push in slowly ----------
   Landscape only: on phones every slide is shown at once, so nothing waits for a slide to come up. */
@keyframes rise { from { opacity: 0; transform: translateY(calc(24 * var(--s))); filter: blur(calc(8 * var(--s))); } }
@keyframes push { from { transform: scale(1.07); } }
@media screen and (prefers-reduced-motion: no-preference) and (min-aspect-ratio: 1001/1000) and (min-width: 761px) and (min-height: 521px) {
  .slide.is-on .in > *, .slide.is-on :is(.list, .grid, .flow, .plans, .stages, .logos, .terms) > *, .slide.is-on[data-layout="strip"] figure { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s both; }
  .slide.is-on .in > :nth-child(2) { animation-delay: 0.15s; }
  .slide.is-on .in > :nth-child(3) { animation-delay: 0.25s; }
  .slide.is-on .in > :nth-child(n+4) { animation-delay: 0.35s; }
  .slide.is-on :is(.list, .grid, .flow, .plans, .stages, .logos, .terms) > :nth-child(1), .slide.is-on[data-layout="strip"] figure:nth-of-type(1) { animation-delay: 0.3s; }
  .slide.is-on :is(.list, .grid, .flow, .plans, .stages, .logos, .terms) > :nth-child(2), .slide.is-on[data-layout="strip"] figure:nth-of-type(2) { animation-delay: 0.38s; }
  .slide.is-on :is(.list, .grid, .flow, .plans, .stages, .logos, .terms) > :nth-child(3), .slide.is-on[data-layout="strip"] figure:nth-of-type(3) { animation-delay: 0.46s; }
  .slide.is-on :is(.list, .grid, .flow, .plans, .stages, .logos, .terms) > :nth-child(4) { animation-delay: 0.54s; }
  .slide.is-on :is(.list, .grid, .flow, .plans, .stages, .logos, .terms) > :nth-child(5) { animation-delay: 0.62s; }
  .slide.is-on :is(.list, .grid, .flow, .plans, .stages, .logos, .terms) > :nth-child(n+6) { animation-delay: 0.7s; }
  .slide.is-on :is(img.bg, .bg img, .bg video, .photo img) { animation: push 18s cubic-bezier(0.2, 0.6, 0.3, 1) both; }
}

/* A looping clip laid over its still picture; deck.js fades it in once it plays. */
video.loop { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--focus, 50% 50%); opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
video.loop.is-playing { opacity: 1; }
@media print { video.loop { display: none; } }

/* A dithered glow behind a slide's content, drawn by dither.js. */
.dither { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; }
@media print { .dither { display: 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)); }
}

/* ======================================================================
   Picture-led layouts: split, view, strip, system, track, plan.
   Each one is a large picture or diagram with very few words. All sizes are
   design pixels times --s. See ../README.md for what each layout needs.
   ====================================================================== */

:root { --on-dark: color-mix(in srgb, var(--accent) 60%, white); }

/* The small, quiet label on an AI concept picture or a frame from a concept film. */
.tag {
  position: absolute;
  z-index: 2;
  inset-block-start: calc(20 * var(--s));
  inset-inline-end: calc(20 * var(--s));
  padding: 0.28em 0.85em;
  border-radius: 999px;
  background: rgba(22, 21, 15, 0.62);
  color: #f4f1ea;
  font-size: max(11px, calc(13 * var(--s)));
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
figure { position: relative; }

/* ---------- split: words on one side, one tall picture on the other ---------- */

[data-layout="split"] .photo { position: absolute; inset-block: 0; inset-inline-end: 0; width: calc(660 * var(--s)); margin: 0; background: var(--ink); overflow: hidden; }
[data-layout="split"] .photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--focus, 50% 50%); }
[data-layout="split"] .in { align-content: center; padding-inline-end: calc(660 * var(--s) + 2 * var(--gap)); }
[data-layout="split"] .words { display: grid; gap: calc(30 * var(--s)); justify-items: start; }
[data-layout="split"] h2 { max-width: 14em; }
[data-layout="split"] .fig { display: flex; align-items: flex-end; gap: calc(28 * var(--s)); }
[data-layout="split"] .num { font-size: max(96px, calc(210 * var(--s))); line-height: 0.8; letter-spacing: -0.06em; color: var(--accent); font-weight: 750; }
[data-layout="split"] .unit { font-size: max(22px, calc(34 * var(--s))); font-weight: 650; letter-spacing: -0.02em; line-height: 1.12; max-width: 7em; padding-bottom: 0.1em; }
[data-layout="split"] .src { font-size: var(--t-small); color: var(--ink-2); margin-top: calc(-14 * var(--s)); }
[data-layout="split"] .list { width: 100%; max-width: calc(620 * var(--s)); display: grid; gap: calc(12 * var(--s)); }
[data-layout="split"] .list li { display: flex; align-items: center; gap: calc(18 * var(--s)); padding: calc(14 * var(--s)) calc(22 * var(--s)); background: var(--card); border-radius: calc(20 * var(--s)); font-size: max(17px, calc(24 * var(--s))); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
[data-layout="split"] h2.big-h { font-size: max(34px, calc(80 * var(--s))); }
[data-layout="split"] .lead { font-size: max(19px, calc(30 * var(--s))); }

/* ---------- view: a full-bleed picture with a few words over a shaded corner ---------- */

[data-layout="view"] { background: var(--ink); color: #fff; }
[data-layout="view"] .bg { position: absolute; inset: 0; margin: 0; }
[data-layout="view"] .bg picture { display: contents; }
[data-layout="view"] .bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--focus, 50% 50%); }
[data-layout="view"] .shade { position: absolute; inset: 0; background: linear-gradient(98deg, rgba(10, 14, 20, 0.9) 0%, rgba(10, 14, 20, 0.74) 32%, rgba(10, 14, 20, 0) 60%); }
[data-layout="view"] .in { align-content: center; z-index: 1; }
[data-layout="view"] .say-view { display: grid; gap: calc(26 * var(--s)); max-width: calc(520 * var(--s)); }
[data-layout="view"] h2 { font-size: max(34px, calc(64 * var(--s))); }
[data-layout="view"] .lead { color: #e7e2d3; font-size: max(18px, calc(26 * var(--s))); }

/* ---------- strip: a headline, then 2 or 3 pictures side by side, each with a short caption ---------- */
/* --cols on .cols sets the column widths. --ar on each .shot is the picture's width / height.
   data-variant="captures" shows real product captures whole, with a soft shadow, instead of cropped photos. */

[data-layout="strip"] .in { grid-template-rows: auto minmax(0, 1fr); align-content: start; }
[data-layout="strip"] .cols { display: grid; grid-template-columns: var(--cols, repeat(3, minmax(0, 1fr))); gap: calc(28 * var(--s)); align-content: center; min-height: 0; }
[data-layout="strip"] figure { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(16 * var(--s)); align-content: start; min-width: 0; margin: 0; }
[data-layout="strip"] .shot { position: relative; margin: 0; aspect-ratio: var(--ar, 1.25); border-radius: var(--r); overflow: hidden; background: var(--paper-2); }
[data-layout="strip"] .shot picture { display: contents; }
[data-layout="strip"] .shot img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--focus, 50% 50%); }
[data-layout="strip"][data-variant="captures"] .shot { 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); }
[data-layout="strip"] .shot .tag { inset-block-start: auto; inset-block-end: calc(14 * var(--s)); inset-inline-end: auto; inset-inline-start: calc(14 * var(--s)); }
[data-layout="strip"] figcaption { display: grid; gap: calc(8 * var(--s)); justify-items: center; text-align: center; padding-inline: calc(12 * var(--s)); }
[data-layout="strip"] figcaption h3 { font-size: max(26px, calc(44 * var(--s))); letter-spacing: -0.03em; font-weight: 700; }
[data-layout="strip"] figcaption p { font-size: max(16px, calc(25 * var(--s))); line-height: 1.3; color: var(--ink-2); max-width: 17em; }
[data-layout="strip"] figcaption p.key { color: var(--accent); font-weight: 650; }
[data-layout="strip"] figcaption .say { font-size: max(20px, calc(30 * var(--s))); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
[data-layout="strip"] .act { display: flex; align-items: center; flex-wrap: wrap; gap: calc(8 * var(--s)) calc(20 * var(--s)); margin-top: calc(6 * var(--s)); }

/* ---------- system: a dark diagram, the product picture on top, three nodes in a row ---------- */

[data-layout="system"] { background: #000; color: #fff; }
[data-layout="system"] .in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
[data-layout="system"] .in { padding-bottom: calc(var(--foot) + 14 * var(--s)); }
[data-layout="system"] h2 span { display: inline-block; }
[data-layout="system"] .hero { margin: 0; min-height: 0; height: 100%; aspect-ratio: 1560 / 560; max-width: 100%; justify-self: center; }
[data-layout="system"] .hero img { height: 100%; width: 100%; max-width: none; object-fit: contain; }
[data-layout="system"] .hero-3d { position: relative; width: 100%; height: 100%; touch-action: pan-y; }
[data-layout="system"] .hero-3d canvas { position: absolute; inset: 0; cursor: grab; }
[data-layout="system"] .hero-3d canvas:active { cursor: grabbing; }
[data-layout="system"] .hero .tag { inset-block-start: auto; inset-block-end: calc(10 * var(--s)); inset-inline-end: calc(10 * var(--s)); }
[data-layout="system"] .flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: calc(14 * var(--s)); }
[data-layout="system"] .node { border: 1.5px solid rgba(255, 255, 255, 0.3); border-radius: var(--r); padding: calc(22 * var(--s)) calc(26 * var(--s)); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(4 * var(--s)) calc(18 * var(--s)); align-content: center; align-items: center; }
[data-layout="system"] .node .ico { grid-row: span 2; background: rgba(255, 255, 255, 0.1); color: #fff; }
[data-layout="system"] .node.ours .ico { background: rgba(255, 255, 255, 0.2); }
[data-layout="system"] .node h3 { font-size: max(24px, calc(34 * var(--s))); letter-spacing: -0.025em; font-weight: 700; }
[data-layout="system"] .node p { font-size: max(16px, calc(21 * var(--s))); line-height: 1.3; color: #d6d2c4; }
[data-layout="system"] .node.ours { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
[data-layout="system"] .node.ours p { color: var(--accent-ink); }
[data-layout="system"] .arrow { display: grid; place-items: center; width: calc(56 * var(--s)); color: var(--on-dark); }
[data-layout="system"] .arrow svg { width: 100%; height: auto; overflow: visible; }

/* ---------- track: a roadmap as a staircase of bars on a time axis ---------- */
/* Each .stage sets --from and --span in eighths of the width: where its bar starts and how long it runs.
   A stage with .open fades out at its end. .now marks the first stage. */

[data-layout="track"] .in { align-content: center; gap: calc(32 * var(--s)); }
[data-layout="track"] .stages { display: grid; gap: calc(20 * var(--s)); list-style: none; }
[data-layout="track"] .stage { display: grid; gap: calc(6 * var(--s)); margin-inline-start: calc(var(--from) / 8 * 100%); width: calc(var(--span) / 8 * 100%); min-width: 0; }
[data-layout="track"] .when { font-size: max(16px, calc(24 * var(--s))); font-weight: 650; color: var(--ink-2); white-space: nowrap; }
[data-layout="track"] .bar { position: relative; height: calc(58 * var(--s)); min-height: 44px; border-radius: calc(16 * var(--s)); background: var(--ink); color: var(--paper); display: flex; align-items: center; padding-inline: calc(18 * var(--s)); }
[data-layout="track"] .stage.now .bar { background: var(--accent); color: var(--accent-ink); }
[data-layout="track"] .stage.open .bar { background: var(--ink); }
[data-layout="track"] .bar h3 { font-size: max(19px, calc(34 * var(--s))); letter-spacing: -0.025em; font-weight: 700; }
[data-layout="track"] .now-tag { position: absolute; inset-inline-start: calc(100% + 14 * var(--s)); padding: 0.3em 0.9em; border-radius: 999px; border: 2px solid var(--accent); color: var(--accent); font-size: var(--t-small); font-weight: 700; }
[data-layout="track"] .get { font-size: max(17px, calc(26 * var(--s))); line-height: 1.25; white-space: nowrap; }

/* ---------- plan: the team on the left, the price once on a dark panel on the right ---------- */

[data-layout="plan"] .in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: calc(48 * var(--s)); }
[data-layout="plan"] .team { display: flex; flex-direction: column; justify-content: center; gap: calc(36 * var(--s)); }
[data-layout="plan"] .crew { display: grid; }
[data-layout="plan"] .crew li { display: flex; align-items: baseline; gap: calc(24 * var(--s)); padding: calc(14 * var(--s)) 0; border-top: 1px solid rgba(22, 21, 15, 0.16); font-size: max(22px, calc(44 * var(--s))); font-weight: 650; letter-spacing: -0.025em; }
[data-layout="plan"] .crew li b { font-size: max(64px, calc(128 * var(--s))); line-height: 0.9; letter-spacing: -0.06em; font-weight: 750; color: var(--accent); min-width: 0.6em; }
[data-layout="plan"] .crew li.fine { font-size: max(20px, calc(30 * var(--s))); color: var(--ink-2); }
[data-layout="plan"] .price { background: var(--ink); color: var(--paper); border-radius: var(--r); padding: calc(48 * var(--s)); display: flex; flex-direction: column; justify-content: center; align-self: center; gap: calc(30 * var(--s)); }
[data-layout="plan"] .price .amount { font-size: max(48px, calc(92 * var(--s))); white-space: nowrap; letter-spacing: -0.05em; line-height: 0.95; }
[data-layout="plan"] .price .amount small { display: block; margin-top: 0.35em; font-size: 0.3em; letter-spacing: -0.01em; font-weight: 500; color: #c9c4b3; }
[data-layout="plan"] .price .rows { display: grid; gap: calc(10 * var(--s)); }
[data-layout="plan"] .price .row { background: #26251c; border-radius: calc(16 * var(--s)); padding: calc(22 * var(--s)) calc(26 * var(--s)); display: flex; justify-content: space-between; gap: var(--gap); font-size: max(17px, calc(26 * var(--s))); }
[data-layout="plan"] .price .row b { font-weight: 700; white-space: nowrap; }
[data-layout="plan"] .price .note { font-size: max(14px, calc(18 * var(--s))); color: #c9c4b3; }

/* ---------- phone and portrait for the layouts above ---------- */

@media screen and (max-aspect-ratio: 1/1), screen and (max-width: 760px), screen and (max-height: 520px) {
  [data-layout="split"], [data-layout="view"] { display: flex; flex-direction: column; }
  [data-layout="split"] .in, [data-layout="view"] .in { min-height: 0; padding-inline-end: var(--pad); }
  [data-layout="split"] .photo, [data-layout="view"] .bg { position: relative; inset: auto; order: 2; flex: none; width: calc(100% - 2 * var(--pad)); height: auto; margin: var(--gap) var(--pad) 0; border-radius: var(--r); }
  [data-layout="split"] .photo img, [data-layout="view"] .bg img { height: auto; object-fit: contain; }
  [data-layout="split"] .foot, [data-layout="view"] .foot { order: 3; }
  [data-layout="split"] .num { font-size: calc(120 * var(--s)); }
  [data-layout="split"] h2.big-h { font-size: var(--t-h1); }
  [data-layout="split"] .btn { align-self: stretch; justify-content: center; }
  [data-layout="view"] { background: var(--paper); color: var(--ink); }
  [data-layout="view"] .shade { display: none; }
  [data-layout="view"] .lead { color: var(--ink-2); }
  [data-layout="view"] h2 { font-size: var(--t-h2); }

  [data-layout="strip"] .cols { display: flex; flex-direction: column; gap: calc(28 * var(--s)); }
  [data-layout="strip"] .shot { aspect-ratio: var(--ar-m, var(--ar, 1.25)); }
  [data-layout="strip"] .act .btn { flex: 1 1 100%; justify-content: center; }

  [data-layout="system"] .in { display: flex; }
  [data-layout="system"] .in { padding-bottom: 0; }
  [data-layout="system"] .hero { order: 2; height: auto; width: 100%; }
  [data-layout="system"] .flow { display: flex; flex-direction: column; align-items: stretch; order: 3; padding-bottom: var(--gap); }
  [data-layout="system"] .arrow { width: 100%; transform: rotate(90deg); height: calc(36 * var(--s)); }
  [data-layout="system"] .arrow svg { width: calc(40 * var(--s)); }

  [data-layout="track"] .stage { margin-inline-start: 0; width: auto; }
  [data-layout="track"] .now-tag { position: static; margin-inline-start: auto; }
  [data-layout="view"] .bg .tag { inset-block-start: auto; inset-block-end: calc(12 * var(--s)); }
  [data-layout="track"] .get { white-space: normal; }

  [data-layout="plan"] .in { display: flex; }
  [data-layout="plan"] .price { padding: calc(24 * var(--s)); }
  [data-layout="plan"] .price .amount { font-size: calc(52 * var(--s)); }
  [data-layout="plan"] .price .row { flex-direction: column; gap: calc(2 * var(--s)); }
  [data-layout="plan"] .crew li b { font-size: calc(72 * var(--s)); }
}

/* ======================================================================
   Portfolio, timeline, options, terms and thanks layouts.
   ====================================================================== */

/* An icon chip: a line icon in a tinted circle. Layouts recolour it on dark or accent grounds. */
.ico { flex: none; display: grid; place-items: center; width: max(40px, calc(54 * var(--s))); height: max(40px, calc(54 * var(--s))); border-radius: 50%; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }
.ico svg { width: 48%; height: 48%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The logo of the partner on the foot pair is an image, so one file swaps it. */
.pair img.arico { height: 28%; }

/* ---------- work: a grid of six products, each a card with the product's own icon ---------- */

[data-layout="work"] .in { grid-template-rows: auto minmax(0, 1fr); align-content: start; gap: calc(36 * var(--s)); }
[data-layout="work"] .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: calc(24 * var(--s)); min-height: 0; }
[data-layout="work"] .grid li { display: flex; flex-direction: column; justify-content: center; gap: calc(6 * var(--s)); min-width: 0; background: var(--card); border-radius: calc(28 * var(--s)); padding: calc(28 * var(--s)) calc(36 * var(--s)); box-shadow: 0 0 0 1px rgba(22, 21, 15, 0.06); }
[data-layout="work"] .grid img { width: auto; height: max(56px, calc(100 * var(--s))); max-width: none; align-self: flex-start; margin-bottom: calc(14 * var(--s)); }
[data-layout="work"] .grid h3 { font-size: max(24px, calc(40 * var(--s))); font-weight: 700; letter-spacing: -0.03em; }
[data-layout="work"] .grid p { font-size: max(16px, calc(23 * var(--s))); line-height: 1.3; color: var(--ink-2); }

/* ---------- timeline: one month axis, each stage a bar over its months, a picture and a line per stage ---------- */
/* --from and --span on .stage count months from the left, 8 columns in all (months 1 to 7, then "on"). */

[data-layout="timeline"] .in { grid-template-rows: auto minmax(0, 1fr); align-content: start; gap: calc(26 * var(--s)); }
[data-layout="timeline"] .chart { --lab: calc(500 * var(--s)); position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
[data-layout="timeline"] .stages { margin: 0; padding: 0; list-style: none; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); min-height: 0; }
[data-layout="timeline"] .lines { position: absolute; inset: 0 0 0 var(--lab); display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); pointer-events: none; }
[data-layout="timeline"] .lines span { border-inline-start: 1px solid rgba(22, 21, 15, 0.12); }
[data-layout="timeline"] .stage { display: grid; grid-template-columns: var(--lab) repeat(8, minmax(0, 1fr)); align-items: center; min-width: 0; }
[data-layout="timeline"] .months { height: calc(44 * var(--s)); display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); padding-inline-start: var(--lab); align-items: center; }
[data-layout="timeline"] .m { display: flex; align-items: center; gap: calc(8 * var(--s)); padding-inline-start: calc(12 * var(--s)); }
[data-layout="timeline"] .m b { font-size: max(16px, calc(22 * var(--s))); font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
[data-layout="timeline"] .m .now { font-style: normal; padding: 0.2em 0.8em; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: max(13px, calc(16 * var(--s))); font-weight: 700; }
[data-layout="timeline"] .stage { border-top: 1px solid rgba(22, 21, 15, 0.16); }
[data-layout="timeline"] .stage > figure { grid-column: 1; grid-row: 1; width: calc(176 * var(--s)); aspect-ratio: 16 / 9; margin: 0; background: #000; border-radius: calc(12 * var(--s)); overflow: hidden; }
[data-layout="timeline"] .stage > figure img { width: 100%; height: 100%; object-fit: contain; }
[data-layout="timeline"] .words { grid-column: 1; grid-row: 1; margin-inline-start: calc(196 * var(--s)); padding-inline-end: calc(12 * var(--s)); display: grid; gap: calc(4 * var(--s)); }
[data-layout="timeline"] .words h3 { font-size: max(26px, calc(46 * var(--s))); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
[data-layout="timeline"] .words p { font-size: max(16px, calc(22 * var(--s))); line-height: 1.25; color: var(--ink-2); }
[data-layout="timeline"] .bar { grid-row: 1; grid-column: calc(var(--from) + 2) / span var(--span); margin-inline: calc(4 * var(--s)); height: calc(56 * var(--s)); min-height: 40px; display: flex; align-items: center; padding-inline: calc(12 * var(--s)); border-radius: calc(14 * var(--s)); background: var(--ink); color: var(--paper); font-size: max(15px, calc(20 * var(--s))); font-weight: 650; white-space: nowrap; }
[data-layout="timeline"] .stage.now .bar { background: var(--accent); color: var(--accent-ink); }
[data-layout="timeline"] .stage.open .bar { margin-inline-end: 0; border-radius: calc(14 * var(--s)) 0 0 calc(14 * var(--s)); padding-inline-end: calc(34 * var(--s)); clip-path: polygon(0 0, calc(100% - 28 * var(--s)) 0, 100% 50%, calc(100% - 28 * var(--s)) 100%, 0 100%); }

/* ---------- options: two commercial plans on black, split by a hairline; terms in one quiet row ---------- */
[data-layout="options"] { background: #000; color: #fff; }
[data-layout="options"] .in { grid-template-rows: auto minmax(0, 1fr) auto; gap: calc(40 * var(--s)); }
[data-layout="options"] .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: center; }
[data-layout="options"] .plan { display: flex; flex-direction: column; min-width: 0; padding: 0 calc(72 * var(--s)); }
[data-layout="options"] .plan:first-child { padding-left: 0; border-right: 1px solid rgba(255, 255, 255, 0.16); }
[data-layout="options"] .plan:last-child { padding-right: 0; }
[data-layout="options"] h3 { display: grid; gap: calc(10 * var(--s)); font-size: max(26px, calc(40 * var(--s))); font-weight: 650; letter-spacing: -0.03em; line-height: 1.05; }
[data-layout="options"] h3 span { font-size: max(12px, calc(15 * var(--s))); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
[data-layout="options"] .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(12 * var(--s)) calc(18 * var(--s)); margin-top: calc(30 * var(--s)); }
[data-layout="options"] .price b { font-size: max(64px, calc(136 * var(--s))); font-weight: 700; letter-spacing: -0.055em; line-height: 0.95; font-variant-numeric: tabular-nums; }
[data-layout="options"] .price span { font-size: max(16px, calc(24 * var(--s))); color: rgba(255, 255, 255, 0.6); }
[data-layout="options"] .alt .price b { color: color-mix(in srgb, var(--accent) 45%, #fff); }
[data-layout="options"] dl { margin-top: calc(44 * var(--s)); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
[data-layout="options"] dl div { display: flex; justify-content: space-between; align-items: baseline; gap: calc(24 * var(--s)); padding: calc(18 * var(--s)) 0; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: max(16px, calc(24 * var(--s))); }
[data-layout="options"] dt { color: rgba(255, 255, 255, 0.6); }
[data-layout="options"] dd { font-weight: 600; text-align: right; }
[data-layout="options"] dd small { display: block; margin-top: 0.2em; font-size: 0.72em; font-weight: 400; color: rgba(255, 255, 255, 0.6); }
[data-layout="options"] .terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(56 * var(--s)); font-size: max(13px, calc(17 * var(--s))); line-height: 1.45; color: rgba(255, 255, 255, 0.5); }
@media screen and (max-aspect-ratio: 1/1), screen and (max-width: 760px), screen and (max-height: 520px) {
  [data-layout="options"] .plans { grid-template-columns: 1fr; gap: calc(36 * var(--s)); }
  [data-layout="options"] .plan, [data-layout="options"] .plan:first-child, [data-layout="options"] .plan:last-child { padding: 0; border: 0; }
  [data-layout="options"] .plan:first-child { padding-bottom: calc(36 * var(--s)); border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
  [data-layout="options"] h3 { font-size: calc(34 * var(--s)); }
  [data-layout="options"] .price b { font-size: calc(80 * var(--s)); }
  [data-layout="options"] .price span, [data-layout="options"] dl div { font-size: var(--t-body); }
  [data-layout="options"] dl { margin-top: calc(24 * var(--s)); }
  [data-layout="options"] .terms { grid-template-columns: 1fr; gap: calc(10 * var(--s)); font-size: var(--t-small); }
}


/* ---------- terms: a dark slide, a strong headline over two rows of icon tiles ---------- */

[data-layout="terms"] { background: #000; color: #fff; }
[data-layout="terms"] .in { align-content: center; gap: calc(52 * var(--s)); }
[data-layout="terms"] h2 { font-size: max(36px, calc(76 * var(--s))); }
[data-layout="terms"] h2 span { display: block; }
[data-layout="terms"] h2 span + span { color: color-mix(in srgb, var(--accent) 45%, #fff); }
[data-layout="terms"] .groups { display: grid; gap: calc(18 * var(--s)); }
[data-layout="terms"] .groups section { display: grid; grid-template-columns: calc(190 * var(--s)) repeat(3, minmax(0, 1fr)); gap: calc(18 * var(--s)); align-items: stretch; }
[data-layout="terms"] .groups ul { display: contents; }
[data-layout="terms"] .groups h3 { align-self: center; font-size: max(18px, calc(26 * var(--s))); font-weight: 700; letter-spacing: -0.02em; color: #b8b4a6; }
[data-layout="terms"] .groups li { display: flex; align-items: center; gap: calc(18 * var(--s)); padding: calc(22 * var(--s)) calc(24 * var(--s)); border-radius: calc(22 * var(--s)); background: rgba(255, 255, 255, 0.07); font-size: max(16px, calc(23 * var(--s))); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
[data-layout="terms"] .groups li .ico { background: var(--accent); color: var(--accent-ink); }

/* ---------- thanks: the logos large, a thank-you and one button, on the accent colour ---------- */

[data-layout="thanks"] { background: var(--accent); color: var(--accent-ink); }
[data-layout="thanks"] .in { align-content: center; justify-items: center; text-align: center; gap: calc(52 * var(--s)); padding-bottom: var(--pad); }
[data-layout="thanks"] .foot { display: none; }
[data-layout="thanks"] .logos { display: flex; align-items: center; justify-content: center; gap: calc(36 * var(--s)); }
[data-layout="thanks"] .tile { background: var(--card); border-radius: calc(24 * var(--s)); width: calc(280 * var(--s)); height: calc(128 * var(--s)); display: grid; place-items: center; }
[data-layout="thanks"] .tile img { height: calc(58 * var(--s)); width: auto; max-width: 80%; }
[data-layout="thanks"] .times { font-size: max(26px, calc(44 * var(--s))); font-weight: 500; line-height: 1; }
[data-layout="thanks"] h2 { font-size: max(56px, calc(160 * var(--s))); letter-spacing: -0.05em; }
[data-layout="thanks"] .btn { background: var(--card); color: var(--ink); min-height: max(52px, calc(76 * var(--s))); padding: 0 calc(44 * var(--s)); font-size: max(18px, calc(28 * var(--s))); }

/* ---------- phone and portrait ---------- */

@media screen and (max-aspect-ratio: 1/1), screen and (max-width: 760px), screen and (max-height: 520px) {
  [data-layout="work"] .grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: calc(16 * var(--s)); }

  [data-layout="timeline"] .chart { display: flex; flex-direction: column; gap: calc(44 * var(--s)); }
  [data-layout="timeline"] .months, [data-layout="timeline"] .lines { display: none; }
  [data-layout="timeline"] .stage { display: grid; grid-template-columns: 1fr; gap: calc(12 * var(--s)); align-items: start; border-top: 0; }
  [data-layout="timeline"] .stage > figure { width: 100%; }
  [data-layout="timeline"] .words { margin: 0; padding: 0; }
  [data-layout="timeline"] .bar, [data-layout="timeline"] .stage .bar { grid-column: 1; grid-row: auto; margin: 0; }
  [data-layout="timeline"] .stage.now .bar::after { content: "Now"; margin-inline-start: auto; padding: 0.15em 0.8em; border-radius: 999px; background: var(--card); color: var(--ink); font-size: var(--t-small); }

  [data-layout="work"] .grid h3 { font-size: calc(28 * var(--s)); }
  [data-layout="work"] .grid p { font-size: var(--t-body); }
  [data-layout="timeline"] .stage > figure, [data-layout="timeline"] .words { grid-row: auto; grid-column: 1; }
  [data-layout="timeline"] .words h3 { font-size: calc(32 * var(--s)); }
  [data-layout="timeline"] .words p { font-size: var(--t-body); }
  [data-layout="timeline"] .bar { font-size: var(--t-body); }
  [data-layout="terms"] .groups h3 { font-size: calc(24 * var(--s)); }
  [data-layout="terms"] .groups li { font-size: calc(21 * var(--s)); }

  [data-layout="terms"] .groups { gap: calc(28 * var(--s)); }
  [data-layout="terms"] .groups section { grid-template-columns: 1fr; gap: calc(12 * var(--s)); }
  [data-layout="terms"] h2 { font-size: var(--t-h1); }

  [data-layout="thanks"] .in { justify-content: center; }
  [data-layout="thanks"] .logos { flex-direction: column; align-self: stretch; }
  [data-layout="thanks"] .tile { width: 70%; height: calc(110 * var(--s)); }
  [data-layout="thanks"] .tile img { height: calc(48 * var(--s)); }
  [data-layout="thanks"] .logos { align-items: center; }
  [data-layout="thanks"] h2 { font-size: calc(68 * var(--s)); }
  [data-layout="thanks"] .btn { align-self: stretch; justify-content: center; font-size: var(--t-body); }
}

/* ---------- criteria: a weight bar (dark). Each li sets --w, its share of the whole ---------- */
/* ol.bar of li (b weight, h3 name, optional small note); li.added is outlined, li.extra sits apart, off the bar.
   .brackets names the groups under the bar and takes --w as the share of the bar they span. */

[data-layout="criteria"] { background: #000; color: #fff; }
[data-layout="criteria"] .in { align-content: center; gap: calc(36 * var(--s)); }
[data-layout="criteria"] h2 { font-size: max(32px, calc(64 * var(--s))); }
[data-layout="criteria"] .bar { list-style: none; display: flex; gap: calc(6 * var(--s)); }
[data-layout="criteria"] .bar li { flex: var(--w) 1 0; min-width: 0; display: grid; align-content: start; gap: calc(10 * var(--s)); }
[data-layout="criteria"] .bar b { display: block; padding: calc(14 * var(--s)) calc(16 * var(--s)); border-radius: calc(14 * var(--s)); background: var(--accent); color: var(--accent-ink); font-size: max(22px, calc(40 * var(--s))); font-weight: 750; letter-spacing: -0.04em; line-height: 1; }
[data-layout="criteria"] .bar li.added b { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 calc(3 * var(--s)) var(--accent); }
[data-layout="criteria"] .bar h3 { font-size: max(15px, calc(22 * var(--s))); line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; }
[data-layout="criteria"] .bar small { font-size: max(13px, calc(17 * var(--s))); line-height: 1.3; color: #b8b4a6; }
[data-layout="criteria"] .brackets { display: flex; gap: calc(6 * var(--s)); margin-top: calc(-14 * var(--s)); }
[data-layout="criteria"] .brackets p { flex: var(--w) 1 0; min-width: 0; padding-top: calc(10 * var(--s)); border-top: calc(3 * var(--s)) solid #b8b4a6; font-size: max(15px, calc(22 * var(--s))); font-weight: 700; color: #b8b4a6; }
[data-layout="criteria"] .extra { display: flex; align-items: baseline; gap: calc(18 * var(--s)); width: fit-content; padding: calc(16 * var(--s)) calc(26 * var(--s)); border-radius: 999px; border: calc(2 * var(--s)) dashed #b8b4a6; font-size: max(16px, calc(24 * var(--s))); }
[data-layout="criteria"] .extra b { color: var(--on-dark); font-weight: 700; }

@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  [data-layout="criteria"] h2 { font-size: var(--t-h1); }
  [data-layout="criteria"] .bar { flex-direction: column; gap: calc(22 * var(--s)); }
  [data-layout="criteria"] .bar li { flex: none; grid-template-columns: calc(var(--w) * 1%) minmax(0, 1fr); grid-template-columns: max(64px, calc(var(--w) * 3.2%)) minmax(0, 1fr); align-items: start; column-gap: calc(14 * var(--s)); }
  [data-layout="criteria"] .bar b { grid-row: span 2; text-align: center; padding-inline: 0; }
  [data-layout="criteria"] .bar h3 { font-size: calc(20 * var(--s)); }
  [data-layout="criteria"] .bar small { font-size: calc(16 * var(--s)); }
  [data-layout="criteria"] .brackets { flex-direction: column; margin-top: 0; }
  [data-layout="criteria"] .extra { width: auto; flex-wrap: wrap; border-radius: calc(20 * var(--s)); }
}

/* ---------- sources: a quiet last slide, one source per row ---------- */
/* h2 and ol of li (b is what the source backs, then the source). */

[data-layout="sources"] .in { align-content: center; gap: calc(28 * var(--s)); }
[data-layout="sources"] ol { list-style: none; display: grid; }
[data-layout="sources"] li { padding: calc(16 * var(--s)) 0; border-top: 1px solid rgba(22, 21, 15, 0.16); font-size: max(14px, calc(19 * var(--s))); line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
[data-layout="sources"] li b { color: var(--ink); font-weight: 650; }
[data-layout="sources"] li a { color: inherit; }

/* criteria and sources lists carry no browser padding; system without a .hero centres its three nodes */
[data-layout="criteria"] .bar, [data-layout="sources"] ol { margin: 0; padding: 0; }
[data-layout="sources"] li { font-size: max(15px, calc(21 * var(--s))); }
[data-layout="system"] .in:not(:has(.hero)) { grid-template-rows: auto auto; align-content: center; gap: calc(56 * var(--s)); }
[data-layout="system"] .in:not(:has(.hero)) .node { padding-block: calc(40 * var(--s)); }
[data-layout="system"] .in:not(:has(.hero)) .node h3 { font-size: max(26px, calc(40 * var(--s))); }
[data-layout="system"] .in:not(:has(.hero)) .node p { font-size: max(17px, calc(25 * var(--s))); }
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  [data-layout="system"] .in:not(:has(.hero)) { display: flex; }
}
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  [data-layout="criteria"] .brackets p { display: flex; align-items: center; gap: calc(12 * var(--s)); padding-top: calc(12 * var(--s)); border-top: 0; }
  [data-layout="criteria"] .brackets p::before { content: ""; width: calc(28 * var(--s)); height: calc(18 * var(--s)); border-radius: calc(5 * var(--s)); background: var(--accent); }
  [data-layout="criteria"] .brackets p:last-child::before { background: transparent; box-shadow: inset 0 0 0 calc(2 * var(--s)) var(--accent); }
}

/* ---------- engine: four numbered steps beside one large picture ---------- */


[data-layout="engine"] .in { grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr); grid-template-rows: auto minmax(0, 1fr); align-content: center; column-gap: calc(56 * var(--s)); row-gap: calc(28 * var(--s)); }
[data-layout="engine"] h2 { grid-column: 1 / -1; font-size: max(30px, calc(54 * var(--s))); }
[data-layout="engine"] .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(14 * var(--s)); align-content: center; }
[data-layout="engine"] .steps li { display: grid; grid-template-columns: calc(52 * var(--s)) minmax(0, 1fr); column-gap: calc(18 * var(--s)); align-items: start; padding: calc(16 * var(--s)) calc(20 * var(--s)); border-radius: var(--r); background: var(--paper-2); }
[data-layout="engine"] .steps b { grid-row: span 2; display: grid; place-items: center; width: calc(52 * var(--s)); height: calc(52 * var(--s)); border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: max(16px, calc(24 * var(--s))); }
[data-layout="engine"] .steps h3 { font-size: max(20px, calc(30 * var(--s))); letter-spacing: -0.02em; }
[data-layout="engine"] .steps p { font-size: max(15px, calc(21 * var(--s))); line-height: 1.3; color: var(--ink-2); }
[data-layout="engine"] .left { grid-column: 1; grid-row: 2; display: grid; gap: calc(22 * var(--s)); align-content: center; }
[data-layout="engine"] .lead { font-size: max(15px, calc(20 * var(--s))); color: var(--ink-2); }
[data-layout="engine"] .media { grid-column: 2; grid-row: 2; margin: 0; }
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  [data-layout="engine"] .in { display: flex; flex-direction: column; }
  [data-layout="engine"] h2 { font-size: var(--t-h2); }
  [data-layout="engine"] .media { container-type: normal; }
  [data-layout="engine"] .media img { width: 100%; }
}

/* ---------- trio: three columns, each a heading, one line and a picture ---------- */
/* h2, .cols of .col (h3, p, .shot with img; --ar sets the crop). */

[data-layout="trio"] .in { grid-template-rows: auto minmax(0, 1fr); align-content: start; }
[data-layout="trio"] h2 { font-size: max(30px, calc(54 * var(--s))); }
[data-layout="trio"] .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(28 * var(--s)); align-content: center; min-height: 0; }
[data-layout="trio"] .col { display: grid; gap: calc(14 * var(--s)); align-content: start; min-width: 0; }
[data-layout="trio"] .col h3 { font-size: max(22px, calc(36 * var(--s))); letter-spacing: -0.02em; font-weight: 700; }
[data-layout="trio"] .col p { font-size: max(16px, calc(23 * var(--s))); line-height: 1.3; color: var(--ink-2); }
[data-layout="trio"] .shot { margin: 0; aspect-ratio: var(--ar, 1.1); border-radius: var(--r); overflow: hidden; background: #fff; 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); }
[data-layout="trio"] .shot img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--focus, 50% 0%); display: block; }
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  [data-layout="trio"] .cols { display: flex; flex-direction: column; gap: calc(36 * var(--s)); }
  [data-layout="trio"] .shot { aspect-ratio: var(--ar-m, var(--ar, 1.1)); }
  [data-layout="trio"] h2 { font-size: var(--t-h2); }
}

/* ---------- diagrams and portfolio: chain, sketch, boq, lpo, gallery, shelf ---------- */
/* chain: a row of steps (--n columns). data-s sets a step's state: auto, manual, part, you, mute.
   .dock puts agent cards above the steps they serve (--c is the column). */

:root { --flag: #c2410c; --flag-bg: #fdeee5; --deep: #008b99; }

.chip { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.2em 0.8em; border-radius: 999px; font-size: max(12px, calc(14 * var(--s))); font-weight: 650; background: var(--paper-2); color: var(--ink); white-space: nowrap; }
.chip.flag { background: var(--flag-bg); color: var(--flag); }
.chip.deep { background: var(--deep); color: #fff; }
.chip.ink { background: var(--ink); color: var(--paper); }
.tag-note { font-size: max(13px, calc(17 * var(--s))); color: var(--ink-2); font-weight: 600; letter-spacing: 0.02em; }

[data-layout="chain"] .in, [data-layout="sketch"] .in, [data-layout="boq"] .in, [data-layout="lpo"] .in { align-content: center; gap: calc(34 * var(--s)); }
[data-layout="chain"] h2, [data-layout="sketch"] h2, [data-layout="boq"] h2, [data-layout="lpo"] h2 { max-width: 17em; }
.chain { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: calc(20 * var(--s)); }
.step { position: relative; display: flex; flex-direction: column; gap: calc(12 * var(--s)); padding: calc(22 * var(--s)); min-height: calc(320 * var(--s)); background: var(--card); border: 2px solid transparent; border-radius: calc(22 * var(--s)); min-width: 0; }
.step:not(:last-child)::after { content: ""; position: absolute; top: calc(30 * var(--s)); inset-inline-end: calc(-15 * var(--s)); width: calc(9 * var(--s)); height: calc(9 * var(--s)); border-top: 2px solid var(--ink-2); border-inline-end: 2px solid var(--ink-2); transform: rotate(45deg); z-index: 2; }
.step .n { font-size: max(13px, calc(17 * var(--s))); font-weight: 700; color: var(--ink-2); letter-spacing: 0.04em; }
.step h3 { font-size: max(18px, calc(31 * var(--s))); }
.step p { font-size: max(14px, calc(20 * var(--s))); line-height: 1.3; color: var(--ink-2); }
.step .chip { margin-top: auto; align-self: flex-start; font-size: max(13px, calc(17 * var(--s))); }
.step[data-s="auto"] { background: var(--ink); color: var(--paper); }
.step[data-s="auto"] .n, .step[data-s="auto"] p { color: #aeb8bb; }
.step[data-s="auto"] .chip { background: #26323a; color: var(--paper); }
.step[data-s="manual"] { border-color: var(--deep); }
.step[data-s="manual"] .chip { background: var(--deep); color: #fff; }
.step[data-s="part"] { border-color: var(--deep); border-style: dashed; }
.step[data-s="you"] { border-color: var(--ink); }
.step[data-s="you"] .chip { background: var(--ink); color: var(--paper); }
.step[data-s="mute"] { min-height: calc(190 * var(--s)); }
.legend { display: flex; flex-wrap: wrap; gap: calc(10 * var(--s)) calc(26 * var(--s)); font-size: max(14px, calc(19 * var(--s))); color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 0.6em; }
.legend i { width: 1.1em; height: 1.1em; border-radius: 0.3em; border: 2px solid transparent; background: var(--card); flex: none; }
.legend i.auto { background: var(--ink); }
.legend i.manual { border-color: var(--deep); }
.legend i.part { border-color: var(--deep); border-style: dashed; }
.legend i.you { border-color: var(--ink); }
.legend i.ours { background: var(--accent); }
.legend i.yours { background: var(--ink); }

.dock { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: calc(20 * var(--s)); margin-bottom: calc(34 * var(--s)); }
.agent { grid-column: var(--c); position: relative; background: var(--accent); color: var(--accent-ink); border-radius: calc(22 * var(--s)); padding: calc(22 * var(--s)); display: grid; gap: calc(8 * var(--s)); align-content: start; min-width: 0; }
.agent::after { content: ""; position: absolute; top: 100%; inset-inline-start: 50%; width: 2px; height: calc(34 * var(--s)); background: var(--deep); }
.agent h3 { font-size: max(17px, calc(27 * var(--s))); }
.agent p { font-size: max(14px, calc(19 * var(--s))); line-height: 1.3; color: #0b1115; }
.gate-note { font-size: max(14px, calc(18 * var(--s))); font-weight: 650; }

/* sketch: one wall drawn to scale (--cm on each unit), the sum under it, the question beside it */
.sk { display: grid; gap: calc(14 * var(--s)); }
.dim { display: flex; justify-content: center; position: relative; border-top: 2px solid var(--ink); padding-top: calc(8 * var(--s)); font-weight: 700; font-size: max(15px, calc(26 * var(--s))); }
.dim::before, .dim::after { content: ""; position: absolute; top: calc(-9 * var(--s)); width: 2px; height: calc(16 * var(--s)); background: var(--ink); }
.dim::before { inset-inline-start: 0; }
.dim::after { inset-inline-end: 0; }
.wall { display: flex; gap: calc(4 * var(--s)); height: calc(200 * var(--s)); }
.unit { flex: var(--cm) 1 0; min-width: 0; background: var(--ink); color: var(--paper); border-radius: calc(12 * var(--s)); padding: calc(14 * var(--s)); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.unit span { font-size: max(13px, calc(23 * var(--s))); font-weight: 650; line-height: 1.15; }
.unit b { font-size: max(15px, calc(34 * var(--s))); letter-spacing: -0.02em; }
.unit.gap { flex: var(--cm) 0 0; min-width: calc(34 * var(--s)); padding: calc(4 * var(--s)); align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, var(--flag-bg) 0 calc(6 * var(--s)), #fff 0 calc(12 * var(--s))); border: 2px dashed var(--flag); color: var(--flag); }
.sumline { display: flex; gap: calc(4 * var(--s)); font-weight: 650; font-size: max(14px, calc(24 * var(--s))); }
.sumline .ok { flex: 314 1 0; border-bottom: 2px solid var(--ink); padding-bottom: calc(6 * var(--s)); }
.sumline .no { flex: 6 0 auto; min-width: calc(34 * var(--s)); color: var(--flag); border-bottom: 2px solid var(--flag); padding-bottom: calc(6 * var(--s)); text-align: center; }
.asks { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--gap); }
.ask-card { background: var(--card); border-radius: calc(22 * var(--s)); padding: calc(24 * var(--s)); display: grid; gap: calc(10 * var(--s)); align-content: start; border: 2px solid transparent; }
.ask-card.flag { border-color: var(--flag); }
.ask-card p { font-size: max(15px, calc(24 * var(--s))); line-height: 1.35; }
.ask-card h3 { font-size: max(17px, calc(26 * var(--s))); }

/* boq: two bill-of-quantities lines, one that adds up and one that does not */
.boq { display: grid; gap: calc(10 * var(--s)); }
.boq .row { display: grid; grid-template-columns: 1.2fr 1.3fr 1fr 0.8fr 0.9fr; gap: calc(14 * var(--s)); align-items: center; padding: calc(18 * var(--s)) calc(24 * var(--s)); background: var(--card); border-radius: calc(18 * var(--s)); border: 2px solid transparent; font-size: max(15px, calc(29 * var(--s))); }
.boq .row.h { background: none; padding-block: 0; font-size: max(12px, calc(17 * var(--s))); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }
.boq .row.bad { border-color: var(--flag); background: var(--flag-bg); }
.boq .row b { font-weight: 700; }
.boq .row .num { font-variant-numeric: tabular-nums; text-align: end; font-weight: 650; }
.boq .row .bad-t { color: var(--flag); font-weight: 700; }
.boq .note { grid-column: 1 / -1; font-size: max(14px, calc(23 * var(--s))); color: var(--flag); font-weight: 650; }
.rules { display: flex; flex-wrap: wrap; gap: calc(10 * var(--s)); align-items: center; }
.rules .chip { font-size: max(14px, calc(22 * var(--s))); padding: 0.35em 1em; background: var(--card); }

/* lpo: the quote and the purchase order side by side */
.cmp { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: calc(24 * var(--s)); align-items: stretch; }
.doc { background: var(--card); border-radius: calc(22 * var(--s)); padding: calc(26 * var(--s)); display: grid; gap: calc(12 * var(--s)); align-content: start; }
.doc h3 { font-size: max(18px, calc(31 * var(--s))); }
.doc dl { display: grid; gap: calc(8 * var(--s)); }
.doc dl div { display: flex; justify-content: space-between; gap: 1em; padding: calc(12 * var(--s)) calc(16 * var(--s)); border-radius: calc(12 * var(--s)); background: var(--paper); font-size: max(15px, calc(28 * var(--s))); }
.doc dl div.diff { background: var(--flag-bg); color: var(--flag); font-weight: 700; }
.doc dt { color: inherit; opacity: 0.8; }
.doc dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.hold { align-self: center; display: grid; justify-items: center; gap: calc(8 * var(--s)); text-align: center; max-width: calc(170 * var(--s)); font-weight: 700; font-size: max(14px, calc(23 * var(--s))); color: var(--flag); }
.hold i { width: calc(60 * var(--s)); height: calc(60 * var(--s)); min-width: 40px; min-height: 40px; border-radius: 50%; background: var(--flag); color: #fff; display: grid; place-items: center; font-style: normal; font-size: max(20px, calc(28 * var(--s))); }
.life { display: flex; flex-wrap: wrap; gap: calc(10 * var(--s)); align-items: center; }
.life .chip { font-size: max(14px, calc(24 * var(--s))); padding: 0.45em 1.1em; background: var(--card); }
.life .chip.hot { background: var(--accent); color: var(--accent-ink); }
.life .sep { color: var(--ink-2); }

/* gallery: up to six real screens, each with a name, a status and one line. shelf: every product as a name tile */
[data-layout="gallery"] .in { grid-template-rows: auto minmax(0, 1fr); align-content: start; gap: calc(26 * var(--s)); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: calc(20 * var(--s)); min-height: 0; }
.tile { display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--card); border-radius: calc(22 * var(--s)); overflow: hidden; min-height: 0; }
.tile img { width: 100%; height: 100%; object-fit: cover; object-position: top left; min-height: 0; }
.tile .txt { padding: calc(14 * var(--s)) calc(20 * var(--s)) calc(18 * var(--s)); display: grid; gap: calc(4 * var(--s)); }
.tile .nm { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.tile h3 { font-size: max(19px, calc(32 * var(--s))); letter-spacing: -0.03em; }
.tile p { font-size: max(14px, calc(20 * var(--s))); line-height: 1.3; color: var(--ink-2); }
[data-layout="shelf"] .in { align-content: center; gap: calc(34 * var(--s)); }
.shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(14 * var(--s)); }
.shelf li { background: var(--card); border-radius: calc(18 * var(--s)); padding: calc(18 * var(--s)) calc(20 * var(--s)); display: grid; gap: calc(6 * var(--s)); align-content: end; min-height: calc(120 * var(--s)); }
.shelf img { height: calc(42 * var(--s)); min-height: 26px; width: auto; max-width: 70%; object-fit: contain; object-position: left; }
.shelf h3 { font-size: max(18px, calc(30 * var(--s))); letter-spacing: -0.03em; }
.shelf p { font-size: max(14px, calc(19 * var(--s))); color: var(--ink-2); line-height: 1.25; }

/* pilot measures and the ask list */
.measures { display: grid; gap: calc(12 * var(--s)); }
.measures li { background: var(--card); border-radius: calc(18 * var(--s)); padding: calc(16 * var(--s)) calc(20 * var(--s)); display: flex; justify-content: space-between; align-items: center; gap: 1em; font-size: max(16px, calc(21 * var(--s))); font-weight: 600; line-height: 1.25; }
.nums { display: grid; gap: calc(10 * var(--s)); counter-reset: n; }
.nums li { counter-increment: n; display: flex; align-items: center; gap: 0.9em; font-size: max(19px, calc(30 * var(--s))); font-weight: 650; letter-spacing: -0.02em; }
.nums li::before { content: counter(n); flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 0.8em; }
[data-layout="statement"] .card h3 { font-size: max(21px, calc(40 * var(--s))); }
[data-layout="statement"][data-variant="cards"] .card { padding: calc(32 * var(--s)); gap: calc(14 * var(--s)); min-height: calc(230 * var(--s)); }
[data-layout="statement"][data-variant="cards"] .card p { font-size: max(16px, calc(26 * var(--s))); }
[data-layout="statement"] .card.panel.dark { background: #16232b; }
[data-layout="statement"] .card.panel.dark p { color: #c4ced1; }

@media screen and (max-aspect-ratio: 1/1), screen and (max-width: 760px), screen and (max-height: 520px) {
  .chain, .dock { grid-template-columns: 1fr; }
  .dock { display: grid; gap: calc(10 * var(--s)); margin-bottom: calc(14 * var(--s)); }
  .agent { padding: 14px; }
  .step { min-height: 0; }
  .step:not(:last-child)::after { display: none; }
  .agent { grid-column: auto; }
  .agent::after { display: none; }
  .wall { height: auto; flex-wrap: wrap; }
  .unit { flex: 1 1 28%; min-height: 64px; }
  .unit.gap { flex: 0 0 100%; min-height: 28px; }
  .unit span { font-size: max(11px, calc(12 * var(--s))); }
  .unit b { font-size: max(13px, calc(15 * var(--s))); }
  .unit { padding: calc(8 * var(--s)); }
  .asks, .cmp { grid-template-columns: 1fr; }
  .hold { max-width: none; grid-auto-flow: column; justify-content: center; }
  .boq .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow-wrap: anywhere; font-size: 15px; }
  .boq .row.h { display: none; }
  .boq .row .num { text-align: start; }
  .tiles { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .tile img { height: auto; aspect-ratio: 16 / 10; }
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nums li { font-size: var(--t-h3); }
}

.shelf .mk { display: flex; align-items: center; gap: calc(12 * var(--s)); }
.shelf .mk img { height: calc(44 * var(--s)); min-height: 28px; width: auto; max-width: none; }
.measures li { font-size: max(16px, calc(24 * var(--s))); }

@media screen and (max-aspect-ratio: 1/1), screen and (max-width: 760px), screen and (max-height: 520px) {
  .shelf .mk { flex-wrap: wrap; gap: 6px; }
  .shelf .mk h3 { font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
  .shelf .mk img { height: 28px; }
}
@media screen and (max-aspect-ratio: 1/1), screen and (max-width: 760px), screen and (max-height: 520px) {
  [data-layout="ask"] .tile img { max-width: 80%; height: auto; object-fit: contain; }
}