: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}
/* comparison table */
.cmp{max-width:760px; margin:0 auto; overflow-x:auto}
table.compare{width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:2.5px solid var(--ink); border-radius:16px; overflow:hidden; box-shadow:0 5px 0 var(--ink); font-size:15px}
table.compare th, table.compare td{text-align:left; padding:14px 16px; border-bottom:2px solid var(--line); vertical-align:top}
table.compare thead th{background:var(--ink); color:#fff; font-size:14px}
table.compare thead th.snap{background:var(--green)}
table.compare tbody tr:last-child td{border-bottom:none}
table.compare td.feature{font-weight:800; width:30%}
table.compare td.snap{background:rgba(63,184,119,.08); font-weight:600}
table.compare td.other{color:var(--sub)}
/* 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：同 seo-page-core.css —— 1/1 + height:auto 缺一不可（#644） */
.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}
/* disclaimer */
.disclaimer{max-width:760px; margin:0 auto; background:#fff; border:2px solid var(--line); border-radius:14px; padding:18px 20px; color:var(--sub); font-size:13px; line-height:1.55}
/* 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}
  table.compare{font-size:14px}
  table.compare td.feature{width:34%}
}

/* 日语排版覆盖：原先每个 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;
}