/* =====================================================================
   SOLUTIONS TEMPLATE CSS (2026 design). Shared by every /solutions/*
   page built from the ai-2026 template. Load AFTER mrc-2026.css (via a
   <link> in the page head) so these rules win ties.
   Created 7/14 when inline CSS was removed from the template per
   page-build-checklist A10.6 (CSP: pages must not need 'unsafe-inline').
   Page-specific one-offs also go here, scoped by a page class if needed;
   never in <style> blocks or style="" attributes.
   ===================================================================== */

/* ---- hero: darker tinted bg + heavier padding (same treatment as the
   approved products/demos heroes; Steve 7/10: default hero too light/dull),
   heavier H1 (all hero H1s = 700) + wider sub so it wraps to ~2 rows.
   Arrow divider fill + hero video width were inline, now here. ---- */
.page-hero { background-color: #e6edf1; padding-top: clamp(4.2rem, 7vw, 6.4rem); --arrow-fill: #fff; }
.page-hero.has-arrow { padding-bottom: calc(clamp(4.2rem, 7vw, 6.4rem) + 80px); }
.page-hero h1 { font-weight: 700; }
.page-hero .ph-sub { color: #22333b; max-width: 1020px; }
.page-hero .crumbs, .page-hero .crumbs a { color: #4f5d66; }
.page-hero .ph-grid.solo { grid-template-columns: minmax(0, 1060px); }
.page-hero .ph-frame-below { max-width: 560px; }

/* ---- control stack: sticky heading + governance panel left, numbered
   cards right (stack-section pattern approved on products/index-2026) ---- */
.aic-stack .stack-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; margin-bottom: 1rem; }
.aic-stack .stack-head > p { color: var(--body); line-height: 1.65; margin-bottom: 1.8rem; }
.aic-stack .stack-head .aigov-panel { margin: 0; }
.aic-stack .stack-card h3 { font-weight: 700; letter-spacing: -.015em; }
.aic-stack .stack-card > p { margin-bottom: .95rem; }
.aic-stack .check-list { margin: 0; gap: .6rem; }
.aic-stack .check-list li { font-size: .93rem; }
@media (max-width: 900px) { .aic-stack .stack-head .aigov-panel { margin: 0 auto 2rem; } }
/* reveal stagger indices, formerly inline style="--i:n" on each card */
.aic-stack .stack-cards .stack-card:nth-child(1) { --i: 0; }
.aic-stack .stack-cards .stack-card:nth-child(2) { --i: 1; }
.aic-stack .stack-cards .stack-card:nth-child(3) { --i: 2; }
.aic-stack .stack-cards .stack-card:nth-child(4) { --i: 3; }
.aic-stack .stack-cards .stack-card:nth-child(5) { --i: 4; }
.aic-stack .stack-cards .stack-card:nth-child(6) { --i: 5; }

/* ---- coded mini-visuals inside the stack cards (candidates to promote
   to mrc-2026.css if reused beyond solutions; Steve 7/10: illustrate,
   don't rely on text) ---- */
.aib { border: 1px solid var(--line); border-radius: 12px; background: #fbfcfd; padding: .8rem .85rem; display: flex; flex-direction: column; gap: .5rem; }
.aib-row { display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 500; color: var(--ink); }
.aib-row .ic { width: 22px; height: 22px; border-radius: 6px; background: rgba(0,100,120,.1); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: .62rem; flex: none; }
.aib-tag { margin-left: auto; font-size: .6rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
.aib-tag.green { background: rgba(22,163,74,.12); color: #15803d; }
.aib-tag.amber { background: rgba(180,83,9,.14); color: #b45309; }
/* "your environment" boundary diagram */
.aib.aib-env { border: 1.5px dashed rgba(0,100,120,.5); background: rgba(0,100,120,.04); }
.aib-env .aib-lbl { font-size: .6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-dk); }
.aib-env .aib-lbl i { margin-right: .35rem; }
.aib-env .om-nodes { padding: .15rem 0 .1rem; }
/* audit log */
.aib-log .t { font-family: 'Inter Tight', monospace; font-size: .62rem; color: var(--muted); flex: none; width: 34px; }
.aib-log .fa-check { margin-left: auto; color: #15803d; font-size: .7rem; }
.aib-log .fa-lock { margin-left: auto; color: var(--muted); font-size: .7rem; }
/* users-vs-cost rows */
.aib-scale { display: flex; align-items: center; gap: .55rem; font-size: .82rem; color: var(--ink); }
.aib-scale .k { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); width: 82px; flex: none; font-weight: 700; }
.aib-scale b { font-size: 1rem; letter-spacing: -.01em; }
.aib-scale .fa { color: var(--accent); font-size: .72rem; }
.aib-scale .aib-tag { margin-left: 0; }

/* ---- stat band holds 3 stats on solutions pages; .num-text = a stat
   that is words not a number (e.g. "Since 1981") ---- */
.sec-stats .cred { grid-template-columns: repeat(3, 1fr); }
.sec-stats .num.num-text { white-space: nowrap; font-size: 2.1rem; }
@media (max-width: 767px) { .sec-stats .cred { grid-template-columns: repeat(2, 1fr); } .sec-stats .cred .item:last-child { grid-column: 1 / -1; } }

/* ---- video frames use the shared .hero-video component (red .ph-play +
   black .hv-caption title pill, Steve 7/14). Full width inside build rows;
   shrink the nowrap pill on small phones so it can't overflow. ---- */
.wb .sm-visual .hero-video { width: 100%; }
@media (max-width: 480px) { .hero-video .hv-caption { font-size: .8rem; padding: .45rem .95rem; } }

/* ---- aib panels promoted to split-row scale (inside .sm-visual): the
   card-level mini-visual sizes are too small for a half-column, so scale
   the panel up into a proper card ---- */
.sm-visual .aib { width: 100%; max-width: 430px; padding: 1.15rem 1.2rem; gap: .7rem; border-radius: 14px; box-shadow: 0 14px 34px rgba(7,38,48,.10); }
.sm-visual .aib-row { font-size: .92rem; }
.sm-visual .aib-row .ic { width: 26px; height: 26px; font-size: .72rem; border-radius: 8px; }
.sm-visual .aib-tag { font-size: .68rem; }
.sm-visual .aib-scale b { font-size: 1.15rem; }

/* ---- static framed screenshot / diagram inside a split row's sm-visual
   (used where a topic has an image instead of a video) ---- */
.sm-visual .sm-shot { width: 100%; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 12px 28px rgba(7,38,48,.12), 0 32px 70px rgba(0,100,120,.10); }
.sm-visual .sm-shot img { display: block; width: 100%; height: auto; }

/* ---- "What can you build" rows: kicker chip + heavier title + tick list ----
   (pill-to-heading gap now comes from the global .badge-cat + h3 rule in
   mrc-2026.css; the old per-page pill margin-bottom compensations are gone) */
.wb h3 { font-size: clamp(1.45rem, 2.3vw, 1.85rem); font-weight: 700; letter-spacing: -.02em; margin: 1rem 0 .9rem; }
.wb .check-list { margin-bottom: 0; gap: .65rem; }
.wb .check-list li { font-size: .97rem; }

/* ---- section-close CTA block (button under a section, .cta-lead = the
   line above it) ---- */
.sec-cta { margin-top: 2.8rem; }
.sec-cta .cta-lead { font-size: 1.1rem; color: var(--body); margin-bottom: 1.4rem; }

/* ---- live-demo cards: narrower two-up row, chip pinned top-left ---- */
.row-narrow { max-width: 1000px; margin-left: auto; margin-right: auto; }
.fr-body .badge-cat { align-self: flex-start; }

/* ---- FAQ aside + footer line ---- */
.faq-aside h2 { font-size: 1.9rem; }
.faq-aside .btn-pill { background: #fff; color: var(--ink); margin-top: .4rem; }
.faq-updated { font-size: .85rem; color: var(--muted); margin-top: 1.4rem; }

/* ---- final CTA band type (was inline on h2/p) ---- */
.v3-cta h2 { font-size: clamp(2rem, 4vw, 2.8rem); color: #fff; margin-bottom: 1rem; font-weight: 700; letter-spacing: -0.035em; }
.v3-cta .cta-sub { max-width: 600px; margin: 0 auto 2rem; color: rgba(255,255,255,.8); font-size: 1.15rem; }

/* ---- flat spot illustrations replacing text widgets in the sticky stack ---- */
.stack-illus { margin-top: 1rem; background: #ecf5f6; border-radius: 16px; padding: 1.3rem 1rem; }
.stack-illus svg { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto; }
.stack-head .stack-illus { border-radius: 20px; }
.stack-head .stack-illus svg { max-width: 400px; }
/* large split-row illustrations (.illus-lg, Steve 7/22: split-row visuals
   should be real screenshots or bigger, more illustrative drawings) */
.stack-illus.illus-lg { width: 100%; padding: 1.6rem 1.3rem; }
.stack-illus.illus-lg svg { max-width: 480px; }
/* real product screenshot in the sticky-stack head */
.stack-shot { margin-top: 1rem; }
.stack-shot img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(15,30,45,.10); }

/* ---- solutions-index grid: whole card clickable. The h3 anchor stretches
   over the card; .fr-btn is a non-interactive span kept as a visual cue. ---- */
.fc-link { position: relative; }
.fc-link h3 a { color: inherit; text-decoration: none; }
.fc-link h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.fc-link h3 a:focus-visible { outline: none; }
.fc-link h3 a:focus-visible::after { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 20px; }
.fc-link:hover .fr-btn { border-color: var(--accent); color: var(--accent); }
.fc-link:hover .fr-btn i { transform: translateX(3px); }