/* landing.css — LinkForge public landing pages (Agent D).
   Mobile-first, clean, modern. Served at /static/landing.css. */

:root {
  /* ── color palette (theme-overridable via themeToCssVars) ─────────────── */
  --lf-bg: #f7f8fb;
  --lf-surface: #ffffff;
  --lf-ink: #1a2233;
  --lf-muted: #5b6577;
  --lf-line: #e6e9f0;
  --lf-primary: #4f46e5;
  --lf-primary-ink: #ffffff;
  --lf-primary-dark: #4338ca;
  --lf-accent: #ec4899;

  /* ── derived surfaces (built from base tokens; kept var-based so dark
        mode + per-page themes cascade automatically) ────────────────────── */
  --lf-surface-2: #f1f3f7;              /* subtle raised chip / secondary fill */
  --lf-surface-hover: #e6e9f0;          /* hover on neutral chips */
  --lf-ring: rgba(79, 70, 229, 0.32);   /* focus ring (plain fallback below) */
  --lf-hairline: rgba(20, 24, 60, 0.06);/* faint interactive hover wash */
  --lf-overlay-strong: rgba(20, 24, 60, 0.28);

  /* ── radius scale ─────────────────────────────────────────────────────── */
  /* 组件默认保持直角；页面主题或组件字段仍可显式写入非零圆角。 */
  --lf-radius: 0px;
  --lf-radius-sm: 0px;
  --lf-radius-xs: 0px;
  --lf-radius-pill: 0px;

  /* ── elevation scale (soft, layered — never harsh) ────────────────────── */
  --lf-shadow-sm: 0 1px 2px rgba(20, 24, 60, 0.06), 0 2px 8px rgba(20, 24, 60, 0.05);
  --lf-shadow: 0 8px 30px rgba(20, 24, 60, 0.08);
  --lf-shadow-md: 0 12px 34px rgba(20, 24, 60, 0.12);
  --lf-shadow-lg: 0 16px 48px rgba(20, 24, 60, 0.16);
  --lf-shadow-brand: 0 8px 20px color-mix(in srgb, var(--lf-primary) 35%, transparent);

  /* ── 8px spacing scale ────────────────────────────────────────────────── */
  --lf-space-1: 4px;
  --lf-space-2: 8px;
  --lf-space-3: 12px;
  --lf-space-4: 16px;
  --lf-space-5: 24px;
  --lf-space-6: 32px;
  --lf-space-7: 48px;
  --lf-space-8: 64px;

  /* ── motion ───────────────────────────────────────────────────────────── */
  --lf-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --lf-t-fast: 120ms;
  --lf-t: 180ms;

  --lf-maxw: 720px;
}

* { box-sizing: border-box; }

/* Progressive: derive the focus ring from the (theme-overridable) primary so
   it tracks per-page brand. Plain rgba fallback stays for older engines. */
@supports (color: color-mix(in srgb, red, blue)) {
  :root { --lf-ring: color-mix(in srgb, var(--lf-primary) 32%, transparent); }
}

/* Global focus-visible ring — accessible keyboard affordance for every
   interactive element; suppressed for mouse users via :focus-visible. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--lf-ring);
  border-radius: var(--lf-radius-xs);
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--lf-font, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif);
  color: var(--lf-ink);
  background: var(--lf-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* .lf-bleed 用 100vw 破界,vw 含滚动条宽度,这里裁掉水平溢出（老页面无破界元素,无感） */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }

/* ---------- banners / notices ---------- */
.lf-draft-banner {
  background: #fde68a;
  color: #78350f;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: var(--lf-space-2) var(--lf-space-3);
  letter-spacing: 0.3px;
}

.lf-noagent {
  background: #fee2e2;
  color: #991b1b;
  text-align: center;
  font-size: 13px;
  padding: var(--lf-space-2) var(--lf-space-3);
}

/* ---------- page shell ---------- */
.lf-page {
  max-width: var(--lf-maxw);
  margin: 0 auto;
  background: var(--lf-surface);
  min-height: 100vh;
  position: relative; /* positioning context for absolute-layout CTAs */
}

/* ---------- full-bleed band（styleWrap 的 bleed 键;背景横贯整屏,内容仍限宽） ---------- */
.lf-style-wrap.lf-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.lf-style-wrap.lf-bleed > * {
  max-width: var(--lf-maxw);
  margin-left: auto;
  margin-right: auto;
}
/* Hero 的内容字段 imageUrl 画在 section 自身，而不是通用 wrapper 上。全宽模式下
   让该 section 铺满 wrapper，内部 .lf-hero-inner 仍保持内容宽度；否则图片只会停在
   --lf-maxw 中央，看起来像 bleed 开关无效。split 布局没有 lf-hero-bg，不受影响。 */
.lf-style-wrap.lf-bleed > .lf-hero.lf-hero-bg {
  width: 100%;
  max-width: none;
}

/* 通用自定义背景画在 lf-style-wrap 上。某些组件根 section（如 CTA/Form）
   和 Hero 自带默认不透明背景，若不在显式 bgColor（含 transparent）/图片/渐变时透出，上传成功也会在
   画布和发布页都看不见。Hero 内容字段 imageUrl 会加 lf-hero-bg，仍由它优先。 */
.lf-style-wrap.lf-bg-custom > :where(.lf-section),
.lf-style-wrap.lf-bg-custom > :where(.lf-hero) {
  background: transparent;
}
/* 纯自定义底色（含 transparent）不应再被 Hero 默认暗色遮罩染色。
   背景图不加 lf-bg-color，仍保留默认遮罩；用户显式 overlay 为内联样式，优先于此规则。 */
.lf-style-wrap.lf-bg-color > :where(.lf-hero:not(.lf-hero-bg)) > .lf-hero-overlay {
  background: transparent;
}

/* floating (fixed / absolute) CTA button */
.lf-cta-float {
  white-space: nowrap;
}

/* When a custom font-size / text color is set on a component, cascade it to the
   inner text. Applied to DESCENDANTS only (the wrapper keeps its own inline
   value) and marked !important so it beats the per-element rules declared later
   in this file. Buttons are excluded — they have their own color/size controls. */
.lf-fs *:not(.lf-btn) { font-size: inherit !important; }
.lf-cc *:not(.lf-btn) { color: inherit !important; }
/* Social brand glyphs stay white on their platform-color circles. The generic
   component text color should recolor labels, not erase logos against a
   similarly colored brand background. */
