/* The navy chapter carries the brand; the application retains its clear UI. */
#notasy { background: var(--backdrop-integration); color: #f8fafc; }
#notasy .kicker { color: #9eacc1; }
#notasy .kicker .index { color: var(--rose); }
#notasy .section-heading .intro { align-self: end; padding-top: 0; color: #cbd5e1; }
#notasy .integration-title img { width: 138px; max-width: 100%; height: 41px; filter: brightness(0) invert(1); }
#notasy .integration-body { display: grid; grid-template-columns: minmax(0, .73fr) minmax(0, 1.27fr); align-items: center; gap: clamp(40px, 4.6vw, 68px); margin-top: 0; }
#notasy .integration-copy { min-width: 0; max-width: 440px; }
#notasy .integration-copy h3 { max-width: 410px; color: #f8fafc; font-size: clamp(26px, 2.4vw, 32px); font-weight: 500; line-height: 1.25; letter-spacing: -.03em; text-wrap: balance; }
#notasy .integration-copy p { margin-top: 19px; color: #b9c6d8; font-size: 15px; line-height: 1.75; }
#notasy .integration-features { display: grid; gap: 17px; margin-top: 27px; }
#notasy .integration-features li { gap: 11px; color: #cbd5e1; font-size: 14px; line-height: 1.65; }
#notasy .integration-features .icon { flex: none; width: 17px; height: 17px; margin-top: 3px; color: var(--success-light); }
#notasy .integration-copy .integration-proof { max-width: 380px; margin-top: 28px !important; padding-top: 21px; border-top: 1px solid #a3b2c626; color: #9eacc1 !important; font-size: 12px !important; line-height: 1.7; }
#notasy .integration-copy .button.light { margin-top: 24px; border-color: #fff; background: #fff; color: var(--ink); box-shadow: none; }
#notasy .integration-copy .button.light:hover { background: #e9eef5; border-color: #e9eef5; }

