/* ============================================================
   ABテスト B案：料金セクション（index-ab02-plan-b.html 専用）
   ------------------------------------------------------------
   ・共有された「クリニックスタイル_料金パーツ_ABテストB案_08.html」の
     <style> をそのまま移設したもの（B案のデザインをそのまま使う方針）
   ・全て .csp 配下にスコープされているため、v2.css / style.css とは干渉しない
   ・末尾の「プランスライダー」節だけが当方で追加した差分
   ============================================================ */

/* ============================================================
   既存LP（style.css）の広域指定を打ち消すリセット
   ------------------------------------------------------------
   style.css は `a,body,li,p,span,ul,…{font-family:…;color:#424242}` と
   `li,p,…{font-size:14px}` を要素セレクタで当てている。要素への直接指定は
   親からの継承に勝つため、これが無いとネイビーのカード内が黒文字になる。
   v2.css が .v2-pricing に対してやっているのと同じ対処。
   ※ この節は B案側のCSSより前に置くこと（後続の .csp ルールに勝たせるため）
   ============================================================ */

.csp,
.csp * {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* ============================================================
   料金パーツ（.csp スコープ）
   ============================================================ */

.csp,
.csp *,
.csp *::before,
.csp *::after { box-sizing: border-box; }

.csp {
  --csp-navy:      #233267;
  --csp-navy-deep: #1C2857;
  --csp-orange:    #F2944C;
  --csp-orange-lt: #F5A87A;
  --csp-orange-dk: #E07F35;
  --csp-cream:     #FBF7F0;
  --csp-line:      #E7E0D4;
  --csp-rule:      #E3E8F0;
  --csp-blue-bg:   #EDF4FC;
  --csp-beige-bg:  #FDF3E7;
  --csp-text:      #233267;
  --csp-text-sub:  #4A5B76;

  margin: 0;
  padding: 56px 20px 64px;
  background: var(--csp-cream);
  color: var(--csp-text);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.csp__inner {
  max-width: 1040px;
  margin: 0 auto;
}

/* ---------- 見出し ---------- */

.csp__head {
  text-align: center;
  margin-bottom: 32px;
}

.csp__title {
  margin: 0 0 14px;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.01em;
  font-feature-settings: "palt";
  color: var(--csp-navy);
}

.csp__accent { color: var(--csp-orange); }

.csp__lead {
  margin: 0;
  font-size: 16px;
  color: var(--csp-text-sub);
  font-feature-settings: "palt";
}

/* ---------- 上部の3カード ---------- */

.csp__badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0 0 74px;
  padding: 0;
  list-style: none;
}

.csp-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 16px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--csp-line);
  border-radius: 18px;
  box-shadow: 0 3px 14px rgba(35, 50, 103, .05);
}

.csp-badge__body {
  min-width: 0;
}

.csp-badge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #FCEBDA;
}

.csp-badge__icon svg { display: block; width: 52px; height: 52px; }

.csp-badge__title {
  margin: 0;
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--csp-navy);
  font-feature-settings: "palt";
}

.csp-badge__num {
  display: block;
  margin-top: 4px;
  line-height: 1.15;
  color: var(--csp-orange);
}

.csp-badge__figure { font-size: 29px; letter-spacing: -0.01em; }
.csp-badge__unit   { font-size: 18.5px; }
.csp-badge__tail   { font-size: 18.5px; color: var(--csp-navy); }
.csp-badge__em     { color: var(--csp-orange); }

.csp-badge__foot {
  padding-top: 4px;
}

/* 見出しと説明のあいだの短い区切り */
.csp-badge__rule {
  display: block;
  width: 40px;
  height: 3px;
  margin: 4px auto 6px;
  border-radius: 2px;
  background: #F8CFA8;
}

.csp-badge__desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--csp-text-sub);
  font-feature-settings: "palt";
}

/* ---------- プランカード共通 ---------- */

.csp__plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
  margin-bottom: 60px;
}

.csp-card {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 24px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--csp-line);
  border-radius: 16px;
  box-shadow: 0 3px 14px rgba(35, 50, 103, .05);
}

/* プラン見出し帯（アイコン＋プラン名＋対象コピー） */

.csp-card__band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 14px;
  border-radius: 12px;
  text-align: center;
}

