/* PK2 Finance & Strategy · home page (v2)
   Composition rules for the home page only. Anything reusable belongs in
   foundation.css; anything with a colour in it reads a token. */

/* ---------------------------------------------------------- page rhythm -- */

/* Nine sections have to sit inside one scroll. The system's section rhythm
   is run a step tighter here, and only here: the file is loaded by the home
   page alone. Every other measure in the system is untouched. */
:root {
  --section-top: 76px;
  --section-bottom: 88px;
}

@media (max-width: 1024px) {
  :root { --section-top: 64px; --section-bottom: 74px; }
}

@media (max-width: 640px) {
  :root { --section-top: 52px; --section-bottom: 60px; }
}

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

/* The device is shorter than the proposition, so it centres against it
   rather than hanging from the top of the column. */
.hero-grid { align-items: center; }

.hero-eyebrow { margin-bottom: 26px; }
.hero-lede { max-width: 560px; margin-top: 26px; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 34px;
}
.hero-availability { margin-top: 26px; }

/* The device carries the right half of the fold and does not stop at the
   container: it is drawn at its own measured pixel width, extended past the
   container by exactly the outer margin, and cut by the section. Only the
   resolved gold line reaches that cut. Every fragment and the decision itself
   sit left of the merge point, so nothing readable is ever clipped. */
.hero { overflow-x: clip; }
.hero-device { width: calc(100% + var(--edge-bleed)); }

/* Four columns plus the bleed, not five: the field is an instrument beside the
   proposition, not a second headline. Narrowing the box narrows the drawn
   height with it, because the fluid geometry is a ratio of its own width. */
@media (min-width: 1025px) {
  .hero-grid > .hero-device { grid-column: 9 / span 4; }
}

/* The CTAs keep their own width at phone size. Run full-bleed, the gold pill
   alone takes more of the screen than the accent is allowed, and a pill that
   spans the column reads as a bar rather than a button. They stack, left
   aligned on the same edge as the type above them, at full tap height. */
@media (max-width: 640px) {
  .hero-lede { margin-top: 22px; }
  .hero-actions { gap: 12px; margin-top: 28px; }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary { flex: 0 0 auto; width: auto; }
}

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

.problem-eyebrow { margin-bottom: 22px; }
.problem-body { margin-top: 26px; }
.problem-body p + p { margin-top: 15px; }

/* The four questions, in the reserved voice, as a bridge across the whole
   content width beneath the split. One rule carries them: ink for its first
   half and gold for its second, two solid segments, not a gradient, because
   the only gradients the system allows are the grid-texture fade and the edge
   dissolve. Horizontal here, vertical nowhere else. */
.question-bridge { margin-top: 60px; }
.question-bridge-lead { margin-bottom: 18px; }

/* The fourth question runs to three lines and the other three to one, so the
   short ones centre against it. The rule stays the row's top edge and the
   questions sit as one block in the space beneath it. */
.question-bridge-row {
  position: relative;
  align-items: center;
  padding-top: 24px;
  row-gap: 22px;
}
.question-bridge-row::before,
.question-bridge-row::after {
  content: "";
  position: absolute;
  top: 0;
  height: 2px;
}
.question-bridge-row::before { left: 0; width: 50%; background: var(--ink); }
.question-bridge-row::after  { left: 50%; right: 0; background: var(--gold); }

.question-bridge-row p {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 580;
  font-size: 20px;
  line-height: 1.32;
  letter-spacing: -0.008em;
  color: var(--ink);
  text-wrap: balance;
}
.question-bridge-row p:nth-child(1) { grid-column: 1 / span 3; }
.question-bridge-row p:nth-child(2) { grid-column: 4 / span 3; }
.question-bridge-row p:nth-child(3) { grid-column: 7 / span 3; }
.question-bridge-row p:nth-child(4) { grid-column: 10 / span 3; }

@media (max-width: 1024px) {
  /* Stacked, the narrative column is the whole container and the paragraphs
     run past 100 characters. They get their own measure back. Set in px, not
     ch: Satoshi's figures are far wider than its lowercase, so 1ch here is
     12.3px and a ch-based cap lands around 108 characters, not 68. 560px is
     roughly 70. */
  .problem-body { max-width: 560px; }
  .question-bridge { margin-top: 48px; }
  .question-bridge-row p:nth-child(1) { grid-column: 1 / span 4; }
  .question-bridge-row p:nth-child(2) { grid-column: 5 / span 4; }
  .question-bridge-row p:nth-child(3) { grid-column: 1 / span 4; }
  .question-bridge-row p:nth-child(4) { grid-column: 5 / span 4; }
}