.lf-cc .lf-social-ic { color: #fff !important; }
.lf-cc .lf-social-launcher-button { color: #fff !important; }

/* ===================== component animations ===================== */
/* Unified model: one effect + a play mode. The `animation` shorthand is set by
   JS at runtime (entrance = play once when scrolled in; loop = repeat with an
   optional gap). `.lf-hide` pre-hides an entrance element before it plays so
   there's no flash of content. Keyframes below are shared by both modes. */
.lf-a.lf-hide { opacity: 0; }

/* Entrance keyframes (reveal). Use individual transform props (translate/scale)
   so they compose with a floating CTA button's own transform. */
@keyframes aFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes aUp    { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes aDown  { from { opacity: 0; translate: 0 -28px; } to { opacity: 1; translate: 0 0; } }
@keyframes aLeft  { from { opacity: 0; translate: -28px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes aRight { from { opacity: 0; translate: 28px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes aZoom  { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes aBounce { 0% { opacity: 0; translate: 0 28px; } 60% { opacity: 1; translate: 0 -8px; } 100% { opacity: 1; translate: 0 0; } }

/* Emphasis keyframes (accent). scale/translate/rotate individual props + box-shadow. */
@keyframes lfPulse { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
@keyframes lfFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes lfShake { 0%, 90%, 100% { translate: 0 0; } 92% { translate: -4px 0; } 95% { translate: 4px 0; } 98% { translate: -3px 0; } }
@keyframes lfGlow  { 0%, 100% { box-shadow: 0 0 0 rgba(79, 70, 229, 0); } 50% { box-shadow: 0 0 22px rgba(79, 70, 229, .55); } }
/* 摇晃：来回摆动一阵再停，像铃铛/挂饰摇动，常用于吸引点击 */
@keyframes lfWobble {
  0%, 55%, 100% { rotate: 0deg; }
  60% { rotate: -10deg; } 65% { rotate: 8deg; } 70% { rotate: -8deg; }
  75% { rotate: 6deg; } 80% { rotate: -4deg; } 85% { rotate: 2deg; } 90% { rotate: -1deg; }
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .lf-a { animation: none !important; }
  .lf-a.lf-hide { opacity: 1 !important; }
}

.lf-section {
  padding: 0;
  display: flow-root;
}

.lf-heading {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 var(--lf-space-4);
  font-weight: 700;
  text-wrap: balance;
}
.lf-align-center { text-align: center; }
.lf-align-right { text-align: right; }
/* 独立 Heading 组件不能把标题的内容间距泄漏成组件尾部留白。 */
.lf-section > .lf-heading:only-child { margin-bottom: 0; }

/* ---------- hero ---------- */
.lf-hero {
  position: relative;
  padding: 0;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--lf-primary), var(--lf-accent));
  overflow: hidden;
}
.lf-hero-bg {
  background-size: cover;
  background-position: center;
}
.lf-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 18, 40, 0.28), rgba(15, 18, 40, 0.55));
  z-index: 0;
}
.lf-hero-inner {
  position: relative;
  z-index: 1;
  /* pageWidth 联动:默认(--lf-maxw 720)时 720-160=560 与旧值精确相等(老页面零变化);
     主题拉宽后内容列同步变阔,不再「变宽不变阔」。 */
  max-width: max(560px, calc(var(--lf-maxw, 720px) - 160px));
  margin: 0 auto;
}
.lf-hero-title {
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--lf-space-3);
  font-weight: 800;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  text-wrap: balance;
}
.lf-hero-subtitle {
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 var(--lf-space-5);
  opacity: 0.95;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  text-wrap: pretty;
}

/* hero 超大字号变体（titleSize='xl',opt-in;老页面不变）。
   双类选择器提特异性:否则被下方 @media(min-width:640px) .lf-hero-title{44px}
   同特异性后声明覆盖,桌面端 xl 失效(P0-3)。 */
.lf-hero-title.lf-hero-title-xl {
  font-size: clamp(40px, 6vw, 72px);
  letter-spacing: -0.03em;
  line-height: 1.06;
}

/* hero 左右分栏变体（layout='split',opt-in）:文字左对齐 + 右侧产品图,移动端上下堆叠 */
.lf-hero-split {
  text-align: left;
  color: var(--lf-ink);
  background: var(--lf-surface);
}
.lf-hero-split .lf-hero-title,
.lf-hero-split .lf-hero-subtitle {
  text-shadow: none;
}
.lf-hero-split .lf-hero-subtitle {
  color: var(--lf-muted);
  opacity: 1;
}
.lf-hero-split-inner {
  max-width: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lf-space-6);
  align-items: center;
}
.lf-hero-media img {
  width: 100%;
  border-radius: var(--lf-radius);
  object-fit: cover;
}
@media (min-width: 800px) {
  .lf-hero-split-inner {
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    gap: var(--lf-space-7);
  }
}

/* ---------- image / figure ---------- */
.lf-section.lf-image-section {
  padding-block: 0;
  padding-inline: 0;
}
.lf-figure { margin: 0; }
.lf-image {
  width: 100%;
  border-radius: 0;
}
.lf-caption {
  margin-top: var(--lf-space-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--lf-muted);
  text-align: center;
}

/* ---------- gallery ---------- */
.lf-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--lf-gallery-gap-x, 0px);
  row-gap: var(--lf-gallery-gap-y, 0px);
}
.lf-gallery-cell {
  overflow: hidden;
  border-radius: var(--lf-radius-sm);
  aspect-ratio: 1 / 1;
  background: var(--lf-line);
}
.lf-gallery-link {
  display: block;
  width: 100%;
  height: 100%;
}
.lf-gallery-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--lf-t) var(--lf-ease);
}
.lf-gallery-cell:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .lf-gallery-cell:hover img { transform: none; }
}

/* ---------- video ---------- */
.lf-video, .lf-video-embed {
  display: block;
  width: 100%;
  margin: 0;
  border-radius: var(--lf-radius);
  overflow: hidden;
}
.lf-video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  background: #000;
}
.lf-video-embed iframe {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
}

/* ---------- buttons / CTA ---------- */
.lf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;                     /* touch target ≥40px */
  padding: 13px 28px;
  border: none;
  border-radius: var(--lf-radius-pill);
  box-shadow: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--lf-t-fast) var(--lf-ease),
              box-shadow var(--lf-t-fast) var(--lf-ease),
              background var(--lf-t-fast) var(--lf-ease),
              filter var(--lf-t-fast) var(--lf-ease);
}
.lf-btn:active { transform: translateY(1px) scale(0.99); }
.lf-btn:disabled,
.lf-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.lf-btn-primary {
  background: var(--lf-primary);
  color: var(--lf-primary-ink);
}
.lf-btn-primary:hover {
  background: var(--lf-primary-dark);
  transform: translateY(-1px);
}
.lf-btn-secondary {
  background: var(--lf-surface);
  color: var(--lf-primary);
}
.lf-btn-secondary:hover {
  background: color-mix(in srgb, var(--lf-primary) 8%, var(--lf-surface));
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .lf-btn { transition: background var(--lf-t-fast) var(--lf-ease); }
  .lf-btn:hover, .lf-btn:active { transform: none; }
}

.lf-cta-section {
  text-align: center;
  padding: 0;
}
.lf-cta-sub {
  color: var(--lf-muted);
  margin: 0 0 var(--lf-space-5);
  font-size: 15px;
  line-height: 1.55;
}

/* ---------- faq ---------- */
.lf-faq-item {
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-sm);
  margin-bottom: var(--lf-space-2);
  overflow: hidden;
  background: var(--lf-surface);
  transition: border-color var(--lf-t) var(--lf-ease),
              box-shadow var(--lf-t) var(--lf-ease);
}
.lf-faq-item:last-child { margin-bottom: 0; }
.lf-faq-item:hover { border-color: color-mix(in srgb, var(--lf-primary) 40%, var(--lf-line)); }
.lf-faq-item[open] {
  border-color: color-mix(in srgb, var(--lf-primary) 55%, var(--lf-line));
}
.lf-faq-q {
  cursor: pointer;
  padding: var(--lf-space-4);
  font-weight: 600;
  font-size: 15px;
  list-style: none;
  position: relative;
  padding-right: 44px;
  transition: color var(--lf-t-fast) var(--lf-ease);
}
.lf-faq-q:hover { color: var(--lf-primary); }
.lf-faq-q::-webkit-details-marker { display: none; }
.lf-faq-q::after {
  content: "+";
  position: absolute;
  right: var(--lf-space-4);
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
  color: var(--lf-primary);
  transition: transform var(--lf-t) var(--lf-ease);
}
.lf-faq-item[open] .lf-faq-q::after {
  content: "\2212";
  transform: translateY(-50%) rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .lf-faq-item[open] .lf-faq-q::after { transform: translateY(-50%); }
}
.lf-faq-a {
  padding: 0 var(--lf-space-4) var(--lf-space-4);
  color: var(--lf-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- social ---------- */
.lf-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lf-social-gap, var(--lf-space-3));
  justify-content: center;
}
.lf-social-vertical .lf-social-row { flex-direction: column; flex-wrap: nowrap; }
.lf-social-align-left .lf-social-row { justify-content: flex-start; align-items: flex-start; }
.lf-social-align-center .lf-social-row { justify-content: center; align-items: center; }
.lf-social-align-right .lf-social-row { justify-content: flex-end; align-items: flex-end; }
.lf-social-align-stretch .lf-social-row { align-items: stretch; }
.lf-social-align-stretch .lf-social-link { justify-content: flex-start; }
.lf-social-horizontal.lf-social-align-stretch .lf-social-row { width: 100%; }
.lf-social-horizontal.lf-social-align-stretch .lf-social-link { flex: 1 1 0; }
.lf-social-vertical.lf-social-align-stretch .lf-social-row,
.lf-social-vertical.lf-social-align-stretch .lf-social-link { width: 100%; }
.lf-social-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 7px 16px 7px 8px;
  border-radius: var(--lf-social-radius, var(--lf-radius-pill));
  background: var(--lf-social-button-bg, var(--lf-surface-2));
  color: var(--lf-ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background var(--lf-t-fast) var(--lf-ease),
              transform var(--lf-t-fast) var(--lf-ease),
              box-shadow var(--lf-t-fast) var(--lf-ease);
}
.lf-social-link:hover {
  background: var(--lf-social-button-bg, var(--lf-surface-hover));
  transform: translateY(-1px);
  box-shadow: var(--lf-shadow-sm);
}
.lf-social-link:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .lf-social-link:hover { transform: none; }
}
.lf-social-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;              /* svg uses currentColor */
  flex: 0 0 auto;
}
.lf-social-ic svg { width: 17px; height: 17px; display: block; }
.lf-social-name { min-width: 0; line-height: 1; overflow-wrap: anywhere; }
.lf-social.lf-social-icon-only .lf-social-link {
  width: 44px;
  min-width: 44px;
  flex: 0 0 44px;
  justify-content: center;
  gap: 0;
  padding: 7px;
}
/* Size presets apply to every direct Social action, whether it is shown in
   the page flow or inside a folded launcher. Medium deliberately matches the
   long-standing default dimensions. */
