@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap");
:root{
  --ink:#172033;
  --muted:#667085;
  --line:#dfe6ee;
  --paper:#ffffff;
  --bg:#f4f7fb;
  --brand:#0b1d3a;
  --brand2:#2f74ff;
  --soft:#edf4ff;
  --good:#087a50;
  --danger:#b42318;
  --shadow:0 10px 30px rgba(20,43,70,.07);
  --radius:20px;
  --app-max:1480px;
  --settings-max:1240px;
  --reading-max:760px;

  /* Standard is the baseline. */
  --body-size:18px;
  --control-size:17.5px;
  --label-size:16.5px;
  --small-size:15.5px;
  --nav-size:16px;
  --page-title-size:42px;
  --section-title-size:28px;
  --card-title-size:26px;
  --hero-title-size:64px;
}

html[data-text-size="smaller"]{
  --body-size:16.2px;
  --control-size:16px;
  --label-size:15px;
  --small-size:14.5px;
  --nav-size:15px;
  --page-title-size:38px;
  --section-title-size:26px;
  --card-title-size:24px;
  --hero-title-size:58px;
}
html[data-text-size="default"]{
  --body-size:18px;
  --control-size:17.5px;
  --label-size:16.5px;
  --small-size:15.5px;
  --nav-size:16px;
  --page-title-size:42px;
  --section-title-size:28px;
  --card-title-size:26px;
  --hero-title-size:64px;
}
html[data-text-size="larger"]{
  --body-size:21.6px;
  --control-size:20.5px;
  --label-size:19.5px;
  --small-size:18px;
  --nav-size:18px;
  --page-title-size:47px;
  --section-title-size:31px;
  --card-title-size:30px;
  --hero-title-size:70px;
}
html[data-text-size="extra_large"]{
  --body-size:25.2px;
  --control-size:23.5px;
  --label-size:22.5px;
  --small-size:20.5px;
  --nav-size:20px;
  --page-title-size:51px;
  --section-title-size:34px;
  --card-title-size:33px;
  --hero-title-size:76px;
}

*{box-sizing:border-box}
html{background:var(--bg);color-scheme:light}
body{
  margin:0;
  min-width:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Poppins,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:var(--body-size);
  line-height:1.52;
  -webkit-text-size-adjust:100%;
}
a{color:inherit}
button,input,select,textarea{font:inherit}
img{max-width:100%}

