/* ============================================================
   /cupel showcase page (#456). Colours, type and motion follow the
   cupel ad film (#239): Space Grotesk + JetBrains Mono, the film's
   light and dark grounds, one teal accent. Site header and footer
   stay as on every other sub-page (style.css).
   ============================================================ */

/* Self-hosted (SIL Open Font License), the same files the film was rendered with. */
@font-face {
  font-family: 'Space Grotesk';
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/cupel/SpaceGrotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/cupel/SpaceGrotesk-latinext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 100 800;
  font-display: swap;
  src: url(/fonts/cupel/JetBrainsMono-latin.woff2) format('woff2');
}

.cp {
  --cp-dark:   #0c0e10;
  --cp-dark-1: #16191c;
  --cp-dark-2: #1f2327;
  --cp-light:  #f3f3f2;
  --cp-light-2:#e8e8e6;
  --cp-ink:    #111316;
  --cp-ink-2:  #5d6167;
  --cp-paper:  #f2f2ef;
  --cp-paper-2:#a9adb3;
  --cp-acc:    #3ec7a3;   /* teal: marks and fills */
  --cp-acc-ink:#167a61;   /* teal as text on light, 5.0:1 */
  --cp-acc-lt: #6fdcbc;   /* teal as text on dark */
  --cp-ok:     #3fbf6a;
  --cp-wait:   #e0a13a;
  --cp-wait-ink:#a35500;
  --cp-idle:   #62c6e0;
  --cp-idle-ink:#13708a;
  --cp-sans: 'Space Grotesk', "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cp-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --cp-ease: cubic-bezier(.16, 1, .3, 1);
  font-family: var(--cp-sans);
}
.cp *:focus-visible { outline: 2px solid var(--cp-acc); outline-offset: 3px; }

.cp-wrap { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }

/* ── grounds: the film cuts between a light and a dark board ── */
.cp-light { background: var(--cp-light); color: var(--cp-ink); }
.cp-dark  { background: var(--cp-dark);  color: var(--cp-paper); }
.cp-site  { background: #1C1C1E;         color: var(--cp-paper); }

/* the film's corner ticks, one set per board */
.cp-board { position: relative; }
.cp-board::before {
  content: "";
  position: absolute;
  inset: 14px;
  pointer-events: none;
  --t: currentColor;
  background:
    linear-gradient(var(--t), var(--t)) left top / 14px 1px,
    linear-gradient(var(--t), var(--t)) left top / 1px 14px,
    linear-gradient(var(--t), var(--t)) right top / 14px 1px,
    linear-gradient(var(--t), var(--t)) right top / 1px 14px,
    linear-gradient(var(--t), var(--t)) left bottom / 14px 1px,
    linear-gradient(var(--t), var(--t)) left bottom / 1px 14px,
    linear-gradient(var(--t), var(--t)) right bottom / 14px 1px,
    linear-gradient(var(--t), var(--t)) right bottom / 1px 14px;
  background-repeat: no-repeat;
  opacity: .22;
}

.cp-kicker {
  font: 500 .75rem/1.2 var(--cp-mono);
  letter-spacing: .08em;
  color: var(--cp-acc-ink);
  margin-bottom: 1rem;
}
.cp-dark .cp-kicker, .cp-site .cp-kicker { color: var(--cp-acc-lt); }

.cp-h2 {
  font: 600 clamp(2.1rem, 6.4vw, 3.6rem)/1.04 var(--cp-sans);
  letter-spacing: -.025em;
  margin-bottom: 1.1rem;
  max-width: 13ch;
}
.cp-p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--cp-ink-2);
  max-width: 34rem;
}
.cp-dark .cp-p, .cp-site .cp-p { color: var(--cp-paper-2); }
.cp-p + .cp-p { margin-top: .9rem; }

/* ============================================================
   HERO (site ground, so it continues the sub-page header)
   ============================================================ */
