/* Asmachta blog — tokens + page CSS (hub + article). No mock-chrome. */
:root{
  --navy-950:#0F172A;--navy-900:#1E293B;--navy-700:#475569;
  --green-600:#059669;--green-500:#10B981;--green-400:#34D399;
  --green-50:#ECFDF5;--blue-600:#047857;--blue-50:#ECFDF5;
  --ink:#0F172A;--ink-2:#334155;--muted:#64748B;
  --line:#E2E8F0;--line-2:#CBD5E1;
  --bg:#F8FAFC;--white:#fff;
  --amber-500:#F59E0B;--amber-300:#FCD34D;--amber-800:#92400E;--amber-50:#FFFBEB;
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-2xl:28px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --sh-1:0 1px 2px rgba(15,23,42,.06),0 1px 1px rgba(15,23,42,.04);
  --sh-2:0 8px 24px -8px rgba(15,23,42,.18),0 2px 4px rgba(15,23,42,.06);
  --f:"Rubik","Heebo",system-ui,sans-serif;
  --prose:720px;
}
.art-cta .btn-amber{background:transparent;border:1.5px solid var(--amber-500);color:var(--amber-800)}
.art-cta .btn-amber:hover{background:rgba(245,158,11,.2);text-decoration:none!important}
.art-body table{
  width:100%;border-collapse:collapse;margin:1.2em 0;
  font:500 14px/1.45 var(--f);color:var(--ink-2);
}
.art-body th,.art-body td{
  border:1px solid var(--line);padding:10px 12px;text-align:start;vertical-align:top;
}
.art-body th{background:#F1F5F9;color:var(--ink);font-weight:700}
.art-body tr:nth-child(even) td{background:rgba(248,250,252,.7)}
.art-callout p{margin:0}
.art-callout p + p{margin-top:.6em}
.art-body hr{border:0;border-top:1px solid var(--line);margin:1.6em 0}

/* Hub page — /blog */

.kh-main{
  flex:1;
  padding:var(--s5) 0 var(--s7);
  background:
    radial-gradient(900px 280px at 85% -5%, rgba(16,185,129,.10), transparent 55%),
    linear-gradient(180deg, #F1F5F9 0%, var(--bg) 35%, var(--bg) 100%);
}
@media(min-width:1024px){.kh-main{padding:var(--s6) 0 var(--s8)}}

.kh-intro{display:grid;gap:var(--s3);margin-bottom:var(--s5);max-width:40em}
@media(min-width:1024px){.kh-intro{margin-bottom:var(--s6)}}

.kh-eyebrow{
  margin:0;
  font:600 13px/1.3 var(--f);color:var(--blue-600);
  letter-spacing:.02em;
}
.kh-intro h1{
  margin:0;
  font:800 28px/1.2 var(--f);color:var(--ink);
  letter-spacing:-.02em;text-wrap:balance;
}
@media(min-width:1024px){.kh-intro h1{font-size:40px;line-height:1.15}}
.kh-lead{
  margin:0;
  font:400 16px/1.55 var(--f);color:var(--ink-2);
  text-wrap:pretty;
}
@media(min-width:1024px){.kh-lead{font-size:17px}}

/* Article cards — list, not empty grid */
.kh-list{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--s3);
}
@media(min-width:768px){.kh-list{gap:var(--s4)}}

.kh-card{
  display:grid;gap:var(--s3);
  padding:var(--s4);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-1);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
@media(min-width:768px){
  .kh-card{
    grid-template-columns:auto 1fr auto;
    align-items:center;gap:var(--s5);
    padding:var(--s5);
  }
}
.kh-card:hover{
  border-color:rgba(4,120,87,.35);
  box-shadow:var(--sh-2);
  transform:translateY(-1px);
}
.kh-card:hover .kh-card-title{color:var(--blue-600)}

.kh-card-mark{
  width:48px;height:48px;border-radius:var(--r-md);
  background:var(--green-50);border:1px solid rgba(16,185,129,.25);
  display:grid;place-items:center;color:var(--blue-600);flex:none;
}
@media(max-width:767px){.kh-card-mark{display:none}}

.kh-card-body{display:grid;gap:6px;min-width:0}
.kh-card-meta{
  margin:0;
  font:500 12px/1.3 var(--f);color:var(--muted);
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.kh-card-meta .dot{width:3px;height:3px;border-radius:999px;background:var(--line-2)}
.kh-card-title{
  margin:0;
  font:700 18px/1.35 var(--f);color:var(--ink);
  letter-spacing:-.01em;text-wrap:balance;
  transition:color .15s;
}
@media(min-width:1024px){.kh-card-title{font-size:20px}}
.kh-card-excerpt{
  margin:0;
  font:400 14px/1.5 var(--f);color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.kh-card-cta{
  display:inline-flex;align-items:center;gap:6px;
  font:600 14px/1 var(--f);color:var(--blue-600);
  text-decoration:none!important;white-space:nowrap;
}
.kh-card-cta svg{width:16px;height:16px}
.kh-card a.kh-card-hit{
  text-decoration:none!important;color:inherit;
  display:contents;
}
/* Make whole card clickable via overlay on mobile/desktop without breaking layout */
.kh-card{position:relative}
.kh-card > a.kh-stretch{
  position:absolute;inset:0;z-index:1;border-radius:inherit;
  text-decoration:none!important;
}
.kh-card-cta{position:relative;z-index:2;pointer-events:none}

.kh-foot-note{
  margin:var(--s5) 0 0;
  font:400 13px/1.5 var(--f);color:var(--muted);
  max-width:42em;
}

/* Soft bottom CTA strip — prevention */
.kh-cta-strip{
  margin-top:var(--s6);
  padding:var(--s5);
  border-radius:var(--r-xl);
  background:linear-gradient(135deg, #042F2E 0%, #0F172A 55%, #134E4A 100%);
  color:#E2E8F0;
  display:grid;gap:var(--s4);
  box-shadow:var(--sh-2);
}
@media(min-width:768px){
  .kh-cta-strip{
    grid-template-columns:1fr auto;
    align-items:center;gap:var(--s5);
    padding:var(--s5) var(--s6);
  }
}
.kh-cta-strip h2{
  margin:0 0 6px;
  font:700 18px/1.3 var(--f);color:#F8FAFC;
}
.kh-cta-strip p{
  margin:0;
  font:400 14px/1.5 var(--f);color:#CBD5E1;
}
.kh-cta-strip .btn{justify-self:start}
@media(min-width:768px){.kh-cta-strip .btn{justify-self:end}}

/* Article template */
/* brand.css linked from HTML */

.art-main{
  flex:1;
  padding:var(--s4) 0 var(--s7);
  background:
    radial-gradient(700px 240px at 90% 0%, rgba(16,185,129,.08), transparent 55%),
    linear-gradient(180deg, #F1F5F9 0%, var(--bg) 28%, var(--bg) 100%);
}
@media(min-width:1024px){.art-main{padding:var(--s5) 0 var(--s8)}}

/* Breadcrumbs */
.bc{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
  margin:0 0 var(--s4);
  font:500 13px/1.4 var(--f);color:var(--muted);
  list-style:none;padding:0;
}
.bc a{color:var(--blue-600);text-decoration:none!important}
.bc a:hover{text-decoration:underline!important}
.bc .sep{color:var(--line-2);user-select:none}
.bc [aria-current="page"]{color:var(--ink-2);font-weight:600}

.art-head{display:grid;gap:var(--s3);margin-bottom:var(--s4);max-width:40em}
.art-eyebrow{
  margin:0;
  font:600 13px/1.3 var(--f);color:var(--blue-600);
}
.art-head h1{
  margin:0;
  font:800 26px/1.25 var(--f);color:var(--ink);
  letter-spacing:-.02em;text-wrap:balance;
}
@media(min-width:768px){.art-head h1{font-size:34px}}
@media(min-width:1024px){.art-head h1{font-size:40px;line-height:1.15}}

.art-meta{
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  font:500 13px/1.4 var(--f);color:var(--muted);
}
.art-meta .dot{width:3px;height:3px;border-radius:999px;background:var(--line-2)}
.art-author{color:var(--ink-2)}

/* Featured 16:9 — quiet inline media (v1.2) */
.art-hero{
  margin:0 0 var(--s4);
  max-width:460px;
  margin-inline-end:auto; /* RTL start-aligned with prose column */
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--navy-950);
  box-shadow:var(--sh-1);
}
.art-hero img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  display:block;
}
@media(max-width:479px){
  .art-hero{
    max-width:100%;
    border-radius:var(--r-sm);
    box-shadow:none;
  }
}

/* Prose */
.art-body{
  max-width:var(--prose);
  font:400 17px/1.7 var(--f);color:var(--ink-2);
}
.art-body > * + *{margin-top:1.1em}
.art-body h2{
  margin:1.8em 0 .6em;
  font:700 22px/1.3 var(--f);color:var(--ink);
  letter-spacing:-.01em;
}
@media(min-width:768px){.art-body h2{font-size:24px}}
.art-body h3{
  margin:1.4em 0 .45em;
  font:700 18px/1.35 var(--f);color:var(--ink);
}
.art-body p{margin:0}
.art-body ul,.art-body ol{
  margin:0;padding-inline-start:1.25em;
  display:grid;gap:8px;
}
.art-body li{padding-inline-start:4px}
.art-body strong{color:var(--ink);font-weight:600}
.art-body a{color:var(--blue-600);font-weight:500;text-decoration:underline}

.art-callout{
  margin:1.6em 0;
  padding:var(--s4);
  border-radius:var(--r-lg);
  background:var(--green-50);
  border:1px solid rgba(16,185,129,.28);
  font:500 15px/1.55 var(--f);color:var(--ink);
}
.art-callout strong{color:var(--blue-600)}

/* FAQ */
.art-faq{
  margin:var(--s7) 0 0;
  padding:var(--s5);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-1);
}
.art-faq h2{
  margin:0 0 var(--s4);
  font:700 22px/1.3 var(--f);color:var(--ink);
}
.faq-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.faq-item{
  border-top:1px solid var(--line);
  padding:var(--s4) 0;
}
.faq-item:first-child{border-top:0;padding-top:0}
.faq-item:last-child{padding-bottom:0}
.faq-item h3{
  margin:0 0 8px;
  font:700 16px/1.4 var(--f);color:var(--ink);
}
.faq-item p{
  margin:0;
  font:400 15px/1.6 var(--f);color:var(--ink-2);
}

/* CTA blocks */
.art-cta{
  margin:var(--s6) 0 0;
  display:grid;gap:var(--s3);
}
@media(min-width:768px){.art-cta{grid-template-columns:1fr 1fr;gap:var(--s4)}}

.cta-card{
  padding:var(--s5);
  border-radius:var(--r-xl);
  display:grid;gap:var(--s3);
  align-content:start;
}
.cta-card h2{
  margin:0;
  font:700 18px/1.3 var(--f);
}
.cta-card p{
  margin:0;
  font:400 14px/1.5 var(--f);
}
.cta-prevent{
  background:linear-gradient(135deg, #042F2E 0%, #0F172A 60%, #134E4A 100%);
  color:#E2E8F0;
  box-shadow:var(--sh-2);
}
.cta-prevent h2{color:#F8FAFC}
.cta-prevent p{color:#CBD5E1}
.cta-emergency{
  background:var(--amber-50);
  border:1.5px solid rgba(245,158,11,.45);
  color:var(--ink);
}
.cta-emergency h2{color:var(--amber-800)}
.cta-emergency p{color:var(--ink-2)}
.cta-card .btn{justify-self:start;margin-top:4px}

.art-disclaimer{
  margin:var(--s5) 0 0;
  font:400 12px/1.55 var(--f);color:var(--muted);
  max-width:48em;
}