/* product pages (site redesign parity): features, solutions, integrations —
   site_product.gohtml / site_product_index.gohtml. Everything is pr-* and
   scoped to body.nc-site .pr; spacing on an 8px rhythm. */

.nc-site .pr { --pr-gap: 24px; --pr-pad: 32px; }
.nc-site .pr .nc-prose, .nc-site .pr .nc-faq, .nc-site .pr p, .nc-site .pr li { hyphens: manual; }

/* ---- hero -------------------------------------------------------------------- */
.nc-site .pr-hero { background: #fff; padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 6vw, 72px); }
.nc-site .pr-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.nc-site .pr-hero-grid.one { grid-template-columns: minmax(0, 1fr); }
.nc-site .pr-crumbs { margin: 0 0 24px; }
.nc-site .pr-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--nc-muted); }
.nc-site .pr-badge { display: inline-flex; align-items: center; gap: 6px; font: 800 12px/1 var(--nc-sans); letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: #e3f6ea; color: #137a3a; white-space: nowrap; }
.nc-site .pr-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nc-site .pr .pr-h1 { font-size: clamp(38px, 4.6vw, 60px); line-height: 1.02; max-width: 17ch; margin: 0 0 24px; }
.nc-site .pr-hero-grid.one .pr-h1 { max-width: 20ch; }
.nc-site .pr .pr-lead { margin: 0 0 32px; max-width: 46ch; }
.nc-site .pr-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.nc-site .pr .pr-facts { margin: 24px 0 0; }
.nc-site .pr-hero-vis { min-width: 0; }

/* ---- type ---------------------------------------------------------------------- */
.nc-site .pr-h2 { font-family: var(--nc-display); font-weight: 900; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.08; letter-spacing: -.035em; color: var(--nc-ink); margin: 0 0 32px; text-wrap: balance; }
.nc-site .pr-h2.sm { font-size: clamp(24px, 2.4vw, 30px); margin-bottom: 8px; }
.nc-site .pr-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--nc-muted); margin: 0 0 12px; }
.nc-site .pr-small { font-size: 14.5px; line-height: 1.55; color: var(--nc-muted); margin: 16px 0 0; }
.nc-site .pr-small p { margin: 0 0 8px; }
.nc-site .pr-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin: 0 0 32px; }
.nc-site .pr-head .pr-h2 { margin: 0; }
.nc-site .pr-cap { font-size: 13px; color: var(--nc-faint); margin: 12px 0 0; text-align: center; }

