@charset "UTF-8";
/* ==========================================================================
   components.css
   全ページで再利用する共通パーツ
   （ボタン / 画像枠 / カード / リスト / テーブル / フォーム など）
   ========================================================================== */

/* --------------------------------------------------------------------------
   BUTTON
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 52px;
  padding: 0.9em 2.2em;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.button:hover { transform: translateY(-1px); }

.button--primary {
  background-color: var(--color-btn-bg);
  border-color: var(--color-btn-bg);
  color: var(--color-btn-text);
}
.button--primary:hover {
  background-color: var(--color-btn-bg-hover);
  border-color: var(--color-btn-bg-hover);
}

.button--outline {
  background-color: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-strong);
}
.button--outline:hover {
  border-color: var(--color-text-strong);
  background-color: #fff;
}

.button--invert {
  background-color: #fff;
  border-color: #fff;
  color: var(--color-text-strong);
}
.button--invert:hover { background-color: var(--color-accent-soft); }

.button--lg   { min-height: 60px; padding-inline: 2.8em; font-size: var(--fs-body); }
.button--full { width: 100%; }

.button__arrow { font-family: var(--font-en); }

/* テキストリンク（矢印つき） */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-small);
  color: var(--color-accent-dark);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.link-arrow:hover { color: var(--color-text-strong); }

/* ボタンの並び */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.button-group--center { justify-content: center; }

/* --------------------------------------------------------------------------
   FIGURE ─ 画像エリア
   ※ 写真差し替え時は <img> の src / alt を入れ替えるだけでOK。
     縦横比はクラス（--16x9 など）で指定しています。
   -------------------------------------------------------------------------- */
.figure {
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-base-subtle);
}
.figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.figure--16x9 { aspect-ratio: 16 / 9; }
.figure--3x2  { aspect-ratio: 3 / 2; }
.figure--4x3  { aspect-ratio: 4 / 3; }
.figure--1x1  { aspect-ratio: 1 / 1; }
.figure--3x4  { aspect-ratio: 3 / 4; }
.figure--4x5  { aspect-ratio: 4 / 5; }

.figure__caption {
  margin-top: var(--space-2xs);
  font-size: var(--fs-xsmall);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   MEDIA ─ 画像＋テキストの2カラム
   -------------------------------------------------------------------------- */
.media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.media--reverse .media__figure { order: 2; }
.media--narrow-text { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

.media__body > * + * { margin-top: var(--space-md); }
.media__title { font-size: var(--fs-h3); letter-spacing: 0.10em; }

/* --------------------------------------------------------------------------
   CARD ─ 汎用カード（サービス紹介など）
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
}
.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition),
              transform var(--transition);
}
.card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card__figure { border-radius: 0; }
.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md) var(--space-md);
}
.card__title { font-size: var(--fs-h4); letter-spacing: 0.10em; }
.card__text {
  flex: 1;
  font-size: var(--fs-small);
  color: var(--color-text);
}
.card__foot { padding-top: var(--space-2xs); }

/* --------------------------------------------------------------------------
   WORRY LIST ─ 「こんなお悩み、ありませんか？」
   -------------------------------------------------------------------------- */
.worry-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--space-sm);
}
.worry-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-lead);
  color: var(--color-text-strong);
}
/* 「鍵盤のタッチに違和感がある」だけがカード幅の境界ぎりぎりで2行に折り返すため、
   このカードだけ字間をごくわずかに詰めて1行に収める（他カードは変更しない）。 */
.worry-list__item:nth-child(3) {
  letter-spacing: 0.2px;
}
.worry-list__item::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.7em;
  border-radius: 50%;
  background-color: var(--color-accent);
}

/* 補足メッセージ（悩みセクションの締め） */
.note-box {
  max-width: 50rem;
  margin: var(--space-xl) auto 0;
  padding: var(--space-lg);
  background-color: var(--color-base);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: var(--fs-lead);
  color: var(--color-text-strong);
}

/* --------------------------------------------------------------------------
   REASON ─ 「選ばれる3つの理由」
   -------------------------------------------------------------------------- */
