/* ==========================================================================
   Zero Next One BASE NIIKAPPU
   lower-common.css
   Lower page common design system
   --------------------------------------------------------------------------
   Responsibility:
   - Lower page shared layout
   - Lower hero / breadcrumb / anchors
   - Common lower sections
   - Cards / flow / tables / notes / FAQ / related links / CTA
   - Keeps the top page world view:
     watercolor, paper texture, Hokkaido nature guidebook, calm sports camp UI

   Required:
   - main.css must be loaded before this file.
   - body class should include: page-lower
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Lower page base
   -------------------------------------------------------------------------- */

.page-lower {
  color: var(--color-ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(230, 184, 90, 0.16), transparent 280px),
    radial-gradient(circle at 88% 12%, rgba(44, 69, 52, 0.12), transparent 320px),
    linear-gradient(180deg, #fff8eb 0%, var(--color-paper) 44%, #f3ead5 100%);
}

.page-lower .l-main {
  background:
    linear-gradient(90deg, rgba(74, 61, 42, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(74, 61, 42, 0.028) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* Lower pages use readable header color from the beginning. */
.page-lower .l-site-header {
  color: var(--color-blue-niikappu);
  background: linear-gradient(180deg, rgba(255, 248, 234, 0.92), rgba(255, 248, 234, 0.68));
  border-bottom: 1px solid rgba(74, 61, 42, 0.09);
  box-shadow: 0 10px 28px rgba(28, 24, 18, 0.055);
  backdrop-filter: blur(14px);
}

.page-lower .l-site-header__brand {
  text-shadow: none;
}

.page-lower .l-site-header__brand-mark {
  color: var(--color-white-soft);
  background: var(--color-blue-niikappu);
  border-color: var(--color-blue-niikappu);
}

.page-lower .l-site-header__brand-small,
.page-lower .l-site-header__brand-sub {
  color: var(--color-blue-muted);
}

.page-lower .l-site-header__menu-line,
.page-lower .l-site-header__menu-button::before,
.page-lower .l-site-header__menu-button::after {
  box-shadow: none;
}

.p-lower-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.p-lower-page::before,
.p-lower-page::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.p-lower-page::before {
  top: 8rem;
  right: -8rem;
  width: 18rem;
  height: 18rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(185, 199, 165, 0.22), transparent 68%);
  filter: blur(2px);
}

.p-lower-page::after {
  bottom: 20rem;
  left: -9rem;
  width: 20rem;
  height: 20rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(230, 184, 90, 0.13), transparent 70%);
  filter: blur(2px);
}

.p-lower-page__inner,
.p-lower-container {
  width: min(var(--site-max), 100%);
  margin-inline: auto;
  padding-inline: var(--side-padding);
}

/* --------------------------------------------------------------------------
   02. Lower hero
   -------------------------------------------------------------------------- */

.p-lower-hero {
  position: relative;
  overflow: hidden;
  padding: 116px var(--side-padding) 58px;
  color: var(--color-blue-niikappu);
  background:
    radial-gradient(circle at 78% 18%, rgba(230, 184, 90, 0.18), transparent 300px),
    radial-gradient(circle at 18% 78%, rgba(44, 69, 52, 0.12), transparent 260px),
    linear-gradient(180deg, rgba(255, 252, 245, 0.92), rgba(247, 239, 220, 0.84));
  border-bottom: 1px solid rgba(74, 61, 42, 0.1);
}

.p-lower-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(74, 61, 42, 0.036) 1px, transparent 1px),
    linear-gradient(180deg, rgba(74, 61, 42, 0.028) 1px, transparent 1px);
  background-size: 31px 31px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 92%);
}

.p-lower-hero::after {
  content: "";
  position: absolute;
  right: -5.5rem;
  bottom: -6rem;
  width: 17rem;
  height: 17rem;
  border: 1px solid rgba(21, 39, 61, 0.08);
  border-radius: 42% 58% 50% 50%;
  background:
    radial-gradient(circle at 36% 34%, rgba(255, 255, 255, 0.32), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(185, 199, 165, 0.34), rgba(44, 69, 52, 0.08));
  transform: rotate(-12deg);
}

.p-lower-hero__inner {
  position: relative;
  z-index: 1;
  width: min(var(--site-max), 100%);
  margin-inline: auto;
  display: grid;
  gap: 30px;
}

.p-lower-hero__content {
  display: grid;
  gap: 0;
}

.p-lower-hero__breadcrumb {
  margin: 0 0 30px;
}

