/* Sharetru · Reference architecture: Sharetru alongside GCC High (2026 lead-gen kit)
   Reads the theme tokens (--st-*) directly; no Shared-styles module needed. The figure is
   authored in its end state; the six-beat choreography runs on a view timeline bound to the
   figure, plays once in browsers without view timelines (module.js adds .in), and is off
   under reduced motion and when the theme's "Allow motion" is off (html[data-motion="off"]). */
.lp26-arch { padding: var(--st-section) var(--st-inline); font-family: var(--st-font); }

/* ---- the figure ------------------------------------------------------------- */
.lp26-arch__fig { margin: 0; padding: 0; view-timeline-name: --lp26-afig; view-timeline-axis: block; }
.lp26-arch__fig > svg { display: block; width: 100%; height: auto; font-family: inherit; overflow: visible; }
.lp26-arch__cap { margin: 1.375rem 0 0; }
.lp26-arch__capline { margin: 0; font-size: 0.84375rem; line-height: 1.6; color: var(--st-muted); text-align: center; max-width: none; }
.lp26-arch__capline + .lp26-arch__capline { margin-top: 0.5rem; }
.lp26-arch__capline b, .lp26-arch__capline strong { color: var(--st-ink-soft); font-weight: 700; }

.lp26-arch__fig .col { fill: var(--st-muted); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; }
.lp26-arch__fig .col.ondark { fill: var(--st-aqua); }
.lp26-arch__fig .lab { fill: var(--st-accent); font-size: 10px; font-weight: 800; letter-spacing: 0.1em; }
.lp26-arch__fig .box { fill: var(--st-surface); stroke: var(--st-line-strong); stroke-width: 1; }
.lp26-arch__fig .tenant { fill: none; stroke: var(--st-heading); stroke-width: 1.5; }
.lp26-arch__fig .sitehd { fill: var(--st-surface-2); }
.lp26-arch__fig .bt { fill: var(--st-ink); font-size: 13px; font-weight: 800; letter-spacing: -0.01em; }
.lp26-arch__fig .bt.big { font-size: 17px; fill: var(--st-heading); }
.lp26-arch__fig .bs { fill: var(--st-muted); font-size: 10.5px; font-weight: 600; }
.lp26-arch__fig .rt { fill: var(--st-ink-soft); font-size: 12px; font-weight: 600; }
.lp26-arch__fig .ct { fill: var(--st-ink); font-size: 13px; font-weight: 800; }
.lp26-arch__fig .bound { fill: none; stroke: var(--st-accent); stroke-width: 1.5; stroke-dasharray: 6 5; }
.lp26-arch__fig .fedbound { fill: rgba(115, 88, 229, 0.04); stroke: var(--st-accent); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.lp26-arch__fig .tile { fill: var(--st-midnight); }
.lp26-arch__fig .tt { fill: var(--st-white); font-size: 13px; font-weight: 700; }
.lp26-arch__fig .flow { stroke: var(--st-accent); stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; }
.lp26-arch__fig .ahp { fill: var(--st-accent); }
.lp26-arch__fig .rail { stroke: var(--st-line-strong); stroke-width: 1.5; fill: none; }
.lp26-arch__fig .sys { stroke: var(--st-accent); stroke-width: 1.5; fill: none; }
.lp26-arch__fig .drift { stroke: var(--st-accent); stroke-width: 2; fill: none; stroke-dasharray: 3 7; opacity: 0.8; }
.lp26-arch__fig .tok { fill: var(--st-code-bg); }
.lp26-arch__fig .tokt { fill: var(--st-ink); font-family: var(--st-font-mono); font-size: 10px; font-weight: 700; }
.lp26-arch__fig .tok.in { fill: var(--st-green); }
.lp26-arch__fig .tokt.in { fill: #0a2a24; }
.lp26-arch__fig .tok.out { fill: var(--st-aqua); }
.lp26-arch__fig .tokt.out { fill: #0b2f36; }

/* Dark ground: the Midnight tile and its white logo stay; the enclave and boxes read the dark surface tokens. */
:root[data-theme="dark"] .lp26-arch__fig .tile { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp26-arch__fig .tile { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; } }

/* ---- the choreography ------------------------------------------------------- */
.lp26-arch__fig .anim { transform-box: fill-box; transform-origin: center; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); animation-fill-mode: both; }
.lp26-arch__fig .ab1 { animation-name: lp26-arch-tok-r1; }
.lp26-arch__fig .ad1 { animation-name: lp26-arch-drift-1; }
.lp26-arch__fig .ab2 { animation-name: lp26-arch-tok-r2; }
.lp26-arch__fig .ad2 { animation-name: lp26-arch-drift-2; }
.lp26-arch__fig .ab3 { animation-name: lp26-arch-tok-l3; }
.lp26-arch__fig .ad3 { animation-name: lp26-arch-drift-3; }
.lp26-arch__fig .ab4 { animation-name: lp26-arch-tok-l4; }
.lp26-arch__fig .ad4 { animation-name: lp26-arch-drift-4; }
.lp26-arch__fig .ad5, .lp26-arch__fig .ad5t { animation-name: lp26-arch-drift-5; }
.lp26-arch__fig .ad6 { animation-name: lp26-arch-drift-6; }
.lp26-arch__fig .ad5t { opacity: 1; }
@keyframes lp26-arch-tok-r1 { 0%, 6% { opacity: 0; transform: translateX(-90px); } 9% { opacity: 1; } 18%, 100% { opacity: 1; transform: none; } }
@keyframes lp26-arch-tok-r2 { 0%, 20% { opacity: 0; transform: translateX(-90px); } 23% { opacity: 1; } 32%, 100% { opacity: 1; transform: none; } }
@keyframes lp26-arch-tok-l3 { 0%, 34% { opacity: 0; transform: translateX(90px); } 37% { opacity: 1; } 46%, 100% { opacity: 1; transform: none; } }
@keyframes lp26-arch-tok-l4 { 0%, 48% { opacity: 0; transform: translateX(90px); } 51% { opacity: 1; } 60%, 100% { opacity: 1; transform: none; } }
@keyframes lp26-arch-drift-1 { 0%, 6% { opacity: 0; } 9%, 100% { opacity: 0.8; } }
@keyframes lp26-arch-drift-2 { 0%, 20% { opacity: 0; } 23%, 100% { opacity: 0.8; } }
@keyframes lp26-arch-drift-3 { 0%, 34% { opacity: 0; } 37%, 100% { opacity: 0.8; } }
@keyframes lp26-arch-drift-4 { 0%, 48% { opacity: 0; } 51%, 100% { opacity: 0.8; } }
@keyframes lp26-arch-drift-5 { 0%, 62% { opacity: 0; } 65%, 100% { opacity: 1; } }
@keyframes lp26-arch-drift-6 { 0%, 76% { opacity: 0; } 79%, 100% { opacity: 0.8; } }

/* Scroll-driven: the six beats run while the pill lane (about 230px below the figure's top)
   crosses the middle half of the viewport, whatever the figure's total height. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="off"]) .lp26-arch__fig .anim { animation-timeline: --lp26-afig; animation-range: cover calc(25vh + 230px) cover calc(75vh + 230px); }
  }
}
/* No view timelines: module.js adds .js-once to the figure and .in when it enters view; the beats play once over seven seconds. */
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="off"]) .lp26-arch__fig.js-once .anim { animation-duration: 7s; animation-delay: 0.3s; animation-iteration-count: 1; animation-play-state: paused; }
    html:not([data-motion="off"]) .lp26-arch__fig.js-once.in .anim { animation-play-state: running; }
  }
}
/* Motion off (visitor or theme): the finished picture, nothing moves. */
@media (prefers-reduced-motion: reduce) { .lp26-arch__fig .anim { animation: none !important; } }
html[data-motion="off"] .lp26-arch__fig .anim { animation: none !important; }
@media print { .lp26-arch__fig .anim { animation: none !important; } }

