/* ============================================================
   Content Clinic — shared design system · "Clean editorial"
   One stylesheet for the whole surface: homepage + /leadmagnet tool
   + login + dashboard. Warm off-white, near-black ink, a single
   muted-gold accent, generous whitespace, hairlines not boxes.
   Served by nginx at /assets/css/cc.css (same-origin for /leadmagnet too).
   ============================================================ */

:root{
  --bg:#faf9f7;          /* warm off-white page */
  --surface:#ffffff;     /* cards / raised */
  --ink:#1a1a1a;         /* primary text */
  --ink-2:#5f5a52;       /* secondary text */
  --ink-3:#928d84;       /* faint / meta */
  --line:#e8e3db;        /* hairline */
  --line-soft:#f0ece5;   /* faintest divider */
  --accent:#c9a35a;      /* muted gold — buttons/marks */
  --accent-deep:#a9843a; /* gold hover / on-light text */
  --accent-soft:#f4eddd; /* pale gold tint */
  --ok:#4c9a6a; --warn:#c0932e; --bad:#c0564e;
  --radius:16px; --radius-sm:11px; --radius-pill:999px;
  --maxw:1080px; --measure:640px;
  --font:"IBM Plex Sans Thai","IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --shadow:0 1px 2px rgba(26,22,15,.04), 0 8px 30px rgba(26,22,15,.05);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.75;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-weight:600; line-height:1.15; letter-spacing:-.02em}
p{margin:0}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.section{padding:96px 0}
.section--tight{padding:64px 0}
.divider{height:1px; background:var(--line); border:0; margin:0}

/* ---------- eyebrow / section heads ---------- */
.eyebrow{
  font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-deep);
}
.section-head{max-width:var(--measure); margin-bottom:44px}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}
.section-title{font-size:clamp(27px,3.6vw,40px); margin:14px 0 12px}
.section-sub{font-size:17px; color:var(--ink-2); line-height:1.7}

/* ---------- buttons / links ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  font-family:inherit; font-size:16px; font-weight:600; text-decoration:none;
  padding:14px 26px; border-radius:var(--radius-sm); border:1px solid transparent;
  cursor:pointer; transition:transform .12s ease, background .12s ease, border-color .12s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-deep)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-3)}
.btn-quiet{background:transparent; color:var(--ink); padding:14px 6px; font-weight:600;
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:5px;
  text-decoration-color:var(--accent)}
.btn-quiet:hover{text-decoration-color:var(--ink)}
.btn-lg{font-size:17px; padding:16px 30px}
.btn-block{width:100%}
.link{color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent);
  text-underline-offset:3px; font-weight:600}
.link:hover{text-decoration-color:var(--ink)}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(250,249,247,.85);
  backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px}
.brand{display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink)}
.brand-mark{width:32px; height:32px; border-radius:9px; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:14px; letter-spacing:.02em}
.brand-name{font-weight:600; font-size:15px; letter-spacing:.02em}
.nav-links{display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0}
.nav-links a{text-decoration:none; color:var(--ink-2); font-size:15px; font-weight:500}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:inline-flex}
.nav-burger{display:none; background:none; border:0; cursor:pointer; padding:8px; color:var(--ink)}

/* ---------- proof row ---------- */
.stats{display:flex; flex-wrap:wrap; gap:0}
.stat{flex:1; min-width:140px; padding:8px 20px; border-left:1px solid var(--line)}
.stat:first-child{border-left:0; padding-left:0}
.stat-num{font-size:clamp(26px,3vw,34px); font-weight:700; letter-spacing:-.02em; line-height:1.1}
.stat-label{font-size:13.5px; color:var(--ink-3); margin-top:4px}

/* ---------- cards ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line); background:var(--bg)}
.footer-inner{max-width:var(--maxw); margin:0 auto; padding:56px 24px 40px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px}
.footer h4{font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3);
  font-weight:600; margin-bottom:14px}
.footer ul{list-style:none; margin:0; padding:0}
.footer li{margin:9px 0}
.footer a{color:var(--ink-2); text-decoration:none; font-size:15px}
.footer a:hover{color:var(--ink)}
.footer-desc{color:var(--ink-2); font-size:15px; line-height:1.7; max-width:340px}
.footer-social{display:flex; gap:14px; margin-top:18px}
.footer-social a{color:var(--ink-3); font-size:14px; text-decoration:none}
.footer-social a:hover{color:var(--ink)}
.footer-bottom{border-top:1px solid var(--line); padding:20px 24px; text-align:center;
  color:var(--ink-3); font-size:13.5px}
.footer-bottom a{color:var(--ink-3); text-decoration:none}
.footer-bottom a:hover{color:var(--ink)}

/* ---------- forms (shared with the tool) ---------- */
.field{margin-top:18px}
.field:first-child{margin-top:0}
label{display:block; font-size:14.5px; font-weight:600; margin-bottom:8px; color:var(--ink)}
.req{color:var(--accent-deep)}
input[type=text],input[type=email],input[type=password],input[type=url]{
  width:100%; font-family:inherit; font-size:16px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:13px 15px; transition:border-color .12s ease, box-shadow .12s ease}
input::placeholder{color:var(--ink-3)}
input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.hint{font-size:13px; color:var(--ink-3); margin-top:7px}
.err{color:var(--bad); font-size:14px; margin-top:12px; min-height:1px}

/* segmented choice (role/goal on the tool) */
.seg{display:flex; flex-wrap:wrap; gap:9px}
.seg button{flex:1 1 46%; font-family:inherit; font-size:14.5px; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 14px; cursor:pointer; transition:.12s}
.seg button:hover{border-color:var(--ink-3)}
.seg button[aria-pressed=true]{border-color:var(--accent); background:var(--accent-soft); color:var(--ink)}

/* ---------- misc ---------- */
.pill{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-pill); padding:6px 13px}
.hidden{display:none}
.center{text-align:center}
.mx-measure{max-width:var(--measure); margin-left:auto; margin-right:auto}

/* ---------- responsive ---------- */
@media (max-width:820px){
  body{font-size:16px}
  .section{padding:68px 0}
  .nav-links{display:none}
  .nav-links.open{display:flex; position:fixed; inset:57px 0 auto 0; flex-direction:column;
    align-items:flex-start; gap:0; background:var(--bg); border-bottom:1px solid var(--line);
    padding:8px 24px 20px}
  .nav-links.open li{width:100%; border-top:1px solid var(--line-soft)}
  .nav-links.open a{display:block; padding:14px 0; font-size:16px}
  .nav-links.open .nav-cta{margin-top:12px}
  .nav-burger{display:inline-flex}
  .footer-inner{grid-template-columns:1fr; gap:32px}
  .stat{flex:1 1 45%; border-left:0; padding:8px 0}
}