/* Creatify case study. Shared pieces (fonts, cursor, nav pill, sidebar, footer)
   are copied from knouri/style.css; page styles start at 'CREATIFY CASE STUDY'. */

/* THESE MUST BE FIRST — nothing above them */
@import url("https://fonts.googleapis.com/css2?family=Xanh+Mono:ital@0;1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap");

html, body {
  background: #ffffff !important;
}

#page-entry-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #fffcf8;
  pointer-events: all;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://cdn.jsdelivr.net/gh/melodysz/baubles@main/fonts/ppneuemontreal-thin.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://cdn.jsdelivr.net/gh/melodysz/baubles@main/fonts/ppneuemontreal-book.woff2') format('woff2');
  font-weight: 400; /* keep 400 so browser uses it as default */
  font-style: normal;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://cdn.jsdelivr.net/gh/melodysz/baubles@main/fonts/ppneuemontreal-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://cdn.jsdelivr.net/gh/melodysz/baubles@main/fonts/ppneuemontreal-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://cdn.jsdelivr.net/gh/melodysz/baubles@main/fonts/ppneuemontreal-thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
}

/* (no regular SemiBold file exists, only SemiBold Italic, so weight 600 uses Bold) */

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://cdn.jsdelivr.net/gh/melodysz/baubles@main/fonts/ppneuemontreal-italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "SD Georgia Light";
  src: url("https://cdn.jsdelivr.net/gh/melodysz/baubles@main/SdGeorgiaLight-pMj1.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: default !important;
}

a, button, [role="button"] {
  cursor: pointer !important;
}

:root {
  --bg-cream: #FFFFFF;
  --nav-orange: #89BD00;
  --text-dark: #1D1D1F;
  --wide-margin: 270px;
  --narrow-margin: 50px;
  --sidebar-width: 200px;
  --spacing-100: 100px;
}

body {
  background-color: var(--bg-cream);
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: visible;
    cursor: none !important;
    -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


body, html {
  margin: 0;
  padding: 0;
}

.cursor-dot {
  width: 14px;
  height: 14px;
  background-color: #89BD00;
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10001;
  mix-blend-mode: normal; /* remove difference so color stays green */
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease, 
              width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
              height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-radius 0.5s ease;
  will-change: transform;
}

.cursor-dot.active {
  opacity: 1;
}

/* over big clickable things (folded research cards, screenshots): the dot just grows.
   Over a screenshot that opens full size, it also shows the eye from "See all". (main.js) */
.cursor-dot.is-big { width: 56px; height: 56px; }
.cursor-dot.is-zoom::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 24px;
  height: 24px;
  background: #fff;
  -webkit-mask: url(icons/eye.svg) center / contain no-repeat;
  mask: url(icons/eye.svg) center / contain no-repeat;
}
.cursor-dot.active.is-zoom { opacity: 0.85; }

.cursor-dot.is-blob {
  width: var(--blob-w, 80px);
  height: var(--blob-h, 40px);
  border-radius: 999px;
  opacity: 0.7;   /* multiply: the page colour, see-through; dark text stays crisp under it */
    mix-blend-mode: multiply;

}

.bubble-particle {
  position: fixed;
  border-radius: 50%;
  background-color: var(--nav-orange);
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
}

/* ================================
   NEW PILL NAV
   ================================ */

.nav-pill-wrap {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* match .content-column-outer: max 1400px minus 80px total padding */
  width: min(1320px, calc(100vw - 80px));
  /* add padding + negative margin to expand hit area without shifting layout */
  padding: 20px 0 30px 0; /* 20px above, 30px below */
  margin-top: -20px;
  pointer-events: auto;
  transition: opacity 0.4s ease;
}

.nav-pill-wrap.nav-hidden {
  opacity: 0;
  pointer-events: none;
}

.nav-pill {
  position: relative;
  height: 52px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.30); /* was 0.60 */
  border: 1px solid rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  /* Figma drop shadow: X0 Y0 Blur2 Spread0 #000000 25% */
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25), inset 0 0.5px 0 rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  overflow: visible;
  /* collapsed = just the asterisk circle */
  width: 52px;
  transition: width 0.55s cubic-bezier(0.32, 0, 0.08, 1);
  cursor: pointer;
  white-space: nowrap;
  pointer-events: none;
}

.nav-pill.expanded {
  /* fill full wrap width */
  width: 100%;
}

/* Asterisk treated as a centered object, not inline text */
.nav-asterisk {
  font-family: 'Xanh Mono', monospace;
  font-style: italic;
  font-size: 36px;
  /* remove line-height influence — treat as a flex object */
  line-height: 0;
  color: #181812;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  user-select: none;
  text-decoration: none;
  /* nudge slightly for optical centering of * glyph */
  padding-top: 2px;
    pointer-events: auto;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  padding-right: 20px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease 0.5s, transform 0.3s ease 0.5s; /* delay increased from 0.22s to 0.5s */
  pointer-events: none;
  min-width: 0;
}

.nav-pill.expanded .nav-content {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}



.nav-wordmark {
  color: #181812;
  display: flex;
  align-items: baseline;
  flex-shrink: 0;
  user-select: none;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.nav-pill.expanded .nav-wordmark {
  opacity: 1;
  transition: opacity 0.25s ease 0.45s;
}

.nav-wordmark:hover {
  opacity: 0.65;
}

.wm-melody {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #181812;
}

.wm-zhang {
  font-family: 'Xanh Mono', monospace;
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: #181812;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative; /* ADD THIS */
}



.nav-link-item {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #181812;
  text-decoration: none;
  letter-spacing: 0.01em;
  position: relative;
  padding: 6px 16px;
  border-radius: 999px;
  background: transparent;
  z-index: 1;
  opacity: 0;
  transform: translateX(-10px);
  transition: color 0.25s ease, opacity 0.3s ease, transform 0.3s ease, text-shadow 0.4s ease;
    text-shadow: 0 0 0px transparent; /* explicit start state for smooth transition */
  min-width: 80px;
  text-align: center;
}

.nav-link-item:hover {
  color: #181812;
}

.nav-link-item {
  overflow: hidden;
}

a[href],
button,
[role="button"],
.interactable,
.nav-link-item,
.nav-wordmark,
label {
  cursor: pointer !important;
}

.nav-wordmark,
.nav-wordmark *,
.wm-melody,
.wm-zhang {
  cursor: pointer !important;
  pointer-events: auto !important;
}

* {
  cursor: default !important;
}

a[href], button, [role="button"], .interactable {
  cursor: pointer !important;
}

.nav-wordmark:hover .wm-melody,
.nav-wordmark:hover .wm-zhang {
  color: #181812;
}

.wm-melody, .wm-zhang {
  transition: color 0.25s ease;
}

.nav-pill.expanded .nav-link-item:nth-child(1) {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.3s ease 0.55s, transform 0.3s ease 0.55s, color 0.25s ease;
}

.nav-pill.expanded .nav-link-item:nth-child(2) {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.3s ease 0.68s, transform 0.3s ease 0.68s, color 0.25s ease;
}

.nav-pill.expanded .nav-link-item:nth-child(3) {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.3s ease 0.81s, transform 0.3s ease 0.81s, color 0.25s ease;
}

/* collapsed state — slide them back left */
.nav-link-item {
  transform: translateX(-10px);
}


/* Replace your existing asteriskSpin keyframes and spin-once with these: */

.nav-asterisk img {
  display: block;
}

/* footer color override for nav pill */
.nav-pill.footer-mode {
  background: rgba(209, 255, 164, 0.20);
  border-color: rgba(209, 255, 164, 0.25);
}

.nav-pill.footer-mode .nav-asterisk,
.nav-pill.footer-mode .wm-melody,
.nav-pill.footer-mode .wm-zhang,
.nav-pill.footer-mode .nav-link-item {
  color: #D1FFA4;
}




/* ================================
   SIDEBAR NAV
   ================================ */

.sidebar-nav {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--sidebar-width);
  padding: 3rem 1.5rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.nav-sections {
  list-style: none;
  flex-grow: 1;
}

.nav-item {
  margin-bottom: 10px;
}

.nav-link {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--text-dark);
  text-decoration: none;
  text-transform: lowercase;
  letter-spacing: -0.03em;
  display: block;
  padding: 0.3rem 0;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: var(--nav-orange);
}

.nav-item.active > .nav-link {
  color: var(--nav-orange);
  font-weight: 400;
}

.nav-subsections {
  list-style: none;
  padding-left: 1rem;
  margin-top: 0.5rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.nav-item.active .nav-subsections {
  max-height: 300px;
}

.nav-subsections a {
  font-size: 0.8rem;
  color: #8b6f6d;
  text-decoration: none;
  display: block;
  padding: 0.25rem 0;
  transition: color 0.3s ease;
}

.nav-subsections a:hover {
  color: var(--nav-orange);
}

.nav-subsections a.active {
  color: var(--nav-orange);
  font-weight: 400;
}

.sidebar-nav {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.sidebar-nav.visible {
  opacity: 1;
  pointer-events: auto;
}


/* ================================
   HERO
   ================================ */

.hero-section {
  width: 100vw;
  height: auto;
  margin: 0;
  padding: 0;
  position: fixed;
  top: -20px;
  left: 0;
  z-index: 1;
}

.hero-image {
  width: 100%;
  height: 80vh;
  display: block;
  object-fit: cover;
  object-position: top center;
  border-radius: 0 0 30px 30px;
  background-color: var(--bg-cream);
  opacity: 0;
  transform: translateY(20px);
}

.overview-section {
  padding-top: 20px !important;
}

.main-content {
  position: relative;
  background: var(--bg-cream);
  width: 100vw;
  max-width: none;
  margin: 84vh auto 0 auto;
  min-height: 100vh;
  padding-bottom: 100vh;
  padding-top: 40px;
  z-index: 100;
  overflow: visible;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.content-section {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--spacing-100);
  padding-top: 80px;
  overflow: visible;
}


.content-column {
  max-width: 960px;
  margin: 0 auto;
  padding-left: 80px;
  padding-right: 80px;
}


.image-modal {
  display: none;
  position: fixed;
  z-index: 10002;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
}

.image-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
}

.modal-close:hover {
  opacity: 0.7;
}

#research {
  margin-bottom: 0;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.case-footer {
  position: relative;
  background: linear-gradient(to bottom, #000000 0%, #2D6913 50%, #A2B838 100%);
  color: #D1FFA4;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  overflow: hidden;
  margin-top: 80px;
  margin-bottom: -100vh;
}

.case-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
}

.case-footer-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
}

.case-footer-tagline {
  font-family: "SD Georgia Light", Georgia, serif;
  font-weight: 400;
  font-size: 50px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0;
  color: #D1FFA4;
}

.case-footer-helv {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 50px;
  text-transform: lowercase;
  color: #D1FFA4;
  letter-spacing: -0.03em;
}

.case-footer-italic {
  font-family: "Xanh Mono", monospace;
  font-style: italic;
  font-size: 50px;
  letter-spacing: -0.1em;
  color: #D1FFA4;
}

.case-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

.case-footer-links a {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #D1FFA4;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: opacity 0.3s ease;
}

.case-footer-links a:hover {
  opacity: 0.6;
}

.case-footer-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
}

