@font-face {
  font-family: 'Gambarino';
  src: url('../fonts/Gambarino-Regular.woff2') format('woff2'),
       url('../fonts/Gambarino-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Light.woff2') format('woff2'),
       url('../fonts/Satoshi-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Regular.woff2') format('woff2'),
       url('../fonts/Satoshi-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-LightItalic.woff2') format('woff2'),
       url('../fonts/Satoshi-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Medium.woff2') format('woff2'),
       url('../fonts/Satoshi-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Bold.woff2') format('woff2'),
       url('../fonts/Satoshi-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --bg: #f5f8fb;
  --black: #000100;
  --white: #fff;
  --accent-green: #81d83d;
  --gray-meta: #9d9e9e;
  --gray-eyebrow: #808080;
  --gray-nav-inactive: #a1a1a1;
  --gray-body-secondary: #6b6b6b;
  --placeholder-bg: #ececec;
  --divider: #cdcdcd;

  --font-gambarino: 'Gambarino', serif;
  --font-satoshi: 'Satoshi', sans-serif;
  --font-nav: 'Satoshi', sans-serif;
  --font-cookie: 'Cookie', cursive;

  --nav-pad: 60px;
  --cs-margin: 24px;
  --header-margin: clamp(28px, 11vw, 160px);

  --wide-w: min(1034px, calc(100% - 382px - 24px));
  --wide-x: max(382px, calc(50% - var(--wide-w) / 2));
  --wide-w-narrow: calc(var(--wide-w) * 0.654);
  --content-w: calc(var(--wide-w) * 0.673);
  --content-x: calc(var(--wide-x) + var(--wide-w) * 0.327);

  --gap-heading-para: 24px;
  --gap-major: 80px;
  --gap-minor: 40px;
  --journey-axis-w: 112px;
  --journey-gap: 16px;
}

body {
  background: var(--bg);
  color: var(--black);
  font-family: var(--font-satoshi);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

nav.site-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 57px var(--nav-pad) 0;
  font-family: var(--font-nav);
  font-size: 16px;
}

.logo-mark {
  position: absolute;
  left: var(--nav-pad);
  top: 27px;
  z-index: 11;
  font-family: var(--font-cookie);
  font-size: 120px;
  line-height: 1;
  color: var(--accent-green);
  text-decoration: none;
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 42px;
}

.site-nav ul a {
  text-decoration: none;
  color: var(--black);
  font-weight: 400;
  line-height: 1.757;
}

.site-nav ul .nav-lang {
  font-size: 14px;
  font-family: "Chiron Sung HK", "Songti SC", "Noto Serif CJK SC",
    "Source Han Serif SC", STSong, SimSun, Georgia, serif;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: flex-end;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--black);
}
.nav-toggle svg { display: block; width: 18px; height: 14px; }

.cs-header {
  padding: 210px var(--header-margin) 0;
}

.cs-tagline {
  font-family: var(--font-gambarino);
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 32px);
  letter-spacing: 0.04em;
  line-height: 1.402;
  max-width: min(580px, 100%);
}

.cs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(36px, 16vw, 222px);
  margin-top: 48px;
}

.cs-meta .label {
  font-family: var(--font-satoshi);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--gray-meta);
}

.cs-meta .value {
  font-family: var(--font-satoshi);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.48px;
  color: var(--black);
  margin-top: 8px;
  line-height: 1.6;
}

.cs-cover {
  width: 100%;
  aspect-ratio: var(--ar, 1440 / 712);
  background: var(--placeholder-bg);
  margin-top: 96px;
  margin-bottom: 128px;
  overflow: hidden;
}
.cs-cover > img,
.cs-cover > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

}

.cs-cover > img { transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1); }
.cs-cover.is-zoomed > img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
 .cs-cover > img { transition: none; }
}

main { padding-bottom: var(--header-margin); }

.cs-rail {
  position: fixed;
  left: var(--cs-margin);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 10;
  max-height: 90vh;
  overflow-y: auto;

  width: max-content;
}

