/* KINGAI OS V15 — production polish, accessibility, viewport resilience, Aug 19 2026 */
:root{
  --v15-focus:#006edb;
  --v15-focus-ring:0 0 0 3px rgba(0,110,219,.24);
  --v15-ease:cubic-bezier(.22,.61,.36,1);
}

/* Accessibility + stable browser defaults */
html{scroll-padding-top:72px;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{min-width:280px;overflow-x:hidden}
main{isolation:isolate}
[id]{scroll-margin-top:72px}
img,svg,video{max-width:100%;height:auto}
button,a,summary{touch-action:manipulation}
input,select,textarea{max-width:100%;font:inherit;color:#111114;background:#fff}
a,button,summary,input,select,textarea{outline:none}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--v15-focus)!important;
  outline-offset:3px!important;
  box-shadow:var(--v15-focus-ring)!important;
}
.skip-link{
  position:fixed;z-index:99999;top:max(8px,env(safe-area-inset-top));left:12px;
  transform:translateY(-160%);padding:10px 14px;border-radius:999px;background:#111114;color:#fff!important;
  font:700 13px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-decoration:none;
  transition:transform .18s var(--v15-ease)
}
.skip-link:focus{transform:translateY(0)}

/* Keep long technical content inside the viewport */
pre,code,.dev-console,.download-meta,.article-container,.prose{max-width:100%}
pre,.dev-console{overflow:auto;-webkit-overflow-scrolling:touch}
code,pre,.download-meta dd,.trust-stat span,.flag-card p,.dev-tile p{overflow-wrap:anywhere;word-break:break-word}
table{max-width:100%;border-collapse:collapse}
.table-scroll,.prose table,.article-container table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Current navigation state is explicit and accessible */
.navlinks a[aria-current="page"]{font-weight:760!important}
.navlinks a[aria-current="page"]::after{opacity:1}
body.nav-open{overflow:hidden;overscroll-behavior:none}
body.nav-open .topbar{z-index:1002}

/* Product imagery should feel like system surfaces, not loose screenshots */
.v9-product-visual,.os-stage,.product-frame,.product-visual,.device-shell{
  overflow:hidden;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.v9-product-visual img,.os-stage img,.product-frame img,.product-visual img,.device-screen img{
  display:block;width:100%;height:auto
}
.preview-label{gap:8px;align-items:center}
.preview-label strong,.preview-label span,.preview-label a{overflow-wrap:anywhere}

/* Reduce layout work below the fold without delaying first meaningful content */
@supports (content-visibility:auto){
  .route-home .problem-strip,
  .route-home .flag-section,
  .route-home .trust-section,
  .route-home .faq-section,
  .route-home .early-access,
  body:not(.route-home) .page-section,
  body:not(.route-home) .flag-section,
  body:not(.route-home) .faq-section,
  body:not(.route-home) .final-cta,
  body:not(.route-home) .early-access{
    content-visibility:auto;
    contain-intrinsic-size:auto 760px;
  }
}

/* Desktop refinement: subtle interaction only where a pointer can hover */
@media(hover:hover) and (pointer:fine){
  .os-feature,.flag-card,.dev-tile,.trust-panel,.faq-list details,.privacy-item{
    transition:transform .22s var(--v15-ease),box-shadow .22s var(--v15-ease),border-color .22s var(--v15-ease)
  }
  .os-feature:hover,.flag-card:hover,.dev-tile:hover,.trust-panel:hover,.privacy-item:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 34px rgba(18,26,42,.075)!important;
    border-color:rgba(17,17,20,.12)!important
  }
  .btn{transition:transform .18s var(--v15-ease),box-shadow .18s var(--v15-ease),background-color .18s ease,border-color .18s ease}
  .btn:hover{transform:translateY(-1px)}
}