/* Header and branding */
.site-header{
  position:sticky;
  top:0;
  z-index:30;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.topbar{
  max-width:var(--app-max);
  min-height:76px;
  margin:0 auto;
  padding:10px clamp(18px,2.5vw,34px);
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:24px;
  align-items:center;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  text-decoration:none;
}
.brand-symbol{
  position:relative;
  display:block;
  width:46px;
  height:46px;
  flex:0 0 46px;
}
.brand-mark{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
.brand-mark-dark{display:none}
.brand-lockup{display:grid;line-height:.88;gap:4px;white-space:nowrap}
.brand-main{font-size:20px;font-weight:950;letter-spacing:.025em;color:#0b1d3a}
.brand-sub{font-size:15px;font-weight:950;letter-spacing:.105em;color:#2f74ff}

.topnav,.mobile-nav{display:flex;align-items:center;gap:6px}
.topnav{justify-content:center;min-width:0}
.topnav a,.mobile-nav a{
  min-height:48px;
  padding:0 17px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:var(--muted);
  text-decoration:none;
  font-size:var(--nav-size);
  line-height:1.1;
  font-weight:800;
  white-space:nowrap;
}
.topnav a:hover,.topnav a.active,.mobile-nav a:hover,.mobile-nav a.active{
  color:var(--brand);
  background:var(--soft);
}
.mobile-nav{display:none}

.account-menu{position:relative}
.account-menu summary{list-style:none}
.account-menu summary::-webkit-details-marker{display:none}
.person{
  min-height:48px;
  max-width:220px;
  padding:0 12px;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:7px;
  overflow:hidden;
  color:var(--brand);
  font-size:var(--nav-size);
  font-weight:850;
  cursor:pointer;
}
.person>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person:hover,.account-menu[open] .person{background:var(--soft)}
.account-chevron{font-size:.75em;color:var(--muted);transition:transform .15s ease}
.account-menu[open] .account-chevron{transform:rotate(180deg)}
.account-popover{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  width:min(290px,calc(100vw - 24px));
  padding:10px;
  z-index:60;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:15px;
  box-shadow:0 18px 42px rgba(16,37,60,.18);
}
.account-popover-name{padding:7px 10px 1px;font-weight:900}
.account-popover-email{
  padding:0 10px 10px;
  margin-bottom:5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:var(--small-size);
}
.account-popover a{
  display:block;
  min-height:46px;
  padding:10px;
  border-radius:10px;
  color:var(--brand);
  text-decoration:none;
  font-size:var(--control-size);
  font-weight:800;
}
.account-popover a:hover{background:var(--soft)}

/* Main layout */
.shell{
  width:min(100%,var(--app-max));
  margin:0 auto;
  padding:30px clamp(18px,2.5vw,34px) 48px;
}
.page-head{
  position:relative;
  isolation:isolate;
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-end;
  margin-bottom:24px;
}
.page-head h1{
  margin:6px 0 5px;
  font-size:var(--page-title-size);
  line-height:1.08;
  letter-spacing:-.035em;
}
.page-head p{margin:0;max-width:820px}
.compact-page-head{margin-bottom:20px}
.eyebrow{
  color:color-mix(in srgb,var(--brand) 65%,#718096);
  font-size:var(--small-size);
  line-height:1.2;
  font-weight:900;
  letter-spacing:.11em;
}
.muted{color:var(--muted)}
.small{font-size:var(--small-size)}
.back{color:var(--muted);text-decoration:none;font-size:var(--small-size);font-weight:800}

.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
}
.flash{
  max-width:900px;
  margin:0 auto 18px;
  padding:13px 16px;
  border-radius:13px;
  font-size:var(--control-size);
  font-weight:800;
}
.flash.success{background:#e9f9f1;color:#087a50;border:1px solid #b7ead2}
.flash.error{background:#fff0ef;color:#a51f16;border:1px solid #f0c2be}

/* Buttons and forms */
.button{
  min-height:48px;
  padding:11px 17px;
  border:0;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  cursor:pointer;
  text-decoration:none;
  font-size:var(--control-size);
  line-height:1.2;
  font-weight:850;
}
.button.primary{background:linear-gradient(135deg,color-mix(in srgb,var(--brand2) 82%,white),var(--brand2));color:#fff;box-shadow:0 8px 18px color-mix(in srgb,var(--brand2) 18%,transparent)}
.button.primary:hover{background:var(--brand2)}
.button.ghost{background:var(--paper);border:1px solid #cbd5e1;color:var(--ink)}
.button.danger{background:#fff1f0;color:var(--danger);border:1px solid #f1c2bd}
.button.full{width:100%}
.button.fit{width:max-content;max-width:100%}
.small-btn{min-height:44px;padding:8px 12px;font-size:var(--small-size)}
.push-right{margin-left:auto}
.inline-form{display:inline;margin:0}

.stack{display:flex;flex-direction:column;gap:16px;margin-top:18px}
label{
  display:block;
  color:#475467;
  font-size:var(--label-size);
  line-height:1.35;
  font-weight:800;
}
input,select,textarea{
  width:100%;
  min-height:50px;
  margin-top:7px;
  padding:11px 13px;
  border:1px solid #cbd5e1;
  border-radius:11px;
  outline:none;
  background:#fff;
  color:var(--ink);
  font-size:max(16px,var(--control-size));
}
textarea{min-height:100px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--brand2);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand2) 13%,transparent)}
input:disabled{opacity:.75;cursor:not-allowed}

/* Sign-in */
.welcome{
  min-height:calc(100vh - 150px);
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr);
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
.welcome-copy{position:relative;isolation:isolate;max-width:800px}
.hero-brand{display:flex;align-items:center;gap:15px;margin-bottom:20px}
.hero-brand .brand-symbol{width:76px;height:76px;flex-basis:76px}
.hero-brand .brand-main{font-size:31px}
.hero-brand .brand-sub{font-size:21px}
.welcome-copy h1{
  max-width:12ch;
  margin:10px 0 16px;
  font-size:var(--hero-title-size);
  line-height:1.01;
  letter-spacing:-.05em;
}
.hero-tagline{
  margin:0 0 13px;
  color:var(--brand);
  font-size:calc(var(--body-size) + 4px);
  line-height:1.35;
  font-weight:800;
}
.hero-tagline span{color:var(--brand2)}
.welcome-copy>p:not(.hero-tagline){max-width:700px;margin:0;color:var(--muted);font-size:var(--body-size);line-height:1.62}
.login-card{width:100%;max-width:500px;justify-self:end;padding:27px;border-radius:24px}
.login-card h2{margin:0 0 7px;font-size:var(--section-title-size);line-height:1.12}
.login-card>p{margin:0;line-height:1.55}
.recovery-link{display:inline-block;margin-top:15px;color:var(--brand2);font-size:var(--control-size);font-weight:800}
.privacy-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:var(--small-size);line-height:1.55}
.sign-in-flash{margin-left:auto;margin-right:auto}

/* Searches */
.search-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.search-card{padding:22px}
.search-card.paused{opacity:.72}
.search-card-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.search-card h2{margin:9px 0 4px;font-size:var(--card-title-size);line-height:1.12;letter-spacing:-.02em}
.vehicle-title{color:color-mix(in srgb,var(--brand) 68%,var(--muted));font-size:calc(var(--body-size) + 1px);font-weight:850}
.status-pill{display:inline-block;padding:5px 9px;border-radius:999px;font-size:var(--small-size);line-height:1;font-weight:900;letter-spacing:.05em}
.status-pill.on{background:#e8f8f0;color:#087a50}
.status-pill.off{background:#f2f4f7;color:#667085}
.last-check{min-width:110px;text-align:right;color:var(--muted);font-size:var(--small-size);line-height:1.4}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0}
.chips span{padding:6px 10px;border-radius:999px;background:#f2f5f8;color:#526173;font-size:var(--small-size);font-weight:700}
.search-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.tip{margin-top:22px;padding:15px 17px;border-radius:14px;background:var(--soft);color:color-mix(in srgb,var(--brand) 78%,var(--muted));font-size:var(--control-size)}
.notification-summary{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.notification-summary a{margin-left:5px;color:var(--brand2);font-weight:900;text-underline-offset:2px}

.empty-state{text-align:center;padding:50px 28px}
.empty-icon{width:86px;height:86px;margin:0 auto 16px;border-radius:24px;display:grid;place-items:center;background:var(--soft)}
.empty-icon .brand-symbol{width:64px;height:64px;flex-basis:64px}
.empty-state h2{margin:0 0 7px;font-size:var(--section-title-size)}
.empty-state p{max-width:680px;margin:0 auto 19px;color:var(--muted)}

/* Search form */
.form-card{padding:0;overflow:hidden}
.form-section{padding:24px;border-bottom:1px solid var(--line)}
.form-section h2{margin:0 0 17px;font-size:var(--section-title-size);line-height:1.18}
.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.form-grid .span2{grid-column:span 2}
.form-actions{display:flex;gap:10px;padding:20px 24px;background:#fbfcfd;flex-wrap:wrap}
.label-title{margin-bottom:10px}
.choice-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.choice-chips input{display:none}
.choice-chips span{display:inline-block;padding:8px 12px;border:1px solid #d5dde7;border-radius:999px;background:var(--paper);cursor:pointer;font-size:var(--control-size)}
.choice-chips input:checked+span{background:var(--soft);border-color:color-mix(in srgb,var(--brand2) 50%,var(--line));color:var(--brand)}
.input-prefix{position:relative}
.input-prefix span{position:absolute;left:12px;top:calc(50% + 4px);transform:translateY(-50%);color:var(--muted)}
.input-prefix input{padding-left:29px}
.toggle-inline{display:flex!important;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:7px 0}
.toggle-inline input{width:24px;height:24px;min-height:0;margin:0;flex:0 0 auto}

/* Notifications */
.settings-page{width:min(100%,var(--settings-max));margin:0 auto}
.settings-section{width:100%;margin-bottom:18px;padding:26px}
.settings-section h2{margin:0 0 7px;font-size:var(--section-title-size);line-height:1.18}
.settings-section h3{margin:0 0 7px;font-size:calc(var(--body-size) + 2px);line-height:1.25}
.settings-section p{line-height:1.55}
.section-help{margin:0 0 15px;color:var(--muted)}
.settings-divider{height:1px;margin:24px 0;background:var(--line)}
.settings-form-width{max-width:760px}
.toggle-list{margin:15px 0 18px;border:1px solid var(--line);border-radius:15px;overflow:hidden}
.toggle-list label{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:17px;border-bottom:1px solid var(--line);background:var(--paper)}
.toggle-list label:last-child{border-bottom:0}
.toggle-list input{width:25px;height:25px;min-height:0;margin:0;flex:0 0 auto}
.toggle-list strong{display:block;color:var(--ink);font-size:var(--control-size)}
.toggle-list small{display:block;margin-top:4px;color:var(--muted);font-size:var(--small-size);font-weight:500;line-height:1.4}
.notification-row.unavailable{opacity:.58}
.toggle-list.notifications-paused .notification-option{opacity:.46;pointer-events:none}
.save-status{min-height:22px;color:var(--good);font-size:var(--small-size);font-weight:800}
.setup-message{padding:14px 16px;border:1px solid #f1db9e;border-radius:13px;background:#fff8e8;color:#74520b}
.setup-message p{margin:4px 0 0}
.ios-help{margin:13px 0;padding:13px;border-radius:12px;background:var(--soft);color:var(--brand)}
.device-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}

/* Personalize */
.section-heading-row{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:18px}
.section-heading-row .section-help{margin-bottom:0}
.display-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pref-block{min-width:0;padding:18px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--paper) 93%,var(--bg))}
.pref-block.span-all{grid-column:1/-1}
.minor-setting-title{margin:0 0 11px!important}
.preference-grid{display:grid;gap:9px}
.preference-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.preference-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.preference-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.preference-choice,.palette-choice{
  min-height:52px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:var(--control-size);
  font-weight:850;
}
.preference-choice:hover,.palette-choice:hover{background:var(--soft)}
.preference-choice[aria-pressed="true"],.palette-choice[aria-pressed="true"]{
  border-color:var(--brand2);
  background:var(--soft);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--brand2) 14%,transparent);
}
.preference-choice span{display:grid;line-height:1.12;text-align:left}
.preference-choice small{margin-top:3px;color:var(--muted);font-size:.74em;font-weight:700}
.sample-a{line-height:1;font-weight:950}
.size-smaller{font-size:16px}.size-standard{font-size:19px}.size-large{font-size:23px}.size-extra{font-size:27px}
.pref-explanation{margin:11px 0 0}
.palette-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.palette-choice{justify-content:flex-start;text-align:left;font-size:var(--small-size)}
.palette-swatch{width:24px;height:24px;border-radius:7px;display:block;flex:0 0 auto;border:1px solid rgba(0,0,0,.08)}
.palette-swatch.ocean{background:linear-gradient(135deg,#0b1d3a 0 50%,#2f74ff 50%)}
.palette-swatch.teal{background:linear-gradient(135deg,#114b5f 0 50%,#00a8a8 50%)}
.palette-swatch.navy{background:linear-gradient(135deg,#07162b 0 50%,#2d6cdf 50%)}
.palette-swatch.slate{background:linear-gradient(135deg,#334155 0 50%,#64748b 50%)}
.palette-swatch.forest{background:linear-gradient(135deg,#173f35 0 50%,#2f855a 50%)}
.palette-swatch.plum{background:linear-gradient(135deg,#4b235f 0 50%,#9333ea 50%)}
.palette-swatch.warm{background:linear-gradient(135deg,#604936 0 50%,#b7791f 50%)}
.palette-swatch.contrast{background:linear-gradient(135deg,#000 0 50%,#ffd400 50%)}
.recovery-current{display:flex;flex-direction:column;gap:3px}
.verified-badge{display:inline-block;margin-left:8px;padding:3px 7px;border-radius:999px;background:#e8f8f0;color:#087a50;font-size:var(--small-size);font-weight:900;vertical-align:middle}
.recovery-remove-form{display:block;margin-top:15px}
.text-button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:var(--small-size);font-weight:800;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.account-control-actions{display:flex;gap:9px;flex-wrap:wrap}
.danger-zone{border-color:#efceca}

/* Results */
.sortbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 0 18px;color:var(--muted);font-size:var(--small-size)}
.sortbar a{padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper);text-decoration:none;font-weight:800}
.sortbar a.active{background:var(--brand);border-color:var(--brand);color:#fff}
.car-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.car-card{display:grid;grid-template-columns:220px 1fr;min-height:235px;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.car-photo{min-height:220px;background:#e9eef4}
.car-photo img{width:100%;height:100%;display:block;object-fit:cover}
.photo-placeholder{height:100%;display:grid;place-items:center;color:#8795a5;font-weight:900;letter-spacing:.1em}
.car-main{padding:18px}
.car-heading{font-size:calc(var(--body-size) + 1px);font-weight:900;line-height:1.3}
.price{margin:5px 0;font-size:calc(var(--card-title-size) + 4px);font-weight:950;letter-spacing:-.03em}
.car-facts{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 12px}
.car-facts span{padding:5px 8px;border-radius:6px;background:#f2f4f7;color:#536273;font-size:var(--small-size)}
.dealer{color:#526173;font-size:var(--small-size);line-height:1.45}
.car-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.data-note{margin:20px 2px;color:var(--muted);font-size:var(--small-size)}
.inventory-pending-card{max-width:900px;margin:8px auto 0;padding:38px;text-align:center}
.inventory-pending-card h2{margin:0 0 8px;font-size:var(--section-title-size)}
.inventory-pending-card p{max-width:680px;margin:0 auto 20px;color:var(--muted)}

/* Recovery / waiting / deletion */
.narrow-page{max-width:800px;margin:0 auto}
.recovery-card,.delete-confirm-card{max-width:680px;margin:0 auto}
.recovery-back{display:inline-block;margin-top:19px}
.waiting-wrap{min-height:62vh;display:grid;place-items:center}
.waiting-card{max-width:660px;padding:36px;text-align:center}
.waiting-card h1{margin:8px 0 11px;font-size:var(--page-title-size);line-height:1.1}
.mail-circle{width:66px;height:66px;margin:0 auto 18px;border-radius:20px;display:grid;place-items:center;background:var(--soft);color:var(--brand);font-size:31px}
.waiting-indicator{display:inline-flex;align-items:center;gap:9px;margin-top:17px;padding:9px 14px;border-radius:999px;background:#f2f5f8;color:#526173;font-size:var(--small-size);font-weight:800}
.waiting-indicator span{width:9px;height:9px;border-radius:50%;background:var(--brand2);box-shadow:0 0 0 0 color-mix(in srgb,var(--brand2) 45%,transparent);animation:pulse 1.8s infinite}
.waiting-actions{margin-top:21px}
.delete-confirm-card{padding:32px;text-align:center}
.delete-confirm-card h1{margin:8px 0;font-size:var(--page-title-size);line-height:1.1}
.danger-icon{width:58px;height:58px;margin:0 auto 12px;border-radius:18px;display:grid;place-items:center;background:#fff0ef;color:var(--danger);font-size:30px;font-weight:900}
.delete-confirm-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:23px}
code{padding:2px 5px;border-radius:5px;background:#f1f3f5}

/* Decorative horizon motif */
.page-head::after,.welcome-copy::after{
  content:"";
  position:absolute;
  right:0;
  bottom:-12px;
  z-index:-1;
  width:min(48vw,560px);
  height:110px;
  pointer-events:none;
  background:
    linear-gradient(165deg,transparent 0 58%,color-mix(in srgb,var(--brand2) 14%,transparent) 59% 62%,transparent 63%),
    linear-gradient(174deg,transparent 0 68%,color-mix(in srgb,var(--brand2) 10%,transparent) 69% 72%,transparent 73%);
  opacity:.12;
}
html[data-imagery="full"] .page-head::after,html[data-imagery="full"] .welcome-copy::after{opacity:.28}
html[data-imagery="subtle"] .page-head::after,html[data-imagery="subtle"] .welcome-copy::after{opacity:.12}
html[data-imagery="off"] .page-head::after,html[data-imagery="off"] .welcome-copy::after{display:none}

/* Palettes */
html[data-palette="ocean_blue"]{--brand:#0b1d3a;--brand2:#2f74ff;--soft:#edf4ff}
html[data-palette="coastal_teal"]{--brand:#114b5f;--brand2:#00a8a8;--soft:#e7f8f7}
html[data-palette="deep_navy"]{--brand:#07162b;--brand2:#2d6cdf;--soft:#eaf0fb}
html[data-palette="soft_slate"]{--brand:#334155;--brand2:#64748b;--soft:#eef2f6}
html[data-palette="forest"]{--brand:#173f35;--brand2:#2f855a;--soft:#eaf5ef}
html[data-palette="plum"]{--brand:#4b235f;--brand2:#9333ea;--soft:#f5edfb}
html[data-palette="warm_neutral"]{--brand:#604936;--brand2:#b7791f;--soft:#f7f1e9}
html[data-palette="high_contrast"]{--brand:#000;--brand2:#005fcc;--soft:#fff3a8;--line:#222;--ink:#000;--muted:#333}

/* Dark mode */
html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#edf3fb;
  --muted:#adbbca;
  --line:#2a4058;
  --paper:#102239;
  --bg:#0a1624;
  --brand:#e8f1ff;
  --brand2:#63a8ff;
  --soft:#17314e;
  --good:#63d6a8;
  --danger:#ff8e84;
  --shadow:0 12px 32px rgba(0,0,0,.22);
}
html[data-theme="dark"] .brand-mark-light{display:none}
html[data-theme="dark"] .brand-mark-dark{display:block}
html[data-theme="dark"] .brand-main{color:#f7fbff}
html[data-theme="dark"] .brand-sub{color:#63a8ff}
html[data-theme="dark"] label{color:#c7d5e5}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:#0b1a2c;border-color:#36506d;color:var(--ink)}
html[data-theme="dark"] .button.ghost{background:var(--paper);border-color:#3a526c;color:#e6eff9}
html[data-theme="dark"] .form-actions{background:#0d1d30}
html[data-theme="dark"] .choice-chips span,html[data-theme="dark"] .sortbar a{background:var(--paper);border-color:#36506d;color:#d9e5f2}
html[data-theme="dark"] .chips span,html[data-theme="dark"] .car-facts span{background:#18314d;color:#cfdded}
html[data-theme="dark"] .dealer,html[data-theme="dark"] .vehicle-title,html[data-theme="dark"] .back{color:#bac9d9}
html[data-theme="dark"] .setup-message{background:#362b13;border-color:#6d5621;color:#ffd887}
html[data-theme="dark"] .flash.success{background:#123325;border-color:#2b6f52;color:#93e0bd}
html[data-theme="dark"] .flash.error{background:#3a1d1d;border-color:#7b3b37;color:#ffb5ae}
html[data-theme="dark"] .verified-badge{background:#143d2e;color:#98e0bd}
html[data-theme="dark"] .waiting-indicator{background:#18314d;color:#d0dfef}
html[data-theme="dark"] .pref-block{background:#0e1f34}
html[data-theme="dark"] code{background:#182b42}
html[data-theme="dark"] .hero-tagline{color:#e8f1ff}
html[data-theme="dark"] .hero-tagline span{color:#63a8ff}

html[data-theme="dark"][data-palette="ocean_blue"]{--brand:#e8f1ff;--brand2:#63a8ff;--soft:#17314e}
html[data-theme="dark"][data-palette="coastal_teal"]{--brand:#e2fbfa;--brand2:#35d1c9;--soft:#123b3d}
html[data-theme="dark"][data-palette="deep_navy"]{--brand:#eaf1ff;--brand2:#6fa3ff;--soft:#142a4b}
html[data-theme="dark"][data-palette="soft_slate"]{--brand:#f1f5f9;--brand2:#9fb0c2;--soft:#263447}
html[data-theme="dark"][data-palette="forest"]{--brand:#eafaf1;--brand2:#69c793;--soft:#183a2d}
html[data-theme="dark"][data-palette="plum"]{--brand:#faeefc;--brand2:#c084fc;--soft:#382244}
html[data-theme="dark"][data-palette="warm_neutral"]{--brand:#fff3e8;--brand2:#e1a856;--soft:#3d3025}
html[data-theme="dark"][data-palette="high_contrast"]{--brand:#fff;--brand2:#58a6ff;--soft:#222;--line:#fff;--ink:#fff;--muted:#eee;--paper:#000;--bg:#000}

@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand2) 45%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* Laptop/tablet */
@media(max-width:1100px){
  .topbar{grid-template-columns:auto auto;justify-content:space-between}
  .topnav{display:none}
  .mobile-nav{
    display:flex;
    max-width:var(--app-max);
    margin:0 auto;
    padding:7px clamp(14px,2.5vw,28px);
    overflow-x:auto;
    border-top:1px solid var(--line);
  }
  .mobile-nav a{flex:0 0 auto}
  .welcome{grid-template-columns:1fr;min-height:auto;gap:28px;align-items:start}
  .login-card{justify-self:start;max-width:620px}
  .car-grid{grid-template-columns:1fr}
  .settings-page{max-width:100%}
}

@media(max-width:900px){
  .search-list{grid-template-columns:1fr}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .display-group{grid-template-columns:1fr}
  .pref-block.span-all{grid-column:auto}
  .palette-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .preference-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-head{align-items:flex-start}
}

/* Phone */
@media(max-width:650px){
  .topbar{min-height:62px;padding:8px 12px;gap:10px}
  .brand{gap:9px}
  .brand-symbol{width:36px;height:36px;flex-basis:36px}
  .brand-main{font-size:16px}
  .brand-sub{font-size:12px}
  .person{max-width:120px;min-height:44px;padding:0 9px}
  .account-popover{position:fixed;right:12px;top:66px}
  .mobile-nav{padding:6px 10px}
  .mobile-nav a{min-height:44px;padding:0 12px}
  .shell{padding:20px 14px 34px}
  .page-head{display:block;margin-bottom:18px}
  .page-head>.button{margin-top:14px}
  .page-head h1{font-size:min(var(--page-title-size),38px)}
  .page-head::after{width:85vw}
  .welcome-copy h1{font-size:min(var(--hero-title-size),50px)}
  .hero-brand{margin-bottom:13px;gap:10px}
  .hero-brand .brand-symbol{width:52px;height:52px;flex-basis:52px}
  .hero-brand .brand-main{font-size:22px}
  .hero-brand .brand-sub{font-size:15px}
  .login-card{padding:20px}
  .card{padding:20px}
  .search-card-top{display:block}
  .last-check{margin-top:10px;text-align:left}
  .form-grid{grid-template-columns:1fr}
  .form-grid .span2{grid-column:auto}
  .form-section{padding:19px}
  .form-actions{padding:16px 19px}
  .palette-grid,.preference-grid.two,.preference-grid.three,.preference-grid.four{grid-template-columns:1fr}
  .section-heading-row{display:block}
  .section-heading-row .save-status{margin-top:6px}
  .pref-block{padding:15px}
  .car-card{grid-template-columns:1fr}
  .car-photo{height:240px;min-height:0}
  .results-head>.button{margin-top:14px}
  .push-right{margin-left:0}
  .toggle-list label{align-items:flex-start}
  .notification-summary a{width:100%;margin:4px 0 0}
  .account-control-actions{display:grid;grid-template-columns:1fr}
  .account-control-actions .button{width:100%}
  .delete-confirm-card{padding:22px}
}

@media(max-width:390px){
  .brand-lockup{gap:3px}
  .brand-main{font-size:15px}
  .brand-sub{font-size:11px}
  .person{max-width:105px}
  .mobile-nav a{padding:0 10px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Brief sign-in greeting: visible but never blocks the page. */
.flash.welcome{
  position:fixed;
  top:92px;
  right:clamp(16px,2.5vw,34px);
  z-index:90;
  width:auto;
  max-width:min(420px,calc(100vw - 32px));
  margin:0;
  background:#e9f9f1;
  color:#087a50;
  border:1px solid #b7ead2;
  box-shadow:0 14px 32px rgba(18,78,58,.16);
}
html[data-theme="dark"] .flash.welcome{background:#123325;border-color:#2b6f52;color:#9be3c1}
@media(max-width:1100px){.flash.welcome{top:142px}}
@media(max-width:650px){.flash.welcome{top:122px;left:12px;right:12px;max-width:none}}
.flash.info{background:var(--soft);color:var(--brand);border:1px solid color-mix(in srgb,var(--brand2) 24%,var(--line))}


/* ===== Horizon sibling shell v14 =====
   Structural reference: current Travel Planner header, Personalize panel and footer.
   This shell is intentionally not treated as final; it is kept isolated so sibling apps can evolve together. */
:root{
  --content-max:1320px;
  --account-max:860px;
  --reading-max:760px;
  --family-header-height:58px;
  --family-control-height:44px;
  --family-dialog-width:560px;
  --family-plan:#ffc145;
}

body{
  font-family:"DM Sans",Arial,sans-serif;
}

/* Professional content width: wide only when the task benefits from it. */
.shell{
  max-width:var(--content-max)!important;
  margin:0 auto!important;
  padding:24px clamp(16px,3.5vw,52px) 36px!important;
}
.account-page{width:min(100%,var(--account-max))!important;margin:0 auto!important}
.settings-page,.narrow-page{width:min(100%,920px)!important;margin:0 auto!important}
.settings-form-width{max-width:680px!important}
.page-head>div{max-width:var(--reading-max)}

/* Travel-Planner sibling header shell. */
.site-header{
  position:sticky!important;
  top:0!important;
  z-index:80!important;
  min-height:var(--family-header-height)!important;
  display:grid!important;
  grid-template-columns:minmax(175px,1fr) auto minmax(150px,1fr)!important;
  align-items:center!important;
  gap:14px!important;
  padding:5px clamp(16px,2.5vw,34px)!important;
  color:var(--ink)!important;
  background:color-mix(in srgb,var(--paper) 95%,transparent)!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:0 4px 18px rgba(13,44,57,.05)!important;
  backdrop-filter:blur(16px)!important;
}
.site-header.logged-out{grid-template-columns:1fr!important}
.wordmark{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  color:var(--ink)!important;
  text-decoration:none!important;
  font-size:1rem!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
  white-space:nowrap!important;
}
.wordmark-mark{
  width:38px!important;
  height:38px!important;
  flex:0 0 38px!important;
  display:block!important;
  object-fit:contain!important;
  border-radius:0!important;
}
.wordmark strong{color:var(--brand2)!important;font-weight:800!important}
.primary-nav{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:11px!important;
  overflow-x:auto!important;
  scrollbar-width:none!important;
  font-size:.86rem!important;
}
.primary-nav::-webkit-scrollbar{display:none}
.primary-nav a{
  flex:0 0 auto!important;
  min-height:38px!important;
  padding:6px 8px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  border-radius:8px!important;
  color:var(--muted)!important;
  text-decoration:none!important;
  font-weight:700!important;
  white-space:nowrap!important;
}
.primary-nav a:hover{color:var(--ink)!important;background:var(--soft)!important}
.primary-nav a.nav-active{color:var(--ink)!important;background:var(--soft)!important}
.primary-nav a::after{display:none!important}
.horizon-icon{width:19px;height:19px;flex:0 0 auto;color:var(--brand2)}
.primary-nav a.nav-active .horizon-icon{color:var(--ink)}
.header-actions{
  min-width:max-content!important;
  justify-self:end!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
}

/* Same icon-only action treatment as Travel Planner. */
.display-settings,.profile-menu{position:relative}
.display-settings-trigger,.profile-menu-trigger{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  list-style:none!important;
  border:1px solid var(--line)!important;
  border-radius:10px!important;
  color:var(--ink)!important;
  background:var(--paper)!important;
  cursor:pointer!important;
}
.profile-menu-trigger::-webkit-details-marker{display:none}
.display-settings-trigger:hover,.display-settings-trigger[aria-expanded="true"],
.profile-menu[open] .profile-menu-trigger,.profile-menu-trigger:hover{
  border-color:var(--brand2)!important;
  background:var(--soft)!important;
}
.display-settings-trigger .horizon-icon,.profile-menu-trigger .horizon-icon{width:21px;height:21px;color:var(--brand2)}

.profile-menu-panel{
  position:absolute!important;
  z-index:100!important;
  top:calc(100% + 8px)!important;
  right:0!important;
  width:min(260px,calc(100vw - 24px))!important;
  padding:8px!important;
  display:grid!important;
  gap:2px!important;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  color:var(--ink)!important;
  background:var(--paper)!important;
  box-shadow:0 18px 45px rgba(16,44,58,.20)!important;
}
.profile-menu-identity{display:grid;gap:2px;padding:8px 11px 10px;border-bottom:1px solid var(--line);margin-bottom:3px}
.profile-menu-identity strong{font-size:.92rem}
.profile-menu-identity small{overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:.78rem}
.profile-menu-panel a{
  min-height:42px!important;
  padding:8px 11px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  border-radius:8px!important;
  color:var(--ink)!important;
  text-decoration:none!important;
  font-size:.9rem!important;
  font-weight:700!important;
}
.profile-menu-panel a:hover{background:var(--soft)!important}
.profile-menu-panel a .horizon-icon{width:18px;height:18px}

/* Current Travel-style Personalize panel. */
.display-settings-panel{
  position:absolute!important;
  z-index:110!important;
  top:calc(100% + 9px)!important;
  right:0!important;
  width:min(var(--family-dialog-width),calc(100vw - 24px))!important;
  max-height:min(760px,calc(100vh - 80px))!important;
  overflow:auto!important;
  padding:20px!important;
  color:var(--ink)!important;
  background:var(--paper)!important;
  border:1px solid var(--line)!important;
  border-radius:0!important;
  box-shadow:0 18px 45px rgba(16,44,58,.20)!important;
}
.display-settings-panel[hidden]{display:none!important}
.display-settings-heading{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:18px!important}
.display-settings-heading span,.display-settings-panel legend,.settings-select{
  color:var(--brand2)!important;
  font-size:.75rem!important;
  font-weight:800!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
}
.display-settings-heading h2{
  margin:2px 0 0!important;
  font:400 1.7rem/1.1 "DM Serif Display",Georgia,serif!important;
  color:var(--ink)!important;
}
.display-settings-heading>button{
  width:44px!important;height:44px!important;flex:0 0 44px!important;
  border:1px solid var(--line)!important;border-radius:50%!important;
  color:var(--ink)!important;background:var(--paper)!important;font-size:1.6rem!important;cursor:pointer!important;
}
.display-settings-panel fieldset{margin:18px 0 0!important;padding:0!important;border:0!important}
.display-settings-panel legend{margin-bottom:8px!important}
.settings-segments{display:grid!important;gap:6px!important}
.settings-segments.two{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.settings-segments.three{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.settings-segments.four{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.settings-segments button,.personalize-palette-grid button{
  min-height:46px!important;
  padding:7px 9px!important;
  border:1px solid var(--line)!important;
  border-radius:0!important;
  color:var(--ink)!important;
  background:var(--paper)!important;
  font-size:.84rem!important;
  font-weight:700!important;
  cursor:pointer!important;
}
.settings-segments button:hover,.personalize-palette-grid button:hover{background:var(--soft)!important}
.settings-segments button[aria-pressed="true"],.personalize-palette-grid button[aria-pressed="true"]{
  border-color:var(--brand2)!important;
  box-shadow:inset 0 0 0 2px var(--brand2)!important;
  color:var(--ink)!important;
  background:color-mix(in srgb,var(--brand2) 16%,var(--paper))!important;
  font-weight:800!important;
}
.personalize-palette-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
.personalize-palette-grid button{min-height:54px!important;display:grid!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:9px!important;text-align:left!important}
.palette-swatches{display:flex!important}.palette-swatches i{display:block!important;width:13px!important;height:28px!important}
.text-size-choice{display:grid!important;place-items:center!important;gap:1px!important;text-align:center!important;line-height:1.08!important}
.text-size-choice span{font-weight:700}.text-size-choice small{color:var(--muted)!important;font-size:.72rem!important;font-weight:700!important}
.settings-select{display:grid!important;gap:6px!important;margin-top:16px!important}
.settings-select select{
  width:100%!important;min-height:48px!important;margin:0!important;padding:0 12px!important;
  border:1px solid var(--line)!important;border-radius:0!important;color:var(--ink)!important;background:var(--paper)!important;
  font-size:1rem!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important;
}
.settings-select small,.personalize-help{
  margin:0!important;color:var(--muted)!important;font-size:.78rem!important;line-height:1.45!important;font-weight:500!important;
  text-transform:none!important;letter-spacing:0!important;
}
.personalize-help{margin-top:8px!important}
.display-settings-status{margin:16px 0 0!important;color:var(--muted)!important;font-size:.82rem!important}

/* Page-level decorative imagery is now actually connected to Full / Subtle / Off. */
.page-head{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  min-height:116px!important;
  padding:20px 22px!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  background:linear-gradient(118deg,color-mix(in srgb,var(--brand) 92%,#000),color-mix(in srgb,var(--brand2) 34%,var(--brand)))!important;
  color:#f7fbff!important;
}
.page-head::before{
  content:""!important;
  position:absolute!important;
  z-index:-2!important;
  inset:0 0 0 42%!important;
  display:block!important;
  background:none!important;
  opacity:.18!important;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 42%)!important;
  mask-image:linear-gradient(90deg,transparent,#000 42%)!important;
}
.page-head::after{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  inset:0!important;
  width:auto!important;height:auto!important;
  background:linear-gradient(90deg,rgba(5,20,37,.90) 0%,rgba(5,20,37,.68) 54%,rgba(5,20,37,.22) 100%)!important;
  transform:none!important;
  border:0!important;
  opacity:1!important;
}
.page-head h1,.page-head .eyebrow,.page-head p{position:relative;z-index:1}
.page-head h1{color:#fff!important;font-family:"DM Serif Display",Georgia,serif!important;font-weight:400!important;letter-spacing:-.02em!important}
.page-head .eyebrow{color:#71c7ff!important}.page-head p{color:#d5e2ec!important}
html[data-imagery="full"] .page-head::before{opacity:.48!important}
html[data-imagery="subtle"] .page-head::before{opacity:.18!important}
html[data-imagery="off"] .page-head::before{display:none!important}

/* Branded sign-in: hero photo is one of the actual decorative-image surfaces. */
.signin-shell{
  width:min(100%,1180px)!important;
  min-height:620px!important;
  margin:22px auto 10px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;
  overflow:hidden!important;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  background:var(--paper)!important;
  box-shadow:var(--shadow)!important;
}
.signin-visual{position:relative!important;min-height:620px!important;overflow:hidden!important;background:linear-gradient(145deg,#d9efff,#eff8ff)!important}
.signin-visual>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:62% center!important;transition:opacity .2s ease!important}
.signin-visual-overlay{position:absolute!important;inset:0!important;background:linear-gradient(105deg,rgba(238,248,255,.95) 0%,rgba(238,248,255,.72) 42%,rgba(238,248,255,.08) 76%)!important}
.signin-brand-copy{position:relative!important;z-index:2!important;width:min(520px,88%)!important;padding:46px 42px!important;color:#0b1d34!important}
.signin-brand-line{display:flex!important;align-items:center!important;gap:14px!important;margin-bottom:32px!important}
.signin-brand-line .wordmark-mark{width:82px!important;height:82px!important;flex-basis:82px!important}
.signin-brand-line>span{font-size:2rem!important;font-weight:800!important;line-height:1.05!important}
.signin-brand-line>span strong{color:#1166ff!important}
.signin-brand-copy h1{margin:0 0 14px!important;font-size:clamp(2.3rem,4vw,4rem)!important;line-height:1.02!important;letter-spacing:-.045em!important}
.hero-tagline{margin:0!important;color:#0b1d34!important;font-size:1.12rem!important;font-weight:700!important;line-height:1.45!important}
.hero-tagline span{color:var(--family-plan)!important;font-weight:900!important}
.signin-form-side{display:grid!important;place-items:center!important;padding:36px!important;background:var(--paper)!important}
.signin-form-side .login-card{width:min(100%,430px)!important;padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important}
.signin-form-side .login-card h2{font-size:2rem!important}
html[data-imagery="full"] .signin-visual>img{opacity:1!important}
html[data-imagery="subtle"] .signin-visual>img{opacity:.38!important}
html[data-imagery="off"] .signin-visual>img{display:none!important}
html[data-imagery="subtle"] .signin-visual-overlay{background:linear-gradient(115deg,rgba(238,248,255,.98),rgba(238,248,255,.88))!important}
html[data-imagery="off"] .signin-visual-overlay{background:linear-gradient(135deg,#e8f4ff,#f6fbff)!important}
html[data-theme="dark"] .signin-visual{background:linear-gradient(145deg,#081726,#10283b)!important}
html[data-theme="dark"] .signin-visual-overlay{background:linear-gradient(105deg,rgba(5,18,32,.94) 0%,rgba(5,18,32,.74) 44%,rgba(5,18,32,.14) 80%)!important}
html[data-theme="dark"] .signin-brand-copy,html[data-theme="dark"] .hero-tagline{color:#f4f7fb!important}
html[data-theme="dark"] .signin-brand-line>span strong{color:#63a8ff!important}

/* Travel-style result evidence note immediately above the shared footer. */
.results-disclaimer{
  width:min(100%,var(--content-max))!important;
  margin:20px auto 0!important;
  padding:12px clamp(16px,3.5vw,52px) 0!important;
  display:grid!important;
  grid-template-columns:20px 1fr!important;
  gap:8px!important;
  border-top:1px solid var(--line)!important;
  color:var(--muted)!important;
  font-size:.78rem!important;
  line-height:1.45!important;
}
.results-disclaimer p{margin:0!important}.results-disclaimer strong{color:var(--ink)!important}
.results-disclaimer-icon{width:17px!important;height:17px!important;margin-top:1px!important;color:var(--muted)!important}

/* Travel-Planner sibling footer shell: quiet, transparent, compact. */
.site-footer{
  max-width:var(--content-max)!important;
  margin:12px auto 0!important;
  padding:18px clamp(16px,3.5vw,52px) 22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  border:0!important;
  border-top:1px solid var(--line)!important;
  color:var(--muted)!important;
  background:transparent!important;
}
.site-footer-brand{min-width:0!important;display:flex!important;align-items:center!important;gap:9px!important}
.site-footer-brand img{width:30px!important;height:30px!important;flex:0 0 30px!important;object-fit:contain!important;border-radius:0!important}
.site-footer-brand span{min-width:0!important;display:grid!important;gap:1px!important}
.site-footer-brand strong{color:var(--ink)!important;font-size:.86rem!important;line-height:1.2!important}
.site-footer-brand small{max-width:36rem!important;color:var(--muted)!important;font-size:.72rem!important;line-height:1.35!important}
.site-footer-brand em{color:var(--family-plan)!important;font-style:normal!important;font-weight:900!important}
.site-footer nav{display:flex!important;flex-wrap:wrap!important;justify-content:flex-end!important;gap:5px 14px!important}
.site-footer a{min-height:32px!important;display:inline-flex!important;align-items:center!important;color:var(--brand2)!important;font-size:.76rem!important;font-weight:700!important;text-underline-offset:3px!important}
.footer-current-name{font-weight:500;color:var(--muted)}

/* Theme surfaces: brand remains recognizable in both light and dark. */
html[data-theme="dark"] .site-header{background:color-mix(in srgb,var(--paper) 96%,transparent)!important}
html[data-theme="dark"] .wordmark{color:var(--ink)!important}
html[data-theme="dark"] .wordmark strong{color:#63a8ff!important}
html[data-theme="dark"] .display-settings-trigger,
html[data-theme="dark"] .profile-menu-trigger,
html[data-theme="dark"] .display-settings-panel,
html[data-theme="dark"] .display-settings-heading>button,
html[data-theme="dark"] .settings-segments button,
html[data-theme="dark"] .personalize-palette-grid button,
html[data-theme="dark"] .settings-select select,
html[data-theme="dark"] .profile-menu-panel{background:var(--paper)!important;color:var(--ink)!important;border-color:var(--line)!important}

/* High text sizes keep the shell usable instead of just getting enormous. */
html[data-text-size="larger"] .site-header,html[data-text-size="extra_large"] .site-header{min-height:62px!important}
html[data-text-size="larger"] .wordmark,html[data-text-size="extra_large"] .wordmark{font-size:1rem!important}
html[data-text-size="larger"] .primary-nav,html[data-text-size="extra_large"] .primary-nav{font-size:.9rem!important}
html[data-text-size="extra_large"] .settings-segments.four{grid-template-columns:repeat(2,minmax(0,1fr))!important}

@media(max-width:900px){
  .site-header{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:4px 8px!important;
    padding:6px 10px 0!important;
  }
  .wordmark{grid-column:1!important;grid-row:1!important;font-size:.92rem!important}
  .wordmark-mark{width:34px!important;height:34px!important;flex-basis:34px!important}
  .header-actions{grid-column:2!important;grid-row:1!important}
  .primary-nav{
    grid-column:1/-1!important;grid-row:2!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:2px!important;
    overflow:visible!important;
    font-size:.78rem!important;
  }
  .primary-nav a{min-width:0!important;min-height:38px!important;padding:4px 6px!important;justify-content:center!important}
  .display-settings-trigger,.profile-menu-trigger{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
  .shell{padding-top:18px!important}
  .page-head{min-height:105px!important}
  .signin-shell{grid-template-columns:1fr!important;max-width:680px!important;min-height:0!important}
  .signin-visual{min-height:430px!important}
  .signin-form-side{padding:28px 24px!important}
  .site-footer{align-items:flex-start!important;flex-direction:column!important}
  .site-footer nav{justify-content:flex-start!important}
}

@media(max-width:620px){
  .site-header{padding-inline:8px!important}
  .wordmark{gap:7px!important;font-size:.86rem!important}
  .wordmark-mark{width:31px!important;height:31px!important;flex-basis:31px!important}
  .primary-nav{font-size:.72rem!important}
  .primary-nav a{flex-direction:column!important;gap:1px!important;line-height:1.05!important}
  .primary-nav .horizon-icon{width:17px!important;height:17px!important}
  .display-settings-trigger,.profile-menu-trigger{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important}
  .display-settings-panel{position:fixed!important;inset:6px!important;width:auto!important;max-height:calc(100vh - 12px)!important;padding:14px!important}
  .personalize-palette-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .settings-segments.four{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .profile-menu-panel{position:fixed!important;top:56px!important;right:8px!important}
  .page-head{padding:17px!important;border-radius:13px!important}
  .page-head::before{inset:0 0 0 28%!important}
  .signin-shell{margin-top:4px!important;border-radius:14px!important}
  .signin-visual{min-height:340px!important}
  .signin-brand-copy{padding:28px 22px!important}
  .signin-brand-line{margin-bottom:20px!important}
  .signin-brand-line .wordmark-mark{width:62px!important;height:62px!important;flex-basis:62px!important}
  .signin-brand-line>span{font-size:1.55rem!important}
  .signin-brand-copy h1{font-size:2.45rem!important}
  .site-footer{padding-inline:16px!important}
  .footer-current-name{display:none}
}

@media(max-width:390px){
  .primary-nav a{padding-inline:2px!important;font-size:.68rem!important}
  .personalize-palette-grid button{grid-template-columns:1fr!important;gap:3px!important;text-align:center!important}
  .palette-swatches{justify-content:center!important}
}
.profile-menu-trigger.active{border-color:var(--brand2)!important;background:var(--soft)!important}
/* Drive's binocular mark needs a little more room than Travel Planner's compass mark to remain recognizable. */
.wordmark-mark{width:40px!important;height:40px!important;flex-basis:40px!important}
@media(max-width:620px){.wordmark-mark{width:34px!important;height:34px!important;flex-basis:34px!important}}

/* ===== Horizon Drive v21: full-bleed daily theme imagery ===== */
.page-head{
  min-height:132px!important;
  padding:20px 24px!important;
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:#0b1d34!important;
}
.page-head::before{display:none!important}
.page-head::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  background:linear-gradient(90deg,rgba(5,20,37,.94) 0%,rgba(5,20,37,.82) 36%,rgba(5,20,37,.50) 62%,rgba(5,20,37,.16) 100%)!important;
  pointer-events:none!important;
}
.page-head-scene{
  position:absolute!important;
  inset:0!important;
  z-index:-2!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
  transition:opacity .2s ease!important;
}
.page-head-copy{position:relative!important;z-index:2!important;max-width:min(760px,72%)!important}
.page-head-action{margin-top:12px!important}
html[data-imagery="full"] .page-head-scene{opacity:1!important}
html[data-imagery="subtle"] .page-head-scene{opacity:.36!important}
html[data-imagery="off"] .page-head-scene{display:none!important}
html[data-imagery="subtle"] .page-head::after{background:linear-gradient(90deg,rgba(5,20,37,.96),rgba(5,20,37,.86))!important}
html[data-imagery="off"] .page-head::after{background:linear-gradient(115deg,#0b1d34,#16324f)!important}

/* Empty-state imagery follows the same user preference. */
html[data-imagery="subtle"] .empty-state-photo{opacity:.32!important}
html[data-imagery="off"] .empty-state-photo{display:none!important}

/* Compact sign-in: scenic strip first, form below. */
.signin-shell{
  width:min(100%,1060px)!important;
  min-height:0!important;
  margin:18px auto 10px!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  overflow:hidden!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  background:var(--paper)!important;
  box-shadow:var(--shadow)!important;
}
.signin-visual,
.signin-hero-compact{
  min-height:250px!important;
  height:250px!important;
  position:relative!important;
  overflow:hidden!important;
  background:#0b1d34!important;
}
.signin-visual>img,
.signin-scene-img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}
.signin-visual-overlay{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:linear-gradient(90deg,rgba(5,20,37,.90) 0%,rgba(5,20,37,.70) 40%,rgba(5,20,37,.24) 70%,rgba(5,20,37,.05) 100%)!important;
}
.signin-brand-copy{
  position:relative!important;
  z-index:2!important;
  width:min(620px,72%)!important;
  padding:34px 38px!important;
  color:#fff!important;
}
.signin-brand-copy .eyebrow{color:#71c7ff!important}
.signin-brand-copy h1{
  margin:4px 0 8px!important;
  color:#fff!important;
  font-size:clamp(2rem,4vw,3.4rem)!important;
  line-height:1!important;
}
.hero-tagline{color:#fff!important;font-size:1.02rem!important;margin:0!important}
.hero-tagline span{color:var(--family-plan)!important;font-weight:900!important}
.signin-form-side,
.signin-form-compact{
  display:grid!important;
  place-items:center!important;
  padding:24px 26px 26px!important;
  background:var(--paper)!important;
}
.signin-form-side .login-card{width:min(100%,560px)!important;padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important}
.signin-form-side .login-card h2{font-size:1.65rem!important;margin-bottom:4px!important}
.signin-form-side .stack{margin-top:14px!important;gap:11px!important}
.signin-links-row{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:18px!important;flex-wrap:wrap!important;margin-top:12px!important}
.signin-links-row .recovery-link{margin:0!important}
.signin-links-row .new-account-note{margin:0!important;max-width:26rem!important;color:var(--muted)!important;font-size:.86rem!important;line-height:1.4!important}
html[data-imagery="full"] .signin-scene-img{opacity:1!important}
html[data-imagery="subtle"] .signin-scene-img{opacity:.34!important}
html[data-imagery="off"] .signin-scene-img{display:none!important}
html[data-imagery="subtle"] .signin-visual-overlay{background:linear-gradient(90deg,rgba(5,20,37,.96),rgba(5,20,37,.82))!important}
html[data-imagery="off"] .signin-visual-overlay{background:linear-gradient(115deg,#0b1d34,#16324f)!important}

/* Personalize remains compact and inherits the app text-size preference. */
.display-settings-panel{font-size:1rem!important}
.display-settings-heading h2{font-size:1.6em!important}
.display-settings-panel legend{font-size:.95em!important}
.settings-segments button,.personalize-palette-grid button{font-size:.86em!important}
.display-settings-status{font-size:.78em!important}

@media(max-width:900px){
  .page-head{min-height:118px!important;padding:18px 20px!important}
  .page-head-copy{max-width:78%!important}
  .signin-shell{max-width:760px!important}
  .signin-visual,.signin-hero-compact{height:220px!important;min-height:220px!important}
  .signin-brand-copy{padding:28px 28px!important;width:min(660px,80%)!important}
}
@media(max-width:620px){
  .page-head{min-height:108px!important;padding:16px!important}
  .page-head-copy{max-width:86%!important}
  .page-head::after{background:linear-gradient(90deg,rgba(5,20,37,.94),rgba(5,20,37,.64),rgba(5,20,37,.26))!important}
  .signin-visual,.signin-hero-compact{height:195px!important;min-height:195px!important}
  .signin-brand-copy{padding:22px 20px!important;width:86%!important}
  .signin-brand-copy h1{font-size:2rem!important}
  .signin-form-side,.signin-form-compact{padding:20px 18px 22px!important}
  .signin-links-row{display:grid!important;gap:8px!important}
}
/* Horizon family shell — working test implementation.
   This file intentionally overrides the older Drive-specific shell without widening pages just to fill space. */
:root{
  --family-header-height:66px;
  --family-shell-max:1360px;
  --family-reading-max:760px;
  --family-account-max:900px;
  --family-plan:#ffb21a;
  --family-card-pad:18px;
  --family-gap:14px;
  --family-section-gap:14px;
}

/* Shared family typography contract: Standard is a real 100% baseline, not tuned to one computer. */
:root,html[data-text-size="default"]{
  --body-size:16px;--control-size:16px;--label-size:15px;--small-size:14px;--nav-size:16px;
  --page-title-size:34px;--section-title-size:24px;--card-title-size:20px;--hero-title-size:46px;
}
html[data-text-size="smaller"]{
  --body-size:14.4px;--control-size:14.8px;--label-size:13.8px;--small-size:13px;--nav-size:14.4px;
  --page-title-size:31px;--section-title-size:22px;--card-title-size:18px;--hero-title-size:42px;
}
html[data-text-size="larger"]{
  --body-size:19.2px;--control-size:19px;--label-size:18px;--small-size:16.5px;--nav-size:18px;
  --page-title-size:39px;--section-title-size:27px;--card-title-size:23px;--hero-title-size:51px;
}
html[data-text-size="extra_large"]{
  --body-size:22.4px;--control-size:22px;--label-size:21px;--small-size:19px;--nav-size:20px;
  --page-title-size:43px;--section-title-size:30px;--card-title-size:26px;--hero-title-size:56px;
}

/* Global vertical compaction: less scrolling without smaller text. */
.shell{
  width:min(100%,var(--family-shell-max))!important;
  max-width:none!important;
  margin:0 auto!important;
  padding:18px clamp(14px,2.4vw,32px) 28px!important;
}
.card{padding:var(--family-card-pad)!important}
.search-list,.car-grid{gap:var(--family-gap)!important}
.settings-section{margin-bottom:var(--family-section-gap)!important}
.page-head{margin:0 0 14px!important}
.page-head h1{margin:4px 0!important}
.page-head p{margin:0!important}
.form-section{padding:18px!important}
.form-actions{padding:14px 18px!important}
.stack{gap:11px!important;margin-top:13px!important}
.settings-divider{margin:16px 0!important}
.search-card{padding:var(--family-card-pad)!important}
.search-actions{margin-top:12px!important}
.chips{margin:11px 0!important}
.tip{margin-top:14px!important}

/* Width follows the job of the page. */
.account-page{width:min(100%,var(--family-account-max))!important;margin:0 auto!important}
.settings-page,.narrow-page{width:min(100%,900px)!important;margin:0 auto!important}
.settings-form-width{max-width:650px!important}
.page-head>div{max-width:var(--family-reading-max)!important}
.results-page,.saved-page{width:100%!important}

/* Travel-Planner sibling header geometry; Drive keeps its own branding and three app destinations. */
.site-header{
  position:sticky!important;
  top:0!important;
  z-index:90!important;
  min-height:var(--family-header-height)!important;
  display:grid!important;
  grid-template-columns:minmax(210px,1fr) auto minmax(210px,1fr)!important;
  align-items:center!important;
  gap:14px!important;
  padding:6px clamp(16px,2.5vw,34px)!important;
  color:var(--ink)!important;
  background:color-mix(in srgb,var(--paper) 96%,transparent)!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:none!important;
  backdrop-filter:blur(16px)!important;
  overflow:visible!important;
}
.site-header.logged-out{grid-template-columns:1fr!important}
.wordmark{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  color:var(--ink)!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
.wordmark-mark{
  width:44px!important;
  height:44px!important;
  flex:0 0 44px!important;
  display:block!important;
  object-fit:contain!important;
  border-radius:10px!important;
}
.horizon-wordmark{display:grid!important;gap:0!important;line-height:.8!important;white-space:nowrap!important}
.horizon-wordmark-top{
  position:relative;
  font-size:1.06rem!important;
  font-weight:950!important;
  font-style:italic!important;
  letter-spacing:-.05em!important;
  transform:skewX(-7deg);
  background:linear-gradient(92deg,var(--ink) 4%,#194fa7 54%,#0e9eb5 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.horizon-wordmark-bottom{
  position:relative;
  width:max-content;
  margin-top:4px;
  padding-left:15px;
  color:var(--brand2)!important;
  font-size:.83rem!important;
  font-weight:950!important;
  font-style:italic!important;
  letter-spacing:.09em!important;
}
.horizon-wordmark-bottom::before{
  content:"";position:absolute;left:0;top:50%;width:12px;height:2px;background:currentColor;
  box-shadow:-5px -4px 0 -0.5px currentColor,-8px 4px 0 -0.5px currentColor;transform:translateY(-50%) skewX(-22deg);
}

.primary-nav{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,max-content)!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:22px!important;
  overflow:visible!important;
  scrollbar-width:none!important;
  font-size:.92rem!important;
}
.primary-nav::-webkit-scrollbar{display:none!important}
.primary-nav a{
  position:relative!important;
  min-width:0!important;
  min-height:46px!important;
  padding:0 4px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border-radius:0!important;
  color:var(--muted)!important;
  background:transparent!important;
  text-decoration:none!important;
  font-weight:760!important;
  white-space:nowrap!important;
}
.primary-nav a:hover{color:var(--ink)!important;background:transparent!important}
.primary-nav a::after{
  content:""!important;display:block!important;position:absolute!important;left:4px!important;right:4px!important;bottom:-7px!important;
  height:3px!important;border-radius:3px!important;background:transparent!important;
}
.primary-nav a.nav-active{color:var(--ink)!important;background:transparent!important}
.primary-nav a.nav-active::after{background:var(--brand2)!important}
.primary-nav .horizon-icon{width:18px!important;height:18px!important;color:var(--brand2)!important}

.header-actions{
  min-width:max-content!important;
  justify-self:end!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
.display-settings,.profile-menu{position:relative!important}
.display-settings-trigger{
  width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;padding:0!important;
  display:grid!important;place-items:center!important;border:1px solid var(--line)!important;border-radius:12px!important;
  color:var(--ink)!important;background:var(--paper)!important;cursor:pointer!important;
}
.display-settings-trigger .horizon-icon{width:21px!important;height:21px!important;color:var(--brand2)!important}
.display-settings-trigger:hover,.display-settings-trigger[aria-expanded="true"]{border-color:var(--brand2)!important;background:var(--soft)!important}
.profile-menu-trigger{
  width:auto!important;height:42px!important;min-width:42px!important;min-height:42px!important;margin:0!important;padding:0 10px 0 6px!important;
  display:flex!important;align-items:center!important;gap:7px!important;list-style:none!important;border:1px solid transparent!important;border-radius:12px!important;
  color:var(--ink)!important;background:transparent!important;cursor:pointer!important;
}
.profile-menu-trigger::-webkit-details-marker{display:none!important}
.profile-menu-trigger:hover,.profile-menu[open] .profile-menu-trigger,.profile-menu-trigger.active{border-color:var(--line)!important;background:var(--soft)!important}
.profile-initial{
  width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;border-radius:50%;
  color:#0b1d34;background:#dcecff;font-size:.8rem;font-weight:900;
}
.profile-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem;font-weight:800}
.profile-chevron{font-size:.72rem;color:var(--muted)}
.profile-menu-panel{
  position:absolute!important;z-index:120!important;top:calc(100% + 8px)!important;right:0!important;
  width:min(270px,calc(100vw - 20px))!important;padding:8px!important;display:grid!important;gap:2px!important;
  border:1px solid var(--line)!important;border-radius:14px!important;color:var(--ink)!important;background:var(--paper)!important;
  box-shadow:0 16px 36px rgba(10,30,52,.18)!important;
}
.profile-menu-identity{display:grid!important;gap:2px!important;padding:8px 10px 10px!important;border-bottom:1px solid var(--line)!important;margin-bottom:3px!important}
.profile-menu-identity strong{font-size:.9rem!important}.profile-menu-identity small{font-size:.76rem!important;color:var(--muted)!important;overflow:hidden;text-overflow:ellipsis}
.profile-menu-panel a{min-height:40px!important;padding:7px 10px!important;display:flex!important;align-items:center!important;gap:8px!important;border-radius:8px!important;text-decoration:none!important;font-size:.88rem!important;font-weight:750!important}
.profile-menu-panel a:hover{background:var(--soft)!important}
.profile-menu-panel .horizon-icon{width:18px!important;height:18px!important;color:var(--brand2)!important}

/* Condensed Personalize panel. Fits on ordinary laptop screens without its own scrollbar. */
.display-settings-panel{
  position:absolute!important;z-index:130!important;top:calc(100% + 8px)!important;right:0!important;
  width:min(540px,calc(100vw - 20px))!important;max-height:none!important;overflow:visible!important;
  padding:15px!important;color:var(--ink)!important;background:var(--paper)!important;border:1px solid var(--line)!important;border-radius:16px!important;
  box-shadow:0 18px 42px rgba(10,30,52,.20)!important;
}
.display-settings-panel[hidden]{display:none!important}
.display-settings-heading{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;padding-bottom:9px!important;border-bottom:1px solid var(--line)!important}
.display-settings-heading span{color:var(--brand2)!important;font-size:.67rem!important;font-weight:850!important;letter-spacing:.1em!important;text-transform:uppercase!important}
.display-settings-heading h2{margin:1px 0 0!important;color:var(--ink)!important;font-family:inherit!important;font-size:1.22rem!important;font-weight:850!important;line-height:1.05!important}
.display-settings-heading>button{width:34px!important;height:34px!important;flex:0 0 34px!important;border:1px solid var(--line)!important;border-radius:50%!important;color:var(--ink)!important;background:var(--paper)!important;font-size:1.25rem!important;cursor:pointer!important}
.personalize-compact-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px 12px!important;margin-top:10px!important}
.personalize-compact-grid fieldset{min-width:0!important;margin:0!important;padding:0!important;border:0!important}
.personalize-span-2{grid-column:1/-1!important}
.display-settings-panel legend{margin:0 0 5px!important;color:var(--ink)!important;font-size:.76rem!important;font-weight:820!important;letter-spacing:0!important;text-transform:none!important}
.settings-segments{display:grid!important;gap:5px!important}.settings-segments.two{grid-template-columns:repeat(2,minmax(0,1fr))!important}.settings-segments.three{grid-template-columns:repeat(3,minmax(0,1fr))!important}.settings-segments.four{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.settings-segments button,.personalize-palette-grid button{
  min-width:0!important;min-height:38px!important;padding:6px 6px!important;border:1px solid var(--line)!important;border-radius:9px!important;
  color:var(--ink)!important;background:var(--paper)!important;font-size:.74rem!important;font-weight:760!important;cursor:pointer!important;
}
.settings-segments button:hover,.personalize-palette-grid button:hover{background:var(--soft)!important}
.settings-segments button[aria-pressed="true"],.personalize-palette-grid button[aria-pressed="true"]{border-color:var(--brand2)!important;background:color-mix(in srgb,var(--brand2) 14%,var(--paper))!important;box-shadow:inset 0 0 0 1px var(--brand2)!important}
.text-size-choice{display:grid!important;place-items:center!important;gap:0!important}.text-size-choice small{display:block!important;color:var(--muted)!important;font-size:.62rem!important;line-height:1!important}
.personalize-palette-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}
.personalize-palette-grid button{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:5px!important;text-align:left!important}
.palette-dot{width:15px!important;height:15px!important;flex:0 0 15px!important;border-radius:4px!important;background:var(--dot)!important;border:1px solid color-mix(in srgb,var(--dot) 75%,#fff)!important}.high-contrast-dot{background:linear-gradient(135deg,#000 0 33%,#0672e7 33% 67%,#fff 67%)!important}
.imagery-mini-preview{height:42px!important;margin:0 0 5px!important;overflow:hidden!important;border-radius:8px!important;border:1px solid var(--line)!important}.imagery-mini-preview img{width:100%!important;height:100%!important;display:block!important;object-fit:cover!important}
.display-settings-status{min-height:16px!important;margin:9px 0 0!important;color:var(--muted)!important;font-size:.68rem!important;line-height:1.25!important}

/* Compact scenic sign-in: real imagery + friendly car character; no giant hero that forces scrolling. */
.signin-shell{
  width:min(100%,1260px)!important;height:clamp(430px,68vh,560px)!important;min-height:0!important;margin:10px auto 4px!important;
  display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;overflow:hidden!important;
  border:1px solid var(--line)!important;border-radius:20px!important;background:var(--paper)!important;box-shadow:var(--shadow)!important;
}
.signin-visual{
  position:relative!important;min-height:0!important;overflow:hidden!important;
  background-image:none!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;
  transition:background-image .7s ease!important;
}
.signin-visual-overlay{position:absolute!important;inset:0!important;background:linear-gradient(96deg,rgba(7,25,46,.80) 0%,rgba(7,25,46,.58) 43%,rgba(7,25,46,.08) 78%)!important}
.signin-brand-copy{position:relative!important;z-index:2!important;width:min(470px,90%)!important;padding:28px 30px!important;color:#fff!important}
.signin-brand-line{display:flex!important;align-items:center!important;gap:11px!important;margin-bottom:24px!important}.signin-brand-line .wordmark-mark{width:60px!important;height:60px!important;flex-basis:60px!important}.signin-brand-line .horizon-wordmark-top{font-size:1.45rem!important;background:linear-gradient(92deg,#fff 0%,#dcecff 55%,#7ad8e7 100%)!important;-webkit-background-clip:text!important;background-clip:text!important}.signin-brand-line .horizon-wordmark-bottom{font-size:1.02rem!important;color:#72aaff!important}
.signin-brand-copy h1{max-width:10ch!important;margin:0 0 9px!important;color:#fff!important;font-size:clamp(2.05rem,3.3vw,3.2rem)!important;line-height:1.02!important;letter-spacing:-.04em!important}.hero-tagline{margin:0!important;color:#fff!important;font-size:1rem!important;font-weight:720!important}.hero-tagline span{color:var(--family-plan)!important;font-weight:900!important}
.signin-mascot{position:absolute!important;z-index:2!important;right:3%!important;bottom:-2%!important;width:min(38%,300px)!important;height:auto!important;filter:drop-shadow(0 10px 18px rgba(3,20,43,.28))!important;pointer-events:none!important}
.signin-form-side{display:grid!important;place-items:center!important;padding:25px 30px!important;background:var(--paper)!important}.signin-form-side .login-card{width:min(100%,430px)!important;padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important}.signin-form-side .login-card h2{font-size:1.75rem!important;margin-bottom:4px!important}.signin-form-side .stack{margin-top:12px!important}.secure-note{margin-top:10px!important}.new-account-note{margin-top:8px!important}
html[data-imagery="subtle"] .signin-visual{background-position:center!important}.signin-visual{--scenic-opacity:1}
html[data-imagery="subtle"] .signin-visual::after{content:"";position:absolute;inset:0;z-index:1;background:color-mix(in srgb,var(--paper) 54%,transparent)}
html[data-imagery="subtle"] .signin-mascot{opacity:.68!important}
html[data-imagery="off"] .signin-visual{background-image:none!important;background:linear-gradient(145deg,#dcecff,#eef7ff)!important}
html[data-imagery="off"] .signin-mascot{display:none!important}
html[data-imagery="off"] .signin-visual-overlay{background:linear-gradient(135deg,rgba(15,48,87,.08),rgba(15,48,87,.02))!important}
html[data-imagery="off"] .signin-brand-copy{color:var(--ink)!important}.signin-brand-copy h1{color:inherit!important}html[data-imagery="off"] .hero-tagline{color:var(--ink)!important}
html[data-theme="dark"] .signin-visual-overlay{background:linear-gradient(96deg,rgba(4,17,33,.90),rgba(4,17,33,.67),rgba(4,17,33,.12))!important}
html[data-theme="dark"][data-imagery="off"] .signin-visual{background:linear-gradient(145deg,#081726,#10283b)!important}
html[data-theme="dark"][data-imagery="off"] .signin-brand-copy,html[data-theme="dark"][data-imagery="off"] .hero-tagline{color:#f4f7fb!important}

/* Scenic imagery sits inside existing page introductions; it does not add page height. */
.page-head{position:relative!important;isolation:isolate!important;overflow:hidden!important;min-height:0!important;padding:14px 16px!important;border:1px solid transparent!important;border-radius:15px!important}
.page-head>*{position:relative!important;z-index:2!important}
.page-head::before{content:""!important;position:absolute!important;z-index:0!important;inset:0 0 0 44%!important;background-image:none!important;background-size:cover!important;background-position:center!important;opacity:.48!important;mask-image:linear-gradient(to right,transparent,#000 28%)!important;-webkit-mask-image:linear-gradient(to right,transparent,#000 28%)!important;pointer-events:none!important}
.page-head::after{content:""!important;position:absolute!important;z-index:1!important;inset:0!important;background:linear-gradient(90deg,var(--bg) 0 48%,transparent 78%)!important;pointer-events:none!important}
.page-head-mascot{position:absolute!important;z-index:2!important;right:2%!important;bottom:-22%!important;width:116px!important;max-height:120px!important;object-fit:contain!important;pointer-events:none!important;filter:drop-shadow(0 5px 10px rgba(0,0,0,.18))!important}
html[data-imagery="full"] .page-head::before{opacity:.58!important}html[data-imagery="subtle"] .page-head::before{opacity:.18!important}html[data-imagery="subtle"] .page-head-mascot{opacity:.45!important}html[data-imagery="off"] .page-head::before,html[data-imagery="off"] .page-head-mascot{display:none!important}

/* Welcome messages: one small toast. Never a giant desktop panel. */
.flash.welcome,.flash.welcome-new{
  position:fixed!important;z-index:150!important;top:78px!important;right:18px!important;left:auto!important;width:auto!important;max-width:min(360px,calc(100vw - 36px))!important;
  margin:0!important;padding:10px 13px!important;border-radius:12px!important;font-size:.88rem!important;font-weight:760!important;line-height:1.3!important;
  box-shadow:0 12px 30px rgba(10,30,52,.18)!important;
}
.flash.welcome{background:#edf6ff!important;color:#174a7b!important;border:1px solid #bcd9f4!important}
.flash.welcome-new{background:#edf9f3!important;color:#156646!important;border:1px solid #b8e4d0!important}

/* Result evidence note + shared family footer: same quiet structure as Travel Planner. */
.results-disclaimer{width:100%!important;margin:14px 0 0!important;padding:10px 0 0!important;display:grid!important;grid-template-columns:18px 1fr!important;gap:7px!important;border-top:1px solid var(--line)!important;color:var(--muted)!important;font-size:.74rem!important;line-height:1.4!important}.results-disclaimer p{margin:0!important}.results-disclaimer strong{color:var(--ink)!important}.results-disclaimer-icon{width:16px!important;height:16px!important;margin-top:1px!important;color:var(--muted)!important}
.site-footer{
  min-height:78px!important;width:100%!important;max-width:none!important;margin:0!important;padding:14px clamp(16px,2.5vw,34px)!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;
  border:0!important;border-top:1px solid var(--line)!important;color:var(--muted)!important;background:var(--paper)!important;
}
.site-footer-brand{min-width:0!important;display:flex!important;align-items:center!important;gap:9px!important}.site-footer-brand img{width:32px!important;height:32px!important;flex:0 0 32px!important;border-radius:8px!important}.site-footer-brand span{display:grid!important;gap:1px!important}.site-footer-brand strong{color:var(--ink)!important;font-size:.82rem!important}.site-footer-brand small{color:var(--muted)!important;font-size:.7rem!important;line-height:1.25!important}.site-footer-brand em{color:var(--family-plan)!important;font-style:normal!important;font-weight:900!important}.site-footer nav{display:flex!important;flex-wrap:wrap!important;justify-content:flex-end!important;gap:5px 14px!important}.site-footer a{min-height:32px!important;display:inline-flex!important;align-items:center!important;color:var(--brand2)!important;font-size:.72rem!important;font-weight:720!important;text-underline-offset:3px!important}

html[data-theme="dark"] .horizon-wordmark-top{background:linear-gradient(92deg,#ffffff 0%,#98c9ff 56%,#59d6cf 100%)!important;-webkit-background-clip:text!important;background-clip:text!important}.site-header,.site-footer{background:color-mix(in srgb,var(--paper) 97%,transparent)!important}
html[data-theme="dark"] .profile-initial{background:#dcecff!important;color:#0b1d34!important}

/* Large text reflows the shell instead of clipping. */
html[data-text-size="larger"] .site-header,html[data-text-size="extra_large"] .site-header{grid-template-columns:minmax(0,1fr) auto!important;padding-bottom:4px!important}
html[data-text-size="larger"] .primary-nav,html[data-text-size="extra_large"] .primary-nav{grid-column:1/-1!important;grid-row:2!important;width:100%!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important}
html[data-text-size="larger"] .header-actions,html[data-text-size="extra_large"] .header-actions{grid-column:2!important;grid-row:1!important}
html[data-text-size="extra_large"] .settings-segments.four{grid-template-columns:repeat(2,minmax(0,1fr))!important}

@media(max-width:900px){
  .site-header{grid-template-columns:minmax(0,1fr) auto!important;gap:4px 8px!important;padding:6px 10px 0!important}
  .wordmark{grid-column:1!important;grid-row:1!important}.header-actions{grid-column:2!important;grid-row:1!important}
  .primary-nav{grid-column:1/-1!important;grid-row:2!important;width:100%!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:3px!important}
  .primary-nav a{min-height:38px!important;padding:0 3px!important}.primary-nav a::after{bottom:0!important}
  .shell{padding-top:14px!important}
  .signin-shell{height:auto!important;grid-template-columns:1fr!important;max-width:680px!important}.signin-visual{min-height:300px!important}.signin-form-side{padding:22px!important}
  .site-footer{align-items:flex-start!important;flex-direction:column!important}.site-footer nav{justify-content:flex-start!important}
}

@media(max-width:620px){
  .site-header{padding-inline:8px!important}.wordmark{gap:7px!important}.wordmark-mark{width:36px!important;height:36px!important;flex-basis:36px!important}.horizon-wordmark-top{font-size:.9rem!important}.horizon-wordmark-bottom{font-size:.69rem!important}
  .profile-name{display:none!important}.profile-menu-trigger{width:42px!important;padding:0 5px!important}.profile-chevron{display:none!important}
  .primary-nav{font-size:.74rem!important}.primary-nav a{gap:3px!important}.primary-nav .horizon-icon{width:16px!important;height:16px!important}
  .display-settings-panel{position:fixed!important;top:6px!important;right:6px!important;left:6px!important;width:auto!important;padding:12px!important;border-radius:14px!important}
  .personalize-compact-grid{gap:8px!important}.personalize-palette-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.personalize-palette-grid button{justify-content:center!important}.personalize-palette-grid button span:last-child{display:none!important}.settings-segments button{min-height:36px!important;font-size:.7rem!important}.imagery-mini-preview{height:34px!important}.display-settings-heading h2{font-size:1.1rem!important}
  .profile-menu-panel{position:fixed!important;top:56px!important;right:8px!important}
  .signin-shell{margin-top:4px!important;border-radius:15px!important}.signin-visual{min-height:260px!important}.signin-brand-copy{padding:21px!important}.signin-brand-line{margin-bottom:13px!important}.signin-brand-line .wordmark-mark{width:50px!important;height:50px!important;flex-basis:50px!important}.signin-brand-copy h1{font-size:2.2rem!important}.signin-mascot{width:min(41%,190px)!important}
  .page-head{padding:12px!important}.page-head::before{inset:0 0 0 30%!important}.page-head-mascot{width:88px!important}
  .flash.welcome,.flash.welcome-new{top:100px!important;left:10px!important;right:10px!important;max-width:none!important}
  .site-footer{padding:13px 14px!important}.footer-current-name{display:none!important}
}

@media(max-width:390px){
  .primary-nav a{font-size:.68rem!important;padding-inline:1px!important}.personalize-compact-grid{grid-template-columns:1fr!important}.personalize-span-2{grid-column:auto!important}.settings-segments.four{grid-template-columns:repeat(2,minmax(0,1fr))!important}.personalize-palette-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.imagery-mini-preview{display:none!important}
}

@media(max-height:700px) and (min-width:621px){
  .display-settings-panel{padding:12px!important}.personalize-compact-grid{gap:7px 10px!important}.imagery-mini-preview{height:30px!important}.settings-segments button,.personalize-palette-grid button{min-height:34px!important}.display-settings-status{margin-top:6px!important}
}
html[data-imagery="subtle"] .empty-state-photo{opacity:.45!important}
html[data-imagery="off"] .empty-state-photo{display:none!important}
@media(max-width:620px){input,select,textarea{font-size:16px!important}}

/* ===== Combo 3 GUI correction pass v17 =====
   Focus: stable responsive layout, compact vertical rhythm, daily coordinated imagery,
   Travel-family header controls, readable branding, no nested scrollbar chrome. */
:root{
  --family-header-height:65px;
  --family-plan:#ffc145;
  --family-card-padding:18px;
  --family-card-gap:14px;
  --family-section-gap:14px;
  --horizon-scene-image:none;
}

/* Compact the site without shrinking readable text. */
.shell{padding-top:18px!important;padding-bottom:28px!important}
.card{padding:var(--family-card-padding)!important}
.search-list,.car-grid{gap:var(--family-card-gap)!important}
.settings-section{margin-bottom:var(--family-section-gap)!important}
.page-head{margin-bottom:14px!important}
.stack{gap:11px!important;margin-top:13px!important}
.form-section{padding:18px!important}
.form-actions{padding:14px 18px!important}
.search-card{padding:18px!important}
.chips{margin:10px 0!important}
.search-actions{margin-top:11px!important}
.tip{margin-top:14px!important}

/* Travel-family header geometry. Drive has fewer nav items so it stays one row longer. */
.site-header{
  min-height:var(--family-header-height)!important;
  grid-template-columns:minmax(190px,1fr) auto minmax(92px,1fr)!important;
  gap:16px!important;
  padding:7px clamp(16px,2.4vw,36px)!important;
  overflow:visible!important;
}
.wordmark{overflow:visible!important;gap:9px!important}
.wordmark-mark{width:42px!important;height:42px!important;flex-basis:42px!important;border-radius:10px!important}
.horizon-wordmark{overflow:visible!important;padding-right:6px!important;line-height:.84!important}
.horizon-wordmark-top{
  display:block!important;
  padding-right:5px!important;
  font-size:1.08rem!important;
  letter-spacing:-.025em!important;
  transform:skewX(-5deg)!important;
  overflow:visible!important;
}
.horizon-wordmark-bottom{font-size:.82rem!important;margin-top:4px!important;padding-left:15px!important;letter-spacing:.08em!important}
.primary-nav{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:18px!important;
  overflow:visible!important;
  scrollbar-width:none!important;
}
.primary-nav a{min-height:42px!important;padding:5px 7px!important;background:transparent!important}
.primary-nav a.nav-active{background:transparent!important;position:relative!important}
.primary-nav a.nav-active::after{display:block!important;content:""!important;position:absolute!important;left:7px!important;right:7px!important;bottom:-8px!important;height:3px!important;border-radius:3px!important;background:var(--brand2)!important}
.primary-nav::-webkit-scrollbar,.display-settings-panel::-webkit-scrollbar{display:none!important}
.header-actions{gap:9px!important}
.display-settings-trigger,.profile-menu-trigger{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;border-radius:12px!important}
.display-settings-trigger .horizon-icon{width:23px!important;height:23px!important}
.profile-menu-trigger{padding:0!important}
.profile-initial{width:34px!important;height:34px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:#dcecff!important;color:#0b1d34!important;font-weight:900!important;font-size:.88rem!important}
.profile-name,.profile-chevron{display:none!important}

/* Compact Personalize panel. Same choices, less vertical bulk. */
.display-settings-panel{
  width:min(520px,calc(100vw - 24px))!important;
  max-height:none!important;
  overflow:visible!important;
  padding:14px!important;
  border-radius:14px!important;
}
.display-settings-heading{align-items:center!important}
.display-settings-heading>div>span{display:none!important}
.display-settings-heading h2{font-size:1.22rem!important;margin:0!important}
.display-settings-heading>button{width:34px!important;height:34px!important;min-height:34px!important}
.personalize-compact-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:10px!important}
.personalize-compact-grid fieldset{margin:0!important;padding:9px!important;border:1px solid var(--line)!important;border-radius:10px!important;background:color-mix(in srgb,var(--paper) 96%,var(--soft))!important}
.personalize-span-2{grid-column:1/-1!important}
.display-settings-panel legend{margin:0 0 6px!important;font-size:.72rem!important}
.settings-segments{gap:5px!important}
.settings-segments button,.personalize-palette-grid button{min-height:34px!important;padding:6px 7px!important;font-size:.72rem!important;border-radius:8px!important}
.personalize-palette-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}
.personalize-palette-grid button{justify-content:center!important}
.personalize-palette-grid button span:last-child{display:none!important}
.palette-dot{width:18px!important;height:18px!important}
.text-size-segments button small{font-size:.61rem!important}
.spacing-final-row{grid-column:auto!important}
.display-settings-status{margin:8px 2px 0!important;font-size:.73rem!important;min-height:0!important}
.imagery-mini-preview{display:none!important}

/* Daily scene is decorative. One coordinated scene is used everywhere for that day. */
.page-head{
  min-height:168px!important;
  padding:18px 20px!important;
  display:flex!important;
  align-items:center!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,var(--paper),var(--soft))!important;
  overflow:hidden!important;
}
.page-head::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  background-image:var(--horizon-scene-image)!important;
  background-size:cover!important;
  background-position:center!important;
  opacity:.82!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}
.page-head::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 96%,transparent) 0 38%,color-mix(in srgb,var(--bg) 78%,transparent) 55%,transparent 82%)!important;
}
.page-head-copy,.page-head>div{position:relative!important;z-index:2!important;max-width:650px!important}
.page-head h1{margin:4px 0 4px!important;color:var(--ink)!important}
.page-head p{color:var(--muted)!important}
.page-head .eyebrow{color:var(--brand2)!important}
.page-head-action{margin-top:10px!important;width:max-content!important}
.page-head-mascot{display:none!important}
html[data-imagery="full"] .page-head::before{opacity:.90!important}
html[data-imagery="subtle"] .page-head::before{opacity:.30!important}
html[data-imagery="off"] .page-head::before{display:none!important}
html[data-imagery="off"] .page-head::after{background:linear-gradient(135deg,var(--paper),var(--soft))!important}

/* Login: one compact hero, not a giant right-hand welcome panel. */
body:has(.signin-shell) .shell{max-width:1240px!important;padding-top:14px!important;padding-bottom:14px!important}
.signin-shell{
  position:relative!important;
  isolation:isolate!important;
  width:100%!important;
  min-height:500px!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 390px!important;
  align-items:center!important;
  overflow:hidden!important;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  background:var(--paper)!important;
  box-shadow:0 14px 34px rgba(7,29,52,.10)!important;
}
.signin-scene{
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  background-image:var(--horizon-scene-image)!important;
  background-size:cover!important;
  background-position:center!important;
}
.signin-shell::after{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  background:linear-gradient(90deg,rgba(5,23,42,.74) 0 38%,rgba(5,23,42,.34) 58%,rgba(5,23,42,.12) 68%,rgba(5,23,42,.08) 100%)!important;
  pointer-events:none!important;
}
.signin-intro{
  position:relative!important;
  z-index:2!important;
  align-self:center!important;
  max-width:520px!important;
  padding:28px 34px!important;
  color:#fff!important;
  text-shadow:0 2px 12px rgba(0,0,0,.28)!important;
}
.signin-intro h1{margin:0 0 8px!important;font-size:clamp(2.25rem,4.2vw,3.8rem)!important;line-height:1.01!important;letter-spacing:-.04em!important}
.signin-intro .hero-tagline{margin:0!important;color:#fff!important;font-size:1.05rem!important;font-weight:800!important}
.signin-intro .hero-tagline span{color:var(--family-plan)!important}
.signin-form-side{
  position:relative!important;
  z-index:3!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:22px!important;
  background:transparent!important;
}
.signin-form-side .login-card{
  width:100%!important;
  max-width:355px!important;
  padding:20px!important;
  border:1px solid color-mix(in srgb,var(--line) 88%,transparent)!important;
  border-radius:16px!important;
  background:color-mix(in srgb,var(--paper) 95%,transparent)!important;
  backdrop-filter:blur(12px)!important;
  box-shadow:0 14px 36px rgba(5,23,42,.18)!important;
}
.signin-form-side .login-card h2{font-size:1.65rem!important;margin:0 0 4px!important}
.signin-form-side .login-card>p{font-size:.94rem!important;line-height:1.42!important;margin:0!important}
.signin-form-side .stack{margin-top:12px!important;gap:10px!important}
.signin-form-side .recovery-link{margin-top:11px!important;font-size:.88rem!important}
.new-account-note{margin-top:7px!important;font-size:.82rem!important;line-height:1.35!important}
.secure-note{display:none!important}
html[data-imagery="subtle"] .signin-scene{opacity:.40!important}
html[data-imagery="subtle"] .signin-shell::after{background:linear-gradient(90deg,rgba(5,23,42,.84) 0 44%,rgba(5,23,42,.52) 60%,rgba(5,23,42,.28) 100%)!important}
html[data-imagery="off"] .signin-scene{display:none!important}
html[data-imagery="off"] .signin-shell{background:linear-gradient(135deg,var(--bg),var(--paper))!important}
html[data-imagery="off"] .signin-shell::after{background:linear-gradient(90deg,var(--brand) 0 48%,transparent 70%)!important;opacity:.94!important}

/* First-login / returning-login messages are small top toasts on every screen. */
.flash.welcome,.flash.welcome-new{
  position:fixed!important;
  z-index:160!important;
  top:calc(var(--family-header-height) + 10px)!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:min(390px,calc(100vw - 24px))!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:9px 13px!important;
  display:block!important;
  transform:translateX(-50%)!important;
  border-radius:11px!important;
  font-size:.86rem!important;
  font-weight:760!important;
  line-height:1.25!important;
  box-shadow:0 12px 28px rgba(6,25,45,.18)!important;
}
.flash.welcome{background:#edf6ff!important;color:#174a7b!important;border:1px solid #bdd9f3!important}
.flash.welcome-new{background:#edf9f3!important;color:#156646!important;border:1px solid #b8e4d0!important}

/* Quiet Travel-family footer; still provisional as the family shell evolves. */
.site-footer{min-height:65px!important;padding:11px clamp(16px,2.4vw,36px)!important}
.site-footer-brand img{width:28px!important;height:28px!important;flex-basis:28px!important}
.site-footer-brand strong{font-size:.78rem!important}.site-footer-brand small,.site-footer a{font-size:.68rem!important}

/* Never show nested scrollbar chrome in header/personalize/navigation. */
.site-header,.primary-nav,.header-actions,.display-settings,.profile-menu,.display-settings-panel{scrollbar-width:none!important}
.site-header::-webkit-scrollbar,.primary-nav::-webkit-scrollbar,.display-settings-panel::-webkit-scrollbar{display:none!important}

@media(max-width:900px){
  .site-header{grid-template-columns:minmax(150px,1fr) auto!important;gap:5px 10px!important;padding:6px 10px!important}
  .wordmark{grid-column:1!important;grid-row:1!important}.header-actions{grid-column:2!important;grid-row:1!important}
  .primary-nav{grid-column:1/-1!important;grid-row:2!important;width:100%!important;justify-content:space-around!important;gap:6px!important;border-top:1px solid var(--line)!important;padding-top:3px!important}
  .primary-nav a.nav-active::after{bottom:-5px!important}
  .signin-shell{grid-template-columns:minmax(0,1fr) 350px!important;min-height:470px!important}
  .signin-intro{padding:24px!important}.signin-form-side{padding:16px!important}
}

@media(max-width:700px){
  .site-header{position:sticky!important}
  .wordmark-mark{width:38px!important;height:38px!important;flex-basis:38px!important}.horizon-wordmark-top{font-size:.94rem!important}.horizon-wordmark-bottom{font-size:.72rem!important}
  .display-settings-trigger,.profile-menu-trigger{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
  .profile-initial{width:31px!important;height:31px!important}
  .primary-nav a{font-size:.78rem!important;gap:4px!important;padding-inline:4px!important}
  .primary-nav .horizon-icon{width:16px!important;height:16px!important}
  .display-settings-panel{position:absolute!important;right:0!important;left:auto!important;top:calc(100% + 8px)!important;width:min(500px,calc(100vw - 16px))!important;padding:12px!important}
  .personalize-compact-grid{grid-template-columns:1fr!important;gap:7px!important}.personalize-span-2,.spacing-final-row{grid-column:auto!important}.personalize-compact-grid fieldset{padding:8px!important}
  .settings-segments.four{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .signin-shell{display:block!important;min-height:0!important;background:var(--paper)!important}
  .signin-scene{height:225px!important;position:relative!important;background-position:center!important}
  .signin-shell::after{height:225px!important;bottom:auto!important;background:linear-gradient(90deg,rgba(5,23,42,.72),rgba(5,23,42,.08))!important}
  .signin-intro{position:absolute!important;top:0!important;left:0!important;height:225px!important;width:70%!important;padding:18px!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
  .signin-intro h1{font-size:2rem!important}.signin-intro .hero-tagline{font-size:.9rem!important}
  .signin-form-side{padding:14px!important}.signin-form-side .login-card{max-width:none!important;box-shadow:none!important;background:var(--paper)!important;border:0!important;padding:8px 4px 4px!important;backdrop-filter:none!important}
  .page-head{min-height:150px!important;padding:14px!important}.page-head-copy,.page-head>div{max-width:75%!important}.page-head h1{font-size:clamp(1.8rem,8vw,2.4rem)!important}.page-head-action{margin-top:8px!important}
  .site-footer{align-items:flex-start!important;gap:8px!important}
  .flash.welcome,.flash.welcome-new{top:calc(var(--family-header-height) + 52px)!important}
}

@media(max-width:430px){
  .horizon-wordmark-top{font-size:.87rem!important}.horizon-wordmark-bottom{font-size:.66rem!important}
  .primary-nav a{font-size:.73rem!important}
  .page-head-copy,.page-head>div{max-width:82%!important}
}
/* Keep the mascot side of the daily scene visible as widths change; the artwork is decorative, never required content. */
.page-head::before,.signin-scene{background-position:center right!important}
@media(min-width:701px){
  .signin-shell{min-height:450px!important}
}

/* ===== Combo 3 targeted fixes v18 ===== */
/* Make the coordinated scene visibly present. The chosen scene is supplied server-side
   as --horizon-scene-image for light/dark mode, so imagery no longer depends on JS timing. */
html[data-imagery="full"] .page-head::before{opacity:.92!important}
html[data-imagery="subtle"] .page-head::before{opacity:.48!important}
html[data-imagery="full"] .signin-scene{opacity:1!important}
html[data-imagery="subtle"] .signin-scene{opacity:.62!important}

/* Use the exact header wordmark styling in the footer too. */
.site-footer-brand{display:grid!important;gap:3px!important;align-items:start!important}
.site-footer-brand-lockup{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important}
.site-footer-brand-lockup .footer-wordmark-mark{width:32px!important;height:32px!important;flex:0 0 32px!important;border-radius:8px!important}
.site-footer-brand-lockup .footer-wordmark-text{padding-right:8px!important;overflow:visible!important}
.site-footer-brand-lockup .horizon-wordmark-top{font-size:.92rem!important}
.site-footer-brand-lockup .horizon-wordmark-bottom{font-size:.70rem!important;margin-top:3px!important;padding-left:12px!important}
.site-footer-tagline{display:block!important;color:var(--muted)!important;font-size:.70rem!important;line-height:1.25!important;margin-left:40px!important}
.site-footer-tagline em{color:var(--family-plan)!important;font-style:normal!important;font-weight:900!important}

/* Keep the full HORIZON word visible at every breakpoint. */
.wordmark,.horizon-wordmark,.horizon-wordmark-top{min-width:max-content!important;overflow:visible!important;text-overflow:clip!important}

@media(max-width:700px){
  .site-footer-tagline{margin-left:0!important}
  .site-footer-brand-lockup .footer-wordmark-mark{width:30px!important;height:30px!important;flex-basis:30px!important}
}

/* ===== Horizon Drive GUI consolidation v19 =====
   Final correction pass before functional search work.
   Prior accidental Travel Planner/card comments are intentionally NOT applied. */
:root{
  --family-header-height:65px;
}

/* Desktop/laptop header: keep the compact single-row height that matched the sibling shell. */
@media (min-width:701px){
  .site-header,
  html[data-text-size="larger"] .site-header,
  html[data-text-size="extra_large"] .site-header{
    box-sizing:border-box!important;
    width:100%!important;
    height:var(--family-header-height)!important;
    min-height:var(--family-header-height)!important;
    grid-template-columns:minmax(190px,1fr) auto minmax(92px,1fr)!important;
    grid-template-rows:1fr!important;
    gap:16px!important;
    padding:5px clamp(16px,2.4vw,36px)!important;
  }
  .wordmark,
  html[data-text-size="larger"] .wordmark,
  html[data-text-size="extra_large"] .wordmark{grid-column:1!important;grid-row:1!important}
  .primary-nav,
  html[data-text-size="larger"] .primary-nav,
  html[data-text-size="extra_large"] .primary-nav{
    grid-column:2!important;grid-row:1!important;
    width:auto!important;
    display:flex!important;
    justify-content:center!important;
    gap:18px!important;
    overflow:visible!important;
    border:0!important;
    padding:0!important;
    font-size:clamp(.84rem,calc(var(--body-size) * .88),1rem)!important;
  }
  .primary-nav a{min-height:40px!important;padding:4px 6px!important}
  .primary-nav a.nav-active::after{bottom:-7px!important}
  .header-actions,
  html[data-text-size="larger"] .header-actions,
  html[data-text-size="extra_large"] .header-actions{grid-column:3!important;grid-row:1!important}
  .wordmark-mark{width:40px!important;height:40px!important;flex-basis:40px!important}
  .display-settings-trigger,.profile-menu-trigger{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
  .profile-initial{width:32px!important;height:32px!important}
}

/* Only genuinely narrow screens use a second nav row. No nested horizontal scrolling. */
@media (max-width:700px){
  .site-header{
    height:auto!important;min-height:0!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    gap:4px 8px!important;
    padding:5px 8px 3px!important;
  }
  .wordmark{grid-column:1!important;grid-row:1!important}
  .header-actions{grid-column:2!important;grid-row:1!important}
  .primary-nav{
    grid-column:1/-1!important;grid-row:2!important;
    width:100%!important;display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:2px!important;padding:2px 0 0!important;
    border-top:1px solid var(--line)!important;
    overflow:visible!important;
  }
  .primary-nav a{min-height:36px!important;padding:2px 3px!important}
  .primary-nav a.nav-active::after{bottom:-3px!important}
}

/* Wordmark stays fully visible; no clipped final N. */
.wordmark,.horizon-wordmark,.horizon-wordmark-top,.horizon-wordmark-bottom{overflow:visible!important;text-overflow:clip!important}
.horizon-wordmark{min-width:max-content!important;padding-right:8px!important}

/* Daily scenic banners: useful height, never enlarged just to fill the screen. */
.page-head{
  min-height:136px!important;
  padding:15px 18px!important;
  align-items:center!important;
}
.page-head::before{background-image:var(--horizon-scene-image)!important;background-position:center right!important}
.page-head::after{background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 97%,transparent) 0 40%,color-mix(in srgb,var(--bg) 78%,transparent) 57%,transparent 84%)!important}
.page-head-copy,.page-head>div{max-width:620px!important}
.page-head-action{margin-top:8px!important}

/* Login: compact scenic panel. The daily mascot/scene stays visible and the form is not a giant welcome panel. */
body:has(.signin-shell) .shell{max-width:1200px!important;padding-top:10px!important;padding-bottom:10px!important}
.signin-shell{
  height:clamp(390px,calc(100vh - 150px),480px)!important;
  min-height:390px!important;
  grid-template-columns:390px minmax(0,1fr)!important;
  margin:0 auto!important;
}
.signin-scene{background-image:var(--horizon-scene-image)!important;background-position:center right!important}
.signin-shell::after{
  background:linear-gradient(90deg,rgba(5,23,42,.22) 0 31%,rgba(5,23,42,.05) 48%,rgba(5,23,42,.02) 100%)!important;
}
.signin-form-side{
  grid-column:1!important;
  padding:18px!important;
  justify-content:flex-start!important;
}
.signin-form-side .login-card{
  max-width:350px!important;
  padding:18px!important;
  background:color-mix(in srgb,var(--paper) 96%,transparent)!important;
}
.signin-form-side .login-card h2{font-size:1.55rem!important}
.signin-scene-caption{
  position:absolute!important;z-index:3!important;right:22px!important;top:18px!important;
  max-width:360px!important;padding:7px 10px!important;border-radius:10px!important;
  color:#fff!important;background:rgba(5,23,42,.50)!important;backdrop-filter:blur(6px)!important;
  font-size:.9rem!important;font-weight:780!important;line-height:1.25!important;text-shadow:0 1px 6px rgba(0,0,0,.30)!important;
}
.signin-scene-caption span{color:var(--family-plan)!important;font-weight:900!important}
html[data-theme="light"] .signin-form-side .login-card{box-shadow:0 12px 30px rgba(7,29,52,.14)!important}
html[data-theme="dark"] .signin-form-side .login-card{box-shadow:0 12px 30px rgba(0,0,0,.22)!important}
html[data-imagery="subtle"] .signin-scene{opacity:.58!important}
html[data-imagery="off"] .signin-scene-caption{display:none!important}

@media (max-width:700px){
  .signin-shell{display:block!important;height:auto!important;min-height:0!important}
  .signin-scene{position:relative!important;height:210px!important;background-position:center right!important}
  .signin-shell::after{height:210px!important;bottom:auto!important}
  .signin-scene-caption{top:12px!important;right:12px!important;max-width:70%!important;font-size:.8rem!important}
  .signin-form-side{padding:12px!important}
  .signin-form-side .login-card{max-width:none!important;padding:8px 4px 4px!important;box-shadow:none!important;background:var(--paper)!important}
}

/* Personalize is compact, but its own text responds immediately to the chosen app text size. */
.display-settings-panel{font-size:var(--body-size)!important;width:min(520px,calc(100vw - 24px))!important}
.display-settings-heading h2{font-size:calc(var(--body-size) * 1.12)!important}
.display-settings-panel legend{font-size:calc(var(--body-size) * .76)!important}
.settings-segments button,.personalize-palette-grid button{font-size:calc(var(--body-size) * .82)!important;line-height:1.12!important}
.text-size-choice small{font-size:calc(var(--body-size) * .65)!important}
.display-settings-status{font-size:calc(var(--body-size) * .74)!important}
html[data-text-size="larger"] .display-settings-panel{width:min(570px,calc(100vw - 24px))!important}
html[data-text-size="extra_large"] .display-settings-panel{width:min(620px,calc(100vw - 24px))!important}
html[data-text-size="larger"] .settings-segments button,
html[data-text-size="larger"] .personalize-palette-grid button{min-height:38px!important}
html[data-text-size="extra_large"] .settings-segments button,
html[data-text-size="extra_large"] .personalize-palette-grid button{min-height:42px!important}
html[data-text-size="extra_large"] .personalize-compact-grid{gap:9px!important}

/* Footer branding: tagline starts under the car/left edge of the brand block. */
.site-footer-tagline{margin-left:0!important;padding-left:0!important}

/* The only normal scrollbar is the page itself. */
.site-header,.primary-nav,.header-actions,.display-settings,.profile-menu,.display-settings-panel{overflow-x:visible!important;scrollbar-width:none!important}
.site-header::-webkit-scrollbar,.primary-nav::-webkit-scrollbar,.display-settings-panel::-webkit-scrollbar{display:none!important}

/* ========================================================================
   Horizon Drive v21 final overrides
   - Direct image elements are the source of truth for decorative scenery.
   - Spacing preference removed: one professionally balanced spacing system.
   - Personalize scales with the app text-size setting.
   ======================================================================== */

/* One balanced spacing system. Do not expose a separate density/spacing mode. */
:root{
  --family-card-pad:18px;
  --family-gap:14px;
  --family-section-gap:14px;
}
.card{padding:var(--family-card-pad)!important}
.search-list,.car-grid{gap:var(--family-gap)!important}
.settings-section{margin-bottom:var(--family-section-gap)!important}

/* Kill every older pseudo/background-image implementation so it cannot hide
   or compete with the real <img> element. */
.page-head::after{content:none!important;display:none!important}
.page-head::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  opacity:1!important;
  transform:none!important;
  border:0!important;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--bg) 98%,transparent) 0%,
    color-mix(in srgb,var(--bg) 94%,transparent) 35%,
    color-mix(in srgb,var(--bg) 72%,transparent) 55%,
    color-mix(in srgb,var(--bg) 18%,transparent) 82%,
    transparent 100%)!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  pointer-events:none!important;
}
.page-head{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  min-height:118px!important;
  padding:17px 20px!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,var(--paper),var(--soft))!important;
  color:var(--ink)!important;
}
.page-head-scene{
  position:absolute!important;
  z-index:0!important;
  top:0!important;
  right:0!important;
  width:60%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center!important;
  opacity:1!important;
  pointer-events:none!important;
}
.page-head-copy,.page-head>div,.page-head>.button{
  position:relative!important;
  z-index:2!important;
}
.page-head>div{max-width:640px!important}
.page-head h1{color:var(--ink)!important}
.page-head p{color:var(--muted)!important}
.page-head .eyebrow{color:var(--brand2)!important}

html[data-theme="dark"] .page-head::before{
  background:linear-gradient(90deg,
    rgba(5,20,37,.99) 0%,
    rgba(5,20,37,.95) 36%,
    rgba(5,20,37,.72) 56%,
    rgba(5,20,37,.18) 84%,
    transparent 100%)!important;
}
html[data-theme="light"] .page-head::before{
  background:linear-gradient(90deg,
    rgba(246,250,255,.99) 0%,
    rgba(246,250,255,.95) 36%,
    rgba(246,250,255,.72) 56%,
    rgba(246,250,255,.18) 84%,
    transparent 100%)!important;
}
html[data-imagery="full"] .page-head-scene{display:block!important;opacity:1!important}
html[data-imagery="subtle"] .page-head-scene{display:block!important;opacity:.34!important}
html[data-imagery="off"] .page-head-scene{display:none!important}
html[data-imagery="off"] .page-head::before{display:none!important}

/* Direct-image sign-in. This replaces all legacy CSS-background scene logic. */
body:has(.signin-shell) .shell{
  width:min(100%,1160px)!important;
  padding-top:12px!important;
  padding-bottom:12px!important;
}
.signin-shell{
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  margin:6px auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr)!important;
  overflow:hidden!important;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  background:var(--paper)!important;
  box-shadow:none!important;
}
.signin-shell::before,.signin-shell::after{content:none!important;display:none!important}
.signin-visual{
  position:relative!important;
  min-height:390px!important;
  overflow:hidden!important;
  background:linear-gradient(135deg,var(--soft),var(--paper))!important;
}
.signin-scene-img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center!important;
  opacity:1!important;
}
.signin-visual-shade{
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  background:linear-gradient(110deg,rgba(5,23,42,.72) 0%,rgba(5,23,42,.42) 48%,rgba(5,23,42,.08) 100%)!important;
  pointer-events:none!important;
}
.signin-scene-caption{
  position:absolute!important;
  z-index:2!important;
  left:20px!important;
  bottom:18px!important;
  max-width:360px!important;
  margin:0!important;
  color:#fff!important;
  font-size:var(--body-size)!important;
  line-height:1.35!important;
  font-weight:760!important;
  text-shadow:0 2px 14px rgba(0,0,0,.38)!important;
}
.signin-scene-caption span{color:var(--family-plan)!important;font-weight:900!important}
.signin-form-side{
  position:relative!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  padding:24px!important;
  background:var(--paper)!important;
}
.signin-form-side .login-card{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
html[data-imagery="full"] .signin-scene-img{display:block!important;opacity:1!important}
html[data-imagery="subtle"] .signin-scene-img{display:block!important;opacity:.36!important}
html[data-imagery="subtle"] .signin-visual-shade{background:linear-gradient(110deg,rgba(5,23,42,.84),rgba(5,23,42,.56))!important}
html[data-imagery="off"] .signin-scene-img{display:none!important}
html[data-imagery="off"] .signin-visual-shade{display:none!important}
html[data-imagery="off"] .signin-scene-caption{color:var(--ink)!important;text-shadow:none!important}
html[data-theme="dark"][data-imagery="off"] .signin-visual{background:linear-gradient(145deg,#081726,#10283b)!important}
html[data-theme="light"][data-imagery="off"] .signin-visual{background:linear-gradient(145deg,#dcecff,#f5faff)!important}

/* The image in the empty state is also real and follows Full/Subtle/Off. */
.empty-state-photo[data-daily-scene-img]{object-fit:cover!important;object-position:center!important}
html[data-imagery="subtle"] .empty-state-photo[data-daily-scene-img]{opacity:.36!important}
html[data-imagery="off"] .empty-state-photo[data-daily-scene-img]{display:none!important}

/* Personalize must scale with the selected app text size. */
.display-settings-panel{
  font-size:var(--body-size)!important;
  width:min(590px,calc(100vw - 20px))!important;
}
.display-settings-heading span{font-size:var(--small-size)!important;line-height:1.1!important}
.display-settings-heading h2{font-size:calc(var(--section-title-size) * .82)!important;line-height:1.05!important}
.display-settings-panel legend{font-size:var(--label-size)!important;line-height:1.2!important}
.settings-segments button,.personalize-palette-grid button{font-size:var(--control-size)!important;line-height:1.15!important}
.text-size-choice small{font-size:var(--small-size)!important}
.display-settings-status{font-size:var(--small-size)!important;line-height:1.3!important}
.profile-menu-identity strong,.profile-menu-panel a{font-size:var(--control-size)!important}
.profile-menu-identity small{font-size:var(--small-size)!important}

/* Keep the panel compact after removing Spacing. */
.personalize-compact-grid{gap:8px 10px!important;margin-top:9px!important}
.display-settings-panel{padding:13px!important}
.display-settings-heading{padding-bottom:7px!important}
.display-settings-status{margin-top:8px!important}

@media(max-width:760px){
  .signin-shell{grid-template-columns:1fr!important}
  .signin-visual{min-height:220px!important}
  .signin-form-side{padding:18px!important}
  .page-head{min-height:108px!important;padding:14px!important}
  .page-head-scene{width:70%!important}
  .page-head>div{max-width:76%!important}
}

@media(max-width:560px){
  .page-head-scene{width:78%!important}
  .page-head>div{max-width:82%!important}
  .settings-segments.four{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .personalize-palette-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .display-settings-panel{width:min(94vw,590px)!important}
}

/* ===== Horizon Drive v21: full-bleed daily theme imagery ===== */
.page-head{
  min-height:132px!important;
  padding:20px 24px!important;
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:#0b1d34!important;
}
.page-head::before{display:none!important}
.page-head::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  background:linear-gradient(90deg,rgba(5,20,37,.94) 0%,rgba(5,20,37,.82) 36%,rgba(5,20,37,.50) 62%,rgba(5,20,37,.16) 100%)!important;
  pointer-events:none!important;
}
.page-head-scene{
  position:absolute!important;
  inset:0!important;
  z-index:-2!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
  transition:opacity .2s ease!important;
}
.page-head-copy{position:relative!important;z-index:2!important;max-width:min(760px,72%)!important}
.page-head-action{margin-top:12px!important}
html[data-imagery="full"] .page-head-scene{opacity:1!important}
html[data-imagery="subtle"] .page-head-scene{opacity:.36!important}
html[data-imagery="off"] .page-head-scene{display:none!important}
html[data-imagery="subtle"] .page-head::after{background:linear-gradient(90deg,rgba(5,20,37,.96),rgba(5,20,37,.86))!important}
html[data-imagery="off"] .page-head::after{background:linear-gradient(115deg,#0b1d34,#16324f)!important}

/* Empty-state imagery follows the same user preference. */
html[data-imagery="subtle"] .empty-state-photo{opacity:.32!important}
html[data-imagery="off"] .empty-state-photo{display:none!important}

/* Compact sign-in: scenic strip first, form below. */
.signin-shell{
  width:min(100%,1060px)!important;
  min-height:0!important;
  margin:18px auto 10px!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  overflow:hidden!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  background:var(--paper)!important;
  box-shadow:var(--shadow)!important;
}
.signin-visual,
.signin-hero-compact{
  min-height:250px!important;
  height:250px!important;
  position:relative!important;
  overflow:hidden!important;
  background:#0b1d34!important;
}
.signin-visual>img,
.signin-scene-img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}
.signin-visual-overlay{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:linear-gradient(90deg,rgba(5,20,37,.90) 0%,rgba(5,20,37,.70) 40%,rgba(5,20,37,.24) 70%,rgba(5,20,37,.05) 100%)!important;
}
.signin-brand-copy{
  position:relative!important;
  z-index:2!important;
  width:min(620px,72%)!important;
  padding:34px 38px!important;
  color:#fff!important;
}
.signin-brand-copy .eyebrow{color:#71c7ff!important}
.signin-brand-copy h1{
  margin:4px 0 8px!important;
  color:#fff!important;
  font-size:clamp(2rem,4vw,3.4rem)!important;
  line-height:1!important;
}
.hero-tagline{color:#fff!important;font-size:1.02rem!important;margin:0!important}
.hero-tagline span{color:var(--family-plan)!important;font-weight:900!important}
.signin-form-side,
.signin-form-compact{
  display:grid!important;
  place-items:center!important;
  padding:24px 26px 26px!important;
  background:var(--paper)!important;
}
.signin-form-side .login-card{width:min(100%,560px)!important;padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important}
.signin-form-side .login-card h2{font-size:1.65rem!important;margin-bottom:4px!important}
.signin-form-side .stack{margin-top:14px!important;gap:11px!important}
.signin-links-row{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:18px!important;flex-wrap:wrap!important;margin-top:12px!important}
.signin-links-row .recovery-link{margin:0!important}
.signin-links-row .new-account-note{margin:0!important;max-width:26rem!important;color:var(--muted)!important;font-size:.86rem!important;line-height:1.4!important}
html[data-imagery="full"] .signin-scene-img{opacity:1!important}
html[data-imagery="subtle"] .signin-scene-img{opacity:.34!important}
html[data-imagery="off"] .signin-scene-img{display:none!important}
html[data-imagery="subtle"] .signin-visual-overlay{background:linear-gradient(90deg,rgba(5,20,37,.96),rgba(5,20,37,.82))!important}
html[data-imagery="off"] .signin-visual-overlay{background:linear-gradient(115deg,#0b1d34,#16324f)!important}

/* Personalize remains compact and inherits the app text-size preference. */
.display-settings-panel{font-size:1rem!important}
.display-settings-heading h2{font-size:1.6em!important}
.display-settings-panel legend{font-size:.95em!important}
.settings-segments button,.personalize-palette-grid button{font-size:.86em!important}
.display-settings-status{font-size:.78em!important}

@media(max-width:900px){
  .page-head{min-height:118px!important;padding:18px 20px!important}
  .page-head-copy{max-width:78%!important}
  .signin-shell{max-width:760px!important}
  .signin-visual,.signin-hero-compact{height:220px!important;min-height:220px!important}
  .signin-brand-copy{padding:28px 28px!important;width:min(660px,80%)!important}
}
@media(max-width:620px){
  .page-head{min-height:108px!important;padding:16px!important}
  .page-head-copy{max-width:86%!important}
  .page-head::after{background:linear-gradient(90deg,rgba(5,20,37,.94),rgba(5,20,37,.64),rgba(5,20,37,.26))!important}
  .signin-visual,.signin-hero-compact{height:195px!important;min-height:195px!important}
  .signin-brand-copy{padding:22px 20px!important;width:86%!important}
  .signin-brand-copy h1{font-size:2rem!important}
  .signin-form-side,.signin-form-compact{padding:20px 18px 22px!important}
  .signin-links-row{display:grid!important;gap:8px!important}
}



/* ===== Horizon Drive v23 — seamless scenic polish ===== */
:root{
  --drive-glass:color-mix(in srgb,var(--paper) 90%,transparent);
  --drive-glass-strong:color-mix(in srgb,var(--paper) 96%,transparent);
  --drive-scene-height:680px;
}
body{
  position:relative!important;
  isolation:isolate!important;
  min-height:100vh!important;
  background:var(--bg)!important;
}
body::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0 0 auto 0;
  height:var(--drive-scene-height);
  background-image:var(--page-scene);
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
  pointer-events:none;
  opacity:1;
}
body::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 0 auto 0;
  height:calc(var(--drive-scene-height) + 260px);
  background:linear-gradient(180deg,rgba(5,17,31,.24) 0%,rgba(5,17,31,.46) 26%,rgba(6,21,38,.82) 56%,var(--bg) 88%,var(--bg) 100%);
  pointer-events:none;
}
html[data-theme="light"] body::after{background:linear-gradient(180deg,rgba(244,249,255,.08) 0%,rgba(235,245,253,.28) 28%,rgba(239,246,251,.82) 62%,var(--bg) 92%,var(--bg) 100%)}
html[data-imagery="subtle"] body::before{opacity:.28!important;filter:saturate(.8)!important}
html[data-imagery="off"] body::before{display:none!important}
html[data-imagery="off"] body::after{background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 14%,var(--bg)),var(--bg) 52%)!important}
.site-header,.shell,.site-footer{position:relative!important;z-index:1!important}

/* Let the scene read as one continuous page, rather than a separate photo banner. */
.page-head{
  min-height:164px!important;
  padding:18px 24px!important;
  margin-bottom:18px!important;
  border-radius:18px!important;
  border:1px solid color-mix(in srgb,#8abdf0 32%,var(--line))!important;
  background:linear-gradient(90deg,rgba(5,20,37,.82) 0%,rgba(5,20,37,.68) 42%,rgba(5,20,37,.22) 78%,rgba(5,20,37,.10) 100%)!important;
  box-shadow:0 16px 38px rgba(2,11,22,.12)!important;
  backdrop-filter:blur(3px)!important;
  -webkit-backdrop-filter:blur(3px)!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
.page-head::before{display:none!important}
.page-head::after{display:none!important}
.page-head-scene{display:none!important}
.page-head-copy,.page-head>div:not(.page-head-mascot){position:relative!important;z-index:2!important;max-width:min(690px,64%)!important}
.page-head h1{font-size:clamp(2rem,3vw,2.75rem)!important;margin:.05em 0 .12em!important}
.page-head p{max-width:650px!important;line-height:1.35!important}
.page-head-action{margin-top:12px!important}

.page-head-mascot{
  position:absolute!important;
  z-index:1!important;
  right:clamp(6px,2.2vw,24px)!important;
  bottom:-10px!important;
  width:clamp(180px,21vw,305px)!important;
  height:calc(100% + 6px)!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:flex-end!important;
  pointer-events:none!important;
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.24))!important;
  animation:driveMascotArrive .48s cubic-bezier(.2,.8,.2,1) both;
}
.page-head-mascot .hero-mascot-img{display:block!important;max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important;object-fit:contain!important}
.page-head-mascot.pose-front{width:clamp(175px,19vw,275px)!important}
.page-head-mascot.pose-curious{width:clamp(175px,20vw,290px)!important}
.results-head .page-head-mascot{width:clamp(145px,16vw,220px)!important}
.results-head .page-head-copy{max-width:min(620px,58%)!important}

@keyframes driveMascotArrive{from{opacity:0;transform:translate3d(16px,5px,0) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.page-head-mascot{animation:none!important}.shell{transition:none!important}.swipe-hint{transition:none!important}}

/* Glassy content blocks keep the page scenic without sacrificing readability. */
.card,.tip,.results-disclaimer{
  background:var(--drive-glass)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
html[data-theme="dark"] .card,html[data-theme="dark"] .tip,html[data-theme="dark"] .results-disclaimer{background:rgba(12,34,58,.88)!important}

/* Dashboard: main work stays left; quiet tools use the previously empty right side. */
.dashboard-main-grid{display:grid!important;grid-template-columns:minmax(0,1.55fr) minmax(300px,.72fr)!important;gap:18px!important;align-items:start!important}
.dashboard-search-column{min-width:0!important}
.dashboard-search-column .search-list{grid-template-columns:1fr!important}
.dashboard-side-rail{display:grid!important;gap:16px!important;min-width:0!important}
.quick-tools-card,.saved-preview-card{padding:18px!important}
.compact-card-heading{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;margin-bottom:14px!important}
.compact-card-heading h2{margin:2px 0 0!important;font-size:1.18rem!important}
.compact-card-heading .eyebrow{font-size:.68rem!important;letter-spacing:.08em!important}
.compact-card-heading>a{font-size:.8rem!important;font-weight:800!important}
.quick-tool-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important}
.quick-tool-grid>a{min-width:0!important;min-height:88px!important;padding:12px!important;display:flex!important;align-items:flex-start!important;gap:10px!important;border:1px solid var(--line)!important;border-radius:13px!important;text-decoration:none!important;color:var(--ink)!important;background:color-mix(in srgb,var(--soft) 72%,transparent)!important;transition:transform .15s ease,background .15s ease,border-color .15s ease!important}
.quick-tool-grid>a:hover{transform:translateY(-1px)!important;border-color:color-mix(in srgb,var(--brand2) 55%,var(--line))!important;background:color-mix(in srgb,var(--brand2) 10%,var(--paper))!important}
.quick-tool-grid .horizon-icon{width:22px!important;height:22px!important;flex:0 0 22px!important;color:var(--brand2)!important}
.quick-tool-grid span{display:grid!important;gap:3px!important;min-width:0!important}
.quick-tool-grid strong{font-size:.87rem!important;line-height:1.15!important}.quick-tool-grid small{font-size:.72rem!important;color:var(--muted)!important;line-height:1.3!important}
.saved-preview-list{display:grid!important}
.saved-preview-list>a{display:grid!important;grid-template-columns:1fr auto!important;gap:12px!important;padding:10px 0!important;border-top:1px solid var(--line)!important;text-decoration:none!important;color:var(--ink)!important;font-size:.83rem!important}
.saved-preview-list>a:first-child{border-top:0!important}.saved-preview-list strong{color:var(--brand2)!important;white-space:nowrap!important}
.notification-summary{margin-top:18px!important}

/* Tools page. */
.tools-page-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}
.calculator-card,.resource-card{padding:20px!important}
.resource-card{grid-column:1/-1!important}
.tool-card-title{display:flex!important;align-items:flex-start!important;gap:12px!important;margin-bottom:18px!important}.tool-card-title>.horizon-icon{width:28px!important;height:28px!important;color:var(--brand2)!important;flex:0 0 28px!important}.tool-card-title h2{margin:0 0 4px!important}.tool-card-title p{margin:0!important;color:var(--muted)!important;font-size:.86rem!important}
.calculator-form{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}.calculator-form label{min-width:0!important}.calculator-form input,.calculator-form select{width:100%!important}
.input-suffix{display:flex!important;align-items:center!important;border:1px solid var(--line)!important;border-radius:10px!important;overflow:hidden!important;background:var(--paper)!important}.input-suffix input{border:0!important;border-radius:0!important;min-width:0!important}.input-suffix>span{padding:0 12px!important;color:var(--muted)!important;font-weight:800!important}
.calculator-result{margin-top:16px!important;padding:16px!important;display:grid!important;gap:2px!important;border-radius:14px!important;background:color-mix(in srgb,var(--brand2) 12%,var(--paper))!important;border:1px solid color-mix(in srgb,var(--brand2) 35%,var(--line))!important}.calculator-result>span{font-size:.75rem!important;text-transform:uppercase!important;letter-spacing:.08em!important;font-weight:800!important;color:var(--brand2)!important}.calculator-result strong{font-size:1.7rem!important}.calculator-result small{color:var(--muted)!important}
.resource-links{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}.resource-links>a{display:flex!important;align-items:flex-start!important;gap:10px!important;padding:13px!important;min-height:82px!important;border:1px solid var(--line)!important;border-radius:13px!important;text-decoration:none!important;color:var(--ink)!important;background:color-mix(in srgb,var(--soft) 70%,transparent)!important}.resource-links .horizon-icon{width:22px!important;height:22px!important;flex:0 0 22px!important;color:var(--brand2)!important}.resource-links span{display:grid!important;gap:3px!important}.resource-links strong{font-size:.84rem!important}.resource-links small{font-size:.72rem!important;color:var(--muted)!important;line-height:1.25!important}.tools-disclaimer{margin:12px 2px 0!important;color:var(--muted)!important;font-size:.75rem!important}

/* Sign-in keeps the scene but adds the separate full mascot layer. */
.signin-visual{isolation:isolate!important}.signin-scene-img{z-index:0!important}.signin-mascot{position:absolute!important;z-index:2!important;right:14px!important;bottom:-10px!important;width:min(31%,280px)!important;height:94%!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;pointer-events:none!important;filter:drop-shadow(0 16px 22px rgba(0,0,0,.24))!important}.signin-mascot .hero-mascot-img{max-height:100%!important;max-width:100%!important;width:auto!important;height:auto!important}.signin-visual-overlay{z-index:1!important}.signin-brand-copy{z-index:3!important;width:min(620px,63%)!important}
html[data-imagery="off"] .page-head-mascot,html[data-imagery="off"] .signin-mascot{display:none!important}

/* Mobile personalize panel becomes a safe contained sheet. */
@media(max-width:620px){
  .display-settings-panel{position:fixed!important;inset:auto 10px 10px 10px!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 20px)!important;overflow:auto!important;border-radius:18px!important;padding:14px!important;overscroll-behavior:contain!important;box-shadow:0 22px 48px rgba(0,0,0,.38)!important}
  .display-settings-heading{position:sticky!important;top:-14px!important;z-index:4!important;margin:-14px -14px 0!important;padding:14px!important;background:var(--paper)!important;border-bottom:1px solid var(--line)!important}
}

/* Responsive composition. */
@media(max-width:980px){
  :root{--drive-scene-height:610px}
  .dashboard-main-grid{grid-template-columns:1fr!important}.dashboard-side-rail{grid-template-columns:1fr 1fr!important}.page-head{min-height:154px!important}.page-head-copy,.page-head>div:not(.page-head-mascot){max-width:68%!important}.page-head-mascot{width:clamp(170px,27vw,260px)!important}.tools-page-grid{grid-template-columns:1fr!important}.resource-card{grid-column:auto!important}.resource-links{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:700px){
  :root{--drive-scene-height:560px}
  body::before{background-position:64% top!important}
  .page-head{min-height:158px!important;padding:15px!important;border-radius:15px!important}.page-head h1{font-size:clamp(1.9rem,8vw,2.45rem)!important}.page-head-copy,.page-head>div:not(.page-head-mascot){max-width:68%!important}.page-head-mascot{right:-4px!important;bottom:-6px!important;width:min(39vw,170px)!important;height:93%!important}.page-head-mascot.pose-front{width:min(38vw,160px)!important}.results-head .page-head-mascot{width:min(31vw,130px)!important}.dashboard-side-rail{grid-template-columns:1fr!important}.quick-tool-grid{grid-template-columns:1fr 1fr!important}.calculator-form{grid-template-columns:1fr!important}.resource-links{grid-template-columns:1fr 1fr!important}.signin-mascot{width:min(42vw,178px)!important;right:-4px!important}.signin-brand-copy{width:66%!important}
}
@media(max-width:430px){
  .page-head-copy,.page-head>div:not(.page-head-mascot){max-width:67%!important}.page-head-mascot{width:min(40vw,150px)!important}.quick-tool-grid{grid-template-columns:1fr!important}.resource-links{grid-template-columns:1fr!important}.signin-brand-copy{width:64%!important}.signin-mascot{width:min(43vw,160px)!important}
}

/* Mobile footer centered as one deliberate block. */
@media(max-width:900px){
  .site-footer{align-items:center!important;justify-content:center!important;flex-direction:column!important;text-align:center!important;gap:10px!important}.site-footer-brand{width:100%!important;display:grid!important;justify-items:center!important;text-align:center!important}.site-footer-brand-lockup{justify-content:center!important}.site-footer-tagline{text-align:center!important}.site-footer nav{width:100%!important;justify-content:center!important;text-align:center!important}
}

/* Page swipe micro-transition + one-time discoverability hint. */
.shell{transition:transform .13s ease,opacity .13s ease!important}.shell.swipe-leave-left{transform:translateX(-18px)!important;opacity:.28!important}.shell.swipe-leave-right{transform:translateX(18px)!important;opacity:.28!important}
.swipe-hint{position:fixed!important;z-index:220!important;left:50%!important;bottom:18px!important;transform:translate(-50%,12px)!important;max-width:calc(100vw - 28px)!important;padding:9px 12px!important;border:1px solid color-mix(in srgb,var(--brand2) 40%,var(--line))!important;border-radius:999px!important;background:rgba(7,24,43,.94)!important;color:#fff!important;font-size:.75rem!important;font-weight:700!important;text-align:center!important;box-shadow:0 12px 28px rgba(0,0,0,.28)!important;opacity:0!important;transition:opacity .22s ease,transform .22s ease!important;pointer-events:none!important}.swipe-hint.show{opacity:1!important;transform:translate(-50%,0)!important}

/* Small finishing details. */
.calculator-form .input-prefix{display:block!important}
.notification-summary-icon{display:inline-flex!important;color:var(--brand2)!important;margin-right:5px!important}.notification-summary-icon .horizon-icon{width:20px!important;height:20px!important}


/* ===== V25 hero corrections ===== */
.page-head{
  position:relative!important;
  isolation:isolate!important;
  min-height:136px!important;
  padding:18px 20px!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:rgba(7,22,39,.28)!important;
  border:1px solid rgba(107,161,225,.22)!important;
}
.page-head::before{display:none!important}
.page-head::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:linear-gradient(90deg,rgba(5,20,37,.84) 0%,rgba(5,20,37,.74) 28%,rgba(5,20,37,.46) 48%,rgba(5,20,37,.14) 70%,rgba(5,20,37,0) 100%)!important;
}
.page-head-scene{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  opacity:1!important;
  filter:none!important;
}
.page-head-mascot{display:none!important}
.page-head-copy,.page-head>div:not(.page-head-mascot),.page-head>.button{
  position:relative!important;
  z-index:2!important;
}
.page-head-copy{max-width:min(700px,64%)!important}
.page-head h1{
  color:#fff!important;
  margin:.04em 0 .10em!important;
  text-shadow:0 2px 10px rgba(0,0,0,.35)!important;
}
.page-head p,.page-head p.muted{
  color:rgba(255,255,255,.88)!important;
  max-width:620px!important;
  text-shadow:0 1px 6px rgba(0,0,0,.26)!important;
}
.page-head .eyebrow{color:#73aefe!important;text-shadow:0 1px 4px rgba(0,0,0,.18)!important}
.page-head-action{margin-top:10px!important}
html[data-imagery="subtle"] .page-head-scene{opacity:.92!important}
html[data-imagery="off"] .page-head-scene{display:none!important}
html[data-imagery="off"] .page-head::after{background:linear-gradient(115deg,#0b1d34,#16324f)!important}
.compact-page-head,.settings-page .page-head{min-height:128px!important}
@media (max-width: 980px){
  .page-head{min-height:124px!important;padding:16px!important}
  .page-head-copy{max-width:76%!important}
}
@media (max-width: 640px){
  .page-head{min-height:116px!important;padding:15px!important}
  .page-head-copy{max-width:82%!important}
  .page-head h1{font-size:clamp(1.75rem,8vw,2.15rem)!important}
  .page-head p{font-size:1rem!important}
  .page-head::after{background:linear-gradient(90deg,rgba(5,20,37,.90) 0%,rgba(5,20,37,.74) 40%,rgba(5,20,37,.28) 72%,rgba(5,20,37,0) 100%)!important}
}

/* ===== Horizon Drive v26 — final hero scene pass ===== */
.page-head,
.signin-visual{
  isolation:isolate!important;
}
.page-head{
  position:relative!important;
  overflow:hidden!important;
  min-height:132px!important;
  padding:18px 20px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,rgba(8,25,46,.80),rgba(12,32,56,.62))!important;
  border:1px solid color-mix(in srgb,var(--line) 80%,transparent)!important;
}
.page-head::before,
.page-head::after{display:none!important;content:none!important}
.page-head-scene{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  z-index:0!important;
}
.page-head::marker{display:none!important}
.page-head::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:linear-gradient(90deg,rgba(4,18,34,.90) 0%,rgba(4,18,34,.82) 36%,rgba(4,18,34,.44) 62%,rgba(4,18,34,.12) 82%,rgba(4,18,34,0) 100%)!important;
}
.page-head-copy,
.page-head>div:not(.page-head-scene),
.page-head>.button{position:relative!important;z-index:2!important}
.page-head-copy{max-width:min(720px,58%)!important}
.page-head h1,.page-head p,.page-head .eyebrow{color:#fff!important}
.page-head p,.page-head p.muted{color:rgba(255,255,255,.92)!important}
.page-head .eyebrow{color:#8ec7ff!important}
.page-head-action{margin-top:10px!important}
.page-head-mascot{display:none!important}
html[data-imagery="subtle"] .page-head-scene{opacity:.72!important}
html[data-imagery="off"] .page-head-scene{display:none!important}
html[data-imagery="off"] .page-head{background:linear-gradient(115deg,#0b1d34,#16324f)!important}

/* Sign-in hero uses the page-specific welcome scene; no separate clipped mascot layer. */
.signin-shell{height:clamp(400px,66vh,520px)!important}
.signin-visual{
  position:relative!important;
  overflow:hidden!important;
  background:none!important;
}
.signin-scene-img{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  z-index:0!important;
}
.signin-visual-overlay{
  z-index:1!important;
  background:linear-gradient(96deg,rgba(7,25,46,.84) 0%,rgba(7,25,46,.70) 44%,rgba(7,25,46,.18) 78%,rgba(7,25,46,0) 100%)!important;
}
.signin-brand-copy{position:relative!important;z-index:2!important;width:min(560px,64%)!important}
.signin-brand-copy .eyebrow,
.signin-brand-copy h1,
.signin-brand-copy .hero-tagline{color:#fff!important}
.signin-mascot{display:none!important}

/* Menus should always float above hero scenes. */
.header-actions,.display-settings,.profile-menu{position:relative!important;z-index:250!important}
.display-settings-panel,.profile-menu-panel{z-index:260!important}

/* Mobile panel sizing and page heads */
@media (max-width: 900px){
  .page-head{min-height:124px!important;padding:16px!important}
  .page-head-copy{max-width:74%!important}
}
@media (max-width: 700px){
  .page-head{min-height:116px!important;padding:15px!important}
  .page-head-copy{max-width:82%!important}
  .page-head h1{font-size:clamp(1.7rem,8vw,2.1rem)!important}
  .page-head p{font-size:1rem!important}
  .display-settings-panel{position:fixed!important;left:10px!important;right:10px!important;top:auto!important;bottom:10px!important;width:auto!important;max-height:calc(100dvh - 20px)!important;overflow:auto!important}
}
@media (max-width: 480px){
  .page-head-copy{max-width:86%!important}
}

/* ===== V27 concept rebuild ===== */
:root{--hero-radius:20px}
body{background:
  radial-gradient(1200px 600px at 15% 0%, color-mix(in srgb,var(--brand2) 20%, transparent), transparent 60%),
  linear-gradient(180deg, color-mix(in srgb,var(--paper) 12%, transparent), transparent 35%),
  var(--body) !important}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-2;
  background-image:linear-gradient(180deg, rgba(4,16,31,.52), rgba(4,16,31,.76)), var(--page-scene);
  background-size:cover; background-position:center top; background-repeat:no-repeat;
  opacity:calc(var(--bg-art-opacity,1));
}
html[data-theme="light"] body::before{opacity:.93}
html[data-imagery="subtle"] body{--bg-art-opacity:.55}
html[data-imagery="off"] body::before{opacity:0}
.shell{position:relative; z-index:1}
.page-head,
.signin-visual{
  position:relative!important; overflow:hidden!important; isolation:isolate!important;
  min-height:150px!important; border-radius:var(--hero-radius)!important;
  padding:18px 20px!important; border:1px solid rgba(112,155,215,.20)!important;
  background:rgba(9,27,45,.28)!important; box-shadow:0 18px 34px rgba(0,0,0,.16)!important;
}
.compact-page-head,.settings-page .page-head,.tools-hero{min-height:142px!important}
.signin-hero-compact{min-height:228px!important}
.page-head-scene,.signin-scene-img{
  position:absolute!important; inset:0!important; width:100%!important; height:100%!important; display:block!important;
  object-fit:cover!important; object-position:center center!important; z-index:0!important; filter:none!important; opacity:1!important;
}
.page-head::before,.page-head::after,.signin-visual::before,.signin-visual::after{content:""!important; position:absolute!important; inset:0!important; z-index:1!important; pointer-events:none!important}
.page-head::before,.signin-visual::before{
  background:
    linear-gradient(90deg, rgba(6,20,37,.88) 0%, rgba(6,20,37,.79) 28%, rgba(6,20,37,.56) 44%, rgba(6,20,37,.22) 62%, rgba(6,20,37,0) 78%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.15));
}
.page-head-copy,.signin-brand-copy,.page-head .button{position:relative!important; z-index:2!important}
.page-head-copy{max-width:min(700px,62%)!important}
.page-head .eyebrow,.signin-brand-copy .eyebrow{color:#6faeff!important; letter-spacing:.08em!important; font-weight:800!important; text-transform:uppercase!important}
.page-head h1,.signin-brand-copy h1{color:#fff!important; margin:.02em 0 .08em!important; text-shadow:0 2px 12px rgba(0,0,0,.34)!important}
.page-head p,.page-head .muted,.signin-brand-copy p,.signin-brand-copy .hero-tagline{color:rgba(255,255,255,.90)!important; text-shadow:0 1px 5px rgba(0,0,0,.26)!important}
.page-head-action{margin-top:10px!important}
.signin-brand-copy{position:relative!important; z-index:2!important; width:min(640px,60%)!important}
.signin-visual-overlay{display:none!important}
.page-head-mascot,.signin-mascot{display:none!important}
html[data-theme="light"] .page-head::before, html[data-theme="light"] .signin-visual::before{
  background:linear-gradient(90deg, rgba(8,23,39,.76) 0%, rgba(8,23,39,.67) 28%, rgba(8,23,39,.42) 46%, rgba(8,23,39,.16) 64%, rgba(8,23,39,0) 80%)!important;
}
.card,.login-card,.settings-section,.search-card,.tool-card,.empty-state{backdrop-filter:blur(5px)!important; background:color-mix(in srgb,var(--paper) 92%, transparent)!important}
.dashboard-main-grid,.settings-page,.tools-page-grid{position:relative!important; z-index:2!important}
.header-actions,.display-settings,.profile-menu{position:relative!important; z-index:300!important}
.display-settings-panel,.profile-menu-panel{z-index:350!important}
@media (max-width: 900px){
  .page-head{min-height:132px!important; padding:16px!important}
  .compact-page-head,.settings-page .page-head,.tools-hero{min-height:126px!important}
  .signin-hero-compact{min-height:196px!important}
  .page-head-copy{max-width:78%!important}
}
@media (max-width: 640px){
  .page-head{min-height:118px!important; padding:14px!important; border-radius:18px!important}
  .compact-page-head,.settings-page .page-head,.tools-hero{min-height:112px!important}
  .page-head-copy{max-width:86%!important}
  .page-head h1{font-size:clamp(1.75rem,7vw,2.2rem)!important}
  .page-head p{font-size:1rem!important; line-height:1.35!important}
  .signin-hero-compact{min-height:170px!important}
  .signin-brand-copy{width:min(100%,84%)!important}
}
/* Horizon Drive v32 — consolidated production visual layer. */

/* --- page atmosphere: one continuous scenic environment --- */
html,body{min-height:100%}
body{
  position:relative!important;
  z-index:0!important;
  background-color:var(--bg)!important;
  background-image:
    linear-gradient(180deg,rgba(4,17,31,.42) 0%,rgba(4,17,31,.70) 40%,rgba(4,17,31,.91) 78%,rgba(4,17,31,.98) 100%),
    var(--page-ambient)!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center top!important;
  background-attachment:fixed!important;
}
body::before,body::after{display:none!important;content:none!important}
html[data-theme="light"] body{
  background-image:
    linear-gradient(180deg,rgba(245,249,253,.56) 0%,rgba(245,249,253,.78) 42%,rgba(245,249,253,.94) 78%,rgba(245,249,253,.99) 100%),
    var(--page-ambient)!important;
}
html[data-imagery="subtle"] body{
  background-image:
    linear-gradient(180deg,rgba(4,17,31,.73) 0%,rgba(4,17,31,.87) 46%,rgba(4,17,31,.97) 100%),
    var(--page-ambient)!important;
}
html[data-theme="light"][data-imagery="subtle"] body{
  background-image:
    linear-gradient(180deg,rgba(245,249,253,.83) 0%,rgba(245,249,253,.94) 55%,rgba(245,249,253,.99) 100%),
    var(--page-ambient)!important;
}
html[data-imagery="off"] body{background-image:none!important}

/* --- header and menus: always above the artwork --- */
.site-header{
  position:sticky!important;
  top:0!important;
  z-index:100000!important;
  overflow:visible!important;
  isolation:isolate!important;
  background:color-mix(in srgb,var(--brand) 92%,transparent)!important;
  box-shadow:0 1px 0 color-mix(in srgb,var(--line) 75%,transparent)!important;
}
.header-actions,.display-settings,.profile-menu{position:relative!important;z-index:100010!important;overflow:visible!important}
.display-settings-panel,.profile-menu-panel{
  position:fixed!important;
  z-index:200000!important;
  top:76px!important;
  right:18px!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
}
.display-settings-panel{
  width:min(560px,calc(100vw - 36px))!important;
  max-height:calc(100dvh - 94px)!important;
  overflow:auto!important;
  border-radius:18px!important;
  background:var(--paper)!important;
  box-shadow:0 22px 60px rgba(0,0,0,.38)!important;
}
.profile-menu-panel{width:min(285px,calc(100vw - 36px))!important;background:var(--paper)!important;box-shadow:0 22px 60px rgba(0,0,0,.38)!important}

/* --- content stays above page background but below menus --- */
.shell,.site-footer{position:relative!important;z-index:2!important}
.shell{padding-top:22px!important}

/* --- compact sharp hero, not a giant banner --- */
.page-head{
  position:relative!important;
  isolation:isolate!important;
  min-height:148px!important;
  margin:0 0 16px!important;
  padding:17px 22px!important;
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,var(--line) 55%,transparent)!important;
  border-radius:18px!important;
  background:#091b2f!important;
  box-shadow:0 10px 28px rgba(0,0,0,.13)!important;
}
.dashboard-hero{min-height:168px!important}
.settings-page .page-head,.account-page .page-head,.tools-hero{min-height:145px!important}
.page-head::before{display:none!important;content:none!important}
.page-head::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  background:linear-gradient(90deg,rgba(4,17,31,.92) 0%,rgba(4,17,31,.82) 27%,rgba(4,17,31,.58) 44%,rgba(4,17,31,.26) 62%,rgba(4,17,31,.05) 78%,rgba(4,17,31,0) 100%)!important;
  pointer-events:none!important;
}
.page-head-scene{
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
}
.page-head-copy,.page-head>div:not(.page-head-mascot),.page-head>.button{
  position:relative!important;
  z-index:2!important;
}
.page-head-copy,.page-head>div:not(.page-head-mascot){max-width:min(720px,63%)!important}
.page-head-mascot{display:none!important}
.page-head .eyebrow{color:#70adff!important;text-shadow:0 1px 5px rgba(0,0,0,.25)!important}
.page-head h1{
  color:#fff!important;
  margin:2px 0 5px!important;
  line-height:1!important;
  text-shadow:0 2px 12px rgba(0,0,0,.38)!important;
}
.page-head p,.page-head .muted{
  margin:0!important;
  color:rgba(255,255,255,.93)!important;
  line-height:1.34!important;
  text-shadow:0 1px 7px rgba(0,0,0,.30)!important;
}
.page-head-action{margin-top:10px!important}
html[data-imagery="subtle"] .page-head-scene{opacity:.58!important}
html[data-imagery="subtle"] .page-head::after{background:linear-gradient(90deg,rgba(4,17,31,.95) 0%,rgba(4,17,31,.88) 45%,rgba(4,17,31,.62) 72%,rgba(4,17,31,.36) 100%)!important}
html[data-imagery="off"] .page-head-scene{display:none!important}
html[data-imagery="off"] .page-head{background:linear-gradient(115deg,var(--brand),color-mix(in srgb,var(--brand2) 32%,var(--brand)))!important}

/* --- sign in gets its own scene, but remains compact --- */
.signin-shell{
  width:min(100%,1060px)!important;
  min-height:0!important;
  height:auto!important;
  margin:10px auto 8px!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  overflow:hidden!important;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  background:color-mix(in srgb,var(--paper) 96%,transparent)!important;
  box-shadow:0 20px 54px rgba(0,0,0,.18)!important;
}
.signin-visual,.signin-hero-compact{
  position:relative!important;
  height:190px!important;
  min-height:190px!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:#091b2f!important;
}
.signin-scene-img{
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  filter:none!important;
  opacity:1!important;
}
.signin-visual::after{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  background:linear-gradient(90deg,rgba(4,17,31,.91) 0%,rgba(4,17,31,.78) 35%,rgba(4,17,31,.33) 64%,rgba(4,17,31,0) 82%)!important;
}
.signin-visual-overlay,.signin-mascot{display:none!important}
.signin-brand-copy{position:relative!important;z-index:2!important;width:min(650px,63%)!important;padding:26px 30px!important;color:#fff!important}
.signin-brand-copy .eyebrow{color:#70adff!important}
.signin-brand-copy h1{color:#fff!important;margin:3px 0 8px!important;text-shadow:0 2px 12px rgba(0,0,0,.38)!important}
.signin-brand-copy .hero-tagline{color:#fff!important;text-shadow:0 1px 6px rgba(0,0,0,.28)!important}
.signin-form-side{padding:24px 26px!important;background:var(--paper)!important}
html[data-imagery="subtle"] .signin-scene-img{opacity:.58!important}
html[data-imagery="off"] .signin-scene-img{display:none!important}

/* --- cards: readable, translucent, but never blurry --- */
.card,.search-card,.settings-section,.empty-state,.quick-tools-card,.saved-preview-card,.calculator-card,.resource-card,.notification-summary,.results-disclaimer{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:color-mix(in srgb,var(--paper) 93%,transparent)!important;
  border-color:color-mix(in srgb,var(--line) 88%,transparent)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.08)!important;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .search-card,
html[data-theme="dark"] .settings-section,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .quick-tools-card,
html[data-theme="dark"] .saved-preview-card,
html[data-theme="dark"] .calculator-card,
html[data-theme="dark"] .resource-card,
html[data-theme="dark"] .notification-summary,
html[data-theme="dark"] .results-disclaimer{
  background:color-mix(in srgb,var(--paper) 91%,transparent)!important;
}
.dashboard-main-grid,.settings-page,.account-page,.tools-page-grid,.car-grid,.search-list{position:relative!important;z-index:2!important}

/* --- mobile behavior --- */
@media(max-width:900px){
  .shell{padding-top:16px!important}
  .page-head{min-height:130px!important;padding:15px 17px!important}
  .dashboard-hero{min-height:158px!important}
  .page-head-copy,.page-head>div:not(.page-head-mascot){max-width:75%!important}
  .signin-visual,.signin-hero-compact{height:178px!important;min-height:178px!important}
  .signin-brand-copy{width:72%!important;padding:22px!important}
}
@media(max-width:620px){
  body{background-attachment:scroll!important}
  .shell{padding-top:12px!important}
  .page-head{min-height:118px!important;padding:13px 14px!important;border-radius:15px!important}
  .dashboard-hero{min-height:168px!important}
  .page-head-copy,.page-head>div:not(.page-head-mascot){max-width:82%!important}
  .page-head h1{font-size:clamp(1.8rem,8vw,2.35rem)!important}
  .page-head p{font-size:1rem!important;line-height:1.28!important}
  .page-head::after{background:linear-gradient(90deg,rgba(4,17,31,.94) 0%,rgba(4,17,31,.80) 43%,rgba(4,17,31,.38) 70%,rgba(4,17,31,.04) 100%)!important}
  .signin-visual,.signin-hero-compact{height:168px!important;min-height:168px!important}
  .signin-brand-copy{width:82%!important;padding:19px!important}

  .display-settings-panel{
    position:fixed!important;
    z-index:200000!important;
    inset:auto 10px 10px 10px!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - 20px)!important;
    overflow:auto!important;
    border-radius:18px!important;
  }
  .profile-menu-panel{
    position:fixed!important;
    z-index:200000!important;
    top:68px!important;
    right:10px!important;
    left:auto!important;
    width:min(290px,calc(100vw - 20px))!important;
    max-height:calc(100dvh - 80px)!important;
    overflow:auto!important;
  }
  .site-footer{align-items:center!important;justify-content:center!important;flex-direction:column!important;text-align:center!important}
  .site-footer-brand,.site-footer-brand-lockup{justify-content:center!important;text-align:center!important}
  .site-footer nav{width:100%!important;justify-content:center!important;text-align:center!important}
}
.site-header,.header-actions,.display-settings,.profile-menu{transform:none!important;filter:none!important;contain:none!important;clip-path:none!important}

/* Horizon Drive v32 — production visual polish */
.page-head{min-height:156px!important}
.dashboard-hero{min-height:166px!important}
.settings-page .page-head,.account-page .page-head,.tools-hero{min-height:154px!important}
.page-head::after{background:linear-gradient(90deg,rgba(4,17,31,.60) 0%,rgba(4,17,31,.32) 34%,rgba(4,17,31,.10) 58%,rgba(4,17,31,0) 78%)!important}
.page-head-copy,.page-head>div:not(.page-head-mascot){max-width:min(760px,61%)!important}
.page-head-scene,.signin-scene-img{
  animation:hd-scene-settle .48s cubic-bezier(.2,.75,.25,1) both!important;
  transform-origin:right center!important;
}
@keyframes hd-scene-settle{
  from{opacity:.92;transform:translateX(10px) scale(1.004)}
  to{opacity:1;transform:translateX(0) scale(1)}
}
/* No content entrance delays: cards render immediately. */
.card,.search-card,.settings-section,.quick-tools-card,.saved-preview-card,.calculator-card,.resource-card{animation:none!important;transition:none!important}
/* Tiny save feedback; form submission is never delayed. */
.car-actions button.save-pop{animation:hd-heart-pop .22s ease-out!important}
@keyframes hd-heart-pop{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}
/* Menus are viewport-layer UI, never scene-layer UI. */
.site-header{z-index:900000!important}
.header-actions,.display-settings,.profile-menu{z-index:900010!important}
.display-settings-panel,.profile-menu-panel{z-index:999999!important;position:fixed!important;right:16px!important;top:72px!important;left:auto!important;bottom:auto!important}
@media(max-width:620px){
  .page-head{min-height:122px!important;padding:13px 14px!important}
  .dashboard-hero{min-height:148px!important}
  .settings-page .page-head,.account-page .page-head,.tools-hero{min-height:122px!important}
  .page-head-copy,.page-head>div:not(.page-head-mascot){max-width:80%!important}
  .display-settings-panel{inset:auto 10px 10px 10px!important;top:auto!important;right:10px!important;left:10px!important;max-height:calc(100dvh - 20px)!important}
  .profile-menu-panel{top:66px!important;right:10px!important;width:min(290px,calc(100vw - 20px))!important}
}
@media(prefers-reduced-motion:reduce){
  .page-head-scene,.signin-scene-img{animation:none!important}
  .shell{transition:none!important}
}

/* ========================================================================
   Horizon Drive v32 — six-family production imagery
   Primary banners are 2872×547. Login / signup backgrounds are 2400×1350.
   The image composition reserves copy space on the left and roadway/mascot
   space on the right. The approved mascot is intentionally not baked in.
   ======================================================================== */

/* Full-width scenic page banners. */
.page-head{
  width:100%!important;
  min-height:clamp(156px,18vw,230px)!important;
  padding:clamp(18px,2.1vw,30px)!important;
  border-radius:18px!important;
}
.dashboard-hero,
.settings-page .page-head,
.account-page .page-head,
.tools-hero{min-height:clamp(156px,18vw,230px)!important}
.page-head-scene{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
}
.page-head::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  background:linear-gradient(90deg,rgba(4,17,31,.82) 0%,rgba(4,17,31,.62) 31%,rgba(4,17,31,.27) 51%,rgba(4,17,31,.04) 70%,rgba(4,17,31,0) 100%)!important;
  pointer-events:none!important;
}
.page-head-copy,.page-head>div:not(.page-head-mascot){max-width:min(740px,58%)!important}
.page-head h1,.page-head p,.page-head .muted{color:#fff!important}
.page-head .eyebrow{color:#8bc7ff!important}

/* The approved standalone mascot pack is not yet in this deployment.
   Never substitute the retired blue-car-face mascot. */
.hero-mascot-img,.page-head-mascot,.signin-mascot{display:none!important}

/* Full-page sign in / sign up. The 2400×1350 family image fills the panel,
   with brand copy and the working form layered over the reserved left zone. */
body:has(.signin-shell) .shell{
  max-width:1280px!important;
  padding-top:18px!important;
  padding-bottom:18px!important;
}
.signin-shell{
  position:relative!important;
  isolation:isolate!important;
  width:min(100%,1220px)!important;
  min-height:clamp(620px,calc(100dvh - 175px),780px)!important;
  margin:8px auto!important;
  display:grid!important;
  grid-template-columns:minmax(340px,470px) 1fr!important;
  align-items:end!important;
  padding:28px!important;
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,var(--line) 58%,transparent)!important;
  border-radius:22px!important;
  background:#0b1d34!important;
  box-shadow:0 24px 70px rgba(0,0,0,.24)!important;
}
.signin-visual,.signin-hero-compact{
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  background:#0b1d34!important;
}
.signin-scene-img,.signin-visual>img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
}
.signin-visual-overlay{
  display:block!important;
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  background:linear-gradient(90deg,rgba(4,17,31,.90) 0%,rgba(4,17,31,.72) 34%,rgba(4,17,31,.34) 53%,rgba(4,17,31,.06) 72%,rgba(4,17,31,0) 100%)!important;
}
.signin-brand-copy{
  position:absolute!important;
  z-index:3!important;
  top:34px!important;
  left:34px!important;
  width:min(520px,44%)!important;
  padding:0!important;
  color:#fff!important;
}
.signin-brand-copy .eyebrow{color:#8bc7ff!important}
.signin-brand-copy h1{
  color:#fff!important;
  margin:5px 0 8px!important;
  font-size:clamp(2.35rem,4vw,4.4rem)!important;
  text-shadow:0 2px 18px rgba(0,0,0,.36)!important;
}
.signin-brand-copy .hero-tagline{color:#fff!important;text-shadow:0 1px 8px rgba(0,0,0,.38)!important}
.signin-form-side,.signin-form-compact{
  grid-column:1!important;
  position:relative!important;
  z-index:4!important;
  display:block!important;
  padding:0!important;
  background:transparent!important;
}
.signin-form-side .login-card{
  width:100%!important;
  max-width:460px!important;
  padding:24px!important;
  border:1px solid rgba(255,255,255,.20)!important;
  border-radius:18px!important;
  background:color-mix(in srgb,var(--paper) 91%,transparent)!important;
  box-shadow:0 18px 45px rgba(0,0,0,.24)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}
html[data-imagery="subtle"] .signin-scene-img{opacity:.58!important}
html[data-imagery="off"] .signin-scene-img{display:none!important}
html[data-imagery="off"] .signin-shell{background:linear-gradient(135deg,var(--brand),#16324f)!important}

/* Responsive fallback: image remains a scenic top panel, form below. */
@media(max-width:760px){
  .page-head{min-height:145px!important;padding:16px!important}
  .page-head-copy,.page-head>div:not(.page-head-mascot){max-width:78%!important}
  .signin-shell{
    display:block!important;
    min-height:0!important;
    padding:0!important;
    background:var(--paper)!important;
  }
  .signin-visual,.signin-hero-compact{
    position:relative!important;
    height:290px!important;
    min-height:290px!important;
  }
  .signin-brand-copy{
    top:24px!important;
    left:22px!important;
    width:70%!important;
  }
  .signin-brand-copy h1{font-size:clamp(2rem,9vw,3rem)!important}
  .signin-form-side,.signin-form-compact{
    position:relative!important;
    padding:18px!important;
    background:var(--paper)!important;
  }
  .signin-form-side .login-card{
    max-width:none!important;
    padding:8px 2px!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:var(--paper)!important;
    backdrop-filter:none!important;
  }
}
@media(max-width:480px){
  .page-head{min-height:132px!important}
  .page-head-copy,.page-head>div:not(.page-head-mascot){max-width:84%!important}
  .signin-visual,.signin-hero-compact{height:245px!important;min-height:245px!important}
  .signin-brand-copy{width:80%!important}
}


/* Horizon sibling shell alignment: Drive + Cruise global chrome = 65px. */
:root{--family-header-height:65px;}
@media (min-width:701px){.site-header{height:65px!important;min-height:65px!important;}}
.site-footer{min-height:65px!important;}

/* ===== Horizon Drive shared page-hero contract (Cruise sibling model) ===== */
:root{
  --drive-page-hero-height:142px;
  --drive-page-hero-radius:17px;
  --drive-page-hero-mascot-track:clamp(178px,19vw,286px);
  --drive-page-hero-action-track:clamp(148px,16vw,220px);
}

/* Hero-only scenic mode for normal app pages. Full-page scenic artwork remains
   exclusive to login/signup, where the dedicated 2400x1350 asset is used. */
body,
html[data-theme="light"] body,
html[data-imagery="subtle"] body,
html[data-theme="light"][data-imagery="subtle"] body{
  background-image:none!important;
  background-color:var(--bg)!important;
}
html[data-imagery="off"] body{background-image:none!important}
.shell{padding-top:18px!important}

/* One shared desktop page-hero geometry, matching the Cruise three-zone model:
   A = content, B = reserved mascot, C = page action/status. */
.page-head,
.dashboard-hero,
.settings-page .page-head,
.account-page .page-head,
.tools-hero{
  box-sizing:border-box!important;
  width:100%!important;
  height:var(--drive-page-hero-height)!important;
  min-height:var(--drive-page-hero-height)!important;
  max-height:var(--drive-page-hero-height)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) var(--drive-page-hero-mascot-track) var(--drive-page-hero-action-track)!important;
  gap:clamp(8px,1.4vw,20px)!important;
  align-items:center!important;
  margin:0 0 16px!important;
  padding:14px clamp(18px,2vw,26px)!important;
  border-radius:var(--drive-page-hero-radius)!important;
}
.page-head:not(:has(.page-head-actions)){
  grid-template-columns:minmax(0,1fr) minmax(var(--drive-page-hero-mascot-track),30%) 0!important;
}
.page-head-copy,
.page-head>div.page-head-copy{
  grid-column:1!important;
  min-width:0!important;
  max-width:none!important;
  align-self:center!important;
}
.page-head-mascot-slot{
  grid-column:2!important;
  grid-row:1!important;
  min-width:0!important;
  width:100%!important;
  height:100%!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  position:relative!important;
  z-index:2!important;
  pointer-events:none!important;
}
.page-head-actions{
  grid-column:3!important;
  grid-row:1!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  position:relative!important;
  z-index:3!important;
}
.page-head-actions .button{white-space:nowrap!important}
.page-head .eyebrow{
  margin:0 0 2px!important;
  font-size:.70rem!important;
  line-height:1.15!important;
}
.page-head h1{
  margin:0 0 4px!important;
  font-size:clamp(1.8rem,2.45vw,2.35rem)!important;
  line-height:1.02!important;
}
.page-head p,.page-head .muted{
  margin:0!important;
  max-width:640px!important;
  font-size:.94rem!important;
  line-height:1.28!important;
}
.page-head .back{
  display:inline-flex!important;
  margin:0 0 3px!important;
  font-size:.78rem!important;
  line-height:1.15!important;
}
.page-head-scene{
  object-position:center center!important;
}
/* The scene is darker only where copy lives; the center/right stays clear for
   the approved Drive mascot and page-specific prop overlays. */
.page-head::after{
  background:linear-gradient(90deg,rgba(4,17,31,.78) 0%,rgba(4,17,31,.60) 30%,rgba(4,17,31,.24) 48%,rgba(4,17,31,.04) 66%,rgba(4,17,31,0) 100%)!important;
}
.results-head .page-head-copy{max-width:none!important}
.narrow-page .page-head{height:auto!important;max-height:none!important;min-height:var(--drive-page-hero-height)!important}

/* Mobile/tablet may grow only when content genuinely requires it, as in the
   Cruise contract; no arbitrary page-specific hero heights. */
@media(max-width:900px){
  :root{
    --drive-page-hero-height:132px;
    --drive-page-hero-mascot-track:clamp(120px,24vw,190px);
    --drive-page-hero-action-track:clamp(116px,19vw,170px);
  }
  .page-head,
  .dashboard-hero,
  .settings-page .page-head,
  .account-page .page-head,
  .tools-hero{
    padding:12px 16px!important;
    gap:10px!important;
  }
  .page-head h1{font-size:clamp(1.65rem,4vw,2.05rem)!important}
  .page-head p,.page-head .muted{font-size:.88rem!important}
}
@media(max-width:640px){
  :root{--drive-page-hero-height:126px;--drive-page-hero-mascot-track:clamp(104px,27vw,150px)}
  .page-head,
  .dashboard-hero,
  .settings-page .page-head,
  .account-page .page-head,
  .tools-hero{
    height:auto!important;
    min-height:var(--drive-page-hero-height)!important;
    max-height:none!important;
    grid-template-columns:minmax(0,1fr) var(--drive-page-hero-mascot-track)!important;
    grid-template-rows:auto auto!important;
    padding:12px 14px!important;
  }
  .page-head-copy,.page-head>div.page-head-copy{grid-column:1!important;grid-row:1!important}
  .page-head-mascot-slot{grid-column:2!important;grid-row:1 / span 2!important}
  .page-head-actions{grid-column:1!important;grid-row:2!important;justify-content:flex-start!important;margin-top:7px!important}
  .page-head h1{font-size:clamp(1.55rem,7vw,1.95rem)!important}
  .page-head p,.page-head .muted{font-size:.84rem!important;line-height:1.22!important}
}


/* ========================================================================
   Horizon Drive v37 — high-quality mascot + responsive hero hardening
   Keeps the previously agreed compact Cruise-style page-hero geometry.
   ======================================================================== */

/* Scenic focal points: on wide displays the crop is vertical, so bias low to
   protect the roadway. On phones/tablets the crop becomes horizontal, so bias
   right to retain the road/mascot lane. */
.page-head-scene{
  object-fit:cover!important;
  object-position:center 80%!important;
  transform:none!important;
  animation:none!important;
}
.page-head-scene[data-scene-theme="coastal-big-sur"]{object-position:center 82%!important}
.page-head-scene[data-scene-theme="sf-bay-area"]{object-position:center 79%!important}
.page-head-scene[data-scene-theme="la-southern-california"]{object-position:center 83%!important}
.page-head-scene[data-scene-theme="desert"]{object-position:center 78%!important}
.page-head-scene[data-scene-theme="redwoods"]{object-position:center 85%!important}
.page-head-scene[data-scene-theme="mountain"]{object-position:center 72%!important}

/* HQ mascot art: no CSS shadow. The page-specific PNG itself is transparent
   only outside the subject, with opaque eye whites/body artwork. */
.page-head-mascot-slot{
  overflow:visible!important;
  pointer-events:none!important;
}
.page-head-mascot-img{
  display:block!important;
  position:absolute!important;
  z-index:2!important;
  right:0!important;
  bottom:-3px!important;
  width:clamp(118px,9.4vw,168px)!important;
  max-width:100%!important;
  height:auto!important;
  max-height:calc(var(--drive-page-hero-height) - 8px)!important;
  object-fit:contain!important;
  filter:none!important;
  box-shadow:none!important;
  transform:none!important;
  transform-origin:50% 100%!important;
  image-rendering:auto!important;
}
.page-head-mascot-slot[data-mascot-mode="between-content"] .page-head-mascot-img{
  right:50%!important;
  transform:translateX(50%)!important;
}
.page-head-mascot-slot[data-mascot-mode="right-supported"] .page-head-mascot-img{right:5%!important}

/* Page props are independent vectors, so they remain sharp on retina screens
   and can be repositioned without degrading the mascot image. */
.page-head-mascot-prop{
  position:absolute!important;
  z-index:3!important;
  width:clamp(38px,3.6vw,58px)!important;
  height:auto!important;
  top:5px!important;
  right:2px!important;
  object-fit:contain!important;
  filter:none!important;
}
.page-head-mascot-slot[data-mascot-page="searches"] .page-head-mascot-prop{right:3%!important;top:3px!important}
.page-head-mascot-slot[data-mascot-page="saved"] .page-head-mascot-prop{right:2%!important;top:3px!important}
.page-head-mascot-slot[data-mascot-page="alerts"] .page-head-mascot-prop{right:0!important;top:2px!important}
.page-head-mascot-slot[data-mascot-page="account"] .page-head-mascot-prop{right:1%!important;top:4px!important}
.page-head-mascot-slot[data-mascot-page="tools"] .page-head-mascot-prop{right:0!important;top:2px!important}
.page-head-mascot-slot[data-mascot-page="signin"] .page-head-mascot-prop{right:0!important;top:4px!important}

/* Login/signup uses its tall dedicated scene but the same HQ mascot family. */
.signin-visual{position:relative!important;overflow:hidden!important}
.signin-visual .page-head-mascot-slot{
  position:absolute!important;
  z-index:5!important;
  right:3.5%!important;
  bottom:0!important;
  width:clamp(190px,24vw,330px)!important;
  height:64%!important;
}
.signin-visual .page-head-mascot-img{
  width:min(100%,300px)!important;
  right:0!important;
  bottom:-4px!important;
  max-height:100%!important;
}
.signin-visual .page-head-mascot-prop{
  width:clamp(42px,5vw,70px)!important;
  top:0!important;
  right:0!important;
}

/* Tablet: keep the car on the road and bias the scene toward the road side. */
@media(max-width:900px){
  .page-head-scene{object-position:72% 70%!important}
  .page-head-scene[data-scene-theme="coastal-big-sur"]{object-position:76% 70%!important}
  .page-head-scene[data-scene-theme="sf-bay-area"]{object-position:75% 68%!important}
  .page-head-scene[data-scene-theme="la-southern-california"]{object-position:76% 72%!important}
  .page-head-scene[data-scene-theme="desert"]{object-position:74% 68%!important}
  .page-head-scene[data-scene-theme="redwoods"]{object-position:78% 72%!important}
  .page-head-scene[data-scene-theme="mountain"]{object-position:74% 64%!important}

  .page-head-mascot-img{
    width:clamp(108px,15vw,140px)!important;
    bottom:-2px!important;
  }
  .page-head-mascot-prop{width:clamp(32px,4.8vw,46px)!important}
}

/* Phone: scene and mascot get their own tuned placement rather than inheriting
   desktop coordinates. The mascot stays visible without covering copy/actions. */
@media(max-width:640px){
  .page-head-scene{object-position:80% center!important}
  .page-head-scene[data-scene-theme="coastal-big-sur"]{object-position:82% center!important}
  .page-head-scene[data-scene-theme="sf-bay-area"]{object-position:80% center!important}
  .page-head-scene[data-scene-theme="la-southern-california"]{object-position:82% center!important}
  .page-head-scene[data-scene-theme="desert"]{object-position:80% center!important}
  .page-head-scene[data-scene-theme="redwoods"]{object-position:84% center!important}
  .page-head-scene[data-scene-theme="mountain"]{object-position:80% center!important}

  .page-head-mascot-slot{overflow:visible!important}
  .page-head-mascot-img{
    width:clamp(84px,25vw,112px)!important;
    right:0!important;
    bottom:-1px!important;
    max-height:calc(var(--drive-page-hero-height) - 8px)!important;
  }
  .page-head-mascot-slot[data-mascot-mode="between-content"] .page-head-mascot-img{
    right:0!important;
    transform:none!important;
  }
  .page-head-mascot-prop{
    width:30px!important;
    top:5px!important;
    right:0!important;
  }
  .page-head-copy,.page-head>div.page-head-copy{max-width:71%!important}
  .signin-visual .page-head-mascot-slot{
    right:1%!important;
    width:128px!important;
    height:55%!important;
  }
  .signin-visual .page-head-mascot-img{width:120px!important}
  .signin-visual .page-head-mascot-prop{width:34px!important}
}

/* Personalize is viewport UI. Moving it to <body> in JS prevents header clipping;
   these rules guarantee it remains visible and scrollable on phones/tablets. */
.display-settings-panel{
  z-index:2147483000!important;
  position:fixed!important;
  top:72px!important;
  right:12px!important;
  left:auto!important;
  bottom:auto!important;
  max-height:calc(100dvh - 84px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
}
html.display-settings-open{overscroll-behavior:none!important}
@media(max-width:900px){
  .display-settings-panel{
    top:auto!important;
    right:10px!important;
    bottom:10px!important;
    left:10px!important;
    width:auto!important;
    max-width:none!important;
    max-height:min(82dvh,680px)!important;
    overflow-y:auto!important;
    padding:14px!important;
    border-radius:18px!important;
    box-shadow:0 24px 60px rgba(0,0,0,.46)!important;
  }
}
@media(max-width:640px){
  html.display-settings-open,
  html.display-settings-open body{overflow:hidden!important}
  .display-settings-panel{
    inset:auto 8px 8px 8px!important;
    max-height:calc(100dvh - 16px)!important;
    padding:12px!important;
    border-radius:16px!important;
  }
}


/* =========================================================================
   Horizon Drive v38 — visual stabilization
   Compact page hero, road-safe photo crops, and road-aware mascot angle.
   ========================================================================= */
:root{--drive-page-hero-height:142px!important;--drive-page-hero-radius:17px}

/* Every desktop page hero uses the same compact height. No auto-growth escape. */
.page-head,
.dashboard-hero,
.settings-page .page-head,
.account-page .page-head,
.tools-hero,
.narrow-page .page-head,
.compact-page-head{
  height:var(--drive-page-hero-height)!important;
  min-height:var(--drive-page-hero-height)!important;
  max-height:var(--drive-page-hero-height)!important;
}
.page-head,
.dashboard-hero,
.settings-page .page-head,
.account-page .page-head,
.tools-hero{padding:12px clamp(18px,2vw,26px)!important;margin-bottom:16px!important}

.page-head-scene{object-fit:cover!important;transform:none!important;animation:none!important}
.page-head-scene[data-scene-theme="coastal-big-sur"]{object-position:75% 82%!important}
.page-head-scene[data-scene-theme="sf-bay-area"]{object-position:78% 80%!important}
.page-head-scene[data-scene-theme="la-southern-california"]{object-position:74% 80%!important}
.page-head-scene[data-scene-theme="desert"]{object-position:76% 80%!important}
.page-head-scene[data-scene-theme="redwoods"]{object-position:78% 82%!important}
.page-head-scene[data-scene-theme="mountain"]{object-position:76% 72%!important}

/* Preserve the placement model that already worked; use the correct source angle. */
.page-head-mascot-img{
  width:clamp(108px,8.6vw,148px)!important;
  max-height:calc(var(--drive-page-hero-height) - 6px)!important;
  bottom:-2px!important;
  filter:none!important;
  box-shadow:none!important;
  transform:none!important;
  image-rendering:auto!important;
}
.page-head-mascot-slot[data-mascot-mode="between-content"] .page-head-mascot-img{right:50%!important;transform:translateX(50%)!important}
.page-head-mascot-prop{display:none!important}

@media(max-width:900px){
  :root{--drive-page-hero-height:132px!important}
  .page-head,.dashboard-hero,.settings-page .page-head,.account-page .page-head,.tools-hero,.narrow-page .page-head,.compact-page-head{
    height:var(--drive-page-hero-height)!important;min-height:var(--drive-page-hero-height)!important;max-height:var(--drive-page-hero-height)!important
  }
  .page-head-scene{object-position:82% 72%!important}
  .page-head-mascot-img{width:clamp(94px,14vw,124px)!important;max-height:calc(var(--drive-page-hero-height) - 5px)!important}
}

@media(max-width:640px){
  :root{--drive-page-hero-height:126px!important}
  .page-head,.dashboard-hero,.settings-page .page-head,.account-page .page-head,.tools-hero,.narrow-page .page-head,.compact-page-head{
    height:var(--drive-page-hero-height)!important;min-height:var(--drive-page-hero-height)!important;max-height:var(--drive-page-hero-height)!important;
    grid-template-columns:minmax(0,1fr) clamp(86px,27vw,108px)!important;grid-template-rows:1fr!important;padding:10px 12px!important
  }
  .page-head-copy,.page-head>div.page-head-copy{grid-column:1!important;grid-row:1!important;max-width:none!important}
  .page-head-mascot-slot{grid-column:2!important;grid-row:1!important}
  .page-head-actions{grid-column:1!important;grid-row:1!important;align-self:end!important;justify-content:flex-start!important;margin:0!important}
  .page-head-scene{object-position:86% center!important}
  .page-head-mascot-img{width:clamp(78px,24vw,102px)!important;right:0!important;bottom:-1px!important;max-height:calc(var(--drive-page-hero-height) - 4px)!important}
  .page-head h1{font-size:clamp(1.42rem,6.7vw,1.78rem)!important}
  .page-head p,.page-head .muted{font-size:.78rem!important;line-height:1.18!important}
  .page-head .eyebrow{font-size:.63rem!important}
}

/* Keep Personalize usable on narrow/phone viewports. */
.display-settings-panel{z-index:2147483000!important;position:fixed!important;max-height:calc(100dvh - 18px)!important;overflow-y:auto!important}
@media(max-width:900px){.display-settings-panel{top:auto!important;right:8px!important;bottom:8px!important;left:8px!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 16px)!important}}


/* v38 Searches: return the CTA to the copy side so the road/right lane belongs
   to the mascot, matching the original Drive composition. */
.dashboard-hero{
  grid-template-columns:minmax(0,1fr) minmax(var(--drive-page-hero-mascot-track),30%) 0!important;
}
.dashboard-hero .page-head-copy{align-self:start!important}
.dashboard-hero .page-head-actions{
  grid-column:1!important;
  grid-row:1!important;
  justify-content:flex-start!important;
  align-self:end!important;
  margin:0!important;
}
.dashboard-hero .page-head-action{font-size:.82rem!important;padding:8px 12px!important;min-height:0!important}
@media(max-width:640px){
  .dashboard-hero{grid-template-columns:minmax(0,1fr) clamp(86px,27vw,108px)!important}
  .dashboard-hero .page-head-copy{max-width:100%!important}
  .dashboard-hero .page-head-actions{grid-column:1!important;align-self:end!important}
  .dashboard-hero .page-head-action{font-size:.72rem!important;padding:6px 9px!important}
}


/* ==========================================================================
   Horizon Drive v39 — auth flow refinement
   Login is intentionally unique. Auth utility pages are mascot-only.
   Regular app page heroes continue using the shared compact hero template.
   ========================================================================== */

/* LOGIN / SIGNUP — unique desktop landing composition */
body:has(.signin-landing) .shell{
  max-width:1320px!important;
  padding-top:18px!important;
  padding-bottom:24px!important;
}
.signin-shell.signin-landing{
  width:min(100%,1260px)!important;
  min-height:clamp(520px,calc(100dvh - 190px),690px)!important;
  margin:8px auto!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr)!important;
  align-items:stretch!important;
  overflow:hidden!important;
  border:1px solid var(--line)!important;
  border-radius:22px!important;
  background:var(--paper)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.18)!important;
  isolation:isolate!important;
}
.signin-landing .signin-landing-visual{
  grid-column:1!important;
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  min-height:520px!important;
  overflow:hidden!important;
  background:#0b1d34!important;
}
.signin-landing .signin-scene-img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:72% center!important;
}
.signin-landing .signin-visual-overlay{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:linear-gradient(90deg,rgba(4,17,31,.88) 0%,rgba(4,17,31,.62) 35%,rgba(4,17,31,.18) 68%,rgba(4,17,31,.03) 100%)!important;
}
.signin-landing .signin-brand-copy{
  position:absolute!important;
  z-index:3!important;
  top:36px!important;
  left:36px!important;
  width:min(520px,66%)!important;
  padding:0!important;
  color:#fff!important;
}
.signin-landing .signin-brand-copy h1{
  margin:6px 0 9px!important;
  max-width:10ch!important;
  color:#fff!important;
  font-size:clamp(2.45rem,4.6vw,4.4rem)!important;
  line-height:.98!important;
  letter-spacing:-.045em!important;
}
.signin-landing .signin-brand-copy .eyebrow{color:#8bc7ff!important}
.signin-landing .hero-tagline{
  margin:0!important;
  max-width:34rem!important;
  color:#fff!important;
  font-size:1.04rem!important;
  text-shadow:0 1px 8px rgba(0,0,0,.35)!important;
}
.signin-landing .signin-landing-form{
  grid-column:2!important;
  position:relative!important;
  z-index:5!important;
  display:grid!important;
  place-items:center!important;
  padding:34px clamp(26px,3vw,42px)!important;
  background:var(--paper)!important;
}
.signin-landing .signin-landing-form .login-card{
  width:100%!important;
  max-width:440px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.signin-landing .signin-landing-form .login-card h2{
  margin:0 0 6px!important;
  font-size:2rem!important;
}
.signin-landing .signin-landing-form .stack{margin-top:18px!important}

/* Login mascot lives only in the scenic panel and is grounded low/right. */
.signin-landing .page-head-mascot-slot{
  position:absolute!important;
  z-index:4!important;
  right:3%!important;
  bottom:2%!important;
  width:clamp(190px,27vw,330px)!important;
  height:48%!important;
  pointer-events:none!important;
}
.signin-landing .page-head-mascot-img{
  display:block!important;
  position:absolute!important;
  right:0!important;
  bottom:0!important;
  width:min(100%,310px)!important;
  height:auto!important;
  max-height:100%!important;
  object-fit:contain!important;
  filter:none!important;
  box-shadow:none!important;
}

/* AUTH UTILITY PAGES — intentionally no scenic hero. */
.auth-utility-shell{
  width:min(100%,720px)!important;
  margin:clamp(24px,5vh,56px) auto!important;
  display:grid!important;
  justify-items:center!important;
  gap:14px!important;
  text-align:center!important;
}
.auth-utility-mascot{
  width:100%!important;
  display:grid!important;
  place-items:center!important;
}
.auth-utility-mascot-img{
  display:block!important;
  width:clamp(150px,20vw,220px)!important;
  max-width:72vw!important;
  height:auto!important;
  margin:0 auto!important;
  object-fit:contain!important;
  filter:none!important;
  box-shadow:none!important;
}
.auth-utility-copy{max-width:650px!important}
.auth-utility-copy h1{
  margin:4px 0 8px!important;
  font-size:clamp(2rem,4vw,2.8rem)!important;
  line-height:1.04!important;
}
.auth-utility-copy p{margin:0!important;line-height:1.5!important}
.auth-utility-card{
  width:100%!important;
  max-width:620px!important;
  margin:4px auto 0!important;
}
.waiting-card.auth-utility-card{
  max-width:660px!important;
  padding:30px!important;
}
.waiting-card .auth-utility-mascot{margin-bottom:2px!important}
.waiting-card .auth-utility-mascot-img{width:clamp(145px,18vw,205px)!important}

/* Regular app page heroes: do not inherit Login's special layout. */
.page-head,
.dashboard-hero,
.settings-page .page-head,
.account-page .page-head,
.tools-hero{
  border-radius:var(--drive-page-hero-radius)!important;
}

/* Tablet / phone Login layout: scenic panel above, working form below. */
@media(max-width:820px){
  .signin-shell.signin-landing{
    display:block!important;
    min-height:0!important;
    border-radius:19px!important;
  }
  .signin-landing .signin-landing-visual{
    height:330px!important;
    min-height:330px!important;
  }
  .signin-landing .signin-scene-img{object-position:76% center!important}
  .signin-landing .signin-brand-copy{
    top:24px!important;
    left:24px!important;
    width:64%!important;
  }
  .signin-landing .signin-brand-copy h1{
    font-size:clamp(2.15rem,7.5vw,3.3rem)!important;
  }
  .signin-landing .page-head-mascot-slot{
    width:clamp(150px,36vw,235px)!important;
    height:54%!important;
    right:2%!important;
    bottom:1%!important;
  }
  .signin-landing .signin-landing-form{
    display:block!important;
    padding:24px!important;
  }
  .signin-landing .signin-landing-form .login-card{max-width:none!important}
}
@media(max-width:520px){
  body:has(.signin-landing) .shell{padding-top:10px!important}
  .signin-shell.signin-landing{margin:0 auto!important;border-radius:16px!important}
  .signin-landing .signin-landing-visual{
    height:270px!important;
    min-height:270px!important;
  }
  .signin-landing .signin-scene-img{object-position:79% center!important}
  .signin-landing .signin-brand-copy{
    top:18px!important;
    left:18px!important;
    width:62%!important;
  }
  .signin-landing .signin-brand-copy h1{
    font-size:clamp(1.8rem,10vw,2.55rem)!important;
    max-width:8ch!important;
  }
  .signin-landing .hero-tagline{font-size:.88rem!important}
  .signin-landing .page-head-mascot-slot{
    width:132px!important;
    height:50%!important;
    right:1%!important;
  }
  .signin-landing .signin-landing-form{padding:20px 18px 22px!important}
  .auth-utility-shell{margin:22px auto!important;gap:11px!important}
  .auth-utility-mascot-img{width:150px!important}
  .auth-utility-card{padding:22px!important}
}

/* Dark mode support for the unique auth layouts. */
html[data-theme="dark"] .signin-landing .signin-landing-form{background:var(--paper)!important}
html[data-theme="dark"] .auth-utility-card{background:var(--paper)!important}

/* ========================================================================
   Horizon Drive v40 — mascot source repair + compact auth/login pass
   ======================================================================== */

/* Keep the header lockup vector/text based and avoid transformed text rendering,
   which can look soft at browser zoom levels. */
.horizon-wordmark-top{
  transform:none!important;
  letter-spacing:.015em!important;
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  color:var(--ink)!important;
  -webkit-text-fill-color:currentColor!important;
  text-rendering:geometricPrecision!important;
}
html[data-theme="dark"] .horizon-wordmark-top{color:#dcecff!important}
.horizon-wordmark-bottom{text-rendering:geometricPrecision!important}
.wordmark-mark{image-rendering:auto!important}

/* The replacement mascot masters are native 1000px transparent artwork.
   They are deliberately displayed smaller; CSS never enlarges them. */
.page-head-mascot-img,
.auth-utility-mascot-img,
.signin-landing .page-head-mascot-img{
  image-rendering:auto!important;
  filter:none!important;
  box-shadow:none!important;
}

/* Regular page heroes: smaller car, lower in the lane, less pasted-on. */
.page-head-mascot-img{
  width:clamp(84px,7vw,112px)!important;
  max-height:calc(var(--drive-page-hero-height) - 12px)!important;
  right:5%!important;
  bottom:-5px!important;
}

/* Today's Coastal family: all usable roads are kept on the right. Saved Cars
   is mirrored because its approved master road is on the left; no text/signage
   is embedded in the photo, so the mirror is visually safe. */
.page-head-scene[data-scene-theme="coastal-big-sur"][data-scene-page="saved"]{
  transform:scaleX(-1)!important;
  object-position:50% 82%!important;
}
.page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="searches"] .page-head-mascot-img{right:3%!important;bottom:-6px!important}
.page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="saved"] .page-head-mascot-img{right:4%!important;bottom:-6px!important}
.page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="alerts"] .page-head-mascot-img{right:1%!important;bottom:-7px!important}
.page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="account"] .page-head-mascot-img{right:0!important;bottom:-7px!important}
.page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="tools"] .page-head-mascot-img{right:0!important;bottom:-7px!important}

/* LOGIN / SIGNUP: still unique, but no longer a near-full-screen billboard. */
body:has(.signin-landing) .shell{
  max-width:1180px!important;
  padding-top:14px!important;
  padding-bottom:18px!important;
}
.signin-shell.signin-landing{
  width:min(100%,1120px)!important;
  min-height:0!important;
  height:470px!important;
  max-height:470px!important;
  margin:6px auto!important;
  grid-template-columns:minmax(0,1.55fr) minmax(330px,.72fr)!important;
  border-radius:18px!important;
  box-shadow:0 16px 42px rgba(0,0,0,.17)!important;
}
.signin-landing .signin-landing-visual{
  height:470px!important;
  min-height:470px!important;
}
.signin-landing .signin-scene-img{
  object-position:73% center!important;
}
.signin-landing .signin-brand-copy{
  top:28px!important;
  left:30px!important;
  width:min(470px,64%)!important;
}
.signin-landing .signin-brand-copy h1{
  font-size:clamp(2.15rem,3.7vw,3.45rem)!important;
  max-width:10ch!important;
  line-height:.98!important;
}
.signin-landing .hero-tagline{font-size:.94rem!important}
.signin-landing .signin-landing-form{
  padding:28px 30px!important;
}
.signin-landing .signin-landing-form .login-card{max-width:390px!important}
.signin-landing .signin-landing-form .login-card h2{font-size:1.72rem!important}
.signin-landing .signin-landing-form .stack{margin-top:14px!important}
.signin-landing .page-head-mascot-slot{
  right:3%!important;
  bottom:1%!important;
  width:190px!important;
  height:170px!important;
}
.signin-landing .page-head-mascot-img{
  width:178px!important;
  max-width:178px!important;
  max-height:150px!important;
  right:0!important;
  bottom:0!important;
}

/* AUTH UTILITY PAGES: compact message cards. The mascot is a brand accent,
   not the dominant content. */
.waiting-wrap{
  min-height:0!important;
  padding:24px 0 30px!important;
  display:grid!important;
  place-items:start center!important;
}
.auth-utility-shell{
  width:min(100%,570px)!important;
  margin:24px auto 30px!important;
  gap:10px!important;
}
.auth-utility-mascot-img{
  width:118px!important;
  max-width:118px!important;
  height:auto!important;
}
.auth-utility-copy{max-width:540px!important}
.auth-utility-copy h1{font-size:clamp(1.7rem,3vw,2.15rem)!important}
.auth-utility-card{
  width:100%!important;
  max-width:540px!important;
  margin:2px auto 0!important;
  padding:22px!important;
}
.waiting-card.auth-utility-card{
  width:min(100%,560px)!important;
  max-width:560px!important;
  padding:22px 26px!important;
}
.waiting-card .auth-utility-mascot{margin-bottom:0!important}
.waiting-card .auth-utility-mascot-img{
  width:112px!important;
  max-width:112px!important;
}
.waiting-card .mail-circle{
  width:48px!important;
  height:48px!important;
  margin:4px auto 12px!important;
  border-radius:15px!important;
  font-size:24px!important;
}
.waiting-card h1{
  margin:5px 0 8px!important;
  font-size:clamp(1.8rem,3.5vw,2.2rem)!important;
}
.waiting-card p{margin-top:8px!important;margin-bottom:8px!important;line-height:1.45!important}
.waiting-indicator{margin-top:11px!important}
.waiting-actions{margin-top:15px!important}

@media(max-width:900px){
  .page-head-mascot-img{width:clamp(76px,12vw,100px)!important;bottom:-4px!important}
}

@media(max-width:820px){
  .signin-shell.signin-landing{
    height:auto!important;
    max-height:none!important;
    width:min(100%,720px)!important;
  }
  .signin-landing .signin-landing-visual{
    height:255px!important;
    min-height:255px!important;
  }
  .signin-landing .signin-brand-copy{
    top:20px!important;
    left:21px!important;
    width:62%!important;
  }
  .signin-landing .signin-brand-copy h1{font-size:clamp(1.85rem,7vw,2.75rem)!important}
  .signin-landing .page-head-mascot-slot{
    width:145px!important;
    height:130px!important;
    right:2%!important;
  }
  .signin-landing .page-head-mascot-img{
    width:136px!important;
    max-width:136px!important;
    max-height:118px!important;
  }
  .signin-landing .signin-landing-form{padding:21px 22px!important}
}

@media(max-width:640px){
  .page-head-mascot-img{
    width:clamp(70px,21vw,88px)!important;
    right:0!important;
    bottom:-3px!important;
  }
  .signin-landing .signin-landing-visual{
    height:225px!important;
    min-height:225px!important;
  }
  .signin-landing .signin-brand-copy{width:64%!important}
  .signin-landing .hero-tagline{font-size:.80rem!important}
  .signin-landing .page-head-mascot-slot{width:118px!important;height:105px!important}
  .signin-landing .page-head-mascot-img{width:112px!important;max-width:112px!important;max-height:98px!important}
  .auth-utility-shell{width:min(100%,520px)!important;margin:18px auto 24px!important}
  .auth-utility-mascot-img,.waiting-card .auth-utility-mascot-img{width:96px!important;max-width:96px!important}
  .waiting-wrap{padding:18px 0 24px!important}
  .waiting-card.auth-utility-card{padding:20px!important}
}

/* ==========================================================================
   Horizon Drive v41 — screenshot-correction pass
   65px chrome, 142px shared internal heroes, road-grounded mascot placement,
   compact Login/Auth, and consistent full-width hero shells.
   ========================================================================== */
:root{--family-header-height:65px!important;--drive-page-hero-height:142px!important}

@media(min-width:701px){
  .site-header{
    box-sizing:border-box!important;width:100%!important;height:65px!important;
    min-height:65px!important;max-height:65px!important;padding:4px clamp(16px,2.4vw,36px)!important
  }
  .site-footer{
    box-sizing:border-box!important;width:100%!important;height:65px!important;
    min-height:65px!important;max-height:65px!important;margin:0!important;
    padding:5px clamp(16px,2.4vw,36px)!important;overflow:hidden!important
  }
  .site-footer-brand img{width:27px!important;height:27px!important;flex-basis:27px!important}
  .site-footer-brand small{font-size:.68rem!important}.site-footer nav{gap:4px 14px!important}
}

.settings-page,.account-page{width:100%!important;max-width:none!important}
.settings-page>.settings-section,.account-page>.settings-section{
  width:min(100%,1080px)!important;margin-left:auto!important;margin-right:auto!important
}

.page-head,.dashboard-hero,.settings-page .page-head,.account-page .page-head,.tools-hero,.compact-page-head{
  box-sizing:border-box!important;position:relative!important;isolation:isolate!important;overflow:hidden!important;
  width:100%!important;height:142px!important;min-height:142px!important;max-height:142px!important;
  margin:0 0 16px!important;padding:18px 26px!important;display:flex!important;align-items:center!important;
  justify-content:flex-start!important;border-radius:17px!important;background:#0b1d34!important
}
.page-head .page-head-scene{
  display:block!important;position:absolute!important;inset:0!important;z-index:0!important;
  width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;
  object-position:center center!important;opacity:1!important;filter:none!important;transform:none!important;animation:none!important
}
.page-head::after{
  content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:1!important;
  pointer-events:none!important;opacity:1!important;
  background:linear-gradient(90deg,rgba(4,17,31,.84) 0%,rgba(4,17,31,.65) 26%,rgba(4,17,31,.28) 46%,rgba(4,17,31,.07) 62%,rgba(4,17,31,0) 78%)!important
}
.page-head-copy,.page-head>div.page-head-copy,.dashboard-hero .page-head-copy{
  position:relative!important;z-index:3!important;width:min(52%,670px)!important;max-width:670px!important;
  min-width:0!important;align-self:center!important;margin:0!important
}
.page-head .eyebrow{margin:0 0 3px!important;font-size:.70rem!important;line-height:1.1!important}
.page-head h1{margin:0 0 4px!important;font-size:clamp(1.85rem,2.4vw,2.35rem)!important;line-height:1!important}
.page-head p,.page-head .muted{margin:0!important;font-size:.92rem!important;line-height:1.25!important}

.page-head-actions,.dashboard-hero .page-head-actions{
  position:absolute!important;z-index:5!important;top:17px!important;right:22px!important;left:auto!important;bottom:auto!important;
  display:flex!important;align-items:center!important;justify-content:flex-end!important;margin:0!important
}
.dashboard-hero .page-head-action{min-height:36px!important;padding:8px 13px!important;font-size:.80rem!important}

.page-head>.page-head-mascot-slot,.dashboard-hero>.page-head-mascot-slot,
.settings-page .page-head>.page-head-mascot-slot,.account-page .page-head>.page-head-mascot-slot,
.tools-hero>.page-head-mascot-slot{
  position:absolute!important;inset:0!important;z-index:4!important;width:100%!important;height:100%!important;
  pointer-events:none!important;overflow:visible!important
}
.page-head .page-head-mascot-img{
  display:block!important;position:absolute!important;width:96px!important;max-width:96px!important;height:auto!important;
  max-height:116px!important;right:9%!important;bottom:1px!important;object-fit:contain!important;
  image-rendering:auto!important;filter:none!important;box-shadow:none!important;transform:none!important
}

/* Coastal / Big Sur tuned to the supplied screenshots. */
.page-head-scene[data-scene-theme="coastal-big-sur"][data-scene-page="searches"]{object-position:center 58%!important}
.page-head-scene[data-scene-theme="coastal-big-sur"][data-scene-page="saved"]{object-position:center 54%!important;transform:none!important}
.page-head-scene[data-scene-theme="coastal-big-sur"][data-scene-page="alerts"]{object-position:center 58%!important}
.page-head-scene[data-scene-theme="coastal-big-sur"][data-scene-page="account"]{object-position:center 58%!important}
.page-head-scene[data-scene-theme="coastal-big-sur"][data-scene-page="tools"]{object-position:center 58%!important}

.page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="searches"] .page-head-mascot-img{
  width:94px!important;max-width:94px!important;right:13.5%!important;bottom:1px!important}
.page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="saved"] .page-head-mascot-img{
  width:92px!important;max-width:92px!important;right:12.5%!important;bottom:0!important}
.page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="alerts"] .page-head-mascot-img{
  width:90px!important;max-width:90px!important;right:8.5%!important;bottom:0!important}
.page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="account"] .page-head-mascot-img{
  width:90px!important;max-width:90px!important;right:8.5%!important;bottom:0!important}
.page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="tools"] .page-head-mascot-img{
  width:90px!important;max-width:90px!important;right:8.5%!important;bottom:0!important}

/* Remaining daily families: stable road-biased placement. */
.page-head-mascot-slot[data-mascot-theme="sf-bay-area"] .page-head-mascot-img{right:9%!important;bottom:0!important}
.page-head-mascot-slot[data-mascot-theme="la-southern-california"] .page-head-mascot-img{right:10%!important;bottom:0!important}
.page-head-mascot-slot[data-mascot-theme="desert"] .page-head-mascot-img{right:10%!important;bottom:0!important}
.page-head-mascot-slot[data-mascot-theme="redwoods"] .page-head-mascot-img{right:9%!important;bottom:0!important}
.page-head-mascot-slot[data-mascot-theme="mountain"] .page-head-mascot-img{right:9%!important;bottom:0!important}

/* Login is intentionally different, but compact rather than billboard-sized. */
body:has(.signin-landing) .shell{max-width:1100px!important;padding-top:14px!important;padding-bottom:16px!important}
.signin-shell.signin-landing{
  box-sizing:border-box!important;width:min(100%,1040px)!important;height:400px!important;min-height:400px!important;
  max-height:400px!important;margin:4px auto!important;grid-template-columns:minmax(0,1.55fr) 350px!important;
  border-radius:18px!important;overflow:hidden!important
}
.signin-landing .signin-landing-visual{position:relative!important;height:400px!important;min-height:400px!important}
.signin-landing .signin-scene-img{object-fit:cover!important;object-position:74% 58%!important}
.signin-landing .signin-brand-copy{top:25px!important;left:27px!important;width:min(430px,62%)!important}
.signin-landing .signin-brand-copy h1{margin:5px 0 8px!important;font-size:clamp(2rem,3.2vw,3rem)!important;line-height:.98!important}
.signin-landing .hero-tagline{font-size:.90rem!important}
.signin-landing .signin-landing-form{padding:24px 27px!important}.signin-landing .signin-landing-form .login-card{max-width:330px!important}
.signin-landing .signin-landing-form .login-card h2{font-size:1.58rem!important}.signin-landing .signin-landing-form .stack{margin-top:12px!important}
.signin-landing .page-head-mascot-slot{
  position:absolute!important;z-index:4!important;inset:auto .8% 3% auto!important;width:132px!important;height:110px!important
}
.signin-landing .page-head-mascot-img{
  display:block!important;position:absolute!important;right:0!important;bottom:0!important;width:122px!important;
  max-width:122px!important;max-height:105px!important;height:auto!important;filter:none!important;
  box-shadow:none!important;image-rendering:auto!important
}

/* Mascot-only auth utility states stay compact. */
.waiting-wrap{min-height:0!important;padding:18px 0 22px!important}
.auth-utility-shell{width:min(100%,500px)!important;margin:18px auto 24px!important;gap:8px!important}
.auth-utility-mascot-img{width:88px!important;max-width:88px!important}
.auth-utility-card{max-width:480px!important;padding:20px!important}
.waiting-card.auth-utility-card{width:min(100%,500px)!important;max-width:500px!important;padding:20px 24px!important}
.waiting-card .auth-utility-mascot-img{width:84px!important;max-width:84px!important}
.waiting-card .mail-circle{width:44px!important;height:44px!important;margin:2px auto 10px!important;font-size:21px!important}
.waiting-card h1{font-size:1.85rem!important}.waiting-card p{font-size:.91rem!important}

@media(max-width:900px){
  .page-head,.dashboard-hero,.settings-page .page-head,.account-page .page-head,.tools-hero,.compact-page-head{
    height:132px!important;min-height:132px!important;max-height:132px!important;padding:15px 18px!important}
  .page-head-copy,.page-head>div.page-head-copy,.dashboard-hero .page-head-copy{width:min(64%,560px)!important}
  .page-head .page-head-mascot-img{width:82px!important;max-width:82px!important;right:7%!important}
  .page-head-actions,.dashboard-hero .page-head-actions{top:12px!important;right:14px!important}
}
@media(max-width:640px){
  .page-head,.dashboard-hero,.settings-page .page-head,.account-page .page-head,.tools-hero,.compact-page-head{
    height:126px!important;min-height:126px!important;max-height:126px!important;padding:13px 14px!important}
  .page-head-copy,.page-head>div.page-head-copy,.dashboard-hero .page-head-copy{width:68%!important}
  .page-head h1{font-size:1.55rem!important}.page-head p,.page-head .muted{font-size:.78rem!important}
  .page-head .page-head-mascot-img{width:72px!important;max-width:72px!important;right:3%!important;bottom:0!important}
  .dashboard-hero .page-head-actions{top:auto!important;right:auto!important;left:14px!important;bottom:10px!important}
  .dashboard-hero .page-head-copy{align-self:flex-start!important}.dashboard-hero .page-head-copy p{display:none!important}
  .signin-shell.signin-landing{width:min(100%,620px)!important;height:auto!important;min-height:0!important;max-height:none!important}
  .signin-landing .signin-landing-visual{height:215px!important;min-height:215px!important}
  .signin-landing .signin-brand-copy{top:17px!important;left:17px!important;width:64%!important}.signin-landing .signin-brand-copy h1{font-size:1.9rem!important}
  .signin-landing .page-head-mascot-slot{width:100px!important;height:86px!important;right:1%!important}
  .signin-landing .page-head-mascot-img{width:94px!important;max-width:94px!important;max-height:82px!important}
  .signin-landing .signin-landing-form{padding:19px 18px 21px!important}
}

/* v41 mobile road/collision correction */
@media(max-width:640px){
  .page-head-scene[data-scene-theme="coastal-big-sur"][data-scene-page="searches"]{object-position:76% center!important}
  .page-head-scene[data-scene-theme="coastal-big-sur"][data-scene-page="saved"]{object-position:76% center!important}
  .page-head-scene[data-scene-theme="coastal-big-sur"][data-scene-page="alerts"]{object-position:78% center!important}
  .page-head-scene[data-scene-theme="coastal-big-sur"][data-scene-page="account"]{object-position:84% center!important}
  .page-head-scene[data-scene-theme="coastal-big-sur"][data-scene-page="tools"]{object-position:84% center!important}

  .page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="searches"] .page-head-mascot-img,
  .page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="saved"] .page-head-mascot-img,
  .page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="alerts"] .page-head-mascot-img,
  .page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="account"] .page-head-mascot-img,
  .page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="tools"] .page-head-mascot-img{
    width:62px!important;max-width:62px!important;right:3%!important;bottom:0!important
  }
  .dashboard-hero .page-head-actions{
    top:10px!important;right:10px!important;left:auto!important;bottom:auto!important
  }
  .dashboard-hero .page-head-action{font-size:.70rem!important;padding:6px 9px!important;min-height:30px!important}
  .dashboard-hero .page-head-copy{width:54%!important}
}

/* v41 final Searches action anchoring: child selector beats legacy relative-grid rule. */
.dashboard-hero > .page-head-actions{
  position:absolute!important;
  top:17px!important;
  right:22px!important;
  bottom:auto!important;
  left:auto!important;
  width:auto!important;
  height:auto!important;
  align-self:auto!important;
  justify-self:auto!important;
}
@media(max-width:900px){
  .dashboard-hero > .page-head-actions{top:12px!important;right:14px!important;bottom:auto!important;left:auto!important}
}
@media(max-width:640px){
  .dashboard-hero > .page-head-actions{top:10px!important;right:10px!important;bottom:auto!important;left:auto!important}
}


/* ==========================================================================
   Horizon Drive v43 — page-by-page road placement correction
   The mascot is anchored to explicit pavement coordinates per hero. These
   selectors intentionally override every earlier generic mascot rule.
   ========================================================================== */

/* Full-hero coordinate plane. */
.page-head > .page-head-mascot-slot,
.dashboard-hero > .page-head-mascot-slot,
.settings-page .page-head > .page-head-mascot-slot,
.account-page .page-head > .page-head-mascot-slot,
.tools-hero > .page-head-mascot-slot{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  pointer-events:none!important;
  z-index:4!important;
}

.page-head .page-head-mascot-img{
  position:absolute!important;
  right:auto!important;
  bottom:auto!important;
  width:88px!important;
  max-width:88px!important;
  max-height:112px!important;
  height:auto!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:center center!important;
  object-fit:contain!important;
  filter:none!important;
  box-shadow:none!important;
  image-rendering:auto!important;
}

/* Coastal / Big Sur — positions taken from the supplied live screenshots.
   Every coordinate below lands on visible asphalt, not scenery/guardrail. */
.page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="searches"] .page-head-mascot-img{
  left:84.5%!important;top:68%!important;width:86px!important;max-width:86px!important;
}
.page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="saved"] .page-head-mascot-img{
  left:91.5%!important;top:69%!important;width:86px!important;max-width:86px!important;
}
.page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="alerts"] .page-head-mascot-img{
  left:89.5%!important;top:68%!important;width:84px!important;max-width:84px!important;
}
.page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="account"] .page-head-mascot-img{
  left:90%!important;top:66%!important;width:84px!important;max-width:84px!important;
}
.page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="tools"] .page-head-mascot-img{
  left:90%!important;top:64%!important;width:84px!important;max-width:84px!important;
}

/* Login is its own layout. Move the car off the bottom border and onto the
   visible lane in the scenic panel. */
.signin-landing .page-head-mascot-slot{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  z-index:4!important;
  pointer-events:none!important;
}
.signin-landing .page-head-mascot-img{
  position:absolute!important;
  left:89%!important;
  top:64%!important;
  right:auto!important;
  bottom:auto!important;
  width:88px!important;
  max-width:88px!important;
  max-height:82px!important;
  height:auto!important;
  transform:translate(-50%,-50%)!important;
  object-fit:contain!important;
  filter:none!important;
  box-shadow:none!important;
  image-rendering:auto!important;
}

/* Tablet keeps the same road targets but scales the car down. */
@media(max-width:900px){
  .page-head .page-head-mascot-img{width:76px!important;max-width:76px!important}
  .page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="searches"] .page-head-mascot-img{left:82%!important;top:69%!important}
  .page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="saved"] .page-head-mascot-img{left:91%!important;top:69%!important}
  .page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="alerts"] .page-head-mascot-img{left:89%!important;top:68%!important}
  .page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="account"] .page-head-mascot-img{left:89%!important;top:66%!important}
  .page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="tools"] .page-head-mascot-img{left:89%!important;top:64%!important}
}

/* Phone: preserve road alignment rather than snapping every mascot to 3% right. */
@media(max-width:640px){
  .page-head .page-head-mascot-img{width:60px!important;max-width:60px!important;max-height:76px!important}
  .page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="searches"] .page-head-mascot-img{left:80%!important;top:69%!important}
  .page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="saved"] .page-head-mascot-img{left:89%!important;top:69%!important}
  .page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="alerts"] .page-head-mascot-img{left:87%!important;top:68%!important}
  .page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="account"] .page-head-mascot-img{left:88%!important;top:66%!important}
  .page-head-mascot-slot[data-mascot-theme="coastal-big-sur"][data-mascot-page="tools"] .page-head-mascot-img{left:88%!important;top:64%!important}
  .signin-landing .page-head-mascot-img{left:88%!important;top:64%!important;width:72px!important;max-width:72px!important;max-height:66px!important}
}


/* ==========================================================================
   Horizon Drive v45 — manual scenery-family tester
   ========================================================================== */
.scene-family-fieldset{grid-column:1/-1!important}
.scene-family-select{
  width:100%!important;min-height:38px!important;padding:7px 34px 7px 10px!important;
  border:1px solid var(--line)!important;border-radius:9px!important;
  background:var(--paper)!important;color:var(--ink)!important;font:inherit!important;
  font-size:.78rem!important;font-weight:760!important;cursor:pointer!important
}
.scene-family-select:focus{outline:2px solid color-mix(in srgb,var(--brand2) 48%,transparent)!important;outline-offset:1px!important}
.scene-family-note{display:block!important;margin-top:5px!important;color:var(--muted)!important;font-size:.65rem!important;line-height:1.25!important}
@media(max-width:640px){
  .scene-family-select{min-height:36px!important;font-size:.74rem!important}
  .scene-family-note{font-size:.62rem!important}
}

/* ========================================================================
   Horizon Drive display settings final fit/compact pass — 2026-08-22
   UI-only. Does not touch hero/editor/calibration geometry.
   ======================================================================== */
.display-settings-panel{
  position:fixed!important;
  top:72px!important;
  right:16px!important;
  bottom:12px!important;
  left:auto!important;
  width:min(560px,calc(100vw - 32px))!important;
  height:auto!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
  padding:11px!important;
}
.display-settings-panel::-webkit-scrollbar{display:block!important;width:8px!important}
.display-settings-panel::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 44%,transparent)!important;border-radius:999px!important}
.display-settings-heading{
  position:sticky!important;
  top:-11px!important;
  z-index:10!important;
  margin:-11px -11px 0!important;
  padding:11px!important;
  background:var(--paper)!important;
  border-bottom:1px solid var(--line)!important;
}
.personalize-compact-grid{
  gap:7px 8px!important;
  margin-top:8px!important;
}
.personalize-compact-grid fieldset{
  padding:7px 8px!important;
  border-radius:9px!important;
}
.display-settings-panel legend{margin-bottom:4px!important}
.settings-segments{gap:4px!important}
.settings-segments button,.personalize-palette-grid button{
  min-height:31px!important;
  padding:5px 6px!important;
}

/* Scenery theme: compact full-width selector; no helper sentence. */
.scene-family-fieldset{
  grid-column:1/-1!important;
  padding:6px 8px!important;
}
.scene-family-fieldset legend{margin-bottom:3px!important}
.scene-family-select{
  min-height:32px!important;
  height:32px!important;
  padding:4px 8px!important;
  font-size:.72rem!important;
  line-height:1.1!important;
}
.scene-family-note{display:none!important}
.display-settings-status{margin-top:6px!important}

@media(max-width:900px){
  .display-settings-panel{
    top:68px!important;
    right:8px!important;
    bottom:8px!important;
    left:8px!important;
    width:auto!important;
    max-width:none!important;
    padding:10px!important;
  }
  .display-settings-heading{top:-10px!important;margin:-10px -10px 0!important;padding:10px!important}
  .personalize-compact-grid{gap:6px!important}
  .personalize-compact-grid fieldset{padding:6px 7px!important}
}
@media(max-width:620px){
  .display-settings-panel{
    top:8px!important;
    right:8px!important;
    bottom:8px!important;
    left:8px!important;
    width:auto!important;
    max-width:none!important;
  }
  .personalize-compact-grid{grid-template-columns:1fr!important}
  .personalize-span-2,.scene-family-fieldset{grid-column:auto!important}
  .settings-segments button,.personalize-palette-grid button{min-height:34px!important}
  .scene-family-select{height:34px!important;min-height:34px!important}
}

/* ========================================================================
   Horizon Drive Display Settings — Cruise-style compact layout
   2026-08-22. UI-only; hero/editor/calibration remain locked.
   ======================================================================== */
.display-settings-panel{
  top:72px!important;
  right:18px!important;
  bottom:auto!important;
  left:auto!important;
  width:min(720px,calc(100vw - 36px))!important;
  height:auto!important;
  max-height:calc(100dvh - 88px)!important;
  padding:12px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  border-radius:16px!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
}
.display-settings-panel::-webkit-scrollbar{display:block!important;width:7px!important}
.display-settings-panel::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 42%,transparent)!important;border-radius:999px!important}

.display-settings-heading{
  position:sticky!important;
  top:-12px!important;
  z-index:5!important;
  margin:-12px -12px 0!important;
  padding:12px 12px 9px!important;
  align-items:center!important;
  background:var(--paper)!important;
  border-bottom:1px solid var(--line)!important;
}
.display-settings-heading>div>span{display:none!important}
.display-settings-heading h2{
  margin:0!important;
  font-size:1.34rem!important;
  line-height:1.05!important;
}
.display-settings-heading>button{
  width:34px!important;
  height:34px!important;
  min-height:34px!important;
}

/* Cruise layout rhythm: the first three control groups span the panel; the
   final two are a compact two-column row. */
.personalize-compact-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:8px!important;
  margin-top:9px!important;
}
.personalize-compact-grid fieldset{
  min-width:0!important;
  margin:0!important;
  padding:8px 10px!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  background:color-mix(in srgb,var(--paper) 96%,var(--soft))!important;
}
.personalize-compact-grid>fieldset.personalize-span-2{
  grid-column:1/-1!important;
}
.display-settings-panel legend{
  margin:0 0 5px!important;
  padding:0 3px!important;
  font-size:.78rem!important;
  line-height:1.1!important;
  font-weight:820!important;
}
.settings-segments{gap:5px!important}
.settings-segments button,.personalize-palette-grid button{
  min-height:34px!important;
  padding:5px 7px!important;
  border-radius:9px!important;
  font-size:.75rem!important;
  line-height:1.08!important;
}
.text-size-choice small{font-size:.62rem!important;line-height:1!important}
.personalize-palette-grid{gap:5px!important}
.personalize-palette-grid button{min-height:34px!important}

/* Scenery is intentionally a thin horizontal row, not another large card. */
.scene-family-fieldset{
  grid-column:1/-1!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:max-content minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  margin:0!important;
  padding:7px 10px!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  background:color-mix(in srgb,var(--paper) 96%,var(--soft))!important;
}
.scene-family-fieldset label{
  margin:0!important;
  color:var(--ink)!important;
  font-size:.78rem!important;
  line-height:1!important;
  font-weight:820!important;
  white-space:nowrap!important;
}
.scene-family-select{
  width:100%!important;
  height:34px!important;
  min-height:34px!important;
  margin:0!important;
  padding:4px 32px 4px 9px!important;
  font-size:.75rem!important;
  line-height:1.05!important;
  border-radius:9px!important;
}
.scene-family-note{display:none!important}
.display-settings-status{
  min-height:0!important;
  margin:7px 2px 0!important;
  font-size:.69rem!important;
  line-height:1.2!important;
}

@media(max-width:900px){
  .display-settings-panel{
    top:68px!important;
    right:8px!important;
    bottom:auto!important;
    left:auto!important;
    width:min(680px,calc(100vw - 16px))!important;
    max-height:calc(100dvh - 76px)!important;
    padding:10px!important;
  }
  .display-settings-heading{top:-10px!important;margin:-10px -10px 0!important;padding:10px 10px 8px!important}
  .personalize-compact-grid{gap:7px!important;margin-top:8px!important}
  .personalize-compact-grid fieldset{padding:7px 8px!important}
  .scene-family-fieldset{padding:6px 8px!important}
}

@media(max-width:620px){
  .display-settings-panel{
    top:8px!important;
    right:8px!important;
    bottom:8px!important;
    left:8px!important;
    width:auto!important;
    max-width:none!important;
    max-height:none!important;
  }
  .personalize-compact-grid{grid-template-columns:1fr!important}
  .personalize-compact-grid>fieldset.personalize-span-2,
  .scene-family-fieldset{grid-column:auto!important}
  .scene-family-fieldset{grid-template-columns:1fr!important;gap:5px!important}
  .settings-segments button,.personalize-palette-grid button{min-height:34px!important}
}


/* ========================================================================
   Horizon Drive display settings extra compact pass — 2026-08-22
   Follow Cruise more closely: tighter card, tighter spacing, less vertical bulk.
   ======================================================================== */
.display-settings-panel{
  width:min(640px,calc(100vw - 28px))!important;
  max-height:calc(100dvh - 84px)!important;
  padding:10px!important;
  border-radius:14px!important;
}
.display-settings-heading{
  top:-10px!important;
  margin:-10px -10px 0!important;
  padding:10px 10px 8px!important;
  gap:10px!important;
}
.display-settings-heading h2{
  font-size:1.18rem!important;
  line-height:1.02!important;
}
.display-settings-heading>button{
  width:32px!important;
  height:32px!important;
  min-height:32px!important;
  font-size:1.1rem!important;
}
.personalize-compact-grid{
  gap:6px!important;
  margin-top:8px!important;
}
.personalize-compact-grid fieldset{
  padding:6px 8px!important;
  border-radius:11px!important;
}
.display-settings-panel legend{
  margin:0 0 4px!important;
  padding:0 2px!important;
  font-size:.74rem!important;
  line-height:1.05!important;
}
.settings-segments{gap:4px!important}
.settings-segments button,
.personalize-palette-grid button{
  min-height:32px!important;
  padding:4px 6px!important;
  border-radius:8px!important;
  font-size:.72rem!important;
  line-height:1.03!important;
}
.personalize-palette-grid{gap:4px!important}
.text-size-choice small{
  font-size:.58rem!important;
}
.scene-family-fieldset{
  gap:8px!important;
  padding:5px 8px!important;
  border-radius:11px!important;
}
.scene-family-fieldset label{
  font-size:.74rem!important;
}
.scene-family-select{
  height:32px!important;
  min-height:32px!important;
  padding:3px 28px 3px 8px!important;
  font-size:.72rem!important;
  border-radius:8px!important;
}
.display-settings-status{
  margin:5px 2px 0!important;
  font-size:.66rem!important;
  line-height:1.15!important;
}
@media(max-width:900px){
  .display-settings-panel{
    width:min(620px,calc(100vw - 16px))!important;
    max-height:calc(100dvh - 74px)!important;
    padding:9px!important;
  }
  .display-settings-heading{top:-9px!important;margin:-9px -9px 0!important;padding:9px 9px 7px!important}
  .personalize-compact-grid{gap:5px!important;margin-top:7px!important}
  .personalize-compact-grid fieldset{padding:6px 7px!important}
}
@media(max-width:620px){
  .display-settings-panel{
    inset:auto 8px 8px 8px!important;
    top:auto!important;
    width:auto!important;
    max-height:calc(100dvh - 16px)!important;
    padding:9px!important;
  }
  .display-settings-heading{top:-9px!important;margin:-9px -9px 0!important;padding:9px 9px 7px!important}
  .display-settings-heading h2{font-size:1.08rem!important}
  .personalize-compact-grid{gap:5px!important}
  .scene-family-fieldset{gap:4px!important}
}


/* ========================================================================
   Display Settings typography follows the selected site text size — 2026-08-22
   Standard remains visually the same as the compact Cruise-style layout.
   ======================================================================== */
.display-settings-panel{
  font-size:var(--body-size)!important;
}
.display-settings-heading h2{
  font-size:1.18em!important;
}
.display-settings-heading>button{
  font-size:1.1em!important;
}
.display-settings-panel legend,
.scene-family-fieldset label{
  font-size:.74em!important;
}
.settings-segments button,
.personalize-palette-grid button,
.scene-family-select{
  font-size:.72em!important;
}
.text-size-choice small{
  font-size:.58em!important;
}
.display-settings-status{
  font-size:.66em!important;
}

/* Give larger text enough vertical room without making Standard less compact. */
.settings-segments button,
.personalize-palette-grid button{
  min-height:max(32px,2em)!important;
}
.scene-family-select{
  height:max(32px,2em)!important;
  min-height:max(32px,2em)!important;
}

@media(max-width:620px){
  .display-settings-heading h2{font-size:1.08em!important}
}


/* ========================================================================
   Display Settings final micro-compact pass — 2026-08-22
   Slightly tighter than ui5 while preserving site text-size scaling.
   ======================================================================== */
.display-settings-panel{
  width:min(610px,calc(100vw - 24px))!important;
  padding:8px!important;
  border-radius:13px!important;
}
.display-settings-heading{
  top:-8px!important;
  margin:-8px -8px 0!important;
  padding:8px 8px 6px!important;
  gap:8px!important;
}
.display-settings-heading h2{
  font-size:1.13em!important;
}
.display-settings-heading>button{
  width:30px!important;
  height:30px!important;
  min-height:30px!important;
  font-size:1.02em!important;
}
.personalize-compact-grid{
  gap:5px!important;
  margin-top:6px!important;
}
.personalize-compact-grid fieldset{
  padding:5px 7px!important;
  border-radius:10px!important;
}
.display-settings-panel legend,
.scene-family-fieldset label{
  margin-bottom:3px!important;
  font-size:.72em!important;
}
.settings-segments{gap:3px!important}
.settings-segments button,
.personalize-palette-grid button{
  min-height:max(30px,1.92em)!important;
  padding:3px 5px!important;
  border-radius:8px!important;
  font-size:.70em!important;
}
.personalize-palette-grid{gap:3px!important}
.text-size-choice small{font-size:.56em!important}
.scene-family-fieldset{
  gap:7px!important;
  padding:4px 7px!important;
  border-radius:10px!important;
}
.scene-family-select{
  height:max(30px,1.92em)!important;
  min-height:max(30px,1.92em)!important;
  padding:2px 27px 2px 7px!important;
  border-radius:8px!important;
  font-size:.70em!important;
}
.display-settings-status{
  margin:4px 2px 0!important;
  font-size:.64em!important;
  line-height:1.12!important;
}
@media(max-width:900px){
  .display-settings-panel{
    width:min(600px,calc(100vw - 14px))!important;
    padding:8px!important;
  }
  .display-settings-heading{top:-8px!important;margin:-8px -8px 0!important;padding:8px 8px 6px!important}
  .personalize-compact-grid{gap:4px!important;margin-top:6px!important}
  .personalize-compact-grid fieldset{padding:5px 6px!important}
}
@media(max-width:620px){
  .display-settings-panel{
    inset:auto 7px 7px 7px!important;
    top:auto!important;
    width:auto!important;
    max-height:calc(100dvh - 14px)!important;
    padding:8px!important;
  }
  .display-settings-heading{top:-8px!important;margin:-8px -8px 0!important;padding:8px 8px 6px!important}
  .personalize-compact-grid{gap:4px!important}
}


/* ========================================================================
   Display Settings narrower width pass — 2026-08-22
   Keep the current compact layout, but make the panel less wide like Cruise.
   ======================================================================== */
.display-settings-panel{
  width:min(560px,calc(100vw - 24px))!important;
}
@media(max-width:900px){
  .display-settings-panel{
    width:min(552px,calc(100vw - 14px))!important;
  }
}


/* ========================================================================
   Display Settings Cruise-width match — 2026-08-22
   Narrow the desktop/tablet panel roughly 7% more to match Cruise.
   ======================================================================== */
.display-settings-panel{
  width:min(520px,calc(100vw - 24px))!important;
}
@media(max-width:900px){
  .display-settings-panel{
    width:min(520px,calc(100vw - 14px))!important;
  }
}
@media(max-width:620px){
  .display-settings-panel{
    width:auto!important;
  }
}