/* ============================================================
   Hocus, story layout. Loads after case-study.css and hocus.css and
   brings the page in line with the Miivo story: a wider column set a
   little right of centre, one heading size, more air between chapters,
   and the shared components (a facts box, icon cards, direction cards
   and annotated canvases).
   ============================================================ */

/* ── Column and rhythm ─────────────────────────────────── */

.cs-hocus { --chapter: 128px; --sub: 80px; --callout: #4F5BD5; }

@media (min-width: 981px) {
  /* Targeted by id as well as class: some browser extensions inject their
     own ".content" styles, which a class-only rule can lose to. */
  .cs-hocus .content,
  .cs-hocus #content {
    width: min(1000px, 100% - var(--nav-reserve) - var(--edge));
    margin-left: max((100% - 1000px) / 2 + var(--nav-reserve) / 4, var(--nav-reserve));
  }
}
@media (max-width: 980px) {
  .cs-hocus #content { width: min(var(--content-w), 100% - 2 * var(--edge)); margin-inline: auto; }
}

.cs-hocus .section + .section { margin-top: var(--chapter); }
.cs-hocus .step { margin-top: var(--sub); }
@media (max-width: 700px) {
  .cs-hocus { --chapter: 80px; --sub: 52px; }
}

/* ── One heading size ──────────────────────────────────── */

/* Section statements, the scoping question and the leads all read at the
   same size, so the hierarchy comes from the eyebrow and the spacing. */
.cs-hocus .claim,
.cs-hocus .lead,
.cs-hocus .pull {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 31px;
}
@media (max-width: 700px) {
  .cs-hocus .claim,
  .cs-hocus .lead,
  .cs-hocus .pull { font-size: 18px; line-height: 28px; }
}

/* Small capitals label that opens a group of cards. */
.cs-hocus .label-sc {
  margin: var(--inner) 0 0;
  font-family: var(--eyebrow-face);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cs-hocus .label-sc + * { margin-top: 16px; }
.cs-hocus .label-sc + .qcards,
.cs-hocus .label-sc + .dirs { margin-top: 16px; }

/* ── Overview facts box ────────────────────────────────── */

.cs-hocus .facts {
  margin: var(--inner) 0 0;
  padding: 4px clamp(20px, 2.6vw, 32px);
  border-radius: 12px;
  background: var(--card);
}
.cs-hocus .facts__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: 32px;
  padding: 22px 0;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .08);
}
.cs-hocus .facts__row:first-child { box-shadow: none; }
.cs-hocus .facts__label {
  padding-top: .3em;
  font-family: var(--eyebrow-face);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cs-hocus .facts__row dd {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
}
.cs-hocus .facts__points {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 24px;
}
.cs-hocus .facts__points li {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}
.cs-hocus .facts__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-faint);
}
@media (max-width: 700px) {
  .cs-hocus .facts__row { grid-template-columns: 1fr; gap: 10px; }
  .cs-hocus .facts__row dd { font-size: 15px; }
  .cs-hocus .facts__points { grid-template-columns: 1fr 1fr; }
}

/* ── Question cards (Problem) ──────────────────────────── */

.cs-hocus .qcards {
  margin: var(--inner) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.cs-hocus .qcards li {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: #fff;
}
.cs-hocus .qcards__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: #EEF0FC;
  color: var(--callout);
}
.cs-hocus .qcards__icon svg { display: block; }
.cs-hocus .qcards__moment {
  font-family: var(--eyebrow-face);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cs-hocus .qcards__q { font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--ink); }
@media (max-width: 860px) {
  .cs-hocus .qcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .cs-hocus .qcards { grid-template-columns: 1fr; }
  .cs-hocus .qcards__q { font-size: 15px; }
}

/* ── Directions considered (Scoping) ───────────────────── */

.cs-hocus .dirs {
  margin: var(--inner) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.cs-hocus .dir {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: #fff;
}
.cs-hocus .dir__name { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.cs-hocus .dir__idea { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink-muted); }
.cs-hocus .dir__aside {
  margin-top: 6px;
  padding: 16px 18px;
  border-radius: 10px;
  background: rgba(154, 123, 79, .1);
}
.cs-hocus .dir__label,
.cs-hocus .kept__label {
  margin-bottom: 6px;
  font-family: var(--eyebrow-face);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8A6A3E;
}
.cs-hocus .dir__aside p:last-child { font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--ink-muted); }

