/* ============================================================
   AnyTeam product UI kit — for the in-page animation cards.

   Every value here is sampled from real screenshots of the
   AnyTeam desktop app (product-hero.png, reps-hero-meeting-prep.jpg)
   so the animations sit seamlessly next to the product shots used
   as heroes on /product/ and /product/for-sales-reps/.

   Do not introduce colours that are not in this file.
   ============================================================ */

:root{
  /* surfaces, sampled */
  --at-page:#F2F1ED;        /* app background          */
  --at-card:#F7F7F4;        /* card / row background   */
  --at-white:#FFFFFF;       /* input + ghost button    */
  --at-line:#E8E7E4;        /* hairline border         */
  --at-chip:#E2E2DF;        /* active rail chip, number chip */

  /* ink */
  --at-ink:#1C1B16;         /* headings, active pill   */
  --at-mid:#4A4943;
  --at-muted:#72716B;       /* secondary text          */

  /* actions */
  --at-primary:#4B6971;     /* New Agent / Join Meeting, sampled */
  --at-greenbg:#E7F4DA;     /* Ready pill background          */
  --at-green:#7DAA35;       /* Ready dot                      */
  --at-bar:#111109;         /* ask-anything bar        */

  /* status — the only colour in the product beyond the above */
  --at-orange:#F54900;
  --at-red:#A33A2C;
  --at-gold:#C59933;
  --at-olive:#7DAA35;

  --at-ui:'Google Sans Flex','Plus Jakarta Sans',system-ui,-apple-system,
          BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --at-ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:var(--at-ui);
  background:transparent;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Every icon in these cards is a stroked 24-grid SVG. Default them here so a
   new icon can never render as a filled black blob. */
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.content svg,.crumb svg,.meta svg{width:10px;height:10px;flex:none}
.crumb svg{width:9px;height:9px;opacity:.75}

/* ---------- stage scaffolding (scaled to fit its card) ---------- */
.stagewrap{position:relative;width:100%}
.stage{position:relative;transform-origin:top left}

/* ---------- the app window ---------- */
.app{
  position:absolute;inset:0;
  background:var(--at-page);
  /* No border or radius here: the stage is scaled, so any hairline drawn
     inside it lands on a fraction of a pixel and reads as a smudge. The
     embedding page draws the edge on the iframe, at 1:1. */
  overflow:hidden;
  display:flex;flex-direction:column;
}

/* title bar: traffic lights, nav, search pill, right-hand pills */
.tbar{
  height:30px;flex:none;display:flex;align-items:center;gap:9px;
  padding:0 11px;border-bottom:1px solid var(--at-line);
  background:var(--at-page);
}
.panel{display:flex;align-items:center;color:#8B8A85;flex:none}
.panel svg{width:12px;height:12px}
.badge{display:inline-flex;align-items:center;justify-content:center;
       min-width:12px;height:12px;padding:0 3px;margin-left:3px;border-radius:999px;
       background:var(--at-primary);color:#fff;font-size:7px;font-weight:700}
.tbell{position:relative;color:var(--at-ink);display:flex;flex:none}
.tbell svg{width:11px;height:11px}
.tbell b{position:absolute;top:-4px;right:-5px;min-width:11px;height:11px;padding:0 3px;
         border-radius:999px;background:var(--at-primary);color:#fff;
         font-size:6.5px;font-weight:700;display:grid;place-items:center}
.tws{display:flex;align-items:center;gap:3px;font-size:8.5px;font-weight:500;
     color:var(--at-ink);flex:none}
.tws svg{width:9px;height:9px;opacity:.6}
.tnav{display:flex;gap:7px;color:#8B8A85;flex:none;margin-left:2px}
.tnav svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.9;
          stroke-linecap:round;stroke-linejoin:round}
.tsearch{
  flex:1 1 auto;max-width:210px;margin:0 auto;height:18px;
  background:var(--at-white);border:1px solid var(--at-line);border-radius:999px;
  display:flex;align-items:center;gap:5px;padding:0 8px;
  font-size:8px;color:#9A9993;
}
.tsearch svg{width:8px;height:8px;stroke:#9A9993;fill:none;stroke-width:2}
.tsearch .kbd{margin-left:auto;font-size:7px;color:#A9A8A2}
.tright{display:flex;align-items:center;gap:6px;flex:none}
.tpill{
  display:flex;align-items:center;gap:4px;height:17px;padding:0 7px;
  background:var(--at-white);border:1px solid var(--at-line);border-radius:999px;
  font-size:8px;font-weight:500;color:var(--at-ink);
}
.tpill svg{width:9px;height:9px;stroke:var(--at-ink);fill:none;stroke-width:1.8;
           stroke-linecap:round;stroke-linejoin:round}
.tav{width:15px;height:15px;border-radius:50%;overflow:hidden;background:var(--at-chip);flex:none}
.tav img{width:100%;height:100%;object-fit:cover;display:block}

/* body = rail + content */
.abody{flex:1 1 auto;display:flex;min-height:0}
/* With no title bar, the rail needs its own top padding. */
.app > .abody:first-child .rail{padding-top:11px}

/* left icon rail */
.rail{
  width:46px;flex:none;border-right:1px solid var(--at-line);
  background:var(--at-page);
  display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px 0;
}
.logo{width:18px;height:18px;border-radius:5px;background:var(--at-ink);
      display:grid;place-items:center;flex:none;margin-bottom:3px}
.logo svg{width:10px;height:10px;fill:#fff}
.rnav{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%}
.rnav .ic{width:24px;height:20px;border-radius:6px;display:grid;place-items:center}
.rnav svg{width:13px;height:13px;stroke:var(--at-mid);fill:none;stroke-width:1.6;
          stroke-linecap:round;stroke-linejoin:round}
.rnav span{font-size:7px;color:var(--at-muted);letter-spacing:.005em}
.rnav.on .ic{background:var(--at-chip)}
.rnav.on svg{stroke:var(--at-ink)}
.rnav.on span{color:var(--at-ink);font-weight:500}

/* content column */
.content{flex:1 1 auto;min-width:0;padding:11px 13px;display:flex;flex-direction:column;gap:8px;overflow:hidden}

/* ---------- typography ---------- */
.crumb{font-size:8px;color:var(--at-muted);display:flex;align-items:center;gap:4px}
.h-page{font-size:16px;font-weight:700;color:var(--at-ink);letter-spacing:-.017em;line-height:1.1}
.h-sec{font-size:11px;font-weight:700;color:var(--at-ink);letter-spacing:-.01em}
.meta{font-size:8.5px;color:var(--at-muted);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.meta b{font-weight:500;color:var(--at-ink)}
.sep{color:#B9B8B2}
.lbl{font-size:7.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#93928C}
.body{font-size:9px;color:var(--at-ink);line-height:1.5}
.body b{font-weight:600}
.dim{color:var(--at-muted)}

/* ---------- components ---------- */
.card{background:var(--at-card);border:1px solid var(--at-line);border-radius:9px;padding:8px 10px}

/* segmented tabs: light track, ink pill for the active one */
.seg{display:inline-flex;align-items:center;gap:2px;background:var(--at-card);
     border:1px solid var(--at-line);border-radius:999px;padding:2px}
.seg span{font-size:8.5px;font-weight:500;color:var(--at-muted);padding:3px 9px;border-radius:999px}
.seg span.on{background:var(--at-ink);color:#fff;font-weight:600}
.seg .count{display:inline-flex;align-items:center;justify-content:center;
            min-width:11px;height:11px;margin-left:4px;padding:0 3px;border-radius:999px;
            background:var(--at-chip);color:var(--at-mid);font-size:7px;font-weight:600}

/* numbered chip, as used in Objectives and 5 Things to Know */
.num{width:15px;height:15px;flex:none;border-radius:4px;background:var(--at-chip);
     display:grid;place-items:center;font-size:8px;font-weight:600;color:var(--at-mid)}

/* account brand tile */
.logotile{width:15px;height:15px;border-radius:4px;flex:none;display:grid;place-items:center;
          font-size:7px;font-weight:700;color:#fff;letter-spacing:-.02em;overflow:hidden}

/* avatar */
.av{width:16px;height:16px;border-radius:50%;flex:none;overflow:hidden;background:var(--at-chip)}
.av img{width:100%;height:100%;object-fit:cover;display:block}

/* person chip: avatar + name in a bordered pill */
.person{display:inline-flex;align-items:center;gap:4px;background:var(--at-white);
        border:1px solid var(--at-line);border-radius:999px;padding:2px 7px 2px 2px;
        font-size:8px;font-weight:500;color:var(--at-ink)}
.person .av{width:13px;height:13px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:4px;height:19px;padding:0 9px;
     border-radius:999px;font-size:8.5px;font-weight:600;white-space:nowrap}
.btn svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2;
         stroke-linecap:round;stroke-linejoin:round}
.btn-primary{background:var(--at-primary);color:#fff}
.btn-ghost{background:var(--at-white);border:1px solid var(--at-line);color:var(--at-ink)}

/* status dot + pill */
.dot{width:6px;height:6px;border-radius:50%;display:block;flex:none}
.d-orange{background:var(--at-orange)} .d-red{background:var(--at-red)}
.d-gold{background:var(--at-gold)}     .d-olive{background:var(--at-olive)}
.statpill{display:inline-flex;align-items:center;gap:4px;height:15px;padding:0 7px;
          border-radius:999px;background:var(--at-white);border:1px solid var(--at-line);
          font-size:8px;font-weight:500;color:var(--at-ink)}
.statpill.ok{background:var(--at-greenbg);border-color:transparent;color:#3F5A22}
.statpill.ok .dot{background:var(--at-green)}

/* ask-anything bar */
.askbar{display:flex;align-items:center;gap:6px;background:var(--at-bar);border-radius:999px;
        padding:5px 5px 5px 11px;font-size:8.5px;color:#8E8D86}
.askbar .send{margin-left:auto;width:15px;height:15px;border-radius:50%;background:#2B2A24;
              display:grid;place-items:center;flex:none}
.askbar .send svg{width:8px;height:8px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* rows */
.row{display:flex;align-items:center;gap:7px}
.rows{display:flex;flex-direction:column;gap:5px}
.divide{border-top:1px solid var(--at-line)}

/* Agents list — mirrors the Agents screen in reps-hero-agents.jpg:
   a status pill and a schedule chip on one row, the agent name, what it
   does, then a hairline footer carrying the last run. */
.agentcard{background:var(--at-white);border:1px solid var(--at-line);border-radius:10px;
           padding:9px 11px 0;display:flex;flex-direction:column}
.agentcard .top{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.chip{display:inline-flex;align-items:center;gap:4px;height:15px;padding:0 7px;border-radius:999px;
      background:var(--at-card);border:1px solid var(--at-line);
      font-size:8px;font-weight:500;color:var(--at-mid)}
.chip svg{width:8px;height:8px;stroke:var(--at-muted)}
.agentcard .name{font-size:11px;font-weight:700;color:var(--at-ink);letter-spacing:-.012em}
.agentcard .desc{font-size:8.5px;line-height:1.5;color:var(--at-muted);margin-top:3px}
.agentcard .foot{margin-top:8px;padding:6px 0;border-top:1px solid var(--at-line);
                 display:flex;align-items:center;font-size:8px;color:var(--at-muted)}
.agentcard .foot .dots{margin-left:auto;letter-spacing:1px;color:#A9A8A2}
.agentcard .foot a{color:var(--at-primary);font-weight:500;text-decoration:none}

/* page header + underline tabs, as on that screen */
.pghead{display:flex;align-items:center;gap:8px}
.tabs{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--at-line);padding-bottom:5px}
.tabs span{font-size:9.5px;font-weight:500;color:var(--at-muted);padding-bottom:4px;margin-bottom:-6px}
.tabs span.on{color:var(--at-ink);font-weight:600;border-bottom:1.5px solid var(--at-ink)}
.beta{display:inline-flex;align-items:center;height:12px;padding:0 5px;border-radius:3px;
      background:var(--at-chip);color:var(--at-mid);font-size:6.5px;font-weight:700;letter-spacing:.06em}

/* ---------- motion ---------- */
.rise{opacity:0;transform:translateY(7px);transition:opacity .5s ease, transform .6s var(--at-ease)}
.rise.in{opacity:1;transform:none}
.fade{opacity:0;transition:opacity .55s ease}
.fade.in{opacity:1}
.caret{display:inline-block;width:1.4px;height:11px;background:var(--at-ink);
       vertical-align:-2px;margin-left:1px;animation:atblink 1.05s step-end infinite}
@keyframes atblink{0%,100%{opacity:1}50%{opacity:0}}
.caret.done{animation:none;opacity:0}