/* James Sinclair Enterprises - playbook tools
   Palette and type traced from "The Manager Who Makes You Money" (FINAL.pdf).
   navy #06255B, pink #FF0A64, Lato. */

:root{
  --navy:#06255B;
  --navy-mid:#0E3576;
  --navy-deep:#041A41;
  --navy-line:#1B3C78;
  --pink:#FF0A64;          /* graphics only: rules, meters, bars, ticks */
  --pink-ink:#D40052;      /* anything carrying text: AA on white and on pink-wash */
  --pink-soft:#FF5A96;
  --pink-wash:#FFF2F6;
  --blue-wash:#F3F7FD;
  --blue-line:#C8D8F0;
  --paper:#FFFFFF;
  --ink:#06255B;
  --mute:#556A93;
  --line:#DCE4F1;
  --ok:#0B7A57;
  --bad:#9A1B1B;           /* a number moving the wrong way; pairs with --ok */
  --font:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --maxw:820px;
  --pad:20px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.wrap-wide{max-width:1180px;margin:0 auto;padding:0 var(--pad)}

h1,h2,h3{font-weight:900;letter-spacing:-0.01em;line-height:1.12;color:var(--navy)}
h1{font-size:clamp(28px,6vw,44px)}
h2{font-size:clamp(21px,4vw,28px)}
h3{font-size:17px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
p{margin-bottom:12px;max-width:66ch}
a{color:var(--pink-ink)}

.eyebrow{
  font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pink-ink);margin-bottom:8px;
}
.mute{color:var(--mute)}
.small{font-size:13.5px}
.rule{height:3px;width:56px;background:var(--pink);border-radius:2px;margin:14px 0 18px}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--line);
}
.topbar .inner{
  max-width:1180px;margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:58px;
}
.topbar img{height:26px;width:auto;display:block}
.topbar .toolname{
  font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
}
@media(max-width:620px){.topbar .toolname{display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-size:15px;font-weight:700;line-height:1;
  padding:14px 20px;border-radius:10px;border:1px solid transparent;
  background:var(--pink-ink);color:#fff;text-decoration:none;cursor:pointer;
  min-height:48px;transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover{background:#BE004C}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--blue-line)}
.btn.ghost:hover{background:var(--blue-wash)}
.btn.dark{background:var(--navy);color:#fff}
.btn.dark:hover{background:var(--navy-mid)}
.btn.sm{font-size:13.5px;padding:10px 14px;min-height:40px}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--pink);outline-offset:2px;
}

/* ---------- inputs ---------- */
label.fl{display:block;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
input[type=text],textarea,select{
  width:100%;font-family:var(--font);font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--blue-line);border-radius:10px;padding:13px 14px;
}
textarea{min-height:92px;resize:vertical;line-height:1.45}
input::placeholder,textarea::placeholder{color:#5E729B}

/* ---------- cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.card.pinkish{background:var(--pink-wash);border-color:#FFD3E2}
.card.blueish{background:var(--blue-wash);border-color:var(--blue-line)}

.note{
  background:var(--blue-wash);border:1px solid var(--blue-line);border-left:4px solid var(--pink);
  border-radius:10px;padding:14px 16px;font-size:14px;
}
.note strong{color:var(--navy)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);margin-top:56px;padding:22px 0 46px;font-size:12px;color:var(--mute)}
.foot .inner{max-width:1180px;margin:0 auto;padding:0 var(--pad);display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:space-between}
.foot .mark{font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}

.section{padding:30px 0}
.stack>*+*{margin-top:14px}

@media print{
  .noprint{display:none !important}
  body{font-size:11.5pt}
  .card{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  .srow{break-inside:avoid}
}