/* Page-scoped styles extracted from how-lucy-works.html. */

/* ============ How Lucy Works hub - page-scoped styles ============
   Shared components (.band, .section-head, .eyebrow, .lede, .prose, .card,
   .faq, .diagram*, .stage, .chip) come from site.css. Only page-specific
   motifs are defined here: the Bridge chain, the Coaching Loop circle, the
   Evolutionary Framework strip, the three flywheels, the dashboard embed. */

/* ----- Section 0: intro ----- */
.hlw-intro { padding-top: var(--s-7); }
.hlw-intro h1 { max-width: 20ch; margin-bottom: var(--s-5); }
.hlw-mustland { max-width: 40ch; }
.hlw-naming {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--ink-soft);
  max-width: 60ch;
  margin-bottom: var(--s-3);
}
.hlw-frame3 { max-width: 52ch; color: var(--ink-muted); }

/* ----- shared: arrowed section link (kept for phase-2 deep-dive links) ----- */
.hlw-link { font-weight: var(--weight-semibold); }
.hlw-prose { max-width: var(--measure-prose); }

/* ----- Section 1: the Bridge chain (code-native, real DOM text) -----
   Horizontal chain on wide screens; reflows to a vertical stack at mobile
   width, arrows rotating from rightward to downward. */
.hlw-chain-figure { margin: var(--s-6) 0 var(--s-6); }
.hlw-chain {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: stretch;
}
.hlw-link-node {
  background: var(--blue-soft);
  color: var(--ink);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  text-align: center;
}
.hlw-chain-arrow {
  align-self: center;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: var(--fs-20);
  transform: rotate(90deg);
  flex-shrink: 0;
}
.hlw-chain-figure figcaption {
  font-size: var(--fs-13);
  color: var(--ink-soft);
  margin-top: var(--s-3);
}
@media (min-width: 900px) {
  .hlw-chain { flex-direction: row; align-items: stretch; }
  .hlw-link-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  .hlw-chain-arrow { transform: none; }
}

/* ----- Section 2: the Coaching Loop (circle of five verbs) -----
   Desktop (>=900px): five verb pills at pentagon points around an SVG ring
   whose five arrowheads show the clockwise loop; a mono center label names
   the motif. Below 900px it REFLOWS to a stacked, arrowed sequence that
   loops back (real DOM text throughout; ring + arrows are decorative). */
.hlw-loop-figure { margin: var(--s-6) 0 var(--s-6); }
.hlw-loop {
  position: relative;
  width: min(520px, 100%);
  margin: 0 auto;
}
.hlw-loop-ring { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.hlw-loop-ring circle { fill: none; stroke: var(--blue-soft); stroke-width: 2.4; }
.hlw-loop-ring polygon { fill: var(--blue); }
.hlw-loop-center { display: none; }

.hlw-loop-verbs { list-style: none; margin: 0; padding: 0; }
.hlw-verb {
  background: var(--bg);
  border: 1.5px solid var(--blue);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: var(--s-3) var(--s-4);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-14);
  line-height: var(--lh-snug);
  text-align: center;
}
.hlw-verb:not(:last-child)::after {
  content: "\2193";
  display: block;
  text-align: center;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: var(--fs-18);
  line-height: 1;
  margin: var(--s-2) 0;
}
.hlw-loop-return {
  display: block;
  text-align: center;
  color: var(--blue);
  font-size: var(--fs-24);
  line-height: 1;
  margin: var(--s-2) 0 0;
}
@media (min-width: 900px) {
  .hlw-loop { aspect-ratio: 1 / 1; }
  .hlw-loop-ring { display: block; }
  .hlw-loop-center {
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ink-soft);
    text-align: center;
    max-width: 34%;
  }
  .hlw-verb {
    position: absolute;
    width: 148px;
    transform: translate(-50%, -50%);
  }
  .hlw-verb:not(:last-child)::after { display: none; }
  .hlw-verb:nth-child(1) { top: 14%;   left: 50%;   }
  .hlw-verb:nth-child(2) { top: 38.9%; left: 84.2%; }
  .hlw-verb:nth-child(3) { top: 79.1%; left: 71.2%; }
  .hlw-verb:nth-child(4) { top: 79.1%; left: 28.8%; }
  .hlw-verb:nth-child(5) { top: 38.9%; left: 15.8%; }
  .hlw-loop-return { display: none; }
}

