/*
 * 新規子ページ用のコンテンツ部品
 * 共通ヘッダー／フッター／予約CTAは top-pc.css と top-sp.css をそのまま利用する。
 * すべて .subpage-page に限定しているため、完成済みのトップ・technique には影響しない。
 */

/* top-pc.css の html { min-width: 1400px } は special-document と同じ手口で解除する
   (768-1399px幅で本文が縮まないまま画面全体が横スクロールしてしまうのを防ぐ)。 */
html.subpage-document { min-width: 0; }

.subpage-page {
  --subpage-ink: var(--top-ink, #2f2f2f);
  --subpage-paper: var(--top-paper, #f2f2f2);
  --subpage-panel: #fff;
  --subpage-muted: var(--top-gray, #9a9b9b);
  --subpage-accent: var(--top-gold, #b99a6a);
  --subpage-copy: #595959;
  --subpage-content-width: 1040px;
  --subpage-gutter: 80px;
  --subpage-section-space: 160px;
  /* .top-page is a fixed 1400px box; below that, shrink like special-page does. */
  width: min(1400px, 100%);
  min-width: 0;
  margin-inline: auto;
  background: var(--subpage-paper);
}

.subpage-page .subpage-main {
  display: block;
  width: 100%;
  min-height: 40vh;
  margin-bottom: 160px;
}

.subpage-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Hero: same fixed numbers as technique-page's .technique-hero /
   .technique-hero__mark (not the clamp()-based special-page version, which
   shrinks the available height at ~1280px and clips longer words like
   "Company"/"Recruit"/"Privacy"). Keep these two in sync by hand since they
   live in separate stylesheets for separate page classes. */
.subpage-page .subpage-hero {
  position: relative;
  width: var(--top-viewport-width);
  height: 458px;
  margin-left: calc(50% - 50vw);
}

.subpage-page .subpage-hero__image {
  display: block;
  width: 80.285714%;
  height: 100%;
  border-radius: 0 34px 34px 0;
  object-fit: cover;
  object-position: center 42%;
}

.subpage-page .subpage-hero__mark {
  position: absolute;
  z-index: 1;
  top: 92px;
  right: 15.428571%;
  color: var(--subpage-ink);
  font-family: var(--top-en);
  font-size: 96px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: .9;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

/* Narrower desktop range: same numbers as technique-page's own
   .technique-hero / .technique-hero__mark at this breakpoint. The real fix
   for long words ("Company"/"Recruit"/"Privacy") clipping wasn't the
   font-size -- it was that .subpage-hero had `overflow: hidden` and
   .technique-hero never did, so technique's own long word ("Technique")
   was always overflowing the hero box and painting past it into the next
   section, not actually staying inside it. Removed that overflow above so
   subpages behave the same way; keep these two rules in sync by hand since
   they live in separate stylesheets for separate page classes. */
@media (min-width: 768px) and (max-width: 1399px) {
  .subpage-page .subpage-hero {
    height: clamp(320px, 32.714vw, 458px);
  }

  .subpage-page .subpage-hero__mark {
    top: 20%;
    font-size: clamp(56px, 6.857vw, 96px);
  }

  .subpage-page .subpage-hero__mark {
    top: 20%;
  }
}

.subpage-page .subpage-hero-copy {
  width: 708px;
  margin-inline: auto;
  padding: 88px 0 74px;
}

.subpage-page .subpage-hero-copy h1 {
  margin: 0 0 36px;
  color: var(--subpage-ink);
  font-size: clamp(46px, 4.28vw, 60px);
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.38;
}

.subpage-page .subpage-hero-copy p {
  margin: 0;
  color: var(--subpage-copy);
  font-size: 17px;
  letter-spacing: .08em;
  line-height: 2.45;
}

/*
 * Quiet hero for information-oriented pages.
 * The large visual heroes remain available for primary service pages such as Price;
 * this modifier intentionally uses typography and whitespace only.
 */
.subpage-page--simple-hero .subpage-simple-hero {
  position: relative;
  isolation: isolate;
  width: var(--top-viewport-width);
  overflow: hidden;
  margin-left: calc(50% - 50vw);
  background: #e8e8e6;
}

.subpage-page--simple-hero .subpage-simple-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(calc(100% - 160px), var(--subpage-content-width));
  min-height: 500px;
  margin-inline: auto;
  padding: 154px 0 92px;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
}

/* Shared page-name treatment for the quiet, image-free subpage heroes. The
   wordmarks share one visual width and right-edge crop; each SVG viewBox
   scales longer page names down so they never run behind the lead copy. */
.subpage-page--simple-hero .subpage-simple-hero__mark {
  position: absolute;
  z-index: 0;
  right: -24px;
  bottom: -10px;
  display: block;
  width: clamp(590px, 48vw, 720px);
  height: auto;
  overflow: visible;
  pointer-events: none;
}

.subpage-page--simple-hero .subpage-simple-hero__mark text {
  fill: none;
  stroke: var(--top-ink);
  stroke-width: 1px;
  stroke-linecap: butt;
  stroke-dasharray: 8 6;
  font-family: var(--top-en);
  font-size: 218px;
  font-weight: 700;
  font-kerning: normal;
  font-feature-settings: 'kern' 1;
  letter-spacing: normal;
  vector-effect: non-scaling-stroke;
}

.subpage-page--simple-hero .subpage-simple-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 42px;
  color: #777;
  font-family: var(--top-en);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .34em;
  line-height: 1;
}

.subpage-page--simple-hero .subpage-simple-hero__eyebrow::after {
  width: 64px;
  height: 1px;
  background: #aaa;
  content: '';
}

.subpage-page--simple-hero .subpage-simple-hero__title {
  max-width: 780px;
  margin: 0;
  color: var(--subpage-ink);
  font-size: clamp(44px, 3.714vw, 52px);
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.45;
}

.subpage-page--simple-hero .subpage-simple-hero__copy {
  max-width: 640px;
  margin: 34px 0 0;
  color: var(--subpage-copy);
  font-size: 16px;
  letter-spacing: .06em;
  line-height: 2.1;
}

.subpage-page .subpage-eyebrow {
  margin: 0 0 12px;
  color: var(--subpage-muted);
  font-family: var(--top-en);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
}

.subpage-page .subpage-intro,
.subpage-page .subpage-section {
  width: min(calc(100% - (var(--subpage-gutter) * 2)), var(--subpage-content-width));
  margin: 0 auto;
}

.subpage-page .subpage-intro {
  padding: 116px 0 0;
  text-align: center;
}

/* X icon + English word above a heading, reused verbatim from special-page's
   .special-intro__heading / .special-eyebrow (cross.svg + gold label). */
.subpage-page .subpage-intro__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8.867px;
}

.subpage-page .subpage-intro__cross { display: block; flex: 0 0 8.711px; width: 8.711px; height: 21.157px; }

.subpage-page .subpage-intro__eyebrow {
  margin: 0;
  color: var(--subpage-accent);
  font-family: var(--top-en);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.2;
}

.subpage-page .subpage-intro__title,
.subpage-page .subpage-section__title {
  margin: 0;
  color: var(--subpage-ink);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.55;
}

.subpage-page .subpage-intro__title { margin-top: 30px; }

.subpage-page .subpage-intro__lead {
  max-width: 740px;
  margin: 28px auto 0;
  text-align: left;
  font-size: 16px;
  line-height: 2;
}

.subpage-page .subpage-section {
  padding: var(--subpage-section-space) 0 0;
}

.subpage-page .subpage-section__heading {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0 0 48px;
}

.subpage-page .subpage-section__lead {
  max-width: 740px;
  margin: -24px 0 32px;
  font-size: 15px;
  line-height: 2;
}

/* Editorial numeral mark: a light, oversized figure sitting inside an
   offset gold ring, trailed by the same hairline technique-page uses for
   its .technique-note__side-label -- one connected graphic, not a bullet. */
.subpage-page .subpage-section__number {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-right: 22px;
  color: var(--subpage-ink);
  font-family: var(--top-en);
  font-size: 26px;
  font-weight: 300;
  letter-spacing: .01em;
  line-height: 1;
}

.subpage-page .subpage-section__number::before {
  position: absolute;
  top: 6px;
  left: 16px;
  z-index: -1;
  width: 34px;
  height: 34px;
  border: 1px solid var(--subpage-accent);
  border-radius: 50%;
  content: '';
}

.subpage-page .subpage-section__number::after {
  position: absolute;
  top: 50%;
  left: calc(100% + 6px);
  width: 16px;
  height: 1px;
  background: var(--subpage-accent);
  content: '';
}

.subpage-page .subpage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.subpage-page .subpage-card {
  padding: 40px;
  border-radius: 18px;
  background: var(--subpage-panel);
}

.subpage-page .subpage-card > :first-child { margin-top: 0; }
.subpage-page .subpage-card > :last-child { margin-bottom: 0; }
.subpage-page .subpage-card__title { margin: 0 0 18px; font-size: 21px; line-height: 1.6; }
.subpage-page .subpage-card__copy { margin: 0; font-size: 15px; line-height: 2; }

.subpage-page .subpage-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}

/* Buttons sit centered under whatever content precedes them (fit-content +
   auto inline margins), whether that's a bare block parent or a flex row
   like .subpage-actions above. */
.subpage-page .subpage-button {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid var(--subpage-ink);
  border-radius: 999px;
  color: var(--subpage-ink);
  font-size: 15px;
  text-decoration: none;
}

.subpage-page .subpage-button:hover { opacity: .7; }
.subpage-page .subpage-button:focus-visible { outline: 2px solid var(--subpage-ink); outline-offset: 3px; }

/* Right-pointing chevron for buttons that navigate to another page, matching
   the finished top page's .top-button::after. Suppressed for buttons that
   already carry an external-link icon, or that only dial a phone number. */
.subpage-page .subpage-button::after { display: block; flex: 0 0 12px; width: 12px; height: 12px; margin-left: 10px; background-color: currentColor; content: ''; -webkit-mask: url('../svg/chevron-right.svg') center / contain no-repeat; mask: url('../svg/chevron-right.svg') center / contain no-repeat; transition: transform .2s ease; }
.subpage-page .subpage-button:hover::after { transform: translateX(4px); }
.subpage-page .subpage-button:has(.top-external-icon)::after,
.subpage-page .subpage-button[href^="tel:"]::after { content: none; }

/* Two-column media + text block: recruit message, salon photos, company profile. */
.subpage-page .subpage-split {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.subpage-page .subpage-split--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
.subpage-page .subpage-split--reverse .subpage-split__media { order: 2; }
.subpage-page .subpage-split__media img { display: block; width: 100%; height: auto; border-radius: 18px; object-fit: cover; }
.subpage-page .subpage-split__media--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.subpage-page .subpage-split__body > :first-child { margin-top: 0; }
.subpage-page .subpage-split__body > :last-child { margin-bottom: 0; }
.subpage-page .subpage-split__body p { margin: 20px 0 0; font-size: 15px; line-height: 2; }

/* Full-width 16:9 video block: recruit page work-scene video. */
.subpage-page .subpage-video { width: 100%; border-radius: 18px; overflow: hidden; background: #000; }
.subpage-page .subpage-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* Small rotated English word at a card's left edge, reused verbatim from
   technique-page's .technique-note__side-label (a gray vertical word + hairline). */
.subpage-page .subpage-card-label {
  position: absolute;
  z-index: 1;
  top: 36px;
  left: -7px;
  padding-top: 3px;
  color: #9b9b9b;
  font-family: var(--top-en);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1;
  text-orientation: mixed;
  writing-mode: vertical-rl;
}

.subpage-page .subpage-card-label::after {
  position: absolute;
  top: calc(100% + 8px);
  left: 2px;
  width: 1px;
  height: 64px;
  background: #bdbdbd;
  content: '';
}

/* Dot-pattern layer peeking out behind a photo, reused verbatim from
   technique-page's .technique-person__photo::after. */
.subpage-page .subpage-dot-media { position: relative; isolation: isolate; }

.subpage-page .subpage-dot-media::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 18px;
  background-image: radial-gradient(circle at 0.65px 0.65px, var(--subpage-ink) 0.65px, transparent 0.8px), radial-gradient(circle at 0.65px 0.65px, var(--subpage-ink) 0.65px, transparent 0.8px);
  background-position: 0 0, 6px 6px;
  background-size: 12px 12px;
  content: '';
  pointer-events: none;
  transform: translate(18px, 18px);
}

.subpage-page .subpage-dot-media img { position: relative; z-index: 1; }

/* Embedded Google Map, sized like the photo it replaces. */
.subpage-page .subpage-map { aspect-ratio: 3 / 2; }
.subpage-page .subpage-map iframe { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 0; border-radius: 18px; }
.subpage-page .subpage-article-card .subpage-dot-media { display: block; margin: 0 0 20px; }
.subpage-page .subpage-article-card .subpage-dot-media::after { border-radius: 14px; }
.subpage-page .subpage-article-card .subpage-dot-media img { margin: 0; }

/* dt/dd definition rows: recruit details, salon access, company profile.
   Each row is its own offset-border card (the same solid #c8c8c8 / -3px3px3px-3px
   treatment as .price-table-scroll and .top-price-table__border), stacked with
   a gap -- an evolution of the single-list-card version, one card per row
   instead of one card holding every row. z-index stays explicit, never
   negative (a negative z-index on this trick has hidden content before). */
.subpage-page .subpage-deflist { display: flex; flex-direction: column; gap: 16px; margin: 28px 0 0; }
.subpage-page .subpage-deflist > div { position: relative; z-index: 0; display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 24px; padding: 24px 32px; border-radius: 14px; background: #fff; }
.subpage-page .subpage-deflist > div::before { position: absolute; z-index: 1; inset: -3px 3px 3px -3px; border: 1px solid #c8c8c8; border-radius: 14px; content: ''; pointer-events: none; }
.subpage-page .subpage-deflist dt { position: relative; margin: 0; color: var(--subpage-accent); font-size: 14px; font-weight: 700; letter-spacing: .04em; text-align: center; }
.subpage-page .subpage-deflist dt::after { position: absolute; top: 50%; right: -12px; width: 1px; height: 28px; background: #ddd; content: ''; transform: translateY(-50%); }
.subpage-page .subpage-deflist dd { margin: 0; padding-left: 14px; font-size: 15px; line-height: 1.9; }
.subpage-page .subpage-deflist dd a { color: var(--subpage-ink); }

/* Bottom CTA cards: price, faq, company. */
.subpage-page .subpage-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.subpage-page .subpage-info-card { position: relative; padding: 40px; border-radius: 18px; background: var(--subpage-panel); }
.subpage-page .subpage-info-card--solo { max-width: 740px; margin: 48px auto 0; }
.subpage-page .subpage-info-card > :first-child { margin-top: 0; }
.subpage-page .subpage-info-card h2 { margin: 0 0 16px; font-size: 20px; font-weight: 500; line-height: 1.6; }
.subpage-page .subpage-info-card p { margin: 0; font-size: 15px; line-height: 1.95; }
.subpage-page .subpage-info-card .subpage-button { margin-top: 24px; }
.subpage-page .subpage-info-card .subpage-actions { margin-top: 24px; }
.subpage-page .subpage-info-card .subpage-actions .subpage-button { margin-top: 0; }

/* Closing info cards on company/faq/privacy: no fill, dashed outline
   instead, so this section reads as a lighter/quieter closing note rather
   than another set of solid panels. */
.subpage-page--company .subpage-info-card,
.subpage-page--faq .subpage-info-card,
.subpage-page--privacy .subpage-info-card {
  border: 1px dashed #c8c8c8;
  background: none;
}

/* Two same-row buttons whose arrows should line up regardless of label
   length: equal width + space-between so the arrow always sits at the same
   right edge, on both the side-by-side desktop row and the stacked mobile
   full-width rows. */
.subpage-page .subpage-actions--even .subpage-button { justify-content: space-between; }
@media (min-width: 768px) {
  .subpage-page .subpage-actions--even .subpage-button { width: 280px; }
}
.subpage-page .subpage-link-row { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; color: var(--subpage-ink); font-size: 15px; text-decoration: none; }
.subpage-page .subpage-link-row::after { content: '→'; }
.subpage-page .subpage-link-row:first-of-type { margin-top: 4px; }

/* Image + eyebrow + title article cards: topics teaser row, column list. */
.subpage-page .subpage-article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.subpage-page .subpage-article-grid--stack { grid-template-columns: 1fr; gap: 40px; }
/* Wide cards (image + text side by side) are full-width rows, not a 3-up
   grid -- without this the outer grid kept the base 3-column track and
   squeezed each card's own image+text columns down to nothing. */
.subpage-page .subpage-article-grid--wide { grid-template-columns: 1fr; gap: 56px; }
.subpage-page .subpage-article-card img { display: block; width: 100%; aspect-ratio: 3 / 2; margin: 0 0 20px; border-radius: 14px; object-fit: cover; }
.subpage-page .subpage-article-card .subpage-eyebrow { margin-top: 30px; font-size: 13px; }
.subpage-page .subpage-article-card h3 { margin: 10px 0 12px; font-size: 18px; font-weight: 500; line-height: 1.6; }
.subpage-page .subpage-article-card p { margin: 0 0 20px; font-size: 14px; line-height: 1.9; }
.subpage-page .subpage-article-card .subpage-button { min-height: 44px; padding: 0 24px; font-size: 14px; }

.subpage-page .subpage-article-grid--wide .subpage-article-card {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.subpage-page .subpage-article-grid--wide .subpage-article-card img { margin: 0; }
.subpage-page .subpage-article-grid--wide .subpage-article-card .subpage-dot-media { margin: 0; }

/* Pill-style action links: salon visit CTA. One merged pill split by a
   hairline, same white/bordered shape and icon-first layout as the finished
   top page's fixed reservation CTA (.top-fixed-cta). */
.subpage-page .subpage-pills { display: flex; width: fit-content; margin: 28px auto 0; border: 1px solid #e2e2e2; border-radius: 999px; background: #fff; overflow: hidden; }
.subpage-page .subpage-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 168px;
  min-height: 56px;
  padding: 0 32px;
  color: var(--subpage-ink);
  font-size: 15px;
  text-decoration: none;
}

.subpage-page .subpage-pill img { display: block; width: auto; height: 20px; }
.subpage-page .subpage-pill:last-child img { height: 17px; }
.subpage-page .subpage-pill + .subpage-pill::before { position: absolute; top: 50%; left: 0; width: 1px; height: 24px; background: #e2e2e2; content: ''; transform: translateY(-50%); }
.subpage-page .subpage-pill:hover { opacity: .72; }

/* Long-form policy text: privacy page. */
.subpage-page .subpage-policy { max-width: 740px; margin-inline: auto; }
.subpage-page .subpage-policy > p { margin: 0 0 24px; font-size: 15px; line-height: 2; }
.subpage-page .subpage-policy > h3 { margin: 40px 0 16px; font-size: 18px; font-weight: 500; line-height: 1.6; }
.subpage-page .subpage-policy > h3:first-child { margin-top: 0; }

@media (max-width: 767px), (min-width: 768px) and (max-width: 1366px) {
  .subpage-page {
    --subpage-gutter: var(--top-sp-content-pad, 20px);
    --subpage-section-space: 84px;
  }

  .subpage-page .subpage-main { margin-bottom: 88px; }

  .subpage-page .subpage-hero { position: relative; width: 100%; height: auto; min-height: 250px; margin-left: 0; padding-bottom: 28px; }

  .subpage-page .subpage-hero__image {
    display: block;
    width: 100%;
    height: 230px;
    border-radius: 0 0 18px 18px;
    object-fit: cover;
    object-position: center 42%;
  }

  .subpage-page .subpage-hero__mark {
    position: absolute;
    top: 75px;
    right: 16px;
    color: var(--subpage-ink);
    font-family: var(--top-en);
    font-size: 38px;
    font-weight: 600;
    line-height: .9;
    writing-mode: vertical-rl;
  }

  .subpage-page .subpage-hero-copy { width: min(100% - 48px, 580px); margin-inline: auto; padding: 52px 0 60px; }

  .subpage-page .subpage-hero-copy h1 {
    margin: 0 0 24px;
    color: var(--subpage-ink);
    font-size: clamp(27px, 8vw, 38px);
    font-weight: 500;
    letter-spacing: .07em;
    line-height: 1.45;
  }

  .subpage-page .subpage-hero-copy p {
    margin: 0;
    color: var(--subpage-copy);
    font-size: 14px;
    letter-spacing: .04em;
    line-height: 1.95;
  }

  .subpage-page .subpage-hero-copy p br { display: none; }

  .subpage-page--simple-hero .subpage-simple-hero { width: 100%; margin-left: 0; }

  .subpage-page--simple-hero .subpage-simple-hero__inner {
    width: calc(100% - 48px);
    min-height: 424px;
    padding: 126px 0 128px;
  }

  .subpage-page--simple-hero .subpage-simple-hero__mark {
    right: -16px;
    bottom: -8px;
    width: min(84vw, 350px);
  }

  .subpage-page--simple-hero .subpage-simple-hero__eyebrow {
    gap: 13px;
    margin-bottom: 30px;
    font-size: 12px;
    letter-spacing: .28em;
  }

  .subpage-page--simple-hero .subpage-simple-hero__eyebrow::after { width: 42px; }

  .subpage-page--simple-hero .subpage-simple-hero__title {
    font-size: clamp(29px, 8.8vw, 38px);
    letter-spacing: .06em;
    line-height: 1.48;
    overflow-wrap: anywhere;
  }

  .subpage-page--simple-hero .subpage-simple-hero__copy {
    margin-top: 24px;
    font-size: 14px;
    letter-spacing: .035em;
    line-height: 1.95;
  }

  .subpage-page--simple-hero .subpage-simple-hero__copy br { display: none; }

  .subpage-page .subpage-eyebrow { font-size: 13px; }
  .subpage-page .subpage-intro { padding-top: 72px; }
  .subpage-page .subpage-intro__title,
  .subpage-page .subpage-section__title { font-size: 26px; }
  .subpage-page .subpage-intro__lead { margin-top: 20px; font-size: 14px; line-height: 1.9; }
  .subpage-page .subpage-section__heading { gap: 18px; margin-bottom: 30px; }
  .subpage-page .subpage-section__number { width: 34px; height: 34px; margin-right: 14px; font-size: 19px; }
  .subpage-page .subpage-section__number::before { top: 4px; left: 12px; width: 25px; height: 25px; }
  .subpage-page .subpage-section__number::after { width: 10px; left: calc(100% + 4px); }
  .subpage-page .subpage-grid { grid-template-columns: 1fr; gap: 16px; }
  .subpage-page .subpage-card { padding: 26px 22px; border-radius: 14px; }
  .subpage-page .subpage-card__title { margin-bottom: 12px; font-size: 18px; }
  .subpage-page .subpage-card__copy { font-size: 14px; line-height: 1.9; }
  .subpage-page .subpage-actions { margin-top: 28px; }
  .subpage-page .subpage-button { width: 100%; min-height: 50px; }

  .subpage-page .subpage-split,
  .subpage-page .subpage-split--reverse { grid-template-columns: 1fr; gap: 24px; }
  .subpage-page .subpage-split--reverse .subpage-split__media { order: 0; }
  .subpage-page .subpage-split__media--pair { gap: 10px; }
  .subpage-page .subpage-split__body p { margin-top: 14px; font-size: 14px; line-height: 1.9; }

  .subpage-page .subpage-card-label { top: 24px; font-size: 12px; }
  .subpage-page .subpage-card-label::after { top: calc(100% + 6px); height: 32px; }

  .subpage-page .subpage-dot-media::after {
    background-image: radial-gradient(circle at 0.5px 0.5px, var(--subpage-ink) 0.5px, transparent 0.65px), radial-gradient(circle at 0.5px 0.5px, var(--subpage-ink) 0.5px, transparent 0.65px);
    background-position: 0 0, 4.5px 4.5px;
    background-size: 9px 9px;
    transform: translate(10px, 10px);
  }

  .subpage-page .subpage-deflist { gap: 12px; }
  .subpage-page .subpage-deflist > div { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 18px 20px; border-radius: 12px; }
  .subpage-page .subpage-deflist dt { font-size: 13px; }
  .subpage-page .subpage-deflist dt::after { right: -6px; height: 22px; }
  .subpage-page .subpage-deflist dd { padding-left: 10px; font-size: 14px; line-height: 1.85; }

  .subpage-page .subpage-info-grid { grid-template-columns: 1fr; gap: 16px; }
  .subpage-page .subpage-info-card { padding: 26px 22px; border-radius: 14px; }
  .subpage-page .subpage-info-card h2 { font-size: 18px; }
  .subpage-page .subpage-info-card p { font-size: 14px; line-height: 1.9; }

  .subpage-page .subpage-article-grid,
  .subpage-page .subpage-article-grid--wide .subpage-article-card { grid-template-columns: 1fr; }
  .subpage-page .subpage-article-grid { gap: 32px; }
  .subpage-page .subpage-article-grid--wide { gap: 32px; }
  .subpage-page .subpage-article-grid--wide .subpage-article-card { gap: 0; }
  .subpage-page .subpage-article-card img { margin-bottom: 16px; }
  .subpage-page .subpage-article-card h3 { font-size: 17px; }
  .subpage-page .subpage-article-card p { font-size: 14px; }

  .subpage-page .subpage-pills { width: 100%; margin-top: 22px; }
  .subpage-page .subpage-pill { flex: 1; min-width: 0; min-height: 50px; padding: 0 16px; }

  .subpage-page .subpage-policy > p { font-size: 14px; line-height: 1.9; }
  .subpage-page .subpage-policy > h3 { margin: 32px 0 14px; font-size: 16px; }
}