/* ===== Case format — one format for every case page =====
   Reference: Figma "Portfolio project", frame 37:170 (VB24), mirrored in the
   "Portfolio — Design System" file, page Case format. Loaded LAST on each case
   page, so a change to the format is made here and nowhere else.

   `html` in front of the selectors lifts them over each sheet's own element
   rules (.case h2 is 0,1,1), so no !important is needed. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../assets/fonts/inter-latin.woff2") format("woff2");
}

:root {
  --cf-headline: 46px;       /* section heading */
  --cf-hero: 46px;           /* first screen title */
  --cf-yulife-headline: 46px; /* same as the others on desktop; its phone size stays until the rebuild */
  --cf-floor: 32px;          /* all of them, on a phone */
  --cf-title-leading: normal; /* Figma's Auto: the font's own line height */
  --cf-leading: 1.2;
  --cf-lead: #555466;        /* the section's name inside its heading */
  --cf-quiet: #9695aa;       /* quiet labels: indigo/300 in the DS */
  --cf-soft: #c2c1d2;        /* light text that is not a heading: indigo/200; headings stay pure white */
  --cf-font: "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
}

/* --- section heading: 46 bold, one sentence, measure 1040 --- */
html .vb24-section__title,
html .pl-h2,
html .case__section-title {
  font-family: var(--cf-font);
  font-size: var(--cf-headline);
  font-weight: 700;
  line-height: var(--cf-title-leading);
  letter-spacing: 0;
  max-width: 1040px;
}
html .case__section-title {
  font-size: var(--cf-yulife-headline);
  line-height: var(--cf-leading);
}

/* --- first screen title: 46 bold --- */
html .vb24-hero__title,
html .pl-hero__title,
html .case__title {
  font-family: var(--cf-font);
  font-size: var(--cf-hero);
  font-weight: 700;
  line-height: var(--cf-title-leading);
  letter-spacing: 0;
}
html .case__title { line-height: var(--cf-leading); }

/* --- first screen: Figma gaps. Text column 478, top inset 56, logo → title
   28, title → standfirst 19, standfirst → meta 59, meta columns 96.5 --- */
/* The 74 header stands in for the frame's 64 top padding: the first screen
   starts right under it, so the two do not add up. */
html .vb24-hero { padding-block: 0; }
html .pl-hero { padding-block: 0 24px; }
html .case .case__hero { padding-top: 0; }
html .case .case__hero-text { padding-top: 56px; }
html .vb24-hero__inner,
html .pl-hero__inner {
  display: grid;
  grid-template-columns: 478px 1fr;
  column-gap: 18px;
  align-items: start;
  max-width: 1088px;   /* 1040 plus the container's own 24 gutters */
  margin-inline: auto;
}
html .vb24-hero__text,
html .pl-hero__text { margin-top: 0; padding-top: 56px; }
html .vb24-hero__title,
html .pl-hero__title { margin-top: 28px; }
html .vb24-hero__standfirst,
html .pl-hero__standfirst { margin-top: 19px; font-size: 15px; font-weight: 400; color: var(--cf-lead); }
html .vb24-hero__meta,
html .pl-hero__meta { margin-top: 59px; column-gap: 96.5px; }
html .pl-hero__meta { column-gap: 0; }   /* its 246 track already holds the gap */
html .vb24-hero__meta dt,
html .pl-hero__meta dt { font-size: 15px; font-weight: 500; color: var(--cf-lead); }
html .vb24-hero__meta dd,
html .pl-hero__meta dd { margin-top: 4.5px; font-size: 15px; font-weight: 500; }
html .vb24-hero__splash {
  grid-column: 2;
  justify-self: end;
  width: 513px;   /* the group plus its shadow */
  max-width: 100%;
  height: auto;
  border-radius: 0;
}

/* Two mockups, lower left and upper right, the same group as the VB24 frame
   (487 x 589). PetLand's screens are still placeholders. */