.p-lower-breadcrumb,
.p-lower-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.p-lower-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-lower-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(21, 39, 61, 0.66);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.045em;
}

.p-lower-breadcrumb__item:not(:last-child)::after {
  content: "/";
  color: rgba(21, 39, 61, 0.34);
}

.p-lower-breadcrumb__link {
  color: inherit;
  text-decoration: none;
}

.p-lower-breadcrumb__current {
  color: var(--color-blue-niikappu);
}

.p-lower-hero__kicker,
.p-lower-kicker {
  margin: 0 0 18px;
  color: rgba(21, 39, 61, 0.82);
  font-family: var(--font-label);
  font-size: clamp(0.74rem, 2.8vw, 0.9rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.p-lower-hero__kicker::after,
.p-lower-kicker::after {
  content: "";
  display: block;
  width: 58px;
  height: 1px;
  margin-top: 13px;
  background: currentColor;
  opacity: 0.62;
}

.p-lower-hero__title {
  margin: 0;
  color: var(--color-blue-niikappu);
  font-family: var(--font-heading);
  font-size: clamp(2.22rem, 9.4vw, 3.28rem);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: var(--tracking-title);
  text-shadow: var(--text-shadow-paper);
}

.p-lower-hero__lead {
  margin: 24px 0 0;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 3.5vw, 1.06rem);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: var(--tracking-body);
}

.p-lower-hero__actions {
  margin-top: 30px;
  display: grid;
  gap: 12px;
}

.p-lower-hero__visual {
  position: relative;
  min-height: 190px;
  border: 1px solid rgba(74, 61, 42, 0.13);
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 24%, rgba(230, 184, 90, 0.22), transparent 42%),
    linear-gradient(155deg, rgba(44, 69, 52, 0.18), rgba(255, 252, 245, 0.64)),
    var(--color-paper-card-strong);
  box-shadow: var(--shadow-paper-soft);
}

.p-lower-hero__visual::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(21, 39, 61, 0.1);
  border-radius: 20px;
  pointer-events: none;
}

.p-lower-hero__visual::after {
  content: "NIIKAPPU";
  position: absolute;
  right: 20px;
  bottom: 18px;
  color: rgba(21, 39, 61, 0.22);
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.p-lower-hero__visual-img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

.p-lower-hero__visual-caption {
  position: absolute;
  left: 18px;
  bottom: 16px;
  max-width: calc(100% - 36px);
  margin: 0;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--color-blue-niikappu);
  background: rgba(255, 250, 240, 0.82);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-button-soft);
}

/* --------------------------------------------------------------------------
   03. Lower anchor navigation
   -------------------------------------------------------------------------- */

.p-lower-anchor {
  position: relative;
  z-index: 5;
  margin: -22px var(--side-padding) 0;
}

.p-lower-anchor__inner {
  width: min(var(--site-max), 100%);
  margin-inline: auto;
  padding: 10px;
  border: 1px solid rgba(74, 61, 42, 0.12);
  border-radius: 22px;
  background: rgba(255, 250, 240, 0.9);
  box-shadow: var(--shadow-paper-soft);
  backdrop-filter: blur(14px);
}

.p-lower-anchor__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 2px 2px;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.p-lower-anchor__list::-webkit-scrollbar {
  display: none;
}

.p-lower-anchor__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 13px;
  border: 1px solid rgba(21, 39, 61, 0.12);
  border-radius: var(--radius-button-pill);
  color: rgba(21, 39, 61, 0.78);
  background: rgba(255, 252, 245, 0.74);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.035em;
}

.p-lower-anchor__link::after {
  content: "↓";
  margin-left: 7px;
  color: rgba(21, 39, 61, 0.46);
}

/* --------------------------------------------------------------------------
   04. Lower sections
   -------------------------------------------------------------------------- */

.p-lower-section {
  position: relative;
  padding: 74px var(--side-padding);
  scroll-margin-top: 92px;
}

.p-lower-section--compact {
  padding-block: 54px;
}

.p-lower-section--paper {
  background:
    radial-gradient(circle at 100% 0%, rgba(230, 184, 90, 0.13), transparent 260px),
    linear-gradient(180deg, rgba(255, 250, 240, 0.56), rgba(247, 239, 220, 0.58));
}

