/* /about. Layout only: type sizes of h1/h2/h3 and table cells come from the shared system. Cards use the shared .tile class. */
.ab-dg { margin: 0; }
.ab-fallback { margin: 0; padding-left: 1.2rem; color: var(--text-dim); }
.dg .ab-fallback { display: none; }
.tile > .bdg { align-self: flex-start; }

/* principles: compact 3 x 2 */
.ab-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 60rem) { .ab-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 39.99rem) { .ab-principles { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .ab-principles { grid-template-columns: minmax(0, 1fr); } }

/* mission: a wide title, two lead-size paragraphs across the container, then the steps diagram */
.ab-leadline { max-width: 70ch; }
/* mission and vision (assets/data/mission.mjs, one source): two full-width framed bands, a label column (icon tile, name, index) beside the text, a calm looping diagram under the mission,
   four link chips and the closing strip under the vision. Shared parts only: .framed, .cap chips, .diagram-frame with the roadmap diagram parts, .m-rise, the type tokens. */
.ms { display: grid; gap: var(--space-head); margin-bottom: var(--space-block); }
.ms__band { position: relative; isolation: isolate; display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: var(--space-block); row-gap: var(--space-head); align-items: start; padding: 20px; border-radius: var(--r-panel); --mx: 50%; --my: 0%; }
.ms__band--mission { --fx: 0%; --fy: 0%; --fc1: var(--framed-orange); --fc2: var(--framed-magenta); }
.ms__band--vision { --fx: 100%; --fy: 0%; --fc1: var(--framed-magenta); --fc2: var(--framed-blue); --m-i: 1; }
.ms__band::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--t-fast) var(--ease); background: radial-gradient(360px circle at var(--mx) var(--my), rgb(var(--fc2) / .09), transparent 70%); }
.ms__band:hover::before { opacity: 1; }
.ms__lab { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
.ms__name { display: grid; gap: 2px; }
.ms__name h3 { margin: 0; }
.ms__idx { font: 500 var(--text-small-size)/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.ms__body { display: grid; gap: var(--space-head); min-width: 0; }
.ms__body > * { margin: 0; }
.ms__body > p:not(.ms__pull) { color: var(--text-dim); font-size: var(--text-body-size); line-height: 1.6; max-width: none; }
.ms__body .em { color: var(--text); font-weight: 500; }
.ms__fig { margin: 0; padding: var(--dg-pad); padding-top: calc(var(--dg-pad) + 28px); border: 1px solid var(--border); border-radius: var(--r-panel); }
.ms__fig { container-type: inline-size; }
@container (max-width: 740px) { .ms__fig .rd--w { display: none; } .ms__fig .rd--n { display: block; max-width: 300px; width: 100%; margin-inline: auto; } }
.ms__links { grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.ms__links li { display: grid; }
.ms__links .cap { align-content: center; padding: 10px 14px; }
.ms__links .cap > b { align-self: center; }
.ms .ms-dg { max-width: none; }
.ms .ms-ah { fill: none; stroke: var(--kc); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.ms .ms-nm { fill: var(--text); font-size: 13px; font-weight: 600; }
.ms .ms-sb { fill: var(--text-dim); font-size: 11px; font-weight: 400; }
.ms .ms-lane, .ms .ms-bl { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .04em; fill: var(--text-faint); }
.ms .ms-bl { fill: var(--text-dim); }
.ms .ms-blk { stroke-dasharray: 4 4; }
.ms .ms-prov rect { stroke-dasharray: none; }
.ms .ms-core rect { stroke: var(--brand-magenta); }

@media (prefers-reduced-motion: no-preference) {
  /* 8 s loop: the allowed path first (provider lit), then the blocked path (provider dim and dashed, the blocked branch lit) */
  @keyframes ms-prov { 0%, 46% { opacity: 1; stroke-dasharray: none; } 52%, 96% { opacity: .4; } 100% { opacity: 1; } }
  @keyframes ms-provd { 0%, 49% { stroke-dasharray: none; } 50%, 99% { stroke-dasharray: 4 3; } 100% { stroke-dasharray: none; } }
  @keyframes ms-blk { 0%, 46% { opacity: .35; } 54%, 96% { opacity: 1; } 100% { opacity: .35; } }
  .ms .ms-prov { animation: ms-prov 8s ease-in-out infinite; }
  .ms .ms-prov rect { animation: ms-provd 8s steps(1, end) infinite; }
  .ms .ms-blk, .ms .ms-bh, .ms .ms-bl { animation: ms-blk 8s ease-in-out infinite; }
}
.ms__pull { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; margin: 0; padding: 14px 16px; }
.ms__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--text-dim); border: 1px solid var(--border); background: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); }
.ms-core rect { fill: color-mix(in srgb, var(--brand-magenta) 14%, var(--surface-1)); stroke: var(--brand-magenta); stroke-width: 1.4; }
.ms-core text { font-weight: 600; }
.ms__links .ghm { margin: 0; }
.ms__ico svg { width: 20px; height: 20px; }
.ms__band--mission .ms__ico { color: var(--brand-orange); } .ms__band--vision .ms__ico { color: var(--brand-magenta); }
.ms__txt { font: var(--type-subtitle); letter-spacing: var(--type-subtitle-ls); color: var(--text); text-align: left; text-wrap: balance; }
.ms__key { font-style: normal; color: var(--text); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) { .ms__key { background: linear-gradient(90deg, #F81530, #5A5DCB 60%, #0189FD); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--text); } }
.ms__pull { padding: 14px 16px; }
/* the vision band: text column, then chips and the closing strip across the full band */
.ms__band--vision .ms__pull { margin-top: 0; }
@media (max-width: 63.99rem) { .ms__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.99rem) { .ms__band { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .ms__ico { width: 32px; height: 32px; } .ms__links { grid-template-columns: minmax(0, 1fr); } }

/* one standard: a wide lead line, three symmetric cards joined by the shared flow connector, one closing line */
.ab-leadline { margin: 0; color: var(--text-dim); }
.ab-flow { margin-bottom: var(--space-block); }
.ab-close { margin: 0; max-width: 70ch; text-align: left; font-size: var(--text-body-size); line-height: 1.5; font-weight: 500; color: var(--text); text-wrap: balance; }
@media (max-width: 63.99rem) { .ab-flow .flow__node { min-height: 0; } }


/* section stepper: the shared component (rail.css) */
.ab-shell { display: block; }
.ab-body section[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
.ab-quiet { margin: 2rem 0 0; color: var(--text-faint); font-size: 12px; line-height: 1.5; }
.ab-quiet a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ab-quiet a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }