/* Shared shell for case-study pages (Figma "pearl" / "speakeasy" frames).
   Layout is fluid full-bleed (like the rest of the site — nav, about page's
   side panel), NOT boxed into a centered fixed-width column: the outline
   panel is fixed flush to the real left edge of the window, and the
   content sits 30px after it, with a matching 30px gutter before the real
   right edge of the window. */

/* case-study pages scroll (unlike the fixed-viewport about page); shared.css
   hides overflow globally, so this overrides it back on for these pages. */
body {
  overflow-y: auto;
  overflow-x: hidden;
}

.case-shell {
  position: relative;
}

.case-outline {
  position: fixed;
  left: 0;
  top: 45px;
  bottom: 0;
  width: 260px;
  background: #f3f3f3;
  padding: 65px 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 5;
}

.outline-item {
  font-family: 'CommitMono', monospace;
  font-weight: 400;
  font-size: 10px;
  color: #7b7b7b;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.outline-item:hover {
  color: #5e5e5e;
}

.case-content {
  margin-left: 320px;
  padding-right: 60px;
  padding-top: 45px;
  padding-bottom: 60px; /* consistent 60px gap between the last content block and the footer */
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* the cover image is intentionally wider than the 946px text column —
   it bleeds flush against the outline gutter, same as the Figma frame.
   Figma's own rendered export of this frame only comes back at 1006px
   wide (too soft once stretched wider), but the *raw* source photo Figma
   composited it from is 3947x1457 — so this replicates Figma's own crop
   (h-full, left:-24.8%) directly on that raw asset instead, staying
   crisp at any width. */
.cs-cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1008 / 572;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 45px;
}

.cs-cover-wrap img {
  position: absolute;
  top: 0;
  left: -24.8%;
  height: 100%;
  width: auto;
  max-width: none;
}

/* modifier for cover photos that don't need Pearl's crop offset — plain
   centered cover fill, used when the raw source's own aspect ratio
   already matches the display box (no manual crop necessary). */
.cs-cover-wrap.plain-cover img {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* IBM cover: same black + eye-bee-M composition as the home-page work
   card (see .ibm-icons in shared.css), just at the wider case-study
   cover proportions. */
.cs-ibm-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 1008 / 572;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 45px;
}

/* IBM blue accent for bold inline text (SIDE QUEST award name, testimonial
   role labels) — distinct from the teal .accent used elsewhere. */
.cs-ibm-accent {
  color: #0f62fe;
  font-weight: 700;
}

/* ---------- IBM project cards (bordered row: laptop mockup + text) ---------- */

.cs-project-card {
  position: relative;
  width: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 20px;
  background: #fcfcfc;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 41px 58px;
}

.cs-project-shot {
  position: relative;
  width: 242px;
  height: 160px;
  flex-shrink: 0;
}

/* screenshot sits behind the macbook frame, blurred + given a light frost
   wash for confidentiality — the frame art has a transparent cutout for
   the screen (measured directly off its alpha channel, not just Figma's
   declared child offset, since the two layers aren't pixel-registered),
   so the frame's own notch/bezel renders on top of it untouched. */
.cs-project-shot .cs-project-screen {
  position: absolute;
  left: 10.18%;
  top: 13.18%;
  width: 79.61%;
  height: 75.84%;
  object-fit: cover;
  filter: blur(4px);
}

.cs-project-shot .cs-project-frost {
  position: absolute;
  left: 10.18%;
  top: 13.18%;
  width: 79.61%;
  height: 75.84%;
  background: rgba(252, 252, 252, 0.2);
}

