/* PK2 AI Advisors · home page
   Layout only. This sheet places the nine sections of the home page and nothing
   else. Every colour, size, and spacing value resolves through tokens.css, and
   every component on the page (buttons, labels, the week grid, the card frame,
   the two grounds) comes from site.css and week-grid.css unchanged. The report
   sheet and the FAQ rows are borrowed whole from the assessment page, so this
   page loads report-sample.css and faq.css and styles neither.

   Load order: tokens.css, site.css, week-grid.css, home.css, report-sample.css,
   faq.css.

   No hex value appears in this file. No raw pixel value appears for anything
   tokens.css already carries.
*/

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

/* The hero opens tighter than a mid-page section: the sticky header is already
   a band of air above it. The top step is .section-first in site.css, the same
   one every page opens on. The bottom stays full, so the problem section still
   reads as a new thought. */
.hero {
  padding-bottom: var(--section-bottom);
}

.hero-layout {
  row-gap: var(--space-7);
  align-items: start;
}

.hero-copy   { grid-column: span 6; }
.hero-figure { grid-column: span 6; }

.hero-copy > .label + h1 { margin-top: var(--space-eyebrow); }

/* The week grid's caption carries the same framing pair the assessment
   worklist opens with: mono eyebrow, then the line that names what the grid is
   showing. That pair stacks, where the component's default head runs as a
   single mono row, so this one page turns the caption back into a block. The
   hairline under it, and everything below it, is the component unchanged. */
.hero-figure .week-grid-head {
  display: block;
  padding-bottom: var(--space-3);
}

/* Who the page is for, said once, under the headline and before the promise.
   It is a caption on the h1, not a second line of the hero copy, so it takes
   the small size and the muted colour and gets out of the way. */
.hero-audience {
  margin-top: var(--space-3);
  max-width: var(--measure);
  font-size: var(--size-small);
  line-height: 1.55;
  color: var(--text-muted);
}

.hero-sub {
  margin-top: var(--space-4);
  max-width: var(--measure);
  color: var(--text);
}

/* Two actions, one row: the paid path and the free tool that stands for it.
   They sit on a wrapping flex row so the tertiary link drops under the button
   before either one is squeezed, and under 640 they stack outright. */
.hero-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.hero-micro  { margin-top: var(--space-3); }

/* The hero carried a scroll indicator here: a bare hairline under the copy
   column, held off it at --space-7. The header bar sits above the fold on every
   width, so the affordance it stood for is already made, and all the rule did
   was add 112px of empty column under the last line of copy. Removed. */

/* ----------------------------------------------------------- 2 problem -- */

/* The gap above this row is the section header's heading-to-body step and is
   held in site.css. */
.problem-layout {
  row-gap: var(--space-6);
}

.problem-body { grid-column: 1 / span 7; }

/* The stat block is a right rail: mono, hairlined off the body, quiet. */
.stat-rail {
  grid-column: 9 / span 4;
  padding-left: var(--space-4);
  border-left: var(--hair) solid var(--hairline);
}

.stat-rail-figure { color: var(--text); }

.stat-rail-source {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--hair) solid var(--hairline);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--size-label);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* Mono has no italic in the loaded set, so the attribution takes the roman and
   earns its separation from the rule above it instead. */
.stat-rail-source cite { font-style: normal; }

/* --------------------------------------------------------------- 3 fit -- */

.fit-layout {
  row-gap: var(--space-6);
}

.fit-column { grid-column: span 6; }

.fit-list {
  margin-top: var(--space-3);
  list-style: none;
}

/* Ruled, not bulleted: the same hairline family as the week grid. */
.fit-list li {
  padding: var(--space-3) 0;
  border-top: var(--hair) solid var(--hairline);
  font-size: var(--size-body);
  line-height: 1.55;
}

.fit-list li:last-child {
  border-bottom: var(--hair) solid var(--hairline);
}

/* ----------------------------------------------------- 2 client result -- */

/* The three numbers, before the paragraphs that explain them. A ruled strip of
   three cells: mono label, then the figure in the display face, hairlined top
   and bottom so it reads as one object and not as three stacked facts.

   The figure is the short form the case study's own facts strip uses, and the
   sentence that qualifies it drops to a small muted line under it. Set whole
   in display type, the first qualifier ran to five lines against two in the
   last cell, which left the bottom rule floating well clear of two of the
   three. Short figures make the cells near enough the same height that the
   rule closes on all of them. */
.proof-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-block: var(--space-4);
  border-top: var(--hair) solid var(--hairline);
  border-bottom: var(--hair) solid var(--hairline);
}

.proof-facts dd { margin-top: var(--space-2); }

