/* NumeroPandit: what the platform's pages need on top of GridPandit's site.css (copied verbatim beside this file).
   The tool body (form panel, result panel, A/B readings, In brief / FAQ / Related blocks) is FengMaster's
   (backend/routes/tools.py _SHELL and _CONTENT_BLOCK_CSS), with FengMaster's token names mapped to GridPandit's:
   --card -> --panel, --sh -> --shadow, --r -> --radius, --soft -> --muted. NP-01 item 2. */
:root {
  --line2: #F3F3F7; --royal2: #4256C6; --gold2: #C9A227; --soft: #3E4256;
  --okbg: #E7F5EC; --bad: #D2564A; --badbg: #FCEBEB; --warnbg: #FBF2DC; --warn: #C99A2E;
  --deva: "Nirmala UI", "Kohinoor Devanagari", "Noto Sans Devanagari", "Mangal", var(--font);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --line2: rgba(255,255,255,.06); --royal2: #3C64B2; --gold2: #DAC188; --soft: #C4CBDB;
    --okbg: #12271C; --bad: #D0655B; --badbg: #2A1512; --warnbg: #241C0C; --warn: #D8A64B;
  }
}
[data-theme="dark"] {
  --line2: rgba(255,255,255,.06); --royal2: #3C64B2; --gold2: #DAC188; --soft: #C4CBDB;
  --okbg: #12271C; --bad: #D0655B; --badbg: #2A1512; --warnbg: #241C0C; --warn: #D8A64B;
}
[data-theme="light"] {
  --line2: #F3F3F7; --royal2: #4256C6; --gold2: #C9A227; --soft: #3E4256;
  --okbg: #E7F5EC; --bad: #D2564A; --badbg: #FCEBEB; --warnbg: #FBF2DC; --warn: #C99A2E;
}
.lang-hi body, body.lang-hi { font-family: var(--deva); }

/* the mark and the text glyphs (FengMaster puts a character in each tool's tile; NumeroPandit a numeral or a
   Devanagari letter, in GridPandit's tinted square) */
.brand .mark { color: var(--royal); }
.brand .mark .dot { fill: var(--gold); }
.glyph.tx { font-family: var(--serif); font-weight: 600; font-size: 15px; line-height: 1; }
.tool-card .glyph.tx, .cat-card .glyph.tx { font-size: 19px; }
.glyph.tx.deva { font-family: var(--deva); font-weight: 600; }