.lf-social.lf-social-buttons-size-small .lf-social-link {
  gap: 7px;
  min-height: 36px;
  padding: 5px 12px 5px 6px;
  font-size: 12px;
}
.lf-social.lf-social-buttons-size-small .lf-social-ic { width: 24px; height: 24px; }
.lf-social.lf-social-buttons-size-small .lf-social-ic svg { width: 14px; height: 14px; }
.lf-social.lf-social-buttons-size-medium .lf-social-link {
  gap: 9px;
  min-height: 44px;
  padding: 7px 16px 7px 8px;
  font-size: 14px;
}
.lf-social.lf-social-buttons-size-medium .lf-social-ic { width: 30px; height: 30px; }
.lf-social.lf-social-buttons-size-medium .lf-social-ic svg { width: 17px; height: 17px; }
.lf-social.lf-social-buttons-size-large .lf-social-link {
  gap: 11px;
  min-height: 56px;
  padding: 10px 20px 10px 10px;
  font-size: 16px;
}
.lf-social.lf-social-buttons-size-large .lf-social-ic { width: 38px; height: 38px; }
.lf-social.lf-social-buttons-size-large .lf-social-ic svg { width: 21px; height: 21px; }
.lf-social.lf-social-icon-only.lf-social-buttons-size-small .lf-social-link {
  width: 36px;
  min-width: 36px;
  flex-basis: 36px;
  padding: 5px;
}
.lf-social.lf-social-icon-only.lf-social-buttons-size-medium .lf-social-link {
  width: 44px;
  min-width: 44px;
  flex-basis: 44px;
  padding: 7px;
}
.lf-social.lf-social-icon-only.lf-social-buttons-size-large .lf-social-link {
  width: 56px;
  min-width: 56px;
  flex-basis: 56px;
  padding: 9px;
}
.lf-social-icon-only.lf-social-launcher .lf-social-launcher-panel {
  min-width: 60px;
}
.lf-social-editor-empty {
  display: flex;
  min-width: 112px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border: 1px dashed #c7ccd4;
  border-radius: 4px;
  background: #f8f9fb;
  color: #697386;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

/* Unified Social positioning and former floating-chat launcher. */
.lf-social-positioned {
  width: max-content;
  max-width: max(0px, min(
    calc(100% - 24px),
    calc(100dvw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
  ));
  padding: 0;
}
.lf-social-positioned .lf-social-link { max-width: 100%; }
.lf-social-fixed {
  position: fixed;
  max-width: max(0px, calc(
    100dvw - var(--lf-social-x, 20px) - 12px
    - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)
  ));
}
.lf-social-fixed.lf-social-launcher:has(> .lf-social-welcome) {
  /* Avoid a percentage max-width on the welcome bubble participating in the
     launcher's intrinsic width calculation. Without an explicit cap the
     fixed root can silently stretch across almost the whole viewport and
     intercept clicks far away from the visible button. */
  width: min(220px, max(0px, calc(
    100dvw - var(--lf-social-x, 20px) - 12px
    - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)
  )));
}
.lf-social-absolute {
  position: absolute;
  /* Absolute descendants are out of normal flow, but their visual overflow can
     still enlarge the page scroll area. Layout containment blocks that scroll
     height propagation without clipping an open launcher panel. */
  contain: layout;
  max-height: max(0px, calc(100% - 24px));
}
.lf-social-absolute.lf-social-launcher:has(> .lf-social-welcome) {
  width: min(220px, max(0px, calc(100% - 24px)));
}
.lf-social-absolute.lf-social-launcher {
  /* The detached panel intentionally opens outside the launcher's padding box.
     Keep clipping/scrolling on the panel itself so it remains visible. */
  overflow: visible;
}
.lf-social-positioned > .lf-social-row {
  max-width: inherit;
  max-height: inherit;
  overflow: auto;
  overscroll-behavior: contain;
}
.lf-social-dock-bottom-right,
.lf-social-dock-bottom-left,
.lf-social-dock-top-right,
.lf-social-dock-top-left {
  max-height: max(0px, calc(
    100dvh - var(--lf-social-y, 20px) - 12px
    - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
  ));
}
.lf-social-dock-middle-right,
.lf-social-dock-middle-left {
  max-height: max(0px, calc(
    100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
  ));
}
.lf-social-dock-bottom-right { right: calc(var(--lf-social-x, 20px) + env(safe-area-inset-right, 0px)); bottom: calc(var(--lf-social-y, 20px) + env(safe-area-inset-bottom, 0px)); }
.lf-social-dock-bottom-left { left: calc(var(--lf-social-x, 20px) + env(safe-area-inset-left, 0px)); bottom: calc(var(--lf-social-y, 20px) + env(safe-area-inset-bottom, 0px)); }
.lf-social-dock-top-right { right: calc(var(--lf-social-x, 20px) + env(safe-area-inset-right, 0px)); top: calc(var(--lf-social-y, 20px) + env(safe-area-inset-top, 0px)); }
.lf-social-dock-top-left { left: calc(var(--lf-social-x, 20px) + env(safe-area-inset-left, 0px)); top: calc(var(--lf-social-y, 20px) + env(safe-area-inset-top, 0px)); }
.lf-social-dock-middle-right { right: calc(var(--lf-social-x, 20px) + env(safe-area-inset-right, 0px)); top: calc(12px + env(safe-area-inset-top, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); height: max-content; margin-block: auto; }
.lf-social-dock-middle-left { left: calc(var(--lf-social-x, 20px) + env(safe-area-inset-left, 0px)); top: calc(12px + env(safe-area-inset-top, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); height: max-content; margin-block: auto; }
.lf-social-launcher { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.lf-social-launcher.lf-social-align-left { align-items: flex-start; }
.lf-social-launcher.lf-social-align-center { align-items: center; }
.lf-social-launcher.lf-social-align-right { align-items: flex-end; }
.lf-social-launcher.lf-social-align-stretch { align-items: stretch; }
.lf-social-launcher.lf-social-dock-bottom-left,
.lf-social-launcher.lf-social-dock-top-left,
.lf-social-launcher.lf-social-dock-middle-left { align-items: flex-start; }
.lf-social-launcher.lf-social-dock-bottom-right,
.lf-social-launcher.lf-social-dock-top-right,
.lf-social-launcher.lf-social-dock-middle-right { align-items: flex-end; }
.lf-social-launcher.lf-social-dock-top-left,
.lf-social-launcher.lf-social-dock-top-right { flex-direction: column-reverse; }
.lf-social-dock-bottom-left:has(.lf-social-launcher-details[open]) > .lf-social-welcome,
.lf-social-dock-bottom-right:has(.lf-social-launcher-details[open]) > .lf-social-welcome,
.lf-social-dock-top-left:has(.lf-social-launcher-details[open]) > .lf-social-welcome,
.lf-social-dock-top-right:has(.lf-social-launcher-details[open]) > .lf-social-welcome {
  visibility: hidden;
}
.lf-social-welcome { max-width: min(220px, 100%); max-height: min(160px, 40dvh); overflow: auto; overscroll-behavior: contain; padding: 8px 14px; background: var(--lf-surface, #fff); color: var(--lf-ink, #1f2937); border-radius: var(--lf-radius-sm); box-shadow: 0 8px 24px rgba(20,24,60,.16); font-size: 13px; overflow-wrap: anywhere; }
.lf-social-launcher-details { position: relative; }
.lf-social-launcher-details > summary { list-style: none; cursor: pointer; }
.lf-social-launcher-details > summary::-webkit-details-marker { display: none; }
.lf-social-launcher-button { position: relative; display: inline-flex; align-items: center; justify-content: center; color: #fff; border: 0; box-shadow: 0 10px 26px rgba(20,24,60,.28); transition: transform .15s ease; }
.lf-social-launcher-button:hover { transform: scale(1.06); }
.lf-social-launcher-pulse { animation: lfPulse 1.6s ease-in-out infinite; }
.lf-social-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; max-width: 80px; height: 18px; overflow: hidden; padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 11px; line-height: 18px; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lf-social-launcher-panel { position: absolute; right: 0; bottom: calc(100% + 12px); width: max-content; min-width: min(200px, max(0px, calc(100dvw - var(--lf-social-x, 20px) - 12px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)))); max-width: min(320px, max(0px, calc(100dvw - var(--lf-social-x, 20px) - 12px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)))); max-height: min(480px, max(0px, calc(100dvh - var(--lf-social-y, 20px) - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)))); overflow: auto; overscroll-behavior: contain; padding: 8px; background: var(--lf-surface, #fff); border-radius: var(--lf-radius-sm, 0px); box-shadow: 0 16px 48px rgba(20,24,60,.2); }
.lf-social-launcher-panel .lf-social-row { flex-wrap: nowrap; }
.lf-social-dock-bottom-left .lf-social-launcher-panel,
.lf-social-dock-top-left .lf-social-launcher-panel,
.lf-social-dock-middle-left .lf-social-launcher-panel { right: auto; left: 0; }
.lf-social-dock-top-left .lf-social-launcher-panel,
.lf-social-dock-top-right .lf-social-launcher-panel { top: calc(100% + 12px); bottom: auto; }
.lf-social-dock-middle-left .lf-social-launcher-panel,
.lf-social-dock-middle-right .lf-social-launcher-panel {
  top: 50%;
  bottom: auto;
  min-width: min(200px, max(0px, calc(100dvw - var(--lf-social-x, 20px) - 96px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))));
  max-width: min(320px, max(0px, calc(100dvw - var(--lf-social-x, 20px) - 96px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))));
  max-height: min(480px, max(0px, calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))));
  transform: translateY(-50%);
}
.lf-social-dock-middle-left .lf-social-launcher-panel {
  right: auto;
  left: calc(100% + 12px);
}
.lf-social-dock-middle-right .lf-social-launcher-panel {
  right: calc(100% + 12px);
  left: auto;
}
.lf-social-inline .lf-social-launcher-details {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}
.lf-social-inline.lf-social-align-left .lf-social-launcher-details { align-items: flex-start; }
.lf-social-inline.lf-social-align-center .lf-social-launcher-details { align-items: center; }
.lf-social-inline.lf-social-align-right .lf-social-launcher-details { align-items: flex-end; }
.lf-social-inline.lf-social-align-stretch .lf-social-launcher-details { align-items: stretch; }
.lf-social-inline .lf-social-launcher-panel {
  position: static;
  width: max-content;
  min-width: min(200px, 100%);
  max-width: 100%;
  max-height: min(480px, calc(100dvh - 96px));
  margin-top: 12px;
  transform: none;
}
.lf-social-absolute .lf-social-launcher-details {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}
.lf-social-absolute.lf-social-align-left .lf-social-launcher-details { align-items: flex-start; }
.lf-social-absolute.lf-social-align-center .lf-social-launcher-details { align-items: center; }
.lf-social-absolute.lf-social-align-right .lf-social-launcher-details { align-items: flex-end; }
.lf-social-absolute.lf-social-align-stretch .lf-social-launcher-details { align-items: stretch; }
.lf-social-absolute .lf-social-launcher-panel {
  /* Keep the panel out of the launcher's intrinsic size. Otherwise opening
     <details> changes the root dimensions and its percentage translate moves
     the button away from the configured absolute anchor. */
  position: absolute;
  width: max-content;
  min-width: min(200px, calc(100dvw - 24px));
  max-width: min(320px, calc(100dvw - 24px));
  max-height: min(480px, max(0px, calc(100dvh - 108px)));
  margin-top: 0;
  transform: none;
}
.lf-social-abs-open-right .lf-social-launcher-panel { left: 0; right: auto; }
.lf-social-abs-open-left .lf-social-launcher-panel { right: 0; left: auto; }
.lf-social-abs-open-down .lf-social-launcher-panel { top: calc(100% + 12px); bottom: auto; }
.lf-social-abs-open-up .lf-social-launcher-panel { bottom: calc(100% + 12px); top: auto; }
@media (prefers-reduced-motion: reduce) {
  .lf-social-launcher-pulse { animation: none; }
  .lf-social-launcher-button:hover { transform: none; }
}

/* ---------- countdown ---------- */
.lf-countdown-box {
  display: flex;
  gap: var(--lf-space-3);
  justify-content: center;
}
.lf-cd-cell {
  min-width: 62px;
  padding: var(--lf-space-3) var(--lf-space-2);
  border-radius: var(--lf-radius-sm);
  background: var(--lf-ink);
  color: var(--lf-surface);
  text-align: center;
}
.lf-cd-num {
  display: block;
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.lf-cd-label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.8;
}

/* ---------- lead form ---------- */
.lf-form-section {
  text-align: center;
}
.lf-form-sub { color: var(--lf-muted); margin: 0 0 var(--lf-space-5); font-size: 15px; line-height: 1.55; }
/* pageWidth 联动:默认 720-300=420 精确等旧值;拉宽后放到 560 封顶(单列表单可读上限)。 */
.lf-lead-form { max-width: max(420px, min(calc(var(--lf-maxw, 720px) - 300px), 560px)); margin: 0 auto; display: flex; flex-direction: column; gap: var(--lf-space-3); }
.lf-input {
  width: 100%;
  min-height: 44px;
  padding: 13px 14px;
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-sm);
  font-size: 15px;
  color: var(--lf-ink);
  background: var(--lf-surface);
  transition: border-color var(--lf-t-fast) var(--lf-ease),
              box-shadow var(--lf-t-fast) var(--lf-ease);
}
.lf-input::placeholder { color: var(--lf-muted); opacity: 0.85; }
.lf-input:hover { border-color: color-mix(in srgb, var(--lf-primary) 35%, var(--lf-line)); }
.lf-input:focus,
.lf-input:focus-visible {
  outline: none;
  border-color: var(--lf-primary);
  box-shadow: 0 0 0 3px var(--lf-ring);
}
.lf-input:disabled { opacity: 0.6; cursor: not-allowed; background: var(--lf-surface-2); }
.lf-form-btn { width: 100%; border: 0; margin-top: var(--lf-space-1); }
.lf-form-msg {
  margin-top: var(--lf-space-1); padding: var(--lf-space-3); border-radius: var(--lf-radius-sm);
  background: #dcfce7; color: #166534; font-size: 14px; font-weight: 600;
}

