:root {
  --bg: #000;
  --ink: #fff;
  --muted: #bdbdbd;
  --copy: #eee;
  --yellow: #ffd233;
  --card: #3a3a3a;
  --line: #2a2a2a;
  --sans: "Outfit", sans-serif;
  --script: "Nanum Pen Script", cursive;
  --section-space: 6rem;
  --text-gap: 16px;
  --block-gap: 2rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
}
strong { font-weight: 500; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, .pill {
  font-family: inherit;
}
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.6rem;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
}
.nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.logo, .linkedin, .menu-btn {
  background: #1c1c1c;
  color: #fff;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font-weight: 500;
  font-size: 1rem;
}
.nav-links {
  display: flex;
  gap: 1.8rem;
}
.nav-links a { text-decoration: none; }
.menu-btn { display: none; width: 46px; height: 46px; padding: 0; font-size: 1.3rem; cursor: pointer; }
.nav-links.open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 72px;
  right: 16px;
  background: #141414;
  border-radius: 16px;
  padding: 1rem 1.2rem;
  gap: 0.8rem;
}
.rail {
  position: fixed;
  z-index: 24;
  top: 50%;
  left: 1.25rem;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
}
@media (min-width: 801px) {
  body:has(.rail) .wrap,
  body:has(.rail) #agents {
    width: min(1400px, calc(100% - 8.5rem));
  }
}
.rail a {
  position: relative;
  display: flex;
  align-items: center;
  height: 0.95rem;
  text-decoration: none;
}
.rail a::before {
  content: "";
  width: 1.45rem;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease;
}
.rail a.is-current::before {
  width: 2.7rem;
  height: 4px;
  background: var(--yellow);
}
.rail a:hover::before,
.rail a:focus-visible::before {
  width: 2.7rem;
  height: 4px;
  background: #fff;
}
.rail a.is-current:hover::before,
.rail a.is-current:focus-visible::before {
  background: var(--yellow);
}
.rail a.is-open:not(.is-current)::before {
  width: 2.15rem;
  height: 4px;
  background: var(--yellow);
}
.rail a[hidden] { display: none; }
.rail-studies {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.32rem;
  margin: 0.16rem 0 0.22rem;
  padding: 0.16rem 0 0.18rem 0.95rem;
}
.rail-studies::before {
  content: "";
  position: absolute;
  left: 0.68rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--yellow);
}
.rail-studies[hidden] { display: none; }
.rail a.rail-study { height: 0.72rem; }
.rail a.rail-study::before {
  width: 0.72rem;
  height: 2px;
  background: rgba(255, 255, 255, 0.78);
}
.rail a.rail-study.is-current::before,
.rail a.rail-study:hover::before,
.rail a.rail-study:focus-visible::before {
  width: 1.2rem;
  height: 3px;
}
.rail a.rail-study:hover::before,
.rail a.rail-study:focus-visible::before { background: #fff; }
.rail a.rail-study.is-current::before,
.rail a.rail-study.is-current:hover::before,
.rail a.rail-study.is-current:focus-visible::before { background: var(--yellow); }
.rail a span {
  position: absolute;
  left: 3.2rem;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-0.25rem);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.rail a:hover span,
.rail a:focus-visible span {
  opacity: 1;
  transform: none;
}
body:has(main.case) .rail {
  gap: 0.2rem;
}
body:has(main.case) .rail a {
  height: 0.72rem;
}
body:has(main.case) .rail a.rail-study {
  height: 0.52rem;
}
body:has(main.case) .case [id],
body:has(main.case) .case-hero[id],
body:has(main.case) .brief[id],
body:has(main.case) .case-split[id],
body:has(main.case) .frame-problem[id],
body:has(main.case) .hmw[id],
body:has(main.case) .design-phase[id],
body:has(main.case) .close[id] {
  scroll-margin-top: 88px;
}

.wrap { width: min(1400px, calc(100% - 2.5rem)); margin: 0 auto; }
.center { text-align: center; }

.hero { padding: 4.5rem 0 2rem; }
.beat {
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 6.5rem 0 3rem;
  overflow: hidden;
  opacity: 0.32;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.beat.is-focus { opacity: 1; }
.ai-chapter {
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4.5rem 0;
}
#path.beat {
  display: grid;
  grid-template-rows: 1fr;
  width: min(1400px, calc(100% - 2.5rem));
  height: auto;
  max-height: none;
  padding: 0 0 1.2rem;
  opacity: 1;
  overflow: hidden;
  transition: grid-template-rows 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, padding 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
#path .path-fold { min-height: 0; overflow: hidden; }
#path.beat.is-leaving {
  grid-template-rows: 0fr;
  opacity: 0;
  padding: 0;
  pointer-events: none;
}
#path.beat[hidden] { display: none; }
#agents.is-revealed h2 {
  margin: 0 0 1.75rem;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1.2;
}
#agents.is-revealed .agent-card { padding: 1rem 1.1rem 0.9rem; }
#agents.is-revealed .agent-card p { margin-top: 0.35rem; }
#agents.is-revealed .agent-card .go { margin-top: 0.8rem; }
#agents.is-revealed .agent-stage { margin-top: 2.1rem; }
#agents {
  width: min(1400px, calc(100% - 2.5rem));
  min-height: 0;
  padding: 0;
}
.agents-fold {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.55s ease;
}
.agents-fold > div { min-height: 0; overflow: hidden; }
#agents.is-revealed .agents-fold {
  grid-template-rows: 1fr;
  opacity: 1;
}
#agents.is-revealed .agents-fold > div { pointer-events: auto; }
#agents .agent-stage {
  opacity: 0.34;
  transition: opacity 0.55s ease;
  background: transparent;
}
#agents .flow {
  width: min(100%, 920px);
  max-height: 42vh;
  margin-inline: auto;
  transition: max-height 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
#agents.is-revealed .flow { max-height: 34vh; }
#work.beat {
  height: auto;
  min-height: 100svh;
  transition: padding 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}
#work.beat h2 {
  overflow: hidden;
  max-height: 8rem;
  transition: max-height 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.55s ease, margin 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