/* ---- phones: the figure keeps its 860px minimum and scrolls sideways with a cue (playbook B6) ---- */
@media (max-width: 1000px) {
  .lp26-arch__fig { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lp26-arch__fig > svg { min-width: 860px; }
  .lp26-arch__fig::before { content: attr(data-swipe) " \2192"; display: block; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--st-accent-ink); padding: 0 0 0.625rem; }
  .lp26-arch__cap { position: sticky; left: 0; }
}

/* ---- the cards ------------------------------------------------------------- */
.lp26-arch__cards { list-style: none; margin: clamp(1.5rem, 1rem + 2vw, 2.75rem) 0 0; padding: 0; display: grid; gap: var(--st-gap-card); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); align-items: stretch; }
.lp26-arch__card { display: flex; flex-direction: column; margin: 0; padding: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); transition: translate var(--st-dur-fast) var(--st-ease), box-shadow var(--st-dur-fast) var(--st-ease); }
.lp26-arch__card:hover { translate: 0 -3px; box-shadow: 0 2px 4px rgba(23, 19, 13, 0.04), 0 26px 52px -24px rgba(23, 19, 132, 0.45); }
.lp26-arch__icon { width: 3.5rem; height: 3.5rem; margin: 0 0 1.125rem; padding: 0.875rem; border-radius: 14px; background: rgba(115, 88, 229, 0.12); stroke: var(--st-accent-ink); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lp26-arch__kicker { margin: 0 0 0.375rem; font-size: 0.78125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--st-accent-ink); }
.lp26-arch__card h3 { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.35; color: var(--st-ink); text-wrap: balance; }
.lp26-arch__text { margin: 0; font-size: 0.9rem; line-height: 1.7; color: var(--st-ink-soft); max-width: none; }
.lp26-arch__text + .lp26-arch__text { margin-top: 0.625rem; }
.lp26-arch__text b, .lp26-arch__text strong { color: var(--st-ink); font-weight: 700; }