:root {
  --polish-ink: #111827;
  --polish-text: #46515c;
  --polish-muted: #78828d;
  --polish-line: #dfe5ea;
  --polish-mist: #f4f7f9;
  --polish-panel: #ffffff;
  --polish-red: #ff0033;
  --polish-shadow: 0 18px 46px rgba(24, 31, 42, 0.07);
}

* {
  letter-spacing: 0 !important;
}

html {
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

body {
  color: var(--polish-ink) !important;
  background: #fff !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif !important;
}

.site-header,
.nav {
  background: rgba(238, 243, 246, 0.98) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.hero-glow {
  animation: none !important;
  opacity: 0.72 !important;
}

.hero-product,
.order-visual img,
.statement-visual img {
  filter: drop-shadow(0 18px 28px rgba(35, 45, 55, 0.14)) !important;
}

@supports (content-visibility: auto) {
  .technical,
  .operation,
  .scenarios,
  .difference,
  .order,
  .footer,
  footer {
    content-visibility: auto;
    contain-intrinsic-size: 1px 760px;
  }
}

.nav-links {
  gap: clamp(12px, 1.25vw, 20px) !important;
  align-items: center !important;
}

.nav-links > a:not(.nav-button):not(.nav-cta):not(.cta) {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 42px !important;
  padding: 0 !important;
  color: rgba(17, 24, 39, 0.68) !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.nav-links > a:not(.nav-button):not(.nav-cta):not(.cta)::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  bottom: 4px !important;
  width: 0 !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: var(--polish-red) !important;
  transition: width 160ms ease !important;
}

.nav-links > a:not(.nav-button):not(.nav-cta):not(.cta):hover {
  color: var(--polish-ink) !important;
}

.nav-links > a:not(.nav-button):not(.nav-cta):not(.cta):hover::after {
  width: 100% !important;
}

.nav-button,
.nav-cta,
.cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: var(--polish-red) !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.nav-button,
.nav-cta {
  margin-left: 2px !important;
}

p,
li,
.article-card p,
.discussion-body,
.faq-answer,
.content p,
.section-head p,
.tech-copy p,
.operation-copy p,
.difference-copy p,
.life-copy p,
.order-copy p {
  color: var(--polish-text) !important;
  font-weight: 650 !important;
  line-height: 1.72 !important;
}

h1,
h2,
h3,
h4,
.hero h1,
.page-header h1,
.page-hero h1,
.section-head h2,
.statement-copy h2,
.operation-copy h2,
.difference-copy h2,
.tech-copy h2,
.life-copy h2,
.order-copy h2 {
  font-weight: 850 !important;
  line-height: 1.04 !important;
}

.hero h1 {
  max-width: 700px !important;
  font-size: clamp(2.85rem, 5.2vw, 4.75rem) !important;
}

.hero h1 span {
  margin-top: 12px !important;
  font-size: clamp(1.45rem, 2.4vw, 2rem) !important;
  line-height: 1.12 !important;
}

.hero-copy p {
  max-width: 500px !important;
  font-size: 1.03rem !important;
}

.hero-commerce {
  display: flex !important;
  align-items: baseline !important;
  gap: 14px !important;
  margin-top: 24px !important;
}

.hero-price {
  display: inline-flex !important;
  color: var(--polish-red) !important;
  font-size: clamp(2rem, 3.4vw, 3.15rem) !important;
  line-height: 0.95 !important;
  font-weight: 900 !important;
}

.hero-commerce-note {
  color: var(--polish-text) !important;
  font-size: 0.92rem !important;
  font-weight: 820 !important;
}

@media (min-width: 1041px) {
  .hero-copy {
    left: clamp(22px, 2.4vw, 42px) !important;
  }

  .hero-stage {
    left: clamp(14px, 1.6vw, 30px) !important;
  }
}

.page-header,
.page-hero,
.hero {
  background: linear-gradient(180deg, #f7fafc 0%, #eef3f6 100%) !important;
}

.page-header:before,
.page-hero:before,
.hero::before {
  display: none !important;
}

.hero-glow {
  opacity: 0.42 !important;
}

.hero-meta-top,
.hero-ghost,
.hero-notes {
  display: none !important;
}

.summary {
  padding: 22px 0 !important;
  border: 0 !important;
  background: #fff !important;
}

.summary-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  border: 0 !important;
}

.summary-item {
  min-height: 118px !important;
  padding: 20px !important;
  border: 1px solid var(--polish-line) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafb 100%) !important;
  box-shadow: 0 12px 28px rgba(24, 31, 42, 0.05) !important;
}

.summary-kicker {
  display: block !important;
  margin-bottom: 14px !important;
  color: var(--polish-red) !important;
  font-size: 0.7rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.summary-value {
  display: block !important;
  color: var(--polish-ink) !important;
  font-size: clamp(1.35rem, 2.3vw, 2rem) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.summary-label {
  display: block !important;
  margin-top: 10px !important;
  color: var(--polish-text) !important;
  font-size: 0.86rem !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

.section-pad {
  padding-top: 76px !important;
  padding-bottom: 76px !important;
}

.section-head h2,
.statement-copy h2,
.operation-copy h2,
.difference-copy h2,
.tech-copy h2,
.life-copy h2,
.order-copy h2 {
  font-size: clamp(2.25rem, 4vw, 3.55rem) !important;
}

.section-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
  max-width: 860px !important;
  margin: 0 0 34px !important;
}

.section-head > div {
  max-width: 820px !important;
}

.section-head > p {
  max-width: 680px !important;
  margin: 0 !important;
  font-size: clamp(1rem, 1.4vw, 1.12rem) !important;
}

.section-head .section-tag,
.statement-copy .section-tag,
.tech-copy .section-tag,
.operation-copy .section-tag,
.difference-copy .section-tag,
.life-copy .section-tag,
.order-copy .section-tag {
  margin-bottom: 14px !important;
}

.statement-copy .lede,
.tech-copy p,
.operation-copy p,
.difference-copy p,
.life-copy p,
.order-copy p {
  max-width: 620px !important;
  margin-top: 16px !important;
}

.statement-panel,
.tech-panel,
.life-panel,
.order-panel,
.panel,
.form-card,
.contact-card,
.article-card,
.discussion-item,
.moderation-note,
.new-post-card,
.card,
.feature-card,
.mode-card,
.process-card,
.scenario-card,
.principle-card,
.policy-card,
.difference-copy,
.difference-list,
.specs-list,
.step,
.blueprint,
.statement-visual,
.order-visual,
.search-box,
.faq-item,
.contact-email {
  border-radius: 8px !important;
  border-color: var(--polish-line) !important;
  box-shadow: var(--polish-shadow) !important;
}

.article-card,
.discussion-item,
.new-post-card,
.moderation-note,
.contact-card,
.card,
.feature-card,
.mode-card,
.process-card,
.scenario-card,
.principle-card,
.policy-card {
  background: #fff !important;
}

.statement-panel,
.tech-panel,
.life-panel,
.order-panel,
.panel,
.difference-copy,
.difference-list {
  background: #fff !important;
}

.statement {
  background: #fff !important;
}

.statement-panel {
  background: #fff !important;
}

.statement-visual {
  background: #f8fafb !important;
}

.statement-visual::before {
  content: none !important;
  display: none !important;
}

.principle,
.scenarios,
.technical,
.lifestyle,
.contact-section,
.features,
.specs,
.cta-section {
  background: var(--polish-mist) !important;
}

.statement-visual,
.order-visual,
.operation-copy,
.policy-card {
  background: #f8fafb !important;
}

.order-visual::before {
  content: none !important;
  display: none !important;
}

.difference {
  background: var(--polish-mist) !important;
}

.difference-panel {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.difference-copy {
  padding: 36px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr) !important;
  gap: 28px !important;
  align-items: end !important;
}

.difference-copy > .section-tag,
.difference-copy > h2,
.difference-copy > p {
  grid-column: 1 !important;
}

.difference-copy > .difference-metrics {
  grid-column: 2 !important;
  grid-row: 1 / span 3 !important;
  align-self: center !important;
}

.difference-copy p {
  max-width: 680px !important;
}

.difference-metrics {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-top: 0 !important;
}

.difference-metrics div {
  display: grid !important;
  grid-template-columns: minmax(120px, 0.72fr) 1fr !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 14px 16px !important;
  border: 1px solid var(--polish-line) !important;
  border-radius: 8px !important;
  background: #f8fafb !important;
}

.difference-metrics strong {
  display: block !important;
  color: var(--polish-ink) !important;
  font-size: clamp(1.18rem, 2vw, 1.7rem) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.difference-metrics span {
  display: block !important;
  margin-top: 0 !important;
  color: var(--polish-text) !important;
  font-weight: 720 !important;
}

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

.difference-card {
  min-height: 0 !important;
  padding: 22px !important;
  border: 1px solid var(--polish-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: var(--polish-shadow) !important;
}

.difference-card > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  margin-bottom: 22px !important;
  border-radius: 999px !important;
  color: var(--polish-red) !important;
  background: #fff1f3 !important;
  font-weight: 900 !important;
}

.difference-card h3 {
  margin: 0 0 10px !important;
  color: var(--polish-ink) !important;
  font-size: 1.12rem !important;
  line-height: 1.12 !important;
  font-weight: 850 !important;
}

.difference-list {
  display: none !important;
}

.difference-card p {
  margin: 0 !important;
  color: var(--polish-text) !important;
  font-weight: 650 !important;
  line-height: 1.58 !important;
}

.difference-list {
  padding: 28px !important;
  border-left: 1px solid var(--polish-line) !important;
}

.difference-list h3 {
  margin-bottom: 18px !important;
}

.difference-list ul {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.difference-list li {
  min-height: 158px !important;
  padding: 18px !important;
  border: 1px solid var(--polish-line) !important;
  border-radius: 8px !important;
  background: #f8fafb !important;
}

.difference-list li::before {
  content: none !important;
  display: none !important;
}

.difference-list li strong {
  display: block !important;
  margin-bottom: 8px !important;
  color: var(--polish-ink) !important;
  font-weight: 850 !important;
}

.difference-list li span {
  display: block !important;
  color: var(--polish-text) !important;
  font-weight: 650 !important;
  line-height: 1.58 !important;
}

.process-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  padding: 18px !important;
  overflow: hidden !important;
}

.process-card img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 25 / 18 !important;
  height: auto !important;
  margin: 0 0 16px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  background: #f8fafb !important;
}

.process-card strong {
  margin-bottom: 10px !important;
  font-size: 2.25rem !important;
}

.scenario-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.scenario-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr) !important;
  min-height: 320px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}

.scenario-media {
  order: 0 !important;
  min-height: 100% !important;
  background: #eef3f6 !important;
}

.scenario-card img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 320px !important;
  margin: 0 !important;
  object-fit: cover !important;
  opacity: 1 !important;
  filter: none !important;
  border: 0 !important;
}

