/* Designloop landing. Report layout: each chapter keeps its text fixed on the left while
   its plates (image-like panels) and sheets (content panels) scroll on the right. */

:root {
  color-scheme: light;

  /* Blue palette, the same scale as the portal (src/app/globals.css): neutral white and grey for the page,
     surfaces and rules, and one blue scale for everything with colour. 600 for buttons and highlighted panels,
     700 for their hover, the sky blues (200–400) for accents, live indicators and the hero's paint. */
  --blue-50: #eef5fd;
  --blue-100: #dcebfb;
  --blue-200: #bcdaf7;
  --blue-300: #8fc2f2;
  --blue-400: #5b9ff0;
  --blue-500: #2f80e4;
  --blue-600: #1f66c7;
  --blue-700: #1a52a1;
  --blue-800: #173f78;
  --blue-900: #132b50;

  --bg: #f6f6f6;
  --ink: #1a1a1a;
  --ink-2: #4a4a4a;
  --ink-3: #8c8c8c;
  --line: #e3e3e3;
  --line-2: #cccccc;
  --panel: #e3e3e3;
  --surface: #f6f6f6;
  --deep: var(--blue-600);
  --deep-ink: #f6f6f6;
  --deep-2: var(--blue-700);
  --deep-line: var(--blue-500);
  --deep-mute: var(--blue-100);
  --accent: var(--blue-400);
  --on-accent: #1a1a1a;
  --signal: var(--blue-300);
  --focus: var(--blue-600);
  --ink-fixed: #1a1a1a;
  --paper-fixed: #f6f6f6;
  --cta: var(--blue-600);
  --cta-ink: #f6f6f6;
  --cta-hover: var(--blue-700);
  --deep-cta-hover: var(--blue-100);
  /* Blue text and icons on the page (not on buttons): 600 on light, 400 on dark so it stays legible. */
  --blue-ink: var(--blue-600);
  /* Something switched on: a pale blue ground with the icon in the action blue. */
  --active: var(--blue-200);
  --active-ink: var(--blue-700);
  /* The hero's paint: sky blues. */
  --mesh-1: var(--blue-300);
  --mesh-2: var(--blue-200);
  --mesh-3: var(--blue-100);
  --shade: 26 26 26;

  --sans: 'Inter Tight', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Same margin on both sides of the viewport, for the top bar, chapters and footer. */
  --gutter: clamp(16px, 2.2vw, 32px);
  --gap: 12px;
  --left: clamp(300px, 30.5vw, 470px);
  --radius: 20px;
  --top: 96px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* A spring with a light overshoot, for things that snap into place. */
  --spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
}

/* Dark mode follows the system: neutral greys with no tint, and the blues step down so they glow without glaring.
   Highlighted panels go navy, something switched on is a navy ground with a bright blue icon, and the hero paints a
   night sky. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #121212;
    --ink: #ededed;
    --ink-2: #b3b3b3;
    --ink-3: #787878;
    --line: #262626;
    --line-2: #383838;
    --panel: #1c1c1c;
    --surface: #262626;
    --deep: var(--blue-800);
    --deep-ink: #ededed;
    --deep-2: var(--blue-900);
    --deep-line: var(--blue-700);
    --deep-mute: var(--blue-200);
    --deep-cta-hover: var(--blue-200);
    --focus: var(--blue-400);
    --blue-ink: var(--blue-400);
    --active: var(--blue-900);
    --active-ink: var(--blue-400);
    --mesh-1: var(--blue-800);
    --mesh-2: var(--blue-900);
    --mesh-3: var(--blue-700);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { overflow-wrap: break-word; }

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

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 10px 14px;
  background: var(--ink); color: var(--bg);
  font: 400 14px/1 var(--mono); text-transform: uppercase; text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Top bar ---------- */

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px var(--gutter) 0;
  pointer-events: none;
}

.tb-nav { display: flex; gap: 18px; }