.reason-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
}
.reason {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.reason__figure { border-radius: var(--radius-md); }
.reason__num {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  line-height: 1;
}
.reason__num::after {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  margin-top: var(--space-xs);
  background-color: var(--color-border-strong);
}
.reason__title { font-size: var(--fs-h4); letter-spacing: 0.10em; }
.reason__text { font-size: var(--fs-small); }

/* --------------------------------------------------------------------------
   FLOW ─ ご依頼の流れ
   -------------------------------------------------------------------------- */
.flow {
  display: flex;
  flex-direction: column;
  counter-reset: flow;
}
.flow__item {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-border);
}
.flow__item:last-child { border-bottom: 1px solid var(--color-border); }
.flow__num {
  font-family: var(--font-en);
  font-size: 1.375rem;
  color: var(--color-accent);
  letter-spacing: 0.06em;
}
.flow__title {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-2xs);
  letter-spacing: 0.10em;
}
.flow__text {
  font-size: var(--fs-small);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   STEP LIST / 箇条書きの基本形
   -------------------------------------------------------------------------- */
.list-check {
  display: grid;
  gap: var(--space-xs);
}
.list-check li {
  position: relative;
  padding-left: 1.75em;
  font-size: var(--fs-body);
}
.list-check li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.72em;
  width: 0.5em;
  height: 0.9em;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(40deg);
}

.list-dot { display: grid; gap: var(--space-2xs); }
.list-dot li {
  position: relative;
  padding-left: 1.1em;
}
.list-dot li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background-color: var(--color-border-strong);
}

/* --------------------------------------------------------------------------
   DEFINITION BLOCK ─ 用語や作業内容の説明
   -------------------------------------------------------------------------- */
