/* =========================================================
   AgentMapper — SHARED DESIGN SYSTEM
   One source of truth for tokens + reusable components.
   Every standalone page links this file; on final merge it is
   pasted once into agentmapper_5.html's <style>.
   Page-specific layout (hero grid, live preview, path steps,
   org chart, etc.) stays in each page's own <style> block.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,600&family=Nunito:wght@400;500;600;700;800;900&display=swap");

:root{
  --ink:#263445; --ink-soft:#36495F; --slate:#5C6B7E; --slate-2:#93A0B0;
  --paper:#FFFFFF; --canvas:#EEF1F6; --line:#E3E8EF; --line-soft:#EDF0F5;
  --amber:#F5A524; --amber-deep:#C9800F; --amber-soft:#FCEFD6;
  /* friendly team pastels */
  --mint:#D9F0E4; --mint-ink:#2E9E6E;
  --sky:#DBEAFB;  --sky-ink:#3B82C4;
  --peach:#FCE6D2;--peach-ink:#D98A3A;
  --lilac:#E9E3F8;--lilac-ink:#7C68C9;
  --rose:#FBE0E7; --rose-ink:#D45C82;
  --shadow:0 30px 64px -42px rgba(38,52,69,.5);
  --display:"Fraunces", Georgia, serif;
  --body:"Nunito", system-ui, -apple-system, sans-serif;
}

