/* Crux V5 - Homepage design system (Phase A.6 identity correction)
 * Self-contained homepage layer. Loaded on the homepage and its hero-B review
 * route only (NOT marketing.css / elevation.css), so the generic blueprint-grid,
 * alternating-plate, glowing-button system is not present here.
 *
 * Identity: "built from the work." The page is made of construction-finance
 * artifacts (vendor invoices, cost codes, approval stamps, job-cost ledgers,
 * a real workflow, a QuickBooks integration boundary) on warm document paper.
 * Approved brand only: Navy #1a2660, Blue #34469d, Yellow #FFDA00.
 */

/* ======================================================================
 * Palette + surface (approved brand + document-paper neutrals)
 * ==================================================================== */
body.home {
  --navy:   #1a2660;
  --blue:   #34469d;
  --yellow: #FFDA00;
  --yellow-deep: #E6C400;

  /* Warm document paper (construction paperwork, not cold fintech grey) */
  --paper:  #f4f2ec;
  --paper-2:#efece3;
  --card:   #ffffff;

  /* Ink (navy-derived, WCAG AA on paper) */
  --ink:        #1a2660;
  --ink-body:   #3b426a;
  --ink-muted:  #626a8c;
  --rule:       #ddd9cc;   /* warm ledger rule */
  --rule-strong:#c7c2b1;

  --on-dark:        #ffffff;
  --on-dark-muted:  rgba(255,255,255,0.80);
  --on-dark-faint:  rgba(255,255,255,0.55);
  --line-dark:      rgba(255,255,255,0.14);

  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--font-body);
}

body.home main { overflow: clip; }

/* Reusable measured container width already comes from layout.css (.container) */
.home .container { max-width: 76rem; }

/* ======================================================================
 * Typography - DM Sans headline identity (not condensed all-caps)
 * ==================================================================== */