/* ---------- footer ---------- */
.lf-footer {
  text-align: center;
  color: var(--lf-muted);
  font-size: 12px;
  padding: 0;
}
.lf-footer-brand {
  margin: 0;
  padding: var(--lf-space-3) var(--lf-space-4);
  color: var(--lf-muted);
  font-size: 12px;
  text-align: center;
}

/* ---------- larger screens ---------- */
@media (min-width: 640px) {
  .lf-hero { padding: 0; }
  .lf-hero-title { font-size: 44px; }
  .lf-hero-subtitle { font-size: 18px; }
  .lf-gallery { grid-template-columns: repeat(3, 1fr); }
  .lf-heading { font-size: 27px; }
  .lf-section { padding: 0; }
}

/* ---------- columns 多列容器（Task 8，append-only） ---------- */
/* grid-template-columns / gap 由组件内联 style 给出；此处只定基础 display 与移动端堆叠。 */
.lf-columns { display: grid; }
/* 移动端(<640px)默认单列堆叠；stackMobile=false 时组件加 .lf-cols-keep 保持并排。 */
@media (max-width: 639px) {
  .lf-columns:not(.lf-cols-keep) { grid-template-columns: 1fr !important; }
}

/* ===== 格式化文字 ===== */
.lf-text-body {
  /* pageWidth 联动:默认 min(720-240,900)=480 小于 760 → 取 760 精确等旧值;拉宽后 900 封顶(行长可读)。 */
  max-width: max(760px, min(calc(var(--lf-maxw, 720px) - 240px), 900px));
  margin: 0 auto;
  color: inherit;
  line-height: 1.7;
  font-size: 16px;
}
.lf-text-body > :first-child { margin-top: 0; }
.lf-text-body > :last-child { margin-bottom: 0; }
.lf-text-body p { margin: 0 0 12px; }
.lf-text-body ul,
.lf-text-body ol { margin: 0 0 12px; padding-left: 1.5em; }
.lf-text-body li { margin: 4px 0; }
.lf-text-body a {
  color: var(--lf-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--lf-t-fast) var(--lf-ease);
}
.lf-text-body a:hover { color: var(--lf-primary-dark); }
.lf-text-body blockquote {
  margin: 0 0 12px;
  padding: 8px 16px;
  border-left: 3px solid var(--lf-primary);
  color: var(--lf-muted);
  font-style: italic;
}
/* ─────────────────────────────────────────────────────────────────────────
   P2-2 图片轮播 Carousel（append-only）
   scroll-snap 横向轨道 + 分页指示（dots / numbers）。变量：
     --lf-carousel-gap-x（幻灯片间距）/ --lf-carousel-gap-y（上下内边距）/
     --lf-carousel-dot（分页高亮色）。
   ───────────────────────────────────────────────────────────────────────── */
