/* Current 1.1.8-style tutorial visual */
.current-ui-guide{overflow:hidden;border:1px solid #1a5778;border-radius:8px;background:#071827;box-shadow:inset 0 0 0 1px rgba(31,220,224,.08)}
.current-ui-top{display:flex;align-items:center;gap:9px;padding:12px 14px;background:#0d2436;border-bottom:1px solid #19425d;color:#edf8ff;font-size:13px}.current-ui-top span{margin-right:auto;font-weight:800}.current-ui-top i{font-style:normal;color:#a9c3d6;font-size:11px}
.current-ui-tabs{display:flex;gap:6px;overflow:hidden;padding:10px 12px;border-bottom:1px solid #17415a;background:#081d2e}.current-ui-tabs span,.current-ui-tabs b{flex:0 0 auto;padding:7px 9px;border:1px solid #195171;border-radius:5px;color:#a7c4d8;font-size:11px}.current-ui-tabs .is-active{color:#45f0e5;border-color:#00cfd2;background:#0b3949}
.current-ui-body{display:flex;gap:16px;align-items:flex-start;margin:16px;padding:20px;border:1px solid #1d5574;border-radius:7px;background:#0c2334}.current-ui-body strong,.current-ui-result span{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:#0d5963;color:#5ff8ed}.current-ui-body h4{margin:0 0 8px;font-size:17px;color:#e4f8ff}.current-ui-body p{margin:0;color:#abc4d5;line-height:1.7;font-size:13px}
.current-ui-result{display:flex;align-items:center;gap:12px;margin:0 16px 16px;padding:14px 18px;border-left:3px solid #22e4d8;background:#0a2a38;color:#d8f4f5}.current-ui-result em{margin-left:auto;color:#8eafc5;font-size:12px;font-style:normal}
@media(max-width:720px){.current-ui-top i:nth-of-type(n+3),.current-ui-tabs span:nth-of-type(n+4){display:none}.current-ui-result{align-items:flex-start;flex-wrap:wrap}.current-ui-result em{margin-left:44px}}
:root {
  color-scheme: light dark;
  --bg: #f6f9fb;
  --surface: #ffffff;
  --surface-2: #eef5f4;
  --text: #17202a;
  --muted: #5e6b78;
  --line: #dce6eb;
  --brand: #0f9f8f;
  --brand-2: #2563eb;
  --brand-dark: #087568;
  --amber: #d97706;
  --shadow: 0 18px 50px rgba(22, 36, 48, 0.12);
  --radius: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1117;
    --surface: #121a23;
    --surface-2: #17232d;
    --text: #edf5f7;
    --muted: #a6b3be;
    --line: #263544;
    --brand: #25c6af;
    --brand-2: #6aa2ff;
    --brand-dark: #5be0cd;
    --amber: #f2b044;
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(15, 159, 143, 0.12), transparent 32rem),
    radial-gradient(circle at 92% 18%, rgba(37, 99, 235, 0.13), transparent 30rem),
    var(--bg);
  color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
}

.container {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
}

.section {
  padding: 88px 0;
}

.section.compact {
  padding: 28px 0 64px;
}

.muted {
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(16px);
}

.nav-shell {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.brand-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  box-shadow: 0 8px 20px rgba(15, 159, 143, 0.28);
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--muted);
  font-size: 14px;
}

.desktop-nav a,
.mobile-nav a {
  text-decoration: none;
}

.desktop-nav a:hover,
.mobile-nav a:hover {
  color: var(--brand);
}

.menu-button {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}

.menu-button span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  border-radius: 99px;
  background: var(--text);
}

.mobile-nav {
  display: none;
}

.hero {
  min-height: calc(100vh - 68px);
  display: flex;
  align-items: center;
  padding: 80px 0 72px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
  gap: 52px;
  align-items: center;
}

.hero-copy,
.product-visual,
.window-frame,
.panel-main {
  min-width: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  color: var(--brand-dark);
  font-size: 14px;
  font-weight: 700;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 16%, transparent);
}

.hero h1 {
  margin: 24px 0 18px;
  font-size: clamp(46px, 7vw, 82px);
  line-height: 1.03;
  letter-spacing: 0;
}

.hero-lead {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 19px;
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
}

.hero-points span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 14px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0 0;
}

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button.primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  box-shadow: 0 14px 28px rgba(15, 159, 143, 0.25);
}

.button.secondary {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 620px;
  margin-top: 34px;
}

.hero-meta div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}

.hero-meta strong,
.hero-meta span {
  display: block;
}

.hero-meta strong {
  font-size: 17px;
}

.hero-meta span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.product-visual {
  position: relative;
  min-height: 480px;
}

.window-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 78%, var(--brand));
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.window-bar {
  display: flex;
  height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 76%, var(--surface));
}

.window-bar span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.window-bar span:nth-child(1) {
  background: #ef4444;
}

.window-bar span:nth-child(2) {
  background: #f59e0b;
}

.window-bar span:nth-child(3) {
  background: #10b981;
}

.window-bar strong {
  margin-left: 8px;
  color: var(--muted);
  font-size: 13px;
}

.app-panel {
  display: grid;
  grid-template-columns: 150px 1fr;
  min-height: 390px;
}

.panel-side {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px 12px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 66%, var(--surface));
}

.side-item {
  min-height: 36px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.side-item.active {
  background: color-mix(in srgb, var(--brand) 14%, var(--surface));
  color: var(--brand-dark);
}

.panel-main {
  padding: 22px;
}

.input-block {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.input-block span {
  display: block;
  margin-bottom: 12px;
  font-weight: 800;
}

.fake-line {
  width: 68%;
  height: 10px;
  margin-top: 10px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--muted) 24%, transparent);
}

.fake-line.wide {
  width: 94%;
}

.search-mock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
}

.search-mock strong {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 12px;
}

.flow-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.flow-row div {
  padding: 14px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.flow-row strong,
.flow-row span {
  display: block;
}

.flow-row strong {
  color: var(--brand);
  font-size: 28px;
}

.flow-row span {
  color: var(--muted);
  font-size: 12px;
}

.task-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: 14px;
}

.task-item span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--brand);
}

.task-item.running span {
  background: var(--amber);
}

