/*
 * HigherSelf Systems - page composition
 * =====================================
 * Load AFTER tokens.css and components.css.
 *
 * Page-level layout for the live site only: header, hero, panels,
 * evidence card grid, offer ladder, footer. Every colour, size, space
 * and radius below is a token from tokens.css. No colour media queries:
 * dark mode remains a pure token swap.
 *
 * New classes introduced here (not in components.css):
 *   .skip-link            keyboard-only jump to main content
 *   .site-header(.site-header__inner), .brand, .nav
 *   .hero, .hero__lede, .hero__actions, .trustline
 *   .panel                filled block for "start here" and final CTA
 *   .measure-wide         wider measure for tables and card grids
 *   .memorable            the governing observation, report register
 *   .pull                 the one finding worth repeating
 *   .evidence-ledger      observed / reproduced / not proven
 *   .diagram(.diagram__wide|__narrow)   four-stage engagement map, inline SVG
 *   .cards > .card(.card__status)   Sofema proof cards
 *   .rung(.rung__price)   the offer ladder
 *   .site-footer
 */

/* Skip link: invisible until focused. */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -4rem;
  z-index: 20;
  background: var(--color-ink);
  color: var(--color-bg);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
}
.skip-link:focus-visible { top: var(--space-3); }

/* Header: sticky, solid, one hairline. The nav is hidden below 40rem:
 * with no JavaScript there is no drawer to put it in, and a two-row
 * sticky header would eat a phone's viewport. The page is a document;
 * scrolling is the navigation. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
  border-bottom: var(--border-hairline);
}
.site-header__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-3);
}
.brand {
  color: var(--color-ink);
  font-weight: 650;
  text-decoration: none;
  margin-right: auto;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
}
.nav a {
  color: var(--color-ink-2);
  text-decoration: none;
}
.nav a:hover { color: var(--color-accent); }

/* Header contact route: a quiet text link, not a third competing button.
 * The solid button belongs to the contact panel at the end of the page. */
.nav-cta {
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
.nav-cta:hover { color: var(--color-accent); }

/* Mobile navigation: a native details menu, no JavaScript. Hidden on
 * wide viewports where the full nav row is visible. */
.nav-menu { display: none; position: relative; }
.nav-menu > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink);
  padding: var(--space-2) var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu[open] > summary { background: var(--color-surface); }
.nav-menu nav {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 30;
  display: grid;
  gap: var(--space-3);
  min-width: 14rem;
  background: var(--color-bg);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.nav-menu nav a {
  color: var(--color-ink);
  text-decoration: none;
}
.nav-menu nav a:hover { color: var(--color-accent); }

@media (max-width: 40rem) {
  .nav, .site-header .nav-cta { display: none; }
  .nav-menu { display: block; }
}

/* Hero */
.hero { padding-block: var(--space-7) 0; }
.hero h1 { max-width: 22ch; }
.hero__lede {
  font-size: var(--text-lg);
  max-width: var(--width-prose);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-4);
}
.trustline {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink);
  line-height: var(--leading-caption);
}

/* The delivery line: the division of labour stated as body fact,
 * deliberately not a badge, a slogan or a panel. */
.hero__delivery {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  max-width: var(--width-prose);
  margin: 0 0 var(--space-4);
}
.hero .panel { margin-top: var(--space-6); }

/* At wide viewports the hero becomes a two-column document: reading
 * measure left, apparatus rail right. The rail carries the reproduced
 * finding and the buying map, so the first viewport holds a fact and
 * the commercial shape, not only claims. Below 70rem it is one column
 * and the finding panel sits directly under the lede in source order. */
@media (min-width: 70rem) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, var(--width-prose)) minmax(18rem, var(--width-rail));
    /* The final 1fr row absorbs the rail's surplus height; the actions
     * and trustline share one cell so no gap can open between them. */
    grid-template-rows: auto auto auto auto auto 1fr;
    column-gap: var(--space-8);
    align-items: start;
  }
  .hero > .eyebrow        { grid-area: 1 / 1; }
  .hero > h1              { grid-area: 2 / 1; }
  .hero > .hero__lede     { grid-area: 3 / 1; }
  .hero > .hero__delivery { grid-area: 4 / 1; }
  .hero > .hero__foot     { grid-area: 5 / 1; }
  .hero > .memorable      { grid-area: 1 / 2 / 4 / 3; margin-top: 0; }
  .hero > .hero__map      { grid-area: 5 / 2 / 7 / 3; margin-top: 0; }
}

