/*
NOT OUT LABS — UNIFIED UI SYSTEM v9.0
A single site-wide layout authority layered after legacy page CSS.
The purpose is visual consistency, not visual sameness: approved archetypes share the same
container, rhythm, typography, card geometry and responsive rules.
*/
:root{
  --ui-max:1200px;
  --ui-gutter:32px;
  --ui-gutter-mobile:18px;
  --ui-section-major:80px;
  --ui-section-standard:68px;
  --ui-section-compact:46px;
  --ui-gap-xl:48px;
  --ui-gap-lg:32px;
  --ui-gap-md:20px;
  --ui-gap-sm:12px;
  --ui-radius-lg:22px;
  --ui-radius-md:16px;
  --ui-navy:#061b31;
  --ui-navy-2:#0a3043;
  --ui-ink:#082b49;
  --ui-copy:#557083;
  --ui-line:#dce9e7;
  --ui-soft:#f5faf9;
  --ui-teal:#20c8b6;
  --ui-teal-dark:#067d6e;
}

html{scroll-padding-top:84px}
.ui-unified,.ui-unified *,.ui-unified *::before,.ui-unified *::after{box-sizing:border-box}
.ui-unified img,.ui-unified svg{max-width:100%}
.ui-unified .site-container,
.ui-unified .container{
  width:100%!important;
  max-width:var(--ui-max)!important;
  margin-inline:auto!important;
  padding-inline:var(--ui-gutter)!important;
}
.ui-unified .nav-wrap{max-width:var(--ui-max)!important;margin-inline:auto!important}

/* ===== Universal type / copy rhythm ===== */
.ui-unified h1,.ui-unified h2,.ui-unified h3{letter-spacing:-.035em;text-wrap:balance}
.ui-unified p{ text-wrap:pretty }
.ui-unified .v6-head,.ui-unified .v7-head{margin-bottom:28px!important;max-width:800px}
.ui-unified .v6-head h2,.ui-unified .v7-head h2{max-width:760px}
.ui-unified .v6-head p,.ui-unified .v7-head p{max-width:720px;line-height:1.68}

/* ===== Section rhythm ===== */
.ui-unified .v6-section,
.ui-unified .v7-section,
.ui-unified .v5-section,
.ui-unified .page-section{padding-block:var(--ui-section-standard)!important}
.ui-unified .v6-page-hero,
.ui-unified .v7-page-hero,
.ui-unified .page-hero{padding-block:var(--ui-section-major)!important}
.ui-unified .v5-form-section{padding-block:var(--ui-section-standard)!important}
.ui-unified section+section{position:relative}

/* ===== Approved shared grid archetypes ===== */
.ui-unified .grid-2-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ui-gap-xl);align-items:center}
.ui-unified .grid-3-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ui-gap-md)}
.ui-unified .grid-copy-visual{display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);gap:56px;align-items:center}
.ui-unified .grid-sidebar-main{display:grid;grid-template-columns:minmax(220px,.28fr) minmax(0,.72fr);gap:24px;align-items:stretch}

/* Main V6 service/product heroes: proposition and operating proof share visual authority. */
.ui-unified .v6-page-hero .v6-page-grid{
  display:grid!important;
  grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)!important;
  gap:56px!important;
  align-items:center!important;
}
.ui-unified .v6-page-hero .v6-page-grid>div:first-child{max-width:600px}
.ui-unified .v6-page-hero h1{
  font-size:clamp(3rem,4.05vw,4.2rem)!important;
  line-height:1!important;
  letter-spacing:-.052em!important;
  max-width:650px!important;
}
.ui-unified .v6-page-hero .lede{max-width:600px;line-height:1.68!important}
.ui-unified .v6-page-hero .v6-console,
.ui-unified .v6-page-hero .v6-browser,
.ui-unified .v6-page-hero .v6-page-visual{width:100%;min-width:0}
.ui-unified .v6-page-hero .v6-console,
.ui-unified .v6-page-hero .v6-page-visual{min-height:420px}

.ui-unified .v6-stack-item em{font-size:10.5px!important;line-height:1.25!important}

/* Approved landing-page hero receives the same system, not a separate visual language. */
.ui-unified .v72-landing-hero .v6-page-grid{
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)!important;
  gap:58px!important;
}
.ui-unified .v72-landing-hero h1{font-size:clamp(2.95rem,3.95vw,4rem)!important;max-width:620px!important}
.ui-unified .v72-landing-hero .v6-page-visual{min-height:620px!important;display:flex!important;flex-direction:column!important}
.ui-unified .v72-landing-hero .v6-stack-list{flex:1;display:flex!important;flex-direction:column!important;justify-content:center!important}

