/* ============================================================
   Workflow flow-track — AI page "How I work" (dark section)
   Scoped under .wf so nothing leaks into the rest of the site.
   ============================================================ */

.wf{margin-top:8px}

.wf-track{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  padding-top:16px;
}

.wf-track::before{
  content:"";
  display:none;            /* desktop: no connecting line (kept for mobile only) */
  position:absolute;
  top:23px;
  left:8px;
  right:calc(25% - 32px);
  height:2px;
  background:linear-gradient(90deg,
    var(--accent) 0%,
    rgba(255,0,46,.25) 100%);
  z-index:0;
}

.wf-phase{position:relative;z-index:1;padding-top:48px}

.wf-phase::before{
  content:"";
  position:absolute;
  top:16px;left:0;
  width:16px;height:16px;
  border-radius:50%;
  background:var(--paper);
  border:2px solid var(--accent);
  box-shadow:0 0 0 5px var(--paper);
  transition:transform .4s var(--ease),background .4s var(--ease);
}
.wf-phase:hover::before{transform:scale(1.18);background:var(--accent)}

.wf-phase--manual::before{border-color:var(--ink);box-shadow:0 0 0 5px var(--paper)}
.wf-phase--manual:hover::before{background:var(--ink)}

.wf-step{
  font:500 11px/1 var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
}
.wf-phase--manual .wf-step{color:var(--ink)}

.wf-ptitle{
  font-family:var(--serif);
  font-size:clamp(22px,2vw,28px);
  line-height:1.08;
  letter-spacing:-.01em;
  margin-top:12px;
}
.wf-ptitle .it{font-style:italic;color:var(--accent)}

.wf-pdesc{
  font-size:14.5px;
  line-height:1.55;
  color:var(--mute);
  margin-top:12px;
  max-width:34ch;
}

.wf-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.wf-meta span{
  font:500 10.5px/1 var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
  border:1px solid var(--rule);
  border-radius:999px;
  padding:6px 10px;
  background:transparent;
}

.wf-parallel{
  margin-top:40px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
}
.wf-parallel__bracket{
  grid-column:3 / span 2;
  position:relative;
  padding:18px 22px 20px;
  border:1px solid var(--rule);
  border-top:2px solid var(--accent);
  border-radius:0 0 14px 14px;
  background:linear-gradient(180deg,rgba(255,0,46,.04),transparent 60%);
}
.wf-parallel__bracket::before{
  content:"Runs in parallel";
  position:absolute;
  top:-9px;left:22px;
  font:500 10px/1 var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  background:var(--paper);
  padding:0 8px;
}
.wf-parallel__bracket p{font-size:14px;line-height:1.55;color:var(--mute);margin:0}
.wf-parallel__bracket em{font-style:italic;color:var(--ink)}

.wf-note{
  margin-top:48px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  align-items:start;
  padding:28px 32px;
  border:1px solid var(--rule);
  border-radius:16px;
  background:var(--paper-2);
}
.wf-note__gauge{
  --pct:50%;
  position:relative;
  width:96px;height:96px;
  border-radius:50%;
  background:conic-gradient(var(--accent) 0 var(--pct), var(--rule) var(--pct) 100%);
  display:grid;place-items:center;
  flex:0 0 auto;
}
.wf-note__gauge::after{
  content:"";
  position:absolute;inset:11px;
  border-radius:50%;
  background:var(--paper-2);
}
.wf-note__gauge span{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--serif);
  font-size:24px;line-height:1;
  letter-spacing:-.01em;
}
.wf-note__gauge small{
  position:relative;z-index:1;
  display:block;
  font:500 9px/1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
  margin-top:4px;
  text-align:center;
}
.wf-note__body h4{
  font-family:var(--serif);
  font-size:20px;line-height:1.15;
  letter-spacing:-.01em;
  margin:2px 0 0;
}
.wf-note__body p{font-size:15px;line-height:1.6;color:var(--ink);margin:10px 0 0;max-width:64ch}
.wf-note__body p em{font-style:italic;color:var(--accent)}