.home h1, .home h2, .home h3 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--ink);
}
.home .display {
  font-size: clamp(2.2rem, 4.6vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.home h2.sec__title { font-size: clamp(1.7rem, 3.2vw, 2.7rem); }
.home p { color: var(--ink-body); font-size: 1.0625rem; line-height: 1.65; max-width: 60ch; }
.home .lede { font-size: clamp(1.05rem, 1.6vw, 1.28rem); line-height: 1.55; color: var(--ink-body); max-width: 46ch; }

/* Strong emphasis: readable ink on light surfaces (base.css defaults strong to the
 * dark-theme text token, which is invisible on the paper background); keep light on
 * dark bands. */
.home strong, .home b { color: var(--ink); font-weight: 600; }
.home .sec--dark strong, .home .sec--dark b, .home .close strong, .home .close b { color: var(--on-dark); }

/* Section eyebrow (DM Sans, restrained; mono is reserved for data) */
.home .kicker {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  display: inline-block;
  margin-bottom: 1rem;
}
.home .kicker--ondark { color: var(--yellow); }
.home .figure { font-family: var(--font-display); letter-spacing: 0.01em; color: var(--ink); }

/* Neutralize inherited eyebrow "//" marker if any element reuses .eyebrow */
.home .eyebrow::before { content: ""; }

/* ======================================================================
 * Header - corrected Crux brand authority (approved navy, prominent logo)
 * ==================================================================== */
.home .masthead {
  background: var(--navy);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-bottom: 1px solid var(--line-dark);
  box-shadow: 0 1px 0 rgba(255,218,0,0.10);
}
.home .masthead__inner { min-height: 80px; gap: 2rem; }

/* Logo authority through scale + clear space + restraint (no redundant text) */
.home .brand { padding-block: 0.5rem; }
.home .brand__logo { height: 34px; width: auto; display: block; }
@media (max-width: 47.99rem) { .home .brand__logo { height: 28px; } }

.home .mainnav__link,
.home .menu__trigger {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  color: var(--on-dark-muted);
  text-transform: none;
}
.home .mainnav__link:hover,
.home .menu__trigger:hover { color: var(--on-dark); }
.home .mainnav__link[aria-current="page"] { color: var(--on-dark); box-shadow: inset 0 -2px 0 var(--yellow); }

/* Restrained dropdown caret: a clean thin chevron (not a decorative crosshair) */
.home .menu__caret,
.home .mobilenav__caret {
  font-size: 0;
  width: 8px; height: 8px;
  display: inline-block;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px,-1px);
  transition: transform var(--motion-base) var(--ease-standard);
  color: var(--yellow);
}
.home .menu__trigger[aria-expanded="true"] .menu__caret,
.home .mobilenav__group-trigger[aria-expanded="true"] .mobilenav__caret {
  transform: rotate(225deg) translate(-1px,-1px);
}
.home .menu__panel {
  background: var(--navy);
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(10,16,44,0.45);
}
.home .menu__panel a { color: var(--on-dark-muted); }
.home .menu__panel a:hover { background: rgba(255,255,255,0.06); color: var(--on-dark); }
.home .menu__desc { display:block; font-family: var(--font-mono); font-size: 0.66rem; color: var(--on-dark-faint); margin-top: 2px; letter-spacing: 0.02em; }
.home .nav-toggle { color: var(--on-dark); border-color: var(--line-dark); }

/* ======================================================================
 * Buttons - flat, confident, no glow / gradient
 * ==================================================================== */
.home .btn {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0.005em;
  font-weight: 600;
  border-radius: 8px;
  border-width: 1.5px;
  transition: background-color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
.home .btn--primary { background: var(--yellow); color: var(--navy); border-color: var(--yellow); box-shadow: none; }
.home .btn--primary:hover { background: var(--yellow-deep); border-color: var(--yellow-deep); }
.home .btn--secondary { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.home .btn--secondary:hover { border-color: var(--navy); color: var(--navy); background: transparent; }
.home .sec--dark .btn--secondary { color: var(--on-dark); border-color: var(--line-dark); }
.home .sec--dark .btn--secondary:hover { border-color: var(--yellow); color: var(--yellow); }
.home .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 2rem; }
.home .reassure { font-family: var(--font-body); font-size: 0.85rem; color: var(--ink-muted); }
.home .sec--dark .reassure { color: var(--on-dark-muted); }
@media (max-width: 29.99rem) { .home .actions .btn { width: 100%; } }

/* ======================================================================
 * Section scaffolding + intentional rhythm
 * ==================================================================== */
.home .sec { padding-block: clamp(3.5rem, 7vw, 6.5rem); position: relative; }
.home .sec--dark { background: var(--navy); color: var(--on-dark); }
.home .sec--dark h2, .home .sec--dark h3 { color: var(--on-dark); }
.home .sec--dark p { color: var(--on-dark-muted); }
.home .sec--card { background: var(--card); }
.home .sec__head { max-width: 54ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.home .sec__lead { margin-top: 0.9rem; color: var(--ink-body); font-size: 1.1rem; line-height: 1.55; }
.home .sec--dark .sec__lead { color: var(--on-dark-muted); }

/* ======================================================================
 * ARTIFACT MATERIALS (construction finance)
 * ==================================================================== */
/* Caption badge for the approved product screenshot */
.home .shotcap {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 2px 8px;
  display: inline-block;
}

/* Approved product screenshot frame (no browser chrome; the UI is real) */
.home .product-shot-frame {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  background: var(--card);
  box-shadow: 0 24px 60px rgba(20,26,60,0.18);
}
.home .product-shot { display: block; width: 100%; height: auto; }

/* ======================================================================
 * HERO - confident light, with an approved product screenshot
 * ==================================================================== */
.home .hero { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.75rem); position: relative; }
/* Targeted: pull "The problem" up toward the hero (not a global .sec change) */
.home .hero + .sec { padding-top: clamp(2.5rem, 5vw, 4rem); }
.home .hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 60rem) { .home .hero__grid { grid-template-columns: 1.02fr 0.98fr; } }
.home .hero__title { margin-top: 0.4rem; }
.home .hero__lede { margin-top: 1.25rem; }
.home .hero__demo-note { margin-top: 0.9rem; font-family: var(--font-body); font-size: 0.9rem; line-height: 1.5; color: var(--ink-muted); max-width: 52ch; }
.home .hero--light .hero__demo-note { color: var(--ink-muted); }
.home .demo-note { margin: 1rem auto 0; font-family: var(--font-body); font-size: 0.9rem; line-height: 1.5; color: var(--ink-muted); max-width: 60ch; }

.home .hero--light { background: var(--paper); }
.home .hero--light .hero__title { color: var(--ink); }
.home .hero--light .hero__lede { color: var(--ink-body); }

/* Stable, aligned 2x2 grid (was ragged flex-wrap that mis-aligned across widths) */
.home .hero__trust {
  margin-top: 1.75rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1.5rem; max-width: 30rem;
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.01em;
}
@media (max-width: 22rem) { .home .hero__trust { grid-template-columns: 1fr; } }
.home .hero--light .hero__trust { color: var(--ink-muted); }
.home .hero__trust span { display: inline-flex; align-items: center; gap: 0.45em; }
.home .hero__trust span::before { content: ""; width: 5px; height: 5px; background: var(--yellow); border-radius: 1px; }

.home .hero__media { display: grid; gap: 0.75rem; justify-items: start; max-width: 34rem; width: 100%; }
.home .hero__media .shotcap { justify-self: end; }
.home .hero__media .product-shot-frame { width: 100%; }

/* ======================================================================
 * SECTION 1 - Financial chaos (ruled ledger list + field/office lanes)
 * ==================================================================== */
.home .lanes { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
@media (min-width: 48rem) { .home .lanes { grid-template-columns: repeat(4, 1fr); } }
.home .lane { background: var(--paper-2); padding: 1.1rem 1.15rem 1.3rem; }
.home .lane__name { font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.home .lane__chip { margin-top: 0.7rem; background: var(--card); border: 1px solid var(--rule); border-left: 3px solid var(--rule-strong); border-radius: 4px; padding: 0.55rem 0.65rem; font-size: 0.8rem; color: var(--ink-body); }
.home .lane__chip--wait { border-left-color: var(--blue); }
.home .lane__meta { display:block; font-family: var(--font-mono); font-size: 0.64rem; color: var(--ink-muted); margin-top: 3px; letter-spacing: 0.04em; }

/* THE REGISTER
   A ruled tally used in two places with different shapes:
     .register              three columns: number, term, description. Used by
                            the capability pages for their problem lists.
     .register--intake      five columns: number, location, term, instance and
                            how long it has been sitting. The homepage intake
                            section only.
   The intake variant carries its own modifier rather than redefining the base,
   because the base grid is shared with five other routes and a five-column
   track applied to three children squeezes the term into the location column.
   Caught in the browser, not in the stylesheet.

   The intake section used to state the same four problems three times: in the
   section lead, as four "scrap" cards on an irregular stagger, and again as a
   tidy register. The scraps and the register are now one object. */
.home .register { margin-top: 2.5rem; border-top: 2px solid var(--navy); }
.home .register__row {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.3rem 1rem;
  padding: 1.15rem 0 1.25rem;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.home .register__desc { grid-column: 2; }
@media (min-width: 48rem) {
  .home .register__row { grid-template-columns: 2.5rem 16rem 1fr; align-items: baseline; gap: 1rem; }
  .home .register__desc { grid-column: auto; }
}

/* The answered variant.
   The approval problem list and the approval sequence beneath it were two
   six-and-seven item lists that looked parallel and read as repetition, with
   nothing saying how they related. Each problem now names the step that closes
   it, so the second list reads as the answer to the first rather than as a
   restatement of it. Some steps close two problems, which is honest: there are
   seven failures and six steps. */
.home .register--answered .register__fix { grid-column: 2; justify-self: start; }
.home .register--answered .register__fix b { font-weight: 600; color: var(--navy); }
@media (min-width: 60rem) {
  .home .register--answered .register__row {
    grid-template-columns: 2.5rem minmax(9rem, 12rem) minmax(0, 1fr) auto;
    gap: 1.25rem;
  }
  .home .register--answered .register__fix { grid-column: auto; justify-self: end; }
}
.home .register--answered .register__fix {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.03em; color: var(--ink-muted); white-space: nowrap;
  border: 1px solid var(--rule); background: var(--card);
  padding: 0.3rem 0.6rem;
}

/* The intake variant. */
.home .register--intake .register__place,
.home .register--intake .register__term,
.home .register--intake .register__desc { grid-column: 2; }
.home .register--intake .register__age { grid-column: 2; justify-self: start; }
@media (min-width: 60rem) {
  .home .register--intake .register__row {
    grid-template-columns: 2.5rem 5.5rem minmax(10rem, 13rem) minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: baseline;
  }
  .home .register--intake .register__place,
  .home .register--intake .register__term,
  .home .register--intake .register__desc { grid-column: auto; }
  .home .register--intake .register__age { grid-column: auto; justify-self: end; }
}
.home .register__no {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; color: var(--navy);
}
.home .register__place {
  font-family: var(--font-display); font-size: 0.85rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue);
}
.home .register__term { font-weight: 600; color: var(--ink); font-size: 1.0625rem; line-height: 1.4; }
.home .register__desc { color: var(--ink-body); font-size: 0.9375rem; line-height: 1.6; }
/* How long it has been sitting is the point of the section, so it gets the
   last word on every row and the only boxed treatment on it. */
.home .register__age {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.04em; color: var(--navy); white-space: nowrap;
  border: 1px solid var(--yard-line); background: #fff;
  padding: 0.3rem 0.6rem;
}

/* ======================================================================
 * SECTION 2 - Crux creates control (dark integrated system strip)
 * ==================================================================== */
.home .system { display: grid; gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: 8px; overflow: hidden; margin-top: 0.5rem; }
@media (min-width: 52rem) { .home .system { grid-template-columns: repeat(4, 1fr); } }
.home .system__cell { background: var(--navy); padding: 1.5rem 1.35rem; position: relative; }
.home .system__no { font-family: var(--font-mono); font-size: 0.72rem; color: var(--yellow); letter-spacing: 0.1em; }
.home .system__title { color: var(--on-dark); font-weight: 600; font-size: 1.05rem; margin-top: 0.6rem; }
.home .system__desc { color: var(--on-dark-muted); font-size: 0.86rem; line-height: 1.55; margin-top: 0.5rem; }
.home .system__cell:not(:last-child)::after {
  content: "\2192"; position: absolute; right: -0.6em; top: 1.5rem; z-index: 2;
  color: var(--yellow); font-family: var(--font-mono); display: none;
}
@media (min-width: 52rem) { .home .system__cell:not(:last-child)::after { display: block; } }

/* ======================================================================
 * SECTION 3 - Flagship interactive product demo (control room)
 * A single evolving scene. Progressive enhancement: without JS the tracker,
 * progress and controls are hidden and every scene + record row renders
 * stacked and readable; JS drives the stepped, one-state-at-a-time demo.
 * ==================================================================== */
.home .demo { margin-top: 0.5rem; }

/* Step tracker + progress + controls: interactive chrome, enhanced-only */
.home .demo__tracker, .home .demo__progress, .home .demo__controls { display: none; }
.home .demo[data-enhanced] .demo__tracker {
  display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  border-radius: 8px; overflow: hidden; list-style: none; padding: 0;
}
@media (min-width: 46rem) { .home .demo[data-enhanced] .demo__tracker { grid-template-columns: repeat(7, 1fr); } }
.home .demo__step {
  width: 100%; background: var(--paper-2); text-align: left; border: 0; cursor: pointer;
  padding: 0.7rem 0.85rem 0.8rem; border-top: 3px solid transparent;
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.home .demo__step:hover { background: #fff; }
.home .demo__step.is-active { background: #fff; border-top-color: var(--yellow); }
.home .demo__step.is-done { background: #fffdf2; }
.home .demo__step-n { font-family: var(--font-mono); font-size: 0.7rem; color: var(--blue); letter-spacing: 0.04em; }
.home .demo__step.is-done .demo__step-n::after { content: " \2713"; color: #0a7d33; }
.home .demo__step-l { display: block; font-weight: 600; color: var(--ink); font-size: 0.82rem; margin-top: 0.15rem; line-height: 1.15; }
.home .demo__step:not(.is-active) .demo__step-l { color: var(--ink-muted); }
.home .demo__step:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.home .demo[data-enhanced] .demo__progress { display: block; height: 3px; background: var(--rule); border-radius: 999px; margin-top: 1rem; overflow: hidden; }
.home .demo__progress-fill { display: block; height: 100%; width: 14.3%; background: var(--yellow); transition: width var(--motion-slow) var(--ease-emphasized); }

/* Instrument frame (dark) holding light worksheet cards */
.home .demo__frame {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  background: var(--navy); border: 1px solid var(--line-dark); border-radius: 14px;
  padding: clamp(1.1rem, 3vw, 1.75rem);
  display: grid; gap: clamp(1rem, 2.5vw, 1.5rem);
}
@media (min-width: 60rem) {
  .home .demo__frame { grid-template-columns: 15rem 1fr; grid-template-areas: "queue stage" "trail trail"; align-items: start; }
  .home .demo__queue { grid-area: queue; align-self: start; }
  .home .demo__stage { grid-area: stage; }
  .home .demo__trailwrap { grid-area: trail; }
}
.home .demo__queue { background: var(--card); border: 1px solid var(--rule-strong); border-radius: 10px; overflow: hidden; }
.home .demo__stage { min-width: 0; }

/* Bill Tracker queue */
.home .demo__queue-head { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 0.85rem; background: var(--paper-2); border-bottom: 1px solid var(--rule); font-weight: 700; color: var(--ink); font-size: 0.85rem; }
.home .demo__queue-tag { font-family: var(--font-mono); font-weight: 500; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.home .demo__queue-list { list-style: none; padding: 0; margin: 0; }
.home .qrow { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.5rem; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--rule); border-left: 3px solid transparent; }
.home .qrow:last-child { border-bottom: 0; }
.home .qrow--active { border-left-color: var(--yellow); background: #fffdf2; }
.home .qrow--active.is-approved { border-left-color: #0a7d33; }
.home .qrow__v { font-weight: 600; color: var(--ink); font-size: 0.85rem; }
.home .qrow__c { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-muted); grid-column: 1; }
.home .qrow__s { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blue); border: 1px solid var(--rule-strong); border-radius: 999px; padding: 1px 8px; height: -moz-fit-content; height: fit-content; white-space: nowrap; }
.home .qrow--active.is-approved .qrow__s, .home .qrow__s.is-approved { color: #0a7d33; border-color: #9ed3ab; background: #f0faf2; }
.home .qrow__s--muted { color: var(--ink-muted); }

/* Stage */
.home .demo__stage-head { min-height: 1.6rem; }
.home .demo__status { display: inline-block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); border: 1px solid rgba(255,218,0,0.28); border-radius: 999px; padding: 2px 10px; }
.home .demo__status.is-approved { color: #57e08b; border-color: rgba(87,224,139,0.4); }
.home .demo__title { color: var(--on-dark); font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.18; margin-top: 0.6rem; }
.home .demo__title:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; border-radius: 4px; }
.home .demo__copy { color: var(--on-dark-muted); font-size: 1rem; line-height: 1.55; margin-top: 0.6rem; max-width: 52ch; }
.home .demo__note { color: var(--on-dark-faint); font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.6; margin-top: 1rem; border-left: 2px solid var(--line-dark); padding-left: 0.8rem; max-width: 60ch; }
.home .demo__scene { margin-top: 1.1rem; }
.home .demo__cap { color: var(--on-dark-faint); font-size: 0.72rem; line-height: 1.5; margin-top: 0.75rem; }

/* Invoice record (rows appear as context is added) */
.home .demo__record { background: var(--card); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 0.35rem 1rem; }
.home .demo__rrow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); }
.home .demo__rrow:last-child { border-bottom: 0; }
.home .demo[data-enhanced] .demo__rrow { display: none; }
.home .demo[data-enhanced] .demo__rrow.is-shown { display: flex; }
.home .demo__rk { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-muted); }
.home .demo__rv { color: var(--ink); font-size: 0.9rem; font-weight: 500; text-align: right; }
.home .demo__pill { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 999px; padding: 2px 9px; border: 1px solid var(--rule-strong); }
.home .demo__pill--ok { color: #0a7d33; border-color: #9ed3ab; background: #f0faf2; }

/* Before / after financials (demo scene) */
.home .demo__ba { display: grid; gap: 0.85rem; }
@media (min-width: 30rem) { .home .demo__ba { grid-template-columns: 1fr 1fr; } }
.home .demo__bacard { background: var(--card); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 0.95rem 1rem; }
.home .demo__bacard--after { background: #fffdf2; border-color: #e8dd9a; }
.home .demo__batag { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-muted); }
.home .demo__barow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px solid var(--rule); }
.home .demo__barow:last-child { border-bottom: 0; }
.home .demo__barow span { font-size: 0.82rem; color: var(--ink-body); }
.home .demo__barow b { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); font-weight: 400; letter-spacing: 0.01em; }
.home .demo__rem { color: var(--blue); }

/* Job-cost levels (demo scene) */
.home .demo__levels { list-style: none; padding: 0; margin: 0; background: var(--card); border: 1px solid var(--rule-strong); border-radius: 10px; overflow: hidden; }
.home .demo__level { display: grid; grid-template-columns: 2rem 8rem 1fr; gap: 0.5rem 0.75rem; align-items: baseline; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--rule); }
.home .demo__level:last-child { border-bottom: 0; }
.home .demo__level--on { background: #fffdf2; box-shadow: inset 3px 0 0 var(--yellow); }
.home .demo__ln { font-family: var(--font-mono); font-size: 0.68rem; color: var(--blue); }
.home .demo__lt { font-weight: 600; color: var(--ink); font-size: 0.85rem; }
/* These are sentences describing what each level of the job cost view holds,
   so they sit on the note floor rather than at label size. */
.home .demo__ld { color: var(--ink-body); font-size: 0.85rem; line-height: 1.55; }
@media (max-width: 30rem) { .home .demo__level { grid-template-columns: 1.6rem 1fr; } .home .demo__ld { grid-column: 2; } }

/* Accounting boundary (demo scene) */
.home .demo__boundary { display: grid; gap: 0.7rem; }
@media (min-width: 34rem) { .home .demo__boundary { grid-template-columns: 1fr auto 1fr; align-items: center; } }
.home .demo__bnode { background: var(--card); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 0.95rem 1rem; }
.home .demo__bnode--qb { background: var(--paper-2); }
.home .demo__bcap { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.home .demo__bname { display: block; font-weight: 700; color: var(--ink); font-size: 1.1rem; margin-top: 0.3rem; }
.home .demo__bname .tm { font-size: 0.5em; vertical-align: super; color: var(--ink-muted); font-weight: 400; }
.home .demo__bd { display: block; color: var(--ink-body); font-size: 0.8rem; margin-top: 0.4rem; line-height: 1.45; }
.home .demo__blink { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2rem; padding: 0.3rem; }
.home .demo__barrow { font-size: 1.5rem; line-height: 1; color: var(--yellow); }
@media (max-width: 33.99rem) { .home .demo__barrow { transform: rotate(90deg); } }
.home .demo__blabel { font-family: var(--font-mono); font-size: 0.62rem; color: var(--on-dark-faint); max-width: 11rem; }

/* Activity trail */
.home .demo__trailwrap { border-top: 1px solid var(--line-dark); padding-top: 0.9rem; }
.home .demo__trail-head { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-faint); }
.home .demo__trail { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.35rem; }
.home .demo__trail-item { color: var(--on-dark-muted); font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.45; padding-left: 1rem; position: relative; }
.home .demo__trail-item::before { content: "\2013"; position: absolute; left: 0; color: var(--yellow); }

/* Controls */
.home .demo[data-enhanced] .demo__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.25rem; }
.home .demo__count { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-muted); letter-spacing: 0.06em; }
.home .demo__controls-sp { flex: 1 1 auto; }
.home .demo__controls .btn { padding-inline: 1.05rem; }
.home .demo__controls .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.home .demo__play[aria-pressed="true"] { border-color: var(--navy); color: var(--navy); }
@media (max-width: 40rem) {
  .home .demo__controls-sp { display: none; }
  .home .demo__controls .demo__back, .home .demo__controls .demo__next { flex: 1 1 40%; }
  .home .demo__count { order: -1; width: 100%; text-align: center; }
}

/* Preserved: before/after ledger cards shared with the Budget vs Actual page */
.home .ba { background: var(--card); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 1.1rem 1.15rem; }
.home .ba--after { background: #fffdf2; border-color: #e8dd9a; }
.home .ba__tag { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.home .ba__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.home .ba__row:last-child { border-bottom: 0; }
.home .ba__k { font-size: 0.82rem; color: var(--ink-body); }
.home .ba__val { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); letter-spacing: 0.01em; }
.home .ba__val--rem { color: var(--blue); }

/* ======================================================================
 * SECTION 4 - Evaluate / proof (dark band, qualitative, no fabricated data)
 * ==================================================================== */
.home .evalgrid { display: grid; gap: 1.5rem; }
@media (min-width: 52rem) { .home .evalgrid { grid-template-columns: repeat(3, 1fr); } }
.home .evalitem { border-top: 2px solid var(--yellow); padding-top: 1rem; }
.home .evalitem__no { font-family: var(--font-mono); font-size: 0.75rem; color: var(--yellow); }
.home .evalitem__t { color: var(--on-dark); font-weight: 600; margin-top: 0.5rem; font-size: 1.05rem; }
.home .evalitem__d { color: var(--on-dark-muted); font-size: 0.9rem; margin-top: 0.5rem; line-height: 1.55; }

/* ======================================================================
 * SECTION 5 - Platform breadth / difference (comparison ledger)
 * ==================================================================== */
.home .compare { display: grid; gap: 1px; background: var(--rule-strong); border: 1px solid var(--rule-strong); border-radius: 8px; overflow: hidden; }
@media (min-width: 48rem) { .home .compare { grid-template-columns: 1fr 1fr; } }
.home .compare__col { background: var(--card); padding: 1.75rem 1.6rem; }
.home .compare__col--crux { background: #fffdf2; }
.home .compare__tag { font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.home .compare__col--crux .compare__tag { color: var(--navy); }
.home .compare__h { font-weight: 600; color: var(--ink); font-size: 1.2rem; margin-top: 0.5rem; }
.home .compare__list { margin-top: 1.1rem; display: grid; gap: 0.7rem; }
.home .compare__list li { display: grid; grid-template-columns: 1.2rem 1fr; gap: 0.6rem; color: var(--ink-body); font-size: 0.92rem; line-height: 1.5; }
.home .compare__list li::before { content: "\2013"; color: var(--ink-muted); font-family: var(--font-mono); }
.home .compare__col--crux .compare__list li::before { content: "\2713"; color: var(--navy); font-weight: 700; }

/* ======================================================================
 * SECTION 6 - QuickBooks integration boundary
 * ==================================================================== */
.home .qb { display: grid; gap: 1rem; align-items: stretch; }
@media (min-width: 56rem) { .home .qb { grid-template-columns: 1fr auto 1fr; align-items: center; } }
.home .qb__side { background: var(--card); border: 1px solid var(--rule-strong); border-radius: 8px; padding: 1.5rem 1.5rem; }
.home .qb__side--qb { background: var(--paper-2); }
.home .qb__cap { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.home .qb__name { font-weight: 600; color: var(--ink); font-size: 1.25rem; margin-top: 0.4rem; }
.home .qb__name .tm { font-size: 0.6em; vertical-align: super; color: var(--ink-muted); font-weight: 400; }
.home .qb__list { margin-top: 0.9rem; display: grid; gap: 0.5rem; font-size: 0.9rem; color: var(--ink-body); }
.home .qb__list li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.5rem; }
.home .qb__list li::before { content: ""; width: 6px; height: 6px; margin-top: 0.5em; border-radius: 1px; background: var(--blue); }
.home .qb__arrow {
  justify-self: center; align-self: center; text-align: center;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
}
.home .qb__arrow b { display: block; font-size: 1.6rem; color: var(--yellow); line-height: 1; }
.home .qb__disclaimer { margin-top: 1.5rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-muted); max-width: 60ch; line-height: 1.6; }
.home .sec--dark .qb__side { background: rgba(255,255,255,0.04); border-color: var(--line-dark); }
.home .sec--dark .qb__side--qb { background: rgba(255,255,255,0.02); }
.home .sec--dark .qb__cap { color: var(--on-dark-faint); }
.home .sec--dark .qb__name { color: var(--on-dark); }
.home .sec--dark .qb__list { color: var(--on-dark-muted); }
.home .sec--dark .qb__disclaimer { color: var(--on-dark-faint); }

/* ======================================================================
 * SECTION 7 - Trust / company character (editorial whitespace statement)
 * ==================================================================== */
.home .statement { max-width: 34ch; }
.home .statement .display { color: var(--ink); }
.home .statement__body { margin-top: 1.5rem; max-width: 52ch; font-size: 1.1rem; }
.home .who-meta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; }
.home .who-meta div { border-left: 2px solid var(--yellow); padding-left: 0.9rem; }
.home .who-meta dt { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.home .who-meta dd { color: var(--ink); font-weight: 600; margin-top: 0.2rem; }

/* ======================================================================
 * SECTION 8 - Final CTA (calm dark closing)
 * ==================================================================== */
.home .close { text-align: left; }
.home .close .display { color: var(--on-dark); max-width: 20ch; }
.home .close p { color: var(--on-dark-muted); margin-top: 1rem; }

/* ======================================================================
 * Footer
 * ==================================================================== */
.home .footer { background: var(--navy); color: var(--on-dark-muted); border-top: 1px solid var(--line-dark); }
.home .footer .brand__logo { height: 30px; }
.home .footer__heading { color: var(--yellow); }
.home .footer__links a { color: var(--on-dark-muted); }
.home .footer__links a:hover { color: var(--on-dark); }
.home .footer .muted { color: var(--on-dark-faint); }
.home .footer__legal { border-top-color: var(--line-dark); color: var(--on-dark-faint); }

/* ======================================================================
 * Split layout helper
 * ==================================================================== */
.home .split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 60rem) { .home .split { grid-template-columns: 1fr 1fr; } .home .split--textwide { grid-template-columns: 1.15fr 0.85fr; } }
.home .split--flip > .split__media { order: -1; }
@media (max-width: 59.99rem) { .home .split--flip > .split__media { order: 0; } }

/* ======================================================================
 * A.9 - Drafting-grid field (removed)
 * The 42px square field behind the capability heroes and workflow sections
 * was removed in the final production pass. The class stays as the
 * positioning/stacking hook those sections were authored against.
 * ==================================================================== */
.home .bp-field { position: relative; isolation: isolate; }
.home .bp-field > * { position: relative; z-index: 1; }

/* ======================================================================
 * A.9 - Hero product-proof composition (layered real screenshots)
 * ==================================================================== */
.home .hero-proof { position: relative; max-width: 40rem; width: 100%; padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.home .shot { border-radius: 10px; overflow: hidden; border: 1px solid var(--rule-strong); background: var(--card); box-shadow: 0 24px 60px rgba(20,26,60,0.18); }
.home .shot img { display: block; width: 100%; height: auto; }
.home .shot--primary { width: 86%; }
.home .shot--inset { position: absolute; right: 0; bottom: 0; width: 56%; box-shadow: 0 20px 48px rgba(20,26,60,0.26); }
.home .shot-cap { margin-top: 1rem; font-size: 0.75rem; color: var(--ink-muted); }
.home .hero-proof .shot-cap { position: absolute; bottom: 0; left: 0; margin: 0; }
@media (max-width: 47.99rem) {
  .home .hero-proof { padding-bottom: 0; }
  .home .shot--primary { width: 100%; }
  .home .shot--inset { position: static; width: 100%; margin-top: 0.9rem; }
  .home .hero-proof .shot-cap { position: static; margin-top: 0.9rem; }
}

/* ======================================================================
 * A.9 - Role selector (Owner / Controller / Project Manager)
 * Progressive enhancement: without JS all panels stack and are readable;
 * JS collapses to a tab interface.
 * ==================================================================== */
.home .sec--roles { background: var(--paper); }
.home .roles__tabs { display: none; }
.home .roles[data-enhanced] .roles__tabs {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  border-bottom: 1px solid var(--rule); margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.home .roles__tab {
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  color: var(--ink-muted); padding: 0.7rem 1rem; background: transparent;
  border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  border-radius: 8px 8px 0 0;
}
.home .roles__tab:hover { color: var(--ink); }
.home .roles__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--yellow); }
.home .rolepanel + .rolepanel { margin-top: clamp(2.5rem, 6vw, 4rem); }
.home .roles[data-enhanced] .rolepanel + .rolepanel { margin-top: 0; }
.home .roles[data-enhanced] .rolepanel[hidden] { display: none; }
.home .rolepanel__grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 60rem) { .home .rolepanel__grid { grid-template-columns: 0.92fr 1.08fr; } }
.home .rolepanel--flip .rolepanel__media { order: -1; }
@media (max-width: 59.99rem) { .home .rolepanel--flip .rolepanel__media { order: 0; } }
.home .rolepanel__role { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--blue); }
.home .rolepanel__q { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.35rem, 2.3vw, 1.95rem); color: var(--ink); line-height: 1.15; margin-top: 0.6rem; }
.home .rolepanel__outcome { margin-top: 1rem; font-size: 1.08rem; line-height: 1.55; color: var(--ink-body); }
.home .rolepanel__benefits { margin-top: 1.25rem; display: grid; gap: 0.6rem; }
.home .rolepanel__benefits li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.55rem; color: var(--ink-body); font-size: 0.98rem; line-height: 1.5; }
.home .rolepanel__benefits li::before { content: ""; width: 7px; height: 7px; margin-top: 0.5em; background: var(--yellow); border-radius: 1px; }
.home .rolepanel .btn { margin-top: 1.75rem; }
.home .rolepanel__media { min-width: 0; }
.home .rolepanel__media .shot { box-shadow: 0 20px 50px rgba(20,26,60,0.16); }

/* ======================================================================
 * A.9 - QuickBooks handoff (Crux left / handoff / QuickBooks right)
 * ==================================================================== */
.home .qbflow { display: grid; gap: 1rem; align-items: stretch; }
@media (min-width: 56rem) { .home .qbflow { grid-template-columns: 1fr auto 1fr; align-items: stretch; } }
.home .qbflow__side { background: var(--paper-2); border: 1px solid var(--rule-strong); border-radius: 10px; padding: clamp(1.4rem, 3vw, 2rem); display: flex; flex-direction: column; }
.home .qbflow__side--crux { background: #fffdf2; }
.home .qbflow__cap { font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.home .qbflow__name { font-family: var(--font-body); font-weight: 700; color: var(--ink); font-size: 1.5rem; margin-top: 0.5rem; letter-spacing: -0.01em; }
.home .qb-logo { margin-top: 0.5rem; display: flex; align-items: center; min-height: 2.2rem; }
.home .qb-logo__img { height: 30px; width: auto; display: block; }
.home .qb-logo__text { font-family: var(--font-body); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; color: #2CA01C; }
.home .qb-logo__text .tm { font-size: 0.5em; vertical-align: super; color: var(--ink-muted); font-weight: 400; }
.home .qbflow__list { margin-top: 1rem; display: grid; gap: 0.55rem; font-size: 0.95rem; color: var(--ink-body); }
.home .qbflow__list li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.5rem; }
.home .qbflow__list li::before { content: ""; width: 6px; height: 6px; margin-top: 0.55em; border-radius: 1px; background: var(--blue); }
.home .qbflow__side--qb .qbflow__list li::before { background: #2CA01C; }
.home .qbflow__link { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.4rem; padding: 0.5rem; }
.home .qbflow__arrow { font-size: 1.9rem; line-height: 1; color: var(--blue); }
@media (max-width: 55.99rem) { .home .qbflow__arrow { transform: rotate(90deg); } }
.home .qbflow__linklabel { font-family: var(--font-body); font-size: 0.78rem; color: var(--ink-muted); max-width: 12rem; }
.home .qbflow__disclaimer { margin-top: 1.25rem; font-size: 0.72rem; line-height: 1.5; color: var(--ink-muted); max-width: 62ch; }

/* ======================================================================
 * Focus + reduced motion (a11y preserved)
 * ==================================================================== */
.home .sec--dark :focus-visible, .home .masthead :focus-visible, .home .footer :focus-visible, .home .close :focus-visible { outline-color: var(--yellow); }
.home .roles__tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .home .menu__caret, .home .mobilenav__caret, .home .btn { transition: none; }
}

/* ======================================================================
 * Cross-experience journey links (contextual, descriptive)
 * ==================================================================== */
.home .lab-journey { margin-top: 1.1rem; }
.home .asst-link { color: var(--navy); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--yellow); padding-bottom: 1px; }
.home .asst-link:hover { color: var(--blue); }
.home .sec--dark .asst-link { color: var(--on-dark); }
.home .sec--dark .asst-link:hover { color: var(--yellow); }

/* ======================================================================
 * Segmented selector (.segbar/.segbtn) - shared toggle group (selector.js)
 * Moved here from platform.css so every body.home page (incl. the homepage)
 * can use it. Hidden without JS so the content below stands on its own.
 * ==================================================================== */
.home .segbar { display: none; }
.home [data-selector][data-enhanced] .segbar {
  display: inline-flex; flex-wrap: wrap; gap: 0.35rem;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 999px; padding: 0.3rem;
  margin-bottom: 1.5rem;
}
.home .sec--dark .segbar { background: rgba(255,255,255,0.06); border-color: var(--line-dark); }
.home .segbtn {
  font-family: var(--font-body); font-weight: 600; font-size: 0.9rem;
  color: var(--ink-muted); background: transparent; border: 0; cursor: pointer;
  padding: 0.5rem 1rem; border-radius: 999px;
  transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.home .segbtn:hover { color: var(--ink); }
.home .segbtn[aria-pressed="true"] { color: var(--navy); background: var(--card); box-shadow: 0 2px 8px rgba(20,26,60,0.10); }
.home .sec--dark .segbtn { color: var(--on-dark-muted); }
.home .sec--dark .segbtn[aria-pressed="true"] { color: var(--navy); background: var(--yellow); }
.home .segbtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ======================================================================
 * Outcomes "the shift" - before / with-Crux comparison (selector.js swap)
 * ==================================================================== */
/* THE BEFORE / AFTER SWEEP
   Was a two-button toggle that swapped one six-row panel for another. Swapping
   all six lines at once is not a comparison: the reader has to hold the
   previous six in memory to see what changed, and there are only two states,
   so there is nothing to explore.
   The sweep moves the six facts across one at a time. At any position the
   reader sees which items have moved and which have not, with the boundary
   between them visible. The control is a native range input, so keyboard,
   touch and screen-reader support come from the platform rather than from
   rebuilt behaviour. */
.home .sweep {
  border: 1px solid var(--rule-strong); border-radius: 12px;
  background: var(--card); padding: clamp(1.25rem, 3vw, 1.9rem);
}
.home .sweep__label {
  display: block; font-family: var(--font-body); font-weight: 600;
  font-size: 0.9375rem; color: var(--ink); margin-bottom: 0.9rem;
}
.home .sweep__track { display: grid; grid-template-columns: auto 1fr auto; gap: 0.85rem; align-items: center; }
.home .sweep__end {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted); white-space: nowrap;
}
.home .sweep__end--after { color: var(--navy); }
/* Height, not min-height: the control box grows to the 44px pointer/touch
   target the build spec sets, while the UA still draws the track and thumb at
   their own size, centred. Same convention as the estimator ranges. */
.home .sweep__range { width: 100%; accent-color: var(--navy); cursor: pointer; height: var(--control-md); }
.home .sweep__range:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
/* The count is the control's feedback. It has to be readable at a glance
   while the thumb is moving, so it sits on the note floor, not at label size. */
.home .sweep__state {
  margin: 0.7rem 0 0; font-family: var(--font-mono); font-size: 0.85rem;
  letter-spacing: 0.03em; color: var(--ink-body);
}
/* Without JS the range cannot drive anything, so it is removed from the page
   entirely and every row shows both values. That is more content than the old
   no-JS state, which rendered two separate six-row panels to cross-reference. */
.home .sweep:not([data-enhanced]) .sweep__control { display: none; }

.home .sweep__grid { margin-top: 1.4rem; display: grid; gap: 0.15rem; }
.home .sweep__v { display: grid; gap: 0.3rem; }
/* Holds the 11.5px micro-label floor rather than the 9.9px it started at.
   These two words are what tell the reader which side of the comparison they
   are looking at, so they are the last thing that should be shrunk. */
.home .sweep__vk {
  display: inline-block; margin-right: 0.5rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted); opacity: 0.9;
}
.home .sweep__before, .home .sweep__after { display: block; }
.home .sweep__after { color: var(--ink); }
.home .sweep__after .sweep__vk { color: var(--navy); opacity: 1; }

/* Enhanced: one value per row at a time, and the row that has moved carries
   the yellow rule that marks Crux control elsewhere on the page. */
.home .sweep[data-enhanced] .sweep__row[data-on="false"] .sweep__after { display: none; }
.home .sweep[data-enhanced] .sweep__row[data-on="true"]  .sweep__before { display: none; }
.home .sweep[data-enhanced] .sweep__row { cursor: pointer; padding-left: 0.85rem; border-left: 2px solid transparent; }
.home .sweep[data-enhanced] .sweep__row[data-on="true"] { border-left-color: var(--yellow); }
@media (hover: hover) {
  .home .sweep[data-enhanced] .sweep__row:hover { background: var(--paper-2); }
}
@media (prefers-reduced-motion: no-preference) {
  .home .sweep[data-enhanced] .sweep__row { transition: border-left-color 180ms ease, background-color 180ms ease; }
}
.home .shift__row { display: grid; grid-template-columns: 11rem 1fr; gap: 0.4rem 1.25rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.home .shift__row:last-child { border-bottom: 0; }
.home .shift__row dt { font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.02em; color: var(--ink); }
.home .shift__row dd { color: var(--ink-body); font-size: 0.95rem; line-height: 1.5; }
@media (max-width: 32rem) { .home .shift__row { grid-template-columns: 1fr; gap: 0.1rem; } }

/* ======================================================================
 * ROI instrument (lab.js data-lab="roi") - dark control-room panel
 * ==================================================================== */
.home .roi__grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 52rem) { .home .roi__grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.home .roi__inputs { display: grid; gap: 1.4rem; align-content: start; }
.home .roi__field label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; color: var(--on-dark); margin-bottom: 0.5rem; }
.home .roi__field label b { font-family: var(--font-mono); font-weight: 500; color: var(--yellow); font-size: 1rem; }
.home .roi__field input[type="range"] { width: 100%; accent-color: var(--yellow); height: 1.5rem; cursor: pointer; }
.home .roi__field input[type="range"]:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; border-radius: 4px; }
.home .roi__out { background: rgba(255,255,255,0.04); border: 1px solid var(--line-dark); border-radius: 12px; padding: 1.25rem 1.4rem; display: grid; gap: 0.4rem; align-content: center; }
.home .roi__metric { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line-dark); }
.home .roi__metric:last-child { border-bottom: 0; }
.home .roi__k { color: var(--on-dark-muted); font-size: 0.88rem; max-width: 18ch; }
.home .roi__v { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--on-dark); letter-spacing: 0.01em; }
.home .roi__v--accent { color: var(--yellow); }
.home .roi__note { margin-top: 1.25rem; font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.6; color: var(--on-dark-faint); max-width: 68ch; }

/* Journey links inside the dark demo instrument frame */
.home .demo .lab-journey { margin-top: 0.85rem; }
.home .demo .asst-link { color: var(--yellow); border-bottom-color: rgba(255,218,0,0.5); }
.home .demo .asst-link:hover { color: #fff; }

/* ======================================================================
 * Homepage refinement wave
 * ==================================================================== */

/* #1 Hero instrument peek (secondary to headline + primary CTA) */
.home .hero__media { max-width: 40rem; }
.home .hero-peek { width: 100%; max-width: 30rem; background: var(--card); border: 1px solid var(--rule-strong); border-radius: 10px; box-shadow: 0 12px 32px rgba(20,26,60,0.10); padding: 0.75rem 0.9rem 0.85rem; margin-top: 0.25rem; }
.home .hero-peek__head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: var(--ink); font-size: 0.8rem; }
.home .hero-peek__tag { font-family: var(--font-mono); font-weight: 500; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.home .hero-peek__row { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.5rem; align-items: center; margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid var(--rule); }
.home .hero-peek__v { font-weight: 600; color: var(--ink); font-size: 0.85rem; }
.home .hero-peek__c { grid-column: 1; font-family: var(--font-mono); font-size: 0.64rem; color: var(--ink-muted); }
.home .hero-peek__s { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blue); border: 1px solid var(--rule-strong); border-radius: 999px; padding: 1px 9px; white-space: nowrap; transition: color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard); }
.home .hero-peek__s.is-approved { color: #0a7d33; border-color: #9ed3ab; background: #f0faf2; }
.home .hero-peek__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.7rem; flex-wrap: wrap; }
.home .hero-peek__btn { display: none; font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; color: var(--navy); background: transparent; border: 1.5px solid var(--rule-strong); border-radius: 8px; padding: 0.4rem 0.8rem; cursor: pointer; transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.home .hero-peek[data-enhanced] .hero-peek__btn { display: inline-flex; }
.home .hero-peek__btn:hover { border-color: var(--navy); }
.home .hero-peek__btn[aria-pressed="true"] { background: #f0faf2; border-color: #9ed3ab; color: #0a7d33; }
.home .hero-peek__link { font-size: 0.8rem; }
@media (prefers-reduced-motion: reduce) { .home .hero-peek__s { transition: none; } }

/* #6 Arrow nudge on descriptive journey links (decorative only; not on solid CTAs) */
.home .asst-link span[aria-hidden="true"], .home .arw { display: inline-block; transition: transform var(--motion-base) var(--ease-standard); }
@media (hover: hover) {
  .home .asst-link:hover span[aria-hidden="true"], .home .asst-link:hover .arw { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .home .asst-link span[aria-hidden="true"], .home .arw { transition: none; }
  .home .asst-link:hover span[aria-hidden="true"], .home .asst-link:hover .arw { transform: none; }
}

/* #4 Scattered Intake hierarchy — distinguish sources from resulting problems */
.home .intake-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 0.75rem; display: flex; align-items: center; gap: 0.6rem; }
.home .intake-label::before { content: ""; width: 18px; height: 2px; background: var(--blue); border-radius: 1px; }
.home .intake-label--result { margin-top: clamp(2rem, 4vw, 2.75rem); }
.home .intake-label--result::before { background: var(--yellow); }

/* #5 System entry-point emphasis (invoice intake + approval is where work enters) */
.home .system__cell--entry { box-shadow: inset 3px 0 0 var(--yellow); }
@media (min-width: 52rem) { .home .system__cell--entry { box-shadow: inset 0 3px 0 var(--yellow); } }
.home .system__entry { display: inline-block; margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); background: var(--yellow); border-radius: 999px; padding: 1px 8px; }

/* #7 One-shot settle on the demo's Approved status (runs once, never loops) */
@keyframes demoSettle { 0% { transform: scale(1); } 38% { transform: scale(1.14); } 100% { transform: scale(1); } }
.home .demo__status.is-settling { animation: demoSettle 460ms var(--ease-emphasized); }
@media (prefers-reduced-motion: reduce) { .home .demo__status.is-settling { animation: none; } }

/* #8 Persona active-tab clarity (stronger selected state, still restrained) */
.home .roles[data-enhanced] .roles__tab[aria-selected="true"] { background: var(--card); box-shadow: 0 6px 16px rgba(20,26,60,0.06); }

/* #9 Tonal separation between the ROI (dark) and the final CTA (dark) */
.home .close { border-top: 1px solid rgba(255,218,0,0.16); }

/* #2 Ease the inset overlap in the 1024-1200 range so the layered shots stay clean */
@media (min-width: 60rem) and (max-width: 75rem) { .home .shot--inset { width: 50%; } }

/* #3 Demo interaction affordance: instruction (enhanced-only) + hover cue on steps
 *
 * This rule used to also set font-size, font-family, letter-spacing and colour.
 * At (0,4,0) it silently defeated the legibility floor in tower.css section 21,
 * which sits at (0,2,0), so the one sentence that tells a visitor the workflow
 * is steppable rendered at 11.52px muted mono whenever JavaScript was enabled.
 * The floor's border and padding applied and its size did not, which is why the
 * defect survived a source-level review of tower.css.
 *
 * Its only job is to reveal the hint once the demo is enhanced. It now does
 * only that, and the note-floor rule owns the typography. */
.home .demo__hint { display: none; }
.home .demo[data-enhanced] .demo__hint { display: block; }
.home .demo__step { cursor: pointer; }
@media (hover: hover) { .home .demo__step:not(.is-active):hover .demo__step-l { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } }

/* ===== Pre-launch content wave additions ===== */

/* Operational-impact estimator additions (dark section) */
.home .roi__formula { margin: 0.1rem 0 0.2rem; font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.5; color: var(--yellow); background: rgba(255,218,0,0.06); border: 1px solid rgba(255,218,0,0.18); border-radius: 6px; padding: 0.6rem 0.75rem; }
.home .roi__field--optional { border-top: 1px solid var(--line-dark); padding-top: 1.1rem; margin-top: 0.2rem; }
.home .roi__hint { display: block; margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.5; color: var(--on-dark-faint); }
.home .roi__metric--soft .roi__v { font-size: clamp(1.15rem, 2.4vw, 1.55rem); color: var(--on-dark-muted); }
.home .roi__metric--soft .roi__k { color: var(--on-dark-faint); }

/* What changes for your team (human outcome, light section) */
.home .team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.75rem; }
.home .team__card { background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--yellow); border-radius: var(--radius-md); padding: 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; }
.home .team__role { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.home .team__outcome { font-size: 1.02rem; line-height: 1.5; color: var(--ink); margin: 0; font-weight: 500; }
.home .team__from { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.55; color: var(--ink-muted); margin: 0; }
.home .team__sum { margin-top: 1.4rem; font-size: 1.05rem; line-height: 1.55; color: var(--ink-body); max-width: 62ch; border-left: 3px solid var(--yellow); padding-left: 1rem; }
@media (max-width: 62rem) { .home .team { grid-template-columns: 1fr; max-width: 34rem; } }

/* Restrained homepage paths to platform + pricing (dark close section) */
.home .close__aux { margin-top: 1.4rem; font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.02em; }
.home .close__aux a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.home .close__aux a:hover { color: var(--yellow); }
.home .close__dot { color: var(--on-dark-faint); margin: 0 0.5rem; }