/* ============================================================
   Stella BPO Landing Page — section styles.
   Loads /colors_and_type.css for tokens.
   ============================================================ */

/* スクリーンリーダー・検索エンジン向け非表示テキスト */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--fg1);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}
img { display: block; max-width: 100%; height: auto; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 960px; margin: 0 auto; padding: 0 32px; }

/* ============================================================
   Header (sticky white)
   ============================================================ */
.bpo-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-hair);
}
.bpo-header .inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  gap: 24px;
}
.bpo-header .brand {
  display: flex; align-items: center; gap: 14px;
}
.bpo-header .brand .logo img { height: 32px; display: block; }
.bpo-header .brand .logo.logo-bpo img { height: 48px; }
.bpo-header .brand .service {
  font-size: 13px; font-weight: 700; color: var(--charcoal);
  letter-spacing: 0.04em;
  padding-left: 14px;
  border-left: 1px solid var(--border-hair);
  display: flex; align-items: center; gap: 8px;
}
.bpo-header .brand .service .by {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--fg3);
  text-transform: uppercase;
}
.bpo-header .brand .service img { height: 18px; display: block; opacity: 0.85; }
.bpo-header .brand .service .pill {
  display: inline-flex; align-items: center;
  background: var(--flare-blue);
  color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  padding: 3px 8px; border-radius: 9999px;
  margin-right: 8px;
}
.bpo-header nav {
  display: flex; gap: 24px; align-items: center;
  font-size: 13px; margin-left: auto;
}
.bpo-header nav a { color: var(--fg1); font-weight: 500; border-bottom: none; }
.bpo-header nav a:hover { color: var(--flare-blue); }
.bpo-header nav a.btn-primary,
.bpo-header nav a.btn-primary:hover,
.bpo-header nav a.btn-primary:focus-visible {
  color: #fff;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 700;
  padding: 14px 26px;
  border-radius: 9999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.22,0.61,0.36,1);
  line-height: 1;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  white-space: nowrap;
}
.btn .material-symbols-outlined { font-size: 18px; }
.btn-primary { background: var(--flare-blue); color: #fff; box-shadow: 0 6px 18px rgba(36,129,215,0.28); }
.btn:hover,
.btn:focus-visible {
  border-bottom-color: transparent;
}
.btn-primary,
.btn-primary:hover,
.btn-primary:focus-visible {
  color: #fff;
}
.btn-primary:hover { background: var(--flare-blue-hi); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(36,129,215,0.32); }
.btn-gradient {
  background: var(--gradient-leap); color: #fff;
  box-shadow: 0 6px 18px rgba(36,129,215,0.24);
}
.btn-gradient,
.btn-gradient:hover,
.btn-gradient:focus-visible {
  color: #fff;
}
.btn-gradient:hover { filter: brightness(0.96); transform: translateY(-1px); }
.btn-secondary { background: #fff; color: var(--flare-blue); border-color: var(--flare-blue); }
.btn-secondary:hover { background: var(--bg-tint-blue); }
.btn-dark { background: var(--charcoal); color: #fff; }
.btn-dark:hover { background: #1B1E24; }
.btn-sm { font-size: 13px; padding: 9px 16px; }
.btn-lg { font-size: 16px; padding: 17px 32px; }

/* ============================================================
   Common: section eyebrow / title / lead
   ============================================================ */
.sec-eyebrow {
  font-family: var(--font-en);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--flare-blue);
  text-align: center;
  display: block;
  margin-bottom: 14px;
}
.sec-title {
  font-size: 34px; font-weight: 700;
  text-align: center;
  color: var(--charcoal);
  margin: 0;
  letter-spacing: 0.02em;
  line-height: 1.45;
}
.sec-title::after {
  content: "";
  display: block;
  width: 56px; height: 3px;
  background: var(--flare-blue);
  margin: 20px auto 0;
}
.sec-title .accent { color: var(--flare-blue); }
.sec-lead {
  text-align: center;
  font-size: 15.5px; line-height: 2;
  color: var(--charcoal);
  margin: 24px auto 0;
  max-width: 760px;
}

/* ============================================================
   01 — Hero
   ============================================================ */
.hero {
  padding: 56px 0 56px;
  background:
    radial-gradient(ellipse at 90% -10%, rgba(56,196,163,0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 10%, rgba(36,129,215,0.06) 0%, transparent 50%),
    #FFFFFF;
}
.hero .image-wrap {
  margin: 0 auto;
  max-width: 1200px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero .image-wrap img { width: 100%; display: block; }
.hero .belt {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 16px;
  align-items: center;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  padding: 20px 24px;
}
.hero .belt .badge {
  display: flex; align-items: center; gap: 12px;
}
.hero .belt .badge .ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bg-tint-blue);
  display: flex; align-items: center; justify-content: center;
  color: var(--flare-blue);
  flex-shrink: 0;
}
.hero .belt .badge .ico .material-symbols-outlined { font-size: 22px; }
.hero .belt .badge .label { font-size: 11px; color: var(--fg3); font-weight: 600; letter-spacing: 0.06em; }
.hero .belt .badge .value { font-size: 15px; font-weight: 700; color: var(--charcoal); line-height: 1.2; }
.hero .belt .cta { display: flex; gap: 8px; }

/* ============================================================
   02 — Problem (organizational suffocation)
   ============================================================ */
.problem {
  padding: 110px 0;
  background: linear-gradient(180deg, #fff 0%, var(--pale-smoke) 100%);
}
.problem .sub {
  text-align: center; font-size: 14px; color: var(--fg2);
  margin-top: 12px; letter-spacing: 0.06em;
}
.problem .cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 64px;
}
.problem .card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--border-hair);
  padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: all 240ms var(--ease-leap);
}
.problem .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.problem .card .num {
  font-family: var(--font-en);
  font-size: 28px; font-weight: 700;
  color: rgba(42,46,53,0.16);
  line-height: 1;
}
.problem .card h3 {
  font-size: 19px; font-weight: 700; line-height: 1.55;
  color: var(--charcoal);
  margin: 0;
}
.problem .card p {
  font-size: 14px; line-height: 1.85; color: var(--fg2);
  margin: 4px 0 0;
}
.problem .summary {
  text-align: center;
  margin-top: 64px;
  font-size: 16px; line-height: 2;
  color: var(--charcoal);
  background: #fff;
  padding: 28px 32px;
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  max-width: 920px;
  margin-left: auto; margin-right: auto;
}
.problem .summary b { color: var(--flare-blue); font-weight: 700; }

/* ============================================================
   03 — Solution (3 pillars)
   ============================================================ */
.solution { padding: 110px 0; background: #fff; }
.solution .pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 64px;
}
.solution .pillar {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 30px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: all 240ms var(--ease-leap);
}
.solution .pillar:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.solution .pillar::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 4px;
  background: var(--flare-blue);
}
.solution .pillar.green::before { background: var(--leap-green); }
.solution .pillar.warm::before { background: var(--sunny-orange); }
.solution .pillar .ico {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--bg-tint-blue);
  color: var(--flare-blue);
  display: flex; align-items: center; justify-content: center;
}
.solution .pillar.green .ico { background: var(--bg-tint-green); color: var(--leap-green-hi); }
.solution .pillar.warm .ico { background: var(--bg-tint-warm); color: var(--sunny-orange-hi); }
.solution .pillar .ico .material-symbols-outlined { font-size: 30px; }
.solution .pillar .num {
  font-family: var(--font-en);
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--fg3);
}
.solution .pillar h3 { font-size: 22px; font-weight: 700; color: var(--charcoal); margin: 0; line-height: 1.45; }
.solution .pillar p { font-size: 14.5px; line-height: 1.9; color: var(--fg2); margin: 0; }
.solution .pillar .badge {
  align-self: flex-start;
  background: var(--bg-tint-blue);
  color: var(--flare-blue);
  font-size: 11px; font-weight: 700;
  padding: 5px 12px; border-radius: 9999px;
  letter-spacing: 0.02em;
}
.solution .pillar.green .badge { background: var(--bg-tint-green); color: var(--leap-green-hi); }
.solution .pillar.warm .badge { background: var(--bg-tint-warm); color: var(--sunny-orange-hi); }

