/* ==========================================================================
   Outbound Partners - brand tokens for the recruitment portal
   --------------------------------------------------------------------------
   These values are lifted directly from the live landing page at
   https://outboundpartners.com/outsourced-sdr-team/ (its inline <style> :root
   block) so the candidate portal is an exact brand match: cream paper, deep
   forest green ink, a lime CTA, Poppins headings + Open Sans body.

   Palette (from the site's :root):
     green      #0d3d30   green-deep #0a3026   green-600 #13503f
     green-tint #EAF1ED   lime       #c9f268   lime-dark #bce85a
     cream      #FBFCF8   paper      #FFFFFF   ink       #16241E
     muted      #5C6B63   cross      #C2655F
   ========================================================================== */

:root{
  --ink:        #16241e;   /* headings / primary text - near-black forest green */
  --body:       #16241e;   /* body text (site sets body colour to ink)          */
  --muted:      #5c6b63;   /* secondary text                                    */
  --faint:      #8a958e;   /* hints, captions (lighter tint of muted)           */
  --bg:         #fbfcf8;   /* page background - cream                            */
  --panel:      #ffffff;   /* cards / inputs background - paper                  */
  --line:       rgba(13,61,48,.12);  /* borders - green-line                    */
  --accent:     #0d3d30;   /* primary brand green (text emphasis, focus, links) */
  --accent-ink: #0a3026;   /* deeper green (hover on green surfaces)             */
  --lime:       #c9f268;   /* CTA fill                                           */
  --lime-dark:  #bce85a;   /* CTA hover                                          */
  --good:       #13503f;   /* ticks / positive                                  */
  --bad:        #c2655f;   /* crosses / negative - brand terracotta             */
  --radius:     14px;      /* site --radius                                     */
  --btn-radius: 10px;      /* site --btn-radius                                 */
  --shadow:     0 18px 40px -26px rgba(13,61,48,.40);  /* site --card-shadow    */
  --font:       "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head:  "Poppins", var(--font);

  /* ---- Internal dashboard support tokens ---------------------------------
     Used by the private pages (static/dashboard.css). All derived from the
     brand palette above so the whole app stays one light OP system. Status
     colour only ever appears as a light CHIP or a bar fill, never as page or
     panel chrome. */
  --panel-soft: #f4f7f2;   /* subtle panel tint (search inputs, bar tracks)      */
  --hover:      rgba(13,61,48,.045);   /* very subtle green table-row hover       */
  --track:      rgba(13,61,48,.09);    /* light track behind score bars           */
  --on-accent:  #ffffff;   /* text/icons on a dark-green filled surface           */
  --on-accent-soft: rgba(255,255,255,.22); /* count badge on an active green tab  */

  --warn:       #8a6a16;   /* mid / "to review" - warm olive-amber (text + bar)  */

  /* Status chips: soft tinted background + dark, legible ink */
  --chip-good-bg: #e6f1ea;  /* hits the mark - soft green                        */
  --chip-good-ink:#0d3d30;  /* dark green text                                   */
  --chip-warn-bg: #f5eccf;  /* to review - soft warm amber                       */
  --chip-warn-ink:#6f5410;  /* dark amber text                                   */
  --chip-bad-bg:  #f4e3e0;  /* reject - soft muted red                           */
  --chip-bad-ink: #9c4038;  /* dark muted-red text                               */
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--body);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;border-bottom:1px solid var(--line)}
.wordmark{font-family:var(--font-head);font-weight:800;letter-spacing:-.01em;color:var(--ink);font-size:19px}
.wordmark span{color:var(--accent)}
.brand-logo{height:30px;width:auto;display:block}
.topbar .home{color:var(--muted);font-size:14px}

.wrap{max-width:600px;margin:0 auto;padding:44px 24px 80px}

h1{font-family:var(--font-head);font-size:34px;line-height:1.12;letter-spacing:-.02em;color:var(--ink);margin:0 0 12px;font-weight:700}
h1 em{color:var(--accent);font-style:normal}
.lead{font-size:17px;color:var(--muted);margin:0 0 22px}

.trust{display:flex;flex-wrap:wrap;gap:10px 18px;padding:16px 0 26px;border-bottom:1px solid var(--line);margin-bottom:26px}
.trust span{font-size:13.5px;color:var(--body);font-weight:600;display:flex;align-items:center;gap:7px}
.trust span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--good)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}

label{display:block;margin:16px 0 5px;font-size:13.5px;font-weight:600;color:var(--ink)}
label .req{color:var(--accent)}
input,select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-size:15px;font-family:inherit}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(13,61,48,.12)}
.row{display:flex;gap:14px}.row>div{flex:1}
@media(max-width:520px){.row{flex-direction:column;gap:0}}

.drop{margin-top:5px;border:2px dashed var(--line);border-radius:12px;padding:26px;
  text-align:center;color:var(--muted);cursor:pointer;background:#fff;transition:border-color .15s}
.drop:hover{border-color:var(--accent)}

.btn{font-family:var(--font-head);margin-top:24px;width:100%;padding:15px;border-radius:var(--btn-radius);border:0;
  background:var(--lime);color:var(--accent);font-size:16px;font-weight:700;cursor:pointer;
  box-shadow:0 14px 32px -16px rgba(201,242,104,.9);transition:background .15s,transform .15s}
.btn:hover{background:var(--lime-dark);transform:translateY(-1px)}
.btn:disabled{opacity:.7;cursor:default;transform:none}

.err{color:var(--bad);margin:8px 0 0;font-weight:600}
.foot{color:var(--faint);font-size:12.5px;margin-top:18px;line-height:1.55}

.confirm{max-width:520px;margin:0 auto;padding:80px 24px;text-align:center}
.tick{width:60px;height:60px;border-radius:50%;background:var(--green-tint,#eaf1ed);color:var(--good);
  display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 20px}
.confirm h1{font-size:27px}
.confirm p{color:var(--muted);font-size:16px}