.cp-hero { padding: 3rem 0 4.5rem; }
.cp-hero .svc-hero__back { margin-bottom: 2.5rem; }
.cp-lockup { display: flex; align-items: center; gap: .9rem; margin-bottom: 2rem; }
.cp-lockup svg { width: 52px; height: 52px; flex: none; overflow: visible; }
.cp-lockup__word { font: 600 2.6rem/1 var(--cp-sans); letter-spacing: -.02em; color: var(--cp-paper); }
.cp-hero__title {
  font: 600 clamp(2.4rem, 7.4vw, 4.6rem)/1.02 var(--cp-sans);
  letter-spacing: -.03em;
  color: #fff;
  max-width: 15ch;
  margin-bottom: 1.4rem;
}
.cp-hero__title em { font-style: normal; color: var(--cp-acc-lt); }
.cp-hero__lead { font-size: 1.15rem; line-height: 1.65; color: var(--cp-paper-2); max-width: 36rem; }

.cp-index-unused { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin-top: 1.75rem; font: 500 .8rem/1.6 var(--cp-mono); }
.cp-index a { color: var(--cp-paper-2); border-bottom: 1px solid rgba(255,255,255,.18); padding-bottom: 1px; transition: color .2s, border-color .2s; }
.cp-index a:hover { color: var(--cp-acc-lt); border-color: var(--cp-acc-lt); }

.cp-film { margin-top: 3.25rem; }
.cp-film video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  background: var(--cp-dark);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
}
.cp-film figcaption { margin-top: .85rem; font: 400 .78rem/1.5 var(--cp-mono); color: var(--cp-paper-2); }

/* the C mark draws itself once, like the film's logo beat */
.cp-mark__arc { stroke-dasharray: 156; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .cp-mark__arc { animation: cp-draw 1.1s var(--cp-ease) .15s both; }
  .cp-mark__dot { transform-origin: 50px 50px; animation: cp-pop .5s var(--cp-ease) 1s both; }
}
@keyframes cp-draw { from { stroke-dashoffset: 156; } }
@keyframes cp-pop  { from { transform: scale(0); } }

/* ============================================================
   CHAPTERS 01-05
   ============================================================ */
.cp-ch { padding: 5rem 0; }
.cp-ch__grid { display: grid; gap: 2.75rem; align-items: center; }
@media (min-width: 960px) {
  .cp-ch { padding: 7.5rem 0; }
  .cp-ch__grid { grid-template-columns: 5fr 7fr; gap: 4.5rem; }
}

/* small parts shared by the diagrams */
.cp-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.cp-dot--ok { background: var(--cp-ok); }
.cp-dot--wait { background: var(--cp-wait); }
.cp-dot--idle { background: var(--cp-idle); }
.cp-mono { font-family: var(--cp-mono); }

/* 01 team: the lead hands work down one spine to four specialists */
.cp-team { position: relative; display: grid; gap: 14px; max-width: 560px; }
.cp-team::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 30px;
  bottom: 30px;
  width: 1px;
  background: rgba(17,19,22,.22);
  transform-origin: top;
}
.cp-node {
  position: relative;
  background: #fff;
  border: 1px solid rgba(17,19,22,.1);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(17,19,22,.06);
  padding: .8rem .9rem;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .55rem;
  align-items: center;
}
.cp-node b { font-weight: 600; font-size: 1rem; color: var(--cp-ink); }
.cp-node span { grid-column: 2; font: 400 .72rem/1.45 var(--cp-mono); color: var(--cp-ink-2); }
.cp-node span + span { margin-top: .1rem; }
.cp-node .st-ok { color: #0a7a2f; }
.cp-node .st-wait { color: var(--cp-wait-ink); }
.cp-node .st-idle { color: var(--cp-idle-ink); }
.cp-node--lead { justify-self: center; min-width: min(260px, 100%); }
.cp-team__hub {
  position: relative;
  justify-self: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--cp-ink);
  display: grid; place-items: center;
}
.cp-team__hub svg { width: 34px; height: 34px; }
.cp-team__crew { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* 02 bus: one line, every handoff a stop on it */
.cp-bus { list-style: none; position: relative; display: grid; gap: 1.1rem; padding-left: 26px; max-width: 600px; }
.cp-bus::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 2px; background: var(--cp-acc); border-radius: 2px; }
.cp-bus li {
  position: relative;
  background: var(--cp-dark-1);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  padding: .85rem 1rem;
}
.cp-bus li::before {
  content: "";
  position: absolute;
  left: -26px; top: 1.15rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--cp-dark);
  border: 2px solid var(--cp-acc);
}
.cp-bus__who { font: 500 .74rem/1.4 var(--cp-mono); color: var(--cp-paper-2); }
.cp-bus__who b { color: var(--cp-paper); font-weight: 600; }
.cp-bus__msg { display: inline-block; margin: .45rem 0 .5rem; font: 500 .9rem/1.3 var(--cp-mono); color: var(--cp-paper); background: var(--cp-dark-2); border-radius: 4px; padding: .3rem .55rem; }
.cp-bus__st { display: flex; flex-wrap: wrap; gap: .4rem; font: 500 .7rem/1 var(--cp-mono); }
.cp-bus__st span { border: 1px solid rgba(111,220,188,.45); color: var(--cp-acc-lt); border-radius: 4px; padding: .3rem .45rem; }