.tb-link {
  pointer-events: auto;
  padding: 6px 0;
  border: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1 var(--mono);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.tb-link::before { content: "[\00a0"; content: "[\00a0" / ""; }
.tb-link::after { content: "\00a0]"; content: "\00a0]" / ""; }
.tb-link:hover { background: var(--ink); color: var(--bg); box-shadow: 0 0 0 4px var(--ink); }

/* ---------- Type ---------- */

.display {
  margin: 0;
  font: 500 clamp(40px, 4.15vw, 64px)/1.02 var(--sans);
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.sub {
  margin: 16px 0 0;
  color: var(--ink-2);
  font: 400 clamp(20px, 1.9vw, 28px)/1.3 var(--sans);
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.mono-text {
  margin: 0;
  max-width: 46ch;
  color: var(--ink-2);
  font: 400 15px/1.6 var(--mono);
  text-transform: uppercase;
}
.mono-text + .mono-text { margin-top: 12px; }
.actions + .mono-text { margin-top: 32px; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 17px;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  background: transparent;
  color: var(--ink);
  font: 400 15px/1 var(--mono);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.pill:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pill-accent { background: var(--cta); border-color: var(--cta); color: var(--cta-ink); }
.pill-accent:hover { background: var(--cta-hover); border-color: var(--cta-hover); color: var(--cta-ink); }
.pill-light { background: var(--paper-fixed); border-color: var(--paper-fixed); color: var(--ink-fixed); }
.pill-light:hover { background: #ffffff; border-color: #ffffff; color: var(--ink-fixed); }
.is-deep .pill-accent { background: var(--deep-ink); border-color: var(--deep-ink); color: var(--deep); }
.is-deep .pill-accent:hover { background: var(--deep-cta-hover); border-color: var(--deep-cta-hover); }

.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 52px 0 0; }
.price strong { font: 500 clamp(52px, 5.4vw, 84px)/0.95 var(--sans); letter-spacing: -0.055em; }
.price-unit { color: var(--ink-2); font: 400 15px/1.3 var(--mono); text-transform: uppercase; }

/* ---------- Hero: a big title on its own, outside the report grid ---------- */

/* Thin rules hug the title like a layout grid, and a pen paints mesh-gradient strokes behind it (hero.js). */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: max(640px, 100svh);
  padding: 132px var(--gutter) 112px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero-lines { position: absolute; inset: 0; pointer-events: none; }
.hl { position: absolute; display: block; background: var(--line-2); }
.hl-top, .hl-bottom { left: 0; right: 0; height: 1px; top: var(--y); transform-origin: left; }
.hl-left, .hl-right { top: 0; bottom: 0; width: 1px; left: var(--x); transform-origin: top; }
.js .hero:not(.is-measured) .hl { visibility: hidden; }

.hero-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-title {
  margin: 0;
  max-width: 13ch;
  font: 600 clamp(52px, 9.2vw, 176px)/0.98 var(--sans);
  letter-spacing: -0.055em;
  text-wrap: balance;
  text-box: trim-both cap alphabetic;
}
.hero-lede { max-width: 30ch; margin-top: clamp(44px, 4.6vw, 76px); }
.hero .actions { justify-content: center; margin-top: 32px; }

/* On load each word of the title rises from behind its line, line after line, and the lede and buttons follow (hero.js
   adds .is-rising). The text waits hidden for the script, but never longer than 1.5 s. */
.hw { display: inline-block; clip-path: inset(-0.4em -0.3em -0.24em); }
.hw > span { display: inline-block; }
.hero.is-rising .hw > span { animation: hero-rise 1.1s var(--ease) calc(var(--line) * 90ms) both; }
.hero.is-rising :is(.hero-lede, .actions) { animation: hero-follow 1s var(--ease) calc(var(--lines) * 90ms + 160ms) both; }
.hero.is-rising .actions { animation-delay: calc(var(--lines) * 90ms + 280ms); }
.js .hero:not(.is-rising, .has-risen) .hero-body { opacity: 0; animation: hero-show 0s 1.5s forwards; }
@keyframes hero-rise { from { transform: translateY(135%); } }
@keyframes hero-follow { from { opacity: 0; transform: translateY(28px); } }
@keyframes hero-show { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .js .hero .hero-body { opacity: 1; animation: none; }
}

/* The paint sits under the title; while a tool is on, the title lets the pointer through to it. */
.hero-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; touch-action: auto; }
.hero[data-tool] .hero-canvas { pointer-events: auto; touch-action: none; cursor: crosshair; }
.hero[data-tool] { -webkit-user-select: none; user-select: none; }
.hero[data-tool] .hero-body { pointer-events: none; }
.hero { --eraser: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Ccircle cx='18' cy='18' r='16.5' fill='white' fill-opacity='.4' stroke='%231a1a1a' stroke-width='1.5'/%3E%3C/svg%3E") 18 18, cell; }
.hero[data-tool="eraser"] .hero-canvas { cursor: var(--eraser); }

/* The selected stroke's handles, as on mmeshy: its path, a dot to move it, a dotted ring for its radius, and stops. */
.hero-handles { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hh-line { fill: none; stroke: var(--ink); stroke-opacity: .7; stroke-width: 1.25; }
.hh-hit { fill: none; stroke: transparent; stroke-width: 18; stroke-linecap: round; pointer-events: stroke; cursor: copy; touch-action: none; }
.hh-ring { fill: none; stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.25; stroke-dasharray: 2 4; }
.hh-ring.is-small { stroke-opacity: .4; }
.hh-ring-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: grab; touch-action: none; }
.hh-dot { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; pointer-events: all; cursor: grab; touch-action: none; }
.hh-dot.is-on { fill: var(--ink); }
.hh-pivot { cursor: move; }
.hh-ghost { fill: var(--bg); stroke: var(--ink); stroke-opacity: .5; stroke-width: 1.5; pointer-events: none; }
/* While a drag holds the pointer, the hero shows that drag's cursor wherever the pointer goes. */
.hero[data-gesture], .hero[data-gesture] * { cursor: grabbing !important; }
.hero:is([data-gesture="press"], [data-gesture="draw"]), .hero:is([data-gesture="press"], [data-gesture="draw"]) * { cursor: crosshair !important; }
.hero[data-gesture="cut"], .hero[data-gesture="cut"] * { cursor: var(--eraser) !important; }

.hero-tools {
  position: absolute;
  right: var(--gutter);
  bottom: 24px;
  z-index: 3;
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
  padding: 5px;
  border-radius: 14px;
  background: var(--panel);
}
.hero-tools[hidden] { display: none; }
.hero-tool {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s, color .2s, opacity .2s;
}
.hero-tool:hover:not(:disabled) { background: var(--line-2); }
.hero-tool:disabled { opacity: .35; cursor: default; }
.hero-tool[aria-pressed="true"], .hero-tool[aria-pressed="true"]:hover:not(:disabled) { background: var(--active); color: var(--active-ink); }
.hero-tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 960px) {
  .hero { min-height: max(560px, 100svh); padding: 104px var(--gutter) 96px; }
  .hero-title { font-size: clamp(46px, 13.4vw, 96px); }
  .hero-tools { bottom: 16px; }
  .hero-tool { width: 36px; height: 36px; }
}

/* ---------- Chapters ---------- */

/* Every chapter's text shares one spot, level with the top of the plates, and stays there
   for the whole page. Chapters are display: contents so their text and media join one grid;
   the texts overlap in the left column and the active one morphs in as the next takes over. */
.report {
  display: grid;
  grid-template-columns: var(--left) minmax(0, 1fr);
  column-gap: 26px;
  padding: calc(var(--top) - var(--gap)) var(--gutter) 0;
}

.chapter { display: contents; }

.chapter-text {
  position: sticky;
  top: var(--top);
  grid-column: 1;
  grid-row: 1 / span 40;
  align-self: start;
  transition: opacity .55s var(--ease), filter .55s var(--ease), transform .55s var(--ease);
}
.chapter-text > :first-child { margin-top: 0; text-box: trim-start cap alphabetic; }

.js .chapter:not(.is-active) .chapter-text {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(14px);
  pointer-events: none;
}
.js .chapter.is-before .chapter-text { transform: translateY(-14px); }

.chapter-media {
  display: flex;
  flex-direction: column;
  grid-column: 2;
  gap: var(--gap);
  min-width: 0;
  padding-top: var(--gap);
}

/* Steps: on wide screens only the one matching the plate in view stays open. */
.steps { margin: 36px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.steps li { padding: 15px 0; border-top: 1px solid var(--line); }

.step-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  font: 500 22px/1.15 var(--sans);
  letter-spacing: -0.02em;
  transition: color .4s;
}
.step-link {
  display: flex;
  align-items: baseline;
  gap: inherit;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.step-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.step-n { min-width: 2ch; color: var(--ink-3); font: 400 13px/1 var(--mono); }

.step-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .55s var(--ease), opacity .45s;
}
.step-body > p {
  min-height: 0;
  margin: 0;
  overflow: hidden;
  padding-left: calc(2ch + 14px);
  color: var(--ink-2);
  font: 400 13.5px/1.6 var(--mono);
  text-transform: uppercase;
}
.step-body > p::before { content: ""; display: block; height: 10px; }

@media (min-width: 961px) {
  .js .steps li:not(.is-current) .step-title { color: var(--ink-3); }
  .js .steps li:not(.is-current) .step-link:hover { color: var(--ink-2); }
  .js .steps li:not(.is-current) .step-body { grid-template-rows: 0fr; opacity: 0; }
}

/* ---------- Plates: image-like panels that scale as one picture ---------- */

.plate {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  isolation: isolate;
}
.plate > * { font-size: 1.6cqi; }
.is-deep { --focus: var(--deep-ink); background: var(--deep); color: var(--deep-ink); }
.is-signal { background: var(--signal); color: var(--ink-fixed); }

.meta {
  position: absolute;
  z-index: 3;
  font: 400 max(10px, 1.3cqi)/1 var(--mono);
  text-transform: uppercase;
}
.plate > .meta { font-size: max(10px, 1.3cqi); }
.meta-tl { top: 2.6cqi; left: 2.8cqi; }
.meta-tr { top: 2.6cqi; right: 2.8cqi; }
.meta-bl { bottom: 2.6cqi; left: 2.8cqi; }
.meta-br { bottom: 2.6cqi; right: 2.8cqi; }

.js .plate, .js .sheet {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js .plate.is-seen, .js .sheet.is-seen { opacity: 1; transform: none; }

/* Plates played from plates.js: the loop blurs out before it starts over, and a reset
   between loops happens without transitions. */
.plate .scene { transition: opacity .5s ease, filter .5s ease; }
.plate[data-fading] .scene { opacity: 0; filter: blur(6px); }
.plate[data-instant], .plate[data-instant] *, .plate[data-instant] ::before, .plate[data-instant] ::after { transition: none !important; }

/* Animations only run while their plate is on screen. */
.plate:not(.is-inview), .plate:not(.is-inview) * { animation-play-state: paused !important; }

.card {
  border-radius: .9em;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 0 rgb(var(--shade) / 4%), 0 1.6em 3.2em -1.8em rgb(var(--shade) / 28%);
}

.pulse {
  display: inline-block;
  width: .55em; height: .55em;
  border-radius: 50%;
  background: var(--signal);
  animation: pulse 1.4s ease-in-out infinite;
}

/* Hero */
.plate-hero {
  display: grid;
  place-items: center;
  aspect-ratio: auto;
  height: max(480px, calc(100vh - var(--top) - var(--gutter)));
}
.plate > .hero-art {
  width: min(58cqi, 78%);
  height: auto;
  max-height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 2.4cqi 3cqi rgb(var(--shade) / 16%));
  animation: float 8s ease-in-out infinite alternate;
}

/* MVP: one onboarding step at full size. The field focuses, the name types itself in and
   builds the link below, the button wakes up and gets pressed; keeping its size, its label
   gives way to a spinner and then a check. */
.plate > .mvp-card { position: absolute; top: 13cqi; right: 11cqi; bottom: -3cqi; left: 11cqi; display: flex; flex-direction: column; align-items: flex-start; padding: 3.2em 3.8em 0; border-radius: 1.2em 1.2em 0 0; font-size: 2.2cqi; }
.mvp-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.mvp-progress { display: flex; gap: .45em; }
.mvp-progress i { position: relative; width: 3.6em; height: .32em; overflow: hidden; border-radius: 1em; background: color-mix(in srgb, var(--ink) 10%, var(--surface)); }
.mvp-progress i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--cta); transform: scaleX(var(--fill, 0)); transform-origin: left; transition: transform .8s var(--ease); }
.mvp-progress i:nth-child(1) { --fill: 1; }
.mvp-progress i:nth-child(2) { --fill: .12; }
.plate-mvp[data-done] .mvp-progress i:nth-child(2) { --fill: 1; }
.mvp-count { display: inline-flex; gap: .3em; color: var(--ink-3); font: 400 .78em/1 var(--mono); }
.mvp-roll { display: inline-grid; height: 1em; overflow: hidden; }
.mvp-roll span { transition: transform .6s var(--ease); }
.plate-mvp[data-done] .mvp-roll span { transform: translateY(-100%); }
.mvp-title { margin-top: 1.9em; font: 500 2.5em/1.05 var(--sans); letter-spacing: -0.035em; }
.mvp-label { display: flex; justify-content: space-between; width: 100%; margin-top: 2.6em; color: var(--ink-2); font: 400 .74em/1 var(--mono); text-transform: uppercase; }
.mvp-chars { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mvp-input { position: relative; display: flex; align-items: center; width: 100%; height: 2.9em; margin-top: .6em; padding: 0 .9em; border: 1px solid var(--line-2); border-radius: .6em; background: var(--surface); font: 400 1.35em/1 var(--sans); letter-spacing: -0.01em; transition: border-color .3s ease, box-shadow .4s var(--ease); }
.plate-mvp[data-focus] .mvp-input { border-color: var(--focus); box-shadow: 0 0 0 .22em color-mix(in srgb, var(--focus) 16%, transparent); }
.mvp-value { white-space: pre; }
.mvp-input .caret { width: 1.5px; height: 1.15em; margin-left: 1px; opacity: 0; animation: none; }
.plate-mvp[data-focus] .mvp-input .caret { opacity: 1; animation: blink 1s steps(1) infinite; }
.plate-mvp[data-typing] .mvp-input .caret { animation: none; }
.mvp-valid { position: absolute; right: .75em; width: 1.1em; height: 1.1em; padding: .15em; border-radius: 50%; background: var(--cta); color: var(--cta-ink); opacity: 0; transform: scale(.4); transition: opacity .25s ease, transform .5s var(--spring); }
.plate-mvp[data-valid] .mvp-valid { opacity: 1; transform: none; }
.mvp-slug { min-height: 1em; margin-top: .9em; color: var(--ink-3); font: 400 .74em/1 var(--mono); white-space: nowrap; }
.mvp-slug b { color: var(--ink-2); font-weight: 400; }
.mvp-button { position: relative; display: flex; align-items: center; height: 3.3em; margin-top: 2.4em; padding: 0 1.5em; overflow: hidden; border-radius: 100px; background: color-mix(in srgb, var(--ink) 8%, var(--surface)); color: var(--ink-3); font: 400 .8em/1 var(--mono); text-transform: uppercase; white-space: nowrap; transition: background-color .35s ease, color .35s ease, transform .16s ease; }
.mvp-spin, .mvp-done { position: absolute; inset: 0; margin: auto; }
.plate-mvp[data-ready] .mvp-button { background: var(--cta); color: var(--cta-ink); }
.plate-mvp[data-hover] .mvp-button { background: var(--cta-hover); }
.plate-mvp[data-press] .mvp-button { transform: scale(.95); }
.mvp-button-label { transition: opacity .2s ease, filter .2s ease; }
.plate-mvp[data-loading] .mvp-button-label { opacity: 0; filter: blur(3px); }
.mvp-spin { width: 1.4em; height: 1.4em; border: 1.5px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; border-radius: 50%; opacity: 0; transition: opacity .2s ease; animation: spin .7s linear infinite; }
.plate-mvp[data-loading]:not([data-done]) .mvp-spin { opacity: 1; }
.mvp-done { width: 1.6em; height: 1.6em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset .45s var(--ease) .05s; }
.plate-mvp[data-done] .mvp-done { stroke-dashoffset: 0; }

/* The pointer travels on two axes with different easings, so it arcs instead of sliding. */
.mvp-cursor, .mvp-cursor > span { position: absolute; top: 0; left: 0; transition: transform 1s cubic-bezier(.45, 0, .2, 1); }
.mvp-cursor > span { transition-timing-function: cubic-bezier(.2, .7, .3, 1); }
.mvp-cursor { z-index: 2; transform: translateX(var(--x, 0)); }
.mvp-cursor > span { transform: translateY(var(--y, 0)); }
.mvp-cursor .cursor { width: 2.4cqi; fill: var(--ink); stroke: var(--surface); stroke-width: 1.2; transition: transform .16s ease, opacity .3s ease; }
.plate-mvp[data-press] .mvp-cursor .cursor { transform: scale(.88); }
.plate-mvp:not([data-pointer]) .mvp-cursor .cursor { opacity: 0; }

/* Brand: the Designloop mark is built like on a construction sheet: axes, the circles of its
   two lobes and counters, the 26° axis, the pen's outlines with the mark's real anchors and
   handles, the blue fill painting inside them, and the mark sliding left beside its name while the
   construction lines go. The mark is
   drawn in its own units (1408 a side) and scaled into the plate, so strokes are in those
   units too. */
.plate > .brand-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.brand-mark { transform: translate(87.36px, 37.36px) scale(.16); transition: transform 1.2s var(--spring); }
.plate-brand[data-lockup] .brand-mark { transform: translate(31.6px, 76.1px) scale(.105); }
.brand-guides { transition: opacity .8s ease; }
.plate-brand[data-settle] .brand-guides { opacity: .4; }
.plate-brand[data-lockup] .brand-guides { opacity: 0; }
.brand-guides path, .brand-guides circle { fill: none; stroke: var(--ink-3); stroke-width: 2.8; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1); }
.brand-guides .bg-circle { stroke-width: 2.5; opacity: .8; }
.plate-brand[data-guides] .bg-axis,
.plate-brand[data-circles-l] .bg-l,
.plate-brand[data-circles-r] .bg-r,
.plate-brand[data-measure] .bg-h,
.plate-brand[data-measure] .bg-chord,
.plate-brand[data-measure] .bg-angle { stroke-dashoffset: 0; }
.plate-brand[data-circles-l] .bg-l + .bg-l, .plate-brand[data-circles-r] .bg-r + .bg-r, .plate-brand[data-measure] .bg-h + .bg-h { transition-delay: .15s; }
.plate-brand[data-circles-r] .bg-r + .bg-r + .bg-r, .plate-brand[data-measure] .bg-h + .bg-h + .bg-h { transition-delay: .3s; }
.plate-brand[data-measure] .bg-h + .bg-h + .bg-h + .bg-h { transition-delay: .45s; }
.bg-label { fill: var(--ink-3); font: 400 31px var(--mono); opacity: 0; transition: opacity .6s ease .3s; }
.plate-brand[data-measure] .bg-label { opacity: 1; }
.plate-brand[data-settle] .bg-label { opacity: 0; transition-delay: 0s; }
.logo-fill { fill: var(--signal); opacity: 0; transition: opacity .9s ease; }
.plate-brand[data-fill] .logo-fill { opacity: 1; }
.brand-pen { transition: opacity .6s ease; }
.plate-brand[data-settle] .brand-pen { opacity: 0; }
.pen-outline { fill: none; stroke: var(--signal); stroke-width: 5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.65, 0, .35, 1); }
.pen-outline + .pen-outline { transition-delay: .25s; }
.pen-outline + .pen-outline + .pen-outline { transition-delay: .4s; }
.plate-brand[data-pen] .pen-outline { stroke-dashoffset: 0; }
.pen-handles line { stroke: var(--signal); stroke-width: 3.1; }
.pen-handles circle { fill: var(--signal); }
.pen-anchors rect { fill: var(--surface); stroke: var(--signal); stroke-width: 3.75; }
.pen-handles, .pen-anchors { opacity: 0; transition: opacity .5s ease 1s; }
.plate-brand[data-pen] :is(.pen-handles, .pen-anchors) { opacity: 1; }

