/* ProdBord · spent depth
   Depth is a budget. It is spent at the registration stage and does not return.
   Pre-stage plates are deep and material. Post-stage plates are precise and
   composed: layering, crops, scale and lateral travel, but no second world. */

:root {
  --bar-height: 78px;
  --sc-canvas:     #1a1815;
  --sc-surface:    #232019;
  --sc-ink:        #f6f3ee;
  --sc-ink-soft:   #a49a8c;
  --sc-accent:     #176b4d;
  --sc-accent-ink: #ffffff;
  --sc-font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --sc-font-text:    "Inter", system-ui, sans-serif;

  --deep:      #1a1815;
  --deep-ink:  #f6f3ee;
  --deep-soft: #c5bcaf;
  --paper:     #f5f3ef;
  --tint:      #e8e5dd;
  --flat:      #14201a;
  --ink:       #17211b;
  --ink-soft:  #4c5c52;
  --line:      #d6d2c8;
  --green:     #176b4d;
  --green-dk:  #12573f;
  --card:      #efe9e0;
}

/* The engine's focus ring is the accent green, which clears 3:1 on the paper
   and tint plates but only reaches 2.7:1 on the dark ones. */
.plate--deep :focus-visible,
.plate--flat :focus-visible,
.rail-band :focus-visible { outline-color: var(--deep-ink); }