.scenario-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  padding: 30px !important;
}

.scenario-copy .icon {
  width: 42px !important;
  height: 42px !important;
  margin-bottom: 20px !important;
  padding: 10px !important;
  border-radius: 999px !important;
  background: #fff1f3 !important;
  color: var(--polish-red) !important;
}

.scenario-label {
  display: block !important;
  margin-bottom: 10px !important;
  color: var(--polish-red) !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.scenario-copy h3 {
  margin: 0 !important;
  font-size: clamp(1.35rem, 2.2vw, 2rem) !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
}

.scenario-copy p {
  margin: 14px 0 0 !important;
  color: var(--polish-text) !important;
  font-weight: 650 !important;
  line-height: 1.62 !important;
}

.life-visual {
  min-height: 520px !important;
  overflow: hidden !important;
  background: #eef3f6 !important;
}

.life-visual img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 520px !important;
  object-fit: cover !important;
}

.blueprint {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 470px !important;
  padding: 28px !important;
  overflow: hidden !important;
  background-color: #f8fafb !important;
  background-image:
    linear-gradient(rgba(90, 104, 118, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 104, 118, 0.025) 1px, transparent 1px) !important;
}

.blueprint::before {
  display: none !important;
}

.blueprint img {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 720px !important;
  height: auto !important;
  object-fit: contain !important;
  mix-blend-mode: normal !important;
  filter: contrast(1.04) saturate(0.95) !important;
  opacity: 1 !important;
}