.brand-lockup { position: absolute; top: 50%; left: 46.5%; transform: translateY(-56%); }
.plate > .brand-lockup { font-size: 9.5cqi; }
.brand-name { display: flex; font: 600 1em/1 var(--sans); letter-spacing: .04em; transition: letter-spacing 1.4s var(--ease) .15s; }
.brand-name i { font-style: normal; opacity: 0; filter: blur(.06em); transform: translateY(.3em); transition: opacity .5s ease, filter .5s ease, transform .9s var(--spring); transition-delay: calc(var(--i, 0) * 45ms); }
.plate-brand[data-lockup] .brand-name { letter-spacing: -0.055em; }
.plate-brand[data-lockup] .brand-name i { opacity: 1; filter: none; transform: none; }

/* Design system: one toggle at full size. It plays its states on a loop (rest, hover,
   pressed, focus, disabled) while its tokens are noted around it, and the visitor can click
   or drag it. Pressed, the knob stretches and turns to glass. */
.plate-system { --track: color-mix(in srgb, var(--ink) 16%, var(--panel)); --track-hover: color-mix(in srgb, var(--ink) 23%, var(--panel)); --knob-spring: linear(0, .045 2%, .18 5%, .52 11%, .8 17%, .97 23%, 1.05 29%, 1.07 34%, 1.06 40%, 1.02 50%, .995 62%, .99 72%, 1); }
.plate > .sys-leaders { position: absolute; inset: 0; width: 100%; height: 100%; }
.sys-leaders path { fill: none; stroke: var(--signal); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sys-leaders circle { fill: var(--signal); }
.sys-leaders .sys-leader-motion { opacity: .35; transition: opacity .3s ease; }
.plate-system[data-moving] .sys-leader-motion { opacity: 1; }
.plate > .sys-note { position: absolute; display: inline-flex; align-items: center; gap: .6em; padding: .55em .8em; border: 1px solid var(--line-2); border-radius: .5em; background: var(--surface); color: var(--ink-2); font: 400 max(10px, 1.2cqi)/1 var(--mono); white-space: nowrap; translate: 0 -50%; }
.sys-note-radius { top: 17.4cqi; right: 76cqi; }
.sys-note-color { top: 17.4cqi; left: 74cqi; }
.sys-note-motion { top: 54.6cqi; left: 76cqi; opacity: .5; }
.plate-system[data-moving] .sys-note-motion { opacity: 1; border-color: var(--signal); }
.plate .sys-note-motion { transition: opacity .3s ease, border-color .3s ease, filter .5s ease; }
.sys-note-color i { width: .9em; height: .9em; border-radius: 50%; background: var(--track); transition: background-color .3s ease; }
.plate-system[data-on] .sys-note-color i { background: var(--cta); }
.sys-swap { display: inline-grid; height: 1em; overflow: hidden; }
.sys-swap span { transform: translateY(-100%); transition: transform .5s var(--ease); }
.plate-system[data-on] .sys-swap span { transform: none; }

.plate > .sys-toggle { position: absolute; top: 27.5cqi; left: 32cqi; width: 36cqi; height: 20cqi; border-radius: 10cqi; background: var(--track); cursor: pointer; touch-action: none; box-shadow: 0 0 0 0 var(--panel), 0 0 0 0 var(--focus); }
.plate .sys-toggle { transition: background-color .3s ease, box-shadow .35s var(--ease), opacity .3s ease, filter .5s ease; }
.plate-system[data-hover] .sys-toggle { background: var(--track-hover); }
.plate-system[data-on] .sys-toggle { background: var(--cta); }
.plate-system[data-on][data-hover] .sys-toggle { background: var(--cta-hover); }
.plate-system[data-focus] .sys-toggle { box-shadow: 0 0 0 .7cqi var(--panel), 0 0 0 1.1cqi var(--focus); }
.plate-system[data-disabled] .sys-toggle { opacity: .38; cursor: not-allowed; }
.sys-knob { position: absolute; top: 2cqi; left: 2cqi; width: 16cqi; height: 16cqi; border-radius: 8cqi; background: var(--paper-fixed); box-shadow: 0 .35cqi .9cqi rgb(var(--shade) / 22%), 0 0 0 .08cqi rgb(var(--shade) / 6%); transition: left .5s var(--knob-spring), width .45s var(--knob-spring), transform .35s var(--knob-spring), background-color .25s ease, box-shadow .3s ease, backdrop-filter .3s ease; }
.plate-system[data-on] .sys-knob { left: 18cqi; }
.plate-system[data-pressed] .sys-knob { width: 21cqi; transform: scale(1.08); background: color-mix(in srgb, var(--paper-fixed) 40%, transparent); backdrop-filter: blur(.5cqi) saturate(1.8) brightness(1.08); box-shadow: inset 0 0 0 .18cqi rgb(255 255 255 / 80%), inset 0 -.7cqi 1.2cqi rgb(255 255 255 / 30%), 0 1.2cqi 2.6cqi -.4cqi rgb(var(--shade) / 32%); }
.plate-system[data-on][data-pressed] .sys-knob { left: 13cqi; }
.plate-system[data-disabled] .sys-knob { box-shadow: none; }
.plate-system[data-dragging] .sys-knob { transition: width .45s var(--knob-spring), transform .35s var(--knob-spring), background-color .25s ease, box-shadow .3s ease; }
.sys-gap { position: absolute; top: 100%; left: 50%; width: 1cqi; height: 2cqi; border-block: 1px solid var(--signal); translate: -50% 0; background: linear-gradient(var(--signal), var(--signal)) center / 1px 100% no-repeat; transition: opacity .3s ease; }
.sys-gap b { position: absolute; top: calc(100% + 1.4cqi); left: 50%; color: var(--signal); font: 400 max(9px, 1.1cqi)/1 var(--mono); white-space: nowrap; translate: -50% 0; }
.plate-system:is([data-pressed], [data-disabled]) .sys-gap { opacity: 0; }

.plate > .sys-states { position: absolute; bottom: 7cqi; left: 50%; display: flex; padding: .4cqi; border-radius: 100px; background: color-mix(in srgb, var(--ink) 5%, var(--panel)); font: 400 max(9px, 1.15cqi)/1 var(--mono); text-transform: uppercase; white-space: nowrap; translate: -50% 0; }
.sys-states > [data-state] { position: relative; padding: 1em 1.4em; color: var(--ink-3); cursor: pointer; transition: color .3s ease; }
.sys-states > [data-state]:hover { color: var(--ink-2); }
.sys-states > .is-current { color: var(--ink); }
.sys-pill { position: absolute; top: .4cqi; bottom: .4cqi; left: 0; width: var(--w, 0); border-radius: 100px; background: var(--surface); box-shadow: 0 1px 2px rgb(var(--shade) / 12%); transform: translateX(var(--x, 0)); transition: transform .5s var(--spring), width .5s var(--spring); }
@media (prefers-color-scheme: dark) { .sys-pill { background: color-mix(in srgb, var(--ink) 14%, var(--surface)); } }
/* On a narrow plate the notes shrink with it and the motion note gives way. */
@container (max-width: 560px) {
  .plate > .sys-note { padding: .45em .65em; font-size: 2.2cqi; }
  .plate > .sys-note-motion, .sys-leaders .sys-leader-motion { display: none; }
  .plate > .sys-states { font-size: 2cqi; }
  .sys-gap b { font-size: 2cqi; }
}

/* Pitch deck: Designloop's own deck, one idea per slide. The visitor moves through it with
   the arrows (the site's pill button) or by clicking the slide. From the cover to slide 2 the
   mark and name shrink into the header (Keynote's Magic Move); each idea leaves upwards and the
   next one rises in, or the other way round going back. Positions are in plate units (cqi). */
.plate > .deck-slide { position: absolute; top: 10.5cqi; left: 9cqi; width: 82cqi; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1.2cqi; background: var(--paper-fixed); color: var(--ink-fixed); cursor: pointer; box-shadow: 0 .2cqi .4cqi rgb(var(--shade) / 6%), 0 3cqi 6cqi -3cqi rgb(var(--shade) / 34%); }
.deck-slide > * { position: absolute; top: 0; left: 0; margin: 0; --move: 1.1s cubic-bezier(.7, 0, .2, 1); }
.dk-mark { width: 15cqi; height: 15cqi; transform-origin: 0 0; transform: translate(14cqi, 15.6cqi); transition: transform var(--move); }
.dk-word { font: 600 8cqi/1 var(--sans); letter-spacing: -0.055em; transform-origin: 0 0; transform: translate(30.5cqi, 18.7cqi); transition: transform var(--move); }
.plate-deck:not([data-slide="1"]) .dk-mark { transform: translate(3cqi, 2.9cqi) scale(.24); }
.plate-deck:not([data-slide="1"]) .dk-word { transform: translate(7.4cqi, 3.75cqi) scale(.3); }
.dk-say { top: 50%; left: 6cqi; width: 68cqi; font: 600 5.4cqi/1.04 var(--sans); letter-spacing: -0.045em; text-wrap: balance; opacity: 0; filter: blur(.5cqi); transform: translateY(-46%); translate: 0 2cqi; transition: opacity .45s ease, filter .45s ease, translate .8s var(--ease); }
.dk-say.is-past { translate: 0 -2cqi; }
.dk-say.is-on { opacity: 1; filter: none; translate: none; transition-delay: .18s; }
.plate-deck[data-slide="2"] .dk-say.is-on { transition-delay: .45s; }
.dk-price { display: flex; align-items: baseline; gap: 1.4cqi; }
.dk-price b { font: 600 10cqi/1 var(--sans); letter-spacing: -0.05em; }
.dk-price > span { color: #4a4a4a; font: 400 1.8cqi/1 var(--mono); letter-spacing: 0; text-transform: uppercase; }
.dk-page { top: auto; right: 3.4cqi; bottom: 2.6cqi; left: auto; color: #8c8c8c; font: 400 1.2cqi/1 var(--mono); }
.dk-roll { display: inline-grid; height: 1em; overflow: hidden; vertical-align: top; }
.dk-roll span { transform: translateY(calc(var(--i, 0) * -100%)); transition: transform .6s var(--ease); }
.dk-progress { top: auto; bottom: 0; width: 100%; height: .35cqi; background: var(--ink-fixed); transform-origin: left; transform: scaleX(var(--p, calc(1 / 6))); transition: transform .8s var(--ease); }

.plate > .deck-keys { position: absolute; top: 61cqi; right: 9cqi; left: 9cqi; display: flex; align-items: center; justify-content: space-between; }
.dk-count { color: var(--ink-3); font: 400 max(10px, 1.3cqi)/1 var(--mono); }
.dk-nav { display: flex; gap: 8px; }
.dk-nav .pill { justify-content: center; width: 52px; padding: 0; }
.dk-nav .pill.is-off { opacity: .35; pointer-events: none; }
@container (max-width: 560px) { .dk-nav { scale: .75; transform-origin: right center; } }

/* Systems for AI: a coding agent gets the prompt and types a button with a loose colour and
   radius. The system's rule underlines both values, they snap to tokens, and the preview on
   the right follows: off colour and square corners first, then the real primary button. */
.plate > .ai-editor { position: absolute; top: 12cqi; left: 5cqi; width: 55cqi; padding-bottom: .6em; border-radius: 1.2cqi; font-size: 1.7cqi; }
.ai-bar { display: flex; align-items: center; gap: .8em; padding: 1.1em 1.4em; border-bottom: 1px solid var(--line); color: var(--ink-3); font: 400 .78em/1 var(--mono); text-transform: uppercase; }
.ai-icon { color: var(--blue-ink); }
.ai-prompt { margin: 1.3em 1.4em 1.2em; font: 400 1.35em/1.3 var(--sans); letter-spacing: -0.01em; opacity: 0; transform: translateY(.4em); transition: opacity .5s ease, transform .7s var(--ease); }
.plate-agent[data-prompt] .ai-prompt { opacity: 1; transform: none; }
.ai-caret { color: var(--signal); font-family: var(--mono); }
.ai-code-block { margin: 0 1.4em; padding: 1em 0 .6em; border-top: 1px solid var(--line); font: 400 .95em/1.8 var(--mono); }
.ai-line { position: relative; display: flex; align-items: center; gap: 1.4em; min-height: 1.8em; }
.ai-line > b { flex: none; width: 1.2em; color: var(--ink-3); font-weight: 400; text-align: right; transition: color .3s ease; }
.ai-code { display: inline-block; flex: none; max-width: calc(var(--n, 0) * 1ch); overflow: hidden; white-space: pre; vertical-align: top; }
.plate-agent[data-fixed] .ai-code { max-width: none; }
.ai-line.is-typing::after { content: ""; order: 1; width: 1.5px; height: 1.15em; margin-left: -1.3em; background: var(--ink); }
.c-p { color: var(--ink-3); }
.c-t { color: var(--blue-ink); }
.c-a { color: var(--ink-2); }
.c-s, .c-n { color: color-mix(in srgb, var(--accent) 65%, var(--ink)); }
.fix { display: inline-flex; vertical-align: baseline; }
.plate-agent[data-lint] .was { text-decoration: underline wavy var(--accent); text-decoration-thickness: 1px; text-underline-offset: .3em; }
.plate-agent[data-lint] .ai-line:nth-child(4) > b, .plate-agent[data-lint] .ai-line:nth-child(5) > b { color: var(--accent); }
.tok { display: none; align-items: center; gap: .4em; padding: 0 .45em; border-radius: .35em; background: color-mix(in srgb, var(--signal) 22%, transparent); color: var(--ink); }
.tok i { width: .7em; height: .7em; border-radius: 50%; background: var(--cta); }
.plate-agent[data-fixed] .was { display: none; }
.plate-agent[data-fixed] .tok { display: inline-flex; animation: tok-in .6s var(--spring) both; }
.plate-agent[data-fixed] .ai-line:nth-child(5) .tok { animation-delay: .12s; }
.ai-lint { position: absolute; right: 0; padding: .35em .7em; border-radius: 100px; background: var(--accent); color: var(--on-accent); font: 400 .78em/1.2 var(--mono); text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateX(-.6em); transition: opacity .3s ease, transform .5s var(--spring); }
.plate-agent[data-lint]:not([data-done]) .ai-lint { opacity: 1; transform: none; }
.ai-done { display: flex; align-items: center; gap: .6em; margin: .8em 1.4em; font: 400 .8em/1 var(--mono); text-transform: uppercase; opacity: 0; transform: translateY(.4em); transition: opacity .4s ease, transform .6s var(--ease); }
.ai-done svg { width: 1.3em; height: 1.3em; color: var(--blue-ink); }
.plate-agent[data-done] .ai-done { opacity: 1; transform: none; }

.plate > .ai-preview { position: absolute; top: 19cqi; right: 5cqi; display: grid; place-items: center; width: 32cqi; height: 38cqi; border: 1px solid var(--line-2); border-radius: 1.2cqi; background: radial-gradient(circle, var(--line-2) .1cqi, transparent .16cqi) 0 0 / 1.6cqi 1.6cqi, var(--surface); }
.ai-preview-label { position: absolute; top: 1.6cqi; left: 1.8cqi; color: var(--ink-3); font: 400 max(9px, 1.1cqi)/1 var(--mono); }
.ai-btn { --fill: var(--cta); --round: 3.2cqi; display: inline-flex; align-items: center; height: 6.4cqi; padding: 0 3.4cqi; border-radius: var(--round); background: var(--fill); color: var(--cta-ink); font: 500 1.9cqi/1 var(--sans); letter-spacing: -0.01em; white-space: nowrap; opacity: 0; transform: scale(.9); transition: opacity .4s ease, transform .6s var(--spring), background-color .7s ease, border-radius .8s var(--spring); }
.plate-agent:is([data-btn="base"], [data-btn="raw"]) .ai-btn { opacity: 1; transform: none; }
.plate-agent[data-btn="raw"] .ai-btn { --fill: #2f6fc0; --round: .8cqi; }

/* Ways of working: one task moves from tool to tool. At each hand-off its status icon fills
   another quarter (todo, design, code, review) and closes into a check, the status name rolls,
   and the activity log below gains a line with the tool that did it. */
.plate > .wk-card { position: absolute; top: 11cqi; left: 12cqi; width: 76cqi; padding: 2.4em 2.6em 1.6em; border-radius: 1.2cqi; font-size: 1.9cqi; }
.wk-head { display: flex; align-items: center; justify-content: space-between; color: var(--ink-3); font: 400 .8em/1 var(--mono); }
.wk-prio { display: flex; align-items: flex-end; gap: .2em; height: 1em; }
.wk-prio i { width: .28em; border-radius: .1em; background: var(--ink-2); }
.wk-prio i:nth-child(1) { height: 40%; }
.wk-prio i:nth-child(2) { height: 70%; }
.wk-prio i:nth-child(3) { height: 100%; }
.wk-title { display: block; margin-top: .9em; font: 500 2.2em/1.05 var(--sans); letter-spacing: -0.035em; }
.wk-status { display: flex; align-items: center; gap: .7em; margin-top: 1.3em; padding-bottom: 1.4em; border-bottom: 1px solid var(--line); }
.wk-icon { --tone: var(--ink-3); --p: 0; width: 2.4em; height: 2.4em; overflow: visible; }
.wk-ring { fill: none; stroke: var(--tone); stroke-width: 1.4; transition: stroke .4s ease, fill .4s ease; }
.wk-pie { fill: none; stroke: var(--tone); stroke-width: 6.5; stroke-dasharray: var(--p) 20.42; transform: rotate(-90deg); transform-origin: center; transition: stroke-dasharray .8s var(--spring), stroke .4s ease; }
.wk-check { fill: none; stroke: var(--cta-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 9; stroke-dashoffset: 9; transition: stroke-dashoffset .5s var(--ease) .35s; }
.plate-flow[data-stage="1"] .wk-icon { --tone: var(--signal); --p: 5.105; }
.plate-flow[data-stage="2"] .wk-icon { --tone: var(--signal); --p: 10.21; }
.plate-flow[data-stage="3"] .wk-icon { --tone: var(--signal); --p: 15.315; }
.plate-flow[data-stage="4"] .wk-icon { --tone: var(--cta); --p: 20.42; }
.plate-flow[data-stage="4"] .wk-ring { fill: var(--cta); }
.plate-flow[data-stage="4"] .wk-check { stroke-dashoffset: 0; }
.wk-roll { display: inline-grid; height: 1.2em; overflow: hidden; font: 500 1.15em/1.2 var(--sans); letter-spacing: -0.01em; }
.wk-roll span { transform: translateY(calc(var(--stage, 0) * -100%)); transition: transform .6s var(--ease); }
.plate-flow[data-stage="1"] .wk-roll { --stage: 1; }
.plate-flow[data-stage="2"] .wk-roll { --stage: 2; }
.plate-flow[data-stage="3"] .wk-roll { --stage: 3; }
.plate-flow[data-stage="4"] .wk-roll { --stage: 4; }
.wk-feed { position: relative; display: grid; gap: .2em; margin: 1.1em 0 0; padding: 0; list-style: none; }
.wk-feed::before { content: ""; position: absolute; top: 1.3em; bottom: 1.3em; left: .45em; width: 1px; background: var(--line-2); transform: scaleY(calc(var(--rows, 0) / 3)); transform-origin: top; transition: transform .6s var(--ease); }
.wk-feed li { position: relative; display: flex; align-items: center; gap: .9em; padding: .55em 0 .55em 2em; font: 400 1em/1.2 var(--sans); opacity: 0; transform: translateY(.6em); transition: opacity .4s ease, transform .6s var(--spring); }
.wk-feed li::before { content: ""; position: absolute; top: 50%; left: .2em; width: .5em; height: .5em; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--line-2); translate: 0 -50%; }
.wk-feed li.is-shown { opacity: 1; transform: none; }
.wk-feed li.is-shown:last-child::before { background: var(--cta); box-shadow: none; }
.wk-tool { padding: .45em .7em; border: 1px solid var(--line-2); border-radius: 100px; color: var(--ink-2); font: 400 .72em/1 var(--mono); text-transform: uppercase; white-space: nowrap; }
.wk-feed time { margin-left: auto; color: var(--ink-3); font: 400 .78em/1 var(--mono); }

/* Extra capacity: a sprint at 120 %. Each of three lanes has one task past the dashed limit.
   A fourth lane joins (Designloop), the three tasks over the limit fly into it, and the load
   counts down to 90 % while the hatched overflow on the meter closes. */
.plate > .cap-card { --load: 120; position: absolute; top: 11cqi; left: 8cqi; width: 84cqi; padding: 2.8cqi 3cqi 3.4cqi; border-radius: 1.2cqi; font-size: 1.8cqi; }
.cap-head { display: flex; justify-content: space-between; color: var(--ink-3); font: 400 .8em/1 var(--mono); text-transform: uppercase; }
.cap-num { display: block; margin-top: .45em; font: 600 4.6em/1 var(--sans); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.cap-meter { position: relative; display: block; height: .7em; margin: 1.3em 0 2.6em; border-radius: 1em; background: color-mix(in srgb, var(--ink) 9%, var(--surface)); }
.cap-fill, .cap-over { position: absolute; top: 0; bottom: 0; transition: width 1.1s var(--spring); }
.cap-fill { left: 0; width: calc(min(var(--load), 100) / 120 * 100%); border-radius: 1em 0 0 1em; background: var(--cta); }
.cap-over { left: 83.333%; width: calc(max(var(--load) - 100, 0) / 120 * 100%); border-radius: 0 1em 1em 0; background: repeating-linear-gradient(-45deg, var(--accent) 0 .22em, color-mix(in srgb, var(--accent) 45%, var(--surface)) .22em .44em); }
.cap-meter b { position: absolute; top: -.45em; bottom: -.45em; left: 83.333%; width: 1px; background: var(--ink-2); }
.cap-meter b::after { content: attr(data-l); position: absolute; top: calc(100% + .5em); left: 50%; color: var(--ink-3); font: 400 .78em/1 var(--mono); white-space: nowrap; translate: -50% 0; }
.cap-lanes { --u: 10.6cqi; --row: 4.8cqi; position: relative; height: calc(var(--rows, 3) * var(--row) - 1cqi); transition: height .7s var(--spring); }
.plate-plus[data-joined] .cap-lanes { --rows: 4; }
.cap-limit { position: absolute; top: -.8cqi; bottom: -.8cqi; left: calc(5cqi + 5 * var(--u) - .25cqi); border-left: 1px dashed var(--ink-3); }
.cap-who { position: absolute; top: calc(var(--y) * var(--row)); left: 0; display: grid; place-items: center; width: 3.8cqi; height: 3.8cqi; border-radius: 50%; background: color-mix(in srgb, var(--ink) 12%, var(--surface)); color: var(--ink-2); font: 500 .74em/1 var(--sans); }
.cap-who.is-new { background: var(--cta); color: var(--cta-ink); opacity: 0; transform: scale(.5); transition: opacity .4s ease, transform .7s var(--spring); }
.cap-who svg { width: 62%; height: 62%; }
.cap-who em { position: absolute; left: calc(5cqi + 5.25 * var(--u)); color: var(--blue-ink); font: 400 1em/1 var(--mono); font-style: normal; text-transform: uppercase; white-space: nowrap; }
.plate-plus[data-joined] .cap-who.is-new { opacity: 1; transform: none; }
.cap-task { position: absolute; top: calc(var(--y) * var(--row)); left: calc(5cqi + var(--x) * var(--u)); display: flex; align-items: center; justify-content: center; width: calc(var(--w) * var(--u) - .5cqi); height: 3.8cqi; padding: 0 .5em; overflow: hidden; border-radius: .6cqi; background: color-mix(in srgb, var(--ink) 7%, var(--surface)); color: var(--ink-2); font: 400 .78em/1 var(--mono); text-transform: uppercase; white-space: nowrap; transition: left .9s var(--spring), top .9s var(--spring), background-color .4s ease, color .4s ease; }
.cap-task.is-over { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent) 38%, var(--surface)) 0 .3em, color-mix(in srgb, var(--accent) 20%, var(--surface)) .3em .6em); color: var(--ink); }
.cap-task.is-moved { background: color-mix(in srgb, var(--cta) 24%, var(--surface)); color: var(--ink); }

/* Product evolution: an audit board with 23 versions of the same button (radius, tone,
   padding, weight and case all slightly off). They fly together and settle into the site's
   real button and its three variants (accent, outline, light); the extra copies fade, the
   count drops from 23 to 3, and the real buttons take over so the visitor can hover and
   press them. The landing spots are measured from the real buttons (plates.js). */
.plate > .evo-count { position: absolute; top: 8.5cqi; left: 2.8cqi; display: grid; font: 500 2.8cqi/1 var(--sans); letter-spacing: -0.03em; }
.evo-count > span { grid-area: 1 / 1; transition: opacity .5s ease, filter .5s ease, transform .7s var(--ease); }
.evo-count > span + span, .plate-evolve[data-merged] .evo-count > span:first-child { opacity: 0; filter: blur(.4cqi); transform: translateY(.4em); }
.plate-evolve[data-merged] .evo-count > span:first-child { transform: translateY(-.4em); }
.plate-evolve[data-merged] .evo-count > span + span { opacity: 1; filter: none; transform: none; transition-delay: .9s; }
.plate > .evo-canvas { position: absolute; inset: 0; }
.evo-btn { --x: var(--x0); --y: var(--y0); --bg: var(--bg0); --fg: var(--fg0); --bd: var(--bd0); --r: calc(var(--r0) * 1cqi); --h: calc(var(--h0) * 1cqi); --px: calc(var(--px0) * 1cqi); --fw: var(--fw0); --wait: calc(var(--d) * .5s); position: absolute; top: calc(var(--y) * 1cqi); left: calc(var(--x) * 1cqi); display: inline-flex; align-items: center; height: var(--h); padding: 0 var(--px); border: var(--bd); border-radius: var(--r); background: var(--bg); color: var(--fg); font: var(--fw) 1.5cqi/1 var(--sans); letter-spacing: -0.01em; white-space: nowrap; translate: -50% -50%; transition: top 1s var(--spring) var(--wait), left 1s var(--spring) var(--wait), height .6s ease var(--wait), padding .6s ease var(--wait), border .6s ease var(--wait), border-radius .6s ease var(--wait), background-color .6s ease var(--wait), color .6s ease var(--wait), opacity .35s ease calc(var(--wait) + .75s), scale .6s ease var(--wait); }
.evo-btn.is-mono { font-family: var(--mono); font-size: 1.3cqi; letter-spacing: 0; }
.evo-btn.is-upper { text-transform: uppercase; }
.evo-btn.is-line span { text-decoration: underline; text-underline-offset: .3em; }
.evo-btn[data-keep] { z-index: 2; }
/* Merged, every copy takes the real button's measures and its group's look. */
.plate-evolve[data-merged] .evo-btn { --y: var(--ty); --h: 38px; --px: 17px; --r: 100px; --fw: 400; font-family: var(--mono); font-size: 15px; letter-spacing: 0; text-transform: uppercase; scale: var(--k, 1); }
.plate-evolve[data-merged] .evo-btn span { text-decoration: none; }
.plate-evolve[data-merged] .evo-btn.is-primary { --x: var(--tx-primary); --bg: var(--cta); --fg: var(--cta-ink); --bd: 1px solid var(--cta); }
.plate-evolve[data-merged] .evo-btn.is-secondary { --x: var(--tx-secondary); --bg: transparent; --fg: var(--ink); --bd: 1px solid var(--line-2); }
.plate-evolve[data-merged] .evo-btn.is-ghost { --x: var(--tx-ghost); --bg: var(--paper-fixed); --fg: var(--ink-fixed); --bd: 1px solid var(--paper-fixed); }
.plate-evolve[data-merged] .evo-btn:not([data-keep]) { opacity: 0; }
.plate-evolve[data-done] .evo-btn { opacity: 0; transition: opacity .25s ease; }

.evo-real { position: absolute; top: 35cqi; left: 50%; z-index: 3; display: flex; gap: 2.6cqi; translate: -50% -19px; scale: var(--k, 1); transform-origin: 50% 19px; }
.evo-pick { display: flex; flex-direction: column; align-items: center; gap: 1.6cqi; }
.evo-real .pill { opacity: 0; pointer-events: none; transition: background-color .2s, color .2s, border-color .2s, opacity .25s ease, transform .18s var(--ease); }
.evo-real .pill:active { transform: scale(.96); }
.plate-evolve[data-done] .evo-real .pill { opacity: 1; pointer-events: auto; }
.evo-cap { color: var(--ink-3); font: 400 max(9px, 1.2cqi)/1 var(--mono); text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateY(.6em); transition: opacity .5s ease, transform .7s var(--ease); }
.plate-evolve[data-done] .evo-cap { opacity: 1; transform: none; }
.plate-evolve[data-done] .evo-pick + .evo-pick .evo-cap { transition-delay: .08s; }
.plate-evolve[data-done] .evo-pick + .evo-pick + .evo-pick .evo-cap { transition-delay: .16s; }
@container (max-width: 560px) { .evo-canvas { --k: .62; } }

/* Subscribe */
.plate-sub { display: grid; place-items: center; }
.plate > .sub-card { position: relative; width: 60%; padding: 1.6em 1.7em 1.9em; font-size: max(1.6cqi, 11px); }
.sub-head { margin: 0; font: 500 1.15em/1.2 var(--sans); letter-spacing: -0.02em; }
.sub-price { margin: 1.8em 0 0; color: var(--ink-2); font: 400 .85em/1 var(--mono); text-transform: uppercase; }
.sub-price b { display: block; margin-bottom: .35em; color: var(--ink); font: 500 4.6em/1 var(--sans); letter-spacing: -0.055em; text-transform: none; }
.sub-rule { display: block; height: 1px; margin: 1.6em 0; background: var(--line); }
.sub-call { display: flex; align-items: center; gap: .7em; margin: 0; font: 400 .8em/1.2 var(--mono); text-transform: uppercase; }
.sub-call svg { flex: none; width: 1.4em; height: 1.4em; }
.sub-row { display: flex; margin-top: 1.8em; }
.sub-btn {
  position: relative;
  display: grid;
  flex: 1;
  height: 3.2em;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 100px;
  background: var(--cta);
  color: var(--cta-ink);
  font: 400 .8em/1 var(--mono);
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s;
}
.sub-btn:hover { background: var(--cta-hover); }
[data-state="active"] .sub-btn { cursor: default; }
.sub-btn:focus-visible, .sub-tool:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* The labels share one cell; the current one sits in the middle, the others wait above
   or below, so changing state rolls them up or down like a flip clock. */
.sub-line { display: flex; grid-area: 1 / 1; align-items: center; justify-content: center; gap: .6em; transition: transform .55s var(--ease), opacity .35s; }
.sub-line[data-pos="above"] { opacity: 0; transform: translateY(-100%); }
.sub-line[data-pos="below"] { opacity: 0; transform: translateY(100%); }
.sub-line svg { width: 1.5em; height: 1.5em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Pause, resume and cancel slide out beside the button once subscribed. */
.sub-tools { display: flex; gap: .45em; max-width: 0; overflow: hidden; transition: max-width .5s var(--ease), margin .5s var(--ease); }
[data-state="active"] .sub-tools, [data-state="paused"] .sub-tools { max-width: 8em; margin-left: .45em; }
.sub-tool { display: grid; flex: none; place-items: center; width: 3.2em; height: 3.2em; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--ink); font-size: .8em; cursor: pointer; transition: background .2s, border-color .2s; }
.sub-tool[hidden] { display: none; }
.sub-tool:hover { border-color: var(--ink-3); background: var(--panel); }
.sub-tool svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Andrés answers from just below the card. */
.sub-bubble {
  position: absolute;
  top: calc(100% + 1.1em);
  left: 50%;
  display: flex;
  align-items: center;
  gap: .7em;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: .6em 1.2em .6em .6em;
  border-radius: 1.6em;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 0 rgb(var(--shade) / 4%), 0 1.2em 2.4em -1.4em rgb(var(--shade) / 30%);
  font: 400 1em/1.35 var(--sans);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -.6em) scale(.92);
  transform-origin: 50% 0;
  transition: opacity .25s, transform .55s cubic-bezier(.34, 1.56, .64, 1);
}
.sub-bubble::before { content: ""; position: absolute; top: -.35em; left: 50%; width: .8em; height: .8em; border-radius: .15em; background: inherit; transform: translateX(-50%) rotate(45deg); }
.sub-bubble.is-shown { opacity: 1; transform: translate(-50%, 0); }
.sub-bubble .avatar { flex: none; width: 2.2em; height: 2.2em; }
.confetti { position: absolute; z-index: 4; width: max(6px, .7cqi); height: max(10px, 1.1cqi); border-radius: 2px; pointer-events: none; }

/* Queue */
.plate-queue { display: flex; flex-direction: column; justify-content: center; padding: 6cqi 12%; }
.plate > .queue-demo { display: grid; gap: 1.2em; font-size: max(1.6cqi, 11px); }
.queue { display: grid; gap: .6em; margin: 0; padding: 0; list-style: none; }
.queue li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1em;
  height: 3.3em;
  padding: 0 1.2em;
  border: 1px solid var(--line-2);
  border-radius: .8em;
  background: var(--surface);
  font: 500 1.35em/1 var(--sans);
  letter-spacing: -0.02em;
  user-select: none;
}
.queue li:not(.is-live) { cursor: grab; }
.queue li:not(.is-live):hover { border-color: var(--ink-3); }
.queue li:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.queue li.is-live { border-color: var(--signal); background: var(--signal); color: var(--ink-fixed); }
.queue li.is-live .q-meta, .queue li.is-live .q-n { color: var(--ink-fixed); }
.queue li.is-live .q-files img { border-color: var(--signal); }
.queue li.is-dragging { z-index: 2; box-shadow: 0 1.4em 2.6em -1em rgb(var(--shade) / 60%); cursor: grabbing; }
.queue li.is-new { animation: queue-in .5s var(--ease); }
.queue li.is-leaving { animation: queue-out .4s var(--ease) forwards; }
.q-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-meta { display: flex; flex: none; gap: .9em; color: var(--ink-3); font: 400 .6em/1 var(--mono); }
.q-meta span { display: inline-flex; align-items: center; gap: .35em; }
.q-meta svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
/* Two attached images, stacked like files. */
.q-files { display: flex; flex: none; padding-right: .2em; }
.q-files img { display: block; width: 2em; height: 1.5em; object-fit: cover; border: 2px solid var(--surface); border-radius: .3em; transform: rotate(-6deg); }
.q-files img + img { margin-left: -1.1em; transform: rotate(5deg) translateY(.08em); }
.grip { flex: none; width: .5em; height: 1em; background: radial-gradient(circle, var(--ink-3) 1.2px, transparent 1.4px) 0 0 / .25em .34em; touch-action: none; }
.grip { position: relative; }
.grip::after { content: ""; position: absolute; inset: -1.2em -1em; }
.is-live .grip { opacity: 0; }
.q-n { flex: none; min-width: 1.2em; color: var(--ink-3); font: 400 .6em/1 var(--mono); }
.q-status { display: inline-flex; flex: none; align-items: center; gap: .5em; margin-left: auto; padding: .6em .8em; border-radius: 100px; background: #ffffff; color: var(--ink-fixed); font: 400 .52em/1 var(--mono); text-transform: uppercase; }
.q-status .pulse { background: var(--ink-fixed); }
.queue-add { display: flex; gap: .6em; }
.queue-add input {
  flex: 1;
  min-width: 0;
  padding: .9em 0;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  caret-color: var(--ink);
  font: 400 max(16px, 1.2em)/1.2 var(--sans);
  letter-spacing: -0.015em;
  transition: border-color .2s;
}
.queue-add input::placeholder { color: var(--ink-3); }
.queue-add input:hover { border-bottom-color: var(--ink-3); }
.queue-add input:focus { outline: none; border-bottom-color: var(--ink); }
.queue-add button {
  display: grid;
  flex: none;
  place-items: center;
  align-self: center;
  width: 2.8em;
  height: 2.8em;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: .35em;
  background: transparent;
  color: var(--ink-3);
  font-size: max(16px, 1.2em);
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.queue-add button svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.queue-add button:hover { border-color: var(--ink-3); color: var(--ink); }
.queue-add button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.q-top {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: .35em;
  background: transparent;
  color: var(--ink-3);
  font-size: 1em;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.q-top::after { content: ""; position: absolute; inset: -.4em; }
.q-top svg { width: .85em; height: .85em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.q-top:hover { border-color: var(--ink-3); color: var(--ink); }
.q-top:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The loop */
.plate-chat { display: grid; place-items: center; }
.plate > .chat { display: grid; gap: 1.5em; width: 60%; padding: 1.6em 1.7em 1.9em; font-size: max(1.6cqi, 11px); }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding-bottom: 1.1em; border-bottom: 1px solid var(--line); font: 500 1.15em/1.2 var(--sans); letter-spacing: -0.02em; }
.chat-head b { font-weight: inherit; }
.chat-status { display: grid; font: 400 .62em/1 var(--mono); text-transform: uppercase; }
.chat-status > span { display: inline-flex; grid-area: 1 / 1; justify-self: end; align-items: center; justify-content: flex-end; gap: .5em; padding: .6em .8em; border-radius: 100px; }
.chat-review { background: var(--panel); color: var(--ink-2); opacity: 0; animation: chat-review 7s var(--ease) infinite both; }
.chat-live { background: var(--cta); color: var(--cta-ink); animation: chat-live 7s var(--ease) infinite both; }
.chat-live .pulse { background: var(--cta-ink); }
.msg { position: relative; display: grid; grid-template-columns: auto 1fr; gap: .8em; }
.avatar { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--panel); color: var(--ink-2); font: 500 .8em/1 var(--sans); }
.avatar svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.avatar.is-studio { background: var(--ink-fixed); color: var(--paper-fixed); }
.msg-name { margin: .15em 0 .45em; font: 500 .9em/1.2 var(--sans); }
.bubble { margin: 0; padding: .8em 1em; border: 1px solid var(--line); border-radius: .3em 1.1em 1.1em; background: var(--panel); font: 400 1em/1.4 var(--sans); }
.bubble.is-studio { border-color: transparent; background: color-mix(in srgb, var(--ink) 5%, var(--surface)); }
.chat-reply { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .45em .45em .45em 1em; border: 1px solid var(--line); border-radius: 100px; color: var(--ink-3); font: 400 .95em/1 var(--sans); }
.chat-reply i { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--panel); color: var(--ink-2); }
.chat-reply svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.typing { position: absolute; top: .05em; left: 2.75em; opacity: 0; display: flex; gap: .3em; padding: .75em .9em; border-radius: .3em 1.1em 1.1em; background: var(--panel); animation: chat-typing 7s var(--ease) infinite both; }
.typing i { width: .45em; height: .45em; border-radius: 50%; background: var(--ink-3); animation: dot 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
/* One 7 s conversation: your notes, a short typing pause, the reply. Without motion,
   the base styles show the finished state. */
.msg-you { animation: chat-you 7s var(--ease) infinite both; }
.msg-studio .avatar { animation: chat-avatar 7s var(--ease) infinite both; }
.msg-studio .msg-body { animation: chat-reply 7s var(--ease) infinite both; }

/* ---------- Sheets: content panels ---------- */

.sheet {
  padding: clamp(24px, 3.4vw, 52px);
  border-radius: var(--radius);
  background: var(--panel);
}
.sheet.is-deep { background: var(--deep); color: var(--deep-ink); }
.sheet.is-signal { background: var(--signal); color: var(--ink-fixed); }

.sheet-title { margin: 0 0 14px; font: 500 clamp(28px, 2.6vw, 40px)/1.05 var(--sans); letter-spacing: -0.035em; }

.checklist { margin: 0; padding: 0; list-style: none; counter-reset: item; }
.checklist li {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: baseline;
  padding: 17px 0;
  border-bottom: 1px solid var(--line-2);
  font: 400 clamp(19px, 1.6vw, 24px)/1.25 var(--sans);
  letter-spacing: -0.015em;
  counter-increment: item;
}
.checklist li:last-child { border-bottom: 0; padding-bottom: 0; }
.checklist li::before { content: counter(item, decimal-leading-zero); color: var(--ink-3); font: 400 13px/1 var(--mono); }
.checklist li::after { content: "✓"; content: "✓" / ""; font: 400 16px/1 var(--mono); }

.call-sheet h3 { margin: 0; font: 500 clamp(32px, 3.2vw, 52px)/1.02 var(--sans); letter-spacing: -0.045em; }
.call-sheet p { max-width: 34ch; margin: 14px 0 30px; font: 400 clamp(18px, 1.6vw, 24px)/1.3 var(--sans); letter-spacing: -0.015em; }

.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 40px; margin: 0; padding: 0; list-style: none; }
.benefits li { padding: 0; }
.b-n { color: var(--ink-3); font: 400 13px/1 var(--mono); }
.benefits h3 { margin: 8px 0 10px; font: 500 clamp(22px, 2vw, 30px)/1.08 var(--sans); letter-spacing: -0.03em; }
.benefits p { margin: 0; color: var(--ink-2); font: 400 17px/1.45 var(--sans); }

.faq-sheet details + details { border-top: 1px solid var(--line-2); }
.faq-sheet details:first-child summary { padding-top: 0; }
.faq-sheet summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font: 500 clamp(19px, 1.65vw, 24px)/1.25 var(--sans);
  letter-spacing: -0.02em;
  list-style: none;
  cursor: pointer;
}
.faq-sheet summary::-webkit-details-marker { display: none; }
.faq-sheet summary i { position: relative; flex: none; width: 14px; height: 14px; margin-top: .35em; }
.faq-sheet summary i::before, .faq-sheet summary i::after { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: 1.5px; margin-top: -.75px; background: currentColor; }
.faq-sheet summary i::after { transform: rotate(90deg); transition: transform .3s var(--ease); }
.faq-sheet details[open] summary i::after { transform: rotate(0); }
.faq-sheet details p { max-width: 62ch; margin: 0 0 26px; color: var(--ink-2); font: 400 17px/1.55 var(--sans); }