.p-lower-section--deep {
  color: var(--color-white-soft);
  background:
    radial-gradient(circle at 78% 10%, rgba(230, 184, 90, 0.22), transparent 320px),
    linear-gradient(155deg, #15273d 0%, #213b31 100%);
}

.p-lower-section--deep .p-lower-kicker,
.p-lower-section--deep .p-lower-section__title,
.p-lower-section--deep .p-lower-section__lead {
  color: var(--color-white-soft);
}

.p-lower-section--deep .p-lower-kicker {
  opacity: 0.86;
}

.p-lower-section--deep .p-lower-section__lead {
  color: rgba(255, 250, 240, 0.84);
}

.p-lower-section__inner {
  width: min(var(--site-max), 100%);
  margin-inline: auto;
}

.p-lower-section__head {
  display: grid;
  gap: 0;
  margin-bottom: 32px;
}

.p-lower-section__title {
  margin: 0;
  color: var(--color-blue-niikappu);
  font-family: var(--font-heading);
  font-size: clamp(1.84rem, 7.6vw, 2.56rem);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: var(--tracking-title);
}

.p-lower-section__lead {
  margin: 18px 0 0;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 3.32vw, 1rem);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: var(--tracking-body);
}

.p-lower-section__body {
  display: grid;
  gap: 28px;
}

.p-lower-section__text {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 3.32vw, 1rem);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: var(--tracking-body);
}

.p-lower-section__text + .p-lower-section__text {
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   05. Intro / summary panels
   -------------------------------------------------------------------------- */









/* --------------------------------------------------------------------------
   06. Card components
   -------------------------------------------------------------------------- */

.p-lower-card-grid {
  display: grid;
  gap: 16px;
}

.p-lower-card-grid--two,
.p-lower-card-grid--three,
.p-lower-card-grid--four {
  grid-template-columns: 1fr;
}

.p-lower-card {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  padding: 22px 20px;
  border: 1px solid rgba(74, 61, 42, 0.13);
  border-radius: 22px;
  color: var(--color-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
    rgba(255, 250, 240, 0.86);
  box-shadow: var(--shadow-paper-soft);
}

.p-lower-card::before {
  content: "";
  position: absolute;
  right: -32px;
  top: -34px;
  width: 94px;
  height: 94px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(230, 184, 90, 0.18), transparent 68%);
  pointer-events: none;
}

.p-lower-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 10px;
  margin-bottom: 14px;
  border-radius: var(--radius-button-pill);
  color: var(--color-white-soft);
  background: var(--color-blue-niikappu);
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
}

.p-lower-card__kicker {
  margin: 0 0 8px;
  color: rgba(21, 39, 61, 0.7);
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.p-lower-card__title {
  margin: 0;
  color: var(--color-blue-niikappu);
  font-family: var(--font-ui);
  font-size: clamp(1rem, 3.8vw, 1.16rem);
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: 0.04em;
}

.p-lower-card__text {
  margin: 11px 0 0;
  color: var(--color-ink-muted);
  font-family: var(--font-ui);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.78;
  letter-spacing: 0.035em;
}

.p-lower-card__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  color: var(--color-blue-niikappu);
  font-family: var(--font-ui);
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.04em;
}

.p-lower-card__link::after {
  content: "→";
}

/* Compact cards for target groups / small lists. */
.p-lower-mini-card-grid {
  display: grid;
  gap: 12px;
}

.p-lower-mini-card {
  padding: 17px 17px 18px;
  border: 1px solid rgba(21, 39, 61, 0.1);
  border-radius: 18px;
  background: rgba(255, 252, 245, 0.72);
  box-shadow: var(--shadow-paper-soft);
}

.p-lower-mini-card__title {
  margin: 0;
  color: var(--color-blue-niikappu);
  font-family: var(--font-ui);
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.5;
}

.p-lower-mini-card__text {
  margin: 8px 0 0;
  color: var(--color-ink-muted);
  font-family: var(--font-ui);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.72;
}

/* --------------------------------------------------------------------------
   07. Split / media layout
   -------------------------------------------------------------------------- */







/* --------------------------------------------------------------------------
   08. Flow
   -------------------------------------------------------------------------- */







/* --------------------------------------------------------------------------
   09. Tables / definition lists
   -------------------------------------------------------------------------- */











/* --------------------------------------------------------------------------
   10. Notes / warnings / safe text
   -------------------------------------------------------------------------- */

.p-lower-note {
  position: relative;
  padding: 19px 18px 20px;
  border: 1px solid rgba(182, 139, 22, 0.22);
  border-radius: 20px;
  color: var(--color-ink);
  background:
    radial-gradient(circle at 100% 0%, rgba(230, 184, 90, 0.16), transparent 210px),
    rgba(255, 250, 240, 0.86);
  box-shadow: var(--shadow-paper-soft);
}

.p-lower-note__title {
  margin: 0;
  color: var(--color-amber-deep);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: 0.04em;
}