/* Coaching Loop detail cards (verbatim verb title + text) */
.hlw-loop-cards {
  list-style: none;
  counter-reset: verbcard;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 720px) { .hlw-loop-cards { grid-template-columns: repeat(2, 1fr); } }
.hlw-loop-card {
  background: var(--bg);
  border: 1px solid var(--line-hair);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-card);
}
.hlw-loop-card h3 {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-size: var(--fs-20);
  margin-bottom: var(--s-3);
}
.hlw-loop-card h3::before {
  counter-increment: verbcard;
  content: counter(verbcard);
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: var(--weight-semibold);
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: var(--r-pill);
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hlw-loop-card p { margin: 0; }
.hlw-loop-support { margin-top: var(--s-6); }

/* ----- Section 3: the Evolutionary Framework five-stage strip -----
   Five numbered stage cells, each carrying its proof-signal fragment.
   Horizontal on wide screens (an order, arrows point forward); reflows to a
   stacked column at mobile width, arrows rotating downward. */
.hlw-strip {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: var(--s-6) 0 0;
  list-style: none;
  padding: 0;
  counter-reset: stage;
}
.hlw-stage {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}
.hlw-stage .hlw-stage-n {
  counter-increment: stage;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: var(--weight-semibold);
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: var(--r-pill);
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hlw-stage .hlw-stage-n::before { content: counter(stage); }
.hlw-stage .hlw-stage-name {
  font-weight: var(--weight-semibold);
  font-size: var(--fs-18);
  color: var(--ink);
  line-height: var(--lh-snug);
}
.hlw-stage .hlw-stage-signal {
  font-size: var(--fs-14);
  color: var(--ink-muted);
  line-height: var(--lh-default);
}
.hlw-strip-arrow {
  align-self: center;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: var(--fs-20);
  transform: rotate(90deg);
  flex-shrink: 0;
}
@media (min-width: 900px) {
  .hlw-strip { flex-direction: row; align-items: stretch; }
  .hlw-strip-arrow { transform: none; align-self: center; }
}

/* ----- Section 4: Executive Dashboard concept-frame embed -----
   Frame internals + embed wrapper copied verbatim from business.html.j2's
   embed (Marketing/Website/Contracts_Wireframes/dashboard-concept/dashboard-frame-embed.css lineage):
   concept chip stays INSIDE the frame, modeled caption stays OUTSIDE, the
   frame is inert so it reads as an exhibit, never an app. Standalone :root is
   dropped; internal headings are demoted to .dash-h1 / .panel-h so the page's
   real heading hierarchy is not polluted. Contract visual-label gap resolved
   as an honest "Design concept, planned" exhibit, never a mocked screen. */
.dash-concept-figure {
  margin: var(--s-6) auto 0;
  max-width: var(--container);
  padding: 0;
  --shadow-window: 0 30px 80px -32px rgba(11, 15, 42, 0.32), 0 6px 18px -10px rgba(11, 15, 42, 0.18);
}
.dash-concept-figure .dash-window { pointer-events: none; user-select: none; }
.dash-concept-figure figcaption {
  margin-top: var(--s-4);
  font-size: var(--fs-13);
  line-height: var(--lh-default);
  color: var(--ink-soft);
  text-align: center;
}
.dash-window {
  max-width: 1040px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid rgba(11, 15, 42, 0.10);
  border-radius: 14px;
  box-shadow: var(--shadow-window);
  overflow: hidden;
}
.dash-titlebar {
  height: 40px;
  background: #FAFAF6;
  border-bottom: 1px solid rgba(11, 15, 42, 0.06);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-4);
}
.dash-titlebar .traffic { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.dash-titlebar .traffic span { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.dash-titlebar .traffic .red { background: #F5685C; }
.dash-titlebar .traffic .yellow { background: #F5BD3F; }
.dash-titlebar .traffic .green { background: #62C654; }
.dash-titlebar .address {
  flex: 1;
  max-width: 380px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--line-hair);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink-soft);
  text-align: center;
  padding: 4px 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-titlebar .spacer { width: 47px; flex: 0 0 auto; }
.dash-header {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6) var(--s-4);
}
.dash-header .heading .dash-h1 {
  margin: 0;
  font-size: var(--fs-24);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  color: var(--ink);
}
.dash-header .heading p {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-13);
  color: var(--ink-soft);
  max-width: 56ch;
}
.concept-chip {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-13);
  font-weight: var(--weight-semibold);
  line-height: 1;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: var(--blue-soft);
  color: var(--blue-deep);
  border: 1px solid rgba(53, 89, 242, 0.25);
  white-space: nowrap;
}
.concept-chip::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue);
}
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  padding: 0 var(--s-6) var(--s-5);
}
.panel {
  border: 1px solid var(--line-hair);
  border-radius: var(--r-md);
  padding: var(--s-5);
  background: var(--bg);
  min-width: 0;
}
.panel--wide { grid-column: 1 / -1; }
.panel-head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4); }
.panel-head .panel-h {
  margin: 0;
  font-size: var(--fs-14);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  color: var(--ink);
}
.panel-head .kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s-1);
}
.tag-modeled {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--bg-cream);
  border: 1px solid var(--line-hair);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  white-space: nowrap;
}
.panel-note { margin: var(--s-4) 0 0; font-size: var(--fs-12); color: var(--ink-muted); }
.workflow-row {
  display: grid;
  grid-template-columns: minmax(180px, 30%) 1fr minmax(150px, auto);
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line-hair);
}
.workflow-row:first-of-type { border-top: 0; }
.workflow-row .name { font-size: var(--fs-14); font-weight: var(--weight-semibold); line-height: 1.3; color: var(--ink); }
.workflow-row .name small {
  display: block;
  font-size: var(--fs-12);
  font-weight: var(--weight-medium);
  color: var(--ink-soft);
}
.workflow-row .bar { height: 10px; border-radius: var(--r-pill); background: var(--bg-cream); overflow: hidden; }
.workflow-row .bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--blue); }
.workflow-row .bar i.soft { background: var(--blue-soft); }
.workflow-row .value {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink-muted);
  text-align: right;
  white-space: nowrap;
}
.workflow-row .value.quiet { color: var(--ink-muted); }
.spark-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.spark { border: 1px solid var(--line-hair); border-radius: var(--r-sm); padding: var(--s-3); }
.spark .label { font-size: var(--fs-12); font-weight: var(--weight-semibold); color: var(--ink); }
.spark .trend {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ok-deep);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.spark svg { display: block; width: 100%; height: 36px; margin-top: var(--s-2); }
.adopt-row {
  display: grid;
  grid-template-columns: minmax(130px, 40%) 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
}
.adopt-row .name { font-size: var(--fs-13); font-weight: var(--weight-medium); color: var(--ink); }
.adopt-row .meter { height: 8px; border-radius: var(--r-pill); background: var(--bg-cream); overflow: hidden; }
.adopt-row .meter i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--blue); }
.adopt-row .word {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.word.up { color: var(--ok-deep); }
.word.flat { color: var(--ink-soft); }
.word.early { color: var(--ink-muted); }
.shadow-strip {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--line-hair);
  border-radius: var(--r-sm);
  background: var(--bg-cream);
  font-size: var(--fs-12);
  color: var(--ink-muted);
}
.shadow-strip::before {
  content: "";
  flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok);
}
.gap-row {
  display: grid;
  grid-template-columns: minmax(200px, 38%) 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line-hair);
}
.gap-row:first-of-type { border-top: 0; }
.gap-row .name { font-size: var(--fs-14); font-weight: var(--weight-semibold); color: var(--ink); }
.gap-row .name small {
  display: block;
  font-size: var(--fs-12);
  font-weight: var(--weight-medium);
  color: var(--ink-soft);
}
.demand { display: inline-flex; gap: 5px; align-items: center; }
.demand i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.demand i.on { background: var(--blue); }
.demand .demand-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: var(--s-2);
}
.status-chip {
  justify-self: end;
  font-size: var(--fs-12);
  font-weight: var(--weight-semibold);
  line-height: 1;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.status-chip.case { background: var(--blue-soft); color: var(--blue-deep); }
.status-chip.pooling { background: var(--bg-cream); color: var(--ink-muted); border: 1px solid var(--line); }
.status-chip.logged { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); }
.status-chip.approved { background: rgba(31, 157, 108, 0.12); color: var(--ok-deep); }
.dash-footer {
  border-top: 1px solid var(--line-hair);
  padding: var(--s-4) var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink-soft);
  text-align: center;
}
@media (max-width: 720px) {
  .dash-grid { grid-template-columns: 1fr; padding: 0 var(--s-4) var(--s-4); }
  .dash-header { flex-wrap: wrap; padding: var(--s-4) var(--s-4) var(--s-3); }
  .concept-chip { margin-left: 0; }
  .spark-grid { grid-template-columns: 1fr 1fr; }
  .workflow-row, .gap-row { grid-template-columns: 1fr; gap: var(--s-2); }
  .workflow-row .value { text-align: left; }
  .gap-row .status-chip { justify-self: start; }
  .dash-titlebar .address { max-width: none; }
  .dash-titlebar .spacer { display: none; }
}