.cs-project-shot .cs-project-macbook {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cs-project-card .cs-body {
  flex: 1;
}

/* ---------- IBM side quest card (award callout) ---------- */

/* the whole callout sits in a bordered card, same treatment as the
   project cards (Figma frame 1437:232): #fcfcfc fill, #d9d9d9 stroke,
   20px radius, 30px inner gap, image at 323x182 with its own 10px-radius
   stroke. */
.cs-sidequest {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  border-radius: 20px;
  background: #fcfcfc;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 30px 44px 30px 45px;
}

.cs-sidequest img {
  width: 323px;
  height: 182px;
  flex-shrink: 0;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  object-fit: cover;
}

.cs-sidequest .cs-body {
  flex: 1;
}

/* ---------- IBM testimonial cards ---------- */

.cs-testimonial-card {
  position: relative;
  width: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 20px;
  box-sizing: border-box;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* header row: name label on the left, up-right arrow flush to the right */
.cs-testimonial-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cs-testimonial-role {
  font-family: 'CommitMono', monospace;
  font-weight: 400;
  font-size: 12px;
  color: #0f62fe;
  text-transform: uppercase;
}

/* the "- role title" half of the label is gray; the name stays IBM blue */
.cs-testimonial-role-sub {
  color: #7b7b7b;
}

/* arrow link: gray by default, IBM blue on hover; opens the LinkedIn
   recommendations section in a new tab. currentColor drives the SVG
   stroke so the hover transition is a single property. */
.cs-testimonial-link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b7b7b;
  transition: color 0.15s ease;
}

.cs-testimonial-link:hover {
  color: #0f62fe;
}

.cs-testimonial-arrow {
  display: block;
  width: 13px;
  height: 13px;
}

/* ---------- typography ---------- */

.cs-label {
  font-family: 'CommitMono', monospace;
  font-weight: 400;
  font-size: 12px;
  color: #5e5e5e;
  text-transform: uppercase;
}

.cs-label-accent {
  font-family: 'CommitMono', monospace;
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
  color: #219ebc;
}

.cs-heading {
  font-family: 'PP Editorial Old', serif;
  font-weight: 400;
  font-size: 25px;
  line-height: normal;
  color: #5e5e5e;
}

.cs-heading-accent {
  color: #219ebc;
}

.cs-body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: normal;
  color: #7b7b7b;
}

.cs-body .accent {
  color: #219ebc;
}

/* non-bold IBM-blue inline accent (the bold variant is .cs-ibm-accent) */
.cs-body .accent-ibm {
  color: #0f62fe;
}

.cs-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* PROJECTS and SIDE QUEST read as flat sections in Figma: the label sits
   a full 30px above its card(s), and stacked cards are 30px apart — not
   the tight 12px label+body grouping the plain text blocks use. */
#projects,
#sidequest {
  gap: 30px;
}

/* ---------- header meta row (Timeline / Role / Team / Tools) ---------- */

/* the meta group is centered within the text column (Figma keeps ~30-60px
   of balanced margin on each side), not flush left. The 150px gap is a
   desktop luxury — it steps down on narrower viewports, and the row wraps
   rather than pushing columns off-screen. */
.cs-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 36px 150px;
}

@media (max-width: 1240px) {
  .cs-meta { gap: 30px 60px; }
}

@media (max-width: 1024px) {
  .cs-meta { gap: 22px 28px; }
}

/* below ~half a desktop width the fixed outline rail costs more room than
   it's worth — drop it and let the content run full width. The meta row
   gets its breathing room back once the 320px rail is gone. */
@media (max-width: 900px) {
  .case-outline {
    display: none;
  }

  .case-content {
    margin-left: 0;
    padding-left: 24px;
    padding-right: 24px;
  }

  .cs-meta { gap: 32px 56px; }
}

