/* site */
:root {
  --primary:#138e82;
  --primary-hover:#0d756c;
  --ink:#092722;
  --muted:#74818d;
  --line:#e5edeb;
  --mint:#f1f9f6;
  --dark:#113b32;
  --blue:#397ae7;
  --radius:8px;
  --radius-panel:8px;
  --radius-control:6px;
  --radius-label:4px
}

h2 {
  font-size:34px;
  line-height:1.35;
  letter-spacing:-.7px
}

h3 {
  font-size:21px;
  line-height:1.4
}

.container {
  width:calc(100% - 160px);
  max-width:1240px;
  margin:0 auto
}

.site-header {
  height:76px;
  background:#fff;
  border-bottom:1px solid var(--line)
}

.header-inner {
  height:100%;
  display:flex;
  align-items:center;
  gap:38px
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:14px;
  white-space:nowrap;
  font-size:30px;
  font-weight:750;
  letter-spacing:-1px
}

.brand .iconfont {
  font-size:41px;
  color:var(--primary);
  line-height:1
}

.site-header nav {
  display:flex;
  justify-content:center;
  gap:36px;
  align-items:center;
  flex:1
}

.site-header nav a {
  font-size:15px;
  color:#4c5b64;
  position:relative;
  white-space:nowrap;
  padding:25px 0
}

.site-header nav a:hover,.site-header nav a[aria-current] {
  color:var(--primary)
}

.site-header nav a[aria-current]:after {
  content:"";
  position:absolute;
  bottom:13px;
  left:0;
  right:0;
  height:2px;
  background:var(--primary)
}

.header-download {
  font-size:16px;
  min-height:48px;
  padding:10px 27px
}

.menu-toggle {
  display:none;
  position:relative;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--ink);
  width:43px;
  height:43px;
  cursor:pointer
}

.official-overlay .menu-toggle {
  color:#fff
}

.menu-toggle:focus-visible {
  outline:2px solid currentColor;
  outline-offset:3px
}

.menu-toggle-lines,.menu-toggle-lines:before,.menu-toggle-lines:after {
  position:absolute;
  width:22px;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .24s ease,top .24s ease,background-color .16s ease
}

.menu-toggle-lines {
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}

.menu-toggle-lines:before,.menu-toggle-lines:after {
  content:"";
  left:0
}

.menu-toggle-lines:before {
  top:-7px
}

.menu-toggle-lines:after {
  top:7px
}

.menu-toggle[aria-expanded="true"] .menu-toggle-lines {
  background:transparent
}

.menu-toggle[aria-expanded="true"] .menu-toggle-lines:before {
  top:0;
  transform:rotate(45deg)
}

.menu-toggle[aria-expanded="true"] .menu-toggle-lines:after {
  top:0;
  transform:rotate(-45deg)
}

@media(prefers-reduced-motion:reduce) {
  .menu-toggle-lines,.menu-toggle-lines:before,.menu-toggle-lines:after {
    transition:none
  }
}

.hero {
  background:#f8fcfa;
  text-align:center;
  padding:52px 0 35px
}

.eyebrow {
  font-size:15px;
  letter-spacing:5px;
  color:#8c99a4;
  margin-bottom:19px
}

.hero h1 {
  font-size:60px;
  line-height:1.32;
  font-weight:800;
  letter-spacing:-1.5px
}

.hero h1 span {
  color:var(--primary)
}

.hero-description {
  color:var(--muted);
  font-size:20px;
  margin:20px auto 26px
}

.hero-actions {
  display:flex;
  justify-content:center;
  gap:20px
}

.hero-actions .button {
  min-width:196px;
  min-height:50px;
  font-size:20px
}

.hero-actions .button-outline {
  min-width:160px
}

.version-note {
  font-size:16px;
  color:#94a0ab;
  margin-top:22px
}

.features {
  padding:48px 0 24px
}

.section-heading {
  text-align:center
}

.section-heading p {
  color:var(--muted);
  margin-top:8px;
  font-size:17px
}

.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:26px
}

.feature {
  text-align:center;
  position:relative;
  padding:0 18px
}

.feature+.feature:before {
  content:"";
  position:absolute;
  top:25px;
  bottom:3px;
  left:0;
  width:1px;
  background:var(--line)
}

.icon-circle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#e7f7f2;
  border-radius:50%;
  width:74px;
  height:74px;
  flex-shrink:0;
  color:var(--primary);
  font-size:40px
}

.feature h3 {
  margin:11px 0 5px
}

.feature p {
  font-size:17px;
  color:var(--muted)
}

.feature:hover h3 {
  color:var(--primary)
}

.home-extensions {
  background:var(--mint);
  padding:28px 0
}

.extensions-layout {
  display:grid;
  grid-template-columns:43% 57%;
  align-items:center;
  gap:0
}

.extension-intro p {
  margin-top:12px;
  color:var(--muted);
  font-size:18px
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:16px;
  color:var(--primary);
  border-bottom:1px solid var(--primary);
  padding-bottom:4px;
  margin-top:29px;
  font-size:17px
}

.text-link:hover {
  color:var(--primary-hover)
}

.extension-list {
  display:grid;
  gap:16px
}

.extension-row {
  display:flex;
  align-items:center;
  gap:19px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:var(--radius);
  padding:14px 20px;
  min-height:88px;
  transition:border-color .15s
}

.extension-row:hover {
  border-color:var(--primary)
}

.extension-row .icon-circle {
  width:58px;
  height:58px;
  font-size:32px
}

.extension-copy {
  flex:1;
  min-width:0
}

.extension-copy h3 {
  font-size:18px
}

.extension-copy h3 small {
  font-size:14px;
  font-weight:400;
  color:var(--muted);
  margin-left:13px
}

.extension-copy p {
  font-size:15px;
  color:var(--muted);
  margin-top:4px
}

.badge {
  display:inline-block;
  white-space:nowrap;
  background:#e7f8f2;
  color:var(--primary);
  border-radius:var(--radius-label);
  padding:3px 9px;
  font-size:12px;
  line-height:1.7
}

.badge-blue {
  background:#eaf1ff;
  color:var(--blue)
}

.download-band {
  background:var(--dark);
  color:#fff;
  text-align:center;
  padding:30px 0 25px
}

.download-band h2 {
  font-size:29px;
  margin-bottom:15px
}

.download-band .button {
  min-height:41px;
  font-size:16px;
  padding:7px 30px
}

.site-footer {
  padding:25px 0
}

.footer-inner {
  display:flex;
  align-items:center;
  gap:22px
}

.site-footer .brand {
  font-size:21px;
  gap:10px;
  letter-spacing:-.6px
}

.site-footer .brand .iconfont {
  font-size:32px
}

.footer-slogan {
  font-size:13px;
  color:#687a82;
  padding-left:20px;
  border-left:1px solid var(--line)
}

.site-footer nav {
  display:flex;
  gap:27px;
  margin-left:auto;
  font-size:13px;
  color:#687a82
}

.site-footer nav a:hover {
  color:var(--primary)
}

.site-footer small {
  font-size:12px;
  color:var(--muted)
}

.skip-link {
  position:fixed;
  top:-80px;
  left:16px;
  padding:10px 20px;
  background:#fff;
  z-index:50
}

.skip-link:focus {
  top:10px
}

.page-hero {
  background:#f8fcfa;
  padding:56px 0 47px
}

.page-hero h1 {
  font-size:44px;
  line-height:1.3;
  margin:9px 0
}

.page-hero p {
  color:var(--muted);
  max-width:780px
}

.breadcrumbs {
  font-size:14px;
  color:var(--primary)
}

.page-content {
  padding:46px 0 68px;
  min-height:420px
}

.page-content h2 {
  font-size:27px
}

.page-content h3 {
  margin-bottom:10px
}

.panel {
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  padding:28px;
  background:#fff
}

.panel p {
  color:#687a82
}

.product-grid,.market-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px
}

.product-grid .icon-circle {
  margin-bottom:18px
}

.product-grid p {
  margin-top:12px
}

.market-tools {
  display:flex;
  gap:15px;
  align-items:center;
  margin-bottom:28px
}

.search-input {
  border:1px solid #cddbd6;
  border-radius:var(--radius-control);
  padding:12px 17px;
  width:min(440px,100%);
  color:var(--ink);
  background:#fff
}

.count {
  color:var(--muted);
  font-size:14px
}

.market-card:target {
  border-color:var(--primary);
  box-shadow:0 0 0 3px #e4f4ee
}

.market-card header {
  display:flex;
  gap:18px;
  align-items:center;
  margin-bottom:22px
}

.market-card .icon-circle {
  width:60px;
  height:60px;
  font-size:33px
}

.market-card header .badge {
  margin-left:auto
}

.market-card h2 {
  font-size:24px
}

.market-card .meta {
  font-size:14px;
  color:var(--muted)
}

.requirements {
  padding:18px 0;
  border-top:1px solid var(--line);
  margin-top:20px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  font-size:13px;
  color:#667c76
}

.market-card details {
  border-top:1px solid var(--line);
  padding-top:16px
}

.market-card summary {
  cursor:pointer;
  color:var(--primary);
  font-weight:600
}

.market-card details p {
  margin-top:12px;
  font-size:15px
}

.market-card ol {
  color:#687a82;
  padding-left:22px;
  font-size:15px
}

.empty-state {
  color:var(--muted);
  padding:30px;
  text-align:center
}

.download-panel {
  max-width:850px;
  margin:auto
}

.download-panel h2 {
  font-size:32px;
  margin-bottom:12px
}

.download-meta {
  display:flex;
  gap:22px;
  margin:20px 0;
  color:var(--muted)
}

.download-panel .button {
  margin:5px 0 22px
}

.checksum {
  overflow-wrap:anywhere;
  font:13px/1.8 ui-monospace,Consolas,monospace;
  color:#58716b;
  background:var(--mint);
  padding:18px;
  border-radius:var(--radius-control);
  margin:12px 0 22px
}

.note {
  padding:17px 20px;
  background:var(--mint);
  border-left:3px solid var(--primary);
  margin:22px 0;
  color:#577369;
  font-size:15px
}

.docs-layout {
  display:grid;
  grid-template-columns:220px 1fr;
  gap:42px
}

.docs-nav {
  display:flex;
  flex-direction:column;
  gap:8px;
  align-self:start;
  position:sticky;
  top:30px
}

.docs-nav a {
  padding:10px 16px;
  background:var(--mint);
  border-radius:var(--radius-control)
}

.article-section {
  margin-bottom:38px;
  border-bottom:1px solid var(--line);
  padding-bottom:30px
}

.article-section h2 {
  margin-bottom:16px
}

.article-section p,.article-section li {
  color:#647970;
  margin-bottom:12px
}

.article-section ol,.article-section ul {
  padding-left:22px
}

.article-section a,.inline-link {
  color:var(--primary);
  text-decoration:underline;
  text-underline-offset:4px
}

.release {
  display:grid;
  grid-template-columns:180px 1fr;
  gap:28px;
  padding:26px 0;
  border-bottom:1px solid var(--line)
}

.release:first-child {
  padding-top:0
}

.release h2 {
  font-size:25px
}

.release p {
  color:#647970;
  white-space:pre-line
}

.release .badge {
  margin-top:12px
}

.contact-box {
  max-width:840px;
  margin:auto
}

.contact-box p {
  margin:15px 0
}

.contact-box a {
  color:var(--primary)
}

@media(min-width:1500px) {
  .hero {
    padding-top:77px;
    padding-bottom:56px
  }
  .hero h1 {
    font-size:66px
  }
  .features {
    padding-top:61px;
    padding-bottom:54px
  }
  .home-extensions {
    padding:43px 0
  }
}

@media(max-width:1150px) {
  .container {
    width:calc(100% - 64px)
  }
  .header-inner {
    gap:25px
  }
  .site-header nav {
    gap:23px
  }
  .brand {
    font-size:26px;
    gap:9px
  }
  .brand .iconfont {
    font-size:35px
  }
  .header-download {
    padding:10px 19px
  }
  .hero h1 {
    font-size:55px
  }
  .hero-description {
    font-size:18px
  }
  .extension-row {
    padding:17px;
    gap:13px
  }
  .extension-copy h3 {
    font-size:16px
  }
  .extension-copy p {
    font-size:13px
  }
  .extension-intro h2 {
    font-size:29px
  }
  .extension-intro p {
    font-size:16px
  }
  .footer-inner {
    gap:17px
  }
  .site-footer nav {
    gap:18px
  }
  .footer-slogan {
    display:none
  }
}

@media(max-width:850px) {
  .site-header {
    height:74px
  }
  .header-inner {
    gap:15px;
    position:relative
  }
  .header-download {
    margin-left:auto;
    font-size:14px;
    min-height:43px
  }
  .menu-toggle {
    display:block;
    order:3
  }
  .site-header nav {
    display:none;
    position:absolute;
    top:73px;
    left:-20px;
    right:-20px;
    background:#fff;
    z-index:10;
    padding:14px 24px;
    box-shadow:0 12px 18px #13372f12;
    border-bottom:1px solid var(--line)
  }
  .site-header nav.is-open {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0
  }
  .site-header nav a {
    padding:12px 0
  }
  .site-header nav a[aria-current]:after {
    bottom:5px;
    width:30px
  }
  .hero {
    padding:58px 0 38px
  }
  .hero h1 {
    font-size:48px
  }
  .hero-description {
    font-size:17px;
    max-width:590px
  }
  .feature p {
    font-size:14px
  }
  .features h2 {
    font-size:30px
  }
  .extensions-layout {
    grid-template-columns:1fr;
    gap:26px
  }
  .extension-intro {
    text-align:center
  }
  .text-link {
    margin-top:17px
  }
  .extension-row {
    padding:18px 23px
  }
  .extension-copy h3 {
    font-size:18px
  }
  .extension-copy p {
    font-size:15px
  }
  .footer-inner {
    flex-wrap:wrap;
    justify-content:center
  }
  .site-footer nav {
    margin-left:0
  }
  .site-footer small {
    width:100%;
    text-align:center
  }
  .docs-layout {
    grid-template-columns:1fr;
    gap:25px
  }
  .docs-nav {
    position:static;
    flex-direction:row;
    flex-wrap:wrap;
    font-size:14px
  }
}

@media(max-width:560px) {
  .container {
    width:calc(100% - 40px)
  }
  .brand {
    font-size:22px
  }
  .brand .iconfont {
    font-size:32px
  }
  .header-download {
    font-size:12px;
    padding:8px 12px;
    min-height:39px
  }
  .menu-toggle {
    width:37px;
    height:39px
  }
  .header-inner {
    gap:11px
  }
  .hero {
    padding:44px 0 31px
  }
  .eyebrow {
    font-size:12px;
    letter-spacing:3px;
    margin-bottom:22px
  }
  .hero h1 {
    font-size:34px;
    letter-spacing:-.7px;
    line-height:1.45
  }
  .hero-description {
    font-size:15px;
    line-height:1.9;
    margin:22px 0
  }
  .hero-actions {
    gap:12px
  }
  .hero-actions .button {
    font-size:16px;
    min-width:0;
    min-height:49px;
    padding:10px 21px
  }
  .version-note {
    font-size:13px;
    margin-top:21px
  }
  .features {
    padding:37px 0 30px
  }
  .section-heading h2 {
    font-size:26px
  }
  .section-heading p {
    font-size:14px;
    margin-top:11px
  }
  .feature-grid {
    grid-template-columns:1fr;
    margin-top:18px
  }
  .feature {
    padding:20px 0
  }
  .feature+.feature:before {
    top:0;
    bottom:auto;
    left:18%;
    width:64%;
    height:1px
  }
  .feature .icon-circle {
    width:62px;
    height:62px;
    font-size:32px
  }
  .feature h3 {
    font-size:20px;
    margin-top:10px
  }
  .feature p {
    font-size:15px
  }
  .home-extensions {
    padding:33px 0
  }
  .extension-intro h2 {
    font-size:26px
  }
  .extension-intro p {
    font-size:15px
  }
  .extension-row {
    padding:17px 13px;
    gap:12px;
    flex-wrap:wrap
  }
  .extension-row .icon-circle {
    width:47px;
    height:47px;
    font-size:28px
  }
  .extension-copy h3 {
    font-size:16px
  }
  .extension-copy h3 small {
    font-size:12px;
    margin-left:8px
  }
  .extension-copy p {
    font-size:12px
  }
  .extension-row .badge {
    margin-left:59px;
    margin-top:-5px
  }
  .download-band {
    padding:28px 0
  }
  .download-band h2 {
    font-size:25px
  }
  .footer-inner {
    gap:18px
  }
  .site-footer nav {
    font-size:12px;
    gap:18px
  }
  .site-footer .brand {
    font-size:20px
  }
  .site-footer small {
    font-size:12px
  }
  .page-hero {
    padding:36px 0
  }
  .page-hero h1 {
    font-size:34px
  }
  .page-hero p {
    font-size:15px
  }
  .page-content {
    padding:30px 0 45px
  }
  .product-grid,.market-grid {
    grid-template-columns:1fr
  }
  .panel {
    padding:22px
  }
  .market-tools {
    flex-direction:column;
    align-items:stretch
  }
  .market-card header {
    gap:12px
  }
  .market-card h2 {
    font-size:21px
  }
  .market-card header .badge {
    font-size:10px
  }
  .download-meta {
    font-size:14px;
    flex-wrap:wrap;
    gap:9px 20px
  }
  .release {
    grid-template-columns:1fr;
    gap:15px
  }
  .release h2 {
    font-size:24px
  }
  .docs-nav a {
    padding:8px 10px
  }
  .article-section h2 {
    font-size:23px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
}

/* Official extension editorial catalog */
.market-tools {
  flex-wrap:wrap
}

.market-filter {
  min-height:46px;
  border:1px solid #cddbd6;
  border-radius:var(--radius-control);
  padding:10px 12px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:14px
}

.market-tools .count {
  margin-left:auto
}

.market-card {
  min-width:0;
  overflow-wrap:anywhere
}

.market-card header>div {
  min-width:0
}

.extension-icon {
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:var(--radius-control)
}

.extension-details,.extension-price {
  white-space:pre-wrap
}

.extension-price {
  margin-bottom:16px
}

.extension-screenshots {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:16px
}

.extension-screenshots img {
  display:block;
  width:100%;
  height:150px;
  object-fit:contain;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:#f7faf9
}

.extension-access {
  border-top:1px solid var(--line);
  margin-top:20px;
  padding-top:16px;
  font-size:14px
}

.extension-access p {
  margin-bottom:12px
}

.extension-access .button {
  font-size:14px;
  padding:8px 16px;
  min-height:40px
}

.market-filter:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:3px
}

@media(max-width:560px) {
  .market-tools .count {
    margin-left:0
  }
  .extension-screenshots {
    grid-template-columns:1fr
  }
  .market-card header {
    flex-wrap:wrap
  }
  .market-card header .badge {
    margin-left:0
  }
}

.market-toolbar {
  display:grid;
  grid-template-columns:minmax(140px,1fr) minmax(0,740px);
  align-items:center;
  gap:24px;
  margin-bottom:28px
}

.market-toolbar .page-breadcrumb {
  margin:0;
  min-width:0;
  flex-wrap:wrap
}

.market-search {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  margin:0
}

.market-query {
  display:flex;
  gap:8px;
  min-width:0;
  flex:1 1 340px
}

.market-search .market-tools {
  flex:0 0 auto;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:8px;
  margin:0;
  min-width:0
}

.market-search .market-filter {
  min-height:40px;
  height:40px;
  padding:8px 10px
}

.market-search .count {
  margin-left:4px;
  white-space:nowrap
}

.market-search .search-input {
  flex:1;
  min-width:0;
  width:auto;
  height:40px;
  padding:8px 12px;
  font-size:14px;
  border:1px solid var(--line);
  border-radius:var(--radius-control)
}

.market-search .button {
  min-height:40px;
  padding:8px 16px;
  font-size:14px;
  white-space:nowrap
}

.market-search .search-input:hover,.market-tools .market-filter:hover {
  outline:none;
  box-shadow:none
}

.market-search .search-input:focus,.market-search .search-input:focus-visible,.market-tools .market-filter:focus,.market-tools .market-filter:focus-visible {
  outline:none;
  box-shadow:none;
  border-color:var(--primary)
}

@media(max-width:1150px) {
  .market-toolbar {
    grid-template-columns:minmax(0,1fr);
    gap:14px;
    margin-bottom:24px
  }
}

@media(max-width:760px) {
  .market-search {
    flex-wrap:wrap
  }
  .market-query {
    flex-basis:100%
  }
  .market-search .market-tools {
    width:100%;
    flex-wrap:wrap
  }
  .market-search .count {
    margin-left:auto
  }
}

.market-search .market-count-number {
  color:#b45309;
  font-weight:700
}

.market-select {
  position:relative;
  flex:0 0 auto;
  font-size:14px
}

.market-select-trigger {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-width:102px;
  height:40px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:#fff;
  color:var(--ink);
  font:inherit;
  white-space:nowrap;
  text-align:left
}

.market-select-trigger::after {
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);
  transform:translateY(-2px) rotate(45deg);
  transition:transform .15s
}

.market-select-trigger[aria-expanded=true]::after {
  transform:translateY(2px) rotate(225deg)
}

.market-select-trigger:hover,.market-select-trigger:focus,.market-select-trigger:focus-visible {
  outline:none;
  box-shadow:none
}

.market-select-trigger:focus-visible,.market-select-trigger[aria-expanded=true] {
  border-color:var(--primary)
}

.market-select-options {
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  z-index:30;
  min-width:100%;
  width:max-content;
  max-width:calc(100vw - 40px);
  max-height:280px;
  overflow:auto;
  padding:6px;
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  background:#fff;
  box-shadow:0 10px 30px rgba(15,23,42,.12)
}

.market-select-option {
  position:relative;
  margin:2px 0;
  padding:0 30px 0 12px;
  border-radius:var(--radius-control);
  line-height:36px;
  cursor:pointer;
  white-space:nowrap;
  color:var(--ink)
}

.market-select-option:hover,.market-select-option.is-active {
  background:#f3f6f5
}

.market-select-option[aria-selected=true] {
  color:var(--primary);
  background:var(--mint);
  font-weight:600
}

.market-select-option[aria-selected=true]::after {
  content:"";
  position:absolute;
  right:12px;
  top:12px;
  width:5px;
  height:9px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg)
}

/* green */
/* Selected green banner design. Shared inner-page controls are in site.css. */
:root {
  --primary:#008e82;
  --primary-hover:#00766c;
  --ink:#092830;
  --muted:#667994;
  --dark:#07463e
}

.container {
  width:calc(100% - 128px);
  max-width:1240px
}

.site-header {
  height:76px
}

.header-inner {
  gap:30px
}

.site-header nav {
  gap:30px
}

.hero {
  background:#087f79 url("hero-green.png") center center/cover no-repeat;
  text-align:left;
  color:#fff;
  padding:59px 0 70px;
  min-height:470px
}

.hero-copy {
  max-width:710px
}

.hero .eyebrow {
  color:#d0efec;
  font-size:15px;
  letter-spacing:2px;
  margin-bottom:17px
}

.hero h1 {
  font-size:58px;
  line-height:1.27;
  letter-spacing:-1px;
  color:#fff
}

.hero-description {
  font-size:19px;
  letter-spacing:.6px;
  color:#e1f4f2;
  margin:23px 0 23px;
  max-width:640px
}

.hero-actions {
  justify-content:flex-start;
  gap:16px
}

.hero-actions .button {
  background:#fff;
  color:#007c72;
  border-color:#fff;
  font-size:17px;
  min-width:188px;
  min-height:50px;
  padding:10px 24px
}

.hero-actions .button:hover {
  background:#e8fcf4
}

.hero-actions .button-outline {
  background:transparent;
  color:#fff;
  border-color:#d4f2ee;
  min-width:174px
}

.hero-actions .button-outline:hover {
  background:#ffffff1a
}

.hero .version-note {
  font-size:14px;
  color:#d7efeb;
  margin-top:17px
}

.version-note a:hover {
  text-decoration:underline;
  text-underline-offset:4px
}

.features {
  padding:0;
  position:relative;
  margin-top:-38px
}

.feature-strip {
  background:#fff;
  border:1px solid #eff5f2;
  border-radius:var(--radius-panel);
  box-shadow:0 10px 28px #0d665c0b;
  position:relative;
  padding:32px 20px 28px
}

.feature-grid {
  grid-template-columns:repeat(4,1fr);
  margin:0
}

.feature {
  padding:0 10px
}

.feature>:is(i,.official-inline-icon) {
  color:var(--primary);
  font-size:43px;
  line-height:1
}

.feature h3 {
  font-size:17px;
  font-weight:500;
  margin:10px 0 6px
}

.feature p {
  font-size:13px;
  white-space:nowrap
}

.feature+.feature:before {
  top:5px;
  bottom:4px
}

.home-extensions {
  padding:48px 0 40px;
  background:#fff
}

.section-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:27px
}

.section-top h2 {
  font-size:36px;
  line-height:1.3
}

.section-top p {
  font-size:17px;
  color:var(--muted);
  margin-top:5px
}

.section-top .text-link {
  margin:0;
  font-size:15px
}

.extension-list {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px
}

.extension-row {
  align-items:flex-start;
  padding:25px 23px;
  min-height:181px;
  gap:20px;
  position:relative
}

.extension-row .icon-circle {
  width:76px;
  height:76px;
  font-size:40px
}

.extension-copy {
  padding-top:9px
}

.extension-copy h3 {
  font-size:22px;
  padding-right:65px
}

.extension-copy h3 small {
  font-size:14px;
  margin-left:9px;
  white-space:nowrap
}

.extension-copy p {
  font-size:15px;
  margin-top:9px
}

.extension-row>.badge {
  position:absolute;
  right:24px;
  top:24px;
  font-size:12px
}

.extension-more {
  display:inline-flex;
  gap:9px;
  align-items:center;
  color:var(--primary);
  margin-top:26px;
  font-size:15px;
  font-weight:600
}

.home-news {
  background:#eff9f6;
  padding:39px 0 35px
}

.news-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}

.release-highlight {
  background:#d7f4eb;
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-panel);
  padding:30px 34px
}

.release-highlight:before {
  content:"";
  position:absolute;
  inset:0;
  background:url("hero-green.png") left bottom/220% auto no-repeat;
  opacity:.09;
  pointer-events:none
}

.release-highlight>* {
  position:relative
}

.release-highlight .badge {
  background:#bfeee3;
  color:#157b71
}

.release-highlight h3 {
  font-size:36px;
  margin:16px 0 8px;
  line-height:1.25;
  letter-spacing:-.5px
}

.release-highlight p {
  font-size:18px;
  color:var(--ink);
  margin-bottom:20px
}

.release-highlight .button {
  background:var(--dark);
  border-color:var(--dark);
  font-size:16px;
  min-height:47px;
  padding:10px 22px
}

.release-highlight .button:hover {
  background:#006d61
}

.news-list {
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  padding:25px 26px
}

.news-list h3 {
  font-size:20px;
  margin-bottom:5px
}

.news-list a {
  display:flex;
  align-items:center;
  gap:15px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  font-size:16px;
  color:#294365
}

.news-list a:last-child {
  border:0;
  padding-bottom:0
}

.news-list a>span:first-child {
  flex:1
}

.news-list a>i {
  font-size:18px;
  color:var(--muted)
}

.news-list a:hover>span:first-child {
  color:var(--primary)
}

.download-band {
  background:var(--dark);
  padding:32px 0;
  text-align:left
}

.download-band>.container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px
}

.download-band h2 {
  font-size:29px;
  margin-bottom:7px
}

.download-band p {
  font-size:16px;
  color:#ceebe3
}

.download-band .button {
  background:#fff;
  color:var(--primary);
  border-color:#fff;
  font-size:18px;
  padding:11px 34px;
  min-height:52px;
  white-space:nowrap
}

.download-band .button:hover {
  background:#dcf6ef
}

.site-footer {
  background:#fcfefd;
  padding:23px 0 0
}

.footer-main {
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr;
  gap:30px;
  align-items:start;
  padding-bottom:19px
}

.footer-brand {
  display:flex;
  gap:17px;
  align-items:center;
  margin-top:14px
}

.site-footer .brand {
  font-size:26px;
  gap:12px
}

.site-footer .brand .iconfont {
  font-size:35px
}

.footer-slogan {
  display:block;
  font-size:13px;
  white-space:nowrap;
  padding-left:16px;
  color:var(--muted)
}

.site-footer nav {
  margin:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  font-size:13px;
  color:var(--muted);
  padding-left:40px
}

.site-footer nav h3 {
  font-size:16px;
  color:var(--ink);
  margin-bottom:3px
}

.footer-bottom {
  border-top:1px solid var(--line);
  padding:9px 0 15px
}

.site-footer small {
  color:var(--muted);
  font-size:12px
}

@media(max-width:1200px) {
  .container {
    width:calc(100% - 96px)
  }
  .header-inner {
    gap:20px
  }
  .site-header nav {
    gap:23px
  }
  .hero h1 {
    font-size:52px
  }
  .hero-description {
    font-size:17px;
    max-width:610px
  }
  .hero-copy {
    max-width:660px
  }
  .hero {
    min-height:455px;
    padding-top:55px
  }
  .feature h3 {
    font-size:16px
  }
  .feature p {
    font-size:13px
  }
  .extension-copy h3 {
    font-size:19px;
    padding-right:0
  }
  .extension-row>.badge {
    font-size:10px;
    right:18px;
    top:18px
  }
  .extension-row .icon-circle {
    width:65px;
    height:65px;
    font-size:34px
  }
  .extension-row {
    padding:28px 20px;
    gap:15px
  }
  .extension-copy {
    padding-top:16px
  }
  .extension-copy p {
    font-size:14px
  }
  .release-highlight h3 {
    font-size:31px
  }
  .release-highlight p {
    font-size:16px
  }
  .news-list a {
    font-size:14px;
    gap:9px
  }
  .news-list .badge {
    font-size:10px;
    padding:3px 6px
  }
  .footer-brand {
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
    margin-top:0
  }
  .footer-slogan {
    border:0;
    padding:0;
    margin-left:47px
  }
}

