/* Stratora platform-explanation sections — drafting-editorial pass.
   Same approved copy, redesigned in the page's own dialect: the film's dark
   evidence chips, the story's slash mono labels and hairline rails, leader
   lines with source dots, node rails with pips, dashed drafting separators,
   and document chrome. Reuses the story tokens; no JavaScript. */

.plat {
  position: relative;
  padding: 108px 7%;
  background: var(--story-paper, #f6f3ee);
  color: var(--story-ink, #14110f);
  font-family: 'Inter Tight', Arial, sans-serif;
  border-top: 1px solid var(--story-line, rgba(20, 17, 15, 0.14));
  overflow: hidden;
}

.plat--tint {
  background: #ecefeb;
}

.plat--ink {
  background: var(--story-black, #090908);
  color: var(--story-white, #ffffff);
}

/* --- Redline Manifesto / Governed Intelligence --- */
.plat--gov {
  background: #14110f; /* Deep Industrial Slate */
  color: #ffffff;
}

.plat--gov::before {
  background: rgba(255, 255, 255, 0.1);
}

.plat--gov .plat-eyebrow {
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Chivo Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.plat--gov .plat-eyebrow b {
  color: #ffffff;
}

.plat--gov h2 {
  color: #ffffff;
  font-size: 48px;
  line-height: 1.1;
  margin-top: 24px;
}

.plat--gov .plat-lead {
  color: rgba(255, 255, 255, 0.7);
  font-size: 20px;
  line-height: 1.5;
  margin-top: 24px;
}

.plat--gov .plat-clauses {
  border-top: 3px solid #ffffff;
}

.plat--gov .plat-clause {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 0;
  transition: all 0.3s ease;
  gap: 40px;
}

.plat--gov .plat-clause:hover {
  border-bottom-color: #ffffff;
}

.plat--gov .plat-clause__content {
  flex: 1;
}

.plat--gov .plat-clause__content h3 {
  color: #ffffff;
  font-size: 28px;
  margin-bottom: 8px;
}

.plat--gov .plat-clause__content p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 16px;
  margin: 0;
}

/* Redline Stamp */
.plat--gov .plat-clause__rule {
  font-family: 'Chivo Mono', monospace;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ff3333;
  border: 2px solid #ff3333;
  padding: 12px 16px;
  border-radius: 4px;
  transform: rotate(-1deg);
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 991px) {
  .plat--gov .plat-clause {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}

/* The story-intro's signature framing: a left hairline rail and a short gold
   segment anchored bottom-right. Carries the drawing-margin motif through. */
.plat::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4.2%;
  width: 1px;
  background: rgba(20, 17, 15, 0.08);
  pointer-events: none;
}

.plat::after {
  content: '';
  position: absolute;
  right: 4.2%;
  bottom: 0;
  width: 15%;
  height: 1px;
  background: var(--story-gold, #ffcb06);
  pointer-events: none;
}

.plat--ink::before {
  background: rgba(255, 255, 255, 0.08);
}

.plat__inner {
  position: relative;
  width: min(1180px, 100%);
  margin: 0 auto;
}

/* Slash mono register labels — "P-01 / STRATORA", like the story's step labels. */
.plat-eyebrow {
  display: block;
  margin-bottom: 22px;
  font: 700 11px/1 'Chivo Mono', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a16207;
}

.plat--ink .plat-eyebrow {
  color: var(--story-gold, #ffcb06);
}

.plat-eyebrow b {
  font-weight: 700;
  color: rgba(20, 17, 15, 0.45);
}

.plat--ink .plat-eyebrow b {
  color: rgba(255, 255, 255, 0.45);
}

.plat h2 {
  margin: 0;
  max-width: 820px;
  font-family: 'Funnel Display', sans-serif;
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.plat--ink h2 {
  color: var(--story-white, #ffffff);
}

.plat-lead {
  max-width: 620px;
  margin: 24px 0 0;
  font-size: 17.5px;
  line-height: 1.62;
  color: rgba(20, 17, 15, 0.62);
}

.plat--ink .plat-lead {
  color: rgba(255, 255, 255, 0.62);
}

/* ── Definition: outcomes as a ledger register ─────────────────────────── */

.plat-outcomes {
  margin-top: 56px;
  border-top: 2px solid var(--story-ink, #14110f);
}

.plat-outcome {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 20px;
  padding: 24px 4px;
  border-bottom: 1px dashed rgba(20, 17, 15, 0.25);
  transition: background 300ms ease, padding-left 300ms ease;
}

.plat-outcome:hover {
  background: rgba(255, 255, 255, 0.65);
  padding-left: 12px;
}

.plat-outcome span {
  font: 700 11px/1 'Chivo Mono', monospace;
  letter-spacing: 0.14em;
  color: #a16207;
}

.plat-outcome h3 {
  margin: 0;
  font-family: 'Funnel Display', sans-serif;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 600;
  line-height: 1.1;
}

/* the drafting tick */
.plat-outcome::after {
  content: '';
  width: 15px;
  height: 8px;
  border-left: 2.5px solid var(--story-gold, #ffcb06);
  border-bottom: 2.5px solid var(--story-gold, #ffcb06);
  transform: rotate(-45deg);
  justify-self: end;
}

/* ── Hierarchy: platform bar + agent file cards on a connector ─────────── */

.plat-hier {
  position: relative;
  margin-top: 52px;
}

.plat-card--platform {
  position: relative;
  border: 1px solid var(--story-black, #090908);
  border-radius: 8px;
  background: var(--story-black, #090908);
  color: var(--story-white, #ffffff);
  overflow: hidden;
}

/* workspace chrome strip, like the story's workspace topbar */
.plat-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font: 700 9.5px/1 'Chivo Mono', monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.plat-topbar .plat-topbar__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--story-green, #6ce5b1);
}

.plat-topbar .plat-topbar__status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--story-green, #6ce5b1);
}

.plat-card--platform .plat-card__body {
  padding: 26px 28px 30px;
}

.plat-card--platform h3 {
  margin: 0;
  font-family: 'Funnel Display', sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.plat-card--platform .plat-role {
  margin: 8px 0 12px;
  font-family: 'Funnel Display', sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--story-gold, #ffcb06);
}

.plat-card--platform p:not(.plat-role) {
  max-width: 620px;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
}

/* connector stem from the platform down into the two agents */
.plat-hier__stem {
  position: relative;
  height: 44px;
  pointer-events: none;
}

.plat-hier__stem::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(20, 17, 15, 0.35);
}

.plat-hier__stem::after {
  content: '';
  position: absolute;
  left: 25%;
  right: 25%;
  bottom: 0;
  height: 1px;
  background: rgba(20, 17, 15, 0.35);
}

.plat-hier__agents {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.plat-card--agent {
  position: relative;
  padding: 26px 26px 28px;
  border: 1px solid var(--story-line, rgba(20, 17, 15, 0.14));
  border-radius: 8px;
  background: var(--story-white, #ffffff);
}

/* drop line from the connector into each card */
.plat-card--agent::before {
  content: '';
  position: absolute;
  top: -23px;
  left: 50%;
  width: 1px;
  height: 22px;
  background: rgba(20, 17, 15, 0.35);
}

/* node pip where the drop meets the card */
.plat-card--agent::after {
  content: '';
  position: absolute;
  top: -4px;
  left: calc(50% - 3.5px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--story-gold, #ffcb06);
  border: 1.5px solid var(--story-ink, #14110f);
}

.plat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 0;
  background: transparent !important;
  font: 700 10px/1 'Chivo Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--story-ink, #14110f);
}

.plat-chip--live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
}

.plat-card--agent h3 {
  margin: 0;
  font-family: 'Funnel Display', sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.plat-card--agent .plat-role {
  margin: 6px 0 12px;
  font-family: 'Funnel Display', sans-serif;
  font-size: 17.5px;
  font-weight: 600;
  color: #a16207;
}

.plat-card--agent p:not(.plat-role) {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(20, 17, 15, 0.62);
}

.plat-support {
  display: block;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px dashed rgba(20, 17, 15, 0.25);
  font: 700 10.5px/1.6 'Chivo Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a16207;
}

/* ── Project spine: leader lines into the record ───────────────────────── */

.plat-spine {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1.12fr) 84px minmax(0, 1fr);
  align-items: stretch;
  margin-top: 56px;
}

.plat-spine__col {
  position: relative;
  padding: 22px 22px 24px;
  border: 1px solid var(--story-line, rgba(20, 17, 15, 0.14));
  border-radius: 8px;
  background: var(--story-white, #ffffff);
}

/* folded document corner on the source columns */
.plat-spine__col--doc::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-left: 16px solid #e8e4da;
  border-top: 16px solid var(--story-paper, #f6f3ee);
  border-top-right-radius: 8px;
}

.plat-spine__col h4 {
  margin: 0 0 3px;
  font-family: 'Funnel Display', sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.plat-spine__sub {
  display: block;
  margin-bottom: 16px;
  font: 700 9.5px/1.5 'Chivo Mono', monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a16207;
}

.plat-spine__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plat-spine__col ul li {
  position: relative;
  padding: 7px 0 7px 16px;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(20, 17, 15, 0.66);
  border-bottom: 1px dashed rgba(20, 17, 15, 0.14);
}

.plat-spine__col ul li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.plat-spine__col ul li::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 0;
  width: 7px;
  height: 1.5px;
  background: var(--story-gold, #ffcb06);
}

.plat-spine__mid {
  border: 1px solid var(--story-black, #090908);
  background: var(--story-black, #090908);
  color: var(--story-white, #ffffff);
  box-shadow: 0 28px 60px rgba(9, 9, 8, 0.22);
}

/* Webflow's element-level h4 color beats inheritance — set it explicitly. */
.plat-spine__mid h4 {
  color: var(--story-white, #ffffff);
}

.plat-spine__mid .plat-spine__sub {
  color: var(--story-gold, #ffcb06);
}

.plat-spine__mid ul li {
  color: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

/* leader line: source dot ─────➤ with the agent riding it as a dark chip */
.plat-spine__arrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plat-spine__arrow::before {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 1px;
  background: rgba(20, 17, 15, 0.4);
}

.plat-spine__arrow::after {
  content: '';
  position: absolute;
  top: calc(50% - 3px);
  right: 4px;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid rgba(20, 17, 15, 0.6);
  border-right: 1.5px solid rgba(20, 17, 15, 0.6);
  transform: rotate(45deg);
}

.plat-spine__arrow--left::after {
  right: auto;
  left: 4px;
  transform: rotate(-135deg);
}

.plat-spine__arrow span {
  position: relative;
  z-index: 1;
  padding: 7px 11px;
  border-radius: 4px;
  background: rgba(7, 7, 6, 0.92);
  font: 800 10px/1 'Chivo Mono', monospace;
  letter-spacing: 0.14em;
  color: var(--story-gold, #ffcb06);
}

.plat-spine__agents {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 22px;
}

.plat-spine__agent {
  position: relative;
  padding: 16px 20px 16px 30px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(20, 17, 15, 0.66);
}

.plat-spine__agent::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 2px;
  background: var(--story-gold, #ffcb06);
}

.plat-spine__agent b {
  display: block;
  margin-bottom: 3px;
  font: 800 11px/1.6 'Chivo Mono', monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--story-ink, #14110f);
}

/* ── Governed intelligence: clauses as a contract ledger ──────────────── */

.plat-governed-lines {
  counter-reset: gov-line;
  display: grid;
  gap: 0;
  margin: 34px 0 0;
  max-width: 640px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.plat-governed-lines p {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0;
  padding: 15px 2px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
  font-family: 'Funnel Display', sans-serif;
  font-size: 21px;
  font-weight: 600;
  color: var(--story-white, #ffffff);
}

.plat-governed-lines p::before {
  content: counter(gov-line, decimal-leading-zero);
  counter-increment: gov-line;
  font: 700 11px/1 'Chivo Mono', monospace;
  letter-spacing: 0.12em;
  color: var(--story-gold, #ffcb06);
}

/* Clause register: ID column / provision / covenant line. Rows, not cards. */
.plat-clauses {
  margin-top: 0;
  border-top: 2px solid rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
}

.plat-clause {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 32px;
  padding: 28px 2px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.16);
  background: transparent !important;
  border-left: 0;
  box-shadow: none !important;
  transition: padding-left 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.plat-clause:hover {
  padding-left: 14px;
}

.plat-clause__indicator {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plat-clause__id {
  font: 700 12.5px/1 'Chivo Mono', monospace;
  letter-spacing: 0.14em;
  color: var(--story-gold, #ffcb06);
}

.plat-clause__status {
  font: 700 8.5px/1 'Chivo Mono', monospace;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  align-self: start;
  transition: color 0.2s ease;
}

.plat-clause:hover .plat-clause__status {
  color: var(--story-gold, #ffcb06);
}

.plat-clause__content {
  flex: 1;
}

.plat-clause__content h3 {
  margin: 0 0 6px;
  font-family: 'Funnel Display', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--story-white, #ffffff);
}

.plat-clause__content p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

.plat-clause__rule {
  align-self: start;
  font: 700 10.5px/1.5 'Chivo Mono', monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--story-gold, #ffcb06);
  margin-top: 6px;
}

/* ── Workflows: steps on a drafting track ──────────────────────────────── */

.plat-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 34px;
  margin-top: 56px;
}

.plat-step {
  position: relative;
  padding-top: 20px;
}

/* each step sits under its own track segment with a pip */
.plat-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  border-top: 1px dashed rgba(20, 17, 15, 0.3);
}

.plat-step::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--story-gold, #ffcb06);
  border: 1.5px solid var(--story-ink, #14110f);
}

.plat-step span {
  display: block;
  margin-bottom: 10px;
  font: 700 10.5px/1 'Chivo Mono', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a16207;
}

.plat-step h3 {
  margin: 0 0 7px;
  font-family: 'Funnel Display', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
}

.plat-step p {
  margin: 0;
  max-width: 320px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(20, 17, 15, 0.62);
}

.plat-rule-line {
  display: inline-block;
  margin: 44px 0 0;
  padding: 16px 22px;
  border: 1px dashed rgba(20, 17, 15, 0.35);
  font-family: 'Funnel Display', sans-serif;
  font-size: 18.5px;
  font-weight: 600;
  max-width: 720px;
  background: rgba(255, 255, 255, 0.5);
}

.plat-rule-line::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 2px;
  margin-right: 12px;
  vertical-align: middle;
  background: var(--story-gold, #ffcb06);
}

/* ── Learning ──────────────────────────────────────────────────────────── */

.plat-learning {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin-top: 8px;
}

.plat-learning aside {
  position: relative;
  padding: 22px 24px 22px 28px;
  border: 1px dashed rgba(20, 17, 15, 0.3);
  background: var(--story-white, #ffffff);
  font-size: 14.5px;
  line-height: 1.62;
  color: rgba(20, 17, 15, 0.7);
}

.plat-learning aside::before {
  content: 'NOTE';
  position: absolute;
  top: -9px;
  left: 18px;
  padding: 3px 8px;
  background: var(--story-ink, #14110f);
  color: var(--story-gold, #ffcb06);
  font: 800 9px/1 'Chivo Mono', monospace;
  letter-spacing: 0.18em;
}

.plat-cap-header {
  margin-bottom: 18px;
}

/* ── Agent status: the register ────────────────────────────────────────── */

.plat-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 52px;
}

.plat-status__group > span {
  display: block;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--story-ink, #14110f);
  font: 800 10.5px/1 'Chivo Mono', monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(20, 17, 15, 0.55);
}

.plat-status__agent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 18px 2px;
  border-bottom: 1px dashed rgba(20, 17, 15, 0.25);
}

.plat-status__agent h3 {
  margin: 0;
  font-family: 'Funnel Display', sans-serif;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.plat-status__agent p {
  margin: 3px 0 0;
  font-size: 13.5px;
  color: rgba(20, 17, 15, 0.6);
}

.plat-status__agent .plat-chip {
  margin-bottom: 0;
}

.plat-status__note {
  margin: 26px 0 0;
  max-width: 700px;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(20, 17, 15, 0.55);
}

/* ── Final CTA supporting line (gold panel, ink text) ──────────────────── */

.story-cta__lead {
  max-width: 620px;
  margin: 18px 0 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(20, 17, 15, 0.72);
}

/* ── Motion safety ─────────────────────────────────────────────────────── */

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

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .plat {
    padding: 78px 6%;
  }

  .plat::before,
  .plat::after {
    display: none;
  }

  .plat-outcome {
    grid-template-columns: 56px minmax(0, 1fr) 30px;
    gap: 14px;
  }

  .plat-hier__agents {
    grid-template-columns: 1fr;
  }

  .plat-hier__stem::after {
    display: none;
  }

  .plat-spine {
    grid-template-columns: 1fr;
  }

  .plat-spine__arrow {
    min-height: 64px;
  }

  .plat-spine__arrow::before {
    left: 50%;
    right: auto;
    top: 6px;
    bottom: 6px;
    width: 1px;
    height: auto;
  }

  .plat-spine__arrow::after {
    top: auto;
    bottom: 4px;
    right: auto;
    left: calc(50% - 3px);
    transform: rotate(135deg);
  }

  .plat-spine__arrow--left::after {
    bottom: auto;
    top: 4px;
    transform: rotate(-45deg);
  }

  .plat-spine__agents {
    grid-template-columns: 1fr;
  }

  .plat-learning {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .plat-clause {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 2px;
  }

  .plat-steps {
    grid-template-columns: 1fr 1fr;
    gap: 34px 26px;
  }

  .plat-status {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .plat-steps {
    grid-template-columns: 1fr;
  }
}

/* ── Skip to platform (cinematic escape hatch) ──────────────────────────
   Subtle, secondary, keyboard reachable; sits over the film's lower edge. */

.film-skip {
  position: absolute;
  left: 28px;
  bottom: 22px;
  z-index: 30;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  background: rgba(9, 9, 8, 0.55);
  font: 700 10px/1 'Chivo Mono', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.72);
  transition: color 200ms ease, border-color 200ms ease;
}

.film-skip:hover {
  color: #ffffff;
  border-color: rgba(255, 203, 6, 0.7);
}

.film-skip:focus-visible {
  outline: 2px solid #FFCB06;
  outline-offset: 3px;
  color: #ffffff;
}

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

/* ── Quiet scroll reveals (armed by JS; reduced-motion never arms) ─────── */

.plat-armed {
  opacity: 0;
  translate: 0 26px;
}

.plat-armed.plat-in {
  opacity: 1;
  translate: 0 0;
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    translate 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.plat-clause.plat-armed.plat-in:nth-of-type(2) { transition-delay: 120ms; }
.plat-clause.plat-armed.plat-in:nth-of-type(3) { transition-delay: 240ms; }

/* ── Composition variants (anti-rhyme pass) ─────────────────────────────── */

/* Small kicker line for content-led sections (spine, capabilities). */
.plat-kicker {
  margin: 0 0 40px;
  font-family: 'Funnel Display', sans-serif;
  font-size: 21px;
  font-weight: 600;
  color: var(--story-ink, #14110f);
}

.plat--tint .plat-kicker {
  text-align: center;
}

/* Governed: asymmetric split — heading rail left, clauses right. */
.plat-split {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.4fr);
  gap: 64px;
  align-items: start;
}

.plat-split__head h2 {
  font-size: clamp(30px, 3.4vw, 44px);
}

.plat-split__body .plat-clauses {
  margin-top: 0;
}

/* Canada: the page's one centered whisper. */
.plat--whisper {
  padding: 140px 7%;
  background: #C52D23;
  color: #FFFFFF;
  text-align: center;
}

.plat--whisper h2 {
  max-width: none;
  font-size: clamp(40px, 5.4vw, 72px);
  color: #FFFFFF !important;
}

.plat--whisper .plat-lead {
  max-width: 560px;
  margin: 22px auto 0;
  color: rgba(255, 255, 255, 0.9) !important;
}

.plat-whisper__line {
  display: inline-block;
  margin-top: 30px;
  font: 700 11px/1.6 'Chivo Mono', monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a16207;
}

.plat-whisper__line::before,
.plat-whisper__line::after {
  content: '';
  display: inline-block;
  width: 26px;
  height: 2px;
  margin: 0 14px;
  vertical-align: middle;
  background: var(--story-gold, #ffcb06);
}

@media (max-width: 991px) {
  .plat-split {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .plat--whisper {
    padding: 96px 6%;
  }
}

@media (max-width: 767px) {
}

/* ── Capabilities as alternating product-evidence rows ─────────────────── */

.plat-cap-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: center;
  padding: 56px 0;
  border-top: 1px solid var(--story-line, rgba(20, 17, 15, 0.14));
  margin-top: 8px;
}

.plat-cap-row:first-of-type {
  border-top: 2px solid var(--story-ink, #14110f);
  margin-top: 44px;
}

.plat-cap-row--flip .plat-cap-text {
  order: 2;
}

.plat-cap-row--flip .plat-cap-panel {
  order: 1;
}

.plat-cap-header h3 {
  margin: 14px 0 0;
  font-family: 'Funnel Display', sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.plat-cap-header .plat-role {
  margin: 4px 0 0;
  font-family: 'Funnel Display', sans-serif;
  font-size: 16.5px;
  font-weight: 600;
  color: #a16207;
}

.plat-cap-steps {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: cap-step;
}

.plat-cap-steps li {
  counter-increment: cap-step;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(20, 17, 15, 0.16);
  font-size: 14px;
  color: rgba(20, 17, 15, 0.72);
}

.plat-cap-steps li::before {
  content: counter(cap-step, decimal-leading-zero);
  font: 700 10.5px/1 'Chivo Mono', monospace;
  letter-spacing: 0.1em;
  color: #a16207;
}

.plat-cap-text .plat-support {
  border-top: 0;
  padding-top: 0;
  margin-top: 18px;
}

.plat-cap-desc {
  margin: 12px 0 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(20, 17, 15, 0.65);
}

/* ── Mockup Windows and Panels (Capabilities Section UI) ──────────────────── */

.plat-ui-mockup {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.plat-ui-window {
  background: var(--story-white, #ffffff);
  border: 1.5px solid var(--story-ink, #14110f);
  box-shadow: 6px 6px 0 var(--story-ink, #14110f);
  display: flex;
  flex-direction: column;
  height: 320px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.plat-ui-window:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--story-ink, #14110f);
}

.plat-ui-chrome {
  background: #f1ede4;
  border-bottom: 1.5px solid var(--story-ink, #14110f);
  display: flex;
  align-items: center;
  padding: 10px 14px;
  gap: 12px;
}

.plat-ui-dots {
  display: flex;
  gap: 5px;
}

.plat-ui-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--story-ink, #14110f);
  opacity: 0.35;
}

.plat-ui-title {
  font: 700 9.5px/1 'Chivo Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(20, 17, 15, 0.65);
  margin-left: auto;
}

.plat-ui-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  flex: 1;
  background: var(--story-paper, #f6f3ee);
  overflow: hidden;
}

.plat-ui-body--assay {
  grid-template-columns: 1.1fr 1fr;
}

.plat-ui-panel {
  display: flex;
  flex-direction: column;
  background: var(--story-white, #ffffff);
  border-right: 1.5px solid var(--story-ink, #14110f);
  overflow: hidden;
}

.plat-ui-panel:last-child {
  border-right: 0;
}

.plat-ui-panel-header {
  background: #fbfaf6;
  border-bottom: 1.5px solid var(--story-ink, #14110f);
  padding: 8px 12px;
  font: 700 9px/1 'Chivo Mono', monospace;
  color: var(--story-ink, #14110f);
  letter-spacing: 0.02em;
}

.plat-ui-panel-body {
  padding: 14px;
  flex: 1;
  overflow-y: auto;
}

/* HERALD specifics */
.plat-ui-panel--source {
  background: #fcfbfa;
}

.plat-ui-txt-mute {
  font-size: 11px;
  color: rgba(20, 17, 15, 0.35);
  line-height: 1.5;
  margin: 0 0 8px;
}

.plat-ui-txt-main {
  font-size: 12px;
  color: var(--story-ink, #14110f);
  line-height: 1.5;
  margin: 0 0 8px;
}

.plat-ui-mark {
  background: rgba(255, 203, 6, 0.25);
  border-left: 2.5px solid var(--story-gold, #ffcb06);
  padding: 2px 4px;
  color: var(--story-ink, #14110f);
}

.plat-ui-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  background: #fcfbfa;
  color: rgba(20, 17, 15, 0.25);
  border-right: 1.5px solid var(--story-ink, #14110f);
}

.plat-ui-connector svg {
  width: 14px;
  height: 14px;
}

.plat-ui-panel--agent {
  background: #ffffff;
}

.plat-ui-badge {
  display: inline-block;
  font: 700 7.5px/1 'Chivo Mono', monospace;
  letter-spacing: 0.08em;
  padding: 3px 6px;
  background: rgba(20, 17, 15, 0.06);
  color: var(--story-ink, #14110f);
  margin-bottom: 10px;
  border: 1px solid rgba(20, 17, 15, 0.12);
}

.plat-ui-result {
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--story-ink, #14110f);
  margin: 0 0 16px;
}

.plat-ui-result strong {
  font-weight: 700;
  color: #a16207;
  border-bottom: 1.5px solid var(--story-gold, #ffcb06);
}

.plat-ui-sources {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plat-ui-src-link {
  font-size: 10px;
  color: rgba(20, 17, 15, 0.5);
  display: flex;
  align-items: center;
  gap: 6px;
}

.plat-ui-src-link span {
  font: 700 7.5px/1 'Chivo Mono', monospace;
  background: rgba(255, 203, 6, 0.15);
  color: #8c6000;
  padding: 2.5px 4.5px;
}

/* ASSAY specifics */
.plat-ui-cad-canvas {
  position: relative;
  background: #fbfaf8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.plat-ui-cad-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.plat-ui-cad-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font: 700 7px/1 'Chivo Mono', monospace;
  background: rgba(161, 98, 7, 0.1);
  color: #a16207;
  padding: 3px 6px;
  border: 1.5px solid var(--story-ink, #14110f);
}

.plat-ui-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.plat-ui-table th {
  font: 700 8.5px/1 'Chivo Mono', monospace;
  text-transform: uppercase;
  color: rgba(20, 17, 15, 0.45);
  padding: 6px 4px 10px;
  border-bottom: 1.5px solid var(--story-ink, #14110f);
}

.plat-ui-table td {
  font-size: 11px;
  color: rgba(20, 17, 15, 0.7);
  padding: 10px 4px;
  border-bottom: 1px dashed rgba(20, 17, 15, 0.08);
}

.plat-ui-table td strong {
  font-weight: 600;
  color: var(--story-ink, #14110f);
}

.plat-ui-table-total td {
  border-top: 1.5px solid var(--story-ink, #14110f);
  border-bottom: 0;
  padding-top: 12px;
}

.plat-ui-table-total td strong {
  font-family: 'Funnel Display', sans-serif;
  font-size: 14px;
  color: var(--story-ink, #14110f);
}

@media (max-width: 991px) {
  .plat-cap-row {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 44px 0;
  }

  .plat-cap-row--flip .plat-cap-text {
    order: 1;
  }

  .plat-cap-row--flip .plat-ui-mockup {
    order: 2;
  }

  .plat-ui-window {
    height: 280px;
  }
}

/* ── New Masonry Capabilities Section ────────────────────────────────────── */

.plat-cap-grid-new {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: 64px;
  align-items: start;
  margin-top: 48px;
}

.plat-cap-left {
  position: sticky;
  top: 100px;
}

.plat-cap-title-large {
  font-family: 'Funnel Display', sans-serif;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--story-ink, #14110f);
  margin: 18px 0 32px;
}

.plat-cap-description-large {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(20, 17, 15, 0.7);
  max-width: 480px;
  margin-top: 24px;
}

.plat-cap-masonry {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.plat-cap-col-stack {
  display: flex;
  flex-direction: column;
}

.plat-cap-widget {
  background: var(--story-white, #ffffff);
  border: 1.5px solid var(--story-ink, #14110f);
  box-shadow: 4px 4px 0 var(--story-ink, #14110f);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.plat-cap-widget:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--story-ink, #14110f);
}

.plat-cap-widget__chrome {
  background: #f1ede4;
  border-bottom: 1.5px solid var(--story-ink, #14110f);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font: 700 8.5px/1 'Chivo Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--story-ink, #14110f);
}

.plat-cap-widget__chrome span:last-child {
  opacity: 0.5;
}

.plat-cap-widget__body {
  padding: 14px;
  flex: 1;
}

/* Widget Doc specifics */
.widget-doc-title {
  font: 700 10px/1 'Chivo Mono', monospace;
  color: var(--story-ink, #14110f);
  margin: 0 0 10px;
}

.widget-doc-highlight {
  font-size: 11px;
  line-height: 1.45;
  background: rgba(255, 203, 6, 0.2);
  border-left: 2.5px solid var(--story-gold, #ffcb06);
  padding: 6px 8px;
  color: var(--story-ink, #14110f);
  margin-bottom: 12px;
}

.widget-doc-foot {
  font-size: 9.5px;
  color: rgba(20, 17, 15, 0.45);
}

/* Widget Photo specifics */
.plat-cap-widget--photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.photo-glow-waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.pulse-wave {
  stroke-dasharray: 200;
  animation: draw-wave 6s linear infinite;
}

.pulse-wave-delayed {
  stroke-dasharray: 200;
  animation: draw-wave 8s linear infinite;
  animation-delay: 2s;
}

@keyframes draw-wave {
  0% {
    stroke-dashoffset: 200;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -200;
  }
}

/* Widget Assist specifics */
.widget-chat-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--story-ink, #14110f);
}

.widget-chat-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.widget-chat-opt {
  background: #fbfaf6;
  border: 1px solid var(--story-ink, #14110f);
  padding: 6px 8px;
  font-size: 9.5px;
  text-align: left;
  cursor: pointer;
  color: var(--story-ink, #14110f);
  transition: background 0.15s ease;
}

.widget-chat-opt:hover {
  background: var(--story-gold, #ffcb06);
}

.widget-chat-input {
  border: 1px solid rgba(20, 17, 15, 0.18);
  padding: 6px 10px;
  font-size: 10.5px;
  color: rgba(20, 17, 15, 0.4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fdfdfd;
}

.widget-chat-send {
  color: var(--story-ink, #14110f);
  font-weight: 700;
}

/* Widget Ledger specifics */
.widget-ledger-title {
  font-family: 'Funnel Display', sans-serif;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--story-ink, #14110f);
}

.widget-ledger-row {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: rgba(20, 17, 15, 0.6);
  padding: 6px 0;
  border-bottom: 1px dashed rgba(20, 17, 15, 0.08);
}

.widget-ledger-row b {
  color: var(--story-ink, #14110f);
}

.widget-ledger-total {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 700;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1.5px solid var(--story-ink, #14110f);
  color: var(--story-ink, #14110f);
}

/* Widget Scout specifics */
.widget-scout-title {
  font-family: 'Funnel Display', sans-serif;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--story-ink, #14110f);
}

.widget-scout-row {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(20, 17, 15, 0.08);
}

.widget-scout-row:last-child {
  border-bottom: 0;
}

.widget-scout-tag {
  font: 700 8px/1.4 'Chivo Mono', monospace;
  background: #c22e23;
  color: #ffffff;
  padding: 2px 5px;
  border-radius: 0;
  text-transform: uppercase;
  align-self: start;
}

.widget-scout-row strong {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--story-ink, #14110f);
}

.widget-scout-loc {
  display: block;
  font-size: 9.5px;
  color: rgba(20, 17, 15, 0.5);
  margin-top: 2px;
}

/* Responsive Masonry Rules */
@media (max-width: 1199px) {
  .plat-cap-grid-new {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .plat-cap-left {
    position: static;
  }
}

@media (max-width: 768px) {
  .plat-cap-masonry {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .plat-cap-col-stack {
    padding-top: 0 !important;
  }
}