/* ============================================================
   04 — Before / After
   ============================================================ */
.beforeafter {
  padding: 110px 0;
  background: var(--bg-tint-blue);
}
.beforeafter .grid {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  gap: 16px; align-items: stretch;
  margin-top: 64px;
}
.beforeafter .panel {
  border-radius: 20px;
  padding: 36px 32px;
  min-height: 320px;
  display: flex; flex-direction: column; gap: 16px;
}
.beforeafter .before {
  background: #ECEDEF;
  color: #6B6E73;
  filter: grayscale(1);
  border: 1px solid #DDE0E4;
}
.beforeafter .after {
  background: var(--gradient-leap-soft);
  color: var(--charcoal);
  border: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
}
.beforeafter .after::after {
  content: "";
  position: absolute; right: 22px; top: 22px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gradient-spark);
  box-shadow: 0 0 24px rgba(255,166,64,0.45);
}
.beforeafter .label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.beforeafter .before .label { color: #6B6E73; }
.beforeafter .after  .label { color: var(--flare-blue); }
.beforeafter h3 { font-size: 24px; font-weight: 700; line-height: 1.4; margin: 0; }
.beforeafter ul { font-size: 14px; line-height: 1.85; padding-left: 22px; margin: 6px 0 0; }
.beforeafter li { margin: 6px 0; }
.beforeafter .arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--flare-blue);
}
.beforeafter .arrow .material-symbols-outlined { font-size: 40px; }

/* ============================================================
   05 — Process (5 steps)
   ============================================================ */
