@font-face {
  font-family:Nunito;
  src:url('/assets/nunito-bold.woff') format('woff');
  font-weight:700;
  font-display:swap;
}

@font-face {
  font-family:Devanagari;
  src:url('/assets/devanagari-bold.woff') format('woff');
  font-weight:700;
  font-display:swap;
}

:root {
  --ink:#2d2b3a;
  --muted:#615d69;
  --paper:#fff9f4;
  --coral:#ff6b4a;
  --teal:#087d70;
  --line:#dfd7ce;
  color-scheme:light;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.7;
}

h1,h2,h3,.brand,.button {
  font-family:Nunito,system-ui,sans-serif;
  font-weight:700;
}

html:lang(hi) h1,html:lang(hi) h2,html:lang(hi) h3,html:lang(hi) .button {
  font-family:Devanagari,system-ui,sans-serif;
}

h1,h2,h3 {
  line-height:1.17;
  text-wrap:balance;
}

h1 {
  font-size:clamp(2.15rem,4.8vw,3.65rem);
  letter-spacing:-.035em;
  margin:.25em 0 .55em;
}

h2 {
  font-size:clamp(1.5rem,3vw,2rem);
  letter-spacing:-.02em;
}

h3 {
  font-size:1.35rem;
}

p,li {
  overflow-wrap:break-word;
}

a {
  color:var(--teal);
  text-underline-offset:4px;
}

a:hover {
  text-decoration-thickness:2px;
}

a,button {
  touch-action:manipulation;
}

a:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--teal);
  outline-offset:5px;
  border-radius:3px;
}

h2[id] {
  scroll-margin-top:1rem;
}

.skip-link {
  position:absolute;
  top:-100px;
  left:1rem;
  z-index:2;
  padding:.8rem;
  background:white;
}

.skip-link:focus {
  top:1rem;
}

.site-header {
  max-width:1160px;
  margin:auto;
  padding:1.35rem 2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  border-bottom:1px solid var(--line);
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color:var(--ink);
  font-size:1.65rem;
  letter-spacing:-.04em;
}

.brand img {
  border-radius:10px;
}

.nav-link {
  font-weight:650;
  padding:.5rem 0;
}

.site-wrap {
  max-width:1160px;
  padding:0 2rem;
  margin:auto;
}

.languages {
  display:flex;
  flex-wrap:wrap;
  gap:.25rem .85rem;
  margin:1rem 0 2rem;
  font-size:.85rem;
}

.languages a {
  padding:.3rem .15rem;
  color:var(--muted);
}

.languages [aria-current] {
  color:var(--teal);
  font-weight:750;
  text-decoration-thickness:2px;
}

.eyebrow {
  font-size:.79rem;
  font-weight:750;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--teal);
  margin:0 0 1rem;
}

.intro {
  font-size:1.125rem;
  line-height:1.8;
  color:#494552;
}

.article-hero {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:3rem;
  align-items:start;
  padding:1rem 0 2rem;
}

.article-hero>div {
  min-width:0;
}

.challenge-card {
  background:#e7f4ed;
  border:1px solid #c4ded0;
  border-radius:24px;
  padding:1.8rem;
  margin-top:.8rem;
  box-shadow:7px 7px 0 #d2e7dc;
}

.challenge-icon {
  display:block;
  font-size:3.2rem;
  line-height:1.3;
  margin-bottom:1.25rem;
}

.challenge-card h2 {
  margin:.4rem 0 1rem;
}

.challenge-card p {
  font-size:.97rem;
}

.answer-chips {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  list-style:none;
  padding:0;
  margin:1.3rem 0 0;
}

.answer-chips li {
  background:white;
  border:1px solid #b7d4c8;
  border-radius:9px;
  padding:.35rem .8rem;
  font-size:.9rem;
  font-weight:650;
}

.answer-chips li:last-child {
  background:transparent;
  border-style:dashed;
}

.actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.8rem;
  margin-top:1.5rem;
}

.button {
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  border-radius:12px;
  text-decoration:none;
  padding:.8rem 1rem;
  line-height:1.35;
  font-size:.95rem;
  text-align:center;
}

.button-primary {
  background:var(--coral);
  color:#281b19;
  border:1px solid #e8583b;
  box-shadow:0 3px 0 #c4452d;
}

.button-primary:hover {
  background:#ff805f;
}

.button-secondary {
  background:transparent;
  color:var(--teal);
  border:1px solid #a8c9bb;
}

