/**
 * **ページ間トランジションは使わない。**
 *
 * 一度は @view-transition で「詳細が右へ抜ける」を作ったが、閉じた瞬間に
 * 別の画面が一瞬見える現象が消せなかった。**閉じる側は履歴を戻すので、
 * ブラウザが前の一覧をそのまま復元する。**何も挟まないのが一番速く、
 * 一番確実である。開くときの動きは詳細ページ自身が持つ（detail.css）。
 */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--fg);
  font-family:var(--font-sans);font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-locked{overflow:hidden}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
[hidden]{display:none !important}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.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}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:300;background:var(--signal-bg);color:var(--on-signal);
  padding:10px 16px;border-radius:var(--r-exec)}

/* ── 器（モックと同じ）。**最大幅で中央に寄せない。** 画面いっぱいに使う ──
   横の余白は各セクションが自分で持つ。一覧はカードを端まで敷き詰める */
.content{flex:1;min-width:0;padding:16px 14px 96px}
/* .ax は自分で幅と余白を持つ。.content の余白と二重にしない */
.content.ax{padding:24px 16px 90px}
.content[data-view="list"],
.content[data-view="favorites"],
.content[data-view="sale"]{padding:0 0 96px}
@media (min-width:900px){ .content{padding-bottom:40px} }

/* ── 出口（5-12）。境界線のある実体のあるボタンにする。補助色の小さな文字は出口にならない ── */
.btn-exit{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:0 22px;
  border:1px solid var(--line-btn);border-radius:var(--r-exec);
  color:var(--fg);font-size:14px;font-weight:500;background:transparent;
}
.btn-exit{transition:border-color .16s,color .16s,background .16s}
.btn-exit:hover{border-color:var(--signal);color:var(--signal);background:var(--tint-1)}
.exitrow{margin:40px 0 8px;text-align:center}
@media (min-width:900px){ .exitrow--sp{display:none} }

/* ── 実行するボタン（5-14「形で役割を分ける」）── */
.btn-run{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:0 26px;
  background:var(--signal-bg);color:var(--on-signal);
  border-radius:var(--r-exec);font-size:14.5px;font-weight:700;letter-spacing:.06em;
  transition:opacity .2s,filter .18s;
}
.btn-run:hover{filter:brightness(1.07)}
.btn-run .num{font-size:17px;font-weight:500}

/* ── ヘッダー。**追従して背景を透かす**（モックと同じ 52px） ── */
.hd{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;height:52px;padding:0 14px;
  background:var(--veil);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)}

/* ロゴは黒字＋赤のマーク。暗い地では明度だけ反転させ、色相を戻して赤を保つ
   （invert だけでは赤がシアンになる） */
.hd__mark{display:flex;align-items:center;flex:0 0 auto;transition:opacity .16s}
.hd__mark:hover{opacity:.7}
.brandimg{display:block;height:19px;width:auto;filter:invert(1) hue-rotate(180deg)}
:root[data-theme="light"] .brandimg{filter:none}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .brandimg{filter:none}
}

.hd__sub{font-size:11.5px;letter-spacing:.02em;color:var(--fg-dim);
  border-left:1px solid var(--line-2);padding-left:11px;margin-left:3px;white-space:nowrap}

/* 右側のボタンは全部同じ形にする。検索だけ特別扱いしない */
.hd__search{display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;
  flex:0 0 auto;white-space:nowrap;                  /* 「ランキング」が2行に割れるのを防ぐ */
  border:1px solid var(--line);border-radius:var(--r-data);color:var(--fg-mute);font-size:12px;
  transition:border-color .18s,color .18s}
