/* WeWebWorks — AI automation pages: demo workbench, ROI estimator, pillar cards, assessment form.
   Builds on the tokens and components in software.css. */

/* ---------- pillar cards (homepage + pillar page) ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pillar { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-l); border-radius: 18px; padding: 34px; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.pillar:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -24px rgba(0,0,0,.28); border-color: #cfcdc3; }
.pillar .pn { font: 600 .78rem var(--mono); letter-spacing: .14em; color: var(--muted-l); margin-bottom: 18px; }
.pillar h3 { font-size: 1.5rem; margin-bottom: .5em; }
.pillar p { color: var(--muted-l); font-size: .98rem; }
.pillar ul { list-style: none; margin: 8px 0 22px; padding: 0; display: grid; gap: 8px; font-size: .95rem; }
.pillar li { padding-left: 22px; position: relative; }
.pillar li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--ink); }
.pillar .card-link { margin-top: auto; align-self: flex-start; }
.pillar.lead-pillar { background: var(--ink); border-color: var(--ink); }
.pillar.lead-pillar h3, .pillar.lead-pillar .card-link { color: #fff; }
.pillar.lead-pillar p, .pillar.lead-pillar li, .pillar.lead-pillar .pn { color: var(--muted-d); }
.pillar.lead-pillar li::before { background: var(--yellow); }
.who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.who h3 { font-size: 1.05rem; margin-bottom: .6em; }
.who ul { margin: 0; padding-left: 1.1em; color: var(--muted-l); font-size: .96rem; }
.dark .who ul, .dark-2 .who ul { color: var(--muted-d); }
.ai-cta-inline { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; background: var(--ink); color: var(--text-d); border-radius: 18px; padding: 28px 32px; margin-top: 40px; }
.ai-cta-inline p { margin: 0; max-width: 56ch; color: var(--text-d); }
.ai-cta-inline strong { color: #fff; }

/* ---------- demo workbench ---------- */
.aidemo { --pane: #161614; color: var(--text-d); }
.aidemo-badge { display: flex; gap: 10px; align-items: flex-start; border: 1px dashed rgba(255,212,0,.55); background: rgba(255,212,0,.07); color: #f3e9b8; border-radius: 10px; padding: 12px 16px; font-size: .9rem; margin-bottom: 24px; }
.aidemo-badge b { color: var(--yellow); font: 600 .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; padding-top: 2px; }
.aidemo-scen { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.aidemo-scen button { font: 600 .92rem var(--font); color: #e9e8e3; background: transparent; border: 1px solid var(--line-d); border-radius: 99px; padding: 10px 18px; cursor: pointer; transition: border-color .2s, background .2s; }
.aidemo-scen button:hover { border-color: rgba(255,255,255,.5); }
.aidemo-scen button[aria-pressed="true"] { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.aidemo-grid { display: grid; grid-template-columns: 250px 1fr; gap: 22px; align-items: start; }
.aidemo-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: s; }
.aidemo-steps li { counter-increment: s; display: flex; gap: 12px; align-items: center; padding: 11px 14px; border: 1px solid var(--line-d); border-radius: 10px; font-size: .92rem; color: var(--muted-d); transition: all .25s var(--ease); }
.aidemo-steps li::before { content: counter(s); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 .75rem var(--mono); border: 1px solid var(--line-d); }
.aidemo-steps li.done { color: #dcdad3; }
.aidemo-steps li.done::before { content: "✓"; background: rgba(63,178,127,.18); border-color: var(--green); color: var(--green); }
.aidemo-steps li.now { color: #fff; border-color: var(--yellow); background: rgba(255,212,0,.07); }
.aidemo-steps li.now::before { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.aidemo-steps li.warn::before { content: "!"; background: rgba(232,163,61,.2); border-color: var(--amber); color: var(--amber); }
.aidemo-stage { display: grid; gap: 16px; }
.aidemo-pane { background: var(--pane); border: 1px solid var(--line-d); border-radius: 14px; padding: 20px 22px; min-height: 130px; }
.aidemo-pane h3 { font: 600 .74rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); margin: 0 0 12px; }
.aidemo-pane p { color: var(--muted-d); font-size: .95rem; margin: 0 0 .6em; }
.aidemo-mail { font-size: .92rem; }
.aidemo-mail dl { display: grid; grid-template-columns: 70px 1fr; gap: 4px 10px; margin: 0 0 12px; font-size: .88rem; }
.aidemo-mail dt { color: var(--muted-d); } .aidemo-mail dd { margin: 0; color: #e9e8e3; }
.aidemo-mail .att { display: inline-flex; gap: 8px; align-items: center; background: #202020; border: 1px solid var(--line-d); border-radius: 8px; padding: 6px 10px; font: 500 .8rem var(--mono); }
.aidemo-tag { display: inline-block; font: 600 .72rem var(--mono); padding: 3px 9px; border-radius: 99px; background: rgba(91,141,239,.18); color: #a9c1ff; margin-right: 6px; }
.aidemo-tag.g { background: rgba(63,178,127,.16); color: var(--green); } .aidemo-tag.a { background: rgba(232,163,61,.18); color: var(--amber); } .aidemo-tag.r { background: rgba(230,90,90,.18); color: #ff9b9b; }
.aidemo-fields { width: 100%; border-collapse: collapse; font-size: .9rem; }
.aidemo-fields th { text-align: left; font-weight: 500; color: var(--muted-d); width: 38%; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line-d); }
.aidemo-fields td { padding: 7px 0; border-bottom: 1px solid var(--line-d); color: #f0eee7; }
.aidemo-fields td.low { color: var(--amber); }
.aidemo-fields .cf { float: right; font: 500 .72rem var(--mono); color: var(--muted-d); }
.aidemo-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .92rem; }
.aidemo-checks li { display: flex; gap: 10px; align-items: baseline; }
.aidemo-checks .ok { color: var(--green); } .aidemo-checks .bad { color: var(--amber); }
.aidemo-decide { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.aidemo-decide .btn { padding: 12px 18px; font-size: .92rem; }
.aidemo-ctrl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.aidemo-ctrl .btn { padding: 13px 20px; font-size: .95rem; }
.aidemo-dash { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.aidemo-dash div { background: #1c1c1a; border: 1px solid var(--line-d); border-radius: 10px; padding: 10px 12px; }
.aidemo-dash small { display: block; color: var(--muted-d); font-size: .72rem; }
.aidemo-dash strong { font: 600 1.35rem var(--font); color: #fff; }
.aidemo-log { list-style: none; margin: 0; padding: 0; max-height: 190px; overflow: auto; font: 500 .78rem/1.5 var(--mono); color: #bdbbb3; }
.aidemo-log li { padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.aidemo-log time { color: var(--muted-d); margin-right: 8px; }
.aidemo-empty { color: var(--muted-d); font-size: .92rem; }
.aidemo-note { font-size: .85rem; color: var(--muted-d); margin-top: 18px; }

/* ---------- ROI estimator ---------- */
.roi { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: stretch; }
.roi-in, .roi-out { background: #fff; border: 1px solid var(--line-l); border-radius: 16px; padding: 28px; }
.roi-out { background: var(--ink); border-color: var(--ink); color: var(--text-d); }
.roi-in .row { display: grid; grid-template-columns: 1fr 130px; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-l); }
.roi-in .row:last-of-type { border-bottom: 0; }
.roi-in label { font-weight: 500; font-size: .96rem; }
.roi-in label small { display: block; font-weight: 400; color: var(--muted-l); font-size: .82rem; }
.roi-in input { width: 100%; font: 500 1rem var(--font); padding: 11px 12px; border: 1px solid #cfcdc3; border-radius: 8px; background: #fff; color: var(--text-l); }
.roi-out h3 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.roi-out dl { margin: 0; display: grid; gap: 16px; }
.roi-out dt { color: var(--muted-d); font-size: .85rem; }
.roi-out dd { margin: 2px 0 0; font: 600 1.9rem var(--font); color: #fff; letter-spacing: -.02em; }
.roi-out dd.sm { font-size: 1.25rem; }
.roi-out .fine { font-size: .8rem; color: var(--muted-d); margin: 18px 0 0; border-top: 1px solid var(--line-d); padding-top: 14px; }

/* ---------- assessment form extras ---------- */
.field select { width: 100%; }
.assess-points { display: grid; gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.assess-points li { padding-left: 30px; position: relative; }
.assess-points li::before { content: counter(a); counter-increment: a; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--yellow); color: var(--ink); font: 700 .75rem var(--mono); display: grid; place-items: center; }
.assess-points { counter-reset: a; }

@media (max-width: 960px) {
  .pillars, .who { grid-template-columns: 1fr; }
  .aidemo-grid { grid-template-columns: 1fr; }
  .aidemo-steps { grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .aidemo-steps li { font-size: 0; padding: 8px 0; justify-content: center; }
  .aidemo-steps li::before { margin: 0; }
  .roi { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .aidemo-dash { grid-template-columns: repeat(2, 1fr); }
  .roi-in .row { grid-template-columns: 1fr 100px; }
  .aidemo-pane { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .aidemo-steps li, .pillar { transition: none; } }

/* ---------- homepage hero visual + proof bar ---------- */
.hx-grid { grid-template-columns: 1.22fr 1fr; }
.hero .btn-row .btn { padding: 15px 17px; font-size: .92rem; white-space: nowrap; }
.hx { background: #121211; border: 1px solid var(--line-d); border-radius: 18px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02) inset; overflow: hidden; max-width: 520px; margin-left: auto; }
.hx-bar { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line-d); background: #171715; font-size: .85rem; color: #e9e8e3; }
.hx-dots { display: flex; gap: 6px; } .hx-dots i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a37; }
.hx-tag { margin-left: auto; font: 600 .66rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); border: 1px solid rgba(255,212,0,.4); border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
.hx-steps { list-style: none; margin: 0; padding: 10px 14px 6px; }
.hx-steps li { display: grid; grid-template-columns: 28px 1fr auto; gap: 14px; align-items: center; padding: 14px 6px; border-bottom: 1px solid rgba(255,255,255,.06); animation: hxStep 10s infinite; animation-delay: calc(var(--i) * 1.1s); }
.hx-steps li:last-child { border-bottom: 0; }
.hx-n { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--green); display: grid; place-items: center; color: var(--green); font-size: .8rem; }
.hx-n::before { content: "✓"; }
.hx-steps li:last-child .hx-n { border-color: var(--yellow); color: var(--yellow); }
.hx-steps li:last-child .hx-n::before { content: "●"; font-size: .6rem; }
.hx-steps b { display: block; color: #fff; font-weight: 600; font-size: .98rem; }
.hx-steps small { display: block; color: var(--muted-d); font-size: .8rem; margin-top: 2px; }
.hx-steps em { font: 600 .68rem var(--mono); font-style: normal; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.07); color: #c9c7c0; white-space: nowrap; }
.hx-steps em.ok { background: rgba(63,178,127,.16); color: var(--green); } .hx-steps em.amber { background: rgba(232,163,61,.16); color: var(--amber); } .hx-steps em.hot { background: var(--yellow); color: var(--ink); }
.hx-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; background: #171715; border-top: 1px solid var(--line-d); text-decoration: none; color: var(--muted-d); font-size: .85rem; transition: background .2s; }
.hx-foot b { color: #fff; white-space: nowrap; } .hx-foot i { font-style: normal; display: inline-block; transition: transform .2s var(--ease); }
.hx-foot:hover { background: #1e1e1b; } .hx-foot:hover i { transform: translateX(4px); }
@keyframes hxStep { 0% { opacity: .35; } 8%, 88% { opacity: 1; } 100% { opacity: .35; } }
.proof { padding: 26px 0; border-top: 1px solid var(--line-d); }
.proof-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.proof-list li { display: grid; gap: 3px; padding-left: 14px; border-left: 2px solid var(--yellow); }
.proof-list b { color: #fff; font-size: .95rem; font-weight: 600; } .proof-list span { color: var(--muted-d); font-size: .84rem; line-height: 1.45; }
.proof-list a { color: #fff; text-underline-offset: 3px; }
@media (max-width: 960px) { .hx { margin: 0 auto; } .hx-grid { grid-template-columns: 1fr; } .proof-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .proof-list { grid-template-columns: 1fr; gap: 16px; } .hx-steps li { grid-template-columns: 26px 1fr; } .hx-steps em { display: none; } }
@media (prefers-reduced-motion: reduce) { .hx-steps li { animation: none; opacity: 1; } }