/* Case study pages. Built from the Figma frame "Connect case study v3 (gradient tiles)",
   node 1031:128669 in Portfolio-MAIN (1728px desktop). Loaded after styles.css, which
   holds the tokens, the nav and the grid width (--content: 1184px, 584px below 1024px). */

/* The case color fills the whole window, so wide screens show no stripes at the sides */
.case-page { background: var(--c-case-accent, #488fff); }
.case-page--connect { --c-case-accent: var(--bu-1200); }
.case-page--construction { --c-case-accent: var(--g-ease); }
.case-page--checkin { --c-case-accent: var(--bu-checkin); }

/* Nav pill with the previous and next case arrows 176px either side of its center */
.case-header { align-items: center; gap: 19px; }
.case-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 48px;
  background: var(--c-nav-bg);
  border: 1px solid var(--c-nav-border);
  border-radius: var(--r-pill);
  color: var(--c-text);
  -webkit-backdrop-filter: blur(16px); /* like the nav pill, for when the page scrolls under it */
  backdrop-filter: blur(16px);
}
a.case-arrow { transition: background-color 0.2s ease; }
a.case-arrow:hover { background: rgba(244, 243, 238, 0.72); }
.case-arrow__icon { display: block; width: 24px; height: 24px; }
.case-arrow__icon--flipped { transform: scaleX(-1); } /* the same arrow, pointing right */

/* The case sheet: 1184px, 96px from the top, on the case color */
.case {
  width: var(--content);
  margin: 16px auto 96px;
  padding: 0 64px 120px;
  display: flex;
  flex-direction: column;
  gap: 64px;
  background: var(--pf-neutral-100);
  border-radius: 32px;
  color: var(--c-link);
}
.case h3, .case p, .case dd, .case figure, .case blockquote { margin: 0; }

/* Type, from the PF text styles */
.case__title { font-family: var(--f-display); font-weight: 600; font-size: 60px; line-height: normal; letter-spacing: -0.6px; color: var(--c-text); }
.case__subtitle { font-family: var(--f-display); font-weight: 600; font-size: 40px; line-height: 56px; letter-spacing: -0.4px; color: #3885ff; }
.case__h2 { font-family: var(--f-display); font-weight: 600; font-size: 40px; line-height: 56px; letter-spacing: -0.4px; }
.case__h3 { display: flex; align-items: center; gap: 16px; font-family: var(--f-display); font-weight: 600; font-size: 28px; line-height: normal; }
.case__icon { display: block; flex: none; width: 32px; height: 32px; } /* ASSETS/Infobric Connect/icons */
.case figcaption { color: #6f6b63; }

/* Intro: title, facts, hero */
.case__intro { display: flex; flex-direction: column; gap: 40px; padding-top: 80px; }
.case__titles { display: flex; flex-direction: column; gap: 16px; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; font-weight: 600; }
.facts__item { display: flex; flex-direction: column; gap: 16px; }
.facts dt { font-size: 13px; line-height: normal; letter-spacing: 1px; text-transform: uppercase; }
.facts dd { margin: 0; }
.case__hero { display: block; width: 100%; height: auto; aspect-ratio: 2000 / 800; border-radius: 24px; }

/* Sections */
.case__section { display: flex; flex-direction: column; gap: 40px; }
.case__section--tight { gap: 32px; }
.case__section--wide { gap: 64px; }
.case__block { display: flex; flex-direction: column; gap: 40px; }
.case__head { display: flex; flex-direction: column; gap: 24px; }
.case__head .case__p--joined { margin-top: -24px; } /* no empty line between these two paragraphs in Figma */
.case__figure { display: flex; flex-direction: column; gap: 16px; }
.case__img { display: block; width: 100%; height: auto; }
.case__img--mobile { border-radius: 24px; }

.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pair__item { display: flex; flex-direction: column; gap: 24px; }

/* Accent tiles: pieces of ASSETS/Infobric Connect/Quote_bg.png (2112 x 752, the owner's
   Colir export). The quote shows the whole image; every other card shows a different
   part of it, so no two cards repeat the same pattern. The light version puts a
   white wash over the image so blue text stays readable. */
.accent {
  --piece: 100% auto;
  --spot: center;
  background: url("ASSETS/Infobric%20Connect/Quote_bg.png") var(--spot) / var(--piece) no-repeat #5a93f4;
  color: #fff;
}
.accent--whole { --piece: cover; }
.accent--light { background-image: linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.62)), url("ASSETS/Infobric%20Connect/Quote_bg.png"); background-size: auto, var(--piece); background-position: 0 0, var(--spot); color: inherit; }
.accent--v1 { --piece: 240% auto; --spot: 0% 0%; }
.accent--v2 { --piece: 220% auto; --spot: 100% 100%; }
.accent--v3 { --piece: 260% auto; --spot: 35% 60%; }
.accent--v4 { --piece: 200% auto; --spot: 80% 20%; }

.quote { padding: 48px; border-radius: 24px; }
.quote p { max-width: 960px; font-family: var(--f-display); font-weight: 600; font-size: 40px; line-height: 56px; letter-spacing: -0.4px; }

.constraints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.constraint { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 48px; border-radius: 24px; }
.constraint__title { font-family: var(--f-display); font-weight: 600; font-size: 28px; line-height: normal; color: #3885ff; }

/* Exploration: two 800 x 533 screenshots overlapping in a 1056 x 634 area, the note on top.
   case-exploration.js moves .is-front to the screenshot under the pointer. */
.explore { position: relative; }
.explore__stage { position: relative; aspect-ratio: 1056 / 634; }
.explore__shot {
  position: absolute;
  z-index: 1;
  width: 75.7576%; /* 800 of 1056 */
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 24px;
  filter: brightness(0.84); /* Figma's 16% black over the one behind */
  transition: filter 0.3s ease;
}
.explore__shot--a { top: 0; left: 0; }
.explore__shot--b { right: 0; bottom: 0; }
.explore__shot.is-front { z-index: 2; filter: none; }
.explore__shot:focus-visible { outline-offset: 4px; }
.explore__note {
  position: absolute;
  z-index: 3;
  left: 24px;
  bottom: 24px;
  width: min(384px, 100% - 48px);
  padding: 16px;
  border-radius: 16px;
  background: var(--y-350);
  pointer-events: none; /* the screenshots underneath still react to the pointer */
}
.case .explore__note { color: var(--c-link); }

/* Browser frame: a 32px bar with three dots, the screenshot below it from the top.
   1056 x 744 like the Figma "Browser placeholder"; taller screenshots are cropped at the bottom. */
.browser {
  display: flex;
  flex-direction: column;
  aspect-ratio: 1056 / 744;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
}
.browser::before {
  content: "";
  flex: none;
  height: 32px;
  background:
    radial-gradient(circle at 22px 16px, rgba(255, 255, 255, 0.64) 5.5px, transparent 6px),
    radial-gradient(circle at 42px 16px, rgba(255, 255, 255, 0.64) 5.5px, transparent 6px),
    radial-gradient(circle at 62px 16px, rgba(255, 255, 255, 0.64) 5.5px, transparent 6px),
    var(--pf-neutral-300);
}
.browser img { display: block; flex: 1 1 0; min-height: 0; width: 100%; object-fit: cover; object-position: top; }

/* Solution flow: four blocks with joins, brackets and labels.
   Seven columns: 4 blocks, 3 joins of 32px, 8px apart (228px blocks at full width). */
.flow {
  --flow-cols: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr);
  display: grid;
  grid-template-columns: var(--flow-cols);
  column-gap: 8px;
  color: var(--bu-1200);
}
.flow__label { font-weight: 600; font-size: 13px; line-height: normal; letter-spacing: 1px; text-transform: uppercase; text-align: center; }
.flow__label--top { grid-column: 1 / -1; min-height: 20px; }
.flow__steps { grid-column: 1 / -1; display: grid; grid-template-columns: var(--flow-cols); column-gap: 8px; margin: 16px 0; padding: 0; list-style: none; }
.flow__step {
  display: flex;
  align-items: center;
  min-height: 104px;
  padding: 24px;
  border-radius: 24px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
}
.flow__step.accent--light { color: var(--bu-1200); }
.flow__join { display: flex; align-items: center; justify-content: center; }
.flow__join img { display: block; width: 32px; height: 32px; }

.flow__bracket { position: relative; height: 16px; }
.flow__bracket::before, .flow__bracket::after { content: ""; position: absolute; border: 0 solid currentColor; }
.flow__bracket::after { left: 50%; width: 0; height: 8px; border-left-width: 1.5px; margin-left: -0.75px; }
.flow__bracket--top { grid-column: 1 / -1; margin-top: 8px; }
.flow__bracket--top::before { left: 0; right: 0; top: 8px; height: 8px; border-width: 1.5px 1.5px 0; border-radius: 6px 6px 0 0; }
.flow__bracket--top::after { top: 0; }
.flow__bracket--first, .flow__bracket--rest { grid-row: 4; }
.flow__bracket--first { grid-column: 1; }
.flow__bracket--rest { grid-column: 3 / -1; }
.flow__bracket--first::before, .flow__bracket--rest::before { left: 0; right: 0; top: 0; height: 8px; border-width: 0 1.5px 1.5px; border-radius: 0 0 6px 6px; }
.flow__bracket--first::after, .flow__bracket--rest::after { top: 8px; }
.flow__label--first, .flow__label--rest { grid-row: 5; margin-top: 8px; }
.flow__label--first { grid-column: 1; }
.flow__label--rest { grid-column: 3 / -1; }

/* Where it landed: two bars and the copy */
.landed { display: flex; gap: 24px; align-items: flex-start; }
.landed__chart { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.landed__copy { flex: 1 1 0; min-width: 0; }
.landed__bars { display: flex; gap: 16px; align-items: flex-end; }
.bar { position: relative; flex: 1 1 0; min-width: 0; border-radius: 24px; font-family: var(--f-display); font-weight: 600; }
.bar--2025 { height: 168px; color: var(--bu-1200); }
.bar--2026 { height: 240px; border-radius: 16px; display: flex; flex-direction: column; align-items: flex-start; padding: 24px; }
.bar__value { position: absolute; top: 24px; left: 24px; font-size: 28px; line-height: normal; }
.bar__value--big { position: static; font-size: 40px; line-height: 56px; letter-spacing: -0.4px; }
.bar__year { position: absolute; left: 24px; bottom: 24px; font-size: 20px; line-height: 28px; }
.bar__delta { display: inline-flex; align-items: center; height: 37px; padding: 8px; border-radius: var(--r-pill); background: #0f6cff; font-size: 20px; line-height: 28px; color: #fff; }

/* Reveal (case-transition.js). Arriving through the turning card, the sheet is empty
   until the fonts and the page are ready; then each block appears from left to right,
   a soft edge of transparency sweeping across, one block a little after the other.
   Leaving through the Home link, the content fades out before the home page loads. */
.case-enter .case > * { visibility: hidden; }
.case-leave .case > * { opacity: 0; transition: opacity 0.25s ease; }
.case.is-revealing > * {
  animation: case-reveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
  -webkit-mask-size: 240% 100%;
  mask-size: 240% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.case.is-revealing > :nth-child(2) { animation-delay: 0.08s; }
.case.is-revealing > :nth-child(3) { animation-delay: 0.16s; }
.case.is-revealing > :nth-child(n + 4) { animation-delay: 0.24s; }
@keyframes case-reveal {
  from { opacity: 0; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .explore__shot { transition: none; }
  .case.is-revealing > * { animation: none; -webkit-mask-image: none; mask-image: none; }
}

/* Below 1024px: the same stopgap as the home page, one 584px column */
@media (max-width: 1023px) {
  .case { padding: 0 32px 80px; gap: 56px; border-radius: 24px; }
  .case__intro { padding-top: 48px; }
  .case__title { font-size: 44px; letter-spacing: -0.44px; }
  .case__subtitle { font-size: 28px; line-height: 36px; letter-spacing: -0.28px; }
  .case__subtitle .case__br { display: none; }
  .case__h2 { font-size: 32px; line-height: 40px; letter-spacing: -0.32px; }
  .case__h3 { font-size: 24px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pair, .constraints { grid-template-columns: minmax(0, 1fr); }
  .quote { padding: 32px; }
  .quote p { font-size: 28px; line-height: 36px; letter-spacing: -0.28px; }
  .constraint { padding: 32px; }
  .constraint__title { font-size: 24px; }

  /* Flow: blocks stacked, joins between them, brackets dropped, labels as notes */
  .flow { display: flex; flex-direction: column; gap: 8px; }
  .flow__steps { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
  .flow__step { min-height: 72px; }
  .flow__join { height: 24px; }
  .flow__join:nth-child(2) img { transform: rotate(90deg); } /* the arrow points down the list */
  .flow__bracket { display: none; }
  .flow__label, .flow__label--first, .flow__label--rest { margin-top: 0; }
  .flow__label br { display: none; }

  .landed { flex-direction: column; }
  .landed__chart, .landed__copy { flex: none; width: 100%; }
}

@media (max-width: 639px) {
  .case { padding: 0 24px 64px; gap: 48px; }
  .case__intro { padding-top: 32px; }
  .case__title { font-size: 36px; letter-spacing: -0.36px; }
  .case__subtitle { font-size: 24px; line-height: 32px; letter-spacing: -0.24px; }
  .case__h2 { font-size: 28px; line-height: 36px; letter-spacing: -0.28px; }
  .case__h3 { font-size: 20px; gap: 12px; }
  .facts { gap: 24px 16px; }
  .quote, .constraint { padding: 24px; border-radius: 16px; }
  .quote p { font-size: 22px; line-height: 30px; letter-spacing: -0.22px; }
  .case__hero, .case__img--mobile { border-radius: 16px; }
  .explore__shot { border-radius: 12px; }
  .browser { border-radius: 12px; }
  .browser::before { height: 20px; background:
    radial-gradient(circle at 14px 10px, rgba(255, 255, 255, 0.64) 3.5px, transparent 4px),
    radial-gradient(circle at 26px 10px, rgba(255, 255, 255, 0.64) 3.5px, transparent 4px),
    radial-gradient(circle at 38px 10px, rgba(255, 255, 255, 0.64) 3.5px, transparent 4px),
    var(--pf-neutral-300); }
  /* The note would cover the screenshots on a phone: it moves below them */
  .explore__note { position: static; width: auto; margin-top: 16px; }
  .bar { border-radius: 16px; }
  .bar__value { font-size: 22px; }
  .bar__value--big { font-size: 30px; line-height: 40px; }
  .bar__delta { font-size: 16px; height: 32px; }
}

/* The arrows do not fit next to the nav on small phones; the Home link still leads to every case */
@media (max-width: 479px) {
  .case-arrow { display: none; }
}

/* ---- Ease Construction (construction.html), from the Figma frame 1060:135319 ---- */
.case-page--construction .case__subtitle { color: #33995f; }
.case-page--construction .facts dt { color: #7a7471; }
.case-page--construction figcaption,
.example__caption { color: #7a7471; }
.case__h3--dark { color: var(--c-text); }

/* Green accent: Connect's Quote_bg.png, its hues swapped for the Ease green. The
   luminosity blend keeps the image's light, grain and dots and takes the color
   from the green underneath; a grey multiply on top darkens it to the Ease green. */
.accent--green {
  background-image: linear-gradient(#cbcbcb, #cbcbcb), url("ASSETS/Infobric%20Connect/Quote_bg.png");
  background-size: auto, var(--piece);
  background-position: 0 0, var(--spot);
  background-repeat: no-repeat;
  background-color: var(--g-ease);
  background-blend-mode: multiply, luminosity; /* a grey multiply brings the light down to the Ease green */
  color: #f9f7f4;
}

/* Bulleted lists in the two-column blocks */
.bullets { margin: 0; padding: 0; list-style: none; }
.bullets li { position: relative; padding-left: 24px; }
.bullets li::before { content: ""; position: absolute; left: 10px; top: 11px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

/* "Nobody asked for this project": statement and a short list, 56px apart */
.project {
  display: grid;
  grid-template-columns: minmax(0, 520fr) minmax(0, 384fr);
  gap: 56px;
  padding: 48px;
  border-radius: 24px;
}
.project__statement { display: flex; flex-direction: column; gap: 16px; }
.project__label { font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.project__title { font-family: var(--f-display); font-weight: 600; font-size: 40px; line-height: 56px; letter-spacing: -0.4px; }
.project__list { margin: 0; padding: 0; list-style: none; font-weight: 600; color: #f2efe9; }
.project__list li { padding: 12px 0; }
.project__list li + li { border-top: 1px solid rgba(255, 255, 255, 0.24); }

/* Pills: Stage 1, On exit, Shipped */
.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: #fff;
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-link);
}
.tag--sheet { background: var(--pf-neutral-100); }
.tag--green { background: #33995f; color: #fff; }

/* A titled screen: title and caption 16px apart, the screen 40px below */
.example { display: flex; flex-direction: column; gap: 40px; }
.example__head { display: flex; flex-direction: column; gap: 16px; }

/* Person details: the old window and the new modal overlapping (case-exploration.js).
   Both 630 of 1056 wide in a 1056 x 642 area, the old one top left, the new one bottom right.
   Unlike Connect's Exploration, the one behind is not dimmed. */
.explore--modal .explore__stage { aspect-ratio: 1056 / 642; }
.explore--modal .explore__shot { width: 59.6591%; aspect-ratio: auto; border-radius: 8px; box-shadow: 0 8px 32px rgba(61, 32, 14, 0.12); }
.explore--modal .explore__shot { filter: none; } /* both stay fully visible; only the order changes */

/* Before and after in one browser frame (case-compare.js). The new screen fills the
   frame; the old one lies on top, cut off at the handle, so the old screen shows to
   the left of the handle and the new one to the right. Neutral handle: a white line
   and a white circle with a double arrow, drawn in CSS. */
.browser--compare { aspect-ratio: auto; }
.compare {
  --pos: 50%;
  position: relative;
  flex: none;
  aspect-ratio: 2880 / 1932;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: pan-y; /* vertical swipes still scroll the page on touch screens */
  user-select: none;
  -webkit-user-select: none;
}
.compare .compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; pointer-events: none; }
.compare__img--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(31, 30, 30, 0.08);
  outline: none;
}
.compare__handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 12px rgba(31, 30, 30, 0.18);
  transition: transform 0.2s ease;
}
.compare__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 10px;
  margin: -5px 0 0 -9px;
  background: #6f6b63;
  clip-path: polygon(0 50%, 35% 0, 35% 40%, 65% 40%, 65% 0, 100% 50%, 65% 100%, 65% 60%, 35% 60%, 35% 100%);
}
.compare:hover .compare__handle::before, .compare.is-dragging .compare__handle::before { transform: scale(1.08); }
.compare__handle:focus-visible::before { outline: 2px solid var(--c-text); outline-offset: 2px; }

/* Rollout rail: three stages, a grey track, green up to the third dot */
.rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rail::before, .rail::after { content: ""; position: absolute; top: 90px; left: 0; height: 4px; }
.rail::before { right: 0; background: var(--c-nav-border); }
.rail::after { width: calc(66.6667% + 26px); background: #33995f; }
.rail__stage { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.rail__title { font-family: var(--f-display); font-weight: 600; font-size: 20px; line-height: 28px; }
.rail__dot { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: #33995f; }
.rail__text { color: #7a7471; }

/* Revert rate band, with 100 dots: one per percent, the last nine green */
.revert { display: flex; gap: 48px; align-items: center; padding: 48px; border-radius: 24px; background: #3d281b; color: #f9f7f4; }
.revert__figure { flex: 0 0 340px; display: flex; flex-direction: column; gap: 2px; }
.revert__label { font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.revert__value { font-family: var(--f-display); font-weight: 600; font-size: 88px; line-height: 110px; letter-spacing: -0.88px; }
.revert__detail { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.revert__dots {
  position: relative;
  display: block;
  width: 314px;  /* 20 dots of 10px, 6px apart */
  height: 74px;  /* 5 rows */
  background: radial-gradient(circle at 5px 5px, #e9e6e0 4.6px, transparent 5px) 0 0 / 16px 16px;
}
.revert__dots::after {
  content: "";
  position: absolute;
  left: 176px; /* dots 92 to 100 */
  top: 64px;
  width: 138px;
  height: 10px;
  background: radial-gradient(circle at 5px 5px, #33995f 4.6px, transparent 5px) 0 0 / 16px 16px;
}

/* Feedback instrumentation: three white cards */
.instruments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.instrument { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; border-radius: 16px; background: #fff; }

/* Five themes: number, theme, what was done */
.themes { margin: 0; padding: 0; list-style: none; }
.theme { display: grid; grid-template-columns: 56px minmax(0, 1fr) 210px; gap: 32px; padding: 24px 0; }
.theme + .theme { border-top: 1px solid var(--c-nav-border); }
.theme__number { font-family: var(--f-display); font-weight: 600; font-size: 40px; line-height: 56px; letter-spacing: -0.4px; color: #ccc8c5; }
.theme__body { display: flex; flex-direction: column; gap: 8px; }
.theme__title { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 28px; line-height: normal; color: var(--c-text); }
.theme__result { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; font-weight: 600; }

/* Compact density: a white card with regular rows and compact rows side by side,
   drawn after the Figma card, and the copy next to it */
.density { display: flex; flex-direction: column; gap: 16px; }
.density__row { display: grid; grid-template-columns: 484px minmax(0, 1fr); gap: 32px; align-items: center; }
.density__card { display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: 16px; background: #fff; }
.density__title { font-family: var(--f-display); font-weight: 600; font-size: 20px; line-height: 28px; color: var(--c-text); }
.density__preview {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 112px;
  overflow: hidden;
  border: 1px solid var(--pf-neutral-100);
  border-radius: 8px;
}
.density__side { display: flex; flex-direction: column; }
.density__side i { position: relative; flex: none; height: 44px; border-bottom: 1px solid var(--pf-neutral-100); }
.density__side--compact i { height: 28px; }
.density__side i::before { content: ""; position: absolute; left: 12px; top: 50%; width: 10px; height: 10px; margin-top: -5px; box-sizing: border-box; border: 1px solid #ccc8c5; border-radius: 2px; }
.density__side i::after { content: ""; position: absolute; left: 32px; right: 14px; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: #ccc8c5; }
.density__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #33995f; }
.density__handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  box-sizing: border-box;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #33995f;
}
.density__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 6px;
  margin: -3px 0 0 -5px;
  background: #fff;
  clip-path: polygon(0 50%, 35% 0, 35% 40%, 65% 40%, 65% 0, 100% 50%, 65% 100%, 65% 60%, 35% 60%, 35% 100%);
}
.density__labels { display: flex; justify-content: space-between; font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; color: #6f6b63; }

@media (max-width: 1023px) {
  .project { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px; }
  .project__title { font-size: 28px; line-height: 36px; letter-spacing: -0.28px; }
  /* Rail: the stages stack; the track is dropped and the dots stay as markers */
  .rail { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .rail::before, .rail::after { display: none; }
  .revert { flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px; }
  .revert__figure, .revert__detail { flex: none; align-self: stretch; }
  .instruments { grid-template-columns: minmax(0, 1fr); }
  .theme { grid-template-columns: 40px minmax(0, 1fr); gap: 16px 24px; }
  .theme__number { font-size: 28px; line-height: 36px; }
  .theme__title { font-size: 24px; }
  .theme__result { grid-column: 2; }
  .density__row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 639px) {
  .project, .revert { padding: 24px; border-radius: 16px; }
  .project__title { font-size: 24px; line-height: 32px; letter-spacing: -0.24px; }
  .revert__value { font-size: 64px; line-height: 80px; }
  /* Smaller dots so the 20 columns fit a phone: 8px, 4px apart */
  .revert__dots { width: 236px; height: 56px; background: radial-gradient(circle at 4px 4px, #e9e6e0 3.6px, transparent 4px) 0 0 / 12px 12px; }
  .revert__dots::after { left: 132px; top: 48px; width: 104px; height: 8px; background: radial-gradient(circle at 4px 4px, #33995f 3.6px, transparent 4px) 0 0 / 12px 12px; }
  .theme { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .theme__result { grid-column: auto; }
  .theme__title { font-size: 20px; }
  .density__card { padding: 20px; }
  .density__preview { height: 112px; }
  .density__side i::after { right: 8px; }
  .compare__handle::before { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
}

/* ---- Ease CheckIn (checkin.html), from the Figma frame 1121:146207 ---- */

/* Sky accent: ASSETS/Ease CheckIn/Sky_bg.png, Connect's Quote_bg.png recolored to the
   CheckIn blue with its gradient and grain kept at medium strength (the owner's pick, B,
   2026-10-14). It covers each card; --spot picks a different part of it. */
.accent--sky {
  background: url("ASSETS/Ease%20CheckIn/Sky_bg.png") var(--spot) / cover no-repeat var(--bu-checkin);
  color: var(--c-link);
}
.case-page--checkin .case__subtitle { color: var(--bu-1200); }
.case-page--checkin figcaption { color: #7a7471; }
.case__p--narrow { max-width: 919px; }
.case__head--narrow p { max-width: 1000px; }

/* Title with the "View in store" pill 24px to its right */
.case__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.store-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 11px 20px 11px 24px;
  border: 1px solid var(--c-nav-border);
  border-radius: var(--r-pill);
  background: var(--pf-neutral-100);
  font-weight: 600;
  line-height: 24px;
  color: var(--c-link);
  transition: background-color 0.2s ease;
}
.store-link:hover { background: #fff; }
.checkin-hero { aspect-ratio: 1056 / 400; border-radius: 16px; }

/* Who is using it: a sky card with a lead line and four blue cards */
.users { display: flex; flex-direction: column; gap: 40px; padding: 48px; border-radius: 24px; }
.users__head { display: flex; align-items: center; gap: 16px; }
.users__head .case__h3 { flex: 0 0 252px; }
.users__lead { font-weight: 600; }
.users__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.users__item { display: flex; flex-direction: column; gap: 12px; min-height: 212px; padding: 24px; border-radius: 16px; background: var(--bu-checkin); }
.users__title, .problem__title { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 20px; line-height: 28px; }

/* Why the redesign happened now: the copy, then the old brand color turning into the new one */
.why { display: grid; grid-template-columns: minmax(0, 687fr) minmax(0, 345fr); gap: 24px; align-items: center; }
.why__copy { padding-top: 16px; }
.swatches { position: relative; width: 345px; height: 232px; }
.swatch {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 112px;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  font-weight: 600;
}
.swatch i { display: block; width: 80px; height: 80px; border-radius: 8px; }
.swatch--old { left: 24px; top: 32px; transform: rotate(-15deg); }
.swatch--new { left: 233px; top: 86px; }
.swatches__arrow { position: absolute; left: 150px; top: 22px; }

/* What we set out to fix: one large card and two stacked ones, each with an old screen */
.problems { display: grid; grid-template-columns: minmax(0, 620fr) minmax(0, 420fr); gap: 16px; }
.problems__stack { display: flex; flex-direction: column; gap: 16px; }
.problem { position: relative; display: flex; flex-direction: column; gap: 12px; height: 280px; padding: 24px; overflow: hidden; border-radius: 24px; }
.problem > :not(.problem__shot) { position: relative; z-index: 1; }
.problem__title { max-width: 248px; }
.problem__text { max-width: 224px; }
.problem--big { gap: 16px; height: auto; min-height: 576px; padding: 48px; }
.problem__narrow { max-width: 260px; }
.problem__shot { position: absolute; display: block; object-fit: cover; object-position: top; }
.problem__shot--alert { right: 48px; top: 189px; width: 240px; height: 427px; border-radius: 16px; }
.problem__shot--slider { left: 310px; top: 24px; width: 160px; height: 285px; border-radius: 8px; transform: rotate(-10deg); }
.problem__shot--tabs { left: 260px; top: 52px; width: 160px; height: 284px; border-radius: 8px; transform: rotate(10deg); }

/* Where it started: the heading, the old screens with the 2.5 star over them, the caption */
.started { display: flex; flex-direction: column; gap: 32px; }
.started figcaption { margin-top: -16px; }
.started__stage { position: relative; overflow: hidden; border-radius: 24px; container-type: inline-size; }
.started__shots { display: block; width: 100%; height: auto; }
/* The star sits where Figma has it: 263 x 264 at 762, 36 of the 1056 x 640 card */
.star { position: absolute; left: 72.16%; top: 5.63%; width: 24.9%; aspect-ratio: 263 / 264; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 600; color: var(--c-link); filter: drop-shadow(-2px 8px 2px rgba(163, 155, 150, 0.16)); }
.star__shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.star__shape polygon { fill: url(#star-sky); stroke: url(#star-sky); stroke-width: 6; stroke-linejoin: round; }
.star__value, .star__label { position: relative; }
.star__value { margin-top: 4%; font-size: 5.68cqw; line-height: 1.25; letter-spacing: -0.01em; } /* 60px at full width */
.star__label { font-size: 1.9cqw; line-height: 1.4; } /* 20px at full width */

/* Phone animations from Figma (What changed, Final solution), looping MP4s played by
   case-video.js. The video has the phone in it, on black: a mask cut from the phone's
   own outline (--mask-what-changed and --mask-final-solution in styles.css) hides the black and keeps the corners
   whole. 264px wide, 280px in Final solution. */
.phone-video { display: block; flex: none; width: 264px; max-width: 100%; height: auto; -webkit-mask: var(--mask-what-changed) 0 0 / 100% 100% no-repeat; mask: var(--mask-what-changed) 0 0 / 100% 100% no-repeat; }
.phone-video--large { width: 280px; -webkit-mask-image: var(--mask-final-solution); mask-image: var(--mask-final-solution); }

/* What changed: the phone and the three changes on a sky panel */
.changes { display: flex; align-items: center; gap: 48px; padding: 48px 80px; border-radius: 16px; }
.changes__list { flex: 1 1 0; min-width: 0; max-width: 600px; display: flex; flex-direction: column; }
.change { display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 8px; }

/* Flat images exported from Figma at 3x (the findings, the six screens) keep the cards' corners */
.checkin-flat { border-radius: 24px; }

/* Final solution: the copy and the phone on a sky panel */
.solution { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 48px 80px; border-radius: 16px; }
.solution__copy { flex: 0 1 508px; }


/* What workers wrote: three reviews in three blues */
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.review { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 264px; padding: 24px; border-radius: 24px; }
.review__top { display: flex; flex-direction: column; gap: 16px; }
.review__source { font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; white-space: pre; }
.review__quote { font-family: var(--f-display); font-weight: 600; font-size: 20px; line-height: 28px; }
.review--1 { background: #ddeafe; }
.review--2 { background: #c4dafe; }
.review--3 { background: var(--bu-checkin); }

@media (max-width: 1023px) {
  .users { padding: 32px; }
  .users__head { flex-direction: column; align-items: flex-start; }
  .users__head .case__h3 { flex: none; }
  .users__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .users__item { min-height: 0; }
  .why { grid-template-columns: minmax(0, 1fr); }
  .why__copy { padding-top: 0; }
  .problems { grid-template-columns: minmax(0, 1fr); }
  .problem--big { min-height: 0; padding: 32px; }
  .problem__narrow { max-width: none; }
  .problem--big .problem__shot { position: relative; right: auto; top: auto; align-self: center; flex: none; margin: 8px 0 -32px; height: 320px; }
  .changes, .solution { flex-direction: column; padding: 32px; gap: 32px; }
  .solution { flex-direction: column-reverse; }
  .solution__copy { flex: none; }
  .reviews { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .review { min-height: 0; }
}

@media (max-width: 639px) {
  .store-link { height: 40px; padding: 7px 14px 7px 18px; }
  .users { padding: 24px; border-radius: 16px; }
  .users__list { grid-template-columns: minmax(0, 1fr); }
  .swatches { transform: scale(0.84); transform-origin: 0 0; height: 195px; }
  .problem, .problem--big { border-radius: 16px; }
  .problem--big { padding: 24px; }
  .problem__shot--slider, .problem__shot--tabs { left: auto; right: -40px; }
  .changes, .solution { padding: 24px; border-radius: 16px; }
  .started__stage { border-radius: 16px; }
  .checkin-flat { border-radius: 16px; }
}