/* Kcalbin LLC — public catalog styles. Single stylesheet, no external fonts or CDNs. */
:root{
  --navy:#0b3d91; --navy-d:#082c6b; --ink:#16181d; --muted:#5b6472;
  --bg:#ffffff; --panel:#f6f8fc; --line:#e2e8f2; --ok:#1a7a3c; --warn:#a05a00;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.6;
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}

/* header / nav */
.top{border-bottom:1px solid var(--line);background:#fff}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.brand{font-weight:800;letter-spacing:-.3px;font-size:1.15rem;color:var(--ink)}
.brand span{color:var(--navy)}
nav a{margin-left:18px;font-size:.93rem;color:var(--muted);font-weight:600}
nav a:hover{color:var(--navy)}

/* hero */
.hero{background:linear-gradient(135deg,var(--navy),var(--navy-d));color:#fff;padding:58px 0 52px}
.hero h1{font-size:2.3rem;line-height:1.2;margin:0 0 14px;letter-spacing:-.6px}
.hero p{font-size:1.12rem;opacity:.93;margin:0 0 8px;max-width:720px}
.hero .fine{font-size:.9rem;opacity:.78;max-width:720px;margin-top:14px}

/* sections */
section{padding:44px 0;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
h2{font-size:1.55rem;color:var(--navy);margin:0 0 6px;letter-spacing:-.3px}
h3{font-size:1.06rem;margin:0 0 6px}
.lede{color:var(--muted);margin:0 0 24px;max-width:760px}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px;
  display:flex;flex-direction:column}
.card h3{color:var(--navy)}
.card p{margin:0 0 12px;font-size:.95rem;color:var(--ink)}
.card .price{font-size:1.5rem;font-weight:800;margin:6px 0 2px}
.card .price small{font-size:.85rem;font-weight:500;color:var(--muted)}
.card ul{list-style:none;margin:12px 0 16px;padding:0;flex:1}
.card li{position:relative;padding:5px 0 5px 22px;font-size:.93rem}
.card li:before{content:"\2713";position:absolute;left:0;color:var(--ok);font-weight:700}
.card.feature{border:2px solid var(--navy);background:#fff}

/* buttons */
.btn{display:inline-block;text-align:center;background:var(--navy);color:#fff;font-weight:700;
  padding:12px 20px;border-radius:7px;border:0;cursor:pointer;font-size:.97rem}
.btn:hover{background:var(--navy-d);text-decoration:none;color:#fff}
.btn.ghost{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.btn.ghost:hover{background:var(--panel);color:var(--navy)}
.btn.block{display:block;width:100%}
/* table-cell sized buy button (kcalbin.com/agents Buy column) */
.btn.sm{padding:6px 14px;font-size:.85rem;font-weight:700;border-radius:6px;white-space:nowrap}

/* status pills */
.pill{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.4px;
  padding:2px 9px;border-radius:20px;text-transform:uppercase;vertical-align:middle}
.pill.live{background:#e2f5e9;color:var(--ok);border:1px solid #b9e3c9}
.pill.soon{background:#fdf3e2;color:var(--warn);border:1px solid #f0dcb8}
/* "hold" = registered and running, but checkout will REFUSE it (agent-sales LIVE_HOLDS,
   e.g. an agent on a shared demo upstream key). Deliberately neutral-grey rather than
   amber: "Launching" promises it is coming, this one is a live agent we will not charge
   for yet. A separate class also keeps it out of the .pill(live|soon) status rewrite. */
.pill.hold{background:#eef1f6;color:var(--muted);border:1px solid var(--line)}

/* tables */
table{border-collapse:collapse;width:100%;font-size:.94rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--panel);font-size:.82rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* notes */
.note{background:var(--panel);border-left:4px solid var(--navy);border-radius:0 8px 8px 0;
  padding:16px 18px;margin:20px 0;font-size:.94rem}
.note strong{color:var(--navy)}
.note ul,.note ol{margin:10px 0 0;padding-left:20px}
.note li{margin:0 0 8px}
.note p:last-child{margin-bottom:0}

/* long-form posts (/blog). Additive: nothing above is changed, and no existing page
   carries .post, so these rules are inert everywhere except the blog. */
.post{max-width:720px}
.post p{margin:0 0 18px}
.post h2{margin:36px 0 10px;font-size:1.35rem}
.post h2:first-of-type{margin-top:8px}
.post ol,.post ul{padding-left:22px;margin:0 0 18px}
.post li{margin:0 0 10px}
.post table{margin:0 0 18px}
.post .tbl-scroll{margin:0 0 18px}
.post code{background:var(--panel);border:1px solid var(--line);border-radius:4px;
  padding:1px 5px;font-size:.9em}
.post .btn{margin:6px 8px 0 0}

/* form */
form{display:grid;gap:12px;max-width:520px}
label{font-size:.85rem;font-weight:700;color:#444}
input,select,textarea{font:inherit;font-size:1rem;padding:10px;border:1px solid #ccd4e0;
  border-radius:6px;width:100%;background:#fff;color:var(--ink)}
.msg{font-weight:700}.msg.ok{color:var(--ok)}.msg.err{color:#c0392b}
.fine{font-size:.85rem;color:var(--muted)}

footer{padding:30px 0 40px;font-size:.87rem;color:var(--muted)}
footer a{color:var(--muted);text-decoration:underline}

@media (max-width:600px){
  .hero h1{font-size:1.8rem}
  nav a{margin:0 14px 0 0}
  .top .wrap{justify-content:flex-start}
}