:root {
  --max-w: 1024px;
  --wp: 5.5vw;   /* working path: side padding */
  --accent: #FE2B2B;

  /* Typographic scale */
  --fs-h1:   clamp(2.5rem, 5vw, 3rem);   /* page titles */
  --fs-h2:   1.875rem;                    /* section titles */
  --fs-sub:  1.5rem;                      /* subtitle / role */
  --fs-h3:   1.25rem;                     /* column headings */
  --fs-body: 1rem;                        /* body text */
  --fs-meta: 0.8rem;                      /* tools / meta */
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  background-color: #000;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  letter-spacing: -0.05em; /* fallback for browsers without % support */
  letter-spacing: -5%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  color: #b5b5b5;
}

/* Page fade-out before navigating */
body.is-leaving {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ── Layout ───────────────────────────── */

.page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 56px 80px calc(20vh + 3.5rem);
}

/* ── Tab bar ──────────────────────────── */

html {
  scroll-behavior: smooth;
}

.tabbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px var(--wp);
  background: transparent;
}

/* Scrolled state: accent-to-transparent gradient + short logo (toggled in index.html JS) */
.tabbar.is-stuck {
  background: linear-gradient(color-mix(in srgb, var(--accent) 50%, transparent), transparent);
  align-items: center;
}

.tabbar-links {
  display: flex;
  gap: 2.5rem;
}

/* Logo: 3 stepped lines + sublogo continuing the step */
.tabbar .logo {
  position: relative;
  display: block;
  clip-path: inset(0 -100vw 0 0);   /* vertical mask for the slide in/out; no side clipping */
  font-size: clamp(0.8125rem, 2.5vw, 1rem);
}

.logo-name span,
.logo-sub {
  display: block;
  color: #fff;
}

.logo-name,
.logo-short {
  display: block;
  color: #fff;
  font-size: 1.5em;
  font-weight: 600;
  line-height: 0.9em;
}

.logo-name span:nth-child(2) { padding-left: 0.8em; }
.logo-name span:nth-child(3) { padding-left: 1.6em; }

.logo-sub {
  padding-left: 4.5em;
  font-size: 0.75em;
  font-weight: 500;
}

/* Logo swap: the leaving logo slides up out of the mask,
   the entering one slides down into it after a short delay.
   The entering logo stays in flow so the bar takes its height. */
.logo-full,
.logo-short {
  display: block;
  transition: transform 0.3s ease;
}

.logo-full {
  transition-delay: 0.15s;
}

.tabbar .logo-short {
  position: absolute;
  top: 0;
  left: 0;
  padding-bottom: 0.15em;   /* room for the Q tail inside the mask */
  transform: translateY(-100%);
  transition-delay: 0s;
}

.tabbar.is-stuck .logo-full {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  transition-delay: 0s;
}

.tabbar.is-stuck .logo-short {
  position: static;
  transform: translateY(0);
  transition-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .logo-full,
  .logo-short {
    transition: none;
  }
}

.tabbar a {
  color: #fff;
  text-decoration: none;
  font-size: var(--fs-body);
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.tabbar a:hover {
  opacity: 0.6;
}

#about,
#work {
  scroll-margin-top: 96px;
}

/* ── Hero ─────────────────────────────── */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  text-align: right;
  overflow: hidden;
  isolation: isolate;
  margin-bottom: 20vh;
}

.hero-content {
  padding: 0 var(--wp) 2rem;
}

.hero-title-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  margin-bottom: 24px;
}

.hero-title-wrap h1 {
  font-size: 6rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.15;
}

.hero-line {
  font-size: 2rem;
  font-weight: 300;
  line-height: 2rem;
  /*color: #fff;*/
}

.avatar {
  position: relative;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  cursor: pointer;
}

.avatar-default {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  clip-path: circle(50%);
  transition: opacity 0.35s ease;
  z-index: 1;
}

.avatar-hover {
  position: absolute;
  top: 0;
  right: 0;
  width: 362px;
  height: 362px;
  object-fit: cover;
  border-radius: 12px;
  transform: scale(0.1657);
  transform-origin: top right;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 2;
}

.avatar:hover .avatar-default {
  opacity: 0;
}

.avatar:hover .avatar-hover {
  opacity: 1;
  transform: scale(1);
}

.hero-img {
  position: absolute;
  inset: 0 -25dvw 0 0;
  z-index: -1;
}

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

/* QRF outline, centred over the cover image, behind the hero text */
.hero-outline {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 90dvw;
  height: auto;
  margin: auto;
}

.hero-outline path {
  fill: none;
  stroke: var(--accent);
  opacity: .75;
  stroke-width: 0.1;
}

/* Hero entrance: cover → logo drop / outline wipe → title/line → scroll cue.
   fill-mode backwards so each element falls back to its own styles after
   (keeps the logo hover opacity working). */
@media (prefers-reduced-motion: no-preference) {
  .hero-img img {
    animation: hero-fade 1s ease backwards;
  }

  .hero-outline {
    animation: hero-wipe 3s ease-in-out 0.4s backwards;
  }

  .hero-title-wrap,
  .hero-line {
    animation: hero-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.9s backwards;
  }

  .hero-line {
    animation-delay: 1.05s;
  }

  .scroll-cue {
    animation:
      hero-fade 0.6s ease 1.9s backwards,
      hero-bob 3s ease-in-out 2.5s infinite;
  }

  .tabbar .logo {
    animation: hero-drop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 1s backwards;
  }
}

@keyframes hero-drop {
  from {
    opacity: 0;
    transform: translateY(-1rem);
  }
}

@keyframes hero-fade {
  from { opacity: 0; }
}

/* Reveals left → right and top → bottom at once */
@keyframes hero-wipe {
  from { clip-path: inset(0 100% 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
}

@keyframes hero-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(0.375rem); }
}

/* ── Intro ────────────────────────────── */

/* Break out of .page to the tabbar's wp edges (QRF. logo / links) */
.about {
  margin: 0 calc(var(--wp) - (100vw - 100%) / 2) 10vh;
}

.bio p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: #b5b5b5;
}

.bio {
  display: flex;
  align-items: flex-start;
  gap: 7.5rem;
}

.bio > p {
  flex: 1;
  font-size: 3rem;
  font-weight: 300;
  line-height: 3rem;
  color: var(--accent);
}

