:root {
  color-scheme: light;
  --ink: #1e292a;
  --ink-soft: #4b5550;
  --paper: #eee5d2;
  --paper-light: #f8f1e1;
  --sage: #5f725f;
  --sage-deep: #3f5548;
  --blue: #335f7d;
  --blue-deep: #193d58;
  --terracotta: #b6533f;
  --terracotta-soft: #d07458;
  --gold: #a9823c;
  --deck-scale: 1;
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --font-serif: "Songti SC", "STSong", "Noto Serif CJK SC",
    "Source Han Serif SC", serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #35332f;
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button {
  font: inherit;
}

.deck {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(241, 229, 198, .14), transparent 57%),
    #32312d;
}

.stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1600px;
  height: 900px;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--deck-scale));
  transform-origin: center;
  background: var(--paper);
  box-shadow: 0 30px 110px rgba(13, 18, 18, .46);
}

.slide {
  position: absolute;
  inset: 0;
  width: 1600px;
  height: 900px;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(48px, 0, 0) scale(1.007);
  transition:
    opacity 520ms cubic-bezier(.22, 1, .36, 1),
    transform 680ms cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 680ms;
}

.slide.active {
  z-index: 3;
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: 0s;
}

.slide.before {
  transform: translate3d(-44px, 0, 0) scale(.998);
}

.slide.after {
  transform: translate3d(48px, 0, 0) scale(1.007);
}

.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  box-shadow: inset 0 0 0 1px rgba(60, 57, 47, .13);
  pointer-events: none;
}

.slide-art {
  position: absolute;
  inset: 0;
  z-index: -3;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.art-full {
  object-position: center;
}

.left-wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(248, 241, 225, .985) 0%,
      rgba(248, 241, 225, .955) 28%,
      rgba(248, 241, 225, .78) 41%,
      rgba(248, 241, 225, .18) 57%,
      transparent 69%);
  pointer-events: none;
}

[data-anim] {
  opacity: 0;
  translate: 0 17px;
  transition:
    opacity 620ms cubic-bezier(.22, 1, .36, 1),
    translate 720ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--delay, 0ms);
}

.slide.active [data-anim] {
  opacity: 1;
  translate: 0 0;
}

.slide-meta {
  position: absolute;
  z-index: 12;
  top: 40px;
  left: 70px;
  right: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(30, 42, 45, .63);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .17em;
}

.slide-meta::after {
  content: "";
  position: absolute;
  top: 29px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(51, 63, 60, .28), rgba(51, 63, 60, .04));
}

.slide-meta-light {
  color: rgba(248, 241, 225, .78);
}

.slide-meta-light::after {
  background: linear-gradient(90deg, rgba(248, 241, 225, .38), transparent);
}

.eyebrow {
  margin: 0 0 17px;
  color: var(--terracotta);
  font-size: 15px;
  font-weight: 750;
  letter-spacing: .17em;
}

.eyebrow-warm {
  color: #efbd7d;
}

h1,
h2,
h3,
p,
blockquote {
  margin-top: 0;
}

h1,
h2,
h3 {
  margin-bottom: 0;
  font-weight: 700;
}

h2 {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: -.035em;
}

h2 em {
  color: var(--blue-deep);
  font-style: normal;
}

.body-copy {
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.66;
}

.body-copy p {
  margin: 0 0 9px;
}

.body-copy p:last-child {
  margin-bottom: 0;
}

.paper-claim {
  position: relative;
  margin: 0;
  padding: 20px 24px 19px;
  color: #26302f;
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.58;
  background: rgba(241, 221, 169, .89);
  border: 1px solid rgba(124, 91, 41, .15);
  box-shadow: 0 11px 24px rgba(73, 55, 31, .12);
  transform: rotate(-.42deg);
}

.paper-claim::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 30px;
  width: 72px;
  height: 18px;
  background: rgba(220, 194, 134, .72);
  transform: rotate(2deg);
}

.paper-claim strong {
  color: var(--terracotta);
  font-weight: 700;
}

/* Page 1 */
.slide-cover {
  background: #e8dcc0;
}

.slide-cover .slide-art {
  filter: saturate(.92) contrast(1.015);
}

