/* Business Process Automation landing · page specific
   fdesign.com.gr

   Load AFTER fdesign-landing-core.css. Contains only what is unique to this page:
   the mock automation run log in the hero and case study (.runlog), the before/after
   workflow comparison inside .case-cols (reuses core .steps, plus the two small
   .flow-col/.flow-tag rules below for the Before/After labels), and a plain-text
   tool list under the vectors grid (.toolrow).

   .console, .vectors, .case, .case-cols, .steps, .callout, .sources, .plan-family
   and code.mono all live in fdesign-landing-core.css already. .case-cols was
   promoted there from wordpress-security.css for this page, per the core file's
   own "promote once a second page needs it" convention. Nothing below redefines
   them. Only .case h2 stays page-local, because its max-width differs per page.
*/

.fdsec .case h2{max-width:22ch}

/* Pricing section runs on the light (paper) background on this page, whereas the
   WordPress Security page runs its pricing on dark. Two core components are coloured
   for a dark background (family-head h3 is white, vat-note is light grey) and wash
   out on light, so override them here. #111720 is the same as --ink/--fg. */
.fdsec .family-head h3{color:#111720}
.fdsec .vat-note{color:var(--fg-soft)}

/* Run log, the .console payload. A short list of automation steps firing on a
   schedule, styled like a terminal/log view. Used once in the hero (live) and
   again in the case study (the real life-style-food.com pipeline). */
.fdsec .runlog{font-family:var(--f-mono);font-size:.82rem}
.fdsec .runlog-row{display:flex;align-items:center;gap:.8rem;padding:.65rem .95rem;border-bottom:1px solid rgba(39,47,60,.6)}
.fdsec .runlog-row:last-child{border-bottom:0}
.fdsec .runlog-time{color:var(--fg-inv-soft);font-size:.76rem;min-width:4.2em;font-variant-numeric:tabular-nums}
.fdsec .runlog-task{color:var(--fg-inv);flex:1;font-size:.86rem}
.fdsec .runlog-status{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:.15rem .55rem;border-radius:3px;white-space:nowrap}
.fdsec .runlog-status.ok{color:var(--secure);border:1px solid var(--secure-deep)}
.fdsec .runlog-status.run{color:var(--caution);border:1px solid var(--caution)}

/* Before / after workflow comparison inside .case-cols. Reuses core .steps li,
   just adds the two column headings and a muted style for the "before" column
   so the automated column reads as the improvement without extra chrome. */
.fdsec .flow-col h3{color:#fff;font-size:1.05rem;margin-bottom:.9rem;display:flex;align-items:center;gap:.55rem}
.fdsec .flow-col.before .steps li{color:var(--fg-inv-soft);opacity:.75}
.fdsec .flow-col.before .steps li::before{color:var(--fg-inv-soft)}
.fdsec .flow-col.after .steps li::before{color:var(--secure)}
.fdsec .flow-tag{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;border-radius:3px;padding:.1rem .5rem}
.fdsec .flow-col.before .flow-tag{color:var(--fg-inv-soft);border:1px solid var(--ink-3)}
.fdsec .flow-col.after .flow-tag{color:var(--secure);border:1px solid var(--secure-deep)}

/* Tools row under the vectors grid, a plain-text list of what actually gets used,
   kept out of the buzzword register on purpose. */
.fdsec .toolrow{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.fdsec .toolrow span{font-family:var(--f-mono);font-size:.74rem;color:var(--fg-soft);border:1px solid var(--paper-line);border-radius:20px;padding:.25rem .8rem}

@media (max-width:560px){
  .fdsec .runlog{font-size:.74rem}
  .fdsec .runlog-time{min-width:3.4em;font-size:.68rem}
  .fdsec .runlog-status{font-size:.6rem;padding:.12rem .4rem}
}