.bio-cols {
  list-style: none;
  flex: 0 0 20rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

@media (max-width: 900px) {
  .bio {
    flex-direction: column;
    gap: 4rem;
  }

  .bio-cols {
    flex-basis: auto;
  }
}

.bio-cols li {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bio-icon {
  width: 3rem;
  height: 3rem;
  color: #fff;
}

/* About typing: bio p writes itself with scroll; each li (icon wipe, then
   its p dropping in) switches on as the typing passes its threshold.
   .is-typing / .is-shown / .is-on / .is-caret are toggled in index.html JS. */
.sr-only {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bio.is-typing .bio-char {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.bio.is-typing .bio-char.is-shown {
  opacity: 1;
}

.bio-char.is-caret {
  position: relative;
}

.bio-char.is-caret::after {
  content: '';
  position: absolute;
  left: 100%;
  /* Offsets are from the span's content area, which for Poppins
     (ascent 1.05em / descent 0.35em) starts well above the glyphs:
     baseline sits at 1.05em, ascenders at ~0.3em */
  top: 0.3em;
  width: 0.06em;
  height: 0.85em;
  margin-left: 0.04em;
  background: #fff;
  animation: bio-caret 1s steps(1) infinite;
}

/* Nothing typed yet: caret sits before the first char */
.bio-char.is-caret--start::after {
  left: 0;
  margin-left: -0.1em;
}

@keyframes bio-caret {
  50% { opacity: 0; }
}

.bio.is-typing .bio-icon {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s ease-in-out;
}

.bio.is-typing .bio-cols li > p {
  opacity: 0;
  transform: translateY(-0.75rem);
  transition: opacity 0.5s ease 0.35s, transform 0.5s ease 0.35s;
}

.bio.is-typing .bio-cols li.is-on .bio-icon {
  clip-path: inset(0 0 0 0);
}

.bio.is-typing .bio-cols li.is-on > p {
  opacity: 1;
  transform: translateY(0);
}

/* ── Scroll cue ───────────────────────── */

.scroll-cue {
  display: inline-block;
  margin-top: 2rem;
  cursor: pointer;
}

.scroll-cue img {
  width: 16px;
  height: 16px;
  transform: rotate(90deg);
}

/* ── Work ─────────────────────────────── */

.work {
  position: relative;
  isolation: isolate;
}

/* Outlined "Work" watermark: 75dvw wide, overflowing the viewport's left edge by 5vw */
.work-watermark {
  position: absolute;
  top: 0.1em;
  left: calc(-5vw - (100vw - 100%) / 2);
  z-index: -1;
  width: 75dvw;
  font-size: 32dvw;
  font-weight: 600;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* h2 + both card rows, spanning the tabbar's wp edges (aligned with the About p) */
.work-inner {
  container-type: inline-size;
  width: calc(100vw - 2 * var(--wp));
  margin-left: calc(var(--wp) - (100vw - 100%) / 2);
}

.work h2 {
  margin-top: 12rem;
  font-size: 3rem;
  font-weight: 600;
  color: #fff;
}

.work-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.work-title {
  font-size: 1rem;
  font-weight: 400;
}

.work-years {
  font-size: 1.25rem;
  font-weight: 300;
  color: #999;
}

/* Selected work — cards */

/* Both rows: the hovered card widens, the others shrink to make room,
   height never changes */
.work-cards,
.work-list--legacy {
  list-style: none;
  display: flex;
  gap: 0.5rem;
}

.work-cards {
  height: 80vh;
  margin-top: 2rem;
}

/* Secondary row: right-aligned under the main row, square cards at rest
   (height = 1/5 of the row) */
.work-list--legacy {
  justify-content: flex-end;
  height: calc((100cqw - 4 * 0.5rem) / 5);
  margin-top: 0.5rem;
}

.work-cards li,
.work-list--legacy li {
  display: flex;
  min-width: 0;
  transition: flex-basis 0.5s ease;
}

/* 50/50 at rest; on hover 2/3 + 1/3. Both widths are explicit (no flex-shrink),
   like the secondary row, so the two transitions always add up to the row */
.work-cards li {
  flex: 0 0 calc((100% - 0.5rem) / 2);
}

.work-cards:has(li:hover, li:focus-within) li {
  flex-basis: calc((100% - 0.5rem) / 3);
}

.work-cards:has(li:hover, li:focus-within) li:is(:hover, :focus-within) {
  flex-basis: calc((100% - 0.5rem) * 2 / 3);
}

.work-list--legacy li {
  flex: 0 1 calc((100% - 4 * 0.5rem) / 5);
}

.work-list--legacy li:hover,
.work-list--legacy li:focus-within {
  flex-basis: calc((100% - 2 * 0.5rem) / 3);
}

.work-card,
.work-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 1.5rem;
  border-radius: 1.5rem;
  background: #8c8c8c;
  color: #000;
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

.work-card:hover,
.work-item:hover,
.work-card:focus-visible,
.work-item:focus-visible {
  background: #d6d6d6;
}

.work-arrow {
  display: none;
}

/* Legacy row (Editor, Admin): light grey at rest and on hover */
.work-item,
.work-item:hover,
.work-item:focus-visible {
  background: #c8c8c8;
}

/* All 4 cards: stacking layers = thumb (0) < title gradient (2) < copy (3) */
.work-card,
.work-item {
  position: relative;
  isolation: isolate;
}

.work-card .work-copy,
.work-item .work-copy {
  position: relative;
  z-index: 3;
  gap: 0;
}

.work-card .work-title,
.work-item .work-title {
  line-height: 1.15;
}

/* Smooth alpha gradient behind the title, fades in on hover for readability */
.work-card::after,
.work-item::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 10rem;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.4) 30%,
    rgba(0, 0, 0, 0.18) 60%,
    rgba(0, 0, 0, 0.05) 85%,
    rgba(0, 0, 0, 0) 100%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.work-card:hover::after,
.work-card:focus-visible::after,
.work-item:hover::after,
.work-item:focus-visible::after {
  opacity: 1;
}

/* Legacy row thumbnails: anchored to the card's bottom edge so they grow
   upward, 75% of the card at rest, 90% on hover, behind the title.
   Editor sticks right, Admin left */
.work-item-thumb {
  position: absolute;
  bottom: 0;
  z-index: 0;
  display: block;
  width: 75%;
  height: auto;
  border-radius: 0.25rem;
  transition: width 0.5s ease;
}

.work-item-thumb--end {
  right: 0;
}

.work-item-thumb--start {
  left: 0;
}

.work-item:hover .work-item-thumb,
.work-item:focus-visible .work-item-thumb {
  width: 90%;
}

.work-card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: #111;
  overflow: hidden;
}

.work-card-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top;
}

/* Composed mockup thumbs — absolute layers, card clips the overflow */

.work-card-thumb .work-card-mock {
  position: absolute;
  height: auto;
  object-fit: initial;
  transition: transform 0.5s ease;
}

.work-card:hover .work-card-mock {
  transform: scale(1.05);
}

.work-card-thumb--vinswipe {
  --primary: #841C4B;
  --secondary: #f8cc84;
  --bg: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--secondary) 90%, transparent) 0%, color-mix(in srgb, var(--primary) 90%, transparent) 100%), var(--bg);
}

