/* AegisForge public site · shell styles · round 1
   The shell is light and quiet; the application appears only inside .product-frame (see css/frame.css). */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("../fonts/archivo-latin-wdth.woff2") format("woff2-variations"), url("../fonts/archivo-latin-wdth.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("../fonts/archivo-latin-wdth-italic.woff2") format("woff2-variations"), url("../fonts/archivo-latin-wdth-italic.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-wght.woff2") format("woff2-variations"), url("../fonts/jetbrains-mono-latin-wght.woff2") format("woff2"); }

:root {
  --paper: #F6F7F9; --paper-2: #ECEFF3; --paper-3: #E2E6ED;
  --ink: #0F1A2B; --ink-2: #46526B; --ink-3: #5F6B85;
  --rule: #D5DBE4; --rule-2: #C3CAD6;
  --ember: #B9532A; --ember-deep: #9E4421; --on-ember: #FFFFFF;
  --focus: #0F1A2B;
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --max: 1280px; --gutter: 24px;
  --fs-body: 1.0625rem; --lh-body: 1.55;
  --ease-out: cubic-bezier(.2,.7,.2,1); --ease-inout: cubic-bezier(.65,0,.35,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: 400 var(--fs-body)/var(--lh-body) var(--font); font-stretch: 100%; font-feature-settings: "ss01" 0; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .14em; }
a:hover { text-decoration-color: var(--ember); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
button { font: inherit; color: inherit; }
code, .mono { font-family: var(--mono); font-size: .875em; font-variant-ligatures: none; }
.skip { position: absolute; left: 8px; top: -48px; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 100; border-radius: 4px; }
.skip:focus { top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- layout ---------- */
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
section.sec { padding-block: clamp(64px, 9vw, 128px); border-top: 1px solid var(--rule); }
section.sec.tight { padding-block: clamp(40px, 6vw, 72px); }
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 20px; margin-bottom: clamp(36px, 5vw, 64px); align-items: start; }
.sec-head h2 { grid-column: 1 / span 4; margin: 0; }
.sec-head .lead { grid-column: 5 / span 7; margin: 0; font-size: 1.25rem; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.sec-head .lead + .lead { margin-top: 12px; }
@media (max-width: 900px) {
  .sec-head h2, .sec-head .lead { grid-column: 1 / -1; }
}

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 560; font-stretch: 112%; letter-spacing: -.025em; line-height: 1.02; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.125rem, 3.6vw, 3.1rem); }
h2 { font-size: clamp(1.875rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.25rem; font-stretch: 106%; letter-spacing: -.015em; line-height: 1.2; }
p { margin: 0; }
p + p { margin-top: 1em; }
.measure { max-width: 66ch; }
.small { font-size: .9375rem; color: var(--ink-2); line-height: 1.5; }
.meta { font-size: .8125rem; color: var(--ink-3); line-height: 1.5; }
.ids { font-family: var(--mono); font-size: .8125rem; font-variant-ligatures: none; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 6px; border: 1px solid transparent; text-decoration: none; font-weight: 500; font-size: 1rem; line-height: 1; cursor: pointer; transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out); }
.btn-primary { background: var(--ember); color: var(--on-ember); border-color: var(--ember); }
.btn-primary:hover { background: var(--ember-deep); border-color: var(--ember-deep); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm { padding: 10px 16px; font-size: .9375rem; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.is-scrolled { border-bottom-color: var(--rule); }
.nav-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 560; font-stretch: 108%; letter-spacing: -.01em; font-size: 1.125rem; }
.brand img { width: 26px; height: auto; }
.nav-links { display: flex; gap: 22px; margin-left: 12px; list-style: none; padding: 0; margin-block: 0; align-items: center; }
.nav-links a { text-decoration: none; font-size: .9375rem; color: var(--ink-2); padding: 6px 0; border-bottom: 1px solid transparent; display: inline-grid; line-height: 1.15; }
.nav-links a small { display: block; font-size: .6875rem; color: var(--ink-3); letter-spacing: 0; margin-top: 2px; }
.nav-links a:hover small { color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.nav-cta { margin-left: auto; }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--rule-2); border-radius: 6px; background: transparent; }
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); margin: 4px auto; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: inline-block; }
  .nav.is-open .nav-links { display: flex; flex-direction: column; gap: 0; position: absolute; left: 0; right: 0; top: 68px; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 8px var(--gutter) 16px; margin: 0; }
  .nav.is-open .nav-links a { font-size: 1.125rem; padding: 14px 0; border-bottom: 1px solid var(--rule); color: var(--ink); display: block; }
  .nav.is-open .nav-links a small { display: inline; font-size: .9375rem; margin-left: 8px; }
  .nav.is-open .nav-links li:last-child a { border-bottom: 0; }
}

/* ---------- hero ---------- */
.hero { padding-block: clamp(40px, 6vw, 88px) clamp(56px, 7vw, 96px); overflow: clip; }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: 40px; align-items: start; }
.hero-copy { grid-column: 1 / span 4; padding-top: 4px; }
.hero-copy h1 { margin-bottom: 22px; }
.hero-copy .lead { font-size: 1.125rem; line-height: 1.5; color: var(--ink-2); max-width: 40ch; }
.hero-copy .tag { font-size: .9375rem; color: var(--ink-3); margin-bottom: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-paths { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--rule); display: grid; gap: 10px; }
.hero-paths a { text-decoration: none; display: flex; align-items: baseline; gap: 12px; font-size: 1rem; color: var(--ink); padding: 6px 0; }
.hero-paths a .k { color: var(--ink-3); font-size: .875rem; min-width: 2.6em; }
.hero-paths a:hover .t { text-decoration: underline; text-decoration-color: var(--ember); text-underline-offset: .14em; }
.hero-stage { grid-column: 5 / span 8; position: relative; }
@media (min-width: 1400px) { .hero-stage { margin-right: calc(-1 * min(140px, (100vw - var(--max)) / 2 - 24px)); } }
@media (max-width: 980px) { .hero-copy, .hero-stage { grid-column: 1 / -1; } .hero-stage { margin-right: 0; } }

/* the record line under the hero window */
.record { margin-top: 14px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 10px 0 0; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: .8125rem; color: var(--ink-2); min-height: 40px; }
.record .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember) 18%, transparent); }
.record .line { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 640px) { .record { font-size: .75rem; } .record .line { white-space: normal; } }
.record .line b { color: var(--ink); font-weight: 500; }
.record .replay { background: none; border: 1px solid var(--rule-2); border-radius: 4px; padding: 5px 9px; font: 500 .75rem/1 var(--font); color: var(--ink-2); cursor: pointer; }
.record .replay:hover { border-color: var(--ink); color: var(--ink); }
.record.is-idle .dot { background: var(--ink-3); box-shadow: none; }

