/* =============================================================
   Bud AI OS — film-style stack sequence (.osfilm)
   The film's sc01b/sc01c stack card + "What you get" column as a
   standalone section component. Pair with assets/js/os-film-stack.js.
   No dependency on film.css / film.js — styled against site tokens
   (tokens.css + site.css must be loaded first).

   Usage: <div class="osfilm" data-osfilm> … </div> — see the
   homepage §5 THE STACK for the canonical markup.
   ============================================================= */
.osfilm{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,4.6vw,74px); align-items:stretch; margin-top:44px; }
/* card + rows flex so the left column always matches the right column's height */
.osf-card{ position:relative; width:min(480px,100%); margin:0 auto; display:flex; flex-direction:column; border:1px solid rgba(183,133,244,.22); border-radius:16px;
  background:linear-gradient(162deg,rgba(32,26,48,.62),rgba(16,12,26,.82)); box-shadow:0 30px 70px -30px rgba(0,0,0,.72); padding:14px; }
.osf-cap{ display:flex; align-items:center; justify-content:space-between; padding:2px 6px 12px; border-bottom:1px solid var(--border); margin-bottom:10px; }
.osf-cap .t{ font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bud-electric-2); font-weight:600; }
.osf-cap .s{ font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg3); }
.osf-rows{ display:flex; flex-direction:column; gap:6px; flex:1 1 auto; }
.osf-ly{ --c:#8C33EF; position:relative; display:flex; align-items:center; gap:12px; padding:10px 14px 10px 16px; border-radius:10px; flex:1 1 auto;
  border:1px solid rgba(183,133,244,.12); background:rgba(20,15,32,.5); overflow:hidden;
  transition:border-color .34s ease, background .34s ease, box-shadow .34s ease; }
.osf-ly::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c); opacity:.26; transition:opacity .34s ease, box-shadow .34s ease; }
.osf-ly .n{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--c); flex:none; width:24px; font-weight:600; }
.osf-ly .nm{ font-weight:700; font-size:14px; color:#EFE8FB; flex:none; min-width:126px; letter-spacing:-.01em; }
.osf-ly .ds{ font-size:11.5px; line-height:1.35; color:#9C90B8; font-weight:300; }
.osf-ly.on, .osf-ly:hover{ border-color:color-mix(in srgb,var(--c) 55%,transparent);
  background:color-mix(in srgb,var(--c) 14%,rgba(20,15,32,.6)); box-shadow:0 0 26px -6px color-mix(in srgb,var(--c) 48%,transparent); }
.osf-ly.on::before, .osf-ly:hover::before{ opacity:1; box-shadow:0 0 14px var(--c); }
.osf-ly.on .ds, .osf-ly:hover .ds{ color:#CBBFE4; }
/* ── right column · customer benefits ──
   The left half of §5b's outcome ledger lifted up next to the stack: a
   benefit kicker plus the plain-language claim, one row per benefit. No
   figures here — the assembled-stack → Novaria deltas stay down in §5b.
   Rows flex so the column always squares off against the stack card. */
.osf-right{ display:flex; flex-direction:column; }
.osf-ben{ display:flex; flex-direction:column; flex:1 1 auto; padding-top:16px; }
.osf-ben-head{ flex:none; font-family:var(--font-mono); font-size:10px; line-height:1; padding:0 0 17px;
  border-bottom:2px solid var(--border-strong,rgba(183,133,244,.3)); }
.osf-ben-head span{ font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--fg3); }
.osf-b{ display:flex; flex-direction:column; justify-content:center; flex:1 1 auto;
  padding:22px 0; border-bottom:1px solid var(--border,rgba(183,133,244,.14)); }
.osf-b:last-child{ border-bottom:0; }
.osf-b .k{ font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bud-electric-2); margin-bottom:9px; }
.osf-b .c{ font-size:clamp(18px,1.6vw,21px); line-height:1.24; font-weight:var(--fw-semibold,600);
  letter-spacing:-.02em; color:var(--fg1,#fff); margin:0; text-wrap:balance; }

/* entrance: hidden-until-reveal only once JS arms the sequence (data-armed),
   so no-JS / no-IO degrades to a static, fully visible stack */
.osfilm[data-armed] .osf-ly, .osfilm[data-armed] .osf-ben-head, .osfilm[data-armed] .osf-b{ opacity:0; transform:translateY(14px); }
.osfilm.play .osf-ly, .osfilm.play .osf-ben-head, .osfilm.play .osf-b{ animation:osfUp .5s cubic-bezier(.22,1,.36,1) both; }
.osfilm.play .osf-ly:nth-child(1){ animation-delay:.10s } .osfilm.play .osf-ly:nth-child(2){ animation-delay:.16s }
.osfilm.play .osf-ly:nth-child(3){ animation-delay:.22s } .osfilm.play .osf-ly:nth-child(4){ animation-delay:.28s }
.osfilm.play .osf-ly:nth-child(5){ animation-delay:.34s } .osfilm.play .osf-ly:nth-child(6){ animation-delay:.40s }
.osfilm.play .osf-ly:nth-child(7){ animation-delay:.46s } .osfilm.play .osf-ly:nth-child(8){ animation-delay:.52s }
/* the head is child 1 of .osf-ben, so the five benefit rows are 2 → 6 */
.osfilm.play .osf-ben-head{ animation-delay:.20s }
.osfilm.play .osf-b:nth-child(2){ animation-delay:.30s } .osfilm.play .osf-b:nth-child(3){ animation-delay:.38s }
.osfilm.play .osf-b:nth-child(4){ animation-delay:.46s } .osfilm.play .osf-b:nth-child(5){ animation-delay:.54s }
.osfilm.play .osf-b:nth-child(6){ animation-delay:.62s }
@keyframes osfUp{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@media (max-width:1024px){
  .osfilm{ grid-template-columns:1fr; }
  .osf-right{ max-width:480px; margin:0 auto; width:100%; }
  .osf-ben{ padding-top:30px; }
  .osf-b{ padding:20px 0; }
}
@media (prefers-reduced-motion:reduce){
  .osfilm .osf-ly, .osfilm .osf-ben-head, .osfilm .osf-b{ opacity:1; transform:none; animation:none !important; }
}