/* 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 approved Today screen: one card and one button. Uses
   the Sayforth specimen variables, so it follows the theme like the others. */
.cs-today { gap: 0; align-content: center; }
.cs-today > * + * { margin-top: 10px; }
.cs-today .wk-sf-card { margin-top: 16px; }
.cs-today__btn {
  display: block;
  text-align: center;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--sf-ink);
  color: var(--sf-bg);
  font-size: 15px;
  font-weight: 600;
}

.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; }
}