/* ai/ai.css -- STEP CARD
   PATCHED 2026-08-25 13:20 MDT -- NEW. Every product loads ai.css, so a new shell gets
   the card for free. Override the variables per product; do not edit the rules. */

:root{
  --sc-bg:#171717;   --sc-edge:#2e2e2e;   --sc-title:#ffffff;  --sc-body:#a1a1a1;
  --sc-accent:#2563eb;  --sc-pill:#262626;  --sc-arrow:#a1a1a1;
  --sc-radius:16px;  --sc-font:Inter,system-ui,-apple-system,sans-serif;
  --sc-title-size:20px;  --sc-body-size:15px;
}

.sc-card{
  position:relative;
  background:var(--sc-bg);
  border:1px solid var(--sc-edge);
  border-radius:var(--sc-radius);
  font-family:var(--sc-font);
  padding:30px 68px 22px;              /* 68px sides keeps the title clear of the arrows */
}

.sc-title{ font-size:var(--sc-title-size); font-weight:600; color:var(--sc-title); margin:0 0 12px; }
.sc-body { font-size:var(--sc-body-size); font-weight:400; line-height:1.6; color:var(--sc-body); margin:0; }

/* ---- ARROWS. Top corners, long and thin, no button chrome. ---- */
.sc-arrow{
  position:absolute; top:24px;
  width:38px; height:18px;
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--sc-arrow); opacity:.7;
  transition:opacity .12s, transform .12s;
}
.sc-back{ left:18px; }
.sc-fwd { right:18px; }
.sc-arrow:hover:not([disabled]){ opacity:1; }
.sc-back:hover:not([disabled]){ transform:translateX(-3px); }
.sc-fwd:hover:not([disabled]) { transform:translateX(3px); }
.sc-arrow[disabled]{ opacity:.2; cursor:default; }
.sc-arrow svg{ display:block; width:100%; height:100%; }

/* ---- STEP PILLS ---- */
.sc-pills{ display:flex; align-items:center; gap:10px; margin-top:22px; flex-wrap:wrap; }
.sc-pill{
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sc-font); font-size:13px; font-weight:500;
  background:var(--sc-pill); color:var(--sc-body);
  border:0; cursor:pointer;
}
.sc-pill.on{ background:var(--sc-accent); color:#fff; }
.sc-all{
  font-family:var(--sc-font); font-size:14px; color:var(--sc-body);
  background:none; border:0; cursor:pointer; margin-left:6px;
}

/* ---- MARKUP ----
<div class="sc-card">
  <button class="sc-arrow sc-back" aria-label="Back" disabled>
    <svg viewBox="0 0 38 18" fill="none" stroke="currentColor"
         stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
      <path d="M37 9 H2"/><path d="M9 3 L2 9 L9 15"/>
    </svg>
  </button>
  <button class="sc-arrow sc-fwd" aria-label="Forward">
    <svg viewBox="0 0 38 18" fill="none" stroke="currentColor"
         stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
      <path d="M1 9 H36"/><path d="M29 3 L36 9 L29 15"/>
    </svg>
  </button>
  <h3 class="sc-title">Create the site</h3>
  <p  class="sc-body">...</p>
  <div class="sc-pills">
    <button class="sc-pill on">1</button>
    <button class="sc-pill">2</button>
    <button class="sc-all">View all steps</button>
  </div>
</div>
---- */