/* Page-scoped styles extracted from es/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);
}
.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 (Habla con 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 ==== */


/* Claude August content-pass preview reconstruction */
.hlw-layers { border-top: 1px solid var(--line-hair); }
.hlw-layers-grid { display: grid; gap: var(--s-7); margin-top: var(--s-6); }
.hlw-bridge-figure { display: grid; gap: var(--s-4); align-items: stretch; }
.hlw-layer { padding: var(--s-5); border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: var(--r-md); background: var(--bg); }
.hlw-layer--ai { border-top-color: var(--ink-soft); }
.hlw-layer-name { margin: 0 0 var(--s-4); font-size: 1.125rem; font-weight: var(--weight-semibold); }
.hlw-layer-label { margin: 0 0 var(--s-1); font-family: var(--font-mono); font-size: .75rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-soft); }
.hlw-layer-text { margin: 0 0 var(--s-4); font-size: .9375rem; color: var(--ink-muted); }
.hlw-layer-text:last-child { margin-bottom: 0; }
.hlw-bridge-node { display: flex; align-items: center; justify-content: center; gap: var(--s-3); }
.hlw-bridge-lucy { display: grid; justify-items: center; gap: var(--s-3); }
.hlw-bridge-portrait { width: clamp(88px,11vw,120px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 3px solid var(--blue); }
.hlw-bridge-mark { background: var(--ink); color: var(--on-ink); padding: var(--s-3) var(--s-5); border-radius: 999px; font-weight: var(--weight-bold); letter-spacing: .04em; }
.hlw-bridge-arrow { color: var(--ink-muted); font-size: 1.25rem; }
.hlw-bridge-points { counter-reset: bridgept; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.hlw-bridge-points li { counter-increment: bridgept; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: var(--s-3); align-items: start; }
.hlw-bridge-points li::before { content: counter(bridgept); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-deep); font-weight: var(--weight-bold); }
.hlw-point-title { margin: 0 0 var(--s-2); font-weight: var(--weight-semibold); }
.hlw-point-copy > p:last-child { margin: 0; color: var(--ink-muted); }
.hlw-layers-kicker { margin-top: var(--s-7); font-weight: var(--weight-semibold); color: var(--blue-deep); }
@media (min-width: 700px) {
  .hlw-bridge-figure { grid-template-columns: 1fr auto 1fr; }
  .hlw-bridge-node { align-self: center; }
}
@media (min-width: 1180px) {
  .hlw-layers-grid { grid-template-columns: minmax(0,1.9fr) minmax(0,1fr); gap: var(--s-8); align-items: center; }
}

/* Extracted from style attributes. */
.csp-0895e83168 { width: 26% }
.csp-12c771431c { width: 82% }
.csp-1d3a9d5450 { width: 64% }
.csp-5109d8e4b5 { width: 22% }
.csp-9bb77f017c { width: 78% }
.csp-b3f62d0bca { width: 56% }
.csp-ea4c3bd041 { width: 48% }
.csp-fa4d05f505 { width: 14% }