.process { padding: 110px 0 120px; background: #fff; }
.process .steps {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 72px;
  align-items: stretch;
}
.process .step {
  position: relative;
  background: #fff;
  border-top: 3px solid var(--flare-blue);
  border-radius: 6px;
  padding: 24px 20px 18px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  box-shadow: var(--shadow-md);
  border-left: 1px solid var(--border-hair);
  border-right: 1px solid var(--border-hair);
  border-bottom: 1px solid var(--border-hair);
  min-height: 300px;
}
.process .step.orange { border-top-color: var(--sunny-orange); }
.process .step .num {
  font-family: var(--font-en);
  font-size: 15px; font-weight: 700;
  color: var(--flare-blue);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.process .step.orange .num { color: var(--sunny-orange); }
.process .step .ico {
  color: var(--flare-blue);
  margin-bottom: 18px;
  width: 52px; height: 52px;
  background: var(--bg-tint-blue);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.process .step.orange .ico { color: var(--sunny-orange); background: var(--bg-tint-warm); }
.process .step .ico .material-symbols-outlined { font-size: 28px; }
.process .step .label {
  font-size: 16px; font-weight: 700;
  color: var(--charcoal);
  line-height: 1.5;
}
.process .step .desc {
  font-size: 12.5px; line-height: 1.75;
  color: var(--fg2);
  margin: 14px 0;
}
.process .step .stamp {
  margin-top: auto;
  width: 100%;
  padding-top: 12px;
  border-top: 1px solid var(--border-hair);
  font-family: var(--font-en);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--fg3);
}

/* ============================================================
   06 — Use Cases (image + interactive tabs)
   ============================================================ */
.usecases { padding: 110px 0; background: var(--pale-smoke); }
.usecases .preview-image {
  margin: 56px auto 24px;
  max-width: 1200px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: #fff;
  border: 1px solid var(--border-subtle);
}
.usecases .preview-image img { width: 100%; display: block; }
.usecases .caption {
  text-align: center; font-size: 13px; color: var(--fg3);
  margin: 0 0 64px;
}
.usecases .tabs-intro {
  text-align: center;
  font-size: 16px; line-height: 1.85; color: var(--charcoal);
  margin-bottom: 36px;
}
.usecases .tabs {
  display: flex; gap: 8px; justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.usecases .tab {
  background: #fff;
  border: 1.5px solid var(--border-subtle);
  border-radius: 9999px;
  padding: 10px 18px;
  font-size: 13px; font-weight: 600;
  color: var(--fg2);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 150ms var(--ease-leap);
}
.usecases .tab .material-symbols-outlined { font-size: 18px; }
.usecases .tab:hover { color: var(--flare-blue); border-color: var(--flare-blue); }
.usecases .tab.active {
  background: var(--flare-blue); color: #fff; border-color: var(--flare-blue);
}
.usecases .panel {
  background: #fff;
  border-radius: 18px;
  padding: 36px 40px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
}
.usecases .panel-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.usecases .panel-head .ico {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--bg-tint-blue); color: var(--flare-blue);
  display: flex; align-items: center; justify-content: center;
}
.usecases .panel-head .ico .material-symbols-outlined { font-size: 26px; }
.usecases .panel-head h3 {
  font-size: 22px; font-weight: 700; color: var(--charcoal); margin: 0;
}
.usecases .panel-head .meta { font-size: 12px; color: var(--fg3); letter-spacing: 0.04em; margin-top: 2px; }
.usecases .cases {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.usecases .case {
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px 24px 26px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.usecases .case h4 {
  font-size: 16px; font-weight: 700; color: var(--charcoal);
  margin: 0 0 10px;
  display: flex; align-items: flex-start; gap: 10px;
  line-height: 1.5;
}
.usecases .case h4 .material-symbols-outlined {
  color: var(--flare-blue); font-size: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}
.usecases .case .desc {
  font-size: 13.5px; line-height: 1.85;
  color: var(--fg2);
  margin: 0 0 14px;
}
.usecases .case .ba {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 12px;
  margin-top: 16px;
  align-items: stretch;
}
.usecases .case .ba-cell {
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 12.5px; line-height: 1.75;
  position: relative;
}
.usecases .case .ba-cell.b {
  background: #F0F2F4;
  color: #6B6E73;
  border: 1px solid #E0E4E8;
}
.usecases .case .ba-cell.a {
  background: linear-gradient(135deg, rgba(36,129,215,0.12) 0%, rgba(56,196,163,0.18) 100%);
  color: var(--charcoal);
  border: 1.5px solid rgba(36,129,215,0.35);
  box-shadow: 0 12px 26px rgba(36,129,215,0.13);
  font-size: 13.5px;
  font-weight: 700;
}
.usecases .case .ba-cell .lbl {
  font-family: var(--font-en);
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-bottom: 10px;
  text-transform: uppercase;
  text-align: center;
}
.usecases .case .ba-cell.b .lbl { color: #8A8F97; }
.usecases .case .ba-cell.a .lbl {
  color: var(--flare-blue);
  background: #fff;
  border-radius: 9999px;
  padding: 4px 10px;
  box-shadow: 0 4px 10px rgba(36,129,215,0.10);
}
.usecases .case .ba-cell.a .lbl::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--leap-green);
  box-shadow: 0 0 0 4px rgba(56,196,163,0.16);
}

/* ============================================================
   07 — Value / ROI
   ============================================================ */
.roi { padding: 110px 0; background: #fff; }
.roi .frame {
  margin-top: 56px;
  background: var(--bg-tint-blue);
  border-radius: 20px;
  padding: 40px 44px;
  border: 1px solid var(--border-subtle);
}
.roi .formula {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-family: var(--font-en);
  font-size: 18px; font-weight: 600;
  color: var(--charcoal);
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.roi .formula .term {
  background: #fff;
  border: 1.5px solid var(--flare-blue);
  color: var(--flare-blue);
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 700;
}
.roi .formula .term .ja { display: block; font-size: 12px; color: var(--fg3); font-weight: 600; margin-top: 4px; }
.roi .formula .op { color: var(--fg3); font-size: 20px; }

.roi .example {
  background: #fff;
  border-radius: 16px;
  padding: 32px 36px;
  border: 1px solid var(--border-subtle);
  margin-top: 24px;
}
.roi .example .tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-tint-blue); color: var(--flare-blue);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  padding: 5px 12px; border-radius: 9999px;
  margin-bottom: 14px;
}
.roi .example h3 { font-size: 22px; font-weight: 700; color: var(--charcoal); margin: 0 0 24px; }
.roi .example .comparison {
  display: grid; grid-template-columns: 1fr 60px 1fr;
  gap: 14px; align-items: stretch;
}
.roi .example .side {
  border-radius: 14px;
  padding: 22px 24px;
}
.roi .example .side.legacy {
  background: #ECEDEF;
  color: #6B6E73;
  filter: grayscale(1);
}
.roi .example .side.stella {
  background: var(--gradient-leap-soft);
  color: var(--charcoal);
  border: 1.5px solid var(--leap-green);
}
.roi .example .side .lbl {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 10px;
}
.roi .example .side .who { font-size: 14px; line-height: 1.6; margin-bottom: 14px; }
.roi .example .side .price {
  font-family: var(--font-en);
  font-size: 32px; font-weight: 700;
  line-height: 1;
}
.roi .example .side .price small { font-size: 14px; font-weight: 600; margin-left: 4px; opacity: 0.7; }
.roi .example .side .hours { font-size: 12px; margin-top: 8px; opacity: 0.8; }
.roi .example .arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--flare-blue);
}
.roi .example .arrow .material-symbols-outlined { font-size: 36px; }
.roi .example .savings {
  margin-top: 22px; text-align: center;
  font-size: 14px; color: var(--charcoal);
}
.roi .example .savings b { color: var(--flare-blue); font-size: 16px; }
.roi .outcomes {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.roi .outcome {
  background: #fff; border-radius: 14px;
  padding: 22px 22px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
.roi .outcome-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.roi .outcome .v {
  display: flex; align-items: center;
  font-size: 28px; line-height: 1; flex-shrink: 0;
  background: var(--gradient-leap);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.roi .outcome .l {
  font-size: 17px; font-weight: 700;
  color: var(--charcoal);
  line-height: 1.3;
  margin: 0;
}
.roi .outcome .s { font-size: 12px; color: var(--fg2); line-height: 1.65; }

/* ============================================================
   08 — Comparison Table
   ============================================================ */
.compare { padding: 110px 0; background: var(--pale-smoke); }
.compare .table {
  margin-top: 56px;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
}
.compare table { width: 100%; border-collapse: collapse; }
.compare th, .compare td {
  padding: 18px 24px;
  text-align: left;
  border-bottom: 1px solid var(--border-hair);
  font-size: 14px; line-height: 1.65;
  vertical-align: top;
}
.compare th {
  background: var(--charcoal);
  color: #fff;
  font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em;
}
.compare th.stella {
  background: var(--gradient-leap);
  position: relative;
}
.compare th.stella::after {
  content: "";
  position: absolute; right: 18px; top: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--gradient-spark);
  transform: translateY(-50%);
  box-shadow: 0 0 14px rgba(255,166,64,0.45);
}
.compare td.metric {
  font-weight: 700;
  color: var(--charcoal);
  width: 22%;
  background: var(--pale-smoke);
}
.compare td.legacy { color: var(--fg2); width: 39%; }
.compare td.stella { color: var(--charcoal); width: 39%; background: rgba(36,129,215,0.04); font-weight: 500; }
.compare tr:last-child td { border-bottom: none; }
.compare-cta {
  margin-top: 32px;
  text-align: center;
}

/* ============================================================
   09 — Scope (use image)
   10 — Trust (use image)
   11 — Pricing (use image)
   ============================================================ */
.image-section { padding: 110px 0; }
.image-section.alt { background: var(--pale-smoke); }
.image-section .image-wrap {
  margin: 56px auto 0;
  max-width: 1200px;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
}
.image-section .image-wrap img { width: 100%; display: block; }
.image-section .footnote {
  text-align: center; font-size: 13px; color: var(--fg3);
  margin: 24px auto 0; max-width: 720px; line-height: 1.85;
}
.image-section .post-cta {
  text-align: center;
  margin-top: 36px;
}

/* ============================================================
   12 — CEO Message
   ============================================================ */
.ceo {
  padding: 110px 0;
  background: linear-gradient(180deg, #fff 0%, var(--bg-tint-blue) 100%);
}
.ceo .card {
  margin-top: 56px;
  background: #fff;
  border-radius: 24px;
  padding: 48px 56px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 36px;
  align-items: start;
  position: relative;
  overflow: hidden;
}
.ceo .card::before {
  content: "“";
  position: absolute;
  top: 0; left: 36px;
  font-family: "Georgia", serif;
  font-size: 140px;
  color: var(--bg-tint-blue);
  line-height: 1;
  pointer-events: none;
}
.ceo .avatar {
  width: 140px; height: 140px;
  border-radius: 50%;
  background: var(--gradient-leap-soft);
  border: 3px solid #fff;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--flare-blue);
  font-size: 48px; font-weight: 700;
  font-family: var(--font-en);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  overflow: hidden;
}
.ceo .avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}
.ceo .quote { position: relative; }
.ceo .quote p {
  font-size: 16px; line-height: 2.1; color: var(--charcoal);
  margin: 0 0 14px;
}
.ceo .quote p:first-child { font-size: 18px; font-weight: 600; }
.ceo .quote .sig {
  margin-top: 24px;
  font-size: 14px; color: var(--fg2);
}
.ceo .quote .sig b { color: var(--charcoal); font-size: 18px; font-weight: 700; display: inline-block; margin-right: 10px; }

/* ============================================================
   13 — Contact (light, on-brand pale blue)
   ============================================================ */
.contact-bpo {
  padding: 110px 0 120px;
  background:
    radial-gradient(ellipse at 88% 10%, rgba(56,196,163,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 8% 92%, rgba(36,129,215,0.10) 0%, transparent 55%),
    var(--bg-tint-blue);
  position: relative;
  overflow: hidden;
}
.contact-bpo::before,
.contact-bpo::after {
  content: "";
  position: absolute;
  width: 96px; height: 96px;
  background-image: radial-gradient(circle, rgba(36,129,215,0.18) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  opacity: 0.7;
  pointer-events: none;
}
.contact-bpo::before { top: 80px; right: 56px; }
.contact-bpo::after  { bottom: 80px; left: 56px; }
.contact-bpo .container { position: relative; z-index: 1; }
.contact-bpo .sec-lead { color: var(--charcoal); }
.contact-bpo .promo {
  display: flex; justify-content: center; gap: 12px;
  margin: 36px 0 0;
  flex-wrap: wrap;
}
.contact-bpo .promo .chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  color: var(--charcoal);
  padding: 10px 18px;
  border-radius: 9999px;
  font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.contact-bpo .promo .chip .material-symbols-outlined { font-size: 18px; color: var(--leap-green-hi); }
.contact-bpo .contact-link-panel {
  margin: 34px auto 0;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.contact-bpo .contact-link-panel p {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--fg2);
}
.contact-bpo form {
  max-width: 760px;
  margin: 48px auto 0;
  background: #fff;
  border-radius: 20px;
  padding: 44px 52px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
}
.contact-bpo .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-bpo .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.contact-bpo label {
  font-size: 13px; font-weight: 700; color: var(--charcoal);
  display: flex; align-items: center; gap: 6px;
}
.contact-bpo label .req { color: var(--flare-blue); font-size: 11px; font-weight: 700; }
.contact-bpo input, .contact-bpo textarea, .contact-bpo select {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 12px 14px;
  border: 1.5px solid #D8DDE2;
  border-radius: 8px;
  background: #fff;
  color: var(--charcoal);
  font-weight: 500;
}
.contact-bpo input:focus, .contact-bpo textarea:focus, .contact-bpo select:focus {
  outline: none;
  border-color: var(--flare-blue);
  box-shadow: 0 0 0 3px rgba(36,129,215,0.16);
}
.contact-bpo textarea { resize: vertical; min-height: 120px; }
.contact-bpo .submit-row {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.contact-bpo .btn-submit {
  background: var(--gradient-leap);
  color: #fff;
  border: none;
  border-radius: 9999px;
  padding: 18px 56px;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(36,129,215,0.28);
  transition: all 150ms var(--ease-leap);
  display: inline-flex; align-items: center; gap: 10px;
}
.contact-bpo .btn-submit:hover { filter: brightness(0.96); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(36,129,215,0.32); }
.contact-bpo .privacy { font-size: 12px; color: var(--fg2); }

/* ============================================================
   Footer (minimal Ink Night)
   ============================================================ */
.bpo-footer {
  background: var(--ink-night);
  color: rgba(255,255,255,0.65);
  padding: 32px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.bpo-footer .inner {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px;
}
.bpo-footer a { color: rgba(255,255,255,0.85); border-bottom: none; }
.bpo-footer a:hover { color: #fff; }
.bpo-footer .brand { display: flex; align-items: center; gap: 12px; }
.bpo-footer .brand img { height: 24px; filter: brightness(0) invert(1); opacity: 0.7; }

/* ============================================================
   Floating bottom CTA bar (sticky on scroll)
   ============================================================ */
.bottom-cta {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-subtle);
  padding: 14px 32px;
  display: flex; align-items: center; justify-content: center;
  gap: 16px;
  z-index: 40;
  box-shadow: 0 -8px 24px rgba(36,129,215,0.10);
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-leap);
}
.bottom-cta.show { transform: translateY(0); }
.bottom-cta .msg {
  font-size: 14px; font-weight: 600; color: var(--charcoal);
}
.bottom-cta .msg b { color: var(--flare-blue); }
.bottom-cta .btn { padding: 12px 24px; font-size: 14px; }

/* ============================================================
   Theme variant: "gradient-heavy" — turns up the gradient
   ============================================================ */
body.theme-gradient .hero {
  background:
    radial-gradient(ellipse at 70% 0%, rgba(56,196,163,0.20) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 30%, rgba(36,129,215,0.16) 0%, transparent 50%),
    var(--pale-smoke);
}
body.theme-gradient .btn-primary {
  background: var(--gradient-leap);
}
body.theme-gradient .btn-primary:hover {
  filter: brightness(0.96);
}
body.theme-gradient .sec-title::after {
  background: var(--gradient-leap);
  width: 80px;
}
body.theme-gradient .solution .pillar::before { background: var(--gradient-leap); height: 5px; }
body.theme-gradient .process .step { border-top: 4px solid transparent; background-image: linear-gradient(#fff, #fff), var(--gradient-leap); background-origin: border-box; background-clip: padding-box, border-box; }
body.theme-gradient .process .step.orange { background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #FFA640 0%, #E08B22 100%); }
body.theme-gradient .roi .formula .term { background: var(--gradient-leap-soft); border-color: var(--leap-green); }
body.theme-gradient .compare th { background: var(--ink-night); }
body.theme-gradient .compare th.stella { background: var(--gradient-leap); }

/* ============================================================
   Responsive — comprehensive mobile optimization
   Breakpoints: 1100 (tablet), 768 (large phone), 480 (phone)
   ============================================================ */

/* === 1100px and below: tablet layout collapse === */
@media (max-width: 1100px) {
  .container, .container-narrow { padding: 0 24px; }

  /* Header: simplify nav */
  .bpo-header nav { gap: 18px; font-size: 13px; }

  /* Hero belt */
  .hero .belt { grid-template-columns: 1fr 1fr 1fr; row-gap: 16px; }
  .hero .belt .cta { grid-column: 1 / -1; justify-content: center; }

  /* Section grids → 1 col */
  .problem .cards { grid-template-columns: 1fr; }
  .solution .pillars { grid-template-columns: 1fr; }
  .beforeafter .grid { grid-template-columns: 1fr; }
  .beforeafter .arrow { transform: rotate(90deg); padding: 12px 0; }

  /* Process — 2 col */
  .process .steps { grid-template-columns: repeat(2, 1fr); }

  /* Use cases */
  .usecases .cases { grid-template-columns: 1fr; }

  /* ROI */
  .roi .outcomes { grid-template-columns: repeat(2, 1fr); }
  .roi .example .comparison { grid-template-columns: 1fr; }
  .roi .example .arrow { transform: rotate(90deg); padding: 12px 0; }

  /* CEO + contact stacking */
  .ceo .card { grid-template-columns: 1fr; padding: 36px 32px; }
  .ceo .avatar { margin: 0 auto; }
  .contact-bpo .row { grid-template-columns: 1fr; }
  .contact-bpo form { padding: 36px 32px; }
}

/* === 768px and below: large phone === */
@media (max-width: 768px) {
  .container, .container-narrow { padding: 0 20px; }

  /* Type scale: dial down */
  .sec-title { font-size: 24px; line-height: 1.5; }
  .sec-title::after { width: 44px; height: 2px; margin: 16px auto 0; }
  .sec-lead { font-size: 14px; line-height: 1.85; margin-top: 18px; }
  .sec-eyebrow { font-size: 11px; letter-spacing: 0.18em; }

  /* Section paddings */
  .problem, .solution, .beforeafter, .process,
  .usecases, .roi, .compare, .ceo,
  .image-section, .contact-bpo { padding: 64px 0; }

  /* Header: hide nav links, keep logo + CTA only */
  .bpo-header .inner { padding: 12px 0; gap: 12px; }
  .bpo-header .brand .service { display: none; }
  .bpo-header .brand .logo img { height: 28px; }
  .bpo-header nav { gap: 0; }
  .bpo-header nav a:not(.btn) { display: none; }
  .bpo-header nav .btn { padding: 8px 14px; font-size: 12px; }

  /* Hero */
  .hero { padding: 32px 0 40px; }
  .hero .image-wrap { border-radius: 12px; }
  .hero .belt {
    grid-template-columns: 1fr;
    padding: 16px;
    border-radius: 12px;
    gap: 12px;
  }
  .hero .belt .badge { gap: 10px; }
  .hero .belt .badge .ico { width: 32px; height: 32px; }
  .hero .belt .badge .value { font-size: 14px; }
  .hero .belt .cta { grid-column: 1; margin-top: 4px; }
  .hero .belt .cta .btn { width: 100%; justify-content: center; }

  /* Problem cards */
  .problem .card { padding: 22px; }
  .problem .card h3 { font-size: 16.5px; line-height: 1.5; }
  .problem .card p { font-size: 13.5px; }
  .problem .summary { padding: 22px 24px; font-size: 14.5px; margin-top: 48px; }

  /* Solution pillars */
  .solution .pillar { padding: 26px 24px; }
  .solution .pillar h3 { font-size: 19px; }
  .solution .pillar p { font-size: 14px; }

  /* Before/After */
  .beforeafter .panel { padding: 26px 24px; min-height: 0; }
  .beforeafter h3 { font-size: 20px; }
  .beforeafter ul { font-size: 13.5px; }

  /* Process — horizontal scroll on small screens (preserves the 5-step visual) */
  .process .steps {
    grid-template-columns: repeat(5, 240px);
    overflow-x: auto;
    padding-bottom: 12px;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .process .step {
    scroll-snap-align: start;
    min-height: 260px;
  }

  /* Use cases */
  .usecases .preview-image { border-radius: 12px; }
  .usecases .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    margin-left: -20px;
    margin-right: -20px;
    padding: 4px 20px 12px;
    -webkit-overflow-scrolling: touch;
  }
  .usecases .tab { flex-shrink: 0; padding: 8px 14px; font-size: 12px; }
  .usecases .panel { padding: 24px 22px; }
  .usecases .panel-head h3 { font-size: 18px; }
  .usecases .panel-head .ico { width: 40px; height: 40px; }
  .usecases .case { padding: 18px 20px; }
  .usecases .case h4 { font-size: 15px; }
  .usecases .case .ba { grid-template-columns: 1fr; gap: 8px; }

  /* ROI */
  .roi .frame { padding: 28px 22px; border-radius: 14px; }
  .roi .formula {
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 24px;
  }
  .roi .formula .term { padding: 10px 16px; width: 100%; text-align: center; }
  .roi .formula .term .ja { display: inline-block; margin-left: 8px; margin-top: 0; }
  .roi .formula .op { font-size: 18px; }
  .roi .example { padding: 24px 22px; }
  .roi .example h3 { font-size: 17px; line-height: 1.55; }
  .roi .example .side { padding: 18px 20px; }
  .roi .example .side .price { font-size: 26px; }
  .roi .example .savings { font-size: 13.5px; }
  .roi .outcomes { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .roi .outcome { padding: 18px 16px; }
  .roi .outcome .v { font-size: 28px; }

  /* Comparison — horizontal scroll */
  .compare .table {
    margin-left: -20px;
    margin-right: -20px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    overflow-x: auto;
  }
  .compare table { min-width: 600px; }
  .compare th, .compare td { padding: 14px 16px; font-size: 13px; }
  .compare th.stella::after { display: none; }

  /* Image sections */
  .image-section .image-wrap { border-radius: 12px; }
  .image-section .footnote { font-size: 12px; margin-top: 20px; }

  /* CEO */
  .ceo .card { padding: 28px 24px; gap: 24px; border-radius: 18px; }
  .ceo .card::before { font-size: 96px; left: 24px; }
  .ceo .avatar { width: 96px; height: 96px; font-size: 32px; }
  .ceo .quote p { font-size: 14.5px; line-height: 1.95; }
  .ceo .quote p:first-child { font-size: 15.5px; }
  .ceo .quote .sig { margin-top: 18px; font-size: 13px; }
  .ceo .quote .sig b { font-size: 16px; display: block; margin: 0 0 4px; }

  /* Contact */
  .contact-bpo { padding: 64px 0 88px; } /* bottom space for floating CTA */
  .contact-bpo::before, .contact-bpo::after { width: 64px; height: 64px; }
  .contact-bpo::before { top: 40px; right: 20px; }
  .contact-bpo::after { bottom: 40px; left: 20px; }
  .contact-bpo .promo { gap: 8px; margin-top: 24px; }
  .contact-bpo .promo .chip { padding: 8px 14px; font-size: 12px; }
  .contact-bpo form { padding: 28px 24px; border-radius: 14px; margin-top: 36px; }
  .contact-bpo input, .contact-bpo textarea, .contact-bpo select { font-size: 16px; /* prevent iOS zoom */ }
  .contact-bpo .btn-submit { padding: 16px 32px; font-size: 15px; width: 100%; justify-content: center; }
  .contact-bpo .privacy { font-size: 11.5px; text-align: center; line-height: 1.6; }

  /* Bottom CTA: compact on mobile */
  .bottom-cta { padding: 10px 16px; gap: 10px; }
  .bottom-cta .msg { font-size: 12px; line-height: 1.4; flex: 1; }
  .bottom-cta .msg b { display: block; }
  .bottom-cta .btn { padding: 10px 16px; font-size: 13px; flex-shrink: 0; }

  /* Footer */
  .bpo-footer .inner {
    flex-direction: column; gap: 14px;
    text-align: center;
  }
  .bpo-footer .inner > div { flex-direction: column; gap: 10px !important; }
}

/* === 480px and below: phone === */
@media (max-width: 480px) {
  .container, .container-narrow { padding: 0 16px; }

  /* Hero headline below image: section padding even tighter */
  .hero { padding: 24px 0 32px; }
  /* Section titles smaller */
  .sec-title { font-size: 21px; }
  .sec-lead { font-size: 13.5px; }

  /* All sections more compact */
  .problem, .solution, .beforeafter, .process,
  .usecases, .roi, .compare, .ceo,
  .image-section, .contact-bpo { padding: 48px 0; }

  /* Process: even smaller cards on phone */
  .process .steps {
    grid-template-columns: repeat(5, 200px);
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .process .step { padding: 18px 14px 14px; min-height: 220px; }
  .process .step .label { font-size: 14px; }
  .process .step .desc { font-size: 11.5px; }

  /* Use cases tab scroll */
  .usecases .tabs { margin-left: -16px; margin-right: -16px; padding: 4px 16px 12px; }

  /* Comparison scroll */
  .compare .table { margin-left: -16px; margin-right: -16px; }

  /* CEO quote remove giant quote mark */
  .ceo .card::before { display: none; }

  /* Bottom CTA: stack tightly */
  .bottom-cta { padding: 8px 12px; }
  .bottom-cta .msg { font-size: 11.5px; }

  /* Contact dots smaller */
  .contact-bpo::before, .contact-bpo::after { display: none; }
}

/* ============================================================
   ▼▼ Catalog update 2026-05 — Problem / Solution / Process /
   UseCases / Pricing / Roadmap / FAQ
   ============================================================ */

/* --- Problem: 新カード構造（card-head + ico + quote） --- */
.problem .card {
  padding: 28px 26px;
  gap: 10px;
}
.problem .card .card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.problem .card .card-head .ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--bg-tint-blue);
  color: var(--flare-blue);
  display: flex; align-items: center; justify-content: center;
}
.problem .card .card-head .ico .material-symbols-outlined { font-size: 24px; }
.problem .card .num { margin-bottom: 0; }
.problem .card p.quote {
  font-size: 14px;
  line-height: 1.85;
  color: var(--charcoal);
  font-weight: 600;
  background: var(--pale-smoke);
  border-left: 3px solid var(--flare-blue);
  padding: 10px 14px;
  border-radius: 4px;
  margin: 6px 0 4px;
}
.problem .card p.body {
  font-size: 13.5px;
  color: var(--fg2);
  line-height: 1.85;
  margin: 0;
}

/* --- Solution: trust-belt（旧Trust統合） --- */
.solution .trust-belt {
  margin: 40px auto 0;
  max-width: 920px;
  padding: 18px 24px;
  background: var(--bg-tint-blue);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  display: flex; align-items: center; gap: 14px;
  font-size: 14px; line-height: 1.85;
  color: var(--charcoal);
}
.solution .trust-belt .material-symbols-outlined {
  font-size: 28px;
  color: var(--flare-blue);
  flex-shrink: 0;
}
.solution .trust-belt b { color: var(--flare-blue); font-weight: 700; }

/* --- Solution: tech-row（使用技術バッジ） --- */
.solution .tech-row {
  margin: 20px auto 0;
  max-width: 920px;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.solution .tech-label {
  font-family: var(--font-en);
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg3);
  margin-right: 4px;
  flex-shrink: 0;
}
.solution .tech-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  padding: 5px 12px;
  font-size: 12px; font-weight: 600;
  color: var(--fg2);
  box-shadow: var(--shadow-sm);
}
.solution .tech-chip .material-symbols-outlined {
  font-size: 15px; color: var(--flare-blue);
}
@media (max-width: 768px) {
  .solution .tech-row { gap: 8px; }
  .solution .tech-chip { font-size: 11px; padding: 4px 10px; }
}

/* --- Process: 3ステップ＋矢印レイアウト --- */
.process.process-3 .steps {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  grid-template-columns: none;
}
.process.process-3 .step {
  flex: 1 1 0;
  min-width: 0;
  max-width: 340px;
  min-height: 280px;
}
.process.process-3 .process-arrow {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: var(--flare-blue);
  align-self: center;
}
.process.process-3 .process-arrow .material-symbols-outlined { font-size: 36px; }
.process .process-footnote {
  margin: 24px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: 12.5px;
  color: var(--fg3);
  line-height: 1.85;
}
.sec-title .accent { color: var(--flare-blue); }

/* --- UseCases: scope-note（旧Scope統合） --- */
.usecases .scope-note {
  margin: 40px auto 36px;
  max-width: 960px;
  padding: 16px 22px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--flare-blue);
  border-radius: 12px;
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 13.5px; line-height: 1.85;
  color: var(--fg2);
  box-shadow: var(--shadow-sm);
}
.usecases .scope-note .material-symbols-outlined {
  font-size: 22px; color: var(--flare-blue); flex-shrink: 0; margin-top: 1px;
}
.usecases .scope-note b { color: var(--charcoal); }

/* --- Scope: ✓ / ✗ 2カラム --- */
.scope {
  padding: 110px 0;
  background: #fff;
}
.scope .scope-grid {
  margin-top: 56px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.scope .scope-col {
  background: #fff;
  border-radius: 18px;
  padding: 32px 32px 28px;
  border: 1.5px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.scope .scope-col::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 5px;
}
.scope .scope-col.accept::before { background: var(--leap-green); }
.scope .scope-col.decline::before { background: var(--fg3); }
.scope .scope-col.accept { background: linear-gradient(180deg, var(--bg-tint-green) 0%, #fff 60%); }
.scope .scope-col.decline { background: linear-gradient(180deg, var(--pale-smoke) 0%, #fff 60%); }
.scope .scope-head {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 22px;
}
.scope .scope-mark {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.scope .scope-col.accept .scope-mark { background: var(--leap-green); color: #fff; }
.scope .scope-col.decline .scope-mark { background: var(--fg-grayscale); color: #fff; }
.scope .scope-mark .material-symbols-outlined { font-size: 32px; }
.scope .scope-tag {
  font-family: var(--font-en);
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg3);
  margin-bottom: 4px;
}
.scope .scope-col.accept .scope-tag { color: var(--leap-green-hi); }
.scope .scope-title h3 {
  font-size: 22px; font-weight: 700; color: var(--charcoal);
  margin: 0; line-height: 1.4;
}
.scope .scope-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column;
  gap: 14px;
}
.scope .scope-col li {
  display: flex; gap: 14px;
  background: #fff;
  border: 1px solid var(--border-hair);
  border-radius: 12px;
  padding: 16px 18px;
}
.scope .scope-col.decline li { background: rgba(255,255,255,0.7); }
.scope .li-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.scope .scope-col.accept .li-ico { background: var(--bg-tint-green); color: var(--leap-green-hi); }
.scope .scope-col.decline .li-ico { background: var(--bg-grayscale); color: var(--fg-grayscale); }
.scope .li-ico .material-symbols-outlined { font-size: 22px; }
.scope .scope-col li b {
  display: block;
  font-size: 15px; font-weight: 700;
  color: var(--charcoal);
  line-height: 1.45;
  margin-bottom: 4px;
}
.scope .scope-col.decline li b { color: var(--fg2); }
.scope .scope-col li p {
  font-size: 13px; line-height: 1.8;
  color: var(--fg2);
  margin: 0;
}
.scope .scope-footnote {
  margin: 32px auto 0;
  max-width: 880px;
  text-align: center;
  font-size: 12.5px; line-height: 1.85;
  color: var(--fg3);
}

/* Scope responsive */
@media (max-width: 1100px) {
  .scope .scope-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .scope { padding: 64px 0; }
  .scope .scope-col { padding: 24px 22px; }
  .scope .scope-mark { width: 44px; height: 44px; }
  .scope .scope-mark .material-symbols-outlined { font-size: 26px; }
  .scope .scope-title h3 { font-size: 18px; }
  .scope .scope-col li { padding: 14px 16px; gap: 12px; }
  .scope .scope-col li b { font-size: 14px; }
  .scope .scope-col li p { font-size: 12.5px; }
}
@media (max-width: 480px) {
  .scope { padding: 48px 0; }
}

/* --- Pricing: 4本柱 --- */
.pricing { padding: 110px 0; background: var(--pale-smoke); }
.pricing .pricing-pillars {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 64px;
}
.pricing .p-pillar {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 32px 28px;
  display: flex; flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  transition: all 240ms var(--ease-leap);
}
.pricing .p-pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pricing .p-pillar::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 4px;
  background: var(--flare-blue);
}
.pricing .p-pillar.orange::before { background: var(--sunny-orange); }
.pricing .p-pillar .ico {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--bg-tint-blue);
  color: var(--flare-blue);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.pricing .p-pillar.orange .ico { background: var(--bg-tint-warm); color: var(--sunny-orange-hi); }
.pricing .p-pillar .ico .material-symbols-outlined { font-size: 26px; }
.pricing .p-pillar .value {
  font-family: var(--font-en);
  font-size: 40px; font-weight: 700;
  color: var(--charcoal);
  line-height: 1;
  letter-spacing: -0.01em;
}
.pricing .p-pillar.orange .value { color: var(--sunny-orange-hi); }
.pricing .p-pillar .value small {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg2);
  margin-left: 4px;
}
.pricing .p-pillar .label {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--fg3);
  text-transform: uppercase;
  margin-top: 4px;
}
.pricing .p-pillar .tagline {
  font-size: 16px;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.5;
  margin-top: 2px;
}
.pricing .p-pillar .body {
  font-size: 13px;
  color: var(--fg2);
  line-height: 1.85;
  margin: 8px 0 0;
}
.pricing .post-cta { text-align: center; margin-top: 44px; }

/* --- Pricing Usecase: 3カラム活用例 --- */
.pricing-usecase {
  margin-top: 56px;
  background:
    radial-gradient(circle at 0% 0%, rgba(36,129,215,0.10) 0 0, transparent 130px),
    radial-gradient(circle at 100% 0%, rgba(56,196,163,0.10) 0 0, transparent 130px),
    #fff;
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.pu-header {
  padding: 30px 40px 22px;
  text-align: center;
  background: linear-gradient(90deg, rgba(36,129,215,0.08), rgba(56,196,163,0.10));
  border-bottom: 1px solid var(--border-subtle);
}
.pu-model-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(36,129,215,0.1);
  border: 1px solid rgba(36,129,215,0.2);
  border-radius: 9999px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--flare-blue);
  margin-bottom: 14px;
}
.pu-model-tag .material-symbols-outlined { font-size: 15px; }
.pu-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--charcoal);
  margin: 0 0 6px;
}
.pu-sub {
  font-size: 13px;
  color: var(--fg2);
  margin: 0;
}
.pu-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.82fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}
.pu-col {
  padding: 30px 26px;
  background: rgba(255,255,255,0.88);
}
.pu-col-blue  { border-right: 1px solid var(--border-subtle); }
.pu-col-orange { border-left: 1px solid var(--border-subtle); }
.pu-col-header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 13px;
  margin-bottom: 18px;
  border: 1px solid;
  border-radius: 9999px;
  background: #fff;
}
.pu-col-blue   .pu-col-header { color: var(--flare-blue);   border-color: var(--flare-blue); }
.pu-col-orange .pu-col-header { color: var(--leap-green-hi); border-color: var(--leap-green); }
.pu-task {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--border-hair);
  box-shadow: var(--shadow-sm);
}
.pu-task:last-child { margin-bottom: 0; }
.pu-task-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
.pu-col-blue   .pu-task-badge { background: var(--flare-blue);   color: #fff; }
.pu-col-orange .pu-task-badge { background: var(--leap-green); color: #fff; }
.pu-task-body { flex: 1; }
.pu-task-time {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2px;
}
.pu-col-blue   .pu-task-time { color: var(--flare-blue); }
.pu-col-orange .pu-task-time { color: var(--leap-green-hi); }
.pu-task-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 4px;
}
.pu-task-desc {
  font-size: 11px;
  color: var(--fg2);
  line-height: 1.6;
}
.pu-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px 24px;
  background: linear-gradient(180deg, rgba(234,242,251,0.55), #fff);
}
.pu-center::before,
.pu-center::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 34px;
  height: 2px;
  background: currentColor;
  opacity: 0.6;
}
.pu-center::before {
  left: -17px;
  color: var(--flare-blue);
}
.pu-center::after {
  right: -17px;
  color: var(--leap-green);
}
.pu-total {
  font-size: 13px;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: 0.04em;
}
.pu-total b {
  font-family: var(--font-en);
  font-size: 22px;
  color: var(--flare-blue);
  line-height: 1;
}
.pu-donut-wrap {
  position: relative;
  width: 210px;
  height: 210px;
  flex-shrink: 0;
}
.pu-donut {
  position: relative;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, var(--leap-green) 0% 40%, var(--flare-blue) 40% 100%);
  border: 4px solid #fff;
  box-shadow: 0 16px 34px rgba(36,129,215,0.18);
  overflow: hidden;
}
.pu-donut::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.86), inset 0 -18px 28px rgba(0,0,0,0.10);
  pointer-events: none;
}
.pu-slice-label {
  position: absolute;
  z-index: 1;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 5px rgba(0,0,0,0.22);
  line-height: 1.15;
}
.pu-slice-label span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 4px;
}
.pu-slice-label b {
  display: block;
  font-family: var(--font-en);
  font-size: 26px;
  font-weight: 700;
}
.pu-slice-label small {
  display: block;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  opacity: 0.92;
}
.pu-slice-blue {
  left: 22px;
  top: 76px;
}
.pu-slice-green {
  right: 18px;
  top: 78px;
}
.pu-donut-labels {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}
.pu-dlabel {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1.4;
}
.pu-dlabel.pu-dlabel-blue   { background: rgba(36,129,215,0.08); color: var(--flare-blue); }
.pu-dlabel.pu-dlabel-orange { background: rgba(56,196,163,0.10); color: var(--leap-green-hi); }
.pu-footer {
  background: linear-gradient(90deg, rgba(36,129,215,0.07), rgba(56,196,163,0.08));
  border-top: 1px solid var(--border-subtle);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
  flex-wrap: wrap;
  text-align: center;
}
.pu-footer small {
  display: inline-flex;
  align-items: center;
  color: var(--fg3);
  font-size: 11px;
  font-weight: 600;
}
.pu-footer-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--flare-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pu-footer-check .material-symbols-outlined { font-size: 15px; }
@media (max-width: 900px) {
  .pu-body { grid-template-columns: 1fr; }
  .pu-col-blue   { border-right: none; border-bottom: 1px solid var(--border-subtle); }
  .pu-col-orange { border-left:  none; border-top:    1px solid var(--border-subtle); }
  .pu-center { border-bottom: 1px solid var(--border-subtle); padding: 24px; order: -1; }
  .pu-center::before,
  .pu-center::after { display: none; }
  .pu-donut-labels { flex-direction: row; justify-content: center; gap: 12px; }
}
@media (max-width: 480px) {
  .pu-header { padding: 24px 20px 18px; }
  .pu-col { padding: 20px; }
  .pu-footer { padding: 12px 20px; }
  .pu-donut-wrap, .pu-donut { width: 168px; height: 168px; }
  .pu-slice-blue { left: 16px; top: 60px; }
  .pu-slice-green { right: 12px; top: 62px; }
  .pu-slice-label b { font-size: 22px; }
  .pu-slice-label span,
  .pu-slice-label small { font-size: 10px; }
}

