@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-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;
    }

    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;
      transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .cs-cover.is-zoomed > img,
    .cs-cover.is-zoomed > video {
      transform: scale(1.08);
    }
    @media (prefers-reduced-motion: reduce) {
      .cs-cover > img, .cs-cover > video { 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-wide-media {
      margin-left: var(--wide-x);
      width: var(--wide-w);
      aspect-ratio: var(--ar, 1034 / 660);
      background: var(--placeholder-bg);
      margin-top: var(--gap-major);
      overflow: hidden;
    }

    .cs-wide-media + .cs-wide-media { margin-top: var(--gap-minor); }
    .cs-wide-media.narrow { width: var(--wide-w-narrow); }
    .cs-wide-media > img,
    .cs-wide-media > video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;

      transform: scale(1.03);
    }

    .cs-wide-media > video.cs-video-hover { cursor: pointer; }
    .cs-wide-media:has(> .cs-video-hover) { position: relative; }
    .cs-wide-media:has(> .cs-video-hover)::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 72px;
      height: 72px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: rgba(0,1,0,0.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 26px no-repeat;
      pointer-events: none;
      opacity: 1;
      transition: opacity 0.25s ease;
    }
    .cs-wide-media:has(> .cs-video-hover.is-playing)::after { opacity: 0; }

    .cs-two-up {
      margin-left: var(--wide-x);
      width: var(--wide-w);
      display: flex;
      justify-content: space-between;
      margin-top: var(--gap-major);
    }

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

    .cs-two-up.media { align-items: flex-start; gap: var(--gap-minor); }
    .cs-two-up.media figure {
      flex: 1 1 0;
      min-width: 0;
      aspect-ratio: 994 / 660;
      background: var(--placeholder-bg);
      overflow: hidden;
    }
    .cs-two-up.media figure > img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .cs-challenge-q {
      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-challenge-q .num { font-weight: 400; }

    .cs-challenge-q .hl {
      white-space: nowrap;
    }

    @media (max-width: 600px) {
      .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; top: 40px;
        background: var(--bg);
        padding: 16px 20px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
      }
      .site-nav ul.is-open .nav-lang { font-size: 16px; }
    }

    @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 (max-width: 600px) {
      :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: calc(100% - 2 * var(--pm));
        --content-x: var(--pm);
      }

      .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);
      }

      #problems .cs-wide-media,
      #user-testing .cs-wide-media,
      #branding .cs-wide-media {
        width: 100vw;
        margin-left: calc(50% - 50vw);
      }

      #emotional-design .cs-wide-media { --ar: 3 / 5 !important; }
      #pressure-free-logging .cs-wide-media:not(.narrow) { --ar: 3 / 5 !important; }
      #visualization .cs-wide-media:not(.narrow) { --ar: 3 / 5 !important; }

      .cs-two-up.media { flex-direction: column; }
      .cs-two-up.media figure { flex: none; width: 100%; max-width: 280px; margin-inline: auto; }
    }

    .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: #81d83d; font-weight: 700; }