.def-list {
  display: grid;
  gap: var(--space-lg);
}
.def-list__item {
  padding: var(--space-lg);
  background-color: var(--color-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.def-list__term {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  color: var(--color-text-strong);
  letter-spacing: 0.10em;
}
.def-list__term-en {
  font-family: var(--font-en);
  font-size: var(--fs-xsmall);
  letter-spacing: var(--ls-wide);
  color: var(--color-text-muted);
  text-transform: uppercase;
}
.def-list__desc { font-size: var(--fs-small); }

/* --------------------------------------------------------------------------
   TABLE ─ 料金表など
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }

.table {
  min-width: 34rem;
  font-size: var(--fs-small);
  background-color: var(--color-base);
}
.table th,
.table td {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.table thead th {
  background-color: var(--color-base-subtle);
  border-bottom: 1px solid var(--color-border-strong);
  font-weight: 500;
  font-size: var(--fs-xsmall);
  letter-spacing: 0.08em;
  color: var(--color-text-strong);
}
.table tbody th {
  width: 34%;
  font-weight: 500;
  color: var(--color-text-strong);
}
.table td.is-price {
  white-space: nowrap;
  font-family: var(--font-en);
  font-size: var(--fs-body);
  color: var(--color-text-strong);
}
.table .is-tbd {
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
}

/* 準備中プレースホルダー（料金確定後に差し替え） */
.placeholder-box {
  padding: clamp(2rem, 4vw, 3.5rem);
  background-color: var(--color-base);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--color-text-muted);
}
.placeholder-box__title {
  margin-bottom: var(--space-2xs);
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  color: var(--color-text-strong);
}

/* --------------------------------------------------------------------------
   FAQ ─ details / summary で開閉（JS不要）
   -------------------------------------------------------------------------- */
.faq {
  display: grid;
  gap: var(--space-sm);
}
.faq__item {
  background-color: var(--color-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.faq__item[open] { border-color: var(--color-border-strong); }
.faq__q {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  color: var(--color-text-strong);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before {
  content: "Q";
  flex: none;
  font-family: var(--font-en);
  color: var(--color-accent);
}
.faq__q::after {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  margin-left: auto;
  margin-top: 0.6em;
  border-right: 1px solid var(--color-text-muted);
  border-bottom: 1px solid var(--color-text-muted);
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }
.faq__a {
  display: flex;
  gap: var(--space-sm);
  padding: 0 var(--space-lg) var(--space-md);
  font-size: var(--fs-small);
}
.faq__a::before {
  content: "A";
  flex: none;
  font-family: var(--font-en);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   CTA ─ お問い合わせ誘導帯
   -------------------------------------------------------------------------- */
.cta {
  background-color: var(--color-base-deep);
  color: var(--color-text-invert);
}
.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  text-align: center;
}
.cta__title {
  font-size: var(--fs-h2);
  color: #fff;
}
/* 「まずは、気になることから。」の指定箇所だけのカーニング */
.cta__title-plus { letter-spacing: 1.4px; }  /* 「ず→は」1.0px→1.4px（今回は対象外・変更なし） */
.cta__title-plus-ni { letter-spacing: 1.9px; } /* 「気→に」1.4px→1.9px（+0.5px、広げる） */
.cta__title-minus { letter-spacing: 0.2px; } /* 「は→、」-0.3px→0.2px（+0.5px、広げる） */
.cta__title-comma { letter-spacing: -5.5px; }   /* 「、」の直後 -3.9px→-5.5px（さらに詰める） */
.cta__text {
  max-width: 38rem;
  color: rgba(242, 242, 240, 0.82);
  /* 説明文全体の字間を明確に広げ、窮屈さをなくす */
  letter-spacing: 0.09em;
}
.cta__text-comma { letter-spacing: -1px; } /* 「、」の直後 0px→-1px */
/* 漢字の前後は物理的な間隔はひらがなと同じでも、画数が多く視覚的に詰まって見えるため、
   該当6箇所だけひらがなと同程度に見えるよう最小限広げている（文章全体には適用していない）。 */
.cta__kern-jo { margin-right: 1.2px; }    /* 「状→態」 */
.cta__kern-kaku { margin-right: 1.2px; }  /* 「確→認」 */
.cta__kern-hitsu { margin-right: 1.2px; } /* 「必→要」 */
.cta__kern-saku { margin-right: 1.2px; }  /* 「作→業」 */
.cta__kern-bun { margin-right: 1.2px; }   /* 「分→か」 */
.cta__kern-den { margin-right: 1.2px; }   /* 「伝→え」 */
/* PC版のみ、指定2行構成にするための改行。スマホでは非表示にして現状の折り返しを維持する。 */
.cta__text-break-pc { display: inline; }
@media (max-width: 600px) {
  .cta__text-break-pc { display: none; }
  /* PC専用の漢字周辺カーニング（状態/確認/必要/作業/分か/伝え）はスマホには反映しない */
  .cta__kern-jo,
  .cta__kern-kaku,
  .cta__kern-hitsu,
  .cta__kern-saku,
  .cta__kern-bun,
  .cta__kern-den {
    margin-right: 0;
  }
  /* 今回のフッターカーニング調整はスマホ版TOPのみが対象のため、
     スマホ版の下層ページ（body.page-homeを持たないページ）は変更前の値に固定する。 */
  body:not(.page-home) .cta__title-plus { letter-spacing: 0.6px; }
  body:not(.page-home) .cta__title-plus-ni { letter-spacing: 0.6px; }
  body:not(.page-home) .cta__title-minus { letter-spacing: -0.7px; }
  body:not(.page-home) .cta__title-comma { letter-spacing: -5px; } /* 「、→気」-1px→-5px（さらに詰める） */
  /* TOPページの「、→気」も同様にさらに詰める（PC専用の-5.5pxとは別に、スマホ専用の値を追加） */
  body.page-home .cta__title-comma { letter-spacing: -6.5px; }
  /* TOPページのスマホ版のみ：「まずは、気になることから。」を1行に収めるため
     font-sizeだけ最小限下げる。下層ページのフッターは影響を受けない。 */
  body.page-home .cta__title { font-size: 25px; } /* 26px→25px */
  /* フッター説明文の字間は全ページ共通で明確に広げる（3行を維持できる範囲で確認済み）。 */
  .cta__text { letter-spacing: 2.2px; }
}
.cta__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-md) var(--space-xl);
  margin-top: var(--space-sm);
}
.cta__tel {
  font-family: var(--font-en);
  font-size: 1.75rem;
  letter-spacing: 0.05em;
  color: #fff;
}
.cta__note {
  font-size: var(--fs-xsmall);
  color: rgba(242, 242, 240, 0.6);
}

/* --------------------------------------------------------------------------
   FORM ─ お問い合わせフォーム
   -------------------------------------------------------------------------- */
.form {
  display: grid;
  gap: var(--space-lg);
}
.form__row {
  display: grid;
  gap: var(--space-2xs);
}
.form__row--2col {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-lg);
}
.form__label {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-text-strong);
}
.form__required {
  padding: 0.1em 0.6em;
  border-radius: 999px;
  background-color: var(--color-accent-soft);
  color: var(--color-accent-dark);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}
