/* ============================================================================
 * SellerFlowLive — Redesign Design Tokens  (Phase 1 · foundation only)
 *
 * SCOPED + ADDITIVE. Every rule below is namespaced under [data-redesign], an
 * attribute the CURRENT app never sets — so this file has ZERO effect on the
 * existing production UI (.app / --sf-* / --m-* / .theme-dark / .theme-regular).
 * Nothing here is applied to any existing screen. Later phases (P2+) will mount
 * the redesigned screens under a [data-redesign] root and consume these tokens.
 *
 * Values are byte-for-byte from the design handoff:
 *   - design-redesign/README.md (Themes / Accent / Tokens tables)
 *   - design-redesign/SellerFlowLive.dc.html token engine (lines 871–1019),
 *     rgba() helper at line 989: rgba(hex,a) -> rgba(r,g,b,a).
 *
 * Defaults: Light theme + Indigo accent (per README "default is Light + Indigo").
 * Theme is selected via [data-theme="light"|"dark"]; accent via
 * [data-accent="indigo"|"violet"|"emerald"|"rose"|"sky"|"amber"].
 * ============================================================================ */

/* ── Accent presets: base / light / dark shades (+ rgb for soft alphas) ──────
 * Source: dc.html L871–876. `--_accent*` are PRIVATE (underscore) inputs; the
 * theme blocks below derive the public --accent* tokens from them. */
