/* yap case study: problem animations, opportunity, live demo, diagrams, launch. */

body.case-page main .yap-overview-img { margin-top: var(--s-7); }
body.case-page main .yap-overview-img img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }

/* ── Problem: three ways people yap today ─────────────────────── */
.yap-problem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-media, var(--s-3)); }
.yap-problem__cell { min-width: 0; }
.yap-card { position: relative; aspect-ratio: 4 / 5; background: var(--fig-bg) radial-gradient(var(--fig-dot) .6px, transparent .9px) 0 0 / 10px 10px; border-radius: var(--r-lg); overflow: hidden; }
.yap-problem__name { margin: var(--s-7) 0 var(--s-3); font-size: var(--fs-base); font-weight: var(--fw-semi); line-height: var(--lh-snug); color: var(--ink); }
.yap-problem__why { margin: 0; font-size: var(--fs-base); line-height: var(--lh-base); text-wrap: pretty; }

/* Calling: FaceTime tiles waiting for people who aren't free yet */
.yap-call__tile { position: absolute; display: grid; place-items: center; align-content: center; gap: var(--s-2); border-radius: var(--r-md); will-change: transform; }
.yap-call__tile span { display: grid; place-items: center; width: 42%; aspect-ratio: 1; border-radius: 50%; background: var(--surface-2); font-size: clamp(14px, 2.4vw, 30px); color: var(--ink); }
.yap-call__tile em { font-style: normal; font-size: var(--fs-xs); color: var(--muted); }
.yap-call__tile--l { left: 13%; top: 8%; width: 64%; aspect-ratio: 1; background: var(--line); animation: yap-float-l 7s ease-in-out infinite; }
.yap-call__tile--k { left: 56%; top: 49%; width: 32%; aspect-ratio: 1; background: var(--fig-dot); animation: yap-float-k 6s ease-in-out infinite; }
.yap-call__tile--m { left: 25%; top: 66%; width: 32%; aspect-ratio: 1; background: var(--line); animation: yap-float-m 8s ease-in-out infinite; }
.yap-call__tile--k span, .yap-call__tile--m span { width: 46%; font-size: clamp(11px, 1.6vw, 20px); }
@keyframes yap-float-l { 0%, 100% { transform: translate(0, 0) scale(1); } 35% { transform: translate(-4%, 3%) scale(.94); } 70% { transform: translate(3%, -2%) scale(1.03); } }
@keyframes yap-float-k { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-10%, -8%) scale(1.1); } 75% { transform: translate(6%, 4%) scale(.92); } }
@keyframes yap-float-m { 0%, 100% { transform: translate(0, 0) scale(1); } 30% { transform: translate(8%, -6%) scale(.9); } 65% { transform: translate(-6%, 5%) scale(1.08); } }