.cover-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(248, 239, 215, .96) 0%,
      rgba(248, 239, 215, .83) 31%,
      rgba(248, 239, 215, .18) 49%,
      transparent 67%),
    linear-gradient(180deg, rgba(35, 45, 43, .03), transparent 38%, rgba(35, 45, 43, .08));
}

.cover-copy {
  position: absolute;
  top: 116px;
  left: 92px;
  z-index: 4;
  width: 700px;
}

.edition {
  margin: 0 0 34px;
  color: var(--terracotta);
  font-size: 14px;
  font-weight: 760;
  letter-spacing: .22em;
}

.cover-kicker {
  margin: 0 0 13px;
  color: var(--sage-deep);
  font-size: 24px;
  font-weight: 720;
  letter-spacing: .13em;
}

.cover-copy h1 {
  color: #1f2b2c;
  font-family: var(--font-serif);
  font-size: 70px;
  line-height: 1.08;
  letter-spacing: -.045em;
}

.cover-subtitle {
  margin: 32px 0 0;
  color: #4e5650;
  font-size: 21px;
  line-height: 1.72;
}

.cover-principles {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  color: var(--blue-deep);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
}

.cover-principles i {
  width: 30px;
  height: 1px;
  background: var(--terracotta);
}

.cover-note {
  position: absolute;
  left: 96px;
  bottom: 66px;
  z-index: 4;
  margin: 0;
  padding-left: 17px;
  color: #5c5f54;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  border-left: 3px solid var(--terracotta);
}

/* Page 2 */
.context-copy {
  position: absolute;
  top: 106px;
  left: 74px;
  z-index: 5;
  width: 680px;
}

.context-copy h2 {
  font-size: 45px;
}

.context-body {
  width: 600px;
  margin-top: 22px;
}

.context-copy .paper-claim {
  width: 625px;
  margin-top: 20px;
}

/* Page 3 */
.source-wash {
  background:
    linear-gradient(90deg,
      rgba(248, 241, 225, .99) 0%,
      rgba(248, 241, 225, .97) 34%,
      rgba(248, 241, 225, .80) 47%,
      rgba(248, 241, 225, .18) 61%,
      transparent 73%);
}

.source-copy {
  position: absolute;
  z-index: 5;
  top: 101px;
  left: 72px;
  width: 700px;
}

.source-copy h2 {
  font-size: 43px;
}

.source-body {
  width: 610px;
  margin-top: 22px;
}

.source-body strong {
  color: var(--blue-deep);
}

.source-functions {
  position: absolute;
  z-index: 5;
  top: 408px;
  left: 72px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 26px;
  width: 700px;
  padding: 0;
}

.source-functions article {
  display: grid;
  grid-template-columns: 31px 1fr;
  gap: 11px;
  min-height: 80px;
  padding: 11px 0 9px;
  border-top: 1px solid rgba(55, 70, 64, .19);
}

.source-functions article:nth-child(5) {
  grid-column: 1 / 2;
}

.source-functions b {
  color: var(--terracotta);
  font-size: 12px;
  letter-spacing: .12em;
}

.source-functions h3 {
  color: var(--blue-deep);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.1;
}

.source-functions p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 13.2px;
  line-height: 1.4;
}

.source-claim {
  position: absolute;
  z-index: 6;
  left: 72px;
  bottom: 48px;
  margin: 0;
  padding-left: 17px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.5;
  border-left: 3px solid var(--terracotta);
}

.source-claim span {
  color: var(--blue-deep);
}

.source-claim strong {
  color: var(--terracotta);
}

/* Page 4 */
.zones-copy {
  position: absolute;
  z-index: 5;
  top: 108px;
  left: 72px;
  width: 640px;
}

.zones-copy h2 {
  font-size: 47px;
}

.zones-intro {
  width: 560px;
  margin: 24px 0 0;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.65;
}

.zone-panel {
  position: absolute;
  z-index: 5;
  left: 72px;
  width: 620px;
  padding: 16px 19px 15px;
  background: rgba(249, 243, 229, .68);
  border: 1px solid rgba(55, 70, 64, .12);
  box-shadow: none;
  backdrop-filter: blur(4px);
}