.modal-overlay .modal {
  box-shadow: 0 28px 70px rgba(17, 24, 39, 0.22) !important;
}

.article-grid {
  gap: 16px !important;
}

.article-card {
  padding: 22px !important;
}

.article-card h3,
.discussion-item h3,
.faq-question {
  font-size: 1rem !important;
  line-height: 1.34 !important;
}

.article-tag,
.discussion-pill,
.discussion-replies,
.status-filter,
.tab {
  font-weight: 800 !important;
}

.community-tabs {
  gap: 8px !important;
}

.tab {
  padding: 0.72rem 1rem !important;
}

.discussion-tools {
  gap: 16px !important;
}

.discussion-stats {
  gap: 8px !important;
}

.discussion-stat {
  border-radius: 8px !important;
}

.button,
.btn-primary,
.btn-secondary,
.nav-cta,
.status-filter,
.discussion-sort,
.new-post-card button,
.discussion-actions button,
.reply-form button {
  box-shadow: none !important;
}

.button-primary,
.btn-primary,
.nav-cta,
.new-post-card button,
.discussion-actions button.primary,
.reply-form button.primary {
  background: var(--polish-red) !important;
}

.button:hover,
.btn-primary:hover,
.nav-cta:hover,
.article-card:hover,
.discussion-item:hover,
.feature-card:hover {
  transform: translateY(-2px) !important;
}

