:root {
  --paper:#f4f5f9;
  --ink:#060817;
  --muted:#4f5677;
  --line:#d9dcea;
  --amber:#f59e0b}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.65 'IBM Plex Sans',sans-serif}
a {
  color:inherit;
  text-underline-offset:4px}
button {
  font:inherit;
  cursor:pointer}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:2px solid #a96200;
  outline-offset:5px}
.wrap {
  max-width:1200px;
  margin:auto;
  padding:0 48px}
header {
  border-bottom:1px solid var(--line);
  background:#f4f5f9f5;
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(12px)}
header .wrap {
  height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px}
.brand {
  font-size:13px;
  font-weight:500;
  letter-spacing:2px;
  text-decoration:none;
  white-space:nowrap}
.brand:before {
  content:'';
  display:inline-block;
  background:var(--amber);
  width:7px;
  height:7px;
  margin-right:11px}
nav {
  display:flex;
  align-items:center;
  gap:30px}
nav a {
  font-size:13px;
  text-decoration:none}
.btn {
  display:inline-block;
  background:var(--ink);
  color:white;
  padding:12px 23px;
  text-decoration:none;
  border:1px solid var(--ink);
  border-radius:3px;
  font-size:13px}
.secondary {
  background:transparent;
  color:var(--ink);
  border-color:var(--line)}
.eyebrow {
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--muted)}
h1,h2,h3 {
  font-family:'IBM Plex Serif',Georgia,serif;
  font-weight:300;
  line-height:1.12}
h1 {
  font-size:clamp(42px,5.5vw,72px);
  letter-spacing:-2.5px;
  margin:23px 0}
h2 {
  font-size:42px;
  letter-spacing:-1px;
  margin:16px 0 24px}
h3 {
  font-size:26px}
.muted {
  color:var(--muted)}
.hero {
  padding:90px 0 70px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:65px;
  align-items:end}
.hero p {
  max-width:430px;
  color:var(--muted);
  font-size:17px}
.actions {
  display:flex;
  gap:13px;
  margin-top:30px}
.hero-aside {
  border-top:1px solid var(--line);
  padding-top:24px;
  margin-bottom:10px}
.hero-aside p {
  font-size:15px}
.demo {
  background:var(--ink);
  color:var(--paper);
  padding:35px;
  border-radius:4px}
.demo-head {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  letter-spacing:1px;
  color:#b6bed4;
  margin-bottom:25px}
.demo-body {
  display:grid;
  grid-template-columns:200px 1fr;
  gap:30px}
.demo-tabs {
  display:flex;
  flex-direction:column;
  gap:0}
.demo-tabs button {
  color:#abb2ca;
  background:none;
  border:0;
  border-bottom:1px solid #ffffff25;
  text-align:left;
  padding:20px 5px;
  font-size:13px}
.demo-tabs button[aria-pressed=true] {
  color:white;
  border-left:2px solid var(--amber);
  padding-left:15px}
.demo-sheet {
  background:#fafafd;
  color:var(--ink);
  padding:32px 38px;
  position:relative;
  min-height:320px}
