/* Neural Project Institute — guide pages. Layout: planning-board grid ground, article column with sticky table of contents. */
:root {
  --bg: #f3f5f4; --surface: #ffffff; --sunk: #e8edeb; --ink: #17242f; --muted: #56656d; --line: #d3dbd8;
  --accent: #1d6b52; --accent-ink: #ffffff; --accent-soft: #dcece5; --mile: #b97813; --mile-soft: #f6e8cf;
  --grid: rgba(23, 36, 47, .045);
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #0f1517; --surface: #172024; --sunk: #1d282c; --ink: #e4ebe8; --muted: #9eadb3; --line: #2b383d;
  --accent: #4fbf93; --accent-ink: #0b1a14; --accent-soft: #173a2e; --mile: #e3a84a; --mile-soft: #3a2c14; --grid: rgba(228, 235, 232, .035);
  color-scheme: dark } }
* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 90px }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.7 var(--f-body);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 48px 48px }
a { color: var(--accent) }
img, svg { max-width: 100% }
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: 20px }
.skip { position: absolute; left: -999px } .skip:focus { left: 12px; top: 12px; background: var(--surface); padding: 8px 12px; z-index: 99 }
:focus-visible { outline: 3px solid var(--mile); outline-offset: 2px }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.15; text-wrap: balance; letter-spacing: -.01em; margin: 0 }
h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 780; font-stretch: 88% }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); font-weight: 720; font-stretch: 92% }
.eyebrow { font: 500 .74rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 }
.eyebrow a { color: inherit }
.muted { color: var(--muted) }
.mono { font-family: var(--f-mono) }
.btn { display: inline-block; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; padding: 12px 18px; border-radius: 6px }

/* Header / footer */
header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line) }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; flex-wrap: wrap }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink) }
.brand b { display: block; font: 760 1rem/1.1 var(--f-display); font-stretch: 85% }
.brand small { display: block; font: 500 .62rem/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.mainnav { display: flex; align-items: center; gap: 4px }
.mainnav > a, .ddbtn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 6px; border: 0; background: none;
  color: var(--ink); font: 500 .92rem/1 var(--f-body); text-decoration: none; white-space: nowrap; cursor: pointer }
.mainnav > a:hover, .ddbtn:hover, .dd.open .ddbtn { background: var(--sunk) }
.mainnav > a.cta { background: var(--ink); color: var(--bg); font-weight: 600; margin-left: 6px }
.mainnav > a.cta:hover { background: var(--accent); color: var(--accent-ink) }
.dd { position: relative }
.ddmenu { display: none; position: absolute; top: 100%; left: 0; padding-top: 8px; min-width: 300px; z-index: 30 }
.ddmenu::before { content: ""; position: absolute; inset: 8px 0 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px -16px rgba(0,0,0,.35) }
.ddmenu a { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; text-decoration: none; color: var(--ink) }
.ddmenu a:first-child { margin-top: 6px } .ddmenu a:last-child { margin-bottom: 6px }
.ddmenu a b { font: 650 .95rem/1.3 var(--f-display) } .ddmenu a span { font-size: .8rem; color: var(--muted); line-height: 1.35 }
.ddmenu a:hover b { color: var(--accent) }
.dd:hover .ddmenu, .dd:focus-within .ddmenu, .dd.open .ddmenu, .dd.hov .ddmenu { display: block }
.dd.hov .ddmenu { z-index: 31 }
nav:has(.dd.hov) .dd:not(.hov):not(.open):not(:focus-within) .ddmenu { display: none }
footer.foot { border-top: 1px solid var(--line); margin-top: 80px; padding-block: 32px; font-size: .9rem; color: var(--muted) }
footer.foot .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap }
footer.foot p { margin: 6px 0 0; max-width: 46ch }
footer.foot nav { display: flex; flex-direction: column; gap: 6px }

/* Breadcrumbs */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 24px 0 18px; font-size: .86rem; color: var(--muted) }
.crumbs li + li::before { content: "›"; margin-right: 6px }
.crumbs a { color: var(--muted) }