html .cf-phones { position: relative; grid-column: 2; justify-self: end; width: 487px; height: 589px; }
html .cf-phones .pl-phone { position: absolute; width: 251px; height: 513px; transform: scale(.877); transform-origin: 0 0; }
html .cf-phones .pl-phone:nth-child(1) { left: 0; top: 110px; }
html .cf-phones .pl-phone:nth-child(2) { left: 267px; top: 0; }

/* --- key numbers: the 1040 plate from the frame. Figures 72, captions 22,
   rule 1 x 140, radius 20 --- */
html .vb24-keynums__card,
html .pl-stats { max-width: 1040px; width: 100%; min-height: 207px; border-radius: 20px; }
html .pl-stats { margin-top: 0; }
html .vb24-keynums { padding-block: 24px 120px; }
html .vb24-stat__value { line-height: var(--cf-leading); }
html .vb24-stat__caption,
html .pl-stat__label { font-size: 22px; }

/* --- the plate in one place on every case with one: y 567 at 1101 and up, as on Liminal (frame 1535:4467). The first screen
   ends at 540, the mockups take Liminal's 462 of height, the text starts at its 101.5 --- */
@media (min-width: 1101px) {
  html .case-vb24:not(.case-liminal) .vb24-hero__inner,
  html .pl-hero__inner { min-height: 466.4px; }
  html .case-vb24:not(.case-liminal) .vb24-hero__text,
  html .pl-hero__text { padding-top: 27.9px; }
  html .case-vb24:not(.case-liminal) .vb24-hero__splash { width: 389.6px; margin-top: 0.4px; }
  html .pl-hero { padding-block: 0; }
  html .cf-phones { width: 382px; height: 462px; margin-top: 0.4px; }
  html .cf-phones .pl-phone { transform: scale(.688); }
  html .cf-phones .pl-phone:nth-child(1) { top: 86.3px; }
  html .cf-phones .pl-phone:nth-child(2) { left: 209.4px; }
  html .case-vb24:not(.case-liminal) .vb24-keynums { padding-top: 27px; }
  html .case-vb24:not(.case-liminal) .vb24-keynums__card { align-items: center; min-height: 228px; }
  html .pl-stats { margin-top: 27px; min-height: 228px; }
}

/* --- case header: back link only, at the window's corner. No plate and no
   controls: the site is dark and English only, so theme and language have
   nothing to switch. The same on every case page --- */
html .case__topbar .pill-bar { display: none; }
@media (min-width: 769px) {
  html .case__topbar {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border: 0;
    padding: 24px;
    pointer-events: none;    /* the empty middle does not eat clicks */
  }
  html .case__topbar > * { max-width: none; margin-inline: 0; padding-inline: 0; }
  html .case__topbar .case__back { pointer-events: auto; }
}

/* --- phone header: the plate takes the page's own colour, so it cannot be seen
   but content still slips away under it, and the back link is the arrow alone.
   The words stay for screen readers --- */
