/* Motion Studio on QOLA B2B design system V4 (Justin, 8 Nov 2026): a sister site to /for-attorneys with the same
   ground, glass cards, one-layer shadows, gradient buttons with ink text and type (design-system/B2B-DESIGN-SYSTEM-V4.md).
   Justin kept QOLA teal ("Yes, keep teal", 8 Nov). The accent lives in --ms-* so one block changes it later.
   Opens dark (data-qmode="dark", set before first paint); light version through the existing day/night switch.
   Load after styles.css. Firm brand colours stay inside the firm's own videos and previews; nothing here touches them. */

:root {
  --ms-1: #5EEAD4; --ms-2: #2DD4BF; --ms-3: #14B8A6; --ms-4: #0D9488; --ms-5: #0F766E; --ms-p1: #99F6E4; --ms-p2: #CCFBF1; --ms-dk: #134E4A;
  --ms-rgb: 45, 212, 191; --ms-rgb-d: 13, 148, 136; --ms-rgb-m: 20, 184, 166; --ms-rgb-p: 153, 246, 228; --ms-rgb-1: 94, 234, 212;
  --ms-on: #04211d;
  --ms-grad: linear-gradient(180deg, var(--ms-1) 0%, var(--ms-2) 46%, var(--ms-3) 100%);
  --ms-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Tokens: dark ---------- */
:root[data-qmode="dark"] {
  --bg: #0b141c; --bg-2: #0e1a24; --surface: #111c25; --surface2: #15222c; --stage: #070d13;
  --ink: #f4f8fa; --soft: #c9d6dd; --muted: #97a9b3;
  --line: rgba(255, 255, 255, .11); --line2: rgba(255, 255, 255, .18); --hair: rgba(255, 255, 255, .07);
  --accent: var(--ms-1); --accent-soft: rgba(var(--ms-rgb), .12);
  --mark: rgba(var(--ms-rgb), .18); --mark-ink: var(--ms-p2);
  --band: transparent; --band-btn: var(--ms-2); --band-btn-ink: var(--ms-on);
  --card: linear-gradient(180deg, rgba(255, 255, 255, .062), rgba(255, 255, 255, .026));
  --edge: inset 0 1px 0 rgba(255, 255, 255, .07);
  --sh-sm: 0 6px 20px rgba(0, 0, 0, .28); --sh-card: 0 12px 40px rgba(0, 0, 0, .34); --sh-hero: 0 28px 64px rgba(0, 0, 0, .55);
  --wash-a: rgba(245, 158, 11, .17); --wash-b: rgba(34, 211, 238, .13); --wash-c: rgba(20, 184, 166, .22);
  --nav: rgba(11, 20, 28, .72); --ghost: rgba(255, 255, 255, .06); --ghost-hi: rgba(255, 255, 255, .11);
  color-scheme: dark;
}
/* ---------- Tokens: light ---------- */
:root[data-qmode="light"] {
  --bg: #eef5f7; --bg-2: #f5f9fa; --surface: #ffffff; --surface2: #f5f9fa; --stage: #0e1a24;
  --ink: #0e1a24; --soft: #33464f; --muted: #50646d;
  --line: rgba(14, 26, 36, .10); --line2: rgba(14, 26, 36, .16); --hair: rgba(14, 26, 36, .07);
  --accent: #0e1a24; --accent-soft: rgba(20, 184, 166, .12);          /* light mode: teal is a fill, never text */
  --mark: rgba(20, 184, 166, .16); --mark-ink: #0e1a24;
  --band: transparent; --band-btn: var(--ms-2); --band-btn-ink: var(--ms-on);
  --card: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .66));
  --edge: inset 0 0 0 1px rgba(255, 255, 255, .7);
  --sh-sm: 0 6px 20px rgba(14, 26, 36, .07); --sh-card: 0 12px 40px rgba(14, 26, 36, .10); --sh-hero: 0 28px 64px rgba(14, 26, 36, .22);
  --wash-a: rgba(245, 158, 11, .26); --wash-b: rgba(56, 189, 248, .30); --wash-c: rgba(20, 184, 166, .26);
  --nav: rgba(245, 249, 250, .72); --ghost: rgba(255, 255, 255, .62); --ghost-hi: #ffffff;
  --glow: rgba(20, 184, 166, 0);
  color-scheme: light;
}

/* ---------- Ground: one gradient, still corner washes ---------- */
:root[data-qmode] body {
  background:
    radial-gradient(640px 420px at 0% 0%, var(--wash-a), transparent 70%),
    radial-gradient(760px 460px at 100% 0%, var(--wash-b), transparent 70%),
    radial-gradient(820px 520px at 100% 100%, var(--wash-c), transparent 72%),
    linear-gradient(160deg, var(--bg-2), var(--bg) 40%);
  background-attachment: fixed;
  color: var(--ink);
}

