@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2")}

html{scroll-behavior:smooth}
body{margin:0;background:#F2F3EF;color:#16201D;font-family:"Schibsted Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#2445C7}
a:hover{color:#1A338F}
:focus-visible{outline:2px solid #2445C7;outline-offset:3px}
section[id]{scroll-margin-top:24px}

/* Motion */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes packet{0%{top:0;opacity:0}4%{opacity:1}20%{top:100%;opacity:1}24%{top:100%;opacity:0}100%{top:100%;opacity:0}}
@keyframes ping{0%{box-shadow:0 0 0 0 currentColor}14%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 9px transparent}}
@keyframes mark{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes slide{from{transform:translateY(46px)}to{transform:translateY(0)}}
.rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.pkt{position:absolute;left:-3px;width:8px;height:8px;border-radius:50%;background:currentColor;animation:packet 6s linear infinite}
.ping{animation:ping 6s ease-out infinite}
.hl{transform-box:fill-box;transform-origin:left center}
@supports (animation-timeline: view()){
  .hl{animation:mark linear both;animation-timeline:view();animation-range:entry 30% cover 50%}
  .slide{animation:slide linear both;animation-timeline:view();animation-range:entry 20% cover 55%}
}
.btn{transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rise,.pkt,.ping,.hl,.slide{animation:none!important}
  .pkt{display:none}
}

/* Tables scroll sideways on narrow screens instead of squashing */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll table{min-width:620px}

/* Spam trap: hidden from people, visible to bots */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Form states */
#invite-form input:invalid[data-touched],#invite-form select:invalid[data-touched]{border-color:#B3261E!important}
#invite-status.is-error{color:#B3261E}
#invite-status.is-ok{color:#16201D;font-weight:600}
button[disabled]{opacity:.6;cursor:progress!important}

/* Tablet and phone. The page is authored with inline styles, so these overrides need !important. */
@media (max-width: 960px){
  header,section,footer{padding-left:20px!important;padding-right:20px!important}
  section{padding-top:72px!important;padding-bottom:72px!important}
  #top{padding-top:48px!important}
  [style*="grid-template-columns"]:not([style*="14px"]){grid-template-columns:minmax(0,1fr)!important;gap:36px!important}
  [style*="grid-column: span 2"]{grid-column:auto!important}
  header nav>a:not(.btn){display:none}
  h1{font-size:42px!important}
  h2{font-size:32px!important}
  #faq svg{display:none}
  footer>div{flex-wrap:wrap;gap:12px 24px!important}
}
@media (max-width: 520px){
  header a{white-space:nowrap}
  header>nav>div>a:last-child{display:none}
  #data svg{display:none}
  header>a{font-size:17px!important}
  h1{font-size:36px!important}
}