/* Home hero uses the same 1200 baseline and balanced left/right authority. */
.ui-unified .v7-hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)!important;gap:52px!important;align-items:center!important}
.ui-unified .v7-hero-grid h1{max-width:680px}

/* ===== One resolved card/mosaic grammar ===== */
.ui-unified .v6-bento{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  gap:18px!important;
  align-items:stretch!important;
}
.ui-unified .v6-bento>.v6-panel{grid-column:span 6!important;height:100%;min-width:0}
.ui-unified .v6-bento>.v6-panel:nth-child(1){grid-column:span 8!important}
.ui-unified .v6-bento>.v6-panel:nth-child(2){grid-column:span 4!important}
.ui-unified .v6-bento>.v6-panel:nth-child(5){grid-column:1/-1!important}
.ui-unified .page-insights .v6-bento>.v6-panel{grid-column:span 6!important}
.ui-unified .page-insights .v6-bento>.v6-panel:nth-child(1),
.ui-unified .page-insights .v6-bento>.v6-panel:nth-child(2),
.ui-unified .page-insights .v6-bento>.v6-panel:nth-child(3),
.ui-unified .page-insights .v6-bento>.v6-panel:nth-child(4){grid-column:span 6!important}
.ui-unified .v6-panel,
.ui-unified .v7-principle,
.ui-unified .v7-problem,
.ui-unified .v72-pain,
.ui-unified .v72-role,
.ui-unified .v7-proof-cell{
  border-radius:var(--ui-radius-md)!important;
}
.ui-unified .v6-bento>.v6-panel,
.ui-unified .v7-principles>.v7-principle,
.ui-unified .v7-problem-grid>.v7-problem,
.ui-unified .v72-pain-grid>.v72-pain,
.ui-unified .v72-role-grid>.v72-role{display:flex;flex-direction:column;height:100%}

/* Five-card principle system resolves completely: featured statement, then two balanced rows. */
.ui-unified .v7-principles{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px!important;
}
.ui-unified .v7-principles>.v7-principle.primary{grid-column:1/-1!important}

/* Homepage problem matrix is deliberately regular; no accidental last-row drift. */
.ui-unified .v7-problem-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}
.ui-unified .v7-proof-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
.ui-unified .v7-proof-grid>.origin{grid-column:span 2!important}

/* Existing ecosystem pattern is intentional sidebar/main asymmetry. */
.ui-unified .v6-ecosystem{display:grid!important;grid-template-columns:minmax(220px,.27fr) minmax(0,.73fr)!important;gap:24px!important;align-items:stretch!important}

/* Showcase sections use a true balanced pair. */
.ui-unified .v6-showcase{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:42px!important;align-items:center!important}

/* About origin, operating proof, editorial and form shells share stable proportions. */
.ui-unified .v7-origin-grid{display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr)!important;gap:44px!important;align-items:start!important}
.ui-unified .editorial-wrap{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(280px,.34fr)!important;gap:42px!important;align-items:start!important}
.ui-unified .v5-form-shell{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;align-items:stretch!important}

/* Landing-page shared support grids. */
.ui-unified .v72-pain-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}
.ui-unified .v72-role-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}
.ui-unified .v72-now-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}
.ui-unified .v86-scope-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}
.ui-unified .v86-decision-grid{grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr)!important;gap:38px!important}

