/* Leadbro AI. Extracted from templates/base.html so the app shell and the
   marketing shell can share one stylesheet instead of duplicating it.
   No build step: served straight off the /static mount. */

  :root{
    --ink:#191919; --yellow:#FBCC00; --green:#0A7A55; --red:#E5484D; --blue:#3E63DD;
    --paper:#FFFFFF; --wash:#FFFDF5; --muted:#565656; --line:#191919;
    --r-sm:10px; --r:12px; --r-lg:16px;
    --sh-sm:2px 2px 0 0 var(--ink);
    --sh:4px 4px 0 0 var(--ink);
    --sh-md:5px 5px 0 0 var(--ink);
    --sh-lg:6px 6px 0 0 var(--ink);
    --display:"Archivo Black","Arial Black",Impact,sans-serif;
    --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--wash); color:var(--ink);
    font:16px/1.55 var(--sans);
    background-image:radial-gradient(circle,rgba(0,0,0,.10) 1.2px,transparent 1.2px);
    background-size:22px 22px;
  }
  a{color:var(--ink); text-decoration-thickness:2px; text-underline-offset:2px}
  a:hover{text-decoration-color:var(--yellow)}

  /* ---------- type ---------- */
  h1,h2,h3,.display{font-family:var(--display); font-weight:400; letter-spacing:-.2px; margin:0}
  h1{font-size:clamp(34px,5.2vw,64px); line-height:.98; text-transform:uppercase}
  h2{font-size:clamp(22px,2.6vw,32px); line-height:1.06; margin:0 0 4px;
     overflow-wrap:anywhere}
  h3{font-size:19px; line-height:1.2}
  .lede{font-size:17px; color:var(--muted); margin:10px 0 0; max-width:60ch}
  .eyebrow{font:700 12px/1 var(--sans); text-transform:uppercase; letter-spacing:.13em;
           color:var(--muted); margin-right:-.13em}
  .muted{color:var(--muted); font-size:14px}
  code{font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
       background:var(--yellow); border:1.5px solid var(--ink); border-radius:5px; padding:1px 5px}

  /* ---------- shell ---------- */
  .wrap{max-width:1120px; margin:0 auto; padding:0 20px 96px}
  .topbar{border-bottom:3px solid var(--ink); background:var(--paper); margin-bottom:28px}
  .topbar-in{max-width:1120px; margin:0 auto; padding:12px 20px;
             display:flex; align-items:center; gap:14px; flex-wrap:wrap}
  .brand{display:flex; align-items:center; gap:10px; font-family:var(--display);
         font-size:19px; text-decoration:none; letter-spacing:-.1px}
  .brand .mark{width:32px; height:32px; border:2.5px solid var(--ink); border-radius:9px;
       background:var(--yellow); box-shadow:var(--sh-sm); display:grid; place-items:center;
       line-height:1}
  .brand-logo{width:36px; height:36px; border-radius:10px; border:2.5px solid var(--ink);
              box-shadow:var(--sh-sm); display:block; object-fit:cover; background:#111}
  .spacer{flex:1}
  .skip{position:absolute; left:-9999px; top:0; z-index:50; background:var(--yellow);
        border:3px solid var(--ink); border-radius:0 0 var(--r) 0; padding:10px 16px;
        font:800 13px/1 var(--sans); text-transform:uppercase; text-decoration:none}
  .skip:focus{left:0}
  .sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
      clip:rect(0 0 0 0); white-space:nowrap; border:0}

  /* ---------- surfaces ---------- */
  .card{background:var(--paper); border:3px solid var(--ink); border-radius:var(--r-lg);
        box-shadow:var(--sh-lg); padding:20px; margin-bottom:20px; overflow-wrap:anywhere}
  .card.tight{padding:14px 16px}
  .card.flat{box-shadow:var(--sh); border-width:2px; border-radius:var(--r)}
  .card.yellow{background:var(--yellow)}

  /* ---------- buttons ---------- */
  .btn{display:inline-flex; align-items:center; gap:7px; justify-content:center;
       font:800 15px/1 var(--sans); text-transform:uppercase; letter-spacing:.02em;
       text-indent:.02em;   /* offset the trailing letter-space so the label sits centred */
       background:var(--paper); color:var(--ink); border:3px solid var(--ink);
       border-radius:var(--r); box-shadow:var(--sh-md); padding:0 22px; min-height:48px;
       cursor:pointer; text-decoration:none; transition:transform .06s, box-shadow .06s}
  .btn:hover:not(:disabled){transform:translate(2px,2px); box-shadow:2px 2px 0 0 var(--ink)}
  .btn:active:not(:disabled){transform:translate(5px,5px); box-shadow:0 0 0 0 var(--ink)}
  .btn:focus-visible{outline:3px solid var(--blue); outline-offset:3px}
  .btn:disabled{opacity:.4; cursor:not-allowed; box-shadow:var(--sh-md); transform:none}
  .btn.primary{background:var(--yellow)}
  .btn.ink{background:var(--ink); color:var(--paper)}
  .btn.ink:hover:not(:disabled){background:#000}
  .btn.sm{font-size:13px; padding:0 14px; min-height:34px; border-width:2px;
          border-radius:var(--r-sm); box-shadow:var(--sh-sm)}
  .btn.sm:hover:not(:disabled){transform:translate(1px,1px); box-shadow:1px 1px 0 0 var(--ink)}
  .btn.go{background:var(--green); color:#fff}
  .btn.ghost{background:transparent; box-shadow:none; border-width:2px}
  .btn.ghost:hover:not(:disabled){background:var(--paper); transform:none; box-shadow:var(--sh-sm)}

  /* ---------- fields ---------- */
  label.lbl{display:block; font:700 11px/1 var(--sans); text-transform:uppercase;
            letter-spacing:.11em; color:var(--muted); margin:0 0 6px; padding-left:2px}
  input[type=text],input[type=email],input[type=url],textarea{
      width:100%; font:15px/1.5 var(--sans); color:var(--ink); background:var(--paper);
      border:2.5px solid var(--ink); border-radius:var(--r); padding:11px 13px}
  input:focus-visible,textarea:focus-visible{outline:3px solid var(--blue); outline-offset:2px;
      box-shadow:var(--sh)}
  input:focus,textarea:focus{box-shadow:var(--sh)}
  input[readonly],textarea[readonly]{background:#F4F4F2; color:var(--muted)}
  textarea{resize:vertical; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13.5px}
  .field{margin-top:14px}

  /* ---------- badges ---------- */
  .badge{display:inline-flex; align-items:center; gap:5px; font:800 11px/1 var(--sans);
         text-transform:uppercase; letter-spacing:.07em; padding:6px 9px 5px;
         text-indent:.07em;
         border:2px solid var(--ink); border-radius:999px; background:var(--paper);
         box-shadow:1px 1px 0 0 var(--ink); white-space:nowrap}
  .badge.new{background:#EFEFEC}
  .badge.drafted{background:#CFE0FF}
  .badge.approved{background:#B9F3D8}
  .badge.rejected{background:#EFEFEC; text-decoration:line-through; color:var(--muted)}
  .badge.sent{background:var(--green); color:#fff}
  .badge.failed{background:#FFD2D2}
  .badge.warn{background:#FFE0B2}                    /* a warning, not a failure */
  .badge.unverified{background:#EFEFEC; border-style:dashed}
  .badge.sending{background:#CFE0FF}
  .badge.dry{background:var(--yellow)}
  .badge.ready{background:var(--green); color:#fff}
  .badge.pending{background:#CFE0FF}
  /* A chip holds arbitrary model prose, so unlike a status badge it must wrap.
     Kept off .badge: progress steps and lead statuses are short and stay nowrap. */
  .chip{display:inline-block; font:600 12.5px/1.35 var(--sans); padding:5px 10px;
        border:2px solid var(--ink); border-radius:9px; background:#EFEFEC;
        box-shadow:1px 1px 0 0 var(--ink);
        white-space:normal; overflow-wrap:anywhere; max-width:100%}

  /* ---------- banners ---------- */
  .banner{border:3px solid var(--ink); border-radius:var(--r); padding:12px 16px;
          margin-bottom:20px; box-shadow:var(--sh); font-weight:600}
  .banner.error{background:#FFD2D2; white-space:pre-wrap; word-break:break-word}
  .banner.notice{background:#B9F3D8}

  /* ---------- table ---------- */
  .table-wrap{overflow-x:auto; border:3px solid var(--ink); border-radius:var(--r-lg);
              box-shadow:var(--sh-lg); background:var(--paper)}
  table{width:100%; border-collapse:collapse; min-width:720px}
  th{font:800 11px/1 var(--sans); text-transform:uppercase; letter-spacing:.1em;
     text-align:left; padding:13px 14px 11px; background:var(--yellow);
     border-bottom:3px solid var(--ink); white-space:nowrap}
  td{padding:12px 14px; border-bottom:2px solid #E8E8E4; vertical-align:middle}
  /* Tabular figures so counts and dates line up column-to-column. */
  td, .stat-n{font-variant-numeric:tabular-nums}
  tr:last-child td{border-bottom:none}
  tbody tr:hover{background:var(--wash)}

  /* ---------- layout helpers ---------- */
  .row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
  .between{justify-content:space-between}
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .grid2>*{min-width:0}   /* a wide child must never set the track floor */
  .stack{display:flex; flex-direction:column; gap:6px}
  details>summary{cursor:pointer; font-family:var(--display); font-size:15px;
                  text-transform:uppercase; letter-spacing:.3px; list-style:none}
  details>summary::-webkit-details-marker{display:none}
  details>summary::before{content:"▸ "; }
  details[open]>summary::before{content:"▾ "; }
  .err{color:#B4232A; font-size:13.5px; font-weight:600; margin-top:8px;
       white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word}
  .hr{height:3px; background:var(--ink); border:0; margin:26px 0; opacity:.12}

  /* ---------- icons ---------- */
  .ico{width:1.05em; height:1.05em; flex:none; display:block; vertical-align:-.16em;
       fill:currentColor; stroke:none}
  .ico.lg{width:22px; height:22px}
  .ico.xl{width:34px; height:34px}
  /* Icon in a bordered chip, same language as the brand mark. */
  .ico-chip{width:34px; height:34px; border:2.5px solid var(--ink); border-radius:9px;
            background:var(--yellow); box-shadow:var(--sh-sm); display:grid;
            place-items:center; flex:none}
  .ico-chip .ico{width:17px; height:17px; vertical-align:0}

  /* ---------- motion ---------- */
  /* 2D: press physics on the offset shadow. 3D: a small tilt on lift. */
  .btn{transform-style:preserve-3d}
  .btn:hover:not(:disabled) .ico{transform:rotate(-8deg) scale(1.08)}
  .ico{transition:transform .18s cubic-bezier(.34,1.56,.64,1)}

  .card{transition:transform .18s ease, box-shadow .18s ease}
  .lift:hover{transform:translate(-2px,-2px) rotate(-.25deg);
              box-shadow:9px 9px 0 0 var(--ink)}

  .stat{transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease}
  .stat:hover{transform:translateY(-4px) rotate(-.5deg); box-shadow:7px 9px 0 0 var(--ink)}

  tbody tr{transition:transform .12s ease}
  tbody tr:hover{transform:translateX(3px)}

  @keyframes pop{0%{transform:scale(.7); opacity:0}
                 60%{transform:scale(1.12)} 100%{transform:scale(1); opacity:1}}
  .pop{animation:pop .32s cubic-bezier(.34,1.56,.64,1) both}

  @keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
  .rise{animation:rise .42s cubic-bezier(.22,1,.36,1) both}
  .rise:nth-of-type(2){animation-delay:.05s}
  .rise:nth-of-type(3){animation-delay:.10s}
  .rise:nth-of-type(4){animation-delay:.15s}
  .rise:nth-of-type(5){animation-delay:.20s}

  /* 3D flip used by the brand mark on hover */
  @keyframes flip{from{transform:rotateY(0)} to{transform:rotateY(360deg)}}
  .brand:hover .mark{animation:flip .7s cubic-bezier(.5,0,.5,1)}

  @keyframes shimmer{to{background-position:200% 0}}
  .writing{background:linear-gradient(90deg,#EFEFEC 25%,#F8F8F4 50%,#EFEFEC 75%)
           no-repeat; background-size:200% 100%; animation:shimmer 1.3s linear infinite}

  @media (max-width:760px){
    .grid2{grid-template-columns:1fr}
    .card{padding:16px}
    .wrap{padding:0 14px 80px}
    .topbar-in{padding:12px 14px}
  }
  /* One switch turns every animation off for people who ask for that. */
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
                         transition-duration:.001ms !important; scroll-behavior:auto !important}
    .lift:hover,.stat:hover,tbody tr:hover{transform:none}
  }

  /* ---------- stat cards (dashboard + admin) ---------- */
  .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:30px}
  .stat{background:var(--paper); border:3px solid var(--ink); border-radius:var(--r-lg);
        box-shadow:var(--sh); padding:16px 18px 14px;
        display:flex; flex-direction:column; align-items:flex-start; gap:10px}
  .stat.go{background:var(--green); color:#fff}
  .stat.go .eyebrow{color:#fff; opacity:.9}
  .stat.go .ico-chip{background:var(--paper); color:var(--ink)}
  .stat-n{font-family:var(--display); font-size:36px; line-height:.9; letter-spacing:.2px;
          margin-top:2px}
  .stat .eyebrow{margin-top:-2px}
  @media (max-width:760px){ .stats{grid-template-columns:repeat(2,1fr)} }

  /* ================= added for the SaaS shell ================= */

  /* ---------- public (marketing) chrome ---------- */
  .band{background:var(--paper); border-bottom:3px solid var(--ink)}
  .band.wash{background:var(--wash)}
  .band-in{max-width:1120px; margin:0 auto; padding:64px 20px}
  .hero{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center}
  .foot{border-top:3px solid var(--ink); background:var(--paper); margin-top:0}
  .foot-in{max-width:1120px; margin:0 auto; padding:38px 20px;
           display:grid; grid-template-columns:2fr 1fr 1fr; gap:28px}
  .foot h4{font:800 11px/1 var(--sans); text-transform:uppercase; letter-spacing:.11em;
           color:var(--muted); margin:0 0 12px}
  .foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
  .foot a{font-size:14px}

  /* ---------- tick list (pricing, feature lists) ---------- */
  .ticks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
  .ticks li{position:relative; padding-left:30px; font-size:15px}
  .ticks li::before{content:""; position:absolute; left:0; top:1px; width:19px; height:19px;
    border:2px solid var(--ink); border-radius:6px; background:var(--paper);
    box-shadow:1px 1px 0 0 var(--ink)}
  .ticks li::after{content:"\2713"; position:absolute; left:4.5px; top:0;
    font:800 12px/1.7 var(--sans)}

  /* ---------- auth / narrow forms ---------- */
  .auth{max-width:460px; margin:8vh auto 12vh}
  .narrow{max-width:720px; margin:0 auto}

  /* ---------- radio option cards (settings) ---------- */
  /* base.html styles input[type=text|email|url] only; radios had no styling at all. */
  .opt{display:flex; gap:12px; align-items:flex-start; cursor:pointer; margin:0 0 10px;
       padding:14px 16px}
  .opt:has(input:checked){background:var(--yellow); box-shadow:var(--sh-md)}
  .opt input{margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--ink)}
  input[type=number],input[type=password],select{
      width:100%; font:15px/1.5 var(--sans); color:var(--ink); background:var(--paper);
      border:2.5px solid var(--ink); border-radius:var(--r); padding:11px 13px}
  fieldset{border:0; margin:0; padding:0; min-width:0}

  /* ---------- stat sparkline (admin) ---------- */
  /* Pure CSS: a chart library would mean a build step this project does not have. */
  .spark{display:flex; align-items:flex-end; gap:3px; height:90px; padding:10px;
         border:3px solid var(--ink); border-radius:var(--r); background:var(--paper);
         box-shadow:var(--sh)}
  .spark i{flex:1; min-height:2px; background:var(--yellow); border:2px solid var(--ink);
           border-radius:3px 3px 0 0}

  /* ---------- quota meter ---------- */
  .meter{height:14px; border:2.5px solid var(--ink); border-radius:999px;
         background:var(--paper); overflow:hidden; box-shadow:1px 1px 0 0 var(--ink)}
  .meter i{display:block; height:100%; background:var(--yellow)}
  .meter.full i{background:var(--red)}

  /* ---------- account menu ---------- */
  .who{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted)}
  .who .avatar{width:28px; height:28px; border-radius:8px; border:2px solid var(--ink);
               object-fit:cover; background:var(--yellow)}

  @media (max-width:900px){
    .hero{grid-template-columns:1fr; gap:30px}
    .foot-in{grid-template-columns:1fr 1fr}
  }
  @media (max-width:760px){
    .band-in{padding:40px 14px}
    .foot-in{grid-template-columns:1fr; padding:28px 14px}
  }