:root{
  --navy:#12305B; --navy-700:#0D2444; --accent:#1F7A45; --warn:#B45309;
  --ink:#111827; --muted:#5B6472; --line:#E2E6EC; --bg:#FFFFFF; --soft:#F5F7FA;
  --radius:14px; --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
a{color:var(--navy); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25; color:var(--navy); margin:0 0 .5em}
h1{font-size:2.35rem; letter-spacing:-.02em}
h2{font-size:1.6rem; margin-top:2.2em}
h3{font-size:1.15rem; margin-top:1.6em}
p{margin:0 0 1em}
ul,ol{margin:0 0 1.2em; padding-left:1.25em}
li{margin:.35em 0}
small,.muted{color:var(--muted)}

/* header */
header.site{border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:20}
header.site .wrap{display:flex; align-items:center; gap:26px; height:66px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--navy); font-size:1.12rem; letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand .mark{width:26px;height:26px;flex:0 0 26px}
nav.main{display:flex; gap:20px; margin-left:auto; align-items:center; font-size:.95rem}
nav.main a{color:var(--muted)}
nav.main a:hover,nav.main a[aria-current]{color:var(--navy)}
.btn{display:inline-block; background:var(--navy); color:#fff !important; padding:11px 20px; border-radius:10px;
  font-weight:600; font-size:.95rem; border:1px solid var(--navy)}
.btn:hover{background:var(--navy-700); text-decoration:none}
.btn.ghost{background:#fff; color:var(--navy) !important}
.btn.ghost:hover{background:var(--soft)}

/* hero */
.hero{padding:64px 0 44px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#F7F9FC 0%,#fff 100%)}
.hero p.lead{font-size:1.2rem; color:var(--muted); max-width:44em}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.kicker{display:inline-block; font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); background:#EAF5EE; padding:5px 11px; border-radius:99px; margin-bottom:16px}

/* content */
main{padding:14px 0 60px}
section{padding:8px 0}
.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin:22px 0}
.card{border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; background:#fff}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.steps{counter-reset:s; list-style:none; padding:0; margin:22px 0}
.steps li{counter-increment:s; position:relative; padding-left:52px; margin:0 0 22px}
.steps li::before{content:counter(s); position:absolute; left:0; top:-2px; width:34px; height:34px; border-radius:50%;
  background:var(--navy); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.95rem}
.steps h3{margin:0 0 .25em}

table{border-collapse:collapse; width:100%; font-size:.95rem; margin:18px 0}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th{background:var(--soft); color:var(--navy); font-weight:600; white-space:nowrap}
td.num{white-space:nowrap}

.note{background:var(--soft); border-left:3px solid var(--navy); border-radius:0 10px 10px 0; padding:16px 20px; margin:22px 0}
.note.warn{border-left-color:var(--warn); background:#FDF6EC}
.faq details{border:1px solid var(--line); border-radius:12px; padding:0 18px; margin:10px 0; background:#fff}
.faq summary{cursor:pointer; font-weight:600; color:var(--navy); padding:15px 0; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--muted); font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .answer{padding:14px 0 4px}
.faq .answer p:last-child{margin-bottom:0}

.breadcrumbs{font-size:.88rem; color:var(--muted); padding:18px 0 0}
.breadcrumbs a{color:var(--muted)}

footer.site{border-top:1px solid var(--line); background:var(--soft); padding:34px 0; font-size:.9rem; color:var(--muted)}
footer.site .cols{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
footer.site a{color:var(--muted)}
footer.site strong{color:var(--navy); display:block; margin-bottom:8px; font-size:.95rem}
.disclaimer{margin-top:26px; padding-top:18px; border-top:1px solid var(--line); font-size:.83rem; line-height:1.55}

@media (max-width:720px){
  h1{font-size:1.85rem} h2{font-size:1.35rem}
  nav.main{display:none}
  .hero{padding:44px 0 32px}
}