/* LINGCHONG — site styles, v2
   Direction: a premium appliance-brand product page. Warm cream and sand grounds that match the product
   photography, light large type, short copy, pill buttons, big imagery. One deliberate light look. */

:root {
  --cream: #FBF8F2;      /* header, hero ground */
  --sand: #F1EDE6;       /* alternating section ground */
  --paper: #FFFFFF;      /* raised surfaces */
  --ink: #1A1916;        /* text, primary buttons */
  --muted: #625C53;      /* secondary text (5.3:1 on sand) */
  --line: #E2DCD2;       /* hairlines */
  --line-strong: #CBC3B6;
  --night: #1E1D1A;      /* dark bands */
  --night-2: #2A2824;
  --on-night: #EFEBE4;
  --on-night-muted: #B3ADA3;
  --gold: #8A7246;       /* small accents: kickers, active marks (4.9:1 on white) */
  --gold-soft: #D9CBAE;
  --ok: #2F6B4F;
  --ok-tint: #E4EFE8;
  --warn-tint: #F6EEDC;

  --sans: "Albert Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.1875rem;
  --t-xl: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem);
  --t-2xl: clamp(1.7rem, 1.35rem + 1.2vw, 2.4rem);
  --t-3xl: clamp(2.1rem, 1.5rem + 2.2vw, 3.4rem);
  --t-4xl: clamp(2.6rem, 1.7rem + 3.4vw, 4.8rem);

  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 5rem; --s-9: 7.5rem;
  --wrap: 82rem;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.on-dark :focus-visible, .band--dark :focus-visible { outline-color: var(--on-night); }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--sans); font-weight: 300; line-height: 1.08; letter-spacing: -0.022em; text-wrap: balance; }
h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); font-weight: 400; line-height: 1.2; letter-spacing: -0.012em; }
h4 { font-size: var(--t-lg); font-weight: 500; letter-spacing: 0; }
ul, ol { margin: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nw { white-space: nowrap; }
.skip { position: absolute; left: var(--s-4); top: 0; transform: translateY(-150%); background: var(--ink); color: #fff; padding: var(--s-2) var(--s-4); z-index: 100; }
.skip:focus { transform: none; top: var(--s-4); }
[dir="rtl"] .skip { left: auto; right: var(--s-4); }

/* ---------- layout ---------- */
.band { padding-left: var(--gutter-l); padding-right: var(--gutter-r); padding-block: var(--s-9); background: var(--paper); }
.band--tight { padding-block: var(--s-8); }
.band--flush-top { padding-top: 0; }
.band--paper { background: var(--paper); }
.band--sand { background: var(--sand); }
.band--cream { background: var(--cream); }
.band--dark { background: var(--night); color: var(--on-night); }
.band--chamber { background: var(--night); color: var(--on-night); }
.wrap { max-width: var(--wrap); margin-inline: auto; }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack--lg { gap: var(--s-6); }
.row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.grid { display: grid; gap: var(--s-5); }
.grid > * { min-width: 0; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split > * { min-width: 0; }
@media (max-width: 1080px) { .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .split, .split--even { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .band { padding-block: var(--s-8); } }
@media (max-width: 640px) { .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); } .band { padding-block: var(--s-7); } }

/* ---------- type helpers ---------- */
.eyebrow { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.band--dark .eyebrow, .on-dark .eyebrow { color: var(--on-night-muted); }
.lede { font-size: var(--t-lg); color: var(--muted); max-width: 60ch; line-height: 1.55; }
.band--dark .lede { color: var(--on-night-muted); }
.answer { font-size: var(--t-lg); line-height: 1.55; max-width: 58ch; color: var(--ink); }
.measure { max-width: 62ch; }
.muted { color: var(--muted); }
.band--dark .muted { color: var(--on-night-muted); }
.small { font-size: var(--t-sm); }
.tiny { font-size: var(--t-xs); }
.mono { font-variant-numeric: tabular-nums; }
.kicker { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.band--dark .kicker { color: var(--gold-soft); }
.section-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); max-width: 46rem; }
.section-head--row { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-5); }
@media (max-width: 760px) { .section-head--row { grid-template-columns: minmax(0, 1fr); } }
.note { font-size: var(--t-sm); color: var(--muted); max-width: 70ch; }
.updated { font-size: var(--t-xs); color: var(--muted); letter-spacing: 0.04em; }
.pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--t-sm); padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink); background: var(--paper); text-decoration: none; }
.pill:hover { border-color: var(--ink); }
.pill--accent { background: var(--ink); color: #fff; border-color: var(--ink); }
.render-tag { position: absolute; right: 10px; bottom: 10px; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(26,25,22,0.55); color: #fff; padding: 3px 7px; border-radius: 999px; }
.real-tag { position: absolute; left: 10px; top: 10px; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(255,255,255,0.9); color: var(--ink); padding: 4px 8px; border-radius: 999px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.9rem; padding: 0.7rem 1.4rem; border-radius: 999px; font: 500 0.9375rem/1.2 var(--sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #000; color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.band--dark .btn--ghost, .on-dark .btn--ghost { color: var(--on-night); border-color: var(--on-night); }
.band--dark .btn--ghost:hover, .on-dark .btn--ghost:hover { background: var(--on-night); color: var(--night); }
.btn--light { background: var(--on-night); color: var(--night); }
.btn--light:hover { background: #fff; color: var(--night); }
.btn .arr { transition: transform .2s; }
.btn:hover .arr { transform: translateX(3px); }
.link-arrow { font-weight: 500; text-decoration: none; display: inline-flex; gap: 0.4em; align-items: center; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.link-arrow:hover { opacity: 0.7; }
.text-link { font-size: var(--t-sm); text-decoration: underline; color: var(--muted); }
.text-link:hover { color: var(--ink); }

/* ---------- announcement + header ---------- */
.announce { background: var(--sand); color: var(--ink); font-size: var(--t-xs); padding-left: var(--gutter-l); padding-right: var(--gutter-r); padding-block: 0.55rem; letter-spacing: 0.02em; }
.announce .wrap { display: flex; gap: var(--s-4); justify-content: space-between; align-items: center; flex-wrap: wrap; }
.announce a { color: var(--ink); }
.announce .mono { color: var(--muted); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--cream); }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(251,248,242,0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.site-header .wrap { display: flex; align-items: center; gap: var(--s-6); min-height: 4.5rem; }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); flex: none; }
.brand img { height: 34px; width: auto; }
.brand .brand-sub { display: none; }
.nav { display: flex; align-items: center; gap: var(--s-1); }
.nav > a, .nav .dd > button { white-space: nowrap; font: 400 var(--t-sm)/1 var(--sans); color: var(--ink); text-decoration: none; padding: 0.7rem 0.75rem; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 999px; }
.nav > a:hover, .nav .dd > button:hover { background: var(--sand); }
.nav > a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.5em; }
.dd { position: relative; }
.dd-menu { position: absolute; top: calc(100% + 8px); left: 0; width: 20rem; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 48px -24px rgba(26,25,22,0.3); padding: var(--s-2); display: none; z-index: 5; }
.dd[data-open="true"] .dd-menu { display: grid; }
.dd-menu a { display: grid; gap: 2px; padding: 0.65rem 0.8rem; border-radius: 8px; text-decoration: none; color: var(--ink); }
.dd-menu a:hover { background: var(--sand); }
.dd-menu a span { font-size: var(--t-xs); color: var(--muted); }
.dd-menu a strong { font-size: var(--t-sm); font-weight: 500; }
.header-cta { display: flex; gap: var(--s-2); align-items: center; margin-left: auto; }
.header-cta .btn { min-height: 2.5rem; padding: 0.5rem 1.1rem; font-size: var(--t-sm); }
.lang > button { font: 500 var(--t-xs)/1 var(--sans); letter-spacing: 0.08em; padding: 0.6rem 0.7rem; border: 1px solid var(--line-strong); background: transparent; border-radius: 999px; cursor: pointer; color: var(--ink); }
.lang .dd-menu { width: 11rem; left: auto; right: 0; }
.menu-toggle { display: none; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; cursor: pointer; align-items: center; justify-content: center; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 16px; height: 1.5px; background: var(--ink); position: relative; content: ""; }
.menu-toggle span::before { position: absolute; top: -5px; } .menu-toggle span::after { position: absolute; top: 5px; }
@media (max-width: 1260px) {
  .menu-toggle { display: inline-flex; }
  .nav { display: none; }
  .site-header[data-open="true"] .nav { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 100%; left: 0; right: 0; background: var(--cream); border-bottom: 1px solid var(--line); padding: var(--s-3) var(--gutter-r) var(--s-5) var(--gutter-l); max-height: calc(100vh - 7rem); overflow: auto; }
  .site-header[data-open="true"] .nav > a, .site-header[data-open="true"] .nav .dd > button { padding: 1rem 0.25rem; font-size: var(--t-lg); border-bottom: 1px solid var(--line); border-radius: 0; width: 100%; justify-content: space-between; }
  .site-header[data-open="true"] .dd-menu { position: static; width: auto; box-shadow: none; border: 0; padding: 0 0 var(--s-2); background: transparent; }
}
@media (max-width: 520px) { .header-cta .btn--ghost, .lang { display: none; } .brand img { height: 28px; } .header-cta .btn { padding-inline: 0.9rem; } }

/* ---------- breadcrumbs ---------- */
.crumbs { font-size: var(--t-xs); color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs li { list-style: none; display: inline-flex; gap: 0.5rem; }
.crumbs li + li::before { content: "/"; opacity: 0.5; }

/* ---------- product hero (configurator) ---------- */
.pdp { background: var(--cream); padding-left: var(--gutter-l); padding-right: var(--gutter-r); padding-block: var(--s-6) 0; }
.pdp-head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: var(--s-6); align-items: start; padding-block: var(--s-6) var(--s-7); }
.pdp-head > * { min-width: 0; }
.pdp-head h1 { font-size: var(--t-4xl); }
.pdp-head h1 .cat { display: block; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem; }
.pdp-intro { display: grid; gap: var(--s-5); align-content: start; padding-top: 2.3rem; }
.pdp-intro p { font-size: var(--t-lg); line-height: 1.55; }
.pdp-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.pdp-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.pdp-finish { display: grid; gap: var(--s-3); padding-top: 2.3rem; align-content: start; }
.pdp-finish .lbl { font-size: var(--t-sm); color: var(--muted); }
.swatch-list { display: grid; gap: var(--s-2); }
.swatch { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.35rem 0; border: 0; background: none; cursor: pointer; font: 400 var(--t-md)/1.2 var(--sans); color: var(--muted); text-align: left; }
.swatch i { width: 1.1rem; height: 1.1rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18); flex: none; }
.swatch[aria-pressed="true"] { color: var(--ink); font-weight: 500; }
.swatch[aria-pressed="true"] i { box-shadow: 0 0 0 2px var(--cream), 0 0 0 3px var(--ink); }
.pdp-visual { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; position: relative; }
.pdp-visual figure { margin: 0; position: relative; overflow: hidden; background: #d8cfc2; }
.pdp-visual img { width: 100%; aspect-ratio: 1122 / 1402; object-fit: cover; transition: opacity .35s, transform .6s; }
.pdp-visual[data-active] figure img { opacity: 0.45; }
.pdp-visual[data-active="graphite"] figure[data-cw="graphite"] img,
.pdp-visual[data-active="champagne"] figure[data-cw="champagne"] img,
.pdp-visual[data-active="walnut"] figure[data-cw="walnut"] img { opacity: 1; }
.pdp-visual figcaption { position: absolute; left: 14px; bottom: 12px; font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: #fff; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,0.35); }
@media (max-width: 1000px) {
  .pdp-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pdp-head > div:first-child { grid-column: 1 / -1; }
  .pdp-intro, .pdp-finish { padding-top: 0; }
}
@media (max-width: 640px) {
  .pdp-head { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-4) var(--s-6); }
  .pdp-visual { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 6px; margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r)); padding-inline: var(--gutter-l); scrollbar-width: none; }
  .pdp-visual figure { flex: 0 0 82%; scroll-snap-align: center; }
  .pdp-visual[data-active] figure img { opacity: 1; }
}

/* key facts */
.facts { padding-left: var(--gutter-l); padding-right: var(--gutter-r); background: var(--cream); }
.facts dl { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.facts dl > div { padding: var(--s-6) var(--s-4) var(--s-6) 0; display: grid; gap: 0.3rem; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); align-items: start; }
.facts svg { width: 28px; height: 28px; grid-row: span 2; color: var(--ink); }
.facts dt { font-size: var(--t-xs); color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.facts dd { margin: 0; font-size: var(--t-lg); font-weight: 400; font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .facts dl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts dl > div { padding-block: var(--s-4); } }

/* full-bleed statement */
.statement { position: relative; min-height: 0; background: var(--night); color: #fff; overflow: hidden; }
.statement img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; opacity: 0.92; }
.statement .over { position: absolute; inset: auto 0 0 0; padding: var(--s-8) var(--gutter-r) var(--s-7) var(--gutter-l); background: linear-gradient(180deg, rgba(20,19,17,0) 0%, rgba(20,19,17,0.62) 100%); }
.statement .over .wrap { display: grid; gap: var(--s-3); }
.statement h2 { color: #fff; max-width: 18ch; }
.statement p { color: rgba(255,255,255,0.86); max-width: 52ch; }
@media (max-width: 760px) { .statement img { aspect-ratio: 4 / 5; } }

/* feature panels (alternating) */
.feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; }
.feature + .feature { margin-top: var(--s-9); }
.feature--rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.feature--rev .feature-media { order: 2; }
.feature > * { min-width: 0; }
.feature-media { position: relative; }
.feature-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--sand); }
.feature-media--tall img { aspect-ratio: 4 / 5; }
.feature-text { display: grid; gap: var(--s-4); max-width: 30rem; }
.feature-text h2 { font-size: var(--t-2xl); }
.feature-text p { color: var(--muted); }
@media (max-width: 900px) { .feature, .feature--rev { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } .feature--rev .feature-media { order: 0; } .feature + .feature { margin-top: var(--s-8); } }