[data-redesign][data-accent="indigo"]  { --_accent:#4f46e5; --_accent-light:#a5b4fc; --_accent-dark:#3730a3; --_accent-rgb:79,70,229; }
[data-redesign][data-accent="violet"]  { --_accent:#7c3aed; --_accent-light:#c4b5fd; --_accent-dark:#5b21b6; --_accent-rgb:124,58,237; }
[data-redesign][data-accent="emerald"] { --_accent:#059669; --_accent-light:#34d399; --_accent-dark:#065f46; --_accent-rgb:5,150,105; }
[data-redesign][data-accent="rose"]    { --_accent:#e11d48; --_accent-light:#fda4af; --_accent-dark:#9f1239; --_accent-rgb:225,29,72; }
[data-redesign][data-accent="sky"]     { --_accent:#0284c7; --_accent-light:#7dd3fc; --_accent-dark:#075985; --_accent-rgb:2,132,199; }
[data-redesign][data-accent="amber"]   { --_accent:#d97706; --_accent-light:#fcd34d; --_accent-dark:#b45309; --_accent-rgb:217,119,6; }

/* Default accent = Indigo when [data-accent] is absent. */
[data-redesign]:not([data-accent]) { --_accent:#4f46e5; --_accent-light:#a5b4fc; --_accent-dark:#3730a3; --_accent-rgb:79,70,229; }

/* ── LIGHT theme (default) — dc.html L1010–1019 + common L996–997 ────────────
 * Applies to [data-redesign] with no theme attr OR [data-theme="light"]. */
[data-redesign],
[data-redesign][data-theme="light"] {
  /* surfaces / text */
  --app-bg: #f3f4fb;
  --surface: #ffffff;
  --surface-2: #f6f7fc;
  --surface-3: #eef0f9;
  --border: rgba(28,26,53,.09);
  --border-strong: rgba(28,26,53,.16);
  --text: #1c1a35;
  --text-dim: #5a5872;
  --text-muted: #9795ad;
  --on-header: #ffffff;
  --nav-bg: #ffffff;
  --shadow: 0 1px 3px rgba(28,26,53,.08), 0 12px 28px rgba(28,26,53,.07);
  --chip-bg: #f1f2fa;
  --ok: #059669;
  --warn: #d97706;
  --danger: #e11d48;
  /* accent-derived — light theme: accent *text* uses the DARK shade;
     soft = base @ 12%, softer = base @ 7%; header band = solid accent. */
  --accent: var(--_accent);
  --accent-text: #ffffff;
  --accent-fg: var(--_accent-dark);
  --handle: var(--_accent-dark);
  --accent-soft: rgba(var(--_accent-rgb), .12);
  --accent-softer: rgba(var(--_accent-rgb), .07);
  --header-bg: var(--_accent);
  --glow-a: rgba(var(--_accent-rgb), .5);
}

/* ── DARK theme ("automation" indigo look) — dc.html L999–1008 + common ──────
 * accent *text* uses the LIGHT shade; soft = base @ 24%, softer = base @ 14%;
 * app-bg is a radial gradient whose first stop swaps with the accent's dark. */
[data-redesign][data-theme="dark"] {
  --app-bg: radial-gradient(125% 95% at 50% -12%, var(--_accent-dark) 0%, #15123f 46%, #0a0824 100%);
  --surface: rgba(255,255,255,.055);
  --surface-2: rgba(255,255,255,.03);
  --surface-3: rgba(255,255,255,.09);
  --border: rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.18);
  --text: #ffffff;
  --text-dim: #c2c9ee;
  --text-muted: rgba(224,231,255,.5);
  --on-header: #ffffff;
  --nav-bg: rgba(16,12,46,.66);
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --chip-bg: rgba(255,255,255,.07);
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #fb7185;
  --accent: var(--_accent);
  --accent-text: #ffffff;
  --accent-fg: var(--_accent-light);
  --handle: var(--_accent-light);
  --accent-soft: rgba(var(--_accent-rgb), .24);
  --accent-softer: rgba(var(--_accent-rgb), .14);
  --header-bg: rgba(16,12,46,.62);
  --glow-a: rgba(var(--_accent-rgb), .55);
  /* decorative dark-bg layers (README "Themes"): cyan glow + animated grid.
     dc.html L87 cyan glow rgba(34,211,238,.34); grid 1px rgba(255,255,255,.045). */
  --glow-cyan: rgba(34,211,238,.34);
  --grid-line: rgba(255,255,255,.045);
}

/* ── Typography families (Google Fonts loaded via index.html; NOT applied to
 * any existing screen — later phases set font-family on redesigned elements).
 * README "Typography": Space Grotesk = display/titles/big numbers; Plus Jakarta
 * Sans = all UI/body; JetBrains Mono = numeric/tabular (₱, #order, counts). */
[data-redesign] {
  --font-display: 'Space Grotesk', sans-serif;
  --font-ui: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
/* ============================================================================
 * Redesign runtime styles (Phase 2). SCOPED under [data-redesign]; consumes the
 * tokens from src/styles/design-tokens.css. Loaded ONLY by the separate
 * redesign entry (redesign.html -> src/redesign/main.tsx). Has ZERO effect on
 * the existing app (index.html -> App.tsx), which never renders [data-redesign].
 * Keyframes verbatim from design-redesign/SellerFlowLive.dc.html L20–26.
 * ============================================================================ */

@keyframes sflLive { 0%,100% { box-shadow: 0 0 0 0 rgba(225,29,72,.55); } 50% { box-shadow: 0 0 0 7px rgba(225,29,72,0); } }
@keyframes sflDot  { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.7); } }
@keyframes sflComm { from { opacity: .35; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sflRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sflGrid { from { background-position: 0 0; } to { background-position: 38px 38px; } }
@keyframes sflGlow { 0%,100% { transform: translate(0,0) scale(1); opacity: .8; } 50% { transform: translate(14px,-10px) scale(1.12); opacity: 1; } }
@keyframes sflSheet { from { transform: translateY(100%); } to { transform: translateY(0); } }

[data-redesign] {
  font-family: var(--font-ui);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[data-redesign] * { box-sizing: border-box; }
[data-redesign] button { font-family: var(--font-ui); }
[data-redesign] input { font-family: var(--font-ui); }

/* iOS app shell ONLY (html.sfl-ios-shell — set by applyIOSShellClass, incl. the
 * ?ios=1 browser preview). WKWebView auto-zooms the whole page when a focused
 * form control's font-size is <16px; every redesign input is 9.5–15px, so a
 * 16px floor removes the zoom trigger at the source (the accessibility-correct
 * fix; the viewport zoom lock remains only as a backstop). !important because
 * most controls carry an inline fontSize. Android/web: class never set → 0 diff. */
html.sfl-ios-shell [data-redesign] input,
html.sfl-ios-shell [data-redesign] select,
html.sfl-ios-shell [data-redesign] textarea { font-size: 16px !important; }

/* Phone column: status bar -> scrollable content (flex:1) -> bottom nav.
 * max-width 430px keeps the mobile design phone-accurate on desktop preview;
 * on a real phone it is full-bleed. (No workbench/sidebar — per the spec.) */
[data-redesign] .sfl-stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  background: var(--app-bg);
}
[data-redesign] .sfl-phone {
  position: relative;
  width: 100%;
  /* No max-width: the column fills the viewport. Phones (<430px) are byte-identical
   * (width:100% already < 430). Tablets now FILL the screen instead of pinning a
   * 430px column to the left with blank space. Desktop/laptop get the sidebar via the
   * pointer:fine @media below; touch devices (tablets/phones) stay full-width mobile. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--app-bg);
}
[data-redesign] .sfl-scroll {
  position: relative;
  z-index: 2;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
[data-redesign] .sfl-scroll::-webkit-scrollbar { width: 0; height: 0; }

/* ── Bottom nav (mobile baseline). These classes are BYTE-EQUAL to the previous
 * inline styles (container = the old nav <div>; .sfl-navbtn = the old navBtn();
 * .is-active = the old active background/color). Moving them to classes lets the
 * desktop @media below restyle the SAME nav into a left sidebar with no !important
 * and no duplicated component. ≤899px renders exactly as before. */
[data-redesign] .sfl-nav {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: var(--nav-bg);
  border-top: 1px solid var(--border);
  backdrop-filter: saturate(1.4) blur(14px);
}
[data-redesign] .sfl-navbtn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 0;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-ui);
  background: transparent;
  color: var(--text-muted);
}
[data-redesign] .sfl-navbtn.is-active {
  background: var(--accent-soft);
  color: var(--accent-fg);
}
/* Sidebar-only elements — hidden on mobile (must come AFTER .sfl-navbtn so the
 * Admin button's display:none wins over .sfl-navbtn's display:flex). */
[data-redesign] .sfl-nav-logo { display: none; }
[data-redesign] .sfl-nav-admin { display: none; }

/* ── DESKTOP/LAPTOP ONLY (≥900px AND a fine pointer = mouse/trackpad): the bottom
 * nav becomes a LEFT SIDEBAR and content goes full-width. `pointer: fine` excludes
 * ALL touch devices — Samsung tablets (portrait OR landscape) + phones + the APK
 * (pointer: coarse) NEVER get the sidebar; they stay full-width mobile. This fixes
 * the tablet-portrait bug where ~800px width hit min-width:900 partially / left a
 * 430px column pinned left. Mobile (<900 or any touch) is byte-identical to before. */
@media (min-width: 900px) and (pointer: fine) {
  [data-redesign] .sfl-phone {
    max-width: none;            /* full-width content on desktop */
    flex-direction: row;        /* sidebar | content */
  }
  [data-redesign] .sfl-nav {
    order: -1;                  /* move to the LEFT without changing DOM order */
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 240px;
    flex-shrink: 0;
    height: 100%;
    padding: 16px 12px;
    gap: 4px;
    border-top: none;
    border-right: 1px solid var(--border);
    overflow-y: auto;
  }
  [data-redesign] .sfl-nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 16px;
    margin-bottom: 4px;
  }
  [data-redesign] .sfl-navbtn {
    flex: 0 0 auto;             /* don't stretch tall like the bottom row did */
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 11px 14px;
    position: relative;        /* for the active accent bar */
  }
  [data-redesign] .sfl-navbtn span {
    font-size: 13px !important; /* override the inline 10px label — desktop only */
  }
  [data-redesign] .sfl-navbtn.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent-fg);
  }
  [data-redesign] .sfl-nav-admin { display: flex; }  /* show in the sidebar (owner) */
}

/* Decorative dark-bg layers (dark theme only) — dc.html L84–87. */
[data-redesign] .sfl-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 38px 38px;
  animation: sflGrid 7s linear infinite;
  opacity: .6;
}
[data-redesign] .sfl-glow-a {
  position: absolute;
  width: 360px; height: 360px; top: -130px; right: -130px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-a) 0%, rgba(79,70,229,0) 70%);
  animation: sflGlow 9s ease-in-out infinite;
}
[data-redesign] .sfl-glow-cyan {
  position: absolute;
  width: 300px; height: 300px; bottom: 10px; left: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-cyan) 0%, rgba(34,211,238,0) 70%);
  animation: sflGlow 11s ease-in-out infinite reverse;
}

