/* Natural8 Bot Guide — custom layer on top of Pure.css. RTL via logical properties. */
:root{
  --ink:#1d2433;
  --muted:#5b6577;
  --line:#dbe3f2;
  --blue:#0b3d91;
  --blue-2:#5ea0ff;
  --bg:#ffffff;
  --bg-soft:#f4f7fc;
  --maxw:880px;
  color-scheme: only light;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Arimo",Arial,Helvetica,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg,table,pre{max-width:100%}
h1,h2,h3{font-family:"Rubik",Arial,sans-serif;line-height:1.2;color:var(--ink);overflow-wrap:anywhere}
h1{font-size:2.05rem;font-weight:700;margin:.2em 0 .4em}
h2{font-size:1.45rem;font-weight:600;margin:2em 0 .5em;border-block-start:0}
h3{font-size:1.12rem;font-weight:600;margin:1.4em 0 .35em}
p{margin:.6em 0}
a{color:var(--blue)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:20px}

/* header */
.site-head{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(1.2) blur(8px);
  border-block-end:1px solid var(--line);
}
.site-head .bar{
  max-width:1100px;margin-inline:auto;padding:12px 20px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:"Rubik",sans-serif;font-weight:700;font-size:1.1rem}
.brand .mark{display:inline-flex;width:30px;height:30px;border-radius:8px;background:var(--blue);color:#fff;align-items:center;justify-content:center;font-size:.85rem;font-weight:700}
.nav{display:flex;align-items:center;gap:16px;margin-inline-start:auto;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--muted);font-size:.95rem}
.nav a:hover,.nav a[aria-current="page"]{color:var(--blue)}
.cta{
  display:inline-block;background:var(--blue);color:#fff;text-decoration:none;
  padding:8px 16px;border-radius:999px;font-weight:600;font-size:.92rem;
}
.cta,.nav a.cta{color:#fff}
.cta:hover,.nav a.cta:hover{background:#0a347d;color:#fff}
.lang{font-size:.9rem;color:var(--muted)}
.lang a{color:var(--blue);text-decoration:none}

/* hero */
.hero{position:relative;margin-block-end:8px}
.hero img{width:100%;height:auto;display:block;border-radius:14px}
.hero-card{
  max-width:var(--maxw);margin-inline:auto;padding-inline:20px;margin-block-start:-44px;position:relative;
}
.hero-inner{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;box-shadow:0 10px 30px rgba(11,61,145,.08)}
.kicker{color:var(--blue-2);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.78rem}

/* answer box */
.answer{
  background:var(--bg-soft);border:1px solid var(--line);border-inline-start:4px solid var(--blue);
  border-radius:10px;padding:16px 18px;margin:18px 0;color:var(--ink);
}
.answer strong{color:var(--blue)}

/* prose */
.prose{padding-block:10px 40px}
.prose ul,.prose ol{padding-inline-start:1.3em}
.prose li{margin:.3em 0}
.prose figure{margin:1.6em 0;text-align:center}
.prose figure img{border:1px solid var(--line);border-radius:12px;background:#fff}
.prose figcaption{color:var(--muted);font-size:.85rem;margin-block-start:.5em}
.prose code{background:var(--bg-soft);padding:.1em .35em;border-radius:5px;font-size:.92em;color:#11306a}
.prose pre{background:#0f1830;color:#e6ecf7;padding:14px 16px;border-radius:10px;overflow-x:auto}
.prose pre code{background:transparent;color:inherit;padding:0}

/* table */
.tbl-wrap{overflow-x:auto;margin:1.2em 0}
table{border-collapse:collapse;width:100%;background:#fff;color:var(--ink)}
th,td{border:1px solid var(--line);padding:9px 12px;text-align:start;vertical-align:top}
th{background:var(--bg-soft);font-family:"Rubik",sans-serif;font-weight:600}

/* feature grid */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:16px;margin:1.4em 0}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column}
.card h3{margin-block-start:0;color:var(--blue)}

/* author */
.author{display:flex;gap:14px;align-items:center;background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:16px;margin:2em 0}
.author img{width:58px;height:58px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.author .nm{font-family:"Rubik",sans-serif;font-weight:600}
.author .rl{color:var(--muted);font-size:.9rem}

/* footer */
.site-foot{border-block-start:1px solid var(--line);background:var(--bg-soft);margin-block-start:40px}
.site-foot .wrap{padding-block:26px 34px;color:var(--muted);font-size:.9rem}
.site-foot a{color:var(--blue);text-decoration:none}

/* RTL tweaks */
[dir="rtl"] .nav{margin-inline-start:auto}
[dir="rtl"] body{font-family:"Rubik","Arimo",Arial,sans-serif}

/* dark-mode reassert (macOS dark must not flip to dark-on-dark) */
@media (prefers-color-scheme: dark){
  :root{
    --ink:#1d2433;--muted:#5b6577;--line:#dbe3f2;--bg:#ffffff;--bg-soft:#f4f7fc;
  }
  body{background:#fff;color:#1d2433}
  table,th,td{background:#fff;color:#1d2433}
  th{background:var(--bg-soft)}
  .site-head{background:rgba(255,255,255,.92)}
  .prose code{background:var(--bg-soft);color:#11306a}
  .prose pre{background:#0f1830;color:#e6ecf7}
}

@media (max-width:560px){
  body{font-size:16px}
  h1{font-size:1.65rem}
  .nav{gap:12px;font-size:.9rem}
  .hero-card{margin-block-start:-22px}
}