/* ============================================================
   Section system — one visual language for everything below the hero.

   The page grew in two halves: four rebuilt sections (.issues .cx .rm .pr) that
   share tokens and a backdrop, and four legacy blocks (.contactFlow .faq
   .company .contactLink) still carrying the old template's look — flat grey,
   a smaller centred heading with a rule under it, stock photos, orange tags.
   The seam at 料金プラン → お申し込みの流れ read as a different site.

   This file does three things and nothing else:
     1. puts every section on ONE canvas (the hero's backdrop image, held still)
        instead of eight separate backgrounds,
     2. gives the legacy blocks the same heading scale, card and accent tokens,
     3. tightens the vertical rhythm so no section runs much past one screen.

   Loaded last, so it wins at equal specificity. Keep it that way.
   ============================================================ */

.contents {
  --sec-ink: #1e2447;
  --sec-text: #3a4468;
  --sec-muted: #6d7cc0;
  --sec-accent: #3b5bf6;
  --sec-accent-deep: #2d46cf;

  /* Two surfaces, alternating — that alternation is the section separator, so
     there are no rules, washes or per-section backdrops anywhere below. */
  --surface-a: #ffffff;
  --surface-b: #f4f6fd;

  /* One card spec for the whole page. The page had been using five card tints
     (white at 1, .94, .9, .88 and .82), five radii and five shadows. */
  --sec-card: #ffffff;
  --sec-line: #e5eaf8;
  --sec-shadow: 0 8px 24px rgba(28, 42, 110, 0.06);
  --sec-radius: 16px;
  /* One tint for the small filled parts — pills, tabs, note strips. They were
     six near-identical translucent whites. */
  --sec-tint: #eef1fb;
  position: relative;
}

/* ============================================================
   1. Two surfaces, alternating
   ============================================================ */

.contents .issues,
.contents .rm,
.contents .contactFlow,
.contents .company,
.contents .contactLink { background: var(--surface-b); }

.contents .cx,
.contents .pr,
.contents .faq { background: var(--surface-a); }

/* These sections used to carry a copy of the hero backdrop. */
.contents .issues__bg,
.contents .cx__bg,
.contents .rm__bg,
.contents .pr__bg { display: none; }

/* One card spec, pushed into each section's own tokens: they declare
   --card/--line locally, so setting them on .contents would not reach. */
.contents .issues,
.contents .cx,
.contents .rm,
.contents .pr {
  --card: var(--sec-card);
  --card-line: var(--sec-line);
  --line: var(--sec-line);
}

.contents .issues-card,
.contents .issues__features,
.contents .cx-card,
.contents .rm-card,
.contents .pr-plan,
.contents .pr-sim,
.contents .contactFlow .step,
.contents .faq__item,
.contents .company__list {
  border-radius: var(--sec-radius);
  box-shadow: var(--sec-shadow);
}

.contents .pr-plan--pick {
  background: var(--sec-card);
  box-shadow: 0 14px 34px rgba(60, 90, 230, 0.16);
}

/* These two declare their own surface and shadow outside the token. */
.contents .pr-sim { background: var(--sec-card); }
.contents .faq__item { box-shadow: var(--sec-shadow); }

/* Phones keep the stacked "sheet" chapters, on the same two tones. */
@media (max-width: 767px) {
  .contents { background: var(--surface-b); }

  .contents .contactFlow,
  .contents .faq,
  .contents .company {
    position: relative;
    z-index: 5;
    margin-top: -22px;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -12px 30px rgba(20, 30, 90, 0.08);
  }

  .contents .cx { background: var(--surface-a); }
  .contents .rm { background: var(--surface-b); }
  .contents .pr { background: var(--surface-a); }
  .contents .contactFlow { background: var(--surface-b); }
  .contents .faq { z-index: 6; background: var(--surface-a); }
  .contents .company { z-index: 7; background: var(--surface-b); }
  .contents .contactLink { background: var(--surface-b); }
}

/* Legacy top margins left strips of bare canvas between the blocks; sections
   butt together and let their own padding do the spacing. */
