@font-face{
  font-family:"Lexend";
  src:url("../fonts/Lexend-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Lexend";
  src:url("../fonts/Lexend-Medium.ttf") format("truetype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Lexend";
  src:url("../fonts/Lexend-SemiBold.ttf") format("truetype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Lexend";
  src:url("../fonts/Lexend-Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  --ink:#17343c;
  --petrol:#1f4e5f;
  --petrol-deep:#143744;
  --muted:#536970;
  --green:#587865;
  --green-strong:#244d40;
  --green-soft:#e7eee9;
  --coral:#b96f60;
  --ochre:#c49a4c;
  --gold:var(--ochre);
  --cream-stroke:#f2e8d5;
  --cream-cover:#f3e8d0;
  --cream-paper:#f6f2e9;
  --mineral:#f5f6f2;
  --paper:#fff;
  --line:#d7dfdc;
  --line-strong:#becbc7;
  --danger:var(--coral);
  --shell:1240px;
  --reading:720px;
  --header-height:88px;
  --radius-control:6px;
  --radius-surface:8px;
  --font:"Lexend",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --press:.16s;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  overflow-x:hidden;
  background:var(--mineral);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.68;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body,button,input,select,textarea,summary{font-family:var(--font)}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;letter-spacing:0}
button,summary{color:inherit}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,h4,ul,ol,dl,dd,figure{margin-top:0}
h1,h2,h3,h4{letter-spacing:0;text-wrap:balance}
p,li{letter-spacing:0}
section[id]{scroll-margin-top:104px}
::selection{background:color-mix(in srgb, var(--ochre) 42%, var(--paper));color:var(--ink)}
:focus-visible{outline:3px solid var(--gold);outline-offset:4px}

.shell{
  width:min(var(--shell),calc(100% - 64px));
  margin-inline:auto;
}
.reading{width:min(var(--reading),100%)}
.skip-link{
  position:fixed;
  top:12px;
  left:16px;
  z-index:120;
  min-height:44px;
  display:flex;
  align-items:center;
  padding:0 16px;
  border-radius:var(--radius-control);
  background:var(--ink);
  color:var(--paper);
  font-weight:600;
  transform:translateY(-160%);
  transition:transform .2s var(--ease);
}
.skip-link:focus{transform:none}
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.site-header{
  position:relative;
  z-index:50;
  min-height:var(--header-height);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background:color-mix(in srgb, var(--paper) 94%, transparent);
}
.site-header.is-overlay{
  position:absolute;
  inset:0 0 auto;
  border-bottom:0;
  background:transparent;
}
.header-inner{
  min-height:var(--header-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.brand-lockup{
  min-width:0;
  display:flex;
  align-items:center;
  gap:13px;
}
.brand{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:inherit;
}
.brand-mark{
  width:40px;
  height:40px;
  flex:0 0 auto;
  display:block;
}
.brand-type{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}
.brand-word{
  color:var(--petrol);
  font-size:21px;
  font-weight:600;
  line-height:1;
}
.brand-ro{color:var(--ochre)}
.brand-tag{
  color:#5c7178;
  font-size:10.5px;
  font-weight:400;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
}
.trial-label{
  min-height:24px;
  display:inline-flex;
  align-items:center;
  padding:0 8px;
  border:1px solid var(--line-strong);
  border-radius:4px;
  background:color-mix(in srgb, var(--paper) 72%, transparent);
  color:var(--muted);
  font-size:11px;
  font-weight:600;
}
.nav-cluster{
  display:flex;
  align-items:center;
  gap:28px;
}
.primary-nav{
  display:flex;
  align-items:center;
  gap:28px;
}
.primary-nav a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  border-bottom:1px solid transparent;
  color:var(--ink);
  font-size:14px;
  font-weight:500;
  transition:border-color var(--press) var(--ease-out),color var(--press) var(--ease-out),background-color var(--press) var(--ease-out);
}
.primary-nav a[aria-current="page"]{border-bottom-color:var(--gold);color:var(--petrol)}

.menu-toggle{
  width:44px;
  height:44px;
  display:none;
  place-items:center;
  padding:0;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-control);
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  cursor:pointer;
}
.menu-icon,
.menu-icon::before,
.menu-icon::after{
  width:20px;
  height:2px;
  display:block;
  background:var(--ink);
  content:"";
  transition:transform .2s var(--ease),opacity .2s var(--ease);
}
.menu-icon{position:relative}
.menu-icon::before{position:absolute;top:-6px;left:0}
.menu-icon::after{position:absolute;top:6px;left:0}
.menu-toggle[aria-expanded="true"] .menu-icon{background:transparent}
.menu-toggle[aria-expanded="true"] .menu-icon::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-icon::after{transform:translateY(-6px) rotate(-45deg)}

.role-switcher{position:relative}
.role-switcher summary{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0 16px;
  border-radius:var(--radius-control);
  background:var(--petrol);
  color:var(--paper);
  font-size:14px;
  font-weight:600;
  list-style:none;
  cursor:pointer;
  transition:background-color var(--press) var(--ease-out),transform var(--press) var(--ease-out);
}
.role-switcher summary::-webkit-details-marker{display:none}
.role-switcher summary:active{transform:scale(.97)}
.chevron{
  width:8px;
  height:8px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s var(--ease);
}
.role-switcher[open] .chevron{transform:rotate(225deg) translate(-2px,-2px)}
.role-panel{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:min(350px,calc(100vw - 32px));
  padding:8px;
  border:1px solid var(--line);
  border-radius:var(--radius-surface);
  background:var(--paper);
  box-shadow:0 20px 42px -24px color-mix(in srgb, var(--ink) 52%, transparent);
}
.role-panel-label{
  margin:0;
  padding:8px 12px 10px;
  color:var(--muted);
  font-size:11px;
  font-weight:600;
}
.role-list{margin:0;padding:0;list-style:none}
.role-link{
  min-height:58px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:16px;
  padding:9px 12px;
  border-top:1px solid var(--line);
  transition:background-color var(--press) var(--ease-out);
}
.role-link strong{display:block;font-size:14px;font-weight:600}
.role-link small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}
.role-link[aria-current="page"] strong::after{
  content:" · här";
  color:var(--gold);
  font-size:11px;
}
.arrow{color:var(--gold);font-size:18px}

.button{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 17px;
  border:1px solid transparent;
  border-radius:var(--radius-control);
  background:var(--petrol);
  color:var(--paper);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background-color var(--press) var(--ease-out),border-color var(--press) var(--ease-out),color var(--press) var(--ease-out),transform var(--press) var(--ease-out);
}
.button:active{transform:scale(.97)}
.button.secondary{
  border-color:var(--line-strong);
  background:var(--paper);
  color:var(--ink);
}
.button.ghost{
  border-color:transparent;
  background:transparent;
  color:var(--petrol);
}
.button.danger{background:var(--danger)}
.icon-button{
  width:44px;
  height:44px;
  display:inline-grid;
  place-items:center;
  padding:0;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-control);
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
  color:var(--petrol);
  font-size:12px;
  font-weight:600;
}
.eyebrow::before{
  width:28px;
  height:1px;
  flex:0 0 auto;
  background:var(--gold);
  content:"";
}
.display-title{
  margin-bottom:24px;
  color:var(--ink);
  font-size:76px;
  font-weight:600;
  line-height:1.03;
}
.page-title{
  margin-bottom:20px;
  font-size:60px;
  font-weight:600;
  line-height:1.08;
}
.section-title{
  margin-bottom:18px;
  font-size:52px;
  font-weight:500;
  line-height:1.14;
}
.lead{
  max-width:66ch;
  color:var(--muted);
  font-size:19px;
  line-height:1.75;
}
.muted{color:var(--muted)}
.meta{
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.inline-link{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--line-strong);
  color:var(--petrol);
  font-weight:600;
}
.status-note{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:15px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
}
.status-dot{
  width:8px;
  height:8px;
  flex:0 0 auto;
  margin-top:7px;
  border-radius:50%;
  background:var(--green);
}
.status-dot.demo{background:var(--gold)}

.site-footer{
  padding:42px 0 38px;
  border-top:1px solid var(--line);
  background:var(--paper);
}
.footer-grid{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:start;
  gap:48px;
}
.footer-grid--compact{grid-template-columns:auto 1fr}
.footer-brand .brand-mark{width:40px;height:40px}
.footer-copy{
  max-width:760px;
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.75;
}
.footer-copy a{border-bottom:1px solid var(--line-strong);color:var(--ink)}
.footer-home{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--ink);
  font-size:13px;
  font-weight:600;
}

@media(max-width:960px){
  .display-title{font-size:64px}
  .page-title{font-size:52px}
  .section-title{font-size:46px}
  .footer-grid{grid-template-columns:auto 1fr;gap:28px 38px}
  .footer-home{grid-column:2}
}

@media(max-width:820px){
  :root{--header-height:84px}
  .shell{width:min(var(--shell),calc(100% - 40px))}
  .brand-mark{width:38px;height:38px}
  .brand-word{font-size:19px}
  .trial-label{font-size:10px}
  .menu-toggle{display:grid}
  .nav-cluster{
    position:absolute;
    top:calc(var(--header-height) - 1px);
    left:20px;
    right:20px;
    display:none;
    align-items:stretch;
    gap:0;
    padding:8px;
    border:1px solid var(--line);
    border-radius:var(--radius-surface);
    background:var(--paper);
    box-shadow:0 20px 42px -24px color-mix(in srgb, var(--ink) 52%, transparent);
  }
  .nav-cluster.is-open{display:block}
  .primary-nav{display:block}
  .primary-nav a{
    width:100%;
    padding:0 13px;
    border-bottom:1px solid var(--line);
  }
  .primary-nav a[aria-current="page"]{border-bottom-color:var(--line);background:var(--mineral)}
  .role-switcher{margin-top:8px}
  .role-switcher summary{width:100%;justify-content:space-between}
  .role-panel{
    position:static;
    width:100%;
    margin-top:6px;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
}

@media(max-width:600px){
  .shell{width:min(var(--shell),calc(100% - 32px))}
  .brand-lockup{gap:8px}
  .brand-mark{width:36px;height:36px}
  .brand-word{font-size:18px}
  .brand-tag{font-size:9.5px;letter-spacing:.14em}
  .trial-label{padding:0 6px}
  .display-title{font-size:44px}
  .page-title{font-size:40px}
  .section-title{font-size:34px}
  .lead{font-size:17px}
  .footer-grid{grid-template-columns:1fr;gap:20px}
  .footer-home{grid-column:auto}
}

@media(max-width:360px){
  .shell{width:min(var(--shell),calc(100% - 24px))}
  .brand-word{font-size:17px}
  .brand-tag{letter-spacing:.12em}
  .trial-label{display:none}
  .nav-cluster{left:12px;right:12px}
}

@media(hover:hover) and (pointer:fine){
  .primary-nav a:hover{border-bottom-color:var(--gold);color:var(--petrol)}
  .role-switcher summary:hover{background:var(--petrol-deep)}
  .role-link:hover{background:var(--mineral)}
  .button:hover{background:var(--petrol-deep)}
  .button.secondary:hover{border-color:var(--petrol);background:var(--mineral)}
  .button.ghost:hover{background:var(--mineral)}
  .inline-link:hover{border-bottom-color:var(--gold)}
}
@media(max-width:820px) and (hover:hover) and (pointer:fine){
  .primary-nav a:hover{border-bottom-color:var(--line);background:var(--mineral)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}