/* Shared navigation, clear like Cluely's: no bar or background, just the logo, links and the navy "Get Started"
   over each page's own background (white text over the home page's blue hero, navy text on the light pages).
   The start action stays pinned when scrolling; the rest of the navigation fades. */
.ch-header{position:fixed!important;top:0;left:0;right:0;z-index:50;pointer-events:none;border:0!important;box-shadow:none!important;
  background:transparent!important}
.ch-header a{pointer-events:auto}
.ch-header .header-inner{width:min(1120px,calc(100% - 48px));margin:12px auto;height:60px!important;min-height:0;box-sizing:border-box;
  display:flex;align-items:center;justify-content:flex-start!important;gap:24px;padding:8px 0;
  border:0;background:transparent;box-shadow:none}
.ch-header .brand{display:inline-flex;align-items:center;gap:8px;font-size:18px!important;font-weight:500;letter-spacing:-.4px;color:#14203f!important;
  text-decoration:none;white-space:nowrap;transition:opacity .2s,visibility .2s}
.ch-header .brand-mark{width:28px!important;height:28px!important;flex-shrink:0;display:grid;place-items:center;background:none!important;border-radius:8px;box-shadow:0 2px 8px #23408f1a;overflow:visible}
.ch-header .brand-mark img{width:100%;height:100%;display:block;margin:0}
.ch-header .brand-dot{color:#7385a7!important;margin-left:-7px}
.ch-header .header-links{flex:1;min-width:0;display:flex!important;align-items:center;gap:2px!important;font-size:13px;flex-wrap:nowrap}
.ch-header .header-links>a:not(.cl-nav-btn){display:inline-block;padding:8px 11px;border-radius:9px;color:#4b5a7a!important;font-size:13px;font-weight:500;
  text-decoration:none!important;box-shadow:none!important;transition:background .15s,color .15s,opacity .2s,visibility .2s}
.ch-header .header-links>a:not(.cl-nav-btn):hover,.ch-header .header-links>a[aria-current="page"]{color:#23408f!important;background:#e8effc}
.ch-header .header-links .cl-nav-btn{margin-left:auto;display:inline-flex!important;align-items:center;justify-content:center;min-height:40px;padding:9px 17px;
  border-radius:999px;color:#fff!important;font-size:13px;font-weight:600;white-space:nowrap;text-decoration:none!important;
  background:linear-gradient(160deg,#4f7ff0,#2f55b5)!important;box-shadow:0 4px 12px #2f55b52e;transition:background .15s,box-shadow .15s}
.ch-header .header-links .cl-nav-btn:hover{background:linear-gradient(160deg,#5b8af5,#3a63c9)!important;box-shadow:0 6px 16px #2f55b53d}
.ch-header a:focus-visible{outline:3px solid #315fbd;outline-offset:3px}
.ch-header.scrolled :is(.brand,.header-links>a:not(.cl-nav-btn)){opacity:0;visibility:hidden}
/* Interior pages reserve room; the home hero already supplies its own top spacing. */
body:has(.ch-header:not(.over-hero)){padding-top:84px}
@media (max-width:860px){
  .ch-header .header-inner{height:56px!important;width:calc(100% - 32px);margin:10px auto;padding:7px 0;gap:12px}
  .ch-header .brand{font-size:16px!important;gap:7px}
  .ch-header .brand-mark{width:26px!important;height:26px!important}
  .ch-header .header-links>a:not(.cl-nav-btn){display:none!important}
  .ch-header .header-links .cl-nav-btn{min-height:40px;padding:9px 14px}
  body:has(.ch-header:not(.over-hero)){padding-top:76px}
}
/* Home page: white text straight over the blue hero. */
.ch-header.over-hero .brand{color:#fff!important}
.ch-header.over-hero .brand-dot{color:#ffffffa6!important}
.ch-header.over-hero .header-links>a:not(.cl-nav-btn){color:#ffffffd9!important}
.ch-header.over-hero .header-links>a:not(.cl-nav-btn):hover,.ch-header.over-hero .header-links>a[aria-current="page"]{color:#fff!important;background:#ffffff26}
.ch-header.over-hero .brand-mark{box-shadow:0 3px 10px #14203f33}
/* Over the blue hero the button is white with navy text, like the hero's own "Need a Place Tonight?" button. */
.ch-header.over-hero .header-links .cl-nav-btn{background:#fff!important;color:#14203f!important;box-shadow:0 4px 14px #14203f1f}
.ch-header.over-hero .header-links .cl-nav-btn:hover{background:#e7eefc!important;box-shadow:0 6px 16px #14203f29}
@media (prefers-reduced-motion:reduce){.ch-header :is(.brand,.header-links a){transition:none}}

/* No rubber-band bounce past the top or bottom: scrolling up past the hero would reveal the light page background. */
html{overscroll-behavior-y:none}

/* Flat, like the rest of the page: the logo is plain text, and "Get Started" is the same solid navy button used
   across the site (on the blue heroes too). No glass or tinted panes in the header. */
.ch-header .brand,.ch-header.over-hero .brand{padding:0;border:0;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.ch-header.over-hero .header-links .cl-nav-btn{border:0;background:#14203f!important;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 3px 10px #14203f14!important}
.ch-header.over-hero .header-links .cl-nav-btn{color:#fff!important}
.ch-header.over-hero .header-links .cl-nav-btn:hover{background:#23408f!important}


/* Phones: nothing scrolls the page sideways. Safari zooms in on a text box whose font is under 16px (and stays zoomed,
   so the page pans sideways), so every field is 16px on small screens; the page clips anything wider than the screen
   (clip, unlike hidden, keeps sticky headers working); and the chat window only scrolls up and down. */
html,body{overflow-x:clip}
@media (max-width:820px){
  input,textarea,select{font-size:16px!important}
  #assistant-log,.start-msgs{overflow-x:hidden;overscroll-behavior-x:none;touch-action:pan-y pinch-zoom}
  .msg,.start-msgs p{overflow-wrap:anywhere;min-width:0}
}