* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:90px
}

body {
  margin:0;
  background:#f5f7f1;
  color:#1b3530;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.75
}

a {
  color:#176650;
  text-underline-offset:4px
}

a:hover {
  color:#0a4336
}

button,input {
  font:inherit
}

header {
  background:#fff;
  border-bottom:1px solid #dde5dc
}

header .header-inner {
  max-width:1240px;
  margin:auto;
  padding:20px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#102f2a;
  font-size:28px;
  font-weight:850;
  line-height:1.1
}

.brand img {
  border-radius:10px;
  object-fit:contain
}

.brand-sub {
  display:block;
  font-size:9px;
  letter-spacing:2px;
  margin-top:7px
}

nav {
  display:flex;
  flex-wrap:wrap;
  gap:20px
}

nav a {
  text-decoration:none;
  font-size:13px;
  font-weight:650
}

nav a[aria-current] {
  color:#102f2a;
  border-bottom:2px solid #c7e478
}

main {
  max-width:1240px;
  margin:auto;
  padding:0 28px
}

.breadcrumb {
  font-size:12px;
  color:#6d7e74;
  margin:26px 0
}

.breadcrumb a {
  text-decoration:none
}

.hero {
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:50px;
  padding:35px 0 62px;
  align-items:center
}

.eyebrow {
  font-size:11px;
  font-weight:800;
  letter-spacing:2px;
  color:#557265
}

h1 {
  font-size:clamp(32px,4.1vw,58px);
  line-height:1.12;
  letter-spacing:-2px;
  margin:22px 0
}

h1 em {
  font-style:normal;
  color:#65853d
}

.hero p {
  max-width:570px;
  color:#5c6e62;
  font-size:16px
}

.actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:24px;
  margin:28px 0
}

.button {
  background:#153f33;
  color:#fff;
  display:inline-flex;
  gap:30px;
  align-items:center;
  padding:14px 22px;
  border-radius:8px;
  text-decoration:none;
  font-size:14px;
  font-weight:700
}

.button:hover {
  background:#245744;
  color:white
}

.text-link {
  font-size:13px;
  font-weight:700;
  text-decoration:none
}

.hero-tags {
  display:flex;
  flex-wrap:wrap;
  gap:12px
}

.hero-tags span {
  font-size:10px;
  border:1px solid #d5dfd0;
  padding:4px 10px;
  border-radius:20px
}

.main-art {
  background:#dce8cc;
  border-radius:24px;
  padding:25px 30px;
  position:relative;
  box-shadow:12px 12px 0 #e8edde
}

.art-label,.art-footer {
  display:block;
  font-size:10px;
  letter-spacing:2px;
  font-weight:750
}

.art-footer {
  margin-top:20px;
  text-align:right
}

.logo-frame {
  margin:22px auto;
  max-width:270px;
  aspect-ratio:1;
  background:#edf4e2;
  border-radius:28px;
  display:grid;
  place-items:center;
  overflow:hidden
}

.logo-frame img {
  width:100%;
  height:100%;
  object-fit:contain
}

.content-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  gap:32px;
  align-items:start
}

.panel {
  background:#fff;
  border:1px solid #e0e6db;
  border-radius:15px;
  padding:32px;
  margin-bottom:24px
}

h2 {
  font-size:26px;
  line-height:1.3;
  letter-spacing:-.6px;
  margin:0 0 18px
}

h3 {
  font-size:17px;
  line-height:1.4;
  margin:12px 0
}

p {
  margin:0 0 16px
}

p:last-child {
  margin-bottom:0
}

.panel p,.panel li {
  font-size:14px;
  color:#52685b
}

.cards {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px;
  margin-top:24px
}

.card {
  background:#f6f8f1;
  border:1px solid #e4ebdd;
  padding:22px;
  border-radius:10px
}

.number {
  font-size:11px;
  color:#647f4c;
  font-weight:800;
  letter-spacing:2px
}

.gallery {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px
}

.gallery figure {
  margin:0
}

.image-wrap {
  background:#eaf0e2;
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:1
}

.image-wrap img {
  width:100%;
  height:100%;
  object-fit:contain
}

.gallery figcaption {
  padding-top:14px
}

.gallery strong {
  font-size:13px
}

.gallery p {
  font-size:12px;
  margin-top:7px
}

.link-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}

.link-grid a {
  position:relative;
  display:block;
  background:#f4f7ef;
  padding:20px;
  text-decoration:none;
  border-radius:10px
}

.link-grid span {
  display:block;
  font-size:12px;
  color:#5f7266;
  margin-top:8px
}

.link-grid b {
  position:absolute;
  right:14px;
  top:14px
}

aside {
  background:#eaf0df;
  border-radius:14px;
  padding:26px
}

aside h2 {
  margin-top:18px;
  font-size:23px
}

aside p {
  font-size:13px;
  color:#5f7266
}

