:root {
  --v2-bg: #f4f5f7;
  --v2-paper: #ffffff;
  --v2-ink: #121417;
  --v2-muted: #606772;
  --v2-line: #dfe3e8;
  --v2-soft: #eceff3;
  --v2-accent: #f8c51c;
  --v2-accent-dark: #d39a00;
  --v2-dark: #111822;
  --v2-max: 1240px;
  --v2-shadow: 0 28px 80px rgba(18, 20, 23, .09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--v2-bg);
  color: var(--v2-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%; }
figure { margin: 0; }

.skip-link {
  position: fixed;
  top: -80px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--v2-ink);
  color: #fff;
  transition: top .2s ease;
}
.skip-link:focus { top: 16px; }

.v2-header {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 14px max(24px, calc((100vw - var(--v2-max)) / 2));
  border-bottom: 1px solid rgba(223, 227, 232, .9);
  background: rgba(248, 249, 250, .93);
  backdrop-filter: blur(18px);
}
.v2-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--v2-ink);
  font-weight: 850;
  text-decoration: none;
  letter-spacing: -.015em;
}
.v2-brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--v2-ink);
  color: var(--v2-accent);
  font-size: .76rem;
  letter-spacing: .03em;
}
.v2-header nav { display: flex; align-items: center; gap: 26px; }
.v2-header nav a {
  color: #4b525c;
  font-size: .9rem;
  font-weight: 760;
  text-decoration: none;
}
.v2-header nav a:hover { color: var(--v2-ink); }