.work-card-thumb--vinswipe .work-card-mock {
  width: 40%;
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.work-card-thumb .work-card-mock--duel {
  left: 24%;
  top: 10%;
  z-index: 1;
}

.work-card-thumb .work-card-mock--favs {
  left: 60%;
  top: 22%;
}

.work-card-thumb .work-card-bg {
  position: absolute;
  inset: 0;
  opacity: 0.5;
}

.work-card-thumb .work-card-mock--acr-admin {
  width: 90%;
  left: -5%;
  top: 5%;
  border-radius: 0.25rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.work-card-thumb .work-card-mock--acr-campus {
  width: 90%;
  right: -5%;
  top: 50%;
  z-index: 1;
  border-radius: 0.25rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.work-card-thumb--3w {
  background: #facac5;  /*radial-gradient(ellipse at top, #facac5 0%, #7b0323 100%);*/
}

/* Video thumb fills the whole card, edge to edge, behind the title */
.work-card:has(.work-card-video) {
  position: relative;
}

.work-card-thumb:has(.work-card-video) {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

.work-card:has(.work-card-video) .work-card-body {
  position: relative;
}

.work-card-thumb .work-card-poster,
.work-card-thumb .work-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Video sits over the poster and fades in once it is actually playing (.is-playing, index.html JS) */
.work-card-thumb .work-card-video {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.work-card-thumb .work-card-video.is-playing {
  opacity: 1;
}

.work-card-thumb--rp {
  background: #ffffff;
}

.work-card-thumb .work-card-mock--rp-dk,
.work-card-thumb .work-card-mock--3w-tv {
  width: 95%;
  right: -10%;
  top: 5%;
  border-radius: 0.25rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.work-card-thumb .work-card-mock--rp,
.work-card-thumb .work-card-mock--3w-play {
  width: 35%;
  left: 8%;
  bottom: -2%;
  z-index: 1;
  border-radius: 0.25rem;
}

.work-card .work-title,
.work-item .work-title {
  font-size: 2rem;
  font-weight: 400;
}

.work-card-tagline {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0.25rem 0 0.5rem;
}

.work-card .work-years,
.work-item .work-years {
  color: inherit;
}

.work-card .work-title,
.work-card .work-card-tagline,
.work-card .work-years,
.work-item .work-title,
.work-item .work-years {
  color: #fff;
}

/* "See case" chip that replaces the cursor over any card (positioned in index.html JS) */
.work-cursor {
  --x: 0px;
  --y: 0px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--accent);
  color: #000;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  translate: calc(var(--x) - 50%) calc(var(--y) - 50%);
  scale: 0;
  transition: scale 0.2s ease;
}

.work-cursor.is-visible {
  scale: 1;
}

@media (hover: hover) and (pointer: fine) {
  .work-card,
  .work-item {
    cursor: none;
  }
}

/* Work reveal: h2 slides in first; main row = first card from the left, last
   from the right, any in between fade in place; legacy row slides from the right.
   Animates the <a>, not the li, so the li flex-basis hover transition stays intact.
   .is-reveal / .is-in are toggled in index.html JS. */
.work.is-reveal h2,
.work.is-reveal .work-card,
.work.is-reveal .work-item {
  opacity: 0;
  transition:
    opacity 0.8s ease,
    translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    background-color 0.3s ease;
}

.work.is-reveal h2 {
  translate: -5vw 0;
}

.work.is-reveal .work-cards li:first-child .work-card {
  translate: -5vw 0;
}

.work.is-reveal .work-cards li:last-child .work-card,
.work.is-reveal .work-item {
  translate: 5vw 0;
}

.work.is-reveal .work-cards li:nth-child(n + 2) .work-card {
  transition-delay: 0.15s, 0.15s, 0s;
}

.work.is-reveal .work-list--legacy li:nth-child(2) .work-item {
  transition-delay: 0.12s, 0.12s, 0s;
}

.work.is-reveal h2.is-in,
.work.is-reveal .work-cards.is-in li .work-card,
.work.is-reveal .work-list--legacy.is-in li .work-item {
  opacity: 1;
  translate: 0 0;
}




/* ── Nav icons (Vector.svg reutilizado) ── */

.cs-nav-icon {
  width: 16px;
  height: 16px;
  display: block;
  filter: brightness(0) invert(1);
}

.cs-nav-icon--up {
  transform: rotate(-90deg);
}

.cs-nav-icon--prev {
  transform: scaleX(-1);
}

/* ── Footer ───────────────────────────── */

.contact-bar {
  background-color: #ffffff;
  display: flex;
  justify-content: flex-end;
  padding: 24px 80px;
}

.contact-bar a {
  color: #000;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: opacity 0.2s ease;
}

.contact-bar a:hover {
  opacity: 0.6;
}

/* Home footer */

.site-footer {
  height: 60vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  background: var(--accent);
  border-radius: 2rem 7.5rem 0 0;
}

.footer-mark {
  width: 60dvw;
}

.footer-top {
  display: grid;
  grid-template-columns: 34dvw 26dvw;
  align-items: end;
}

.footer-qr {
  display: block;
  width: 10dvw;
  border: none;
}

.footer-links {
  margin-right: 16dvw;
  margin-bottom: 2dvh;
  list-style: none;
  text-align: right;
}

.footer-links li {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  color: #000000;
}

.footer-links a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

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

.footer-thanks {
  display: block;
  width: 60dvw;
}

/* ════════════════════════════════════════
   Roleplay AI — case study styles
   ════════════════════════════════════════ */

/* ── Page fade-in ───────────────────────── */

body {
  opacity: 0;
  animation: cs-fadein 0.4s ease forwards;
}

@keyframes cs-fadein {
  to { opacity: 1; }
}

/* ── Layout ─────────────────────────── */

.cs-page {
  margin: 0 auto;
  padding: 56px 0 128px;
}

.cs-inner {
  box-sizing: border-box;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 80px;
}

/* ── Page header ────────────────────── */

.cs-header {
  margin-bottom: 72px;
}

.cs-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.cs-back {
  display: flex;
  align-items: center;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.cs-back:hover {
  opacity: 1;
}

.cs-back-icon {
  width: 16px;
  height: 16px;
  display: block;
  transform: scaleX(-1);
  filter: brightness(0) invert(1);
}

.cs-title {
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 1.15;
}

.cs-subtitle {
  font-size: var(--fs-sub);
  font-weight: 300;
  color: #b5b5b5;
  margin-bottom: 32px;
}

.cs-rule {
  border: none;
  border-top: 2px solid #8c8c8c;
}

/* ── Sections — show/hide navigation ── */

.cs-section {
  display: none;
  padding-bottom: 160px;
}

.cs-section--active {
  display: block;
  animation: cs-section-in 0.35s ease forwards;
}

@keyframes cs-section-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Two-column grid ────────────────── */

.cs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
}

.cs-col {
  min-width: 0;
}

#s3-combFeed-cs-col {
  min-width: 0;
  max-height: 84vh;
}

.cs-col h2,
#s5 .cs-ui-sub h2 {
  font-size: var(--fs-h3);
  font-weight: 600;
  margin-bottom: 18px;
}

.cs-col p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  color: #b5b5b5;
}

.cs-col p strong {
  color: #fff;
  font-weight: 500;
}

/* ── Persona grid text padding ─────── */

.cs-persona-grid > .cs-persona-text:first-child { box-sizing: border-box; padding-left: 80px; }
.cs-persona-grid > .cs-persona-text:last-child  { box-sizing: border-box; padding-right: 80px; }

/* ── Image placeholders ─────────────── */

.cs-images {
  margin: 60px 0 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.cs-phones {
  display: flex;
  gap: 20px;
}

.cs-phone {
  flex: none;
}

.cs-phones .cs-phone {
  flex: 0 0 285px;
}

.cs-phone img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
}

.cs-laptop img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── What I did list ────────────────── */

.cs-did-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cs-did-item {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: #d4d4d4;
}

.cs-did-tools {
  display: block;
  font-size: 0.8rem;
  color: #666;
  margin-top: 2px;
}

/* ── Fixed footer ───────────────────── */

.cs-footer {
  background: #000;
}

.cs-footer-top {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #000;
  border-top: 2px solid rgba(255, 255, 255, 0.1);
  padding: 16px 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* bullets + arrow */
.cs-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.cs-dot.active {
  background: #fff;
}

.cs-dot:not(.active):hover {
  background: rgba(255, 255, 255, 0.55);
  transform: scale(1.2);
}

.cs-dot:disabled {
  cursor: default;
  background: rgba(255, 255, 255, 0.1);
}

.cs-arrow-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  padding: 0 0 0 4px;
  line-height: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cs-arrow-btn:hover {
  opacity: 0.6;
}

#next-btn:hover {
  transform: translateX(3px);
}

#prev-btn:hover {
  transform: translateX(-3px);
}

/* scroll to top — pinned right inside footer-top */
.cs-scroll-top {
  position: absolute;
  right: 80px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease;
}

.cs-scroll-top:hover {
  opacity: 0.5;
}

/* ── Section phase title ────────────── */

.cs-section-title {
  font-size: var(--fs-h2);
  font-weight: 600;
  margin-bottom: 48px;
}

.cs-section-title--spaced {
  margin-top: 56px;
  font-weight: 600;
}

#s4 .cs-section-title,
#s5 .cs-section-title {
  margin-bottom: 16px;
}