[data-redesign] .sfl-comm-row { animation: sflComm .4s ease-out; }

/* ── Auth pop-up split-screen (web landing only — AuthModal). DEFAULT = single column:
 * the brand panel is hidden and the form fills the card (BYTE-IDENTICAL to before, so
 * phones/narrow web + the APK full-screen path are unchanged). At ≥720px viewport the
 * card widens and becomes a two-column split: brand panel | form. CSS-only collapse —
 * no JS, no media query in inline styles. Renders ONLY when screen === "landing". */
[data-redesign] .sfl-authcard { max-width: 420px; }
[data-redesign] .sfl-authbrand { display: none; }       /* hidden on narrow */
[data-redesign] .sfl-authform { width: 100%; }
@media (min-width: 720px) {
  [data-redesign] .sfl-authcard { max-width: 860px; }
  [data-redesign] .sfl-authsplit { display: flex; align-items: stretch; }
  [data-redesign] .sfl-authbrand { display: flex; flex: 1 1 0; }
  [data-redesign] .sfl-authform { flex: 1 1 0; min-width: 0; }
}

/* ═══ Landing page animations (ADDITIVE — landing-only .sfl-lp-* classes).
   Reuses the existing sflRise / sflGlow / sflLive / sflDot keyframes (untouched);
   only the landing-specific loops below are new. The landing never renders in the
   app shell (anonScreen gate), so none of this affects the APK/iOS. */