/* Texting: iMessage bubbles, sent one after another */
.yap-text__stack { position: absolute; left: 10%; right: 10%; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; }
.yap-bubble { position: relative; margin: 0; max-height: 0; opacity: 0; padding: 0 var(--s-4); border-radius: var(--r-lg); background: #1b8cfb; color: var(--surface); font-size: clamp(12px, 1.3vw, 16px); line-height: var(--lh-snug); white-space: nowrap; transform-origin: 100% 100%; overflow: visible; animation: 8s cubic-bezier(.34, 1.4, .64, 1) infinite; }
.yap-bubble--1 { animation-name: yap-b1; } .yap-bubble--2 { animation-name: yap-b2; } .yap-bubble--3 { animation-name: yap-b3; }
@keyframes yap-b1 { 0%, 8% { max-height: 0; opacity: 0; padding-block: 0; margin-top: 0; transform: scale(.4) translateY(12px); } 13%, 88% { max-height: 60px; opacity: 1; padding-block: var(--s-2); margin-top: var(--s-1); transform: none; } 96%, 100% { max-height: 60px; opacity: 0; padding-block: var(--s-2); margin-top: var(--s-1); } }
@keyframes yap-b2 { 0%, 22% { max-height: 0; opacity: 0; padding-block: 0; margin-top: 0; transform: scale(.4) translateY(12px); } 27%, 88% { max-height: 60px; opacity: 1; padding-block: var(--s-2); margin-top: var(--s-1); transform: none; } 96%, 100% { max-height: 60px; opacity: 0; padding-block: var(--s-2); margin-top: var(--s-1); } }
@keyframes yap-b3 { 0%, 36% { max-height: 0; opacity: 0; padding-block: 0; margin-top: 0; transform: scale(.4) translateY(12px); } 41%, 88% { max-height: 60px; opacity: 1; padding-block: var(--s-2); margin-top: var(--s-1); transform: none; } 96%, 100% { max-height: 60px; opacity: 0; padding-block: var(--s-2); margin-top: var(--s-1); } }

/* Voice memo: the real recording, cropped to the bubble */
.yap-memo { display: grid; place-items: center; }
.yap-memo video { width: 80%; height: auto; display: block; border-radius: 0 !important; background: transparent; }

@media (max-width: 760px) {
  .yap-problem { grid-template-columns: 1fr; }
  .yap-card { aspect-ratio: 4 / 3; }
  .yap-call__tile--l { left: 30%; top: 8%; width: 40%; }
  .yap-call__tile--k { left: 62%; top: 44%; width: 22%; }
  .yap-call__tile--m { left: 18%; top: 58%; width: 22%; }
}
@media (prefers-reduced-motion: reduce) {
  .yap-call__tile { animation: none; }
  .yap-bubble { animation: none; max-height: 60px; opacity: 1; padding-block: var(--s-2); margin-top: var(--s-1); }
}

/* ── Opportunity ───────────────────────────────────────────────── */
body.case-page main .yap-hmw { margin-top: var(--s-10); padding: var(--s-8) 0 var(--s-2); border-top: 1px solid var(--line); }
body.case-page main .yap-hmw__q { margin: var(--s-3) 0 0; max-width: 28ch; font-size:var(--h2-fs); font-weight: var(--fw-medium); line-height: var(--lh-tight); letter-spacing: var(--h1-ls); color: var(--ink); }

/* ── Live demo in the iPhone frame (same 1080×1350 stage as the feature videos) ── */
.yap-demo { position: relative; aspect-ratio: 1080 / 1350; border-radius: var(--r-lg); overflow: hidden; background: var(--fig-bg); }
.yap-demo__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
.yap-demo__screen { position: absolute; left: 26.093%; top: 9.711%; width: 47.722%; height: 80.563%; overflow: hidden; border-radius: 14.36% / 6.8%; background: var(--surface); }
.yap-demo__screen iframe { position: absolute; left: 0; top: calc(54px * var(--yap-demo-scale, 1)); width: 402px; height: calc(848px - 54px); border: 0; transform-origin: 0 0; border-radius: 0 !important; }
/* The iframe gets no safe-area inset, so it starts below the Dynamic Island; this strip stands in for the status bar. */
.yap-demo__screen:has(iframe) { background: var(--surface); }
.yap-demo__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; filter: saturate(.9); }
.yap-demo__start { align-self: flex-start; margin-top: var(--s-7); padding: var(--s-3) var(--s-5); border: 0; border-radius: var(--r-pill); background: var(--ink); color: var(--surface); font: inherit; font-size: var(--fs-base); cursor: pointer; white-space: nowrap; box-shadow:var(--shadow-float); }
.yap-demo__start:disabled { visibility: hidden; }
.yap-demo-intro { display: flex; flex-direction: column; }
/* Side by side: the button sits at the bottom of the text column, level with the phone's bottom edge. */
@media (min-width: 960px) {
  body.case-page main #demo.case-single-video { align-items: stretch; }
  #demo .yap-demo-intro .yap-demo__start { margin-top: auto; margin-bottom: var(--yap-demo-inset, 0px); }
}
.yap-demo__frame { position: absolute; left: 24.676%; top: 8.889%; width: 50.676%; height: 82.222%; pointer-events: none; border-radius: 0 !important; }

/* ── Diagrams and placeholders ─────────────────────────────────── */
.yap-diagram svg { display: block; width: 100%; height: auto; }
.yap-diagram + .yap-diagram, .yap-diagram + figure { margin-top: var(--s-4); }

/* ── Launch ────────────────────────────────────────────────────── */
.yap-launch-grid .cs-cell > video.nt-video { height: 100%; object-fit: cover; }
.yap-tweet { display: flex; justify-content: center; padding: var(--s-7) var(--s-4); border-radius: var(--r-lg); background: var(--fig-bg); }
.yap-tweet .twitter-tweet { margin: 0 !important; }
.yap-tweet blockquote.twitter-tweet { max-width: 480px; padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); background: var(--surface); font-size: var(--fs-base); }
body.case-page main .yap-text .yap-bubble.yap-bubble { color: var(--surface); }