.zone-panel small {
  color: var(--terracotta);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .15em;
}

.zone-panel h3 {
  margin-top: 5px;
  color: var(--blue-deep);
  font-family: var(--font-serif);
  font-size: 24px;
}

.zone-panel p {
  margin: 7px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

.zone-interaction {
  top: 345px;
  border-left: 4px solid var(--terracotta);
}

.zone-linkage {
  top: 535px;
  border-left: 4px solid var(--blue);
}

.zones-claim {
  position: absolute;
  z-index: 5;
  left: 72px;
  bottom: 45px;
  margin: 0;
  padding-left: 17px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.55;
  border-left: 3px solid var(--terracotta);
}

.zones-claim strong {
  color: var(--terracotta);
}

/* Page 5 */
.slide-immersive {
  color: #f8f1e2;
  background: #111c23;
}

.slide-immersive .slide-art {
  filter: brightness(.87) saturate(.92) contrast(1.04);
}

.immersive-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(10, 19, 24, .98) 0%,
      rgba(10, 19, 24, .94) 36%,
      rgba(10, 19, 24, .63) 47%,
      rgba(10, 19, 24, .12) 60%,
      transparent 72%),
    linear-gradient(180deg, rgba(7, 12, 17, .13), transparent 58%, rgba(7, 12, 17, .2));
}

.immersive-copy {
  position: absolute;
  z-index: 5;
  top: 98px;
  left: 70px;
  width: 735px;
}

.immersive-copy h2 {
  color: #f8f1e2;
  font-size: 45px;
}

.immersive-copy h2 em {
  color: #efbd7d;
}

.immersive-body {
  width: 650px;
  margin-top: 20px;
  color: rgba(246, 241, 228, .84);
  font-size: 15px;
  line-height: 1.55;
}

.immersive-functions {
  position: absolute;
  z-index: 5;
  top: 434px;
  left: 70px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  width: 690px;
  padding: 0;
}

.immersive-functions article {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  min-height: 76px;
  padding: 10px 0 8px;
  border-top: 1px solid rgba(247, 235, 211, .19);
}

.immersive-functions article:nth-child(5) {
  grid-column: 1 / 2;
}

.immersive-functions b {
  color: #efbd7d;
  font-size: 12px;
}

.immersive-functions h3 {
  color: #f8f1e2;
  font-family: var(--font-serif);
  font-size: 16.5px;
}

.immersive-functions p {
  margin: 5px 0 0;
  color: rgba(246, 241, 228, .72);
  font-size: 12.8px;
  line-height: 1.38;
}

.immersive-claim {
  position: absolute;
  z-index: 5;
  left: 70px;
  bottom: 44px;
  margin: 0;
  padding-left: 17px;
  color: #f8f1e2;
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.55;
  border-left: 3px solid #efbd7d;
}

.immersive-claim strong {
  color: #efbd7d;
}

/* Page 6 */
.slide-showcase {
  color: #f8f1e2;
  background: #0b1116;
}

.showcase-placeholder {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background: linear-gradient(145deg, #101820 0%, #16242d 58%, #0b1116 100%);
}

.showcase-placeholder::before {
  content: "";
  position: absolute;
  top: 96px;
  right: 62px;
  bottom: 62px;
  left: 765px;
  border: 1px dashed rgba(238, 189, 125, .34);
}

.placeholder-label {
  position: absolute;
  top: 50%;
  right: 62px;
  width: 773px;
  transform: translateY(-50%);
  display: grid;
  gap: 8px;
  text-align: center;
}

.placeholder-label b {
  color: rgba(248, 241, 226, .76);
  font-family: var(--font-serif);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: .08em;
}

.placeholder-label span {
  color: rgba(239, 189, 125, .68);
  font-size: 13px;
  letter-spacing: .16em;
}

.placeholder-label small {
  color: rgba(248, 241, 226, .42);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .08em;
}

.showcase-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(7, 12, 17, .98) 0%,
      rgba(7, 12, 17, .76) 26%,
      rgba(7, 12, 17, .23) 43%,
      transparent 59%),
    linear-gradient(180deg, rgba(7, 12, 17, .18), transparent 56%, rgba(7, 12, 17, .22));
}