/* ---- icon discs ------------------------------------------------------------------ */
.nc-site .pr-ico { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--nc-ink); background: var(--nc-panel); }
.nc-site .pr-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nc-site .pr-ico.sm { width: 40px; height: 40px; }
.nc-site .pr-ico.sm svg { width: 20px; height: 20px; }
.nc-site .pr-ico.sun { background: #ffe8a3; } .nc-site .pr-ico.mint { background: #c9eed6; } .nc-site .pr-ico.sky { background: #d3e2ff; }
.nc-site .pr-ico.rose { background: #ffd6cc; } .nc-site .pr-ico.aqua { background: #c7f2f4; }

/* ---- cards (whole card is the link) ------------------------------------------------- */
.nc-site .pr-cards { display: grid; gap: var(--pr-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nc-site .pr-cards.n1 { grid-template-columns: minmax(0, 1fr); }
.nc-site .pr-cards.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nc-site .pr-cards.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nc-site .pr-card { display: flex; flex-direction: column; background: #fff; border-radius: 20px; padding: var(--pr-pad); box-shadow: var(--nc-sh-1); color: inherit; text-decoration: none;
  transition: transform .25s var(--nc-ease), box-shadow .25s var(--nc-ease); }
.nc-site a.pr-card:hover { transform: translateY(-3px); box-shadow: var(--nc-sh-2); }
.nc-site .pr-card > .pr-ico { margin-bottom: 16px; }
.nc-site .pr-card h2, .nc-site .pr-card h3 { font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -.02em; color: var(--nc-ink); margin: 0 0 8px; }
.nc-site .pr-card p { font-size: 16px; line-height: 1.55; color: var(--nc-muted); margin: 0; }
.nc-site .pr-card .more, .nc-site .pr-sol .more { margin-top: auto; padding-top: 16px; font-size: 15px; font-weight: 700; color: var(--nc-navy); }
.nc-site .pr-card .go, .nc-site .pr-sol .go { display: inline-block; transition: transform .2s var(--nc-ease); }
.nc-site a.pr-card:hover .go, .nc-site a.pr-sol:hover .go { transform: translateX(3px); }
.nc-site .pr-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.nc-site .pr-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- highlights 2×2 ------------------------------------------------------------------ */
.nc-site .pr-hl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pr-gap); }
.nc-site .pr-hl-card { background: #fff; border-radius: 20px; padding: var(--pr-pad); box-shadow: 0 0 0 1px var(--nc-line); }
.nc-site .pr-hl.on-white .pr-hl-card { box-shadow: var(--nc-sh-1); }
.nc-site .pr-hl-card h3 { font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -.02em; color: var(--nc-ink); margin: 0 0 8px; }
.nc-site .pr-hl-card p { font-size: 16px; line-height: 1.6; color: var(--nc-ink-2); margin: 0 0 8px; max-width: 60ch; }
.nc-site .pr-hl-card p:last-child { margin-bottom: 0; }

/* ---- split: steps left, prose right ---------------------------------------------------- */
.nc-site .pr-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.nc-site .pr-split-l, .nc-site .pr-split-r { min-width: 0; }
@media (min-width: 961px) { .nc-site .pr-split-l > :last-child { position: sticky; top: 96px; } }

.nc-site .pr-nsteps { list-style: none; counter-reset: n; display: grid; gap: 16px; margin: 0; padding: 0; }
.nc-site .pr-nsteps li { counter-increment: n; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; font-size: 17px; line-height: 1.55; color: var(--nc-ink-2); }
.nc-site .pr-nsteps li::before { content: counter(n); width: 32px; height: 32px; border-radius: 10px; background: var(--nc-navy); color: #fff; font: 800 14px/32px var(--nc-sans); text-align: center; }
.nc-site .pr-nsteps a, .nc-site .pr-xlist a, .nc-site .pr-ticks a, .nc-site .pr-warn a { color: var(--nc-navy); }
.nc-site .pr-nsteps strong { color: var(--nc-ink); }

.nc-site .pr-see { margin-top: 40px; background: var(--nc-sun); border-radius: 20px; padding: var(--pr-pad); }
.nc-site .pr-see h3 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--nc-ink); margin: 0 0 8px; }
.nc-site .pr-see p { font-size: 16px; line-height: 1.55; color: var(--nc-ink-2); margin: 0 0 16px; }
.nc-site .pr-see .pr-small { margin: 16px 0 0; }

.nc-site .pr-short { background: var(--nc-paper-2); border-radius: 16px; padding: 20px 24px; margin: 0 0 32px; }
.nc-site .nc-section.alt .pr-short { background: #fff; box-shadow: 0 0 0 1px var(--nc-line); }
.nc-site .pr-short b { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--nc-navy); margin: 0 0 8px; }
.nc-site .pr-short p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--nc-ink-2); }
.nc-site .pr-short.sun, .nc-site .nc-section.alt .pr-short.sun { background: var(--nc-sun); box-shadow: none; }
.nc-site .pr-short.sun b { color: #7a5a00; }

.nc-site .pr-check { border-radius: 16px; padding: 24px; margin: 0 0 32px; box-shadow: 0 0 0 1px var(--nc-line); background: #fff; }
.nc-site .pr-check h3 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--nc-ink); margin: 0 0 16px; }
.nc-site .pr-check.warn { margin: 40px 0 0; }

