/* ============================================================
   Landing FX + richer mock components
   - Living glass orbs background (mouse + scroll reactive)
   - Orbit-shaped section dividers (platform identity)
   - Interactive integration flowchart
   - High-fidelity task-card & pre-meeting-brief mocks
   Loaded AFTER css/landing.css — also carries a few overrides.
   ============================================================ */

/* ---------- let the living background show through ---------- */
.lp { background: var(--al-ice); position: relative; }
.lp-hero, .lp-stats, .lp-sec, .lp-footer { background-color: transparent; }
.lp-sec.paper-sec { background: rgba(247,249,255,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lp-wrap, .lp-nav { position: relative; z-index: 2; }
/* .lp-mobile stays position:fixed (set in landing.css) so the off-screen
   menu sheet never extends document width on mobile */

/* ============================================================
   BACKGROUND — calm per-section gradient wash + a distilled
   "task complete" circle (ring + check) motif that travels
   with the scroll. No mouse interaction — purely supportive.
   ============================================================ */
@property --wash-a { syntax: '<color>'; inherits: true; initial-value: rgba(51,92,255,.10); }
@property --wash-b { syntax: '<color>'; inherits: true; initial-value: rgba(120,90,240,.06); }
.lp-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lp-bg-wash { position: absolute; inset: -12%;
  background:
    radial-gradient(1100px 760px at 80% -6%, var(--wash-a), transparent 60%),
    radial-gradient(980px 720px at 14% 106%, var(--wash-b), transparent 60%);
  transition: --wash-a 1.1s var(--ease-out), --wash-b 1.1s var(--ease-out); }
/* Mixpanel-style cohesive aurora — soft colour fields that slowly drift */
.lp-bg-wash::before, .lp-bg-wash::after { content: ""; position: absolute; border-radius: 50%; filter: blur(64px); }
.lp-bg-wash::before { width: 60vw; height: 60vw; left: -10vw; top: 2vh;
  background: radial-gradient(circle, rgba(51,92,255,.18), transparent 66%); animation: bgDriftA 28s ease-in-out infinite alternate; }
.lp-bg-wash::after { width: 52vw; height: 52vw; right: -8vw; top: 42vh;
  background: radial-gradient(circle, rgba(124,92,240,.16), transparent 66%); animation: bgDriftB 34s ease-in-out infinite alternate; }
@keyframes bgDriftA { to { transform: translate(9vw, 12vh) scale(1.12); } }
@keyframes bgDriftB { to { transform: translate(-8vw, -9vh) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .lp-bg-wash { transition: none; } .lp-bg-wash::before, .lp-bg-wash::after { animation: none; } }

/* ============================================================
   ORBIT-SHAPED SECTION DIVIDERS (platform identity)
   ============================================================ */
.lp-divider { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 0; height: 96px; pointer-events: none; }
.lp-divider .ln { height: 1px; flex: 1; max-width: 360px; background: linear-gradient(90deg, transparent, var(--al-line-2)); }
.lp-divider .ln.r { background: linear-gradient(90deg, var(--al-line-2), transparent); }
.lp-divider .orbit { position: relative; width: 60px; height: 60px; flex: none; margin: 0 14px; }
.lp-divider .orbit i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--al-blue-200); }
.lp-divider .orbit i:nth-child(2) { inset: 13px; border-color: var(--al-blue-300); }
.lp-divider .orbit .core { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--al-blue); box-shadow: var(--ring-blue); }
.lp-divider .orbit .sat { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; animation: orbitspin 9s linear infinite; }
.lp-divider .orbit .sat::before { content: ""; position: absolute; top: -3px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--al-blue-400); }
.lp-divider .orbit .sat.s2 { width: 34px; height: 34px; margin: -17px 0 0 -17px; animation-duration: 5.5s; animation-direction: reverse; }
.lp-divider .orbit .sat.s2::before { background: var(--al-blue); width: 5px; height: 5px; margin-left: -2.5px; }
@keyframes orbitspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lp-divider .orbit .sat { animation: none; } }
@media (max-width: 560px) { .lp-divider .ln { max-width: 120px; } .lp-divider { height: 64px; } }

/* ============================================================
   HI-FI TASK CARD MOCK (mirrors the product board)
   ============================================================ */
.tk { background: #fff; border: 1px solid var(--al-line); border-radius: 10px; padding: 11px 12px 10px 13px;
  box-shadow: var(--shadow-xs); position: relative; text-align: left; }