.csp-card__band--zero  { background: var(--csp-blue-bg); }
.csp-card__band--order { background: var(--csp-beige-bg); }
.csp-card__band--rec   { background: transparent; padding: 6px 4px 10px; }

.csp-card__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
}

.csp-card__icon svg { display: block; width: 100%; height: 100%; }

.csp-card__icon--zero  { color: #3A5AA5; }
.csp-card__icon--order { color: var(--csp-orange); }
.csp-card__icon--rec   { color: #F5B45C; }

.csp-card__name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  font-feature-settings: "palt";
  color: var(--csp-navy);
}

.csp-card__for {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--csp-text-sub);
  font-feature-settings: "palt";
}

/* 料金 */

.csp-card__price {
  margin: 0;
  padding: 22px 0 20px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--csp-navy);
  border-bottom: 1px solid var(--csp-rule);
}

.csp-card__num  { font-size: 64px; letter-spacing: -0.01em; }
.csp-card__unit { font-size: 25px; margin-left: 2px; }
.csp-card__tax  { font-size: 16px; margin-left: 2px; }

/* 機能リスト */

.csp-card__list {
  width: fit-content;
  max-width: 100%;
  margin: 20px auto 28px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.csp-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 13px;
  font-size: 15px;
  line-height: 1.6;
  font-feature-settings: "palt";
}

.csp-card__list li:last-child { margin-bottom: 0; }

.csp-card__check {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 3px;
}

.csp-card__check svg { display: block; width: 100%; height: 100%; }

/* ---------- おすすめカード（スタンダード） ---------- */

.csp-card--rec {
  margin: -46px 0 -26px;
  padding: 0;
  background: var(--csp-navy);
  border-color: var(--csp-navy);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(35, 50, 103, .22);
}

.csp-card__ribbon {
  margin: 0;
  padding: 10px 8px;
  background: linear-gradient(180deg, var(--csp-orange-lt) 0%, var(--csp-orange) 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.csp-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px 18px 24px;
}

.csp-card--rec .csp-card__name {
  font-size: 24px;
  color: #fff;
}

.csp-card--rec .csp-card__for { color: #C7D3E4; }

.csp-card--rec .csp-card__price {
  color: #fff;
  padding: 18px 0 18px;
  border-bottom-color: rgba(255, 255, 255, .22);
}

.csp-card--rec .csp-card__num  { font-size: 52px; }
.csp-card--rec .csp-card__unit { font-size: 21px; }
.csp-card--rec .csp-card__tax  { font-size: 15px; }

.csp-note {
  margin: 0 0 14px;
  font-feature-settings: "palt";
}

/* 左右に細いラインを伸ばして、囲まずに見出しとして立てる */
.csp-note__lead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #fff;
}

.csp-note__lead::before,
.csp-note__lead::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255, 255, 255, .24);
}

.csp-note__sub {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.6;
  color: #A9BAD2;
}

/* ---------- オーダーメイドプラン ---------- */

.csp-card__estimate {
  margin: 26px 0 3px;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  font-feature-settings: "palt";
  color: var(--csp-navy);
}

.csp-card__estimate-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--csp-text-sub);
}

.csp-card__hr {
  display: block;
  width: 100%;
  height: 1px;
  margin: 17px 0 18px;
  background: var(--csp-rule);
}

.csp-card__desc {
  margin: 0 0 22px;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--csp-text-sub);
  font-feature-settings: "palt";
}

/* 特徴の3行 */
.csp-feat {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 24px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.csp-feat li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.csp-feat li:last-child { margin-bottom: 0; }

.csp-feat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FCEBDA;
}

.csp-feat__icon svg { display: block; width: 22px; height: 22px; }

.csp-feat__t {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--csp-navy);
  font-feature-settings: "palt";
}

.csp-feat__s {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--csp-text-sub);
  font-feature-settings: "palt";
}

/* ---------- ボタン ---------- */

.csp-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 15px 42px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.csp-btn__arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  line-height: 1;
}

.csp-btn--ghost {
  border: 1.5px solid var(--csp-navy);
  color: var(--csp-navy);
  background: transparent;
}

.csp-btn--solid {
  border: 1.5px solid var(--csp-orange);
  background: var(--csp-orange);
  color: #fff;
}