/* 03 board: four columns, the last card checked by someone else */
.cp-kan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 640px; }
@media (min-width: 560px) { .cp-kan { gap: 10px; } }
.cp-kan__col { background: var(--cp-light-2); border-radius: 8px; padding: 4px; display: grid; align-content: start; gap: 5px; min-height: 230px; min-width: 0; }
@media (min-width: 560px) { .cp-kan__col { padding: 8px; gap: 8px; min-height: 230px; } }
.cp-kan__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 4px; font: 600 .52rem/1.15 var(--cp-mono); letter-spacing: .02em; color: var(--cp-ink-2); padding: 3px 1px 2px; }
@media (min-width: 560px) { .cp-kan__head { font-size: .64rem; letter-spacing: .06em; padding: 4px 2px 2px; } }
.cp-kan__card { background: #fff; border-radius: 6px; padding: .42rem .34rem; font-size: .64rem; overflow-wrap: normal; font-weight: 500; line-height: 1.3; color: var(--cp-ink); box-shadow: 0 1px 0 rgba(17,19,22,.06); }
.cp-kan__card--hero { border-left: 3px solid var(--cp-acc); }
.cp-kan__ok { display: flex; align-items: flex-start; gap: .25rem; margin-top: .4rem; font: 500 .5rem/1.2 var(--cp-mono); letter-spacing: -.02em; flex-wrap: wrap; color: var(--cp-acc-ink); }
.cp-kan__ok svg { width: 11px; height: 11px; flex: none; margin-top: 1px; }
.cp-note { margin-top: 1rem; font: 400 .76rem/1.5 var(--cp-mono); color: var(--cp-ink-2); }
.cp-dark .cp-note { color: var(--cp-paper-2); }

/* 04 schedules: a 24 hour dial and its routines */
.cp-sched { display: grid; gap: 2rem; align-items: center; max-width: 640px; }
@media (min-width: 560px) { .cp-sched { grid-template-columns: 1fr 1fr; } }
.cp-dial { width: min(280px, 100%); justify-self: center; }
.cp-dial text { font-family: var(--cp-mono); }
.cp-runs { list-style: none; display: grid; gap: .55rem; font: 400 .86rem/1.3 var(--cp-mono); color: var(--cp-paper-2); }
.cp-runs time { color: var(--cp-paper); margin-right: .7rem; }
.cp-runs li:last-child, .cp-runs li:last-child time { color: var(--cp-acc-lt); }

/* 05 gate: the same command, held until a person says yes */
.cp-gate { max-width: 440px; background: #fff; border: 1px solid rgba(17,19,22,.1); border-radius: 10px; padding: 1.4rem; box-shadow: 0 6px 18px rgba(17,19,22,.06); }
.cp-gate__label { display: inline-block; font: 600 .7rem/1 var(--cp-mono); letter-spacing: .1em; background: var(--cp-light-2); color: var(--cp-ink); border-radius: 4px; padding: .45rem .6rem; }
.cp-gate__cmd { display: flex; align-items: center; gap: .55rem; margin: 1.2rem 0 .5rem; width: fit-content; max-width: 100%; background: var(--cp-ink); color: var(--cp-paper); border-radius: 6px; padding: .65rem .85rem; font: 500 .95rem/1 var(--cp-mono); }
.cp-gate__cmd i { font-style: normal; color: var(--cp-acc); }
.cp-gate__cmd svg { width: 15px; height: 15px; }
.cp-gate__same { margin-top: .9rem; font: 400 .74rem/1.4 var(--cp-mono); color: var(--cp-ink-2); }
.cp-gate__yes { display: inline-flex; align-items: center; gap: .4rem; margin-top: .4rem; border: 1.5px solid var(--cp-ink); border-radius: 5px; padding: .4rem .6rem; font: 500 .78rem/1 var(--cp-mono); color: var(--cp-ink); }
.cp-gate__yes svg { width: 13px; height: 13px; }
.cp-gate__yes { position: relative; z-index: 1; background: #fff; }
.cp-nw { white-space: nowrap; }
.cp-facts { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: 1.6rem; font-size: .88rem; font-weight: 500; color: var(--cp-ink); }
.cp-facts li { display: flex; align-items: center; gap: .45rem; }
.cp-facts li::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--cp-acc); }

/* ============================================================
   CONTROL PANEL + CLOSE
   ============================================================ */
.cp-panel { padding: 5rem 0; }
@media (min-width: 960px) { .cp-panel { padding: 7.5rem 0; } }
.cp-panel__shot { margin: 2.75rem auto 0; max-width: 1000px; }
.cp-panel__shot a { display: block; border-radius: 10px; }
.cp-panel__shot img { width: 100%; height: auto; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); }
.cp-panel__shot figcaption { margin-top: .85rem; font: 400 .76rem/1.5 var(--cp-mono); color: var(--cp-paper-2); }