/* the language pill in the top bar (GridPandit's Academy "Read in" pill, moved to the bar as the brief asks) */
.lang-pill { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.lang-pill a { min-width: 34px; min-height: 32px; display: grid; place-items: center; padding: 0 8px; border-radius: 8px; color: rgba(255,255,255,.78); text-decoration: none; font-size: .82rem; font-weight: 700; }
.lang-pill a.on { background: rgba(255,255,255,.18); color: #fff; }
.lang-pill a:hover { color: #fff; }

/* the account menu in the top bar (FengMaster's .acctmenu; the platform's shell.js opens it) */
.acctdd { position: relative; }
.avatar { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: var(--gold); color: #14162B; font-weight: 800; cursor: pointer; }
.acctmenu { position: absolute; right: 0; top: 48px; width: 236px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 44px rgba(24,27,44,.18); padding: 8px; z-index: 200; }
.acctmenu a { display: block; padding: 9px 12px; border-radius: 9px; font-size: .9rem; color: var(--muted); font-weight: 500; text-decoration: none; }
.acctmenu a:hover { background: var(--line2); color: var(--ink); }
.am-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.am-name { font-weight: 700; }
.am-tier { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; color: var(--gold-ink); }
.am-sep { height: 1px; background: var(--line); margin: 6px 0; }
.acctmenu a.am-out { color: var(--bad); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the notice bar under the top bar (FengMaster's .noticebar) */
.noticebar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line); font-size: .88rem; }
.noticebar .ntag { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: var(--royal-solid); color: #fff; }

/* hero bands on inner pages: GridPandit's .hero with FengMaster's eyebrow and sub */
.hero .hero-sub { margin: 0; color: rgba(255,255,255,.82); font-size: 1.05rem; max-width: 62ch; }
.hero .hero-inner.short { padding: 34px 0 40px; }
.hero-geo { color: #E7D48A; }

/* platform page sections */
.sec { padding: 30px 0; }
.sec.tight { padding: 14px 0; }
.sec-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.h2 { font-family: var(--serif); font-weight: 560; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 8px; }
.h3 { font-size: 1.05rem; font-weight: 650; margin: 0; }
.grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .grid.g2, .grid.g3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid.g3 { grid-template-columns: repeat(3, 1fr); } }
.card { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: inherit; text-decoration: none; }
a.card:hover { border-color: var(--royal); }
.card p { margin: 0; color: var(--muted); }
.card .meta { font-size: .85rem; color: var(--muted); }
.sigil { font-family: var(--serif); color: var(--gold-ink); font-size: 1.2rem; }
.btn-saffron { background: linear-gradient(180deg, #F1AC52, var(--saffron)); color: #231303; }
.err { color: var(--bad); }
.ok { color: var(--ok); }
.subnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.subnav a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); text-decoration: none; color: var(--ink); font-size: .9rem; }
.subnav a.on { background: var(--royal-solid); border-color: var(--royal-solid); color: #fff; }
.flash { padding: 10px 14px; border-radius: 12px; background: var(--okbg); border: 1px solid var(--line); margin: 0 0 12px; }
.prose p, .prose li { color: var(--ink); }
.prose blockquote { margin: 1rem 0; padding: 12px 16px; border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--panel)); border-radius: 0 12px 12px 0; }
.prose img { border-radius: 14px; }
.prose table { margin: 1rem 0; }
.tab { font-variant-numeric: tabular-nums; }
.crumbs { font-size: .9rem; margin-bottom: 8px; }
.crumbs .sep { margin: 0 6px; color: var(--muted); }
.wa-fab { position: fixed; right: 16px; bottom: 18px; width: 52px; height: 52px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; z-index: 30; box-shadow: var(--shadow); }
.hi { font-family: var(--deva); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search]:not(#toolSearch), select, textarea {
  min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); padding: 10px 12px; max-width: 100%;
}

/* ---------- the tool page: GridPandit's tool hero; FengMaster's form panel, result panel and readings ---------- */
.np-studio { position: relative; margin-top: -40px; display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 1100px) { .np-studio { grid-template-columns: 400px minmax(0, 1fr); } }
@media (max-width: 699px) { .np-studio { margin-top: -28px; } }
.panel { margin-bottom: 0; overflow: hidden; }
.ph { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line2); }
.ph .st { width: 26px; height: 26px; border-radius: 9px; background: var(--line2); color: var(--gold-ink); border: 1px solid var(--line); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.ph h2, .ph h3 { font-size: 15px; font-weight: 650; margin: 0; font-family: var(--font); }
.ph .hint { margin-left: auto; font-size: 12px; color: var(--muted); text-align: right; }
.pb { padding: 20px 22px; }
.engine-form .field label { font-size: .85rem; color: var(--soft); }
.engine-form .field small { color: var(--muted); font-size: .8rem; }
.engine-form .field input[type=checkbox] { width: 22px; height: 22px; min-height: 0; }
button.go {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 9px; color: #231303; font-weight: 700;
  font-size: 15px; padding: 12px 22px; border-radius: 12px; border: 0; cursor: pointer; min-height: 46px;
  background: linear-gradient(180deg, #F1AC52, var(--saffron)); box-shadow: 0 8px 18px rgba(206,106,27,.26); transition: transform .15s, box-shadow .15s;
}
button.go::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 32%, rgba(255,255,255,.32), transparent 68%); transform: translateX(-130%); transition: transform .6s ease; }
button.go:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(206,106,27,.32); }
button.go:hover::after { transform: translateX(130%); }
@media (prefers-reduced-motion: reduce) { button.go::after { display: none; } button.go:hover { transform: none; } }
.free-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ok); background: var(--okbg); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); padding: 4px 10px; border-radius: 999px; }
.free-pill.prem { color: #231303; background: linear-gradient(120deg, #E4B24A, #CFA53A); border-color: transparent; }

.result-panel { min-height: 200px; }
.result-panel .pb { padding-top: 16px; }
.engine-out:empty::before { content: attr(data-empty); color: var(--muted); }
.engine-out .sum { font-family: var(--serif); font-size: clamp(1.2rem, 2.4vw, 1.5rem); line-height: 1.35; margin: 0 0 14px; color: var(--ink); }
.engine-out h2 { font-family: var(--font); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin: 18px 0 8px; }
.engine-out p { margin: 0 0 10px; color: var(--soft); }
.engine-out .muted { color: var(--muted); font-size: .9rem; }
.engine-out .err { color: var(--bad); }
.engine-out blockquote { margin: 0 0 10px; padding: 10px 14px; border-left: 3px solid var(--gold); background: var(--line2); border-radius: 0 12px 12px 0; }
.engine-out pre { white-space: pre-wrap; font-size: .8rem; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px; overflow: auto; }
.rtable { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 0 0 10px; }
.rtable td, .rtable th { padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: .92rem; }
.rtable tr:last-child td { border-bottom: 0; }
.rtable td.v { font-weight: 650; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.letters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.letters span { display: inline-grid; justify-items: center; min-width: 34px; padding: 5px 6px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
.letters b { font-family: var(--serif); font-size: 1.05rem; color: var(--royal); }
.result-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; margin: 10px 8px 0 0; }
.result-actions .btn { min-height: 40px; padding: 0 14px; font-size: .9rem; }
.engine-note { font-size: .85rem; margin: 10px 0 0; }

/* the headline number (GridPandit's score ring, holding the result's main number) */
.np-head { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); margin-bottom: 14px; }
.np-head .score-ring { background: conic-gradient(var(--gold) var(--pct, 100%), var(--line) 0); }

/* FengMaster's A/B readings (window.fsABC in the old site; built by np-result.js here) */
.abbox { display: grid; gap: 12px; margin: 14px 0 6px; }
.abseg { border: 1.5px solid var(--line); border-radius: 14px; background: var(--panel); padding: 14px 16px; box-shadow: 0 2px 7px rgba(24,27,44,.06); }
.abseg .lab { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 7px; }
.abseg .lab b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--gold2); color: var(--royal-solid); font-size: 11px; }
.abseg .ttl { font-weight: 700; color: var(--ink); font-size: .95rem; margin-bottom: 4px; }
.abseg p { font-size: .92rem; line-height: 1.62; color: var(--soft); margin: 0; }
.abseg.b { border-left: 4px solid var(--gold2); background: linear-gradient(150deg, var(--line2), transparent); }