@media (max-width: 768px) {
  html .case__topbar {
    background: var(--c-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border: 0;
    padding-block: 4px;
    transition: translate var(--motion-enter);
  }
  /* Out of the way while reading, back on the way up (case-header.js). */
  html .case__topbar.is-tucked:not(:focus-within) { translate: 0 -100%; }
  html .case__back {
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: -12px;      /* the glyph, not its tap area, sits on the gutter */
    color: var(--c-ink);
  }
  html .case__back svg { width: 22px; height: 22px; }
  html .case__back span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --- phone: the format's floor --- */
@media (max-width: 768px) {
  :root {
    --cf-headline: clamp(var(--cf-floor), 7.4vw, 46px);
    --cf-yulife-headline: clamp(var(--cf-floor), 7.4vw, 56px);
    --cf-hero: clamp(var(--cf-floor), 7.4vw, 46px);
  }
  html .vb24-hero__inner,
  html .pl-hero__inner { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  html .vb24-hero__text,
  html .pl-hero__text { padding-top: 0; }
  html .vb24-hero__splash { grid-column: 1; justify-self: center; }
  html .cf-phones { grid-column: 1; justify-self: center; }
}

@media (max-width: 520px) {
  html .cf-phones { width: 342px; height: 414px; }
  html .cf-phones .pl-phone { transform: scale(.616); }
  html .cf-phones .pl-phone:nth-child(1) { top: 77px; }
  html .cf-phones .pl-phone:nth-child(2) { left: 188px; }
}

/* --- PetLand key numbers: three cards, frame 2161:9761 --- */
@media (min-width: 769px) {
  html .pl-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: none;
  }
  html .pl-stats__rule { display: none; }
  html .pl-stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    padding: 32px;
    border-radius: 20px;
    background: #2f2d3e;
    text-align: left;
  }
  html .pl-stat__value { font-size: clamp(44px, 5.8vw, 72px); font-weight: 600; color: var(--cf-quiet); }
  html .pl-stat__label { font-size: 17px; color: var(--cf-quiet); }
}

/* --- VB24, sections added from the frame --- */
.vb24-killed { padding-top: 0; }
.vb24-killed__sticky { width: 306px; margin-inline: auto; transition: transform .2s ease-out; }
/* The Hypotheses stickers' hover. Its resting tilt is in the image, so only the extra turn is here. */
@media (hover: hover) {
  .vb24-killed__sticky:hover { transform: rotate(2deg) scale(1.02); }
}
.cf-caption { margin: 24px 0 0; color: var(--cf-lead); font-size: 17px; text-align: center; }
.pl-personas-img { display: block; width: 100%; height: auto; }
html .vb24-bench .vb24-figure { display: block; }
html .vb24-hero__inner > picture { display: contents; }
html .vb24-hero__inner > picture > source { display: none; }
@media (min-width: 769px) {
  html .case-petland [data-figma="1433:4150"] { margin-top: 217px; }
}

/* ===== Phone version, frames 2135:8226, 2139:8226, 2140:11160 =====
   Each section keeps its heading and swaps the desktop content for .cf-m blocks
   exported from the 390 frames. .cf-keep is desktop content that stays.
   `html` in front: .case-vb24 img is 0,1,1 and would show them on desktop. */
html .cf-m { display: none; }

@media (max-width: 768px) {
  :root {
    --cf-headline: 20px;
    --cf-hero: 32px;
    --cf-title-leading: 24px;
  }
  html .case-vb24,
  html .vb24-topbar,
  html .case-petland,
  html .pl-topbar { --vb24-gutter: 20px; --pl-gutter: 20px; }

  html .cf-q { color: var(--cf-lead); }
  html .cf-m { display: block; width: 100%; height: auto; }
  html .cf-bleed { width: calc(100% + 40px); max-width: none; margin-inline: -20px; }
  html .cf-caption { margin: -24px 0 0; font-size: 13px; }
  html .case__back { color: var(--cf-lead); }

  html .vb24-section__inner > :not(h2, .cf-m, .cf-keep),
  html .case-petland section.pl-container > :not(h2, .cf-m, .cf-keep) { display: none; }

  /* rows that run past the screen */
  html .cf-scroll {
    width: auto;
    margin-inline: -20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  html .cf-scroll::-webkit-scrollbar { display: none; }
  html .cf-scroll img { display: block; max-width: none; height: auto; border-radius: 0; }
  html .cf-scroll__in { display: inline-block; padding-inline: 20px; vertical-align: top; }

  /* section rhythm: 80 between sections, the rule, 80 under it */
  html .case-vb24 { padding-bottom: 108px; }
  html .case-petland { padding-bottom: 108px; }
  html .vb24-section { padding-block: 0; margin-top: 80px; }
  html .vb24-section--ruled { padding-top: 80px; }
  html .vb24-section__inner { gap: 32px; }
  html .case-liminal [data-figma="1558:81"] { padding-top: 80px; }
  html .case-liminal [data-figma="1558:81"] .vb24-section__inner { gap: 80px; }
  html .case-liminal [data-figma="1535:4761"] .vb24-section__inner { gap: 97px; }
  html .vb24-bench .vb24-section__inner { gap: 40px; }
  html .vb24-statement {
    margin: 28px 0 0;
    font-family: var(--cf-font);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
  }

  /* first screen */
  html .vb24-section.vb24-hero { margin-top: 0; }
  html .vb24-hero__inner,
  html .pl-hero__inner { display: flex; flex-direction: column; align-items: stretch; gap: 21px; }
  html .vb24-hero__text,
  html .pl-hero__text { width: 100%; max-width: none; padding: 20px 0 0; }
  html .case-liminal .vb24-hero__inner { gap: 80px; }
  html .vb24-hero__logo,
  html .pl-hero__logo,
  html .lim-logo { width: 52px; height: 52px; }
  html .vb24-hero__title,
  html .pl-hero__title,
  html .case-liminal .vb24-hero__title { margin-top: 28px; line-height: 40px; }
  html .vb24-hero__standfirst,
  html .pl-hero__standfirst { margin-top: 18px; line-height: 20px; }
  html .vb24-hero__meta,
  html .vb24-hero__meta.lim-meta,
  html .pl-hero__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 20px;
    margin-top: 21px;
  }
  html .vb24-hero__meta dd,
  html .pl-hero__meta dd { margin-top: 5px; line-height: 18px; }
  html .vb24-hero__splash,
  html .lim-hero-mock { width: 100%; max-width: 100%; margin: 0; }
  html .cf-phones { position: relative; width: 100%; height: 342px; }
  html .cf-phones .pl-phone { transform: scale(.558); }
  html .cf-phones .pl-phone:nth-child(1) { left: 19px; top: 19px; }
  html .cf-phones .pl-phone:nth-child(2) { left: 191px; top: 19px; }

  /* key numbers, VB24 */
  html .vb24-keynums { margin-top: 80px; }
  html .vb24-keynums__card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: none;
  }
  html .vb24-keynums__divider { display: none; }
  html .vb24-stat {
    display: block;
    padding: 20px;
    border-radius: 10px;
    background: #2f2e3e;
    text-align: left;
  }
  html .vb24-stat__value,
  html .vb24-stat__value > * {
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    color: var(--cf-soft);
  }
  html .vb24-stat__caption { margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--cf-quiet); text-align: left; }

  /* VB24 blocks that stay markup */
  html .vb24-edge .vb24-screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html .vb24-edge .vb24-screens img { width: 100%; }
  html .vb24-proto-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html .cf-alerts-phone { width: 249px; margin-inline: auto; }
  html .cf-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: -12px; }
  html .cf-card { padding: 12px; border-radius: 10px; background: rgb(255 255 255 / .06); }
  html .cf-card .vb24-callout__title { font-size: 14px; line-height: 18px; }
  html .cf-card .vb24-callout__body { margin-top: 6px; font-size: 12px; line-height: 16px; }
  html .lim-slot { min-height: 240px; }

  /* PetLand */
  html .case-petland section.pl-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }
  html .case-petland [data-figma="1206:4541"] { margin-top: 40px; }
  html .case-petland [data-figma="11:17"] { margin-top: 122px; }
  html .case-petland [data-figma="1225:4161"] { gap: 40px; }
  html .case-petland [data-figma="1272:4151"] { gap: 80px; }
  html .case-petland [data-figma="1433:4150"] {
    margin-top: 80px;
    padding-top: 80px;
    border-top: 1px solid var(--pl-divider-line);
  }
  html .pl-divider { margin-block: 80px; }
  html .pl-count {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: var(--cf-lead);
  }
  html .pl-count b { color: #fff; font-weight: 700; }
  html .pl-findings { display: flex; gap: 12px; width: max-content; }
  html .pl-finding { flex: 0 0 239px; min-height: 170px; padding: 32px 20px; border-radius: 10px; }
  html .pl-finding__label { color: var(--cf-quiet); }
  html .pl-subsection { display: flex; flex-direction: column; gap: 12px; }
  html .pl-after-quotes,
  html .pl-after-recording,
  html .pl-after-headline { margin-top: 0; }
  html .pl-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  html .pl-step__phone { width: 100%; height: 366px; }
}

