/* The deck shell (deck.mjs): a 1280 × 720 stage scaled by --deck-scale, the progress line, the
   navigation bar, full screen, reduced motion and print. A page's own stylesheet comes after this
   one and styles what is on the slides; the selectors here stay single-class so it can. Colours
   read the page's --bg, --ink, --ink-2 and --line, with the brand's light values as fallbacks. */
.deck {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --progress: 0;
  --dir: 1;
  position: relative;
  margin: 0 auto;
  box-shadow: 0 12px 40px #30383d14;
}
.slide {
  box-sizing: border-box;
  position: absolute;
  width: 1280px;
  height: 720px;
  padding: 62px 72px;
  background: var(--bg, #f3f3ef);
  transform: scale(var(--deck-scale, 1));
  transform-origin: top left;
  overflow: hidden;
}
.slide[hidden] {
  display: none;
}

/* The progress line along the top edge, and the entrance: a slide fades in over the one it
   replaces, which deck.mjs holds underneath for the length of the entrance. */
.deck::before {
  content: '';
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  height: 3px;
  width: 100%;
  background: var(--deck-accent, #728ead);
  transform-origin: left;
  transform: scaleX(var(--progress));
  transition: transform 0.5s var(--ease-out);
  pointer-events: none;
}
.slide.is-leaving {
  z-index: 0;
}
.slide.is-entering {
  z-index: 1;
  animation: deck-slide-in 0.5s var(--ease-out) both;
}
@keyframes deck-slide-in {
  from {
    opacity: 0;
    translate: calc(var(--dir) * 24px) 0;
  }
}

.deck-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  height: 70px;
  font-size: 13px;
}
.deck-controls button {
  background: transparent;
  border: 1px solid var(--line, #cdd1d2);
  border-radius: 4px;
  padding: 8px 14px;
  color: var(--ink, #30383d);
}
.deck-controls button:disabled {
  opacity: 0.3;
  cursor: default;
}
.deck-hint {
  color: var(--ink-2, #606970);
  margin: 0 20px;
}
.deck-count,
.deck-controls button {
  white-space: nowrap;
}
.deck-count {
  font-family: var(--font-mono, monospace);
}
@media (max-width: 650px) {
  .deck-hint {
    display: none;
  }
  .deck-controls {
    gap: 12px;
  }
}

/* Full screen, or the same layout in the tab where full screen is refused; the controls stay
   reachable by pointer and keyboard. */
.deck-host.presenting {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #171d24;
  display: flex;
  align-items: center;
  justify-content: center;
}
.presenting .deck {
  margin: 0;
  box-shadow: none;
  flex-shrink: 0;
}
.presenting .deck-controls {
  position: fixed;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg, #f3f3ef);
  box-shadow: 0 2px 18px #0003;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.presenting .deck-controls:hover,
.presenting .deck-controls:focus-within {
  opacity: 1;
}
.presenting .deck-hint,
.presenting [data-deck='print'] {
  display: none;
}
@media (hover: none) {
  .presenting .deck-controls {
    opacity: 0.85;
  }
}

/* A demo shows only on screen; its print-only line carries the address instead. */
.deck-print-only {
  display: none;
}
iframe[data-refused] {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .deck::before,
  .presenting .deck-controls {
    transition: none;
  }
  .slide.is-entering {
    animation: none;
  }
}

/* Theatre (mountDeck theatre: true): the customer room's slide view. A dark stage on a radial
   ground, the slide in a shadowed 16:9 frame, a copper progress line, round arrows and thumbnails.
   The ground is dark in a light and a dark page alike, as a cinema is. */
.deck-host.deck-theatre {
  --deck-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 16px;
  padding: 20px 20px 16px;
  background: radial-gradient(120% 90% at 50% 0%, #2a3339, #14191d 70%);
  color: #f3f3ef;
}
.deck-theatre .deck {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 40px 100px -30px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}
.deck-theatre .deck::before {
  display: none;
}
.deck-theatre .deck-controls {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
  height: auto;
  min-width: 0;
  color: #cdd1d2;
}
.deck-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.deck-theatre .deck-controls button {
  border: 1px solid rgba(205, 209, 210, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #f3f3ef;
  transition:
    background 0.2s,
    transform 0.2s var(--deck-ease);
}
.deck-theatre .deck-controls button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}
.deck-theatre [data-deck='previous'],
.deck-theatre [data-deck='next'] {
  width: 42px;
  height: 42px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
}
.deck-theatre .deck-count {
  min-width: 64px;
  text-align: center;
  color: #cdd1d2;
}
.deck-theatre .deck-hint {
  margin: 0;
  color: #858f96;
}
.deck-progress {
  width: 100%;
  max-width: 560px;
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(205, 209, 210, 0.15);
}
.deck-progress i {
  display: block;
  height: 100%;
  width: calc(var(--progress, 0) * 100%);
  background: #c77745;
  transition: width 0.5s var(--deck-ease);
}
.deck-thumbs {
  display: flex;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding: 4px 2px;
}
.deck-theatre .deck-thumbs button {
  flex: none;
  width: 92px;
  aspect-ratio: 16 / 9;
  padding: 6px;
  border-radius: 6px;
  border-color: rgba(205, 209, 210, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #cdd1d2;
  font: 10px/1.25 var(--font-mono, 'IBM Plex Mono', monospace);
  text-align: left;
  white-space: normal;
  overflow: hidden;
}
.deck-theatre .deck-thumbs button[aria-current='true'] {
  border-color: #c77745;
  background: rgba(199, 119, 69, 0.12);
  transform: translateY(-3px);
}
.deck-theatre button:focus-visible {
  outline: 2px solid #c77745;
  outline-offset: 3px;
}
.deck-theatre.presenting .deck-controls {
  background: rgba(20, 25, 29, 0.9);
  color: #cdd1d2;
}
.deck-theatre.presenting .deck-thumbs,
.deck-theatre.presenting .deck-progress {
  display: none;
}
@media (max-width: 650px) {
  .deck-host.deck-theatre {
    padding: 16px 16px 12px;
  }
  .deck-theatre .deck {
    border-radius: 8px;
  }
  .deck-theatre .deck-thumbs button {
    width: 72px;
  }
}

/* Theatre motion, only when the reader allows it. A block marked .deck-rise rises in after
   --i × 90 ms and the cover's lines draw in. Hidden slides are display:none, so each visit to a
   slide plays it again. With motion off, nothing moves and everything is already in place. */
.deck-i1 {
  --i: 1;
}
.deck-i2 {
  --i: 2;
}
.deck-i3 {
  --i: 3;
}
.deck-i4 {
  --i: 4;
}
.deck-i5 {
  --i: 5;
}
.deck-i6 {
  --i: 6;
}
.deck-i7 {
  --i: 7;
}
.deck-i8 {
  --i: 8;
}
.deck-i9 {
  --i: 9;
}
@media (prefers-reduced-motion: no-preference) {
  .deck-theatre .deck-rise {
    animation: deck-rise 0.8s var(--deck-ease) both;
    animation-delay: calc(var(--i, 0) * 90ms + 80ms);
  }
  .deck-theatre .taking-form path {
    stroke-dasharray: 1;
    animation: deck-draw 2.2s var(--deck-ease) both;
    animation-delay: calc(var(--i, 0) * 65ms + 300ms);
  }
  .deck-theatre .deck-thumbs button[aria-current='true'] {
    transition: transform 0.25s var(--deck-ease);
  }
}
@keyframes deck-rise {
  from {
    transform: translateY(28px);
    opacity: 0.001;
  }
}
@keyframes deck-draw {
  from {
    stroke-dashoffset: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .deck-theatre .deck-progress i,
  .deck-theatre .deck-controls button {
    transition: none;
  }
}

/* Every slide on its own 16:9 landscape page (13.333 × 7.5 in), finished. */
@media print {
  @page {
    size: 338.667mm 190.5mm;
    margin: 0;
  }
  body {
    background: white;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .deck-host.presenting {
    position: static;
    display: block;
    overflow: visible;
    height: auto;
    background: white;
  }
  .deck-controls {
    display: none !important;
  }
  /* A deck mounted inside a page prints from the page edge, not from where the page placed it. */
  .deck-host {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }
  .deck {
    margin: 0 !important;
    width: 1280px !important;
    height: auto !important;
    box-shadow: none;
  }
  .deck::before {
    display: none;
  }
  .deck-host.deck-theatre {
    display: block;
    background: none;
  }
  .deck-theatre .deck {
    border-radius: 0;
  }
  .deck-rise,
  .deck-theatre .taking-form path {
    animation: none !important;
  }
  .slide,
  .slide[hidden] {
    display: block;
    position: relative;
    transform: none;
    break-after: page;
    break-inside: avoid;
  }
  .slide:last-child {
    break-after: auto;
  }
  /* Important because a page's own frame sizing comes later in the cascade. */
  .deck iframe {
    display: none !important;
  }
  .deck-print-only {
    display: block !important;
  }
}
@font-face {
  font-family: 'Inter Tight';
  src: url('/sales/brand/inter-tight.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/sales/brand/plex-sans-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/sales/brand/plex-sans-medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/sales/brand/plex-sans-semibold.woff2') format('woff2');
  font-weight: 600 900;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/sales/brand/plex-mono-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
:root {
  --bg: #f3f3ef;
  --surface: #fafaf7;
  --surface-2: #e6e8e7;
  --ink: #30383d;
  --ink-2: #606970;
  --line: #cdd1d2;
  --action: #263f61;
  --on-action: #f3f3ef;
  --font-display: 'Inter Tight', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #e6e8e7;
  color: var(--ink);
  font: 20px/1.5 var(--font-body);
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  cursor: pointer;
}
a:focus-visible,
button:focus-visible {
  outline: 3px solid #728ead;
  outline-offset: 4px;
}
.sales-header {
  height: 76px;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 13px;
}
.sales-header > a:last-child {
  margin-left: auto;
}
.sales-wordmark {
  display: flex;
  align-items: center;
  gap: 18px;
}
.sales-wordmark svg {
  width: 170px;
  height: 34px;
}
.sales-wordmark span,
.deck-label {
  font: 9px var(--font-mono);
  letter-spacing: 0.12em;
}
/* The stage, slides, controls, full screen and print layout are packages/deck/deck.css. */
.eyebrow {
  font: 12px var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--ink-2);
  margin: 0 0 24px;
}
h1,
h2,
h3,
p,
figure {
  margin-top: 0;
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
}
h1 {
  font-size: 92px;
  line-height: 1.04;
  letter-spacing: -0.045em;
  margin-bottom: 30px;
}
h1 em {
  font-style: normal;
  color: var(--action);
}
h2 {
  font-size: 62px;
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin-bottom: 28px;
}
h3 {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
}
.intro {
  font-size: 24px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 950px;
  margin-bottom: 28px;
}
.caption {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.cover {
  text-align: center;
  padding: 78px 72px;
}
.cover .intro {
  max-width: 860px;
  margin: 0 auto 28px;
}
.cover .caption {
  margin-top: 24px;
}
.action {
  display: inline-flex;
  background: var(--action);
  color: var(--on-action);
  border-radius: 4px;
  padding: 14px 22px;
  font-size: 18px;
  font-weight: 500;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 30px 0;
}
.cards article {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.cards b {
  font: 500 27px/1.2 var(--font-display);
}
.cards p {
  font-size: 19px;
  color: var(--ink-2);
  margin: 16px 0 0;
}
.example h2 {
  font-size: 58px;
}
.example p:not(.eyebrow):not(.caption) {
  font-size: 21px;
  color: var(--ink-2);
}
figcaption {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: 24px;
}
.text-link {
  font-size: 18px;
  border-bottom: 1px solid var(--line);
}
.scope {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 28px 0;
}
.scope article {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.tag {
  font: 11px var(--font-mono);
  letter-spacing: 0.08em;
}
.scope h3 {
  margin: 18px 0;
}
.scope ul {
  font-size: 19px;
  color: var(--ink-2);
  padding-left: 22px;
  margin-bottom: 0;
}
.scope li {
  margin: 8px 0;
}
.charcoal {
  --bg: #263f61;
  --surface: #304966;
  --ink: #f3f3ef;
  --ink-2: #d0d7df;
  --line: #65778c;
  --action: #f3f3ef;
  --on-action: #263f61;
  color: var(--ink);
}
.muted {
  font-size: 16px;
  color: var(--ink-2);
}
#pilot > p:last-child {
  margin-top: 20px;
  font-size: 18px;
}
@media (max-width: 650px) {
  .deck-label {
    display: none;
  }
  .sales-header {
    padding: 16px;
    font-size: 11px;
    gap: 12px;
  }
  .sales-wordmark svg {
    width: 130px;
  }
  .sales-wordmark span {
    display: none;
  }
}
@media print {
  .sales-header {
    display: none;
  }
  .slide.example {
    display: grid;
  }
}
.explainer h2 {
  font-size: 58px;
  margin-bottom: 22px;
}
.explainer .intro {
  font-size: 23px;
  margin-bottom: 22px;
}
.explainer .cards {
  margin: 22px 0;
}
.explainer .cards p {
  font-size: 18px;
}
.plain-example {
  font-size: 19px;
  line-height: 1.45;
  background: var(--surface-2);
  padding: 18px 22px;
  border-radius: 6px;
  margin: 22px 0 16px;
}
.explainer .caption {
  font-size: 13px;
}
.demo-slide {
  padding: 30px 40px;
}
.demo-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.demo-heading .eyebrow {
  margin-bottom: 10px;
}
.demo-heading h2 {
  font-size: 42px;
  margin: 0;
}
.demo-heading .text-link {
  font-size: 16px;
  white-space: nowrap;
}
.demo-slide iframe {
  display: block;
  width: 1200px;
  height: 520px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}
.demo-slide .caption {
  font-size: 12px;
  margin: 12px 0;
}
@media print {
  .demo-print {
    font-size: 28px;
    margin-top: 120px;
  }
}
.explainer {
  padding-top: 48px;
  padding-bottom: 40px;
}

/* Pilot story: one readable idea on each 16:9 slide. */
.ai-roles {
  display: flex;
  gap: 22px;
  align-items: center;
  justify-content: space-between;
  font-size: 19px;
}
.evidence-slide h2,
.responsibilities h2,
.readiness h2 {
  font-size: 58px;
}
.evidence-slide {
  padding-top: 44px;
}
.evidence-slide h2 {
  margin-bottom: 26px;
}
.evidence-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 34px;
  align-items: center;
}
.evidence-layout figure {
  margin: 0;
}
.evidence-layout img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.evidence-layout figcaption {
  margin-top: 12px;
  font-size: 14px;
}
.evidence-layout h3 {
  font-size: 32px;
  margin: 14px 0;
}
.evidence-layout p,
.evidence-layout li {
  font-size: 19px;
  color: var(--ink-2);
}
.evidence-layout ol {
  padding-left: 22px;
}
.evidence-layout .caption {
  font-size: 13px;
}
.responsibilities .cards,
.readiness .cards {
  margin-top: 34px;
}
.responsibilities h3,
.readiness h3 {
  margin: 18px 0;
  font-size: 30px;
}
.responsibilities .cards p,
.readiness .cards p {
  font-size: 20px;
}
.readiness .cards .caption {
  font-size: 15px;
  margin-top: 24px;
}
.pilot-decision {
  font-size: 18px;
  color: var(--ink-2);
  margin: 18px 0 24px;
}
#pilot .intro {
  font-size: 22px;
}
#pilot .cards {
  margin: 24px 0;
}
#pilot h2 {
  font-size: 58px;
}

#pilot {
  padding-top: 48px;
  padding-bottom: 40px;
}

/* Full screen hides the header; the presenting layout itself is packages/deck/deck.css. */
.presenting .sales-header {
  display: none;
}

/* The check story, as on the landing page: one real cabin, then the steel hall. The slides are
   generated by scripts/check-story-slides.mjs; each animates when it is shown (a hidden slide is
   display:none, so showing it restarts its animations) and prints finished. */
@property --n {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}
.story-slide {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px 48px;
  align-items: center;
  background: #fff;
  --signal: #f47752;
  --signal-ink: #a4381d;
}
.story-copy h2 {
  font-size: 48px;
  margin-bottom: 14px;
}
.story-copy .eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.story-tag {
  font: 11px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  background: #fff0ea;
  color: var(--signal-ink);
}
.story-dark .story-tag {
  background: #3a2620;
  color: #f9a689;
}
.story-copy > p:not(.eyebrow):not(.story-note):not(.story-status):not(.story-brief) {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: 0;
}
.story-caption {
  grid-column: 1 / -1;
  margin: 0;
  font: 11px var(--font-mono);
  color: var(--ink-2);
}
.story-figure {
  position: relative;
  margin: 0;
  height: 100%;
  display: grid;
  place-items: center;
}
.story-frame,
.story-hall {
  width: 100%;
  max-height: 500px;
  overflow: visible;
}
.story-frame line {
  stroke: var(--ink);
  stroke-width: 0.07;
  stroke-linecap: round;
}
/* Units are metres of the 24 m hall; columns and rafters read heavier than the secondary steel. */
.story-frame line.is-primary {
  stroke-width: 0.16;
}
.story-frame line.is-dim {
  opacity: 0.16;
}
.story-frame line.is-piece {
  stroke: var(--signal);
  stroke-width: 0.3;
  animation: story-flag 0.6s 0.3s both;
}
.story-frame line.is-finding {
  stroke: var(--signal);
  stroke-width: 0.2;
  animation: story-flag 0.6s calc(0.4s + var(--k) * 6ms) both;
}
.story-frame line.is-moved {
  stroke: #c98a6b;
  stroke-width: 0.16;
  animation: story-flag 0.6s calc(0.4s + var(--k) * 6ms) both;
}
.story-door polygon {
  fill: rgb(23 24 25 / 0.06);
  stroke: var(--ink);
  stroke-width: 0.05;
}
.story-door .story-door-clearance {
  fill: none;
  stroke-dasharray: 0.3 0.25;
}
.story-door.is-clash polygon {
  fill: rgb(244 119 82 / 0.14);
  stroke: var(--signal);
}
.story-frame.is-build line {
  stroke-dasharray: 1 1;
  animation: story-draw 0.5s calc(var(--k) * 16ms) ease-out both;
}
.story-count {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.story-count b {
  font: 500 96px/1 var(--font-display);
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.story-count:not(.is-static) b {
  --n: var(--n-to);
  counter-reset: n var(--n);
  animation: story-count 1.8s ease-out both;
}
.story-count:not(.is-static) b::after {
  content: counter(n);
}
.story-count span {
  font: 12px var(--font-mono);
  color: var(--ink-2);
}
.story-ledger {
  margin-top: 22px;
  border-top: 1px solid var(--ink);
}
.story-ledger > p {
  font: 11px var(--font-mono);
  color: var(--ink-2);
  margin: 8px 0 2px;
}
.story-ledger ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.story-ledger li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid #e3e5e4;
  font-size: 14px;
  animation: story-row 0.35s calc(0.5s + var(--i) * 0.32s) both;
}
.story-ledger li b {
  font: 500 12px var(--font-mono);
  text-align: right;
  min-width: 8ch;
}
.story-ledger .mark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
}
.story-ledger li.is-find .mark {
  background: var(--signal);
}
.story-ledger li.is-find b {
  color: var(--signal-ink);
}
.story-ledger li.is-open .mark {
  background: none;
  border: 1px dashed var(--ink-2);
}
.story-ledger li.is-open b {
  color: var(--ink-2);
  font-weight: 400;
}
.story-ledger .bar {
  width: 80px;
  height: 4px;
  background: #e3e5e4;
  overflow: hidden;
}
.story-ledger .bar i {
  display: block;
  height: 100%;
  background: var(--ink);
  transform-origin: left;
  transform: scaleX(var(--r));
  animation: story-bar 0.7s calc(0.7s + var(--i) * 0.32s) cubic-bezier(0.22, 1, 0.36, 1) both;
}
.story-note {
  margin: 12px 0 0;
  font: 12px/1.5 var(--font-mono);
  color: var(--signal-ink);
}
.story-status {
  margin: 18px 0 0;
}
.story-status span {
  display: inline-block;
  font: 11px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 4px;
  background: #fff0ea;
  color: var(--signal-ink);
}
.story-files {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.story-files li {
  font: 12px var(--font-mono);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  background: #fff;
  animation: story-rise 0.45s calc(2.4s + var(--i) * 0.2s) both;
}

/* The opening slide: the four steps and what each is today. */
.story-order {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  text-align: left;
}
.story-order > * {
  margin-inline: 0;
}
.story-order h2 {
  font-size: 58px;
  margin-bottom: 18px;
}
.story-steps {
  list-style: none;
  margin: 28px 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.story-steps li {
  border-top: 1px solid var(--ink);
  padding-top: 16px;
  animation: story-rise 0.5s calc(0.2s + var(--i) * 0.25s) both;
}
.story-steps .story-step-n {
  font: 12px var(--font-mono);
  color: var(--ink-2);
}
.story-steps .story-status {
  margin: 10px 0 12px;
}
.story-steps h3 {
  font-size: 30px;
  margin-bottom: 8px;
}
.story-steps p:not(.story-status) {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}

/* Chapter 04 on the dark stage, as the landing page's steel hall. */
.story-dark {
  background: #161819;
  color: #f8f8f5;
}
.story-dark .eyebrow,
.story-dark .story-caption {
  color: #b8bdbe;
}
.story-dark .story-copy > p:not(.eyebrow):not(.story-status):not(.story-brief) {
  color: #c6c9cc;
  font-size: 17px;
}
.story-dark .story-status span {
  background: #3a2620;
  color: #f9a689;
}
.story-brief {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.4;
}
.story-brief span {
  display: block;
  font: 11px var(--font-mono);
  letter-spacing: 0.07em;
  color: #b8bdbe;
  margin-bottom: 4px;
}
.story-consequence {
  list-style: none;
  display: flex;
  gap: 26px;
  margin: 18px 0 12px;
  padding: 16px 0 0;
  border-top: 1px solid #343637;
  font: 13px var(--font-mono);
  color: #b8bdbe;
}
.story-consequence li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  animation: story-rise 0.45s calc(1.2s + var(--i) * 0.25s) both;
}
.story-consequence li::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #526b78;
  align-self: center;
}
.story-consequence li.is-remade::before {
  background: #f47752;
}
.story-consequence li.is-moved::before {
  background: #e9c2ae;
}
.story-consequence b {
  font: 500 38px/1 var(--font-body);
  color: #f8f8f5;
}
.story-hall {
  background: #eeeee7;
  border-radius: 12px;
  padding: 18px;
  box-sizing: border-box;
}
.story-hall-door {
  fill: #f4f1ea;
  stroke: #899b9f;
  stroke-width: 0.05;
}
.story-hall line {
  stroke: #899b9f;
  stroke-width: 0.07;
  stroke-linecap: round;
}
.story-hall line.is-primary {
  stroke: #526b78;
  stroke-width: 0.16;
}
.story-hall line.is-moved {
  stroke: #e9c2ae;
  animation: story-moved 0.6s calc(0.6s + var(--k) * 4ms) both;
}
.story-hall line.is-remade {
  stroke: #f47752;
  animation: story-remade 0.6s calc(0.9s + var(--k) * 6ms) both;
}

@keyframes story-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes story-flag {
  from {
    stroke: var(--ink);
  }
}
@keyframes story-moved {
  from {
    stroke: #899b9f;
  }
}
@keyframes story-remade {
  from {
    stroke: #526b78;
  }
}
@keyframes story-row {
  from {
    opacity: 0.18;
  }
}
@keyframes story-bar {
  from {
    transform: scaleX(0);
  }
}
@keyframes story-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
@keyframes story-count {
  from {
    --n: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .story-slide *,
  .story-slide *::after {
    animation: none !important;
  }
}
@media print {
  .story-slide *,
  .story-slide *::after {
    animation: none !important;
  }
  .slide.story-slide:not(.story-order) {
    display: grid;
  }
}
#pilot .booking-action {
  margin-right: 12px;
}

/* Motion, within brand book 2.1: a slide fades in over the one it replaces (packages/deck/deck.mjs holds
   the outgoing slide underneath for the length of the entrance), the rule above each card draws across,
   and decorative motion belongs to the Taking form lines, drawn once. Headings, text and images stay
   still; printed and reduced-motion slides are the finished state. */

/* The rule above each card draws across; the card text is there from the start. */
.cards article {
  position: relative;
  border-top: 0;
}
.cards article::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line);
  transform-origin: left;
  animation: draw-rule 0.5s calc(0.15s + var(--c, 0) * 0.06s) var(--ease-out) both;
}
.cards article:nth-child(2) {
  --c: 1;
}
.cards article:nth-child(3) {
  --c: 2;
}
@keyframes draw-rule {
  from {
    transform: scaleX(0);
  }
}

/* Cover: the whole Gather band enters from the lower-left edge, below the reading zone. */
.cover {
  padding-top: 44px;
}
.cover .taking-form {
  position: absolute;
  left: 0;
  bottom: 18px;
  width: 760px;
}

.action {
  transition: translate 0.18s var(--ease-out);
}
.action:hover {
  translate: 0 -2px;
}
.text-link {
  transition: border-color 0.18s;
}
.text-link:hover {
  border-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .sales-page *,
  .sales-page *::before,
  .sales-page *::after,
  .sales-page::before {
    animation: none !important;
    transition: none !important;
  }
}
@media print {
  .sales-page *,
  .sales-page *::before {
    animation: none !important;
  }
}

/* Fullscreen hides the header, so a small wordmark sits in the deck's lower-right corner. It is
   sized in slide units (--deck-scale) and turns light on the dark slides. */
.sales-wordmark {
  color: #30383d;
}
.deck-mark {
  display: none;
}
.presenting .deck-mark {
  position: absolute;
  z-index: 2;
  right: calc(30px * var(--deck-scale, 1));
  bottom: calc(22px * var(--deck-scale, 1));
  display: flex;
  align-items: center;
  gap: calc(9px * var(--deck-scale, 1));
  color: #30383d;
  pointer-events: none;
}
.presenting .deck-mark svg {
  width: calc(92px * var(--deck-scale, 1));
  height: auto;
}
.presenting .deck-mark span {
  font: calc(8px * var(--deck-scale, 1)) var(--font-mono);
  letter-spacing: 0.12em;
}
.presenting .sales-page.is-dark .deck-mark {
  color: #f3f3ef;
}
@media print {
  .deck-mark {
    display: none !important;
  }
}

/* The Gather circle before the wordmark, in the header and the fullscreen deck mark. These come
   last so the wordmark's own svg sizes above never stretch the circle. */
.sales-wordmark svg.nordform-mark {
  width: 30px;
  height: 30px;
  flex: none;
  margin-right: -6px;
}
.presenting .deck-mark svg.nordform-mark {
  width: calc(17px * var(--deck-scale, 1));
  height: calc(17px * var(--deck-scale, 1));
  flex: none;
}
@media (max-width: 760px) {
  .sales-wordmark svg.nordform-mark {
    width: 26px;
    height: 26px;
  }
}

/* Opening title card: the brand intro (packages/ui/nordform/brand-intro.css) on a quiet slide. The
   lockup is 8.2em wide, so 96px gives about 790px of the 1280px slide. */
.intro-slide {
  display: grid;
  place-items: center;
  padding: 0;
  color: #30383d;
}
.intro-slide .brand-intro {
  font-size: 96px;
}
.presenting .sales-page.is-intro .deck-mark {
  display: none;
}
/* Taking form: one uniform-scale, six-path master; never behind reading or data. */
.taking-form {
  color: var(--nf-ink, #263f61);
  width: 100%;
  min-width: 360px;
  line-height: 0;
}
.taking-form svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 900/220;
  overflow: visible;
}
.taking-form path {
  fill: none;
}
@media (prefers-reduced-motion: no-preference) {
  .taking-form-reveal path {
    animation: nf-line-reveal 1800ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--i) * 65ms);
  }
}
@keyframes nf-line-reveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}
@media (max-width: 359px) {
  .taking-form {
    display: none;
  }
}
@media print {
  .taking-form path {
    animation: none !important;
    clip-path: none !important;
  }
}
/* Brand intro: Gather lines → circle → slogan → lockup. Plays once (about 5.4 s) when .is-playing is
   added; without it, and under reduced motion or in print, the finished lockup shows. One colour:
   currentColor, graphite on paper or chalk on graphite. Not a loader and never behind reading. */
.brand-intro {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: 2.4em;
  line-height: 0;
}
/* The finished lockup is 8.2em wide: mark 1.55em, gap .15em, wordmark 6.5em. */
.brand-intro-lockup {
  display: grid;
  grid-template-columns: 1.55em 6.5em;
  column-gap: 0.15em;
  align-items: center;
}
.brand-intro-mark {
  grid-row: 1 / span 2;
  width: 1.55em;
  height: 1.55em;
  overflow: visible;
}
.brand-intro-lines {
  opacity: 0;
}
.brand-intro-wordmark {
  display: block;
  width: 6.5em;
  height: auto;
}
.brand-intro-descriptor {
  grid-column: 2;
  margin-top: 0.08em;
  font: 400 0.13em/1.4 var(--font-mono, 'IBM Plex Mono', monospace);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* Sits under the enlarged mark while it holds; 6.2em here is 1.75em of the intro's own size. */
.brand-intro-slogan {
  position: absolute;
  inset: 50% 0 auto;
  margin: 6.2em auto 0;
  max-width: 29em;
  font: 500 0.28em/1.2 var(--font-display, 'Inter Tight', sans-serif);
  letter-spacing: -0.01em;
  text-align: center;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .brand-intro.is-playing .brand-intro-lines {
    animation: bi-fade-out 500ms 1000ms ease-out both;
  }
  .brand-intro.is-playing .brand-intro-lines path,
  .brand-intro.is-playing .brand-intro-wordmark :is(path, ellipse) {
    animation: bi-draw 700ms calc(var(--i) * 65ms) cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .brand-intro.is-playing .brand-intro-disc {
    transform-box: fill-box;
    transform-origin: center;
    animation: bi-disc 600ms 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .brand-intro.is-playing .brand-intro-slogan {
    animation: bi-slogan 2200ms 1500ms ease-out both;
  }
  .brand-intro.is-playing .brand-intro-mark {
    transform-origin: center;
    animation: bi-settle 700ms 3450ms cubic-bezier(0.65, 0, 0.35, 1) both;
  }
  /* One left-to-right pen pass: each stroke starts as the pen reaches it. */
  .brand-intro.is-playing .brand-intro-wordmark :is(path, ellipse) {
    animation-duration: 520ms;
    animation-delay: calc(4050ms + var(--i) * 80ms);
  }
  .brand-intro.is-playing .brand-intro-descriptor {
    animation: bi-fade-in 400ms 5000ms ease-out both;
  }
}

/* The dash lives only in the keyframes, so a finished ellipse has no seam; the gap is longer than
   the stroke so nothing shows before it starts. */
@keyframes bi-draw {
  from {
    stroke-dasharray: 1 2;
    stroke-dashoffset: 1;
  }
  99% {
    stroke-dasharray: 1 2;
    stroke-dashoffset: 0;
  }
  to {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}
@keyframes bi-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes bi-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes bi-disc {
  from {
    opacity: 0;
    transform: scale(0.86);
  }
}
@keyframes bi-slogan {
  0% {
    opacity: 0;
    transform: translateY(0.35em);
  }
  23%,
  82% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
/* Centred and doubled while alone; 3.325em is the mark's distance from the lockup's centre. */
@keyframes bi-settle {
  from {
    transform: translateX(3.325em) scale(2);
  }
}

@media print {
  .brand-intro * {
    animation: none !important;
  }
}