/* Article */
.ahead, .hub { max-width: 820px; display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px }
.lead { font-size: 1.15rem; color: var(--muted); margin: 0 }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 22px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; max-width: 760px }
.bavatar { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sunk); border: 1px solid var(--line) }
.bavatar svg { width: 30px; height: 30px }
.bwho { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 200px }
.blabel { font: 500 .7rem/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.byline a.bname { font: 700 1.08rem/1.3 var(--f-display); color: var(--ink); text-decoration: none }
.byline a.bname:hover { color: var(--accent); text-decoration: underline }
.brole { font-size: .86rem; color: var(--muted); line-height: 1.35 }
.bmeta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px }
.bmeta li { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 11px; border-radius: 999px; background: var(--sunk); color: var(--ink); font-size: .85rem; font-weight: 500; line-height: 1.2 }
.bmeta svg { color: var(--accent); flex: none }
@media (max-width: 560px) { .byline { padding: 12px 14px } .bmeta { width: 100% } }
.agrid { display: grid; grid-template-columns: 1fr; gap: 32px }
.abody { min-width: 0; max-width: 760px }
.abody.narrow { max-width: 720px }
.abody section { margin-bottom: 40px }
.abody h2 { margin-bottom: 14px }
.abody p { margin: 0 0 14px }
.abody ul, .abody ol { padding-left: 1.3em; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px }
.toc { align-self: start }
.toc details { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px }
.toc summary { cursor: pointer; font: 600 .78rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.toc ol { margin: 10px 0 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 7px; font-size: .92rem; line-height: 1.4 }
.toc a { color: var(--ink); text-decoration: none } .toc a:hover { color: var(--accent); text-decoration: underline }
.tw { overflow-x: auto; margin: 0 0 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px }
table { width: 100%; border-collapse: collapse; font-size: .93rem; line-height: 1.5 }
th, td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); min-width: 120px }
th { font: 500 .72rem var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); background: var(--sunk) }
tr:last-child td { border-bottom: 0 }
.tip { background: var(--mile-soft); border-radius: 10px; padding: 14px 18px; margin: 0 0 18px }
.tip span { font: 600 .7rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mile) }
.tip p { margin: 4px 0 0 }
.takeaways { background: var(--accent-soft); border-radius: 12px; padding: 20px 24px }
.takeaways.top { max-width: 820px; margin: 0 0 32px }
.takeaways.top h2 { font-size: 1.15rem; margin-bottom: 10px }
.takeaways ul { margin: 0 }
details.faq { border-top: 1px solid var(--line); padding: 14px 0 }
details.faq:last-child { border-bottom: 1px solid var(--line) }
details.faq summary { cursor: pointer; font-weight: 600 }
details.faq p { margin: 8px 0 0; color: var(--muted) }
.ctabox { background: var(--ink); color: var(--bg); border-radius: 12px; padding: 26px; margin: 8px 0 32px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start }
.ctabox .eyebrow { color: inherit; opacity: .7 } .ctabox p { margin: 0 } .ctabox .btn { background: var(--mile); color: #1b1305 }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.pn a { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 14px 16px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .95rem; line-height: 1.35 }
.pn a small { display: block; font: 500 .7rem var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px }
.pn a.next { text-align: right; grid-column: 2 }
.related { margin-top: 56px }
.related h2 { margin-bottom: 16px }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px }
.card { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px; text-decoration: none; color: var(--ink) }
.card b { font: 650 1.02rem/1.35 var(--f-display) } .card span:last-child { color: var(--muted); font-size: .9rem; line-height: 1.5 }
.card:hover b { color: var(--accent) }

/* Hub */
.chap { margin-bottom: 44px }
.chap > p { margin: 6px 0 14px }
.alist { list-style: none; padding: 0 !important; margin: 0; counter-reset: a; gap: 0 !important; border-top: 2px solid var(--ink) }
.alist li { border-bottom: 1px solid var(--line); counter-increment: a }
.alist a { display: grid; grid-template-columns: 44px 1fr; gap: 2px 10px; padding: 14px 0; text-decoration: none; color: var(--ink) }
.alist a::before { content: counter(a, decimal-leading-zero); grid-row: span 2; font: 500 .85rem var(--f-mono); color: var(--accent); padding-top: 3px }
.alist b { font: 650 1.05rem/1.35 var(--f-display) } .alist a:hover b { color: var(--accent) }
.alist span { color: var(--muted); font-size: .92rem; line-height: 1.5 }