/* --- Roadmap: 賃貸→持ち家フロー --- */
.roadmap {
  padding: 110px 0;
  background: #fff;
}
.roadmap .roadmap-flow {
  margin: 56px auto 0;
  max-width: 880px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: stretch;
}
.roadmap .house-frame {
  background: #fff;
  border: 1.5px solid var(--border-subtle);
  border-radius: 18px;
  padding: 32px 28px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.roadmap .house-frame.rent {
  background: linear-gradient(180deg, #fff 0%, #f7fbff 100%);
  border-color: rgba(36,129,215,0.16);
  filter: none;
}
.roadmap .house-frame.own {
  background: var(--gradient-leap-soft);
  border-color: var(--leap-green);
}
.roadmap .house-frame::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 4px;
  background: var(--fg3);
}
.roadmap .house-frame.own::before { background: var(--gradient-leap); }
.roadmap .house-frame.rent::before { background: rgba(36,129,215,0.55); }
.roadmap .house-frame > .material-symbols-outlined {
  font-size: 48px;
  color: var(--fg2);
  margin-bottom: 6px;
}
.roadmap .house-frame.own > .material-symbols-outlined { color: var(--flare-blue); }
.roadmap .house-label {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--fg3);
  text-transform: uppercase;
}
.roadmap .house-frame.own .house-label { color: var(--flare-blue); }
.roadmap .house-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.4;
}
.roadmap .house-brand {
  width: 100%;
  max-width: 200px;
  margin: 4px auto 2px;
}
.roadmap .house-brand img {
  width: 100%; height: auto; display: block;
  mix-blend-mode: multiply;
}
.roadmap .house-frame.rent .house-brand img { filter: none; mix-blend-mode: normal; }
.roadmap .house-meta {
  font-size: 12.5px;
  color: var(--fg2);
  margin-top: 2px;
}
.roadmap .bridge {
  display: flex; align-items: center; gap: 6px;
  padding: 0 6px;
}
.roadmap .bridge-line {
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--fg3) 0%, var(--flare-blue) 100%);
}
.roadmap .bridge-line + .bridge-icon + .bridge-line {
  background: linear-gradient(90deg, var(--flare-blue) 0%, var(--leap-green) 100%);
}
.roadmap .bridge-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--gradient-leap);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(36,129,215,0.28);
}
.roadmap .bridge-icon .material-symbols-outlined { font-size: 22px; }