@keyframes sflLpFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes sflLpPrint {
  0%   { transform: translateY(-88%); opacity: 1; }
  62%  { transform: translateY(0);    opacity: 1; }
  86%  { transform: translateY(0);    opacity: 1; }
  100% { transform: translateY(6%);   opacity: 0; }
}
@keyframes sflLpBub {
  0%   { opacity: 0; transform: translateY(14px) scale(.92); }
  14%  { opacity: 1; transform: translateY(4px)  scale(1); }
  62%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-46px) scale(1.02); }
}

/* hero entrance (staggered via inline animation-delay) */
.sfl-lp-rise { animation: sflRise .6s ease-out both; }

/* soft floating glow blobs behind the hero scene */
.sfl-lp-blob { position: absolute; border-radius: 50%; filter: blur(46px); pointer-events: none; z-index: 0; }
.sfl-lp-blob-a { width: 260px; height: 260px; top: -40px; left: -50px; background: radial-gradient(circle, rgba(99,102,241,.42), rgba(99,102,241,0) 70%); animation: sflGlow 9s ease-in-out infinite; }
.sfl-lp-blob-b { width: 220px; height: 220px; bottom: -30px; right: -40px; background: radial-gradient(circle, rgba(45,212,191,.36), rgba(45,212,191,0) 70%); animation: sflGlow 11s ease-in-out infinite reverse; }

/* gentle device float (card B offset so the two scenes de-sync) */
.sfl-lp-float   { animation: sflLpFloat 5.5s ease-in-out infinite; }
.sfl-lp-float-b { animation: sflLpFloat 6s   ease-in-out infinite; animation-delay: .8s; }

/* thermal printer: label continuously printing out of the slot */
.sfl-lp-print   { animation: sflLpPrint 3.2s ease-in-out infinite; }
.sfl-lp-print-b { animation-delay: 1.6s; }