/* ===== Operating status motion language ===== */
@keyframes nolUnifiedPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(32,200,182,.42),0 0 12px rgba(32,200,182,.18);transform:scale(1)}
  52%{box-shadow:0 0 0 8px rgba(32,200,182,0),0 0 18px rgba(32,200,182,.30);transform:scale(1.08)}
}
.ui-unified.page-home .v7-kicker::before{
  animation:nolUnifiedPulse 2.2s ease-in-out infinite!important;
}
.ui-unified .v6-visual-label>span,
.ui-unified .v6-live{display:inline-flex!important;align-items:center!important;gap:7px!important}
.ui-unified .v6-visual-label>span::before,
.ui-unified .v6-live::before{
  content:"";
  width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--ui-teal);
  animation:nolUnifiedPulse 2.55s ease-in-out infinite;
}
.ui-unified.page-systems .v6-browser-bar{position:relative;padding-right:112px!important}
.ui-unified.page-systems .v6-browser-bar::before{
  content:"";position:absolute;right:96px;top:50%;width:6px;height:6px;border-radius:50%;
  background:var(--ui-teal);transform:translateY(-50%);animation:nolUnifiedPulse 2.55s ease-in-out infinite;
}
.ui-unified.page-systems .v6-browser-bar::after{
  content:"SYSTEM ACTIVE";
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:#70dfd1;font-size:.57rem;font-weight:900;letter-spacing:.06em;white-space:nowrap;
  text-shadow:0 0 12px rgba(32,200,182,.28);
}
@media(prefers-reduced-motion:reduce){
  .ui-unified.page-home .v7-kicker::before,
  .ui-unified .v6-visual-label>span::before,
  .ui-unified .v6-live::before,
  .ui-unified.page-systems .v6-browser-bar::before{animation:none!important}
}

/* ===== Contact / forms: equal visual balance and no invisible microcopy ===== */
.ui-unified .v5-form-copy,.ui-unified .v5-enquiry{min-width:0}
.ui-unified .v5-form-copy{padding:38px 34px!important}
.ui-unified .v5-enquiry{padding:28px 32px!important}
.ui-unified .v5-field label,.ui-unified .v5-help,.ui-unified .v5-consent{line-height:1.45}
.ui-unified .v6-form-progress{gap:8px!important}
.ui-unified .v6-progress-item{min-width:0}
.ui-unified .v84-human-review strong{color:var(--ui-ink)!important}
.ui-unified .v84-human-review span{color:var(--ui-copy)!important}

/* ===== Footer / trust alignment ===== */
.ui-unified .site-footer-v2>.container{padding-top:0!important;padding-bottom:0!important}
.ui-unified .footer-main-v2{display:grid!important;grid-template-columns:minmax(240px,1.35fr) repeat(3,minmax(150px,.75fr))!important;gap:36px!important}
.ui-unified .footer-bottom-v2{gap:18px!important;align-items:center!important}
.ui-unified .nol-footer-trustmarks{white-space:nowrap}

/* ===== First-visit consent should not obscure the product ===== */
.ui-unified .nol-cookie-consent{
  left:50%!important;right:auto!important;bottom:14px!important;transform:translateX(-50%)!important;
  width:min(900px,calc(100% - 32px))!important;max-width:none!important;
  display:none!important;grid-template-columns:minmax(0,1fr) auto!important;column-gap:18px!important;row-gap:4px!important;
  padding:14px 16px!important;border-radius:14px!important;
}
.ui-unified .nol-cookie-consent.show{display:grid!important}
.ui-unified .nol-cookie-consent>strong{grid-column:1;grid-row:1;margin:0!important}
.ui-unified .nol-cookie-consent>p{grid-column:1;grid-row:2;margin:0!important;max-width:520px!important}
.ui-unified .nol-cookie-actions{grid-column:2;grid-row:1/3;align-self:center;display:flex!important;flex-direction:row!important;gap:7px!important}
.ui-unified .nol-cookie-btn{min-height:36px!important;white-space:nowrap}

/* ===== Tablet ===== */
@media(max-width:1080px){
  :root{--ui-gutter:26px;--ui-section-major:68px;--ui-section-standard:60px}
  .ui-unified .v6-page-hero .v6-page-grid,
  .ui-unified .v72-landing-hero .v6-page-grid,
  .ui-unified .v7-hero-grid{grid-template-columns:1fr!important;gap:34px!important}
  .ui-unified .v6-page-hero .v6-page-grid>div:first-child{max-width:760px}
  .ui-unified .v6-page-hero h1,.ui-unified .v72-landing-hero h1{max-width:800px!important}
  .ui-unified .v6-page-hero .v6-console,.ui-unified .v6-page-hero .v6-page-visual,.ui-unified .v6-page-hero .v6-browser{max-width:800px;width:100%}
  .ui-unified .v72-landing-hero .v6-page-visual{min-height:0!important}
  .ui-unified .v72-landing-hero .v6-stack-list{display:grid!important;flex:none!important}
  .ui-unified .v6-bento>.v6-panel:nth-child(1),.ui-unified .v6-bento>.v6-panel:nth-child(2),.ui-unified .v6-bento>.v6-panel{grid-column:span 6!important}
  .ui-unified .v6-bento>.v6-panel:nth-child(5){grid-column:1/-1!important}
  .ui-unified .v7-problem-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ui-unified .v7-proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ui-unified .v7-proof-grid>.origin{grid-column:1/-1!important}
  .ui-unified .v72-pain-grid,.ui-unified .v72-role-grid,.ui-unified .v72-now-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ui-unified .v86-decision-grid,.ui-unified .editorial-wrap,.ui-unified .v7-origin-grid{grid-template-columns:1fr!important}
  .ui-unified .v86-proof-card{position:relative!important;top:auto!important}
  .ui-unified .footer-main-v2{grid-template-columns:1.2fr repeat(2,1fr)!important}
  .ui-unified .footer-contact-v2{grid-column:2/-1}
}