/* The reproduced finding in the first viewport. The line is set in the
 * mono because it is verbatim evidence, something observed rather than
 * something written; the annotation beneath returns to the prose voice. */
.memorable {
  border-left: var(--border-accent);
  border-left-color: var(--color-ink);
  margin-top: var(--space-6);
}
.memorable__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin: 0 0 var(--space-3);
}
.memorable__line {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.01em;
  max-width: 38rem;
  margin: 0;
}
.memorable small {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  line-height: var(--leading-caption);
  margin-top: var(--space-3);
}

/* One apparatus geometry for the whole page. Sections opt in with
 * .section--rail; below 70rem the class is inert and the document
 * stacks in source order. The rail may be empty for long stretches:
 * that is a margin, and it reads as one because the geometry never
 * changes between the first viewport and the last rung. */
@media (min-width: 70rem) {
  .section--rail {
    display: grid;
    grid-template-columns: minmax(0, var(--width-prose)) minmax(18rem, var(--width-rail));
    column-gap: var(--space-8);
    align-items: start;
  }
  .section--rail > * { grid-column: 1; }
}

/* Margin annotation: the join each finding sat in. Display-only
 * duplication of the pull-quote caption's joins, hidden wherever the
 * rail does not exist (narrow viewports and print). */
.rail-note { display: none; }
@media (min-width: 70rem) {
  .rail-note {
    display: block;
    grid-column: 2;
    margin: var(--space-4) 0 0;
    border-top: var(--border-hairline);
    padding-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-ink-2);
  }
}

/* Record-level fact, stated once above the findings: the confidence
 * axis is uniform on this page, so it is a property of the record,
 * not data about any one finding. */
.record-note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin: var(--space-5) 0 0;
}

/* Explicit rows in #evidence so auto-placement can never misfire. */
#evidence > .evidence-intro,
#evidence > .finding,
#evidence > .method-close { max-width: var(--width-prose); }

@media (min-width: 70rem) {
  #evidence > .eyebrow          { grid-row: 1; }
  #evidence > h2                { grid-row: 2; }
  #evidence > .evidence-intro   { grid-row: 3; }
  #evidence > .pull             { grid-row: 4; }
  #evidence > .evidence-ledger  { grid-column: 2; grid-row: 3 / 5; margin-block: 0; }
  #evidence .evidence-ledger__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  #evidence > .record-note      { grid-row: 5; }
  #evidence > article:nth-of-type(1) { grid-row: 6; }
  #evidence > article:nth-of-type(2) { grid-row: 7; }
  #evidence > article:nth-of-type(3) { grid-row: 8; }
  #evidence > .rail-note--f1    { grid-row: 6; }
  #evidence > .rail-note--f2    { grid-row: 7; }
  #evidence > .rail-note--f3    { grid-row: 8; }
  #evidence > .method-close     { grid-row: 9; }
  #evidence > .callout          { grid-row: 9; grid-column: 2; margin-block: var(--space-4) 0; }
  #evidence > .next-step        { grid-row: 10; }
}

/* Built: the portfolio boundary beside the disclosure it qualifies. */
@media (min-width: 70rem) {
  #built > .eyebrow        { grid-row: 1; }
  #built > h2              { grid-row: 2; grid-column: 1 / -1; }
  #built > .built-intro    { grid-row: 3; }
  #built > .portfolio-note { grid-row: 3; grid-column: 2; margin: 0;
                             border-top: var(--border-hairline); padding-top: var(--space-3); }
  #built > .measure-wide   { grid-row: 4; grid-column: 1 / -1; }
}

/* Work: the rule sits level with the four steps it governs; the work
 * sample rides the rail beside the detail it evidences. */
