:root {
  --colorWhite: #ffffff;
  --colorBlack: #000000;
  --colorText: #1f1f1f;
  --colorBorder: #c8c8c8;
  --colorMuted: #5a5a5a;
  --colorRed: #ff6a6a;
  --colorGold: #d6c17e;
  --colorTitleDark: #374352;
  --colorBlue: #486a82;
  --colorBlueSoft: #6ca2bc;
  --colorMint: rgba(126, 214, 167, 0.81);
  /* Default-theme accent vars (catcherPage / gtnexPage override these) */
  --colorAccent: #486a82;
  --colorAccentSoft: #6ca2bc;
  --colorAccentDeep: #374352;
  --colorYellow: rgba(255, 251, 0, 0.39);
  --colorCardShadow: 0 1rem 2.5rem rgba(55, 67, 82, 0.1);
  --colorButtonShadow: 0 0.75rem 2rem rgba(72, 106, 130, 0.25);
  --gradientHeroText: radial-gradient(218.11% 50% at 50% 50%, #6ca2bc 0%, #374352 100%);
  --gradientSectionText: linear-gradient(
    90deg,
    #486a82 32.69%,
    rgba(126, 214, 167, 0.81) 50.48%,
    #374352 68.27%
  );
  --gradientHeroButton: linear-gradient(
    90deg,
    #486a82 0%,
    rgba(126, 214, 167, 0.81) 50.48%,
    #486a82 100%
  );
  --gradientHeaderButton: linear-gradient(90deg, rgba(126, 214, 167, 0.81) 0%, #486a82 100%);
  --gradientNumber: linear-gradient(135deg, #5b97b4 0%, rgba(126, 214, 167, 0.9) 60%, #7ed6a7 100%);
  --fontMincho: "FOT-UDMincho Pr6N", "BIZ UDMincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --siteMaxWidth: 120rem;
  --contentWidth: min(100% - 2.4rem, var(--siteMaxWidth));
  --headerHeight: 8.4rem;
  --radiusSmall: 1rem;
  --radiusMedium: 1.6rem;
  --radiusLarge: 2.3rem;
  --radiusCard: 3rem;
  --transitionBase: 0.3s ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--headerHeight) + 1rem);
}

body {
  margin: 0;
  color: var(--colorBlack);
  font-family: "Noto Sans JP", "Noto Sans", Arial, sans-serif;
  line-height: 1.5;
  background-color: #f8f9fa;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}


/* ======================================== */
/* COMMON LAYOUT - START                    */
/* ======================================== */
.siteWrapper {
  overflow-x: clip;
}

.contentContainer {
  width: var(--contentWidth);
  margin-inline: auto;
}

.sectionTitleGradient {
  background: var(--gradientSectionText);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ======================================== */
/* SCROLL REVEAL PRIMITIVE                  */
/* ======================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

[data-reveal].isRevealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ======================================== */
/* RESPONSIVE BREAK-LINE UTILITIES          */
/* ======================================== */
br.mobile {
  display: block;
}

br.tablet,
br.desktop {
  display: none;
}


/* ======================================== */
/* HEADER - START                           */
/* ======================================== */
.siteHeader {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--headerHeight);
  background-color: rgba(255, 255, 255, 0.98);
  border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.06);
  /* No backdrop-filter — it creates a containing block that traps the fixed
     mobile menu (.headerRightArea) inside the header's box. */
}

.headerInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  min-height: var(--headerHeight);
  padding-block: 1.2rem;
}

.siteLogoLink {
  position: relative;
  z-index: 101;
  flex-shrink: 0;
}

.siteLogo {
  width: 7.6rem;
}

.headerMenuButton {
  position: relative;
  z-index: 101;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.headerMenuLine {
  width: 100%;
  height: 0.125rem;
  background-color: var(--colorTitleDark);
  border-radius: 999rem;
  transition: transform var(--transitionBase), opacity var(--transitionBase);
}

.headerMenuButton.isActive .headerMenuLine:nth-child(1) {
  transform: translateY(0.48rem) rotate(45deg);
}

.headerMenuButton.isActive .headerMenuLine:nth-child(2) {
  opacity: 0;
}

.headerMenuButton.isActive .headerMenuLine:nth-child(3) {
  transform: translateY(-0.48rem) rotate(-45deg);
}

.headerRightArea {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2rem;
  padding: 7.5rem 1.2rem 2rem;
  background: rgba(255, 255, 255, 0.98);
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--transitionBase), visibility var(--transitionBase);
}

.headerRightArea.isOpen {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

.globalNavList {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.globalNavItem {
  position: relative;
}

.globalNavLink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--transitionBase);
}

.globalNavTrigger {
  text-align: left;
}

.globalNavArrow {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 0.125rem solid currentColor;
  border-bottom: 0.125rem solid currentColor;
  transform: rotate(45deg) translate(-0.12rem, -0.12rem);
  transition: transform var(--transitionBase);
}

.globalNavTrigger[aria-expanded="true"] .globalNavArrow {
  transform: rotate(-135deg) translate(-0.12rem, -0.12rem);
}

.globalNavSubmenu {
  max-height: 0;
  padding-left: 1rem;
  overflow: hidden;
  transition: max-height var(--transitionBase);
}

.globalNavTrigger[aria-expanded="true"] + .globalNavSubmenu {
  max-height: 16rem;
}

.globalNavSubmenuItem {
  padding-block: 0.35rem;
}

.globalNavSubmenuLink {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--colorMuted);
  transition: color var(--transitionBase);
}

.globalNavSubmenuLink:hover,
.globalNavSubmenuLink:focus-visible {
  color: var(--colorBlue);
}

.headerContactArea {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.headerPhoneLink {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: flex-start;
}

.headerPhoneLabel {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
}

.headerPhoneNumber {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.headerPhoneIcon {
  flex-shrink: 0;
  width: 0.85em;
  height: 0.85em;
  color: var(--colorBlue);
}

.headerPhoneNote {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.headerCtaButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem;
  border-radius: 1.4375rem;
  background: var(--gradientHeaderButton);
  color: var(--colorWhite);
  font-size: 1rem;
  font-weight: 700;
  box-shadow: var(--colorButtonShadow);
  transition: transform var(--transitionBase), box-shadow var(--transitionBase), filter var(--transitionBase);
}

.headerCtaButton:hover,
.headerCtaButton:focus-visible {
  transform: translateY(-0.125rem);
  box-shadow: 0 1rem 2rem rgba(72, 106, 130, 0.3);
  filter: brightness(1.04);
}

.headerCtaButton:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

/* ======================================== */
/* HERO SECTION - START                     */
/* ======================================== */
.heroSection {
  position: relative;
  isolation: isolate;
  padding-block: 2rem 3rem;
  background-color: #edf4f5;
}

.heroBackground {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.heroBackground::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Mobile: solid-ish wash on the LEFT (text area) fading to clear on the RIGHT
     so the product photo shows through there. Bumped to a deeper opacity so
     copy stays readable when overlapping image areas. */
  background: linear-gradient(
    100deg,
    rgba(237, 244, 245, 0.96) 0%,
    rgba(237, 244, 245, 0.88) 38%,
    rgba(237, 244, 245, 0.45) 62%,
    rgba(237, 244, 245, 0.12) 100%
  );
}

.heroBackgroundImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Push the cropped frame so the product (right-of-center in the source
     image) is visible on narrow screens. */
  object-position: 80% center;
}

/* Desktop-only product overlay (hidden by default; shown via @media in desktop.css) */
.heroProductLayer {
  display: none;
}

.heroInner {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 2rem;
}

.heroContent {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.heroStatsCard {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.2rem;
  align-self: flex-start;
  padding: 1rem 1.4rem;
  background-color: rgba(255, 255, 255, 0.92);
  border-radius: 1.3rem;
  box-shadow:
    0 1.4rem 2.8rem rgba(55, 67, 82, 0.14),
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.8);
}

.heroStatsText {
  font-size: 1rem;
  font-weight: 700;
  color: var(--colorBlack);
}

.heroStatsText strong {
  color: var(--colorGold);
  font-size: 1.35em;
  font-weight: 700;
}

.heroBody {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.heroCopyArea {
  max-width: 100%;
}

.heroTitle {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  margin-bottom: 1.4rem;
}

.heroTitleLine {
  font-size: clamp(2.7rem, 9vw, 4.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  background: var(--gradientHeroText);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.heroDescription {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8;
  color: var(--colorBlack);
}

.heroCaution {
  margin-top: 1.4rem;
  color: var(--colorRed);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.6;
}

.heroVisualArea {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

.heroMachineImage {
  filter: drop-shadow(0 1.2rem 2rem rgba(0, 0, 0, 0.12));
}

.heroMachineImageSmall {
  width: min(34%, 9rem);
}

.heroMachineImageLarge {
  width: min(56%, 14rem);
}

.heroCtaButton {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.7rem;
  width: 100%;
  padding: 1.25rem 1rem 1rem;
  border-radius: 1.6rem;
  background: var(--gradientHeroButton);
  color: var(--colorWhite);
  text-align: center;
  box-shadow: var(--colorButtonShadow);
  transition: transform var(--transitionBase), box-shadow var(--transitionBase), filter var(--transitionBase);
}

.heroCtaButton:hover,
.heroCtaButton:focus-visible {
  transform: translateY(-0.2rem);
  box-shadow: 0 1.3rem 2.4rem rgba(72, 106, 130, 0.36);
  filter: brightness(1.04);
}

.heroCtaButton:active {
  transform: translateY(-0.05rem);
  filter: brightness(0.98);
}

.heroCtaMain {
  font-size: clamp(1.55rem, 4.8vw, 2.625rem);
  font-weight: 700;
  line-height: 1.2;
}

.heroCtaArrow {
  font-size: 1.1rem;
  transform: translateY(0.05rem);
}

.heroCtaSub {
  width: 100%;
  font-size: clamp(0.95rem, 3.2vw, 1.375rem);
  font-weight: 700;
  line-height: 1.5;
}

/* ======================================== */
/* PROBLEM SECTION - START                  */
/* ======================================== */
.problemSection {
  position: relative;
  padding-block: 3rem 4rem;
  background-color: var(--colorWhite);
}

.sectionHeadingWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding-top: 7rem;
  margin-bottom: 1.8rem;
}

/* Yellow label anchors to SECTION's top-left = viewport-flush.
   Wrap's position:absolute resolves to the nearest positioned ancestor,
   which is the section (contentContainer & sectionHeadingWrap are static). */
.sectionLabelWrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 18rem;
  height: 7rem;
  z-index: 5;
}

.sectionLabelBox {
  position: absolute;
  background: var(--colorYellow);
}

.sectionLabelBoxFront {
  top: 0;
  left: 0;
  width: 14rem;
  height: 5.4rem;
}

.sectionLabelBoxBack {
  top: 1.6rem;
  left: 2.4rem;
  width: 14.6rem;
  height: 5.4rem;
}

.sectionLabelText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: var(--colorBlack);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.sectionTitle {
  font-size: clamp(1.8rem, 5.8vw, 2.75rem);
  font-weight: 700;
  line-height: 1.35;
}

.problemIntro {
  margin-bottom: 2rem;
}

.problemIntroText {
  color: var(--colorBlack);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.95;
}

.problemCardGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.problemCard {
  position: relative;
  min-height: 20rem;
  padding: 1.6rem 1.4rem 1.8rem;
  background-color: #fff;
  border: 0.09375rem solid #cfcfcf;
  border-radius: 2rem;
  box-shadow:
    0 1.2rem 2.4rem rgba(55, 67, 82, 0.1),
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.9);
}

.problemCard::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 50%;
  background: radial-gradient(
    ellipse at top right,
    rgba(126, 214, 167, 0.14) 0%,
    rgba(126, 214, 167, 0) 70%
  );
  border-radius: inherit;
  pointer-events: none;
}

.problemCardNumber {
  margin-bottom: 0.7rem;
  color: var(--colorMint);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 12vw, 4.6rem);
  font-weight: 700;
  line-height: 1;
}

.problemCardTitle {
  margin-bottom: 1rem;
  color: var(--colorBlack);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.4;
}

.problemCardText {
  color: var(--colorBlack);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8;
}

.problemCard[data-reveal]:nth-child(2).isRevealed {
  transition-delay: 0.1s;
}

.problemCard[data-reveal]:nth-child(3).isRevealed {
  transition-delay: 0.2s;
}

/* ======================================== */
/* SOLUTION SECTION - START                 */
/* ======================================== */
.solutionSection {
  position: relative;
  isolation: isolate;
  padding-block: 3rem 4rem;
  overflow: hidden;
}

.solutionBackground {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.solutionBackground::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.72) 100%
  );
}

.solutionBackgroundImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#gtnex .sectionHeadingWrapSolution {
  padding-top: 8rem;
  align-items: center;
  margin-bottom: 2rem;
}

#gtnex .sectionLabelWrapSolution {
  position: absolute;
  top: 0;
  left: 0;
}

#gtnex .sectionHeadingContentSolution {
  padding-top: 0 !important;
  width: 100%;
}