.button-secondary:hover {
  background:#e7f4ed;
}

.small {
  font-size:.82rem;
  line-height:1.6;
  color:var(--muted);
  margin:.85rem 0;
}

.byline {
  font-size:.85rem;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding:1rem 0;
  margin:0 0 1.5rem;
}

.article-body {
  max-width:780px;
  margin:auto;
  font-size:1.05rem;
}

.article-body section {
  margin:2.4rem 0;
}

.article-body h2 {
  margin:0 0 1rem;
}

.article-body p {
  margin:.8rem 0;
}

.article-body ul {
  padding-left:1.25rem;
}

.article-body li {
  margin:.6rem 0;
  padding-left:.25rem;
}

.comparison {
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:15px;
  margin:2rem 0;
  max-width:100%;
}

table {
  border-collapse:collapse;
  width:100%;
  font-size:.9rem;
  text-align:left;
  line-height:1.6;
}

caption {
  text-align:left;
  padding:1rem;
  font-weight:750;
  background:#f0eae3;
}

th,td {
  padding:1rem;
  vertical-align:top;
  border-bottom:1px solid var(--line);
  min-width:145px;
}

thead {
  background:#e7f4ed;
}

tbody th {
  font-weight:650;
}

tbody tr:last-child>* {
  border-bottom:0;
}

.section-citations {
  border-left: 3px solid var(--teal);
  padding-left: 1.2rem;
  list-style: none;
  font-size: .9rem;
}

.section-citations a {
  overflow-wrap: anywhere;
}

.sources {
  font-size:.9rem;
}

.sources h2 {
  font-size:1.15rem;
}

.download-panel {
  margin:3.5rem 0;
  padding:2.2rem;
  background:#fff0e6;
  border:1px solid #f1d0b9;
  border-radius:22px;
}

.download-panel h2 {
  margin:0 0 .6rem;
  font-size:2rem;
}

.download-panel>p {
  max-width:720px;
}

.download-panel .small {
  max-width:860px;
}

.guide-cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:1.2rem;
  margin:1.5rem 0;
}

.guide-card {
  display:block;
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:1.6rem 1.6rem 2.7rem;
  text-decoration:none;
  color:var(--ink);
}

.guide-card:hover {
  border-color:var(--teal);
  background:#f4fbf7;
}

.guide-card h3 {
  margin:1rem 0;
}

.guide-card p {
  font-size:.95rem;
  color:var(--muted);
}

.card-number {
  font-size:.9rem;
  color:var(--teal);
  font-weight:750;
}

.card-arrow {
  position:absolute;
  bottom:1rem;
  right:1.4rem;
  color:var(--teal);
  font-size:1.5rem;
}

.related {
  margin:3rem 0;
}

.hub-hero {
  max-width:800px;
  padding:1.5rem 0;
}

.hub-hero h1 {
  max-width:720px;
}

.site-footer {
  margin-top:3rem;
  border-top:1px solid var(--line);
  padding:1.5rem 0 2.5rem;
  color:var(--muted);
  font-size:.85rem;
}

.site-footer nav {
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.3rem;
}

.site-footer a {
  padding:.25rem 0;
}

.not-found {
  padding-top:2rem;
  padding-bottom:3rem;
}

.not-found section {
  padding:1rem 0;
  border-top:1px solid var(--line);
}

.not-found h2 {
  font-size:1.3rem;
}

@media(max-width:760px) {
  .site-header {
    padding:1rem 1.25rem;
  }
  .site-wrap {
    padding:0 1.25rem;
  }
  .languages {
    margin-bottom:1.3rem;
  }
  .article-hero {
    grid-template-columns:1fr;
    gap:1.3rem;
    padding-top:.5rem;
  }
  .challenge-card {
    padding:1.4rem;
    margin-top:0;
    box-shadow:4px 4px 0 #d2e7dc;
  }
  .challenge-icon {
    font-size:2.5rem;
    margin-bottom:.8rem;
  }
  .download-panel {
    padding:1.5rem;
  }
  .download-panel h2 {
    font-size:1.7rem;
  }
  .article-body {
    font-size:1rem;
  }
  th,td {
    padding:.8rem;
    min-width:130px;
  }
  .intro {
    font-size:1.05rem;
  }
  .actions {
    align-items:stretch;
  }
  .button {
    flex:1 1 180px;
  }
  .hub-hero {
    padding:.5rem 0;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
}