.prompt-sheet { color: var(--deep-ink); }
.prompt textarea {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0 0 18px;
  border: 0;
  border-bottom: 1px solid var(--deep-line);
  border-radius: 0;
  background: transparent;
  color: var(--deep-ink);
  caret-color: var(--deep-ink);
  font: 400 clamp(22px, 2.2vw, 32px)/1.3 var(--sans);
  letter-spacing: -0.02em;
  resize: none;
  field-sizing: content;
  transition: border-color .2s;
}
.prompt textarea::placeholder { color: var(--deep-mute); }
.prompt textarea:hover { border-bottom-color: var(--deep-mute); }
.prompt textarea:focus { outline: none; border-bottom-color: var(--deep-ink); }
.prompt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.prompt-hint { color: var(--deep-mute); font: 400 13px/1.4 var(--mono); text-transform: uppercase; }

/* ---------- Footer ---------- */

.footer { margin-top: 140px; padding: 0 var(--gutter) 28px; }

.about { display: grid; grid-template-columns: var(--left) minmax(0, 1fr); column-gap: 26px; padding: 34px 0 96px; border-top: 1px solid var(--line-2); }
.about-label { margin: 0; font: 400 16px/1.4 var(--mono); text-transform: uppercase; }
.about-label::before { content: "[\00a0"; content: "[\00a0" / ""; }
.about-label::after { content: "\00a0]"; content: "\00a0]" / ""; }
.about-avatar { display: block; width: 96px; height: 96px; margin-top: 24px; border-radius: 20px; background: #fbf9ee; }
.about-body .display { max-width: 16ch; margin-bottom: 36px; }
.about-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1000px; }
.about-cols p { margin: 0; color: var(--ink-2); font: 400 clamp(17px, 1.35vw, 20px)/1.5 var(--sans); }
.about-body .pill { margin-top: 40px; }