.p-lower-note__text {
  margin: 8px 0 0;
  color: var(--color-ink-muted);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.74;
}

.p-lower-note__list {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding-left: 1.15em;
  color: var(--color-ink-muted);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  line-height: 1.72;
}

/* --------------------------------------------------------------------------
   11. FAQ
   -------------------------------------------------------------------------- */







/* details version */



/* --------------------------------------------------------------------------
   12. Related links
   -------------------------------------------------------------------------- */

.p-lower-related {
  padding: 66px var(--side-padding);
  background:
    radial-gradient(circle at 20% 0%, rgba(185, 199, 165, 0.18), transparent 260px),
    rgba(247, 239, 220, 0.62);
}

.p-lower-related__inner {
  width: min(var(--site-max), 100%);
  margin-inline: auto;
}

.p-lower-related__head {
  margin-bottom: 24px;
}

.p-lower-related__title {
  margin: 0;
  color: var(--color-blue-niikappu);
  font-family: var(--font-heading);
  font-size: clamp(1.44rem, 5.6vw, 2rem);
  font-weight: 700;
  line-height: 1.46;
  letter-spacing: var(--tracking-title);
}

.p-lower-related__text {
  margin: 12px 0 0;
  color: var(--color-ink-muted);
  font-family: var(--font-ui);
  font-size: 0.86rem;
  line-height: 1.76;
}

.p-lower-related__grid {
  display: grid;
  gap: 13px;
}

.p-lower-related__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
  padding: 16px 17px;
  border: 1px solid rgba(21, 39, 61, 0.12);
  border-radius: 18px;
  color: var(--color-blue-niikappu);
  background: rgba(255, 250, 240, 0.86);
  box-shadow: var(--shadow-paper-soft);
  text-decoration: none;
}

.p-lower-related__card-title {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: 0.035em;
}

.p-lower-related__card-text {
  display: block;
  margin-top: 4px;
  color: var(--color-ink-muted);
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.55;
}

.p-lower-related__card::after {
  content: "→";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--color-white-soft);
  background: var(--color-blue-niikappu);
  font-family: var(--font-label);
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   13. CTA
   -------------------------------------------------------------------------- */

.p-lower-cta {
  position: relative;
  overflow: hidden;
  padding: 74px var(--side-padding);
  color: var(--color-white-soft);
  background:
    radial-gradient(circle at 78% 8%, rgba(230, 184, 90, 0.22), transparent 340px),
    radial-gradient(circle at 4% 90%, rgba(185, 199, 165, 0.16), transparent 300px),
    linear-gradient(155deg, #15273d 0%, #1d3b31 100%);
}

.p-lower-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 250, 240, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 250, 240, 0.04) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, transparent 0%, black 20%, black 76%, transparent 100%);
}

.p-lower-cta__inner {
  position: relative;
  z-index: 1;
  width: min(900px, 100%);
  margin-inline: auto;
  text-align: center;
}

.p-lower-cta__kicker {
  margin: 0 0 16px;
  color: rgba(255, 250, 240, 0.78);
  font-family: var(--font-label);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.p-lower-cta__title {
  margin: 0;
  color: var(--color-white-soft);
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 7.8vw, 2.74rem);
  font-weight: 700;
  line-height: 1.44;
  letter-spacing: var(--tracking-title);
  text-shadow: var(--text-shadow-dark);
}

.p-lower-cta__text {
  margin: 20px 0 0;
  color: rgba(255, 250, 240, 0.84);
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 3.34vw, 1rem);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: var(--tracking-body);
}

.p-lower-cta__actions {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}

/* Lower buttons */
.p-lower-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 56px;
  padding: 15px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-button-pill);
  color: var(--color-blue-niikappu);
  background: var(--color-paper-card-strong);
  box-shadow: var(--shadow-button-soft);
  font-family: var(--font-ui);
  font-size: var(--type-button);
  font-weight: 800;
  line-height: 1.24;
  text-align: center;
  text-decoration: none;
  letter-spacing: var(--tracking-button);
  transition:
    transform 0.24s var(--ease-out-craft),
    box-shadow 0.24s var(--ease-out-craft),
    background-color 0.24s var(--ease-out-craft),
    border-color 0.24s var(--ease-out-craft);
}

.p-lower-button::after {
  content: "→";
  flex: 0 0 auto;
  font-family: var(--font-label);
  font-weight: 800;
  line-height: 1;
}

.p-lower-button--primary {
  color: var(--color-white-soft);
  background: var(--color-blue-niikappu);
  box-shadow: var(--shadow-button);
}

