/* ═══════════════════════════════════════════
   BookSmartTools — Global Stylesheet
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

:root {
  --ink:       #111210;
  --paper:     #fafaf7;
  --cream:     #f2efe6;
  --green:     #1e5c33;
  --green-mid: #2d7a47;
  --green-lt:  #eaf4ee;
  --red:       #c03a20;
  --red-lt:    #fdf0ec;
  --gold:      #a07800;
  --gold-lt:   #fdf8ec;
  --border:    #dddbd2;
  --muted:     #6b6960;
  --w:         1080px;
  --nav-h:     64px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'DM Sans',sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4 { font-family:'Playfair Display',serif; font-weight:700; line-height:1.15; letter-spacing:-0.3px; }
h1 { font-size:clamp(36px,5vw,58px); }
h2 { font-size:clamp(26px,3.5vw,40px); }
h3 { font-size:clamp(20px,2.5vw,26px); }
p  { font-size:16px; line-height:1.8; color:var(--muted); }

.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'DM Mono',monospace; font-size:11px;
  font-weight:500; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--red); background:var(--red-lt);
  padding:5px 12px; border-radius:2px; margin-bottom:20px;
}
.eyebrow::before { content:''; width:6px; height:6px; background:var(--red); border-radius:50%; }

/* ── LAYOUT ── */
.wrap    { max-width:var(--w); margin:0 auto; padding:0 28px; }
.section { padding:80px 0; }
.section-sm { padding:48px 0; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:860px) { .grid-3,.grid-4 { grid-template-columns:1fr 1fr; } }
@media(max-width:600px) { .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }

/* ── NAVIGATION ── */
.site-nav {
  position:sticky; top:0; z-index:100;
  height:var(--nav-h);
  background:rgba(250,250,247,0.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-inner {
  max-width:var(--w); margin:0 auto; padding:0 28px;
  height:100%; display:flex; align-items:center; justify-content:space-between;
}
.nav-logo {
  font-family:'Playfair Display',serif; font-size:22px;
  color:var(--ink); font-weight:700;
}
.nav-logo em { color:var(--green); font-style:normal; }
.nav-links { display:flex; align-items:center; gap:32px; list-style:none; }
.nav-links a { font-size:14px; font-weight:500; color:var(--muted); transition:color .15s; }
.nav-links a:hover, .nav-links a.active { color:var(--ink); }
.nav-cta {
  background:var(--green); color:white !important;
  padding:9px 22px; border-radius:3px; font-size:13px !important;
  font-weight:600 !important; transition:background .15s;
}
.nav-cta:hover { background:var(--green-mid) !important; }

/* Mobile nav */
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:4px; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; transition:.2s; }
@media(max-width:720px) {
  .nav-toggle { display:block; }
  .nav-links {
    display:none; position:absolute; top:var(--nav-h); left:0; right:0;
    background:var(--paper); flex-direction:column; gap:0;
    border-bottom:1px solid var(--border); padding:8px 0;
  }
  .nav-links.open { display:flex; }
  .nav-links li { width:100%; }
  .nav-links a { display:block; padding:12px 28px; font-size:16px; }
  .nav-cta { margin:8px 28px; border-radius:3px; text-align:center; }
}

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; border-radius:3px;
  font-family:'DM Sans',sans-serif; font-size:15px; font-weight:600;
  cursor:pointer; border:none; transition:all .15s;
}
.btn-primary  { background:var(--green); color:white; }
.btn-primary:hover  { background:var(--green-mid); }
.btn-dark     { background:var(--ink); color:white; }
.btn-dark:hover     { background:#2a2a26; }
.btn-ghost    { background:transparent; color:var(--ink); border:1.5px solid var(--border); }
.btn-ghost:hover    { border-color:var(--ink); }
.btn-red      { background:var(--red); color:white; }
.btn-red:hover      { background:#a02e18; }
.btn-sm { padding:9px 18px; font-size:13px; }
.btn svg { width:16px; height:16px; }

/* ── CARDS ── */
.card {
  background:white; border:1px solid var(--border);
  border-radius:4px; padding:28px;
  transition:box-shadow .2s, border-color .2s;
}
.card:hover { border-color:transparent; box-shadow:0 8px 32px rgba(0,0,0,.08); }
.card-accent { border-top:3px solid var(--green); }

/* Tool card */
.tool-card {
  background:white; border:1px solid var(--border); border-radius:4px;
  padding:28px; position:relative; overflow:hidden;
  transition:box-shadow .2s, border-color .2s;
}
.tool-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--green); transform:scaleX(0); transform-origin:left;
  transition:transform .2s;
}
.tool-card:hover::before { transform:scaleX(1); }
.tool-card:hover { border-color:transparent; box-shadow:0 8px 32px rgba(0,0,0,.08); }
.tool-badge {
  display:inline-block; font-size:10px; font-weight:600;
  letter-spacing:.8px; text-transform:uppercase;
  padding:4px 10px; border-radius:2px; margin-bottom:14px;
}
.tool-badge.free { background:var(--green-lt); color:var(--green); }
.tool-badge.soon { background:var(--cream); color:var(--muted); }
.tool-badge.new  { background:var(--gold-lt); color:var(--gold); }
.tool-name { font-family:'Playfair Display',serif; font-size:20px; margin-bottom:10px; }
.tool-desc { font-size:14px; color:var(--muted); line-height:1.65; margin-bottom:20px; }
.tool-link {
  font-size:13px; font-weight:600; color:var(--green);
  display:inline-flex; align-items:center; gap:6px;
  transition:gap .15s;
}
.tool-link:hover { gap:10px; }
.tool-link::after { content:'→'; }