/* problem captions: override the case-study paragraph defaults, no orphans */
/* problem captions match the solution principles: bold heading + standard body copy */
body.case-page main .yap-problem .yap-problem__name { margin: var(--s-7) 0 var(--s-3); font-size: var(--fs-base); font-weight: var(--fw-semi); line-height: var(--lh-snug); color: var(--ink); }
body.case-page main .yap-problem .yap-problem__why { margin: 0; font-size: var(--fs-base); line-height: var(--lh-base); text-wrap: pretty; }
/* tweet sits on the page, no figure panel */
body.case-page main .yap-tweet { display: block; padding: 0; background: none; border-radius: 0; }
body.case-page main .yap-tweet .twitter-tweet { margin: 0 !important; }
/* Feedback: equal columns, so the tweet figure fits the embed the way Acuity's setting fits the post. */
@media (min-width: 960px) {
  body.case-page[data-case] main #launch .yap-feedback { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
/* the embed adds its own top margin; line the copy up with the tweet card */
body.case-page main .yap-feedback .twitter-tweet { margin-top: 0 !important; }
body.case-page main .yap-memo video { width: 80%; height: auto; margin: 0 auto; }
/* figure titles live on the page, above the figure */
body.case-page main .yap-figtitle { margin: var(--s-8) 0 var(--s-3); font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--ink); max-width: none; }
body.case-page main .yap-figtitle + .yap-diagram { margin-top: 0; }

/* iMessage tail: one drawn shape (no masking patch), fades to the newest bubble */
.yap-bubble::after { content: ""; position: absolute; right: -7px; bottom: 0; width: 17px; height: 21px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 21'><path d='M0 0v12c0 5 4 8.5 10 9 3 .2 5.5-.3 7-1-4-1-7-4.5-7-9V0z' fill='%231b8cfb'/></svg>") no-repeat 0 0 / 100% 100%; opacity: 0; animation: 8s linear infinite; pointer-events: none; }
.yap-bubble--1::after { animation-name: yap-t1; }
.yap-bubble--2::after { animation-name: yap-t2; }
.yap-bubble--3::after { animation-name: yap-t3; }
@keyframes yap-t1 { 0%, 8% { opacity: 0; } 8.01%, 22% { opacity: 1; } 22.01%, 100% { opacity: 0; } }
@keyframes yap-t2 { 0%, 22% { opacity: 0; } 22.01%, 36% { opacity: 1; } 36.01%, 100% { opacity: 0; } }
@keyframes yap-t3 { 0%, 36% { opacity: 0; } 36.01%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .yap-bubble::after { animation: none; } .yap-bubble--3::after { opacity: 1; } }

/* Iterations: the three Figma Make directions, captioned with what the shipped design kept */

/* Bugs: the prompt I gave the agent, set as a plain note under each repro video */

/* Design: Figma boards (component library, core screens) shown edge to edge */
body.case-page main .yap-board img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
body.case-page main .yap-board + .yap-figtitle { margin-top: var(--s-7); }

/* Bugs: text and the agent prompt on the left, the repro video on the right */
@media (min-width: 960px) {
  body.case-page main .yap-bug { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-9); align-items: start; }
  body.case-page main .yap-bug .yap-bug__video { margin-top: 0; }
}
body.case-page main .yap-bug .yap-bug__text .nt-reading { max-width: none; }

/* Launch: date card + the room on top, sticker cutting + the station below */
body.case-page main .yap-launch-grid { display: flex; flex-direction: column; gap: var(--gap-media, var(--s-3)); }
body.case-page main .yap-launch__row { display: grid; gap: var(--gap-media, var(--s-3)); }
body.case-page main .yap-launch__row--top { grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr); }
body.case-page main .yap-launch__row--bottom { grid-template-columns: minmax(0, 2.35fr) minmax(0, 1fr); }
body.case-page main .yap-launch__cell { min-width: 0; border-radius: var(--r-lg); overflow: hidden; }
body.case-page main .yap-launch__cell img,
body.case-page main .yap-launch__cell video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
body.case-page main .yap-launch__row--top .yap-launch__cell { aspect-ratio: 16 / 9; }
body.case-page main .yap-launch__row--bottom .yap-launch__cell { aspect-ratio: 4 / 3; }
body.case-page main .yap-launch__row--bottom .yap-launch__cell:last-child { aspect-ratio: auto; }
@media (max-width: 760px) {
  body.case-page main .yap-launch__row--top, body.case-page main .yap-launch__row--bottom { grid-template-columns: 1fr; }
  }