/* ---------- global base ---------- */
*{box-sizing:border-box;}
html{margin:0;min-height:100%;scroll-behavior:smooth;}
body{
  margin:0; min-height:100%; font-family:var(--body); color:var(--ink); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background:
    linear-gradient(0deg, rgba(38,52,69,.022) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(38,52,69,.022) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(1200px 560px at 84% -10%, #FBEAC9 0%, rgba(251,234,201,0) 58%),
    radial-gradient(1000px 520px at -6% 6%, #DEEAFB 0%, rgba(222,234,251,0) 55%),
    radial-gradient(900px 600px at 50% 120%, #DCF1E6 0%, rgba(220,241,230,0) 60%),
    var(--canvas);
}
button,input,textarea,select{font:inherit;}
button{cursor:pointer;}

/* ---------- page container ---------- */
.page{ width:min(1180px, calc(100% - 40px)); margin:0 auto; }

/* ---------- top bar / brand chrome ---------- */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:24px 0 12px; }
.brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.brand-logo{ height:38px; width:auto; display:block; }
@media (max-width:760px){ .brand-logo{ height:32px; } }
.brand-mark{
  width:42px; height:42px; border-radius:14px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg,#FBB948,var(--amber-deep));
  box-shadow:0 12px 24px -10px rgba(201,128,15,.75);
}
.brand-mark svg{ width:23px; height:23px; }
.brand-name{ font-family:var(--display); font-weight:600; font-size:22px; letter-spacing:-.01em; }
.time-pill{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  color:var(--amber-deep); background:#FFFDF8; border:1.5px solid #F4DDAE;
  border-radius:999px; padding:9px 15px; font-size:13.5px; font-weight:800;
  box-shadow:0 10px 26px -14px rgba(201,128,15,.5);
}
.time-pill svg{ width:16px; height:16px; }
.time-pill .ping{ width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 0 rgba(245,165,36,.6); animation:ping 2.4s ease-out infinite; }
@keyframes ping{ 0%{box-shadow:0 0 0 0 rgba(245,165,36,.55);} 70%{box-shadow:0 0 0 7px rgba(245,165,36,0);} 100%{box-shadow:0 0 0 0 rgba(245,165,36,0);} }

/* ---------- shared text bits ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:11px; margin:0 0 18px;
  color:var(--amber-deep); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
}
.eyebrow::before{ content:""; width:34px; height:2px; border-radius:2px; background:var(--amber); }
.step-tag{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; background:var(--amber-soft); color:#8f5b08; font-size:12px; font-weight:900; }

/* ---------- card shell (gradient border) ---------- */
.panel-shell{
  padding:3px; border-radius:24px;
  background:linear-gradient(135deg, rgba(245,165,36,.55), rgba(124,104,201,.32) 45%, rgba(46,158,110,.4));
  box-shadow:var(--shadow);
}
.panel{ display:grid; gap:16px; padding:26px; border-radius:21px; background:var(--paper); }
.panel-heading{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.panel-heading h2{ margin:0; font-family:var(--display); font-weight:600; font-size:24px; color:var(--ink); letter-spacing:-.01em; }
.panel-heading p{ margin:5px 0 0; color:var(--slate-2); font-size:13.5px; font-weight:600; }

/* ---------- fields ---------- */
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.field{ display:grid; gap:7px; }
.field.full{ grid-column:1 / -1; }
label{ font-size:13.5px; font-weight:800; color:var(--ink-soft); }
.hint{ margin:-2px 0 0; color:var(--slate-2); font-size:12.5px; font-weight:600; line-height:1.45; }
input,textarea,select{
  width:100%; border:2px solid var(--line); border-radius:13px; background:#F7F9FC; color:var(--ink);
  padding:12px 14px; outline:none; font-weight:500;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
textarea{ min-height:108px; resize:vertical; line-height:1.55; }
input::placeholder,textarea::placeholder{ color:var(--slate-2); font-weight:500; }
input:focus,textarea:focus,select:focus{ border-color:var(--amber); background:#fff; box-shadow:0 0 0 4px rgba(245,165,36,.18); }
input.bad,textarea.bad{ border-color:#E06666; background:#FDF2F2; }
.err{ display:none; color:#CC4B4B; font-size:12px; font-weight:800; }
.err.show{ display:block; }

/* ---------- signup consent checkboxes ---------- */
.consent-block{ grid-column:1 / -1; margin:18px 0 12px; padding-top:20px; border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:10px; }
/* both lines: a matched pair of fine print, same size — only a subtle color step apart */
.consent-row{ display:flex; align-items:flex-start; gap:10px; padding:3px 0; cursor:pointer;
  font-size:12.5px; line-height:1.5; font-weight:600; color:var(--slate); }
.consent-row a{ color:var(--amber-deep); font-weight:800; text-decoration:none; }
.consent-row a:hover{ text-decoration:underline; }
/* tidy ~16px custom checkbox: rounded, fills with accent + check when ticked; stays keyboard-focusable */
.consent-row input[type="checkbox"]{ appearance:none; -webkit-appearance:none; flex:0 0 auto; box-sizing:border-box;
  width:14px; height:14px; padding:0; margin:2px 0 0; border:1.5px solid #C9D2DD; border-radius:4px; background:#fff;
  cursor:pointer; transition:background-color .15s ease, border-color .15s ease; }
.consent-row input[type="checkbox"]:hover{ border-color:var(--amber); }
.consent-row input[type="checkbox"]:checked{ background-color:var(--amber-deep); border-color:var(--amber-deep);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
  background-size:76%; background-position:center; background-repeat:no-repeat; }
.consent-row input[type="checkbox"]:focus-visible{ outline:2px solid var(--amber-deep); outline-offset:2px; }
.consent-row input[type="checkbox"].bad{ border-color:#CC4B4B; outline:2px solid rgba(204,75,75,.3); outline-offset:1px; }
/* SMS line: same size/weight as Terms, just ONE small step lighter (not a heavy gray) */
.consent-row:has(#agreeSms){ color:#6D7B8D; }

/* ---------- buttons ---------- */
.actions{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:2px; }
.btn-row{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
.primary-btn{
  min-height:52px; border:0; border-radius:14px; color:#fff; background:var(--ink);
  padding:14px 24px; display:inline-flex; align-items:center; gap:11px; font-weight:900; font-size:16px;
  box-shadow:0 16px 30px -14px rgba(38,52,69,.75);
  transition:transform .16s ease, background .2s ease, box-shadow .2s ease;
}
.primary-btn svg{ width:18px; height:18px; transition:transform .18s ease; }
.primary-btn:hover{ background:var(--ink-soft); transform:translateY(-1px); }
.primary-btn:hover svg{ transform:translateX(3px); }
.primary-btn:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; }
.ghost-btn{
  min-height:52px; border:2px solid var(--line); border-radius:14px; color:var(--ink-soft); background:#fff;
  padding:13px 20px; display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:15px;
  transition:border-color .16s ease, color .16s ease, transform .16s ease;
}
.ghost-btn svg{ width:17px; height:17px; }
.ghost-btn:hover{ border-color:var(--amber); color:var(--amber-deep); transform:translateY(-1px); }
.ghost-btn:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; }
.ghost-btn.saved{ border-color:var(--mint-ink); color:var(--mint-ink); background:#EAF7F0; }
.microcopy{ margin:0; color:var(--slate-2); font-size:12.5px; font-weight:600; line-height:1.45; max-width:260px; }

/* ---------- entrance ---------- */
@keyframes floatUp{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }
.lift{ animation:floatUp 640ms cubic-bezier(.2,.7,.2,1) both; }
.d2{animation-delay:80ms;} .d3{animation-delay:160ms;} .d4{animation-delay:250ms;} .d5{animation-delay:340ms;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .lift,.time-pill .ping{ animation:none; }
  .primary-btn,.primary-btn svg,input,textarea,select{ transition:none; }
}

/* ---------- shared responsive ---------- */
@media (max-width:760px){
  .page{ width:min(100% - 28px,1180px); }
  .topbar{ flex-direction:column; align-items:flex-start; }
  .field-grid{ grid-template-columns:1fr; }
  .panel-heading,.actions{ flex-direction:column; align-items:stretch; }
  .step-tag{ align-self:flex-start; }
  .primary-btn,.ghost-btn{ width:100%; justify-content:center; }
  .microcopy{ max-width:none; }
}

/* ---------- site footer (all pages) ---------- */
.site-footer{ border-top:1px solid #e6e9ee; margin-top:64px; padding:28px 24px; background:transparent; }
.site-footer__inner{ max-width:1100px; margin:0 auto; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:14px; }
.site-footer__brand img{ display:block; height:22px; width:auto; }
.site-footer__links{ display:flex; gap:20px; flex-wrap:wrap; }
.site-footer__links a{ color:#5b6573; text-decoration:none; font-size:.9rem; }
.site-footer__links a:hover{ color:#1f2733; }
.site-footer__legal{ color:#8a93a1; font-size:.82rem; width:100%; }
@media (max-width:640px){ .site-footer__inner{ flex-direction:column; align-items:flex-start; } }