aside>a {
  display:block;
  padding:10px 0;
  border-bottom:1px solid #d5dfcc;
  text-decoration:none;
  font-size:13px
}

aside a[aria-current] {
  font-weight:800
}

.aside-note {
  font-size:11px;
  padding-top:24px;
  color:#647761
}

.closing {
  background:#123c30;
  color:white;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:38px;
  border-radius:18px;
  margin:38px 0 50px
}

.closing .eyebrow {
  color:#bdd784
}

.closing h2 {
  margin:12px 0
}

.closing p {
  font-size:13px;
  color:#d1ddcf
}

.light {
  background:#d6eb9c;
  color:#163b2d
}

.light:hover {
  background:#e5f5bd;
  color:#163b2d
}

footer {
  max-width:1240px;
  margin:auto;
  padding:28px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
  border-top:1px solid #dce3d6
}

footer strong {
  font-size:25px
}

footer p {
  font-size:12px;
  color:#617463
}

.copyright {
  width:100%;
  font-size:11px
}

.table-wrap {
  overflow-x:auto
}

table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  text-align:left
}

th {
  background:#eaf0df
}

td,th {
  padding:13px;
  border-bottom:1px solid #e1e8dc
}

details {
  border-bottom:1px solid #e1e8dc;
  padding:17px 0
}

summary {
  cursor:pointer;
  font-size:14px;
  font-weight:700
}

details p {
  margin-top:14px
}

input {
  width:100%;
  padding:13px;
  border:1px solid #b7c9ad;
  border-radius:8px;
  background:#f9fbf6;
  margin-top:8px
}

label {
  font-size:13px;
  font-weight:700
}

#search-status {
  font-size:12px;
  margin-top:10px
}

.notice {
  padding:20px;
  border-left:3px solid #92af55;
  background:#f1f6e8
}

.notice p {
  margin-top:8px
}

.steps {
  padding-left:25px
}

.steps li {
  padding:0 0 18px 9px
}

.skip {
  position:absolute;
  left:12px;
  top:-100px;
  background:white;
  padding:12px;
  z-index:20
}

.skip:focus {
  top:10px
}

:focus-visible {
  outline:3px solid #729444;
  outline-offset:4px
}

[hidden] {
  display:none!important
}

@media(max-width:900px) {
  .header-inner {
    flex-wrap:wrap
  }

  .hero {
    gap:28px
  }

  .content-layout {
    grid-template-columns:1fr
  }

  aside {
    display:none
  }

  .hero h1 {
    font-size:38px
  }

  .logo-frame {
    max-width:210px
  }

}

@media(max-width:600px) {
  header .header-inner,main,footer {
    padding-left:18px;
    padding-right:18px
  }

  header nav {
    gap:10px 17px
  }

  nav a {
    font-size:12px
  }

  .hero {
    grid-template-columns:1fr;
    padding-top:12px;
    gap:28px
  }

  .hero h1 {
    font-size:38px;
    letter-spacing:-1.5px
  }

  .main-art {
    max-width:380px;
    width:100%;
    justify-self:center
  }

  .panel {
    padding:23px 20px
  }

  h2 {
    font-size:23px
  }

  .cards,.link-grid {
    grid-template-columns:1fr
  }

  .gallery {
    grid-template-columns:1fr
  }

  .gallery figure {
    display:grid;
    grid-template-columns:110px 1fr;
    gap:15px
  }

  .closing {
    display:block;
    padding:26px
  }

  .closing .button {
    margin-top:24px
  }

  .hero-tags {
    gap:7px
  }

  .actions {
    gap:18px
  }

  .table-wrap td:first-child {
    min-width:145px
  }

  footer nav {
    gap:12px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

}

.toc nav {
  display:block
}

.toc ol {
  columns:2;
  column-gap:35px;
  padding-left:22px;
  margin:0
}

.toc li {
  break-inside:avoid;
  padding:5px 0
}

.toc a {
  font-size:13px;
  font-weight:500
}

.panel h3 {
  margin-top:26px
}

.panel .card h3 {
  margin-top:12px
}

@media(max-width:600px) {
  .toc ol {
    columns:1
  }

}

.account-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:22px 0 26px
}

.account-actions .account-button {
  min-width:128px;
  justify-content:center;
  gap:12px;
  padding:13px 24px
}

.account-actions .download {
  background:#153f33;
  color:#fff
}

.account-actions .login {
  background:#fff;
  color:#153f33;
  border:1px solid #153f33
}

.account-actions .register {
  background:#d6eb9c;
  color:#163b2d
}

.account-actions .account-button:hover {
  background:#245744;
  color:#fff
}

@media(max-width:600px) {
  .account-actions {
    gap:8px
  }

  .account-actions .account-button {
    flex:1;
    min-width:88px;
    padding:12px 10px;
    font-size:13px
  }

}