.hd__search:first-of-type,.hd__fav{margin-left:auto}
.hd__search ~ .hd__search{margin-left:0}
.hd__search:hover{border-color:var(--line-2);color:var(--fg-dim)}
.hd__search svg{display:block}
.hd__label{display:grid;place-items:center;line-height:1}
/* 配色の切り替えはアイコン1つ。文字を持たないので幅を詰める */
#themeBtn{padding:0 10px;font-size:13px}
.hd__fav{padding:0 11px}
.hd__fav.is-on{border-color:var(--sale);color:var(--sale)}
.hd__favn{display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;
  background:var(--sale);color:#fff;border-radius:var(--r-data);font-size:10.5px}

@media (max-width:560px){
  .hd{gap:8px;padding:0 10px}
  .brandimg{height:17px}
  .hd__sub{display:none}
  /* .hd__search span（クラス＋要素）のほうが詳細度が高いので、同じ強さまで上げる */
  .hd__search .hd__label{display:none}
  #openRank,#searchBtn{padding:0;width:32px;justify-content:center}
  #openRank{border-radius:var(--r-exec)}
}

/* デスクトップではサイドレールを全画面に常設する（5-9）。
   **モックと同じく画面いっぱいの2カラム。** 中央に寄せず、間の余白も持たない */
.withrail{display:flex;align-items:flex-start}
@media (min-width:900px){
  :root{--grid-gap:3px}
  .withrail > #rail{order:-1}
}

/* ── 一覧ではない画面（お気に入り・単一軸・ランキング）の共通の器 ──
   **読みものなので幅を切る。** 一覧はカードを端まで敷き詰めるが、
   こちらは見出しと本文が主役なので 940px で中央に置く（モックの .ax） */
.ax{max-width:940px;margin:0 auto;padding:24px 16px 90px}
.ax__t{font-family:var(--font-serif);font-size:clamp(24px,6.6vw,36px);font-weight:900;
  letter-spacing:.04em;line-height:1.3;text-align:center}
.ax__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);margin-top:22px}
@media (min-width:900px){ .ax__grid{grid-template-columns:repeat(6,1fr)} }
.rk__sub{font-size:12px;color:var(--fg-mute);margin-top:7px;line-height:1.8;text-align:center}

.crumb{padding:0 0 14px}
.crumb__b{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px 0 11px;
  border:1px solid var(--line-btn);border-radius:var(--r-data);
  font-size:12.5px;letter-spacing:.04em;color:var(--fg-dim);
  transition:border-color .16s,color .16s,background .16s}
.crumb__b:hover{border-color:var(--signal);color:var(--signal);background:var(--tint-1)}

.favbar{margin-top:20px;padding:16px;border:1px solid var(--line);
  border-radius:var(--r-data);background:var(--ink-2)}
.favbar__t{font-size:12.5px;font-weight:700;letter-spacing:.06em;margin-bottom:8px}
.favbar__p{font-size:11.5px;color:var(--fg-dim);line-height:1.9;margin-bottom:13px}
.favbar__p b{color:var(--fg)}
.favbar__p a{color:var(--signal);text-decoration:underline}
.favbar__b{display:flex;align-items:center;justify-content:center;
  height:40px;padding:0 16px;margin:0 auto;
  border:1px solid var(--signal);border-radius:var(--r-data);color:var(--signal);
  font-size:12.5px;letter-spacing:.04em;transition:background .16s}
.favbar__b:hover{background:var(--tint-1)}
.favbar__url{margin-top:12px;padding:11px;background:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-data);font-family:var(--font-num);font-size:10.5px;color:var(--fg-dim);
  word-break:break-all;line-height:1.7}

.favempty{padding:52px 0 20px;text-align:center;color:var(--fg-mute)}
.favempty__t{font-family:var(--font-serif);font-size:17px;color:var(--fg-dim);margin-bottom:9px}
.favempty__p{font-size:12.5px;line-height:1.9}

.page__h1{font-family:var(--font-serif);font-size:clamp(24px,6.6vw,36px);font-weight:900;
  letter-spacing:.04em;line-height:1.3;padding:8px 0 6px}

