/* /nn/ design lab: variant chip + lab index page. Owned by the chrome agent. */

/* Variant chip (fixed, bottom right, low-key) */
.nn-lab-chip{position:fixed;right:16px;bottom:16px;top:auto;left:auto;z-index:9999;display:flex;flex-direction:row;align-items:center;gap:2px;width:auto;max-width:calc(100vw - 32px);padding:4px 5px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid rgba(21,26,46,.14);box-shadow:0 2px 10px rgba(21,26,46,.08);font-family:Poppins,Arial,sans-serif;font-size:11px;font-weight:500;line-height:1;}
.nn-lab-chip a{display:block;padding:5px 8px;border-radius:999px;color:rgba(21,26,46,.45);text-decoration:none;}
.nn-lab-chip a:hover{color:#151a2e;background:rgba(83,110,229,.1);}
.nn-lab-chip a.is-current{color:#fff;background:#536ee5;}
.nn-lab-chip a.is-current:hover{color:#fff;background:#4258c9;}
@media print{.nn-lab-chip{display:none;}}
/* Mobile: smaller footprint and dimmed at rest so it never hides the content or a form field under it. */
@media (max-width:767px){
.nn-lab-chip{right:10px;bottom:10px;padding:3px 4px;font-size:10px;opacity:.55;}
.nn-lab-chip:hover,.nn-lab-chip:focus-within,.nn-lab-chip:active{opacity:1;}
.nn-lab-chip a{padding:4px 7px;}
}

/* Lab index page */
.nn-lab{margin:0;background:#f7f8fc;color:#151a2e;font-family:Poppins,Arial,sans-serif;font-size:15px;line-height:1.6;}
.nn-lab-shell{max-width:960px;margin:0 auto;padding:48px 24px 96px;}
.nn-lab-shell h1{font-size:28px;font-weight:600;margin:0 0 4px;}
.nn-lab-kicker{color:#536ee5;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px;}
.nn-lab-intro{color:rgba(21,26,46,.6);margin:0 0 40px;max-width:640px;}
.nn-lab-shell h2{font-size:18px;font-weight:600;margin:48px 0 12px;padding-bottom:8px;border-bottom:1px solid rgba(21,26,46,.1);}
.nn-lab-list{list-style:none;margin:0;padding:0;}
.nn-lab-list li{margin:0;padding:0;}
.nn-lab-list a{display:flex;justify-content:space-between;gap:16px;padding:9px 10px;border-radius:8px;color:#151a2e;text-decoration:none;}
.nn-lab-list a:hover{background:rgba(83,110,229,.07);color:#151a2e;}
.nn-lab-path{color:rgba(21,26,46,.4);font-size:12px;white-space:nowrap;overflow-wrap:anywhere;}
.nn-lab-sub{color:rgba(21,26,46,.45);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:24px 0 4px;}
.nn-lab-table{width:100%;border-collapse:collapse;}
.nn-lab-table th{text-align:left;font-size:12px;font-weight:600;color:rgba(21,26,46,.45);padding:8px 10px;border-bottom:1px solid rgba(21,26,46,.08);}
.nn-lab-table td{padding:8px 10px;border-bottom:1px solid rgba(21,26,46,.06);}
.nn-lab-table a{color:#536ee5;text-decoration:none;}
.nn-lab-table a:hover{color:#4258c9;text-decoration:underline;}
.nn-lab-note{color:rgba(21,26,46,.5);font-size:13px;margin-top:8px;}
.nn-lab-back{display:inline-block;margin-top:56px;color:#536ee5;text-decoration:none;font-weight:500;}
.nn-lab-back:hover{color:#4258c9;text-decoration:underline;}

/* Home A mobile fixes (chrome agent). At 390px the hero credibility line was a
   nowrap span inside a centered flex row, so it overflowed and clipped at both
   edges; the integrations wall footnote sat in a flex holder whose min-content
   width exceeded the viewport, clipping the paragraph at the left edge. Let the
   text wrap and hold both blocks to the container width. The wall grid itself
   may scroll; the paragraph must not. */
@media (max-width:767px){
.hero-review-text{white-space:normal;line-height:1.45;}
.hime-1brand-customer-text-wrapper{max-width:100%;min-width:0;justify-content:center;text-align:center;}
.hero-client-wrapper{max-width:100%;min-width:0;flex-wrap:wrap;justify-content:center;}
.trusted-brand-holder{display:block;width:100%;max-width:100%;}
.trusted-brand-holder .la-int{width:100%;min-width:0;max-width:100%;}
.la-int-more{max-width:100%;overflow-wrap:break-word;}
}

/* Narrow screens: stack each row, let long URLs wrap, keep the table inside the viewport. */
@media (max-width:600px){
.nn-lab-shell{padding:32px 16px 72px;}
.nn-lab-list a{flex-direction:column;align-items:flex-start;gap:2px;}
.nn-lab-path{white-space:normal;word-break:break-all;}
.nn-lab-table{display:block;overflow-x:auto;}
.nn-lab-table th,.nn-lab-table td{padding:8px 8px;}
}

/* Home slot on the homepage chip: an icon, centred like the letters. */
.nn-lab-chip a svg{display:block;margin:2px 0;}