.tk.collapsed { padding-bottom: 11px; }
.tk-stripe { position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--al-blue); }
.tk-sum { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--al-navy); line-height: 1.35; margin: 0; }
.tk-labels { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.tk-chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700; }
.tk-chip i { font-size: 12px; }
.tk-chip.ai { background: var(--al-blue-50); color: var(--al-blue); }
.tk-chip.hi { background: #FDECEC; color: var(--al-danger); }
.tk-chip.md { background: #FFF3E0; color: var(--al-warning); }
.tk-chip.epic { background: #F1ECFF; color: #6B3FE0; }
.tk-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.tk-key { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-size: 11.5px; font-weight: 700; color: var(--al-text-3); }
.tk-key i { font-size: 13px; color: var(--al-blue); }
.tk-prio { font-size: 15px; line-height: 1; }
.tk-prio.hi { color: var(--al-danger); }
.tk-prio.md { color: var(--al-warning); }
.tk-prio.lo { color: var(--al-blue-400); }
.tk-sp { flex: 1; }
.tk-pts { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; color: var(--al-text-3); background: var(--al-paper); border: 1px solid var(--al-line); border-radius: var(--radius-pill); min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; }
.tk-av { width: 24px; height: 24px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-display); font-size: 10px; font-weight: 800; }

/* a single board column (used in how-it-works + use cases) */
.tk-col { background: var(--al-paper); border: 1px solid var(--al-line); border-radius: var(--radius-lg); padding: 10px; display: flex; flex-direction: column; gap: 9px; }
.tk-col-head { display: flex; align-items: center; gap: 8px; padding: 4px 4px 2px; }
.tk-col-dot { width: 8px; height: 8px; border-radius: 50%; }
.tk-col-name { font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--al-text-2); }
.tk-col-n { font-family: var(--font-display); font-size: 11px; font-weight: 700; color: var(--al-text-3); background: var(--al-line); border-radius: var(--radius-pill); min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; }

/* board with 3 columns for the bento / use-case media */
.tk-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* ============================================================
   AGENT-RUN MOCK (how-it-works step 1)
   ============================================================ */
.ar { display: flex; flex-direction: column; gap: 10px; }
.ar-row { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--al-line); border-radius: var(--radius-md); padding: 11px 13px; }
.ar-ic { width: 30px; height: 30px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 16px; background: var(--al-blue-50); color: var(--al-blue); }
.ar-main { flex: 1; min-width: 0; }
.ar-t { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--al-navy); }
.ar-s { font-size: 11.5px; color: var(--al-text-3); margin-top: 1px; }
.ar-stat { font-family: var(--font-display); font-size: 12px; font-weight: 800; color: var(--al-success); display: inline-flex; align-items: center; gap: 4px; }
.ar-stat.scan { color: var(--al-warning); }
.ar-skip { display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px; border: 1px dashed var(--al-line-2); border-radius: var(--radius-md); background: rgba(247,249,255,.6); }
.ar-skip i { color: var(--al-text-3); font-size: 16px; margin-top: 1px; }
.ar-skip-t { font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--al-text-2); }
.ar-skip-d { font-size: 11px; color: var(--al-text-3); margin-top: 1px; }

/* ============================================================
   PRE-MEETING BRIEF MOCK (mirrors product brief)
   ============================================================ */
.pb { background: #fff; border: 1px solid var(--al-line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); text-align: left; }
.pb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px;
  background: linear-gradient(100deg, var(--al-blue-50) 0%, rgba(255,255,255,0) 72%); border-bottom: 1px solid var(--al-line); }
