:root{
  --green:#3FB877; --gold:#FFC83D; --ink:#2B2540; --cream:#FFF4EA;
  --sub:#6f6884; --line:#e7ddcf; --snap:#F0825C; --purple:#7C5CFF;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); background:var(--cream);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(43,37,64,.05) 1.3px,transparent 1.4px);
  background-size:16px 16px;
}
a{color:inherit}
.wrap{max-width:960px; margin:0 auto; padding:0 20px}
/* top bar */
header{position:sticky; top:0; z-index:5; background:rgba(255,244,234,.92); backdrop-filter:blur(8px); border-bottom:2px solid var(--ink)}
.bar{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{display:flex; align-items:center; gap:9px; font-weight:900; font-size:18px; text-decoration:none}
.brand img{width:30px; height:30px}
.navcta{display:inline-block; background:var(--green); color:#fff; font-weight:800; text-decoration:none; padding:9px 16px; border:2px solid var(--ink); border-radius:999px; box-shadow:0 3px 0 var(--ink); font-size:14px}
/* hero */
.hero{text-align:center; padding:54px 0 30px}
.eyebrow{display:inline-block; background:var(--gold); color:var(--ink); font-weight:800; font-size:13px; padding:5px 14px; border:2px solid var(--ink); border-radius:999px; box-shadow:0 3px 0 var(--ink)}
h1{font-size:clamp(32px,7vw,52px); line-height:1.08; margin:18px 0 10px; letter-spacing:-.01em}
h1 .hl{color:var(--green)}
.lede{font-size:clamp(17px,2.6vw,21px); color:var(--ink); max-width:640px; margin:0 auto 8px}
.micro{color:var(--sub); font-size:14px; margin:10px 0 24px}
.ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{display:inline-block; font-weight:900; text-decoration:none; padding:14px 26px; border:2.5px solid var(--ink); border-radius:14px; box-shadow:0 5px 0 var(--ink); font-size:17px; transition:transform .05s, box-shadow .05s}
.btn:active{transform:translateY(3px); box-shadow:0 2px 0 var(--ink)}
.btn-primary{background:var(--snap); color:#fff}
.btn-ghost{background:#fff; color:var(--ink)}
/* sections */
section{padding:40px 0}
h2{font-size:clamp(24px,4.4vw,34px); text-align:center; margin:0 0 8px}
.sectsub{text-align:center; color:var(--sub); max-width:600px; margin:0 auto 28px}
.prose{max-width:680px; margin:0 auto; font-size:17px}
.prose p{margin:0 0 16px}
/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.step{background:#fff; border:2.5px solid var(--ink); border-radius:18px; padding:22px 18px; box-shadow:0 5px 0 var(--ink)}
.step .n{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--green); color:#fff; font-weight:900; border:2px solid var(--ink); margin-bottom:12px}
.step h3{margin:0 0 6px; font-size:19px}
.step p{margin:0; color:var(--sub); font-size:15px}
/* gallery：图是 320x320 方图，框必须 1/1（3/4+cover 会裁掉怪兽左右，#644）。
   🔴 height:auto 缺不得：<img> 的 width/height 属性会赢过 aspect-ratio（#609）。守卫 e2e/seo-hero.spec.ts */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.gallery img{width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:14px; border:2.5px solid var(--ink); box-shadow:0 5px 0 var(--ink); background:#fff}
/* features */
.feats{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; max-width:760px; margin:0 auto}
.feat{display:flex; gap:12px; background:#fff; border:2px solid var(--ink); border-radius:14px; padding:16px}
.feat .ic{font-size:24px; line-height:1}
.feat b{display:block; margin-bottom:2px}
.feat span{color:var(--sub); font-size:14px}
/* faq */
.faq{max-width:680px; margin:0 auto}
details{background:#fff; border:2px solid var(--ink); border-radius:12px; padding:0 18px; margin-bottom:12px}
summary{font-weight:800; cursor:pointer; padding:16px 0; list-style:none; font-size:17px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; float:right; color:var(--green); font-weight:900}
details[open] summary::after{content:"–"}
details p{margin:0 0 16px; color:var(--ink)}
/* related */
.rel{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:760px; margin:0 auto}
.rel a{display:block; background:#fff; border:2px solid var(--ink); border-radius:14px; padding:18px; text-decoration:none; font-weight:800; box-shadow:0 4px 0 var(--ink)}
.rel a span{display:block; color:var(--sub); font-weight:500; font-size:14px; margin-top:4px}
/* final cta */
.final{text-align:center; background:var(--ink); color:#fff; border-radius:24px; padding:48px 24px; margin:20px 0}
.final h2{color:#fff}
.final .sectsub{color:#cfc8e0}
/* footer */
footer{border-top:2px solid var(--line); padding:30px 0 50px; text-align:center; color:var(--sub); font-size:14px}
footer a{font-weight:700; text-decoration:none; margin:0 8px}
@media(max-width:640px){
  .steps,.gallery{grid-template-columns:1fr 1fr}
  .feats{grid-template-columns:1fr}
  .rel{grid-template-columns:1fr}
}

/* B 代（seo-longtail.css）的左文右图 hero，整块**并入**这里 —— #610。
   🔴 不换 CSS 文件：换过一次，静默砸掉 .steps/.gallery/.hl/.sectsub/.micro/.ctas/.btn-primary/.btn-ghost
      八类样式，而只看 hero 截图完全发现不了。
   🔴 全挂在 .hero-split 修饰类下：这份 CSS 有 23 个页面共用（7 en + 8 ja + 8 zh），
      改裸 .hero 会让还没转换的那些页当场变样。逐页加类 = 逐页铺开，未转换的零影响。 */
.hero-split{text-align:left; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(240px,.7fr);
  gap:28px; align-items:center}
/* 🔴 hero 里的按钮要收一档：左列只有约 600px，而 A 代 .btn 是给 920px 通栏调的（padding 14/26·17px）。
      照原尺寸进两列布局，三颗按钮会各占一行（实测 3 行）——比改造前的 1 行还差。收到 B 代那个密度。 */
.hero-split .ctas .btn{padding:12px 18px; font-size:16px}
.hero-split .lede{margin:0 0 10px}      /* 原来是 margin:0 auto 8px —— auto 会把它居中，与左对齐打架 */
.hero-split .micro{margin:0 0 16px}
.hero-split .ctas{justify-content:flex-start}
/* 🔴 正文跟着左对齐：.prose 自带 margin:0 auto，在 960px 的 .wrap 里左边缘落在 140px，
      hero 左对齐后两者错开一大截（.steps 本来就是对齐的，只有 prose 不是）。 */
.hero-split ~ .prose, .hero-split ~ * .prose{margin-left:0; margin-right:0}
.hero-card{border:2.5px solid var(--ink); border-radius:14px; background:var(--panel);
  box-shadow:0 6px 0 var(--ink); overflow:hidden; max-width:420px}
/* 🔴 与 seo-longtail.css 里那份**同名同义**（B 代页面用），改一边要同步另一边。
      height:auto 缺不得：<img> 的 width/height 是表现层提示，CSS 不写 height 时它赢过 aspect-ratio，
      比例被忽略、方图被竖裁（#609 实锅）。 */
.hero-card img{display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover}
.hero-card p{margin:0; padding:14px 16px; color:var(--sub); font-size:14px}
@media(max-width:760px){
  .hero-split{grid-template-columns:1fr; text-align:center}
  .hero-split .ctas{justify-content:center}
  .hero-split .lede,.hero-split .micro{margin-left:auto; margin-right:auto}
  .hero-card{margin:0 auto}
  .hero-split ~ .prose, .hero-split ~ * .prose{margin-left:auto; margin-right:auto}
}

/* 日语排版覆盖：原先每个 ja 页各存一份内联 CSS，与 en/zh 版的唯一差别就是下面这些。 */
html[lang="ja"] body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  line-height:1.7;
  /* 与上面的 JP 字族成对，缺一不可（#622）：理由写在 client/src/index.css 的 `:root:lang(ja)` 那一处，别在这里再抄一遍。 */
  line-break:strict;
}
html[lang="ja"] h1{font-size:clamp(30px,6.4vw,50px); line-height:1.14}
html[lang="ja"] .lede{font-size:clamp(16px,2.5vw,20px); max-width:660px}
html[lang="ja"] h2{font-size:clamp(22px,4.2vw,32px)}
html[lang="ja"] .sectsub{max-width:620px}
html[lang="ja"] .prose{font-size:16.5px}