/* floating live-comment bubbles */
.sfl-lp-bub { position: absolute; z-index: 2; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #E0DDF0; color: #4F46E5; font-size: 12px; font-weight: 700; box-shadow: 0 10px 24px -10px rgba(23,21,48,.25); pointer-events: none; opacity: 0; animation: sflLpBub 6s ease-in-out infinite; white-space: nowrap; }

/* status dots (reuse existing pulse/blink keyframes) */
.sfl-lp-livedot    { width: 7px; height: 7px; border-radius: 50%; background: #F43F5E; animation: sflLive 1.8s infinite, sflDot 1.8s infinite; }
.sfl-lp-printlight { width: 6px; height: 6px; border-radius: 50%; background: #34D399; animation: sflDot 1.4s infinite; }

/* micro-interactions: hover lift (cards + CTAs) */
.sfl-lp-lift { transition: transform .25s ease, box-shadow .25s ease; }
.sfl-lp-lift:hover { transform: translateY(-3px); }
.sfl-lp-hovshadow:hover { box-shadow: 0 18px 40px -18px rgba(23,21,48,.2); }

/* scroll-triggered reveal (IntersectionObserver adds .sfl-lp-in once) */
.sfl-lp-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--rv-delay, 0s); }
.sfl-lp-reveal.sfl-lp-in { opacity: 1; transform: translateY(0); }

/* reduced motion: static fallback — kill every loop, show everything immediately */
@media (prefers-reduced-motion: reduce) {
  .sfl-lp-rise, .sfl-lp-blob-a, .sfl-lp-blob-b, .sfl-lp-float, .sfl-lp-float-b,
  .sfl-lp-print, .sfl-lp-livedot, .sfl-lp-printlight { animation: none; }
  .sfl-lp-bub { display: none; }
  .sfl-lp-reveal { opacity: 1; transform: none; transition: none; }
  .sfl-lp-lift, .sfl-lp-lift:hover { transition: none; transform: none; }
}

/* ═══ Landing heartbeat pulse (ADDITIVE — Indigo Classic accent). Cards "beat"
   with a soft indigo glow + a 1px indigo ring at the peak. Lives on the CARD
   element while reveal/hover-lift live on a WRAPPER, so the transforms compose
   (animation transform would otherwise override the reveal/lift transforms). */
@keyframes sflLpBeat {
  0%, 100% { transform: scale(1);    box-shadow: 0 10px 26px -14px rgba(83,74,183,.12), 0 0 0 1px rgba(99,102,241,0); }
  50%      { transform: scale(1.02); box-shadow: 0 14px 34px -12px rgba(83,74,183,.28), 0 0 0 1px rgba(99,102,241,.22); }
}
/* "Most Popular" (Pro) — slightly stronger beat; keeps the card's big indigo
   drop-shadow inside the keyframe so the pulse never flattens its depth. */
@keyframes sflLpBeatPro {
  0%, 100% { transform: scale(1);     box-shadow: 0 30px 60px -24px rgba(79,70,229,.45), 0 0 0 1px rgba(99,102,241,.08); }
  50%      { transform: scale(1.035); box-shadow: 0 32px 64px -20px rgba(79,70,229,.62), 0 0 0 1px rgba(99,102,241,.35); }
}
.sfl-lp-beat     { animation: sflLpBeat 2.2s ease-in-out infinite;    animation-delay: var(--beat-delay, 0s); }
.sfl-lp-beat-pro { animation: sflLpBeatPro 2.2s ease-in-out infinite; animation-delay: var(--beat-delay, 0s); }
@media (prefers-reduced-motion: reduce) {
  .sfl-lp-beat, .sfl-lp-beat-pro { animation: none; } /* static: inline shadows show as before */
}

/* Raffle compact header — below 360px the center "Collecting · n" TEXT hides
   (the pulsing dot stays) so the one-line header never wraps or overflows. */
@media (max-width: 359px) {
  [data-redesign] .sfl-raffle-collect-txt { display: none; }
}

/* ═══ Landing v2 (ADDITIVE — .sfl-l2-* classes only; blueprint
   design-landing/sellerflow-landing-preview.html is the authoritative source
   for every timing/easing below). Landing never renders in the app shell, so
   none of this affects the APK/iOS. Generic helpers (.sfl-lp-reveal/.sfl-lp-lift/
   .sfl-lp-rise/.sfl-lp-livedot) are REUSED from the v1 block above. */

/* hero phone feed — comments slide in, order chips pop after (12s shared loop) */
@keyframes sflL2Feed { 0% { opacity: 0; transform: translateY(14px); } 4% { opacity: 1; transform: translateY(0); } 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes sflL2Chip { 0%, 6% { opacity: 0; transform: scale(.85); } 9% { opacity: 1; transform: scale(1); } 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
.sfl-l2-crow { opacity: 0; animation: sflL2Feed 12s linear infinite; }
.sfl-l2-chip { opacity: 0; animation: sflL2Chip 12s linear infinite; }
.sfl-l2-r1 { animation-delay: .4s; }  .sfl-l2-r1 .sfl-l2-chip { animation-delay: 1.1s; }
.sfl-l2-r2 { animation-delay: 2.1s; }
.sfl-l2-r3 { animation-delay: 3.4s; } .sfl-l2-r3 .sfl-l2-chip { animation-delay: 4.1s; }
.sfl-l2-r4 { animation-delay: 5.2s; }
.sfl-l2-r5 { animation-delay: 6.6s; } .sfl-l2-r5 .sfl-l2-chip { animation-delay: 7.3s; }
.sfl-l2-r6 { animation-delay: 8.4s; } .sfl-l2-r6 .sfl-l2-chip { animation-delay: 9.1s; }

/* ring light glow behind the phone */
@keyframes sflL2Ring {
  0%, 100% { box-shadow: 0 0 0 6px rgba(139,92,246,.12), 0 0 90px 30px rgba(139,92,246,.26), inset 0 0 70px rgba(255,255,255,.9); }
  50%      { box-shadow: 0 0 0 6px rgba(139,92,246,.18), 0 0 120px 44px rgba(139,92,246,.38), inset 0 0 90px rgba(255,255,255,1); }
}
.sfl-l2-ring { animation: sflL2Ring 4.5s ease-in-out infinite; }

/* floating hearts rising beside the phone */
@keyframes sflL2Heart { 0% { opacity: 0; transform: translateY(0) scale(.7); } 12% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: 0; transform: translateY(-190px) scale(1.15) rotate(8deg); } }
.sfl-l2-heart { position: absolute; bottom: 0; left: 8px; font-size: 1.15rem; opacity: 0; animation: sflL2Heart 3.6s linear infinite; }
.sfl-l2-h2 { animation-delay: .9s; left: 0; }
.sfl-l2-h3 { animation-delay: 1.7s; left: 16px; }
.sfl-l2-h4 { animation-delay: 2.6s; left: 6px; }

/* gentle bobbing (slip card, seller photo, printer) */
@keyframes sflL2Slip { 0%, 100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-8px); } }
@keyframes sflL2Seller { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(-5deg) translateY(-7px); } }
@keyframes sflL2Bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.sfl-l2-slipfloat { animation: sflL2Slip 5s ease-in-out infinite; }
.sfl-l2-sellerbob { animation: sflL2Seller 4.5s ease-in-out infinite; }
.sfl-l2-printerbob { animation: sflL2Bob 5s ease-in-out infinite; }