@media (min-width: 980px) {
  .agrid { grid-template-columns: 260px minmax(0, 1fr) }
  .toc { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto }
}
@media (max-width: 640px) {
  body { font-size: 16px }
  .mainnav { width: 100%; justify-content: space-between }
  .ddmenu { min-width: 260px }
  .brand small { display: none }
  .pn { grid-template-columns: 1fr } .pn a.next { grid-column: 1; text-align: left }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

/* Landing hub */
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line) }
.hub.landing h1 { font-size: clamp(2.3rem, 5.4vw, 3.6rem) }
.path { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 8px }
.path .step { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 6px }
.path .step h3 { font-size: 1.05rem }
.path .step ol { margin: 6px 0 0; font-size: .92rem; gap: 6px }
div.card { cursor: default }

/* Tools mega menu */
.dd.mega .ddmenu { width: 760px; min-width: 0; left: auto; right: -150px; padding: 8px 0 0 }
.mega2 { position: relative; z-index: 1; border-radius: 12px; overflow: hidden; margin: 1px }
.mega2 { display: grid; grid-template-columns: 230px 1fr; }
.megalead { background: var(--sunk); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.megalead a.feat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px !important; margin: 0 !important; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); text-decoration: none }
.megalead a.feat b { font: 650 .92rem/1.25 var(--f-display); color: var(--ink) } .megalead a.feat span { font-size: .8rem; color: var(--muted) }
.megalead a.feat:hover { border-color: var(--accent) }
.megatools { padding: 14px 16px } .megatools .eyebrow { display: block; padding: 0 6px 8px }
.tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px }
.trow { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 6px; border-radius: 8px }
.trow:hover { background: var(--sunk) }
.ddmenu .trow a { padding: 0 !important; margin: 0 !important; text-decoration: none; display: inline !important; background: none }
.trow a.tname { font-weight: 600; font-size: .9rem; color: var(--ink) } .trow a.tname:hover { color: var(--accent) }
.trow a.talt { font-size: .74rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px !important; padding: 2px 8px !important }
.trow a.talt:hover { color: var(--accent); border-color: var(--accent) }
.tl { position: relative; display: inline-grid; place-items: center; width: var(--s); height: var(--s); flex: none; border-radius: 6px; overflow: hidden; background: var(--surface); }
.tl::before { content: attr(data-l); font: 700 calc(var(--s) * .55) var(--f-display); color: var(--accent) }
.tl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain } .tl.ok::before { content: none }
@media (max-width: 800px) {
  .dd.mega .ddmenu { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; max-height: calc(100vh - 80px); overflow: auto }
  .mega2 { grid-template-columns: 1fr } .megalead { border-radius: 12px 12px 0 0 }
  .megalead { display: grid; grid-template-columns: 1fr 1fr; } .megalead a.feat:last-child { display: none }
}
@media (max-width: 700px) { .dd.mega .ddmenu { top: 96px } }
@media (max-width: 520px) { .tgrid { grid-template-columns: 1fr } .megalead { grid-template-columns: 1fr } }