@media (max-width: 640px) {
  .question-bridge { margin-top: 48px; }
  .question-bridge-row { row-gap: 16px; padding-top: 22px; }
}

/* --------------------------------------------- instrument 1: bank balance */

.decomp {
  width: 100%;
  margin-top: 4px;
  border-collapse: collapse;
}
.decomp th,
.decomp td {
  padding: 13px 0;
  font-weight: 400;
  text-align: left;
  vertical-align: baseline;
}
.decomp th {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}
.decomp td {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
.decomp tr + tr th,
.decomp tr + tr td { border-top: 1px solid var(--hairline); }

.decomp-open td { font-size: 18px; }

/* The resolved row. Gold as ground with ink type, not gold type: gold text on
   the lit core measures 2.6:1, which is not a reading contrast at any size. */
.decomp-total th,
.decomp-total td {
  background: var(--gold);
  color: var(--ink);
  border-top: 0;
  padding-top: 15px;
  padding-bottom: 15px;
}
.decomp-total th {
  padding-left: 14px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.decomp-total td {
  padding-right: 14px;
  font-size: 22px;
}

/* Stacked, the card would otherwise stretch across the whole container: the
   row labels drift away from their figures, and the gold total row on its own
   takes more than 5% of a screen. Capped, it stays a device. */
@media (max-width: 1024px) {
  .problem-instrument .instrument { max-width: 660px; }
  /* The resolved row is the largest single piece of gold on the page. Stacked,
     it is also the widest, so it gives back some height to stay inside the
     accent's share of a screen. */
  .decomp-total th,
  .decomp-total td { padding-top: 11px; padding-bottom: 11px; }
}

/* At phone width the core has to give back some of its padding, or the two
   mono labels wrap against each other. */
@media (max-width: 640px) {
  .problem-instrument .instrument-core { padding: 20px 16px 16px; }
  .problem-instrument .instrument-labels .label { font-size: 11px; letter-spacing: 0.1em; }
  .decomp th { font-size: 12px; }
  .decomp td { font-size: 15px; }
  .decomp-open td { font-size: 17px; }
  .decomp-total th { font-size: 10px; letter-spacing: 0.1em; padding-left: 12px; }
  .decomp-total td { font-size: 20px; padding-right: 12px; }
}

/* The same decomposition, drawn. Ink for the descent, gold for the level it
   settles at. It draws once, when the section arrives, and then it is a
   picture. */
.decomp-spark { margin: 20px 0 4px; }
.decomp-spark svg { width: 100%; height: auto; }
.spark-step { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: miter; opacity: 0.62; }
.spark-level { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: butt; }
.spark-dot { fill: var(--gold); }
.spark-base { stroke: var(--hairline); stroke-width: 1; }

html.js .spark-step,
html.js .spark-level {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 600ms var(--ease-resolve);
}
html.js .spark-level { transition-delay: 380ms; }
html.js .spark-dot {
  opacity: 0;
  transition: opacity 200ms linear 900ms;
}
html.js .reveal-group.is-in .spark-step,
html.js .reveal-group.is-in .spark-level { stroke-dashoffset: 0; }
html.js .reveal-group.is-in .spark-dot { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html.js .spark-step,
  html.js .spark-level { stroke-dashoffset: 0; transition: none; }
  html.js .spark-dot { opacity: 1; transition: none; }
}

/* -------------------------------------------------------- 3 statement -- */

.statement-body { color: var(--muted-inv); margin-top: 22px; max-width: 620px; }
.statement-mid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px 48px;
  margin-top: 40px;
}
.statement-mid .statement-body { flex: 1 1 340px; margin-top: 0; padding-bottom: 4px; }
.statement-figure { flex: 0 0 auto; }
.ground-ink .statement-figure .num-gold { color: var(--gold); }
.statement-figure .label { margin-top: 10px; }
.statement-voice { margin-top: 40px; max-width: 640px; }

/* Above the grid break the band is composed in two columns: the argument runs
   down the rail: the lede that qualifies the claim, then the count and the
   evidence under it, and the right half carries the naming line on its own,
   so the sentence the section exists to land has the width to itself. The
   source order stays claim, lede, figure, naming line, which is also the order
   the band stacks in below the break. */
@media (min-width: 1025px) {
  .statement .layout-statement > .display-lg { grid-row: 1; }
  .statement .layout-statement > .statement-body { grid-column: 1 / span 5; grid-row: 2; }
  .statement-mid {
    display: block;
    grid-column: 1 / span 5;
    grid-row: 3;
    margin-top: 40px;
  }
  /* The naming line holds the right half alone, so it centres against the
     column it answers rather than hanging from the top of it. Its stacked top
     margin is dropped first, or the margin is centred with the type and the
     line sits low. */
  .statement-voice {
    grid-column: 7 / span 6;
    grid-row: 2 / span 2;
    align-self: center;
    margin-top: 0;
  }
  .statement-mid .statement-body { margin-top: 26px; padding-bottom: 0; }
}

@media (max-width: 640px) {
  .statement-figure { margin-top: 40px; }
  .statement-voice { margin-top: 40px; }
}

/* ----------------------------------------------------- 4 decision index -- */

.index-head { grid-column: 1 / span 8; }
.index-head .h2 { margin-top: 18px; }
.index-lede { margin-top: 18px; max-width: 560px; color: var(--text-muted); }

.index-list { margin-top: 34px; border-bottom: 1px solid var(--hairline); }

/* The category marker is a mono rule label, not a heading: it groups the rows
   below it and gets out of the way. */
.index-cat { padding: 18px 0 8px; }
.index-list > .index-cat:first-child { padding-top: 0; }

.index-row { border-top: 1px solid var(--hairline); }

.index-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr) 30px;
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: var(--gutter);
  row-gap: 6px;
  width: 100%;
  margin: 0;
  padding: 13px 0 15px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-ui) ease;
}
.index-num { grid-column: 1; grid-row: 1; padding-top: 6px; font-size: 13px; color: var(--text-muted); }
.index-q { grid-column: 2; grid-row: 1 / span 2; }
.index-signals { grid-column: 3; grid-row: 1; padding-top: 7px; }
.index-outcome { grid-column: 3; grid-row: 2; font-size: var(--size-small); line-height: 1.5; color: var(--text-muted); }
.index-mark { grid-column: 4; grid-row: 1 / span 2; position: relative; }

