@font-face{font-family:'Schibsted Grotesk';src:url('../fonts/SchibstedGrotesk.ttf') format('truetype');font-weight:400 900;font-style:normal;font-display:swap}
/* ============================================================
   Tripi sign-in — fully recreated in HTML/CSS over the
   photographic background. Desktop matches the reference; the
   whole screen scales with width. Mobile stacks (see bottom).
   1cqw = 1% of the stage width.
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
.lg-body{font-family:'Schibsted Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#0a1f3d;color:#1b2948;-webkit-font-smoothing:antialiased}

.lg-stage{position:relative;width:100vw;aspect-ratio:1672/870;margin:0 auto;
  background:url("../img/login-bg.png") center/100% 100% no-repeat;container-type:inline-size;overflow:hidden}

.lg-card{position:absolute;background:#ffffff;border-radius:1.5cqw;box-shadow:0 1.6cqw 3.6cqw rgba(12,32,72,.14)}

/* ---------------- MARKETING ---------------- */
.lg-mkt{position:absolute;left:2.55%;top:4.65%;width:47%}
.lg-logo{height:3.5cqw;width:auto;display:block;margin:0 0 2cqw}
.lg-tag{font-size:2.95cqw;line-height:1.05;font-weight:800;letter-spacing:-.028em;margin:0 0 1.05cqw;color:#0a1a40;white-space:nowrap}
.lg-tag .c-teal{color:#10a8a0}
.lg-tag .c-blue{color:#0c50eb}
.lg-sub{font-size:1.04cqw;line-height:1.5;color:#43506a;margin:0 0 1.35cqw;font-weight:500}
.lg-rule{display:flex;align-items:center;gap:.45cqw;margin:0 0 2.3cqw}
.lg-rule i{height:.32cqw;border-radius:1cqw;display:block}
.lg-rule .r1{width:2.7cqw;background:#1d4ed8}.lg-rule .r2{width:1.7cqw;background:#10a8a0}.lg-rule .r3{width:1.05cqw;background:#b9d2ee}.lg-rule .r4{width:.7cqw;background:#dce7f6}
.lg-feats{display:flex;gap:1.5cqw}
.lg-feat{flex:1;min-width:0}
.lg-feat .ic{display:block;width:2.05cqw;height:2.05cqw;margin:0 0 .95cqw}
.lg-feat .ic svg{width:100%;height:100%}
.ic-shield{color:#2552db}.ic-pin{color:#10a8a0}.ic-bar{color:#2552db}.ic-bulb{color:#9333ea}
.lg-feat h3{font-size:.94cqw;font-weight:700;color:#1b2948;margin:0 0 .35cqw}
.lg-feat p{font-size:.75cqw;line-height:1.36;color:#6a7890;margin:0;font-weight:500}

/* ---------------- SIGN-IN CARD ---------------- */
.lg-signin{left:49.7%;top:8.49%;width:23.45%;padding:2.5cqw 2.35cqw 1.9cqw;display:flex;flex-direction:column}
.lg-si-head{display:flex;align-items:center;gap:1cqw;margin:0 0 1.9cqw}
.lg-si-badge{flex:none;width:4.7cqw;height:4.7cqw;border-radius:50%;display:grid;place-items:center;color:#1f5fe0;
  background:radial-gradient(circle at 50% 45%,#eaf1ff 0%,#dceaff 60%,#cfe0ff 100%)}
.lg-si-badge svg{width:4.7cqw;height:4.7cqw}
.lg-si-head h2{font-size:1.26cqw;font-weight:800;color:#16223f;margin:0;letter-spacing:-.01em}
.lg-si-head p{font-size:.83cqw;color:#5a6880;margin:.18cqw 0 0;font-weight:500}

.lg-form{display:flex;flex-direction:column}
.lg-field{display:flex;align-items:center;gap:.75cqw;height:3.15cqw;border:.09cqw solid #e6eaf1;border-radius:.78cqw;
  padding:0 .9cqw;margin:0 0 1cqw;background:#fff;cursor:text;transition:border-color .12s,box-shadow .12s}
.lg-field:focus-within{border-color:#1f5fe0;box-shadow:0 0 0 .18cqw rgba(31,95,224,.14)}
.lg-field .ic{flex:none;width:1.22cqw;height:1.22cqw;color:#7a8095}
.lg-field .ic svg{width:100%;height:100%}
.lg-field input{flex:1;min-width:0;border:0;outline:none;background:none;font:inherit;font-size:.92cqw;font-weight:500;color:#1d2746}
.lg-field input::placeholder{color:#838a9c;font-weight:400}
.lg-eye{flex:none;width:1.35cqw;height:1.35cqw;padding:0;border:0;background:none;cursor:pointer;color:#7d8499;display:grid;place-items:center}
.lg-eye svg{width:100%;height:100%}.lg-eye .slash{opacity:1}.lg-eye.on .slash{opacity:0}

.lg-si-row{display:flex;align-items:center;justify-content:space-between;margin:.25cqw 0 1.2cqw}
.lg-check{display:flex;align-items:center;gap:.55cqw;font-size:.86cqw;color:#46546f;cursor:pointer;user-select:none;font-weight:500}
.lg-check input{position:absolute;opacity:0;width:0;height:0}
.lg-check .bx{width:1.15cqw;height:1.15cqw;border-radius:.28cqw;border:.1cqw solid #c7cfde;background:#fff;display:grid;place-items:center;transition:.12s;flex:none}
.lg-check .bx svg{width:.78cqw;height:.78cqw;color:#fff;opacity:0;transform:scale(.5);transition:.12s}
.lg-check input:checked + .bx{background:#1f5fe0;border-color:#1f5fe0}
.lg-check input:checked + .bx svg{opacity:1;transform:scale(1)}
.lg-link{font-size:.86cqw;font-weight:600;color:#1f5fe0;text-decoration:none}
.lg-link:hover{text-decoration:underline}

.lg-btn{display:flex;align-items:center;justify-content:center;gap:.55cqw;height:3.35cqw;border-radius:.8cqw;
  font:inherit;font-size:.98cqw;font-weight:700;cursor:pointer;text-decoration:none;border:0;transition:filter .12s,background .12s}
.lg-btn svg{width:1.15cqw;height:1.15cqw}
.lg-btn-primary{background:linear-gradient(180deg,#3373ff,#1f54e0);color:#fff;box-shadow:0 .7cqw 1.5cqw rgba(31,84,224,.34)}
.lg-btn-primary:hover{filter:brightness(1.05)}
.lg-btn-outline{margin-top:0;background:#fff;color:#16335f;border:.1cqw solid #d2dcef}
.lg-btn-outline:hover{background:#f5f8ff;border-color:#bccbe9}
.lg-btn-outline svg{color:#1d4ed8}

.lg-or{display:flex;align-items:center;gap:.8cqw;color:#9aa6bd;font-size:.78cqw;font-weight:600;letter-spacing:.06em;margin:1.05cqw 0}
.lg-or::before,.lg-or::after{content:"";flex:1;height:.06cqw;background:#e7eaf1}

.lg-secure{display:flex;align-items:flex-start;gap:.7cqw;margin:1.5cqw 0 1.4cqw}
.lg-secure .ic{flex:none;width:2.2cqw;height:2.2cqw;border-radius:.55cqw;background:#eef3ff;color:#1f5fe0;display:grid;place-items:center}
.lg-secure .ic svg{width:1.2cqw;height:1.2cqw}
.lg-secure .tx{font-size:.8cqw;color:#62718d;line-height:1.45;font-weight:500}
.lg-secure .tx b{display:block;color:#22324f;font-weight:700;font-size:.86cqw;margin-bottom:.1cqw}

.lg-create{display:flex;align-items:center;gap:.7cqw;border-top:.07cqw solid #eef1f6;padding-top:1.25cqw;margin-top:auto;text-decoration:none}
.lg-create .ic{flex:none;width:1.7cqw;height:1.7cqw;color:#5a6880}
.lg-create .ic svg{width:100%;height:100%}
.lg-create .tx{font-size:.9cqw;color:#46546f;font-weight:500}
.lg-create .tx b{color:#1f5fe0;font-weight:700}
.lg-create .ar{width:1.05cqw;height:1.05cqw;color:#1f5fe0;margin-left:auto}

/* ---------------- HEALTH CARD ---------------- */
.lg-health{left:74.55%;top:8.49%;width:22.9%;padding:1.7cqw 1.55cqw 1.5cqw;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#fbfdfe 0%,#f4f8fb 100%)}
.lg-h-head{display:flex;align-items:center;gap:.85cqw;margin:0 0 1.05cqw}
.lg-h-ic{flex:none;width:3cqw;height:3cqw;border-radius:.85cqw;display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,#22c3ad,#0f9b8c)}
.lg-h-ic svg{width:1.7cqw;height:1.7cqw}
.lg-h-ttl{flex:1;min-width:0}
.lg-h-ttl h2{font-size:1.12cqw;font-weight:700;color:#16223f;margin:0;letter-spacing:-.01em}
.lg-h-ttl p{font-size:.82cqw;color:#0f9b8c;margin:.12cqw 0 0;font-weight:600}
.lg-h-badge{flex:none;width:4.1cqw;height:4.1cqw;position:relative;display:grid;place-items:center;text-align:center}
.lg-h-badge svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.lg-h-badge .out{fill:none;stroke:#cfeae5;stroke-width:1.4}
.lg-h-badge .trk{fill:none;stroke:#e2efec;stroke-width:4.4}
.lg-h-badge .arc{fill:none;stroke:#16b3a2;stroke-width:4.4;stroke-linecap:round;stroke-dasharray:214 214}
.lg-h-badge b{display:block;font-size:.92cqw;font-weight:800;color:#15233f;line-height:1}
.lg-h-badge i{font-size:.5cqw;font-style:normal;font-weight:600;color:#5f6f84;letter-spacing:.02em}
.lg-h-badge[data-health-state="degraded"] .arc{stroke:#e0a226;stroke-dasharray:150 214}
.lg-h-badge[data-health-state="down"] .arc{stroke:#e5533c;stroke-dasharray:55 214}

.lg-svcs{background:#fff;border:.07cqw solid #e9eef3;border-radius:1cqw;padding:.2cqw 1cqw}
.lg-svc{display:flex;align-items:center;gap:.8cqw;padding:.74cqw 0;border-bottom:.07cqw solid #eef2f5}
.lg-svc:last-child{border-bottom:0}
.lg-svc-ic{flex:none;width:1.72cqw;height:1.72cqw;color:#2a3a55}
.lg-svc-ic svg{width:100%;height:100%}
.lg-svc-t{flex:1;min-width:0}
.lg-svc-t h4{font-size:.88cqw;font-weight:700;color:#1b2948;margin:0}
.lg-svc-t p{font-size:.7cqw;color:#8590a4;margin:.08cqw 0 0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-svc-s{flex:none;width:5.3cqw;display:flex;flex-direction:column;align-items:flex-end;gap:.22cqw}
.st{display:inline-flex;align-items:center;gap:.4cqw;font-size:.78cqw;font-weight:600;color:#0f9b8c}
.st .dot{width:.5cqw;height:.5cqw;border-radius:50%;background:#13a695;flex:none}
.st[data-status="warn"]{color:#c0871a}.st[data-status="warn"] .dot{background:#e0a226}
.st[data-status="down"]{color:#c2391f}.st[data-status="down"] .dot{background:#e5533c}
.spark{width:5.1cqw;height:1.7cqw;color:#16b5a3;overflow:visible}
.spark polyline{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.spark-bars rect,.lg-up-bars rect{fill:currentColor}.spark-bars{color:#8fd9cf}
.spark-map,.spark-grid{color:#9fb0c2}

.lg-uptime{display:flex;align-items:center;justify-content:space-between;gap:1cqw;margin:1cqw 0 0;padding:0 .2cqw}
.lg-up-l p{font-size:.78cqw;color:#5f6f84;margin:0;font-weight:600}
.lg-up-l p span{color:#97a3b6;font-weight:500}
.lg-up-val{font-size:1.85cqw;font-weight:800;color:#0f9b8c;letter-spacing:-.01em;margin-top:.1cqw}
.lg-up-bars{width:9cqw;height:2.6cqw;color:#7fd3c8}

.lg-viewstatus{display:inline-flex;align-items:center;gap:.45cqw;margin-top:.85cqw;font-size:.92cqw;font-weight:600;color:#1f5fe0;text-decoration:none}
.lg-viewstatus svg{width:1cqw;height:1cqw}
.lg-viewstatus:hover{text-decoration:underline}

/* ---------------- LIVE TRACKING CARD ---------------- */
.lg-livetrack{left:33.4%;top:72.68%;width:14.45%;min-height:6.8cqw;padding:.95cqw 1.1cqw;border-radius:1cqw}
.lt-head{display:flex;align-items:center;gap:.5cqw;font-size:.86cqw;font-weight:700;color:#16223f;margin-bottom:.5cqw}
.lt-head .dot{width:.55cqw;height:.55cqw;border-radius:50%;background:#12b39f;box-shadow:0 0 0 .18cqw rgba(18,179,159,.22)}
.lt-route{font-size:.74cqw;color:#52607a;margin:0 0 .25cqw;line-height:1.4;font-weight:500}
.lt-route b{color:#2b3a55;font-weight:700}.lt-route .arr{color:#9aa6bd}
.lt-eta{font-size:.74cqw;color:#52607a;margin:0;font-weight:500}
.lt-line{position:absolute;right:.7cqw;bottom:.6cqw;width:5cqw;height:2.6cqw;color:#37b6f0}

/* ---------------- FOOTER ---------------- */
.lg-footer{position:absolute;left:0;bottom:0;width:100%;height:8.16%;background:linear-gradient(180deg,#022251,#001637);
  display:flex;align-items:center;gap:2cqw;padding:0 3cqw;color:#aeb8cc}
.ft-l{display:flex;flex-direction:column;gap:.35cqw}
.ft-copy{font-size:.78cqw;color:#c3cbdc;margin:0;font-weight:500}
.ft-links{display:flex;align-items:center;gap:.7cqw;font-size:.78cqw}
.ft-links a{color:#9aa6c2;text-decoration:none}.ft-links a:hover{color:#cfe0ff}
.ft-links span{color:#3c4d72}
.ft-dots{flex:none;width:3.3cqw;height:.45cqw;background-image:radial-gradient(circle,#2bb3a6 30%,transparent 31%);background-size:.66cqw .66cqw;background-repeat:repeat-x;opacity:.72}
.ft-c{display:flex;align-items:center;gap:.7cqw;margin:0 auto}
.ft-shield{flex:none;width:1.95cqw;height:1.95cqw;color:#21c2b0}
.ft-shield svg{width:100%;height:100%}
.ft-stat{font-size:.86cqw;margin:0;color:#d7deea;font-weight:500}
.ft-stat b{color:#22c3ad;font-weight:700}
.ft-sub{font-size:.74cqw;margin:.1cqw 0 0;color:#8b97b3}
.ft-sub .sep{color:#2bb3a6}
.ft-r{display:flex;align-items:center;gap:.8cqw}
.ft-help{flex:none;width:2.1cqw;height:2.1cqw;border-radius:50%;border:.09cqw solid #2a3a63;color:#9fb0d0;display:grid;place-items:center}
.ft-help svg{width:1.15cqw;height:1.15cqw}
.ft-need{font-size:.78cqw;margin:0;color:#c3cbdc}
.ft-r a{font-size:.86cqw;color:#4b9bff;text-decoration:none;font-weight:600}

.lg-flash{border-radius:.6cqw;padding:.6cqw .8cqw;font-size:.82cqw;margin:0 0 1cqw;line-height:1.4}
.lg-flash-error,.lg-flash-danger{background:#fdecec;color:#b42318;border:1px solid #f6cfcf}
.lg-flash-ok,.lg-flash-success{background:#e9f8ef;color:#1f7a44;border:1px solid #c5ecd4}
.lg-flash-info,.lg-flash-warning{background:#eef4ff;color:#1f50d8;border:1px solid #cfe0ff}

/* ---------------- multi-workspace fallback ---------------- */
.lg-fallback{max-width:440px;margin:8vh auto;background:#fff;border-radius:18px;padding:34px 30px;box-shadow:0 24px 60px rgba(0,8,40,.4);text-align:center}
.lg-fallback h1{font-size:22px;margin:6px 0 18px;color:#16223f}
.lg-fallback label{display:block;text-align:left;font-size:13px;font-weight:600;color:#3a4250;margin:0 0 6px}
.lg-fallback select{width:100%;height:50px;border:1.5px solid #e1e3ea;border-radius:12px;padding:0 12px;font-size:15px;margin-bottom:16px;font-family:inherit}
.lg-fallback .btn{width:100%;height:52px;border:0;border-radius:12px;background:#1f5fe0;color:#fff;font-size:16px;font-weight:600;font-family:inherit;cursor:pointer}

/* ---------------- link modal (legal / status / create account) ---------------- */
.lg-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;font-family:'Schibsted Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.lg-modal[hidden]{display:none}
.lg-modal-backdrop{position:absolute;inset:0;background:rgba(6,16,40,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.lg-modal-card{position:relative;background:#fff;border-radius:18px;max-width:780px;width:100%;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 50px 120px -24px rgba(4,12,34,.65);animation:lgmIn .18s ease-out}
@keyframes lgmIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.lg-modal-x{position:absolute;top:13px;right:13px;z-index:3;width:34px;height:34px;border:0;border-radius:9px;background:#eef2f8;color:#46546f;display:grid;place-items:center;cursor:pointer;transition:background .12s}
.lg-modal-x:hover{background:#e1e8f2;color:#1f2b46}
.lg-modal-x svg{width:18px;height:18px}
.lg-modal-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:30px 32px 34px}
.lg-modal-body .lp-doc.embed,.lg-modal-body .authp-embed{max-width:none;margin:0;padding:0}
.lg-modal-loading{display:flex;align-items:center;justify-content:center;gap:11px;min-height:200px;color:#6a7890;font-size:15px}
.lg-modal-spin{width:20px;height:20px;border:2.5px solid #d9e2ef;border-top-color:#2f6bff;border-radius:50%;animation:lgspin .7s linear infinite}
@keyframes lgspin{to{transform:rotate(360deg)}}