/* ==========================================================================
   YQ RFID · Shenzhen YunQi technology Ltd
   Design tokens transcribed from the Ardot design file (Desktop 1440 / Mobile 390)
   No external fonts, no framework, no build step.
   ========================================================================== */

:root {
  /* Color — exact values from the design tokens board */
  --ink:            #0B1B26;
  --blue:           #0F6FD1;
  --blue-on-dark:   #4E9BE8;
  --text:           #102231;
  --muted:          #53697A;
  --subtle:         #8B9CAA;
  --line:           #DCE4EA;
  --surface:        #F3F6F8;
  --surface-alt:    #F7F9FB;
  --white:          #FFFFFF;
  --on-dark:        #D3E0E9;
  --on-dark-muted:  #A9BECC;
  --on-dark-dim:    #7C93A4;
  --footer-rule:    #27404F;
  --topbar-text:    #829AAB;
  --placeholder:    #E9EEF2;

  /* Type — design uses IBM Plex Sans / IBM Plex Mono / Noto Sans SC.
     Local-first stack: no CDN request, no FOUT, works offline. */
  --font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Hiragino Sans GB", sans-serif;
  --font-en: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --gutter: 120px;
  --radius: 2px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-cn);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
img { max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.mono { font-family: var(--font-mono); }
.desktop-only { display: block; }
.mobile-only  { display: none; }
/* Mobile-only copy variants live in the DOM so no text is generated by CSS */
.card__mobile, .product-card__mobile, .business-item__mobile,
.product-section__title--mobile, .product-section__desc--mobile,
.positioning__statement--mobile, .positioning__text--mobile,
.hero__cn--mobile, .inline-mobile { display: none; }
.inline-desktop { display: inline; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 16px; background: var(--blue); color: #fff;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   Top bar + navigation
   ========================================================================== */
.topbar { background: var(--ink); }
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 10px; gap: 20px;
}
.topbar span {
  font-family: var(--font-mono); font-size: 11px; color: var(--topbar-text);
  white-space: nowrap;
}

.nav { background: var(--white); }
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 20px; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand__mark { width: 30px; height: 30px; flex: 0 0 30px; }
.brand__word {
  font-family: var(--font-en); font-size: 20px; font-weight: 700;
  color: var(--ink); letter-spacing: -.01em; white-space: nowrap;
}
.brand__legal {
  font-size: 11px; color: var(--subtle); white-space: nowrap;
}
.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a {
  font-size: 13px; color: var(--text); white-space: nowrap;
  padding-block: 4px; border-bottom: 1px solid transparent;
}
.nav__links a:hover { color: var(--blue); }
.nav__links a[aria-current="page"] {
  color: var(--blue); font-weight: 500; border-bottom-color: var(--blue);
}
.nav__divider { height: 1px; background: var(--line); }
.nav__toggle { display: none; width: 24px; height: 24px; padding: 0; }
.nav__toggle svg { width: 24px; height: 24px; }

/* ==========================================================================
   Brand hero (home)
   ========================================================================== */
.hero { background: var(--ink); }
.hero__inner {
  display: flex; align-items: center; gap: 60px;
  padding-block: 76px;
}
.hero__copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--blue); letter-spacing: .04em;
}
.eyebrow--on-dark { color: var(--blue-on-dark); }
.hero h1 {
  font-family: var(--font-en); font-size: 50px; line-height: 60px;
  font-weight: 700; color: var(--white); letter-spacing: -.02em;
}
.hero__cn { font-size: 21px; font-weight: 500; color: var(--on-dark); }
.hero__en { font-family: var(--font-en); font-size: 12px; color: var(--on-dark-dim); }
.rule { width: 64px; height: 2px; background: var(--blue); }
.hero__domain { font-family: var(--font-mono); font-size: 12px; color: var(--on-dark-muted); }
.hero__media {
  flex: 0 0 480px; width: 480px; height: 300px;
  background: var(--placeholder); border-radius: var(--radius); overflow: hidden;
}

