/* /next2: layered native-screen compositions and homepage story sections. Shared fonts, scaling and navigation stay authoritative. */
.collabit-next2 { --n2-ink:#122a44; --n2-green:#007b67; --n2-deep:#0b4a43; --n2-mint:#8fe0c6; --n2-line:#d7e5df; --n2-muted:#49635d; }

/* Shared prototype and mobile CSS give buttons a 48px minimum height without centring the label. */
.collabit-next2 main :is(.btn, .btn-main, a[class*="-button"], [class$="-actions"] > a) { align-content:center; }

/* Panels: an exact native crop in a white card, labelled underneath. */
.collabit-next2 .n2-panel { margin:0; padding:clamp(5px,1.1cqw,9px); background:#fff; border:1px solid var(--n2-line); border-radius:clamp(10px,1.8cqw,16px); box-shadow:0 22px 48px -26px #0f3b3680,0 2px 8px #0f3b3610; }
.collabit-next2 .n2-panel button, .collabit-next2 .n2-phone button { display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.collabit-next2 .n2-panel img { display:block; height:auto; max-width:none; border-radius:clamp(5px,1cqw,9px); }
.collabit-next2 .n2-panel figcaption, .collabit-next2 .n2-phone figcaption { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; padding:clamp(5px,1cqw,9px) 2px 1px; color:#123e37; font:600 clamp(10px,1.85cqw,14px)/1.25 'Work Sans',sans-serif; letter-spacing:-.005em; }
.collabit-next2 :is(.n2-panel,.n2-phone,.n2-window) small { padding:2px 8px; border-radius:99px; background:#fff3d4; color:#6e4c00; font:600 clamp(9px,1.5cqw,11px)/1.4 'Work Sans',sans-serif; white-space:nowrap; }
.collabit-next2 :is(.n2-panel,.n2-phone,.n2-window) button:focus-visible { outline:3px solid var(--n2-green); outline-offset:3px; border-radius:8px; }
@media (hover:hover) {
    .collabit-next2 .n2-panel, .collabit-next2 .n2-phone-frame { transition:transform .25s ease, box-shadow .25s ease; }
    .collabit-next2 .n2-panel:hover { transform:translateY(-3px); box-shadow:0 28px 54px -24px #0f3b3699,0 2px 8px #0f3b3614; }
}

/* Phone: a plain device outline around a true mobile capture. */
.collabit-next2 .n2-phone { margin:0; }
.collabit-next2 .n2-phone-frame { display:block; position:relative; padding:4.2%; background:#111917; border-radius:17% / 8%; box-shadow:0 26px 50px -24px #0f3b36a6, inset 0 0 0 2px #2b3633; }
.collabit-next2 .n2-phone-island { position:absolute; z-index:2; top:5.2%; left:50%; width:30%; height:2.6%; border-radius:99px; background:#111917; transform:translateX(-50%); }
.collabit-next2 .n2-phone-screen { display:block; overflow:hidden; aspect-ratio:9 / 19; border-radius:13% / 6%; background:#fff; }
.collabit-next2 .n2-phone-screen img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; padding-top:9%; background:#fff; }
.collabit-next2 .n2-phone figcaption { justify-content:center; text-align:center; }

/* Hero / showcase stage: people photograph behind, product panels in front. */
.collabit-next2 .n2-collage { width:100%; }
.collabit-next2 .n2-stage { position:relative; container-type:inline-size; aspect-ratio:1.16; }
.collabit-next2 .n2-photo { position:absolute; left:0; top:8%; width:50%; height:72%; overflow:hidden; border-radius:4cqw; box-shadow:0 30px 60px -36px #0f3b36aa; }
.collabit-next2 .n2-photo img { width:100%; height:100%; object-fit:cover; filter:saturate(.92); }
.collabit-next2 .n2-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(200deg,#0b4a4300 35%,#0b4a4359); }
.collabit-next2 .n2-stage > :is(.n2-panel,.n2-phone) { position:absolute; }
.collabit-next2 .n2-stage .n2-main { top:0; right:0; z-index:2; }
.collabit-next2 .n2-stage .n2-main img { width:min(74cqw, calc(54cqw * var(--r))); }
.collabit-next2 .n2-stage .n2-a { left:3cqw; bottom:3cqw; z-index:3; }
.collabit-next2 .n2-stage .n2-a img { width:min(54cqw, calc(30cqw * var(--r))); }
.collabit-next2 .n2-stage .n2-b { right:0; bottom:0; z-index:4; }
.collabit-next2 .n2-stage .n2-b img { width:min(40cqw, calc(30cqw * var(--r))); }
.collabit-next2 .n2-stage .n2-phone { right:2cqw; bottom:-2cqw; z-index:5; width:23cqw; }
.collabit-next2 .n2-collage-with-phone .n2-a { left:0; }
.collabit-next2 .n2-collage-with-phone .n2-main img { width:min(70cqw, calc(54cqw * var(--r))); }
.collabit-next2 .no-photo .n2-stage .n2-a { left:0; }
.collabit-next2 .n2-note { margin:22px 0 0; color:var(--n2-muted); font:400 12px/1.6 'Work Sans',sans-serif; }

/* Solution heroes: bigger stage, no legacy frame or mask. */
.collabit-next2 :is(.ai-alt-hero-graphic,.service-hero-visual):has(> .n2-collage) { width:100%; max-width:100%; margin:0; padding:0; transform:none; background:transparent; border:0; border-radius:0; overflow:visible; box-shadow:none; }
.collabit-next2 .n2-hero { margin-top:14px; }

/* Workflow and onboarding screens. */
.collabit-next2 .n2-window { margin:0; overflow:hidden; background:#fff; border:1px solid var(--n2-line); border-radius:16px; box-shadow:0 30px 60px -32px #0f3b3680; }
.collabit-next2 .n2-window-bar { display:flex; align-items:center; gap:6px; padding:11px 16px; background:#f3f7f5; border-bottom:1px solid #e1ebe7; color:var(--n2-muted); font:500 12px/1 'Work Sans',sans-serif; }
.collabit-next2 .n2-window-bar i { width:9px; height:9px; border-radius:50%; background:#d3ddd9; }
.collabit-next2 .n2-window-bar span { margin-left:10px; }
.collabit-next2 .n2-window button { display:grid; place-items:center; width:100%; min-height:300px; padding:16px; border:0; background:#fff; cursor:zoom-in; }
.collabit-next2 .n2-window img { display:block; width:auto; max-width:100%; height:auto; max-height:430px; }
.collabit-next2 .n2-window figcaption { padding:0 16px 12px; }
.collabit-next2 .n2-window-phone { container-type:inline-size; width:min(230px,100%); margin:0 auto; }
.collabit-next2 .review-onboarding-panel .n2-window { max-width:640px; margin:12px auto 0; }

/* Shared section heading. */
.collabit-next2 .n2-heading { max-width:780px; margin:0 0 44px; }
.collabit-next2 .n2-heading h2 { margin:0 0 20px; color:var(--n2-ink); font:600 46px/1.1 'Work Sans',sans-serif; letter-spacing:-.035em; }
.collabit-next2 .n2-heading h2 span { color:var(--n2-green); }
.collabit-next2 .n2-heading p:not(.dev-home-eyebrow) { margin:0; color:#3c5263; font:400 18px/1.7 'Work Sans',sans-serif; }

/* Home hero copy. */
.collabit-next2 .n2-hero-eyebrow { margin:0 0 18px !important; color:var(--n2-mint) !important; font:600 14px/1.3 'Work Sans',sans-serif !important; letter-spacing:.16em; text-transform:uppercase; }

/* Sections pad their containers: the shared prototype CSS zeroes section padding. */
.collabit-next2 .n2-sectors > .review-container { padding:112px 0 96px; }
.collabit-next2 .n2-journey > .review-container { padding:96px 0 104px; }
.collabit-next2 .n2-switch-banner > .review-container { padding:88px 0; }

/* Industry showcase. */
.collabit-next2 .n2-sectors { background:linear-gradient(180deg,#f3f8f6 0,#fff 70%); font-family:'Work Sans',sans-serif; }
.collabit-next2 .n2-sector-list { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 40px; }
.collabit-next2 .n2-sector-list button { padding:13px 22px; border:1px solid #c8dcd4; border-radius:99px; background:#fff; color:#123e37; font:600 16px/1.2 'Work Sans',sans-serif; cursor:pointer; }
.collabit-next2 .n2-sector-list button:hover { border-color:var(--n2-green); }
.collabit-next2 .n2-sector-list [aria-selected="true"] { background:var(--n2-deep); border-color:var(--n2-deep); color:#fff; }
.collabit-next2 .n2-sector-list button:focus-visible { outline:3px solid var(--n2-green); outline-offset:3px; }
.collabit-next2 .n2-sector-tabs [hidden] { display:none !important; }
.collabit-next2 .n2-sector-panel { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; align-items:center; }
.collabit-next2 .n2-sector-panel:focus-visible { outline:none; }
.collabit-next2 .n2-sector-copy h3 { margin:0 0 18px; color:var(--n2-ink); font:600 34px/1.15 'Work Sans',sans-serif; letter-spacing:-.025em; }
.collabit-next2 .n2-sector-copy > p { margin:0 0 26px; color:#3c5263; font-size:18px; line-height:1.7; }
.collabit-next2 .n2-sector-copy ol { counter-reset:n2; display:grid; gap:12px; margin:0 0 30px; padding:0; list-style:none; }
.collabit-next2 .n2-sector-copy li { counter-increment:n2; display:flex; align-items:center; gap:14px; color:#123e37; font:500 16px/1.4 'Work Sans',sans-serif; }
.collabit-next2 .n2-sector-copy li::before { content:counter(n2,decimal-leading-zero); display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:50%; background:#e3f2ec; color:var(--n2-green); font-size:12px; font-weight:700; }
.collabit-next2 .n2-link { display:inline-flex; gap:10px; color:#006c5d; font:600 17px/1.3 'Work Sans',sans-serif; }
.collabit-next2 .n2-link:hover { text-decoration:underline; }

/* Enquiry to invoice. */
.collabit-next2 .n2-journey { font-family:'Work Sans',sans-serif; }
.collabit-next2 .n2-journey-panel { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:44px; align-items:center; min-height:520px; padding:38px; background:#f0f7f4; border:1px solid var(--n2-line); border-radius:22px; }
.collabit-next2 .n2-journey-copy h3 { margin:12px 0 16px; color:var(--n2-ink); font:600 30px/1.2 'Work Sans',sans-serif; letter-spacing:-.02em; }
.collabit-next2 .n2-journey-copy p:not(.dev-home-eyebrow) { color:#3c5263; font-size:17px; line-height:1.7; }
.collabit-next2 .n2-journey .review-example-note { margin-top:18px; }
.collabit-next2 .n2-pair { position:relative; container-type:inline-size; padding:0 0 12cqw; }
.collabit-next2 .n2-pair-main { position:relative; z-index:1; width:max-content; max-width:100%; }
.collabit-next2 .n2-pair-main img { width:min(86cqw, calc(54cqw * var(--r))); }
.collabit-next2 .n2-pair:not(:has(.n2-pair-second, .n2-pair-phone)) { padding-bottom:0; }
.collabit-next2 .n2-pair:not(:has(.n2-pair-second, .n2-pair-phone)) .n2-pair-main img { width:min(96cqw, calc(66cqw * var(--r))); }
.collabit-next2 .n2-pair-second { position:absolute; right:0; bottom:0; z-index:2; }
.collabit-next2 .n2-pair-second img { width:min(48cqw, calc(34cqw * var(--r))); }
.collabit-next2 .n2-pair-phone { position:absolute; right:3cqw; bottom:-2cqw; z-index:3; width:24cqw; }
.collabit-next2 .n2-pair.has-phone .n2-pair-main img { width:min(70cqw, calc(54cqw * var(--r))); }

/* Switching: Elle's converging-systems concept, without third-party logos. */
.collabit-next2 .n2-switch-banner { background:radial-gradient(120% 140% at 0% 0%,#125d54 0,#0b4a43 46%,#083a35 100%); color:#fff; font-family:'Work Sans',sans-serif; }
.collabit-next2 .n2-switch-banner-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:72px; align-items:center; }
.collabit-next2 .n2-switch-banner .dev-home-eyebrow { color:var(--n2-mint); }
.collabit-next2 .n2-switch-banner h2 { margin:0 0 22px; color:#fff; font:600 46px/1.1 'Work Sans',sans-serif; letter-spacing:-.035em; }
.collabit-next2 .n2-switch-banner h2 span { color:var(--n2-mint); }
.collabit-next2 .n2-switch-banner p:not(.dev-home-eyebrow) { margin:0 0 30px; color:#d9ece6; font-size:18px; line-height:1.7; }
.collabit-next2 .n2-switch-banner .btn { display:inline-flex; align-items:center; gap:14px; }
.collabit-next2 .n2-switch-graphic { display:block; width:100%; height:auto; overflow:visible; }
.collabit-next2 .n2-switch-hero-visual { max-width:600px; margin-left:auto; }

@media (max-width:900px) {
    .collabit-next2 .n2-heading { margin-bottom:28px; }
    .collabit-next2 :is(.n2-heading,.n2-switch-banner) h2 { font-size:32px; }
    .collabit-next2 .n2-heading p:not(.dev-home-eyebrow), .collabit-next2 .n2-sector-copy > p { font-size:16px; }
    .collabit-next2 :is(.n2-sectors,.n2-journey) > .review-container { padding:64px 0; }
    .collabit-next2 .n2-sector-list { flex-wrap:nowrap; overflow-x:auto; margin:0 -16px 28px; padding:2px 16px 8px; scrollbar-width:none; }
    .collabit-next2 .n2-sector-list button { flex:none; padding:11px 17px; font-size:14px; }
    .collabit-next2 .n2-sector-panel, .collabit-next2 .n2-journey-panel, .collabit-next2 .n2-switch-banner-grid { grid-template-columns:1fr; gap:30px; }
    .collabit-next2 .n2-sector-copy h3 { font-size:26px; }
    .collabit-next2 .n2-sector-copy li { font-size:15px; }
    .collabit-next2 .n2-stage { aspect-ratio:1 / 1.02; }
    .collabit-next2 .n2-photo { width:56%; height:64%; }
    .collabit-next2 .n2-stage .n2-main img { width:min(86cqw, calc(58cqw * var(--r))); }
    .collabit-next2 .n2-stage .n2-a img { width:min(52cqw, calc(30cqw * var(--r))); }
    .collabit-next2 .n2-collage-with-phone .n2-stage .n2-a img { width:min(60cqw, calc(32cqw * var(--r))); }
    .collabit-next2 .n2-stage .n2-b img { width:min(46cqw, calc(34cqw * var(--r))); }
    .collabit-next2 .n2-stage .n2-phone { width:28cqw; }
    .collabit-next2 .n2-journey-panel { min-height:0; padding:22px 16px; }
    .collabit-next2 .n2-journey-copy h3 { font-size:24px; }
    .collabit-next2 .n2-switch-banner > .review-container { padding:60px 0; }
    .collabit-next2 .n2-window button { min-height:0; padding:10px; }
    .collabit-next2 .n2-window img { max-height:360px; }
}
/* /next3: one journey stepper replaces several stacked homepage sections. */
.collabit-next2 .n3-journey { font-family:'Work Sans',sans-serif; background:linear-gradient(180deg,#fff 0,#f3f8f6 100%); }
.collabit-next2 .n3-journey > .review-container { padding:100px 0 88px; }
.collabit-next2 .n2-sectors > .review-container { padding:88px 0 80px; }
.collabit-next2 .n3-stepper [hidden] { display:none !important; }
.collabit-next2 .n3-track { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0 0 28px; }
.collabit-next2 .n3-track::before { content:''; position:absolute; top:27px; left:12.5%; right:12.5%; height:2px; background:linear-gradient(90deg,#c9ddd5 0 50%,#8fe0c6 50% 100%); }
.collabit-next2 .n3-track button { position:relative; display:grid; justify-items:center; align-content:start; gap:6px; padding:0 14px 16px; border:0; border-radius:14px; background:none; color:#123e37; text-align:center; font-family:'Work Sans',sans-serif; cursor:pointer; }
.collabit-next2 .n3-track button:focus-visible { outline:3px solid var(--n2-green); outline-offset:2px; }
.collabit-next2 .n3-node { position:relative; z-index:1; display:grid; place-items:center; width:56px; height:56px; margin-bottom:8px; border:2px solid #c9ddd5; border-radius:50%; background:#fff; color:var(--n2-green); font:700 20px/1 'Work Sans',sans-serif; transition:background .2s, color .2s, box-shadow .2s; }
.collabit-next2 .n3-track [data-n3-ai] .n3-node::after { content:'AI'; position:absolute; top:-8px; right:-16px; padding:2px 7px; border-radius:99px; background:var(--n2-mint); color:var(--n2-deep); font:700 10px/1.3 'Work Sans',sans-serif; }
.collabit-next2 .n3-track b { font:600 18px/1.25 'Work Sans',sans-serif; }
.collabit-next2 .n3-track small { color:var(--n2-muted); font:400 14px/1.4 'Work Sans',sans-serif; }
.collabit-next2 .n3-track [aria-selected="true"] .n3-node { background:var(--n2-deep); border-color:var(--n2-deep); color:#fff; box-shadow:0 0 0 7px #0b4a431c; }
.collabit-next2 .n3-track [aria-selected="true"] b { color:var(--n2-deep); }
.collabit-next2 .n3-track button:hover .n3-node { border-color:var(--n2-green); }
.collabit-next2 .n3-panel { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:48px; align-items:center; min-height:600px; padding:40px; background:#fff; border:1px solid var(--n2-line); border-radius:24px; box-shadow:0 30px 70px -50px #0f3b3666; }
.collabit-next2 .n3-panel:focus-visible { outline:none; }
.collabit-next2 .n3-copy h3 { margin:12px 0 16px; color:var(--n2-ink); font:600 32px/1.15 'Work Sans',sans-serif; letter-spacing:-.025em; }
.collabit-next2 .n3-copy > p:not(.dev-home-eyebrow) { margin:0 0 20px; color:#3c5263; font-size:17px; line-height:1.7; }
.collabit-next2 .n3-copy ul { display:grid; gap:10px; margin:0 0 28px; padding:0; list-style:none; }
.collabit-next2 .n3-copy li { position:relative; padding-left:30px; color:#123e37; font:500 15px/1.45 'Work Sans',sans-serif; }
.collabit-next2 .n3-copy li::before { content:''; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%; background:#e3f2ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10 3 3 5-6' fill='none' stroke='%23007b67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.collabit-next2 .n3-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; }
.collabit-next2 .n3-next { padding:11px 20px; border:1px solid var(--n2-deep); border-radius:99px; background:#fff; color:var(--n2-deep); font:600 15px/1.2 'Work Sans',sans-serif; cursor:pointer; }
.collabit-next2 .n3-next:hover { background:var(--n2-deep); color:#fff; }
.collabit-next2 .n3-next:focus-visible { outline:3px solid var(--n2-green); outline-offset:3px; }
.collabit-next2 .n3-visual { min-width:0; }
.collabit-next2 .n3-visual-switch .n2-switch-graphic { max-width:600px; margin:0 auto; }
.collabit-next2 .n3-flow-chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; padding:0; list-style:none; }
.collabit-next2 .n3-flow-chips li { display:flex; align-items:center; gap:8px; padding:7px 14px; border:1px solid #cfe0d9; border-radius:99px; background:#f6faf8; color:#123e37; font:600 13px/1.2 'Work Sans',sans-serif; }
.collabit-next2 .n3-flow-chips li:not(:last-child)::after { content:'\2192'; color:var(--n2-green); }
.collabit-next2 .n3-solution-links { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:48px 0 0; padding-top:28px; border-top:1px solid var(--n2-line); }
.collabit-next2 .n3-solution-links span { margin-right:8px; color:var(--n2-green); font:600 13px/1.2 'Work Sans',sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.collabit-next2 .n3-solution-links a { padding:8px 15px; border:1px solid var(--n2-line); border-radius:99px; background:#fff; color:#123e37; font:500 14px/1.2 'Work Sans',sans-serif; }
.collabit-next2 .n3-solution-links a:hover { border-color:var(--n2-green); color:var(--n2-green); }
@media (max-width:900px) {
    .collabit-next2 .n3-journey > .review-container, .collabit-next2 .n2-sectors > .review-container { padding:60px 0; }
    .collabit-next2 .n3-track { margin-bottom:18px; }
    .collabit-next2 .n3-track::before { top:20px; }
    .collabit-next2 .n3-track button { padding:0 4px 10px; gap:4px; }
    .collabit-next2 .n3-node { width:42px; height:42px; margin-bottom:4px; font-size:16px; }
    .collabit-next2 .n3-track [data-n3-ai] .n3-node::after { right:-12px; font-size:9px; }
    .collabit-next2 .n3-track b { font-size:13px; }
    .collabit-next2 .n3-track small { display:none; }
    .collabit-next2 .n3-panel { grid-template-columns:1fr; gap:26px; min-height:0; padding:24px 16px; }
    .collabit-next2 .n3-copy h3 { font-size:25px; }
    .collabit-next2 .n3-copy > p:not(.dev-home-eyebrow) { font-size:16px; }
    .collabit-next2 .n3-solution-links { margin-top:32px; }
}
@media (prefers-reduced-motion:reduce) {
    .collabit-next2 .n2-panel, .collabit-next2 .n2-phone-frame { transition:none; }
}