/* Plus and minus, set in mono, no chevron. Hidden without script, where the
   panels are all open and the control does nothing. */
.index-mark::after {
  content: "";
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted);
}
html.js .index-mark::after { content: "+"; }
html.js .index-toggle[aria-expanded="true"] .index-mark::after { content: "\2212"; }

/* The row lifts to the second ground on hover, and the arrow that has been
   waiting at the end of the row arrives. */
.index-toggle:hover { background: var(--paper-2); }
.index-toggle::after {
  content: "\2192";
  position: absolute;
  right: -2px;
  bottom: 15px;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-ui) ease, transform var(--dur-ui) var(--ease-resolve);
}
.index-toggle:hover::after,
.index-toggle:focus-visible::after { opacity: 1; transform: none; }

.index-detail {
  padding: 0 0 22px calc(52px + var(--gutter));
  max-width: 720px;
}
.index-detail[hidden] { display: none; }
.index-detail p { font-size: var(--size-small); line-height: 1.6; color: var(--text-muted); }
html.js .index-detail { animation: index-open 260ms var(--ease-resolve) both; }

@keyframes index-open {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 1024px) {
  .index-head { grid-column: 1 / span 8; }
  .index-toggle { grid-template-columns: 44px minmax(0, 1fr) 26px; }
  .index-num { grid-row: 1; }
  .index-q { grid-column: 2; grid-row: 1; }
  .index-signals { grid-column: 2; grid-row: 2; padding-top: 10px; }
  .index-outcome { grid-column: 2; grid-row: 3; padding-top: 4px; }
  .index-mark { grid-column: 3; grid-row: 1; }
  .index-detail { padding-left: calc(44px + var(--gutter)); }
}

@media (max-width: 640px) {
  .index-list { margin-top: 40px; }
  .index-toggle { grid-template-columns: 34px minmax(0, 1fr) 22px; column-gap: 12px; padding: 18px 0 20px; }
  .index-q { font-size: 21px; }
  .index-detail { padding-left: 46px; }
  .index-toggle::after { display: none; }
}

/* ----------------------------------------------------- 5 90-day method -- */

.method-count { grid-column: 1 / span 3; }
.method-count .num-display { margin-top: 14px; }
.method-count-cap { margin-top: 12px; }
.method-intro { grid-column: 6 / span 7; align-self: end; }
.method-intro-body { margin-top: 18px; max-width: 560px; color: var(--text-muted); }

/* The three steps carry the section on their own. Structure is hairline only:
   a rule over each column, gold over the one that finishes the engagement,
   and a rule down the middle of each gutter between them, so the row reads as
   one ruled band rather than three loose cards. The rules sit in the gutters,
   so every column of type stays on the grid. */
.method-steps { margin-top: 52px; }
.method-step {
  position: relative;
  grid-column: span 4;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}
@media (min-width: 1025px) {
  .method-step + .method-step::before {
    content: "";
    position: absolute;
    left: calc(var(--gutter) / -2);
    top: 0;
    bottom: 4px;
    width: 1px;
    background: var(--hairline);
  }
}
.method-step .h3 { margin-top: 10px; }
.method-step .body { margin-top: 14px; color: var(--text-muted); font-size: var(--size-small); }
.method-step-live { border-top-color: var(--gold); }

