/* ===================================================================
   AV89.ai design system — variables and components lifted from av89.ai
   so the sandbox is visually part of the same site.
   =================================================================== */
:root{
  --orange:#F97316; --orange-dk:#EA580C; --orange-lt:#FEEEE0;
  --orange-dim:rgba(249,115,22,.08);
  --dark:#16191E; --dark-2:#1E2126;
  --text:#1A1A1A; --muted:#374151; --muted-lt:#6B7280;
  --bg:#FFFFFF; --bg-soft:#F7F9FC; --bg-gray:#F0F2F5;
  --border:#D5DBE5; --border-lt:#E9EDF2;
  --yellow:#FFC400;
  --r1:4px; --r2:8px; --r3:16px; --r4:100px;
  --sh:0 2px 8px rgba(0,0,0,.08);
  --sh-md:0 4px 20px rgba(0,0,0,.1);
  --sh-lg:0 8px 40px rgba(0,0,0,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,'Neue Haas Grotesk','Inter',system-ui,'Segoe UI',sans-serif;
     color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}

/* header */
.site-hd{display:flex;align-items:center;gap:16px;padding:14px 6%;background:var(--dark);
         position:sticky;top:0;z-index:20}
.logo{font-weight:700;font-size:1.2rem;letter-spacing:-.02em;color:#fff;text-decoration:none}
.logo span{color:var(--orange)}
.hd-tag{font-size:.78rem;color:rgba(255,255,255,.55);letter-spacing:.08em;text-transform:uppercase}
.hd-right{margin-left:auto;display:flex;gap:10px;align-items:center}

/* type */
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
         color:var(--orange);margin-bottom:.6rem}
h1{font-size:2.3rem;font-weight:800;letter-spacing:-.025em;line-height:1.15;color:var(--text)}
h2{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.2rem}
.lead{font-size:1.03rem;color:var(--muted);max-width:76ch;margin-top:.9rem}
.sec{padding:46px 6%}
.sec.soft{background:var(--bg-soft);border-top:1px solid var(--border-lt);
          border-bottom:1px solid var(--border-lt)}
.wrap{max-width:1140px;margin:0 auto}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;font-weight:600;
     padding:.65rem 1.35rem;border-radius:var(--r2);border:none;cursor:pointer;
     transition:all .18s;font-family:inherit;text-decoration:none}
.btn-orange{background:var(--orange);color:#fff}
.btn-orange:hover{background:var(--orange-dk)}
.btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--border)}
.btn-outline:hover{border-color:var(--orange);color:var(--orange)}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:1.6rem}
/* each tile carries its own accent: a coloured rail, tinted number chip and a
   faint wash of the same hue, so the five points read as distinct ideas */
.tile{background:#fff;border:1px solid var(--border);border-left:5px solid var(--ac,var(--orange));
      border-radius:var(--r3);padding:1.5rem 1.5rem 1.55rem;box-shadow:var(--sh);
      transition:all .2s;position:relative;overflow:hidden}
.tile:before{content:'';position:absolute;inset:0;background:var(--ac,var(--orange));
             opacity:.045;pointer-events:none}
.tile:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.tile .n{display:inline-block;font-family:'Courier New',monospace;font-size:.7rem;
         font-weight:700;color:#fff;background:var(--ac,var(--orange));letter-spacing:.08em;
         padding:.12rem .5rem;border-radius:var(--r1);position:relative}
.tile b{display:block;font-size:1.03rem;margin:.55rem 0 .45rem;color:var(--text);
        position:relative;letter-spacing:-.01em}
.tile p{font-size:.88rem;color:var(--muted);line-height:1.62;position:relative}

/* closing call-to-action card - deliberately unlike the five above */
.cta-card{margin-top:22px;background:linear-gradient(135deg,#16191E 0%,#24303B 100%);
          border:1px solid #2C3742;border-radius:var(--r3);padding:2rem 2.1rem;
          box-shadow:var(--sh-lg);position:relative;overflow:hidden}
.cta-card:before{content:'';position:absolute;top:0;left:0;right:0;height:5px;
                 background:linear-gradient(90deg,var(--orange),var(--yellow))}
.cta-flag{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.12em;
          text-transform:uppercase;color:#16191E;background:var(--yellow);
          padding:.24rem .7rem;border-radius:var(--r4)}
.cta-card h3{color:#fff;font-size:1.32rem;font-weight:800;letter-spacing:-.02em;margin:.9rem 0 .5rem}
.cta-card .body{color:#C8D2DC;font-size:.95rem;line-height:1.65;max-width:80ch}
.cta-needs{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
           gap:.5rem 1.5rem;margin:1.2rem 0 1.1rem;list-style:none}
.cta-needs li{color:#E4EAF0;font-size:.9rem;line-height:1.5;padding-left:1.5rem;position:relative}
.cta-needs li:before{content:'✓';position:absolute;left:0;color:var(--yellow);font-weight:800}
.cta-easy{background:rgba(249,115,22,.14);border:1px solid rgba(249,115,22,.4);
          border-radius:var(--r2);padding:.85rem 1.05rem;color:#FFD9BF;font-size:.9rem;line-height:1.6}
.cta-close{color:#fff;font-weight:700;font-size:1rem;margin-top:1.1rem;
           display:flex;align-items:center;gap:.5rem}
.cta-close span{color:var(--orange);font-size:1.2rem}

/* numbered steps */
.steps{counter-reset:s;display:grid;gap:.7rem;margin-top:1.4rem;max-width:74ch}
.steps li{list-style:none;counter-increment:s;position:relative;padding-left:2.4rem;
          font-size:.95rem;color:var(--muted)}
.steps li:before{content:counter(s);position:absolute;left:0;top:0;width:1.6rem;height:1.6rem;
     border-radius:var(--r4);background:var(--orange-dim);color:var(--orange);
     border:1.5px solid var(--orange);font-size:.75rem;font-weight:700;
     display:flex;align-items:center;justify-content:center}

/* agent folder cards on the home page */
.folders{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px;margin-top:1.6rem}
.fold{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--border);
      border-radius:var(--r3);padding:1.6rem;box-shadow:var(--sh);transition:all .2s}
.fold:hover{box-shadow:var(--sh-lg);transform:translateY(-3px);border-color:var(--orange)}
.fold-top{display:flex;align-items:center;gap:14px}
.fold svg{width:52px;height:44px;flex-shrink:0}
.fold .nm{font-size:1.12rem;font-weight:800;letter-spacing:-.01em}
.fold p{font-size:.89rem;color:var(--muted);margin:.75rem 0 0;line-height:1.6}
.pill{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.1em;
      text-transform:uppercase;padding:.2rem .6rem;border-radius:var(--r4);margin-top:.9rem}
.pill.live{background:var(--orange);color:#fff}
.pill.soon{background:var(--bg-gray);color:var(--muted-lt);border:1px solid var(--border)}
.rule{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--orange),var(--yellow));
      width:56px;margin-bottom:1.1rem}
footer{padding:26px 6% 40px;font-size:.8rem;color:var(--muted-lt);border-top:1px solid var(--border-lt)}