@media(max-width:850px) {
  .container {
    width:calc(100% - 48px)
  }
  .site-header {
    height:74px
  }
  .site-header nav {
    padding-left:24px
  }
  .hero {
    background-position:35% center;
    padding:44px 0 73px;
    min-height:420px
  }
  .hero-copy {
    max-width:540px
  }
  .hero h1 {
    font-size:44px
  }
  .hero-description {
    font-size:16px;
    max-width:450px
  }
  .hero .eyebrow {
    font-size:13px
  }
  .feature-strip {
    padding:26px 12px
  }
  .feature>:is(i,.official-inline-icon) {
    font-size:33px
  }
  .feature h3 {
    font-size:16px
  }
  .feature p {
    font-size:12px;
    white-space:normal
  }
  .section-top h2 {
    font-size:30px
  }
  .extension-list {
    gap:15px
  }
  .extension-row {
    display:block;
    padding:20px;
    min-height:226px
  }
  .extension-row .icon-circle {
    width:55px;
    height:55px;
    font-size:30px
  }
  .extension-copy {
    padding-top:13px
  }
  .extension-copy h3 {
    font-size:19px
  }
  .extension-more {
    margin-top:17px
  }
  .news-grid {
    grid-template-columns:1fr;
    gap:17px
  }
  .release-highlight {
    padding:27px
  }
  .news-list {
    padding:25px 27px
  }
  .news-list a {
    font-size:16px
  }
  .release-highlight h3 {
    font-size:33px
  }
  .home-news {
    padding:32px 0
  }
  .download-band h2 {
    font-size:24px
  }
  .download-band p {
    font-size:14px
  }
  .download-band .button {
    font-size:15px;
    padding:10px 20px
  }
  .footer-main {
    grid-template-columns:1.5fr 1fr 1fr;
    gap:16px
  }
  .site-footer nav {
    padding-left:0
  }
  .site-footer .brand {
    font-size:23px
  }
  .site-footer .brand .iconfont {
    font-size:30px
  }
  .footer-slogan {
    font-size:12px;
    margin-left:42px
  }
}

@media(max-width:560px) {
  .container {
    width:calc(100% - 40px)
  }
  .site-header nav {
    display:none
  }
  .site-header nav.is-open {
    display:flex
  }
  .hero {
    background-position:15% center;
    min-height:0;
    padding:39px 0 69px
  }
  .hero h1 {
    font-size:33px;
    line-height:1.42;
    letter-spacing:-.7px
  }
  .hero-description {
    font-size:14px;
    line-height:1.9;
    margin:17px 0 22px;
    max-width:330px;
    letter-spacing:0
  }
  .hero .eyebrow {
    font-size:11px;
    letter-spacing:1.5px;
    margin-bottom:16px
  }
  .hero-actions {
    gap:12px
  }
  .hero-actions .button,.hero-actions .button-outline {
    font-size:15px;
    min-width:0;
    min-height:46px;
    padding:10px 17px
  }
  .hero .version-note {
    font-size:12px;
    margin-top:16px
  }
  .features {
    margin-top:-32px
  }
  .feature-strip {
    padding:21px 13px 6px;
    border-radius:var(--radius-panel)
  }
  .feature-grid {
    grid-template-columns:1fr 1fr;
    row-gap:0
  }
  .feature {
    padding:8px 5px 20px
  }
  .feature>:is(i,.official-inline-icon) {
    font-size:33px
  }
  .feature h3 {
    font-size:16px;
    margin:8px 0 4px
  }
  .feature p {
    font-size:11px;
    white-space:nowrap
  }
  .feature+.feature:before {
    top:10px;
    bottom:24px;
    left:0;
    width:1px;
    height:auto
  }
  .feature:nth-child(3):before {
    display:none
  }
  .home-extensions {
    padding:31px 0
  }
  .section-top {
    gap:12px;
    margin-bottom:19px
  }
  .section-top h2 {
    font-size:27px
  }
  .section-top p {
    font-size:14px;
    margin-top:5px
  }
  .section-top .text-link {
    font-size:12px;
    gap:5px;
    white-space:nowrap
  }
  .extension-list {
    grid-template-columns:1fr;
    gap:15px
  }
  .extension-row {
    display:flex;
    padding:25px 18px 19px;
    min-height:160px;
    gap:16px;
    flex-wrap:nowrap
  }
  .extension-copy {
    padding-top:10px
  }
  .extension-copy h3 {
    font-size:17px
  }
  .extension-copy h3 small {
    font-size:12px;
    margin-left:7px
  }
  .extension-copy p {
    font-size:12px
  }
  .extension-row .badge {
    margin:0;
    right:16px;
    top:13px
  }
  .extension-more {
    font-size:13px;
    margin-top:17px
  }
  .release-highlight {
    padding:24px
  }
  .release-highlight h3 {
    font-size:30px
  }
  .release-highlight p {
    font-size:14px
  }
  .news-list {
    padding:23px 20px
  }
  .news-list h3 {
    font-size:18px
  }
  .news-list a {
    font-size:13px;
    gap:9px;
    padding:16px 0
  }
  .news-list .badge {
    display:none
  }
  .download-band {
    padding:28px 0
  }
  .download-band>.container {
    flex-direction:column;
    align-items:flex-start;
    gap:18px
  }
  .download-band h2 {
    font-size:23px;
    margin-bottom:5px
  }
  .download-band p {
    font-size:13px
  }
  .download-band .button {
    font-size:15px;
    min-height:45px;
    padding:8px 25px
  }
  .footer-main {
    grid-template-columns:1fr 1fr;
    gap:23px;
    padding-bottom:22px
  }
  .footer-brand {
    grid-column:1/-1;
    flex-direction:row;
    align-items:center;
    gap:14px
  }
  .site-footer .brand {
    font-size:23px
  }
  .footer-slogan {
    margin:0;
    padding-left:13px;
    border-left:1px solid var(--line);
    font-size:11px;
    display:block
  }
  .site-footer nav {
    font-size:13px;
    gap:5px
  }
  .footer-bottom {
    padding-top:12px
  }
  .site-footer small {
    font-size:11px
  }
}

/* Match the selected 1024px artboard without stretching the content vertically. */
@media(min-width:851px) and (max-width:1200px) {
  .site-header {
    height:63px
  }
  .site-header nav a {
    padding:18px 0
  }
  .site-header nav a[aria-current]:after {
    bottom:5px
  }
  .header-download {
    min-height:41px;
    font-size:14px
  }
  .hero {
    padding:42px 0 44px;
    min-height:408px
  }
  .hero h1 {
    font-size:48px;
    line-height:1.25
  }
  .hero .eyebrow {
    margin-bottom:14px;
    font-size:14px
  }
  .hero-description {
    margin:18px 0 20px;
    font-size:17px
  }
  .hero-actions .button {
    min-height:44px;
    padding:8px 22px;
    font-size:16px;
    min-width:172px
  }
  .hero-actions .button-outline {
    min-width:157px
  }
  .hero .version-note {
    margin-top:14px;
    font-size:13px
  }
  .features {
    margin-top:-34px
  }
  .feature-strip {
    padding:24px 16px 21px
  }
  .feature>:is(i,.official-inline-icon) {
    font-size:39px
  }
  .feature h3 {
    font-size:17px;
    margin:9px 0 5px
  }
  .feature p {
    font-size:13px
  }
  .home-extensions {
    padding:40px 0 30px
  }
  .section-top {
    margin-bottom:23px
  }
  .section-top h2 {
    font-size:34px
  }
  .section-top p {
    font-size:16px
  }
  .extension-row {
    min-height:160px;
    padding:22px 19px
  }
  .extension-copy {
    padding-top:12px
  }
  .extension-more {
    margin-top:22px
  }
  .home-news {
    padding:32px 0 30px
  }
  .news-list {
    padding:20px 23px
  }
  .news-list h3 {
    font-size:18px
  }
  .news-list a {
    padding:15px 0;
    font-size:14px
  }
  .release-highlight {
    padding:24px 30px
  }
  .release-highlight h3 {
    font-size:32px;
    margin:12px 0 8px
  }
  .release-highlight p {
    margin-bottom:14px;
    font-size:16px
  }
  .release-highlight .button {
    min-height:44px;
    padding:8px 19px
  }
  .download-band {
    padding:24px 0
  }
  .download-band h2 {
    font-size:27px
  }
  .download-band p {
    font-size:15px
  }
  .site-footer {
    padding-top:19px
  }
  .footer-main {
    padding-bottom:16px
  }
  .site-footer nav {
    gap:1px;
    font-size:12px
  }
  .site-footer nav h3 {
    font-size:15px
  }
  .footer-bottom {
    padding:9px 0 12px
  }
}

.member-entry {
  display:inline-flex;
  gap:6px;
  align-items:center;
  white-space:nowrap;
  color:#52657a;
  font-size:14px
}

.member-entry:hover {
  color:var(--primary)
}

.member-entry i {
  font-size:19px
}

.header-inner {
  gap:24px
}

.auth-panel {
  max-width:460px;
  margin:auto
}

.auth-panel h2 {
  margin-bottom:10px
}

.auth-panel>p {
  font-size:15px;
  margin-bottom:22px
}

.official-form label {
  display:block;
  font-size:15px;
  margin:18px 0 7px
}

.official-form input:not([type=hidden]):not([type=checkbox]),.official-form textarea {
  display:block;
  width:100%;
  border:1px solid #cddbd6;
  border-radius:var(--radius-control);
  padding:11px 14px;
  background:#fff;
  color:var(--ink);
  font:inherit
}

.official-form textarea {
  min-height:88px;
  resize:vertical
}

.official-form .button {
  margin-top:24px;
  width:100%
}

.form-status {
  font-size:14px;
  min-height:23px;
  margin-top:12px;
  color:var(--primary)
}

.form-status.error {
  color:#b13737
}

.auth-links {
  display:flex;
  justify-content:space-between;
  font-size:14px;
  color:var(--primary);
  margin-top:10px
}

.captcha-field {
  display:flex;
  gap:8px;
  align-items:center
}

.captcha-field img {
  width:110px
}

.captcha-field button {
  border:0;
  background:transparent;
  color:var(--primary);
  white-space:nowrap
}

.official-form button:disabled {
  opacity:.65;
  cursor:wait
}

@media(min-width:851px) and (max-width:1200px) {
  .header-inner {
    gap:16px
  }
  .site-header nav {
    gap:18px
  }
  .member-entry {
    font-size:13px
  }
  .header-download {
    padding:8px 18px
  }
  .brand {
    font-size:24px
  }
}

@media(max-width:850px) {
  .member-entry {
    margin-left:auto
  }
  .header-download {
    margin-left:0
  }
  .site-header nav {
    gap:0
  }
}

@media(max-width:560px) {
  .header-download {
    display:none
  }
  .member-entry {
    font-size:13px
  }
  .header-inner {
    gap:15px
  }
  .auth-panel {
    padding:23px
  }
}

.member-layout {
  display:grid;
  grid-template-columns:minmax(280px,360px) 1fr;
  gap:26px;
  align-items:start
}

.member-hint {
  font-size:13px;
  color:var(--muted);
  line-height:1.8;
  margin-top:12px
}

.member-site {
  padding:24px 0;
  border-bottom:1px solid var(--line)
}

.member-site:last-child {
  border:0;
  padding-bottom:0
}

.member-site-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}

.member-site-title h3 {
  font-size:20px;
  margin:0
}

.member-site .domain {
  font-size:16px;
  color:var(--primary);
  margin-top:5px;
  overflow-wrap:anywhere
}

.member-site .button {
  margin-top:17px;
  font-size:14px;
  min-height:42px
}

.member-site .note {
  margin:12px 0
}

.member-actions {
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:17px;
  font-size:14px
}

.member-actions .official-form {
  display:flex;
  align-items:center;
  gap:12px
}

.member-actions .form-status {
  margin:0;
  min-height:0
}

.logout-button {
  border:0;
  background:none;
  color:var(--primary);
  padding:0;
  font-size:14px;
  text-decoration:underline;
  text-underline-offset:4px
}

.consent-label {
  display:flex!important;
  align-items:center;
  gap:8px;
  font-size:13px!important
}

.consent-label input {
  width:auto!important
}

.official-form .consent-label {
  margin:18px 0 0
}

@media(max-width:850px) {
  .member-layout {
    grid-template-columns:1fr
  }
  .member-layout>.panel:first-child {
    max-width:100%
  }
}

/* Right-aligned navigation and member sign-in dialog. */
.site-header nav {
  flex:0 1 auto;
  margin-left:auto;
  justify-content:flex-end
}

.member-entry.button {
  color:#fff;
  min-height:40px;
  padding:8px 23px;
  font-size:15px;
  margin-left:6px
}

.member-entry.button:hover {
  color:#fff
}

.login-open {
  overflow:hidden
}

.login-dialog {
  width:380px;
  max-width:calc(100% - 32px);
  max-height:calc(100dvh - 32px);
  padding:28px 28px 22px;
  border:0;
  border-radius:var(--radius-panel);
  color:var(--ink);
  background:#fff;
  box-shadow:0 24px 90px #052c3940;
  margin:auto;
  overflow:auto
}

.login-dialog::backdrop {
  background:#071d29a6;
  backdrop-filter:blur(3px)
}

.login-dialog-heading {
  text-align:center;
  margin-bottom:14px
}

.login-dialog h2 {
  font-size:27px;
  color:var(--primary);
  margin:0 0 10px
}

.login-dialog-heading p {
  font-size:12px;
  color:var(--muted);
  line-height:1.8
}

.dialog-close {
  position:absolute;
  right:13px;
  top:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  line-height:1;
  width:34px;
  height:34px;
  border:0;
  background:transparent;
  border-radius:50%;
  font-size:24px;
  color:#80918e;
  cursor:pointer
}

.dialog-close i {
  display:block;
  width:22px;
  height:22px;
  font-size:22px;
  line-height:1;
  pointer-events:none
}

.dialog-close i:before {
  display:block;
  line-height:22px
}

.dialog-close:hover {
  background:#edf7f4;
  color:var(--primary)
}

.login-dialog .official-form label {
  font-size:13px;
  margin-top:10px;
  margin-bottom:5px
}

.login-dialog .official-form input:not([type=hidden]):not([type=checkbox]) {
  background:#f6f9f8;
  border-color:#e0eae6;
  min-height:42px;
  padding:9px 12px;
  font-size:14px;
  line-height:1.5
}

.login-dialog .official-form .button {
  margin-top:16px;
  min-height:42px;
  padding:8px 16px;
  font-size:14px
}

.login-dialog .auth-links {
  font-size:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
  margin-top:0
}

.login-dialog .consent-label {
  font-size:12px!important;
  line-height:1.7
}

.login-dialog .consent-label input {
  accent-color:var(--primary);
  flex-shrink:0
}

/* Carousel keeps its first slide usable even if JavaScript is disabled. */
.hero-carousel {
  position:relative;
  touch-action:pan-y
}

.hero-slide {
  padding-bottom:106px;
  min-height:500px
}

.hero-slide h1,.hero-slide h2 {
  font-size:58px;
  line-height:1.27;
  font-weight:800;
  letter-spacing:-1px;
  color:#fff;
  margin:0
}

.hero-slide .hero-description {
  margin-left:0
}

.hero-slide-extensions {
  background-image:linear-gradient(100deg,#004d5860,#00536612),url("hero-green.png");
  background-position:60% center
}

.hero-slide-members {
  background-image:linear-gradient(100deg,#004b3666,#00745112),url("hero-green.png");
  background-position:75% center
}

.hero-slide.is-active .hero-copy {
  animation:hero-reveal .35s ease-out
}

.carousel-arrow {
  position:absolute;
  top:44%;
  width:40px;
  height:52px;
  display:grid;
  place-items:center;
  border:1px solid #ffffff40;
  border-radius:var(--radius-control);
  background:#064f4733;
  color:#fff;
  cursor:pointer;
  font-size:30px
}

.carousel-prev {
  left:12px
}

.carousel-next {
  right:12px
}

.carousel-arrow:hover {
  background:#ffffff26
}

.carousel-pagination {
  position:absolute;
  bottom:57px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:5px
}

.carousel-dot {
  width:22px;
  height:34px;
  padding:0;
  border:0;
  cursor:pointer;
  background:transparent;
  display:grid;
  place-items:center
}

.carousel-dot:after {
  content:"";
  width:12px;
  height:12px;
  border-radius:50%;
  background:#ffffff80;
  transition:background-color .2s
}

.carousel-dot[aria-current]:after {
  background:#fff
}

.hero-carousel button:focus-visible {
  outline:2px solid #fff;
  outline-offset:3px
}

@keyframes hero-reveal {
  from {
    opacity:.4
  }
  to {
    opacity:1
  }
}

@media(min-width:851px) and (max-width:1200px) {
  .hero-slide {
    padding:42px 0 100px;
    min-height:450px
  }
  .hero-slide h1,.hero-slide h2 {
    font-size:48px;
    line-height:1.25
  }
  .carousel-arrow {
    width:32px;
    left:6px
  }
  .carousel-next {
    left:auto;
    right:6px
  }
}

@media(max-width:850px) {
  .site-header nav {
    margin-left:0;
    justify-content:flex-start
  }
  .menu-toggle {
    order:0;
    margin-left:auto
  }
  .member-entry.button {
    margin-left:0;
    min-height:39px;
    padding:8px 18px;
    font-size:14px
  }
  .hero-slide {
    padding:44px 0 115px;
    min-height:460px
  }
  .hero-slide h1,.hero-slide h2 {
    font-size:44px
  }
  .carousel-arrow {
    top:auto;
    bottom:54px;
    width:36px;
    height:36px;
    border-radius:50%;
    font-size:24px
  }
  .carousel-prev {
    left:24px
  }
  .carousel-next {
    right:24px
  }
  .carousel-pagination {
    bottom:55px
  }
}

@media(max-width:560px) {
  .hero-slide {
    padding:37px 0 119px;
    min-height:461px
  }
  .hero-slide h1,.hero-slide h2 {
    font-size:32px;
    line-height:1.42;
    letter-spacing:-.7px
  }
  .hero-slide .hero-description {
    min-height:54px
  }
  .hero-slide .hero-actions .button {
    padding:10px 15px;
    font-size:14px
  }
  .hero-slide .version-note {
    font-size:11px
  }
  .login-dialog {
    padding:28px 22px 22px
  }
  .login-dialog h2 {
    font-size:25px
  }
  .login-dialog-heading p {
    font-size:12px
  }
  .login-dialog .official-form label {
    margin-top:10px
  }
  .login-dialog .official-form .button {
    min-height:42px
  }
}

@media(prefers-reduced-motion:reduce) {
  .hero-slide.is-active .hero-copy {
    animation:none
  }
  .carousel-dot:after {
    transition:none
  }
}

/* Registration stays inside the existing member dialog. */
.verification-field {
  display:flex;
  gap:9px;
  align-items:stretch
}

.verification-field input {
  min-width:0;
  flex:1
}

.send-register-code {
  flex-shrink:0;
  border:1px solid #cddfd8;
  border-radius:var(--radius-control);
  background:#eef8f4;
  color:var(--primary);
  padding:0 13px;
  font-size:13px;
  cursor:pointer
}

.send-register-code:hover {
  background:#e1f2eb
}

.send-register-code:disabled {
  cursor:wait;
  opacity:.6
}

.verification-status {
  font-size:12px;
  line-height:1.6;
  margin-top:5px;
  color:var(--primary)
}

.verification-status:empty {
  display:none
}

.verification-status.error {
  color:#b13737
}

.register-passwords {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

.is-register .auth-links>span {
  color:var(--muted)
}

@media(max-width:560px) {
  .login-dialog .official-form input:not([type=hidden]):not([type=checkbox]) {
    font-size:14px;
    min-height:42px;
    padding:9px 12px
  }
  .register-passwords {
    gap:9px
  }
  .send-register-code {
    padding:0 10px;
    font-size:12px
  }
}

/* Centre the actual arrow geometry without icon-font baselines or button padding. */
.carousel-arrow {
  box-sizing:border-box;
  padding:0;
  line-height:1
}

.carousel-arrow svg {
  display:block;
  width:28px;
  height:28px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round
}

@media(max-width:850px) {
  .carousel-arrow svg {
    width:24px;
    height:24px
  }
}

/* User-requested inset arrows and direct Login / Register tabs. */
@media(min-width:851px) {
  .carousel-prev {
    left:clamp(16px,calc((100vw - 1240px)/2 - 64px),120px)
  }
  .carousel-next {
    left:auto;
    right:clamp(16px,calc((100vw - 1240px)/2 - 64px),120px)
  }
}

@media(min-width:851px) and (max-width:1200px) {
  .carousel-prev {
    left:12px
  }
  .carousel-next {
    right:12px
  }
}

.auth-tabs {
  display:flex;
  justify-content:center;
  gap:28px;
  margin:0 0 11px
}

.auth-tabs button {
  font:inherit;
  font-size:16px;
  font-weight:650;
  color:#94cfc3;
  border:0;
  background:none;
  cursor:pointer;
  padding:4px 2px 9px;
  position:relative
}

.auth-tabs button[aria-selected=true] {
  color:var(--primary)
}

.auth-tabs button[aria-selected=true]:after {
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  bottom:0;
  height:2px;
  border-radius:2px;
  background:var(--primary)
}

.auth-tabs button:hover {
  color:var(--primary)
}

.auth-tabs button:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:4px
}

.login-dialog-heading h2.sr-only {
  margin:0
}

.login-dialog .form-status {
  font-size:12px;
  min-height:0;
  margin:8px 0
}

.login-dialog .form-status:empty {
  display:none
}

.login-dialog .auth-links {
  margin-top:16px
}

.login-dialog .send-register-code {
  font-size:12px;
  padding:0 10px
}

.login-dialog .consent-label {
  font-size:11px!important
}

.login-dialog .dialog-close i {
  width:20px;
  height:20px;
  font-size:20px
}

.login-dialog .dialog-close i:before {
  line-height:20px
}

/* Shared member fields, including browser autofill and keyboard focus. */
.official-green :is(.login-dialog,.auth-panel) .official-form input.auth-input {
  appearance:none;
  box-sizing:border-box;
  height:42px;
  min-height:42px;
  padding:9px 12px;
  border:1px solid #e0eae6;
  border-radius:var(--radius-control);
  background:#f6f9f8;
  color:var(--ink);
  font-family:inherit;
  font-size:14px;
  font-weight:400;
  line-height:1.5;
  outline:none;
  outline-offset:0;
  box-shadow:none;
  caret-color:var(--ink)
}

.official-green :is(.login-dialog,.auth-panel) .official-form input.auth-input::placeholder {
  color:#85938f;
  opacity:1
}

.official-green :is(.login-dialog,.auth-panel) .official-form input.auth-input:hover {
  border-color:#b4cec7
}

.official-green :is(.login-dialog,.auth-panel) .official-form input.auth-input:focus {
  border-color:var(--primary);
  outline:none;
  outline-offset:0;
  box-shadow:none
}

.official-green :is(.login-dialog,.auth-panel) .official-form input.auth-input:is(:autofill,:-webkit-autofill) {
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
  -webkit-box-shadow:inset 0 0 0 1000px #f6f9f8;
  box-shadow:inset 0 0 0 1000px #f6f9f8
}

/* Registration agreement reader, layered above the intact registration form. */
.login-dialog .registration-consent {
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:16px;
  font-size:12px;
  line-height:1.8
}

.login-dialog .registration-consent>input {
  appearance:auto;
  width:14px;
  height:14px;
  min-height:0;
  flex:0 0 14px;
  margin:4px 0 0;
  padding:0;
  accent-color:var(--primary)
}

.login-dialog .registration-consent label {
  display:inline;
  margin:0;
  font-size:12px;
  cursor:pointer
}

.registration-agreement-link {
  display:inline;
  padding:0;
  border:0;
  background:none;
  color:var(--primary);
  font:inherit;
  line-height:inherit;
  cursor:pointer;
  text-underline-offset:3px
}

.registration-agreement-link:hover {
  text-decoration:none;
  color:var(--primary-hover)
}

.registration-agreement {
  width:620px;
  max-width:calc(100% - 32px);
  max-height:calc(100dvh - 32px);
  margin:auto;
  padding:0;
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  color:var(--ink);
  background:#fff;
  box-shadow:0 24px 90px #052c3940;
  overflow:hidden
}

.registration-agreement[open] {
  display:flex;
  flex-direction:column
}

.registration-agreement::backdrop {
  background:#071d2980;
  backdrop-filter:blur(2px)
}

.registration-agreement-header {
  position:relative;
  flex-shrink:0;
  padding:22px 54px 18px 24px;
  border-bottom:1px solid var(--line)
}

.registration-agreement-header h2 {
  margin:0;
  font-size:18px;
  letter-spacing:0;
  line-height:1.5
}

.registration-agreement-header p {
  margin-top:5px;
  color:var(--muted);
  font-size:12px
}

.registration-agreement-meta {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0 6px;
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;
  font-weight:400;
  line-height:20px;
  letter-spacing:0
}

.registration-agreement-meta .agreement-meta-group {
  display:inline-flex;
  align-items:center;
  gap:3px;
  white-space:nowrap
}

/* Optical alignment of Latin capitals/numerals with the CJK glyphs. */
.registration-agreement-meta .agreement-meta-latin {
  position:relative;
  top:1px;
  font:inherit
}

.registration-agreement-content {
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  padding:22px 24px;
  font-size:14px;
  line-height:1.9
}

.registration-agreement-content:focus {
  outline:none
}

.registration-agreement-content h3 {
  margin:22px 0 8px;
  font-size:15px;
  line-height:1.6
}

.registration-agreement-content p {
  margin:0 0 10px;
  color:#5d706c
}

.registration-agreement-content h3:first-child {
  margin-top:0
}

.registration-agreement-footer {
  flex-shrink:0;
  display:flex;
  justify-content:flex-end;
  padding:14px 24px;
  border-top:1px solid var(--line);
  background:#f8fbfa
}

.registration-agreement-footer .button {
  min-height:38px;
  padding:8px 18px;
  font-size:14px
}

@media(max-width:560px) {
  .registration-agreement-header {
    padding-left:20px
  }
  .registration-agreement-content {
    padding:18px 20px
  }
  .registration-agreement-footer {
    padding:12px 20px
  }
}

/* Modal forms use placeholders; linked labels remain available to assistive tools. */
.login-dialog .official-form .auth-field-label {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}

.login-dialog .login-dialog-heading {
  margin-bottom:22px
}

.login-dialog .official-form>.auth-input,.login-dialog .official-form>.verification-field,.login-dialog .official-form>.register-passwords,.login-dialog .official-form>.captcha-field {
  margin-top:14px
}

.login-dialog .official-form>.auth-input[name=username] {
  margin-top:0
}

.login-dialog .register-passwords>div {
  min-width:0
}

.login-dialog .register-passwords {
  grid-template-columns:minmax(0,1fr);
  gap:14px
}

/* header */
/* The home header overlays the carousel; inner pages keep their white header. */
.site-header {
  position:relative;
  z-index:40
}

.official-overlay {
  --home-header-height:76px
}

.official-overlay .site-header {
  position:absolute;
  inset:0 0 auto;
  height:var(--home-header-height);
  background:rgba(255,255,255,.025);
  border-bottom:1px solid #ffffff33;
  backdrop-filter:none;
  -webkit-backdrop-filter:none
}

.official-home .hero-slide {
  padding-top:calc(59px + var(--home-header-height));
  min-height:calc(500px + var(--home-header-height))
}

.header-account {
  position:relative;
  flex:0 0 auto;
  line-height:1.5
}

@media(max-width:850px) {
  .site-header .header-inner {
    --mobile-menu-width:43px;
    --mobile-controls-gap:16px;
    gap:var(--mobile-controls-gap)
  }
  .site-header .header-inner>.header-account,.site-header .header-inner>.guest-account {
    order:1;
    margin-left:auto
  }
  .site-header .header-inner>.menu-toggle {
    order:2;
    margin-left:0;
    width:var(--mobile-menu-width);
    flex-shrink:0
  }
  .site-header .account-panel:before {
    right:calc(13px + var(--mobile-menu-width) + var(--mobile-controls-gap))
  }
}

@media(max-width:560px) {
  .site-header .header-inner {
    --mobile-menu-width:37px;
    --mobile-controls-gap:15px
  }
}

.account-toggle,.guest-account {
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  flex:0 0 38px;
  width:38px;
  height:38px;
  padding:1px;
  border:2px solid #fff;
  border-radius:50%;
  background:#eaf5f2;
  box-shadow:0 0 0 3px #008e821c;
  cursor:pointer
}

.account-toggle img,.account-identity img {
  display:block;
  object-fit:cover;
  border-radius:50%;
  flex-shrink:0
}

.account-toggle img {
  width:32px;
  height:32px
}

.guest-account {
  color:var(--primary);
  text-decoration:none;
  transition:background-color .15s ease
}

.guest-account-icon {
  display:block;
  width:25px;
  height:25px;
  flex-shrink:0
}

@media(max-width:850px) {
  .site-header .account-toggle,.site-header .guest-account {
    flex-basis:38px;
    width:38px;
    height:38px
  }
  .site-header .account-toggle img {
    width:32px;
    height:32px
  }
  .site-header .guest-account-icon {
    width:25px;
    height:25px
  }
}

.guest-account:hover {
  background:#dceee7;
  color:var(--primary)
}

.guest-account:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:3px
}

.official-overlay .guest-account {
  background:#ffffff24;
  color:#fff
}

.official-overlay .account-toggle,.official-overlay .guest-account {
  box-shadow:0 0 0 3px #ffffff24
}

/* A moving highlight on the outer halo; the avatar and its white border stay still. */
.site-header .account-toggle,.site-header .guest-account {
  position:relative;
  --account-orbit-color:19 142 130
}

.official-overlay .account-toggle,.official-overlay .guest-account {
  --account-orbit-color:255 255 255
}

.site-header .account-toggle:before,.site-header .guest-account:before,.site-header .account-identity-avatar:before {
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0deg,transparent 95deg,rgb(var(--account-orbit-color) / .12) 120deg,rgb(var(--account-orbit-color) / .7) 160deg,rgb(var(--account-orbit-color) / .95) 180deg,transparent 215deg,transparent 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
  animation:account-halo-orbit 8s linear infinite
}

@keyframes account-halo-orbit {
  from { transform:rotate(0deg) }
  to { transform:rotate(360deg) }
}

@media(prefers-reduced-motion:reduce) {
  .site-header .account-toggle:before,.site-header .guest-account:before,.site-header .account-identity-avatar:before {
    animation:none
  }
}

.official-overlay .guest-account:hover {
  background:#ffffff3d;
  color:#fff
}

.official-overlay .guest-account:focus-visible {
  outline-color:#fff
}

.account-toggle:hover,.account-toggle[aria-expanded=true],.guest-account:hover {
  box-shadow:0 0 0 3px #008e8233
}

.official-overlay .account-toggle:hover,.official-overlay .account-toggle[aria-expanded=true],.official-overlay .guest-account:hover {
  box-shadow:0 0 0 3px #ffffff40
}

.account-toggle:focus-visible,.account-shortcuts a:focus-visible,.account-shortcuts button:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:3px
}