.sectionHeadingContent {
  display: flex;
  flex-direction: column;
  gap: 1rem;
      padding-top: 27vw!important;
}

.solutionLeadText {
  color: var(--colorBlack);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8;
}

.solutionArticleList {
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
}

.solutionArticle {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.solutionArticleMedia {
  position: relative;
}

.solutionArticleImage {
  width: 100%;
  aspect-ratio: 12 / 7;
  object-fit: cover;
  border-radius: 0.6rem;
  box-shadow: 0 1rem 2rem rgba(55, 67, 82, 0.08);
}

.solutionArticleBody {
  position: relative;
  z-index: 2;
  margin-top: -1.4rem;
}

.solutionArticleTextBox {
  padding: 1.4rem 1.2rem 1.5rem;
  border: 0.0625rem solid rgba(123, 123, 123, 0.35);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(0.6rem);
  box-shadow: 0 0.8rem 1.8rem rgba(55, 67, 82, 0.08);
  border-radius: 0.4rem;
}

.solutionArticleTitle {
  margin-bottom: 0.8rem;
  color: var(--colorBlack);
  font-family: "FOT-UDMincho Pr6N", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.55rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
}

.solutionArticleTag {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.35rem 0.7rem;
  background: #202020;
  color: #fffb00;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
}

.solutionArticleText {
  color: var(--colorBlack);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.7;
}

.solutionArticleBadge {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--gradientNumber);
  color: var(--colorWhite);
  font-family: var(--fontMincho);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  box-shadow:
    0 0.6rem 1.2rem rgba(72, 106, 130, 0.28),
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.4);
}
/* ======================================== */
/* SOLUTION SECTION - END                   */
/* ======================================== */

/* ======================================== */
/* VOICE SECTION - START                    */
/* ======================================== */
.voiceSection {
  position: relative;
  padding-block: 3rem 4rem;
  background-color: var(--colorWhite);
  overflow: hidden;
}

.sectionHeadingWrapVoice {
  align-items: center;
  text-align: center;
  margin-bottom: 2.2rem;
}

.voiceLabelWrap {
  align-self: flex-start;
}

.voiceTitle {
  position: relative;
  width: 100%;
}

.voiceCardGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}

.voiceCard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.8rem 1.6rem 1.6rem;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(248, 252, 251, 1) 100%
  );
  border: 0.1875rem solid #c9c9c9;
  border-radius: 2.4rem;
  box-shadow:
    0 1.2rem 2.4rem rgba(72, 106, 130, 0.08),
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.8);
}

.voiceCard::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 55%;
  background: radial-gradient(
    ellipse at top right,
    rgba(126, 214, 167, 0.12) 0%,
    rgba(126, 214, 167, 0) 70%
  );
  border-radius: inherit;
  pointer-events: none;
}

.voiceCardNumber {
  font-family: var(--fontMincho);
  font-size: 5.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  background: var(--gradientNumber);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0.5rem 0.9rem rgba(91, 151, 180, 0.18));
  margin-bottom: 0.6rem;
}

.voiceCardTitle {
  margin-bottom: 0.9rem;
  color: var(--colorBlack);
  font-family: var(--fontMincho);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.4;
}

.voiceCardText {
  flex: 1;
  color: #272727;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.75;
}

.voiceCardAttribution {
  margin-top: 1.4rem;
  color: #7b7b7b;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
}

.voiceCard[data-reveal]:nth-child(2).isRevealed {
  transition-delay: 0.12s;
}

.voiceCard[data-reveal]:nth-child(3).isRevealed {
  transition-delay: 0.24s;
}
/* ======================================== */
/* VOICE SECTION - END                      */
/* ======================================== */

/* ======================================== */
/* LINEUP SECTION - START                   */
/* ======================================== */
.lineupSection {
  position: relative;
  padding-block: 3rem 4rem;
  background: linear-gradient(180deg, #fdf8e6 0%, #fbf4d8 100%);
  overflow: hidden;
}

.sectionHeadingWrapLineup {
  align-items: center;
  text-align: center;
  margin-bottom: 2.2rem;
}

.lineupLabelWrap {
  align-self: flex-start;
}

.lineupCardGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
}

.lineupCard {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.4rem 1.8rem;
  background: var(--colorWhite);
  border-radius: 2rem;
  box-shadow:
    0 1.4rem 2.8rem rgba(55, 67, 82, 0.1),
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.9);
}

.lineupCardImageWrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 16rem;
  padding: 1rem 0 1.4rem;
}

.lineupCardImage {
  width: auto;
  max-width: 80%;
  max-height: 14rem;
  filter: drop-shadow(0 1rem 1.6rem rgba(0, 0, 0, 0.1));
}

.lineupCardImageLarge {
  max-height: 15rem;
}

.lineupCardHeader {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding-bottom: 1rem;
  border-bottom: 0.0625rem solid #e4e4e4;
}

