/* Studio Paper — Kulshot resources/blog shared styles */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:#F7F6F2;color:#1a1c20;
  font-family:'Anuphan',system-ui,sans-serif;font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:#2f45e0;text-decoration:none}
a:hover{color:#1e2fb0}
img{max-width:100%}
.wrap{max-width:1150px;margin:0 auto;padding:0 18px}
.article-wrap{max-width:720px;margin:0 auto;padding:0 18px}

nav.site{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid #E7E4DD}
.brand{display:flex;align-items:center;gap:8px;font:700 17px/1 'Anuphan';letter-spacing:-.01em;color:#1a1c20}
.nav-links{display:none;align-items:center;gap:28px}
.nav-links a{font:500 14px/1 'Anuphan';color:#575c66}
.nav-links a:hover{color:#1a1c20}
.nav-links a.active{color:#1a1c20;font-weight:600}
.btn-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#2f45e0;color:#fff;border-radius:10px;padding:9px 15px;font:600 13px/1 'Anuphan';
}
.btn-cta:hover{background:#1e2fb0;color:#fff}

.eyebrow{font:600 11px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.1em;color:#2f45e0;text-transform:uppercase;margin:0 0 8px}
h1{font:700 30px/1.2 'Anuphan';letter-spacing:-.02em;margin:0 0 12px;text-wrap:balance}
h2{font:700 21px/1.25 'Anuphan';letter-spacing:-.015em;margin:36px 0 12px;text-wrap:balance}
h3{font:600 16px/1.3 'Anuphan';margin:24px 0 8px}
p{margin:0 0 16px}
ul,ol{margin:0 0 16px;padding-left:22px}
li{margin-bottom:6px}
.meta{display:flex;align-items:center;gap:10px;font:400 12.5px/1 'Anuphan';color:#8b909b;margin-bottom:24px;flex-wrap:wrap}
.meta .dot{width:3px;height:3px;border-radius:50%;background:#c5c2ba}
.crumbs{font:400 12.5px/1.4 'Anuphan';color:#8b909b;padding:18px 0 10px}
.crumbs a{color:#8b909b}
.crumbs a:hover{color:#2f45e0}

/* answer-first box */
.answer-box{
  background:#ECEAFF;border:1px solid #D9DCFA;border-radius:16px;padding:18px 20px;margin:0 0 28px;
}
.answer-box .ab-label{font:600 10.5px/1 'IBM Plex Mono',monospace;letter-spacing:.1em;color:#2f45e0;text-transform:uppercase;margin-bottom:8px}
.answer-box p{font-size:15px;line-height:1.65;color:#1a1c20;margin:0}

/* tables */
.table-wrap{overflow-x:auto;border-radius:14px;margin:0 0 16px}
table.facts{width:100%;border-collapse:collapse;background:#fff;border:1px solid #E2DFD8;border-radius:14px;overflow:hidden}
.facts th{text-align:left;padding:11px 13px;border-bottom:1px solid #ECEAE3;font:600 10px/1.3 'IBM Plex Mono',monospace;letter-spacing:.05em;color:#8b909b;text-transform:uppercase;white-space:nowrap}
.facts td{padding:11px 13px;border-bottom:1px solid #ECEAE3;font:400 13px/1.5 'Anuphan';color:#575c66;vertical-align:top}
.facts td:first-child{font-weight:600;color:#1a1c20}
.facts tr:last-child td{border-bottom:none}
.facts td.k{color:#2f45e0;font-weight:600}
.table-note{font:400 11.5px/1.5 'Anuphan';color:#8b909b;margin:-6px 0 16px}

/* callout + cta */
.callout{background:#fff;border:1px solid #E2DFD8;border-radius:14px;padding:15px 18px;margin:0 0 16px;font-size:14px;color:#575c66}
.callout b{color:#1a1c20}
.article-cta{
  background:#1a1c20;border-radius:18px;padding:26px 22px;margin:36px 0;text-align:center;
}
.article-cta h2{color:#fff;margin:0 0 8px;font-size:20px}
.article-cta p{color:#b9bcc4;font-size:13.5px;margin:0 0 18px}
.article-cta a{
  display:inline-flex;align-items:center;gap:8px;background:#2f45e0;color:#fff;
  border-radius:13px;padding:14px 24px;font:600 15px/1 'Anuphan';
}
.article-cta a:hover{background:#1e2fb0;color:#fff}

/* faq */
.faq-list{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.faq-list details{background:#fff;border:1px solid #E2DFD8;border-radius:14px;padding:14px 16px}
.faq-list summary{font:600 14px/1.4 'Anuphan';color:#1a1c20;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:focus-visible{outline:2px solid #2f45e0;outline-offset:2px}
.faq-list p{font:400 13px/1.6 'Anuphan';color:#575c66;margin:9px 0 0}

/* hub cards */
.hub-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:26px 0}
.hub-card{
  background:#fff;border:1px solid #E2DFD8;border-radius:16px;padding:20px;display:block;
}
.hub-card:hover{border-color:#c9cdf5}
.hub-card .hc-tag{font:600 10px/1 'IBM Plex Mono',monospace;letter-spacing:.08em;color:#2f45e0;text-transform:uppercase}
.hub-card h2{font:700 17px/1.35 'Anuphan';color:#1a1c20;margin:8px 0 6px}
.hub-card p{font:400 13px/1.6 'Anuphan';color:#575c66;margin:0 0 10px}
.hub-card .hc-more{font:600 13px/1 'Anuphan';color:#2f45e0}

/* related */
.related{border-top:1px solid #E7E4DD;margin-top:36px;padding-top:20px}
.related h2{margin-top:0;font-size:17px}
.related ul{list-style:none;padding:0}
.related li{margin-bottom:8px;font-size:14px}

footer.site{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px;padding:16px 0 28px;border-top:1px solid #E7E4DD}
.foot-brand{display:flex;align-items:center;gap:7px;font:600 13px/1 'Anuphan';color:#1a1c20}
.foot-brand small{font:400 12px/1 'Anuphan';color:#a4a29a;margin-left:4px}
.foot-note{font:400 10.5px/1.4 'Anuphan';color:#a4a29a;text-align:right;max-width:52%}

@media (min-width:900px){
  .wrap{padding:0 44px}
  nav.site{padding:20px 0}
  .brand{font-size:19px}
  .nav-links{display:flex}
  h1{font-size:38px}
  h2{font-size:24px}
  .hub-grid{grid-template-columns:repeat(3,1fr)}
  .article-cta{padding:32px}
}