:root {
  color-scheme: light;
  --blue: #18588c;
  --blue-deep: #103a5e;
  --ice: #b9ddd2;
  --ice-pale: #e7f2ee;
  --ivory: #f5f1e8;
  --white: #fcfdfb;
  --charcoal: #252a2d;
  --muted: #687177;
  --line: rgba(37, 42, 45, .17);
  --line-light: rgba(255, 255, 255, .2);
  --serif: "Songti SC", "STSong", "Noto Serif SC", Georgia, serif;
  --sans: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

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

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

body {
  margin: 0;
  color: var(--charcoal);
  background: var(--white);
  font-family: var(--sans);
  line-height: 1.75;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

h1,
h2,
h3,
p,
ol,
ul,
dl,
dd {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
summary {
  font: inherit;
}

section {
  scroll-margin-top: 108px;
}

.portal {
  width: min(1480px, calc(100% - 72px));
  margin-inline: auto;
}

.module-number {
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .19em;
}

h1,
h2,
h3 {
  font-weight: 620;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(252, 253, 251, .96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(17px);
}

.status-strip {
  color: #e6f0f3;
  background: var(--blue-deep);
}

.status-inner {
  min-height: 30px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .16em;
}

.status-inner span:last-child {
  text-align: right;
}

.header-inner {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.brand {
  min-width: 280px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand img {
  width: 42px;
  height: 42px;
}

.brand div {
  display: grid;
  line-height: 1.18;
}

.brand strong {
  font-family: var(--serif);
  font-size: 21px;
}

.brand span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .2em;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(14px, 1.7vw, 30px);
}

.site-nav a {
  position: relative;
  padding: 30px 0 27px;
  color: #566168;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 18px;
  height: 2px;
  background: var(--blue);
  transition: right .2s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--blue);
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after,
.site-nav a:focus-visible::after {
  right: 0;
}

.site-nav a:focus-visible,
.menu-toggle:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 5px;
}

.menu-toggle {
  display: none;
  color: inherit;
  border: 0;
  background: transparent;
}

/* Three-tier public information hero */

.hero {
  position: relative;
  overflow: hidden;
  color: #f3f7f8;
  background: var(--blue);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hero::before {
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 96px 96px;
}

.hero::after {
  width: 520px;
  height: 520px;
  right: -200px;
  top: 110px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 50%;
}

.hero-layout {
  position: relative;
  z-index: 1;
  min-height: 790px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  grid-template-rows: minmax(390px, auto) auto;
  gap: 0;
  padding-top: 76px;
}

.hero-index {
  padding: 34px 28px;
  border: 1px solid rgba(255,255,255,.24);
  align-self: center;
}

.hero-index > p {
  margin-bottom: 23px;
  color: var(--ice);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .17em;
}

.hero-index-left ol {
  padding: 0;
  list-style: none;
}

.hero-index-left li {
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.17);
  font-size: 13px;
}

.hero-index-left li span {
  color: var(--ice);
  font: 700 10px/1.8 Georgia, serif;
}

.hero-index-right dl {
  border-top: 1px solid rgba(255,255,255,.17);
}

.hero-index-right dl > div {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.17);
}

.hero-index-right dt {
  color: var(--ice);
  font-size: 9px;
  font-weight: 800;
}

.hero-index-right dd {
  margin-top: 4px;
  color: #dbe8ed;
  font-size: 11px;
}

.hero-center {
  align-self: center;
  padding: 50px 70px;
  text-align: center;
}

.hero-code {
  margin-bottom: 28px;
  color: var(--ice);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
}

h1 {
  max-width: 900px;
  margin-inline: auto;
  font-family: var(--serif);
  font-size: clamp(50px, 6.5vw, 94px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.hero-slogan {
  max-width: 650px;
  margin: 28px auto 0;
  color: #dbe8ed;
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 26px);
}

.hero-guide {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  color: var(--charcoal);
  background: var(--ivory);
  border-left: 1px solid var(--line);
}

.hero-guide article {
  min-height: 190px;
  padding: 31px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.hero-guide span {
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

.hero-guide p {
  margin-top: 24px;
  color: var(--muted);
  font-size: 13px;
}

.signal-board {
  min-height: 190px;
  display: grid;
  grid-template-rows: 1fr auto;
  color: var(--blue-deep);
  background: var(--ice);
}

.signal-orbit {
  position: relative;
  display: grid;
  place-content: center;
  text-align: center;
}

.signal-orbit::before,
.signal-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(16,58,94,.32);
  border-radius: 50%;
}

.signal-orbit::before {
  width: 130px;
  height: 130px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.signal-orbit::after {
  width: 82px;
  height: 82px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.signal-orbit span,
.signal-orbit i {
  position: relative;
  z-index: 1;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .16em;
}

.signal-orbit b {
  position: relative;
  z-index: 1;
  font: 400 31px/1 Georgia, serif;
}

.signal-scale {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid rgba(16,58,94,.24);
}

.signal-scale span {
  padding: 8px 0;
  text-align: center;
  border-right: 1px solid rgba(16,58,94,.24);
  font: 700 9px/1 Georgia, serif;
}

/* Positioning */

.positioning {
  padding: 78px 0;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.positioning-layout {
  display: grid;
  grid-template-columns: 170px minmax(380px, 1fr) minmax(430px, 1fr);
  gap: 58px;
  align-items: start;
}

.positioning-main h2,
.module-heading h2,
.scenes-title h2,
.library-heading h2,
.week-title h2,
.verification-title h2,
.practical-heading h2,
.source-layout h2,
.help-intro h2,
.platform-main h2 {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 67px);
  line-height: 1.15;
  letter-spacing: -.03em;
}

.positioning-main > p {
  max-width: 790px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 14px;
}

.positioning-panels {
  border-top: 1px solid var(--line);
}

.positioning-panels article {
  display: grid;
  grid-template-columns: 48px minmax(180px, .9fr) 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.positioning-panels b {
  color: var(--blue);
  font-size: 10px;
}

.positioning-panels h3 {
  font-family: var(--serif);
  font-size: 18px;
}

.positioning-panels p {
  color: var(--muted);
  font-size: 11px;
}

/* Shared headings */

.module-heading {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 68px;
  margin-bottom: 54px;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--line);
}

.module-heading > div:first-child > span {
  display: block;
  margin-top: 9px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
}

.module-heading > div:last-child > p,
.scenes-title > p:last-child,
.library-heading > p:last-child,
.week-title > p:last-child,
.verification-title > p:last-child,
.practical-heading > p:last-child,
.help-intro > p:last-child {
  max-width: 800px;
  margin-top: 18px;
  color: var(--muted);
}

/* Discovery need map */

.discovery {
  padding: 114px 0;
  background: var(--ivory);
}

.need-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.need-map article {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  padding: 29px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.need-map article > span,
.need-map em {
  color: var(--blue);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .13em;
}

.need-map h3 {
  margin-top: 38px;
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.35;
}

.need-map p {
  margin-top: 13px;
  color: var(--muted);
  font-size: 13px;
}

.need-map em {
  margin-top: auto;
  padding-top: 24px;
}

.need-summary {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 36px;
  margin-top: 28px;
  padding: 24px 28px;
  color: var(--blue-deep);
  background: var(--ice-pale);
}

.need-summary span {
  font-size: 11px;
  font-weight: 800;
}

.need-summary p {
  font-size: 13px;
}

/* Scenarios */

.scene-plans {
  padding: 114px 0;
  color: #f0f6f7;
  background: var(--blue-deep);
}

.scenes-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 70px;
}

.scenes-title {
  position: sticky;
  top: 140px;
  align-self: start;
}

.scenes-title .module-number {
  color: var(--ice);
}

.scenes-title h2 {
  margin-top: 18px;
}

.scenes-title > p:last-child {
  color: #b9cbd1;
}

.plan-grid {
  border-top: 1px solid var(--line-light);
}

.plan-grid article {
  display: grid;
  grid-template-columns: 120px 220px 1fr auto;
  gap: 28px;
  align-items: baseline;
  padding: 27px 0;
  border-bottom: 1px solid var(--line-light);
}

.plan-grid article > span,
.plan-grid small {
  color: var(--ice);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

.plan-grid h3 {
  font-family: var(--serif);
  font-size: 28px;
}

.plan-grid p {
  color: #b9cbd1;
  font-size: 13px;
}

.plan-grid small {
  white-space: nowrap;
}

/* Knowledge library */

.library {
  padding: 116px 0;
  background: var(--white);
}

.library-heading {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) minmax(320px, .55fr);
  gap: 58px;
  align-items: end;
  margin-bottom: 55px;
}

.knowledge-table {
  border-top: 2px solid var(--charcoal);
}

.knowledge-table article {
  display: grid;
  grid-template-columns: 58px minmax(260px, .75fr) minmax(340px, 1.25fr) 140px;
  gap: 28px;
  align-items: center;
  min-height: 100px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.knowledge-table article > b {
  color: var(--blue);
  font: 400 27px/1 Georgia, serif;
}

.knowledge-table article > div > span {
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

.knowledge-table h3 {
  margin-top: 3px;
  font-family: var(--serif);
  font-size: 24px;
}

.knowledge-table p {
  color: var(--muted);
  font-size: 13px;
}

.knowledge-table em {
  justify-self: end;
  color: var(--blue-deep);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.library-note {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 40px;
  margin-top: 32px;
  padding: 25px 28px;
  color: var(--blue-deep);
  background: var(--ice-pale);
}

.library-note span {
  font-size: 11px;
  font-weight: 800;
}

.library-note p {
  font-size: 13px;
}

/* Week panels */

.weekday-weekend {
  padding: 112px 0;
  background: var(--ivory);
}

.week-grid {
  display: grid;
  grid-template-columns: .62fr 1fr 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.week-title,
.week-grid > article {
  min-height: 470px;
  padding: 38px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.week-title h2 {
  margin-top: 38px;
  font-size: 42px;
}

.week-grid > article > span {
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
}

.week-grid > article h3 {
  margin: 70px 0 16px;
  font-family: var(--serif);
  font-size: 34px;
}

.week-grid > article p {
  color: var(--muted);
  font-size: 14px;
}

.week-grid > article ul {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.week-grid > article li {
  padding: 9px 0;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}

.weekend-panel {
  color: #f3f7f8;
  background: var(--blue);
}

.weekend-panel > span {
  color: var(--ice) !important;
}

.weekend-panel p,
.weekend-panel li {
  color: #d7e5e9 !important;
}

.weekend-panel ul,
.weekend-panel li {
  border-color: rgba(255,255,255,.2) !important;
}

/* Time axis */

.time-guide {
  padding: 114px 0;
  color: #f1f6f7;
  background: var(--charcoal);
}

.light-heading {
  border-bottom-color: rgba(255,255,255,.17);
}

.light-heading .module-number,
.light-heading > div:first-child > span {
  color: var(--ice);
}

.light-heading > div:last-child > p {
  color: #b9c0c3;
}

.time-axis {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-light);
}

.time-axis::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  height: 1px;
  background: var(--ice);
}

.time-axis article {
  min-height: 360px;
  padding: 28px 26px;
  border-right: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}

.time-axis time {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding-right: 12px;
  color: var(--ice);
  background: var(--charcoal);
  font: 700 13px/1 Georgia, serif;
}

.time-axis article > div {
  margin-top: 80px;
}

.time-axis span {
  color: var(--ice);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}

.time-axis h3 {
  margin: 10px 0 14px;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.3;
}

.time-axis p {
  color: #b9c0c3;
  font-size: 13px;
}

/* Verify desk */

.verification {
  padding: 112px 0;
  background: var(--ice-pale);
}

.verification-layout {
  display: grid;
  grid-template-columns: .68fr 1.32fr;
  gap: 72px;
}

.verify-matrix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.verify-matrix article {
  min-height: 185px;
  padding: 25px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.verify-matrix span {
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}

.verify-matrix h3 {
  margin: 31px 0 8px;
  font-family: var(--serif);
  font-size: 23px;
}

.verify-matrix p {
  color: var(--muted);
  font-size: 12px;
}

/* Practical info */

.practical {
  padding: 114px 0;
  background: var(--white);
}

.practical-heading {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) minmax(320px, .55fr);
  gap: 58px;
  align-items: end;
  margin-bottom: 54px;
}

.practical-list {
  border-top: 2px solid var(--charcoal);
}

.practical-list article {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 180px;
  gap: 30px;
  align-items: center;
  min-height: 104px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.practical-list b {
  color: var(--blue);
  font: 400 30px/1 Georgia, serif;
}

.practical-list h3 {
  font-family: var(--serif);
  font-size: 24px;
}

.practical-list p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.practical-list article > span {
  justify-self: end;
  padding: 5px 9px;
  color: var(--blue-deep);
  background: var(--ice-pale);
  font-size: 10px;
  font-weight: 700;
}

/* Source policy */

.source-policy {
  padding: 100px 0;
  color: var(--blue-deep);
  background: var(--ice);
}

.source-layout {
  display: grid;
  grid-template-columns: .68fr 1.32fr;
  gap: 90px;
}

.source-layout h2 {
  margin-top: 18px;
}

.source-copy > p {
  max-width: 790px;
  font-family: var(--serif);
  font-size: 20px;
}

.source-copy ol {
  margin-top: 34px;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(16,58,94,.3);
}

.source-copy li {
  display: grid;
  grid-template-columns: 44px 180px 1fr;
  gap: 22px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(16,58,94,.3);
}

.source-copy li span {
  font: 700 10px/1.7 Georgia, serif;
}

.source-copy li strong {
  font-family: var(--serif);
  font-size: 18px;
}

.source-copy li p {
  color: #31566c;
  font-size: 12px;
}

/* Help */

.help {
  padding: 114px 0;
  background: var(--ivory);
}

.help-layout {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 95px;
}

.help-intro {
  position: sticky;
  top: 140px;
  align-self: start;
}

.help-list {
  border-top: 1px solid var(--line);
}

.help-list details {
  border-bottom: 1px solid var(--line);
}

.help-list summary {
  position: relative;
  padding: 24px 50px 24px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
}

.help-list summary::-webkit-details-marker {
  display: none;
}

.help-list summary::after {
  content: "+";
  position: absolute;
  right: 3px;
  top: 19px;
  color: var(--blue);
  font: 400 29px/1 Georgia, serif;
}

.help-list details[open] summary::after {
  content: "−";
}

.help-list details p {
  max-width: 760px;
  padding: 0 50px 25px 0;
  color: var(--muted);
  font-size: 14px;
}

/* Platform info */

.platform-info {
  padding: 114px 0;
  color: #f2f7f8;
  background: var(--blue-deep);
}

.platform-layout {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 80px;
  align-items: stretch;
}

.platform-main .module-number {
  color: var(--ice);
}

.platform-main > p:not(.module-number) {
  max-width: 760px;
  margin-top: 20px;
  color: #b8cbd1;
}

.platform-main dl {
  margin-top: 38px;
  border-top: 1px solid var(--line-light);
}

.platform-main dl > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 28px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-light);
}

.platform-main dt {
  color: var(--ice);
  font-size: 10px;
  font-weight: 800;
}

.platform-main dd {
  color: #d9e5e8;
  font-size: 13px;
}

.platform-diagram {
  min-height: 560px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 35px;
  color: var(--blue-deep);
  background: var(--ice);
}

.platform-diagram > span,
.platform-diagram > p {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .17em;
}

.platform-diagram > div {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  margin: 30px 0;
  border: 1px solid rgba(16,58,94,.28);
}

.platform-diagram > div::before,
.platform-diagram > div::after {
  content: "";
  position: absolute;
  background: rgba(16,58,94,.28);
}

.platform-diagram > div::before {
  left: 50%; top: 0; bottom: 0; width: 1px;
}

.platform-diagram > div::after {
  top: 50%; left: 0; right: 0; height: 1px;
}

.platform-diagram b,
.platform-diagram i,
.platform-diagram em,
.platform-diagram strong {
  font-family: var(--serif);
  font-size: 27px;
  font-style: normal;
  font-weight: 600;
}

.site-footer {
  color: #d5e2e6;
  background: #0b2d4a;
  border-top: 5px solid var(--ice);
}

.footer-layout {
  min-height: 190px;
  display: grid;
  grid-template-columns: 1.2fr .8fr 1fr;
  gap: 60px;
  align-items: center;
}

.footer-layout strong {
  color: #f4f8f8;
  font-family: var(--serif);
  font-size: 24px;
}

.footer-layout p {
  color: #9eb4bc;
  font-size: 12px;
}

.footer-layout div p {
  margin-top: 7px;
}

/* Restrained reveal */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 1180px) {
  .portal {
    width: min(calc(100% - 48px), 1480px);
  }

  .brand {
    min-width: auto;
  }

  .brand span {
    display: none;
  }

  .site-nav {
    gap: 15px;
  }

  .site-nav a {
    font-size: 11px;
  }

  .hero-layout {
    grid-template-columns: 220px minmax(0, 1fr) 250px;
  }

  .hero-center {
    padding-inline: 42px;
  }

  .positioning-layout {
    grid-template-columns: 120px 1fr .9fr;
    gap: 38px;
  }

  .positioning-panels article {
    grid-template-columns: 42px 1fr;
  }

  .positioning-panels p {
    grid-column: 2;
  }

  .plan-grid article {
    grid-template-columns: 100px 180px 1fr;
  }

  .plan-grid small {
    grid-column: 2 / -1;
  }
}

@media (max-width: 960px) {
  html {
    scroll-padding-top: 76px;
  }

  section {
    scroll-margin-top: 76px;
  }

  .status-strip {
    display: none;
  }

  .header-inner {
    min-height: 74px;
  }

  .brand img {
    width: 36px;
    height: 36px;
  }

  .brand strong {
    font-size: 18px;
  }

  .menu-toggle {
    position: relative;
    z-index: 3;
    width: 58px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    cursor: pointer;
  }

  .menu-toggle span {
    font-size: 11px;
    font-weight: 750;
  }

  .menu-toggle i,
  .menu-toggle i::before {
    content: "";
    width: 19px;
    height: 1px;
    display: block;
    background: currentColor;
    transition: transform .2s ease;
  }

  .menu-toggle i::before {
    transform: translateY(5px);
  }

  .menu-toggle[aria-expanded="true"] i {
    transform: translateY(2px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] i::before {
    transform: rotate(-90deg);
  }

  .site-nav {
    position: fixed;
    inset: 74px 0 auto;
    max-height: calc(100vh - 74px);
    display: grid;
    gap: 0;
    padding: 16px 24px 28px;
    overflow: auto;
    color: #fff;
    background: var(--blue-deep);
    transform: translateY(-120%);
    visibility: hidden;
    transition: transform .23s ease, visibility .23s ease;
  }

  .site-nav[data-open="true"] {
    transform: translateY(0);
    visibility: visible;
  }

  .site-nav a {
    padding: 16px 0;
    color: #dbe7ea;
    border-bottom: 1px solid rgba(255,255,255,.14);
    font-size: 14px;
  }

  .site-nav a::after {
    bottom: 10px;
    background: var(--ice);
  }

  .site-nav a:hover,
  .site-nav a[aria-current="page"] {
    color: #fff;
  }

  .hero-layout {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    padding-top: 58px;
  }

  .hero-center {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 30px 30px 60px;
  }

  .hero-index-left,
  .hero-index-right {
    align-self: stretch;
  }

  .hero-index-left {
    grid-column: 1;
    grid-row: 2;
  }

  .hero-index-right {
    grid-column: 2;
    grid-row: 2;
  }

  .hero-guide {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .signal-board {
    grid-column: 1 / -1;
    min-height: 220px;
  }

  .positioning-layout,
  .module-heading,
  .scenes-layout,
  .library-heading,
  .verification-layout,
  .practical-heading,
  .source-layout,
  .help-layout,
  .platform-layout {
    grid-template-columns: 1fr;
  }

  .positioning-layout,
  .module-heading,
  .library-heading,
  .practical-heading {
    gap: 24px;
  }

  .discovery,
  .scene-plans,
  .library,
  .weekday-weekend,
  .time-guide,
  .verification,
  .practical,
  .help,
  .platform-info {
    padding-block: 86px;
  }

  .need-map {
    grid-template-columns: 1fr 1fr;
  }

  .scenes-layout {
    gap: 45px;
  }

  .scenes-title,
  .help-intro {
    position: static;
  }

  .knowledge-table article {
    grid-template-columns: 50px minmax(220px, .7fr) 1.3fr;
  }

  .knowledge-table em {
    grid-column: 2 / -1;
    justify-self: start;
  }

  .week-grid {
    grid-template-columns: 1fr 1fr;
  }

  .week-title {
    grid-column: 1 / -1;
    min-height: auto;
  }

  .time-axis {
    grid-template-columns: 1fr 1fr;
  }

  .verify-matrix {
    grid-template-columns: repeat(4, 1fr);
  }

  .verify-matrix article {
    min-height: 170px;
  }

  .platform-diagram {
    min-height: 470px;
  }

  .footer-layout {
    grid-template-columns: 1fr 1fr;
    padding-block: 42px;
  }
}

@media (max-width: 640px) {
  .portal {
    width: min(calc(100% - 28px), 1480px);
  }

  .brand strong {
    font-size: 16px;
  }

  .hero-layout {
    grid-template-columns: 1fr;
  }

  .hero-center,
  .hero-index-left,
  .hero-index-right,
  .hero-guide,
  .signal-board {
    grid-column: 1;
  }

  .hero-center {
    grid-row: 1;
    padding-inline: 0;
  }

  .hero-index-left {
    grid-row: 2;
  }

  .hero-index-right {
    grid-row: 3;
  }

  .hero-guide {
    grid-row: 4;
    grid-template-columns: 1fr;
  }

  .signal-board {
    grid-row: 5;
  }

  h1 {
    font-size: clamp(42px, 12vw, 62px);
  }

  .positioning,
  .source-policy {
    padding-block: 68px;
  }

  .positioning-main h2,
  .module-heading h2,
  .scenes-title h2,
  .library-heading h2,
  .week-title h2,
  .verification-title h2,
  .practical-heading h2,
  .source-layout h2,
  .help-intro h2,
  .platform-main h2 {
    font-size: clamp(34px, 10vw, 48px);
  }

  .need-map {
    grid-template-columns: 1fr;
  }

  .need-summary {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .need-map article {
    min-height: 240px;
  }

  .plan-grid article {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .plan-grid small {
    grid-column: auto;
    margin-top: 7px;
  }

  .knowledge-table article {
    grid-template-columns: 42px 1fr;
    gap: 8px 14px;
    padding-block: 22px;
  }

  .knowledge-table p,
  .knowledge-table em {
    grid-column: 2;
  }

  .library-note {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .week-grid {
    grid-template-columns: 1fr;
  }

  .week-title,
  .week-grid > article {
    grid-column: 1;
    min-height: auto;
    padding: 30px 24px;
  }

  .week-grid > article h3 {
    margin-top: 45px;
  }

  .time-axis {
    grid-template-columns: 1fr;
  }

  .time-axis::before {
    display: none;
  }

  .time-axis article {
    min-height: auto;
  }

  .time-axis article > div {
    margin-top: 40px;
  }

  .verify-matrix {
    grid-template-columns: 1fr 1fr;
  }

  .practical-list article {
    grid-template-columns: 42px 1fr;
    gap: 8px 14px;
    padding-block: 22px;
  }

  .practical-list article > span {
    grid-column: 2;
    justify-self: start;
  }

  .source-copy > p {
    font-size: 18px;
  }

  .source-copy li {
    grid-template-columns: 35px 1fr;
    gap: 6px 14px;
  }

  .source-copy li p {
    grid-column: 2;
  }

  .help-list summary {
    padding-right: 38px;
    font-size: 18px;
  }

  .help-list details p {
    padding-right: 28px;
  }

  .platform-main dl > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .platform-diagram {
    min-height: 380px;
  }

  .footer-layout {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

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

  *,
  *::before,
  *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}