/* 検索候補。**写真が無い候補が4人に3人**なので、プレースホルダで行の高さを保つ */
.srch{position:fixed;inset:0;z-index:110;background:var(--veil-solid);padding:16px}
.srch__box{max-width:560px;margin:0 auto;position:relative}
.srch__box input{width:100%;background:var(--ink-2);border:1px solid var(--line-2);
  border-radius:var(--r-data);padding:13px 44px 13px 14px;font-size:16px}
.srch__close{position:absolute;right:6px;top:6px;font-size:20px;padding:6px 10px}
.srch__out{list-style:none;margin-top:10px}
.srch__out li a{display:flex;align-items:center;gap:10px;padding:9px 6px;
  border-bottom:1px solid var(--hair)}
.srch__out li[aria-selected="true"] a{background:var(--tint-1)}
.srch__out img,.srch__noimg{width:34px;height:45px;flex:0 0 auto;border-radius:var(--r-data);
  object-fit:cover;background:var(--ink-3)}
.srch__name{font-size:14px}
.srch__ruby{font-size:11px;color:var(--fg-mute)}
.srch__n{margin-left:auto;font-size:11px;color:var(--fg-mute)}
.srch__msg{margin-top:12px;font-size:12.5px;color:var(--fg-dim)}
.srch__msg a{color:var(--signal);text-decoration:underline}

/* 五十音索引 */
.kana{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0 16px}
.kana__i{display:inline-flex;align-items:baseline;gap:5px;
  border:1px solid var(--line-2);border-radius:var(--r-data);padding:8px 12px;font-size:14px}
.kana__i .num{font-size:10.5px;color:var(--fg-mute)}
.kana__i.is-on{background:var(--sel-bg);border-color:var(--sel-bg);color:var(--on-sel)}
.kana__i.is-on .num{color:var(--sel-sub)}

/* ── トップのヒーロー（5-9①）。**モックの .hero をそのまま持ってきている** ── */
.hero{padding:38px 16px 30px;border-bottom:1px solid var(--line);text-align:center}
@media (min-width:900px){ .hero{padding:64px 24px 46px} }
/**
 * **狭い画面でも1行に収める。** 2行になると「最短で。」だけが下に落ちて、
 * 文の勢いがそこで切れる。
 *
 * 6vw だと 375px 端末で 325px になり、使える 315px（画面 375 − .content の
 * 左右 14px − .hero の左右 16px）を超えて折り返していた。
 * この見出しは14文字で、実測すると幅 ≒ 文字サイズ × 14.43。
 *
 * **狭い画面では .hero の左右も詰める。** 16px のままだと 5.4vw までしか
 * 上げられず、375px 端末で 20.2px にしかならない。10px にすると使える幅が
 * 左右で 12px 増え、5.8vw（375px 端末で 21.8px）まで上げられる。
 * 14文字を1行に収める上限がここなので、**これ以上大きくするなら文言を短くする。**
 * **文字数を変えたらこの値も見直すこと。**
 */
.hero__t{font-family:var(--font-serif);font-size:clamp(17px,5.8vw,40px);font-weight:900;
  line-height:1.35;letter-spacing:.03em;margin:12px 0 14px;text-align:center}
@media (max-width:560px){ .hero{padding-left:10px;padding-right:10px} }
.hero__t em{font-style:normal;color:var(--signal)}
.hero__cta{display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;max-width:440px;margin:24px auto 0;height:58px;padding:0 24px;
  background:var(--signal-bg);color:var(--on-signal);border-radius:var(--r-exec);
  font-size:15.5px;font-weight:700;letter-spacing:.08em;
  transition:transform .2s cubic-bezier(.2,.8,.3,1),filter .18s}
.hero__cta:hover{filter:brightness(1.07)}
.hero__cta:active{transform:scale(.985)}

/* 数字が主役。狭いときは3列、広いときは1行に並べて縦線で仕切る */
.hero__stat{display:grid;grid-template-columns:repeat(3,1fr);gap:15px 0;margin-top:18px;text-align:center}
.hero__stat div{font-family:var(--font-num);font-size:10.5px;color:var(--fg-mute);
  letter-spacing:.06em;padding:0 6px}