@media(max-width:900px){
  .wf-track{grid-template-columns:1fr;gap:0;padding-top:8px}
  .wf-track::before{
    display:block;
    top:8px;bottom:8px;left:7px;right:auto;
    width:2px;height:auto;
    background:linear-gradient(180deg,
      var(--accent) 0%, var(--accent) 70%, var(--rule) 70%, var(--rule) 100%);
  }
  .wf-phase{padding:8px 0 36px 36px}
  .wf-phase::before{top:10px;left:0}
  .wf-pdesc{max-width:none}
  .wf-parallel{grid-template-columns:1fr;margin-top:0}
  .wf-parallel__bracket{grid-column:1;margin:0 0 8px 36px;border-radius:14px}
  .wf-note{grid-template-columns:1fr;text-align:left;gap:16px}
}

@media(prefers-reduced-motion:reduce){
  .wf-phase::before{transition:none}
}

/* --- Dark-section variant ------------------------------------- */
.section--dark .wf-track::before{
  background:linear-gradient(90deg,
    var(--accent) 0%,
    rgba(255,0,46,.22) 100%);
}
.section--dark .wf-phase::before{background:var(--ink);box-shadow:0 0 0 5px var(--ink)}
.section--dark .wf-phase:hover::before{background:var(--accent)}
.section--dark .wf-phase--manual::before{border-color:var(--paper);box-shadow:0 0 0 5px var(--ink)}
.section--dark .wf-phase--manual:hover::before{background:var(--paper)}
.section--dark .wf-phase--manual .wf-step{color:var(--paper)}
.section--dark .wf-ptitle{color:var(--paper)}
.section--dark .wf-pdesc{color:rgba(243,239,231,.7)}
.section--dark .wf-meta span{color:rgba(243,239,231,.92);border-color:rgba(243,239,231,.18)}
.section--dark .wf-parallel__bracket{
  border-color:rgba(243,239,231,.18);
  border-top-color:var(--accent);
  background:linear-gradient(180deg,rgba(255,0,46,.10),transparent 60%);
}
.section--dark .wf-parallel__bracket::before{background:var(--ink)}
.section--dark .wf-parallel__bracket p{color:rgba(243,239,231,.7)}
.section--dark .wf-parallel__bracket em{color:var(--paper)}
.section--dark .wf-note{background:rgba(255,255,255,.04);border-color:rgba(243,239,231,.12)}
.section--dark .wf-note__gauge{background:conic-gradient(var(--accent) 0 var(--pct), rgba(243,239,231,.18) var(--pct) 100%)}
.section--dark .wf-note__gauge::after{background:var(--ink)}
.section--dark .wf-note__gauge span{color:var(--paper)}
.section--dark .wf-note__gauge small{color:rgba(243,239,231,.55)}
.section--dark .wf-note__body h4{color:var(--paper)}
.section--dark .wf-note__body p{color:rgba(243,239,231,.85)}
/* EOF-MARKER */

/* ---- Animated gauge sweep on scroll-in ---- */
@property --pct{ syntax:'<percentage>'; initial-value:0%; inherits:false; }
.wf-note__gauge{
  --pct-target:50%;
  --pct:0%;
  transition:--pct 1.2s cubic-bezier(.22,.61,.36,1);
}
.wf-note__gauge span,
.wf-note__gauge small{ opacity:0; transition:opacity .5s ease .3s; }
.wf-note.is-in .wf-note__gauge{ --pct:var(--pct-target); }
.wf-note.is-in .wf-note__gauge span,
.wf-note.is-in .wf-note__gauge small{ opacity:1; }
@media(prefers-reduced-motion:reduce){
  .wf-note__gauge{ --pct:var(--pct-target); transition:none; }
  .wf-note__gauge span,.wf-note__gauge small{ opacity:1; transition:none; }
}