/* Naytra — §3 How it works: the convergence diagram.
   Many macro streams → Naytra → your positions ("one traceable line").
   Dark ground, Fraunces + DM Sans, accent (--accent-glow) on the connector pulses; logo tile fixed beige + black.
   Uses .on-dark (token flip) + font override. Depends on tokens.css + base.css. */

.hiw{
  --font-serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  padding-block:clamp(96px,14vh,180px);
  background:#141414;  /* neutral dark (matches the dark CTA; not the warm/brown ground) */
}

.hiw__head{max-width:var(--frame-max);margin-inline:auto;
  padding:0 clamp(var(--space-40),6vw,var(--space-120));margin-bottom:clamp(44px,7vh,88px);text-align:center}
.hiw__eyebrow{font-family:var(--font-sans);font-weight:500;font-size:12px;line-height:1.2;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 var(--space-20)}
.hiw__title{font-family:var(--font-serif);font-weight:340;color:var(--on-ground);
  font-size:clamp(30px,3.8vw,44px);line-height:1.08;letter-spacing:-.02em;margin:0 auto;
  max-width:none;text-wrap:balance}
.hiw__body{font-family:var(--font-sans);font-weight:400;font-size:17px;
  line-height:1.5;color:var(--on-ground-2);margin:var(--space-20) auto 0;
  max-width:calc(var(--col) * 8 + var(--gutter) * 7);text-wrap:balance}

.hiw__diagram{max-width:var(--frame-max);margin-inline:auto;
  padding:0 clamp(var(--space-40),6vw,var(--space-120));overflow-x:auto}
.hiw__svg{display:block;width:100%;max-width:1120px;margin-inline:auto;min-width:880px;height:auto;overflow:visible}

/* ---- Diagram (Figma Frame 47): streams + your books → engine → delivery surfaces ----
   Neutral dark ground the section already uses; system text/accent colours; rounded per the frame. */
.hw-chip{fill:#242422}
.hw-hub{fill:var(--beige)}  /* logo tile — fixed beige (brand constant; independent of the accent) */
.hw-hubmark{fill:var(--black)}  /* black mark on the beige tile (brand constant) */

/* Unified diagram cards (feed, "your books", and output) — icon left, generous
   padding, 24px label. Stacked in a flex column so every card in a column shares one
   width (stretched to the widest) and the column hugs its content. Icons inherit
   `color` via currentColor. */
.hw-box{display:flex;align-items:center;gap:var(--space-20);
  padding:var(--space-30);box-sizing:border-box;border-radius:14px !important;
  background:#1E1E1E;color:var(--on-ground)}
.hw-bicon{width:32px;height:32px;flex:none;display:flex}
.hw-bicon svg{width:100%;height:100%;display:block}
.hw-blabel{font-family:var(--font-sans);font-weight:500;font-size:24px;line-height:1.1;
  color:inherit;white-space:nowrap}
/* Output cards — beige ground, ink content (flip-safe brand tokens). */
.hw-box--light{background:var(--beige);color:var(--black)}
/* Standalone card ("Your books") — hugs its own content. */
.hw-box--solo{display:inline-flex;width:max-content}

/* Column stacks — width:max-content makes the column hug its widest card, and
   align-items:stretch equalises every card to that width. */
.hw-col{display:inline-flex;flex-direction:column;align-items:stretch;width:max-content;
  gap:var(--space-30)}
/* OUTPUT & INTEGRATION — no outer container; 3 standalone stacked cards, each wired
   to the engine. Flex column keeps them uniform-width and stacked. */
.hw-outcol{display:inline-flex;flex-direction:column;align-items:stretch;width:max-content;
  gap:var(--space-20)}

/* zone labels (Feed / Naytra computing engine / Output & integration) */
.hw-zone{fill:var(--on-ground-2);font-family:var(--font-sans);font-weight:600;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase}

/* chip cells */
.hw-cell{fill:var(--on-ground-2);opacity:.28}
.hw-cell--on,.hw-cell--on2,.hw-cell--on3{fill:var(--beige);opacity:.9}

/* connectors — solid lines per the design, with a travelling amber pulse (RevInsight) */
.hw-conn{fill:none;stroke:rgba(183,180,166,.30);stroke-width:1.4;stroke-linecap:round}
.hw-pulse{fill:none;stroke:var(--accent-glow);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:3 100}
.hw-glow{opacity:.14}

/* ---- Fade-in on scroll ---- */
.hiw__svg{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.hiw.in-view .hiw__svg{opacity:1;transform:none}

/* ---- RevInsight-style motion: an amber pulse travels each feed into the engine;
   the engine breathes and a few chip cells twinkle. Runs only while in view. ---- */
@keyframes hwFlow{from{stroke-dashoffset:0}to{stroke-dashoffset:-103}}  /* pathLength 100 + gap → seamless */
@keyframes hwBreath{0%,100%{opacity:.10}50%{opacity:.30}}
@keyframes hwCell{0%,100%{opacity:.28}50%{opacity:.9}}

.hiw.in-view .hw-pulse{animation:hwFlow 1.9s linear infinite}
.hiw.in-view .hw-glow{animation:hwBreath 3.6s ease-in-out infinite}
.hiw.in-view .hw-cell--on{animation:hwCell 2.2s ease-in-out infinite}
.hiw.in-view .hw-cell--on2{animation:hwCell 2.2s ease-in-out .7s infinite}
.hiw.in-view .hw-cell--on3{animation:hwCell 2.2s ease-in-out 1.4s infinite}

@media (prefers-reduced-motion:reduce){
  .hiw__svg{transition:none;opacity:1;transform:none}
  .hiw.in-view .hw-pulse,.hiw.in-view .hw-glow,
  .hiw.in-view .hw-cell--on,.hiw.in-view .hw-cell--on2,.hiw.in-view .hw-cell--on3{animation:none}
  .hw-pulse{display:none}
}