.showcase-copy {
  position: absolute;
  z-index: 5;
  top: 112px;
  left: 72px;
  width: 680px;
}

.showcase-copy h2 {
  color: #f8f1e2;
  font-size: 48px;
}

.showcase-copy h2 em {
  color: #efbd7d;
}

.showcase-lead {
  margin: 28px 0 0;
  color: rgba(248, 241, 226, .82);
  font-size: 18px;
  line-height: 1.7;
}

.showcase-note {
  position: absolute;
  z-index: 5;
  left: 72px;
  bottom: 74px;
  margin: 0;
  padding: 16px 21px;
  color: rgba(248, 241, 226, .91);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.58;
  background: rgba(7, 12, 17, .68);
  border-left: 3px solid #efbd7d;
  backdrop-filter: blur(8px);
}

/* Page 7 */
.linkage-copy {
  position: absolute;
  z-index: 5;
  top: 105px;
  left: 72px;
  width: 700px;
}

.linkage-copy h2 {
  font-size: 46px;
}

.linkage-body {
  width: 610px;
  margin-top: 23px;
}

.linkage-relations {
  position: absolute;
  z-index: 5;
  top: 414px;
  left: 72px;
  display: grid;
  gap: 0;
  width: 690px;
}

.linkage-relations article {
  position: relative;
  min-height: 78px;
  padding: 11px 8px 10px 48px;
  background: transparent;
  border-top: 1px solid rgba(55, 70, 64, .18);
  box-shadow: none;
}

.linkage-relations b {
  position: absolute;
  top: 14px;
  left: 7px;
  color: var(--terracotta);
  font-size: 12px;
  letter-spacing: .1em;
}

.linkage-relations h3 {
  color: var(--blue-deep);
  font-family: var(--font-serif);
  font-size: 18px;
}

.linkage-relations p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.42;
}

.linkage-claim {
  position: absolute;
  z-index: 5;
  left: 72px;
  bottom: 45px;
  margin: 0;
  padding-left: 17px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 20.5px;
  line-height: 1.55;
  border-left: 3px solid var(--terracotta);
}

.linkage-claim strong {
  color: var(--terracotta);
}

/* Page 8 */
.learning-copy {
  position: absolute;
  z-index: 5;
  top: 101px;
  left: 72px;
  width: 780px;
}

.learning-copy h2 {
  font-size: 44px;
}

.learning-body {
  width: 680px;
  margin-top: 20px;
}

.learning-intro {
  margin: 17px 0 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.learning-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 700px;
}

.learning-path span {
  padding: 7px 11px;
  color: #f7f0df;
  font-size: 13px;
  font-weight: 700;
  background: var(--blue-deep);
}

.learning-path span:nth-of-type(even) {
  background: var(--terracotta);
}

.learning-path i {
  width: 14px;
  height: 1px;
  background: rgba(33, 55, 65, .38);
}

.learning-note {
  width: 675px;
  margin: 13px 0 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.55;
}

.learning-claim {
  width: 640px;
  margin-top: 18px;
}

/* Page 9 */
.public-wash {
  background:
    linear-gradient(90deg,
      rgba(248, 241, 225, .99) 0%,
      rgba(248, 241, 225, .96) 33%,
      rgba(248, 241, 225, .76) 47%,
      rgba(248, 241, 225, .15) 63%,
      transparent 74%);
}

.public-copy {
  position: absolute;
  z-index: 5;
  top: 104px;
  left: 72px;
  width: 750px;
}

.public-copy h2 {
  font-size: 43px;
}

.public-body {
  width: 650px;
  margin-top: 22px;
}

.public-functions {
  position: absolute;
  z-index: 5;
  top: 404px;
  left: 72px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 22px;
  width: 690px;
}

.public-functions article {
  min-height: 115px;
  padding: 12px 8px 10px;
  background: rgba(249, 243, 229, .54);
  border-top: 2px solid rgba(178, 99, 69, .58);
  box-shadow: none;
}

.public-functions b {
  color: var(--terracotta);
  font-size: 12px;
}

.public-functions h3 {
  margin-top: 6px;
  color: var(--blue-deep);
  font-family: var(--font-serif);
  font-size: 17.5px;
}

