/* The public site: front page and request-access page. Self-contained, so the
   app's own stylesheet never has to load for a visitor who is not signed in. */
@font-face { font-family: "Schibsted Grotesk"; src: url("/static/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
             font-weight: 400 900; font-style: normal; font-display: swap; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.site { margin: 0; background: #0C1E2E; color: #F3F6F9; overflow-x: hidden;
            font: 16px/1.5 "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; }
.site a { color: #FF8A5C; }
.site a:hover { color: #FFB08F; }
.site a:focus-visible, .site button:focus-visible, .site input:focus-visible, .site select:focus-visible,
.site textarea:focus-visible { outline: 3px solid #FF8A5C; outline-offset: 2px; }
.site h1, .site h2, .site h3, .site p { margin: 0; }

.s-top, .s-hero, .s-wrap, .s-foot { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.s-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 22px; }
.site .s-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.s-nav { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; font-size: 15px; }
.site .s-nav a { color: #C5D2DD; text-decoration: none; padding: 12px 0; }
.site .s-nav a:hover { color: #fff; }
.site .s-nav .s-login { color: #fff; font-weight: 600; border: 1px solid #5B7388; border-radius: 999px; padding: 11px 22px; }
.site .s-nav .s-login:hover { border-color: #fff; }

.s-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; padding-top: 56px; padding-bottom: 96px; }
.s-hero.s-top-align { align-items: flex-start; padding-top: 48px; }
.s-hero-text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.s-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #FF8A5C; }
.s-hero h1 { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.04; letter-spacing: -.03em; font-weight: 800; color: #fff; }
.s-hero h1.s-h1-small { font-size: clamp(36px, 4.4vw, 54px); line-height: 1.06; }
.s-lede { font-size: 19px; color: #C5D2DD; max-width: 520px; }
.s-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.site .s-btn { display: inline-block; background: #F05A28; color: #0C1E2E; text-decoration: none; font: inherit; font-weight: 700; font-size: 17px;
               border: 0; border-radius: 999px; padding: 15px 30px; cursor: pointer; align-self: flex-start; }
.site .s-btn:hover { background: #FF7A4D; color: #0C1E2E; }
.site .s-link { color: #fff; text-decoration: none; font-weight: 600; font-size: 17px; padding: 15px 8px; }

/* The layered cards: one 3D space, three depths. */
.s-stage { flex: 1 1 480px; min-width: 0; height: 520px; perspective: 1400px; position: relative; }
.s-glow { position: absolute; left: 12%; top: 16%; width: 76%; height: 68%; border-radius: 50%; background: #F05A28; opacity: .22; filter: blur(90px); }
.s-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .25s ease-out; transform: rotateX(6deg) rotateY(-12deg); }
.s-card { position: absolute; border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 14px;
          box-shadow: 0 40px 80px rgba(0,0,0,.45); }
.s-card p { display: flex; gap: 10px; align-items: flex-start; }
.s-card strong { font-weight: 700; }
.s-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 16px; }
.s-card-a { left: 4%; top: 6%; width: 64%; background: #fff; color: #1C1B19; transform: translateZ(0); animation: s-float-a 7s ease-in-out infinite; }
.s-card-b { right: 0; top: 36%; width: 56%; background: #13293C; color: #F3F6F9; border: 1px solid #2C4A62; transform: translateZ(90px); animation: s-float-b 8s ease-in-out infinite; }
.s-card-c { left: 14%; bottom: 2%; width: 52%; background: #fff; color: #1C1B19; transform: translateZ(170px); animation: s-float-c 6s ease-in-out infinite; }
.s-card-a .s-dim, .s-card-c .s-dim { color: #6B665E; font-size: 13px; }
.s-card-b .s-dim { color: #A9B8C6; font-size: 13px; }
.s-ok { color: #1F4D3A; font-weight: 600; font-size: 13px; }
.s-tag { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #FF8A5C; }
.s-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; }
.s-dot-o { background: #F05A28; } .s-dot-g { background: #1F4D3A; } .s-dot-n { background: #0C1E2E; }
.s-chips { display: flex; gap: 10px; }
.s-chip { border: 1px solid #5B7388; font-weight: 600; border-radius: 999px; padding: 8px 18px; }
.s-chip-on { background: #F05A28; border-color: #F05A28; color: #0C1E2E; font-weight: 700; }
.s-bar { height: 8px; border-radius: 999px; background: #E2DED6; overflow: hidden; }
.s-bar div { width: 83%; height: 100%; background: #1F4D3A; }
@keyframes s-float-a { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes s-float-b { 0%, 100% { translate: 0 0; } 50% { translate: 0 12px; } }
@keyframes s-float-c { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@media (prefers-reduced-motion: reduce) { .s-card { animation: none; } .s-tilt { transition: none; } html { scroll-behavior: auto; } }
/* On a phone the cards stop overlapping: a readable stack, stepped left and right. */
@media (max-width: 700px) {
  .s-stage { height: auto; flex-basis: 100%; perspective: 900px; }
  .s-tilt { position: static; display: flex; flex-direction: column; gap: 16px; transform: rotateX(4deg) rotateY(-5deg); }
  .s-card { position: static; width: 88%; animation: none; box-shadow: 0 20px 40px rgba(0,0,0,.4); }
  .s-card-a, .s-card-c { align-self: flex-start; transform: none; }
  .s-card-b { align-self: flex-end; transform: none; }
  .s-nav a:not(.s-login) { display: none; }
  .s-hero { padding-top: 32px; padding-bottom: 64px; }
  .s-band { padding: 64px 0; }
}

.s-band { padding: 96px 0; }
.s-band.s-mid { background: #13293C; padding: 80px 0; }
.s-band.s-light { background: #F4F2EE; color: #1C1B19; }
.s-wrap { display: flex; flex-direction: column; gap: 48px; }
.s-head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.s-band h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -.02em; font-weight: 800; color: #fff; }
.s-band.s-light h2 { color: #1C1B19; }
.s-head p, .s-split-a p { font-size: 18px; color: #C5D2DD; }
.s-light .s-head p, .s-light .s-split-a p { color: #55514A; }
.s-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.s-feature { background: #fff; border: 1px solid #E2DED6; border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.s-feature h3 { font-size: 22px; font-weight: 700; }
.s-feature p { color: #55514A; }
.s-step { border-top: 2px solid #F05A28; padding-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.s-num { font-size: 44px; font-weight: 800; color: #FF8A5C; line-height: 1; }
.s-step h3 { font-size: 21px; font-weight: 700; color: #fff; }
.s-step p { color: #C5D2DD; }
.s-wrap.s-split { flex-direction: row; flex-wrap: wrap; }
.s-wrap.s-center { align-items: center; }
.s-split-a { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.s-mid h2 { font-size: clamp(26px, 3vw, 36px); }
.s-perms { flex: 1 1 460px; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; color: #C5D2DD; }
.s-perms li { background: #0C1E2E; border: 1px solid #2C4A62; border-radius: 14px; padding: 18px 20px; }
.s-perms strong { color: #fff; }

.s-price { flex: 1 1 380px; min-width: 0; background: #0C1E2E; color: #F3F6F9; border-radius: 24px; padding: 36px;
           display: flex; flex-direction: column; gap: 18px; box-shadow: 0 30px 60px rgba(12,30,46,.25); }
.s-price-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 17px; color: #C5D2DD; }
.s-amount { font-size: 60px; font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1; }
.s-first { font-size: 19px; font-weight: 700; color: #FF8A5C; }
.s-price ul { margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 8px; color: #C5D2DD; }
.s-price li::marker { color: #FF8A5C; }
.s-fine { font-size: 14px; color: #A9B8C6; }

.s-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; color: #C5D2DD; }
.s-steps li { display: flex; gap: 16px; align-items: flex-start; }
.s-steps strong { color: #fff; }
.s-n { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #5B7388; color: #fff; font-weight: 800;
       display: flex; align-items: center; justify-content: center; }
.s-n-on { background: #F05A28; border-color: #F05A28; color: #0C1E2E; }
.s-form { flex: 1 1 420px; min-width: 0; background: #fff; color: #1C1B19; border-radius: 24px; padding: 36px;
          display: flex; flex-direction: column; gap: 8px; box-shadow: 0 40px 80px rgba(0,0,0,.4); }
.s-form h2 { font-size: 26px; font-weight: 800; margin-bottom: 8px; }
.s-form label { font-size: 14px; font-weight: 600; margin-top: 10px; }
.s-form input, .s-form select, .s-form textarea { font: inherit; font-size: 16px; padding: 13px 14px; border: 1px solid #8C867B; border-radius: 12px;
          background: #fff; color: #1C1B19; width: 100%; min-height: 48px; }
.s-form textarea { resize: vertical; }
.s-form .s-btn { margin-top: 16px; }
.s-opt { font-weight: 400; color: #6B665E; }
.s-fine-dark { font-size: 13px; color: #6B665E; margin-top: 8px; }
.site .s-dark-link { color: #A63A12; }
.site .s-dark-link:hover { color: #7A2A0C; }
.s-problem { background: #FBEAE5; color: #8A2C1A; border-radius: 12px; padding: 12px 14px; font-weight: 600; }
.s-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.s-foot { padding-top: 40px; padding-bottom: 40px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
          font-size: 14px; color: #A9B8C6; }
.s-foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.site .s-foot a { color: #C5D2DD; padding: 12px 0; }