.lineupCardName {
  color: var(--colorTitleDark);
  font-family: var(--fontMincho);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.lineupCardTag {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.9rem;
  background: #e7d9a8;
  color: var(--colorTitleDark);
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 999rem;
}

.lineupCardPriceRow {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 1.6rem;
  padding-block: 1rem 1.1rem;
  border-bottom: 0.0625rem solid #e4e4e4;
}

.lineupCardPriceItem {
  min-width: 9rem;
}

.lineupCardPriceLabel {
  color: var(--colorMuted);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.2rem;
}

.lineupCardPriceValue {
  color: var(--colorTitleDark);
  font-size: 1.95rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}

.lineupCardPriceValueSmall {
  font-size: 1.65rem;
}

.lineupCardPriceTax {
  display: inline-block;
  margin-left: 0.3rem;
  color: var(--colorMuted);
  font-size: 0.7em;
  font-weight: 500;
}

.lineupCardSpecs {
  margin: 0;
  padding-top: 1rem;
}

.lineupCardSpecRow {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0.4rem 1rem;
  padding-block: 0.3rem;
}

.lineupCardSpecLabel {
  color: var(--colorMuted);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

.lineupCardSpecValue {
  color: var(--colorBlack);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

.lineupCard[data-reveal]:nth-child(2).isRevealed {
  transition-delay: 0.15s;
}
/* ======================================== */
/* LINEUP SECTION - END                     */
/* ======================================== */

/* ======================================== */
/* FAQ SECTION - START                      */
/* ======================================== */
.faqSection {
  position: relative;
  padding-block: 3rem 4rem;
  background-color: var(--colorWhite);
}

.sectionHeadingWrapFaq {
  align-items: center;
  text-align: center;
  margin-bottom: 2.2rem;
}

.faqLabelWrap {
  align-self: flex-start;
}

.faqList {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faqItem {
  border: 0.0625rem solid #dfe6ea;
  border-radius: 1.4rem;
  background: var(--colorWhite);
  box-shadow: 0 0.6rem 1.4rem rgba(55, 67, 82, 0.05);
  overflow: hidden;
  transition: box-shadow var(--transitionBase), border-color var(--transitionBase);
}

.faqItem:has(.faqQuestion[aria-expanded="true"]) {
  box-shadow: 0 1rem 2rem rgba(55, 67, 82, 0.1);
  border-color: rgba(72, 106, 130, 0.3);
}

.faqQuestion {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 1.1rem 1.2rem;
  border: 0;
  background: transparent;
  color: var(--colorTitleDark);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: background var(--transitionBase);
}

.faqQuestion:hover,
.faqQuestion:focus-visible {
  background: rgba(126, 214, 167, 0.06);
}

.faqQuestionText {
  flex: 1;
}

.faqIcon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--colorWhite);
}

.faqIconQ {
  background: var(--gradientNumber);
  box-shadow: 0 0.35rem 0.8rem rgba(72, 106, 130, 0.25);
}

.faqIconA {
  background: transparent;
  color: var(--colorGold);
  border: 0.125rem solid var(--colorGold);
  font-family: Georgia, serif;
}

.faqChevron {
  flex-shrink: 0;
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 0.14rem solid var(--colorMuted);
  border-bottom: 0.14rem solid var(--colorMuted);
  transform: rotate(45deg) translate(-0.15rem, -0.15rem);
  transition: transform var(--transitionBase);
}

.faqQuestion[aria-expanded="true"] .faqChevron {
  transform: rotate(-135deg) translate(-0.15rem, -0.15rem);
}

/* Collapsed state: the parent fully clips its children (including padding
   and border on inner), so the answer is invisible until expanded.
   Using max-height transition because grid-template-rows leaks padding. */
.faqAnswer {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height var(--transitionBase), visibility 0s linear var(--transitionBase);
}

.faqQuestion[aria-expanded="true"] + .faqAnswer {
  max-height: 50rem;
  visibility: visible;
  transition: max-height var(--transitionBase), visibility 0s linear 0s;
}

.faqAnswerInner {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.1rem 1.2rem 1.2rem 1.2rem;
  border-top: 0.0625rem solid #eef1f4;
}

.faqAnswerText {
  flex: 1;
  color: var(--colorBlack);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.8;
}
/* ======================================== */
/* FAQ SECTION - END                        */
/* ======================================== */

/* ======================================== */
/* AREA SECTION - START                     */
/* ======================================== */
.areaSection {
  position: relative;
  padding-block: 3rem 4rem;
  background: linear-gradient(180deg, #f3f7f6 0%, #eef5f3 100%);
  overflow: hidden;
}

.sectionHeadingWrapArea {
  align-items: center;
  text-align: center;
  margin-bottom: 1.8rem;
  gap: 0.6rem;
}

.areaLabelWrap {
  align-self: flex-start;
}

.areaLead {
  color: var(--colorBlack);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.7;
}

/* Decorative gold separator: ─── · ───  (lines flanking a center dot).
   Drawn entirely with pseudo-elements — no image needed. */
.areaDivider {
  position: relative;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0.6rem auto 0.4rem;
  background: var(--colorGold);
  border-radius: 50%;
  align-self: center;
}

.areaDivider::before,
.areaDivider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5rem;
  height: 0.0625rem;
  background: var(--colorGold);
  transform: translateY(-50%);
}

.areaDivider::before {
  right: 100%;
  margin-right: 0.7rem;
}

.areaDivider::after {
  left: 100%;
  margin-left: 0.7rem;
}

.areaGroup {
  text-align: center;
  margin-bottom: 1.8rem;
}

.areaGroupTitle {
  color: #486a82;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.areaPillList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 0.7rem;
}

.areaPill {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1.1rem;
  background: var(--colorWhite);
  border: 0.0625rem solid #cfd8dd;
  border-radius: 999rem;
  color: var(--colorTitleDark);
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 0.3rem 0.6rem rgba(55, 67, 82, 0.04);
}

.areaNote {
  margin-top: 1.2rem;
  color: var(--colorMuted);
  font-size: 0.82rem;
  font-weight: 500;
  text-align: center;
}
/* ======================================== */
/* AREA SECTION - END                       */
/* ======================================== */

/* ======================================== */
/* BLOG SECTION - START                     */
/* ======================================== */
.blogSection {
  position: relative;
  padding-block: 3rem 4rem;
  background-color: var(--colorWhite);
}

.sectionHeadingWrapBlog {
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
  gap: 0.6rem;
}

.blogLabelWrap {
  align-self: flex-start;
}

.blogLead {
  color: var(--colorMuted);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.7;
}

.blogList {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.blogItem {
  border: 0.0625rem solid #e2e6ea;
  border-radius: 1.2rem;
  background: var(--colorWhite);
  box-shadow: 0 0.5rem 1.2rem rgba(55, 67, 82, 0.04);
  transition: transform var(--transitionBase), box-shadow var(--transitionBase), border-color var(--transitionBase);
  overflow: hidden;
}

.blogItem:hover,
.blogItem:focus-within {
  transform: translateY(-0.2rem);
  box-shadow: 0 1rem 2rem rgba(55, 67, 82, 0.1);
  border-color: rgba(72, 106, 130, 0.3);
}

.blogItemLink {
  display: grid;
  grid-template-columns: 8rem 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
}

.blogItemThumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0.6rem;
  background: #f0f3f5;
}

.blogItemImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blogItemBody {
  min-width: 0;
}

.blogItemMeta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.blogItemDate {
  color: var(--colorMuted);
  font-size: 0.82rem;
  font-weight: 700;
}

.blogItemCategory {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.7rem;
  background: rgba(126, 214, 167, 0.18);
  color: #2d7a52;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999rem;
}

.blogItemTitle {
  color: var(--colorTitleDark);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.35rem;
}

.blogItemExcerpt {
  color: var(--colorMuted);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blogItemArrow {
  color: var(--colorMuted);
  font-size: 1.2rem;
  font-weight: 400;
  transition: transform var(--transitionBase), color var(--transitionBase);
}

.blogItem:hover .blogItemArrow,
.blogItem:focus-within .blogItemArrow {
  transform: translateX(0.25rem);
  color: var(--colorBlue);
}

.blogActions {
  display: flex;
  justify-content: center;
  margin-top: 1.6rem;
}

.blogMoreButton {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.9rem;
  background: var(--gradientHeaderButton);
  color: var(--colorWhite);
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 999rem;
  box-shadow: var(--colorButtonShadow);
  transition: transform var(--transitionBase), box-shadow var(--transitionBase), filter var(--transitionBase);
}

.blogMoreButton:hover,
.blogMoreButton:focus-visible {
  transform: translateY(-0.15rem);
  box-shadow: 0 1rem 2rem rgba(72, 106, 130, 0.3);
  filter: brightness(1.04);
}

.blogMoreButton:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

.blogMoreArrow {
  transition: transform var(--transitionBase);
}

.blogMoreButton:hover .blogMoreArrow {
  transform: translateX(0.25rem);
}
/* ======================================== */
/* BLOG SECTION - END                       */
/* ======================================== */

/* ======================================== */
/* CTA BAND - START                         */
/* ======================================== */
.ctaBand {
  position: relative;
  padding-block: 3.4rem 4rem;
  background: linear-gradient(135deg, #486a82 0%, #6ea899 45%, #3c6e6c 100%);
  color: var(--colorWhite);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.ctaBandGlow {
  position: absolute;
  top: -40%;
  left: 50%;
  width: 70rem;
  height: 70rem;
  max-width: 150%;
  transform: translateX(-50%);
  background: radial-gradient(circle at center, rgba(126, 214, 167, 0.4) 0%, rgba(126, 214, 167, 0) 60%);
  filter: blur(0.6rem);
  pointer-events: none;
  z-index: -1;
}

.ctaBandInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.ctaBandTitle {
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.ctaBandLead {
  max-width: 36rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.7;
}

.ctaBandBadge {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1.4rem;
  background: #d6c17e;
  color: var(--colorTitleDark);
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 999rem;
  margin-top: 0.2rem;
}

.ctaBandPrimary {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.15rem 2.4rem;
  margin-top: 0.8rem;
  background: var(--colorWhite);
  color: var(--colorTitleDark);
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 999rem;
  box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.18);
  transition: transform var(--transitionBase), box-shadow var(--transitionBase), filter var(--transitionBase);
}

.ctaBandPrimary:hover,
.ctaBandPrimary:focus-visible {
  transform: translateY(-0.2rem);
  box-shadow: 0 1.4rem 2.8rem rgba(0, 0, 0, 0.24);
}

.ctaBandPrimary:active {
  transform: translateY(-0.05rem);
}

.ctaBandPrimaryArrow {
  transition: transform var(--transitionBase);
}

.ctaBandPrimary:hover .ctaBandPrimaryArrow {
  transform: translateX(0.25rem);
}

.ctaBandPhoneBlock {
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.ctaBandPhoneLabel {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  font-weight: 500;
}

.ctaBandPhoneNumber {
  color: var(--colorWhite);
  font-size: clamp(2rem, 8vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  transition: opacity var(--transitionBase);
}

.ctaBandPhoneNumber:hover,
.ctaBandPhoneNumber:focus-visible {
  opacity: 0.85;
}

.ctaBandPhoneHours {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8rem;
  font-weight: 500;
}
/* ======================================== */
/* CTA BAND - END                           */
/* ======================================== */

/* ======================================== */
/* RELATED PRODUCTS - START                 */
/* ======================================== */
.relatedSection {
  position: relative;
  padding-block: 3rem 4rem;
  background: linear-gradient(180deg, #fdf8e6 0%, #fbf4d8 100%);
}

.sectionHeadingWrapRelated {
  align-items: center;
  text-align: center;
  margin-bottom: 2.2rem;
  gap: 0.6rem;
}

.relatedLabelWrap {
  align-self: flex-start;
}

.relatedLabelWrap .sectionLabelText {
  font-size: 1.4rem;
}

.relatedLead {
  color: var(--colorMuted);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.7;
}

.relatedCardGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}

.relatedCard {
  display: flex;
  flex-direction: column;
  background: var(--colorWhite);
  border: 0.0625rem solid #e8e8e8;
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: 0 1rem 2rem rgba(55, 67, 82, 0.06);
}

.relatedCardImageWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: #f6f7f8;
  padding: 1.4rem;
}

.relatedCardImage {
  max-width: 70%;
  max-height: 100%;
  width: auto;
}

/* First card (catcher) — white image background; second card keeps default. */
#about .relatedCardGrid > article:nth-child(1) .relatedCardImageWrap {
  background: #ffffff;
}

.relatedCardBody {
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.4rem 1.6rem;
  gap: 0.6rem;
}

.relatedCardTag {
  align-self: flex-start;
  padding: 0.3rem 0.9rem;
  background: #e7d9a8;
  color: var(--colorTitleDark);
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999rem;
}

.relatedCardTitle {
  color: var(--colorTitleDark);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
}

.relatedCardText {
  flex: 1;
  color: var(--colorBlack);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.7;
}

.relatedCardButton {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.4rem;
  margin-top: 0.6rem;
  background: var(--colorTitleDark);
  color: var(--colorWhite);
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 999rem;
  box-shadow: 0 0.6rem 1.2rem rgba(55, 67, 82, 0.22);
  transition: transform var(--transitionBase), background var(--transitionBase), box-shadow var(--transitionBase);
}

.relatedCardButton:hover,
.relatedCardButton:focus-visible {
  transform: translateY(-0.15rem);
  background: var(--colorBlue);
  box-shadow: 0 0.9rem 1.6rem rgba(55, 67, 82, 0.28);
}

.relatedCardButton:active {
  transform: translateY(0);
}
/* ======================================== */
/* RELATED PRODUCTS - END                   */
/* ======================================== */

/* ======================================== */
/* FOOTER - START                           */
/* ======================================== */
.siteFooter {
  padding-block: 2.2rem 1.6rem;
  background: #fafbfc;
  border-top: 0.0625rem solid #e3e6ea;
}

.siteFooterInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

.siteFooterNavList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.6rem;
}

.siteFooterLink {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  color: var(--colorTitleDark);
  font-size: 0.88rem;
  font-weight: 500;
  border-bottom: 0.0625rem solid transparent;
  transition: color var(--transitionBase), border-color var(--transitionBase);
}

.siteFooterLink:hover,
.siteFooterLink:focus-visible {
  color: var(--colorBlue);
  border-bottom-color: var(--colorGold);
}

.siteFooterCopy {
  color: var(--colorMuted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
}
/* ======================================== */
/* FOOTER - END                             */
/* ======================================== */

/* ======================================== */
/* PLACEHOLDER PAGE                         */
/* Used by stubs: about / faq / blog etc.   */
/* ======================================== */
.placeholderSection {
  position: relative;
  padding-block: 3.5rem 4rem;
  background: linear-gradient(180deg, #f7fafb 0%, #eef5f3 100%);
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.placeholderInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

.placeholderSection .sectionHeadingWrap {
  align-items: center;
  text-align: center;
  margin-bottom: 1rem;
}

.placeholderSection .sectionLabelWrap {
  align-self: center;
}

.placeholderText {
  color: var(--colorMuted);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8;
  max-width: 40rem;
}

.placeholderBackLink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.8rem 1.8rem;
  background: var(--gradientHeaderButton);
  color: var(--colorWhite);
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 999rem;
  box-shadow: var(--colorButtonShadow);
  transition: transform var(--transitionBase), box-shadow var(--transitionBase), filter var(--transitionBase);
}

.placeholderBackLink:hover,
.placeholderBackLink:focus-visible {
  transform: translateY(-0.15rem);
  box-shadow: 0 1rem 2rem rgba(72, 106, 130, 0.3);
  filter: brightness(1.04);
}

/* ======================================== */
/* CATCHER PAGE — ORANGE THEME (scoped)      */
/* ======================================== */
.catcherPage {
  --colorAccent: #d8612c;
  --colorAccentSoft: #ffa077;
  --colorAccentDeep: #b35a3d;
  --colorAccentTint: #fff0e9;
  --colorAccentTintDeep: #ffe0d0;
  --colorBlue: #d8612c;
  --colorBlueSoft: #ffa077;
  --colorMint: rgba(255, 170, 120, 0.75);
  --colorTitleDark: #3a2419;
  --gradientHeroText: radial-gradient(218.11% 50% at 50% 50%, #ffa077 0%, #b35a3d 100%);
  --gradientSectionText: linear-gradient(
    90deg,
    #d8612c 32.69%,
    rgba(255, 180, 130, 0.9) 50.48%,
    #b35a3d 68.27%
  );
  --gradientHeroButton: linear-gradient(90deg, #d8612c 0%, #ffa077 50%, #d8612c 100%);
  --gradientHeaderButton: linear-gradient(90deg, #ffa077 0%, #d8612c 100%);
  --gradientNumber: linear-gradient(135deg, #d8612c 0%, #ffa077 70%, #ffbd8f 100%);
  --colorButtonShadow: 0 0.75rem 2rem rgba(216, 97, 44, 0.28);
  --colorYellow: rgba(255, 240, 120, 0.55);
}

/* CATCHER HERO */
.catcherHero {
  position: relative;
  isolation: isolate;
  padding-block: 2rem 3rem;
  background: linear-gradient(135deg, #fff0e3 0%, #ffd9c2 100%);
  overflow: hidden;
}

.catcherHeroBackground {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.4;
}

.catcherHeroBackground::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 240, 230, 0.75) 0%,
    rgba(255, 180, 130, 0.5) 50%,
    rgba(255, 140, 90, 0.4) 100%
  );
}

.catcherHeroBackgroundImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catcherHeroInner {
  display: flex;
  position: relative;
  flex-direction: column;
}

.catcherHeroContent {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.catcherHeroStats {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.2rem;
  align-self: flex-start;
  padding: 0.9rem 1.3rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 1.3rem;
  box-shadow:
    0 1.4rem 2.8rem rgba(179, 90, 61, 0.14),
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.9);
}

.catcherHeroStatItem {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--colorBlack);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.catcherHeroStatLabel {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--colorTitleDark);
}

.catcherHeroStatValue {
  color: var(--colorAccent);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.catcherHeroStatUnit {
  margin-left: 0.1rem;
  font-size: 0.7em;
  font-weight: 700;
  color: var(--colorAccentDeep);
}

.catcherHeroBody {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.catcherHeroCopy {
  max-width: 100%;
}

.catcherHeroTitle {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  margin-bottom: 1rem;
}

.catcherHeroTitleLine {
  font-size: clamp(2.4rem, 8vw, 3.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--colorTitleDark);
}

.catcherHeroDescription {
  color: var(--colorTitleDark);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8;
  margin-bottom: 0.5rem;
}

.catcherHeroCaution {
  color: var(--colorAccentDeep);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.55;
}

.catcherHeroVisual {
  display: flex;
  justify-content: center;
  padding-top: 0.5rem;
}

.catcherHeroProduct {
  width: 100%;
  max-width: 28rem;
  height: auto;
  filter: drop-shadow(0 1.6rem 2.4rem rgba(179, 90, 61, 0.25));
}

.catcherHeroCta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.8rem;
  width: 100%;
  margin-top: 1.5rem;
  padding: 1.2rem 1rem 1rem;
  border-radius: 1.6rem;
  background: var(--gradientHeroButton);
  color: var(--colorWhite);
  text-align: center;
  box-shadow: var(--colorButtonShadow);
  transition: transform var(--transitionBase), box-shadow var(--transitionBase), filter var(--transitionBase);
}

.catcherHeroCta:hover,
.catcherHeroCta:focus-visible {
  transform: translateY(-0.2rem);
  box-shadow: 0 1.3rem 2.4rem rgba(216, 97, 44, 0.38);
  filter: brightness(1.04);
}

.catcherHeroCta:active {
  transform: translateY(-0.05rem);
  filter: brightness(0.98);
}

.catcherHeroCtaMain {
  font-size: clamp(1.5rem, 5vw, 2.3rem);
  font-weight: 700;
  line-height: 1.2;
}

.catcherHeroCtaArrow {
  font-size: 1.1rem;
  transform: translateY(0.05rem);
}

.catcherHeroCtaSub {
  width: 100%;
  font-size: clamp(0.85rem, 3vw, 1.1rem);
  font-weight: 500;
  line-height: 1.5;
  opacity: 0.96;
}

/* PROBLEM — catcher tint */
.catcherProblem {
  background: linear-gradient(180deg, #fff5ee 0%, #ffe8d8 100%);
}

.catcherPage .problemCardNumber {
  background: var(--gradientNumber);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--colorAccent);
  font-family: var(--fontMincho);
}

.catcherPage .problemCard {
  background-color: var(--colorWhite);
  border-color: #f5ddcb;
}

.catcherPage .problemCard::before {
  background: radial-gradient(
    ellipse at top right,
    rgba(255, 160, 119, 0.18) 0%,
    rgba(255, 160, 119, 0) 70%
  );
}

/* SOLUTION — 4 numbered rows */
.catcherSolution {
  position: relative;
  padding-block: 3rem 4rem;
  background: linear-gradient(180deg, #fff8f2 0%, #ffe9d8 100%);
  overflow: hidden;
}

.sectionHeadingWrapCatcherSolution {
  margin-bottom: 2.4rem;
}

.catcherSolutionLead {
  color: var(--colorTitleDark);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8;
  margin-top: 0.4rem;
}

.catcherSolutionList {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.catcherSolutionCard {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0.8rem 1rem;
  padding: 1.2rem 1.2rem 1.4rem;
  background: var(--colorWhite);
  border: 0.0625rem solid #f5dbc6;
  border-radius: 1.4rem;
  box-shadow: 0 0.8rem 1.8rem rgba(179, 90, 61, 0.08);
}

.catcherSolutionNumber {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  background: var(--gradientNumber);
  color: var(--colorWhite);
  font-family: var(--fontMincho);
  font-size: 1.5rem;
  font-weight: 700;
  border-radius: 0.6rem;
  box-shadow: 0 0.6rem 1.2rem rgba(216, 97, 44, 0.28);
}

.catcherSolutionContent {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.catcherSolutionTag {
  align-self: flex-start;
  padding: 0.25rem 0.7rem;
  background: #2a1f18;
  color: #ffcc66;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 0.3rem;
}

.catcherSolutionTitle {
  color: var(--colorTitleDark);
  font-family: var(--fontMincho);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}

.catcherSolutionText {
  color: var(--colorBlack);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.7;
}

.catcherSolutionMedia {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  overflow: hidden;
  border-radius: 0.8rem;
}

.catcherSolutionImage {
  width: 100%;
  height: auto;
  aspect-ratio: 13 / 5;
  object-fit: cover;
}

/* LINEUP — single card */
.catcherLineup {
  position: relative;
  padding-block: 3rem 4rem;
  background: linear-gradient(180deg, #fff8ee 0%, #ffe8d0 100%);
}

.sectionHeadingWrapCatcherLineup {
  align-items: center;
  text-align: center;
  margin-bottom: 2.2rem;
}

.sectionHeadingWrapCatcherLineup .sectionLabelWrap {
  align-self: flex-start;
}

.catcherLineupCard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.6rem 1.4rem 1.8rem;
  background: var(--colorWhite);
  border-radius: 1.6rem;
  box-shadow: 0 1.4rem 2.8rem rgba(179, 90, 61, 0.1);
  border: 0.0625rem solid #f5dbc6;
}

.catcherLineupMedia {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: #f8f3ed;
  border-radius: 1rem;
}

.catcherLineupImage {
  max-width: 80%;
  width: auto;
  height: auto;
  max-height: 14rem;
  filter: drop-shadow(0 1rem 1.6rem rgba(0, 0, 0, 0.12));
}

.catcherLineupBody {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.catcherLineupHeader {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-bottom: 0.9rem;
  border-bottom: 0.0625rem solid #e8dfd5;
}

.catcherLineupTag {
  color: var(--colorAccentDeep);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.catcherLineupName {
  color: var(--colorTitleDark);
  font-family: var(--fontMincho);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
}

.catcherLineupPriceRow {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 0.0625rem solid #e8dfd5;
}

.catcherLineupPriceItem {
  min-width: 9rem;
}

.catcherLineupPriceLabel {
  color: var(--colorMuted);
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.catcherLineupPriceValue {
  color: var(--colorAccentDeep);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}

.catcherLineupPriceValueSmall {
  font-size: 1.5rem;
}

.catcherLineupPriceTax {
  display: inline-block;
  margin-left: 0.3rem;
  color: var(--colorMuted);
  font-size: 0.7em;
  font-weight: 500;
}

.catcherLineupSpecs {
  margin: 0;
  padding: 0;
}

.catcherLineupSpecRow {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.4rem 1rem;
  padding-block: 0.3rem;
}

.catcherLineupSpecRow dt {
  color: var(--colorMuted);
  font-size: 0.85rem;
  font-weight: 500;
}

.catcherLineupSpecRow dd {
  margin: 0;
  color: var(--colorBlack);
  font-size: 0.85rem;
  font-weight: 500;
}

/* USAGE */
.catcherUsage {
  position: relative;
  padding-block: 3rem 4rem;
  background: linear-gradient(180deg, #fff8ee 0%, #ffeed8 100%);
}

.sectionHeadingWrapCatcherUsage {
  align-items: center;
  text-align: center;
  margin-bottom: 1.8rem;
}

.sectionHeadingWrapCatcherUsage .sectionLabelWrap {
  align-self: flex-start;
}

.catcherUsageLead {
  color: var(--colorTitleDark);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.7;
  margin-top: 0.3rem;
}

.catcherUsageList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.catcherUsagePill {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1.1rem;
  background: var(--colorWhite);
  border: 0.0625rem solid #f2d3bd;
  border-radius: 999rem;
  color: var(--colorTitleDark);
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 0.3rem 0.8rem rgba(179, 90, 61, 0.08);
}

/* FLOW */
.catcherFlow {
  position: relative;
  padding-block: 3rem 4rem;
  background: linear-gradient(180deg, #fff5e8 0%, #ffe4cc 100%);
}

.sectionHeadingWrapCatcherFlow {
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
}

.sectionHeadingWrapCatcherFlow .sectionLabelWrap {
  align-self: flex-start;
}

.catcherFlowLead {
  color: var(--colorTitleDark);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.7;
  margin-top: 0.3rem;
}

.catcherFlowList {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.catcherFlowStep {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0.4rem 1rem;
  padding: 1.2rem 1.4rem 1.4rem;
  background: var(--colorWhite);
  border-radius: 1.2rem;
  box-shadow: 0 0.8rem 1.8rem rgba(179, 90, 61, 0.08);
  border: 0.0625rem solid #f5dbc6;
}

.catcherFlowStepLabel {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  align-self: end;
  padding: 0.1rem 0.5rem;
  background: var(--colorTitleDark);
  color: var(--colorWhite);
  font-family: Georgia, serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 0.3rem;
}

.catcherFlowStepNumber {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  align-self: start;
  color: var(--colorAccent);
  font-family: var(--fontMincho);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  background: var(--gradientNumber);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.catcherFlowStepTitle {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self: end;
  color: var(--colorTitleDark);
  font-family: var(--fontMincho);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
}

.catcherFlowStepText {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  color: var(--colorBlack);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.6;
}

.catcherFlowNote {
  margin-top: 1.4rem;
  text-align: center;
  color: var(--colorMuted);
  font-size: 0.82rem;
  font-weight: 500;
}

/* ============================================================ */
/* INDEX (top page) FLOW                                        */
/* ============================================================ */

.indexFlow {
  position: relative;
  padding-block: 3rem 4rem;
  background: #ffffff;
}

.indexFlowLead {
  margin-top: 0.6rem;
  color: #333333;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.65;
}

.indexFlowList {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.indexFlowStep {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0.4rem 1rem;
  padding: 1.4rem 1.4rem 1.4rem;
  background: #f7fafc;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.4rem rgba(72, 106, 130, 0.08);
}

.indexFlowStep::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.375rem;
  background: linear-gradient(90deg, #486a82 0%, rgba(126, 214, 167, 0.81) 100%);
  border-radius: 0.5rem 0.5rem 0 0;
}

.indexFlowStepLabel {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  align-self: end;
  color: #486a82;
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.indexFlowStepNumber {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  align-self: start;
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(90deg, #486a82 0%, rgba(126, 214, 167, 0.81) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.indexFlowStepTitle {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self: end;
  color: #374352;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}

.indexFlowStepText {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  color: #404040;
  font-size: 0.85rem;
  line-height: 1.7;
}

.indexFlowNote {
  margin-top: 1.4rem;
  text-align: center;
  color: #666666;
  font-size: 0.78rem;
  line-height: 1.6;
}

/* CTA BAND — catcher variant */
.catcherCtaBand {
  background: linear-gradient(135deg, #d8612c 0%, #ffa077 50%, #b35a3d 100%);
}

.catcherCtaBand .ctaBandGlow {
  background: radial-gradient(circle at center, rgba(255, 220, 180, 0.5) 0%, rgba(255, 180, 130, 0) 60%);
}

.catcherCtaBand .ctaBandPrimary {
  color: var(--colorAccentDeep);
}

.catcherCtaBand .ctaBandBadge {
  background: #ffd488;
  color: #5a2f18;
}

/* RELATED — catcher variant */
.catcherRelated {
  background: linear-gradient(180deg, #fff5e8 0%, #ffe8d8 100%);
}

.catcherPage .relatedCardTag {
  background: #ffd9b5;
  color: #5a2f18;
}

.catcherPage .relatedCardButton {
  background: var(--colorAccentDeep);
}

.catcherPage .relatedCardButton:hover,
.catcherPage .relatedCardButton:focus-visible {
  background: var(--colorAccent);
}

/* ======================================== */
/* GT-NEX PAGE — BURGUNDY THEME (scoped)    */
/* ======================================== */
.gtnexPage {
  --colorAccent: #8b2635;
  --colorAccentSoft: #c47680;
  --colorAccentDeep: #4a1018;
  --colorAccentTint: #fdf0ee;
  --colorAccentTintDeep: #fbe0dd;
  --colorBlue: #8b2635;
  --colorBlueSoft: #c47680;
  --colorMint: rgba(196, 118, 128, 0.6);
  --colorTitleDark: #3a0d14;
  --gradientHeroText: radial-gradient(218.11% 50% at 50% 50%, #c47680 0%, #4a1018 100%);
  --gradientSectionText: linear-gradient(
    90deg,
    #8b2635 32.69%,
    rgba(196, 118, 128, 0.9) 50.48%,
    #4a1018 68.27%
  );
  --gradientHeroButton: linear-gradient(90deg, #4a1018 0%, #8b2635 50%, #4a1018 100%);
  --gradientHeaderButton: linear-gradient(90deg, #c47680 0%, #8b2635 100%);
  --gradientNumber: linear-gradient(135deg, #8b2635 0%, #c47680 70%, #e0a0a8 100%);
  --colorButtonShadow: 0 0.75rem 2rem rgba(74, 16, 24, 0.3);
  --colorYellow: rgba(255, 240, 120, 0.55);
}

/* GT-NEX HERO */
.gtnexHero {
  position: relative;
  isolation: isolate;
  padding-block: 2rem 3rem;
  background: linear-gradient(135deg, #fdf5ed 0%, #f6dbd0 100%);
  overflow: hidden;
}

.gtnexHeroBackground {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.35;
}

.gtnexHeroBackground::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(240, 230, 210, 0.3) 40%,
    rgba(139, 38, 53, 0.35) 100%
  );
}

.gtnexHeroBackgroundImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gtnexHeroInner {
  display: flex;
  position: relative;
  flex-direction: column;
}

.gtnexHeroContent {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.gtnexHeroStats {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.2rem;
  align-self: flex-start;
  padding: 0.9rem 1.3rem;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 1.3rem;
  box-shadow:
    0 1.4rem 2.8rem rgba(74, 16, 24, 0.14),
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.9);
}

.gtnexHeroStatItem {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--colorBlack);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.gtnexHeroStatLabel {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--colorTitleDark);
}

.gtnexHeroStatValue {
  color: var(--colorAccent);
  font-family: var(--fontMincho);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.gtnexHeroStatUnit {
  margin-left: 0.1rem;
  font-size: 0.6em;
  font-weight: 700;
  color: var(--colorAccentDeep);
}

.gtnexHeroBody {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.gtnexHeroCopy {
  max-width: 100%;
}

.gtnexHeroTitle {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  margin-bottom: 1rem;
}

.gtnexHeroTitleLine {
  font-size: clamp(2.2rem, 7.5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--colorTitleDark);
}

.gtnexHeroDescription {
  color: var(--colorTitleDark);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8;
  margin-bottom: 0.5rem;
}

.gtnexHeroCaution {
  color: var(--colorAccentDeep);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.55;
}

.gtnexHeroVisual {
  display: flex;
  justify-content: center;
  padding-top: 0.5rem;
}

.gtnexHeroProduct {
  width: 100%;
  max-width: 28rem;
  height: auto;
  filter: drop-shadow(0 1.6rem 2.4rem rgba(74, 16, 24, 0.25));
}

.gtnexHeroCta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.8rem;
  width: 100%;
  margin-top: 1.5rem;
  padding: 1.2rem 1rem 1rem;
  border-radius: 1.6rem;
  background: var(--gradientHeroButton);
  color: var(--colorWhite);
  text-align: center;
  box-shadow: var(--colorButtonShadow);
  transition: transform var(--transitionBase), box-shadow var(--transitionBase), filter var(--transitionBase);
}

.gtnexHeroCta:hover,
.gtnexHeroCta:focus-visible {
  transform: translateY(-0.2rem);
  box-shadow: 0 1.3rem 2.4rem rgba(74, 16, 24, 0.4);
  filter: brightness(1.08);
}

.gtnexHeroCta:active {
  transform: translateY(-0.05rem);
  filter: brightness(0.98);
}

.gtnexHeroCtaMain {
  font-size: clamp(1.4rem, 4.8vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
}

.gtnexHeroCtaArrow {
  font-size: 1rem;
  transform: translateY(0.05rem);
}

.gtnexHeroCtaSub {
  width: 100%;
  font-size: clamp(0.85rem, 3vw, 1rem);
  font-weight: 500;
  line-height: 1.5;
  opacity: 0.94;
}

/* PROBLEM — gtnex tint */
.gtnexProblem {
  background: linear-gradient(180deg, #fdf0ee 0%, #fbe0dd 100%);
}

.gtnexPage .problemCardNumber {
  background: var(--gradientNumber);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--colorAccent);
  font-family: var(--fontMincho);
}

.gtnexPage .problemCard {
  background-color: var(--colorWhite);
  border-color: #f0c8cc;
}

.gtnexPage .problemCard::before {
  background: radial-gradient(
    ellipse at top right,
    rgba(196, 118, 128, 0.18) 0%,
    rgba(196, 118, 128, 0) 70%
  );
}

/* SOLUTION — 4 burgundy cards */
.gtnexSolution {
  position: relative;
  padding-block: 3rem 4rem;
  background: linear-gradient(180deg, #fdf0ee 0%, #fbe0dd 100%);
}

.sectionHeadingWrapGtnexSolution {
  margin-bottom: 2.2rem;
}

.gtnexSolutionLead {
  color: var(--colorTitleDark);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.8;
  margin-top: 0.4rem;
}

.gtnexSolutionGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gtnexSolutionCard {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1.2rem;
  padding: 1.6rem 1.4rem 1.6rem;
  background: linear-gradient(140deg, #8b2635 0%, #4a1018 100%);
  color: var(--colorWhite);
  border-radius: 0.6rem;
  box-shadow:
    0 1rem 2rem rgba(74, 16, 24, 0.22),
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  position: relative;
}

.gtnexSolutionCard::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 45%;
  background: radial-gradient(
    ellipse at top right,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  pointer-events: none;
}

.gtnexSolutionNumber {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 3.2rem;
  color: rgba(255, 255, 255, 0.95);
  font-family: var(--fontMincho);
  font-size: 3rem;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.01em;
}

.gtnexSolutionMain {
  grid-column: 2 / 3;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.gtnexSolutionFeature {
  align-self: flex-start;
  padding: 0.15rem 0.55rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.6);
  color: rgba(255, 255, 255, 0.85);
  font-family: Georgia, serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  border-radius: 0.25rem;
}

.gtnexSolutionTag {
  color: #f4c07a;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 0.3rem;
}

.gtnexSolutionTitle {
  font-family: var(--fontMincho);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--colorWhite);
  margin-bottom: 0.2rem;
}

.gtnexSolutionText {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.7;
}

/* COST */
.gtnexCost {
  position: relative;
  padding-block: 3rem 4rem;
  background: linear-gradient(180deg, #fdf5ed 0%, #fbe8dd 100%);
}

.sectionHeadingWrapGtnexCost {
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
}

.sectionHeadingWrapGtnexCost .sectionLabelWrap {
  align-self: flex-start;
}

.gtnexCostTableWrap {
  overflow-x: auto;
  margin-bottom: 1.8rem;
  border-radius: 0.8rem;
  box-shadow: 0 1rem 2rem rgba(74, 16, 24, 0.08);
}

.gtnexCostTable {
  width: 100%;
  border-collapse: collapse;
  background: var(--colorWhite);
  border-radius: 0.8rem;
  overflow: hidden;
  min-width: 44rem;
}

.gtnexCostTable thead th {
  background: linear-gradient(135deg, #8b2635 0%, #4a1018 100%);
  color: var(--colorWhite);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 1rem 1.1rem;
  text-align: left;
  letter-spacing: 0.02em;
}

.gtnexCostTable tbody tr {
  border-bottom: 0.0625rem solid #f0dfd9;
}

.gtnexCostTable tbody tr:last-child {
  border-bottom: 0;
}

.gtnexCostTable tbody th,
.gtnexCostTable tbody td {
  padding: 1rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  vertical-align: middle;
}

.gtnexCostTable tbody th {
  color: var(--colorTitleDark);
  font-weight: 700;
  white-space: nowrap;
}

.gtnexCostTable tbody td {
  color: var(--colorBlack);
}

.gtnexCostPrice {
  color: var(--colorAccentDeep);
  font-family: var(--fontMincho);
  font-size: 1.1rem;
  font-weight: 700;
  white-space: nowrap;
}

.gtnexCostRowHighlight {
  background: linear-gradient(90deg, rgba(139, 38, 53, 0.06) 0%, rgba(139, 38, 53, 0.12) 100%);
}

.gtnexCostPriceHighlight {
  color: var(--colorAccent);
  font-size: 1.35rem;
}

.gtnexCostBreakdown {
  padding: 1.6rem 1.4rem 1.8rem;
  background: var(--colorWhite);
  border-radius: 1.2rem;
  border: 0.0625rem solid #f0dfd9;
  box-shadow: 0 0.6rem 1.4rem rgba(74, 16, 24, 0.06);
}

.gtnexCostBreakdownTitle {
  color: var(--colorAccentDeep);
  font-family: var(--fontMincho);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.gtnexCostBreakdownList {
  list-style: none;
  padding: 0;
  margin: 0 0 0.8rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gtnexCostBreakdownList li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--colorBlack);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.6;
}

.gtnexCostBreakdownList li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--colorAccent);
  font-weight: 700;
}

.gtnexCostBreakdownTotal {
  padding-top: 0.5rem;
  border-top: 0.0625rem dashed #e5c8c1;
  font-weight: 700;
  color: var(--colorAccent);
}

.gtnexCostBreakdownTotal::before {
  content: "＝" !important;
}

.gtnexCostNote {
  color: var(--colorMuted);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.55;
  margin-bottom: 1rem;
}

.gtnexCostLink {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  background: var(--gradientHeaderButton);
  color: var(--colorWhite);
  font-size: 0.92rem;
  font-weight: 700;
  border-radius: 999rem;
  box-shadow: var(--colorButtonShadow);
  transition: transform var(--transitionBase), box-shadow var(--transitionBase), filter var(--transitionBase);
}

.gtnexCostLink:hover,
.gtnexCostLink:focus-visible {
  transform: translateY(-0.15rem);
  box-shadow: 0 1rem 2rem rgba(74, 16, 24, 0.32);
  filter: brightness(1.08);
}

.gtnexCostLink:active {
  transform: translateY(0);
}

/* LINEUP */
.gtnexLineup {
  position: relative;
  padding-block: 3rem 4rem;
  background: linear-gradient(180deg, #fdf0ee 0%, #fbe0dd 100%);
}

.sectionHeadingWrapGtnexLineup {
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
}

.sectionHeadingWrapGtnexLineup .sectionLabelWrap {
  align-self: flex-start;
}

.gtnexLineupCard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  padding: 1.6rem 1.4rem 1.8rem;
  background: var(--colorWhite);
  border-radius: 1.6rem;
  border: 0.0625rem solid #f0dfd9;
  box-shadow: 0 1.2rem 2.4rem rgba(74, 16, 24, 0.08);
}

.gtnexLineupMedia {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #faf3ef;
  border-radius: 1rem;
  overflow: hidden;
}

.gtnexLineupImage {
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 14rem;
}

.gtnexLineupBody {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gtnexLineupHeading {
  color: var(--colorAccentDeep);
  font-family: var(--fontMincho);
  font-size: 1.3rem;
  font-weight: 700;
  padding-bottom: 0.6rem;
  border-bottom: 0.0625rem solid #f0dfd9;
}

.gtnexLineupSpecs {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.gtnexLineupSpecRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.3rem 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 0.0625rem dashed #efddd5;
}

.gtnexLineupSpecRow:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.gtnexLineupSpecLabel {
  color: var(--colorTitleDark);
  font-size: 0.95rem;
  font-weight: 700;
}

.gtnexLineupSpecValue {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
}

.gtnexLineupSpecPrice {
  color: var(--colorAccent);
  font-family: var(--fontMincho);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
}

.gtnexLineupSpecUnit {
  color: var(--colorMuted);
  font-size: 0.8rem;
  font-weight: 500;
}

.gtnexLineupFooter {
  color: var(--colorAccentDeep);
  font-weight: 700;
  font-size: 0.95rem;
  margin-top: 0.3rem;
}

.gtnexLineupNote {
  color: var(--colorMuted);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.55;
}

/* FLOW */
.gtnexFlow {
  position: relative;
  padding-block: 3rem 4rem;
  background: linear-gradient(180deg, #fdf5ed 0%, #fbe8dd 100%);
}

.sectionHeadingWrapGtnexFlow {
  align-items: center;
  text-align: center;
  margin-bottom: 2.2rem;
}

.sectionHeadingWrapGtnexFlow .sectionLabelWrap {
  align-self: flex-start;
}

.gtnexFlowLead {
  color: var(--colorTitleDark);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.7;
  margin-top: 0.3rem;
}

.gtnexFlowList {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gtnexFlowStep {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0.3rem 1rem;
  padding: 1.3rem 1.4rem 1.4rem;
  background: var(--colorWhite);
  border-radius: 1rem;
  border: 0.0625rem solid #f0dfd9;
  box-shadow: 0 0.8rem 1.6rem rgba(74, 16, 24, 0.08);
}

.gtnexFlowStepLabel {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  align-self: end;
  padding: 0.12rem 0.55rem;
  background: var(--colorAccentDeep);
  color: var(--colorWhite);
  font-family: Georgia, serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  border-radius: 0.3rem;
}

.gtnexFlowStepNumber {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  align-self: start;
  font-family: var(--fontMincho);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  background: var(--gradientNumber);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gtnexFlowStepTitle {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self: end;
  color: var(--colorAccentDeep);
  font-family: var(--fontMincho);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
}

.gtnexFlowStepText {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  color: var(--colorBlack);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.6;
}

/* CTA BAND — burgundy variant */
.gtnexCtaBand {
  background: linear-gradient(135deg, #4a1018 0%, #8b2635 50%, #2a0810 100%);
}

.gtnexCtaBand .ctaBandGlow {
  background: radial-gradient(circle at center, rgba(244, 192, 122, 0.28) 0%, rgba(139, 38, 53, 0) 60%);
}

.gtnexCtaBand .ctaBandPrimary {
  color: var(--colorAccentDeep);
}

.gtnexCtaBand .ctaBandBadge {
  background: #f4c07a;
  color: #3a0d14;
}

/* RELATED — gtnex warm bg */
.gtnexRelated {
  background: linear-gradient(180deg, #fdf5ed 0%, #fbe8dd 100%);
}

.gtnexPage .relatedCardTag {
  background: #f4c07a;
  color: #3a0d14;
}

.gtnexPage .relatedCardButton {
  background: var(--colorAccentDeep);
}

.gtnexPage .relatedCardButton:hover,
.gtnexPage .relatedCardButton:focus-visible {
  background: var(--colorAccent);
}

/* ======================================== */
/* PRICING PAGE (gt-nex-pricing)             */
/* Inherits burgundy theme from .gtnexPage   */
/* ======================================== */

.breadcrumb {
  margin-bottom: 1.8rem;
  padding-top: 0.8rem;
}

.breadcrumbList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--colorMuted);
  font-size: 0.82rem;
  font-weight: 500;
  margin-left: 3rem;
}

.breadcrumbItem {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  /* margin-left: 3rem; */
}

.breadcrumbItem:not(:last-child)::after {
  content: "›";
  display: inline-block;
  color: var(--colorMuted);
  opacity: 0.7;
  font-weight: 500;
}

.breadcrumbLink {
  color: var(--colorMuted);
  transition: color var(--transitionBase);
}

.breadcrumbLink:hover,
.breadcrumbLink:focus-visible {
  color: var(--colorAccent);
  text-decoration: underline;
}

.breadcrumbItem[aria-current="page"] {
  color: var(--colorTitleDark);
  font-weight: 700;
}

.pricingHero {
  position: relative;
  padding-block: 1.6rem 2rem;
  background: var(--colorWhite);
}

.pricingHeroTitle {
  margin-top: 1rem;
  color: var(--colorAccentDeep);
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
}

.pricingHeroLead {
  margin-top: 0.8rem;
  color: var(--colorMuted);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.8;
  text-align: center;
}

.pricingSection {
  position: relative;
  padding-block: 2.6rem 3.6rem;
  background: linear-gradient(180deg, #fdf5ed 0%, #fbe8dd 100%);
}

.pricingSectionAlt {
  background: linear-gradient(180deg, #fdf0ee 0%, #fbe0dd 100%);
}

.pricingSectionEyebrow {
  color: var(--colorAccent);
  font-family: Georgia, serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
  margin-bottom: 0.5rem;
}

.pricingSectionTitle {
  color: var(--colorAccentDeep);
  font-family: var(--fontMincho);
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-align: center;
  margin-bottom: 0.4rem;
}

.pricingSectionLead {
  color: var(--colorMuted);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
  margin-bottom: 1.6rem;
}

.pricingBlock {
  margin-bottom: 2.2rem;
}

.pricingBlockTitle {
  color: var(--colorAccentDeep);
  font-family: var(--fontMincho);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.8rem;
}

.pricingCallout {
  color: var(--colorAccentDeep);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  margin: 1.8rem 0 1.4rem;
}

.pricingTableWrap {
  overflow-x: auto;
  border-radius: 0.4rem;
  box-shadow: 0 0.8rem 1.8rem rgba(74, 16, 24, 0.1);
  -webkit-overflow-scrolling: touch;
}

.pricingTable {
  width: 100%;
  min-width: 38rem;
  border-collapse: collapse;
  background: var(--colorWhite);
  font-size: 0.88rem;
  line-height: 1.4;
}

.pricingTable thead th {
  background: linear-gradient(135deg, #8b2635 0%, #4a1018 100%);
  color: var(--colorWhite);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.85rem 0.9rem;
  text-align: left;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pricingTable tbody th {
  font-weight: 700;
  color: var(--colorTitleDark);
  text-align: left;
  padding: 0.85rem 0.9rem;
  background: #fffaf5;
  white-space: nowrap;
}

.pricingTable tbody td {
  color: var(--colorBlack);
  font-weight: 500;
  padding: 0.85rem 0.9rem;
  white-space: nowrap;
}

.pricingTable tbody tr {
  border-top: 0.0625rem solid #f2ddd3;
}

.pricingColRight {
  text-align: right !important;
}

.pricingAmount {
  color: var(--colorAccent);
  font-family: var(--fontMincho);
  font-weight: 700;
  font-size: 0.95rem;
}

.pricingAmountTotal {
  color: var(--colorAccentDeep);
  font-family: var(--fontMincho);
  font-weight: 700;
  font-size: 1.05rem;
}

.pricingTable tbody tr.pricingSubtotal {
  background: linear-gradient(90deg, rgba(139, 38, 53, 0.04) 0%, rgba(139, 38, 53, 0.1) 100%);
  border-top: 0.0625rem solid #e5c8c1;
}

.pricingTable tbody tr.pricingSubtotal th {
  background: transparent;
  text-align: right;
  color: var(--colorAccentDeep);
  font-size: 0.92rem;
}

.pricingTable tbody tr.pricingSubtotal .pricingAmountTotal {
  font-size: 1.2rem;
}

.pricingIndustryTable tbody th.pricingIndustryName {
  background: linear-gradient(180deg, #8b2635 0%, #4a1018 100%);
  color: var(--colorWhite);
  text-align: center;
  vertical-align: middle;
  font-size: 0.95rem;
  padding: 1rem 0.8rem;
  min-width: 6rem;
}

.pricingIndustryTable td.pricingIndustryTotal {
  background: linear-gradient(90deg, rgba(139, 38, 53, 0.06) 0%, rgba(139, 38, 53, 0.12) 100%);
  text-align: center;
  vertical-align: middle;
  color: var(--colorAccent);
  font-family: var(--fontMincho);
  font-size: 1.35rem;
  font-weight: 700;
  padding: 1rem 0.8rem;
  min-width: 6rem;
}

.pricingIndustryTable tbody tr {
  border-top: 0.0625rem solid #f2ddd3;
}

.pricingIndustryTable tbody tr:has(> th.pricingIndustryName) {
  border-top: 0.1875rem solid #d9b3a8;
}

.pricingIndustryTable tbody tr:first-child {
  border-top: 0;
}

.pricingTaxNote {
  margin-top: 0.6rem;
  color: var(--colorMuted);
  font-size: 0.78rem;
  font-weight: 500;
  text-align: right;
}

.pricingDisclaimer {
  margin-top: 1.4rem;
  color: var(--colorMuted);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.7;
}

/* ======================================== */
/* ABOUT PAGE                                */
/* ======================================== */
.aboutHero {
  position: relative;
  padding-block: 2rem 2.6rem;
  overflow: hidden;
  isolation: isolate;
  color: var(--colorWhite);
  text-align: center;
}

.aboutHeroBackground {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.aboutHeroBackground::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    rgba(126, 214, 167, 0.55) 0%,
    rgba(108, 162, 188, 0.45) 45%,
    rgba(34, 67, 49, 0.7) 100%
  );
}

.aboutHeroBackgroundImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.aboutHeroInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding-block: 1.4rem;
}

.aboutHeroBreadcrumb {
  align-self: flex-start;
  margin: -4rem 0 1.2rem 0;
  padding-top: 0;
}

.aboutHeroBreadcrumb .breadcrumbList,
.aboutHeroBreadcrumb .breadcrumbLink,
.aboutHeroBreadcrumb .breadcrumbItem::after {
  color: rgba(255, 255, 255, 0.85);
}

.aboutHeroBreadcrumb .breadcrumbLink:hover,
.aboutHeroBreadcrumb .breadcrumbLink:focus-visible {
  color: var(--colorWhite);
}

.aboutHeroBreadcrumb .breadcrumbItem[aria-current="page"] {
  color: var(--colorWhite);
}

.aboutHeroTitle {
  margin-top: 1rem;
  color: var(--colorWhite);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.2);
}

.aboutHeroOrnament {
  display: inline-block;
  position: relative;
  width: 0.55rem;
  height: 0.55rem;
  margin: 0.2rem 0;
  background: var(--colorGold);
  border-radius: 50%;
}

.aboutHeroOrnament::before,
.aboutHeroOrnament::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 3rem;
  height: 0.125rem;
  background: rgba(255, 255, 255, 0.75);
  transform: translateY(-50%);
}

.aboutHeroOrnament::before {
  right: 100%;
  margin-right: 0.55rem;
}

.aboutHeroOrnament::after {
  left: 100%;
  margin-left: 0.55rem;
}

.aboutHeroLead {
  max-width: 38rem;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.8;
  margin-top: 0.4rem;
}

/* Shared About section heading */
.aboutSection {
  position: relative;
  padding-block: 3rem 3.6rem;
  background: var(--colorWhite);
}

.aboutSectionAlt {
  background: linear-gradient(180deg, #f7fafb 0%, #eef5f3 100%);
}

.aboutSectionHeading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  margin-bottom: 2rem;
}

.aboutSectionEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--colorBlue);
  font-family: Georgia, serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.24em;
}

.aboutSectionEyebrowMark {
  display: inline-block;
  width: 2.4rem;
  height: 0.18rem;
  background: var(--gradientSectionText);
  border-radius: 999rem;
}

.aboutSectionTitle {
  color: var(--colorTitleDark);
  font-family: var(--fontMincho);
  font-size: clamp(1.7rem, 5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.aboutSectionLead {
  color: var(--colorMuted);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.7;
}

/* Info table (dl-based) */
.aboutInfoTable {
  margin: 0;
  padding: 0.4rem 0;
  border-top: 0.0625rem solid #dfe6ea;
  border-bottom: 0.0625rem solid #dfe6ea;
}

.aboutInfoRow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem 1.4rem;
  padding-block: 1rem;
  border-bottom: 0.0625rem solid #eef1f4;
}

.aboutInfoRow:last-child {
  border-bottom: 0;
}

.aboutInfoLabel {
  color: var(--colorBlue);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
}

.aboutInfoValue {
  margin: 0;
  color: var(--colorBlack);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.75;
}

.aboutInfoPhone {
  color: var(--colorBlue);
  font-weight: 700;
  border-bottom: 0.0625rem solid transparent;
  transition: border-color var(--transitionBase);
}

.aboutInfoPhone:hover,
.aboutInfoPhone:focus-visible {
  border-bottom-color: var(--colorBlue);
}

.aboutInfoSeparator {
  display: inline-block;
  color: var(--colorBorder);
}

/* Product card grid */
.aboutProductGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}

.aboutProductCard {
  display: flex;
  flex-direction: column;
  background: var(--colorWhite);
  border: 0.0625rem solid #e5ebee;
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: 0 0.8rem 1.8rem rgba(55, 67, 82, 0.06);
  transition: transform var(--transitionBase), box-shadow var(--transitionBase), border-color var(--transitionBase);
}

.aboutProductCard:hover,
.aboutProductCard:focus-visible {
  transform: translateY(-0.25rem);
  box-shadow: 0 1.4rem 2.6rem rgba(55, 67, 82, 0.12);
  border-color: rgba(72, 106, 130, 0.3);
}

.aboutProductMedia {
  position: relative;
  aspect-ratio: 20 / 9;
  overflow: hidden;
  background: #f2f5f7;
}

.aboutProductImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aboutProductCardCatcher .aboutProductImage,
.aboutProductCardGtnex .aboutProductImage {
  object-fit: contain;
  padding: 1rem;
}

.aboutProductCardCatcher .aboutProductMedia {
  background: linear-gradient(135deg, #fff5ed 0%, #ffe3d1 100%);
}

.aboutProductCardGtnex .aboutProductMedia {
  background: linear-gradient(135deg, #fdf2f0 0%, #f6dbd5 100%);
}

.aboutProductBody {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.2rem 1.3rem 1.4rem;
}

.aboutProductTag {
  align-self: flex-start;
  padding: 0.28rem 0.75rem;
  background: rgba(126, 214, 167, 0.2);
  color: #2d6a46;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 999rem;
  letter-spacing: 0.02em;
}

.aboutProductCardCatcher .aboutProductTag {
  background: #ffd9b5;
  color: #5a2f18;
}

.aboutProductCardGtnex .aboutProductTag {
  background: #f4c07a;
  color: #3a0d14;
}

.aboutProductTitle {
  color: var(--colorTitleDark);
  font-family: var(--fontMincho);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
}

.aboutProductText {
  color: var(--colorBlack);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.7;
}

.aboutProductCard[data-reveal]:nth-child(2).isRevealed {
  transition-delay: 0.12s;
}

.aboutProductCard[data-reveal]:nth-child(3).isRevealed {
  transition-delay: 0.24s;
}

/* About page CTA band — a little more specific text */
.ctaBandPhoneSecondary {
  color: inherit;
  font-weight: 700;
  border-bottom: 0.0625rem solid transparent;
  transition: border-color var(--transitionBase);
}

.ctaBandPhoneSecondary:hover,
.ctaBandPhoneSecondary:focus-visible {
  border-bottom-color: currentColor;
}

.ctaBandPhoneFootnote {
  margin-top: 0.3rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 500;
}

/* ======================================== */
/* SERVICE AREA PAGE                         */
/* Reuses .areaSection / .areaPill primitives */
/* ======================================== */
.serviceAreaSection {
  padding-block: 3rem 4rem;
}

/* "など" — trailing filler after the pill list (not a button) */
.areaPillMore {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.4rem;
  color: var(--colorMuted);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* NOTE box */
.areaNoteBox {
  max-width: 56rem;
  margin: 2.4rem auto 0;
  padding: 1.2rem 1.4rem 1.3rem;
  background: var(--colorWhite);
  border: 0.0625rem solid #dfe6ea;
  border-radius: 0.6rem;
  box-shadow: 0 0.6rem 1.2rem rgba(55, 67, 82, 0.04);
}

.areaNoteBoxLabel {
  margin-bottom: 0.5rem;
  color: var(--colorGold);
  font-family: Georgia, serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.areaNoteBoxText {
  color: var(--colorMuted);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.75;
}

/* ======================================== */
/* NEWS / BLOG ARTICLE PAGE                  */
/* Reusable for any single news/blog post.   */
/* ======================================== */
.newsArticle {
  position: relative;
}

/* HERO — solid teal panel with light overlay */
.newsArticleHero {
  position: relative;
  isolation: isolate;
  padding-block: 2.4rem 2.6rem;
  background: linear-gradient(135deg, #486a82 0%, #3a5468 50%, #2c3f4f 100%);
  color: var(--colorWhite);
  text-align: center;
  overflow: hidden;
}

.newsArticleHero::before {
  content: "";
  position: absolute;
  top: -30%;
  left: 50%;
  width: 60rem;
  height: 60rem;
  max-width: 140%;
  transform: translateX(-50%);
  background: radial-gradient(circle at center, rgba(126, 214, 167, 0.18) 0%, rgba(126, 214, 167, 0) 60%);
  filter: blur(0.4rem);
  pointer-events: none;
  z-index: -1;
}

.newsArticleHeroInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding-block: 1rem;
}

.newsArticleBreadcrumb {
  align-self: flex-start;
  margin: 0 0 1rem 0;
  padding-top: 0;
}

.newsArticleBreadcrumb .breadcrumbList,
.newsArticleBreadcrumb .breadcrumbLink,
.newsArticleBreadcrumb .breadcrumbItem::after {
  color: rgba(255, 255, 255, 0.85);
}

.newsArticleBreadcrumb .breadcrumbLink:hover,
.newsArticleBreadcrumb .breadcrumbLink:focus-visible {
  color: var(--colorWhite);
}

.newsArticleBreadcrumb .breadcrumbItem[aria-current="page"] {
  color: var(--colorWhite);
}

.newsArticleMeta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.6rem;
}

.newsArticleCategory {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 1.1rem;
  background: var(--colorGold);
  color: #4a3010;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 999rem;
  letter-spacing: 0.04em;
}

.newsArticleCategoryKnowledge {
  background: rgba(126, 214, 167, 0.95);
  color: #1f4a32;
}

.newsArticleDate {
  color: rgba(255, 255, 255, 0.92);
  font-family: Georgia, serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.newsArticleTitle {
  margin-top: 0.6rem;
  color: var(--colorWhite);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.18);
}

.newsArticleOrnament {
  display: inline-block;
  position: relative;
  width: 0.55rem;
  height: 0.55rem;
  margin: 0.5rem 0 0.4rem;
  background: var(--colorGold);
  border-radius: 50%;
}

.newsArticleOrnament::before,
.newsArticleOrnament::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 3rem;
  height: 0.125rem;
  background: rgba(255, 255, 255, 0.7);
  transform: translateY(-50%);
}

.newsArticleOrnament::before { right: 100%; margin-right: 0.55rem; }
.newsArticleOrnament::after { left: 100%; margin-left: 0.55rem; }

.newsArticleLead {
  max-width: 42rem;
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.8;
  margin-top: 0.4rem;
}

/* BODY */
.newsArticleBody {
  position: relative;
  padding-block: 2.6rem 3rem;
  background: var(--colorWhite);
}

.newsArticleBodyInner {
  max-width: 56rem;
}

.newsArticleIntro {
  color: var(--colorBlack);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.95;
  margin-bottom: 1.8rem;
}

.newsArticleParagraph {
  color: var(--colorBlack);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.95;
}

.newsArticleFigure {
  margin: 0 0 2rem 0;
  padding: 0;
}

.newsArticleImage {
  width: 100%;
  height: auto;
  border-radius: 0.6rem;
  box-shadow: 0 1.2rem 2.4rem rgba(55, 67, 82, 0.12);
}

/* Sections inside the body — gold left bar + heading */
.newsArticleSection {
  margin-top: 2.4rem;
}

.newsArticleSectionTitle {
  position: relative;
  padding-left: 1rem;
  color: var(--colorTitleDark);
  font-family: var(--fontMincho);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 1rem;
  border-bottom: 0.0625rem solid #e3e8ec;
  padding-bottom: 0.7rem;
}

.newsArticleSectionTitle::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0;
  width: 0.32rem;
  height: 1.6rem;
  background: var(--colorGold);
  border-radius: 0.16rem;
}

.newsArticleList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.newsArticleList li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--colorBlack);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.85;
}

.newsArticleList li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0.3rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--gradientNumber);
}

/* Footer back-link */
.newsArticleFooter {
  display: flex;
  justify-content: center;
  margin-top: 2.6rem;
}

.newsArticleBackLink {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  background: var(--colorWhite);
  color: var(--colorBlue);
  font-size: 0.95rem;
  font-weight: 700;
  border: 0.125rem solid var(--colorBlue);
  border-radius: 999rem;
  transition: background var(--transitionBase), color var(--transitionBase), transform var(--transitionBase);
}

.newsArticleBackLink:hover,
.newsArticleBackLink:focus-visible {
  transform: translateX(-0.2rem);
  background: var(--colorBlue);
  color: var(--colorWhite);
}

.newsArticleBackLink:active {
  transform: translateX(0);
}

/* ======================================== */
/* NEWS LIST (BLOG TOP)                      */
/* ======================================== */
.newsListHero {
  position: relative;
  isolation: isolate;
  padding-block: 2rem 2.4rem;
  background: linear-gradient(135deg, #486a82 0%, #3a5468 50%, #2c3f4f 100%);
  color: var(--colorWhite);
  text-align: center;
  overflow: hidden;
}

.newsListHero::before {
  content: "";
  position: absolute;
  top: -30%;
  left: 50%;
  width: 60rem;
  height: 60rem;
  max-width: 140%;
  transform: translateX(-50%);
  background: radial-gradient(circle at center, rgba(126, 214, 167, 0.18) 0%, rgba(126, 214, 167, 0) 60%);
  filter: blur(0.4rem);
  pointer-events: none;
  z-index: -1;
}

.newsListHeroInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-block: 1rem;
}

.newsListHeroEyebrow {
  margin-top: 0.6rem;
  color: rgba(255, 255, 255, 0.85);
  font-family: Georgia, serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.3em;
}

.newsListHeroTitle {
  margin-top: 0.4rem;
  color: var(--colorWhite);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.18);
}

.newsListHeroLead {
  max-width: 44rem;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.8;
  margin-top: 0.4rem;
}

.newsListSection {
  position: relative;
  padding-block: 2.4rem 3rem;
  background: var(--colorWhite);
}

/* Filter tabs */
.newsFilterTabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.8rem;
}

.newsFilterTab {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.2rem;
  background: var(--colorWhite);
  color: var(--colorMuted);
  border: 0.0625rem solid #d8dfe4;
  border-radius: 999rem;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transitionBase), color var(--transitionBase), border-color var(--transitionBase), transform var(--transitionBase);
}

.newsFilterTab:hover,
.newsFilterTab:focus-visible {
  border-color: var(--colorBlue);
  color: var(--colorBlue);
}

.newsFilterTab.isActive {
  background: var(--gradientHeaderButton);
  border-color: transparent;
  color: var(--colorWhite);
  box-shadow: 0 0.5rem 1rem rgba(72, 106, 130, 0.22);
}

.newsFilterTab.isActive:hover,
.newsFilterTab.isActive:focus-visible {
  color: var(--colorWhite);
}

/* List uses existing .blogList / .blogItem from base; just margin tweak */
.newsList {
  margin-top: 0;
}

/* Knowledge-category pill (mint variant of blogItemCategory) */
.blogItemCategoryKnowledge {
  background: rgba(126, 214, 167, 0.32);
  color: #1f4a32;
}

.newsListEmpty {
  text-align: center;
  padding: 2.4rem 1rem;
  color: var(--colorMuted);
  font-size: 0.95rem;
  font-weight: 500;
}

.newsListItem.isHidden {
  display: none;
}

/* ======================================== */
/* FAQ PAGE                                  */
/* Reuses .faqList / .faqItem accordion      */
/* ======================================== */
.faqPageSection {
  position: relative;
  padding-block: 3rem 4rem;
  background: var(--colorWhite);
}

.faqGroup {
  margin-bottom: 2.4rem;
  max-width: 60rem;
  margin-inline: auto;
}

.faqGroup:last-child {
  margin-bottom: 0;
}

.faqGroupTitle {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  color: var(--colorTitleDark);
  font-family: var(--fontMincho);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
}

.faqGroupTitleBar {
  display: inline-block;
  width: 2.4rem;
  height: 0.18rem;
  background: var(--gradientSectionText);
  border-radius: 999rem;
}

/* ======================================== */
/* CONTACT PAGE                              */
/* ======================================== */
.contactProductSection {
  position: relative;
  padding-block: 2.8rem 3rem;
  background: linear-gradient(180deg, #f3f9f7 0%, #e8f1ee 100%);
}

.contactSectionHeading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  margin-bottom: 1.8rem;
}

.contactSectionEyebrow {
  color: var(--colorBlue);
  font-family: Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3em;
}

.contactSectionTitle {
  color: var(--colorTitleDark);
  font-family: var(--fontMincho);
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin-top: 0.2rem;
}

.contactSectionLead {
  color: var(--colorMuted);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.7;
  margin-top: 0.3rem;
}

/* Product cards */
.contactProductGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}

.contactProductCard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.6rem 1.5rem 1.7rem;
  background: var(--colorWhite);
  border-radius: 1rem;
  border: 0.0625rem solid #e2e8eb;
  box-shadow: 0 0.8rem 1.8rem rgba(55, 67, 82, 0.06);
  overflow: hidden;
}

.contactProductCardAccent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.375rem;
  background: var(--gradientSectionText);
}

.contactProductCardWith .contactProductCardAccent {
  background: linear-gradient(90deg, #486a82 0%, #6ca2bc 100%);
}

.contactProductCardCatcher .contactProductCardAccent {
  background: linear-gradient(90deg, #ffa077 0%, #d8612c 100%);
}

.contactProductCardGtnex .contactProductCardAccent {
  background: linear-gradient(90deg, #c47680 0%, #4a1018 100%);
}

.contactProductCardTag {
  margin-top: 0.4rem;
  color: var(--colorMuted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.contactProductCardName {
  color: var(--colorTitleDark);
  font-family: var(--fontMincho);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.contactProductCardText {
  flex: 1;
  color: var(--colorBlack);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.7;
  margin-top: 0.3rem;
}

.contactProductCardButton {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
  padding: 0.75rem 1.4rem;
  background: var(--gradientHeaderButton);
  color: var(--colorWhite);
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 999rem;
  box-shadow: var(--colorButtonShadow);
  transition: transform var(--transitionBase), box-shadow var(--transitionBase), filter var(--transitionBase);
}

.contactProductCardButton:hover,
.contactProductCardButton:focus-visible {
  transform: translateY(-0.15rem);
  box-shadow: 0 1rem 2rem rgba(72, 106, 130, 0.32);
  filter: brightness(1.04);
}

.contactProductCardButton:active {
  transform: translateY(0);
}

.contactProductCardCatcher .contactProductCardButton {
  background: linear-gradient(90deg, #ffa077 0%, #d8612c 100%);
  box-shadow: 0 0.75rem 2rem rgba(216, 97, 44, 0.28);
}

.contactProductCardCatcher .contactProductCardButton:hover {
  box-shadow: 0 1rem 2rem rgba(216, 97, 44, 0.36);
}

.contactProductCardGtnex .contactProductCardButton {
  background: linear-gradient(90deg, #c47680 0%, #4a1018 100%);
  box-shadow: 0 0.75rem 2rem rgba(74, 16, 24, 0.28);
}

.contactProductCardGtnex .contactProductCardButton:hover {
  box-shadow: 0 1rem 2rem rgba(74, 16, 24, 0.36);
}

/* Wide variant for GT-NEX (full row) */
.contactProductCardWide .contactProductCardWideBody {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Form section */
.contactFormSection {
  position: relative;
  padding-block: 2.8rem 3.4rem;
  background: linear-gradient(180deg, #e8f1ee 0%, #dcebe6 100%);
}

.contactForm {
  max-width: 60rem;
  margin-inline: auto;
  padding: 1.8rem 1.6rem 2rem;
  background: var(--colorWhite);
  border-radius: 1rem;
  box-shadow: 0 1rem 2.4rem rgba(55, 67, 82, 0.08);
}

.contactFormGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

.contactField {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.contactFieldFull {
  grid-column: 1 / -1;
}

.contactFieldLabel {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--colorTitleDark);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.contactFieldBadge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  background: #ff8b8b;
  color: var(--colorWhite);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 0.25rem;
  letter-spacing: 0.05em;
}

.contactFieldInput {
  width: 100%;
  padding: 0.85rem 1rem;
  background: #f6faf9;
  border: 0.0625rem solid #d3dddc;
  border-radius: 0.5rem;
  color: var(--colorBlack);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  transition: border-color var(--transitionBase), box-shadow var(--transitionBase), background var(--transitionBase);
}

.contactFieldInput:focus,
.contactFieldInput:focus-visible {
  outline: none;
  background: var(--colorWhite);
  border-color: var(--colorBlue);
  box-shadow: 0 0 0 0.2rem rgba(72, 106, 130, 0.15);
}

.contactFieldInput::placeholder {
  color: #a8b3b0;
}

.contactFieldTextarea {
  resize: vertical;
  min-height: 9rem;
  font-family: inherit;
}

.contactSelectWrap {
  position: relative;
}

.contactFieldSelect {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  cursor: pointer;
}

.contactSelectArrow {
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 0.14rem solid var(--colorMuted);
  border-bottom: 0.14rem solid var(--colorMuted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.contactFormActions {
  display: flex;
  justify-content: center;
  margin-top: 1.6rem;
}

.contactFormSubmit {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 2.4rem;
  background: var(--gradientHeaderButton);
  color: var(--colorWhite);
  font-size: 1.05rem;
  font-weight: 700;
  border: 0;
  border-radius: 999rem;
  cursor: pointer;
  box-shadow: var(--colorButtonShadow);
  transition: transform var(--transitionBase), box-shadow var(--transitionBase), filter var(--transitionBase);
}

.contactFormSubmit:hover,
.contactFormSubmit:focus-visible {
  transform: translateY(-0.15rem);
  box-shadow: 0 1.2rem 2.4rem rgba(72, 106, 130, 0.32);
  filter: brightness(1.05);
}

.contactFormSubmit:active {
  transform: translateY(0);
}

.contactFormNote {
  margin-top: 1.4rem;
  text-align: center;
  color: var(--colorMuted);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.7;
}

/* Phone band */
.contactPhoneBand {
  position: relative;
  padding-block: 3rem 3.4rem;
  background: linear-gradient(135deg, #486a82 0%, #6ea899 50%, #3c6e6c 100%);
  color: var(--colorWhite);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.contactPhoneBand .ctaBandGlow {
  position: absolute;
  top: -40%;
  left: 50%;
  width: 70rem;
  height: 70rem;
  max-width: 150%;
  transform: translateX(-50%);
  background: radial-gradient(circle at center, rgba(126, 214, 167, 0.4) 0%, rgba(126, 214, 167, 0) 60%);
  filter: blur(0.6rem);
  pointer-events: none;
  z-index: -1;
}

.contactPhoneBandInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.contactPhoneEyebrow {
  color: rgba(255, 255, 255, 0.85);
  font-family: Georgia, serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.3em;
}

.contactPhoneTitle {
  color: var(--colorWhite);
  font-family: var(--fontMincho);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  margin-top: 0.2rem;
}

.contactPhoneSubLabel {
  margin-top: 0.6rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  font-weight: 600;
}

.contactPhoneNumber {
  color: var(--colorWhite);
  font-size: clamp(2.4rem, 9vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  margin-top: 0.3rem;
  transition: opacity var(--transitionBase);
}

.contactPhoneNumber:hover,
.contactPhoneNumber:focus-visible {
  opacity: 0.88;
}

.contactPhoneHours {
  margin-top: 0.6rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.88rem;
  font-weight: 500;
}

.contactPhoneSecondary {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  font-weight: 500;
}

.contactPhoneSecondaryLink {
  color: inherit;
  font-weight: 700;
  border-bottom: 0.0625rem solid transparent;
  transition: border-color var(--transitionBase);
}

.contactPhoneSecondaryLink:hover,
.contactPhoneSecondaryLink:focus-visible {
  border-bottom-color: currentColor;
}

.contactPhoneFootnote {
  margin-top: 0.6rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
  font-weight: 500;
}

/* Form: honeypot (bots only) — visually + AT-hidden but still present */
.contactHoneypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Form: per-field error + invalid state */
.contactFieldError {
  min-height: 0;
  margin: 0;
  color: #c0392b;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.contactFieldError:empty {
  display: none;
}

.contactFieldInput.hasError {
  border-color: #c0392b;
  background: #fff5f3;
  box-shadow: 0 0 0 0.2rem rgba(192, 57, 43, 0.12);
}

.contactFieldInput.hasError:focus,
.contactFieldInput.hasError:focus-visible {
  border-color: #c0392b;
  box-shadow: 0 0 0 0.2rem rgba(192, 57, 43, 0.2);
}

/* Form: live status box (loading / success / error) */
.contactFormStatus {
  margin-top: 1.2rem;
  padding: 0.85rem 1.1rem;
  border-radius: 0.5rem;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.contactFormStatus.isLoading {
  background: #f0f6f9;
  color: var(--colorBlue);
  border: 0.0625rem solid #d4e3eb;
}

.contactFormStatus.isSuccess {
  background: rgba(126, 214, 167, 0.16);
  color: #1f4a32;
  border: 0.0625rem solid rgba(126, 214, 167, 0.5);
}

.contactFormStatus.isError {
  background: #fff0ee;
  color: #a83224;
  border: 0.0625rem solid #f1b9b1;
}

.contactFormSubmit:disabled {
  opacity: 0.6;
  cursor: wait;
  pointer-events: none;
}

/* ======================================== */
/* CONTACT THANKS PAGE                       */
/* ======================================== */
.thanksSection {
  position: relative;
  padding-block: 3.4rem 4rem;
  background: linear-gradient(180deg, #f3f9f7 0%, #e8f1ee 100%);
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.thanksSectionInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.8rem;
  max-width: 50rem;
}

.thanksMark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: var(--gradientHeaderButton);
  color: var(--colorWhite);
  margin-bottom: 0.4rem;
  box-shadow: 0 1.2rem 2.4rem rgba(72, 106, 130, 0.28);
}

.thanksMark svg {
  width: 60%;
  height: 60%;
}

.thanksEyebrow {
  color: var(--colorBlue);
  font-family: Georgia, serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.3em;
}

.thanksTitle {
  margin-top: 0.2rem;
  color: var(--colorTitleDark);
  font-family: var(--fontMincho);
  font-size: clamp(1.7rem, 5.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.thanksLead {
  color: var(--colorBlack);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8;
  margin-top: 0.6rem;
}

.thanksParagraph {
  color: var(--colorBlack);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.9;
  margin-top: 0.4rem;
}

.thanksParagraph strong {
  color: var(--colorBlue);
  font-weight: 700;
}

.thanksNotice {
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  background: var(--colorWhite);
  border: 0.0625rem solid #dfe6ea;
  border-radius: 0.6rem;
  box-shadow: 0 0.6rem 1.2rem rgba(55, 67, 82, 0.04);
  max-width: 40rem;
  width: 100%;
}

.thanksNoticeText {
  color: var(--colorMuted);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.8;
}

.thanksPhoneLink {
  color: var(--colorBlue);
  font-weight: 700;
  border-bottom: 0.0625rem solid transparent;
  transition: border-color var(--transitionBase);
}

.thanksPhoneLink:hover,
.thanksPhoneLink:focus-visible {
  border-bottom-color: var(--colorBlue);
}

.thanksActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 1.2rem;
  margin-top: 1.8rem;
}

.thanksPrimaryButton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 2rem;
  background: var(--gradientHeaderButton);
  color: var(--colorWhite);
  font-size: 1rem;
  font-weight: 700;
  border-radius: 999rem;
  box-shadow: var(--colorButtonShadow);
  transition: transform var(--transitionBase), box-shadow var(--transitionBase), filter var(--transitionBase);
}

.thanksPrimaryButton:hover,
.thanksPrimaryButton:focus-visible {
  transform: translateY(-0.15rem);
  box-shadow: 0 1rem 2rem rgba(72, 106, 130, 0.32);
  filter: brightness(1.04);
}

.thanksPrimaryButton:active {
  transform: translateY(0);
}

.thanksSecondaryButton {
  display: inline-flex;
  align-items: center;
  padding: 0.95rem 1.6rem;
  color: var(--colorBlue);
  font-size: 0.95rem;
  font-weight: 700;
  border: 0.125rem solid var(--colorBlue);
  border-radius: 999rem;
  background: var(--colorWhite);
  transition: background var(--transitionBase), color var(--transitionBase);
}

.thanksSecondaryButton:hover,
.thanksSecondaryButton:focus-visible {
  background: var(--colorBlue);
  color: var(--colorWhite);
}

/* ======================================== */
/* DEDICATED TRIAL / APPLICATION FORM PAGES  */
/* (catcher-trial / future with-trial etc.)  */
/* ======================================== */
.trialHero {
  position: relative;
  isolation: isolate;
  padding-block: 2rem 2.4rem;
  /* Theme-aware gradient — picks up page-scoped accent vars */
  background: linear-gradient(135deg, var(--colorAccentSoft, #6ca2bc) 0%, var(--colorAccent, #486a82) 100%);
  color: var(--colorWhite);
  text-align: center;
  overflow: hidden;
}

.trialHero::before {
  content: "";
  position: absolute;
  top: -30%;
  left: 50%;
  width: 60rem;
  height: 60rem;
  max-width: 140%;
  transform: translateX(-50%);
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%);
  filter: blur(0.4rem);
  pointer-events: none;
  z-index: -1;
}

.trialHeroInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding-block: 1rem;
}

.trialHeroBreadcrumb {
  align-self: flex-start;
  margin: 0 0 1rem 0;
  padding-top: 0;
}

.trialHeroBreadcrumb .breadcrumbList,
.trialHeroBreadcrumb .breadcrumbLink,
.trialHeroBreadcrumb .breadcrumbItem::after {
  color: rgba(255, 255, 255, 0.85);
}

.trialHeroBreadcrumb .breadcrumbLink:hover,
.trialHeroBreadcrumb .breadcrumbLink:focus-visible {
  color: var(--colorWhite);
}

.trialHeroBreadcrumb .breadcrumbItem[aria-current="page"] {
  color: var(--colorWhite);
}

.trialHeroBadge {
  display: inline-flex;
  align-items: center;
  margin-top: 0.6rem;
  padding: 0.45rem 1.4rem;
  background: var(--colorWhite);
  color: var(--colorAccentDeep, #b35a3d);
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 999rem;
  letter-spacing: 0.04em;
  box-shadow: 0 0.5rem 1.2rem rgba(74, 32, 16, 0.18);
}

.trialHeroTitle {
  margin-top: 0.6rem;
  color: var(--colorWhite);
  font-size: clamp(1.9rem, 6vw, 3rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-shadow: 0 0.3rem 0.8rem rgba(74, 32, 16, 0.18);
}

/* Form section (white card on light bg — tinted per page theme) */
.trialFormSection {
  position: relative;
  padding-block: 2.6rem 3rem;
  background: linear-gradient(180deg, #f5f9f9 0%, #e9f1ee 100%);
}

.catcherPage .trialFormSection {
  background: linear-gradient(180deg, #fff8f4 0%, #fde9dc 100%);
}

.gtnexPage .trialFormSection {
  background: linear-gradient(180deg, #fdf5f3 0%, #f8e1dc 100%);
}

.trialFormHeading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  margin-bottom: 1.8rem;
}

.trialFormEyebrow {
  color: var(--colorAccent, #d8612c);
  font-family: Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3em;
}

.trialFormTitle {
  color: var(--colorAccentDeep, #b35a3d);
  font-family: var(--fontMincho);
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  margin-top: 0.2rem;
}

.trialFormLead {
  color: var(--colorMuted);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.7;
  margin-top: 0.3rem;
}

/* Trial submit button — uses page-theme gradient (auto-themes per page) */
.trialFormSubmit {
  background: var(--gradientHeaderButton);
  box-shadow: var(--colorButtonShadow);
}

/* Phone band — catcher orange variant */
.contactPhoneBandCatcher {
  background: linear-gradient(135deg, #d8612c 0%, #b35a3d 50%, #8b3e22 100%);
}

.contactPhoneBandCatcher .ctaBandGlow {
  background: radial-gradient(circle at center, rgba(255, 220, 180, 0.3) 0%, rgba(255, 180, 130, 0) 60%);
}

/* Phone band — gtnex burgundy variant */
.contactPhoneBandGtnex {
  background: linear-gradient(135deg, #8b2635 0%, #4a1018 50%, #2a0810 100%);
}

.contactPhoneBandGtnex .ctaBandGlow {
  background: radial-gradient(circle at center, rgba(244, 192, 122, 0.28) 0%, rgba(139, 38, 53, 0) 60%);
}

/* ======================================== */
/* PRIVACY POLICY PAGE                       */
/* ======================================== */
.policySection {
  position: relative;
  padding-block: 2.4rem 3.2rem;
  background: linear-gradient(180deg, #f3f9f7 0%, #eaf3ef 100%);
}

.policySectionInner {
  max-width: 60rem;
  margin-inline: auto;
}

.policyIntro {
  color: var(--colorBlack);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.95;
  padding: 1.4rem 1.4rem;
  background: var(--colorWhite);
  border: 0.0625rem solid #dfe6ea;
  border-radius: 0.6rem;
  box-shadow: 0 0.6rem 1.2rem rgba(55, 67, 82, 0.04);
  margin-bottom: 2rem;
}

.policyList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.policyItem {
  position: relative;
  padding: 1.4rem 1.4rem 1.5rem 1.4rem;
  background: var(--colorWhite);
  border: 0.0625rem solid #dfe6ea;
  border-radius: 0.6rem;
  box-shadow: 0 0.6rem 1.4rem rgba(55, 67, 82, 0.05);
}

.policyItemNumber {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.6rem;
  background: var(--gradientNumber);
  color: var(--colorWhite);
  font-family: var(--fontMincho);
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 50%;
  box-shadow: 0 0.4rem 0.9rem rgba(72, 106, 130, 0.22);
  letter-spacing: 0.02em;
}

.policyItemTitle {
  color: var(--colorTitleDark);
  font-family: var(--fontMincho);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.7rem;
  padding-bottom: 0.7rem;
  border-bottom: 0.0625rem solid #eef1f4;
}

.policyItemText {
  color: var(--colorBlack);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.95;
}

.policyBulletList {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.policyBulletList li {
  position: relative;
  padding-left: 1.2rem;
  color: var(--colorBlack);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.85;
}

.policyBulletList li::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 0.3rem;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--gradientNumber);
  border-radius: 50%;
}

/* Section 09 — contact card */
.policyContactCard {
  margin-top: 1rem;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(180deg, #f8fbfa 0%, #eef5f1 100%);
  border: 0.0625rem solid #d8e3df;
  border-radius: 0.5rem;
}

.policyContactName {
  color: var(--colorTitleDark);
  font-family: var(--fontMincho);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.policyContactList {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.policyContactRow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem 1rem;
  padding-block: 0.2rem;
}

.policyContactRow dt {
  color: var(--colorBlue);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.policyContactRow dd {
  margin: 0;
  color: var(--colorBlack);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.7;
}

.policyContactRow dd a {
  color: var(--colorBlue);
  font-weight: 700;
  border-bottom: 0.0625rem solid transparent;
  transition: border-color var(--transitionBase);
}

.policyContactRow dd a:hover,
.policyContactRow dd a:focus-visible {
  border-bottom-color: var(--colorBlue);
}

/* Effective-date footer */
.policyEffective {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-top: 2rem;
  padding: 1.2rem 1rem;
  background: var(--colorWhite);
  border-top: 0.125rem solid var(--colorGold);
  border-radius: 0.4rem;
  box-shadow: 0 0.4rem 1rem rgba(55, 67, 82, 0.04);
  text-align: center;
}

.policyEffectiveLabel {
  color: var(--colorGold);
  font-family: Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3em;
}

.policyEffectiveDate {
  color: var(--colorTitleDark);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}