.public-functions p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 13.2px;
  line-height: 1.42;
}

.public-claim {
  position: absolute;
  z-index: 5;
  left: 72px;
  bottom: 45px;
  margin: 0;
  padding-left: 17px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.55;
  border-left: 3px solid var(--terracotta);
}

.public-claim strong {
  color: var(--terracotta);
}

/* Page 10 */
.regional-wash {
  background:
    linear-gradient(90deg,
      rgba(248, 241, 225, .99) 0%,
      rgba(248, 241, 225, .97) 38%,
      rgba(248, 241, 225, .79) 50%,
      rgba(248, 241, 225, .15) 65%,
      transparent 77%);
}

.regional-copy {
  position: absolute;
  z-index: 5;
  top: 102px;
  left: 72px;
  width: 715px;
}

.regional-copy h2 {
  font-size: 45px;
}

.regional-body {
  width: 640px;
  margin-top: 22px;
}

.regional-claim {
  width: 640px;
  margin-top: 19px;
}

/* Page 11 */
.slide-comparison {
  background: #ece2cc;
}

.comparison-paper {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 78% 12%, rgba(57, 93, 117, .12), transparent 28%),
    radial-gradient(circle at 18% 86%, rgba(182, 83, 63, .1), transparent 30%),
    linear-gradient(90deg, rgba(255, 255, 255, .12), transparent 25%, rgba(255, 255, 255, .1)),
    #ece2cc;
}

.comparison-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(70, 60, 42, .035) 8px),
    repeating-linear-gradient(90deg, transparent 0 11px, rgba(70, 60, 42, .025) 12px);
}

.comparison-heading {
  position: absolute;
  z-index: 5;
  top: 88px;
  left: 55px;
  right: 55px;
}

.comparison-heading .eyebrow {
  margin-bottom: 10px;
  font-size: 13px;
}

.comparison-heading h2 {
  font-family: var(--font-sans);
  font-size: 35px;
  line-height: 1.18;
  letter-spacing: -.02em;
}

.comparison-heading p:last-child {
  width: 1320px;
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.45;
}

.comparison-grid {
  position: absolute;
  z-index: 5;
  top: 194px;
  left: 55px;
  right: 55px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  height: 525px;
}

.plan-card {
  position: relative;
  overflow: hidden;
  padding: 15px 18px 13px;
  background: rgba(249, 243, 229, .91);
  border: 1px solid rgba(55, 70, 64, .16);
  box-shadow: 0 14px 34px rgba(45, 49, 42, .09);
}

.plan-basic {
  border-top: 5px solid var(--sage);
}

.plan-immersive {
  border-top: 5px solid var(--blue);
}

.plan-operation {
  background: rgba(242, 233, 208, .97);
  border: 1px solid rgba(166, 109, 63, .3);
  border-top: 5px solid var(--terracotta);
  box-shadow: 0 18px 40px rgba(97, 60, 36, .15);
}

.plan-badge {
  position: absolute;
  top: 11px;
  right: 13px;
  padding: 5px 8px;
  color: #fff9eb;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  background: var(--terracotta);
}

.plan-head small {
  display: block;
  color: var(--terracotta);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .12em;
}

.plan-head h3 {
  margin: 3px 0 7px;
  color: var(--blue-deep);
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.12;
}

.plan-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13.2px;
  line-height: 1.42;
}

.plan-head .plan-position {
  min-height: 56px;
}

.plan-head .plan-build {
  min-height: 48px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(55, 70, 64, .14);
}

.plan-head b {
  display: inline-block;
  margin-right: 7px;
  color: var(--ink);
  font-size: 12px;
}

.dimension-list {
  margin: 8px 0 0;
  border-top: 1px solid rgba(55, 70, 64, .19);
}

.dimension-list div {
  display: grid;
  grid-template-columns: 93px 1fr;
  gap: 9px;
  min-height: 39px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(55, 70, 64, .11);
}

.dimension-list dt {
  color: var(--terracotta);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.35;
}

.dimension-list dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12.3px;
  line-height: 1.35;
}

.comparison-footer {
  position: absolute;
  z-index: 5;
  left: 55px;
  right: 340px;
  bottom: 20px;
}