/* tick / cross / warning lists */
.nc-site .pr-ticks, .nc-site .pr-xlist, .nc-site .pr-warn { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nc-site .pr-ticks li, .nc-site .pr-xlist li, .nc-site .pr-warn li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-size: 16.5px; line-height: 1.55; color: var(--nc-ink-2); }
.nc-site .pr-ticks li::before, .nc-site .pr-xlist li::before, .nc-site .pr-warn li::before { content: ""; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px; }
.nc-site .pr-ticks li::before { background: #c9eed6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23137a3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }
.nc-site .pr-xlist li::before { background: #fde7e0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%23d0451b' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/11px no-repeat; }
.nc-site .pr-warn li::before { background: #fff1c2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v8' fill='none' stroke='%237a5a00' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='18.5' r='1.7' fill='%237a5a00'/%3E%3C/svg%3E") center/13px no-repeat; }
.nc-site .pr-ticks strong, .nc-site .pr-warn strong, .nc-site .pr-xlist strong { color: var(--nc-ink); }
.nc-site .pr-ticks.sm { gap: 8px; }
.nc-site .pr-ticks.sm li { font-size: 15px; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; }
.nc-site .pr-ticks.sm li::before { width: 20px; height: 20px; background-size: 12px; }
.nc-site .pr-xlist li { font-size: 17.5px; }

/* prose inside the product layouts */
.nc-site .pr-prose { font-size: 17px; line-height: 1.7; }
.nc-site .pr-prose > :first-child { margin-top: 0; }
.nc-site .pr-prose h2 { font-size: 24px; line-height: 1.25; letter-spacing: -.02em; margin: 40px 0 12px; }
.nc-site .pr-prose p, .nc-site .pr-prose li { max-width: 68ch; }
.nc-site .pr-prose ul { padding-left: 20px; }
.nc-site .pr-prose li { margin-bottom: 8px; }
.nc-site .pr-prose li strong { color: var(--nc-ink); }
.nc-site .pr-prose table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 24px 0; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--nc-line); background: #fff; }
.nc-site .pr-prose th { background: var(--nc-paper-2); font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--nc-muted); text-align: left; padding: 12px 16px; vertical-align: bottom; }
.nc-site .pr-prose td { padding: 12px 16px; border-top: 1px solid var(--nc-line-soft); font-size: 15.5px; line-height: 1.5; vertical-align: top; color: var(--nc-ink-2); }
/* two-column tables are before / after comparisons */
.nc-site .pr-prose .pr-ba td:first-child { color: var(--nc-muted); }
.nc-site .pr-prose .pr-ba th:last-child { color: #137a3a; }
.nc-site .pr-prose .pr-ba td:last-child { color: var(--nc-ink); font-weight: 600; }
.nc-site .pr-prose .pr-ba td::before { content: ""; display: inline-block; width: 16px; height: 16px; margin: 0 8px -3px 0; border-radius: 50%; }
.nc-site .pr-prose .pr-ba td:first-child::before { background: #f0eeea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%239aa3b0' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/9px no-repeat; }
.nc-site .pr-prose .pr-ba td:last-child::before { background: #c9eed6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23137a3a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat; }
.nc-site .pr-prose code { font-size: .9em; background: var(--nc-panel); padding: 1px 6px; border-radius: 6px; }

.nc-site .pr-nsteps code, .nc-site .pr-warn code, .nc-site .pr-ticks code { font-size: .88em; background: var(--nc-panel); padding: 1px 6px; border-radius: 6px; }

/* single-column reading width (solutions) */
.nc-site .pr-read { max-width: 760px; }

/* ---- solution: pains + step strip ------------------------------------------------------ */
.nc-site .pr-pains .pr-h2 { margin: 0; }
.nc-site .pr-strip { list-style: none; counter-reset: n; margin: 0; padding: 0; display: grid; gap: var(--pr-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nc-site .pr-strip.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nc-site .pr-strip.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nc-site .pr-strip li { counter-increment: n; display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 2px solid var(--nc-line-2); font-size: 16px; line-height: 1.55; color: var(--nc-ink-2); }
.nc-site .pr-strip li::before { content: counter(n); width: 32px; height: 32px; border-radius: 10px; background: var(--nc-navy); color: #fff; font: 800 14px/32px var(--nc-sans); text-align: center; }
.nc-site .pr-strip a { color: var(--nc-navy); }

/* ---- FAQ split --------------------------------------------------------------------------- */
.nc-site .pr-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.nc-site .pr-faq-side p { font-size: 17px; line-height: 1.55; color: var(--nc-muted); margin: -16px 0 24px; max-width: 34ch; }
@media (min-width: 961px) { .nc-site .pr-faq-side { position: sticky; top: 96px; } }
.nc-site .pr-faq-list { max-width: 760px; }
.nc-site .pr .nc-faq details p strong:first-child { color: var(--nc-ink); }

/* ---- hero visuals: shared mock-up card ---------------------------------------------------- */
.nc-site .pr-vis { position: relative; }
.nc-site .pr-mock { position: relative; z-index: 1; background: #fff; border-radius: 16px; box-shadow: var(--nc-sh-2); padding: 24px; display: grid; gap: 12px; font-size: 15px; color: var(--nc-ink-2); }
.nc-site .pr-mock .hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nc-site .pr-mock .hd b { font-size: 16px; font-weight: 800; color: var(--nc-ink); }
.nc-site .pr-mock .mut { font-size: 14px; color: var(--nc-muted); margin: 0; }
.nc-site .pr-mock .st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--nc-ink-2); white-space: nowrap; }
.nc-site .pr-mock .st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nc-faint); }
.nc-site .pr-mock .st.ok::before { background: var(--nc-ok); }
.nc-site .pr-mock .st.new::before { background: var(--nc-navy); }
.nc-site .pr-mock .st.sent::before { background: #4b8fe0; }
.nc-site .fake-btn { display: block; text-align: center; background: var(--nc-navy); color: #fff; border-radius: 999px; padding: 12px 16px; font-size: 15px; font-weight: 700; }
.nc-site .pr-v-quote, .nc-site .pr-v-timeline, .nc-site .pr-v-visit, .nc-site .pr-v-dealers, .nc-site .pr-v-cut, .nc-site .pr-v-wa, .nc-site .pr-v-funnel, .nc-site .pr-v-inbox { max-width: 460px; margin-left: auto; }

/* quote */
.nc-site .pr-v-quote { padding: 24px 24px 0 0; }
.nc-site .pr-v-quote .pr-mock.back { position: absolute; z-index: 0; top: 0; right: 0; left: 24px; bottom: 56px; background: var(--nc-paper-2); box-shadow: 0 0 0 1px var(--nc-line); }
.nc-site .pr-v-quote .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: var(--nc-panel); border-radius: 12px; padding: 4px; margin: 4px 0; }
.nc-site .pr-v-quote .seg span { padding: 8px 6px; text-align: center; font-size: 13.5px; font-weight: 700; border-radius: 9px; color: var(--nc-ink-2); }
.nc-site .pr-v-quote .seg .on { background: var(--nc-navy); color: #fff; }
.nc-site .pr-v-quote .seg i { display: block; font-style: normal; font-size: 11px; font-weight: 600; opacity: .8; }
.nc-site .pr-v-quote .ln { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--nc-line); }
.nc-site .pr-v-quote .ln b, .nc-site .pr-v-quote .tot b { color: var(--nc-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nc-site .pr-v-quote .tot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 4px; }
.nc-site .pr-v-quote .big { font-size: 36px; font-weight: 900; letter-spacing: -.03em; line-height: 1; }

/* follow-up timeline */
.nc-site .pr-v-timeline ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; position: relative; }
.nc-site .pr-v-timeline ol::before { content: ""; position: absolute; left: 19px; top: 24px; bottom: 24px; border-left: 2px dashed var(--nc-line-2); }
.nc-site .pr-v-timeline li { position: relative; display: grid; grid-template-columns: 12px 64px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--nc-paper-2); border-radius: 12px; padding: 14px 14px; }
.nc-site .pr-v-timeline li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--nc-navy); }
.nc-site .pr-v-timeline li.sun::before { background: #e8b400; } .nc-site .pr-v-timeline li.sky::before { background: #4b8fe0; } .nc-site .pr-v-timeline li.rose::before { background: #e5654a; }
.nc-site .pr-v-timeline .d { font-size: 13px; font-weight: 700; color: var(--nc-muted); white-space: nowrap; }
.nc-site .pr-v-timeline b { font-size: 15px; color: var(--nc-ink); font-weight: 700; }

/* site photos + visit */
.nc-site .pr-v-visit .photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.nc-site .pr-v-visit .photos span { aspect-ratio: 4 / 3; border-radius: 10px; background: var(--nc-paper-2); box-shadow: inset 0 0 0 1px var(--nc-line); display: grid; place-items: center; color: var(--nc-faint); }
.nc-site .pr-v-visit .photos svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nc-site .pr-v-visit .days, .nc-site .pr-v-visit .slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nc-site .pr-v-visit .days span, .nc-site .pr-v-visit .slots span { text-align: center; padding: 10px 8px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--nc-line-2); font-size: 14px; font-weight: 700; color: var(--nc-ink); font-variant-numeric: tabular-nums; }
.nc-site .pr-v-visit .days .on, .nc-site .pr-v-visit .slots .on { background: var(--nc-navy); color: #fff; box-shadow: none; }

/* dealers */
.nc-site .pr-v-dealers ul { list-style: none; margin: 0 0 0 18px; padding: 8px 0 0 20px; border-left: 2px dashed var(--nc-line-2); display: grid; gap: 10px; }
.nc-site .pr-v-dealers li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; background: var(--nc-paper-2); border-radius: 12px; padding: 12px; }
.nc-site .pr-v-dealers .mono { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: var(--nc-ink); }
.nc-site .pr-v-dealers .mono.sky { background: #d3e2ff; } .nc-site .pr-v-dealers .mono.sun { background: #ffe8a3; } .nc-site .pr-v-dealers .mono.mint { background: #c9eed6; }
.nc-site .pr-v-dealers b { font-size: 15px; color: var(--nc-ink); }
.nc-site .pr-v-dealers .chip { grid-row: 1 / 3; grid-column: 3; font-size: 13px; font-weight: 800; background: #fff; border-radius: 999px; padding: 4px 10px; box-shadow: inset 0 0 0 1.5px var(--nc-line-2); color: var(--nc-ink); font-variant-numeric: tabular-nums; }
.nc-site .pr-v-dealers .st { grid-column: 2; font-weight: 600; color: var(--nc-muted); }

/* cut list */
.nc-site .pr-v-cut table { width: 100%; border-collapse: collapse; }
.nc-site .pr-v-cut th { text-align: left; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--nc-muted); padding: 8px 0; border-bottom: 1px solid var(--nc-line); }
.nc-site .pr-v-cut td { padding: 12px 0; border-bottom: 1px solid var(--nc-line-soft); font-size: 15px; color: var(--nc-ink); }
.nc-site .pr-v-cut th:not(:first-child), .nc-site .pr-v-cut td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 12px; }
.nc-site .pr-v-cut tr:last-child td { border-bottom: 0; }

/* WhatsApp */
.nc-site .pr-v-wa .pr-mock { background: #e7f6ec; gap: 10px; }
.nc-site .pr-v-wa .bub { max-width: 86%; border-radius: 14px; padding: 10px 12px; background: #fff; box-shadow: 0 1px 1px rgba(28,43,54,.08); }
.nc-site .pr-v-wa .bub p { margin: 0; font-size: 15px; color: var(--nc-ink); }
.nc-site .pr-v-wa .me { margin-left: auto; background: #d9fdd3; border-top-right-radius: 4px; }
.nc-site .pr-v-wa .you { border-top-left-radius: 4px; }
.nc-site .pr-v-wa .lnk { display: flex; gap: 10px; align-items: center; background: rgba(28,43,54,.05); border-radius: 10px; padding: 6px; margin-bottom: 8px; }
.nc-site .pr-v-wa .lnk img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; flex: none; }
.nc-site .pr-v-wa .lnk b { display: block; font-size: 14px; color: var(--nc-ink); }
.nc-site .pr-v-wa .lnk span { display: block; font-size: 12.5px; color: var(--nc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-site .pr-v-wa .lnk div { min-width: 0; }

/* embed: browser frame + the code card overlapping its corner */
.nc-site .pr-v-embed { padding-bottom: 48px; }
.nc-site .pr-v-embed .nc-window img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10.5; object-fit: cover; background: var(--nc-panel); }
.nc-site .pr-shotwrap { position: relative; }
.nc-site .pr-shotwrap .fake-btn { position: absolute; right: 16px; top: 16px; padding: 10px 18px; font-size: 14px; box-shadow: var(--nc-sh-2); }
.nc-site .pr-float { position: absolute; z-index: 2; left: -32px; bottom: 0; width: min(420px, 88%); }
.nc-site .pr-float .pr-code { padding: 16px; }
.nc-site .pr-float .pr-code pre { font-size: 12.5px; }

/* own domain: the address bar with a lock + the one DNS record */
.nc-site .pr-v-domain .url { display: inline-flex; align-items: center; gap: 6px; }
.nc-site .pr-lock { width: 12px; height: 12px; fill: none; stroke: #1f8a5b; stroke-width: 2.2; stroke-linecap: round; flex: none; }
.nc-site .pr-dns { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 12px; background: #fff; border-radius: 16px; box-shadow: var(--nc-sh-2); padding: 16px 18px; font-size: 14px; }
.nc-site .pr-dns span { font: 600 13.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--nc-ink); }
.nc-site .pr-dns b { font-size: 12px; letter-spacing: .06em; color: var(--nc-muted); }
.nc-site .pr-dns code { background: #15202e; color: #e6edf5; border-radius: 10px; padding: 9px 12px; font: 13px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* the copyable embed line */
.nc-site .pr-code { background: #fff; border-radius: 16px; box-shadow: var(--nc-sh-2); padding: 24px; margin-top: 32px; }
.nc-site .pr-float .pr-code { margin: 0; }
.nc-site .pr-code .hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.nc-site .pr-code .hd b { font-size: 15px; font-weight: 700; color: var(--nc-ink); }
.nc-site .pr-code pre { margin: 0; background: #15202e; color: #e6edf5; border-radius: 12px; padding: 14px 16px; font: 13.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all; }
.nc-site .pr-code pre code { background: none; padding: 0; color: inherit; font: inherit; }
.nc-site .pr-code .cap { font-size: 14px; line-height: 1.5; color: var(--nc-muted); margin: 12px 0 0; }
.nc-site .pr-copy { font: 700 13px/1 var(--nc-sans); height: 32px; padding: 0 14px; border-radius: 999px; border: 0; background: #fff; color: var(--nc-ink); box-shadow: inset 0 0 0 1.5px var(--nc-line-2); cursor: pointer; flex: none; transition: box-shadow .2s; }
.nc-site .pr-copy:hover { box-shadow: inset 0 0 0 1.5px var(--nc-ink); }

/* AR phone + phone/tablet frames */
.nc-site .pr-phone.land { width: 100%; max-width: 500px; aspect-ratio: 2 / 1; margin: 0 0 0 auto; }
.nc-site .pr-phone { position: relative; width: 260px; aspect-ratio: 1 / 2; border: 10px solid var(--nc-navy); border-radius: 36px; overflow: hidden; background: var(--nc-panel); box-shadow: var(--nc-sh-2); margin: 0 auto; }
.nc-site .pr-phone img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nc-site .pr-phone .pill { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 10px 16px; font-size: 14px; font-weight: 700; color: var(--nc-ink); box-shadow: var(--nc-sh-2); white-space: nowrap; }
.nc-site .pr-phone .pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nc-site .pr-v-shot { padding-bottom: 24px; }
.nc-site .pr-v-shot .nc-window img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10.5; object-fit: cover; object-position: top; background: var(--nc-panel); }
.nc-site .pr-tablet { border: 14px solid var(--nc-navy); border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--nc-sh-2); background: var(--nc-panel); }
.nc-site .pr-tablet img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.nc-site .pr-phone.sm { position: absolute; z-index: 2; right: -16px; bottom: 0; width: 132px; border-width: 6px; border-radius: 22px; margin: 0; }
.nc-site .pr-phone.sm img { object-position: top; }
.nc-site .pr-v-shot .pr-note { position: absolute; left: 4%; bottom: -40px; margin: 0; }
.nc-site .pr-v-shot .pr-note svg { transform: scaleY(-1) rotate(8deg); }

/* 3D window on the 3D-configurator page */
.nc-site .pr-v-3d .nc-stage { position: relative; height: 420px; }
.nc-site .pr-chips { position: absolute; left: 16px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 6px; max-width: 60%; }
.nc-site .pr-chips span { background: #fff; border-radius: 999px; padding: 6px 10px; font-size: 13px; font-weight: 700; color: var(--nc-ink); box-shadow: var(--nc-sh-1); }
.nc-site .pr-stats { display: flex; gap: 32px; margin-top: 16px; }
.nc-site .pr-stats b { display: block; font-family: var(--nc-display); font-weight: 900; font-size: 28px; letter-spacing: -.04em; color: var(--nc-ink); line-height: 1.1; }
.nc-site .pr-stats span { font-size: 14px; color: var(--nc-muted); }

/* results funnel */
.nc-site .pr-funnel { display: grid; gap: 20px; }
.nc-site .pr-funnel .bars { display: grid; gap: 12px; }
.nc-site .pr-funnel .bars > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 14.5px; }
.nc-site .pr-funnel .bars > div::after { content: ""; flex: 0 0 100%; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--pr-c, var(--nc-navy)) var(--w), var(--nc-paper-2) var(--w)); }
.nc-site .pr-funnel .bars > div:nth-child(2) { --pr-c: #1d5aa6; } .nc-site .pr-funnel .bars > div:nth-child(3) { --pr-c: #3d93c9; } .nc-site .pr-funnel .bars > div:nth-child(4) { --pr-c: #38c3cb; }
.nc-site .pr-funnel .bars span { color: var(--nc-ink-2); }
.nc-site .pr-funnel .bars b { color: var(--nc-ink); font-variant-numeric: tabular-nums; }
.nc-site .pr-funnel .kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nc-site .pr-funnel .kpi div { background: var(--nc-paper-2); border-radius: 12px; padding: 12px 14px; }
.nc-site .pr-funnel .kpi b { display: block; font-size: 24px; font-weight: 900; letter-spacing: -.03em; color: var(--nc-ink); font-variant-numeric: tabular-nums; }
.nc-site .pr-funnel .kpi span { font-size: 13px; color: var(--nc-muted); }

/* request inbox */
.nc-site .pr-v-inbox ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nc-site .pr-v-inbox li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; background: var(--nc-paper-2); border-radius: 12px; padding: 10px; }
.nc-site .pr-v-inbox img { grid-row: 1 / 3; width: 48px; height: 48px; object-fit: cover; border-radius: 10px; }
.nc-site .pr-v-inbox li > div { grid-row: 1 / 3; min-width: 0; }
.nc-site .pr-v-inbox li b { display: block; font-size: 15px; color: var(--nc-ink); }
.nc-site .pr-v-inbox li div span { font-size: 13px; color: var(--nc-muted); }
.nc-site .pr-v-inbox em { font-style: normal; font-weight: 800; color: var(--nc-ink); justify-self: end; font-variant-numeric: tabular-nums; }
.nc-site .pr-v-inbox .st { justify-self: end; }

/* ---- features index ------------------------------------------------------------------------ */
.nc-site .pr-map { list-style: none; margin: 0 0 0 auto; padding: 0; display: grid; gap: 20px; position: relative; max-width: 420px; }
.nc-site .pr-map::before { content: ""; position: absolute; left: 39px; top: 32px; bottom: 32px; border-left: 2px dashed var(--nc-line-2); }
.nc-site .pr-map li { position: relative; display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 16px; padding: 16px 20px; box-shadow: var(--nc-sh-1); }
.nc-site .pr-map b { display: block; font-size: 17px; font-weight: 800; color: var(--nc-ink); }
.nc-site .pr-map span:not(.pr-ico) { font-size: 14.5px; line-height: 1.45; color: var(--nc-muted); }
.nc-site .pr-stages { display: grid; gap: 64px; }
.nc-site .pr-stage-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; margin: 0 0 24px; }
.nc-site .pr-stage-hd .pr-h2 { margin: 0; flex: 0 0 100%; }
.nc-site .pr-stage-hd p { margin: 0; font-size: 17px; color: var(--nc-muted); }
.nc-site .pr-stage-hd .nc-link { margin-left: auto; font-size: 15px; }
.nc-site .pr-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.nc-site .pr-wide > div:first-child { display: flex; flex-direction: column; }
.nc-site .pr-wide .pr-mock { box-shadow: none; background: #fff; padding: 0; }
.nc-site .pr-wide .pr-cap { text-align: left; }
.nc-site .pr-plan { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.nc-site .pr-plan .pr-h2 { margin-bottom: 16px; }
.nc-site .pr-plan-p { font-size: 17px; line-height: 1.6; color: var(--nc-ink-2); margin: 0 0 24px; max-width: 46ch; }
.nc-site .pr-price { display: flex; align-items: baseline; gap: 8px; }
.nc-site .pr-price b { font-family: var(--nc-display); font-size: 64px; font-weight: 900; letter-spacing: -.045em; line-height: 1; color: var(--nc-ink); }
.nc-site .pr-price span { font-size: 18px; font-weight: 600; color: var(--nc-muted); }
.nc-site .pr-plan .pr-small { margin: 12px 0 16px; }
.nc-site .pr-plan-r { background: var(--nc-paper-2); border-radius: 20px; padding: var(--pr-pad); }

/* ---- solutions index ----------------------------------------------------------------------- */
.nc-site .pr-sols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pr-gap); }
.nc-site .pr-sol { display: flex; flex-direction: column; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--nc-sh-1); color: inherit; text-decoration: none; transition: transform .25s var(--nc-ease), box-shadow .25s var(--nc-ease); }
.nc-site .pr-sol:hover { transform: translateY(-3px); box-shadow: var(--nc-sh-2); }
.nc-site .pr-sol img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--nc-panel); }
.nc-site .pr-sol .b { display: flex; flex-direction: column; flex: 1; padding: var(--pr-pad); }
.nc-site .pr-sol .pr-card-top { justify-content: flex-start; align-items: center; margin-bottom: 12px; }
.nc-site .pr-sol h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--nc-ink); margin: 0; }
.nc-site .pr-sol p { font-size: 16px; line-height: 1.55; color: var(--nc-muted); margin: 0 0 16px; }
.nc-site .pr-unsure { margin: 40px 0 0; text-align: center; font-size: 17px; color: var(--nc-ink-2); }