.pb-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 13.5px; font-weight: 800; color: var(--al-navy); }
.pb-title i { color: var(--al-blue); font-size: 17px; }
.pb-recall { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; font-family: var(--font-display); color: var(--al-success); background: #E6F7EE; border-radius: var(--radius-pill); padding: 4px 9px; }
.pb-recall i { font-size: 13px; }
.pb-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.pb-person { display: flex; align-items: center; gap: 11px; }
.pb-av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-display); font-size: 13px; font-weight: 800; }
.pb-name { font-family: var(--font-display); font-size: 14.5px; font-weight: 800; color: var(--al-navy); display: flex; align-items: center; gap: 8px; }
.pb-dm { font-family: var(--font-display); font-size: 10px; font-weight: 700; color: var(--al-blue); background: var(--al-blue-50); border-radius: var(--radius-pill); padding: 3px 8px; }
.pb-role { font-size: 12px; color: var(--al-text-3); margin-top: 1px; }
.pb-block-t { font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--al-text-3); margin-bottom: 9px; }
.pb-claim { padding-left: 12px; border-left: 2px solid var(--al-line-2); }
.pb-claim + .pb-claim { margin-top: 11px; }
.pb-k { font-family: var(--font-display); font-size: 11.5px; font-weight: 700; color: var(--al-text-2); display: flex; align-items: center; gap: 6px; }
.pb-k .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--al-success); }
.pb-k .dot.med { background: var(--al-warning); }
.pb-v { font-size: 13px; color: var(--al-navy); line-height: 1.45; margin-top: 3px; }
.pb-owed { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: var(--al-paper); border: 1px solid var(--al-line); border-radius: var(--radius-md); }
.pb-owed + .pb-owed { margin-top: 8px; }
.pb-owed i { color: var(--al-blue); font-size: 18px; flex: none; }
.pb-owed-t { font-size: 12.5px; font-weight: 600; color: var(--al-navy); flex: 1; }
.pb-due { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; color: var(--al-warning); background: #FFF3E0; border-radius: var(--radius-pill); padding: 3px 8px; }

/* ============================================================
   INTEGRATION PIPELINE — Sources → Platform → AI → Board
   (shows the actual flow; animates a packet through the stages)
   ============================================================ */
.lp-pipe { position: relative; display: flex; align-items: stretch; gap: 0;
  background: #fff; border: var(--card-border); border-radius: var(--radius-2xl); box-shadow: 0 30px 64px -22px rgba(20,23,87,.24), 0 6px 18px -10px rgba(20,23,87,.12); padding: 34px 28px; overflow: hidden; }
.lp-pipe-stage { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; position: relative; z-index: 1; }
.lp-pipe-cap { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--al-navy); }
.lp-pipe-box { width: 100%; height: 152px; background: var(--al-paper); border: 1.5px solid var(--al-line); border-radius: var(--radius-lg);
  padding: 14px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; overflow: hidden;
  transition: border-color .3s var(--ease-out), box-shadow .3s, transform .3s, background .3s; }
.lp-pipe-stage.lit .lp-pipe-box { border-color: var(--al-blue); box-shadow: var(--shadow-md); transform: translateY(-3px); background: #fff; }
.lp-pipe-logos { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.lp-pipe-logo { width: 32px; height: 32px; border-radius: 9px; background: #fff; border: 1px solid var(--al-line); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-xs); }
.lp-pipe-logo img { width: 20px; height: 20px; object-fit: contain; }
.lp-pipe-icon { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; flex: none; }
.lp-pipe-icon.platform { background: var(--al-navy); }
.lp-pipe-icon.ai { background: var(--al-blue); }
.lp-pipe-name { font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--al-navy); }
.lp-pipe-sub { font-size: 11px; color: var(--al-text-3); line-height: 1.35; }
.lp-pipe-mini { width: 100%; display: flex; flex-direction: column; gap: 5px; }
.lp-pipe-task { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--al-line); border-radius: 7px; padding: 6px 7px; transition: border-color .3s, transform .3s; }
.lp-pipe-stage.lit .lp-pipe-task { border-color: var(--al-line-2); }
.lp-pipe-task .d { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--al-line-2); }
.lp-pipe-task .b { height: 5px; border-radius: 3px; background: var(--al-line); flex: 1; }
/* connector */
.lp-pipe-link { flex: 0 0 58px; align-self: center; position: relative; height: 2px; margin-top: 10px;
  background: linear-gradient(90deg, var(--al-line), var(--al-blue-200), var(--al-line)); }
.lp-pipe-link .pkt { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: var(--al-blue); box-shadow: 0 0 0 4px rgba(51,92,255,.15), 0 0 10px rgba(51,92,255,.6); opacity: 0; transform: translateX(-50%); }
.lp-pipe-link.flow .pkt { animation: pktflow .9s var(--ease-in-out) forwards; }
@keyframes pktflow { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.lp-pipe-link .lbl { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-display); font-size: 9.5px; font-weight: 700; color: var(--al-text-3); transition: color .3s; }
.lp-pipe-link.flow .lbl { color: var(--al-blue); }
.lp-pipe-hint { text-align: center; font-size: 13px; color: var(--al-text-3); margin-top: 20px; }
.lp-pipe-hint b { color: var(--al-blue); font-weight: 700; }
@media (max-width: 860px) {
  .lp-pipe { flex-direction: column; gap: 4px; padding: 26px 18px; }
  .lp-pipe-box { height: auto; min-height: 0; }
  .lp-pipe-link { flex-basis: 30px; width: 2px; height: 30px; margin: 0; }
  .lp-pipe-link .pkt { animation: none !important; }
  .lp-pipe-link.flow .pkt { top: 0; left: 50% !important; opacity: 1; }
  .lp-pipe-link .lbl { bottom: auto; top: 50%; left: 14px; transform: translateY(-50%); }
}

/* ---------- gentle section scroll-snap (proximity) ---------- */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.lp-snap { scroll-snap-type: y proximity; scroll-padding-top: 76px; }
  html.lp-snap .snap { scroll-snap-align: start; scroll-snap-stop: normal; }
}