.account-panel {
  position:absolute;
  right:0;
  top:calc(100% + 14px);
  width:300px;
  padding:14px;
  background:#fff;
  border:1px solid #e1ece8;
  border-radius:var(--radius-panel);
  box-shadow:0 14px 40px #073c3526;
  color:var(--ink);
  text-align:left
}

.account-panel[hidden] {
  display:none
}

.account-panel:before {
  content:"";
  position:absolute;
  right:13px;
  top:-8px;
  width:14px;
  height:14px;
  background:#fff;
  border-top:1px solid #e1ece8;
  border-left:1px solid #e1ece8;
  transform:rotate(45deg)
}

.account-panel:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-16px;
  height:16px
}

.account-identity {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  min-width:0
}

.account-identity-avatar {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  flex:0 0 52px;
  width:52px;
  height:52px;
  padding:1px;
  border:2px solid #fff;
  border-radius:50%;
  background:#eaf5f2;
  box-shadow:0 0 0 3px #008e820a;
  --account-orbit-color:19 142 130
}

.site-header .account-identity-avatar:before {
  opacity:.25
}

.account-identity img {
  width:46px;
  height:46px
}

.account-identity>div {
  min-width:0
}

.account-identity strong {
  display:block;
  font-size:15px;
  font-weight:500;
  overflow-wrap:anywhere
}

.account-identity p {
  font-size:13px;
  color:#748580;
  margin:6px 0 0
}

.account-identity p span {
  color:var(--primary)
}

.account-shortcuts {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px
}

.account-shortcuts a,.account-shortcuts button {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  width:100%;
  min-height:36px;
  padding:7px 10px;
  border:0;
  border-radius:var(--radius-control);
  background:#f2f7f5;
  color:#29463f;
  font-family:inherit;
  font-size:13px;
  font-weight:400;
  line-height:20px;
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none
}

.account-shortcuts a:hover,.account-shortcuts button:hover {
  background:#e5f4ef;
  color:var(--primary)
}

.account-shortcut-icon {
  display:block;
  width:16px;
  height:16px;
  flex:0 0 16px
}

.account-shortcuts a>span,.account-shortcuts button>span {
  display:flex;
  align-items:center;
  min-height:20px;
  line-height:20px
}

.account-logout {
  margin:0
}

.account-logout .form-status {
  font-size:12px;
  line-height:1.5;
  min-height:0;
  margin:6px 0 0
}

.account-logout .form-status:empty {
  display:none
}

@media(min-width:851px) and (max-width:1200px) {
  .official-overlay {
    --home-header-height:63px
  }
  .official-home .hero-slide {
    padding-top:calc(42px + var(--home-header-height));
    min-height:calc(450px + var(--home-header-height))
  }
}

@media(max-width:850px) {
  .official-overlay {
    --home-header-height:74px
  }
  .official-home .hero-slide {
    padding-top:calc(44px + var(--home-header-height));
    min-height:calc(460px + var(--home-header-height))
  }
  .header-account {
    position:static
  }
  .account-panel {
    top:calc(100% + 2px);
    max-width:100%
  }
}

@media(max-width:560px) {
  .official-home .hero-slide {
    padding-top:calc(37px + var(--home-header-height));
    min-height:calc(461px + var(--home-header-height))
  }
  .account-panel {
    padding:14px
  }
  .account-identity {
    gap:13px
  }
  .account-identity strong {
    font-size:15px
  }
  .account-shortcuts a,.account-shortcuts button {
    padding:7px 9px;
    font-size:13px
  }
}

.official-overlay .site-header .brand,.official-overlay .site-header .brand .iconfont {
  color:#fff
}

.site-header nav {
  gap:10px
}

.site-header nav a {
  display:inline-flex;
  align-items:center;
  gap:7px;
  line-height:22px;
  padding:7px 10px;
  border-radius:var(--radius-control);
  transition:background-color .15s ease,color .15s ease
}

.site-header nav a:not([aria-current]):hover {
  background:#eaf5f2;
  color:var(--primary)
}

.site-header nav a[aria-current],.site-header nav a[aria-current]:hover {
  background:#eaf5f2;
  color:var(--primary)
}

.site-header nav a>:is(i,.official-inline-icon) {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:22px;
  font-size:18px;
  line-height:1;
  flex-shrink:0
}

.site-header nav a>:is(i,.official-inline-icon):before {
  display:block
}

@media(min-width:851px) {
  .official-overlay .site-header nav a {
    color:#fff
  }
  .official-overlay .site-header nav a:not([aria-current]):hover {
    background:#ffffff24;
    color:#fff
  }
  .official-overlay .site-header nav a[aria-current],.official-overlay .site-header nav a[aria-current]:hover {
    background:#ffffff24;
    color:#fff
  }
}

/* Compact inner-page banners share the overlay navigation and green gradient assets. */
.official-home .hero-slide>.container {
  display:flex;
  align-items:center;
  min-height:300px
}

.official-home .hero-slide .eyebrow {
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 20px;
  padding:0;
  letter-spacing:.06em;
  line-height:24px
}

.official-home .hero-slide .eyebrow>span {
  display:block
}

/* Latin lettering sits visually higher than the adjacent Chinese glyphs. */
.official-home .hero-slide .eyebrow>span:first-child {
  transform:translateY(1px)
}

.official-home .hero-eyebrow-dot {
  width:3px;
  height:3px;
  flex:0 0 3px;
  border-radius:50%;
  background:currentColor
}

.official-home .hero-slide h1,.official-home .hero-slide h2 {
  white-space:nowrap;
  letter-spacing:0
}

.official-home .hero-slide .hero-description {
  margin:24px 0 0
}

@media(max-width:850px) {
  .official-home .hero-slide>.container {
    min-height:240px
  }
  .official-home .hero-slide h1,.official-home .hero-slide h2 {
    font-size:clamp(24px,6.8vw,44px)
  }
}

@media(max-width:560px) {
  .official-home .hero-slide>.container {
    min-height:230px
  }
  .official-home .hero-slide .eyebrow {
    letter-spacing:.03em;
    gap:7px
  }
}

.official-overlay .page-hero {
  height:300px;
  padding:0;
  background:#003a37 url("hero-green-architecture.png") center 48%/cover no-repeat
}

.official-overlay .page-hero-flow {
  background-image:url("hero-green-flow.png")
}

.page-breadcrumb {
  display:flex;
  align-items:center;
  gap:10px;
  color:#748580;
  font-size:13px;
  line-height:20px;
  margin:0 0 24px
}

.page-breadcrumb>a,.page-breadcrumb>span,.page-breadcrumb a>span {
  display:inline-flex;
  align-items:center;
  min-height:20px;
  line-height:20px
}

.page-breadcrumb a {
  gap:7px;
  color:inherit
}

.page-breadcrumb a:hover,.page-breadcrumb-icon {
  color:var(--primary)
}

/* CJK glyphs sit slightly below the line-box centre; align icon ink optically. */
.page-breadcrumb svg {
  display:block;
  flex-shrink:0;
  fill:currentColor;
  transform:translateY(1px)
}

.page-breadcrumb-icon {
  width:16px;
  height:16px
}

.page-breadcrumb-separator {
  width:14px;
  height:14px
}

.page-heading {
  margin-bottom:28px
}

.page-heading h1 {
  font-size:30px;
  line-height:1.4;
  font-weight:600;
  margin:0 0 8px;
  color:var(--ink)
}

.page-heading p {
  font-size:15px;
  line-height:1.8;
  color:var(--muted);
  margin:0
}

.official-overlay .page-content {
  padding-top:24px
}

.hero-slide-extensions {
  background-image:url("hero-green-extensions.png");
  background-position:center
}

/* Preserve the image's top clear space beneath the overlay menu. */
.hero-slide-members {
  background-image:url("hero-green-sites.png");
  background-position:center top
}

@media(min-width:851px) and (max-width:1100px) {
  .site-header nav {
    gap:4px
  }
  .site-header nav a {
    font-size:14px;
    gap:5px;
    padding-inline:8px
  }
  .site-header nav a>:is(i,.official-inline-icon) {
    width:16px;
    font-size:16px
  }
  .header-inner {
    gap:16px
  }
}

@media(max-width:850px) {
  .site-header nav.is-open {
    gap:4px
  }
  .site-header nav a {
    padding:9px 12px
  }
}

@media(max-width:850px) {
  .official-overlay .page-hero {
    height:250px
  }
  .page-heading h1 {
    font-size:27px
  }
}

@media(max-width:560px) {
  .official-overlay .page-hero {
    height:200px;
    background-position:65% center
  }
  .page-heading h1 {
    font-size:24px
  }
  .page-heading p {
    font-size:14px
  }
  .page-breadcrumb {
    gap:7px;
    margin-bottom:20px
  }
  .page-heading {
    margin-bottom:24px
  }
}

.site-header nav a[aria-current]:after {
  display:none
}

/* Keep all eight public sections and account access within narrower headers. */
@media(min-width:851px) and (max-width:1150px) {
  .header-inner {
    gap:12px
  }
  .site-header nav {
    gap:0
  }
  .site-header nav a {
    font-size:13px;
    padding-inline:7px;
    gap:0
  }
  .site-header nav a>:is(i,.official-inline-icon) {
    display:none
  }
  .site-header .brand {
    font-size:23px;
    gap:7px
  }
  .site-header .brand .iconfont {
    font-size:31px
  }
}

/* Match the first slide's calm text area on narrow screens. */
@media(max-width:560px) {
  .hero-slide-extensions,.hero-slide-members {
    background-position:15% center
  }
}

/* Inline paths render with the page and do not wait for an icon font. */
.official-inline-icon {
  display:inline-block;
  width:1em;
  height:1em;
  flex-shrink:0;
  vertical-align:-.125em;
  fill:currentColor
}

/* section-banners */
/* Shared 300px section banners include the overlaid site navigation. */
.official-overlay #main:not(.official-member-content)>.page-hero.section-banner {
  position:relative;
  height:300px;
  padding:0;
  overflow:hidden;
  background:linear-gradient(110deg,#00636b 0%,#008d90 58%,#17c9b8 100%);
}

.official-overlay #main:not(.official-member-content)>.page-hero.section-banner::before {
  content:"";
  position:absolute;
  inset:0 0 0 auto;
  width:min(100%,1080px);
  pointer-events:none;
  background-image:var(--section-banner-image);
  background-size:auto 360px;
  background-position:right top;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 25%);
  mask-image:linear-gradient(to right,transparent,#000 25%);
}

.section-banner--product {
  --section-banner-image:url("banner-product.png")
}

.section-banner--extensions {
  --section-banner-image:url("banner-extensions.png")
}

.section-banner--templates {
  --section-banner-image:url("banner-templates.png")
}

.section-banner--docs {
  --section-banner-image:url("banner-docs.png")
}

.section-banner--articles {
  --section-banner-image:url("banner-articles.png")
}

.section-banner--faq {
  --section-banner-image:url("banner-faq.png")
}

.section-banner--authorization {
  --section-banner-image:url("banner-authorization.png")
}

.section-banner--contact {
  --section-banner-image:url("banner-contact.png")
}

@media(max-width:850px) {
  .official-overlay #main:not(.official-member-content)>.page-hero.section-banner::before {
    background-position:var(--section-banner-mobile-x,88%) top;
    -webkit-mask-image:none;
    mask-image:none;
  }
}

.section-banner--extensions,.section-banner--templates {
  --section-banner-mobile-x:86%
}

.section-banner--docs {
  --section-banner-mobile-x:89%
}

.section-banner--articles {
  --section-banner-mobile-x:83%
}

.section-banner--faq {
  --section-banner-mobile-x:84%
}

.section-banner--authorization {
  --section-banner-mobile-x:85%
}

/* home-extensions */
.home-recommendations {
  padding:48px 0;
  background:linear-gradient(180deg,#fff 0%,#f5faf8 100%)
}

.home-section-heading {
  text-align:center;
  margin-bottom:28px
}

.home-section-heading h2 {
  font-size:30px;
  line-height:1.4;
  letter-spacing:0;
  font-weight:700;
  margin:0;
  color:var(--ink)
}

.home-section-heading p {
  margin:8px 0 0;
  font-size:14px;
  line-height:1.8;
  color:var(--muted)
}

.home-extension-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  align-items:start
}

.home-extension-action {
  text-align:center;
  margin-top:26px
}

.home-extension-action a {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--primary);
  padding:4px 0
}

.home-extension-action a:hover {
  color:var(--primary-hover)
}

.home-extension-grid>.empty-state {
  width:100%
}

@media(max-width:1050px) {
  .home-extension-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:640px) {
  .home-extension-grid {
    grid-template-columns:minmax(0,1fr)
  }
}

@media(max-width:600px) {
  .home-recommendations {
    padding:32px 0
  }
  .home-section-heading {
    margin-bottom:22px
  }
  .home-section-heading h2 {
    font-size:26px
  }
  .home-section-heading p {
    font-size:13px
  }
  .home-extension-action {
    margin-top:22px
  }
}

.home-templates {
  padding:48px 0;
  background:#fff
}

.home-templates .home-template-grid {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:22px
}

.home-template-grid .template-card {
  width:calc((100% - 44px)/3)
}

.home-template-grid h3 {
  font-size:17px;
  line-height:1.5;
  margin:0 0 8px
}

.home-template-grid .template-card-meta {
  flex-wrap:wrap
}

.home-template-detail {
  display:inline-flex;
  gap:6px;
  align-items:center;
  margin-left:auto;
  color:var(--primary)
}

.home-template-empty {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:30px 24px;
  background:#f7faf9;
  border:1px solid var(--line);
  border-radius:var(--radius-panel)
}

.home-template-empty-icon {
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border-radius:var(--radius-control);
  background:#e7f5ef;
  color:var(--primary);
  font-size:29px;
  flex-shrink:0
}

.home-template-empty h3 {
  font-size:17px;
  line-height:1.6;
  margin:0 0 4px;
  font-weight:500
}

.home-template-empty p {
  font-size:13px;
  color:var(--muted);
  line-height:1.8
}

@media(max-width:1000px) {
  .home-template-grid .template-card {
    width:calc((100% - 22px)/2)
  }
}

@media(max-width:600px) {
  .home-templates {
    padding:32px 0
  }
  .home-template-grid .template-card {
    width:100%
  }
  .home-template-empty {
    align-items:flex-start;
    padding:22px 18px;
    gap:14px
  }
  .home-template-empty-icon {
    width:46px;
    height:46px;
    font-size:25px
  }
  .home-template-empty h3 {
    font-size:16px
  }
  .home-template-empty p {
    font-size:12px
  }
}

.home-product {
  padding:48px 0;
  background:#f5faf8
}

.home-product-layout {
  display:grid;
  grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);
  gap:30px;
  align-items:stretch
}

.home-product-intro {
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);
  gap:28px;
  align-items:center;
  min-width:0
}

.home-product-intro:last-child {
  grid-column:1/-1
}

.home-product-visual {
  height:100%;
  min-height:280px;
  overflow:hidden;
  border-radius:var(--radius-panel)
}

.home-product-visual img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:100% center
}

.home-product-copy {
  min-width:0
}

.home-product-eyebrow {
  font-size:13px;
  color:var(--primary);
  margin:0 0 8px;
  font-weight:500
}

.home-product-copy h3 {
  font-size:26px;
  line-height:1.45;
  font-weight:500;
  margin:0 0 14px
}

.home-product-copy>p:not(.home-product-eyebrow) {
  font-size:14px;
  line-height:1.9;
  color:var(--muted);
  margin:0 0 12px
}

.home-product-points {
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  list-style:none;
  margin:14px 0;
  padding:0;
  font-size:12px;
  color:#52675e
}

.home-product-points li {
  display:flex;
  align-items:center;
  gap:4px
}

.home-product-points i {
  color:var(--primary);
  font-size:15px
}

.home-product-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--primary);
  font-size:14px;
  padding:5px 0
}

.home-product-link:hover {
  color:var(--primary-hover)
}

.home-product-link:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:4px
}

.home-product-updates {
  min-width:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  padding:22px 24px
}

.home-product-updates-heading {
  display:flex;
  align-items:center;
  gap:12px
}

.home-product-updates-heading h2 {
  font-size:21px;
  font-weight:500;
  line-height:1.5;
  margin:0
}

.home-product-updates-heading h2 span {
  font-size:12px;
  color:#84928b;
  font-weight:400
}

.home-product-updates-description {
  font-size:13px;
  color:var(--muted);
  margin:8px 0 18px
}

.home-product-updates .home-resource-list {
  border-top:1px solid var(--line)
}

.home-product-updates .home-resource-list a {
  min-height:58px;
  font-size:14px;
  gap:6px
}

.home-release-label {
  display:flex;
  align-items:center;
  gap:6px;
  flex:1;
  min-width:0
}

.home-release-label .home-resource-title {
  flex:0 1 auto
}

.home-product-updates .home-resource-list time {
  margin-left:auto
}

@media(max-width:600px) {
  .home-release-label {
    flex-wrap:wrap;
    gap:2px 6px
  }
  .home-release-label .home-resource-title {
    white-space:normal
  }
}

@media(max-width:1100px) {
  .home-product-layout {
    grid-template-columns:1fr
  }
  .home-product-intro {
    grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)
  }
  .home-product-visual {
    min-height:240px
  }
  .home-product-updates {
    padding:20px 24px
  }
}

@media(max-width:600px) {
  .home-product {
    padding:32px 0
  }
  .home-product-layout {
    gap:24px
  }
  .home-product-intro {
    grid-template-columns:1fr;
    gap:22px
  }
  .home-product-visual {
    height:190px;
    min-height:0
  }
  .home-product-visual img {
    object-position:78% 44%
  }
  .home-product-copy h3 {
    font-size:25px
  }
  .home-product-updates {
    padding:20px 18px
  }
}

.home-resources {
  padding:48px 0;
  background:#fff
}

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

.home-resource-column {
  min-width:0;
  background:#fff;
  border:1px solid #edf0ee;
  border-radius:var(--radius-control);
  padding:14px 12px 6px;
  box-shadow:0 3px 12px #173d3003
}

.home-resource-heading {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:2px 2px 12px;
  border-bottom:1px solid #edf0ee;
  margin-bottom:12px
}

.home-resource-icon {
  font-size:24px;
  line-height:1;
  color:var(--primary);
  flex-shrink:0
}

.home-resource-heading h3 {
  font-size:19px;
  line-height:1.6;
  font-weight:500;
  margin:0;
  white-space:nowrap
}

.home-resource-heading h3 span {
  font-size:11px;
  color:#8a9692;
  font-weight:400
}

.home-resource-more {
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  flex-shrink:0;
  width:28px;
  height:32px;
  color:#8a9692;
  font-size:22px
}

.home-resource-more:hover {
  color:var(--primary)
}

.home-resource-cover {
  display:block;
  overflow:hidden
}

.home-resource-cover img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:2.5/1;
  object-fit:cover;
  object-position:70% center
}

.home-resource-list {
  list-style:none;
  margin:6px 0 0;
  padding:0
}

.home-resource-list li {
  margin:0;
  padding:0;
  border-bottom:1px dashed #edf0ee
}

.home-resource-list li:last-child {
  border-bottom:0
}

.home-resource-list a {
  display:flex;
  align-items:center;
  gap:5px;
  min-height:48px;
  padding:12px 0;
  font-size:14px;
  line-height:1.8;
  color:#53615c
}

.home-resource-title {
  min-width:0;
  flex:1;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}

.home-resource-list a>i {
  color:#82918b;
  flex-shrink:0;
  font-size:14px
}

.home-resource-list time {
  font-size:12px;
  color:#7a8781;
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
  margin-left:3px
}

.home-resource-list a:hover,.home-resource-list a:hover>i {
  color:var(--primary)
}

.home-resource-badge {
  flex-shrink:0;
  font-size:11px;
  line-height:1.7;
  color:var(--primary);
  background:#e8f5ef;
  padding:1px 6px;
  border-radius:3px
}

.home-resource-list a:focus-visible,.home-resource-more:focus-visible,.home-resource-cover:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:3px;
  border-radius:3px
}

.home-resource-empty {
  padding:32px 12px;
  font-size:13px;
  color:var(--muted);
  text-align:center;
  line-height:1.8
}

@media(max-width:1100px) and (min-width:761px) {
  .home-resource-grid {
    gap:16px
  }
  .home-resource-heading {
    gap:6px
  }
  .home-resource-heading h3 {
    font-size:17px
  }
  .home-resource-heading h3 span {
    display:none
  }
  .home-resource-list a {
    font-size:13px
  }
}

@media(max-width:760px) {
  .home-resource-grid {
    grid-template-columns:1fr;
    gap:18px
  }
  .home-resource-column {
    padding:16px 14px 8px
  }
}

@media(max-width:600px) {
  .home-resources {
    padding:32px 0
  }
  .home-resource-grid {
    grid-template-columns:1fr;
    gap:18px
  }
  .home-resource-heading h3 {
    font-size:20px
  }
  .home-resource-list a {
    min-height:48px
  }
  .home-resource-title {
    white-space:normal;
    overflow-wrap:anywhere
  }
}