.csp-btn--pill {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 15px 52px 15px 28px;
  border: 1.5px solid var(--csp-orange);
  background: var(--csp-orange);
  color: #fff;
}

@media (hover: hover) {
  .csp-btn--ghost:hover { background: var(--csp-navy); color: #fff; }
  .csp-btn--solid:hover,
  .csp-btn--pill:hover { background: var(--csp-orange-dk); border-color: var(--csp-orange-dk); }
}

.csp-btn:focus-visible {
  outline: 3px solid #1A6FD4;
  outline-offset: 2px;
}

/* ---------- 下部の資料ダウンロードバー ---------- */

.csp__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 20px 26px;
  background: #fff;
  border: 1px solid var(--csp-line);
  border-radius: 14px;
}

.csp__foot-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  color: var(--csp-orange);
}

.csp__foot-icon svg { display: block; width: 100%; height: 100%; }

.csp__lead-br,
.csp__foot-br { display: none; }

.csp__foot-text {
  margin: 0;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--csp-navy);
  font-feature-settings: "palt";
}

/* ============================================================
   レスポンシブ
   ============================================================ */

/* 3カラムのまま横幅が狭くなる領域（タブレット横〜小型ノート） */
@media screen and (min-width: 901px) and (max-width: 1060px) {
  .csp-card { padding: 14px 12px 20px; }
  .csp-card__body { padding: 16px 12px 20px; }
  .csp-card__band { gap: 10px; padding: 14px 10px; }
  .csp-card__icon { width: 34px; height: 34px; }
  .csp-card__name { font-size: 17.5px; }
  .csp-card--rec .csp-card__name { font-size: 19px; }
  .csp-card__for { font-size: 11.5px; }
  .csp-card__num { font-size: 52px; }
  .csp-card__unit { font-size: 21px; }
  .csp-card__tax { font-size: 14px; }
  .csp-card--rec .csp-card__num { font-size: 40px; }
  .csp-card--rec .csp-card__unit { font-size: 17px; }
  .csp-card--rec .csp-card__tax { font-size: 12.5px; }
  .csp-card__estimate { font-size: 20px; }
  .csp-card__estimate-sub { font-size: 12px; }
  .csp-feat li { gap: 9px; margin-bottom: 12px; }
  .csp-feat__icon { width: 34px; height: 34px; }
  .csp-feat__icon svg { width: 19px; height: 19px; }
  .csp-feat__t { font-size: 12.5px; }
  .csp-feat__s { font-size: 11px; }
  .csp-card__list li { font-size: 13.5px; }
  .csp-card__desc { font-size: 11.5px; }
  .csp-note__lead { font-size: 12px; gap: 7px; }
  .csp-note__sub { font-size: 11px; }
  .csp-btn { font-size: 14.5px; padding: 14px 32px; }
  /* pill は矢印ぶんの右パディングが要るので、上の一括指定に潰させない */
  .csp-btn--pill { padding: 14px 46px 14px 28px; }
  .csp-btn__arrow { right: 14px; }
  .csp__foot-text { font-size: 14.5px; }
  .csp-badge { gap: 9px; padding: 22px 8px; }
  .csp-badge__icon { width: 68px; height: 68px; }
  .csp-badge__icon svg { width: 41px; height: 41px; }
  .csp-badge__title { font-size: 15px; }
  .csp-badge__figure { font-size: 24px; }
  .csp-badge__unit, .csp-badge__tail { font-size: 15px; }
  .csp-badge__desc { font-size: 11px; }
  .csp-badge__rule { width: 32px; margin: 3px auto 5px; }
}

@media screen and (max-width: 900px) {
  .csp__title { font-size: 30px; }

  /* タブレット以下も3列のまま。横並びをやめてアイコンを上に出し、幅を詰める */
  .csp__badges {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 28px;
  }

  .csp-badge {
    flex-direction: column;
    gap: 10px;
    padding: 18px 10px;
  }

  .csp-badge__icon { width: 64px; height: 64px; }
  .csp-badge__icon svg { width: 38px; height: 38px; }
  .csp-badge__title { font-size: 14.5px; }
  .csp-badge__figure { font-size: 22px; }
  .csp-badge__unit, .csp-badge__tail { font-size: 14.5px; }
  .csp-badge__desc { font-size: 11px; }
  .csp-badge__rule { width: 30px; height: 2px; }

  .csp-card--rec { margin: 0; }

  .csp__foot {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }

  /* タブレット以下は「、」で改行させる */
  .csp__foot-br { display: inline; }

  /* 全幅だと間延びするので、文字量ぶんの幅に収める */
  .csp-btn--pill {
    width: auto;
    /* min-width は max-width に勝つので、min() で頭打ちにしないと
       320px 幅の端末でページ全体に横スクロールが出る */
    min-width: min(280px, 100%);
  }
}