/* ============================================================
   COPY / LAYOUT TWEAKS
   ============================================================ */
.lp-sec-head.wide { max-width: 1000px; }
.lp-sec-title.oneline { white-space: nowrap; }
@media (max-width: 720px) { .lp-sec-title.oneline { white-space: normal; } }

/* use-case media: give the framed board some height rhythm */
.lp-uc-frame .tk-board { gap: 9px; }
.lp-uc-frame .tk-col-head { padding-top: 2px; }

/* pricing teaser link row */
.lp-price-more { text-align: center; margin-top: 34px; }
.lp-price-more a { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 700; color: var(--al-blue); font-size: 15px; }
.lp-price-more a i { transition: transform .18s var(--ease-out); }
.lp-price-more a:hover i { transform: translateX(3px); }

/* hero overlay cards (pre-meeting + board task) */
.lp-hv-brief { position: absolute; top: -30px; left: -56px; width: 268px; z-index: 3; }
.lp-hv-task { position: absolute; bottom: -26px; right: -44px; width: 250px; z-index: 3; }
.lp-hv-task .tk { box-shadow: var(--shadow-lg); border-color: var(--al-line-2); }
.lp-hv-brief .pb { box-shadow: var(--shadow-lg); }
@media (max-width: 980px) {
  .lp-hv-brief { left: -14px; top: -22px; width: 232px; }
  .lp-hv-task { right: -10px; width: 220px; }
}
@media (max-width: 560px) {
  .lp-hv-brief { left: -6px; width: 200px; }
  .lp-hv-task { right: -6px; bottom: -14px; width: 192px; }
}

/* ============================================================
   GLASSIER STICKY NAV (more transparent)
   ============================================================ */
.lp-nav { background: rgba(238,243,255,.5); -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px); }
.lp-nav.scrolled { background: rgba(255,255,255,.58); -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px);
  box-shadow: 0 1px 0 var(--al-line); }

/* ============================================================
   MUTED MOCK DATA — grey the data so the eye stays on the copy
   (integration logos keep their colour; chrome/structure stays)
   ============================================================ */
.lp .tk-av, .lp .pb-av { background: var(--al-line-2) !important; color: #fff !important; }
.lp .tk-stripe { background: var(--al-line-2) !important; }
.lp .tk-prio { color: var(--al-placeholder) !important; }
.lp .tk-key i, .lp .pb-owed i { color: var(--al-line-2) !important; }
.lp .tk-chip { background: var(--al-paper) !important; color: var(--al-text-3) !important; }
.lp .tk-chip i { color: var(--al-text-3) !important; }
.lp .tk-col-dot { background: var(--al-line-2) !important; }
.lp .pb-top { background: var(--al-paper) !important; }
.lp .pb-title i { color: var(--al-text-3) !important; }
.lp .pb-recall, .lp .pb-dm, .lp .pb-due { background: var(--al-paper) !important; color: var(--al-text-3) !important; }
.lp .pb-k .dot { background: var(--al-line-2) !important; }
.lp .ar-ic, .lp .lp-tp-ic { background: var(--al-paper) !important; color: var(--al-text-3) !important; }
.lp .ar-stat { color: var(--al-text-3) !important; }
.lp .tk-sum, .lp .pb-v, .lp .ar-t, .lp .pb-name, .lp .pb-owed-t { color: var(--al-text-2) !important; }
.lp .ov-met-num, .lp .ov-greet { color: var(--al-text-2) !important; }

/* ============================================================
   OVERVIEW SCREEN MOCK (hero right side)
   ============================================================ */
.ovm { display: flex; flex-direction: column; gap: 13px; }
.ovm-greet { display: flex; flex-direction: column; gap: 6px; }
.ov-greet { font-family: var(--font-display); font-size: 16px; font-weight: 800; }
.ovm-sub { display: flex; flex-direction: column; gap: 5px; }
.ovm-sub .b { height: 7px; border-radius: 4px; background: var(--al-line); }
.ovm-mets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ovm-met { background: var(--al-paper); border: 1px solid var(--al-line); border-radius: var(--radius-md); padding: 10px 9px; display: flex; flex-direction: column; gap: 5px; }
.ov-met-ic { font-size: 15px; color: var(--al-text-3); }
.ov-met-num { font-family: var(--font-display); font-size: 19px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.ovm-met .l { height: 5px; border-radius: 3px; background: var(--al-line); width: 80%; }
.ovm-cu { background: var(--al-paper); border: 1px solid var(--al-line); border-radius: var(--radius-md); padding: 11px 12px; display: flex; flex-direction: column; gap: 9px; }
.ovm-cu-h { font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--al-text-3); }
.ovm-ev { display: flex; align-items: center; gap: 9px; }
.ovm-ev .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--al-line-2); flex: none; }
.ovm-ev .b { height: 7px; border-radius: 4px; background: var(--al-line); }