.hero__stat div + div{border-left:1px solid var(--line-2)}
.hero__stat div:nth-child(3n+1){border-left:0}
.hero__stat b{display:block;font-size:20px;color:var(--fg);font-weight:500;margin-bottom:1px;
  transition:color .34s}
@media (min-width:900px){
  .hero__stat{display:flex;justify-content:center;gap:0}
  .hero__stat div{text-align:center;padding:0 26px}
  .hero__stat div:nth-child(3n+1){border-left:1px solid var(--line-2)}
  .hero__stat div:first-child{border-left:0}
}
/* 立ち上がりを少しずつずらす。数え上げと歩調を合わせる */
.hero__stat.is-pre div{opacity:0;transform:translateY(7px)}
.hero__stat.is-in div{transition:opacity .52s cubic-bezier(.2,.8,.3,1),
  transform .52s cubic-bezier(.2,.8,.3,1)}
.hero__stat.is-in div:nth-child(2){transition-delay:.07s}
.hero__stat.is-in div:nth-child(3){transition-delay:.14s}
.hero__stat.is-in div:nth-child(4){transition-delay:.21s}
.hero__stat.is-in div:nth-child(5){transition-delay:.28s}
.hero__stat b.is-run{color:var(--fg-dim)}

.hero__note{margin:11px 0 0;font-size:11.5px;line-height:1.95;color:var(--fg-mute);
  letter-spacing:.01em;text-align:center}
.hero__note b{color:var(--fg-dim);font-weight:400}
.hero__note a{color:var(--signal);text-decoration:underline}
.cats{margin:34px 0}
.cats__g{margin-top:16px}
.cats__h{font-size:12px;color:var(--fg-mute);margin-bottom:7px}
.saved{display:block;width:190px;flex:0 0 auto;padding:12px;background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-data)}
.saved__t{display:block;font-size:12.5px;line-height:1.5}
.saved__n{display:block;margin-top:6px;font-size:16px}

/* ── 単一軸ページ（モックの .ax*）── */
/* index の判定と理由をページ自身が持つ（5-10）。**書き手にだけ見せる** */
.ax__badge{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;
  border-radius:var(--r-data);font-family:var(--font-num);font-size:10px;
  letter-spacing:.1em;margin-bottom:16px}
.ax__badge--in{background:var(--live-bg);color:var(--live);border:1px solid var(--live-line)}
.ax__badge--no{background:var(--ink-2);color:var(--fg-mute);border:1px solid var(--line-2)}