@media (max-width: 1024px) {
  .method-count { grid-column: 1 / span 8; }
  .method-intro { grid-column: 1 / span 8; margin-top: 34px; }
  .method-steps { margin-top: 48px; }
  /* Stacked, a step column is the full container: the paragraph needs its own
     measure back or it runs to 110 characters. */
  .method-step { grid-column: span 8; }
  .method-step .body { max-width: 620px; }
  .method-step + .method-step { margin-top: 30px; }
}

/* At phone width the row is redrawn as a vertical spine: the same three
   stages, read downward, with the last mark gold. The horizontal band is not
   squashed, it is replaced. */
@media (max-width: 640px) {
  .method-steps {
    position: relative;
    margin-top: 44px;
    padding-left: 26px;
  }
  .method-steps::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 8px;
    width: 1px;
    background: var(--hairline);
  }
  .method-step {
    position: relative;
    padding-top: 0;
    border-top: 0;
  }
  .method-step::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 6px;
    width: 13px;
    height: 2px;
    background: var(--ink);
    opacity: 0.35;
  }
  .method-step:nth-child(2)::before { width: 17px; opacity: 0.6; }
  .method-step-live::before { width: 22px; background: var(--gold); opacity: 1; }
  .method-step + .method-step { margin-top: 34px; }
  .method-after { margin-top: 44px; }
}

/* ------------------------------------------------------ 6 what remains -- */

.remains-head { grid-column: 1 / span 8; }
.remains-head .h2 { margin-top: 18px; }

/* The quadrant itself is a foundation component. */

/* What happens once the engagement ends. It closes the quadrant under a
   hairline, at small size, so it reads as a footnote to what you keep rather
   than as a fifth thing you get. */
.remains-after {
  grid-column: 1 / span 12;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}
.remains-after .body {
  margin-top: 12px;
  max-width: 720px;
  font-size: var(--size-small);
  color: var(--text-muted);
}

@media (max-width: 1024px) {
  .remains-head { grid-column: 1 / span 8; }
  .remains-after { grid-column: 1 / span 8; }
}

/* --------------------------------------------------------------- 7 fit -- */

.fit-head { grid-column: 1 / span 8; }
.fit-head .h3 { margin-top: 16px; }

.fit-col { margin-top: 34px; }
.fit-col-good { grid-column: 1 / span 5; }
.fit-col-not  { grid-column: 7 / span 5; }
.fit-mark { padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.fit-col-good .fit-mark { border-bottom-color: var(--ink); }

.fit-list { list-style: none; margin: 0; padding: 0; }
.fit-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}
.fit-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.fit-glyph {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
}
.fit-col-good .fit-glyph { color: var(--ink); }
.fit-title { grid-column: 2; grid-row: 1; font-weight: 700; font-size: 16px; line-height: 1.45; color: var(--ink); }
.fit-line  { grid-column: 2; grid-row: 2; margin-top: 6px; font-size: var(--size-small); line-height: 1.5; color: var(--text-muted); }

.fit-cta { grid-column: 1 / span 12; margin-top: 34px; }

@media (max-width: 1024px) {
  .fit-head, .fit-cta { grid-column: 1 / span 8; }
  .fit-col-good { grid-column: 1 / span 8; }
  .fit-col-not  { grid-column: 1 / span 8; margin-top: 40px; }
  .fit-title, .fit-line { max-width: 620px; }
}

/* ------------------------------------------------------------- 8 tools -- */

.tools-tray { grid-column: 1 / span 6; }
.tools-aside { grid-column: 8 / span 5; align-self: center; }
.tools-aside-body { margin-top: 16px; max-width: 380px; color: var(--text-muted); font-size: var(--size-small); }
.tools-more { margin-top: 22px; }

.tools-title { margin-top: 20px; }
.tools-desc { margin-top: 12px; color: var(--text-muted); }
.tools-signals { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.tools-cta { margin-top: 20px; }

@media (max-width: 1024px) {
  .tools-tray { grid-column: 1 / span 8; }
  .tools-aside { grid-column: 1 / span 8; margin-top: 36px; }
}

/* ------------------------------------------------------------- 9 close -- */

.close-field { margin-top: 34px; }
.close-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-top: 38px;
}

@media (min-width: 1025px) {
  .close-field { grid-column: 1 / span 12; }
}

@media (max-width: 640px) {
  .close-field { margin-top: 34px; }
  .close-actions { margin-top: 34px; }
  .close-actions .btn-primary { flex: 0 0 auto; width: auto; }
}