:root {
  --cv-bg: #f4f6f7;
  --cv-paper: #ffffff;
  --cv-ink: #111317;
  --cv-muted: #5d6570;
  --cv-line: #dce1e6;
  --cv-soft: #edf1f4;
  --cv-accent: #f3bd19;
  --cv-accent-dark: #8c6500;
  --cv-dark: #15191d;
  --cv-max: 1180px;
  --cv-radius: 30px;
  --cv-shadow: 0 24px 70px rgba(17, 19, 23, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cv-bg);
  color: var(--cv-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
.skip-link {
  position: fixed;
  top: -80px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--cv-ink);
  color: #fff;
  transition: top .2s ease;
}
.skip-link:focus { top: 16px; }

.cv-header {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px max(24px, calc((100vw - var(--cv-max)) / 2));
  border-bottom: 1px solid rgba(220, 225, 230, .9);
  background: rgba(244, 246, 247, .94);
  backdrop-filter: blur(18px);
}
.cv-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 850;
}
.cv-brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--cv-ink);
  color: var(--cv-accent);
  font-size: .76rem;
  letter-spacing: .04em;
}
.cv-header nav { display: flex; gap: 22px; }
.cv-header nav a {
  color: var(--cv-muted);
  font-size: .88rem;
  font-weight: 760;
  text-decoration: none;
}
.cv-header nav a:hover { color: var(--cv-ink); }