.form__optional {
  padding: 0.1em 0.6em;
  border-radius: 999px;
  background-color: var(--color-base-subtle);
  color: var(--color-text-muted);
  font-size: 0.6875rem;
}
.form__hint {
  font-size: var(--fs-xsmall);
  color: var(--color-text-muted);
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: 0.85em 1em;
  background-color: var(--color-base);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  line-height: 1.7;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(141, 124, 96, 0.14);
}
.form__textarea { min-height: 11rem; resize: vertical; }
.form__select { appearance: none; background-image: none; }

.form__radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
}
.form__choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-size: var(--fs-small);
  cursor: pointer;
}
.form__choice input { margin-top: 0.45em; accent-color: var(--color-accent); }

.form__privacy {
  padding: var(--space-md);
  background-color: var(--color-base-subtle);
  border-radius: var(--radius-md);
  text-align: center;
}
.form__submit { justify-content: center; }

/* --------------------------------------------------------------------------
   ASSOC ─ 所属バッジ（社団法人日本ピアノ調律師協会 会員）
   信頼性を示す要素として、控えめな枠線のバッジで表示します。
   -------------------------------------------------------------------------- */
.assoc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.55em 1.2em;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background-color: var(--color-base);
  font-size: var(--fs-xsmall);
  letter-spacing: 0.08em;
  color: var(--color-text-strong);
  white-space: nowrap;
}
.assoc::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
}
/* 濃色背景の上に置く場合 */
.assoc--invert {
  background-color: transparent;
  border-color: rgba(242, 242, 240, 0.28);
  color: rgba(242, 242, 240, 0.86);
}
/* 枠線なし（本文中に添える場合） */
.assoc--plain {
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   TEL FORMAT ─ 電話・FAX番号のカーニング（ヘッダー・フッター共通）
   全角カッコの前後に生まれる間延びだけを詰め、番号全体はわずかに広げる。
   例）090<span class="tel-format__open">（</span>2758<span class="tel-format__close">）</span>9356
   -------------------------------------------------------------------------- */
.tel-format {
  letter-spacing: 0.5px; /* 番号全体 */
}
.tel-format__open { margin-left: -3px; }  /* 「（」の直前を詰める（1440pxで視覚確認のうえ決定） */
.tel-format__close { margin-right: -3px; } /* 「）」の直後を詰める（1440pxで視覚確認のうえ決定） */

/* --------------------------------------------------------------------------
   BRAND LIST ─ 対応メーカー
   -------------------------------------------------------------------------- */
.brand-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-border);
  overflow: hidden;
}
.brand-list__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-lg) var(--space-md);
  background-color: var(--color-base);
  text-align: center;
}
.brand-list__name {
  font-family: var(--font-en);
  font-size: 1.125rem;
  letter-spacing: 0.16em;
  color: var(--color-text-strong);
}
.brand-list__note {
  font-size: var(--fs-xsmall);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   CONTACT LIST ─ 住所・電話番号など
   ※ 電話番号は tel: リンクにしているため、スマートフォンではタップで発信できます。
   -------------------------------------------------------------------------- */
.contact-list {
  display: grid;
  gap: var(--space-md);
}
.contact-list__label {
  display: block;
  margin-bottom: 0.2em;
  font-size: var(--fs-xsmall);
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}
.contact-list__value {
  font-size: var(--fs-small);
  color: var(--color-text-strong);
}
.contact-list__tel {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  color: var(--color-text-strong);
}
a.contact-list__tel:hover { color: var(--color-accent-dark); }

/* --------------------------------------------------------------------------
   INFO PANEL ─ 電話・営業時間など
   -------------------------------------------------------------------------- */
.info-panel {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--color-base-subtle);
  border-radius: var(--radius-md);
}
.info-panel__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  color: var(--color-text-strong);
  letter-spacing: 0.10em;
}
.info-panel__tel {
  font-family: var(--font-en);
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  color: var(--color-text-strong);
}
.info-panel__dl { font-size: var(--fs-small); }
.info-panel__dl dt {
  margin-top: var(--space-sm);
  font-size: var(--fs-xsmall);
  color: var(--color-text-muted);
}
.info-panel__dl dt:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   RESPONSIVE（将来のスマホ対応の受け皿）
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .media { grid-template-columns: 1fr; }
  .media--reverse .media__figure { order: 0; }
}

@media (max-width: 600px) {
  .flow__item { grid-template-columns: 1fr; gap: var(--space-xs); }
  .table th, .table td { padding: var(--space-sm) var(--space-md); }
  .button { width: 100%; }
}