/* Shared stylesheet for Otter Exporter blog / SEO articles.
   Kept deliberately small — these pages are read, not admired. */

:root{
  --bg:#ffffff; --fg:#101319; --muted:#5a6273; --line:#e7eaf0;
  --brand:#1f6feb; --brand-dark:#1657c0; --soft:#f6f8fc;
  --ok:#136b3a; --warn:#8a4708; --danger:#a3231d;
  --maxw:760px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:17px/1.72 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased;
  word-wrap:break-word;
}
a{color:var(--brand)}
code{background:var(--soft); border:1px solid var(--line); border-radius:5px; padding:1px 5px; font-size:.86em}
kbd{background:#fff; border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:1px 6px; font-size:.85em}
hr{border:0; border-top:1px solid var(--line); margin:34px 0}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.top{display:flex; align-items:center; gap:10px; padding:18px 0; border-bottom:1px solid var(--line)}
.top svg{flex:none}
.top b{font-size:15px}
.top span{margin-left:auto; font-size:13px; display:flex; gap:14px; align-items:center}
.top span a{text-decoration:none}
.top span a:hover{text-decoration:underline}

article{padding:34px 0 10px}
h1{font-size:clamp(27px,4.4vw,38px); line-height:1.2; letter-spacing:-.022em; margin:0 0 14px}
h2{font-size:23px; letter-spacing:-.015em; margin:38px 0 12px; scroll-margin-top:20px}
h3{font-size:18px; margin:26px 0 8px}
p{margin:0 0 16px}
ul,ol{margin:0 0 16px; padding-left:24px} li{margin:7px 0}
strong{font-weight:650}
.byline{font-size:13.5px; color:var(--muted); margin:0 0 26px}
.lede{font-size:18.5px; color:#3d4453; margin:0 0 26px}

.tldr{
  background:var(--soft); border:1px solid var(--line); border-left:3px solid var(--brand);
  border-radius:10px; padding:16px 20px; margin:0 0 30px;
}
.tldr p:last-child{margin-bottom:0}
.tldr b{display:block; font-size:13px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:8px}

.callout{
  background:#fffaf0; border:1px solid #f2dfb8; border-radius:10px;
  padding:14px 18px; margin:0 0 20px; font-size:16px;
}
.callout p:last-child{margin-bottom:0}
.callout.warn{background:#fdf3f2; border-color:#f4cfcb}

.cta-box{
  background:linear-gradient(180deg,#f4f8ff,#eaf1fe); border:1px solid #cddffb;
  border-radius:12px; padding:20px 22px; margin:32px 0;
}
.cta-box h3{margin:0 0 6px; font-size:17px}
.cta-box p{margin:0 0 14px; font-size:15.5px; color:#3d4453}
.btn{
  display:inline-block; background:var(--brand); color:#fff; text-decoration:none;
  font-weight:650; font-size:15.5px; padding:11px 20px; border-radius:9px;
}
.btn:hover{background:var(--brand-dark)}
.btn.ghost{background:transparent; color:var(--brand); border:1px solid #b9d1f8}
.btn.ghost:hover{background:#eef4fe}

table{width:100%; border-collapse:collapse; margin:6px 0 22px; font-size:15.5px}
th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:650; background:var(--soft)}
td.yes{color:var(--ok); font-weight:650}
td.no{color:var(--danger); font-weight:650}
td.mid{color:var(--warn); font-weight:650}
caption{caption-side:bottom; text-align:left; font-size:13px; color:var(--muted); padding-top:8px}

details{border:1px solid var(--line); border-radius:10px; padding:13px 16px; margin:0 0 10px}
details[open]{background:var(--soft)}
summary{cursor:pointer; font-weight:650; font-size:16px}
details p{margin:10px 0 0; font-size:16px; color:#3d4453}

.toc{
  background:var(--soft); border:1px solid var(--line); border-radius:10px;
  padding:14px 20px 14px 34px; margin:0 0 32px; font-size:15.5px;
}
.toc b{display:block; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 6px; padding-left:0}
.toc ol{padding-left:0; margin:0}
.toc li{margin:4px 0}

.steps{counter-reset:s; list-style:none; padding:0; margin:0 0 22px}
.steps > li{counter-increment:s; position:relative; padding-left:44px; margin:0 0 22px}
.steps > li::before{
  content:counter(s); position:absolute; left:0; top:0;
  width:28px; height:28px; border-radius:50%;
  background:#e8f0fe; color:var(--brand); font-size:14px; font-weight:700;
  display:grid; place-items:center;
}
.steps h3{margin-top:4px}

footer{margin-top:44px; border-top:1px solid var(--line); padding:24px 0 48px; color:var(--muted); font-size:13.5px}
footer a{color:var(--muted)}
.disclaimer{font-size:13px; color:var(--muted)}

.next-reads{border-top:1px solid var(--line); margin-top:38px; padding-top:22px}
.next-reads h2{font-size:16px; margin:0 0 10px}
.next-reads ul{margin:0; padding-left:20px; font-size:16px}