/* Two hero photos side by side, directly under the cover video, same width as the cover */
body.case-page .case-cover:has(+ .yap-hero-pair) { margin-bottom: var(--gap-media, var(--s-3)); }
body.case-page .yap-hero-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-media, var(--s-3)); margin: 0 var(--case-g) clamp(var(--s-10), 7vw, var(--s-11)); }
body.case-page .yap-hero-pair img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); }
@media (max-width: 760px) { body.case-page .yap-hero-pair { grid-template-columns: 1fr; } }
/* The Demo Day video takes the date card's slot; it fills the row height beside the room photo */
body.case-page main .yap-launch__row--top .yap-launch__cell--video { aspect-ratio: auto; }
@media (max-width: 760px) { body.case-page main .yap-launch__row--top .yap-launch__cell--video { aspect-ratio: 4 / 5; } }

/* Iterations: tabbed figure, panels stacked in one cell so the height never jumps */
body.case-page main .yap-it__tabs { display: inline-flex; gap: var(--s-1); padding: var(--s-1); margin-bottom: var(--s-4); border-radius: var(--r-pill); background: rgba(236, 238, 241, .7); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05); }
body.case-page main .yap-it__tab { border: 0; padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); background: none; font: inherit; font-size: var(--fs-base); color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
/* The selected tab is a design-system glass pill (css/glass.css); the others stay flat text */
body.case-page main .yap-it__tab { position: relative; }
body.case-page main .yap-it__tab.glass { background: var(--glass-bg), rgba(255, 255, 255, .55); color: var(--ink); }
body.case-page main .yap-it__tab:focus:not(:focus-visible) { outline: none; }
body.case-page main .yap-it__panels { display: grid; }
body.case-page main .yap-it__panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .25s ease; }
body.case-page main .yap-it__panel.is-active { opacity: 1; visibility: visible; }
body.case-page main .yap-it__panel > img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); background: var(--surface); }
body.case-page main .yap-it__shipped { border-radius: var(--r-lg); }
@media (max-width: 560px) { body.case-page main .yap-it__tabs { display: flex; overflow-x: auto; } body.case-page main .yap-it__tab { white-space: nowrap; } }