@media screen and (max-width: 600px) {
  /* リード文はSPだけ「、」で改行させる */
  .csp__lead-br { display: inline; }

  /* SPも3列。1列あたり約100pxになるので、さらに詰める */
  .csp__badges { gap: 8px; }
  .csp-badge { gap: 8px; padding: 14px 6px; }
  .csp-badge__icon { width: 52px; height: 52px; }
  .csp-badge__icon svg { width: 30px; height: 30px; }
  .csp-badge__title { font-size: 12.5px; line-height: 1.4; }
  .csp-badge__figure { font-size: 18px; }
  .csp-badge__unit, .csp-badge__tail { font-size: 12.5px; }
  .csp-badge__desc { font-size: 10px; line-height: 1.5; }
  .csp-badge__rule { width: 24px; margin: 3px auto 4px; }
}

@media screen and (max-width: 480px) {
  .csp { padding: 40px 16px 48px; }
  .csp__title { font-size: 25px; }
  .csp__lead { font-size: 14.5px; text-align: left; }
  .csp-card__num { font-size: 56px; }
  .csp-card--rec .csp-card__num { font-size: 44px; }
}

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

/* ============================================================
   プランスライダー（当方追加分）
   中央に来たカードだけを原寸で見せ、左右は縮めて奥行きを出す。
   Swiper 11（LP本体で読み込み済みの swiper-bundle）を使用。
   ============================================================ */

.csp-plans-carousel{
  position:relative;
  margin-bottom:44px;
  padding:26px 0 8px;   /* おすすめリボンと影が切れないための逃げ */
  overflow:hidden;
}

/* grid を flex に上書き（Swiper は wrapper が flex である前提） */
.csp__plans.swiper-wrapper{
  display:flex;
  align-items:stretch;  /* 元のグリッド同様、3枚の高さを揃える */
  gap:0;
  margin-bottom:0;
}

/* 可視枚数は幅で決める（slidesPerView:"auto" なので CSS 側が効く）
   PC: 常に3枚 / タブレット: 1.5枚 / SP: 1枚＋チラ見せ */
.csp-plans-carousel .swiper-slide{
  display:flex;
  width:33.333%;        /* PC: 幅によらず常に3枚。340px固定だと901〜1060pxで入りきらない */
  height:auto;          /* カードの実高に従わせる */
  padding:0 7px;
}

.csp-plans-carousel .csp-card{
  width:100%;
  transform:scale(.9);
  transform-origin:center center;
  opacity:.82;
  transition:transform .38s ease, opacity .38s ease, box-shadow .38s ease;
}

.csp-plans-carousel .swiper-slide-active .csp-card{
  transform:scale(1);
  opacity:1;
}

/* おすすめカードのはみ出し量はグリッド前提の値なので、スライダーでは無効化 */
.csp-plans-carousel .csp-card--rec{ margin:0; }

.csp-plans-carousel .swiper-slide-active .csp-card--rec{
  box-shadow:0 18px 38px rgba(35,50,103,.26);
}

/* CTAをカード下端に揃える */
.csp-plans-carousel .csp-btn{ margin-top:auto; }

/* ---------- ナビゲーション ---------- */

.csp-plans-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:18px;
}

.csp-plans-prev,
.csp-plans-next{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  padding:0;
  color:var(--csp-navy);
  background:#fff;
  border:1px solid var(--csp-line);
  border-radius:50%;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}

.csp-plans-prev svg,
.csp-plans-next svg{ width:20px; height:20px; }

/* ループ有効時は disabled にならないが、無効化した場合の保険として残す */
.csp-plans-prev.swiper-button-disabled,
.csp-plans-next.swiper-button-disabled{ opacity:.35; cursor:default; }

