/* ContentCraft landing page — minimal, clean, brand-friendly */
:root{
  --ink:#0e1726;
  --sky:#e6f0ff;
  --accent:#2f6df6;
  --paper:#ffffff;
  --muted:#5b6474;
  --ring: rgba(47,109,246,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{
  font-family:"Playfair Display",Georgia,serif;
  line-height:1.2;
  margin:0 0 .5rem;
}
h1{font-size:clamp(2rem, 1.6rem + 2vw, 3.2rem)}
h2{font-size:clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); margin-bottom:.75rem}
h3{font-size:1.125rem}
p{margin:.25rem 0 1rem}
.lead{font-size:1.125rem;color:var(--muted);max-width:52ch}
.container{width:min(1100px,92vw);margin:0 auto;padding:0 0}
.site-header{
  position:sticky;top:0;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(180%) blur(8px);backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid #f0f3f8; z-index:10
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand img{height:36px}
.top-nav a{color:var(--ink);text-decoration:none;margin-left:18px}
.top-nav a:hover{color:var(--accent)}

.hero{background:linear-gradient(180deg,var(--sky),#fff);padding:56px 0}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}
.accent{color:var(--accent)}
.cta-row{display:flex;gap:12px;margin:18px 0 8px}
.btn{
  display:inline-block;padding:12px 16px;border-radius:10px;text-decoration:none;
  border:1px solid #d9e0ee; font-weight:600
}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:#fff;color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink)}
.ticks{padding:0;margin:.5rem 0 0;list-style:none}
.ticks li{padding-left:26px;position:relative;margin:.25rem 0;color:var(--ink)}
.ticks li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:800}

.hero-art .art-card{
  background:#fff;border:1px solid #e6eaf4;border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(2,16,63,.04)
}
.art-card .art-badge{
  display:inline-block;background:var(--sky);color:var(--accent);
  border:1px solid #d6e3ff;padding:4px 10px;border-radius:999px;font-size:.8rem;font-weight:700;margin-bottom:8px
}
.art-card ul{margin:.5rem 0 0;padding-left:18px}

.how{padding:48px 0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px}
.step{background:#fff;border:1px solid #eef1f6;border-radius:14px;padding:16px}
.num{width:32px;height:32px;border-radius:8px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;margin-bottom:8px}

.kits{padding:48px 0;background:#fbfcfe;border-top:1px solid #eef1f6;border-bottom:1px solid #eef1f6}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px}
.card{background:#fff;border:1px solid #e9edf6;border-radius:14px;padding:16px;display:flex;flex-direction:column}
.card .btn{margin-top:auto}

.proof{padding:48px 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}

.faq{padding:48px 0}
details{background:#fff;border:1px solid #e9edf6;border-radius:12px;padding:12px;margin:10px 0}
summary{cursor:pointer;font-weight:700;outline:none}
summary:focus{box-shadow:0 0 0 4px var(--ring);border-radius:8px}

.site-footer{padding:28px 0;border-top:1px solid #eef1f6;margin-top:24px}
.footer-inner{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:12px}
.brand-stack img{height:28px;display:block}
.brand-stack p{margin:.25rem 0 0;font-weight:700}
.footer-contact{list-style:none;margin:0;padding:0}
.footer-contact li{margin:.25rem 0}
.legal{grid-column:1/-1;color:var(--muted);font-size:.9rem;margin:6px 0 0}

/* Responsive */
@media (max-width: 880px){
  .hero-inner{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
}

/* ===== CaptionCraft Pro Add-On (layered on top of your existing CSS) ===== */
:root{
  --ink:#0e1726; --muted:#5b6474; --line:#e8edf5; --bg:#f7f9fc; --paper:#fff; --accent:#2f6df6;
  --radius:14px; --shadow:0 8px 30px rgba(10,22,50,.06); --max:1100px;
  --s-1:6px; --s0:10px; --s1:14px; --s2:18px; --s3:24px; --s4:32px; --s5:44px;
}

html,body{background:var(--bg); color:var(--ink);}
.container{width:min(var(--max),92vw); margin:0 auto;}

.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(180%) blur(10px); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line);}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:var(--s1) 0;}
.top-nav a{padding:.5rem .75rem; border-radius:10px; text-decoration:none; color:var(--ink);}
.top-nav a:hover{background:#f2f5fb;}

.hero{padding:var(--s4) 0 var(--s3); background:linear-gradient(180deg,#f3f7ff 0,#ffffff 100%);}
.hero .hero-copy .lead{max-width:60ch; color:var(--muted);}

.tool{padding:var(--s3) 0;}
.brief{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:var(--s3);
}
.brief .row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2);}
.brief .row.third{grid-template-columns:1fr 1fr 1fr;}
.brief label{display:flex; flex-direction:column; font-weight:600; gap:.4rem; color:var(--ink);}
.brief input[type="text"], .brief select, .brief input[type="range"]{
  appearance:none; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink);
  padding:.75rem .9rem; font:inherit; outline:none;
}
.brief input[type="text"]:focus, .brief select:focus{border-color:#cfd7ea; box-shadow:0 0 0 4px rgba(47,109,246,.15);}
.brief input[type="range"]{padding:0; height:38px;}
.cta-row{display:flex; gap:var(--s2); margin-top:var(--s2);}
.btn{display:inline-block; padding:.8rem 1rem; border-radius:12px; text-decoration:none; font-weight:700; border:1px solid var(--ink);}
.btn.primary{background:var(--ink); color:#fff;}
.btn.primary:hover{filter:brightness(1.05);}
.btn.ghost{background:#fff; border-color:#d9e0ee; color:var(--ink);}
.btn.ghost:hover{border-color:var(--ink);}

.results{padding:var(--s3) 0 var(--s4);}
.results h2{margin:0 0 var(--s2);}
.cards{display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--s2);}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:var(--s2); display:flex; flex-direction:column;
}
.card h3{margin:0 0 .4rem;}
.card pre{
  margin:.25rem 0 0; padding:var(--s1); border:1px dashed #e3e8f3; border-radius:12px;
  background:#fcfdff; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space:pre-wrap; word-break:break-word;
}
.card .actions{margin-top:auto; display:flex; gap:10px; justify-content:flex-end;}
.card .btn{padding:.6rem .9rem;}

.faq details{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:var(--s2);}

.site-footer{margin-top:var(--s4); border-top:1px solid var(--line); background:#fff;}

/* ===== Social Bar (2nd nav row) ===== */
.social-bar {
  background: linear-gradient(180deg, #f8f9fc 0%, #ffffff 100%);
  border-top: 1px solid #e9edf6;
  border-bottom: 1px solid #e9edf6;
  padding: 10px 0;
}

.social-bar-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* ===== Social Link Buttons ===== */
.social-links-column {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  border: 1px solid #e9edf6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.social-links-column .label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  margin-right: 8px;
}

.social-link {
  display: inline-block;
  padding: 6px 12px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  border: 2px solid #d9e0ee;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.social-link:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(47, 109, 246, 0.2);
}

@media (max-width: 768px) {
  .social-bar-inner {
    flex-direction: column;
    gap: 12px;
  }
  
  .social-links-column {
    width: 100%;
    justify-content: center;
  }
}

/* Responsive */
@media (max-width: 980px){
  .brief .row, .brief .row.third{grid-template-columns:1fr;}
  .cards{grid-template-columns:1fr 1fr;}
}
@media (max-width: 640px){
  .cards{grid-template-columns:1fr;}
}