/* ---------------------------------------------------------------------
   Case-study mobile layout — below half a desktop width every case study
   switches to the single-column stacking of its Figma "adjustable phone"
   frame (Pearl 1497:385, SpeakEasy 1496:276, IBM 1507:671): sections that
   desktop lays out as a side-by-side row read top-to-bottom instead, so
   nothing is squeezed or clipped. Desktop (>900px) is untouched. Same
   <=900px breakpoint as the outline-rail drop above.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* meta row: originally a forced single row (all four columns, nowrap),
     matching the "adjustable phone" frame at the width it was designed
     against — but IBM's six-name team list needs more room than any
     single-row layout has to give at real phone widths (373-430px it was
     shrinking to a few px wide, or fully collapsing and overlapping the
     Org column next to it). A 2x2 grid gives every column a fixed,
     guaranteed share of the width instead of everyone fighting over one
     row, so nothing can ever overlap regardless of content length. */
  .cs-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(20px, 6vw, 56px);
    row-gap: 24px;
  }

  /* grid items default to min-width:auto (their content's natural width),
     which can force a column wider than its share of the grid to fit an
     unbroken value — min-width:0 lets every value wrap within its own
     cell instead. */
  .cs-meta-item {
    min-width: 0;
  }

  /* app-icon strip: lose the wide side padding, let the four icons share
     the row and shrink, and let long labels ("FOCUS KEEPER") wrap
     instead of spilling past the card */
  .cs-app-icons {
    gap: 12px;
    padding: 18px 16px;
  }

  .cs-app-icon {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    max-width: 81px;
  }

  .cs-app-icon img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .cs-app-icon span {
    white-space: normal;
    text-align: center;
  }

  /* comparison boxes: stack (the frame lays them flex-col, no arrow) */
  .cs-compare {
    flex-direction: column;
  }

  .cs-compare-box {
    flex: none;
    width: 100%;
  }

  .cs-compare-arrow {
    display: none;
  }

  /* donut chart + insights: two stacked full-width blocks in the frame,
     not a side-by-side pair. The ring box scales down with the column;
     its badges are %-anchored (see pearl.html) so they track the arc. */
  .cs-donut-section {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .cs-donut-wrap {
    width: 100%;
    max-width: 417px;
    height: auto;
    aspect-ratio: 1;
  }

  .cs-donut-rings {
    width: 100%;
    height: 100%;
  }

  .cs-insights {
    width: 100%;
  }

  /* adaptation cards: stack (frame lays all three flex-col) */
  .cs-adaptations {
    flex-direction: column;
  }

  .cs-adaptation-card {
    flex: none;
    width: 100%;
  }

  /* ---- IBM "adjustable phone" frame (1507:671) ---- */

  /* project cards: MacBook mockup on top, body text beneath, inside the
     same bordered card */
  .cs-project-card {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    padding: 30px;
  }

  .cs-project-shot {
    width: 100%;
    height: auto;
    aspect-ratio: 242 / 160;
  }

  /* side quest: same stacked image-over-text treatment, and the frame
     wraps it in a bordered card (desktop leaves it as a bare row) */
  .cs-sidequest {
    flex-direction: column;
    gap: 30px;
    padding: 30px;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    background: #fcfcfc;
  }

  .cs-sidequest img {
    width: 100%;
    height: auto;
    aspect-ratio: 376 / 212;
  }
}

.cs-meta-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cs-meta-label {
  font-family: 'CommitMono', monospace;
  font-weight: 400;
  font-size: 12px;
  color: #219ebc;
  text-transform: uppercase;
}

.cs-meta-value {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: normal;
  color: #5e5e5e;
}

/* IBM team names: one per line on desktop (mobile turns them into a
   wrapping comma list — see the <=900px block above) */
.cs-meta-team span {
  display: block;
}

/* IBM's meta labels are its brand blue instead of Pearl/SpeakEasy's teal */
.cs-meta.ibm-meta .cs-meta-label {
  color: #0f62fe;
}

/* ---------- HMW callout ---------- */

.cs-hmw {
  font-family: 'PP Editorial Old', serif;
  font-weight: 400;
  font-size: 25px;
  line-height: normal;
  color: #219ebc;
}

/* ---------- ordered/unordered lists ---------- */

.cs-list-accent {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #219ebc;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-list {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: normal;
  color: #7b7b7b;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- comparison research boxes ---------- */

.cs-app-icons {
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  display: flex;
  gap: 60px;
  align-items: center;
  justify-content: center;
  padding: 15px 60px;
}

.cs-app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 81px;
}

.cs-app-icon img {
  width: 81px;
  height: 81px;
  border-radius: 25px;
  border: 1px solid #d9d9d9;
  object-fit: cover;
}

