body { background: #f7f7f2; color: #162621; }
a { color: #0d6b53; }
a:focus, button:focus, input:focus, summary:focus { outline-color: #0d6b53; }
h1, h2, h3 { color: #162621; line-height: 1.22; }
h1 { margin-bottom: 22px; font-size: 3.7rem; font-weight: 700; letter-spacing: -.045em; overflow-wrap: break-word; word-wrap: break-word; }
h2 { margin-bottom: 8px; font-size: 2rem; letter-spacing: -.025em; }
h3 { margin-bottom: 10px; font-size: 1.2rem; }
p { margin-bottom: 1em; }
code, .mono, .kicker, .visual-label, .guide-outline span { font-family: Consolas, "Liberation Mono", monospace; }
.wrap { width: 100%; max-width: 1344px; padding-right: 32px; padding-left: 32px; margin: 0 auto; }
.site-header { background: #fff; border-bottom: 1px solid #dbe2dc; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 13px; padding-bottom: 13px; }
.brand { display: inline-block; flex: 0 0 auto; color: #162621; font-weight: 700; text-decoration: none; font-size: 1.3rem; white-space: nowrap; }
.brand-icon { display: inline-block; margin-right: 8px; width: 34px; height: 34px; vertical-align: -9px; }
.site-nav { margin: 0 auto; text-align: center; }
.site-nav a, .button {
  display: inline-block;
  padding: 9px 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}
.site-nav a { min-height: 44px; color: #3b4b44; font-size: .9rem; }
.site-nav a:hover, .site-nav [aria-current] { background: #eaf4ee; color: #0d6b53; }
.site-header .menu-toggle { display: none; }
.site-header .language-switch { margin-left: auto; }
.header-actions { margin-left: 10px; display: flex; align-items: center; flex: 0 0 auto; white-space: nowrap; }
.header-actions .button + .button { margin-left: 6px; }
.button {
  min-height: 44px;
  padding: 10px 16px;
  color: #fff;
  background: #0d6b53;
  font-size: .9375rem;
  text-align: center;
  vertical-align: middle;
}
.button:hover { color: #fff; background: #095440; }
.button-secondary { color: #174d3d; background: #fff; border-color: #c8d8cf; }
.button-secondary:hover { color: #0d6b53; background: #eaf4ee; border-color: #a9c6b7; }
.button-quiet { color: #234a3d; background: transparent; }
.button-quiet:hover { color: #0d6b53; background: #eaf4ee; }

.home-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 70px;
  padding-bottom: 64px;
}
.hero-copy { width: 50%; padding-right: 36px; }
.kicker { margin: 0 0 10px; color: #0d6b53; font-weight: 700; font-size: .76rem; letter-spacing: .15em; }
.hero-kicker { margin-bottom: 18px; }
.hero-intro, .guide-intro > p:last-child { max-width: 34em; color: #4d5d56; font-size: 1.075rem; line-height: 1.8; }
.hero-actions { margin: 24px 0 18px; }
.hero-actions .button { margin: 0 5px 8px 0; padding-right: 18px; padding-left: 18px; }
.hero-compatible { margin: 0; color: #4d5d56; font-size: .875rem; }
.hero-visual {
  position: relative;
  width: 47%;
  min-height: 345px;
  margin: 0;
  overflow: hidden;
  padding: 24px 26px;
  color: #eaf8f0;
  background: #162c26 linear-gradient(145deg, #203b32, #162c26 69%, #1b352d);
  border: 1px solid #294b3e;
  border-radius: 20px;
}
.visual-lines { position: absolute; top: 0; right: 0; width: 100%; height: 100%; opacity: .82; }
.visual-label { position: relative; color: #c0e3d0; font-size: .75rem; letter-spacing: .12em; }
.visual-signal, .dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #0d6b53; vertical-align: 1px; }
.visual-signal { background: #80cda8; box-shadow: 0 0 0 4px rgba(128, 205, 168, .15); }
.visual-profile {
  position: relative;
  max-width: 350px;
  margin: 38px auto 25px;
  padding: 20px 21px 12px;
  background: #234437;
  border: 1px solid #537566;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(5, 19, 14, .24);
}
.visual-profile-title { display: flex; align-items: center; }
.visual-profile-title img { margin-right: 12px; border-radius: 8px; }
.visual-profile-title strong, .visual-profile-title span { display: block; }
.visual-profile-title strong { font-size: 1.25rem; line-height: 1.3; }
.visual-profile-title span { color: #cae3d5; font-size: .8rem; }
.visual-profile dl { margin: 14px 0 0; font-size: .875rem; }
.visual-profile dl div { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid #4a6b5e; }
.visual-profile dt { color: #cae3d5; }
.visual-profile dd { margin: 0 0 0 8px; font-weight: 600; }
.hero-visual figcaption { position: relative; color: #c0e3d0; text-align: right; font-size: .75rem; }

.section { padding-top: 34px; padding-bottom: 52px; }
.section-heading { margin: 0 0 21px; }
.section-heading > p:last-child { max-width: 46em; margin: 0; color: #4d5d56; }
.section-with-action { display: flex; align-items: flex-end; justify-content: space-between; }
.section-with-action > a { flex: 0 0 auto; margin-left: 14px; }
.panel { border: 1px solid #dbe2dc; border-radius: 14px; background: #fff; }
.plan-notice {
  margin: 0 0 16px;
  padding: 11px 14px;
  color: #254f40;
  background: #eaf4ee;
  border: 1px solid #cfe3d6;
  border-radius: 9px;
  font-size: .9rem;
}
.plan-notice strong { display: inline-block; margin-right: 7px; }
.plan-row, .steps { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.plan-column, .step-column { display: flex; width: 20%; padding: 0 8px 16px; }
.step-column { width: 33.3333%; }
.plan {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 18px;
}
.plan.featured { border-color: #74a88f; background: #f5faf7; }
.plan-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 25px;
  margin: 0 0 8px;
  color: #0d6b53;
  font-size: .8rem;
  font-weight: 700;
}
.featured-label { padding: 2px 8px; color: #145441; background: #dcefe3; border-radius: 6px; }
.plan h3 { margin: 0 0 4px; font-size: 1.125rem; }
.plan-quota { margin: 0 0 13px; color: #4d5d56; font-size: .875rem; }
.plan .price { margin: 0 0 10px; color: #162621; font-size: 2.45rem; font-weight: 700; line-height: 1.16; letter-spacing: -.06em; }
.plan .price span { color: #4d5d56; font-size: .8rem; font-weight: 500; letter-spacing: 0; }
.plan-description { color: #4d5d56; font-size: .875rem; }
.features { margin: auto 0 18px; padding: 12px 0 0; border-top: 1px solid #dbe2dc; color: #354941; list-style: none; font-size: .875rem; }
.features li { position: relative; margin: 5px 0; padding-left: 18px; }
.features li::before { content: "✓"; position: absolute; left: 0; color: #0d6b53; font-weight: 700; }
.plan .button { display: block; }

.status-panel { display: flex; }
.status-entry { display: flex; width: 50%; justify-content: space-between; align-items: center; padding: 18px 20px; }
.status-entry + .status-entry { border-left: 1px solid #dbe2dc; }
.status-entry p { margin: 3px 0 0; color: #4d5d56; font-size: .875rem; }
.status-badge { flex: 0 0 auto; margin-left: 10px; padding: 7px 11px; border-radius: 7px; background: #eaf4ee; color: #0d6b53; font-size: .8125rem; }
a.status-badge { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
.dot.waiting { background: #737e78; }
.dot.offline { background: #ac481f; }
.step { width: 100%; padding: 21px; }
.step p { margin: 0; color: #4d5d56; font-size: .9375rem; }
.step-no { display: inline-block; margin-bottom: 12px; padding: 4px 9px; color: #0d6b53; background: #eaf4ee; border-radius: 6px; font-weight: 700; }
.faq-layout { display: flex; align-items: flex-start; padding-bottom: 74px; }
.faq-layout .section-heading { flex: 0 0 auto; width: 30%; padding-right: 24px; }
.faq-layout .faq { width: 70%; }
.faq { overflow: hidden; }
.faq details { border-top: 1px solid #dbe2dc; }
.faq details:first-child { border-top: 0; }
.faq summary { cursor: pointer; padding: 15px 18px; color: #162621; font-weight: 600; }
.faq summary:hover { background: #f5faf7; }
.faq summary:focus { outline-offset: -3px; }
.faq details p { padding: 0 18px 16px; margin: 0; color: #4d5d56; }
.site-footer { border-top: 1px solid #dbe2dc; background: #fff; color: #4d5d56; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; padding-bottom: 28px; font-size: .875rem; }
.footer-inner p { margin: 7px 0 0; }
.footer-links a { display: inline-block; margin-left: 16px; padding: 11px 0; color: #405149; }
.footer-links a:hover { color: #0d6b53; }

.guide-hero { display: flex; justify-content: space-between; align-items: center; padding-top: 52px; padding-bottom: 40px; }
.guide-intro { width: 54%; padding-right: 25px; }
.guide-intro h1 { font-size: 3rem; margin-bottom: 14px; }
.guide-intro > p:last-child { margin: 0; }
.guide-find { width: 42%; padding: 18px; }
.guide-find h2, .guide-outline h2 { margin: 0 0 9px; font-size: 1.05rem; }
.search-field { display: flex; padding: 4px; background: #f7f7f2; border: 1px solid #dbe2dc; border-radius: 8px; }
.search-field input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  margin-right: 5px;
  padding: 5px 8px;
  color: #162621;
  background: #fff;
  border: 0;
  border-radius: 5px;
}
.search-field button { flex: 0 0 auto; }
.quick-find { display: flex; flex-wrap: wrap; margin-top: 6px; }
.quick-find a { display: inline-block; min-height: 44px; margin: 0 6px 0 0; padding: 11px 3px; font-size: .875rem; }
.search-results { margin: 9px 0 0; color: #254f40; font-size: .9375rem; }
.search-results p { margin: 0; }
.search-results ul { padding-left: 22px; margin-bottom: 0; }
.guide-layout { display: flex; align-items: flex-start; padding-bottom: 72px; }
.guide-sidebar { flex: 0 0 234px; padding-right: 22px; }
.guide-outline { padding: 16px; }
.guide-outline a { display: block; min-height: 44px; padding: 10px 2px; color: #354941; font-size: .875rem; text-decoration: none; }
.guide-outline a:hover { color: #0d6b53; text-decoration: underline; }
.guide-outline span { margin-right: 4px; color: #0d6b53; font-weight: 700; }
.guide-main { flex: 1 1 auto; min-width: 0; }
.platform-nav { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 19px; padding: 6px; }
.platform-nav a {
  flex: 1 1 auto;
  min-width: 116px;
  margin: 3px;
  padding: 7px 9px;
  color: #174d3d;
  border: 1px solid #d8e8de;
  background: #f3f8f4;
  border-radius: 7px;
  text-align: center;
  text-decoration: none;
  font-size: .9375rem;
}
.platform-nav a:hover { background: #eaf4ee; }
.platform-nav span { display: block; color: #4d5d56; font-size: .8125rem; }
.guide-section { margin: 0 0 20px; padding: 24px; }
.guide-section p, .guide-section li { max-width: 48em; color: #405149; }
.platform { margin: 13px 0 0; padding: 14px; border: 1px solid #dbe2dc; border-radius: 9px; background: #fbfcfa; }
.platform h3 { font-size: 1.05rem; }
.platform p:last-child, .guide-section p:last-child { margin-bottom: 0; }
.anchor-target { scroll-margin-top: 18px; }
.guide-section ol, .guide-section ul { padding-left: 22px; }
.guide-section li { margin-bottom: 7px; }
.guide-section code { padding: 2px 4px; background: #eaf4ee; color: #174d3d; overflow-wrap: break-word; word-wrap: break-word; }
.guide-note { padding: 9px 13px; background: #eaf4ee; border-left: 3px solid #5a987d; border-radius: 5px; }
.not-found { min-height: 60vh; padding-top: 85px; padding-bottom: 55px; }

@media (max-width: 1190px) {
  .plan-column { flex: 1 0 33.3333%; width: 33.3333%; }
  .plan { padding: 20px; }
}
@media (max-width: 960px) {
  .wrap { padding-right: 24px; padding-left: 24px; }
  .site-nav a { padding-right: 8px; padding-left: 8px; }
  h1 { font-size: 3.1rem; }
  .hero-copy { padding-right: 23px; }
  .hero-visual { min-height: 320px; padding: 18px; }
  .visual-profile { margin-top: 32px; }
  .status-entry { padding: 16px; }
  .guide-sidebar { flex-basis: 186px; padding-right: 14px; }
}
@media (max-width: 1060px) {
  .header-inner { flex-wrap: wrap; padding-top: 9px; padding-bottom: 9px; }
  .site-nav { order: 3; width: 100%; margin: 4px 0 0; text-align: left; }
  .site-nav a { padding: 10px 9px; }
  .site-header .menu-toggle { display: inline-block; margin-left: auto; }
  .site-header .language-switch { margin-left: 4px; }
  .header-actions { margin-left: 6px; }
  .nav-enhanced .site-nav { display: none; }
  .nav-enhanced .site-nav.menu-open { display: block; }
}
@media (max-width: 790px) {
  .home-hero { padding-top: 45px; padding-bottom: 40px; }
  .hero-copy { padding-right: 15px; }
  .hero-visual { width: 48%; }
  .plan-column { flex-basis: 50%; width: 50%; }
  .status-panel { display: block; }
  .status-entry { width: 100%; }
  .status-entry + .status-entry { border-top: 1px solid #dbe2dc; border-left: 0; }
  .guide-layout { display: block; }
  .guide-sidebar { padding: 0; margin-bottom: 17px; }
  .guide-outline { padding: 13px; }
  .guide-outline a { display: inline-block; margin-right: 8px; }
  .guide-hero { padding-top: 36px; padding-bottom: 24px; }
  .guide-intro h1 { font-size: 2.45rem; }
  .guide-find { width: 46%; padding: 13px; }
}
@media (max-width: 600px) {
  .wrap { padding-right: 16px; padding-left: 16px; }
  .header-inner { justify-content: flex-start; padding-top: 8px; padding-bottom: 8px; }
  .header-actions { margin-left: auto; }
  .brand { font-size: 1.2rem; }
  .brand-icon { width: 30px; height: 30px; vertical-align: -8px; margin-right: 6px; }
  .site-header .button { min-width: 44px; padding: 10px 9px; }
  .header-actions .button + .button { margin-left: 3px; }
  h1 { font-size: 2.6rem; margin-bottom: 14px; }
  h2 { font-size: 1.65rem; }
  .home-hero { display: block; padding-top: 33px; padding-bottom: 31px; }
  .hero-copy, .hero-visual { width: 100%; }
  .hero-copy { padding-right: 0; }
  .hero-visual { min-height: 0; margin-top: 23px; border-radius: 14px; }
  .visual-profile { margin-top: 22px; margin-bottom: 16px; padding: 13px 15px 5px; }
  .hero-actions { margin-top: 19px; margin-bottom: 10px; }
  .section { padding-top: 22px; padding-bottom: 30px; }
  .plan-column, .step-column { flex-basis: 100%; width: 100%; }
  .section-with-action, .faq-layout { display: block; }
  .section-with-action > a { margin: 4px 0 0; }
  .faq-layout .section-heading, .faq-layout .faq { width: 100%; }
  .faq-layout .section-heading { padding: 0; }
  .footer-inner { display: block; }
  .footer-links a { margin-right: 13px; margin-left: 0; }
  .guide-hero { display: block; }
  .guide-intro, .guide-find { width: 100%; }
  .guide-intro { padding: 0; margin: 0 0 17px; }
  .guide-intro h1 { font-size: 2.35rem; }
  .guide-section { padding: 15px; }
  .platform-nav a { min-width: 92px; }
  .guide-layout { padding-bottom: 38px; }
  .not-found { padding-top: 55px; }
}
@media (prefers-reduced-motion: no-preference) {
  .button, .site-nav a, .platform-nav a { transition: background-color .16s ease, color .16s ease, border-color .16s ease; }
}