/* Blog card */
.blog-card {
  background:white; border:1px solid var(--border); border-radius:4px;
  overflow:hidden; transition:box-shadow .2s, border-color .2s;
}
.blog-card:hover { border-color:transparent; box-shadow:0 8px 32px rgba(0,0,0,.08); }
.blog-card-top {
  background:var(--ink); padding:16px 20px;
  display:flex; justify-content:space-between; align-items:center;
}
.blog-cat { font-family:'DM Mono',monospace; font-size:11px; color:#f0a070; font-weight:500; }
.blog-time { font-family:'DM Mono',monospace; font-size:11px; color:rgba(255,255,255,.4); }
.blog-card-body { padding:24px; }
.blog-card-title {
  font-family:'Playfair Display',serif; font-size:19px;
  line-height:1.3; margin-bottom:12px; color:var(--ink);
  transition:color .15s;
}
.blog-card:hover .blog-card-title { color:var(--green); }
.blog-card-excerpt { font-size:13px; color:var(--muted); line-height:1.7; margin-bottom:18px; }
.blog-read { font-size:13px; font-weight:600; color:var(--green); display:inline-flex; align-items:center; gap:5px; }
.blog-read::after { content:'→'; transition:transform .15s; }
.blog-card:hover .blog-read::after { transform:translateX(4px); }

/* ── STAT CARDS ── */
.stat-card { background:var(--cream); border-radius:4px; padding:28px; }
.stat-num  { font-family:'Playfair Display',serif; font-size:44px; line-height:1; margin-bottom:8px; }
.stat-label { font-size:14px; color:var(--muted); }

/* ── EMAIL CAPTURE ── */
.capture-section { background:var(--ink); padding:80px 0; }
.capture-inner { max-width:600px; margin:0 auto; text-align:center; padding:0 28px; }
.capture-section h2 { color:white; margin-bottom:14px; }
.capture-section p  { color:rgba(255,255,255,.6); margin-bottom:36px; }
.email-form {
  display:flex; border:1px solid rgba(255,255,255,.2); border-radius:4px;
  overflow:hidden; max-width:460px; margin:0 auto 14px;
}
.email-form input {
  flex:1; height:52px; background:rgba(255,255,255,.07);
  border:none; outline:none; padding:0 18px;
  font-family:'DM Sans',sans-serif; font-size:15px; color:white;
}
.email-form input::placeholder { color:rgba(255,255,255,.35); }
.email-form button {
  background:var(--red); color:white; border:none;
  padding:0 22px; font-family:'DM Sans',sans-serif;
  font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:background .15s;
}
.email-form button:hover { background:#a02e18; }
.capture-small { font-family:'DM Mono',monospace; font-size:11px; color:rgba(255,255,255,.3); }
.capture-success {
  display:none; background:rgba(30,92,51,.3); color:#7dd4a0;
  border:1px solid rgba(125,212,160,.3); border-radius:3px;
  padding:14px 20px; font-size:14px; font-weight:500; margin-top:14px;
}

/* ── FOOTER ── */
.site-footer { background:var(--ink); color:rgba(255,255,255,.45); padding:56px 0 32px; }
.footer-grid {
  display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:48px;
  margin-bottom:48px;
}
@media(max-width:720px) { .footer-grid { grid-template-columns:1fr 1fr; gap:32px; } }
@media(max-width:460px) { .footer-grid { grid-template-columns:1fr; } }
.footer-brand {
  font-family:'Playfair Display',serif; font-size:22px;
  color:white; margin-bottom:12px;
}
.footer-brand em { color:var(--green-mid); font-style:normal; }
.footer-tagline { font-size:13px; line-height:1.7; max-width:240px; }
.footer-col h4 {
  font-family:'DM Sans',sans-serif; font-weight:600;
  font-size:12px; letter-spacing:1px; text-transform:uppercase;
  color:rgba(255,255,255,.6); margin-bottom:16px;
}
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:10px; }
.footer-col ul a { font-size:13px; color:rgba(255,255,255,.45); transition:color .15s; }
.footer-col ul a:hover { color:white; }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.08); padding-top:28px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
}
.footer-copy { font-family:'DM Mono',monospace; font-size:11px; }
.footer-legal { display:flex; gap:20px; }
.footer-legal a { font-family:'DM Mono',monospace; font-size:11px; color:rgba(255,255,255,.35); }
.footer-legal a:hover { color:white; }