/* ---------- four words ---------- */
.four { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.four > div { padding: 28px 24px 28px 0; border-left: 1px solid var(--rule); padding-left: 24px; }
.four ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.four li { font-size: .9rem; color: var(--ink-2); line-height: 1.45; padding-left: 14px; position: relative; text-wrap: pretty; }
.four li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 1.5px; background: var(--ink-3); }
.four > div:first-child { border-left: 0; padding-left: 0; }
.four h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 10px; }
.four p { color: var(--ink-2); font-size: .9875rem; line-height: 1.5; text-wrap: pretty; }
@media (max-width: 900px) { .four { grid-template-columns: 1fr 1fr; } .four > div:nth-child(3) { border-left: 0; padding-left: 0; } .four > div:nth-child(n+3) { border-top: 1px solid var(--rule); } }
@media (max-width: 520px) { .four { grid-template-columns: 1fr; } .four > div { border-left: 0; padding-left: 0; } .four > div + div { border-top: 1px solid var(--rule); } }

/* ---------- role lists (definition lists) ---------- */
.roles { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: 48px; align-items: start; }
.roles .dl { grid-column: 1 / span 5; }
.roles .stage { grid-column: 6 / span 7; display: grid; gap: 28px; }
.roles.flip .dl { grid-column: 8 / span 5; grid-row: 1; }
.roles.flip .stage { grid-column: 1 / span 7; grid-row: 1; }
dl.def { margin: 0; border-top: 1px solid var(--rule); }
dl.def > div { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
dl.def dt { margin: 0; font-weight: 560; font-stretch: 106%; letter-spacing: -.01em; }
dl.def dd { margin: 0; color: var(--ink-2); font-size: .9875rem; line-height: 1.5; text-wrap: pretty; }
dl.def dd ul { margin: 8px 0 0; padding-left: 1.1em; }
dl.def dd li + li { margin-top: 4px; }
@media (max-width: 980px) {
  .roles .dl, .roles .stage, .roles.flip .dl, .roles.flip .stage { grid-column: 1 / -1; grid-row: auto; }
  dl.def > div { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Aegis list and guardrails ---------- */
.two-col { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: 32px; }
.two-col > .a { grid-column: 1 / span 6; }
.two-col > .b { grid-column: 7 / span 6; }
@media (max-width: 900px) { .two-col > .a, .two-col > .b { grid-column: 1 / -1; } }
.plain { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.plain li { padding: 16px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 1fr; gap: 4px; }
.plain li b { font-weight: 560; font-stretch: 106%; letter-spacing: -.01em; }
.plain li span { color: var(--ink-2); font-size: .9875rem; line-height: 1.5; text-wrap: pretty; }
.rule-sentence { font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 560; font-stretch: 110%; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; max-width: 22ch; }
.never { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: var(--gutter); }
.never li { break-inside: avoid; padding: 10px 0 10px 18px; position: relative; color: var(--ink-2); font-size: .9875rem; line-height: 1.5; }
.never li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 1.5px; background: var(--ink-3); }
@media (max-width: 700px) { .never { columns: 1; } }

/* ---------- plans ---------- */
.plans { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .9875rem; }
.plans th, .plans td { text-align: left; vertical-align: top; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule); }
.plans thead th { border-bottom: 1px solid var(--ink); padding-bottom: 14px; }
.plans thead th h3 { margin-bottom: 6px; }
.plans thead th .small { font-weight: 400; }
.plans th[scope="row"] { font-weight: 500; color: var(--ink); width: 18%; }
.plans td { color: var(--ink-2); line-height: 1.5; }
.plans td .yes { color: var(--ink); font-weight: 500; }
.plans td .no { color: var(--ink-3); }
.plans tfoot td { border-bottom: 0; padding-top: 22px; }
.plans-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 900px) { .plans { min-width: 760px; } }

/* ---------- tour ---------- */
.tour { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: 28px; align-items: start; }
.tour-steps { grid-column: 1 / span 4; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.tour-steps li { border-bottom: 1px solid var(--rule); }
.tour-steps button { width: 100%; text-align: left; background: none; border: 0; padding: 16px 0 16px 0; display: grid; grid-template-columns: 2em 1fr; gap: 8px; cursor: pointer; color: var(--ink-2); }
.tour-steps button .n { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); padding-top: .35em; }
.tour-steps button b { display: block; font-weight: 560; font-stretch: 106%; letter-spacing: -.01em; color: var(--ink); font-size: 1.0625rem; }
.tour-steps button span.d { display: block; font-size: .9375rem; line-height: 1.45; margin-top: 4px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s var(--ease-inout), opacity .25s; }
.tour-steps li.is-active button span.d { max-height: 8em; opacity: 1; }
.tour-steps li.is-active { box-shadow: inset 3px 0 0 var(--ember); }
.tour-steps li.is-active button { padding-left: 14px; }
.tour-steps .bar { height: 2px; background: var(--rule); margin: 0 0 0 0; overflow: hidden; }
.tour-steps .bar i { display: block; height: 100%; width: 0; background: var(--ember); }
.tour-steps li.is-active .bar i { animation: tourbar var(--tour-ms, 7000ms) linear forwards; }
.tour.is-paused .tour-steps li.is-active .bar i { animation-play-state: paused; }
@keyframes tourbar { from { width: 0 } to { width: 100% } }
.tour-stage { grid-column: 5 / span 8; }
.tour-stage .product-frame { display: none; }
.tour-stage .product-frame.is-active { display: block; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.tour-foot .meta { margin: 0; }
.tour-ctrl { display: flex; gap: 8px; }
.tour-ctrl button { background: none; border: 1px solid var(--rule-2); border-radius: 4px; padding: 6px 10px; font: 500 .8125rem/1 var(--font); color: var(--ink-2); cursor: pointer; }
.tour-ctrl button:hover { border-color: var(--ink); color: var(--ink); }
@media (max-width: 980px) {
  .tour-steps { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 0; column-gap: 12px; }
  .tour-steps li { border-bottom: 0; border-top: 1px solid var(--rule); }
  .tour-steps li.is-active { box-shadow: none; }
  .tour-steps li.is-active button { padding-left: 0; }
  .tour-steps button { grid-template-columns: 1fr; padding: 12px 0; }
  .tour-steps button .n { display: none; }
  .tour-steps button b { font-size: .9375rem; }
  .tour-steps button span.d { display: none; }
  .tour-stage { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 560px) { .tour-steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---------- forms ---------- */


/* ---------- closing + footer ---------- */
.closing { padding-block: clamp(64px, 9vw, 120px); border-top: 1px solid var(--rule); }
.closing .in { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: 24px; align-items: end; }
.closing h2 { grid-column: 1 / span 8; }
.closing .act { grid-column: 9 / span 4; display: flex; justify-content: flex-end; }
@media (max-width: 900px) { .closing h2, .closing .act { grid-column: 1 / -1; } .closing .act { justify-content: flex-start; } }
footer { border-top: 1px solid var(--rule); padding: 48px 0 40px; background: var(--paper-2); }
.foot { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: 28px; }
.foot .about { grid-column: 1 / span 5; }
.foot .about .brand { margin-bottom: 14px; }
.foot nav { grid-column: 7 / span 3; }
.foot nav + nav { grid-column: 10 / span 3; }
.foot nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot nav a { text-decoration: none; font-size: .9375rem; color: var(--ink-2); }
.foot nav a:hover { color: var(--ink); text-decoration: underline; }
.foot nav h4 { margin: 0 0 12px; font-size: .9375rem; font-weight: 560; }
.foot .legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 24px; border-top: 1px solid var(--rule-2); font-size: .8125rem; color: var(--ink-3); }
@media (max-width: 900px) { .foot .about, .foot nav, .foot nav + nav { grid-column: 1 / -1; } }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .life2-list li, .life2-track i, .stage .step, .cap .fig *, .cap .more, .plan { transition: none !important; animation: none !important; }
  .stage .step, .plays .step { opacity: 1 !important; transform: none !important; }
  .pf-path .pfd-q, .pf-path .pfd-a, .pf-path .pfd-item, .pf-path .pfd-confirm { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tour-steps li.is-active .bar i { animation: none; width: 100%; }
  .tour-steps button span.d { transition: none; }
  .btn, .nav, .record .replay { transition: none; }
}

/* ---------- lifecycle, scroll-driven ---------- */
.life2 { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); align-items: stretch; }
.life2-rail { grid-column: 1 / span 4; }
.life2-sticky { position: sticky; top: 96px; display: grid; grid-template-columns: 1fr 2px; column-gap: 20px; }
.life2-list { list-style: none; margin: 0; padding: 0; }
.life2-list li { display: grid; grid-template-columns: 2.2em 1fr; column-gap: 6px; padding: 12px 0; color: var(--ink-3); transition: color .3s var(--ease-out); }
.life2-list li .n { font-family: var(--mono); font-size: .75rem; padding-top: .3em; }
.life2-list li b { font-weight: 560; font-stretch: 106%; letter-spacing: -.01em; font-size: 1.0625rem; color: var(--ink-3); transition: color .3s var(--ease-out); }
.life2-list li .d { grid-column: 2; font-size: .9375rem; line-height: 1.45; color: var(--ink-2); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s var(--ease-inout), opacity .3s var(--ease-out), margin .4s var(--ease-inout); }
.life2-list li.is-on { color: var(--ink); }
.life2-list li.is-on b { color: var(--ink); }
.life2-list li.is-on .d { max-height: 8em; opacity: 1; margin-top: 4px; }
.life2-list li.is-done b { color: var(--ink-2); }
.life2-track { position: relative; background: var(--rule); border-radius: 1px; }
.life2-track i { position: absolute; left: 0; top: 0; width: 100%; height: 0%; background: var(--ember); border-radius: 1px; transition: height .5s var(--ease-inout); }
.life2-stages { grid-column: 6 / span 7; display: grid; gap: clamp(48px, 7vw, 96px); }
.stage header { display: grid; grid-template-columns: 2.2em 1fr; column-gap: 6px; margin-bottom: 18px; }
.stage header .n { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); padding-top: .45em; }
.stage header h3 { font-size: 1.375rem; }
.stage header p { grid-column: 2; margin-top: 8px; color: var(--ink-2); font-size: 1rem; line-height: 1.5; max-width: 56ch; text-wrap: pretty; }
.stage .step, .plays .step { opacity: 0; transform: translateY(4px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.stage.is-on .step, .plays.is-on .step { opacity: 1; transform: none; }
.stage.is-on .step.s1, .plays.is-on .step.s1 { transition-delay: .15s } .stage.is-on .step.s2, .plays.is-on .step.s2 { transition-delay: .55s } .stage.is-on .step.s3, .plays.is-on .step.s3 { transition-delay: .95s } .stage.is-on .step.s4, .plays.is-on .step.s4 { transition-delay: 1.35s }
.stage .step .pf-bar i, .plays .step .pf-bar i { transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-inout); }
.stage.is-on .step .pf-bar i, .plays.is-on .step .pf-bar i { transform: none; }
.stage.is-on .step.s1 .pf-bar i, .plays.is-on .step.s1 .pf-bar i { transition-delay: .3s } .stage.is-on .step.s2 .pf-bar i, .plays.is-on .step.s2 .pf-bar i { transition-delay: .6s } .stage.is-on .step.s3 .pf-bar i, .plays.is-on .step.s3 .pf-bar i { transition-delay: .9s }
@media (max-width: 980px) {
  .life2-rail { display: none; }
  .life2-stages { grid-column: 1 / -1; gap: 56px; }
}

/* ---------- capability cards ---------- */
.cap-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.cap { position: relative; border: 1px solid var(--rule); background: #fff; border-radius: 8px; padding: 22px 22px 20px; display: grid; grid-template-rows: auto auto auto 1fr; gap: 10px; cursor: default; transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out); outline-offset: 3px; }
.cap:hover, .cap:focus-visible, .cap.is-open { border-color: var(--ink); }
.cap .fig { width: 100%; height: auto; aspect-ratio: 16 / 10; display: block; margin-bottom: 6px; }
.cap h3 { font-size: 1.125rem; }
.cap .one { color: var(--ink-2); font-size: .9375rem; line-height: 1.5; text-wrap: pretty; }
.cap .more { color: var(--ink); font-size: .9375rem; line-height: 1.5; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s var(--ease-inout), opacity .3s var(--ease-out), margin .4s var(--ease-inout); text-wrap: pretty; }
.cap:hover .more, .cap:focus-visible .more, .cap.is-open .more { max-height: 12em; opacity: 1; margin-top: 2px; }
/* figure drawing */
.cap .fig .pg { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.cap .fig .pg.dash { stroke-dasharray: 4 3; stroke: var(--ink-3); }
.cap .fig .ln { stroke: var(--ink-3); stroke-width: 1.5; stroke-linecap: round; }
.cap .fig .ln.faint { stroke: var(--rule-2); }
.cap .fig .ln2 { fill: var(--rule); }
.cap .fig .hl { fill: #FFE9A8; stroke: none; transform-origin: left center; transform: scaleX(0); transition: transform .5s var(--ease-inout) .1s; }
.cap:hover .fig .hl, .cap:focus-visible .fig .hl, .cap.is-open .fig .hl { transform: none; }
.cap .fig .arrow { stroke: var(--ink); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset .6s var(--ease-inout); }
.cap .fig .arrow.dashed { stroke-dasharray: 3 3; stroke-dashoffset: 0; stroke: var(--ink-3); }
.cap .fig .arrow.a4 { stroke-dasharray: 140; stroke-dashoffset: 140; }
.cap:hover .fig .arrow, .cap:focus-visible .fig .arrow, .cap.is-open .fig .arrow { stroke-dashoffset: 0; }
.cap:hover .fig .a2, .cap.is-open .fig .a2 { transition-delay: .2s } .cap:hover .fig .a3, .cap.is-open .fig .a3 { transition-delay: .4s } .cap:hover .fig .a4, .cap.is-open .fig .a4 { transition-delay: .7s }
.cap .fig .dot { fill: var(--ember); }
.cap .fig .node { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.cap:hover .fig .node, .cap.is-open .fig .node { fill: var(--ink); transition: fill .3s; }
.cap:hover .fig .n2, .cap.is-open .fig .n2 { transition-delay: .25s } .cap:hover .fig .n3, .cap.is-open .fig .n3 { transition-delay: .45s } .cap:hover .fig .n4, .cap.is-open .fig .n4 { transition-delay: .65s }
.cap .fig .lbl { font: 500 9px var(--mono); fill: var(--ink-2); }
.cap .fig .lbl.sm { font-size: 7.5px; fill: var(--ink-3); }
.cap .fig .num { font: 560 30px var(--font); fill: var(--ink); letter-spacing: -.02em; }
.cap .fig .den { font-size: 16px; fill: var(--ink-3); font-weight: 400; }
.cap .fig .build { opacity: 0; transition: opacity .3s var(--ease-out); }
.cap:hover .fig .build, .cap:focus-visible .fig .build, .cap.is-open .fig .build { opacity: 1; }
.cap:hover .fig .b1, .cap.is-open .fig .b1 { transition-delay: .05s } .cap:hover .fig .b2, .cap.is-open .fig .b2 { transition-delay: .15s } .cap:hover .fig .b3, .cap.is-open .fig .b3 { transition-delay: .25s } .cap:hover .fig .b4, .cap.is-open .fig .b4 { transition-delay: .35s } .cap:hover .fig .b5, .cap.is-open .fig .b5 { transition-delay: .5s }
@media (max-width: 980px) { .cap-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .cap-grid { grid-template-columns: 1fr; } .cap .fig { max-width: 220px; } }

/* ---------- quiet band ---------- */
.band { background: var(--paper-2); padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--rule); }
.rules { margin: 0; padding: 0; list-style: none; counter-reset: r; border-top: 1px solid var(--rule-2); }
.rules li { counter-increment: r; position: relative; display: block; padding: 14px 0 14px 2.8em; border-bottom: 1px solid var(--rule-2); color: var(--ink-2); font-size: .9875rem; line-height: 1.5; text-wrap: pretty; }
.rules li::before { content: counter(r, decimal-leading-zero); position: absolute; left: 0; top: 14px; font-family: var(--mono); font-size: .75rem; color: var(--ink-3); padding-top: .35em; }
.rules li b { color: var(--ink); font-weight: 560; }

/* ---------- plan cards ---------- */
.plan-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; align-items: stretch; }
.plan { display: grid; grid-template-rows: auto 1fr auto; gap: 18px; border: 1px solid var(--rule); background: #fff; border-radius: 8px; padding: 24px 22px 22px; transition: border-color .2s var(--ease-out); }
.plan:hover { border-color: var(--ink); }
.plan header h3 { font-size: 1.375rem; margin-bottom: 8px; }
.plan header p { color: var(--ink-2); font-size: .9375rem; line-height: 1.45; text-wrap: pretty; }
.plan-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.plan-rows li { display: grid; grid-template-columns: 14px 1fr; column-gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: .9rem; line-height: 1.4; }
.plan-rows li b { font-weight: 500; color: var(--ink); display: block; }
.plan-rows li span { color: var(--ink-2); display: block; grid-column: 2; }
.plan-rows li::before { content: ""; width: 10px; height: 10px; margin-top: .3em; border-radius: 50%; border: 1.5px solid var(--ink-3); grid-row: 1 / span 2; }
.plan-rows li.y::before { background: var(--ink); border-color: var(--ink); }
.plan-rows li.n b { color: var(--ink-3); } .plan-rows li.n span { color: var(--ink-3); }
.plan .btn { justify-self: start; }
.plan.lead-plan { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.plan.lead-plan header p, .plan.lead-plan .plan-rows li span { color: #B8C1D1; }
.plan.lead-plan .plan-rows, .plan.lead-plan .plan-rows li { border-color: #2A364A; }
.plan.lead-plan .plan-rows li b { color: var(--paper); }
.plan.lead-plan .plan-rows li.y::before { background: var(--ember); border-color: var(--ember); }
@media (max-width: 1100px) { .plan-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .plan-grid { grid-template-columns: 1fr; } }

/* ---------- Front Door demonstration ---------- */
.fd-wrap { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: 28px; align-items: start; }
.fd-wrap .product-frame { grid-column: 1 / span 8; }
.fd-notes { grid-column: 9 / span 4; display: grid; gap: 18px; padding-top: 6px; }
.fd-notes p b { color: var(--ink); font-weight: 560; display: block; margin-bottom: 2px; }
@media (max-width: 1100px) { .fd-wrap .product-frame, .fd-notes { grid-column: 1 / -1; } .fd-notes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .fd-notes { grid-template-columns: 1fr; } }

/* ---------- roles: copy scrolls, the screen follows ---------- */
.roles2 { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); align-items: stretch; }
.roles2-copy { grid-column: 1 / span 5; }
.roles2-stage { grid-column: 6 / span 7; }
.roles2-sticky { position: sticky; top: 96px; }
.roles2-stage { align-self: stretch; }
.life2-rail { align-self: stretch; }
.roles2-sticky .pf-role { display: none; }
.roles2-sticky .pf-role.is-active { display: block; animation: rolein .5s var(--ease-out); }
@keyframes rolein { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.role { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; border-top: 1px solid var(--rule); transition: opacity .3s var(--ease-out); }
.role:first-child { border-top: 0; }
.role h3 { font-size: 1.625rem; margin-bottom: 10px; color: var(--ink-3); transition: color .3s var(--ease-out); }
.role p { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.5; max-width: 44ch; }
.role ul { margin: 14px 0 0; padding-left: 1.1em; color: var(--ink-2); font-size: .9875rem; line-height: 1.5; display: grid; gap: 6px; max-width: 46ch; }
.role.is-on h3 { color: var(--ink); }
.role-slot { display: none; }
@media (max-width: 980px) {
  .roles2-copy, .roles2-stage { grid-column: 1 / -1; }
  .roles2-stage { display: none; }
  .role { min-height: 0; padding: 32px 0; }
  .role h3 { color: var(--ink); }
  .role-slot { display: block; margin-top: 22px; }
  .role-slot .pf-role { display: block; }
}

/* ---------- Pathfinder demonstration ---------- */
.pfd-wrap { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: 28px; align-items: start; }
.pfd-wrap .product-frame { grid-column: 1 / -1; }
.pfd-notes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; padding-top: 6px; }
.pfd-notes p b { color: var(--ink); font-weight: 560; display: block; margin-bottom: 2px; }
@media (max-width: 1100px) { .pfd-notes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pfd-notes { grid-template-columns: 1fr; } }

/* ---------- plan strips and card variants ---------- */
.plan .when { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 6px; }
.plan .when .w { height: 6px; display: block; background: var(--rule-2); }
.plan .when .w.on { background: var(--ember); }
.plan .when .w.dim { background: var(--rule-2); }
.plan .when .w.keep { background: var(--ink-3); }
.plan .when .w.dash { background: repeating-linear-gradient(90deg, var(--ember) 0 10px, transparent 10px 16px); }
.plan .when em { flex-basis: 100%; font-style: normal; font-size: .8125rem; color: var(--ink-3); margin-top: 8px; }
.plan.lead-plan .when em { color: #B8C1D1; }
.plan.lead-plan .when .w.on { background: var(--ember); }
.plan.plan-basic { background: var(--paper-2); }
.plan.plan-talk { border-style: dashed; border-color: var(--rule-2); }
.plan.plan-talk:hover { border-color: var(--ink); }

/* ---------- film bar (shell side) ---------- */
.film { display: grid; gap: 14px; }
.film-bar { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px; }
.film-btn { width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--rule-2); background: #fff; display: grid; place-items: center; cursor: pointer; }
.film-btn:hover { border-color: var(--ink); }
.film-btn svg { width: 18px; height: 18px; fill: var(--ink); }
.film-btn .ic-pause { display: none; }
.film[data-state="playing"] .film-btn#filmPlay .ic-play { display: none; }
.film[data-state="playing"] .film-btn#filmPlay .ic-pause { display: block; }
.film-track { position: relative; height: 40px; cursor: pointer; }
.film-track::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 4px; background: var(--rule); border-radius: 2px; }
.film-track i { position: absolute; left: 0; top: 8px; height: 4px; width: 0; background: var(--ember); border-radius: 2px; }
.film-chapters { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; top: 0; height: 40px; }
.film-chapters li { position: absolute; top: 0; }
.film-chapters button { position: relative; background: none; border: 0; padding: 18px 0 0; font: 500 .75rem/1.2 var(--font); color: var(--ink-3); cursor: pointer; white-space: nowrap; }
.film-chapters button::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink-3); }
.film-chapters li.is-done button::before { border-color: var(--ember); background: var(--ember); }
.film-chapters li.is-on button { color: var(--ink); }
.film-chapters li.is-on button::before { border-color: var(--ember); background: var(--paper); }
.film-chapters button:hover { color: var(--ink); }
.film-chapters button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }
.film-time { font-family: var(--mono); font-size: .8125rem; color: var(--ink-2); min-width: 7.5em; text-align: right; }
.film-cap { margin: 0; min-height: 1.6em; font-size: 1.0625rem; color: var(--ink); text-wrap: pretty; }
@media (max-width: 760px) {
  .film-chapters button { font-size: 0; padding-top: 0; }
  .film-chapters button::before { top: 4px; }
  .film-bar { grid-template-columns: auto 1fr auto; }
  .film-time { display: none; }
}

/* ---------- navy bands: depth, lighting, the product as the light source ---------- */
.band-navy { background: radial-gradient(120% 80% at 70% 0%, #1B2A45 0%, #101B2E 45%, #0C1526 100%); color: #E8ECF1; border-top: 0; position: relative; }
.band-navy::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(232,236,241,.25), transparent); }
.band-navy h2, .band-navy h3 { color: #F3F5F8; }
.band-navy .lead, .band-navy .small { color: #B8C1D1; }
.band-navy .meta { color: #8E99AC; }
.band-navy .product-frame { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 90px -40px rgba(0,0,0,.8), 0 0 120px -40px rgba(185,83,42,.25); }
.band-navy + .sec { border-top: 0; }

/* ---------- product moments ---------- */
.moment-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: 28px; align-items: start; }
.moment-stage { grid-column: 1 / span 8; }
.moment-steps { grid-column: 9 / span 4; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); align-self: stretch; }
.band-navy .moment-steps { border-top-color: rgba(232,236,241,.14); }
.moment-grid.flip .moment-steps { grid-column: 1 / span 4; grid-row: 1; }
.moment-grid.flip .moment-stage { grid-column: 5 / span 8; grid-row: 1; }
.moment-steps li { padding: 16px 0 16px 20px; border-bottom: 1px solid var(--rule); position: relative; color: var(--ink-3); transition: color .3s var(--ease-out); }
.band-navy .moment-steps li { border-bottom-color: rgba(232,236,241,.14); color: #7F8BA3; }
.moment-steps li::before { content: ""; position: absolute; left: 0; top: 22px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.moment-steps li b { display: block; font-weight: 560; font-stretch: 106%; letter-spacing: -.01em; font-size: 1.0625rem; color: inherit; }
.moment-steps li span { display: block; font-size: .9375rem; line-height: 1.45; margin-top: 4px; }
.moment-steps li.is-on { color: var(--ink); }
.band-navy .moment-steps li.is-on { color: #F3F5F8; }
.moment-steps li.is-on::before { background: var(--ember); border-color: var(--ember); }
.moment-steps li.is-on span { color: var(--ink-2); }
.band-navy .moment-steps li.is-on span { color: #C9D1DE; }
.moment-steps li.is-done { color: var(--ink-2); }
.band-navy .moment-steps li.is-done { color: #A7B1C4; }
.moment-steps li.is-done::before { background: currentColor; }
.moment-cap { margin: 12px 0 0; font-size: 1.0625rem; min-height: 1.6em; color: var(--ink); text-wrap: pretty; }
.band-navy .moment-cap { color: #E8ECF1; }
@media (max-width: 1100px) {
  .moment-stage, .moment-steps, .moment-grid.flip .moment-stage, .moment-grid.flip .moment-steps { grid-column: 1 / -1; grid-row: auto; }
  .moment-steps { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 0; column-gap: 18px; }
  .moment-steps li { border-top: 1px solid var(--rule); border-bottom: 0; }
  .band-navy .moment-steps li { border-top-color: rgba(232,236,241,.14); }
}

/* ---------- the sequence: pick a role; the text appears on the left, the stage plays on the right ---------- */
.seq-nav { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 22px; }
.seq-nav button { text-align: left; background: rgba(255,255,255,.03); border: 1px solid rgba(232,236,241,.14); border-radius: 8px; padding: 14px 16px; color: #B8C1D1; cursor: pointer; display: grid; grid-template-columns: 1.6em 1fr; column-gap: 8px; transition: border-color .2s, background-color .2s, transform .2s; }
.seq-nav button .n { font-family: var(--mono); font-size: .75rem; color: #7F8BA3; padding-top: .3em; }
.seq-nav button b { font-weight: 560; font-stretch: 106%; letter-spacing: -.01em; color: #E8ECF1; font-size: 1.0625rem; }
.seq-nav button small { grid-column: 2; font-size: .8125rem; color: #8E99AC; margin-top: 2px; }
.seq-nav button:hover { border-color: rgba(232,236,241,.4); background: rgba(255,255,255,.05); }
.seq-nav button[aria-selected="true"] { border-color: var(--ember); background: rgba(185,83,42,.14); }
.seq-nav button[aria-selected="true"] .n { color: #F08A5D; }
.seq-nav button:focus-visible { outline: 2px solid #E8ECF1; outline-offset: 2px; }
.seq-body { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: 20px; align-items: start; }
.seq-narr { grid-column: 1 / span 3; min-height: 12em; }
.seq-stage { grid-column: 4 / span 9; }
.seq-sticky { position: static; }
.seq-sticky .pf-seq { display: none; }
.seq-sticky .pf-seq.is-active { display: block; animation: rolein .45s var(--ease-out); }
.seq-step { display: none; padding: 6px 0 0; }
.seq-step.is-on { display: block; animation: popin .45s var(--ease-out); }
@keyframes popin { from { opacity: 0; transform: translateX(-8px) } to { opacity: 1; transform: none } }
.seq-step h3 { font-size: 1.5rem; margin-bottom: 10px; color: #F3F5F8; }
.seq-step p { color: #B8C1D1; font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.seq-step .seq-event { margin-top: 16px; padding: 10px 12px; border-left: 2px solid var(--ember); color: #E8ECF1; font-size: .9375rem; background: rgba(185,83,42,.08); border-radius: 0 6px 6px 0; }
.seq-foot { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; margin-top: 18px; }
.seq-cap { margin: 0; color: #E8ECF1; font-size: 1rem; }
.seq-progress { width: 160px; height: 4px; background: rgba(232,236,241,.14); border-radius: 2px; overflow: hidden; }
.seq-progress i { display: block; height: 100%; background: var(--ember); transition: width .4s var(--ease-inout); }
.seq-count { font-family: var(--mono); font-size: .8125rem; color: #8E99AC; }
@media (max-width: 980px) {
  .seq-narr, .seq-stage { grid-column: 1 / -1; }
  .seq-narr { order: 2; min-height: 0; }
  .seq-stage { order: 1; }
  .seq-nav { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .seq-nav button small { display: none; }
  .seq-nav button { padding: 10px 12px; }
  .seq-foot { grid-template-columns: 1fr auto; }
  .seq-progress { display: none; }
}
@media (prefers-reduced-motion: reduce) { .seq-step.is-on, .seq-sticky .pf-seq.is-active { animation: none; } }

/* film: sound button state */
#filmSound[aria-pressed="true"] svg { fill: var(--ember); }

/* ---------- Front Door conversation ---------- */
.fd6-wrap { display: grid; gap: 14px; }
.fd6-notes { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; margin-top: 18px; }
.fd6-notes p b { color: var(--ink); font-weight: 560; display: block; margin-bottom: 2px; }
@media (max-width: 1100px) { .fd6-notes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .fd6-notes { grid-template-columns: 1fr; } }
.seq-foot .seq-auto { background: none; border: 1px solid rgba(232,236,241,.25); border-radius: 4px; padding: 5px 9px; font: 500 .75rem/1 var(--font); color: #B8C1D1; cursor: pointer; }
.seq-foot .seq-auto:hover { border-color: #E8ECF1; color: #E8ECF1; }
.seq-foot { grid-template-columns: 1fr auto auto auto; }

/* ---------- capability tiles: depth, a staggered entrance, and a small loop on hover ---------- */
.cap { transition: border-color .2s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.cap:hover, .cap.is-open, .cap:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(15,26,43,.45), 0 0 0 1px var(--ink); border-color: var(--ink); }
.cap-grid .cap { opacity: 0; transform: translateY(10px); }
.cap-grid.is-in .cap { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), border-color .2s, box-shadow .25s; }
.cap-grid.is-in li:nth-child(2) .cap { transition-delay: .08s } .cap-grid.is-in li:nth-child(3) .cap { transition-delay: .16s } .cap-grid.is-in li:nth-child(4) .cap { transition-delay: .24s } .cap-grid.is-in li:nth-child(5) .cap { transition-delay: .32s } .cap-grid.is-in li:nth-child(6) .cap { transition-delay: .4s }
.cap-grid.is-in .cap:hover, .cap-grid.is-in .cap.is-open { transform: translateY(-3px); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .cap-grid .cap { opacity: 1; transform: none; } .cap:hover { transform: none; } }

/* ---------- kicker, capability tag ---------- */
.kicker { font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; }
.band-navy .kicker { color: #8E99AC; }
.cap { overflow: visible; container-type: inline-size; }
.cap-tag { position: absolute; top: 12px; right: 12px; z-index: 2; font-family: var(--mono); font-size: .6875rem; letter-spacing: .04em; color: var(--ember); border: 1px solid color-mix(in srgb, var(--ember) 50%, transparent); background: #fff; border-radius: 4px; padding: 3px 7px; }
.cap .cap-shot { margin-bottom: 4px; }

/* ---------- safeguards band ---------- */
.sg-head { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: 28px; align-items: start; }
.sg-head > .a { grid-column: 1 / span 5; }
.sg-head > .b { grid-column: 6 / span 7; }
.sg-head h2 { margin: 0 0 18px; font-size: clamp(2rem, 3.4vw, 2.75rem); }
.sg-head .lead { font-size: 1.125rem; line-height: 1.5; }
.sg-head .lead + .lead { margin-top: 12px; }
.sg-grid { list-style: none; margin: clamp(48px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.sg-grid li { position: relative; border: 1px solid rgba(232,236,241,.12); background: rgba(255,255,255,.035); border-radius: 8px; padding: 20px 20px 18px; display: grid; grid-template-rows: auto auto 1fr; gap: 10px; transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out), transform .25s var(--ease-out); }
.sg-grid li:hover { border-color: rgba(232,236,241,.35); background: rgba(255,255,255,.06); transform: translateY(-2px); }
.sg-grid svg { width: 26px; height: 26px; fill: none; stroke: var(--ember); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sg-grid svg .f { fill: var(--ember); stroke: none; }
.sg-grid svg .s { stroke: #7FD1A8; }
.sg-grid h3 { font-size: 1.0625rem; margin: 2px 0 0; color: #F3F5F8; }
.sg-grid p { margin: 0; font-size: .9375rem; line-height: 1.5; color: #B8C1D1; text-wrap: pretty; }
.sg-grid li::before { content: counter(sg, decimal-leading-zero); counter-increment: sg; position: absolute; top: 18px; right: 18px; font-family: var(--mono); font-size: .75rem; color: #6E7A8C; }
.sg-grid { counter-reset: sg; }
.sg-contrast { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: 28px; margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid rgba(232,236,241,.14); }
.sg-contrast .col { grid-column: span 6; }
.sg-contrast h3 { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; margin: 0 0 14px; }
.sg-contrast h3 i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sg-contrast .aegis-col h3 i { background: #C8B8EE; }
.sg-contrast .you-col h3 i { background: var(--ember); }
.sg-contrast ul { margin: 0; padding: 0; list-style: none; }
.sg-contrast li { padding: 10px 0 10px 18px; position: relative; color: #C9D1DE; font-size: .9875rem; line-height: 1.5; border-bottom: 1px solid rgba(232,236,241,.1); }
.sg-contrast li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 1.5px; background: #6E7A8C; }
.sg-contrast .you-col li { color: #F3F5F8; font-weight: 500; }
.sg-contrast .you-col li::before { background: var(--ember); }
.sg-contrast .meta { margin-top: 14px; }
@media (max-width: 1100px) { .sg-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px) { .sg-head > .a, .sg-head > .b { grid-column: 1 / -1; } .sg-contrast .col { grid-column: 1 / -1; } }
@media (max-width: 560px) { .sg-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sg-grid li:hover { transform: none; } }

/* ---------- Aegis+ lockup (proposed identity from the 8 Nov handoff) and the small mark in tags ---------- */
.plan-lockup { margin: 0 0 6px; line-height: 0; }
.plan-lockup img { height: 40px; width: auto; display: block; }
.cap-tag { display: inline-flex; align-items: center; gap: 5px; }
.cap-tag img { width: 12px; height: 12px; }
.sg-contrast h3 .pf-mark { width: 16px; height: 16px; margin: 0; }

/* ---------- request a demo: an invitation beside a welcoming form ---------- */
.req { padding-block: clamp(64px, 8vw, 112px); }
.req-wrap { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: 36px; align-items: start; }
.req-invite { grid-column: 1 / span 5; }
.req-card { grid-column: 7 / span 6; }
.req-invite h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); margin: 0 0 18px; }
.req-invite .lead { font-size: 1.125rem; line-height: 1.5; max-width: 40ch; }
.req-points { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.req-points li { color: #B8C1D1; font-size: .9375rem; line-height: 1.5; padding-left: 18px; position: relative; }
.req-points li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 1.5px; background: var(--ember); }
.req-points li b { color: #F3F5F8; font-weight: 560; }
/* the small visual: three windows, two violet lines, revealed when the section comes into view */
.req-visual { position: relative; aspect-ratio: 4 / 3.15; margin: 32px 0 0; max-width: 480px; font-family: var(--afont, "Hanken Grotesk", system-ui, sans-serif); font-size: clamp(9px, .8vw, 11px); }
.req-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.req-lines path { fill: none; stroke: #BFAEE8; stroke-width: .6; stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 60; opacity: .9; }
.mini-win { position: absolute; background: #0D1420; border: 1px solid #28344A; border-radius: .6em; box-shadow: 0 24px 50px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.03) inset; overflow: hidden; color: #E8ECF1; opacity: 0; transform: translateY(6px); }
.mini-win::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #BFAEE8; transform: scaleX(0); transform-origin: left; }
.mini-win::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, #1E1B30, transparent 70%); opacity: 0; pointer-events: none; }
.mw-bar { display: flex; align-items: center; gap: .3em; padding: .55em .8em; border-bottom: 1px solid #1F2A3A; background: #0F1724; color: #E8ECF1; font-weight: 600; font-size: .95em; }
.mw-bar .pf-mark { width: 1em; height: 1em; margin-right: .2em; }
.mw-conv { left: 0; top: 0; width: 56%; z-index: 1; }
.mw-evid { left: 60%; top: 8%; width: 40%; z-index: 2; }
.mw-ctrl { left: 6%; top: 54%; width: 76%; z-index: 3; }
.mw-body { padding: .7em .8em .8em; display: grid; gap: .5em; }
.mw-you { justify-self: end; background: #1B2740; border: 1px solid #2E3D58; border-radius: .5em; padding: .4em .7em; max-width: 92%; }
.mw-ai { border-left: 2px solid #4A4268; padding: .2em 0 .2em .7em; color: #E8ECF1; }
.mw-ai span { display: block; color: #C8B8EE; font-size: .85em; font-weight: 600; margin-bottom: .15em; }
.mw-doc { margin: .7em; background: #F4F2EE; border-radius: .3em; padding: .8em .8em; display: grid; gap: .5em; }
.mw-doc i { display: block; height: .5em; border-radius: .2em; background: #D9D5CC; }
.mw-doc i.short { width: 55%; }
.mw-doc i.hl { background: #B9A6E6; }
.mw-rows { padding: .4em .8em .7em; display: grid; gap: .25em; }
.mw-rows > div { display: grid; grid-template-columns: auto auto 1fr; gap: .7em; align-items: center; padding: .4em .3em; border-bottom: 1px solid #1F2A3A; font-family: var(--mono); font-size: .9em; }
.mw-rows > div:last-child { border-bottom: 0; }
.mw-rows .pill { font-family: var(--afont, system-ui); font-size: .85em; font-weight: 600; padding: .15em .5em; border-radius: .4em; background: #1B2534; color: #A7B1BF; }
.mw-rows .pill.bad { background: #3A1512; color: #FF6457; }
.mw-rows i { display: block; height: .45em; border-radius: .2em; background: #1F2A3A; }
.mw-rows i.ai { background: linear-gradient(90deg, #4A4268, #BFAEE8 60%, #4A4268); background-size: 200% 100%; }
.mw-rows .sel { background: rgba(200,184,238,.06); box-shadow: inset 2px 0 0 #BFAEE8; }
.req-visual.is-in .mini-win { animation: mw-in .5s var(--ease-out) forwards; }
.req-visual.is-in .mini-win::before { animation: ink-rule .22s var(--ease-out) forwards, ink-rule-out .5s .9s forwards; }
.req-visual.is-in .mini-win::after { animation: ink-wash .9s ease-out .1s forwards; }
.req-visual.is-in .mw-conv, .req-visual.is-in .mw-conv::before, .req-visual.is-in .mw-conv::after { animation-delay: .1s, .1s, .2s; }
.req-visual.is-in .mw-ctrl, .req-visual.is-in .mw-ctrl::before, .req-visual.is-in .mw-ctrl::after { animation-delay: .9s, .9s, 1s; }
.req-visual.is-in .mw-evid, .req-visual.is-in .mw-evid::before, .req-visual.is-in .mw-evid::after { animation-delay: 1.7s, 1.7s, 1.8s; }
.req-visual.is-in .l1 { animation: draw .6s var(--ease-inout) .55s forwards; }
.req-visual.is-in .l2 { animation: draw .6s var(--ease-inout) 1.4s forwards; }
.req-visual.is-in .mw-rows i.ai { animation: shim 2.2s linear 2.4s infinite; }
@keyframes mw-in { to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes shim { to { background-position: -200% 0; } }
@keyframes ink-rule { to { transform: scaleX(1); } }
@keyframes ink-rule-out { to { opacity: 0; } }
@keyframes ink-wash { 0% { opacity: 0 } 30% { opacity: .9 } 100% { opacity: 0 } }
/* the form card */
.req-card { background: #fff; color: var(--ink); border-radius: 12px; border: 1px solid rgba(15,26,43,.08); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 40px 80px -40px rgba(0,0,0,.6); padding: clamp(22px, 2.6vw, 34px); position: relative; overflow: hidden; }
.req-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--ember) 0 60%, #BFAEE8 60% 100%); }
.req-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.req-head h3 { font-size: 1.25rem; margin: 0; }
.req-head .meta { margin: 0; }
.req-star { color: var(--ember); font-weight: 600; }
.req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.field { display: grid; gap: 6px; align-content: start; }
.field.full { grid-column: 1 / -1; }
.field label, .field .label { font-size: .9375rem; font-weight: 500; color: var(--ink); }
.field input, .field select, .field textarea { font: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid var(--rule-2); border-radius: 8px; background: #fff; color: var(--ink); width: 100%; transition: border-color .15s, box-shadow .15s; }
.field input::placeholder, .field textarea::placeholder { color: #9AA3B2; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #9AA3B2; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.field textarea { min-height: 112px; resize: vertical; }
.field .hint { font-size: .8125rem; color: var(--ink-3); font-weight: 400; }
.field .err { font-size: .8125rem; color: #9E2A1A; min-height: 1.15em; visibility: hidden; line-height: 1.15; }
.field.is-invalid .err { visibility: visible; }
.field.is-invalid input, .field.is-invalid select { border-color: #9E2A1A; box-shadow: 0 0 0 3px rgba(158,42,26,.1); }
.field.is-valid input, .field.is-valid select { border-color: #1F6B52; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230F1A2B' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label { position: relative; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--rule-2); border-radius: 999px; padding: 8px 14px 8px 10px; font-size: .9375rem; color: var(--ink-2); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.checks label:hover { border-color: var(--ink-3); }
.checks input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.checks label:has(input:checked) { border-color: var(--ink); background: var(--ink); color: #fff; }
.checks label:has(input:checked) input { accent-color: #fff; }
.checks label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 20px; }
.form-note { display: none; margin-top: 16px; font-size: .9375rem; color: var(--ink-2); padding: 14px 16px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); }
.form-note.is-shown { display: block; }
.form-note.is-error { border-color: #E3B7AE; background: #FBF3F1; color: #6B2217; }
.band-navy .req-card h3, .band-navy .req-card label, .band-navy .req-card .label { color: var(--ink); }
.band-navy .req-card .meta { color: var(--ink-3); }
.band-navy .req-card .form-note { color: var(--ink-2); }
.band-navy .req-card .form-note.is-error { color: #6B2217; }
/* confirmation state */
.req-done { display: grid; gap: 12px; padding: 8px 4px; }
.req-done[hidden] { display: none; }
.req-done-mark { width: 44px; height: 44px; border-radius: 50%; background: #E8F4EE; display: grid; place-items: center; margin-bottom: 4px; }
.req-done-mark svg { width: 24px; height: 24px; fill: none; stroke: #1F6B52; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .5s var(--ease-out) .15s forwards; }
.req-done h3 { font-size: 1.375rem; margin: 0; }
.req-done p { margin: 0; color: var(--ink-2); line-height: 1.5; }
.req-done p b { color: var(--ink); font-weight: 560; }
.req-done .meta a { color: var(--ink); }
@media (max-width: 1000px) { .req-invite { grid-column: 1 / span 6; } .req-card { grid-column: 7 / span 6; } }
@media (max-width: 860px) { .req-invite, .req-card { grid-column: 1 / -1; } .req-visual { max-width: 420px; } }
@media (max-width: 600px) { .req-grid { grid-template-columns: 1fr; } .req-visual { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) {
  .mini-win { opacity: 1; transform: none; animation: none !important; }
  .mini-win::before, .mini-win::after { animation: none !important; opacity: 0; }
  .req-lines path { stroke-dashoffset: 0; animation: none !important; }
  .mw-rows i.ai { animation: none !important; }
  .req-done-mark svg { stroke-dashoffset: 0; animation: none; }
}