@charset "UTF-8";
/* ==========================================================================
   淮田達也（さぼてん）｜AI事業サイト 試作
   既存サイトの配色（グレージュ・深い緑）と余白感を引き継ぐ。
   装飾は増やさず、「読みやすさ」と「次に押すものが分かること」を優先する。

   角の考え方：面は4px、ボタンは6px、ラベルだけ丸。3種類までに抑える。
   ========================================================================== */

:root {
  /* Surface — グレージュ */
  --bg:        #ede8e2;
  --bg-2:      #e3ddd5;
  --warm:      #f7f5f1;
  --surface:   #ffffff;
  /* Brand — 深い緑 */
  --green:     #00695b;
  --green-d:   #004e43;
  --green-pale:#dcebe7;
  /* Accent */
  --gold:      #9b7b35;
  --alert:     #b3261e;
  --alert-bg:  #fdecea;
  /* Ink */
  --ink:       #1a1a1a;
  --ink-soft:  #4b5159;
  --ink-mute:  #6f757c;
  /* Line */
  --line:      #d8d2c9;
  --line-2:    #bdb6ab;
  /* Spacing */
  --xs: 5px; --s: 10px; --m: 20px; --n: 30px; --l: 50px; --xl: 80px; --xxl: 110px;
  --maxw: 1080px;
  --r-panel: 4px;
  --r-btn: 6px;
  --r-pill: 50px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: .07em;
  font-feature-settings: normal;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.5; letter-spacing: .07em; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.latin { font-family: "Josefin Sans", system-ui, sans-serif; letter-spacing: .1em; }
.s { display: inline-block; }           /* 日本語を変な位置で折り返さない塊 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- 試作であることの帯 ---------- */
.proto-bar {
  background: var(--ink); color: #fff; font-size: 12px; line-height: 1.8;
  padding: 9px 24px; text-align: center; letter-spacing: .04em;
}
.proto-bar b { font-weight: 500; color: #ffd98a; }

/* ---------- ボタン ---------- */
.btn {
  display: inline-block; text-decoration: none; text-align: center;
  font-family: inherit; font-weight: 500; font-size: 15px; letter-spacing: .07em;
  padding: 15px 30px 16px; min-height: 44px; border-radius: var(--r-btn);
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.btn._primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn._primary:hover { background: var(--green-d); border-color: var(--green-d); }
.btn._ghost { background: transparent; color: var(--green); border-color: var(--line-2); }
.btn._ghost:hover { background: var(--surface); border-color: var(--green); }
.btn._onDark { background: #fff; color: var(--green); border-color: #fff; }
.btn._onDark:hover { opacity: .9; }
.btn._outlineLight { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn._outlineLight:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn._small { font-size: 13px; padding: 11px 18px 12px; }
.btn._block { display: block; width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn._pending { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* 特定商取引法の表記など（/legal/） */
.legal { max-width: 46em; }
.legal dl { display: grid; grid-template-columns: 13em 1fr; border-top: 1px solid var(--line); }
.legal dt, .legal dd { padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.9; }
.legal dt { font-weight: 500; }
.legal h2 { font-size: 18px; margin: var(--l) 0 var(--s); }
.legal p, .legal li { font-size: 14.5px; line-height: 1.95; }
.legal ul { padding-left: 1.4em; list-style: disc; }
.todo { color: #b3261e; font-weight: 500; }
.payflow { display: grid; grid-template-columns: 1fr; gap: 6px; margin: var(--m) 0; padding: 0; list-style: none; }
.payflow._row { grid-template-columns: repeat(3, 1fr); gap: var(--s); }
.payflow li { background: var(--surface); border-radius: 4px; padding: 10px 14px; font-size: 13.5px; line-height: 1.7; }
.payflow li b { font-weight: 500; color: var(--green); margin-right: .8em; }
.payflow._row li b { display: block; margin-right: 0; }
/* 個別セッションのプラン表（/learn/#plans） */
.plans-h { font-size: 16px; margin: var(--l) 0 var(--s); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--m); }
.plans._2 { grid-template-columns: repeat(2, 1fr); max-width: calc((100% - var(--m)) * 2 / 3 + var(--m) / 2); }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 20px; display: flex; flex-direction: column; }
.plan p { margin: 0; }
.plan-time { font-size: 30px; font-weight: 500; color: var(--green); line-height: 1.3; }
.plan-time small, .plan-price small { font-size: 13px; font-weight: 400; margin-left: 2px; }
.plan-price { font-size: 20px; font-weight: 500; margin-top: 4px; }
.plan-price small { color: var(--ink-mute); margin-left: 6px; }
.plan-for, .plan-per { font-size: 13.5px; line-height: 1.8; margin: var(--s) 0 var(--m) !important; flex: 1; }
.plan-per { color: var(--green); font-weight: 500; }
.plan-bonus { display: table; margin-top: 6px; font-size: 13px; font-weight: 500; color: #fff; background: var(--green); border-radius: 999px; padding: 2px 10px; }
@media (max-width: 720px) {
  .plans, .plans._2 { grid-template-columns: 1fr; max-width: none; }
  .legal dl { grid-template-columns: 1fr; }
  .legal dt { border-bottom: none; padding-bottom: 0; }
  .payflow._row { grid-template-columns: 1fr; }
}

/* 補助リンク（主ボタンと強弱をつける） */
.tlink {
  display: inline-block; font-size: 14px; font-weight: 500; color: var(--green);
  text-decoration: none; border-bottom: 1px solid var(--green); padding-bottom: 2px;
}
.tlink:hover { color: var(--green-d); border-color: var(--green-d); }

/* ---------- ヘッダー ---------- */
header.site {
  position: sticky; top: 0; z-index: 60;
  background: rgba(237,232,226,.95); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--m); height: 74px; }
.logo { text-decoration: none; line-height: 1.25; flex: none; }
.logo b { display: block; font-size: 16px; font-weight: 500; letter-spacing: .1em; color: var(--green); }
.logo small { display: block; font-size: 10px; letter-spacing: .12em; color: var(--ink-mute); margin-top: 3px; }
.nav-links { display: flex; align-items: center; gap: 22px; list-style: none; }
.nav-links a { font-size: 13.5px; text-decoration: none; white-space: nowrap; }
.nav-links a:hover { color: var(--green); }
.nav-links a[aria-current="page"] { color: var(--green); border-bottom: 2px solid var(--green); padding-bottom: 3px; }
.nav-cta { flex: none; }
.nav-links li.m-cta { display: none; }   /* スマホ用のCTA。広い画面では右上のボタンを使う */
.nav-cta .btn { padding: 11px 20px 12px; font-size: 13.5px; }
.nav-toggle {
  display: none; background: transparent; border: 1px solid var(--line-2);
  border-radius: var(--r-btn); padding: 9px 14px; min-height: 44px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--ink);
}

/* ---------- ブロック ---------- */
.block { padding: var(--xxl) 0; }
.block._tight { padding: var(--xl) 0; }
.block._warm { background: var(--warm); }
.block._alt { background: var(--bg-2); }
.block._white { background: var(--surface); }
.block._green { background: var(--green); color: #fff; }
.block._green h2, .block._green h3 { color: #fff; }
.block._green p, .block._green .lead { color: rgba(255,255,255,.85); }
.block._green .kicker { color: #ffd98a; }

.kicker { display: block; font-size: 11px; font-weight: 500; letter-spacing: .2em; color: var(--green); margin-bottom: var(--m); }
.head { margin-bottom: var(--l); }
.head h2 { font-size: clamp(21px, 2.7vw, 28px); }
.head .lead { margin-top: var(--m); font-size: 16px; line-height: 1.95; max-width: 40em; color: var(--ink-soft); }
.sub-h { font-size: 18px; margin-bottom: var(--m); }

/* ---------- ファーストビュー ---------- */
.hero { background: var(--surface); padding: var(--xl) 0 var(--xxl); border-bottom: 1px solid var(--line); }
.hero-in { display: grid; grid-template-columns: 1.12fr .88fr; gap: var(--xl); align-items: center; }
.hero h1 { font-size: clamp(26px, 4.2vw, 42px); line-height: 1.42; letter-spacing: .05em; }
.hero h1 em { font-style: normal; color: var(--green); }
.hero .sub { margin-top: var(--n); font-size: 17px; line-height: 2; color: var(--ink-soft); }
.hero .who { margin-top: var(--n); padding-top: var(--m); border-top: 1px solid var(--line); font-size: 14px; line-height: 1.95; color: var(--ink-soft); }
.hero .who b { font-weight: 500; color: var(--ink); }
.hero .cta { display: flex; gap: var(--s); flex-wrap: wrap; margin-top: var(--l); }
.hero-pic img { width: 100%; border-radius: var(--r-panel); }
.motto { display: inline-block; margin-bottom: var(--m); font-size: 12px; font-weight: 500; letter-spacing: .16em;
  color: var(--green); background: var(--green-pale); border-radius: var(--r-pill); padding: 6px 16px; }

/* ---------- 困りごと ---------- */
.pains { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--m); }
.pain { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--green);
  border-radius: var(--r-panel); padding: var(--n); line-height: 1.95; }
.pain b { display: block; font-weight: 500; margin-bottom: var(--xs); }
.pain span { font-size: 14px; color: var(--ink-soft); }

/* ---------- カード一般 ---------- */
.cards { display: grid; gap: var(--m); }
.cards._2 { grid-template-columns: repeat(2, 1fr); }
.cards._3 { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: var(--n); display: flex; flex-direction: column; }
.card h3 { font-size: 18px; margin-bottom: var(--s); }
.card p { color: var(--ink-soft); line-height: 1.95; font-size: 15px; }
.card p + p { margin-top: var(--s); }
.card .grow { flex: 1; }
.card .foot { margin-top: var(--m); }

/* ---------- 状態ラベル ---------- */
.tag { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: .1em;
  border-radius: var(--r-pill); padding: 4px 12px; border: 1px solid; }
.tag._demo { color: var(--gold); border-color: var(--gold); background: #fbf5e9; }
.tag._wip  { color: var(--ink-soft); border-color: var(--line-2); background: var(--bg-2); }
.tag._live { color: var(--green); border-color: var(--green); background: var(--green-pale); }

/* ---------- 事例 ---------- */
.work { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel);
  overflow: hidden; display: flex; flex-direction: column; }
.work > img { width: 100%; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.work .ph { border-bottom: 1px solid var(--line); }
.work-body { padding: var(--n); display: flex; flex-direction: column; flex: 1; }
.work h3 { font-size: 18px; margin: var(--s) 0 var(--m); }
.work dl { margin-bottom: var(--m); }
.work dt { font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--green); margin-top: var(--m); }
.work dt:first-of-type { margin-top: 0; }
.work dd { font-size: 15px; line-height: 1.95; color: var(--ink-soft); margin-top: var(--xs); }
.work .foot { margin-top: auto; padding-top: var(--m); }

/* 仮素材（画像がないところ） */
.ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: repeating-linear-gradient(135deg, var(--bg-2), var(--bg-2) 10px, #dcd5cb 10px, #dcd5cb 20px);
  color: var(--ink-soft); font-size: 12px; line-height: 1.9; padding: var(--m); aspect-ratio: 16 / 10;
}
.ph b { display: block; font-weight: 500; font-size: 13px; margin-bottom: 4px; }

/* ---------- 2つの入口 ---------- */
.doors { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--m); }
.door { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: var(--l) var(--n) var(--n); display: flex; flex-direction: column; }
.door .mark { font-family: "Josefin Sans", system-ui, sans-serif; font-size: 13px; letter-spacing: .18em; color: var(--green); }
.door h3 { font-size: 20px; margin: var(--s) 0 var(--m); }
.door p { color: var(--ink-soft); line-height: 1.95; flex: 1; }
.door .foot { margin-top: var(--n); }

/* ---------- 流れ ---------- */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s); }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: var(--m); }
.step .n { font-family: "Josefin Sans", system-ui, sans-serif; font-size: 11px; letter-spacing: .16em; color: var(--green); }
.step h3 { font-size: 15px; margin: var(--xs) 0 var(--s); }
.step p { font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); }

/* ---------- Q&A ---------- */
.qa { display: flex; flex-direction: column; gap: var(--s); }
details.qa-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
details.qa-item > summary {
  list-style: none; cursor: pointer; padding: 20px var(--n); min-height: 44px;
  display: flex; align-items: center; gap: 14px; font-weight: 500; font-size: 16px; line-height: 1.7;
}
details.qa-item > summary::-webkit-details-marker { display: none; }
details.qa-item > summary .q { flex: none; font-family: "Josefin Sans", system-ui, sans-serif; color: var(--green); }
details.qa-item > summary .mk { flex: none; width: 20px; height: 20px; position: relative; margin-left: auto; }
details.qa-item > summary .mk::before,
details.qa-item > summary .mk::after { content: ""; position: absolute; background: var(--green); transition: transform .2s, opacity .2s; }
details.qa-item > summary .mk::before { top: 9px; left: 1px; width: 18px; height: 2px; }
details.qa-item > summary .mk::after { top: 1px; left: 9px; width: 2px; height: 18px; }
details.qa-item[open] > summary .mk::after { transform: scaleY(0); opacity: 0; }
.qa-body { padding: 0 var(--n) var(--n); color: var(--ink-soft); line-height: 2; font-size: 15px; }
.qa-body p + p { margin-top: var(--s); }

/* ---------- 注記 ---------- */
.note {
  background: var(--warm); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: var(--r-panel); padding: var(--m) var(--n); font-size: 13.5px; line-height: 2; color: var(--ink-soft);
}
.note b { font-weight: 500; color: var(--ink); }
.note + .note { margin-top: var(--s); }

/* ---------- 最後の案内 ---------- */
.closing { text-align: center; }
.closing h2 { font-size: clamp(21px, 2.7vw, 28px); margin-bottom: var(--m); }
.closing p { line-height: 2; max-width: 34em; margin: 0 auto var(--l); }
.closing .cta { display: flex; gap: var(--s); justify-content: center; flex-wrap: wrap; }

/* ---------- フォーム ---------- */
.formwrap { max-width: 720px; margin: 0 auto; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: var(--l); }
.field { margin-bottom: var(--n); }
.field:last-of-type { margin-bottom: 0; }
.field > label, .field .q { display: block; font-weight: 500; font-size: 15px; margin-bottom: var(--s); }
.req, .opt { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 3px;
  font-size: 11px; font-weight: 500; letter-spacing: .06em; vertical-align: 2px; }
.req { color: #fff; background: var(--green); }
.opt { color: var(--ink-soft); background: var(--bg-2); }
.hint { font-size: 13px; color: var(--ink-mute); line-height: 1.9; margin-bottom: var(--s); }
input[type="text"], input[type="email"], select, textarea {
  width: 100%; font-family: inherit; font-size: 16px; line-height: 1.6; letter-spacing: .07em;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-btn);
  padding: 13px 14px; -webkit-appearance: none; appearance: none;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
textarea { min-height: 130px; resize: vertical; display: block; }
input:focus, select:focus, textarea:focus { border-color: var(--green); }
.field._err input, .field._err select, .field._err textarea { border-color: var(--alert); background: var(--alert-bg); }
.err { display: none; margin-top: var(--s); font-size: 13.5px; color: var(--alert); line-height: 1.8; }
.field._err .err { display: block; }
.errsum { display: none; background: var(--alert-bg); border: 1px solid var(--alert); border-radius: var(--r-panel);
  padding: var(--m) var(--n); margin-bottom: var(--n); }
.errsum._on { display: block; }
.errsum b { display: block; color: var(--alert); font-weight: 500; margin-bottom: var(--s); }
.errsum ul { margin: 0; padding-left: 1.2em; font-size: 14px; line-height: 2; }
.errsum a { color: var(--alert); }
.form-foot { margin-top: var(--l); display: flex; gap: var(--s); flex-wrap: wrap; }
.form-foot .btn { flex: 1; min-width: 200px; }

/* 確認画面 */
.review dl { display: grid; grid-template-columns: 180px 1fr; }
.review dt, .review dd { padding: var(--m) 0; border-bottom: 1px solid var(--line); }
.review dt { font-weight: 500; font-size: 14px; }
.review dd { color: var(--ink-soft); line-height: 1.95; white-space: pre-wrap; }
.done { text-align: center; }
.done .mark { font-size: 40px; line-height: 1; margin-bottom: var(--m); }
.done h2 { font-size: 22px; margin-bottom: var(--m); }
.done p { color: var(--ink-soft); line-height: 2; max-width: 32em; margin: 0 auto var(--n); }

/* ---------- 一覧リンク（植物ページなど） ---------- */
.linklist { display: flex; flex-direction: column; gap: var(--s); }
.linkrow { display: flex; align-items: center; gap: 14px; min-height: 44px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 16px 20px;
  transition: border-color .2s; }
.linkrow:hover { border-color: var(--green); }
.linkrow .ic { flex: none; width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--bg-2);
  display: flex; align-items: center; justify-content: center; font-size: 17px; }
.linkrow .tx { flex: 1; min-width: 0; }
.linkrow .tx b { display: block; font-weight: 500; font-size: 15px; }
.linkrow .tx small { display: block; font-size: 12px; color: var(--ink-mute); margin-top: 3px; letter-spacing: .04em; }
.linkrow .ar { flex: none; color: var(--green); font-size: 13px; }

.gal3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s); }
.gal3 img { border-radius: var(--r-panel); background: var(--bg-2); }