/* ============================================================
   HOW-IT-WORKS PANEL ANIMATIONS (replay on tab activate)
   ============================================================ */
@keyframes hwIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hwScan { from { width: 8%; } to { width: 100%; } }
.lp-tabpanel .hw-item { opacity: 0; }
.lp-tabpanel.play .hw-item { animation: hwIn .5s var(--ease-out) forwards; }
.lp-tabpanel.play .hw-item:nth-child(1) { animation-delay: .05s; }
.lp-tabpanel.play .hw-item:nth-child(2) { animation-delay: .22s; }
.lp-tabpanel.play .hw-item:nth-child(3) { animation-delay: .39s; }
.lp-tabpanel.play .hw-item:nth-child(4) { animation-delay: .56s; }
/* scan progress bar (Review) */
.hw-scan { height: 6px; border-radius: 3px; background: var(--al-line); overflow: hidden; margin-top: 2px; }
.hw-scan span { display: block; height: 100%; width: 8%; border-radius: 3px; background: var(--al-blue-300); }
.lp-tabpanel.play .hw-scan span { animation: hwScan 2s var(--ease-out) forwards; }
/* chip pop (Prioritize / Draft) */
@keyframes hwPop { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
.lp-tabpanel .hw-pop { opacity: 0; }
.lp-tabpanel.play .hw-pop { animation: hwPop .42s var(--ease-out) forwards; animation-delay: .7s; }
/* checkbox toggle (Prepare) */
.lp-tabpanel .pb-owed .hw-check-on { display: none; }
.lp-tabpanel.play .pb-owed.done .hw-check-off { display: none; }
.lp-tabpanel.play .pb-owed.done .hw-check-on { display: inline; color: var(--al-success) !important; }
@media (prefers-reduced-motion: reduce) {
  .lp-tabpanel .hw-item, .lp-tabpanel .hw-pop { opacity: 1 !important; animation: none !important; }
  .hw-scan span { width: 100% !important; }
}

/* ============================================================
   SPRINT-PLANNING ANIMATION (task moves between sprints)
   ============================================================ */
.spr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; position: relative; }
.spr-col { background: #fff; border: 1px solid var(--al-line); border-radius: var(--radius-md); padding: 9px; display: flex; flex-direction: column; gap: 7px; min-height: 132px; transition: border-color .3s, background .3s; }
.spr-col.target.armed { border-color: var(--al-blue); background: var(--al-blue-50); }
.spr-col-h { display: flex; align-items: center; gap: 6px; padding: 2px 2px 0; }
.spr-col-h .d { width: 7px; height: 7px; border-radius: 50%; background: var(--al-line-2); flex: none; }
.spr-col-h .t { font-family: var(--font-display); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--al-text-3); }
.spr-card { background: var(--al-paper); border: 1px solid var(--al-line); border-radius: 8px; padding: 8px 9px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-xs); }
.spr-card .ln { height: 6px; border-radius: 3px; background: var(--al-line-2); }
.spr-card .ln.s { background: var(--al-line); width: 60%; }
.spr-card.flyer { position: absolute; left: 0; top: 0; width: calc(50% - 6px); z-index: 4; box-shadow: var(--shadow-lg); border-color: var(--al-blue-200);
  transition: transform .9s var(--ease-in-out), opacity .4s; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .spr-card.flyer { display: none; } }