/* image placeholders / fills */
.media { background: var(--placeholder); overflow: hidden; }
.media img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Section headers
   ========================================================================== */
.section { padding-block: 76px; }
.section--tight { padding-block: 56px; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
}
.section-head__left { display: flex; flex-direction: column; gap: 10px; }
.section-title { font-size: 30px; font-weight: 700; color: var(--text); line-height: 1.35; }
.section-desc {
  max-width: 420px; font-size: 13px; line-height: 22px;
  color: var(--muted); text-align: right;
}

/* ---------- category cards (home) ---------- */
.cat-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  margin-top: 36px;
}
.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.card__media { height: 170px; flex: 0 0 170px; }
.card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.card__index {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  color: var(--blue); letter-spacing: .04em;
}
.card__title { font-size: 19px; font-weight: 600; color: var(--text); line-height: 1.4; }
.card__en { font-family: var(--font-en); font-size: 11px; color: var(--subtle); }
.card__desc { font-size: 12px; line-height: 20px; color: var(--muted); }
a.card:hover { border-color: var(--blue); }

.cta-panel {
  background: var(--ink); border-radius: var(--radius);
  padding: 28px 24px; display: flex; flex-direction: column; gap: 18px;
  text-decoration: none;
}
.cta-panel__eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--blue-on-dark);
}
.cta-panel__title { font-size: 24px; line-height: 34px; font-weight: 600; color: var(--white); }
.cta-panel__arrow { width: 24px; height: 24px; }
.cta-panel:hover { background: #12283a; }

/* ---------- application scenarios ---------- */
.scenarios { background: var(--surface); }
.scenarios .section-head__left { gap: 10px; }
.scenario-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  margin-top: 36px;
}
.scenario-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column; gap: 14px;
}
.scenario-card__icon { width: 28px; height: 28px; }
.scenario-card__title { font-size: 17px; font-weight: 600; color: var(--text); }
.scenario-card__en { font-family: var(--font-en); font-size: 11px; color: var(--subtle); }
.scenario-card__desc { font-size: 12px; line-height: 20px; color: var(--muted); }

/* ==========================================================================
   Page head (products / about)
   ========================================================================== */
.page-head { background: var(--ink); }
.page-head__inner {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 60px; padding-block: 56px;
}
.page-head__left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.page-head h1 {
  font-size: 38px; font-weight: 700; color: var(--white); line-height: 1.3;
}
.page-head__desc { font-size: 14px; line-height: 24px; color: var(--on-dark-muted); }
.page-head__meta {
  flex: 0 0 220px; width: 220px; text-align: right;
  font-family: var(--font-mono); font-size: 11px; line-height: 22px;
  color: var(--on-dark-dim); white-space: pre-line;
}
.page-head__meta--narrow { flex-basis: 200px; width: 200px; }

/* ==========================================================================
   Product catalogue
   ========================================================================== */
.product-section { border-top: 0; }
.product-section--alt { background: var(--surface-alt); }
.product-section__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
}
.product-section__titleline { display: flex; align-items: baseline; gap: 16px; }
.product-section__index {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--blue);
}
.product-section__title { font-size: 25px; font-weight: 600; color: var(--text); line-height: 1.4; }
.product-section__desc {
  max-width: 460px; font-size: 12px; line-height: 20px;
  color: var(--muted); text-align: right; white-space: pre-line;
}
.section-rule { height: 1px; background: var(--line); margin-block: 26px 0; }
.product-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  margin-top: 26px;
}
.product-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.product-card__media { height: 210px; flex: 0 0 210px; }
.product-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; }
.product-card__model {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--blue);
}
.product-card__name { font-size: 19px; font-weight: 600; color: var(--text); }
.product-card__spec { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.product-card__use { font-size: 12px; color: var(--muted); }
.product-section[id] { scroll-margin-top: 24px; }

/* ==========================================================================
   About
   ========================================================================== */
.positioning__inner {
  display: flex; align-items: flex-start; gap: 80px; padding-block: 80px;
}
.positioning__copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.positioning__statement { font-size: 30px; line-height: 46px; font-weight: 600; color: var(--text); }
.positioning__text { font-size: 15px; line-height: 28px; color: var(--muted); }
.positioning__meta {
  flex: 0 0 280px; width: 280px; background: var(--surface);
  border-radius: var(--radius); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 18px;
}
.positioning__label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--blue);
}
.positioning__value {
  font-family: var(--font-mono); font-size: 14px; line-height: 24px;
  color: var(--text); white-space: pre-line;
}
.positioning__value--cn {
  font-family: var(--font-cn); font-size: 13px; line-height: 22px; color: var(--muted);
}