@media (hover:hover){
  .csp-plans-prev:not(.swiper-button-disabled):hover,
  .csp-plans-next:not(.swiper-button-disabled):hover{ color:#fff; background:var(--csp-navy); }
}

.csp-plans-prev:focus-visible,
.csp-plans-next:focus-visible{ outline:3px solid var(--csp-orange); outline-offset:2px; }

/* ドットと prev/next を一列に並べる箱 */
.csp-plans-carousel .csp-plans-nav .csp-plans-pg{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  position:static;
  width:auto;
  left:auto;
  transform:none;
}

.csp-plans-dot{
  width:9px;
  height:9px;
  padding:0;
  background:#C3CCDC;
  border:0;
  border-radius:5px;
  cursor:pointer;
  transition:background .2s ease, width .2s ease;
}

.csp-plans-dot.is-active{
  width:24px;
  background:var(--csp-orange);
}

.csp-plans-dot:focus-visible{ outline:3px solid var(--csp-orange); outline-offset:2px; }

/* ---------- SP ---------- */

/* ---------- タブレット：1.5枚 ---------- */

@media screen and (max-width:900px){
  .csp-plans-carousel{
    margin-bottom:24px;
    padding:20px 0 4px;
  }

  .csp-plans-carousel .swiper-slide{
    width:66%;          /* 中央1枚＋左右で計0.5枚（1 ÷ 0.66 ≒ 1.5枚） */
    max-width:520px;
    padding:0 7px;
  }

  .csp-plans-carousel .csp-card{ transform:scale(.92); }
}

/* ---------- SP：1枚＋左右チラ見せ ---------- */

@media screen and (max-width:600px){
  .csp-plans-carousel .swiper-slide{
    width:86%;
    max-width:360px;
    padding:0 6px;
  }

  .csp-plans-carousel .csp-card{ transform:scale(.94); }
}

/* ---------- スライダーが動かない場合の保険 ---------- */
/* JS が落ちても3枚が読める状態を保つ */

.csp-plans-carousel:not(.swiper-initialized){ overflow:visible; }
.csp-plans-carousel:not(.swiper-initialized) .csp__plans{ flex-wrap:wrap; justify-content:center; }
/* ループ用の複製はスライダーが動いていないときに出すと同じプランが2回並ぶ */
.csp-plans-carousel:not(.swiper-initialized) [data-loop-copy]{ display:none; }
.csp-plans-carousel:not(.swiper-initialized) .csp-card{ transform:none; opacity:1; }
.csp-plans-carousel:not(.swiper-initialized) .csp-plans-nav{ display:none; }

/* ---------- 狭いSP（〜360px）---------- */
/* おすすめカードの価格は white-space:nowrap なので、320px級の端末では
   「98,000円（税別）」が 214px になりカード内寸（約200px）を超えて
   .csp-card--rec{overflow:hidden} に無言で切られる。実測して収まる値に落とす */

@media screen and (max-width: 360px){
  .csp-card--rec .csp-card__num  { font-size: 38px; }
  .csp-card--rec .csp-card__unit { font-size: 15px; }
  .csp-card--rec .csp-card__tax  { font-size: 11.5px; }
}

@media (prefers-reduced-motion:reduce){
  .csp-plans-carousel .csp-card{ transition:none; }
}


/* ============================================================
   リンク色の再指定
   ------------------------------------------------------------
   style.css の `a:link,a:visited{color:#0277bd;text-decoration:underline}` は
   詳細度 (0,1,1) で上の `.csp *` (0,1,0) に勝つため、ボタンごとに再指定する
   ============================================================ */

.csp a,
.csp a:link,
.csp a:visited,
.csp a:hover { text-decoration: none; }

.csp a.csp-btn--ghost,
.csp a.csp-btn--ghost:link,
.csp a.csp-btn--ghost:visited { color: var(--csp-navy); }

.csp a.csp-btn--solid,
.csp a.csp-btn--solid:link,
.csp a.csp-btn--solid:visited,
.csp a.csp-btn--solid:hover,
.csp a.csp-btn--pill,
.csp a.csp-btn--pill:link,
.csp a.csp-btn--pill:visited,
.csp a.csp-btn--pill:hover { color: #fff; }

@media (hover: hover) {
  .csp a.csp-btn--ghost:hover { color: #fff; }
}