:root {
  color-scheme: light;
  --bg: #f5f8fc;
  --panel: #ffffff;
  --panel-soft: #f8fbff;
  --line: #dfe8f3;
  --line-strong: #ccd9e8;
  --text: #172033;
  --muted: #526175;
  --subtle: #8390a3;
  --blue: #2478ff;
  --cyan: #1ecbff;
  --blue-soft: #eef5ff;
  --green: #00a870;
  --green-soft: #e9f8f2;
  --amber: #f59e0b;
  --red: #ef4444;
  --red-soft: #fff1f2;
  --radius: 18px;
  --shadow: 0 18px 44px rgba(21, 35, 60, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 1180px;
  background:
    radial-gradient(circle at 10% 0%, rgba(36, 120, 255, 0.12), transparent 32%),
    radial-gradient(circle at 90% 12%, rgba(30, 203, 255, 0.12), transparent 34%),
    linear-gradient(180deg, #f7faff 0%, var(--bg) 52%, #f7f9fc 100%);
  color: var(--text);
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.page-shell {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding: 26px 0 34px;
}

.hero-card,
.panel,
.quick-info article,
.download-card,
.benefit-grid article,
details {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow);
}

.hero-card {
  overflow: hidden;
  border-radius: 26px;
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
}

.brand,
.nav-actions,
.hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand { color: inherit; text-decoration: none; }
.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, #1b6fff 0%, #20d4ff 100%);
  box-shadow: 0 12px 24px rgba(36, 120, 255, 0.22);
  color: #fff;
  font-weight: 900;
}
.brand-mark span { font-size: 14px; letter-spacing: -0.04em; }
.brand-copy strong,
.brand-copy small { display: block; }
.brand-copy strong { font-size: 16px; }
.brand-copy small { margin-top: 3px; color: var(--subtle); font-size: 12px; }

.nav-actions { flex-wrap: wrap; justify-content: flex-end; }
.nav-link,
.primary-btn,
.secondary-btn,
.lang-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.primary-btn { min-height: 44px; padding: 0 20px; border-color: var(--blue); background: var(--blue); color: #fff; font-size: 15px; box-shadow: 0 12px 26px rgba(36, 120, 255, 0.22); }
.secondary-btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
.secondary-btn:hover,
.nav-link:hover,
.lang-btn:hover { border-color: #b9d4ff; color: var(--blue); background: var(--blue-soft); }
.language-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
}
.lang-btn { min-height: 30px; padding: 0 10px; border: 0; border-radius: 9px; }
.lang-btn.active { color: #fff; background: var(--blue); }

.hero-content {
  display: grid;
  grid-template-columns: minmax(390px, 0.86fr) minmax(520px, 1.14fr);
  align-items: stretch;
  gap: 30px;
  padding: 40px 44px 42px;
}
.hero-main {
  min-height: clamp(430px, 34vw, 520px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 0 16px;
}
.eyebrow,
.section-title span,
.quick-info span,
.scenario-card span,
.visual-label {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}
.hero-main h1 {
  margin: 0;
  max-width: 660px;
  font-size: clamp(32px, 3.3vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.045em;
}
.hero-main h1 span,
.hero-main h1 em {
  display: block;
}
.hero-main h1 em {
  margin-top: 10px;
  font-style: normal;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #2478ff, #18bdf7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lead {
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: #334155 !important;
}
.hero-main p {
  margin: 18px 0 0;
  max-width: 680px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
}
.hero-note {
  display: inline-block;
  margin-top: 14px !important;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f1f5f9;
  color: #475569 !important;
  font-size: 13px !important;
}
.hero-actions { margin-top: 26px; flex-wrap: wrap; }

.hero-carousel {
  min-width: 0;
  align-self: center;
  justify-self: end;
  width: min(100%, 740px);
}
.carousel-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(169, 194, 228, 0.8);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,249,255,0.96));
  box-shadow: 0 26px 64px rgba(21, 35, 60, 0.13);
}
.carousel-track {
  position: relative;
  min-height: 0;
}
/* V3.8.23: use display switching instead of absolute stacking.
   This prevents inactive carousel images from leaking into the page layout. */
.carousel-slide {
  display: none;
  margin: 0;
}
.carousel-slide.active {
  display: block;
}
.carousel-image-button {
  width: 100%;
  height: clamp(340px, 33vw, 480px);
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 14px 16px 28px;
  border: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  cursor: zoom-in;
}
.carousel-image-button:focus-visible { outline: 3px solid rgba(36, 120, 255, 0.32); outline-offset: -3px; }
.carousel-slide img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  display: block;
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}
.carousel-slide figcaption { display: none; }
.carousel-btn {
  position: absolute;
  top: 42%;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(182, 203, 229, 0.9);
  border-radius: 999px;
  background: rgba(255,255,255,0.88);
  color: #1d4ed8;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}
.carousel-btn:hover { background: #fff; border-color: #94bfff; }
.carousel-btn.prev { left: 14px; }
.carousel-btn.next { right: 14px; }
.carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}
.carousel-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(71, 85, 105, 0.28);
  cursor: pointer;
  pointer-events: auto;
  transition: width .2s ease, background .2s ease;
}
.carousel-dots button.active {
  width: 28px;
  background: var(--blue);
}

.hero-visual {
  min-height: 420px;
  display: grid;
  grid-template-columns: 1fr 72px 1fr;
  align-items: center;
  gap: 12px;
}
.visual-card {
  min-height: 340px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}
.visual-old { background: linear-gradient(180deg, #fff 0%, #fff8f8 100%); }
.visual-new { background: linear-gradient(180deg, #fff 0%, #f4fbff 100%); }
.visual-label { margin-bottom: 14px; }
.visual-label.danger { color: #b42318; background: var(--red-soft); }
.visual-label.success { color: #027a48; background: var(--green-soft); }
.chat-window,
.folder-window {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.chat-window b,
.folder-window b { display: block; font-size: 14px; }
.chat-window p,
.folder-window span,
.visual-card p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.old-steps { display: grid; gap: 10px; margin-top: 16px; }
.old-steps span {
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff1f2;
  color: #b42318;
  font-size: 12px;
  font-weight: 800;
}
.folder-window em {
  display: inline-flex;
  margin-top: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #027a48;
  background: var(--green-soft);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}
.bridge-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #2478ff, #20d4ff);
  box-shadow: 0 18px 36px rgba(36, 120, 255, 0.24);
}
.bridge-icon span {
  width: 30px;
  height: 18px;
  border: 4px solid #fff;
  border-top: 0;
  border-radius: 0 0 26px 26px;
  position: relative;
}
.bridge-icon span::before,
.bridge-icon span::after {
  content: "";
  position: absolute;
  top: -16px;
  width: 4px;
  height: 22px;
  background: #fff;
  border-radius: 4px;
}
.bridge-icon span::before { left: 2px; }
.bridge-icon span::after { right: 2px; }

.quick-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.quick-info article,
.panel,
.download-card,
.benefit-grid article { border-radius: var(--radius); }
.quick-info article { padding: 18px; }
.quick-info span { background: #f1f5f9; color: var(--muted); }
.quick-info strong { display: block; margin-top: 12px; font-size: 19px; letter-spacing: -0.03em; }
.quick-info p,
.section-title p,
.download-card p,
.panel p,
details p { color: var(--muted); font-size: 13px; line-height: 1.75; }

.steps { margin-top: 34px; scroll-margin-top: 24px; }
.section-title { margin-bottom: 15px; }
.section-title h2 { margin: 0; font-size: 28px; letter-spacing: -0.045em; }
.section-title p { margin: 8px 0 0; max-width: 920px; }

.pain-layout,
.content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.panel { padding: 22px; }
.panel h3 { margin: 0 0 14px; font-size: 18px; }
.pain-card.bad { border-color: #ffd5d8; background: linear-gradient(180deg, #fff 0%, #fff8f8 100%); }
.pain-card.good { border-color: #bfead9; background: linear-gradient(180deg, #fff 0%, #f4fffa 100%); }
.check-list { display: grid; gap: 10px; margin: 0; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.warn-list li::marker { color: var(--red); }
.ok-list li::marker { color: var(--green); }

.value-grid,
.scenario-grid,
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.value-card { min-height: 220px; }
.card-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #2478ff, #20d4ff);
  position: relative;
}
.card-icon::before { content: ""; width: 20px; height: 20px; border: 3px solid #fff; border-radius: 6px; }
.context-icon::before { border-radius: 50%; }
.token-icon::before { border-radius: 2px; transform: rotate(45deg); }
.shield-icon::before { border-radius: 10px 10px 14px 14px; }
.value-card h3 { margin-top: 16px; }

.codex-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.flow-node { position: relative; min-height: 210px; }
.flow-node > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 900;
}
.flow-node.highlight { border-color: #b8d3ff; background: linear-gradient(180deg, #fff 0%, #f4f9ff 100%); }
.benefit-grid { margin-top: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.benefit-grid article { padding: 18px; }
.benefit-grid strong,
.benefit-grid span { display: block; }
.benefit-grid span { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.65; }

.scenario-card { min-height: 220px; display: flex; flex-direction: column; }
.scenario-card h3 { margin: 14px 0 0; font-size: 18px; letter-spacing: -0.02em; }
.scenario-card p { margin: 10px 0 0; }

.download-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px; }
.download-card b { display: block; font-size: 18px; }
.download-card p { margin: 8px 0 0; }
.step-list { display: grid; gap: 10px; margin: 0; padding-left: 22px; color: var(--muted); font-size: 14px; line-height: 1.75; }
code { padding: 2px 6px; border-radius: 6px; background: #f1f5f9; color: #334155; font-family: Consolas, Monaco, monospace; font-size: 12px; }

.faq-list { display: grid; gap: 10px; }
details { border-radius: 14px; padding: 15px 18px; }
summary { cursor: pointer; font-weight: 800; }
details p { margin: 10px 0 0; }
.page-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 30px; padding: 18px 4px 0; color: var(--subtle); font-size: 12px; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); opacity: 0; padding: 10px 14px; border-radius: 999px; background: #102033; color: #fff; font-size: 13px; transition: .18s ease; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 900px) {
  body { min-width: 0; }
  .page-shell { width: min(100% - 24px, 1200px); padding-top: 14px; }
  .top-nav,
  .download-card { flex-direction: column; align-items: stretch; }
  .hero-content,
  .quick-info,
  .pain-layout,
  .content-grid,
  .value-grid,
  .scenario-grid,
  .codex-flow,
  .benefit-grid { grid-template-columns: 1fr; }
  .hero-content { padding: 26px; }
  .hero-main h1 { font-size: 30px; line-height: 1.14; }
  .hero-main h1 em { font-size: 20px; }
  .hero-lead { font-size: 15px !important; line-height: 1.75 !important; }
  .hero-carousel { justify-self: stretch; width: 100%; }
  .carousel-track { min-height: 0; }
  .carousel-image-button { height: auto; min-height: 0; padding: 10px 10px 28px; }
  .carousel-slide img { height: auto; max-height: 320px; aspect-ratio: auto; }
}

/* compatibility: previous guide used workflow cards */
.workflow { display: grid; gap: 14px; }
.bridge-flow { display: grid; }


.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  padding: 28px;
  background: rgba(8, 15, 32, 0.74);
  backdrop-filter: blur(10px);
}
.image-lightbox.open { display: grid; }
.image-lightbox-card {
  position: relative;
  width: min(1120px, 96vw);
  max-height: 92vh;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  border-radius: 22px;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.image-lightbox img {
  width: 100%;
  max-height: min(90vh, 760px);
  object-fit: contain;
  display: block;
  border-radius: 18px;
  background: #f8fbff;
  box-shadow: 0 30px 90px rgba(0,0,0,.34);
}
.image-lightbox-caption {
  padding: 14px 18px 16px;
  border-top: 1px solid var(--line);
}
.image-lightbox-caption strong,
.image-lightbox-caption span { display: block; }
.image-lightbox-caption strong { font-size: 18px; line-height: 1.45; }
.image-lightbox-caption span { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.lightbox-close,
.lightbox-nav {
  position: absolute;
  z-index: 1002;
  display: grid;
  place-items: center;
  border: 1px solid rgba(182, 203, 229, 0.9);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #1d4ed8;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.lightbox-close { top: 14px; right: 14px; width: 40px; height: 40px; font-size: 22px; }
.lightbox-nav { top: 50%; width: 44px; height: 44px; font-size: 30px; transform: translateY(-50%); }
.lightbox-nav.prev { left: 14px; }
.lightbox-nav.next { right: 14px; }
@media (max-width: 900px) {
  .image-lightbox { padding: 14px; }
  .image-lightbox-card { width: 100%; max-height: 94vh; }
  .image-lightbox-caption strong { font-size: 15px; }
  .image-lightbox-caption span { font-size: 12px; }
}

/* V3.8.17: lightbox shows pure image only; no caption text under enlarged image. */
.image-lightbox-caption { display: none !important; }

/* V3.8.18 quick cards: use mini diagrams to explain the three core points */
.quick-info article {
  min-height: 236px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.quick-visual {
  height: 82px;
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid #e6eef8;
  border-radius: 16px;
  background:
    radial-gradient(circle at 20% 22%, rgba(36, 120, 255, 0.12), transparent 35%),
    linear-gradient(135deg, #ffffff 0%, #f6fbff 100%);
}
.quick-visual .mini-window,
.quick-visual .mini-folder,
.quick-visual .token-stack {
  position: relative;
  display: block;
  border-radius: 13px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #dbe7f5, 0 10px 20px rgba(15, 23, 42, .06);
}
.quick-visual .mini-window {
  height: 48px;
}
.quick-visual .mini-window::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 9px;
  width: 34px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2478ff, #20d4ff);
}
.quick-visual .mini-window::after {
  content: "AI";
  position: absolute;
  right: 9px;
  bottom: 8px;
  width: 26px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eef5ff;
  color: #2478ff;
  font-size: 10px;
  font-weight: 900;
}
.quick-visual .mini-folder {
  height: 44px;
  background: linear-gradient(135deg, #edf5ff, #ffffff);
}
.quick-visual .mini-folder::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  width: 38px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, #2478ff, #20bfff);
}
.quick-visual .mini-folder::after {
  position: absolute;
  right: 10px;
  bottom: 9px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.quick-visual .mini-folder.locked::after {
  content: "×";
  background: #ef4444;
}
.quick-visual .mini-folder.ok::after {
  content: "✓";
  background: #00a870;
}
.quick-visual .blocked-line,
.quick-visual .bridge-line,
.quick-visual .token-arrow {
  position: relative;
  height: 2px;
  border-radius: 999px;
}
.quick-visual .blocked-line {
  background: repeating-linear-gradient(90deg, #ef4444 0 6px, transparent 6px 11px);
}
.quick-visual .blocked-line::after {
  content: "×";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff1f2;
  color: #ef4444;
  font-weight: 900;
  box-shadow: 0 0 0 1px #ffd5d8;
}
.quick-visual .bridge-line {
  background: linear-gradient(90deg, #2478ff, #20d4ff);
}
.quick-visual .bridge-line::after {
  content: "✓";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #2478ff, #20d4ff);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(36, 120, 255, .24);
}
.quick-visual.token {
  grid-template-columns: 1fr 44px 1fr;
}
.quick-visual .token-stack {
  height: 48px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 13px 10px;
}
.quick-visual .token-stack::before,
.quick-visual .token-stack::after {
  content: "";
  height: 100%;
  border-radius: 6px;
}
.quick-visual .token-stack.low {
  grid-template-columns: repeat(5, 1fr);
}
.quick-visual .token-stack.low::before { grid-column: span 4; background: linear-gradient(90deg, #f97316, #ef4444); }
.quick-visual .token-stack.low::after { background: #e2e8f0; }
.quick-visual .token-stack.high::before { grid-column: span 2; background: linear-gradient(90deg, #22c55e, #00a870); }
.quick-visual .token-stack.high::after { grid-column: span 3; background: #dbeafe; }
.quick-visual .token-arrow {
  background: linear-gradient(90deg, #f59e0b, #2478ff);
}
.quick-visual .token-arrow::after {
  content: "→";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #2478ff;
  font-size: 24px;
  font-weight: 900;
}

@media (max-width: 900px) {
  .quick-info article { min-height: auto; }
  .quick-visual { height: 76px; }
}

/* V3.8.19: replace the three quick-value cards with the generated prototype images. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.quick-info-image-grid {
  gap: 18px;
  align-items: stretch;
}
.quick-info-image-grid .quick-image-card {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(190, 214, 245, .9);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 18px 42px rgba(36, 120, 255, .10);
}
.quick-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}
@media (max-width: 1100px) {
  .quick-info-image-grid { grid-template-columns: 1fr; }
  .quick-card-img { max-height: none; object-fit: contain; background: #fff; }
}


/* V3.8.21: replace assistant advantages with revised six visual explanation cards. */
.advantage-section {
  margin-top: 40px;
}
.advantage-image-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.advantage-image-card {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(190, 214, 245, .9);
  border-radius: 22px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 18px 42px rgba(36, 120, 255, .10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.advantage-image-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 54px rgba(36, 120, 255, .14);
}
.advantage-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}
@media (max-width: 1180px) {
  .advantage-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .advantage-image-grid { grid-template-columns: 1fr; }
  .advantage-card-img { object-fit: contain; background: #fff; }
}


/* V3.8.24: landing page layout quality pass.
   Fix desktop image rows, keep image clarity, and polish the plugin download section. */
.hero-card,
.panel,
.quick-info article,
.download-card,
.advantage-image-card,
details {
  box-shadow: 0 14px 36px rgba(21, 35, 60, 0.07);
}

.quick-info-image-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.quick-info-image-grid .quick-image-card {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(190, 214, 245, .9);
  background: #fff;
  box-shadow: 0 14px 34px rgba(36, 120, 255, .09);
}
.quick-card-img,
.advantage-card-img {
  display: block;
  width: 100%;
  height: auto;
  object-position: center;
  background: #fff;
}
.quick-card-img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 20px;
}

.advantage-image-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.advantage-image-card {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(190, 214, 245, .9);
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.advantage-image-card:hover {
  transform: translateY(-2px);
  border-color: rgba(148, 191, 255, .95);
  box-shadow: 0 20px 44px rgba(36, 120, 255, .12);
}
.advantage-card-img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 20px;
}

.download-showcase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  align-items: stretch;
  gap: 22px;
  padding: 0;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 10%, rgba(36, 120, 255, .10), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
}
.download-main {
  padding: 26px 28px;
}
.download-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}
.download-main b {
  margin-top: 0;
  font-size: 22px;
  letter-spacing: -0.035em;
}
.download-main p {
  max-width: 680px;
  font-size: 14px;
}
.download-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.download-meta-row span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #fff;
  color: #33536f;
  font-size: 13px;
  font-weight: 700;
}
.download-action-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  border-left: 1px solid rgba(204, 217, 232, .9);
  background: rgba(255, 255, 255, .76);
}
.download-package-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #1b6fff 0%, #20d4ff 100%);
  color: #fff;
  box-shadow: 0 16px 30px rgba(36, 120, 255, .22);
}
.download-package-icon span {
  font-weight: 900;
  letter-spacing: -0.06em;
}
.download-action-panel small {
  color: var(--subtle);
  font-size: 12px;
  font-weight: 800;
}
.download-action-panel .download-btn {
  width: 100%;
}
.download-action-panel p {
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--muted);
}

.image-lightbox-card {
  width: min(1180px, 96vw);
}
.image-lightbox img {
  background: #fff;
}

@media (max-width: 1180px) {
  .quick-info-image-grid,
  .advantage-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .quick-info-image-grid,
  .advantage-image-grid,
  .download-showcase { grid-template-columns: 1fr; }
  .quick-card-img,
  .advantage-card-img { aspect-ratio: auto; max-height: none; }
  .download-action-panel { border-left: 0; border-top: 1px solid rgba(204, 217, 232, .9); }
}
@media (max-width: 640px) {
  .quick-info-image-grid,
  .advantage-image-grid { gap: 12px; }
  .download-main,
  .download-action-panel { padding: 20px; }
  .download-meta-row span { width: 100%; justify-content: center; }
}


/* V3.8.25: title cleanup and homepage density polish. */
.hero-main {
  justify-content: center;
}
.section-title:empty {
  display: none;
}
.download-badge {
  display: none !important;
}
.page-footer {
  display: none !important;
}
.quick-info-image-grid,
.advantage-image-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.quick-image-card,
.advantage-image-card {
  position: relative;
}
.quick-card-img.is-missing,
.advantage-card-img.is-missing,
.carousel-slide img.is-missing {
  display: none;
}
.quick-image-card.image-missing::after,
.advantage-image-card.image-missing::after {
  content: attr(data-fallback-title);
  min-height: 190px;
  display: grid;
  place-items: center;
  padding: 26px;
  color: #334155;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  background: linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);
}
.carousel-slide.image-missing .carousel-image-button::after {
  content: attr(data-fallback-title);
  min-height: 300px;
  display: grid;
  place-items: center;
  padding: 32px;
  color: #334155;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
}
@media (max-width: 1180px) {
  .quick-info-image-grid,
  .advantage-image-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .quick-info-image-grid,
  .advantage-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .quick-info-image-grid,
  .advantage-image-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero-main { min-height: auto; padding: 6px 0 0; }
  .hero-content { align-items: start; }
}


/* V3.8.26: advantage cards become one-row horizontal slider; hero spacing tightened. */
@media (min-width: 901px) {
  .top-nav {
    padding: 16px 22px;
  }
  .hero-content {
    align-items: start;
    gap: 30px;
    padding: 22px 44px 34px;
  }
  .hero-main {
    min-height: auto;
    justify-content: flex-start;
    padding: clamp(34px, 4vw, 58px) 0 0;
  }
  .hero-main h1 {
    margin-top: 0;
  }
  .hero-actions {
    margin-top: clamp(34px, 4vw, 56px);
  }
  .hero-carousel {
    align-self: start;
    justify-self: end;
  }
  .carousel-image-button {
    height: clamp(360px, 31vw, 470px);
  }
}

.advantage-section {
  margin-top: 28px;
}
.advantage-section .section-title {
  margin-bottom: 10px;
}
.advantage-section .section-title h2 {
  margin-top: 0;
}
.advantage-slider {
  position: relative;
  padding: 0 42px;
}
.advantage-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 2px 14px;
}
.advantage-viewport::-webkit-scrollbar {
  display: none;
}
.advantage-image-grid {
  display: flex !important;
  grid-template-columns: none !important;
  width: max-content;
  gap: 18px;
  align-items: stretch;
}
.advantage-image-card {
  flex: 0 0 clamp(430px, 31vw, 530px);
  width: clamp(430px, 31vw, 530px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 0;
}
.advantage-image-button {
  width: 100%;
  display: block;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: zoom-in;
  font: inherit;
}
.advantage-image-button:focus-visible {
  outline: 3px solid rgba(36, 120, 255, 0.32);
  outline-offset: 3px;
}
.advantage-card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 20px;
  background: #fff;
}
.advantage-nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(182, 203, 229, 0.95);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #1d4ed8;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.13);
}
.advantage-nav:hover {
  background: #fff;
  border-color: #94bfff;
}
.advantage-nav.prev {
  left: 0;
}
.advantage-nav.next {
  right: 0;
}
.card-image-lightbox .image-lightbox-card {
  width: min(1180px, 96vw);
}
.card-image-lightbox img {
  width: 100%;
  max-height: min(90vh, 760px);
  object-fit: contain;
  display: block;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0,0,0,.34);
}

@media (max-width: 1180px) {
  .advantage-image-grid {
    display: flex !important;
    grid-template-columns: none !important;
  }
}
@media (max-width: 900px) {
  .hero-content {
    padding-top: 20px;
  }
  .advantage-slider {
    padding: 0 34px;
  }
  .advantage-image-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 14px;
  }
  .advantage-image-card {
    flex-basis: min(86vw, 520px);
    width: min(86vw, 520px);
  }
  .advantage-nav {
    width: 36px;
    height: 36px;
    font-size: 26px;
  }
}
@media (max-width: 520px) {
  .advantage-slider {
    padding: 0 28px;
  }
  .advantage-image-card {
    flex-basis: calc(100vw - 72px);
    width: calc(100vw - 72px);
  }
}


/* V3.8.27: hero left-side orb redesign and copy rhythm polish. */
.hero-note {
  display: none !important;
}
.hero-main-orb {
  position: relative;
}
.hero-copy {
  min-width: 0;
  position: relative;
  z-index: 2;
}
.hero-orb {
  position: relative;
  width: clamp(188px, 15vw, 246px);
  height: clamp(188px, 15vw, 246px);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.hero-orb::before {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 25%, rgba(255,255,255,.95), rgba(255,255,255,.2) 20%, transparent 34%),
    linear-gradient(145deg, #54b8ff 0%, #2478ff 48%, #0ba7f4 100%);
  box-shadow:
    inset 0 14px 30px rgba(255,255,255,.35),
    inset 0 -22px 44px rgba(0,77,190,.28),
    0 24px 58px rgba(36,120,255,.24);
  z-index: 1;
}
.hero-orb::after {
  content: "";
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.42), rgba(255,255,255,0) 68%);
  z-index: 2;
}
.orb-ring,
.orb-glow,
.orb-folder,
.orb-shield,
.orb-chip,
.orb-bridge {
  position: absolute;
}
.orb-ring {
  inset: 3%;
  border-radius: 50%;
  border: 1px solid rgba(64, 170, 255, .35);
  z-index: 0;
}
.orb-ring-one {
  transform: rotate(-16deg) scaleX(1.05);
}
.orb-ring-two {
  inset: 10%;
  border-style: dashed;
  border-color: rgba(36, 120, 255, .30);
  transform: rotate(22deg) scaleX(1.1);
}
.orb-glow {
  inset: 9% 7% 1%;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(56, 189, 248, .28), rgba(56, 189, 248, 0) 62%);
  filter: blur(2px);
  z-index: 0;
}
.orb-folder {
  width: 42%;
  height: 30%;
  left: 29%;
  top: 39%;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #dff1ff 100%);
  box-shadow: 0 14px 28px rgba(13, 67, 146, .22);
  z-index: 4;
}
.orb-folder::before {
  content: "";
  position: absolute;
  left: 9%;
  top: -18%;
  width: 38%;
  height: 30%;
  border-radius: 10px 10px 3px 3px;
  background: linear-gradient(180deg, #ffffff 0%, #e7f5ff 100%);
}
.orb-folder span {
  color: #2478ff;
  font-weight: 900;
  font-size: clamp(18px, 1.6vw, 25px);
  letter-spacing: -.04em;
}
.orb-shield {
  right: 26%;
  top: 49%;
  width: clamp(32px, 2.3vw, 42px);
  height: clamp(32px, 2.3vw, 42px);
  display: grid;
  place-items: center;
  border: 3px solid rgba(255,255,255,.92);
  border-radius: 12px 12px 16px 16px;
  background: linear-gradient(145deg, #2d83ff, #12c6ff);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(36,120,255,.28);
  z-index: 5;
}
.orb-chip {
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #2480ff, #20d4ff);
  color: #fff;
  box-shadow: 0 14px 28px rgba(36,120,255,.24);
  z-index: 6;
}
.orb-code {
  right: 8%;
  top: 17%;
  width: clamp(38px, 3vw, 48px);
  height: clamp(38px, 3vw, 48px);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 900;
}
.orb-doc {
  left: 7%;
  bottom: 12%;
  width: clamp(34px, 2.8vw, 44px);
  height: clamp(34px, 2.8vw, 44px);
}
.orb-doc::before {
  content: "";
  width: 44%;
  height: 56%;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 4px;
}
.orb-doc::after {
  content: "";
  position: absolute;
  width: 28%;
  height: 2px;
  background: rgba(255,255,255,.92);
  top: 57%;
  left: 36%;
  box-shadow: 0 6px 0 rgba(255,255,255,.72);
}
.orb-bridge {
  left: 23%;
  right: 23%;
  bottom: 24%;
  height: 23%;
  border-bottom: 9px solid rgba(255,255,255,.72);
  border-radius: 0 0 100px 100px;
  z-index: 3;
}
.orb-bridge::before,
.orb-bridge::after {
  content: "";
  position: absolute;
  bottom: -9px;
  width: 8px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
}
.orb-bridge::before { left: 18%; }
.orb-bridge::after { right: 18%; }
.hero-main h1 span[data-i18n="hero.titleMain"],
.hero-main h1 span[data-i18n="hero.titleLine2"] {
  display: block;
}
.hero-lead {
  max-width: 520px;
  color: #4a5a70 !important;
  font-size: 15px !important;
  line-height: 2.02 !important;
  letter-spacing: .01em;
}

@media (min-width: 901px) {
  .hero-content {
    grid-template-columns: minmax(610px, .94fr) minmax(520px, 1.06fr);
    gap: 34px;
    padding-top: 18px;
  }
  .hero-main-orb {
    display: grid;
    grid-template-columns: minmax(188px, 246px) minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(20px, 2.1vw, 30px);
    padding-top: clamp(22px, 3vw, 40px);
  }
  .hero-copy {
    padding-top: clamp(8px, 1.4vw, 20px);
  }
  .hero-main h1 {
    max-width: 500px;
    font-size: clamp(34px, 2.55vw, 44px);
    line-height: 1.1;
    letter-spacing: -.055em;
  }
  .hero-main h1 em {
    margin-top: 12px;
    font-size: clamp(21px, 1.7vw, 28px);
  }
  .hero-actions {
    margin-top: clamp(38px, 4.6vw, 66px);
  }
}

@media (max-width: 1180px) and (min-width: 901px) {
  .hero-content {
    grid-template-columns: minmax(520px, .9fr) minmax(500px, 1.1fr);
    gap: 26px;
  }
  .hero-main-orb {
    grid-template-columns: 168px minmax(0, 1fr);
    column-gap: 18px;
  }
  .hero-orb {
    width: 168px;
    height: 168px;
  }
  .hero-main h1 {
    font-size: 33px;
  }
  .hero-main h1 em {
    font-size: 21px;
  }
  .hero-lead {
    font-size: 14px !important;
    line-height: 1.9 !important;
  }
}

@media (max-width: 900px) {
  .hero-main-orb {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }
  .hero-orb {
    width: 150px;
    height: 150px;
    margin-top: 4px;
  }
  .hero-copy { padding-top: 0; }
  .hero-main h1 { margin-top: 0; }
  .hero-actions { margin-top: 28px; }
}

@media (max-width: 640px) {
  .hero-main-orb {
    grid-template-columns: 1fr;
  }
  .hero-orb {
    width: 150px;
    height: 150px;
    margin: 0 auto 6px;
  }
}


/* V3.8.28: hero ratio polish. Left copy takes about one third, right carousel takes about two thirds. */
@media (min-width: 901px) {
  .hero-content {
    grid-template-columns: minmax(360px, 1fr) minmax(660px, 2fr) !important;
    gap: clamp(34px, 3.2vw, 54px) !important;
    align-items: start !important;
    padding: 28px 44px 40px !important;
  }
  .hero-main,
  .hero-main-compact,
  .hero-main-orb {
    min-height: auto !important;
    display: block !important;
    padding: clamp(30px, 3.6vw, 52px) 0 0 !important;
  }
  .hero-copy {
    width: 100%;
    max-width: 460px;
    padding-top: 0 !important;
  }
  .hero-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(84px, 8.2vw, 126px);
    align-items: start;
    column-gap: clamp(14px, 1.3vw, 22px);
  }
  .hero-title-row h1 {
    margin: 0;
    max-width: 100%;
    font-size: clamp(34px, 2.95vw, 52px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.06em !important;
  }
  .hero-title-row h1 em {
    margin-top: 13px !important;
    font-size: clamp(20px, 1.72vw, 28px) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.045em !important;
    white-space: nowrap;
  }
  .hero-orb-image {
    width: clamp(84px, 8.2vw, 126px);
    height: auto;
    display: block;
    margin-top: 2px;
    filter: drop-shadow(0 18px 30px rgba(36, 120, 255, 0.16));
  }
  .hero-lead {
    margin-top: clamp(20px, 2.1vw, 30px) !important;
    max-width: 420px !important;
    font-size: clamp(14px, .98vw, 16px) !important;
    line-height: 2.02 !important;
    color: #42526a !important;
  }
  .hero-feature-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: clamp(22px, 2.4vw, 34px);
    max-width: 420px;
  }
  .hero-feature-strip span {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border: 1px solid rgba(190, 214, 245, .88);
    border-radius: 999px;
    background: rgba(255,255,255,.84);
    color: #2865c7;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(36, 120, 255, .07);
    white-space: nowrap;
  }
  .hero-actions {
    margin-top: clamp(44px, 5.2vw, 74px) !important;
    gap: 12px;
  }
  .hero-actions .primary-btn,
  .hero-actions .secondary-btn {
    min-height: 48px;
    padding-inline: 22px;
    font-size: 15px;
  }
  .hero-carousel {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    align-self: start !important;
  }
  .carousel-image-button {
    height: clamp(390px, 34vw, 530px) !important;
    padding: 18px 20px 32px !important;
  }
}

@media (min-width: 1400px) {
  .hero-content {
    grid-template-columns: minmax(420px, 1fr) minmax(820px, 2fr) !important;
  }
  .hero-copy {
    max-width: 500px;
  }
  .hero-lead,
  .hero-feature-strip {
    max-width: 460px !important;
  }
}

@media (max-width: 1180px) and (min-width: 901px) {
  .hero-content {
    grid-template-columns: minmax(330px, 1fr) minmax(600px, 1.85fr) !important;
    gap: 28px !important;
  }
  .hero-title-row {
    grid-template-columns: minmax(0, 1fr) 86px;
    column-gap: 10px;
  }
  .hero-orb-image {
    width: 86px;
  }
  .hero-title-row h1 {
    font-size: 36px !important;
  }
  .hero-title-row h1 em {
    font-size: 20px !important;
  }
  .hero-lead {
    font-size: 14px !important;
    line-height: 1.9 !important;
  }
  .hero-feature-strip span {
    min-height: 38px;
    font-size: 12px;
  }
}

@media (max-width: 900px) {
  .hero-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px;
    align-items: start;
    gap: 14px;
  }
  .hero-orb-image {
    width: 90px;
    height: auto;
    display: block;
  }
  .hero-feature-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
  }
  .hero-feature-strip span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid rgba(190, 214, 245, .88);
    border-radius: 999px;
    background: rgba(255,255,255,.84);
    color: #2865c7;
    font-size: 12px;
    font-weight: 800;
  }
}

@media (max-width: 520px) {
  .hero-title-row {
    grid-template-columns: 1fr;
  }
  .hero-orb-image {
    width: 96px;
    order: -1;
  }
}


/* V3.8.29: use V3.8.27 CSS orb instead of image file; remove feature pills and compact hero height. */
@media (min-width: 901px) {
  .hero-content {
    grid-template-columns: minmax(360px, 1fr) minmax(720px, 2fr) !important;
    gap: clamp(28px, 2.6vw, 46px) !important;
    align-items: start !important;
    padding: 20px 38px 34px !important;
  }

  .hero-main,
  .hero-main-compact,
  .hero-main-orb {
    min-height: auto !important;
    display: block !important;
    padding: clamp(22px, 3vw, 40px) 0 0 !important;
  }

  .hero-copy {
    width: 100%;
    max-width: 470px !important;
    padding-top: 0 !important;
  }

  .hero-title-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(74px, 5.5vw, 96px) !important;
    align-items: start !important;
    column-gap: clamp(12px, 1.1vw, 18px) !important;
  }

  .hero-title-row h1 {
    margin: 0 !important;
    max-width: 100% !important;
    font-size: clamp(34px, 2.7vw, 48px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.06em !important;
  }

  .hero-title-row h1 em {
    margin-top: 12px !important;
    font-size: clamp(20px, 1.55vw, 25px) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.045em !important;
    white-space: normal !important;
  }

  .hero-title-orb.hero-orb {
    width: clamp(74px, 5.5vw, 96px) !important;
    height: clamp(74px, 5.5vw, 96px) !important;
    margin-top: 2px !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    filter: drop-shadow(0 16px 26px rgba(36, 120, 255, 0.14));
  }

  .hero-title-orb .orb-folder { border-radius: 8px !important; }
  .hero-title-orb .orb-folder span { font-size: clamp(10px, .92vw, 15px) !important; }

  .hero-title-orb .orb-shield {
    width: 20px !important;
    height: 20px !important;
    border-width: 2px !important;
    border-radius: 8px 8px 10px 10px !important;
    font-size: 12px !important;
  }

  .hero-title-orb .orb-code {
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
  }

  .hero-title-orb .orb-doc {
    width: 25px !important;
    height: 25px !important;
    border-radius: 8px !important;
  }

  .hero-title-orb .orb-bridge { border-bottom-width: 4px !important; }

  .hero-title-orb .orb-bridge::before,
  .hero-title-orb .orb-bridge::after {
    bottom: -4px !important;
    width: 3px !important;
    height: 13px !important;
  }

  .hero-orb-image,
  .hero-feature-strip {
    display: none !important;
  }

  .hero-lead {
    margin-top: clamp(22px, 2vw, 28px) !important;
    max-width: 430px !important;
    font-size: clamp(14px, .95vw, 15.5px) !important;
    line-height: 1.88 !important;
    color: #42526a !important;
  }

  .hero-actions {
    margin-top: clamp(52px, 5.2vw, 76px) !important;
    gap: 12px !important;
  }

  .hero-actions .primary-btn,
  .hero-actions .secondary-btn {
    min-height: 46px !important;
    padding-inline: 21px !important;
    font-size: 15px !important;
  }

  .hero-carousel {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    align-self: start !important;
  }

  .carousel-image-button {
    height: clamp(370px, 32.3vw, 504px) !important;
    padding: 16px 18px 30px !important;
  }
}

@media (min-width: 1400px) {
  .hero-content {
    grid-template-columns: minmax(410px, 1fr) minmax(840px, 2fr) !important;
  }

  .hero-copy { max-width: 500px !important; }
  .hero-lead { max-width: 450px !important; }
}

@media (max-width: 1180px) and (min-width: 901px) {
  .hero-content {
    grid-template-columns: minmax(330px, 1fr) minmax(610px, 1.9fr) !important;
    gap: 24px !important;
    padding: 18px 30px 32px !important;
  }

  .hero-title-row {
    grid-template-columns: minmax(0, 1fr) 72px !important;
    column-gap: 10px !important;
  }

  .hero-title-orb.hero-orb {
    width: 72px !important;
    height: 72px !important;
  }

  .hero-title-row h1 { font-size: 34px !important; }
  .hero-title-row h1 em { font-size: 19px !important; }

  .hero-lead {
    font-size: 13.5px !important;
    line-height: 1.82 !important;
  }
}

@media (max-width: 900px) {
  .hero-title-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 74px !important;
    align-items: start !important;
    gap: 12px !important;
  }

  .hero-title-orb.hero-orb {
    width: 74px !important;
    height: 74px !important;
  }

  .hero-orb-image,
  .hero-feature-strip {
    display: none !important;
  }

  .hero-title-orb .orb-folder span { font-size: 12px !important; }

  .hero-title-orb .orb-shield {
    width: 20px !important;
    height: 20px !important;
    border-width: 2px !important;
    font-size: 12px !important;
  }

  .hero-title-orb .orb-code,
  .hero-title-orb .orb-doc {
    width: 24px !important;
    height: 24px !important;
  }
}

@media (max-width: 520px) {
  .hero-title-row { grid-template-columns: 1fr !important; }

  .hero-title-orb.hero-orb {
    width: 78px !important;
    height: 78px !important;
    order: -1;
  }
}


/* V3.8.30: refine left hero layout based on visual review.
   - enlarge the CSS orb beside the title
   - move the description slightly lower
   - move the CTA buttons to the lower blank area */
@media (min-width: 901px) {
  .hero-main,
  .hero-main-compact,
  .hero-main-orb {
    min-height: clamp(430px, 31.2vw, 500px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: clamp(26px, 3.1vw, 44px) 0 0 !important;
  }

  .hero-copy {
    min-height: clamp(410px, 30vw, 480px) !important;
    display: flex !important;
    flex-direction: column !important;
    max-width: 510px !important;
  }

  .hero-title-row {
    grid-template-columns: minmax(0, 1fr) clamp(112px, 8.1vw, 142px) !important;
    column-gap: clamp(14px, 1.25vw, 22px) !important;
    align-items: start !important;
  }

  .hero-title-orb.hero-orb {
    width: clamp(112px, 8.1vw, 142px) !important;
    height: clamp(112px, 8.1vw, 142px) !important;
    margin-top: -2px !important;
  }

  .hero-title-orb .orb-folder span {
    font-size: clamp(15px, 1.25vw, 20px) !important;
  }

  .hero-title-orb .orb-shield {
    width: clamp(27px, 2vw, 34px) !important;
    height: clamp(27px, 2vw, 34px) !important;
    font-size: clamp(15px, 1.15vw, 19px) !important;
    border-width: 2px !important;
  }

  .hero-title-orb .orb-code {
    width: clamp(36px, 2.65vw, 46px) !important;
    height: clamp(36px, 2.65vw, 46px) !important;
    font-size: clamp(12px, .9vw, 15px) !important;
  }

  .hero-title-orb .orb-doc {
    width: clamp(32px, 2.35vw, 40px) !important;
    height: clamp(32px, 2.35vw, 40px) !important;
  }

  .hero-title-orb .orb-bridge {
    border-bottom-width: 7px !important;
  }

  .hero-title-orb .orb-bridge::before,
  .hero-title-orb .orb-bridge::after {
    bottom: -7px !important;
    width: 5px !important;
    height: 23px !important;
  }

  .hero-lead {
    margin-top: clamp(30px, 2.7vw, 42px) !important;
    max-width: 455px !important;
    line-height: 1.92 !important;
  }

  .hero-actions {
    margin-top: auto !important;
    padding-top: clamp(64px, 6.2vw, 96px) !important;
    padding-bottom: clamp(10px, .9vw, 16px) !important;
    align-items: center !important;
  }
}

@media (min-width: 1400px) {
  .hero-title-row {
    grid-template-columns: minmax(0, 1fr) clamp(126px, 7.8vw, 150px) !important;
  }

  .hero-title-orb.hero-orb {
    width: clamp(126px, 7.8vw, 150px) !important;
    height: clamp(126px, 7.8vw, 150px) !important;
  }

  .hero-copy {
    max-width: 540px !important;
  }
}

@media (max-width: 1180px) and (min-width: 901px) {
  .hero-title-row {
    grid-template-columns: minmax(0, 1fr) 104px !important;
    column-gap: 12px !important;
  }

  .hero-title-orb.hero-orb {
    width: 104px !important;
    height: 104px !important;
  }

  .hero-copy {
    min-height: 410px !important;
  }

  .hero-actions {
    padding-top: 58px !important;
  }
}


/* V3.8.31: remove old download block and redesign install guide as horizontal flow cards. */
.install-flow-section {
  margin-top: 42px !important;
}

.install-flow-title {
  text-align: left !important;
  margin-bottom: 22px !important;
}

.install-flow-title h2 {
  margin: 0 !important;
  font-size: clamp(28px, 2.4vw, 38px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.055em !important;
}

.install-flow-title p {
  margin-top: 10px !important;
  max-width: 760px !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #526175 !important;
}

.install-flow-card {
  position: relative;
  margin-top: 18px;
  padding: 26px 28px 28px;
  border: 1px solid rgba(205, 220, 239, .95);
  border-radius: 22px;
  background:
    radial-gradient(circle at 5% 0%, rgba(36, 120, 255, .07), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.96));
  box-shadow: 0 18px 46px rgba(21, 35, 60, .075);
  overflow: hidden;
}

.install-flow-green {
  background:
    radial-gradient(circle at 5% 0%, rgba(0, 168, 112, .075), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,255,252,.96));
}

.install-flow-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.install-flow-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eef5ff;
  color: #2478ff;
  font-weight: 900;
  font-size: 22px;
}

.install-flow-green .install-flow-icon {
  background: #e9f8f2;
  color: #00a870;
}

.install-flow-head h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.035em;
}

.install-flow-head p {
  margin: 5px 0 0;
  color: #526175;
  font-size: 13px;
  line-height: 1.6;
}

.install-flow-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.install-flow-step {
  position: relative;
  min-height: 190px;
  padding: 18px 14px 16px;
  border-radius: 18px;
  text-align: center;
}

.install-flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 52px;
  left: calc(100% - 2px);
  width: 22px;
  height: 2px;
  background: linear-gradient(90deg, #2478ff, rgba(36,120,255,.15));
  transform: translateX(-8px);
}

.install-flow-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 47px;
  right: -14px;
  width: 0;
  height: 0;
  border-left: 8px solid #2478ff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  opacity: .9;
}

.install-flow-green .install-flow-step:not(:last-child)::after {
  background: linear-gradient(90deg, #00a870, rgba(0,168,112,.15));
}

.install-flow-green .install-flow-step:not(:last-child)::before {
  border-left-color: #00a870;
}

.step-index {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 2;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  transform: translateX(-38px);
  border-radius: 999px;
  background: #2478ff;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 16px rgba(36,120,255,.24);
}

.install-flow-green .step-index {
  background: #00a870;
  box-shadow: 0 8px 16px rgba(0,168,112,.22);
}

.step-icon {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  margin: 6px auto 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 22%, rgba(255,255,255,.9), rgba(255,255,255,.15) 34%, transparent 62%),
    linear-gradient(145deg, #eef5ff, #eaf3ff);
  color: #2478ff;
  font-size: 29px;
  font-weight: 900;
  box-shadow: inset 0 -14px 26px rgba(36,120,255,.08), 0 12px 24px rgba(36,120,255,.08);
}

.install-flow-green .step-icon {
  background:
    radial-gradient(circle at 38% 22%, rgba(255,255,255,.9), rgba(255,255,255,.15) 34%, transparent 62%),
    linear-gradient(145deg, #e9f8f2, #effdf8);
  color: #00a870;
  box-shadow: inset 0 -14px 26px rgba(0,168,112,.08), 0 12px 24px rgba(0,168,112,.07);
}

.install-flow-step h4 {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.install-flow-step p {
  margin: 8px auto 0;
  max-width: 150px;
  color: #526175;
  font-size: 12px;
  line-height: 1.65;
}

.install-safe-tip {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 18px;
  border: 1px solid rgba(190, 214, 245, .9);
  border-radius: 16px;
  background: rgba(248, 251, 255, .9);
  color: #42526a;
}

.install-safe-tip > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #eef5ff;
}

.install-safe-tip strong {
  color: #2478ff;
  white-space: nowrap;
}

.install-safe-tip p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 1180px) {
  .install-flow-card {
    padding: 22px;
  }

  .install-flow-steps {
    gap: 12px;
  }

  .install-flow-step {
    padding-inline: 8px;
  }

  .step-icon {
    width: 62px;
    height: 62px;
    font-size: 24px;
  }

  .install-flow-step h4 {
    font-size: 13px;
  }

  .install-flow-step p {
    font-size: 11px;
  }
}

@media (max-width: 900px) {
  .install-flow-section {
    margin-top: 28px !important;
  }

  .install-flow-card {
    overflow-x: auto;
    padding: 20px 16px 22px;
  }

  .install-flow-steps {
    min-width: 860px;
    grid-template-columns: repeat(5, 160px);
  }

  .install-safe-tip {
    align-items: flex-start;
  }
}


/* V3.8.32: compact install flow, CSS-only icons, continuous advantage marquee, and purchase entry. */

/* Install flow: slightly smaller and cleaner */
.install-flow-section {
  margin-top: 34px !important;
}

.install-flow-title h2 {
  font-size: clamp(26px, 2.1vw, 34px) !important;
}

.install-flow-title p {
  font-size: 14px !important;
  margin-top: 8px !important;
}

.install-flow-card {
  margin-top: 14px !important;
  padding: 20px 22px 22px !important;
  border-radius: 20px !important;
}

.install-flow-head {
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.install-flow-icon {
  width: 42px !important;
  height: 42px !important;
  position: relative;
  font-size: 0 !important;
}

.install-flow-head h3 {
  font-size: 20px !important;
}

.install-flow-head p {
  font-size: 12px !important;
  margin-top: 3px !important;
}

.install-flow-steps {
  gap: 12px !important;
}

.install-flow-step {
  min-height: 158px !important;
  padding: 12px 10px 10px !important;
}

.step-index {
  top: 5px !important;
  width: 22px !important;
  height: 22px !important;
  font-size: 11px !important;
  transform: translateX(-30px) !important;
}

.step-icon {
  position: relative;
  width: 58px !important;
  height: 58px !important;
  margin: 4px auto 10px !important;
  font-size: 0 !important;
}

.install-flow-step h4 {
  font-size: 14px !important;
}

.install-flow-step p {
  max-width: 142px !important;
  margin-top: 6px !important;
  font-size: 11.5px !important;
  line-height: 1.55 !important;
}

.install-flow-step:not(:last-child)::after {
  top: 40px !important;
  width: 18px !important;
}

.install-flow-step:not(:last-child)::before {
  top: 35px !important;
  right: -10px !important;
}

/* CSS-only icons: no more broken glyphs / emoji fallback. */
.install-flow-icon::before,
.install-flow-icon::after,
.step-icon::before,
.step-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.install-head-plugin::before {
  width: 22px;
  height: 22px;
  left: 10px;
  top: 10px;
  border-radius: 6px;
  background:
    linear-gradient(#2478ff, #2478ff) center/16px 5px no-repeat,
    linear-gradient(#2478ff, #2478ff) center/5px 16px no-repeat;
}

.install-head-shield::before {
  width: 22px;
  height: 26px;
  left: 10px;
  top: 7px;
  border: 3px solid #00a870;
  border-radius: 12px 12px 15px 15px;
  clip-path: polygon(50% 0, 95% 16%, 88% 72%, 50% 100%, 12% 72%, 5% 16%);
}

.step-icon-download::before {
  width: 3px;
  height: 25px;
  left: 50%;
  top: 13px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: currentColor;
}
.step-icon-download::after {
  width: 18px;
  height: 18px;
  left: 50%;
  top: 26px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
}

.step-icon-folder::before,
.step-icon-box::before {
  width: 28px;
  height: 22px;
  left: 15px;
  top: 21px;
  border: 3px solid currentColor;
  border-radius: 5px;
}
.step-icon-folder::after {
  width: 14px;
  height: 7px;
  left: 16px;
  top: 16px;
  border: 3px solid currentColor;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}
.step-icon-box::after {
  width: 10px;
  height: 10px;
  left: 24px;
  top: 27px;
  background: currentColor;
  border-radius: 2px;
}

.step-icon-code::before {
  content: "</>";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: currentColor;
  font-size: 21px;
  font-weight: 900;
}

.step-icon-upload::before {
  width: 29px;
  height: 18px;
  left: 15px;
  top: 27px;
  border: 3px solid currentColor;
  border-top: 0;
  border-radius: 0 0 12px 12px;
}
.step-icon-upload::after {
  width: 17px;
  height: 17px;
  left: 21px;
  top: 14px;
  transform: rotate(45deg);
  border-left: 3px solid currentColor;
  border-top: 3px solid currentColor;
}

.step-icon-phone::before {
  width: 18px;
  height: 30px;
  left: 20px;
  top: 14px;
  border: 3px solid currentColor;
  border-radius: 5px;
}
.step-icon-phone::after {
  width: 5px;
  height: 5px;
  left: 27px;
  top: 37px;
  border-radius: 50%;
  background: currentColor;
}

.step-icon-key::before {
  width: 15px;
  height: 15px;
  left: 15px;
  top: 20px;
  border: 3px solid currentColor;
  border-radius: 50%;
}
.step-icon-key::after {
  width: 24px;
  height: 3px;
  left: 28px;
  top: 27px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: -6px 8px 0 -1px currentColor, 5px 8px 0 -1px currentColor;
}

.step-icon-check::before {
  width: 28px;
  height: 16px;
  left: 16px;
  top: 19px;
  transform: rotate(-45deg);
  border-left: 4px solid currentColor;
  border-bottom: 4px solid currentColor;
}

.step-icon-link::before,
.step-icon-link::after {
  width: 24px;
  height: 12px;
  border: 3px solid currentColor;
  border-radius: 999px;
}
.step-icon-link::before {
  left: 13px;
  top: 18px;
  transform: rotate(-42deg);
}
.step-icon-link::after {
  right: 13px;
  bottom: 18px;
  transform: rotate(-42deg);
}

/* Advantage section: seamless auto marquee, no arrows. */
.advantage-section {
  margin-top: 34px !important;
}

.advantage-slider {
  padding: 0 !important;
  overflow: hidden;
}

.advantage-nav {
  display: none !important;
}

.advantage-viewport {
  overflow: hidden !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  padding: 8px 0 16px !important;
}

.advantage-image-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  width: max-content !important;
  gap: 22px !important;
  align-items: stretch !important;
  will-change: transform;
}

.advantage-slider.marquee-ready .advantage-image-grid {
  animation: advantageContinuousMarquee 38s linear infinite;
}

.advantage-slider.marquee-ready:hover .advantage-image-grid,
.advantage-slider.marquee-ready:focus-within .advantage-image-grid {
  animation-play-state: paused;
}

.advantage-image-card {
  flex: 0 0 clamp(540px, 39vw, 680px) !important;
  width: clamp(540px, 39vw, 680px) !important;
  scroll-snap-align: none !important;
}

.advantage-card-img {
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
}

@keyframes advantageContinuousMarquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 900px) {
  .advantage-image-card {
    flex-basis: min(92vw, 620px) !important;
    width: min(92vw, 620px) !important;
  }
  .advantage-slider.marquee-ready .advantage-image-grid {
    animation-duration: 32s;
  }
}

/* Purchase entry */
.purchase-section {
  margin-top: 24px !important;
}

.purchase-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(190, 214, 245, .9);
  border-radius: 18px;
  background:
    radial-gradient(circle at 6% 0%, rgba(36, 120, 255, .08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.96));
  box-shadow: 0 12px 30px rgba(21, 35, 60, .055);
}

.purchase-badge {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef5ff;
  color: #2478ff;
  font-size: 12px;
  font-weight: 800;
}

.purchase-card h2 {
  margin: 8px 0 0;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.035em;
}

.purchase-card p {
  margin: 5px 0 0;
  color: #526175;
  font-size: 13px;
  line-height: 1.7;
}

.purchase-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 18px;
  border-radius: 12px;
  background: #2478ff;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(36, 120, 255, .18);
}

.purchase-btn:hover {
  background: #1769ea;
}

@media (max-width: 760px) {
  .purchase-card {
    align-items: stretch;
    flex-direction: column;
  }
  .purchase-btn {
    width: 100%;
  }
}


/* V3.8.33: tune advantage card size and slow the marquee by half. */
.advantage-image-card {
  flex: 0 0 clamp(400px, 26vw, 646px) !important;
  width: clamp(540px, 39vw, 680px) !important;
  scroll-snap-align: none !important;
}

.advantage-slider.marquee-ready .advantage-image-grid {
  animation-duration: 76s !important;
}

@media (max-width: 900px) {
  .advantage-slider.marquee-ready .advantage-image-grid {
    animation-duration: 64s !important;
  }
}


/* V3.8.34: shrink the hero carousel by about one quarter so the first screen feels lighter. */
@media (min-width: 901px) {
  .hero-carousel {
    width: min(78%, 900px) !important;
    max-width: 900px !important;
    justify-self: end !important;
  }

  .carousel-image-button {
    height: clamp(300px, 24.5vw, 395px) !important;
    padding: 14px 16px 28px !important;
  }

  .carousel-shell {
    border-radius: 22px !important;
  }

  .carousel-slide img {
    border-radius: 14px !important;
  }
}

@media (min-width: 1400px) {
  .hero-carousel {
    width: min(78%, 940px) !important;
    max-width: 940px !important;
  }

  .carousel-image-button {
    height: clamp(320px, 24vw, 420px) !important;
  }
}

@media (max-width: 1180px) and (min-width: 901px) {
  .hero-carousel {
    width: min(82%, 760px) !important;
  }

  .carousel-image-button {
    height: clamp(285px, 25vw, 360px) !important;
  }
}


/* V3.8.35: visual QA fix.
   After V3.8.34 scaled the hero carousel down, the card was still aligned to the top/right of the right column.
   Center it inside the right visual area so the first screen is balanced. */
@media (min-width: 901px) {
  .hero-content {
    align-items: stretch !important;
  }

  .hero-carousel {
    justify-self: center !important;
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (min-width: 1400px) {
  .hero-carousel {
    justify-self: center !important;
    align-self: center !important;
  }
}

@media (max-width: 1180px) and (min-width: 901px) {
  .hero-carousel {
    justify-self: center !important;
    align-self: center !important;
  }
}


/* V3.8.36: polish install flow, purchase copy, FAQ text and bottom support entry. */
.install-flow-section {
  margin-top: 30px !important;
}

.install-flow-title {
  margin-bottom: 16px !important;
}

.install-flow-title h2 {
  font-size: clamp(25px, 1.95vw, 32px) !important;
}

.install-flow-title p {
  max-width: 700px !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
}

.install-flow-card {
  margin-top: 12px !important;
  padding: 16px 18px 18px !important;
  border-radius: 18px !important;
}

.install-flow-head {
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 11px !important;
  margin-bottom: 9px !important;
}

.install-flow-icon {
  width: 38px !important;
  height: 38px !important;
  overflow: visible !important;
}

.install-flow-head h3 {
  font-size: 18px !important;
}

.install-flow-head p {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.install-flow-steps {
  gap: 10px !important;
}

.install-flow-step {
  min-height: 138px !important;
  padding: 10px 8px 8px !important;
}

.step-index {
  top: 4px !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 10px !important;
  transform: translateX(-28px) !important;
}

.step-icon {
  width: 50px !important;
  height: 50px !important;
  margin: 2px auto 8px !important;
  overflow: visible !important;
}

.install-flow-step h4 {
  font-size: 13px !important;
  line-height: 1.32 !important;
}

.install-flow-step p {
  max-width: 132px !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

.install-flow-step:not(:last-child)::after {
  top: 34px !important;
  width: 16px !important;
}

.install-flow-step:not(:last-child)::before {
  top: 29px !important;
  right: -8px !important;
  border-left-width: 7px !important;
  border-top-width: 5px !important;
  border-bottom-width: 5px !important;
}

/* Header icons: replace incomplete glyph-like visuals with stable CSS icons. */
.install-head-plugin::before {
  width: 9px !important;
  height: 9px !important;
  left: 10px !important;
  top: 10px !important;
  border-radius: 3px !important;
  background: #2478ff !important;
  box-shadow:
    13px 0 0 #2478ff,
    0 13px 0 #2478ff,
    13px 13px 0 #2478ff !important;
}

.install-head-plugin::after {
  width: 8px !important;
  height: 8px !important;
  left: 15px !important;
  top: 15px !important;
  border-radius: 999px !important;
  background: #eef5ff !important;
}

.install-head-shield::before {
  width: 20px !important;
  height: 24px !important;
  left: 9px !important;
  top: 7px !important;
  border: 3px solid #00a870 !important;
  border-radius: 11px 11px 14px 14px !important;
  clip-path: polygon(50% 0, 95% 16%, 88% 72%, 50% 100%, 12% 72%, 5% 16%) !important;
}

.install-head-shield::after {
  width: 8px !important;
  height: 13px !important;
  left: 15px !important;
  top: 13px !important;
  border-right: 3px solid #00a870 !important;
  border-bottom: 3px solid #00a870 !important;
  transform: rotate(38deg) !important;
}

/* Purchase block: make purchase entry the main title and remove token wording. */
.purchase-card {
  padding: 18px 20px !important;
}

.purchase-badge {
  min-height: 34px !important;
  padding: 0 14px !important;
  font-size: 18px !important;
  letter-spacing: -0.02em !important;
}

.purchase-card h2 {
  display: none !important;
}

.purchase-card p {
  margin-top: 10px !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
}

.purchase-btn {
  min-height: 44px !important;
  padding: 0 20px !important;
  font-size: 14px !important;
}

/* FAQ rhythm */
.faq {
  margin-top: 26px !important;
}

.faq details {
  border-radius: 14px !important;
}

.faq summary {
  font-size: 16px !important;
}

.faq p {
  font-size: 13.5px !important;
  line-height: 1.75 !important;
}

/* Bottom support entry: keep contact at the very bottom. */
.bottom-support-section {
  margin: 18px 0 0;
}

.bottom-support-card {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 12px 18px;
  border: 1px solid rgba(190, 214, 245, .85);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  color: #132033;
}

.bottom-support-card strong {
  font-size: 14px;
  font-weight: 900;
}

.bottom-support-actions {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.bottom-support-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #2478ff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}

.bottom-support-link::before {
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  border-radius: 5px;
  border: 2px solid currentColor;
  box-sizing: border-box;
}

.support-doc-link::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 6px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -4px 0 currentColor, 0 4px 0 currentColor;
  transform: translateY(-50%);
}

.support-contact-link::before {
  border-radius: 999px;
}

.support-contact-link::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 11px;
  width: 8px;
  height: 5px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 0 0 0 5px;
}

@media (max-width: 900px) {
  .install-flow-card {
    padding: 16px 14px !important;
  }

  .install-flow-steps {
    min-width: 780px !important;
    grid-template-columns: repeat(5, 144px) !important;
  }

  .bottom-support-card {
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
  }
}

@media (max-width: 760px) {
  .purchase-card {
    align-items: stretch !important;
  }

  .purchase-badge {
    width: fit-content;
  }
}


/* V3.8.37: reduce first-screen hero height by about 10% and prevent carousel image bottom clipping. */
@media (min-width: 901px) {
  .hero-content {
    padding-top: 12px !important;
    padding-bottom: 24px !important;
    min-height: auto !important;
  }

  .hero-main,
  .hero-main-compact,
  .hero-main-orb {
    min-height: clamp(385px, 28vw, 450px) !important;
    padding-top: clamp(18px, 2.4vw, 34px) !important;
  }

  .hero-copy {
    min-height: clamp(370px, 27vw, 430px) !important;
  }

  .hero-title-row h1 {
    font-size: clamp(32px, 2.55vw, 45px) !important;
    line-height: 1.05 !important;
  }

  .hero-title-row h1 em {
    margin-top: 10px !important;
    font-size: clamp(19px, 1.45vw, 23px) !important;
  }

  .hero-title-orb.hero-orb {
    width: clamp(104px, 7.35vw, 132px) !important;
    height: clamp(104px, 7.35vw, 132px) !important;
  }

  .hero-lead {
    margin-top: clamp(26px, 2.25vw, 36px) !important;
    line-height: 1.82 !important;
  }

  .hero-actions {
    padding-top: clamp(48px, 4.8vw, 76px) !important;
    padding-bottom: 4px !important;
  }

  .hero-carousel {
    width: min(78%, 900px) !important;
    max-width: 900px !important;
    justify-self: center !important;
    align-self: center !important;
  }

  .carousel-shell {
    overflow: visible !important;
  }

  .carousel-track {
    overflow: hidden !important;
    border-radius: 20px !important;
  }

  .carousel-image-button {
    height: clamp(310px, 25.4vw, 410px) !important;
    padding: 12px 16px 42px !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .carousel-slide img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 12px !important;
  }

  .carousel-dots {
    bottom: 14px !important;
  }
}

@media (min-width: 1400px) {
  .hero-main,
  .hero-main-compact,
  .hero-main-orb {
    min-height: clamp(390px, 27vw, 460px) !important;
  }

  .hero-copy {
    min-height: clamp(374px, 26vw, 438px) !important;
  }

  .carousel-image-button {
    height: clamp(320px, 25vw, 424px) !important;
    padding-bottom: 44px !important;
  }
}

@media (max-width: 1180px) and (min-width: 901px) {
  .hero-content {
    padding-top: 10px !important;
    padding-bottom: 22px !important;
  }

  .hero-main,
  .hero-main-compact,
  .hero-main-orb {
    min-height: 380px !important;
  }

  .hero-copy {
    min-height: 360px !important;
  }

  .hero-carousel {
    width: min(82%, 760px) !important;
  }

  .carousel-image-button {
    height: clamp(292px, 25.5vw, 370px) !important;
    padding: 12px 14px 38px !important;
  }
}


/* V3.8.44: 首页与安装区增加授权目录安全提示，强调临时目录/备份副本。 */
.hero-safety-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 158, 11, .38);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 251, 235, .96), rgba(255, 247, 237, .92));
  box-shadow: 0 10px 24px rgba(146, 64, 14, .06);
  color: #78350f;
}
.hero-safety-banner > span {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}
.hero-safety-banner strong {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
  color: #92400e;
}
.hero-safety-banner p {
  margin: 0;
  color: #7c2d12;
  font-size: 12.5px;
  line-height: 1.6;
}
.install-safe-tip {
  border-color: rgba(245, 158, 11, .42);
  background: linear-gradient(180deg, rgba(255, 251, 235, .94), rgba(255, 247, 237, .9));
  color: #78350f;
}
.install-safe-tip > span {
  background: #f59e0b;
  color: #fff;
  font-weight: 900;
}
.install-safe-tip strong { color: #92400e; }
.install-safe-tip p { color: #7c2d12; }
@media (max-width: 720px) {
  .hero-safety-banner { margin-top: 12px; padding: 11px 12px; }
  .hero-safety-banner p { font-size: 12px; }
}

/* V3.8.54: hero title, carousel crop, and install icon asset refresh. */
@media (min-width: 901px) {
  .hero-content {
    padding: 10px 24px 22px !important;
    gap: 16px !important;
    align-items: start !important;
  }

  .hero-main,
  .hero-main-compact,
  .hero-main-orb {
    min-height: 300px !important;
    padding-top: 12px !important;
  }

  .hero-copy {
    max-width: 408px !important;
  }

  .hero-title-row {
    align-items: start !important;
    grid-template-columns: minmax(0, 1fr) 88px !important;
    column-gap: 10px !important;
  }

  .hero-main h1,
  .hero-title-row h1 {
    font-size: clamp(26px, 2.05vw, 34px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.045em !important;
  }

  .hero-main h1 em,
  .hero-title-row h1 em {
    margin-top: 7px !important;
    font-size: clamp(14px, 1.15vw, 18px) !important;
    line-height: 1.2 !important;
  }

  .hero-lead,
  .hero-main p {
    margin-top: 12px !important;
    max-width: 404px !important;
    font-size: 13px !important;
    line-height: 1.68 !important;
  }

  .hero-safety-banner {
    margin: 10px 0 12px !important;
    padding: 9px 11px !important;
  }

  .hero-title-orb.hero-orb {
    width: 88px !important;
    height: 88px !important;
    margin-top: 2px !important;
  }

  .hero-carousel {
    align-self: start !important;
    margin-top: -12px !important;
    width: min(100%, 716px) !important;
  }

  .carousel-shell {
    border-radius: 20px !important;
  }

  .carousel-track {
    min-height: 0 !important;
  }

  .carousel-image-button {
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 12px 18px !important;
    overflow: visible !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
  }

  .carousel-slide img {
    width: 100% !important;
    height: auto !important;
    max-height: 392px !important;
    object-fit: contain !important;
    object-position: center top !important;
    display: block !important;
    border-radius: 14px !important;
  }

  .carousel-btn {
    top: 50% !important;
  }

  .carousel-dots {
    bottom: 8px !important;
  }
}

.install-flow-icon::before,
.install-flow-icon::after,
.step-icon::before,
.step-icon::after {
  content: none !important;
}

.install-flow-icon,
.step-icon {
  overflow: hidden !important;
  background-image: none !important;
}

.install-flow-icon-asset,
.step-icon-asset {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (min-width: 901px) {
  .install-flow-card {
    padding: 18px 20px 20px !important;
  }

  .install-flow-head {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    margin-bottom: 12px !important;
  }

  .install-flow-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    padding: 8px !important;
    font-size: 0 !important;
  }

  .install-flow-head h3 {
    font-size: 18px !important;
  }

  .install-flow-head p {
    margin-top: 2px !important;
    font-size: 12px !important;
  }

  .install-flow-steps {
    gap: 12px !important;
  }

  .install-flow-step {
    min-height: 152px !important;
    padding: 12px 10px 10px !important;
  }

  .step-icon {
    width: 58px !important;
    height: 58px !important;
    margin: 8px auto 12px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 22px rgba(36, 120, 255, 0.08) !important;
  }

  .install-flow-green .step-icon {
    box-shadow: 0 10px 22px rgba(16, 185, 129, 0.08) !important;
  }

  .install-flow-step h4 {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .install-flow-step p {
    max-width: 142px !important;
    font-size: 11px !important;
    line-height: 1.52 !important;
  }

  .install-flow-step:not(:last-child)::after {
    top: 45px !important;
    width: 24px !important;
    height: 3px !important;
    transform: translateX(-10px) !important;
  }

  .install-flow-step:not(:last-child)::before {
    top: 39px !important;
    right: -12px !important;
    border-left-width: 9px !important;
    border-top-width: 6px !important;
    border-bottom-width: 6px !important;
  }
}

@media (max-width: 900px) {
  .hero-content {
    padding: 18px 18px 20px !important;
  }

  .hero-title-row {
    grid-template-columns: 1fr 76px !important;
    column-gap: 10px !important;
  }

  .hero-main h1,
  .hero-title-row h1 {
    font-size: 24px !important;
  }

  .hero-main h1 em,
  .hero-title-row h1 em {
    font-size: 14px !important;
  }

  .hero-carousel {
    margin-top: -4px !important;
  }

  .carousel-image-button {
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 10px 18px !important;
  }

  .carousel-slide img {
    height: auto !important;
    max-height: 320px !important;
    object-position: center top !important;
  }

  .install-flow-icon::before,
  .install-flow-icon::after,
  .step-icon::before,
  .step-icon::after {
    content: none !important;
  }

  .install-flow-icon {
    padding: 7px !important;
  }

  .step-icon {
    padding: 11px !important;
    border-radius: 16px !important;
  }
}

/* V3.8.53: official landing page density tune.
   Goal: make the whole homepage visually smaller and more coordinated,
   while enlarging install/config icons and flow arrows for clarity. */
@media (min-width: 901px) {
  body {
    min-width: 1120px;
  }

  .page-shell {
    width: min(1220px, calc(100% - 36px)) !important;
    padding: 16px 0 24px !important;
  }

  .hero-card {
    border-radius: 22px !important;
  }

  .top-nav {
    gap: 16px !important;
    padding: 12px 18px !important;
  }

  .brand-mark {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
  }

  .brand-copy strong {
    font-size: 15px !important;
  }

  .brand-copy small {
    font-size: 11px !important;
  }

  .language-switch {
    border-radius: 10px !important;
  }

  .lang-btn {
    min-height: 28px !important;
    font-size: 11px !important;
  }

  .hero-content {
    grid-template-columns: minmax(350px, 0.88fr) minmax(520px, 1.12fr) !important;
    gap: 18px !important;
    padding: 14px 24px 24px !important;
    align-items: start !important;
  }

  .hero-main,
  .hero-main-compact,
  .hero-main-orb {
    min-height: 320px !important;
    padding-top: 18px !important;
  }

  .hero-copy {
    max-width: 430px !important;
    min-height: auto !important;
  }

  .hero-title-row {
    grid-template-columns: minmax(0, 1fr) 94px !important;
    column-gap: 12px !important;
  }

  .hero-main h1,
  .hero-title-row h1 {
    font-size: clamp(30px, 2.35vw, 38px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.05em !important;
  }

  .hero-main h1 em,
  .hero-title-row h1 em {
    margin-top: 8px !important;
    font-size: clamp(16px, 1.35vw, 21px) !important;
    line-height: 1.22 !important;
  }

  .hero-title-orb.hero-orb {
    width: 94px !important;
    height: 94px !important;
    margin-top: 4px !important;
  }

  .hero-lead,
  .hero-main p {
    margin-top: 14px !important;
    max-width: 420px !important;
    font-size: 13.5px !important;
    line-height: 1.72 !important;
  }

  .hero-safety-banner {
    gap: 8px !important;
    margin: 12px 0 14px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  .hero-safety-banner strong {
    font-size: 12.5px !important;
  }

  .hero-safety-banner p {
    font-size: 11.5px !important;
    line-height: 1.52 !important;
  }

  .hero-actions {
    gap: 10px !important;
    margin-top: 18px !important;
  }

  .primary-btn,
  .secondary-btn {
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
  }

  .hero-carousel {
    width: min(100%, 700px) !important;
  }

  .carousel-shell {
    border-radius: 20px !important;
  }

  .carousel-image-button {
    height: clamp(272px, 23vw, 348px) !important;
    padding: 10px 12px 32px !important;
  }

  .carousel-slide img {
    border-radius: 12px !important;
  }

  .carousel-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 34px !important;
  }

  .carousel-btn.prev {
    left: 10px !important;
  }

  .carousel-btn.next {
    right: 10px !important;
  }

  .carousel-dots {
    bottom: 10px !important;
    gap: 6px !important;
  }

  .carousel-dots button {
    width: 7px !important;
    height: 7px !important;
  }

  .carousel-dots button.active {
    width: 22px !important;
  }

  .quick-info {
    gap: 14px !important;
    margin-top: 12px !important;
  }

  .quick-info-image-grid,
  .advantage-image-grid {
    gap: 14px !important;
  }

  .quick-info-image-grid .quick-image-card,
  .advantage-image-card {
    border-radius: 18px !important;
  }

  .quick-card-img,
  .advantage-card-img {
    border-radius: 16px !important;
  }

  .steps {
    margin-top: 26px !important;
  }

  .section-title {
    margin-bottom: 12px !important;
  }

  .section-title h2 {
    font-size: 24px !important;
    letter-spacing: -0.04em !important;
  }

  .section-title p {
    max-width: 760px !important;
    font-size: 13px !important;
    line-height: 1.68 !important;
  }

  .panel {
    padding: 18px !important;
    border-radius: 16px !important;
  }

  .panel h3 {
    margin-bottom: 10px !important;
    font-size: 17px !important;
  }

  .check-list {
    gap: 8px !important;
    font-size: 13px !important;
    line-height: 1.58 !important;
  }

  .advantage-section {
    margin-top: 30px !important;
  }

  .advantage-slider {
    padding: 0 38px !important;
  }

  .advantage-viewport {
    padding: 6px 2px 10px !important;
  }

  .advantage-image-card {
    flex-basis: clamp(360px, 28vw, 440px) !important;
    width: clamp(360px, 28vw, 440px) !important;
  }

  .advantage-nav {
    width: 44px !important;
    height: 44px !important;
    font-size: 34px !important;
  }

  .install-flow-section {
    margin-top: 28px !important;
  }

  .install-flow-title {
    margin-bottom: 12px !important;
  }

  .install-flow-title h2 {
    font-size: 24px !important;
  }

  .install-flow-title p {
    max-width: 720px !important;
    font-size: 13px !important;
    line-height: 1.62 !important;
  }

  .install-flow-card {
    margin-top: 10px !important;
    padding: 16px 18px 18px !important;
    border-radius: 18px !important;
  }

  .install-flow-head {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  .install-flow-icon {
    width: 44px !important;
    height: 44px !important;
  }

  .install-flow-head h3 {
    font-size: 18px !important;
  }

  .install-flow-head p {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .install-flow-steps {
    gap: 14px !important;
  }

  .install-flow-step {
    min-height: 148px !important;
    padding: 12px 10px !important;
    border: 1px solid rgba(214, 226, 242, 0.9);
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.72);
  }

  .step-index {
    top: 6px !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
    transform: translateX(-32px) !important;
  }

  .step-icon {
    width: 66px !important;
    height: 66px !important;
    margin: 6px auto 12px !important;
  }

  .install-flow-step h4 {
    font-size: 13px !important;
    line-height: 1.32 !important;
  }

  .install-flow-step p {
    max-width: 136px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  .install-flow-step:not(:last-child)::after {
    top: 41px !important;
    width: 26px !important;
    height: 3px !important;
    transform: translateX(-10px) !important;
  }

  .install-flow-step:not(:last-child)::before {
    top: 35px !important;
    right: -14px !important;
    border-left-width: 10px !important;
    border-top-width: 7px !important;
    border-bottom-width: 7px !important;
  }

  .install-safe-tip {
    margin-top: 14px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }

  .install-safe-tip p {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  .purchase-card {
    padding: 16px 18px !important;
    border-radius: 16px !important;
  }

  .purchase-badge {
    min-height: 30px !important;
    font-size: 16px !important;
  }

  .purchase-card p {
    font-size: 13px !important;
    line-height: 1.68 !important;
  }

  .purchase-btn {
    min-height: 40px !important;
    font-size: 13px !important;
  }

  .faq {
    margin-top: 20px !important;
  }

  .faq-list {
    gap: 8px !important;
  }

  .faq details {
    padding: 13px 16px !important;
    border-radius: 12px !important;
  }

  .faq summary {
    font-size: 15px !important;
  }

  .faq p {
    font-size: 12.5px !important;
    line-height: 1.65 !important;
  }

  .bottom-support-card {
    min-height: 50px !important;
    padding: 10px 16px !important;
    border-radius: 14px !important;
  }

  .bottom-support-link {
    font-size: 13px !important;
  }
}


/* V3.8.55: homepage title single-line, raised CTA, simplified install section. */

.hero-title-main{display:block;white-space:nowrap;letter-spacing:-.05em;}
.hero-title-row h1{gap:10px !important;}
.hero-title-row h1 em{margin-top:0 !important;}
.hero-actions-raised,
.hero-actions{margin-top:14px !important;}
.hero-safety-banner{margin-top:16px !important;}
.hero-copy{max-width:560px !important;}

.install-flow-simple{display:grid;gap:18px;}
.install-simple-card{padding:24px;border:1px solid rgba(148,163,184,.22);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.96));box-shadow:0 18px 36px rgba(15,23,42,.06);}
.install-simple-card-blue{background:linear-gradient(180deg,rgba(240,247,255,.96),rgba(255,255,255,.98));}
.install-simple-card-green{background:linear-gradient(180deg,rgba(240,253,248,.96),rgba(255,255,255,.98));}
.install-simple-head{display:flex;align-items:center;gap:16px;margin-bottom:18px;}
.install-simple-icon{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;font-size:24px;background:rgba(37,99,235,.1);box-shadow:inset 0 0 0 1px rgba(37,99,235,.12);}
.install-simple-card-green .install-simple-icon{background:rgba(5,150,105,.11);box-shadow:inset 0 0 0 1px rgba(5,150,105,.12);}
.install-simple-head h3{margin:0;font-size:26px;letter-spacing:-.03em;color:#0f172a;}
.install-simple-head p{margin:6px 0 0;font-size:14px;line-height:1.7;color:#475569;}
.install-simple-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.install-simple-item{position:relative;min-height:168px;padding:18px 16px 16px;border-radius:20px;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.94);box-shadow:0 10px 24px rgba(15,23,42,.04);}
.install-simple-index{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 8px;border-radius:999px;background:#2563eb;color:#fff;font-size:13px;font-weight:800;box-shadow:0 10px 20px rgba(37,99,235,.24);}
.install-simple-card-green .install-simple-index{background:#059669;box-shadow:0 10px 20px rgba(5,150,105,.22);}
.install-simple-symbol{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;background:#eff6ff;color:#2563eb;font-size:24px;}
.install-simple-card-green .install-simple-symbol{background:#ecfdf5;color:#059669;}
.install-simple-item h4{margin:14px 0 8px;font-size:17px;line-height:1.35;color:#0f172a;}
.install-simple-item p{margin:0;font-size:13px;line-height:1.75;color:#475569;}
.install-safe-tip{margin-top:18px !important;}

@media (max-width: 1180px){
  .hero-title-main{white-space:normal;}
  .install-simple-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 768px){
  .install-simple-head{align-items:flex-start;}
  .install-simple-head h3{font-size:22px;}
  .install-simple-grid{grid-template-columns:1fr;}
  .install-simple-item{min-height:auto;}
}


/* V3.8.56: tighten hero spacing and align install section header. */

.hero-content{padding:34px 44px 34px !important;align-items:start !important;}
.hero-main{min-height:clamp(360px,30vw,430px) !important;justify-content:flex-start !important;padding:8px 0 10px !important;}
.hero-copy{padding-top:0 !important;}
.hero-title-row{align-items:flex-start !important;margin-bottom:8px !important;}
.hero-lead{margin:12px 0 0 !important;max-width:500px !important;line-height:1.78 !important;}
.hero-actions-raised,.hero-actions{margin-top:10px !important;}
.hero-safety-banner{margin-top:12px !important;}
.install-simple-head{display:grid !important;grid-template-columns:56px minmax(0,1fr) !important;align-items:center !important;column-gap:14px !important;row-gap:4px !important;margin-bottom:16px !important;}
.install-simple-head > div{min-width:0;}
.install-simple-head h3{margin:0 !important;line-height:1.2 !important;}
.install-simple-head p{margin:4px 0 0 !important;}
.install-simple-card{padding:22px !important;}
.install-simple-item{min-height:154px !important;}
@media (max-width:1180px){
  .hero-content{padding:28px 26px 30px !important;}
  .hero-main{min-height:auto !important;}
}
@media (max-width:768px){
  .install-simple-head{grid-template-columns:48px minmax(0,1fr) !important;align-items:start !important;}
  .install-simple-icon{width:48px !important;height:48px !important;}
}


/* V3.8.57: make install section icon and title truly inline. */

.install-simple-head{display:block !important;margin-bottom:16px !important;}
.install-simple-headline{display:flex;align-items:center;gap:14px;min-width:0;}
.install-simple-headline h3{margin:0 !important;line-height:1.2 !important;font-size:26px;letter-spacing:-.03em;color:#0f172a;}
.install-simple-head > p{margin:8px 0 0 66px !important;font-size:14px;line-height:1.7;color:#475569;}
.install-simple-icon{flex:0 0 auto;}
@media (max-width:768px){
  .install-simple-headline{gap:12px;align-items:center;}
  .install-simple-head > p{margin-left:60px !important;}
  .install-simple-headline h3{font-size:22px;}
}


/* V3.8.58: move CTA to top nav, align hero bottom with carousel, and inline step icon/title. */

.nav-actions{display:flex;align-items:center;gap:14px !important;flex-wrap:wrap;justify-content:flex-end;}
.nav-cta-actions{display:flex;align-items:center;gap:12px;}
.nav-cta-btn{min-height:40px !important;padding:0 18px !important;white-space:nowrap;}
.hero-content{align-items:stretch !important;}
.hero-main{display:flex;min-height:100% !important;padding:8px 0 0 !important;}
.hero-copy{display:flex !important;flex-direction:column;height:100%;min-height:100%;}
.hero-safety-banner{margin-top:auto !important;}
.hero-title-row{margin-bottom:10px !important;}
.hero-lead{margin:12px 0 0 !important;}
.install-simple-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.install-simple-item{display:grid !important;grid-template-columns:52px minmax(0,1fr);grid-template-areas:"icon title" "desc desc";align-items:center;column-gap:12px;row-gap:10px;min-height:150px !important;padding:18px 16px 16px !important;}
.install-simple-symbol{grid-area:icon;align-self:center;justify-self:start;margin:0 !important;}
.install-simple-item h4{grid-area:title;margin:0 !important;align-self:center;font-size:17px;line-height:1.35;color:#0f172a;}
.install-simple-item p{grid-area:desc;margin:0 !important;line-height:1.72;font-size:13px;color:#475569;}
@media (max-width:1180px){
  .nav-actions{justify-content:flex-end;}
  .nav-cta-actions{order:1;width:100%;justify-content:flex-end;}
  .hero-copy{min-height:auto;}
  .install-simple-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:768px){
  .nav-actions{gap:10px !important;}
  .nav-cta-actions{width:100%;justify-content:stretch;}
  .nav-cta-actions .nav-cta-btn{flex:1;min-width:0;}
  .install-simple-grid{grid-template-columns:1fr;}
  .install-simple-item{grid-template-columns:48px minmax(0,1fr);min-height:auto !important;}
}


/* V3.8.61: only tighten spacing in the "如何安装使用" install step module. Carousel/hero untouched. */
.install-flow-section{padding-top:34px !important;padding-bottom:34px !important;}
.install-flow-title{margin-bottom:18px !important;}
.install-flow-title h2{margin-bottom:8px !important;}
.install-flow-title p{margin-top:0 !important;}
.install-flow-simple{gap:12px !important;}
.install-simple-card{padding:18px !important;border-radius:20px !important;}
.install-simple-head{margin-bottom:12px !important;}
.install-simple-headline{gap:10px !important;}
.install-simple-icon{width:46px !important;height:46px !important;border-radius:15px !important;font-size:22px !important;}
.install-simple-headline h3{font-size:24px !important;line-height:1.18 !important;}
.install-simple-head > p{margin:6px 0 0 56px !important;font-size:13px !important;line-height:1.55 !important;}
.install-simple-grid{gap:10px !important;}
.install-simple-item{min-height:128px !important;padding:14px 12px 12px !important;border-radius:16px !important;grid-template-columns:44px minmax(0,1fr) !important;column-gap:9px !important;row-gap:7px !important;}
.install-simple-symbol{width:44px !important;height:44px !important;border-radius:14px !important;font-size:20px !important;}
.install-simple-index{top:9px !important;right:9px !important;min-width:26px !important;height:26px !important;font-size:12px !important;}
.install-simple-item h4{font-size:16px !important;line-height:1.28 !important;padding-right:28px !important;}
.install-simple-item p{font-size:12px !important;line-height:1.55 !important;}
.install-safe-tip{margin-top:12px !important;padding:14px 16px !important;border-radius:16px !important;}
@media (max-width:1180px){
  .install-flow-section{padding-top:28px !important;padding-bottom:28px !important;}
  .install-simple-grid{gap:10px !important;}
}
@media (max-width:768px){
  .install-simple-card{padding:16px !important;}
  .install-simple-head > p{margin-left:54px !important;}
  .install-simple-item{min-height:auto !important;}
}


/* V3.8.62: official-site / install / GitHub entrance routing design. */
.nav-github-link{
  display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 10px;border-radius:999px;
  color:#475569;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;
  border:1px solid rgba(148,163,184,.28);background:rgba(255,255,255,.74);
}
.nav-github-link:hover{color:#0f172a;text-decoration:none;background:#fff;border-color:rgba(37,99,235,.3);box-shadow:0 10px 20px rgba(15,23,42,.06);}
.install-entry-strip{
  margin-top:12px;padding:14px 16px;border-radius:18px;border:1px solid rgba(37,99,235,.14);
  background:linear-gradient(135deg,rgba(239,246,255,.96),rgba(255,255,255,.96));
  display:flex;align-items:center;justify-content:space-between;gap:14px;box-shadow:0 12px 28px rgba(15,23,42,.05);
}
.install-entry-copy{display:grid;gap:3px;min-width:0;}
.install-entry-copy strong{font-size:14px;color:#0f172a;line-height:1.45;}
.install-entry-copy span{font-size:12.5px;color:#64748b;line-height:1.55;}
.install-entry-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.install-entry-primary,.install-entry-secondary{
  display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border-radius:999px;
  font-size:13px;font-weight:800;text-decoration:none;white-space:nowrap;
}
.install-entry-primary{background:#2563eb;color:#fff;box-shadow:0 12px 20px rgba(37,99,235,.22);}
.install-entry-secondary{background:#fff;color:#2563eb;border:1px solid rgba(37,99,235,.18);}
.install-entry-primary:hover,.install-entry-secondary:hover{text-decoration:none;transform:translateY(-1px);}
.entry-routing-section{padding-top:30px !important;padding-bottom:30px !important;}
.entry-routing-title{margin-bottom:14px !important;}
.entry-routing-title h2{margin-bottom:8px !important;}
.entry-routing-title p{max-width:760px;margin:0 auto;color:#64748b;}
.entry-routing-grid{display:grid;grid-template-columns:1.1fr 1fr 1.15fr;gap:12px;}
.entry-routing-card{
  position:relative;min-height:196px;padding:18px;border-radius:20px;border:1px solid rgba(148,163,184,.2);
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.98));box-shadow:0 14px 30px rgba(15,23,42,.06);
  display:flex;flex-direction:column;gap:9px;overflow:hidden;
}
.entry-routing-card:before{content:"";position:absolute;inset:auto -24px -44px auto;width:96px;height:96px;border-radius:999px;background:rgba(37,99,235,.08);}
.entry-install-card:before{background:rgba(5,150,105,.09);}
.entry-github-card:before{background:rgba(15,23,42,.08);}
.entry-badge{align-self:flex-start;padding:5px 10px;border-radius:999px;background:rgba(37,99,235,.1);color:#2563eb;font-size:12px;font-weight:800;line-height:1;}
.entry-install-card .entry-badge{background:rgba(5,150,105,.1);color:#059669;}
.entry-github-card .entry-badge{background:rgba(15,23,42,.08);color:#334155;}
.entry-routing-card h3{margin:0;color:#0f172a;font-size:20px;letter-spacing:-.03em;}
.entry-routing-card p{margin:0;color:#475569;font-size:13px;line-height:1.7;}
.entry-url{margin-top:auto;padding:9px 11px;border-radius:12px;background:#f8fafc;color:#334155;font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;border:1px solid rgba(148,163,184,.16);}
.entry-link-group{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;}
.entry-link{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border-radius:999px;background:#fff;color:#2563eb;border:1px solid rgba(37,99,235,.18);font-size:13px;font-weight:800;text-decoration:none;white-space:nowrap;}
.entry-link-primary{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 12px 20px rgba(37,99,235,.18);}
.entry-link.ghost{color:#334155;border-color:rgba(148,163,184,.26);}
.entry-link:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 10px 18px rgba(15,23,42,.06);}
.bottom-support-actions{flex-wrap:wrap;}
.support-backup-link,.support-github-link{background:#fff !important;color:#475569 !important;border-color:rgba(148,163,184,.22) !important;}
@media (max-width:1180px){
  .entry-routing-grid{grid-template-columns:1fr;}
  .entry-routing-card{min-height:auto;}
  .install-entry-strip{align-items:flex-start;flex-direction:column;}
}
@media (max-width:768px){
  .nav-github-link{min-height:36px;padding:0 9px;}
  .install-entry-actions{width:100%;}
  .install-entry-primary,.install-entry-secondary{flex:1;min-width:0;}
  .entry-routing-section{padding-top:24px !important;padding-bottom:24px !important;}
  .entry-routing-card{padding:16px;border-radius:18px;}
}


/* V3.8.63: step number and title inline; remove extra routing prompt blocks. */

.install-entry-strip,.entry-routing-section{display:none !important;}
.install-simple-item{grid-template-columns:44px minmax(0,1fr) auto !important;grid-template-areas:"icon title number" "desc desc desc" !important;align-items:center !important;column-gap:10px !important;row-gap:8px !important;}
.install-simple-index{position:static !important;grid-area:number;justify-self:end;align-self:center;min-width:28px !important;height:28px !important;padding:0 8px !important;border-radius:999px;font-size:12px !important;box-shadow:0 8px 16px rgba(37,99,235,.18) !important;}
.install-simple-card-green .install-simple-index{box-shadow:0 8px 16px rgba(5,150,105,.18) !important;}
.install-simple-item h4{grid-area:title !important;margin:0 !important;padding-right:0 !important;display:flex;align-items:center;min-height:28px;}
.install-simple-item p{grid-area:desc !important;padding-top:2px;}
@media (max-width:768px){
  .install-simple-item{grid-template-columns:40px minmax(0,1fr) auto !important;}
  .install-simple-index{min-width:26px !important;height:26px !important;}
}


/* V3.8.64: purchase section moved up; bottom support typography unified. */
.purchase-section{margin-top:10px !important;padding-top:0 !important;}
.purchase-card{align-items:center !important;padding:14px 18px !important;}
.purchase-copy{min-width:0;}
.purchase-card p{margin-top:7px !important;max-width:920px;font-size:13.5px !important;line-height:1.65 !important;color:#475569 !important;}
.purchase-badge{min-height:30px !important;padding:0 13px !important;font-size:16px !important;}
.purchase-btn{min-height:40px !important;padding:0 18px !important;border-radius:11px !important;}
.bottom-support-section{margin-top:12px !important;}
.bottom-support-card{min-height:50px !important;padding:10px 16px !important;gap:14px !important;align-items:center !important;}
.bottom-support-card strong,
.bottom-support-link{font-size:14px !important;line-height:1 !important;font-weight:800 !important;letter-spacing:0 !important;}
.bottom-support-card strong{color:#0f172a !important;}
.bottom-support-actions{gap:14px !important;align-items:center !important;}
.bottom-support-link{color:#2563eb !important;text-decoration:none !important;}
.support-backup-link,.support-github-link,.support-contact-link,.support-doc-link{background:transparent !important;border:0 !important;color:#2563eb !important;}
.bottom-support-link::before{width:20px !important;height:20px !important;border-width:2px !important;border-radius:6px !important;}
.support-contact-link::before{border-radius:999px !important;}
@media (max-width:900px){
  .purchase-section{margin-top:8px !important;}
  .purchase-card{align-items:flex-start !important;flex-direction:column !important;}
  .bottom-support-card{align-items:flex-start !important;justify-content:flex-start !important;flex-direction:column !important;}
  .bottom-support-actions{gap:12px !important;}
}


/* V3.8.65: purchase QR entry and official account copy update. */

.purchase-card{display:flex;align-items:center !important;justify-content:space-between;gap:18px !important;}
.purchase-copy{flex:1 1 auto;max-width:760px;}
.purchase-side{display:flex;flex-direction:column;align-items:center;gap:12px;flex:0 0 auto;}
.purchase-qr-tip{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding:10px 12px;border-radius:14px;background:#f8fafc;border:1px solid rgba(148,163,184,.18);}
.purchase-qr-tip strong{font-size:14px;line-height:1.2;color:#0f172a;}
.purchase-qr-tip span{font-size:13px;line-height:1.65;color:#475569;}
.purchase-qr-card{display:flex;align-items:center;justify-content:center;padding:8px;border-radius:18px;background:#fff;border:1px solid rgba(148,163,184,.2);box-shadow:0 10px 24px rgba(15,23,42,.06);}
.purchase-qr-img{display:block;width:154px;height:154px;object-fit:cover;border-radius:12px;background:#fff;}
.purchase-btn{width:100%;justify-content:center;}
@media (max-width: 900px){
  .purchase-card{flex-direction:column !important;align-items:flex-start !important;}
  .purchase-copy{max-width:none;}
  .purchase-side{width:100%;align-items:flex-start;}
  .purchase-qr-card{align-self:center;}
  .purchase-btn{width:auto;min-width:220px;align-self:center;}
}


/* V3.8.66: purchase entrance redesigned based on provided prototype. */

.purchase-prototype-section{margin-top:18px !important;padding-top:0 !important;}
.purchase-prototype-card{position:relative;overflow:hidden;border:1px solid rgba(96,165,250,.26);border-radius:26px;background:linear-gradient(135deg,#ffffff 0%,#f8fbff 48%,#edf5ff 100%);box-shadow:0 18px 42px rgba(37,99,235,.08);padding:28px 34px 32px;}
.purchase-prototype-card:before{content:"";position:absolute;inset:0 0 auto auto;width:38%;height:58%;background:linear-gradient(135deg,rgba(59,130,246,0),rgba(59,130,246,.12));clip-path:polygon(34% 0,100% 0,100% 100%,0 100%);pointer-events:none;}
.purchase-prototype-card:after{content:"";position:absolute;top:48px;right:46px;width:116px;height:72px;opacity:.28;background-image:radial-gradient(#93c5fd 2px,transparent 2px);background-size:14px 14px;pointer-events:none;}
.purchase-prototype-head{position:relative;z-index:1;display:flex;align-items:center;gap:18px;margin-bottom:26px;}
.purchase-title-icon{width:68px;height:68px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#edf5ff,#dbeafe);color:#2563eb;font-size:32px;font-weight:900;box-shadow:0 14px 28px rgba(37,99,235,.12);}
.purchase-title-copy h2{margin:0;font-size:34px;line-height:1.15;letter-spacing:-.045em;color:#2563eb;}
.purchase-title-copy p{margin:9px 0 0;color:#475569;font-size:15px;line-height:1.7;}
.purchase-prototype-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.22fr 1.02fr .92fr;gap:18px;align-items:stretch;}
.purchase-methods-panel,.purchase-usage-panel,.purchase-qr-panel{min-width:0;border-radius:22px;border:1px solid rgba(147,197,253,.34);background:rgba(255,255,255,.78);box-shadow:0 12px 30px rgba(15,23,42,.05);}
.purchase-methods-panel{padding:24px 22px;display:flex;flex-direction:column;gap:16px;}
.purchase-method-card{position:relative;overflow:hidden;display:grid;grid-template-columns:86px minmax(0,1fr);align-items:center;gap:20px;min-height:142px;padding:24px 24px;border-radius:20px;border:1px solid rgba(147,197,253,.2);}
.purchase-method-card:after{content:"";position:absolute;right:-14px;bottom:-28px;width:108px;height:108px;border-radius:999px;background:rgba(255,255,255,.38);}
.purchase-method-wechat{background:linear-gradient(135deg,#f8fbff,#edf6ff);}
.purchase-method-xianyu{background:linear-gradient(135deg,#fffdf4,#fff6d8);border-color:rgba(251,191,36,.26);}
.purchase-method-icon{position:relative;z-index:1;width:72px;height:72px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;font-weight:900;box-shadow:0 16px 28px rgba(37,99,235,.16);}
.wechat-icon{background:linear-gradient(135deg,#60a5fa,#2563eb);}
.xianyu-icon{background:linear-gradient(135deg,#fde047,#facc15);color:#111827;}
.purchase-method-card h3{position:relative;z-index:1;margin:0;color:#0f172a;font-size:20px;line-height:1.35;letter-spacing:-.035em;}
.purchase-method-card p{position:relative;z-index:1;margin:10px 0 0;color:#475569;font-size:14px;line-height:1.75;}
.purchase-method-card p strong,.purchase-method-card a{color:#2563eb;font-weight:900;}
.purchase-usage-panel{padding:28px 22px;}
.purchase-panel-title{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.purchase-panel-icon{width:52px;height:52px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:22px;font-weight:900;box-shadow:0 16px 28px rgba(37,99,235,.18);}
.purchase-panel-title h3{margin:0;color:#0f172a;font-size:22px;letter-spacing:-.04em;}
.purchase-flow-list{position:relative;display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;}
.purchase-flow-list:before{content:"";position:absolute;left:25px;top:46px;bottom:46px;width:2px;border-left:2px dashed rgba(37,99,235,.35);}
.purchase-flow-list li{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:14px;min-height:54px;padding:9px 14px 9px 12px;border-radius:14px;border:1px solid rgba(147,197,253,.28);background:rgba(255,255,255,.76);}
.purchase-flow-list li span{position:relative;z-index:1;width:42px;height:42px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:17px;font-weight:900;box-shadow:0 10px 20px rgba(37,99,235,.18);}
.purchase-flow-list li strong{font-size:15px;line-height:1.45;color:#1e293b;font-weight:800;}
.purchase-qr-panel{padding:28px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.purchase-qr-title{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px;}
.purchase-qr-title span{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;color:#2563eb;border:2px dashed rgba(37,99,235,.7);font-weight:900;}
.purchase-qr-title h3{margin:0;color:#0f172a;font-size:20px;letter-spacing:-.03em;}
.purchase-qr-panel p{margin:0 0 18px;color:#475569;font-size:14px;line-height:1.7;}
.purchase-qr-panel p strong{color:#2563eb;}
.purchase-qr-frame{display:flex;align-items:center;justify-content:center;width:232px;height:232px;padding:14px;margin:0 auto 20px;border-radius:18px;background:#fff;border:1px solid rgba(148,163,184,.22);box-shadow:0 12px 28px rgba(15,23,42,.08);}
.purchase-qr-img{display:block;width:100%;height:100%;object-fit:contain;border-radius:8px;background:#fff;}
.purchase-qr-panel .purchase-btn{width:100%;min-height:52px;border-radius:14px;font-size:16px;font-weight:900;box-shadow:0 16px 26px rgba(37,99,235,.24);}
@media (max-width:1180px){
  .purchase-prototype-grid{grid-template-columns:1fr;}
  .purchase-method-card{min-height:120px;}
  .purchase-qr-panel .purchase-btn{max-width:360px;}
}
@media (max-width:720px){
  .purchase-prototype-card{padding:20px 16px 22px;border-radius:22px;}
  .purchase-prototype-head{align-items:flex-start;gap:12px;margin-bottom:18px;}
  .purchase-title-icon{width:52px;height:52px;font-size:24px;}
  .purchase-title-copy h2{font-size:28px;}
  .purchase-title-copy p{font-size:13px;}
  .purchase-methods-panel,.purchase-usage-panel,.purchase-qr-panel{padding:16px;}
  .purchase-method-card{grid-template-columns:60px minmax(0,1fr);gap:14px;padding:18px 16px;}
  .purchase-method-icon{width:56px;height:56px;font-size:15px;border-radius:15px;}
  .purchase-method-card h3,.purchase-panel-title h3,.purchase-qr-title h3{font-size:18px;}
  .purchase-flow-list li{grid-template-columns:44px minmax(0,1fr);gap:10px;}
  .purchase-flow-list li span{width:36px;height:36px;font-size:15px;}
  .purchase-flow-list:before{left:21px;}
  .purchase-qr-frame{width:210px;height:210px;}
}


/* V3.8.67: compact purchase layout, two methods in one row, QR static route. */

.purchase-prototype-section{padding-top:18px !important;padding-bottom:18px !important;}
.purchase-compact-card{padding:22px 24px !important;border-radius:24px !important;}
.purchase-compact-head{margin-bottom:18px !important;gap:14px !important;}
.purchase-compact-head .purchase-title-icon{width:52px !important;height:52px !important;font-size:22px !important;border-radius:18px !important;}
.purchase-compact-head .purchase-title-copy h2{font-size:32px !important;line-height:1.12 !important;margin:0 0 6px !important;}
.purchase-compact-head .purchase-title-copy p{font-size:14px !important;line-height:1.55 !important;max-width:860px !important;margin:0 !important;}
.purchase-compact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 260px;gap:14px;align-items:stretch;}
.purchase-method-card{min-height:150px !important;padding:20px 18px !important;border-radius:20px !important;grid-template-columns:58px minmax(0,1fr) !important;gap:14px !important;box-shadow:0 10px 22px rgba(15,23,42,.045) !important;}
.purchase-method-icon{width:54px !important;height:54px !important;border-radius:16px !important;font-size:14px !important;}
.purchase-method-card h3{font-size:20px !important;line-height:1.22 !important;margin:0 0 8px !important;}
.purchase-method-card p{font-size:14px !important;line-height:1.65 !important;margin:0 !important;}
.purchase-usage-panel{display:none !important;}
.purchase-compact-qr{padding:18px 16px !important;border-radius:20px !important;min-height:150px;box-shadow:0 10px 22px rgba(15,23,42,.045) !important;}
.purchase-compact-qr .purchase-qr-title{gap:8px !important;margin-bottom:6px !important;}
.purchase-compact-qr .purchase-qr-title span{width:26px !important;height:26px !important;border-radius:8px !important;font-size:13px !important;}
.purchase-compact-qr .purchase-qr-title h3{font-size:17px !important;line-height:1.25 !important;}
.purchase-compact-qr p{font-size:13px !important;line-height:1.45 !important;margin:0 0 10px !important;}
.purchase-compact-qr .purchase-qr-frame{width:132px !important;height:132px !important;padding:8px !important;margin:0 auto 12px !important;border-radius:14px !important;}
.purchase-compact-qr .purchase-btn{min-height:40px !important;border-radius:12px !important;font-size:14px !important;padding:0 14px !important;box-shadow:0 10px 18px rgba(37,99,235,.18) !important;}
@media (max-width: 1100px){
  .purchase-compact-grid{grid-template-columns:1fr 1fr;}
  .purchase-compact-qr{grid-column:1 / -1;}
  .purchase-compact-qr .purchase-qr-frame{width:140px !important;height:140px !important;}
  .purchase-compact-qr .purchase-btn{max-width:260px;margin:0 auto;}
}
@media (max-width: 720px){
  .purchase-compact-card{padding:18px 14px !important;}
  .purchase-compact-head{align-items:flex-start !important;}
  .purchase-compact-head .purchase-title-copy h2{font-size:26px !important;}
  .purchase-compact-grid{grid-template-columns:1fr;gap:12px;}
  .purchase-method-card{min-height:auto !important;padding:16px !important;}
  .purchase-compact-qr .purchase-qr-frame{width:130px !important;height:130px !important;}
}


/* V3.8.68: replace advantage content with the top hero visual content. */

.advantage-static{overflow:visible !important;margin-top:18px !important;padding:0 !important;}
.advantage-static-grid{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:16px !important;width:100% !important;min-width:0 !important;transform:none !important;animation:none !important;}
.advantage-static .advantage-image-card{flex:none !important;width:auto !important;min-width:0 !important;padding:0 !important;border-radius:18px !important;background:#fff !important;border:1px solid rgba(148,163,184,.22) !important;box-shadow:0 12px 28px rgba(15,23,42,.06) !important;overflow:hidden !important;}
.advantage-static .advantage-image-button{display:block !important;width:100% !important;height:auto !important;min-height:0 !important;padding:10px !important;border:0 !important;background:transparent !important;}
.advantage-static .advantage-card-img{display:block !important;width:100% !important;height:auto !important;aspect-ratio:16/9 !important;max-height:none !important;object-fit:contain !important;border-radius:14px !important;background:#f8fbff !important;}
@media (max-width: 980px){
  .advantage-static-grid{grid-template-columns:1fr !important;gap:12px !important;}
  .advantage-static .advantage-card-img{aspect-ratio:auto !important;}
}


/* V3.8.70: remove top three quick explanation images; keep lower advantage content. */
.quick-info-image-grid{display:none !important;}


/* V3.8.71: footer email entry and QR contact modal. */

.bottom-support-link{appearance:none;-webkit-appearance:none;border:0;background:transparent;font-family:inherit;cursor:pointer;padding:0;}
.support-email-link::before{border-radius:6px !important;}
.support-email-link::after{content:"";position:absolute;left:5px;top:8px;width:10px;height:7px;border:2px solid currentColor;border-top:0;border-radius:0 0 3px 3px;box-sizing:border-box;}
.support-email-link{position:relative;}
.contact-qr-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(15,23,42,.42);backdrop-filter:blur(8px);}
.contact-qr-modal[hidden]{display:none !important;}
.contact-qr-dialog{position:relative;width:min(420px,calc(100vw - 36px));padding:24px;border-radius:24px;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);border:1px solid rgba(190,214,245,.9);box-shadow:0 28px 80px rgba(15,23,42,.22);}
.contact-qr-close{position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;border-radius:999px;background:#eef4ff;color:#1d4ed8;font-size:22px;line-height:1;cursor:pointer;font-weight:800;}
.contact-qr-close:hover{background:#dbeafe;}
.contact-qr-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;padding-right:28px;}
.contact-qr-icon{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:16px;font-weight:900;box-shadow:0 12px 22px rgba(37,99,235,.25);}
.contact-qr-head h2{margin:0;color:#0f172a;font-size:22px;line-height:1.2;letter-spacing:-.03em;}
.contact-qr-head p{margin:7px 0 0;color:#475569;font-size:14px;line-height:1.7;}
.contact-qr-body{display:flex;flex-direction:column;align-items:center;gap:12px;}
.contact-qr-body img{width:184px;height:184px;object-fit:cover;border-radius:16px;background:#fff;border:1px solid rgba(148,163,184,.22);padding:8px;box-shadow:0 12px 28px rgba(15,23,42,.08);}
.contact-qr-note{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:10px 14px;border-radius:14px;background:#f8fafc;border:1px solid rgba(148,163,184,.16);}
.contact-qr-note strong{font-size:14px;line-height:1.3;color:#0f172a;}
.contact-qr-note span{font-size:13px;line-height:1.55;color:#475569;}
.contact-qr-email{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 14px;border-radius:999px;background:#eff6ff;color:#2563eb;font-size:13px;font-weight:800;text-decoration:none;}
.contact-qr-email:hover{text-decoration:none;background:#dbeafe;}
@media (max-width:640px){
  .contact-qr-dialog{padding:20px;border-radius:20px;}
  .contact-qr-head h2{font-size:20px;}
  .contact-qr-body img{width:168px;height:168px;}
}


/* V3.8.72: purchase entry two plan cards. */
.purchase-plan-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 14px;}
.purchase-plan-card{position:relative;overflow:hidden;padding:18px 20px;border-radius:20px;border:1px solid rgba(191,219,254,.9);background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);box-shadow:0 10px 22px rgba(15,23,42,.045);}
.purchase-plan-card:before{content:"";position:absolute;right:-42px;bottom:-44px;width:130px;height:130px;border-radius:999px;background:rgba(37,99,235,.06);}
.purchase-plan-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.purchase-plan-name{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 12px;border-radius:999px;background:#eff6ff;color:#2563eb;font-size:14px;font-weight:900;}
.purchase-plan-price{font-size:28px;line-height:1;color:#0f172a;letter-spacing:-.04em;}
.purchase-plan-card p{position:relative;z-index:1;margin:0 0 10px;color:#475569;font-size:14px;line-height:1.6;}
.purchase-plan-card ul{position:relative;z-index:1;display:grid;gap:6px;margin:0;padding:0;list-style:none;}
.purchase-plan-card li{display:flex;align-items:flex-start;gap:7px;color:#1f2937;font-size:13px;line-height:1.5;}
.purchase-plan-card li:before{content:"✓";flex:0 0 auto;margin-top:1px;color:#2563eb;font-weight:900;}
.plan-standard{border-color:rgba(147,197,253,.95);background:linear-gradient(135deg,#eff6ff 0%,#ffffff 58%,#f0f9ff 100%);}
.plan-standard .purchase-plan-name{background:#2563eb;color:#fff;}
.plan-standard .purchase-plan-price{color:#1d4ed8;}
@media (max-width:900px){.purchase-plan-row{grid-template-columns:1fr;}.purchase-plan-price{font-size:24px;}}
@media (max-width:640px){.purchase-plan-card{padding:16px;}.purchase-plan-top{align-items:flex-start;}.purchase-plan-price{font-size:22px;}}


/* V3.8.73: compact purchase entry and footer email popup. */
.purchase-prototype-section{padding-top:14px !important;padding-bottom:14px !important;}
.purchase-compact-card{padding:18px 20px 20px !important;border-radius:22px !important;}
.purchase-compact-head{margin-bottom:14px !important;gap:12px !important;align-items:center !important;}
.purchase-compact-head .purchase-title-icon{width:44px !important;height:44px !important;border-radius:15px !important;font-size:18px !important;}
.purchase-compact-head .purchase-title-copy h2{font-size:28px !important;line-height:1.12 !important;margin:0 0 4px !important;}
.purchase-compact-head .purchase-title-copy p{font-size:13px !important;line-height:1.45 !important;max-width:880px !important;margin:0 !important;}
.purchase-plan-row{gap:12px !important;margin:0 0 12px !important;}
.purchase-plan-card{padding:14px 16px !important;border-radius:16px !important;min-height:142px !important;}
.purchase-plan-card:before{width:92px !important;height:92px !important;right:-28px !important;bottom:-30px !important;}
.purchase-plan-top{margin-bottom:8px !important;}
.purchase-plan-name{min-height:24px !important;padding:0 10px !important;font-size:12px !important;}
.purchase-plan-price{font-size:24px !important;letter-spacing:-.035em !important;}
.purchase-plan-card p{font-size:13px !important;line-height:1.45 !important;margin:0 0 8px !important;}
.purchase-plan-card ul{gap:4px !important;}
.purchase-plan-card li{font-size:12.5px !important;line-height:1.4 !important;}
.purchase-compact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 220px !important;gap:12px !important;align-items:stretch !important;}
.purchase-method-card{min-height:128px !important;padding:16px !important;border-radius:16px !important;grid-template-columns:48px minmax(0,1fr) !important;gap:12px !important;}
.purchase-method-icon{width:46px !important;height:46px !important;border-radius:14px !important;font-size:12px !important;}
.purchase-method-card h3{font-size:17px !important;line-height:1.25 !important;margin:0 0 6px !important;}
.purchase-method-card p{font-size:13px !important;line-height:1.5 !important;margin:0 !important;}
.purchase-inline-link{display:inline-flex;margin-top:8px;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:#fff;color:#2563eb;border:1px solid rgba(37,99,235,.18);font-size:12px;font-weight:800;text-decoration:none;}
.purchase-inline-link:hover{text-decoration:none;background:#eff6ff;}
.purchase-compact-qr{min-height:128px !important;padding:14px !important;border-radius:16px !important;}
.purchase-compact-qr .purchase-qr-title{gap:6px !important;margin-bottom:4px !important;}
.purchase-compact-qr .purchase-qr-title span{width:22px !important;height:22px !important;border-radius:7px !important;font-size:11px !important;}
.purchase-compact-qr .purchase-qr-title h3{font-size:15px !important;line-height:1.25 !important;}
.purchase-compact-qr p{font-size:12px !important;line-height:1.35 !important;margin:0 0 8px !important;}
.purchase-compact-qr .purchase-qr-frame{width:108px !important;height:108px !important;padding:6px !important;margin:0 auto !important;border-radius:12px !important;}
.purchase-compact-qr .purchase-btn{display:none !important;}
.email-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(15,23,42,.42);backdrop-filter:blur(8px);}
.email-modal[hidden]{display:none !important;}
.email-dialog{position:relative;width:min(400px,calc(100vw - 36px));padding:24px;border-radius:24px;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);border:1px solid rgba(190,214,245,.9);box-shadow:0 28px 80px rgba(15,23,42,.22);}
.email-close{position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;border-radius:999px;background:#eef4ff;color:#1d4ed8;font-size:22px;line-height:1;cursor:pointer;font-weight:800;}
.email-close:hover{background:#dbeafe;}
.email-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;padding-right:28px;}
.email-icon{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:18px;font-weight:900;box-shadow:0 12px 22px rgba(37,99,235,.25);}
.email-head h2{margin:0;color:#0f172a;font-size:22px;line-height:1.2;letter-spacing:-.03em;}
.email-head p{margin:7px 0 0;color:#475569;font-size:14px;line-height:1.7;}
.email-value{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 14px;border-radius:14px;background:#f8fafc;border:1px solid rgba(148,163,184,.22);font-size:16px;font-weight:900;color:#1d4ed8;letter-spacing:.01em;}
.email-copy-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:42px;margin-top:12px;border:0;border-radius:12px;background:#2563eb;color:#fff;font-size:14px;font-weight:900;cursor:pointer;}
.email-copy-btn:hover{background:#1d4ed8;}
.contact-qr-email{border:0;cursor:pointer;font-family:inherit;}
@media (max-width:1100px){
  .purchase-compact-grid{grid-template-columns:1fr 1fr !important;}
  .purchase-compact-qr{grid-column:1 / -1;display:grid !important;grid-template-columns:minmax(0,1fr) auto;align-items:center;text-align:left !important;column-gap:16px;}
  .purchase-compact-qr .purchase-qr-title{justify-content:flex-start !important;}
  .purchase-compact-qr .purchase-qr-frame{width:112px !important;height:112px !important;grid-row:1 / span 2;grid-column:2;}
}
@media (max-width:720px){
  .purchase-compact-card{padding:16px 14px !important;}
  .purchase-compact-head .purchase-title-copy h2{font-size:24px !important;}
  .purchase-plan-row,.purchase-compact-grid{grid-template-columns:1fr !important;gap:10px !important;}
  .purchase-plan-card{min-height:auto !important;}
  .purchase-compact-qr{display:flex !important;text-align:center !important;}
  .purchase-compact-qr .purchase-qr-frame{width:112px !important;height:112px !important;}
  .email-dialog{padding:20px;border-radius:20px;}
  .email-head h2{font-size:20px;}
}