:root{
  color-scheme: light;
  --ink:#000080;
  --bg0:#fbf9ff;
  --bg1:#f1f6ff;
  --glass:rgba(255,255,255,0.62);
  --glass2:rgba(255,255,255,0.38);
  --shadow:rgba(0,0,128,0.14);
  --shadow2:rgba(0,0,128,0.10);
  --ring:rgba(0,0,128,0.25);
  --radius:1.1rem;
  --radius2:0.95rem;
  --max:70rem;
  --textMax:50rem;
  --tableMax:44rem;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--ink);
  line-height:1.4;
  font-size:1.08rem;
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(179,230,255,0.45), transparent 60%),
    radial-gradient(1000px 650px at 85% 18%, rgba(255,196,235,0.45), transparent 55%),
    radial-gradient(900px 600px at 30% 90%, rgba(216,255,196,0.35), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  min-height:100vh;
}

a{
  color:inherit;
  text-underline-offset:0.22em;
  text-decoration-thickness:0.12em;
}

a:hover{
  opacity:0.88;
}

.page{
  max-width:var(--max);
  margin:0 auto;
  padding:1.25rem 1rem 2.5rem;
}

.hero{
  margin:0 auto 1.25rem;
}

.hero__inner{
  max-width:var(--textMax);
  margin:0 auto;
  text-align:center;
  padding:1.15rem 1rem 1.25rem;
  border-radius:var(--radius);
  background:linear-gradient(180deg, var(--glass), var(--glass2));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1.1rem 2.6rem var(--shadow);
}

h1{
  margin:0.25rem 0 0.65rem;
  font-size:clamp(1.32rem, 2.7vw, 2.05rem);
  letter-spacing:-0.02em;
}

.hero__h2{
  margin:0.5rem 0 0.75rem;
  font-weight:700;
  font-size:clamp(1.05rem, 2.1vw, 1.3rem);
}

.hero__lead{
  margin:0.8rem auto 1rem;
  font-size:clamp(1.02rem, 1.8vw, 1.12rem);
  max-width:var(--textMax);
}

.hero__links{
  margin:0.9rem 0 0.65rem;
  font-weight:700;
}

.hero__linksLabel{
  display:inline-block;
  margin-right:0.25rem;
  font-weight:700;
}

.hero__sep{
  display:inline-block;
  margin:0 0.45rem;
  opacity:0.65;
}

.hero__note{
  margin:0.75rem auto 0.1rem;
  opacity:0.92;
  max-width:var(--textMax);
}

.section{
  margin:1.1rem auto 0;
}

.section__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:1rem;
}

.section__title{
  max-width:var(--textMax);
  margin:0.35rem auto 0.6rem;
  text-align:center;
  font-size:clamp(1.25rem, 2.4vw, 1.55rem);
}

.section__lead{
  max-width:var(--textMax);
  margin:0 auto 1.05rem;
  text-align:center;
  font-size:1.07rem;
}

.tableWrap{
  max-width:var(--tableMax);
  margin:0.85rem auto 1rem;
  padding:1rem;
  border-radius:var(--radius);
  background:linear-gradient(180deg, var(--glass), var(--glass2));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1.1rem 2.6rem var(--shadow2);
  overflow-x:auto;
}

.tableWrap table{
  margin:0 auto;
  border-collapse:collapse;
  width:100%;
}

.tableWrap th,
.tableWrap td{
  padding:0.6rem 0.65rem;
  border-bottom:1px solid rgba(0,0,128,0.14);
  vertical-align:middle;
  font-size:1rem;
  white-space:nowrap;
}

.tableWrap th{
  text-align:left;
  font-weight:800;
}

.tableWrap td{
  text-align:right;
}

.tableWrap td:first-child,
.tableWrap th:first-child{
  text-align:left;
}

.calcLink{
  max-width:var(--tableMax);
  margin:0 auto 1.2rem;
  text-align:center;
  font-weight:700;
}

.calcLink a{
  display:inline-block;
  margin-left:0.25rem;
  padding:0.1rem 0.25rem;
  border-radius:0.4rem;
}

.calcLink a:focus-visible{
  outline:0.2rem solid var(--ring);
  outline-offset:0.18rem;
}

.section__cta{
  display:flex;
  justify-content:center;
  padding:0.25rem 0 0.9rem;
}

.btn{
  display:inline-block;
  width:min(26rem, 100%);
  text-align:center;
  padding:0.85rem 1rem;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.35));
  box-shadow:0 0.9rem 2rem var(--shadow);
  border:1px solid rgba(0,0,128,0.18);
  text-decoration:none;
  font-weight:800;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn:focus-visible{
  outline:0.2rem solid var(--ring);
  outline-offset:0.18rem;
}

.article{
  max-width:var(--textMax);
  margin:0 auto;
  padding:1.1rem 1rem 1.15rem;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.38));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1.1rem 2.6rem var(--shadow2);
}

.article__header h2{
  margin-top:0.25rem;
}

.article__lead{
  margin:0.7rem 0 0.9rem;
  font-size:1.05rem;
}

.article h3{
  margin:1rem 0 0.45rem;
  font-size:1.15rem;
}

.article p{
  margin:0.65rem 0;
  font-size:1.1rem;
}

.article__list{
  margin:0.6rem 0 0.75rem;
  padding-left:1.1rem;
}

.article__list li{
  margin:0.35rem 0;
}

.article__cta{
  margin-top:0.8rem;
  font-weight:700;
}

.footer{
  max-width:var(--textMax);
  margin:1.1rem auto 0;
  text-align:center;
  padding:0.9rem 1rem;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.34));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1.1rem 2.2rem var(--shadow2);
}

.footer p{
  margin:0;
  font-weight:700;
}

@media (max-width:40rem){
  .page{
    padding:1rem 0.75rem 2.25rem;
  }

  .hero__inner,
  .tableWrap,
  .article,
  .footer{
    padding:0.9rem 0.8rem 1rem;
    border-radius:var(--radius2);
  }

  .tableWrap th,
  .tableWrap td{
    padding:0.55rem 0.55rem;
    font-size:0.98rem;
  }

  .btn{
    width:100%;
  }

  .calcLink{
    padding:0 0.25rem;
  }
}