/* What survived, set as the outcome of the three cards above it. */
.cs-hocus .kept {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .3);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}
.cs-hocus .kept__label {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #15803D;
}
.cs-hocus .kept__label::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #E3F5E9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
@media (max-width: 860px) {
  .cs-hocus .dirs { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .cs-hocus .kept { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 15px; }
}

/* ── Annotated canvas (Meet Hocus) ─────────────────────── */

/* The object sits in the middle of a grey canvas, and a fine line runs from
   a ringed marker on each part to a small note card on either side. On
   phones the lines step aside and the notes follow as a list. */
.cs-hocus .canvas {
  position: relative;
  margin: var(--inner) 0 0;
  padding: clamp(16px, 2.4vw, 32px);
  border-radius: 12px;
  background: var(--card);
}
.cs-hocus .callouts { position: relative; }
.cs-hocus .callouts__shot { display: block; width: 72%; height: auto; border-radius: 8px; }
.cs-hocus .callouts--both .callouts__shot { width: 60%; margin-left: 20%; }
.cs-hocus .callouts__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.cs-hocus .callouts__lines polyline {
  fill: none;
  stroke: var(--callout);
  stroke-opacity: .55;
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.cs-hocus .callout__dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--callout);
  box-shadow: 0 0 0 4px rgba(79, 91, 213, .16);
  transform: translate(-50%, -50%);
}
.cs-hocus .callouts__list { margin: 0; padding: 0; list-style: none; }
.cs-hocus .callout {
  position: absolute;
  top: var(--ly);
  left: 78%;
  right: 0;
  transform: translateY(-50%);
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 14px rgba(0, 0, 0, .04);
}
.cs-hocus .callout--r { left: 82%; right: 0; }
.cs-hocus .callout--l { left: 0; right: 82%; }
.cs-hocus .callout__title { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.cs-hocus .callout__copy { font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--ink-muted); }
@media (max-width: 700px) {
  .cs-hocus .callouts__shot,
  .cs-hocus .callouts--both .callouts__shot { width: 100%; margin-left: 0; }
  .cs-hocus .callouts__lines,
  .cs-hocus .callout__dot { display: none; }
  .cs-hocus .callouts__list { margin-top: 16px; display: grid; gap: 8px; }
  .cs-hocus .callout { position: static; transform: none; }
  .cs-hocus .callout__copy { font-size: 13px; }
}

/* ── Expand ────────────────────────────────────────────── */