.lf-carousel-section { padding: 0; }
.lf-carousel {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--lf-carousel-gap-y, 0px) 0;
}
.lf-carousel-track {
  display: flex;
  gap: var(--lf-carousel-gap-x, 0px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.lf-carousel-track::-webkit-scrollbar { display: none; }
.lf-carousel-slide {
  flex: 0 0 auto;
  width: min(88%, 640px);
  scroll-snap-align: center;
}
.lf-carousel-slide a { display: block; }
.lf-carousel-slide img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}
.lf-carousel-square .lf-carousel-slide img { border-radius: 0; }
.lf-carousel-rounded .lf-carousel-slide img { border-radius: 16px; }

/* 分页指示 */
.lf-carousel-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.lf-carousel-dot {
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 0;
  background: rgba(20, 24, 60, 0.2);
  transition: background 0.15s ease, transform 0.15s ease;
}
.lf-carousel-nav-dots .lf-carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.lf-carousel-nav-dots .lf-carousel-dot:hover { background: rgba(20, 24, 60, 0.35); }
.lf-carousel-nav-dots .lf-carousel-dot.is-active {
  background: var(--lf-carousel-dot, var(--lf-primary));
  transform: scale(1.25);
}
.lf-carousel-nav-numbers .lf-carousel-dot {
  min-width: 26px;
  height: 26px;
  border-radius: 13px;
  color: #475467;
  font-size: 13px;
  line-height: 26px;
  background: rgba(20, 24, 60, 0.08);
}
.lf-carousel-nav-numbers .lf-carousel-dot.is-active {
  background: var(--lf-carousel-dot, var(--lf-primary));
  color: #fff;
}
@media (min-width: 720px) {
  .lf-carousel-slide { width: min(60%, 560px); }
}

/* ---------- mosaic（图片魔方，P2-3） ---------- */
/* 纯 CSS grid 拼图。每种 layout 一套栅格；间距/圆角/背景由内联 CSS 变量驱动。 */
.lf-mosaic {
  display: grid;
  column-gap: var(--lf-mos-gx, 0px);
  row-gap: var(--lf-mos-gy, 0px);
}
.lf-mosaic-cell {
  overflow: hidden;
  border-radius: var(--lf-mos-radius, 0px);
  background: var(--lf-line);
}
.lf-mosaic-cell,
.lf-mosaic-link {
  display: block;
  width: 100%;
  height: 100%;
}
.lf-mosaic-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.lf-mosaic-cell:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .lf-mosaic-cell:hover img { transform: none; }
}

/* single：单列铺满 */
.lf-mosaic-single { grid-template-columns: 1fr; }
.lf-mosaic-single .lf-mosaic-cell { aspect-ratio: 16 / 9; }

/* double / triple / quad：等分列（quad 为 2×2 方块） */
.lf-mosaic-double { grid-template-columns: repeat(2, 1fr); }
.lf-mosaic-triple { grid-template-columns: repeat(3, 1fr); }
.lf-mosaic-quad   { grid-template-columns: repeat(2, 1fr); }
.lf-mosaic-double .lf-mosaic-cell,
.lf-mosaic-triple .lf-mosaic-cell,
.lf-mosaic-quad .lf-mosaic-cell { aspect-ratio: 1 / 1; }

/* mosaic：大图 + 小图拼贴（首格跨 2×2，其余小格填充） */
.lf-mosaic-mosaic {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-auto-flow: dense;
}
.lf-mosaic-mosaic .lf-mosaic-cell { aspect-ratio: 1 / 1; }
.lf-mosaic-mosaic .lf-mosaic-cell-0 {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}

@media (max-width: 640px) {
  .lf-mosaic-triple,
  .lf-mosaic-quad { grid-template-columns: repeat(2, 1fr); }
  .lf-mosaic-mosaic { grid-template-columns: repeat(2, 1fr); }
}
/* ── 公告条 Announcement（P2-4）───────────────────────────────────────────── */
/* 横幅：图标 + 文本 + 可选关闭按钮。closable 用纯 CSS 关闭（隐藏 checkbox + label，
   :has(:checked) 时整条隐藏），发布页零 JS 即可关闭。 */
.lf-announcement {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 20px;
  background: var(--lf-primary);
  color: var(--lf-primary-ink);
  background-size: cover;
  background-position: center;
  line-height: 1.4;
}
/* 全出血变体(bleed=true opt-in;老页面无此类零影响)：横幅背景横贯整屏。
   flex 对齐(center/left/right)保持;文本仍限宽居中,避免超宽屏文字贴边。 */
.lf-announcement.lf-announcement-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: max(20px, calc(50vw - var(--lf-maxw, 720px) / 2));
  padding-right: max(20px, calc(50vw - var(--lf-maxw, 720px) / 2));
}
/* 尺寸档 */
.lf-announcement-sm { padding: 8px 16px; font-size: 13px; }
.lf-announcement-md { padding: 12px 20px; font-size: 15px; }
.lf-announcement-lg { padding: 18px 24px; font-size: 18px; }
/* 对齐档（文本区伸展 + text-align 控制内部对齐） */
.lf-announcement-left { justify-content: flex-start; }
.lf-announcement-center { justify-content: center; }
.lf-announcement-right { justify-content: flex-end; }
.lf-announcement-left .lf-announcement-text { text-align: left; }
.lf-announcement-center .lf-announcement-text { text-align: center; }
.lf-announcement-right .lf-announcement-text { text-align: right; }
/* closable 时给关闭按钮让位（右侧留白），文本仍居中不被挤偏 */
.lf-announcement-closable { padding-right: 44px; }
/* 图标 */
.lf-announcement-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lf-announcement-icon svg { width: 1.2em; height: 1.2em; display: block; }
/* 文本 */
.lf-announcement-text { display: inline-block; }
/* 纯 CSS 关闭：隐藏 checkbox；:has(:checked) 隐藏整条横幅 */
.lf-announcement-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
.lf-announcement:has(.lf-announcement-toggle:checked) { display: none; }
/* 关闭按钮（label）*/
.lf-announcement-close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  color: inherit;
  opacity: 0.8;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.lf-announcement-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.18); }
