/* ==========================================================================
   ai-platform.css — page-specific CSS for ai-platform.html
   --------------------------------------------------------------------------
   Extracted from an inline <style> block on 2026-07-28. These rules style
   layout that exists only on this page, so they do not belong in the shared
   sheets — but they do not belong in the HTML either: as a file they are
   cacheable, diffable, and reviewable.

   Load order on this page:
       tokens.css -> licorp.css -> lic-system.css -> ai-platform.css
   Last, so page-specific layout can adjust a shared component.
   ========================================================================== */

.fl-stage{position:relative;height:220vh}
  .fl-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--bg);display:flex;align-items:center;gap:64px;padding:0 max(clamp(28px,5vw,72px), calc((100% - var(--maxw)) / 2))}
  .fl-left{flex:0 0 auto;display:flex;align-items:center;gap:44px}
  .fl-intro{flex:0 0 auto;max-width:440px}
  .fl-intro .eyebrow{margin-bottom:14px}
  .fl-title{font-size:clamp(34px,4.6vw,60px);line-height:1.04;margin:0 0 16px;color:var(--ink)}
  .fl-lead{font-size:16px;line-height:1.6;color:var(--muted);margin:0 0 24px}
  .fl-cue{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px}
  .fl-cue.flipped{flex-direction:column-reverse}
  .fl-cue .bar{width:1px;height:32px;background:var(--navy);animation:fl-cuebar 1.8s ease-in-out infinite}
  @keyframes fl-cuebar{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
  .fl-panel{position:relative;flex:1 1 auto;min-width:0;height:74vh;background:transparent;overflow:visible}
  .fl-shot{position:absolute;top:0;bottom:0;left:0;right:calc(-1 * clamp(28px,5vw,72px));display:flex;align-items:center;justify-content:flex-end;will-change:opacity}
  .fl-img{max-width:100%;max-height:100%;object-fit:contain;display:block}
  .fl-frame{position:relative;width:calc(100% + 40px);max-width:860px;margin-right:-90px;flex:0 0 auto}
  .fl-screen{position:relative;background:linear-gradient(180deg,#343941,#23272d);padding:24px 14px 15px;border-radius:16px !important;box-shadow:0 26px 52px -28px rgba(19,28,36,.36),0 5px 14px rgba(19,28,36,.10)}
  .fl-screen::before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50% !important;background:#5b6470}
  .fl-screen .fl-img{width:100%;height:auto;max-width:100%;max-height:none;display:block;border-radius:5px !important}
  .fl-cards{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);opacity:0;will-change:opacity}
  .fl-card{position:relative;background:#fff;padding:24px 22px;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  .fl-card:hover{z-index:2}
  .fl-card h3{margin:0 0 9px;font-size:18px;color:#131c24}
  .fl-card p{margin:0;font-size:14px;line-height:1.5;color:#131c24}
  .col-l:hover{transform:translateX(-12px);box-shadow:0 16px 32px rgba(0,0,0,.15)}
  .col-c:hover{transform:translateY(-12px);box-shadow:0 16px 32px rgba(0,0,0,.15)}
  .fl-upR{transform-origin:bottom right}
  .fl-upR:hover{transform:rotate(4deg);box-shadow:0 16px 32px rgba(0,0,0,.15)}
  .fl-downR{transform-origin:bottom right}
  .fl-downR:hover{transform:rotate(-4deg);box-shadow:0 16px 32px rgba(0,0,0,.15)}
  .fl-down:hover{transform:translateY(12px);box-shadow:0 16px 32px rgba(0,0,0,.15)}
  .fl-slideR:hover{transform:translateX(12px);box-shadow:0 16px 32px rgba(0,0,0,.15)}
  @media(prefers-reduced-motion:reduce){.fl-card{transition:none}.fl-cue .bar{animation:none}}
  @media(max-width:1024px){
    .fl-stage{height:auto}
    .fl-pin{position:static;height:auto;overflow:visible;padding:120px 0 50px;display:block}
    .fl-left{display:block}
    .fl-intro{position:static;transform:none;max-width:none;padding:0 24px}
    .fl-cue{display:none}
    .fl-panel{position:static;flex:none;height:auto;margin:28px 16px 0;padding:0}
    .fl-shot{position:relative;inset:auto;right:auto;height:auto;margin-bottom:16px;justify-content:center}
    .fl-img{width:100%}
    .fl-frame{width:100%;margin-right:0}
    .fl-screen{padding:18px 10px 11px}
    .fl-cards{position:relative;top:auto;left:auto;right:auto;transform:none;inset:auto;opacity:1 !important;grid-template-columns:repeat(3,1fr);gap:1px}
  }
  @media(max-width:640px){.fl-cards{grid-template-columns:1fr}}