/* Keep the native scrollbar easy to locate and drag on every page ground. */
html {
  scroll-behavior: auto;
  scrollbar-width: auto;
  scrollbar-color: #37634d #dedfd7;
}
html::-webkit-scrollbar { width: 16px; }
html::-webkit-scrollbar-track { background: #dedfd7; }
html::-webkit-scrollbar-thumb {
  background: #37634d;
  border: 3px solid #dedfd7;
  border-radius: 10px;
  min-height: 48px;
}
html::-webkit-scrollbar-thumb:hover { background: #214934; }

/* A dark track preserves the bright green progress on the light plates too.
   The engine still owns the fill's scroll-driven transform. */
.scroll-progress {
  position: fixed; inset: 0 0 auto; height: 6px; z-index: 80;
  background: #14201a; pointer-events: none;
}
.scroll-progress [data-sc-progress] {
  position: absolute; top: 1px; height: 4px;
  background: #4de0a0;
  box-shadow: 0 0 7px rgba(77, 224, 160, 0.45);
}
.scroll-progress [data-sc-progress]::after {
  content: ""; position: absolute; right: 0; top: 0;
  width: 8px; height: 100%; background: #e6fff2;
}
html:not(.sc-ready) .scroll-progress { display: none; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sc-font-text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }

.display {
  font-family: var(--sc-font-display);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}
.display--xl { font-size: clamp(2.6rem, 6.2vw, 5.1rem); }
.display--lg { font-size: clamp(2.1rem, 4.6vw, 3.8rem); }
.display--md { font-size: clamp(2.1rem, 3.7vw, 3.1rem); }
.display__soft { color: #d9d0c3; }
::selection { background: #b9e2d1; color: var(--ink); }
section[id] { scroll-margin-top: calc(var(--bar-height) + 20px); }
section[tabindex="-1"]:focus { outline: none; }

.wrap { width: min(1140px, 90vw); margin: 0 auto; }
.wrap--split {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.wrap--split-r { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); }
.wrap--head { margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }

.plate { position: relative; }
.plate--deep  { background: var(--deep);  color: var(--deep-ink); }
.plate--paper { background: var(--paper); color: var(--ink); padding: clamp(5rem, 11vh, 9rem) 0; }
/* Back-to-back paper plates share one ground, so their paddings would stack
   into a dead band. The second plate's top padding is trimmed instead. */
.plate--paper + .plate--paper { padding-top: clamp(1.5rem, 4vh, 3rem); }
.plate--paper:has(+ .plate--paper, + .templates) { padding-bottom: clamp(3rem, 7vh, 5rem); }
.plate--tint  { background: var(--tint);  color: var(--ink); }
.plate--flat  { background: var(--flat);  color: var(--deep-ink); }

/* ---------- persistent section navigation ---------- */
.bar {
  position: fixed; inset: 6px 0 auto 0; z-index: 60;
  height: 72px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem; padding: 0.7rem clamp(1rem, 4vw, 2.4rem);
  background: rgba(245, 243, 239, 0.97);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.bar__nav { display: flex; align-items: center; gap: clamp(0.1rem, 1vw, 0.8rem); }
.bar__nav a {
  color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  font-size: 0.9rem; font-weight: 500; padding: 0.7rem 0.5rem;
  text-underline-offset: 0.45em; text-decoration-thickness: 2px;
}
.bar__nav a:hover, .bar__nav a[aria-current] { color: var(--green-dk); text-decoration: underline; }
.bar__toggle { display: none; }
.bar__toggle[hidden] { display: none; }
.bar--dark { background: rgba(26, 24, 21, 0.97); border-color: #49483e; }
.bar--dark .bar__mark, .bar--dark .bar__nav a { color: var(--deep-ink); }
.bar--dark .bar__nav a:hover, .bar--dark .bar__nav a[aria-current] { color: #91e5bb; }
.bar--dark .bar__badge { background: var(--deep-ink); color: var(--deep); }
.bar--dark :focus-visible { outline-color: var(--deep-ink); }
.bar__mark { display: flex; align-items: center; gap: 0.55rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.bar__brand { display: grid; gap: 1px; justify-self: start; }
.bar__attribution {
  padding-left: calc(26px + 0.55rem); color: var(--ink-soft);
  font-size: 13px; line-height: 1.4; white-space: nowrap;
}
.bar--dark .bar__attribution { color: var(--deep-soft); }
.developer-link { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; }
.developer-link:hover { color: var(--green-dk); }
.bar--dark .developer-link:hover { color: #91e5bb; }
.bar__badge, .mark__badge {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 600;
}
.cta {
  display: inline-block; background: var(--green); color: var(--sc-accent-ink);
  text-decoration: none; font-weight: 500;
  padding: 0.82rem 1.5rem; border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}
.cta:hover { background: var(--green-dk); }
.cta--lg { padding: 1rem 2rem; font-size: 1.06rem; }
/* The conversion slot keeps the CTA's appearance but is genuinely inert until
   its destination exists: not a link, not focusable, no hover affordance. */
/* Flat rather than raised: a lifted shadow reads as an affordance, and this
   slot cannot be pressed. */
.cta--slot { cursor: default; box-shadow: none; }
.cta--slot:hover { background: var(--green); }
.cta-note { color: rgba(246, 243, 238, 0.74); font-size: 0.95rem; margin-left: 0.9rem; }

/* ---------- 1 · THE OPENING ACT ----------
   Recognition, scatter, convergence and clarity in one pinned act. The first
   viewport is simultaneously the hero and the stage's own opening state.

   Segments live on the section, not on the field, because both the scene and
   the copy layer need to read them and they are siblings. */
.opening {
  --p:  var(--sc-p, 0);
  --s0: clamp(0, calc(var(--p) / 0.12), 1);                  /* hero copy out  */
  /* The scene must answer the very first scroll. --e0 completes inside 5% of
     the act's travel, roughly two wheel notches, so the deeper work lifts and
     brightens before the visitor has finished reading the headline. */
  --e0: clamp(0, calc(var(--p) / 0.05), 1);                  /* first touch    */
  --sA: clamp(0, calc((var(--p) - 0.02) / 0.18), 1);         /* work emerges   */
  --c1: clamp(0, calc((var(--p) - 0.14) / 0.08), 1);         /* cost line in   */
  --c2: clamp(0, calc((var(--p) - 0.34) / 0.08), 1);         /* cost line out  */
  --s1: clamp(0, calc((var(--p) - 0.26) / 0.12), 1);         /* facing         */
  --s2: clamp(0, calc((var(--p) - 0.36) / 0.14), 1);         /* ordering       */
  --s3: clamp(0, calc((var(--p) - 0.50) / 0.12), 1);         /* closing        */
  /* 0.62 to 0.72 is a deliberate hold: every card squared up under its stage
     label, readable, before anything else moves. */
  --s4: clamp(0, calc((var(--p) - 0.77) / 0.10), 1);         /* registered     */
  /* Sheet fade-out is its own ramp so a viewport can separate it from the
     board's arrival without touching the other's timing. */
  --s-out: clamp(0, calc((var(--p) - 0.72) / 0.08), 1);
  --scrim-l: calc(1 - clamp(0, calc((var(--p) - 0.34) / 0.10), 1));
  --pad-x: clamp(1.2rem, 5vw, 4rem);
  --pad-y: clamp(1.6rem, 4vh, 3rem);
}

/* .sc-stage owns position, height and overflow. Nothing here may override
   them: a `position: relative` on this element silently kills the pin. */
.stage__field {
  container-type: inline-size;
  position: absolute; inset: var(--bar-height) 0 0; overflow: hidden; background: var(--deep);
}
.stage__ground {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 66%;
}
/* One key only, matching the plate's own centre-left source. */
.stage__key {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(
    ellipse calc(38% + 3% * var(--e0) + 34% * var(--s3)) calc(32% + 3% * var(--e0) + 34% * var(--s3)) at 42% 54%,
    rgba(255, 246, 232, 0.15), rgba(255, 246, 232, 0) 72%);
}

/* Scrims only where text sits, never a full-frame darkening layer. */
.stage__scrim {
  position: absolute; inset: 0 0 auto 0; height: 40%;
  pointer-events: none; z-index: 35;
  background: linear-gradient(180deg, rgba(20, 18, 15, 0.86) 0%, rgba(20, 18, 15, 0.52) 46%, rgba(20, 18, 15, 0) 100%);
  opacity: var(--scrim-l);
}
.stage__scrim--l {
  inset: 0 auto 0 0; width: 66%; height: auto; z-index: 34;
  opacity: var(--scrim-l);
  background: linear-gradient(90deg, rgba(20, 18, 15, 0.95) 0%, rgba(20, 18, 15, 0.86) 44%, rgba(20, 18, 15, 0) 78%);
}
.stage__scrim--b {
  inset: auto 0 0 0; height: 30%;
  z-index: 28; opacity: 1;
  background: linear-gradient(0deg, rgba(20, 18, 15, 0.92) 0%, rgba(20, 18, 15, 0.58) 48%, rgba(20, 18, 15, 0) 100%);
}

.sheet {
  position: absolute; margin: 0;
  width: 28cqw; max-width: 508px;
  --em: 1;
  --k-end: 0.60;
  transform-origin: 50% 50%;
  background: linear-gradient(177deg, #f1ebe2, #e3dbcf);
  padding: 2.2% 2.2% 2.9%;
  border-radius: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  left: calc(var(--x0) * (1 - var(--s2)) + var(--x1) * var(--s2));
  top:  calc(var(--y0) * (1 - var(--s2)) + var(--y1) * var(--s2));
  transform:
    translateY(calc((0.4 + 1.4 * var(--em)) * var(--e0) * -1%))
    rotate(calc(var(--r0) * (1 - var(--s1))))
    scale(calc(var(--k0) + (var(--k-end) - var(--k0)) * var(--s3)));
  opacity: calc(
    (1 - 0.42 * var(--d) * (1 - var(--s3)))
    * (1 - var(--s-out))
    * (var(--em) * (0.2 + 0.8 * var(--sA)) + (1 - var(--em))));
  filter:
    brightness(calc(1 - 0.34 * var(--d) * (1 - var(--s3))))
    saturate(calc(1 - 0.3 * var(--d) * (1 - var(--s3))))
    blur(calc(var(--em) * (1 - var(--sA)) * 2.6px));
  box-shadow:
    calc(7px * (1 - 0.55 * var(--s3)))
    calc(24px * (1 - 0.55 * var(--s3)))
    calc(52px * (1 - 0.45 * var(--s3)))
    rgba(0, 0, 0, calc(0.52 - 0.18 * var(--s3)));
}
.sheet img { border-radius: 8px; }

/* Sheet 1 is the anchor: lit and legible in the first viewport, and never
   emerges because it was never hidden. 28cqw x 1.25 stays inside the 508px
   ceiling at every viewport width. */
.sheet--1 { --em: 0; --x0: 57%; --y0: 34%; --r0: -4deg;  --k0: 1.25; --d: 0.00; --x1: 6%;  --y1: 20%; z-index: 25; }
.sheet--2 { --x0: 78%; --y0: 6%;  --r0: 7deg;   --k0: 0.92; --d: 0.42; --x1: 37%; --y1: 20%; z-index: 24; }
.sheet--3 { --x0: 72%; --y0: 70%; --r0: -9deg;  --k0: 0.78; --d: 0.62; --x1: 68%; --y1: 20%; z-index: 23; }
.sheet--4 { --x0: 40%; --y0: 82%; --r0: 11deg;  --k0: 0.64; --d: 0.78; --x1: 37%; --y1: 52%; z-index: 22; }
.sheet--5 { --x0: 15%; --y0: 6%;  --r0: -13deg; --k0: 0.56; --d: 0.90; --x1: 6%;  --y1: 52%; z-index: 21; }

.cols { position: absolute; inset: 0; z-index: 36; pointer-events: none; opacity: calc(var(--s2) * (1 - var(--s-out))); }
.cols__label {
  position: absolute; top: 11%;
  width: 20cqw; font-size: clamp(0.72rem, 1.15cqw, 0.9rem);
  line-height: 1.35; color: var(--deep-ink);
  background: rgba(20, 18, 15, 0.94); padding: 0.55rem 0.7rem; border-radius: 6px;
  letter-spacing: 0.01em;
}
.cols__label--a { left: 6%; }
.cols__label--b { left: 37%; }
.cols__label--c { left: 68%; }
/* Shown only on phones, where the third column folds into the second. */
.cols__more { display: none; }

.resolved {
  position: absolute; left: 50%; top: 45%;
  transform: translate(-50%, -50%);
  width: min(86cqw, 1180px);
  margin: 0; opacity: var(--s4); z-index: 30;
}
.resolved__win {
  display: block; overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.62);
}
.resolved__win img { width: 100%; height: auto; }

/* ---- the copy layer, three moments in one act ---- */
.stage__copy { position: absolute; inset: 0; pointer-events: none; z-index: 40; }

/* The engine writes `transform` inline on every [data-sc-cue] element, so a
   translateY(-50%) here is silently overwritten. Centre with flex instead. */
.opening__hero {
  position: absolute; left: var(--pad-x); top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: center;
  /* Held clear of the anchor sheet at every width: the copy column and the
     foreground job must never overlap in the first viewport. */
  width: min(36rem, 44%);
  pointer-events: auto;
}
.opening.is-past-hero .opening__hero { pointer-events: none; }
/* Sized so the whole hero block, CTA included, sits inside the first
   viewport at 1440x900. The page-wide display--xl is too large once the copy
   column is held clear of the anchor sheet. */
.opening__hero .display--xl { font-size: clamp(2.1rem, 4.2vw, 3.7rem); }
.opening__hero .mark { display: none; }
.mark { display: flex; align-items: center; gap: 0.55rem; font-weight: 600; color: var(--deep-ink); margin: 0 0 clamp(1.4rem, 4vh, 2.6rem); }
.mark__badge { background: var(--deep-ink); color: var(--deep); }
.opening__hero .lede { color: #e2dbd1; font-size: clamp(1.02rem, 1.5vw, 1.19rem); max-width: 34rem; margin: 1.4rem 0 0; }

.opening__cost {
  position: absolute; left: var(--pad-x); top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: center;
  margin: 0; width: min(30rem, 44%);
  font-size: clamp(1.15rem, 2.1vw, 1.72rem);
  line-height: 1.32; letter-spacing: -0.01em;
  color: rgba(246, 243, 238, 0.94);
}

.stage__read {
  position: absolute; left: var(--pad-x); bottom: var(--pad-y);
  margin: 0; max-width: 48ch;
  color: var(--deep-ink);
  background: rgba(20, 18, 15, 0.94);
  padding: 0.8rem 1rem; border-radius: 8px;
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
}

/* ---------- 4 · bottleneck ---------- */
.bottleneck__vis { position: relative; }
/* The only two <figure> elements on the page without a margin reset. The UA
   default (1em 40px) was shrinking the board and shifting the focus crop away
   from the position its layout authored. Every other figure already sets
   margin: 0, so this is scoped rather than a global figure reset. */
.bottleneck .shot { margin: 0; }
.shot img { border-radius: 12px; }
.shot--board img { box-shadow: 0 22px 54px rgba(23, 33, 27, 0.18); }
.shot--crop {
  position: absolute; right: -3%; bottom: -9%;
  width: 33%; margin: 0;
}
.shot--crop img {
  border-radius: 12px;
  box-shadow: 0 26px 60px rgba(23, 33, 27, 0.3);
  outline: 1px solid rgba(23, 33, 27, 0.08);
}
.note { color: var(--ink-soft); font-size: 0.95rem; }
.bottleneck__copy p, .sources__copy p { color: var(--ink-soft); }
.bottleneck__copy b, .sources__copy b, .schedule__copy b, .bottleneck__explain b { color: var(--ink); font-weight: 600; }
.limits { margin: 1.6rem 0 0; max-width: 30rem; }
.limits img {
  border-radius: 10px; border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(23, 33, 27, 0.1);
}
.limits figcaption { margin-top: 0.6rem; color: var(--ink-soft); font-size: 0.9rem; }
/* The plain-English reading of the crop sits under the board, clear of the
   overlapping focus crop. */
.bottleneck__explain {
  margin: clamp(3.2rem, 7vw, 5.5rem) 36% 0 0;
  color: var(--ink-soft); font-size: 0.98rem;
}

/* ---------- 2 · where orders come from ----------
   Same flat composition as the bottleneck plate: a wide capture with a
   second, smaller one laid over its corner. */
.sources { padding-bottom: clamp(3rem, 7vh, 5rem); }
.sources__vis { position: relative; padding-bottom: 12%; }
.sources .shot { margin: 0; }
.shot--intake img {
  border: 1px solid var(--line);
  box-shadow: 0 22px 54px rgba(23, 33, 27, 0.16);
}
.shot--form {
  position: absolute; right: -4%; bottom: 0;
  width: 46%;
}
.shot--form img {
  box-shadow: 0 26px 60px rgba(23, 33, 27, 0.3);
  outline: 1px solid rgba(23, 33, 27, 0.08);
}

/* ---------- 5 · #1003 ---------- */
.triptych {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem); margin-top: clamp(1.8rem, 4vw, 3rem);
}
.panel { margin: 0; }
.panel__win {
  display: block; overflow: hidden; border-radius: 12px;
  background: #eef1ee; border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(23, 33, 27, 0.14);
}
/* Each capture is already cropped to the part of the screen it is about, so
   panels show them whole and align to the top. */
.triptych { align-items: start; }
.panel__win img { width: 100%; height: auto; }
.panel figcaption { margin-top: 0.9rem; color: var(--ink-soft); font-size: 1rem; }
.panel figcaption b { color: var(--ink); font-weight: 600; }
.fineprint { margin-top: 1.6rem; color: var(--ink-soft); font-size: 0.88rem; }

/* ---------- 6 · templates ----------
   Flat, not deep. The rail lives in a full-bleed dark band that hugs the
   cards. Each card is real text from the app's template definitions; the
   stages a template adds to Made to order are picked out in green. As the
   rail pans, the card nearest the reading point is in focus (--focus, set by
   the page script, 1 when no script runs). */
.templates { background: var(--tint); color: var(--ink); padding: 0; }
.stage--rail {
  --gutter: clamp(1.4rem, 5vw, 4rem);
  display: grid;
  gap: clamp(1.4rem, 4vh, 2.4rem);
  padding: 0;
}
.templates .wrap--head {
  width: auto; margin: 0;
  padding: 0 var(--gutter);
}
.templates .wrap--head p { color: var(--ink-soft); max-width: 44rem; margin: 0.8rem 0 0; }

.rail-band {
  background: #201d19;
  overflow: hidden;
  padding: clamp(1.8rem, 4.5vh, 3rem) 0 clamp(1.1rem, 2.6vh, 1.6rem);
}
.rail {
  display: flex; align-items: stretch;
  gap: clamp(1.2rem, 2.2vw, 1.9rem);
  /* Starts at the page margin, so the first card is whole and in focus. */
  padding: 0 var(--gutter);
}
.tpl {
  --focus: 1;
  flex: 0 0 auto; margin: 0;
  width: min(27rem, 80vw);
  display: flex; flex-direction: column;
  background: #fbfaf7; color: var(--ink);
  border-radius: 14px;
  padding: clamp(1.2rem, 2vw, 1.6rem) clamp(1.2rem, 2vw, 1.7rem) clamp(1.3rem, 2vw, 1.7rem);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  opacity: calc(0.5 + 0.5 * var(--focus));
  transform: scale(calc(0.93 + 0.07 * var(--focus)));
  transform-origin: 50% 60%;
}
.tpl__kicker {
  margin: 0 0 0.35rem; color: var(--green-dk);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.tpl__name {
  margin: 0; font-family: var(--sc-font-display); font-weight: 500;
  font-size: clamp(1.5rem, 2.3vw, 1.9rem); letter-spacing: -0.025em; line-height: 1.1;
}
.tpl__desc { margin: 0.5rem 0 1.1rem; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; }
.tpl__stages {
  list-style: none; margin: auto 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.2rem;
}
.tpl__stages li {
  /* Stage chip, then an arrow to the next one. */
  display: inline-flex; align-items: center;
  padding: 0.32rem 0.6rem; border-radius: 999px;
  background: #ece8e0; color: var(--ink);
  font-size: 0.86rem; font-weight: 500; line-height: 1.2;
}
.tpl__stages li + li { margin-left: 1.05rem; position: relative; }
.tpl__stages li + li::before {
  content: ""; position: absolute; left: -0.95rem; top: 50%;
  width: 0.7rem; height: 1px; background: #a59f93;
}
.tpl__stages li + li::after {
  content: ""; position: absolute; left: -0.42rem; top: calc(50% - 3px);
  border: 3px solid transparent; border-left: 4px solid #a59f93; border-right: 0;
}
.tpl__stages li.is-added { background: #dbeee4; color: #0f4a34; box-shadow: inset 0 0 0 1px #9fd2b8; }

.rail-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.6rem 1.5rem;
  margin-top: clamp(1.3rem, 3vh, 2rem);
  padding: 0 var(--gutter, clamp(1.4rem, 5vw, 4rem));
  color: var(--deep-soft); font-size: 0.88rem;
}
.rail-foot p { margin: 0; }
.rail-key { display: inline-flex; align-items: center; gap: 0.5rem; }
.rail-key__swatch {
  width: 1.1rem; height: 0.7rem; border-radius: 999px;
  background: #dbeee4; box-shadow: inset 0 0 0 1px #9fd2b8;
}
.rail-count { display: inline-flex; align-items: center; gap: 0.8rem; color: var(--deep-ink); }
.rail-count__dots { display: inline-flex; gap: 0.35rem; }
.rail-count__dots i {
  width: 7px; height: 7px; border-radius: 50%; background: #5b574f;
  transition: background 160ms ease, transform 160ms ease;
}
.rail-count__dots i.is-current { background: #91e5bb; transform: scale(1.25); }
/* Without the page script there is no "current" card to report. */
html:not(.tpl-live) .rail-nav { display: none; }
.rail-nav { display: inline-flex; align-items: center; gap: 0.9rem; }
.rail-step {
  display: inline-grid; place-items: center;
  width: 2.5rem; height: 2.5rem; padding: 0;
  border: 1px solid #5b574f; border-radius: 50%;
  background: transparent; color: var(--deep-ink);
  font: 500 1.05rem/1 var(--sc-font-text); cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.rail-step:hover:not(:disabled) { background: #33302a; border-color: #91e5bb; }
.rail-step:disabled { opacity: 0.35; cursor: default; }

/* ---------- 7 · schedule ---------- */
.cal__win {
  display: block; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 22px 54px rgba(23, 33, 27, 0.16);
}
.cal__win img { width: 100%; height: auto; }
.shot--cal { margin: 0; }
.schedule__copy p { color: var(--ink-soft); }

/* ---------- 8 · pricing ----------
   A calm post-peak plate: one card, no scroll device, no depth. The tint
   ground cuts cleanly from the paper schedule plate before it and the dark
   close after it. */
.pricing { padding: clamp(4.5rem, 11vh, 8rem) 0; }
/* The templates stage already ends in its own band of tint, so pricing starts
   close beneath it, with its heading level with the top of the plan card. */
.templates + .pricing { padding-top: clamp(3rem, 7vh, 5rem); }
.pricing__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
}
.pricing__copy { padding-top: clamp(0.5rem, 2vw, 1.5rem); }
.pricing__copy { max-width: 30rem; }
.pricing__lede { color: var(--ink); font-size: 1.15rem; margin: 1.5rem 0; }
.pricing__availability { color: var(--ink-soft); max-width: 34ch; }
.panel[data-sc-in] { transition-duration: 420ms; }

.plan {
  width: min(560px, 100%);
  background: #fbfaf7;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1.7rem, 4vw, 2.6rem);
  box-shadow: none;
}
.plan__head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem; }
.plan__name {
  margin: 0; font-family: var(--sc-font-display);
  font-weight: 700; font-size: 1.4rem; letter-spacing: -0.02em;
}
.plan__status {
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em;
  color: var(--ink-soft); background: var(--tint);
  border: 1px solid var(--line);
  padding: 0.22rem 0.62rem; border-radius: 999px;
}
.plan__price {
  display: flex; align-items: baseline; gap: 0.45rem;
  margin: clamp(1.1rem, 2.6vw, 1.6rem) 0 0;
}
.plan__amount {
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: clamp(2.7rem, 6vw, 3.6rem);
  letter-spacing: -0.035em; line-height: 1;
}
.plan__period { color: var(--ink-soft); font-size: 1rem; }
.plan__line { margin: 0.85rem 0 0; color: var(--ink-soft); max-width: 30rem; }

.plan__features {
  list-style: none; margin: clamp(1.3rem, 3vw, 1.9rem) 0 0; padding: 0;
  display: grid; gap: 0.6rem;
}
.plan__features li { position: relative; padding-left: 1.5rem; }
.plan__features li::before {
  content: ""; position: absolute; left: 0; top: 0.66em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--green);
}

.plan__act { margin: clamp(1.5rem, 3.4vw, 2.1rem) 0 0; }
.plan__cta { display: block; text-align: center; }

/* ---------- 8 · close ---------- */
.close { padding: clamp(6rem, 15vh, 11rem) 0 0; }
.close__inner { text-align: left; max-width: 46rem; }
.close__lede { color: var(--deep-soft); font-size: clamp(1.05rem, 1.7vw, 1.3rem); margin: 1.1rem 0 2.2rem; }
.close__note { color: var(--deep-soft); font-size: 0.95rem; margin-top: 1.4rem; }
.foot {
  margin-top: clamp(4rem, 10vh, 7rem);
  border-top: 1px solid rgba(246, 243, 238, 0.14);
  padding: 1.4rem 0;
  width: min(1140px, 90vw); margin-left: auto; margin-right: auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  color: var(--deep-soft); font-size: 0.88rem;
}
.foot__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.foot__links a, .close__note a { color: var(--deep-ink); }
.foot__links a:hover, .close__note a:hover { color: #91e5bb; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .bar { display: flex; justify-content: space-between; }
  .nav-ready .bar__toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    min-height: 44px; padding: 0.55rem 0.8rem; border: 1px solid var(--line);
    border-radius: 8px; color: var(--ink); background: transparent;
    font: inherit; font-size: 0.95rem; cursor: pointer;
  }
  .bar--dark .bar__toggle { color: var(--deep-ink); border-color: #696658; }
  .bar__toggle:hover { background: rgba(87, 99, 91, 0.12); }
  .nav-ready .bar__nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    padding: 0.6rem 1rem 1rem; background: var(--paper);
    border-bottom: 1px solid var(--line);
    max-height: calc(100svh - var(--bar-height)); overflow-y: auto;
  }
  .nav-ready .bar.is-menu-open .bar__nav { display: grid; gap: 0.1rem; }
  .bar__nav a { display: block; min-height: 44px; padding: 0.65rem 0.8rem; font-size: 1rem; }
  .bar--dark .bar__nav { background: var(--deep); border-color: #49483e; }
  html:not(.nav-ready) .bar { position: relative; height: auto; flex-wrap: wrap; }
  html:not(.nav-ready) .bar__nav { flex-basis: 100%; flex-wrap: wrap; gap: 0; }
  .wrap--split, .wrap--split-r, .pricing__inner { grid-template-columns: minmax(0, 1fr); }
  .pricing__copy { max-width: 38rem; }
  .plan { justify-self: center; }
  .triptych { grid-template-columns: minmax(0, 1fr); }
  /* ---- 4 · bottleneck, portrait ----
     Seven columns at 390px is a texture, not context. The establishing shot
     crops to three authentic stages so the workflow still reads as a workflow,
     then the focus crop carries the detail at full size. */
  .shot--board { position: relative; overflow: hidden; aspect-ratio: 1228 / 1200; border-radius: 12px; }
  .shot--board img { width: 100%; }
  /* The focus column is 1430px tall; showing all of it would overflow the
     viewport, so it is cropped to the evidence: the stage header, its real
     capacity readouts and the first job. */
  .shot--crop {
    position: relative; right: auto; bottom: auto;
    width: 100%; margin-top: 1.1rem;
    overflow: hidden; aspect-ratio: 584 / 690; border-radius: 12px;
  }
  .shot--crop img { position: absolute; top: 0; left: 0; width: 100%; }

  /* ---- schedule, portrait: the agenda capture replaces the month grid ---- */
  .bottleneck__explain { margin: 1.2rem 0 0; }
  .sources__vis { padding-bottom: 0; display: grid; gap: 1rem; }
  .shot--form { position: static; width: 82%; justify-self: end; margin-top: -18%; }
  .foot { flex-direction: column; }
  /* ---- mobile art direction for the opening act ----
     Portrait is not a scaled landscape. The copy owns the middle band, the
     work lives in the top and bottom strips, the convergence resolves into
     two columns rather than three, and the payoff crops the authentic board
     to two real stages instead of shrinking all seven to illegibility. */
  /* Absolutely positioned copy needs both gutters, or 46ch overruns 390px. */
  .opening__hero, .opening__cost { width: auto; right: var(--pad-x); }
  .stage__read { right: var(--pad-x); max-width: none; }
  /* Portrait: the copy sits high so the foreground job owns the lower band. */
  .opening__hero { justify-content: flex-start; padding-top: max(15vh, calc(var(--bar-height) + 24px)); }
  .opening__cost { justify-content: flex-start; padding-top: 22vh; }
  .stage__scrim--l {
    inset: 0; width: 100%;
    background: linear-gradient(180deg, rgba(20, 18, 15, 0.95) 0%, rgba(20, 18, 15, 0.9) 46%, rgba(20, 18, 15, 0.6) 68%, rgba(20, 18, 15, 0.08) 100%);
  }

  .sheet { width: 46cqw; --k-end: 0.95; }
  /* The copy owns the middle band, so the scattered work sits in the strips
     above and below it. Nothing may pass behind the lede. */
  .sheet--1 { --x0: 12%; --y0: 82%; --r0: -5deg;  --k0: 1.40; --x1: 3%;  --y1: 14%; }
  .sheet--2 { --x0: 54%; --y0: 2%;  --r0: 7deg;   --k0: 0.86; --x1: 51%; --y1: 14%; }
  /* The Packing card joins the second column, labelled "Making and Packing". */
  .sheet--3 { --x0: 6%;  --y0: 5%;  --r0: -9deg;  --k0: 0.66; --x1: 51%; --y1: 66%; }
  .sheet--4 { --x0: 62%; --y0: 90%; --r0: 11deg;  --k0: 0.60; --x1: 51%; --y1: 40%; }
  .sheet--5 { --x0: 4%;  --y0: 95%; --r0: -12deg; --k0: 0.52; --x1: 3%;  --y1: 66%; }

  .cols__label { top: 7%; width: 44cqw; font-size: 0.74rem; }
  .cols__label--a { left: 3%; }
  .cols__label--b { left: 51%; }
  .cols__label--c { display: none; }
  .cols__more { display: inline; }

  /* ---- 6 · templates, portrait ---- */
  .stage--rail { gap: clamp(1rem, 2.6vh, 1.6rem); }
  .rail { gap: 0.9rem; }
  .tpl { width: 80vw; }
  .rail-foot { justify-content: center; }
  .rail-key { order: 2; }

  /* On a phone the board fills the frame, so an overlapping crossfade reads as
     a double exposure. The sheets leave before the board arrives. */
  .opening {
    --s-out: clamp(0, calc((var(--p) - 0.72) / 0.06), 1);
    --s4:    clamp(0, calc((var(--p) - 0.79) / 0.08), 1);
  }

  /* Two authentic stages, read at a size a phone can actually use. */
  .resolved { top: 46%; width: calc(100% - var(--pad-x) * 2); }
  .resolved__win img { width: 100%; height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .bar { transition: none; }
}

/* Short screens need room for the hero's action as well as its headline. */
@media (max-width: 900px) and (max-height: 720px) {
  .opening__hero { padding-top: calc(var(--bar-height) + 24px); }
  .mark { margin-bottom: 1rem; }
  .opening__hero .lede { margin: 1rem 0 1.2rem; }
}

/* The engine remains untouched. These page-owned static layouts also cover
   JavaScript failing to load, so copy never depends on an entrance effect. */
:is(html:not(.sc-ready), html.prodbord-static) .opening { height: auto; }
:is(html:not(.sc-ready), html.prodbord-static) .opening [data-sc-stage] {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: 2.5rem; padding: clamp(3rem, 7vw, 7rem) 5vw;
  height: auto; min-height: 90svh; overflow: visible;
  padding-top: calc(var(--bar-height) + 3rem);
}
:is(html:not(.sc-ready), html.prodbord-static) .stage__field,
:is(html:not(.sc-ready), html.prodbord-static) .stage__copy { display: contents; }
:is(html:not(.sc-ready), html.prodbord-static) .opening__hero {
  position: static; grid-column: 1; grid-row: 1; width: auto; padding: 0;
  opacity: 1 !important; transform: none !important; pointer-events: auto !important;
}
:is(html:not(.sc-ready), html.prodbord-static) :is(.sheet, .cols, .opening__cost, .stage__ground, .stage__key, .stage__scrim) { display: none; }
:is(html:not(.sc-ready), html.prodbord-static) .resolved {
  position: static; grid-column: 2; grid-row: 1; width: 100%;
  opacity: 1; transform: none;
}
:is(html:not(.sc-ready), html.prodbord-static) .stage__read {
  position: static; grid-column: 1 / -1; max-width: 48ch;
  opacity: 1 !important; transform: none !important;
}
:is(html:not(.sc-ready), html.prodbord-static) :is([data-sc-in], [data-sc-stagger] > *) {
  opacity: 1; transform: none; transition: none;
}
:is(html:not(.sc-ready), html.prodbord-static) [data-sc-reveal] { clip-path: none !important; }
:is(html:not(.sc-ready), html.prodbord-static) .templates [data-sc-stage] {
  height: auto; padding: 4rem 0; overflow: visible;
}
:is(html:not(.sc-ready), html.prodbord-static) .rail-band { min-height: 0; }
/* The templates section does not pin, so it is only as tall as its cards.
   Wider screens: the rail slides sideways as the section scrolls up the
   screen (the page script sets its transform). Phones: a swipeable row that
   snaps card by card to the centre, with arrow buttons.
   The vertical padding leaves room for the cards' shadows. */
html.prodbord-rail .templates [data-sc-stage] { height: auto; padding: clamp(3.5rem, 8vh, 5rem) 0 0; overflow: visible; }
html.prodbord-rail .rail-band { padding: clamp(1rem, 2.5vh, 1.6rem) 0 clamp(1.1rem, 2.6vh, 1.6rem); }
html.prodbord-rail .rail { position: relative; margin: 0; padding: 0.8rem var(--gutter) 1.8rem; }
html.prodbord-rail .rail-foot { margin-top: 0; }
@media (min-width: 901px) {
  html.prodbord-rail .rail { will-change: transform; transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1); }
  html.prodbord-rail .tpl { transition: opacity 220ms ease, transform 220ms ease; }
  .rail-step { display: none; }
}
@media (max-width: 900px) {
  html.prodbord-rail .rail {
    padding-inline: 10vw;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 10vw;
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  html.prodbord-rail .rail::-webkit-scrollbar { display: none; }
  html.prodbord-rail .tpl { scroll-snap-align: center; }
}
:is(html:not(.sc-ready), html.prodbord-static) .rail {
  width: 100%; margin: 0; padding: 0 5vw; display: flex; flex-wrap: wrap;
  justify-content: center; transform: none !important;
}
@media (max-width: 900px) {
  :is(html:not(.sc-ready), html.prodbord-static) .opening [data-sc-stage] { grid-template-columns: minmax(0, 1fr); }
  :is(html:not(.sc-ready), html.prodbord-static) .resolved { grid-column: 1; grid-row: 2; max-width: 32rem; justify-self: center; }
  :is(html:not(.sc-ready), html.prodbord-static) .stage__read { grid-row: 3; }
  :is(html:not(.sc-ready), html.prodbord-static) .tpl { width: min(27rem, 88vw); }
}