@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  --kk-harbor:#02353C;
  --kk-forest:#449342;
  --kk-emerald:#2EAF7D;
  --kk-turquoise:#3FD0C9;
  --kk-mint:#C1F6ED;
  --kk-brand-gradient:linear-gradient(105deg,#02353C 0%,#449342 28%,#2EAF7D 52%,#3FD0C9 76%,#C1F6ED 100%);
  --kk-brand-gradient-dark:linear-gradient(105deg,#02353C 0%,#145C48 30%,#2EAF7D 62%,#3FD0C9 100%);
  --navy:#02353C;--deep:#02353C;--ink:#02353C;--cyan:#3FD0C9;--aqua:#C1F6ED;--green:#2EAF7D;--mint:#C1F6ED;
  --sky:#3FD0C9;--blue:#2EAF7D;--indigo:#449342;--soft:#f1fbf8;--ice:#f3fbf9;--line:#d5ebe5;
  --kk-nav-accent:#3FD0C9!important;
}

html,body{font-family:"IBM Plex Sans",Arial,sans-serif!important;color:var(--kk-harbor)}
body{background:#fff}
h1,h2,h3,h4,h5,h6,.brand-title,.hero-title,.kk-hero h1,.demo-hero h1,.contact-hero h1,.legal-hero h1{
  font-family:"IBM Plex Mono",ui-monospace,monospace!important;font-weight:500!important;letter-spacing:-.045em!important
}
.eyebrow,.pill,.kk-context-strip,.strip,.logos,.badge,.tag,.kicker,.section-kicker,.mini-label{
  font-family:"IBM Plex Mono",ui-monospace,monospace!important;font-weight:600!important
}

/* Brand logo */
.kk-site-nav__brand{min-width:150px}
.kk-brand-logo{display:block;width:132px;height:auto;filter:invert(1);transform:translateY(1px)}
.kk-footer__logo{display:block;width:150px;height:auto;filter:invert(1)}
.kk-site-nav__mark,.kk-footer__mark{display:none!important}

/* Navigation: Harbor Ink glass + stable CTA */
.kk-site-nav{font-family:"IBM Plex Sans",Arial,sans-serif!important}
.kk-site-nav__bar{background:rgba(2,53,60,.94)!important;border-color:rgba(193,246,237,.18)!important;box-shadow:0 18px 48px rgba(2,53,60,.24)!important}
.kk-site-nav__links>a,.kk-site-nav__dropbtn{font-family:"IBM Plex Sans",Arial,sans-serif!important;color:rgba(255,255,255,.75)!important}
.kk-site-nav__links>a:hover,.kk-site-nav__dropbtn:hover,.kk-site-nav__dropdown:focus-within .kk-site-nav__dropbtn{color:#fff!important}
.kk-site-nav__links>a[aria-current="page"],.kk-site-nav__dropbtn.is-current{color:var(--kk-mint)!important}
.kk-site-nav__links>a[aria-current="page"]:after,.kk-site-nav__dropbtn.is-current:after{background:var(--kk-turquoise)!important}
.kk-site-nav__submenu{background:rgba(2,53,60,.985)!important;border-color:rgba(193,246,237,.16)!important}
.kk-site-nav__submenu a{color:rgba(255,255,255,.78)!important}
.kk-site-nav__submenu a:hover{color:#fff!important;background:rgba(193,246,237,.09)!important}
.kk-site-nav__submenu a[aria-current="page"]{color:#02353C!important;background:var(--kk-mint)!important}
.kk-site-nav__shortcut{border:0!important;color:#02353C!important;background:linear-gradient(110deg,var(--kk-mint),var(--kk-turquoise),var(--kk-emerald))!important;font-weight:700!important;box-shadow:0 8px 24px rgba(63,208,201,.18)}
.kk-site-nav__shortcut:hover{color:#02353C!important;filter:brightness(1.04)}
.kk-site-nav__toggle{border-color:rgba(193,246,237,.25)!important}
.kk-site-nav__mobile{background:rgba(2,53,60,.985)!important}

/* All main heroes use the supplied palette and gradient language. */
body :is(.hero,.kk-hero,.demo-hero,.contact-hero,.legal-hero){
  background-color:var(--kk-harbor)!important;
  background-image:
    radial-gradient(circle at 82% 20%,rgba(193,246,237,.20),transparent 32%),
    linear-gradient(90deg,rgba(2,53,60,.96) 0%,rgba(2,53,60,.83) 42%,rgba(2,53,60,.30) 100%),
    var(--kk-brand-gradient)!important;
}
body :is(.hero,.kk-hero,.demo-hero,.contact-hero,.legal-hero) h1{color:#fff!important}
body :is(.hero,.kk-hero,.demo-hero,.contact-hero,.legal-hero) p{color:rgba(255,255,255,.78)}
.gradient,.grad,.accent-gradient{color:transparent!important;background:linear-gradient(90deg,var(--kk-mint),var(--kk-turquoise),var(--kk-emerald))!important;background-clip:text!important;-webkit-background-clip:text!important}

/* Context strips are one consistent visual system. */
.kk-context-strip,body[data-page] .kk-context-strip,body .hero + :is(.strip,.logos){background:var(--kk-harbor)!important;color:var(--kk-mint)!important;border-top-color:rgba(193,246,237,.12)!important}
.kk-context-strip span,body .hero + :is(.strip,.logos) span{border-right-color:rgba(193,246,237,.20)!important}

/* Main interface colors */
.eyebrow{color:var(--kk-emerald)!important}
.dark,.cta,.cta-band,.callout-dark{background:var(--kk-harbor)!important}
.dark .eyebrow,.cta .eyebrow{color:var(--kk-turquoise)!important}
.btn-primary,.primary,.nav-cta,button[type="submit"]{background:linear-gradient(110deg,var(--kk-mint),var(--kk-turquoise),var(--kk-emerald))!important;color:var(--kk-harbor)!important;border-color:transparent!important}
.btn-primary:hover,.primary:hover,button[type="submit"]:hover{filter:brightness(1.03)}
.card:hover,.tile:hover,.panel:hover{border-color:rgba(46,175,125,.55)!important}
.icon,.list i,.step em,.check,.dot{color:var(--kk-harbor)!important;background:var(--kk-mint)!important}
a:not(.btn):not(.kk-site-nav__brand):not(.kk-site-nav__shortcut):focus-visible,button:focus-visible{outline:3px solid var(--kk-turquoise)!important;outline-offset:3px}

/* Footer aligned to new architecture and brand */
.kk-footer{background:var(--kk-harbor)!important;color:rgba(255,255,255,.76)!important}
.kk-footer a:hover{color:var(--kk-mint)!important}
.kk-footer h4{font-family:"IBM Plex Mono",ui-monospace,monospace!important;font-weight:600!important;color:#fff!important}
.kk-footer__brand{color:#fff!important;display:inline-block!important}

/* Social proof and lightweight banners */
.social-proof-callout,.hardware-quote-banner,.form-disambiguation,.pricing-note{border-color:#ccebe4!important;background:#f2fbf8!important;color:var(--kk-harbor)!important}
.social-proof-callout a,.hardware-quote-banner a,.form-disambiguation a,.pricing-note a{color:#187861!important}

/* Preserve legibility in product UI mockups while rebranding accents. */
.screen-in,.flow,.codebox .flow{color:var(--kk-harbor)!important}
.live{color:#176f5d!important;background:#e4faf5!important}
.stat b,.flow-box b,.dash-top strong{color:var(--kk-harbor)!important}
.bars i{background:linear-gradient(var(--kk-turquoise),var(--kk-emerald))!important}
.core{background:linear-gradient(145deg,#0b5a50,#02353C)!important;border-color:rgba(193,246,237,.35)!important}
.node{background:#064a47!important;border-color:rgba(193,246,237,.18)!important}

@media(max-width:1100px){.kk-brand-logo{width:122px}}
@media(max-width:900px){.kk-site-nav__brand{min-width:auto}.kk-brand-logo{width:116px}.kk-site-nav__mobile{border-color:rgba(193,246,237,.14)!important}}
html body[data-page] :is(.hero,.kk-hero,.demo-hero,.contact-hero,.legal-hero,.docs-hero){
  background-color:var(--kk-harbor)!important;
  background-image:radial-gradient(circle at 82% 20%,rgba(193,246,237,.20),transparent 32%),linear-gradient(90deg,rgba(2,53,60,.96) 0%,rgba(2,53,60,.83) 42%,rgba(2,53,60,.30) 100%),var(--kk-brand-gradient)!important;
}
body[data-page="docs"]{--kk-strip-height:0px}
.kk-site-nav__mobile-demo{grid-column:1/-1!important;text-align:center;background:linear-gradient(110deg,var(--kk-mint),var(--kk-turquoise),var(--kk-emerald))!important;color:var(--kk-harbor)!important}
button,input,select,textarea{font-family:"IBM Plex Sans",Arial,sans-serif!important}

/* 2026-10 readability pass: restrained headings + always-visible actions */
body[data-page] :is(.hero,.kk-hero,.demo-hero,.contact-hero,.legal-hero,.docs-hero) h1{
  font-size:clamp(2.45rem,4.7vw,4.65rem)!important;
  line-height:1.02!important;
  letter-spacing:-.055em!important;
  max-width:820px;
}
body[data-page] :is(.head h2,.split h2,.cta h2,.media-copy h2,.orbit-copy h2,.section h2,.section-title){
  font-size:clamp(1.9rem,3.3vw,3.15rem)!important;
  line-height:1.08!important;
  letter-spacing:-.045em!important;
}
body[data-page] :is(.card h3,.support-card h3,.panel h3,.tile h3){font-size:clamp(1.05rem,1.5vw,1.25rem)!important;line-height:1.25!important;letter-spacing:-.025em!important}

/* Action controls must survive page-specific legacy CSS. */
body[data-page] :is(.actions,.hero-actions,.cta-actions,.form-actions){position:relative!important;z-index:8!important;display:flex!important;visibility:visible!important;opacity:1!important;gap:12px!important;flex-wrap:wrap!important}
body[data-page] :is(a.btn,.btn-primary,.btn-ghost,.primary,.nav-cta,button[type="submit"],input[type="submit"],.hero-secondary-link,.cta-text-link){
  display:inline-flex!important;visibility:visible!important;opacity:1!important;align-items:center!important;justify-content:center!important;min-height:46px!important;min-width:0!important;padding:0 18px!important;border-radius:11px!important;text-decoration:none!important;font-size:.88rem!important;line-height:1.15!important;font-weight:700!important;white-space:normal!important;cursor:pointer!important
}
body[data-page] :is(a.btn,.btn-primary,.primary,.nav-cta,button[type="submit"],input[type="submit"]){background:linear-gradient(110deg,var(--kk-mint),var(--kk-turquoise),var(--kk-emerald))!important;color:var(--kk-harbor)!important;border:1px solid transparent!important;box-shadow:0 10px 28px rgba(46,175,125,.18)!important}
body[data-page] :is(.btn-ghost,.hero-secondary-link,.cta-text-link){color:#fff!important;border:1px solid rgba(255,255,255,.34)!important;background:rgba(255,255,255,.08)!important;padding-left:16px!important;padding-right:16px!important}

@media(max-width:700px){
 body[data-page] :is(.hero,.kk-hero,.demo-hero,.contact-hero,.legal-hero,.docs-hero) h1{font-size:clamp(2rem,10vw,3rem)!important;line-height:1.04!important}
 body[data-page] :is(.head h2,.split h2,.cta h2,.media-copy h2,.orbit-copy h2,.section h2,.section-title){font-size:clamp(1.65rem,7vw,2.35rem)!important}
 body[data-page] :is(.actions,.hero-actions,.cta-actions,.form-actions){width:100%!important}
 body[data-page] :is(a.btn,.btn-primary,.btn-ghost,.primary,button[type="submit"],input[type="submit"],.hero-secondary-link,.cta-text-link){min-height:44px!important;font-size:.84rem!important}
}

/* Lucide icon system */
.lucide{display:inline-block;width:1em;height:1em;stroke:currentColor;fill:none;vertical-align:-.14em;flex:0 0 auto}
.icon .lucide,.security-card i .lucide,.contact-icon .lucide,.kk-rental-icon .lucide,.role-icon .lucide,.play .lucide{width:24px;height:24px}
.kk-action-icon{width:1em;height:1em;margin-left:.28em;vertical-align:-.12em}
.kk-nav-chevron{width:15px;height:15px;margin-left:3px;transition:transform .18s ease}
.kk-site-nav__dropbtn[aria-expanded="true"] .kk-nav-chevron{transform:rotate(180deg)}
.map-arrow .lucide{width:20px;height:20px}
.check .lucide,.kk-check .lucide{width:17px;height:17px}
.kk-list-icon{width:16px;height:16px;position:absolute;left:0;top:.27em;color:currentColor}
.sv-list li:before{content:none!important}
.sv-list li{position:relative}
.sector .lucide{width:19px;height:19px;vertical-align:middle;margin-right:4px}
.result-summary h3 .lucide{width:36px;height:36px;color:var(--kk-emerald);flex:0 0 auto}
.role-icon .lucide{width:25px;height:25px}
.event-feed .event i .lucide{width:18px;height:18px}
.pill .lucide{width:14px;height:14px}

/* 2026-10 icon scale + hero alignment pass */
/* Lucide icons: improve optical size without overpowering text. */
.lucide{stroke-width:1.9}
.icon .lucide,
.security-card i .lucide,
.contact-icon .lucide,
.kk-rental-icon .lucide,
.role-icon .lucide{width:28px!important;height:28px!important}
.play .lucide{width:30px!important;height:30px!important}
.map-arrow .lucide{width:22px!important;height:22px!important}
.check .lucide,.kk-check .lucide{width:20px!important;height:20px!important}
.kk-list-icon{width:18px!important;height:18px!important;top:.20em!important}
.sector .lucide{width:22px!important;height:22px!important;margin-right:6px!important}
.result-summary h3 .lucide{width:40px!important;height:40px!important}
.event-feed .event i .lucide{width:21px!important;height:21px!important}
.pill .lucide{width:16px!important;height:16px!important}
.kk-action-icon{width:17px!important;height:17px!important;margin-left:.38em!important;vertical-align:-.15em!important}
.kk-nav-chevron{width:15px!important;height:15px!important}

/* Keep icon holders proportional to the larger glyphs. */
.icon,.contact-icon,.role-icon,.kk-rental-icon{min-width:50px;min-height:50px}

/* Compatibility, Academy and Contacts: same hero gutters and left alignment as the rest of the site. */
body[data-page="dispositivi"] .hero > .wrap,
body[data-page="video"] .hero > .wrap,
body[data-page="contact"] .contact-hero > .wrap{
  width:min(1200px,calc(100% - 48px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body[data-page="dispositivi"] .hero-in,
body[data-page="video"] .hero-in,
body[data-page="contact"] .contact-hero__content{
  margin-left:0!important;
  margin-right:0!important;
  text-align:left!important;
}
body[data-page="dispositivi"] .hero .actions,
body[data-page="video"] .hero .actions,
body[data-page="contact"] .contact-hero .actions{
  justify-content:flex-start!important;
}
body[data-page="dispositivi"] .hero h1,
body[data-page="video"] .hero h1,
body[data-page="contact"] .contact-hero h1,
body[data-page="dispositivi"] .hero p,
body[data-page="video"] .hero p,
body[data-page="contact"] .contact-hero p{
  margin-left:0!important;
  margin-right:0!important;
  text-align:left!important;
}
@media(max-width:700px){
  body[data-page="dispositivi"] .hero > .wrap,
  body[data-page="video"] .hero > .wrap,
  body[data-page="contact"] .contact-hero > .wrap{
    width:min(100% - 24px,1200px)!important;
  }
  .icon .lucide,
  .security-card i .lucide,
  .contact-icon .lucide,
  .kk-rental-icon .lucide,
  .role-icon .lucide{width:26px!important;height:26px!important}
}

/* 2026-10-03 icon consistency + navigation interaction pass */
/* Global optical scale: semantic/card icons must read as primary UI elements. */
body[data-page] :is(.icon,.contact-icon,.role-icon,.kk-rental-icon,.step-icon,.future-card>i,.security-card>i,.device-row>i,.res-card>i){
  display:grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  min-height:54px!important;
  border-radius:15px!important;
}
body[data-page] :is(.icon,.contact-icon,.role-icon,.kk-rental-icon,.step-icon,.future-card>i,.security-card>i,.device-row>i,.res-card>i) .lucide{
  width:30px!important;
  height:30px!important;
  stroke-width:1.9!important;
}

/* Home sector cards: larger, centered pictograms with enough breathing room. */
.sector-grid .sector{
  display:flex!important;
  min-height:126px!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  padding:20px 12px!important;
  line-height:1.25!important;
  text-align:center!important;
}
.sector-grid .sector-icon{
  display:grid!important;
  place-items:center!important;
  width:58px!important;
  height:58px!important;
  border-radius:17px!important;
  color:var(--kk-harbor)!important;
  background:linear-gradient(145deg,var(--kk-mint),rgba(63,208,201,.38))!important;
}
.sector-grid .sector-icon .lucide{
  width:34px!important;
  height:34px!important;
  stroke-width:1.8!important;
}

/* Device diagnostics: these icons sit beside two text lines, so use a stronger 56/31 scale. */
.device-row>i.device-icon{
  width:56px!important;
  height:56px!important;
  min-width:56px!important;
  border-radius:16px!important;
}
.device-row>i.device-icon .lucide{width:31px!important;height:31px!important}
.device-row{column-gap:14px!important}

/* Resilience cards: icon is a section marker, not an inline glyph. */
.res-card>i.res-icon{
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  border-radius:17px!important;
}
.res-card>i.res-icon .lucide{width:32px!important;height:32px!important}
.res-card h3{margin-top:18px!important}

/* Keep smaller controls genuinely small. */
.kk-nav-chevron{width:16px!important;height:16px!important}
.kk-action-icon{width:18px!important;height:18px!important}
.check .lucide,.kk-check .lucide{width:20px!important;height:20px!important}
.pill .lucide{width:16px!important;height:16px!important}

/* Home hero: fixed navigation must never cover benefit/trust labels. */
body[data-page="home"] .hero{padding-top:185px!important}
body[data-page="home"] .hero-copy{position:relative!important;z-index:2!important}
body[data-page="home"] .trust{
  position:relative!important;
  z-index:3!important;
  margin-top:34px!important;
  color:rgba(255,255,255,.78)!important;
}
body[data-page="home"] .trust span{min-height:26px!important}
body[data-page="home"] .trust .check{display:inline-grid!important;place-items:center!important;width:22px!important;height:22px!important;background:transparent!important;color:var(--kk-turquoise)!important}

/* Dropdown reliability: keep menus above every hero layer and make the entire panel clickable. */
.kk-site-nav{z-index:10000!important;pointer-events:none}
.kk-site-nav__bar,.kk-site-nav__links,.kk-site-nav__balance,.kk-site-nav__mobile{pointer-events:auto}
.kk-site-nav__links{z-index:10002!important}
.kk-site-nav__dropdown{z-index:10003!important}
.kk-site-nav__submenu{
  z-index:10010!important;
  pointer-events:none!important;
  top:58px!important;
}
.kk-site-nav__submenu.open,
.kk-site-nav__dropdown:hover .kk-site-nav__submenu,
.kk-site-nav__dropdown:focus-within .kk-site-nav__submenu{
  visibility:visible!important;
  opacity:1!important;
  transform:translate(-50%,0)!important;
  pointer-events:auto!important;
}
.kk-site-nav__dropdown:hover .kk-site-nav__dropbtn{color:#fff!important}

@media(max-width:700px){
  body[data-page="home"] .hero{padding-top:145px!important}
  .sector-grid .sector{min-height:112px!important}
  .sector-grid .sector-icon{width:52px!important;height:52px!important}
  .sector-grid .sector-icon .lucide{width:30px!important;height:30px!important}
  body[data-page] :is(.icon,.contact-icon,.role-icon,.kk-rental-icon,.step-icon,.future-card>i,.security-card>i,.device-row>i,.res-card>i){width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important}
  body[data-page] :is(.icon,.contact-icon,.role-icon,.kk-rental-icon,.step-icon,.future-card>i,.security-card>i,.device-row>i,.res-card>i) .lucide{width:27px!important;height:27px!important}
}

/* v8: Home trust readability, exact sector-icon centering, documentation layout alignment */
body[data-page="home"] .trust{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  margin-top:34px!important;
  color:#fff!important;
  font-size:.86rem!important;
  font-weight:650!important;
  line-height:1.2!important;
}
body[data-page="home"] .trust span{
  display:inline-flex!important;
  align-items:center!important;
  min-height:36px!important;
  padding:7px 11px!important;
  border:1px solid rgba(193,246,237,.23)!important;
  border-radius:999px!important;
  background:rgba(2,53,60,.42)!important;
  color:#f4fffd!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
  backdrop-filter:blur(8px)!important;
  white-space:nowrap!important;
}
body[data-page="home"] .trust .check{
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  margin:0!important;
}
body[data-page="home"] .trust .check .lucide{width:20px!important;height:20px!important;display:block!important;margin:0!important}

body[data-page="home"] .sector-grid .sector-icon{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  line-height:0!important;
  overflow:hidden!important;
}
body[data-page="home"] .sector-grid .sector-icon > svg,
body[data-page="home"] .sector-grid .sector-icon > .lucide{
  display:block!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
  position:static!important;
  transform:none!important;
  vertical-align:middle!important;
}

body[data-page="docs"] .docs-hero > .wrap{
  width:min(1200px,calc(100% - 48px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body[data-page="docs"] .docs-hero .hero-in{
  max-width:830px!important;
  margin:0!important;
  text-align:left!important;
}
body[data-page="docs"] .docs-hero :is(h1,p){text-align:left!important;margin-left:0!important;margin-right:0!important}
body[data-page="docs"] .docs-hero .actions{justify-content:flex-start!important}
body[data-page="docs"] .docs-main > .docs-wrap{
  width:min(1200px,calc(100% - 48px))!important;
}
@media(max-width:700px){
  body[data-page="home"] .trust{gap:8px!important;font-size:.8rem!important}
  body[data-page="home"] .trust span{min-height:34px!important;padding:6px 9px!important;white-space:normal!important}
  body[data-page="docs"] .docs-hero > .wrap,
  body[data-page="docs"] .docs-main > .docs-wrap{width:min(100% - 24px,1200px)!important}
}

/* v9: Home hero must expand to contain trust pills above the context strip. */
body[data-page="home"] .hero{
  height:auto!important;
  min-height:max(820px,calc(100svh - var(--kk-strip-height)))!important;
  padding-bottom:96px!important;
  overflow:hidden!important;
}
body[data-page="home"] .hero-grid{
  min-height:0!important;
  align-items:center!important;
}
body[data-page="home"] .hero-copy{
  padding-bottom:0!important;
}
body[data-page="home"] .trust{
  margin-bottom:0!important;
}
@media(max-width:980px){
  body[data-page="home"] .hero{
    height:auto!important;
    min-height:0!important;
    padding-top:150px!important;
    padding-bottom:84px!important;
  }
}
@media(max-width:620px){
  body[data-page="home"] .hero{
    height:auto!important;
    min-height:0!important;
    padding-top:132px!important;
    padding-bottom:72px!important;
  }
}

/* 2026-10-03 Academy hero alignment fix
   video.html applies both .wrap and .hero-in to the same node. The generic
   .wrap margin:auto rule therefore centered the whole 830px hero block.
   Make that node a full site-width wrapper, while keeping the copy widths
   aligned with the other hero pages. */
body[data-page="video"] .hero > .wrap.hero-in{
  width:min(1200px,calc(100% - 48px))!important;
  max-width:1200px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:left!important;
}
body[data-page="video"] .hero > .wrap.hero-in h1{
  max-width:830px!important;
  margin-left:0!important;
  margin-right:0!important;
  text-align:left!important;
}
body[data-page="video"] .hero > .wrap.hero-in > p{
  max-width:720px!important;
  margin-left:0!important;
  margin-right:0!important;
  text-align:left!important;
}
body[data-page="video"] .hero > .wrap.hero-in .actions{
  justify-content:flex-start!important;
  margin-left:0!important;
  margin-right:0!important;
}
@media(max-width:700px){
  body[data-page="video"] .hero > .wrap.hero-in{
    width:min(100% - 24px,1200px)!important;
  }
}

/* v11 - Documentazione: same horizontal rhythm and hero geometry as the rest of the site. */
body[data-page="docs"] .hero > .wrap.hero-in{
  width:min(1200px,calc(100% - 48px))!important;
  max-width:1200px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:left!important;
}
body[data-page="docs"] .hero > .wrap.hero-in > :is(.pill,h1,p,.actions){
  margin-left:0!important;
  margin-right:0!important;
  text-align:left!important;
}
body[data-page="docs"] .hero > .wrap.hero-in h1{max-width:830px!important}
body[data-page="docs"] .hero > .wrap.hero-in > p{max-width:680px!important}
body[data-page="docs"] .hero > .wrap.hero-in .actions{justify-content:flex-start!important}
body[data-page="docs"] main .section > .wrap{
  width:min(1200px,calc(100% - 48px))!important;
  max-width:1200px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body[data-page="docs"] .head{
  width:100%!important;
}
@media(max-width:700px){
  body[data-page="docs"] .hero > .wrap.hero-in,
  body[data-page="docs"] main .section > .wrap{
    width:min(100% - 24px,1200px)!important;
  }
}

/* v12 - Spaziatura icone diagnostica / testo */
.device-console .device-row {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  column-gap: 18px;
  row-gap: 4px;
  padding: 16px 0;
}
.device-console .device-row > .device-icon {
  width: 48px;
  height: 48px;
  margin: 0;
  display: grid;
  place-items: center;
  align-self: center;
}
.device-console .device-row > .device-icon > svg,
.device-console .device-row > .device-icon > i,
.device-console .device-row > .device-icon [data-lucide] {
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.device-console .device-row > div {
  min-width: 0;
  padding-left: 2px;
}
.device-console .device-row > div > b {
  margin: 0 0 4px;
  line-height: 1.3;
}
.device-console .device-row > div > span {
  display: block;
  line-height: 1.45;
}
@media (max-width: 620px) {
  .device-console .device-row {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 14px;
  }
  .device-console .device-row > .status {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
  }
}

/* Mobile credentials — future-ready access */
.mobile-credentials{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#f3fbf9 100%)}
.mobile-credentials:before{content:"";position:absolute;width:440px;height:440px;right:-180px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(63,208,201,.14),transparent 68%);pointer-events:none}
.mobile-credentials__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(380px,.98fr);gap:72px;align-items:center}
.mobile-credentials__copy h2{max-width:720px;margin:8px 0 20px;color:var(--deep);font-size:clamp(2.35rem,4.7vw,4.2rem);line-height:1.01;letter-spacing:-.058em}
.mobile-credentials__copy>p:not(.eyebrow){max-width:680px;color:#5f6f72;font-size:1.02rem}
.mobile-credentials__points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:30px}
.mobile-credentials__point{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;padding:16px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.82)}
.mobile-credentials__point i{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;color:var(--kk-harbor);background:rgba(193,246,237,.58)}
.mobile-credentials__point .lucide{width:23px;height:23px;stroke-width:1.9}
.mobile-credentials__point b{display:block;margin:1px 0 3px;color:var(--kk-harbor);font-size:.9rem}
.mobile-credentials__point span{display:block;color:#687a7d;font-size:.77rem;line-height:1.45}
.mobile-credentials__visual{position:relative;min-height:500px;display:grid;place-items:center}
.mobile-phone{position:relative;z-index:2;width:min(286px,78%);aspect-ratio: .51;border:8px solid #26172d;border-radius:43px;background:#f8f3f8;box-shadow:0 35px 80px rgba(64,28,67,.2);padding:18px;transform:rotate(3deg)}
.mobile-phone:before{content:"";position:absolute;top:8px;left:50%;width:82px;height:21px;transform:translateX(-50%);border-radius:99px;background:#26172d}
.mobile-phone__screen{height:100%;padding:48px 14px 18px;border-radius:28px;background:linear-gradient(155deg,#351a3b,#160f24);overflow:hidden}
.mobile-phone__label{color:#cdbfd0;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.mobile-pass{position:relative;margin-top:20px;padding:20px 18px 18px;border-radius:22px;color:#fff;background:linear-gradient(145deg,#713a67,#4a234f 55%,#c84450);box-shadow:0 18px 40px #0005;overflow:hidden}
.mobile-pass:after{content:"";position:absolute;width:150px;height:150px;right:-65px;top:-70px;border-radius:50%;background:#ffb29f33}
.mobile-pass__brand{font-size:.8rem;font-weight:900;letter-spacing:-.02em}.mobile-pass__type{margin-top:42px;color:#ffd9cf;font-size:.64rem;text-transform:uppercase;letter-spacing:.1em}.mobile-pass__name{margin-top:4px;font-size:1.12rem;font-weight:850}.mobile-pass__meta{display:flex;justify-content:space-between;gap:8px;margin-top:24px;color:#eadfe9;font-size:.62rem}.mobile-phone__wallets{display:grid;gap:9px;margin-top:18px}.mobile-wallet-row{display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid #ffffff1b;border-radius:12px;color:#e9dfea;background:#ffffff0b;font-size:.72rem;font-weight:750}.mobile-wallet-row .lucide{width:17px;height:17px;color:var(--peach)}
.mobile-orbit{position:absolute;border:1px solid rgba(46,175,125,.20);border-radius:50%}.mobile-orbit--one{width:390px;height:390px}.mobile-orbit--two{width:480px;height:480px}.mobile-badge{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;padding:10px 13px;border:1px solid var(--line);border-radius:99px;color:var(--kk-harbor);background:#fff;box-shadow:0 12px 30px rgba(2,53,60,.10);font-size:.72rem;font-weight:850}.mobile-badge .lucide{width:17px;height:17px;color:var(--kk-emerald)}.mobile-badge--apple{top:19%;right:0}.mobile-badge--google{bottom:19%;left:0}
.mobile-credentials__note{margin-top:18px!important;color:#6f8082!important;font-size:.72rem!important;line-height:1.5}
@media(max-width:980px){.mobile-credentials__grid{grid-template-columns:1fr;gap:38px}.mobile-credentials__visual{min-height:470px}.mobile-badge--apple{right:12%}.mobile-badge--google{left:12%}}
@media(max-width:640px){.mobile-credentials__grid{gap:24px}.mobile-credentials__points{grid-template-columns:1fr}.mobile-credentials__visual{min-height:420px}.mobile-phone{width:230px}.mobile-orbit--one{width:310px;height:310px}.mobile-orbit--two{width:380px;height:380px}.mobile-badge--apple{right:0;top:18%}.mobile-badge--google{left:0;bottom:18%}}

/* Mobile credentials - interactive wallet demo */
.mobile-credentials__visual--interactive{min-height:550px;overflow:visible}
.mobile-wallet-demo{position:relative;z-index:3;width:390px;height:515px;overflow:hidden;border:1px solid rgba(2,53,60,.10);border-radius:34px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(241,249,247,.90));box-shadow:0 28px 70px rgba(2,53,60,.14),inset 0 1px 0 rgba(255,255,255,.9)}
.mobile-wallet-demo__frame{position:absolute;left:50%;top:0;width:520px;height:690px;border:0;transform:translateX(-50%) scale(.75);transform-origin:50% 0;background:transparent}
.mobile-wallet-demo__hint{position:absolute;z-index:5;left:50%;bottom:2px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(2,53,60,.10);border-radius:999px;color:#5f6f72;background:rgba(255,255,255,.92);box-shadow:0 8px 25px rgba(2,53,60,.08);font-size:.72rem;font-weight:700;white-space:nowrap;pointer-events:none}
.mobile-wallet-demo__hint .lucide{width:15px;height:15px;color:var(--emerald,#2EAF7D)}
.mobile-credentials__visual--interactive .mobile-badge{z-index:6}
@media(max-width:980px){.mobile-credentials__visual--interactive{min-height:525px}.mobile-wallet-demo{width:370px;height:490px}.mobile-wallet-demo__frame{transform:translateX(-50%) scale(.715)}.mobile-wallet-demo__hint{bottom:0}}
@media(max-width:640px){.mobile-credentials__visual--interactive{min-height:455px}.mobile-wallet-demo{width:min(100%,330px);height:430px;border-radius:28px}.mobile-wallet-demo__frame{transform:translateX(-50%) scale(.63)}.mobile-wallet-demo__hint{bottom:-2px;font-size:.67rem}.mobile-credentials__visual--interactive .mobile-badge--apple{right:-2px;top:16%}.mobile-credentials__visual--interactive .mobile-badge--google{left:-2px;bottom:18%}}

/* v19 - Compatibilita: hero allineata alle altre pagine */
body[data-page="dispositivi"] .hero .hero-in {
  width: min(100% - 40px, 1200px) !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
}
body[data-page="dispositivi"] .hero .hero-in > h1 {
  max-width: 820px;
}
body[data-page="dispositivi"] .hero .hero-in > p {
  max-width: 680px;
  margin-left: 0;
  margin-right: 0;
}
body[data-page="dispositivi"] .hero .actions {
  justify-content: flex-start !important;
}
@media (max-width: 640px) {
  body[data-page="dispositivi"] .hero .hero-in {
    width: min(100% - 24px, 1200px) !important;
  }
}

/* v31-R9 — Typography audit: all page headings use IBM Plex Mono Medium (500). */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .brand-title,
html body .hero-title,
html body .section-title,
html body .kk-section-title,
html body .kk-hero h1,
html body .demo-hero h1,
html body .contact-hero h1,
html body .legal-hero h1,
html body .docs-hero h1 {
  font-family:"IBM Plex Mono",ui-monospace,monospace!important;
  font-weight:500!important;
}

/* v31-R10 — Home: hero + context strip must fill the first viewport exactly. */
body[data-page="home"] .hero{
  height:min(820px,calc(100svh - var(--kk-strip-height)))!important;
  min-height:min(820px,calc(100svh - var(--kk-strip-height)))!important;
  padding-bottom:64px!important;
}
@media(max-width:980px){
  body[data-page="home"] .hero{
    height:calc(100svh - var(--kk-strip-height))!important;
    min-height:0!important;
    padding-top:132px!important;
    padding-bottom:48px!important;
  }
}
@media(max-width:620px){
  body[data-page="home"] .hero{
    height:calc(100svh - var(--kk-strip-height))!important;
    min-height:0!important;
    padding-top:112px!important;
    padding-bottom:32px!important;
  }
}