/* Prompt to the agent, as a terminal window */
body.case-page main .yap-term { margin-top: var(--s-6); border-radius: var(--r-md); overflow: hidden; background: #16171a; box-shadow:var(--shadow-float); }
body.case-page main .yap-term__bar { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); background: #222326; }
body.case-page main .yap-term__bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a3b3f; }
body.case-page main .yap-term__bar span { margin-left: var(--s-2); font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #8b8d93; }
body.case-page main .yap-term__body { padding: var(--s-5) var(--s-5) var(--s-5); font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: #c9ccd2; }
body.case-page main .yap-term__body p { margin: 0 0 var(--s-2); max-width: none; font: inherit; color: inherit; }
body.case-page main .yap-term__body p:last-child { margin-bottom: 0; }
body.case-page main .yap-term__cmd { color: #f2f3f5 !important; }
body.case-page main .yap-term__ps { color: #8b939c; margin-right: var(--s-3); }
body.case-page main .yap-term code { font: inherit; padding: 0; background: none; color: #9cc8ff; }
body.case-page main .yap-term__caret { display: inline-block; width: 8px; height: 15px; vertical-align: -3px; background: #c9ccd2; animation: yap-caret 1.1s steps(1) infinite; }
@keyframes yap-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body.case-page main .yap-term__caret { animation: none; } }
body.case-page main .yap-term .yap-term__body p { color: #c9ccd2 !important; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace !important; letter-spacing: 0; }
body.case-page main .yap-term .yap-term__body p.yap-term__cmd { color: #f2f3f5 !important; }

/* AI step: the three design calls under the pipeline figure */
body.case-page main .yap-calls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); margin-top: var(--s-8); }
body.case-page main .yap-call h4 { margin: 0 0 var(--s-3); font-size: var(--fs-base); font-weight: var(--fw-semi); line-height: var(--lh-snug); color: var(--ink); }
body.case-page main .yap-call p { margin: 0; font-size: var(--fs-base); line-height: var(--lh-base); }
body.case-page main .yap-call .yap-call__num { margin: 0 0 var(--s-3); font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: var(--label-ls); color: var(--muted); }
body.case-page main .yap-call code { font-size: .9em; }
body.case-page main .yap-calls + .yap-figtitle { margin-top: var(--s-10); }
@media (max-width: 759px) { body.case-page main .yap-calls { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }

/* Live demo: reads as something to use, not another recording */
.yap-demo__tap { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: rgba(28, 31, 36, .08); cursor: pointer; transition: background .25s ease; }
.yap-demo__tap:hover { background: rgba(28, 31, 36, .16); }
.yap-demo__tap:disabled { display: none; }
.yap-demo__tap-pill { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-5) var(--s-3) var(--s-4); border-radius: var(--r-pill); background: var(--ink); color: var(--surface); font: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium); white-space: nowrap; box-shadow:var(--shadow-float); transition: transform .25s cubic-bezier(.3, 1.4, .6, 1); }
.yap-demo__tap-pill svg { width: 18px; height: 18px; }
.yap-demo__tap-pill::before { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid rgba(28, 31, 36, .35); animation: yap-demo-ping 1.8s ease-out infinite; }
.yap-demo__tap:hover .yap-demo__tap-pill { transform: scale(1.05); }
@keyframes yap-demo-ping { from { transform: scale(.94); opacity: 1; } to { transform: scale(1.18); opacity: 0; } }
.yap-demo { cursor: default; }
@media (prefers-reduced-motion: reduce) { .yap-demo__tap-pill::before { animation: none; } }
body.case-page main .yap-calls--principles { margin: var(--s-9) 0 var(--s-11); }

/* Reflection: two takeaways, the people side and the model side */
body.case-page main .yap-takeaways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-9); max-width: none; align-items: start; }
body.case-page main .yap-takeaways .ntf-takeaway-line { max-width: none; }
@media (max-width: 759px) { body.case-page main .yap-takeaways { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); } }

/* Standard figure background: the dotted panel every diagram sits on */
body.case-page main :is(.yap-board--inset, .yap-it__frame, .yap-board-pair__cell img, .yap-card.yap-step) { background: var(--fig-bg) radial-gradient(var(--fig-dot) .6px, transparent .9px) 0 0 / 10px 10px; border-radius: var(--r-lg); }

/* Solution: the three steps as cards, each phone rising out of its card */
body.case-page main .yap-card.yap-step { display: flex; justify-content: center; align-items: center; aspect-ratio: 4 / 5.8; padding: 7% 0; }
body.case-page main .yap-step img { display: block; width: auto; height: 100%; max-width: 88%; object-fit: contain; border-radius: 0 !important; filter: drop-shadow(0 18px 28px rgba(28, 31, 36, .16)); }
@media (max-width: 760px) { body.case-page main .yap-card.yap-step { aspect-ratio: 4 / 5.2; } }

/* Iterations: each direction on the figure background */

/* Design: sub-steps as subheads; onboarding and core screens side by side at equal height */
body.case-page main .nt-step > h3.yap-subhead { margin: var(--s-10) 0 0; font-size:var(--fs-lg); line-height: var(--lh-tight); letter-spacing: var(--h2-ls); }
body.case-page main .nt-step > h3.yap-subhead + .nt-media { margin-top: var(--s-5); }
/* full-bleed Figma screenshots: the image is the whole 16:9 figure */
body.case-page main .yap-board--full img { aspect-ratio: 16 / 9; object-fit: cover; }

/* Join: five steps in the strip */
body.case-page main .yap-join .strip .mini.phone { width: 13.6cqw; }

/* Testing: the virtual session beside the in-person video, at equal height */
body.case-page main .yap-test-pair { display: grid; grid-template-columns: minmax(0, .5625fr) minmax(0, .5625fr) minmax(0, 1.3229fr); gap: var(--gap-media, var(--s-3)); align-items: start; }
body.case-page main .yap-test-pair img { display: block; width: 100%; height: auto; aspect-ratio: 2540 / 1920; object-fit: cover; border-radius: var(--r-lg); }
body.case-page main .yap-test-pair__cell > p.nt-kicker { margin: var(--s-4) 0 0; text-align: center; max-width: none; }
body.case-page main .yap-test-pair__video { aspect-ratio: 720 / 1280; }
body.case-page main .yap-test-pair__video > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { body.case-page main .yap-test-pair { grid-template-columns: minmax(0, 1fr); } body.case-page main .yap-test-pair__cell--video { width: min(100%, 320px); } }

/* Reflection: the room and the projected screen, side by side at equal height */
body.case-page main .yap-reflect-pair { display: grid; grid-template-columns: minmax(0, 1.7778fr) minmax(0, .75fr); gap: var(--gap-media, var(--s-3)); }
body.case-page main .yap-reflect-pair img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); }
@media (max-width: 760px) { body.case-page main .yap-reflect-pair { grid-template-columns: minmax(0, 1fr); } }
/* Two paragraphs in a step heading read as two paragraphs */
body.case-page main .nt-feature-heading p + p { margin-top: var(--s-3); }