@media (min-width: 70rem) {
  #work > .work-intro   { grid-row: 1; }
  #work > .diagram      { grid-row: 2; grid-column: 1 / -1; }
  #work > .work-steps   { grid-row: 3; }
  #work > .work-rule    { grid-row: 3; grid-column: 2; margin-block: 0; }
  #work > .work-detail  { grid-row: 4; }
  #work > .work-sample  { grid-row: 4; grid-column: 2; margin-block: 0; }
}

/* Price: the dated capacity panel rides the rail beside the intro;
 * the rail beside the rungs is deliberately margin. */
#price > * { max-width: var(--width-prose); }
@media (min-width: 70rem) {
  #price > .eyebrow            { grid-row: 1; }
  #price > h2                  { grid-row: 2; }
  #price > .price-intro        { grid-row: 3; }
  #price > .price-regulated    { grid-row: 4; }
  #price > .capacity           { grid-row: 3 / 5; grid-column: 2; }
  #price > .rung:nth-of-type(1){ grid-row: 5; }
  #price > .rung:nth-of-type(2){ grid-row: 6; }
  #price > .rung:nth-of-type(3){ grid-row: 7; }
  #price > .rung:nth-of-type(4){ grid-row: 8; }
  #price > h3:nth-of-type(1)   { grid-row: 9; }
  #price > .price-excluded     { grid-row: 10; }
}

/* Rail panels: --space-6 padding suits a 42rem panel; in a 19rem
 * column it is oversized. */
@media (min-width: 70rem) {
  .hero > .memorable,
  .hero > .hero__map,
  #price > .capacity { padding: var(--space-5); }
}

/* The buying ladder: four document rows, price first in the data
 * register, one qualifying clause each. */
.ladder { list-style: none; margin: 0; padding: 0; }
.ladder > li {
  padding-block: var(--space-3);
  border-top: var(--border-hairline);
  font-size: var(--text-sm);
  line-height: var(--leading-caption);
}
.ladder > li:first-child { border-top: 0; padding-top: 0; }
.ladder > li:last-child  { padding-bottom: 0; }
.ladder__price {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.ladder__note {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

/* Evidence ledger: make the limits of the record visible before the
 * individual findings, so the cards cannot be mistaken for outcome proof. */
.evidence-ledger {
  margin-block: var(--space-6);
}
.evidence-ledger__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin: 0;
}
.evidence-ledger__grid > div { margin: 0; }
.evidence-ledger dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin-bottom: var(--space-2);
}
.evidence-ledger dd {
  margin: 0;
  line-height: var(--leading-caption);
}
@media (max-width: 56rem) {
  .evidence-ledger__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* Pull: the one finding a visitor should remember. Quiet ink rule,
 * larger type, no hue. */
.pull {
  border-left: var(--border-accent);
  border-left-color: var(--color-ink);
  padding-left: var(--space-5);
  margin: var(--space-7) 0;
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
  font-weight: 600;
  max-width: 30ch;
}
.pull small {
  display: block;
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-caption);
  margin-top: var(--space-3);
}

/* Process diagram: inline SVG, no JavaScript, no external assets.
 * Two fixed layouts swapped by media query; both are pure strokes,
 * fills and text drawn from the tokens, so light, dark and print all
 * work without their own rules. The ol.steps list beside it carries
 * the same content as plain text. */