/* info tabs (functions / technical data / comparison / documents) */
.tabbar { display: flex; flex-wrap: wrap; gap: var(--s-5); border-bottom: 1px solid var(--line); margin-bottom: var(--s-7); }
.tabbar button { font: 400 var(--t-lg)/1 var(--sans); color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 0 0 1rem; margin-bottom: -1px; cursor: pointer; }
.tabbar button[aria-selected="true"] { color: var(--ink); border-color: var(--ink); }
.tabbar--pills { gap: var(--s-2); border: 0; margin-bottom: var(--s-5); }
.tabbar--pills button { font-size: var(--t-sm); padding: 0.65rem 1.1rem; border: 1px solid var(--line-strong); border-radius: 999px; margin: 0; }
.tabbar--pills button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.tabpanel[hidden] { display: none; }
.fn-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(13.5rem, 1fr); gap: var(--s-4); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--s-4); scrollbar-width: thin; }
.fn-tile { scroll-snap-align: start; background: var(--sand); border-radius: 14px; padding: var(--s-5); display: grid; gap: var(--s-3); align-content: start; min-height: 13rem; }
.band--sand .fn-tile { background: var(--paper); }
.fn-tile svg { width: 36px; height: 36px; color: var(--ink); }
.fn-tile h3 { font-size: var(--t-lg); font-weight: 500; letter-spacing: 0; }
.fn-tile p { font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }
.scroll-hint { font-size: var(--t-xs); color: var(--muted); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; background: var(--sand); border-radius: 14px; }
.band--sand .table-wrap { background: var(--paper); }
.table-wrap table { min-width: 44rem; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); font-size: var(--t-sm); line-height: 1.5; }
.cmp thead th { font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.cmp tbody th { font-weight: 500; width: 20%; }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp .us { background: #F8F5EF; }
.cmp thead .us { background: var(--ink); color: #fff; }
.cmp--2 .them { color: var(--muted); }
.yes, .no, .part { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; margin-right: 0.4rem; white-space: nowrap; }
.yes { background: var(--ok-tint); color: var(--ok); }
.no { background: #EEEBE5; color: #5E5850; }
.part { background: var(--warn-tint); color: #6E5418; }
.verdict { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); margin-top: var(--s-5); }
.verdict p { font-size: var(--t-sm); color: var(--muted); }
.verdict strong { color: var(--ink); font-weight: 500; }
@media (max-width: 640px) {
  .verdict { grid-template-columns: minmax(0, 1fr); }
  .table-wrap:has(.cmp--2) { overflow: visible; background: transparent; }
  .cmp--2 { min-width: 0 !important; }
  .cmp--2 thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp--2 tbody { display: block; }
  .cmp--2 tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--paper); border-radius: 12px; overflow: hidden; margin-bottom: var(--s-3); }
  .cmp--2 tbody th { grid-column: 1 / -1; width: auto; padding: 0.8rem 0.9rem 0.3rem; border: 0; }
  .cmp--2 td { border: 0; padding: 0.5rem 0.9rem 0.9rem; }
  .cmp--2 td::before { content: attr(data-label); display: block; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.25rem; }
  .cmp--2 .us { background: transparent; }
  .cmp--2 td.us::before { color: var(--gold); }
  .tabbar--pills { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tabbar--pills button { padding: 0.7rem 0.5rem; line-height: 1.25; }
}

.spec { background: var(--sand); border-radius: 14px; overflow: hidden; }
.band--sand .spec { background: var(--paper); }
.spec h3, .spec .spec-h { font-family: var(--sans); line-height: 1.2; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: var(--s-5) var(--s-5) var(--s-2); }
.spec table th, .spec table td { padding: 0.75rem var(--s-5); border-top: 1px solid var(--line); font-size: var(--t-sm); text-align: left; vertical-align: top; }
.spec table th { font-weight: 400; color: var(--muted); width: 46%; }
.spec table td { font-variant-numeric: tabular-nums; color: var(--ink); }
.terms th, .terms td { padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); text-align: left; font-size: var(--t-sm); vertical-align: top; }
.terms thead th { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.terms tbody th { font-weight: 500; }
.terms td.mono { white-space: nowrap; }
.terms tbody tr:last-child td, .terms tbody tr:last-child th { border-bottom: 0; }
.patents td, .patents th { padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--line); font-size: var(--t-sm); text-align: left; vertical-align: top; }
.patents thead th { font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.patents td.mono { white-space: nowrap; font-variant-numeric: tabular-nums; }
.patents tbody tr:last-child td { border-bottom: 0; }

/* ---------- cards / panels ---------- */
.panel { background: var(--sand); border-radius: 14px; padding: var(--s-6); display: grid; gap: var(--s-3); align-content: start; }
.band--sand .panel { background: var(--paper); }
.panel--flat { background: transparent !important; padding: 0; }
.band--dark .panel { background: var(--night-2); }
.panel h3 { font-size: var(--t-lg); font-weight: 500; letter-spacing: 0; }
.ticks { display: grid; gap: var(--s-2); }
.ticks li { list-style: none; padding-left: 1.6rem; position: relative; font-size: var(--t-sm); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.75rem; height: 0.4rem; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); opacity: 0.8; }
.ticks--lg li { font-size: var(--t-md); }
.plain-list { display: grid; gap: var(--s-2); }
.plain-list li { list-style: none; font-size: var(--t-sm); padding-left: 1rem; position: relative; }
.plain-list li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 5px; height: 1px; background: currentColor; }

/* scenarios carousel */
.scenes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(17rem, 1fr); gap: var(--s-4); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--s-4); }
.scene { scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: var(--ink); }
.scene .media { aspect-ratio: 4 / 5; overflow: hidden; position: relative; background: var(--sand); border-radius: 14px; }
.scene .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.scene:hover .media img { transform: scale(1.04); }
.scene .media.plan { display: grid; place-items: center; background: var(--sand); }
.scene .media.plan svg { width: 100%; height: auto; }
.scene .body { padding: var(--s-4) 0 0; display: grid; gap: var(--s-2); align-content: start; }
.scene .body h3 { font-size: var(--t-xl); }
.scene .body p { font-size: var(--t-sm); color: var(--muted); }
.scene .go { font-size: var(--t-sm); font-weight: 500; text-decoration: underline; text-underline-offset: 0.25em; }
.scene .kicker { display: none; }
.plan { background: var(--sand); }
.plan svg { width: 100%; height: 100%; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); counter-reset: s; }
.steps li { list-style: none; display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-4); border-top: 1px solid var(--ink); }
.steps li::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.steps h3 { font-size: var(--t-lg); font-weight: 500; letter-spacing: 0; }
.steps p { font-size: var(--t-sm); color: var(--muted); }
.band--dark .steps li { border-color: var(--on-night-muted); } .band--dark .steps p, .band--dark .steps li::before { color: var(--on-night-muted); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- how it works: animated cycle ---------- */
.cyc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "head fig" "side fig"; column-gap: var(--s-8); row-gap: var(--s-6); align-items: start; }
.cyc-grid > * { min-width: 0; }
.cyc-head { grid-area: head; }
.cyc-side { grid-area: side; gap: var(--s-4); }
.cyc { grid-area: fig; background: var(--night); color: var(--on-night); border-radius: 18px; padding: var(--s-5); margin: 0; display: grid; gap: var(--s-3);
  --spray: #F2C46B; --line: #3A434E; --stain: 1; --wet: 0; --moist: 0; }
.cyc[data-phase="dose"] { --line: #F2C46B; --stain: 1; --wet: 0; --moist: 0; }
.cyc[data-step="dissolve"] { --spray: #F2C46B; --line: #F2C46B; --stain: .4; --wet: .45; --moist: 1; }
.cyc[data-step="rinse"] { --spray: #8CC2FF; --line: #8CC2FF; --stain: 0; --wet: .5; --moist: 1; }
.cyc[data-phase="dry"] { --stain: 0; --wet: 0; --moist: .1; }
.cyc[data-phase="stop"], .cyc[data-phase="aroma"] { --stain: 0; --wet: 0; --moist: .06; }

/* progress bar */
.cyc-bar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; }
.cyc-bar li { list-style: none; min-width: 0; }
.cyc-bar button { all: unset; box-sizing: border-box; display: grid; gap: 6px; width: 100%; cursor: pointer; padding: 4px 0; }
.cyc-bar button:focus-visible { outline: 2px solid var(--on-night); outline-offset: 2px; border-radius: 4px; }
.cyc-bar i { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.16); position: relative; overflow: hidden; }
.cyc-bar i::after { content: ""; position: absolute; inset: 0; background: var(--on-night); transform-origin: left; transform: scaleX(0); }
.cyc-bar .done i::after { transform: scaleX(1); opacity: .55; }
.cyc-bar .on i::after { transform: scaleX(1); }
[data-playing="true"] .cyc-bar .on i::after { animation: segfill var(--seg-dur, 3s) linear forwards; }
@keyframes segfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cyc-bar span { font-size: 0.6875rem; letter-spacing: .04em; color: var(--on-night-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cyc-bar .on span { color: #fff; }
.cyc-cap { min-height: 3.2em; }
.cyc-cap p { margin: 0; font-size: var(--t-base, 1rem); line-height: 1.45; color: #fff; }
.cyc-cap b { font-weight: 500; color: var(--gold-soft); margin-right: .35em; font-variant-numeric: tabular-nums; }

/* svg */
.cyc svg { width: 100%; height: auto; max-height: 40rem; display: block; margin-inline: auto; }
.cyc text { font-family: var(--sans); font-size: 13px; letter-spacing: 0.05em; fill: #8C949E; }
.cyc .tiny-t { font-size: 10px; }
.cyc .foot-t { font-size: 10px; fill: #6B7380; }
.cyc .badge text { fill: #CFF5E2; font-size: 13px; }
.cyc .lbl line { stroke: #4A5360; }
.cyc .lbl text, .cyc .lbl line { transition: fill .4s, stroke .4s; }
.cyc[data-phase="dose"] .k-dose text, .cyc[data-phase="dissolve"] .k-spray text, .cyc[data-phase="rinse"] .k-spray text,
.cyc[data-phase="dry"] .k-dry text, .cyc[data-phase="stop"] .k-stop text, .cyc[data-phase="aroma"] .k-aroma text { fill: #fff; }
.cyc[data-phase="dose"] .k-dose line, .cyc[data-phase="dissolve"] .k-spray line, .cyc[data-phase="rinse"] .k-spray line,
.cyc[data-phase="dry"] .k-dry line, .cyc[data-phase="stop"] .k-stop line, .cyc[data-phase="aroma"] .k-aroma line { stroke: #C9D1DA; }
.cyc .fx { opacity: 0; transition: opacity .5s; }
.cyc .fx-line, .cyc[data-phase="dose"] .fx-dose, .cyc[data-phase="dose"] .fx-water,
.cyc[data-phase="dissolve"] .fx-spray, .cyc[data-phase="rinse"] .fx-spray, .cyc[data-phase="dissolve"] .fx-water, .cyc[data-phase="rinse"] .fx-water,
.cyc[data-phase="dissolve"] .fx-dissolve, .cyc[data-phase="dry"] .fx-dry, .cyc[data-phase="stop"] .fx-stop, .cyc[data-phase="aroma"] .fx-aroma { opacity: 1; }
.cyc[data-phase="dry"] .fx-line, .cyc[data-phase="stop"] .fx-line, .cyc[data-phase="aroma"] .fx-line { opacity: 0; }
.cyc .stain { opacity: var(--stain); transition: opacity 3s ease; }
.cyc[data-phase="dose"] .stain { transition-duration: .6s; }
.cyc .wet { fill: #0E2A47; opacity: var(--wet); transition: opacity 1s; pointer-events: none; }
.cyc[data-phase="dry"] .wet { transition-duration: 4s; }
.cyc .hl { stroke: #5E6A78; transition: stroke .4s; }
.cyc[data-phase="aroma"] .p-aroma .hl { stroke: #B7A6F0; }
.cyc[data-phase="dry"] .p-sense .hl, .cyc[data-phase="stop"] .p-sense .hl { stroke: #6FE3CF; fill: #1C4A48; }
.cyc[data-phase="dry"] .p-heat .hl { stroke: #FF9A5A; }
.cyc[data-phase="dose"] .p-tank .hl { stroke: #F2C46B; }
.cyc .coil { stroke: #4A5360; transition: stroke .4s; }
.cyc[data-phase="dry"] .coil { stroke: #FF9A5A; }
.cyc .node { stroke: #5E6A78; }
.cyc[data-phase="dose"] .node, .cyc[data-phase="dissolve"] .node { stroke: #F2C46B; }
.cyc[data-phase="rinse"] .node { stroke: #8CC2FF; }
.cyc .fan { fill: #6B7684; transform-box: fill-box; transform-origin: center; animation: cycrot .7s linear infinite paused; }
.cyc[data-phase="dry"] .fan { fill: #FF9A5A; animation-play-state: running; }
.cyc .rotor { stroke: #9AA6B4; stroke-width: 5; fill: #9AA6B4; transform-box: fill-box; transform-origin: center; animation: cycrot 1s linear infinite paused; }
.cyc[data-phase="dissolve"] .rotor, .cyc[data-phase="rinse"] .rotor { animation-play-state: running; stroke: var(--spray); fill: var(--spray); }
@keyframes cycrot { to { transform: rotate(360deg); } }
.cyc .level { transform-box: fill-box; transform-origin: bottom; transition: transform 2.4s ease; }
.cyc[data-phase="dissolve"] .level, .cyc[data-phase="rinse"] .level, .cyc[data-phase="dry"] .level, .cyc[data-phase="stop"] .level, .cyc[data-phase="aroma"] .level { transform: scaleY(.9); }
.cyc .streak { stroke-dasharray: 1.5 10; animation: cycdash .7s linear infinite; }
.cyc .sA { animation-name: cycdash, cycblinkA; animation-duration: .7s, 1s; animation-iteration-count: infinite; }
.cyc .sB { animation-name: cycdash, cycblinkB; animation-duration: .7s, 1s; animation-iteration-count: infinite; }
@keyframes cycdash { to { stroke-dashoffset: -23; } }
@keyframes cycblinkA { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes cycblinkB { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.cyc .mist { animation: cycmist 1.4s ease-in-out infinite; }
@keyframes cycmist { 0%, 100% { opacity: 0; } 50% { opacity: .9; } }
.cyc .run { stroke-dasharray: 3 7; animation: cycdash 1s linear infinite; }
.cyc .drip { animation: cycdrip 1.1s ease-in infinite; }
@keyframes cycdrip { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(var(--fall, 120px)); opacity: .2; } }
.cyc .bub { transform-box: fill-box; transform-origin: center; animation: cycbub 1.3s ease-out infinite; }
@keyframes cycbub { 0% { transform: scale(.2); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-6px) scale(1.25); opacity: 0; } }
.cyc .flow { stroke-dasharray: 5 7; animation: cycdash .8s linear infinite; }
.cyc .air { stroke-dasharray: 6 9; animation: cycair 1.1s linear infinite; }
@keyframes cycair { to { stroke-dashoffset: -30; } }
.cyc .ping { transform-box: fill-box; transform-origin: center; animation: cycping 1.6s ease-out infinite; }
@keyframes cycping { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.cyc .wisp { stroke-dasharray: 8 10; animation: cycwisp 2.4s linear infinite; }
@keyframes cycwisp { 0% { stroke-dashoffset: 0; opacity: 0; } 20% { opacity: .9; } 100% { stroke-dashoffset: -72; opacity: 0; } }

.cyc[data-phase="rinse"] .fx-rinse, .cyc[data-phase="stop"] .fx-stop-too { opacity: 1; }
.cyc .in-t { font-size: 13px; fill: #fff; letter-spacing: .08em; }
.cyc .in-s { font-size: 11px; fill: #C9D1DA; }
.cyc .beaker { transform-box: fill-box; transform-origin: bottom; transform: scaleY(1); }
.cyc[data-phase="dose"] .beaker { animation: cycfill 2.4s .3s ease-out both; }
@keyframes cycfill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.cyc .curve { stroke-dasharray: 100; stroke-dashoffset: 0; }
.cyc[data-phase="dry"] .curve { animation: cycdraw 4.4s ease-in-out both; }
@keyframes cycdraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
/* readouts */
.hud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.12); border-radius: 12px; overflow: hidden; }
.hud > div { background: var(--night-2); padding: var(--s-3); display: grid; gap: 4px; align-content: start; min-width: 0; }
.hud-k { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--on-night-muted); }
html[lang="zh-CN"] .hud-k { letter-spacing: .04em; }
.hud b { font-weight: 400; font-size: var(--t-lg); color: #fff; font-variant-numeric: tabular-nums; }
.hud-s { font-size: var(--t-xs); color: var(--on-night-muted); }
.hud [data-v] { display: none; }
.cyc[data-phase="dose"] [data-v~="dose"], .cyc[data-phase="dissolve"] [data-v~="dissolve"], .cyc[data-phase="rinse"] [data-v~="rinse"],
.cyc[data-phase="dry"] [data-v~="dry"], .cyc[data-phase="stop"] [data-v~="stop"], .cyc[data-phase="aroma"] [data-v~="aroma"] { display: inline; }
.rounds { display: flex; gap: 5px; padding-top: 4px; }
.rounds i { width: 32px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.16); }
.rounds i:nth-child(odd).on, .rounds i:nth-child(odd).done { background: #F2C46B; }
.rounds i:nth-child(even).on, .rounds i:nth-child(even).done { background: #8CC2FF; }
.rounds i.done { opacity: .55; }
.gauge { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: rgba(255,255,255,.16); overflow: hidden; }
.gauge i { display: block; height: 100%; background: linear-gradient(90deg, #6FE3CF, #8CC2FF); transform-origin: left; transform: scaleX(var(--moist)); transition: transform 1s ease; }
.cyc[data-phase="dry"] .gauge i { transition-duration: 4.2s; }

/* chapters */
.chap { display: grid; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.chap li { list-style: none; border-bottom: 1px solid var(--line); }
.chap button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: var(--s-3); width: 100%; padding: var(--s-4) var(--s-2) var(--s-4) 0; position: relative; }
.chap button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.chap .n { font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; padding-top: .2rem; }
.chap .t { display: grid; gap: 4px; }
.chap .t b { font-weight: 500; font-size: var(--t-lg); color: var(--muted); transition: color .3s; }
.chap .t > span { font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }
.chap button[aria-current="step"] .t b, .chap button[aria-current="step"] .n { color: var(--ink); }
.chap button[aria-current="step"]::before { content: ""; position: absolute; left: -1px; top: -1px; height: 2px; width: 100%; background: var(--ink); }
.chap button:hover .t b { color: var(--ink); }
.cyc-play { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.btn--sm { padding: 0.55rem 1rem; font-size: var(--t-sm); }
[data-cycle] .when-playing { display: none; }
[data-cycle][data-playing="true"] .when-playing { display: inline; }
[data-cycle][data-playing="true"] .when-paused { display: none; }

@media (max-width: 900px) {
  .cyc-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fig" "side"; }
}
@media (max-width: 600px) {
  .cyc { padding: var(--s-3); border-radius: 14px; }
  .cyc text { font-size: 21px; letter-spacing: .01em; }
  .cyc .lbl { opacity: 0; transition: opacity .4s; }
  .cyc[data-phase="dose"] .k-dose, .cyc[data-phase="dissolve"] .k-spray, .cyc[data-phase="rinse"] .k-spray,
  .cyc[data-phase="dry"] .k-dry, .cyc[data-phase="stop"] .k-stop, .cyc[data-phase="aroma"] .k-aroma { opacity: 1; }
  html[lang="zh-CN"] .cyc .lbl text { font-size: 24px; }
  .cyc .badge text { font-size: 17px; }
  .cyc .tiny-t { font-size: 12px; }
  .cyc .in-t { font-size: 18px; }
  .cyc .in-s { font-size: 15px; }
  .cyc .foot-t { font-size: 14px; }
  .cyc-bar span { display: none; }
  .hud { grid-template-columns: minmax(0, 1fr); }
  .hud > div { grid-template-columns: 6rem minmax(0, 1fr); align-items: center; padding: var(--s-2) var(--s-3); }
  .hud .hud-s, .hud .rounds, .hud .gauge { grid-column: 2; }
}

/* why hang-wash: drum vs hanger */
.harm-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-7); }
.harm-row > div { background: var(--sand); border-radius: 14px; padding: var(--s-5); display: grid; gap: var(--s-2); align-content: start; }
.harm-row b { font-weight: 500; }
.harm-row span { font-size: var(--t-sm); color: var(--muted); line-height: 1.45; }
.harm-row svg { width: 30px; height: 30px; color: #9A4A3A; }
@media (max-width: 1000px) { .harm-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .harm-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.versus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); }
.versus > div { padding: var(--s-6); display: grid; gap: var(--s-4); align-content: start; background: var(--sand); border-radius: 14px; }
.versus > div + div { background: var(--ink); color: var(--on-night); }
.versus svg { width: 100%; max-width: 12rem; height: auto; margin-inline: auto; }
.versus .tag { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.versus > div + div .tag { color: var(--gold-soft); }
.harm { display: grid; gap: var(--s-3); }
.harm li { list-style: none; display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: var(--s-2); font-size: var(--t-sm); color: var(--muted); }
.versus > div + div .harm li { color: var(--on-night-muted); }
.harm li b { color: inherit; font-weight: 500; display: block; }
.versus > div:first-child .harm li b { color: var(--ink); }
.versus > div + div .harm li b { color: #fff; }
.harm li::before { content: "–"; color: #9A4A3A; font-weight: 600; text-align: center; }
.harm--good li::before { content: "+"; color: var(--gold-soft); }
.spin { transform-origin: 80px 112px; animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.versus .drop { animation: dropShort 1.6s linear infinite; }
@keyframes dropShort { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
@media (max-width: 760px) { .versus { grid-template-columns: minmax(0, 1fr); } .versus > div { padding: var(--s-5); } }

/* ---------- figures ---------- */
figure { margin: 0; }
.fig { display: grid; gap: var(--s-2); position: relative; }
.fig img { width: 100%; background: var(--sand); border-radius: 14px; }
.fig figcaption { font-size: var(--t-xs); color: var(--muted); }
.band--dark .fig figcaption { color: var(--on-night-muted); }
.photo-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr) minmax(0, 0.75fr); gap: var(--s-4); align-items: stretch; }
.photo-row .fig { grid-template-rows: 1fr auto; }
.photo-row .fig img { height: 100%; object-fit: cover; }
.photo-row .fig:first-child img { aspect-ratio: 4 / 3; }
.photo-row .fig:not(:first-child) img { aspect-ratio: 9 / 16; max-height: 30rem; }
@media (max-width: 760px) { .photo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .photo-row .fig:first-child { grid-column: 1 / -1; } }
.poster { position: relative; display: block; border-radius: 14px; overflow: hidden; background: var(--night); color: #fff; text-decoration: none; }
.poster img, .poster video { width: 100%; height: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; border-radius: 0; }
.poster--tile img, .poster--tile video { max-height: 30rem; }
.poster .play { position: absolute; left: 50%; top: 50%; width: 4.5rem; height: 4.5rem; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255,255,255,0.94); color: var(--ink); display: grid; place-items: center; transition: transform .2s; }
.poster .play svg { width: 1.6rem; height: 1.6rem; margin-left: 3px; }
.poster:hover .play { transform: translate(-50%, -50%) scale(1.06); }
.poster-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-6) var(--s-4) var(--s-4); background: linear-gradient(180deg, rgba(20,19,17,0), rgba(20,19,17,0.85)); font-size: var(--t-sm); font-weight: 500; }
.demo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-8); align-items: center; }
.demo > * { min-width: 0; }
.demo .poster { width: min(100%, 22rem); justify-self: center; }
.demo-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin: 0; }
.demo-facts div { border-top: 1px solid var(--line-strong); padding-top: var(--s-3); display: grid; gap: 2px; }
.band--dark .demo-facts div { border-color: #45413a; }
.demo-facts dt { font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.band--dark .demo-facts dt { color: var(--on-night-muted); }
.demo-facts dd { margin: 0; }
@media (max-width: 900px) { .demo { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }

/* proof strip */
.proof { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); }
.proof > div { display: grid; gap: 4px; padding-top: var(--s-4); border-top: 1px solid var(--ink); }
.proof b { font-size: var(--t-2xl); font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.proof span { font-size: var(--t-sm); color: var(--muted); line-height: 1.4; }
@media (max-width: 900px) { .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } .proof > div:last-child { grid-column: 1 / -1; } }

/* colourway section (product page) */
.colorways { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.cw-stage { position: relative; aspect-ratio: 1122 / 1402; width: 100%; max-height: 44rem; border-radius: 14px; overflow: hidden; background: var(--sand); }
.cw-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s; }
.cw-stage img:not(.on) { opacity: 0; }
.swatches { display: flex; flex-wrap: wrap; gap: var(--s-4); }
@media (max-width: 900px) { .colorways { grid-template-columns: minmax(0, 1fr); } }

/* partner models */
.models { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.model { background: var(--sand); border-radius: 14px; padding: var(--s-6) var(--s-5); display: grid; gap: var(--s-3); align-content: start; }
.band--sand .model { background: var(--paper); }
.model--feature { background: var(--ink) !important; color: var(--on-night); }
.model--feature .kicker { color: var(--gold-soft); }
.model.model--feature p, .model.model--feature .meta span { color: var(--on-night-muted); }
.model--feature .meta { border-color: #45413a; }
.model h3 { font-size: var(--t-xl); }
.model p { font-size: var(--t-sm); color: var(--muted); }
.model .meta { display: grid; gap: 6px; padding-top: var(--s-4); margin-top: auto; border-top: 1px solid var(--line-strong); font-size: var(--t-sm); }
.model .meta div { display: flex; justify-content: space-between; gap: var(--s-3); }
.model .meta span { color: var(--muted); }
.model .meta b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 1080px) { .models { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .models { grid-template-columns: minmax(0, 1fr); } }

/* FAQ */
.faq { display: grid; border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary { list-style: none; cursor: pointer; padding: var(--s-5) 2.5rem var(--s-5) 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: var(--t-lg); font-weight: 400; line-height: 1.4; letter-spacing: 0; }
.faq summary::after { content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 300; transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .a { padding: 0 2.5rem var(--s-5) 0; max-width: 70ch; color: var(--muted); display: grid; gap: var(--s-3); }

/* CTA band */
.cta-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: end; }
.cta-band h2 { color: var(--on-night); }
.cta-band p { color: var(--on-night-muted); max-width: 54ch; }
.cta-band .btn--ghost { color: var(--on-night) !important; border-color: var(--on-night) !important; }
@media (max-width: 800px) { .cta-band { grid-template-columns: minmax(0, 1fr); } }

/* ---------- form ---------- */
.inquiry { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.inquiry > * { min-width: 0; }
@media (max-width: 900px) { .inquiry { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }
.form { background: var(--paper); border-radius: 18px; padding: var(--s-6); display: grid; gap: var(--s-5); }
.form[hidden] { display: none; }
.form .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); }
.form .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form { padding: var(--s-5); } .form .fields { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 0.4rem; }
.field label, .field legend { font-size: var(--t-sm); font-weight: 500; color: var(--ink); }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { font: 400 var(--t-md)/1.4 var(--sans); color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem 0.9rem; width: 100%; min-width: 0; }
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; background: var(--paper); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #A3341F; }
.field .err { font-size: var(--t-xs); color: #A3341F; }
fieldset.field { border: 0; padding: 0; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips label { font-weight: 400; font-size: var(--t-sm); display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.5rem 0.9rem; cursor: pointer; background: var(--paper); }
.field .chips input { accent-color: var(--ink); margin: 0; width: auto; padding: 0; border: 0; min-width: 0; background: none; }
.chips label:has(input:checked) { border-color: var(--ink); background: var(--ink); color: #fff; }
.form .consent { font-size: var(--t-xs); color: var(--muted); }
.form-done { display: grid; gap: var(--s-3); padding: var(--s-6); border-radius: 18px; background: var(--ok-tint); color: #1E4A35; }
.form-done[hidden] { display: none; }
.contact-lines { display: grid; gap: var(--s-4); }
.contact-line { display: grid; gap: 4px; padding-bottom: var(--s-4); border-bottom: 1px solid var(--line-strong); }
.contact-line .lbl { font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.contact-line .val { font-size: var(--t-xl); font-weight: 300; display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.contact-line .val a { color: var(--ink); text-decoration: none; }
.copy { font: 500 var(--t-xs)/1 var(--sans); border: 1px solid var(--line-strong); background: transparent; border-radius: 999px; padding: 0.4rem 0.7rem; cursor: pointer; color: var(--muted); }
.copy:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- footer ---------- */
.site-footer { background: var(--night); color: var(--on-night-muted); padding-left: var(--gutter-l); padding-right: var(--gutter-r); padding-block: var(--s-8) var(--s-6); font-size: var(--t-sm); }
.site-footer a { color: var(--on-night); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.foot-tag { font-size: var(--t-2xl); font-weight: 300; color: var(--on-night); letter-spacing: -0.02em; margin-bottom: var(--s-7); max-width: 22ch; line-height: 1.15; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
.foot-grid .foot-h { font-family: var(--sans); line-height: 1.4; font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-night-muted); font-weight: 600; margin-bottom: var(--s-3); }
.foot-grid ul { display: grid; gap: var(--s-2); }
.foot-grid li { list-style: none; }
.foot-brand { display: grid; gap: var(--s-4); align-content: start; }
.foot-brand img { height: 32px; width: auto; }
.foot-brand address { font-style: normal; line-height: 1.6; }
.foot-base { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid #3A3731; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between; font-size: var(--t-xs); }
.foot-base .langs { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 1000px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

.wa { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; align-items: center; gap: 0.5rem; background: var(--ink); color: #fff; text-decoration: none; border-radius: 999px; padding: 0.75rem 1.1rem 0.75rem 0.9rem; font: 500 var(--t-sm)/1 var(--sans); box-shadow: 0 12px 28px -12px rgba(26,25,22,0.6); }
.wa:hover { background: #000; color: #fff; }
.wa svg { width: 20px; height: 20px; }
@media (max-width: 520px) { .wa span { display: none; } .wa { padding: 0.85rem; } }
.preview-flag { position: fixed; left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; font: 500 0.6875rem/1.35 var(--sans); background: #FFF4D6; color: #5A4200; border: 1px solid #E6C76A; border-radius: 10px; padding: 0.45rem 0.65rem; max-width: 15rem; }
@media (max-width: 520px) { .preview-flag { display: none; } }

/* ---------- inner pages ---------- */
.page-hero { padding-left: var(--gutter-l); padding-right: var(--gutter-r); padding-block: var(--s-7) var(--s-8); background: var(--cream); }
.page-hero .wrap { display: grid; gap: var(--s-5); }
.page-hero--split .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-8); align-items: center; }
.page-hero--split .wrap > * { min-width: 0; }
.page-hero h1 { font-size: var(--t-3xl); }
@media (max-width: 900px) { .page-hero--split .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }
h1 .soft { display: block; color: var(--muted); font-weight: 300; font-size: 0.5em; margin-top: 0.7em; line-height: 1.3; letter-spacing: -0.01em; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t-sm); color: var(--muted); }
.hero-fig { position: relative; }
.hero-fig img { border-radius: 14px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--sand); }
.hero-fig .plan { border-radius: 14px; overflow: hidden; }

/* legacy hero drawing (why page) */
.hero { position: relative; padding-left: var(--gutter-l); padding-right: var(--gutter-r); padding-block: var(--s-7) 0; background: var(--cream); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr); gap: var(--s-6); align-items: end; }
.hero-copy { display: grid; gap: var(--s-5); padding-bottom: var(--s-8); align-self: center; }
.drawing { position: relative; justify-self: center; width: min(100%, 26rem); aspect-ratio: 34 / 40; }
.drawing .unit { position: absolute; left: 26%; bottom: 0; height: 92%; width: auto; max-width: none; filter: drop-shadow(0 30px 30px rgba(26,25,22,0.22)); }
.drawing .floor { position: absolute; left: 4%; right: 4%; bottom: 0; height: 1px; background: var(--ink); opacity: 0.3; }
.dim { position: absolute; font-size: var(--t-xs); color: var(--muted); }
.dim--h { left: 16%; bottom: 0; height: 92%; width: 1px; background: var(--line-strong); }
.dim--h b { position: absolute; top: 50%; left: -0.4rem; transform: translate(-100%, -50%) rotate(-90deg); transform-origin: 100% 50%; font-weight: 400; white-space: nowrap; }
.dim--w { left: 26%; width: 36.9%; top: 2%; height: 1px; background: var(--line-strong); }
.dim--w b { position: absolute; left: 50%; top: -1.6rem; transform: translateX(-50%); font-weight: 400; white-space: nowrap; }
.callout { position: absolute; display: grid; gap: 2px; font-size: var(--t-xs); line-height: 1.35; max-width: 10rem; left: 68%; }
.callout strong { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.625rem; color: var(--gold); }
.callout span { color: var(--muted); }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } .hero-copy { padding-bottom: 0; } }
@media (max-width: 480px) { .callout { display: none; } .drawing .unit { left: 32%; } .dim--w { left: 32%; } }
.specbar { display: none; }

/* flow, timeline */
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.flow > div { background: var(--sand); border-radius: 14px; padding: var(--s-5); display: grid; gap: var(--s-2); align-content: start; }
.band--sand .flow > div { background: var(--paper); }
.flow .who { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); font-weight: 600; }
.flow h3 { font-size: var(--t-lg); font-weight: 500; letter-spacing: 0; }
.flow p { font-size: var(--t-sm); color: var(--muted); }
@media (max-width: 760px) { .flow { grid-template-columns: minmax(0, 1fr); } }
.timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.timeline > div { padding-top: var(--s-4); border-top: 1px solid var(--ink); display: grid; gap: var(--s-2); align-content: start; }
.timeline .yr { font-size: var(--t-2xl); font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.timeline p { font-size: var(--t-sm); color: var(--muted); }
@media (max-width: 800px) { .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .timeline { grid-template-columns: minmax(0, 1fr); } }

/* insights + article */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.post { display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-4); border-top: 1px solid var(--ink); text-decoration: none; color: var(--ink); }
.post:hover h3 { text-decoration: underline; text-underline-offset: 0.2em; }
.post .meta { font-size: var(--t-xs); letter-spacing: 0.06em; color: var(--muted); display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; text-transform: uppercase; }
.post h3 { font-size: var(--t-xl); }
.post p { font-size: var(--t-sm); color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filters button { font: 400 var(--t-sm)/1 var(--sans); padding: 0.6rem 1rem; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; cursor: pointer; color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (max-width: 900px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .posts { grid-template-columns: minmax(0, 1fr); } }
.article { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.article > * { min-width: 0; }
.toc { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 6rem); display: grid; gap: var(--s-2); font-size: var(--t-sm); }
.toc a { color: var(--muted); text-decoration: none; padding: 0.2rem 0 0.2rem 0.8rem; border-left: 1px solid var(--line-strong); }
.toc a:hover { color: var(--ink); border-color: var(--ink); }
.prose { display: grid; gap: var(--s-4); max-width: 66ch; font-size: 1.0625rem; }
.prose h2 { font-size: var(--t-2xl); margin-top: var(--s-6); }
.prose h3 { margin-top: var(--s-3); font-weight: 500; font-size: var(--t-lg); letter-spacing: 0; }
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: var(--s-2); }
.prose a { text-decoration: underline; }
.takeaways { background: var(--sand); border-radius: 14px; padding: var(--s-5); display: grid; gap: var(--s-3); }
.byline { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t-sm); color: var(--muted); }
@media (max-width: 900px) { .article { grid-template-columns: minmax(0, 1fr); } .toc { position: static; } }
@media (max-width: 640px) {
  .swatch-list { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
  .facts dd { font-size: var(--t-md); }
}
.band--sand .harm-row > div, .band--sand .versus > div:first-child { background: var(--paper); }
.cmp .us { background: rgba(138,114,70,0.07); }
.form { background: var(--paper); }

/* language switch */
.lang-switch { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px; gap: 2px; }
.lang-switch a, .lang-switch span { font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.04em; padding: 0.4rem 0.65rem; border-radius: 999px; text-decoration: none; color: var(--muted); line-height: 1; }
.lang-switch span[aria-current] { background: var(--ink); color: #fff; }
.lang-switch a:hover { color: var(--ink); background: var(--sand); }
.foot-base .langs span { color: var(--on-night); }
@media (max-width: 520px) { .lang-switch { display: inline-flex; } }

/* Chinese typography */
html[lang="zh-CN"] { --sans: "Albert Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif; }
html[lang="zh-CN"] body { line-height: 1.75; }
html[lang="zh-CN"] h1, html[lang="zh-CN"] h2, html[lang="zh-CN"] h3 { font-weight: 400; letter-spacing: 0.01em; line-height: 1.25; }
html[lang="zh-CN"] h1 { font-weight: 300; }
html[lang="zh-CN"] .eyebrow, html[lang="zh-CN"] .kicker, html[lang="zh-CN"] .facts dt, html[lang="zh-CN"] .contact-line .lbl, html[lang="zh-CN"] .foot-grid .foot-h { letter-spacing: 0.08em; }
html[lang="zh-CN"] .lede, html[lang="zh-CN"] .answer, html[lang="zh-CN"] .pdp-intro p { line-height: 1.8; }
html[lang="zh-CN"] .pdp-head h1 { word-break: keep-all; font-size: var(--t-3xl); }
html[lang="zh-CN"] .pdp-head h1 .cat { font-size: var(--t-xs); }
.rotor-s { transform-box: fill-box; transform-origin: center; animation: cycrot 1.2s linear infinite; }

/* home solution: moments */
.moment { display: grid; gap: var(--s-3); align-content: start; }
.moment-img { position: relative; border-radius: 14px; overflow: hidden; background: var(--sand); }
.moment-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.moment h3 { font-size: var(--t-lg); font-weight: 500; letter-spacing: 0; }
.moment p { font-size: var(--t-sm); color: var(--muted); margin-top: var(--s-1, 0.25rem); }
@media (max-width: 520px) {
  .site-header .wrap { gap: var(--s-3); }
  .header-cta { gap: 6px; }
  .header-cta .btn { padding-inline: 0.8rem; font-size: var(--t-xs); }
  .lang-switch a, .lang-switch span { padding: 0.38rem 0.5rem; }
}
@media (max-width: 360px) { .lang-switch a, .lang-switch span { padding: 0.35rem 0.4rem; } .brand img { height: 24px; } }

/* home: the problem with tumbling */
:root { --serif: Georgia, "Songti SC", "STSong", "Noto Serif SC", "Noto Serif CJK SC", serif; }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.serif em { font-style: italic; color: var(--gold); }
html[lang="zh-CN"] .serif em { font-style: normal; }
.problem-head { display: grid; gap: var(--s-4); max-width: 46rem; margin-bottom: var(--s-7); }
.problem-head h2 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.8rem); line-height: 1.12; }
.problem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-6); row-gap: var(--s-6); margin: 0; padding: 0; }
.problem-grid li { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); row-gap: var(--s-2); align-content: start; padding-top: var(--s-4); border-top: 1px solid var(--line-strong); }
.problem-grid svg { width: 26px; height: 26px; color: #9A4A3A; grid-row: span 2; }
.problem-grid .n { font-size: var(--t-xs); color: var(--gold); letter-spacing: .1em; align-self: center; }
.problem-grid h3 { grid-column: 2; font-family: var(--serif); font-weight: 400; font-size: var(--t-xl, 1.5rem); letter-spacing: 0; }
.problem-grid p { grid-column: 2; font-size: var(--t-sm); color: var(--muted); line-height: 1.65; }
@media (max-width: 900px) { .problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .problem-grid { grid-template-columns: minmax(0, 1fr); } }
.problem-cta { margin-top: var(--s-8); }
/* ---------- home hero: dark stage, swappable finish ---------- */
.stage-hero { position: relative; padding-inline: max(var(--gutter-l), 4vw); background: #0C0C0B; color: var(--on-night); min-height: max(clamp(36rem, calc(100svh - 4.5rem), 60rem), min(50vw, 75rem)); display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.stage-media { position: absolute; inset: 0; z-index: -1; }
.stage-media picture, .stage-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-media img { object-fit: cover; object-position: 70% 55%; }
.stage-cab { opacity: 0; transition: opacity .5s ease; }
.stage-hero[data-active="graphite"] .stage-cab[data-cw="graphite"], .stage-hero[data-active="champagne"] .stage-cab[data-cw="champagne"], .stage-hero[data-active="walnut"] .stage-cab[data-cw="walnut"] { opacity: 1; }
.stage-grid { position: static; width: 100%; min-height: inherit; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding-block: var(--s-8); }
.stage-copy { max-width: min(44rem, 52vw); display: grid; gap: var(--s-5); }
.stage-copy .kicker { color: var(--gold-soft); letter-spacing: .22em; }
.stage-copy h1 { font-size: clamp(2.4rem, 1.4rem + 3vw, 4.4rem); line-height: 1.08; color: #F5F1EA; }
.stage-copy h1 em { color: #D9C9A6; }
html[lang="zh-CN"] .stage-copy h1 { font-size: clamp(2.3rem, 1.3rem + 3vw, 4.3rem); letter-spacing: .01em; word-break: keep-all; }
.stage-lede { font-size: var(--t-lg); line-height: 1.7; color: #CFC8BD; max-width: 36rem; }
.stage-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-2); }
.stage-ctas .btn--ghost { color: var(--on-night); border-color: rgba(239,235,228,.7); }
.stage-ctas .btn--ghost:hover { background: var(--on-night); color: var(--night); }
.stage-finish { position: absolute; left: var(--fx, auto); top: var(--fy, auto); right: var(--fr, 5vw); bottom: var(--fb, 12%); display: grid; gap: var(--s-3); padding: var(--s-3) 0 var(--s-3) var(--s-5); border-left: 1px solid rgba(239,235,228,.18); }
.stage-copy h1 .ln { display: block; white-space: nowrap; }
.stage-finish .lbl { font-size: var(--t-sm); color: #A9A297; }
.stage-finish .swatch { color: #A9A297; }
.stage-finish .swatch[aria-pressed="true"] { color: #fff; }
.stage-finish .swatch[aria-pressed="true"] i { box-shadow: 0 0 0 2px #0C0C0B, 0 0 0 3px #F5F1EA; }
.stage-finish .swatch i { box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.stage-tag { position: absolute; right: var(--gutter-r, 16px); bottom: 12px; font-size: 0.6875rem; letter-spacing: .1em; color: #8B857B; display: none; }
.stage-hero[data-active="graphite"] .stage-tag[data-cw="graphite"], .stage-hero[data-active="champagne"] .stage-tag[data-cw="champagne"], .stage-hero[data-active="walnut"] .stage-tag[data-cw="walnut"] { display: block; }
@media (max-width: 1100px) and (min-width: 761px) { .stage-copy { max-width: 32rem; } }
@media (max-width: 760px) {
  .stage-copy { max-width: none; }
  .stage-copy h1 .ln { white-space: normal; }
  .stage-hero { min-height: auto; align-items: start; }
  .stage-media img { object-position: 50% 100%; }
  .stage-grid { grid-template-columns: minmax(0, 1fr); align-content: start; padding-top: var(--s-6); padding-bottom: 0; min-height: 0; }
  .stage-copy { gap: var(--s-4); }
  .stage-lede { font-size: var(--t-md, 1rem); }
  .stage-grid { padding-bottom: 115vw; }
  .stage-finish { left: max(var(--gutter-l), 4vw) !important; top: auto !important; right: auto !important; bottom: 10vw; padding: var(--s-2) 0 var(--s-2) var(--s-3); }
  .stage-finish .swatch-list { display: grid; gap: var(--s-2); }
  .stage-finish .lbl:last-child { display: none; }
}
#demo, #how-it-works, #inquiry { scroll-margin-top: 6.5rem; }
/* how it works: fit one laptop screen */
#how-it-works { padding-block: clamp(1.75rem, 4vh, 3.5rem); }
#how-it-works .cyc-grid { align-items: center; row-gap: var(--s-4); }
#how-it-works .cyc-head { gap: var(--s-3); }
#how-it-works .cyc-head h2 { font-size: clamp(1.8rem, 1.1rem + 1.7vw, 2.9rem); line-height: 1.15; }
#how-it-works .cyc-head .lede { font-size: var(--t-md, 1rem); line-height: 1.7; }
#how-it-works .chap button { padding: var(--s-3) var(--s-2) var(--s-3) 0; }
#how-it-works .chap .t b { font-size: var(--t-md, 1rem); }
#how-it-works .chap .t > span { display: none; }
#how-it-works .chap button[aria-current="step"] .t > span { display: block; }
.cyc { padding: var(--s-4); gap: var(--s-2); align-self: center; }
.cyc-cap { min-height: 2.9em; }
.cyc-cap p { font-size: var(--t-sm); }
.cyc svg { height: 25rem; width: auto; max-width: 100%; max-height: none; }
@media (max-height: 760px) and (min-width: 901px) { .cyc svg { height: 21rem; } }
.hud > div { padding: var(--s-2) var(--s-3); gap: 2px; }
.hud b { font-size: var(--t-md, 1rem); }
@media (max-width: 900px) { #how-it-works .chap .t > span { display: block; } .cyc svg { height: auto; width: 100%; } }
#compare { padding-top: clamp(2.5rem, 4vw, 3.75rem); }

/* ---------- product page: shop layout ---------- */
.shop { padding: var(--s-4) max(var(--gutter-l), 4vw) var(--s-7); background: var(--cream); }
.shop .crumbs { margin-bottom: var(--s-4); }
.shop-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: start; }
.shop-gallery { position: sticky; top: 5.5rem; display: grid; gap: var(--s-3); }
.shop-main { position: relative; background: #fff; border-radius: 16px; overflow: hidden; aspect-ratio: 1 / 1; }
.shop-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-main .real-tag { position: absolute; left: 12px; top: 12px; }
.shop-thumbs { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
.shop-thumb { all: unset; box-sizing: border-box; cursor: pointer; border-radius: 10px; overflow: hidden; aspect-ratio: 1 / 1; background: #fff; border: 2px solid transparent; }
.shop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-thumb[aria-current="true"] { border-color: var(--ink); }
.shop-thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.shop-buy { display: grid; gap: var(--s-4); }
.shop-buy h1 { font-size: clamp(2.2rem, 1.6rem + 1.8vw, 3.2rem); font-weight: 300; line-height: 1.1; }
.shop-lede { color: var(--muted); line-height: 1.7; }
.shop-price { display: grid; gap: 4px; padding: var(--s-3) var(--s-4); background: var(--paper); border-radius: 12px; border: 1px solid var(--line); }
.shop-price b { font-size: var(--t-lg); font-weight: 500; }
.shop-price span { font-size: var(--t-sm); color: var(--muted); }
.shop-opt { display: grid; gap: var(--s-2); }
.shop-opt .lbl { font-size: var(--t-sm); font-weight: 500; }
.shop-opt .hint { font-size: var(--t-xs); color: var(--muted); }
.shop-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip-opt { display: inline-flex; align-items: center; gap: .5rem; font: 400 var(--t-sm)/1 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px; padding: .6rem 1rem; cursor: pointer; }
.chip-opt i { width: 1rem; height: 1rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.chip-opt[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 500; }
.shop-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.card-opt { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 4px; padding: var(--s-3); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 12px; }
.card-opt b { font-weight: 500; }
.card-opt span { font-size: var(--t-xs); color: var(--muted); line-height: 1.5; }
.card-opt em { font-style: normal; font-size: var(--t-xs); color: var(--gold); font-weight: 500; }
.card-opt[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.card-opt:focus-visible, .chip-opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.shop-ctas { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.shop-ctas .btn { flex: 1 1 12rem; justify-content: center; }
.shop-trust { display: grid; gap: var(--s-2); margin: 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--line); }
.shop-trust li { list-style: none; display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: var(--s-2); font-size: var(--t-sm); color: var(--muted); align-items: start; }
.shop-trust svg { width: 1.2rem; height: 1.2rem; color: var(--gold); }
.shop-trust b { color: var(--ink); font-weight: 500; }
.ec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.ec img { width: 100%; height: auto; border-radius: 14px; display: block; background: var(--sand); }
@media (max-width: 960px) {
  .shop-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .shop-gallery { position: static; }
  .shop-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 640px) { .ec-grid { grid-template-columns: minmax(0, 1fr); } .shop-cards { grid-template-columns: minmax(0, 1fr); } }

.shop-main .shop-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.shop-main .shop-nav.prev { left: 12px; } .shop-main .shop-nav.next { right: 12px; }
.shop-nav { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(255,255,255,.92); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.shop-nav svg { width: 1.1rem; height: 1.1rem; }
.shop-nav:hover { background: #fff; border-color: var(--ink); }
.shop-nav.sm { width: 2.25rem; height: 2.25rem; flex: none; box-shadow: none; }
.shop-strip { display: flex; align-items: center; gap: var(--s-2); }
.shop-strip .shop-thumbs { flex: 1; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.shop-strip .shop-thumbs::-webkit-scrollbar { display: none; }
.shop-strip .shop-thumb { flex: 0 0 calc((100% - 40px) / 6); scroll-snap-align: start; }
@media (max-width: 960px) { .shop-strip .shop-thumb { flex-basis: calc((100% - 24px) / 4); } }

/* product page refinements */
.shop-buy h1 { font-weight: 400; letter-spacing: -0.015em; }
.shop-buy { padding-top: var(--s-2); }
.shop-uses { gap: var(--s-2); }
.shop-uses .pill { font-size: var(--t-xs); padding: .35rem .75rem; }
.ec-ctrl { display: flex; gap: var(--s-2); }
#detail-images .ec-grid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
#detail-images .ec-grid::-webkit-scrollbar { display: none; }
#detail-images .ec { flex: 0 0 calc((100% - 32px) / 2.6); scroll-snap-align: start; }
@media (max-width: 900px) { #detail-images .ec { flex-basis: 82%; } }
.shop-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(251,248,242,.97); backdrop-filter: blur(8px); border-top: 1px solid var(--line); padding: .6rem max(var(--gutter-l), 4vw); }
.shop-bar[hidden] { display: none; }
.shop-bar .wrap { display: flex; align-items: center; gap: var(--s-3); }
.shop-bar img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; }
.shop-bar .t { display: grid; flex: 1; min-width: 0; }
.shop-bar .t b { font-weight: 500; }
.shop-bar .t span { font-size: var(--t-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .shop-bar img { display: none; } }
body:has(.shop-bar:not([hidden])) .wa { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

/* why page hero: inside a tumble drum */
.hero .drum-fig { justify-self: center; width: min(100%, 30rem); margin: 0 0 var(--s-8); display: grid; gap: var(--s-5); }
.drum-fig .drum { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.drum-fig figcaption { display: grid; gap: var(--s-3); }
.drum-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-5); margin: 0; padding: 0; counter-reset: dl; }
.drum-legend li { list-style: none; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: var(--s-2); row-gap: 2px; counter-increment: dl; align-content: start; font-size: var(--t-sm); line-height: 1.5; }
.drum-legend li::before { content: counter(dl); grid-row: span 2; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--gold); color: #fff; font-size: 0.75rem; font-weight: 600; display: grid; place-items: center; margin-top: 1px; }
.drum-legend b { font-weight: 600; color: var(--ink); }
.drum-legend span { color: var(--muted); font-size: var(--t-xs); line-height: 1.55; }
.hero:has(.drum-fig) .wrap { align-items: center; }
@media (max-width: 900px) { .hero .drum-fig { width: min(100%, 28rem); } }
@media (max-width: 480px) { .drum-legend { grid-template-columns: minmax(0, 1fr); } }

/* why page */
.why-hero h1 { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.8rem); line-height: 1.08; }
.why-hero .answer { max-width: 40rem; }
.nine-head { display: grid; gap: var(--s-3); justify-items: center; text-align: center; margin-bottom: var(--s-7); }
.nine-head h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1.15; }
.nine .problem-grid { row-gap: var(--s-7); }
.sol { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; }
.sol h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); line-height: 1.18; }
.sol-list { display: grid; margin: var(--s-2) 0 0; padding: 0; }
.sol-list li { list-style: none; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: var(--t-md, 1rem); line-height: 1.55; }
.sol-list li::before { content: ""; width: 1.25rem; height: 1.25rem; margin-top: .15rem; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%238A7246' stroke-width='1.8'/%3E%3C/svg%3E") center/80% no-repeat; grid-row: span 2; }
.sol-list b { font-weight: 600; }
.sol-list span { color: var(--muted); font-size: var(--t-sm); }
.sol-fig { margin: 0; display: grid; gap: var(--s-2); }
.sol-fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 14px; background: var(--night); }
.sol-fig figcaption { font-size: var(--t-xs); color: var(--muted); }
.cmp--why tbody th { font-weight: 600; }
.cmp--why td.us { font-weight: 600; color: var(--ink); }
.why-end { text-align: center; padding-block: clamp(4rem, 8vw, 7rem); background: var(--night-2); border-bottom: 1px solid rgba(255,255,255,.06); }
.why-end .wrap { display: grid; gap: var(--s-4); justify-items: center; }
.why-end h2 { color: var(--on-night); font-size: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); line-height: 1.1; }
.why-end p { color: var(--on-night-muted); max-width: 46ch; }
.why-end .row { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-3); }
.why-end .btn--ghost { color: var(--on-night) !important; border-color: var(--on-night) !important; }
@media (max-width: 900px) { .sol { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } .sol-fig img { aspect-ratio: 4 / 3; } }

.tabs-cta { margin-top: var(--s-6); }

/* migrated articles */
.post-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--sand); }
.post-hero h1 { max-width: 24ch; }
.post-wrap { display: grid; gap: var(--s-6); justify-items: center; }
.post-cover { margin: 0; width: 100%; max-width: 54rem; }
.post-cover img { width: 100%; height: auto; border-radius: 14px; background: var(--sand); }
.post-body { width: 100%; max-width: 46rem; }
.post-body h2 { margin-top: var(--s-7); }
.post-body p > em:only-child { font-size: var(--t-xs); color: var(--muted); font-style: normal; }
.post-body .lc-table-scroll { overflow-x: auto; margin: var(--s-5) 0; }
.post-body table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 32rem; }
.post-body th, .post-body td { text-align: left; vertical-align: top; padding: .7rem .8rem; border-bottom: 1px solid var(--line); }
.post-body thead th { font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.post-body a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }

/* cycle diagram: three ceiling nozzles */
.cyc .nozzle { fill: #9AA6B4; stroke: #0E1115; stroke-width: .8; transition: fill .3s; }
.cyc[data-phase="dissolve"] .nozzle, .cyc[data-phase="rinse"] .nozzle { fill: var(--spray); }
.post-wrap { grid-template-columns: minmax(0, 1fr); }
.post-wrap > * { min-width: 0; }
.post-body figure, .post-body .wp-block-table { margin: var(--s-5) 0; max-width: 100%; overflow-x: auto; }
.post-body img { max-width: 100%; height: auto; }

/* damage grids with illustrations */
.problem-grid--img li { grid-template-columns: auto minmax(0, 1fr); padding-top: 0; border-top: 0; }
.problem-grid--img .dmg { grid-column: 1 / -1; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--sand); margin-bottom: var(--s-3); }
.problem-grid--img .n { grid-row: auto; }
.problem-grid--img h3 { grid-column: 2; }
.problem-grid--img p { grid-column: 1 / -1; }
.problem-grid--img .dmg--tile { display: grid; place-content: center; justify-items: center; gap: var(--s-3); background: var(--night); color: var(--on-night-muted); }
.dmg--tile svg { width: 44px !important; height: 44px !important; color: var(--gold-soft) !important; }
.dmg--tile span { font-size: var(--t-xs); letter-spacing: .14em; }
.dmg-note { margin-top: var(--s-6); font-size: var(--t-xs); color: var(--muted); }

/* video overlay */
.vplay { position: absolute; inset: 0; border: 0; padding: 0; background: linear-gradient(180deg, rgba(20,19,17,0) 55%, rgba(20,19,17,.55)); color: #fff; cursor: pointer; text-align: left; }
.vplay[hidden] { display: none; }
.vplay:hover .play { transform: translate(-50%, -50%) scale(1.06); }
.vplay:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.demo { align-items: center; }

/* one display voice: every page and section headline in the serif used by the home hero */
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; }
h1 em, h2 em { font-style: italic; color: var(--gold); }
html[lang="zh-CN"] h1 em, html[lang="zh-CN"] h2 em { font-style: normal; }
.post-body h2 { font-size: var(--t-xl, 1.5rem); }
.cyc h2, .tabpanel h2 { font-family: var(--sans); }
@media (min-width: 1100px) {
  .scenes { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; }
  .scenes .scene .media { aspect-ratio: 3 / 2; }
}

/* mobile: damage illustrations in two columns so the list stays scannable */
@media (max-width: 600px) {
  .problem-grid--img { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); row-gap: var(--s-6); }
  .problem-grid--img .dmg { aspect-ratio: 1; margin-bottom: var(--s-2); border-radius: 10px; }
  .problem-grid--img h3 { font-size: 1.05rem; line-height: 1.3; }
  .problem-grid--img p { font-size: .8125rem; line-height: 1.55; }
}

/* quiet entrance for section headings and cards (JS adds .rv only when motion is allowed) */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }
.scene .media img, .post-thumb, .problem-grid--img .dmg { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.post:hover .post-thumb { transform: scale(1.02); }

/* company documents */
.photo-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.photo-row--3 img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 800px) { .photo-row--3 { grid-template-columns: minmax(0, 1fr); } }
.certs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 900px) { .certs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .certs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cert { display: grid; gap: var(--s-2); text-decoration: none; color: var(--muted); font-size: var(--t-xs); }
.cert img { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); background: #fff; box-shadow: 0 1px 2px rgba(26,25,22,.06); transition: transform .3s, box-shadow .3s; }
.cert:hover img { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(26,25,22,.12); }
.cert--wide { align-self: center; }
.reg { display: grid; gap: 0; margin: var(--s-2) 0 var(--s-3); }
.reg div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.reg dt { color: var(--muted); }
.reg dd { margin: 0; color: var(--ink); }
@media (max-width: 520px) { .reg div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.patents td:last-child { white-space: nowrap; }
/* lightbox */
.lb { border: 0; padding: 0; background: transparent; max-width: min(92vw, 1100px); max-height: 92vh; }
.lb::backdrop { background: rgba(20,19,17,.82); }
.lb img { display: block; max-width: min(92vw, 1100px); max-height: 84vh; width: auto; height: auto; border-radius: 8px; background: #fff; }
.lb p { color: #EFEBE4; font-size: var(--t-sm); margin: var(--s-3) 0 0; text-align: center; }
.lb button { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--ink); font-size: 1.4rem; cursor: pointer; }

/* hotel: labor comparison */
.labor-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-5); align-items: start; }
@media (max-width: 800px) { .labor-grid { grid-template-columns: minmax(0, 1fr); } }
.labor-col { border-radius: 14px; padding: var(--s-6); }
.labor-col--old { background: var(--sand); }
.labor-col--new { background: var(--night); color: var(--on-night); }
.labor-col--new .kicker { color: var(--gold-soft); }
.labor-col ol { list-style: none; margin: var(--s-4) 0 0; padding: 0; counter-reset: st; display: grid; gap: 0; }
.labor-col li { counter-increment: st; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: baseline; padding: .7rem 0; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.labor-col--new li { border-top-color: rgba(255,255,255,.12); }
.labor-col li::before { content: counter(st, decimal-leading-zero); font-size: var(--t-xs); letter-spacing: .08em; color: var(--muted); }
.labor-col--old li::before { color: #9A4A3A; }
.labor-col--new li::before { color: var(--gold-soft); }
.labor-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin: 0; }
.labor-stats div { border-top: 1px solid var(--ink); padding-top: var(--s-3); }
.labor-stats dt { font-family: var(--serif); font-size: clamp(2.4rem, 1.8rem + 2vw, 3.6rem); line-height: 1; }
.labor-stats dd { margin: var(--s-2) 0 0; font-size: var(--t-sm); color: var(--muted); }
@media (max-width: 600px) { .labor-stats { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } }
.labor .note .link-arrow { margin-left: .4em; }
.patents .was { display: block; color: var(--muted); font-size: var(--t-xs); margin-top: 2px; }
.certs--mini { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); align-self: center; }
.certs--mini img { width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--line); background: #fff; box-shadow: 0 1px 2px rgba(26,25,22,.06); }
@media (max-width: 520px) { .certs--mini { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } }

/* solution: value / pain-point cards */
.value-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 1000px) { .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .value-grid { grid-template-columns: minmax(0, 1fr); } }
.value-grid li { background: var(--paper); border-radius: 14px; padding: var(--s-5); display: grid; gap: var(--s-2); align-content: start; }
.value-grid .n { font-size: var(--t-xs); letter-spacing: .1em; color: var(--gold); }
.value-grid h3 { font-family: var(--serif); font-weight: 400; font-size: var(--t-xl, 1.4rem); line-height: 1.25; }
.value-grid p { font-size: var(--t-sm); color: var(--muted); line-height: 1.6; margin: 0; }
.grid.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid.g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid.g-4 { grid-template-columns: minmax(0, 1fr); } }
.sol--rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.back .sol-fig img { aspect-ratio: 4 / 3; object-position: 50% 40%; }
@media (max-width: 900px) { .sol--rev { grid-template-columns: minmax(0, 1fr); } .sol--rev .sol-fig { order: 2; } }

/* policy pages */
.legal-updated { font-size: var(--t-xs); color: var(--muted); letter-spacing: .04em; }
.legal { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.legal-nav { position: sticky; top: 6rem; display: grid; gap: var(--s-2); font-size: var(--t-sm); }
.legal-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.legal-nav a { display: block; padding: .45rem .75rem; border-radius: 8px; color: var(--muted); text-decoration: none; }
.legal-nav a:hover { color: var(--ink); background: var(--sand); }
.legal-nav a[aria-current="page"] { color: var(--ink); background: var(--sand); font-weight: 500; }
.legal-toc a { font-size: var(--t-xs); padding: .3rem .75rem; }
.legal-body { max-width: 46rem; }
.legal-body h2 { font-size: var(--t-xl, 1.5rem); margin-top: var(--s-6); display: flex; gap: var(--s-3); align-items: baseline; scroll-margin-top: 6rem; }
.legal-body h2 .num { font-family: var(--sans); font-size: var(--t-xs); letter-spacing: .1em; color: var(--gold); }
.legal-body section { display: grid; gap: var(--s-3); }
.legal-body ul { list-style: none; padding: 0; }
.legal-body ul li { position: relative; padding-left: 1.4rem; }
.legal-body ul li::before { content: ""; position: absolute; left: 0; top: .7em; width: .5rem; height: 1px; background: var(--gold); }
.legal-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper); margin: 0; }
.legal-summary div { padding: var(--s-4); border-right: 1px solid var(--line); }
.legal-summary div:last-child { border-right: 0; }
.legal-summary dt { font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.legal-summary dd { margin: 6px 0 0; font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }
.legal-contact { margin-top: var(--s-6); padding: var(--s-5); border-radius: 14px; background: var(--sand); font-size: var(--t-sm); }
@media (max-width: 900px) { .legal { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } .legal-nav { position: static; } .legal-toc, .legal-nav .kicker + .legal-toc { display: none; } .legal-nav ul:first-of-type { display: flex; flex-wrap: wrap; gap: 6px; } .legal-nav a { border: 1px solid var(--line); } }
@media (max-width: 600px) { .legal-summary div { border-right: 0; border-bottom: 1px solid var(--line); } }

/* installation guide */
.page-hero h1 em { font-style: italic; color: var(--gold); }
html[lang="zh-CN"] .page-hero h1 em { font-style: normal; }
.ig-fig { margin: 0; display: grid; gap: var(--s-2); background: var(--paper); border-radius: 14px; padding: var(--s-5); }
.ig-fig svg { width: 100%; height: auto; display: block; }
.ig-fig figcaption { font-size: var(--t-xs); color: var(--muted); }
.ig-req { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 1000px) { .ig-req { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ig-req { grid-template-columns: minmax(0, 1fr); } }
.ig-req > div { background: var(--sand); border-radius: 14px; padding: var(--s-5); display: grid; gap: var(--s-2); align-content: start; }
.ig-ico svg { width: 28px; height: 28px; color: var(--gold); }
.ig-req h3, .ig-programs h3, .ig-steps h3 { font-family: var(--serif); font-weight: 400; font-size: var(--t-xl, 1.4rem); }
.ig-req p, .ig-programs p, .ig-steps p { font-size: var(--t-sm); color: var(--muted); line-height: 1.6; margin: 0; }
.ig-spec th { color: var(--muted); font-weight: 400; width: 20%; }
.ig-spec td { color: var(--ink); }
.ig-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); counter-reset: ig; }
@media (max-width: 900px) { .ig-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ig-steps { grid-template-columns: minmax(0, 1fr); } }
.ig-steps li { counter-increment: ig; border-top: 1px solid var(--ink); padding-top: var(--s-4); display: grid; gap: var(--s-2); align-content: start; }
.ig-steps li::before { content: counter(ig, decimal-leading-zero); font-size: var(--t-xs); letter-spacing: .1em; color: var(--gold); }
.ig-programs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 900px) { .ig-programs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ig-programs { grid-template-columns: minmax(0, 1fr); } }
.ig-programs > div { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: var(--s-5); display: grid; gap: var(--s-2); align-content: start; }
.band--paper .ig-programs > div { background: var(--cream); }
.ig-check { border-radius: 14px; background: var(--night); color: var(--on-night); padding: var(--s-6); display: grid; gap: var(--s-3); }
.ig-check .kicker { color: var(--gold-soft); }
.ig-check li { color: var(--on-night); }

/* distributor brief */
.brief-cover { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; }
.brief-img { margin: 0; }
.brief-img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: var(--night); }
.brief-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--s-6) var(--s-8); align-items: start; }
.brief-row > header { display: grid; gap: var(--s-2); }
.brief-row > header h2 { font-size: var(--t-2xl); }
.brief-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); margin: 0; }
.brief-stats div { border-top: 1px solid var(--ink); padding-top: var(--s-3); }
.brief-stats dt { font-family: var(--serif); font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); line-height: 1.1; }
.brief-stats dd { margin: var(--s-2) 0 0; font-size: var(--t-xs); color: var(--muted); }
.brief-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); counter-reset: bs; }
.brief-steps li { counter-increment: bs; display: grid; gap: 4px; border-top: 1px solid var(--line-strong); padding-top: var(--s-3); font-size: var(--t-sm); }
.brief-steps li::before { content: counter(bs, decimal-leading-zero); color: var(--gold); font-size: var(--t-xs); letter-spacing: .1em; }
.brief-steps span { color: var(--muted); }
.kv { margin: var(--s-3) 0 0; display: grid; }
.kv div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); padding: .55rem 0; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.brief-contact h2 { color: var(--on-night); }
.brief-contact .eyebrow { color: var(--on-night-muted); }
.brief-contacts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.brief-contacts dt { font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--on-night-muted); }
.brief-contacts dd { margin: 6px 0 0; color: var(--on-night); font-size: var(--t-lg, 1.15rem); }
.brief-contacts a { color: inherit; }
@media (max-width: 900px) { .brief-cover, .brief-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } .brief-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .brief-steps { grid-template-columns: minmax(0, 1fr); } .brief-row .note { grid-column: auto !important; } }
@media (max-width: 560px) { .brief-contacts { grid-template-columns: minmax(0, 1fr); } }
@media print {
  .site-header, .site-footer, .wa, .preview-flag, .no-print, .crumbs, nav[aria-label="Breadcrumb"], .skip { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .band, .page-hero { padding-block: 18pt !important; break-inside: avoid; }
  .band--chamber { background: #fff !important; color: #000 !important; }
  .band--chamber * { color: #000 !important; }
  .rv { opacity: 1 !important; transform: none !important; }
  a { text-decoration: none; }
}

/* consent banner */
[data-consent] { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; display: flex; justify-content: center; pointer-events: none; }
[data-consent][hidden] { display: none; }
.consent-in { pointer-events: auto; width: min(100%, 56rem); background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 48px rgba(26,25,22,.18); padding: var(--s-4) var(--s-5); display: flex; gap: var(--s-5); align-items: center; }
.consent-text { display: grid; gap: 4px; font-size: var(--t-sm); color: var(--muted); }
.consent-text a { color: var(--ink); text-decoration: underline; }
.consent-h { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); margin: 0; }
.consent-text p { margin: 0; }
.consent-btns { display: flex; gap: var(--s-2); flex-shrink: 0; }
@media (max-width: 700px) { .consent-in { flex-direction: column; align-items: stretch; gap: var(--s-3); } .consent-btns .btn { flex: 1; justify-content: center; } }
.link-btn { background: none; border: 0; padding: 0; margin-left: .6em; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
body:has([data-consent]:not([hidden])) .wa { bottom: 150px; }
@media print { [data-consent] { display: none !important; } }

/* inquiry form: honeypot and send error */
.form .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.form-fail { margin: var(--s-3) 0 0; padding: var(--s-3) var(--s-4); border-radius: 12px; background: #FCEDEA; color: #8A2B1E; font-size: .95rem; }
.form-fail[hidden] { display: none; }
.form-fail a { color: inherit; text-decoration: underline; }

/* buyer-visit row: landscape lead + two 4:5 portraits */
.photo-row--visit .fig:not(:first-child) img { aspect-ratio: 4 / 5; max-height: none; }
.photo-row--pair { grid-template-columns: minmax(0, 2.37fr) minmax(0, 1fr); }
.photo-row--pair .fig:not(:first-child) img { max-height: none; }
@media (max-width: 760px) { .photo-row--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* about page: compact photo galleries, story text, earlier products */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-item { margin: 0; display: grid; gap: var(--s-2); align-content: start; }
.g-item > a { display: block; border-radius: 14px; overflow: hidden; }
.g-item img, .g-item .poster img, .g-item video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; transition: transform .4s ease; }
.g-item > a:hover img { transform: scale(1.03); }
.g-item .poster { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; }
.g-item .poster video, .g-item .poster img { height: 100%; }
.g-item figcaption { font-size: var(--t-xs); color: var(--muted); }
@media (max-width: 900px) { .gallery, .gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.story-text { columns: 2 22rem; column-gap: var(--s-7); max-width: 72rem; }
.story-text p { break-inside: avoid; margin: 0 0 var(--s-4); color: var(--ink-2, inherit); line-height: 1.7; }
.rd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.rd-card { margin: 0; display: grid; gap: var(--s-3); align-content: start; }
.rd-card img, .rd-ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.rd-card figcaption { display: grid; gap: var(--s-1); }
.rd-ph { display: grid; place-items: center; border: 1.5px dashed var(--line, #c9c4b8); color: var(--muted); font-size: var(--t-xs); background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(0,0,0,.025) 12px 24px); }
.rd-card--empty figcaption { color: var(--muted); }
@media (max-width: 900px) { .rd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* footer contact buttons: email, WhatsApp, YouTube, Facebook in an even 2-column grid */
.foot-grid .foot-contact { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); max-width: 24rem; }
.fc-btn { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .55rem .9rem; border: 1px solid #4A463F; border-radius: 12px; color: var(--on-night); font-size: var(--t-xs); line-height: 1.2; transition: border-color .2s, background .2s; }
.site-footer .fc-btn:hover { text-decoration: none; border-color: var(--on-night); background: rgba(255,255,255,.06); }
.fc-btn svg { flex: none; width: 18px; height: 18px; opacity: .9; }
.fc-btn span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot-contact li:nth-child(-n+2) { grid-column: 1 / -1; }
.foot-contact li:nth-child(-n+2) .fc-btn { font-size: var(--t-sm); }
@media (max-width: 360px) { .foot-grid .foot-contact { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .g-item .poster-cap { display: none; } .g-item .play { transform: scale(.7); } }


/* ---------- language menu (8 languages) ---------- */
.lang-dd > button { display: inline-flex; align-items: center; gap: 0.35rem; font: 500 var(--t-xs)/1 var(--sans); letter-spacing: 0.04em; color: var(--ink); background: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.5rem 0.7rem; cursor: pointer; }
.lang-dd > button:hover { background: var(--sand); }
.lang-dd .dd-menu.lang-menu { left: auto; right: 0; width: 12rem; }
.lang-menu a { padding: 0.55rem 0.8rem; font-size: var(--t-sm); }
.lang-menu a[aria-current] { background: var(--sand); font-weight: 600; }
.foot-base .langs { gap: var(--s-2) var(--s-4); }

/* ---------- Russian: Cyrillic-capable stacks ---------- */
html[lang="ru"] { --sans: "Albert Sans", "Helvetica Neue", Arial, "Segoe UI", Roboto, sans-serif; }
html[lang="ru"] h1, html[lang="ru"] h2 { hyphens: auto; }
html[lang="de"] h1, html[lang="de"] h2, html[lang="de"] h3 { hyphens: auto; overflow-wrap: break-word; }

/* ---------- Arabic: right-to-left ---------- */
html[lang="ar"] { --sans: "Noto Sans Arabic", "Segoe UI", "Geeza Pro", Tahoma, "Albert Sans", Arial, sans-serif; --serif: "Noto Naskh Arabic", "Times New Roman", "Geeza Pro", serif; }
html[lang="ar"] body { line-height: 1.8; }
html[lang="ar"] *, html[lang="ar"] *::before, html[lang="ar"] *::after { letter-spacing: 0 !important; }
html[lang="ar"] .eyebrow, html[lang="ar"] .kicker, html[lang="ar"] .foot-grid .foot-h, html[lang="ar"] .spec .spec-h { text-transform: none; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.35; font-weight: 500; }
html[lang="ar"] .serif em, html[lang="ar"] h1 em, html[lang="ar"] h2 em { font-style: normal; }
[dir="rtl"] .arr, [dir="rtl"] .go::after, [dir="rtl"] .link-arrow span[aria-hidden] { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .dd-menu { left: auto; right: 0; }
[dir="rtl"] .lang-dd .dd-menu.lang-menu { right: auto; left: 0; }
[dir="rtl"] [translate="no"], [dir="rtl"] .mono, [dir="rtl"] a[href^="mailto:"], [dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href*="wa.me"] { unicode-bidi: isolate; }
/* RTL home hero: keep the copy block on the dark side of the photo (the cabinet stands on the right) */
[dir="rtl"] .stage-grid { direction: ltr; }
[dir="rtl"] .stage-copy { direction: rtl; text-align: right; }
[dir="rtl"] .stage-finish { direction: rtl; }

/* Long button labels in DE/FR/ES/RU: let them wrap on narrow screens instead of overflowing */
@media (max-width: 640px) { .btn { white-space: normal; text-align: center; max-width: 100%; } }

/* Selectable patent identifiers; no contact-conversion controls. */
.patent-index { margin-top: var(--s-7); }
.patent-index .table-wrap { background: var(--paper); }
.patent-index th[scope="row"] { font-weight: 400; }
.patent-index code { font-family: var(--sans); font-size: var(--t-sm); user-select: text; }
.patent-name-origin { display: block; margin-top: var(--s-2); color: var(--muted); font-size: var(--t-xs); }
html[lang="zh-CN"] .patent-name-origin, html[lang="zh"] .patent-name-origin { display: none; }