/* ==========================================================================
   Insightful.Mobi — production stylesheet (drop-in)
   Link this one file in your site: <link rel="stylesheet" href="insightful-mobi.css">
   Then load the font (see head-snippet.html) and use the .im-* classes below.
   Tokens mirror the design system exactly. v1.0
   ========================================================================== */

/* ---- Font ---- */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap');

/* ---- Tokens ---- */
:root {
  /* Brand */
  --im-primary:#36B3A8; --im-primary-hover:#2E9A90; --im-primary-tint:#E4F5F3; --im-primary-ink:#1C5A55;
  /* Neutrals */
  --im-ink:#1A1A1A; --im-body:#5F5F5F; --im-line:#E5E5E5; --im-surface:#F7F8F8; --im-white:#FFFFFF;
  /* Feedback */
  --im-success:#2E9A90; --im-warning:#E0A100; --im-error:#D64545; --im-info:#3B82C4;
  --im-success-tint:#EAFAF7; --im-warning-tint:#FFF8E6; --im-error-tint:#FDEEEE; --im-info-tint:#EEF4FB;
  /* Type */
  --im-font:'Work Sans', system-ui, -apple-system, sans-serif;
  /* Spacing (4px base) */
  --im-space-1:4px; --im-space-2:8px; --im-space-3:12px; --im-space-4:16px; --im-space-5:24px;
  --im-space-6:32px; --im-space-7:48px; --im-space-8:64px; --im-space-9:96px; --im-space-10:128px;
  /* Radius */
  --im-radius-sm:6px; --im-radius-md:12px; --im-radius-lg:16px; --im-radius-pill:300px;
  /* Shadow */
  --im-shadow-sm:0 1px 2px rgba(26,26,26,.06); --im-shadow-md:0 6px 20px rgba(26,26,26,.08);
  /* Layout */
  --im-container:1200px; --im-gutter:24px;
}

/* ---- Base ---- */
.im-body, body.im { margin:0; font-family:var(--im-font); color:var(--im-ink); background:var(--im-white); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
.im-container { max-width:var(--im-container); margin:0 auto; padding-left:var(--im-gutter); padding-right:var(--im-gutter); }
.im-section { padding-top:var(--im-space-9); padding-bottom:var(--im-space-9); }

/* ---- Type ---- */
.im-display { font-size:clamp(40px,6vw,72px); font-weight:700; line-height:1.05; letter-spacing:-.01em; margin:0; }
.im-h1 { font-size:clamp(34px,4.5vw,51px); font-weight:700; line-height:1.1; margin:0; }
.im-h2 { font-size:clamp(28px,3.4vw,38px); font-weight:600; line-height:1.15; margin:0; }
.im-h3 { font-size:28px; font-weight:600; line-height:1.2; margin:0; }
.im-lead { font-size:19px; line-height:1.6; color:var(--im-body); }
.im-eyebrow { font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--im-primary-ink); margin:0 0 var(--im-space-3); }
.im-muted { color:var(--im-body); }
.im-link { color:var(--im-primary-hover); text-decoration:none; }
.im-link:hover { text-decoration:underline; }

/* ---- Buttons ---- */
.im-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--im-font);
  font-weight:600; line-height:1; border-radius:var(--im-radius-pill); border:1px solid transparent;
  padding:14px 32px; font-size:16px; cursor:pointer; text-decoration:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease; }
