/* LIVEPLUS public-site shell shared by the full homepage, terminal product page
   and guide. Page-specific layouts stay intact; this file owns brand, header,
   typography, controls and common surface treatment. */
@font-face {
  font-family: "FontAwesome";
  src: url("/shared/fonts/fontawesome-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
:root {
  color-scheme: light;
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface2: #f1f3f6;
  --line: #e3e7ed;
  --fg: #111827;
  --muted: #556177;
  --dim: #737f92;
  --brand: #2878f0;
  --brand2: #1764d9;
  --grn: #168456;
  --red: #d92d36;
  --amber: #a85f00;
  --gold: #a85f00;
}
.lp-marketing {
  background:
    radial-gradient(circle at 16% 0, rgba(40,120,240,.08), transparent 26rem),
    var(--bg);
  color: var(--fg);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
.lp-marketing > header {
  background: rgba(255, 255, 255, .92);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(17,24,39,.025);
}
.lp-marketing .nav { min-height: 64px; height: 64px; }
.lp-marketing .logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: var(--fg);
  font-size: 18px;
  font-weight: 850;
  letter-spacing: .08em;
  white-space: nowrap;
}
.lp-marketing .logo span { color: var(--brand); }
.lp-marketing .logo b { color: inherit; background: none; -webkit-text-fill-color: currentColor; }
.lp-marketing .logo small {
  color: var(--dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
}
.lp-marketing .nav-links { display: flex; align-items: center; gap: 22px; font-size: 13px; }
.lp-marketing .nav-links a { color: var(--muted); }
.lp-marketing .nav-links a:hover { color: var(--fg); }
.lp-marketing .nav-cta,
.lp-marketing .btn-primary,
.lp-marketing .cta:not(.ghost) {
  border-radius: 6px;
  background: var(--brand);
  box-shadow: 0 6px 16px rgba(40,120,240,.18);
}
.lp-marketing .nav-cta {
  padding: 9px 18px;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}
.lp-marketing .btn,
.lp-marketing .cta { border-radius: 6px; }
.lp-marketing .btn-ghost,
.lp-marketing .cta.ghost { border-color: #cdd4df; background: var(--surface); color: var(--fg); }
.lp-marketing .badge { border-color: #d9e9ff; background: #eef5ff; color: #164fa7; }
.lp-marketing .pain,
.lp-marketing .case,
.lp-marketing .step,
.lp-marketing .card,
.lp-marketing .pcard,
.lp-marketing .sku,
.lp-marketing .shot,
.lp-marketing .cap,
.lp-marketing .why,
.lp-marketing .lu,
.lp-marketing .qd {
  border-color: var(--line);
  border-radius: 10px;
  background-color: var(--surface);
  box-shadow: 0 1px 2px rgba(17,24,39,.025);
}
.lp-marketing section { border-top-color: var(--line); }
.lp-marketing .hero::before {
  background: radial-gradient(760px 380px at 50% -60px, rgba(40,120,240,.14), transparent 70%);
}
.lp-marketing .cmp,
.lp-marketing .arch,
.lp-marketing .mock,
.lp-marketing .pcard,
.lp-marketing .price,
.lp-marketing .dl,
.lp-marketing .freebox .fb-l { background: var(--surface); }
.lp-marketing .cmp thead th,
.lp-marketing .spec th,
.lp-marketing .tblwrap th { background: #fafbfc; }
.lp-marketing .cmp th,
.lp-marketing .cmp td,
.lp-marketing .spec th,
.lp-marketing .spec td,
.lp-marketing .tblwrap th,
.lp-marketing .tblwrap td { border-bottom-color: var(--line); }
.lp-marketing .std { background: #fafbfc; }
.lp-marketing .pcard.hot,
.lp-marketing .sku.hot,
.lp-marketing .hwcard.hot,
.lp-marketing .qd.hot { border-color: #9bc2ff; box-shadow: 0 0 0 1px #d9e9ff inset; }
.lp-marketing .pcard .go,
.lp-marketing .hwcard .go { border-radius: 6px; background: var(--surface2); }
.lp-marketing .pcard.hot .go,
.lp-marketing .hwcard.hot .go {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}
.lp-marketing .hero h1 .g {
  background: linear-gradient(90deg, #1764d9, #2878f0);
  -webkit-background-clip: text;
  background-clip: text;
}
.lp-marketing .tip { border-color: #b8e2ce; background: #eaf8f1; color: #176845; }
.lp-marketing .warn { border-color: #efd38c; background: #fff7dc; color: #815000; }
.lp-marketing code,
.lp-marketing .kbd { border-color: #d9e9ff; background: #eef5ff; color: #164fa7; }
.lp-marketing li,
.lp-marketing td:last-child { color: var(--muted); }
.lp-marketing .role.dir { border-color: #bdd7ff; background: #eef5ff; color: #164fa7; }
.lp-marketing .role.cam { border-color: #b8e2ce; background: #eaf8f1; color: #176845; }
.lp-marketing .fb-l,
.lp-marketing .fb-r,
.lp-marketing .wb,
.lp-marketing .vs-card,
.lp-marketing .spec,
.lp-marketing .tally-bar div { border-radius: 10px; }
.lp-marketing .sec-h h2,
.lp-marketing .hero h1 { letter-spacing: -.035em; }
.lp-marketing .fa {
  width: 1.25em;
  text-align: center;
  font-family: "FontAwesome" !important;
  font-style: normal;
  font-weight: normal;
}
.lp-marketing footer { color: var(--dim); }
.lp-guide .nav { max-width: 1120px; }
.lp-guide .guide-brand { display: flex; align-items: baseline; gap: 10px; }
.lp-guide .guide-brand small { color: var(--muted); letter-spacing: .04em; font-size: 12px; }
@media (max-width: 900px) {
  .lp-marketing .nav-links { display: none; }
  .lp-marketing .nav { padding-left: 18px; padding-right: 18px; }
}