.case-footer-left {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.case-footer-signature {
  font-family: "Alex Brush", cursive;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: #D1FFA4;
}

.case-footer-copy {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #D1FFA4;
}

.case-footer-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.case-footer-right a {
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: #D1FFA4;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: opacity 0.3s ease;
}

.case-footer-right a:hover {
  opacity: 0.6;
}

.case-footer-star-wrapper {
  width: 80px;
  height: 80px;
  margin-bottom: 1rem;
  opacity: 0;
  transform: scale(0);
  margin: 0 auto;
  will-change: transform, opacity;
  pointer-events: none;
}

#case-footer-star-icon {
  transform-origin: center center;
  display: block;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.stamp-card.fade-in-element {
  transition-delay: 0.4s;
}

.stamp-card.fade-in-element:nth-child(2) {
  transition-delay: 0.55s;
}

.stamp-card.fade-in-element:nth-child(3) {
  transition-delay: 0.7s;
}

.hero-section {
  background: linear-gradient(90deg, #f0ebe8 25%, #e8e0dc 50%, #f0ebe8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.hero-image {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hero-image.loaded {
  opacity: 1;
}

.hero-section.image-loaded {
  animation: none;
  background: transparent;
}

#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  /* the full gradient always stretches across the bar, whatever its length */
  background: linear-gradient(to right, #FFEAF2, #D8EE9F);

  border-radius: 0 999px 999px 0; /* rounded on the right end only */
  z-index: 99999;
  pointer-events: none;
  transition: width 0.1s linear, height 0.3s ease;
}


@font-face {
  font-family: 'HafferXH';
  src: url('https://cdn.jsdelivr.net/gh/melodysz/baubles@main/fonts/HafferXHMono-TRIAL-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

.nav-work-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.work-bubble {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  top: 0;
  left: 0;
}
/* (sized in main.js: from the bottom of "work" down to the dropdown; only catches the
   mouse while the dropdown is open, since it inherits the bubble's pointer-events) */
.bubble-bridge { position: absolute; left: 0; pointer-events: inherit; }

.bubble-dot {
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25), inset 0 0.5px 0 rgba(255, 255, 255, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.18);
  position: absolute;
  opacity: 0;
}

.bubble-dot-sm  { width: 11px;  height: 11px;  left: 33px; top: -25px; z-index: 2; }
.bubble-dot-md  { width: 16px; height: 16px; left: 10px;  top: -16px;  z-index: 2; }
.bubble-dot-lg  { width: 22px; height: 22px; left: -2px; top: 10px;  z-index: 2; }

.bubble-menu {
  position: absolute;
  top: 7px;   /* tucked up so it overlaps the large thought bubble */
  left: 0px;
  background: rgba(255, 255, 255, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25), inset 0 0.5px 0 rgba(255, 255, 255, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.18);
  border-radius: 40px;
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  white-space: nowrap;
  opacity: 0;
  transform-origin: top left;
  z-index: 0;
}

.bubble-item {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: #181812;
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 12px;
  line-height: 1.5;
  transition: opacity 0.2s ease;
  cursor: pointer !important;
}

.bubble-num {
  font-family: 'HafferXH', monospace;
  font-weight: 100;
  font-size: 18px;
  letter-spacing: -0.03em;
  color: #181812;
  min-width: 20px;
}

.nav-pill.footer-mode ~ .work-bubble .bubble-dot,
.nav-pill.footer-mode ~ .work-bubble .bubble-menu {
  background: rgba(209, 255, 164, 0.15);
  border-color: rgba(209, 255, 164, 0.20);
}

.nav-pill.footer-mode ~ .work-bubble .bubble-item { color: #D1FFA4; }

.bubble-dots-wrap {
  position: fixed;
  pointer-events: none;
  z-index: 10002;
  top: 0;
  left: 0;
}


/* ================================
   HERO TITLE — one font: upright Instrument Serif
   (replaces the old mix of Xanh Mono italic + PP Neue Montreal; the small
   raised asterisk keeps its size and position, just in the new font)
   ================================ */
.hero-title,
.hero-title span,
.hero-title span[class] { /* [class] makes this outrank the old per-letter font rules */
  font-family: 'Instrument Serif', serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.03em;
  -webkit-text-stroke: 0;
  margin-left: 0;
}

/* the hover bubble on a dark background (e.g. the footer): no blend there — just
   the plain see-through bubble ("multiply" would turn it almost black) */
.cursor-dot.is-blob.on-dark { mix-blend-mode: normal; opacity: 0.35; }

/* work dropdown: the case study you're on is shown in this page's activated colour */
.bubble-item.is-current,
.bubble-item.is-current .bubble-num { color: var(--nav-orange); }

/* ==========================================================================
   CREATIFY CASE STUDY
   Everything below is specific to this page. Layout comes from the Figma frame
   "Creatify — Layout Draft" (1470 wide): sections are 1380 wide with a 45px
   gap to the screen edge, and the column inside is 1120 wide. Text and pills
   are scaled down ~15–20% from the Figma sizes, which read too big on screen.
   ========================================================================== */

@font-face {
  font-family: 'HafferXH';
  src: url('../fonts/HafferXHMono-TRIAL-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}

:root {
  --cf-body-size: 17px;           /* all body text: section paragraphs, overview, cards */
  --cf-body-line: 28px;
  --cf-space: 150px;              /* space between sections (Figma: 150) */
  --cf-card-gap: var(--cf-space); /* every section is the same 150px from the next */
  --cf-card-pad: 110px;           /* inner top/bottom padding of the grey boxes */
  --nav-orange: #6F68FF;          /* this page's "active" colour (sidebar, work menu, cursor) */
  --cf-ink: #1E1C1D;
  --cf-gray: #5C5C61;
  --cf-accent: #7354F2;           /* small mono labels */
  --cf-icon: #6F68FF;             /* icons + title asterisk */
  --cf-card: #F5F5F7;
  --cf-lilac: #D6C9FF;
  --cf-line: #D4D4D4;             /* pill outline (Figma: 0.5px #D9D9D9 + a faint 2px shadow) */
  --cf-gutter: 45px;              /* space between a section's edge and the screen edge */
}

/* ---------- site chrome in this page's colours ---------- */

.cursor-dot { background-color: var(--nav-orange); }


#scroll-progress { background: linear-gradient(to right, #E7A0FE, #6F68FF); }

/* The nav is a see-through white pill. Over the black hero that turns muddy
   grey, so while it's over the hero it gets more white and more blur. */
.nav-pill,
.bubble-menu,
.bubble-dot {
  transition: width 0.55s cubic-bezier(0.32, 0, 0.08, 1), background-color 0.35s ease, border-color 0.35s ease;
}

/* Nav (+ its work dropdown and thought-bubble dots): frosted like the overview
   pills, not glossy. White 70%, plain background blur, no outline or shine,
   a tiny shadow (Figma: y1 blur1 25%). */
.nav-pill,
.bubble-menu,
.bubble-dot {
  background-color: rgba(255, 255, 255, 0.7);
  border-color: transparent;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

/* over the black hero: a little more white so it doesn't turn grey */
body.nav-over-dark .nav-pill,
body.nav-over-dark .bubble-menu,
body.nav-over-dark .bubble-dot {
  background-color: rgba(255, 255, 255, 0.8);
}

/* over the footer: keep its lime tint */
.nav-pill.footer-mode {
  background-color: rgba(209, 255, 164, 0.20);
}

/* ---------- hero: full-width product shot, fixed behind the page ---------- */

/* --hero-h is set in main.js: the hero's natural height (761/1470 of the width),
   shrunk when needed so the title, summary and tags always fit on screen at the top */
.hero-section {
  top: 0;
  height: var(--hero-h, min(51.77vw, 100vh));
  background: #090A0A;
  animation: none;
}

.hero-image {
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  border-radius: 0;
  background: #090A0A;
}

/* the purple outline, built in CSS so it's easy to adjust
   (Figma: 1px #6F68FF, radius 25, 15px in from the edges).
   EXPLORING: hidden for now (the hero washes out into white at the bottom instead).
   To bring it back, delete the "display: none" line below. */
.hero-border {
  display: none;
  position: absolute;
  inset: 15px 15px 16px;
  border: 1px solid #6F68FF;
  border-radius: 25px;
  pointer-events: none;
  z-index: 2;
  will-change: opacity;
}

/* blurred copies of the hero image and border, faded in as you scroll away
   (main.js); the blur itself never changes, so it's only drawn once */
.hero-border-blur {
  filter: blur(12px);
  opacity: 0;
}

/* page fully covers the hero: stop drawing it (set in main.js) */
body.hero-covered .hero-section { visibility: hidden; }

.main-content {
  margin-top: var(--hero-h, min(51.77vw, 100vh));
  padding-top: 44px;
  border-radius: 0;
  overflow-x: clip;            /* the overview laptop runs off the screen edge, not into a sideways scroll */
}

/* ---------- title + summary + skill tags ---------- */

.cf-summary {
  max-width: 1440px;
  margin: 0 auto var(--cf-space);
  padding: 0 50px;                /* Figma: 50px inside the 1440 frame */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 96px;
  row-gap: 14px;
  align-items: start;
}

/* the title fills the left column's full height (summary text + tags); summary and tags
   stack on the right, tags right-aligned with the summary text. The title's size is fitted
   in main.js (fitTitle) so its letters run exactly from the top of the summary text to the
   bottom of the tags. */
.cf-summary-row { display: contents; }
.cf-summary .cf-title { grid-row: 1 / span 2; line-height: 1; white-space: nowrap; }

.cf-title {
  position: relative;
  flex: none;
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 72px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--cf-ink);
}

.cf-title em { font-style: italic; }

.cf-title-asterisk {
  position: absolute;
  top: 18px;
  right: 6px;
  width: 22px;
  height: 21px;
}

.cf-summary-text {
  font-size: 17px;
  line-height: 26px;
}

.cf-tags {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;      /* right edge lines up with the summary text's */
  gap: 5px;
}

.cf-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 11px;
  border-radius: 40px;
  background: #fff;
  border: 1px solid var(--cf-line);
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: var(--cf-ink);
  white-space: nowrap;
}

/* icons are the Phosphor SVGs, used as masks so CSS sets their colour */
.cf-icon {
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--cf-icon);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* ---------- shared section shell ---------- */

.cf-section {
  width: calc(100% - var(--cf-gutter) * 2);
  max-width: 1380px;
  margin: 0 auto var(--cf-card-gap);
  border-radius: 30px;
  /* white sections: no box, so no top/bottom padding; the 150px gap alone spaces them */
  /* side padding inside each section (also used by the grey panels + research cards that
     reach the section's edges); was 24–130px */
  --cf-pad-x: clamp(20px, 5vw, 72px);
  padding: 0 var(--cf-pad-x);
  scroll-margin-top: 20px;
}

.cf-section--gray { background: var(--cf-card); padding-top: var(--cf-card-pad); padding-bottom: var(--cf-card-pad); }
#research.cf-section { margin-bottom: var(--cf-card-gap); }   /* undo knouri's #research { margin-bottom: 0 } */

.cf-inner {
  max-width: 1240px;               /* (was 1120) */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.cf-eyebrow {
  font-family: 'HafferXH', monospace;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cf-accent);
}

.cf-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cf-h2 {
  font-weight: 500;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.01em;
  color: var(--cf-ink);
}

.cf-body {
  max-width: 680px;
  font-size: var(--cf-body-size);
  line-height: var(--cf-body-line);
  color: var(--cf-ink);
}

.cf-body p + p { margin-top: 14px; }
.cf-body strong { font-weight: 700; }

.cf-list {
  list-style: none;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cf-list li::before {
  content: '•';
  margin-right: 12px;
}

/* smaller heading block inside a section (label + title + text) */
.cf-sub {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cf-sub-label {
  font-family: 'HafferXH', monospace;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cf-gray);
}

.cf-h3 {
  font-weight: 500;
  font-size: 26px;
  line-height: 34px;
  color: var(--cf-ink);
}

.cf-stack { display: flex; flex-direction: column; gap: 28px; }

/* ---------- rows / grids ---------- */

.cf-row { display: grid; gap: 24px; }
.cf-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cf-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cf-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* text + image side by side (text 420 : image 636) */
.cf-split {
  display: grid;
  grid-template-columns: 420fr 636fr;
  gap: 64px;
  align-items: center;
}

/* ---------- image slots ---------- */

/* Placeholder until the real screenshot/GIF goes in: swap the whole
   <div class="cf-ph"> for an <img class="cf-media"> (or <video>) with the same
   aspect-ratio. */
.cf-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  background: #F1EFFB;
  border: 1.5px dashed #B8A8FF;
  border-radius: 20px;
  width: 100%;
}

.cf-ph-kind {
  font-family: 'HafferXH', monospace;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cf-accent);
}

.cf-ph-desc {
  max-width: 400px;
  font-size: 14px;
  line-height: 20px;
  color: var(--cf-gray);
}

.cf-media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

/* ---------- the problem: old Agent screenshot with pop-up labels ---------- */
/* problem-shot.js: as soon as the screenshot enters the screen it starts growing
   (scale, from its top edge) until it's the full section width, darkening near the
   end; then the frosted labels pop in. Nothing is pinned. .ps-stage is given the
   grown image's height up front, so the growing image never covers the text below.
   .ps-pills is always the grown image's size, so the labels are never scaled. */

.ps-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;           /* replaced by the grown height once JS runs */
}

.ps-stage.is-anim { aspect-ratio: auto; height: var(--ps-h); }

.ps-frame {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #0D0D0D;
}

.ps-stage.is-anim .ps-frame {
  inset: 0 auto auto 50%;
  width: var(--ps-w0);
  height: var(--ps-h0);
  transform-origin: 50% 0;
}

.ps-img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ps-dim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
}

.ps-pills {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* thin purple outlines around what the labels point at: each draws in while its label is
   hovered or open (problem-shot.js adds .is-on); "See all" opens them all */
.ps-marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ps-marks > * {
  fill: none;
  stroke: #6F68FF;   /* the carousel captions' purple */
  stroke-width: 1.5;   /* in the screenshot's 1280-wide units; it's shown at about that size, so ~1.5px */
  stroke-dasharray: 1 1;   /* one dash the length of the whole outline (pathLength="1"), slid in to draw it */
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.25s ease;
}
.ps-marks > .is-on { stroke-dashoffset: 0; opacity: 1; }
.ps-stage.is-list .ps-marks { display: none; }
.ps-stage:not(.is-labeled) .ps-marks { opacity: 0; transition: opacity 0.2s ease; }   /* (labels hidden: no outlines either) */
@media (prefers-reduced-motion: reduce) { .ps-marks > * { transition: opacity 0.2s ease; } }

/* hovering a label fades the others back (a filter, so it doesn't wait on the pop-in stagger delay) */
.ps-stage.is-focusing .ps-pill:not(.is-hovered) { filter: opacity(0.35); }
/* …and their outlines too (e.g. with "See all" on, only the hovered label's outline stays bright) */
.ps-stage.is-focusing .ps-marks > .is-on:not(.is-hovered) { opacity: 0.35; }

.ps-stage.is-anim .ps-pills {
  inset: 0 auto auto 50%;
  width: var(--ps-w);
  height: var(--ps-h);
  transform: translateX(-50%);
}

.ps-pill {
  position: absolute;
  /* spots come from Figma (the closed label's top-left); it's placed by its middle so
     it opens evenly up and down and the plus never moves. min()/max() keep an opened
     label inside a smaller image. */
  left: min(var(--x), calc(100% - 304px));
  top: max(80px, min(calc(var(--y) + 27.5px), calc(100% - 80px)));
  width: var(--w, 200px);
  height: var(--h, 55px);
  padding: 0;
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 40px;
  /* the frost is drawn inside the label (::after = a blurred copy of the screenshot,
     ::before = the white tint), not with backdrop-filter: Chrome's backdrop blur
     can't see the screenshot while it's scaled up, so it showed a flat grey */
  background: transparent;
  isolation: isolate;
  color: var(--cf-ink);
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 25px;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%) scale(0.6);
  transform-origin: 27px 50%;     /* pops out of the plus */
  pointer-events: none;
  /* opacity + pop use the stagger delay (--d); size reacts instantly */
  transition:
    opacity 0.3s ease var(--d, 0s),
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0s),
    width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-radius 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.25s ease;
}

.ps-stage.is-labeled .ps-pill {
  --d: calc(var(--i, 0) * 70ms);
  opacity: 1;
  transform: translateY(-50%);
  pointer-events: auto;
}

/* white tint over the frost (Figma: 70% white; lowered so the blurred screenshot shows) */
.ps-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #fff;
  opacity: 0.65;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* the frost: the screenshot (darkened like the real one) blurred, sized and placed so
   it lines up exactly with the screenshot behind the label. problem-shot.js sets
   --gx/--gy (the label's spot in the image) and --gw/--gh (the image's size). */
.ps-pill::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: calc(-1 * var(--gx, 0px));
  top: calc(50% - var(--gy, 0px));        /* labels are placed by their middle */
  width: var(--gw, 0px);
  height: var(--gh, 0px);
  background:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    url(images/problem-old-agent.webp) center / 100% 100% no-repeat;
  filter: blur(6px) brightness(1.4);      /* light blur: Figma's 30 (≈15px) smeared the thin UI text to nothing; brightened so the glass isn't dim */
  pointer-events: none;
}

.ps-icon, .ps-label, .ps-detail, .ps-eye { z-index: 2; }
.ps-pill:focus-visible { outline: 2px solid var(--nav-orange); outline-offset: 3px; }

/* circled plus, centred in the label; turns into a × when the label is open */
.ps-icon {
  position: absolute;
  left: 17px;
  top: 50%;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ps-icon::before,
.ps-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 1.5px;
  margin: -0.75px 0 0 -4.5px;
  background: currentColor;
  border-radius: 1px;
}

.ps-icon::after { transform: rotate(90deg); }
.ps-pill.is-open .ps-icon { transform: rotate(45deg); }
.ps-pill.is-open:not(.ps-see-all) { border-radius: 30px; }   /* Figma: opened labels are 30, closed ones fully round */

.ps-label,
.ps-detail {
  position: absolute;
  left: 49px;
  top: 15px;
  transition: opacity 0.2s ease;
}

.ps-label { white-space: nowrap; }
.ps-detail { width: 224px; opacity: 0; }

.ps-pill.is-open .ps-label { opacity: 0; }
.ps-pill.is-open .ps-detail { opacity: 1; transition-delay: 0.12s; }

/* "See all" / "Hide all": bottom-right corner, opens every label. Set apart from
   the labels (Figma): white outline, frost but no fill, white text, eye icon
   (open eye = See all, closed eye = Hide all), shorter (41px). */
.ps-pill.ps-see-all {
  left: min(94.59%, calc(100% - 72px));   /* its middle (Figma), so See all ↔ Hide all grows evenly both ways */
  top: auto;
  bottom: 3.1%;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  transform: translateX(-50%) scale(0.6);
  transform-origin: 50% 50%;
  transition:
    opacity 0.3s ease var(--d, 0s),
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0s),
    width 0.25s ease;
}
.ps-stage.is-labeled .ps-pill.ps-see-all { transform: translateX(-50%); }
.ps-see-all .ps-label { top: 7px; transition: none; }
.ps-see-all.is-open .ps-label { opacity: 1; }
.ps-pill.ps-see-all::before { opacity: 0; }
.ps-pill.ps-see-all::after { left: calc(50% - var(--gx, 0px)); top: calc(-1 * var(--gy, 0px)); }
.ps-pill.ps-see-all:hover::before { opacity: 0.12; }

.ps-eye {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background: currentColor;
  -webkit-mask: url(icons/eye.svg) center / contain no-repeat;
  mask: url(icons/eye.svg) center / contain no-repeat;
}
.ps-see-all.is-open .ps-eye {
  -webkit-mask-image: url(icons/eye-closed.svg);
  mask-image: url(icons/eye-closed.svg);
}