.progression {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--blue-deep);
  font-size: 14px;
  font-weight: 720;
}

.progression i {
  color: var(--terracotta);
  font-style: normal;
}

.progression strong {
  color: var(--terracotta);
}

.comparison-core {
  margin: 7px 0 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.38;
}

.comparison-core strong {
  color: var(--terracotta);
}

.upgrade-note {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.35;
}

/* Page 12 */
.network-wash {
  background:
    linear-gradient(90deg,
      rgba(248, 241, 225, .99) 0%,
      rgba(248, 241, 225, .97) 38%,
      rgba(248, 241, 225, .78) 52%,
      rgba(248, 241, 225, .16) 67%,
      transparent 78%);
}

.network-copy {
  position: absolute;
  z-index: 5;
  top: 99px;
  left: 72px;
  width: 815px;
}

.network-copy h2 {
  font-size: 42px;
}

.network-intro {
  width: 700px;
  margin: 18px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.network-levels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  width: 735px;
  margin-top: 17px;
}

.network-levels article {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 9px;
  padding: 11px 12px;
  background: rgba(249, 243, 229, .84);
  border: 1px solid rgba(55, 70, 64, .12);
  backdrop-filter: blur(6px);
}

.network-levels b {
  color: var(--terracotta);
  font-size: 11px;
}

.network-levels h3 {
  color: var(--blue-deep);
  font-family: var(--font-serif);
  font-size: 17px;
}

.network-levels p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.38;
}

.network-sequence {
  margin: 17px 0 0;
  color: var(--blue-deep);
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.48;
}

.network-sequence strong {
  color: var(--terracotta);
}

.network-claim {
  margin: 13px 0 0;
  padding-left: 16px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.45;
  border-left: 3px solid var(--terracotta);
}

.network-claim strong {
  color: var(--terracotta);
}

.network-brand {
  position: absolute;
  z-index: 8;
  left: 72px;
  right: auto;
  bottom: 38px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: rgba(248, 241, 225, .8);
  backdrop-filter: blur(6px);
}

.network-brand span {
  color: rgba(40, 48, 47, .62);
  font-size: 11px;
  letter-spacing: .13em;
}

.network-brand img {
  display: block;
  width: 112px;
  height: auto;
}

/* Controls */
.deck-chrome {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

.progress-track {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 18px;
  height: 1px;
  background: rgba(87, 77, 58, .17);
}

.progress-track span {
  display: block;
  width: 8.33%;
  height: 1px;
  background: var(--terracotta);
  transition: width 420ms cubic-bezier(.22, 1, .36, 1);
}

.deck-controls {
  position: absolute;
  right: 108px;
  bottom: 30px;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

.deck-controls button {
  min-width: 82px;
  padding: 9px 13px;
  color: #5b584f;
  font-size: 12px;
  font-weight: 650;
  background: rgba(249, 244, 231, .9);
  border: 1px solid rgba(72, 69, 60, .16);
  border-radius: 999px;
  box-shadow: 0 4px 15px rgba(44, 42, 35, .1);
  backdrop-filter: blur(7px);
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, opacity 180ms ease;
}

.deck-controls button:hover:not(:disabled) {
  color: var(--terracotta);
  background: rgba(255, 250, 238, .98);
}

.deck-controls button:disabled {
  opacity: .35;
  cursor: default;
}

.page-counter {
  position: absolute;
  right: 28px;
  bottom: 33px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(61, 61, 54, .5);
  font-size: 10px;
  letter-spacing: .09em;
}

.page-counter b {
  color: var(--terracotta);
  font-size: 12px;
}

.page-counter i {
  width: 12px;
  height: 1px;
  background: rgba(65, 61, 53, .25);
}

.key-hint {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: 18px;
  padding: 8px 12px;
  color: rgba(255, 255, 255, .75);
  font-size: 12px;
  letter-spacing: .07em;
  background: rgba(18, 18, 17, .67);
  border-radius: 999px;
  transform: translateX(-50%);
  opacity: 1;
  transition: opacity 520ms ease;
}

.key-hint.hidden {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .slide,
  [data-anim],
  .progress-track span,
  .deck-controls button,
  .key-hint {
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}