/* Voxt-inspired visual layer: quiet monochrome layout, soft utility panels,
   and restrained color reserved for product demonstrations. */

html {
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.7;
}

.container {
  width: min(calc(100% - 48px), var(--container));
}

.section {
  padding: 112px 0;
}

.dark-section,
.light-section {
  background: var(--bg);
  color: var(--fg);
}

h1,
h2,
h3 {
  color: var(--fg-strong);
  letter-spacing: var(--tracking-tight);
  /* The reference uses 600 for every heading level; h3 was 700 here only
     because legacy.css inherits the browser default. */
  font-weight: 600;
}

h1 {
  font-size: var(--step-h1);
  line-height: 1.15;
  /* Reference h1 tracking is normal, and negative tracking does nothing good
     for CJK anyway -- it just crowds the glyph boxes. */
  letter-spacing: normal;
}

h2 {
  font-size: var(--step-h2);
  line-height: 1.24;
}

h1 em,
h2 em {
  color: var(--accent);
}

p,
.dark-section p,
.dark-section .feature-lead,
.dark-section .section-intro > p:last-child {
  color: var(--fg-muted);
}

:focus-visible {
  outline-color: var(--accent);
}

.eyebrow,
.dark-section .eyebrow {
  width: fit-content;
  gap: 8px;
  margin-bottom: 22px;
  padding: 7px 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--fg-muted);
  font-family: var(--font-tech);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  box-shadow: 0 1px 0 var(--c-black-04);
}

.eyebrow > span {
  width: 6px;
  height: 6px;
  border: 0;
  background: var(--accent);
}

.button {
  min-height: 48px;
  gap: 14px;
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 650;
  box-shadow: none;
}

.button-primary,
.button-light {
  border-color: var(--c-black);
  background: var(--c-black);
  color: var(--c-white);
}

.button-primary:hover,
.button-light:hover {
  border-color: var(--c-ink-2);
  background: var(--c-ink-2);
}

.button-ghost {
  border-color: var(--hairline);
  background: var(--bg-raised);
  color: var(--fg);
}

.button-ghost:hover {
  border-color: var(--hairline-strong);
  background: var(--bg-soft);
}

