/* Case study pages (shoptimal.html, sayforth.html).
   Built from the site's own parts: .section-head, .lead__grid, .run__facts,
   .specimen rows, .rows, .media tiles and the .wk-spec specimens. This file
   only adds the arrangements those parts do not already have. Hairlines, no
   shadows, no new accent. */

/* ------------------------------------------------------------------ hero */

.cs-hero { padding-bottom: var(--s7); }
.cs-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3) var(--s6);
  margin-top: var(--s6);
}
.cs-hero__meta .meta b { font-weight: 400; color: var(--ink); }
.cs-demo { margin: 0; }
.cs-demo figcaption { margin-top: var(--s3); }
.cs-intro { padding-top: var(--s8); }

/* --------------------------------------------------------- why it exists */

.cs-statement {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.22;
  letter-spacing: -0.022em;
  font-weight: 600;
  max-width: 22ch;
  text-wrap: balance;
}

/* ----------------------------------------------------------------- steps */
/* The loop, one row per step: the words on one side and the product doing
   that step on the other. Sides alternate; steps that need a wide specimen
   stack instead. */

.cs-steps { list-style: none; padding: 0; }
.cs-step:first-child { padding-top: 0; }
.cs-flush .specimen { border-top: 0; }
.cs-step {
  display: grid;
  gap: var(--s6);
  padding-block: var(--s8);
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.cs-step__n {
  display: block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-2);
  margin-bottom: var(--s3);
}
.cs-step__text h3 { margin: 0; }
.cs-step__text .body { margin-top: var(--s4); }
.cs-step__text .body + .body { margin-top: var(--s4); }
.cs-step__visual { min-width: 0; display: grid; gap: var(--s4); }

@media (min-width: 900px) {
  .cs-step { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); }
  .cs-step--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .cs-step--flip .cs-step__visual { order: -1; }
  .cs-step--wide { grid-template-columns: minmax(0, 1fr); gap: var(--s7); align-items: start; }
  .cs-step--wide .cs-step__text { max-width: 62ch; }
}

/* a specimen and a phone side by side, or two specimens */
@media (min-width: 700px) {
  .cs-visual--phone { grid-template-columns: minmax(0, 1fr) 220px; align-items: center; gap: var(--s5); }
  .cs-visual--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); align-items: start; }
  .cs-visual--phone-first { grid-template-columns: 220px minmax(0, 1fr); }
}

/* a product screenshot set on its own tile */
.cs-fig { margin: 0; min-width: 0; }
.cs-fig figcaption { margin-top: var(--s3); }
.cs-fig .media img { display: block; }
.cs-phone { max-width: 300px; width: 100%; margin-inline: auto; }
.cs-visual--phone .cs-phone,
.cs-visual--phone-first .cs-phone { max-width: 220px; }

/* the free audit field, shown on the product's own white */
.cs-field {
  background: #FFFFFF;
  display: grid;
  place-items: center;
  padding: var(--s6) var(--s5);
  min-height: 220px;
}
.cs-field img { width: 100%; max-width: 560px; height: auto; }

/* ------------------------------------------------------------- inventory */

.cs-group + .cs-group { margin-top: var(--s9); }
.cs-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s5);
  margin-bottom: var(--s5);
}
.cs-group__head h3 { margin: 0; }
.specimen__k { font-weight: 600; letter-spacing: -0.01em; }
.specimen p { max-width: 62ch; }

.cs-shots {
  display: grid;
  gap: var(--s5);
  margin-top: var(--s6);
}
@media (min-width: 700px) {
  .cs-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-shots--phones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cs-shots--phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .cs-shots--phones { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- design */

.cs-logos {
  display: grid;
  gap: var(--s5);
}
@media (min-width: 700px) { .cs-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-logo {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: var(--s6);
  border-radius: var(--r-media);
  margin: 0;
}
.cs-logo img { display: block; width: 100%; height: auto; }
.cs-logo--sf img { max-width: 320px; }
.cs-logo--sh img { max-width: 300px; }
.cs-logo--icon { padding: 0; overflow: hidden; }
.cs-logos--three { grid-template-columns: 1fr; }
@media (min-width: 700px) { .cs-logos--three { grid-template-columns: 1.5fr 1.5fr 1fr; } }
.cs-logo--icon img { width: 100%; max-width: none; }

.cs-brand { margin-top: var(--s8); }
.cs-brand .swatches { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--s4) var(--s4); }
.swatch__hex { display: block; margin-top: 2px; }
.cs-sub { margin-bottom: var(--s4); }
.cs-sub + .swatches, .cs-sub + .run__facts { margin-top: var(--s4); }
.cs-brand .run__facts { margin-top: 0; }

.cs-decisions {
  list-style: none;
  padding: 0;
  margin-top: var(--s8);
  display: grid;
  gap: 0 var(--s8);
}
@media (min-width: 860px) { .cs-decisions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-decisions li {
  padding-block: var(--s5) var(--s6);
  border-top: 1px solid var(--rule);
}
.cs-decisions h3 {
  font-size: 1.1875rem;
  letter-spacing: -0.014em;
  line-height: 1.25;
}
.cs-decisions p { margin-top: var(--s2); color: var(--ink-2); max-width: 46ch; }
.cs-motion { margin-top: var(--s7); border-top: 1px solid var(--rule); padding-top: var(--s5); }

/* ----------------------------------------------------------------- build */

.cs-process { list-style: none; padding: 0; border-top: 1px solid var(--rule); }
.cs-process li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--s3);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule);
}
.cs-process .meta { padding-top: 0.2em; }
.cs-process b { font-weight: 600; }
.cs-agents {
  list-style: none;
  padding: 0;
  margin-top: var(--s8);
  display: grid;
  gap: 0 var(--s8);
}
@media (min-width: 860px) { .cs-agents { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-agents li { padding-block: var(--s4); border-top: 1px solid var(--rule); }
.cs-agents b { display: block; font-weight: 600; }
.cs-agents span { color: var(--ink-2); font-size: 0.9375rem; }

/* ------------------------------------------------------------------ misc */

.cs-note { margin-top: var(--s6); }
.cs-status { display: grid; gap: var(--s5) var(--s7); }
@media (min-width: 860px) { .cs-status { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
.cs-next { margin-top: var(--s7); }

/* ------------------------------------------- the Sayforth Today specimen */
/* Re-created from the current Today screen: the plan week, one card with the
   days-in-a-row tab on its top edge, and one button. Uses the Sayforth
   specimen variables, so it follows the theme like the others. */
.cs-today { gap: 0; align-content: center; }

.cs-visual--duo, .cs-visual--phone { display: grid; gap: var(--s4); min-width: 0; }
.cs-aside { display: grid; gap: var(--s6); }
.cs-aside .cs-phone { max-width: 280px; margin-inline: 0; }
@media (min-width: 860px) {
  .cs-aside { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s8); align-items: start; }
}

/* ---------------------------------------- real captures as specimens */
/* Crops of the app's own screens from the iPhone 17 Pro simulator, set in
   the same frame as the drawn specimens so the step grid holds. Portraits
   sit at phone width in the middle of the frame; a wide crop takes more. */
.cs-shot { padding: 24px; justify-items: center; }
.cs-shot img { display: block; width: 100%; max-width: 340px; height: auto; border-radius: 16px; }
.cs-shot--wide img { max-width: 440px; }