.p-lower-button--secondary {
  color: var(--color-blue-niikappu);
  background: var(--color-paper-card-strong);
  border-color: rgba(21, 39, 61, 0.16);
}

.p-lower-button--gold {
  color: #26170d;
  background: var(--color-amber);
  box-shadow: 0 14px 32px rgba(182, 139, 22, 0.28);
}

.p-lower-button--ghost {
  color: var(--color-white-soft);
  background: rgba(255, 250, 240, 0.08);
  border-color: rgba(255, 250, 240, 0.24);
}

@media (hover: hover) {
  .p-lower-button:hover,
  .p-lower-related__card:hover,
  .p-lower-card__link:hover,
  .p-lower-anchor__link:hover {
    transform: translateY(-2px);
  }

  .p-lower-button:hover,
  .p-lower-related__card:hover {
    box-shadow:
      0 16px 34px rgba(32, 29, 19, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
}

/* --------------------------------------------------------------------------
   14. Badges / tags
   -------------------------------------------------------------------------- */





/* --------------------------------------------------------------------------
   15. Utility for lower content
   -------------------------------------------------------------------------- */






/* --------------------------------------------------------------------------
   16. Small smartphone guard
   -------------------------------------------------------------------------- */

@media (max-width: 374px) {
  .p-lower-hero {
    padding-top: 108px;
  }

  .p-lower-hero__title {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }

  .p-lower-card,
  .p-lower-intro__inner {
    padding-inline: 18px;
  }

  .p-lower-button {
    padding-inline: 18px;
    font-size: 0.92rem;
  }
}

/* --------------------------------------------------------------------------
   17. Tablet / desktop
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .p-lower-page__inner,
  .p-lower-container {
    padding-inline: var(--side-padding);
  }

  .p-lower-hero {
    padding-top: 132px;
    padding-bottom: 76px;
  }

  .p-lower-hero__inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.72fr);
    align-items: center;
    gap: clamp(36px, 5vw, 76px);
  }

  .p-lower-hero__visual {
    min-height: 330px;
    border-radius: 32px;
  }

  .p-lower-hero__actions {
    width: min(620px, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-lower-anchor {
    margin-top: -26px;
  }

  .p-lower-anchor__inner {
    padding: 12px;
  }

  .p-lower-anchor__list {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
  }

  .p-lower-section {
    padding-block: clamp(90px, 10vw, 136px);
  }

  .p-lower-section--compact {
    padding-block: clamp(68px, 8vw, 96px);
  }

  .p-lower-section__head {
    width: min(760px, 100%);
    margin-bottom: 42px;
  }

  .p-lower-section__head--center {
    margin-inline: auto;
    text-align: center;
  }

  .p-lower-section__head--center .p-lower-kicker::after {
    margin-inline: auto;
  }




  .p-lower-card-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-lower-card-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .p-lower-card-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-lower-mini-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }









  .p-lower-related {
    padding-block: 86px;
  }

  .p-lower-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-lower-cta {
    padding-block: 96px;
  }

  .p-lower-cta__actions {
    width: min(700px, 100%);
    margin-inline: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-lower-cta__actions--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .p-lower-button {
    width: auto;
  }

}

@media (min-width: 1024px) {
  .p-lower-card-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .p-lower-mini-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

}

/* --------------------------------------------------------------------------
   18. Print guard for sales-document use
   -------------------------------------------------------------------------- */

@media print {
  .page-lower {
    background: #fff;
  }

  .page-lower .l-site-header,
  .page-lower .l-site-footer,
  .p-lower-anchor,
  .p-lower-cta__actions {
    display: none !important;
  }

  .p-lower-hero,
  .p-lower-section,
  .p-lower-intro,
  .p-lower-related,
  .p-lower-cta {
    padding: 24px 0 !important;
    background: #fff !important;
    color: #111 !important;
  }

  .p-lower-hero__inner,
  .p-lower-section__inner,
  .p-lower-intro__inner,
  .p-lower-related__inner,
  .p-lower-cta__inner {
    width: 100% !important;
    max-width: none !important;
  }

  .p-lower-card,
  .p-lower-mini-card,
  .p-lower-info-table,
  .p-lower-flow__item,
  .p-lower-faq__item,
  .p-lower-note {
    break-inside: avoid;
    box-shadow: none !important;
    background: #fff !important;
  }

  .p-lower-hero__title,
  .p-lower-section__title,
  .p-lower-cta__title {
    color: #111 !important;
    text-shadow: none !important;
  }
}