/* Top right of a canvas or video, in dark glass, opening it large. */
.cs-hocus .expand {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: .9;
  transition: background-color .2s ease, opacity .2s ease;
}
.cs-hocus .expand:hover { background: rgba(0, 0, 0, .74); opacity: 1; }
.cs-hocus .expand:focus-visible { outline: 2px solid #fff; outline-offset: 2px; opacity: 1; }
.cs-hocus .expand svg { display: block; width: 16px; height: 16px; }
@media (max-width: 700px) {
  .cs-hocus .expand { top: 10px; right: 10px; width: 30px; height: 30px; }
}

.cs-hocus .expand-modal {
  width: min(1400px, calc(100vw - 48px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.cs-hocus .expand-modal::backdrop {
  background: rgba(0, 0, 0, .75);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.cs-hocus .expand-modal__frame {
  max-height: calc(100vh - 120px);
  overflow: auto;
  padding: clamp(20px, 3vw, 44px);
  border-radius: 14px;
  background: var(--card);
}
.cs-hocus .expand-modal__frame--video { padding: 0; background: #000; }
.cs-hocus .expand-modal__frame video { display: block; width: 100%; max-height: calc(100vh - 120px); }
.cs-hocus .expand-modal .callout__title { font-size: 15px; }
.cs-hocus .expand-modal .callout__copy { font-size: 14px; }
.cs-hocus .expand-modal__close {
  position: absolute;
  top: -50px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
}
.cs-hocus .expand-modal__close:hover { background: rgba(255, 255, 255, .26); }
.cs-hocus .expand-modal__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 700px) {
  .cs-hocus .expand-modal { width: calc(100vw - 24px); }
}

/* Test set-up: the facts box as three short rows under the canvas, and the
   success line set like the scoping outcome. */
.cs-hocus .canvas + .facts,
.cs-hocus .slot + .facts { margin-top: 12px; }
.cs-hocus .facts + .kept { margin-top: 12px; }

/* ── Product flow (Scoping) ────────────────────────────── */

/* The concept's path drawn as one line of steps, with the three supports
   branching from Focus. Start is the physical step, so it is filled. */
.cs-hocus .flow { padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 40px); }
.cs-hocus .flow svg { display: block; width: 100%; height: auto; overflow: visible; }
.cs-hocus .flow__box { fill: #fff; stroke: var(--ink); stroke-width: 1.25; }
.cs-hocus .flow__box--key { fill: var(--ink); }
.cs-hocus .flow__box--soft { stroke: rgba(0, 0, 0, .18); }
.cs-hocus .flow__title { font-size: 14px; font-weight: 600; text-anchor: middle; fill: var(--ink); }
.cs-hocus .flow__sub { font-size: 11.5px; font-weight: 500; text-anchor: middle; fill: var(--ink-muted); }
.cs-hocus .flow__title--key { fill: #fff; }
.cs-hocus .flow__sub--key { fill: rgba(255, 255, 255, .72); }
.cs-hocus .flow__line,
.cs-hocus .flow__head { fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.cs-hocus .flow__note { font-size: 12px; font-weight: 500; fill: var(--ink-faint); }
.cs-hocus .flow__note--end { text-anchor: middle; }
@media (max-width: 700px) {
  .cs-hocus .flow { overflow-x: auto; }
  .cs-hocus .flow svg { width: 640px; max-width: none; }
}

/* ── Phase 2: shared cards, decisions, dashboard tabs ──── */

/* Icon cards with a title and one line, three across. Used for why physical,
   the form principles and the reflection learnings. */
.cs-hocus .qcards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-hocus .qcards__title { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.cs-hocus .qcards__copy { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink-muted); }
.cs-hocus .qcards--learn li { background: var(--card); border-color: transparent; }
.cs-hocus .physical + .qcards,
.cs-hocus .slot + .qcards,
.cs-hocus .slot-pair + .qcards { margin-top: 12px; }
@media (max-width: 860px) {
  .cs-hocus .qcards--three { grid-template-columns: 1fr; }
}

/* Design decisions: what was left out, what replaced it, and the cost. */
.cs-hocus .trade {
  margin: var(--inner) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.cs-hocus .trade__card {
  display: grid;
  grid-template-rows: auto 1fr 1fr auto;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: #fff;
}
.cs-hocus .trade__topic { margin-bottom: 4px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.cs-hocus .trade__out,
.cs-hocus .trade__in { padding: 14px 16px; border-radius: 10px; }
.cs-hocus .trade__out { background: rgba(154, 123, 79, .1); }
.cs-hocus .trade__in { background: #fff; box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .3); }
.cs-hocus .trade__label {
  margin-bottom: 4px;
  font-family: var(--eyebrow-face);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cs-hocus .trade__out .trade__label { color: #8A6A3E; }
.cs-hocus .trade__in .trade__label { display: flex; align-items: center; gap: 8px; color: #15803D; }
.cs-hocus .trade__in .trade__label::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #E3F5E9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
}
.cs-hocus .trade__out p:last-child { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink-muted); }
.cs-hocus .trade__in p:last-child { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink); }
.cs-hocus .trade__cost { font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--ink-faint); }
@media (max-width: 700px) {
  .cs-hocus .trade { grid-template-columns: 1fr; }
  .cs-hocus .trade__card { grid-template-rows: none; }
}

/* Dashboard tabs: four screens sharing one canvas, a line under each. */
.cs-hocus .tabs { margin-top: var(--inner); }
.cs-hocus .tabs__list {
  display: flex;
  gap: 6px;
  width: fit-content;
  padding: 4px;
  border-radius: 10px;
  background: var(--card);
}
.cs-hocus .tabs__tab {
  padding: 8px 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
}
.cs-hocus .tabs__tab:hover { color: var(--ink); }
.cs-hocus .tabs__tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.cs-hocus .tabs__tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cs-hocus .tabs__panels { margin-top: 20px; display: grid; }
.cs-hocus .tabs__panel { margin: 0; grid-area: 1 / 1; }
.cs-hocus .tabs.is-enhanced .tabs__panel { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.cs-hocus .tabs.is-enhanced .tabs__panel.is-active { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.cs-hocus .tabs:not(.is-enhanced) .tabs__list { display: none; }
.cs-hocus .tabs:not(.is-enhanced) .tabs__panels { gap: 40px; }
.cs-hocus .tabs:not(.is-enhanced) .tabs__panel { grid-area: auto; }
.cs-hocus .tabs__canvas { margin: 0; }
.cs-hocus .tabs__shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, .08);
  box-sizing: border-box;
}
.cs-hocus .tabs__note { margin-top: 14px; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink-muted); }
@media (max-width: 700px) {
  .cs-hocus .tabs__list { width: auto; }
  .cs-hocus .tabs__tab { flex: 1; padding: 8px 6px; font-size: 13px; }
}

/* Anything with an expand button holds it in its own corner. */
.cs-hocus [data-expand] { position: relative; }
.cs-hocus .expand-modal__frame img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* Scoping: a short line under the question saying how the scope was found. */
.cs-hocus .scope-lede { margin-top: 14px; font-size: 16px; font-weight: 500; line-height: 1.6; color: var(--ink-muted); }

/* ── Scoping drill-down: insight, surface comparison ───── */

.cs-hocus .visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cs-hocus .claim.insight { margin-top: var(--inner); }

/* Four surfaces against the four needs from the problem. The desk object is
   the only row that answers all of them, so it is lifted on white. */
.cs-hocus .compare-wrap {
  margin-top: 16px;
  padding: 16px;
  border-radius: 12px;
  background: var(--card);
  overflow-x: auto;
}
.cs-hocus .compare { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; }
.cs-hocus .compare th,
.cs-hocus .compare td { padding: 16px; text-align: center; vertical-align: middle; }
.cs-hocus .compare thead th { padding-top: 4px; padding-bottom: 12px; }
.cs-hocus .compare thead th {
  font-family: var(--eyebrow-face);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cs-hocus .compare tbody th {
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-muted);
}
.cs-hocus .compare tbody tr + tr th,
.cs-hocus .compare tbody tr + tr td { box-shadow: inset 0 1px 0 rgba(0, 0, 0, .07); }
.cs-hocus .compare__win th,
.cs-hocus .compare__win td { background: #fff; box-shadow: none !important; }
.cs-hocus .compare__win th { color: var(--ink); font-weight: 600; border-radius: 10px 0 0 10px; }
.cs-hocus .compare__win td:last-child { border-radius: 0 10px 10px 0; }
.cs-hocus .mark { display: inline-block; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; }
.cs-hocus .mark--yes {
  background: #E3F5E9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
.cs-hocus .mark--no {
  background: rgba(0, 0, 0, .05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3A3A3' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
}
.cs-hocus .label-sc + .physical { margin-top: 16px; }
.cs-hocus .qcards + .physical { margin-top: var(--inner); }

/* What the object needs: the image on the left, the three needs stacked on
   the right as rows of equal height that run the image's full height. */
.cs-hocus .physical--cards { align-items: stretch; gap: 12px; grid-template-columns: 1fr 1fr; }
.cs-hocus .qcards--rows {
  margin: 0;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
}
.cs-hocus .qcards--rows li {
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 4px;
  align-content: center;
}
.cs-hocus .qcards--rows .qcards__icon { grid-row: 1 / 3; margin-bottom: 0; }
@media (max-width: 700px) {
  .cs-hocus .physical--cards { grid-template-columns: 1fr; }
  .cs-hocus .qcards--rows { grid-template-rows: none; }
}

/* Design decisions as an open table: no boxes, hairlines between rows, and
   three columns read left to right as what went, what came in, and the cost. */
.cs-hocus .decide { margin-top: var(--inner); }
.cs-hocus .decide__head,
.cs-hocus .decide__row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, .8fr);
  gap: 32px;
}
.cs-hocus .decide__head {
  padding-bottom: 14px;
  font-family: var(--eyebrow-face);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cs-hocus .decide__row { padding: 24px 0; box-shadow: inset 0 1px 0 var(--hairline); }
.cs-hocus .decide__row:last-child { box-shadow: inset 0 1px 0 var(--hairline), inset 0 -1px 0 var(--hairline); }
.cs-hocus .decide__topic { margin-bottom: 4px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.cs-hocus .decide__out p:last-child { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink-muted); }
.cs-hocus .decide__in { position: relative; padding-left: 30px; }
.cs-hocus .decide__in::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #E3F5E9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
.cs-hocus .decide__in p { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink); }
.cs-hocus .decide__cost p { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--ink-faint); }
@media (max-width: 700px) {
  .cs-hocus .decide__head { display: none; }
  .cs-hocus .decide__row { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; }
  .cs-hocus .decide__cost p::before { content: "Trade-off: "; }
}

/* Closing image: the project line set over the empty top left of the render. */
.cs-hocus .slot--closing { position: relative; }
.cs-hocus .closing-line {
  position: absolute;
  top: 6%;
  left: 4%;
  z-index: 1;
  margin: 0;
  font-size: clamp(16px, 2.2vw, 26px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--ink);
}
.cs-hocus .closing-line span { display: block; font-style: italic; color: var(--ink-muted); }