.cs-app-icon span {
  font-family: 'CommitMono', monospace;
  font-size: 12px;
  color: #7b7b7b;
  white-space: nowrap;
}

.cs-compare {
  display: flex;
  gap: 30px;
  align-items: stretch;
}

.cs-compare-box {
  flex: 1;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cs-compare-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'PP Editorial Old', serif;
  font-weight: 400;
  font-size: 20px;
  color: #219ebc;
}

.cs-compare-title img {
  width: 26px;
  height: 26px;
}

.cs-compare-arrow {
  align-self: center;
  width: 26px;
  opacity: 0.6;
}

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

.cs-adaptations {
  display: flex;
  gap: 30px;
}

.cs-adaptation-card {
  flex: 1;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 30px 22px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cs-adaptation-title {
  font-family: 'PP Editorial Old', serif;
  font-weight: 400;
  font-size: 20px;
  color: #219ebc;
}

.cs-adaptation-point {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.cs-adaptation-point img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Figma sizes tabler:check in a 24px box and at-icons:cross in a 20px
   box, which lands both at the same ~2.5px visual weight. Forcing the
   check (its viewBox is 24 units) into the 20px cross box was scaling
   its 2.5px stroke down to ~2px, so the crosses read heavier. Give the
   check back its native 24px box to match. */
.cs-adaptation-point img[src*="check"] {
  width: 24px;
  height: 24px;
  margin-top: 0;
}

.cs-adaptation-point p {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: normal;
  color: #7b7b7b;
}

/* ---------- donut/ring research chart (Figma "GRAPH 2") ---------- */

.cs-donut-section {
  display: flex;
  gap: 10px;
  align-items: center;
}

.cs-donut-wrap {
  position: relative;
  flex-shrink: 0;
  width: 417px;
  height: 417px;
}

/* the rings are Figma's own exported artwork (custom arc lengths + inner
   shadows), not concentric CSS circles — so the arcs match exactly */
.cs-donut-rings {
  display: block;
  width: 417px;
  height: 417px;
}

/* badges are placed by their top-left corner at the exact offsets Figma
   uses (they sit along the arc, not stacked in a straight column) */
.cs-donut-badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fcfcfc;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 5px 8px;
  font-family: 'DM Sans', 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: normal;
  white-space: nowrap;
}

.cs-insights {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cs-insights > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cs-insight-title {
  font-family: 'PP Editorial Old', serif;
  font-weight: 400;
  font-size: 20px;
  line-height: normal;
}

.cs-insight-body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: normal;
  color: #7b7b7b;
  max-width: 535px;
}

/* ---------- device/screen sections ---------- */

/* the flattened frame export was soft (946px wide); the raw source image
   behind it is 2348x946 — using that directly instead, same as the cover
   photo fix. Capped at its native width and centered so the gap to the
   outline matches the gap to the right edge. */
.cs-sketch-img {
  display: block;
  width: 100%;
  max-width: 2348px;
  height: auto;
  border-radius: 10px;
  margin: 0 auto;
}

/* judge-feedback photo: background gradient (lossless at any size) with
   the actual scorecard photo layered on top at its own raw resolution
   (2944x2250 source vs the 564px it renders at — plenty sharp). */
.cs-jumpstart {
  position: relative;
  width: 100%;
  max-width: 2348px;
  aspect-ratio: 945 / 532;
  border-radius: 20px;
  overflow: hidden;
  margin: 0 auto;
}

.cs-jumpstart-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-jumpstart-scorecard {
  position: absolute;
  left: 20.21%;
  top: 9.40%;
  width: 59.68%;
  height: 81.02%;
  object-fit: cover;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
}

/* "final designs" screen frame — real layout in code, built to the same
   946x532 proportions as Figma so every position below is just that
   node's Figma offset expressed as a percentage. Only genuinely
   photographic pieces stay as images: the background gradient (lossless
   at any size since it's smooth), the iPhone bezel art, and the 4 small
   core-frame mockups. The big preview is a real screen recording in
   Figma that can't be exported through the API — see .cs-screen-video-slot. */
.cs-screen-frame {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  aspect-ratio: 946 / 532;
  border-radius: 20px;
  overflow: hidden;
}

/* modifier: no full-bleed gradient photo — just a transparent card with a
   gray stroke (SpeakEasy's actual Figma structure, where the gradient
   lives on the small core-frames card instead, see .cs-screen-core-bg) */
.cs-screen-frame.outline-frame {
  border: 1px solid #d9d9d9;
}

.cs-screen-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-screen-phone {
  position: absolute;
  left: 6.34%;
  top: 13.16%;
  width: 19.77%;
  aspect-ratio: 187 / 392;
}

.cs-screen-video-slot {
  position: absolute;
  left: 4.28%;
  top: 2.55%;
  width: 91.4%;
  height: 95.4%;
  border-radius: 10%;
  overflow: hidden;
  background: #000;
}

.cs-screen-video-slot video,
.cs-screen-video-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-screen-bezel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cs-screen-core-label {
  position: absolute;
  left: 29.18%;
  top: 18.42%;
  font-family: 'CommitMono', monospace;
  font-weight: 400;
  font-size: 12px;
  color: #fcfcfc;
}

/* 4 individually-cropped high-res source photos (not a flattened
   screenshot, which is permanently capped at Figma's 946px frame export
   and looks soft once enlarged) — each crop uses Figma's own exact manual
   crop percentages, so the framing matches exactly. Fixed % widths that
   sum to <100% (not flex:1) so the row always fits the card with no
   overflow risk, and space-between keeps the 3 gaps perfectly uniform. */
.cs-screen-core {
  position: absolute;
  left: 29.18%;
  top: 23.68%;
  width: 64.27%;
  height: 57.89%;
  border: 1px solid #fcfcfc;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 3%;
  box-sizing: border-box;
}

/* modifier: opaque white card instead of the transparent border that lets
   the outer frame's gradient show through (Pearl's look) */
.cs-screen-core.solid-bg {
  background: #fcfcfc;
  border-color: #d9d9d9;
}

/* SpeakEasy's gradient lives here instead of on the outer frame — see
   .cs-screen-frame.outline-frame */
.cs-screen-core-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.cs-screen-mockups {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 25px;
}

.cs-mockup-frame {
  position: relative;
  width: 19.77%;
  aspect-ratio: 119 / 243;
  overflow: hidden;
  border-radius: 8%;
}

.cs-mockup-frame img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-mockup-frame img.has-crop {
  max-width: none;
  max-height: none;
  object-fit: fill;
}

/* Below ~half the design width — the same breakpoint where the outline
   rail is dropped — the "final designs" device sections switch to the
   "adjustable phone" treatment used by both Pearl (1497:406) and
   SpeakEasy (1496:313 etc.): the gradient panel/background, the autoplay
   video preview and the "CORE FRAMES" card all fall away, leaving a plain
   centered row of the four screen mockups (each PNG already carries its
   own iPhone bezel), with no border on the row. Applies to plain Pearl
   frames and SpeakEasy's .outline-frame alike. */
@media (max-width: 900px) {
  .cs-screen-frame {
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    overflow: visible;
    display: flex;
    justify-content: center;
    padding: 20px 0;
  }

  .cs-screen-frame .cs-screen-bg,
  .cs-screen-frame .cs-screen-phone,
  .cs-screen-frame .cs-screen-core-bg,
  .cs-screen-frame .cs-screen-core-label {
    display: none;
  }

  .cs-screen-frame .cs-screen-core {
    position: static;
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
    padding: 0;
  }

  .cs-screen-frame .cs-screen-mockups {
    gap: 20px;
  }

  .cs-screen-frame .cs-mockup-frame {
    width: 22%;
    max-width: 119px;
    border-radius: 0;
  }
}

/* ---------- persona card (SpeakEasy) ---------- */

/* the gradient panel is a padded frame around the card, and its height
   grows with the card's content — the old fixed 946/497 aspect ratio +
   absolutely-positioned fixed-height card clipped the text once it had
   to wrap on narrower screens. */
.cs-persona {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  padding: clamp(20px, 6%, 60px);
  box-sizing: border-box;
}

.cs-persona-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.cs-persona-card {
  position: relative;
  z-index: 1;
  width: 100%;
  border: 1px solid #fcfcfc;
  border-radius: 10px;
  padding: clamp(16px, 3.5%, 32px);
  display: flex;
  flex-direction: column;
  gap: 30px;
  color: #fcfcfc;
  box-sizing: border-box;
}

.cs-persona-name {
  font-family: 'PP Editorial Old', serif;
  font-weight: 400;
  font-size: 25px;
}

.cs-persona-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
  margin-top: 15px;
}