/* Security/privacy cards: always readable and never oversized */
.privacy-stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.privacy-item{min-width:0;padding:24px;border:1px solid rgba(17,17,20,.075);border-radius:22px;background:#fff}
.privacy-item .symbol{display:grid;place-items:center;width:42px;height:42px;margin-bottom:18px;border-radius:13px;background:#edf6ff;color:#0066cc;font-weight:800}
.privacy-item h3{margin:0 0 8px;color:#111114!important;font-size:22px;line-height:1.18;letter-spacing:-.028em}
.privacy-item p{margin:0;color:#62636a!important;font-size:15px;line-height:1.58}

/* Status/download/developer route hardening */
.route-download .download-meta{margin:20px 0}
.route-download .download-meta div{min-width:0}
.route-download .download-meta dd{min-width:0}
.route-download .dev-console pre{white-space:pre-wrap;word-break:break-all}
.route-developers pre,.route-security pre{overscroll-behavior-inline:contain}
.route-status .roadmap-strip span{white-space:normal}

/* Footer follows safe-area and keeps accordion state legible */
.footer{padding-bottom:max(18px,env(safe-area-inset-bottom))!important}
.footer-group summary::-webkit-details-marker{display:none}
.footer-group summary{list-style:none}
.footer-chevron{flex:0 0 auto}

/* Mobile and narrow-width resilience */
@media(max-width:767px){
  html{scroll-padding-top:62px}
  [id]{scroll-margin-top:62px}
  .topbar{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .nav{max-width:100%}
  .nav-actions{min-width:0;gap:6px!important}
  .lang{white-space:nowrap}
  .menu{flex:0 0 auto}
  .navlinks{max-height:min(70dvh,520px)!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch}
  .navlinks a{min-height:44px;display:flex!important;align-items:center!important}
  .actions .btn{min-height:46px}
  input,select,textarea{font-size:16px!important;min-height:46px}
  .route-early-access form .btn{width:100%!important;min-height:48px!important}
  .privacy-stack{grid-template-columns:1fr;gap:9px}
  .privacy-item{padding:18px;border-radius:19px}
  .privacy-item .symbol{width:40px;height:40px;margin-bottom:12px}
  .privacy-item h3{font-size:19px}
  .privacy-item p{font-size:14px;line-height:1.55}
  .permission-title{align-items:flex-start!important}
  .permission-actions{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  .permission-actions>*{min-height:42px!important;display:grid!important;place-items:center!important}
  .preview-label{flex-wrap:wrap!important;font-size:11.5px!important;line-height:1.45!important}
  .route-download .download-meta div{grid-template-columns:86px minmax(0,1fr)!important}
}

@media(max-width:359px){
  .topbar,.nav{height:52px!important;min-height:52px!important}
  .brand{font-size:13.5px!important;gap:6px!important}
  .brand-mark{width:22px!important;height:22px!important}
  .nav-actions{gap:4px!important}
  .lang{font-size:10.5px!important;padding-inline:6px!important;min-height:38px!important}
  .menu{width:40px!important;height:40px!important}
  .route-home .hero h1{font-size:37px!important}
  html[lang^="zh"] .route-home .hero h1{font-size:36px!important}
  body:not(.route-home) .page-hero h1{font-size:35px!important}
  .flag-head h2,.page-section h2,.os-intro-head h2{font-size:29px!important}
  .route-status .roadmap-strip{grid-template-columns:1fr!important}
}

/* Short mobile landscape: preserve content instead of forcing oversized hero spacing */
@media(max-width:900px) and (max-height:520px) and (orientation:landscape){
  .route-home .hero{padding-top:22px!important}
  .route-home .hero h1{font-size:40px!important;max-width:12ch!important}
  body:not(.route-home) .page-hero{padding:28px 0!important}
  body:not(.route-home) .page-hero h1{font-size:38px!important}
  .navlinks{max-height:calc(100dvh - 76px)!important}
}

/* OS/browser accessibility preferences */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .os-feature:hover,.flag-card:hover,.dev-tile:hover,.trust-panel:hover,.privacy-item:hover,.btn:hover{transform:none!important}
}
@media(forced-colors:active){
  .btn,.lang,.menu,.flag-card,.os-feature,.dev-tile,.trust-panel,.privacy-item,.footer-group{forced-color-adjust:auto;border:1px solid CanvasText!important}
  .stage-badge,.status-pill{border:1px solid CanvasText!important}
}