.floating-chip {
  position: absolute;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 12px 30px rgba(15, 159, 143, 0.12);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.chip-one {
  top: 60px;
  right: -14px;
}

.chip-two {
  bottom: 94px;
  left: -18px;
}

.chip-three {
  right: 28px;
  bottom: 26px;
}

.notice-card,
.download-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--amber) 8%, var(--surface));
}

.notice-card h2 {
  margin: 0 0 6px;
  font-size: 24px;
}

.notice-card p,
.download-card p {
  margin: 0;
  color: var(--muted);
}

.notice-badge {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line));
  border-radius: 999px;
  color: var(--amber);
  font-size: 13px;
  font-weight: 800;
}

.section-heading {
  max-width: 720px;
  margin: 0 auto 38px;
  text-align: center;
}

.section-heading.align-left {
  margin-left: 0;
  text-align: left;
}

.section-heading span,
.download-label {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-heading h2,
.download-card h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.15;
  letter-spacing: 0;
}

.section-heading p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 17px;
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.library-card,
.scene-card,
.guide-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.library-card {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: 22px;
}

.library-card.highlight {
  background:
    radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 12rem),
    var(--surface);
}

.library-index {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--brand-2) 12%, var(--surface-2));
  color: var(--brand-2);
  font-weight: 900;
}

.library-card h3,
.scene-card h3 {
  margin: 18px 0 9px;
  font-size: 20px;
  line-height: 1.3;
}

.library-card p,
.scene-card p,
.guide-panel p {
  margin: 0;
  color: var(--muted);
}

.guide-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
  padding: 20px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, var(--surface)), var(--surface));
}

.guide-panel strong {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.feature-card,
.workflow-step,
.provider-card,
.timeline-item,
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.feature-card {
  padding: 20px;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.feature-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  box-shadow: 0 12px 30px rgba(22, 36, 48, 0.08);
}

.feature-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--brand) 12%, var(--surface-2));
  color: var(--brand);
  font-weight: 900;
}

.feature-card h3,
.workflow-step h3,
.provider-card strong,
.timeline-item h3 {
  margin: 16px 0 8px;
  font-size: 19px;
  line-height: 1.3;
}

.feature-card p,
.workflow-step p,
.provider-card p,
.timeline-item p,
.faq-answer p {
  margin: 0;
  color: var(--muted);
}

.workflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.workflow-step {
  padding: 22px;
  position: relative;
}

.workflow-step strong {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 20px;
}

.split-section {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 42px;
  align-items: center;
}

.provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.provider-card {
  padding: 24px;
}

.provider-card span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.provider-card.ready span {
  background: color-mix(in srgb, var(--brand) 14%, var(--surface-2));
  color: var(--brand-dark);
}

.provider-card.partial span {
  background: color-mix(in srgb, var(--amber) 14%, var(--surface-2));
  color: var(--amber);
}

.provider-card strong {
  display: block;
}

.scene-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.scene-card {
  padding: 22px;
}

.scene-card h3 {
  margin-top: 0;
}

.timeline {
  display: grid;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
}

.timeline-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  padding: 18px;
}

.timeline-version {
  color: var(--brand);
  font-size: 18px;
  font-weight: 900;
}

.timeline-item h3 {
  margin-top: 0;
}

.older-updates {
  display: none;
  gap: 12px;
}

.older-updates.show {
  display: grid;
}

.text-button {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  margin: 22px auto 0;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}

.download-section {
  padding-top: 36px;
}

.download-card {
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, var(--surface)), var(--surface));
}

.download-card > div:first-child {
  max-width: 610px;
}