.cp-close { padding: 5rem 0 5.5rem; }
@media (min-width: 960px) { .cp-close { padding: 7rem 0; } }
.cp-close .cp-h2 { max-width: 18ch; }
.cp-close__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.cp-btn { background: var(--cp-acc); color: var(--cp-ink); border-color: var(--cp-acc); border-radius: 6px; }
.cp-btn:hover { background: var(--cp-acc-lt); border-color: var(--cp-acc-lt); }
.cp-btn--line { background: transparent; border-color: var(--cp-ink); }
.cp-btn--line:hover { background: var(--cp-ink); border-color: var(--cp-ink); color: var(--cp-paper); }

/* ============================================================
   #457 strength graphics
   ============================================================ */
.cp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* hero: five proof tiles that are also the chapter links */
.cp-proof { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 2rem; max-width: 760px; }
@media (min-width: 720px) { .cp-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cp-proof li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 720px) { .cp-proof li:last-child:nth-child(odd) { grid-column: auto; } }
.cp-proof a {
  display: flex; flex-direction: column; gap: .35rem; height: 100%;
  border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: .7rem .8rem;
  font-size: .88rem; font-weight: 600; line-height: 1.25; color: var(--cp-paper);
  transition: border-color .25s, background .25s;
}
.cp-proof a span { font: 500 .68rem/1 var(--cp-mono); color: var(--cp-acc-lt); }
.cp-proof a:hover { border-color: var(--cp-acc); background: rgba(62,199,163,.07); }

.cp-stage { display: grid; gap: 1.75rem; min-width: 0; }