.diagram { margin: var(--space-6) 0; }
.diagram__caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin-bottom: var(--space-4);
}
.diagram svg { display: block; width: 100%; height: auto; }
.diagram svg.diagram__narrow { display: none; }
.diagram .d-box {
  fill: var(--color-surface);
  stroke: var(--color-ink-2);
  stroke-width: 1.5;
}
.diagram .d-num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  fill: var(--color-ink-2);
}
.diagram .d-name {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  fill: var(--color-ink);
}
.diagram .d-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  fill: var(--color-ink-2);
}
.diagram .d-line { stroke: var(--color-ink-2); stroke-width: 1.5; }
.diagram .d-arrow { fill: var(--color-ink-2); }
.diagram .d-conn {
  stroke: var(--color-ink-2);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.diagram .d-rail { stroke: var(--color-ink-2); stroke-width: 1.5; }
.diagram .d-loop { stroke: var(--color-ink-2); stroke-width: 1.5; fill: none; }
.diagram .d-loop-arrow { fill: var(--color-ink-2); }
.diagram .d-gate {
  fill: var(--color-bg);
  stroke: var(--color-accent);
  stroke-width: 2;
}

/* The return-loop caption lives outside the narrow SVG so it cannot
 * clip at 320px; it is hidden while the wide diagram carries the same
 * words internally. */
.diagram__note {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin: var(--space-3) 0 0;
}

/* The vertical variant serves everything under 56rem: between 40rem and
 * 56rem the wide drawing scaled its labels below legibility. */
@media (max-width: 56rem) {
  .diagram svg.diagram__wide { display: none; }
  .diagram svg.diagram__narrow { display: block; }
  .diagram__note { display: block; }
}

@media print {
  .diagram svg.diagram__wide { display: block; }
  .diagram svg.diagram__narrow { display: none; }
  .diagram__note { display: none; }
}

/* Section rhythm: components.css gives h2 a large top margin for
 * long-form flow. Inside a section the heading comes first, so the
 * section margin does the separating. */
.section > h2,
.section > .eyebrow:first-child + h2 { margin-top: 0; }
.section { margin-block: var(--space-8); }

/* Panel: the "start here" block and the final call to action. */
.panel {
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
@media (max-width: 40rem) {
  .panel { padding: var(--space-4); }
}

/* Wider measure for the summary table and the 3-up card grid. */
.measure-wide { max-width: var(--width-wide); }

/* Proof cards (Sofema): facts with status chips, no hue. */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.card {
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.card h3 {
  font-size: var(--text-lg);
  margin-top: 0;
}
.card > :last-child { margin-bottom: 0; }
.card__status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
@media (max-width: 56rem) {
  .cards { grid-template-columns: 1fr; }
}

/* The offer ladder: document rows, not pricing cards. The price is a
 * mono label, the same register as every other factual label. */
.rung {
  border-top: var(--border-hairline);
  padding-block: var(--space-6);
}
.rung:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.rung__price {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}
.rung h3 { margin-top: 0; }

/* The facts of each rung: a labelled definition list so a buyer can
 * compare price, duration, deliverable, proof, exit and boundary
 * across rungs without excavating paragraphs. */
.rung__facts { margin: var(--space-4) 0 0; }
.rung__facts dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin: var(--space-4) 0 var(--space-1);
}
.rung__facts dt:first-child { margin-top: 0; }
.rung__facts dd {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-body);
}

/* The proof exit: the decision point placed where the page has just
 * delivered value, not before. */
.next-step {
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin: var(--space-7) 0;
  max-width: var(--width-prose);
}
.next-step h2 { margin-top: 0; font-size: var(--text-xl); }
.next-step p:last-child { margin-bottom: 0; }
.next-step .button { margin-right: var(--space-3); }

/* The free-check form. Native controls, no JavaScript, no third-party
 * request: the submission is an ordinary POST to this same site. */
.check-form { margin: var(--space-5) 0 var(--space-4); max-width: 28rem; }
.check-form__row { margin: 0 0 var(--space-4); }
.check-form label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin-bottom: var(--space-2);
}
.check-form input {
  display: block;
  width: 100%;
  font: inherit;
  font-size: var(--text-md);
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.check-form input::placeholder { color: var(--color-ink-2); }
.check-form input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-color: var(--color-ink);
}
.check-form button { cursor: pointer; }
.check-form__note { margin: 0; }
@media print { .check-form { display: none; } }

/* Footer */
.site-footer {
  border-top: var(--border-hairline);
  margin-top: var(--space-9);
  padding-block: var(--space-5);
}
.site-footer p { margin: 0 0 var(--space-2); }
.site-footer p:last-child { margin-bottom: 0; }

/* Anchored headings must clear the sticky header; the mobile header can
 * wrap to two rows, so the offset is larger there. */
[id] { scroll-margin-top: 5rem; }
@media (max-width: 40rem) {
  [id] { scroll-margin-top: 6.5rem; }
}

/* Print: the page is a document; the chrome is not. */
@media print {
  .skip-link, .site-header .nav-cta, .nav, .nav-menu { display: none; }
  .site-header { position: static; }
  .finding, .panel, .card, .disclosure, .next-step { background: none; }
}

/* Smooth anchor scrolling, only where motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}