/* thermal printer emitting a slip (grows from the slot, tears off, repeats) */
@keyframes sflL2Print { 0% { transform: scaleY(.06); } 10% { transform: scaleY(.06); } 55% { transform: scaleY(1); } 86% { transform: scaleY(1); opacity: 1; } 92% { opacity: 0; } 93%, 100% { transform: scaleY(.06); opacity: 0; } }
.sfl-l2-prpaper { transform-origin: top; animation: sflL2Print 5.5s ease-in-out infinite; }

/* door-closing dashboard assembly — pieces slide in when .sfl-l2-on lands
   (IntersectionObserver), then the chart bars grow with a stagger */
.sfl-l2-piece { transition: transform .9s cubic-bezier(.22,.9,.3,1), opacity .9s; opacity: 0; }
.sfl-l2-ptop { transform: translateY(-140%); }
.sfl-l2-pleft { transform: translateX(-130%); }
.sfl-l2-pright { transform: translateX(130%); }
.sfl-l2-on .sfl-l2-piece { transform: none; opacity: 1; }
.sfl-l2-on .sfl-l2-ptop { transition-delay: .05s; }
.sfl-l2-on .sfl-l2-pleft, .sfl-l2-on .sfl-l2-pright { transition-delay: .3s; }
.sfl-l2-bar { transform: scaleY(0); transform-origin: bottom; transition: transform .7s cubic-bezier(.22,.9,.3,1); }
.sfl-l2-on .sfl-l2-bar { transform: scaleY(1); }
.sfl-l2-on .sfl-l2-bar:nth-child(1) { transition-delay: .9s; }
.sfl-l2-on .sfl-l2-bar:nth-child(2) { transition-delay: 1s; }
.sfl-l2-on .sfl-l2-bar:nth-child(3) { transition-delay: 1.1s; }
.sfl-l2-on .sfl-l2-bar:nth-child(4) { transition-delay: 1.2s; }
.sfl-l2-on .sfl-l2-bar:nth-child(5) { transition-delay: 1.3s; }
.sfl-l2-on .sfl-l2-bar:nth-child(6) { transition-delay: 1.4s; }
.sfl-l2-on .sfl-l2-bar:nth-child(7) { transition-delay: 1.5s; }