#s1 h2,
.page-editor #s3-2 > .cs-col.cs-inner > h2 {
  font-size: var(--fs-h2);
}

.page-editor #s2 .cs-section-title--spaced {
  font-size: var(--fs-h3);
  margin-bottom: 18px;
}

.page-editor #s3 .cs-col > p {
  width: 36vw;
}

.page-editor #s3 .cs-block .cs-phone img,
.page-editor #s3 .cs-block .cs-ab img {
  position: absolute;
}

.page-editor #s3 .cs-block--feedback .cs-phone img {
  width: 68vw;
}

.page-editor #s3 .cs-block--feedback .cs-col--pad-right {
  margin-top: 16vh;
  z-index: 1;
}

.page-editor #s3 .cs-s3-organize-text {
  width: 16vw;
}

.page-editor #s3 .cs-block:not(.cs-block--feedback) .cs-ab img {
  width: 65vw;
  height: auto;
  right: 0;
}

.page-editor #s3 .cs-block:not(.cs-block--feedback) .cs-col {
  min-width: 0;
  margin-left: 12vw;
}

.page-editor #s3 .cs-s3-organize-text p {
  width: 20vw;
}

.page-editor #s3 .cs-s3-metrics {
  margin-top: 40px;
}

.page-editor #s3 .cs-block:not(.cs-block--feedback) h4 {
  font-size: var(--fs-h3);
  font-weight: 600;
  margin-top: 16px;
  margin-bottom: 4px;
  color: #fff;
}

.page-editor #s3 .cs-block:not(.cs-block--feedback) .cs-col:last-child {
  margin-top: 85vh;
  grid-column: 2;
  margin-left: 0;
}

.page-editor #s3-2 .cs-block--feedback {
  position: relative;
}

.page-editor #s3-2 .cs-block--feedback img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 32px;
}

.page-editor #s3-2-block1-text {
  width: 30vw;
  margin-left: 60vw;
  position: absolute;
}

.page-editor #s3-2-block2-text {
  width: 40vw;
  position: absolute;
}

.page-editor #s3-2-block3-text {
  width: 44vw;
  margin-left: 50vw;
}

/* ── Persona card grid ──────────────── */

.cs-persona-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin: 140px 0;
  align-items: start;
}

.cs-persona-card {
  width: 100%;
  background: #111;
  overflow: hidden;
}

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

/* ── User stories ───────────────────── */

.cs-story-intro {
  font-size: 1rem;
  font-weight: 500;
  color: #b5b5b5;
  margin-bottom: 20px;
}

.cs-story-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cs-story-list li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: #d4d4d4;
}

/* ── Persona text items ─────────────── */

.cs-persona-text ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.cs-persona-text li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: #d4d4d4;
}

/* ── Blocks within a section ────────── */

.cs-block {
  padding-bottom: 64px;
  margin-bottom: 64px;
}

.cs-block:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}

.cs-block--flush {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* ── A/B comparison ─────────────────── */

.cs-ab {
  display: flex;
  gap: 48px;
}

.cs-ab img {
  max-width: 100%;
  height: auto;
}

/* ── User quotes ────────────────────── */

.cs-quotes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0;
}

.cs-quote {
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  color: #b5b5b5;
  padding-left: 14px;
  border-left: 2px solid rgba(255, 255, 255, 0.25);
}

/* ── Phone row (shared) ────────────── */

.cs-phone-row {
  display: flex;
  gap: 20px;
}

.cs-phone-row .cs-phone {
  flex: 1 0 285px;
  min-width: 0;
}

