/* Layout for the landing page. Colours, type and spacing come from tokens.css (brand pack 2026-10-14). */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(fonts/IBMPlexSans-Regular.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(fonts/IBMPlexSans-Medium.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(fonts/IBMPlexSans-SemiBold.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(fonts/IBMPlexMono-Medium.woff2) format("woff2")}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--ke-bg-inverse);color:var(--ke-text-inverse);-webkit-font-smoothing:antialiased}

.page{position:relative;min-height:100%;display:flex;flex-direction:column;overflow:hidden}
.motif{position:absolute;top:0;right:0;width:min(60vw,640px);height:auto;pointer-events:none}
.motif line{stroke:var(--ke-color-orange)}

header,main,footer{position:relative;width:100%;max-width:1120px;margin:0 auto;padding:0 var(--ke-gutter)}
header{padding-top:var(--ke-space-6)}
.brand{display:inline-block;padding:9px 0}
.brand img{height:36px;width:auto;display:block}

main{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:var(--ke-space-9);padding-bottom:var(--ke-space-9)}
.ke-label{color:var(--ke-color-silver);margin:0 0 var(--ke-space-5)}
h1{font-size:var(--ke-type-display-size);line-height:var(--ke-type-display-line);font-weight:var(--ke-type-display-weight);margin:0 0 var(--ke-space-4);max-width:18ch}
.lead{font-size:var(--ke-type-h2-size);line-height:var(--ke-type-h2-line);color:var(--ke-color-silver);margin:0 0 var(--ke-space-7);max-width:36ch}
.ke-btn{align-self:flex-start;padding:var(--ke-space-3) var(--ke-space-5)}
.ke-btn:hover,.ke-btn:focus-visible{background:#ff7340}
.ke-btn:focus-visible{outline:2px solid var(--ke-color-white);outline-offset:3px}

footer{padding-top:var(--ke-space-5);padding-bottom:var(--ke-space-6);border-top:1px solid var(--ke-color-graphite);font-size:var(--ke-type-small-size);line-height:var(--ke-type-small-line);color:var(--ke-color-silver);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--ke-space-4) var(--ke-space-7)}
footer address{font-style:normal}
footer p{margin:0}
footer .company{color:var(--ke-color-white);font-weight:500}
footer a{color:var(--ke-color-orange);text-decoration:none;white-space:nowrap}
footer a:hover,footer a:focus-visible{text-decoration:underline}

@media (max-width:600px){
  header,main,footer{padding-left:var(--ke-space-4);padding-right:var(--ke-space-4)}
  h1{font-size:var(--ke-type-h1-size);line-height:var(--ke-type-h1-line)}
  .lead{font-size:var(--ke-type-h3-size);line-height:var(--ke-type-h3-line)}
  .motif{width:90vw;opacity:.6}
}