.footer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-top: 22px; border-top: 1px solid var(--line-2); font: 400 14px/1 var(--mono); text-transform: uppercase; }
.fb-item { padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: none; text-transform: inherit; cursor: pointer; }
.fb-item:hover { text-decoration: underline; text-underline-offset: 4px; }
.fb-legal, .fb-lang { display: flex; gap: 20px; }

/* Floating card, bottom right (cookie banner in consent.js, call card in call.js). Always dark, in both themes. */
.toast { position: fixed; z-index: 50; right: 20px; bottom: 20px; display: grid; gap: 14px; width: min(360px, calc(100vw - 32px)); padding: 16px; border: 1px solid rgb(255 255 255 / .08); border-radius: 20px; background: var(--ink-fixed); color: var(--paper-fixed); font-family: var(--sans); box-shadow: 0 16px 48px rgb(0 0 0 / .18); }
.toast[hidden] { display: none; }
.toast-text { margin: 0; font-size: 15px; line-height: 1.45; color: rgb(246 246 246 / .62); }
.toast-text strong { font-weight: 500; color: var(--paper-fixed); }
.toast-text a { color: var(--paper-fixed); text-underline-offset: 3px; }
.toast-actions { display: flex; gap: 8px; }
.toast-button { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border: 1px solid var(--paper-fixed); border-radius: 100px; background: var(--paper-fixed); color: var(--ink-fixed); font: 500 15px/1 var(--sans); text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s; }
.toast-button:hover { background: #ffffff; border-color: #ffffff; }
.toast-button-ghost { border-color: rgb(246 246 246 / .2); background: transparent; color: var(--paper-fixed); }
.toast-button-ghost:hover { border-color: rgb(246 246 246 / .2); background: rgb(246 246 246 / .08); }
.toast :focus-visible { outline: 2px solid var(--paper-fixed); outline-offset: 2px; }
/* Call card (call.js). */
.call-head { display: flex; align-items: center; gap: 12px; }
.call-avatar { flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; background: #fbf9ee; }
.call-who { flex: 1; min-width: 0; }
.call-name { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.3; }
.call-role { margin: 0; font-size: 13px; line-height: 1.4; color: rgb(246 246 246 / .62); }
.call-close { display: grid; flex-shrink: 0; place-items: center; align-self: flex-start; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: rgb(246 246 246 / .62); cursor: pointer; transition: background-color .2s, color .2s; }
.call-close:hover { background: rgb(246 246 246 / .08); color: var(--paper-fixed); }
.call-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .toast:not([hidden]) { animation: toast-in .5s var(--ease) both; }
}
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 480px) {
  .toast { right: 16px; bottom: 16px; left: 16px; width: auto; }
}
.fb-lang [aria-pressed="true"] { text-decoration: underline; text-underline-offset: 4px; }
.fb-top { margin-left: auto; }