.cv-kicker {
  margin: 0 0 14px;
  color: var(--cv-accent-dark);
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.cv-kicker--light { color: #f7ca42; }
h1, h2, h3 {
  margin-top: 0;
  line-height: 1.08;
  letter-spacing: -.035em;
}
h1 { margin-bottom: 20px; font-size: clamp(2.55rem, 4.1vw, 3.7rem); }
h2 { margin-bottom: 18px; font-size: clamp(1.9rem, 3vw, 3rem); }
h3 { margin-bottom: 10px; font-size: 1.18rem; }
p { margin-top: 0; }

.cv-hero {
  width: min(var(--cv-max), calc(100% - 40px));
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
  padding: clamp(46px, 6vw, 82px);
  border: 1px solid var(--cv-line);
  border-radius: 36px;
  background: var(--cv-paper);
  box-shadow: var(--cv-shadow);
  overflow: hidden;
}
.cv-hero--b { background: linear-gradient(135deg, #fff 0%, #fff 55%, #f4f0e7 100%); }
.cv-hero--c { grid-template-columns: minmax(440px, 1.08fr) minmax(0, .92fr); }
.cv-hero--c .cv-hero-copy { order: 2; }
.cv-hero--c .cv-hero-media { order: 1; }
.cv-hero--d { background: linear-gradient(145deg, #fff 0%, #f0f3f5 100%); }
.cv-lead {
  max-width: 660px;
  margin-bottom: 24px;
  color: #333a43;
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  line-height: 1.55;
}
.cv-benefits { display: grid; gap: 10px; margin: 28px 0; }
.cv-benefit {
  display: grid;
  grid-template-columns: minmax(130px, .55fr) 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--cv-line);
}
.cv-benefit strong { font-size: .95rem; }
.cv-benefit span { color: var(--cv-muted); font-size: .92rem; }
.cv-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cv-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 20px;
  border: 1px solid var(--cv-ink);
  border-radius: 14px;
  font-size: .9rem;
  font-weight: 850;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.cv-button:hover { transform: translateY(-2px); }
.cv-button--primary {
  border-color: var(--cv-accent);
  background: var(--cv-accent);
  box-shadow: 0 12px 30px rgba(243, 189, 25, .25);
}
.cv-button--quiet { background: transparent; }
.cv-button--light { border-color: #fff; background: #fff; color: var(--cv-ink); }
.cv-disclosure { margin: 12px 0 0; color: var(--cv-muted); font-size: .76rem; }
.cv-disclosure--light { color: #c7cbd0; }
.cv-hero-media {
  margin: 0;
  min-width: 0;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: clamp(16px, 2.5vw, 34px);
  border-radius: 30px;
  background: linear-gradient(145deg, #fafafa, #eef1f4);
}
.cv-hero-image {
  width: 100%;
  height: 100%;
  max-height: 560px;
  object-fit: contain;
  filter: drop-shadow(0 25px 34px rgba(17, 19, 23, .13));
}

.cv-story {
  width: min(var(--cv-max), calc(100% - 40px));
  margin: 92px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
  padding: clamp(36px, 5vw, 72px);
  border-radius: var(--cv-radius);
  background: var(--cv-paper);
}
.cv-story--reverse figure { order: 2; }
.cv-story--reverse .cv-story-copy { order: 1; }
.cv-story--dark { background: var(--cv-dark); color: #fff; }
.cv-story--dark .cv-story-copy p:not(.cv-kicker) { color: #c8cdd2; }
.cv-story--soft { background: var(--cv-soft); }
.cv-story figure {
  margin: 0;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
}
.cv-story figure img { width: 100%; height: 100%; object-fit: contain; }
.cv-story-copy p:not(.cv-kicker) { color: #424953; font-size: 1.04rem; }
.cv-text-cta {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 14px;
  color: inherit;
  font-weight: 850;
  text-underline-offset: 5px;
}

.cv-section-heading { max-width: 820px; }
.cv-use-cases,
.cv-details,
.cv-related,
.cv-faq {
  width: min(var(--cv-max), calc(100% - 40px));
  margin: 108px auto 0;
}
.cv-use-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}
.cv-use-grid article {
  min-height: 170px;
  padding: 26px;
  border: 1px solid var(--cv-line);
  border-radius: 22px;
  background: var(--cv-paper);
}
.cv-use-grid span {
  display: block;
  margin-bottom: 38px;
  color: var(--cv-accent-dark);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
}
.cv-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 34px;
  overflow: hidden;
  border: 1px solid var(--cv-line);
  border-radius: 24px;
  background: var(--cv-paper);
}
.cv-detail-grid > div { padding: 24px; border-right: 1px solid var(--cv-line); }
.cv-detail-grid > div:last-child { border-right: 0; }
.cv-detail-grid span {
  display: block;
  margin-bottom: 9px;
  color: var(--cv-muted);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cv-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}
.cv-related-card {
  overflow: hidden;
  border: 1px solid var(--cv-line);
  border-radius: 24px;
  background: var(--cv-paper);
}
.cv-related-card > a:first-child {
  aspect-ratio: 1.15 / 1;
  display: grid;
  place-items: center;
  padding: 22px;
  background: linear-gradient(145deg, #fff, #edf1f4);
}
.cv-related-card img { width: 100%; height: 100%; object-fit: contain; }
.cv-related-card > *:not(:first-child) { margin-left: 22px; margin-right: 22px; }
.cv-related-card .cv-card-brand { margin-top: 22px; }
.cv-card-brand {
  color: var(--cv-accent-dark);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cv-related-card h3 a { text-decoration: none; }
.cv-related-card > p:not(.cv-card-brand) { color: var(--cv-muted); font-size: .92rem; }
.cv-related-card > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-top: 22px;
  margin-bottom: 22px;
}
.cv-related-card > div a { font-size: .82rem; font-weight: 850; text-underline-offset: 4px; }
.cv-mini-cta { color: var(--cv-accent-dark); }
.cv-faq-list { margin-top: 32px; border-top: 1px solid var(--cv-line); }
.cv-faq details { border-bottom: 1px solid var(--cv-line); }
.cv-faq summary { cursor: pointer; padding: 22px 42px 22px 0; font-weight: 820; }
.cv-faq details p { padding: 0 0 24px; color: var(--cv-muted); }
.cv-final {
  width: min(var(--cv-max), calc(100% - 40px));
  margin: 108px auto 76px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 6vw, 86px);
  align-items: center;
  padding: clamp(36px, 6vw, 76px);
  border-radius: 32px;
  background: var(--cv-dark);
  color: #fff;
}
.cv-final figure { margin: 0; aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: 24px; background: #fff; overflow: hidden; }
.cv-final figure img { width: 100%; height: 100%; object-fit: contain; }

.cv-category-intro {
  width: min(var(--cv-max), calc(100% - 40px));
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  padding: 34px 0 26px;
}
.cv-category-intro .cv-kicker { grid-column: 1 / -1; margin-bottom: -4px; }
.cv-category-intro h1 { margin-bottom: 10px; font-size: clamp(2.2rem, 3.8vw, 3.25rem); }
.cv-category-intro p:not(.cv-kicker) { max-width: 760px; margin: 0; color: var(--cv-muted); font-size: 1.03rem; }
.cv-category-products { width: min(var(--cv-max), calc(100% - 40px)); margin: 10px auto 80px; }
.cv-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.cv-category-card {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  overflow: hidden;
  border: 1px solid var(--cv-line);
  border-radius: 26px;
  background: var(--cv-paper);
  min-height: 360px;
}
.cv-category-image { display: grid; place-items: center; padding: 24px; background: linear-gradient(145deg, #fff, #edf1f4); }
.cv-category-image img { width: 100%; height: 100%; max-height: 340px; object-fit: contain; }
.cv-category-card-body { display: flex; flex-direction: column; justify-content: center; padding: 30px; }
.cv-category-card-body h2 { margin-bottom: 14px; font-size: clamp(1.55rem, 2.2vw, 2.3rem); }
.cv-category-card-body h2 a { text-decoration: none; }
.cv-category-card-body > p:not(.cv-card-brand) { color: var(--cv-muted); }
.cv-category-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cv-category-card-actions .cv-button { min-height: 46px; padding: 10px 15px; font-size: .82rem; }
.cv-category-disclosure { margin-top: 14px; }

.cv-footer {
  width: min(var(--cv-max), calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 34px 0 54px;
  color: var(--cv-muted);
  font-size: .82rem;
}
.cv-footer p { margin: 0; }
.cv-footer > a:last-child { font-weight: 800; }
.cv-mobile-offer { display: none; }

@media (max-width: 980px) {
  .cv-hero,
  .cv-hero--c { grid-template-columns: 1fr; }
  .cv-hero--c .cv-hero-copy,
  .cv-hero--c .cv-hero-media { order: initial; }
  .cv-hero-media { max-width: 650px; width: 100%; margin: 0 auto; }
  .cv-story { grid-template-columns: 1fr; }
  .cv-story--reverse figure,
  .cv-story--reverse .cv-story-copy { order: initial; }
  .cv-use-grid,
  .cv-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-detail-grid > div:nth-child(2) { border-right: 0; }
  .cv-detail-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--cv-line); }
  .cv-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-category-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  body { padding-bottom: 78px; }
  .cv-header { min-height: 66px; padding-inline: 16px; }
  .cv-header nav { display: none; }
  .cv-hero,
  .cv-story,
  .cv-use-cases,
  .cv-details,
  .cv-related,
  .cv-faq,
  .cv-final,
  .cv-category-intro,
  .cv-category-products,
  .cv-footer { width: calc(100% - 24px); }
  .cv-hero { margin-top: 14px; padding: 28px 22px; border-radius: 25px; }
  h1 { font-size: clamp(2.35rem, 12vw, 3.1rem); }
  h2 { font-size: clamp(1.75rem, 9vw, 2.45rem); }
  .cv-benefit { grid-template-columns: 1fr; gap: 5px; }
  .cv-actions .cv-button { width: 100%; }
  .cv-hero-media { border-radius: 22px; }
  .cv-story { margin-top: 56px; padding: 24px 20px; border-radius: 24px; gap: 28px; }
  .cv-use-cases,
  .cv-details,
  .cv-related,
  .cv-faq { margin-top: 72px; }
  .cv-use-grid,
  .cv-detail-grid,
  .cv-related-grid { grid-template-columns: 1fr; }
  .cv-detail-grid > div { border-right: 0; border-bottom: 1px solid var(--cv-line); }
  .cv-detail-grid > div:last-child { border-bottom: 0; }
  .cv-final { grid-template-columns: 1fr; margin-top: 72px; margin-bottom: 42px; padding: 26px 22px; }
  .cv-category-intro { grid-template-columns: 1fr; padding-top: 22px; }
  .cv-category-intro .cv-button { width: 100%; }
  .cv-category-card { grid-template-columns: 1fr; min-height: 0; }
  .cv-category-image { min-height: 290px; }
  .cv-category-card-actions .cv-button { width: 100%; }
  .cv-footer { flex-direction: column; align-items: flex-start; }
  .cv-mobile-offer {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 12px 15px;
    border: 1px solid #000;
    border-radius: 16px;
    background: var(--cv-accent);
    color: var(--cv-ink);
    text-decoration: none;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .24);
  }
  .cv-mobile-offer span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .78rem; font-weight: 760; }
  .cv-mobile-offer strong { flex: 0 0 auto; font-size: .82rem; }
}


/* HOTO_CONVERSION_TOUCH_TARGET_FIX_V1 */
.cv-mini-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 2px;
  line-height: 1.25;
}

/* HOTO_CONVERSION_MOBILE_MIN_WIDTH_FIX_V1 */
.cv-hero-copy,
.cv-story-copy,
.cv-final > div,
.cv-actions,
.cv-benefit {
  min-width: 0;
}

@media (max-width: 680px) {
  .cv-benefit {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .cv-button {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
  }
}