/* ----- Section 5: why it compounds - the three flywheels -----
   Three labeled circles (adoption, investment, data) each with a one-line
   caption; the cycle glyph is decorative SVG, the title + caption are real
   DOM text. Three across on wide screens, stacked at mobile width. */
.hlw-flywheels {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .hlw-flywheels { grid-template-columns: repeat(3, 1fr); } }
.hlw-flywheel {
  background: var(--bg);
  border: 1px solid var(--line-hair);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: flex-start;
}
.hlw-flywheel-ico {
  width: 52px; height: 52px;
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: var(--r-md);
  padding: 12px;
  flex-shrink: 0;
}
.hlw-flywheel h3 { font-size: var(--fs-20); margin: 0; }
.hlw-flywheel p { margin: 0; }

/* ----- Section 6: close (Talk to Lucy) on the dark conversion floor -----
   Scoped overrides so the primary button on the ink band is not underlined
   by the site-wide .band--ink a rule, and the must-land line stays bright. */
.hlw-close-lede { max-width: 40ch; }
.band--ink .hlw-close-lede { color: var(--on-ink); }
.hlw-close .btn { text-decoration: none; }
.hlw-close .btn-primary { color: var(--on-ink); }
.hlw-close .btn-primary:hover { color: var(--on-ink); }

/* ----- Section 7: FAQ (H3 questions inside summary inherit summary type) ----- */
.hlw-faq .faq summary h3 { font: inherit; margin: 0; flex: 1; }

/* ==== END PAGE CSS ==== */

/* Extracted from style attributes. */
.csp-1dc5a06ec4 { width: 78% }
.csp-34cce9fee6 { width: 14% }
.csp-4c3674a7b9 { width: 22% }
.csp-7fd7bcbd48 { width: 26% }
.csp-9765afa02e { width: 82% }
.csp-ad8d0fe9f6 { width: 48% }
.csp-d461d86e45 { width: 64% }
.csp-fa204a9b60 { width: 56% }