/* Site additions on top of nnovate.css (the design system stylesheet, kept unedited so it can be
   re-synced from Claude Design). */

@font-face { font-family: "Geist"; src: url("/assets/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

body { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Content still waiting on real facts: hidden on the live site, outlined on ?preview so the gaps
   are easy to find. Nothing bracketed or invented reaches visitors. */
html:not(.nn-preview) [data-pending] { display: none !important; }
.nn-preview [data-pending] { outline: 2px dashed #ea580c; outline-offset: 4px; }

/* Without its image column a slide is text only, so let the body take the full width. */
html:not(.nn-preview) .nn-slide { grid-template-columns: minmax(0, 1fr); }
html:not(.nn-preview) .nn-slide-body { max-width: 720px; }

/* Products stack full width, one per row. Until OrVysio's screenshot arrives its card is copy only. */
.nn-factory-grid { grid-template-columns: minmax(0, 1fr); }
html:not(.nn-preview) .nn-product:has(.nn-frame[data-pending]) { grid-template-columns: minmax(0, 1fr); }
.nn-product-copy { max-width: 640px; }
.nn-shot { display: block; width: 100%; height: auto; border-radius: 4px; }

/* Client logos come in every shape (crest, circle, wide wordmark), so each sits in the same white
   tile and scales to fit it. The tile stays white in dark mode so no logo needs recolouring. */
.nn-client-logo { width: 168px; height: 64px; box-sizing: border-box; padding: 8px 14px; background: #ffffff;
  border: 1px solid #e2e8f0; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.nn-client-logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }

.nn-orvysio-logo { display: block; height: 35px; width: auto; }

/* Analytics consent banner, shown only when Clarity is configured and the visitor has not chosen. */
.nn-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 560px; margin-left: auto;
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; padding: 16px 20px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16); }
.nn-consent p { margin: 0; flex: 1 1 260px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.nn-consent-actions { display: flex; gap: 8px; }
.nn-legal-link { margin-left: 16px; color: inherit; text-decoration: underline; }
.nn-cookie-link { margin-left: 16px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.nn-cookie-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Long-form pages such as the privacy notice: one readable column. */
.nn-legal { max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.nn-legal h2 { margin: 24px 0 0; }
.nn-legal p, .nn-legal li { margin: 0; color: var(--text); }
.nn-legal .nn-lead { color: var(--text-2); }
.nn-legal code { font-family: var(--font-mono); font-size: 13px; }
.nn-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.nn-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.nn-table th, .nn-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.nn-table th { font-weight: 600; background: var(--surface-2); color: var(--text); }
.nn-table tr:last-child td { border-bottom: 0; }

.nn-form-status { font-size: 14px; color: var(--text-2); }
.nn-form-status[data-state="ok"] { color: var(--status); }