/* ── Options img row ───────────────── */

.cs-opts-phones {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-left: 10vw;
  margin-right: 10vw;
}

.cs-opts-phones .cs-phone {
  flex: 1 0 285px;
}

/* ── S5 specifics ───────────────────── */

.cs-diagram img {
  width: 90vw;;
  max-width: 100%;
  height: auto;
  display: block;
}

.cs-cascade {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-top: 40px;
}

.cs-cascade .cs-phone {
  flex: 0 0 180px;
}

#s5 .cs-ui-sub .cs-col > div img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
}

.cs-ui-sub {
  margin-bottom: 56px;
  padding-bottom: 56px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.cs-ui-sub:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.cs-nested-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-left: 16px;
  border-left: 2px solid rgba(255,255,255,0.1);
}

.cs-nested-list li {
  font-size: 0.9rem;
  font-weight: 400;
  color: #d4d4d4;
  line-height: 1.6;
}

.cs-cascade--desktop .cs-laptop {
  flex: 0 0 300px;
}

.cs-cascade-full {
  margin-top: 16vh;
}

.cs-cascade-full > p {
  position: absolute;
  z-index: 1;
}

.cs-cascade-full img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
}

.cs-takeaway {
width: 36vw;
margin-top: 8vh;
}

.cs-takeaway h2 {
font-weight: 500;
}


/* ── Inline style migrations ────────── */

/* s1 hr divider wrapper */
.cs-rule-divider {
  margin-top: 80px;
  margin-bottom: 80px;
}

/* s2 persona — Player text alignment */
.cs-persona-text--player {
  margin-left: auto;
}

/* s2 persona — Creator-admin grid overrides */
.cs-persona-grid--creator {
  align-items: end;
  margin-top: -180px;
  position: relative;
  z-index: 1;
}

/* s3 block 2 — combined feedback block */
.cs-block--feedback {
  height: auto;
  margin-top: 20vh;
  overflow: visible;
}

/* s3 block 2/3 — col with right padding */
.cs-col--pad-right {
  box-sizing: border-box;
  padding-right: 80px;
}

/* s1 mockups — desktop app right with phones overlapping its left side */
.cs-s1-images {
  margin: 60px 0 5rem;
}
.cs-s1-app {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  left: -10dvw; /* re-centres the visible group: phones are shifted 20dvw right over the desktop */
}
/* desktop (960px) and phones (285px) keep their size; no flex shrinking */
.cs-s1-app .cs-laptop,
.cs-s1-app .cs-phones { flex: none; }
.cs-s1-app .cs-phones {
  position: relative;
  z-index: 1;
  left: 20dvw;
  top: 10vh;
}

/* s3 block 3 — full-bleed grid; text col matches the cs-inner left half-column box */
.cs-col--inner-left {
  box-sizing: border-box;
  padding-left: max(80px, calc((100vw - var(--max-w)) / 2));
}
.cs-col--inner-left > * { max-width: calc((var(--max-w) - 120px) / 2); }

/* s3 block 3 — same top spacing as block 2 */
.cs-block--competition {
  margin-top: 20vh;
}

/* s3 block 3 — laptop scale transform (top origin keeps its top edge aligned with the text) */
.cs-laptop--scaled {
  transform: scale(1.1);
  transform-origin: right top;
}

/* grids with align-items:start */
.cs-grid--align-start {
  align-items: start;
}

.cs-s4-diagram-row {
  display: flex;
  gap: 0;
}

/* s4/s5 — flowchart diagram: full-bleed from left */
.cs-diagram--s4 {
  /*width: 46vw;*/
  /*margin-left: 4vw;*/
  position: relative;
}

.cs-diagram--s5 {
  width: 90vw;
  margin-left: 5vw;
  position: relative;
}

/* s4/s5 — flowchart overlay box */
.cs-diagram-overlay {
  position: absolute;
  top: 0;
  right: -5vw;
  background: rgba(0,0,0,0.5);
  z-index: 1;
  padding: 24px 32px;
  max-width: 24vw;
}

#admin-cs-diagram-overlay {
 position: absolute;
  top: 164vh;
  right: 12vw;
  background: rgba(0,0,0,0.5);
  z-index: 1;
  padding: 24px 32px;
  max-width: 30vw;
}

#cs-sketch-overlay {
  top: 66vh;
  left: 0;
  right: auto;
  max-width: 20vw;
}
#admin-s4-cs-sketch-overlay {
  max-width: 36vw;
  margin-top: 5vh;
  margin-bottom: 5vh;
  margin-left: 12vw;
}


.cs-diagram-overlay--s5 {
  position: absolute;
  bottom: 5vh;
  right: 5vw;
  background: rgba(0,0,0,0.5);
  z-index: 1;
  padding: 24px 32px;
  width: 24vw;
}

/* section title inside overlay — override default margin-bottom */
.cs-section-title--overlay {
  margin-bottom: 16px;
}

/* s4 UX flow intro block */
.cs-block--ux-flow {
  position: relative;
  margin-top: 16vh;
  justify-items: center;
}

.roleplay-cs-ux-intro--s4 {
  margin-bottom: 48px;
  margin-left: 8vw;
  width: 44vw;
}

#editor-cs-ux-intro--s4 {
  margin-bottom: 48px;
  width: 25vw;
  top: 100vh;
  left: 64vw;
  z-index: 1;
  position: absolute;
}

.cs-ux-intro--s4 {
  margin-bottom: 48px;
  width: 25vw;
  top: 100vh;
  left: 64vw;
  z-index: 1;
  position: absolute;
}

#admin-s4-cs-ux-intro--s4 {
  margin-bottom: 48px;
  width: 25vw;
  top: 36vh;
  left: 64vw;
  z-index: 1;
  position: absolute;
}

/* s5 UX flow / UI design intro blocks */
.cs-ux-intro--s5 {
  margin-bottom: 48px;
  width: 36vw;
  margin-left: 50vw;
}

/* s4 cascade with relative positioning */
.cs-cascade-full--relative {
  position: relative;
}

/* s4 cascade overlay paragraphs */
.cs-cascade-full--relative > p:nth-child(2) {
  top: 30vh;
  left: 35vw;
  width: 24vw;
}

.cs-cascade-full--relative > p:nth-child(3) {
  bottom: 209vh;
  left: 25vw;
  width: 24vw;
}

.cs-cascade-full--relative > p:nth-child(4) {
  width: 14vw;
  bottom: 54vh;
  right: 1vw;
}

/* Admin s3 Block 1 — center image with wp */
#s3 .cs-block--feedback .cs-cascade-full--relative > img {
  max-width: var(--max-w);
  margin: 0 auto;
}