.proof-figure {
  display: block;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: var(--size-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.proof-sub {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--size-small);
  line-height: 1.45;
  color: var(--text-muted);
}

.proof-facts + .casestudy-body { margin-top: var(--space-5); }

/* Not a card. A card frame around it ranked the case study as a component
   sitting between two sections, and the card's own frame pushed its head 25px
   and its body column 80px off "Why me" directly below it. It is the same
   thing "Why me" is: a section head beside its body, on the shared
   .section-split, so the two read as one pair of columns down the page.

   Everything it needs is in site.css. The only rule left here is the close. */

/* The hairline and the link that close the body column, on the step and the
   rule "Why me" closes with. */
.casestudy-link {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: var(--hair) solid var(--hairline);
  max-width: var(--measure);
}

/* -------------------------------------------------------- 5 the report -- */

/* The embedded sheet is report-sample.css entire: .deliverable-sample caps it
   at the lead column and centres it, exactly as it sits on the assessment
   page. The one difference is the heading level. On the report page the sheet
   title is an h2; under a section head that already owns the h2 here, it is an
   h3, and the tag is the only thing that changes. report-sample.css sets the
   title's step by class and its size not at all, so the size comes back on
   this one page rather than in the shared sheet. */
.deliverable-sample .report-title {
  font-size: var(--size-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* -------------------------------------------------------- 6 how it works -- */

/* Three steps in the body column of the split, so they run down the page as
   ruled rows rather than across it as three columns: the number is a rail, the
   step is one sentence beside it, and the hairlines are the same family the
   fit list and the week grid use. */
.how-rows {
  list-style: none;
  border-top: var(--hair) solid var(--hairline);
}

.how-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-4);
  border-bottom: var(--hair) solid var(--hairline);
}

.how-row-num { color: var(--text-muted); }

.how-row-copy {
  font-size: var(--size-body);
  line-height: 1.55;
}

/* The lead is a run-in title: the h4 face at the head of the sentence, not a
   line of its own. */
.how-row-copy .h4 { display: inline; }

.how-price {
  margin-top: var(--space-5);
  max-width: var(--measure);
}

.how-note {
  margin-top: var(--space-3);
  max-width: var(--measure);
  color: var(--text-muted);
}

.how-link { margin-top: var(--space-5); }

/* ------------------------------------------------------------ 7 why me -- */

/* The photograph, in the head rail beside the copy. Same frame the about page
   sets: a hairline, a mat of paper, and nothing else. It is capped well under
   the rail's width, because at the rail's full width it competes with the
   heading above it. */
.whyme-figure {
  margin-top: var(--space-5);
  max-width: 260px;
}

.whyme-portrait-frame {
  border: var(--hair) solid var(--hairline);
  padding: var(--space-2);
}

.whyme-portrait {
  width: 100%;
  height: auto;
}

.whyme-attribution {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: var(--hair) solid var(--hairline);
  max-width: var(--measure);
  color: var(--ink);
}

.whyme-link { margin-top: var(--space-4); }

/* --------------------------------------------------------- 8 questions -- */

/* The rows themselves are faq.css. The only thing this page adds is the line
   that closes them, on the step the other body-copy closers take. */
.faq-ask {
  margin-top: var(--space-5);
  max-width: var(--measure);
}

/* ------------------------------------------------------------ 9 the door -- */

.door-action { margin-top: var(--space-5); }
.door-micro  { margin-top: var(--space-3); }

/* --------------------------------------------------------------- narrow -- */

/* At 1024 the shared grid drops to eight columns. The hero and the fit columns
   stack; the stat rail sits beside a narrower body until 640, where site.css
   collapses the grid to one column and the rail becomes a band under the copy. */
@media (max-width: 1024px) {
  .hero-copy,
  .hero-figure { grid-column: span 8; }

  .problem-body { grid-column: 1 / span 5; }
  .stat-rail    { grid-column: 6 / span 3; }

  .fit-column { grid-column: span 4; }

  /* The head rail is now a full-width column, so the portrait is capped at
     half the reading measure instead of the rail. */
  .whyme-figure { max-width: calc(var(--measure) / 2); }
}

@media (max-width: 640px) {
  .hero-action {
    flex-direction: column;
    align-items: flex-start;
  }

  /* The strip stops being a strip: three facts down the page, each ruled off
     from the next, and the frame's bottom rule closes the last one. */
  .proof-facts {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 0;
    border-bottom: 0;
  }

  .proof-facts > div {
    padding-block: var(--space-4);
    border-bottom: var(--hair) solid var(--hairline);
  }

  .stat-rail {
    padding-left: 0;
    padding-top: var(--space-4);
    border-left: 0;
    border-top: var(--hair) solid var(--hairline);
  }
}