.lf-announcement-close svg { width: 16px; height: 16px; display: block; stroke-width: 2; }
/* ═══════════════════════════════════════════════════════════════════════════
   Dark mode — variable-only, OS-preference driven.

   Strategy: override ONLY the neutral surface/ink tokens (never brand/accent —
   they read fine on dark). Everything downstream (buttons, cards, forms,
   chat, mosaic, faq…) already consumes these tokens, so it recolors
   for free — zero hardcoded dark hex, zero markup change.

   Precedence: a page that has picked an explicit theme injects its own
   lf-theme :root override AFTER landing.css, so it wins by source order — an
   explicit light/dark theme is respected regardless of the OS setting. This
   block only reaches pages that set NO theme.
   ═════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --lf-bg: #0b1120;
    --lf-surface: #151c2c;
    --lf-ink: #e6e9f2;
    --lf-muted: #9aa4b8;
    --lf-line: #2a3346;

    --lf-surface-2: #1e2637;
    --lf-surface-hover: #29334a;
    --lf-hairline: rgba(255, 255, 255, 0.06);
    --lf-overlay-strong: rgba(0, 0, 0, 0.45);

    /* Slightly lift brand luminance so pill buttons stay vivid on dark bg.
       (Neutral-only rule; keeps AA contrast for --lf-primary-ink text.) */
    --lf-primary: #6366f1;
    --lf-primary-dark: #4f46e5;

    /* Soften elevation — big soft shadows read as murk on near-black. */
    --lf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --lf-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
    --lf-shadow-md: 0 12px 34px rgba(0, 0, 0, 0.5);
    --lf-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  }

  /* CTA / form gradient washes: rebuild on dark surface so the tint stays a
     subtle lift instead of a bright band (mix already surface-relative, but
     nudge the border to the darker hairline). */
  .lf-cta-section,
  .lf-form-section {
    border-color: var(--lf-line);
  }

  /* Carousel dot track: the neutral fills were tuned for light — invert wash. */
  .lf-carousel-nav-dots .lf-carousel-dot { background: rgba(255, 255, 255, 0.22); }
  .lf-carousel-nav-dots .lf-carousel-dot:hover { background: rgba(255, 255, 255, 0.38); }
  .lf-carousel-nav-numbers .lf-carousel-dot {
    background: rgba(255, 255, 255, 0.1);
    color: var(--lf-muted);
  }

}

/* ═══════════════════════════════════════════════════════════════════════════
   DTC 增补组件（APPEND-ONLY 块 — 只在文件末尾追加，不改上方任何既有规则）
   featureList 图标特性网格 / testimonial 用户见证 / statsBand 大数字横排 /
   logoWall 客户 Logo 墙。全部消费既有 token（--lf-primary/--lf-ink/--lf-muted/
   --lf-surface/--lf-radius），深色模式经变量免费继承，零硬编码暗色。
   ═════════════════════════════════════════════════════════════════════════ */

/* ── featureList 图标特性网格 ──────────────────────────────────────────── */
.lf-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 28px;
  margin-top: 0;
}
.lf-heading + .lf-features-grid { margin-top: 28px; }
@media (min-width: 640px) {
  .lf-features-grid[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
  .lf-features-grid[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }
}
.lf-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.1); /* color-mix 不可用时的回退 */
  color: var(--lf-primary, #4f46e5);
}
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .lf-feature-icon {
    background: color-mix(in srgb, var(--lf-primary, #4f46e5) 10%, transparent);
  }
}
.lf-feature-icon svg {
  width: 24px;
  height: 24px;
}
.lf-feature-title {
  margin: 12px 0 6px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--lf-ink, #111827);
}
.lf-feature-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--lf-muted, #6b7280);
}

