@charset "UTF-8";

:root {
  color-scheme: dark;
  --canvas: #070c09;
  --panel: #111e16;
  --panel-deep: #0c160f;
  --lime: #c1f17f;
  --chalk: #f0f5e8;
  --quiet: #a8b7aa;
  --stroke: #2d4031;
  --mint-paper: #e1eacb;
  --paper-text: #233529;
  --page-width: 1152px;
  --page-edge: clamp(20px, 4.4vw, 64px);
  --chapter-gap: clamp(72px, 9vw, 122px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--canvas); color: var(--chalk); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 15px; line-height: 1.85; -webkit-text-size-adjust: 100%; }
h2, h3, p, figure, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
h2, h3, p, dd, summary { overflow-wrap: anywhere; }
h2 { font-size: clamp(27px, 3.3vw, 39px); line-height: 1.4; font-weight: 600; letter-spacing: -.04em; }
h3 { font-size: 23px; line-height: 1.5; font-weight: 550; letter-spacing: -.025em; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 5px; }
.page-span { width: min(calc(100% - var(--page-edge) * 2), var(--page-width)); margin-inline: auto; }
.small-caption { margin-bottom: 18px; color: var(--lime); font-size: 12px; letter-spacing: .08em; }
.access-jump { position: absolute; top: 0; left: 20px; z-index: 20; padding: 10px 18px; transform: translateY(-130%); background: var(--lime); color: #172711; }
.access-jump:focus { transform: translateY(0); }

.mast-ribbon { display: flex; position: relative; flex-wrap: wrap; align-items: center; justify-content: space-between; width: min(calc(100% - var(--page-edge) * 2), 1320px); min-height: 72px; margin-inline: auto; border-bottom: 1px solid var(--stroke); }
.mast-logo { display: flex; width: 90px; min-height: 44px; align-items: center; }
.mast-logo img { width: 100%; height: auto; }
.ribbon-check { position: absolute; z-index: 2; right: 0; top: 14px; width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer; }
.ribbon-handle { display: grid; width: 44px; height: 44px; place-content: center; gap: 6px; border: 1px solid var(--stroke); border-radius: 8px; }
.ribbon-handle i { display: block; width: 18px; height: 1px; background: var(--chalk); transition: transform 180ms; }
.ribbon-check:focus-visible + .ribbon-handle { outline: 2px solid var(--lime); outline-offset: 4px; }
.ribbon-check:checked + .ribbon-handle i:first-child { transform: translateY(3.5px) rotate(45deg); }
.ribbon-check:checked + .ribbon-handle i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.ribbon-navigation { display: none; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 14px 0 18px; }
.ribbon-check:checked ~ .ribbon-navigation { display: grid; }
.ribbon-navigation a { display: flex; min-height: 44px; align-items: center; justify-content: center; padding: 8px 13px; color: var(--quiet); font-size: 13px; }
.ribbon-navigation a:hover { color: var(--lime); }
.ribbon-navigation .device-choice { grid-column: 1 / -1; justify-content: space-between; margin-top: 5px; border: 1px solid #47603b; border-radius: 6px; color: var(--lime); }
@media (min-width: 54rem) {
  .mast-ribbon { min-height: 86px; }
  .mast-logo { width: 106px; }
  .ribbon-check, .ribbon-handle { display: none; }
  .ribbon-navigation, .ribbon-check:checked ~ .ribbon-navigation { display: flex; width: auto; padding: 0; gap: 7px; align-items: center; }
  .ribbon-navigation .device-choice { margin: 0 0 0 19px; gap: 26px; }
}

.intro-cover { display: grid; gap: 42px; padding-block: 52px 72px; }
.intro-story { min-width: 0; }
.intro-brand { display: block; font-size: clamp(33px, 4.4vw, 49px); font-weight: 650; text-wrap: balance; }
.intro-tagline { display: block; margin-top: 16px; color: var(--lime); font-size: clamp(23px, 2.6vw, 30px); font-weight: 400; }
.intro-paragraph { max-width: 480px; margin-top: 25px; color: var(--quiet); font-size: 14px; line-height: 2; }
.intro-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.intro-links a { display: flex; min-height: 52px; min-width: 137px; padding: 11px 19px; align-items: center; justify-content: space-between; gap: 26px; border: 1px solid var(--lime); border-radius: 4px; font-size: 14px; }
.join-button { background: var(--lime); color: #172b12; font-weight: 600; }
.intro-links .app-button { border-color: #53644b; }
.intro-links a:hover { filter: brightness(1.12); }
.continue-link { display: inline-flex; min-height: 44px; margin-top: 16px; align-items: center; gap: 27px; color: var(--quiet); font-size: 12px; }
.continue-link span { color: var(--lime); }
.intro-video { width: min(100%, 224px); height: auto; margin-inline: auto; aspect-ratio: 480 / 1000; object-fit: contain; background: #000; }
@media (min-width: 54rem) {
  .intro-cover { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); align-items: center; gap: 9%; padding-block: 68px 94px; }
  .intro-video { width: 260px; }
}

.capability-index { padding-top: 24px; }
.index-heading { max-width: 680px; margin-bottom: 36px; }
.index-heading > p:last-child { max-width: 560px; margin-top: 17px; color: var(--quiet); font-size: 14px; }
.capability-leaves { overflow: hidden; border-radius: 18px; background: var(--mint-paper); color: var(--paper-text); }
.capability-leaves > li { display: grid; gap: 26px; padding: 30px 24px; }
.capability-leaves > li + li { border-top: 1px solid #bdcba9; }
.leaf-topic { display: inline-block; margin-bottom: 10px; color: #536b3d; font-size: 12px; }
.leaf-copy > p { max-width: 530px; margin-top: 14px; color: #50634c; font-size: 14px; }
.market-diagram { align-self: center; padding: 21px 15px; border: 1px solid #adc098; border-radius: 10px; }
.market-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.market-keys span { padding: 8px 12px; border: 1px solid #a4b78c; border-radius: 3px; font-size: 12px; }
.market-keys span:first-child { background: #344e2c; border-color: #344e2c; color: #eef6e2; }
.account-leaf { background: #d7e3be; }
.account-diagram { display: flex; justify-content: space-between; gap: 8px; padding: 15px 0 6px; }
.account-diagram > span { display: grid; flex: 1; justify-items: center; gap: 16px; color: #4b623c; font-size: 12px; }
.account-diagram i { display: block; width: 45px; height: 45px; border: 1px solid #587345; }
.scope-shape { border-radius: 50%; box-shadow: inset 0 0 0 8px #d7e3be, inset 0 0 0 9px #8fa575; }
.holding-shape { transform: rotate(45deg) scale(.7); background: #a6c37c; }
.available-shape { border-radius: 24px 24px 5px 5px; background: repeating-linear-gradient(0deg, transparent 0, transparent 8px, #bdcfa5 8px, #bdcfa5 9px); }
.order-diagram { display: flex; position: relative; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; gap: 16px; padding: 23px 0; }
.order-diagram > span { padding: 10px 14px; border-block: 1px solid #94aa78; font-size: 13px; }
.order-diagram > i { width: 1px; height: 38px; background: #8fa177; transform: rotate(22deg); }
.order-diagram > p { width: 100%; text-align: center; font-size: 11px; color: #60734f; }
@media (min-width: 47rem) {
  .capability-leaves > li { grid-template-columns: 1.15fr 1fr; gap: 40px; padding: 38px; align-items: center; }
  .account-leaf .leaf-copy { grid-column: 2; grid-row: 1; }
  .account-diagram { grid-column: 1; grid-row: 1; }
}
@media (min-width: 66rem) {
  .capability-leaves > li { padding: 43px 54px; gap: 86px; }
  .market-diagram { padding: 27px 18px; }
}

.perspective-essay { margin-top: var(--chapter-gap); padding-block: 65px; background: #101b14; border-block: 1px solid var(--stroke); }
.perspective-heading { display: grid; gap: 18px; margin-bottom: 33px; }
.perspective-heading > p:last-child { max-width: 560px; color: var(--quiet); font-size: 14px; }
.scope-pair { display: grid; border: 1px solid #3b513e; }
.scope-pair > section { padding: 29px 25px; min-width: 0; }
.scope-pair > section + section { border-top: 1px solid #3b513e; }
.scope-label { margin-bottom: 16px; color: #91a485; font-size: 12px; }
.scope-pair h3 { font-size: 27px; }
.scope-pair section > p:not(.scope-label) { margin-top: 15px; color: var(--quiet); font-size: 14px; }
.scope-pair ul { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 27px; padding-top: 17px; border-top: 1px solid #2e4132; color: #b6ce9c; font-size: 11px; }
.personal-scope { background: #19281c; }
@media (min-width: 47rem) {
  .scope-pair { grid-template-columns: 1fr 1fr; }
  .scope-pair > section { padding: 38px; }
  .scope-pair > section + section { border-top: 0; border-left: 1px solid #3b513e; }
}
@media (min-width: 66rem) {
  .perspective-heading { grid-template-columns: 1fr 1fr; gap: 14px 80px; align-items: end; }
  .perspective-essay { padding-block: 82px; }
}

.trail-section { display: grid; gap: 36px; padding-block: var(--chapter-gap); }
.trail-heading > p:not(.small-caption) { max-width: 450px; margin-top: 20px; color: var(--quiet); font-size: 14px; }
.trail-keys { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.trail-keys li { padding: 4px 13px; border: 1px solid var(--stroke); color: #a8c491; font-size: 11px; }
.trail-notes > div { padding-block: 25px 28px; border-top: 1px solid #43583d; }
.trail-notes > div:last-child { padding-bottom: 0; }
.trail-notes dt { display: flex; align-items: center; gap: 14px; margin-bottom: 15px; font-size: 24px; }
.trail-notes dt > span { width: 9px; height: 9px; background: var(--lime); border-radius: 50%; }
.trail-notes > div:last-child dt > span { background: transparent; border: 1px solid var(--lime); }
.trail-notes dd { color: var(--quiet); font-size: 14px; }
@media (min-width: 66rem) {
  .trail-section { grid-template-columns: 1fr 1.13fr; gap: 105px; align-items: start; }
  .trail-notes dt { font-size: 27px; }
}

.help-courtyard { padding-block: 60px 66px; background: #0d1710; border-block: 1px solid #283e2b; }
.help-heading { max-width: 650px; margin-bottom: 30px; }
.help-heading p { margin-top: 17px; color: var(--quiet); font-size: 14px; }
.help-layout { display: grid; gap: 13px; align-items: start; }
.help-layout details { min-width: 0; border: 1px solid #3a503a; border-radius: 9px; }
.help-layout summary { display: flex; gap: 20px; padding: 22px; min-height: 70px; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-size: 15px; line-height: 1.7; }
.help-layout summary::-webkit-details-marker { display: none; }
.help-layout summary > i { position: relative; flex: 0 0 18px; width: 18px; height: 18px; }
.help-layout summary > i::before, .help-layout summary > i::after { position: absolute; top: 8px; left: 3px; width: 12px; height: 1px; background: currentColor; content: ""; }
.help-layout summary > i::after { transform: rotate(90deg); }
.help-layout [open] summary > i::after { transform: rotate(0); }
.help-layout details > p { padding: 0 22px 25px; color: var(--quiet); font-size: 14px; }
.help-layout .help-feature { background: #c4df9b; color: #223b21; border-color: #c4df9b; }
.help-feature summary { font-size: 19px; }
.help-layout .help-feature > p { color: #415c36; }
@media (min-width: 47rem) {
  .help-layout { grid-template-columns: 1fr 1fr; gap: 16px; }
  .help-feature { grid-row: 1 / span 2; }
  .help-feature summary { padding: 30px; }
  .help-layout .help-feature > p { padding: 0 30px 31px; }
}

.pressroom { padding-block: 65px var(--chapter-gap); }
.press-heading { display: flex; align-items: center; gap: 26px; margin-bottom: 30px; }
.press-heading > span { height: 1px; flex: 1; background: var(--stroke); }
.press-strip { display: grid; gap: 32px; }
.press-strip > figure { min-width: 0; }
.press-image { aspect-ratio: 16 / 9; overflow: hidden; background: #111b13; border-radius: 5px; }
.press-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 220ms; }
.press-strip figure:hover img { transform: scale(1.025); }
.press-strip figcaption { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--stroke); }
.press-strip h3 { font-size: 15px; font-weight: 400; line-height: 1.9; letter-spacing: 0; }
@media (min-width: 47rem) { .press-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; } }

.closing-stamp { display: grid; justify-items: center; gap: 14px; padding-block: 32px 28px; border-top: 1px solid var(--stroke); }
.closing-stamp > a { display: flex; min-height: 44px; align-items: center; }
.closing-stamp img { width: 82px; height: auto; }
.closing-stamp nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; }
.closing-stamp nav a { display: inline-flex; min-height: 44px; align-items: center; gap: 12px; color: var(--quiet); font-size: 12px; }
.closing-stamp nav a:hover { color: var(--lime); }
.closing-stamp > p { color: #77907b; font-size: 10px; }
@media (min-width: 88rem) {
  .intro-cover { padding-block: 85px 107px; }
  .intro-video { width: 278px; }
}
@media (max-width: 22rem) {
  .capability-leaves > li { padding-inline: 19px; }
  .market-keys span { padding-inline: 8px; }
  .help-layout summary { padding-inline: 18px; gap: 13px; }
  .intro-links a { min-width: 128px; padding-inline: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; }
}