/* 01 crash-safe restart: four states on one track */
.cp-life { max-width: 560px; background: #fff; border: 1px solid rgba(17,19,22,.1); border-radius: 10px; padding: 1rem 1.1rem 1.1rem; }
.cp-life__title { font: 600 .7rem/1 var(--cp-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cp-ink-2); margin-bottom: 1rem; }
.cp-life__steps { list-style: none; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; font: 500 .7rem/1.3 var(--cp-mono); color: var(--cp-ink); }
.cp-life__steps::before { content: ""; position: absolute; left: 6px; right: calc(25% - 4px); top: 5px; height: 2px; background: var(--cp-acc); transform-origin: left; }
.cp-life__steps li { position: relative; padding-top: 20px; }
.cp-life__steps i { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--cp-acc); box-shadow: 0 0 0 3px #fff; }
.cp-life__warn i { background: var(--cp-wait); }
.cp-life__ok { color: var(--cp-acc-ink); }

/* 02 the comparison lanes */
.cp-vs { max-width: 600px; display: grid; gap: 14px; }
.cp-vs__row { display: grid; grid-template-columns: 1fr; gap: 6px; }
.cp-vs__who { font: 600 .7rem/1 var(--cp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--cp-paper-2); }
.cp-vs__track { position: relative; height: 14px; border-radius: 7px; background: var(--cp-dark-2); overflow: visible; }
.cp-vs__track::after { content: ""; position: absolute; left: 7px; right: 7px; top: 6px; height: 2px; background: rgba(255,255,255,.18); }
.cp-vs__row--us .cp-vs__track::after { background: var(--cp-acc); }
.cp-vs__pkt { position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--cp-paper-2); z-index: 1; }
.cp-vs__row--us .cp-vs__pkt { left: calc(100% - 13px); background: var(--cp-acc); box-shadow: 0 0 0 4px rgba(62,199,163,.18); }
.cp-vs__row--them .cp-vs__pkt { left: 58%; opacity: 0; }
.cp-vs__cut { position: absolute; left: 58%; top: -3px; width: 2px; height: 20px; background: #ff6b57; transform: rotate(18deg); }
.cp-vs__end { font: 500 .78rem/1.3 var(--cp-mono); color: var(--cp-paper-2); }
.cp-vs__row--them .cp-vs__end { color: #ff8a78; }
.cp-vs__row--us .cp-vs__end { color: var(--cp-acc-lt); }

/* 05 gate track */
.cp-gate__track { position: relative; display: flex; margin: 1.2rem 0 .5rem; }
.cp-gate__track .cp-gate__cmd { margin: 0; }
.cp-gate__post { position: absolute; width: 3px; border-radius: 2px; background: var(--cp-ink); }

/* 06 memory: a message in, the index finds what fits, the matches reach the agent, a lesson goes back into the team memory */
.cp-mem { position: relative; display: grid; gap: 12px; max-width: 560px; min-width: 0; }
.cp-mem__msg { justify-self: start; max-width: 22rem; background: var(--cp-dark-2); border-radius: 10px 10px 10px 2px; padding: .7rem .85rem; }
.cp-mem__msg span { display: block; font: 500 .68rem/1.3 var(--cp-mono); color: var(--cp-paper-2); margin-bottom: .3rem; }
.cp-mem__msg p { font-size: .95rem; line-height: 1.4; color: var(--cp-paper); }
.cp-mem__index { background: var(--cp-dark-1); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: .9rem; min-width: 0; }
.cp-mem__title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem .8rem; font: 600 .68rem/1.3 var(--cp-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cp-paper-2); }
.cp-mem__title span { color: var(--cp-acc-lt); letter-spacing: .04em; text-transform: none; font-weight: 500; }
.cp-mem__hits { list-style: none; display: grid; gap: 6px; margin: .75rem 0 .6rem; }
.cp-mem__hits li { display: grid; grid-template-columns: 4.1rem minmax(0, 1fr) 2.8rem; align-items: center; gap: .55rem; padding: .45rem .6rem; border-radius: 6px;
  background: rgba(255,255,255,.03); font-size: .8rem; line-height: 1.3; color: var(--cp-paper-2); transition: background .3s, color .3s, box-shadow .3s; }
.cp-mem__hits b { font: 600 .6rem/1 var(--cp-mono); letter-spacing: .06em; text-transform: uppercase; color: #8a8e95; }
.cp-mem__hits li.is-hit { background: rgba(62,199,163,.1); box-shadow: inset 0 0 0 1px rgba(62,199,163,.45); color: var(--cp-paper); }
.cp-mem__hits li.is-hit b { color: var(--cp-acc-lt); }
.cp-mem__bar { position: relative; display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); }
.cp-mem__bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v, .5) * 100%); border-radius: 2px; background: #6b7078; transform-origin: left; }
.cp-mem__hits li.is-hit .cp-mem__bar::after { background: var(--cp-acc); }
.cp-mem__rank { font: 400 .68rem/1.4 var(--cp-mono); color: var(--cp-paper-2); }
.cp-mem__agent { justify-self: end; display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; align-items: center; min-width: min(260px, 100%);
  background: #fff; border-radius: 8px; padding: .75rem .9rem; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.cp-mem__agent b { font-weight: 600; font-size: 1rem; color: var(--cp-ink); }
.cp-mem__agent span { grid-column: 2; font: 400 .72rem/1.45 var(--cp-mono); color: var(--cp-ink-2); }
.cp-mem__store { border: 1px dashed rgba(255,255,255,.2); border-radius: 10px; padding: .8rem .9rem; }
.cp-mem__tiers { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: .6rem; }
.cp-mem__tiers li { text-align: center; font: 500 .72rem/1 var(--cp-mono); padding: .45rem 0; border-radius: 5px; background: rgba(255,255,255,.05); color: var(--cp-paper-2); transition: background .3s, color .3s; }
.cp-mem__tiers li.is-warm { background: rgba(62,199,163,.16); color: var(--cp-acc-lt); }
.cp-mem__new { margin-top: .65rem; font: 500 .76rem/1.4 var(--cp-mono); color: var(--cp-acc-lt); transition: color .3s; }
.cp-mem__fts { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .5rem; font: 500 .74rem/1.4 var(--cp-mono); color: var(--cp-paper); }
.cp-mem__fts span { border: 1px solid rgba(255,255,255,.22); border-radius: 4px; padding: .1rem .35rem; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cp-paper-2); }
.cp-mem__fts i { font-style: normal; color: var(--cp-acc); }
.cp-mem__fts em { font-style: normal; color: var(--cp-paper-2); font-weight: 400; }
.cp-anim .cp-mem.is-wait .cp-mem__new { color: #6b7078; }
.cp-anim .cp-mem.is-wait .cp-mem__tiers li.is-warm { background: rgba(255,255,255,.05); color: var(--cp-paper-2); }

/* the comparison: a section of its own after 06, so the memory row sits with the rest */
.cp-cmpsec .cp-cmp { margin-top: 0; border-top: 0; padding-top: 0; }

/* 05 comparison table */
.cp-cmp { margin-top: 3.5rem; border-top: 1px solid rgba(17,19,22,.14); padding-top: 2rem; }
.cp-cmp__title { font: 600 clamp(1.35rem, 3.6vw, 1.9rem)/1.15 var(--cp-sans); letter-spacing: -.02em; margin-bottom: 1.4rem; max-width: 22ch; }
.cp-cmp__head { display: none; }
.cp-cmp__rows { display: grid; gap: 10px; }
.cp-cmp__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp-cmp__row dt { grid-column: 1 / -1; font: 600 .7rem/1 var(--cp-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cp-ink-2); padding-top: .4rem; }
.cp-cmp__row dd { position: relative; margin: 0; border-radius: 8px; padding: .75rem .85rem; font-size: .9rem; font-weight: 500; line-height: 1.35; overflow: hidden; }
.cp-cmp__them { background: var(--cp-light-2); color: var(--cp-ink-2); }
.cp-cmp__them::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: .45rem; border-radius: 50%; border: 1.5px solid #a9adb3; vertical-align: .05em; }
.cp-cmp__us { background: var(--cp-ink); color: var(--cp-paper); }
.cp-cmp__us::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: .45rem; border-radius: 2px; background: var(--cp-acc); vertical-align: .05em; }
.cp-cmp__us::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--cp-acc); transform-origin: left; }
.cp-cmp__foot { margin-top: 1rem; font: 400 .74rem/1.5 var(--cp-mono); color: var(--cp-ink-2); max-width: 60ch; }
@media (min-width: 760px) {
  .cp-cmp__head { display: grid; grid-template-columns: 9rem 1fr 1fr; gap: 10px; font: 600 .7rem/1 var(--cp-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cp-ink-2); margin-bottom: 10px; }
  .cp-cmp__head span:last-child { color: var(--cp-acc-ink); }
  .cp-cmp__row { grid-template-columns: 9rem 1fr 1fr; gap: 10px; align-items: stretch; }
  .cp-cmp__row dt { grid-column: auto; padding-top: .85rem; }
}

