/* /example/the-plan: the page that showcases the sample market plan.

   Named for the route's page key (example.plan), which is how base.css
   and the per-page stylesheet get wired up. Layers on top of base.css.

   This page markets a document, so it borrows the document's own
   grammar: hairline rules, numbered structure, a lot of white. What it
   must not do is become the document. The prose stays short and the
   page stays a page. */

/* ── Hero ───────────────────────────────────────────────────────── */

.sp-hero { padding: 62px 0 78px; }

.sp-hero-grid {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 1000px) {
  .sp-hero-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* .eyebrow moved to base.css: two pages use it now. */

.sp-hero h1 { max-width: 8.5em; }
.sp-hero .lede { max-width: 34em; }

/* Download button: the icon needs the label to sit on the same line. */
.btn-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -2px;
  margin-right: 9px;
}
.btn-icon svg { width: 100%; height: 100%; display: block; }

/* Second hero paragraph: what is invented and what is not. Set slightly
   quieter than the first so the pair reads as claim then caveat. */
.sp-lede-2 {
  margin-top: 16px;
  font-size: 16.5px;
  color: var(--muted);
}

/* ── The document object ────────────────────────────────────────── */

/* A stack of sheets showing the plan's contents page. Three layers,
   the back two only visible at their edges, which is what makes it
   read as a physical document rather than a card. */

.sp-doc {
  position: relative;
  padding: 10px 10px 0 0;
}

.sp-doc-sheet {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.sp-doc-back-1,
.sp-doc-back-2 {
  position: absolute;
  inset: 0;
  background: var(--surface-2);
}
.sp-doc-back-2 { transform: translate(10px, -10px); }
.sp-doc-back-1 { transform: translate(5px, -5px); }

.sp-doc-front {
  position: relative;
  padding: 30px 32px 26px;
}
@media (max-width: 700px) {
  .sp-doc-front { padding: 24px 20px 22px; }
}

.sp-doc-head {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 4px;
}
.sp-doc-head b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.028em;
  color: var(--ink);
}
.sp-doc-head span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

.sp-doc-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.sp-doc-toc li {
  counter-increment: toc;
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--body);
}
.sp-doc-toc li::before {
  content: counter(toc);
  flex: none;
  width: 14px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  /* Set as text, so --teal-deep. */
  color: var(--teal-deep);
}

/* The assumptions section, set apart because that is the argument the
   page is making about it. */
.sp-doc-foot {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 7px;
  background: var(--tint);
  border: 1px solid var(--rule);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--body);
}

/* ── The four calls ─────────────────────────────────────────────── */

.sp-calls .lede { margin-bottom: 6px; }

.sp-call-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px 56px;
  margin-top: 50px;
}
@media (max-width: 900px) {
  .sp-call-grid { grid-template-columns: 1fr; gap: 38px; }
}

.sp-call {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 28px 30px 30px;
}
@media (max-width: 700px) {
  .sp-call { padding: 24px 20px 26px; }
}

.sp-glyph {
  display: block;
  width: 110px;
  height: 56px;
  margin-bottom: 20px;
}
/* Glyph palette. Greys carry the neutral field, amber marks the thing
   that is wrong, teal the thing that is right, blue what is new or
   would be added. Never teal for a problem. */
.sp-glyph .g-rule      { stroke: #C3C9CE; }
.sp-glyph .g-dim       { stroke: #C3C9CE; }
.sp-glyph .g-dim-fill  { fill: #C3C9CE; }
.sp-glyph .g-ok        { stroke: var(--teal); }
.sp-glyph .g-ok-fill   { fill: var(--teal); }
.sp-glyph .g-warn      { stroke: var(--amber); }
.sp-glyph .g-warn-fill { fill: var(--amber); }
.sp-glyph .g-new       { stroke: var(--blue); }
.sp-glyph .g-slate     { stroke: var(--slate); }
.sp-glyph .g-slate-fill{ fill: var(--slate); }
.sp-glyph .g-dim-open  { stroke: #C3C9CE; }

.sp-call h3 { margin-bottom: 12px; }
.sp-call p {
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--body);
}

/* ── The honest part ────────────────────────────────────────────── */

.sp-honest-grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 1000px) {
  .sp-honest-grid { grid-template-columns: 1fr; gap: 40px; }
}

.sp-honest h2 { max-width: 13em; }

/* Accent is the short teal rule above the quote, which is the pattern
   the dark compound section on the homepage already uses (.compound-rule).
   Deliberately NOT a coloured border down the left edge: the homepage
   does use one on .finding-src, but there the color carries a verdict,
   teal confirmed, slate nothing found, blue new. Here it would carry
   nothing, and a thick accent bar on the side of a card is decoration
   pretending to be meaning. Teal is still safe as a mark on this ground,
   which is why the rule survives and the border does not. */
.sp-quote {
  margin: 0;
  padding: 30px 32px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}
.sp-quote::before {
  content: "";
  display: block;
  width: 52px;
  height: 5px;
  border-radius: 3px;
  background: var(--teal);
  margin-bottom: 22px;
}
@media (max-width: 700px) {
  .sp-quote { padding: 24px 20px; }
}

.sp-quote blockquote {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.38;
  letter-spacing: -0.018em;
  color: #FFFFFF;
  text-wrap: pretty;
}
.sp-quote figcaption {
  margin-top: 18px;
  font-size: 13.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--dark-body);
}

/* ── The arc ────────────────────────────────────────────────────── */

.sp-arc-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 56px;
}
@media (max-width: 900px) {
  .sp-arc-grid { flex-direction: column; align-items: flex-start; gap: 10px; }
}
.sp-arc h2 { max-width: 11em; }
.sp-arc .actions { flex: none; }

/* ── Closing ────────────────────────────────────────────────────── */

.sp-cta-inner { text-align: center; }
.sp-cta h2 { max-width: 14em; margin: 0 auto; }
.sp-cta .lede { margin-left: auto; margin-right: auto; }
.sp-cta .actions { justify-content: center; }