/* No scroll animation (reduced motion): the darkened image with its labels, in place */
.ps-stage.is-static .ps-dim { opacity: 0.45; }

/* Phones: labels become a list under the image */
.ps-stage.is-list { aspect-ratio: auto; }
.ps-stage.is-list .ps-frame { position: relative; inset: auto; aspect-ratio: 16 / 9; border-radius: 14px; }
.ps-stage.is-list .ps-pills {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.ps-stage.is-list .ps-pill {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  min-height: 55px;
  padding: 15px 19px 15px 49px;
  background: var(--cf-card);
  transform: none;
}
.ps-stage.is-list .ps-label,
.ps-stage.is-list .ps-detail { position: static; width: auto; }
.ps-stage.is-list .ps-detail { display: none; color: var(--cf-gray); font-weight: 400; }
.ps-stage.is-list .ps-pill.is-open .ps-label { opacity: 1; }
.ps-stage.is-list .ps-pill.is-open .ps-detail { display: block; margin-top: 4px; }
.ps-stage.is-list .ps-see-all { display: none; }
.ps-stage.is-list .ps-pill::before,
.ps-stage.is-list .ps-pill::after { display: none; }

/* ---------- cards ---------- */

.cf-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border-radius: 20px;
  background: #fff;
}

.cf-card--lilac { background: var(--cf-lilac); }
.cf-card--dark { background: var(--cf-ink); color: #fff; }
.cf-card--gray { background: var(--cf-card); }
.cf-card--tight { padding: 20px; gap: 14px; }

.cf-card-num {
  font-family: 'HafferXH', monospace;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
}

.cf-card-num--small {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--cf-gray);
}

.cf-card-title {
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

.cf-card-title--lg { font-size: 22px; line-height: 28px; }

.cf-card-text {
  font-size: var(--cf-body-size);
  line-height: var(--cf-body-line);
  color: var(--cf-gray);
}

.cf-card--dark .cf-card-text { color: #D9D9DE; }

/* ---------- pull quotes ---------- */

.cf-quote {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px 0;
  text-align: center;
  font-weight: 500;
  font-size: 30px;
  line-height: 40px;
  letter-spacing: -0.01em;
  color: var(--cf-ink);
}

.cf-caption {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-size: 15px;
  line-height: 24px;
  color: var(--cf-gray);
}

.cf-hmw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 64px clamp(24px, 8vw, 120px);
  border-radius: 30px;
  background: var(--cf-card);
  text-align: center;
}

.cf-hmw .cf-quote { padding: 0; }

/* Newer Figma type (Overview + Problem so far; Figma's Research + Design headers use
   it too): bigger mono label (Haffer Mono 18, e.g. "[01] Overview"), DM Sans title,
   18/30 body. */
.cf-head--v2 { gap: 24px; }
.cf-eyebrow--v2 {
  font-family: 'Haffer Mono', monospace;
  font-weight: 400;
  font-size: 16px;   /* design system "Subtitle" (was 18) */
  letter-spacing: 0;
}
.cf-head--v2 .cf-h2 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 50px;
  line-height: 55px;
  letter-spacing: -0.05em;
}
.cf-head--v2 .cf-body { max-width: 720px; font-size: 18px; line-height: 30px; }
.cf-head--v2 .cf-body strong { font-weight: 700; }
.cf-head--v2 .cf-list { margin-top: 16px; gap: 0; padding-left: 4px; }   /* Figma: 16 paragraph spacing, 0 between bullets */
.cf-hmw--v2 { gap: 20px; padding: 80px clamp(24px, 8vw, 120px); }
.cf-hmw--v2 .cf-quote {
  max-width: none;
  font-size: 36px;
  line-height: 46px;
  letter-spacing: -0.01em;
}
@media (max-width: 700px) {
  .cf-head--v2 .cf-h2 { font-size: 34px; line-height: 40px; }
  .cf-hmw--v2 .cf-quote { font-size: 24px; line-height: 32px; }
}

/* after the old-Agent screenshot: same space above the question as below it (the
   section gap), so it reads as its own beat instead of a caption to scroll past.
   56px = .cf-inner's gap, already there. */
#research .cf-hmw { margin-top: calc(var(--cf-space) - 56px); }   /* (the Problem's big question has its own scene: .bq-scene) */

/* Problem: Agent V1 → V2 (above the big annotated V2 screenshot). Figma: the text runs
   the full column; the two screenshots sit in a sideways-scrolling row (V2 peeks in
   from the right), each with a title, a "by" line and a date pill. */
.cf-versions { display: flex; flex-direction: column; gap: 28px; }
/* "Iterations": same type as the section titles (.cf-head--v2 .cf-h2) */
.cf-versions-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 50px;
  line-height: 55px;
  letter-spacing: -0.05em;
  color: var(--cf-ink);
}
@media (max-width: 700px) {
  .cf-versions-title { font-size: 34px; line-height: 40px; }
}
.cf-versions-text { font-size: 18px; line-height: 30px; color: var(--cf-ink); }
.cf-versions-text strong { font-weight: 700; }

/* the row: a .hl-viewport, so it swipes exactly like the highlights carousel (highlights.js);
   cards off to the side stay visible up to the screen edge, like there */
.cf-versions-viewport .hl-track { gap: 24px; }

/* Each card (Figma, Oct 4): dark, rounded, the screenshot on top (cropped from the
   bottom to 832×432) and the text below it in light colours. Where the screenshot meets
   the text, a frosted fade: Figma's progressive background blur (0 → 50, from 323px
   down) + a black gradient at 50%. The blur is made of blurred copies of the screenshot
   (a real backdrop blur shows nothing inside the swiping, transformed row). */
.cf-version {
  position: relative;
  flex: 0 0 88%;                  /* 88% of the content column (Figma was 832px; full width felt too big); text stays the same size */
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 15px;
  overflow: hidden;
  background: #0D0D0D;
  container-type: inline-size;
  /* the text rides up over the screenshot's bottom by --lift (Figma px), making the card
     shorter; the gradient + blur move up with it */
  --lift: 90;
  --fade-top: calc(363 - var(--lift) + 45);   /* Figma px from the card's top where the gradient + blur start (Figma: 323); +45 keeps more of the screenshot clear */
  --blur-end: calc(440 - var(--lift) + 30);   /* …and where the blur is full (just under the title) */
}
.cf-version-shot { position: relative; aspect-ratio: 832 / 432; overflow: hidden; }
.cf-version-shot img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  -webkit-user-drag: none;
}
/* Progressive blur: four copies of the screenshot, blurred 6 / 12 / 24 / 48px, each fading
   in a little further down: none at 323px → full by 440px (just past the screenshot's
   bottom edge; Figma's ramp runs to the card's bottom, 584px, but reads weaker).
   Each copy sits in a full-height layer, so its blur spills down past the screenshot's
   bottom edge into the dark card: the screenshot itself seems to melt into it.
   (--u = one Figma px; stops are in Figma px from the card's top.) */
.cf-version-blurs { position: absolute; inset: 0; pointer-events: none; --u: calc(100cqw / 832); }
.cf-version-blur {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--u) * var(--from)), #000 calc(var(--u) * var(--to)));
  mask-image: linear-gradient(to bottom, transparent calc(var(--u) * var(--from)), #000 calc(var(--u) * var(--to)));
}
.cf-version-blur img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(var(--u) * 432);
  object-fit: cover;
  object-position: top;
  filter: blur(var(--r));
}
/* the four copies split the ramp from --fade-top (where the gradient + blur start) to
   440 (full blur, just past the screenshot's bottom edge at 432) into even quarters */
.cf-version-blur--1 { --r: 6px;  --from: var(--fade-top); --to: calc(var(--fade-top) + (var(--blur-end) - var(--fade-top)) * 0.25); }
.cf-version-blur--2 { --r: 12px; --from: calc(var(--fade-top) + (var(--blur-end) - var(--fade-top)) * 0.25); --to: calc(var(--fade-top) + (var(--blur-end) - var(--fade-top)) * 0.5); }
.cf-version-blur--3 { --r: 24px; --from: calc(var(--fade-top) + (var(--blur-end) - var(--fade-top)) * 0.5); --to: calc(var(--fade-top) + (var(--blur-end) - var(--fade-top)) * 0.75); }
.cf-version-blur--4 { --r: 48px; --from: calc(var(--fade-top) + (var(--blur-end) - var(--fade-top)) * 0.75); --to: var(--blur-end); }
.cf-version-fade {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100cqw * var(--fade-top) / 832);
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  pointer-events: none;
}
.cf-version figcaption {
  position: relative;             /* (above the fade) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 0 30px 30px;
  margin-top: calc(-1 * var(--lift) * 100cqw / 832);   /* up over the screenshot (see --lift) */
}
.cf-version-title,
.cf-version-by {
  font-family: 'PP Neue Montreal', sans-serif;
  color: #F5F5F7;
}
.cf-version-title { font-weight: 500; font-size: 18px; line-height: 26px; }   /* (the page's body size; Figma 25) */
.cf-version-by { font-weight: 400; font-size: 16px; line-height: 22px; }       /* (Figma 18) */

/* strengths (✓) and weaknesses (✕): see-through white pills, white icons, light grey text */
.cf-version-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-version-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px 5px 9px;      /* (smaller than Figma's 8/15 · 15px text · 22px icons) */
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.3);
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  color: #D9D9D9;
}
.cf-version-tag img { display: block; width: 16px; height: 16px; filter: brightness(0) invert(1); }   /* icons in white */

/* "Deep dive into V2": same type as "Get the highlights."; extra room above it so
   the V1/V2 row and the big screenshot read as separate beats */
.cf-deep-title {
  margin-top: 64px;
  margin-bottom: -36px;           /* 56px column gap − 36 = 20px to the screenshot, same as "Get the highlights." to its carousel */
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.05em;
  text-align: center;
  color: var(--cf-ink);
}
@media (max-width: 700px) {
  .cf-deep-title { font-size: 32px; margin-top: 32px; }
}

/* ---------- flow pills (know → invoke) ---------- */

.cf-flows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px;
  border-radius: 20px;
  background: var(--cf-card);
}

.cf-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.cf-flow-label {
  width: 80px;
  font-family: 'HafferXH', monospace;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cf-gray);
}

.cf-step {
  padding: 7px 15px;
  border-radius: 40px;
  background: #fff;
  border: 1px solid var(--cf-line);
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
}

.cf-step--dark {
  background: var(--cf-ink);
  border-color: var(--cf-ink);
  color: #fff;
}

.cf-arrow { font-size: 16px; color: var(--cf-gray); }

.cf-loop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.cf-loop .cf-caption { font-size: 16px; }

/* small solid tag, e.g. "✓ Shipped" */
.cf-badge {
  align-self: flex-start;
  padding: 6px 13px;
  border-radius: 40px;
  background: var(--cf-ink);
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
}

.cf-tabs { display: flex; flex-wrap: wrap; gap: 6px; }

.cf-tab {
  padding: 6px 13px;
  border-radius: 40px;
  background: #fff;
  border: 1px solid var(--cf-line);
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
}

