/* =============================
   File: /assets/css/site.css
   (Refined "Taupe + Warm Neutrals" theme)
   ============================= */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* Core palette: taupes, warm neutrals, soft pinks, earth tones */
  --bg: #f8f6f4;                /* warm paper */
  --bg-2: #fcfbfa;              /* lighter surface */
  --text: #1a1a1a;              /* near-black */
  --muted: #77716b;             /* soft taupe gray */
  --border: #e6e0da;            /* warm light border */
  --card: #ffffff;              /* pure surface */
  --accent: #c9a27d;            /* clay/tan primary */
  --accent-2: #e8cfd1;          /* blush-pink secondary */
  --accent-ink: #0b0b0b;

  /* Radii & shadows for Canva-like softness */
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 6px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 32px rgba(0,0,0,.10);

  /* Layout */
  --maxw: 1140px;
  --space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 24px; --space-5: 40px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,var(--bg),var(--bg-2));color:var(--text);font-family:Inter, Nunito, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;line-height:1.6}

/* Headings — Apple-like whitespace, elegant but clean */
h1,h2,h3{font-family:Nunito, Inter, system-ui, -apple-system, sans-serif;text-transform:uppercase;letter-spacing:.06em;margin:0 0 var(--space-2)}
h1{font-size:clamp(30px,3.4vw,48px);line-height:1.12}
h2{font-size:clamp(22px,2.4vw,30px);line-height:1.18}
h3{font-size:clamp(16px,1.6vw,20px);line-height:1.22}
p{margin:0 0 var(--space-3)}

/* Links 
a{color:var(--text);text-decoration:underline;text-underline-offset:3px}*/
a{color:var(--text);text-decoration:none;text-underline-offset:3px}
a:hover{background:linear-gradient(to top, rgba(233,207,209,.35) 0 40%, transparent 40% 100%)}

/* Layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:var(--space-4)}
@media(min-width:960px){.wrap{padding:var(--space-5)}}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.78);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.nav__brand{font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.nav__links{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.nav__link{display:inline-block;padding:10px 14px;border-radius:var(--radius-pill);text-decoration:none}
.nav__link.active{background:var(--accent-2);color:var(--accent-ink);text-decoration:none;box-shadow:var(--shadow-sm)}

/* Panels */
section.panel{min-height:60vh;display:grid;align-items:center}

/* Hero */
.hero{display:grid;gap:var(--space-4)}
@media(min-width:960px){.hero{grid-template-columns:1.1fr .9fr;gap:var(--space-5)}}
.kicker{color:var(--muted);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.lead{font-size:clamp(16px,1.6vw,18px);color:#2a2a2a}
.btns{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}

/* Buttons — pill, soft, subtle shadows */
.btn{appearance:none;border:none;border-radius:var(--radius-pill);padding:12px 18px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .06s ease, box-shadow .15s ease, filter .15s ease}
.btn--primary{background:var(--accent);color:var(--accent-ink)}
.btn--ghost{background:#fff;color:var(--text);border:1px solid var(--border)}
.btn--blush{background:var(--accent-2);color:var(--accent-ink)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}

/* Mock / media */
.mock{aspect-ratio:16/9;border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(135deg,#fbfaf8,#ffffff);box-shadow:var(--shadow-md);display:grid;place-items:center;overflow:hidden}
.mockimg{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-lg);display:block}

/* Mission */
.icons{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-top:var(--space-3)}
@media(max-width:720px){.icons{grid-template-columns:1fr}}
.iconcard{border:1px solid var(--border);border-radius:var(--radius);padding:16px;background:#fff;display:flex;align-items:flex-start;gap:var(--space-2);box-shadow:var(--shadow-sm)}
.icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;border:1px solid var(--border);display:grid;place-items:center;background:var(--bg-2)}

/* Free Downloads */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3)}
@media(max-width:1080px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow-md);padding:18px;display:grid;gap:8px}
.card h3{margin-bottom:2px}

/* Feature */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin:10px 0 6px}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm);padding:16px}
.stepnum{width:34px;height:34px;border-radius:var(--radius-pill);border:1px solid var(--border);display:grid;place-items:center;font-weight:800;margin-bottom:8px;background:var(--bg-2)}
.features{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.badge{border:1px solid var(--border);border-radius:var(--radius-pill);padding:6px 12px;background:#fff;font-weight:700;box-shadow:var(--shadow-sm)}

/* Inputs */
.optin{border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(180deg,#fff7f4,#ffffff);box-shadow:var(--shadow-lg);padding:18px}
.optrow{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:10px}
@media(max-width:560px){.optrow{grid-template-columns:1fr}}
textarea, input[type=text], input[type=password], input[type=file], select, input[type=email]{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius);font:inherit;background:#fff;color:var(--text);transition:border-color .15s ease, box-shadow .15s ease}
textarea:focus, input[type=text]:focus, select:focus, input[type=email]:focus{outline:none;border-color:#dcb6b9;box-shadow:0 0 0 3px rgba(220,182,185,.25)}

/* Footer */
footer{border-top:1px solid var(--border);padding:var(--space-4) 0;color:var(--muted)}
.footgrid{display:grid;gap:12px}
.footlinks{display:flex;flex-wrap:wrap;gap:12px}

/* Utilities */
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}