/* Header */
.site-header,
.site-header.is-scrolled,
.site-header.menu-active {
  height: var(--header-h);
  border-color: var(--hairline);
  background: var(--c-overlay);
  color: var(--fg);
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.reading-progress {
  height: 2px;
}

.reading-progress span {
  background: var(--c-black);
}

.nav-shell {
  width: min(calc(100% - 48px), var(--container));
  gap: 24px;
}

.brand {
  gap: 10px;
  color: var(--fg-strong);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.brand img {
  width: 36px;
  height: 36px;
  filter: none;
}

.desktop-nav {
  align-items: center;
  gap: 4px;
}

.nav-trigger {
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius);
  color: var(--fg-muted);
  font-size: 0.86rem;
}

.nav-dropdown:hover .nav-trigger,
.nav-dropdown:focus-within .nav-trigger,
.nav-trigger[aria-expanded="true"] {
  background: var(--bg-soft);
  color: var(--fg-strong);
}

.nav-menu,
.site-header.is-scrolled .nav-menu,
.site-header.menu-active .nav-menu {
  top: var(--header-h);
  padding: 22px max(24px, calc((100vw - var(--container)) / 2)) 28px;
  border-color: var(--hairline);
  background: var(--c-overlay);
  box-shadow: 0 24px 70px var(--c-shadow);
  backdrop-filter: blur(20px);
}

.mega-inner {
  width: min(100%, var(--container));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.mega-col {
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.mega-label {
  color: var(--fg-faint);
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.mega-link {
  min-height: 42px;
  border-radius: var(--radius-sm);
}

.mega-link:hover,
.mega-link:focus-visible {
  background: var(--bg-soft);
}

.mega-t,
.mega-link:hover .mega-t,
.mega-link:focus-visible .mega-t {
  color: var(--fg);
}

.menu-toggle {
  border-color: var(--hairline);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--fg);
}

/* Hero */
.hero {
  min-height: auto;
  padding: 154px 0 96px;
  background: var(--bg);
  color: var(--fg);
}

.hero::before {
  display: none;
}

.hero-grid {
  align-items: center;
  gap: 64px;
}

.hero-copy {
  padding-bottom: 0;
}

.hero h1 {
  max-width: 780px;
  color: var(--fg-strong);
  font-size: var(--step-h1);
}

.hero-lead,
.dark-section .hero-lead {
  margin: 28px 0 24px;
  color: var(--fg-muted);
  font-size: 1.04rem;
  line-height: 1.82;
}

.tag-list {
  margin-bottom: 32px;
}

.tag-list li {
  padding: 7px 12px;
  border-color: var(--hairline);
  background: var(--bg-soft);
  color: var(--fg-muted);
}

/* The reference site has no chromatic ornament, so the hero wash is a neutral
   tint rather than the old blue/violet/coral gradient. It overrides the
   legacy .visual-glow rule, so this is the one that matters. */
.visual-glow {
  inset: 12% -8% -8%;
  border-radius: 40%;
  background: linear-gradient(135deg, var(--decor-tint), var(--decor-tint-strong));
  filter: blur(36px);
  opacity: 0.75;
}

.product-window {
  border-color: var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  box-shadow: var(--panel-shadow-strong);
}

.product-window-hero {
  max-width: 100%;
  transform: none;
}

.window-bar {
  border-color: var(--hairline);
  background: var(--bg-soft);
  color: var(--fg-faint);
}

.window-brand,
.window-brand.dark {
  color: var(--fg);
}

.window-file {
  color: var(--fg-muted);
}

/* Anything painted on the accent needs white text, not the page foreground. */
.export-action button,
.ex-table .export-action button,
.table-row i,
.task.done i,
.task.current i,
.mini-tick i,
.step-tick,
.rule-on[aria-checked="true"]::after {
  color: var(--c-white);
}

.task.done,
.task.current {
  color: var(--fg-muted);
}

.task.current {
  color: var(--fg);
}

.window-brand,
.window-brand.dark,
:is(#data-extraction, [data-workflow-owner="data-extraction"]) .window-brand.dark,
:is(#auto-review, [data-workflow-owner="auto-review"]) .window-brand.dark,
:is(#model-review, [data-workflow-owner="model-review"]) .window-brand.dark,
:is(#drawing-processing, [data-workflow-owner="drawing-processing"]) .window-brand,
.assure-badge {
  color: var(--fg);
}

.assure-badge {
  border-color: var(--hairline-strong);
}

/* The integration diagram core sits on the light platform panel like every
   other surface; it no longer inverts its text or the brand mark. */
.diagram-core {
  border: 1px solid var(--hairline);
  background: var(--bg-raised);
  color: var(--fg);
}

.diagram-core b {
  color: var(--fg-strong);
}

.diagram-core span {
  color: var(--fg-muted);
}

.diagram-core img {
  filter: none;
}

.system-node {
  background: var(--bg-raised);
}

.system-node span,
.canvas-meta,
.canvas-meta b {
  color: var(--fg-muted);
}

.brand-dot {
  background: var(--accent);
  box-shadow: none;
}

.page-index .hero {
  padding-top: 150px;
  text-align: center;
}

.page-index .hero-grid {
  display: flex;
  max-width: var(--container);
  flex-direction: column;
  gap: 60px;
}

.page-index .hero-copy {
  display: flex;
  max-width: 980px;
  flex-direction: column;
  align-items: center;
}

.page-index .hero h1 {
  max-width: 1050px;
  font-size: var(--step-h1);
}

.page-index .hero-lead {
  max-width: 780px;
}

.page-index .tag-list,
.page-index .button-row {
  justify-content: center;
}

.page-index .hero-visual {
  width: 100%;
}

.page-index .product-window-hero {
  width: 100%;
  border-color: var(--hairline);
  background: var(--bg-raised);
}

.page-index .product-window-hero .window-bar {
  border-color: var(--hairline);
  background: var(--bg-soft);
  color: var(--fg-faint);
}

.page-index .product-window-hero .window-file {
  color: var(--fg-muted);
}

.page-index .product-window-hero .window-status {
  color: var(--fg-faint);
}

/* .result-strip appears on capability pages as well as the tool workbench, so
   the light treatment belongs on the base class, not the tool-scoped one. */
.result-strip {
  gap: 12px;
  border: 0;
  background: transparent;
}

.result-strip > div {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg-raised);
  box-shadow: var(--panel-shadow);
}

.result-strip strong {
  color: var(--accent);
}

.result-strip span {
  color: var(--fg-muted);
}

.page-index .product-window-hero .window-brand {
  color: var(--fg);
}

.page-index .hero-metrics {
  width: 100%;
  margin-top: 0;
  gap: 14px;
  border: 0;
}

.page-index .hero-metrics > div {
  padding: 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg-raised);
  text-align: left;
}

.page-index .hero-metrics > div:first-child {
  padding-left: 24px;
}

.page-index .hero-metrics strong,
.page-index .hero-metrics span {
  color: var(--fg);
}

/* Intro and overview */
.pain-section,
.review-feature,
.extraction-feature,
.industries-section {
  background: var(--bg);
}

.pain-grid {
  gap: 14px;
  border: 0;
}

.pain-card {
  min-height: 290px;
  padding: 30px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg-raised);
  box-shadow: var(--panel-shadow);
}

.pain-card:last-child {
  border-right: 1px solid var(--hairline);
}

.pain-card > span,
.capability-link > span,
.value-grid article > span {
  color: var(--fg-faint);
}

.pain-card svg {
  margin-top: 44px;
  stroke: var(--accent);
}

.capability-overview {
  background-color: var(--bg-soft);
  background-image: repeating-linear-gradient(135deg, transparent 0 16px, var(--c-black-04) 16px 17px);
}

.capability-nav {
  gap: 14px;
  border: 0;
}

.capability-link {
  min-height: 270px;
  padding: 28px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg-raised);
  box-shadow: var(--panel-shadow);
}

.capability-link:last-child {
  border-right: 1px solid var(--hairline);
}

.capability-link:hover {
  background: var(--c-black);
  color: var(--c-white);
  transform: translateY(-4px);
}

.capability-link:hover h3 {
  color: var(--c-white);
}

.capability-link i {
  border-color: var(--hairline);
}

/* Capability feature rows */
.feature-section {
  background: var(--bg);
}

.feature-section:nth-of-type(even) {
  background: var(--bg-canvas);
}

.feature-grid {
  gap: 76px;
}

.feature-copy h2,
.feature-title {
  color: var(--fg-strong);
  /* legacy.css sizes these per section (up to 4.1rem) and out-specifies the
     bare h2 rule, so the token has to be applied here too. */
  font-size: var(--step-h2);
}

.feature-lead,
.feature-lead-group p,
:is(#data-extraction, [data-workflow-owner="data-extraction"]) .section-intro > p:last-child {
  color: var(--fg-muted);
}

.feature-details,
:is(#data-extraction, [data-workflow-owner="data-extraction"]) .numbered-flow,
:is(#auto-review, [data-workflow-owner="auto-review"]) .numbered-flow {
  border-color: var(--hairline);
}

.feature-details h3,
.feature-details li,
:is(#data-extraction, [data-workflow-owner="data-extraction"]) .numbered-flow li,
:is(#auto-review, [data-workflow-owner="auto-review"]) .numbered-flow li {
  border-color: var(--hairline);
  color: var(--fg-muted);
}

.feature-visual {
  padding: 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--decor-tint);
}

:is(#data-extraction, [data-workflow-owner="data-extraction"]).extraction-feature,
:is(#drawing-processing, [data-workflow-owner="drawing-processing"]).batch-feature,
:is(#auto-review, [data-workflow-owner="auto-review"]).review-feature,
:is(#model-review, [data-workflow-owner="model-review"]).model-feature {
  background: var(--bg);
  color: var(--fg);
}

:is(#data-extraction, [data-workflow-owner="data-extraction"]) .extraction-window,
:is(#auto-review, [data-workflow-owner="auto-review"]) .audit-engine,
:is(#model-review, [data-workflow-owner="model-review"]) .model-window,
:is(#drawing-processing, [data-workflow-owner="drawing-processing"]) .product-window {
  border-color: var(--hairline);
  background: var(--bg-raised);
  box-shadow: var(--panel-shadow);
}

:is(#data-extraction, [data-workflow-owner="data-extraction"]) .extraction-window .window-bar,
:is(#auto-review, [data-workflow-owner="auto-review"]) .audit-engine .window-bar,
:is(#model-review, [data-workflow-owner="model-review"]) .model-window .window-bar,
:is(#drawing-processing, [data-workflow-owner="drawing-processing"]) .window-bar {
  border-color: var(--hairline);
  background: var(--bg-soft);
}

:is(#data-extraction, [data-workflow-owner="data-extraction"]) .window-brand.dark,
:is(#auto-review, [data-workflow-owner="auto-review"]) .window-brand.dark,
:is(#model-review, [data-workflow-owner="model-review"]) .window-brand.dark,
:is(#drawing-processing, [data-workflow-owner="drawing-processing"]) .window-brand {
  color: var(--fg);
}

:is(#data-extraction, [data-workflow-owner="data-extraction"]) .extract-drawing,
:is(#drawing-processing, [data-workflow-owner="drawing-processing"]) .visual-2d,
:is(#drawing-processing, [data-workflow-owner="drawing-processing"]) .stage-sheet,
:is(#auto-review, [data-workflow-owner="auto-review"]) .engine-column {
  background-color: var(--bg-canvas);
}

:is(#model-review, [data-workflow-owner="model-review"]) .model-canvas {
  background: radial-gradient(circle at center, var(--bg-raised), var(--bg-soft) 68%);
}

:is(#data-extraction, [data-workflow-owner="data-extraction"]) .extract-drawing,
:is(#auto-review, [data-workflow-owner="auto-review"]) .audit-column,
:is(#auto-review, [data-workflow-owner="auto-review"]) .result-preview,
:is(#model-review, [data-workflow-owner="model-review"]) .model-stats,
:is(#drawing-processing, [data-workflow-owner="drawing-processing"]) .stage-stats {
  border-color: var(--hairline);
}

:is(#data-extraction, [data-workflow-owner="data-extraction"]) .table-head,
:is(#data-extraction, [data-workflow-owner="data-extraction"]) .table-row,
:is(#data-extraction, [data-workflow-owner="data-extraction"]) .numbered-flow li,
:is(#auto-review, [data-workflow-owner="auto-review"]) .numbered-flow li,
:is(#auto-review, [data-workflow-owner="auto-review"]) .engine-column li,
:is(#auto-review, [data-workflow-owner="auto-review"]) .audit-total,
:is(#model-review, [data-workflow-owner="model-review"]) .model-stats dl div,
:is(#drawing-processing, [data-workflow-owner="drawing-processing"]) .stage-log li {
  border-color: var(--hairline);
}

:is(#data-extraction, [data-workflow-owner="data-extraction"]) .table-head,
:is(#data-extraction, [data-workflow-owner="data-extraction"]) .table-row,
:is(#data-extraction, [data-workflow-owner="data-extraction"]) .table-row b,
:is(#data-extraction, [data-workflow-owner="data-extraction"]) .mini-label,
:is(#data-extraction, [data-workflow-owner="data-extraction"]) .export-action,
:is(#auto-review, [data-workflow-owner="auto-review"]) .mini-label,
:is(#auto-review, [data-workflow-owner="auto-review"]) .engine-column ul,
:is(#auto-review, [data-workflow-owner="auto-review"]) .engine-column li span,
:is(#auto-review, [data-workflow-owner="auto-review"]) .audit-total,
:is(#auto-review, [data-workflow-owner="auto-review"]) .audit-total b,
:is(#model-review, [data-workflow-owner="model-review"]) .model-stats dt,
:is(#model-review, [data-workflow-owner="model-review"]) .model-stats dd,
:is(#drawing-processing, [data-workflow-owner="drawing-processing"]) .stage-log li,
:is(#drawing-processing, [data-workflow-owner="drawing-processing"]) .stage-stats small,
:is(#drawing-processing, [data-workflow-owner="drawing-processing"]) .stage-stats strong {
  color: var(--fg-muted);
}

:is(#data-extraction, [data-workflow-owner="data-extraction"]) .table-row b,
:is(#auto-review, [data-workflow-owner="auto-review"]) .audit-total b,
:is(#model-review, [data-workflow-owner="model-review"]) .model-stats dd,
:is(#drawing-processing, [data-workflow-owner="drawing-processing"]) .stage-stats strong {
  color: var(--fg);
}

:is(#data-extraction, [data-workflow-owner="data-extraction"]) .chip-cloud span,
:is(#model-review, [data-workflow-owner="model-review"]) .model-thumbs span,
:is(#drawing-processing, [data-workflow-owner="drawing-processing"]) .stage-rules li {
  border-color: var(--hairline);
  background: var(--bg-raised);
  color: var(--fg-muted);
}

/* Reusable content cards */
.platform-section,
.cases-section,
.faq-section,
.tool-explain,
.seo-section.light-section {
  background: var(--bg);
}

.platform-card,
.case-card,
.try-band,
.proof-inner,
.explain-grid {
  border-radius: var(--radius-lg);
}

.platform-card {
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--bg-raised);
  box-shadow: var(--panel-shadow);
}

.platform-card-dark {
  background: var(--bg-soft);
  color: var(--fg);
}

.platform-card-dark h3,
.platform-card-dark b {
  color: var(--fg-strong);
}

.platform-card-dark p,
.platform-card-dark span {
  color: var(--fg-muted);
}

.value-strip {
  padding: 104px 0;
  background: var(--bg-soft);
  color: var(--fg);
}

.value-heading h2,
.value-grid h3 {
  color: var(--fg-strong);
}

.value-heading h2 {
  font-size: var(--step-h2);
}

.value-grid {
  gap: 14px;
  border: 0;
}

.value-grid article {
  min-height: 210px;
  padding: 28px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--c-white-70);
}

.industry-grid,
.verify-grid,
.scene-grid,
.case-outcome-grid {
  gap: 14px;
  border: 0;
}

.industry-card,
.verify-card,
.scene-card,
.outcome-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg-raised);
  box-shadow: var(--panel-shadow);
}

.industry-card:last-child,
.verify-card:last-child,
.scene-card:last-child,
.outcome-card:last-child {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.industry-card h3,
.verify-card h3,
.scene-card h3,
.outcome-card h3,
:is(#data-extraction, [data-workflow-owner="data-extraction"]) .industry-card h3 {
  color: var(--fg-strong);
}

.industry-card p,
.industry-card li,
.verify-card li,
.scene-card p,
.outcome-card p,
:is(#data-extraction, [data-workflow-owner="data-extraction"]) .industry-card ul {
  color: var(--fg-muted);
}

.case-grid {
  gap: 18px;
}

.case-card {
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--bg-raised);
  box-shadow: var(--panel-shadow);
}

.capfeat-grid,
.task-grid,
.proof-stats {
  gap: 14px;
  border: 0;
  background: transparent;
}

.capfeat-card,
.task-card,
.proof-stats div {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg-raised);
  box-shadow: var(--panel-shadow);
}

.capfeat-card h3,
.task-card h3,
.proof-stats strong,
.try-points b {
  color: var(--fg-strong);
}

.capfeat-card p,
.task-card > p,
.proof-stats small,
.try-copy > p,
.try-points li {
  color: var(--fg-muted);
}

.task-tags span,
.capfeat-card .chip-cloud span,
.seo-keywords span,
.light-section .seo-keywords span {
  border-color: var(--hairline);
  background: var(--bg-soft);
  color: var(--fg-muted);
}

.task-links {
  border-color: var(--hairline);
}

.task-links a,
.task-links a:last-child {
  color: var(--accent);
}

.try-band {
  border-color: var(--hairline);
  background: var(--decor-tint);
  box-shadow: var(--panel-shadow);
}

.try-points {
  gap: 10px;
  border: 0;
  background: transparent;
}

.try-points li {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--c-white-70);
}

.faq-list {
  display: grid;
  gap: 10px;
  border: 0;
}

.faq-item {
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.faq-item summary {
  padding: 22px 24px;
  color: var(--fg);
}

.faq-a {
  padding: 0 24px 24px 64px;
}

/* Tool pages */
.tool-workbench,
.tool-hero,
.tool-case,
.tool-final {
  background: var(--bg);
  color: var(--fg);
}

.workbench,
.sample-card,
.ex-table,
.ex-drawing,
.ex-cad-frame,
.audit-engine,
.extraction-window {
  border-color: var(--hairline);
  background-color: var(--bg-raised);
  box-shadow: var(--panel-shadow);
}

.tool-workbench .section-intro,
.tool-hero-copy,
.tool-final-inner {
  color: var(--fg);
}

.tool-workbench h2,
.tool-hero h1,
.tool-case h2,
.tool-final h2,
.outcome-card h3 {
  color: var(--fg-strong);
}

.tool-workbench p,
.tool-hero p,
.tool-case p,
.tool-final p,
.explain-note p,
.custom-label {
  color: var(--fg-muted);
}

.wb-rules,
.wb-preview,
.wb-fields,
.ex-drawing,
.ex-table,
.ex-row,
.table-head {
  border-color: var(--hairline);
}

.wb-preview,
.ex-cad-frame {
  background-color: var(--ui-canvas-bg);
  background-image: radial-gradient(circle, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

.ex-table,
.wb-rules,
.wb-fields {
  background: var(--bg-raised);
}

.rule-row,
.field-row {
  border-color: var(--hairline);
  background: var(--bg-raised);
}

.rule-row b,
.field-row b {
  color: var(--fg);
}

.rule-row.is-off,
.field-row.is-off {
  opacity: 0.55;
}

.rule-del {
  color: var(--fg-faint);
}

.rule-add input,
.wb-target select {
  border-color: var(--hairline);
  background: var(--bg-raised);
  color: var(--fg);
}

.rule-add input::placeholder {
  color: var(--fg-faint);
}

.demo-tabs {
  border-color: var(--hairline);
}

.demo-tabs button,
.wb-stage .demo-tabs button,
.wb-result .demo-tabs button {
  color: var(--fg-muted);
}

.demo-tabs button[aria-selected="true"],
.wb-stage .demo-tabs button[aria-selected="true"],
.wb-result .demo-tabs button[aria-selected="true"] {
  border-bottom-color: var(--accent);
  color: var(--fg-strong);
}

.wb-stats,
.wb-stats div,
.wb-log {
  border-color: var(--hairline);
}

.wb-stats small,
.wb-log p {
  color: var(--fg-muted);
}

.wb-stats strong {
  color: var(--fg-strong);
}

.wb-hint {
  color: var(--fg-muted);
}

/* Contact and footer */
.contact-section {
  overflow: hidden;
  padding: 84px 0 0;
  background: var(--bg);
  color: var(--fg);
}

.contact-glow {
  background: radial-gradient(circle, var(--accent) 0, transparent 66%);
  opacity: 0.07;
}

.contact-grid {
  position: relative;
  z-index: 1;
  padding: 58px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  color: var(--fg);
  box-shadow: none;
}

.contact-copy h2,
.contact-materials li {
  color: var(--fg-strong);
}

.contact-copy h2 {
  font-size: var(--step-h2);
}

.contact-copy p,
.contact-materials p,
.contact-materials li span {
  color: var(--fg-muted);
}

.contact-materials,
.contact-materials li {
  border-color: var(--hairline-strong);
}

.contact-direct {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 30px;
}

.contact-phone {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: var(--fg);
}

.contact-phone:hover .contact-direct-value {
  color: var(--accent);
}

.contact-direct-label {
  font-size: 0.67rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.contact-direct-value {
  font-family: var(--font-tech);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--fg-strong);
}

.contact-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.contact-qr img {
  display: block;
  width: 108px;
  height: 111px;
  object-fit: contain;
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  border-radius: 8px;
}

/* The footer is reused inside three different closing sections, so it carries
   its own colours instead of inheriting a parent's polarity. */
.site-footer,
.site-footer .brand,
.site-footer .brand span,
.site-footer .footer-meta,
.site-footer .footer-meta a {
  color: var(--fg);
}

.site-footer .brand img {
  filter: none;
}

.site-footer p,
.site-footer span,
.site-footer a,
.site-footer .footer-company,
.site-footer .footer-contact,
.site-footer .footer-brand p {
  color: var(--fg-muted);
}

.site-footer .footer-contact a:hover,
.site-footer .footer-meta a:hover {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Remaining dark surfaces flipped to light (demo viewports).
   These components carried --ink-9xx / --fg bases from the old dark product
   windows; the surrounding page is now light, so they resolve to light too.
   -------------------------------------------------------------------------- */
.capture-split {
  background: var(--bg-soft);
}

.capture-sheet {
  border-color: var(--hairline);
  background: var(--bg-raised);
}

.ex-toast {
  background: var(--bg-raised);
  border-color: var(--hairline-strong);
  color: var(--fg);
  box-shadow: var(--panel-shadow-strong);
}

/* --------------------------------------------------------------------------
   Reference-scale body copy. The old enterprise skeleton ran 9-13px text
   under 60px headings; lift the small content text onto a 14-15px floor so
   cards, flows and lists sit in the same voice as the reference-sized leads.
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.13em;
}

.numbered-flow li {
  font-size: 0.94rem;
  line-height: 1.7;
}

.numbered-flow span {
  font-size: 0.75rem;
}

.chip-cloud span {
  padding: 7px 13px;
  font-size: 0.8125rem;
}

.mini-label {
  font-size: 0.66rem;
  letter-spacing: 0.09em;
}

.scenario-label {
  font-size: 0.75rem;
}

.scenario-list span {
  font-size: 0.85rem;
  line-height: 1.6;
}

.value-grid p {
  font-size: 0.9rem;
  line-height: 1.7;
}

.industry-card li {
  font-size: 0.875rem;
  line-height: 1.75;
}

.case-copy p {
  font-size: 0.875rem;
  line-height: 1.7;
}

.band-steps p {
  font-size: 0.875rem;
  line-height: 1.7;
}

.pain-card p,
.capfeat-card p,
.task-card p {
  font-size: 0.92rem;
  line-height: 1.7;
}

.verify-card li {
  font-size: 0.9rem;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   参考站的"苹果风"质感来源：corner-shape: squircle（超椭圆圆角）。
   普通 border-radius 是正圆弧，squircle 是更平缓的超椭圆，iOS 图标那种。
   border-radius 仍然定义圆角尺寸，corner-shape 只改形状；不支持的老浏览器
   自动回退到上面的普通圆角，无需降级代码。pill（999px）不在此列。
   -------------------------------------------------------------------------- */
.button,
.product-window,
.hero-visual,
.feature-visual,
.workflow-story .feature-visual,
.capability-overview .capability-nav,
.capability-overview .capability-link,
.platform-section .platform-card,
.platform-section .platform-card-dark,
.industries-section .industry-grid,
.cases-section .case-grid,
.contact-grid,
.try-band,
.proof-inner,
.tool-final-inner,
.page-capability .pain-grid,
.page-capability .pain-card,
.page-capability .capfeat-card,
.page-capability .verify-grid,
.page-capability .verify-card,
.page-capability .task-card,
.page-capability .faq-list,
.page-capability .faq-item,
.page-capability .try-band,
.workflow-story .usecase-grid,
.workflow-value-band .value-grid {
  corner-shape: squircle;
}

@media (max-width: 1080px) {
  .site-header,
  .site-header.is-scrolled,
  .site-header.menu-active {
    height: 68px;
  }

  .mobile-menu {
    border-color: var(--hairline);
    background: var(--bg-raised);
    box-shadow: var(--panel-shadow-strong);
  }

  .mobile-menu a,
  .mobile-group-label {
    color: var(--fg);
  }

  .menu-backdrop {
    background: var(--c-black-14);
  }

  .page-index .hero-visual {
    padding: 0;
  }
}

@media (max-width: 760px) {
  .container {
    width: min(calc(100% - 32px), var(--container));
  }

  .section {
    padding: 80px 0;
  }

  .hero {
    padding: 126px 0 72px;
  }

  .page-index .hero {
    padding-top: 124px;
    text-align: left;
  }

  .page-index .hero-copy {
    align-items: flex-start;
  }

  .page-index .hero h1,
  .hero h1 {
    font-size: var(--step-h1-sm);
  }

  .page-index .tag-list,
  .page-index .button-row {
    justify-content: flex-start;
  }

  .page-index .hero-visual {
    padding: 0;
  }

  .pain-grid,
  .capability-nav,
  .industry-grid,
  .verify-grid,
  .scene-grid,
  .value-grid,
  .case-outcome-grid {
    grid-template-columns: 1fr;
  }

  .pain-card,
  .capability-link,
  .value-grid article {
    min-height: auto;
  }

  .contact-grid {
    padding: 34px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .capability-link:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   .page-landing — skin sampled from the reference site (encord.com). It is a
   light page: #fafafa canvas inside a 1px #dfe5e9 frame, with near-black and
   dark-plum rounded cards inset on top. The brand accent is lime (#a6e40e),
   painted with near-black text; orchid (#d2a1fd) appears only as the stat
   numbers inside the dark customer card. Scoped so no other page is touched.
   -------------------------------------------------------------------------- */

.page-landing {
  --container: 1400px;
  --container-wide: 1400px;
  --bg: var(--c-page);
  --bg-canvas: var(--c-page);
  --bg-raised: var(--c-white);
  --bg-soft: var(--c-band);
  --fg: var(--c-ink-warm);
  --fg-strong: var(--c-ink-warm);
  --fg-muted: var(--c-body-grey);
  --fg-faint: var(--c-mute-2);
  --hairline: var(--c-frame);
  --hairline-strong: var(--c-frame);
  --accent: var(--c-ink-warm);
  --accent-strong: var(--c-ink-warm);
  --accent-soft: var(--c-lime-soft);
  --on-accent: var(--c-ink-warm);
  --decor-tint: var(--c-tint-lime);
  --decor-tint-strong: var(--c-tint-mist);
  background: var(--c-page);
  color: var(--c-ink-warm);
}

html:has(body.page-landing) {
  background: var(--c-page);
}

/* Body copy is small and grey on the reference; headings are the loud part. */
.page-landing h1,
.page-landing h2,
.page-landing h3 {
  color: var(--c-ink-warm);
  /* The reference sets every heading at weight 300 — the light, wide voice is
     the single most recognisable thing about it. */
  font-weight: 300;
  letter-spacing: -0.02em;
}

.page-landing h1 em,
.page-landing h2 em {
  color: inherit;
  font-style: normal;
}

.page-landing .eyebrow {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--fg-faint);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-landing .eyebrow > span {
  display: none;
}

/* Header: light, matching the reference's white nav bar. The dark announcement
   note above it is the reference's dark banner, so the note stays dark while
   the bar returns to the page's light canvas. */
.site-header.site-header-home,
.site-header.site-header-home.is-scrolled,
.site-header.site-header-home.menu-active {
  height: 72px;
  border-color: var(--c-frame);
  background: var(--c-page);
  color: var(--c-ink-warm);
  box-shadow: none;
  backdrop-filter: none;
}

.site-header-home .brand {
  color: var(--c-ink-warm);
}

.site-header-home .reading-progress span {
  background: var(--c-lime);
}

.site-header-home .nav-trigger,
.site-header-home .primary-nav-link {
  color: var(--c-body-grey);
  font-size: 1rem;
  font-weight: 500;
}

/* Match the nav bar's outer edges to the landing frame (both 1400px, 20px
   inset) instead of the wider 48px gutter the shared shell uses elsewhere. */
.site-header-home .nav-shell {
  width: min(calc(100% - 40px), var(--container));
}

.site-header-home .nav-trigger:hover,
.site-header-home .nav-dropdown:hover .nav-trigger,
.site-header-home .nav-trigger[aria-expanded="true"],
.site-header-home .primary-nav-link:hover,
.site-header-home .primary-nav-link:focus-visible {
  background: var(--c-band);
  color: var(--c-ink-warm);
}

/* The reference's dropdown is a 720px floating card centred under the bar, not
   the full-width panel the shared chrome uses. The bar keeps a full-width
   transparent hit-area for hover continuity, anchored to the header (top:100%)
   rather than the viewport so it stays glued below the bar whether the 48px
   announcement note is open or closed. The visible card is the centred
   .mega-inner inside it. */
.site-header-home .nav-menu,
.site-header-home.is-scrolled .nav-menu,
.site-header-home.menu-active .nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  bottom: auto;
  padding: 14px 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/* The 720px card: white, hairline frame, soft shadow, 24px padding. */
.site-header-home .mega-inner {
  width: min(720px, calc(100vw - 40px));
  margin-inline: auto;
  display: flex;
  align-items: stretch;
  gap: 24px;
  padding: 24px 12px;
  border: 1px solid var(--c-frame);
  border-radius: 12px;
  background: var(--c-white);
  box-shadow: 0 24px 70px var(--c-shadow);
}

/* Two equal columns, split by a 1px hairline. The reference renders the
   divider as its own 1px flex item centred in the 24px gap (not a border on
   the second column), so a dedicated element keeps the column widths exact.
   The shared .mega-col draws each column as its own boxed panel (1px border,
   18px radius, raised background) for the other pages; reset all of it here or
   the section headings end up crowded against a stray rounded frame. */
.site-header-home .mega-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.site-header-home .mega-divider {
  flex: 0 0 1px;
  width: 1px;
  align-self: stretch;
  background: var(--c-frame);
}

/* A column can hold several stacked sections; the reference stacks
   DATA-AS-A-SERVICE over INTEGRATIONS inside one 211px column. */
.site-header-home .mega-section + .mega-section {
  margin-top: 20px;
}

/* Column heading: 12px/500 grey, uppercase, like the reference. */
.site-header-home .mega-label {
  margin: 0 0 12px;
  padding: 0 12px;
  color: var(--c-mega-desc);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.333;
  text-transform: uppercase;
}

/* Two-line item: title over a muted description. The spans stretch to the
   column width so a long description wraps instead of running off the card.
   `.desktop-nav a` forces `white-space: nowrap` + `align-items: center` on
   every nav link, which is exactly wrong here, so both are reset. */
.site-header-home .mega-link {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-height: 0;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: normal;
}

/* Single-line item: shrinks to its label on one line (the reference's compact
   py-[5px] px-3 pill) instead of filling the column. */
.site-header-home .mega-link-single {
  display: block;
  width: fit-content;
  padding: 5px 12px;
  white-space: nowrap;
}

.site-header-home .mega-t,
.site-header-home .mega-link:hover .mega-t,
.site-header-home .mega-link:focus-visible .mega-t {
  color: var(--c-mega-title);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 1.5;
}

.site-header-home .mega-d {
  color: var(--c-mega-desc);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.43;
}

.site-header-home .mega-link:hover,
.site-header-home .mega-link:focus-visible {
  background: var(--c-band-2);
}

/* Right-hand promo: a 200px dark card that fills the dropdown's height, with
   the big white title and CTA grouped at the top like the reference's
   platform promo. */
.site-header-home .mega-promo {
  flex: 0 0 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  padding: 16px;
  border-radius: 12px;
  background: var(--c-night);
  color: var(--c-night-text);
  text-decoration: none;
  /* `.desktop-nav a` sets white-space:nowrap; the promo title must wrap to two
     lines inside its 200px card instead of inflating the card's width. */
  white-space: normal;
}

.site-header-home .mega-promo-title {
  color: var(--c-night-text);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.014em;
  line-height: 1.25;
}

.site-header-home .mega-promo-cta {
  color: var(--c-night-text);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  opacity: 0.85;
}

.site-header-home .mega-promo:hover .mega-promo-cta,
.site-header-home .mega-promo:focus-visible .mega-promo-cta {
  opacity: 1;
}

/* Non-hyperlink items (数据即服务): read as muted text, not a clickable row. */
.site-header-home .mega-link-static,
.site-header-home .mega-link-static:hover {
  background: transparent;
  cursor: default;
}
.site-header-home .mega-link-static .mega-t {
  color: var(--c-mega-desc);
}

/* 解决方案 flyout: a two-column card — left triggers, right panel. Hovering a
   left-hand trigger swaps the right column to that family's links. */
.site-header-home .flyout-inner {
  width: min(560px, calc(100vw - 40px));
  margin-inline: auto;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 12px;
  border: 1px solid var(--c-frame);
  border-radius: 12px;
  background: var(--c-white);
  box-shadow: 0 24px 70px var(--c-shadow);
}

.site-header-home .flyout-trigger-col {
  flex: 0 0 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 12px;
  border-right: 1px solid var(--c-frame);
}

.site-header-home .flyout-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-mega-title);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.5px;
  text-align: left;
  cursor: pointer;
}

.site-header-home .flyout-trigger::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
}

.site-header-home .flyout-trigger:hover,
.site-header-home .flyout-trigger.is-active,
.site-header-home .flyout-trigger:focus-visible {
  background: var(--c-band-2);
}

.site-header-home .flyout-panel-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  padding: 4px 8px 4px 16px;
}

.site-header-home .flyout-panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.site-header-home .flyout-panel[hidden] {
  display: none;
}

.site-header-home .mobile-menu {
  border-color: var(--c-frame);
  background: var(--c-page);
}

.site-header-home .mobile-menu nav a {
  color: var(--c-ink-warm);
  border-bottom-color: var(--c-frame);
}

.site-header-home .mobile-menu .mobile-group-label {
  color: var(--c-body-grey);
}

.site-header-home .menu-toggle {
  border-color: var(--c-frame);
  background: var(--c-white);
  color: var(--c-ink-warm);
}

/* "探索产品" is the reference's pale "Explore product" pill, not a ghost. */
.site-header-home .button-ghost {
  border-color: var(--c-ghost-border);
  background: var(--c-tint-mist);
  color: var(--c-ink-warm);
}

.site-header-home .button-ghost:hover {
  border-color: var(--c-ink-warm);
  background: var(--c-band-2);
  color: var(--c-ink-warm);
}

/* Nav CTAs are rounded rectangles on the reference, not the pill used in the
   page body, and share the same 16px label as the nav links. Both buttons keep
   one fixed width so they stay the same length no matter their label, instead
   of each sizing to its own character count. */
.site-header-home .nav-cta {
  min-width: 136px;
  border-radius: 12px;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

/* Buttons are pills on the reference, never the 18px-rectangle used elsewhere. */
.page-landing .button {
  min-height: 44px;
  gap: 10px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  font-size: 0.86rem;
  font-weight: 500;
}

.page-landing .button-primary {
  border-color: var(--c-lime);
  background: var(--c-lime);
  color: var(--on-accent-lime);
}

.page-landing .button-primary:hover {
  border-color: var(--c-lime-strong);
  background: var(--c-lime-strong);
  color: var(--on-accent-lime);
}

.page-landing .button-ghost {
  border-color: var(--c-frame);
  background: var(--c-white);
  color: var(--c-ink-warm);
}

.page-landing .button-ghost:hover {
  border-color: var(--c-ink-warm);
  background: var(--c-white);
}

/* Footer sits on the pale band inside the frame, not on a dark slab. */
.page-landing .site-footer {
  margin-top: 0;
  border-color: var(--c-frame);
  background: var(--c-band);
  color: var(--c-body-grey);
}

.page-landing .site-footer .brand span,
.page-landing .site-footer .footer-nav-group p {
  color: var(--c-ink-warm);
}

.page-landing .site-footer .footer-company,
.page-landing .site-footer p,
.page-landing .site-footer span,
.page-landing .site-footer a {
  color: var(--c-body-grey);
}

.page-landing .site-footer .footer-nav-group a:hover,
.page-landing .site-footer .footer-contact a:hover,
.page-landing .site-footer .footer-meta a:hover {
  color: var(--c-ink-warm);
}

.page-landing .site-footer .footer-qr img {
  background: var(--c-white);
  border-color: var(--c-frame);
}

.page-landing .site-footer .footer-meta {
  border-color: var(--c-frame);
  color: var(--fg-faint);
}

/* ==========================================================================
   Blog — list (page-blog) skin
   ========================================================================== */

.page-blog .blog-hero { background: var(--c-night); color: var(--c-night-text); }
.page-blog .blog-eyebrow {
  color: var(--c-lime);
  font-family: var(--font-tech);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.page-blog .blog-eyebrow span { background: var(--c-lime); }
.page-blog .blog-hero h1 { color: var(--c-night-text); }
.page-blog .blog-hero-lead { color: var(--c-night-lead); }
.page-blog .blog-list-section { background: var(--c-white); }

.page-blog .blog-banner { background: var(--c-night); color: var(--c-night-text); }
.page-blog .blog-banner-kicker { color: var(--c-lime); }
.page-blog .blog-banner-title { color: var(--c-night-text); }
.page-blog .blog-banner-text { color: var(--c-night-muted); }
.page-blog .blog-banner-cta { color: var(--c-lime); }
.page-blog .blog-banner-arrow { background: var(--c-white-10); color: var(--c-night-text); }
.page-blog .blog-banner-arrow:hover { background: var(--c-white-20); color: var(--c-white); }
.page-blog .blog-banner-dot { background: var(--c-white-20); }
.page-blog .blog-banner-dot.is-active { background: var(--c-lime); }

.page-blog .blog-pill { color: var(--c-muted); border-color: var(--c-frame); background: var(--c-white); }
.page-blog .blog-pill:hover { color: var(--c-ink); border-color: var(--c-mute-2); }
.page-blog .blog-pill.is-active { color: var(--c-ink-warm); background: var(--c-lime); border-color: var(--c-lime); }
.page-blog .blog-subfilter-label { color: var(--c-faint); }
.page-blog .blog-subtag { color: var(--c-muted); border-color: var(--c-frame); background: var(--c-white); }
.page-blog .blog-subtag:hover { color: var(--c-ink); border-color: var(--c-mute-2); }
.page-blog .blog-subtag.is-active { color: var(--c-lime-deep); border-color: var(--c-lime); background: var(--c-lime-soft); }

.page-blog .blog-item { border-color: var(--c-frame); }
.page-blog .blog-item:hover { border-color: var(--c-mute-2); }
.page-blog .blog-item-title { color: var(--c-ink); }
.page-blog .blog-item-body:hover .blog-item-title { color: var(--c-lime-deep); }
.page-blog .blog-item-summary { color: var(--c-muted); }
.page-blog .blog-item-date { color: var(--c-faint); }
.page-blog .blog-item-tag { color: var(--c-muted); background: var(--c-black-04); }
.page-blog .blog-item-tag:hover { color: var(--c-ink); }
.page-blog .blog-item-tag-2 { color: var(--c-lime-deep); background: var(--c-lime-veil); }

.page-blog .blog-empty { color: var(--c-faint); }
.page-blog .blog-count { color: var(--c-muted); }
.page-blog .blog-count b { color: var(--c-ink); }
.page-blog .blog-pagination-item { color: var(--c-muted); border-color: var(--c-frame); }
.page-blog .blog-pagination-item.is-active { background: var(--c-ink-warm); color: var(--c-white); border-color: var(--c-ink-warm); }

.page-blog .blog-side-figure { background: var(--c-night); color: var(--c-night-text); }
.page-blog .blog-side-figure-copy strong { color: var(--c-night-text); }
.page-blog .blog-side-figure-copy span { color: var(--c-night-muted); }
.page-blog .blog-side-card { background: var(--c-white); border-color: var(--c-frame); }
.page-blog .blog-side-title { color: var(--c-ink); }
.page-blog .blog-side-hot a { color: var(--c-ink); }
.page-blog .blog-side-hot a:hover { color: var(--c-lime-deep); }
.page-blog .blog-side-hot-rank { color: var(--c-lime); font-family: var(--font-tech); }
.page-blog .blog-side-links a { color: var(--c-muted); }
.page-blog .blog-side-links a:hover { color: var(--c-ink); }
.page-blog .blog-side-button { background: var(--c-ink-warm); color: var(--c-white); }
.page-blog .blog-side-button:hover { background: var(--c-lime); color: var(--c-ink-warm); }
.page-blog .blog-side-contact { color: var(--c-faint); }

/* ==========================================================================
   Blog — post (page-blog-post) skin
   ========================================================================== */

.page-blog-post .blog-post-banner { background: var(--c-white); border-bottom: 1px solid var(--c-frame); }
.page-blog-post .blog-post-crumb { color: var(--c-faint); }
.page-blog-post .blog-post-crumb a { color: var(--c-muted); }
.page-blog-post .blog-post-crumb a:hover { color: var(--c-lime-deep); }
.page-blog-post .blog-post-crumb-current { color: var(--c-ink); }

.page-blog-post .blog-post-title { color: var(--c-ink); }
.page-blog-post .blog-post-meta { color: var(--c-faint); }
.page-blog-post .blog-post-rule { background: var(--c-frame); }

.page-blog-post .blog-post-body { color: var(--c-ink-2); }
.page-blog-post .blog-post-body h2 { color: var(--c-ink); }
.page-blog-post .blog-post-body h3 { color: var(--c-ink); }
.page-blog-post .blog-post-body a { color: var(--c-lime-deep); }
.page-blog-post .blog-post-body .article-lead { color: var(--c-muted); }
.page-blog-post .blog-post-body blockquote {
  border-left-color: var(--c-lime);
  background: var(--c-lime-veil);
  color: var(--c-ink-2);
}
.page-blog-post .blog-post-body .figure-note { color: var(--c-faint); }
.page-blog-post .blog-post-body code { background: var(--c-black-04); color: var(--c-ink); }
.page-blog-post .blog-post-body pre { background: var(--c-night); color: var(--c-night-text); }

.page-blog-post .blog-post-tags > span { color: var(--c-faint); }
.page-blog-post .blog-post-tag {
  color: var(--c-lime-deep);
  background: var(--c-lime-veil);
  border-color: var(--c-lime-soft);
}
.page-blog-post .blog-post-rel span { color: var(--c-faint); }
.page-blog-post .blog-post-rel a { color: var(--c-ink); }
.page-blog-post .blog-post-rel a:hover { color: var(--c-lime-deep); }

.page-blog-post .blog-post-side-card { background: var(--c-white); border-color: var(--c-frame); }
.page-blog-post .blog-post-side-title { color: var(--c-ink); }
.page-blog-post .blog-post-hot a { color: var(--c-ink-2); }
.page-blog-post .blog-post-hot a:hover { color: var(--c-lime-deep); }
.page-blog-post .blog-post-side-tag { color: var(--c-muted); background: var(--c-black-04); }
.page-blog-post .blog-post-side-products a b { color: var(--c-ink); }
.page-blog-post .blog-post-side-products a span { color: var(--c-muted); }
.page-blog-post .blog-post-side-products a:hover b { color: var(--c-lime-deep); }

/* Keep the drawing, its counters, and the result action visible in one shared frame. */
.page-tool-data-extract .workbench[data-extract] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 790px; min-height: 790px; max-height: 790px; }
.ex-source-card { display: flex; flex-direction: column; align-items: stretch; gap: 14px; min-width: 0; padding: 16px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--bg-soft); }
.ex-source-card-copy { min-width: 0; display: grid; gap: 5px; }
.ex-source-card-copy .mini-label { margin: 0; }
.ex-source-type { color: var(--fg-strong); font-size: .78rem; font-weight: 700; line-height: 1.35; }
.ex-source-open { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 40px; padding: 8px 7px; border: 1px solid var(--hairline); border-radius: 8px; color: var(--fg-strong); background: var(--bg-raised); font-size: .62rem; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.ex-source-open:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.ex-source-open svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.page-tool-data-extract .wb-run { flex: none; width: auto; min-width: 170px; min-height: 46px; margin: 0; }
.page-tool-data-extract .wb-result { height: 100%; min-height: 0; overflow: hidden; }
.page-tool-data-extract .ex-body { flex: 1; min-height: 0; overflow: hidden; }
.page-tool-data-extract .ex-drawing, .page-tool-data-extract .ex-table { min-height: 0; }
.page-tool-data-extract .ex-table .ex-rows { min-height: 0; max-height: none; }
.ex-run-action { display: flex; flex: none; justify-content: flex-end; align-items: center; margin-top: auto; padding-top: 12px; }
.page-tool-data-extract .ex-workbook { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 228px; overflow: hidden; }
.page-tool-data-extract .ex-workbook.is-extracted { grid-template-columns: minmax(0, 1fr); }
.page-tool-data-extract .ex-body[hidden], .page-tool-data-extract .ex-workbook[hidden], .page-tool-data-extract .ex-excel-view[hidden] { display: none; }
.ex-workbook-aside { display: flex; flex-direction: column; align-items: stretch; gap: 14px; min-width: 0; min-height: 0; padding: 18px; border-left: 1px solid var(--hairline); background: var(--bg-raised); }
.ex-workbook-aside[hidden] { display: none; }
.page-tool-data-extract .ex-workbook-aside .wb-run { width: 100%; min-width: 0; }
.ex-workbook-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.ex-view-switch { flex: none; display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; background: var(--bg-raised); }
.ex-view-switch button { flex: 0 0 auto; min-width: 0; min-height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: 7px; color: var(--fg-muted); background: transparent; font-size: .7rem; line-height: 1.3; white-space: nowrap; cursor: pointer; transition: color .18s, background .18s, box-shadow .18s; }
.ex-view-switch button[aria-selected="true"] { color: var(--fg-strong); background: var(--bg-soft); box-shadow: var(--panel-shadow); }
.ex-report-view, .ex-excel-view { flex: 1; min-height: 0; overflow: hidden; background: var(--bg-soft); }
.ex-report-view { display: flex; flex-direction: column; }
.page-tool-data-extract .ex-report-view[hidden] { display: none; }
.ex-report-content { flex: 1; min-height: 0; overflow: auto; padding: 22px 26px 36px; scroll-behavior: smooth; }
.ex-report-empty { flex: 1; min-height: 0; }
.ex-report-empty[hidden] { display: none; }
.ex-report-sheet { margin: 0 0 18px; padding: 20px 22px 22px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--bg-raised); box-shadow: var(--panel-shadow); animation: exSheetIn .38s var(--ease) both; }
.ex-report-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.ex-report-sheet-head .mini-label { margin: 0 0 7px; }
.ex-report-sheet-head h4 { color: var(--fg-strong); font-size: .92rem; line-height: 1.45; }
.ex-report-sheet-count { flex: none; color: var(--fg-faint); font: .65rem var(--font-tech); white-space: nowrap; }
.ex-report-table-wrap, .ex-excel-table-wrap { width: 100%; overflow: auto; }
.ex-report-table, .ex-excel-table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; color: var(--fg); font-size: .74rem; line-height: 1.55; }
.ex-report-table th, .ex-report-table td, .ex-excel-table th, .ex-excel-table td { padding: 10px 12px; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; white-space: pre-wrap; overflow-wrap: anywhere; }
.ex-report-table thead th { position: sticky; top: 0; z-index: 1; color: var(--fg-strong); background: var(--bg-soft); font-size: .7rem; font-weight: 650; }
.ex-report-table tbody tr:last-child td { border-bottom: 0; }
.ex-report-table tr.is-group td { color: var(--fg-strong); background: var(--bg-soft); font-weight: 650; }
.ex-report-table tr.is-arriving { animation: exRowIn .42s var(--ease) both; animation-delay: var(--reveal-delay, 0ms); }
.ex-report-sheet[data-sheet-index="0"] .ex-report-table td:first-child { min-width: 230px; color: var(--fg-strong); font-weight: 550; }
.ex-report-sheet[data-sheet-index="1"] .ex-report-table { min-width: 880px; }
.ex-report-sheet[data-sheet-index="3"] .ex-report-table { min-width: 920px; }
.ex-report-sheet[data-sheet-index="4"] .ex-report-table { min-width: 960px; }
.ex-report-sheet[data-sheet-index="5"] .ex-report-table { min-width: 880px; }
.ex-report-sheet[data-sheet-index="6"] .ex-report-table { min-width: 840px; }
.ex-report-sheet[data-sheet-index="7"] .ex-report-table { min-width: 860px; }
.ex-excel-view { display: flex; flex-direction: column; }
.ex-excel-tabs { display: flex; flex: none; gap: 2px; overflow-x: auto; padding: 12px 16px 0; border-bottom: 1px solid var(--hairline); background: var(--bg-raised); scrollbar-width: thin; }
.ex-excel-tabs button { flex: none; min-height: 38px; padding: 0 14px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; color: var(--fg-muted); background: transparent; font-size: .68rem; cursor: pointer; }
.ex-excel-tabs button[aria-selected="true"] { border-color: var(--hairline); color: var(--fg-strong); background: var(--bg-soft); }
.ex-excel-sheet { flex: 1; min-height: 0; overflow: auto; padding: 18px 20px 32px; }
.ex-excel-table { width: max-content; min-width: 100%; font-size: .7rem; }
.ex-excel-table th, .ex-excel-table td { min-width: 96px; max-width: 320px; padding: 7px 10px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.ex-excel-table tr:first-child th { min-width: 100%; color: var(--fg-strong); background: var(--bg-raised); font-size: .78rem; }
.ex-excel-table tr[data-header-row] th { position: sticky; top: 0; z-index: 2; color: var(--fg-strong); background: var(--accent-soft); }
.ex-excel-table tr[data-empty-row] td { height: 9px; padding: 0; border-bottom: 0; }
.ex-excel-table tr.is-arriving td { animation: exRowIn .38s var(--ease) both; animation-delay: var(--reveal-delay, 0ms); }
.page-tool-data-extract .ex-body.is-video-mode { display: grid; grid-template-columns: minmax(0, 1fr); }
.ex-body.is-video-mode .ex-drawing, .ex-body.is-video-mode .ex-table { display: none; }
.ex-video-view { min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; background: #0a0d10; }
.ex-video-view[hidden] { display: none; }
.ex-video-stage { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; background: #0a0d10; }
.ex-video { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.ex-video-play-overlay { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 68px; height: 68px; padding-left: 5px; border: 1px solid rgb(255 255 255 / 30%); border-radius: 50%; color: #fff; background: rgb(9 14 19 / 68%); font-size: 1.3rem; cursor: pointer; opacity: 0; transform: translate(-50%, -50%) scale(.96); transition: opacity .18s, transform .18s, background .18s; }
.ex-video-stage:not(.is-playing) .ex-video-play-overlay, .ex-video-stage:hover .ex-video-play-overlay, .ex-video-stage:focus-within .ex-video-play-overlay { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ex-video-play-overlay:hover { background: var(--accent-strong); }
.ex-video-controls { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 17px 18px 12px; color: #fff; background: linear-gradient(transparent, rgb(5 8 10 / 92%)); opacity: 0; pointer-events: none; transform: translateY(5px); transition: opacity .18s, transform .18s; }
.ex-video-stage:hover .ex-video-controls, .ex-video-stage:focus-within .ex-video-controls { opacity: 1; pointer-events: auto; transform: none; }
.ex-video-control-play { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; color: #fff; background: rgb(255 255 255 / 13%); font-size: .8rem; cursor: pointer; }
.ex-video-controls time { flex: none; color: rgb(255 255 255 / 84%); font: .65rem var(--font-tech); font-variant-numeric: tabular-nums; }
.ex-video-controls input[type="range"] { flex: 1; min-width: 30px; height: 4px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.ex-video-speed { flex: none; display: inline-flex; gap: 3px; padding: 3px; border: 1px solid rgb(255 255 255 / 15%); border-radius: 7px; background: rgb(0 0 0 / 35%); }
.ex-video-speed button { min-width: 34px; min-height: 25px; padding: 0 5px; border: 0; border-radius: 4px; color: rgb(255 255 255 / 70%); background: transparent; font-size: .62rem; cursor: pointer; }
.ex-video-speed button[aria-pressed="true"] { color: #fff; background: rgb(255 255 255 / 19%); }
.ex-video-controls button:focus-visible, .ex-video-play-overlay:focus-visible, .ex-video-controls input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.drawing-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 22px; }
.drawing-modal[hidden] { display: none; }
.drawing-modal-backdrop { position: absolute; inset: 0; background: var(--c-black); opacity: .82; cursor: pointer; }
.drawing-modal-dialog { position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(96vw, 1760px); height: min(94vh, 1260px); overflow: hidden; border: 1px solid var(--hairline); border-radius: 14px; background: var(--bg-raised); box-shadow: var(--panel-shadow-strong); }
.drawing-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 10px 18px; border-bottom: 1px solid var(--hairline); }
.drawing-modal-head .mini-label { margin: 0 0 3px; }
.drawing-modal-head h3 { color: var(--fg-strong); font-size: .88rem; }
.drawing-zoom-tools { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.drawing-zoom-tools button { min-width: 34px; height: 34px; border: 1px solid var(--hairline); border-radius: 7px; color: var(--fg-strong); background: var(--bg-soft); font-size: 1rem; cursor: pointer; }
.drawing-zoom-tools output { min-width: 48px; color: var(--fg-muted); font: .68rem var(--font-tech); text-align: center; }
.drawing-zoom-tools .drawing-zoom-fit { padding-inline: 10px; font: .65rem var(--font-body); }
.drawing-modal-close { width: 38px; height: 38px; border: 1px solid var(--hairline); border-radius: 9px; color: var(--fg-strong); background: var(--bg-soft); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.drawing-modal-close:hover { background: var(--accent-soft); }
.drawing-scroll { min-height: 0; overflow: auto; padding: 18px; background: var(--bg-soft); overscroll-behavior: contain; }
.drawing-pages { width: 100%; max-width: none; margin-inline: auto; transition: width .18s ease; }
.drawing-page { width: 100%; margin: 0 auto 18px; border: 1px solid var(--hairline); background: var(--bg-raised); box-shadow: var(--panel-shadow); }
.drawing-page img { display: block; width: 100%; height: auto; }
@keyframes exSheetIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes exRowIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (max-width: 1080px) {
  .ex-report-content { padding-inline: 20px; }
}
@media (max-width: 820px) {
  .page-tool-data-extract .workbench[data-extract] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 790px; min-height: 790px; max-height: 790px; }
  .page-tool-data-extract .wb-result { min-height: 0; }
}
@media (min-width: 621px) and (max-width: 980px) {
  .page-tool-data-extract .ex-body:not(.is-video-mode) { grid-template-columns: minmax(0, 1.35fr) minmax(265px, .65fr); }
  .page-tool-data-extract .ex-drawing { border-right: 1px solid var(--hairline); border-bottom: 0; }
}
@media (max-width: 620px) {
  .page-tool-data-extract .ex-body:not(.is-video-mode) { overflow-y: auto; }
  .page-tool-data-extract .ex-workbook { grid-template-columns: minmax(0, 1fr) 155px; }
  .ex-workbook-aside { gap: 10px; padding: 9px; }
  .ex-workbook-aside .ex-source-card { gap: 9px; padding: 9px; }
  .page-tool-data-extract .ex-source-type { font-size: .68rem; }
  .page-tool-data-extract .ex-workbook-aside .wb-run { min-height: 40px; padding-inline: 6px; font-size: .68rem; }
  .page-tool-data-extract .wb-result > .demo-tabs { overflow-x: auto; }
  .page-tool-data-extract .wb-result > .demo-tabs button { flex: 0 0 auto; padding-inline: 10px; white-space: nowrap; }
  .ex-view-switch { gap: 4px; padding: 7px 9px; }
  .ex-view-switch button { min-height: 34px; padding-inline: 10px; font-size: .64rem; }
  .ex-video-controls { gap: 6px; min-height: 52px; padding: 15px 9px 9px; }
  .ex-video-controls time { font-size: .58rem; }
  .ex-video-speed button { min-width: 30px; padding-inline: 3px; font-size: .58rem; }
  .ex-report-content { padding: 14px 12px 28px; }
  .ex-report-sheet { padding: 16px 14px; }
  .ex-report-sheet-head { flex-direction: column; gap: 8px; }
  .drawing-modal { padding: 8px; }
  .drawing-modal-dialog { width: 98vw; height: 96vh; border-radius: 9px; }
  .drawing-modal-head { min-height: 56px; padding-inline: 12px; }
  .drawing-modal-head { flex-wrap: wrap; gap: 8px; }
  .drawing-zoom-tools { gap: 3px; }
  .drawing-zoom-tools .drawing-zoom-fit { display: none; }
  .drawing-scroll { padding: 10px; }
}
@media (hover: none) {
  .ex-video-controls { opacity: 1; pointer-events: auto; transform: none; }
}