/* ---------- Boxes: glass cards, one-layer shadow ---------- */
:root[data-qmode] .bx, :root[data-qmode] .firm, :root[data-qmode] .prompt { background: var(--card); border-color: var(--line); box-shadow: var(--edge), var(--sh-sm); }
:root[data-qmode] .hx.bx { background: var(--card); box-shadow: var(--edge), var(--sh-card); }   /* dot grid retired */
:root[data-qmode="dark"] .hx.bx::before { background: rgba(var(--ms-rgb-m), .30); }
:root[data-qmode="light"] .hx.bx::before { background: rgba(var(--ms-rgb-m), .14); }
:root[data-qmode="dark"] .cta, :root[data-qmode="dark"] .cta.bx, :root[data-qmode="dark"] .rw.bx { background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(var(--ms-rgb-m), .20), transparent 70%), var(--card); }
:root[data-qmode="light"] .cta, :root[data-qmode="light"] .cta.bx { background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(var(--ms-rgb-m), .14), transparent 70%), var(--card); color: var(--ink); }
:root[data-qmode] .prompt pre::after { background: linear-gradient(transparent, var(--surface)); }

/* ---------- Headline highlight: 2 to 4 words, upright, no sheen ---------- */
:root[data-qmode] .hx h1 .hl { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-size: 100% 100%; animation: none !important; }
:root[data-qmode="dark"] .hx h1 .hl { background-image: linear-gradient(90deg, #5eead4, #2dd4bf 55%, #14b8a6); }
:root[data-qmode="light"] .hx h1 .hl { background-image: linear-gradient(90deg, #115e59, #155e75); }

/* ---------- Main buttons: teal gradient, ink text ---------- */
:root[data-qmode] .cta a.go, :root[data-qmode] .hx-go, :root[data-qmode] .site-go, :root[data-qmode] .vb-copy, :root[data-qmode] .vb-req,
:root[data-qmode] .sc-add[aria-pressed="true"], :root[data-qmode] .copy, :root[data-qmode] .wz-btn, :root[data-qmode] .mk-btn, :root[data-qmode] .fab, :root[data-qmode] .sc-copy {
  background: var(--ms-grad); border-color: transparent; color: var(--ms-on); font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(4, 33, 29, .18), 0 1px 2px rgba(4, 33, 29, .3), 0 10px 24px -8px rgba(var(--ms-rgb-m), .6);
  transition: transform .18s var(--ms-ease), box-shadow .18s var(--ms-ease);
}
:root[data-qmode="light"] :is(.cta a.go, .hx-go, .site-go, .vb-copy, .vb-req, .copy, .wz-btn, .mk-btn, .fab, .sc-copy) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(4, 33, 29, .18), 0 10px 22px -8px rgba(13, 148, 136, .55);
}
:root[data-qmode] :is(.cta a.go, .hx-go, .site-go, .vb-copy, .vb-req, .copy, .wz-btn, .mk-btn, .fab, .sc-copy):hover {
  background: linear-gradient(180deg, #7af0de 0%, #3ddcc8 46%, #19c2af 100%); color: var(--ms-on); border-color: transparent; transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(4, 33, 29, .18), 0 16px 32px -10px rgba(20, 184, 166, .7);
}
:root[data-qmode] .mk-btn::before, :root[data-qmode] .mk-btn::after { display: none; }   /* no spinning ring on the button */

/* ---------- Top bar: V4 nav. Sticky, frosted, hairline, about 64 px. Tabs are plain text; only the current one keeps
   a soft teal fill. "QOLA for Attorneys" is a small ghost button (polish pass, 8 Nov). ---------- */
:root[data-qmode] header.wrap.top {
  position: sticky; top: 0; z-index: 60; max-width: none; min-height: 64px; padding-block: 10px; gap: 12px 16px;
  padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px));
  background: var(--nav); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--hair);
}
:root[data-qmode] .top .brand-mark { height: 26px; }
:root[data-qmode] .top .brand small { font: 700 14px/1 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--soft); padding-left: 12px; border-left: 1px solid var(--line); white-space: nowrap; }
:root[data-qmode] .top .tabs { gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
:root[data-qmode] .top .tabs a, :root[data-qmode] .top .tabs .tab-soon {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; box-shadow: none; color: var(--soft); font: 600 14px/1 var(--f-body); white-space: nowrap; flex: none;
}
:root[data-qmode] .top .tabs a:hover { color: var(--ink); background: var(--ghost); border-color: transparent; }
:root[data-qmode] .top .tabs a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
:root[data-qmode] .top .tabs .tab-soon small { font: 700 11px/1 var(--f-body); letter-spacing: 0; text-transform: none; }
:root[data-qmode] .top .top-acts a {
  min-height: 44px; padding: 0 18px; border-radius: 12px; font: 600 14px/1 var(--f-body); color: var(--ink);
  background: var(--ghost); border: 1px solid var(--line2); box-shadow: var(--edge), var(--sh-sm);
  transition: border-color .18s var(--ms-ease), background .18s var(--ms-ease);
}
:root[data-qmode] .top .top-acts a:hover { color: var(--ink); background: var(--ghost-hi); border-color: rgba(var(--ms-rgb), .42); }
:root[data-qmode] .qb-rib { background: transparent; border-bottom: 1px solid var(--hair); }
:root[data-qmode] .qb-tag { background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(var(--ms-rgb), .42); }
/* sticky things below the bar start under it */
:root[data-qmode] .side { top: 80px; max-height: calc(100vh - 96px); }
@media (max-width: 1100px) { :root[data-qmode] .catbar { top: 64px; } }
@media (max-width: 640px) {
  /* phone: one slim row for brand and switch, tabs on a second row that scrolls sideways instead of wrapping */
  :root[data-qmode] header.wrap.top { padding: 8px 16px 0; row-gap: 4px; min-height: 0; }
  :root[data-qmode] .top .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 8px; width: calc(100% + 32px); }
  :root[data-qmode] .top .tabs::-webkit-scrollbar { display: none; }
  :root[data-qmode] .top .tabs a, :root[data-qmode] .top .tabs .tab-soon { flex: none; min-height: 36px; padding: 0 12px; font-size: 14px; white-space: nowrap; }
  :root[data-qmode] .side { top: 16px; }
  :root[data-qmode] .catbar { top: 96px; }
}