.cs-persona-tag {
  border: 1px solid #fcfcfc;
  border-radius: 5px;
  padding: 5px 10px;
  font-family: 'CommitMono', monospace;
  font-size: 12px;
}

.cs-persona-desc {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: normal;
  margin-top: 15px;
  max-width: 765px;
}

.cs-persona-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 30px;
}

.cs-persona-col {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.cs-persona-list {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: normal;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---------- home iterations gallery (SpeakEasy) ---------- */

/* Figma clips all 4 columns to ONE shared card height (not a separate
   crop per column) — the individual images are naturally different
   lengths, and the card's own overflow:hidden just cuts them all off at
   the same point. aspect-ratio here is measured directly off the Figma
   reference (card width:height ≈ 930:470). */
.cs-iterations {
  position: relative;
  width: 100%;
  aspect-ratio: 930 / 470;
  overflow: hidden;
  background: #fcfcfc;
  border: 1px solid #d9d9d9;
  border-radius: 20px;
  padding: 30px;
  display: flex;
  align-items: flex-start;
  gap: 30px;
  box-sizing: border-box;
}

.cs-iteration-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.cs-iteration-frame {
  width: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 20px;
  overflow: hidden;
}

.cs-iteration-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------
   Mobile overrides that have to sit at the end of the file — their base
   rules are declared further down than the mobile blocks above, so an
   equal-specificity override only wins from here. Same <=900px
   "adjustable phone" breakpoint as the rest.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* SpeakEasy persona: NEEDS & GOALS / PAINPOINTS stack (frame 1496:276) */
  .cs-persona-cols {
    flex-direction: column;
  }

  .cs-persona-col {
    flex: none;
    width: 100%;
  }

  /* SpeakEasy home-iterations gallery: the frame drops the white card
     chrome and lets the four version screens sit straight on the page */
  .cs-iterations {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    gap: 14px;
  }

  /* SpeakEasy device sections use .outline-frame, whose own border rule
     out-specifies the generic .cs-screen-frame reset above — clear it
     here so the frame collapses to a bare mockup row like Pearl's */
  .cs-screen-frame.outline-frame {
    border: 0;
  }

  /* Pearl judges' scorecard: the "pearl - adjustable phone" frame drops
     the gradient panel and lets the scorecard photo run the full column
     width so the rubric text is legible on a small screen (frame node
     1497:520 — one full-bleed image, no backdrop). */
  .cs-jumpstart {
    aspect-ratio: auto;
    border-radius: 0;
    overflow: visible;
  }

  .cs-jumpstart-bg {
    display: none;
  }

  .cs-jumpstart-scorecard {
    position: static;
    width: 100%;
    height: auto;
  }

  /* IBM's six-name team collapses from one-per-line to a wrapping comma
     list (frame 1509:1048). This override has to live here, after the
     desktop `.cs-meta-team span { display: block }` rule further up. */
  .cs-meta-team span {
    display: inline;
  }

  .cs-meta-team span:not(:last-child)::after {
    content: ", ";
  }

  /* no max-width needed here any more — the 2x2 grid (see .cs-meta above)
     already caps this column at one grid cell's width; just let the comma
     list wrap normally within it. */
  .cs-meta-team {
    white-space: normal;
  }
}