/* ---- integrations ---------------------------------------------------------------------------- */
.nc-site .pr-oneline { margin: 0 0 32px; max-width: 640px; }
.nc-site .pr-pill { display: flex; align-items: center; gap: 12px; background: #15202e; border-radius: 14px; padding: 8px 8px 8px 18px; }
.nc-site .pr-pill code { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #e6edf5; background: none; padding: 0; }
.nc-site .pr-pill .pr-copy { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
.nc-site .pr-pill .pr-copy:hover { background: rgba(255,255,255,.2); }
.nc-site .pr-oneline .pr-small { margin: 8px 0 0; }
.nc-site .pr .mono { width: 48px; height: 48px; flex: none; border-radius: 12px; background: var(--nc-paper-2); box-shadow: inset 0 0 0 1px var(--nc-line); display: grid; place-items: center; font-weight: 800; font-size: 17px; letter-spacing: -.02em; color: var(--nc-ink); }
.nc-site .pr-method { font: 600 13px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--nc-panel); color: var(--nc-ink-2); border-radius: 999px; padding: 6px 10px; text-align: right; }
.nc-site .pr-alt2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pr-gap); }
.nc-site .pr-alt2 .pr-card { box-shadow: 0 0 0 1px var(--nc-line); }
.nc-site .pr-plats { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.nc-site .pr-plats a { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center; background: #fff; border-radius: 14px; padding: 12px 16px; box-shadow: var(--nc-sh-1); text-decoration: none; color: var(--nc-ink); transition: box-shadow .2s; }
.nc-site .pr-plats a:hover { box-shadow: var(--nc-sh-2); }
.nc-site .pr-plats .mono { width: 36px; height: 36px; font-size: 14px; border-radius: 10px; grid-row: 1 / 3; }
.nc-site .pr-plats b { font-size: 16px; }
.nc-site .pr-plats .pr-method { background: none; padding: 0; text-align: left; font-size: 12px; color: var(--nc-muted); }

/* ---- the navy CTA band at the end of every product page ------------------------------------- */
@media (min-width: 961px) {
  .nc-site .pr .nc-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
  .nc-site .pr .nc-cta .nc-row { margin: 0; justify-content: flex-end; }
}

/* ---- focus ------------------------------------------------------------------------------------ */
.nc-site .pr a.pr-card:focus-visible, .nc-site .pr a.pr-sol:focus-visible, .nc-site .pr-plats a:focus-visible { outline: 3px solid var(--nc-marker); outline-offset: 3px; }

/* ---- responsive ------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .nc-site .pr-cards.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nc-site .pr-strip.n4, .nc-site .pr-strip.n5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nc-site .pr-phone.sm { display: none; }
}
@media (max-width: 960px) {
  .nc-site .pr-hero-grid, .nc-site .pr-split, .nc-site .pr-faq, .nc-site .pr-plan { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .nc-site .pr .pr-h1 { max-width: 20ch; }
  .nc-site .pr-hero-vis { max-width: 560px; }
  .nc-site .pr-v-quote, .nc-site .pr-v-timeline, .nc-site .pr-v-visit, .nc-site .pr-v-dealers, .nc-site .pr-v-cut, .nc-site .pr-v-wa, .nc-site .pr-v-funnel, .nc-site .pr-v-inbox { margin-left: 0; }
  .nc-site .pr-map-wrap, .nc-site .pr-hide-m { display: none; }
  .nc-site .pr-float { position: static; width: auto; margin-top: 16px; }
  .nc-site .pr-v-embed { padding-bottom: 0; }
  .nc-site .pr-v-shot { padding-bottom: 0; }
  .nc-site .pr-v-shot .pr-note { position: static; margin-top: 16px; }
  .nc-site .pr-cards, .nc-site .pr-cards.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nc-site .pr-wide { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .nc-site .pr-faq-side p { margin-top: -16px; }
}
@media (max-width: 900px) {
  .nc-site .pr-strip, .nc-site .pr-strip.n4, .nc-site .pr-strip.n5 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .nc-site .pr-strip li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; padding-top: 0; border-top: 0; font-size: 17px; }
}
@media (max-width: 760px) {
  .nc-site .pr-hl, .nc-site .pr-sols, .nc-site .pr-alt2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .nc-site .pr { --pr-gap: 16px; --pr-pad: 24px; }
  .nc-site .pr-cards, .nc-site .pr-cards.n2, .nc-site .pr-cards.n3, .nc-site .pr-cards.n4 { grid-template-columns: minmax(0, 1fr); }
  .nc-site .pr-ctas .nc-btn { flex: 1 1 100%; justify-content: center; }
  .nc-site .pr-head, .nc-site .pr-h2 { margin-bottom: 24px; }
  .nc-site .pr-mock { padding: 20px; }
  .nc-site .pr-v-quote { padding: 16px 16px 0 0; }
  .nc-site .pr-v-quote .pr-mock.back { left: 16px; }
  .nc-site .pr-v-quote .big { font-size: 30px; }
  .nc-site .pr-v-3d .nc-stage { height: 300px; }
  .nc-site .pr-chips { display: none; }
  .nc-site .pr-price b { font-size: 52px; }
  .nc-site .pr-stage-hd .nc-link { margin-left: 0; }
  .nc-site .pr-stages { gap: 48px; }
  /* before/after tables stack as cards */
  .nc-site .pr-prose table, .nc-site .pr-prose tbody, .nc-site .pr-prose tr, .nc-site .pr-prose td { display: block; width: auto; }
  .nc-site .pr-prose table { box-shadow: none; background: none; border-radius: 0; overflow: visible; }
  .nc-site .pr-prose thead { display: none; }
  .nc-site .pr-prose tr { background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px var(--nc-line); padding: 8px 16px; margin: 0 0 12px; }
  .nc-site .pr-prose td { border: 0; padding: 8px 0; }
  .nc-site .pr-prose td + td { border-top: 1px solid var(--nc-line-soft); }
  .nc-site .pr-prose table:not(.pr-ba) td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--nc-faint); margin-bottom: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .nc-site .pr-card, .nc-site .pr-sol, .nc-site .pr-card .go, .nc-site .pr-sol .go { transition: none; }
  .nc-site a.pr-card:hover, .nc-site .pr-sol:hover { transform: none; }
}