/* s4 UI design intro */
.cs-block--ui-design {
  position: relative;
  z-index: 2;
  min-height: 55vw;
  top: -5vh;
}

.cs-block--ui-design > img {
  left: 0;
  width: 88vw;
}

.cs-ui-intro--s4 {
  max-width: 36vw;
  margin-left: 21vw;
  margin-top: 48px;
}

/* s4 initial case grid — align-items:end, gap:0 */
.cs-grid--align-end {
  align-items: end;
}

.cs-grid--no-gap {
  gap: 0;
}

/* s4 phone at 80% width */
.cs-phone--80 {
  width: 80%;
}

/* s4/s5 scenario / report grid — 85vw from left */
.cs-grid--85vw {
  align-items: start;
  grid-template-columns: 1fr 1fr;
  width: 85vw;
  margin-left: 80px;
}

/* s4 options text block */
.cs-opts-text {
  margin-left: 40vw;
  margin-right: 5vw;
  margin-top: 40px;
}

/* s4 options h2 uses h3 font size */
.cs-opts-text h2 {
  font-size: var(--fs-h3);
}

/* utility: margin-top 16px on paragraphs */
.mt-16 {
  margin-top: 16px;
}

/* utility: margin 16px top+bottom on lists */
.my-16 {
  margin: 16px 0;
}

/* utility: margin-top 20px on lists */
.mt-20 {
  margin-top: 20px;
}

/* utility: margin-top 12px (takeaways) */
.mt-12 {
  margin-top: 12px;
}

/* muted/secondary text color */
.cs-muted {
  color: #666;
}

/* s5 cascade overlays */
.cs-cascade-overlay--client {
  position: absolute;
  top: 0;
  left: 24vw;
  width: 50vw;
}

.cs-cascade-overlay--detail {
  position: absolute;
  top: 12vw;
  right: 5vw;
  width: 50vw;
}

/* ── s5 UI Design sub-section layout ── */

.cs-s5-db-text {
  margin-left: 5vw;
}

.cs-s5-rp-sub {
  position: relative;
}

.cs-s5-rp-text {
  position: absolute;
  width: 24vw;
  right: 8vw;
}

.cs-s5-up-sub {
  position: relative;
  min-height: 170vh;
}

.cs-s5-up-text {
  position: absolute;
  top: 0;
  left: 10vw;
  width: 50vw;
}

.cs-s5-sub-text {
  position: absolute;
  top: 120vh;
  left: 10vh;
  width: 30vw;
  z-index: 2;
}

.cs-s5-up-img2 img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
}

.cs-s5-up-img2 {
  position: absolute;
  top: 14vw;
  right: 0;
  width: 90vw;
}

/* ── Admin — s3 design learnings ────── */

/* shared: rest-of-section h2 sizing (first h2 keeps cs-section-title / --fs-h2) */
#s3-block1-overlay h2,
#s3-block2-text h2 {
  font-size: var(--fs-h3);
  font-weight: 600;
}

/* Block 1 — overlay box, centered right over image */
#s3-block1-overlay {
  position: absolute;
  top: 50%;
  right: 5vw;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  padding: 24px 32px;
  max-width: 30vw;
}

/* Block 2 — intro text, override cs-inner padding */
#s3-block2-text {
  padding: 0;
  width: 35vw;
  margin-left:15vw;
  margin-bottom: 10vh;
}

/* Block 2 — image/text cards wrapper */
#s3-card-merge,
#s3-card-grid {
  margin-bottom: 20vh;
}

#s3-card-grid {
  position: relative;
  display: grid;
  justify-content: flex-start;
  align-items: center;
  /*margin-top: 75vh;*/
}

#s3-card-merge p {
  width: 30vw;
  margin-left: 15vw;
}

#s3-card-merge .cs-laptop img {
  width: 700px;
  margin-left: auto;
  margin-right: 10vw;
}

#s3-card-grid p {
  width: 32vw;
  margin-left: 50vw;
  margin-top: 5vh;
}

#s3-card-list p {
  width: 32vw;
  /*margin-left: 20vw;*/
  margin-top: 5vh;
}

/* Block 2 — Pick one!, override leaking .page-editor #s3 .cs-col rules */
.page-editor #s3 #s3-pickone {
  grid-column: 2;
  margin-top: 24vh;
  margin-right: 11vw;
  margin-left: 50vw;
}

/* Roleplay AI — prototype CTA */
.cs-prototype-try {
  display: flex;
  align-items: stretch;
  gap: 48px;
  margin-top: 4rem;
}
.cs-prototype-option {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* center the button/QR graphic, pin the label to a shared bottom line */
.cs-prototype-option > .cs-prototype-cta,
.cs-prototype-option > .cs-prototype-qr { margin-top: auto; }
.cs-prototype-option > .cs-prototype-option-label { margin-top: auto; padding-top: 16px; }
.cs-prototype-option-label {
  font-size: var(--fs-body);
  font-weight: 500;
  color: #d4d4d4;
}
.cs-prototype-qr {
  display: inline-flex;
  background: #fff;
  border-radius: 16px;
  padding: 12px;
}
.cs-prototype-qr img { width: 132px; height: auto; display: block; }
.cs-prototype-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-size: var(--fs-body);
  font-weight: 500;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.1s ease;
}
.cs-prototype-cta:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.7); }
.cs-prototype-cta:active { transform: scale(0.98); }
.cs-prototype-cta-arrow { display: inline-block; transition: transform 0.18s ease; }
.cs-prototype-cta:hover .cs-prototype-cta-arrow { transform: translateX(4px); }

/* Roleplay AI — prototype CTA in page header (visible on every section) */
.cs-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 24px;
}
.cs-header .cs-prototype-try {
  margin-top: 0;
  gap: 32px;
}
.cs-header .cs-prototype-qr { padding: 8px; border-radius: 12px; }
.cs-header .cs-prototype-qr img { width: 88px; }
.cs-header .cs-prototype-option-label { padding-top: 8px; font-size: var(--fs-meta); }