/* ---------- Labels: sentence-case look, no mono tracking ---------- */
:root[data-qmode] :is(.eyebrow, .demo-kicker) { font-family: var(--f-body); letter-spacing: 0; text-transform: none; font-size: 15px; font-weight: 700; color: var(--accent); }
:root[data-qmode="light"] :is(.eyebrow, .demo-kicker) { color: #0e1a24; }

/* ---------- Motion: one easing, reduced motion keeps everything still ---------- */
@media (prefers-reduced-motion: reduce) {
  :root[data-qmode] :is(.cta a.go, .hx-go, .site-go, .copy, .wz-btn, .mk-btn, .fab, .sc-copy) { transition: none; }
  :root[data-qmode] :is(.cta a.go, .hx-go, .site-go, .copy, .wz-btn, .mk-btn, .fab, .sc-copy):hover { transform: none; }
  :root[data-qmode] .hx.bx::before { animation: none !important; }
}

/* ---------- Loading and empty states (polish pass, 8 Nov) ---------- */
/* Landing, step 1: while the logo film loads, the stage shows a still placeholder (a logo block and a tagline bar) on a
   soft card fill instead of a blank box. No shimmer. The film's iframe sits on top and covers it once it draws. */
:root[data-qmode] .br-film { background: var(--card), var(--stage); }
:root[data-qmode="light"] .br-film { background: var(--card), var(--bg); }
:root[data-qmode="light"] .br-stage::before { --ghost-hi: rgba(14, 26, 36, .08); }
:root[data-qmode] .br-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--line2), var(--line2)) 50% calc(50% + 46px) / 34% 6px no-repeat,
    radial-gradient(closest-side, var(--ghost-hi) 98%, transparent) 50% calc(50% - 14px) / 64px 64px no-repeat,
    radial-gradient(ellipse 60% 70% at 50% 45%, rgba(var(--ms-rgb-m), .10), transparent 70%);
  border-radius: inherit;
}
/* Full video, not open yet: the note sits in a V4 card instead of floating over an empty page */
:root[data-qmode] .fv-soon .fv-head {
  margin: clamp(24px, 6vh, 64px) auto clamp(48px, 10vh, 120px); max-width: 920px; gap: 20px 32px; align-items: end;
  padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line); border-radius: 22px;
  background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(var(--ms-rgb-m), .14), transparent 70%), var(--card);
  box-shadow: var(--edge), var(--sh-card);
}
:root[data-qmode="dark"] .fv-soon .fv-head { box-shadow: var(--edge), var(--sh-card), 0 0 80px -30px rgba(var(--ms-rgb), .45); }
:root[data-qmode] .fv-soon .fv-switch select { background: var(--ghost); }