.ribbon {
  position:absolute;
  top:0;
  right:28px;
  width:10px;
  height:44px;
  filter:drop-shadow(2px 2px 1px #70430055)}
.ribbon:before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#bf7608,#ffcc64 22%,#f5ab24 48%,#e9950a 82%,#b76c06);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%)}
.demo-sheet h3 {
  font-size:30px;
  margin:12px 0 22px}
.table-row {
  display:grid;
  grid-template-columns:1.4fr 1fr .7fr;
  border-top:1px solid var(--line);
  padding:14px 0;
  gap:12px;
  font-size:12px}
.table-row small {
  display:block;
  color:var(--muted);
  margin-top:3px}
.tag {
  font-size:10px;
  color:#6e4b0d;
  background:#fbefda;
  padding:3px 8px;
  align-self:start;
  justify-self:end}
.demo-note {
  font-size:11px;
  color:#a7afc6;
  margin:20px 0 0}
.section {
  padding:90px 0;
  border-bottom:1px solid var(--line)}
.section-intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  margin-bottom:35px}
.section-intro p {
  color:var(--muted);
  padding-top:15px}
.feature {
  display:grid;
  grid-template-columns:60px 1fr 1fr;
  gap:30px;
  border-top:1px solid var(--line);
  padding:30px 0}
.feature .num {
  font-size:12px;
  color:var(--muted);
  padding-top:8px}
.feature h3 {
  margin:0}
.feature p {
  margin:0;
  color:var(--muted);
  font-size:14px}
.cta {
  padding:65px;
  background:var(--ink);
  color:var(--paper);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px}
.cta h2 {
  margin:0;
  text-transform:none;
  letter-spacing:-1px}
.cta .btn {
  background:var(--paper);
  color:var(--ink);
  white-space:nowrap}
.faq details {
  border-top:1px solid var(--line);
  padding:20px 0}
.faq summary {
  cursor:pointer;
  font-size:15px}
.faq details p {
  color:var(--muted);
  max-width:700px;
  font-size:14px}
footer {
  padding:35px 0 55px;
  font-size:12px;
  color:var(--muted)}
footer .wrap {
  display:flex;
  justify-content:space-between;
  gap:20px}
footer a {
  margin-left:20px}
.prototype {
  position:fixed;
  bottom:10px;
  right:12px;
  background:#e8eaf1;
  color:#4f5677;
  padding:5px 9px;
  font-size:9px;
  z-index:20;
  border-radius:3px}
.legal-head {
  padding:65px 0 40px;
  border-bottom:1px solid var(--line)}
.legal-head h1 {
  font-size:60px}
.legal-head p {
  color:var(--muted);
  max-width:680px}
.legal-layout {
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:65px;
  padding-top:48px;
  padding-bottom:80px}
.index {
  position:sticky;
  top:110px;
  align-self:start;
  max-height:calc(100vh - 135px);
  overflow:auto}
.index summary {
  font-size:10px;
  letter-spacing:2px;
  cursor:pointer}
.index ol {
  padding:15px 0;
  list-style:none;
  margin:0}
.index a {
  display:block;
  font-size:12px;
  text-decoration:none;
  color:var(--muted);
  padding:6px 12px;
  border-left:1px solid var(--line)}
.index a.active {
  border-left:2px solid var(--amber);
  color:var(--ink);
  background:#ebeef5}
.legal-copy {
  max-width:740px;
  font-size:15px;
  line-height:1.85}
.legal-copy h2 {
  font-size:30px;
  line-height:1.3;
  margin:50px 0 20px;
  padding-top:20px;
  border-top:1px solid var(--line);
  scroll-margin-top:0}
.legal-copy p {
  margin:0 0 20px}
.legal-copy li {
  margin-bottom:10px}
.legal-copy ul {
  padding-left:23px}
.legal-callout {
  border-left:2px solid var(--amber);
  background:#ebeef5;
  padding:22px 25px;
  margin:26px 0}
.legal-callout p {
  margin:0}
.source-note {
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--line);
  padding:15px 20px;
  margin-bottom:30px}
.legal-copy strong {
  font-weight:500}
.legal-tools {
  display:flex;
  gap:20px;
  align-items:center;
  font-size:12px}
.legal-tools button {
  border:1px solid var(--line);
  background:none;
  padding:8px 16px;
  font-size:12px}
@media(max-width:800px) {
  .wrap {
  padding:0 24px}
header .wrap {
  height:70px}
nav {
  gap:15px}
nav .optional {
  display:none}
.hero {
  grid-template-columns:1fr;
  gap:15px;
  padding:45px 0}
.hero-aside {
  display:none}
h1 {
  letter-spacing:-1.5px}
.demo {
  padding:20px}
.demo-body {
  grid-template-columns:1fr;
  gap:20px}
.demo-tabs {
  flex-direction:row}
.demo-tabs button {
  flex:1;
  padding:10px!important;
  font-size:11px}
.demo-tabs button[aria-pressed=true] {
  border-left:0;
  border-bottom:2px solid var(--amber)}
.demo-sheet {
  padding:24px 20px}
.table-row {
  font-size:10px}
.section {
  padding:55px 0}
.section-intro {
  grid-template-columns:1fr;
  gap:0}
.feature {
  grid-template-columns:25px 1fr;
  gap:15px}
.feature p {
  grid-column:2}
.cta {
  padding:30px;
  display:block}
.cta .btn {
  margin-top:25px}
h2 {
  font-size:34px}
.legal-head {
  padding-top:35px}
.legal-head h1 {
  font-size:44px}
.legal-layout {
  grid-template-columns:1fr;
  gap:25px;
  padding-top:25px}
.index {
  position:relative;
  top:0;
  max-height:none;
  border-bottom:1px solid var(--line)}
.legal-copy h2 {
  font-size:27px}
footer .wrap {
  flex-direction:column}
footer a {
  margin:0 15px 0 0}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
* {
  animation:none!important;
  transition:none!important}
}
@media print {
  header,footer,.index,.prototype,.legal-tools,.nj-cookie-banner,.legal-nav {
  display:none}
.legal-layout {
  display:block}
.legal-copy {
  max-width:none}
body {
  background:white}
.legal-head {
  padding-top:0}
h2 {
  break-after:avoid}
}


.nj-public-brand {
  display:inline-flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  color:var(--ink)}

.nj-public-brand svg {
  width:36px;
  height:36px;
  flex:none}
.nj-public-brand-name {
  font:400 24px/1 'IBM Plex Serif',Georgia,serif;
  letter-spacing:-.7px}
.nj-public-brand-label {
  display:block;
  font:500 9px/1.3 'IBM Plex Sans',sans-serif;
  letter-spacing:2.8px;
  margin-top:6px;
  text-transform:uppercase}

.skip-link {
  position:absolute;
  left:12px;
  top:-100px;
  z-index:100;
  background:var(--paper);
  padding:10px}
.skip-link:focus {
  top:10px}

.legal-nav {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin:45px 0 0;
  border-top:1px solid var(--line);
  padding-top:25px;
  font-size:13px}
.legal-nav [aria-current] {
  text-decoration-color:var(--amber)}

@media(max-width:480px) {
  header nav .optional {
  display:none}
.table-row {
  grid-template-columns:1fr auto}
.table-row>.muted {
  grid-column:1}
.table-row>.tag {
  grid-column:2;
  grid-row:auto}
.demo-head {
  gap:20px;
  font-size:8px}
.actions {
  flex-wrap:wrap}
.nj-public-brand-name {
  font-size:22px}
}


@media print {
  #njCookieBanner { display: none !important; }
}

/* Physical paper depth, with motion only on entry or deliberate interaction. */
.demo-body { perspective: 1200px; }
.demo-sheet { isolation: isolate; box-shadow: 0 18px 35px #00000024; }
.demo-sheet::before, .demo-sheet::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: #e6e7ed; border: 1px solid #cdd0da;
  transform: rotate(-1.4deg) translate(-5px, 6px);
  pointer-events: none;
}
.demo-sheet::after { background: #fafafd; transform: rotate(.7deg) translate(3px, 2px); }
@media (prefers-reduced-motion: no-preference) {
  .demo-tabs button { transition: color 180ms, background-color 180ms; }
  .demo-tabs button:hover { background-color: #ffffff0b; }
  .hero .btn, .cta .btn { transition: transform 180ms ease; }
  .hero .btn:hover, .cta .btn:hover { transform: translateY(-2px); }
}

.cookie-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 13px; }
.cookie-table th, .cookie-table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cookie-table th { background: #ebeef5; color: var(--ink); }
.cookie-table td code { overflow-wrap: anywhere; font-size: 12px; }
.cookie-badge { display: inline-block; padding: 3px 7px; background: #ebeef5; color: var(--ink); font-size: 11px; }
@media (max-width: 800px) {
  .cookie-table { display: block; overflow-x: auto; }
  .legal-copy { min-width: 0; overflow-wrap: anywhere; }
}