.roadmap .phases {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.roadmap .phase {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
  transition: all 240ms var(--ease-leap);
}
.roadmap .phase:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.roadmap .phase-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
}
.roadmap .phase .ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--bg-tint-blue);
  color: var(--flare-blue);
  display: flex; align-items: center; justify-content: center;
}
.roadmap .phase .ico .material-symbols-outlined { font-size: 22px; }
.roadmap .phase .tag {
  font-family: var(--font-en);
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--flare-blue);
}
.roadmap .phase h3 {
  font-size: 17px; font-weight: 700; line-height: 1.55;
  color: var(--charcoal);
  margin: 0 0 10px;
}
.roadmap .phase p {
  font-size: 13.5px; line-height: 1.9; color: var(--fg2);
  margin: 0;
}
.roadmap .roadmap-tagline {
  margin: 48px auto 0;
  max-width: 720px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 20px 24px;
  background: var(--gradient-leap-soft);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  font-size: 15.5px;
  color: var(--charcoal);
  text-align: center;
}
.roadmap .roadmap-tagline .material-symbols-outlined {
  color: var(--sunny-orange-hi); font-size: 24px;
}
.roadmap .roadmap-tagline b { color: var(--flare-blue); font-weight: 700; }

/* --- FAQ --- */
.faq {
  padding: 110px 0;
  background: var(--pale-smoke);
}
.faq .faq-list {
  margin: 56px auto 0;
  max-width: 880px;
  display: flex; flex-direction: column;
  gap: 12px;
}
.faq .faq-item {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 240ms var(--ease-leap);
}
.faq .faq-item.open {
  box-shadow: var(--shadow-md);
  border-color: var(--flare-blue);
}
.faq .faq-q {
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  font-family: var(--font-sans);
}
.faq .q-mark {
  font-family: var(--font-en);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--flare-blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  flex-shrink: 0;
}
.faq .q-text {
  font-size: 16px; font-weight: 700;
  color: var(--charcoal);
  line-height: 1.55;
}
.faq .q-toggle {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-tint-blue);
  color: var(--flare-blue);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 240ms var(--ease-leap);
}
.faq .q-toggle .material-symbols-outlined { font-size: 20px; }
.faq .faq-item.open .q-toggle {
  background: var(--flare-blue); color: #fff;
}
.faq .faq-a {
  padding: 0 26px 24px 74px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: 14px;
  margin-left: 0;
  position: relative;
}
.faq .a-mark {
  position: absolute;
  left: 26px;
  top: 0;
  font-family: var(--font-en);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-tint-green);
  color: var(--leap-green-hi);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.faq .faq-a p {
  grid-column: 2;
  font-size: 14px;
  line-height: 1.95;
  color: var(--fg2);
  margin: 0;
}
.faq .faq-footnote {
  margin: 36px auto 0;
  text-align: center;
  font-size: 14px;
  color: var(--charcoal);
}
.faq .faq-footnote b { color: var(--flare-blue); font-weight: 700; }