@media (max-width: 768px) {
  html .vb24-section__title br,
  html .vb24-statement br,
  html .pl-h2 br { display: none; }
  html .vb24-stat { padding: 20px 16px; }
  html .vb24-stat__value { display: flex; gap: 6px; align-items: center; }
  html .pl-flow { padding: 0; background: none; border-radius: 0; }
}

@media (max-width: 768px) {
  html .pl-subsection { min-width: 0; max-width: 100%; }
  html .pl-subsection > .cf-scroll { max-width: calc(100% + 40px); }
}

/* The two phones keep their 487 and the text gives way, so the group stays inside the window. */
@media (min-width: 769px) and (max-width: 1100px) {
  html .pl-hero__inner { grid-template-columns: minmax(0, 1fr) 487px; }
}

@media (max-width: 860px) {
  html .pl-quote__bubble br { display: none; }
}

/* --- VB24 desktop, frame 37:170: headings 46 like every case, Benchmarks with its own gaps --- */
@media (min-width: 769px) {
  html .case-vb24:not(.case-liminal) .vb24-section__title,
  html .case-vb24:not(.case-liminal) .vb24-statement {
    font-family: var(--cf-font);
    font-size: var(--cf-headline);
    font-weight: 700;
    line-height: normal;
    max-width: 1040px;
  }
  html .vb24-bench .vb24-section__inner { gap: 30px; }
  html .vb24-bench .vb24-figure + .vb24-figure { margin-top: 26px; }
  html .vb24-bench .cf-caption { margin-top: 12px; font-size: 15px; }
}