/* Tool pages */
.abody.wide { max-width: 900px }
.tcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 12px }
.tcard p { margin: 0 }
.thead { display: grid; grid-template-columns: auto auto 1fr auto; gap: 14px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line) }
.thead .eyebrow { margin: 4px 0 0 }
.tmeta b a { white-space: nowrap }
.rhead { display: flex; align-items: center; gap: 14px; margin-bottom: 6px }
@media (max-width: 560px) { .thead { grid-template-columns: auto 1fr auto } .thead .tl { display: none } }
.thead h3 { font-size: 1.35rem } .thead h3 a { color: var(--ink); text-decoration: none } .thead h3 a:hover { color: var(--accent) }
.rank { font: 700 1rem var(--f-mono); background: var(--ink); color: var(--bg); border-radius: 8px; padding: 6px 10px }
.score { font: 780 1.8rem/1 var(--f-display); color: var(--accent) } .score small { font-size: .9rem; color: var(--muted) }
.tmeta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; background: var(--sunk); border-radius: 8px; padding: 12px 14px; font-size: .9rem }
.tmeta div { display: flex; flex-direction: column; gap: 2px } .tmeta b { font-weight: 500 }
.pc { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 4px 0 }
.pc > div { border-radius: 12px; padding: 16px 18px; border: 1px solid; }
.pc > div:first-child { background: #eef7f1; border-color: #cfe6d7 } .pc > div:last-child { background: #fbefed; border-color: #f0d3ce }
.pc h4 { margin: 0 0 10px; font: 700 1rem/1.3 var(--f-display); display: flex; align-items: center; gap: 8px; color: var(--ink) }
.pc > div:first-child h4::before, .pc > div:last-child h4::before { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: .8rem; flex: none }
.pc > div:first-child h4::before { content: "✓"; background: #2f7d4f } .pc > div:last-child h4::before { content: "✕"; background: #b3372b }
.pc ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px }
.pc li { position: relative; padding-left: 22px; line-height: 1.5; font-size: .95rem; margin: 0 }
.pc li::before { position: absolute; left: 0; top: 0; font-weight: 700 }
.pc > div:first-child li::before { content: "+"; color: #2f7d4f } .pc > div:last-child li::before { content: "–"; color: #b3372b }
@media (prefers-color-scheme: dark) { .pc > div:first-child { background: #16281e; border-color: #24452f } .pc > div:last-child { background: #2c1714; border-color: #4a2621 } }
.ok { color: var(--accent); font-weight: 600 } .no { color: #b3372b } .part { color: var(--mile) }
.matrix td, .matrix th { min-width: 90px; font-size: .82rem; text-align: center } .matrix td:first-child, .matrix th:first-child { text-align: left; min-width: 170px; position: sticky; left: 0; background: var(--surface) }
.kv td:first-child { font-weight: 600; width: 34% }
.rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 16px }
.rbox { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 4px }
.rbox .big { font: 780 2.2rem/1 var(--f-display) } .rbox .big small { font-size: 1rem; color: var(--muted) }
.rbox ul { font-size: .9rem; margin: 6px 0 } .stars { color: var(--mile); letter-spacing: 2px }
.bars { display: flex; flex-direction: column; gap: 10px }
.bar-row { display: grid; grid-template-columns: minmax(150px, 230px) 1fr 52px; gap: 12px; align-items: center; font-size: .92rem }
.barbg { height: 10px; background: var(--sunk); border-radius: 5px; overflow: hidden } .barbg i { display: block; height: 100%; background: var(--accent) }
.disclose { font-size: .85rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 24px }
@media (max-width: 480px) {
  .mainnav { gap: 0 }
  .mainnav > a, .ddbtn { padding: 0 8px; font-size: .88rem }
  .mainnav > a[href="/about-the-institute/"] { display: none }
  .mainnav > a.cta { margin-left: auto }
}

/* Templates */
.ticon { color: var(--accent); flex: none; vertical-align: -3px }
.dlbox { display: grid; grid-template-columns: 1fr auto; gap: 18px 28px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; margin: 26px 0 34px }
.dlbox h2 { margin: 4px 0 6px; font-size: 1.4rem } .dlbox p { margin: 0 }
.dls { display: flex; flex-wrap: wrap; gap: 10px }
.dl { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); text-decoration: none; min-width: 168px }
.dl:hover { border-color: var(--accent); box-shadow: 0 6px 18px -10px rgba(0,0,0,.35) }
.dl b { display: block; font: 650 .95rem/1.2 var(--f-display) } .dl small { display: block; font-size: .78rem; color: var(--muted) }
.dlic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: #fff; font: 700 .95rem var(--f-display); flex: none }
.dl.gs .dlic { background: #188038 } .dl.xl .dlic { background: #1D6F42 } .dl.pdf .dlic { background: #B3261E }
.sheetprev { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface) }
.sheetbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--sunk); border-bottom: 1px solid var(--line); font-size: .8rem }
.sheetbar span { width: 9px; height: 9px; border-radius: 50% ; background: var(--line) } .sheetbar b { margin-left: 8px; font-weight: 600 }
.sheetprev .tw { margin: 0; border: 0; border-radius: 0 } .sheetprev th { background: #16202a; color: #fff; font-size: .78rem } .sheetprev td { font-size: .82rem }
.tplgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 10px 0 8px }
.tplcard { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; color: var(--ink) }
.tplcard:hover { border-color: var(--accent); transform: translateY(-1px) }
.tplcard b { font: 650 1rem/1.3 var(--f-display) } .tplcard span { font-size: .85rem; color: var(--muted); line-height: 1.45 }
.tplcard em { font-style: normal; font: 500 .7rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-top: auto }
.tplcat { margin: 34px 0 } .tplcat h2 { display: flex; align-items: center; gap: 10px }
.tplbar { display: flex; flex-direction: column; gap: 12px; margin: 22px 0 }
.tplbar input { font: inherit; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); max-width: 520px }
.chips { display: flex; flex-wrap: wrap; gap: 8px } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-size: .85rem }
.chip:hover { border-color: var(--accent) }
@media (max-width: 760px) { .dlbox { grid-template-columns: 1fr } .dl { flex: 1 1 100% } }
/* Templates menu */
.dd.tpl .ddmenu { width: 440px; left: auto; right: -60px }
.tplmenu { position: relative; z-index: 1; padding: 14px 14px 12px }
.tplmenu .eyebrow { display: block; padding: 0 8px 6px }
.tplnav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px }
.ddmenu .tplnav a { padding: 7px 8px !important; margin: 0 !important; font-size: .9rem; font-weight: 500; border-radius: 6px; display: block !important }
.ddmenu .tplnav a:hover { background: var(--sunk); color: var(--accent) }
.ddmenu a.viewmore { margin: 8px 0 0 !important; padding: 10px 12px !important; border-radius: 10px; background: var(--sunk); border: 1px solid var(--line) }
.ddmenu a.viewmore:hover { border-color: var(--accent) }
.ddmenu a.viewmore b::after { content: " →" }
@media (max-width: 800px) { .dd.tpl .ddmenu { position: fixed; left: 12px; right: 12px; top: 64px; width: auto } }
@media (max-width: 700px) { .dd.tpl .ddmenu { top: 96px } }
/* Template levels */
.dlbox { grid-template-columns: 1fr }
.lvls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px }
.lvl { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg) }
.lvl.lvl-advanced { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset }
.lvlhead { display: flex; align-items: center; justify-content: space-between; gap: 8px } .lvlhead b { font: 700 1.1rem var(--f-display) }
.lvlhead em { font-style: normal; font: 600 .68rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 3px 8px; border-radius: 999px }
.lvl p { margin: 0; font-size: .9rem } .lvl .lvlmeta { font: 500 .74rem var(--f-mono); color: var(--muted) }
.lvlbtns { display: flex; gap: 6px; margin-top: auto; padding-top: 8px }
.lvlbtns .dl { min-width: 0; flex: 1; padding: 7px 8px; gap: 6px; justify-content: center } .lvlbtns .dlic { width: 24px; height: 24px; font-size: .78rem; border-radius: 6px } .lvlbtns .dl b { font-size: .82rem }
@media (max-width: 860px) { .lvls { grid-template-columns: 1fr } }
/* Template callout inside guides */
.tplcallout { display: grid; grid-template-columns: 48px 1fr; gap: 14px; margin: 26px 0; padding: 18px 20px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; background: var(--surface) }
.tcico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--accent); color: #fff; font-size: 1.4rem; font-weight: 700 }
.tplcallout p { margin: 0 0 6px } .tplcallout .eyebrow { margin-bottom: 2px }
.tplcallout .tct { font: 700 1.15rem/1.3 var(--f-display) } .tplcallout .tct a { color: var(--ink); text-decoration: none } .tplcallout .tct a:hover { color: var(--accent) }
.tcbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px }
@media (max-width: 520px) { .tplcallout { grid-template-columns: 1fr } }
.ainame { display: inline-flex; align-items: center; gap: 8px }
.tcard h4 { margin: 4px 0 6px; font: 650 1rem var(--f-display) } .tcard > ul { margin: 0 }
.tcico { font-size: 1rem }
/* Language switcher */
.langs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 14px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); font-size: .85rem }
.langs a { color: var(--muted); text-decoration: none } .langs a:hover { color: var(--accent) } .langs a[aria-current] { color: var(--ink); font-weight: 600 }
/* Header language menu */
.dd.langdd .ddbtn { gap: 5px; font-variant-numeric: tabular-nums }
.dd.langdd .ddmenu { min-width: 220px; left: auto; right: 0 }
.dd.langdd .ddmenu a { flex-direction: row; justify-content: space-between; align-items: center; padding: 8px 16px }
.dd.langdd .ddmenu a[aria-current] b { color: var(--accent) }
@media (max-width: 480px) { .dd.langdd .ddbtn { padding: 0 6px } }
/* Language suggestion bar */
#npi-langbar { position: fixed; z-index: 999; left: 16px; right: 16px; top: 74px; max-width: 620px; margin: 0 auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; padding: 12px 14px; display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; box-shadow: 0 14px 34px -14px rgba(0,0,0,.35); font: 500 .92rem/1.4 system-ui, sans-serif }
#npi-langbar p { margin: 0; flex: 1 1 240px } #npi-langbar a.go { background: var(--accent); color: #fff; padding: 7px 12px; border-radius: 8px; text-decoration: none; font-weight: 600 }
#npi-langbar button { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit }

/* One-line header */
@media (min-width: 641px) { header.top .wrap { flex-wrap: nowrap } .mainnav { flex: none } .mainnav > a, .ddbtn { white-space: nowrap } }
.brand { min-width: 0 } .brand small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
@media (max-width: 1240px) { .brand small { display: none } }
.mainnav .dd.langdd { margin-left: 4px; padding-left: 6px; border-left: 1px solid var(--line) }
.mainnav > a.cta { border-radius: 999px; padding: 0 16px }
@media (max-width: 1000px) and (min-width: 641px) { .mainnav > a[href="/about-the-institute/"] { display: none } }

.foot-li { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .85rem }
.foot-li svg { color: #0a66c2 } .foot-li:hover { border-color: #0a66c2; color: #0a66c2 }

.ctabox .pmai-def { margin: -4px 0 8px; font: 500 .74rem/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; opacity: .75 }

/* Template preview image (above the fold) */
.tplhead.has-shot { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 44px; align-items: center; max-width: none }
.tplhead.has-shot h1 { font-size: clamp(2rem, 3.6vw, 3rem) }
.tpl-shot { margin: 0 }
.tpl-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 24px 50px -28px rgba(15, 30, 40, .55), 0 2px 6px -2px rgba(15, 30, 40, .12) }
@media (max-width: 900px) { .tplhead.has-shot { display: flex; flex-direction: column; align-items: stretch; gap: 0 } .tplhead.has-shot .tplhead-text { display: contents } .tplhead.has-shot .tpl-shot { order: 1; margin: 4px 0 18px } .tplhead.has-shot .tplhead-text > :last-child { order: 2 } }

