@font-face {
  font-family: "SiteSerif";
  src: local("Songti SC"), local("STSong");
}

:root {
  --paper: #050505;
  --paper-soft: #0d0f0d;
  --ink: #f4f4ef;
  --muted: #a3aaa4;
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.22);
  --green: #10a37f;
  --green-dark: #30d6ad;
  --gold: #d7bd7f;
  --card: rgba(18, 20, 18, 0.78);
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.38);
  --radius-lg: 34px;
  --radius-md: 22px;
  --radius-sm: 14px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(circle at 20% 8%, rgba(16, 163, 127, 0.22), transparent 30%),
    radial-gradient(circle at 84% 16%, rgba(255, 255, 255, 0.08), transparent 28%),
    linear-gradient(180deg, #050505 0%, #0a0d0b 48%, #050505 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

.site-shell {
  min-height: 100vh;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(18px, 4vw, 56px);
  backdrop-filter: blur(18px);
  background: rgba(5, 5, 5, 0.78);
  border-bottom: 1px solid var(--line);
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.site-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #fffaf0;
  background: var(--green);
  border-radius: 13px;
  font-weight: 900;
}

.site-links {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.site-links a {
  padding: 10px 14px;
  border-radius: 999px;
}

.site-links a:hover,
.site-links a.active {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
}

.site-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.btn.primary {
  color: #03120e;
  border-color: var(--green);
  background: var(--green);
}

.btn.dark {
  color: var(--ink);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.08);
}

.hero {
  padding: 82px clamp(18px, 5vw, 72px) 48px;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  color: var(--green-dark);
  background: rgba(16, 163, 127, 0.12);
  border: 1px solid rgba(16, 163, 127, 0.3);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.hero h1,
.page-hero h1 {
  max-width: 980px;
  margin: 24px auto 18px;
  font-family: "SiteSerif", "PingFang SC", serif;
  font-size: clamp(38px, 6.2vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.07em;
}

.hero p,
.page-hero p {
  max-width: 760px;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.75;
  font-weight: 650;
}

.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero-board {
  width: min(1120px, calc(100% - 36px));
  margin: 28px auto 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: var(--shadow);
}

.board-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
}

.mock-canvas,
.mock-panel {
  min-height: 310px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 29, 24, 0.05) 1px, transparent 1px),
    rgba(9, 10, 9, 0.88);
  background-size: 34px 34px;
  overflow: hidden;
  position: relative;
}

.cabinet-line {
  position: absolute;
  left: 13%;
  right: 10%;
  top: 44%;
  height: 90px;
  border: 3px solid var(--ink);
  border-radius: 4px;
  background: rgba(16, 163, 127, 0.12);
}

.cabinet-line::before,
.cabinet-line::after {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 3px;
  background: var(--ink);
}

.cabinet-line::before {
  left: 33%;
}

.cabinet-line::after {
  left: 66%;
}

.mock-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--paper-soft);
}

.panel-pill,
.limit-row,
.feature-card,
.price-card,
.faq-card {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius-md);
}

.panel-pill {
  padding: 16px 18px;
  font-weight: 900;
}

.limit-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.section {
  padding: 58px clamp(18px, 5vw, 72px);
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto 22px;
}

.section-head h2 {
  margin: 0;
  font-family: "SiteSerif", "PingFang SC", serif;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.07em;
}

.section-head p {
  max-width: 470px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 650;
}

.feature-grid,
.price-grid,
.faq-grid,
.steps-grid {
  display: grid;
  max-width: 1180px;
  margin: 0 auto;
  gap: 16px;
}

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

.price-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

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

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

.feature-card,
.price-card,
.faq-card,
.step-card {
  padding: 24px;
}

.feature-card h3,
.price-card h3,
.faq-card h3,
.step-card h3 {
  margin: 0 0 12px;
  font-size: 22px;
  letter-spacing: -0.04em;
}

.feature-card p,
.faq-card p,
.step-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 620;
}

.step-card {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: rgba(255, 252, 244, 0.52);
}

.step-number {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  place-items: center;
  border-radius: 999px;
  color: #fffaf0;
  background: var(--ink);
  font-weight: 900;
}

