
:root{
  --paper:#FBFAF6; --paper2:#F3F1EA; --line:#E4E1D8;
  --muted:#5B6B62; --ink:#1C2B24;
  --action:#2D6A4F; --progress:#52B788; --tint:#D8F3DC; --tint2:#F0FAF3;
  --radius:10px; --pill:20px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  background:#ffffff; color:var(--ink); -webkit-font-smoothing:antialiased;
}
a{color:inherit;}

/* ---- mockup banner: this must never be mistaken for the live portal ---- */
.mock-flag{
  background:#1C2B24; color:#FBFAF6; font-size:0.78rem; line-height:1.45;
  padding:8px 16px; text-align:center;
}
.mock-flag strong{color:#8FD3AE; letter-spacing:0.06em;}
.mock-flag a{color:#8FD3AE;}

/* ---- Kartra-ish top bar ---- */
.k-top{
  height:58px; background:#fff; border-bottom:1px solid #eceef1;
  display:flex; align-items:center; padding:0 22px; gap:14px;
}
.k-logo{font-weight:700; color:var(--action); letter-spacing:-0.2px;}
.k-logo span{color:#c9ccd1; font-weight:400;}
.k-right{margin-left:auto; display:flex; align-items:center; gap:12px;}
.k-avatar{
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,#d7e6dd,#bcd4c6);
  color:var(--action); font-weight:700; font-size:0.8rem;
  display:flex; align-items:center; justify-content:center;
}

/* ---- tab nav (the six verbs) ---- */
.k-nav{
  background:#fff; border-bottom:1px solid #eceef1;
  padding:0 22px; display:flex; gap:4px; overflow-x:auto;
}
.k-nav a{
  padding:13px 14px; font-size:0.88rem; font-weight:600; color:#55606b;
  text-decoration:none; white-space:nowrap; border-bottom:2.5px solid transparent;
}
.k-nav a:hover{color:var(--action);}
.k-nav a.active{color:var(--action); border-bottom-color:var(--action);}
.k-nav a.gated{color:#97a0ab; font-weight:500;}
.k-nav a.gated::after{content:" \1F512"; font-size:0.72rem;}

/* ---- layout ---- */
.k-page{background:#fafbfc; min-height:70vh; padding:26px 18px 70px;}
.k-grid{
  max-width:1020px; margin:0 auto; display:grid;
  grid-template-columns:minmax(0,1fr) 240px; gap:26px; align-items:start;
}
.k-main{min-width:0;}
.k-crumb{font-size:0.72rem; color:#97a0ab; margin-bottom:8px;}
.k-title{font-size:1.55rem; font-weight:700; letter-spacing:-0.4px; margin-bottom:6px;}
.k-lede{font-size:0.92rem; color:#6b7681; line-height:1.55; margin-bottom:22px; max-width:560px;}

/* ---- sidebar banners (real assets) ---- */
.k-side{display:flex; flex-direction:column; gap:12px;}
.k-side img{width:100%; height:auto; display:block; border-radius:8px;}
.k-side .note{
  font-size:0.7rem; color:#97a0ab; line-height:1.4; padding:2px 2px 0;
}

/* ---- generic content cards used by list pages ---- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:10px; display:block; text-decoration:none;
}
.card:hover{border-color:var(--progress);}
.card h3{font-size:0.98rem; font-weight:700; margin-bottom:3px;}
.card p{font-size:0.86rem; color:var(--muted); line-height:1.5;}
.eyebrow{
  font-size:0.7rem; font-weight:600; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--action); margin-bottom:8px;
}
.journey{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 20px; margin-bottom:12px;
}
.journey h3{font-size:1.05rem; font-weight:700; margin-bottom:4px;}
.journey .promise{font-size:0.9rem; line-height:1.55; color:var(--ink); margin-bottom:10px;}
.journey ol{margin:0 0 0 18px; font-size:0.85rem; color:var(--muted); line-height:1.7;}
.pending{
  background:#FFF8E6; border:1px solid #F0DFA8; border-radius:8px;
  padding:10px 12px; font-size:0.78rem; color:#6B5B2E; line-height:1.5; margin-bottom:14px;
}
.k-foot{
  border-top:1px solid #eceef1; padding:18px 22px; background:#fff;
  font-size:0.74rem; color:#97a0ab; text-align:center; line-height:1.6;
}

@media (max-width:860px){
  .k-grid{grid-template-columns:minmax(0,1fr);}
  .k-side{order:2;}
}
@media (max-width:640px){
  .k-top{padding:0 14px;} .k-nav{padding:0 8px;} .k-page{padding:18px 12px 50px;}
  .k-title{font-size:1.3rem;}
}