/* Roleplay AI — "100% AI-built" badge above the header prototype CTA */
.cs-prototype-wrap {
  position: relative;
  border: 2px solid #5bb8ff;
  padding: 1rem;
  border-radius: 2rem;
}
.cs-badge {
  position: absolute;
  top: 4%;
  left: 10%;
  z-index: 2;
  transform: translate(-50%, -50%) rotate(-10deg);
  white-space: nowrap;
  pointer-events: none;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #5bb8ff;
  color: #000;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Roleplay AI — s2 images */
.cs-s2-phone {
  margin-top: 32px;
  width: 60%;
}
/* Roleplay AI — s2 alternating text/image rows */
.cs-s2-row {
  margin-top: 96px;
  align-items: center;
}
/* What AI makes possible: phone next to text, bottom aligned */
.cs-s2-possible {
  display: flex;
  align-items: flex-end;
  gap: 48px;
  margin-top: 96px;
}
.cs-s2-possible .cs-s2-phone {
  margin-top: 0;
  width: 285px;
}
.cs-s2-possible .cs-col { flex: 1; }
/* Roles rows: full-bleed (no cs-inner); text constrained to the cs-inner half-column box, images run to the viewport edge */
.cs-s2-role { gap: 64px; }
.cs-s2-role > .cs-col { box-sizing: border-box; }
.cs-s2-role > .cs-col > * { max-width: calc((var(--max-w) - 120px) / 2); }
/* Text hugs its image: left text pushed right, right text stays left */
.cs-s2-role > .cs-col:first-child { padding-left: max(80px, calc((100vw - var(--max-w)) / 2)); }
.cs-s2-role > .cs-col:first-child > * { margin-left: auto; }
.cs-s2-role > .cs-col:last-child  { padding-right: max(80px, calc((100vw - var(--max-w)) / 2)); }
/* Admin laptop: up to its @1x width, ending 5dvw from the viewport edge */
.cs-s2-role-img--overflow { margin-right: 5dvw; }
/* Per-role text alignment against its image */
.cs-s2-role--creator > .cs-col { align-self: start; }
.cs-s2-role--creator > .cs-col > * { margin-left: 0; } /* left edge = Roles h2 */
.cs-s2-role--ai > .cs-col { align-self: start; margin-top: 64px; } /* matches s2_roles_ai_2 offset */
.cs-s2-role--ai > .cs-col > * { max-width: 16dvw; }
.cs-s2-role--player > .cs-col { align-self: end; }
.cs-s2-role-img img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
}
/* AI row: two phones side by side, 1.5rem apart, second offset down */
.cs-s2-role-img--stack {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}
.cs-s2-role-img--stack img {
  min-width: 0;
  max-width: calc(50% - 0.75rem);
}
.cs-s2-role-img--stack img:first-child {
  border-radius: 0 1rem 1rem 0;
}
.cs-s2-role-img--stack img:last-child {
  margin-top: 64px;
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* 3Wines — case study styles */
/* Header (3Wines, Vinswipe, Academia): "Try demo" CTA bottom-aligned with the subtitle */
.page-3wines .cs-header-row,
.page-vinswipe .cs-header-row,
.page-academia .cs-header-row { margin-bottom: 32px; }
.page-3wines .cs-header-row .cs-subtitle,
.page-vinswipe .cs-header-row .cs-subtitle,
.page-academia .cs-header-row .cs-subtitle { margin-bottom: 0; }
/* s2/s3 blocks: vertical rhythm between choices */
.page-3wines .cs-choice + .cs-choice { margin-top: 15vh; }
/* Prompt block */
.cs-prompt {
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 16px;
  background: #111;
  padding: 20px 24px;
}
.cs-prompt-label {
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5bb8ff;
  margin-bottom: 12px;
}
.cs-prompt-body {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.7;
  color: #d4d4d4;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* s1 mockups — host room (laptop) left, TV behind on the right, phone over the laptop's left side */
.cs-3w-group {
  position: relative;
  margin: 60px 0 5rem;
}
.cs-3w-group img {
  width: 100%;
  height: auto;
  display: block;
}
.cs-3w-group-room {
  width: 42vw;
  padding-top: 25vh;
  margin-left: 3vw;
}
.cs-3w-group-tv {
  position: absolute;
  z-index: -1;
  left: 65vw;
  top: 0;
  width: 64vw;
  transform: translateX(-50%);
}
.cs-3w-group-phone {
  position: absolute;
  z-index: 2;
  left: 7vw;
  top: 45vh;
  width: 10vw;
}

/* s2 blocks 1 & 3 — visual overflows the left edge, copy + prompt sit on top of it */
.cs-choice-visual {
  width: 64vw;
  margin-left: -1vw;
}
.cs-choice-visual img {
  width: 100%;
  height: auto;
  display: block;
}
.cs-choice-text {
  position: relative;
  z-index: 1;
  margin-top: -24vw;
}
/* block 1 — image sits below the copy and prompt */
.cs-choice--host .cs-choice-text { margin-top: 0; }
.cs-choice--host .cs-choice-visual { margin-top: -18rem; }
/* block 3 — score group left, behind the podium image's top edge; podium overflows the right edge; copy + prompt 2rem lower */
.cs-choice--rules { overflow-x: clip; }
.cs-choice--rules .cs-3w-rules {
  position: relative;
  z-index: -1;
  width: 40vw;
  margin-left: 4vw;
}
.cs-choice--rules .cs-choice-visual { margin-left: auto; margin-right: -6vw; margin-top: -26vw; }
.cs-choice--rules .cs-choice-text { margin-top: calc(-6vw + 2rem); }
/* s2 — shipped loop strip, full-bleed: landing + pack · checkout + cart · live game */
.cs-3w-loop {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4vw;
  padding: 0 5vw;
  margin-bottom: calc(15vh + 16vh);
}
.cs-3w-loop-step img {
  width: 100%;
  height: auto;
  display: block;
}
/* overlapping pair: both shots share one grid cell, so the cell grows to fit the overlap */
.cs-3w-loop-shots { display: grid; }
.cs-3w-loop-shots img { grid-area: 1 / 1; }
/* drop-shadow, not box-shadow: follows the PNG alpha (3w_pack has transparent bands) */
.cs-3w-loop-shots img + img { filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35)); }
/* left — landing laptop, pack card over its bottom-right */
.cs-3w-loop-shots--landing img:first-child { width: 100%; justify-self: start; align-self: start; }
.cs-3w-loop-shots--landing img:last-child { width: 72%; justify-self: end; align-self: end; margin-top: 50%; }
/* center — Stripe laptop on the right, cart drawer over its left side */
.cs-3w-loop-shots--checkout img:first-child { width: 100%; justify-self: end; align-self: start; }
.cs-3w-loop-shots--checkout img:last-child { width: 35%; justify-self: start; align-self: end; margin-top: 16%; margin-left: 10%; }
/* right — TV room, host room laptop under it, right-aligned */
.cs-3w-loop-shots--game img:first-child { width: 100%; justify-self: start; align-self: start; }
.cs-3w-loop-shots--game img:last-child { width: 75%; justify-self: end; align-self: end; margin-top: 34%; }
.cs-3w-loop-label {
  display: block;
  margin-bottom: 20px;
  font-size: var(--fs-body);
  color: #d4d4d4;
}
/* s2 — "The pack is the product": 3 tier cards cascading down-right, behind the copy */
.cs-3w-packs {
  position: relative;
  z-index: -1;
  display: grid;
  width: 52vw;
  justify-self: end;
  margin-right: 4vw;
}
.cs-3w-packs img {
  grid-area: 1 / 1;
  width: 75%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
}
.cs-3w-packs img:nth-child(1) { justify-self: start; align-self: start; }
.cs-3w-packs img:nth-child(2) { justify-self: center; align-self: start; margin-top: 16%; }
.cs-3w-packs img:nth-child(3) { justify-self: end; align-self: start; margin-top: 32%; }
/* cards + copy share one grid cell: copy top-aligned with pack_1 */
.cs-choice--packs { display: grid; }
.cs-choice--packs > * { grid-area: 1 / 1; align-self: start; }
/* copy is full-bleed (no cs-inner): narrow box, left edge on the strip's 5vw gutter */
.cs-choice--packs .cs-choice-text {
  margin-top: 0;
  width: 30vw;
  margin-left: 5vw;
}
/* s2 — "New wines, same game": pack rotation cycle. Wine accent = what changes each season, grey core = what stays */
.cs-3w-cycle { width: 36vw; }
.cs-3w-cycle-ring {
  position: relative;
  aspect-ratio: 1;
}
/* dashed ring through the step centres (radius 38%) */
.cs-3w-cycle-ring::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 2px dashed rgba(255,255,255,0.2);
  border-radius: 50%;
}
.cs-3w-cycle-core {
  position: absolute;
  inset: 32%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  background: #111;
}
.cs-3w-cycle-core-title {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: #fff;
}
.cs-3w-cycle-core-text {
  font-size: var(--fs-meta);
  color: #b5b5b5;
}
.cs-3w-cycle-steps { list-style: none; }
.cs-3w-cycle-step {
  position: absolute;
  width: 8.5rem;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #d4d4d4;
}
/* pentagon on the ring, clockwise from the top */
.cs-3w-cycle-step:nth-child(1) { left: 50%;   top: 12%; }
.cs-3w-cycle-step:nth-child(2) { left: 86.1%; top: 38.3%; }
.cs-3w-cycle-step:nth-child(3) { left: 72.3%; top: 80.7%; }
.cs-3w-cycle-step:nth-child(4) { left: 27.7%; top: 80.7%; }
.cs-3w-cycle-step:nth-child(5) { left: 13.9%; top: 38.3%; }
.cs-3w-cycle-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #7b0323;
  color: #fff;
  font-weight: 600;
}
.cs-3w-cycle-caption {
  margin-top: 12px;
  text-align: center;
  font-size: var(--fs-body);
  color: #d4d4d4;
}
/* s2 — live session photo, full-bleed (no cs-inner) on the strip's 5vw gutter; shares one grid cell with the copy grid, top-aligned */
.cs-choice--session { display: grid; }
.cs-choice--session > * { grid-area: 1 / 1; align-self: start; }
.cs-3w-session {
  width: 44vw;
  margin-left: 5vw;
}
.cs-3w-session img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}
/* copy / footmark wrapper — same box as the Roleplay flowchart overlay */
.cs-overlay-box {
  background: rgba(0,0,0,0.5);
  padding: 24px 32px;
}
.cs-prompt + .cs-overlay-box { margin-top: 20px; }

