/* ---- FPO badge: top-right corner, above the media, no hover needed. Big
     enough that nobody mistakes a mock for approved creative, small enough that
     the mock itself stays readable. ---- */
  .pillar-page .fpo-mark {
    position: absolute; top: 10px; right: 10px; z-index: 3; pointer-events: none;
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(192, 57, 43, .94); color: #fff; border-radius: 8px; padding: 6px 10px 6px 12px;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .45);
  }
  .pillar-page .fpo-mark > b {
    font-family: var(--font-display); font-weight: 800; line-height: 1;
    font-size: clamp(16px, 1.6vw, 22px); letter-spacing: .08em;
  }
  .pillar-page .fpo-mark > small {
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, .85); border-left: 1px solid rgba(255, 255, 255, .4); padding-left: 8px; line-height: 1.2;
  }
  .pillar-page .wfv-fpo { position: relative; }
  .pillar-page .wfv-fpo .wfv-top { padding-right: 200px; }
  .pillar-page .wfv-fpo::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    border: 2px dashed rgba(192, 57, 43, .6); border-radius: var(--radius-lg);
  }

  .pillar-page .wfv { width: 100%; }
  .pillar-page .wfv-card {
    background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
    box-shadow: 0 20px 46px -28px rgba(9,13,21,.30), 0 2px 6px -3px rgba(0,0,0,.06);
    padding: 20px 24px 22px; max-width: 680px; margin: 0 auto;
  }
  .pillar-page .wfv-top {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px;
    padding-bottom: 14px; border-bottom: 1px solid var(--paper-line);
  }
  .pillar-page .wfv-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); }
  .pillar-page .wfv-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
  .pillar-page .wfv-foot { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }

  /* ---- item sets: a sale grouped by area / phase, with one line's availability ---- */
  .pillar-page .wfv-set { padding: 14px 0 6px; }
  .pillar-page .wfv-set + .wfv-set { border-top: 1px solid var(--paper-line); }
  .pillar-page .wfv-set-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
  .pillar-page .wfv-set-name {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-cobalt-500);
  }
  .pillar-page .wfv-set-name::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--color-cobalt-400); }
  .pillar-page .wfv-status {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); white-space: nowrap;
    padding: 2px 9px; border-radius: 999px; border: 1px solid var(--paper-line); background: #fff;
  }
  .pillar-page .wfv-status--done { color: var(--color-cobalt-500); background: var(--color-cobalt-50); border-color: var(--color-cobalt-100); }
  .pillar-page .wfv-lines { width: 100%; border-collapse: collapse; }
  .pillar-page .wfv-lines td { padding: 7px 0; font-size: 14.5px; color: var(--ink); border-bottom: 1px dashed var(--paper-line); vertical-align: baseline; }
  .pillar-page .wfv-lines tr:last-child td { border-bottom: 0; }
  .pillar-page .wfv-lines td:first-child { font-weight: 600; padding-right: 16px; }
  .pillar-page .wfv-lines td.wfv-qty { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .pillar-page .wfv-note { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
  .pillar-page .wfv-avail { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--paper-line); }
  .pillar-page .wfv-avail-item { font-size: 13px; color: var(--ink-3); margin: 0 0 8px; }
  .pillar-page .wfv-avail-item strong { color: var(--ink); font-weight: 600; }
  .pillar-page .wfv-avail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .pillar-page .wfv-avail-cell { background: var(--paper-2); border-radius: var(--radius-md); padding: 10px 12px; }
  .pillar-page .wfv-avail-label { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
  .pillar-page .wfv-avail-value { display: block; font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
  .pillar-page .wfv-avail-cell--hi .wfv-avail-value { color: var(--color-cobalt-400); }

  /* ---- tally: lengths and pieces in, footage out ---- */
  .pillar-page .wfv-table { width: 100%; border-collapse: collapse; }
  .pillar-page .wfv-table th {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--ink-3); text-align: right; padding: 13px 0 9px; border-bottom: 1px solid var(--paper-line); white-space: nowrap;
  }
  .pillar-page .wfv-table td {
    font-size: 14.5px; color: var(--ink); padding: 11px 0; border-bottom: 1px solid var(--paper-line);
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .pillar-page .wfv-table th:first-child, .pillar-page .wfv-table td:first-child { text-align: left; }
  .pillar-page .wfv-table td:first-child { font-weight: 600; white-space: normal; padding-right: 12px; }
  .pillar-page .wfv-table tfoot td { border-bottom: 0; padding-top: 13px; font-family: var(--font-mono); font-weight: 700; color: var(--color-cobalt-500); }
  .pillar-page .wfv-table tfoot td:first-child { font-family: var(--font-body); color: var(--ink); }

  /* ---- yards: one product, what each yard has, and the one action ---- */
  .pillar-page .wfv-yards { list-style: none; margin: 4px 0 0; padding: 0; }
  .pillar-page .wfv-yard {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 16px 0; border-bottom: 1px dashed var(--paper-line);
  }
  .pillar-page .wfv-yard-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); }
  .pillar-page .wfv-yard-qty { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .pillar-page .wfv-yard-qty small { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .04em; margin-left: 6px; color: var(--ink-3); }
  .pillar-page .wfv-yard--hi .wfv-yard-qty { color: var(--color-cobalt-400); }
  .pillar-page .wfv-yard-action {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px;
    background: var(--color-cobalt-400); color: #fff; border-radius: var(--radius-md); padding: 14px 18px;
    font-family: var(--font-display); font-weight: 700; font-size: 16px;
  }

  /* ---- account: the contractor's credit at the counter, jobs underneath ---- */
  .pillar-page .wfv-acct-status {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--color-cobalt-500); background: var(--color-cobalt-50); border: 1px solid var(--color-cobalt-100); border-radius: 999px; padding: 4px 10px;
  }
  .pillar-page .wfv-acct-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-cobalt-400); }
  .pillar-page .wfv-acct-fields { margin-top: 12px; }
  .pillar-page .wfv-acct-jobs { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--paper-line); }
  .pillar-page .wfv-acct-jobs-label { margin: 0 0 4px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }

  /* ---- multiyard storyboard: one order, every yard, one card ---- */
  .pillar-page .wfv-my-need { margin: 14px 0 0; font-size: 15px; color: var(--ink); }
  .pillar-page .wfv-my-need strong { font-weight: 700; }
  .pillar-page .wfv-my-step {
    display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start;
    padding: 14px 0; border-bottom: 1px dashed var(--paper-line);
  }
  .pillar-page .wfv-my-step:last-of-type { border-bottom: 0; }
  .pillar-page .wfv-my-label {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-cobalt-500);
    display: inline-flex; align-items: center; gap: 8px; padding-top: 4px;
  }
  .pillar-page .wfv-my-label::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--color-cobalt-400); flex: none; }
  .pillar-page .wfv-my-yards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pillar-page .wfv-my-yard { background: var(--paper-2); border-radius: var(--radius-md); padding: 10px 12px; }
  .pillar-page .wfv-my-yard-name { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
  .pillar-page .wfv-my-yard-qty { display: block; font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
  .pillar-page .wfv-my-yard-qty small { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .04em; margin-left: 5px; color: var(--ink-3); }
  .pillar-page .wfv-my-yard--hi .wfv-my-yard-qty { color: var(--color-cobalt-400); }
  .pillar-page .wfv-my-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .pillar-page .wfv-my-action {
    display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-md); padding: 10px 14px;
    font-family: var(--font-display); font-weight: 700; font-size: 14.5px; white-space: nowrap;
  }
  .pillar-page .wfv-my-action--primary { background: var(--color-cobalt-400); color: #fff; }
  .pillar-page .wfv-my-action--secondary { background: #fff; color: var(--color-cobalt-500); border: 1.5px solid var(--color-cobalt-100); }
  .pillar-page .wfv-my-or { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .pillar-page .wfv-my-note { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
  .pillar-page .wfv-sms {
    max-width: 320px; background: var(--ink); color: #fff; border-radius: 18px; padding: 12px 14px 12px;
    box-shadow: 0 16px 34px -22px rgba(9,13,21,.6);
  }
  .pillar-page .wfv-sms-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
  .pillar-page .wfv-sms-app { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); }
  .pillar-page .wfv-sms-app::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--color-cobalt-400); }
  .pillar-page .wfv-sms-time { font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.55); }
  .pillar-page .wfv-sms-title { margin: 0 0 4px; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; }
  .pillar-page .wfv-sms-line { margin: 0; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.9); }
  .pillar-page .wfv-my-deliver { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }

  /* ---- iconflow: a strip of steps, one icon and a two-word label each ---- */
  .pillar-page .wfv-iconflow {
    list-style: none; margin: 0; padding: 22px 20px;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; align-items: start;
    background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
    box-shadow: 0 20px 46px -28px rgba(9,13,21,.30), 0 2px 6px -3px rgba(0,0,0,.06);
  }
  .pillar-page .wfv-istep { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .pillar-page .wfv-istep-icon {
    width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-cobalt-50); border: 1px solid var(--color-cobalt-100); color: var(--color-cobalt-400);
  }
  .pillar-page .wfv-istep-label { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; color: var(--ink); }
  .pillar-page .wfv-istep:not(:last-child)::after {
    content: ""; position: absolute; top: 24px; left: calc(50% + 28px); right: calc(-50% + 28px); height: 1.5px; background: var(--color-cobalt-200);
  }

  /* ---- frames: a fixed-height carousel of inner visuals ---- */
  .pillar-page .wfv-frames { position: relative; }
  .pillar-page .wfv-frames-stage { position: relative; }
  .pillar-page .wfv-frame { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
  .pillar-page .wfv-frame.is-active { opacity: 1; pointer-events: auto; position: relative; }
  .pillar-page .wfv-frame > .wfv { margin: 0 auto; }
  .pillar-page .wfv-frames-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; }
  .pillar-page .wfv-frames-nav .carousel-dots { margin: 0; }
  @media (prefers-reduced-motion: reduce) { .pillar-page .wfv-frame { transition: none; } }

  /* ---- storyboard: the small Dooey moment ---- */
  .pillar-page .wfv-my-dooey { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .pillar-page .wfv-my-dooey .wfv-ask { font-size: 14px; padding: 8px 13px; }
  .pillar-page .wfv-my-dooey .wfv-reply { font-size: 13.5px; padding: 8px 13px; }
  .pillar-page .wfv-my-dooey .wfv-turn { gap: 6px; }

  /* ---- dooey chat: one short conversation from the yard ---- */
  .pillar-page .wfv-chat { list-style: none; margin: 0; padding: 14px 0 4px; display: flex; flex-direction: column; gap: 12px; }
  .pillar-page .wfv-turn { display: flex; flex-direction: column; gap: 8px; }
  .pillar-page .wfv-ask {
    margin: 0; align-self: flex-end; max-width: 78%;
    font-size: 15px; line-height: 1.45; color: var(--ink);
    background: var(--paper-2); border-radius: 16px 16px 4px 16px; padding: 10px 15px;
  }
  .pillar-page .wfv-reply {
    margin: 0; align-self: flex-start; max-width: 86%; display: flex; gap: 10px; align-items: flex-start;
    font-size: 14.5px; line-height: 1.45; color: var(--ink-2);
    background: var(--color-violet-50); border: 1px solid var(--color-violet-200); border-radius: 16px 16px 16px 4px; padding: 10px 15px;
  }
  .pillar-page .wfv-reply svg { flex: none; margin-top: 3px; color: var(--color-violet-600); }

  /* ---- flow: an order or delivery moving step to step ---- */
  .pillar-page .wfv-flow {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; align-items: stretch;
  }
  .pillar-page .wfv-step {
    position: relative; display: flex; flex-direction: column; gap: 6px;
    background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius-md);
    padding: 16px 14px; box-shadow: var(--shadow-control);
  }
  .pillar-page .wfv-step-num { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--color-cobalt-400); }
  .pillar-page .wfv-step-label { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); }
  .pillar-page .wfv-step-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
  .pillar-page .wfv-step:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; right: -12px; width: 12px; height: 1.5px; background: var(--color-cobalt-200);
  }
  .pillar-page .wfv-step:not(:last-child)::before {
    content: ""; position: absolute; top: calc(50% - 3.5px); right: -8px; width: 6px; height: 6px; z-index: 1;
    border-top: 1.5px solid var(--color-cobalt-200); border-right: 1.5px solid var(--color-cobalt-200); transform: rotate(45deg);
  }

  /* ---- video slot: a 16:9 frame holding the place of a video not yet shot ---- */
  .pillar-page .wfv-image { margin: 0; }
  .pillar-page .wfv-stripshot .wfv--iconflow { position: relative; z-index: 2; }
  /* A clear gap between the lifecycle strip and the screenshot; the two used
     to overlap, which read as one awkward composite (LBM review, 2026-10-22). */
  .pillar-page .wfv-stripshot-shot { margin: 20px 22px 0; }
  .pillar-page .wfv-stripshot-caption { text-align: center; margin-top: 10px; }
  .pillar-page .wfv-image img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--paper-line); background: #fff; }
  .pillar-page .wfv-video-frame {
    aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: var(--color-cobalt-50); border: 1px solid var(--paper-line);
    display: flex; align-items: center; justify-content: center;
  }
  .pillar-page .wfv--video { max-width: 540px; margin-left: auto; }
  .pillar-page .wfv-video .wfv-foot { padding: 0 12px 12px; }
  .pillar-page .wfv-video-play {
    width: 64px; height: 64px; border-radius: 50%; background: var(--color-cobalt-400); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px -12px rgba(14,31,193,.6);
  }

  @media (max-width: 767px) {
    .pillar-page .fpo-mark > small { display: none; }
    .pillar-page .fpo-mark { padding: 5px 9px; }
    .pillar-page .wfv-fpo .wfv-top { padding-right: 64px; }
    .pillar-page .wfv-card { padding: 16px 16px 18px; }
    .pillar-page .wfv-top, .pillar-page .wfv-set-head { flex-wrap: wrap; }
    .pillar-page .wfv-avail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pillar-page .wfv-ask, .pillar-page .wfv-reply { max-width: 100%; }
    .pillar-page .wfv-my-step { grid-template-columns: 1fr; gap: 8px; }
    .pillar-page .wfv-iconflow { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 8px; }
    .pillar-page .wfv-istep::after { display: none; }
    .pillar-page .wfv-sms { max-width: 100%; }
    .pillar-page .wfv-flow { grid-auto-flow: row; grid-auto-columns: auto; gap: 14px; }
    .pillar-page .wfv-step:not(:last-child)::after { top: auto; bottom: -14px; right: auto; left: 50%; width: 1.5px; height: 14px; }
    .pillar-page .wfv-step:not(:last-child)::before { top: auto; bottom: -10px; right: auto; left: calc(50% - 3.5px); transform: rotate(135deg); }
  }