/* ---------- プロフィール ---------- */
.about { display: grid; grid-template-columns: 320px 1fr; gap: var(--xl); align-items: start; }
.about-pic img { width: 100%; border-radius: var(--r-panel); }
.about p { line-height: 2.1; color: var(--ink-soft); }
.about p + p { margin-top: var(--m); }
.about .name { font-size: 22px; font-weight: 500; color: var(--ink); margin-bottom: var(--m); }
.about .name small { display: block; font-size: 11px; letter-spacing: .14em; color: var(--ink-mute); margin-top: 6px; }

/* ---------- フッター上の案内帯 ---------- */
.fbband { background: var(--warm); border-top: 1px solid var(--line); padding: var(--l) 0; }
.fband-in { display: flex; align-items: center; justify-content: space-between; gap: var(--n); flex-wrap: wrap; }
.fband .tx { flex: 1; min-width: 16em; }
.fband .tx b { display: block; font-weight: 500; font-size: 17px; margin-bottom: var(--xs); }
.fband .tx span { font-size: 14px; line-height: 1.95; color: var(--ink-soft); }
.fband .pics { display: flex; gap: var(--s); flex: none; }
.fband .pics img { width: 62px; height: 62px; object-fit: cover; border-radius: var(--r-panel); background: var(--bg-2); }
@media (max-width: 880px) {
  .fbband { padding: var(--n) 0; }
  .fband-in { gap: var(--m); }
  .fband .btn { width: 100%; text-align: center; }
  .fband .pics { display: none; }
}