/* s2 block 3 — scoring rules ported from 3Wines landing-v2 (._3w-rules-list) */
.cs-3w-rules {
  box-sizing: border-box;
  padding: 4vw;
  background: oklch(0.967 0.028 86);
}
.cs-3w-rules ._3w-rules-list {
  display: flex;
  gap: 1rem;
}
.cs-3w-rules ._3w-rules-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.cs-3w-rules ._3w-rules-item {
  flex: 1 1 12rem;
  max-width: 16rem;
  padding: 1rem;
  text-align: center;
  background: oklch(88% .025 70);
  border: 1px solid oklch(88% .025 70);
}
.cs-3w-rules ._3w-rules-pts {
  display: block;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #111;
}
.cs-3w-rules ._3w-rules-text {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #444;
}

/* s2 block 2 — code excerpts (box like .cs-prompt, syntax colours) */
.cs-code {
  margin-top: 32px;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 16px;
  background: #0d0d0d;
  padding: 20px 24px;
}
.cs-code + .cs-code { margin-top: 16px; }
.cs-code-label {
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e5c07b;
  margin-bottom: 12px;
}
.cs-code-file {
  margin-left: 8px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #666;
}
.cs-code-body {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1.7;
  color: #d4d4d4;
  white-space: pre;
  overflow-x: auto;
}
.cs-code-body .tk-c { color: #7f848e; font-style: italic; }
.cs-code-body .tk-k { color: #c678dd; }
.cs-code-body .tk-t { color: #e5c07b; }
.cs-code-body .tk-s { color: #98c379; }
.cs-code-body .tk-n { color: #d19a66; }
.cs-code-body .tk-f { color: #61afef; }
.cs-code-body .tk-v { color: #e06c75; }

/* s3 block 1 — spec index (left) + frozen intent block (right), same box as .cs-code / .cs-prompt */
.cs-spec-index,
.cs-spec {
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 16px;
  background: #0d0d0d;
  padding: 20px 24px;
}
.cs-spec-index + p { margin-top: 32px; }
.cs-spec + .cs-code { margin-top: 16px; }
.cs-spec { margin: 24px 0 4px; background: #111; }
.cs-spec-group {
  font-size: var(--fs-meta);
  color: #666;
  margin-top: 16px;
}
.cs-spec-group:first-of-type { margin-top: 0; }
.cs-spec-list {
  list-style: none;
  margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1.9;
  color: #d4d4d4;
}
.cs-spec-list li { display: flex; gap: 12px; }
.cs-spec-list li::after {
  content: "done";
  margin-left: auto;
  color: #98c379;
}
.cs-spec-id {
  flex: 0 0 5rem;
  color: #e5c07b;
}
.cs-spec-label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5bb8ff;
  margin-bottom: 16px;
}
.cs-spec-body {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  line-height: 1.7;
  color: #d4d4d4;
}
.cs-spec-body dt {
  font-weight: 600;
  color: #fff;
}
.cs-spec-body dd + dt { margin-top: 12px; }
.cs-spec-body ul { list-style: none; }
.cs-spec-body li { padding-left: 1.2em; text-indent: -1.2em; }
.cs-spec-body li::before { content: "– "; color: #666; }