.page-hero {
  padding: 74px clamp(18px, 5vw, 72px) 28px;
  text-align: center;
}

.price-card {
  position: relative;
  display: flex;
  min-height: 520px;
  flex-direction: column;
  padding: 28px;
}

.price-card.featured {
  border-color: rgba(13, 127, 98, 0.42);
  background: #fffdf6;
  box-shadow: var(--shadow);
}

.badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--green-dark);
  background: rgba(13, 127, 98, 0.1);
  font-size: 12px;
  font-weight: 900;
}

.price {
  margin: 18px 0 8px;
  font-family: "SiteSerif", "PingFang SC", serif;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.06em;
}

.price small {
  color: var(--muted);
  font-family: inherit;
  font-size: 17px;
}

.price-card p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 650;
}

.feature-list {
  display: grid;
  gap: 12px;
  margin: 18px 0 24px;
  padding: 0;
  list-style: none;
}

.feature-list li {
  position: relative;
  padding-left: 25px;
  color: var(--ink);
  line-height: 1.55;
  font-weight: 780;
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--green);
}

.price-card .btn {
  margin-top: auto;
  width: 100%;
}

.compare-table {
  width: min(1180px, calc(100% - 36px));
  margin: 28px auto 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 252, 244, 0.65);
}

.compare-row {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  border-top: 1px solid var(--line);
}

.compare-row:first-child {
  border-top: 0;
  background: rgba(23, 29, 24, 0.04);
}

.compare-row span {
  padding: 16px;
  border-left: 1px solid var(--line);
  font-weight: 800;
}

.compare-row span:first-child {
  border-left: 0;
  color: var(--muted);
}