/* ── ARTICLE / PROSE ── */
.prose h2 { font-size:clamp(22px,3vw,32px); margin:40px 0 16px; }
.prose h3 { font-size:clamp(18px,2vw,22px); font-weight:600; margin:28px 0 12px; }
.prose p  { font-size:16px; color:#444; line-height:1.85; margin-bottom:18px; }
.prose ul,.prose ol { margin:0 0 20px 24px; }
.prose li { font-size:16px; color:#444; line-height:1.8; margin-bottom:6px; }
.prose strong { color:var(--ink); }
.prose a  { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.prose blockquote {
  border-left:4px solid var(--green); padding:16px 20px;
  background:var(--green-lt); border-radius:0 4px 4px 0;
  margin:28px 0; font-style:italic;
}
.prose blockquote p { color:var(--green); margin:0; }
.prose table { width:100%; border-collapse:collapse; margin:24px 0; font-size:14px; }
.prose th {
  text-align:left; font-size:11px; letter-spacing:.7px; text-transform:uppercase;
  color:var(--muted); padding:8px 12px; border-bottom:2px solid var(--border);
  background:var(--cream);
}
.prose td { padding:12px; border-bottom:1px solid var(--border); }
.prose tr:last-child td { border-bottom:none; }
.prose tr:nth-child(even) td { background:var(--cream); }

/* Callout boxes */
.callout {
  border-left:4px solid var(--border); padding:18px 22px;
  border-radius:0 4px 4px 0; margin:28px 0;
  background:var(--cream);
}
.callout.tip    { border-left-color:var(--green); background:var(--green-lt); }
.callout.warn   { border-left-color:#b8860b; background:var(--gold-lt); }
.callout.alert  { border-left-color:var(--red); background:var(--red-lt); }
.callout strong { display:block; margin-bottom:6px; font-size:13px; letter-spacing:.3px; }
.callout.tip strong   { color:var(--green); }
.callout.warn strong  { color:var(--gold); }
.callout.alert strong { color:var(--red); }
.callout p { margin:0; font-size:14px; color:var(--muted); }

/* ── BREADCRUMBS ── */
.breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--muted); margin-bottom:32px;
  font-family:'DM Mono',monospace;
}
.breadcrumb a { color:var(--green); }
.breadcrumb span { opacity:.5; }

/* ── PAGE HERO ── */
.page-hero { background:var(--ink); color:white; padding:64px 0 56px; }
.page-hero .eyebrow { color:rgba(255,255,255,.6); background:rgba(255,255,255,.1); }
.page-hero .eyebrow::before { background:rgba(255,255,255,.6); }
.page-hero h1 { color:white; margin-bottom:16px; }
.page-hero p  { color:rgba(255,255,255,.65); max-width:580px; font-size:18px; }

/* ── TICKER ── */
.ticker {
  background:#1a1a18; overflow:hidden; white-space:nowrap;
  padding:11px 0; border-top:1px solid rgba(255,255,255,.05);
}
.ticker-track {
  display:inline-flex; gap:48px;
  animation:ticker 28s linear infinite;
  font-family:'DM Mono',monospace; font-size:12px;
  color:rgba(255,255,255,.4); letter-spacing:.5px;
}
.ticker-track .sep { opacity:.25; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── UTILITIES ── */
.text-center { text-align:center; }
.text-muted  { color:var(--muted); }
.mt-4 { margin-top:16px; }
.mt-8 { margin-top:32px; }
.mb-4 { margin-bottom:16px; }
.mb-8 { margin-bottom:32px; }
.mono { font-family:'DM Mono',monospace; }
.divider { height:1px; background:var(--border); margin:28px 0; }
.tag {
  display:inline-block; background:var(--cream); border:1px solid var(--border);
  padding:4px 12px; border-radius:2px;
  font-family:'DM Mono',monospace; font-size:11px; color:var(--muted);
}

/* Source / verified badge */
.source-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-family:'DM Mono',monospace; font-size:10px;
  background:var(--green-lt); color:var(--green);
  padding:3px 9px; border-radius:2px; font-weight:500;
}

/* ── FORM ELEMENTS (shared across tools) ── */
.form-label {
  display:block; font-size:11px; font-weight:600;
  letter-spacing:.8px; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px;
}
.form-input, .form-select {
  width:100%; height:46px;
  border:1px solid var(--border); border-radius:3px;
  padding:0 14px; font-family:'DM Mono',monospace;
  font-size:14px; color:var(--ink); background:var(--paper);
  outline:none; transition:border-color .15s;
}
.form-input:focus, .form-select:focus { border-color:var(--green); background:white; }
.form-hint { font-size:11px; color:var(--muted); margin-top:5px; line-height:1.5; }
.prefix-wrap { position:relative; }
.prefix-wrap::before {
  content:attr(data-prefix); position:absolute;
  left:12px; top:50%; transform:translateY(-50%);
  font-family:'DM Mono',monospace; font-size:13px;
  color:var(--muted); pointer-events:none;
}
.prefix-wrap .form-input { padding-left:26px; }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
.fade-up { animation:fadeUp .5s ease both; }
.delay-1 { animation-delay:.1s; }
.delay-2 { animation-delay:.2s; }
.delay-3 { animation-delay:.3s; }