/* Left/right inset matches .nb-role-panels exactly (clamp(22px,4vw,72px)),
   and the heading below no longer adds its own extra inset on top of it —
   one shared edge for the whole section, consistent with the Role section
   above it, instead of the heading and console sitting on different edges. */
.nb-proof-section { position: relative; overflow: hidden; padding: 84px clamp(22px,4vw,72px) 78px; background: #f8f9ff; }
.nb-proof-section::before { content: ""; position: absolute; inset: -12%; background: radial-gradient(circle at 12% 20%,rgba(37,99,235,.12),transparent 36%),radial-gradient(circle at 88% 76%,rgba(5,150,105,.09),transparent 34%); filter: blur(7px); }
.nb-proof-heading { position: relative; z-index: 1; padding: 0 0 30px; }
.nb-proof-section .nb-section-label { color: #2563eb; }
.nb-proof-heading h2 { margin: 13px 0 0; color: #0a0f1e; font: 700 clamp(1.9rem,3.2vw,3rem)/1.08 "Sora",sans-serif; letter-spacing: -.045em; }
.nb-proof-heading h2 span { color: #2563eb; }
/* No max-width/auto-margin here (unlike the old rule): those made this card
   center itself independently of the section's own padding on wide screens
   — the section padding keeps the heading pinned to one edge while the
   card, once wider than 1880px, centered with extra space added on both
   sides, so the card's left edge drifted right of the heading's. Just fill
   100% of the section's content width, same as .nb-role-panels does. */
.nb-proof-stage { position: relative; z-index: 1; display: grid; grid-template-columns: .78fr 1.22fr; min-height: 620px; width: 100%; overflow: hidden; border-radius: 7px; background: #081225; color: #fff; box-shadow: 0 34px 90px rgba(8,18,37,.2); }
.nb-proof-stage::before { content: ""; position: absolute; width: 680px; height: 680px; top: -420px; right: -130px; border-radius: 50%; background: radial-gradient(circle,rgba(37,99,235,.42),transparent 68%); }
.nb-proof-stage::after { content: ""; position: absolute; width: 480px; height: 480px; bottom: -340px; left: -140px; border-radius: 50%; background: radial-gradient(circle,rgba(5,150,105,.2),transparent 68%); }
.nb-proof-grid { position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgba(96,165,250,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(96,165,250,.08) 1px,transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(circle at 70% 38%,#000,transparent 76%); -webkit-mask-image: radial-gradient(circle at 70% 38%,#000,transparent 76%); }
/* Left padding reduced to a small, deliberate inset (same clamp() used for
   the Role panel's card copy elsewhere on this page) instead of the old
   72-80px, which pushed the h3/body/button far enough right of the h2 above
   to look like an accidental misalignment. Zero padding was tried and
   over-corrected the other way — text and the button touched the card's
   bare edge with no breathing room. This keeps a real but modest gap. */
.nb-proof-copy { position: relative; z-index: 2; align-self: center; padding: clamp(36px,5vw,80px) clamp(36px,5vw,80px) clamp(36px,5vw,80px) clamp(24px,3vw,48px); }
.nb-proof-rule { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; color: #93c5fd; font: 500 .67rem "IBM Plex Mono",monospace; letter-spacing: .08em; }
/* Statement-h3 tier: shared with the Role/Audience panel's overlay title —
   a deliberately larger "second statement" style, but always smaller than
   any section h2 (max 3rem). Was previously up to 4rem, bigger than every
   h2 on the page. */
.nb-proof-copy h3 { margin: 0 0 18px; font: 650 clamp(1.65rem,2.4vw,2.15rem)/1.15 "Sora",sans-serif; letter-spacing: -.035em; }
.nb-proof-copy p { max-width: 480px; margin: 0 0 28px; color: #dbe7fa; font-size: .84rem; line-height: 1.65; }
.nb-proof-console { position: relative; z-index: 2; align-self: center; width: min(88%,760px); margin: 40px auto 108px; overflow: hidden; border: 1px solid rgba(147,197,253,.2); border-radius: 20px; background: rgba(13,25,48,.82); box-shadow: 0 28px 70px rgba(0,0,0,.3); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.nb-proof-console-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 19px; border-bottom: 1px solid rgba(147,197,253,.14); color: #d2dceb; font-size: .64rem; }
.nb-proof-console-head span { display: flex; align-items: center; gap: 8px; }
.nb-proof-console-head span i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 5px rgba(74,222,128,.1); }
.nb-proof-console-head em { color: #86efac; font-style: normal; }
.nb-proof-core { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 30px; padding: 30px; }
.nb-proof-score { position: relative; display: grid; width: 150px; height: 150px; place-items: center; border-radius: 50%; background: conic-gradient(#3b82f6 0 75%,#4ade80 75% 100%); box-shadow: 0 0 46px rgba(37,99,235,.2); }
.nb-proof-score::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #0d1930; }
.nb-proof-score span { position: relative; display: grid; text-align: center; }
.nb-proof-score strong { font: 700 2rem "Sora",sans-serif; }
.nb-proof-score small { color: #b8c7dc; font-size: .56rem; }
.nb-proof-status { display: grid; gap: 6px; }
.nb-proof-status small { color: #b8c7dc; font-size: .6rem; }
.nb-proof-status strong { display: flex; align-items: center; gap: 9px; color: #fff; font: 650 1.2rem "Sora",sans-serif; }
.nb-proof-status strong i { color: #4ade80; }
/* Was #647a9a — measured ~4.0:1 on this dark card, below WCAG AA for text
   this small; #8da1bf (already used for the sibling small/caption labels in
   this same console) measures ~6.7:1. */
.nb-proof-status span { color: #b8c7dc; font: .57rem "IBM Plex Mono",monospace; }
.nb-proof-reference { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin: 0 25px; padding: 17px; border: 1px solid rgba(74,222,128,.17); border-radius: 14px; background: rgba(74,222,128,.05); }
.nb-proof-reference > i { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 10px; background: #fff; color: #0f172a; font-size: 1.8rem; }
.nb-proof-reference > span { display: grid; gap: 2px; }
.nb-proof-reference small,.nb-proof-reference em { color: #aebbd0; font-size: .55rem; font-style: normal; }
.nb-proof-reference strong { font: 600 .76rem "IBM Plex Mono",monospace; }
.nb-proof-reference b { padding: 7px 9px; border-radius: 99px; background: rgba(74,222,128,.13); color: #86efac; font-size: .57rem; }
.nb-proof-flow { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 9px; padding: 22px 30px 26px; }
.nb-proof-flow span { color: #b8c7dc; font-size: .58rem; }
.nb-proof-flow .is-current { color: #86efac; }
.nb-proof-flow i { height: 1px; background: linear-gradient(90deg,#3b82f6,#4ade80); }
.nb-proof-risks { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(147,197,253,.14); background: rgba(5,12,25,.78); backdrop-filter: blur(12px); }
.nb-proof-risks > span { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 10px; padding: 18px 24px; }
.nb-proof-risks > span + span { border-left: 1px solid rgba(147,197,253,.14); }
.nb-proof-risks i { grid-row: 1 / span 2; color: #fb7185; }
/* Same contrast fix as .nb-proof-status span above — was the same failing
   #647a9a; this row's background is even darker, making it the least
   readable text in the console. */
.nb-proof-risks small { color: #b8c7dc; font-size: .52rem; }
.nb-proof-risks strong { color: #dbe7fa; font-size: .65rem; }
.nb-proof-risks strong b { font-weight: inherit; }

.nb-closing-orb { position: absolute; border-radius: 50%; animation: nbClosingFloat 10s ease-in-out infinite; }
.nb-closing-link { display: inline-flex; align-items: center; gap: 9px; color: #0f172a; font-size: .8rem; font-weight: 700; text-decoration: none; }
.nb-closing-link i { transition: transform .2s ease; }
.nb-closing-link:hover i { transform: translateX(4px); }
/* Redesigned as check-icon pill badges instead of plain dot-separated text —
   small/caption tier size/color preserved (same .8rem/#475569 as the
   Problem-footer note and Workflow closing line), just given more visual
   weight via the pill treatment. */
.nb-closing-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 30px; }
.nb-closing-trust span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border: 1px solid rgba(5,150,105,.18); border-radius: 99px;
  background: rgba(5,150,105,.07); color: #475569; font-size: .8rem; font-weight: 500;
}

@keyframes nbClosingFloat { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(8px,-12px,0); } }

@media (max-width: 991.98px) {
  .nb-proof-stage { grid-template-columns: 1fr; }
  .nb-proof-copy { padding-bottom: 20px; }
  .nb-proof-console { margin: 10px auto 110px; }
}

@media (max-width: 767.98px) {
  /* Horizontal inset no longer zeroed here — keeps the same left/right edge
     as the heading (and the Role section above) instead of going edge-to-
     edge on mobile while the heading stays indented. */
  .nb-proof-section { padding: 64px clamp(22px,4vw,72px) 58px; }
  .nb-proof-copy { padding: 36px 22px 22px 20px; }
  .nb-proof-console { width: calc(100% - 28px); margin-bottom: 190px; border-radius: 15px; }
  .nb-proof-core { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .nb-proof-reference { grid-template-columns: auto 1fr; }
  .nb-proof-reference b { display: none; }
  .nb-proof-risks { grid-template-columns: 1fr; }
  .nb-proof-risks > span + span { border-top: 1px solid rgba(147,197,253,.14); border-left: 0; }
  .nb-proof-risks > span { padding-block: 13px; }
  .nb-closing-trust { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .nb-closing-orb { animation: none !important; }
}

/* Closing conversion panel — wide editorial composition that bridges the
   light marketing canvas into the dark footer. */
.nb-closing-section { position: relative; display: block; min-height: 0; overflow: hidden; padding: 104px 0; background: #f8f9ff; text-align: left; }
.nb-closing-mesh { position: absolute; inset: 0; background: radial-gradient(circle at 10% 24%,rgba(37,99,235,.14),transparent 34%),radial-gradient(circle at 88% 70%,rgba(5,150,105,.11),transparent 34%),radial-gradient(circle at 68% 8%,rgba(201,168,76,.1),transparent 28%); }
.nb-closing-mesh::after { content: ""; position: absolute; inset: 0; opacity: .48; background-image: linear-gradient(rgba(15,23,42,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.035) 1px,transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(circle at 50% 48%,#000,transparent 78%); -webkit-mask-image: radial-gradient(circle at 50% 48%,#000,transparent 78%); }
.nb-closing-orb.is-one { top: 11%; left: 4%; width: 82px; height: 82px; background: rgba(37,99,235,.11); box-shadow: inset 0 0 24px rgba(255,255,255,.72); }
.nb-closing-orb.is-two { right: 5%; bottom: 12%; width: 58px; height: 58px; background: rgba(201,168,76,.16); }
.nb-closing-shell { position: relative; z-index: 1; }
.nb-closing-panel { position: relative; display: grid; grid-template-columns: .86fr 1.14fr; min-height: 590px; overflow: hidden; border: 1px solid rgba(96,165,250,.18); border-radius: 30px; background: linear-gradient(118deg,#081225 0%,#0a1730 54%,#102b58 100%); box-shadow: 0 38px 100px rgba(15,23,42,.2); }
.nb-closing-panel::before { content: ""; position: absolute; width: 680px; height: 680px; top: -430px; right: -150px; border-radius: 50%; background: radial-gradient(circle,rgba(37,99,235,.48),transparent 68%); pointer-events: none; }
.nb-closing-panel::after { content: ""; position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(147,197,253,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(147,197,253,.08) 1px,transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(90deg,transparent 18%,#000); -webkit-mask-image: linear-gradient(90deg,transparent 18%,#000); pointer-events: none; }
.nb-closing-content { position: relative; z-index: 2; align-self: center; max-width: 570px; padding: clamp(52px,6vw,84px) 34px clamp(52px,6vw,84px) clamp(36px,6vw,80px); border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; text-align: left; }
.nb-closing-badge { display: inline-grid; width: 52px; height: 52px; margin-bottom: 26px; place-items: center; border: 1px solid rgba(147,197,253,.28); border-radius: 15px; background: rgba(37,99,235,.14); box-shadow: inset 0 1px rgba(255,255,255,.1); }
.nb-closing-badge img { width: 26px; height: 26px; object-fit: contain; }
.nb-closing-section .nb-section-label { display: block; color: #93c5fd; }
.nb-closing-content h2 { margin: 15px 0 18px; color: #fff; font: 700 clamp(2rem,3.2vw,3.35rem)/1.06 "Sora",sans-serif; letter-spacing: -.05em; }
.nb-closing-content h2 span { color: #60a5fa; }
.nb-closing-content p { max-width: 450px; margin: 0 0 32px; color: #dbe7fa; font-size: .96rem; line-height: 1.7; }
.nb-closing-actions { display: flex; align-items: center; justify-content: flex-start; gap: 24px; }
.nb-closing-link { color: #fff; font-size: .82rem; }
.nb-closing-link:hover { color: #bfdbfe; }
.nb-closing-trust { justify-content: flex-start; gap: 8px; margin-top: 34px; }
.nb-closing-trust span { padding: 7px 11px; border-color: rgba(52,211,153,.2); background: rgba(5,150,105,.09); color: #dbe7fa; font-size: .72rem; }
.nb-closing-trust i { color: #34d399; font-size: .78rem; }
.nb-closing-visual { position: relative; z-index: 2; display: grid; align-items: center; padding: 58px clamp(44px,5vw,78px) 58px 24px; }
.nb-closing-preview { overflow: hidden; border: 1px solid rgba(147,197,253,.2); border-radius: 22px; background: rgba(7,16,34,.78); box-shadow: 0 32px 75px rgba(2,6,18,.42); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform: perspective(1100px) rotateY(-4deg) rotateX(1deg); transition: transform .6s cubic-bezier(.2,.75,.2,1); }
.nb-closing-panel:hover .nb-closing-preview { transform: perspective(1100px) rotateY(-1deg) translateY(-5px); }
.nb-closing-preview-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 15px 18px; border-bottom: 1px solid rgba(147,197,253,.14); color: #aebbd0; }
.nb-closing-preview-head > span { display: flex; gap: 5px; }
.nb-closing-preview-head > span i { width: 6px; height: 6px; border-radius: 50%; background: #475569; }
.nb-closing-preview-head > span i:first-child { background: #60a5fa; }
.nb-closing-preview-head small { font-size: .64rem; }
.nb-closing-preview-head b { display: inline-flex; align-items: center; gap: 6px; color: #86efac; font-size: .59rem; font-weight: 650; }
.nb-closing-preview-head b i { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.1); }
.nb-closing-invoice { margin: 24px; padding: clamp(24px,3vw,34px); border: 1px solid rgba(226,232,240,.94); border-radius: 17px; background: #f8f9ff; color: #0a0f1e; box-shadow: 0 22px 55px rgba(2,6,18,.24); }
.nb-closing-invoice-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid #e2e8f0; }
.nb-closing-invoice-head > span { display: grid; gap: 5px; }
.nb-closing-invoice small { color: #475569; font: 500 .62rem "IBM Plex Mono",monospace; letter-spacing: .06em; text-transform: uppercase; }
.nb-closing-invoice-head strong { font: 600 .9rem "IBM Plex Mono",monospace; }
.nb-closing-invoice-head em { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 99px; background: #d1fae5; color: #065f46; font-size: .65rem; font-style: normal; font-weight: 700; }
.nb-closing-total { display: grid; gap: 6px; padding: 28px 0 20px; }
.nb-closing-total strong { font: 700 clamp(1.65rem,2.5vw,2.25rem) "Sora",sans-serif; letter-spacing: -.04em; }
.nb-closing-meta { display: flex; justify-content: space-between; gap: 20px; color: #475569; font-size: .72rem; }
.nb-closing-progress { height: 5px; margin: 22px 0; overflow: hidden; border-radius: 99px; background: #dbeafe; }
.nb-closing-progress span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#2563eb,#059669); transform-origin: left; animation: readinessFill 1.4s ease both; }
.nb-closing-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.nb-closing-checks span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 8px; background: #eff6ff; color: #334155; font-size: .63rem; }
.nb-closing-checks i { color: #059669; }
.nb-closing-event { position: absolute; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 9px; padding: 11px 13px; border: 1px solid rgba(147,197,253,.2); border-radius: 13px; background: rgba(8,18,38,.92); color: #fff; box-shadow: 0 18px 40px rgba(2,6,18,.34); backdrop-filter: blur(12px); animation: nbClosingFloat 6s ease-in-out infinite; }
.nb-closing-event > i { grid-row: 1 / span 2; color: #34d399; font-size: 1rem; }
.nb-closing-event small { color: #aebbd0; font-size: .55rem; }
.nb-closing-event strong { font-size: .68rem; }
.nb-closing-event.is-accepted { top: 15%; right: 5%; }
.nb-closing-event.is-payment { right: 12%; bottom: 10%; animation-delay: -3s; }
.nb-closing-event.is-payment > i { color: #60a5fa; }

@media (max-width: 991.98px) {
  .nb-closing-panel { grid-template-columns: 1fr; }
  .nb-closing-content { max-width: 680px; padding: 64px 52px 34px; }
  .nb-closing-visual { min-height: 500px; padding: 24px 52px 64px; }
  .nb-closing-event.is-accepted { top: 7%; right: 5%; }
  .nb-closing-event.is-payment { right: 9%; bottom: 7%; }
}

@media (max-width: 767.98px) {
  .nb-closing-section { min-height: 0; padding: 72px 18px; }
  .nb-closing-panel { border-radius: 22px; }
  .nb-closing-content { padding: 46px 24px 26px; }
  .nb-closing-actions { align-items: stretch; flex-direction: column; gap: 18px; }
  .nb-closing-link { justify-content: center; }
  .nb-closing-visual { min-height: 410px; padding: 18px 16px 46px; }
  .nb-closing-preview { transform: none; }
  .nb-closing-panel:hover .nb-closing-preview { transform: none; }
  .nb-closing-invoice { margin: 14px; padding: 20px; }
  .nb-closing-checks span:last-child { display: none; }
  .nb-closing-event.is-accepted { top: 1%; right: 3%; }
  .nb-closing-event.is-payment { right: 5%; bottom: 3%; }
}

@media (prefers-reduced-motion: reduce) {
  .nb-closing-event { animation: none !important; }
  .nb-closing-preview { transform: none; }
}