.cs-wide-media { display: block; background: transparent; }
.cs-wide-media > img, .cs-wide-media > video { transform: none; object-fit: contain; }
.image-link { cursor: zoom-in; }
.cs-subheading { margin: var(--gap-minor) 0 0 var(--content-x); width: var(--content-w); font: 400 20px/1.6 var(--font-gambarino); }
#solution .cs-subheading, #takeaways .cs-subheading { font: 300 16px/1.631 var(--font-satoshi); color: var(--black); }
#solution .cs-subheading + .cs-text, #takeaways .cs-subheading + .cs-text { margin-top: 8px; }
#takeaways .cs-divider-minor + .cs-subheading { margin-top: 0; }
#solution .solution-heading-divider { margin-top: 12px; margin-bottom: 12px; }
#solution .solution-heading-divider + .cs-text { margin-top: 0; }
.cs-list { margin: var(--gap-heading-para) 0 0 var(--content-x); width: var(--content-w); padding-left: 20px; font: 300 16px/1.631 var(--font-satoshi); }
.cs-list li + li { margin-top: 16px; }
.nateat-persona { --portrait-w: clamp(300px, 34vw, 440px); margin-top: var(--gap-major); font: 300 16px/1.631 var(--font-satoshi); }
.persona-hero { position: relative; isolation: isolate; display: flex; align-items: end; width: calc(100% - var(--content-x)); margin-left: var(--content-x); min-height: calc(var(--portrait-w) * 406 / 600); overflow: clip; }
.persona-identity { position: relative; z-index: 2; width: 160px; }
.persona-hero > img { position: absolute; z-index: 1; top: 0; right: -16px; width: var(--portrait-w); height: auto; transform: scaleX(-1); pointer-events: none; }
.nateat-persona h3 { font: 400 24px/1.631 var(--font-gambarino); }
.persona-meta { margin-top: 4px; color: var(--gray-body-secondary); }
.nateat-persona .persona-quote { width: var(--content-w); margin: 24px 0 0 var(--content-x); font: 300 16px/1.631 var(--font-satoshi); text-wrap: pretty; }
.persona-details { width: var(--content-w); margin: 32px 0 0 var(--content-x); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; }
.nateat-persona h4 { font-weight: 300; }
.nateat-persona ul { padding-left: 20px; margin-top: 8px; color: var(--gray-body-secondary); }
.nateat-persona li + li { margin-top: 8px; }
.persona-details p { margin-top: 8px; color: var(--gray-body-secondary); }
@media (max-width: 600px) {
  .nateat-persona { --portrait-w: clamp(210px, 58vw, 300px); }
  .persona-identity { width: 140px; }
  .persona-hero > img { right: -12px; }
  .persona-details { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #system-map .cs-wide-media, #final-design .cs-wide-media { width: var(--wide-w); margin-left: var(--wide-x); }
}

.image-link.cs-wide-media { width: min(var(--wide-w), var(--media-max, 1034px)); }
.nateat-testing-gallery { margin: var(--gap-minor) 0 0 var(--wide-x); width: min(var(--wide-w), 801px); display: grid; grid-template-columns: 264fr 497fr; gap: 24px; align-items: start; }
.nateat-testing-gallery a { display: block; min-width: 0; }
.nateat-testing-gallery a:first-child { grid-row: span 2; align-self: stretch; position: relative; }
.nateat-testing-gallery a:first-child img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nateat-testing-gallery img { display: block; width: 100%; height: auto; }
@media (max-width: 600px) { .nateat-testing-gallery { gap: 16px; } }

.nateat-stats { margin: var(--gap-major) 0 0 var(--content-x); width: var(--content-w); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; }
.nateat-stat { min-width: 0; text-align: center; }
.nateat-ring { position: relative; width: 180px; max-width: 100%; aspect-ratio: 1; margin-inline: auto; }
.nateat-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.nateat-ring circle { fill: none; stroke-width: 18; }
.nateat-ring-track { stroke: #e0e4e4; }
.nateat-ring-fill { stroke: var(--stat-color); stroke-dasharray: var(--share) 100; }
.nateat-stat-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 400 40px/1 var(--font-satoshi); }
.nateat-stat-value > span { font-size: 16px; margin: 12px 0 0 2px; }
.nateat-stat figcaption { max-width: 300px; margin: 16px auto 0; font: 300 16px/1.631 var(--font-satoshi); text-wrap: pretty; }
.nateat-stats.is-pending .nateat-ring-fill { stroke-dasharray: 0 100; }
.nateat-stats.is-playing .nateat-ring-fill { animation: nateat-ring-draw 600ms linear both; }
@keyframes nateat-ring-draw { from { stroke-dasharray: 0 100; } to { stroke-dasharray: var(--share) 100; } }
@media (max-width: 600px) {
  .nateat-stats { gap: 32px 20px; }
  .nateat-ring { width: 140px; }
  .nateat-stat-value { font-size: 32px; }
  .nateat-stat-value > span { font-size: 14px; margin-top: 8px; }
  .nateat-stat figcaption { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .nateat-stats.is-pending .nateat-ring-fill { stroke-dasharray: var(--share) 100; }
  .nateat-stats.is-playing .nateat-ring-fill { animation: none; }
}

.research-donuts { margin: var(--gap-major) 0 0 var(--content-x); width: var(--content-w); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
.attitude-module { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.attitude-donut { width: 100%; max-width: 160px; margin-inline: auto; }
.attitude-donut svg { display: block; width: 100%; height: auto; transform: rotate(-90deg); }
.attitude-segment { fill: none; stroke: var(--segment-color); stroke-width: 38; stroke-dasharray: var(--segment-share) var(--segment-gap); cursor: pointer; transition: opacity 180ms linear, stroke 180ms linear; }
.attitude-legend { display: grid; gap: 4px; }
.attitude-legend button { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 0; border: 0; background: transparent; text-align: left; color: var(--black); font: 300 14px/1.631 var(--font-satoshi); cursor: pointer; transition: opacity 180ms linear; }
.attitude-dot { width: 8px; height: 8px; background: var(--segment-color); border-radius: 50%; }
.attitude-value { font-weight: 400; white-space: nowrap; }
.attitude-value > span { font-size: 11px; margin-left: 2px; }
.attitude-module.has-selection [data-attitude]:not(.is-active) { opacity: .55; }
.attitude-segment.is-active { stroke: var(--accent-green); }
.attitude-legend .is-active .attitude-dot { background: var(--accent-green); }
.attitude-legend button:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 4px; }
.attitude-module.is-pending .attitude-segment { stroke-dasharray: 0 100; }
.attitude-module.is-pending [data-attitude] { pointer-events: none; }
.attitude-module.is-playing .attitude-segment { animation: attitude-draw var(--draw-duration) linear var(--draw-delay) both; }
@keyframes attitude-draw { from { stroke-dasharray: 0 100; } to { stroke-dasharray: var(--segment-share) var(--segment-gap); } }
@media (max-width: 600px) {
  .research-donuts { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .attitude-donut { max-width: 160px; }
  .attitude-legend button { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .attitude-module.is-pending .attitude-segment { stroke-dasharray: var(--segment-share) var(--segment-gap); }
  .attitude-module.is-playing .attitude-segment { animation: none; }
  .attitude-module [data-attitude] { transition: none; }
}


.research-bar-pair { display: flex; flex-wrap: wrap; align-items: start; gap: 32px 40px; margin: 40px 0 0 var(--content-x); width: var(--content-w); }
.research-bar-chart { flex: 1 1 280px; min-width: 0; font: 300 14px/1.631 var(--font-satoshi); }
.research-comparison, .research-motivations { display: grid; gap: 0; container-type: inline-size; }
.research-bar-group, .research-reason { min-width: 0; display: grid; gap: 6px; align-items: center; padding: 12px 0; border-bottom: .4px solid var(--divider); }
.research-bar-group:first-child, .research-reason:first-child { padding-top: 0; }
.research-bar-group:last-child, .research-reason:last-child { border-bottom: 0; padding-bottom: 0; }
.research-stack { position: relative; display: flex; height: 20px; width: 100%; transform-origin: left center; }
.research-stack-yes { width: calc(var(--bar-value) * 1%); background: #8f9999; }
.research-stack-value, .research-reason-value { position: absolute; left: calc(var(--bar-value) * 1% + 6px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 12px; line-height: 1; font-weight: 400; }
.research-stack-no { flex: 1; background: #c5cccc; }
.research-reason-plot { position: relative; height: 20px; width: 100%; background: #c5cccc; }
.research-reason .research-bar-fill { display: block; width: calc(var(--bar-value) * 1%); height: 100%; background: #8f9999; transform-origin: left center; }
.research-reason-value > span { font-size: 11px; margin-left: 1px; }
.research-bar-chart.is-pending .research-bar-fill { transform: scaleX(0); }
.research-bar-chart.is-playing .research-bar-fill { animation: research-row-grow 600ms linear both; }
@keyframes research-row-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .research-bar-chart.is-pending .research-bar-fill { transform: none; }
  .research-bar-chart.is-playing .research-bar-fill { animation: none; }
}

@container (min-width: 440px) {
  .research-bar-group, .research-reason { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
}

.research-chart-heading { margin: 0 0 16px; font: 400 20px/1.5 var(--font-gambarino); text-wrap: balance; }
.research-chart-heading + .research-bar-group, .research-chart-heading + .research-reason { padding-top: 0; }

.research-bar-pair + .cs-text { margin-top: var(--gap-major); }

.ingredient-impact-chart { margin: var(--gap-major) 0 0 var(--content-x); width: var(--content-w); font: 300 14px/1.631 var(--font-satoshi); }
.impact-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 8px; }
.impact-scroll:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 4px; }
.impact-board { --impact-columns: minmax(0, 7fr) minmax(0, 2fr); min-width: 640px; }
.impact-food-name { font: 400 16px/1.631 var(--font-satoshi); }
.impact-values { display: grid; grid-template-columns: var(--impact-columns); font-size: 20px; font-weight: 400; }
.impact-values > span { min-width: 0; }
.impact-values > span:last-child { padding-left: 0; }
.impact-values small { display: block; font-size: 12px; font-weight: 300; color: var(--gray-body-secondary); }
.impact-values-beef { margin-top: 4px; padding-bottom: 8px; }
.impact-values-chicken { margin-top: 4px; padding-bottom: 8px; }
.impact-stage-bars, .impact-chain { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; gap: 0; }
.impact-chain { margin: 0; padding: 0; background: #edf0ee; }
.impact-chain-group { min-width: 0; display: grid; grid-template-columns: subgrid; grid-column: span 7; }
.impact-chain ol { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; gap: 0; padding: 0; margin: 0; list-style: none; height: 100%; }
.impact-chain-last { grid-column: span 2; }
.impact-chain li { position: relative; display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 8px 4px; text-align: center; font-size: 11px; line-height: 1.4; }
.impact-bar-region { grid-column: span 7; min-width: 0; height: 16px; }
.impact-bar-region-last { grid-column: span 2; }
.impact-emission-bar { display: block; width: 100%; height: 100%; background: var(--accent-green); }
.impact-emission-delivery { background: #8f9999; }

.impact-stage-assembly + .impact-food-name { margin-top: 8px; }
.impact-stage-bars-chicken .impact-bar-region:first-child { display: grid; grid-template-columns: subgrid; background: #d5dada; }
.impact-stage-bars-chicken .impact-bar-region:first-child .impact-emission-bar { grid-column: span 2; width: auto; }

.impact-stage-assembly { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); }

.impact-chain li::before, .impact-chain li::after { content: ""; position: absolute; left: 0; width: .4px; height: 5px; background: #fff; pointer-events: none; }
.impact-chain li::before { top: -5px; }
.impact-chain li::after { bottom: -5px; }
.impact-chain li { box-shadow: inset .4px 0 var(--divider); }
.impact-chain-group:first-child li:first-child { box-shadow: none; }
.impact-chain-group:first-child li:first-child::before, .impact-chain-group:first-child li:first-child::after { display: none; }

.opportunity-next { margin: var(--gap-major) 0 0 var(--content-x); width: var(--content-w); }
.opportunity-next > .cs-subheading.square { display: flex; align-items: flex-start; gap: .5em; margin: 0; width: auto; font: 400 18px/1.631 var(--font-satoshi); text-wrap: balance; }
.opportunity-next > .cs-subheading.square::before { content: ""; flex: none; width: .25em; height: .25em; margin-top: .6905em; background: currentColor; }
.opportunity-next > .cs-subheading.square span { min-width: 0; }
.opportunity-next { container-type: inline-size; }
.opportunity-statements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; row-gap: var(--gap-minor); align-items: start; margin-top: var(--gap-minor); }
.opportunity-statement { min-width: 0; }
.opportunity-statement h4 { display: flex; align-items: center; gap: .5em; font: 400 18px/1.631 var(--font-satoshi); }
.opportunity-statement h4::before { content: ""; flex: none; width: .25em; height: .25em; background: currentColor; }
.opportunity-statement ul { display: grid; gap: var(--gap-heading-para); margin-top: var(--gap-heading-para); list-style: none; font: 300 16px/1.631 var(--font-satoshi); }
.opportunity-item-name { font-weight: 400; margin-bottom: 8px; }
@container (max-width: 656px) { .opportunity-statements { grid-template-columns: 1fr; } }

.opportunity-next > .opportunity-statements:first-child { margin-top: 0; }

#competitors .image-link.cs-wide-media { margin-left: var(--content-x); width: var(--content-w); }

.nateat-demo { margin: var(--gap-major) 0 0 var(--wide-x); width: var(--wide-w); }
.nateat-demo-frame { position: relative; padding: clamp(8px, 1.2vw, 16px); border-radius: clamp(16px, 2.4vw, 32px); background: #000; box-shadow: 0 8px 8px rgb(0 0 0 / 20%); }
.nateat-demo video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: clamp(8px, 1.2vw, 16px); background: #000; }
.nateat-demo-controls { position: absolute; bottom: 24px; right: 24px; display: flex; gap: 8px; }
.nateat-demo-controls[hidden] { display: none; }
.nateat-demo-controls button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgb(255 255 255 / 35%); border-radius: 50%; color: #fff; background: rgb(0 0 0 / 65%); cursor: pointer; }
.nateat-demo-controls svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.nateat-demo-toggle .demo-play, .nateat-demo-toggle[data-paused="true"] .demo-pause { display: none; }
.nateat-demo-toggle[data-paused="true"] .demo-play { display: block; }
.nateat-demo-controls button:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 3px; }
.nateat-demo-frame:fullscreen { width: 100%; height: 100%; display: grid; align-items: center; padding: 0; border-radius: 0; box-shadow: none; }
.nateat-demo-frame:fullscreen video { width: 100%; height: 100%; border-radius: 0; }
@media (max-width: 600px) { .nateat-demo-controls { bottom: 16px; right: 16px; } }

@media (min-width: 1080px) { .nateat-demo-controls .nateat-demo-fullscreen { display: none; } }

#system-map .image-link.cs-wide-media { width: var(--content-w); margin-left: var(--content-x); }

#testing .image-link.cs-wide-media, #testing .nateat-testing-gallery { width: var(--content-w); margin-left: var(--content-x); }

.problem-statement-copy { position: relative; isolation: isolate; }
.problem-statement-copy .rough-annotation { z-index: 0; }
.problem-highlight, .problem-punctuation { position: relative; z-index: 1; }