#work.beat.is-filtered {
  position: sticky;
  top: 0;
  z-index: 19;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;
  overflow: visible;
  padding: 5.5rem 0 0.95rem;
  background: #000;
  opacity: 1;
  transition: none;
}
#work.beat.is-filtered h2 {
  max-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
  transition: none;
}
.filter-fit {
  container-type: inline-size;
  width: min(1400px, calc(100% - 3rem));
  margin-inline: auto;
}
#work.beat:not(.is-filtered) .filters {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin-inline: auto;
}
#work .filter-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: safe center;
  gap: 0.75rem;
  max-width: 100%;
}
#work .filters button { flex: none; white-space: nowrap; }
@container (max-width: 770px) {
  #work.beat:not(.is-filtered) .filters {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 0.75rem;
    row-gap: 0.7rem;
  }
  #work.beat:not(.is-filtered) .filter-line { display: contents; }
}
#work.beat.is-filtered .filters {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: safe center;
  gap: 0.4rem;
  width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  opacity: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.55) transparent;
}
#work.beat.is-filtered .filters button { padding-inline: 0.95rem; }
#work.beat.is-filtered .filter-line { display: contents; }
#work .filter-line::-webkit-scrollbar,
#work.beat.is-filtered .filters::-webkit-scrollbar { height: 6px; }
#work .filter-line::-webkit-scrollbar-thumb,
#work.beat.is-filtered .filters::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 999px;
}
#agents.is-revealed .agent-stage { opacity: 1; }
#studies {
  opacity: 1;
  transform: none;
  padding: 0;
}
#studies.is-shown { min-height: 0; }
body:has(#studies):not(:has(#studies:not([hidden]))) .footer { display: none; }
.beat-hero h1,
.beat-hero .shot,
.beat-intro .quote,
.beat-ask h2,
.filters,
.choices {
  width: 100%;
  max-width: none;
}
.beat-hero .shot {
  width: min(100%, calc((100svh - 27rem) * 2.165));
  max-height: calc(100svh - 27rem);
  height: auto;
  object-fit: contain;
  margin-inline: auto;
}
.beat-intro .script:first-child { margin-top: 0; }
.beat-ask h2 {
  text-align: center;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0 0 1.6rem;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.filters,
.choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}
.filters button,
.choices button {
  font: inherit;
  font-weight: 500;
  font-size: 1rem;
  background: #fff;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  color: #111;
  border: 1px solid #fff;
  border-radius: 999px;
  padding: 0.6rem 1.15rem;
  cursor: pointer;
}
.filters button[aria-pressed="true"] {
  background: #ffd233;
  color: #111;
  border-color: #ffd233;
}
.choices button[aria-pressed="true"] {
  background: #fff;
  color: #111;
  border-color: #ffd233;
}
.choices button[data-path="no"][aria-pressed="true"] {
  background: #ffd233;
  color: #111;
  border-color: #ffd233;
}
.beat[hidden],
section[hidden],
.project[hidden] { display: none; }
.hero h1 {
  margin: 0 auto;
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.hero .aside {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  margin: 0.8rem 0 1.4rem;
  font-weight: 400;
  font-size: 1.35rem;
}
.shrug {
  display: inline-flex;
  width: 1.35em;
  height: 1.35em;
  flex: none;
  line-height: 0;
  transform: translateY(-0.04em);
}
.shrug img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.shot {
  border-radius: 28px;
  width: 100%;
}
.shot + .script {
  margin-top: 52px;
}
.script {
  font-family: var(--script);
  color: var(--yellow);
  font-weight: 400;
  font-size: 2rem;
  margin: 0;
}
.beat-intro .script { font-size: clamp(2.45rem, 4.6vw, 3.35rem); }
.quote {
  max-width: 78rem;
  margin: 0.4rem auto 0;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 30px;
}
.beat-intro .quote {
  width: 100%;
  max-width: none;
  margin-top: 0.75rem;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  line-height: 1.4;
}
.quote-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.16em;
  padding: 0;
  border: 0;
  border-bottom: 2px solid var(--yellow);
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}
.pop-cue {
  width: 0.78em;
  height: 0.78em;
  color: var(--yellow);
  transform: translateY(0.08em);
}
.sheet {
  width: min(920px, calc(100% - 2rem));
  max-height: min(88svh, 860px);
  margin: auto;
  padding: 0;
  border: 1px solid #2a2a2a;
  border-radius: 28px;
  background: #0c0c0c;
  color: #fff;
}
.sheet-ad {
  width: min(1040px, calc(100% - 2rem));
  max-height: calc(100svh - 2rem);
  overflow: hidden;
  background: #000;
}
.sheet-ad .sheet-body {
  max-height: calc(100svh - 2rem);
  overflow: hidden;
}
.sheet-ad .ad-kicker { margin: 0.2rem 0 clamp(0.4rem, 1.2vh, 0.9rem); }
.sheet-ad .stage { padding-bottom: clamp(1.65rem, 3vh, 2.35rem); }
.sheet-ad .stage img,
.sheet-ad .stage-lead img {
  height: min(42vh, 420px, calc(100svh - 24rem));
  width: auto;
}
.sheet-ad .ad-copy { margin-top: clamp(0.25rem, 0.8vh, 0.6rem); }
.sheet-ad .badges {
  margin-top: clamp(0.3rem, 0.9vh, 0.7rem);
  margin-bottom: 0;
  padding-bottom: 1.05rem;
}
.sheet-ad .badge-apple { height: clamp(34px, 4.6vh, 46px); }
.sheet-ad .badge-play { height: clamp(50px, 7vh, 68px); }
.sheet-reader {
  max-height: calc(100svh - 2rem);
  overflow: hidden;
}
.sheet::backdrop { background: rgba(0, 0, 0, 0.72); }
.sheet[open] { animation: sheet-in 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.sheet-body {
  display: flex;
  flex-direction: column;
  max-height: min(86svh, 840px);
  overflow: auto;
  padding: 1.15rem 1.4rem 1.5rem;
}
.sheet h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-align: left;
}
.sheet-close {
  align-self: flex-end;
  margin-bottom: 0.35rem;
  background: #fff;
  color: #111;
  border: 1px solid #fff;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
body.sheet-open { overflow: hidden; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sheet-reader .sheet-body {
  max-height: calc(100svh - 2rem);
  overflow: hidden;
}
.sheet-reader h2 { font-size: clamp(1.35rem, 3.2vh, 2.6rem); line-height: 1.2; }
.reader {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(0.8rem, 2vw, 2rem);
  align-items: center;
  min-height: 0;
}
.reader-stage { display: flex; align-items: center; gap: 0.45rem; min-height: 0; }
.reader-cover {
  height: min(38svh, calc(100svh - 18rem));
  width: auto;
  max-width: min(32vw, 240px);
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
  transition: opacity 0.18s ease;
}
.reader-arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #fff;
  color: #111;
  line-height: 0;
  cursor: pointer;
}
.reader-arrow svg { width: 26px; height: 26px; display: block; }
.reader-count {
  margin: 0 0 0.45rem;
  color: var(--yellow);
  font-weight: 500;
  letter-spacing: 0.06em;
  font-size: 0.92rem;
}
.sheet .by:empty { display: none; }
.stars { display: flex; gap: 0.35rem; margin: 0; }
.stars span {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #3a3a3a;
}
.stars span.on { background: var(--yellow); }
.reader-line {
  margin: 0.7rem 0 0;
  max-width: 36rem;
  font-size: clamp(0.95rem, 2.1vh, 1.3rem);
  line-height: 1.4;
}
.shelf {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  justify-items: center;
  align-items: end;
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid #2a2a2a;
  flex: 0 0 auto;
}
.shelf button {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  opacity: 0.48;
}
.shelf button[aria-selected="true"] {
  opacity: 1;
  border-color: transparent;
  box-shadow: 0 0 0 2px #0c0c0c, 0 0 0 4px var(--yellow);
}
.shelf img {
  width: auto;
  height: min(11svh, 92px);
  max-width: 100%;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}
.ad { text-align: center; }
.ad-brand { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.ad-mark { width: 56px; height: 56px; border-radius: 14px; }
.ad-word { height: 34px; width: auto; }
.ad-kicker { margin: 0.35rem 0 1.85rem; color: #d2d2d2; }
.stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1.15rem, 2.6vw, 2rem);
  margin: 0 auto;
  padding-bottom: 3.15rem;
}
.stage figure {
  position: relative;
  width: max-content;
  margin: 0;
}
.stage img,
.stage-lead img {
  height: clamp(180px, min(42vh, 420px), calc(100svh - 34rem));
  width: auto;
  display: block;
}
.stage figcaption {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: 50%;
  width: max-content;
  max-width: none;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}
.ad-copy { max-width: 34rem; margin: 0.85rem auto 0; }
.badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 1.15rem;
  margin-bottom: 1.6rem;
}
.play-lockup { position: relative; display: flex; }
.badge-apple { height: 46px; width: auto; display: block; }
.badge-play { height: 68px; width: auto; display: block; }
.badge-note {
  position: absolute;
  top: calc(84% + 0.15rem);
  right: 0;
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}
.cap { width: 92px; margin: 2.2rem auto 0.2rem; }
.beat-intro .cap { width: 124px; margin: 2.6rem auto 0.4rem; }

.section { padding: clamp(2.4rem, 5vw, 3.2rem) 0; scroll-margin-top: 5rem; }
.section h2 {
  text-align: center;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0 0 1.6rem;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}

.agents-layout {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}
.agent-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.2rem;
}
.agent-card {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  background: #141414;
  border-radius: 22px;
  padding: 1.3rem 1.3rem 1.1rem;
  cursor: pointer;
  border: 1px solid #2a2a2a;
  color: #8a8a8a;
}
.agent-card.is-selected {
  background: #2e2e2e;
  border-color: #ffd233;
  color: #fff;
}
.agent-card h3 {
  margin: 0 0 16px;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.agent-card p { margin: 0; color: inherit; }
.agent-card.is-selected p { color: #e8e8e8; }
.agent-card .go {
  display: inline-flex;
  align-self: flex-end;
  margin-top: 1.2rem;
  background: #fff;
  color: #111;
  text-decoration: none;
  border: 1px solid #fff;
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
  font-weight: 500;
}
.agent-stage {
  background: #000;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#agents .flow[data-flow] { display: none; }
#agents .agent-stage[data-agent="image"] .flow[data-flow="image"],
#agents .agent-stage[data-agent="figma"] .flow[data-flow="figma"] { display: block; }
.flow { width: min(100%, 900px); height: auto; display: block; }
.flow .node rect,
.flow .node circle {
  fill: #161616;
  stroke: #3a3a3a;
  stroke-width: 1.5;
}
.flow .node.is-hot rect,
.flow .node.is-hot circle {
  stroke: #3dcc6e;
}
.flow .label,
.flow .sub,
.flow .edge-label {
  fill: #e8e8e8;
  font-family: var(--sans);
  text-anchor: middle;
}
.flow .label { font-size: 15px; font-weight: 500; }
.flow .agent-name { text-anchor: start; font-size: 18px; }
.flow .pin { fill: #ffd233; font-size: 12px; font-weight: 500; }
.flow .sub,
.flow .edge-label { font-size: 12px; fill: #bdbdbd; }
.flow-signal {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.work-list { position: relative; }
.project.beat {
  height: calc(100svh - var(--filter-bar, 7.8rem));
  margin: 0;
  border-left: 0;
  padding: 0.6rem 1.25rem 0.8rem;
  scroll-margin-top: var(--filter-bar, 7.8rem);
  align-items: center;
  justify-content: center;
  text-align: center;
}
.project.beat h3 { text-align: center; }
.project.beat.is-rising,
.project.beat.is-focus { opacity: 1; }
.project.beat.is-rising { transition: none; }
.project.beat .panel { width: min(860px, 100%); margin-inline: auto; }
.project.beat .devices {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(22vh, 190px);
  object-fit: contain;
  margin-inline: auto;
}
.studies-empty {
  height: calc(100svh - var(--filter-bar, 7.8rem));
  min-height: 12rem;
  margin: 0;
  scroll-margin-top: var(--filter-bar, 7.8rem);
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-size: 1.15rem;
}
.studies-empty p { margin: 0; }
.project { padding: 0 0 2.4rem 1.4rem; border-left: 1px solid #fff; }
.project h3 { margin: 0 0 0.8rem; font-weight: 500; font-size: 1.45rem; line-height: 1.2; }
.panel {
  background: var(--card);
  border-radius: 28px;
  padding: 1.3rem 1.2rem 1.2rem;
}
.panel .devices { border-radius: 12px; margin: 0 auto 0.9rem; width: 100%; }
.panel .blurb { text-align: center; margin: 0 0 0.8rem; }
.logo-card {
  background: #fff;
  color: #111;
  border-radius: 18px;
  padding: 1.4rem 1rem 1.1rem;
  text-align: center;
}
.logo-card img { margin: 0 auto 0.8rem; max-height: 120px; width: auto; }
.logo-card strong { display: block; font-size: 1.4rem; margin-bottom: 0.8rem; }
.btn {
  display: inline-block;
  background: #fff;
  color: #111;
  text-decoration: none;
  border: 1px solid #111;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-weight: 500;
}
.btn.ghost { background: #fff; cursor: default; }

.project.beat.study-card {
  align-items: stretch;
  justify-content: stretch;
  padding: 0.85rem 1.25rem 1rem;
}
.project.beat.study-card .panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.study-card.project.beat h3 {
  margin: 0 0 0.85rem;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-align: left;
}
.card-option {
  margin: 0 0 0.85rem;
  color: var(--yellow);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.55rem;
}
.card-tags span {
  border: 1px solid rgba(255, 210, 51, 0.75);
  color: var(--yellow);
  border-radius: 999px;
  padding: 0.12rem 0.7rem;
  font-size: 0.88rem;
}
.card-kicker {
  margin: 0 0 0.45rem;
  color: var(--muted);
  font-size: 0.92rem;
}
.card-client {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.35rem;
  color: #eee;
  font-size: 0.98rem;
}
.card-client img { width: auto; max-height: 28px; margin: 0; }
.study-card .btn { align-self: flex-start; }
.card-poster .btn { align-self: flex-end; }
.card-meta { margin: 0 0 1rem; color: var(--muted); font-size: 0.92rem; }
.study-card .card-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  border-radius: 18px;
  padding: 0.8rem;
}
.project.beat.study-card .devices {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  border-radius: 8px;
  object-fit: contain;
}
.card-split .card-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 1.4rem;
  align-items: stretch;
}
.card-split .card-copy,
.card-poster .card-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card-split .card-stage,
.card-poster .card-stage,
.card-type .card-stage {
  flex: 1;
  min-height: 0;
  height: auto;
}
.card-poster .card-stage { margin-bottom: 1rem; }
.card-stage.has-progress { position: relative; }
.card-stage.has-progress .devices { filter: brightness(0.55); }
.card-stage.has-progress .progress-block {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: min(32rem, 72%);
  transform: translate(-50%, -50%);
}
.card-stage.has-progress .progress-track {
  background: rgba(255, 255, 255, 0.34);
}
.card-stage.has-progress .progress-readout,
.card-stage.has-progress .progress-note {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.72);
}
.progress-block {
  width: min(34rem, 78%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.progress-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.progress-track {
  flex: 1;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.progress-fill {
  display: block;
  width: var(--progress, 29%);
  height: 100%;
  border-radius: inherit;
  background: var(--yellow);
}
.progress-readout,
.progress-note { margin: 0; }
.progress-readout {
  flex: none;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.progress-note {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.05rem;
}
.responsive-stage {
  overflow: hidden;
}
.responsive-device {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 90%;
  width: auto;
  max-width: 96%;
  aspect-ratio: 16 / 10;
  padding: 8px 8px 20px;
  border: 1px solid #5c5c60;
  border-radius: 12px 12px 14px 14px;
  background: #3a3a3c;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  animation: rs-device 10s ease-in-out infinite;
}
.responsive-device::before,
.responsive-device::after {
  content: "";
  position: absolute;
  right: -2px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: #3a3a3c;
  opacity: 0;
  animation: rs-btns 10s ease-in-out infinite;
}
.responsive-device::before { top: 24%; height: 8%; }
.responsive-device::after { top: 36%; height: 13%; }
.responsive-screen {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  animation: rs-screen 10s ease-in-out infinite;
}
.responsive-screen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  background: #dbdbdb;
  opacity: 0;
  pointer-events: none;
  animation: rs-safe 10s ease-in-out infinite;
}
.rs-desk,
.rs-phone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.rs-nav-desk,
.rs-body-desk {
  display: block;
  width: 100%;
  height: auto;
}
.rs-desk { animation: rs-desk 10s ease-in-out infinite; }
.rs-phone {
  display: block;
  top: 12px;
  left: 0;
  width: 100%;
  max-width: none;
  height: auto;
  opacity: 0;
  animation: rs-phone 10s ease-in-out infinite;
}
.rs-cam,
.rs-island,
.rs-base,
.rs-home {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.rs-cam {
  top: 3px;
  z-index: 3;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1a1a1c;
  box-shadow: inset 0 0 0 1.5px #2a2a2c;
  animation: rs-cam 10s ease-in-out infinite;
}
.rs-island {
  top: 0;
  z-index: 4;
  width: 54%;
  height: 24px;
  border-radius: 0 0 12px 12px;
  background: #2a2a2c;
  opacity: 0;
  animation: rs-island 10s ease-in-out infinite;
}
.rs-island::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 10px;
  width: 38%;
  height: 4px;
  border-radius: 999px;
  background: #151517;
  transform: translateX(-50%);
}
.rs-island::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 13%;
  left: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0c1020;
  box-shadow: inset 0 0 0 1.5px #243056;
  transform: none;
}
.rs-base {
  bottom: 5px;
  width: 16%;
  height: 4px;
  border-radius: 999px;
  background: #2e2e30;
  animation: rs-base 10s ease-in-out infinite;
}
.rs-home {
  bottom: 1.2%;
  z-index: 4;
  width: 34%;
  height: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  opacity: 0;
  animation: rs-home 10s ease-in-out infinite;
}
@keyframes rs-device {
  0%, 10% {
    aspect-ratio: 16 / 10;
    padding: 8px 8px 20px;
    border-radius: 12px 12px 14px 14px;
    background: #3a3a3c;
  }
  32%, 46% {
    aspect-ratio: 4 / 3;
    padding: 14px;
    border-radius: 22px;
    background: #2f2f32;
  }
  70%, 100% {
    aspect-ratio: 440 / 956;
    padding: 12px 7px 10px;
    border-radius: 13.5% / 6.2%;
    background: #2a2a2c;
  }
}
@keyframes rs-screen {
  0%, 46% { border-radius: 4px; }
  70%, 100% { border-radius: 10.2% / 4.7%; }
}
@keyframes rs-desk {
  0%, 48% { opacity: 1; }
  68%, 100% { opacity: 0; }
}
@keyframes rs-phone {
  0%, 48% { opacity: 0; }
  68%, 100% { opacity: 1; }
}
@keyframes rs-safe {
  0%, 48% { opacity: 0; }
  68%, 100% { opacity: 1; }
}
@keyframes rs-cam {
  0%, 50% { opacity: 1; }
  68%, 100% { opacity: 0; }
}
@keyframes rs-base {
  0%, 14% { opacity: 1; }
  30%, 100% { opacity: 0; }
}
@keyframes rs-island {
  0%, 50% { opacity: 0; }
  70%, 100% { opacity: 1; }
}
@keyframes rs-home {
  0%, 50% { opacity: 0; }
  70%, 100% { opacity: 1; }
}
@keyframes rs-btns {
  0%, 50% { opacity: 0; }
  70%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .responsive-device,
  .responsive-device::before,
  .responsive-device::after,
  .responsive-screen,
  .rs-base,
  .rs-cam,
  .rs-island,
  .rs-home,
  .rs-desk,
  .rs-phone,
  .responsive-screen::before { animation: none; }
  .rs-phone,
  .rs-island,
  .rs-home,
  .responsive-screen::before { display: none; }
}
.study-card .card-stage.co-stage {
  container-type: size;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 1.05rem 0.55rem 0.95rem;
}
.co-scene {
  position: relative;
  width: min(100cqw, calc(100cqh * 1719 / 736));
  height: min(100cqh, calc(100cqw * 736 / 1719));
  aspect-ratio: 1719 / 736;
  overflow: hidden;
}
.co-scene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  object-fit: fill;
  pointer-events: none;
}
.co-lap { z-index: 1; }
.co-phone {
  z-index: 3;
  transform: translateX(-24%);
}
.co-tab {
  z-index: 2;
  transform: translateX(42%);
}
#study-amex.is-focus .co-phone {
  animation: co-from-left 10s ease-in-out infinite;
}
#study-amex.is-focus .co-tab {
  animation: co-from-right 10s ease-in-out infinite;
}
@keyframes co-from-left {
  0%, 8% { transform: translateX(-24%); }
  28%, 74% { transform: translateX(0); }
  90%, 100% { transform: translateX(-24%); }
}
@keyframes co-from-right {
  0%, 11% { transform: translateX(42%); }
  31%, 74% { transform: translateX(0); }
  90%, 100% { transform: translateX(42%); }
}
@media (prefers-reduced-motion: reduce) {
  #study-amex.is-focus .co-phone,
  #study-amex.is-focus .co-tab {
    animation: none;
    transform: none;
  }
  .co-phone,
  .co-tab { transform: none; }
}
.study-card .card-stage.cart-stage {
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 1rem 1.1rem 0.7rem;
}
.xdr {
  width: min(100cqw, calc(100cqh * 718 / 470));
  max-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.xdr-body {
  position: relative;
  width: 100%;
  aspect-ratio: 718 / 412;
  border-radius: 1.7%;
  background: linear-gradient(180deg, #f2f2f4 0%, #d5d5db 42%, #b4b4bb 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 18px 34px rgba(0, 0, 0, 0.38);
}
.xdr-glass {
  position: absolute;
  left: 0.7%;
  right: 0.7%;
  top: 1.65%;
  bottom: 1.65%;
  overflow: hidden;
  border-radius: 0.45%;
  background: #000;
}
.xdr-screen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background: #000;
  filter: brightness(var(--shade, 0.74));
}
.xdr-stand {
  width: 22%;
  height: 0.7rem;
  margin-top: 0.15rem;
  border-radius: 0 0 0.45rem 0.45rem;
  background: linear-gradient(180deg, #c9c9cf, #a3a3aa);
  position: relative;
}
.xdr-stand::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1.15rem;
  height: 0.7rem;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #b7b7be, #c9c9cf);
}
@property --gc-show {
  syntax: "<number>";
  inherits: true;
  initial-value: 2.7;
}
.study-card .card-stage.gc-stage {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 0.85rem 0.8rem;
}
.gc-stage {
  overflow: hidden;
  container-type: size;
  container-name: gcstage;
}
.gc-logo {
  position: absolute;
  top: 50%;
  right: calc(100% + 1.4rem);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: #fff;
  transform: translateY(-50%);
  white-space: nowrap;
  pointer-events: none;
}
.gc-logo svg { display: block; height: 1.7rem; width: auto; flex: none; }
.gc-logo span {
  font-family: var(--sans);
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.gc-logo-android { color: #3ddc84; }
.gc-logo-android span { color: #fff; }
.gc-phone {
  --gc-show: 2.7;
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 96%;
  width: auto;
  min-width: 0;
  max-width: 94%;
  aspect-ratio: 428 / 926;
  padding: 10px 8px 9px;
  border-radius: 12% / 5.5%;
  background: #2a2a2c;
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.gc-ios { animation: gc-ios 8s ease-in-out infinite; }
.gc-and {
  height: 94%;
  aspect-ratio: 9 / 20;
  padding: 5px 4px 6px;
  border-radius: 8% / 3.6%;
  background: #161618;
  opacity: 0;
  animation: gc-and 8s ease-in-out infinite;
}
.gc-phone::before,
.gc-phone::after {
  content: "";
  position: absolute;
  right: -1.5px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: #3a3a3c;
}
.gc-phone::before { top: 24%; height: 8%; }
.gc-phone::after { top: 36%; height: 13%; }
.gc-and::before {
  right: auto;
  left: -1.5px;
  top: 18%;
  height: 12%;
  border-radius: 2px 0 0 2px;
}
.gc-and::after { top: 22%; height: 6.5%; }
.gc-screen {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 9.6% / 4.4%;
  background: #fff;
}
.gc-and .gc-screen {
  container-type: size;
  border-radius: 6.2% / 2.8%;
}
.gc-and .gc-ui { font-size: 3.22cqh; }
.gc-ui {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0.15em 0 0.15em 0.75em;
  background: #fff;
  color: #1a1a1a;
  font-family: var(--sans);
  font-size: 2.72cqh;
  line-height: 1.15;
  user-select: none;
}
.gc-ui svg { display: block; flex: none; }
.gc-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  height: 2.7em;
  margin-right: 0.75em;
  padding: 0 0.2em;
  font-size: 0.74em;
  font-weight: 500;
  line-height: 1;
}
.gc-status > span { display: flex; align-items: center; height: 100%; }
.gc-sigs { display: flex; align-items: center; gap: 0.36em; height: 100%; }
.gc-sigs svg { width: 1.15em; height: 0.85em; }
.gc-sigs svg:last-child { width: 1.55em; }
.gc-and .gc-status { height: 1.75em; }
.gc-ios .gc-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48% minmax(0, 1fr);
  align-items: center;
  height: 4.4%;
  margin-right: 0.75em;
  padding: 0 1.2% 0 4%;
  font-size: 0.68em;
}
.gc-ios .gc-status > span:first-child { justify-self: start; }
.gc-ios .gc-sigs {
  grid-column: 3;
  justify-self: end;
}
.gc-nav {
  display: grid;
  grid-template-columns: 1.4em 1fr 1.5em;
  align-items: center;
  min-height: 1.7em;
  margin-right: 0.75em;
}
.gc-nav strong {
  font-size: 0.98em;
  font-weight: 500;
  text-align: center;
}
.gc-nav > svg { width: 1.25em; height: 1.25em; justify-self: end; }
.gc-back {
  width: 0.48em;
  height: 0.48em;
  margin-left: 0.12em;
  border-left: 1.5px solid #1a1a1a;
  border-bottom: 1.5px solid #1a1a1a;
  transform: rotate(45deg);
}
.gc-search {
  display: flex;
  align-items: center;
  gap: 0.4em;
  height: 2em;
  margin-top: 0.35em;
  margin-right: 0.75em;
  padding: 0 0.7em;
  border-radius: 0.55em;
  background: #f2f3f5;
  color: #8d8d8d;
  font-size: 0.78em;
}
.gc-search svg { width: 1em; height: 1em; }
.gc-chips {
  display: flex;
  gap: 0.35em;
  margin-top: 0.5em;
  margin-right: 0.75em;
  overflow: hidden;
}
.gc-chips span {
  flex: none;
  padding: 0.32em 0.7em;
  border-radius: 999px;
  background: #f2f3f5;
  color: #3a3a3a;
  font-size: 0.66em;
  line-height: 1.2;
  white-space: nowrap;
}
.gc-chips .is-on { background: #006fcf; color: #fff; }
.gc-page-title {
  flex: none;
  margin: 0.4em 0.75em 0.4em 0;
  font-size: 1.12em;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-align: left;
}
.gc-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  margin-top: 0;
  margin-right: 0.75em;
  overflow: hidden;
}
.gc-list-item {
  flex: none;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5em;
}
.gc-list-item .gc-art {
  flex: none;
  width: 5.45em;
  aspect-ratio: 16 / 8.8;
}
.gc-list-item .gc-name {
  flex: 1;
  width: auto;
  margin-top: 0;
  font-size: 0.78em;
  text-align: left;
  color: #1a1a1a;
}
.gc-sections {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.25em;
  margin-top: 0.55em;
  overflow: hidden;
}
.gc-section {
  flex: none;
  display: flex;
  flex-direction: column;
}
.gc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.45em;
  margin: 0 0.75em 0.34em 0;
}
.gc-head h5 {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 0.84em;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gc-head span {
  flex: none;
  color: #006fcf;
  font-size: 0.68em;
  font-weight: 500;
}
.gc-row {
  display: flex;
  align-items: flex-start;
  gap: 0.45em;
  overflow: hidden;
}
.gc-tile {
  container-type: inline-size;
  flex: none;
  width: 5.45em;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.gc-section.is-featured .gc-tile {
  width: calc((100% - 0.45em) / 1.5);
}
.gc-section.is-featured .gc-name {
  font-size: 8.5cqw;
}
.gc-art {
  container-type: size;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 8.8;
  overflow: hidden;
  padding: 0.35em;
  border-radius: 0.55em;
  color: #fff;
  text-align: center;
}
.gc-art b {
  position: relative;
  z-index: 1;
  font-size: min(46cqh, 20cqw);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.gc-sale {
  position: absolute;
  top: 0.28em;
  left: 0.28em;
  z-index: 2;
  padding: 0.16em 0.34em;
  border-radius: 0.2em;
  background: #14804a;
  color: #fff;
  font-size: min(20cqh, 13cqw);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}
.gc-name {
  flex: none;
  width: 100%;
  margin-top: 0.28em;
  overflow: hidden;
  color: #3f3f3f;
  font-size: 15cqw;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gc-art.is-starbucks {
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.16) 0 32%, transparent 33%),
    #00704a;
}
.gc-art.is-chipotle { background: #4a1c12; }
.gc-art.is-doordash { background: #eb1700; }
.gc-art.is-doordash b { font-size: min(24cqh, 12cqw); }
.gc-art.is-adidas { background: #111; }
.gc-art.is-adidas b { letter-spacing: -0.04em; text-transform: lowercase; }
.gc-art.is-sephora {
  background:
    linear-gradient(#fff, #fff) center 28% / 100% 8% no-repeat,
    linear-gradient(#fff, #fff) center 72% / 100% 8% no-repeat,
    #111;
}
.gc-art.is-sephora b {
  letter-spacing: 0.1em;
  font-size: min(30cqh, 14cqw);
}
.gc-art.is-crate { background: #eceae6; }
.gc-art.is-crate b { color: #1c1c1c; font-size: min(24cqh, 13cqw); }
.gc-art.is-airbnb { background: #ff5a5f; }
.gc-art.is-delta {
  background:
    linear-gradient(#003366, #003366) 0 0 / 100% 84% no-repeat,
    #e01933;
}
.gc-art.is-delta b { letter-spacing: 0.14em; font-size: min(24cqh, 13cqw); }
.gc-art.is-marriott { background: #1b1b1b; }
.gc-art.is-marriott b { letter-spacing: 0.02em; }
.gc-art.is-live { background: #e21836; }
.gc-art.is-live b { font-size: min(28cqh, 15cqw); }
.gc-art.is-classpass { background: #2146d6; }
.gc-art.is-classpass b { font-size: min(28cqh, 14cqw); }
.gc-art.is-stubhub { background: #3c1464; }
.gc-art.is-amex { background: #006fcf; }
.gc-art.is-uber { background: #111; }
.gc-art.is-lyft { background: #ff00bf; }
.gc-art.is-amtrak { background: #002868; }
.gc-art.is-amtrak b { letter-spacing: 0.06em; }
.gc-art.is-amazon {
  background: #161d27 url("../assets/media/amazon-gift-card.jpg?v=2") center / cover no-repeat;
}
.gc-art.is-amazon b,
.gc-art.is-amazon::after {
  display: none;
}
.gc-art.is-apple { background: #1d1d1f; }
.gc-art.is-nike { background: #111; }
.gc-art.is-nike b { letter-spacing: 0.18em; font-size: min(28cqh, 14cqw); }
.gc-notch,
.gc-home {
  position: absolute;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  pointer-events: none;
}
.gc-notch {
  top: 0;
  width: 48%;
  height: 3.7%;
  background: #050505;
  border-radius: 0 0 1.15em 1.15em;
}
.gc-home {
  bottom: 1.15%;
  width: 34%;
  height: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
}
.gc-hole {
  position: absolute;
  top: 1.35%;
  left: 50%;
  z-index: 2;
  width: 2.35cqh;
  height: 2.35cqh;
  border-radius: 50%;
  background: #050505;
  transform: translateX(-50%);
  pointer-events: none;
}
.gc-keys {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 7.4%;
  background: #fff;
  color: #202124;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
.gc-keys svg { display: block; width: auto; height: 52%; }
@keyframes gc-ios {
  0%, 8% { opacity: 1; height: 96%; aspect-ratio: 428 / 926; }
  24%, 39% { opacity: 1; height: 87.8%; aspect-ratio: 390 / 844; }
  46% { opacity: 0; height: 87.8%; aspect-ratio: 390 / 844; }
  88% { opacity: 0; height: 96%; aspect-ratio: 428 / 926; }
  96%, 100% { opacity: 1; height: 96%; aspect-ratio: 428 / 926; }
}
@keyframes gc-and {
  0%, 36% { opacity: 0; height: 94%; }
  44%, 53% { opacity: 1; height: 94%; }
  69%, 84% { opacity: 1; height: 88.4%; }
  91% { opacity: 0; height: 88.4%; }
  96%, 100% { opacity: 0; height: 94%; }
}
@media (prefers-reduced-motion: reduce) {
  .gc-ios,
  .gc-and { animation: none; }
  .gc-and { opacity: 0; }
}
.case-hero.gift-hero .hero-lead {
  margin-bottom: 2.25rem;
}
.gift-mock {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.case-gift .brief + .brief {
  margin-top: var(--section-space);
}
.case-gift main > .gift-mock {
  margin-top: var(--section-space);
}
.case-gift #stakeholder-requirements {
  margin-top: calc(var(--section-space) * 1.25);
  margin-bottom: calc(var(--section-space) * 2);
}
.case-gift #stakeholder-requirements + .case-split {
  margin-top: 0;
}
.case-gift #stakeholder-requirements .ri-roles {
  grid-column: 1 / -1;
  margin-top: 0;
}
.case-gift #defining-opportunity {
  margin-top: calc(var(--section-space) * 2);
  margin-bottom: calc(var(--section-space) * 2);
}
.case-gift #defining-opportunity p {
  max-width: none;
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
}
.case-gift #defining-opportunity p span {
  white-space: nowrap;
}
.case-gift #defining-opportunity + #rethinking-discovery {
  margin-top: 0;
}
.case .case-split.identify-lead#final-direction > p {
  width: min(78rem, 100%);
  max-width: 100%;
  overflow-wrap: break-word;
}
.case .brief h3:has(.design-phase-line),
.case-split h3:has(.design-phase-line) {
  display: inline-flex;
  flex-direction: column;
  overflow: visible;
  text-box-trim: unset;
  text-box-edge: auto;
}
.case .brief h3:has(.design-phase-line) {
  align-items: center;
}
.case-split h3:has(.design-phase-line) {
  align-items: flex-start;
  width: max-content;
  max-width: 100%;
}
.case-gift #rethinking-discovery > .methods {
  margin-top: var(--block-gap);
}
.case-gift #rethinking-discovery .chase-map {
  margin-top: 0;
}
.chase-map {
  display: grid;
  grid-template-columns: auto minmax(16rem, 22rem) auto;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  column-gap: 0.15rem;
}
.chase-stage {
  grid-column: 2;
  position: relative;
  margin: 0;
  min-width: 0;
}
.chase-stage img {
  width: 100%;
  border-radius: 1.7rem;
}
.chase-dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0.7rem;
  height: 0.7rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.chase-callouts {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chase-callouts.is-start { grid-column: 1; min-width: 8.6rem; }
.chase-callouts.is-end { grid-column: 3; min-width: 9.6rem; }
.chase-callouts li {
  position: absolute;
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  transform: translateY(-50%);
  pointer-events: none;
}
.chase-callouts.is-start li {
  right: 0;
  justify-content: flex-end;
  text-align: right;
}
.chase-callouts.is-end li { left: 0; }
.chase-callouts li::after {
  content: "";
  flex: none;
  width: 2.4rem;
  height: 1.5px;
  background: var(--yellow);
}
.chase-callouts.is-start li::after { order: 1; }
.chase-callouts li span {
  flex: none;
  color: var(--yellow);
  font-family: var(--script);
  font-size: 1.55rem;
  line-height: 1;
  white-space: nowrap;
}
.chase-legend {
  display: none;
  grid-column: 1 / -1;
  list-style: none;
  margin: 1.15rem 0 0;
  padding: 0;
  color: var(--yellow);
  font-family: var(--script);
  font-size: 1.45rem;
  line-height: 1.2;
  text-align: center;
}
.case-gift #gift-comp-boa .gift-mock { margin-top: 0; }
.case-gift #gift-comp-boa .card-stage {
  height: min(calc(100svh - 15rem), 640px);
  min-height: 480px;
}
.case-gift #gift-comp-boa .gift-ios-max { height: 100%; }
.case-gift #gift-comp-boa .gift-ios-pro { height: 90%; }
.boa-native .gc-notch,
.boa-native .gc-home { z-index: 5; }
.boa-native .boa-app {
  padding: 0 0 7.5%;
  background: #fff;
  color: #1a1a1a;
}
.boa-native .boa-app .gc-status {
  margin: 0;
  background: #fff;
  color: #1a1a1a;
}
.boa-native .boa-app .gc-nav {
  grid-template-columns: 1.35em 1fr 1.35em;
  min-height: 2.35em;
  margin: 0;
  padding: 0 0.85em;
  background: #fff;
  border-bottom: 1px solid #ececec;
}
.boa-native .boa-app .gc-nav strong {
  color: #012169;
  font-size: 0.95em;
}
.boa-burger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 1.12em;
  height: 0.78em;
  justify-self: start;
}
.boa-burger i {
  display: block;
  height: 1.6px;
  border-radius: 1px;
  background: #012169;
}
.boa-heading {
  margin: 0.7em 0.85em 0.45em;
  color: #1a1a1a;
  font-size: 0.9em;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.boa-sort {
  display: flex;
  gap: 0.95em;
  margin: 0 0.85em 0.65em;
  padding: 0;
  background: none;
  font-size: 0.62em;
}
.boa-sort span {
  flex: none;
  display: block;
  height: auto;
  color: #6b6b6b;
  white-space: nowrap;
}
.boa-sort .is-on {
  background: none;
  color: #1a1a1a;
  box-shadow: none;
  font-weight: 500;
}
.boa-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 0.55em;
  padding: 0 0.6em 0.2em;
  overflow: hidden;
}
.boa-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0.65em 0.5em 0.5em;
  border: 1px solid #e6e6e6;
  background: #fff;
}
.boa-art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.15em 0 0.5em;
}
.boa-art img,
.boa-art .gc-art {
  width: 88%;
  aspect-ratio: 164 / 103;
  border-radius: 0.28em;
  object-fit: cover;
}
.boa-art .gc-art {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.boa-card .gc-name {
  margin-top: 0;
  overflow: hidden;
  color: #1a1a1a;
  font-size: 0.56em;
  font-weight: 400;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.boa-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55em;
  margin-top: 0.4em;
  color: #9a9a9a;
  font-size: 0.46em;
}
.boa-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
}
.boa-stat::before {
  content: "";
  width: 0.72em;
  height: 0.72em;
  flex: none;
  opacity: 0.7;
}
.boa-stat.is-view::before {
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c-5 0-9.3 3.1-11 7 1.7 3.9 6 7 11 7s9.3-3.1 11-7c-1.7-3.9-6-7-11-7Zm0 11.2A4.2 4.2 0 1 1 16.2 12 4.2 4.2 0 0 1 12 16.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.boa-stat.is-heart::before {
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-7.2-4.4-9.5-8.2C.8 10.2 1.6 6.8 4.6 5.6 6.6 4.8 8.8 5.5 12 8.2c3.2-2.7 5.4-3.4 7.4-2.6 3 1.2 3.8 4.6 2.1 7.2C19.2 16.6 12 21 12 21Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gc-art.is-walmart { background: #1a1a1a; }
.gc-art.is-walmart b {
  color: #ffc220;
  letter-spacing: -0.03em;
  font-size: min(32cqh, 16cqw);
}
.gc-art.is-tjx { background: #6b1d2a; }
.gc-art.is-tjx b {
  letter-spacing: 0.12em;
  font-size: min(36cqh, 18cqw);
}
.boa-sheet {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  background: rgba(10, 16, 28, 0.42);
  pointer-events: none;
}
.boa-sheet-panel {
  display: flex;
  flex-direction: column;
  width: 82%;
  height: 100%;
  padding: 4.6% 0 9.2%;
  background: #fff;
  box-shadow: 10px 0 28px rgba(0, 0, 0, 0.18);
}
.boa-sheet-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: none;
  padding: 0.1em 0.85em 0.35em;
}
.boa-close {
  position: relative;
  width: 0.85em;
  height: 0.85em;
}
.boa-close::before,
.boa-close::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1.5px;
  height: 100%;
  background: #012169;
}
.boa-close::before { transform: rotate(45deg); }
.boa-close::after { transform: rotate(-45deg); }
.boa-sheet-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.boa-side-search {
  display: flex;
  align-items: stretch;
  height: 2em;
  margin: 0 0.85em 0.55em;
  border: 1px solid #c8c8c8;
}
.boa-side-field { flex: 1; background: #fff; }
.boa-side-go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.05em;
  background: #012169;
  color: #fff;
}
.boa-side-go svg { width: 0.95em; height: 0.95em; }
.boa-row {
  display: flex;
  align-items: center;
  gap: 0.4em;
  min-height: 1.85em;
  padding: 0 0.95em;
  color: #0051a5;
  font-size: 0.72em;
}
.boa-row.is-check { color: #1a1a1a; }
.boa-sheet-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.15em;
  padding: 0.7em 0.95em 0.35em;
  border-top: 1px solid #e6e6e6;
  color: #1a1a1a;
  font-size: 0.72em;
  font-weight: 500;
}
.boa-sheet-label.is-toggle::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-left: 1.5px solid #1a1a1a;
  border-bottom: 1.5px solid #1a1a1a;
  transform: rotate(135deg);
}
.boa-box {
  flex: none;
  width: 0.82em;
  height: 0.82em;
  border: 1.5px solid #6b6b6b;
  border-radius: 0.14em;
}
.case-gift .comp-block .figure {
  display: block;
  width: min(70%, 100%);
  margin: 0 auto;
}
.case-gift .comp-block .figure img {
  background: #ececec;
}
.case-gift .comp-block .observe {
  grid-column: auto;
  width: min(70%, 100%);
  margin: var(--block-gap) auto 0;
}
.case-gift #early-feedback .quote-people {
  margin-top: var(--block-gap);
}
.case-gift .gift-reason {
  margin-top: 16px;
  color: var(--muted);
}
.case-gift .gift-reason strong {
  display: block;
  margin: 0 0 6px;
  color: var(--yellow);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
}
.case-gift #gift-listing .methods {
  grid-column: 1 / -1;
}
.case-gift #option-feedback > h3,
.case-gift #option-feedback .fb-audience {
  grid-column: 1 / -1;
}
.case-gift #option-feedback .fb-audience + .fb-audience {
  margin-top: var(--block-gap);
}
.case-gift #option-feedback .fb-audience h4 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case-gift #option-feedback .fb-ask {
  margin: var(--text-gap) 0 0;
  padding: 0 0 0 1.25rem;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}
.case .case-split .fb-ask li {
  position: relative;
  margin: 0;
  padding-left: 1.35rem;
  max-width: none;
  color: var(--copy);
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case-gift #option-feedback .fb-ask li::before {
  position: absolute;
  left: 0;
  color: var(--yellow);
  font-weight: 500;
}
.case-gift #option-feedback .fb-ask li:nth-child(1)::before { content: "1."; }
.case-gift #option-feedback .fb-ask li:nth-child(2)::before { content: "2."; }
.case-gift #option-feedback .fb-ask li:nth-child(3)::before { content: "3."; }
.case-gift #option-feedback .fb-audience h4.fb-responses {
  margin-top: var(--block-gap);
}
.case-gift #option-feedback .fb-audience .ri-roles,
.case-gift #option-feedback .fb-members {
  margin-top: var(--text-gap);
}
.case-gift #option-feedback .fb-members {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.case-gift #option-feedback .fb-members .ri-task {
  margin-bottom: 0.7rem;
  color: rgba(255, 255, 255, 0.34);
}
.case-gift #gift-listing .gift-mock {
  grid-column: 1 / -1;
  margin-top: 0;
}
.case-gift #final-direction .gift-mock {
  grid-column: 1 / -1;
  width: 100%;
  justify-self: stretch;
  margin-top: var(--block-gap);
  text-align: left;
}
.case-gift #gift-listing .gift-mock .card-stage {
  height: min(calc(100svh - 15rem), 640px);
  min-height: 420px;
}
.case-gift #final-direction .gift-mock .card-stage {
  height: min(calc(100svh - 15rem), 560px);
  min-height: 420px;
}
.case-gift #final-direction .gift-hero-devices {
  gap: clamp(1rem, 2.2vw, 1.8rem);
}
.case-gift #gift-listing .gift-mock .gift-ios-max { height: 100%; }
.case-gift #gift-listing .gift-mock .gift-ios-pro { height: 90%; }
.case-gift #final-direction .gift-mock .gift-ios-max,
.case-gift #final-direction .gift-mock .gift-and-ultra { height: 100%; }
.case-gift #final-direction .gc-sections {
  margin-top: 1em;
}
.case-gift #final-direction .gc-section.is-az > .gc-grid {
  flex: 1;
  margin-right: 0.75em;
  height: auto;
}
@media (max-width: 1100px) {
  .case-gift #gift-comp-boa .card-stage {
    height: auto;
    min-height: 0;
    padding: 0.5rem 0 1.5rem;
  }
  .case-gift #gift-comp-boa .gift-hero-devices {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    gap: 1.75rem;
  }
  .case-gift #gift-comp-boa .gift-ios-max,
  .case-gift #gift-comp-boa .gift-ios-pro {
    height: min(78vh, 580px);
  }
  .case-gift #gift-listing .gift-mock .card-stage,
  .case-gift #final-direction .gift-mock .card-stage {
    height: auto;
    min-height: 0;
    padding: 0.5rem 0 1.5rem;
  }
  .case-gift #gift-listing .gift-hero-devices,
  .case-gift #final-direction .gift-hero-devices {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    gap: 1.75rem;
  }
  .case-gift #gift-listing .gift-mock .gift-ios-pro {
    order: -1;
    height: min(70vh, 520px);
  }
  .case-gift #gift-listing .gift-mock .gift-ios-max,
  .case-gift #final-direction .gift-mock .gift-ios-max,
  .case-gift #final-direction .gift-mock .gift-and-ultra {
    height: min(78vh, 580px);
  }
}
#gift-opt-2 .gc-sections {
  margin-top: 1em;
}
.gc-az-layout {
  gap: 0.55em;
}
.gc-section.is-carousel .gc-row {
  align-items: stretch;
}
.gc-section.is-carousel .gc-tile:first-child {
  width: calc(100% - 2.15em);
}
.gc-section.is-carousel .gc-tile:last-child {
  width: 5.2em;
}
.gc-section.is-carousel .gc-art {
  aspect-ratio: 16 / 8.8;
}
.gc-section.is-carousel .gc-tile:last-child .gc-art {
  aspect-ratio: auto;
  flex: 1;
  min-height: 0;
}
.gc-section.is-carousel .gc-sale {
  font-size: min(11cqh, 7.2cqw);
  padding: 0.14em 0.28em;
}
.gc-section.is-carousel .gc-name {
  display: none;
}
.gc-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28em;
  margin: 0.32em 0.75em 0 0;
}
.gc-dots i {
  width: 0.32em;
  height: 0.32em;
  border-radius: 50%;
  background: #d2d2d2;
}
.gc-dots i.is-on { background: #1a1a1a; }
.gc-section.is-az {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.gc-az {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.05em;
  align-items: stretch;
  gap: 0.12em;
  min-height: 0;
  overflow: hidden;
  flex: 1;
}
.gc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 0.62em 0.45em;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.gc-grid .gc-tile {
  width: auto;
  height: auto;
  min-height: max-content;
  overflow: visible;
}
.gc-grid .gc-art {
  flex: none;
  aspect-ratio: 16 / 8.8;
}
.gc-grid .gc-name {
  position: relative;
  z-index: 1;
  margin-top: 0.22em;
  font-size: 10cqw;
  line-height: 1.2;
}
.gc-grid .gc-sale {
  font-size: min(18cqh, 11cqw);
}
.gc-az-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  gap: 0;
  padding: 0.08em 0 0.55em;
  overflow: hidden;
  color: #006fcf;
  font-size: 0.48em;
  font-weight: 500;
  line-height: 1;
}
.gc-az-rail span {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gc-list-item .gc-art { overflow: hidden; }
.case-gift #sketching .methods img {
  background: #faf7f1;
}
.case-gift #sketching .method-frame {
  width: min(92%, 68rem);
  background: #faf7f1;
}
.case-gift #sketching .sketch-stage {
  position: relative;
}
.case-gift #sketching .sketch-pins {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.case-gift #sketching .sketch-pins li {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  transform: translate(-50%, -50%);
  border: 1.5px solid #3e60a8;
  border-radius: 50%;
  background: #faf7f1;
  color: #3e60a8;
  font-family: var(--script);
  font-size: 1.15rem;
  line-height: 1;
}
.case-gift #sketching .sketch-pins li::after {
  content: "";
  position: absolute;
  left: calc(100% - 1px);
  top: 50%;
  width: var(--line, 1.5rem);
  height: 1.5px;
  background: #3e60a8;
  transform: translateY(-50%);
}
.case-gift #sketching .sketch-pins li.is-end::after {
  left: auto;
  right: calc(100% - 1px);
}
.case-gift #sketching .sketch-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.05rem 2.2rem;
  width: 100%;
  margin: 0;
  padding: 0.35rem 8% 2.1rem;
  list-style: none;
  font-family: var(--script);
  color: #3e60a8;
}
.case-gift #sketching .sketch-notes > li {
  display: grid;
  grid-template-columns: 1.45rem minmax(0, 1fr);
  column-gap: 0.5rem;
  align-items: start;
  margin: 0;
  max-width: none;
  font-size: 1.65rem;
  line-height: 1.2;
  color: #3e60a8;
  text-box-trim: none;
}
.case-gift #sketching .sketch-notes > li::before {
  content: none;
}
.case-gift #sketching .sketch-notes p {
  margin: 0;
  max-width: none;
  color: inherit;
  font: inherit;
  text-box-trim: none;
}
.case-gift #sketching .sketch-notes strong {
  font-weight: 400;
}
.case-gift #sketching .sketch-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.12rem;
  border: 1.5px solid #3e60a8;
  border-radius: 50%;
  font-size: 1.15rem;
  line-height: 1;
}
.case-split .jx-map,
.case-split .ia-tree {
  grid-column: 1 / -1;
  justify-self: center;
  min-width: 0;
  margin-top: var(--block-gap);
}
.case-split .jx-map { width: 70%; }
.case-gift #redemption-journey {
  grid-template-columns: minmax(0, 1fr);
}
.case-gift #redemption-journey > h3 {
  grid-column: 1;
}
.case-gift #redemption-journey .jx-map {
  width: 100%;
}
.case-split .ia-tree {
  width: 100%;
  min-height: min-content;
}
.case-gift #user-research .ri-kicker,
.case-gift #user-research .ri-methods,
.case-gift #user-research .ri-grid,
.case-gift #user-research .ri-block,
.case-gift #user-research .ri-heu-map,
.case-gift #user-research .ri-note {
  grid-column: 1 / -1;
}
.case-gift .ri-kicker {
  margin: var(--block-gap) 0 0;
  color: var(--yellow);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.case-gift .ri-kicker + .ri-methods,
.case-gift .ri-kicker + .ri-grid {
  margin-top: 0.85rem;
}
.ri-methods,
.ri-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  min-width: 0;
}
.ri-method {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
  padding: 1.05rem 1.1rem 1.1rem;
  border: 1px solid #2a2a2a;
  border-radius: 18px;
  background: #141414;
}
.ri-method > div { min-width: 0; }
.ri-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--yellow);
}
.ri-ico svg {
  width: 1.7rem;
  height: 1.7rem;
}
.ri-method strong {
  display: block;
  margin: 0 0 0.2rem;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.ri-method span:not(.ri-ico) {
  display: block;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
}
.ri-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #2a2a2a;
  border-radius: 22px;
  background: #141414;
}
.ri-card.is-find { border-top: 3px solid #ff6b57; }
.ri-card.is-ia { border-top: 3px solid #4d7cff; }
.ri-card.is-viz { border-top: 3px solid #ffd233; }
.ri-viz {
  position: relative;
  height: 17.75rem;
  overflow: hidden;
  padding: 0.85rem 0.85rem 0.7rem;
  background: #ececec;
  color: #161616;
}
.ri-task {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.55rem;
  color: #3a3a3a;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ri-scan {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ri-scan li {
  display: grid;
  grid-template-columns: 1.1rem 2.9rem minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.28rem;
  padding: 0.16rem 0.35rem 0.16rem 0.2rem;
  border-radius: 8px;
  opacity: 0.58;
}
.ri-scan li.is-hit {
  opacity: 1;
  background: #fff;
  box-shadow: 0 0 0 2px #ff6b57;
}
.ri-scan i {
  color: #8a8a8a;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 500;
  text-align: center;
}
.ri-scan li.is-hit i { color: #ff6b57; }
.ri-scan .gc-art {
  width: 2.9rem;
  border-radius: 0.35rem;
}
.ri-scan em {
  overflow: hidden;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ri-callout {
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: #ff6b57;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ri-sort {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  height: calc(100% - 1.2rem);
}
.ri-group {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  min-width: 0;
  padding: 0.45rem 0.4rem 0.5rem;
  border-radius: 12px;
  background: #fff;
}
.ri-group strong {
  margin: 0 0 0.1rem;
  color: #5c5c5c;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ri-group .gc-art {
  width: 100%;
  border-radius: 0.38rem;
}
.ri-group .gc-art b {
  font-size: min(40cqh, 16cqw);
}
.ri-weight {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem 0.4rem;
}
.ri-weight article {
  min-width: 0;
}
.ri-weight .gc-art {
  width: 100%;
  border-radius: 0.4rem;
}
.ri-weight .gc-name {
  margin-top: 0.22rem;
  color: #3f3f3f;
  font-size: 0.68rem;
}
.ri-weight small {
  display: block;
  color: #9a9a9a;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
}
.ri-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  padding: 1.05rem 1.15rem 1.15rem;
}
.ri-tag {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ri-card.is-find .ri-tag { color: #ff6b57; }
.ri-card.is-ia .ri-tag { color: #7aa2ff; }
.ri-card.is-viz .ri-tag { color: var(--yellow); }
.ri-body h4 {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.25;
}
.ri-body p {
  margin: 0;
  color: var(--copy);
  font-size: 0.95rem;
  line-height: 1.45;
  overflow-wrap: break-word;
}
.ri-src {
  margin-top: auto;
  padding-top: 0.55rem;
  color: #8d8d8d;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.case-gift .ri-note {
  margin: var(--block-gap) 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.case-gift .ri-note a {
  color: var(--ink);
  text-underline-offset: 0.18em;
}
.case .ri-scan li,
.case .ri-body p,
.case .ri-method span,
.case .ri-task {
  max-width: none;
}
.case .ri-task {
  color: #3a3a3a;
}
.case-gift #user-research .ri-block {
  margin-top: var(--section-space);
  min-width: 0;
}
.case-gift #user-research > p + .ri-block {
  margin-top: var(--block-gap);
}
.case .ri-role {
  color: var(--yellow);
}
.case .ri-num {
  color: #111;
}
.case .ri-learned-lead {
  max-width: 46rem;
  color: var(--ink);
}
.ri-block-head {
  display: grid;
  grid-template-columns: minmax(18rem, 32rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.ri-block-head:not(:has(> p)) {
  grid-template-columns: 1fr;
}
.ri-block-head > .ri-num {
  grid-column: 1;
  grid-row: 1;
}
.ri-block-head > h4 {
  grid-column: 1;
  grid-row: 2;
}
.ri-block-head > p:not(.ri-num) {
  grid-column: 2;
  grid-row: 2;
}
.ri-num {
  display: inline-block;
  width: fit-content;
  margin: 0 0 0.55rem;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  background: var(--yellow);
  color: #111;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.ri-block-head h4 {
  margin: 0;
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case .ri-block-head > p:not(.ri-num) {
  margin: 0;
  max-width: none;
  color: var(--copy);
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.ri-roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: var(--block-gap);
  min-width: 0;
}
.ri-tasks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: var(--block-gap);
  min-width: 0;
}
.ri-tasks > article {
  min-width: 0;
  padding: 1.3rem 1.4rem 1.4rem;
  border: 1px solid #2a2a2a;
  border-radius: 18px;
  background: #141414;
}
.case .ri-tasks .ri-task {
  display: block;
  margin: 0 0 0.4rem;
  color: var(--yellow);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ri-tasks h4 {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.ri-findings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.15rem 2rem;
  margin-top: 1.05rem;
  padding-top: 1.05rem;
  border-top: 1px solid rgba(255, 255, 255, 0.34);
}
.ri-label {
  margin: 0 0 0.4rem;
  color: #8d8d8d;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.case .ri-findings p {
  margin: 0;
  max-width: none;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}
.ri-findings ul {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.case .ri-findings li {
  position: relative;
  margin: 0;
  padding-left: 0.9rem;
  max-width: none;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}
.ri-findings li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: #6e6e6e;
}
.ri-roles article {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: 0.85rem;
  align-items: start;
  min-width: 0;
  padding: 1.15rem 1.2rem 1.2rem;
  border: 1px solid #2a2a2a;
  border-radius: 18px;
  background: #141414;
}
.ri-face {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  background: #2a2a2a;
}
.ri-role-copy {
  min-width: 0;
}
.ri-role {
  margin: 0 0 0.35rem;
  color: var(--yellow);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.case .ri-roles .ri-role {
  color: var(--yellow);
}
.ri-roles strong {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.case .ri-roles p {
  margin: 0;
  max-width: none;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}
.ri-heu {
  display: block;
  width: 100%;
  margin-top: var(--block-gap);
  overflow: hidden;
  border: 1px solid #2a2a2a;
  border-radius: 18px;
  background: #141414;
}
.ri-heu thead,
.ri-heu tbody { display: contents; }
.ri-heu-row {
  display: grid;
  grid-template-columns: minmax(8rem, 0.7fr) minmax(0, 1.6fr) 5.5rem;
  gap: 1rem;
  align-items: center;
  padding: 0.95rem 1.2rem;
  border-top: 1px solid #2a2a2a;
}
thead .ri-heu-row {
  border-top: 0;
  color: #8d8d8d;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ri-heu th,
.ri-heu td {
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
  font: inherit;
  color: inherit;
}
.ri-heu tbody th {
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.case .ri-heu td {
  max-width: none;
  color: var(--copy);
  font-size: 0.95rem;
  line-height: 1.4;
}
.ri-fail {
  justify-self: start;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: #ff6b57;
  color: #fff !important;
  font-size: 0.68rem !important;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ri-heu-map {
  display: grid;
  grid-template-columns: auto minmax(0, 32rem);
  justify-content: center;
  column-gap: 0.75rem;
  align-items: stretch;
  width: 100%;
  margin-top: var(--block-gap);
  min-width: 0;
}
.ri-heu-phone {
  grid-column: 1;
  justify-self: center;
  min-width: 0;
}
.ri-heu-phone .card-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: min(56vh, 540px);
  min-height: 380px;
  width: max-content;
  padding: 0;
  background: transparent;
}
.ri-heu-phone .gift-hero-devices {
  width: max-content;
  height: 100%;
}
.ri-heu-callouts { grid-column: 2; }
.ri-heu-phone .gc-phone {
  margin: 0;
}
.ri-heu-callouts {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin: 0;
  padding: 1.4rem 0 1.4rem 0;
  min-width: 0;
}
.ri-heu-callouts li {
  display: grid;
  grid-template-columns: minmax(2.4rem, 4.2rem) minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}
.ri-heu-rail {
  position: relative;
  display: block;
  height: 1px;
  background: #4a4a4a;
}
.ri-heu-rail::before,
.ri-heu-rail::after {
  content: "";
  position: absolute;
  top: 50%;
  border-radius: 50%;
  transform: translateY(-50%);
}
.ri-heu-rail::before {
  left: 0;
  width: 7px;
  height: 7px;
  background: #6a6a6a;
  transform: translate(-50%, -50%);
}
.ri-heu-rail::after {
  right: 0;
  width: 8px;
  height: 8px;
  background: #ff6b57;
  transform: translate(50%, -50%);
}
.ri-heu-copy {
  min-width: 0;
}
.ri-heu-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  margin-bottom: 0.28rem;
}
.ri-heu-title strong {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.case .ri-heu-copy p {
  margin: 0;
  max-width: 42rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.4;
}
.ri-heu-viz {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.ri-viz.is-heu {
  width: min(28rem, 100%);
  height: auto;
  border-radius: 18px;
}
.ri-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
  min-height: 13.5rem;
  padding: 0.4rem 0.2rem 0.2rem;
}
.case .ri-empty > p {
  margin: 0;
  max-width: none;
  color: #3a3a3a;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
}
.ri-empty ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ri-empty li {
  margin: 0 0 0.4rem;
  padding: 0.45rem 0.65rem;
  border: 1px dashed #c8c8c8;
  border-radius: 10px;
  color: #6a6a6a;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ri-empty li:last-child { margin-bottom: 0; }
.ri-learned {
  margin-top: var(--block-gap);
  padding: 1.2rem 1.35rem 1.3rem;
  border-left: 3px solid var(--yellow);
  border-radius: 0 16px 16px 0;
  background: #141414;
}
.ri-learned .ri-kicker { margin: 0 0 0.7rem; }
.ri-learned-lead {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.3;
}
.case .ri-learned > p:not(.ri-kicker):not(.ri-learned-lead),
.case .ri-learned-list {
  margin: 0.65rem 0 0;
  max-width: 46rem;
  color: var(--muted);
}
.ri-learned-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.ri-learned-list li {
  margin: 0;
  max-width: none;
  line-height: 1.45;
}
.ri-learned-list strong {
  color: var(--ink);
  font-weight: 500;
}
.case .ri-block .ri-body h4 {
  font-size: 1.08rem;
}
.ri-tasks .ri-viz { height: 16.5rem; }
.ia-tree {
  --ia-line: #c8c8c8;
  --ia-ink: #161616;
  width: 100%;
  padding: 2.4rem 1.6rem 2.4rem;
  overflow: visible;
  border-radius: 20px;
  background: #f3f3f3;
  color: var(--ia-ink);
  text-align: left;
}
.ia-board {
  display: grid;
  grid-template-columns: minmax(10rem, 11.2rem) repeat(6, minmax(0, 1fr));
  grid-template-areas:
    "home . . . . . ."
    "mem list select verify ship sum done";
  gap: 1.5rem 1.05rem;
  align-items: end;
}
.ia-stack,
.ia-path { display: contents; }
.ia-page.is-home { grid-area: home; align-self: start; }
.ia-page.is-mem { grid-area: mem; }
.ia-page.is-list { grid-area: list; }
.ia-page.is-select { grid-area: select; }
.ia-page.is-verify { grid-area: verify; }
.ia-page.is-ship { grid-area: ship; }
.ia-page.is-sum { grid-area: sum; }
.ia-page.is-done { grid-area: done; }
.ia-page {
  position: relative;
  background: #fff;
  border: 1.5px solid #1c1c1c;
  border-radius: 14px;
  padding: 0.7rem 0.65rem 0.75rem;
  min-width: 0;
}
.ia-page.is-home::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 1.5rem;
  background: var(--ia-line);
  transform: translateX(-50%);
}
.ia-page.is-list::before,
.ia-page.is-select::before,
.ia-page.is-verify::before,
.ia-page.is-ship::before,
.ia-page.is-sum::before {
  content: "";
  position: absolute;
  right: 100%;
  bottom: 1.15rem;
  width: 1.05rem;
  height: 2px;
  background: var(--ia-line);
}
.ia-page h4 {
  margin: 0 0 0.5rem;
  color: var(--ia-ink);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.2;
}
.ia-slots,
.ia-cards {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}
.ia-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.32rem;
}
.ia-slots span,
.ia-cards span {
  display: block;
  padding: 0.42rem 0.5rem;
  border-radius: 7px;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ia-ink);
  text-align: left;
}
.ia-page.is-home .ia-slots span { background: #fbf3d2; }
.ia-page.is-mem .ia-slots span { background: #e8e2fa; }
.ia-page.is-list .ia-slots span { background: #d8f3e6; }
.ia-page.is-select .ia-cards span { background: #e3e9fb; }
.ia-page.is-verify .ia-slots span { background: #fde7c8; }
.ia-page.is-ship .ia-slots span { background: #d4f0dc; }
.ia-page.is-sum .ia-slots span { background: #fff1b8; }
.ia-page.is-done .ia-slots span { background: #f8d5e6; }
.ia-slots span.is-path {
  box-shadow: inset 0 0 0 1.5px #e38b2a;
  position: relative;
}
.ia-slots span.is-path::after {
  content: "";
  position: absolute;
  left: calc(100% + 2px);
  top: 50%;
  width: 1.05rem;
  height: 2px;
  background: #e38b2a;
  transform: translateY(-50%);
}
.ia-slots span.is-path::before {
  content: "";
  position: absolute;
  left: calc(100% + 0.8rem);
  top: 50%;
  border: 5px solid transparent;
  border-left-color: #e38b2a;
  transform: translateY(-50%);
  z-index: 2;
}
.ia-checkout {
  grid-column: 3 / 7;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  min-width: 0;
  z-index: 1;
}
.ia-checkout-callout {
  --ia-pencil: #6f6f6f;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: 0;
  isolation: isolate;
}
.case .ia-checkout-note {
  order: 1;
  align-self: flex-end;
  margin: 0 0 -2.35rem 0;
  max-width: 22rem;
  position: relative;
  z-index: 1;
  color: var(--ia-pencil);
  font-family: var(--script);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.05;
  text-align: right;
  text-box-trim: none;
  transform: rotate(-1.5deg);
  transform-origin: right top;
}
.case .ia-checkout-note a {
  color: inherit;
  text-decoration: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.2 C 16 2.4, 24 7.2, 42 4.4 S 74 7.4, 96 3.6 S 112 6.2, 119 3.8' fill='none' stroke='%236f6f6f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.28em;
}
.ia-checkout-arrow {
  order: 2;
  position: relative;
  flex: 1 1 8.75rem;
  width: 100%;
  min-height: 8.75rem;
  pointer-events: none;
}
.ia-checkout-arrow.is-stack { display: none; }
.ia-checkout-arrow img {
  display: block;
  mix-blend-mode: multiply;
}
.ia-checkout-arrow.is-wide {
  margin-top: -0.65rem;
  z-index: 0;
}
.ia-checkout-arrow.is-wide img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: auto;
  height: 100%;
  min-height: 7.75rem;
  max-width: 11.5rem;
  object-fit: contain;
  object-position: left bottom;
  transform: translateX(-14%);
  transform-origin: 11% 100%;
}
.ia-checkout-box {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 1.05rem;
  box-sizing: border-box;
  border: 2px solid #d21f1f;
  border-radius: 16px;
  padding: 0.5rem 0.45rem;
}
.ia-checkout-box .ia-page { grid-area: auto; }
.ia-checkout-box .ia-page.is-select::before {
  width: calc(1.05rem + 0.45rem + 2px);
}
@media (max-width: 1100px) {
  .ia-board {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "home ."
      "mem list"
      ". select"
      ". verify"
      ". ship"
      ". sum"
      ". done";
    gap: 1.35rem 1.15rem;
    align-items: end;
  }
  .ia-page.is-home::after { height: 1.35rem; }
  .ia-page.is-list::before { display: none; }
  .ia-page.is-select::before,
  .ia-page.is-verify::before,
  .ia-page.is-ship::before,
  .ia-page.is-sum::before,
  .ia-page.is-done::before {
    right: auto;
    bottom: auto;
    left: 50%;
    top: -1.35rem;
    width: 2px;
    height: 1.35rem;
    transform: translateX(-50%);
  }
  .ia-slots span.is-path::after { width: calc(0.7rem + 1.15rem); }
  .ia-slots span.is-path::before { left: calc(100% + 0.7rem + 1.15rem - 8px); }
  .ia-checkout { display: contents; }
  .ia-checkout-callout {
    grid-column: 1;
    grid-row: 3 / 7;
    align-self: stretch;
    justify-self: stretch;
    align-items: flex-start;
    position: relative;
    width: auto;
    margin: 0.35rem 0 0 0.1rem;
    z-index: 2;
    justify-content: flex-end;
  }
  .case .ia-checkout-note {
    order: 2;
    position: relative;
    z-index: 1;
    align-self: flex-start;
    max-width: 100%;
    margin: 0.15rem 0 0 0.35rem;
    font-size: 1.8rem;
    text-align: left;
    transform: rotate(-1.5deg);
    transform-origin: left top;
  }
  .ia-checkout-arrow.is-wide { display: none; }
  .ia-checkout-arrow.is-stack {
    order: 1;
    position: absolute;
    top: 0;
    right: auto;
    bottom: 5.75rem;
    left: 0;
    display: block;
    width: calc(100% + 1.15rem);
    min-height: 0;
    margin: 0;
  }
  .ia-checkout-arrow.is-stack img {
    position: absolute;
    right: 0;
    bottom: 0.15rem;
    width: 6.15rem;
    height: auto;
    transform: rotate(180deg);
    transform-origin: 50% 50%;
  }
  .case .ia-checkout-box {
    grid-column: 2;
    grid-row: 3 / 7;
    align-self: stretch;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.35rem 0;
  }
  .ia-checkout-box .ia-page.is-select::before {
    width: 2px;
    height: calc(1.35rem + 0.5rem + 2px);
    top: calc(-1.35rem - 0.5rem - 2px);
  }
  .ia-page.is-done::before {
    height: calc(1.35rem + 0.5rem + 2px);
    top: calc(-1.35rem - 0.5rem - 2px);
  }
}
.jx-map {
  width: 100%;
  margin-top: var(--block-gap);
  overflow-x: auto;
  border: 1px solid #2a2a2a;
  border-radius: 20px;
  background: #161616;
  text-align: left;
  color: #e8e8e8;
}
.jx-stages,
.jx-copy {
  display: grid;
  grid-template-columns: 7.6rem repeat(5, minmax(0, 1fr));
  min-width: 860px;
}
.jx-corner,
.jx-label {
  display: flex;
  align-items: center;
  padding: 0.85rem 0.9rem;
  color: #cfcfcf;
  font-size: 0.92rem;
  font-weight: 500;
  border-right: 1px solid #2a2a2a;
}
.jx-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 0.6rem 0.7rem;
  border-right: 1px solid #2a2a2a;
}
.jx-stage:last-child,
.jx-copy ul:last-child { border-right: 0; }
.jx-stage strong {
  font-size: 0.92rem;
  font-weight: 500;
  text-align: center;
}
.jx-bar {
  display: block;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: #6b6b6b;
}
.jx-bar.is-purple { background: #c084fc; }
.jx-bar.is-gray { background: #8d8d8d; }
.jx-bar.is-teal { background: #2dd4bf; }
.jx-bar.is-blue { background: #38bdf8; }
.jx-bar.is-silver { background: #9aa0a6; }
.jx-plot {
  display: grid;
  grid-template-columns: 7.6rem minmax(0, 1fr);
  min-width: 860px;
  min-height: 230px;
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #2a2a2a;
}
.jx-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.15rem 0.9rem 1.2rem;
  border-right: 1px solid #2a2a2a;
  color: #cfcfcf;
  font-size: 0.92rem;
  font-weight: 500;
}
.jx-graph {
  position: relative;
  min-height: 230px;
}
.jx-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.jx-line line {
  stroke: #3a3a3a;
  stroke-width: 1;
  stroke-dasharray: 4 6;
  vector-effect: non-scaling-stroke;
}
.jx-face {
  position: absolute;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.jx-face svg { display: block; width: 100%; height: 100%; }
.jx-copy {
  border-top: 1px solid #2a2a2a;
}
.jx-copy ul {
  margin: 0;
  padding: 0.85rem 0.85rem 1rem 1.35rem;
  border-right: 1px solid #2a2a2a;
  color: #d8d8d8;
  font-size: 0.82rem;
  line-height: 1.45;
}
.case .jx-copy ul { max-width: none; text-align: left; }
.jx-copy li + li { margin-top: 0.35rem; }
.gift-mock .card-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: min(50vh, 500px);
  min-height: 340px;
  width: 100%;
  margin: 0;
  padding: 0 1.4rem;
  overflow: visible;
  background: transparent;
  border-radius: 0;
}
.gift-os .gift-os-tabs {
  margin: 0 0 var(--block-gap);
}
.gift-os .gift-os-tabs button {
  min-width: 7.5rem;
  background: #1c1c1c;
  color: #fff;
  border-color: #2a2a2a;
}
.gift-os .gift-os-tabs button[aria-selected="true"] {
  background: var(--yellow);
  color: #111;
  border-color: var(--yellow);
}
.gift-os .method-panel {
  margin-top: 0;
}
.gift-hero-devices {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  width: 100%;
  height: 100%;
  overflow: visible;
}
.gift-mock .gc-phone {
  grid-area: auto;
  flex: none;
  width: auto;
  max-width: none;
  animation: none;
  opacity: 1;
  margin: 0 6px;
  background:
    linear-gradient(180deg, #5c5c62 0%, #3a3a40 14%, #2c2c30 100%);
  box-shadow:
    0 28px 54px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.gift-mock .gc-phone::before,
.gift-mock .gc-phone::after { display: none; }
.gift-mock .gc-ios,
.gift-mock .gc-and {
  animation: none;
}
.gift-mock .gc-ios {
  padding: 9px 8px 8px;
  border-radius: 12% / 5.5%;
}
.gift-mock .gc-ios .gc-screen {
  border-radius: 9.8% / 4.5%;
}
.gift-mock .gc-ios .gc-ui { padding-top: 0; }
.gift-mock .gc-ios .gc-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48% minmax(0, 1fr);
  align-items: center;
  height: 4.4%;
  margin: 0;
  padding: 0 4.2% 0 6%;
  font-size: 0.68em;
}
.gift-mock .gc-ios .gc-status > span:first-child { justify-self: start; }
.gift-mock .gc-ios .gc-sigs {
  grid-column: 3;
  justify-self: end;
}
.gift-mock .gc-ios .gc-notch {
  top: 0;
  width: 48%;
  height: 3.7%;
  border-radius: 0 0 1.1em 1.1em;
}
.gift-mock .gc-screen { container-type: size; }
.gift-mock .gc-logo { display: none; }
.gift-mock .gc-hard {
  position: absolute;
  z-index: 3;
  background: #4a4a4e;
  pointer-events: none;
}
.gift-mock .gc-hard-action {
  left: -3px;
  top: 14.5%;
  width: 3px;
  height: 3.6%;
  border-radius: 2px 0 0 2px;
}
.gift-mock .gc-hard-vol {
  left: -3px;
  top: 20%;
  width: 3px;
  height: 11%;
  border-radius: 2px 0 0 2px;
}
.gift-mock .gc-hard-power {
  right: -3px;
  top: 22%;
  width: 3px;
  height: 8%;
  border-radius: 0 2px 2px 0;
}
.gift-mock .gift-ios-max { height: 96%; aspect-ratio: 428 / 926; }
.gift-mock .gift-ios-pro { height: 86%; aspect-ratio: 390 / 844; }
.gift-mock .gift-and-ultra {
  height: 96%;
  aspect-ratio: 9 / 18.1;
  padding: 9px 7px 10px;
  border-radius: 8% / 3.6%;
  background:
    linear-gradient(180deg, #4a4a50 0%, #242428 22%, #161618 100%);
}
.gift-mock .gift-and-plus {
  height: 86%;
  aspect-ratio: 9 / 18.2;
  padding: 9px 7px 10px;
  border-radius: 8% / 3.6%;
  background:
    linear-gradient(180deg, #4a4a50 0%, #242428 22%, #161618 100%);
}
.gift-mock .gc-and .gc-hard-vol {
  top: 16%;
  height: 12%;
}
.gift-mock .gc-and .gc-hard-power {
  top: 18%;
  height: 6.5%;
}
.gift-mock .gift-and-ultra .gc-screen,
.gift-mock .gift-and-plus .gc-screen { border-radius: 6.2% / 2.8%; }
.gift-mock .gift-and-ultra .gc-ui,
.gift-mock .gift-and-plus .gc-ui {
  padding-top: 0;
  padding-bottom: 8%;
  font-size: 3.05cqh;
}
.gift-mock .gc-and .gc-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14% minmax(0, 1fr);
  align-items: center;
  height: 4.2%;
  margin: 0;
  padding: 0 3.6% 0 4.6%;
  font-size: 0.7em;
}
.gift-mock .gc-and .gc-status > span:first-child { justify-self: start; }
.gift-mock .gc-and .gc-sigs {
  grid-column: 3;
  justify-self: end;
}
.gift-mock .gc-hole {
  top: 1.05%;
  width: 2.15cqh;
  height: 2.15cqh;
}
@media (max-width: 800px) {
  .gift-mock .card-stage {
    height: auto;
    min-height: 0;
    padding: 0.4rem 0.8rem 0.2rem;
  }
  .gift-hero-devices {
    display: flex;
    gap: 1rem;
    height: auto;
  }
  .gift-mock .gc-phone {
    height: min(52vh, 420px);
  }
  .case-gift #gift-comp-boa .gift-mock .gc-phone {
    height: min(72vh, 540px);
  }
}
.study-card .card-stage.card-lines {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #111;
  padding: 0;
}
.card-lines-photo {
  position: absolute;
  left: 0;
  top: auto;
  bottom: 0;
  width: 100%;
  height: 132%;
  object-fit: cover;
  object-position: center bottom;
  transform: translateY(24%);
  transition: transform 1.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.card-stage.card-lines.is-risen .card-lines-photo { transform: translateY(12%); }
.card-lines-copy {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 0.7rem 2.4rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.42) 62%, rgba(0, 0, 0, 0) 100%);
}
.card-lines-logo {
  display: block;
  height: clamp(52px, 8vh, 72px);
  width: auto;
  max-width: min(460px, 78%);
  margin: 0;
  object-fit: contain;
}
.card-lines-board {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.42rem;
  width: 100%;
  color: #f3f3f3;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
.card-lines-kicker,
.card-lines-services,
.card-lines-board span { margin: 0; }
.card-lines-kicker {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 1.25em;
}
.card-lines-kicker span { grid-area: 1 / 1; }
.card-lines-kicker .is-now {
  opacity: 0;
  color: #fff;
  text-shadow: 0 0 12px #fff;
}
.card-lines-board.is-split .is-after {
  opacity: 0;
  transition: opacity 0.28s ease;
}
.card-lines-board.is-split .is-now {
  opacity: 1;
  animation: lines-appear 0.45s ease both;
}
.card-lines-services {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  width: 100%;
}
.card-lines-board .is-parts,
.card-lines-board .is-cover,
.card-lines-board .is-connect {
  font-size: clamp(1.35rem, 2.5vw, 2.05rem);
}
.card-lines-board .is-cover,
.card-lines-board .is-connect {
  position: absolute;
  opacity: 0;
}
.card-lines-board.is-split .card-lines-services {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  column-gap: 0.6rem;
}
.card-lines-board.is-split .card-lines-services span {
  min-width: 0;
  text-align: center;
}
.card-lines-board.is-split .is-cover,
.card-lines-board.is-split .is-connect {
  position: static;
  opacity: 1;
  animation: lines-arrive 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.62s both;
}
.card-lines-board.is-split .is-connect { animation-delay: 0.78s; }
@keyframes lines-appear {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes lines-arrive {
  from { opacity: 0; transform: translateX(1.4rem); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card-lines-board.is-split .is-now,
  .card-lines-board.is-split .is-cover,
  .card-lines-board.is-split .is-connect {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .card-lines-board.is-split .is-after { display: none; }
  .card-lines-photo { transform: none; transition: none; }
}
.card-poster .card-caption {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem;
}
.card-poster h3 { margin-bottom: 0.7rem; }
.card-poster .card-meta { margin-bottom: 0; }
.card-poster .btn { flex: none; }
.project.beat.card-poster {
  align-items: center;
  justify-content: center;
}
.project.beat.study-card.card-poster .panel {
  width: 92%;
  height: 90%;
  margin-inline: auto;
}
.case-amex .linkedin,
.case-amex .menu-btn,
.nav:has(.case-close) .linkedin,
.nav:has(.case-close) .menu-btn { display: none; }
.case-close {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #1c1c1c;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.case-close:hover { background: #2a2a2a; }
.case-hero.wrap {
  width: min(1400px, calc(100% - 2.5rem));
  margin: 5rem auto var(--section-space);
  background: transparent;
}
.case-hero.wrap.gift-hero {
  margin-top: 1.5rem;
  margin-bottom: 0;
}
.case-hero-dtna {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: calc(100svh - 5rem);
  margin: 5rem 0 0;
  padding: 0 0 2.5rem;
  background: transparent;
}
.case-hero-dtna .hero-lead {
  margin-bottom: var(--text-gap);
}
.case-hero-dtna .hero-lead h1 img {
  mix-blend-mode: lighten;
}
.case-hero-dtna .panel {
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  align-items: center;
  justify-content: center;
}
.case-hero-dtna .card-stage {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-hero.case-hero-dtna .devices {
  display: block;
  width: min(560px, 86vw);
  max-width: 560px;
  height: auto;
  margin-inline: auto;
  border-radius: 0;
}
.case-hero .panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  text-align: left;
}
.expand-flight .panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  text-align: left;
}
.case-hero .card-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.case-hero.gift-hero .card-stage {
  height: min(50vh, 500px);
  min-height: 340px;
  width: 100%;
  align-items: flex-end;
  overflow: visible;
  padding: 0 1.4rem;
}
.expand-flight .card-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  height: auto;
  margin-bottom: 1rem;
  padding: 0.8rem;
  border-radius: 18px;
  background: #111;
}
.expand-flight.is-returning .panel,
.expand-flight.is-returning .card-stage {
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.case-hero .devices,
.expand-flight .devices {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  border-radius: 8px;
  object-fit: contain;
}
.case-hero .devices {
  height: auto;
  max-height: none;
}
.case-hero .card-caption,
.expand-flight .card-caption {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem;
}
.case-hero .card-copy,
.expand-flight .card-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.case-hero h1,
.expand-flight h1,
.expand-flight h3 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-align: left;
}
.case-hero .hero-lead {
  margin: 0 auto 0.75rem;
  text-align: center;
}
.case-ohio .hero-lead {
  margin-bottom: var(--section-space);
}
.case-hero .hero-lead h1 {
  margin: 0;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-align: center;
}
.case-hero .hero-lead h1 img {
  display: block;
  width: min(360px, 70%);
  height: auto;
  margin: 0 auto;
}
.case-hero .hero-lead p {
  margin: 0.5rem auto 0;
  max-width: none;
  font-size: 1.125rem;
  line-height: 1.35;
  text-align: center;
}
.case-hero:has(.hero-u) .hero-lead { margin-bottom: var(--section-space); }
.hero-u {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, 1fr);
  align-items: stretch;
  column-gap: 1.1rem;
  width: 100%;
}
.hero-u-arm,
.hero-u-center {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
}
.hero-u-arm { padding-bottom: 2.4rem; }
.hero-u-center {
  justify-content: flex-end;
  padding-top: 1rem;
}
.hero-u figure {
  margin: 0;
  min-width: 0;
  width: 100%;
}
.hero-u-frame {
  overflow: hidden;
  border-radius: 10px;
  background: #111;
  border: 1px solid #2a2a2a;
  aspect-ratio: 16 / 10.4;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.hero-u-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.hero-u figcaption {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-align: center;
}
.hero-u-arm figcaption { margin-top: auto; padding-top: 0.45rem; }
@media (max-width: 800px) {
  .hero-u {
    column-gap: 0.45rem;
  }
  .hero-u figcaption { font-size: 0.78rem; }
}
.case-hero p,
.expand-flight p { max-width: none; }
.case-hero .btn.is-spacer {
  visibility: hidden;
  pointer-events: none;
}
.case-overlay,
.amex-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: auto;
  scroll-behavior: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #000;
}
.case-overlay.is-preparing,
.amex-overlay.is-preparing {
  visibility: hidden;
  pointer-events: none;
}
.case-overlay:has(.rail) .wrap,
.amex-overlay:has(.rail) .wrap {
  width: min(1400px, calc(100% - 8.5rem));
}
.case-overlay:has(.rail) .case-hero-dtna > .panel,
.amex-overlay:has(.rail) .case-hero-dtna > .panel,
body:has(.rail) .case-hero-dtna > .panel {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.expand-scrim {
  position: fixed;
  inset: 0;
  z-index: 38;
  background: #000;
  pointer-events: none;
}
.expand-grey {
  position: fixed;
  z-index: 40;
  background: #3a3a3a;
  border-radius: 28px;
  transform-origin: center center;
  pointer-events: none;
}
.expand-flight {
  position: fixed;
  z-index: 41;
  margin: 0;
  overflow: hidden;
  background: transparent;
  border-radius: 0;
  pointer-events: none;
}
.expand-flight .panel { background: transparent; }
.expand-flight.is-opening .btn { animation: amex-btn-out 0.4s ease forwards; }
@keyframes amex-btn-out { to { opacity: 0; } }
.card-type.project.beat h3 {
  font-size: clamp(1.7rem, 3vw, 2.6rem);
}
.card-type .card-foot {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: 0.4rem;
}
.card-type .btn { align-self: flex-end; }

.carousel { position: relative; }
.slides { display: grid; }
.slide {
  grid-area: 1 / 1;
  display: none;
  background: #2a2a2a;
  border-radius: 28px;
  min-height: 280px;
  overflow: hidden;
}
.slide.active { display: grid; grid-template-columns: 0.9fr 1.1fr; }
.slide img.portrait { width: 100%; height: 100%; object-fit: cover; min-height: 280px; }
.slide .words { padding: 1.6rem 1.5rem 1.3rem; }
.slide p { margin: 0 0 1rem; font-size: 1.15rem; }
.slide .who { color: #eee; font-size: 0.98rem; }
.dots { display: flex; justify-content: center; gap: 0.45rem; margin-top: 0.9rem; }
.dots button {
  width: 8px; height: 8px; border-radius: 99px; border: 0; background: #555; padding: 0; cursor: pointer;
}
.dots button[aria-current="true"] { background: #fff; }
.talk-page .talk {
  padding: 2.4rem 0 4rem;
}
.talk-page h1 {
  margin: 0 auto;
  max-width: 18ch;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-align: center;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.talk-filters {
  margin: var(--block-gap) auto 0;
}
.talk-grid {
  columns: 3;
  column-gap: 1.15rem;
  margin-top: 2.8rem;
}
.talk-card {
  display: inline-flex;
  flex-direction: column;
  gap: 1.35rem;
  width: 100%;
  margin: 0 0 1.15rem;
  break-inside: avoid;
  padding: 1.4rem 1.35rem 1.2rem;
  background: #fff;
  color: #1c1c1c;
  border-radius: 22px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
}
.talk-card[hidden] { display: none; }
.talk-card p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.talk-person {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.talk-person img {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: #eceaf2;
}
.talk-person strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.25;
}
.talk-person span {
  display: block;
  margin-top: 0.12rem;
  color: #8a8a8a;
  font-size: 0.8rem;
  line-height: 1.3;
}
.talk-grid.is-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: 1.15rem;
  max-width: 52rem;
  margin-inline: auto;
}
.talk-grid.is-pair .talk-card,
.talk-grid.is-solo .talk-card {
  height: auto;
  align-self: start;
  margin-bottom: 0;
}
.talk-grid.is-solo {
  display: grid;
  grid-template-columns: minmax(0, 26rem);
  align-items: start;
  justify-content: center;
  max-width: none;
}
.talk-card.is-end-bounce,
.project.is-end-bounce .panel {
  animation: end-bounce 0.72s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes end-bounce {
  0% { transform: translateY(0); }
  42% { transform: translateY(-18px); }
  100% { transform: translateY(0); }
}
.project.is-end-bounce .panel { --tilt: 0deg; }
@media (prefers-reduced-motion: reduce) {
  .talk-card.is-end-bounce,
  .project.is-end-bounce .panel { animation: none; }
}
.arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 99px;
  border: 1px solid #fff;
  background: #fff;
  color: #111;
  cursor: pointer;
}
.arrow.prev { left: 8px; }
.arrow.next { right: 8px; }

.footer { padding: 4rem 0 2rem; }
.wordmark {
  font-size: clamp(4.5rem, 14vw, 9rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.9;
  margin: 0;
}
.footer-row {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 3rem;
  align-items: end;
}
.footer nav { text-align: right; }
.footer nav p { margin: 0 0 0.4rem; letter-spacing: 0.08em; font-size: 0.78rem; color: var(--muted); }
.footer nav a { display: block; text-decoration: none; margin: 0.25rem 0; }

.case { padding-bottom: 4rem; }
.case h1 {
  text-align: center;
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 2.2rem 0 16px;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.dek {
  text-align: center;
  color: #eee;
  margin: 0 0 1.4rem;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case h2 {
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: var(--section-space) 0 0;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case > h2 + h3 { margin-top: var(--text-gap); }
.case h3 {
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 1.5rem 0 0;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case > h3 { margin-top: var(--section-space); }
.case > h3 + h3 { margin-top: 2rem; }
.case > h2 + p,
.case > h3 + p,
.case > h3 + ul,
.case > p,
.case > ul,
.case > ul li {
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case h2 + p,
.case h3 + p,
.case h3 + ul { margin-top: var(--text-gap); }
.case .agent-card h3 { margin: 0 0 var(--text-gap); font-weight: 500; }
.case .agent-card h3 + p { margin-top: 0; }
.case p, .case li { max-width: 68ch; color: var(--copy); }
.case-hero .hero-lead p { color: var(--copy); }
.case .friction-label,
.case .quote-grid .who { color: var(--yellow); }
.case .fact p { color: #161616; }
.case .figure { margin: 1rem 0 1.2rem; }
.case .figure img {
  border-radius: 22px;
  width: 100%;
  background: #111;
  cursor: zoom-in;
}
body:has(.case-ohio) .case .figure img,
body:has(.case-ohio) .methods img {
  background: transparent;
}
.zoom-shot {
  width: 100vw;
  height: 100svh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 1.1rem 1.6rem;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.zoom-shot::backdrop { background: rgba(0, 0, 0, 0.82); }
.zoom-shot[open] {
  display: grid;
  place-items: center;
}
.zoom-frame {
  position: relative;
  display: flex;
  max-width: min(1400px, 100%);
  max-height: calc(100svh - 2.2rem);
}
.zoom-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  box-shadow: none;
  border-radius: 999px;
  background: #1c1c1c;
  color: #fff;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}
.zoom-close:focus,
.zoom-close:focus-visible { outline: none; }
.zoom-close:hover { background: #2a2a2a; }
.zoom-shot img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(1400px, 100%);
  max-height: calc(100svh - 2.2rem);
  object-fit: contain;
  border-radius: 22px;
}
.case-split {
  display: grid;
  grid-template-columns: minmax(18rem, 32rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 4.5rem);
  row-gap: var(--block-gap);
  align-items: start;
  margin-top: var(--section-space);
}
.case-split.identify-lead {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  row-gap: var(--text-gap);
  text-align: center;
  margin-top: calc(var(--section-space) * 2);
  margin-bottom: calc(var(--section-space) * 2);
}
.case-split.identify-lead + .case-split {
  margin-top: 0;
}
.case-split.identify-lead > h3 {
  grid-column: 1;
  width: auto;
  max-width: 100%;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case .case-split.identify-lead > p {
  grid-column: 1;
  width: min(58rem, 100%);
  max-width: 100%;
  margin-top: 0;
}
.case-split h3 {
  grid-column: 1;
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.case .case-split > p,
.case .case-split > ul,
.case .case-split > ol {
  grid-column: 2;
  margin: 0;
  max-width: none;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case .case-split > ul li,
.case .case-split > ol li {
  margin: 0 0 20px;
  max-width: none;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case .case-split > ul li:last-child,
.case .case-split > ol li:last-child { margin-bottom: 0; }
.case-split .quote-grid {
  grid-column: 1 / -1;
}
.case-split-copy {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: var(--text-gap);
}
.case .case-split-copy p {
  margin: 0;
  max-width: none;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case-split-copy h4,
.observe h4 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.observe {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 2rem;
}
.observe ul {
  list-style: none;
  margin: var(--text-gap) 0 0;
  padding: 0;
}
.observe li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  column-gap: 0.5rem;
  align-items: start;
  margin: 0 0 24px;
  max-width: none;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.observe li:last-child { margin-bottom: 0; }
.observe li::before {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.2em;
  padding-top: 3px;
  font-weight: 500;
  line-height: 1;
}
.observe-yes li::before {
  content: "✓";
  color: #3dd68c;
}
.observe-no li::before {
  content: "✕";
  color: #ff5c5c;
}
.case-split .figure {
  grid-column: 1 / -1;
  justify-self: center;
  width: 70%;
  margin: 0;
}
.arch-lead {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--text-gap);
}
.arch-lead .method-tabs {
  justify-content: flex-start;
}
.arch-board .method-tabs button {
  min-width: 8.5rem;
}
.user-voices .method-tabs button {
  min-width: 10.5rem;
}
.user-voices .quote-people {
  margin: 0;
}
#user-expectations + .user-voices {
  margin-top: var(--block-gap);
}
.observe.takeaway-list {
  grid-template-columns: 1fr;
}
.takeaway-list li {
  grid-template-columns: minmax(0, 1fr);
}
.takeaway-list li::before { content: none; }
.takeaway-list strong {
  display: block;
  margin: 0 0 0.4rem;
  color: var(--yellow);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.25;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case .takeaway-list p {
  margin: 0;
  max-width: none;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case-split.arch-board > .method-panel {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
}
.case .arch-lead .ia-kicker {
  margin: 0;
  text-align: left;
}
.ia-flow {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.case .ia-kicker {
  margin: 0;
  max-width: none;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: center;
}
.flow-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.case .flow-chart > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.case .flow-chart > li + li {
  padding-top: 3.1rem;
}
.case .flow-chart > li + li::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.35rem;
  width: 2px;
  height: 1.1rem;
  background: #3a3a3a;
  transform: translateX(-50%);
}
.case .flow-chart > li + li::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1.25rem;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--yellow);
  border-bottom: 2px solid var(--yellow);
  transform: translateX(-50%) rotate(45deg);
}
.case .flow-label,
.case .flow-note {
  margin: 0 0 0.85rem;
  max-width: none;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.35;
  text-align: center;
}
.case .flow-note {
  margin: 0.65rem 0 0;
  font-size: 0.85rem;
}
.case .flow-heading {
  margin: 0 0 0.75rem;
  max-width: none;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.flow-node {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 3rem;
  padding: 0.7rem 1.05rem;
  background: #161616;
  border: 1px solid #333;
  border-radius: 14px;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.3;
  text-align: center;
}
.flow-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.14rem 0.42rem;
  background: var(--yellow);
  color: #111;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}
.flow-node > .flow-tag {
  position: absolute;
  top: -0.42rem;
  right: 0.55rem;
}
.flow-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.flow-node.is-start {
  background: #148c3a;
  border-color: #148c3a;
  color: #fff;
  font-weight: 500;
  min-width: min(22rem, 100%);
}
.flow-node.is-small {
  min-height: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.88rem;
  background: #1c1c1c;
}
.flow-nodes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 0.7rem;
  width: min(52rem, 100%);
}
.flow-nodes.is-path {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: auto;
  gap: 0.55rem;
}
.flow-nodes.is-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.flow-then {
  color: var(--yellow);
  font-size: 1.2rem;
  line-height: 1;
}
.flow-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1.4rem;
  width: min(52rem, 100%);
}
.flow-split.is-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}
.flow-split.is-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}
.flow-lobs-close {
  grid-column: 2 / -1;
  position: relative;
  padding-top: 3.1rem;
}
.flow-lobs-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.35rem;
  width: 2px;
  height: 1.1rem;
  background: #3a3a3a;
  transform: translateX(-50%);
}
.flow-lobs-close::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1.25rem;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--yellow);
  border-bottom: 2px solid var(--yellow);
  transform: translateX(-50%) rotate(45deg);
}
.flow-lobs-close .flow-chart,
.flow-lobs-close .flow-node {
  width: 100%;
}
.flow-split.is-dealer > .flow-ops-label {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0.15rem;
}
.flow-split.is-dealer > .flow-lobs-label {
  grid-column: 2 / -1;
  grid-row: 1;
  margin-bottom: 0.15rem;
}
.flow-split.is-dealer > .flow-ops {
  grid-column: 1;
  grid-row: 2;
}
.flow-heading-spacer {
  visibility: hidden;
  pointer-events: none;
}
.flow-split.is-dealer > .flow-lob:nth-of-type(2) {
  grid-column: 2;
  grid-row: 2;
}
.flow-split.is-dealer > .flow-lob:nth-of-type(3) {
  grid-column: 3;
  grid-row: 2;
}
.flow-split.is-dealer > .flow-lob:nth-of-type(4) {
  grid-column: 4;
  grid-row: 2;
}
.flow-split.is-dealer > .flow-lobs-close {
  grid-column: 2 / 4;
  grid-row: 3;
}
.flow-split.is-three > .flow-lobs-close {
  grid-column: 1 / 3;
}
.flow-lane .flow-chart,
.flow-lane .flow-node {
  width: 100%;
}
.flow-lane {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}
.flow-lane .flow-nodes {
  width: 100%;
  grid-template-columns: 1fr;
}
.flow-fold {
  position: relative;
  min-width: 0;
  background: #161616;
  border: 1px solid #333;
  border-radius: 14px;
  color: #fff;
}
.flow-fold > summary > .flow-tag {
  position: absolute;
  top: -0.42rem;
  right: 0.55rem;
}
.flow-fold > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.7rem 1.05rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.95rem;
  line-height: 1.3;
  text-align: center;
}
.flow-fold > summary::-webkit-details-marker { display: none; }
.flow-fold > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid #8a8a8a;
  border-bottom: 1.5px solid #8a8a8a;
  transform: rotate(45deg);
  flex-shrink: 0;
}
.flow-fold[open] > summary::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}
.flow-fold[open] {
  border-color: #444;
}
.case .flow-fold-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0 0.85rem 0.85rem;
  list-style: none;
}
.case .flow-fold-list li {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 0.5rem 0.7rem;
  background: #1c1c1c;
  border-radius: 10px;
  color: var(--copy);
  font-size: 0.85rem;
  line-height: 1.35;
  text-align: center;
}
.case .flow-fold-list li.is-new {
  padding-top: 0.75rem;
}
.flow-fold-list li > .flow-tag {
  position: absolute;
  top: -0.35rem;
  right: 0.4rem;
}
.case .flow-fold-list li > ul {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}
.case .flow-fold-list li > ul > li {
  background: #111;
  font-size: 0.8rem;
  padding: 0.4rem 0.55rem;
}
.case .flow-fold-copy {
  margin: 0;
  padding: 0 0.95rem 0.95rem;
  max-width: none;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
}
.methods {
  grid-column: 1 / -1;
}
.methods.is-side {
  grid-column: 2;
}
.methods.is-side .method-tabs {
  justify-content: flex-start;
}
.methods.is-side .method-panel { margin-top: var(--block-gap); }
.methods.is-side .method-frame {
  width: 100%;
  margin-inline: 0;
}
.case .methods.is-side .method-panel > p {
  margin: var(--text-gap) 0 0;
  max-width: none;
  text-align: left;
}
.case-split:has(.sticky-board) {
  position: relative;
}
.case-split:has(.sticky-board) > h3 {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.sticky-board {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  padding: 0;
  background: none;
  border: 0;
  overflow: visible;
}
.sticky {
  position: relative;
  margin: 0;
  padding: 1.15rem 1.2rem 1.3rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 32%),
    var(--note, var(--yellow));
  color: #161616;
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.32) inset,
    0 10px 22px rgba(0, 0, 0, 0.38);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transform: rotate(var(--tilt, -1.2deg));
  transform-origin: center center;
}
.sticky:nth-of-type(1) { --note: #ffe56a; --tilt: 1.6deg; }
.sticky:nth-of-type(2) { --note: #ffd233; --tilt: -2.1deg; }
.sticky:nth-of-type(3) { --note: #f4c84a; --tilt: 2deg; }
.sticky:nth-of-type(4) { --note: #ffe27a; --tilt: -1.4deg; }
.sticky:nth-of-type(5) { --note: #ffd84a; --tilt: 1.1deg; }
.sticky:nth-of-type(6) { --note: #ffe08a; --tilt: -1.8deg; }
.sticky-board .sticky { position: absolute; }
.sticky.is-dragging {
  cursor: grabbing;
  transform: rotate(var(--tilt, 0deg)) scale(1.04);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 22px 40px rgba(0, 0, 0, 0.5);
}
.sticky:focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
}
.case .sticky,
.case .sticky p {
  color: #161616;
  max-width: none;
}
.case .sticky p {
  margin: 0;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.frame-problem {
  margin-top: var(--section-space);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.25rem);
  background: #fff;
  color: #161616;
  border-radius: 22px;
}
.challenge-lead {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  min-height: 100%;
}
.challenge-truck {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  width: min(10.5rem, 100%);
  margin: auto 0 0;
  overflow: visible;
}
.challenge-truck img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left bottom;
}
.case .frame-problem h3 {
  margin: 0;
  max-width: none;
  color: #161616;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.case .frame-problem p {
  color: #161616;
}
.case .frame-mark {
  padding: 0.05em 0.14em;
  margin: 0 -0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-position: left 58%;
  background-size: 0% 0.78em;
  transition: background-size 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.case .is-lit .frame-mark,
.case .frame-mark.is-lit {
  background-size: 100% 0.78em;
}
.case .frame-problem .frame-point {
  margin: var(--text-gap) 0 0;
  max-width: 18em;
  color: #161616;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case .frame-problem .frame-why {
  margin: 24px 0 0;
  max-width: 46ch;
  color: #161616;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.5;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case .ux-challenge {
  margin: 0;
  padding: calc(var(--section-space) * 1.5) 0;
}
.case .ux-challenge > p {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  max-width: none;
  font-size: 1.35rem;
  line-height: 1.5;
  text-align: center;
}
.case .ux-challenge > p span {
  white-space: nowrap;
}
.case .ux-challenge + .case-split {
  margin-top: 0;
}
.together {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: calc(var(--section-space) * 2);
}
.together > .design-phase {
  margin-top: 0;
  margin-bottom: var(--block-gap);
}
.together > .design-phase h2 {
  position: relative;
  z-index: 1;
  padding-bottom: 0.5rem;
}
.shot-flow {
  width: min(86rem, 100%);
  margin: 0 auto;
  min-width: 0;
}
.shot-card {
  margin: 0;
  width: 100%;
  overflow: hidden;
  background: #161616;
  border: 1px solid #333;
  border-radius: 12px;
}
.shot-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: top center;
  background: #111;
}
.shot-wide img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
  object-position: top center;
}
.shot-modal img {
  object-position: left center;
}
.shot-card figcaption {
  margin: 0;
  padding: 0.45rem 0.55rem 0.55rem;
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.3;
  text-align: center;
}
.shot-split {
  --shot-gap: 1.85rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--shot-gap);
  row-gap: 0;
  width: 100%;
  overflow: visible;
}
.shot-split.is-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.shot-arrow {
  position: relative;
  padding-top: 5.75rem;
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.shot-arrow > .shot-card {
  width: 100%;
}
.shot-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.5rem;
  width: 3px;
  height: 3.15rem;
  background: var(--yellow);
  transform: translateX(-50%);
}
.shot-arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 3.35rem;
  width: 12px;
  height: 12px;
  border-right: 3px solid var(--yellow);
  border-bottom: 3px solid var(--yellow);
  transform: translateX(-50%) rotate(45deg);
}
.shot-shared-cart {
  grid-column: 1 / 3;
  grid-row: 2;
}
.shot-join {
  position: absolute;
  left: calc(25% - var(--shot-gap) / 4);
  right: calc(25% - var(--shot-gap) / 4);
  top: 0.5rem;
  height: 1.25rem;
  border: 3px solid var(--yellow);
  border-top: 0;
  box-sizing: border-box;
  pointer-events: none;
}
.shot-shared-cart::after {
  top: 1.7rem;
  height: 1.95rem;
}
.shot-quote {
  grid-column: 3;
  grid-row: 2;
}
.shot-confirm {
  grid-column: 1 / 3;
  grid-row: 3;
}
.shot-flow .flow-chart > li + li {
  padding-top: 5.75rem;
}
.shot-flow .flow-chart > li + li::after {
  top: 0.5rem;
  width: 3px;
  height: 3.15rem;
  background: var(--yellow);
}
.shot-flow .flow-chart > li + li::before {
  top: 3.35rem;
  width: 12px;
  height: 12px;
  border-right-width: 3px;
  border-bottom-width: 3px;
}
.shot-lane {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  margin: 0;
}
.shot-lane .flow-chart,
.shot-lane .shot-card {
  width: 100%;
}
#pilot-feedback {
  margin-top: calc(var(--section-space) * 2);
  row-gap: var(--section-space);
}
#pilot-feedback > h3 {
  grid-column: 1;
  grid-row: 1;
}
#pilot-feedback > p {
  grid-column: 2;
  grid-row: 1;
}
#pilot-feedback > .pilot-shot {
  grid-column: 1;
  grid-row: 2;
}
#pilot-feedback > .case-split-copy {
  grid-column: 2;
  grid-row: 2;
}
.pilot-shot {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
}
.pilot-shot img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.feedback-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feedback-points > .is-wide {
  grid-column: 1 / -1;
}
.case-split-copy > .feedback-heading {
  grid-column: auto;
  margin-top: 0;
  color: var(--ink);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.case .feedback-points > li {
  margin: 0;
  max-width: none;
}
.case .feedback-points h4 {
  margin: 0 0 0.55rem;
  max-width: none;
  color: var(--yellow);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.feedback-points ul {
  margin: 0;
  padding: 0 0 0 1.15rem;
  list-style: disc;
}
.case .feedback-points ul li {
  margin: 0 0 0.4rem;
  max-width: none;
  padding: 0;
}
.case .feedback-points ul li:last-child {
  margin-bottom: 0;
}
.case .arch-next {
  margin: var(--section-space) 0 0;
  max-width: none;
  font-size: 1.35rem;
  line-height: 1.5;
  text-align: left;
}
#other-experiences .compare-frame {
  margin-top: var(--text-gap);
}
#other-experiences .compare-frame iframe {
  height: 640px;
}
.hmw {
  margin-top: var(--section-space);
}
.case .hmw h3 {
  margin: 0;
  max-width: none;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.hmw-stage {
  position: relative;
  margin-top: var(--text-gap);
}
.hmw-rail {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
}
.hmw-rail::-webkit-scrollbar { display: none; }
.hmw-rail.is-dragging { cursor: grabbing; }
.hmw-track {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: max-content;
  padding: 0.6rem 3rem 0.4rem 3rem;
}
.hmw-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.hmw-row:nth-child(1) { padding-left: 0.4rem; gap: 1.05rem; }
.hmw-row:nth-child(2) { padding-left: 2.6rem; gap: 1.25rem; }
.hmw-row:nth-child(3) { padding-left: 1.15rem; gap: 1.4rem; }
.hmw-card {
  flex: none;
  width: 20rem;
  margin: 0;
  padding: 1.15rem 1.2rem 1.2rem;
  background: var(--card);
  color: var(--copy);
  border-radius: 18px;
  transform: rotate(var(--tilt, 0deg));
}
.hmw-row:nth-child(1) .hmw-card:nth-child(1) { --tilt: -1.1deg; }
.hmw-row:nth-child(1) .hmw-card:nth-child(2) { --tilt: 0.8deg; }
.hmw-row:nth-child(1) .hmw-card:nth-child(3) { --tilt: -0.5deg; }
.hmw-row:nth-child(1) .hmw-card:nth-child(4) { --tilt: 1deg; }
.hmw-row:nth-child(2) .hmw-card:nth-child(1) { --tilt: 0.7deg; }
.hmw-row:nth-child(2) .hmw-card:nth-child(2) { --tilt: -0.9deg; }
.hmw-row:nth-child(2) .hmw-card:nth-child(3) { --tilt: 0.4deg; }
.hmw-row:nth-child(2) .hmw-card:nth-child(4) { --tilt: -0.6deg; }
.hmw-row:nth-child(3) .hmw-card:nth-child(1) { --tilt: -0.4deg; }
.hmw-row:nth-child(3) .hmw-card:nth-child(2) { --tilt: 1.1deg; }
.hmw-row:nth-child(3) .hmw-card:nth-child(3) { --tilt: -0.8deg; }
.case .hmw-card p {
  margin: 0;
  max-width: none;
  color: var(--copy);
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case .hmw-card .hmw-lead {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.3;
}
.case .hmw-card .hmw-lead + p {
  margin-top: 0.5rem;
  color: var(--copy);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
}
.design-phase {
  margin-top: var(--section-space);
  text-align: center;
}
.case .design-phase h2 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  max-width: none;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.design-phase-line {
  display: block;
  width: 112%;
  height: 18px;
  margin-top: 0.08em;
  overflow: visible;
}
.design-phase-line path {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.design-phase.is-drawn .design-phase-line path,
.ux-challenge.is-drawn .design-phase-line path,
h2.is-drawn .design-phase-line path,
h3.is-drawn .design-phase-line path {
  stroke-dashoffset: 0;
}
.compare-frame {
  overflow: hidden;
  border-radius: 18px;
  background: #111;
}
.case-split .compare-frame {
  grid-column: 1 / -1;
}
.compare-frame iframe {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
}
.path-lead {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--text-gap);
}
.paths .method-tabs { justify-content: flex-start; }
.path-panel { grid-column: 2; }
.path-panel[hidden] { display: none; }
.case .path-panel h4 {
  margin: 24px 0 0;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case .path-panel h4:first-child { margin-top: 0; }
.case .path-panel p,
.case .path-panel ul {
  margin: var(--text-gap) 0 0;
  max-width: none;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case .path-panel li {
  margin: 0 0 20px;
  max-width: none;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case .path-panel li:last-child { margin-bottom: 0; }
.paths .figure {
  width: 100%;
  margin-top: var(--block-gap);
}
.case-split:has(> .methods:not(.is-side)) { row-gap: 0; }
.case-split > .methods:not(.is-side) { margin-top: var(--section-space); }
.arch-board .flow-chart { align-items: stretch; }
.arch-board .flow-node.is-start,
.arch-board .flow-node.is-merge {
  width: 100%;
  min-width: 0;
}
.arch-board .flow-split,
.arch-board .flow-nodes:not(.is-path) { width: 100%; }
.method-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin: 0;
}
.method-tabs button {
  font: inherit;
  font-weight: 500;
  font-size: 1rem;
  background: #fff;
  color: #111;
  border: 1px solid #fff;
  border-radius: 999px;
  padding: 0.6rem 1.15rem;
  min-width: 10.5rem;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
.method-tabs button[aria-selected="true"] {
  background: var(--yellow);
  border-color: var(--yellow);
}
.method-panel { margin-top: var(--block-gap); }
.method-panel[hidden] { display: none; }
.friction-col {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.case .friction-col > p {
  margin: 0;
  max-width: none;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.friction-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.friction-heat {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.friction-heat .friction-box {
  border: 0;
  border-radius: 0;
}
.friction-heat .friction-box:first-child {
  border-radius: 22px 22px 0 0;
}
.friction-heat .friction-box:last-child {
  border-radius: 0 0 22px 22px;
}
.friction-heat .friction-label { color: #fff; }
.friction-heat .friction-box[data-heat="65"] { background: #c62828; }
.friction-heat .friction-box[data-heat="65"] .friction-label { font-size: 2.8rem; }
.friction-heat .friction-box[data-heat="20"] { background: #9b2c2c; }
.friction-heat .friction-box[data-heat="20"] .friction-label { font-size: 1.9rem; }
.friction-heat .friction-box[data-heat="15"] { background: #6e2828; }
.friction-heat .friction-box[data-heat="15"] .friction-label { font-size: 1.55rem; }
.friction-heat .friction-box[data-heat="5"] { background: #3e2222; }
.friction-heat .friction-box[data-heat="5"] .friction-label { font-size: 1.2rem; }
.friction-empty { min-height: 0; }
.friction-box {
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 22px;
  padding: 1.3rem 1.3rem 1.1rem;
}
.friction-label {
  margin: 0 0 16px;
  color: var(--yellow);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.2;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case .friction-box > p:not(.friction-label) {
  margin: 0;
  max-width: none;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.friction-box ul {
  margin: 16px 0 0;
  padding-left: 1.15rem;
}
.friction-box li {
  margin: 0 0 8px;
  max-width: none;
}
.friction-box li:last-child { margin-bottom: 0; }
.case .friction-box > p.impact { margin-top: 16px; }
.case .method-panel > p {
  margin: 16px auto 0;
  max-width: 68ch;
  text-align: center;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.method-panel:not(:has(img)) > p {
  margin: 16px 0 0;
  max-width: none;
  text-align: left;
}
.method-panel ul {
  margin: 16px auto 0;
  max-width: 68ch;
  padding-left: 1.15rem;
}
.method-panel:not(:has(img)) ul {
  margin-left: 0;
  max-width: none;
}
.method-panel li {
  margin: 0 0 20px;
  max-width: none;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.method-panel li:last-child { margin-bottom: 0; }
.method-frame {
  width: 70%;
  margin-inline: auto;
}
.method-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.methods img {
  display: block;
  width: 100%;
  border-radius: 22px;
}
.fact {
  background: #fff;
  color: #161616;
  border-radius: 28px;
  padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.15rem, 3vw, 1.5rem);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.6rem;
  align-items: start;
  margin: var(--section-space) 0;
}
.fact > :first-child { grid-column: span 2; }
.fact > :last-child { grid-column: span 3; }
.fact > :only-child { grid-column: 1 / -1; }
.fact img { width: 100%; border-radius: 12px; }
.fact img:first-child {
  display: block;
  width: 62%;
  max-width: 220px;
  margin-inline: auto;
}
.fact > :first-child img:last-child {
  width: 72%;
  margin-inline: auto;
}
.fact > :first-child img:only-child {
  width: 62%;
  max-width: 220px;
}
.fact h3,
.fact p {
  margin: 0;
  padding: 0;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.fact h3 { line-height: 1.2; }
.fact p { line-height: 1.5; }
.fact h3 + p { margin-top: var(--text-gap); }
.fact p + h3 { margin-top: 24px; }
.fact .cols { margin-top: 24px; }
.fact-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--block-gap) 2rem;
  margin-top: 24px;
}
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.quote-grid img {
  width: 100%;
  border-radius: 14px;
  margin-bottom: 0.7rem;
  max-height: 220px;
  object-fit: cover;
}
.quote-grid article {
  background: #1a1a1a;
  border-radius: 18px;
  padding: 1rem;
}
.quote-grid p { margin: 0; }
.quote-grid .who { display: block; margin-top: 0.7rem; color: var(--yellow); font-size: 0.95rem; }
.quote-people {
  gap: 24px;
}
.quote-people article {
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 22px;
  padding: 1.3rem;
}
.quote-person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}
.quote-people img,
.quote-person img {
  width: 52px;
  height: 52px;
  margin: 0;
  border-radius: 50%;
  max-height: none;
  object-fit: cover;
  object-position: center 20%;
  flex: none;
}
.quote-person strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.quote-person .who {
  margin-top: 6px;
  font-size: 0.95rem;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.quote-people p {
  max-width: none;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.review-cards {
  align-items: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.review-cards > div {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.review-cards article {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  padding: 1.1rem 1.15rem 1rem;
}
.review-stars {
  display: flex;
  gap: 0.22rem;
  height: 16px;
  margin: 0 0 0.8rem;
  flex: none;
  line-height: 0;
}
.review-stars span {
  display: block;
  width: 14px;
  height: 14px;
  flex: none;
  background: #e6e6e6;
  clip-path: polygon(50% 4%, 61.5% 38%, 98% 38%, 68.5% 59%, 80% 94%, 50% 73%, 20% 94%, 31.5% 59%, 2% 38%, 38.5% 38%);
}
.review-stars[data-rating="5"] span:nth-child(-n+5),
.review-stars[data-rating="4"] span:nth-child(-n+4),
.review-stars[data-rating="3"] span:nth-child(-n+3) {
  background: var(--yellow);
}
.case .review-cards p {
  margin: 0;
  max-width: none;
  color: #161616;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.review-who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid #ececec;
}
.review-cards img,
.review-who img {
  width: 32px;
  height: 32px;
  margin: 0;
  border-radius: 50%;
  max-height: none;
  object-fit: cover;
  flex: none;
}
.review-who span {
  color: #161616;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.2;
}
.improve {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 2.5rem;
  align-items: start;
}
.improve h4 {
  margin: 0;
  color: var(--yellow);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case .improve p {
  margin: var(--text-gap) 0 0;
  max-width: none;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.final-validation { margin-top: var(--section-space); }
.case .final-validation h3 {
  margin: 0;
  text-align: left;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.final-validation-body {
  display: grid;
  grid-template-columns: minmax(14rem, 0.95fr) minmax(0, 1.15fr);
  gap: var(--block-gap);
  align-items: center;
  margin-top: var(--text-gap);
}
.final-validation-body img {
  display: block;
  width: 100%;
  background: transparent;
  border-radius: 0;
}
.final-validation-body ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.case .final-validation-body li {
  margin: 0 0 1.15rem;
  max-width: none;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case .final-validation-body li:last-child { margin-bottom: 0; }
.final-validation-body li span { color: var(--yellow); }
.final-validation .methods { margin-top: var(--section-space); }
.stat {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 500;
  margin: 1.4rem 0 0.3rem;
}
.brief {
  margin: 0 auto;
  text-align: center;
}
.case .brief h3 {
  margin: 0 auto;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-align: center;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case .brief p {
  margin: var(--text-gap) auto 0;
  max-width: 62ch;
  font-size: 1.35rem;
  text-align: center;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.brief .figure {
  display: block;
  width: 25%;
  margin: 0 auto var(--section-space);
}
.brief .figure img {
  width: 100%;
  height: auto;
  display: block;
  background: none;
  border-radius: 0;
}
.close {
  margin-top: var(--section-space);
  padding: 0;
  text-align: center;
}
.close::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 0 auto 1.5rem;
  background: var(--yellow);
  border-radius: 999px;
}
.case .close h3 {
  margin: 0 auto;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case .close p,
.case .close ul {
  margin: var(--text-gap) auto 0;
  max-width: 62ch;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case .close p { text-align: center; }
.case .close ul {
  width: fit-content;
  padding: 0 0 0 1.15em;
  list-style: disc;
  text-align: left;
}
.case .close li {
  margin: 0 0 16px;
  max-width: none;
  text-align: left;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case .close li:last-child { margin-bottom: 0; }
.looking-ahead {
  margin-top: var(--section-space);
  text-align: center;
}
.case .looking-ahead h3 {
  margin: 0 auto;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-align: center;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.case .looking-ahead > p {
  margin: var(--text-gap) auto 0;
  max-width: 62ch;
  text-align: center;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.ahead-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: var(--block-gap);
  text-align: left;
}
.ahead-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid #2a2a2a;
  border-radius: 18px;
  background: #141414;
  overflow: hidden;
}
.ahead-card img {
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
  border-radius: 0;
}
.case .ahead-card h4 {
  margin: 1.05rem 1.15rem 0;
  font-size: 1.08rem;
  font-weight: 500;
  text-align: left;
}
.case .ahead-card p {
  margin: 0.55rem 1.15rem 1.15rem;
  max-width: none;
  text-align: left;
}
.next-case {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: var(--section-space);
  padding-top: 1rem;
  border-top: 1px solid #222;
  text-decoration: none;
}
.next-case strong { display: block; font-size: 1.3rem; font-weight: 500; }
.case-nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid #222;
}
.case-nav a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-decoration: none;
}
.case-nav strong { font-size: 1.3rem; font-weight: 500; }
.case-nav > a:first-child { flex: none; font-size: 1.3rem; font-weight: 500; }
.case-nav .is-next { align-items: flex-end; text-align: right; max-width: min(34rem, 70%); }
.case-nav .is-next span {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  font-size: 1.3rem;
  font-weight: 500;
}
.case-nav .is-next svg {
  width: 0.45em;
  height: 0.78em;
  display: block;
  flex: none;
}
.case-nav .is-next strong { font-size: 0.95rem; font-weight: 400; color: var(--muted); }
.copy { color: var(--muted); font-size: 0.95rem; }

.meta, .folders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.2rem 0 0.4rem;
}
.meta { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }
.folders { grid-template-columns: 1fr 1fr; padding: 0; }
.meta article, .folders > li, .rules, .thread {
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 22px;
}
.meta article { padding: 1.15rem 1.2rem 1.25rem; }
.meta h3, .rules h3 {
  margin: 0 0 16px;
  line-height: 1.2;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.meta p {
  margin: 0;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.teams { display: flex; flex-wrap: wrap; gap: 0.55rem; padding: 0; margin: 0.4rem 0 0; list-style: none; }
.logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2.4rem, 6vw, 5rem);
  margin: 3.6rem auto 0;
  width: min(100%, 640px);
  padding: 0;
}
.logo-row img {
  height: clamp(76px, 12vw, 112px);
  width: auto;
  max-width: none;
}
.logo-row img.mark {
  width: clamp(76px, 12vw, 112px);
  height: clamp(76px, 12vw, 112px);
  object-fit: contain;
}
.agent-case .logo-lockup {
  margin-top: var(--section-space);
  margin-bottom: var(--section-space);
}
.agent-case h1 { margin-top: 3rem; }
.agent-case .dek { max-width: 44rem; margin-left: auto; margin-right: auto; }
.agent-case .meta { margin-top: 2.6rem; }
.agent-case .block {
  display: grid;
  grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 4.5rem);
  row-gap: 1.35rem;
  align-items: start;
  margin-top: var(--section-space);
}
.agent-case .block h2 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  max-width: none;
  text-align: left;
  line-height: 1.2;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.agent-case .block > :not(h2) { grid-column: 2; }
.agent-case .block > p { max-width: none; margin: 0; }
.agent-case .block > div > p {
  max-width: 62ch;
  line-height: 1.5;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.agent-case .block > div > p:first-child { margin-top: 0; }
.teams li {
  max-width: none;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
}
.slack {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  min-height: 640px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #2a2a2a;
  background: #fff;
  color: #1d1c1d;
  font-family: Lato, sans-serif;
  font-size: 15px;
  line-height: 1.46;
  text-align: left;
}
.slack p { max-width: none; margin: 0; color: inherit; }
.slack-side {
  background: #3f0e40;
  color: rgba(255, 255, 255, 0.78);
  padding: 1rem 0.7rem;
}
.slack-workspace { color: #fff; font-weight: 700; margin-bottom: 1.1rem; }
.slack-label {
  margin: 0 0.45rem 0.35rem;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.slack-channel {
  margin: 0.1rem 0;
  padding: 0.28rem 0.5rem;
  border-radius: 6px;
  font-size: 15px;
}
.slack-channel.is-on { background: #1164a3; color: #fff; }
.slack-main { display: flex; flex-direction: column; min-width: 0; background: #fff; }
.slack-bar {
  display: flex;
  align-items: center;
  min-height: 49px;
  padding: 0 1rem;
  border-bottom: 1px solid #e8e8e8;
}
.slack-bar strong { font-weight: 700; font-size: 15px; }
.slack-feed { padding: 0.4rem 0 0.8rem; }
.slack-day { display: flex; justify-content: center; margin: 0.7rem 0 0.35rem; }
.slack-day span {
  border: 1px solid #e8e8e8;
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-size: 13px;
  font-weight: 700;
  color: #1d1c1d;
  background: #fff;
}
.slack-msg { display: flex; gap: 0.55rem; padding: 0.45rem 1.1rem 0.35rem; }
.slack-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: #e01e5a;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  margin-top: 1px;
}
.slack-avatar.is-app { background: #fff; border: 1px solid #e8e8e8; padding: 6px; }
.slack-avatar img { width: 100%; height: 100%; }
.slack-who { display: flex; align-items: center; gap: 0.35rem; }
.slack-who strong { font-weight: 700; color: #1d1c1d; }
.slack-who time { color: #616061; font-size: 12px; }
.slack .app {
  margin: 0;
  padding: 0 0.22rem;
  border: 1px solid #c7c7c7;
  border-radius: 2px;
  color: #616061;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.4;
}
.slack-path { margin-top: 0.35rem; color: #616061; font-size: 14px; }
.slack-path code {
  padding: 0.05rem 0.3rem;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  background: #f6f6f6;
  color: #c01343;
  font-family: Monaco, Menlo, Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.slack-shot {
  width: min(100%, 520px);
  margin: 0.6rem 0 7rem;
  border: 1px solid rgba(29, 28, 29, 0.13);
  border-radius: 8px;
  overflow: hidden;
  background: #f2f2f2;
}
.slack-shot img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
.slack-shot figcaption {
  margin: 0;
  padding: 0.28rem 0.55rem 0.35rem;
  background: #fff;
  color: #616061;
  font-size: 12px;
}
.slack-compose {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto 1rem 0.8rem;
  min-height: 42px;
  padding: 0 0.7rem 0 0.85rem;
  border: 1px solid #c7c7c7;
  border-radius: 8px;
  color: #8d8d8d;
}
.slack-send {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #bbb;
}
.slack-play {
  height: 760px;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}
.slack-play .slack-main {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.slack-play .slack-feed {
  flex: 1;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
}
.slack-play .slack-compose {
  align-items: flex-end;
  margin-top: 0;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}
.slack-play .slack-draft {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0.4rem 0.4rem 0.4rem 0;
  color: #1d1c1d;
}
.slack-placeholder { color: #8d8d8d; }
.slack-caret {
  display: inline-block;
  width: 1px;
  height: 1.05em;
  margin-left: 1px;
  background: #1d1c1d;
  vertical-align: text-bottom;
  animation: slack-blink 1s steps(1) infinite;
}
.slack-compose:not(.is-typing) .slack-caret { visibility: hidden; }
@keyframes slack-blink { 50% { opacity: 0; } }
.slack-compose.is-ready .slack-send {
  background: #007a5a;
  color: #fff;
}
.slack-play.is-sending .slack-send { transform: scale(0.9); }
.slack .slack-typing {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  margin: 0 1rem 0.35rem;
  color: #616061;
  font-size: 13px;
}
.slack .slack-typing[hidden] { display: none; }
.slack-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #868686;
  animation: slack-dot 1.1s infinite ease-in-out;
}
.slack-typing span:nth-child(2) { animation-delay: 0.15s; }
.slack-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes slack-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30% { transform: translateY(-3px); opacity: 1; }
}
.slack-msg.is-in { animation: slack-in 0.28s ease; }
@keyframes slack-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.slack .slack-status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #616061;
}
.slack-spin {
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid #d0d0d0;
  border-top-color: #1164a3;
  border-radius: 50%;
  animation: slack-spin 0.7s linear infinite;
}
@keyframes slack-spin { to { transform: rotate(360deg); } }
.slack-making {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.55rem;
  width: min(100%, 520px);
  margin-top: 0.6rem;
  padding: 0.85rem;
  border: 1px solid rgba(29, 28, 29, 0.13);
  border-radius: 8px;
  aspect-ratio: 1024 / 668;
  background: linear-gradient(100deg, #efefef 30%, #fff 50%, #efefef 70%);
  background-size: 200% 100%;
  animation: slack-shimmer 1.4s linear infinite;
}
@keyframes slack-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
.slack-making-top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #1d1c1d;
  font-size: 14px;
}
.slack-meter {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
}
.slack-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: #1164a3;
  animation: slack-meter 8s linear forwards;
}
@keyframes slack-meter { to { width: 100%; } }
.slack-play .slack-shot { margin: 0.6rem 0 0.15rem; }
.slack .slack-follow { margin-top: 0.45rem; }
.slack-replay {
  margin-top: 0.9rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid #3a3a3a;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
.slack-replay:hover { border-color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .slack-caret, .slack-spin, .slack-typing span, .slack-making, .slack-meter span, .slack-msg.is-in {
    animation: none;
  }
}
.thread-note, .flow-note {
  margin: 0.85rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.thread-note a { white-space: nowrap; }
.agent-case .block > p.flow-note { max-width: 62ch; margin-top: 0.85rem; }
.agent-case .block-wide > p.flow-note { margin-left: auto; margin-right: auto; text-align: center; }
.compare, .principles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.compare article, .principles li {
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 22px;
  padding: 1.15rem 1.2rem 1.25rem;
  max-width: none;
}
.saved {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  grid-template-rows: auto auto auto;
  column-gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
  margin: 0;
}
.saved-was,
.saved-now {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}
.saved p { margin: 0; }
.saved-kicker {
  display: block;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.saved strong {
  display: block;
  align-self: end;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.saved-was strong {
  color: #6a6a6a;
  font-size: clamp(2rem, 3vw, 2.6rem);
  text-decoration: line-through;
  text-decoration-thickness: 0.06em;
}
.saved-now strong {
  color: var(--yellow);
  font-size: clamp(3rem, 4.5vw, 3.6rem);
}
.saved-note {
  display: block;
  max-width: none;
  margin-top: 0.85rem;
  color: #d2d2d2;
  font-size: 1rem;
  line-height: 1.5;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.compare {
  grid-template-rows: auto auto auto;
  row-gap: 0;
}
.compare article {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}
.compare .is-now { border-color: #ffd233; }
.compare h3 {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.compare .num {
  margin: 16px 0 0;
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  text-box-trim: trim-both;
  text-box-edge: cap text;
  align-self: start;
}
.compare article > p:not(.num) {
  margin: 16px 0 0;
  color: #e8e8e8;
  font-size: 18px;
  line-height: 1.5;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.principles strong {
  display: block;
  margin-bottom: 16px;
  line-height: 1;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.principles span {
  display: block;
  color: #e8e8e8;
  line-height: 1.5;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.rules { padding: 1.5rem 1.6rem 1.7rem; margin-top: 0; }
.agent-case .rules p,
.agent-case .rules li,
.agent-case .msg p { max-width: none; }
.rules ol { margin: 0.6rem 0 0; padding-left: 1.2rem; }
.rules li { margin: 0.55rem 0; }
.folders { margin-top: 0; }
.folders > li { list-style: none; padding: 0.95rem 1.05rem; max-width: none; }
.folders p {
  margin: 16px 0 0;
  max-width: none;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.agent-case .agent-stage { margin-top: 0; border: 1px solid #2a2a2a; }
.agent-case .block-wide {
  grid-template-columns: 1fr;
}
.agent-case .block-wide h2 { margin-bottom: var(--text-gap); }
.agent-case .block-wide > :not(h2) { grid-column: 1; }
.process-grid {
  display: grid;
  gap: 1.15rem;
}
.process {
  min-width: 0;
  background: #0c0c0c;
  border: 1px solid #2a2a2a;
  border-radius: 22px;
  padding: 1rem 1rem 1.1rem;
}
.process.is-now { border-color: #ffd233; }
.process header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.handoff-kicker { color: #ffd233; font-weight: 500; }
.process header strong { font-weight: 500; }
.figma {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  overflow: hidden;
  color: #1e1e1e;
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}
.figma-top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 48px;
  padding: 0 10px 0 12px;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
  font-size: 12px;
}
.fig-back {
  width: 8px;
  height: 8px;
  border-left: 1.5px solid #1e1e1e;
  border-bottom: 1.5px solid #1e1e1e;
  transform: rotate(45deg);
  margin-left: 2px;
}
.file-name {
  margin-right: auto;
  min-width: 0;
  color: #1e1e1e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-name b { font-weight: 500; }
.fig-search {
  width: 148px;
  height: 28px;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  color: #b3b3b3;
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: #fff;
}
.share {
  background: #50ab64;
  color: #fff;
  border-radius: 6px;
  height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
}
.present {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #1e1e1e;
}
.figma-workspace {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr) 280px;
  align-items: stretch;
  background: #fff;
}
.layers {
  background: #fff;
  border-right: 1px solid #e6e6e6;
  padding: 12px 8px 16px;
  font-size: 12px;
}
.file-title { margin: 0 8px; font-weight: 500; font-size: 13px; }
.file-sub { margin: 2px 8px 10px; color: #8c8c8c; font-size: 11px; }
.ready {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px 12px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #f5f5f5;
  font-weight: 500;
}
.ready span {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #0fa858;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 8px;
  letter-spacing: -0.04em;
}
.layer-label {
  margin: 0 8px 4px;
  color: #6e6e6e;
  font-size: 11px;
}
.layers ul { list-style: none; margin: 0; padding: 0; }
.layers li {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  margin: 1px 0;
  padding: 0 8px;
  border-radius: 6px;
  color: #1e1e1e;
}
.layers .t { width: 14px; text-align: center; font-size: 11px; font-weight: 500; flex: none; }
.layers svg, .gem { width: 12px; height: 12px; fill: #9747ff; flex: none; }
.dev-stage[data-phase="named"][data-stop="card"] [data-layer="card"],
.dev-stage[data-phase="named"][data-stop="heading"] [data-layer="heading"],
.dev-stage[data-phase="named"][data-stop="icon"] [data-layer="icon"],
.dev-stage[data-phase="named"][data-stop="button"] [data-layer="button"],
.dev-stage[data-phase="named"][data-stop="gap"] [data-layer="gap"],
.dev-stage[data-phase="named"][data-stop="row"] [data-layer="row"] {
  background: #f0f0f0;
}
.figma-canvas {
  position: relative;
  min-height: 640px;
  background: #f5f5f5;
  padding: 18px 28px 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.frame { width: min(300px, 100%); }
.frame-label {
  margin: 0 0 8px;
  font-size: 11px;
  color: #6e6e6e;
}
.screen {
  position: relative;
  width: min(300px, 100%);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}
.screen img, .screen-still {
  display: block;
  width: 100%;
  height: auto;
}
.screen-still {
  width: min(300px, 100%);
  border-radius: 28px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.hit { position: absolute; }
.hit-card { left: 18.4%; top: 7.9%; width: 63.1%; height: 29.2%; border-radius: 4px; }
.hit-gap { left: 6%; top: 37.05%; width: 88%; height: 2.7%; }
.hit-heading { left: 4.2%; top: 39.5%; width: 44%; height: 2.4%; }
.hit-icon { left: 3.8%; top: 49.4%; width: 8.4%; height: 4.8%; border-radius: 8px; }
.hit-button { left: 83.6%; top: 48.9%; width: 12.1%; height: 5.7%; border-radius: 50%; }
.hit-row { left: 3%; top: 62.2%; width: 94%; height: 6.5%; border-radius: 4px; }
.measure {
  display: none;
  position: absolute;
  left: 46%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #f24822;
}
.measure::before, .measure::after {
  content: "";
  position: absolute;
  left: -7px;
  width: 15px;
  height: 1px;
  background: #f24822;
}
.measure::before { top: 0; }
.measure::after { bottom: 0; }
.measure b {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: #f24822;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  padding: 0 3px;
  border-radius: 2px;
}
.dev-stage[data-stop="gap"][data-phase="hover"] .measure,
.dev-stage[data-stop="gap"][data-phase="named"] .measure { display: block; }
.dev-stage[data-phase="hover"] [data-hit].on:not([data-hit="gap"]),
.dev-stage[data-phase="named"] [data-hit].on:not([data-hit="gap"]) {
  outline: 1px solid #0d99ff;
  outline-offset: 1px;
}
.dev-stage[data-phase="named"] [data-hit].on:not([data-hit="gap"])::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(-45deg, rgba(13, 153, 255, 0.16) 0 1px, transparent 1px 5px);
  pointer-events: none;
}
.figma-dock {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  background: #fff;
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.tool {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #1e1e1e;
  border-radius: 8px;
}
.tool.is-move { background: #0fa858; }
.dock-rule { width: 1px; height: 18px; background: #e6e6e6; margin: 0 4px; }
.dock-dev {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: #0fa858;
  border-radius: 8px;
}
.sel-tag {
  position: absolute;
  z-index: 4;
  background: #0d99ff;
  color: #fff;
  font-size: 11px;
  line-height: 1.35;
  padding: 0 5px;
  border-radius: 2px 2px 0 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}
.dev-stage[data-phase="named"] .sel-tag.is-on { opacity: 1; }
.dev-cursor {
  position: absolute;
  z-index: 6;
  width: 16px;
  height: 20px;
  opacity: 0;
  pointer-events: none;
}
.dev-stage.is-ready .dev-cursor {
  opacity: 1;
  transition: left 0.75s cubic-bezier(0.22, 1, 0.36, 1), top 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.dev-cursor.is-down { transform: translate(1px, 2px); }
.dev-badge {
  position: absolute;
  left: 14px;
  top: 14px;
  background: #0d99ff;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: 2px 4px 3px;
  border-radius: 3px;
}
.dev-cursor::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  border: 2px solid #0d99ff;
  border-radius: 50%;
  opacity: 0;
}
.dev-cursor.is-down::after { animation: dev-click 0.45s ease; }
@keyframes dev-click {
  0% { opacity: 0.9; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(2.4); }
}
.inspect, .inspect p, .inspect li, .ask p, .build-steps li, .code-label { max-width: none; }
.inspect {
  background: #fff;
  color: #1e1e1e;
  border-left: 1px solid #e6e6e6;
  font-size: 12px;
  overflow: auto;
}
.inspect-tabs {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid #e6e6e6;
  color: #8c8c8c;
  font-weight: 500;
}
.inspect-tabs .on { color: #1e1e1e; box-shadow: inset 0 -2px 0 #1e1e1e; height: 40px; display: flex; align-items: center; }
.zoom-inline { margin-left: auto; color: #6e6e6e; font-weight: 400; }
.inspect-empty { color: #8c8c8c; padding: 2.4rem 1rem; text-align: center; }
.insp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px 0;
}
.insp-head strong { display: block; font-size: 13px; font-weight: 500; }
.insp-head span { display: block; color: #6e6e6e; font-size: 11px; margin-top: 2px; }
.insp-head .instance { color: #9747ff; }
.insp-head .more { color: #1e1e1e; letter-spacing: 1px; }
.inspect button.compare {
  display: block;
  width: calc(100% - 24px);
  margin: 10px 12px 0;
  height: 32px;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  background: #fff;
  color: #1e1e1e;
  font: inherit;
  font-size: 12px;
}
.prop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 12px 0;
  color: #6e6e6e;
}
.prop b {
  font-weight: 500;
  color: #1e1e1e;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 3px 8px;
}
.boxmodel {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  grid-template-rows: 28px 52px 28px;
  margin: 12px;
  background: #f5f5f5;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  color: #fff;
  font-size: 11px;
}
.boxmodel .n { grid-area: 1 / 2; }
.boxmodel .w { grid-area: 2 / 1; }
.boxmodel .e { grid-area: 2 / 3; }
.boxmodel .s { grid-area: 3 / 2; }
.boxmodel .n, .boxmodel .w, .boxmodel .e, .boxmodel .s {
  place-self: center;
  background: #0d99ff;
  color: #fff;
  font-size: 10px;
  line-height: 1.35;
  padding: 0 4px;
  border-radius: 3px;
}
.boxmodel .core {
  grid-area: 2 / 2;
  display: grid;
  place-items: center;
  align-content: center;
  background: #fff;
  border: 1px dashed #0d99ff;
  color: #1e1e1e;
  font-size: 11px;
}
.boxmodel .core b { font-weight: 500; }
.boxmodel .core small { display: block; color: #f24822; font-size: 10px; }
.boxmodel i {
  position: absolute;
  right: 4px;
  bottom: 2px;
  color: #b3b3b3;
  font-style: normal;
  font-size: 9px;
}
.code-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 12px 0;
}
.seg {
  display: flex;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 2px;
}
.seg b {
  font-weight: 500;
  color: #8c8c8c;
  padding: 4px 10px;
  border-radius: 6px;
}
.seg b.on { background: #fff; color: #1e1e1e; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.lang {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 4px 8px;
  color: #1e1e1e;
  background: #fff;
}
.lang i { font-style: normal; color: #6e6e6e; margin-left: 4px; }
.code-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 12px 6px;
  font-weight: 500;
}
.copy {
  width: 12px;
  height: 14px;
  border: 1.4px solid #1e1e1e;
  border-radius: 2px;
  box-shadow: 2px -2px 0 #fff, 3px -3px 0 #1e1e1e;
}
.dev-code {
  margin: 0 12px 4px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 8px 8px 8px 0;
  color: #1e1e1e;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre;
  overflow: auto;
}
.dev-code span {
  display: inline-block;
  width: 18px;
  margin-right: 8px;
  color: #b3b3b3;
  text-align: right;
}
.dev-code em { font-style: normal; color: #d63384; }
.dev-code em.hot { color: #f24822; }
.inspect [hidden] { display: none !important; }
.type-preview {
  margin: 12px;
  padding: 16px 12px;
  background: #121212;
  border-radius: 8px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.04em;
}
.inspect dl { margin: 8px 12px 12px; }
.inspect dl div, .swatch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.inspect dt { color: #6e6e6e; }
.inspect dd { margin: 0; }
.swatch i, .inspect dd i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: -1px;
}
.swatch { justify-content: flex-start; }
.paper { background: #fff; border: 1px solid #ccc; }
.play-fill { background: #1ed760; }
dd.is-read { color: #f24822; font-weight: 500; }
.inspect p { margin: 0; }

.ask {
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  padding: 0.75rem 0.8rem 0.85rem;
  text-align: left;
}
.ask-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
  font-weight: 500;
}
.ask-row img { width: 12px; height: 18px; }
.ask-who {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #ffd233;
  font-weight: 500;
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
}
.ask-claude { margin-top: 0.7rem; }
.ask-claude img { width: 14px; height: 14px; }
.ask p { color: #eee; }
.build-steps {
  display: flex;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0.7rem 0 0.75rem;
}
.build-steps li {
  flex: 1;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  padding: 0.32rem 0.4rem;
  font-size: 0.78rem;
  text-align: center;
  animation: build-step 3.6s ease infinite;
}
.build-steps li:nth-child(2) { animation-delay: 1.2s; }
.build-steps li:nth-child(3) { animation-delay: 2.4s; }
@keyframes build-step {
  0%, 18%, 100% { border-color: #2a2a2a; color: inherit; }
  28%, 48% { border-color: #ffd233; color: #fff; }
}
.code-label {
  margin: 0.8rem 0 0.35rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.snippet {
  margin: 0.75rem 0 0;
  background: #0c0c0c;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  color: #d7d7d7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  line-height: 1.55;
  overflow: auto;
  white-space: pre;
}
.snippet .tag { color: #ffd233; }
.snippet .dim { color: #8d8d8d; }
.snippet .kw { color: #d0d0d0; }
.snippet.bits { font-size: 0.78rem; }
.rule-icon { width: 1.4rem; height: 1.4rem; display: block; margin-bottom: 0.7rem; color: #ffd233; }
.reads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reads li {
  max-width: none;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 18px;
  padding: 1.05rem 1.1rem 1.15rem;
}
.reads strong {
  display: block;
  margin-bottom: 16px;
  line-height: 1;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}
.reads span {
  display: block;
  color: #e8e8e8;
  font-size: 18px;
  line-height: 1.5;
  text-box-trim: trim-both;
  text-box-edge: cap text;
}

.claude-app {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  min-height: 640px;
  background: #2c2c2b;
  color: #e8e6e1;
  border-radius: 12px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  text-align: left;
}
.cc-side {
  background: #232322;
  border-right: 1px solid #3a3a38;
  padding: 12px 8px;
}
.cc-new, .cc-session { margin: 0; }
.cc-new {
  color: #b7b5b0;
  padding: 6px 8px 10px;
  font-size: 12px;
}
.cc-session {
  padding: 8px;
  border-radius: 8px;
  background: #343432;
}
.cc-session b { display: block; font-weight: 500; }
.cc-session span { display: block; color: #9a9893; font-size: 11px; margin-top: 2px; }
.cc-main { position: relative; display: flex; flex-direction: column; min-width: 0; background: #2c2c2b; }
.cc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid #3a3a38;
  font-size: 13px;
}
.cc-session-name { font-weight: 500; }
.cc-bar-tools { display: flex; gap: 4px; color: #b7b5b0; }
.cc-bar-tools span {
  padding: 4px 8px;
  border-radius: 6px;
}
.cc-stage[data-preview="on"] .cc-browser { background: #3a3a38; color: #fff; }
.cc-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.cc-stage[data-preview="on"] .cc-body { grid-template-columns: minmax(0, 1fr) minmax(180px, 0.72fr); }
.cc-chat { padding: 14px 16px 8px; overflow: auto; }
.cc-user, .cc-userline {
  margin: 0 0 12px;
  padding: 8px 10px;
  background: #343432;
  border-radius: 10px;
  white-space: pre-wrap;
  line-height: 1.45;
}
.cc-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cc-log li { display: flex; gap: 8px; align-items: flex-start; }
.cc-log li.cc-userline { display: block; padding: 8px 10px; background: #343432; border-radius: 10px; }
.cc-user, .cc-userline, .cc-draft, .cc-log p { max-width: none; }
.cc-log li[hidden], .cc-user[hidden], .cc-preview[hidden] { display: none !important; }
.cc-log i {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: #3dcc6e;
  flex: none;
}
.cc-log strong { display: block; font-weight: 500; font-size: 12px; }
.cc-log p { margin: 2px 0 0; color: #b7b5b0; font-size: 12px; line-height: 1.4; }
.cc-preview { border-left: 1px solid #3a3a38; display: flex; flex-direction: column; min-width: 0; background: #1c1c1b; }
.cc-url {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  color: #b7b5b0;
  font-size: 12px;
  border-bottom: 1px solid #3a3a38;
}
.cc-url span { width: 8px; height: 8px; border-radius: 50%; background: #3dcc6e; }
.cc-page { position: relative; margin: 12px auto; width: min(190px, 88%); }
.cc-page img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: contain; border-radius: 16px; }
.cc-spot { position: absolute; }
.cc-spot[data-review="cover"] { left: 18.4%; top: 7.9%; width: 63.1%; height: 29.2%; }
.cc-spot[data-review="title"] { left: 4.2%; top: 39.5%; width: 44%; height: 2.4%; }
.cc-spot[data-review="play"] { left: 83.6%; top: 48.9%; width: 12.1%; height: 5.7%; }
.cc-spot[data-review="track"] { left: 3%; top: 62.2%; width: 94%; height: 6.5%; }
.cc-compose { position: relative; padding: 8px 14px 12px; }
.cc-mascot { position: absolute; left: 28px; top: -6px; width: 42px; height: 24px; }
.cc-box {
  background: #181818;
  border: 1px solid #4a4a47;
  border-radius: 14px;
  padding: 10px 12px 8px;
}
.cc-draft {
  min-height: 44px;
  margin: 0 0 8px;
  color: #eceae4;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.cc-caret {
  display: inline-block;
  width: 1px;
  height: 0.95em;
  background: #eceae4;
  vertical-align: text-bottom;
  margin-left: 1px;
}
.cc-box-row { display: flex; align-items: center; gap: 8px; color: #b7b5b0; font-size: 12px; }
.cc-plus, .cc-mic, .cc-send {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: none;
}
.cc-mode { margin-right: auto; }
.cc-model { color: #d7d5d0; }
.cc-mic {
  border: 1.4px solid #b7b5b0;
  border-radius: 11px 11px 6px 6px;
  width: 10px;
  height: 14px;
  position: relative;
}
.cc-mic::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: -4px;
  height: 6px;
  border: 1.4px solid #b7b5b0;
  border-top: 0;
  border-radius: 0 0 8px 8px;
}
.cc-send {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #d97757;
  opacity: 0;
}
.cc-stage.is-drafting .cc-send { opacity: 1; }
.cc-under {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: #b7b5b0;
  font-size: 12px;
}
.cc-folder, .cc-local {
  border: 1px solid #3a3a38;
  border-radius: 8px;
  padding: 4px 8px;
  background: #232322;
}
.cc-cursor {
  position: absolute;
  z-index: 5;
  width: 14px;
  height: 18px;
  margin-left: -2px;
  pointer-events: none;
  opacity: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'><path d='M1 1 L1 14 L4.4 10.8 L7.2 16.4 L9.2 15.4 L6.4 9.8 L11 9.6 Z' fill='%23fff' stroke='%23111' stroke-width='1'/></svg>") center / contain no-repeat;
}
.cc-stage.is-ready .cc-cursor {
  opacity: 1;
  transition: left 0.55s cubic-bezier(0.22, 1, 0.36, 1), top 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.cc-cursor.is-down { transform: translate(1px, 2px); }

@media (max-width: 1100px) {
  .now-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .now-grid .ask, .now-grid > div:last-child { width: 100%; }
  .figma-workspace { grid-template-columns: minmax(0, 1fr) 260px; }
  .layers { display: none; }
  .claude-app { grid-template-columns: 1fr; }
  .cc-side { display: none; }
  .cc-stage[data-preview="on"] .cc-body { grid-template-columns: 1fr; }
  .cc-preview { border-left: 0; border-top: 1px solid #3a3a38; }
}
@media (max-width: 1100px) {
  .case-split { grid-template-columns: 1fr; row-gap: 0; }
  .case .case-split > h3,
  .case .case-split > .challenge-lead,
  .case .case-split > .pilot-shot,
  #pilot-feedback > h3,
  #pilot-feedback > p,
  #pilot-feedback > .pilot-shot,
  #pilot-feedback > .case-split-copy { grid-column: 1; grid-row: auto; }
  #pilot-feedback > .pilot-shot { margin-top: var(--section-space); }
  .case .case-split > p,
  .case .case-split > ul,
  .case .case-split > ol,
  .case .case-split > .jx-map,
  .case .case-split > .ia-tree,
  .case .case-split > .ri-kicker,
  .case .case-split > .ri-methods,
  .case .case-split > .ri-grid,
  .case .case-split > .ri-block,
  .case .case-split > .ri-note,
  .case .case-split > .quote-grid,
  .case .case-split > .figure,
  .case .case-split > .comp-set,
  .case .case-split > .compare-frame,
  .case .case-split > .chase-map,
  .case .case-split-copy,
  .case .friction-col,
  .observe,
  .improve,
  .path-lead,
  .path-panel,
  .methods.is-side,
  .arch-lead,
  .shot-flow,
  .case-split.arch-board > .method-panel { grid-column: 1; grid-row: auto; margin-top: 0; }
  .case .case-split > * + * { margin-top: var(--text-gap); }
  .case .case-split > p,
  .case .case-split > ul,
  .case .case-split > ol { margin-top: var(--text-gap); }
  .case .case-split.identify-lead > p { margin-top: 0; }
  .case .case-split > * + .figure,
  .case .case-split > * + .compare-frame,
  .case .case-split > * + .quote-grid,
  .case .case-split > * + .ia-tree,
  .case .case-split > * + .jx-map,
  .case .case-split > * + .chase-map { margin-top: var(--block-gap); }
  .case-gift #defining-opportunity p span { white-space: normal; }
  .case .case-split > * + .methods:not(.is-side) { margin-top: var(--section-space); }
  .case .case-split > .sticky-board { margin-top: 0; }
  .case-split .jx-map,
  .case-split .ia-tree { width: 100%; }
  .ri-grid { grid-template-columns: 1fr; }
  .ri-block-head,
  .ri-roles,
  .ri-tasks,
  .ri-findings { grid-template-columns: 1fr; }
  .ri-block-head > .ri-num,
  .ri-block-head > h4,
  .ri-block-head > p:not(.ri-num) {
    grid-column: 1;
    grid-row: auto;
  }
  .ri-heu-map { grid-template-columns: 1fr; }
  .ri-heu-phone,
  .ri-heu-callouts { grid-column: auto; justify-self: stretch; }
  .ri-heu-phone .card-stage {
    width: 100%;
    height: min(48vh, 420px);
    min-height: 300px;
  }
  .ri-heu-phone .gift-hero-devices { width: 100%; }
  .ri-heu-callouts {
    align-items: center;
    gap: 1.1rem;
    padding: 1.25rem 0 0;
  }
  .ri-heu-callouts li {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    width: min(28rem, 100%);
    text-align: center;
  }
  .ri-heu-rail { display: none; }
  .chase-map {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .chase-stage,
  .chase-legend { grid-column: 1; }
  .chase-stage { width: min(22rem, 100%); }
  .chase-callouts { display: none; }
  .chase-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 1.4rem;
  }
  .ri-heu-title { justify-content: center; }
  .case .ri-heu-copy p {
    max-width: 28rem;
    text-align: center;
  }
  .case .path-lead h3 { margin-top: 0; }
  .final-validation-body { grid-template-columns: 1fr; }
  .agent-case .block:not(.block-wide) { grid-template-columns: 1fr; row-gap: 0; }
  .agent-case .block:not(.block-wide) h2,
  .agent-case .block:not(.block-wide) > :not(h2) { grid-column: 1; grid-row: auto; }
  .agent-case .block:not(.block-wide) > :not(h2) { margin-top: var(--block-gap); }
  .agent-case .block:not(.block-wide) h2 + * { margin-top: var(--text-gap); }
}
@media (max-width: 800px) {
  .nav-links { display: none; position: static; transform: none; }
  .nav-links.open {
    position: absolute;
    left: auto;
    right: 16px;
    transform: none;
  }
  .menu-btn,
  .case-amex .menu-btn,
  .nav:has(.case-close) .menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .rail {
    display: none;
    position: fixed;
    z-index: 21;
    top: 72px;
    right: 16px;
    left: auto;
    transform: none;
    background: #141414;
    border-radius: 16px;
    padding: 1rem 1.25rem 1.15rem;
    gap: 0.7rem;
    max-height: calc(100dvh - 6rem);
    overflow: auto;
  }
  .rail.is-open { display: flex; }
  .rail a,
  body:has(main.case) .rail a,
  body:has(main.case) .rail a.rail-study {
    height: auto;
    min-height: 1.7rem;
  }
  .rail a span {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    font-size: 1rem;
  }
  .rail a::before { display: none; }
  .rail-studies {
    margin: 0;
    padding: 0.1rem 0 0.1rem 0.85rem;
    gap: 0.45rem;
  }
  .rail-studies::before { left: 0.28rem; }
  .filter-fit { width: calc(100% - 1.5rem); }
  .fact { grid-template-columns: 1fr; }
  .fact > :first-child,
  .fact > :last-child { grid-column: auto; }
  .improve { grid-template-columns: 1fr; }
  .sticky-board { margin-top: 0; }
  .paths .method-tabs { width: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .observe { grid-template-columns: 1fr; }
  .case-gift .comp-block .figure,
  .case-gift .comp-block .observe { width: 100%; }
  .case-gift #sketching .sketch-notes {
    grid-template-columns: 1fr;
    padding: 0 1.15rem 1.5rem;
  }
  .case-gift #early-feedback .quote-people,
  .case-gift #option-feedback .fb-members {
    grid-template-columns: 1fr;
  }
  .ia-tree { padding: 1.35rem 1rem 1.5rem; }
  .friction-stack,
  .ahead-pair { grid-template-columns: 1fr; }
  .ri-methods { grid-template-columns: 1fr; }
  .flow-nodes,
  .flow-nodes.is-four,
  .flow-split { grid-template-columns: 1fr; }
  .flow-lobs-close { grid-column: 1; }
  .flow-split.is-dealer > .flow-ops,
  .flow-split.is-dealer > .flow-ops-label,
  .flow-split.is-dealer > .flow-lobs-label,
  .flow-split.is-dealer > .flow-lob,
  .flow-split.is-dealer > .flow-lobs-close {
    grid-column: 1;
    grid-row: auto;
  }
  .flow-heading-spacer { display: none; }
  .case .ux-challenge > p span { white-space: normal; }
  .case-gift #defining-opportunity p {
    font-size: clamp(0.92rem, 3.4vw, 1.2rem);
  }
  .case-gift #defining-opportunity p span {
    white-space: normal;
  }
  .shot-split,
  .shot-split.is-four { grid-template-columns: 1fr; }
  .feedback-points { grid-template-columns: 1fr; }
  .shot-shared-cart,
  .shot-quote,
  .shot-confirm { grid-column: 1; grid-row: auto; }
  .shot-join { display: none; }
  .shot-shared-cart::after {
    top: 0.5rem;
    height: 3.15rem;
  }
  .flow-nodes.is-path { display: flex; }
  .friction-empty { display: none; }
  .quote-people,
  .review-cards { grid-template-columns: 1fr; }
  .hmw-rail {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
  }
  .hmw-track { padding-left: 2rem; padding-right: 2rem; }
  .hmw-card { width: 15.5rem; }
  .method-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    width: 100%;
  }
  .method-tabs button {
    min-width: 0;
    width: 100%;
    white-space: normal;
    padding-inline: 0.7rem;
  }
  .method-pair { grid-template-columns: 1fr; }
  .card-split .card-body,
  .card-poster .card-caption,
  .case-hero .card-caption,
  .expand-flight .card-caption,
  .card-type .card-foot { display: flex; flex-direction: column; align-items: stretch; }
  .card-poster .btn,
  .card-type .btn { align-self: flex-start; margin-top: 0.8rem; }
  .saved-was, .saved-now { display: block; grid-row: auto; }
  .agent-case .block h2,
  .agent-case .block > :not(h2) { grid-column: 1; grid-row: auto; }
  .agent-list { grid-template-columns: 1fr; }
  .logo-row { gap: clamp(1.2rem, 5vw, 2.4rem); }
  .logo-row img { height: clamp(64px, 18vw, 96px); }
  .logo-row img.mark { width: clamp(64px, 18vw, 96px); height: clamp(64px, 18vw, 96px); }
  .figma-workspace { grid-template-columns: 1fr; }
  .figma-canvas { min-height: 0; padding: 18px 12px 74px; }
  .fig-search { width: 88px; flex: none; }
  .inspect { border-left: 0; border-top: 1px solid #e6e6e6; }
  .zoom { display: none; }
  .reads { grid-template-columns: 1fr 1fr; }
  .slack { grid-template-columns: 1fr; min-height: 0; }
  .slack-side { display: none; }
  .slack-play { height: 640px; }
  .reader { grid-template-columns: auto minmax(0, 1fr); }
  .reader-cover { height: min(24svh, calc(100svh - 20rem)); max-width: 28vw; }
  .shelf img { height: min(9svh, 72px); }
  .stage {
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    padding-bottom: 0;
  }
  .stage figure {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .sheet-ad .stage {
    gap: 0.4rem;
    padding-bottom: 0;
  }
  .sheet-ad .stage img,
  .sheet-ad .stage-lead img {
    height: min(18svh, calc((100svh - 34rem) / 3));
    max-height: none;
  }
  .stage figcaption {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    max-width: 12rem;
    margin-top: 0.5rem;
    transform: none;
  }
  .ad-kicker { margin-bottom: 1.15rem; }
  .ad-copy { margin-top: 0.75rem; }
  .badges {
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.85rem;
  }
  .agent-card { grid-column: auto; }
  .slide .portrait { max-height: 240px; }
  .talk-grid { columns: 2; }
  .talk-grid.is-solo { columns: 1; max-width: 26rem; }
  .footer nav { text-align: left; }
}
@media (max-width: 700px) {
  .talk-grid { columns: 1; }
  .talk-grid.is-pair { grid-template-columns: 1fr; }
  .talk-grid.is-solo { grid-template-columns: minmax(0, 1fr); }
  .reader { grid-template-columns: 1fr; justify-items: center; }
  .reader-copy { width: 100%; }
  .reader-cover { height: min(22svh, 190px); max-width: 46vw; }
  .shelf img { height: min(8svh, 64px); }
  .sheet-reader h2 { font-size: clamp(1.25rem, 5vw, 1.8rem); }
  .zoom-shot { padding: 0.9rem 1rem; }
  .zoom-frame { max-height: calc(100svh - 1.8rem); }
  .zoom-shot img { max-height: calc(100svh - 1.8rem); }
}
@media (prefers-reduced-motion: reduce) {
  .case .frame-mark {
    background-size: 100% 0.78em;
    transition: none;
  }
  .design-phase-line path {
    stroke-dashoffset: 0;
    transition: none;
  }
  .sticky.is-dragging { transform: rotate(var(--tilt, 0deg)); }
  html { scroll-behavior: auto; }
  .beat { opacity: 1; transition: none; }
  #path.beat, #agents .agents-more, #agents .agent-stage, #work.beat, #work.beat h2, #studies { transition: none; animation: none; }
  .rail a::before, .rail a span { transition: none; }
  .sheet[open] { animation: none; }
  .flow-signal { display: none; }
  .build-steps li { animation: none; }
  .dev-cursor, .cc-cursor { transition: none; }
}