/* FengMaster's content blocks: In brief, Frequently asked, Related, the note */
.cblk { margin: 0 0 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }
.cblk .cbk-h { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 8px; }
.cblk .cbk-b { font-size: .95rem; line-height: 1.65; color: var(--soft); margin: 0; }
.geoblk { background: linear-gradient(150deg, var(--line2), var(--panel)); }
.cblk .cbk-how { margin-top: 6px; } .cbk-how b { color: var(--ink); }
.faqi { border-top: 1px solid var(--line); padding: 11px 0; }
.faqi:first-of-type { border-top: 0; padding-top: 2px; }
.faqi summary { font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; min-height: 32px; display: flex; align-items: center; }
.faqi summary::-webkit-details-marker { display: none; }
.faqi summary::before { content: '+'; color: var(--gold-ink); font-weight: 800; margin-right: 9px; }
.faqi[open] summary::before { content: '\2212'; }
.faqi > div { font-size: .95rem; color: var(--soft); line-height: 1.6; margin: 7px 0 0 20px; }
.linkblk a { display: inline-block; margin: 4px 12px 4px 0; color: var(--royal); font-weight: 600; }
.disclaimer { font-size: .82rem; color: var(--muted); font-style: italic; box-shadow: none; background: transparent; border-style: dashed; }