.cs-rail.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.cs-rail a {
  display: block;
  font-family: var(--font-gambarino);
  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;
  color: var(--gray-nav-inactive);
  opacity: 0.4;
  white-space: nowrap;
  transition: color 0.3s ease, opacity 0.3s ease, font-size 0.3s ease;
}

.cs-rail a.is-active {
  color: var(--accent-green);
  opacity: 1;
  font-size: 24px;
}

.cs-rail a:not(.is-active):hover {
  opacity: 0.75;
}

.cs-section {
  position: relative;
}

.cs-eyebrow {
  font-family: var(--font-satoshi);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.48px;
  text-transform: capitalize;
  color: var(--gray-eyebrow);
  margin-left: var(--content-x);
  width: var(--content-w);
}

.cs-heading {
  font-family: var(--font-gambarino);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.631;
  color: var(--black);
  margin-left: var(--content-x);
  width: var(--content-w);
  margin-top: 0;
}

.cs-text {
  font-family: var(--font-satoshi);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.631;
  color: var(--black);
  margin-left: var(--content-x);
  width: var(--content-w);
  margin-top: var(--gap-heading-para);
}

.cs-text + .cs-text { margin-top: var(--gap-heading-para); }
.cs-text.secondary { color: var(--gray-body-secondary); }
.cs-text.tight { margin-top: var(--gap-minor); }

.cs-two-up + .cs-text,
.cs-wide-media + .cs-text {
  margin-top: var(--gap-major);
}

.cs-numbered-item {
  font-family: var(--font-satoshi);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.631;
  color: var(--black);
  margin-left: var(--content-x);
  width: var(--content-w);
  margin-top: var(--gap-minor);
}
.cs-numbered-item .num { font-weight: 400; }

.cs-divider-major, .cs-divider-minor {
  height: 0.4px;
  background: var(--divider);
  margin-left: var(--wide-x);
  width: var(--wide-w);
}
.cs-divider-major { margin-top: var(--gap-major); margin-bottom: var(--gap-major); }
.cs-divider-minor { margin-top: var(--gap-minor); margin-bottom: var(--gap-minor); }
.cs-divider-minor.narrow { margin-left: var(--content-x); width: var(--content-w); }