/* ===== Phone ===== */
@media(max-width:700px){
  :root{--ui-section-major:54px;--ui-section-standard:50px;--ui-section-compact:36px}
  .ui-unified .site-container,.ui-unified .container{padding-inline:var(--ui-gutter-mobile)!important}
  .ui-unified .v6-page-hero h1,.ui-unified .v72-landing-hero h1{font-size:clamp(2.45rem,12vw,3.25rem)!important;line-height:1.01!important}
  .ui-unified .v6-page-hero .v6-console,.ui-unified .v6-page-hero .v6-page-visual{min-height:0!important}
  .ui-unified .v6-bento{grid-template-columns:1fr!important;gap:12px!important}
  .ui-unified .v6-bento>.v6-panel,.ui-unified .v6-bento>.v6-panel:nth-child(1),.ui-unified .v6-bento>.v6-panel:nth-child(2),.ui-unified .v6-bento>.v6-panel:nth-child(5),.ui-unified .page-insights .v6-bento>.v6-panel{grid-column:1!important}
  .ui-unified .v7-principles,.ui-unified .v7-problem-grid,.ui-unified .v7-proof-grid,.ui-unified .v72-pain-grid,.ui-unified .v72-role-grid,.ui-unified .v72-now-grid,.ui-unified .v86-scope-grid,.ui-unified .v6-showcase,.ui-unified .v6-ecosystem,.ui-unified .v5-form-shell{grid-template-columns:1fr!important}
  .ui-unified .v7-principles>.v7-principle.primary,.ui-unified .v7-proof-grid>.origin{grid-column:1!important}
  .ui-unified .v6-ecosystem{gap:14px!important}
  .ui-unified .v5-form-copy{padding:27px 22px!important}
  .ui-unified .v5-enquiry{padding:22px 18px!important}
  .ui-unified .v6-progress-item b{font-size:10px!important}
  .ui-unified .v6-progress-item em{font-size:10.5px!important;line-height:1.25!important}
  .ui-unified .footer-main-v2{grid-template-columns:1fr 1fr!important;gap:28px 18px!important}
  .ui-unified .footer-brand-v2,.ui-unified .footer-contact-v2{grid-column:1/-1!important}
  .ui-unified .footer-bottom-v2{display:flex!important;flex-direction:column!important;align-items:flex-start!important}
  .ui-unified .nol-cookie-consent{
    width:calc(100% - 24px)!important;bottom:10px!important;padding:13px!important;
  }
  .ui-unified .nol-cookie-consent.show{display:block!important}
  .ui-unified .nol-cookie-consent>p{margin:5px 0 10px!important}
  .ui-unified .nol-cookie-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
  .ui-unified .nol-cookie-btn{white-space:normal!important;padding:8px 9px!important;font-size:.68rem!important}
  .ui-unified.page-systems .v6-browser-bar::before{right:50px}
  .ui-unified.page-systems .v6-browser-bar::after{content:"ACTIVE";right:10px}
}
@media(max-width:380px){
  .ui-unified .footer-main-v2{grid-template-columns:1fr!important}
  .ui-unified .footer-brand-v2,.ui-unified .footer-contact-v2{grid-column:1!important}
  .ui-unified .nol-cookie-actions{grid-template-columns:1fr!important}
}

/* V9.9.12 — global honeypot hardening: bot-trap fields must never be visible */
.nol-honey{
  position:absolute!important;
  left:-10000px!important;
  top:auto!important;
  width:1px!important;
  height:1px!important;
  min-width:1px!important;
  min-height:1px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  opacity:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
}