/* Homepage: a stable promise supported by actual setup guides. */
.official-home .home-hero { min-height:590px; padding:calc(var(--home-header-height,76px) + 76px) 0 80px; background-image:url("hero-green.png"); background-position:center; }
.official-home .home-hero .hero-copy { max-width:650px; width:58%; }
.official-home .home-hero .eyebrow { font-size:14px; letter-spacing:.06em; margin:0 0 24px; }
.official-home .home-hero h1 { font-size:clamp(34px,3.6vw,52px); line-height:1.45; white-space:normal; margin:0; letter-spacing:0; }
.official-home .home-hero h1 span { color:#d9fff5; }
.official-home .home-hero .hero-description { font-size:16px; line-height:1.95; margin:24px 0 28px; letter-spacing:0; }
.official-home .home-hero .hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; }
.official-home .home-hero .hero-actions .button { min-width:0; font-size:15px; min-height:48px; padding:12px 22px; gap:12px; }
.home-hero-guide { color:#fff; display:inline-flex; align-items:center; gap:9px; font-size:15px; padding:12px 0; }
.home-hero-guide:hover { text-decoration:underline; text-underline-offset:5px; }
.home-hero-note { font-size:12px; color:#d4efeb; line-height:1.8; margin:20px 0 0; }
.home-start { padding:60px 0; background:#fff; }
.home-kicker { color:var(--primary)!important; font-size:12px!important; margin:0 0 12px!important; letter-spacing:.1em; }
.home-start-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; list-style:none; margin:0; padding:0; }
.home-start-grid li { border-top:2px solid #c2e5da; padding:22px 0 0; min-width:0; }
.home-step-number { font-size:26px; color:var(--primary); font-weight:600; line-height:1.4; }
.home-start-grid h3 { font-size:17px; line-height:1.6; margin:14px 0 10px; font-weight:600; }
.home-start-grid p { color:#60716e; font-size:14px; line-height:1.8; margin:0 0 12px; }
.home-start-grid a { display:inline-flex; align-items:center; gap:6px; color:var(--primary); font-size:13px; min-height:40px; }
.home-ready { background:var(--mint); padding:42px 0; border-top:1px solid var(--line); }
.home-ready-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.home-ready h2 { font-size:28px; margin:0 0 10px; letter-spacing:0; }
.home-ready p { font-size:14px; line-height:1.8; margin:0; color:#60716e; }
.home-ready .button { flex-shrink:0; font-size:14px; gap:10px; }
@media(max-width:1100px) { .official-home .home-hero .hero-copy { width:65%; } .home-start-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; } }
@media(max-width:850px) { .official-home .home-hero { min-height:540px; padding:calc(var(--home-header-height,74px) + 48px) 0 56px; background-position:62% center; } .official-home .home-hero .hero-copy { width:75%; } .official-home .home-hero h1 { font-size:36px; } .home-start { padding:42px 0; } }
@media(max-width:560px) { .official-home .home-hero { min-height:570px; background-image:linear-gradient(90deg,#006561eb,#00656185),url("hero-green.png"); background-position:67% center; } .official-home .home-hero .hero-copy { width:100%; } .official-home .home-hero h1 { font-size:clamp(27px,7.4vw,36px); line-height:1.5; } .official-home .home-hero .hero-description { font-size:14px; margin:20px 0 24px; } .official-home .home-hero .hero-actions { gap:14px; } .home-hero-guide { font-size:14px; } .home-desktop-break { display:none; } .home-start-grid { grid-template-columns:1fr; gap:22px; } .home-start-grid li { padding-top:16px; } .home-ready-inner { align-items:flex-start; flex-direction:column; } .home-ready h2 { font-size:24px; } }

/* market-catalog: shared app identity, cards and details */
.market-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:stretch; }
.market-grid .market-card { display:flex; flex-direction:column; position:relative; min-width:0; padding:24px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 3px 14px #09283005; }
.market-grid .market-card:hover { border-color:#acd5cf; box-shadow:0 6px 20px #09283009; }
.market-card .market-card-header { display:flex; align-items:center; gap:16px; margin:0 0 18px; }
.market-app-icon { display:flex; align-items:center; justify-content:center; flex:0 0 62px; width:62px; height:62px; border-radius:16px; background:var(--app-bg,var(--mint)); color:var(--app-ink,var(--primary)); overflow:hidden; }
.market-app-icon i { font-size:30px; line-height:1; font-weight:400; }
.app-tone-teal { --app-bg:#e5f5ef; --app-ink:#08776b; }
.app-tone-blue { --app-bg:#eaf1ff; --app-ink:#3268bd; }
.app-tone-violet { --app-bg:#f0eafd; --app-ink:#7850b0; }
.app-tone-amber { --app-bg:#fff2d9; --app-ink:#9a6813; }
.app-tone-coral { --app-bg:#ffebe6; --app-ink:#b85d45; }
.market-app-icon .extension-icon { display:block; width:100%; height:100%; object-fit:contain; border-radius:inherit; background:var(--app-bg); }
.market-card-heading { flex:1; min-width:0; }
.market-card .market-card-heading h2 { margin:0 0 5px; font-size:18px; line-height:1.5; letter-spacing:0; overflow-wrap:anywhere; }
.market-card-heading a:hover { color:var(--primary); }
.market-card-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:12px; line-height:20px; }
.market-version { display:inline-block; font-size:12px; color:#60716e; white-space:nowrap; }
.market-card .market-card-description { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; min-height:72px; margin:0 0 20px; color:#60716e; font-size:14px; line-height:24px; }
.market-recommended { position:absolute; right:14px; top:12px; font-size:11px; color:var(--primary); }
.market-card-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:16px; border-top:1px solid var(--line); font-size:12px; }
.market-card-tags { display:flex; gap:7px; flex-wrap:wrap; min-width:0; }
.market-category,.market-billing { display:inline-flex; align-items:center; border-radius:5px; padding:3px 8px; font-size:12px; line-height:20px; font-weight:400; }
.market-category { background:#f2f5f4; color:#576b65; }
.market-billing { background:#eaf7ef; color:#277447; }
.market-billing.is-paid { background:#fff2dc; color:#956014; }
.market-detail-toggle { display:inline-flex; align-items:center; gap:5px; color:var(--primary); white-space:nowrap; min-height:36px; }
.market-detail-toggle .official-inline-icon { width:16px; height:16px; }
.extension-page .page-breadcrumb { flex-wrap:wrap; }
.extension-overview { display:flex; align-items:center; gap:24px; padding:30px; border:1px solid var(--line); border-radius:12px; background:#fff; margin-bottom:24px; }
.extension-overview .market-app-icon { flex-basis:92px; width:92px; height:92px; border-radius:22px; }
.extension-overview .market-app-icon i { font-size:44px; }
.extension-overview-copy { flex:1; min-width:0; }
.extension-title-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:9px; }
.extension-title-row h1 { --content-heading-gap:0px; font-size:30px; line-height:1.4; margin:0; overflow-wrap:anywhere; }
.extension-overview-copy .extension-tagline { margin:0 0 14px; color:#60716e; font-size:15px; line-height:1.75; max-width:850px; }
.extension-status { color:#657570; font-size:12px; }
.extension-status.is-authorized { color:var(--primary); }
.extension-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:24px; align-items:start; }
.extension-detail-main,.extension-detail-aside { display:grid; gap:24px; min-width:0; }
.extension-detail-aside { position:sticky; top:24px; }
.extension-detail-panel { padding:28px; border:1px solid var(--line); border-radius:12px; background:#fff; min-width:0; scroll-margin-top:24px; }
.extension-page .extension-detail-panel h2 { margin:5px 0 24px; font-size:22px; line-height:1.5; letter-spacing:0; }
.extension-section-label { color:var(--primary); font-size:12px; line-height:1.6; letter-spacing:.04em; }
.extension-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.extension-feature { min-width:0; }
.extension-feature>i { display:inline-block; color:var(--primary); font-size:22px; line-height:1; margin-bottom:10px; }
.extension-feature h3 { font-size:15px; line-height:1.6; margin:0 0 8px; font-weight:600; }
.extension-feature p { font-size:14px; line-height:1.8; color:#60716e; margin:0; }
.extension-more { margin-top:24px; border-top:1px solid var(--line); padding-top:16px; }
.extension-more summary { cursor:pointer; color:var(--primary); font-size:14px; padding:8px 0; }
.extension-detail-copy { font-size:14px; line-height:1.9; color:#526660; overflow-wrap:anywhere; }
.extension-detail-copy p { margin:12px 0; }
.extension-gallery { display:grid; gap:20px; }
.extension-gallery figure { margin:0; }
.extension-gallery a { display:block; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.extension-gallery img { display:block; width:100%; height:auto; }
.extension-gallery figcaption { color:#687c74; font-size:12px; margin-top:10px; }
.extension-screenshot-note { font-size:14px; line-height:1.8; color:#60716e; margin:0; }
.extension-install-steps { list-style:none; counter-reset:install; margin:0; padding:0; display:grid; gap:22px; }
.extension-install-steps li { position:relative; padding-left:44px; counter-increment:install; }
.extension-install-steps li:before { content:counter(install,decimal-leading-zero); position:absolute; left:0; top:0; font-size:14px; line-height:30px; width:30px; text-align:center; border-radius:8px; background:var(--mint); color:var(--primary); }
.extension-install-steps strong { font-size:15px; line-height:1.8; font-weight:600; }
.extension-install-steps p,.extension-install-note { font-size:14px; line-height:1.8; color:#60716e; margin:6px 0 0; }
.extension-install-note { border-top:1px solid var(--line); padding-top:18px; margin-top:22px; }
.extension-install-note a { color:var(--primary); }
.extension-detail-panel>.button { margin-top:20px; }
.extension-price-row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px; }
.extension-store-price { font-size:30px; font-weight:650; line-height:1.4; color:var(--primary); }
.extension-store-price.is-paid { color:#956014; font-size:26px; }
.extension-price-note { font-size:15px; line-height:1.8; color:var(--ink); }
.extension-authorization-note { font-size:13px; line-height:1.8; color:#60716e; margin:10px 0 18px; }
.extension-access .button { width:100%; min-height:46px; justify-content:center; font-size:14px; gap:8px; }
.extension-access p { font-size:12px; color:#60716e; line-height:1.8; margin:12px 0; overflow-wrap:anywhere; }
.extension-access-secondary { display:block; font-size:13px; margin:12px 0 0; text-align:center; color:var(--primary); }
.extension-spec-divider { height:1px; background:var(--line); margin:24px 0; }
.extension-page .extension-get-card h2 { font-size:17px; margin:0 0 12px; }
.extension-specs { margin:0; font-size:13px; line-height:1.6; }
.extension-specs>div { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:10px 0; border-bottom:1px solid #f0f4f2; }
.extension-specs dt { color:#687c74; }
.extension-specs dd { margin:0; color:var(--ink); overflow-wrap:anywhere; text-align:right; }
.extension-back { display:inline-flex; align-items:center; gap:6px; color:var(--primary); font-size:13px; margin-top:22px; min-height:32px; }
@media(max-width:1050px) { .market-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .extension-feature-grid { grid-template-columns:1fr; gap:20px; } }
@media(max-width:900px) { .extension-detail-layout { grid-template-columns:1fr; } .extension-detail-aside { position:static; grid-row:1; } .extension-get-card { padding:24px; } }
@media(max-width:640px) { .market-grid { grid-template-columns:minmax(0,1fr); gap:16px; } .market-grid .market-card { padding:22px; } .extension-overview { align-items:flex-start; padding:20px; gap:16px; } .extension-overview .market-app-icon { flex-basis:64px; width:64px; height:64px; border-radius:16px; } .extension-overview .market-app-icon i { font-size:32px; } .extension-title-row h1 { font-size:24px; } .extension-overview-copy .extension-tagline { font-size:14px; margin:0 0 10px; } .extension-detail-panel { padding:22px; } .extension-detail-layout,.extension-detail-main { gap:18px; } }

/* footer */
/* Shared public and member footer. Link content comes from the site's flink model. */
.official-green .site-footer {
  padding:0;
  background:#25272b;
  color:#99999d;
  border-top:0;
  font-size:13px;
  line-height:1.8
}

.official-green .site-footer .footer-main {
  display:grid;
  grid-template-columns:35% 33% 22%;
  gap:5%;
  align-items:start;
  margin:0;
  padding:50px 0;
  border:0
}

.official-green .site-footer h2 {
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 15px;
  padding:0 0 10px;
  border-bottom:1px solid #ffffff05;
  color:#f0f5f3;
  font-size:16px;
  font-weight:500;
  line-height:18px;
  letter-spacing:0
}

.official-green .site-footer h2 i {
  color:#53bcaa;
  font-size:18px
}

.official-green .site-footer .brand {
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0 0 12px;
  color:#f0f5f3;
  font-size:24px;
  line-height:32px
}

.official-green .site-footer .brand .iconfont {
  color:#53bcaa;
  font-size:32px
}

.official-green .site-footer p {
  margin:0 0 18px;
  color:#99999d;
  font-size:13px;
  line-height:1.9
}

.official-green .site-footer a {
  color:#99999d;
  text-decoration:none;
  transition:color .15s ease,background-color .15s ease
}

.official-green .site-footer a:hover {
  color:#72d7c4
}

.official-green .site-footer a:focus-visible {
  outline:2px solid #72d7c4;
  outline-offset:4px
}

.official-green .site-footer .footer-download {
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0;
  padding:7px 12px;
  border:1px solid #ffffff20;
  border-radius:5px;
  color:#d6e9e3;
  font-size:13px;
  line-height:22px
}

.official-green .site-footer .footer-download:hover {
  background:#ffffff08;
  border-color:#53bcaa
}

.official-green .site-footer .footer-link-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px
}

.official-green .site-footer .footer-link-grid a {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:5px 8px;
  border-radius:4px;
  background:#ffffff06;
  font-size:13px;
  line-height:22px
}

.official-green .site-footer .footer-link-grid a:hover {
  background:#ffffff0d
}

.official-green .site-footer .footer-link-grid a>span {
  color:#6c8b82;
  font-size:16px
}

.official-green .site-footer .footer-contact-line {
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0;
  font-size:13px;
  line-height:22px
}

.official-green .site-footer .footer-contact-line i {
  flex:0 0 16px;
  color:#7e9c92;
  font-size:16px
}

.official-green .site-footer .footer-contact-line span {
  min-width:0;
  overflow-wrap:anywhere
}

.official-green .site-footer .footer-friends {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:18px;
  margin:0;
  padding:15px 0;
  border:0;
  font-size:12px;
  line-height:22px
}

.official-green .site-footer .footer-friends-label {
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex-shrink:0;
  color:#99999d
}

.official-green .site-footer .footer-friends-links {
  display:flex;
  flex:1;
  flex-wrap:wrap;
  gap:8px 20px;
  min-width:0
}

.official-green .site-footer .footer-friends a {
  margin:0;
  font-size:12px;
  line-height:22px;
  overflow-wrap:anywhere
}

.official-green .site-footer .footer-friends-apply {
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex-shrink:0;
  margin-left:auto;
  color:#99999d
}

.official-green .site-footer .footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0;
  padding:18px 0;
  border:0;
  color:#99999d;
  font-size:12px;
  line-height:22px
}

.official-green .site-footer .footer-bottom small {
  font-size:12px;
  line-height:22px
}

.official-green .site-footer .footer-bottom small a {
  margin-left:14px
}

@media(max-width:1100px) {
  .official-green .site-footer .footer-main {
    gap:30px;
    grid-template-columns:1.1fr 1.1fr .8fr
  }
}

@media(max-width:850px) {
  .official-green .site-footer .footer-main {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px;
    padding:36px 0 28px
  }
  .official-green .site-footer .footer-about {
    grid-column:1/-1
  }
  .official-green .site-footer .footer-about p {
    max-width:600px
  }
  .official-green .site-footer h2 {
    margin-bottom:17px
  }
}

@media(max-width:560px) {
  .official-green .site-footer .footer-main {
    grid-template-columns:1fr;
    gap:26px;
    padding:30px 0 26px
  }
  .official-green .site-footer .footer-about {
    grid-column:auto
  }
  .official-green .site-footer h2 {
    margin-bottom:16px;
    padding-bottom:10px
  }
  .official-green .site-footer .footer-friends {
    flex-wrap:wrap;
    gap:10px 16px;
    padding:16px 0
  }
  .official-green .site-footer .footer-friends-links {
    flex-basis:calc(100% - 110px)
  }
  .official-green .site-footer .footer-bottom {
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
    padding:16px 0
  }
  .official-green .site-footer .footer-bottom small a {
    display:block;
    margin-left:0
  }
}

.official-green .site-footer .footer-copyright {
  border-top:1px solid #ffffff18
}

.official-green .site-footer .footer-socials {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:20px
}

.official-green .site-footer .footer-socials>a,.official-green .site-footer .footer-socials>span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#ffffff06;
  color:#99999d;
  font-size:16px;
  line-height:1
}

.official-green .site-footer .footer-socials>a,.official-green .site-footer .footer-socials>span {
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease
}

.official-green .site-footer .footer-socials>a:hover,.official-green .site-footer .footer-socials>span:hover,.official-green .site-footer .footer-socials>a:focus-visible {
  background:var(--primary);
  color:#fff;
  box-shadow:0 4px 12px #008e8233
}

.official-green .site-footer .footer-about p {
  margin-bottom:0;
  line-height:2
}

.official-green .site-footer .footer-contact-line {
  margin:14px 0
}

.official-green .site-footer .footer-bottom small {
  color:inherit
}

.official-green .site-footer .footer-rednote {
  display:block;
  width:24px;
  height:12px;
  background:currentColor;
  -webkit-mask:url("xiaohongshu.svg") center/contain no-repeat;
  mask:url("xiaohongshu.svg") center/contain no-repeat
}

.official-green .site-footer .footer-copyright>.footer-bottom {
  margin:0 auto;
  padding-left:0;
  padding-right:0
}

.official-green .site-footer .footer-socials {
  flex-wrap:wrap
}

@media(max-width:1100px) {
  .official-green .site-footer .footer-link-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

@media(max-width:850px) {
  .official-green .site-footer .footer-link-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

@media(max-width:560px) {
  .official-green .site-footer .footer-link-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

.official-green .site-footer h2 {
  position:relative;
  border-bottom-color:#ffffff1c
}

.official-green .site-footer h2:after {
  position:absolute;
  left:0;
  bottom:-1px;
  width:20px;
  height:2px;
  background:var(--primary);
  content:""
}

.official-green .site-footer .footer-contact-line {
  gap:6px;
  margin:0;
  padding:9px 0;
  line-height:18px
}

.official-green .site-footer .footer-contact-line i {
  color:#8e9494;
  font-size:14px;
  flex-basis:14px
}

.official-green .site-footer .footer-socials {
  margin-top:20px
}

.official-green .site-footer .footer-link-grid a {
  background:#ffffff0a;
  line-height:20px
}

.official-green .site-footer .footer-quick {
  padding:0;
  min-width:0
}

.official-green .site-footer .footer-link-grid a {
  gap:5px;
  padding:5px 7px;
  white-space:nowrap
}

.official-green .site-footer .footer-friends a,.official-green .site-footer .footer-friends-label {
  font-size:13px
}

.official-green .site-footer .footer-bottom,.official-green .site-footer .footer-bottom small {
  font-size:13px;
  color:#99999d
}

@media(prefers-reduced-motion:reduce) {
  .official-green .site-footer .footer-socials>a,.official-green .site-footer .footer-socials>span {
    transition:none
  }
}

/* Homepage product evidence and readable content; navigation stays in its existing rules. */
.official-home .home-start-grid a,.official-home .home-product-link,.official-home .home-product-visual figcaption a,.official-home .home-template-details,.official-home .home-extension-action a,.official-home .home-extension-grid .market-detail-toggle { color:#08776b; }
.official-home .home-template-actions .button,.official-home .home-ready .button { background:#08776b; color:#fff; }
.official-home .home-template-actions .button:hover,.official-home .home-ready .button:hover { background:#075f56; }

.official-home .home-section-heading h2 { font-size:30px; }
.official-home .home-section-heading p { font-size:15px; color:#536660; }
.official-home .home-hero h1 { font-size:clamp(34px,3.6vw,48px); }
.official-home .home-hero-note { font-size:13px; color:#e1f5ef; }
.official-home .home-product { padding:60px 0 34px; background:#f5faf8; }
.official-home .home-product-layout { display:block; }
.official-home .home-product-intro { grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:42px; }
.official-home .home-product-visual { height:auto; min-height:0; margin:0; overflow:visible; border-radius:0; }
.home-product-visual>a { display:block; overflow:hidden; border:1px solid #d9e8e2; border-radius:10px; box-shadow:0 10px 32px #173d3010; background:#fff; }
.official-home .home-product-visual img { height:auto; object-fit:contain; }
.home-product-visual figcaption { display:flex; justify-content:space-between; gap:12px; margin-top:13px; color:#5a7068; font-size:13px; line-height:1.8; }
.home-product-visual figcaption a { color:var(--primary); display:inline-flex; align-items:center; gap:5px; }
.official-home .home-product-copy h2 { font-size:30px; line-height:1.5; margin:0 0 20px; font-weight:700; }
.official-home .home-product-copy>p:not(.home-product-eyebrow) { font-size:15px; color:#536660; }
.official-home .home-product-points { font-size:13px; gap:9px 14px; }
.official-home .home-product-updates { display:grid; grid-template-columns:170px minmax(0,1fr); gap:10px 24px; padding:22px 0 0; margin-top:30px; border:0; border-top:1px solid #d9e8e2; border-radius:0; background:transparent; }
.official-home .home-product-updates-heading { align-self:center; }
.official-home .home-product-updates-heading h2 { font-size:18px; font-weight:600; }
.official-home .home-product-updates-heading h2 span { display:none; }
.official-home .home-product-updates-description { display:none; }
.official-home .home-product-updates .home-resource-list { margin:0; border:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.official-home .home-product-updates .home-resource-list li { border:0; }
.official-home .home-product-updates .home-resource-list a { flex-wrap:wrap; gap:4px; padding:0; min-height:44px; font-size:14px; }
.official-home .home-product-updates .home-resource-list a>i,.official-home .home-product-updates .home-resource-list a>.official-inline-icon { display:none; }
.official-home .home-product-updates .home-resource-list time { flex-basis:100%; margin:0; }
.official-home .home-release-label { flex-basis:100%; }
.official-home .home-start-grid h3 { font-size:18px; }
.official-home .home-start-grid p { font-size:15px; color:#536660; }
.official-home .home-start-grid a { font-size:14px; }
.official-home .home-kicker { font-size:13px!important; }
.official-home .home-templates { padding:56px 0; background:#f7faf9; }
.home-template-feature { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:46px; align-items:center; padding:30px; border:1px solid #dce7e2; border-radius:12px; background:#fff; }
.home-template-feature-image { display:block; position:relative; aspect-ratio:1.5; overflow:hidden; border:1px solid #dce7e2; border-radius:8px; background:#f0f5f3; }
.home-template-feature-image>img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; transition:none; }
.home-template-image-label { position:absolute; left:14px; bottom:14px; padding:5px 10px; border-radius:5px; background:#fff; color:#536660; font-size:12px; border:1px solid #dce7e2; }
.home-template-feature-copy { min-width:0; }
.home-template-eyebrow { font-size:13px; color:var(--primary); line-height:1.8; margin:0 0 12px; }
.home-template-feature-copy h3 { font-size:26px; line-height:1.5; margin:0 0 16px; font-weight:650; }
.home-template-feature-description { color:#536660; font-size:15px; line-height:1.9; margin:0 0 20px; }
.home-template-specs { display:flex; flex-wrap:wrap; gap:12px 30px; margin:0 0 24px; font-size:13px; line-height:1.8; }
.home-template-specs dt { color:#61736b; }
.home-template-specs dd { margin:2px 0 0; color:var(--ink); }
.home-template-actions { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.home-template-actions .button { font-size:15px; min-height:46px; padding:11px 18px; gap:10px; }
.home-template-details { display:inline-flex; gap:8px; align-items:center; color:var(--primary); font-size:14px; min-height:44px; }
.home-template-preview-note { color:#61736b; font-size:13px; line-height:1.8; margin:16px 0 0; }
.official-home .home-extension-grid .market-card-description { font-size:15px; color:#536660; line-height:25px; min-height:75px; }
.official-home .home-extension-grid .market-detail-toggle { font-size:14px; }
.official-home .home-resource-column { padding:24px 20px 10px; border-color:#dce7e2; }
.official-home .home-resource-heading { border:0; margin:0 0 12px; padding:0; gap:14px; }
.official-home .home-resource-heading h3 { font-size:18px; font-weight:650; }
.official-home .home-resource-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:12px; background:#e5f5ef; color:#08776b; font-size:25px; }
.official-home .home-resource-tone-1 .home-resource-icon { background:#eaf1ff; color:#3268bd; }
.official-home .home-resource-tone-2 .home-resource-icon { background:#fff2d9; color:#9a6813; }
.home-resource-intro { margin:0 0 16px; padding-bottom:18px; border-bottom:1px solid #e4ece8; font-size:14px; color:#536660; line-height:1.8; }
.official-home .home-resources .home-resource-list a { font-size:15px; min-height:62px; padding:13px 0; color:#3e544a; align-items:flex-start; }
.official-home .home-resources .home-resource-title { white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; line-height:1.8; }
.official-home .home-resources .home-resource-list time { font-size:12px; padding-top:2px; color:#64736d; }
.official-home .home-ready p { font-size:15px; color:#536660; }
.official-green .site-footer p,.official-green .site-footer .footer-link-grid a,.official-green .site-footer .footer-contact-line { font-size:14px; }
.official-green .site-footer p,.official-green .site-footer a,.official-green .site-footer .footer-friends-label,.official-green .site-footer .footer-bottom,.official-green .site-footer .footer-bottom small { color:#bcc5c1; }
.official-green .site-footer h2 { font-size:18px; line-height:1.5; }
@media(max-width:1050px) {
 .official-home .home-product-intro { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:28px; }
 .official-home .home-product-copy h2 { font-size:28px; }
 .official-home .home-product-updates { grid-template-columns:1fr; }
 .official-home .home-product-updates-heading { max-width:190px; }
 .home-template-feature { gap:28px; padding:24px; }
 .home-template-feature-copy h3 { font-size:23px; }
 .official-home .home-resource-grid { gap:16px; }
 .official-home .home-resource-column { padding:20px 14px 8px; }
}
@media(max-width:760px) {
 .official-home .home-product { padding:36px 0 28px; }
 .official-home .home-product-intro { grid-template-columns:1fr; gap:26px; }
 .official-home .home-product-copy h2 br { display:none; }
 .official-home .home-product-copy { grid-row:1; }
 .official-home .home-product-copy h2 { font-size:26px; margin-bottom:14px; }
 .home-template-feature { grid-template-columns:1fr; gap:24px; }
 .home-template-feature-image { aspect-ratio:1.5; }
 .official-home .home-section-heading h2 { font-size:26px; }
 .official-home .home-resource-grid { grid-template-columns:1fr; }
 .official-home .home-resource-column { padding:22px 20px 8px; }
}
@media(max-width:560px) {
 .official-home .home-product-updates .home-resource-list { grid-template-columns:1fr; gap:4px; }
 .official-home .home-product-updates .home-resource-list a { flex-wrap:nowrap; min-height:42px; }
 .official-home .home-release-label { flex-basis:auto; }
 .official-home .home-product-updates .home-resource-list time { flex-basis:auto; margin-left:auto; }
 .official-home .home-templates { padding:36px 0; }
 .home-template-feature { padding:16px; gap:22px; }
 .home-template-feature-copy h3 { font-size:23px; }
 .home-template-actions { gap:20px; }
 .official-home .home-hero .hero-description { font-size:15px; }
 .official-home .home-hero h1 { font-size:clamp(27px,7.4vw,36px); }
}

/* authorization */
.license-query {
  width:100%;
  max-width:none;
  margin:0 0 30px;
  padding:32px
}

.license-kicker {
  color:#008e82;
  font-size:11px;
  font-weight:700;
  letter-spacing:2px
}

.license-query h2 {
  margin:8px 0 12px;
  font-size:24px
}

.license-query p {
  color:#748580;
  font-size:14px;
  line-height:1.8
}

.license-query-form {
  margin-top:24px
}

.license-query-form label {
  display:block;
  margin-bottom:8px;
  font-size:14px
}

.license-query-form>div {
  display:flex;
  gap:10px
}

.license-query-form input:not([type=hidden]) {
  flex:1;
  min-width:0;
  padding:11px 14px;
  border:1px solid #cfdfd9;
  border-radius:var(--radius-control);
  font:inherit
}

.license-query-form .button {
  white-space:nowrap
}

.license-result {
  margin:22px 0 0;
  padding:20px;
  border:1px solid #dbe9e2;
  border-radius:var(--radius-panel);
  background:#f2f8f5
}

.license-result strong,.license-result>span {
  display:block;
  overflow-wrap:anywhere
}

.license-result strong {
  font-size:18px;
  color:#008e82
}

.license-result>span {
  margin-top:6px;
  font-size:16px
}

.license-result p {
  margin:10px 0 0
}

.license-result.is-suspended,.license-result.is-error {
  color:#975530;
  background:#fff7ed;
  border-color:#f0dbc2
}

.license-result.is-suspended strong {
  color:#975530
}

.license-result.is-not_found strong {
  color:#576d64
}

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

.license-policy-grid .panel {
  padding:24px
}

.license-policy-grid h2 {
  font-size:18px;
  margin:13px 0
}

.license-policy-grid i {
  color:#008e82;
  font-size:27px
}

.license-policy-grid p {
  font-size:14px;
  color:#748580;
  line-height:1.9
}

.license-actions {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  margin-top:28px
}

.official-member-content .support-summary {
  padding:20px;
  margin:0 0 22px;
  border:1px solid #dceae4;
  border-radius:8px;
  background:#f4f9f6
}

.support-summary>div {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}

.official-member-content .support-summary h3,
.member-template-content .support-summary h3 {
  margin:0;
  line-height:28px
}

.support-state {
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  padding:4px 8px;
  border-radius:4px;
  background:#e3ede8;
  color:#61746c;
  font-size:12px;
  line-height:20px
}

.support-state.is-active {
  background:#d8eee4;
  color:#087b65
}

.support-state.is-expired {
  background:#fae9d5;
  color:#9b5c25
}

.support-summary p {
  margin:9px 0 0;
  font-size:13px;
  color:#647b71
}

.support-scope {
  white-space:pre-wrap;
  overflow-wrap:anywhere
}

.official-member-content .sponsor-card {
  margin-bottom:22px
}

.sponsor-card>p {
  color:#748580;
  font-size:13px;
  line-height:1.8
}

.sponsor-form fieldset {
  margin:22px 0 0;
  padding:0;
  border:0;
  min-width:0
}

.sponsor-form legend {
  width:auto;
  margin:0 0 10px;
  padding:0;
  border:0;
  font-size:14px;
  color:#203b38;
  line-height:1.6
}

.sponsor-amounts {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px
}

.official-member-content .sponsor-amounts label {
  position:relative;
  margin:0;
  cursor:pointer
}

.sponsor-amounts input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px
}

.sponsor-amounts span {
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:4px;
  padding:16px 8px;
  border:1px solid #dce8e1;
  border-radius:7px;
  font-size:24px;
  background:#fff
}

.sponsor-amounts small {
  font-size:14px
}

.sponsor-amounts input:checked+span {
  border-color:#008e82;
  background:#edf8f3;
  color:#008e82;
  box-shadow:inset 0 0 0 1px #008e82
}

.sponsor-amounts input:focus-visible+span {
  outline:2px solid #008e82;
  outline-offset:3px
}

.sponsor-channels {
  display:flex;
  gap:24px;
  flex-wrap:wrap
}

.official-member-content .sponsor-channels label,.official-member-content .sponsor-consent {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  margin:0
}

.official-member-content .sponsor-consent {
  align-items:flex-start;
  margin-top:22px;
  line-height:1.8
}

.sponsor-consent input {
  margin-top:5px;
  flex-shrink:0
}

.sponsor-unavailable {
  margin-top:22px;
  padding:14px;
  background:#f4f7f5;
  color:#748580;
  border-radius:6px;
  font-size:13px
}

.sponsor-record {
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding:18px 0;
  border-bottom:1px solid #e2ebe7
}

.sponsor-record:last-child {
  border-bottom:0;
  padding-bottom:0
}

.sponsor-record>div {
  flex:1;
  min-width:200px
}

.sponsor-record strong {
  font-size:20px;
  margin-right:14px
}

.sponsor-record p {
  font-size:12px;
  color:#748580;
  margin:7px 0 0;
  overflow-wrap:anywhere
}

.sponsor-record>a {
  color:#008e82
}

.sponsor-resume {
  display:flex;
  align-items:end;
  gap:10px;
  flex-wrap:wrap
}

.sponsor-resume label {
  margin:0;
  font-size:12px
}

.sponsor-resume select {
  display:block;
  margin-top:5px;
  padding:7px;
  border:1px solid #dce8e1;
  border-radius:5px;
  background:#fff
}

.sponsor-resume .form-status {
  flex-basis:100%
}

.license-member-note {
  margin-bottom:18px;
  color:#647b71;
  line-height:1.8
}

.license-member-note a {
  color:#008e82
}

.official-member-content .official-form.sponsor-form input[type=radio],.official-member-content .official-form.sponsor-form input[type=checkbox] {
  appearance:auto;
  width:16px;
  height:16px;
  min-height:0;
  flex:0 0 16px;
  margin:0;
  padding:0;
  accent-color:#008e82;
  box-shadow:none
}

.official-member-content .official-form.sponsor-form .sponsor-amounts input[type=radio] {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  flex:none;
  border:0
}

.official-member-content .official-form.sponsor-form .sponsor-channels label {
  display:flex;
  width:auto;
  align-items:center;
  gap:8px;
  margin:0
}

.official-member-content .official-form.sponsor-form .sponsor-consent {
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:22px 0 0
}

.official-member-content .official-form.sponsor-form .sponsor-consent input[type=checkbox] {
  margin-top:4px
}

.official-member-content .official-form.sponsor-form input:focus-visible {
  outline:2px solid #008e82;
  outline-offset:3px
}

.license-query-form input:not([type=hidden]):focus,
.license-query-form input:not([type=hidden]):focus-visible {
  outline:none;
  box-shadow:none;
  border-color:var(--primary)
}

@media(max-width:850px) {
  .license-policy-grid {
    grid-template-columns:1fr
  }
  .license-query {
    padding:24px
  }
}

@media(max-width:560px) {
  .license-query {
    padding:20px
  }
  .license-query h2 {
    font-size:21px
  }
  .license-query-form>div {
    flex-direction:column
  }
  .license-query-form .button {
    width:100%
  }
  .sponsor-amounts {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .sponsor-record>div {
    min-width:0;
    flex-basis:100%
  }
  .support-summary>div {
    align-items:center
  }
  .license-actions .button {
    width:100%
  }
}

/* Public authorization page: compact controls and a full-width, balanced layout. */
.license-query {
  padding:36px;
  margin-bottom:24px;
  background:linear-gradient(115deg,#f2faf7 0%,#fff 64%);
  border-color:#deebe6;
  border-radius:var(--radius-panel)
}

.license-query-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:center;
  gap:48px
}

.license-kicker {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  letter-spacing:1.7px;
  color:var(--primary)
}

.license-kicker i {
  font-size:22px;
  letter-spacing:0
}

.license-query h2 {
  font-size:26px;
  line-height:1.5;
  letter-spacing:0;
  margin:15px 0 10px
}

.license-query-intro>p {
  font-size:14px;
  color:var(--muted)
}

.license-text-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  line-height:1.6;
  color:var(--primary)
}

.license-text-link:hover {
  color:var(--primary-hover)
}

.license-query-intro .license-text-link {
  margin-top:22px
}

.license-query-form {
  margin:0;
  min-width:0
}

.license-query-form label {
  font-size:14px;
  font-weight:600;
  margin-bottom:12px
}

.license-query-form .license-query-controls {
  display:flex;
  gap:10px
}

.license-query-form input:not([type=hidden]) {
  height:46px;
  background:#fff;
  padding:11px 14px;
  font-size:14px;
  border:1px solid #dbe6e2;
  border-radius:var(--radius-control)
}

.license-query .button,.license-actions .button {
  min-height:46px;
  font-size:14px;
  line-height:1.5;
  padding:11px 20px;
  border-radius:var(--radius-control)
}

.license-query-form input:not([type=hidden]):is(:hover,:focus,:focus-visible) {
  outline:none;
  box-shadow:none
}

.license-query-form input:not([type=hidden]):focus {
  border-color:var(--primary)
}

.license-query-form>p {
  font-size:12px;
  line-height:1.8;
  margin-top:12px;
  color:var(--muted)
}

.license-query-scope {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--muted);
  margin-top:16px
}

.license-result {
  margin-top:28px;
  padding:20px 24px;
  background:#fff
}

.license-result strong {
  font-size:16px
}

.license-result>span {
  font-size:15px
}

.license-policy-grid {
  gap:20px
}

.license-policy-grid .panel {
  padding:24px;
  border-radius:var(--radius-panel);
  display:flex;
  flex-direction:column;
  align-items:flex-start
}

.license-policy-heading {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px
}

.license-policy-heading>i {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  background:#eef8f4;
  border-radius:var(--radius-control);
  font-size:22px;
  flex-shrink:0
}

.license-policy-grid h2 {
  margin:0;
  font-size:16px;
  line-height:1.5;
  letter-spacing:0
}

.license-policy-grid p {
  font-size:13px;
  line-height:1.9;
  color:var(--muted);
  margin-bottom:18px
}

.license-policy-grid .license-text-link {
  margin-top:auto
}

.license-query .license-text-link i,.license-policy-grid .license-text-link i {
  font-size:14px;
  line-height:1;
  width:14px;
  height:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 14px
}

@media(max-width:1000px) {
  .license-query-layout {
    grid-template-columns:1fr;
    gap:28px
  }
  .license-query h2 {
    font-size:24px
  }
  .license-query {
    padding:28px
  }
}

@media(max-width:560px) {
  .license-query {
    padding:22px
  }
  .license-query h2 {
    font-size:21px
  }
  .license-query-form .license-query-controls {
    flex-direction:column
  }
  .license-query-form .button {
    width:100%
  }
  .license-query-scope {
    align-items:flex-start
  }
  .license-policy-grid .panel {
    padding:22px
  }
  .license-result {
    padding:18px
  }
  .license-result p {
    font-size:13px
  }
}

/* Authorization query: show the result before the printable certificate. */
.authorization-page .license-query {
  padding:28px 30px;
  background:#f7faf9;
  margin-bottom:22px
}

.authorization-page .license-query-layout {
  display:block;
  width:100%;
  max-width:none;
  margin:0;
  text-align:left
}

.authorization-page .license-query h2 {
  font-size:30px;
  margin:10px 0 6px;
  line-height:1.4
}

.authorization-page .license-query-intro>p {
  margin:0;
  color:#526e64
}

.authorization-page .license-query-form {
  margin:0;
  text-align:left
}

.authorization-page .license-query-form label.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.authorization-page .license-query-controls {
  align-items:center;
  gap:8px;
  padding:6px;
  border:1px solid #cdded8;
  border-radius:var(--radius-panel);
  background:#fff;
  transition:border-color .15s,box-shadow .15s
}

.authorization-page .license-query-controls:focus-within {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(0,142,130,.09)
}

.license-domain-field {
  display:flex;
  align-items:center;
  flex:1;
  min-width:0;
  gap:12px;
  padding-left:14px
}

.license-domain-field>i {
  flex-shrink:0;
  color:#6c8980;
  font-size:21px;
  line-height:1
}

.authorization-page .license-query-form .license-domain-field input {
  width:100%;
  border:0;
  border-radius:0;
  padding:10px 0;
  background:transparent;
  box-shadow:none
}

.authorization-page .license-domain-field input::placeholder {
  color:#81938d;
  opacity:1
}

.authorization-page .license-query-form .button:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:3px
}

.authorization-page .license-query .license-result.is-error {
  max-width:none;
  margin:16px 0 0;
  padding:12px 16px;
  font-size:13px
}

.authorization-page .license-query-form input:not([type=hidden]) {
  height:48px;
  font-size:15px;
  color:var(--ink)
}

.authorization-page .license-query-form .button {
  min-height:48px;
  padding:11px 25px
}

.authorization-page .license-query-form input:not([type=hidden]):is(:focus,:focus-visible) {
  outline:none;
  outline-offset:0;
  box-shadow:none;
  border-color:var(--primary)
}

.authorization-page .license-query-form>p {
  color:#61776e;
  margin:9px 0 0;
  font-size:12px
}

.license-query-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:18px;
  padding-top:15px;
  border-top:1px solid #e1ebe6;
  font-size:12px;
  color:#61776e
}

.license-query-meta>span {
  display:flex;
  align-items:center;
  gap:6px
}

.license-query-meta .license-text-link {
  font-size:13px
}

.license-query-empty {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:8px 12px 28px;
  color:#60796e;
  font-size:13px
}

.license-query-empty>i {
  font-size:20px
}

.license-status-panel {
  padding:28px 30px;
  margin-bottom:24px;
  border-radius:var(--radius-panel);
  border-color:#d4e6dc
}

.license-status-heading {
  display:flex;
  align-items:center;
  gap:16px
}

.license-status-heading>i {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 50px;
  height:50px;
  background:#eaf6ef;
  border-radius:var(--radius-control);
  font-size:28px;
  color:#087d64
}

.license-result-label {
  display:block;
  font-size:12px;
  color:#657d71;
  margin-bottom:3px
}

.license-status-heading h2 {
  margin:0;
  font-size:23px;
  line-height:1.5;
  color:#087d64
}

.license-status-heading>.license-text-link {
  margin-left:auto;
  font-size:13px
}

.license-facts {
  display:grid;
  grid-template-columns:1.35fr 1.15fr 1fr 1fr;
  gap:24px;
  margin:24px 0;
  padding-top:22px;
  border-top:1px solid #e2ebe6
}

.license-facts dt {
  font-size:12px;
  color:#61796d;
  margin-bottom:8px
}

.license-facts dd {
  margin:0;
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  overflow-wrap:anywhere
}

.license-facts dd>span {
  display:block;
  font-size:12px;
  font-weight:400;
  color:#61796d;
  margin-top:4px
}

.license-service-note {
  display:flex;
  gap:9px;
  padding:12px 16px;
  border-radius:var(--radius-control);
  background:#f4f8f6;
  color:#5b7368;
  align-items:baseline
}

.license-service-note i {
  color:#087d64
}

.license-service-note p {
  font-size:12px;
  line-height:1.9;
  margin:0
}

.license-service-note strong {
  font-weight:600;
  color:#3b5f50;
  margin-right:12px
}

.license-status-panel.is-suspended {
  border-color:#ead7ba
}

.is-suspended .license-status-heading>i {
  color:#936019;
  background:#fff4e3
}

.is-suspended .license-status-heading h2 {
  color:#885715
}

.is-not_found .license-status-heading>i {
  color:#64796f;
  background:#f0f4f2
}

.is-not_found .license-status-heading h2 {
  color:#3c5c4e
}

.license-status-domain {
  font-size:18px;
  overflow-wrap:anywhere;
  margin:20px 0 8px
}

.license-status-description {
  font-size:14px;
  line-height:1.9;
  color:#5e7469;
  max-width:800px;
  margin-bottom:16px
}

.license-certificate-section {
  padding:26px 30px;
  margin-bottom:26px;
  border-radius:var(--radius-panel);
  scroll-margin-top:100px
}

.license-certificate-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px
}

.license-certificate-heading h2 {
  font-size:19px;
  margin:0 0 6px
}

.license-certificate-heading p {
  font-size:13px;
  color:#61796d;
  margin:0
}

.license-certificate-actions {
  display:flex;
  align-items:center;
  gap:20px
}

.license-certificate-actions .button {
  font-size:13px;
  min-height:42px;
  padding:9px 16px;
  gap:7px
}

.certificate-download small {
  font-size:10px;
  font-weight:400
}

.license-certificate-actions .license-text-link {
  font-size:13px
}

.license-certificate-preview {
  padding:30px;
  background:#f2f6f3;
  border-radius:var(--radius-panel)
}

.license-certificate-caption {
  text-align:center;
  margin:16px 0 0;
  font-size:12px;
  line-height:1.8;
  color:#61796d
}

.authorization-page .license-policy-grid p {
  color:#60766c
}

@media(max-width:850px) {
  .license-facts {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .license-certificate-heading {
    align-items:flex-start;
    flex-direction:column
  }
  .license-certificate-preview {
    padding:20px
  }
}

@media(max-width:560px) {
  .authorization-page .license-query {
    padding:24px 20px
  }
  .authorization-page .license-query h2 {
    font-size:26px
  }
  .license-query-meta {
    flex-direction:column;
    align-items:flex-start;
    gap:10px
  }
  .license-query-empty {
    align-items:flex-start;
    justify-content:flex-start;
    font-size:12px
  }
  .license-status-panel {
    padding:22px 20px
  }
  .license-status-heading {
    flex-wrap:wrap;
    gap:12px
  }
  .license-status-heading h2 {
    font-size:20px
  }
  .license-status-heading>i {
    flex-basis:42px;
    height:42px;
    font-size:25px
  }
  .license-status-heading>.license-text-link {
    margin-left:54px
  }
  .license-facts {
    gap:18px 12px
  }
  .license-facts dd {
    font-size:14px
  }
  .license-service-note {
    padding:12px
  }
  .license-service-note strong {
    display:block
  }
  .license-certificate-section {
    padding:22px 16px
  }
  .license-certificate-actions {
    gap:12px;
    flex-wrap:wrap
  }
  .license-certificate-preview {
    padding:0;
    background:transparent
  }
  .license-certificate-caption {
    text-align:left
  }
}

@media(max-width:560px) {
  .authorization-page .license-query {
    padding:20px 16px
  }
  .authorization-page .license-query-controls {
    flex-direction:row;
    gap:6px;
    padding:5px
  }
  .license-domain-field {
    gap:8px;
    padding-left:7px
  }
  .license-domain-field>i {
    font-size:18px
  }
  .authorization-page .license-query-form input:not([type=hidden]) {
    height:44px;
    font-size:16px
  }
  .authorization-page .license-query-form .button {
    width:auto;
    min-height:44px;
    padding:10px 12px;
    font-size:13px;
    gap:5px;
    flex-shrink:0
  }
  .authorization-page .license-query-form .button>i {
    display:none
  }
  .authorization-page .license-query-form>p {
    font-size:12px;
    line-height:1.7;
    margin-top:10px;
    overflow-wrap:anywhere
  }
  .license-query-meta {
    margin-top:14px;
    padding-top:12px
  }
}

/* templates */
.template-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:26px
}

.template-toolbar .page-breadcrumb {
  margin:0;
  min-width:0;
  flex-wrap:wrap
}

.template-search {
  display:flex;
  gap:10px;
  width:460px;
  max-width:100%
}

.template-search input {
  min-width:0;
  flex:1;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  font:inherit;
  font-size:14px;
  color:var(--ink);
  background:#fff
}

.template-search input:is(:hover,:focus,:focus-visible) {
  outline:none;
  box-shadow:none;
  border-color:#b4cec7
}

.template-search input:focus {
  border-color:var(--primary)
}

.template-center .button {
  font-size:14px;
  min-height:42px;
  padding:9px 20px;
  white-space:nowrap
}

.template-filters>span {
  white-space:nowrap
}

.template-filters strong {
  color:#c46923
}

.template-empty {
  text-align:center;
  padding:55px 20px 65px;
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  background:linear-gradient(135deg,#f5faf8,#fff)
}

.template-empty-icon {
  display:grid;
  place-items:center;
  margin:0 auto 22px;
  width:68px;
  height:68px;
  background:#e7f5ef;
  border-radius:var(--radius-control);
  color:var(--primary);
  font-size:34px
}

.template-empty h2 {
  font-size:23px
}

.template-empty p {
  font-size:14px;
  line-height:1.9;
  color:var(--muted);
  margin:12px 0 24px
}

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

.template-card {
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  overflow:hidden;
  background:#fff
}

.template-card:hover {
  box-shadow:0 8px 28px #123d320c
}

.template-cover {
  aspect-ratio:16/9;
  background:#f0f7f4;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:var(--primary);
  gap:8px
}

.template-cover>i {
  font-size:42px
}

.template-cover>span {
  font-size:12px;
  color:var(--muted)
}

.template-cover img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top
}

.template-card-copy {
  padding:20px
}

.template-card-copy h2 {
  font-size:18px;
  margin-bottom:9px
}

.template-card-copy>p {
  font-size:13px;
  color:var(--muted);
  line-height:1.8;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}

.template-card-meta {
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:20px;
  font-size:12px;
  color:var(--muted)
}

.template-card-meta i {
  margin-left:auto;
  color:var(--primary)
}

.template-pagination {
  display:flex;
  justify-content:center;
  gap:25px;
  margin-top:30px;
  font-size:14px
}

.template-pagination a {
  color:var(--primary)
}

.template-detail-head {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
  align-items:center
}

.template-detail-head>.template-cover {
  border-radius:var(--radius-panel);
  border:1px solid var(--line)
}

.template-detail-category {
  color:var(--primary);
  font-size:13px
}

.template-detail-head h1 {
  font-size:30px;
  margin:9px 0 12px
}

.template-detail-head p {
  color:var(--muted);
  font-size:14px
}

.template-detail-head dl {
  font-size:13px;
  margin:22px 0
}

.template-detail-head dl>div {
  display:flex;
  gap:18px;
  padding:5px 0
}

.template-detail-head dt {
  min-width:60px;
  color:var(--muted)
}

.template-detail-head dd {
  margin:0;
  overflow-wrap:anywhere
}

.template-detail-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px
}

.template-detail-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:40px;
  margin-top:40px
}

.template-description h2,.template-detail-sidebar h2 {
  font-size:18px;
  margin-bottom:16px
}

.template-description {
  border-top:1px solid var(--line);
  padding-top:24px
}

.template-richtext {
  font-size:14px;
  line-height:1.9;
  overflow-wrap:anywhere
}

.template-richtext p,.template-richtext ul,.template-richtext ol {
  margin:14px 0
}

.template-richtext img {
  max-width:100%;
  height:auto
}

.template-richtext pre {
  overflow:auto;
  background:var(--mint);
  padding:16px
}

.template-richtext table {
  display:block;
  overflow:auto;
  max-width:100%
}

.template-detail-layout aside {
  align-self:start;
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  padding:22px;
  font-size:13px
}

.template-detail-layout aside section+section {
  margin-top:22px
}

.template-detail-layout aside p {
  white-space:pre-line;
  overflow-wrap:anywhere;
  color:var(--muted);
  line-height:1.8
}

.template-detail-layout aside>a {
  display:inline-block;
  margin-top:20px;
  color:var(--primary)
}

@media(max-width:1000px) {
  .template-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .template-detail-layout {
    grid-template-columns:minmax(0,1fr) 260px;
    gap:24px
  }
}

@media(max-width:700px) {
  .template-toolbar {
    align-items:stretch;
    flex-direction:column;
    gap:20px
  }
  .template-search {
    width:100%
  }
  .template-grid,.template-detail-head,.template-detail-layout {
    grid-template-columns:1fr
  }
  .template-detail-head {
    gap:22px
  }
  .template-detail-head h1 {
    font-size:25px
  }
  .template-empty {
    padding:36px 18px
  }
  .template-empty h2 {
    font-size:21px
  }
}

.template-card-meta {
  flex-wrap:wrap
}

.template-number {
  font-variant-numeric:tabular-nums;
  letter-spacing:.03em;
  white-space:nowrap
}

/* Keep interactions within the same reading column as the template body. */
.template-detail-main {
  min-width:0
}

.template-detail-main :is(.lele-comment,.lele-review) {
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0
}

.template-detail-layout .template-detail-sidebar {
  position:sticky;
  top:24px;
  max-height:calc(100dvh - 48px);
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#c9dcd5 transparent
}

.template-detail-sidebar .template-related {
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid var(--line)
}

.template-related-list {
  display:grid;
  gap:16px
}

.template-related-item {
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  align-items:center;
  gap:12px
}

.template-related-cover {
  aspect-ratio:16/10;
  background:var(--mint);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  display:grid;
  place-items:center;
  color:var(--primary);
  font-size:24px
}

.template-related-cover img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top
}

.template-related-item strong {
  display:block;
  font-size:13px;
  font-weight:500;
  line-height:1.65;
  overflow-wrap:anywhere
}

.template-related-item small {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:4px;
  line-height:1.6
}

.template-related-item:hover strong {
  color:var(--primary)
}

.template-related-more {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  color:var(--primary)
}

@media(max-width:700px) {
  .template-detail-layout .template-detail-sidebar {
    position:static;
    max-height:none;
    overflow:visible
  }
}

/* Template summary: title, price and license, grouped specifications and actions. */
.template-detail-head {
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:28px;
  align-items:start
}

.template-detail-info {
  min-width:0;
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  background:#f8faf9;
  overflow:hidden
}

.template-info-heading {
  padding:22px 24px 16px
}

.template-info-heading h1 {
  margin-bottom:0!important
}

.template-price-band {
  padding:16px 24px 18px;
  background:var(--primary-hover);
  color:#fff
}

.template-price-line {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}

.template-price {
  font-size:36px;
  font-weight:600;
  line-height:1.3;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

.template-price small {
  font-size:21px;
  font-weight:400
}

.template-price-label {
  padding:3px 10px;
  border:1px solid #ffffff66;
  border-radius:var(--radius-label);
  font-size:12px;
  white-space:nowrap
}

.template-price-band p {
  color:#fff;
  font-size:12px;
  line-height:1.75;
  margin-top:8px
}

.template-info-body {
  padding:18px 24px 22px
}

.template-support-links {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 18px;
  font-size:13px;
  margin-bottom:14px
}

.template-support-links>span {
  color:var(--muted)
}

.template-support-links a {
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--primary)
}

.template-support-links a:hover {
  text-decoration:underline;
  text-underline-offset:3px
}

.template-support-links i {
  font-size:16px;
  line-height:1
}

.template-detail-info .template-specs {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:22px;
  margin:0;
  font-size:13px
}

.template-detail-info .template-specs>div {
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:10px;
  align-items:start;
  border-bottom:1px solid var(--line);
  padding:10px 0
}

.template-detail-info .template-specs dt {
  min-width:0;
  white-space:nowrap;
  line-height:1.75
}

.template-detail-info .template-specs dd {
  line-height:1.75
}

.template-spec-wide {
  grid-column:1/-1
}

.template-detail-info .template-info-description {
  font-size:13px!important;
  line-height:1.85;
  margin-top:14px;
  color:var(--ink)
}

.template-info-description>span {
  color:var(--muted);
  margin-right:10px
}

.template-detail-info .template-detail-actions {
  margin-top:20px
}

.template-detail-info .template-detail-actions .button {
  min-width:145px
}

.template-detail-layout .template-detail-sidebar {
  border:0;
  padding:0;
  background:transparent
}

.template-acquire-panel,.template-detail-sidebar .template-related {
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  padding:22px;
  background:#fff
}

.template-acquire-panel>a {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  color:var(--primary)
}

.template-related-list {
  gap:18px
}

.template-related-item {
  grid-template-columns:88px minmax(0,1fr)
}

.template-related-item strong {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}

.template-related-featured {
  display:block
}

.template-related-featured .template-related-cover {
  aspect-ratio:16/9;
  margin-bottom:12px;
  border-radius:var(--radius-control)
}

.template-related-featured strong {
  font-size:15px;
  line-height:1.7
}

.template-related-featured small {
  font-size:12px;
  margin-top:6px
}

@media(min-width:701px) and (max-width:1050px) {
  .template-detail-info .template-specs {
    grid-template-columns:1fr
  }
  .template-spec-wide {
    grid-column:auto
  }
  .template-info-heading,.template-price-band,.template-info-body {
    padding-left:20px;
    padding-right:20px
  }
}

@media(max-width:700px) {
  .template-detail-head {
    grid-template-columns:1fr;
    gap:22px
  }
  .template-info-heading {
    padding:20px 18px 16px
  }
  .template-price-band {
    padding:16px 18px
  }
  .template-info-body {
    padding:16px 18px 20px
  }
  .template-price {
    font-size:32px
  }
  .template-detail-info .template-specs {
    grid-template-columns:1fr
  }
  .template-spec-wide {
    grid-column:auto
  }
  .template-detail-info .template-detail-actions {
    gap:10px
  }
  .template-detail-info .template-detail-actions .button {
    flex:1;
    min-width:0;
    padding-left:12px;
    padding-right:12px
  }
}

@media(max-width:700px) {
  .template-info-heading {
    --content-title-size:24px
  }
}

/* One shared frame keeps the preview and information visually complete. */
.template-detail-head {
  align-items:stretch;
  background:#f8faf9;
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  padding:24px;
  gap:32px
}

.template-detail-preview {
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  margin:0
}

.template-detail-preview .template-cover {
  width:100%;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:#fff
}

.template-detail-preview figcaption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:12px;
  color:var(--muted);
  font-size:12px
}

.template-detail-preview figcaption a {
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--primary)
}

.template-detail-info {
  border:0;
  background:transparent;
  border-radius:0;
  overflow:visible
}

.template-info-heading {
  padding:0 0 16px
}

.template-price-band {
  border-radius:var(--radius-control);
  padding:16px 20px 18px
}

.template-info-body {
  padding:18px 0 0
}

@media(min-width:701px) and (max-width:1050px) {
  .template-detail-head {
    padding:20px;
    gap:24px
  }
  .template-info-heading,.template-info-body {
    padding-left:0;
    padding-right:0
  }
}

@media(max-width:700px) {
  .template-detail-head {
    padding:18px;
    gap:24px
  }
  .template-info-heading {
    padding:0 0 16px
  }
  .template-info-body {
    padding:16px 0 0
  }
  .template-price-band {
    padding:16px
  }
  .template-detail-preview figcaption {
    font-size:11px
  }
  .template-detail-info .template-detail-actions .button {
    padding-left:8px;
    padding-right:8px
  }
}

/* Whole-page screenshots fill the preview column without distorting the page. */
.template-preview-gallery {
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  gap:12px
}

.template-preview-frame {
  flex:1 1 0;
  height:0;
  min-height:380px;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#b8cec8 #eef4f1;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  overscroll-behavior-y:contain
}

.template-preview-frame img {
  display:block;
  width:100%;
  max-width:100%;
  height:auto
}

.template-preview-controls {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:11px;
  line-height:1.6
}

.template-preview-controls>div {
  display:flex;
  gap:6px;
  flex:none
}

.template-preview-controls button,.template-preview-controls a {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  padding:0;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:#fff;
  color:var(--primary);
  font-size:16px;
  cursor:pointer
}

.template-content-tablist {
  display:flex;
  gap:30px;
  border-bottom:1px solid var(--line);
  margin-bottom:24px
}

.template-content-tablist a {
  position:relative;
  padding:13px 0;
  color:var(--muted);
  font-size:16px;
  white-space:nowrap
}

.template-content-tablist a[aria-selected=true] {
  color:var(--primary);
  font-weight:500;
  border-bottom:2px solid var(--primary);
  margin-bottom:-1px
}

.template-content-tabs [data-template-panel][hidden] {
  display:none
}

.template-content-tabs [data-template-panel] {
  scroll-margin-top:24px
}

.template-content-tabs .template-description {
  border-top:0;
  padding-top:0
}

.template-usage-guide {
  font-size:14px;
  line-height:1.9
}

.template-usage-guide h2 {
  font-size:20px;
  margin-bottom:24px
}

.template-usage-guide section+section {
  margin-top:24px
}

.template-install-details+section {
  margin-top:28px
}

.template-usage-guide h3 {
  font-size:16px;
  margin-bottom:10px;
  font-weight:500
}

.template-usage-guide p {
  white-space:pre-line;
  color:var(--muted)
}

.template-guide-links {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-top:24px
}

.template-guide-links a {
  color:var(--primary);
  display:inline-flex;
  align-items:center;
  gap:6px
}

@media(max-width:700px) {
  .template-preview-frame {
    flex:none;
    height:380px;
    min-height:0
  }
  .template-preview-controls button,.template-preview-controls a {
    width:44px;
    height:44px
  }
  .template-preview-controls>span {
    max-width:170px
  }
  .template-content-tablist {
    gap:22px
  }
  .template-content-tablist a {
    font-size:14px
  }
}

.template-preview-hint-mobile {
  display:none
}

.template-preview-frame:focus-visible,.template-preview-controls :is(button,a):focus-visible,.template-content-tablist a:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:3px
}

@media(max-width:700px) {
  .template-preview-hint-desktop {
    display:none
  }
  .template-preview-hint-mobile {
    display:inline
  }
}

/* Shared card for the detail tabs and their active content. */
.template-content-tabs {
  min-width:0;
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  background:#fff
}

.template-content-tabs .template-content-tablist {
  margin:0;
  padding:6px 24px 0
}

.template-content-tabs [data-template-panel] {
  padding:24px
}

.template-content-tabs #template-panel-comments>.lele-comment {
  margin-top:0;
  margin-bottom:0
}

@media(max-width:700px) {
  .template-content-tabs .template-content-tablist {
    gap:20px;
    padding:4px 18px 0
  }
  .template-content-tabs [data-template-panel] {
    padding:20px 18px
  }
}

/* product */
.about-page .page-content {
  padding-bottom:64px
}

.official-green .about-page .product-subnav {
  justify-content:center;
  border-bottom:0;
  margin:0 0 28px;
  padding:0;
  gap:10px
}

.official-green .about-page .product-subnav>a {
  padding:9px 20px
}

.about-intro {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:48px;
  padding:36px;
  border:1px solid #deebe6;
  border-radius:var(--radius-panel);
  background:linear-gradient(120deg,#f2faf6,#fbfdfc)
}

.about-intro-copy {
  min-width:0
}

.about-eyebrow {
  display:block;
  margin:0 0 10px;
  color:var(--primary);
  font-size:12px;
  letter-spacing:.08em
}

.official-green .about-page .about-intro h2 {
  font-size:var(--content-section-size);
  font-weight:600;
  line-height:1.5;
  letter-spacing:0;
  margin:0 0 18px
}

.about-description {
  font-size:15px;
  line-height:1.8;
  margin:0 0 24px;
  color:var(--muted)
}

.about-description p {
  margin:0
}

.about-description p+p {
  margin-top:14px
}

.about-features {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  overflow:hidden
}

.about-features>div {
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  grid-template-rows:auto 1fr;
  align-items:start;
  column-gap:14px;
  row-gap:6px;
  padding:24px;
  min-width:0
}

.about-features>div>i {
  grid-column:1;
  grid-row:1 / 3
}

.about-features>div:nth-child(even) {
  border-left:1px solid var(--line)
}

.about-features>div:nth-child(n+3) {
  border-top:1px solid var(--line)
}

.about-features i,.about-package-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:var(--radius-control);
  color:var(--primary);
  background:#eaf6f1;
  font-size:22px
}

.official-green .about-page .about-features h3 {
  font-size:var(--content-item-size);
  line-height:1.7;
  font-weight:500;
  grid-column:2;
  margin:0
}

.about-features p {
  grid-column:2;
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
  margin:0
}

/* Product evidence: actual interface captures with task-oriented explanations. */
.official-green .about-page .page-content .about-intro .about-intro-copy .about-description { font-size:16px; color:#4c6058; line-height:1.9; }
.about-page .about-features p { font-size:14px; color:#4c6058; }
.about-features h3 a { color:inherit; }
.about-features h3 a:hover { color:var(--primary); }
.about-features h3 a:focus-visible,.product-showcase-figure a:focus-visible { outline:2px solid var(--primary); outline-offset:4px; }
.product-showcases { margin-top:64px; }
.product-showcases-heading { text-align:center; margin-bottom:20px; }
.official-green .about-page .product-showcases-heading h2 { font-size:28px; line-height:1.5; font-weight:600; letter-spacing:0; margin:0 0 12px; }
.product-showcases-heading>p { margin:0; color:#4c6058; font-size:16px; line-height:1.8; }
.product-showcase { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr); align-items:center; gap:56px; padding:36px 0; scroll-margin-top:104px; }
.product-showcase-reverse { grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr); }
.product-showcase-reverse .product-showcase-copy { grid-column:2; grid-row:1; }
.product-showcase-reverse .product-showcase-figure { grid-column:1; grid-row:1; }
.product-showcase-copy { min-width:0; }
.product-showcase-kicker { display:flex; align-items:center; gap:10px; margin-bottom:16px; color:var(--primary); font-size:14px; font-weight:500; }
.product-showcase-kicker>span { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--radius-control); background:var(--mint); font-size:13px; }
.official-green .about-page .product-showcase-copy h3 { font-size:28px; font-weight:600; line-height:1.5; letter-spacing:0; margin:0 0 16px; }
.product-showcase-copy>p { font-size:16px; line-height:1.9; color:#4c6058; margin:0 0 24px; }
.product-showcase-points { display:grid; gap:18px; list-style:none; padding:0; margin:0 0 24px; }
.product-showcase-points li { display:flex; gap:12px; align-items:flex-start; }
.product-showcase-points li>i { flex:0 0 22px; font-size:20px; line-height:26px; color:var(--primary); }
.product-showcase-points strong { display:block; font-size:15px; font-weight:500; line-height:26px; color:var(--ink); }
.product-showcase-points span { display:block; font-size:14px; line-height:1.8; color:#4c6058; margin-top:3px; }
.product-showcase-figure { margin:0; min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-panel); background:var(--mint); box-shadow:0 8px 24px #113b3208; }
.product-showcase-image { display:flex; align-items:center; justify-content:center; height:460px; padding:12px; background:linear-gradient(135deg,var(--mint),#f6f9fc); cursor:zoom-in; }
.product-showcase-image img { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; border:1px solid #e2e8e6; border-radius:var(--radius-control); box-shadow:0 8px 24px #113b320a; }
.product-showcase-figure figcaption { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; border-top:1px solid var(--line); background:#fff; color:#4c6058; font-size:13px; line-height:1.6; }
.product-showcase-figure figcaption>span { display:flex; align-items:center; gap:7px; }
.product-showcase-figure figcaption>a { flex-shrink:0; display:inline-flex; align-items:center; gap:5px; color:var(--primary); min-height:32px; }
.product-showcase-figure figcaption>a:hover { text-decoration:underline; }
.product-audience { margin-top:28px; }
.product-audience-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.product-audience-grid article { height:100%; border:1px solid var(--line); border-radius:var(--radius-panel); padding:28px; background:#fff; transition:border-color .15s; }
.product-audience-grid article:hover { border-color:#beddd2; }
.product-audience-grid article>i { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--radius-control); background:var(--mint); font-size:24px; color:var(--primary); }
.official-green .about-page .product-audience-grid h3 { margin:16px 0 10px; font-size:18px; }
.product-audience-grid p { font-size:16px; line-height:1.9; color:#4c6058; margin:0; }
.product-update-links { display:flex; justify-content:center; margin-top:20px; }
.product-update-links .about-link { min-height:44px; font-size:14px; }
.about-page .about-release-body { font-size:15px; }
.about-page .about-note { font-size:13px; color:#40564d; }
.about-page .about-badge { font-size:13px; }
.about-page .about-section-heading p { font-size:16px; color:#4c6058; }
.about-download.product-service { grid-template-columns:minmax(0,1fr) auto; gap:28px 48px; padding:36px; }
.product-service-actions { display:flex; flex-direction:column; align-items:center; gap:14px; }
.product-service-details { grid-column:1 / -1; padding-top:24px; border-top:1px solid #d9e8e2; }
.product-program-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.product-program-heading h4 { margin:0; font-size:16px; line-height:1.5; font-weight:600; }
.product-program-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 28px; margin:0 0 18px; }
.product-program-meta dt { color:#40564d; font-size:13px; line-height:1.8; margin-bottom:4px; }
.product-program-meta dd { margin:0; color:var(--ink); font-size:16px; line-height:1.8; }
.product-program-access { margin-top:10px; }
.about-download.product-service p { color:#40564d; font-size:16px; }
.official-green .about-page .page-content .about-download.product-service h3 { font-size:24px; line-height:1.5; }
.product-service-details p.about-note { font-size:15px; margin:0 0 8px; }
.has-product-preview { overflow:hidden; }
.product-image-dialog { width:min(1440px,calc(100vw - 48px)); max-width:none; max-height:calc(100dvh - 48px); padding:0; border:0; border-radius:8px; color:var(--ink); background:#fff; box-shadow:0 20px 80px #0004; }
.product-image-dialog[open] { display:flex; flex-direction:column; }
.product-image-dialog::backdrop { background:#132b24b8; }
.product-image-dialog-header { display:flex; flex-shrink:0; justify-content:space-between; align-items:center; gap:16px; padding:12px 20px; border-bottom:1px solid var(--line); }
.product-image-dialog-header h2 { margin:0; font-size:18px; line-height:1.5; }
.product-image-dialog-header>div { display:flex; gap:8px; flex-shrink:0; }
.product-image-dialog-header button { display:flex; align-items:center; justify-content:center; height:44px; min-width:44px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); cursor:pointer; font:inherit; }
.product-image-zoom { padding:0 12px; font-size:14px !important; }
.product-image-close { font-size:24px !important; }
.product-image-dialog-header button:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.product-image-dialog-body { min-height:0; padding:20px; background:#f3f6f5; overflow:auto; max-height:calc(100dvh - 172px); }
.product-image-dialog-body img { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 212px); margin:0 auto; }
.product-image-dialog-body.is-zoomed img { max-width:none; max-height:none; margin:0; }
.product-image-dialog-footer { display:flex; flex-shrink:0; justify-content:space-between; gap:12px; padding:12px 20px; font-size:13px; color:#4c6058; }
@media(max-width:1100px) {
  .product-showcase { gap:40px; }
  .product-showcase-image { height:360px; }
  .official-green .about-page .product-showcase-copy h3 { font-size:26px; }
}
@media(max-width:850px) {
  .product-showcases { margin-top:44px; }
  .product-showcases-heading { margin-bottom:6px; }
  .product-showcase,.product-showcase-reverse { grid-template-columns:1fr; gap:24px; padding:32px 0; }
  .product-showcase-reverse .product-showcase-copy,.product-showcase-reverse .product-showcase-figure { grid-column:auto; grid-row:auto; }
  .product-showcase-image { height:clamp(220px,56vw,420px); }
  .about-download.product-service { grid-template-columns:1fr; gap:24px; padding:28px; }
  .product-service-actions { flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:16px 24px; }
}
@media(max-width:560px) {
  .official-green .about-page .product-showcases-heading h2,.official-green .about-page .product-showcase-copy h3 { font-size:24px; }
  .product-showcases-heading>p,.product-showcase-copy>p,.product-audience-grid p,.official-green .about-page .page-content .about-intro .about-intro-copy .about-description,.about-page .about-section-heading p { font-size:15px; }
  .product-showcase-image { padding:10px; }
  .product-showcase-figure figcaption { padding:10px 12px; gap:8px; font-size:12px; }
  .product-showcase-figure figcaption>a { min-height:44px; }
  .product-audience-grid { grid-template-columns:1fr; gap:16px; }
  .product-audience-grid article { padding:24px; }
  .about-download.product-service { padding:24px; }
  .product-program-meta { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 20px; }
  .official-green .about-page .page-content .about-download.product-service h3 { font-size:22px; }
  .product-image-dialog { width:calc(100vw - 24px); max-height:calc(100dvh - 24px); }
  .product-image-dialog-header { padding:10px 12px; gap:8px; }
  .product-image-dialog-header h2 { font-size:15px; }
  .product-image-dialog-header>div { gap:4px; }
  .product-image-zoom { padding:0 8px; }
  .product-image-dialog-body { padding:12px; max-height:calc(100dvh - 142px); }
  .product-image-dialog-body img { max-height:calc(100dvh - 166px); }
  .product-image-dialog-footer { padding:10px 12px; font-size:12px; }
}

.about-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--primary)
}

.about-link:hover {
  text-decoration:underline
}

.product-page-section {
  scroll-margin-top:24px
}

.product-page-section+.product-page-section {
  margin-top:52px;
  padding-top:0;
  border:0
}

.about-section-heading {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
  margin-bottom:24px
}

.about-section-heading::before {
  content:"";
  width:28px;
  height:3px;
  border-radius:3px;
  background:var(--primary);
  margin-bottom:4px
}

.about-section-heading h2 {
  font-size:22px;
  line-height:1.5;
  margin:0
}

.about-section-heading p {
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  margin:0
}

.about-section-heading>.about-link {
  margin-top:2px
}

.about-releases {
  width:100%;
  margin:0 auto;
  display:grid;
  gap:12px
}

.about-release {
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  overflow:hidden;
  scroll-margin-top:104px;
  background:#fff
}

.about-release[open] {
  border-color:#cce4da;
  box-shadow:0 6px 22px #123d3206
}

.about-release summary {
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 24px;
  cursor:pointer;
  list-style:none;
  font-size:15px;
  font-weight:600
}

.about-release summary::-webkit-details-marker {
  display:none
}

.about-release summary>i {
  margin-left:auto;
  font-size:18px;
  color:var(--muted);
  transition:transform .15s
}

.about-release[open] summary>i {
  transform:rotate(180deg)
}

.about-release summary:hover,.about-release[open] summary {
  background:var(--mint)
}

.about-badge {
  font-size:11px;
  font-weight:400;
  color:var(--primary);
  background:#e1f1ec;
  border-radius:var(--radius-label);
  padding:2px 8px
}

.about-release-body {
  padding:4px 24px 22px;
  font-size:14px;
  line-height:1.9;
  color:#50645e
}

.about-release-body ul {
  padding-left:20px;
  margin:14px 0
}

.about-release-body li+li {
  margin-top:6px
}

.about-release-body li::marker {
  color:var(--primary)
}

.about-note {
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
  margin:8px 0 0
}

.about-download {
  width:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  align-items:center;
  gap:36px;
  padding:32px;
  border:1px solid #deebe6;
  border-radius:var(--radius-panel);
  background:var(--mint);
  font-size:14px
}

.about-package-icon {
  margin-bottom:14px;
  background:#fff;
  width:46px;
  height:46px;
  font-size:25px
}

.about-download h3 {
  font-size:18px;
  margin:0
}

.about-download p {
  margin:8px 0 14px;
  color:var(--muted);
  line-height:1.8
}

.about-download-access {
  border-left:1px solid #d9e8e2;
  padding-left:32px;
  min-width:0
}

.about-download-access>p:first-child {
  margin-top:0
}

.about-download .button {
  font-size:14px;
  padding:9px 20px
}

.about-delivery {
  width:100%;
  margin:16px auto 0;
  text-align:center;
  font-size:12px
}

.about-delivery a {
  margin-left:6px
}

.about-checksum {
  margin-top:12px;
  font-size:12px
}

.about-checksum summary {
  cursor:pointer
}

.about-checksum code,.about-file {
  overflow-wrap:anywhere
}

@media(max-width:1000px) {
  .about-intro {
    gap:28px;
    padding:28px;
    grid-template-columns:1fr
  }
  .about-features {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .about-features>div {
    padding:20px
  }
}

@media(max-width:700px) {
  .about-intro {
    padding:24px;
    gap:24px
  }
  .about-features {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .about-features>div {
    padding:18px
  }
  .about-features>div:nth-child(3) {
    border-left:0
  }
  .about-features>div:nth-child(n+3) {
    border-top:1px solid var(--line)
  }
  .about-download {
    grid-template-columns:1fr;
    gap:20px;
    padding:24px
  }
  .about-download-access {
    border-left:0;
    border-top:1px solid #d9e8e2;
    padding:20px 0 0
  }
  .about-release summary {
    padding:16px 18px
  }
  .about-release-body {
    padding:4px 18px 18px
  }
  .product-page-section+.product-page-section {
    margin-top:36px
  }
  .about-section-heading {
    margin-bottom:20px
  }
  .about-section-heading p {
    font-size:13px
  }
  .official-green .about-page .product-subnav {
    gap:4px;
    margin-bottom:22px
  }
  .official-green .about-page .product-subnav>a {
    padding:8px 12px
  }
}

@media(prefers-reduced-motion:reduce) {
  .about-release summary>i {
    transition:none
  }
}

@media(max-width:560px) {
  .about-features {
    grid-template-columns:1fr
  }
  .about-features>div:nth-child(even) {
    border-left:0
  }
  .about-features>div+div {
    border-top:1px solid var(--line)
  }
}

/* contact */
.help-page {
  font-size:14px;
  line-height:1.85;
  color:var(--ink)
}

.help-page h1,.help-page h2,.help-page h3 {
  letter-spacing:0
}

.help-heading,.help-section-heading {
  text-align:center
}

.help-heading {
  margin:4px 0 30px
}

.help-heading h1,.help-section-heading h2 {
  font-size:30px;
  line-height:1.4;
  margin:0
}

.help-heading p,.help-section-heading p {
  font-size:14px;
  color:var(--muted);
  margin-top:8px
}

.help-overview {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:54px;
  align-items:center;
  padding:38px;
  border:1px solid #dcece5;
  border-radius:var(--radius-panel);
  background:linear-gradient(115deg,#eff9f5,#fbfdfc 75%)
}

.help-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  background:var(--primary);
  color:#fff;
  border-radius:var(--radius-control);
  font-size:29px;
  margin-bottom:22px
}

.help-icon i {
  line-height:1
}

.help-intro h2 {
  font-size:28px;
  line-height:1.5
}

.help-intro>p {
  font-size:14px;
  color:var(--muted);
  line-height:1.95;
  margin-top:16px;
  max-width:510px
}

.help-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px 22px;
  margin-top:25px
}

.help-page .button {
  font-size:14px;
  min-height:42px;
  padding:10px 18px;
  gap:8px
}

.help-page .button i,.help-link i {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  font-size:16px;
  line-height:1
}

.help-link {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--primary);
  font-size:14px;
  font-weight:500
}

.help-link:hover {
  text-decoration:none;
  opacity:.8
}

.help-service-note {
  display:flex;
  align-items:baseline;
  gap:8px;
  border-top:1px solid #dcece5;
  margin-top:26px;
  padding-top:18px;
  font-size:12px;
  color:var(--muted)
}

.help-service-note i {
  font-size:14px;
  flex-shrink:0;
  line-height:1
}

.help-channels {
  min-width:0;
  padding:26px 28px;
  border:1px solid #e1ece7;
  border-radius:var(--radius-panel);
  background:#fff;
  box-shadow:0 8px 28px rgba(9,69,52,.035)
}

.help-channels h2 {
  font-size:21px;
  line-height:1.5
}

.help-channels-lead {
  font-size:12px;
  color:var(--muted);
  margin:4px 0 8px
}

.help-channel {
  display:flex;
  align-items:center;
  gap:13px;
  padding:16px 0;
  border-bottom:1px solid #edf2ef
}

.help-channel-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  flex-shrink:0;
  background:#edf8f3;
  color:var(--primary);
  border-radius:var(--radius-control);
  font-size:20px
}

.help-channel-icon i {
  line-height:1
}

.help-channel-copy {
  min-width:0;
  flex:1
}

.help-channel-copy small {
  display:block;
  color:var(--muted);
  font-size:12px
}

.help-channel-copy strong {
  display:block;
  font-weight:500;
  font-size:16px;
  color:var(--ink);
  overflow-wrap:anywhere;
  line-height:1.6;
  margin-top:2px
}

.help-channel>i {
  font-size:16px;
  line-height:1;
  color:var(--primary);
  flex-shrink:0
}

.help-channel:hover .help-channel-copy strong {
  color:var(--primary)
}

.help-address {
  display:flex;
  align-items:baseline;
  gap:7px;
  margin-top:16px;
  font-size:12px;
  color:var(--muted)
}

.help-address i {
  font-size:14px;
  line-height:1;
  flex-shrink:0
}

.help-channel-empty {
  padding:20px 0;
  font-size:14px;
  color:var(--muted)
}

.help-message {
  margin-top:32px;
  padding:32px 36px;
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  background:#fff
}

.help-page .lele-feedback {
  color:var(--ink)
}

.help-page .lele-feedback-head {
  margin-bottom:26px
}

.help-page .lele-feedback-head h2 {
  color:var(--ink);
  font-size:24px;
  line-height:1.4
}

.help-page .lele-feedback-head p {
  color:var(--muted);
  font-size:14px
}

.help-page .lele-feedback-fields {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px
}

.help-page .lele-feedback-fields>.lele-form-item:has(input[type=radio]),.help-page .lele-feedback-fields>.lele-form-item:has(textarea) {
  grid-column:1/-1
}

.help-page .lele-feedback-fields>.lele-form-item>.lele-form-label,.help-page .lele-feedback-captcha>label {
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  line-height:1.5
}

.help-page .lele-feedback .lele-input,.help-page .lele-feedback .lele-textarea {
  font-family:inherit;
  font-size:14px;
  border:1px solid var(--line);
  background:#f7faf9;
  color:var(--ink);
  border-radius:var(--radius-control);
  box-shadow:none;
  outline:none
}

.help-page .lele-feedback .lele-input:hover,.help-page .lele-feedback .lele-textarea:hover {
  box-shadow:none
}

.help-page .lele-feedback .lele-input:focus,.help-page .lele-feedback .lele-textarea:focus {
  border-color:var(--primary);
  box-shadow:none
}

.help-page .lele-feedback .lele-textarea {
  height:150px;
  line-height:1.8
}

.help-page .lele-feedback input::placeholder,.help-page .lele-feedback textarea::placeholder {
  color:var(--muted);
  opacity:.85
}

.help-page .lele-form-control:has(input[type=radio]) {
  display:flex;
  gap:10px;
  flex-wrap:wrap
}

.help-page .lele-form-control>label:has(input[type=radio]) {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  margin:0;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  cursor:pointer;
  font-size:14px;
  line-height:1.5;
  color:var(--muted)
}

.help-page .lele-form-control>label:has(input[type=radio]:checked) {
  background:#eef8f5;
  border-color:var(--primary);
  color:var(--primary)
}

.help-page .lele-form-control input[type=radio] {
  appearance:auto;
  accent-color:var(--primary);
  width:14px;
  height:14px;
  margin:0;
  box-shadow:none
}

.help-page .lele-form-control input[type=radio]+span {
  display:inline
}

.help-page .lele-feedback-captcha {
  max-width:380px;
  margin-top:22px
}

.help-page .lele-feedback-captcha>div {
  flex-direction:row
}

.help-page .lele-feedback-captcha .lele-input {
  min-width:0
}

.help-page .lele-feedback-captcha-image {
  border-radius:var(--radius-control);
  border-color:var(--line);
  box-shadow:none
}

.help-page .lele-feedback-submit {
  background:var(--primary);
  font-family:inherit;
  font-size:14px;
  font-weight:500;
  border-radius:var(--radius-control);
  box-shadow:none;
  min-height:44px
}

.help-page .lele-feedback-submit:hover {
  background:var(--primary);
  filter:brightness(.95);
  transform:none;
  box-shadow:none
}

.help-page .lele-feedback-submit:focus-visible,.help-page .lele-feedback-captcha-image:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:3px
}

.help-page .lele-feedback-actions {
  margin-top:24px;
  font-size:13px
}

.help-message-note {
  font-size:12px;
  color:var(--muted);
  margin-top:18px
}

.help-page .lele-feedback-actions .is-success {
  color:var(--primary)
}

@media(max-width:1000px) {
  .help-overview {
    gap:30px;
    padding:28px;
    grid-template-columns:1.1fr 1fr
  }
  .help-intro h2 {
    font-size:25px
  }
  .help-channels {
    padding:24px
  }
}

@media(max-width:760px) {
  .help-overview {
    grid-template-columns:1fr;
    gap:26px
  }
  .help-intro>p {
    max-width:none
  }
  .help-page .lele-feedback-fields {
    grid-template-columns:1fr;
    gap:18px
  }
  .help-message {
    padding:26px
  }
  .help-page .lele-form-control>label:has(input[type=radio]) {
    flex:1 1 calc(50% - 10px);
    padding:9px 10px
  }
}

@media(max-width:480px) {
  .help-heading h1 {
    font-size:26px
  }
  .help-heading p {
    font-size:13px
  }
  .help-overview {
    padding:24px 20px
  }
  .help-intro h2 {
    font-size:23px
  }
  .help-intro>p {
    font-size:13px
  }
  .help-channels {
    padding:22px 18px
  }
  .help-channel-copy strong {
    font-size:15px
  }
  .help-actions {
    gap:16px
  }
  .help-actions .help-link {
    font-size:13px
  }
  .help-message {
    padding:24px 20px
  }
  .help-page .lele-feedback-head h2 {
    font-size:22px
  }
  .help-page .lele-feedback-head p {
    font-size:13px
  }
}

/* friendlinks */
.friend-application-layout {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);
  gap:32px;
  align-items:start;
  margin:32px 0 56px
}

.friend-application-guide {
  padding:24px 12px 24px 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.8
}

.friend-guide-icon {
  display:inline-flex;
  width:52px;
  height:52px;
  border-radius:14px;
  align-items:center;
  justify-content:center;
  background:#e4f5f0;
  color:var(--primary);
  font-size:26px
}

.friend-application-guide h2 {
  margin:18px 0 12px;
  font-size:26px;
  line-height:1.5;
  color:var(--ink)
}

.friend-application-guide>p {
  margin:0 0 24px
}

.friend-application-steps {
  list-style:none;
  padding:0;
  margin:24px 0;
  counter-reset:friend-step
}

.friend-application-steps li {
  position:relative;
  padding:0 0 22px 44px;
  counter-increment:friend-step
}

.friend-application-steps li:before {
  content:counter(friend-step);
  position:absolute;
  left:0;
  top:2px;
  width:28px;
  height:28px;
  border:1px solid #bde5dc;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary);
  font-size:13px
}

.friend-application-steps strong,.friend-application-steps span {
  display:block
}

.friend-application-steps strong {
  color:var(--ink);
  font-size:16px;
  font-weight:500
}

.friend-application-steps span {
  font-size:14px;
  margin-top:3px
}

.friend-site-card {
  padding:20px 22px;
  border:1px solid #deebe6;
  background:#f4faf7;
  border-radius:var(--radius-panel)
}

.friend-site-card h3 {
  margin:0 0 12px;
  font-size:17px;
  color:var(--ink)
}

.friend-site-card dl {
  display:grid;
  grid-template-columns:70px minmax(0,1fr);
  gap:8px 12px;
  margin:0;
  font-size:14px
}

.friend-site-card dd {
  margin:0;
  color:var(--ink);
  overflow-wrap:anywhere
}

.friend-site-card p {
  font-size:13px;
  margin:14px 0 0
}

.friend-contact-link {
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:22px;
  color:var(--primary)
}

.official-green .friend-application-form {
  padding:30px 32px;
  border:1px solid var(--line);
  border-radius:var(--radius-panel)
}

.friend-application-form .lele-feedback-head h2 {
  font-size:23px;
  color:var(--ink)
}

.friend-application-form .lele-feedback-head p {
  color:#71817b
}

.friend-application-form .lele-feedback-fields>.lele-form-item {
  grid-column:auto
}

.friend-application-form .lele-feedback-fields>.friend-field-wide {
  grid-column:1/-1
}

.friend-application-form .lele-textarea {
  height:88px;
  min-height:88px
}

.friend-application-form .lele-feedback-captcha .lele-input {
  flex:none;
  max-width:240px
}

.friend-application-note {
  font-size:13px;
  color:var(--muted);
  line-height:1.7;
  margin:16px 0 0
}

@media(max-width:850px) {
  .friend-application-layout {
    grid-template-columns:1fr;
    gap:18px
  }
  .friend-application-guide {
    padding:8px 0
  }
  .friend-application-steps {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px
  }
  .friend-application-steps li {
    padding:0 0 0 38px
  }
}

@media(max-width:600px) {
  .friend-application-layout {
    margin-top:20px
  }
  .official-green .friend-application-form {
    padding:24px 18px
  }
  .friend-application-steps {
    grid-template-columns:1fr;
    gap:0
  }
  .friend-application-form .lele-feedback-captcha .lele-input {
    width:100%;
    max-width:none
  }
  .friend-application-form .lele-feedback-fields>.lele-form-item {
    grid-column:1/-1
  }
  .friend-site-card {
    padding:18px
  }
}

.friend-application-form .market-select {
  width:100%;
  font-size:14px
}

.friend-application-form .market-select-trigger {
  width:100%;
  min-width:0;
  height:44px;
  border-color:#cddbd6;
  border-radius:5px;
  padding:9px 12px;
  font-weight:400
}

.friend-application-form .market-select-trigger:focus-visible,.friend-application-form .market-select-trigger[aria-expanded=true] {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(20,135,111,.11)
}

.friend-application-form .market-select-options {
  width:100%;
  min-width:0;
  max-width:100%;
  border-color:#dce9e4
}

.friend-application-form select[hidden] {
  display:none!important
}

/* navigation */
/* Shared horizontal category navigation: product, templates, FAQ and articles. */
/* Public section headers share one banner and one breadcrumb baseline. */
.official-overlay #main:not(.official-member-content)>.page-hero {
  height:136px;
  min-height:0
}

.official-overlay #main:not(.official-member-content)>.page-content {
  padding-top:0
}

#main>.page-content .page-breadcrumb {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 10px;
  min-width:0;
  margin:0;
  padding:20px 0;
  font-size:13px;
  line-height:20px;
  color:#6b7c75
}

#main>.page-content .page-breadcrumb>[aria-current] {
  min-width:0;
  overflow-wrap:anywhere
}

#main>.page-content :is(.market-toolbar,.template-toolbar,.docs-toolbar) {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,740px);
  align-items:center;
  gap:24px;
  min-height:60px;
  margin:0;
  padding:10px 0
}

#main>.page-content .template-toolbar {
  grid-template-columns:minmax(0,1fr) minmax(0,460px)
}

#main>.page-content .docs-toolbar {
  grid-template-columns:minmax(0,1fr) minmax(0,440px)
}

#main>.page-content :is(.market-toolbar,.template-toolbar,.docs-toolbar)>.page-breadcrumb {
  padding:0
}

#main>.page-content :is(.template-search,.docs-search) {
  width:100%;
  margin:0
}

#main>.page-content :is(.template-search,.docs-search) :is(input:not([type=hidden]),.button,button) {
  height:40px;
  min-height:40px;
  padding:8px 12px;
  line-height:22px
}

@media(max-width:1150px) {
  #main>.page-content :is(.market-toolbar,.template-toolbar,.docs-toolbar) {
    grid-template-columns:minmax(0,1fr);
    gap:0;
    padding:0;
    margin-bottom:20px
  }
  #main>.page-content :is(.market-toolbar,.template-toolbar,.docs-toolbar)>.page-breadcrumb {
    padding:20px 0
  }
  #main>.page-content .template-toolbar:not(:has(.template-search)) {
    margin-bottom:0
  }
}

@media(max-width:850px) {
  .official-overlay #main:not(.official-member-content)>.page-hero {
    height:104px
  }
}

.section-tabs-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 0 18px;
  margin:0 0 26px;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  font-size:13px;
  color:var(--muted)
}

.section-tabs {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
  font-size:13px;
  font-weight:400;
  color:var(--muted)
}

.section-tabs>a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 14px;
  border:0;
  border-radius:var(--radius-control);
  color:var(--muted);
  font:inherit;
  line-height:inherit;
  text-decoration:none;
  white-space:nowrap
}

.section-tabs>a:hover,.section-tabs>a[aria-current] {
  background:#eaf6f2;
  color:var(--primary)
}

.section-tabs>a:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:2px
}

@media(max-width:700px) {
  .section-tabs-bar {
    align-items:flex-start
  }
  .section-tabs {
    gap:4px
  }
  .section-tabs>a {
    padding:6px 9px
  }
}

/* resources */
/* Shared typography, controls and reading styles. */
.resources-content {
  padding-bottom:64px
}

.resources-content .page-breadcrumb>a {
  flex-shrink:0
}

.resources-content .page-breadcrumb>span[aria-current] {
  min-width:0;
  overflow-wrap:anywhere
}

.resource-eyebrow {
  color:var(--primary);
  font-size:12px;
  letter-spacing:.1em;
  font-weight:600;
  margin:0 0 10px
}

.resource-meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.8
}

.resource-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--primary);
  font-size:14px
}

.resource-link:hover {
  text-decoration:underline;
  text-underline-offset:4px
}

.resource-search {
  display:flex;
  gap:10px;
  width:100%;
  margin:0
}

.resource-search input {
  min-width:0;
  flex:1;
  height:44px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:#fff;
  font:inherit;
  font-size:14px
}

.resource-search .button {
  min-width:80px;
  height:44px;
  min-height:44px;
  font-size:14px;
  padding:9px 18px
}

.resource-search {
  align-items:center
}

.resource-search input,.resource-search .button {
  box-sizing:border-box;
  margin:0;
  line-height:22px
}

.resource-search input:focus,.resource-search input:focus-visible {
  outline:none;
  outline-offset:0;
  box-shadow:none;
  border-color:#8ba99d
}

.resource-result-meta {
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:var(--muted);
  font-size:13px;
  margin-bottom:16px
}

.resource-result-meta strong {
  font-weight:500;
  color:var(--ink);
  margin-left:6px
}

.resource-pagination {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin:30px 0 0
}

.resource-pagination a {
  padding:6px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  font-size:14px
}

.resource-pagination a[aria-current] {
  background:var(--primary);
  border-color:var(--primary);
  color:#fff
}

.resource-empty {
  text-align:center;
  padding:54px 24px;
  border:1px solid var(--line);
  border-radius:var(--radius-panel)
}

.resource-empty>i {
  font-size:34px;
  color:var(--primary)
}

.resource-empty h2 {
  font-size:22px;
  margin:12px 0
}

.resource-empty p {
  font-size:14px;
  color:var(--muted)
}

.resource-empty a {
  display:inline-block;
  margin-top:18px;
  color:var(--primary);
  font-size:14px
}

.resource-body {
  font-size:16px;
  line-height:1.95;
  color:#43574f;
  overflow-wrap:anywhere
}

.resource-body p {
  margin:0 0 18px
}

.resource-body p:last-child {
  margin-bottom:0
}

.resource-body h2 {
  font-size:24px;
  line-height:1.5;
  margin:34px 0 16px;
  color:var(--ink);
  scroll-margin-top:28px
}

.resource-body h3 {
  font-size:20px;
  line-height:1.5;
  margin:26px 0 12px;
  color:var(--ink);
  scroll-margin-top:28px
}

.resource-body img {
  max-width:100%;
  height:auto
}

.resource-body pre {
  max-width:100%;
  overflow:auto;
  padding:20px;
  background:var(--mint);
  border-radius:var(--radius-control)
}

.resource-body table {
  display:block;
  max-width:100%;
  overflow:auto;
  border-collapse:collapse
}

.resource-body th,.resource-body td {
  padding:10px;
  border:1px solid var(--line)
}

.resource-body a {
  color:var(--primary);
  text-decoration:underline;
  text-underline-offset:3px
}

.resource-body ul,.resource-body ol {
  padding-left:1.7em;
  margin:16px 0 22px
}

.resource-body li+li {
  margin-top:8px
}

.resource-body blockquote {
  margin:20px 0;
  border-left:3px solid #73b895;
  padding:12px 20px;
  background:var(--mint)
}

/* FAQ: searchable answers, native disclosure rows and support routes. */
.faq-intro {
  padding:28px 24px 30px;
  margin-bottom:32px;
  text-align:center;
  background:var(--mint);
  border-radius:var(--radius-panel)
}

.faq-intro .resource-search {
  max-width:620px;
  margin:22px auto 0
}

.faq-intro .resource-filters {
  margin:22px 0 0
}

.faq-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 270px;
  gap:36px;
  align-items:start
}

.faq-questions {
  min-width:0
}

.faq-accordion {
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  overflow:hidden
}

.faq-item+.faq-item {
  border-top:1px solid var(--line)
}

.faq-item summary {
  display:flex;
  align-items:center;
  gap:14px;
  list-style:none;
  cursor:pointer;
  padding:20px 24px
}

.faq-item summary::-webkit-details-marker {
  display:none
}

.faq-item summary:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:-3px
}

.faq-question-mark {
  color:var(--primary);
  font-size:16px;
  font-weight:700;
  flex:0 0 20px
}

.faq-item-title {
  flex:1;
  min-width:0;
  overflow-wrap:anywhere
}

.faq-item summary>i {
  font-size:20px;
  color:var(--muted);
  flex-shrink:0
}

.faq-item[open] summary {
  background:#f5faf8
}

.faq-item[open] summary>i {
  transform:rotate(45deg);
  color:var(--primary)
}

.faq-item-answer {
  padding:4px 24px 24px 58px
}

.faq-item-answer .resource-body {
  font-size:14px;
  line-height:1.9;
  padding-top:16px
}

.faq-item-answer .resource-body h2 {
  font-size:20px
}

.faq-item-answer>.resource-link {
  margin-top:18px;
  font-size:13px
}

.faq-support {
  padding:26px 24px;
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  background:#f8fbfa;
  margin-top:37px
}

.faq-support>i {
  font-size:26px;
  color:var(--primary)
}

.faq-support h2 {
  font-size:18px;
  line-height:1.6;
  margin:12px 0
}

.faq-support p {
  font-size:13px;
  line-height:1.9;
  color:var(--muted);
  margin:0 0 16px
}

.faq-support>a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:13px 0;
  border-top:1px solid var(--line);
  font-size:14px;
  color:var(--primary)
}

.faq-detail {
  width:100%;
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  overflow:hidden
}

.faq-question,.faq-answer {
  display:flex;
  gap:24px;
  padding:34px 40px
}

.faq-question {
  background:var(--mint);
  border-bottom:1px solid var(--line);
  align-items:flex-start
}

.faq-question>div,.faq-answer-content {
  min-width:0;
  flex:1
}

.faq-question h1 {
  font-size:30px;
  line-height:1.5;
  margin:0 0 14px;
  overflow-wrap:anywhere;
  color:var(--ink)
}

.faq-letter {
  display:grid;
  place-items:center;
  flex:0 0 40px;
  height:40px;
  border-radius:var(--radius-control);
  background:var(--primary);
  color:white;
  font-size:23px;
  font-weight:600
}

.faq-letter-answer {
  background:#eaf5ef;
  color:var(--primary)
}

.faq-answer-content>h2 {
  font-size:18px;
  margin:5px 0 18px;
  color:var(--primary)
}

.faq-detail-footer {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  margin:0 40px;
  padding:22px 0;
  border-top:1px solid var(--line)
}

/* Articles: editorial cards and long-form reading with a table of contents. */
.editorial-intro {
  text-align:center;
  margin:30px 0 32px;
  padding-bottom:30px;
  border-bottom:1px solid var(--line)
}

.editorial-intro h1 {
  font-size:32px;
  line-height:1.4;
  margin:0 0 12px;
  color:var(--ink)
}

.editorial-intro>p {
  font-size:15px;
  color:var(--muted);
  margin:0
}

.editorial-search {
  max-width:620px;
  margin:24px auto 0
}

.editorial-list {
  border-top:1px solid var(--line)
}

.editorial-row {
  display:flex;
  align-items:center;
  gap:28px;
  padding:28px 0;
  border-bottom:1px solid var(--line)
}

.editorial-cover {
  display:block;
  flex:0 0 240px;
  overflow:hidden;
  border-radius:var(--radius-control);
  background:var(--mint)
}

.editorial-cover img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:8/5;
  object-fit:cover
}

.editorial-copy {
  flex:1;
  min-width:0
}

.editorial-copy h2 {
  margin:0 0 12px;
  overflow-wrap:anywhere
}

.editorial-copy h2 a:hover {
  color:var(--primary)
}

.editorial-copy>p {
  font-size:15px;
  line-height:1.85;
  color:var(--muted);
  margin:0 0 20px
}

.editorial-row-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px
}

.editorial-row-footer>.resource-link {
  font-size:13px
}

.editorial-header {
  padding:22px 0 30px;
  border-bottom:1px solid var(--line)
}

.editorial-header h1 {
  font-size:36px;
  line-height:1.5;
  max-width:1000px;
  margin:0 0 18px;
  color:var(--ink);
  overflow-wrap:anywhere
}

.editorial-standfirst {
  font-size:17px;
  line-height:1.9;
  color:#63766d;
  max-width:960px;
  margin:22px 0 0;
  padding-left:18px;
  border-left:3px solid #a6d6c4
}

.editorial-reading {
  display:grid;
  grid-template-columns:minmax(0,1fr) 230px;
  gap:64px;
  padding-top:32px
}

.editorial-reading.without-toc {
  grid-template-columns:minmax(0,1fr)
}

.editorial-main,.editorial-body {
  min-width:0
}

.editorial-main>.lele-comment {
  width:100%;
  max-width:none;
  margin:24px 0 0
}

.editorial-body>h2:first-child {
  margin-top:0
}

.editorial-toc {
  align-self:start;
  position:sticky;
  top:24px;
  border-left:1px solid var(--line);
  padding-left:24px;
  font-size:13px
}

.editorial-toc h2 {
  font-size:14px;
  font-weight:600;
  margin:0 0 15px;
  color:var(--ink)
}

.editorial-toc nav a {
  display:block;
  padding:7px 0;
  color:var(--muted);
  line-height:1.8;
  overflow-wrap:anywhere
}

.editorial-toc nav a:hover {
  color:var(--primary)
}

.editorial-toc nav a.is-child {
  padding-left:12px
}

.editorial-toc>.resource-link {
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:18px;
  font-size:13px
}

.editorial-footer {
  display:flex;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top:24px;
  margin-top:40px
}

@media(max-width:1000px) {
  .faq-layout {
    grid-template-columns:minmax(0,1fr) 230px;
    gap:24px
  }
  .faq-support {
    padding:22px 18px
  }
  .editorial-reading {
    gap:32px;
    grid-template-columns:minmax(0,1fr) 200px
  }
}

@media(max-width:760px) {
  .resources-content {
    padding-bottom:40px
  }
  .resource-body {
    font-size:15px;
    line-height:1.9
  }
  .resource-body h2 {
    font-size:21px
  }
  .resource-body h3 {
    font-size:18px
  }
  .faq-intro {
    padding:24px 18px;
    margin-bottom:26px
  }
  .faq-layout {
    grid-template-columns:1fr;
    gap:24px
  }
  .faq-support {
    margin-top:0
  }
  .faq-item summary {
    padding:17px 16px;
    gap:10px
  }
  .faq-item-answer {
    padding:0 18px 20px
  }
  .faq-question,.faq-answer {
    padding:24px 20px;
    gap:14px
  }
  .faq-question h1 {
    font-size:24px
  }
  .faq-letter {
    flex-basis:28px;
    height:28px;
    font-size:18px
  }
  .faq-answer {
    display:block
  }
  .faq-letter-answer {
    display:none
  }
  .faq-answer-content>h2 {
    margin-top:0
  }
  .faq-detail-footer {
    margin:0 20px
  }
  .faq-detail-footer .resource-link {
    font-size:13px
  }
  .editorial-intro {
    margin-top:24px
  }
  .editorial-search {
    margin-top:22px
  }
  .editorial-row {
    gap:20px;
    padding:24px 0
  }
  .editorial-cover {
    flex-basis:160px
  }
  .editorial-copy>p {
    font-size:14px
  }
  .editorial-intro h1 {
    font-size:28px
  }
  .editorial-intro>p {
    font-size:14px
  }
  .editorial-header {
    padding-top:12px
  }
  .editorial-header h1 {
    font-size:27px
  }
  .editorial-standfirst {
    font-size:15px;
    padding-left:14px
  }
  .editorial-reading {
    grid-template-columns:1fr;
    gap:24px;
    padding-top:24px
  }
  .editorial-toc {
    position:static;
    order:-1;
    border-left:0;
    padding:18px 20px;
    border:1px solid var(--line);
    border-radius:var(--radius-control);
    background:var(--mint)
  }
  .editorial-toc nav a {
    padding:4px 0
  }
  .editorial-toc>.resource-link {
    display:none
  }
  .resource-result-meta {
    font-size:12px;
    gap:10px
  }
  .resource-search {
    gap:8px
  }
  .resource-search .button {
    min-width:70px;
    padding-inline:14px
  }
}

@media(max-width:520px) {
  .editorial-row {
    display:block
  }
  .editorial-cover {
    width:100%;
    margin-bottom:18px
  }
}

.resources-content>.faq-detail~.lele-comment {
  width:100%;
  max-width:none;
  margin:24px 0 0
}

/* typography */
/* Shared content typography. Page styles own layout; these roles own text. */
.official-green {
  --content-title-size:32px;
  --content-section-size:22px;
  --content-item-size:18px;
  --content-lead-size:15px;
  --content-label-size:13px;
  --content-heading-gap:10px;
}

/* Page titles, including reading and product detail pages. */
.official-green .page-content :is(.about-intro h1,.editorial-intro h1,.faq-intro h1,.help-heading h1,.license-query-intro h2,.doc-article-header h1,.doc-main>.doc-article-header h1,.editorial-header h1,.faq-question h1,.extension-title-row h1,.template-detail-head h1) {
  font-family:inherit;
  font-size:var(--content-title-size);
  font-weight:700;
  line-height:1.4;
  letter-spacing:0;
  color:var(--ink);
  margin:0 0 var(--content-heading-gap);
  overflow-wrap:anywhere;
}

/* Short descriptions below page titles. */
.official-green .page-content :is(.editorial-intro>p,.faq-intro>p:not(.resource-eyebrow),.help-heading>p,.license-query-intro>p,.doc-article-header>p:not(.doc-eyebrow),.about-description,.extension-overview-copy>p,.template-detail-head>div>p) {
  font-family:inherit;
  font-size:var(--content-lead-size);
  font-weight:400;
  line-height:1.65;
  letter-spacing:0;
  color:var(--muted);
  margin-top:0;
}

.official-green .page-content :is(.editorial-intro>p,.faq-intro>p:not(.resource-eyebrow),.help-heading>p,.license-query-intro>p,.doc-article-header>p:not(.doc-eyebrow)) {
  margin-bottom:0;
}

/* Small labels above titles. List categories keep their compact spacing. */
.official-green .page-content :is(.about-eyebrow,.resource-eyebrow,.doc-article-header>.doc-eyebrow,.license-kicker,.template-detail-category) {
  font-family:inherit;
  font-size:var(--content-label-size);
  font-weight:600;
  line-height:1.65;
  letter-spacing:.1em;
  color:var(--primary);
  margin:0 0 var(--content-heading-gap);
}

.official-green .page-content .license-kicker {
  display:inline-flex;
  align-items:center;
  gap:8px
}

.official-green .page-content .license-kicker i {
  font-size:16px;
  line-height:1;
  letter-spacing:0
}

/* Section headings: updates, downloads, support and product information. */
.official-green .page-content :is(.about-section-heading h2,.help-section-heading h2,.help-intro h2,.help-channels h2,.help-page .lele-feedback-head h2,.faq-support h2,.faq-answer-content>h2,.extension-detail-panel h2,.template-description h2,.template-detail-sidebar h2,.template-empty h2,.resource-empty h2,.doc-empty h2) {
  font-family:inherit;
  font-size:var(--content-section-size);
  font-weight:600;
  line-height:1.5;
  letter-spacing:0;
  color:var(--ink);
  overflow-wrap:anywhere;
}

/* Item titles: articles, questions, documents, extensions and templates. */
.official-green .home-extension-grid .market-card .market-card-heading h2,
.official-green .page-content :is(.faq-item-title,.editorial-copy h2,.doc-result h2,.market-card .market-card-heading h2,.template-card-copy h2,.license-policy-grid h2,.about-download h3) {
  font-family:inherit;
  font-size:var(--content-item-size);
  font-weight:600;
  line-height:1.6;
  letter-spacing:0;
  color:var(--ink);
  overflow-wrap:anywhere;
}

@media(max-width:760px) {
  .official-green {
    --content-title-size:27px;
    --content-section-size:20px;
    --content-item-size:17px;
    --content-lead-size:15px;
  }
}

/* catalog-layout */
/* One section-page structure: breadcrumb, heading, controls, then content. */
.official-green #main>.page-content>.catalog-heading {
  display:block;
  text-align:center;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  padding:12px 0 24px;
  margin:0 0 24px;
}

.official-green .page-content .catalog-heading h1 {
  font-family:inherit;
  font-size:var(--content-title-size);
  font-weight:700;
  line-height:1.4;
  letter-spacing:0;
  color:var(--ink);
  margin:0 0 10px;
  overflow-wrap:anywhere;
}

.official-green .page-content .catalog-heading>p {
  max-width:780px;
  font-size:var(--content-lead-size);
  font-weight:400;
  line-height:1.65;
  letter-spacing:0;
  color:var(--muted);
  margin:0 auto;
}

.official-green #main>.page-content .catalog-tools {
  margin:0 0 24px;
  padding:30px 36px;
  text-align:left;
  background:#f4faf7;
  border:1px solid #deebe6;
  border-radius:var(--radius-panel);
}

.official-green #main>.page-content .catalog-tools :is(.resource-search,.docs-search,.template-search) {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  max-width:620px;
  margin:0 auto;
}

.official-green #main>.page-content .catalog-tools :is(.market-query) {
  display:flex;
  gap:10px;
  flex:1 1 420px;
  min-width:0;
  max-width:620px
}

.official-green #main>.page-content .catalog-tools .market-search {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:16px 24px;
  margin:0
}

.official-green #main>.page-content .catalog-tools .market-tools {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin:0
}

.official-green #main>.page-content .catalog-tools input:not([type=hidden]) {
  flex:1;
  min-width:0;
  width:auto;
  height:44px;
  padding:10px 14px;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:14px;
  line-height:22px;
  margin:0;
}

.official-green #main>.page-content .catalog-tools .button {
  flex-shrink:0;
  height:44px;
  min-height:44px;
  padding:10px 18px;
  box-sizing:border-box;
  font-size:14px;
  line-height:22px;
  white-space:nowrap;
  margin:0;
  border-radius:var(--radius-control);
}

.official-green #main>.page-content .catalog-tools input:not([type=hidden]):focus {
  outline:none;
  box-shadow:none;
  border-color:var(--primary)
}

.official-green #main>.page-content .catalog-tools :is(.resource-filters,.template-filters) {
  margin:20px 0 0;
  padding-bottom:0;
  border-bottom:0;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap
}

.official-green #main>.page-content .catalog-tools .template-filters .section-tabs {
  justify-content:center
}

.official-green .catalog-result-meta {
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
  margin:0 0 16px
}

.authorization-page .license-query-layout {
  text-align:left
}

.authorization-page .license-query-form {
  margin-top:0
}

@media(max-width:760px) {
  .official-green #main>.page-content>.catalog-heading {
    padding:8px 0 20px;
    margin-bottom:20px
  }
  .official-green #main>.page-content .catalog-tools {
    margin-bottom:20px;
    padding:24px 20px
  }
  .official-green #main>.page-content .catalog-tools .market-search {
    display:block
  }
  .official-green #main>.page-content .catalog-tools .market-tools {
    margin-top:12px;
    gap:8px
  }
  .official-green #main>.page-content .catalog-tools .market-query {
    margin-inline:auto
  }
  .official-green #main>.page-content .catalog-tools .market-tools .count {
    margin-left:0
  }
  .official-green #main>.page-content .catalog-tools :is(.resource-search,.docs-search,.template-search,.market-query) {
    gap:8px
  }
  .official-green #main>.page-content .catalog-tools .button {
    padding-inline:14px
  }
}

/* Public detail polish, 2026-10-10. */
.official-green #main>.page-content {
  --muted:#536660;
  --primary:#08776b;
  --primary-hover:#075f56;
  font-size:15px;
  line-height:1.8;
}
.official-green .page-content :is(.template-card-copy>p,.editorial-copy>p,.doc-result>p,.help-intro>p,.license-policy-grid p,.template-info-description) {
  font-size:15px;
  line-height:1.8;
  color:var(--muted);
}
.official-green .page-content .template-card-meta { font-size:13px; gap:8px 12px; margin-top:18px; }
.official-green .page-content :is(.resource-result-meta,.doc-meta) { font-size:13px; }
.official-green .documentation .doc-richtext { font-size:16px; line-height:1.9; }
.official-green .documentation .doc-richtext pre code { font-size:inherit; }
.official-green .market-card .market-card-description,
.official-home .home-extension-grid .market-card .market-card-description {
  font-size:14px;
  line-height:24px;
  min-height:0;
  margin-bottom:12px;
  color:#536660;
}
.official-green .market-card .market-card-header { margin-bottom:16px; }
.official-green .market-card .market-card-footer { padding-top:12px; }
.official-green .market-card :is(.market-version,.market-category,.market-billing) { font-size:13px; }
.official-green .market-card .market-detail-toggle { font-size:14px; }
.official-home .home-resources .home-resource-list a { align-items:center; }
.official-home .home-resources .home-resource-list a>.official-inline-icon {
  display:block;
  flex:0 0 16px;
  width:16px;
  height:16px;
  align-self:center;
  transform:translateY(1px); /* Optical alignment with Chinese glyphs. */
}
.official-home .home-resources .home-resource-list time { padding-top:0; line-height:1.8; transform:translateY(1px); }
.home-template-audience { font-size:15px; line-height:1.8; font-weight:600; color:#253f35; margin:0 0 10px; }
.home-template-feature-copy h3 { margin-bottom:10px; }
@media(min-width:851px) {
  .official-home .home-hero { min-height:570px; padding-top:calc(var(--home-header-height,76px) + 64px); padding-bottom:72px; }
}

/* Customer and partner positioning: existing product visuals, clearer service entry. */
.official-green .site-header .account-toggle,.official-green .site-header .guest-account {
 width:auto; flex:0 0 auto; height:42px; padding:5px 12px; gap:8px;
 border:1px solid #d2e2db; border-radius:7px; background:#f0f8f4; color:#08776b; box-shadow:none;
 font-family:inherit; font-size:14px; font-weight:500; text-decoration:none;
}
.official-green .site-header .account-toggle:before,.official-green .site-header .guest-account:before { display:none; }
.official-green .site-header .account-toggle img { width:28px; height:28px; }
.official-green .site-header .guest-account-icon { width:22px; height:22px; }
.official-overlay .site-header .account-toggle,.official-overlay .site-header .guest-account { background:#ffffff12; color:#fff; border-color:#ffffff65; }
.account-entry-label { white-space:nowrap; line-height:1.5; }
.official-green .site-header nav a { font-size:15px; }
.help-audiences { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:28px 0; }
.help-audiences article { padding:24px 28px; border:1px solid #deebe6; border-radius:8px; background:#f4faf7; }
.help-audiences h2 { font-size:22px; line-height:1.5; margin:0 0 12px; }
.help-audiences p { font-size:15px; line-height:1.8; color:#536660; margin:0 0 14px; }
.doc-library-links { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 20px; }
.doc-library-links a { display:inline-flex; align-items:center; min-height:42px; padding:8px 15px; font-size:14px; line-height:1.8; border:1px solid #deebe6; border-radius:6px; color:#08776b; }
.doc-library-links a[aria-current] { background:#eaf6ef; }
.auth-qualification-note { font-size:13px; line-height:1.8; color:#536660; margin:14px 0 18px; }
@media(min-width:851px) and (max-width:1100px) {
 .official-green .header-inner { gap:16px; }
 .official-green .site-header nav { gap:6px; }
 .official-green .site-header nav a { padding-inline:4px; font-size:14px; }
 .official-green .site-header .account-identity strong { font-size:14px; }
 .official-green .site-header .brand { font-size:24px; gap:8px; }
 .official-green .site-header .brand .iconfont { font-size:32px; }
 .official-green .site-header .account-toggle,.official-green .site-header .guest-account { font-size:13px; padding-inline:8px; }
}
@media(max-width:850px) {
 .account-entry-long { display:none; }
 .official-green .site-header .account-toggle,.official-green .site-header .guest-account { width:auto; flex-basis:auto; height:38px; padding:4px 8px; gap:6px; font-size:13px; }
 .official-green .site-header .account-toggle img { width:26px; height:26px; }
 .help-audiences { grid-template-columns:1fr; gap:16px; }
 .help-audiences article { padding:20px; }
}


/* Shared official navigation: full-width plain white header, text links and account control. */
.official-green { --home-header-height:76px; }
.official-green .site-header-refined { width:100%; height:var(--home-header-height); padding:0; background:#fff; background-image:none; border:0; border-bottom:1px solid #e1e9e6; border-radius:0; box-shadow:none; }
.official-green .site-header-refined .header-inner { height:100%; padding:0; position:relative; gap:18px; border-radius:0; background:transparent; }
.official-green .site-header-refined .brand { color:#087f7c; margin-right:auto; font-size:28px; gap:10px; }
.official-green .site-header-refined .brand .iconfont { color:#087f7c; font-size:36px; }
.official-green .site-header-refined nav { flex:0 0 auto; gap:12px; }
.official-green .site-header-refined nav a { min-height:40px; padding:8px 9px; color:#087f7c; font-size:16px; line-height:24px; font-weight:500; border-radius:6px; }
.official-green .site-header-refined nav a:hover,.official-green .site-header-refined nav a[aria-current] { color:#087f7c; background:#eaf5f1; }
.official-green .site-header-refined :is(.account-toggle,.guest-account) { display:inline-flex; align-items:center; justify-content:center; width:44px; min-width:44px; height:44px; padding:0; gap:0; border:0; border-radius:50%; background:transparent; color:#087f7c; box-shadow:none; }
.site-header-refined .account-entry-label { display:none; }
.official-green .site-header-refined .guest-account-icon { width:26px; height:26px; display:block; }
.site-header-refined .guest-account-icon > :is(i,.official-inline-icon) { display:block; width:100%; height:100%; font-size:26px; line-height:1; }
.official-green .site-header-refined .account-toggle img { width:30px; height:30px; }
.official-green .site-header-refined :is(.account-toggle,.guest-account):hover,.official-green .site-header-refined .account-toggle[aria-expanded=true] { background:#eaf5f1; }
.official-green .site-header-refined :is(nav a,.account-toggle,.guest-account,.menu-toggle):focus-visible { outline:2px solid #087f7c; outline-offset:3px; }
.site-header-refined .account-panel { right:0; }
.official-green .docs-masthead { background:#fff; }
@media(min-width:851px) and (max-width:1100px) {
 .official-green .site-header-refined .header-inner { gap:12px; }
 .official-green .site-header-refined .brand { font-size:24px; }
 .official-green .site-header-refined nav { gap:5px; }
 .official-green .site-header-refined nav a { font-size:15px; padding-inline:7px; }
}
@media(max-width:850px) {
 .official-green { --home-header-height:74px; }
 .official-green .site-header-refined { padding:0; }
 .official-green .site-header-refined .header-inner { height:100%; padding:0; position:static; gap:8px; border-radius:0; }
 .official-green .site-header-refined .brand { font-size:23px; gap:7px; }
 .official-green .site-header-refined .brand .iconfont { font-size:31px; }
 .official-green .site-header-refined .menu-toggle { width:44px; height:44px; color:#087f7c; }
 .official-green .site-header-refined nav { top:100%; left:0; right:0; padding:10px 20px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:#fff; }
 .official-green .site-header-refined nav a { min-height:44px; font-size:15px; color:var(--ink); padding:10px 12px; }
 .official-green .site-header-refined nav a:hover,.official-green .site-header-refined nav a[aria-current] { color:var(--primary); background:var(--mint); }
 .official-green .site-header-refined nav a:focus-visible { outline-color:var(--primary); }
 .site-header-refined .header-account { position:relative; }
 .site-header-refined .account-panel { top:calc(100% + 14px); right:-52px; width:min(360px,calc(100vw - 48px)); max-width:none; }
 .site-header-refined .account-panel:before { right:74px; }
}

/* Homepage navigation shares the hero image; no independent background layer. */
.official-home .site-header-refined {
 background:transparent; background-image:none; border-bottom:1px solid #ffffff30;
}
.official-home .site-header-refined :is(.brand,.brand .iconfont,.account-toggle,.guest-account,.menu-toggle,.header-search) { color:#fff; }
.official-home .site-header-refined nav a { position:relative; border-radius:0; background:transparent; color:#fff; }
.official-home .site-header-refined nav a:hover,.official-home .site-header-refined nav a[aria-current] { background:transparent; color:#fff; }
.official-home .site-header-refined nav a[aria-current]:after {
 content:""; display:block; position:absolute; left:9px; right:9px; bottom:0; width:auto; height:3px; margin:0; border-radius:2px; background:currentColor; transform:none;
}
.official-home .site-header-refined :is(.account-toggle,.guest-account) { width:auto; min-width:136px; padding:0 13px; gap:9px; border:1px solid #ffffffcc; border-radius:6px; }
.official-home .site-header-refined .account-entry-label { display:inline; font-size:15px; line-height:24px; }
.official-home .site-header-refined :is(.account-toggle,.guest-account):hover,.official-home .site-header-refined .account-toggle[aria-expanded=true] { background:#ffffff12; }
.official-home .site-header-refined :is(nav a,.account-toggle,.guest-account,.menu-toggle,.header-search):focus-visible { outline-color:#fff; }
.header-search { display:flex; align-items:center; justify-content:center; position:relative; z-index:1; width:44px; height:44px; margin-left:auto; padding:0; border:0; border-radius:6px; background:transparent; font-size:24px; cursor:pointer; }
.header-search .official-inline-icon { width:24px; height:24px; }
@media(max-width:850px) {
 .official-green .site-header-refined .header-search-shell,.official-home .site-header-refined .account-entry-label { display:none; }
 .official-home .site-header-refined :is(.account-toggle,.guest-account) { width:44px; min-width:44px; padding:0; border:0; border-radius:50%; }
 .official-home .site-header-refined nav a { color:var(--ink); border-radius:6px; }
 .official-home .site-header-refined nav a:hover,.official-home .site-header-refined nav a[aria-current] { color:var(--primary); background:var(--mint); }
 .official-home .site-header-refined nav a[aria-current]:after { display:none; }
 .official-home .site-header-refined nav a:focus-visible { outline-color:var(--primary); }
}

/* Header and body use the same .container; selected links use an underline only. */
.official-green .site-header-refined nav a { position:relative; }
.official-green .site-header-refined nav a:hover,.official-green .site-header-refined nav a[aria-current],
.official-home .site-header-refined nav a:hover,.official-home .site-header-refined nav a[aria-current] { background:transparent; }
.official-green .site-header-refined nav a[aria-current]:after {
 content:""; display:block; position:absolute; left:9px; right:9px; bottom:0; width:auto; height:3px; margin:0; border-radius:2px; background:currentColor; transform:none;
}
.header-search-shell { position:relative; z-index:2; flex:0 0 52px; width:52px; height:44px; }
.header-search-shell:before { content:""; position:absolute; left:0; top:8px; bottom:8px; border-left:1px solid #ffffff55; }
.header-search-panel { display:none; position:absolute; right:0; top:4px; width:260px; height:36px; margin:0; padding:0 44px 0 14px; background:#fff; border:1px solid #d8e6e1; border-radius:6px; box-shadow:none; }
.header-search-panel[hidden] { display:none; }
.header-search-panel input[type=search] { display:block; width:100%; height:34px; min-width:0; margin:0; padding:0; border:0; border-radius:0; background:transparent; color:#092830; font-family:inherit; font-size:14px; line-height:34px; outline:none; box-shadow:none; }
.header-search-panel:focus-within { outline:none; border-color:#abcac0; }
.header-search-panel input::placeholder { color:#667b75; opacity:1; }
.official-home .site-header-refined .is-search-open .header-search { color:#087f7c; }
.header-inner.is-search-open .header-search .official-inline-icon { width:22px; height:22px; }
.header-inner.is-search-open .header-search-shell:before { display:none; }
@media(min-width:851px) and (max-width:1100px) {
 .official-home .site-header-refined .account-entry-label { display:none; }
 .official-home .site-header-refined :is(.account-toggle,.guest-account) { width:44px; min-width:44px; padding:0; border:0; border-radius:50%; }
 .header-search-shell { flex-basis:44px; width:44px; }
}
@media(max-width:850px) {
 .official-green .site-header-refined nav a[aria-current]:after { left:12px; right:auto; bottom:4px; width:28px; height:2px; }
}
/* Override legacy hover selectors, including current-menu hover. */
.official-green .site-header.site-header-refined nav a:hover,
.official-green .site-header.site-header-refined nav a[aria-current] { background:transparent; background-image:none; }
.official-green .site-header.site-header-refined nav a:hover { color:var(--primary); }
.official-home .site-header.site-header-refined nav a:hover { color:#fff; }
@media(max-width:850px) {
 .official-home .site-header.site-header-refined nav a:hover { color:var(--primary); }
}
@media(prefers-reduced-motion:no-preference) {
 .header-search-panel:not([hidden]) { animation:header-search-expand .16s ease-out; }
}
@keyframes header-search-expand {
 from { clip-path:inset(0 0 0 100%); }
 to { clip-path:inset(0); }
}

/* Search overlays left from its fixed button; header navigation never reflows. */
@media(min-width:851px) and (max-width:1100px) {
 .header-search-panel { width:240px; }
}

/* Signed-in customers use the circular portrait entry from the supplied reference. */
.official-green .site-header.site-header-refined .account-toggle {
 width:44px; min-width:44px; height:44px; padding:2px; gap:0;
 border:2px solid #fff; border-radius:50%; background:#fff;
 box-shadow:0 0 0 4px #087f7c12;
}
.official-green .site-header.site-header-refined .account-toggle img {
 display:block; width:36px; height:36px; border-radius:50%; object-fit:cover;
}
.official-green .site-header.site-header-refined .account-toggle .account-entry-label { display:none; }
.official-home .site-header.site-header-refined .account-toggle { box-shadow:0 0 0 4px #ffffff30; }
@media(max-width:850px) {
 .official-green .site-header.site-header-refined .account-toggle { width:44px; min-width:44px; height:44px; box-shadow:0 0 0 3px #087f7c12; }
 .official-green .site-header.site-header-refined .account-toggle img { width:36px; height:36px; }
 .official-home .site-header.site-header-refined .account-toggle { box-shadow:0 0 0 3px #ffffff30; }
}

/* Mouse hover reveals only the absolutely positioned field, just like the reference. */
@media(min-width:851px) {
 .header-search-shell:not(.is-hover-dismissed):hover .header-search-panel,
 .header-inner.is-search-open .header-search-panel { display:block; }
 .official-home .site-header-refined .header-search-shell:not(.is-hover-dismissed):hover .header-search { color:#087f7c; }
 .header-search-shell:not(.is-hover-dismissed):hover .header-search .official-inline-icon { width:22px; height:22px; }
 .header-search-shell:not(.is-hover-dismissed):hover:before { display:none; }
}

/* Guest entry mirrors the circular portrait, using an unframed user glyph. */
.official-green .site-header.site-header-refined .guest-account {
 width:36px; min-width:36px; height:36px; padding:4px; gap:0;
 border:2px solid #087f7c; border-radius:50%; background:transparent;
 box-shadow:0 0 0 4px #087f7c12;
}
.official-green .site-header.site-header-refined .guest-account .account-entry-label { display:none; }
.official-green .site-header.site-header-refined .guest-account .guest-account-icon {
 display:flex; align-items:center; justify-content:center; width:24px; height:24px;
}
.official-green .site-header.site-header-refined .guest-account .guest-account-icon > :is(i,.official-inline-icon) {
 display:block; width:24px; height:24px; font-size:24px; line-height:24px; text-align:center;
}
.official-home .site-header.site-header-refined .guest-account {
 color:#fff; border-color:#fff; background:#ffffff0a; box-shadow:0 0 0 4px #ffffff30;
}
@media(max-width:850px) {
 .official-green .site-header.site-header-refined .guest-account { box-shadow:0 0 0 3px #087f7c12; }
 .official-home .site-header.site-header-refined .guest-account { box-shadow:0 0 0 3px #ffffff30; }
}

/* Full-width floating navigation and reference-inspired image carousel. */
.official-green { --home-header-height:80px; padding-top:var(--home-header-height); }
.official-green.official-home,.official-green:has(#main > .section-banner) { padding-top:0; }
.official-green .site-header.site-header-refined { position:fixed; inset:0 0 auto; z-index:100; height:var(--home-header-height); background:#fff; border-bottom:1px solid #e7edf3; box-shadow:none; transition:background-color .2s,border-color .2s,box-shadow .2s; }
.official-green .site-header.site-header-refined.is-scrolled { box-shadow:0 2px 12px #1732520d; }
.official-green .site-header.site-header-refined :is(.brand,.brand .iconfont,.header-search,.menu-toggle) { color:#297ec8; }
.official-green .site-header.site-header-refined nav a { color:#3c4a61; }
.official-green .site-header.site-header-refined nav a:hover,.official-green .site-header.site-header-refined nav a[aria-current] { color:#297ec8; background:transparent; }
.official-green .site-header.site-header-refined .guest-account { color:#297ec8; border-color:#297ec8; background:transparent; box-shadow:0 0 0 4px #297ec812; }
.official-green .site-header.site-header-refined .account-toggle { box-shadow:0 0 0 4px #297ec812; }
.official-green .site-header.site-header-refined :is(nav a,.account-toggle,.guest-account,.menu-toggle,.header-search):focus-visible { outline-color:#297ec8; }
.official-green:is(.official-home,:has(#main > .section-banner)) .site-header.site-header-refined:not(.is-scrolled) { background:transparent; border-bottom-color:#ffffff30; box-shadow:none; }
.official-green:is(.official-home,:has(#main > .section-banner)) .site-header.site-header-refined:not(.is-scrolled) :is(.brand,.brand .iconfont,.header-search,.menu-toggle) { color:#fff; }
.official-green:is(.official-home,:has(#main > .section-banner)) .site-header.site-header-refined:not(.is-scrolled) .guest-account { color:#fff; border-color:#fff; background:transparent; box-shadow:0 0 0 4px #ffffff30; }
.official-green:is(.official-home,:has(#main > .section-banner)) .site-header.site-header-refined:not(.is-scrolled) .account-toggle { box-shadow:0 0 0 4px #ffffff30; }
.official-green:is(.official-home,:has(#main > .section-banner)) .site-header.site-header-refined:not(.is-scrolled) :is(nav a,.account-toggle,.guest-account,.menu-toggle,.header-search):focus-visible { outline-color:#fff; }
.header-search-shell:before { border-color:#bccbdc; }
.official-green:is(.official-home,:has(#main > .section-banner)) .site-header:not(.is-scrolled) .header-search-shell:before { border-color:#ffffff55; }
.official-green .site-header.site-header-refined .is-search-open .header-search,.official-green .site-header.site-header-refined .header-search-shell:not(.is-hover-dismissed):hover .header-search { color:#297ec8; }
.official-green .site-header.site-header-refined :is(.account-toggle,.guest-account):hover { background:transparent; }
.official-overlay #main:not(.official-member-content) > .page-hero.section-banner { background:#4369e7 url("hero-blue-cms-v2.webp") center 45% / cover no-repeat; }
.official-overlay #main:not(.official-member-content) > .page-hero.section-banner:before { display:none; }
.official-overlay #main > .section-banner--extensions,.official-overlay #main > .section-banner--templates { background-image:url("hero-blue-templates-v2.webp"); }
.official-overlay #main > .section-banner--contact,.official-overlay #main > .section-banner--authorization { background-image:url("hero-coral-partners-v2.webp"); }
.official-home .home-hero.hero-carousel { padding:0; min-height:0; background:none; position:relative; overflow:hidden; touch-action:pan-y; }
.home-banner-slide { min-height:650px; padding:190px 0 110px; background:#4369e7 url("hero-blue-cms-v2.webp") center / cover no-repeat; }
.home-banner-slide:nth-child(2) { background-color:#2876df; background-image:url("hero-blue-templates-v2.webp"); }
.home-banner-slide:nth-child(3) { background-color:#ed666d; background-image:url("hero-coral-partners-v2.webp"); }
.home-banner-slide[hidden] { display:none; }
.official-home .home-hero .hero-copy { width:52%; max-width:650px; }
.official-home .home-hero .eyebrow { color:#fff; font-size:14px; letter-spacing:.02em; margin:0 0 22px; }
.official-home .home-hero :is(h1,h2) { color:#fff; font-size:clamp(34px,3.4vw,48px); line-height:1.4; font-weight:650; letter-spacing:0; margin:0; }
.official-home .home-hero .hero-description { color:#fff; font-size:16px; line-height:1.9; margin:24px 0 30px; }
.official-home .home-hero .hero-actions { gap:20px; }
.official-home .home-hero .hero-actions .button { min-height:48px; padding:11px 26px; border:1px solid #fff; border-radius:6px; background:#fff; color:#365dc0; box-shadow:none; font-size:15px; font-weight:500; }
.official-home .home-hero .hero-actions .button:hover { background:#f2f5ff; }
.home-banner-secondary { display:inline-flex; align-items:center; gap:12px; min-height:48px; padding:11px 24px; color:#fff; border:1px solid #ffffffa0; border-radius:6px; font-size:15px; line-height:24px; }
.home-banner-secondary:hover { color:#fff; background:#ffffff15; }
.home-carousel-controls[hidden] { display:none; }
.home-carousel-arrow { position:absolute; top:50%; transform:translateY(-50%); width:36px; height:56px; border:0; border-radius:4px; background:#ffffff0a; color:#fff; display:grid; place-items:center; padding:0; cursor:pointer; }
.home-carousel-arrow .official-inline-icon { width:28px; height:28px; }
.home-carousel-arrow:hover { background:#ffffff20; }
.home-carousel-prev { left:12px; }
.home-carousel-next { right:12px; }
.home-carousel-bottom { position:absolute; left:50%; bottom:24px; transform:translateX(-50%); display:flex; align-items:center; gap:16px; }
.home-carousel-dots { display:flex; align-items:center; gap:4px; }
.home-carousel-dots button { display:grid; place-items:center; width:28px; height:44px; border:0; padding:0; background:transparent; cursor:pointer; }
.home-carousel-dots button span { width:10px; height:10px; border-radius:20px; background:#ffffff75; }
.home-carousel-dots button[aria-current] { width:54px; }
.home-carousel-dots button[aria-current] span { width:42px; background:#fff; }
.home-carousel-pause { display:grid; place-items:center; width:32px; height:32px; padding:0; border:1px solid #ffffff60; border-radius:50%; color:#fff; background:transparent; cursor:pointer; }
.home-carousel-pause .official-inline-icon { width:18px; height:18px; }
.home-carousel-pause[aria-pressed=true] { background:#ffffff20; }
.home-carousel-controls button:focus-visible,.home-banner-slide a:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.official-green :is(.doc-sidebar,.doc-toc,.extension-detail-aside) { scroll-margin-top:104px; }
.official-green .doc-library .doc-sidebar { top:104px; max-height:calc(100dvh - 128px); }
.official-green .doc-context { top:92px; }
.official-green .documentation :is(.doc-richtext h2,.doc-richtext h3) { scroll-margin-top:158px; }
.official-green :is(#product-overview,#updates,#download) { scroll-margin-top:104px; }
@media(min-width:851px) {
 .official-green:is(.official-home,:has(#main > .section-banner)) .site-header.site-header-refined:not(.is-scrolled) nav a,
 .official-green:is(.official-home,:has(#main > .section-banner)) .site-header.site-header-refined:not(.is-scrolled) nav a:hover,
 .official-green:is(.official-home,:has(#main > .section-banner)) .site-header.site-header-refined:not(.is-scrolled) nav a[aria-current] { color:#fff; }
}
@media(max-width:1100px) and (min-width:851px) {
 .home-banner-slide { min-height:610px; padding-top:175px; }
 .official-home .home-hero .hero-copy { width:56%; }
 .official-home .home-hero :is(h1,h2) { font-size:36px; }
 .official-home .home-hero .hero-description { font-size:15px; }
}
@media(max-width:850px) {
 .official-green { --home-header-height:74px; }
 .home-banner-slide { min-height:650px; padding:130px 0 260px; background-position:65% bottom; background-size:auto 460px; background-repeat:no-repeat; }
 .official-home .home-hero .hero-copy { width:100%; max-width:560px; }
 .official-home .home-hero :is(h1,h2) { font-size:32px; line-height:1.4; }
 .official-home .home-hero .eyebrow { font-size:13px; margin-bottom:18px; }
 .official-home .home-hero .hero-description { font-size:14px; margin:18px 0 22px; }
 .home-carousel-arrow { display:none; }
 .official-green .doc-library .doc-sidebar { top:94px; max-height:calc(100dvh - 116px); }
 .official-green .site-header.site-header-refined nav a:hover,.official-green .site-header.site-header-refined nav a[aria-current] { color:#297ec8; }
}
@media(max-width:560px) {
 .home-banner-slide { min-height:670px; padding:116px 0 310px; background-size:auto 310px; background-position:72% bottom; }
 .official-home .home-hero :is(h1,h2) { font-size:clamp(25px,7vw,30px); }
 .official-home .home-hero .hero-actions { flex-wrap:nowrap; gap:12px; }
 .official-home .home-hero .hero-actions .button,.home-banner-secondary { padding:10px 16px; min-height:44px; font-size:14px; gap:8px; }
 .home-carousel-bottom { bottom:14px; }
 .official-overlay #main:not(.official-member-content) > .page-hero.section-banner { background-position:66% center; }
 .official-green .doc-library .doc-sidebar { max-height:none; }
}
@media(prefers-reduced-motion:no-preference) {
 .home-banner-slide.is-active { animation:home-banner-fade .5s ease-out; }
 @keyframes home-banner-fade { from { opacity:.65; } to { opacity:1; } }
}
@media(prefers-reduced-motion:reduce) { .official-green .site-header.site-header-refined { transition:none; } }

/* Keep illustration detail below inner-page navigation, and remove its old spacer. */
.official-overlay #main:not(.official-member-content) > .page-hero.section-banner { background-size:auto 230px; background-position:right bottom; }
.official-overlay #main > .section-banner--extensions,.official-overlay #main > .section-banner--templates { background-color:#2876df; }
.official-overlay #main > .section-banner--contact,.official-overlay #main > .section-banner--authorization { background-color:#ed666d; }
.official-green .docs-masthead { height:0; min-height:0; margin:0; padding:0; }
@media(max-width:560px) {
 .official-overlay #main:not(.official-member-content) > .page-hero.section-banner { background-size:auto 220px; background-position:72% bottom; }
}

/* White navigation uses one neutral ink, with underline-only selection. */
.official-green .site-header.site-header-refined :is(.brand,.brand .iconfont,.header-search,.menu-toggle) { color:#3c4a61; }
.official-green .site-header.site-header-refined nav a:hover,.official-green .site-header.site-header-refined nav a[aria-current] { color:#3c4a61; }
.official-green .site-header.site-header-refined .guest-account { color:#3c4a61; border-color:#3c4a61; box-shadow:0 0 0 4px #3c4a6110; }
.official-green .site-header.site-header-refined .account-toggle { box-shadow:0 0 0 4px #3c4a6110; }
.official-green .site-header.site-header-refined .is-search-open .header-search,.official-green .site-header.site-header-refined .header-search-shell:not(.is-hover-dismissed):hover .header-search { color:#3c4a61; }
.official-green .site-header.site-header-refined :is(nav a,.account-toggle,.guest-account,.menu-toggle,.header-search):focus-visible { outline-color:#3c4a61; }
.official-overlay #main:not(.official-member-content) > .page-hero.section-banner { background:#4369e7 url("banner-blue-brand.webp") center / cover no-repeat; }
.home-carousel-bottom { gap:0; }
.home-hero.hero-carousel:focus-visible { outline:2px solid #fff; outline-offset:-4px; }
@media(max-width:850px) {
 .official-green .site-header.site-header-refined nav a:hover,.official-green .site-header.site-header-refined nav a[aria-current] { color:#3c4a61; }
}

/* Shorter desktop hero; image artwork is drawn inside the shared content edge. */
@media(min-width:851px) {
 .home-banner-slide { min-height:580px; padding:150px 0 92px; background-size:cover; }
}

@media(max-width:560px) {
 .home-banner-slide { min-height:640px; padding-bottom:270px; background-color:#376aef; }
}

/* Article sidebars stay below the fixed shared navigation. */
@media(min-width:761px) {
 .official-green .documentation :is(.doc-sidebar,.doc-toc) { top:104px; max-height:calc(100dvh - 128px); }
}
@media(min-width:761px) and (max-width:850px) {
 .official-green .documentation :is(.doc-sidebar,.doc-toc) { top:94px; max-height:calc(100dvh - 116px); }
}

/* Isolated illustrations use the page container; the existing bitmap supplies the backdrop. */
.home-banner-slide { --hero-art:url("hero-teal-cms-art-v1.webp"); background-size:500% 100%; background-position:left center; }
.home-banner-slide:nth-child(2) { --hero-art:url("hero-blue-templates-art.webp"); }
.home-banner-slide:nth-child(3) { --hero-art:url("hero-coral-partners-art.webp"); }
.home-banner-slide > .container { position:relative; }
.home-banner-slide > .container:before { content:""; position:absolute; top:-142px; left:0; right:0; height:580px; background:var(--hero-art) center / contain no-repeat; pointer-events:none; }
.home-banner-slide .hero-copy { position:relative; z-index:1; }
@media(min-width:851px) {
 .home-banner-slide { height:580px; min-height:580px; padding-top:142px; padding-bottom:90px; }
}
@media(max-width:850px) {
 .home-banner-slide > .container:before { top:185px; height:325px; background-size:auto 325px; background-position:72% bottom; }
}
@media(max-width:560px) {
 .home-banner-slide > .container:before { top:205px; height:290px; background-size:auto 290px; }
 .home-banner-slide:nth-child(3) > .container:before { background-position:right bottom; }
}

@media(max-width:850px) {
 .home-banner-slide > .container:before { background-position:85% bottom; }
 .home-banner-slide:nth-child(2) > .container:before,.home-banner-slide:nth-child(3) > .container:before { background-position:right bottom; }
}

/* Centered public section mastheads; each retains its own existing image. */
.official-overlay #main:not(.official-member-content) > .page-hero.section-banner {
 --section-banner-ink:#2247b8;
 --section-banner-image:url("banner-blue-brand.webp");
 position:relative; isolation:isolate; display:flex; align-items:center;
 height:325px; min-height:325px; padding:80px 0 0; overflow:hidden;
 background:var(--section-banner-ink); color:#fff;
}
.official-overlay #main:not(.official-member-content) > .page-hero.section-banner:before {
 content:""; display:block; position:absolute; inset:0; z-index:-1;
 width:100%; max-width:none; height:100%; mask-image:none; -webkit-mask-image:none;
 background:var(--section-banner-image) center / cover no-repeat;
 opacity:.2; pointer-events:none;
}
.official-overlay #main:not(.official-member-content) > .section-banner.section-banner--templates { --section-banner-ink:#176bc3; --section-banner-image:url("hero-blue-templates-v2.webp"); }
.official-overlay #main:not(.official-member-content) > .section-banner.section-banner--extensions { --section-banner-ink:#6650b2; --section-banner-image:url("banner-extensions.png"); }
.official-overlay #main:not(.official-member-content) > .section-banner.section-banner--docs { --section-banner-ink:#087982; --section-banner-image:url("banner-docs.png"); }
.official-overlay #main:not(.official-member-content) > .section-banner.section-banner--articles { --section-banner-ink:#394b99; --section-banner-image:url("banner-articles.png"); }
.official-overlay #main:not(.official-member-content) > .section-banner.section-banner--faq { --section-banner-ink:#2368a9; --section-banner-image:url("banner-faq.png"); }
.official-overlay #main:not(.official-member-content) > .section-banner.section-banner--authorization { --section-banner-ink:#12645f; --section-banner-image:url("banner-authorization.png"); }
.official-overlay #main:not(.official-member-content) > .section-banner.section-banner--contact { --section-banner-ink:#b94950; --section-banner-image:url("hero-coral-partners-v2.webp"); }
.section-banner-content { text-align:center; }
.official-green .section-banner .section-banner-title { display:flex; align-items:baseline; justify-content:center; gap:18px; margin:0; padding:0; color:#fff; font-size:38px; line-height:1.5; font-weight:500; letter-spacing:0; }
.official-green .section-banner .section-banner-english { font-size:29px; font-weight:400; letter-spacing:.035em; }
.section-banner-rule { width:144px; height:0; margin:20px auto 0; border:0; border-top:1px solid #ffffff66; }
.official-green #main:has(> .section-banner) > .page-content > .catalog-heading { padding:6px 0 24px; margin:0 0 24px; min-height:0; }
.official-green #main:has(> .section-banner) > .page-content > .catalog-heading > p { margin:0; font-size:15px; line-height:1.8; }
.official-green #main:has(> .section-banner) .doc-library-heading { margin:0 0 18px; padding:0; }
.official-green #main:has(> .section-banner) .doc-library-heading p { margin:0; }
@media(max-width:850px) {
 .official-overlay #main:not(.official-member-content) > .page-hero.section-banner { height:280px; min-height:280px; padding-top:74px; }
 .official-green .section-banner .section-banner-title { font-size:32px; gap:14px; }
 .official-green .section-banner .section-banner-english { font-size:24px; }
}
@media(max-width:560px) {
 .official-overlay #main:not(.official-member-content) > .page-hero.section-banner { height:240px; min-height:240px; }
 .official-green .section-banner .section-banner-title { flex-direction:column; align-items:center; gap:2px; font-size:28px; line-height:1.5; }
 .official-green .section-banner .section-banner-english { font-size:18px; letter-spacing:.07em; }
 .section-banner-rule { width:96px; margin-top:14px; }
 .official-green #main:has(> .section-banner) > .page-content > .catalog-heading { padding:0 0 18px; margin-bottom:18px; }
}


/* Align the first two illustration subjects with the approved partner slide. */
@media(min-width:851px) {
 .home-banner-slide:nth-child(1) > .container:before { transform:translateX(12.8%); clip-path:inset(0 12.8% 0 0); }
 .home-banner-slide:nth-child(2) > .container:before { transform:translateX(10%) scale(1.06); transform-origin:right center; clip-path:inset(0 10% 0 0); }
}


/* Slide-specific colors follow the site theme and partner artwork. */
.official-home .home-banner-slide:nth-child(1) { background:var(--primary); }
.official-home .home-banner-slide:nth-child(1) .hero-actions .button { color:var(--primary); }
.official-home .home-banner-slide:nth-child(3) .hero-actions .button { color:#b43c46; }
.official-home .home-banner-slide:nth-child(3) .hero-actions .button:hover { background:#fff6f5; }


/* Mobile illustration subjects follow the copy and share its center. */
@media(max-width:850px) {
 .home-banner-slide { height:auto; min-height:650px; padding-bottom:300px; --mobile-art-height:325px; --mobile-art-rise:58px; --mobile-art-shift:130px; }
 .home-banner-slide:nth-child(2) { --mobile-art-height:344.5px; --mobile-art-rise:41px; --mobile-art-shift:191px; }
 .home-banner-slide:nth-child(3) { --mobile-art-rise:42px; --mobile-art-shift:203px; }
 .home-banner-slide > .container:before,
 .home-banner-slide:nth-child(2) > .container:before,
 .home-banner-slide:nth-child(3) > .container:before {
  top:calc(100% - var(--mobile-art-rise)); height:var(--mobile-art-height);
  background-size:auto var(--mobile-art-height);
  background-position:calc(50% - var(--mobile-art-shift)) bottom;
 }
}
@media(max-width:560px) {
 .home-banner-slide { min-height:640px; padding-bottom:280px; --mobile-art-height:290px; --mobile-art-rise:49px; --mobile-art-shift:116px; }
 .home-banner-slide:nth-child(2) { --mobile-art-height:307.4px; --mobile-art-rise:33px; --mobile-art-shift:170px; }
 .home-banner-slide:nth-child(3) { --mobile-art-height:290px; --mobile-art-rise:35px; --mobile-art-shift:181px; }
}


/* Narrow phones keep the complete artwork and avoid footer overflow. */
@media(max-width:360px) {
 .home-banner-slide { padding-bottom:250px; --mobile-art-height:244px; --mobile-art-rise:37.5px; --mobile-art-shift:98px; }
 .home-banner-slide:nth-child(2) { --mobile-art-height:258.64px; --mobile-art-rise:24.3px; --mobile-art-shift:143px; }
 .home-banner-slide:nth-child(3) { --mobile-art-height:244px; --mobile-art-rise:25.5px; --mobile-art-shift:152.3px; }
}
@media(max-width:560px) {
 .official-green .site-footer .footer-link-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .official-green .site-footer .footer-link-grid a { white-space:normal; min-width:0; }
 .official-green .site-footer .footer-link-grid a > span { flex-shrink:0; }
}

/* Shared footer: grouped navigation and a compact mobile ending. */
.official-green .site-footer .footer-main {
 grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,.9fr) minmax(0,1fr);
 gap:40px; padding:40px 0 32px;
}
.official-green .site-footer .footer-main > * { min-width:0; }
.official-green .site-footer h2 { margin-bottom:14px; padding:0; border:0; font-size:16px; line-height:26px; }
.official-green .site-footer h2:after { content:none; }
.official-green .site-footer .footer-logo { margin:0 0 12px; color:#f0f5f3; font-size:24px; line-height:32px; }
.official-green .site-footer .footer-logo .iconfont { color:inherit; font-size:32px; }
.official-green .site-footer .footer-about p { max-width:32em; line-height:1.9; }
.official-green .site-footer .footer-link-grid { grid-template-columns:1fr; gap:0; }
.official-green .site-footer .footer-link-grid a {
 min-height:36px; padding:6px 0; border-radius:0; background:transparent;
 line-height:24px; white-space:normal; overflow-wrap:anywhere;
}
.official-green .site-footer .footer-link-grid a:hover { background:transparent; text-decoration:none; }
.official-green .site-footer .footer-socials { margin-top:16px; gap:8px; }
.official-green .site-footer .footer-socials > a { width:40px; height:40px; }
.official-green .site-footer .footer-contact-line { min-height:36px; padding:0; color:#bcc5c1; font-size:14px; font-weight:400; line-height:24px; align-items:baseline; gap:6px; }
.official-green .site-footer .footer-contact-label { flex:0 0 3em; white-space:nowrap; }
.official-green .site-footer .footer-contact-value { min-width:0; color:inherit; font:inherit; overflow-wrap:anywhere; }
.official-green .site-footer a.footer-contact-value { display:block; min-height:36px; padding:6px 0; color:inherit; font:inherit; text-decoration:none; }
.official-green .site-footer a.footer-contact-value:hover { color:#72d7c4; text-decoration:none; }
.official-green .site-footer .footer-contact-address { padding:6px 0; }
.official-green .site-footer .footer-friends { padding:0 0 24px; align-items:baseline; }
.official-green .site-footer .footer-friends-links { gap:8px 20px; }
.official-green .site-footer .footer-bottom { gap:16px 32px; padding:12px 0; }
.official-green .site-footer .footer-bottom small { width:auto; min-width:0; margin:0; text-align:left; }
.official-green .site-footer .footer-utility {
 display:flex; flex-direction:row; flex-wrap:wrap; flex-shrink:0; justify-content:flex-end;
 gap:0 24px; margin:0; padding:0;
}
.official-green .site-footer .footer-utility a { display:inline-flex; align-items:center; min-height:36px; margin:0; font-size:13px; }
.product-service-copy { max-width:44em; }
@media(max-width:1100px) {
 .official-green .site-footer .footer-main { gap:24px; }
}
@media(max-width:850px) {
 .official-green .site-footer .footer-main { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 28px; padding:32px 0 24px; }
 .official-green .site-footer .footer-about { grid-column:1 / -1; }
 .official-green .site-footer .footer-about p { max-width:44em; }
}
@media(max-width:560px) {
 .official-green .site-footer .footer-main { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 20px; padding:28px 0 20px; }
 .official-green .site-footer .footer-about,.official-green .site-footer .footer-contact { grid-column:1 / -1; }
 .official-green .site-footer h2 { margin-bottom:8px; }
 .official-green .site-footer .footer-link-grid a,.official-green .site-footer a.footer-contact-value { min-height:44px; padding:10px 0; }
 .official-green .site-footer .footer-contact-line { min-height:44px; }
 .official-green .site-footer .footer-contact-address { padding:10px 0; }
 .official-green .site-footer .footer-bottom { align-items:flex-start; flex-direction:column; gap:4px; padding:16px 0 12px; text-align:left; }
 .official-green .site-footer .footer-bottom small { text-align:left; }
 .official-green .site-footer .footer-utility { justify-content:flex-start; gap:0 24px; }
 .official-green .site-footer .footer-utility a { min-height:44px; }
 .official-green .site-footer .footer-friends { padding-bottom:20px; }
 .official-green .site-footer .footer-friends-links { flex-basis:100%; }
}