/* tool index and home: the group sections */
.tool-sec .row-head p.sub { margin: 0; }
.tool-sec .intro { color: var(--muted); margin: 0 0 14px; max-width: 70ch; }
.cat-card p { font-variant-numeric: tabular-nums; }

/* number of the day (FengMaster's .dcard "of the day" card on the home page) */
.today-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px) { .today-grid { grid-template-columns: 2fr 1fr; } }
.dcard { padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.dcard .dl { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 8px; }
.dcard .rt { font-family: var(--serif); font-size: 1.25rem; line-height: 1.35; }
.dcard .big { font-family: var(--serif); font-size: 3rem; line-height: 1; color: var(--royal); }
.rfacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rf { padding: 6px 10px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.rfl { display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rfv { font-weight: 650; }
.master { display: flex; gap: 12px; align-items: flex-start; }
.master .mav { width: 48px; height: 48px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--royal-solid); color: #fff; font-family: var(--serif); font-size: 1.2rem; }

/* number pages: the 1-9 grid */
.num-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 520px; }
.num-cell { aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.num-cell b { font-family: var(--serif); font-size: 2rem; color: var(--royal); line-height: 1; }
.num-cell small { color: var(--muted); font-size: .78rem; }
.num-cell:hover { border-color: var(--royal); }

/* pricing (GridPandit's plan cards; FengMaster's prices) */
.plan-card .btn { margin-top: auto; }
.plan-card .tag { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #231303; background: linear-gradient(120deg, #E4B24A, #CFA53A); padding: 3px 10px; border-radius: 99px; }
.plan-card .blurb { color: var(--muted); margin: 0; }
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }

/* the account and sign-in pages that keep the platform's own markup */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.plan { display: flex; flex-direction: column; gap: 6px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.plan.mid { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--shadow); }
.plan .nm { font-family: var(--serif); font-size: 1.3rem; }
.plan .pr { font-size: 1.9rem; font-weight: 700; }
.plan .pr small { font-size: .9rem; font-weight: 500; color: var(--muted); }

/* the bilingual line under an English one (GridPandit's .cat-hi) */
.hi-line { color: var(--muted); font-family: var(--deva); display: block; }

/* the journal article card (FengMaster routes/blog.py .article / .abody) */
.np-article { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); padding: 34px 40px; max-width: 860px; }
@media (max-width: 699px) { .np-article { padding: 22px 18px; border-radius: 18px; } }
.np-meta { margin: 0 0 10px; }
.faq-list details > div { padding: 0 0 10px; color: var(--muted); }
.report-grid .plan-card h2 { font-size: 1.25rem; line-height: 1.25; }

/* ---------- NP-03 pictures (docs/design/NUMEROPANDIT-IMAGES.md) ----------
   Hero: the picture fades in from the right under the band's gradient, as on GridPandit (.hero-img: a mask from
   transparent at the left to opaque at 62%) and FengMaster (.heroimg: a background picture, right-centred). A CSS
   background, so only the picture of the theme in use is downloaded (np-head.js sets data-theme before first paint).
   Footer: the same picture's right-bottom detail at the right bottom of the footer, low contrast, under a radial
   mask (GridPandit's .page-mark, FengMaster's .footart). */
.hero, .tool-hero { position: relative; overflow: hidden; isolation: isolate; }
.np-heroimg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .92;
  background-repeat: no-repeat; background-size: cover; background-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 30%, #000 62%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 30%, #000 62%);
}
.np-heroimg ~ .hero-geo { display: none; }
.hero > .wrap, .tool-hero > .hero-inner { position: relative; z-index: 1; }
.np-heroimg {
  background-image: url("../img/hero/hero-dark-1680.webp");
  background-image: image-set(url("../img/hero/hero-dark-1680.avif") type("image/avif"), url("../img/hero/hero-dark-1680.webp") type("image/webp"));
}
[data-theme="light"] .np-heroimg {
  background-image: url("../img/hero/hero-light-1680.webp");
  background-image: image-set(url("../img/hero/hero-light-1680.avif") type("image/avif"), url("../img/hero/hero-light-1680.webp") type("image/webp"));
  opacity: .78;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 34%, rgba(0,0,0,.55) 58%, #000 86%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 34%, rgba(0,0,0,.55) 58%, #000 86%);
}
@media (min-width: 1700px) {
  .np-heroimg { background-image: image-set(url("../img/hero/hero-dark-2560.avif") type("image/avif"), url("../img/hero/hero-dark-2560.webp") type("image/webp")); }
  [data-theme="light"] .np-heroimg { background-image: image-set(url("../img/hero/hero-light-2560.avif") type("image/avif"), url("../img/hero/hero-light-2560.webp") type("image/webp")); }
}
@media (max-width: 899px) {
  .np-heroimg {
    background-image: image-set(url("../img/hero/hero-dark-sq.avif") type("image/avif"), url("../img/hero/hero-dark-sq.webp") type("image/webp"));
    background-size: auto 100%; opacity: .26; -webkit-mask-image: none; mask-image: none;
  }
  [data-theme="light"] .np-heroimg {
    background-image: image-set(url("../img/hero/hero-light-sq.avif") type("image/avif"), url("../img/hero/hero-light-sq.webp") type("image/webp"));
    opacity: .16; -webkit-mask-image: none; mask-image: none;
  }
}
@media (max-width: 599px) {
  .np-heroimg { background-image: image-set(url("../img/hero/hero-dark-960.avif") type("image/avif"), url("../img/hero/hero-dark-960.webp") type("image/webp")); background-size: cover; }
  [data-theme="light"] .np-heroimg { background-image: image-set(url("../img/hero/hero-light-960.avif") type("image/avif"), url("../img/hero/hero-light-960.webp") type("image/webp")); }
}
/* tool pages: the picture of the tool's group, whole, at the right of the band */
.np-heroimg.sec-img, [data-theme="light"] .np-heroimg.sec-img {
  background-size: auto 125%; opacity: .8;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 44%, rgba(0,0,0,.55) 62%, #000 82%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 44%, rgba(0,0,0,.55) 62%, #000 82%);
}
/* inner pages centre their text, so the pale light-theme picture comes in later than on the home page */
[data-theme="light"] .hero:not(.home-hero) .np-heroimg {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 52%, rgba(0,0,0,.6) 76%, #000 96%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 52%, rgba(0,0,0,.6) 76%, #000 96%);
}
@media (max-width: 899px) { .np-heroimg.sec-img, [data-theme="light"] .np-heroimg.sec-img { opacity: .22; background-size: cover; background-position: center; -webkit-mask-image: none; mask-image: none; } }

/* the footer: its main container carries the hero's right-bottom detail */
.site-footer { position: relative; overflow: hidden; isolation: isolate; }
.site-footer > .wrap { position: relative; z-index: 1; }
.np-footart {
  position: absolute; right: 0; bottom: 0; z-index: 0; width: min(640px, 66%); aspect-ratio: 3 / 2; pointer-events: none;
  background-repeat: no-repeat; background-size: cover; background-position: right bottom; opacity: .32;
  background-image: url("../img/hero/foot-dark.webp");
  background-image: image-set(url("../img/hero/foot-dark.avif") type("image/avif"), url("../img/hero/foot-dark.webp") type("image/webp"));
  -webkit-mask-image: radial-gradient(120% 120% at 100% 100%, #000 30%, transparent 72%);
          mask-image: radial-gradient(120% 120% at 100% 100%, #000 30%, transparent 72%);
}
[data-theme="dark"] .np-footart { opacity: .5; }
[data-theme="light"] .np-footart {
  background-image: url("../img/hero/foot-light.webp");
  background-image: image-set(url("../img/hero/foot-light.avif") type("image/avif"), url("../img/hero/foot-light.webp") type("image/webp"));
  opacity: .8;
}
@media (max-width: 899px) { .np-footart { width: 100%; opacity: .2; } [data-theme="light"] .np-footart { opacity: .45; } }

/* section pictures: GridPandit's flag cards on the home page ("one from each section"), and a picture band at the
   head of each group on the tool index */
.flag-card picture, .flag-card picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.sec-band {
  position: relative; overflow: hidden; isolation: isolate; display: grid; align-content: end; min-height: 168px;
  margin: 0 0 16px; padding: 22px 24px; border-radius: var(--radius); color: #fff; box-shadow: var(--shadow);
  background: linear-gradient(115deg, var(--hero-a), var(--hero-b));
}
.sec-band picture, .sec-band picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: -1; }
.sec-band picture img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 34%, #000 70%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 34%, #000 70%);
}
.sec-band h2 { margin: 0; color: #fff; }
.sec-band h2 a { color: #fff; text-decoration: none; }
.sec-band .intro { margin: 6px 0 0; max-width: 56ch; color: rgba(255,255,255,.86); }
.sec-band .count { position: absolute; top: 16px; right: 18px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; color: #F2D27A; }
@media (max-width: 699px) { .sec-band { min-height: 140px; padding: 18px; } .sec-band picture img { -webkit-mask-image: none; mask-image: none; opacity: .45; } }

/* article header pictures (four, chosen by the article's address) */
.art-head { margin: 0 0 18px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; background: var(--hero-a); box-shadow: var(--shadow); }
.art-head img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .art-head { aspect-ratio: 21 / 8; } }
/* each group's picture on its tools' hero bands */
.np-heroimg.sec-img.g-name { background-image: url("../img/section/your-name-800.webp"); background-image: image-set(url("../img/section/your-name-800.avif") type("image/avif"), url("../img/section/your-name-800.webp") type("image/webp")); }
.np-heroimg.sec-img.g-numbers { background-image: url("../img/section/your-numbers-800.webp"); background-image: image-set(url("../img/section/your-numbers-800.avif") type("image/avif"), url("../img/section/your-numbers-800.webp") type("image/webp")); }
.np-heroimg.sec-img.g-business { background-image: url("../img/section/business-800.webp"); background-image: image-set(url("../img/section/business-800.avif") type("image/avif"), url("../img/section/business-800.webp") type("image/webp")); }
.np-heroimg.sec-img.g-compat { background-image: url("../img/section/compatibility-800.webp"); background-image: image-set(url("../img/section/compatibility-800.avif") type("image/avif"), url("../img/section/compatibility-800.webp") type("image/webp")); }
.np-heroimg.sec-img.g-timing { background-image: url("../img/section/timing-800.webp"); background-image: image-set(url("../img/section/timing-800.avif") type("image/avif"), url("../img/section/timing-800.webp") type("image/webp")); }
.np-heroimg.sec-img.g-learn { background-image: url("../img/section/learn-800.webp"); background-image: image-set(url("../img/section/learn-800.avif") type("image/avif"), url("../img/section/learn-800.webp") type("image/webp")); }

.flag-grid .flag-card { min-height: 268px; }
.flag-body > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .92rem; color: rgba(255,255,255,.86); }
.home-hero .lead, .home-hero .daily-list { max-width: 540px; }
.hero .hero-inner.short > * { max-width: 560px; }

/* NP-03 home: the free name snapshot in the hero, the byline, the reports strip */
.snap { margin-top: 22px; max-width: 540px; }
.snap-l { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #E7D48A; margin-bottom: 8px; }
.snap-row { display: flex; gap: 8px; flex-wrap: wrap; }
.snap-row input { flex: 1 1 220px; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.96); color: #14162B; font: inherit; }
.snap-row input:focus { outline: 3px solid #E7D48A; outline-offset: 1px; }
.snap-out { margin-top: 12px; padding: 14px; border-radius: 14px; background: rgba(10,12,40,.55); border: 1px solid rgba(255,255,255,.16); }
.snap-out .err { color: #FFD1CB; margin: 0; }
.snap-res { display: flex; gap: 14px; align-items: center; }
.snap-n { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: #F2D27A; min-width: 1.4em; text-align: center; }
.snap-h { margin: 0; font-weight: 700; color: #fff; }
.snap-s { margin: 2px 0 6px; color: rgba(255,255,255,.84); font-size: .94rem; }
.snap-res a { color: #F2D27A; font-weight: 600; }
.hero .byline { margin: 16px 0 0; font-size: .86rem; color: rgba(255,255,255,.72); letter-spacing: .02em; }
.rep-strip { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.rep-card { display: grid; gap: 6px; padding: 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.rep-card:hover { border-color: var(--gold); }
.rep-name { font-family: var(--serif); font-weight: 600; font-size: 1.08rem; }
.rep-blurb { color: var(--muted); font-size: .9rem; }
.rep-price { font-weight: 800; color: var(--gold-ink); font-size: 1.1rem; }
/* the 404 page: the generated motif in place of the hero picture */
.np-heroimg.nf-motif, [data-theme="light"] .np-heroimg.nf-motif {
  background-image: url("../img/misc/motif.webp");
  background-image: image-set(url("../img/misc/motif.avif") type("image/avif"), url("../img/misc/motif.webp") type("image/webp"));
  background-size: cover; opacity: .9;
}

/* NP-03 Academy: modules on the course page, the lesson's audio slot, worked examples, case studies, slide strip */
.lesson-list .lesson-module { list-style: none; margin: 14px 0 4px; padding: 6px 10px; border-radius: 10px; background: var(--line2); font-weight: 700; font-size: .9rem; color: var(--ink); }
.lesson-list .lesson-module:first-child { margin-top: 0; }
.lesson-module .mod-n { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.lesson-audio.soon { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; padding: 12px 16px; border-radius: 14px; border: 1px dashed var(--line); background: var(--panel); }
.lesson-audio.soon figcaption { display: grid; gap: 2px; }
.aud-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--royal-solid); color: #fff; opacity: .55; font-size: 15px; cursor: not-allowed; }
.cblk-worked { border-left: 4px solid var(--gold); }
.cblk-worked .cbk-b { font-variant-numeric: tabular-nums; }
.cblk-worked table, .lesson .prose table { border-collapse: collapse; margin: 10px 0; font-size: .92rem; }
.cblk-worked td, .cblk-worked th, .lesson .prose td, .lesson .prose th { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.cblk-case { border-left: 4px solid var(--saffron); }
.lesson-slides { margin-top: 28px; }
.slides { list-style: none; margin: 0; padding: 0 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 260px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; }
.slide { scroll-snap-align: start; position: relative; min-height: 132px; padding: 18px 16px 16px; border-radius: 16px; color: #fff; background: radial-gradient(120% 120% at 20% 0%, #3A46B8, #2E3EA8 45%, #1A226E); box-shadow: var(--shadow); }
.slide p { margin: 8px 0 0; font-size: .98rem; line-height: 1.45; }
.slide .sn { font-family: var(--serif); font-size: 1.5rem; color: #F2D27A; }
.hi-review { flex-basis: 100%; margin: 6px 0 0; font-size: .82rem; color: var(--muted); }
.lesson-list { list-style: none; margin: 0; padding: 10px 14px 14px; }
.lesson-list li > a, .lesson-list .lock-row { display: flex; gap: 10px; align-items: flex-start; padding: 7px 4px; border-radius: 10px; color: var(--ink); text-decoration: none; line-height: 1.4; }
.lesson-list li > a:hover { background: var(--line2); }
.lesson-list .ln { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--line2); color: var(--royal); font-size: .78rem; font-weight: 800; }
.lesson-list .lock { margin-left: auto; }
.lesson label.check { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; margin: 4px 0; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-weight: 500; }
.lesson label.check:hover { border-color: var(--royal); }
.lesson label.check input { margin-top: 3px; flex: 0 0 auto; }
.lesson fieldset.field { margin: 0 0 18px; }