/* Note helper promo (App). Site tokens from /assets/styles.css, light + dark. */
.nhp{display:grid;gap:18px;grid-template-columns:1fr;align-items:center;margin:0 0 28px;padding:20px;
  border-radius:18px;background:var(--panel);border:1px solid var(--line);border-left:6px solid var(--accent);
  box-shadow:var(--shadow)}
.nhp-kick{display:flex;gap:8px;align-items:center;font:700 13px/1 var(--f-t);letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-2);margin:0 0 10px}
.nhp-pill{background:#b9412f;color:#fff;border-radius:999px;padding:4px 9px;letter-spacing:.08em}
.nhp h2{font:400 clamp(26px,6vw,40px)/1.05 var(--f-d);text-transform:uppercase;margin:0 0 10px;color:var(--fg)}
.nhp-sub{font:400 16.5px/1.5 var(--f-t);color:var(--fg-2);margin:0 0 16px}
.nhp-cta{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 22px;border-radius:14px;
  background:#b9412f;color:#fff;font:700 17px/1 var(--f-t);text-decoration:none}
.nhp-cta:hover{filter:brightness(1.06)}
.nhp-fine{font:400 13px/1.5 var(--f-t);color:var(--fg-3);margin:12px 0 0}
.nhp-demo{border-radius:14px;background:var(--panel-2);border:1px solid var(--line);padding:14px}
.nhp-say{font:400 14px/1.5 var(--f-t);color:var(--fg-2);margin:0 0 10px}
.nhp-say b{color:var(--fg)}
.nhp-note{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px}
.nhp-ln{font:400 14.5px/1.5 var(--f-t);margin:0 0 6px;padding:4px 8px;border-radius:6px;color:var(--fg)}
.nhp-y{background:rgba(244,196,48,.16);border-left:3px solid #c99a00}
.nhp-y i{font-style:normal;border:1px dashed #b08600;border-radius:5px;padding:0 4px;color:#8a6400}
.nhp-legend{font:400 12.5px/1.4 var(--f-t);color:var(--fg-3);margin:8px 0 0}
:root[data-theme="dark"] .nhp-y i{color:#f4c430;border-color:#f4c430}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nhp-y i{color:#f4c430;border-color:#f4c430}}
@media (min-width:860px){.nhp{grid-template-columns:1.1fr 1fr;padding:28px 32px;gap:32px}}

/* top nav item: <a href="/note-helper/" class="nav-nh">Note helper <span class="nav-free">FREE</span></a> */
.nav-nh{position:relative;font-weight:700}
.nav-free{display:inline-block;margin-left:5px;padding:2px 6px;border-radius:999px;background:#b9412f;color:#fff;
  font:800 10px/1.2 var(--f-t);letter-spacing:.06em;vertical-align:2px}