/* One stage, three acts: integrations, sales arriving, then fiscal issuance. */
.automation-demo { position: relative; min-width: 0; width: 100%; overflow: hidden; border: 1px solid #dce3ee; border-radius: 16px; background: #f8fafc; color: var(--ink); box-shadow: 0 4px 8px #0000000a, 0 24px 60px -25px #0000004d; }
.automation-demo svg:not(.icon) { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.automation-controls { position: absolute; top: 18px; right: 14px; z-index: 8; display: flex; flex-direction: column; gap: 6px; }
.automation-controls button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #cbd5e14d; border-radius: 50%; background: #ffffff80; color: #748296; cursor: pointer; transition: color .18s, background-color .18s, border-color .18s; }
.automation-controls button[hidden] { display: none; }
.automation-controls button:hover { color: #334155; border-color: #cbd5e1; background: #fff; }
.automation-controls button:focus-visible, .nz-acts button:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.automation-controls .icon { width: 13px; height: 13px; }
.automation-play-icon { display: none; }
.is-paused .automation-play-icon { display: block; }
.is-paused .automation-pause-icon { display: none; }
.nz-atmosphere { position: relative; background: var(--brand-wash); }
.nz-stage { position: relative; height: 495px; overflow: hidden; isolation: isolate; background: transparent; }

.nz-stage-grid { position: absolute; inset: 0; opacity: .35; background-image: radial-gradient(#afbbcc 1px, transparent 1px); background-size: 20px 20px; mask-image: radial-gradient(ellipse at center, #000, transparent 73%); }
.nz-connect { position: absolute; z-index: 2; top: 40px; left: max(28px, calc((100% - 486px)/2)); right: max(28px, calc((100% - 486px)/2)); border: 1px solid #dfe5ed; border-radius: 14px; background: #fff; box-shadow: 0 6px 10px -4px #1c2b4308, 0 26px 52px -28px #25354f40; opacity: 0; }
.nz-window-heading { display: flex; align-items: center; gap: 12px; padding: 19px 22px; border-bottom: 1px solid #e8edf3; }
.nz-window-icon { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #e4e9f0; border-radius: 10px; color: #657990; }
.nz-window-icon svg { width: 19px; height: 19px; }
.nz-window-heading strong { display: block; color: #182439; font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; }
.nz-window-heading small { display: block; margin-top: 4px; font-size: 10px; color: #7c899b; }
.nz-window-menu { margin-left: auto; font-size: 22px; letter-spacing: 2px; color: #9aa5b5; }
.nz-integration-list { padding: 7px 20px; }
.nz-integration { display: flex; align-items: center; gap: 12px; min-height: 56px; border-bottom: 1px solid #edf0f5; }
.nz-integration:last-child { border: 0; }
.nz-platform-logo { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid #e6ebf1; border-radius: 9px; background: #fff; }
.nz-platform-logo img { object-fit: contain; width: 22px; height: 22px; }
.nz-integration strong { display: block; font-size: 13px; color: #273449; font-weight: 500; line-height: 1.4; }
.nz-integration small { display: block; font-size: 10px; color: #8b96a6; line-height: 1.5; }
.nz-link-status { display: grid; align-items: center; margin-left: auto; font-size: 10px; }
.nz-link-status > span { grid-area: 1/1; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.nz-link-wait { color: #8a96a7; opacity: 0; }
.nz-link-wait i { width: 10px; height: 10px; border: 1.5px solid #dde4ee; border-top-color: #8593a8; border-radius: 50%; }
.nz-link-done { color: #047857; }
.nz-link-done svg { width: 13px; height: 13px; }
.nz-integrations-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 15px 22px; border-top: 1px solid #e8edf3; background: #fbfcfd; border-radius: 0 0 14px 14px; font-size: 10px; color: #8b97a8; }
.nz-integrations-bottom b { color: #047857; font-weight: 500; }
.nz-integrations-bottom > span:last-child { display: flex; align-items: center; gap: 6px; color: #5d6f87; }
.nz-integrations-bottom svg { width: 12px; height: 12px; }
/* A device receives successive sales; the transaction then continues in Notasy. */
.nz-phone { position: absolute; z-index: 1; left: 50%; top: 28px; width: 296px; height: 584px; margin-left: -148px; padding: 7px; border: 2px solid #7f8792; border-radius: 43px; background: #182130; box-shadow: 0 0 0 2px #d6dde5, 0 12px 18px -6px #17223533, 0 35px 55px -20px #1d30484d; opacity: 0; transform-origin: 50% 50%; }
.nz-phone::before { content: ''; position: absolute; left: -5px; top: 98px; width: 3px; height: 35px; border-radius: 2px; background: #9ba2ad; box-shadow: 0 44px #9ba2ad; }
.nz-phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 34px; color: #f8fafc; background: radial-gradient(ellipse at 10% 4%, #728da8, transparent 65%), radial-gradient(ellipse at 98% 82%, #f0c9d76b, transparent 65%), linear-gradient(165deg, #334963, #111b2e 72%); }
.nz-phone-screen::before { content: ''; position: absolute; width: 420px; height: 550px; left: -280px; top: 0; border: 1px solid #b9cad63b; border-radius: 48%; box-shadow: 55px 0 0 #c9d7e108, 110px 0 0 #c9d7e109; transform: rotate(-24deg); }
.nz-phone-island { position: absolute; top: 9px; left: 50%; width: 82px; height: 24px; transform: translateX(-50%); border-radius: 15px; background: #11151b; }
.nz-phone-island::after { content: ''; position: absolute; right: 10px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #344658, #0a0b10); }
.nz-phone-signal { position: absolute; top: 16px; right: 17px; }
.nz-phone-signal svg { width: 37px; height: 12px; }
.nz-phone-clock { position: relative; display: flex; align-items: center; flex-direction: column; padding-top: 48px; }
.nz-phone-clock svg { width: 15px; height: 15px; margin-bottom: 12px; }
.nz-phone-clock > span { font-size: 11px; line-height: 1.5; color: #eef3f8; }
.nz-phone-clock > strong { font-size: 71px; font-weight: 400; line-height: 1.15; letter-spacing: -.055em; color: #eef3f8; }
.nz-notifications { position: relative; display: flex; flex-direction: column; gap: 8px; margin: 22px 12px 0; }
.nz-toast { padding: 11px 12px 12px; border: 1px solid #ffffffab; border-radius: 14px; background: #f3f6faf5; box-shadow: 0 6px 14px -6px #02051622; color: #233046; }
.nz-toast-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.nz-toast-top > span { display: flex; gap: 6px; align-items: center; font-size: 10px; font-weight: 500; }
.nz-toast-top img { width: 18px; height: 18px; flex: none; object-fit: contain; }
.nz-toast-top small { color: #8a95a5; font-size: 9px; }
.nz-toast > strong { display: block; font-size: 11px; font-weight: 500; line-height: 1.4; }
.nz-toast > span { display: block; margin-top: 2px; font-size: 10px; color: #798597; line-height: 1.3; }
.nz-phone-home { position: absolute; left: 50%; bottom: 8px; width: 95px; height: 4px; border-radius: 4px; background: #ffffffb8; transform: translateX(-50%); }
.nz-sync-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; left: 50%; top: calc(50% - 42px); width: 362px; margin-left: -181px; padding: 20px; border: 1px solid #d6dfeb; border-radius: 14px; background: #fff; box-shadow: 0 4px 8px #11203906, 0 22px 48px -19px #1120394a; opacity: 0; }
.nz-sync-chip > span { display: grid; place-items: center; flex: none; width: 42px; height: 42px; }
.nz-sync-chip > span > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nz-sync-chip strong { display: block; font-size: 13px; font-weight: 500; }
.nz-sync-chip small { display: block; margin-top: 5px; color: #8390a1; font-size: 11px; }
.nz-sync-chip > svg { width: 15px; height: 15px; margin-left: auto; color: #047857; }
/* The issuing window uses the same data as the sale notification. */
.nz-invoice { position: absolute; z-index: 3; top: 55px; left: max(26px, calc((100% - 510px)/2)); right: max(26px, calc((100% - 510px)/2)); border: 1px solid #dbe2ec; border-radius: 14px; background: #fff; box-shadow: 0 4px 8px #12203a08, 0 28px 55px -23px #243d6352; }
.nz-invoice-chrome { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 17px; border-bottom: 1px solid #e6ebf2; background: #fbfcfd; border-radius: 14px 14px 0 0; font-size: 9px; color: #92a0b3; }
.nz-window-dots { display: flex; gap: 4px; }
.nz-window-dots i { width: 5px; height: 5px; border: 1px solid #c5cedc; border-radius: 50%; }
.nz-invoice-chrome > svg { width: 12px; height: 12px; }
.nz-invoice-content { padding: 25px 25px 23px; }
.nz-invoice-heading { display: flex; align-items: center; gap: 12px; }
.nz-invoice-symbol { display: grid; place-items: center; flex: none; width: 40px; height: 40px; }
.nz-invoice-symbol img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nz-invoice-heading small { display: block; font: 400 8px/1.5 var(--font-mono); letter-spacing: .05em; color: #8b98a9; }
.nz-invoice-heading h4 { margin: 4px 0 0; font-size: 20px; font-weight: 500; color: #202d43; letter-spacing: -.04em; line-height: 1.2; }
.nz-invoice-type { margin-left: auto; font: 400 9px/1.5 var(--font-mono); padding: 4px 7px; border: 1px solid #e4eaf2; border-radius: 5px; color: #91a0b3; }
.nz-sale-origin { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 25px; padding: 10px 12px; border: 1px solid #e8edf3; border-radius: 7px; background: #f8fafc; font-size: 10px; color: #8b98aa; }
.nz-sale-origin > span { display: flex; align-items: center; gap: 7px; }
.nz-sale-origin > span:first-child { color: #5b6a80; }
.nz-sale-origin img { width: 16px; height: 16px; }
.nz-sale-origin > svg { width: 15px; height: 15px; color: #a3b1c3; }
.nz-invoice-data { display: grid; grid-template-columns: 1fr .5fr 1fr; align-items: end; gap: 15px; margin: 24px 0 25px; }
.nz-invoice-data dt { font-size: 10px; color: #8995a5; margin-bottom: 7px; }
.nz-invoice-data dd { margin: 0; font-size: 14px; color: #46556c; font-weight: 400; line-height: 1.3; }
.nz-invoice-data > div:last-child { text-align: right; }
.nz-invoice-data .nz-invoice-amount { font-size: 23px; font-weight: 500; color: #1c2a40; letter-spacing: -.04em; }
.nz-issue-status { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px; margin-top: 10px; padding-top: 19px; border-top: 1px solid #e7ecf3; font-size: 11px; }
.nz-issue-status > span:not(.nz-issue-label) { display: inline-flex; gap: 7px; align-items: center; grid-area: 1/1; min-height: 20px; }
.nz-emitting { color: #8290a3; opacity: 0; }
.nz-emitting i { width: 12px; height: 12px; border: 1.5px solid #e2e7ee; border-top-color: #8290a3; border-radius: 50%; }
.nz-issued { color: #047857; }
.nz-issued svg { width: 17px; height: 17px; }
.nz-issue-label { font-size: 9px; color: #a0acbb; grid-area: 1/2; }
.nz-issue-progress { height: 3px; margin-top: 12px; overflow: hidden; background: #e9eef4; border-radius: 4px; }
.nz-issue-progress i { display: block; width: 100%; height: 100%; background: #047857; transform-origin: left center; }
.nz-delivery { position: absolute; top: calc(100% + 13px); left: 15px; right: 15px; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid #dde6e4; border-radius: 11px; background: #fff; box-shadow: 0 8px 20px -9px #16354b2b; }
.nz-delivery-icon { display: grid; place-items: center; flex: none; width: 33px; height: 33px; color: #047857; background: #f0f8f4; border-radius: 9px; }
.nz-delivery-icon svg { width: 18px; height: 18px; }
.nz-delivery strong { display: block; font-size: 11px; font-weight: 500; color: #30463f; }
.nz-delivery small { display: block; margin-top: 4px; font-size: 10px; color: #879890; }
.nz-delivery-check { flex: none; width: 15px; height: 15px; margin-left: auto; color: #047857; }
.nz-stage-caption { position: relative; z-index: 5; min-height: 96px; padding: 28px 60px 0; text-align: center; background: transparent; }
.nz-stage-caption > span { display: block; font-size: 18px; font-weight: 500; color: #223047; letter-spacing: -.025em; line-height: 1.3; }
.nz-stage-caption > p { margin: 7px 0 0; font-size: 12px; line-height: 1.5; color: #8490a2; }
.nz-acts { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 20px; background: #fff; }
.nz-acts button { position: relative; display: flex; justify-content: center; align-items: center; gap: 9px; min-width: 0; height: 58px; border: 0; background: transparent; color: #8f9bae; font-family: inherit; font-weight: 400; font-size: 12px; line-height: 1.5; cursor: pointer; }
.nz-acts button + button { border-left: 1px solid #edf0f5; }
.nz-acts button > span { color: #a6b0bf; font: 400 9px/1 var(--font-mono); }
.nz-acts button > svg { width: 13px; height: 13px; margin-left: 5px; }
.nz-acts button[aria-pressed="true"] { color: #223047; }
.nz-acts button[aria-pressed="true"] > span { color: var(--rose); }
.nz-acts button[aria-pressed="true"] > svg { color: #556b88; }
.automation-cycle { height: 2px; width: 100%; overflow: hidden; background: #eef2f6; }
.automation-cycle i { display: block; height: 100%; width: 100%; background: #9cafc7; transform-origin: left; }
@media (max-width: 1150px) {
  #notasy .integration-body { grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr); gap: 36px; }
}
@media (max-width: 1000px) {
  #notasy .integration-body { grid-template-columns: 1fr; gap: 42px; }
  #notasy .integration-copy { max-width: 650px; }
  #notasy .integration-copy h3 { max-width: 550px; }
  .automation-demo { max-width: 780px; margin-inline: auto; }
}
@media (max-width: 620px) {
  .automation-demo { border-radius: 13px; }
  .automation-controls { top: 20px; right: 10px; }
  .automation-controls button { width: 32px; height: 32px; }
  .nz-stage { height: 445px; }
  .nz-connect { left: 16px; right: 16px; top: 29px; }
  .nz-window-heading { padding: 16px 14px; gap: 10px; }
  .nz-window-heading strong { font-size: 14px; }
  .nz-window-heading small { font-size: 9px; }
  .nz-window-icon { width: 29px; height: 31px; border-radius: 8px; }
  .nz-window-menu { display: none; }
  .nz-integration-list { padding: 5px 14px; }
  .nz-integration { min-height: 52px; gap: 9px; }
  .nz-integration strong { font-size: 12px; }
  .nz-integration small { font-size: 9px; }
  .nz-platform-logo { width: 29px; height: 29px; }
  .nz-platform-logo img { width: 20px; height: 20px; }
  .nz-link-status { font-size: 9px; }
  .nz-integrations-bottom { padding: 14px; font-size: 9px; gap: 5px; }
  .nz-phone { width: 248px; height: 502px; margin-left: -124px; top: 27px; padding: 6px; border-radius: 36px; }
  .nz-phone-screen { border-radius: 28px; }
  .nz-phone-island { width: 72px; height: 21px; }
  .nz-phone-signal { right: 10px; top: 15px; }
  .nz-phone-signal svg { width: 32px; height: 10px; }
  .nz-phone-clock { padding-top: 42px; }
  .nz-phone-clock > span { font-size: 10px; }
  .nz-phone-clock > strong { font-size: 60px; }
  .nz-notifications { margin: 17px 9px 0; gap: 7px; }
  .nz-toast { padding: 9px 11px 10px; border-radius: 11px; }
  .nz-toast > strong { font-size: 10px; }
  .nz-toast > span { font-size: 9px; }
  .nz-toast-top { margin-bottom: 5px; }
  .nz-toast-top > span { font-size: 9px; }
  .nz-toast-top img { width: 15px; height: 15px; }
  .nz-sync-chip { top: calc(50% - 38px); width: calc(100% - 38px); left: 19px; margin-left: 0; padding: 18px 15px; gap: 10px; }
  .nz-sync-chip strong { font-size: 12px; }
  .nz-sync-chip small { font-size: 10px; }
  .nz-invoice { left: 16px; right: 16px; top: 58px; border-radius: 11px; }
  .nz-invoice-chrome { height: 31px; padding-inline: 13px; }
  .nz-invoice-content { padding: 19px 17px 18px; }
  .nz-invoice-heading { gap: 9px; }
  .nz-invoice-heading small { font-size: 7px; }
  .nz-invoice-heading h4 { font-size: 17px; }
  .nz-invoice-symbol { width: 33px; height: 33px; }
  .nz-invoice-type { display: none; }
  .nz-sale-origin { margin-top: 19px; font-size: 9px; padding: 9px; gap: 5px; }
  .nz-sale-origin img { width: 14px; height: 14px; }
  .nz-invoice-data { margin-block: 21px; gap: 8px; }
  .nz-invoice-data dt { font-size: 9px; margin-bottom: 5px; }
  .nz-invoice-data dd { font-size: 12px; }
  .nz-invoice-data .nz-invoice-amount { font-size: 20px; }
  .nz-issue-status { padding-top: 15px; font-size: 10px; }
  .nz-issue-label { font-size: 8px; }
  .nz-delivery { left: 6px; right: 6px; gap: 8px; padding: 12px; }
  .nz-delivery-icon { width: 27px; height: 29px; border-radius: 7px; }
  .nz-delivery strong { font-size: 10px; }
  .nz-delivery small { font-size: 9px; line-height: 1.4; }
  .nz-delivery-check { width: 12px; height: 12px; }
  .nz-stage-caption { min-height: 110px; padding: 22px 54px 0 16px; }
  .nz-stage-caption > span { font-size: 16px; }
  .nz-stage-caption > p { font-size: 11px; min-height: 33px; margin-top: 6px; }
  .nz-acts { padding-inline: 9px; }
  .nz-acts button { height: 51px; gap: 6px; font-size: 11px; }
  .nz-acts button > span { font-size: 8px; }
  .nz-acts button > svg { width: 11px; height: 11px; margin-left: 2px; }
}
@media (max-width: 360px) {
  .nz-window-heading small { max-width: 150px; font-size: 8px; }
  .nz-connect { left: 12px; right: 12px; }
  .nz-window-heading, .nz-integration-list { padding-inline: 11px; }
  .nz-integration { gap: 7px; }
  .nz-integration small { font-size: 8px; }
  .nz-link-status { font-size: 8px; }
  .nz-integrations-bottom { padding-inline: 11px; font-size: 8px; }
  .nz-integrations-bottom svg { display: none; }
  .nz-invoice { left: 12px; right: 12px; }
  .nz-invoice-content { padding-inline: 13px; }
  .nz-invoice-heading h4 { font-size: 15px; }
  .nz-invoice-data .nz-invoice-amount { font-size: 18px; }
  .nz-sale-origin { font-size: 8px; }
  .nz-delivery { padding: 10px; }
  .nz-delivery strong { font-size: 9px; }
  .nz-delivery small { font-size: 8px; }
  .nz-delivery-check { display: none; }
  .nz-sync-chip { left: 14px; width: calc(100% - 28px); padding: 16px 12px; gap: 8px; }
  .nz-sync-chip > span { width: 33px; height: 33px; }
  .nz-sync-chip strong { font-size: 10px; }
  .nz-sync-chip small { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .automation-demo *, .automation-demo *::before, .automation-demo *::after { animation: none !important; transition: none !important; }
}