/* ---------- フッター ---------- */
footer.site { background: var(--green); color: rgba(255,255,255,.76); padding: var(--xl) 0 var(--l); }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--l); }
.foot-grid h3 { font-size: 13px; color: #fff; margin-bottom: var(--m); letter-spacing: .12em; }
.foot-grid ul { list-style: none; display: flex; flex-direction: column; gap: var(--s); font-size: 13.5px; }
.foot-grid a { color: rgba(255,255,255,.8); text-decoration: none; }
.foot-grid a:hover { color: #fff; }
.foot-name { font-size: 18px; letter-spacing: .12em; color: #fff; }
.foot-name small { display: block; font-size: 11px; letter-spacing: .1em; margin-top: 8px; color: rgba(255,255,255,.66); line-height: 1.9; }
.foot-bottom { margin-top: var(--l); padding-top: var(--n); border-top: 1px solid rgba(255,255,255,.2); font-size: 11px; line-height: 2.1; }
.foot-legal { font-size: 12px; }
.foot-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; margin-right: 1.2em; }

/* ---------- 画面が狭いとき ---------- */
@media (max-width: 1000px) {
  .nav-links { gap: 15px; }
  .nav-links a { font-size: 12.5px; }
  .flow { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .block { padding: var(--xl) 0; }
  .hero { padding: var(--l) 0 var(--xl); }
  .hero-in, .about { grid-template-columns: 1fr; gap: var(--n); }
  .hero-pic, .about-pic { max-width: 320px; }
  .pains, .cards._2, .cards._3, .doors, .foot-grid { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .hero .cta .btn, .closing .cta .btn { width: 100%; }
  .panel { padding: var(--n) var(--m); }
  .review dl { grid-template-columns: 1fr; }
  .review dt { padding-bottom: 0; border-bottom: 0; }
  .form-foot { flex-direction: column-reverse; }
  .form-foot .btn { width: 100%; }
  .nav { height: 66px; }
  .nav-links {
    position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--bg); padding: var(--s) 24px var(--m); gap: 0;
    border-bottom: 1px solid var(--line); display: none;
  }
  .nav-links._open { display: flex; }
  .nav-links li a { display: block; padding: 14px 0; min-height: 44px; font-size: 14.5px; }
  .nav-toggle { display: block; }
  .nav-cta { display: none; }
  .nav-links li.m-cta { display: block; margin-top: var(--s); }
  .nav-links li.m-cta .btn { display: block; width: 100%; }
  details.qa-item > summary { padding: 18px var(--m); font-size: 15px; }
  .qa-body { padding: 0 var(--m) var(--m); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}