/* ── testimonial 用户见证卡 ────────────────────────────────────────────── */
.lf-quotes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 0;
}
.lf-heading + .lf-quotes-grid { margin-top: 28px; }
@media (min-width: 640px) {
  .lf-quotes-grid { grid-template-columns: repeat(2, 1fr); }
  /* 仅 1 条见证：单卡居中、限宽，避免一条引文被拉成整行大板。 */
  .lf-quote-card:only-child {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  /* 奇数条(≥3)时末卡跨两列居中限宽,消掉「2+1 孤儿卡」右侧整块空白。 */
  .lf-quote-card:last-child:nth-child(odd):not(:only-child) {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* 恰好 3 条且容器够宽:三卡同行(比 2+1 居中更稳的重心)。:has 精准命中,4+ 条不受影响。 */
@media (min-width: 1000px) {
  .lf-quotes-grid:has(> .lf-quote-card:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
  }
  .lf-quotes-grid:has(> .lf-quote-card:nth-child(3):last-child) > .lf-quote-card:last-child {
    grid-column: auto;
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}
.lf-quote-card {
  position: relative;
  margin: 0;
  padding: 24px;
  background: var(--lf-surface, #ffffff);
  border-radius: var(--lf-radius, 16px);
}
/* 排版引号：CSS 提供的大号弯引号水印，内容侧不放直引号字符。 */
.lf-quote-card::before {
  content: '\201C';
  position: absolute;
  top: 6px;
  left: 18px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 64px;
  line-height: 1;
  color: var(--lf-primary, #4f46e5);
  opacity: 0.14;
  pointer-events: none;
}
.lf-quote-text {
  position: relative; /* 压在 ::before 水印之上 */
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--lf-ink, #111827);
}
.lf-quote-who {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 16px;
}
.lf-quote-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.lf-quote-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--lf-ink, #111827);
}
.lf-quote-role {
  font-size: 13px;
  color: var(--lf-muted, #6b7280);
}

/* ── statsBand 大数字横排（无卡片无边框，数字自己呼吸） ─────────────────── */
.lf-stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
@media (min-width: 640px) {
  /* 数字带要呼吸:项间距开阔才像 band 而不是挤在一起的三个数字(P1-2)。 */
  .lf-stats-row { gap: 96px; }
}
.lf-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.lf-stat-value {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--lf-ink, #111827);
}
.lf-stat-label {
  margin-top: 4px;
  font-size: 13px;
  color: var(--lf-muted, #6b7280);
}

/* ── logoWall 客户 Logo 墙（安静的社会证明） ───────────────────────────── */
.lf-logos-title {
  margin: 0 0 20px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--lf-muted, #6b7280);
}
.lf-logos-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 40px 32px;
}
.lf-logo-img {
  height: 28px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.lf-logo-img:hover {
  opacity: 0.8;
}
/* grayscale=false：整面墙关闭滤镜，还原品牌色。 */
.lf-logos-color .lf-logo-img {
  filter: none;
  opacity: 1;
}
.lf-logos-color .lf-logo-img:hover {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .lf-logo-img { transition: none; }
}
/* ═══ /DTC 增补组件（APPEND-ONLY 块结束） ═══ */

/* ═══ MOB 增补组件（APPEND-ONLY 块：本块只在文件末尾整体追加——其他区域由并行
   工程师同时改动，勿在文件中部插改既有规则）═══
   stickyCta 移动端吸底转化条 + productShowcase 色卡切换主图。 */

/* ── stickyCta 移动端吸底转化条（滚动阈值后由内联脚本解除 hidden 并置 data-on 滑入）── */
.lf-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px max(16px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom));
  background: var(--lf-surface);
  border-top: 1px solid rgba(20, 24, 60, 0.08);
  box-shadow: 0 -8px 30px rgba(20, 24, 60, 0.1);
  transform: translateY(110%);
  transition: transform 240ms var(--lf-ease);
}
.lf-sticky-cta[hidden] { display: none; }
.lf-sticky-cta[data-on] { transform: translateY(0); }
.lf-sticky-price {
  font-size: 17px;
  font-weight: 700;
  color: var(--lf-ink);
}
.lf-sticky-strike {
  font-size: 13px;
  color: var(--lf-muted);
  text-decoration: line-through;
  margin-left: 6px;
}
.lf-sticky-note {
  display: block;
  font-size: 11px;
  color: var(--lf-muted);
}
.lf-sticky-btn {
  margin-left: auto;
  white-space: nowrap;
}
/* 缺省仅 ≤820px 移动端可见；根节点带 data-desktop（且已被脚本解除 hidden）时桌面也显示。 */
@media (min-width: 821px) {
  .lf-sticky-cta { display: none; }
  .lf-sticky-cta[data-desktop]:not([hidden]) { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-sticky-cta { transition: none; }
}

/* ── productShowcase 色卡切换主图（radiogroup 色卡 → 内联脚本换主图） ──────── */
.lf-showcase-stage img {
  width: 100%;
  border-radius: var(--lf-radius);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.lf-showcase-picker {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}
.lf-showcase-swatch {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  /* 视觉 30px 不变,伪元素扩热区到 ~46px(移动端 tap target ≥44)。 */
  position: relative;
}
.lf-showcase-swatch::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 999px;
}
.lf-showcase-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sw, #e5e7eb);
  /* 描边加深:白色/浅色 swatch 在白底上要可见。 */
  box-shadow: inset 0 0 0 1px rgba(20, 24, 60, 0.28);
}
.lf-showcase-swatch.lf-on {
  border-color: var(--lf-primary);
  border-radius: 999px;
}
.lf-showcase-label {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--lf-muted);
  text-align: center;
}
/* ═══ /MOB 增补组件（APPEND-ONLY 块结束） ═══ */

/* ═══════════════════════════════════════════════════════════════════════════
   OPT-IN 增强（APPEND-ONLY 块 — 只在文件末尾追加，不改上方任何既有规则）
   testimonial 星级评分 / 已购验证徽标；featureList 图标尺寸 sm|lg / solid 实底；
   cta & hero 大号按钮 lf-btn-lg。全部由组件 opt-in 类触发，老页面无这些类 → 零影响。
   ═════════════════════════════════════════════════════════════════════════ */

/* ── testimonial 星级评分（blockquote 内 quote 之后） ─────────────────────── */
.lf-quote-stars {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: 2px;
  color: #f59e0b;
}

/* ── testimonial 已购验证徽标（figcaption 内 role 之后） ──────────────────── */
.lf-quote-verified {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--lf-primary, #4f46e5);
  background: rgba(14, 116, 144, 0.08); /* color-mix 不可用时的回退 */
}
@supports (background: color-mix(in srgb, red 8%, transparent)) {
  .lf-quote-verified {
    background: color-mix(in srgb, var(--lf-primary, #4f46e5) 8%, transparent);
  }
}

/* ── featureList 图标尺寸（覆盖上方 44px/24px 基准；后置同类降维靠特异性生效）── */
.lf-features-icon-sm .lf-feature-icon { width: 36px; height: 36px; }
.lf-features-icon-sm .lf-feature-icon svg { width: 18px; height: 18px; }
.lf-features-icon-lg .lf-feature-icon { width: 64px; height: 64px; }
.lf-features-icon-lg .lf-feature-icon svg { width: 28px; height: 28px; }
/* 大图标档文字层级联动:图标 64px 时 16px 标题/14px 正文撑不住,各提一档。 */
.lf-features-icon-lg .lf-feature-title { font-size: 19px; }
.lf-features-icon-lg .lf-feature-text { font-size: 15px; }

/* ── featureList 实底图标（覆盖淡底 + color-mix @supports 分支）───────────── */
.lf-features-solid .lf-feature-icon {
  background: var(--lf-primary, #4f46e5);
  color: var(--lf-primary-ink, #ffffff);
}

/* ── 大号按钮（cta/hero btnSize='lg'）— 约 125% 于 .lf-btn 基准 ───────────── */
.lf-btn-lg {
  min-height: 56px;
  padding: 16px 36px;
  font-size: 20px;
}
@media (max-width: 639px) {
  /* 窄屏收敛，防长文案按钮溢出视口 */
  .lf-btn-lg {
    min-height: 52px;
    padding: 14px 28px;
    font-size: 18px;
    max-width: 100%;
  }
}
/* ── hero opt-in 品牌 eyebrow / 首屏价格锚（price/strike/note,与 StickyCta 同名键） ── */
.lf-hero-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lf-primary, #4f46e5);
  margin: 0 0 var(--lf-space-3);
}
/* 非分栏（照片底）hero 上 eyebrow 继承白字更稳 */
.lf-hero-bg .lf-hero-eyebrow { color: inherit; opacity: 0.92; }
.lf-hero-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin: -6px 0 var(--lf-space-5);
}
.lf-hero-price-now {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
}
.lf-hero-price-was {
  font-size: 17px;
  color: var(--lf-muted, #6b7280);
  text-decoration: line-through;
}
.lf-hero-price-note {
  font-size: 13px;
  font-weight: 600;
  color: var(--lf-primary, #4f46e5);
  background: color-mix(in srgb, var(--lf-primary, #4f46e5) 10%, #fff);
  padding: 3px 10px;
  border-radius: 999px;
}

/* ── showcase 大图高度上限：核心互动（swatch）别被超高图顶出视口 ──────────── */
.lf-showcase-stage img {
  max-height: min(70vh, 640px);
}
/* ── Form 扩展字段（select/textarea/checkbox,opt-in;老表单无这些类零影响） ── */
.lf-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
/* 未选择时占位灰(required + 空值);选中后正常 ink 色 */
.lf-select:invalid { color: var(--lf-muted, #6b7280); }
.lf-textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}
.lf-form-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--lf-muted, #6b7280);
  line-height: 1.5;
  cursor: pointer;
  text-align: left;
}
.lf-form-consent input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--lf-primary, #4f46e5);
  cursor: pointer;
}

/* ── SAAS-1 定价卡组 pricingCards ─────────────────────────────────────────── */
.lf-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 0;
  align-items: stretch;
}
.lf-heading + .lf-pricing-grid { margin-top: 28px; }
@media (min-width: 720px) {
  .lf-pricing-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
.lf-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--lf-surface, #fff);
  border: 1px solid var(--lf-line, #e5e7eb);
  border-radius: var(--lf-radius, 12px);
  padding: 28px 24px;
}
.lf-plan-hot {
  border: 2px solid var(--lf-primary, #4f46e5);
  box-shadow: 0 12px 36px color-mix(in srgb, var(--lf-primary, #4f46e5) 14%, transparent);
}
.lf-plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--lf-primary, #4f46e5);
  color: var(--lf-primary-ink, #fff);
  white-space: nowrap;
}
.lf-plan-name { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.lf-plan-tagline { margin: 0 0 12px; font-size: 13.5px; color: var(--lf-muted, #6b7280); }
.lf-plan-price { display: flex; align-items: baseline; gap: 6px; margin: 0 0 16px; }
.lf-plan-amount { font-size: 34px; font-weight: 800; letter-spacing: -0.01em; line-height: 1; }
.lf-plan-period { font-size: 13.5px; color: var(--lf-muted, #6b7280); }
.lf-plan-features {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14.5px;
  flex: 1; /* 撑开使各卡 CTA 底对齐 */
}
.lf-plan-features li { padding-left: 22px; position: relative; }
.lf-plan-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--lf-primary, #4f46e5);
  font-weight: 700;
}
.lf-plan-cta { display: block; text-align: center; }

/* ── SAAS-2 对比表 comparisonTable ────────────────────────────────────────── */
/* 表格横向内滚,页面 body 永不横滚 */
.lf-compare-scroll { overflow-x: auto; margin-top: 0; -webkit-overflow-scrolling: touch; }
.lf-heading + .lf-compare-scroll { margin-top: 24px; }
.lf-compare-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.lf-compare-table th,
.lf-compare-table td {
  padding: 12px 16px;
  text-align: center;
  border-bottom: 1px solid var(--lf-line, #e5e7eb);
}
.lf-compare-table thead th {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--lf-muted, #6b7280);
}
.lf-compare-feature {
  text-align: left !important;
  font-weight: 600;
  color: var(--lf-ink, #111827);
  white-space: nowrap;
}
/* 首数据列 = 产品自身,主色淡底高亮 */
.lf-compare-table .lf-compare-us {
  background: color-mix(in srgb, var(--lf-primary, #4f46e5) 6%, transparent);
}
.lf-compare-table thead .lf-compare-us {
  color: var(--lf-primary, #4f46e5);
  font-weight: 800;
}
.lf-compare-yes { color: var(--lf-primary, #4f46e5); font-weight: 800; }
.lf-compare-no { color: var(--lf-muted, #9ca3af); font-weight: 700; }
/* ═══ /OPT-IN 增强（APPEND-ONLY 块结束） ═══ */

/* ═══ NAV 增补（APPEND-ONLY）：页头导航 navBar + 页脚 pageFooter ═══ */
/* ── navBar：品牌条。sticky 变体吸顶（自管样式——styleWrap 包裹会塌缩粘滞范围）。 */
.lf-nav {
  background: var(--lf-surface, #ffffff);
  border-bottom: 1px solid var(--lf-line, #e6e9f0);
}
.lf-nav-sticky {
  position: sticky;
  top: 0;
  z-index: 50;
  /* 半透明 + 毛玻璃；不支持 backdrop-filter 的浏览器回退纯色（background 先声明）。 */
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  background: color-mix(in srgb, var(--lf-surface, #ffffff) 86%, transparent);
}
.lf-nav-inner {
  max-width: var(--lf-maxw, 720px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
}
.lf-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  text-decoration: none;
  color: var(--lf-ink, #1a2233);
  font-weight: 800;
}
.lf-nav-logo { height: 28px; width: auto; display: block; }
.lf-nav-name { font-size: 16px; letter-spacing: -0.01em; }
/* 链接列：移动端横向滚动（无汉堡、零脚本），滚动条隐藏。 */
.lf-nav-links {
  display: flex;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.lf-nav-links::-webkit-scrollbar { display: none; }
.lf-nav-links a {
  color: var(--lf-muted, #5b6577);
  text-decoration: none;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: var(--lf-radius-xs, 8px);
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.lf-nav-links a:hover {
  color: var(--lf-ink, #1a2233);
  background: var(--lf-hairline, rgba(20, 24, 60, 0.06));
}
.lf-nav-links a:focus-visible {
  outline: 2px solid var(--lf-ring, rgba(79, 70, 229, 0.32));
  outline-offset: 1px;
}
.lf-nav-cta { flex: none; padding: 8px 14px; font-size: 14px; }
/* 锚点跳转平滑滚动（导航是页面第一个引入锚点跳转的组件；reduced-motion 尊重系统）。 */
@media (prefers-reduced-motion: no-preference) {
  html:has(.lf-nav) { scroll-behavior: smooth; }
}

/* ── pageFooter：合规收尾带（链接列 + 版权 + 备案小字）。 */
.lf-footer {
  border-top: 1px solid var(--lf-line, #e6e9f0);
  margin-top: 0;
  padding: 0;
}
.lf-footer-inner {
  max-width: var(--lf-maxw, 720px);
  margin: 0 auto;
  text-align: center;
}
.lf-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
  margin-bottom: 12px;
}
.lf-footer-links a {
  color: var(--lf-muted, #5b6577);
  text-decoration: none;
  font-size: 13px;
}
.lf-footer-links a:hover { color: var(--lf-ink, #1a2233); text-decoration: underline; }
.lf-footer-copy { margin: 0; font-size: 12px; color: var(--lf-muted, #5b6577); }
.lf-footer-note { margin: 4px 0 0; font-size: 12px; color: var(--lf-muted, #5b6577); opacity: 0.8; }
/* ═══ /NAV 增补（APPEND-ONLY 块结束） ═══ */

/* ═══ EMB 增补（APPEND-ONLY）：通用第三方嵌入 embed ═══ */
.lf-embed-frame {
  width: 100%;
  border: 0;
  display: block;
  border-radius: var(--lf-radius-sm, 10px);
  background: var(--lf-surface-2, #f1f3f7); /* iframe 加载前的占位底色 */
  margin-top: 0;
}
.lf-embed .lf-heading + .lf-embed-frame { margin-top: 20px; }
.lf-embed-frame-editor { pointer-events: none; }
.lf-embed-placeholder { text-align: center; }
.lf-embed-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 200px;
  margin-top: 0;
  padding: 24px;
  border: 1px dashed var(--lf-line, #d8dce5);
  border-radius: var(--lf-radius-sm, 10px);
  background: color-mix(in srgb, var(--lf-surface-2, #f1f3f7) 88%, transparent);
  color: inherit;
}
.lf-embed-empty strong { font-weight: 700; }
.lf-embed-empty span { max-width: 520px; font-size: 13px; opacity: 0.72; }
.lf-embed-editor-note {
  margin: 10px 0 0;
  font-size: 12px !important;
  line-height: 1.5;
  text-align: center;
  color: var(--lf-muted, #5b6577) !important;
}
.lf-fs .lf-embed-editor-note { font-size: 12px !important; }

/* 仅编辑器画布会有 data-lf-editor-component。Image/Video/LogoWall 等组件在必填
   内容尚未填写时可能合法返回 null；给选择框一个可见占位，避免再次出现“字段在变，
   画布完全没反应”的假象。发布页没有该属性，零影响。 */
[data-lf-editor-component]:empty::before,
[data-lf-editor-component] > div:empty::before {
  content: '请在右侧补充组件内容';
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--lf-line, #d8dce5);
  border-radius: var(--lf-radius-sm, 10px);
  color: var(--lf-muted, #5b6577);
  background: var(--lf-surface-2, #f1f3f7);
  font-size: 13px;
  text-align: center;
}
/* ═══ /EMB 增补（APPEND-ONLY 块结束） ═══ */

/* ═══ LAYOUT 增补（APPEND-ONLY）：约束式 Section / Stack ═══ */
/*
   外层承载背景/边框/全出血，内层承载内容宽度与垂直 Stack。数值来自 Section.tsx
   的有界 CSS variables；这里保留 fallback，手写/API 数据缺键时仍有可用默认布局。
*/
.lf-layout-section {
  position: relative;
  width: 100%;
}
.lf-layout-section.lf-layout-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.lf-layout-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-inline: auto;
  gap: var(--lf-section-gap, 0px);
  padding:
    var(--lf-section-pad-top, 0px)
    var(--lf-section-pad-x, 0px)
    var(--lf-section-pad-bottom, 0px);
  min-height: var(--lf-section-min-height, 0);
}
.lf-layout-inner > * { max-width: 100%; }

/* 内容宽度档：背景可 full bleed，内容始终保持可读约束。 */
.lf-layout-width-narrow { max-width: min(100%, 560px); }
.lf-layout-width-content { max-width: min(100%, var(--lf-maxw, 720px)); }
.lf-layout-width-wide { max-width: min(100%, 1200px); }

/* 水平对齐同时控制 flex item 与继承文本；stretch 不强改文字对齐。 */
.lf-layout-align-left { align-items: flex-start; text-align: left; }
.lf-layout-align-center { align-items: center; text-align: center; }
.lf-layout-align-right { align-items: flex-end; text-align: right; }
.lf-layout-align-stretch { align-items: stretch; }

/* minHeight 大于内容高度时的垂直定位。 */
.lf-layout-valign-top { justify-content: flex-start; }
.lf-layout-valign-center { justify-content: center; }
.lf-layout-valign-bottom { justify-content: flex-end; }

/* 设备可见性。all 不加类，老浏览器自然显示。 */
@media (min-width: 640px) {
  .lf-layout-visible-mobile { display: none !important; }
}
@media (max-width: 639px) {
  .lf-layout-visible-desktop { display: none !important; }

  .lf-layout-inner {
    gap: var(--lf-section-mobile-gap, var(--lf-section-gap, 0px));
    padding:
      var(--lf-section-mobile-pad-top, var(--lf-section-pad-top, 0px))
      var(--lf-section-mobile-pad-x, var(--lf-section-pad-x, 0px))
      var(--lf-section-mobile-pad-bottom, var(--lf-section-pad-bottom, 0px));
  }
  .lf-layout-mobile-align-left { align-items: flex-start; text-align: left; }
  .lf-layout-mobile-align-center { align-items: center; text-align: center; }
  .lf-layout-mobile-align-right { align-items: flex-end; text-align: right; }
  .lf-layout-mobile-align-stretch { align-items: stretch; }
}
/* ═══ /LAYOUT 增补（APPEND-ONLY 块结束） ═══ */

/* ── CTA 百分比高度（APPEND-ONLY）────────────────────────────────────── */
/* 以按钮当前真实 auto 外框为 100%；React/string renderer 预先计算桌面与移动值
   写入变量，避免 CSS height:% 依赖一个通常没有显式高度的父容器。 */
.lf-btn-height-pct {
  min-height: var(--lf-btn-height);
}
@media (max-width: 639px) {
  .lf-btn-height-pct {
    min-height: var(--lf-btn-height-mobile, var(--lf-btn-height));
  }
}

/* ═══ EDITOR REAL ROOT（APPEND-ONLY）═══════════════════════════════════════
   Puck marks inline component roots as draggable and writes
   `style="position:relative"`. Editor-only data attributes restore the real
   authored positioning with !important; published markup never has them. */
[data-lf-editor-detached="fixed"] { position: fixed !important; }
[data-lf-editor-detached="absolute"] { position: absolute !important; }
.lf-nav-sticky[data-lf-editor-sticky] { position: sticky !important; }
.lf-sticky-cta[data-lf-editor-preview] { display: flex !important; }
.lf-nav-editor-empty {
  flex: 1;
  color: var(--lf-muted, #5b6577);
  font-size: 13px;
  text-align: center;
}
/* ═══ /EDITOR REAL ROOT ═══════════════════════════════════════════════════ */