/* ============================================================
   Responsive: Catalog 2026-05 update
   ============================================================ */
@media (max-width: 1100px) {
  .pricing .pricing-pillars { grid-template-columns: repeat(2, 1fr); }
  .roadmap .phases { grid-template-columns: 1fr; }
  .process.process-3 .steps { flex-wrap: wrap; }
  .process.process-3 .step { min-width: 260px; }
}
@media (max-width: 768px) {
  /* Problem cards */
  .problem .card { padding: 20px 22px; }
  .problem .card p.quote { font-size: 13px; }

  /* Solution trust belt */
  .solution .trust-belt {
    padding: 16px 18px; gap: 10px;
    font-size: 13px;
    align-items: flex-start;
  }

  /* Process: vertical stack on mobile */
  .process.process-3 .steps {
    flex-direction: column;
    overflow: visible;
    grid-template-columns: none;
    padding: 0;
    margin: 56px 0 0;
  }
  .process.process-3 .step {
    max-width: none;
    width: 100%;
    min-height: 0;
    scroll-snap-align: none;
  }
  .process.process-3 .process-arrow { transform: rotate(90deg); }

  /* Pricing */
  .pricing { padding: 64px 0; }
  .pricing .pricing-pillars { grid-template-columns: 1fr; gap: 14px; margin-top: 48px; }
  .pricing .p-pillar { padding: 26px 22px; }
  .pricing .p-pillar .value { font-size: 34px; }

  /* Roadmap */
  .roadmap { padding: 64px 0; }
  .roadmap .roadmap-flow {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 40px;
  }
  .roadmap .bridge {
    flex-direction: column; padding: 4px 0;
    transform: rotate(0);
  }
  .roadmap .bridge-line { width: 2px; height: 14px; }
  .roadmap .bridge-line:first-child { background: linear-gradient(180deg, var(--fg3) 0%, var(--flare-blue) 100%); }
  .roadmap .bridge-line + .bridge-icon + .bridge-line { background: linear-gradient(180deg, var(--flare-blue) 0%, var(--leap-green) 100%); }
  .roadmap .house-frame { padding: 24px 22px; }
  .roadmap .phases { margin-top: 40px; }
  .roadmap .phase { padding: 22px 20px; }
  .roadmap .roadmap-tagline {
    margin-top: 36px;
    padding: 16px 18px;
    font-size: 14px;
    flex-direction: column; gap: 8px;
  }

  /* FAQ */
  .faq { padding: 64px 0; }
  .faq .faq-list { margin-top: 40px; }
  .faq .faq-q { padding: 18px 20px; gap: 12px; }
  .faq .q-text { font-size: 14.5px; }
  .faq .q-mark, .faq .q-toggle { width: 28px; height: 28px; font-size: 13px; }
  .faq .faq-a {
    padding: 0 20px 20px 60px;
    gap: 10px;
  }
  .faq .a-mark { left: 20px; width: 28px; height: 28px; font-size: 13px; }
  .faq .faq-a p { font-size: 13.5px; }

  /* UseCases scope-note */
  .usecases .scope-note { padding: 14px 16px; font-size: 12.5px; gap: 10px; }
}
@media (max-width: 480px) {
  .pricing, .roadmap, .faq { padding: 48px 0; }
}