.site-footer {
  margin-top: 58px;
  padding: 36px clamp(18px, 5vw, 72px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: rgba(23, 29, 24, 0.035);
}

.footer-inner {
  display: flex;
  max-width: 1180px;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.footer-inner strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
}

.filing {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 18px;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 920px) {
  .site-nav {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-links,
  .site-actions {
    width: 100%;
    overflow-x: auto;
  }

  .board-inner,
  .feature-grid,
  .price-grid,
  .faq-grid,
  .steps-grid {
    grid-template-columns: 1fr;
  }

  .section-head,
  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .filing {
    justify-content: flex-start;
  }

  .compare-row {
    grid-template-columns: 1fr;
  }

  .compare-row span {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .compare-row span:first-child {
    border-top: 0;
  }
}

@media (max-width: 560px) {
  .hero {
    padding-top: 52px;
  }

  .hero h1,
  .page-hero h1 {
    font-size: 48px;
  }

  .btn {
    width: 100%;
  }
}

/* Unified public site themes: follows workbench dark/light color system */
:root {
  --paper: #212121;
  --paper-soft: #2a2a2a;
  --ink: #f5f5f5;
  --muted: #bdbdbd;
  --line: rgba(255, 255, 255, 0.18);
  --line-strong: rgba(255, 255, 255, 0.42);
  --green: #f5f5f5;
  --green-dark: #f5f5f5;
  --gold: #d8d8d8;
  --card: #2f2f2f;
  --control: #303030;
  --control-hover: #3b3b3b;
  --primary-bg: #f5f5f5;
  --primary-text: #111111;
  --grid-line: rgba(255, 255, 255, 0.055);
  --shadow: none;
}

body.theme-light {
  --paper: #eef1ed;
  --paper-soft: #f4f7f2;
  --ink: #18201c;
  --muted: #69736d;
  --line: #d9dfd7;
  --line-strong: #bfc9c1;
  --green: #18201c;
  --green-dark: #18201c;
  --gold: #69736d;
  --card: #fbfcf9;
  --control: #fbfcf9;
  --control-hover: #f4f7f2;
  --primary-bg: #18201c;
  --primary-text: #fbfcf9;
  --grid-line: rgba(24, 32, 28, 0.08);
  --shadow: none;
}

body {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

.site-nav {
  background: color-mix(in srgb, var(--paper) 86%, transparent) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

.site-mark {
  background: var(--primary-bg) !important;
  color: var(--primary-text) !important;
}

.site-links,
.hero p,
.page-hero p,
.section-head p,
.feature-card p,
.faq-card p,
.step-card p,
.price-card p,
.price small,
.compare-row span:first-child,
.site-footer,
.filing,
.limit-row {
  color: var(--muted) !important;
}

.site-links a:hover,
.site-links a.active {
  color: var(--ink) !important;
  background: var(--control-hover) !important;
}

.btn,
.btn.dark,
.site-theme-toggle {
  background: var(--control) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease !important;
}

.btn:hover,
.btn.dark:hover,
.site-theme-toggle:hover {
  background: var(--control-hover) !important;
  border-color: var(--line-strong) !important;
}

.btn.primary {
  background: var(--primary-bg) !important;
  color: var(--primary-text) !important;
  border-color: var(--primary-bg) !important;
}

.eyebrow {
  color: var(--ink) !important;
  background: var(--control) !important;
  border-color: var(--line) !important;
}

.hero-board,
.panel-pill,
.limit-row,
.feature-card,
.price-card,
.faq-card,
.step-card,
.compare-table {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

.price-card.featured {
  background: var(--card) !important;
  border-color: var(--line-strong) !important;
}

.mock-canvas,
.mock-panel {
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    var(--paper-soft) !important;
  background-size: 34px 34px !important;
  border-color: var(--line) !important;
}

.cabinet-line {
  border-color: var(--ink) !important;
  background: transparent !important;
}

.cabinet-line::before,
.cabinet-line::after {
  background: var(--ink) !important;
}

.step-number,
.badge,
.feature-list li::before {
  background: var(--primary-bg) !important;
  color: var(--primary-text) !important;
}

.badge {
  border: 1px solid var(--line) !important;
}

.feature-list li {
  color: var(--ink) !important;
}

.compare-row,
.compare-row span {
  border-color: var(--line) !important;
}

.compare-row:first-child {
  background: var(--control) !important;
}

.site-footer {
  background: var(--paper-soft) !important;
  border-color: var(--line) !important;
}

.footer-inner strong {
  color: var(--ink) !important;
}

/* Public pages proportion pass: closer to the referenced ChatGPT-style layout, content unchanged */
.site-shell {
  min-height: 100vh;
}

.site-nav {
  min-height: 92px !important;
  padding: 0 clamp(28px, 4.2vw, 56px) !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr) !important;
  gap: 24px !important;
  align-items: center !important;
}

.site-brand {
  justify-self: start;
  gap: 12px !important;
  font-size: 18px !important;
  letter-spacing: -0.035em !important;
}

.site-mark {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  font-size: 17px !important;
}

.site-links {
  justify-self: center;
  gap: clamp(22px, 3.2vw, 46px) !important;
  font-size: 16px !important;
  font-weight: 560 !important;
  letter-spacing: -0.01em !important;
}

.site-links a {
  padding: 8px 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.site-links a:hover,
.site-links a.active {
  background: transparent !important;
  color: var(--ink) !important;
}

.site-actions {
  justify-self: end;
  gap: 12px !important;
}

.site-actions .btn {
  min-height: 48px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  letter-spacing: -0.015em !important;
}

.site-theme-toggle {
  min-width: 72px !important;
}

.hero,
.page-hero {
  min-height: calc(100vh - 92px) !important;
  padding: clamp(78px, 10vh, 116px) clamp(20px, 5vw, 72px) 72px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.eyebrow {
  margin-bottom: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 18px !important;
  font-weight: 520 !important;
  letter-spacing: -0.02em !important;
}

.hero h1,
.page-hero h1 {
  max-width: 1080px !important;
  margin: 0 auto 30px !important;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  font-size: clamp(54px, 7.5vw, 116px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.085em !important;
  font-weight: 760 !important;
}

.hero p,
.page-hero p {
  max-width: 860px !important;
  margin: 0 auto !important;
  font-size: clamp(19px, 2vw, 25px) !important;
  line-height: 1.62 !important;
  font-weight: 540 !important;
  letter-spacing: -0.025em !important;
}

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

.hero-actions .btn {
  min-height: 52px !important;
  padding: 0 28px !important;
  font-size: 17px !important;
  font-weight: 650 !important;
}

.hero-board {
  width: min(1180px, calc(100% - 56px)) !important;
  margin: 0 auto 74px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.board-inner {
  grid-template-columns: 1.35fr 0.65fr !important;
  gap: 22px !important;
}

.mock-canvas,
.mock-panel {
  min-height: 360px !important;
  border-radius: 28px !important;
  background-size: 36px 36px !important;
}

.mock-panel {
  padding: 26px !important;
  gap: 14px !important;
}

.panel-pill,
.limit-row {
  border-radius: 18px !important;
  font-size: 16px !important;
}

.section {
  padding: 96px clamp(24px, 5vw, 72px) !important;
}

.section-head {
  max-width: 1180px !important;
  margin-bottom: 34px !important;
  align-items: flex-end !important;
}

.section-head h2 {
  max-width: 720px !important;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  font-size: clamp(42px, 5.4vw, 78px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.075em !important;
  font-weight: 760 !important;
}

.section-head p {
  max-width: 430px !important;
  font-size: 18px !important;
  line-height: 1.62 !important;
  font-weight: 520 !important;
  letter-spacing: -0.02em !important;
}

.feature-grid,
.price-grid,
.faq-grid,
.steps-grid {
  max-width: 1180px !important;
  gap: 18px !important;
}

.feature-card,
.price-card,
.faq-card,
.step-card {
  padding: 30px !important;
  border-radius: 28px !important;
}

.feature-card h3,
.price-card h3,
.faq-card h3,
.step-card h3 {
  margin-bottom: 14px !important;
  font-size: 25px !important;
  line-height: 1.18 !important;
  font-weight: 740 !important;
  letter-spacing: -0.055em !important;
}

.feature-card p,
.faq-card p,
.step-card p,
.price-card p {
  font-size: 16px !important;
  line-height: 1.68 !important;
  font-weight: 520 !important;
  letter-spacing: -0.015em !important;
}

.price-card {
  min-height: 560px !important;
}

.price {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  font-size: 54px !important;
  font-weight: 760 !important;
  letter-spacing: -0.075em !important;
}

.feature-list li,
.compare-row span {
  font-size: 16px !important;
  font-weight: 620 !important;
  letter-spacing: -0.015em !important;
}

.compare-table {
  margin-top: 34px !important;
  border-radius: 28px !important;
}

.site-footer {
  margin-top: 42px !important;
  padding: 44px clamp(28px, 5vw, 72px) !important;
}

.footer-inner {
  max-width: 1180px !important;
}

@media (max-width: 920px) {
  .site-nav {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    padding: 18px 20px !important;
  }

  .site-brand,
  .site-links,
  .site-actions {
    justify-self: stretch !important;
  }

  .site-links {
    justify-content: flex-start !important;
    gap: 22px !important;
  }

  .hero,
  .page-hero {
    min-height: auto !important;
    padding-top: 72px !important;
  }

  .hero h1,
  .page-hero h1 {
    font-size: clamp(46px, 13vw, 72px) !important;
  }

  .hero p,
  .page-hero p {
    font-size: 18px !important;
  }

  .board-inner,
  .feature-grid,
  .price-grid,
  .faq-grid,
  .steps-grid {
    grid-template-columns: 1fr !important;
  }

  .section-head {
    align-items: flex-start !important;
  }
}

/* Public pages refinement: lighter header and calmer Chinese headline scale */
.site-nav {
  border-bottom: 0 !important;
  min-height: 88px !important;
}

.site-brand {
  font-size: 17px !important;
  font-weight: 720 !important;
  letter-spacing: -0.025em !important;
}

.site-links {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
}

.site-actions .btn {
  min-height: 44px !important;
  padding: 0 22px !important;
  font-size: 15px !important;
  font-weight: 560 !important;
}

.hero,
.page-hero {
  min-height: calc(100vh - 88px) !important;
  padding-top: clamp(72px, 9vh, 104px) !important;
}

.eyebrow {
  margin-bottom: 34px !important;
  font-size: 16px !important;
  font-weight: 480 !important;
}

.hero h1,
.page-hero h1 {
  max-width: 1040px !important;
  font-size: clamp(48px, 6.1vw, 88px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.07em !important;
  font-weight: 680 !important;
  margin-bottom: 28px !important;
}

.hero p,
.page-hero p {
  max-width: 820px !important;
  font-size: clamp(17px, 1.65vw, 21px) !important;
  line-height: 1.72 !important;
  font-weight: 460 !important;
  letter-spacing: -0.015em !important;
}

.hero-actions .btn {
  min-height: 48px !important;
  padding: 0 24px !important;
  font-size: 15px !important;
  font-weight: 560 !important;
}

@media (max-width: 920px) {
  .hero h1,
  .page-hero h1 {
    font-size: clamp(42px, 11vw, 64px) !important;
  }
}

/* Public header actions: smaller capsules and theme icon at far right */
.site-actions {
  gap: 8px !important;
}

.site-actions .btn:not(.site-theme-toggle) {
  min-height: 34px !important;
  padding: 0 15px !important;
  font-size: 13px !important;
  font-weight: 560 !important;
  border-radius: 999px !important;
}

.site-theme-toggle {
  order: 99;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: var(--control) !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.site-theme-toggle:hover {
  background: var(--control-hover) !important;
  border-color: var(--line-strong) !important;
}

.site-theme-toggle span {
  display: block;
  transform: translateY(-0.5px);
}

/* Home hero animated CAD preview */
.animated-board {
  margin-top: -24px !important;
}

.cad-preview-canvas,
.cad-preview-panel {
  isolation: isolate;
}

.cabinet-drawing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.draw-line,
.draw-dash {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: cadLineDraw 900ms cubic-bezier(0.42, 0, 0.12, 1) forwards;
}

.draw-dash {
  stroke: var(--muted);
  stroke-width: 2;
  stroke-dasharray: 0.035 0.035;
  opacity: 0.72;
  animation-name: cadDashDraw;
}

.draw-line-main { animation-delay: 180ms; }
.draw-line-left { animation-delay: 760ms; }
.draw-line-right { animation-delay: 900ms; }
.draw-line-top { animation-delay: 1080ms; }
.draw-dash-one { animation-delay: 1220ms; }
.draw-dash-two { animation-delay: 1360ms; }
.draw-dash-three { animation-delay: 1500ms; }

.draw-label {
  fill: var(--ink);
  font-size: 20px;
  font-weight: 650;
  text-anchor: middle;
  opacity: 0;
  transform: translateY(8px);
  animation: cadLabelIn 520ms ease forwards;
}

.draw-label-one { animation-delay: 1660ms; }
.draw-label-two { animation-delay: 1780ms; }
.draw-label-three { animation-delay: 1900ms; }

.cad-preview-canvas::after {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  top: 48%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink), transparent);
  opacity: 0;
  transform: scaleX(0.2);
  animation: cadSweep 900ms ease 2180ms forwards, cadPulse 4.8s ease 3.4s infinite;
}

.preview-step {
  opacity: 0;
  transform: translateY(12px);
  animation: previewStepIn 520ms ease forwards;
}

.preview-step-1 { animation-delay: 420ms; }
.preview-step-2 { animation-delay: 960ms; }
.preview-step-3 { animation-delay: 1160ms; }
.preview-step-4 { animation-delay: 1360ms; }
.preview-step-5 { animation-delay: 1560ms; }

.preview-step strong {
  color: var(--ink);
}

@keyframes cadLineDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes cadDashDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes cadLabelIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes previewStepIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cadSweep {
  to {
    opacity: 0.58;
    transform: scaleX(1);
  }
}

@keyframes cadPulse {
  0%, 76%, 100% { opacity: 0.18; transform: scaleX(0.72); }
  84% { opacity: 0.62; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .draw-line,
  .draw-dash,
  .draw-label,
  .preview-step,
  .cad-preview-canvas::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* Workflow demo animation v2 */
.workflow-demo {
  width: min(1320px, calc(100% - 56px)) !important;
  margin-top: -34px !important;
}

.workflow-demo .board-inner {
  display: block !important;
}

.workflow-stage {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 330px;
  gap: 18px;
  min-height: 520px;
}

.workflow-toolbar,
.workflow-canvas,
.workflow-side {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--card);
  overflow: hidden;
}

.workflow-toolbar {
  padding: 18px 12px;
  display: grid;
  align-content: start;
  gap: 18px;
}

.tool-group {
  display: grid;
  gap: 8px;
}

.tool-group span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 620;
}

.shape-option,
.drag-chip {
  display: grid;
  min-height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: var(--control);
  font-size: 13px;
  font-style: normal;
  font-weight: 650;
}

.shape-l,
.chip-duct,
.chip-column,
.chip-single,
.chip-double,
.chip-sink,
.chip-stove {
  animation: toolPulse 42s infinite both;
}

.shape-l { animation-delay: 0s; }
.chip-duct { animation-delay: 9s; }
.chip-column { animation-delay: 10.2s; }
.chip-single { animation-delay: 14s; }
.chip-double { animation-delay: 15.3s; }
.chip-sink { animation-delay: 16.6s; }
.chip-stove { animation-delay: 17.9s; }

.workflow-canvas {
  position: relative;
  min-height: 520px;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    var(--paper-soft) !important;
  background-size: 34px 34px !important;
}

.workflow-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dimension-popover {
  position: absolute;
  z-index: 2;
  left: 32px;
  top: 28px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  opacity: 0;
  transform: translateY(10px);
  animation: workflowShow 42s infinite both;
  animation-delay: 4s;
}

.dimension-popover span {
  color: var(--muted);
  font-size: 13px;
}

.dimension-popover strong {
  color: var(--ink);
  font-size: 14px;
}

.wf-wall,
.wf-dim,
.wf-cabinet,
.wf-wallcab,
.wf-obstacle,
.wf-summary-table rect,
.wf-summary-table line {
  fill: transparent;
  stroke: var(--ink);
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

.wf-wall,
.wf-dim {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  pathLength: 1;
  animation: workflowDraw 42s infinite both;
}

.wf-wall-main { animation-delay: 1s; }
.wf-wall-left { animation-delay: 1.6s; }
.wf-dim { stroke: var(--muted); stroke-width: 1.8; animation-delay: 4.8s; }
.wf-dim-left { animation-delay: 5.4s; }

.wf-dim-text,
.wf-label,
.wf-obstacle-label,
.wf-summary-table text {
  fill: var(--ink);
  font-size: 15px;
  font-weight: 620;
  opacity: 0;
  animation: workflowFade 42s infinite both;
}

.wf-dim-text { fill: var(--muted); animation-delay: 6s; }

.wf-obstacle,
.wf-obstacle-label {
  opacity: 0;
  animation: workflowPop 42s infinite both;
}

.wf-duct { animation-delay: 9s; }
.wf-duct-label { animation-delay: 9.25s; }
.wf-column { animation-delay: 10.2s; }
.wf-column-label { animation-delay: 10.45s; }

.wf-cabinet,
.wf-dash,
.wf-label,
.wf-wallcab {
  opacity: 0;
  animation: workflowPop 42s infinite both;
}

.wf-dash {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-dasharray: 7 7;
  vector-effect: non-scaling-stroke;
}

.cab-1, .dash-1, .label-1 { animation-delay: 14s; }
.cab-2, .dash-2, .label-2 { animation-delay: 15.2s; }
.cab-3, .dash-3, .label-3 { animation-delay: 16.4s; }
.cab-4, .dash-4, .label-4 { animation-delay: 17.6s; }
.cab-5 { animation-delay: 18.8s; }

.wf-label { white-space: pre; text-anchor: middle; }

.wf-wall-cabinets .wf-wallcab,
.wf-wall-cabinets .wf-dash,
.wf-wall-cabinets .wf-label {
  animation-delay: 24s;
}

.wallcab-2, .wall-dash-2, .wall-label-2 { animation-delay: 24.4s !important; }
.wallcab-3, .wall-dash-3, .wall-label-3 { animation-delay: 24.8s !important; }

.wf-summary-table {
  opacity: 0;
  animation: workflowPop 42s infinite both;
}

.wf-summary-table rect,
.wf-summary-table line {
  stroke: var(--line-strong);
  stroke-width: 1.4;
}

.wf-summary-table text {
  font-size: 12px;
  animation: none;
  opacity: 1;
}

.table-door { animation-delay: 30s; }
.table-cabinet { animation-delay: 31s; }
.table-hardware { animation-delay: 32s; }

.workflow-side {
  padding: 22px;
  display: grid;
  align-content: center;
  gap: 12px;
}

.workflow-step {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--control);
  opacity: 0.42;
  transform: translateX(0);
  animation: stepFocus 42s infinite both;
}

.workflow-step span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.workflow-step strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
  font-weight: 680;
  letter-spacing: -0.03em;
}

.workflow-step em {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}

.step-shape { animation-delay: 0s; }
.step-size { animation-delay: 5s; }
.step-obstacle { animation-delay: 9s; }
.step-cabinet { animation-delay: 14s; }
.step-wall { animation-delay: 24s; }
.step-finish { animation-delay: 30s; }

@keyframes workflowDraw {
  0%, 2% { stroke-dashoffset: 1; opacity: 0; }
  5%, 86% { stroke-dashoffset: 0; opacity: 1; }
  96%, 100% { opacity: 0; stroke-dashoffset: 0; }
}

@keyframes workflowFade {
  0%, 10% { opacity: 0; }
  14%, 86% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

@keyframes workflowPop {
  0%, 4% { opacity: 0; transform: translateY(10px) scale(0.985); }
  8%, 86% { opacity: 1; transform: translateY(0) scale(1); }
  96%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}

@keyframes workflowShow {
  0%, 6% { opacity: 0; transform: translateY(10px); }
  10%, 48% { opacity: 1; transform: translateY(0); }
  58%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes toolPulse {
  0%, 4%, 13%, 100% { border-color: var(--line); background: var(--control); }
  6%, 10% { border-color: var(--line-strong); background: var(--primary-bg); color: var(--primary-text); }
}

@keyframes stepFocus {
  0%, 7%, 100% { opacity: 0.42; border-color: var(--line); transform: translateX(0); }
  10%, 20% { opacity: 1; border-color: var(--line-strong); transform: translateX(-4px); }
  23%, 96% { opacity: 0.42; border-color: var(--line); transform: translateX(0); }
}

@media (max-width: 920px) {
  .workflow-stage {
    grid-template-columns: 1fr !important;
    min-height: auto;
  }

  .workflow-toolbar {
    grid-template-columns: repeat(3, 1fr);
  }

  .workflow-canvas {
    min-height: 380px;
  }

  .workflow-side {
    align-content: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workflow-demo *,
  .workflow-demo *::before,
  .workflow-demo *::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* Business layout refresh: keep the current palette and copy, tighten hierarchy. */
.page-hero {
  min-height: auto !important;
  padding: 92px clamp(24px, 5vw, 72px) 42px !important;
}

.page-hero h1 {
  max-width: 860px !important;
  margin-top: 18px !important;
  font-size: clamp(42px, 4.8vw, 68px) !important;
  line-height: 1.08 !important;
}

.page-hero p {
  max-width: 680px !important;
}

.price-grid {
  align-items: stretch !important;
  gap: 14px !important;
}

.price-card {
  min-height: 0 !important;
  padding: 26px !important;
  border-radius: 18px !important;
}

.price-card.featured {
  transform: translateY(-10px);
}

.price {
  margin: 14px 0 10px !important;
  font-size: clamp(38px, 4vw, 48px) !important;
}

.feature-list {
  gap: 10px !important;
  margin: 16px 0 22px !important;
}

.feature-list li,
.compare-row span {
  font-size: 15px !important;
}

.compare-table {
  margin-top: 18px !important;
  border-radius: 18px !important;
}

.faq-grid {
  gap: 14px !important;
}

.faq-card {
  padding: 24px !important;
  border-radius: 18px !important;
}

.section:has(.price-grid) {
  padding-top: 38px !important;
}

@media (max-width: 920px) {
  .page-hero {
    padding-top: 58px !important;
  }

  .price-card.featured {
    transform: none;
  }
}