/* Iterations: every direction is a 16:9 figure, with its notes below in body copy */
body.case-page main .yap-it__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-lg); }
body.case-page main .yap-it__panel > p { margin: var(--s-5) 0 0; }
body.case-page main .yap-it__panel > p + p { margin-top: var(--s-3); }
body.case-page main .yap-it .fig.yap-it__shipped { aspect-ratio: 16 / 9 !important; height: auto; display: flex; align-items: center; justify-content: center; border-radius: var(--r-lg); }
body.case-page main .yap-it__shipped .flow { width: 100%; }
body.case-page main .nt-section > h3.yap-subhead--section { margin: var(--s-10) 0 0; font-size:var(--fs-lg); line-height: var(--lh-tight); letter-spacing: var(--h2-ls); }
body.case-page main .yap-calls--findings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-9); margin-top: var(--s-6); }
@media (max-width: 759px) { body.case-page main .yap-calls--findings { grid-template-columns: minmax(0, 1fr); } }

/* Design: every screen in one row inside the content column; drag, swipe, or scroll through */
body.case-page main .yap-rail { position: relative; }
body.case-page main .yap-rail__track { overflow-x: auto; overflow-y: hidden; border-radius: var(--r-lg); scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; }
body.case-page main .yap-rail__track::-webkit-scrollbar { display: none; }
body.case-page main .yap-rail__track.is-dragging { cursor: grabbing; }
body.case-page main .yap-rail__inner { position: relative; width: max-content; }
body.case-page main .yap-rail__inner img { display: block; height: clamp(380px, 38vw, 540px); width: auto; max-width: none; border-radius: 0 !important; user-select: none; -webkit-user-drag: none; }
/* Screen rail: every phone screen in one scrolling row on the figure background, each with a numbered caps label.
   One component on Yap and Neuk: .yap-rail.screen-rail > … > .screen-rail__item (img + .screen-rail__label). */
body.case-page main .screen-rail .yap-rail__track { background: var(--fig-bg) radial-gradient(var(--fig-dot) .6px, transparent .9px) 0 0 / 10px 10px; }
body.case-page main .screen-rail .yap-rail__inner { display: flex; align-items: flex-start; gap: clamp(var(--s-3), 1.2vw, var(--s-4)); padding: clamp(var(--s-7), 3.4vw, var(--s-9)) clamp(var(--s-6), 3.4vw, var(--s-9)) clamp(var(--s-5), 2.4vw, var(--s-7)); }
body.case-page main .screen-rail__item { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; }
body.case-page main .screen-rail .yap-rail__inner .screen-rail__item img { height: clamp(300px, 30vw, 440px); width: auto; border-radius: 12.4% / 5.7% !important; box-shadow: var(--shadow-float); }
body.case-page main .screen-rail__label { margin-top: clamp(var(--s-4), 1.6vw, var(--s-6)); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: var(--lh-snug); letter-spacing: var(--label-ls); color: var(--ink); white-space: nowrap; }
body.case-page main .screen-rail__label span { margin-right: .6em; color: var(--muted); }

/* Iterations: what testing showed, set under each figure in two (or four) short notes */
body.case-page main .yap-it__notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-8); margin-top: var(--s-6); }
body.case-page main .yap-it__notes--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.case-page main .yap-it__notes p { margin: 0; }
body.case-page main .yap-it__notes .yap-it__tag { margin: 0 0 var(--s-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--label-ls); text-transform: uppercase; color: var(--muted); }
@media (max-width: 559px) { body.case-page main .yap-it__notes, body.case-page main .yap-it__notes--four { grid-template-columns: minmax(0, 1fr); } }
/* Carousel arrows: the About slideshow's glass buttons, centered on the figure's edges */
body.case-page main .yap-rail__btn { position: absolute; top: 50%; z-index: 3; width: 3rem; height: 3rem; margin-top: -1.5rem; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--ink); cursor: pointer; transition: all 0.4s var(--glass-ease), --glass-angle-1 0.5s var(--glass-ease), opacity .2s ease; }
body.case-page main .yap-rail__btn svg { width: 1.25rem; height: 1.25rem; display: block; fill: currentColor; }
body.case-page main .yap-rail__btn--prev { left: -1.5rem; }
body.case-page main .yap-rail__btn--next { right: -1.5rem; }
body.case-page main .yap-rail__btn:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 759px) { body.case-page main .yap-rail__btn--prev { left: -.75rem; } body.case-page main .yap-rail__btn--next { right: -.75rem; } }
/* Shipped tab: larger phones, still inside the 16:9 frame with their labels */
body.case-page main .yap-it__shipped .strip .mini.phone { width: 20.5cqw; }

