
/* October Frontalier Copilot landing: France–Switzerland clarity, built mobile-first. */
.public-landing{display:none}
body.landing-route{min-height:100vh;background:#eef4fb;color:#12233d}
body.landing-route .app-shell{display:none!important}
body.landing-route .public-landing{
  display:flex;min-height:100vh;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,#f6f9fd 0%,#eef4fb 66%,#fff 100%);
}
.landing-header{
  position:relative;z-index:3;display:flex;width:100%;min-height:82px;align-items:center;justify-content:space-between;
  padding:5px max(24px,calc((100vw - 1210px)/2));background:#061a3d;color:#fff;
  box-shadow:0 5px 20px rgba(8,27,61,.16)
}
.landing-brand{display:flex;align-items:center;min-width:0}
.landing-brand img{display:block;width:196px;height:110px;object-fit:contain;object-position:left center}
.landing-country{display:inline-flex;align-items:center;gap:9px;margin-left:auto;padding:9px 13px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.06);color:#e8f0ff;font-size:10px;font-weight:850;letter-spacing:.12em}
.landing-country b{color:#37c99a;font-size:15px}
.landing-header-actions{display:flex;align-items:center;gap:19px;margin-left:28px}
.landing-how{color:#e5edfa;font-size:13px;font-weight:700;text-decoration:none}
.landing-how:hover{text-decoration:underline}
.landing-header-cta{display:inline-flex;min-height:42px;align-items:center;padding:0 16px;border-radius:10px;background:#2465ed;color:#fff;font-size:13px;font-weight:850;text-decoration:none;box-shadow:0 5px 14px rgba(15,83,219,.22)}
.landing-header .landing-sign-in{position:relative}
.landing-sign-in summary{display:inline-flex;min-height:40px;align-items:center;padding:0 13px;border:1px solid rgba(255,255,255,.3);border-radius:10px;color:#f1f5ff;font-size:13px;font-weight:750;list-style:none;cursor:pointer}
.landing-sign-in summary::-webkit-details-marker{display:none}
.landing-sign-in summary:focus-visible,.landing-header-cta:focus-visible,.landing-primary:focus-visible,.landing-secondary:focus-visible{outline:3px solid #7db5ff;outline-offset:3px}
.landing-sign-in .auth-form{position:absolute;top:calc(100% + 11px);right:0;z-index:10;width:min(320px,calc(100vw - 28px));margin:0;padding:17px;border:1px solid #dae4f1;border-radius:15px;background:#fff;box-shadow:0 18px 42px rgba(12,32,68,.2)}
.landing-sign-in .auth-form label{display:grid;gap:6px;margin-bottom:12px;color:#36506f;font-size:12px;font-weight:750}
.landing-sign-in .auth-form input{min-height:42px;padding:0 11px;border:1px solid #d5e0ec;border-radius:9px;color:#182c49;font:inherit}
.landing-sign-in .auth-mode{display:flex;gap:8px;margin:4px 0 12px}
.landing-sign-in .auth-mode-button,.landing-sign-in #auth-submit{min-height:40px;padding:0 11px;border:1px solid #d6e1ef;border-radius:9px;background:#f6f9fd;color:#294361;font:inherit;font-size:12px;font-weight:750;cursor:pointer}
.landing-sign-in .auth-mode-button.active,.landing-sign-in #auth-submit{border-color:#2465ed;background:#2465ed;color:#fff}
.landing-sign-in #auth-submit{width:100%}
.landing-sign-in .auth-message{margin:9px 0 0;color:#526782;font-size:12px;line-height:1.45}
.landing-main{width:min(1210px,calc(100% - 56px));margin:0 auto}
.landing-hero{display:grid;grid-template-columns:minmax(0,.96fr) minmax(450px,1.04fr);align-items:center;gap:clamp(36px,6vw,82px);min-height:610px;padding:50px 0 42px}
.landing-copy{position:relative;z-index:1;max-width:600px}
.landing-kicker{display:flex;align-items:center;gap:9px;margin:0 0 18px;color:#2364df;font-size:10px;font-weight:900;letter-spacing:.16em}
.landing-kicker:before{content:"";width:23px;height:2px;border-radius:2px;background:#39bd95}
.landing-copy h1{max-width:590px;margin:0;color:#122440;font-size:clamp(44px,5vw,68px);font-weight:850;letter-spacing:-.065em;line-height:.99}
.landing-copy h1 span{display:block;color:#2164e8}
.landing-intro{max-width:540px;margin:22px 0 24px;color:#596d88;font-size:17px;line-height:1.58}
.landing-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.landing-primary,.landing-secondary{display:inline-flex;min-height:52px;align-items:center;justify-content:center;gap:14px;padding:0 20px;border-radius:12px;text-decoration:none;font-size:14px;font-weight:850}
.landing-primary{background:#2463e9;color:#fff;box-shadow:0 9px 19px rgba(36,99,233,.22)}
.landing-primary:hover,.landing-header-cta:hover{background:#174fce;transform:translateY(-1px)}
.landing-primary span{font-size:19px}
.landing-secondary{border:1px solid #ccd8e9;background:#fff;color:#294765}
.landing-secondary:hover{background:#f7faff}
.landing-secondary .play{display:grid;width:23px;height:23px;place-items:center;border:1.5px solid #2b6de8;border-radius:50%;color:#2463e9;font-size:10px}
.landing-note{margin:14px 0 0;color:#7586a0;font-size:12px;line-height:1.45}
.landing-account{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.landing-visual{position:relative;min-height:440px;isolation:isolate}
.landing-scene{
  position:absolute;inset:0 0 30px;overflow:hidden;border:1px solid #d5e4f5;border-radius:28px;
  background:linear-gradient(180deg,#d8eaff 0%,#f2f8ff 47%,#fff2db 75%,#c7e6ed 100%);
  box-shadow:0 24px 56px rgba(29,68,121,.17)
}
.landing-scene:before{content:"";position:absolute;inset:auto -8% -12% -8%;height:48%;border-radius:50% 50% 0 0;background:linear-gradient(180deg,#78b9cc,#3c91b4 50%,#26729e);transform:rotate(-4deg)}
.landing-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.1),transparent 55%),linear-gradient(0deg,rgba(13,51,91,.05),transparent 55%);pointer-events:none}
.landing-sun{position:absolute;top:27%;left:18%;width:82px;height:82px;border-radius:50%;background:radial-gradient(circle,#fff6da 0%,rgba(255,234,189,.82) 34%,rgba(255,225,163,.14) 70%,transparent 72%);filter:blur(.2px)}
.landing-mountains{position:absolute;inset:13% 0 26%;width:100%;height:66%}
.landing-scene-caption{position:absolute;top:19px;left:21px;z-index:1;padding:9px 12px;border:1px solid rgba(255,255,255,.76);border-radius:999px;background:rgba(255,255,255,.76);backdrop-filter:blur(10px);color:#31577d;font-size:9px;font-weight:900;letter-spacing:.13em}
.landing-route-line{position:absolute;top:60%;left:10%;z-index:1;width:80%;height:2px;background:repeating-linear-gradient(90deg,#fff 0 9px,transparent 9px 15px);filter:drop-shadow(0 1px 2px rgba(16,65,122,.2));transform:rotate(-5deg)}
.landing-route-line:before,.landing-route-line:after{content:"";position:absolute;top:50%;width:12px;height:12px;border:3px solid #fff;border-radius:50%;background:#2167eb;transform:translateY(-50%)}
.landing-route-line:before{left:0}.landing-route-line:after{right:0;background:#33bd90}
.landing-route-label{position:absolute;top:53%;left:11%;z-index:1;color:#fff;font-size:10px;font-weight:900;text-shadow:0 1px 4px rgba(16,49,82,.4)}
.landing-route-label.end{right:11%;left:auto}
.landing-preview{position:absolute;right:20px;bottom:0;z-index:2;width:min(365px,82%);padding:20px 21px;border:1px solid #d9e5f2;border-radius:18px;background:rgba(255,255,255,.97);box-shadow:0 18px 38px rgba(18,46,86,.17)}
.landing-preview-kicker{display:flex;align-items:center;gap:7px;margin:0 0 11px;color:#2867db;font-size:9px;font-weight:900;letter-spacing:.12em}
.landing-preview-kicker i{width:7px;height:7px;border-radius:50%;background:#2fc28f}
.landing-preview h2{margin:0 0 5px;color:#1c3150;font-size:19px;letter-spacing:-.03em}
.landing-preview>p:not(.landing-preview-kicker){margin:0;color:#708098;font-size:11px;line-height:1.45}
.landing-preview-action{display:flex;align-items:center;gap:12px;margin-top:15px;padding:13px;border-radius:12px;background:#f1f6ff}
.landing-preview-icon{display:grid;flex:0 0 34px;width:34px;height:34px;place-items:center;border-radius:10px;background:#e0ecff;color:#2563eb;font-size:17px}
.landing-preview-action strong{display:block;color:#243b5b;font-size:12px;line-height:1.35}
.landing-preview-action small{display:block;margin-top:3px;color:#73839b;font-size:10px}
.landing-steps{padding:23px 0 48px;border-top:1px solid #dce6f1}
.landing-steps h2{max-width:600px;margin:0 auto 21px;color:#172b48;font-size:clamp(22px,3vw,30px);letter-spacing:-.04em;text-align:center}
.landing-steps-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.landing-step{display:flex;gap:12px;min-height:92px;padding:15px 13px;border:1px solid #e0e8f2;border-radius:14px;background:rgba(255,255,255,.8)}
.landing-step-icon{display:grid;flex:0 0 35px;width:35px;height:35px;place-items:center;border-radius:11px;background:#e8f1ff;color:#2164e8;font-size:16px;font-weight:900}
.landing-step strong{display:block;margin:1px 0 4px;color:#243b5a;font-size:12px}
.landing-step span{display:block;color:#70819a;font-size:10px;line-height:1.4}
.landing-footer{display:flex;width:min(1210px,calc(100% - 56px));justify-content:space-between;gap:12px;margin:auto auto 0;padding:16px 0 22px;border-top:1px solid #e3eaf2;color:#72829a;font-size:10px;line-height:1.4}
@media(max-width:900px){
 .landing-header{padding-right:20px;padding-left:20px}
 .landing-main{width:min(680px,calc(100% - 40px))}
 .landing-hero{grid-template-columns:1fr;gap:27px;min-height:0;padding:46px 0 34px}
 .landing-copy{max-width:650px}
 .landing-copy h1{max-width:580px;font-size:clamp(44px,8vw,62px)}
 .landing-visual{min-height:390px}
 .landing-steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .landing-footer{width:calc(100% - 40px)}
}
@media(max-width:600px){
 body.landing-route .public-landing{min-height:100svh}
 .landing-header{min-height:66px;padding:3px 14px}
 .landing-brand img{width:145px;height:82px}
 .landing-country{display:none}
 .landing-header-actions{gap:8px;margin-left:auto}
 .landing-how{display:none}
 .landing-sign-in summary{min-height:38px;padding:0 10px;font-size:12px}
 .landing-header-cta{min-height:38px;padding:0 12px;font-size:12px}
 .landing-main{width:calc(100% - 32px)}
 .landing-hero{gap:22px;padding:30px 0 27px}
 .landing-kicker{margin-bottom:13px;font-size:9px}
 .landing-copy h1{font-size:clamp(38px,10.5vw,50px);line-height:1.01}
 .landing-intro{margin:16px 0 19px;font-size:15px;line-height:1.5}
 .landing-ctas{display:grid;grid-template-columns:1fr;gap:9px}
 .landing-primary,.landing-secondary{width:100%;min-height:50px}
 .landing-note{margin-top:10px;font-size:11px}
 .landing-visual{min-height:350px}
 .landing-scene{inset:0 0 35px;border-radius:21px}
 .landing-scene-caption{top:13px;left:13px;padding:8px 10px;font-size:8px}
 .landing-sun{top:24%;left:18%;width:64px;height:64px}
 .landing-route-label{top:51%;font-size:9px}
 .landing-route-label.end{right:8%}
 .landing-preview{right:10px;width:calc(100% - 35px);padding:16px;border-radius:15px}
 .landing-preview h2{font-size:17px}
 .landing-preview-action{margin-top:11px;padding:11px}
 .landing-steps{padding:20px 0 26px}
 .landing-steps h2{margin-bottom:15px;font-size:23px;text-align:left}
 .landing-steps-grid{grid-template-columns:1fr;gap:8px}
 .landing-step{min-height:0;padding:12px;border-radius:12px}
 .landing-step-icon{flex-basis:32px;width:32px;height:32px}
 .landing-step strong{font-size:12px}
 .landing-step span{font-size:11px}
 .landing-footer{display:block;width:calc(100% - 32px);padding:13px 0 calc(18px + env(safe-area-inset-bottom));font-size:10px}
}
@media(max-width:360px){
 .landing-header{padding-right:10px;padding-left:10px}
 .landing-brand img{width:126px;height:72px}
 .landing-header-actions{gap:5px}
 .landing-sign-in summary{padding:0 8px;font-size:11px}
 .landing-header-cta{padding:0 9px;font-size:11px}
 .landing-main{width:calc(100% - 26px)}
 .landing-copy h1{font-size:37px}
 .landing-visual{min-height:330px}
}

/* Use the complete supplied wordmark on a matching brand field in the app shell too. */
@media(max-width:650px){
 .mobile-brand{min-height:70px;padding:1px 12px;background:#061a3d;border-bottom-color:rgba(255,255,255,.12)}
 .mobile-brand img{width:124px;height:69px;object-fit:contain;object-position:left center}
}
@media(max-width:380px){.mobile-brand{min-height:66px;padding:1px 10px}.mobile-brand img{width:116px;height:65px}}

/* Keep the landing hero and its explanation in a single vertical flow. */
.landing-main{display:block;flex:1 0 auto;grid-template-columns:1fr;align-items:initial;gap:0;padding:0}
.landing-sign-in summary{background:rgba(255,255,255,.06);color:#f1f5ff!important}

/* Let the official PNG wordmark sit cleanly on its matching navy brand field. */
.landing-brand img,.mobile-brand img{mix-blend-mode:lighten}

/* Restore the saved Geneva / Lake Geneva hero artwork from the October landing. */
.landing-scene{
  background:linear-gradient(180deg,rgba(8,28,54,.06),rgba(8,28,54,.2)),url('./assets/geneva-route-hero.webp') center 53%/cover no-repeat #102849;
}
.landing-scene:before{display:none}
.landing-scene:after{background:linear-gradient(90deg,rgba(5,23,46,.05),transparent 62%),linear-gradient(0deg,rgba(5,23,46,.24),transparent 62%)}
.landing-sun,.landing-mountains{display:none}
@media(max-width:600px){.landing-scene{background-position:58% center}}
/* Authentication stays on the landing page; keep the app header focused on the task. */
.app-shell .main>.topbar .topbar-actions .auth-box{display:none!important}