.contents .contactFlow,
.contents .company,
.contents .contactLink { margin-top: 0; }

/* ============================================================
   2. Shared heading scale
   ============================================================ */

/* The legacy .heading block: drop the dotted rules and the bar under the title,
   and re-cut it as the eyebrow + title pair the rebuilt sections use. */
.contents .heading {
  margin: 0 auto;
  text-align: center;
}

.contents .heading__noteDecoration,
.contents .heading__separate { display: none; }

.contents .heading__textWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.contents .heading__note {
  display: block;
  margin: 0;
  color: var(--sec-muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.6;
}

.contents .heading__noteText { display: inline; }
.contents .heading__noteEmphasis { color: var(--sec-muted); font-size: inherit; font-weight: inherit; }
.contents .heading__noteEmphasis--deepBlue { color: var(--sec-accent); }

.contents .heading__text {
  margin: 0;
  color: var(--sec-ink);
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.38;
}

/* The 課題 section opened a full step larger than everything under it. */
.contents .issues__title { font-size: clamp(28px, 2.9vw, 44px); }

/* ============================================================
   3. お申し込みからの流れ — four steps, one screen
   ============================================================ */

.contents .contactFlow {
  padding: 56px 24px 60px;
  color: var(--sec-text);
}

.contents .contactFlow__note {
  margin: 14px 0 0;
  color: var(--sec-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
}

.contents .contactFlow__steps {
  max-width: 1280px;
  margin: 34px auto 0;
  padding: 0;
  list-style: none;
}

/* The stock photos, the STEP plate and the orange POINT tag belong to the old
   template. The words stay; only the frame changes. */
.contents .contactFlow .step__image,
.contents .contactFlow .step__pointImage,
.contents .contactFlow .step__arrow { display: none; }

.contents .contactFlow .step {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 24px 22px 22px;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius);
  background: var(--sec-card);
  box-shadow: var(--sec-shadow);
}

.contents .contactFlow .step__imageWrapper {
  display: block;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
}

.contents .contactFlow .step__numberWrapper {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: none;
}

.contents .contactFlow .step__numberPrefix {
  color: var(--sec-muted);
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
}

.contents .contactFlow .step__number {
  color: var(--sec-accent);
  font-family: "Inter", sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.contents .contactFlow .step__contents {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: auto;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
}

.contents .contactFlow .step__title {
  margin: 10px 0 0;
  color: var(--sec-ink);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.45;
}

.contents .contactFlow .step__detailWrapper { margin: 8px 0 0; }

.contents .contactFlow .step__detail {
  margin: 0;
  color: var(--sec-text);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.75;
}

.contents .contactFlow .step__detail + .step__detail { margin-top: 4px; }

.contents .contactFlow .step__point {
  display: block;
  margin: 14px 0 0;
  margin-top: auto;
  padding: 12px 14px;
  border: 0;
  border-left: 3px solid var(--sec-accent);
  border-radius: 0 10px 10px 0;
  background: var(--sec-tint);
}

.contents .contactFlow .step__pointContents { display: block; margin: 0; padding: 0; }

.contents .contactFlow .step__pointTitle {
  margin: 0;
  color: var(--sec-accent-deep);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

.contents .contactFlow .step__pointDetail {
  margin: 5px 0 0;
  color: var(--sec-text);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.7;
}

.contents .contactFlow .step__pointDetail br { display: none; }

@media (min-width: 1024px) {
  .contents .contactFlow__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  /* A chevron between the cards keeps the 4 steps reading as a sequence. */
  .contents .contactFlow .step + .step::before {
    position: absolute;
    top: 50%;
    left: -14px;
    color: rgba(123, 141, 220, 0.75);
    content: "›";
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    transform: translateY(-50%);
  }
}

@media (max-width: 1023px) {
  .contents .contactFlow__steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* Phones: the same vertical timeline the roadmap uses, not four stacked cards —
   four boxed steps ran over two screens on a 390px viewport. */
@media (max-width: 767px) {
  .contents .contactFlow { padding: 44px 18px 40px; }

  .contents .contactFlow__steps {
    position: relative;
    display: block;
    margin-top: 22px;
  }

  .contents .contactFlow__steps::before {
    position: absolute;
    top: 10px;
    bottom: 26px;
    left: 15px;
    width: 2px;
    background: linear-gradient(#9fb0f3, #c9d0ee);
    content: "";
  }

  .contents .contactFlow .step {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    padding: 0 0 20px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .contents .contactFlow .step:last-child { padding-bottom: 0; }

  .contents .contactFlow .step__imageWrapper { grid-row: span 2; }

  .contents .contactFlow .step__numberWrapper {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--sec-line);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(24, 38, 110, 0.1);
  }

  .contents .contactFlow .step__numberPrefix { display: none; }
  .contents .contactFlow .step__number { font-size: 15px; }

  .contents .contactFlow .step__title { margin: 5px 0 0; font-size: 16px; }
  .contents .contactFlow .step__detail { font-size: 13px; line-height: 1.7; }

  .contents .contactFlow .step__point {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 0 8px 8px 0;
  }

  .contents .contactFlow .step__pointTitle { font-size: 12.5px; }
  .contents .contactFlow .step__pointDetail { font-size: 12px; }
}

/* ============================================================
   4. よくあるご質問
   ============================================================ */

.contents .faq { padding: 56px 24px 60px; }

.contents .faq__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
  background: none;
}

.contents .faq__list {
  max-width: none;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.contents .faq__item {
  margin: 0;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius);
  background: var(--sec-card);
  box-shadow: var(--sec-shadow);
}

.contents .faq__itemRow--question {
  align-items: center;
  gap: 12px;
  padding: 18px 52px 18px 20px;
  color: var(--sec-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.contents .faq__itemRow--answer {
  gap: 12px;
  padding: 0 20px 18px;
  color: var(--sec-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.85;
}

.contents .faq__itemText { font-size: inherit; font-weight: inherit; line-height: inherit; }

/* Two columns so the eight questions stop pushing the page past a screen. */
@media (min-width: 1024px) {
  .contents .faq__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    align-items: start;
  }
}

@media (max-width: 1023px) {
  .contents .faq__item + .faq__item { margin-top: 12px; }
}

@media (max-width: 767px) {
  .contents .faq { padding: 44px 18px 40px; }
  .contents .faq__list { margin-top: 24px; }
  .contents .faq__itemRow--question { padding: 16px 44px 16px 16px; font-size: 14.5px; }
  .contents .faq__itemRow--answer { padding: 0 16px 16px; font-size: 13.5px; }
}

/* ============================================================
   5. 会社概要
   ============================================================ */

.contents .company { padding: 56px 24px 48px; }

.contents .company__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
}

.contents .company__list {
  margin: 32px 0 0;
  padding: 26px 30px;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius);
  background: var(--sec-card);
  box-shadow: var(--sec-shadow);
}

.contents .company__listItem {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid rgba(160, 175, 240, 0.28);
  /* The legacy dashed rule was drawn as a background image. */
  background-image: none;
}

.contents .company__listItem:last-child { border-bottom: 0; padding-bottom: 0; }
.contents .company__listItem:first-child { padding-top: 0; }

.contents .company__listItem dt {
  /* width:20% of the 160px column minus 40px of padding collapsed this to
     one character per line. */
  width: auto;
  max-width: none;
  padding: 0;
  color: var(--sec-accent-deep);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

.contents .company__listItem dd {
  margin: 0;
  padding: 0;
  color: var(--sec-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
}

.contents .company__listItem dd a { color: var(--sec-accent); text-decoration: underline; }
.contents .company__listItem dd ul { margin: 0; padding: 0; list-style: none; }
.contents .company__listItem dd ul li { font-size: 14px; line-height: 1.8; }

@media (max-width: 767px) {
  .contents .company { padding: 44px 18px 36px; }
  .contents .company__list { margin-top: 24px; padding: 18px 18px; }
  .contents .company__listItem { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
}

/* ============================================================
   6. Closing CTA
   ============================================================ */

.contents .contactLink { padding: 0 24px 64px; }

.contents .contactLink__induction {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
}

/* The clip-art couple and the animated arrow gif go; the band matches the
   Claude Code / Codex band in the 4つの武器 section. */
.contents .contactLink .induction__image,
.contents .contactLink .induction__animation,
.contents .contactLink .inductionSp__image { display: none; }

.contents .contactLink .induction,
.contents .contactLink .inductionSp {
  display: flex;
  max-width: none;
  height: auto;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 0;
  padding: 26px 32px;
  border: 0;
  border-radius: var(--sec-radius);
  background: linear-gradient(100deg, #3b5bf6, #5b46e0);
  box-shadow: 0 20px 44px rgba(45, 70, 207, 0.28);
  text-align: center;
}

.contents .contactLink .induction { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.contents .contactLink .induction:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 52px rgba(45, 70, 207, 0.34);
}

.contents .contactLink .induction__message,
.contents .contactLink .inductionSp__message {
  /* The legacy rule offset the text by 37% to clear the clip-art. */
  position: static;
  left: auto;
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
}

.contents .contactLink .induction__message::after {
  margin-left: 10px;
  content: "→";
  font-weight: 600;
}

.contents .contactLink .induction__messageEmphasis,
.contents .contactLink .inductionSp__messageEmphasis {
  color: #fff;
  font-size: inherit;
  font-weight: 800;
}

@media (max-width: 767px) {
  .contents .contactLink { padding: 0 18px 40px; }

  /* The phone variant was a sentence telling people to go and find the form.
     Show the tappable band instead — it opens the consultation modal. */
  .contents .contactLink__induction.onlyPc { display: block; }
  .contents .contactLink__induction--sp { display: none; }

  .contents .contactLink .induction { padding: 20px 20px; }
  .contents .contactLink .induction__message { font-size: 16px; }
}

/* ============================================================
   7. Phone: a standing CTA once the hero is past
   ============================================================ */

@media (max-width: 767px) {
  .floatingButton {
    background: linear-gradient(rgba(238, 241, 255, 0), rgba(238, 241, 255, 0.92) 42%);
  }

  /* index.css un-pins it on phones (position:static, always visible). Put it
     back on the viewport and hold it until the hero is past, so it never
     covers the hero's own buttons. */
  .floatingButton.onlySp {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  /* Keyed off our own attribute, not .isVisible: index.css ships a second
     toggler (mirror-assets/js/floating-button.js, imported by main.js) that
     sets .isVisible at 100px and registers after us, so it would win. */
  .floatingButton.onlySp[data-past-hero] { visibility: visible; opacity: 1; }

  .floatingButton__inner { padding: 20px 16px 14px; }

  .floatingButton .ctaButton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 54px;
    padding: 0 18px;
    border-radius: 14px;
    background: linear-gradient(100deg, #3b5bf6, #5b46e0);
    box-shadow: 0 14px 30px rgba(45, 70, 207, 0.32);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
  }

  /* Never over a modal or the pricing bottom sheet. */
  .is-sheet-open .floatingButton.onlySp[data-past-hero],
  .is-modal-open .floatingButton.onlySp[data-past-hero] { visibility: hidden; opacity: 0; }
}

/* ============================================================
   8. Density — one section, ~80% of a screen

   Measured at 1440x900 (80% = 720px) before this block:
   課題 878, 4つの武器 849, ロードマップ 785. Everything else already fit.
   Section padding and the head-to-body gaps are vh-aware so shorter laptops
   compress a further ~40px instead of overflowing.
   ============================================================ */

@media (min-width: 768px) {
  /* ---------- 課題 (878 → target 720) ---------- */
  .contents .issues { padding: clamp(24px, 3vh, 34px) 24px clamp(26px, 3.4vh, 38px); }
  .contents .issues__title { margin-top: 12px; font-size: clamp(28px, 2.4vw, 36px); }
  .contents .issues__lead { font-size: clamp(15px, 1.15vw, 17px); }
  .contents .issues__map { grid-template-rows: 158px 158px; gap: 24px 0; margin-top: 18px; }
  .contents .issues__features { margin-top: 18px; padding: 16px 36px; }
  .contents .issues__featureIcon { width: 64px; height: 64px; }
  .contents .issues__features li { gap: 24px; }

  /* ---------- 4つの武器 (849 → target 720) ---------- */
  .contents .cx { padding: clamp(20px, 2.6vh, 28px) 32px clamp(20px, 2.6vh, 26px); }
  .contents .cx-title { margin-top: 12px; font-size: clamp(28px, 2.5vw, 38px); }
  .contents .cx-lead { margin-top: 12px; line-height: 1.7; }
  .contents .cx-head__art { height: 196px; }
  .contents .cx-card { padding: 18px 22px 20px; }
  .contents .cx-card__title { margin-top: 14px; }
  .contents .cx-card__body { margin-top: 8px; min-height: 4.6em; }
  .contents .cx-m { height: 126px; margin-top: 12px; }
  .contents .cx-card__checks { gap: 6px; margin-top: 12px; }

  /* ---------- ロードマップ (785 → target 720) ---------- */
  .contents .rm { padding: clamp(20px, 2.6vh, 28px) 32px clamp(18px, 2.4vh, 24px); }
  .contents .rm-title { margin-top: 10px; font-size: clamp(28px, 2.4vw, 38px); }
  .contents .rm-head__side { padding-top: 26px; }
  .contents .rm-days { gap: 28px; margin-top: 18px; }
  .contents .rm-card { padding: 18px 22px 16px; }
  .contents .rm-band { margin-top: 18px; padding: 14px 26px; }

  /* ---------- 料金プラン, 流れ, FAQ, 会社概要 ---------- */
  .contents .pr { padding: clamp(18px, 2.4vh, 24px) 32px clamp(16px, 2.2vh, 22px); }
  .contents .contactFlow { padding: clamp(36px, 5vh, 52px) 24px clamp(38px, 5.4vh, 56px); }
  .contents .faq { padding: clamp(36px, 5vh, 52px) 24px clamp(38px, 5.4vh, 56px); }
  .contents .company { padding: clamp(36px, 5vh, 52px) 24px clamp(30px, 4vh, 44px); }
  .contents .contactLink { padding: 0 24px clamp(40px, 5.6vh, 60px); }
}

/* ---------- the small filled parts share one tint ---------- */
.contents .cx-pill,
.contents .rm-pill,
.contents .rm-tabs,
.contents .rm-tabs label,
.contents .rm-card__foot,
.contents .rm-m__tabs { background: var(--sec-tint); }

.contents .rm-tabs :is(input:checked + label, label.is-on) { background: inherit; }

/* ============================================================
   9. Density, second pass — the two sections still over 80%

   After pass 8: 4つの武器 839, ロードマップ 793 (80% of 900 = 720).
   The fixed-height mock panels inside the cards are NOT a lever: measured
   content is 138px (cx) and 112px (rm), and anything shorter clips a line of
   the demo. So the mocks are set to exactly their content height and the
   reduction comes from the card's own stack, the section head and the band.
   ============================================================ */

@media (min-width: 768px) {
  /* ---------- 4つの武器 ---------- */
  .contents .cx { padding: 12px 32px 14px; }
  .contents .cx-eyebrow { font-size: 16px; line-height: 1.25; }
  .contents .cx-title { margin-top: 8px; font-size: clamp(25px, 2.1vw, 32px); }
  .contents .cx-lead { margin-top: 10px; font-size: 13.5px; line-height: 1.6; }
  .contents .cx-head__art { height: 178px; }
  .contents .cx-card { padding: 14px 20px 12px; }
  .contents .cx-card__icon { width: 40px; height: 40px; }
  .contents .cx-card__icon svg { width: 22px; height: 22px; }
  .contents .cx-card__title { margin-top: 10px; font-size: clamp(17px, 1.34vw, 19px); }
  .contents .cx-card__body { margin-top: 6px; min-height: 4.2em; line-height: 1.6; }
  .contents .cx-m { height: 140px; margin-top: 8px; }
  .contents .cx-card__checks { gap: 5px; margin-top: 8px; }
  .contents .cx-card__checks li { font-size: 13px; line-height: 1.5; }
  .contents .cx-band { margin-top: 8px; padding-top: 9px; padding-bottom: 9px; }

  /* ---------- ロードマップ ---------- */
  .contents .rm { padding: 12px 32px 14px; }
  .contents .rm-title { font-size: clamp(26px, 2.2vw, 34px); }
  .contents .rm-head__side { padding-top: 10px; }
  .contents .rm-lead { line-height: 1.75; }
  .contents .rm-tabs { margin-top: 12px; }
  .contents .rm-days { gap: 26px; margin-top: 14px; }
  .contents .rm-card { padding: 14px 20px 12px; }
  .contents .rm-card__title { margin-top: 6px; }
  .contents .rm-card__body { margin-top: 4px; }
  .contents .rm-m { height: 114px; margin-top: 8px; }
  .contents .rm-card__checks { gap: 4px; margin-top: 8px; }
  .contents .rm-card__checks li { font-size: 13px; line-height: 1.5; }
  .contents .rm-card__foot { margin-top: 8px; padding-top: 6px; padding-bottom: 6px; }
  .contents .rm-band { margin-top: 12px; padding-top: 11px; padding-bottom: 11px; }
}

/* ---------- the roadmap band runs out of room below ~1400px ---------- */
@media (min-width: 768px) and (max-width: 1400px) {
  .contents .rm-band { gap: 16px; padding-left: 20px; padding-right: 20px; }
  .contents .rm-band__facts > div { padding: 0 16px; }
  .contents .rm-band__btn { padding-left: 16px; padding-right: 16px; font-size: 13px; }
}

/* ============================================================
   10. Short laptops

   The sections are ~690–735px tall, which is 0.55–0.81 of a 900px viewport
   but 0.88–0.95 on a 1366x768 screen. The mock panels cannot shrink without
   clipping, so the remaining give is in type, padding and the leads.
   ============================================================ */

@media (min-width: 768px) and (max-height: 820px) {
  .contents .issues { padding-top: 18px; padding-bottom: 20px; }
  .contents .issues__title { font-size: clamp(26px, 2.1vw, 32px); }
  .contents .issues__map { grid-template-rows: 146px 146px; gap: 18px 0; margin-top: 14px; }
  .contents .issues__features { margin-top: 14px; padding: 12px 32px; }
  .contents .issues__featureIcon { width: 54px; height: 54px; }

  .contents .cx { padding-top: 10px; padding-bottom: 12px; }
  .contents .cx-title { font-size: clamp(24px, 1.95vw, 29px); }
  .contents .cx-lead { margin-top: 8px; font-size: 13px; }
  .contents .cx-card__title { font-size: clamp(16px, 1.25vw, 18px); }
  .contents .cx-card__body { min-height: 0; font-size: 12.5px; }
  .contents .cx-band { margin-top: 6px; padding-top: 7px; padding-bottom: 7px; }

  .contents .rm { padding-top: 10px; padding-bottom: 12px; }
  .contents .rm-title { font-size: clamp(24px, 1.95vw, 29px); }
  .contents .rm-lead { font-size: 13px; line-height: 1.7; }
  .contents .rm-days { gap: 20px; margin-top: 10px; }
  .contents .rm-card__body { font-size: 12px; }
  .contents .rm-band { margin-top: 8px; padding-top: 7px; padding-bottom: 7px; }

  .contents .pr { padding-top: 12px; padding-bottom: 14px; }
  .contents .contactFlow,
  .contents .faq,
  .contents .company { padding-top: 32px; padding-bottom: 34px; }
}