/* Feedback tweet in a dotted figure frame, like the forage/acuity Instagram embeds */
body.case-page main .yap-tweet { display: block; padding: var(--s-6) var(--s-4); border-radius: var(--r-lg); background: var(--fig-bg) radial-gradient(var(--fig-dot) .6px, transparent .9px) 0 0 / 10px 10px; }
body.case-page main .yap-tweet .twitter-tweet { width: 100% !important; max-width: 420px !important; margin: 0 auto !important; }
body.case-page main .yap-tweet blockquote.twitter-tweet { padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); background: var(--surface); font-size: var(--fs-base); }

/* Problem cards: contents scale with the card (sized off its height), so the
   tiles, bubbles and memo keep the same proportions at every breakpoint. */
.yap-card:is(.yap-call, .yap-text, .yap-memo) { container-type: size; }
.yap-call .yap-call__tile { gap: 2.4cqh; border-radius: 3.7cqh; }
.yap-call .yap-call__tile span { font-size: 9.3cqh; }
.yap-call .yap-call__tile--k span, .yap-call .yap-call__tile--m span { font-size: 6.2cqh; }
.yap-call .yap-call__tile em { font-size: 3.4cqh; }
.yap-text .yap-bubble { font-size: 4.9cqh; padding-inline: .875em; border-radius: 1.2em; }
.yap-text .yap-bubble::after { right: -.44em; width: 1.06em; height: 1.31em; }
.yap-text .yap-bubble--1 { animation-name: yap-b1e; } .yap-text .yap-bubble--2 { animation-name: yap-b2e; } .yap-text .yap-bubble--3 { animation-name: yap-b3e; }
@keyframes yap-b1e { 0%, 8% { max-height: 0; opacity: 0; padding-block: 0; margin-top: 0; transform: scale(.4) translateY(.75em); } 13%, 88% { max-height: 4em; opacity: 1; padding-block: .5em; margin-top: .25em; transform: none; } 96%, 100% { max-height: 4em; opacity: 0; padding-block: .5em; margin-top: .25em; } }
@keyframes yap-b2e { 0%, 22% { max-height: 0; opacity: 0; padding-block: 0; margin-top: 0; transform: scale(.4) translateY(.75em); } 27%, 88% { max-height: 4em; opacity: 1; padding-block: .5em; margin-top: .25em; transform: none; } 96%, 100% { max-height: 4em; opacity: 0; padding-block: .5em; margin-top: .25em; } }
@keyframes yap-b3e { 0%, 36% { max-height: 0; opacity: 0; padding-block: 0; margin-top: 0; transform: scale(.4) translateY(.75em); } 41%, 88% { max-height: 4em; opacity: 1; padding-block: .5em; margin-top: .25em; transform: none; } 96%, 100% { max-height: 4em; opacity: 0; padding-block: .5em; margin-top: .25em; } }
body.case-page main .yap-memo video { width: min(80%, 64cqh); }
@media (prefers-reduced-motion: reduce) { .yap-text .yap-bubble { animation: none; max-height: 4em; padding-block: .5em; margin-top: .25em; } }
.yap-text .yap-text__stack { left: 50%; right: auto; width: 64cqh; transform: translateX(-50%); }
/* Iterations: what each direction asked for, full width above the two takeaways */
/* Direction tabs: prompt, what resonated, what didn't, side by side */
body.case-page main .yap-it__notes:has(> .yap-it__brief) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-8); }
@media (max-width: 759px) { body.case-page main .yap-it__notes:has(> .yap-it__brief) { grid-template-columns: minmax(0, 1fr); } }
body.case-page main .yap-bug__still > img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }

/* ── Prompt windows: traffic lights collapse and expand (js/yap-term.js) ── */
body.case-page main .yap-term__bar { cursor: pointer; user-select: none; }
body.case-page main .yap-term__lights { display: flex; gap: var(--s-2); margin-left: 0; }
body.case-page main .yap-term__light { position: relative; width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; background: #3a3b3f; cursor: pointer; transition: background-color .15s; }
body.case-page main .yap-term__light::before { content: ""; position: absolute; inset: -5px; }   /* larger hit area */
body.case-page main .yap-term__bar:hover .yap-term__light--close, body.case-page main .yap-term__light--close:focus-visible { background: #ff5f57; }
body.case-page main .yap-term__bar:hover .yap-term__light--min, body.case-page main .yap-term__light--min:focus-visible { background: #febc2e; }
body.case-page main .yap-term__bar:hover .yap-term__light--max, body.case-page main .yap-term__light--max:focus-visible { background: #28c840; }
body.case-page main .yap-term__light:focus-visible { outline: 2px solid #8b8d93; outline-offset: 2px; }
body.case-page main .yap-term__title { margin-left: var(--s-2); font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #8b8d93; }
body.case-page main .yap-term__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .35s cubic-bezier(.65, 0, .35, 1); }
body.case-page main .yap-term__panel > .yap-term__body { min-height: 0; overflow: hidden; }
body.case-page main .yap-term.is-collapsed .yap-term__panel { grid-template-rows: 0fr; }
body.case-page main .yap-term.is-collapsed .yap-term__panel > .yap-term__body { padding-top: 0; padding-bottom: 0; }
body.case-page main .yap-term__panel > .yap-term__body { transition: padding .35s cubic-bezier(.65, 0, .35, 1); }
@media (prefers-reduced-motion: reduce) { body.case-page main :is(.yap-term__panel, .yap-term__panel > .yap-term__body) { transition: none; } }

/* "One topic change, cut two ways": the pause between two topics, up close (1920×1080 .fig, sizes in cqw).
   Accent is yap's blue, already used on the page. The guess is a deeper step of that same blue. */
.fig.ycut { --accent: #1b8cfb; }
.fig.ycut .ycut__card { position: absolute; inset: 9% 5%; display: flex; overflow: hidden; border-radius: calc(var(--fig-r) * 3); background: var(--surface); box-shadow: var(--shadow-raise); }
.fig.ycut .ycut__zone { position: relative; flex: 1; }
.fig.ycut .ycut__zone--a { flex-grow: 1.45; background: var(--surface-2); }
.fig.ycut .ycut__zone--b { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.fig.ycut .ycut__gap { position: relative; z-index: 1; flex: none; width: 9%; }
.fig.ycut .ycut__lab { position: absolute; top: 9%; left: 7%; margin: 0; font-size: 2.1cqw; font-weight: var(--fw-semi); line-height: var(--lh-tight); color: var(--ink); }
.fig.ycut .ycut__wave { position: absolute; left: 7%; right: 7%; top: 27%; height: 46%; display: flex; align-items: center; justify-content: space-between; }
.fig.ycut .ycut__wave i { width: .62cqw; height: var(--h); border-radius: var(--r-pill); background: var(--line-strong); }
.fig.ycut .ycut__zone--b .ycut__wave i { background: var(--accent); }
/* the AI's timestamp: a dashed line that lands mid-word */
.fig.ycut .ycut__guess { position: absolute; left: 82%; top: 6%; bottom: 6%; border-left: .22cqw dashed color-mix(in srgb, var(--accent) 62%, var(--ink)); border-width: 0 0 0 .22cqw !important; }
.fig.ycut .ycut__pill { position: absolute; transform: translateX(-50%); padding: .65cqw 1.5cqw; border-radius: var(--r-pill); font-size: 1.45cqw; font-weight: var(--fw-semi); line-height: var(--lh-none); white-space: nowrap; color: var(--surface); }
.fig.ycut .ycut__pill--guess { left: 82%; bottom: 9%; background: color-mix(in srgb, var(--accent) 62%, var(--ink)); }
/* yap's cut sits in the silence between the two words */
.fig.ycut .ycut__gap::before { content: ""; position: absolute; left: -6%; right: -6%; top: 50%; border-top: .2cqw dotted var(--line-strong); border-width: .2cqw 0 0 !important; }
.fig.ycut .ycut__pause { position: absolute; left: 50%; top: 35%; transform: translateX(-50%); font-size: 1.35cqw; color: var(--muted); }
.fig.ycut .ycut__cut { position: absolute; left: 50%; top: 42%; bottom: 6%; width: .22cqw; margin-left: -.11cqw; background: var(--ink); }
.fig.ycut .ycut__pill--cut { left: 50%; top: 66%; background: var(--ink); }

body.case-page main .yap-test-pair__placeholder { aspect-ratio: 720 / 1280; display: grid; place-items: center; background: var(--fig-bg); border-radius: var(--r-lg); color: var(--muted); font-size: var(--fs-base); }
body.case-page main #testing .yap-term__body,
body.case-page main #testing .yap-term .yap-term__body p { font-family: var(--ff-mono) !important; font-size: var(--fs-xs) !important; font-weight: var(--fw-regular) !important; line-height: var(--lh-base) !important; }