/* ---------- Booking dialog ---------- */

.booking-dialog {
  width: min(920px, calc(100vw - 32px));
  height: min(760px, calc(100vh - 48px));
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
}
.booking-dialog[open] { display: flex; flex-direction: column; }
.booking-dialog::backdrop { background: rgb(var(--shade) / 55%); }
.booking-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.booking-header h2 { margin: 0; font: 400 15px/1 var(--mono); text-transform: uppercase; }
.booking-close { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: 50%; background: none; cursor: pointer; }
.booking-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.booking-frame { flex: 1; width: 100%; border: 0; }
.booking-fallback { margin: 0; padding: 12px 18px; border-top: 1px solid var(--line-2); font: 400 13px/1 var(--mono); text-transform: uppercase; }

/* ---------- Word streams ---------- */

.is-seen [data-stream] .w { animation: word-in .5s var(--ease) both; animation-delay: calc(var(--w) * 60ms + 350ms); }

/* ---------- Keyframes ---------- */

@keyframes float { from { transform: translateY(-1.5%) rotate(-2deg); } to { transform: translateY(1.5%) rotate(2deg); } }
@keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes tok-in { from { opacity: 0; transform: scale(.6); filter: blur(2px); } }
@keyframes word-in { from { opacity: 0; filter: blur(4px); } }
@keyframes chat-you { 0%, 4% { opacity: 0; transform: translateY(.8em); } 10%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes chat-avatar { 0%, 18% { opacity: 0; transform: scale(.6); } 23%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes chat-typing { 0%, 18% { opacity: 0; transform: translateY(.5em); } 23%, 36% { opacity: 1; transform: none; } 40%, 100% { opacity: 0; } }
@keyframes chat-reply { 0%, 38% { opacity: 0; transform: translateY(.8em); } 44%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes chat-review { 0%, 40% { opacity: 1; } 44%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes chat-live { 0%, 40% { opacity: 0; transform: scale(.85); } 44%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-.2em); } }@keyframes queue-in { from { opacity: 0; transform: translateY(.8em); } }
@keyframes queue-out { to { opacity: 0; transform: translateY(-.8em); } }

/* ---------- Small screens: one column, nothing sticks ---------- */

@media (max-width: 960px) {
  :root { --gutter: 16px; --radius: 14px; }

  .topbar { padding: 14px var(--gutter) 0; }
  .tb-nav { gap: 10px; }
  .tb-link { padding: 5px 0; font-size: 12px; }

  .report { display: block; padding: 0; }
  .chapter { display: block; padding: 0 var(--gutter); }
  .chapter-text { position: static; padding: 92px 0 28px; }
  .js .chapter:not(.is-active) .chapter-text, .js .chapter.is-before .chapter-text { opacity: 1; filter: none; transform: none; pointer-events: auto; }
  .chapter-media { padding-top: 0; gap: 8px; }

  .display { font-size: clamp(34px, 9.6vw, 52px); }
  .sub { font-size: clamp(18px, 4.8vw, 22px); }
  .mono-text { font-size: 13px; }
  .pill { height: 36px; padding: 0 14px; font-size: 13px; }
  .step-body > p { font-size: 12.5px; }

  .plate-hero { aspect-ratio: 1; height: auto; }
  .plate-sub, .plate-queue { aspect-ratio: auto; padding: 64px 20px 28px; }
  .plate-sub { padding-bottom: 104px; }
  .plate > .sub-card { width: min(100%, 400px); font-size: 11px; }
  .sub-btn, .sub-tool { font-size: max(11px, .8em); }
  .sub-btn { height: 3.6em; }
  .sub-tool { width: 3.6em; height: 3.6em; }
  .plate-chat { aspect-ratio: auto; padding: 64px 20px 28px; }
  .plate > .chat { width: min(100%, 400px); font-size: 11px; }
  .plate > .hero-art { width: 74%; }

  .checklist li { grid-template-columns: 40px 1fr auto; }
  .benefits { grid-template-columns: 1fr; gap: 32px; }

  .footer { margin-top: 96px; }
  .about { grid-template-columns: 1fr; row-gap: 22px; padding-bottom: 64px; }
  .about-cols { grid-template-columns: 1fr; gap: 18px; }
  .about-avatar { width: 72px; height: 72px; margin-top: 20px; border-radius: 16px; }
  .footer-bar { gap: 14px 20px; font-size: 12px; }
  .fb-top { margin-left: 0; }
}

@media (max-width: 370px) {
  .tb-nav { gap: 8px; }
  .tb-link { font-size: 11px; }
  .tb-link::before { content: "["; content: "[" / ""; }
  .tb-link::after { content: "]"; content: "]" / ""; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .plate, .js .sheet { opacity: 1; transform: none; }
}