.desk-window,
.desk-surface,
.desk-pad {
  background: #eef3f6 !important;
}

.desk-monitor {
  background: #151a21 !important;
}

.footer,
footer {
  background: #f3f6f8 !important;
}

@media (max-width: 900px) {
  .nav-links {
    display: none !important;
  }

  .menu-toggle {
    display: inline-flex !important;
  }

  .brand img {
    width: 118px !important;
  }

  .section-pad {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
  }

  .hero {
    background: #eef3f6 !important;
  }

  .hero h1,
  .page-header h1,
  .page-hero h1 {
    font-size: clamp(2.25rem, 10vw, 3.15rem) !important;
    line-height: 1.06 !important;
  }

  .hero h1 span {
    font-size: clamp(1.2rem, 5vw, 1.55rem) !important;
  }

  .page-header,
  .page-hero {
    padding-top: 7.5rem !important;
    padding-bottom: 2.75rem !important;
  }

  .article-card,
  .discussion-item,
  .new-post-card,
  .moderation-note,
  .contact-card,
  .process-card {
    padding: 20px !important;
  }

  .scenario-card img {
    height: 240px !important;
    min-height: 240px !important;
  }

  .life-visual,
  .life-visual img {
    min-height: 360px !important;
  }

  .community-tabs {
    gap: 10px !important;
  }

  .tab {
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .summary {
    padding: 14px 0 22px !important;
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .summary-item {
    min-height: 104px !important;
    padding: 16px !important;
  }

  .scenario-grid {
    grid-template-columns: 1fr !important;
  }

  .scenario-card {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .scenario-card:nth-child(even) .scenario-media {
    order: 0 !important;
  }

  .scenario-copy {
    padding: 24px !important;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .scenario-grid {
    grid-template-columns: 1fr !important;
  }

  .scenario-card {
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr) !important;
    min-height: 260px !important;
  }

  .scenario-card:nth-child(even) .scenario-media,
  .scenario-media {
    order: 0 !important;
  }

  .scenario-card img {
    height: 100% !important;
    min-height: 260px !important;
  }
}

@media (max-width: 520px) {
  .hero {
    padding-top: 64px !important;
    min-height: auto !important;
  }

  .hero-grid {
    min-height: auto !important;
    gap: 0 !important;
  }

  .hero-stage {
    min-height: 330px !important;
    overflow: visible !important;
  }

  .hero-product {
    width: min(280px, 76%) !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  .hero-copy {
    padding-top: 0 !important;
  }

  .hero-commerce {
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 22px !important;
  }

  .hero-price {
    font-size: 2.45rem !important;
  }

  .hero-commerce-note {
    font-size: 0.9rem !important;
    text-align: center !important;
  }

  .hero-copy p,
  .page-header p,
  .page-hero p {
    font-size: 0.96rem !important;
  }

  .summary-grid {
    width: min(100% - 24px, 1120px) !important;
  }

  .summary-value {
    font-size: 1.32rem !important;
  }

  .summary-label {
    font-size: 0.78rem !important;
  }

  .section-head h2,
  .statement-copy h2,
  .operation-copy h2,
  .difference-copy h2,
  .tech-copy h2,
  .life-copy h2,
  .order-copy h2 {
    font-size: 2.25rem !important;
  }

  .mode-card {
    display: flex !important;
    min-height: 0 !important;
    padding: 28px 26px !important;
    flex-direction: column !important;
  }

  .mode-card strong {
    order: 1 !important;
  }

  .mode-card span {
    order: 2 !important;
  }

  .mode-card p {
    order: 3 !important;
    max-width: none !important;
    margin-top: 18px !important;
  }

  .mode-card img {
    position: static !important;
    order: 4 !important;
    width: min(170px, 52%) !important;
    margin: 18px 0 0 auto !important;
    opacity: 0.5 !important;
  }

  .modal-overlay {
    align-items: flex-start !important;
    padding: 84px 18px 24px !important;
  }

  .modal-overlay .modal {
    max-height: calc(100vh - 112px) !important;
    padding: 24px !important;
    border-radius: 18px !important;
  }

  .modal-overlay .modal h2 {
    font-size: 1.55rem !important;
    line-height: 1.16 !important;
  }

  .modal-overlay .modal p,
  .modal-overlay .modal li {
    font-size: 0.88rem !important;
    line-height: 1.62 !important;
  }

  .modal-close {
    position: sticky !important;
    bottom: -1px !important;
    width: 100% !important;
    min-height: 46px !important;
    margin-top: 18px !important;
  }
}

@media (max-width: 380px) {
  .hero {
    padding-top: 56px !important;
  }

  .hero-stage {
    min-height: 318px !important;
  }

  .hero-product {
    width: min(244px, 68%) !important;
  }

  .hero h1 {
    font-size: 2.28rem !important;
    line-height: 1.03 !important;
  }

  .hero h1 span {
    margin-top: 8px !important;
    font-size: 1.2rem !important;
  }

  .hero-copy p {
    font-size: 0.91rem !important;
    line-height: 1.58 !important;
  }

  .hero-commerce {
    margin-top: 16px !important;
  }

  .hero-price {
    font-size: 2.25rem !important;
  }

  .hero-commerce-note {
    font-size: 0.82rem !important;
  }
}

@media (max-width: 960px) {
  .section-head {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .section-head > p {
    margin-left: 0 !important;
  }

  .difference-card-grid,
  .difference-list ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .difference-copy {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .difference-copy > .section-tag,
  .difference-copy > h2,
  .difference-copy > p,
  .difference-copy > .difference-metrics {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .difference-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .difference-metrics div {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

@media (max-width: 640px) {
  header.hero {
    padding-top: 46px !important;
    padding-bottom: 28px !important;
  }

  .page-header,
  .page-hero {
    padding-top: 86px !important;
    padding-bottom: 28px !important;
  }

  header.hero .tag,
  .page-header .tag,
  .page-hero .eyebrow {
    margin-bottom: 10px !important;
  }

  header.hero h1,
  .page-header h1,
  .page-hero h1 {
    margin-bottom: 0 !important;
  }

  header.hero p,
  .page-header p,
  .page-hero p {
    margin-top: 14px !important;
  }

  header.hero + .section,
  header.hero + main.section,
  .page-header + .content,
  .page-header + .contact-grid,
  .page-header + .info-section,
  .page-header + .search-wrap,
  .page-header + main.section,
  .page-hero + .partner-types {
    margin-top: 0 !important;
    padding-top: 30px !important;
  }

  .article-page {
    padding-top: 88px !important;
  }

  .order-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .order-visual {
    order: 1 !important;
    width: 100% !important;
    min-height: 310px !important;
  }

  .order-visual img {
    width: min(250px, 58%) !important;
  }

  .order-copy {
    order: 2 !important;
    width: 100% !important;
  }

  .difference-copy,
  .difference-list {
    padding: 24px !important;
  }

  .difference-metrics,
  .difference-card-grid,
  .difference-list ul {
    grid-template-columns: 1fr !important;
  }

  .difference-metrics div {
    grid-template-columns: minmax(110px, 0.8fr) 1fr !important;
    gap: 12px !important;
  }

  .difference-card,
  .difference-list li {
    min-height: 0 !important;
  }
}

/* Final accessibility polish for secondary pages and shared link targets. */
footer a,
.footer a,
.site-footer a,
.article-page .back,
a[href^="mailto:"],
.privacy-check a,
.lang-switch a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
}

.nav-links a:not(.nav-cta),
.nav-links a:not(.cta) {
  min-width: 32px !important;
  justify-content: center !important;
}

.search-box input {
  min-height: 32px !important;
}

.privacy-check input[type="checkbox"] {
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  margin-top: 0 !important;
}

/* Tighten the first section so the hero content sits closer to the top. */
.hero {
  padding-top: 46px !important;
  min-height: 860px !important;
}

.hero-grid {
  min-height: 770px !important;
}

.hero-copy {
  padding-top: 42px !important;
}

.hero-product {
  bottom: 42px !important;
}

@media (max-width: 1040px) {
  .hero {
    padding-top: 48px !important;
  }

  .hero-grid {
    padding-top: 24px !important;
  }

  .hero-copy {
    padding-top: 0 !important;
  }
}

@media (max-width: 520px) {
  .hero {
    padding-top: 38px !important;
  }

  .hero-grid {
    padding-top: 18px !important;
  }

  .hero-product {
    top: 55% !important;
    bottom: auto !important;
  }
}

@media (max-width: 380px) {
  .hero {
    padding-top: 34px !important;
  }

  .hero-grid {
    padding-top: 14px !important;
  }
}

/* Device-specific hero balancing for tablets, small laptops, and large monitors. */
@media (min-width: 781px) and (max-width: 959px) {
  .hero {
    min-height: auto !important;
    padding-top: 44px !important;
  }

  .hero-grid {
    min-height: auto !important;
    padding-top: 18px !important;
    padding-bottom: 56px !important;
  }

  .hero-stage {
    min-height: clamp(430px, 47vw, 500px) !important;
    overflow: visible !important;
  }

  .hero-product {
    width: min(390px, 56%) !important;
    top: 58% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  .hero-copy {
    padding-top: 0 !important;
  }
}

@media (min-width: 960px) and (max-width: 1180px) {
  .hero {
    min-height: 760px !important;
    padding-top: 40px !important;
  }

  .hero-grid {
    grid-template-columns: 0.86fr 1fr !important;
    align-items: center !important;
    min-height: 688px !important;
    gap: 24px !important;
    padding: 0 !important;
  }

  .hero-copy {
    left: 0 !important;
    padding-top: 24px !important;
    text-align: left !important;
  }

  .hero h1,
  .hero-copy p {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .hero-actions {
    justify-content: flex-start !important;
  }

  .hero-commerce {
    justify-content: flex-start !important;
  }

  .hero-stage {
    order: 0 !important;
    left: 0 !important;
    min-height: 688px !important;
    overflow: visible !important;
  }

  .hero-product {
    width: min(380px, 72%) !important;
    top: 51% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }
}

@media (min-width: 521px) and (max-width: 780px) {
  .hero {
    min-height: auto !important;
    padding-top: 42px !important;
  }

  .hero-grid {
    min-height: auto !important;
    padding-top: 18px !important;
    padding-bottom: 52px !important;
  }

  .hero-stage {
    min-height: clamp(400px, 58vw, 450px) !important;
    overflow: visible !important;
  }

  .hero-product {
    width: min(330px, 58%) !important;
    top: 55% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }
}

@media (min-width: 1900px) and (min-height: 1200px) {
  .hero {
    min-height: 980px !important;
  }

  .hero-grid {
    min-height: 890px !important;
  }

  .hero-product {
    bottom: 82px !important;
  }
}

/* Footer link layout must stay readable after global touch-target styling. */
.footer-links {
  align-items: start !important;
}

.footer-links > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

.footer-links a {
  display: flex !important;
  width: fit-content !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

@media (max-width: 640px) {
  .footer {
    padding-top: 34px !important;
    padding-bottom: 26px !important;
  }

  .footer-grid {
    gap: 28px !important;
  }

  .footer-links {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .footer-links h3 {
    margin-bottom: 2px !important;
  }

  .footer p {
    max-width: 100% !important;
  }
}

/* Keep mobile subpage title areas compact; do not inherit homepage hero height. */
@media (max-width: 640px) {
  body > header.hero,
  header.hero {
    min-height: 0 !important;
    padding-top: 46px !important;
    padding-bottom: 24px !important;
  }

  header.hero h1 {
    font-size: clamp(1.85rem, 8vw, 2.45rem) !important;
    line-height: 1.07 !important;
  }

  header.hero p {
    font-size: 0.92rem !important;
    line-height: 1.56 !important;
  }

  header.hero + main > .section:first-child,
  header.hero + main.section {
    padding-top: 30px !important;
  }

  .page-header,
  .page-hero {
    min-height: 0 !important;
    padding-top: 86px !important;
    padding-bottom: 28px !important;
  }
}