main { overflow: clip; }
.v2-kicker {
  margin: 0 0 13px;
  color: #7a5a00;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.v2-kicker--light { color: #ffd55b; }
h1, h2, h3 { margin-top: 0; line-height: 1.04; letter-spacing: -.045em; }
h1 { margin-bottom: 24px; font-size: clamp(3rem, 6.4vw, 6.8rem); }
h2 { margin-bottom: 22px; font-size: clamp(2.2rem, 4.3vw, 4.7rem); }
h3 { margin-bottom: 10px; font-size: 1.35rem; }
p { margin-top: 0; }
.v2-lead {
  max-width: 760px;
  margin-bottom: 28px;
  color: #353b43;
  font-size: clamp(1.1rem, 1.7vw, 1.42rem);
  line-height: 1.48;
}

.v2-product-hero,
.v2-category-hero {
  width: min(var(--v2-max), calc(100% - 40px));
  margin: 32px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(380px, .94fr);
  gap: clamp(40px, 7vw, 92px);
  align-items: center;
  padding: clamp(44px, 7vw, 94px);
  border: 1px solid var(--v2-line);
  border-radius: 38px;
  background: var(--v2-paper);
  box-shadow: var(--v2-shadow);
}
.v2-product-copy h1,
.v2-category-copy h1 { max-width: 830px; }
.v2-hero-media,
.v2-category-collage {
  min-width: 0;
}
.v2-hero-media {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: clamp(20px, 3vw, 44px);
  border-radius: 32px;
  background: linear-gradient(145deg, #fff, #eef1f4);
}
.v2-hero-image {
  width: 100%;
  height: 100%;
  max-height: 590px;
  object-fit: contain;
  filter: drop-shadow(0 28px 46px rgba(19, 24, 32, .16));
}

.benefit-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin: 26px 0 30px;
}
.benefit-chip {
  min-height: 112px;
  padding: 18px;
  border: 1px solid var(--v2-line);
  border-radius: 18px;
  background: #fafbfc;
}
.benefit-chip strong,
.benefit-chip span { display: block; }
.benefit-chip strong { margin-bottom: 7px; font-size: .95rem; }
.benefit-chip span { color: var(--v2-muted); font-size: .82rem; line-height: 1.42; }

.v2-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.v2-button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 21px;
  border: 1px solid var(--v2-ink);
  border-radius: 15px;
  font-weight: 860;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.v2-button:hover { transform: translateY(-2px); }
.v2-button--primary {
  border-color: var(--v2-accent);
  background: var(--v2-accent);
  box-shadow: 0 14px 34px rgba(248, 197, 28, .25);
}
.v2-button--quiet { background: transparent; }
.v2-button--light { border-color: #fff; background: #fff; color: var(--v2-ink); }
.v2-button--outline-light { border-color: rgba(255,255,255,.48); color: #fff; }
.v2-text-cta {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--v2-ink);
  font-weight: 850;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.v2-disclosure {
  max-width: 560px;
  margin: 14px 0 0;
  color: #6d747d;
  font-size: .78rem;
}
.v2-disclosure--light { color: #bdc5cf; }

.v2-story,
.v2-related,
.v2-pump-card {
  width: min(var(--v2-max), calc(100% - 40px));
  margin: 34px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(42px, 8vw, 110px);
  padding: clamp(48px, 8vw, 104px);
  border: 1px solid var(--v2-line);
  border-radius: 36px;
  background: var(--v2-paper);
}
.v2-story--dark {
  border-color: #1b2531;
  background: var(--v2-dark);
  color: #fff;
}
.v2-story--soft { background: #e9edf1; }
.v2-story-copy p:not(.v2-kicker) {
  max-width: 650px;
  color: #4c535d;
  font-size: 1.08rem;
}
.v2-story--dark .v2-story-copy p:not(.v2-kicker) { color: #c8d0d9; }
.v2-story figure,
.v2-related figure,
.v2-pump-card figure {
  min-width: 0;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(145deg, #fff, #eef1f4);
}
.v2-story figure img,
.v2-related figure img,
.v2-pump-card figure img {
  width: 100%;
  height: 100%;
  padding: 22px;
  object-fit: contain;
}
.v2-inline-points,
.v2-product-points {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.v2-inline-points { display: flex; flex-wrap: wrap; gap: 9px; }
.v2-inline-points li {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #e7ecf2;
  font-size: .82rem;
  font-weight: 760;
}
.v2-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 30px;
}
.v2-stat-row div {
  padding: 19px;
  border: 1px solid var(--v2-line);
  border-radius: 18px;
  background: #fafbfc;
}
.v2-stat-row strong,
.v2-stat-row span { display: block; }
.v2-stat-row strong { font-size: 2rem; }
.v2-stat-row span { color: var(--v2-muted); font-size: .78rem; }

.v2-use-cases,
.v2-details,
.v2-faq,
.v2-task-paths,
.v2-pump-showcase {
  width: min(var(--v2-max), calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(90px, 11vw, 150px) 0;
}
.v2-section-heading { max-width: 880px; margin-bottom: 38px; }
.v2-use-grid,
.v2-task-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}
.v2-use-grid article,
.v2-task-grid a {
  min-height: 240px;
  padding: 27px;
  border: 1px solid var(--v2-line);
  border-radius: 25px;
  background: var(--v2-paper);
  text-decoration: none;
}
.v2-use-grid article span,
.v2-task-grid a > span {
  display: block;
  margin-bottom: 42px;
  color: #8b6500;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.v2-use-grid article p,
.v2-task-grid a p { color: var(--v2-muted); }
.v2-task-grid a strong { display: block; margin-bottom: 10px; font-size: 1.25rem; }
.v2-task-grid a:hover { box-shadow: var(--v2-shadow); transform: translateY(-3px); }

.v2-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--v2-line);
  border-radius: 27px;
  background: var(--v2-paper);
}
.v2-spec-grid div {
  min-height: 130px;
  padding: 25px;
  border-right: 1px solid var(--v2-line);
  border-bottom: 1px solid var(--v2-line);
}
.v2-spec-grid div:nth-child(3n) { border-right: 0; }
.v2-spec-grid div:nth-last-child(-n+3) { border-bottom: 0; }
.v2-spec-grid span,
.v2-spec-grid strong { display: block; }
.v2-spec-grid span { margin-bottom: 10px; color: var(--v2-muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.v2-spec-grid strong { font-size: 1.12rem; }

.v2-related { background: #fff8dc; }
.v2-related-copy > p:not(.v2-kicker) { color: #4e5054; font-size: 1.08rem; }
.v2-faq-list { border-top: 1px solid var(--v2-line); }
.v2-faq details { border-bottom: 1px solid var(--v2-line); }
.v2-faq summary { cursor: pointer; padding: 23px 0; font-size: 1.05rem; font-weight: 820; }
.v2-faq details p { max-width: 800px; padding-bottom: 24px; color: var(--v2-muted); }

.v2-final,
.v2-category-final {
  width: min(var(--v2-max), calc(100% - 40px));
  margin: 10px auto 70px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(40px, 8vw, 100px);
  padding: clamp(46px, 7vw, 86px);
  border-radius: 36px;
  background: var(--v2-dark);
  color: #fff;
}
.v2-final figure {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
}
.v2-final figure img { width: 100%; height: 100%; padding: 24px; object-fit: contain; }
.v2-final h2,
.v2-category-final h2 { font-size: clamp(2.3rem, 4vw, 4.5rem); }

.v2-category-collage {
  position: relative;
  min-height: 540px;
}
.v2-category-collage figure {
  position: absolute;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--v2-line);
  background: #fff;
  box-shadow: var(--v2-shadow);
}
.v2-category-collage img { width: 100%; height: 100%; padding: 20px; object-fit: contain; }
.v2-collage-main { inset: 0 12% 8% 0; border-radius: 30px; }
.v2-collage-small { width: 48%; height: 48%; right: 0; bottom: 0; border-radius: 24px; }
.v2-pump-showcase { padding-bottom: 30px; }
.v2-pump-card { margin-top: 0; margin-bottom: 28px; }
.v2-pump-card--master { background: #fff; }
.v2-pump-card--pocket { background: #eaf1f8; }
.v2-card-lead { color: #4c535d; font-size: 1.1rem; }
.v2-product-points li { position: relative; margin: 12px 0; padding-left: 25px; }
.v2-product-points li::before { content: "✓"; position: absolute; left: 0; color: #00835b; font-weight: 900; }
.v2-category-final { grid-template-columns: 1fr auto; }

.v2-footer {
  width: min(var(--v2-max), calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 26px;
  padding: 32px 0 50px;
  color: var(--v2-muted);
  font-size: .86rem;
}
.v2-footer p { margin: 0; }
.v2-footer > a:last-child { font-weight: 780; }
.v2-brand--footer { font-size: .9rem; }

@media (max-width: 980px) {
  .v2-product-hero,
  .v2-category-hero,
  .v2-story,
  .v2-related,
  .v2-pump-card,
  .v2-final,
  .v2-category-final { grid-template-columns: 1fr; }
  .v2-category-collage { min-height: 500px; max-width: 650px; width: 100%; margin: 0 auto; }
  .v2-use-grid,
  .v2-task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-category-final .v2-actions { justify-content: flex-start; }
}

@media (max-width: 700px) {
  .v2-header { align-items: flex-start; padding-inline: 16px; }
  .v2-header nav { display: none; }
  .v2-product-hero,
  .v2-category-hero,
  .v2-story,
  .v2-related,
  .v2-pump-card,
  .v2-final,
  .v2-category-final {
    width: calc(100% - 24px);
    margin-top: 14px;
    padding: 27px 20px;
    border-radius: 25px;
  }
  h1 { font-size: clamp(2.55rem, 13vw, 4rem); }
  h2 { font-size: clamp(2rem, 10vw, 3.2rem); }
  .benefit-row,
  .v2-stat-row,
  .v2-use-grid,
  .v2-task-grid,
  .v2-spec-grid { grid-template-columns: 1fr; }
  .benefit-chip { min-height: auto; }
  .v2-button { width: 100%; }
  .v2-story figure,
  .v2-related figure,
  .v2-pump-card figure { order: -1; }
  .v2-use-cases,
  .v2-details,
  .v2-faq,
  .v2-task-paths,
  .v2-pump-showcase { width: calc(100% - 24px); padding: 72px 0; }
  .v2-use-grid article,
  .v2-task-grid a { min-height: 205px; }
  .v2-spec-grid div,
  .v2-spec-grid div:nth-child(3n),
  .v2-spec-grid div:nth-last-child(-n+3) { border-right: 0; border-bottom: 1px solid var(--v2-line); }
  .v2-spec-grid div:last-child { border-bottom: 0; }
  .v2-category-collage { min-height: 390px; }
  .v2-collage-main { inset: 0 8% 10% 0; }
  .v2-collage-small { width: 49%; height: 46%; }
  .v2-footer { grid-template-columns: 1fr; width: calc(100% - 32px); }
}


/* HOTO_PRODUCT_FIRST_CATEGORY_V3 */
.v2-product-hero {
  grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr);
  gap: clamp(34px, 5vw, 68px);
  padding: clamp(42px, 5.4vw, 74px);
}
.v2-product-copy h1 {
  max-width: 680px;
  font-size: clamp(3rem, 3.85vw, 4.2rem);
  line-height: 1.01;
}
.v2-product-hero .v2-hero-media {
  min-height: 520px;
  padding: clamp(16px, 2.2vw, 30px);
}
.v2-product-hero .v2-hero-image { max-height: 650px; }
.v2-category-intro {
  width: min(var(--v2-max), calc(100% - 40px));
  margin: 28px auto 0;
  padding: clamp(34px, 4.5vw, 58px);
  border: 1px solid var(--v2-line);
  border-radius: 32px;
  background: var(--v2-paper);
  box-shadow: 0 18px 54px rgba(18, 20, 23, .06);
}
.v2-category-intro-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 30px;
}
.v2-category-intro h1 {
  max-width: 760px;
  margin-bottom: 14px;
  font-size: clamp(2.7rem, 4vw, 4rem);
  line-height: 1;
}
.v2-category-intro .v2-lead {
  max-width: 740px;
  margin-bottom: 0;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
}
.v2-category-products {
  width: min(var(--v2-max), calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(58px, 7vw, 92px) 0 clamp(76px, 9vw, 120px);
}
.v2-section-heading--compact { max-width: 820px; margin-bottom: 30px; }
.v2-section-heading--compact h2 {
  margin-bottom: 14px;
  font-size: clamp(2.15rem, 3.4vw, 3.5rem);
}
.v2-category-deck {
  max-width: 720px;
  color: var(--v2-muted);
  font-size: 1.05rem;
}
.v2-category-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.v2-category-product-grid .v2-pump-card {
  width: auto;
  margin: 0;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 24px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 30px;
}
.v2-category-product-grid .v2-pump-card figure {
  order: -1;
  min-height: 390px;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
}
.v2-category-product-grid .v2-pump-card figure img { padding: clamp(18px, 2.5vw, 30px); }
.v2-category-product-grid .v2-pump-card h2 {
  margin-bottom: 14px;
  font-size: clamp(2rem, 2.7vw, 2.8rem);
}
.v2-category-product-grid .v2-card-lead { min-height: 3.2em; }
.v2-category-product-grid .v2-product-points { margin-top: 18px; }
.v2-category-disclosure { margin: 18px 0 0; }
@media (max-width: 980px) {
  .v2-product-hero { grid-template-columns: 1fr; }
  .v2-product-hero .v2-hero-media { min-height: 440px; }
  .v2-category-product-grid { grid-template-columns: 1fr; }
  .v2-category-product-grid .v2-pump-card figure { min-height: 430px; }
}
@media (max-width: 700px) {
  .v2-product-copy h1 { font-size: clamp(2.65rem, 11vw, 3.45rem); }
  .v2-product-hero .v2-hero-media { min-height: 330px; }
  .v2-category-intro {
    width: calc(100% - 24px);
    margin-top: 14px;
    padding: 28px 20px;
    border-radius: 24px;
  }
  .v2-category-intro-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 20px;
  }
  .v2-category-intro h1 { font-size: clamp(2.35rem, 11vw, 3.1rem); }
  .v2-category-intro .v2-button { width: auto; justify-self: start; }
  .v2-category-products { width: calc(100% - 24px); padding: 56px 0 74px; }
  .v2-category-product-grid .v2-pump-card { padding: 20px; }
  .v2-category-product-grid .v2-pump-card figure { min-height: 290px; }
}