.cf-tab--on { background: var(--cf-ink); border-color: var(--cf-ink); color: #fff; }

/* ---------- impact band ---------- */

.cf-impact {
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 56px 64px;
  border-radius: 30px;
  background: var(--cf-ink);
  color: #fff;
}

.cf-impact-num {
  flex: none;
  font-family: 'Instrument Serif', serif;
  font-size: 150px;
  line-height: 140px;
  color: var(--cf-lilac);
}

.cf-impact-text { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.cf-impact .cf-sub-label { color: var(--cf-lilac); }
.cf-impact .cf-h3 { color: #fff; }
.cf-impact p { font-size: 15px; line-height: 24px; color: #CCCCD1; }

/* ---------- overview card ---------- */

.cf-overview {
  position: relative;
  width: calc(100% - var(--cf-gutter) * 2);
  max-width: 1380px;
  min-height: 746px;
  margin: 0 auto var(--cf-card-gap);
  padding: 84px 100px;
  display: flex;
  align-items: center;
  border-radius: 30px;
  background: var(--cf-card);
  overflow: visible;           /* the laptop runs past the card's right edge */
  scroll-margin-top: 20px;
}

.cf-overview-text {
  position: relative;
  z-index: 2;
  width: 333px;                /* Figma "Section 1" (new): number, title and text 20px apart */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* the big section number (Figma: Haffer Mono Regular 35, purple) */
@font-face {
  font-family: 'Haffer Mono';
  src: url('../fonts/HafferMono-TRIAL-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
.cf-num {
  font-family: 'Haffer Mono', monospace;
  font-weight: 400;
  font-size: 35px;
  line-height: 1.2;
  color: var(--cf-accent);
}

/* Figma: DM Sans Medium 50, line height 55, letter spacing -5% */
.cf-overview-text .cf-h2 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 50px;
  line-height: 55px;
  letter-spacing: -0.05em;
}

/* Figma: PP Neue Montreal Book 16 (bumped to 18 on screen), line height 30, 20px between paragraphs */
.cf-overview-text p {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
}
.cf-overview-text p + p { margin-top: 0; }   /* (the column's 20px gap spaces them) */

/* bold phrases (Figma: PP Neue Montreal Medium) */
.cf-overview-text strong { font-weight: 700; }

/* laptop: vertically centred in the card, spilling past the card's right side
   (Figma: x 425 in the card; nudged 90px right to give the text more room) */
.cf-overview-mockup {
  position: absolute;
  top: 50%;                    /* vertically centred in the card, whatever its size */
  transform: translateY(-50%);
  left: 37.23%;                /* 515 / 1380 (adjusted so the shared frame's laptop sits where the old image's did) */
  width: 92.31%;               /* the whole frame image; its laptop matches the old 1251 / 1380 laptop */
  aspect-ratio: 2643 / 1576;
  z-index: 1;
  pointer-events: none;
}
.cf-overview-frame { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; }
/* the screen opening (same as .lf-screen: measured from the frame image) */
.cf-overview-screen {
  position: absolute;
  left: 11.55%;
  top: 3.58%;
  width: 76.9%;
  height: 83.75%;
  overflow: hidden;
  background: #090A0A;
}
.cf-overview-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* frosted pills floating over the laptop */
.cf-glass-pills {
  position: absolute;
  z-index: 3;
  left: 41.38%;                /* 571 / 1380 (nudged right with the laptop) */
  top: 230px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

/* frosted, not glossy (like Apple's "Take a closer look" pills): a plain
   background blur, no outline or shine. Figma: white 70%, background blur 30,
   shadow y1 blur1 25%. (No filter on the column itself: a filter there would
   stop the pills from blurring what's behind them.) */
.cf-glass-pills .cf-pill {
  /* a little bigger than the summary tags: 16px text, 20px icon, 38px tall */
  gap: 9px;
  padding: 7px 16px 7px 9px;   /* left: icon sits dead-centre when the pill is a circle: (38 − 20) ÷ 2 */
  font-size: 16px;
  line-height: 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.7);
  border: 0;
  -webkit-backdrop-filter: blur(15px);   /* Figma's blur 30 ≈ CSS 15px */
  backdrop-filter: blur(15px);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.cf-pill-label { display: inline-block; }
.cf-glass-pills .cf-icon { width: 20px; height: 20px; }

/* ---------- agent icon before/after ---------- */

.cf-identity {
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 44px;
  border-radius: 30px;
  background: #fff;
}

.cf-identity .cf-sub { flex: 1; }

.cf-icons {
  display: flex;
  align-items: center;
  gap: 18px;
}

.cf-icons .cf-ph { width: 180px; }

/* ---------- beyond agent cards ---------- */

.cf-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cf-minis .cf-ph, .cf-card--tight > .cf-ph { padding: 12px; border-radius: 16px; }
.cf-minis .cf-ph-desc { font-size: 12px; line-height: 17px; }

/* ---------- reflection ---------- */

.cf-takeaways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
}

.cf-takeaways .cf-card-num { color: var(--cf-ink); }
.cf-takeaway { display: flex; flex-direction: column; gap: 12px; }

.cf-divider { height: 1px; background: var(--cf-line); }

.cf-closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 32px 60px;
  text-align: center;
}

.cf-closing .cf-quote { max-width: 860px; padding: 0; }

/* ---------- section nav: a row of pills along the bottom of the screen,
   shaped + behaving like the homepage work-nav pills (number only; springs
   wider to show the name on hover or while it's the section you're in).
   Frosted like the main nav; purple text for the current section.
   main.js sets each pill's width. ---------- */

.sidebar-nav {
  top: auto;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  padding: 0;
}

.nav-sections {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
}

.nav-item { margin: 0; }

.sidebar-nav .nav-link {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  /* same frost as the main nav, tinted slightly grey */
  background: rgba(232, 232, 236, 0.7);
  border: 0;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  font-weight: 500;
  font-size: 18px;               /* same as the main nav links */
  line-height: 20px;
  letter-spacing: 0;
  color: #181812;
  /* width: the same gentle spring as the work-nav pills (overshoots ~4%, then settles) */
  transition: width 0.65s linear(0, 0.018, 0.065, 0.133, 0.214, 0.303, 0.394, 0.483, 0.569, 0.649, 0.721, 0.785, 0.841, 0.889, 0.929, 0.962, 0.988, 1.009, 1.024, 1.034, 1.041, 1.045, 1.046, 1.045, 1.043, 1.04, 1.037, 1.033, 1.029, 1.024, 1.02, 1.017, 1.013, 1.01, 1.008, 1.005, 1),
              border-radius 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.nav-num,
.nav-name { flex-shrink: 0; }

.nav-num {
  font-family: 'HafferXH', monospace;
  font-weight: 300;
  letter-spacing: -0.03em;
}

.nav-name {
  margin-left: 0.55em;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.sidebar-nav .nav-link.is-open .nav-name {
  opacity: 1;
  transition: opacity 0.25s ease 0.06s;
}

.sidebar-nav .nav-link:hover { color: #181812; }

/* current section: fully round (half its 36px height) + purple text, same weight */
.sidebar-nav .nav-item.active > .nav-link {
  border-radius: 18px;
  color: var(--nav-orange);
  font-weight: 500;
}

/* cursor bubble over a bottom-nav pill: exactly the pill's shape and size (main.js),
   resizing quickly as the pill springs open instead of the slow bouncy default */
.cursor-dot.is-blob.on-pill {
  border-radius: var(--blob-r, 6px);
  transition: opacity 0.3s ease,
              width 0.15s ease-out,
              height 0.15s ease-out,
              border-radius 0.3s ease;
}

/* ---------- entrance: blocks rise in as they scroll into view ---------- */

.cf-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cf-reveal.is-in { opacity: 1; transform: none; }

/* ---------- smaller screens ---------- */

@media (max-width: 700px) {
  .sidebar-nav { bottom: 14px; }
}

@media (max-width: 1100px) {
  .cf-summary { grid-template-columns: 1fr; }
  .cf-summary .cf-title { grid-row: auto; font-size: 64px !important; transform: none !important; }
  .cf-tags { grid-column: 1; justify-content: flex-start; }

  .cf-overview {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    min-height: 0;
    padding: 52px 32px 0;
  }
  .cf-overview-text { width: auto; max-width: 540px; }
  .cf-glass-pills { position: static; flex-direction: row; flex-wrap: wrap; }
  .cf-overview-mockup { position: relative; top: auto; left: auto; transform: none; width: calc(100% + 32px + var(--cf-gutter)); max-width: none; margin-right: calc(-32px - var(--cf-gutter)); align-self: flex-start; }

  .cf-split { grid-template-columns: 1fr !important; gap: 28px; }
  .cf-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-row--3, .cf-takeaways { grid-template-columns: 1fr; }
  .cf-impact, .cf-identity { flex-direction: column; align-items: flex-start; gap: 20px; padding: 36px 28px; }
  .cf-impact-num { font-size: 110px; line-height: 104px; }
}

@media (max-width: 700px) {
  :root { --cf-gutter: 12px; --cf-space: 96px; --cf-card-pad: 64px; }
  .cf-summary { padding: 0 20px; }
  .cf-section { --cf-pad-x: 20px; }
  .cf-title { font-size: 56px; }
  .cf-h2 { font-size: 30px; line-height: 38px; }
  .cf-overview-text .cf-h2 { font-size: 36px; line-height: 40px; }
  .cf-h3 { font-size: 22px; line-height: 30px; }
  .cf-quote { font-size: 24px; line-height: 32px; }
  .cf-row--2, .cf-row--4 { grid-template-columns: 1fr; }
  .cf-flows { padding: 22px; }
  .cf-icons .cf-ph { width: 120px; }
  .hero-border { inset: 8px; }
}

/* ---------- footer (Figma: black → #602BBC → #D187FF, lime text) ---------- */

.case-footer {
  margin-top: 0;               /* the last section's own gap is enough */
  background: linear-gradient(to bottom, #000000 0%, #602BBC 49%, #D187FF 100%);
}

.case-footer-star-wrapper,
#case-footer-star-icon { width: 64px; height: 64px; }

.case-footer-main { gap: 28px; }

.cf-footer-title {
  margin: 0;
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #D1FFA4;
}

.cf-footer-links {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.cf-footer-links a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #D1FFA4;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.cf-footer-links a:hover { opacity: 0.6; }
.cf-footer-links .is-current { opacity: 0.45; }

.cf-footer-links .num {
  font-family: 'HafferXH', monospace;
  font-weight: 300;
  font-size: 16px;
}

.case-footer-signature { font-size: 22px; }

.case-footer-copy,
.case-footer-right a {
  font-family: 'HafferXH', monospace;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* ---------- live hero: coded replica of Creatify's Agent welcome screen
   (agent-hero.js explains how it's built; values from Creatify's own code) ---------- */

@font-face {
  font-family: 'General Sans';
  src: url('fonts/GeneralSans-Variable.woff2') format('woff2-variations'), url('fonts/GeneralSans-Variable.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

.agent-hero {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #090A0A;
  pointer-events: none;             /* a picture of the product, not the product */
  user-select: none;
  will-change: transform, opacity;  /* parallax + fade as you scroll away (main.js) */
}

.ah-waves {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% + 200px);   /* runs 200px below the hero (clipped), see agent-hero.js BELOW_PX */
  display: block;
}

/* dot grid: faint 12px grid that sweeps in top → bottom */
@property --dot-reveal {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}
@keyframes ah-dot-reveal { from { --dot-reveal: 0%; } to { --dot-reveal: 115%; } }
.ah-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0.5px, transparent 0.8px);
  background-size: 12px 12px;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 var(--dot-reveal), transparent calc(var(--dot-reveal) + 15%), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 var(--dot-reveal), transparent calc(var(--dot-reveal) + 15%), transparent 100%);
}
.agent-hero.is-playing .ah-dots { animation: ah-dot-reveal 1800ms ease-in-out 700ms both; }

/* the headline + composer + chips, centred in the hero; shrinks to fit on narrow screens */
.ah-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 624px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%) scale(var(--ah-scale, 1));
  font-family: 'General Sans', sans-serif;
  letter-spacing: 0.28px;
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 700px) { .ah-stage { --ah-scale: calc((100vw - 32px) / 624px); } }

.ah-title-row {
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  align-items: center;
  gap: 4px;
  margin-bottom: 28px;
}
.ah-title {
  margin: 0;
  text-align: center;
  font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.ah-title span { -webkit-background-clip: text; background-clip: text; color: transparent; }
.ah-title .ah-grey { background-image: linear-gradient(to bottom, #FFFFFF, #A7AEB8); }
.ah-title .ah-purple { background-image: linear-gradient(to left, #5C54FF, #8F74FF); }
.ah-help { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.5); }

/* icons: Creatify's IconPark SVGs used as masks, so they take the text colour */
.ah-i {
  display: inline-block;
  flex: none;
  width: var(--s, 16px);
  height: var(--s, 16px);
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}

/* composer */
.ah-composer-slot { position: relative; }
.ah-composer {
  position: relative;
  width: 624px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(19, 20, 20, 0.85);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), inset 1px 1px 3px -1px rgba(255, 255, 255, 0.14), inset -1px -1px 3px -1px rgba(255, 255, 255, 0.04);
}
.ah-edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-mask-image: linear-gradient(to top, #000, transparent 55%);
  mask-image: linear-gradient(to top, #000, transparent 55%);
  pointer-events: none;
}
.ah-sheen {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 50%;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), transparent);
}

/* intro light-sweep: a wide grey band (covering the composer until it sweeps away)
   and a thin white one trailing it. Start fast, linger mid-composer, swipe off. */
.ah-sweep { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.ah-sweep-band { position: absolute; top: 50%; left: 50%; height: 2400px; }
.ah-sweep-band.b0 { width: 2400px; background: rgba(209, 209, 209, 0.18); transform: translate(-50%, -50%) rotate(45deg) translateX(0); }
.ah-sweep-band.b1 { width: 150px; background: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%) rotate(45deg) translateX(-600px); }
.ah-sweep-band.b0.is-sweeping { animation: ah-sweep-0 970ms 0ms 1 both; }
.ah-sweep-band.b1.is-sweeping { animation: ah-sweep-1 1128ms 525ms 1 both; }
@keyframes ah-sweep-0 {
  0%        { transform: translate(-50%, -50%) rotate(45deg) translateX(0);      animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
  32.4742%  { transform: translate(-50%, -50%) rotate(45deg) translateX(1200px); animation-timing-function: linear; }
  43.2990%  { transform: translate(-50%, -50%) rotate(45deg) translateX(1220px); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); }
  100%      { transform: translate(-50%, -50%) rotate(45deg) translateX(3000px); }
}
@keyframes ah-sweep-1 {
  0%        { transform: translate(-50%, -50%) rotate(45deg) translateX(-600px); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
  41.9069%  { transform: translate(-50%, -50%) rotate(45deg) translateX(1200px); animation-timing-function: linear; }
  51.2195%  { transform: translate(-50%, -50%) rotate(45deg) translateX(1220px); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); }
  100%      { transform: translate(-50%, -50%) rotate(45deg) translateX(3000px); }
}

.ah-content { position: relative; z-index: 1; display: flex; flex-direction: column; }
.ah-input { padding: 12px 20px 8px; }
.ah-typed {
  min-height: 52px;
  font-size: 15px;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.3);
  white-space: pre-wrap;
}
.ah-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 12px; }
.ah-left, .ah-right { display: flex; align-items: center; gap: 4px; }
.ah-round { position: relative; width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.5); }
.ah-dot { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: #EDA921; }
.ah-product { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px; font-weight: 500; }
.ah-lite { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; font-size: 13px; font-weight: 500; }
.ah-auto { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 8px; font-size: 13px; font-weight: 500; }
.ah-send { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.3); }

/* chips */
.ah-chips { display: flex; justify-content: center; gap: 8px; margin-top: 24px; white-space: nowrap; }
.ah-chip-wrap { display: inline-flex; }
.ah-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 480;
  line-height: 16px;
  background: rgba(19, 20, 20, 0.85);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), inset 1px 1px 3px -1px rgba(255, 255, 255, 0.14), inset -1px -1px 3px -1px rgba(255, 255, 255, 0.04);
}
.ah-chip .ah-i { color: rgba(255, 255, 255, 0.5); }
.ah-ping { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; }
.ah-ping::before, .ah-ping::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #EDA921; }
.ah-ping::before { opacity: 0.75; animation: ah-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes ah-ping { 75%, 100% { transform: scale(2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .agent-hero.is-playing .ah-dots, .ah-sweep-band.is-sweeping, .ah-ping::before { animation: none; }
  .ah-dots { --dot-reveal: 115%; }
  .ah-sweep { display: none; }
}

/* ---------- "Get the highlights." carousel (Figma: Carousel, like Apple's highlights gallery).
   Cards are 1240 × 746 design px, 30px apart, the next one peeking in from the right.
   Inside a card everything is sized in --u (1 design px at the card's current size),
   so the whole card scales cleanly. Flick / drag behaviour: highlights.js ---------- */

/* the highlights carousel + the overview card count as one "overview" section (bottom nav) */
.cf-overview-group { scroll-margin-top: 20px; }

.cf-highlights {
  width: calc(100% - var(--cf-gutter) * 2);
  max-width: 1380px;
  margin: 0 auto var(--cf-card-gap);
  scroll-margin-top: 20px;
}

.hl-title {
  margin: 0 0 20px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--cf-ink);
}

.hl-viewport {
  position: relative;
  touch-action: pan-y;          /* vertical page scroll still works over it on touch screens */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.hl-viewport.is-dragging { cursor: grabbing; }

.hl-track {
  display: flex;
  gap: 30px;
  will-change: transform;
}

.hl-card {
  flex: 0 0 min(1240px, 89.86%);   /* 1240 of 1380: the next card peeks in by 110px */
  aspect-ratio: 1240 / 720;       /* Figma: 746 tall, a little shorter here */
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  background: var(--cf-card);
  container-type: inline-size;
}

.hl-card-inner { position: absolute; inset: 0; --u: calc(100cqw / 1240); --lift: 30; }   /* --lift: laptop sits this many design px above its Figma spot */

.hl-caption {
  position: absolute;
  left: 0; right: 0;
  top: calc(50 * var(--u));
  margin: 0;
  text-align: center;
  font-family: 'PP Neue Montreal', sans-serif;   /* Figma carousel items: PP Neue Montreal Medium 30, #1E1C1D */
  font-weight: 500;
  font-size: max(15px, calc(30 * var(--u)));
  line-height: 1.2;
  letter-spacing: 0;
  color: #1E1C1D;
  z-index: 2;
}
.hl-caption em { font-style: normal; color: #6F68FF; }
.hl-caption, .hl-soon { will-change: transform, opacity; }   /* parallax + fade while swiping (highlights.js) */

/* the laptop: dark screen fill → screen recording → faint purple glow at the top of
   the screen → MacBook frame on top. Positions from Figma (card-relative, design px);
   the recording is sized to the frame's measured screen opening so there are no gaps. The frame is the
   plain MacBook image, notch included. */
.hl-screen, .hl-screen-glow, .hl-mac { position: absolute; display: block; pointer-events: none; }
.hl-screen { left: calc(112.7 * var(--u)); top: calc((221.5 - var(--lift)) * var(--u)); width: calc(1014.5 * var(--u)); height: calc(659.5 * var(--u)); overflow: hidden; background: #F5F5F7; isolation: isolate; }   /* the screen opening (the recordings are clipped to it, and their stacking stays inside it — under the frame and its notch) */
/* each recording fills the screen opening; hidden below the screen until it's its turn, then it slides up over the other one */
.hl-video { position: absolute; display: block; left: 0; top: 0; width: calc(1014.5 * var(--u)); height: auto; transform: translateY(110%); }
.hl-video.is-current { transform: none; z-index: 1; }
.hl-video.is-entering { z-index: 2; transform: none; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }

/* ---- the angled-MacBook card (Figma "! Claude - Carousel Item") ----
   Everything's laid out in the Figma frame's own pixels (1240 × 746) on a stage that
   highlights.js scales to the card (--s = card width / 1240). The card here is 26px
   shorter than in Figma, so the stage sits 26px higher and the slab's bottom gets trimmed. */
.hl-iso-stage, .hl-stage {
  position: absolute; left: 0; top: 0;
  width: 1240px; height: 746px;
  transform: scale(var(--s, 1)) translateY(-26px);
  transform-origin: 0 0;
  pointer-events: none;
}
.hl-iso-stage > *, .hl-stage > * { position: absolute; display: block; }
.hl-iso-mac      { left: 145.23px; top: 174.07px; width: 787.89px; height: 478.51px; }
.hl-iso-platform { left: -3.33px;  top: 565.32px; width: 1246.67px; height: 290.68px; }
/* the screen: the design's screen shape (from the hidden "Change-This" layer) cuts out the recording */
.hl-iso-screen { position: absolute; display: block; pointer-events: none;
}
.hl-card--iso .hl-iso-screen {
  left: 413.68px; top: 183.22px; width: 508.02px; height: 437.16px;
  background: none; overflow: visible; isolation: isolate;
  -webkit-mask: url(images/highlight-0-screen-mask.png) 0 0 / 100% 100% no-repeat;
          mask: url(images/highlight-0-screen-mask.png) 0 0 / 100% 100% no-repeat;
}
/* a flat 1728 × 1117 screen (a 16" MacBook's), bent into the laptop's perspective: its
   corners land on the screen's corners, measured from the dot grid in the design's screenshot */
.hl-iso-plane {
  position: absolute; left: 0; top: 0;
  width: 1728px; height: 1117px;
  overflow: hidden;
  background: #090909;   /* the recording's own bottom colour, for the strip below it */
  transform-origin: 0 0;
  transform: matrix3d(0.289349937, -0.0377579054, 0, -9.13589564e-06, 0.000259929273, 0.351935504, 0, -5.17345881e-06, 0, 0, 1, 0, 0, 65.341371, 0, 1);
}
.hl-card--iso .hl-video { left: 0; top: 0; width: 100%; }

/* ---- the tools card (Figma "! Carousel Item 3"): logo bubbles that drop in and pile up ----
   Laid out on the same Figma-pixel stage as the angled-MacBook card. Each bubble rests at its
   Figma tilt (--rot); highlights.js animates the fall and bounces over the top of that. */
.hl-bubble { transform: rotate(var(--rot)); will-change: transform; }
.hl-bubble--shadow { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1)); }   /* Figma: y1 blur1, 10% */
.hl-bubbles.is-waiting .hl-bubble { visibility: hidden; }   /* (up above the card, before they drop) */

/* ---- the interviews card (Figma "Carousel Item 2"): two MacBooks + quotes that pop in ---- */
/* (the laptop shadows are plain see-through black, not a multiply blend: a blend mode here
   stops the quotes' background blur from working in Chrome) */
/* the front laptop's screen: a tilted four-cornered shape (Figma "Change-This");
   the design is bent so its corners land on the screen's corners */
.hl-quotes-screen { left: 379.01px; top: 298.58px; width: 607.33px; height: 374.82px; }
.hl-quotes-plane {
  position: absolute; left: 0; top: 0;
  width: 1728px; height: 1111px; max-width: none;
  border-radius: 18px 18px 0 0;   /* a MacBook display's rounded top corners (bent along with the image) */
  transform-origin: 0 0;
  transform: matrix3d(0.253704477, -0.0243851697, 0, -6.26250327e-05, -0.0928931086, 0.28286271, 0, -4.42415718e-05, 0, 0, 1, 0, 103.204244, 42.1375733, 0, 1);
}
/* a quote: frosted like the main nav (white 70%, 15px background blur); Figma: radius 15, padding 20, gap 10 */
.hl-quote {
  margin: 0;
  box-sizing: border-box;
  padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 500;
  color: #1E1C1D;
  text-align: left;
}
.hl-quote-mark { height: 9px; font-size: 50px; line-height: 30px; }
.hl-quote blockquote { margin: 0; width: 153px; font-size: 16px; line-height: 25px; }   /* Figma: a fixed 153px text box */
.hl-quote figcaption { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 30px; }
.hl-quote-icon { width: 20px; height: 19px; margin: 2px; flex: none; }
/* Figma's drop shadow on the quotes group (4 stacked layers) */
.hl-quote-shadow {
  border-radius: 15px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10), 0 19px 19px rgba(0, 0, 0, 0.09),
              0 43px 26px rgba(0, 0, 0, 0.05), 0 76px 30px rgba(0, 0, 0, 0.01);
}
/* one by one, left to right: each pops up with a little overshoot (highlights.js toggles .is-waiting);
   each box's shadow moves with it */
.hl-quote, .hl-quote-shadow {
  transform-origin: 50% 100%;
  transition: opacity 0.18s ease-out, transform 0.38s cubic-bezier(0.34, 1.7, 0.64, 1);
  transition-delay: calc(0.08s + var(--i) * 0.08s);
}
.hl-quotes.is-waiting :is(.hl-quote, .hl-quote-shadow) { opacity: 0; transform: translateY(12px) scale(0.8); transition: none; }
.hl-quotes.is-clearing :is(.hl-quote, .hl-quote-shadow) { opacity: 0; transition: opacity 0.2s ease; }
/* the in-chat card (Figma "Carousel Item 3", one exported image): fades in while growing slightly
   (highlights.js toggles .is-waiting). Not shifted up like the other stages, so the top callout stays clear of the caption. */
.hl-stage.hl-pop { transform: scale(var(--s, 1)); }
.hl-pop-img {
  left: 0; top: 0; width: 1240px; height: 746px;
  transform-origin: 50% 55%;
  transition: opacity 0.6s ease-out, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-pop.is-waiting .hl-pop-img { opacity: 0; transform: scale(0.94); transition: none; }
.hl-pop.is-clearing .hl-pop-img { opacity: 0; transition: opacity 0.2s ease; }
/* the tools card: a quick fade before the bubbles drop in again */
.hl-bubbles { transition: opacity 0.25s ease; }
.hl-bubbles.is-clearing { opacity: 0; }
/* Figma "purple fade": gradient 30% → 0, on a layer at 30% opacity (so ~9% at the top). Lifts the top of the
   recording off the equally black bezel. */
.hl-screen-glow { left: calc(108 * var(--u)); top: calc((220 - var(--lift)) * var(--u)); width: calc(1035 * var(--u)); height: calc(82 * var(--u)); background: linear-gradient(to bottom, rgba(99, 102, 241, 0.3), rgba(187, 149, 247, 0)); opacity: 0.3; }
.hl-mac { left: calc(-40.8 * var(--u)); top: calc((194 - var(--lift)) * var(--u)); width: calc(1321.6 * var(--u)); height: auto; }

.hl-soon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'HafferXH', monospace;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(30, 28, 29, 0.3);
}

/* dots (Figma: frosted pill, active dot is a 30px bar) */
.hl-dots {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.7);
  border: 0.8px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);   /* same as the main nav + bottom nav */
  z-index: 2;
}
.hl-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: rgba(30, 28, 29, 0.5);
  cursor: pointer !important;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}
.hl-dot.is-active { width: 30px; }

@media (max-width: 700px) {
  .hl-title { font-size: 32px; }
  .hl-track { gap: 14px; }
  .hl-card { border-radius: 20px; }
  .hl-dots { bottom: 14px; padding: 12px; }
}

/* carousel intro: the first card's text fades in while sliding in from
   the left (the "Get the highlights." heading itself stays put) (highlights.js adds .is-in once the carousel is 30% on screen) */
.hl-caption-in { display: inline-block; }
.cf-highlights .hl-caption-in {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity 0.7s ease-out, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.cf-highlights.is-in .hl-caption-in { opacity: 1; transform: none; }
.cf-highlights.is-in .hl-caption-in { transition-delay: 0.15s; }
@media (prefers-reduced-motion: reduce) {
  .cf-highlights .hl-title, .cf-highlights .hl-caption-in { opacity: 1; transform: none; transition: none; }
}

/* bottom nav intro: rises + fades in (then main.js springs the current pill open) */
.sidebar-nav {
  transform: translate(-50%, 18px);
  transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.sidebar-nav.visible { transform: translate(-50%, 0); }

/* near the footer the bottom nav fades out (main.js); kept after the .visible rules so it wins */
.sidebar-nav.near-footer { opacity: 0; pointer-events: none; }

/* ================================
   RESEARCH: four cards, one open at a time (research.js)
   Figma "Method strip — tall accordion": the row runs the full section width;
   folded cards are 114px tabs (number on top, name running up the bottom); the open
   card takes the rest. Opening = the card widens on a bezier curve, then its
   contents fade in; the closing card's contents fade out first.
   ================================ */
@font-face {
  font-family: 'HafferXH';
  src: url('https://cdn.jsdelivr.net/gh/melodysz/baubles@main/fonts/HafferXHMono-TRIAL-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

#research { --rs-tab: 92px; --rs-gap: 12px; --rs-h: 655px; --rs-ease: cubic-bezier(0.76, 0, 0.24, 1); --rs-dur: 0.5s; }

/* the row stays inside the body content's margins, lined up with the TL;DR and text above
   (was: reaching the section's edges, with 114px tabs) */
.rs-pin { margin-inline: 0; }
.rs-pin.is-scroll-driven .rs-stick { position: sticky; top: var(--rs-stick-top, 0px); }   /* (off for now: research.js SCROLL_DRIVEN) */

/* the intro text above the cards runs the full width */
#research .cf-head--v2 .cf-body { max-width: none; }

.rs-strip {
  display: flex;
  justify-content: center;        /* all folded (before it's scrolled in): the tabs sit centred */
  gap: var(--rs-gap);
  height: var(--rs-h);
  container-type: inline-size;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.rs-card {
  position: relative;
  flex: 0 0 var(--rs-tab);
  min-width: 0;
  border-radius: 23px;
  overflow: hidden;
  color: var(--cf-ink);
  transition: flex-basis var(--rs-dur) var(--rs-ease);
}
.rs-card.is-open { flex-basis: calc(100% - 3 * (var(--rs-tab) + var(--rs-gap))); }
.rs-card--1 { background: rgba(30, 28, 29, 0.05); box-shadow: inset 0 0 0 1px rgba(24, 24, 18, 0.1); }   /* the design system's ink (#1E1C1D) at 5% (was #D9D9D9), with a thin outline */
.rs-card--2 { background: #D2ABFF; }
.rs-card--3 { background: #1E1C1D; color: #fff; }
.rs-card--4 { background: #fff; box-shadow: inset 0 0 0 1px rgba(24, 24, 18, 0.1); }   /* thin outline (was 2px) */

/* big mono number (tabs + open titles) */
.rs-num {
  font-family: 'HafferXH', monospace;
  font-weight: 400;
  font-size: 40px;                /* (the page's 40/48 heading size, as .cf-h2; Figma had 55) */
  line-height: 48px;
  letter-spacing: 0;
}

/* The number is one fixed piece per card, never fading, pinned to the card's top-right
   corner: folded or open, it stays put (it only rides along with the card's right edge
   as the card widens). The tab's own number is an invisible spacer; the open title has
   none (on phones the title shows its number inline instead). */
.rs-num-space { visibility: hidden; }
.rs-title .rs-num-space { display: none; }
.rs-num-fixed {
  position: absolute;
  z-index: 1;
  top: 35px;
  right: 22px;                    /* centred in a 92px folded tab */
  pointer-events: none;
}

/* ---- folded: the tab ---- */
.rs-tab {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 33px 28px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.3s ease calc(var(--rs-dur) * 0.55);
}
.rs-side {
  writing-mode: vertical-rl;
  transform: rotate(180deg);          /* reads bottom to top, like Figma */
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 45px;
  letter-spacing: -0.05em;
  white-space: nowrap;
}
.rs-card.is-open .rs-tab { opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }

/* ---- open: contents are laid out at the open card's full width the whole time, so
   nothing reflows while the card widens; the card just reveals more of them ---- */
.rs-open {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100cqw - 3 * (var(--rs-tab) + var(--rs-gap)));
  height: 100%;
  padding: 37px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  visibility: hidden;
  transition: visibility 0s linear 0.15s;
}
.rs-card.is-open .rs-open { visibility: visible; transition: visibility 0s; }
/* text, then the chart/images, slide in while fading in (closing: a quick fade). They come
   from the side the card grows towards: research.js sets data-from="left" / "right". */
.rs-open > * {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.rs-card.is-open .rs-open > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease var(--rs-in), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--rs-in);
}
.rs-card[data-from="left"] .rs-open > * { transform: translateX(-32px); }
.rs-card[data-from="left"].is-open .rs-open > * { transform: none; }
.rs-open > :nth-child(1) { --rs-in: calc(var(--rs-dur) * 0.5); }
.rs-open > :nth-child(2) { --rs-in: calc(var(--rs-dur) * 0.5 + 0.08s); }

.rs-head { display: flex; flex-direction: column; gap: 10px; }
.rs-title {
  display: flex;
  align-items: center;
  gap: 19px;
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.05em;
}
.rs-card--1 .rs-title { gap: 10px; }
.rs-title .rs-num { letter-spacing: 0; }
.rs-text { margin: 0; font-size: 18px; line-height: 30px; opacity: 0.7; }
.rs-text strong { font-weight: 700; }
.rs-lead { margin: 0; font-weight: 500; font-size: 20px; line-height: 30px; }

/* 01: funnel chart (Figma's scaled copy) */
.rs-chart {
  display: flex;
  flex-direction: column;
  padding: 36px 33px 27px;
  border-radius: 18px;
  background: #fff;
  font-family: 'DM Sans', sans-serif;
  color: var(--cf-ink);
}
.rs-chart-title { margin: 0 0 22px; font-weight: 500; font-size: 20px; line-height: 25px; letter-spacing: -0.02em; }
.rs-funnel { display: flex; flex-direction: column; gap: 9px; }
.rs-row { display: grid; grid-template-columns: 126px 300px 40px; align-items: center; gap: 11px; height: 20px; font-size: 12.75px; }
.rs-row-pct { font-weight: 500; }
.rs-bar { position: relative; display: flex; align-items: center; gap: 2px; height: 20px; }
.rs-bar-val, .rs-bar-lost { display: block; height: 20px; width: var(--w); border-radius: 0 3px 3px 0; }
.rs-bar-val { background: #7354F2; }
.rs-bar-lost { background: rgba(199, 189, 250, 0.55); }
.rs-bar-drop { margin-left: 5px; font-weight: 600; font-size: 10.9px; color: #7354F2; white-space: nowrap; }
.rs-divider { height: 1px; margin: 25px 0 22px; background: #DBDBE0; }
.rs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rs-stat { display: flex; flex-direction: column; gap: 4px; }
.rs-stat-num { font-weight: 600; font-size: 27.3px; line-height: 36px; letter-spacing: -0.03em; color: #7354F2; }
.rs-stat-label { font-size: 11.8px; line-height: 16px; color: #5C5C61; }

/* 02: themes */
.rs-themes-wrap { display: flex; flex-direction: column; gap: 14px; }
.rs-themes { list-style: none; margin: 0; padding: 5px; border-radius: 15px; background: #fff; }
.rs-themes li { display: flex; gap: 19px; padding: 20px 21px; }
.rs-theme-num { font-family: 'HafferXH', monospace; font-weight: 400; font-size: 17.5px; line-height: 26px; opacity: 0.3; }
.rs-themes li > span:last-child { display: flex; flex-direction: column; gap: 5px; }
.rs-theme-title { font-weight: 500; font-size: 18.7px; line-height: 26px; }
.rs-theme-text { font-size: 16.4px; line-height: 23px; color: rgba(0, 0, 0, 0.6); }

/* 03: Higgsfield vs Creatify (overlapping screenshots; the images include their glow,
   ~21px past the frame on each side) */
.rs-compare { position: relative; height: 446px; }
.rs-compare-shots { position: absolute; inset: 0; pointer-events: none; }
.rs-shot {
  position: absolute;
  left: 50%;
  width: 505px;
  padding: 0;
  border: 0;
  background: none;
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Figma: 14 corners, a 40% white hairline and a soft white glow (drawn here, so the
   glow is see-through over whatever is behind it) */
.rs-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
}
.rs-shot.is-top { z-index: 2; cursor: zoom-in; }
.rs-shot-back { top: 65.4px; transform: translateX(calc(-50% - 35.2px)); }
.rs-shot-front { top: 95.1px; transform: translateX(calc(-50% + 35px)); }
/* the one behind lifts a touch on hover, hinting it can be clicked */
.rs-shot-back:not(.is-top):hover { transform: translate(calc(-50% - 35.2px), -6px); }
.rs-shot-front:not(.is-top):hover { transform: translate(calc(-50% + 35px), -6px); }
/* (just swapped: a little pop as it comes forward) */
.rs-shot.is-popping img { animation: rs-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes rs-pop { from { transform: scale(0.97); } to { transform: none; } }
.rs-note { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; font-size: 18px; line-height: 23px; color: rgba(255, 255, 255, 0.7); }
.rs-note strong { font-weight: 700; color: #fff; }

/* 04: the two menus */
.rs-screens { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rs-screens figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.rs-screens figcaption { font-size: 18px; line-height: 30px; opacity: 0.7; }
.rs-screens img { display: block; width: 100%; height: auto; }
.rs-zoom { cursor: zoom-in; }

@media (prefers-reduced-motion: reduce) {
  #research { --rs-dur: 0.01s; }
}

/* ---- smaller screens: no tabs, no locking in place — the four cards simply stack, all open ---- */
@media (max-width: 1000px) {
  .rs-pin { margin-inline: 0; height: auto !important; }
  .rs-stick { position: static; }
  .rs-strip { flex-direction: column; height: auto; gap: 16px; }
  .rs-card, .rs-card.is-open { flex: none; }
  .rs-tab, .rs-num-fixed { display: none; }
  .rs-title .rs-num-space { display: inline; visibility: visible; }
  .rs-open, .rs-card.is-open .rs-open { position: static; width: auto; height: auto; padding: 28px 24px; visibility: visible; transition: none; gap: 28px; }
  .rs-open > *, .rs-card.is-open .rs-open > * { opacity: 1; transform: none; transition: none; }
  .rs-title { font-size: 36px; line-height: 40px; gap: 12px; }
  .rs-num { font-size: 36px; line-height: 40px; }
  .rs-row { grid-template-columns: 96px 1fr 34px; }
  .rs-stats { grid-template-columns: 1fr; gap: 14px; }
  .rs-compare { height: auto; display: flex; flex-direction: column; gap: 16px; }
  .rs-compare-shots { position: static; display: grid; gap: 12px; }
  .rs-shot, .rs-shot:hover { position: static; width: 100%; transform: none !important; }
  .rs-note { position: static; }
  .rs-screens { grid-template-columns: 1fr; }
}

/* ================================
   LIGHTBOX (lightbox.js): a full-size screenshot over a dimmed, blurred page
   ================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;                 /* over the nav, under the cursor dot (10001) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 4vw;
  background: rgba(14, 13, 16, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity 0.25s ease, visibility 0s; }
.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  transform: scale(0.96);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.lightbox.is-open .lightbox-img { transform: none; }
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 26px;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.26); }

/* ================================
   SKILLS INTRO (skills-intro.js)
   A full-screen beat before the Skills section. The grey card sits inside the page's
   usual side margin, with the same margin above and below (so it scales with the
   screen). Four screenshots start as a 2×2 in the middle, then get pulled out to the
   screen's corners (partly off screen) while the title fades in and "Skills" shines.
   ================================ */
.sk-intro {
  position: relative;
  height: 100vh;
  height: 100svh;
  margin: 0 0 calc(var(--cf-card-gap) - var(--cf-gutter));
  overflow: hidden;               /* the screenshots end partly off screen */
}
.sk-card {
  position: absolute;
  inset: var(--cf-gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  background: #F5F5F7;
}
/* the section number above the title (Figma: Haffer XH Mono SemiBold 35, 10px above) */
.sk-intro-text { display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; }   /* faded in by skills-intro.js */
.sk-intro-num {
  font-family: 'HafferXH', monospace;
  font-weight: 600;
  font-size: clamp(24px, 2.4vw, 35px);
  line-height: 1.2;
  color: var(--cf-ink);
}
.sk-intro-title {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(36px, 4.45vw, 65px);
  line-height: 1;
  letter-spacing: -0.05em;
  text-align: center;
  color: var(--cf-ink);
}

/* "Skills" shines pink → purple for a moment, then settles to plain ink */
.sk-word { position: relative; display: inline-block; }
.sk-word::after {
  content: attr(data-text);
  position: absolute;
  inset: 0 0 -0.3em 0;            /* reaches below the line, so letters that hang down (the g in "Agent") get the gradient too */
  background: linear-gradient(90deg, #E7A0FE 0%, #6F68FF 33%, #E7A0FE 66%, #6F68FF 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  pointer-events: none;
}
/* The gradient fades in and stays, slowly shimmering back and forth for good
   (--sk-sheen-dur: one sweep across the word). */
.sk-intro, .ag-intro { --sk-sheen-dur: 4s; }
.sk-intro .sk-word, .ag-intro .ag-word { transition: color 0.4s ease; }
.sk-intro .sk-word::after, .ag-intro .ag-word::after { transition: opacity 0.4s ease; }
.sk-intro.is-shining .sk-word, .ag-intro.is-in .ag-word { color: transparent; }
.sk-intro.is-shining .sk-word::after, .ag-intro.is-in .ag-word::after {
  opacity: 1;
  animation: sk-sheen var(--sk-sheen-dur) ease-in-out infinite alternate;
}
@keyframes sk-sheen { from { background-position: 100% 0; } to { background-position: 0% 0; } }

.sk-shots { position: absolute; inset: 0; pointer-events: none; }
.sk-shot {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: var(--sk-w, 40%);
  height: auto;
  border-radius: 15px;
  will-change: transform;
  -webkit-user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
  .sk-intro.is-shining .sk-word::after, .ag-intro.is-in .ag-word::after { animation: none; }   /* (a still gradient) */
}

/* Problem V1/V2 carousel: the same dots as the highlights carousel, but under the cards */
.cf-versions-viewport .hl-dots {
  background: rgba(232, 232, 236, 0.7);   /* the bottom nav's grey, so it shows on the white page */
  position: relative;
  z-index: 2;                     /* (over the cards' bottom edge) */
  left: auto;
  bottom: auto;                   /* (the highlights dots' own offsets don't apply here) */
  transform: none;
  width: fit-content;
  margin: -20px auto 0;           /* pulled up by half its 40px height: it straddles the cards' bottom edge */
}

/* ================================
   THE BIG QUESTION (big-question.js)
   Gets a full screen of room to itself. Once it's 2/3 on screen, the grey box grows
   from a small circle (a clip-path) into its rounded rectangle, then the words fade
   in. Plays once. Small screens and reduced motion just show the finished box.
   ================================ */
/* (no longer a full screen of room: just the page's usual 150px section spacing around it) */
.bq-scene { position: relative; margin-top: calc(var(--cf-space) - 56px); }   /* 56px = .cf-inner's gap, already there */
.bq-scene--own { margin-top: 0; }   /* (a section of its own: the section gap already spaces it) */
.bq-stick { display: flex; align-items: center; }
.bq-box { width: 100%; margin: 0; will-change: clip-path; }

/* Research "at a glance": where / why / how, above the cards */
.rs-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.rs-glance[hidden] { display: none; }
.rs-glance-item { padding-top: 16px; border-top: 1px solid #DBDBE0; }
.rs-glance-label {
  margin-bottom: 8px;
  font-family: 'Haffer Mono', monospace;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--cf-accent);
}
.rs-glance p { margin: 0; font-size: 17px; line-height: 26px; color: rgba(30, 28, 29, 0.7); }
.rs-glance strong { font-weight: 700; color: var(--cf-ink); }
@media (max-width: 800px) { .rs-glance { grid-template-columns: 1fr; gap: 20px; } }

/* ================================
   03 · AGENT SKILLS (Figma: "03a — Agent Skills")
   Labels: Haffer Mono, purple · titles: DM Sans Medium · text: PP Neue Montreal
   (Book, Medium for the bold bits). Grey panels reach the section's edges.
   Videos play only while on screen (skills-section.js).
   ================================ */
.sk-panel {
  margin-inline: calc(-1 * var(--cf-pad-x));
  padding: 100px var(--cf-pad-x);
  border-radius: 30px;
  background: #F5F5F7;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.sk-sub { display: flex; flex-direction: column; gap: 12px; }
.sk-label {
  font-family: 'Haffer Mono', monospace;
  font-weight: 400;
  font-size: 16px;   /* the same "Subtitle" size as .cf-eyebrow--v2 (was 15) */
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--cf-accent);
}
.sk-title {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 45px;
  letter-spacing: -0.04em;
  color: var(--cf-ink);
}
.sk-body { display: flex; flex-direction: column; gap: 14px; }
.sk-body p, .sk-feature p, .sk-callout p { margin: 0; font-size: 18px; line-height: 30px; color: var(--cf-ink); }
.sk-section-strong, .sk-body strong, .sk-feature strong, .sk-callout strong { font-weight: 700; }   /* bolded phrases: PP Neue Montreal Bold (was Medium) */

.sk-video, .sk-pair img, .sk-gallery > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 15px;
  background: #0D0D0D;
}

/* a label beside its video (Figma: 380 | 776) */
.sk-rows { display: flex; flex-direction: column; gap: 24px; }
.sk-row { display: grid; grid-template-columns: minmax(0, 380fr) 776fr; gap: 24px; align-items: start; }
.sk-pair-wrap { display: flex; flex-direction: column; gap: 15px; }
.sk-pair-wrap[hidden] { display: none; }
.sk-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; align-items: start; }

/* the first gallery, labelled: outlines + frosted tags placed in its own 1180×703 frame */
.sk-gallery { position: relative; margin: 0; }
.sk-zoom { cursor: zoom-in; }
.sk-outline, .sk-tag { position: absolute; left: calc(var(--x) / 1180 * 100%); top: calc(var(--y) / 703 * 100%); pointer-events: none; }
.sk-outline {
  width: calc(var(--w) / 1180 * 100%);
  height: calc(var(--h) / 703 * 100%);
  border: 1.5px solid #6F68FF;
  border-radius: calc(var(--r) * 1px);
}
.sk-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(11px, 1.35vw, 16px);
  line-height: 1.3;
  white-space: nowrap;
  color: var(--cf-ink);
}
.sk-tag::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #6F68FF; flex: none; }

/* the three issues */
.sk-issues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.sk-issue { display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 28px; border-radius: 15px; color: var(--cf-ink); }
.sk-issue--1 { background: #fff; }
.sk-issue--2 { background: #D2ABFF; }
.sk-issue--3 { background: #1E1C1D; color: #fff; }
.sk-issue-num { font-family: 'HafferXH', monospace; font-weight: 400; font-size: 45px; line-height: 54px; }
.sk-issue img { display: block; width: 100%; height: auto; border-radius: 14px; }
.sk-issue h4 { margin: 0; font-weight: 500; font-size: 22px; line-height: 26px; }
.sk-issue p { margin: 0; font-size: 16px; line-height: 24px; }
.sk-turn {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 34px;
  letter-spacing: -0.02em;
  color: var(--cf-ink);
}
.sk-turn span { color: #6F68FF; }

/* iteration 2: text beside its video (Figma: 308 | 832) */
.sk-split { display: grid; grid-template-columns: minmax(0, 308fr) 832fr; gap: 40px; align-items: start; }
/* the four gallery features, named under the big gallery recording (which shows them all):
   four short text columns, each with a thin line on top */
.sk-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.sk-feature { padding-top: 16px; border-top: 1px solid #DBDBE0; }
.sk-feature-text { display: flex; flex-direction: column; gap: 6px; }
.sk-feature p { font-size: 17px; line-height: 26px; }

.sk-callout { display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: 20px; background: #F0EDFF; }
.sk-callout p { max-width: 820px; line-height: 28px; }

.sk-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 12px; }
.sk-stat-num { font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 96px; line-height: 100px; letter-spacing: -0.05em; color: #7354F2; }
.sk-stat p { margin: 8px 0 0; font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 24px; line-height: 32px; letter-spacing: -0.02em; color: var(--cf-ink); }
.sk-footnote { margin: 0; font-size: 16px; line-height: 24px; color: var(--cf-gray); }

@media (max-width: 900px) {
  .sk-row, .sk-split, .sk-pair, .sk-issues, .sk-stats { grid-template-columns: 1fr; }
  .sk-features { grid-template-columns: 1fr 1fr; }
  .sk-panel { padding-block: 56px; gap: 40px; }
  .sk-title { font-size: 32px; line-height: 38px; }
  .sk-stat-num { font-size: 64px; line-height: 70px; }
  .sk-tag { padding: 4px 8px 4px 6px; gap: 4px; }
  .sk-tag::before { width: 6px; height: 6px; }
}

/* ================================
   AGENT INTRO (agent-intro.js)
   The hero's waves + dot grid on a full-screen stage. As it scrolls in, the stage
   grows (a clip-path) from the text column's width to the whole screen, edge to edge;
   the title fades in just before it's full, and "Agent" shines before settling white.
   ================================ */
.ag-intro { position: relative; height: 100vh; height: 100svh; margin-bottom: var(--cf-card-gap); }
.ag-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #090A0A;
  clip-path: inset(var(--ag-iy, 0px) var(--ag-ix, 0px) round var(--ag-r, 0px));
}
.ag-bg { position: absolute; inset: 0; }
.ag-frost {                       /* (Figma: 10% black) — fading out towards the bottom, so the white wave there stays pure white */
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 80%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 80%);
}
.ag-dots { --dot-reveal: 115%; -webkit-mask-image: none; mask-image: none; }
.ag-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 24px;
  text-align: center;
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease-out, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.ag-intro.is-in .ag-text { opacity: 1; transform: none; }
.ag-num { font-family: 'HafferXH', monospace; font-weight: 600; font-size: clamp(24px, 2.4vw, 35px); line-height: 1.2; }
.ag-title { margin: 0; font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: clamp(44px, 5.45vw, 80px); line-height: 1; letter-spacing: -0.05em; }
.ag-sub { margin: 0; font-size: 18px; line-height: 30px; }

.ag-word { position: relative; display: inline-block; }
.ag-word::after {
  content: attr(data-text);
  position: absolute;
  inset: 0 0 -0.3em 0;            /* reaches below the line, so letters that hang down (the g in "Agent") get the gradient too */
  background: linear-gradient(90deg, #E7A0FE 0%, #6F68FF 33%, #E7A0FE 66%, #6F68FF 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  pointer-events: none;
}


/* (Problem V1/V2 carousel: no slide-in of its own any more; the whole block fades up with
   .cf-reveal like everything else) */

/* "Fin." (Figma): Instrument Serif, the i in italic; a whole screen to itself, the same size
   as the "Creatify" title (main.js copies the title's fitted size into --cf-title-size) */
.cf-fin { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; }
.cf-fin-text {
  margin: 0;
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: var(--cf-title-size, 72px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cf-ink);
}
.cf-fin-text em { font-style: italic; }

/* a frosted "Before" tag at the top centre of each V1 / V2 screenshot: these are Agent
   before my redesign, not my work */
.cf-version-before {
  position: absolute;
  z-index: 1;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  color: var(--cf-ink);
  pointer-events: none;
}

/* one big number per section, for skimmers (same style as the Skills 38% / 16%) */
.cf-bigstat { display: flex; align-items: center; gap: 20px; }
.cf-bigstat-num { font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 96px; line-height: 100px; letter-spacing: -0.05em; color: #7354F2; }
.cf-bigstat-label { max-width: 340px; font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 24px; line-height: 32px; letter-spacing: -0.02em; color: var(--cf-ink); }

/* Agent: the Skill-recommendation beat, and the icon redesign */
.ag-beat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 40px; align-items: center; }   /* (Figma: text | 560px image) */
.ag-beat .cf-ph { width: 100%; }
.ag-icon { display: flex; flex-direction: column; gap: 32px; }
.ag-icon-row { display: grid; grid-template-columns: 176fr minmax(0, 636fr) 260fr; gap: 24px; }
.ag-icon-row figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ag-icon-row img { display: block; width: 100%; height: 360px; object-fit: cover; border-radius: 15px; background: #F5F5F7; }
@media (max-width: 900px) {
  .ag-beat, .ag-icon-row { grid-template-columns: 1fr; }
  .ag-icon-row img { height: auto; }
  .cf-bigstat-num { font-size: 64px; line-height: 70px; }
}

/* a video with a Before / After pill (reuses the V1/V2 cards' .cf-version-before pill) */
.sk-media { position: relative; }

/* ================================
   HIGHLIGHTED PHRASES (replaces the bold): a lilac highlighter sweeps in from the left
   when the phrase comes on screen, like the other case studies (.highlight there);
   phrases in the same paragraph go one after another (highlights-text.js)
   ================================ */
strong.cf-hl {
  font-weight: inherit !important;   /* (no bold any more: the highlight does the emphasis) */
  padding: 1px 3px;
  margin: 0 -1px;
  border-radius: 0;
  background-image: linear-gradient(to right, rgba(210, 171, 255, 0.32), rgba(210, 171, 255, 0.32));   /* (paler: was 0.55) */
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.6s ease;
}
strong.cf-hl.animate-in { background-size: 100% 100%; }
/* on the lilac research card the lilac wouldn't show: white instead */
.rs-card--2 strong.cf-hl { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); }
/* on the dark research card: a lighter touch, so the white text stays readable */
.rs-card--3 strong.cf-hl { background-image: linear-gradient(to right, rgba(210, 171, 255, 0.35), rgba(210, 171, 255, 0.35)); }
@media (prefers-reduced-motion: reduce) { strong.cf-hl { transition: none; } }

.lightbox-video[hidden], .lightbox img[hidden] { display: none; }

/* Research: the grey background runs the full width of the screen (ignoring the page's
   side margins, like Figma), with the TL;DR and the cards each under their own heading */
#research.cf-section {
  background: var(--cf-card);
  box-shadow: 0 0 0 100vmax var(--cf-card);   /* paints the grey out to the screen edges... */
  clip-path: inset(0 -100vmax);               /* ...but never above or below the section */
  border-radius: 0;
  padding-top: 100px;
  padding-bottom: 100px;
}
.cf-bigstat { justify-content: center; }   /* (every big number sits centred: Research, Skills) */
.rs-block { display: flex; flex-direction: column; gap: 20px; }
.rs-subhead {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 44px;                /* same as "Get the highlights." (Figma: 50) */
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--cf-ink);
}
/* the TL;DR sits in a white rounded box */
#research .rs-glance { background: #fff; border-radius: 30px; padding: 80px 100px; gap: 40px; }
#research .rs-glance-item { padding-top: 0; border-top: 0; }
@media (max-width: 900px) {
  #research .rs-glance { padding: 40px 32px; }
  .rs-subhead { font-size: 32px; }
  #research.cf-section { padding-top: 64px; padding-bottom: 64px; }
}

/* Skills: evolution of the Skill card (four versions in a row, each with why it changed).
   Each card sits centred in the same 280×227 spot, so the numbers and captions line up. */
.sk-evo { gap: 20px; padding-top: 80px; padding-bottom: 80px; }
.sk-evo-label { text-align: center; font-size: 13px; letter-spacing: 0.08em; }
.sk-evo-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sk-evo-item { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.sk-evo-card { aspect-ratio: 280 / 227; display: flex; align-items: center; justify-content: center; }
.sk-evo-card img { display: block; width: 98%; height: auto; }
.sk-evo-item figcaption { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 22px; color: var(--cf-gray); }
.sk-evo-num { font-family: 'Haffer Mono', monospace; font-size: 13px; line-height: 18px; letter-spacing: 0.04em; color: var(--cf-accent); }
@media (max-width: 900px) { .sk-evo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } }

/* ================================
   NAVIGATION: two passes (main rail, then the chat sidebar)
   ================================ */
.nav-pass { display: flex; flex-direction: column; gap: 12px; }
.nav-pass .sk-title { font-size: 32px; line-height: 38px; margin-top: 6px; }
.nav-pass .cf-body { max-width: none; font-size: 18px; line-height: 30px; }
.nav-list { margin: 4px 0 0; padding-left: 22px; font-size: 18px; line-height: 30px; color: var(--cf-ink); }
.nav-list strong { font-weight: 700; }
/* the audit: five sidebars, all the same height (columns sized by each image's width) */
.nav-audit { display: flex; flex-direction: column; gap: 14px; }
.nav-audit-row { display: grid; grid-template-columns: 469fr 380fr 375fr 515fr 431fr; gap: 40px; align-items: start; }
.nav-audit-row figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.nav-audit-row img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.nav-audit-row figcaption { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 18px; color: var(--cf-gray); }
.nav-audit-row figcaption .sk-label { font-size: 12px; color: var(--cf-ink); }
/* the Slack vote beside its note */
.nav-vote { display: grid; grid-template-columns: 300px minmax(0, 560px); gap: 48px; align-items: center; }
.nav-vote > img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
.nav-vote-text { display: flex; flex-direction: column; gap: 14px; }
.nav-vote-text .cf-body { font-size: 18px; line-height: 27px; }
/* before / after */
.nav-ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.nav-ba figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.nav-ba img { display: block; width: 100%; height: auto; border-radius: 10px; }
.nav-ba .sk-label { font-size: 12px; color: var(--cf-gray); }
@media (max-width: 900px) {
  .nav-audit-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .nav-vote, .nav-ba { grid-template-columns: 1fr; }
  .nav-vote > img { max-width: 300px; }
}

/* the chat-sidebar video with the Problem screenshot's labels (TRIAL). It doesn't grow
   or darken, so the frost can be a real backdrop blur over the playing video instead
   of the Problem's blurred-screenshot copy. */
.ps-stage--plain .ps-dim { display: none; }
.ps-stage--plain .ps-pill::after { display: none; }
.ps-stage--plain .ps-pill { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.ps-stage--plain:not(.is-list) .ps-frame { border-radius: 20px; }

/* ================================
   04 · LOOK & FEEL — Apple-style explorer (look-feel.js)
   The whole section is grey, edge to edge. The explorer fills the screen: pills on the
   left, the laptop on the right. Everything inside is laid out in Figma's 1472×741 frame
   (.lf-box), scaled by --u to fit the screen and centred. Each pill's state moves the
   laptop (zooming into the detail) and swaps its screen; "composer" swaps the laptop for
   the live Agent hero, edge to edge.
   ================================ */
.lf { margin-bottom: var(--cf-card-gap); }
.lf-top.cf-section { margin-bottom: 64px; }
.lf-explorer {
  --u: min(calc(100vw / 1472), calc(100svh / 741));
  position: relative;
  height: 100vh;
  height: 100svh;
  background: var(--cf-card);   /* grey, exactly one screen */
  overflow: hidden;
  isolation: isolate;
}
.lf-box {
  /* centred without a transform, so it doesn't form its own layer: the live hero can
     then sit above the laptop but below the pills */
  position: absolute;
  left: calc(50% - 736 * var(--u));
  top: calc(50% - 370.5 * var(--u));
  width: calc(1472 * var(--u));
  height: calc(741 * var(--u));
}

/* the laptop: Figma's spots per state (left / top / width in the 1472×741 frame) */
.lf-mac {
  z-index: 1;
  --x: 304; --y: 11; --w: 1140;
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  aspect-ratio: 2643 / 1576;
  /* moved with left/top/width rather than a transform, so the pills' backdrop blur still
     sees it (Chrome's backdrop-filter can't see into transformed layers) */
  transition: left 0.9s var(--lf-ease), top 0.9s var(--lf-ease), width 0.9s var(--lf-ease), opacity 0.5s ease;
}
.lf-explorer { --lf-ease: cubic-bezier(0.65, 0, 0.35, 1); }
.lf-explorer[data-state="gradient"] .lf-mac { --x: 264; --y: 28; --w: 1374; }
/* display font: dives into the screen until "What will you create today?" sits big,
   right of the pills (the gradient recording, where the heading never moves) */
.lf-explorer[data-state="font"] .lf-mac { --x: -588; --y: -184; --w: 2600; }
.lf-explorer[data-state="sidebar"] .lf-mac { --x: 400; --y: -15; --w: 2002; }
/* consistent chips: zoomed until the laptop's top edge is just off screen, the composer,
   chips and their dropdowns (the screen's lower middle) right of the pills */
.lf-explorer[data-state="chips"] .lf-mac { --x: 60; --y: -12; --w: 1440; }
/* glass composer: dives in until the screen fills the whole view (the laptop nearly all
   off screen), then the live hero fades in over it (.lf-hero) */
.lf-explorer[data-state="composer"] .lf-mac { --x: -864; --y: -497; --w: 3200; }
.lf-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
/* the screen opening (measured from the frame image), tucked a hair under the bezel */
.lf-screen {
  position: absolute;
  left: 11.55%;
  top: 3.58%;
  width: 76.9%;
  height: 83.75%;
  overflow: hidden;
  background: #090A0A;
}
.lf-v {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.lf-v.is-on { opacity: 1; }
/* floating sidebar: a 16:9 recording filling the (squarer) screen; trimmed from the
   right, never the left, so the sidebar stays whole */
.lf-v--left { object-position: left center; }

/* the live Agent hero (a copy of the page's), edge to edge; its composer intro replays */
.lf-hero {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  z-index: 2;
}
.lf-explorer[data-state="composer"] .lf-hero { opacity: 1; visibility: visible; transition: opacity 0.6s ease 0.55s; }
.lf-hero .ah-stage {
  left: calc(50% + 214 * var(--u));   /* centred under Figma's right column (x ≈ 950 of 1472); size: look-feel.js */
}

/* ---- pills ---- */
.lf-pills {
  position: absolute;
  left: calc(100 * var(--u));
  /* centred while all are closed (5 × 53px + 4 × 12px gaps = 313px), then pinned there: an
     opening pill only pushes the ones below it down, so nothing slides out from under the
     mouse while hovering */
  top: calc(50% - 156.5px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  z-index: 3;
}
.lf-pill {
  position: relative;
  width: var(--w, 200px);
  height: var(--h, 53px);
  padding: 0;
  border: 0;
  border-radius: 40px;
  background: rgba(232, 232, 237, 0.7);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: var(--cf-ink);
  font-family: 'PP Neue Montreal', sans-serif;
  font-size: 16px;
  line-height: 25px;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), border-radius 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s ease;
}
.lf-pill:hover { background-color: rgba(222, 222, 228, 0.8); }
.lf-pill.is-open { border-radius: 28px; cursor: default; }
.lf-pill:focus-visible { outline: 2px solid var(--nav-orange); outline-offset: 3px; }
/* circled plus (Phosphor PlusCircle), turns into a × when open */
.lf-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  width: 19.5px;
  height: 19.5px;
  margin-top: -9.75px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lf-icon::before, .lf-icon::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 1.5px;
  margin: -0.75px 0 0 -4.5px;
  background: currentColor;
  border-radius: 1px;
}
.lf-icon::after { transform: rotate(90deg); }
.lf-pill.is-open .lf-icon { transform: rotate(45deg); cursor: pointer; }
.lf-label, .lf-detail { position: absolute; left: 52px; top: 14px; transition: opacity 0.2s ease; }
.lf-label { font-weight: 500; white-space: nowrap; }
.lf-detail { width: 344px; font-weight: 400; opacity: 0; pointer-events: none; }
.lf-detail strong { font-weight: 500; }
.lf-pill.is-open .lf-label { opacity: 0; }
.lf-pill.is-open .lf-detail { opacity: 1; transition-delay: 0.15s; }

/* phones: no full-screen stage; the laptop on top (no zooming), the pills listed below */
@media (max-width: 760px) {
  .lf-explorer { --u: calc((100vw - 32px) / 1140); height: auto; overflow: visible; padding: 0 16px 24px; }
  .lf-box { position: relative; left: auto; top: auto; width: 100%; height: auto; display: flex; flex-direction: column; gap: 20px; }
  .lf-mac, .lf-explorer[data-state] .lf-mac { position: relative; left: 0; top: 0; width: 100%; --x: 0; --y: 0; --w: 1140; }
  .lf-explorer[data-state="composer"] .lf-mac { opacity: 1; }
  .lf-hero { inset: 0 16px auto; height: calc((100vw - 32px) * 1576 / 2643); border-radius: 12px; }
  .lf-hero .ah-stage { left: 50%; }
  .lf-pills { position: static; transform: none; width: 100%; }
  .lf-pill { max-width: 100%; }
}

/* the navigation section is now a subsection of Look & feel */
.cf-h2--sub { font-size: 40px !important; line-height: 46px !important; }
/* (while the pills' pop-in intro runs, gsap drives their width: no CSS transition on it) */
.lf-explorer.is-intro .lf-pill { transition: background-color 0.2s ease; }

/* a caption under an image/video, for skimmers: which version it is and what it shows
   (same small grey mono as the Navigation before/after captions) */
.sk-captioned { display: flex; flex-direction: column; gap: 10px; }
.sk-caption {
  margin: 0;
  font-family: 'Haffer Mono', monospace;
  font-size: 12px;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--cf-gray);
}

/* ================================
   03 · AGENT SKILLS — revamp (Figma, Oct 8)
   Grey band edge to edge → "Looking back" box on white → grey band → reception block.
   ================================ */
.sk-wrap { scroll-margin-top: 20px; }
.sk-band { background: var(--cf-card); padding: 100px 0; margin-bottom: var(--cf-card-gap); }
.sk-band > .cf-section { margin-bottom: 0; }
.sk-band .cf-inner { gap: 64px; }
.sk-wrap .sk-sub { gap: 20px; }
.sk-wrap .sk-body { gap: 20px; }
/* sub-headings (Figma: DM Sans SemiBold 40 / 50) */
.sk-h { margin: 0; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 40px; line-height: 45px; letter-spacing: -0.04em; color: var(--cf-ink); }
.sk-h--big { font-size: 50px; line-height: 55px; letter-spacing: -0.05em; }

/* the chip + dropdown box (ink at 5%) */
.sk-box { display: flex; flex-direction: column; gap: 64px; padding: 80px; border-radius: 30px; background: rgba(0, 0, 0, 0.05); }
/* its two recordings run past the box, out to the page's margins (Figma: 1388 of 1470) */
.sk-wide {
  --skw: min(calc(100vw - 82px), 1388px);
  width: var(--skw);
  margin-left: calc((100% - var(--skw)) / 2);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.sk-wide-item { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sk-wide-item figcaption, .sk-wrap .sk-caption, .nav-sec .sk-caption {
  font-family: 'PP Neue Montreal', sans-serif; font-weight: 500; font-size: 16px; line-height: 19px;
  text-transform: none; color: var(--cf-ink);
}
.sk-wide-item figcaption { text-align: center; }
.sk-after-tag {
  position: absolute; z-index: 1; top: 17px; left: 50%; transform: translateX(-50%);
  padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.85);
  font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 14px; line-height: 18px; color: var(--cf-ink);
  pointer-events: none;
}

/* numbered feature columns: under the galleries, and the evolution captions */
.sk-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.sk-col { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; }
.sk-col-num { font-family: 'HafferXH', monospace; font-weight: 400; font-size: 30px; line-height: 36px; color: var(--cf-ink); }
.sk-col-title { font-family: 'PP Neue Montreal', sans-serif; font-weight: 500; font-size: 18px; line-height: 26px; color: var(--cf-ink); }
.sk-col-text { font-size: 16px; line-height: 24px; color: rgba(30, 28, 29, 0.7); }

/* Looking back: its own rounded grey box on the white page */
.sk-lookback .sk-lookback-box {
  margin-inline: calc(-1 * var(--cf-pad-x));
  padding: 100px clamp(24px, 7vw, 98px);
  border-radius: 30px;
  background: var(--cf-card);
  display: flex; flex-direction: column; gap: 24px;
}
.sk-lookback .sk-issues { gap: 22px; }
.sk-lookback .sk-issue {
  justify-content: space-between; min-height: 466px;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(24, 24, 18, 0.1); color: var(--cf-ink);
}
.sk-issue-body { display: flex; flex-direction: column; gap: 12px; }
.sk-lookback .sk-turn { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 37px 0; text-align: center; }
.sk-turn-lead, .sk-turn-q { margin: 0; font-family: 'DM Sans', sans-serif; font-weight: 500; color: var(--cf-ink); }
.sk-turn-lead { font-size: 26px; line-height: 34px; letter-spacing: -0.02em; }
.sk-turn-q { font-size: 40px; line-height: 45px; letter-spacing: -0.04em; }

/* white cards on the grey band */
.sk-card-white { padding: 80px; border-radius: 20px; background: #fff; }
.sk-modal { display: grid; grid-template-columns: minmax(0, 316fr) minmax(0, 752fr); gap: 40px; align-items: center; }
.sk-callout2 { display: flex; flex-direction: column; gap: 20px; padding: 80px 100px; }   /* (title → text: 20, Figma) */
.sk-callout2 .sk-body p { line-height: 28px; }

/* Evolution of the Skill card */
.sk-evo-box { display: flex; flex-direction: column; gap: 24px; padding: 80px 100px; border-radius: 20px; background: rgba(30, 28, 29, 0.05); }
.sk-evo-title { text-align: center; }
.sk-evo-box .sk-evo-row { align-items: start; position: relative; }
.sk-evo-box .sk-evo-card { align-items: flex-start; }
.sk-evo-box .sk-evo-card img { width: 100%; }
.sk-evo-box .sk-evo-item figcaption.sk-col { padding-top: 0; gap: 6px; color: var(--cf-ink); font-size: inherit; }
.sk-evo-box .sk-col-text { font-size: 15px; line-height: 22px; }

/* the reception's paragraph, under its statement */
.cf-hmw-body { margin: 0; max-width: 1140px; font-size: 18px; line-height: 30px; color: var(--cf-ink); }
.cf-hmw-body strong { font-weight: 700; }

@media (max-width: 900px) {
  .sk-box, .sk-card-white, .sk-callout2, .sk-evo-box { padding: 32px 24px; }
  .sk-wide { width: 100%; margin-left: 0; grid-template-columns: 1fr; }
  .sk-cols, .sk-evo-box .sk-evo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .sk-modal { grid-template-columns: 1fr; }
  .sk-lookback .sk-issues { grid-template-columns: 1fr; }
  .sk-lookback .sk-issue { min-height: 0; }
  .sk-h { font-size: 30px; line-height: 36px; }
  .sk-h--big { font-size: 34px; line-height: 40px; }
  .sk-turn-q { font-size: 28px; line-height: 34px; }
}

/* ================================
   CORNER RADIUS SCALE (one place, overriding the older one-off values above)
   30  rounded backgrounds as wide as the content (grey sections, boxes, statement
       blocks, the white / evolution cards on the Skills bands)
   20  full-width media + big cards (screenshots, recordings and placeholders that span
       the content; the V1/V2 cards; the research accordion cards)
   15  medium media + cards (~half the content width: side-by-side recordings, the
       modal recording, charts, two-up cards and their neighbours)
   12  small media + cards (~a third of the content width or less)
   10  media nested inside a card (one step below the card around it)
   ================================ */
:root { --r-xl: 30px; --r-lg: 20px; --r-md: 15px; --r-sm: 12px; --r-xs: 10px; }

/* 30 */
.sk-card-white, .sk-evo-box { border-radius: var(--r-xl); }

/* 20 */
.sk-video, .sk-gallery > img, .ps-frame, .cf-ph, .cf-version, .rs-card { border-radius: var(--r-lg); }

/* 15 */
.sk-wide .sk-video, .sk-modal .sk-video,
.ag-beat .cf-ph, .cf-split .cf-ph, .cf-card,
.rs-chart, .rs-themes, .rs-shot img,
.nav-ba img, .ag-icon-row img, .sk-shot { border-radius: var(--r-md); }

/* 12 */
.sk-lookback .sk-issue, .cf-card--tight,
.nav-vote > img, .nav-audit-row img { border-radius: var(--r-sm); }

/* 10: nested inside a card */
.cf-card > .cf-ph, .cf-card--tight > .cf-ph, .sk-issue img { border-radius: var(--r-xs); }

/* the slightly darker grey for boxes inside a grey section (Figma, Oct 8: #EDEDF0) */
:root { --cf-card-2: #EDEDF0; }
.sk-box, .sk-evo-box, .rs-card--1, .nav-subbox { background: var(--cf-card-2); }

/* ================================
   NAVIGATION — "Untangling Agent's two sidebars" (Figma, Oct 8): a grey section of
   its own; Pass 1, the team vote box, before/after, the Agent icon box, the final video
   ================================ */
.nav-sec .cf-inner { gap: 64px; }
.nav-sec .nav-pass { gap: 12px; }
.nav-sec .nav-audit { margin-top: 12px; }
.nav-subbox { border-radius: var(--r-xl); padding: 80px; }
/* the team vote: text beside the Slack thread (in a white frame) */
.nav-sec .nav-vote { display: grid; grid-template-columns: minmax(0, 403fr) minmax(0, 470fr); gap: 48px; align-items: center; }
.nav-vote-text { display: flex; flex-direction: column; gap: 14px; }
.nav-vote-text .cf-body { display: flex; flex-direction: column; gap: 14px; font-size: 18px; line-height: 27px; }
.nav-vote-text .cf-body p, .nav-vote-text .nav-list { margin: 0; }
.nav-vote-text .nav-list { line-height: 27px; }
.nav-vote-shot { display: flex; justify-content: center; padding: 21px 20px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px rgba(24, 24, 18, 0.1); }
.nav-vote-shot img { display: block; width: min(300px, 100%); height: auto; aspect-ratio: 300 / 464; object-fit: cover; object-position: top; border-radius: var(--r-xs); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
/* the Agent icon box */
.nav-icon { display: flex; flex-direction: column; gap: 64px; }
.nav-icon-top { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 64px; align-items: start; }
.nav-icon-orig { display: block; width: 150px; height: auto; }
.nav-icon-sketch { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.nav-icon-sketch img { display: block; width: 100%; height: auto; aspect-ratio: 1060 / 461; object-fit: cover; border-radius: var(--r-lg); }
.nav-icon-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 253px)); justify-content: center; gap: 64px; }
.nav-icon-tiles figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.nav-icon-tiles img { display: block; width: 100%; height: auto; }
/* the final video: a little wider than the column (like the Skills chip recordings) */
.nav-final { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nav-final-title { text-align: center; }
.nav-final-shot {
  /* the grey section's full width (the section is the page width minus its gutters, up to
     1380px), sitting right on its bottom edge: the section clips its bottom corners */
  width: min(calc(100vw - 2 * var(--cf-gutter)), 1380px);
  flex: none;
}
.nav-final-shot .ps-frame { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.cf-section--gray.nav-sec { padding-bottom: 0; overflow: hidden; }
@media (max-width: 900px) {
  .nav-subbox { padding: 32px 24px; }
  .nav-sec .nav-vote, .nav-icon-top { grid-template-columns: 1fr; }
  .nav-icon-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .nav-final-shot { width: calc(100% + 2 * var(--cf-pad-x)); }
}

/* ================================
   05 · REFLECTION — four takeaways, 2 × 2 (Figma, Oct 8)
   ================================ */
.rf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 536px)); gap: 48px; }
.rf-item { display: flex; flex-direction: column; gap: 14px; }
.rf-num { font-family: 'Haffer Mono', monospace; font-weight: 400; font-size: 30px; line-height: 36px; color: var(--cf-ink); }   /* (Figma: Haffer Mono 30, ink) */
.rf-title { margin: 0; font-family: 'PP Neue Montreal', sans-serif; font-weight: 500; font-size: 36px; line-height: 46px; color: var(--cf-ink); }
.rf-text { margin: 0; font-size: 16px; line-height: 26px; color: var(--cf-ink); }
.rf-text strong { font-weight: 700; }
@media (max-width: 800px) {
  .rf-grid { grid-template-columns: 1fr; gap: 36px; }
  .rf-title { font-size: 28px; line-height: 36px; }
}

/* ================================
   04 · IN-CHAT WORKFLOWS (Figma, Oct 8)
   ================================ */
.chat-sec .cf-inner { gap: 64px; }
.chat-sec .sk-caption { font-family: 'PP Neue Montreal', sans-serif; font-weight: 500; font-size: 16px; line-height: 19px; text-transform: none; color: var(--cf-ink); }
.chat-ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.chat-ba figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.chat-ba img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
/* the audit: three screenshots, one height, columns sized by each one's width */
.chat-audit { display: grid; grid-template-columns: 276fr 251fr 485fr; gap: 24px; align-items: start; margin-top: 4px; }
.chat-audit figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.chat-audit img { display: block; width: 100%; aspect-ratio: calc(var(--w) / 300); object-fit: cover; object-position: top; border-radius: var(--r-sm); }
.chat-audit figcaption { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 22px; color: var(--cf-gray); }
.chat-audit figcaption b { font-family: 'Haffer Mono', monospace; font-weight: 400; font-size: 12px; line-height: 15px; text-transform: uppercase; color: var(--cf-ink); }
/* six input types */
.chat-types-box { display: flex; flex-direction: column; gap: 32px; padding: 64px; border-radius: var(--r-xl); background: var(--cf-card-2); }
.chat-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; align-items: start; }
.chat-types figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.chat-types img { display: block; width: 100%; height: auto; }
.chat-types figcaption { font-family: 'Haffer Mono', monospace; font-size: 12px; line-height: 15px; text-transform: uppercase; color: var(--cf-gray); }
/* the three ways through */
.chat-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 4px; }
.chat-path { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--r-sm); background: #fff; }
.chat-path-img { height: 200px; display: flex; align-items: center; justify-content: center; }
.chat-path-img img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.chat-path h4 { margin: 0; font-family: 'PP Neue Montreal', sans-serif; font-weight: 500; font-size: 22px; line-height: 28px; color: var(--cf-ink); }
.chat-path p { margin: 0; font-size: 16px; line-height: 24px; color: rgba(30, 28, 29, 0.7); }
/* the summary */
.chat-summary { display: flex; flex-direction: column; gap: 20px; }
.chat-summary .sk-h { text-align: center; }
.chat-summary > img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
/* Skills, proactively */
.chat-skill { display: grid; grid-template-columns: minmax(0, 295fr) minmax(0, 625fr); gap: 40px; align-items: center; }
.chat-skill > img { display: block; width: 100%; aspect-ratio: 625 / 467; object-fit: cover; border-radius: var(--r-md); }
.chat-quote { text-align: center; }
@media (max-width: 900px) {
  .chat-ba, .chat-audit, .chat-paths, .chat-skill { grid-template-columns: 1fr; }
  .chat-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat-types-box { padding: 32px 24px; }
}
.chat-sec .cf-head--v2 .cf-body { max-width: none; }   /* (the intro runs the full column, like Figma) */

/* image strokes (Figma: 1px inside). An outline, not an inset box-shadow: a picture
   paints over its own inset shadow, so that never showed */
.chat-ba img, .chat-summary > img { outline: 1px solid rgba(24, 24, 18, 0.1); outline-offset: -1px; }
.nav-audit-row img { box-shadow: none; outline: 1px solid rgba(0, 0, 0, 0.08); outline-offset: -1px; }

/* ================================
   04 · VISUAL DIRECTION (Figma, Oct 8)
   ================================ */
.vd-sec .cf-inner { gap: 64px; }
.vd-sec .cf-head--v2 .cf-body { max-width: none; }
/* the two directions, side by side, a little wider than the column (Figma: 1288 of 1120) */
.vd-dirs {
  --vdw: min(calc(100vw - 2 * var(--cf-gutter) - 40px), 1288px);
  width: var(--vdw);
  margin-left: calc((100% - var(--vdw)) / 2);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
}
.vd-dir { display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: var(--r-md); background: #fff; }
.vd-dir img { display: block; width: 100%; height: auto; aspect-ratio: 568 / 369; object-fit: cover; border-radius: var(--r-md); }
.vd-dir-label { font-family: 'Haffer Mono', monospace; font-size: 13px; line-height: 17px; text-transform: uppercase; color: var(--cf-accent); }
.vd-dir-title { margin: 0; font-family: 'PP Neue Montreal', sans-serif; font-weight: 500; font-size: 28px; line-height: 34px; color: var(--cf-ink); }
.vd-dir-text { max-width: 484px; font-size: 16px; line-height: 26px; color: var(--cf-gray); }
.vd-dir-text p { margin: 0; }
.vd-dir-text ul { margin: 8px 0 0; padding-left: 20px; }
.vd-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.vd-tab { padding: 8px 16px; border-radius: 40px; background: #fff; box-shadow: inset 0 0 0 1px #D9D9D9; font-weight: 500; font-size: 15px; line-height: 18px; color: var(--cf-ink); }
.vd-tab--on { background: var(--cf-ink); box-shadow: none; color: #fff; }
/* the prototype video, with a lilac outline (Figma) */
.vd-proto { width: 100%; border-radius: var(--r-lg); outline: 1.5px solid #B8A8FF; outline-offset: -1.5px; }
@media (max-width: 900px) {
  .vd-dirs { width: 100%; margin-left: 0; grid-template-columns: 1fr; }
  .vd-dir { padding: 20px; }
}
/* a statement block's smaller two-paragraph note (the visual direction's reception) */
.cf-hmw-body--sm { display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 26px; }
.cf-hmw-body--sm p { margin: 0; }