/*
 * 理念を、日常の判断材料に。 - ページ専用CSS
 * WordPress側の設定手順:
 *   メディア → 新しいメディアファイルを追加 でこのファイルをアップロードし、
 *   対象固定ページの「ページ設定 → このページで読み込むCSS」で選択してください。
 */

/* 見出し用の明朝体（本文は端末の日本語フォントを使用し、外部依存を最小化） */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;600;700&display=swap');

  :root {
    color-scheme: light;

    /* ---- neutrals (cool, blue-biased) ---- */
    --paper: #f4f6f9;
    --paper-raised: #ffffff;
    --paper-sunken: #eaeef4;
    --line: #dde3ec;
    --line-strong: #c7d0dd;
    --ink: #141b29;
    --ink-soft: #4b5468;
    --ink-faint: #7b869b;

    /* ---- brand: 理解側面 = blue ---- */
    --blue-deep: #1c3a5e;
    --blue: #2f5d8a;
    --blue-mid: #4c7dad;
    --blue-soft: #e6edf6;
    --blue-soft-line: #cddaea;

    /* ---- brand: キャズム / bridge = amber ---- */
    --amber: #c98a34;
    --amber-deep: #9c6a24;
    --amber-soft: #faf0dc;

    /* ---- brand: 行動側面 = orange ---- */
    --orange-deep: #a85326;
    --orange: #c1622d;
    --orange-mid: #d68556;
    --orange-soft: #f7e9de;
    --orange-soft-line: #eccdb2;

    /* ---- accent: 補助 = green (checks / positive) ---- */
    --green: #43765a;
    --green-soft: #e4eee8;

    --shadow-1: 0 1px 2px rgba(20, 27, 41, 0.06);
    --shadow-2: 0 8px 24px rgba(20, 27, 41, 0.08);
    --radius: 14px;

    --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
      "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --paper: #10141c;
      --paper-raised: #171d29;
      --paper-sunken: #0c0f16;
      --line: #2a3244;
      --line-strong: #3a4459;
      --ink: #edf0f6;
      --ink-soft: #b7bfd1;
      --ink-faint: #7f8aa2;

      --blue-deep: #bcd4ea;
      --blue: #8fb6da;
      --blue-mid: #6f9fcb;
      --blue-soft: #16243a;
      --blue-soft-line: #274468;

      --amber: #e3ac57;
      --amber-deep: #f0c37e;
      --amber-soft: #2b2214;

      --orange-deep: #f0a87b;
      --orange: #e08a55;
      --orange-mid: #eaa677;
      --orange-soft: #2c1d13;
      --orange-soft-line: #4a3220;

      --green: #86b79b;
      --green-soft: #16261e;

      --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
      --shadow-2: 0 12px 30px rgba(0, 0, 0, 0.45);
    }
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #10141c;
    --paper-raised: #171d29;
    --paper-sunken: #0c0f16;
    --line: #2a3244;
    --line-strong: #3a4459;
    --ink: #edf0f6;
    --ink-soft: #b7bfd1;
    --ink-faint: #7f8aa2;

    --blue-deep: #bcd4ea;
    --blue: #8fb6da;
    --blue-mid: #6f9fcb;
    --blue-soft: #16243a;
    --blue-soft-line: #274468;

    --amber: #e3ac57;
    --amber-deep: #f0c37e;
    --amber-soft: #2b2214;

    --orange-deep: #f0a87b;
    --orange: #e08a55;
    --orange-mid: #eaa677;
    --orange-soft: #2c1d13;
    --orange-soft-line: #4a3220;

    --green: #86b79b;
    --green-soft: #16261e;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 12px 30px rgba(0, 0, 0, 0.45);
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.85;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  img, svg { max-width: 100%; display: block; }

  a { color: inherit; }

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

  :focus-visible {
    outline: 2px solid var(--blue-mid);
    outline-offset: 3px;
    border-radius: 4px;
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 600;
    line-height: 1.5;
    text-wrap: balance;
    margin: 0;
  }

  p { margin: 0; }

  .measure { max-width: 38em; }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--blue-mid);
    margin-bottom: 1.1rem;
  }
  .eyebrow::before {
    content: "";
    width: 1.6em;
    height: 1px;
    background: var(--blue-mid);
  }
  .eyebrow.is-orange { color: var(--orange); }
  .eyebrow.is-orange::before { background: var(--orange); }

  /* ---------------- layout shell ---------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: block;
  background: rgba(246,244,236,.88);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  gap: 16px;
}

.topbar__brand {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: .04em;
}

.topbar__brand span {
  color: var(--amber-deep);
}

.topbar__brand small {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: .12em;
}

.topbar__breadcrumb {
  display: none;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.topbar__breadcrumb a {
  text-decoration: none;
}

.topbar__breadcrumb a:hover {
  color: var(--amber-deep);
}

@media (min-width: 760px) {
  .topbar__breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
  }
}

.topbar .btn {
  padding: 10px 20px;
  font-size: 14px;
}

  main { display: block; }

  section {
    padding: clamp(3.4rem, 8vw, 6.4rem) clamp(1.1rem, 4vw, 2.6rem);
    border-bottom: 1px solid var(--line);
  }
  section > .inner,
  header.hero > .inner {
    max-width: 980px;
    margin: 0 auto;
  }
  .bg-sunken { background: var(--paper-sunken); }
  .bg-raised { background: var(--paper-raised); }

  /* ---------------- buttons ---------------- */

  .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 2.1rem;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.85em 1.6em;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    white-space: nowrap;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn-primary {
    background: var(--blue-deep);
    color: #fdfefe;
    box-shadow: var(--shadow-2);
  }
  .btn-primary:hover { background: var(--blue); }
  .btn-ghost {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--ink);
  }
  .btn-ghost:hover { border-color: var(--blue-mid); color: var(--blue-deep); }

  @media (prefers-reduced-motion: reduce) {
    .btn { transition: none; }
    .btn:hover { transform: none; }
  }

  /* ---------------- hero ---------------- */

  .hero {
    padding: clamp(3.2rem, 9vw, 6rem) clamp(1.1rem, 4vw, 2.6rem) clamp(3.4rem, 8vw, 6.4rem);
    border-bottom: none;
  }
  .hero .inner {
    display: grid;
    gap: 3rem;
  }
  .hero h1 {
    font-size: clamp(2.1rem, 5.4vw, 3.4rem);
    letter-spacing: 0.01em;
  }
  .hero h1 em {
    font-style: normal;
    color: var(--ink-faint);
    font-size: 0.62em;
    display: block;
    margin-bottom: 0.5rem;
  }
  .hero__lead {
    margin-top: 1.6rem;
    font-size: 1.06rem;
    color: var(--ink-soft);
  }
  .hero__note {
    margin-top: 1.1rem;
    font-size: 0.94rem;
    color: var(--ink-faint);
    max-width: 34em;
  }

  /* ---- bridge motif (reused across sections) ---- */
  .bridge {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(0.6rem, 3vw, 1.6rem);
  }
  .bridge__side {
    border-radius: var(--radius);
    padding: 1.5rem 1.4rem;
    border: 1px solid;
  }
  .bridge__side--blue {
    background: var(--blue-soft);
    border-color: var(--blue-soft-line);
  }
  .bridge__side--orange {
    background: var(--orange-soft);
    border-color: var(--orange-soft-line);
  }
  .bridge__label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
  }
  .bridge__side--blue .bridge__label { color: var(--blue-deep); }
  .bridge__side--orange .bridge__label { color: var(--orange-deep); }
  .bridge__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
    font-size: 0.92rem;
    color: var(--ink-soft);
  }
  .bridge__list li { padding-left: 1.1em; position: relative; }
  .bridge__side--blue .bridge__list li::before {
    content: "";
    position: absolute; left: 0; top: 0.62em;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--blue-mid);
  }
  .bridge__side--orange .bridge__list li::before {
    content: "";
    position: absolute; left: 0; top: 0.62em;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--orange);
  }
  .bridge__gap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: var(--amber-deep);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    padding: 0 0.2rem;
  }
  .bridge__gap svg { width: clamp(40px, 8vw, 74px); height: auto; }

  /* ---------------- section headers ---------------- */

  .section-head {
    max-width: 42em;
    margin-bottom: clamp(2rem, 5vw, 3rem);
  }
  .section-head h2 {
    font-size: clamp(1.5rem, 3.2vw, 2.05rem);
  }
  .section-head p {
    margin-top: 1rem;
    color: var(--ink-soft);
    font-size: 1rem;
  }

  .body-text {
    color: var(--ink-soft);
    font-size: 1rem;
    display: grid;
    gap: 1.15rem;
  }
  .body-text.measure { max-width: 40em; }

  /* ---------------- cards / checklist ---------------- */

  .fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.9rem;
    margin: 2.2rem 0;
  }
  .fact-card {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.2rem;
    font-size: 0.92rem;
    color: var(--ink-soft);
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    box-shadow: var(--shadow-1);
  }
  .fact-card .mark {
    flex: none;
    width: 1.15rem; height: 1.15rem;
    border-radius: 50%;
    background: var(--green-soft);
    color: var(--green);
    display: grid; place-items: center;
    font-size: 0.72rem;
    margin-top: 0.1rem;
  }

  .pivot {
    margin-top: 2.4rem;
    padding: 1.9rem clamp(1.4rem, 4vw, 2.4rem);
    background: var(--blue-deep);
    color: #eef3f9;
    border-radius: var(--radius);
    display: grid;
    gap: 0.7rem;
  }
  .pivot .lead {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: #a9c2dc;
    font-weight: 600;
  }
  .pivot .q {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.6vw, 1.5rem);
    line-height: 1.6;
  }

  /* ---------------- flow diagram (horizontal) ---------------- */

  .flow {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.6rem;
    margin: 2.4rem 0;
  }
  .flow__node {
    flex: 1 1 180px;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.2rem;
    box-shadow: var(--shadow-1);
  }
  .flow__node--gap {
    background: var(--amber-soft);
    border-color: color-mix(in srgb, var(--amber) 45%, var(--line));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 700;
    color: var(--amber-deep);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    flex: 0 1 150px;
  }
  .flow__node h3 {
    font-size: 0.88rem;
    letter-spacing: 0.03em;
    margin-bottom: 0.6rem;
    color: var(--ink);
  }
  .flow__node ul {
    margin: 0; padding: 0; list-style: none;
    font-size: 0.86rem; color: var(--ink-soft);
    display: grid; gap: 0.35rem;
  }
  .flow__arrow {
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-faint);
    flex: 0 0 auto;
    font-size: 1.1rem;
  }
  @media (max-width: 720px) {
    .flow { flex-direction: column; }
    .flow__arrow { transform: rotate(90deg); }
  }

  /* ---------------- 5 stages ---------------- */

  .stages {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.55rem;
    margin: 2.4rem 0 1.6rem;
  }
  .stage {
    position: relative;
    padding: 1.6rem 1rem 1.3rem;
    border-radius: var(--radius);
    text-align: center;
    border: 1px solid var(--line);
    background: var(--paper-raised);
  }
  .stage__num {
    font-family: var(--font-display);
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.5rem;
  }
  .stage__title { font-size: 0.88rem; font-weight: 700; margin-bottom: 0.35rem; }
  .stage__desc { font-size: 0.76rem; color: var(--ink-faint); line-height: 1.5; }

  .stage:nth-child(1) { background: var(--blue-soft); border-color: var(--blue-soft-line); }
  .stage:nth-child(1) .stage__num, .stage:nth-child(1) .stage__title { color: var(--blue-deep); }
  .stage:nth-child(2) { background: color-mix(in srgb, var(--blue-soft) 55%, var(--amber-soft) 45%); border-color: var(--blue-soft-line); }
  .stage:nth-child(2) .stage__num, .stage:nth-child(2) .stage__title { color: var(--blue-mid); }
  .stage:nth-child(3) { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); }
  .stage:nth-child(3) .stage__num, .stage:nth-child(3) .stage__title { color: var(--amber-deep); }
  .stage:nth-child(4) { background: color-mix(in srgb, var(--orange-soft) 70%, var(--amber-soft) 30%); border-color: var(--orange-soft-line); }
  .stage:nth-child(4) .stage__num, .stage:nth-child(4) .stage__title { color: var(--orange-deep); }
  .stage:nth-child(5) { background: var(--orange-soft); border-color: var(--orange-soft-line); }
  .stage:nth-child(5) .stage__num, .stage:nth-child(5) .stage__title { color: var(--orange-deep); }

  .stages-caption {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.86rem;
    color: var(--ink-faint);
    margin-top: 0.5rem;
  }

  @media (max-width: 760px) {
    .stages { grid-template-columns: repeat(5, minmax(96px, 1fr)); overflow-x: auto; padding-bottom: 0.4rem; }
  }

  /* ---------------- example translate block (section 06) ---------------- */

  .example {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.4rem, 4vw, 2.2rem);
    box-shadow: var(--shadow-1);
    margin: 2.2rem 0;
  }
  .example__rinen {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.6vw, 1.4rem);
    color: var(--blue-deep);
    background: var(--blue-soft);
    border: 1px solid var(--blue-soft-line);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.5rem;
  }
  .translate-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0.7rem;
    align-items: stretch;
  }
  .translate-flow .flow__arrow { color: var(--ink-faint); }
  .translate-flow .flow__node:nth-child(1) {
    background: var(--blue-soft);
    border-color: var(--blue-soft-line);
  }
  .translate-flow .flow__node:nth-child(1) h3 { color: var(--blue-deep); }
  .translate-flow .flow__node:nth-child(3) {
    background: var(--amber-soft);
    border-color: color-mix(in srgb, var(--amber) 40%, var(--line));
  }
  .translate-flow .flow__node:nth-child(3) h3 { color: var(--amber-deep); }
  .translate-flow .flow__node:nth-child(5) {
    background: var(--orange-soft);
    border-color: var(--orange-soft-line);
  }
  .translate-flow .flow__node:nth-child(5) h3 { color: var(--orange-deep); }
  @media (max-width: 760px) {
    .translate-flow { grid-template-columns: 1fr; }
    .translate-flow .flow__arrow { transform: rotate(90deg); justify-self: center; }
  }

  /* ---------------- emphasis box (section 07) ---------------- */

  .emphasis {
    margin-top: 2.2rem;
    padding: 1.8rem clamp(1.3rem, 4vw, 2.2rem);
    border-left: 3px solid var(--amber);
    background: var(--amber-soft);
    border-radius: 0 var(--radius) var(--radius) 0;
    display: grid;
    gap: 0.9rem;
  }
  .emphasis .no { color: var(--ink-faint); font-size: 1.08rem; }
  .emphasis .no strong { color: var(--ink); text-decoration: line-through; text-decoration-color: var(--ink-faint); }
  .emphasis .yes { font-size: clamp(1.2rem, 2.8vw, 1.5rem); line-height: 1.7; color: var(--ink); font-weight: 600; }

  /* ---------------- cycle diagram (section 08) ---------------- */

  .cycle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.3rem;
    margin: 2.4rem 0 1.8rem;
  }
  .cycle__step {
    display: flex; align-items: center; gap: 0.3rem;
  }
  .cycle__pill {
    padding: 0.75em 1.2em;
    border-radius: 999px;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ink);
    box-shadow: var(--shadow-1);
    white-space: nowrap;
  }
  .cycle__step:nth-child(1) .cycle__pill { border-color: var(--blue-soft-line); color: var(--blue-deep); }
  .cycle__step:nth-child(3) .cycle__pill,
  .cycle__step:nth-child(5) .cycle__pill { border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); color: var(--amber-deep); }
  .cycle__step:nth-child(7) .cycle__pill,
  .cycle__step:nth-child(9) .cycle__pill { border-color: var(--orange-soft-line); color: var(--orange-deep); }
  .cycle__arrow { color: var(--ink-faint); font-size: 0.9rem; }

  /* ---------------- scokin / seminudge cards (section 09) ---------------- */

  .method-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.1rem;
    margin: 2.2rem 0;
  }
  .method-card {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.7rem 1.6rem;
    box-shadow: var(--shadow-1);
  }
  .method-card__tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.3em 0.8em;
    border-radius: 999px;
    margin-bottom: 1rem;
  }
  .method-card--place .method-card__tag { background: var(--blue-soft); color: var(--blue-deep); }
  .method-card--personal .method-card__tag { background: var(--orange-soft); color: var(--orange-deep); }
  .method-card h3 {
    font-size: 1.08rem;
    margin-bottom: 0.7rem;
  }
  .method-card p { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 1.1rem; }
  .method-card .ex {
    font-size: 0.85rem;
    color: var(--ink-faint);
    background: var(--paper-sunken);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    display: grid;
    gap: 0.5rem;
  }
  .method-card .ex b { color: var(--ink-soft); font-weight: 600; }

  .light-note {
    margin-top: 1.6rem;
    font-size: 0.86rem;
    color: var(--ink-faint);
    display: flex;
    align-items: center;
    gap: 0.5em;
  }

  /* ---------------- checklist (section 10) ---------------- */

  .checklist {
    list-style: none;
    margin: 2rem 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
  }
  .checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1rem 1.2rem;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 0.96rem;
    color: var(--ink-soft);
  }
  .checklist .box {
    flex: none;
    width: 1.1rem; height: 1.1rem;
    margin-top: 0.2rem;
    border: 1.6px solid var(--line-strong);
    border-radius: 4px;
  }

  .self-quote {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 4vw, 2.3rem);
    box-shadow: var(--shadow-1);
  }
  .self-quote .q1, .self-quote .q2 {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.4vw, 1.3rem);
    line-height: 1.7;
  }
  .self-quote .q1 { color: var(--blue-deep); }
  .self-quote .q2 { color: var(--orange-deep); margin-top: 0.4rem; }
  .self-quote .or { color: var(--ink-faint); font-size: 0.85rem; margin: 0.6rem 0; letter-spacing: 0.05em; }

  /* ---------------- final CTA ---------------- */

  .cta-final {
    background: linear-gradient(135deg, var(--blue-deep), var(--blue) 55%, var(--orange) 130%);
    color: #fbfcfe;
    text-align: center;
    border-bottom: none;
  }
  .cta-final .inner { max-width: 720px; }
  .cta-final .eyebrow { color: #cfe0f0; }
  .cta-final .eyebrow::before { background: #cfe0f0; }
  .cta-final h2 {
    color: #fbfcfe;
    font-size: clamp(1.6rem, 4vw, 2.3rem);
  }
  .cta-final p {
    margin-top: 1.2rem;
    color: #e4ecf5;
    font-size: 1rem;
  }
  .cta-final .btn-row { justify-content: center; }
  .cta-final .btn-primary { background: #fbfcfe; color: var(--blue-deep); }
  .cta-final .btn-primary:hover { background: #ffffff; }
  .cta-final .btn-ghost { border-color: rgba(255,255,255,0.5); color: #fbfcfe; }
  .cta-final .btn-ghost:hover { border-color: #fff; }

  /* ---------------- footer ---------------- */

  footer {
    padding: 2.6rem clamp(1.1rem, 4vw, 2.6rem) 6.5rem;
    background: var(--paper-sunken);
  }
  footer .inner {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--ink-faint);
  }
  
footer .source-note {
  width: 100%;
  max-width: none;
  line-height: 1.9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 620px) {
  footer .source-note {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }

  footer .footer-links {
    align-self: flex-end;
  }
}
  

  /* ---------------- mobile sticky CTA ---------------- */

  .sticky-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    display: none;
    padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper-raised) 96%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(20,27,41,0.08);
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }
  .sticky-cta.is-visible { transform: translateY(0); }
  .sticky-cta .btn { width: 100%; justify-content: center; }
  @media (prefers-reduced-motion: reduce) {
    .sticky-cta { transition: none; }
  }
  @media (max-width: 720px) {
    .sticky-cta { display: block; }
  }

  /* ---------------- reveal-on-scroll (subtle) ---------------- */

  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.is-in {
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
  }

  /* ---------------- small screens: hero bridge stacking ---------------- */
  @media (max-width: 640px) {
    .bridge { grid-template-columns: 1fr; }
    .bridge__gap { flex-direction: row; justify-content: center; }
    .bridge__gap svg { width: 60px; transform: rotate(90deg); }
  }