.im-btn-sm { padding:9px 20px; font-size:14px; }
.im-btn-lg { padding:17px 40px; font-size:18px; }
.im-btn-primary { background:var(--im-primary); color:#fff; border-color:var(--im-primary); }
.im-btn-primary:hover { background:var(--im-primary-hover); border-color:var(--im-primary-hover); }
.im-btn-secondary { background:#fff; color:var(--im-primary-ink); border-color:var(--im-primary); }
.im-btn-secondary:hover { background:var(--im-primary-tint); }
.im-btn-ghost { background:transparent; color:var(--im-primary-ink); }
.im-btn-ghost:hover { text-decoration:underline; }
.im-btn-inverse { background:#fff; color:var(--im-primary-ink); border-color:#fff; }
.im-btn:disabled, .im-btn[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }

/* ---- Badges ---- */
.im-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius:var(--im-radius-pill);
  font-size:13px; font-weight:600; line-height:1.2; border:1px solid transparent; white-space:nowrap; }
.im-badge-teal { background:var(--im-primary-tint); color:var(--im-primary-ink); }
.im-badge-ink { background:var(--im-ink); color:#fff; }
.im-badge-outline { background:transparent; color:var(--im-body); border-color:var(--im-line); }

/* ---- Cards ---- */
.im-card { background:#fff; border:1px solid var(--im-line); border-radius:var(--im-radius-md);
  padding:var(--im-space-6); box-shadow:var(--im-shadow-sm); transition:box-shadow .18s ease, transform .18s ease; }
.im-card-interactive:hover { box-shadow:var(--im-shadow-md); transform:translateY(-3px); }
.im-card__tile { width:44px; height:44px; border-radius:10px; background:var(--im-primary-tint);
  color:var(--im-primary); display:flex; align-items:center; justify-content:center; margin-bottom:var(--im-space-4); }
.im-card__title { margin:0 0 var(--im-space-2); font-size:18px; font-weight:600; line-height:1.3; }
.im-card p { margin:0; color:var(--im-body); font-size:15px; line-height:1.6; }

/* ---- Forms ---- */
.im-label { display:block; font-size:14px; font-weight:600; margin-bottom:6px; }
.im-input, .im-select, .im-textarea { width:100%; padding:12px 14px; border:1px solid var(--im-line);
  border-radius:var(--im-radius-sm); font-family:var(--im-font); font-size:15px; color:var(--im-ink);
  background:#fff; outline:none; transition:border-color .15s ease, box-shadow .15s ease; }
.im-textarea { resize:vertical; }
.im-input:focus, .im-select:focus, .im-textarea:focus { border-color:var(--im-primary); box-shadow:0 0 0 3px var(--im-primary-tint); }
.im-input.is-invalid { border-color:var(--im-error); }
.im-hint { margin:6px 0 0; font-size:13px; color:var(--im-body); }
.im-error { margin:6px 0 0; font-size:13px; color:var(--im-error); }

/* ---- Alerts ---- */
.im-alert { padding:14px 18px; border-radius:var(--im-radius-sm); border-left:4px solid; font-size:15px; line-height:1.5; }
.im-alert-success { background:var(--im-success-tint); border-color:var(--im-success); }
.im-alert-warning { background:var(--im-warning-tint); border-color:var(--im-warning); }
.im-alert-error   { background:var(--im-error-tint);   border-color:var(--im-error); }
.im-alert-info    { background:var(--im-info-tint);    border-color:var(--im-info); }

/* ---- Testimonial ---- */
.im-quote { margin:0; border-left:4px solid var(--im-primary); padding:var(--im-space-5) var(--im-space-6);
  background:var(--im-surface); border-radius:0 var(--im-radius-md) var(--im-radius-md) 0; }
.im-quote p { margin:0; font-size:19px; font-style:italic; color:var(--im-ink); line-height:1.55; }
.im-quote cite { display:block; margin-top:var(--im-space-3); font-style:normal; font-size:14px; font-weight:600; color:var(--im-body); }

/* ---- Utilities ---- */
.im-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--im-space-5); }
.im-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--im-space-5); }
.im-stack { display:flex; flex-direction:column; gap:var(--im-space-4); }
.im-row { display:flex; gap:var(--im-space-4); align-items:center; }
.im-bg-brand { background:var(--im-primary); color:#fff; }
.im-bg-wash { background:var(--im-primary-tint); }
.im-bg-surface { background:var(--im-surface); }
.im-text-center { text-align:center; }

@media (max-width:768px){
  .im-grid-3, .im-grid-2 { grid-template-columns:1fr; }
  .im-section { padding-top:var(--im-space-8); padding-bottom:var(--im-space-8); }
}