.cs-cover { aspect-ratio: 2360 / 1424; }
.cs-wide-media {
  margin: var(--gap-major) 0 0 var(--wide-x);
  width: var(--wide-w);
}
.cs-wide-media.narrow { width: var(--wide-w-narrow); }
.ca-chart { container-type: inline-size; position: relative; }
.ca-mobile-axis { display: none; }
.ca-viewport { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.ca-viewport:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 4px; }
.ca-plot { position: relative; width: 100%; min-width: 660px; }
.ca-plot svg { display: block; width: 100%; height: auto; }
.ca-axis { stroke: var(--divider); stroke-width: .4; vector-effect: non-scaling-stroke; pointer-events: none; }
.ca-category[data-ca-category="takeout"], .ca-legend [data-ca-select="takeout"] { --category-gray: #afb6b6; --category-color: #25313d; }
.ca-category[data-ca-category="fastfood"], .ca-legend [data-ca-select="fastfood"] { --category-gray: #c3c9c9; --category-color: #8d2820; }
.ca-category[data-ca-category="socializing"], .ca-legend [data-ca-select="socializing"] { --category-gray: #cdd1d1; --category-color: #ffa455; }
.ca-bubble { fill: var(--category-gray); fill-opacity: .65; cursor: pointer; transition: fill 180ms linear; }
.ca-category.is-active .ca-bubble { fill: var(--bubble-color); }
.ca-chanlong { fill: var(--accent-green); }
.ca-axis-label { position: absolute; font: 400 14px/1.4 var(--font-satoshi); pointer-events: none; }
.ca-axis-label { max-width: 13%; color: var(--gray-body-secondary); }
.ca-costly { left: 49.677%; top: 8.276%; transform: translate(-50%, -50%); }
.ca-low-cost { left: 49.677%; top: 93.793%; transform: translate(-50%, -50%); }
.ca-minimal { left: 0; top: 53.793%; transform: translateY(-50%); }
.ca-experience { right: 0; top: 53.793%; transform: translateY(-50%); text-align: right; }
.ca-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 24px; margin-top: 24px; }
.ca-legend button, .ca-chanlong-key { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 400 14px/1.631 var(--font-satoshi); color: var(--black); }
.ca-legend button { padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; transition: color 180ms linear; }
.ca-legend button.is-active { color: var(--category-color); }
.ca-key { width: 10px; height: 10px; flex: none; background: var(--category-gray); transition: background-color 180ms linear; }
.ca-legend button.is-active .ca-key { background: var(--category-color); }
.ca-chanlong-key .ca-key { background: var(--accent-green); }
.ca-chart figcaption { margin-top: 12px; font: 300 13px/1.5 var(--font-satoshi); color: var(--gray-body-secondary); text-align: right; }
.ca-chart.is-pending .ca-bubbles { opacity: 0; }
.ca-chart.is-playing .ca-bubbles { animation: ca-bubbles-appear 600ms linear both; }
@keyframes ca-bubbles-appear { from { opacity: 0; } to { opacity: 1; } }
.journey-chart {
  --journey-plot-w: max(660px, calc(100cqw - var(--journey-axis-w) - var(--journey-gap)));
  container-type: inline-size;
  font: 400 14px/1.4 var(--font-satoshi);
}
.journey-chart-layout { display: grid; grid-template-columns: var(--journey-axis-w) minmax(0, 1fr); gap: var(--journey-gap); }
.journey-axis { position: relative; height: calc(var(--journey-plot-w) * 2 / 5); color: var(--gray-body-secondary); }
.journey-tick { position: absolute; top: var(--y); right: 0; transform: translateY(-50%); }
.journey-score { display: none; }
.journey-viewport { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; min-width: 0; }
.journey-viewport:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 4px; }
.journey-plot { width: var(--journey-plot-w); }
.journey-plot svg { display: block; width: 100%; height: auto; overflow: hidden; }
.journey-wave { fill: var(--gray-eyebrow); fill-opacity: var(--wave-alpha); }
.journey-chanlong { fill: none; stroke: var(--accent-green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.journey-line-reveal { fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: butt; stroke-linejoin: round; }
.journey-stages { position: relative; height: 56px; margin-top: var(--journey-gap); }
.journey-stage { position: absolute; top: 0; left: var(--x); width: 11.4%; transform: translateX(-50%); text-align: center; }
.journey-chart.is-pending .journey-wave { clip-path: inset(0 100% 0 0); }
.journey-chart.is-pending .journey-line-reveal { opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; }
.journey-chart.is-playing .journey-wave { animation: journey-wave-reveal 600ms linear both; }
.journey-chart.is-playing .journey-line-reveal { animation: journey-line-draw 800ms ease-in-out 700ms both; }
@keyframes journey-wave-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes journey-line-draw {
  from { opacity: 0; stroke-dashoffset: 1; }
  1% { opacity: 1; }
  to { opacity: 1; stroke-dashoffset: 0; }
}
.pc-module { --pc-heading-gap: 16px; --pc-heading-size: 14px; --pc-heading-line: calc(var(--pc-heading-size) * 1.4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-minor); align-items: end; margin: var(--gap-major) 0 0 var(--wide-x); width: var(--wide-w); }
.pc-module > .pc-chart { margin: 0; width: auto; min-width: 0; }
.chart-group-divider + .pc-module { margin-top: var(--gap-minor); }
@media (min-width: 601px) {
  /* Satoshi 16px at 1.631 line-height leaves about 7px below letters, or 4px with a descender. */
  .pc-insights > div { transform: translateY(7px); }
  .pc-insights > [data-pc-insight="independent"] { transform: translateY(4px); }
}
.pc-chart { --pc-height: clamp(300px, 100cqw, 480px); --pc-max-share: 60; --pc-plot-height: calc(var(--pc-height) * var(--pc-max-share) / 100 + 64px); --pc-gap: clamp(8px, 2.5cqw, 14px); container-type: inline-size; font: 400 14px/1.4 var(--font-satoshi); }
.pc-viewport { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.pc-viewport:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 4px; }
.pc-plot { width: 100%; min-width: 0; }
.pc-headings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pc-gap); margin-top: var(--pc-heading-gap); text-align: center; }
.pc-headings h3 { font: 400 var(--pc-heading-size)/var(--pc-heading-line) var(--font-satoshi); }
.pc-bars { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--pc-gap); }
.pc-baseline { position: absolute; bottom: 0; left: 0; right: 0; height: 0.4px; z-index: 2; background: var(--divider); pointer-events: none; }
.pc-column { position: relative; z-index: 1; display: block; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--black); font: inherit; text-align: center; cursor: pointer; transition: opacity 180ms linear; }
.pc-column:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 4px; }
.pc-column[data-pc-category="independent"], .pc-insights > [data-pc-insight="independent"] { --pc-color: #afb6b6; }
.pc-column[data-pc-category="indirect"], .pc-insights > [data-pc-insight="indirect"] { --pc-color: #919b9b; }
.pc-column[data-pc-category="direct"], .pc-insights > [data-pc-insight="direct"] { --pc-color: #cdd1d1; }
.pc-column-plot { display: block; position: relative; height: var(--pc-plot-height); }
.pc-bar { position: absolute; bottom: 0; left: 50%; width: min(100%, 56px); margin-left: max(-50%, -28px); height: calc(var(--share) * var(--pc-height) / 100); background: var(--pc-color); transform-origin: center bottom; transition: background-color 180ms linear; }
.pc-value { position: absolute; bottom: calc(var(--share) * var(--pc-height) / 100 + 4px); left: 0; right: 0; font-size: clamp(19px, 5.8cqw, 24px); white-space: nowrap; transition: opacity 180ms linear; }
.pc-value > span { font-size: 14px; margin-left: 2px; }
.pc-module.is-pending .pc-bar { transform: scaleY(0); }
.pc-module.is-pending .pc-value { opacity: 0; }
.pc-module.is-playing .pc-bar { animation: pc-bar-grow 600ms linear both; }
.pc-column.is-active .pc-bar { background: var(--accent-green); }
.pc-module > .pc-insights { display: grid; grid-template-columns: minmax(0, 1fr); align-self: end; margin: 0 0 calc(var(--pc-heading-gap) + var(--pc-heading-line)); min-width: 0; font: 300 16px/1.631 var(--font-satoshi); color: var(--black); }
.pc-insights > div { grid-area: 1 / 1; align-self: end; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms linear, visibility 0s linear 180ms; }
.pc-insights > .is-current { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.pc-insights h3 { font: 400 16px/1.631 var(--font-satoshi); }
.pc-insights p { margin-top: 24px; }
.pc-module + .cs-text { margin-top: var(--gap-major); }
@keyframes pc-bar-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
.cs-wide-media > .media-link > img {
  display: block;
  width: 100%;
  height: auto;
}
.media-link { display: block; position: relative; cursor: zoom-in; }


a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 4px; }
.cs-subheading {
  margin: var(--gap-minor) 0 0 var(--content-x);
  width: var(--content-w);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.631;
}
#market-research .cs-subheading { font-weight: 300; }
#takeaways .cs-subheading { font-weight: 300; }
#takeaways .cs-subheading + .cs-text { margin-top: 8px; }
#takeaways .cs-divider-minor + .cs-subheading { margin-top: 0; }
#market-research .research-question-divider { margin-top: 12px; margin-bottom: 12px; }
#market-research .research-question-divider + .cs-text { margin-top: 0; }
.research-module {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  column-gap: 40px;
  align-items: center;
  margin: var(--gap-major) 0 0 var(--wide-x);
  width: var(--wide-w);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.631;
}
.research-copy { display: grid; min-width: 0; }
.research-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 0s 300ms;
}
.research-panel.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.research-percentage { font-size: 56px; line-height: 1.1; }
.research-approx { font-size: 32px; }
.research-percent-sign { font-size: 20px; margin-left: 3px; }
.research-description { margin-top: 8px; color: var(--gray-body-secondary); }
.research-persona { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 48px; }
.research-persona h3 { font-size: 16px; font-weight: 300; line-height: 1.631; }
.research-detail { font-size: 14px; color: var(--gray-body-secondary); }
.research-panel blockquote { margin-top: 8px; font-size: 16px; font-style: italic; letter-spacing: -0.01em; color: var(--gray-body-secondary); }
.research-pile { position: relative; aspect-ratio: 1.15; min-width: 0; isolation: isolate; user-select: none; overflow: clip; }
.research-pile-layout { position: absolute; inset: 0; }
.research-bucket {
  position: absolute;
  inset: 0;
  transform: rotate(9deg);
  /* 两张纸中心的均值；纸高占容器高度的 21% × 1.6 × 1.15。 */
  transform-origin: 65% 67.82%;
  z-index: var(--layer);
  pointer-events: none;
}
.research-bucket.is-active { z-index: calc(var(--layer) + 100); }
.research-paper {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 21%;
  aspect-ratio: 5 / 8;
  transform: rotate(var(--rotation));
  z-index: var(--layer);
  border: 0;
  padding: 0;
  background: none;
  pointer-events: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.research-paper.is-active { z-index: calc(var(--layer) + 100); }
.research-paper-visual {
  display: block;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0.22;
  transform: scale(0.97);
  pointer-events: auto;
  transition: opacity 350ms ease, transform 450ms cubic-bezier(.22, 1, .36, 1), box-shadow 350ms ease;
}
.research-paper.is-active .research-paper-visual {
  opacity: 1;
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 5px 14px rgb(0 1 0 / 10%);
}
.research-paper img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.research-controls { grid-column: 1 / -1; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; margin-top: 32px; }
.research-controls button {
  position: relative;
  flex: none;
  font: 400 14px/1.4 var(--font-satoshi);
  color: var(--gray-body-secondary);
  background: transparent;
  border: 0;
  padding: 10px 0;
  white-space: nowrap;
  min-height: 44px;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 180ms linear;
}
.research-controls button[aria-pressed="true"] { color: var(--accent-green); }
.research-control-separator { flex: none; color: var(--gray-meta); pointer-events: none; font: 400 14px/1.4 var(--font-satoshi); }
.research-controls button:active { color: var(--black); }
@media (hover: hover) and (pointer: fine) {
  .research-controls button:hover { color: var(--accent-green); }
}
.research-controls button:focus-visible { outline-offset: -2px; }
.research-module + .cs-text { margin-top: var(--gap-major); }
.cs-insights, .cs-brand-pillars {
  display: grid;
  gap: var(--gap-minor);
  margin: var(--gap-major) 0 0 var(--wide-x);
  width: var(--wide-w);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.631;
}
.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-brand-pillars { grid-template-columns: minmax(0, 1fr); margin-top: var(--gap-minor); margin-left: var(--content-x); width: var(--content-w); }
.cs-brand-pillars article { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: end; }
.pillar-heading { grid-column: 2; }
.cs-brand-pillars .pillar-divider { width: 100%; margin: 0; }
.cs-brand-pillars .pillar-label { line-height: 1.2; }
.cs-brand-pillars .pillar-heading h3 { margin-top: 2px; line-height: 1.3; }
.cs-brand-pillars article > p:not(.pillar-label) { grid-column: 1 / -1; margin-top: 8px; }
.cs-insights { margin-top: var(--gap-minor); }
.cs-insights + .cs-text { margin-top: var(--gap-major); }
.cs-brand-pillars + .cs-text { margin-top: var(--gap-minor); }
.cs-insights h3, .cs-brand-pillars h3 { font-size: 16px; font-weight: 400; line-height: 1.631; }
.cs-brand-pillars h3 { font-weight: 300; }
.cs-brand-pillars article > p { color: var(--gray-body-secondary); }
.pillar-label { color: var(--gray-body-secondary); }
.cs-insights p { margin-top: 24px; }
.journey-insights h3 { display: flex; align-items: center; gap: 12px; }
.journey-insights h3::before { content: ''; width: 10px; height: 10px; flex: none; background: #afb6b6; }
.journey-insights .journey-chanlong-label::before { background: var(--accent-green); }
.journey-insights h3, .pc-insights h3 { font-weight: 300; }
.journey-insights p, .pc-insights p { margin-top: 8px; color: var(--gray-body-secondary); }
.cs-value-proposition {
  margin: var(--gap-major) 0 0 var(--wide-x);
  width: var(--wide-w);
  padding: 40px;
  background: var(--placeholder-bg);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.631;
}
.cs-value-proposition h3 { font: 400 24px/1.631 var(--font-gambarino); }
.cs-value-proposition dl { margin-top: 24px; }
.cs-value-proposition dl > div {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
  gap: 24px;
}
.cs-value-proposition dl > div + div { margin-top: 24px; }
.cs-value-proposition dt { font-weight: 400; text-align: right; }
.cs-brand-pillars img { grid-column: 1; grid-row: 1; display: block; width: 40px; height: 40px; object-fit: contain; }
.pillar-label { font-size: 12px; }
.site-footer {
  padding: 64px 0 40px;
  font: 400 14px/1.5 var(--font-satoshi);
  color: var(--black);
}
.site-footer-inner { width: var(--wide-w); margin-left: var(--wide-x); }
.footer-mark { color: var(--accent-green); font-weight: 700; }

@media (min-width: 1080px) {
  :root { --chart-inset: calc(var(--journey-axis-w) + var(--journey-gap)); }
  .cs-value-proposition { padding: 40px 0; }
  .cs-value-proposition h3 { margin-left: 32.7%; margin-right: 40px; }
  .cs-value-proposition dl > div { grid-template-columns: 32.7% minmax(0, 1fr); gap: 0; }
  .cs-value-proposition dt { padding-left: 40px; padding-right: 24px; }
  .cs-value-proposition dd { padding-right: 40px; }
  .journey-insights, .pc-module { margin-left: calc(var(--wide-x) + var(--chart-inset)); width: calc(var(--wide-w) - var(--chart-inset)); }
  .pc-bars { grid-template-columns: repeat(6, minmax(0, 56px)); justify-content: space-between; }
  .ca-plot { margin-left: var(--chart-inset); width: calc(100% - var(--chart-inset)); min-width: 0; }
  /* The source SVG's horizontal axis starts at x=210 in a 1548-unit canvas. */
  .ca-plot svg { width: calc(100% * 1548 / 1338); max-width: none; margin-left: calc(-100% * 210 / 1338); }
  .ca-minimal { left: calc(-1 * var(--chart-inset)); max-width: var(--journey-axis-w); width: var(--journey-axis-w); text-align: right; }
  .ca-costly, .ca-low-cost { left: calc(100% * 559 / 1338); }
}
@media (max-width: 1079px) {
  :root {
    --pm: clamp(28px, 5vw, 56px);
    --wide-w: min(860px, calc(100% - 2 * var(--pm)));
    --wide-x: calc(50% - var(--wide-w) / 2);
    --wide-w-narrow: var(--wide-w);
    --content-w: min(660px, calc(100% - 2 * var(--pm)));
    --content-x: calc(50% - var(--content-w) / 2);
  }
  .cs-rail { display: none; }
}
@media (min-width: 601px) and (max-width: 1079px) {
  .journey-insights, .pc-module { margin-left: calc(var(--wide-x) + var(--journey-axis-w) + var(--journey-gap)); width: calc(var(--wide-w) - var(--journey-axis-w) - var(--journey-gap)); }
  .pc-bars { grid-template-columns: repeat(6, minmax(0, 56px)); justify-content: space-between; }
  .cs-value-proposition dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 24px; }
  .cs-value-proposition dl > div { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .cs-value-proposition dl > div + div { margin-top: 0; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .research-module { position: relative; }
  .research-controls {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 20px;
    opacity: 0;
    pointer-events: none;
  }
  .research-controls:focus-within { opacity: 1; pointer-events: auto; }
}
@media (max-width: 760px) {
  .pc-module { --pc-heading-size: 13px; }
  .journey-chart { --journey-axis-w: 24px; --journey-gap: 8px; font-size: 13px; }
  .journey-chart, .journey-insights, .pc-module { margin-left: var(--content-x); width: var(--content-w); }
  .journey-tick { left: 0; right: auto; }
  .journey-score { display: inline; }
  .journey-emotion { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .research-module { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .research-pile { order: 1; width: min(100%, 480px); margin-inline: auto; }
  .research-copy { order: 3; }
  .research-persona { margin-top: 28px; }
  .research-controls { order: 2; margin-top: 0; }
}
@media (max-width: 600px) {
  .research-module { margin-top: clamp(32px, 8vw, 48px); }
  .research-pile { aspect-ratio: 1.25; }
  .research-pile-layout { inset: auto; top: -6%; left: 0; width: 100%; aspect-ratio: 1.15; transform: scale(1.12); transform-origin: 43% 50%; }
  .research-percentage { font-size: clamp(40px, 10vw, 56px); }
  .research-approx { font-size: .571429em; }
  .research-percent-sign { font-size: .357143em; }
  .ca-minimal, .ca-experience { display: none; }
  .ca-mobile-axis { display: flex; justify-content: space-between; gap: 24px; position: absolute; top: calc(660px * 312 / 1548); left: 0; right: 0; transform: translateY(calc(-100% - 8px)); pointer-events: none; font: 400 14px/1.4 var(--font-satoshi); color: var(--gray-body-secondary); }
  .ca-mobile-axis > span { max-width: calc((100% - 24px) / 2); padding: 2px 4px; }
  .ca-mobile-axis > span:first-child { margin-left: -4px; }
  .ca-mobile-axis > span:last-child { margin-right: -4px; }
  .ca-mobile-axis > span:last-child { text-align: right; }
  .ca-legend { justify-content: flex-start; }
  .ca-chart figcaption { text-align: left; }
  .pc-module { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .pc-module > .pc-insights { align-self: stretch; margin: 0; }
  .pc-bars { grid-template-columns: repeat(6, minmax(0, 56px)); justify-content: space-between; }
  :root {
    --pm: clamp(18px, 6vw, 26px);
    --wide-w: calc(100% - 2 * var(--pm));
    --wide-x: var(--pm);
    --wide-w-narrow: var(--wide-w);
    --content-w: var(--wide-w);
    --content-x: var(--pm);
  }
  .logo-mark { left: 24px; top: 20px; font-size: 80.55px; }
  nav.site-nav { left: auto; right: 24px; top: 24px; padding: 0; }
  .nav-toggle { display: flex; }
  .site-nav ul { display: none; }
  .site-nav ul.is-open {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: absolute;
    right: 0;
    background: var(--bg);
    padding: 16px 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  }
  .cs-header { padding-top: 84px; }
  .cs-tagline { font-size: clamp(22px, 6.5vw, 26px); }
  .cs-cover {
    height: 50vh;
    margin-top: clamp(36px, 10vw, 96px);
    margin-bottom: clamp(52px, 14vw, 128px);
  }
  .cs-insights, .cs-brand-pillars { grid-template-columns: minmax(0, 1fr); }
  .cs-value-proposition { padding: 24px; }
  .cs-value-proposition dl > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cs-value-proposition dt { text-align: left; }

 }
@media (prefers-reduced-motion: reduce) {
  .ca-chart.is-pending .ca-bubbles { opacity: 1; }
  .ca-chart.is-playing .ca-bubbles { animation: none; }
  .ca-bubble, .ca-key, .ca-legend button { transition: none; }
  .pc-module.is-pending .pc-bar { transform: none; }
  .pc-module.is-pending .pc-value { opacity: 1; }
  .pc-module.is-playing .pc-bar { animation: none; }
  .pc-column, .pc-bar, .pc-value, .pc-insights > div { transition: none; }
  .journey-chart.is-pending .journey-wave { clip-path: inset(0); }
  .journey-chart.is-pending .journey-line-reveal { opacity: 1; stroke-dashoffset: 0; }
  .journey-chart.is-playing .journey-wave, .journey-chart.is-playing .journey-line-reveal { animation: none; }
  .cs-rail, .cs-rail a, .research-panel, .research-paper-visual { transition: none; }
  .research-paper.is-active .research-paper-visual { transform: none; }
}