/* In-article subheadings */
.abody section > h3 { margin: 30px 0 8px; font-size: 1.22rem; line-height: 1.3; scroll-margin-top: 90px }

/* Credited vendor screenshots */
.shot { margin: 18px 0 22px }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 16px 36px -24px rgba(15, 30, 40, .45) }
.shot figcaption { margin-top: 8px; font-size: .86rem; color: var(--muted); line-height: 1.5 }
.shot .credit { white-space: nowrap; font-size: .8rem } .shot .credit a { color: inherit }
header.ahead + .shot { max-width: 980px; margin: 4px 0 28px }
.credit-note { font-size: .8rem; margin-top: 18px }
/* Review header with screenshot on the side */
.reviewhead.has-shot { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center }
.reviewhead .tpl-shot.shot { margin: 0 }
.reviewhead .tpl-shot.shot img { box-shadow: 0 24px 50px -28px rgba(15, 30, 40, .55) }
.reviewhead .lead { font-size: 1.05rem }

/* Read next box */
.readnext { margin: 14px 0 22px; padding: 14px 16px 16px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; background: var(--surface, #fff); box-shadow: 0 10px 26px -22px rgba(15, 30, 40, .5) }
.readnext .rn-eye { display: block; font: 600 .7rem/1 var(--f-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px }
.readnext .rn-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px }
.readnext a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: 9px; background: var(--sunk, #eef1ee); color: var(--ink); text-decoration: none; transition: background .15s, transform .15s }
.readnext a b { font-weight: 600; font-size: .95rem; line-height: 1.35 }
.readnext a i { font-style: normal; color: var(--accent); transition: transform .15s }
.readnext a:hover { background: color-mix(in srgb, var(--accent) 12%, var(--sunk, #eef1ee)) }
.readnext a:hover i { transform: translateX(3px) }

.tplcard.has-thumb { padding: 0 0 14px; overflow: hidden }
.tplcard.has-thumb > b, .tplcard.has-thumb > span:not(.tplthumb), .tplcard.has-thumb > em { padding: 0 16px }
.tplthumb { display: block; aspect-ratio: 16/10; overflow: hidden; background: #f4f5f3; border-bottom: 1px solid var(--line); margin-bottom: 6px }
.tplthumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; transition: transform .25s }
.tplcard.has-thumb:hover .tplthumb img { transform: scale(1.03) }