/* nav features dropdown (hover-open on desktop; hidden with the nav links on mobile) */
.sfl-l2-dd { position: relative; }
.sfl-l2-ddmenu { position: absolute; top: 130%; left: -14px; background: #fff; border: 1px solid #e6e5f4; border-radius: 14px; box-shadow: 0 18px 44px rgba(23,20,58,.14); padding: 10px; min-width: 230px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: .22s; z-index: 45; }
.sfl-l2-dd:hover .sfl-l2-ddmenu, .sfl-l2-dd:focus-within .sfl-l2-ddmenu { opacity: 1; visibility: visible; transform: none; }

/* FAQ +/summary marker rotation is inline (React state); hover lifts reuse .sfl-lp-lift */

/* responsive — mirror the blueprint's breakpoints */
.sfl-l2-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.sfl-l2-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sfl-l2-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.sfl-l2-span3 { grid-column: span 3; } .sfl-l2-span2 { grid-column: span 2; }
.sfl-l2-dash { display: grid; grid-template-columns: 170px 1fr; gap: 14px; max-width: 860px; margin: 0 auto; }
.sfl-l2-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sfl-l2-deep { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.sfl-l2-guides { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sfl-l2-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sfl-l2-sellers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sfl-l2-fgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 900px) {
  .sfl-l2-hero { grid-template-columns: 1fr; gap: 44px; }
  .sfl-l2-guides { grid-template-columns: repeat(2, 1fr); }
  .sfl-l2-slip { right: 2px !important; }
  .sfl-l2-printer { right: -6px !important; width: 124px !important; top: 96px !important; }
  .sfl-l2-sellercard { left: -10px !important; width: 150px !important; }
  .sfl-l2-sellercard .sfl-l2-sellerimg { height: 165px !important; }
}
@media (max-width: 820px) {
  .sfl-l2-navlinks { display: none !important; }
  .sfl-l2-steps, .sfl-l2-quotes, .sfl-l2-deep, .sfl-l2-sellers { grid-template-columns: 1fr; }
  .sfl-l2-deep { gap: 26px; }
  .sfl-l2-span3, .sfl-l2-span2 { grid-column: span 6; }
  .sfl-l2-fgrid { grid-template-columns: 1fr 1fr; }
  .sfl-l2-deepflip .sfl-l2-deepvis { order: 0; }
}
@media (min-width: 821px) { .sfl-l2-deepflip .sfl-l2-deepvis { order: 2; } }
@media (max-width: 760px) { .sfl-l2-dash { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .sfl-l2-kpis, .sfl-l2-guides { grid-template-columns: 1fr; } }

/* reduced motion — kill every v2 loop; assembly + bars land fully visible */
@media (prefers-reduced-motion: reduce) {
  .sfl-l2-crow, .sfl-l2-chip { animation: none; opacity: 1; }
  .sfl-l2-ring, .sfl-l2-slipfloat, .sfl-l2-sellerbob, .sfl-l2-printerbob, .sfl-l2-prpaper { animation: none; }
  .sfl-l2-heart { display: none; }
  .sfl-l2-piece, .sfl-l2-bar { transition: none; opacity: 1 !important; transform: none !important; }
  .sfl-l2-ddmenu { transition: none; }
}