.download-box {
  display: grid;
  width: min(100%, 360px);
  gap: 10px;
  justify-items: center;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.download-box img {
  width: 68px;
  height: 68px;
  border-radius: var(--radius);
}

.download-box strong {
  font-size: 19px;
}

.download-actions {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.download-actions .button {
  min-height: 44px;
  padding: 0 14px;
  font-size: 14px;
}

.download-box span,
.download-note {
  color: var(--muted);
  font-size: 13px;
}

.download-note {
  min-height: 20px;
}

.download-note strong {
  color: var(--brand);
  font-size: inherit;
}

.faq-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 46px;
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-question {
  display: flex;
  width: 100%;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.faq-question span {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--brand);
}

.faq-answer {
  display: none;
  padding: 0 18px 18px;
}

.faq-item.open .faq-answer {
  display: block;
}

.faq-item.open .faq-question span {
  background: var(--brand);
  color: #fff;
}

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.footer-inner {
  display: flex;
  min-height: 112px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer-inner p {
  margin: 6px 0 0;
  color: var(--muted);
}

.footer-inner a {
  color: var(--brand);
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 980px) {
  .desktop-nav {
    display: none;
  }

  .menu-button {
    display: block;
  }

  .mobile-nav {
    position: fixed;
    inset: 68px 0 auto 0;
    display: none;
    padding: 12px 20px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.1);
  }

  .mobile-nav.show {
    display: grid;
    gap: 6px;
  }

  .mobile-nav a {
    min-height: 42px;
    padding: 8px 0;
    color: var(--muted);
    font-weight: 800;
  }

  .hero {
    min-height: auto;
  }

  .hero-grid,
  .split-section,
  .faq-layout {
    grid-template-columns: 1fr;
  }

  .product-visual {
    min-height: 420px;
  }

  .feature-grid,
  .workflow,
  .library-grid,
  .scene-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .container {
    width: 100%;
    padding-right: 14px;
    padding-left: 14px;
  }

  .section {
    padding: 64px 0;
  }

  .hero {
    padding-top: 54px;
  }

  .menu-button {
    position: fixed;
    top: 13px;
    right: 14px;
    z-index: 60;
  }

  .hero h1 {
    font-size: clamp(38px, 12vw, 52px);
  }

  .hero-lead {
    font-size: 17px;
  }

  .hero-actions,
  .button {
    width: 100%;
  }

  .hero-points span,
  .task-item,
  .search-mock {
    max-width: 100%;
  }

  .hero-points {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-points span {
    width: 100%;
  }

  .search-mock {
    flex-wrap: wrap;
    padding: 9px 10px;
  }

  .hero-meta,
  .feature-grid,
  .workflow,
  .library-grid,
  .scene-grid,
  .provider-grid,
  .download-actions,
  .flow-row {
    grid-template-columns: 1fr;
  }

  .guide-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-visual {
    min-height: auto;
  }

  .app-panel {
    grid-template-columns: 1fr;
  }

  .panel-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .floating-chip {
    position: static;
    display: inline-flex;
    margin: 10px 8px 0 0;
  }

  .notice-card,
  .download-card,
  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .timeline-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* HANSEN GLOBAL NAVIGATION */
.hansen-global-header{position:relative;z-index:80;border-bottom:1px solid #e5e7eb;background:#fff;color:#111827;font-family:"Microsoft YaHei","PingFang SC","Segoe UI",Arial,sans-serif}
.hansen-global-inner{width:min(1600px,calc(100% - 48px));min-height:96px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:38px}
.hansen-global-brand{flex:0 0 auto;color:#111827;font-size:28px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap}
.hansen-global-desktop-nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(18px,2vw,36px);min-width:0;font-size:17px}
.hansen-global-desktop-nav>a,.hansen-global-dropdown-trigger{display:inline-flex;align-items:center;min-height:44px;color:#111827;text-decoration:none;white-space:nowrap;transition:color .2s ease}
.hansen-global-desktop-nav>a:hover,.hansen-global-desktop-nav>a.is-current,.hansen-global-dropdown-trigger:hover{color:#0aa85f}
.hansen-global-dropdown{position:relative}
.hansen-global-dropdown-trigger{gap:7px}
.hansen-global-dropdown-trigger span{font-size:20px;transform:translateY(-2px)}
.hansen-global-submenu{position:absolute;top:calc(100% + 8px);left:50%;width:220px;padding:10px;border:1px solid #e5e7eb;border-radius:14px;background:#fff;box-shadow:0 18px 40px rgba(15,23,42,.14);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
.hansen-global-dropdown:hover .hansen-global-submenu,.hansen-global-dropdown:focus-within .hansen-global-submenu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.hansen-global-submenu a{display:block;padding:10px 12px;border-radius:9px;color:#334155;text-decoration:none;white-space:nowrap}
.hansen-global-submenu a:hover{background:#f0fdf4;color:#0a9b58}
.hansen-global-mobile-menu{position:relative;display:none}
.hansen-global-mobile-menu summary{width:42px;height:42px;display:grid;place-content:center;gap:4px;border:1px solid #dbe3ea;border-radius:10px;background:#fff;cursor:pointer;list-style:none}
.hansen-global-mobile-menu summary::-webkit-details-marker{display:none}
.hansen-global-mobile-menu summary span{display:block;width:19px;height:2px;border-radius:99px;background:#111827}
.hansen-global-mobile-menu nav{position:absolute;top:52px;right:0;width:min(320px,calc(100vw - 28px));max-height:calc(100vh - 130px);overflow-y:auto;padding:10px;border:1px solid #e5e7eb;border-radius:14px;background:#fff;box-shadow:0 18px 40px rgba(15,23,42,.16)}
.hansen-global-mobile-menu nav>a,.hansen-global-mobile-children a{display:block;padding:10px 12px;border-radius:9px;color:#334155;font-weight:700;text-decoration:none}
.hansen-global-mobile-menu nav>a:hover,.hansen-global-mobile-menu nav>a.is-current,.hansen-global-mobile-children a:hover{background:#f0fdf4;color:#0a9b58}
.hansen-global-mobile-children{margin:0 0 4px 12px;padding-left:8px;border-left:2px solid #dcfce7}
.hansen-global-mobile-children a{padding:8px 10px;font-size:14px;font-weight:600}
@media(max-width:1240px){.hansen-global-inner{min-height:72px}.hansen-global-desktop-nav{display:none}.hansen-global-mobile-menu{display:block}}
@media(max-width:700px){.hansen-global-inner{width:100%;min-height:64px;padding:0 14px}.hansen-global-brand{font-size:23px}}

/* Calm meteor trails: sparse, slow, and never block interactions. */
body {
  isolation: isolate;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -32vh -28vw;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      118deg,
      transparent 48.8%,
      rgba(79, 220, 255, 0.025) 49.55%,
      rgba(127, 239, 255, 0.28) 49.86%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(79, 220, 255, 0.025) 50.16%,
      transparent 50.9%
    );
  transform: translate3d(-26%, -18%, 0);
  animation: ndh-meteor-trail 36s linear infinite;
  will-change: transform, opacity;
}

body::after {
  transform: translate3d(20%, 16%, 0) rotate(7deg);
  animation-delay: -18s;
  animation-duration: 44s;
}

body > header,
body > main,
body > footer {
  position: relative;
  z-index: 1;
}

@keyframes ndh-meteor-trail {
  0%,
  62% {
    opacity: 0;
  }

  65% {
    opacity: 0.42;
  }

  71% {
    opacity: 0;
    transform: translate3d(26%, 21%, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(26%, 21%, 0);
  }
}

@media (prefers-reduced-motion: reduce), (max-width: 640px) {
  body::before,
  body::after {
    animation: none;
    opacity: 0;
  }
}


/* A sparse meteor shower: several faint trails move at different, calm rhythms. */
body::before,
body::after {
  inset: -14vh -12vw;
  background:
    linear-gradient(135deg, transparent 46%, rgba(78, 218, 255, 0.05) 48.5%, rgba(160, 242, 255, 0.55) 49.7%, rgba(255, 255, 255, 0.92) 50%, rgba(103, 224, 255, 0.22) 50.25%, transparent 52%) 5% -4% / 240px 240px no-repeat,
    linear-gradient(135deg, transparent 46%, rgba(78, 218, 255, 0.04) 48.5%, rgba(160, 242, 255, 0.48) 49.7%, rgba(255, 255, 255, 0.84) 50%, rgba(103, 224, 255, 0.2) 50.25%, transparent 52%) 48% 7% / 185px 185px no-repeat,
    linear-gradient(135deg, transparent 46%, rgba(78, 218, 255, 0.04) 48.5%, rgba(160, 242, 255, 0.45) 49.7%, rgba(255, 255, 255, 0.8) 50%, rgba(103, 224, 255, 0.18) 50.25%, transparent 52%) 77% 42% / 155px 155px no-repeat,
    radial-gradient(circle, #f3ffff 0 1px, rgba(96, 226, 255, 0.85) 1.5px, transparent 4px) 17% 13% / 10px 10px no-repeat,
    radial-gradient(circle, #f3ffff 0 1px, rgba(96, 226, 255, 0.75) 1.5px, transparent 4px) 57% 18% / 10px 10px no-repeat,
    radial-gradient(circle, #f3ffff 0 1px, rgba(96, 226, 255, 0.72) 1.5px, transparent 4px) 84% 50% / 10px 10px no-repeat;
  opacity: 0.64;
  animation: ndh-meteor-shower-a 22s ease-in-out infinite;
}

body::after {
  background:
    linear-gradient(135deg, transparent 46%, rgba(88, 198, 255, 0.04) 48.5%, rgba(142, 218, 255, 0.44) 49.7%, rgba(255, 255, 255, 0.78) 50%, rgba(96, 199, 255, 0.16) 50.25%, transparent 52%) 20% 28% / 175px 175px no-repeat,
    linear-gradient(135deg, transparent 46%, rgba(88, 198, 255, 0.04) 48.5%, rgba(142, 218, 255, 0.42) 49.7%, rgba(255, 255, 255, 0.76) 50%, rgba(96, 199, 255, 0.16) 50.25%, transparent 52%) 64% 56% / 215px 215px no-repeat,
    linear-gradient(135deg, transparent 46%, rgba(88, 198, 255, 0.04) 48.5%, rgba(142, 218, 255, 0.36) 49.7%, rgba(255, 255, 255, 0.72) 50%, rgba(96, 199, 255, 0.14) 50.25%, transparent 52%) 86% 4% / 130px 130px no-repeat,
    radial-gradient(circle, #f3ffff 0 1px, rgba(112, 208, 255, 0.72) 1.5px, transparent 4px) 29% 38% / 10px 10px no-repeat,
    radial-gradient(circle, #f3ffff 0 1px, rgba(112, 208, 255, 0.7) 1.5px, transparent 4px) 75% 67% / 10px 10px no-repeat,
    radial-gradient(circle, #f3ffff 0 1px, rgba(112, 208, 255, 0.65) 1.5px, transparent 4px) 91% 12% / 10px 10px no-repeat;
  opacity: 0.46;
  animation: ndh-meteor-shower-b 31s ease-in-out infinite;
  animation-delay: -11s;
}

@keyframes ndh-meteor-shower-a {
  0%, 100% { transform: translate3d(-3%, -4%, 0); opacity: 0.32; }
  48% { opacity: 0.7; }
  72% { transform: translate3d(7%, 8%, 0); opacity: 0.56; }
}

@keyframes ndh-meteor-shower-b {
  0%, 100% { transform: translate3d(4%, -3%, 0); opacity: 0.18; }
  46% { opacity: 0.56; }
  74% { transform: translate3d(-7%, 8%, 0); opacity: 0.4; }
}


/* Canvas meteors replace the old static streaks. */
body::before,
body::after {
  display: none;
}

#ndh-meteor-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.9;
}

@media (prefers-reduced-motion: reduce), (max-width: 640px) {
  #ndh-meteor-canvas {
    display: none;
  }
}


/* Product workflow section */
.product-proof {
  position: relative;
  z-index: 1;
  padding-top: 28px;
  padding-bottom: 28px;
}

.product-proof-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 28px;
  align-items: end;
  margin-bottom: 20px;
}

.product-proof-head p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

.product-proof-head h2 {
  margin: 0;
}

.product-release {
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}

.product-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.product-proof-grid article {
  min-height: 164px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 10px 30px rgba(4, 31, 43, 0.12);
}

.product-proof-grid b {
  color: var(--brand);
  font-size: 14px;
}

.product-proof-grid h3 {
  margin: 16px 0 8px;
  font-size: 18px;
}

.product-proof-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.product-boundary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  margin-top: 14px;
  padding: 14px 18px;
  border-left: 3px solid var(--brand);
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  color: var(--muted);
  font-size: 14px;
}

.product-boundary a {
  margin-left: auto;
  color: var(--brand);
  font-weight: 700;
}

@media (max-width: 860px) {
  .product-proof-head {
    grid-template-columns: 1fr;
  }

  .product-release {
    white-space: normal;
  }

  .product-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-boundary a {
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  .product-proof-grid {
    grid-template-columns: 1fr;
  }

  .product-proof-grid article {
    min-height: 0;
  }
}


/* Product-first landing hero */
.hero.hero-product-intro {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(620px, 0.97fr);
  align-items: center;
  min-height: min(820px, calc(100vh - 146px));
  margin-top: 0;
  padding-top: clamp(56px, 8vh, 112px);
  padding-bottom: clamp(56px, 8vh, 112px);
  overflow: hidden;
}

.hero-product-copy {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.hero-product-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 36px;
  padding: 11px 18px;
  border: 1px solid rgba(86, 131, 255, 0.5);
  border-radius: 999px;
  background: rgba(31, 40, 77, 0.62);
  color: #aeb8ff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 8px 26px rgba(43, 67, 188, 0.18);
}

.hero-product-badge i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7584ff;
  box-shadow: 0 0 18px rgba(117, 132, 255, 0.95);
}

.hero-product-copy h1 {
  display: grid;
  gap: 0;
  margin: 0 0 30px;
  color: #fff;
  font-size: clamp(46px, 5.1vw, 84px);
  line-height: 1.04;
  letter-spacing: 0;
}

.hero-product-copy h1 span {
  font-weight: 800;
}

.hero-product-copy h1 strong {
  display: inline-block;
  width: fit-content;
  padding-bottom: 8px;
  color: #37caff;
  font-weight: 900;
  background: linear-gradient(90deg, #7276ff 0%, #3a9dff 44%, #20d7d3 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border-bottom: 7px solid rgba(58, 196, 255, 0.3);
}

.hero-product-list {
  display: grid;
  gap: 10px;
  margin: 0 0 28px;
  color: #b6c4d7;
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.5;
}

.hero-product-list p {
  margin: 0;
}

.hero-product-list b {
  color: #fff;
  font-weight: 800;
}

.hero-product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  margin: 0 0 34px;
  padding: 19px 28px;
  border: 1px solid rgba(138, 161, 218, 0.24);
  border-radius: 12px;
  background: rgba(19, 24, 38, 0.66);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
  color: #8391aa;
  font-size: 15px;
}

.hero-product-meta b {
  margin-left: 6px;
  color: #eef6ff;
  font-size: 17px;
}

.hero-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-product-actions .button {
  min-width: 150px;
  text-align: center;
}

.hero-product-cards {
  position: relative;
  z-index: 2;
  min-height: 620px;
}

.hero-float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 15px;
  width: 220px;
  padding: 18px 20px;
  border: 1px solid rgba(105, 148, 217, 0.35);
  border-radius: 18px;
  background: rgba(28, 40, 62, 0.88);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
}

.hero-float-card i {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, #6d69ff, #27c7f2);
  color: #fff;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(48, 150, 255, 0.26);
}

.hero-float-card div {
  display: grid;
  gap: 4px;
}

.hero-float-card b {
  color: #fff;
  font-size: 16px;
}

.hero-float-card span {
  color: #a7b5c9;
  font-size: 13px;
}

.card-sync { top: 6%; right: 31%; }
.card-batch { top: 19%; right: -1%; }
.card-library { top: 43%; left: 6%; }
.card-upload { top: 49%; right: 4%; }
.card-files { bottom: 6%; left: 13%; }
.card-retry { bottom: 3%; right: -2%; }

@media (max-width: 1100px) {
  .hero.hero-product-intro {
    grid-template-columns: minmax(0, 1fr) minmax(440px, 0.82fr);
  }

  .hero-float-card {
    width: 195px;
    padding: 15px;
  }
}

@media (max-width: 860px) {
  .hero.hero-product-intro {
    display: block;
    min-height: 0;
    padding-top: 72px;
    padding-bottom: 56px;
  }

  .hero-product-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-height: 0;
    margin-top: 34px;
  }

  .hero-float-card {
    position: static;
    width: auto;
  }
}

@media (max-width: 560px) {
  .hero-product-copy h1 {
    font-size: 43px;
  }

  .hero-product-badge {
    margin-bottom: 26px;
    font-size: 13px;
  }

  .hero-product-list {
    font-size: 16px;
  }

  .hero-product-meta {
    gap: 12px;
    padding: 16px;
  }

  .hero-product-cards {
    grid-template-columns: 1fr;
  }
}


/* Keep the product promise and capability cards comfortably inside wide screens. */
@media (min-width: 861px) {
  .hero.hero-product-intro {
    padding-left: clamp(30px, 4vw, 72px);
    padding-right: clamp(30px, 4vw, 72px);
  }

  .card-batch { right: 3%; }
  .card-retry { right: 3%; }
}


/* Membership and changelog */
.release-timeline,
.membership-section {
    position: relative;
    z-index: 1;
}

.release-stream {
    position: relative;
    max-width: 920px;
    margin: 36px auto 0;
    padding: 6px 0 4px 38px;
}

.release-stream::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 10px;
    width: 2px;
    background: linear-gradient(180deg, #30d5d1 0%, #4779f4 55%, rgba(71, 121, 244, 0.1) 100%);
}

.release-item {
    position: relative;
    margin-bottom: 22px;
    padding: 24px 26px;
    background: rgba(16, 30, 47, 0.8);
    border: 1px solid rgba(86, 157, 219, 0.28);
    border-radius: 8px;
}

.release-item.latest {
    border-color: rgba(43, 212, 203, 0.62);
    box-shadow: 0 14px 36px rgba(4, 23, 42, 0.2);
}

.release-dot {
    position: absolute;
    top: 28px;
    left: -35px;
    width: 16px;
    height: 16px;
    border: 4px solid #0d1d31;
    border-radius: 50%;
    background: #4b7eff;
    box-shadow: 0 0 0 4px rgba(75, 126, 255, 0.2), 0 0 18px rgba(45, 205, 196, 0.56);
}

.release-content h3 {
    margin: 0 0 8px;
    color: #f4f8ff;
    font-size: 23px;
}

.release-content p {
    margin: 0 0 13px;
    color: #9bb1c8;
}

.release-content ul,
.membership-card ul {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.release-content li,
.membership-card li {
    position: relative;
    padding-left: 22px;
    color: #d2dfeb;
    line-height: 1.65;
}

.release-content li::before,
.membership-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #31d3bd;
    font-weight: 800;
}

.release-tag,
.membership-recommended {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin-bottom: 10px;
    padding: 2px 11px;
    border: 1px solid rgba(57, 216, 205, 0.6);
    border-radius: 999px;
    color: #60e7dc;
    background: rgba(28, 172, 169, 0.13);
    font-size: 13px;
    font-weight: 700;
}

.membership-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 36px;
}

.membership-card {
    position: relative;
    display: flex;
    min-height: 440px;
    flex-direction: column;
    padding: 28px 25px 24px;
    overflow: hidden;
    background: rgba(16, 30, 47, 0.84);
    border: 1px solid rgba(86, 157, 219, 0.28);
    border-radius: 8px;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.membership-card:hover {
    transform: translateY(-4px);
    border-color: rgba(47, 209, 204, 0.7);
    box-shadow: 0 18px 40px rgba(3, 19, 36, 0.35);
}

.membership-card.recommended {
    border-color: rgba(52, 204, 216, 0.85);
    box-shadow: inset 0 3px 0 #3cced8, 0 15px 40px rgba(13, 102, 142, 0.18);
}

.membership-card.lifetime {
    border-color: rgba(242, 179, 65, 0.6);
}

.membership-name {
    margin: 0;
    color: #edf4ff;
    font-size: 22px;
    font-weight: 800;
}

.membership-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 16px 0 25px;
    color: #9cb5ce;
}

.membership-price strong {
    color: #42cfea;
    font-size: 54px;
    line-height: 1;
    letter-spacing: 0;
}

.membership-card.lifetime .membership-price strong {
    color: #f5ba55;
}

.membership-price span {
    font-size: 14px;
}

.membership-card ul {
    flex: 1;
}

.membership-action,
.membership-copy {
    min-height: 44px;
    margin-top: 24px;
    border: 1px solid rgba(61, 213, 210, 0.65);
    border-radius: 7px;
    color: #ecffff;
    background: #137c88;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.membership-card.recommended .membership-action {
    background: #1a9ab1;
}

.membership-card.lifetime .membership-action {
    border-color: rgba(247, 189, 85, 0.72);
    background: #825f24;
}

.membership-note {
    margin: 19px 0 0;
    color: #95aac1;
    text-align: center;
}

.membership-modal[hidden] {
    display: none;
}

.membership-modal {
    position: fixed;
    z-index: 50;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.membership-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 10, 19, 0.76);
    backdrop-filter: blur(4px);
}

.membership-dialog {
    position: relative;
    width: min(420px, 100%);
    padding: 30px;
    background: #102139;
    border: 1px solid rgba(59, 205, 204, 0.58);
    border-radius: 8px;
    box-shadow: 0 26px 75px rgba(0, 0, 0, 0.45);
}

.membership-dialog h3 {
    margin: 0 0 10px;
    color: #f5f9ff;
    font-size: 24px;
}

.membership-dialog > p:not(.eyebrow) {
    margin: 0 0 22px;
    color: #abc1d6;
}

.membership-close {
    position: absolute;
    top: 10px;
    right: 13px;
    width: 32px;
    height: 32px;
    border: 0;
    color: #a9bfd3;
    background: transparent;
    cursor: pointer;
    font-size: 27px;
    line-height: 1;
}

.membership-contact-line {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid rgba(124, 170, 208, 0.2);
    color: #b7c9dc;
}

.membership-contact-line strong {
    color: #57e1d9;
}

.membership-copy {
    width: 100%;
    margin-top: 18px;
}

@media (max-width: 840px) {
    .membership-grid {
        grid-template-columns: 1fr;
    }

    .membership-card {
        min-height: 0;
    }

    .release-stream {
        padding-left: 30px;
    }

    .release-dot {
        left: -27px;
    }
}


/* Keep membership cards within the reading width on ultrawide screens. */
.membership-section {
    overflow: hidden;
}

.membership-section .section-heading,
.membership-section .membership-grid,
.membership-section .membership-note {
    width: min(1180px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
}

.membership-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.membership-card {
    min-height: 0;
}

@media (max-width: 840px) {
    .membership-section .section-heading,
    .membership-section .membership-grid,
    .membership-section .membership-note {
        width: min(100% - 28px, 560px);
    }
}


/* Keep the four-step product workflow inside the same reading width. */
.product-proof {
    overflow: hidden;
}

.product-proof-head,
.product-proof-grid,
.product-boundary {
    width: min(1180px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
}

.product-proof-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 980px) {
    .product-proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .product-proof-head,
    .product-proof-grid,
    .product-boundary {
        width: min(100% - 28px, 560px);
    }

    .product-proof-grid {
        grid-template-columns: 1fr;
    }
}


/* Feature map and compact release history */
.feature-catalog {
    position: relative;
    overflow: hidden;
}

.feature-catalog .section-heading,
.feature-catalog-grid,
.feature-catalog-note {
    width: min(1180px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
}

.feature-catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 34px;
}

.feature-lane {
    min-height: 0;
    padding: 28px;
    background: rgba(16, 30, 47, 0.82);
    border: 1px solid rgba(86, 157, 219, 0.28);
    border-radius: 8px;
}

.feature-lane:nth-child(2) {
    border-color: rgba(45, 207, 198, 0.5);
}

.feature-lane:nth-child(3) {
    border-color: rgba(93, 136, 245, 0.45);
}

.feature-lane:nth-child(4) {
    border-color: rgba(235, 177, 77, 0.42);
}

.feature-lane-index {
    margin: 0 0 12px;
    color: #51dcd3;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
}

.feature-lane h3 {
    margin: 0 0 18px;
    color: #f2f7ff;
    font-size: 24px;
}

.feature-lane ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.feature-lane li {
    position: relative;
    padding-left: 21px;
    color: #bdcede;
    line-height: 1.65;
}

.feature-lane li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #33d4be;
    font-weight: 800;
}

.feature-catalog-note {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    padding: 14px 18px;
    color: #9cb4cb;
    background: rgba(13, 29, 47, 0.72);
    border-left: 3px solid #39d6cf;
}

.feature-catalog-note strong {
    color: #d9e8f4;
}

.feature-catalog-note span {
    width: 1px;
    min-height: 18px;
    margin: 0 8px;
    background: rgba(129, 166, 200, 0.32);
}

.compact-release-stream {
    padding-bottom: 6px;
}

.release-gap {
    position: relative;
    margin: 4px 0 20px;
    padding: 12px 26px;
    color: #9ab2ca;
    background: rgba(13, 29, 47, 0.5);
    border: 1px dashed rgba(94, 145, 193, 0.36);
    border-radius: 8px;
}

.release-gap .release-dot {
    top: 18px;
}

.release-gap strong {
    display: block;
    color: #67dfd6;
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0;
}

.release-gap p {
    margin: 4px 0 0;
}

.release-history[hidden] {
    display: none;
}

.release-history-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 214px;
    min-height: 46px;
    margin: 8px auto 0;
    padding: 0 18px;
    border: 1px solid rgba(91, 127, 243, 0.6);
    border-radius: 7px;
    color: #aebdff;
    background: rgba(38, 53, 123, 0.25);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.release-history-toggle:hover {
    color: #f2f7ff;
    border-color: rgba(83, 219, 209, 0.85);
}

@media (max-width: 760px) {
    .feature-catalog .section-heading,
    .feature-catalog-grid,
    .feature-catalog-note {
        width: min(100% - 28px, 560px);
    }

    .feature-catalog-grid {
        grid-template-columns: 1fr;
    }

    .feature-lane {
        padding: 23px 20px;
    }
}


/* Tutorial hub */
.tutorial-center{position:relative;overflow:hidden}.tutorial-center .section-heading,.tutorial-filter,.tutorial-grid,.tutorial-help-strip{width:min(1180px,calc(100% - 40px));margin-left:auto;margin-right:auto}.tutorial-filter{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}.tutorial-filter button{min-height:38px;padding:0 15px;border:1px solid rgba(96,145,191,.38);border-radius:7px;color:#a9bfd3;background:rgba(13,29,47,.72);cursor:pointer;font:inherit;font-size:14px;font-weight:700}.tutorial-filter button.is-active,.tutorial-filter button:hover{border-color:rgba(48,218,207,.72);color:#e7ffff;background:rgba(19,132,143,.42)}.tutorial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}.tutorial-card{display:grid;grid-template-columns:minmax(190px,.72fr) minmax(0,1fr);min-height:270px;overflow:hidden;background:rgba(16,30,47,.84);border:1px solid rgba(86,157,219,.3);border-radius:8px}.tutorial-card[hidden]{display:none}.tutorial-preview{display:flex;min-height:100%;flex-direction:column;justify-content:center;gap:11px;padding:24px;background:linear-gradient(145deg,rgba(27,65,88,.88),rgba(13,27,45,.96));border-right:1px solid rgba(93,164,209,.25)}.tutorial-preview:before{content:"";width:46px;height:5px;border-radius:5px;background:#36d6cb;box-shadow:0 0 16px rgba(54,214,203,.6)}.tutorial-preview span{color:#77e7dc;font-size:13px;font-weight:800}.tutorial-preview b{color:#eef8ff;font-size:20px;line-height:1.3}.tutorial-preview i{color:#9cb7cf;font-size:14px;font-style:normal}.tutorial-card:nth-child(3n+2) .tutorial-preview{background:linear-gradient(145deg,rgba(22,80,83,.9),rgba(13,27,45,.96))}.tutorial-card:nth-child(3n) .tutorial-preview{background:linear-gradient(145deg,rgba(31,56,105,.88),rgba(13,27,45,.96))}.tutorial-card-body{padding:24px}.tutorial-category{margin:0 0 8px;color:#40d5c6;font-size:13px;font-weight:800}.tutorial-card h3{margin:0 0 10px;color:#f3f8ff;font-size:21px;line-height:1.35}.tutorial-card-body>p:not(.tutorial-category){margin:0;color:#afc1d3;line-height:1.65}.tutorial-card details{margin-top:17px;border-top:1px solid rgba(123,164,200,.2)}.tutorial-card summary{padding-top:13px;color:#81e1d8;cursor:pointer;font-weight:800}.tutorial-card ol{display:grid;gap:8px;margin:13px 0 0;padding-left:22px;color:#bdcede;line-height:1.6}.tutorial-help-strip{margin-top:18px;padding:15px 18px;color:#a9bfd0;background:rgba(13,29,47,.72);border-left:3px solid #39d6cf}.tutorial-help-strip strong{color:#e3f3ff}@media(max-width:900px){.tutorial-grid{grid-template-columns:1fr}}@media(max-width:600px){.tutorial-center .section-heading,.tutorial-filter,.tutorial-grid,.tutorial-help-strip{width:min(100% - 28px,560px)}.tutorial-card{grid-template-columns:1fr}.tutorial-preview{min-height:150px;border-right:0;border-bottom:1px solid rgba(93,164,209,.25)}.tutorial-card-body{padding:21px 19px}}


/* Detailed tutorial article */
.detail-tutorial{position:relative;overflow:hidden}.detail-tutorial-inner{width:min(980px,calc(100% - 40px));margin:0 auto}.detail-breadcrumb{margin:8px 0 18px;color:#67dcd1;font-size:14px}.detail-tutorial h2{margin:0;color:#f4f8ff;font-size:38px;line-height:1.24}.detail-lead{max-width:800px;margin:18px 0 0;color:#b2c5d8;font-size:18px;line-height:1.75}.detail-meta{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 34px}.detail-meta span{padding:7px 11px;border:1px solid rgba(91,151,197,.32);border-radius:7px;color:#a8c0d3;background:rgba(14,31,49,.72);font-size:14px}.detail-step{display:grid;grid-template-columns:58px minmax(0,1fr);gap:18px;margin-top:26px;padding:26px;background:rgba(16,30,47,.84);border:1px solid rgba(86,157,219,.3);border-radius:8px}.detail-step-number{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(48,218,207,.7);border-radius:50%;color:#5ce2d6;background:rgba(21,142,149,.18);font-weight:800}.detail-step h3{margin:3px 0 10px;color:#f1f7ff;font-size:23px}.detail-step p{margin:0;color:#b7c9da;line-height:1.7}.detail-step figure{margin:20px 0 0}.detail-step img{display:block;width:100%;border:1px solid rgba(84,159,206,.48);border-radius:7px;background:#081522}.detail-step figcaption{margin-top:10px;color:#8fa9c0;font-size:14px;line-height:1.6}.detail-callout{margin-top:17px;padding:15px 17px;border-left:3px solid #36d6cb;color:#bad0df;background:rgba(17,71,79,.35);line-height:1.65}.detail-callout strong{color:#81eee2}.detail-callout.warning{border-left-color:#edb64b;background:rgba(95,70,24,.25)}.detail-callout.warning strong{color:#f2c66d}.detail-notes{margin-top:25px;padding:25px;background:rgba(14,28,45,.82);border:1px solid rgba(92,131,213,.36);border-radius:8px}.detail-notes h3{margin:0 0 13px;color:#edf5ff;font-size:23px}.detail-notes ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}.detail-notes li{position:relative;padding-left:22px;color:#b8c9db;line-height:1.65}.detail-notes li:before{content:"✓";position:absolute;left:0;color:#3ad7c2;font-weight:800}.detail-back-link,.tutorial-detail-link{display:inline-flex;align-items:center;justify-content:center;min-height:42px;margin-top:22px;padding:0 16px;border:1px solid rgba(59,211,204,.6);border-radius:7px;color:#dffffb;background:rgba(16,120,132,.34);font-weight:800}.tutorial-detail-link{margin-top:18px;text-decoration:none;font-size:14px}@media(max-width:650px){.detail-tutorial-inner{width:min(100% - 28px,560px)}.detail-tutorial h2{font-size:30px}.detail-lead{font-size:16px}.detail-step{grid-template-columns:1fr;padding:21px 18px}.detail-step-number{width:38px;height:38px}.detail-step h3{font-size:20px}}


.tutorial-card-link{cursor:pointer;transition:transform 180ms ease,border-color 180ms ease,box-shadow 180ms ease}.tutorial-card-link:hover,.tutorial-card-link:focus{transform:translateY(-3px);border-color:rgba(54,214,203,.78);box-shadow:0 16px 34px rgba(4,21,39,.34);outline:none}.tutorial-open-page{display:inline-flex;align-items:center;gap:7px;margin-top:17px;color:#69e4d8;font-weight:800;text-decoration:none}.tutorial-open-page:after{content:"→";font-size:18px}.topic-page-steps{display:grid;gap:13px;margin:0;padding:0;list-style:none}.topic-page-steps li{display:flex;gap:13px;align-items:flex-start;color:#bed0df;line-height:1.65}.topic-page-steps span{display:grid;flex:0 0 auto;place-items:center;width:30px;height:30px;border:1px solid rgba(52,213,200,.65);border-radius:50%;color:#70e6da;background:rgba(21,142,149,.16);font-size:12px;font-weight:800}.tutorial-page-mode .site-header{position:relative}.tutorial-page-mode main{min-height:70vh}.tutorial-page-mode .detail-tutorial{padding-top:72px}.tutorial-page-mode .detail-tutorial-inner{padding-bottom:80px}

/* Detailed articles only render on their routed tutorial page. */
body:not(.tutorial-page-mode) .detail-tutorial{display:none!important}


/* Avoid showing the homepage briefly before a routed tutorial is rendered. */
html.tutorial-route-loading main { visibility: hidden; }
html.tutorial-route-loading body.tutorial-page-mode main { visibility: visible; }


/* Keep the homepage from flashing at the wrong offset while returning to tutorials. */
html.tutorial-center-loading main { visibility: hidden; }


/* Expanded tutorial pages */
.tutorial-expanded{max-width:1040px}
.guide-route{margin:28px 0;padding:20px 22px;border:1px solid rgba(44,221,218,.3);border-radius:10px;background:rgba(10,38,54,.75)}
.guide-route>p{margin:0 0 14px;color:#42e4dc;font-weight:700}
.guide-route>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.guide-route span{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid rgba(90,158,232,.32);border-radius:7px;background:#102337;color:#d8e8f6}
.guide-route b{color:#31dad2;font-size:12px}
.guide-route i{color:#45dfd8;font-style:normal;font-size:18px}
.guide-steps{display:grid;gap:16px;margin:28px 0}
.guide-step-card{display:grid;grid-template-columns:76px 1fr;gap:20px;padding:24px;border:1px solid rgba(83,148,218,.35);border-radius:10px;background:rgba(14,32,49,.82)}
.guide-step-card .detail-step-number{margin:0}
.guide-step-card p:first-child{margin:0 0 6px;color:#45ddd6;font-size:13px;font-weight:700}
.guide-step-card h3{margin:0 0 10px;font-size:22px}
.guide-step-card p:last-child{margin:0;color:#b7c8d9;line-height:1.8}
.tutorial-expanded .detail-notes li{margin:9px 0}
@media (max-width:720px){.guide-route{padding:16px}.guide-route i{display:none}.guide-route>div{display:grid;grid-template-columns:1fr}.guide-step-card{grid-template-columns:52px 1fr;gap:12px;padding:18px}.guide-step-card h3{font-size:19px}}


/* Generic tutorial pages stay hidden until their screenshot-led content is complete. */
body.tutorial-page-mode #genericTutorialArticle{visibility:hidden}
body.tutorial-page-mode #genericTutorialArticle.tutorial-complete{visibility:visible}
.tutorial-screenshot{margin:28px 0;align-items:start}
.tutorial-screenshot h3{margin:0 0 14px}
.tutorial-screenshot img{display:block;width:100%;max-width:900px;border:1px solid rgba(72,213,213,.42);border-radius:8px;background:#0d1d2c}
.tutorial-screenshot p:last-child{margin:14px 0 0;color:#aebfd0;line-height:1.75}
.tutorial-image-kicker{margin:0 0 5px!important;color:#42e4dc!important;font-size:13px!important;font-weight:700}


/* Dynamic homepage catalog must never appear ahead of a routed tutorial article. */
body.tutorial-page-mode #featureCatalog{display:none!important}

.tutorial-screenshot img{max-width:1280px!important;width:100%!important}.tutorial-screenshot{max-width:1280px;margin-left:auto;margin-right:auto}


/* Four-tier membership layout. */
.membership-section .section-heading,
.membership-section .membership-grid,
.membership-section .membership-note {
    width: min(1480px, calc(100% - 40px));
}

.membership-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.membership-card-free {
    cursor: default;
}

.membership-free-tag {
    margin: 0 0 20px;
    color: #4ee6d7;
    font-size: 1.1rem;
    font-weight: 800;
}

@media (max-width: 1180px) {
    .membership-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 840px) {
    .membership-grid {
        grid-template-columns: 1fr;
    }
}


/* Keep plan descriptions compact; only the action area absorbs the card height. */
.membership-card ul {
    flex: 0;
}

.membership-card .membership-action {
    margin-top: auto;
}


/* Align the plan headings and their pricing blocks across all four cards. */
.membership-cycle-tag {
    min-height: 26px;
    margin: 8px 0 10px;
    color: #4ee6d7;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 26px;
}


.membership-free-price strong {
    font-size: 42px;
}


/* Community QR entry below the download area. */
.community-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 44px;
    width: min(920px, calc(100% - 40px));
    margin: 0 auto;
    padding: 34px 42px;
    background: rgba(16, 30, 47, 0.84);
    border: 1px solid rgba(61, 213, 210, 0.46);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(3, 19, 36, 0.26);
}

.community-copy h2 {
    margin: 10px 0 14px;
    color: #edf4ff;
    font-size: clamp(1.65rem, 3vw, 2.25rem);
}

.community-copy p {
    max-width: 510px;
    margin: 0;
    color: #b8cbe0;
    line-height: 1.8;
}

.community-copy .community-tip {
    margin-top: 10px;
    color: #4ee6d7;
    font-weight: 700;
}

.community-qr {
    display: block;
    width: min(245px, 34vw);
    flex: 0 0 auto;
    border: 8px solid #f7fafc;
    border-radius: 8px;
    background: #f7fafc;
}

@media (max-width: 680px) {
    .community-card {
        flex-direction: column;
        gap: 26px;
        width: min(100% - 28px, 560px);
        padding: 28px 22px;
        text-align: center;
    }

    .community-qr {
        width: min(260px, 72vw);
    }
}