/* Shared polish for policy, about, support, community, and article pages. */
:root {
  --sub-ink: #080b10;
  --sub-muted: #5d6873;
  --sub-line: rgba(12, 20, 30, 0.1);
  --sub-red: #ed1c2e;
  --sub-bg: #f6f8fa;
}

body {
  color: var(--sub-ink) !important;
  background:
    radial-gradient(ellipse at 16% -10%, rgba(255, 255, 255, 0.98), transparent 34%),
    linear-gradient(180deg, #fbfcfd 0%, #edf2f6 100%) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif !important;
}

.nav,
.site-header {
  position: sticky !important;
  top: 0 !important;
  color: var(--sub-ink) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid var(--sub-line) !important;
  box-shadow: 0 16px 42px rgba(18, 28, 40, 0.08) !important;
  backdrop-filter: blur(20px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.18) !important;
}

.logo,
.nav-logo img,
.brand img,
.footer img {
  filter: none !important;
}

body .nav img.logo,
body .nav a img.logo,
body .site-header img.logo,
body .footer img {
  filter: none !important;
}

.nav-links,
.nav-links a {
  color: rgba(8, 11, 16, 0.64) !important;
}

.nav-links a:hover {
  color: var(--sub-ink) !important;
}

.nav-cta,
.cta,
.nav-button {
  color: #fff !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(135deg, #26313b, #070a0e) !important;
  box-shadow:
    0 18px 42px rgba(8, 13, 18, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

body .nav-links > .cta,
body .nav-links > .nav-cta,
body .nav-links > .nav-button,
body .nav-links > .cta:hover,
body .nav-links > .nav-cta:hover,
body .nav-links > .nav-button:hover {
  color: #fff !important;
}

.hero,
.page-header,
.page-hero {
  color: var(--sub-ink) !important;
  padding-top: clamp(68px, 8vw, 112px) !important;
  padding-bottom: clamp(48px, 6vw, 76px) !important;
  background:
    radial-gradient(ellipse at 74% 20%, rgba(237, 28, 46, 0.08), transparent 28%),
    radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, 0.95), transparent 38%),
    linear-gradient(135deg, #ffffff 0%, #f1f5f8 58%, #e2eaf0 100%) !important;
}

.tag,
.section-kicker,
.eyebrow,
.page-header .tag,
.page-hero .tag {
  color: var(--sub-red) !important;
}

.hero h1,
.page-header h1,
.page-hero h1,
.section-title,
.content-card h2,
.article-title,
.faq-section h2 {
  color: var(--sub-ink) !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

.hero p,
.page-header p,
.page-hero p,
.content-card p,
.note-card p,
.value-card p,
.faq-answer,
.article-content p,
.article-content li {
  color: var(--sub-muted) !important;
}

.brand-card,
.content-card,
.value-card,
.note-card,
.card,
.faq-item,
.article-card,
.content-section,
.policy-card {
  border-color: rgba(237, 28, 46, 0.08) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 18px 52px rgba(18, 28, 40, 0.07) !important;
}

.brand-card {
  background:
    radial-gradient(ellipse at 50% 44%, rgba(237, 28, 46, 0.06), transparent 48%),
    linear-gradient(180deg, #ffffff, #f7fafc) !important;
}

.footer {
  border-top: 1px solid var(--sub-line) !important;
  color: rgba(8, 11, 16, 0.56) !important;
  background: rgba(255, 255, 255, 0.62) !important;
}

.footer .shell,
.footer-inner {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px 18px !important;
}

.footer a {
  margin: 0 !important;
  color: rgba(8, 11, 16, 0.64) !important;
}

.footer span,
.footer p {
  color: rgba(8, 11, 16, 0.58) !important;
}

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

.privacy-check label {
  min-height: 34px !important;
  display: block !important;
  padding-top: 1px !important;
  line-height: 1.65 !important;
}

.privacy-check label a {
  word-break: keep-all !important;
}

@media (max-width: 760px) {
  .shell {
    width: calc(100% - 32px) !important;
  }

  .nav-inner,
  .shop-nav {
    min-height: 64px !important;
  }

  .logo,
  .nav-logo img,
  .brand img {
    width: 108px !important;
  }

  .nav-links {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-left: auto !important;
  }

  .nav-links > a:not(.cta):not(.nav-cta):not(.nav-button) {
    display: none !important;
  }

  .nav-links .lang-switch {
    display: inline-flex !important;
  }

  .nav-links .lang-switch a {
    white-space: nowrap !important;
  }

  .nav-links .cta,
  .nav-links .nav-cta,
  .nav-links .nav-button {
    display: inline-flex !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    font-size: 0.78rem !important;
  }

  .hamburger {
    display: none !important;
  }

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

  .hero h1,
  .page-header h1,
  .page-hero h1 {
    font-size: clamp(2.08rem, 9.5vw, 3rem) !important;
    line-height: 1.04 !important;
  }

  .hero p,
  .page-header p,
  .page-hero p {
    margin-top: 16px !important;
    font-size: 1rem !important;
  }

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

  .brand-card {
    min-height: 220px !important;
  }

  .brand-mark {
    width: min(220px, 68%) !important;
  }

  .footer .shell,
  .footer-inner {
    display: grid !important;
    gap: 10px !important;
  }
}