/* ============================================================
   MOTION (#457). Everything below needs .cp-anim, which the script
   sets only when motion is allowed. Without it every graphic shows
   its end state. Text is never hidden: motion moves things and
   changes colour, it does not fade words in.
   ============================================================ */
/* the intro (#461): the film's logo reveal on a fixed stage, played by the scroll over a spacer one screen tall,
   then the logo travels to its place in the hero and the stage lets go in one short fade. The one hold on the page. */
/* graphics that start a little to the side never widen the page */
.cp-anim main.cp { overflow-x: clip; }
.cp-intro { background: #1C1C1E; }
.cp-intro__stage { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; transition: opacity .2s ease, visibility 0s linear 0s; }
.cp-intro__stage.is-off { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.cp-intro__curtain { position: absolute; inset: 0; background: #1C1C1E; }
.cp-intro__dot { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; will-change: transform; }
.cp-intro__dot i { display: block; width: 100%; height: 100%; border: 3px solid var(--cp-acc); border-radius: 50%; box-sizing: border-box;
  animation: cp-drift 5s ease-in-out infinite alternate; }
@keyframes cp-drift {
  from { transform: translate(calc(var(--amp, 1) * -26px), calc(var(--amp, 1) * 9px)); }
  to   { transform: translate(calc(var(--amp, 1) * 26px), calc(var(--amp, 1) * -9px)); }
}
.cp-intro__lock { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; }
.cp-intro__lock .cp-lockup__word { position: relative; display: inline-block; }
/* the cover starts at the word itself: with the word's lead-in shift it still ends clear of the C's arm tips */
.cp-intro__cover { position: absolute; top: -12%; bottom: -12%; left: 0; right: -10px; background: #1C1C1E; }
.cp-intro__cue { position: absolute; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); margin: 0;
  font: 500 .72rem/1 var(--cp-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cp-paper-2); }
.cp-intro__cue::after { content: ""; display: block; width: 1px; height: 26px; margin: .7rem auto 0; background: var(--cp-acc); }
.cp-intro-on .cp-hero .cp-lockup { visibility: hidden; }

/* 01: the routes the tasks run along, drawn by the script in the gutters between the cards */
.cp-anim .cp-team::before { display: none; }
.cp-routes { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.cp-routes path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cp-routes__base { stroke: rgba(17,19,22,.22); stroke-width: 1.5; }
.cp-routes__lit { stroke: var(--cp-acc); stroke-width: 2.5; }

.cp-anim .cp-film video { transform-origin: 50% 50%; will-change: transform; }
.cp-anim .cp-panel__shot { perspective: 1400px; }
.cp-anim .cp-panel__shot a { transform-origin: 50% 100%; will-change: transform; }

/* packets and markers made by the script */
.cp-fx { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; }
.cp-fx--pkt { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--cp-acc); box-shadow: 0 0 0 5px rgba(62,199,163,.22), 0 0 18px rgba(62,199,163,.55); }
.cp-fx--deny {
  font: 600 .66rem/1 var(--cp-mono); letter-spacing: .04em; white-space: nowrap;
  background: #ff6b57; color: #111316; border-radius: 4px; padding: .38rem .5rem;
}
.cp-team, .cp-bus, .cp-kan { position: relative; }
.cp-kan__card--hero { position: relative; z-index: 4; }

/* waiting states: dimmed but still readable */
.cp-anim .is-wait .cp-bus__st span { border-color: rgba(255,255,255,.18); color: var(--cp-paper-2); }
.cp-bus__st span { transition: border-color .35s, color .35s, background .35s; }
.cp-anim .cp-bus li.is-lit .cp-bus__st span { background: rgba(62,199,163,.1); }
.cp-anim .cp-kan.is-wait .cp-kan__ok { color: var(--cp-ink-2); }
.cp-kan__ok { transition: color .35s; }
.cp-anim .cp-gate.w-yes .cp-gate__yes { border-color: #a9adb3; color: var(--cp-ink-2); }
.cp-anim .cp-gate.w-run .cp-gate__same { color: #6b7078; }
.cp-anim .cp-gate__track { justify-content: flex-end; }
.cp-gate__yes, .cp-gate__same, .cp-gate__label { transition: border-color .35s, color .35s, background .35s; }
.cp-anim .cp-gate.is-held .cp-gate__label { background: var(--cp-acc); }
.cp-anim .cp-runs li { transition: color .3s; }
.cp-anim .cp-runs li:not(.is-lit), .cp-anim .cp-runs li:not(.is-lit) time { color: #8a8e95; }
.cp-anim .cp-runs li.is-lit time { color: var(--cp-paper); }
.cp-anim .cp-runs li.is-lit:last-child, .cp-anim .cp-runs li.is-lit:last-child time { color: var(--cp-acc-lt); }
.cp-anim .cp-dial__dots circle { transition: fill .3s; transform-box: fill-box; transform-origin: center; }
.cp-anim .cp-dial__dots circle:not(.is-lit) { fill: #2c3238; }
.cp-dial__hand { transition: none; }
.cp-anim .cp-life.is-wait .cp-life__ok { color: var(--cp-ink-2); }
@media (min-width: 560px) {
  .cp-kan__card { padding: .55rem .6rem; font-size: .82rem; }
  .cp-kan__ok { font-size: .64rem; gap: .3rem; letter-spacing: 0; flex-wrap: nowrap; }
}