/* ==========================================================================
   Ai1 Technical Guides — shared components
   Used by /pages/services/ai1/{how-it-works,platform-architecture,
   knowledge-architecture,ownership,build,applications} and /pages/security
   Built on the global design tokens in style.css. No hardcoded brand hex
   except the layer-stack palette below.
   ========================================================================== */

/* ---- Guide eyebrow + lead ------------------------------------------------ */
.guide-lead{max-width:760px;font-size:1.05rem;line-height:1.7;color:var(--text-grey)}
.guide-kicker{display:inline-flex;align-items:center;gap:.5rem;background:rgba(51,97,255,.1);color:var(--primary);
  font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .8rem;border-radius:50px;margin-bottom:1rem}

/* ---- Nine-layer stack ---------------------------------------------------- */
.layer-stack{display:flex;flex-direction:column-reverse;gap:.5rem;max-width:680px;margin:0 auto}
.layer-row{display:flex;align-items:center;gap:1rem;border-radius:var(--radius-lg);padding:.85rem 1.1rem;
  color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.12);position:relative}
.layer-row .layer-num{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0}
.layer-row .layer-label{flex:1;font-family:var(--font-heading);font-weight:600;font-size:1rem}
.layer-row .layer-badge{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  background:rgba(255,255,255,.2);border-radius:50px;padding:.18rem .6rem;white-space:nowrap}
/* foundation -> outcome palette */
.layer-l1{background:#3a4252}
.layer-l2{background:#3361FF}
.layer-l3{background:#4f6cff}
.layer-l4{background:#5B8AFF}
.layer-l5{background:#0A4563}
.layer-l6{background:#FF8543;color:#3a2300}
.layer-l6 .layer-num,.layer-l6 .layer-badge{background:rgba(0,0,0,.14)}
.layer-l7{background:#22c55e;color:#06351d}
.layer-l7 .layer-num,.layer-l7 .layer-badge{background:rgba(0,0,0,.14)}
.layer-l8{background:#16a34a}
.layer-l9{background:#3651DA}

/* ---- Callout boxes ------------------------------------------------------- */
.callout{border-radius:var(--radius-lg);padding:1.3rem 1.6rem;margin:1.5rem 0}
.callout h3,.callout h4{margin-top:0}
.callout p:last-child{margin-bottom:0}
.callout-blue{background:linear-gradient(135deg,rgba(51,97,255,.07),rgba(91,138,255,.05));border:1px solid rgba(51,97,255,.2)}
.callout-amber{background:linear-gradient(135deg,rgba(255,133,67,.09),rgba(255,133,67,.04));border:1px solid rgba(255,133,67,.28)}
.callout-green{background:linear-gradient(135deg,rgba(34,197,94,.09),rgba(34,197,94,.04));border:1px solid rgba(34,197,94,.26)}
.callout-teal{background:linear-gradient(135deg,rgba(10,69,99,.07),rgba(10,69,99,.04));border:1px solid rgba(10,69,99,.2)}
.callout-red{background:linear-gradient(135deg,rgba(239,68,68,.07),rgba(239,68,68,.03));border:1px solid rgba(239,68,68,.26)}

/* ---- Spec / comparison tables ------------------------------------------- */
.spec-table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--grey-200);margin:1.4rem 0}
.spec-table{width:100%;border-collapse:collapse;font-size:.9rem;background:#fff;min-width:540px}
.spec-table th{background:var(--dark);color:#fff;text-align:left;padding:.75rem .9rem;font-family:var(--font-heading);font-weight:600;font-size:.82rem}
.spec-table td{padding:.7rem .9rem;border-bottom:1px solid var(--grey-200);color:var(--text-grey);vertical-align:top;line-height:1.55}
.spec-table tr:last-child td{border-bottom:none}
.spec-table tbody tr:nth-child(even) td{background:#f9fafb}
.spec-table td strong{color:var(--dark)}

/* ---- Flow / pipeline steps ---------------------------------------------- */
.flow-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:.6rem;margin:1.4rem 0}
.flow-step{flex:1;min-width:140px;background:#fff;border:1px solid var(--grey-200);border-radius:var(--radius-lg);
  padding:1rem 1.1rem;position:relative}
.flow-step .flow-n{font-family:var(--font-heading);font-weight:700;color:var(--primary);font-size:.8rem;display:block;margin-bottom:.3rem}
.flow-step h4{margin:0 0 .25rem;font-size:.95rem}
.flow-step p{margin:0;font-size:.82rem;color:var(--text-grey);line-height:1.5}
.flow-arrow{display:flex;align-items:center;color:var(--primary);font-weight:700;font-size:1.2rem}
@media(max-width:768px){.flow-arrow{transform:rotate(90deg);justify-content:center;width:100%}}

/* ---- Do / Don't lists ---------------------------------------------------- */
.dd-list{list-style:none;padding:0;margin:.6rem 0}
.dd-list li{position:relative;padding:.35rem 0 .35rem 1.8rem;line-height:1.55}
.dd-do::before{content:"✓";position:absolute;left:0;color:#22c55e;font-weight:700}
.dd-no::before{content:"✕";position:absolute;left:0;color:#EF4444;font-weight:700}

/* ---- Pills / tags -------------------------------------------------------- */
.pill{display:inline-block;background:var(--grey-100,#eef2f7);color:var(--dark);border-radius:50px;
  padding:.25rem .75rem;font-size:.78rem;font-weight:600;margin:.2rem .25rem .2rem 0}
.pill-blue{background:rgba(51,97,255,.1);color:var(--primary)}
.pill-teal{background:rgba(10,69,99,.1);color:var(--secondary)}
.pill-green{background:rgba(34,197,94,.12);color:#15803d}

/* ---- Big metric ---------------------------------------------------------- */
.metric{font-family:var(--font-heading);font-weight:700;font-size:2.6rem;line-height:1;color:var(--primary)}
.metric-label{font-weight:600;margin:.5rem 0 .25rem}

/* ---- Diagram container --------------------------------------------------- */
.diagram-wrap{background:#fff;border:1px solid var(--grey-200);border-radius:var(--radius-xl);
  padding:1.5rem;margin:1.5rem 0;box-shadow:0 10px 40px rgba(0,0,0,.05)}
.diagram-wrap svg{width:100%;height:auto;display:block}
.diagram-caption{text-align:center;color:var(--text-grey);font-size:.82rem;margin-top:.8rem}
.diagram-dark{background:linear-gradient(135deg,#1a2030,#252C39);border-color:rgba(255,255,255,.08)}
.diagram-dark .diagram-caption{color:rgba(255,255,255,.6)}

/* ---- Guide hero image panel --------------------------------------------- */
.guide-hero-img{width:100%;border-radius:var(--radius-xl);border:1px solid rgba(255,255,255,.15);
  box-shadow:0 24px 70px rgba(0,0,0,.25);display:block}

/* ---- Cross-link guide cards --------------------------------------------- */
.guide-xlink .card{height:100%;text-align:left;transition:transform .25s ease,box-shadow .25s ease}
.guide-xlink a:hover .card{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.1)}
.guide-xlink .card .eyebrow-min{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary)}

/* ---- Layer detail rows (icon + text) ------------------------------------ */
.detail-row{display:flex;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--grey-200)}
.detail-row:last-child{border-bottom:none}
.detail-row .detail-ic{width:46px;height:46px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(51,97,255,.08)}
.detail-row h4{margin:.1rem 0 .3rem}
.detail-row p{margin:0;color:var(--text-grey);font-size:.92rem;line-height:1.6}

/* ---- Responsive ---------------------------------------------------------- */
@media(max-width:768px){
  .layer-row .layer-badge{display:none}
  .metric{font-size:2.1rem}
}

/* ==========================================================================
   ROUND 2 — shared footer-nav, stat row, severity tiers, logo strip,
   connectors cloud + catalog, learn gates, CTA texture.
   ========================================================================== */

/* ---- Shared footer-nav (identical on every guide) ----------------------- */
/* Breakpoint-aware: on desktop (>768px) the right-hand Technical Library rail
   already provides jump-anywhere nav, so the heavy nine-guide grid is hidden
   (prev/next + the quiet "Explore the full Ai1 platform" link remain). On
   mobile (<=768px, rail hidden) it shows as a full-bleed browse-all band. */
.ai1-fnav-section{display:none;padding:var(--section-gap) 0}
.ai1-fnav{background:linear-gradient(135deg,#252C39,#1a2130);color:#fff;border-radius:var(--radius-xl);padding:2.6rem 1.9rem}
.ai1-fnav .fnav-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.7rem;flex-wrap:wrap}
.ai1-fnav .fnav-eyebrow{font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:700;color:#8FB0FF;margin:0 0 .35rem}
.ai1-fnav .fnav-title{color:#fff;font-size:1.4rem;margin:0}
.ai1-fnav .fnav-home{display:inline-flex;align-items:center;gap:.5rem;background:rgba(91,138,255,.18);border:1px solid rgba(91,138,255,.45);color:#dbe4ff;border-radius:50px;padding:.6rem 1.1rem;font-family:var(--font-heading);font-weight:600;font-size:.85rem;text-decoration:none}
.ai1-fnav .fnav-home svg{width:16px;height:16px}
.ai1-fnav .fnav-home:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.ai1-fnav .fnav-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.ai1-fnav .gcard{display:block;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:1rem 1.05rem 1.1rem;color:#fff;text-decoration:none;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.ai1-fnav a.gcard:hover{background:rgba(51,97,255,.16);border-color:rgba(91,138,255,.55);transform:translateY(-2px)}
.ai1-fnav .gcard .gi{width:38px;height:38px;border-radius:10px;background:rgba(91,138,255,.20);display:flex;align-items:center;justify-content:center;margin-bottom:.7rem;color:#AFC5FF}
.ai1-fnav .gcard .gi svg{width:20px;height:20px}
.ai1-fnav .gcard b{font-family:var(--font-heading);font-size:.95rem;display:block;margin-bottom:.2rem;color:#fff}
.ai1-fnav .gcard > span{font-size:.8rem;color:#b8c2d4;line-height:1.45;display:block}
.ai1-fnav .gcard.current{background:rgba(245,158,11,.13);border-color:rgba(245,158,11,.55)}
.ai1-fnav .gcard.current .gi{background:rgba(245,158,11,.24);color:#FBBF24}
.ai1-fnav .gcard.current .now{display:inline-block;margin-top:.5rem;font-size:.62rem;font-family:var(--font-heading);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#FBBF24}
@media(max-width:1024px){.ai1-fnav .fnav-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.ai1-fnav-section{display:block}.ai1-fnav-section>.container{max-width:none;padding:0}.ai1-fnav{padding:2rem 1.2rem;border-radius:0}.ai1-fnav .fnav-grid{grid-template-columns:1fr}}

/* ---- CTA band navy texture ---------------------------------------------- */
.cta-band.cta-textured{position:relative;background-image:linear-gradient(135deg,rgba(20,26,40,.86),rgba(17,24,39,.92)),url("../images/guides/ai1-g-band-texture-navy.jpg");background-size:cover;background-position:center}
.cta-band.cta-textured > .container{position:relative;z-index:1}

/* ---- Stat-pill row ------------------------------------------------------- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1.6rem 0}
.stat-pill{background:#fff;border:1px solid var(--grey-200);border-radius:var(--radius-lg);padding:1.2rem 1rem;text-align:center}
.stat-pill .stat-num{font-family:var(--font-heading);font-weight:700;font-size:2.1rem;line-height:1;color:var(--primary)}
.stat-pill .stat-lbl{margin-top:.4rem;font-size:.82rem;color:var(--text-grey);line-height:1.4}
@media(max-width:768px){.stat-row{grid-template-columns:repeat(2,1fr)}.stat-pill .stat-num{font-size:1.8rem}}

/* ---- Severity tiers (Security) ------------------------------------------ */
.sev-stack{display:flex;flex-direction:column;gap:.7rem;margin:1.4rem 0}
.sev-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;background:#fff;border:1px solid var(--grey-200);border-left-width:5px;border-radius:var(--radius-lg);padding:1rem 1.2rem}
.sev-row .sev-chip{font-family:var(--font-heading);font-weight:700;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;border-radius:50px;padding:.3rem .8rem;white-space:nowrap}
.sev-row .sev-desc{color:var(--text-grey);font-size:.9rem;line-height:1.5}
.sev-row .sev-desc strong{color:var(--dark)}
.sev-row .sev-time{font-family:var(--font-heading);font-weight:700;font-size:.95rem;color:var(--dark);white-space:nowrap}
.sev-crit{border-left-color:#F59E0B}.sev-crit .sev-chip{background:rgba(245,158,11,.16);color:#92610a}
.sev-high{border-left-color:#3361FF}.sev-high .sev-chip{background:rgba(51,97,255,.12);color:var(--primary)}
.sev-med{border-left-color:#0A4563}.sev-med .sev-chip{background:rgba(10,69,99,.12);color:var(--secondary)}
.sev-low{border-left-color:#64748b}.sev-low .sev-chip{background:rgba(100,116,139,.14);color:#475569}
@media(max-width:768px){.sev-row{grid-template-columns:1fr;gap:.45rem}.sev-row .sev-time{justify-self:start}}

/* ---- Brand logo strip (Simple Icons) ------------------------------------ */
.logo-strip{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;justify-content:center;margin:1.4rem 0}
.logo-chip{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--grey-200);border-radius:12px;padding:.55rem .9rem;font-family:var(--font-heading);font-weight:600;font-size:.82rem;color:var(--dark)}
.logo-chip .lc-ic{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-chip .lc-ic img{width:18px;height:18px;object-fit:contain;display:block}
.logo-chip .lc-ic.mono{background:linear-gradient(135deg,#3361FF,#5B8AFF);color:#fff;font-size:.6rem;font-weight:700}

/* ---- Connectors integrations cloud -------------------------------------- */
.cx-stage{background:linear-gradient(135deg,#252C39,#111827);border-radius:var(--radius-xl);padding:2rem 1rem 1.4rem;position:relative;overflow:hidden}
.cx-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(520px 520px at 50% 46%,rgba(51,97,255,.16),transparent 62%);pointer-events:none}
.cx-wrap{display:flex;justify-content:center;position:relative;z-index:1}
.cx-cloud{position:relative;width:min(92vw,620px);aspect-ratio:1;margin:0 auto}
.cx-ring{position:absolute;inset:0;border-radius:50%;animation:cxspin var(--dur,140s) linear infinite;will-change:transform;pointer-events:none}
.cx-ring.rev{animation-direction:reverse}
.cx-ring .cx-orbitline{position:absolute;left:50%;top:50%;width:calc(var(--r)*2);height:calc(var(--r)*2);transform:translate(-50%,-50%);border:1px dashed rgba(146,170,224,.22);border-radius:50%}
.cx-slot{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(-1*var(--r)))}
.cx-cap{position:absolute;left:0;top:0;transform:translate(-50%,-50%) rotate(calc(-1*var(--a)))}
.cx-tile-spin{animation:cxspin var(--dur,140s) linear infinite reverse}
.cx-ring.rev .cx-tile-spin{animation-direction:normal}
@keyframes cxspin{to{transform:rotate(360deg)}}
.cx-tile{position:relative;width:var(--tile,56px);height:var(--tile,56px);border-radius:24%;background:#fff;box-shadow:0 4px 14px rgba(17,24,39,.28),inset 0 0 0 1px rgba(37,44,57,.06);display:grid;place-items:center;transition:transform .18s ease,box-shadow .18s ease;pointer-events:auto;cursor:pointer}
.cx-tile img{width:58%;height:58%;object-fit:contain}
.cx-tile .mono{font-family:var(--font-heading);font-weight:700;color:#fff;font-size:.9rem}
.cx-tile.fallback{background:linear-gradient(135deg,#3361FF,#5B8AFF)}
.cx-tile:hover,.cx-tile:focus-visible,.cx-tile.lbl-on{transform:scale(1.14);box-shadow:0 10px 26px rgba(51,97,255,.45),inset 0 0 0 1px rgba(51,97,255,.5);z-index:6}
.cx-tile .lbl{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff;color:var(--dark);font-family:var(--font-heading);font-weight:600;font-size:.68rem;padding:.18rem .5rem;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s;box-shadow:0 2px 8px rgba(17,24,39,.18);z-index:7}
.cx-tile:hover .lbl,.cx-tile:focus .lbl,.cx-tile:focus-visible .lbl,.cx-tile.lbl-on .lbl{opacity:1}
.cx-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(86px,17%,122px);height:clamp(86px,17%,122px);border-radius:26%;background:linear-gradient(150deg,#3361FF,#1b2c66);display:grid;place-items:center;color:#fff;box-shadow:0 0 0 8px rgba(51,97,255,.14),0 0 46px rgba(51,97,255,.55);z-index:3;text-align:center}
.cx-core::before{content:"";position:absolute;inset:-3px;border-radius:26%;border:2px solid #F59E0B;opacity:.9;animation:cxpulse 3.4s ease-in-out infinite}
@keyframes cxpulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.05);opacity:1}}
.cx-core b{font-family:var(--font-heading);font-weight:700;font-size:clamp(20px,3.4vw,28px);line-height:1;display:block}
.cx-core small{display:block;font-size:9.5px;letter-spacing:.14em;color:#bcd0ff;margin-top:3px;text-transform:uppercase}
.cx-grid{display:none;flex-wrap:wrap;gap:14px;justify-content:center;padding:.5rem .25rem}
.cx-grid .cx-gt{display:flex;flex-direction:column;align-items:center;gap:6px;width:74px}
.cx-grid .cx-tile{--tile:52px}
.cx-grid .cx-gn{font-size:.68rem;color:#cfd7e6;font-family:var(--font-heading);text-align:center;line-height:1.2}
@media (prefers-reduced-motion: reduce){.cx-ring,.cx-tile-spin,.cx-core::before{animation:none !important}}
@media (max-width:560px){.cx-cloud{display:none}.cx-grid{display:flex}}

/* ---- Connectors catalog -------------------------------------------------- */
.cx-cat{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-top:1.2rem}
.cx-catcard{border:1px solid var(--grey-200);border-radius:14px;padding:1.1rem 1.2rem;background:#fff}
.cx-catcard h3{font-family:var(--font-heading);font-size:.95rem;color:var(--dark);margin:0 0 .8rem;display:flex;align-items:center;gap:.55rem}
.cx-catcard h3 .dot{width:9px;height:9px;border-radius:3px;background:var(--primary);flex-shrink:0}
.cx-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.cx-chip{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--grey-200);border-radius:9px;padding:.3rem .6rem .3rem .35rem;font-size:.78rem;font-family:var(--font-heading);font-weight:600;color:var(--dark);background:#fff}
.cx-chip .ti{width:22px;height:22px;border-radius:6px;background:#eef2ff;display:grid;place-items:center;flex:0 0 22px}
.cx-chip .ti img{width:14px;height:14px;object-fit:contain}
.cx-chip .ti.mono{background:linear-gradient(135deg,#3361FF,#5B8AFF);color:#fff;font-size:9px;font-weight:700}
@media(max-width:768px){.cx-cat{grid-template-columns:1fr}}

/* ---- Learn-to-build review gates ---------------------------------------- */
.gate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin:1.4rem 0}
.gate-card{background:#fff;border:1px solid var(--grey-200);border-radius:var(--radius-lg);padding:1.4rem;position:relative;border-top:3px solid #F59E0B}
.gate-card .gate-ic{width:46px;height:46px;border-radius:12px;background:rgba(245,158,11,.12);color:#b4720a;display:flex;align-items:center;justify-content:center;margin-bottom:.8rem}
.gate-card h3{margin:0 0 .4rem;font-size:1.05rem}
.gate-card p{margin:0 0 .6rem;color:var(--text-grey);font-size:.9rem;line-height:1.6}
.gate-card .gate-when{font-family:var(--font-heading);font-weight:600;font-size:.76rem;color:var(--primary)}
@media(max-width:768px){.gate-grid{grid-template-columns:1fr}}

/* ---- Resource link cards ------------------------------------------------- */
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.4rem}
.res-card{display:block;background:#fff;border:1px solid var(--grey-200);border-radius:var(--radius-lg);padding:1.3rem;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.res-card:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,0,0,.08);border-color:rgba(51,97,255,.4)}
.res-card .res-k{font-family:var(--font-heading);font-weight:700;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--primary)}
.res-card h3{margin:.4rem 0 .35rem;font-size:1rem}
.res-card p{margin:0;color:var(--text-grey);font-size:.88rem;line-height:1.55}
@media(max-width:768px){.res-grid{grid-template-columns:1fr}}

/* ---- Layer ledger (table -> stacked cards, How It Works) ----------------- */
.layer-ledger{display:flex;flex-direction:column;gap:.7rem;max-width:900px;margin:1.5rem auto 0}
.layer-card{display:grid;grid-template-columns:auto 1fr auto;align-items:flex-start;gap:1rem;background:#fff;border:1px solid var(--grey-200);border-left-width:5px;border-radius:var(--radius-lg);padding:1rem 1.2rem;box-shadow:0 4px 14px rgba(0,0,0,.04)}
.layer-card .lc-num{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:700;color:#fff;font-size:.92rem;flex-shrink:0}
.layer-card h4{margin:.1rem 0 .3rem;font-size:1rem}
.layer-card p{margin:0;color:var(--text-grey);font-size:.88rem;line-height:1.55}
.layer-card .lc-role{font-family:var(--font-heading);font-weight:700;font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-grey);white-space:nowrap;padding-top:.45rem}
@media(max-width:768px){.layer-card{grid-template-columns:auto 1fr}.layer-card .lc-role{display:none}}

/* ---- Section image frame (visual rhythm) -------------------------------- */
.section-figure{border-radius:var(--radius-xl);border:1px solid var(--grey-200);overflow:hidden;box-shadow:0 16px 50px rgba(0,0,0,.10);display:block;width:100%}
.section-figure.on-dark{border-color:rgba(255,255,255,.14)}

/* ---- Visible focus rings (WCAG 2.2 AA) ---------------------------------- */
a:focus-visible,button:focus-visible,.gcard:focus-visible,.res-card:focus-visible,.cx-tile:focus-visible,.logo-chip:focus-visible,.fnav-home:focus-visible{outline:3px solid #5B8AFF;outline-offset:2px;border-radius:8px}
.ai1-fnav a:focus-visible{outline-color:#FBBF24}

/* ---- Mobile diagram scroll affordance ----------------------------------- */
@media(max-width:768px){.diagram-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* ---- Platform Architecture: stat pills + primitive legend cards (round 3) -- */
.pa-statrow{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:1.5rem}
.pa-stat{flex:1 1 210px;min-width:190px;display:flex;align-items:center;gap:.85rem;background:#fff;border:1px solid var(--grey-200);border-radius:50px;padding:.7rem 1.3rem;box-shadow:0 2px 12px rgba(17,24,39,.05)}
.pa-stat .pa-num{font-family:var(--font-heading);font-weight:700;font-size:1.85rem;line-height:1;color:var(--primary);flex:0 0 auto}
.pa-stat .pa-meta{display:flex;flex-direction:column}
.pa-stat .pa-meta b{font-family:var(--font-heading);font-size:.92rem;color:var(--dark);line-height:1.2}
.pa-stat .pa-meta>span{font-size:.78rem;color:var(--grey-300);line-height:1.3}
@media(max-width:768px){.pa-stat{flex:1 1 100%}}
.prim-card{display:flex;gap:1rem;align-items:flex-start}
.prim-card .prim-ic{flex:0 0 56px;width:56px;height:56px;border-radius:var(--radius-lg);display:grid;place-items:center;background:color-mix(in srgb,var(--lc,#3361FF) 12%,#fff)}
.prim-card .prim-ic svg{width:28px;height:28px;stroke:var(--lc,#3361FF)}
.prim-card .prim-legend{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-heading);font-weight:700;font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--lc,#3361FF);margin-bottom:.35rem}
.prim-card .prim-legend .ldot{width:10px;height:10px;border-radius:3px;background:var(--lc,#3361FF)}
.prim-card .card-title{margin:0 0 .35rem}

/* ---- Applications: product cards w/ thumbnails + replaces table (round 3) -- */
.app-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem;margin-top:1.5rem}
@media(max-width:900px){.app-grid{grid-template-columns:1fr}}
.app-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--grey-200);border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 6px 24px rgba(17,24,39,.06)}
.app-card .app-thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top center;background:#0d1622;border-bottom:1px solid var(--grey-200)}
.app-card .app-body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.app-card .app-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.55rem}
.app-card .app-ic{width:42px;height:42px;border-radius:11px;flex:0 0 42px;display:grid;place-items:center;background:rgba(51,97,255,.1)}
.app-card .app-ic svg{width:22px;height:22px}
.app-card h3{margin:0;font-family:var(--font-heading);font-size:1.08rem;color:var(--dark)}
.app-card .app-text{color:var(--text-grey);font-size:.92rem;line-height:1.6;margin:.1rem 0 .9rem}
.app-status{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:50px;padding:.2rem .6rem;margin-left:auto;white-space:nowrap}
.app-status.live{background:rgba(34,197,94,.14);color:#15803d}
.app-status.prog{background:rgba(255,133,67,.16);color:#b45309}
.app-replaces{font-size:.82rem;color:var(--text-grey);margin-top:auto;border-top:1px dashed var(--grey-200);padding-top:.7rem}
.app-replaces b{color:var(--dark);font-family:var(--font-heading);font-weight:600}
.app-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.2rem}
@media(max-width:768px){.app-mini{grid-template-columns:1fr}}

/* ==========================================================================
   IMAGERY + NAVIGATION PASS — section images, sticky Ai1 Technical Library
   side rail, mobile Guides dropdown, prev/next, quiet close link.
   Reuses the blog .blog-sidebar sticky pattern + footer-nav current-state.
   ========================================================================== */

/* ---- Section images (additive, full content-width, 16:9) ---------------- */
.guide-figure-block{margin:1.4rem 0}
.guide-figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--grey-200);box-shadow:0 16px 50px rgba(0,0,0,.10)}
.guide-figure img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#0d1622}
@media(max-width:768px){.guide-figure-block{margin:.6rem 0}}

/* ---- Contained two-column shell (content + 240px rail) ------------------- */
.guide-shell{
  max-width:var(--max-width);            /* 1170px, same as .container */
  margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1fr) 240px;
  gap:2.5rem;
  align-items:start;
}
.guide-main{min-width:0;}

/* the body sections already wrap their content in a .container; inside
   .guide-main that centering is now done by .guide-shell, so neutralise
   the nested container to avoid a double gutter. */
.guide-main .container{max-width:none;width:100%;padding:0;margin:0;}

/* keep the alternating rhythm: tinted bands become contained rounded blocks */
.guide-main > .section{padding:2.25rem 0;}
.guide-main > .section.bg-light{
  background:var(--blue-light);
  border-radius:var(--radius-lg);
  padding:2rem 1.75rem;
  margin:1rem 0;
}

/* ---- The Ai1 Technical Library rail ------------------------------------- */
/* margin-top matches the first content section's top padding (2.25rem) so the
   rail's gap below the hero is identical at scroll 0 and when stuck. The sticky
   top:6.5rem offset is unaffected by this margin, so there is no double gap. */
.tech-rail{position:sticky;top:6.5rem;align-self:start;margin-top:2.25rem;}
.tech-rail-widget{
  background:#f9fafb;
  border:1px solid var(--grey-200);
  border-radius:var(--radius-lg);
  padding:1.25rem;
}
.tech-rail-widget h4{
  font-family:var(--font-heading);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--dark);
  margin:0 0 .9rem;padding-bottom:.7rem;border-bottom:2px solid var(--primary);
}
.tech-rail-item{
  display:flex;align-items:flex-start;gap:.6rem;
  padding:.55rem .55rem;border-radius:.5rem;text-decoration:none;
  transition:background .15s ease;
}
.tech-rail-item .ti-ic{
  flex:0 0 26px;width:26px;height:26px;border-radius:7px;
  background:rgba(51,97,255,.10);display:flex;align-items:center;justify-content:center;
  color:var(--primary);
}
.tech-rail-item .ti-ic svg{width:15px;height:15px;}
.tech-rail-item b{
  font-family:var(--font-heading);font-weight:700;font-size:.82rem;
  color:var(--dark);line-height:1.25;display:block;
}
.tech-rail-item .ti-sub{font-size:.7rem;color:var(--grey-300);line-height:1.3;display:block;margin-top:.1rem;}
.tech-rail-item:hover{background:var(--blue-light);}
.tech-rail-item:hover b{color:var(--primary);}

/* current page: blue inset bar (AA-safe on a light card; the dark footer keeps amber) */
.tech-rail-item.is-current{background:var(--blue-light);box-shadow:inset 3px 0 0 var(--primary);cursor:default;}
.tech-rail-item.is-current .ti-ic{background:var(--primary);color:#fff;}
.tech-rail-item .ti-here{display:none;}
.tech-rail-item.is-current .ti-here{
  display:block;margin-top:.3rem;font-family:var(--font-heading);font-weight:700;
  font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);
}
.tech-rail-item:focus-visible{outline:3px solid var(--primary);outline-offset:2px;}

/* ----- single switch point at 768px: rail above, mobile dropdown below ---- */
@media (max-width:768px){
  .guide-shell{display:block;padding:0;}
  .guide-main .container{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter);}
  .guide-main > .section{padding:var(--section-gap) 0;}
  .guide-main > .section.bg-light{border-radius:0;margin:0;padding:var(--section-gap) 0;}
  .tech-rail{display:none;}
}

/* ---- Mobile-only Guides dropdown in the sticky top nav ------------------- */
.nav-guides{display:none;}
@media (max-width:768px){
  .nav-guides{display:block;border-bottom:1px solid rgba(255,255,255,.06);}
  .nav-guides-summary{
    display:flex;align-items:center;justify-content:space-between;
    padding:.85rem 1.25rem;color:#fff;
    font-family:var(--font-body);font-size:1rem;font-weight:700;
    cursor:pointer;list-style:none;
  }
  .nav-guides-summary::-webkit-details-marker{display:none;}
  .nav-guides-summary::after{content:"\25BE";color:rgba(255,255,255,.6);transition:transform .2s ease;}
  .nav-guides[open] .nav-guides-summary::after{transform:rotate(180deg);}
  .nav-guides-list{display:flex;flex-direction:column;background:rgba(255,255,255,.03);}
  .nav-guide-link{
    display:block;padding:.7rem 1.25rem .7rem 2rem;
    color:rgba(255,255,255,.78);font-size:.95rem;font-weight:600;
    border-bottom:1px solid rgba(255,255,255,.05);
  }
  .nav-guide-link:last-child{border-bottom:0;}
  .nav-guide-link:hover,
  .nav-guide-link[aria-current="page"]{color:#fff;background:rgba(51,97,255,.18);}
  .nav-guides-summary:focus-visible,
  .nav-guide-link:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;}
}

/* ---- Previous / next guide pair ----------------------------------------- */
.guide-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2.5rem 0 0;}
.guide-pn{
  display:flex;flex-direction:column;gap:.25rem;
  padding:1rem 1.2rem;border:1px solid var(--grey-200);border-radius:var(--radius-lg);
  text-decoration:none;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.guide-pn:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.06);}
.guide-pn .pn-dir{font-family:var(--font-heading);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-300);}
.guide-pn .pn-title{font-family:var(--font-heading);font-weight:700;color:var(--dark);}
.guide-pn.pn-next{text-align:right;}
.guide-pn.pn-prev .pn-dir::before{content:"\2190  ";}
.guide-pn.pn-next .pn-dir::after{content:"  \2192";}
.guide-pn:focus-visible{outline:3px solid var(--primary);outline-offset:2px;}
@media (max-width:600px){.guide-prevnext{grid-template-columns:1fr;}.guide-pn.pn-next{text-align:left;}}

/* ---- Quiet close link (replaces the old CTA band) ----------------------- */
.guide-quietlink{margin:2.25rem 0 .5rem;font-family:var(--font-heading);font-size:.95rem;}
.guide-quietlink a{color:var(--primary);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s ease;}
.guide-quietlink a:hover{border-bottom-color:var(--primary);}