.business { background: var(--surface); padding-block: 72px; }
.business__head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px; }
.business-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.business-item { display: flex; flex-direction: column; gap: 14px; }
.business-item__rule { width: 48px; height: 2px; background: var(--blue); }
.business-item__num {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--subtle);
}
.business-item__title { font-size: 21px; font-weight: 600; color: var(--text); }
.business-item__desc { font-size: 13px; line-height: 24px; color: var(--muted); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--ink); }
.footer__inner { padding-block: 56px; display: flex; flex-direction: column; gap: 40px; }
.footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.footer__brand { display: flex; flex-direction: column; gap: 12px; }
.footer__word { font-family: var(--font-en); font-size: 24px; font-weight: 700; color: var(--white); }
.footer__tagline { font-size: 13px; color: var(--on-dark-muted); }
.footer__domain { font-family: var(--font-mono); font-size: 12px; color: var(--blue-on-dark); }
.footer__cols { display: flex; gap: 64px; }
.footer__col { display: flex; flex-direction: column; gap: 14px; }
.footer__col-title {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--on-dark-dim);
}
.footer__col a { font-size: 13px; color: var(--on-dark); }
.footer__col a:hover { color: var(--blue-on-dark); }
.footer__rule { height: 1px; background: var(--footer-rule); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer__bottom span {
  font-family: var(--font-mono); font-size: 11px; color: var(--on-dark-dim);
}

/* ==========================================================================
   Tablet — 721px … 1024px
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --gutter: 48px; }
  .hero__inner { gap: 36px; }
  .hero h1 { font-size: 40px; line-height: 48px; }
  .hero__media { flex-basis: 340px; width: 340px; height: 260px; }
  .brand__legal { display: none; }
  .nav__links { gap: 20px; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scenario-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-section__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .product-section__desc { text-align: left; max-width: none; }
  .positioning__inner { gap: 40px; }
  .positioning__meta { flex-basis: 240px; width: 240px; }
  .business-row { gap: 18px; }
  .footer__cols { gap: 36px; }
}

/* ==========================================================================
   Mobile — up to 720px (matches the 390px design frame)
   ========================================================================== */
@media (max-width: 720px) {
  :root { --gutter: 20px; }
  .desktop-only { display: none; }
  .mobile-only { display: block; }
  .inline-desktop { display: none; }
  .inline-mobile { display: inline; }

  .topbar__inner { padding-block: 8px; }
  .topbar span { font-size: 10px; }

  .nav { position: relative; }
  .nav__inner { padding-block: 14px; }
  .brand { gap: 8px; }
  .brand__mark { width: 26px; height: 26px; flex-basis: 26px; }
  .brand__word { font-size: 17px; }
  .nav__toggle { display: block; }
  .nav__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 16px;
    box-shadow: 0 8px 16px rgba(11, 27, 38, .08);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav__links a:last-child { border-bottom: 0; }

  .hero__inner { flex-direction: column; align-items: stretch; gap: 16px; padding-block: 36px; }
  .hero__copy { gap: 16px; }
  .hero h1 { font-size: 31px; line-height: 38px; }
  .hero__cn { display: none; }
  .hero__cn--mobile { display: block; font-size: 16px; line-height: 26px; font-weight: 500; color: var(--on-dark); }
  .hero__en { font-size: 11px; }
  .rule { width: 48px; }
  .hero__media { flex: 0 0 auto; width: 100%; height: 170px; }

  .section { padding-block: 36px; }
  .section--tight { padding-block: 28px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .section-title { font-size: 22px; }
  .section-desc { display: none; }

  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
  .card { padding: 10px; gap: 8px; }
  .card__media { height: 96px; flex-basis: 96px; }
  .card__body { padding: 0; gap: 0; }
  .card__index, .card__desc, .card__en, .card__title { display: none; }
  .card__mobile {
    display: block; font-size: 12px; line-height: 18px; font-weight: 500;
    color: var(--text); white-space: pre-line;
  }
  .cat-grid > a:nth-child(5) { grid-column: 1 / -1; }
  .cat-grid > a:nth-child(5) .card__media { height: 110px; flex-basis: 110px; }
  .cta-panel { display: none; }

  .scenarios { padding-block: 36px; }
  .scenario-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
  .scenario-card { padding: 14px; gap: 6px; }
  .scenario-card__icon, .scenario-card__desc { display: none; }
  .scenario-card__title { font-size: 14px; }
  .scenario-card__en { font-size: 10px; }

  .page-head__inner { flex-direction: column; align-items: stretch; gap: 12px; padding-block: 32px; }
  .page-head__left { gap: 12px; }
  .page-head h1 { font-size: 26px; overflow-wrap: break-word; }
  .page-head__desc { font-size: 12px; line-height: 20px; }
  .page-head__meta { display: none; }

  .product-section__head { gap: 10px; }
  .product-section__titleline { gap: 10px; }
  .product-section__index { font-size: 12px; }
  .product-section__title { display: none; }
  .product-section__title--mobile {
    display: block; font-size: 18px; font-weight: 600; color: var(--text);
  }
  .product-section__desc { display: none; }
  .product-section__desc--mobile {
    display: block; font-size: 12px; line-height: 20px;
    color: var(--muted); text-align: left; white-space: normal;
  }
  .section-rule { display: none; }
  .product-row { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
  .product-card__media { height: 140px; flex-basis: 140px; }
  .product-card__body { padding: 14px 16px; gap: 0; }
  .product-card__model, .product-card__name, .product-card__use, .product-card__spec { display: none; }
  .product-card__mobile {
    display: block; font-size: 13px; line-height: 22px;
    color: var(--muted); white-space: pre-line;
  }

  .positioning__inner { flex-direction: column; gap: 16px; padding-block: 32px; }
  .positioning__copy { gap: 16px; }
  .positioning__statement, .positioning__text { display: none; }
  .positioning__statement--mobile {
    display: block; font-size: 22px; line-height: 32px;
    font-weight: 600; color: var(--text);
  }
  .positioning__text--mobile {
    display: block; font-size: 13px; line-height: 24px; color: var(--muted);
  }
  .positioning__meta { display: none; }

  .business { padding-block: 32px; }
  .business__head { gap: 8px; margin-bottom: 18px; }
  .business-row { grid-template-columns: 1fr; gap: 14px; }
  .business-item {
    gap: 0; background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 16px;
  }
  .business-item__rule, .business-item__num, .business-item__title, .business-item__desc { display: none; }
  .business-item__mobile {
    display: block; font-size: 13px; line-height: 22px;
    color: var(--text); white-space: pre-line;
  }

  .footer__inner { padding-block: 28px; gap: 14px; }
  .footer__top { flex-direction: column; gap: 0; }
  .footer__brand { gap: 8px; }
  .footer__word { font-size: 20px; }
  .footer__tagline { font-size: 12px; line-height: 20px; }
  .footer__domain { font-size: 11px; }
  .footer__cols { display: none; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 0; }
  .footer__bottom span { font-size: 10px; }
  .footer__bottom .footer__loc { display: none; }
}

/* Very narrow screens: keep the mono spec lines from overflowing */
@media (max-width: 360px) {
  .product-card__spec, .product-card__model, .eyebrow { overflow-wrap: anywhere; }
}

/* ==========================================================================
   Real product data layer — flexible on-metal catalogue
   (appended last so its responsive overrides win over the base rules above)
   ========================================================================== */
.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;
}
.card, .product-card { position: relative; }

.section-note {
  margin-top: 14px; font-size: 12px; line-height: 20px; color: var(--muted);
}
.demo-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  padding: 3px 8px; border-radius: var(--radius);
  background: rgba(11, 27, 38, .82); color: var(--white);
  font-size: 10px; line-height: 16px; white-space: nowrap;
}

/* eight featured models with real photography */
.product-row--quad { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.product-row--quad .product-card__media { height: 150px; flex-basis: 150px; background: var(--white); }
.product-row--quad .product-card__media img { object-fit: contain; }
.product-row--quad .product-card__body { padding: 16px 16px 18px; gap: 6px; }
.product-row--quad .product-card__model { font-size: 10px; overflow-wrap: anywhere; }
.product-row--quad .product-card__name { font-size: 15px; line-height: 22px; }
.product-row--quad .product-card__spec { font-size: 11px; line-height: 18px; overflow-wrap: anywhere; }
.product-row--quad .product-card__use { font-size: 11px; line-height: 18px; }

/* full 37-model specification table */
.spec-block {
  margin-top: 44px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.spec-block__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 20px 24px; border-bottom: 1px solid var(--line);
}
.spec-block__title { font-size: 18px; font-weight: 600; color: var(--text); }
.spec-block__meta {
  font-family: var(--font-mono); font-size: 11px; color: var(--subtle); text-align: right;
}
.spec-block__hint { display: none; }
.spec-table-wrap { overflow-x: auto; }
.spec-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 12px; }
.spec-table th, .spec-table td {
  padding: 11px 16px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.spec-table thead th {
  background: var(--surface); font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; color: var(--muted);
}
.spec-table tbody tr:nth-child(even) { background: #FCFDFE; }
.spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table__model {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--blue);
}
.spec-table td:not(:first-child) { color: var(--muted); }
.data-note { padding: 16px 24px 20px; font-size: 11px; line-height: 20px; color: var(--muted); }

.footer__email { display: none; font-family: var(--font-mono); font-size: 12px; }
.footer__email a { color: var(--blue-on-dark); }

@media (max-width: 1024px) {
  .product-row--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__cols { gap: 28px; }
}

@media (max-width: 720px) {
  .section-note { margin-top: 10px; font-size: 11px; line-height: 18px; }
  .demo-badge { top: 6px; right: 6px; padding: 2px 6px; font-size: 9px; }

  .product-row--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .product-row--quad .product-card__media { height: 96px; flex-basis: 96px; }
  .product-row--quad .product-card__body { padding: 10px; gap: 2px; }
  .product-row--quad .product-card__name,
  .product-row--quad .product-card__spec { display: none; }
  .product-row--quad .product-card__model {
    display: block; font-size: 9px; line-height: 14px; color: var(--blue);
  }
  .product-row--quad .product-card__use {
    display: block; font-size: 10px; line-height: 15px; color: var(--muted);
  }

  .spec-block { margin-top: 24px; }
  .spec-block__head { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; }
  .spec-block__title { font-size: 16px; }
  .spec-block__meta { text-align: left; font-size: 10px; }
  .spec-block__hint {
    display: block; padding: 10px 16px 0;
    font-size: 11px; color: var(--blue);
  }
  .spec-table { min-width: 680px; font-size: 11px; }
  .spec-table th, .spec-table td { padding: 9px 12px; }
  .data-note { padding: 14px 16px 18px; font-size: 11px; line-height: 19px; }

  .footer__email { display: block; }
}