/* --- Prototype: the phone mockup stands in until the recordings arrive, as in the frames --- */
html .vb24-proto-row .vb24-video-ph {
  aspect-ratio: 249 / 513;
  border: 0;
  border-radius: 0;
  background: url("../../assets/case/vb24/m/alerts.webp") center / contain no-repeat;
}
html .vb24-proto-row .vb24-video-ph__label { display: none; }

@media (min-width: 769px) {
  html .vb24-killed { padding-top: 104px; }
  html .vb24-proto-row { gap: 20px; }
  html .case-liminal [data-figma="1535:4761"] { padding-bottom: 160px; }
  html .vb24-next { padding-bottom: 160px; }
}

/* --- Case end: thanks, chat, next cases. Frames 126:839 and 126:891. The chat and
   the cards are the home page's own; only the frame around them lives here --- */
.case-end {
  display: flex;
  flex-direction: column;
  gap: 120px;
  padding: 160px 24px 120px;
  border-top: 1px solid rgb(85 84 102 / .25);
}
.case-end__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
}
html .case-end__title {
  margin: 0;
  font-family: var(--cf-font);
  font-size: var(--cf-headline);
  font-weight: 700;
  line-height: normal;
  color: #fff;
  text-align: center;
}
.case-end__title span { display: block; color: var(--cf-lead); }
.case-end.is-chatting .case-end__title { display: none; }
.case-end .hero-chat { display: flex; flex-direction: column; gap: 16px; }
html .case-end .hero-chat__thread {
  position: static;
  width: auto;
  height: auto;
  max-height: min(544px, 60vh);
}
.case-end__cards { width: 100%; max-width: 1078px; }
html .case-end .card__cover { display: block; max-width: none; }
@media (min-width: 901px) {
  html .case-end .card__cover { max-width: 100%; }
}
/* PetLand's last section has no padding of its own, so the gap above the line
   comes from here and matches its dividers. VB24 and Liminal get it from theirs. */
@media (min-width: 769px) {
  .case-petland .case-end { margin-top: clamp(72px, 15vw, var(--pl-section-gap)); }
}
@media (max-width: 768px) {
  .case-end { gap: 64px; margin-top: 80px; padding: 72px 20px 0; }
  .case-end__top { gap: 24px; }
  html .case-end__title { font-size: 20px; line-height: 24px; }
  .case-end .hero-chat { max-width: none; }
}