/* The Cost Graph white paper page: what it adds to home.css (the Shift-Left page's layout). */

.stack-24 { display: flex; flex-direction: column; gap: 24px; }
.cg-title { max-width: 20ch; }
.cg-title .accent { display: block; }
.cg-narrow { max-width: 22ch; }
.cg-why-body { padding-top: 32px; } /* lines the text up under the eyebrow's heading */

/* The cover, drawn: a sheet of paper, tilted, as the Shift-Left page's cover image. Everything
   inside is in em, and the sheet's font size follows its width (1em = a twentieth of it). */
.cg-cover {
  --w: clamp(150px, 16vw, 196px);
  width: var(--w); height: calc(var(--w) * 1188 / 918); font-size: calc(var(--w) / 20);
  background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-control);
  transform: rotate(-4deg); box-shadow: var(--shadow-lift); will-change: transform;
  padding: 1.6em; display: flex; flex-direction: column; overflow: hidden; text-align: left;
}
.cg-cover p { margin: 0; }
.hero-cover .cg-cover img, .cg-cover img.cg-cover-logo {
  width: 7em; height: auto; display: block; border: 0; border-radius: 0; box-shadow: none; transform: none;
}
.cg-cover-graph { display: block; flex: none; width: 11em; height: 6.6em; margin: 1em 0; }
.cg-cover-eyebrow { font-size: .9em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--green-dark); }
.cg-cover-title { margin-top: .4em !important; font-family: var(--font-head); font-weight: 500; font-size: 2.2em; line-height: 1.05; color: var(--ink); }
.cg-cover-sub { margin-top: .8em !important; font-size: 1em; line-height: 1.3; color: var(--body); }
.cg-cover-by { margin-top: auto !important; font-size: .9em; color: var(--muted); }
.cg-closing-art .cg-cover { --w: clamp(200px, 22vw, 300px); margin: 24px auto; }
.cg-closing-art { flex: 0 1 440px; display: flex; justify-content: center; }
@media (max-width: 479px) { .cg-closing-art { display: none; } }

/* An intro block in a column stack: its flex basis is a width, not a height. */
.stack-40 > .split-copy { flex: none; }

/* What's inside: two lists side by side, then three numbered cards. */
.cg-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 24px; }
.cg-list-card { background: var(--white); border: 1px solid var(--card-border); border-radius: var(--r-card); padding: 32px; }
.cg-list-title { margin: 0 0 16px; font-family: var(--font-head); font-weight: 500; font-size: 20px; line-height: 1.2; color: var(--ink); }
.cg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cg-list li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.5; color: var(--body); }
.cg-list li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-bright);
}
.cg-list--links li::before { border-radius: 2px; background: var(--green-dark); }
.cg-moments { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cg-moments .moment { min-height: 0; }
@media (max-width: 860px) { .cg-moments { grid-template-columns: 1fr; } }

/* The call-site data card and the comparison table. */
.cg-callsites { min-width: 760px; }
.cg-callsites thead th:first-child { width: auto; }
.cg-callsites code { font-family: var(--font-mono); font-size: 14px; font-weight: 500; }
.cg-callsites td { font-variant-numeric: tabular-nums; }
.cg-cost { color: var(--green-dark) !important; font-weight: 700; }
.cg-compare thead th:first-child { width: 22%; }
.cg-compare th.cg-col-graph { color: var(--green-dark); }
.cg-compare td.cg-col-graph { font-weight: 600; }
/* Phones: each row stacks, so the Cost Graph column is never off to the side. */
@media (max-width: 639px) {
  .cg-compare { min-width: 0; }
  .cg-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cg-compare tr, .cg-compare th, .cg-compare td { display: block; }
  .cg-compare tbody th { padding: 16px 24px 8px; }
  .cg-compare td { padding: 4px 24px 12px !important; }
  .cg-compare td::before {
    content: attr(data-label); display: block; margin-bottom: 4px;
    font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  }
  .cg-compare td.cg-col-graph::before { color: var(--green-dark); }
}

/* Three questions: a bold lead, then the sentence. */
.cg-q { align-items: flex-start; }
.cg-q p { font-weight: 400; line-height: 1.5; color: var(--body); }
.cg-q strong { font-weight: 700; color: var(--ink); }
.cg-q .num-circle { flex: none; }

@media (max-width: 479px) {
  .cg-list-card { padding: 24px; }
  .cg-why-body { padding-top: 0; }
}
@media (max-width: 1100px) { .cg-why-body { padding-top: 0; } }