/* 実数サマリー。**この数字が薄さ対策の要**なので、横一列で数だけを読ませる */
.ax__nums{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 26px;
  margin:20px 0 24px;padding:16px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ax__nums div{font-family:var(--font-num);font-size:10px;color:var(--fg-mute);
  letter-spacing:.06em;text-align:center}
.ax__nums b{display:block;font-size:19px;color:var(--fg);font-weight:500;margin-bottom:2px}

/* 300字以上の長文なので副文字ではなく主文字で組む（5-14 ③） */
.ax__lead{font-size:13.5px;line-height:2.05;color:var(--fg)}
.ax__lead p + p{margin-top:1em}
.ax__warn{padding:16px;border:1px dashed var(--line-2);border-radius:var(--r-data);
  font-size:12.5px;color:var(--fg-mute);line-height:1.9}
.ax__warn b{color:var(--signal)}
.ax__note{font-size:11.5px;color:var(--fg-mute);line-height:1.9;margin-top:14px}
.ax__note a{color:var(--signal);text-decoration:underline}

.ax__st{font-family:var(--font-serif);font-size:16px;font-weight:700;letter-spacing:.09em;
  margin:34px 0 14px;display:flex;align-items:baseline;gap:10px}
.ax__st span{font-family:var(--font-num);font-size:10px;color:var(--fg-mute);
  letter-spacing:.06em;font-weight:400}

.ax__more{display:flex;align-items:center;justify-content:space-between;width:100%;
  height:52px;padding:0 18px;margin-top:14px;
  border:1px solid var(--signal-dim);border-radius:var(--r-data);
  color:var(--signal);font-size:13.5px;letter-spacing:.05em;transition:background .16s}
.ax__more:hover{background:var(--tint-1)}
.ax__rel{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
/* 期間タブ。**1つの枠に連結する**（モックの .tabs）。
   ばらばらの箱にすると、隣の軸チップと見分けが付かなくなる */
.tabs{display:flex;gap:0;margin:20px 0 4px;border:1px solid var(--line);
  border-radius:var(--r-data);overflow:hidden;width:fit-content}
.tab{padding:9px 18px;font-size:12.5px;color:var(--fg-mute);letter-spacing:.06em;
  border-right:1px solid var(--line);transition:background .16s,color .16s}
.tab:last-child{border-right:0}
.tab:hover:not(.is-on){background:var(--tint-1);color:var(--fg-dim)}
.tab.is-on{background:var(--signal-bg);color:var(--on-signal);font-weight:700}
/* ── ランキング（モックの .rk / .rw）。**格子ではなく縦のリスト。**
   順位・写真・名前・属性・点を1行で読ませるほうが順位表として速い ── */
.rk .ax__t,.rk__t{font-family:var(--font-serif);font-size:clamp(22px,6vw,30px);
  font-weight:900;letter-spacing:.05em;line-height:1.3;text-align:left}
.rk .rk__sub{text-align:left}
.rk__axis{display:flex;flex-wrap:wrap;gap:5px;margin:16px 0 22px}
.rk__axis .chip{font-size:11.5px;padding:6px 9px}
.rk__list{display:flex;flex-direction:column}

.rw{display:flex;align-items:center;gap:12px;width:100%;padding:11px 4px;
  text-align:left;border-bottom:1px solid var(--line);transition:background .16s}
.rw:hover{background:var(--ink-2)}
.rw__no{flex:0 0 40px;font-family:var(--font-num);font-size:19px;font-weight:500;
  color:var(--fg-mute);text-align:right;font-variant-numeric:tabular-nums}
/* 上位3位だけ差し色。表彰台を色で示す */
.rw:nth-child(-n+3) .rw__no{color:var(--signal);font-size:23px}
.rw__ph{flex:0 0 44px;height:58px;display:grid;place-items:center;position:relative;
  overflow:hidden;background:linear-gradient(158deg,var(--ink-3),var(--ink))}
.rw__ph img{width:44px;height:44px;object-fit:cover;display:block}
.rw__ini{font-family:var(--font-serif);font-size:19px;color:rgba(255,255,255,.28)}
.rw__mid{flex:1;min-width:0}
.rw__n{display:block;font-family:var(--font-serif);font-size:15.5px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rw__m{display:block;font-family:var(--font-num);font-size:10px;color:var(--fg-mute);margin-top:2px}
.rw__fl{display:inline-flex;gap:3px;margin-left:6px;vertical-align:1px}
.rw__bar{flex:0 0 78px}
.rw__track{display:block;height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.rw__fill{display:block;height:100%;background:var(--signal)}
.rw__sc{display:block;font-family:var(--font-num);font-size:9.5px;color:var(--fg-mute);
  margin-top:4px;text-align:right}
@media (max-width:520px){ .rw__bar{display:none} }

/* 写真の上に乗る小さなしるし（モックの .fl）。テーマに追従させない（5-14④） */
.fl{font-family:var(--font-num);font-style:normal;font-size:9px;letter-spacing:.08em;
  padding:2px 5px;background:var(--fixed-badge-bg);color:var(--fixed-on-badge)}
.fl--vr{color:var(--fixed-on-vr);background:var(--fixed-vr-bg);font-weight:500}
.fl--new{color:var(--fixed-live);border:1px solid var(--live-line)}
.fl--sale{color:var(--fixed-on-sale);background:var(--fixed-sale);font-weight:500}


/* ══════════════════════════════════════════════════════════
   固定ページの本文（/data/ /method/ 規約 など）。
   **300字を超える長文なので、副文字ではなく主文字で組む**（5-14 ③）。
   ══════════════════════════════════════════════════════════ */
.prose{font-size:14.5px;line-height:2.05;color:var(--fg)}
/* 見出しと本文をくっつけない。明朝の大見出しは字面が大きいぶん、間を広めに取る */
.ax__t + .prose{margin-top:40px}
.prose > * + *{margin-top:1.1em}
.prose h2{font-family:var(--font-serif);font-size:19px;font-weight:700;letter-spacing:.06em;
  margin-top:2.4em;padding-bottom:10px;border-bottom:1px solid var(--line)}
.prose h3{font-size:14.5px;font-weight:700;letter-spacing:.04em;margin-top:1.9em;color:var(--fg)}
.prose h2 + *,.prose h3 + *{margin-top:.8em}
.prose p{color:var(--fg-dim)}
.prose strong,.prose b{color:var(--fg);font-weight:700}
.prose a{color:var(--signal);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.4em;color:var(--fg-dim)}
.prose li + li{margin-top:.5em}
.prose small{font-size:11.5px;color:var(--fg-mute)}

/* 数字の表。**この表がこのページの主役**なので、行を詰めすぎない */
.prose table,.avdb-data__table{width:100%;border-collapse:collapse;margin:1.4em 0;
  font-family:var(--font-num);font-size:13px}
.prose th,.avdb-data__table th{padding:10px 12px;border-bottom:1px solid var(--line-2);
  text-align:left;font-family:var(--font-sans);font-size:11.5px;font-weight:400;
  color:var(--fg-mute);letter-spacing:.04em;white-space:nowrap}
.prose td,.avdb-data__table td{padding:11px 12px;border-bottom:1px solid var(--line);
  vertical-align:top}
.prose tbody tr:hover,.avdb-data__table tbody tr:hover{background:var(--tint-1)}
/* 1列目は項目名。数字ではないので本文の書体で組む */
.prose tbody td:first-child,.avdb-data__table tbody td:first-child{
  font-family:var(--font-sans);color:var(--fg);white-space:nowrap}
.prose td small,.avdb-data__table td small{display:block;margin-top:2px;
  font-size:10.5px;color:var(--fg-mute)}
.avdb-data__note{font-size:11.5px;color:var(--fg-mute);line-height:1.9}

@media (max-width:640px){
  .prose table,.avdb-data__table{display:block;overflow-x:auto}
}

/**
 * 読み物への導線（SF_Articles）。
 *
 * **記事は主役ではない。** 主役は絞り込みで、これは読み物への入口にすぎない。
 * 地を一段落として面を分け、文字は小さく、色は控えめにする。
 * ただし**リンクだと分かる程度には**残す（下線をホバーで出す）。
 */
.sfoot{border-top:1px solid var(--line);background:var(--ink-2);
  padding:34px 16px 26px}
/* **列は等幅で畳む。** flex で折り返すと、あぶれた1列だけが左に落ちて
   「入り切らなかった」ように見える。grid なら折り返しが意図に見える */
.sfoot__nav{display:grid;gap:26px 40px;max-width:940px;margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.sfoot__k{margin:0 0 9px;font-size:10.5px;letter-spacing:.14em;
  color:var(--fg-mute);font-family:var(--font-num)}
.sfoot__col ul{list-style:none;margin:0;padding:0}
.sfoot__col li{margin:0 0 6px}
.sfoot__col a{font-size:12.5px;line-height:1.6;color:var(--fg);text-decoration:none}
.sfoot__col a:hover{color:var(--signal);text-decoration:underline}

@media (max-width:640px){
  .sfoot{padding:26px 16px 20px}
  .sfoot__nav{gap:20px 28px}
  .sfoot__col{min-width:calc(50% - 14px)}
}