*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#ecfeff;color:#164e63;font:16px/1.7 "Trebuchet MS",Verdana,sans-serif}
a{color:#0e7490;text-decoration:none}
a:hover{text-decoration:underline;color:#155e75}
.wrap{max-width:820px;margin:0 auto;padding:0 20px}
.ico{width:26px;height:26px;color:#0e7490}
.top{background:#0e7490;color:#ecfeff}
.top a{color:#ecfeff}
.top a:hover{color:#fff}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:60px;gap:12px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700}
.brand .ico{color:#a5f3fc}
nav{display:flex;flex-wrap:wrap;gap:12px;font-size:14px}
.hero{padding:32px 0 20px;background:#cffafe}
h1{font-size:28px;line-height:1.35;color:#083344;margin-bottom:12px}
.hero p{margin-bottom:16px}
.recon{display:flex;align-items:center;gap:10px;background:#0e7490;color:#ecfeff;border-radius:6px;padding:10px 14px;font-size:14px}
.recon-dot{width:8px;height:8px;border-radius:50%;background:#67e8f9}
.path-sec{padding:12px 0 8px}
.path{list-style:none;position:relative;padding-left:36px}
.path:before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:#67e8f9}
.path>li{position:relative;margin:0 0 28px;background:#fff;border:1px solid #a5f3fc;border-radius:12px;padding:20px 20px 8px}
.node{position:absolute;left:-36px;top:22px;width:32px;height:32px;border-radius:50%;background:#0e7490;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
h2{font-size:21px;color:#083344;margin:0 0 12px;line-height:1.4}
p{margin-bottom:12px}
.cards2,.cards3{display:grid;gap:12px;margin:8px 0 16px}
.cards2{grid-template-columns:1fr 1fr}
.cards3{grid-template-columns:repeat(3,1fr)}
.card{background:#f0fdff;border:1px solid #a5f3fc;border-radius:10px;padding:14px}
.card h3{font-size:15px;margin:8px 0;color:#155e75}
.card p{font-size:14px;margin:0}
.cmp,.more{padding:8px 0 24px}
.cmp table{width:100%;border-collapse:collapse;background:#fff;font-size:14px;margin:12px 0 24px}
.cmp caption{text-align:left;font-weight:700;margin-bottom:8px;color:#155e75}
.cmp th,.cmp td{border:1px solid #a5f3fc;padding:10px;vertical-align:top}
.cmp th{background:#0e7490;color:#ecfeff}
.steps{list-style:none;display:grid;gap:10px}
.steps li{display:flex;gap:12px;background:#fff;border-left:4px solid #0e7490;padding:12px 14px}
.steps span{flex:0 0 28px;height:28px;background:#22d3ee;color:#083344;border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:700}
.steps h3{font-size:15px;margin-bottom:4px}
.steps p{margin:0;font-size:14px}
.faq{max-width:820px;margin:0 auto;padding:16px 20px 48px}
details{background:#fff;border:1px solid #a5f3fc;border-radius:8px;padding:12px 14px;margin-bottom:8px}
summary{cursor:pointer;font-weight:600;color:#155e75}
details p{margin:8px 0 0;font-size:14px}
.site-footer{background:#083344;color:#a5f3fc;padding:24px 20px}
.site-footer p{max-width:820px;margin:0 auto 8px;font-size:13px}
@media (max-width:800px){
.cards2,.cards3{grid-template-columns:1fr}
.path{padding-left:28px}
}

.path > li:hover {
  border-color: #0e7490;
}
.path > li:hover .node {
  background: #155e75;
}
.recon:hover .recon-dot {
  background: #fff;
}
.top .brand span {
  letter-spacing: 0.02em;
}
nav a {
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
nav a:hover {
  border-bottom-color: #a5f3fc;
  text-decoration: none;
}
.hero h1 {
  max-width: 18em;
}
.card {
  min-height: 8em;
}
.card:hover {
  border-color: #0e7490;
  background: #fff;
}
.cmp tr:nth-child(even) td {
  background: #f0fdff;
}
.steps li:hover {
  background: #ecfeff;
}
.steps li:hover span {
  background: #0e7490;
  color: #ecfeff;
}
details[open] {
  border-color: #0e7490;
}
.node {
  box-shadow: 0 0 0 4px #ecfeff;
}
.path:after {
  content: "";
  display: none;
}
main {
  overflow-x: hidden;
}
h2 + p {
  max-width: 46em;
}
.more h2 {
  margin-top: 8px;
}
table caption {
  font-size: 15px;
}
.faq details {
  transition: none;
}
.site-footer p:last-child {
  margin-bottom: 0;
}
.ico {
  display: block;
}
section {
  position: relative;
}
.recon {
  max-width: 36em;
}
.cards2 .card h3 {
  font-family: "Segoe UI", sans-serif;
}
dt, dd {
  margin: 0;
}
ul, ol {
  list-style-position: inside;
}
.path {
  list-style: none;
}
a:focus-visible,
summary:focus-visible {
  outline: 2px solid #0e7490;
  outline-offset: 2px;
}
@media (max-width: 640px) {
  h1 {
    font-size: 24px;
  }
  .path {
    padding-left: 24px;
  }
  .node {
    left: -28px;
    width: 28px;
    height: 28px;
  }
  .top .wrap {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 20px;
  }
}
@media (min-width: 960px) {
  .hero {
    padding-top: 40px;
  }
}